test: update self-hosted plan flow tests to use mocked location href

- Refactored self-hosted plan flow tests to replace the window.location.href setter with a mocked getter/setter for improved clarity and reliability.
- Updated assertions to check the assigned href directly instead of relying on the setter function, ensuring accurate validation of redirection behavior.
- Enhanced test setup and teardown processes for better isolation and consistency across test cases.

api/.env.example

@@ -715,7 +715,6 @@ ANNOTATION_IMPORT_MAX_CONCURRENT=5
 # Sandbox expired records clean configuration
 SANDBOX_EXPIRED_RECORDS_CLEAN_GRACEFUL_PERIOD=21
 SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_SIZE=1000
-SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_MAX_INTERVAL=200
 SANDBOX_EXPIRED_RECORDS_RETENTION_DAYS=30
 SANDBOX_EXPIRED_RECORDS_CLEAN_TASK_LOCK_TTL=90000
 

api/configs/feature/__init__.py

@@ -1344,10 +1344,6 @@ class SandboxExpiredRecordsCleanConfig(BaseSettings):
         description="Maximum number of records to process in each batch",
         default=1000,
     )
-    SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_MAX_INTERVAL: PositiveInt = Field(
-        description="Maximum interval in milliseconds between batches",
-        default=200,
-    )
     SANDBOX_EXPIRED_RECORDS_RETENTION_DAYS: PositiveInt = Field(
         description="Retention days for sandbox expired workflow_run records and message records",
         default=30,

api/controllers/console/remote_files.py

@@ -1,7 +1,6 @@
 import urllib.parse
 
 import httpx
-from flask_restx import Resource
 from pydantic import BaseModel, Field
 
 import services
@@ -11,12 +10,12 @@ from controllers.common.errors import (
     RemoteFileUploadError,
     UnsupportedFileTypeError,
 )
-from controllers.console import console_ns
+from controllers.fastopenapi import console_router
 from core.file import helpers as file_helpers
 from core.helper import ssrf_proxy
 from extensions.ext_database import db
 from fields.file_fields import FileWithSignedUrl, RemoteFileInfo
-from libs.login import current_account_with_tenant, login_required
+from libs.login import current_account_with_tenant
 from services.file_service import FileService
 
 
@@ -24,73 +23,69 @@ class RemoteFileUploadPayload(BaseModel):
     url: str = Field(..., description="URL to fetch")
 
 
-@console_ns.route("/remote-files/<path:url>")
-class GetRemoteFileInfo(Resource):
-    @login_required
-    def get(self, url: str):
-        decoded_url = urllib.parse.unquote(url)
-        resp = ssrf_proxy.head(decoded_url)
+@console_router.get(
+    "/remote-files/<path:url>",
+    response_model=RemoteFileInfo,
+    tags=["console"],
+)
+def get_remote_file_info(url: str) -> RemoteFileInfo:
+    decoded_url = urllib.parse.unquote(url)
+    resp = ssrf_proxy.head(decoded_url)
+    if resp.status_code != httpx.codes.OK:
+        resp = ssrf_proxy.get(decoded_url, timeout=3)
+    resp.raise_for_status()
+    return RemoteFileInfo(
+        file_type=resp.headers.get("Content-Type", "application/octet-stream"),
+        file_length=int(resp.headers.get("Content-Length", 0)),
+    )
+
+
+@console_router.post(
+    "/remote-files/upload",
+    response_model=FileWithSignedUrl,
+    tags=["console"],
+    status_code=201,
+)
+def upload_remote_file(payload: RemoteFileUploadPayload) -> FileWithSignedUrl:
+    url = payload.url
+
+    try:
+        resp = ssrf_proxy.head(url=url)
         if resp.status_code != httpx.codes.OK:
-            resp = ssrf_proxy.get(decoded_url, timeout=3)
-        resp.raise_for_status()
-        return RemoteFileInfo(
-            file_type=resp.headers.get("Content-Type", "application/octet-stream"),
-            file_length=int(resp.headers.get("Content-Length", 0)),
-        ).model_dump(mode="json")
+            resp = ssrf_proxy.get(url=url, timeout=3, follow_redirects=True)
+        if resp.status_code != httpx.codes.OK:
+            raise RemoteFileUploadError(f"Failed to fetch file from {url}: {resp.text}")
+    except httpx.RequestError as e:
+        raise RemoteFileUploadError(f"Failed to fetch file from {url}: {str(e)}")
 
+    file_info = helpers.guess_file_info_from_response(resp)
 
-@console_ns.route("/remote-files/upload")
-class RemoteFileUpload(Resource):
-    @login_required
-    def post(self):
-        payload = RemoteFileUploadPayload.model_validate(console_ns.payload)
-        url = payload.url
+    if not FileService.is_file_size_within_limit(extension=file_info.extension, file_size=file_info.size):
+        raise FileTooLargeError
 
-        # Try to fetch remote file metadata/content first
-        try:
-            resp = ssrf_proxy.head(url=url)
-            if resp.status_code != httpx.codes.OK:
-                resp = ssrf_proxy.get(url=url, timeout=3, follow_redirects=True)
-            if resp.status_code != httpx.codes.OK:
-                # Normalize into a user-friendly error message expected by tests
-                raise RemoteFileUploadError(f"Failed to fetch file from {url}: {resp.text}")
-        except httpx.RequestError as e:
-            raise RemoteFileUploadError(f"Failed to fetch file from {url}: {str(e)}")
+    content = resp.content if resp.request.method == "GET" else ssrf_proxy.get(url).content
 
-        file_info = helpers.guess_file_info_from_response(resp)
-
-        # Enforce file size limit with 400 (Bad Request) per tests' expectation
-        if not FileService.is_file_size_within_limit(extension=file_info.extension, file_size=file_info.size):
-            raise FileTooLargeError()
-
-        # Load content if needed
-        content = resp.content if resp.request.method == "GET" else ssrf_proxy.get(url).content
-
-        try:
-            user, _ = current_account_with_tenant()
-            upload_file = FileService(db.engine).upload_file(
-                filename=file_info.filename,
-                content=content,
-                mimetype=file_info.mimetype,
-                user=user,
-                source_url=url,
-            )
-        except services.errors.file.FileTooLargeError as file_too_large_error:
-            raise FileTooLargeError(file_too_large_error.description)
-        except services.errors.file.UnsupportedFileTypeError:
-            raise UnsupportedFileTypeError()
-
-        # Success: return created resource with 201 status
-        return (
-            FileWithSignedUrl(
-                id=upload_file.id,
-                name=upload_file.name,
-                size=upload_file.size,
-                extension=upload_file.extension,
-                url=file_helpers.get_signed_file_url(upload_file_id=upload_file.id),
-                mime_type=upload_file.mime_type,
-                created_by=upload_file.created_by,
-                created_at=int(upload_file.created_at.timestamp()),
-            ).model_dump(mode="json"),
-            201,
+    try:
+        user, _ = current_account_with_tenant()
+        upload_file = FileService(db.engine).upload_file(
+            filename=file_info.filename,
+            content=content,
+            mimetype=file_info.mimetype,
+            user=user,
+            source_url=url,
         )
+    except services.errors.file.FileTooLargeError as file_too_large_error:
+        raise FileTooLargeError(file_too_large_error.description)
+    except services.errors.file.UnsupportedFileTypeError:
+        raise UnsupportedFileTypeError()
+
+    return FileWithSignedUrl(
+        id=upload_file.id,
+        name=upload_file.name,
+        size=upload_file.size,
+        extension=upload_file.extension,
+        url=file_helpers.get_signed_file_url(upload_file_id=upload_file.id),
+        mime_type=upload_file.mime_type,
+        created_by=upload_file.created_by,
+        created_at=int(upload_file.created_at.timestamp()),
+    )

api/migrations/versions/2026_02_11_1549-fce013ca180e_fix_index_to_optimize_message_clean_job_.py

@@ -1,39 +0,0 @@
-"""fix index to optimize message clean job performance
-
-Revision ID: fce013ca180e
-Revises: f55813ffe2c8
-Create Date: 2026-02-11 15:49:17.603638
-
-"""
-from alembic import op
-import models as models
-import sqlalchemy as sa
-
-
-# revision identifiers, used by Alembic.
-revision = 'fce013ca180e'
-down_revision = 'f55813ffe2c8'
-branch_labels = None
-depends_on = None
-
-
-def upgrade():
-    # ### commands auto generated by Alembic - please adjust! ###
-    with op.batch_alter_table('messages', schema=None) as batch_op:
-        batch_op.drop_index(batch_op.f('message_created_at_idx'))
-
-    with op.batch_alter_table('saved_messages', schema=None) as batch_op:
-        batch_op.create_index('saved_message_message_id_idx', ['message_id'], unique=False)
-
-    # ### end Alembic commands ###
-
-
-def downgrade():
-    # ### commands auto generated by Alembic - please adjust! ###
-    with op.batch_alter_table('saved_messages', schema=None) as batch_op:
-        batch_op.drop_index('saved_message_message_id_idx')
-
-    with op.batch_alter_table('messages', schema=None) as batch_op:
-        batch_op.create_index(batch_op.f('message_created_at_idx'), ['created_at'], unique=False)
-
-    # ### end Alembic commands ###

api/models/model.py

@@ -1040,6 +1040,7 @@ class Message(Base):
         Index("message_end_user_idx", "app_id", "from_source", "from_end_user_id"),
         Index("message_account_idx", "app_id", "from_source", "from_account_id"),
         Index("message_workflow_run_id_idx", "conversation_id", "workflow_run_id"),
+        Index("message_created_at_idx", "created_at"),
         Index("message_app_mode_idx", "app_mode"),
         Index("message_created_at_id_idx", "created_at", "id"),
     )

api/models/web.py

@@ -16,7 +16,6 @@ class SavedMessage(TypeBase):
     __table_args__ = (
         sa.PrimaryKeyConstraint("id", name="saved_message_pkey"),
         sa.Index("saved_message_message_idx", "app_id", "message_id", "created_by_role", "created_by"),
-        sa.Index("saved_message_message_id_idx", "message_id"),
     )
 
     id: Mapped[str] = mapped_column(

api/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "dify-api"
-version = "1.13.0"
+version = "1.12.1"
 requires-python = ">=3.11,<3.13"
 
 dependencies = [
@@ -23,7 +23,7 @@ dependencies = [
     "gevent~=25.9.1",
     "gmpy2~=2.2.1",
     "google-api-core==2.18.0",
-    "google-api-python-client==2.189.0",
+    "google-api-python-client==2.90.0",
     "google-auth==2.29.0",
     "google-auth-httplib2==0.2.0",
     "google-cloud-aiplatform==1.49.0",

api/services/retention/conversation/messages_clean_service.py

@@ -1,13 +1,10 @@
 import datetime
 import logging
-import os
 import random
-import time
 from collections.abc import Sequence
 from typing import cast
 
-import sqlalchemy as sa
-from sqlalchemy import delete, select, tuple_
+from sqlalchemy import delete, select
 from sqlalchemy.engine import CursorResult
 from sqlalchemy.orm import Session
 
@@ -196,15 +193,11 @@ class MessagesCleanService:
             self._end_before,
         )
 
-        max_batch_interval_ms = int(os.environ.get("SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_MAX_INTERVAL", 200))
-
         while True:
             stats["batches"] += 1
-            batch_start = time.monotonic()
 
             # Step 1: Fetch a batch of messages using cursor
             with Session(db.engine, expire_on_commit=False) as session:
-                fetch_messages_start = time.monotonic()
                 msg_stmt = (
                     select(Message.id, Message.app_id, Message.created_at)
                     .where(Message.created_at < self._end_before)
@@ -216,13 +209,13 @@ class MessagesCleanService:
                     msg_stmt = msg_stmt.where(Message.created_at >= self._start_from)
 
                 # Apply cursor condition: (created_at, id) > (last_created_at, last_message_id)
+                # This translates to:
+                #   created_at > last_created_at OR (created_at = last_created_at AND id > last_message_id)
                 if _cursor:
+                    # Continuing from previous batch
                     msg_stmt = msg_stmt.where(
-                        tuple_(Message.created_at, Message.id)
-                        > tuple_(
-                            sa.literal(_cursor[0], type_=sa.DateTime()),
-                            sa.literal(_cursor[1], type_=Message.id.type),
-                        )
+                        (Message.created_at > _cursor[0])
+                        | ((Message.created_at == _cursor[0]) & (Message.id > _cursor[1]))
                     )
 
                 raw_messages = list(session.execute(msg_stmt).all())
@@ -230,12 +223,6 @@ class MessagesCleanService:
                     SimpleMessage(id=msg_id, app_id=app_id, created_at=msg_created_at)
                     for msg_id, app_id, msg_created_at in raw_messages
                 ]
-                logger.info(
-                    "clean_messages (batch %s): fetched %s messages in %sms",
-                    stats["batches"],
-                    len(messages),
-                    int((time.monotonic() - fetch_messages_start) * 1000),
-                )
 
                 # Track total messages fetched across all batches
                 stats["total_messages"] += len(messages)
@@ -254,16 +241,8 @@ class MessagesCleanService:
                     logger.info("clean_messages (batch %s): no app_ids found, skip", stats["batches"])
                     continue
 
-                fetch_apps_start = time.monotonic()
                 app_stmt = select(App.id, App.tenant_id).where(App.id.in_(app_ids))
                 apps = list(session.execute(app_stmt).all())
-                logger.info(
-                    "clean_messages (batch %s): fetched %s apps for %s app_ids in %sms",
-                    stats["batches"],
-                    len(apps),
-                    len(app_ids),
-                    int((time.monotonic() - fetch_apps_start) * 1000),
-                )
 
             if not apps:
                 logger.info("clean_messages (batch %s): no apps found, skip", stats["batches"])
@@ -273,15 +252,7 @@ class MessagesCleanService:
             app_to_tenant: dict[str, str] = {app.id: app.tenant_id for app in apps}
 
             # Step 3: Delegate to policy to determine which messages to delete
-            policy_start = time.monotonic()
             message_ids_to_delete = self._policy.filter_message_ids(messages, app_to_tenant)
-            logger.info(
-                "clean_messages (batch %s): policy selected %s/%s messages in %sms",
-                stats["batches"],
-                len(message_ids_to_delete),
-                len(messages),
-                int((time.monotonic() - policy_start) * 1000),
-            )
 
             if not message_ids_to_delete:
                 logger.info("clean_messages (batch %s): no messages to delete, skip", stats["batches"])
@@ -292,20 +263,14 @@ class MessagesCleanService:
             # Step 4: Batch delete messages and their relations
             if not self._dry_run:
                 with Session(db.engine, expire_on_commit=False) as session:
-                    delete_relations_start = time.monotonic()
                     # Delete related records first
                     self._batch_delete_message_relations(session, message_ids_to_delete)
-                    delete_relations_ms = int((time.monotonic() - delete_relations_start) * 1000)
 
                     # Delete messages
-                    delete_messages_start = time.monotonic()
                     delete_stmt = delete(Message).where(Message.id.in_(message_ids_to_delete))
                     delete_result = cast(CursorResult, session.execute(delete_stmt))
                     messages_deleted = delete_result.rowcount
-                    delete_messages_ms = int((time.monotonic() - delete_messages_start) * 1000)
-                    commit_start = time.monotonic()
                     session.commit()
-                    commit_ms = int((time.monotonic() - commit_start) * 1000)
 
                     stats["total_deleted"] += messages_deleted
 
@@ -315,19 +280,6 @@ class MessagesCleanService:
                         len(messages),
                         messages_deleted,
                     )
-                    logger.info(
-                        "clean_messages (batch %s): relations %sms,  messages %sms, commit %sms, batch total %sms",
-                        stats["batches"],
-                        delete_relations_ms,
-                        delete_messages_ms,
-                        commit_ms,
-                        int((time.monotonic() - batch_start) * 1000),
-                    )
-
-                # Random sleep between batches to avoid overwhelming the database
-                sleep_ms = random.uniform(0, max_batch_interval_ms)  # noqa: S311
-                logger.info("clean_messages (batch %s): sleeping for %.2fms", stats["batches"], sleep_ms)
-                time.sleep(sleep_ms / 1000)
             else:
                 # Log random sample of message IDs that would be deleted (up to 10)
                 sample_size = min(10, len(message_ids_to_delete))

api/services/retention/workflow_run/clear_free_plan_expired_workflow_run_logs.py

@@ -1,8 +1,5 @@
 import datetime
 import logging
-import os
-import random
-import time
 from collections.abc import Iterable, Sequence
 
 import click
@@ -75,12 +72,7 @@ class WorkflowRunCleanup:
         batch_index = 0
         last_seen: tuple[datetime.datetime, str] | None = None
 
-        max_batch_interval_ms = int(os.environ.get("SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_MAX_INTERVAL", 200))
-
         while True:
-            batch_start = time.monotonic()
-
-            fetch_start = time.monotonic()
             run_rows = self.workflow_run_repo.get_runs_batch_by_time_range(
                 start_from=self.window_start,
                 end_before=self.window_end,
@@ -88,30 +80,12 @@ class WorkflowRunCleanup:
                 batch_size=self.batch_size,
             )
             if not run_rows:
-                logger.info("workflow_run_cleanup (batch #%s): no more rows to process", batch_index + 1)
                 break
 
             batch_index += 1
             last_seen = (run_rows[-1].created_at, run_rows[-1].id)
-            logger.info(
-                "workflow_run_cleanup (batch #%s): fetched %s rows in %sms",
-                batch_index,
-                len(run_rows),
-                int((time.monotonic() - fetch_start) * 1000),
-            )
-
             tenant_ids = {row.tenant_id for row in run_rows}
-
-            filter_start = time.monotonic()
             free_tenants = self._filter_free_tenants(tenant_ids)
-            logger.info(
-                "workflow_run_cleanup (batch #%s): filtered %s free tenants from %s tenants in %sms",
-                batch_index,
-                len(free_tenants),
-                len(tenant_ids),
-                int((time.monotonic() - filter_start) * 1000),
-            )
-
             free_runs = [row for row in run_rows if row.tenant_id in free_tenants]
             paid_or_skipped = len(run_rows) - len(free_runs)
 
@@ -130,17 +104,11 @@ class WorkflowRunCleanup:
             total_runs_targeted += len(free_runs)
 
             if self.dry_run:
-                count_start = time.monotonic()
                 batch_counts = self.workflow_run_repo.count_runs_with_related(
                     free_runs,
                     count_node_executions=self._count_node_executions,
                     count_trigger_logs=self._count_trigger_logs,
                 )
-                logger.info(
-                    "workflow_run_cleanup (batch #%s, dry_run): counted related records in %sms",
-                    batch_index,
-                    int((time.monotonic() - count_start) * 1000),
-                )
                 if related_totals is not None:
                     for key in related_totals:
                         related_totals[key] += batch_counts.get(key, 0)
@@ -152,21 +120,14 @@ class WorkflowRunCleanup:
                         fg="yellow",
                     )
                 )
-                logger.info(
-                    "workflow_run_cleanup (batch #%s, dry_run): batch total %sms",
-                    batch_index,
-                    int((time.monotonic() - batch_start) * 1000),
-                )
                 continue
 
             try:
-                delete_start = time.monotonic()
                 counts = self.workflow_run_repo.delete_runs_with_related(
                     free_runs,
                     delete_node_executions=self._delete_node_executions,
                     delete_trigger_logs=self._delete_trigger_logs,
                 )
-                delete_ms = int((time.monotonic() - delete_start) * 1000)
             except Exception:
                 logger.exception("Failed to delete workflow runs batch ending at %s", last_seen[0])
                 raise
@@ -182,17 +143,6 @@ class WorkflowRunCleanup:
                     fg="green",
                 )
             )
-            logger.info(
-                "workflow_run_cleanup (batch #%s): delete %sms, batch total %sms",
-                batch_index,
-                delete_ms,
-                int((time.monotonic() - batch_start) * 1000),
-            )
-
-            # Random sleep between batches to avoid overwhelming the database
-            sleep_ms = random.uniform(0, max_batch_interval_ms)  # noqa: S311
-            logger.info("workflow_run_cleanup (batch #%s): sleeping for %.2fms", batch_index, sleep_ms)
-            time.sleep(sleep_ms / 1000)
 
         if self.dry_run:
             if self.window_start:

api/tests/unit_tests/controllers/console/test_fastopenapi_remote_files.py

@@ -1,286 +1,92 @@
-"""Tests for remote file upload API endpoints using Flask-RESTX."""
-
-import contextlib
+import builtins
 from datetime import datetime
 from types import SimpleNamespace
-from unittest.mock import Mock, patch
+from unittest.mock import patch
 
 import httpx
 import pytest
-from flask import Flask, g
+from flask import Flask
+from flask.views import MethodView
+
+from extensions import ext_fastopenapi
+
+if not hasattr(builtins, "MethodView"):
+    builtins.MethodView = MethodView  # type: ignore[attr-defined]
 
 
 @pytest.fixture
 def app() -> Flask:
-    """Create Flask app for testing."""
     app = Flask(__name__)
     app.config["TESTING"] = True
-    app.config["SECRET_KEY"] = "test-secret-key"
     return app
 
 
-@pytest.fixture
-def client(app):
-    """Create test client with console blueprint registered."""
-    from controllers.console import bp
+def test_console_remote_files_fastopenapi_get_info(app: Flask):
+    ext_fastopenapi.init_app(app)
 
-    app.register_blueprint(bp)
-    return app.test_client()
-
-
-@pytest.fixture
-def mock_account():
-    """Create a mock account for testing."""
-    from models import Account
-
-    account = Mock(spec=Account)
-    account.id = "test-account-id"
-    account.current_tenant_id = "test-tenant-id"
-    return account
-
-
-@pytest.fixture
-def auth_ctx(app, mock_account):
-    """Context manager to set auth/tenant context in flask.g for a request."""
-
-    @contextlib.contextmanager
-    def _ctx():
-        with app.test_request_context():
-            g._login_user = mock_account
-            g._current_tenant = mock_account.current_tenant_id
-            yield
-
-    return _ctx
-
-
-class TestGetRemoteFileInfo:
-    """Test GET /console/api/remote-files/<path:url> endpoint."""
-
-    def test_get_remote_file_info_success(self, app, client, mock_account):
-        """Test successful retrieval of remote file info."""
-        response = httpx.Response(
-            200,
-            request=httpx.Request("HEAD", "http://example.com/file.txt"),
-            headers={"Content-Type": "text/plain", "Content-Length": "1024"},
-        )
-
-        with (
-            patch(
-                "controllers.console.remote_files.current_account_with_tenant",
-                return_value=(mock_account, "test-tenant-id"),
-            ),
-            patch("controllers.console.remote_files.ssrf_proxy.head", return_value=response),
-            patch("libs.login.check_csrf_token", return_value=None),
-        ):
-            with app.test_request_context():
-                g._login_user = mock_account
-                g._current_tenant = mock_account.current_tenant_id
-                encoded_url = "http%3A%2F%2Fexample.com%2Ffile.txt"
-                resp = client.get(f"/console/api/remote-files/{encoded_url}")
-
-        assert resp.status_code == 200
-        data = resp.get_json()
-        assert data["file_type"] == "text/plain"
-        assert data["file_length"] == 1024
-
-    def test_get_remote_file_info_fallback_to_get_on_head_failure(self, app, client, mock_account):
-        """Test fallback to GET when HEAD returns non-200 status."""
-        head_response = httpx.Response(
-            404,
-            request=httpx.Request("HEAD", "http://example.com/file.pdf"),
-        )
-        get_response = httpx.Response(
-            200,
-            request=httpx.Request("GET", "http://example.com/file.pdf"),
-            headers={"Content-Type": "application/pdf", "Content-Length": "2048"},
-        )
-
-        with (
-            patch(
-                "controllers.console.remote_files.current_account_with_tenant",
-                return_value=(mock_account, "test-tenant-id"),
-            ),
-            patch("controllers.console.remote_files.ssrf_proxy.head", return_value=head_response),
-            patch("controllers.console.remote_files.ssrf_proxy.get", return_value=get_response),
-            patch("libs.login.check_csrf_token", return_value=None),
-        ):
-            with app.test_request_context():
-                g._login_user = mock_account
-                g._current_tenant = mock_account.current_tenant_id
-                encoded_url = "http%3A%2F%2Fexample.com%2Ffile.pdf"
-                resp = client.get(f"/console/api/remote-files/{encoded_url}")
-
-        assert resp.status_code == 200
-        data = resp.get_json()
-        assert data["file_type"] == "application/pdf"
-        assert data["file_length"] == 2048
-
-
-class TestRemoteFileUpload:
-    """Test POST /console/api/remote-files/upload endpoint."""
-
-    @pytest.mark.parametrize(
-        ("head_status", "use_get"),
-        [
-            (200, False),  # HEAD succeeds
-            (405, True),  # HEAD fails -> fallback GET
-        ],
+    response = httpx.Response(
+        200,
+        request=httpx.Request("HEAD", "http://example.com/file.txt"),
+        headers={"Content-Type": "text/plain", "Content-Length": "10"},
     )
-    def test_upload_remote_file_success_paths(self, client, mock_account, auth_ctx, head_status, use_get):
-        url = "http://example.com/file.pdf"
-        head_resp = httpx.Response(
-            head_status,
-            request=httpx.Request("HEAD", url),
-            headers={"Content-Type": "application/pdf", "Content-Length": "1024"},
-        )
-        get_resp = httpx.Response(
-            200,
-            request=httpx.Request("GET", url),
-            headers={"Content-Type": "application/pdf", "Content-Length": "1024"},
-            content=b"file content",
-        )
 
-        file_info = SimpleNamespace(
-            extension="pdf",
-            size=1024,
-            filename="file.pdf",
-            mimetype="application/pdf",
-        )
-        uploaded_file = SimpleNamespace(
-            id="uploaded-file-id",
-            name="file.pdf",
-            size=1024,
-            extension="pdf",
-            mime_type="application/pdf",
-            created_by="test-account-id",
-            created_at=datetime(2024, 1, 1, 12, 0, 0),
-        )
+    with patch("controllers.console.remote_files.ssrf_proxy.head", return_value=response):
+        client = app.test_client()
+        encoded_url = "http%3A%2F%2Fexample.com%2Ffile.txt"
+        resp = client.get(f"/console/api/remote-files/{encoded_url}")
 
-        with (
-            patch(
-                "controllers.console.remote_files.current_account_with_tenant",
-                return_value=(mock_account, "test-tenant-id"),
-            ),
-            patch("controllers.console.remote_files.ssrf_proxy.head", return_value=head_resp) as p_head,
-            patch("controllers.console.remote_files.ssrf_proxy.get", return_value=get_resp) as p_get,
-            patch(
-                "controllers.console.remote_files.helpers.guess_file_info_from_response",
-                return_value=file_info,
-            ),
-            patch(
-                "controllers.console.remote_files.FileService.is_file_size_within_limit",
-                return_value=True,
-            ),
-            patch("controllers.console.remote_files.db", spec=["engine"]),
-            patch("controllers.console.remote_files.FileService") as mock_file_service,
-            patch(
-                "controllers.console.remote_files.file_helpers.get_signed_file_url",
-                return_value="http://example.com/signed-url",
-            ),
-            patch("libs.login.check_csrf_token", return_value=None),
-        ):
-            mock_file_service.return_value.upload_file.return_value = uploaded_file
+    assert resp.status_code == 200
+    assert resp.get_json() == {"file_type": "text/plain", "file_length": 10}
 
-            with auth_ctx():
-                resp = client.post(
-                    "/console/api/remote-files/upload",
-                    json={"url": url},
-                )
 
-        assert resp.status_code == 201
-        p_head.assert_called_once()
-        # GET is used either for fallback (HEAD fails) or to fetch content after HEAD succeeds
-        p_get.assert_called_once()
-        mock_file_service.return_value.upload_file.assert_called_once()
+def test_console_remote_files_fastopenapi_upload(app: Flask):
+    ext_fastopenapi.init_app(app)
 
-        data = resp.get_json()
-        assert data["id"] == "uploaded-file-id"
-        assert data["name"] == "file.pdf"
-        assert data["size"] == 1024
-        assert data["extension"] == "pdf"
-        assert data["url"] == "http://example.com/signed-url"
-        assert data["mime_type"] == "application/pdf"
-        assert data["created_by"] == "test-account-id"
-
-    @pytest.mark.parametrize(
-        ("size_ok", "raises", "expected_status", "expected_msg"),
-        [
-            # When size check fails in controller, API returns 413 with message "File size exceeded..."
-            (False, None, 413, "file size exceeded"),
-            # When service raises unsupported type, controller maps to 415 with message "File type not allowed."
-            (True, "unsupported", 415, "file type not allowed"),
-        ],
+    head_response = httpx.Response(
+        200,
+        request=httpx.Request("GET", "http://example.com/file.txt"),
+        content=b"hello",
     )
-    def test_upload_remote_file_errors(
-        self, client, mock_account, auth_ctx, size_ok, raises, expected_status, expected_msg
+    file_info = SimpleNamespace(
+        extension="txt",
+        size=5,
+        filename="file.txt",
+        mimetype="text/plain",
+    )
+    uploaded = SimpleNamespace(
+        id="file-id",
+        name="file.txt",
+        size=5,
+        extension="txt",
+        mime_type="text/plain",
+        created_by="user-id",
+        created_at=datetime(2024, 1, 1),
+    )
+
+    with (
+        patch("controllers.console.remote_files.db", new=SimpleNamespace(engine=object())),
+        patch("controllers.console.remote_files.ssrf_proxy.head", return_value=head_response),
+        patch("controllers.console.remote_files.helpers.guess_file_info_from_response", return_value=file_info),
+        patch("controllers.console.remote_files.FileService.is_file_size_within_limit", return_value=True),
+        patch("controllers.console.remote_files.FileService.__init__", return_value=None),
+        patch("controllers.console.remote_files.current_account_with_tenant", return_value=(object(), "tenant-id")),
+        patch("controllers.console.remote_files.FileService.upload_file", return_value=uploaded),
+        patch("controllers.console.remote_files.file_helpers.get_signed_file_url", return_value="signed-url"),
     ):
-        url = "http://example.com/x.pdf"
-        head_resp = httpx.Response(
-            200,
-            request=httpx.Request("HEAD", url),
-            headers={"Content-Type": "application/pdf", "Content-Length": "9"},
+        client = app.test_client()
+        resp = client.post(
+            "/console/api/remote-files/upload",
+            json={"url": "http://example.com/file.txt"},
         )
-        file_info = SimpleNamespace(extension="pdf", size=9, filename="x.pdf", mimetype="application/pdf")
 
-        with (
-            patch(
-                "controllers.console.remote_files.current_account_with_tenant",
-                return_value=(mock_account, "test-tenant-id"),
-            ),
-            patch("controllers.console.remote_files.ssrf_proxy.head", return_value=head_resp),
-            patch(
-                "controllers.console.remote_files.helpers.guess_file_info_from_response",
-                return_value=file_info,
-            ),
-            patch(
-                "controllers.console.remote_files.FileService.is_file_size_within_limit",
-                return_value=size_ok,
-            ),
-            patch("controllers.console.remote_files.db", spec=["engine"]),
-            patch("libs.login.check_csrf_token", return_value=None),
-        ):
-            if raises == "unsupported":
-                from services.errors.file import UnsupportedFileTypeError
-
-                with patch("controllers.console.remote_files.FileService") as mock_file_service:
-                    mock_file_service.return_value.upload_file.side_effect = UnsupportedFileTypeError("bad")
-                    with auth_ctx():
-                        resp = client.post(
-                            "/console/api/remote-files/upload",
-                            json={"url": url},
-                        )
-            else:
-                with auth_ctx():
-                    resp = client.post(
-                        "/console/api/remote-files/upload",
-                        json={"url": url},
-                    )
-
-        assert resp.status_code == expected_status
-        data = resp.get_json()
-        msg = (data.get("error") or {}).get("message") or data.get("message", "")
-        assert expected_msg in msg.lower()
-
-    def test_upload_remote_file_fetch_failure(self, client, mock_account, auth_ctx):
-        """Test upload when fetching of remote file fails."""
-        with (
-            patch(
-                "controllers.console.remote_files.current_account_with_tenant",
-                return_value=(mock_account, "test-tenant-id"),
-            ),
-            patch(
-                "controllers.console.remote_files.ssrf_proxy.head",
-                side_effect=httpx.RequestError("Connection failed"),
-            ),
-            patch("libs.login.check_csrf_token", return_value=None),
-        ):
-            with auth_ctx():
-                resp = client.post(
-                    "/console/api/remote-files/upload",
-                    json={"url": "http://unreachable.com/file.pdf"},
-                )
-
-        assert resp.status_code == 400
-        data = resp.get_json()
-        msg = (data.get("error") or {}).get("message") or data.get("message", "")
-        assert "failed to fetch" in msg.lower()
+    assert resp.status_code == 201
+    assert resp.get_json() == {
+        "id": "file-id",
+        "name": "file.txt",
+        "size": 5,
+        "extension": "txt",
+        "url": "signed-url",
+        "mime_type": "text/plain",
+        "created_by": "user-id",
+        "created_at": int(uploaded.created_at.timestamp()),
+    }

api/tests/unit_tests/core/schemas/test_resolver.py

@@ -496,9 +496,6 @@ class TestSchemaResolverClass:
         avg_time_no_cache = sum(results1) / len(results1)
 
         # Second run (with cache) - run multiple times
-        # Warm up cache first
-        resolve_dify_schema_refs(schema)
-
         results2 = []
         for _ in range(3):
             start = time.perf_counter()

api/uv.lock

@@ -1237,47 +1237,49 @@ wheels = [
 
 [[package]]
 name = "cryptography"
-version = "46.0.5"
+version = "46.0.3"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "cffi", marker = "platform_python_implementation != 'PyPy'" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/60/04/ee2a9e8542e4fa2773b81771ff8349ff19cdd56b7258a0cc442639052edb/cryptography-46.0.5.tar.gz", hash = "sha256:abace499247268e3757271b2f1e244b36b06f8515cf27c4d49468fc9eb16e93d", size = 750064, upload-time = "2026-02-10T19:18:38.255Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/9f/33/c00162f49c0e2fe8064a62cb92b93e50c74a72bc370ab92f86112b33ff62/cryptography-46.0.3.tar.gz", hash = "sha256:a8b17438104fed022ce745b362294d9ce35b4c2e45c1d958ad4a4b019285f4a1", size = 749258, upload-time = "2025-10-15T23:18:31.74Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/f7/81/b0bb27f2ba931a65409c6b8a8b358a7f03c0e46eceacddff55f7c84b1f3b/cryptography-46.0.5-cp311-abi3-macosx_10_9_universal2.whl", hash = "sha256:351695ada9ea9618b3500b490ad54c739860883df6c1f555e088eaf25b1bbaad", size = 7176289, upload-time = "2026-02-10T19:17:08.274Z" },
-    { url = "https://files.pythonhosted.org/packages/ff/9e/6b4397a3e3d15123de3b1806ef342522393d50736c13b20ec4c9ea6693a6/cryptography-46.0.5-cp311-abi3-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:c18ff11e86df2e28854939acde2d003f7984f721eba450b56a200ad90eeb0e6b", size = 4275637, upload-time = "2026-02-10T19:17:10.53Z" },
-    { url = "https://files.pythonhosted.org/packages/63/e7/471ab61099a3920b0c77852ea3f0ea611c9702f651600397ac567848b897/cryptography-46.0.5-cp311-abi3-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:4d7e3d356b8cd4ea5aff04f129d5f66ebdc7b6f8eae802b93739ed520c47c79b", size = 4424742, upload-time = "2026-02-10T19:17:12.388Z" },
-    { url = "https://files.pythonhosted.org/packages/37/53/a18500f270342d66bf7e4d9f091114e31e5ee9e7375a5aba2e85a91e0044/cryptography-46.0.5-cp311-abi3-manylinux_2_28_aarch64.whl", hash = "sha256:50bfb6925eff619c9c023b967d5b77a54e04256c4281b0e21336a130cd7fc263", size = 4277528, upload-time = "2026-02-10T19:17:13.853Z" },
-    { url = "https://files.pythonhosted.org/packages/22/29/c2e812ebc38c57b40e7c583895e73c8c5adb4d1e4a0cc4c5a4fdab2b1acc/cryptography-46.0.5-cp311-abi3-manylinux_2_28_ppc64le.whl", hash = "sha256:803812e111e75d1aa73690d2facc295eaefd4439be1023fefc4995eaea2af90d", size = 4947993, upload-time = "2026-02-10T19:17:15.618Z" },
-    { url = "https://files.pythonhosted.org/packages/6b/e7/237155ae19a9023de7e30ec64e5d99a9431a567407ac21170a046d22a5a3/cryptography-46.0.5-cp311-abi3-manylinux_2_28_x86_64.whl", hash = "sha256:3ee190460e2fbe447175cda91b88b84ae8322a104fc27766ad09428754a618ed", size = 4456855, upload-time = "2026-02-10T19:17:17.221Z" },
-    { url = "https://files.pythonhosted.org/packages/2d/87/fc628a7ad85b81206738abbd213b07702bcbdada1dd43f72236ef3cffbb5/cryptography-46.0.5-cp311-abi3-manylinux_2_31_armv7l.whl", hash = "sha256:f145bba11b878005c496e93e257c1e88f154d278d2638e6450d17e0f31e558d2", size = 3984635, upload-time = "2026-02-10T19:17:18.792Z" },
-    { url = "https://files.pythonhosted.org/packages/84/29/65b55622bde135aedf4565dc509d99b560ee4095e56989e815f8fd2aa910/cryptography-46.0.5-cp311-abi3-manylinux_2_34_aarch64.whl", hash = "sha256:e9251e3be159d1020c4030bd2e5f84d6a43fe54b6c19c12f51cde9542a2817b2", size = 4277038, upload-time = "2026-02-10T19:17:20.256Z" },
-    { url = "https://files.pythonhosted.org/packages/bc/36/45e76c68d7311432741faf1fbf7fac8a196a0a735ca21f504c75d37e2558/cryptography-46.0.5-cp311-abi3-manylinux_2_34_ppc64le.whl", hash = "sha256:47fb8a66058b80e509c47118ef8a75d14c455e81ac369050f20ba0d23e77fee0", size = 4912181, upload-time = "2026-02-10T19:17:21.825Z" },
-    { url = "https://files.pythonhosted.org/packages/6d/1a/c1ba8fead184d6e3d5afcf03d569acac5ad063f3ac9fb7258af158f7e378/cryptography-46.0.5-cp311-abi3-manylinux_2_34_x86_64.whl", hash = "sha256:4c3341037c136030cb46e4b1e17b7418ea4cbd9dd207e4a6f3b2b24e0d4ac731", size = 4456482, upload-time = "2026-02-10T19:17:25.133Z" },
-    { url = "https://files.pythonhosted.org/packages/f9/e5/3fb22e37f66827ced3b902cf895e6a6bc1d095b5b26be26bd13c441fdf19/cryptography-46.0.5-cp311-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:890bcb4abd5a2d3f852196437129eb3667d62630333aacc13dfd470fad3aaa82", size = 4405497, upload-time = "2026-02-10T19:17:26.66Z" },
-    { url = "https://files.pythonhosted.org/packages/1a/df/9d58bb32b1121a8a2f27383fabae4d63080c7ca60b9b5c88be742be04ee7/cryptography-46.0.5-cp311-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:80a8d7bfdf38f87ca30a5391c0c9ce4ed2926918e017c29ddf643d0ed2778ea1", size = 4667819, upload-time = "2026-02-10T19:17:28.569Z" },
-    { url = "https://files.pythonhosted.org/packages/ea/ed/325d2a490c5e94038cdb0117da9397ece1f11201f425c4e9c57fe5b9f08b/cryptography-46.0.5-cp311-abi3-win32.whl", hash = "sha256:60ee7e19e95104d4c03871d7d7dfb3d22ef8a9b9c6778c94e1c8fcc8365afd48", size = 3028230, upload-time = "2026-02-10T19:17:30.518Z" },
-    { url = "https://files.pythonhosted.org/packages/e9/5a/ac0f49e48063ab4255d9e3b79f5def51697fce1a95ea1370f03dc9db76f6/cryptography-46.0.5-cp311-abi3-win_amd64.whl", hash = "sha256:38946c54b16c885c72c4f59846be9743d699eee2b69b6988e0a00a01f46a61a4", size = 3480909, upload-time = "2026-02-10T19:17:32.083Z" },
-    { url = "https://files.pythonhosted.org/packages/e2/fa/a66aa722105ad6a458bebd64086ca2b72cdd361fed31763d20390f6f1389/cryptography-46.0.5-cp38-abi3-macosx_10_9_universal2.whl", hash = "sha256:4108d4c09fbbf2789d0c926eb4152ae1760d5a2d97612b92d508d96c861e4d31", size = 7170514, upload-time = "2026-02-10T19:17:56.267Z" },
-    { url = "https://files.pythonhosted.org/packages/0f/04/c85bdeab78c8bc77b701bf0d9bdcf514c044e18a46dcff330df5448631b0/cryptography-46.0.5-cp38-abi3-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:7d1f30a86d2757199cb2d56e48cce14deddf1f9c95f1ef1b64ee91ea43fe2e18", size = 4275349, upload-time = "2026-02-10T19:17:58.419Z" },
-    { url = "https://files.pythonhosted.org/packages/5c/32/9b87132a2f91ee7f5223b091dc963055503e9b442c98fc0b8a5ca765fab0/cryptography-46.0.5-cp38-abi3-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:039917b0dc418bb9f6edce8a906572d69e74bd330b0b3fea4f79dab7f8ddd235", size = 4420667, upload-time = "2026-02-10T19:18:00.619Z" },
-    { url = "https://files.pythonhosted.org/packages/a1/a6/a7cb7010bec4b7c5692ca6f024150371b295ee1c108bdc1c400e4c44562b/cryptography-46.0.5-cp38-abi3-manylinux_2_28_aarch64.whl", hash = "sha256:ba2a27ff02f48193fc4daeadf8ad2590516fa3d0adeeb34336b96f7fa64c1e3a", size = 4276980, upload-time = "2026-02-10T19:18:02.379Z" },
-    { url = "https://files.pythonhosted.org/packages/8e/7c/c4f45e0eeff9b91e3f12dbd0e165fcf2a38847288fcfd889deea99fb7b6d/cryptography-46.0.5-cp38-abi3-manylinux_2_28_ppc64le.whl", hash = "sha256:61aa400dce22cb001a98014f647dc21cda08f7915ceb95df0c9eaf84b4b6af76", size = 4939143, upload-time = "2026-02-10T19:18:03.964Z" },
-    { url = "https://files.pythonhosted.org/packages/37/19/e1b8f964a834eddb44fa1b9a9976f4e414cbb7aa62809b6760c8803d22d1/cryptography-46.0.5-cp38-abi3-manylinux_2_28_x86_64.whl", hash = "sha256:3ce58ba46e1bc2aac4f7d9290223cead56743fa6ab94a5d53292ffaac6a91614", size = 4453674, upload-time = "2026-02-10T19:18:05.588Z" },
-    { url = "https://files.pythonhosted.org/packages/db/ed/db15d3956f65264ca204625597c410d420e26530c4e2943e05a0d2f24d51/cryptography-46.0.5-cp38-abi3-manylinux_2_31_armv7l.whl", hash = "sha256:420d0e909050490d04359e7fdb5ed7e667ca5c3c402b809ae2563d7e66a92229", size = 3978801, upload-time = "2026-02-10T19:18:07.167Z" },
-    { url = "https://files.pythonhosted.org/packages/41/e2/df40a31d82df0a70a0daf69791f91dbb70e47644c58581d654879b382d11/cryptography-46.0.5-cp38-abi3-manylinux_2_34_aarch64.whl", hash = "sha256:582f5fcd2afa31622f317f80426a027f30dc792e9c80ffee87b993200ea115f1", size = 4276755, upload-time = "2026-02-10T19:18:09.813Z" },
-    { url = "https://files.pythonhosted.org/packages/33/45/726809d1176959f4a896b86907b98ff4391a8aa29c0aaaf9450a8a10630e/cryptography-46.0.5-cp38-abi3-manylinux_2_34_ppc64le.whl", hash = "sha256:bfd56bb4b37ed4f330b82402f6f435845a5f5648edf1ad497da51a8452d5d62d", size = 4901539, upload-time = "2026-02-10T19:18:11.263Z" },
-    { url = "https://files.pythonhosted.org/packages/99/0f/a3076874e9c88ecb2ecc31382f6e7c21b428ede6f55aafa1aa272613e3cd/cryptography-46.0.5-cp38-abi3-manylinux_2_34_x86_64.whl", hash = "sha256:a3d507bb6a513ca96ba84443226af944b0f7f47dcc9a399d110cd6146481d24c", size = 4452794, upload-time = "2026-02-10T19:18:12.914Z" },
-    { url = "https://files.pythonhosted.org/packages/02/ef/ffeb542d3683d24194a38f66ca17c0a4b8bf10631feef44a7ef64e631b1a/cryptography-46.0.5-cp38-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:9f16fbdf4da055efb21c22d81b89f155f02ba420558db21288b3d0035bafd5f4", size = 4404160, upload-time = "2026-02-10T19:18:14.375Z" },
-    { url = "https://files.pythonhosted.org/packages/96/93/682d2b43c1d5f1406ed048f377c0fc9fc8f7b0447a478d5c65ab3d3a66eb/cryptography-46.0.5-cp38-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:ced80795227d70549a411a4ab66e8ce307899fad2220ce5ab2f296e687eacde9", size = 4667123, upload-time = "2026-02-10T19:18:15.886Z" },
-    { url = "https://files.pythonhosted.org/packages/45/2d/9c5f2926cb5300a8eefc3f4f0b3f3df39db7f7ce40c8365444c49363cbda/cryptography-46.0.5-cp38-abi3-win32.whl", hash = "sha256:02f547fce831f5096c9a567fd41bc12ca8f11df260959ecc7c3202555cc47a72", size = 3010220, upload-time = "2026-02-10T19:18:17.361Z" },
-    { url = "https://files.pythonhosted.org/packages/48/ef/0c2f4a8e31018a986949d34a01115dd057bf536905dca38897bacd21fac3/cryptography-46.0.5-cp38-abi3-win_amd64.whl", hash = "sha256:556e106ee01aa13484ce9b0239bca667be5004efb0aabbed28d353df86445595", size = 3467050, upload-time = "2026-02-10T19:18:18.899Z" },
-    { url = "https://files.pythonhosted.org/packages/eb/dd/2d9fdb07cebdf3d51179730afb7d5e576153c6744c3ff8fded23030c204e/cryptography-46.0.5-pp311-pypy311_pp73-macosx_11_0_arm64.whl", hash = "sha256:3b4995dc971c9fb83c25aa44cf45f02ba86f71ee600d81091c2f0cbae116b06c", size = 3476964, upload-time = "2026-02-10T19:18:20.687Z" },
-    { url = "https://files.pythonhosted.org/packages/e9/6f/6cc6cc9955caa6eaf83660b0da2b077c7fe8ff9950a3c5e45d605038d439/cryptography-46.0.5-pp311-pypy311_pp73-manylinux_2_28_aarch64.whl", hash = "sha256:bc84e875994c3b445871ea7181d424588171efec3e185dced958dad9e001950a", size = 4218321, upload-time = "2026-02-10T19:18:22.349Z" },
-    { url = "https://files.pythonhosted.org/packages/3e/5d/c4da701939eeee699566a6c1367427ab91a8b7088cc2328c09dbee940415/cryptography-46.0.5-pp311-pypy311_pp73-manylinux_2_28_x86_64.whl", hash = "sha256:2ae6971afd6246710480e3f15824ed3029a60fc16991db250034efd0b9fb4356", size = 4381786, upload-time = "2026-02-10T19:18:24.529Z" },
-    { url = "https://files.pythonhosted.org/packages/ac/97/a538654732974a94ff96c1db621fa464f455c02d4bb7d2652f4edc21d600/cryptography-46.0.5-pp311-pypy311_pp73-manylinux_2_34_aarch64.whl", hash = "sha256:d861ee9e76ace6cf36a6a89b959ec08e7bc2493ee39d07ffe5acb23ef46d27da", size = 4217990, upload-time = "2026-02-10T19:18:25.957Z" },
-    { url = "https://files.pythonhosted.org/packages/ae/11/7e500d2dd3ba891197b9efd2da5454b74336d64a7cc419aa7327ab74e5f6/cryptography-46.0.5-pp311-pypy311_pp73-manylinux_2_34_x86_64.whl", hash = "sha256:2b7a67c9cd56372f3249b39699f2ad479f6991e62ea15800973b956f4b73e257", size = 4381252, upload-time = "2026-02-10T19:18:27.496Z" },
-    { url = "https://files.pythonhosted.org/packages/bc/58/6b3d24e6b9bc474a2dcdee65dfd1f008867015408a271562e4b690561a4d/cryptography-46.0.5-pp311-pypy311_pp73-win_amd64.whl", hash = "sha256:8456928655f856c6e1533ff59d5be76578a7157224dbd9ce6872f25055ab9ab7", size = 3407605, upload-time = "2026-02-10T19:18:29.233Z" },
+    { url = "https://files.pythonhosted.org/packages/1d/42/9c391dd801d6cf0d561b5890549d4b27bafcc53b39c31a817e69d87c625b/cryptography-46.0.3-cp311-abi3-macosx_10_9_universal2.whl", hash = "sha256:109d4ddfadf17e8e7779c39f9b18111a09efb969a301a31e987416a0191ed93a", size = 7225004, upload-time = "2025-10-15T23:16:52.239Z" },
+    { url = "https://files.pythonhosted.org/packages/1c/67/38769ca6b65f07461eb200e85fc1639b438bdc667be02cf7f2cd6a64601c/cryptography-46.0.3-cp311-abi3-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:09859af8466b69bc3c27bdf4f5d84a665e0f7ab5088412e9e2ec49758eca5cbc", size = 4296667, upload-time = "2025-10-15T23:16:54.369Z" },
+    { url = "https://files.pythonhosted.org/packages/5c/49/498c86566a1d80e978b42f0d702795f69887005548c041636df6ae1ca64c/cryptography-46.0.3-cp311-abi3-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:01ca9ff2885f3acc98c29f1860552e37f6d7c7d013d7334ff2a9de43a449315d", size = 4450807, upload-time = "2025-10-15T23:16:56.414Z" },
+    { url = "https://files.pythonhosted.org/packages/4b/0a/863a3604112174c8624a2ac3c038662d9e59970c7f926acdcfaed8d61142/cryptography-46.0.3-cp311-abi3-manylinux_2_28_aarch64.whl", hash = "sha256:6eae65d4c3d33da080cff9c4ab1f711b15c1d9760809dad6ea763f3812d254cb", size = 4299615, upload-time = "2025-10-15T23:16:58.442Z" },
+    { url = "https://files.pythonhosted.org/packages/64/02/b73a533f6b64a69f3cd3872acb6ebc12aef924d8d103133bb3ea750dc703/cryptography-46.0.3-cp311-abi3-manylinux_2_28_armv7l.manylinux_2_31_armv7l.whl", hash = "sha256:e5bf0ed4490068a2e72ac03d786693adeb909981cc596425d09032d372bcc849", size = 4016800, upload-time = "2025-10-15T23:17:00.378Z" },
+    { url = "https://files.pythonhosted.org/packages/25/d5/16e41afbfa450cde85a3b7ec599bebefaef16b5c6ba4ec49a3532336ed72/cryptography-46.0.3-cp311-abi3-manylinux_2_28_ppc64le.whl", hash = "sha256:5ecfccd2329e37e9b7112a888e76d9feca2347f12f37918facbb893d7bb88ee8", size = 4984707, upload-time = "2025-10-15T23:17:01.98Z" },
+    { url = "https://files.pythonhosted.org/packages/c9/56/e7e69b427c3878352c2fb9b450bd0e19ed552753491d39d7d0a2f5226d41/cryptography-46.0.3-cp311-abi3-manylinux_2_28_x86_64.whl", hash = "sha256:a2c0cd47381a3229c403062f764160d57d4d175e022c1df84e168c6251a22eec", size = 4482541, upload-time = "2025-10-15T23:17:04.078Z" },
+    { url = "https://files.pythonhosted.org/packages/78/f6/50736d40d97e8483172f1bb6e698895b92a223dba513b0ca6f06b2365339/cryptography-46.0.3-cp311-abi3-manylinux_2_34_aarch64.whl", hash = "sha256:549e234ff32571b1f4076ac269fcce7a808d3bf98b76c8dd560e42dbc66d7d91", size = 4299464, upload-time = "2025-10-15T23:17:05.483Z" },
+    { url = "https://files.pythonhosted.org/packages/00/de/d8e26b1a855f19d9994a19c702fa2e93b0456beccbcfe437eda00e0701f2/cryptography-46.0.3-cp311-abi3-manylinux_2_34_ppc64le.whl", hash = "sha256:c0a7bb1a68a5d3471880e264621346c48665b3bf1c3759d682fc0864c540bd9e", size = 4950838, upload-time = "2025-10-15T23:17:07.425Z" },
+    { url = "https://files.pythonhosted.org/packages/8f/29/798fc4ec461a1c9e9f735f2fc58741b0daae30688f41b2497dcbc9ed1355/cryptography-46.0.3-cp311-abi3-manylinux_2_34_x86_64.whl", hash = "sha256:10b01676fc208c3e6feeb25a8b83d81767e8059e1fe86e1dc62d10a3018fa926", size = 4481596, upload-time = "2025-10-15T23:17:09.343Z" },
+    { url = "https://files.pythonhosted.org/packages/15/8d/03cd48b20a573adfff7652b76271078e3045b9f49387920e7f1f631d125e/cryptography-46.0.3-cp311-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:0abf1ffd6e57c67e92af68330d05760b7b7efb243aab8377e583284dbab72c71", size = 4426782, upload-time = "2025-10-15T23:17:11.22Z" },
+    { url = "https://files.pythonhosted.org/packages/fa/b1/ebacbfe53317d55cf33165bda24c86523497a6881f339f9aae5c2e13e57b/cryptography-46.0.3-cp311-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:a04bee9ab6a4da801eb9b51f1b708a1b5b5c9eb48c03f74198464c66f0d344ac", size = 4698381, upload-time = "2025-10-15T23:17:12.829Z" },
+    { url = "https://files.pythonhosted.org/packages/96/92/8a6a9525893325fc057a01f654d7efc2c64b9de90413adcf605a85744ff4/cryptography-46.0.3-cp311-abi3-win32.whl", hash = "sha256:f260d0d41e9b4da1ed1e0f1ce571f97fe370b152ab18778e9e8f67d6af432018", size = 3055988, upload-time = "2025-10-15T23:17:14.65Z" },
+    { url = "https://files.pythonhosted.org/packages/7e/bf/80fbf45253ea585a1e492a6a17efcb93467701fa79e71550a430c5e60df0/cryptography-46.0.3-cp311-abi3-win_amd64.whl", hash = "sha256:a9a3008438615669153eb86b26b61e09993921ebdd75385ddd748702c5adfddb", size = 3514451, upload-time = "2025-10-15T23:17:16.142Z" },
+    { url = "https://files.pythonhosted.org/packages/2e/af/9b302da4c87b0beb9db4e756386a7c6c5b8003cd0e742277888d352ae91d/cryptography-46.0.3-cp311-abi3-win_arm64.whl", hash = "sha256:5d7f93296ee28f68447397bf5198428c9aeeab45705a55d53a6343455dcb2c3c", size = 2928007, upload-time = "2025-10-15T23:17:18.04Z" },
+    { url = "https://files.pythonhosted.org/packages/fd/23/45fe7f376a7df8daf6da3556603b36f53475a99ce4faacb6ba2cf3d82021/cryptography-46.0.3-cp38-abi3-macosx_10_9_universal2.whl", hash = "sha256:cb3d760a6117f621261d662bccc8ef5bc32ca673e037c83fbe565324f5c46936", size = 7218248, upload-time = "2025-10-15T23:17:46.294Z" },
+    { url = "https://files.pythonhosted.org/packages/27/32/b68d27471372737054cbd34c84981f9edbc24fe67ca225d389799614e27f/cryptography-46.0.3-cp38-abi3-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:4b7387121ac7d15e550f5cb4a43aef2559ed759c35df7336c402bb8275ac9683", size = 4294089, upload-time = "2025-10-15T23:17:48.269Z" },
+    { url = "https://files.pythonhosted.org/packages/26/42/fa8389d4478368743e24e61eea78846a0006caffaf72ea24a15159215a14/cryptography-46.0.3-cp38-abi3-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:15ab9b093e8f09daab0f2159bb7e47532596075139dd74365da52ecc9cb46c5d", size = 4440029, upload-time = "2025-10-15T23:17:49.837Z" },
+    { url = "https://files.pythonhosted.org/packages/5f/eb/f483db0ec5ac040824f269e93dd2bd8a21ecd1027e77ad7bdf6914f2fd80/cryptography-46.0.3-cp38-abi3-manylinux_2_28_aarch64.whl", hash = "sha256:46acf53b40ea38f9c6c229599a4a13f0d46a6c3fa9ef19fc1a124d62e338dfa0", size = 4297222, upload-time = "2025-10-15T23:17:51.357Z" },
+    { url = "https://files.pythonhosted.org/packages/fd/cf/da9502c4e1912cb1da3807ea3618a6829bee8207456fbbeebc361ec38ba3/cryptography-46.0.3-cp38-abi3-manylinux_2_28_armv7l.manylinux_2_31_armv7l.whl", hash = "sha256:10ca84c4668d066a9878890047f03546f3ae0a6b8b39b697457b7757aaf18dbc", size = 4012280, upload-time = "2025-10-15T23:17:52.964Z" },
+    { url = "https://files.pythonhosted.org/packages/6b/8f/9adb86b93330e0df8b3dcf03eae67c33ba89958fc2e03862ef1ac2b42465/cryptography-46.0.3-cp38-abi3-manylinux_2_28_ppc64le.whl", hash = "sha256:36e627112085bb3b81b19fed209c05ce2a52ee8b15d161b7c643a7d5a88491f3", size = 4978958, upload-time = "2025-10-15T23:17:54.965Z" },
+    { url = "https://files.pythonhosted.org/packages/d1/a0/5fa77988289c34bdb9f913f5606ecc9ada1adb5ae870bd0d1054a7021cc4/cryptography-46.0.3-cp38-abi3-manylinux_2_28_x86_64.whl", hash = "sha256:1000713389b75c449a6e979ffc7dcc8ac90b437048766cef052d4d30b8220971", size = 4473714, upload-time = "2025-10-15T23:17:56.754Z" },
+    { url = "https://files.pythonhosted.org/packages/14/e5/fc82d72a58d41c393697aa18c9abe5ae1214ff6f2a5c18ac470f92777895/cryptography-46.0.3-cp38-abi3-manylinux_2_34_aarch64.whl", hash = "sha256:b02cf04496f6576afffef5ddd04a0cb7d49cf6be16a9059d793a30b035f6b6ac", size = 4296970, upload-time = "2025-10-15T23:17:58.588Z" },
+    { url = "https://files.pythonhosted.org/packages/78/06/5663ed35438d0b09056973994f1aec467492b33bd31da36e468b01ec1097/cryptography-46.0.3-cp38-abi3-manylinux_2_34_ppc64le.whl", hash = "sha256:71e842ec9bc7abf543b47cf86b9a743baa95f4677d22baa4c7d5c69e49e9bc04", size = 4940236, upload-time = "2025-10-15T23:18:00.897Z" },
+    { url = "https://files.pythonhosted.org/packages/fc/59/873633f3f2dcd8a053b8dd1d38f783043b5fce589c0f6988bf55ef57e43e/cryptography-46.0.3-cp38-abi3-manylinux_2_34_x86_64.whl", hash = "sha256:402b58fc32614f00980b66d6e56a5b4118e6cb362ae8f3fda141ba4689bd4506", size = 4472642, upload-time = "2025-10-15T23:18:02.749Z" },
+    { url = "https://files.pythonhosted.org/packages/3d/39/8e71f3930e40f6877737d6f69248cf74d4e34b886a3967d32f919cc50d3b/cryptography-46.0.3-cp38-abi3-musllinux_1_2_aarch64.whl", hash = "sha256:ef639cb3372f69ec44915fafcd6698b6cc78fbe0c2ea41be867f6ed612811963", size = 4423126, upload-time = "2025-10-15T23:18:04.85Z" },
+    { url = "https://files.pythonhosted.org/packages/cd/c7/f65027c2810e14c3e7268353b1681932b87e5a48e65505d8cc17c99e36ae/cryptography-46.0.3-cp38-abi3-musllinux_1_2_x86_64.whl", hash = "sha256:3b51b8ca4f1c6453d8829e1eb7299499ca7f313900dd4d89a24b8b87c0a780d4", size = 4686573, upload-time = "2025-10-15T23:18:06.908Z" },
+    { url = "https://files.pythonhosted.org/packages/0a/6e/1c8331ddf91ca4730ab3086a0f1be19c65510a33b5a441cb334e7a2d2560/cryptography-46.0.3-cp38-abi3-win32.whl", hash = "sha256:6276eb85ef938dc035d59b87c8a7dc559a232f954962520137529d77b18ff1df", size = 3036695, upload-time = "2025-10-15T23:18:08.672Z" },
+    { url = "https://files.pythonhosted.org/packages/90/45/b0d691df20633eff80955a0fc7695ff9051ffce8b69741444bd9ed7bd0db/cryptography-46.0.3-cp38-abi3-win_amd64.whl", hash = "sha256:416260257577718c05135c55958b674000baef9a1c7d9e8f306ec60d71db850f", size = 3501720, upload-time = "2025-10-15T23:18:10.632Z" },
+    { url = "https://files.pythonhosted.org/packages/e8/cb/2da4cc83f5edb9c3257d09e1e7ab7b23f049c7962cae8d842bbef0a9cec9/cryptography-46.0.3-cp38-abi3-win_arm64.whl", hash = "sha256:d89c3468de4cdc4f08a57e214384d0471911a3830fcdaf7a8cc587e42a866372", size = 2918740, upload-time = "2025-10-15T23:18:12.277Z" },
+    { url = "https://files.pythonhosted.org/packages/06/8a/e60e46adab4362a682cf142c7dcb5bf79b782ab2199b0dcb81f55970807f/cryptography-46.0.3-pp311-pypy311_pp73-macosx_10_9_x86_64.whl", hash = "sha256:7ce938a99998ed3c8aa7e7272dca1a610401ede816d36d0693907d863b10d9ea", size = 3698132, upload-time = "2025-10-15T23:18:17.056Z" },
+    { url = "https://files.pythonhosted.org/packages/da/38/f59940ec4ee91e93d3311f7532671a5cef5570eb04a144bf203b58552d11/cryptography-46.0.3-pp311-pypy311_pp73-manylinux_2_28_aarch64.whl", hash = "sha256:191bb60a7be5e6f54e30ba16fdfae78ad3a342a0599eb4193ba88e3f3d6e185b", size = 4243992, upload-time = "2025-10-15T23:18:18.695Z" },
+    { url = "https://files.pythonhosted.org/packages/b0/0c/35b3d92ddebfdfda76bb485738306545817253d0a3ded0bfe80ef8e67aa5/cryptography-46.0.3-pp311-pypy311_pp73-manylinux_2_28_x86_64.whl", hash = "sha256:c70cc23f12726be8f8bc72e41d5065d77e4515efae3690326764ea1b07845cfb", size = 4409944, upload-time = "2025-10-15T23:18:20.597Z" },
+    { url = "https://files.pythonhosted.org/packages/99/55/181022996c4063fc0e7666a47049a1ca705abb9c8a13830f074edb347495/cryptography-46.0.3-pp311-pypy311_pp73-manylinux_2_34_aarch64.whl", hash = "sha256:9394673a9f4de09e28b5356e7fff97d778f8abad85c9d5ac4a4b7e25a0de7717", size = 4242957, upload-time = "2025-10-15T23:18:22.18Z" },
+    { url = "https://files.pythonhosted.org/packages/ba/af/72cd6ef29f9c5f731251acadaeb821559fe25f10852f44a63374c9ca08c1/cryptography-46.0.3-pp311-pypy311_pp73-manylinux_2_34_x86_64.whl", hash = "sha256:94cd0549accc38d1494e1f8de71eca837d0509d0d44bf11d158524b0e12cebf9", size = 4409447, upload-time = "2025-10-15T23:18:24.209Z" },
+    { url = "https://files.pythonhosted.org/packages/0d/c3/e90f4a4feae6410f914f8ebac129b9ae7a8c92eb60a638012dde42030a9d/cryptography-46.0.3-pp311-pypy311_pp73-win_amd64.whl", hash = "sha256:6b5063083824e5509fdba180721d55909ffacccc8adbec85268b48439423d78c", size = 3438528, upload-time = "2025-10-15T23:18:26.227Z" },
 ]
 
 [[package]]
@@ -1366,7 +1368,7 @@ wheels = [
 
 [[package]]
 name = "dify-api"
-version = "1.13.0"
+version = "1.12.1"
 source = { virtual = "." }
 dependencies = [
     { name = "aliyun-log-python-sdk" },
@@ -1592,7 +1594,7 @@ requires-dist = [
     { name = "gevent", specifier = "~=25.9.1" },
     { name = "gmpy2", specifier = "~=2.2.1" },
     { name = "google-api-core", specifier = "==2.18.0" },
-    { name = "google-api-python-client", specifier = "==2.189.0" },
+    { name = "google-api-python-client", specifier = "==2.90.0" },
     { name = "google-auth", specifier = "==2.29.0" },
     { name = "google-auth-httplib2", specifier = "==0.2.0" },
     { name = "google-cloud-aiplatform", specifier = "==1.49.0" },
@@ -2304,7 +2306,7 @@ grpc = [
 
 [[package]]
 name = "google-api-python-client"
-version = "2.189.0"
+version = "2.90.0"
 source = { registry = "https://pypi.org/simple" }
 dependencies = [
     { name = "google-api-core" },
@@ -2313,9 +2315,9 @@ dependencies = [
     { name = "httplib2" },
     { name = "uritemplate" },
 ]
-sdist = { url = "https://files.pythonhosted.org/packages/6f/f8/0783aeca3410ee053d4dd1fccafd85197847b8f84dd038e036634605d083/google_api_python_client-2.189.0.tar.gz", hash = "sha256:45f2d8559b5c895dde6ad3fb33de025f5cb2c197fa5862f18df7f5295a172741", size = 13979470, upload-time = "2026-02-03T19:24:55.432Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/35/8b/d990f947c261304a5c1599d45717d02c27d46af5f23e1fee5dc19c8fa79d/google-api-python-client-2.90.0.tar.gz", hash = "sha256:cbcb3ba8be37c6806676a49df16ac412077e5e5dc7fa967941eff977b31fba03", size = 10891311, upload-time = "2023-06-20T16:29:25.008Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/04/44/3677ff27998214f2fa7957359da48da378a0ffff1bd0bdaba42e752bc13e/google_api_python_client-2.189.0-py3-none-any.whl", hash = "sha256:a258c09660a49c6159173f8bbece171278e917e104a11f0640b34751b79c8a1a", size = 14547633, upload-time = "2026-02-03T19:24:52.845Z" },
+    { url = "https://files.pythonhosted.org/packages/39/03/209b5c36a621ae644dc7d4743746cd3b38b18e133f8779ecaf6b95cc01ce/google_api_python_client-2.90.0-py2.py3-none-any.whl", hash = "sha256:4a41ffb7797d4f28e44635fb1e7076240b741c6493e7c3233c0e4421cec7c913", size = 11379891, upload-time = "2023-06-20T16:29:19.532Z" },
 ]
 
 [[package]]

docker/.env.example

@@ -1523,7 +1523,6 @@ AMPLITUDE_API_KEY=
 # Sandbox expired records clean configuration
 SANDBOX_EXPIRED_RECORDS_CLEAN_GRACEFUL_PERIOD=21
 SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_SIZE=1000
-SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_MAX_INTERVAL=200
 SANDBOX_EXPIRED_RECORDS_RETENTION_DAYS=30
 
 

docker/docker-compose-template.yaml

@@ -21,7 +21,7 @@ services:
 
   # API service
   api:
-    image: langgenius/dify-api:1.13.0
+    image: langgenius/dify-api:1.12.1
     restart: always
     environment:
       # Use the shared environment variables.
@@ -63,7 +63,7 @@ services:
   # worker service
   # The Celery worker for processing all queues (dataset, workflow, mail, etc.)
   worker:
-    image: langgenius/dify-api:1.13.0
+    image: langgenius/dify-api:1.12.1
     restart: always
     environment:
       # Use the shared environment variables.
@@ -102,7 +102,7 @@ services:
   # worker_beat service
   # Celery beat for scheduling periodic tasks.
   worker_beat:
-    image: langgenius/dify-api:1.13.0
+    image: langgenius/dify-api:1.12.1
     restart: always
     environment:
       # Use the shared environment variables.
@@ -132,7 +132,7 @@ services:
 
   # Frontend web application.
   web:
-    image: langgenius/dify-web:1.13.0
+    image: langgenius/dify-web:1.12.1
     restart: always
     environment:
       CONSOLE_API_URL: ${CONSOLE_API_URL:-}

docker/docker-compose.yaml

@@ -684,7 +684,6 @@ x-shared-env: &shared-api-worker-env
   AMPLITUDE_API_KEY: ${AMPLITUDE_API_KEY:-}
   SANDBOX_EXPIRED_RECORDS_CLEAN_GRACEFUL_PERIOD: ${SANDBOX_EXPIRED_RECORDS_CLEAN_GRACEFUL_PERIOD:-21}
   SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_SIZE: ${SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_SIZE:-1000}
-  SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_MAX_INTERVAL: ${SANDBOX_EXPIRED_RECORDS_CLEAN_BATCH_MAX_INTERVAL:-200}
   SANDBOX_EXPIRED_RECORDS_RETENTION_DAYS: ${SANDBOX_EXPIRED_RECORDS_RETENTION_DAYS:-30}
   PUBSUB_REDIS_URL: ${PUBSUB_REDIS_URL:-}
   PUBSUB_REDIS_CHANNEL_TYPE: ${PUBSUB_REDIS_CHANNEL_TYPE:-pubsub}
@@ -715,7 +714,7 @@ services:
 
   # API service
   api:
-    image: langgenius/dify-api:1.13.0
+    image: langgenius/dify-api:1.12.1
     restart: always
     environment:
       # Use the shared environment variables.
@@ -757,7 +756,7 @@ services:
   # worker service
   # The Celery worker for processing all queues (dataset, workflow, mail, etc.)
   worker:
-    image: langgenius/dify-api:1.13.0
+    image: langgenius/dify-api:1.12.1
     restart: always
     environment:
       # Use the shared environment variables.
@@ -796,7 +795,7 @@ services:
   # worker_beat service
   # Celery beat for scheduling periodic tasks.
   worker_beat:
-    image: langgenius/dify-api:1.13.0
+    image: langgenius/dify-api:1.12.1
     restart: always
     environment:
       # Use the shared environment variables.
@@ -826,7 +825,7 @@ services:
 
   # Frontend web application.
   web:
-    image: langgenius/dify-web:1.13.0
+    image: langgenius/dify-web:1.12.1
     restart: always
     environment:
       CONSOLE_API_URL: ${CONSOLE_API_URL:-}

web/__tests__/billing/billing-integration.test.tsx

@@ -0,0 +1,991 @@
+import type { UsagePlanInfo, UsageResetInfo } from '@/app/components/billing/type'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import * as React from 'react'
+import AnnotationFull from '@/app/components/billing/annotation-full'
+import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
+import AppsFull from '@/app/components/billing/apps-full-in-dialog'
+import Billing from '@/app/components/billing/billing-page'
+import { defaultPlan, NUM_INFINITE } from '@/app/components/billing/config'
+import HeaderBillingBtn from '@/app/components/billing/header-billing-btn'
+import PlanComp from '@/app/components/billing/plan'
+import PlanUpgradeModal from '@/app/components/billing/plan-upgrade-modal'
+import PriorityLabel from '@/app/components/billing/priority-label'
+import TriggerEventsLimitModal from '@/app/components/billing/trigger-events-limit-modal'
+import { Plan } from '@/app/components/billing/type'
+import UpgradeBtn from '@/app/components/billing/upgrade-btn'
+import VectorSpaceFull from '@/app/components/billing/vector-space-full'
+
+let mockProviderCtx: Record<string, unknown> = {}
+let mockAppCtx: Record<string, unknown> = {}
+const mockSetShowPricingModal = vi.fn()
+const mockSetShowAccountSettingModal = vi.fn()
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => mockProviderCtx,
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => mockAppCtx,
+}))
+
+vi.mock('@/context/modal-context', () => ({
+  useModalContext: () => ({
+    setShowPricingModal: mockSetShowPricingModal,
+  }),
+  useModalContextSelector: (selector: (s: Record<string, unknown>) => unknown) =>
+    selector({
+      setShowAccountSettingModal: mockSetShowAccountSettingModal,
+    }),
+}))
+
+vi.mock('@/context/i18n', () => ({
+  useGetLanguage: () => 'en-US',
+  useGetPricingPageLanguage: () => 'en',
+}))
+
+// ─── Service mocks ──────────────────────────────────────────────────────────
+const mockRefetch = vi.fn().mockResolvedValue({ data: 'https://billing.example.com' })
+vi.mock('@/service/use-billing', () => ({
+  useBillingUrl: () => ({
+    data: 'https://billing.example.com',
+    isFetching: false,
+    refetch: mockRefetch,
+  }),
+  useBindPartnerStackInfo: () => ({ mutateAsync: vi.fn() }),
+}))
+
+vi.mock('@/service/use-education', () => ({
+  useEducationVerify: () => ({
+    mutateAsync: vi.fn().mockResolvedValue({ token: 'test-token' }),
+    isPending: false,
+  }),
+}))
+
+// ─── Navigation mocks ───────────────────────────────────────────────────────
+const mockRouterPush = vi.fn()
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: mockRouterPush }),
+  usePathname: () => '/billing',
+  useSearchParams: () => new URLSearchParams(),
+}))
+
+vi.mock('@/hooks/use-async-window-open', () => ({
+  useAsyncWindowOpen: () => vi.fn(),
+}))
+
+// ─── External component mocks ───────────────────────────────────────────────
+vi.mock('@/app/education-apply/verify-state-modal', () => ({
+  default: ({ isShow }: { isShow: boolean }) =>
+    isShow ? <div data-testid="verify-state-modal" /> : null,
+}))
+
+vi.mock('@/app/components/header/utils/util', () => ({
+  mailToSupport: () => 'mailto:support@test.com',
+}))
+
+// ─── Test data factories ────────────────────────────────────────────────────
+type PlanOverrides = {
+  type?: string
+  usage?: Partial<UsagePlanInfo>
+  total?: Partial<UsagePlanInfo>
+  reset?: Partial<UsageResetInfo>
+}
+
+const createPlanData = (overrides: PlanOverrides = {}) => ({
+  ...defaultPlan,
+  ...overrides,
+  type: overrides.type ?? defaultPlan.type,
+  usage: { ...defaultPlan.usage, ...overrides.usage },
+  total: { ...defaultPlan.total, ...overrides.total },
+  reset: { ...defaultPlan.reset, ...overrides.reset },
+})
+
+const setupProviderContext = (planOverrides: PlanOverrides = {}, extra: Record<string, unknown> = {}) => {
+  mockProviderCtx = {
+    plan: createPlanData(planOverrides),
+    enableBilling: true,
+    isFetchedPlan: true,
+    enableEducationPlan: false,
+    isEducationAccount: false,
+    allowRefreshEducationVerify: false,
+    ...extra,
+  }
+}
+
+const setupAppContext = (overrides: Record<string, unknown> = {}) => {
+  mockAppCtx = {
+    isCurrentWorkspaceManager: true,
+    userProfile: { email: 'test@example.com' },
+    langGeniusVersionInfo: { current_version: '1.0.0' },
+    ...overrides,
+  }
+}
+
+// Vitest hoists vi.mock() calls, so imports above will use mocked modules
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 1. Billing Page + Plan Component Integration
+// Tests the full data flow: BillingPage → PlanComp → UsageInfo → ProgressBar
+// ═══════════════════════════════════════════════════════════════════════════
+describe('Billing Page + Plan Integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setupAppContext()
+  })
+
+  // Verify that the billing page renders PlanComp with all 7 usage items
+  describe('Rendering complete plan information', () => {
+    it('should display all 7 usage metrics for sandbox plan', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: {
+          buildApps: 3,
+          teamMembers: 1,
+          documentsUploadQuota: 10,
+          vectorSpace: 20,
+          annotatedResponse: 5,
+          triggerEvents: 1000,
+          apiRateLimit: 2000,
+        },
+        total: {
+          buildApps: 5,
+          teamMembers: 1,
+          documentsUploadQuota: 50,
+          vectorSpace: 50,
+          annotatedResponse: 10,
+          triggerEvents: 3000,
+          apiRateLimit: 5000,
+        },
+      })
+
+      render(<Billing />)
+
+      // Plan name
+      expect(screen.getByText(/plans\.sandbox\.name/i)).toBeInTheDocument()
+
+      // All 7 usage items should be visible
+      expect(screen.getByText(/usagePage\.buildApps/i)).toBeInTheDocument()
+      expect(screen.getByText(/usagePage\.teamMembers/i)).toBeInTheDocument()
+      expect(screen.getByText(/usagePage\.documentsUploadQuota/i)).toBeInTheDocument()
+      expect(screen.getByText(/usagePage\.vectorSpace/i)).toBeInTheDocument()
+      expect(screen.getByText(/usagePage\.annotationQuota/i)).toBeInTheDocument()
+      expect(screen.getByText(/usagePage\.triggerEvents/i)).toBeInTheDocument()
+      expect(screen.getByText(/plansCommon\.apiRateLimit/i)).toBeInTheDocument()
+    })
+
+    it('should display usage values as "usage / total" format', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { buildApps: 3, teamMembers: 1 },
+        total: { buildApps: 5, teamMembers: 1 },
+      })
+
+      render(<PlanComp loc="test" />)
+
+      // Check that the buildApps usage fraction "3 / 5" is rendered
+      const usageContainers = screen.getAllByText('3')
+      expect(usageContainers.length).toBeGreaterThan(0)
+      const totalContainers = screen.getAllByText('5')
+      expect(totalContainers.length).toBeGreaterThan(0)
+    })
+
+    it('should show "unlimited" for infinite quotas (professional API rate limit)', () => {
+      setupProviderContext({
+        type: Plan.professional,
+        total: { apiRateLimit: NUM_INFINITE },
+      })
+
+      render(<PlanComp loc="test" />)
+
+      expect(screen.getByText(/plansCommon\.unlimited/i)).toBeInTheDocument()
+    })
+
+    it('should display reset days for trigger events when applicable', () => {
+      setupProviderContext({
+        type: Plan.professional,
+        total: { triggerEvents: 20000 },
+        reset: { triggerEvents: 7 },
+      })
+
+      render(<PlanComp loc="test" />)
+
+      // Reset text should be visible
+      expect(screen.getByText(/usagePage\.resetsIn/i)).toBeInTheDocument()
+    })
+  })
+
+  // Verify billing URL button visibility and behavior
+  describe('Billing URL button', () => {
+    it('should show billing button when enableBilling and isCurrentWorkspaceManager', () => {
+      setupProviderContext({ type: Plan.sandbox })
+      setupAppContext({ isCurrentWorkspaceManager: true })
+
+      render(<Billing />)
+
+      expect(screen.getByText(/viewBillingTitle/i)).toBeInTheDocument()
+      expect(screen.getByText(/viewBillingAction/i)).toBeInTheDocument()
+    })
+
+    it('should hide billing button when user is not workspace manager', () => {
+      setupProviderContext({ type: Plan.sandbox })
+      setupAppContext({ isCurrentWorkspaceManager: false })
+
+      render(<Billing />)
+
+      expect(screen.queryByText(/viewBillingTitle/i)).not.toBeInTheDocument()
+    })
+
+    it('should hide billing button when billing is disabled', () => {
+      setupProviderContext({ type: Plan.sandbox }, { enableBilling: false })
+
+      render(<Billing />)
+
+      expect(screen.queryByText(/viewBillingTitle/i)).not.toBeInTheDocument()
+    })
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 2. Plan Type Display Integration
+// Tests that different plan types render correct visual elements
+// ═══════════════════════════════════════════════════════════════════════════
+describe('Plan Type Display Integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setupAppContext()
+  })
+
+  it('should render sandbox plan with upgrade button (premium badge)', () => {
+    setupProviderContext({ type: Plan.sandbox })
+
+    render(<PlanComp loc="test" />)
+
+    expect(screen.getByText(/plans\.sandbox\.name/i)).toBeInTheDocument()
+    expect(screen.getByText(/plans\.sandbox\.for/i)).toBeInTheDocument()
+    // Sandbox shows premium badge upgrade button (not plain)
+    expect(screen.getByText(/upgradeBtn\.encourageShort/i)).toBeInTheDocument()
+  })
+
+  it('should render professional plan with plain upgrade button', () => {
+    setupProviderContext({ type: Plan.professional })
+
+    render(<PlanComp loc="test" />)
+
+    expect(screen.getByText(/plans\.professional\.name/i)).toBeInTheDocument()
+    // Professional shows plain button because it's not team
+    expect(screen.getByText(/upgradeBtn\.encourageShort/i)).toBeInTheDocument()
+  })
+
+  it('should render team plan with plain-style upgrade button', () => {
+    setupProviderContext({ type: Plan.team })
+
+    render(<PlanComp loc="test" />)
+
+    expect(screen.getByText(/plans\.team\.name/i)).toBeInTheDocument()
+    // Team plan has isPlain=true, so shows "upgradeBtn.plain" text
+    expect(screen.getByText(/upgradeBtn\.plain/i)).toBeInTheDocument()
+  })
+
+  it('should not render upgrade button for enterprise plan', () => {
+    setupProviderContext({ type: Plan.enterprise })
+
+    render(<PlanComp loc="test" />)
+
+    expect(screen.queryByText(/upgradeBtn\.encourageShort/i)).not.toBeInTheDocument()
+    expect(screen.queryByText(/upgradeBtn\.plain/i)).not.toBeInTheDocument()
+  })
+
+  it('should show education verify button when enableEducationPlan is true and not yet verified', () => {
+    setupProviderContext({ type: Plan.sandbox }, {
+      enableEducationPlan: true,
+      isEducationAccount: false,
+    })
+
+    render(<PlanComp loc="test" />)
+
+    expect(screen.getByText(/toVerified/i)).toBeInTheDocument()
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 3. Upgrade Flow Integration
+// Tests the flow: UpgradeBtn click → setShowPricingModal
+// and PlanUpgradeModal → close + trigger pricing
+// ═══════════════════════════════════════════════════════════════════════════
+describe('Upgrade Flow Integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setupAppContext()
+    setupProviderContext({ type: Plan.sandbox })
+  })
+
+  // UpgradeBtn triggers pricing modal
+  describe('UpgradeBtn triggers pricing modal', () => {
+    it('should call setShowPricingModal when clicking premium badge upgrade button', async () => {
+      const user = userEvent.setup()
+
+      render(<UpgradeBtn />)
+
+      const badgeText = screen.getByText(/upgradeBtn\.encourage/i)
+      await user.click(badgeText)
+
+      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call setShowPricingModal when clicking plain upgrade button', async () => {
+      const user = userEvent.setup()
+
+      render(<UpgradeBtn isPlain />)
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+    })
+
+    it('should use custom onClick when provided instead of setShowPricingModal', async () => {
+      const customOnClick = vi.fn()
+      const user = userEvent.setup()
+
+      render(<UpgradeBtn onClick={customOnClick} />)
+
+      const badgeText = screen.getByText(/upgradeBtn\.encourage/i)
+      await user.click(badgeText)
+
+      expect(customOnClick).toHaveBeenCalledTimes(1)
+      expect(mockSetShowPricingModal).not.toHaveBeenCalled()
+    })
+
+    it('should fire gtag event with loc parameter when clicked', async () => {
+      const mockGtag = vi.fn()
+      ;(window as unknown as Record<string, unknown>).gtag = mockGtag
+      const user = userEvent.setup()
+
+      render(<UpgradeBtn loc="billing-page" />)
+
+      const badgeText = screen.getByText(/upgradeBtn\.encourage/i)
+      await user.click(badgeText)
+
+      expect(mockGtag).toHaveBeenCalledWith('event', 'click_upgrade_btn', { loc: 'billing-page' })
+      delete (window as unknown as Record<string, unknown>).gtag
+    })
+  })
+
+  // PlanUpgradeModal integration: close modal and trigger pricing
+  describe('PlanUpgradeModal upgrade flow', () => {
+    it('should call onClose and setShowPricingModal when clicking upgrade button in modal', async () => {
+      const user = userEvent.setup()
+      const onClose = vi.fn()
+
+      render(
+        <PlanUpgradeModal
+          show={true}
+          onClose={onClose}
+          title="Upgrade Required"
+          description="You need a better plan"
+        />,
+      )
+
+      // The modal should show title and description
+      expect(screen.getByText('Upgrade Required')).toBeInTheDocument()
+      expect(screen.getByText('You need a better plan')).toBeInTheDocument()
+
+      // Click the upgrade button inside the modal
+      const upgradeText = screen.getByText(/triggerLimitModal\.upgrade/i)
+      await user.click(upgradeText)
+
+      // Should close the current modal first
+      expect(onClose).toHaveBeenCalledTimes(1)
+      // Then open pricing modal
+      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call onClose and custom onUpgrade when provided', async () => {
+      const user = userEvent.setup()
+      const onClose = vi.fn()
+      const onUpgrade = vi.fn()
+
+      render(
+        <PlanUpgradeModal
+          show={true}
+          onClose={onClose}
+          onUpgrade={onUpgrade}
+          title="Test"
+          description="Test"
+        />,
+      )
+
+      const upgradeText = screen.getByText(/triggerLimitModal\.upgrade/i)
+      await user.click(upgradeText)
+
+      expect(onClose).toHaveBeenCalledTimes(1)
+      expect(onUpgrade).toHaveBeenCalledTimes(1)
+      // Custom onUpgrade replaces default setShowPricingModal
+      expect(mockSetShowPricingModal).not.toHaveBeenCalled()
+    })
+
+    it('should call onClose when clicking dismiss button', async () => {
+      const user = userEvent.setup()
+      const onClose = vi.fn()
+
+      render(
+        <PlanUpgradeModal
+          show={true}
+          onClose={onClose}
+          title="Test"
+          description="Test"
+        />,
+      )
+
+      const dismissBtn = screen.getByText(/triggerLimitModal\.dismiss/i)
+      await user.click(dismissBtn)
+
+      expect(onClose).toHaveBeenCalledTimes(1)
+      expect(mockSetShowPricingModal).not.toHaveBeenCalled()
+    })
+  })
+
+  // Upgrade from PlanComp: clicking upgrade button in plan component triggers pricing
+  describe('PlanComp upgrade button triggers pricing', () => {
+    it('should open pricing modal when clicking upgrade in sandbox plan', async () => {
+      const user = userEvent.setup()
+      setupProviderContext({ type: Plan.sandbox })
+
+      render(<PlanComp loc="test-loc" />)
+
+      const upgradeText = screen.getByText(/upgradeBtn\.encourageShort/i)
+      await user.click(upgradeText)
+
+      expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+    })
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 4. Capacity Full Components Integration
+// Tests AppsFull, VectorSpaceFull, AnnotationFull, TriggerEventsLimitModal
+// with real child components (UsageInfo, ProgressBar, UpgradeBtn)
+// ═══════════════════════════════════════════════════════════════════════════
+describe('Capacity Full Components Integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setupAppContext()
+  })
+
+  // AppsFull renders with correct messaging and components
+  describe('AppsFull integration', () => {
+    it('should display upgrade tip and upgrade button for sandbox plan at capacity', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { buildApps: 5 },
+        total: { buildApps: 5 },
+      })
+
+      render(<AppsFull loc="test" />)
+
+      // Should show "full" tip
+      expect(screen.getByText(/apps\.fullTip1$/i)).toBeInTheDocument()
+      // Should show upgrade button
+      expect(screen.getByText(/upgradeBtn\.encourageShort/i)).toBeInTheDocument()
+      // Should show usage/total fraction "5/5"
+      expect(screen.getByText(/5\/5/)).toBeInTheDocument()
+      // Should have a progress bar rendered
+      expect(screen.getByTestId('billing-progress-bar')).toBeInTheDocument()
+    })
+
+    it('should display upgrade tip and upgrade button for professional plan', () => {
+      setupProviderContext({
+        type: Plan.professional,
+        usage: { buildApps: 48 },
+        total: { buildApps: 50 },
+      })
+
+      render(<AppsFull loc="test" />)
+
+      expect(screen.getByText(/apps\.fullTip1$/i)).toBeInTheDocument()
+      expect(screen.getByText(/upgradeBtn\.encourageShort/i)).toBeInTheDocument()
+    })
+
+    it('should display contact tip and contact button for team plan', () => {
+      setupProviderContext({
+        type: Plan.team,
+        usage: { buildApps: 200 },
+        total: { buildApps: 200 },
+      })
+
+      render(<AppsFull loc="test" />)
+
+      // Team plan shows different tip
+      expect(screen.getByText(/apps\.fullTip2$/i)).toBeInTheDocument()
+      // Team plan shows "Contact Us" instead of upgrade
+      expect(screen.getByText(/apps\.contactUs/i)).toBeInTheDocument()
+      expect(screen.queryByText(/upgradeBtn\.encourageShort/i)).not.toBeInTheDocument()
+    })
+
+    it('should render progress bar with correct color based on usage percentage', () => {
+      // 100% usage should show error color
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { buildApps: 5 },
+        total: { buildApps: 5 },
+      })
+
+      render(<AppsFull loc="test" />)
+
+      const progressBar = screen.getByTestId('billing-progress-bar')
+      expect(progressBar).toHaveClass('bg-components-progress-error-progress')
+    })
+  })
+
+  // VectorSpaceFull renders with VectorSpaceInfo and UpgradeBtn
+  describe('VectorSpaceFull integration', () => {
+    it('should display full tip, upgrade button, and vector space usage info', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { vectorSpace: 50 },
+        total: { vectorSpace: 50 },
+      })
+
+      render(<VectorSpaceFull />)
+
+      // Should show full tip
+      expect(screen.getByText(/vectorSpace\.fullTip/i)).toBeInTheDocument()
+      expect(screen.getByText(/vectorSpace\.fullSolution/i)).toBeInTheDocument()
+      // Should show upgrade button
+      expect(screen.getByText(/upgradeBtn\.encourage$/i)).toBeInTheDocument()
+      // Should show vector space usage info
+      expect(screen.getByText(/usagePage\.vectorSpace/i)).toBeInTheDocument()
+    })
+  })
+
+  // AnnotationFull renders with Usage component and UpgradeBtn
+  describe('AnnotationFull integration', () => {
+    it('should display annotation full tip, upgrade button, and usage info', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { annotatedResponse: 10 },
+        total: { annotatedResponse: 10 },
+      })
+
+      render(<AnnotationFull />)
+
+      expect(screen.getByText(/annotatedResponse\.fullTipLine1/i)).toBeInTheDocument()
+      expect(screen.getByText(/annotatedResponse\.fullTipLine2/i)).toBeInTheDocument()
+      // UpgradeBtn rendered
+      expect(screen.getByText(/upgradeBtn\.encourage$/i)).toBeInTheDocument()
+      // Usage component should show annotation quota
+      expect(screen.getByText(/annotatedResponse\.quotaTitle/i)).toBeInTheDocument()
+    })
+  })
+
+  // AnnotationFullModal shows modal with usage and upgrade button
+  describe('AnnotationFullModal integration', () => {
+    it('should render modal with annotation info and upgrade button when show is true', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { annotatedResponse: 10 },
+        total: { annotatedResponse: 10 },
+      })
+
+      render(<AnnotationFullModal show={true} onHide={vi.fn()} />)
+
+      expect(screen.getByText(/annotatedResponse\.fullTipLine1/i)).toBeInTheDocument()
+      expect(screen.getByText(/annotatedResponse\.quotaTitle/i)).toBeInTheDocument()
+      expect(screen.getByText(/upgradeBtn\.encourage$/i)).toBeInTheDocument()
+    })
+
+    it('should not render content when show is false', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { annotatedResponse: 10 },
+        total: { annotatedResponse: 10 },
+      })
+
+      render(<AnnotationFullModal show={false} onHide={vi.fn()} />)
+
+      expect(screen.queryByText(/annotatedResponse\.fullTipLine1/i)).not.toBeInTheDocument()
+    })
+  })
+
+  // TriggerEventsLimitModal renders PlanUpgradeModal with embedded UsageInfo
+  describe('TriggerEventsLimitModal integration', () => {
+    it('should display trigger limit title, usage info, and upgrade button', () => {
+      setupProviderContext({ type: Plan.professional })
+
+      render(
+        <TriggerEventsLimitModal
+          show={true}
+          onClose={vi.fn()}
+          onUpgrade={vi.fn()}
+          usage={18000}
+          total={20000}
+          resetInDays={5}
+        />,
+      )
+
+      // Modal title and description
+      expect(screen.getByText(/triggerLimitModal\.title/i)).toBeInTheDocument()
+      expect(screen.getByText(/triggerLimitModal\.description/i)).toBeInTheDocument()
+      // Embedded UsageInfo with trigger events data
+      expect(screen.getByText(/triggerLimitModal\.usageTitle/i)).toBeInTheDocument()
+      expect(screen.getByText('18000')).toBeInTheDocument()
+      expect(screen.getByText('20000')).toBeInTheDocument()
+      // Reset info
+      expect(screen.getByText(/usagePage\.resetsIn/i)).toBeInTheDocument()
+      // Upgrade and dismiss buttons
+      expect(screen.getByText(/triggerLimitModal\.upgrade/i)).toBeInTheDocument()
+      expect(screen.getByText(/triggerLimitModal\.dismiss/i)).toBeInTheDocument()
+    })
+
+    it('should call onClose and onUpgrade when clicking upgrade', async () => {
+      const user = userEvent.setup()
+      const onClose = vi.fn()
+      const onUpgrade = vi.fn()
+      setupProviderContext({ type: Plan.professional })
+
+      render(
+        <TriggerEventsLimitModal
+          show={true}
+          onClose={onClose}
+          onUpgrade={onUpgrade}
+          usage={20000}
+          total={20000}
+        />,
+      )
+
+      const upgradeBtn = screen.getByText(/triggerLimitModal\.upgrade/i)
+      await user.click(upgradeBtn)
+
+      expect(onClose).toHaveBeenCalledTimes(1)
+      expect(onUpgrade).toHaveBeenCalledTimes(1)
+    })
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 5. Header Billing Button Integration
+// Tests HeaderBillingBtn behavior for different plan states
+// ═══════════════════════════════════════════════════════════════════════════
+describe('Header Billing Button Integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setupAppContext()
+  })
+
+  it('should render UpgradeBtn (premium badge) for sandbox plan', () => {
+    setupProviderContext({ type: Plan.sandbox })
+
+    render(<HeaderBillingBtn />)
+
+    expect(screen.getByText(/upgradeBtn\.encourageShort/i)).toBeInTheDocument()
+  })
+
+  it('should render "pro" badge for professional plan', () => {
+    setupProviderContext({ type: Plan.professional })
+
+    render(<HeaderBillingBtn />)
+
+    expect(screen.getByText('pro')).toBeInTheDocument()
+    expect(screen.queryByText(/upgradeBtn/i)).not.toBeInTheDocument()
+  })
+
+  it('should render "team" badge for team plan', () => {
+    setupProviderContext({ type: Plan.team })
+
+    render(<HeaderBillingBtn />)
+
+    expect(screen.getByText('team')).toBeInTheDocument()
+  })
+
+  it('should return null when billing is disabled', () => {
+    setupProviderContext({ type: Plan.sandbox }, { enableBilling: false })
+
+    const { container } = render(<HeaderBillingBtn />)
+
+    expect(container.innerHTML).toBe('')
+  })
+
+  it('should return null when plan is not fetched yet', () => {
+    setupProviderContext({ type: Plan.sandbox }, { isFetchedPlan: false })
+
+    const { container } = render(<HeaderBillingBtn />)
+
+    expect(container.innerHTML).toBe('')
+  })
+
+  it('should call onClick when clicking pro/team badge in non-display-only mode', async () => {
+    const user = userEvent.setup()
+    const onClick = vi.fn()
+    setupProviderContext({ type: Plan.professional })
+
+    render(<HeaderBillingBtn onClick={onClick} />)
+
+    await user.click(screen.getByText('pro'))
+
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not call onClick when isDisplayOnly is true', async () => {
+    const user = userEvent.setup()
+    const onClick = vi.fn()
+    setupProviderContext({ type: Plan.professional })
+
+    render(<HeaderBillingBtn onClick={onClick} isDisplayOnly />)
+
+    await user.click(screen.getByText('pro'))
+
+    expect(onClick).not.toHaveBeenCalled()
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 6. PriorityLabel Integration
+// Tests priority badge display for different plan types
+// ═══════════════════════════════════════════════════════════════════════════
+describe('PriorityLabel Integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setupAppContext()
+  })
+
+  it('should display "standard" priority for sandbox plan', () => {
+    setupProviderContext({ type: Plan.sandbox })
+
+    render(<PriorityLabel />)
+
+    expect(screen.getByText(/plansCommon\.priority\.standard/i)).toBeInTheDocument()
+  })
+
+  it('should display "priority" for professional plan with icon', () => {
+    setupProviderContext({ type: Plan.professional })
+
+    const { container } = render(<PriorityLabel />)
+
+    expect(screen.getByText(/plansCommon\.priority\.priority/i)).toBeInTheDocument()
+    // Professional plan should show the priority icon
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should display "top-priority" for team plan with icon', () => {
+    setupProviderContext({ type: Plan.team })
+
+    const { container } = render(<PriorityLabel />)
+
+    expect(screen.getByText(/plansCommon\.priority\.top-priority/i)).toBeInTheDocument()
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should display "top-priority" for enterprise plan', () => {
+    setupProviderContext({ type: Plan.enterprise })
+
+    render(<PriorityLabel />)
+
+    expect(screen.getByText(/plansCommon\.priority\.top-priority/i)).toBeInTheDocument()
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 7. Usage Display Edge Cases
+// Tests storage mode, threshold logic, and progress bar color integration
+// ═══════════════════════════════════════════════════════════════════════════
+describe('Usage Display Edge Cases', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setupAppContext()
+  })
+
+  // Vector space storage mode behavior
+  describe('VectorSpace storage mode in PlanComp', () => {
+    it('should show "< 50" for sandbox plan with low vector space usage', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { vectorSpace: 10 },
+        total: { vectorSpace: 50 },
+      })
+
+      render(<PlanComp loc="test" />)
+
+      // Storage mode: usage below threshold shows "< 50"
+      expect(screen.getByText(/</)).toBeInTheDocument()
+    })
+
+    it('should show indeterminate progress bar for usage below threshold', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { vectorSpace: 10 },
+        total: { vectorSpace: 50 },
+      })
+
+      render(<PlanComp loc="test" />)
+
+      // Should have an indeterminate progress bar
+      expect(screen.getByTestId('billing-progress-bar-indeterminate')).toBeInTheDocument()
+    })
+
+    it('should show actual usage for pro plan above threshold', () => {
+      setupProviderContext({
+        type: Plan.professional,
+        usage: { vectorSpace: 1024 },
+        total: { vectorSpace: 5120 },
+      })
+
+      render(<PlanComp loc="test" />)
+
+      // Pro plan above threshold shows actual value
+      expect(screen.getByText('1024')).toBeInTheDocument()
+    })
+  })
+
+  // Progress bar color logic through real components
+  describe('Progress bar color reflects usage severity', () => {
+    it('should show normal color for low usage percentage', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        usage: { buildApps: 1 },
+        total: { buildApps: 5 },
+      })
+
+      render(<PlanComp loc="test" />)
+
+      // 20% usage - normal color
+      const progressBars = screen.getAllByTestId('billing-progress-bar')
+      // At least one should have the normal progress color
+      const hasNormalColor = progressBars.some(bar =>
+        bar.classList.contains('bg-components-progress-bar-progress-solid'),
+      )
+      expect(hasNormalColor).toBe(true)
+    })
+  })
+
+  // Reset days calculation in PlanComp
+  describe('Reset days integration', () => {
+    it('should not show reset for sandbox trigger events (no reset_date)', () => {
+      setupProviderContext({
+        type: Plan.sandbox,
+        total: { triggerEvents: 3000 },
+        reset: { triggerEvents: null },
+      })
+
+      render(<PlanComp loc="test" />)
+
+      // Find the trigger events section - should not have reset text
+      const triggerSection = screen.getByText(/usagePage\.triggerEvents/i)
+      const parent = triggerSection.closest('[class*="flex flex-col"]')
+      // No reset text should appear (sandbox doesn't show reset for triggerEvents)
+      expect(parent?.textContent).not.toContain('usagePage.resetsIn')
+    })
+
+    it('should show reset for professional trigger events with reset date', () => {
+      setupProviderContext({
+        type: Plan.professional,
+        total: { triggerEvents: 20000 },
+        reset: { triggerEvents: 14 },
+      })
+
+      render(<PlanComp loc="test" />)
+
+      // Professional plan with finite triggerEvents should show reset
+      const resetTexts = screen.getAllByText(/usagePage\.resetsIn/i)
+      expect(resetTexts.length).toBeGreaterThan(0)
+    })
+  })
+})
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 8. Cross-Component Upgrade Flow (End-to-End)
+// Tests the complete chain: capacity alert → upgrade button → pricing
+// ═══════════════════════════════════════════════════════════════════════════
+describe('Cross-Component Upgrade Flow', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setupAppContext()
+  })
+
+  it('should trigger pricing from AppsFull upgrade button', async () => {
+    const user = userEvent.setup()
+    setupProviderContext({
+      type: Plan.sandbox,
+      usage: { buildApps: 5 },
+      total: { buildApps: 5 },
+    })
+
+    render(<AppsFull loc="app-create" />)
+
+    const upgradeText = screen.getByText(/upgradeBtn\.encourageShort/i)
+    await user.click(upgradeText)
+
+    expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+  })
+
+  it('should trigger pricing from VectorSpaceFull upgrade button', async () => {
+    const user = userEvent.setup()
+    setupProviderContext({
+      type: Plan.sandbox,
+      usage: { vectorSpace: 50 },
+      total: { vectorSpace: 50 },
+    })
+
+    render(<VectorSpaceFull />)
+
+    const upgradeText = screen.getByText(/upgradeBtn\.encourage$/i)
+    await user.click(upgradeText)
+
+    expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+  })
+
+  it('should trigger pricing from AnnotationFull upgrade button', async () => {
+    const user = userEvent.setup()
+    setupProviderContext({
+      type: Plan.sandbox,
+      usage: { annotatedResponse: 10 },
+      total: { annotatedResponse: 10 },
+    })
+
+    render(<AnnotationFull />)
+
+    const upgradeText = screen.getByText(/upgradeBtn\.encourage$/i)
+    await user.click(upgradeText)
+
+    expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+  })
+
+  it('should trigger pricing from TriggerEventsLimitModal through PlanUpgradeModal', async () => {
+    const user = userEvent.setup()
+    const onClose = vi.fn()
+    setupProviderContext({ type: Plan.professional })
+
+    render(
+      <TriggerEventsLimitModal
+        show={true}
+        onClose={onClose}
+        onUpgrade={vi.fn()}
+        usage={20000}
+        total={20000}
+      />,
+    )
+
+    // TriggerEventsLimitModal passes onUpgrade to PlanUpgradeModal
+    // PlanUpgradeModal's upgrade button calls onClose then onUpgrade
+    const upgradeBtn = screen.getByText(/triggerLimitModal\.upgrade/i)
+    await user.click(upgradeBtn)
+
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('should trigger pricing from AnnotationFullModal upgrade button', async () => {
+    const user = userEvent.setup()
+    setupProviderContext({
+      type: Plan.sandbox,
+      usage: { annotatedResponse: 10 },
+      total: { annotatedResponse: 10 },
+    })
+
+    render(<AnnotationFullModal show={true} onHide={vi.fn()} />)
+
+    const upgradeText = screen.getByText(/upgradeBtn\.encourage$/i)
+    await user.click(upgradeText)
+
+    expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
+  })
+})

web/__tests__/billing/cloud-plan-payment-flow.test.tsx

@@ -0,0 +1,296 @@
+/**
+ * Integration test: Cloud Plan Payment Flow
+ *
+ * Tests the payment flow for cloud plan items:
+ *   CloudPlanItem → Button click → permission check → fetch URL → redirect
+ *
+ * Covers plan comparison, downgrade prevention, monthly/yearly pricing,
+ * and workspace manager permission enforcement.
+ */
+import type { BasicPlan } from '@/app/components/billing/type'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import * as React from 'react'
+import { ALL_PLANS } from '@/app/components/billing/config'
+import { PlanRange } from '@/app/components/billing/pricing/plan-switcher/plan-range-switcher'
+import CloudPlanItem from '@/app/components/billing/pricing/plans/cloud-plan-item'
+import { Plan } from '@/app/components/billing/type'
+
+// ─── Mock state ──────────────────────────────────────────────────────────────
+let mockAppCtx: Record<string, unknown> = {}
+const mockFetchSubscriptionUrls = vi.fn()
+const mockInvoices = vi.fn()
+const mockOpenAsyncWindow = vi.fn()
+const mockToastNotify = vi.fn()
+
+// ─── Context mocks ───────────────────────────────────────────────────────────
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => mockAppCtx,
+}))
+
+vi.mock('@/context/i18n', () => ({
+  useGetLanguage: () => 'en-US',
+}))
+
+// ─── Service mocks ───────────────────────────────────────────────────────────
+vi.mock('@/service/billing', () => ({
+  fetchSubscriptionUrls: (...args: unknown[]) => mockFetchSubscriptionUrls(...args),
+}))
+
+vi.mock('@/service/client', () => ({
+  consoleClient: {
+    billing: {
+      invoices: () => mockInvoices(),
+    },
+  },
+}))
+
+vi.mock('@/hooks/use-async-window-open', () => ({
+  useAsyncWindowOpen: () => mockOpenAsyncWindow,
+}))
+
+vi.mock('@/app/components/base/toast', () => ({
+  default: { notify: (args: unknown) => mockToastNotify(args) },
+}))
+
+// ─── Navigation mocks ───────────────────────────────────────────────────────
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: vi.fn() }),
+  usePathname: () => '/billing',
+  useSearchParams: () => new URLSearchParams(),
+}))
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+const setupAppContext = (overrides: Record<string, unknown> = {}) => {
+  mockAppCtx = {
+    isCurrentWorkspaceManager: true,
+    ...overrides,
+  }
+}
+
+type RenderCloudPlanItemOptions = {
+  currentPlan?: BasicPlan
+  plan?: BasicPlan
+  planRange?: PlanRange
+  canPay?: boolean
+}
+
+const renderCloudPlanItem = ({
+  currentPlan = Plan.sandbox,
+  plan = Plan.professional,
+  planRange = PlanRange.monthly,
+  canPay = true,
+}: RenderCloudPlanItemOptions = {}) => {
+  return render(
+    <CloudPlanItem
+      currentPlan={currentPlan}
+      plan={plan}
+      planRange={planRange}
+      canPay={canPay}
+    />,
+  )
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+describe('Cloud Plan Payment Flow', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    cleanup()
+    setupAppContext()
+    mockFetchSubscriptionUrls.mockResolvedValue({ url: 'https://pay.example.com/checkout' })
+    mockInvoices.mockResolvedValue({ url: 'https://billing.example.com/invoices' })
+  })
+
+  // ─── 1. Plan Display ────────────────────────────────────────────────────
+  describe('Plan display', () => {
+    it('should render plan name and description', () => {
+      renderCloudPlanItem({ plan: Plan.professional })
+
+      expect(screen.getByText(/plans\.professional\.name/i)).toBeInTheDocument()
+      expect(screen.getByText(/plans\.professional\.description/i)).toBeInTheDocument()
+    })
+
+    it('should show "Free" price for sandbox plan', () => {
+      renderCloudPlanItem({ plan: Plan.sandbox })
+
+      expect(screen.getByText(/plansCommon\.free/i)).toBeInTheDocument()
+    })
+
+    it('should show monthly price for paid plans', () => {
+      renderCloudPlanItem({ plan: Plan.professional, planRange: PlanRange.monthly })
+
+      expect(screen.getByText(`$${ALL_PLANS.professional.price}`)).toBeInTheDocument()
+    })
+
+    it('should show yearly discounted price (10 months) and strikethrough original (12 months)', () => {
+      renderCloudPlanItem({ plan: Plan.professional, planRange: PlanRange.yearly })
+
+      const yearlyPrice = ALL_PLANS.professional.price * 10
+      const originalPrice = ALL_PLANS.professional.price * 12
+
+      expect(screen.getByText(`$${yearlyPrice}`)).toBeInTheDocument()
+      expect(screen.getByText(`$${originalPrice}`)).toBeInTheDocument()
+    })
+
+    it('should show "most popular" badge for professional plan', () => {
+      renderCloudPlanItem({ plan: Plan.professional })
+
+      expect(screen.getByText(/plansCommon\.mostPopular/i)).toBeInTheDocument()
+    })
+
+    it('should not show "most popular" badge for sandbox or team plans', () => {
+      const { unmount } = renderCloudPlanItem({ plan: Plan.sandbox })
+      expect(screen.queryByText(/plansCommon\.mostPopular/i)).not.toBeInTheDocument()
+      unmount()
+
+      renderCloudPlanItem({ plan: Plan.team })
+      expect(screen.queryByText(/plansCommon\.mostPopular/i)).not.toBeInTheDocument()
+    })
+  })
+
+  // ─── 2. Button Text Logic ───────────────────────────────────────────────
+  describe('Button text logic', () => {
+    it('should show "Current Plan" when plan matches current plan', () => {
+      renderCloudPlanItem({ currentPlan: Plan.professional, plan: Plan.professional })
+
+      expect(screen.getByText(/plansCommon\.currentPlan/i)).toBeInTheDocument()
+    })
+
+    it('should show "Start for Free" for sandbox plan when not current', () => {
+      renderCloudPlanItem({ currentPlan: Plan.professional, plan: Plan.sandbox })
+
+      expect(screen.getByText(/plansCommon\.startForFree/i)).toBeInTheDocument()
+    })
+
+    it('should show "Start Building" for professional plan when not current', () => {
+      renderCloudPlanItem({ currentPlan: Plan.sandbox, plan: Plan.professional })
+
+      expect(screen.getByText(/plansCommon\.startBuilding/i)).toBeInTheDocument()
+    })
+
+    it('should show "Get Started" for team plan when not current', () => {
+      renderCloudPlanItem({ currentPlan: Plan.sandbox, plan: Plan.team })
+
+      expect(screen.getByText(/plansCommon\.getStarted/i)).toBeInTheDocument()
+    })
+  })
+
+  // ─── 3. Downgrade Prevention ────────────────────────────────────────────
+  describe('Downgrade prevention', () => {
+    it('should disable sandbox button when user is on professional plan (downgrade)', () => {
+      renderCloudPlanItem({ currentPlan: Plan.professional, plan: Plan.sandbox })
+
+      const button = screen.getByRole('button')
+      expect(button).toBeDisabled()
+    })
+
+    it('should disable sandbox and professional buttons when user is on team plan', () => {
+      const { unmount } = renderCloudPlanItem({ currentPlan: Plan.team, plan: Plan.sandbox })
+      expect(screen.getByRole('button')).toBeDisabled()
+      unmount()
+
+      renderCloudPlanItem({ currentPlan: Plan.team, plan: Plan.professional })
+      expect(screen.getByRole('button')).toBeDisabled()
+    })
+
+    it('should not disable current paid plan button (for invoice management)', () => {
+      renderCloudPlanItem({ currentPlan: Plan.professional, plan: Plan.professional })
+
+      const button = screen.getByRole('button')
+      expect(button).not.toBeDisabled()
+    })
+
+    it('should enable higher-tier plan buttons for upgrade', () => {
+      renderCloudPlanItem({ currentPlan: Plan.sandbox, plan: Plan.team })
+
+      const button = screen.getByRole('button')
+      expect(button).not.toBeDisabled()
+    })
+  })
+
+  // ─── 4. Payment URL Flow ────────────────────────────────────────────────
+  describe('Payment URL flow', () => {
+    it('should call fetchSubscriptionUrls with plan and "month" for monthly range', async () => {
+      const user = userEvent.setup()
+      // Simulate clicking on a professional plan button (user is on sandbox)
+      renderCloudPlanItem({
+        currentPlan: Plan.sandbox,
+        plan: Plan.professional,
+        planRange: PlanRange.monthly,
+      })
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      await waitFor(() => {
+        expect(mockFetchSubscriptionUrls).toHaveBeenCalledWith(Plan.professional, 'month')
+      })
+    })
+
+    it('should call fetchSubscriptionUrls with plan and "year" for yearly range', async () => {
+      const user = userEvent.setup()
+      renderCloudPlanItem({
+        currentPlan: Plan.sandbox,
+        plan: Plan.team,
+        planRange: PlanRange.yearly,
+      })
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      await waitFor(() => {
+        expect(mockFetchSubscriptionUrls).toHaveBeenCalledWith(Plan.team, 'year')
+      })
+    })
+
+    it('should open invoice management for current paid plan', async () => {
+      const user = userEvent.setup()
+      renderCloudPlanItem({ currentPlan: Plan.professional, plan: Plan.professional })
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      await waitFor(() => {
+        expect(mockOpenAsyncWindow).toHaveBeenCalled()
+      })
+      // Should NOT call fetchSubscriptionUrls (invoice, not subscription)
+      expect(mockFetchSubscriptionUrls).not.toHaveBeenCalled()
+    })
+
+    it('should not do anything when clicking on sandbox free plan button', async () => {
+      const user = userEvent.setup()
+      renderCloudPlanItem({ currentPlan: Plan.sandbox, plan: Plan.sandbox })
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      // Wait a tick and verify no actions were taken
+      await waitFor(() => {
+        expect(mockFetchSubscriptionUrls).not.toHaveBeenCalled()
+        expect(mockOpenAsyncWindow).not.toHaveBeenCalled()
+      })
+    })
+  })
+
+  // ─── 5. Permission Check ────────────────────────────────────────────────
+  describe('Permission check', () => {
+    it('should show error toast when non-manager clicks upgrade button', async () => {
+      setupAppContext({ isCurrentWorkspaceManager: false })
+      const user = userEvent.setup()
+      renderCloudPlanItem({ currentPlan: Plan.sandbox, plan: Plan.professional })
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      await waitFor(() => {
+        expect(mockToastNotify).toHaveBeenCalledWith(
+          expect.objectContaining({
+            type: 'error',
+          }),
+        )
+      })
+      // Should not proceed with payment
+      expect(mockFetchSubscriptionUrls).not.toHaveBeenCalled()
+    })
+  })
+})

web/__tests__/billing/education-verification-flow.test.tsx

@@ -0,0 +1,318 @@
+/**
+ * Integration test: Education Verification Flow
+ *
+ * Tests the education plan verification flow in PlanComp:
+ *   PlanComp → handleVerify → useEducationVerify → router.push → education-apply
+ *   PlanComp → handleVerify → error → show VerifyStateModal
+ *
+ * Also covers education button visibility based on context flags.
+ */
+import type { UsagePlanInfo, UsageResetInfo } from '@/app/components/billing/type'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import * as React from 'react'
+import { defaultPlan } from '@/app/components/billing/config'
+import PlanComp from '@/app/components/billing/plan'
+import { Plan } from '@/app/components/billing/type'
+
+// ─── Mock state ──────────────────────────────────────────────────────────────
+let mockProviderCtx: Record<string, unknown> = {}
+let mockAppCtx: Record<string, unknown> = {}
+const mockSetShowPricingModal = vi.fn()
+const mockSetShowAccountSettingModal = vi.fn()
+const mockRouterPush = vi.fn()
+const mockMutateAsync = vi.fn()
+
+// ─── Context mocks ───────────────────────────────────────────────────────────
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => mockProviderCtx,
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => mockAppCtx,
+}))
+
+vi.mock('@/context/modal-context', () => ({
+  useModalContext: () => ({
+    setShowPricingModal: mockSetShowPricingModal,
+  }),
+  useModalContextSelector: (selector: (s: Record<string, unknown>) => unknown) =>
+    selector({
+      setShowAccountSettingModal: mockSetShowAccountSettingModal,
+    }),
+}))
+
+vi.mock('@/context/i18n', () => ({
+  useGetLanguage: () => 'en-US',
+}))
+
+// ─── Service mocks ───────────────────────────────────────────────────────────
+vi.mock('@/service/use-education', () => ({
+  useEducationVerify: () => ({
+    mutateAsync: mockMutateAsync,
+    isPending: false,
+  }),
+}))
+
+vi.mock('@/service/use-billing', () => ({
+  useBillingUrl: () => ({
+    data: 'https://billing.example.com',
+    isFetching: false,
+    refetch: vi.fn(),
+  }),
+}))
+
+// ─── Navigation mocks ───────────────────────────────────────────────────────
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: mockRouterPush }),
+  usePathname: () => '/billing',
+  useSearchParams: () => new URLSearchParams(),
+}))
+
+vi.mock('@/hooks/use-async-window-open', () => ({
+  useAsyncWindowOpen: () => vi.fn(),
+}))
+
+// ─── External component mocks ───────────────────────────────────────────────
+vi.mock('@/app/education-apply/verify-state-modal', () => ({
+  default: ({ isShow, title, content, email, showLink }: {
+    isShow: boolean
+    title?: string
+    content?: string
+    email?: string
+    showLink?: boolean
+  }) =>
+    isShow
+      ? (
+          <div data-testid="verify-state-modal">
+            {title && <span data-testid="modal-title">{title}</span>}
+            {content && <span data-testid="modal-content">{content}</span>}
+            {email && <span data-testid="modal-email">{email}</span>}
+            {showLink && <span data-testid="modal-show-link">link</span>}
+          </div>
+        )
+      : null,
+}))
+
+// ─── Test data factories ────────────────────────────────────────────────────
+type PlanOverrides = {
+  type?: string
+  usage?: Partial<UsagePlanInfo>
+  total?: Partial<UsagePlanInfo>
+  reset?: Partial<UsageResetInfo>
+}
+
+const createPlanData = (overrides: PlanOverrides = {}) => ({
+  ...defaultPlan,
+  ...overrides,
+  type: overrides.type ?? defaultPlan.type,
+  usage: { ...defaultPlan.usage, ...overrides.usage },
+  total: { ...defaultPlan.total, ...overrides.total },
+  reset: { ...defaultPlan.reset, ...overrides.reset },
+})
+
+const setupContexts = (
+  planOverrides: PlanOverrides = {},
+  providerOverrides: Record<string, unknown> = {},
+  appOverrides: Record<string, unknown> = {},
+) => {
+  mockProviderCtx = {
+    plan: createPlanData(planOverrides),
+    enableBilling: true,
+    isFetchedPlan: true,
+    enableEducationPlan: false,
+    isEducationAccount: false,
+    allowRefreshEducationVerify: false,
+    ...providerOverrides,
+  }
+  mockAppCtx = {
+    isCurrentWorkspaceManager: true,
+    userProfile: { email: 'student@university.edu' },
+    langGeniusVersionInfo: { current_version: '1.0.0' },
+    ...appOverrides,
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+describe('Education Verification Flow', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    cleanup()
+    setupContexts()
+  })
+
+  // ─── 1. Education Button Visibility ─────────────────────────────────────
+  describe('Education button visibility', () => {
+    it('should not show verify button when enableEducationPlan is false', () => {
+      setupContexts({}, { enableEducationPlan: false })
+
+      render(<PlanComp loc="test" />)
+
+      expect(screen.queryByText(/toVerified/i)).not.toBeInTheDocument()
+    })
+
+    it('should show verify button when enableEducationPlan is true and not yet verified', () => {
+      setupContexts({}, { enableEducationPlan: true, isEducationAccount: false })
+
+      render(<PlanComp loc="test" />)
+
+      expect(screen.getByText(/toVerified/i)).toBeInTheDocument()
+    })
+
+    it('should not show verify button when already verified and not about to expire', () => {
+      setupContexts({}, {
+        enableEducationPlan: true,
+        isEducationAccount: true,
+        allowRefreshEducationVerify: false,
+      })
+
+      render(<PlanComp loc="test" />)
+
+      expect(screen.queryByText(/toVerified/i)).not.toBeInTheDocument()
+    })
+
+    it('should show verify button when about to expire (allowRefreshEducationVerify is true)', () => {
+      setupContexts({}, {
+        enableEducationPlan: true,
+        isEducationAccount: true,
+        allowRefreshEducationVerify: true,
+      })
+
+      render(<PlanComp loc="test" />)
+
+      // Shown because isAboutToExpire = allowRefreshEducationVerify = true
+      expect(screen.getByText(/toVerified/i)).toBeInTheDocument()
+    })
+  })
+
+  // ─── 2. Successful Verification Flow ────────────────────────────────────
+  describe('Successful verification flow', () => {
+    it('should navigate to education-apply with token on successful verification', async () => {
+      mockMutateAsync.mockResolvedValue({ token: 'edu-token-123' })
+      setupContexts({}, { enableEducationPlan: true, isEducationAccount: false })
+      const user = userEvent.setup()
+
+      render(<PlanComp loc="test" />)
+
+      const verifyButton = screen.getByText(/toVerified/i)
+      await user.click(verifyButton)
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledTimes(1)
+        expect(mockRouterPush).toHaveBeenCalledWith('/education-apply?token=edu-token-123')
+      })
+    })
+
+    it('should remove education verifying flag from localStorage on success', async () => {
+      mockMutateAsync.mockResolvedValue({ token: 'token-xyz' })
+      setupContexts({}, { enableEducationPlan: true, isEducationAccount: false })
+      const user = userEvent.setup()
+
+      render(<PlanComp loc="test" />)
+
+      await user.click(screen.getByText(/toVerified/i))
+
+      await waitFor(() => {
+        expect(localStorage.removeItem).toHaveBeenCalledWith('educationVerifying')
+      })
+    })
+  })
+
+  // ─── 3. Failed Verification Flow ────────────────────────────────────────
+  describe('Failed verification flow', () => {
+    it('should show VerifyStateModal with rejection info on error', async () => {
+      mockMutateAsync.mockRejectedValue(new Error('Verification failed'))
+      setupContexts({}, { enableEducationPlan: true, isEducationAccount: false })
+      const user = userEvent.setup()
+
+      render(<PlanComp loc="test" />)
+
+      // Modal should not be visible initially
+      expect(screen.queryByTestId('verify-state-modal')).not.toBeInTheDocument()
+
+      const verifyButton = screen.getByText(/toVerified/i)
+      await user.click(verifyButton)
+
+      // Modal should appear after verification failure
+      await waitFor(() => {
+        expect(screen.getByTestId('verify-state-modal')).toBeInTheDocument()
+      })
+
+      // Modal should display rejection title and content
+      expect(screen.getByTestId('modal-title')).toHaveTextContent(/rejectTitle/i)
+      expect(screen.getByTestId('modal-content')).toHaveTextContent(/rejectContent/i)
+    })
+
+    it('should show email and link in VerifyStateModal', async () => {
+      mockMutateAsync.mockRejectedValue(new Error('fail'))
+      setupContexts({}, { enableEducationPlan: true, isEducationAccount: false })
+      const user = userEvent.setup()
+
+      render(<PlanComp loc="test" />)
+
+      await user.click(screen.getByText(/toVerified/i))
+
+      await waitFor(() => {
+        expect(screen.getByTestId('modal-email')).toHaveTextContent('student@university.edu')
+        expect(screen.getByTestId('modal-show-link')).toBeInTheDocument()
+      })
+    })
+
+    it('should not redirect on verification failure', async () => {
+      mockMutateAsync.mockRejectedValue(new Error('fail'))
+      setupContexts({}, { enableEducationPlan: true, isEducationAccount: false })
+      const user = userEvent.setup()
+
+      render(<PlanComp loc="test" />)
+
+      await user.click(screen.getByText(/toVerified/i))
+
+      await waitFor(() => {
+        expect(screen.getByTestId('verify-state-modal')).toBeInTheDocument()
+      })
+
+      // Should NOT navigate
+      expect(mockRouterPush).not.toHaveBeenCalled()
+    })
+  })
+
+  // ─── 4. Education + Upgrade Coexistence ─────────────────────────────────
+  describe('Education and upgrade button coexistence', () => {
+    it('should show both education verify and upgrade buttons for sandbox user', () => {
+      setupContexts(
+        { type: Plan.sandbox },
+        { enableEducationPlan: true, isEducationAccount: false },
+      )
+
+      render(<PlanComp loc="test" />)
+
+      expect(screen.getByText(/toVerified/i)).toBeInTheDocument()
+      expect(screen.getByText(/upgradeBtn\.encourageShort/i)).toBeInTheDocument()
+    })
+
+    it('should not show upgrade button for enterprise plan', () => {
+      setupContexts(
+        { type: Plan.enterprise },
+        { enableEducationPlan: true, isEducationAccount: false },
+      )
+
+      render(<PlanComp loc="test" />)
+
+      expect(screen.getByText(/toVerified/i)).toBeInTheDocument()
+      expect(screen.queryByText(/upgradeBtn\.encourageShort/i)).not.toBeInTheDocument()
+      expect(screen.queryByText(/upgradeBtn\.plain/i)).not.toBeInTheDocument()
+    })
+
+    it('should show team plan with plain upgrade button and education button', () => {
+      setupContexts(
+        { type: Plan.team },
+        { enableEducationPlan: true, isEducationAccount: false },
+      )
+
+      render(<PlanComp loc="test" />)
+
+      expect(screen.getByText(/toVerified/i)).toBeInTheDocument()
+      expect(screen.getByText(/upgradeBtn\.plain/i)).toBeInTheDocument()
+    })
+  })
+})

web/__tests__/billing/partner-stack-flow.test.tsx

@@ -0,0 +1,326 @@
+/**
+ * Integration test: Partner Stack Flow
+ *
+ * Tests the PartnerStack integration:
+ *   PartnerStack component → usePSInfo hook → cookie management → bind API call
+ *
+ * Covers URL param reading, cookie persistence, API bind on mount,
+ * cookie cleanup after successful bind, and error handling for 400 status.
+ */
+import { act, cleanup, render, renderHook, waitFor } from '@testing-library/react'
+import Cookies from 'js-cookie'
+import * as React from 'react'
+import usePSInfo from '@/app/components/billing/partner-stack/use-ps-info'
+import { PARTNER_STACK_CONFIG } from '@/config'
+
+// ─── Mock state ──────────────────────────────────────────────────────────────
+let mockSearchParams = new URLSearchParams()
+const mockMutateAsync = vi.fn()
+
+// ─── Module mocks ────────────────────────────────────────────────────────────
+vi.mock('next/navigation', () => ({
+  useSearchParams: () => mockSearchParams,
+  useRouter: () => ({ push: vi.fn() }),
+  usePathname: () => '/',
+}))
+
+vi.mock('@/service/use-billing', () => ({
+  useBindPartnerStackInfo: () => ({
+    mutateAsync: mockMutateAsync,
+  }),
+  useBillingUrl: () => ({
+    data: '',
+    isFetching: false,
+    refetch: vi.fn(),
+  }),
+}))
+
+vi.mock('@/config', async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>()
+  return {
+    ...actual,
+    IS_CLOUD_EDITION: true,
+    PARTNER_STACK_CONFIG: {
+      cookieName: 'partner_stack_info',
+      saveCookieDays: 90,
+    },
+  }
+})
+
+// ─── Cookie helpers ──────────────────────────────────────────────────────────
+const getCookieData = () => {
+  const raw = Cookies.get(PARTNER_STACK_CONFIG.cookieName)
+  if (!raw)
+    return null
+  try {
+    return JSON.parse(raw)
+  }
+  catch {
+    return null
+  }
+}
+
+const setCookieData = (data: Record<string, string>) => {
+  Cookies.set(PARTNER_STACK_CONFIG.cookieName, JSON.stringify(data))
+}
+
+const clearCookie = () => {
+  Cookies.remove(PARTNER_STACK_CONFIG.cookieName)
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+describe('Partner Stack Flow', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    cleanup()
+    clearCookie()
+    mockSearchParams = new URLSearchParams()
+    mockMutateAsync.mockResolvedValue({})
+  })
+
+  // ─── 1. URL Param Reading ───────────────────────────────────────────────
+  describe('URL param reading', () => {
+    it('should read ps_partner_key and ps_xid from URL search params', () => {
+      mockSearchParams = new URLSearchParams({
+        ps_partner_key: 'partner-123',
+        ps_xid: 'click-456',
+      })
+
+      const { result } = renderHook(() => usePSInfo())
+
+      expect(result.current.psPartnerKey).toBe('partner-123')
+      expect(result.current.psClickId).toBe('click-456')
+    })
+
+    it('should fall back to cookie when URL params are not present', () => {
+      setCookieData({ partnerKey: 'cookie-partner', clickId: 'cookie-click' })
+
+      const { result } = renderHook(() => usePSInfo())
+
+      expect(result.current.psPartnerKey).toBe('cookie-partner')
+      expect(result.current.psClickId).toBe('cookie-click')
+    })
+
+    it('should prefer URL params over cookie values', () => {
+      setCookieData({ partnerKey: 'cookie-partner', clickId: 'cookie-click' })
+      mockSearchParams = new URLSearchParams({
+        ps_partner_key: 'url-partner',
+        ps_xid: 'url-click',
+      })
+
+      const { result } = renderHook(() => usePSInfo())
+
+      expect(result.current.psPartnerKey).toBe('url-partner')
+      expect(result.current.psClickId).toBe('url-click')
+    })
+
+    it('should return null for both values when no params and no cookie', () => {
+      const { result } = renderHook(() => usePSInfo())
+
+      expect(result.current.psPartnerKey).toBeUndefined()
+      expect(result.current.psClickId).toBeUndefined()
+    })
+  })
+
+  // ─── 2. Cookie Persistence (saveOrUpdate) ───────────────────────────────
+  describe('Cookie persistence via saveOrUpdate', () => {
+    it('should save PS info to cookie when URL params provide new values', () => {
+      mockSearchParams = new URLSearchParams({
+        ps_partner_key: 'new-partner',
+        ps_xid: 'new-click',
+      })
+
+      const { result } = renderHook(() => usePSInfo())
+      act(() => result.current.saveOrUpdate())
+
+      const cookieData = getCookieData()
+      expect(cookieData).toEqual({
+        partnerKey: 'new-partner',
+        clickId: 'new-click',
+      })
+    })
+
+    it('should not update cookie when values have not changed', () => {
+      setCookieData({ partnerKey: 'same-partner', clickId: 'same-click' })
+      mockSearchParams = new URLSearchParams({
+        ps_partner_key: 'same-partner',
+        ps_xid: 'same-click',
+      })
+
+      const cookieSetSpy = vi.spyOn(Cookies, 'set')
+      const { result } = renderHook(() => usePSInfo())
+      act(() => result.current.saveOrUpdate())
+
+      // Should not call set because values haven't changed
+      expect(cookieSetSpy).not.toHaveBeenCalled()
+      cookieSetSpy.mockRestore()
+    })
+
+    it('should not save to cookie when partner key is missing', () => {
+      mockSearchParams = new URLSearchParams({
+        ps_xid: 'click-only',
+      })
+
+      const cookieSetSpy = vi.spyOn(Cookies, 'set')
+      const { result } = renderHook(() => usePSInfo())
+      act(() => result.current.saveOrUpdate())
+
+      expect(cookieSetSpy).not.toHaveBeenCalled()
+      cookieSetSpy.mockRestore()
+    })
+
+    it('should not save to cookie when click ID is missing', () => {
+      mockSearchParams = new URLSearchParams({
+        ps_partner_key: 'partner-only',
+      })
+
+      const cookieSetSpy = vi.spyOn(Cookies, 'set')
+      const { result } = renderHook(() => usePSInfo())
+      act(() => result.current.saveOrUpdate())
+
+      expect(cookieSetSpy).not.toHaveBeenCalled()
+      cookieSetSpy.mockRestore()
+    })
+  })
+
+  // ─── 3. Bind API Flow ──────────────────────────────────────────────────
+  describe('Bind API flow', () => {
+    it('should call mutateAsync with partnerKey and clickId on bind', async () => {
+      mockSearchParams = new URLSearchParams({
+        ps_partner_key: 'bind-partner',
+        ps_xid: 'bind-click',
+      })
+
+      const { result } = renderHook(() => usePSInfo())
+      await act(async () => {
+        await result.current.bind()
+      })
+
+      expect(mockMutateAsync).toHaveBeenCalledWith({
+        partnerKey: 'bind-partner',
+        clickId: 'bind-click',
+      })
+    })
+
+    it('should remove cookie after successful bind', async () => {
+      setCookieData({ partnerKey: 'rm-partner', clickId: 'rm-click' })
+      mockSearchParams = new URLSearchParams({
+        ps_partner_key: 'rm-partner',
+        ps_xid: 'rm-click',
+      })
+
+      const { result } = renderHook(() => usePSInfo())
+      await act(async () => {
+        await result.current.bind()
+      })
+
+      // Cookie should be removed after successful bind
+      expect(Cookies.get(PARTNER_STACK_CONFIG.cookieName)).toBeUndefined()
+    })
+
+    it('should remove cookie on 400 error (already bound)', async () => {
+      mockMutateAsync.mockRejectedValue({ status: 400 })
+      setCookieData({ partnerKey: 'err-partner', clickId: 'err-click' })
+      mockSearchParams = new URLSearchParams({
+        ps_partner_key: 'err-partner',
+        ps_xid: 'err-click',
+      })
+
+      const { result } = renderHook(() => usePSInfo())
+      await act(async () => {
+        await result.current.bind()
+      })
+
+      // Cookie should be removed even on 400
+      expect(Cookies.get(PARTNER_STACK_CONFIG.cookieName)).toBeUndefined()
+    })
+
+    it('should not remove cookie on non-400 errors', async () => {
+      mockMutateAsync.mockRejectedValue({ status: 500 })
+      setCookieData({ partnerKey: 'keep-partner', clickId: 'keep-click' })
+      mockSearchParams = new URLSearchParams({
+        ps_partner_key: 'keep-partner',
+        ps_xid: 'keep-click',
+      })
+
+      const { result } = renderHook(() => usePSInfo())
+      await act(async () => {
+        await result.current.bind()
+      })
+
+      // Cookie should still exist for non-400 errors
+      const cookieData = getCookieData()
+      expect(cookieData).toBeTruthy()
+    })
+
+    it('should not call bind when partner key is missing', async () => {
+      mockSearchParams = new URLSearchParams({
+        ps_xid: 'click-only',
+      })
+
+      const { result } = renderHook(() => usePSInfo())
+      await act(async () => {
+        await result.current.bind()
+      })
+
+      expect(mockMutateAsync).not.toHaveBeenCalled()
+    })
+
+    it('should not call bind a second time (idempotency)', async () => {
+      mockSearchParams = new URLSearchParams({
+        ps_partner_key: 'partner-once',
+        ps_xid: 'click-once',
+      })
+
+      const { result } = renderHook(() => usePSInfo())
+
+      // First bind
+      await act(async () => {
+        await result.current.bind()
+      })
+      expect(mockMutateAsync).toHaveBeenCalledTimes(1)
+
+      // Second bind should be skipped (hasBind = true)
+      await act(async () => {
+        await result.current.bind()
+      })
+      expect(mockMutateAsync).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // ─── 4. PartnerStack Component Mount ────────────────────────────────────
+  describe('PartnerStack component mount behavior', () => {
+    it('should call saveOrUpdate and bind on mount when IS_CLOUD_EDITION is true', async () => {
+      mockSearchParams = new URLSearchParams({
+        ps_partner_key: 'mount-partner',
+        ps_xid: 'mount-click',
+      })
+
+      // Use lazy import so the mocks are applied
+      const { default: PartnerStack } = await import('@/app/components/billing/partner-stack')
+
+      render(<PartnerStack />)
+
+      // The component calls saveOrUpdate and bind in useEffect
+      await waitFor(() => {
+        // Bind should have been called
+        expect(mockMutateAsync).toHaveBeenCalledWith({
+          partnerKey: 'mount-partner',
+          clickId: 'mount-click',
+        })
+      })
+
+      // Cookie should have been saved (saveOrUpdate was called before bind)
+      // After bind succeeds, cookie is removed
+      expect(Cookies.get(PARTNER_STACK_CONFIG.cookieName)).toBeUndefined()
+    })
+
+    it('should render nothing (return null)', async () => {
+      const { default: PartnerStack } = await import('@/app/components/billing/partner-stack')
+
+      const { container } = render(<PartnerStack />)
+
+      expect(container.innerHTML).toBe('')
+    })
+  })
+})

web/__tests__/billing/pricing-modal-flow.test.tsx

@@ -0,0 +1,327 @@
+/**
+ * Integration test: Pricing Modal Flow
+ *
+ * Tests the full Pricing modal lifecycle:
+ *   Pricing → PlanSwitcher (category + range toggle) → Plans (cloud / self-hosted)
+ *   → CloudPlanItem / SelfHostedPlanItem → Footer
+ *
+ * Validates cross-component state propagation when the user switches between
+ * cloud / self-hosted categories and monthly / yearly plan ranges.
+ */
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import * as React from 'react'
+import { ALL_PLANS } from '@/app/components/billing/config'
+import Pricing from '@/app/components/billing/pricing'
+import { Plan } from '@/app/components/billing/type'
+
+// ─── Mock state ──────────────────────────────────────────────────────────────
+let mockProviderCtx: Record<string, unknown> = {}
+let mockAppCtx: Record<string, unknown> = {}
+
+// ─── Context mocks ───────────────────────────────────────────────────────────
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => mockProviderCtx,
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => mockAppCtx,
+}))
+
+vi.mock('@/context/i18n', () => ({
+  useGetLanguage: () => 'en-US',
+  useGetPricingPageLanguage: () => 'en',
+}))
+
+// ─── Service mocks ───────────────────────────────────────────────────────────
+vi.mock('@/service/billing', () => ({
+  fetchSubscriptionUrls: vi.fn().mockResolvedValue({ url: 'https://pay.example.com' }),
+}))
+
+vi.mock('@/service/client', () => ({
+  consoleClient: {
+    billing: {
+      invoices: vi.fn().mockResolvedValue({ url: 'https://invoice.example.com' }),
+    },
+  },
+}))
+
+vi.mock('@/hooks/use-async-window-open', () => ({
+  useAsyncWindowOpen: () => vi.fn(),
+}))
+
+// ─── Navigation mocks ───────────────────────────────────────────────────────
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({ push: vi.fn() }),
+  usePathname: () => '/billing',
+  useSearchParams: () => new URLSearchParams(),
+}))
+
+// ─── External component mocks (lightweight) ─────────────────────────────────
+vi.mock('@/app/components/base/icons/src/public/billing', () => ({
+  Azure: () => <span data-testid="icon-azure" />,
+  GoogleCloud: () => <span data-testid="icon-gcloud" />,
+  AwsMarketplaceLight: () => <span data-testid="icon-aws-light" />,
+  AwsMarketplaceDark: () => <span data-testid="icon-aws-dark" />,
+}))
+
+vi.mock('@/hooks/use-theme', () => ({
+  default: () => ({ theme: 'light' }),
+  useTheme: () => ({ theme: 'light' }),
+}))
+
+// Self-hosted List uses t() with returnObjects which returns string in mock;
+// mock it to avoid deep i18n dependency (unit tests cover this component)
+vi.mock('@/app/components/billing/pricing/plans/self-hosted-plan-item/list', () => ({
+  default: ({ plan }: { plan: string }) => (
+    <div data-testid={`self-hosted-list-${plan}`}>Features</div>
+  ),
+}))
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+const defaultPlanData = {
+  type: Plan.sandbox,
+  usage: {
+    buildApps: 1,
+    teamMembers: 1,
+    documentsUploadQuota: 0,
+    vectorSpace: 10,
+    annotatedResponse: 1,
+    triggerEvents: 0,
+    apiRateLimit: 0,
+  },
+  total: {
+    buildApps: 5,
+    teamMembers: 1,
+    documentsUploadQuota: 50,
+    vectorSpace: 50,
+    annotatedResponse: 10,
+    triggerEvents: 3000,
+    apiRateLimit: 5000,
+  },
+}
+
+const setupContexts = (planOverrides: Record<string, unknown> = {}, appOverrides: Record<string, unknown> = {}) => {
+  mockProviderCtx = {
+    plan: { ...defaultPlanData, ...planOverrides },
+    enableBilling: true,
+    isFetchedPlan: true,
+    enableEducationPlan: false,
+    isEducationAccount: false,
+    allowRefreshEducationVerify: false,
+  }
+  mockAppCtx = {
+    isCurrentWorkspaceManager: true,
+    userProfile: { email: 'test@example.com' },
+    langGeniusVersionInfo: { current_version: '1.0.0' },
+    ...appOverrides,
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+describe('Pricing Modal Flow', () => {
+  const onCancel = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    cleanup()
+    setupContexts()
+  })
+
+  // ─── 1. Initial Rendering ────────────────────────────────────────────────
+  describe('Initial rendering', () => {
+    it('should render header with close button and footer with pricing link', () => {
+      render(<Pricing onCancel={onCancel} />)
+
+      // Header close button exists (multiple plan buttons also exist)
+      const buttons = screen.getAllByRole('button')
+      expect(buttons.length).toBeGreaterThanOrEqual(1)
+      // Footer pricing link
+      expect(screen.getByText(/plansCommon\.comparePlanAndFeatures/i)).toBeInTheDocument()
+    })
+
+    it('should default to cloud category with three cloud plans', () => {
+      render(<Pricing onCancel={onCancel} />)
+
+      // Three cloud plans: sandbox, professional, team
+      expect(screen.getByText(/plans\.sandbox\.name/i)).toBeInTheDocument()
+      expect(screen.getByText(/plans\.professional\.name/i)).toBeInTheDocument()
+      expect(screen.getByText(/plans\.team\.name/i)).toBeInTheDocument()
+    })
+
+    it('should show plan range switcher (annual billing toggle) by default for cloud', () => {
+      render(<Pricing onCancel={onCancel} />)
+
+      expect(screen.getByText(/plansCommon\.annualBilling/i)).toBeInTheDocument()
+    })
+
+    it('should show tax tip in footer for cloud category', () => {
+      render(<Pricing onCancel={onCancel} />)
+
+      // Use exact match to avoid matching taxTipSecond
+      expect(screen.getByText('billing.plansCommon.taxTip')).toBeInTheDocument()
+      expect(screen.getByText('billing.plansCommon.taxTipSecond')).toBeInTheDocument()
+    })
+  })
+
+  // ─── 2. Category Switching ───────────────────────────────────────────────
+  describe('Category switching', () => {
+    it('should switch to self-hosted plans when clicking self-hosted tab', async () => {
+      const user = userEvent.setup()
+      render(<Pricing onCancel={onCancel} />)
+
+      // Click the self-hosted tab
+      const selfTab = screen.getByText(/plansCommon\.self/i)
+      await user.click(selfTab)
+
+      // Self-hosted plans should appear
+      expect(screen.getByText(/plans\.community\.name/i)).toBeInTheDocument()
+      expect(screen.getByText(/plans\.premium\.name/i)).toBeInTheDocument()
+      expect(screen.getByText(/plans\.enterprise\.name/i)).toBeInTheDocument()
+
+      // Cloud plans should disappear
+      expect(screen.queryByText(/plans\.sandbox\.name/i)).not.toBeInTheDocument()
+    })
+
+    it('should hide plan range switcher for self-hosted category', async () => {
+      const user = userEvent.setup()
+      render(<Pricing onCancel={onCancel} />)
+
+      await user.click(screen.getByText(/plansCommon\.self/i))
+
+      // Annual billing toggle should not be visible
+      expect(screen.queryByText(/plansCommon\.annualBilling/i)).not.toBeInTheDocument()
+    })
+
+    it('should hide tax tip in footer for self-hosted category', async () => {
+      const user = userEvent.setup()
+      render(<Pricing onCancel={onCancel} />)
+
+      await user.click(screen.getByText(/plansCommon\.self/i))
+
+      expect(screen.queryByText('billing.plansCommon.taxTip')).not.toBeInTheDocument()
+    })
+
+    it('should switch back to cloud plans when clicking cloud tab', async () => {
+      const user = userEvent.setup()
+      render(<Pricing onCancel={onCancel} />)
+
+      // Switch to self-hosted
+      await user.click(screen.getByText(/plansCommon\.self/i))
+      expect(screen.queryByText(/plans\.sandbox\.name/i)).not.toBeInTheDocument()
+
+      // Switch back to cloud
+      await user.click(screen.getByText(/plansCommon\.cloud/i))
+      expect(screen.getByText(/plans\.sandbox\.name/i)).toBeInTheDocument()
+      expect(screen.getByText(/plansCommon\.annualBilling/i)).toBeInTheDocument()
+    })
+  })
+
+  // ─── 3. Plan Range Switching (Monthly ↔ Yearly) ──────────────────────────
+  describe('Plan range switching', () => {
+    it('should show monthly prices by default', () => {
+      render(<Pricing onCancel={onCancel} />)
+
+      // Professional monthly price: $59
+      const proPriceStr = `$${ALL_PLANS.professional.price}`
+      expect(screen.getByText(proPriceStr)).toBeInTheDocument()
+
+      // Team monthly price: $159
+      const teamPriceStr = `$${ALL_PLANS.team.price}`
+      expect(screen.getByText(teamPriceStr)).toBeInTheDocument()
+    })
+
+    it('should show "Free" for sandbox plan regardless of range', () => {
+      render(<Pricing onCancel={onCancel} />)
+
+      expect(screen.getByText(/plansCommon\.free/i)).toBeInTheDocument()
+    })
+
+    it('should show "most popular" badge only for professional plan', () => {
+      render(<Pricing onCancel={onCancel} />)
+
+      expect(screen.getByText(/plansCommon\.mostPopular/i)).toBeInTheDocument()
+    })
+  })
+
+  // ─── 4. Cloud Plan Button States ─────────────────────────────────────────
+  describe('Cloud plan button states', () => {
+    it('should show "Current Plan" for the current plan (sandbox)', () => {
+      setupContexts({ type: Plan.sandbox })
+      render(<Pricing onCancel={onCancel} />)
+
+      expect(screen.getByText(/plansCommon\.currentPlan/i)).toBeInTheDocument()
+    })
+
+    it('should show specific button text for non-current plans', () => {
+      setupContexts({ type: Plan.sandbox })
+      render(<Pricing onCancel={onCancel} />)
+
+      // Professional button text
+      expect(screen.getByText(/plansCommon\.startBuilding/i)).toBeInTheDocument()
+      // Team button text
+      expect(screen.getByText(/plansCommon\.getStarted/i)).toBeInTheDocument()
+    })
+
+    it('should mark sandbox as "Current Plan" for professional user (enterprise normalized to team)', () => {
+      setupContexts({ type: Plan.enterprise })
+      render(<Pricing onCancel={onCancel} />)
+
+      // Enterprise is normalized to team for display, so team is "Current Plan"
+      expect(screen.getByText(/plansCommon\.currentPlan/i)).toBeInTheDocument()
+    })
+  })
+
+  // ─── 5. Self-Hosted Plan Details ─────────────────────────────────────────
+  describe('Self-hosted plan details', () => {
+    it('should show cloud provider icons only for premium plan', async () => {
+      const user = userEvent.setup()
+      render(<Pricing onCancel={onCancel} />)
+
+      await user.click(screen.getByText(/plansCommon\.self/i))
+
+      // Premium plan should show Azure and Google Cloud icons
+      expect(screen.getByTestId('icon-azure')).toBeInTheDocument()
+      expect(screen.getByTestId('icon-gcloud')).toBeInTheDocument()
+    })
+
+    it('should show "coming soon" text for premium plan cloud providers', async () => {
+      const user = userEvent.setup()
+      render(<Pricing onCancel={onCancel} />)
+
+      await user.click(screen.getByText(/plansCommon\.self/i))
+
+      expect(screen.getByText(/plans\.premium\.comingSoon/i)).toBeInTheDocument()
+    })
+  })
+
+  // ─── 6. Close Handling ───────────────────────────────────────────────────
+  describe('Close handling', () => {
+    it('should call onCancel when pressing ESC key', () => {
+      render(<Pricing onCancel={onCancel} />)
+
+      // ahooks useKeyPress listens on document for keydown events
+      document.dispatchEvent(new KeyboardEvent('keydown', {
+        key: 'Escape',
+        code: 'Escape',
+        keyCode: 27,
+        bubbles: true,
+      }))
+
+      expect(onCancel).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // ─── 7. Pricing URL ─────────────────────────────────────────────────────
+  describe('Pricing page URL', () => {
+    it('should render pricing link with correct URL', () => {
+      render(<Pricing onCancel={onCancel} />)
+
+      const link = screen.getByText(/plansCommon\.comparePlanAndFeatures/i)
+      expect(link.closest('a')).toHaveAttribute(
+        'href',
+        'https://dify.ai/en/pricing#plans-and-features',
+      )
+    })
+  })
+})

web/__tests__/billing/self-hosted-plan-flow.test.tsx

@@ -0,0 +1,225 @@
+/**
+ * Integration test: Self-Hosted Plan Flow
+ *
+ * Tests the self-hosted plan items:
+ *   SelfHostedPlanItem → Button click → permission check → redirect to external URL
+ *
+ * Covers community/premium/enterprise plan rendering, external URL navigation,
+ * and workspace manager permission enforcement.
+ */
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import * as React from 'react'
+import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '@/app/components/billing/config'
+import SelfHostedPlanItem from '@/app/components/billing/pricing/plans/self-hosted-plan-item'
+import { SelfHostedPlan } from '@/app/components/billing/type'
+
+let mockAppCtx: Record<string, unknown> = {}
+const mockToastNotify = vi.fn()
+
+const originalLocation = window.location
+let assignedHref = ''
+
+vi.mock('@/context/app-context', () => ({
+  useAppContext: () => mockAppCtx,
+}))
+
+vi.mock('@/context/i18n', () => ({
+  useGetLanguage: () => 'en-US',
+}))
+
+vi.mock('@/hooks/use-theme', () => ({
+  default: () => ({ theme: 'light' }),
+  useTheme: () => ({ theme: 'light' }),
+}))
+
+vi.mock('@/app/components/base/icons/src/public/billing', () => ({
+  Azure: () => <span data-testid="icon-azure" />,
+  GoogleCloud: () => <span data-testid="icon-gcloud" />,
+  AwsMarketplaceLight: () => <span data-testid="icon-aws-light" />,
+  AwsMarketplaceDark: () => <span data-testid="icon-aws-dark" />,
+}))
+
+vi.mock('@/app/components/base/toast', () => ({
+  default: { notify: (args: unknown) => mockToastNotify(args) },
+}))
+
+vi.mock('@/app/components/billing/pricing/plans/self-hosted-plan-item/list', () => ({
+  default: ({ plan }: { plan: string }) => (
+    <div data-testid={`self-hosted-list-${plan}`}>Features</div>
+  ),
+}))
+
+const setupAppContext = (overrides: Record<string, unknown> = {}) => {
+  mockAppCtx = {
+    isCurrentWorkspaceManager: true,
+    ...overrides,
+  }
+}
+
+describe('Self-Hosted Plan Flow', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    cleanup()
+    setupAppContext()
+
+    // Mock window.location with minimal getter/setter (Location props are non-enumerable)
+    assignedHref = ''
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: {
+        get href() { return assignedHref },
+        set href(value: string) { assignedHref = value },
+      },
+    })
+  })
+
+  afterEach(() => {
+    // Restore original location
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: originalLocation,
+    })
+  })
+
+  // ─── 1. Plan Rendering ──────────────────────────────────────────────────
+  describe('Plan rendering', () => {
+    it('should render community plan with name and description', () => {
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.community} />)
+
+      expect(screen.getByText(/plans\.community\.name/i)).toBeInTheDocument()
+      expect(screen.getByText(/plans\.community\.description/i)).toBeInTheDocument()
+    })
+
+    it('should render premium plan with cloud provider icons', () => {
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.premium} />)
+
+      expect(screen.getByText(/plans\.premium\.name/i)).toBeInTheDocument()
+      expect(screen.getByTestId('icon-azure')).toBeInTheDocument()
+      expect(screen.getByTestId('icon-gcloud')).toBeInTheDocument()
+    })
+
+    it('should render enterprise plan without cloud provider icons', () => {
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.enterprise} />)
+
+      expect(screen.getByText(/plans\.enterprise\.name/i)).toBeInTheDocument()
+      expect(screen.queryByTestId('icon-azure')).not.toBeInTheDocument()
+    })
+
+    it('should not show price tip for community (free) plan', () => {
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.community} />)
+
+      expect(screen.queryByText(/plans\.community\.priceTip/i)).not.toBeInTheDocument()
+    })
+
+    it('should show price tip for premium plan', () => {
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.premium} />)
+
+      expect(screen.getByText(/plans\.premium\.priceTip/i)).toBeInTheDocument()
+    })
+
+    it('should render features list for each plan', () => {
+      const { unmount: unmount1 } = render(<SelfHostedPlanItem plan={SelfHostedPlan.community} />)
+      expect(screen.getByTestId('self-hosted-list-community')).toBeInTheDocument()
+      unmount1()
+
+      const { unmount: unmount2 } = render(<SelfHostedPlanItem plan={SelfHostedPlan.premium} />)
+      expect(screen.getByTestId('self-hosted-list-premium')).toBeInTheDocument()
+      unmount2()
+
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.enterprise} />)
+      expect(screen.getByTestId('self-hosted-list-enterprise')).toBeInTheDocument()
+    })
+
+    it('should show AWS marketplace icon for premium plan button', () => {
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.premium} />)
+
+      expect(screen.getByTestId('icon-aws-light')).toBeInTheDocument()
+    })
+  })
+
+  // ─── 2. Navigation Flow ─────────────────────────────────────────────────
+  describe('Navigation flow', () => {
+    it('should redirect to GitHub when clicking community plan button', async () => {
+      const user = userEvent.setup()
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.community} />)
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      expect(assignedHref).toBe(getStartedWithCommunityUrl)
+    })
+
+    it('should redirect to AWS Marketplace when clicking premium plan button', async () => {
+      const user = userEvent.setup()
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.premium} />)
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      expect(assignedHref).toBe(getWithPremiumUrl)
+    })
+
+    it('should redirect to Typeform when clicking enterprise plan button', async () => {
+      const user = userEvent.setup()
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.enterprise} />)
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      expect(assignedHref).toBe(contactSalesUrl)
+    })
+  })
+
+  // ─── 3. Permission Check ────────────────────────────────────────────────
+  describe('Permission check', () => {
+    it('should show error toast when non-manager clicks community button', async () => {
+      setupAppContext({ isCurrentWorkspaceManager: false })
+      const user = userEvent.setup()
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.community} />)
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      await waitFor(() => {
+        expect(mockToastNotify).toHaveBeenCalledWith(
+          expect.objectContaining({ type: 'error' }),
+        )
+      })
+      // Should NOT redirect
+      expect(assignedHref).toBe('')
+    })
+
+    it('should show error toast when non-manager clicks premium button', async () => {
+      setupAppContext({ isCurrentWorkspaceManager: false })
+      const user = userEvent.setup()
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.premium} />)
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      await waitFor(() => {
+        expect(mockToastNotify).toHaveBeenCalledWith(
+          expect.objectContaining({ type: 'error' }),
+        )
+      })
+      expect(assignedHref).toBe('')
+    })
+
+    it('should show error toast when non-manager clicks enterprise button', async () => {
+      setupAppContext({ isCurrentWorkspaceManager: false })
+      const user = userEvent.setup()
+      render(<SelfHostedPlanItem plan={SelfHostedPlan.enterprise} />)
+
+      const button = screen.getByRole('button')
+      await user.click(button)
+
+      await waitFor(() => {
+        expect(mockToastNotify).toHaveBeenCalledWith(
+          expect.objectContaining({ type: 'error' }),
+        )
+      })
+      expect(assignedHref).toBe('')
+    })
+  })
+})

web/__tests__/explore/explore-app-list-flow.test.tsx

@@ -1,303 +0,0 @@
-/**
- * Integration test: Explore App List Flow
- *
- * Tests the end-to-end user flow of browsing, filtering, searching,
- * and adding apps to workspace from the explore page.
- */
-import type { Mock } from 'vitest'
-import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
-import type { App } from '@/models/explore'
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import AppList from '@/app/components/explore/app-list'
-import ExploreContext from '@/context/explore-context'
-import { fetchAppDetail } from '@/service/explore'
-import { AppModeEnum } from '@/types/app'
-
-const allCategoriesEn = 'explore.apps.allCategories:{"lng":"en"}'
-let mockTabValue = allCategoriesEn
-const mockSetTab = vi.fn()
-let mockExploreData: { categories: string[], allList: App[] } | undefined
-let mockIsLoading = false
-const mockHandleImportDSL = vi.fn()
-const mockHandleImportDSLConfirm = vi.fn()
-
-vi.mock('nuqs', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('nuqs')>()
-  return {
-    ...actual,
-    useQueryState: () => [mockTabValue, mockSetTab],
-  }
-})
-
-vi.mock('ahooks', async () => {
-  const actual = await vi.importActual<typeof import('ahooks')>('ahooks')
-  const React = await vi.importActual<typeof import('react')>('react')
-  return {
-    ...actual,
-    useDebounceFn: (fn: (...args: unknown[]) => void) => {
-      const fnRef = React.useRef(fn)
-      fnRef.current = fn
-      return {
-        run: () => setTimeout(() => fnRef.current(), 0),
-      }
-    },
-  }
-})
-
-vi.mock('@/service/use-explore', () => ({
-  useExploreAppList: () => ({
-    data: mockExploreData,
-    isLoading: mockIsLoading,
-    isError: false,
-  }),
-}))
-
-vi.mock('@/service/explore', () => ({
-  fetchAppDetail: vi.fn(),
-  fetchAppList: vi.fn(),
-}))
-
-vi.mock('@/hooks/use-import-dsl', () => ({
-  useImportDSL: () => ({
-    handleImportDSL: mockHandleImportDSL,
-    handleImportDSLConfirm: mockHandleImportDSLConfirm,
-    versions: ['v1'],
-    isFetching: false,
-  }),
-}))
-
-vi.mock('@/app/components/explore/create-app-modal', () => ({
-  default: (props: CreateAppModalProps) => {
-    if (!props.show)
-      return null
-    return (
-      <div data-testid="create-app-modal">
-        <button
-          data-testid="confirm-create"
-          onClick={() => props.onConfirm({
-            name: 'New App',
-            icon_type: 'emoji',
-            icon: '🤖',
-            icon_background: '#fff',
-            description: 'desc',
-          })}
-        >
-          confirm
-        </button>
-        <button data-testid="hide-create" onClick={props.onHide}>hide</button>
-      </div>
-    )
-  },
-}))
-
-vi.mock('@/app/components/app/create-from-dsl-modal/dsl-confirm-modal', () => ({
-  default: ({ onConfirm, onCancel }: { onConfirm: () => void, onCancel: () => void }) => (
-    <div data-testid="dsl-confirm-modal">
-      <button data-testid="dsl-confirm" onClick={onConfirm}>confirm</button>
-      <button data-testid="dsl-cancel" onClick={onCancel}>cancel</button>
-    </div>
-  ),
-}))
-
-const createApp = (overrides: Partial<App> = {}): App => ({
-  app: {
-    id: overrides.app?.id ?? 'app-id',
-    mode: overrides.app?.mode ?? AppModeEnum.CHAT,
-    icon_type: overrides.app?.icon_type ?? 'emoji',
-    icon: overrides.app?.icon ?? '😀',
-    icon_background: overrides.app?.icon_background ?? '#fff',
-    icon_url: overrides.app?.icon_url ?? '',
-    name: overrides.app?.name ?? 'Alpha',
-    description: overrides.app?.description ?? 'Alpha description',
-    use_icon_as_answer_icon: overrides.app?.use_icon_as_answer_icon ?? false,
-  },
-  can_trial: true,
-  app_id: overrides.app_id ?? 'app-1',
-  description: overrides.description ?? 'Alpha description',
-  copyright: overrides.copyright ?? '',
-  privacy_policy: overrides.privacy_policy ?? null,
-  custom_disclaimer: overrides.custom_disclaimer ?? null,
-  category: overrides.category ?? 'Writing',
-  position: overrides.position ?? 1,
-  is_listed: overrides.is_listed ?? true,
-  install_count: overrides.install_count ?? 0,
-  installed: overrides.installed ?? false,
-  editable: overrides.editable ?? false,
-  is_agent: overrides.is_agent ?? false,
-})
-
-const renderWithContext = (hasEditPermission = true, onSuccess?: () => void) => {
-  return render(
-    <ExploreContext.Provider
-      value={{
-        controlUpdateInstalledApps: 0,
-        setControlUpdateInstalledApps: vi.fn(),
-        hasEditPermission,
-        installedApps: [],
-        setInstalledApps: vi.fn(),
-        isFetchingInstalledApps: false,
-        setIsFetchingInstalledApps: vi.fn(),
-        isShowTryAppPanel: false,
-        setShowTryAppPanel: vi.fn(),
-      }}
-    >
-      <AppList onSuccess={onSuccess} />
-    </ExploreContext.Provider>,
-  )
-}
-
-describe('Explore App List Flow', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockTabValue = allCategoriesEn
-    mockIsLoading = false
-    mockExploreData = {
-      categories: ['Writing', 'Translate', 'Programming'],
-      allList: [
-        createApp({ app_id: 'app-1', app: { ...createApp().app, name: 'Writer Bot' }, category: 'Writing' }),
-        createApp({ app_id: 'app-2', app: { ...createApp().app, id: 'app-id-2', name: 'Translator' }, category: 'Translate' }),
-        createApp({ app_id: 'app-3', app: { ...createApp().app, id: 'app-id-3', name: 'Code Helper' }, category: 'Programming' }),
-      ],
-    }
-  })
-
-  describe('Browse and Filter Flow', () => {
-    it('should display all apps when no category filter is applied', () => {
-      renderWithContext()
-
-      expect(screen.getByText('Writer Bot')).toBeInTheDocument()
-      expect(screen.getByText('Translator')).toBeInTheDocument()
-      expect(screen.getByText('Code Helper')).toBeInTheDocument()
-    })
-
-    it('should filter apps by selected category', () => {
-      mockTabValue = 'Writing'
-      renderWithContext()
-
-      expect(screen.getByText('Writer Bot')).toBeInTheDocument()
-      expect(screen.queryByText('Translator')).not.toBeInTheDocument()
-      expect(screen.queryByText('Code Helper')).not.toBeInTheDocument()
-    })
-
-    it('should filter apps by search keyword', async () => {
-      renderWithContext()
-
-      const input = screen.getByPlaceholderText('common.operation.search')
-      fireEvent.change(input, { target: { value: 'trans' } })
-
-      await waitFor(() => {
-        expect(screen.getByText('Translator')).toBeInTheDocument()
-        expect(screen.queryByText('Writer Bot')).not.toBeInTheDocument()
-        expect(screen.queryByText('Code Helper')).not.toBeInTheDocument()
-      })
-    })
-  })
-
-  describe('Add to Workspace Flow', () => {
-    it('should complete the full add-to-workspace flow with DSL confirmation', async () => {
-      // Step 1: User clicks "Add to Workspace" on an app card
-      const onSuccess = vi.fn()
-      ;(fetchAppDetail as unknown as Mock).mockResolvedValue({ export_data: 'yaml-content' })
-      mockHandleImportDSL.mockImplementation(async (_payload: unknown, options: { onSuccess?: () => void, onPending?: () => void }) => {
-        options.onPending?.()
-      })
-      mockHandleImportDSLConfirm.mockImplementation(async (options: { onSuccess?: () => void }) => {
-        options.onSuccess?.()
-      })
-
-      renderWithContext(true, onSuccess)
-
-      // Step 2: Click add to workspace button - opens create modal
-      fireEvent.click(screen.getAllByText('explore.appCard.addToWorkspace')[0])
-
-      // Step 3: Confirm creation in modal
-      fireEvent.click(await screen.findByTestId('confirm-create'))
-
-      // Step 4: API fetches app detail
-      await waitFor(() => {
-        expect(fetchAppDetail).toHaveBeenCalledWith('app-id')
-      })
-
-      // Step 5: DSL import triggers pending confirmation
-      expect(mockHandleImportDSL).toHaveBeenCalledTimes(1)
-
-      // Step 6: DSL confirm modal appears and user confirms
-      expect(await screen.findByTestId('dsl-confirm-modal')).toBeInTheDocument()
-      fireEvent.click(screen.getByTestId('dsl-confirm'))
-
-      // Step 7: Flow completes successfully
-      await waitFor(() => {
-        expect(mockHandleImportDSLConfirm).toHaveBeenCalledTimes(1)
-        expect(onSuccess).toHaveBeenCalledTimes(1)
-      })
-    })
-  })
-
-  describe('Loading and Empty States', () => {
-    it('should transition from loading to content', () => {
-      // Step 1: Loading state
-      mockIsLoading = true
-      mockExploreData = undefined
-      const { rerender } = render(
-        <ExploreContext.Provider
-          value={{
-            controlUpdateInstalledApps: 0,
-            setControlUpdateInstalledApps: vi.fn(),
-            hasEditPermission: true,
-            installedApps: [],
-            setInstalledApps: vi.fn(),
-            isFetchingInstalledApps: false,
-            setIsFetchingInstalledApps: vi.fn(),
-            isShowTryAppPanel: false,
-            setShowTryAppPanel: vi.fn(),
-          }}
-        >
-          <AppList />
-        </ExploreContext.Provider>,
-      )
-
-      expect(screen.getByRole('status')).toBeInTheDocument()
-
-      // Step 2: Data loads
-      mockIsLoading = false
-      mockExploreData = {
-        categories: ['Writing'],
-        allList: [createApp()],
-      }
-      rerender(
-        <ExploreContext.Provider
-          value={{
-            controlUpdateInstalledApps: 0,
-            setControlUpdateInstalledApps: vi.fn(),
-            hasEditPermission: true,
-            installedApps: [],
-            setInstalledApps: vi.fn(),
-            isFetchingInstalledApps: false,
-            setIsFetchingInstalledApps: vi.fn(),
-            isShowTryAppPanel: false,
-            setShowTryAppPanel: vi.fn(),
-          }}
-        >
-          <AppList />
-        </ExploreContext.Provider>,
-      )
-
-      expect(screen.queryByRole('status')).not.toBeInTheDocument()
-      expect(screen.getByText('Alpha')).toBeInTheDocument()
-    })
-  })
-
-  describe('Permission-Based Behavior', () => {
-    it('should hide add-to-workspace button when user has no edit permission', () => {
-      renderWithContext(false)
-
-      expect(screen.queryByText('explore.appCard.addToWorkspace')).not.toBeInTheDocument()
-    })
-
-    it('should show add-to-workspace button when user has edit permission', () => {
-      renderWithContext(true)
-
-      expect(screen.getAllByText('explore.appCard.addToWorkspace').length).toBeGreaterThan(0)
-    })
-  })
-})

web/__tests__/explore/installed-app-flow.test.tsx

@@ -1,290 +0,0 @@
-/**
- * Integration test: Installed App Flow
- *
- * Tests the end-to-end user flow of installed apps: sidebar navigation,
- * mode-based routing (Chat / Completion / Workflow), and lifecycle
- * operations (pin/unpin, delete).
- */
-import type { Mock } from 'vitest'
-import type { InstalledApp as InstalledAppModel } from '@/models/explore'
-import { render, screen, waitFor } from '@testing-library/react'
-import { useContext } from 'use-context-selector'
-import InstalledApp from '@/app/components/explore/installed-app'
-import { useWebAppStore } from '@/context/web-app-context'
-import { AccessMode } from '@/models/access-control'
-import { useGetUserCanAccessApp } from '@/service/access-control'
-import { useGetInstalledAppAccessModeByAppId, useGetInstalledAppMeta, useGetInstalledAppParams } from '@/service/use-explore'
-import { AppModeEnum } from '@/types/app'
-
-// Mock external dependencies
-vi.mock('use-context-selector', () => ({
-  useContext: vi.fn(),
-  createContext: vi.fn(() => ({})),
-}))
-
-vi.mock('@/context/web-app-context', () => ({
-  useWebAppStore: vi.fn(),
-}))
-
-vi.mock('@/service/access-control', () => ({
-  useGetUserCanAccessApp: vi.fn(),
-}))
-
-vi.mock('@/service/use-explore', () => ({
-  useGetInstalledAppAccessModeByAppId: vi.fn(),
-  useGetInstalledAppParams: vi.fn(),
-  useGetInstalledAppMeta: vi.fn(),
-}))
-
-vi.mock('@/app/components/share/text-generation', () => ({
-  default: ({ isWorkflow }: { isWorkflow?: boolean }) => (
-    <div data-testid="text-generation-app">
-      Text Generation
-      {isWorkflow && ' (Workflow)'}
-    </div>
-  ),
-}))
-
-vi.mock('@/app/components/base/chat/chat-with-history', () => ({
-  default: ({ installedAppInfo }: { installedAppInfo?: InstalledAppModel }) => (
-    <div data-testid="chat-with-history">
-      Chat -
-      {' '}
-      {installedAppInfo?.app.name}
-    </div>
-  ),
-}))
-
-describe('Installed App Flow', () => {
-  const mockUpdateAppInfo = vi.fn()
-  const mockUpdateWebAppAccessMode = vi.fn()
-  const mockUpdateAppParams = vi.fn()
-  const mockUpdateWebAppMeta = vi.fn()
-  const mockUpdateUserCanAccessApp = vi.fn()
-
-  const createInstalledApp = (mode: AppModeEnum = AppModeEnum.CHAT): InstalledAppModel => ({
-    id: 'installed-app-1',
-    app: {
-      id: 'real-app-id',
-      name: 'Integration Test App',
-      mode,
-      icon_type: 'emoji',
-      icon: '🧪',
-      icon_background: '#FFFFFF',
-      icon_url: '',
-      description: 'Test app for integration',
-      use_icon_as_answer_icon: false,
-    },
-    uninstallable: true,
-    is_pinned: false,
-  })
-
-  const mockAppParams = {
-    user_input_form: [],
-    file_upload: { image: { enabled: false, number_limits: 0, transfer_methods: [] } },
-    system_parameters: {},
-  }
-
-  const setupDefaultMocks = (app: InstalledAppModel) => {
-    ;(useContext as Mock).mockReturnValue({
-      installedApps: [app],
-      isFetchingInstalledApps: false,
-    })
-
-    ;(useWebAppStore as unknown as Mock).mockImplementation((selector: (state: Record<string, Mock>) => unknown) => {
-      return selector({
-        updateAppInfo: mockUpdateAppInfo,
-        updateWebAppAccessMode: mockUpdateWebAppAccessMode,
-        updateAppParams: mockUpdateAppParams,
-        updateWebAppMeta: mockUpdateWebAppMeta,
-        updateUserCanAccessApp: mockUpdateUserCanAccessApp,
-      })
-    })
-
-    ;(useGetInstalledAppAccessModeByAppId as Mock).mockReturnValue({
-      isFetching: false,
-      data: { accessMode: AccessMode.PUBLIC },
-      error: null,
-    })
-
-    ;(useGetInstalledAppParams as Mock).mockReturnValue({
-      isFetching: false,
-      data: mockAppParams,
-      error: null,
-    })
-
-    ;(useGetInstalledAppMeta as Mock).mockReturnValue({
-      isFetching: false,
-      data: { tool_icons: {} },
-      error: null,
-    })
-
-    ;(useGetUserCanAccessApp as Mock).mockReturnValue({
-      data: { result: true },
-      error: null,
-    })
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Mode-Based Routing', () => {
-    it.each([
-      [AppModeEnum.CHAT, 'chat-with-history'],
-      [AppModeEnum.ADVANCED_CHAT, 'chat-with-history'],
-      [AppModeEnum.AGENT_CHAT, 'chat-with-history'],
-    ])('should render ChatWithHistory for %s mode', (mode, testId) => {
-      const app = createInstalledApp(mode)
-      setupDefaultMocks(app)
-
-      render(<InstalledApp id="installed-app-1" />)
-
-      expect(screen.getByTestId(testId)).toBeInTheDocument()
-      expect(screen.getByText(/Integration Test App/)).toBeInTheDocument()
-    })
-
-    it('should render TextGenerationApp for COMPLETION mode', () => {
-      const app = createInstalledApp(AppModeEnum.COMPLETION)
-      setupDefaultMocks(app)
-
-      render(<InstalledApp id="installed-app-1" />)
-
-      expect(screen.getByTestId('text-generation-app')).toBeInTheDocument()
-      expect(screen.getByText('Text Generation')).toBeInTheDocument()
-      expect(screen.queryByText(/Workflow/)).not.toBeInTheDocument()
-    })
-
-    it('should render TextGenerationApp with workflow flag for WORKFLOW mode', () => {
-      const app = createInstalledApp(AppModeEnum.WORKFLOW)
-      setupDefaultMocks(app)
-
-      render(<InstalledApp id="installed-app-1" />)
-
-      expect(screen.getByTestId('text-generation-app')).toBeInTheDocument()
-      expect(screen.getByText(/Workflow/)).toBeInTheDocument()
-    })
-  })
-
-  describe('Data Loading Flow', () => {
-    it('should show loading spinner when params are being fetched', () => {
-      const app = createInstalledApp()
-      setupDefaultMocks(app)
-
-      ;(useGetInstalledAppParams as Mock).mockReturnValue({
-        isFetching: true,
-        data: null,
-        error: null,
-      })
-
-      const { container } = render(<InstalledApp id="installed-app-1" />)
-
-      expect(container.querySelector('svg.spin-animation')).toBeInTheDocument()
-      expect(screen.queryByTestId('chat-with-history')).not.toBeInTheDocument()
-    })
-
-    it('should render content when all data is available', () => {
-      const app = createInstalledApp()
-      setupDefaultMocks(app)
-
-      render(<InstalledApp id="installed-app-1" />)
-
-      expect(screen.getByTestId('chat-with-history')).toBeInTheDocument()
-    })
-  })
-
-  describe('Error Handling Flow', () => {
-    it('should show error state when API fails', () => {
-      const app = createInstalledApp()
-      setupDefaultMocks(app)
-
-      ;(useGetInstalledAppParams as Mock).mockReturnValue({
-        isFetching: false,
-        data: null,
-        error: new Error('Network error'),
-      })
-
-      render(<InstalledApp id="installed-app-1" />)
-
-      expect(screen.getByText(/Network error/)).toBeInTheDocument()
-    })
-
-    it('should show 404 when app is not found', () => {
-      ;(useContext as Mock).mockReturnValue({
-        installedApps: [],
-        isFetchingInstalledApps: false,
-      })
-      ;(useWebAppStore as unknown as Mock).mockImplementation((selector: (state: Record<string, Mock>) => unknown) => {
-        return selector({
-          updateAppInfo: mockUpdateAppInfo,
-          updateWebAppAccessMode: mockUpdateWebAppAccessMode,
-          updateAppParams: mockUpdateAppParams,
-          updateWebAppMeta: mockUpdateWebAppMeta,
-          updateUserCanAccessApp: mockUpdateUserCanAccessApp,
-        })
-      })
-      ;(useGetInstalledAppAccessModeByAppId as Mock).mockReturnValue({
-        isFetching: false,
-        data: null,
-        error: null,
-      })
-      ;(useGetInstalledAppParams as Mock).mockReturnValue({
-        isFetching: false,
-        data: null,
-        error: null,
-      })
-      ;(useGetInstalledAppMeta as Mock).mockReturnValue({
-        isFetching: false,
-        data: null,
-        error: null,
-      })
-      ;(useGetUserCanAccessApp as Mock).mockReturnValue({
-        data: null,
-        error: null,
-      })
-
-      render(<InstalledApp id="nonexistent" />)
-
-      expect(screen.getByText(/404/)).toBeInTheDocument()
-    })
-
-    it('should show 403 when user has no permission', () => {
-      const app = createInstalledApp()
-      setupDefaultMocks(app)
-
-      ;(useGetUserCanAccessApp as Mock).mockReturnValue({
-        data: { result: false },
-        error: null,
-      })
-
-      render(<InstalledApp id="installed-app-1" />)
-
-      expect(screen.getByText(/403/)).toBeInTheDocument()
-    })
-  })
-
-  describe('State Synchronization', () => {
-    it('should update all stores when app data is loaded', async () => {
-      const app = createInstalledApp()
-      setupDefaultMocks(app)
-
-      render(<InstalledApp id="installed-app-1" />)
-
-      await waitFor(() => {
-        expect(mockUpdateAppInfo).toHaveBeenCalledWith(
-          expect.objectContaining({
-            app_id: 'installed-app-1',
-            site: expect.objectContaining({
-              title: 'Integration Test App',
-              icon: '🧪',
-            }),
-          }),
-        )
-        expect(mockUpdateAppParams).toHaveBeenCalledWith(mockAppParams)
-        expect(mockUpdateWebAppMeta).toHaveBeenCalledWith({ tool_icons: {} })
-        expect(mockUpdateWebAppAccessMode).toHaveBeenCalledWith(AccessMode.PUBLIC)
-        expect(mockUpdateUserCanAccessApp).toHaveBeenCalledWith(true)
-      })
-    })
-  })
-})

web/__tests__/explore/sidebar-lifecycle-flow.test.tsx

@@ -1,195 +0,0 @@
-/**
- * Integration test: Sidebar Lifecycle Flow
- *
- * Tests the sidebar interactions for installed apps lifecycle:
- * navigation, pin/unpin ordering, delete confirmation, and
- * fold/unfold behavior.
- */
-import type { InstalledApp } from '@/models/explore'
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import Toast from '@/app/components/base/toast'
-import SideBar from '@/app/components/explore/sidebar'
-import ExploreContext from '@/context/explore-context'
-import { MediaType } from '@/hooks/use-breakpoints'
-import { AppModeEnum } from '@/types/app'
-
-let mockMediaType: string = MediaType.pc
-const mockSegments = ['apps']
-const mockPush = vi.fn()
-const mockRefetch = vi.fn()
-const mockUninstall = vi.fn()
-const mockUpdatePinStatus = vi.fn()
-let mockInstalledApps: InstalledApp[] = []
-
-vi.mock('next/navigation', () => ({
-  useSelectedLayoutSegments: () => mockSegments,
-  useRouter: () => ({
-    push: mockPush,
-  }),
-}))
-
-vi.mock('@/hooks/use-breakpoints', () => ({
-  default: () => mockMediaType,
-  MediaType: {
-    mobile: 'mobile',
-    tablet: 'tablet',
-    pc: 'pc',
-  },
-}))
-
-vi.mock('@/service/use-explore', () => ({
-  useGetInstalledApps: () => ({
-    isFetching: false,
-    data: { installed_apps: mockInstalledApps },
-    refetch: mockRefetch,
-  }),
-  useUninstallApp: () => ({
-    mutateAsync: mockUninstall,
-  }),
-  useUpdateAppPinStatus: () => ({
-    mutateAsync: mockUpdatePinStatus,
-  }),
-}))
-
-const createInstalledApp = (overrides: Partial<InstalledApp> = {}): InstalledApp => ({
-  id: overrides.id ?? 'app-1',
-  uninstallable: overrides.uninstallable ?? false,
-  is_pinned: overrides.is_pinned ?? false,
-  app: {
-    id: overrides.app?.id ?? 'app-basic-id',
-    mode: overrides.app?.mode ?? AppModeEnum.CHAT,
-    icon_type: overrides.app?.icon_type ?? 'emoji',
-    icon: overrides.app?.icon ?? '🤖',
-    icon_background: overrides.app?.icon_background ?? '#fff',
-    icon_url: overrides.app?.icon_url ?? '',
-    name: overrides.app?.name ?? 'App One',
-    description: overrides.app?.description ?? 'desc',
-    use_icon_as_answer_icon: overrides.app?.use_icon_as_answer_icon ?? false,
-  },
-})
-
-const renderSidebar = (installedApps: InstalledApp[] = []) => {
-  return render(
-    <ExploreContext.Provider
-      value={{
-        controlUpdateInstalledApps: 0,
-        setControlUpdateInstalledApps: vi.fn(),
-        hasEditPermission: true,
-        installedApps,
-        setInstalledApps: vi.fn(),
-        isFetchingInstalledApps: false,
-        setIsFetchingInstalledApps: vi.fn(),
-      } as Record<string, unknown> as ReturnType<typeof ExploreContext.Provider extends React.FC<{ value: infer V }> ? () => V : never>}
-    >
-      <SideBar controlUpdateInstalledApps={0} />
-    </ExploreContext.Provider>,
-  )
-}
-
-describe('Sidebar Lifecycle Flow', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockMediaType = MediaType.pc
-    mockInstalledApps = []
-    vi.spyOn(Toast, 'notify').mockImplementation(() => ({ clear: vi.fn() }))
-  })
-
-  describe('Pin / Unpin / Delete Flow', () => {
-    it('should complete pin → unpin cycle for an app', async () => {
-      // Step 1: Start with an unpinned app
-      const app = createInstalledApp({ is_pinned: false })
-      mockInstalledApps = [app]
-      mockUpdatePinStatus.mockResolvedValue(undefined)
-
-      renderSidebar(mockInstalledApps)
-
-      // Step 2: Pin the app
-      fireEvent.click(screen.getByTestId('item-operation-trigger'))
-      fireEvent.click(await screen.findByText('explore.sidebar.action.pin'))
-
-      await waitFor(() => {
-        expect(mockUpdatePinStatus).toHaveBeenCalledWith({ appId: 'app-1', isPinned: true })
-        expect(Toast.notify).toHaveBeenCalledWith(expect.objectContaining({
-          type: 'success',
-        }))
-      })
-    })
-
-    it('should complete the delete flow with confirmation', async () => {
-      const app = createInstalledApp()
-      mockInstalledApps = [app]
-      mockUninstall.mockResolvedValue(undefined)
-
-      renderSidebar(mockInstalledApps)
-
-      // Step 1: Open operation menu and click delete
-      fireEvent.click(screen.getByTestId('item-operation-trigger'))
-      fireEvent.click(await screen.findByText('explore.sidebar.action.delete'))
-
-      // Step 2: Confirm dialog appears
-      expect(await screen.findByText('explore.sidebar.delete.title')).toBeInTheDocument()
-
-      // Step 3: Confirm deletion
-      fireEvent.click(screen.getByText('common.operation.confirm'))
-
-      // Step 4: Uninstall API called and success toast shown
-      await waitFor(() => {
-        expect(mockUninstall).toHaveBeenCalledWith('app-1')
-        expect(Toast.notify).toHaveBeenCalledWith(expect.objectContaining({
-          type: 'success',
-          message: 'common.api.remove',
-        }))
-      })
-    })
-
-    it('should cancel deletion when user clicks cancel', async () => {
-      const app = createInstalledApp()
-      mockInstalledApps = [app]
-
-      renderSidebar(mockInstalledApps)
-
-      // Open delete flow
-      fireEvent.click(screen.getByTestId('item-operation-trigger'))
-      fireEvent.click(await screen.findByText('explore.sidebar.action.delete'))
-
-      // Cancel the deletion
-      fireEvent.click(await screen.findByText('common.operation.cancel'))
-
-      // Uninstall should not be called
-      expect(mockUninstall).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('Multi-App Ordering', () => {
-    it('should display pinned apps before unpinned apps with divider', () => {
-      mockInstalledApps = [
-        createInstalledApp({ id: 'pinned-1', is_pinned: true, app: { ...createInstalledApp().app, name: 'Pinned App' } }),
-        createInstalledApp({ id: 'unpinned-1', is_pinned: false, app: { ...createInstalledApp().app, name: 'Regular App' } }),
-      ]
-
-      renderSidebar(mockInstalledApps)
-
-      const pinnedApp = screen.getByText('Pinned App')
-      const regularApp = screen.getByText('Regular App')
-
-      expect(pinnedApp).toBeInTheDocument()
-      expect(regularApp).toBeInTheDocument()
-    })
-  })
-
-  describe('Empty State', () => {
-    it('should show NoApps component when no apps are installed on desktop', () => {
-      mockMediaType = MediaType.pc
-      renderSidebar([])
-
-      expect(screen.getByText('explore.sidebar.noApps.title')).toBeInTheDocument()
-    })
-
-    it('should hide NoApps on mobile', () => {
-      mockMediaType = MediaType.mobile
-      renderSidebar([])
-
-      expect(screen.queryByText('explore.sidebar.noApps.title')).not.toBeInTheDocument()
-    })
-  })
-})

web/app/components/base/markdown-blocks/code-block.tsx

@@ -204,10 +204,23 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
         }
       }
       catch {
-        // Avoid executing arbitrary code; require valid JSON for chart options.
-        setChartState('error')
-        processedRef.current = true
-        return
+        try {
+          // eslint-disable-next-line no-new-func
+          const result = new Function(`return ${trimmedContent}`)()
+          if (typeof result === 'object' && result !== null) {
+            setFinalChartOption(result)
+            setChartState('success')
+            processedRef.current = true
+            return
+          }
+        }
+        catch {
+          // If we have a complete JSON structure but it doesn't parse,
+          // it's likely an error rather than incomplete data
+          setChartState('error')
+          processedRef.current = true
+          return
+        }
       }
     }
 
@@ -236,9 +249,19 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
         }
       }
       catch {
-        // Only accept JSON to avoid executing arbitrary code from the message.
-        setChartState('error')
-        processedRef.current = true
+        try {
+          // eslint-disable-next-line no-new-func
+          const result = new Function(`return ${trimmedContent}`)()
+          if (typeof result === 'object' && result !== null) {
+            setFinalChartOption(result)
+            isValidOption = true
+          }
+        }
+        catch {
+          // Both parsing methods failed, but content looks complete
+          setChartState('error')
+          processedRef.current = true
+        }
       }
 
       if (isValidOption) {

web/app/components/billing/__tests__/config.spec.ts

@@ -0,0 +1,141 @@
+import { ALL_PLANS, contactSalesUrl, contractSales, defaultPlan, getStartedWithCommunityUrl, getWithPremiumUrl, NUM_INFINITE, unAvailable } from '../config'
+import { Priority } from '../type'
+
+describe('Billing Config', () => {
+  describe('Constants', () => {
+    it('should define NUM_INFINITE as -1', () => {
+      expect(NUM_INFINITE).toBe(-1)
+    })
+
+    it('should define contractSales string', () => {
+      expect(contractSales).toBe('contractSales')
+    })
+
+    it('should define unAvailable string', () => {
+      expect(unAvailable).toBe('unAvailable')
+    })
+
+    it('should define valid URL constants', () => {
+      expect(contactSalesUrl).toMatch(/^https:\/\//)
+      expect(getStartedWithCommunityUrl).toMatch(/^https:\/\//)
+      expect(getWithPremiumUrl).toMatch(/^https:\/\//)
+    })
+  })
+
+  describe('ALL_PLANS', () => {
+    const requiredFields: (keyof typeof ALL_PLANS.sandbox)[] = [
+      'level',
+      'price',
+      'modelProviders',
+      'teamWorkspace',
+      'teamMembers',
+      'buildApps',
+      'documents',
+      'vectorSpace',
+      'documentsUploadQuota',
+      'documentsRequestQuota',
+      'apiRateLimit',
+      'documentProcessingPriority',
+      'messageRequest',
+      'triggerEvents',
+      'annotatedResponse',
+      'logHistory',
+    ]
+
+    it.each(['sandbox', 'professional', 'team'] as const)('should have all required fields for %s plan', (planKey) => {
+      const plan = ALL_PLANS[planKey]
+      for (const field of requiredFields)
+        expect(plan[field]).toBeDefined()
+    })
+
+    it('should have ascending plan levels: sandbox < professional < team', () => {
+      expect(ALL_PLANS.sandbox.level).toBeLessThan(ALL_PLANS.professional.level)
+      expect(ALL_PLANS.professional.level).toBeLessThan(ALL_PLANS.team.level)
+    })
+
+    it('should have ascending plan prices: sandbox < professional < team', () => {
+      expect(ALL_PLANS.sandbox.price).toBeLessThan(ALL_PLANS.professional.price)
+      expect(ALL_PLANS.professional.price).toBeLessThan(ALL_PLANS.team.price)
+    })
+
+    it('should have sandbox as the free plan', () => {
+      expect(ALL_PLANS.sandbox.price).toBe(0)
+    })
+
+    it('should have ascending team member limits', () => {
+      expect(ALL_PLANS.sandbox.teamMembers).toBeLessThan(ALL_PLANS.professional.teamMembers)
+      expect(ALL_PLANS.professional.teamMembers).toBeLessThan(ALL_PLANS.team.teamMembers)
+    })
+
+    it('should have ascending document processing priority', () => {
+      expect(ALL_PLANS.sandbox.documentProcessingPriority).toBe(Priority.standard)
+      expect(ALL_PLANS.professional.documentProcessingPriority).toBe(Priority.priority)
+      expect(ALL_PLANS.team.documentProcessingPriority).toBe(Priority.topPriority)
+    })
+
+    it('should have unlimited API rate limit for professional and team plans', () => {
+      expect(ALL_PLANS.sandbox.apiRateLimit).not.toBe(NUM_INFINITE)
+      expect(ALL_PLANS.professional.apiRateLimit).toBe(NUM_INFINITE)
+      expect(ALL_PLANS.team.apiRateLimit).toBe(NUM_INFINITE)
+    })
+
+    it('should have unlimited log history for professional and team plans', () => {
+      expect(ALL_PLANS.professional.logHistory).toBe(NUM_INFINITE)
+      expect(ALL_PLANS.team.logHistory).toBe(NUM_INFINITE)
+    })
+
+    it('should have unlimited trigger events only for team plan', () => {
+      expect(ALL_PLANS.sandbox.triggerEvents).not.toBe(NUM_INFINITE)
+      expect(ALL_PLANS.professional.triggerEvents).not.toBe(NUM_INFINITE)
+      expect(ALL_PLANS.team.triggerEvents).toBe(NUM_INFINITE)
+    })
+  })
+
+  describe('defaultPlan', () => {
+    it('should default to sandbox plan type', () => {
+      expect(defaultPlan.type).toBe('sandbox')
+    })
+
+    it('should have usage object with all required fields', () => {
+      const { usage } = defaultPlan
+      expect(usage).toHaveProperty('documents')
+      expect(usage).toHaveProperty('vectorSpace')
+      expect(usage).toHaveProperty('buildApps')
+      expect(usage).toHaveProperty('teamMembers')
+      expect(usage).toHaveProperty('annotatedResponse')
+      expect(usage).toHaveProperty('documentsUploadQuota')
+      expect(usage).toHaveProperty('apiRateLimit')
+      expect(usage).toHaveProperty('triggerEvents')
+    })
+
+    it('should have total object with all required fields', () => {
+      const { total } = defaultPlan
+      expect(total).toHaveProperty('documents')
+      expect(total).toHaveProperty('vectorSpace')
+      expect(total).toHaveProperty('buildApps')
+      expect(total).toHaveProperty('teamMembers')
+      expect(total).toHaveProperty('annotatedResponse')
+      expect(total).toHaveProperty('documentsUploadQuota')
+      expect(total).toHaveProperty('apiRateLimit')
+      expect(total).toHaveProperty('triggerEvents')
+    })
+
+    it('should use sandbox plan API rate limit and trigger events in total', () => {
+      expect(defaultPlan.total.apiRateLimit).toBe(ALL_PLANS.sandbox.apiRateLimit)
+      expect(defaultPlan.total.triggerEvents).toBe(ALL_PLANS.sandbox.triggerEvents)
+    })
+
+    it('should have reset info with null values', () => {
+      expect(defaultPlan.reset.apiRateLimit).toBeNull()
+      expect(defaultPlan.reset.triggerEvents).toBeNull()
+    })
+
+    it('should have usage values not exceeding totals', () => {
+      expect(defaultPlan.usage.documents).toBeLessThanOrEqual(defaultPlan.total.documents)
+      expect(defaultPlan.usage.vectorSpace).toBeLessThanOrEqual(defaultPlan.total.vectorSpace)
+      expect(defaultPlan.usage.buildApps).toBeLessThanOrEqual(defaultPlan.total.buildApps)
+      expect(defaultPlan.usage.teamMembers).toBeLessThanOrEqual(defaultPlan.total.teamMembers)
+      expect(defaultPlan.usage.annotatedResponse).toBeLessThanOrEqual(defaultPlan.total.annotatedResponse)
+    })
+  })
+})

web/app/components/billing/annotation-full/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
-import AnnotationFull from './index'
+import AnnotationFull from '../index'
 
-vi.mock('./usage', () => ({
+vi.mock('../usage', () => ({
   default: (props: { className?: string }) => {
     return (
       <div data-testid="usage-component" data-classname={props.className ?? ''}>
@@ -11,7 +11,7 @@ vi.mock('./usage', () => ({
   },
 }))
 
-vi.mock('../upgrade-btn', () => ({
+vi.mock('../../upgrade-btn', () => ({
   default: (props: { loc?: string }) => {
     return (
       <button type="button" data-testid="upgrade-btn">
@@ -29,27 +29,21 @@ describe('AnnotationFull', () => {
   // Rendering marketing copy with action button
   describe('Rendering', () => {
     it('should render tips when rendered', () => {
-      // Act
       render(<AnnotationFull />)
 
-      // Assert
       expect(screen.getByText('billing.annotatedResponse.fullTipLine1')).toBeInTheDocument()
       expect(screen.getByText('billing.annotatedResponse.fullTipLine2')).toBeInTheDocument()
     })
 
     it('should render upgrade button when rendered', () => {
-      // Act
       render(<AnnotationFull />)
 
-      // Assert
       expect(screen.getByTestId('upgrade-btn')).toBeInTheDocument()
     })
 
     it('should render Usage component when rendered', () => {
-      // Act
       render(<AnnotationFull />)
 
-      // Assert
       const usageComponent = screen.getByTestId('usage-component')
       expect(usageComponent).toBeInTheDocument()
     })

web/app/components/billing/annotation-full/__tests__/modal.spec.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import AnnotationFullModal from './modal'
+import AnnotationFullModal from '../modal'
 
-vi.mock('./usage', () => ({
+vi.mock('../usage', () => ({
   default: (props: { className?: string }) => {
     return (
       <div data-testid="usage-component" data-classname={props.className ?? ''}>
@@ -12,7 +12,7 @@ vi.mock('./usage', () => ({
 }))
 
 let mockUpgradeBtnProps: { loc?: string } | null = null
-vi.mock('../upgrade-btn', () => ({
+vi.mock('../../upgrade-btn', () => ({
   default: (props: { loc?: string }) => {
     mockUpgradeBtnProps = props
     return (
@@ -29,7 +29,7 @@ type ModalSnapshot = {
   className?: string
 }
 let mockModalProps: ModalSnapshot | null = null
-vi.mock('../../base/modal', () => ({
+vi.mock('../../../base/modal', () => ({
   default: ({ isShow, children, onClose, closable, className }: { isShow: boolean, children: React.ReactNode, onClose: () => void, closable?: boolean, className?: string }) => {
     mockModalProps = {
       isShow,
@@ -61,10 +61,8 @@ describe('AnnotationFullModal', () => {
   // Rendering marketing copy inside modal
   describe('Rendering', () => {
     it('should display main info when visible', () => {
-      // Act
       render(<AnnotationFullModal show onHide={vi.fn()} />)
 
-      // Assert
       expect(screen.getByText('billing.annotatedResponse.fullTipLine1')).toBeInTheDocument()
       expect(screen.getByText('billing.annotatedResponse.fullTipLine2')).toBeInTheDocument()
       expect(screen.getByTestId('usage-component')).toHaveAttribute('data-classname', 'mt-4')
@@ -81,10 +79,8 @@ describe('AnnotationFullModal', () => {
   // Controlling modal visibility
   describe('Visibility', () => {
     it('should not render content when hidden', () => {
-      // Act
       const { container } = render(<AnnotationFullModal show={false} onHide={vi.fn()} />)
 
-      // Assert
       expect(container).toBeEmptyDOMElement()
       expect(mockModalProps).toEqual(expect.objectContaining({ isShow: false }))
     })
@@ -93,14 +89,11 @@ describe('AnnotationFullModal', () => {
   // Handling close interactions
   describe('Close handling', () => {
     it('should trigger onHide when close control is clicked', () => {
-      // Arrange
       const onHide = vi.fn()
 
-      // Act
       render(<AnnotationFullModal show onHide={onHide} />)
       fireEvent.click(screen.getByTestId('mock-modal-close'))
 
-      // Assert
       expect(onHide).toHaveBeenCalledTimes(1)
     })
   })

web/app/components/billing/annotation-full/__tests__/usage.spec.tsx

@@ -1,11 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import Usage from './usage'
-
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
+import Usage from '../usage'
 
 const mockPlan = {
   usage: {
@@ -23,33 +17,25 @@ vi.mock('@/context/provider-context', () => ({
 }))
 
 describe('Usage', () => {
-  // Rendering: renders UsageInfo with correct props from context
   describe('Rendering', () => {
     it('should render usage info with data from provider context', () => {
-      // Arrange & Act
       render(<Usage />)
 
-      // Assert
-      expect(screen.getByText('annotatedResponse.quotaTitle')).toBeInTheDocument()
+      expect(screen.getByText('billing.annotatedResponse.quotaTitle')).toBeInTheDocument()
     })
 
     it('should pass className to UsageInfo component', () => {
-      // Arrange
       const testClassName = 'mt-4'
 
-      // Act
       const { container } = render(<Usage className={testClassName} />)
 
-      // Assert
       const wrapper = container.firstChild as HTMLElement
       expect(wrapper).toHaveClass(testClassName)
     })
 
     it('should display usage and total values from context', () => {
-      // Arrange & Act
       render(<Usage />)
 
-      // Assert
       expect(screen.getByText('50')).toBeInTheDocument()
       expect(screen.getByText('100')).toBeInTheDocument()
     })

web/app/components/billing/apps-full-in-dialog/__tests__/index.spec.tsx

@@ -8,7 +8,7 @@ import { Plan } from '@/app/components/billing/type'
 import { mailToSupport } from '@/app/components/header/utils/util'
 import { useAppContext } from '@/context/app-context'
 import { baseProviderContextValue, useProviderContext } from '@/context/provider-context'
-import AppsFull from './index'
+import AppsFull from '../index'
 
 vi.mock('@/context/app-context', () => ({
   useAppContext: vi.fn(),
@@ -120,10 +120,8 @@ describe('AppsFull', () => {
   // Rendering behavior for non-team plans.
   describe('Rendering', () => {
     it('should render the sandbox messaging and upgrade button', () => {
-      // Act
       render(<AppsFull loc="billing_dialog" />)
 
-      // Assert
       expect(screen.getByText('billing.apps.fullTip1')).toBeInTheDocument()
       expect(screen.getByText('billing.apps.fullTip1des')).toBeInTheDocument()
       expect(screen.getByText('billing.upgradeBtn.encourageShort')).toBeInTheDocument()
@@ -131,10 +129,8 @@ describe('AppsFull', () => {
     })
   })
 
-  // Prop-driven behavior for team plans and contact CTA.
   describe('Props', () => {
     it('should render team messaging and contact button for non-sandbox plans', () => {
-      // Arrange
       ;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
         plan: {
           ...baseProviderContextValue.plan,
@@ -149,7 +145,6 @@ describe('AppsFull', () => {
       }))
       render(<AppsFull loc="billing_dialog" />)
 
-      // Assert
       expect(screen.getByText('billing.apps.fullTip2')).toBeInTheDocument()
       expect(screen.getByText('billing.apps.fullTip2des')).toBeInTheDocument()
       expect(screen.queryByText('billing.upgradeBtn.encourageShort')).not.toBeInTheDocument()
@@ -158,7 +153,6 @@ describe('AppsFull', () => {
     })
 
     it('should render upgrade button for professional plans', () => {
-      // Arrange
       ;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
         plan: {
           ...baseProviderContextValue.plan,
@@ -172,17 +166,14 @@ describe('AppsFull', () => {
         },
       }))
 
-      // Act
       render(<AppsFull loc="billing_dialog" />)
 
-      // Assert
       expect(screen.getByText('billing.apps.fullTip1')).toBeInTheDocument()
       expect(screen.getByText('billing.upgradeBtn.encourageShort')).toBeInTheDocument()
       expect(screen.queryByText('billing.apps.contactUs')).not.toBeInTheDocument()
     })
 
     it('should render contact button for enterprise plans', () => {
-      // Arrange
       ;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
         plan: {
           ...baseProviderContextValue.plan,
@@ -196,10 +187,8 @@ describe('AppsFull', () => {
         },
       }))
 
-      // Act
       render(<AppsFull loc="billing_dialog" />)
 
-      // Assert
       expect(screen.getByText('billing.apps.fullTip1')).toBeInTheDocument()
       expect(screen.queryByText('billing.upgradeBtn.encourageShort')).not.toBeInTheDocument()
       expect(screen.getByRole('link', { name: 'billing.apps.contactUs' })).toHaveAttribute('href', 'mailto:support@example.com')
@@ -207,10 +196,8 @@ describe('AppsFull', () => {
     })
   })
 
-  // Edge cases for progress color thresholds.
   describe('Edge Cases', () => {
     it('should use the success color when usage is below 50%', () => {
-      // Arrange
       ;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
         plan: {
           ...baseProviderContextValue.plan,
@@ -224,15 +211,12 @@ describe('AppsFull', () => {
         },
       }))
 
-      // Act
       render(<AppsFull loc="billing_dialog" />)
 
-      // Assert
       expect(screen.getByTestId('billing-progress-bar')).toHaveClass('bg-components-progress-bar-progress-solid')
     })
 
     it('should use the warning color when usage is between 50% and 80%', () => {
-      // Arrange
       ;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
         plan: {
           ...baseProviderContextValue.plan,
@@ -246,15 +230,12 @@ describe('AppsFull', () => {
         },
       }))
 
-      // Act
       render(<AppsFull loc="billing_dialog" />)
 
-      // Assert
       expect(screen.getByTestId('billing-progress-bar')).toHaveClass('bg-components-progress-warning-progress')
     })
 
     it('should use the error color when usage is 80% or higher', () => {
-      // Arrange
       ;(useProviderContext as Mock).mockReturnValue(buildProviderContext({
         plan: {
           ...baseProviderContextValue.plan,
@@ -268,10 +249,8 @@ describe('AppsFull', () => {
         },
       }))
 
-      // Act
       render(<AppsFull loc="billing_dialog" />)
 
-      // Assert
       expect(screen.getByTestId('billing-progress-bar')).toHaveClass('bg-components-progress-error-progress')
     })
   })

web/app/components/billing/billing-page/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import Billing from './index'
+import Billing from '../index'
 
 let currentBillingUrl: string | null = 'https://billing'
 let fetching = false
@@ -33,7 +33,7 @@ vi.mock('@/context/provider-context', () => ({
   }),
 }))
 
-vi.mock('../plan', () => ({
+vi.mock('../../plan', () => ({
   default: ({ loc }: { loc: string }) => <div data-testid="plan-component" data-loc={loc} />,
 }))
 

web/app/components/billing/header-billing-btn/__tests__/index.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import { Plan } from '../type'
-import HeaderBillingBtn from './index'
+import { Plan } from '../../type'
+import HeaderBillingBtn from '../index'
 
 type HeaderGlobal = typeof globalThis & {
   __mockProviderContext?: ReturnType<typeof vi.fn>
@@ -26,7 +26,7 @@ vi.mock('@/context/provider-context', () => {
   }
 })
 
-vi.mock('../upgrade-btn', () => ({
+vi.mock('../../upgrade-btn', () => ({
   default: () => <button data-testid="upgrade-btn" type="button">Upgrade</button>,
 }))
 
@@ -70,6 +70,42 @@ describe('HeaderBillingBtn', () => {
     expect(screen.getByTestId('upgrade-btn')).toBeInTheDocument()
   })
 
+  it('renders team badge for team plan with correct styling', () => {
+    ensureProviderContextMock().mockReturnValueOnce({
+      plan: { type: Plan.team },
+      enableBilling: true,
+      isFetchedPlan: true,
+    })
+
+    render(<HeaderBillingBtn />)
+
+    const badge = screen.getByText('team').closest('div')
+    expect(badge).toBeInTheDocument()
+    expect(badge).toHaveClass('bg-[#E0EAFF]')
+  })
+
+  it('renders nothing when plan is not fetched', () => {
+    ensureProviderContextMock().mockReturnValueOnce({
+      plan: { type: Plan.professional },
+      enableBilling: true,
+      isFetchedPlan: false,
+    })
+
+    const { container } = render(<HeaderBillingBtn />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders sandbox upgrade btn with undefined onClick in display-only mode', () => {
+    ensureProviderContextMock().mockReturnValueOnce({
+      plan: { type: Plan.sandbox },
+      enableBilling: true,
+      isFetchedPlan: true,
+    })
+
+    render(<HeaderBillingBtn isDisplayOnly />)
+    expect(screen.getByTestId('upgrade-btn')).toBeInTheDocument()
+  })
+
   it('renders plan badge and forwards clicks when not display-only', () => {
     const onClick = vi.fn()
 

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

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react'
-import PartnerStack from './index'
+import PartnerStack from '../index'
 
 let isCloudEdition = true
 
@@ -12,7 +12,7 @@ vi.mock('@/config', () => ({
   },
 }))
 
-vi.mock('./use-ps-info', () => ({
+vi.mock('../use-ps-info', () => ({
   default: () => ({
     saveOrUpdate,
     bind,
@@ -40,4 +40,23 @@ describe('PartnerStack', () => {
     expect(saveOrUpdate).toHaveBeenCalledTimes(1)
     expect(bind).toHaveBeenCalledTimes(1)
   })
+
+  it('renders null (no visible DOM)', () => {
+    const { container } = render(<PartnerStack />)
+
+    expect(container.innerHTML).toBe('')
+  })
+
+  it('does not call helpers again on rerender', () => {
+    const { rerender } = render(<PartnerStack />)
+
+    expect(saveOrUpdate).toHaveBeenCalledTimes(1)
+    expect(bind).toHaveBeenCalledTimes(1)
+
+    rerender(<PartnerStack />)
+
+    // useEffect with [] should not run again on rerender
+    expect(saveOrUpdate).toHaveBeenCalledTimes(1)
+    expect(bind).toHaveBeenCalledTimes(1)
+  })
 })

web/app/components/billing/partner-stack/__tests__/use-ps-info.spec.tsx

@@ -1,6 +1,6 @@
 import { act, renderHook } from '@testing-library/react'
 import { PARTNER_STACK_CONFIG } from '@/config'
-import usePSInfo from './use-ps-info'
+import usePSInfo from '../use-ps-info'
 
 let searchParamsValues: Record<string, string | null> = {}
 const setSearchParams = (values: Record<string, string | null>) => {
@@ -193,4 +193,107 @@ describe('usePSInfo', () => {
       domain: '.dify.ai',
     })
   })
+
+  // Cookie parse failure: covers catch block (L14-16)
+  it('should fall back to empty object when cookie contains invalid JSON', () => {
+    const { get } = ensureCookieMocks()
+    get.mockReturnValue('not-valid-json{{{')
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    setSearchParams({
+      ps_partner_key: 'from-url',
+      ps_xid: 'click-url',
+    })
+
+    const { result } = renderHook(() => usePSInfo())
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      'Failed to parse partner stack info from cookie:',
+      expect.any(SyntaxError),
+    )
+    // Should still pick up values from search params
+    expect(result.current.psPartnerKey).toBe('from-url')
+    expect(result.current.psClickId).toBe('click-url')
+    consoleSpy.mockRestore()
+  })
+
+  // No keys at all: covers saveOrUpdate early return (L30) and bind no-op (L45 false branch)
+  it('should not save or bind when neither search params nor cookie have keys', () => {
+    const { get, set } = ensureCookieMocks()
+    get.mockReturnValue('{}')
+    setSearchParams({})
+
+    const { result } = renderHook(() => usePSInfo())
+
+    expect(result.current.psPartnerKey).toBeUndefined()
+    expect(result.current.psClickId).toBeUndefined()
+
+    act(() => {
+      result.current.saveOrUpdate()
+    })
+    expect(set).not.toHaveBeenCalled()
+  })
+
+  it('should not call mutateAsync when keys are missing during bind', async () => {
+    const { get } = ensureCookieMocks()
+    get.mockReturnValue('{}')
+    setSearchParams({})
+
+    const { result } = renderHook(() => usePSInfo())
+
+    const mutate = ensureMutateAsync()
+    await act(async () => {
+      await result.current.bind()
+    })
+
+    expect(mutate).not.toHaveBeenCalled()
+  })
+
+  // Non-400 error: covers L55 false branch (shouldRemoveCookie stays false)
+  it('should not remove cookie when bind fails with non-400 error', async () => {
+    const mutate = ensureMutateAsync()
+    mutate.mockRejectedValueOnce({ status: 500 })
+    setSearchParams({
+      ps_partner_key: 'bind-partner',
+      ps_xid: 'bind-click',
+    })
+
+    const { result } = renderHook(() => usePSInfo())
+
+    await act(async () => {
+      await result.current.bind()
+    })
+
+    const { remove } = ensureCookieMocks()
+    expect(remove).not.toHaveBeenCalled()
+  })
+
+  // Fallback to cookie values: covers L19-20 right side of || operator
+  it('should use cookie values when search params are absent', () => {
+    const { get } = ensureCookieMocks()
+    get.mockReturnValue(JSON.stringify({
+      partnerKey: 'cookie-partner',
+      clickId: 'cookie-click',
+    }))
+    setSearchParams({})
+
+    const { result } = renderHook(() => usePSInfo())
+
+    expect(result.current.psPartnerKey).toBe('cookie-partner')
+    expect(result.current.psClickId).toBe('cookie-click')
+  })
+
+  // Partial key missing: only partnerKey present, no clickId
+  it('should not save when only one key is available', () => {
+    const { get, set } = ensureCookieMocks()
+    get.mockReturnValue('{}')
+    setSearchParams({ ps_partner_key: 'partial-key' })
+
+    const { result } = renderHook(() => usePSInfo())
+
+    act(() => {
+      result.current.saveOrUpdate()
+    })
+
+    expect(set).not.toHaveBeenCalled()
+  })
 })

web/app/components/billing/plan-upgrade-modal/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as React from 'react'
-import PlanUpgradeModal from './index'
+import PlanUpgradeModal from '../index'
 
 const mockSetShowPricingModal = vi.fn()
 
@@ -39,13 +39,11 @@ describe('PlanUpgradeModal', () => {
 
   // Rendering and props-driven content
   it('should render modal with provided content when visible', () => {
-    // Arrange
     const extraInfoText = 'Additional upgrade details'
     renderComponent({
       extraInfo: <div>{extraInfoText}</div>,
     })
 
-    // Assert
     expect(screen.getByText(baseProps.title)).toBeInTheDocument()
     expect(screen.getByText(baseProps.description)).toBeInTheDocument()
     expect(screen.getByText(extraInfoText)).toBeInTheDocument()
@@ -55,40 +53,32 @@ describe('PlanUpgradeModal', () => {
 
   // Guard against rendering when modal is hidden
   it('should not render content when show is false', () => {
-    // Act
     renderComponent({ show: false })
 
-    // Assert
     expect(screen.queryByText(baseProps.title)).not.toBeInTheDocument()
     expect(screen.queryByText(baseProps.description)).not.toBeInTheDocument()
   })
 
   // User closes the modal from dismiss button
   it('should call onClose when dismiss button is clicked', async () => {
-    // Arrange
     const user = userEvent.setup()
     const onClose = vi.fn()
     renderComponent({ onClose })
 
-    // Act
     await user.click(screen.getByText('billing.triggerLimitModal.dismiss'))
 
-    // Assert
     expect(onClose).toHaveBeenCalledTimes(1)
   })
 
   // Upgrade path uses provided callback over pricing modal
   it('should call onUpgrade and onClose when upgrade button is clicked with onUpgrade provided', async () => {
-    // Arrange
     const user = userEvent.setup()
     const onClose = vi.fn()
     const onUpgrade = vi.fn()
     renderComponent({ onClose, onUpgrade })
 
-    // Act
     await user.click(screen.getByText('billing.triggerLimitModal.upgrade'))
 
-    // Assert
     expect(onClose).toHaveBeenCalledTimes(1)
     expect(onUpgrade).toHaveBeenCalledTimes(1)
     expect(mockSetShowPricingModal).not.toHaveBeenCalled()
@@ -96,15 +86,12 @@ describe('PlanUpgradeModal', () => {
 
   // Fallback upgrade path opens pricing modal when no onUpgrade is supplied
   it('should open pricing modal when upgrade button is clicked without onUpgrade', async () => {
-    // Arrange
     const user = userEvent.setup()
     const onClose = vi.fn()
     renderComponent({ onClose, onUpgrade: undefined })
 
-    // Act
     await user.click(screen.getByText('billing.triggerLimitModal.upgrade'))
 
-    // Assert
     expect(onClose).toHaveBeenCalledTimes(1)
     expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
   })

web/app/components/billing/plan/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { EDUCATION_VERIFYING_LOCALSTORAGE_ITEM } from '@/app/education-apply/constants'
-import { Plan } from '../type'
-import PlanComp from './index'
+import { Plan, SelfHostedPlan } from '../../type'
+import PlanComp from '../index'
 
 let currentPath = '/billing'
 
@@ -14,8 +14,7 @@ vi.mock('next/navigation', () => ({
 
 const setShowAccountSettingModalMock = vi.fn()
 vi.mock('@/context/modal-context', () => ({
-  // eslint-disable-next-line ts/no-explicit-any
-  useModalContextSelector: (selector: any) => selector({
+  useModalContextSelector: (selector: (state: { setShowAccountSettingModal: typeof setShowAccountSettingModalMock }) => unknown) => selector({
     setShowAccountSettingModal: setShowAccountSettingModalMock,
   }),
 }))
@@ -47,11 +46,10 @@ const verifyStateModalMock = vi.fn(props => (
   </div>
 ))
 vi.mock('@/app/education-apply/verify-state-modal', () => ({
-  // eslint-disable-next-line ts/no-explicit-any
-  default: (props: any) => verifyStateModalMock(props),
+  default: (props: { isShow: boolean, title?: string, content?: string, email?: string, showLink?: boolean, onConfirm?: () => void, onCancel?: () => void }) => verifyStateModalMock(props),
 }))
 
-vi.mock('../upgrade-btn', () => ({
+vi.mock('../../upgrade-btn', () => ({
   default: () => <button data-testid="plan-upgrade-btn" type="button">Upgrade</button>,
 }))
 
@@ -172,6 +170,66 @@ describe('PlanComp', () => {
     expect(screen.getByText('education.toVerified')).toBeInTheDocument()
   })
 
+  it('renders enterprise plan without upgrade button', () => {
+    providerContextMock.mockReturnValue({
+      plan: { ...planMock, type: SelfHostedPlan.enterprise },
+      enableEducationPlan: false,
+      allowRefreshEducationVerify: false,
+      isEducationAccount: false,
+    })
+    render(<PlanComp loc="billing-page" />)
+
+    expect(screen.getByText('billing.plans.enterprise.name')).toBeInTheDocument()
+    expect(screen.queryByTestId('plan-upgrade-btn')).not.toBeInTheDocument()
+  })
+
+  it('shows apiRateLimit reset info for sandbox plan', () => {
+    providerContextMock.mockReturnValue({
+      plan: {
+        ...planMock,
+        type: Plan.sandbox,
+        total: { ...planMock.total, apiRateLimit: 5000 },
+        reset: { ...planMock.reset, apiRateLimit: null },
+      },
+      enableEducationPlan: false,
+      allowRefreshEducationVerify: false,
+      isEducationAccount: false,
+    })
+    render(<PlanComp loc="billing-page" />)
+
+    // Sandbox plan with finite apiRateLimit and null reset uses getDaysUntilEndOfMonth()
+    expect(screen.getByText('billing.plans.sandbox.name')).toBeInTheDocument()
+  })
+
+  it('shows apiRateLimit reset info when reset is a number', () => {
+    providerContextMock.mockReturnValue({
+      plan: {
+        ...planMock,
+        type: Plan.professional,
+        total: { ...planMock.total, apiRateLimit: 5000 },
+        reset: { ...planMock.reset, apiRateLimit: 3 },
+      },
+      enableEducationPlan: false,
+      allowRefreshEducationVerify: false,
+      isEducationAccount: false,
+    })
+    render(<PlanComp loc="billing-page" />)
+
+    expect(screen.getByText('billing.plans.professional.name')).toBeInTheDocument()
+  })
+
+  it('does not show education verify when enableEducationPlan is false', () => {
+    providerContextMock.mockReturnValue({
+      plan: planMock,
+      enableEducationPlan: false,
+      allowRefreshEducationVerify: false,
+      isEducationAccount: false,
+    })
+    render(<PlanComp loc="billing-page" />)
+
+    expect(screen.queryByText('education.toVerified')).not.toBeInTheDocument()
+  })
+
   it('handles modal onConfirm and onCancel callbacks', async () => {
     mutateAsyncMock.mockRejectedValueOnce(new Error('boom'))
     render(<PlanComp loc="billing-page" />)

web/app/components/billing/plan/assets/__tests__/enterprise.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react'
-import Enterprise from './enterprise'
+import Enterprise from '../enterprise'
 
 describe('Enterprise Icon Component', () => {
   describe('Rendering', () => {

web/app/components/billing/plan/assets/__tests__/index.spec.tsx

@@ -1,11 +1,11 @@
 import { render } from '@testing-library/react'
-import EnterpriseDirect from './enterprise'
+import EnterpriseDirect from '../enterprise'
 
-import { Enterprise, Professional, Sandbox, Team } from './index'
-import ProfessionalDirect from './professional'
+import { Enterprise, Professional, Sandbox, Team } from '../index'
+import ProfessionalDirect from '../professional'
 // Import real components for comparison
-import SandboxDirect from './sandbox'
-import TeamDirect from './team'
+import SandboxDirect from '../sandbox'
+import TeamDirect from '../team'
 
 describe('Billing Plan Assets - Integration Tests', () => {
   describe('Exports', () => {

web/app/components/billing/plan/assets/__tests__/professional.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react'
-import Professional from './professional'
+import Professional from '../professional'
 
 describe('Professional Icon Component', () => {
   describe('Rendering', () => {

web/app/components/billing/plan/assets/__tests__/sandbox.spec.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 import * as React from 'react'
-import Sandbox from './sandbox'
+import Sandbox from '../sandbox'
 
 describe('Sandbox Icon Component', () => {
   describe('Rendering', () => {

web/app/components/billing/plan/assets/__tests__/team.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react'
-import Team from './team'
+import Team from '../team'
 
 describe('Team Icon Component', () => {
   describe('Rendering', () => {

web/app/components/billing/pricing/__tests__/footer.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { CategoryEnum } from '.'
-import Footer from './footer'
+import { CategoryEnum } from '..'
+import Footer from '../footer'
 
 vi.mock('next/link', () => ({
   default: ({ children, href, className, target }: { children: React.ReactNode, href: string, className?: string, target?: string }) => (
@@ -16,13 +16,10 @@ describe('Footer', () => {
     vi.clearAllMocks()
   })
 
-  // Rendering behavior
   describe('Rendering', () => {
     it('should render tax tips and comparison link when in cloud category', () => {
-      // Arrange
       render(<Footer pricingPageURL="https://dify.ai/pricing#plans-and-features" currentCategory={CategoryEnum.CLOUD} />)
 
-      // Assert
       expect(screen.getByText('billing.plansCommon.taxTip')).toBeInTheDocument()
       expect(screen.getByText('billing.plansCommon.taxTipSecond')).toBeInTheDocument()
       expect(screen.getByTestId('pricing-link')).toHaveAttribute('href', 'https://dify.ai/pricing#plans-and-features')
@@ -30,25 +27,19 @@ describe('Footer', () => {
     })
   })
 
-  // Prop-driven behavior
   describe('Props', () => {
     it('should hide tax tips when category is self-hosted', () => {
-      // Arrange
       render(<Footer pricingPageURL="https://dify.ai/pricing#plans-and-features" currentCategory={CategoryEnum.SELF} />)
 
-      // Assert
       expect(screen.queryByText('billing.plansCommon.taxTip')).not.toBeInTheDocument()
       expect(screen.queryByText('billing.plansCommon.taxTipSecond')).not.toBeInTheDocument()
     })
   })
 
-  // Edge case rendering behavior
   describe('Edge Cases', () => {
     it('should render link even when pricing URL is empty', () => {
-      // Arrange
       render(<Footer pricingPageURL="" currentCategory={CategoryEnum.CLOUD} />)
 
-      // Assert
       expect(screen.getByTestId('pricing-link')).toHaveAttribute('href', '')
     })
   })

web/app/components/billing/pricing/__tests__/header.spec.tsx

@@ -1,74 +1,39 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import Header from './header'
-
-let mockTranslations: Record<string, string> = {}
-
-vi.mock('react-i18next', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('react-i18next')>()
-  return {
-    ...actual,
-    useTranslation: () => ({
-      t: (key: string, options?: { ns?: string }) => {
-        if (mockTranslations[key])
-          return mockTranslations[key]
-        const prefix = options?.ns ? `${options.ns}.` : ''
-        return `${prefix}${key}`
-      },
-    }),
-  }
-})
+import Header from '../header'
 
 describe('Header', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockTranslations = {}
   })
 
-  // Rendering behavior
   describe('Rendering', () => {
     it('should render title and description translations', () => {
-      // Arrange
       const handleClose = vi.fn()
 
-      // Act
       render(<Header onClose={handleClose} />)
 
-      // Assert
       expect(screen.getByText('billing.plansCommon.title.plans')).toBeInTheDocument()
       expect(screen.getByText('billing.plansCommon.title.description')).toBeInTheDocument()
       expect(screen.getByRole('button')).toBeInTheDocument()
     })
   })
 
-  // Prop-driven behavior
   describe('Props', () => {
     it('should invoke onClose when close button is clicked', () => {
-      // Arrange
       const handleClose = vi.fn()
       render(<Header onClose={handleClose} />)
 
-      // Act
       fireEvent.click(screen.getByRole('button'))
 
-      // Assert
       expect(handleClose).toHaveBeenCalledTimes(1)
     })
   })
 
-  // Edge case rendering behavior
   describe('Edge Cases', () => {
-    it('should render structure when translations are empty strings', () => {
-      // Arrange
-      mockTranslations = {
-        'billing.plansCommon.title.plans': '',
-        'billing.plansCommon.title.description': '',
-      }
-
-      // Act
+    it('should render structural elements with translation keys', () => {
       const { container } = render(<Header onClose={vi.fn()} />)
 
-      // Assert
       expect(container.querySelector('span')).toBeInTheDocument()
       expect(container.querySelector('p')).toBeInTheDocument()
       expect(screen.getByRole('button')).toBeInTheDocument()

web/app/components/billing/pricing/__tests__/index.spec.tsx

@@ -1,17 +1,24 @@
 import type { Mock } from 'vitest'
-import type { UsagePlanInfo } from '../type'
+import type { UsagePlanInfo } from '../../type'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { useKeyPress } from 'ahooks'
 import * as React from 'react'
 import { useAppContext } from '@/context/app-context'
 import { useGetPricingPageLanguage } from '@/context/i18n'
 import { useProviderContext } from '@/context/provider-context'
-import { Plan } from '../type'
-import Pricing from './index'
+import { Plan } from '../../type'
+import Pricing from '../index'
 
-let mockTranslations: Record<string, string> = {}
 let mockLanguage: string | null = 'en'
 
+vi.mock('../plans/self-hosted-plan-item/list', () => ({
+  default: ({ plan }: { plan: string }) => (
+    <div data-testid={`list-${plan}`}>
+      List for
+      {plan}
+    </div>
+  ),
+}))
+
 vi.mock('next/link', () => ({
   default: ({ children, href, className, target }: { children: React.ReactNode, href: string, className?: string, target?: string }) => (
     <a href={href} className={className} target={target} data-testid="pricing-link">
@@ -20,10 +27,6 @@ vi.mock('next/link', () => ({
   ),
 }))
 
-vi.mock('ahooks', () => ({
-  useKeyPress: vi.fn(),
-}))
-
 vi.mock('@/context/app-context', () => ({
   useAppContext: vi.fn(),
 }))
@@ -36,24 +39,6 @@ vi.mock('@/context/i18n', () => ({
   useGetPricingPageLanguage: vi.fn(),
 }))
 
-vi.mock('react-i18next', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('react-i18next')>()
-  return {
-    ...actual,
-    useTranslation: () => ({
-      t: (key: string, options?: { returnObjects?: boolean, ns?: string }) => {
-        if (options?.returnObjects)
-          return mockTranslations[key] ?? []
-        if (mockTranslations[key])
-          return mockTranslations[key]
-        const prefix = options?.ns ? `${options.ns}.` : ''
-        return `${prefix}${key}`
-      },
-    }),
-    Trans: ({ i18nKey }: { i18nKey: string }) => <span>{i18nKey}</span>,
-  }
-})
-
 const buildUsage = (): UsagePlanInfo => ({
   buildApps: 0,
   teamMembers: 0,
@@ -67,7 +52,6 @@ const buildUsage = (): UsagePlanInfo => ({
 describe('Pricing', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockTranslations = {}
     mockLanguage = 'en'
     ;(useAppContext as Mock).mockReturnValue({ isCurrentWorkspaceManager: true })
     ;(useProviderContext as Mock).mockReturnValue({
@@ -80,42 +64,33 @@ describe('Pricing', () => {
     ;(useGetPricingPageLanguage as Mock).mockImplementation(() => mockLanguage)
   })
 
-  // Rendering behavior
   describe('Rendering', () => {
     it('should render pricing header and localized footer link', () => {
-      // Arrange
       render(<Pricing onCancel={vi.fn()} />)
 
-      // Assert
       expect(screen.getByText('billing.plansCommon.title.plans')).toBeInTheDocument()
       expect(screen.getByTestId('pricing-link')).toHaveAttribute('href', 'https://dify.ai/en/pricing#plans-and-features')
     })
   })
 
-  // Prop-driven behavior
   describe('Props', () => {
-    it('should register esc key handler and allow switching categories', () => {
-      // Arrange
+    it('should allow switching categories and handle esc key', () => {
       const handleCancel = vi.fn()
       render(<Pricing onCancel={handleCancel} />)
 
-      // Act
       fireEvent.click(screen.getByText('billing.plansCommon.self'))
-
-      // Assert
-      expect(useKeyPress).toHaveBeenCalledWith(['esc'], handleCancel)
       expect(screen.queryByRole('switch')).not.toBeInTheDocument()
+
+      fireEvent.keyDown(window, { key: 'Escape', keyCode: 27 })
+      expect(handleCancel).toHaveBeenCalled()
     })
   })
 
-  // Edge case rendering behavior
   describe('Edge Cases', () => {
     it('should fall back to default pricing URL when language is empty', () => {
-      // Arrange
       mockLanguage = ''
       render(<Pricing onCancel={vi.fn()} />)
 
-      // Assert
       expect(screen.getByTestId('pricing-link')).toHaveAttribute('href', 'https://dify.ai/pricing#plans-and-features')
     })
   })

web/app/components/billing/pricing/assets/__tests__/components.spec.tsx

@@ -0,0 +1,81 @@
+import { render } from '@testing-library/react'
+import {
+  Cloud,
+  Community,
+  Enterprise,
+  EnterpriseNoise,
+  NoiseBottom,
+  NoiseTop,
+  Premium,
+  PremiumNoise,
+  Professional,
+  Sandbox,
+  SelfHosted,
+  Team,
+} from '../index'
+
+// Static SVG components (no props)
+describe('Static Pricing Asset Components', () => {
+  const staticComponents = [
+    { name: 'Community', Component: Community },
+    { name: 'Enterprise', Component: Enterprise },
+    { name: 'EnterpriseNoise', Component: EnterpriseNoise },
+    { name: 'NoiseBottom', Component: NoiseBottom },
+    { name: 'NoiseTop', Component: NoiseTop },
+    { name: 'Premium', Component: Premium },
+    { name: 'PremiumNoise', Component: PremiumNoise },
+    { name: 'Professional', Component: Professional },
+    { name: 'Sandbox', Component: Sandbox },
+    { name: 'Team', Component: Team },
+  ]
+
+  it.each(staticComponents)('$name should render an SVG element', ({ Component }) => {
+    const { container } = render(<Component />)
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it.each(staticComponents)('$name should render without errors on rerender', ({ Component }) => {
+    const { container, rerender } = render(<Component />)
+    rerender(<Component />)
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+})
+
+// Interactive SVG components with isActive prop
+describe('Cloud', () => {
+  it('should render an SVG element', () => {
+    const { container } = render(<Cloud isActive={false} />)
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should use primary color when inactive', () => {
+    const { container } = render(<Cloud isActive={false} />)
+    const rects = container.querySelectorAll('rect[fill="var(--color-text-primary)"]')
+    expect(rects.length).toBeGreaterThan(0)
+  })
+
+  it('should use accent color when active', () => {
+    const { container } = render(<Cloud isActive={true} />)
+    const rects = container.querySelectorAll('rect[fill="var(--color-saas-dify-blue-accessible)"]')
+    expect(rects.length).toBeGreaterThan(0)
+  })
+})
+
+describe('SelfHosted', () => {
+  it('should render an SVG element', () => {
+    const { container } = render(<SelfHosted isActive={false} />)
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should use primary color when inactive', () => {
+    const { container } = render(<SelfHosted isActive={false} />)
+    const rects = container.querySelectorAll('rect[fill="var(--color-text-primary)"]')
+    expect(rects.length).toBeGreaterThan(0)
+  })
+
+  it('should use accent color when active', () => {
+    const { container } = render(<SelfHosted isActive={true} />)
+    const rects = container.querySelectorAll('rect[fill="var(--color-saas-dify-blue-accessible)"]')
+    expect(rects.length).toBeGreaterThan(0)
+  })
+})

web/app/components/billing/pricing/assets/__tests__/index.spec.tsx

@@ -12,13 +12,11 @@ import {
   Sandbox,
   SelfHosted,
   Team,
-} from './index'
+} from '../index'
 
 describe('Pricing Assets', () => {
-  // Rendering: each asset should render an svg.
   describe('Rendering', () => {
     it('should render static assets without crashing', () => {
-      // Arrange
       const assets = [
         <Community key="community" />,
         <Enterprise key="enterprise" />,
@@ -44,37 +42,29 @@ describe('Pricing Assets', () => {
   // Props: active state should change fill color for selectable assets.
   describe('Props', () => {
     it('should render active state for Cloud', () => {
-      // Arrange
       const { container } = render(<Cloud isActive />)
 
-      // Assert
       const rects = Array.from(container.querySelectorAll('rect'))
       expect(rects.some(rect => rect.getAttribute('fill') === 'var(--color-saas-dify-blue-accessible)')).toBe(true)
     })
 
     it('should render inactive state for Cloud', () => {
-      // Arrange
       const { container } = render(<Cloud isActive={false} />)
 
-      // Assert
       const rects = Array.from(container.querySelectorAll('rect'))
       expect(rects.some(rect => rect.getAttribute('fill') === 'var(--color-text-primary)')).toBe(true)
     })
 
     it('should render active state for SelfHosted', () => {
-      // Arrange
       const { container } = render(<SelfHosted isActive />)
 
-      // Assert
       const rects = Array.from(container.querySelectorAll('rect'))
       expect(rects.some(rect => rect.getAttribute('fill') === 'var(--color-saas-dify-blue-accessible)')).toBe(true)
     })
 
     it('should render inactive state for SelfHosted', () => {
-      // Arrange
       const { container } = render(<SelfHosted isActive={false} />)
 
-      // Assert
       const rects = Array.from(container.querySelectorAll('rect'))
       expect(rects.some(rect => rect.getAttribute('fill') === 'var(--color-text-primary)')).toBe(true)
     })

web/app/components/billing/pricing/plan-switcher/__tests__/index.spec.tsx

@@ -1,36 +1,16 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { CategoryEnum } from '../index'
-import PlanSwitcher from './index'
-import { PlanRange } from './plan-range-switcher'
-
-let mockTranslations: Record<string, string> = {}
-
-vi.mock('react-i18next', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('react-i18next')>()
-  return {
-    ...actual,
-    useTranslation: () => ({
-      t: (key: string, options?: { ns?: string }) => {
-        if (key in mockTranslations)
-          return mockTranslations[key]
-        const prefix = options?.ns ? `${options.ns}.` : ''
-        return `${prefix}${key}`
-      },
-    }),
-  }
-})
+import { CategoryEnum } from '../../index'
+import PlanSwitcher from '../index'
+import { PlanRange } from '../plan-range-switcher'
 
 describe('PlanSwitcher', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockTranslations = {}
   })
 
-  // Rendering behavior
   describe('Rendering', () => {
     it('should render category tabs and plan range switcher for cloud', () => {
-      // Arrange
       render(
         <PlanSwitcher
           currentCategory={CategoryEnum.CLOUD}
@@ -40,17 +20,14 @@ describe('PlanSwitcher', () => {
         />,
       )
 
-      // Assert
       expect(screen.getByText('billing.plansCommon.cloud')).toBeInTheDocument()
       expect(screen.getByText('billing.plansCommon.self')).toBeInTheDocument()
       expect(screen.getByRole('switch')).toBeInTheDocument()
     })
   })
 
-  // Prop-driven behavior
   describe('Props', () => {
     it('should call onChangeCategory when selecting a tab', () => {
-      // Arrange
       const handleChangeCategory = vi.fn()
       render(
         <PlanSwitcher
@@ -61,16 +38,13 @@ describe('PlanSwitcher', () => {
         />,
       )
 
-      // Act
       fireEvent.click(screen.getByText('billing.plansCommon.self'))
 
-      // Assert
       expect(handleChangeCategory).toHaveBeenCalledTimes(1)
       expect(handleChangeCategory).toHaveBeenCalledWith(CategoryEnum.SELF)
     })
 
     it('should hide plan range switcher when category is self-hosted', () => {
-      // Arrange
       render(
         <PlanSwitcher
           currentCategory={CategoryEnum.SELF}
@@ -80,21 +54,12 @@ describe('PlanSwitcher', () => {
         />,
       )
 
-      // Assert
       expect(screen.queryByRole('switch')).not.toBeInTheDocument()
     })
   })
 
-  // Edge case rendering behavior
   describe('Edge Cases', () => {
-    it('should render tabs when translation strings are empty', () => {
-      // Arrange
-      mockTranslations = {
-        'plansCommon.cloud': '',
-        'plansCommon.self': '',
-      }
-
-      // Act
+    it('should render tabs with translation keys', () => {
       const { container } = render(
         <PlanSwitcher
           currentCategory={CategoryEnum.SELF}
@@ -104,11 +69,10 @@ describe('PlanSwitcher', () => {
         />,
       )
 
-      // Assert
       const labels = container.querySelectorAll('span')
       expect(labels).toHaveLength(2)
-      expect(labels[0]?.textContent).toBe('')
-      expect(labels[1]?.textContent).toBe('')
+      expect(labels[0]?.textContent).toBe('billing.plansCommon.cloud')
+      expect(labels[1]?.textContent).toBe('billing.plansCommon.self')
     })
   })
 })

web/app/components/billing/pricing/plan-switcher/__tests__/plan-range-switcher.spec.tsx

@@ -1,86 +1,50 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import PlanRangeSwitcher, { PlanRange } from './plan-range-switcher'
-
-let mockTranslations: Record<string, string> = {}
-
-vi.mock('react-i18next', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('react-i18next')>()
-  return {
-    ...actual,
-    useTranslation: () => ({
-      t: (key: string, options?: { ns?: string }) => {
-        if (mockTranslations[key])
-          return mockTranslations[key]
-        const prefix = options?.ns ? `${options.ns}.` : ''
-        return `${prefix}${key}`
-      },
-    }),
-  }
-})
+import PlanRangeSwitcher, { PlanRange } from '../plan-range-switcher'
 
 describe('PlanRangeSwitcher', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockTranslations = {}
   })
 
-  // Rendering behavior
   describe('Rendering', () => {
     it('should render the annual billing label', () => {
-      // Arrange
       render(<PlanRangeSwitcher value={PlanRange.monthly} onChange={vi.fn()} />)
 
-      // Assert
-      expect(screen.getByText('billing.plansCommon.annualBilling')).toBeInTheDocument()
+      expect(screen.getByText(/billing\.plansCommon\.annualBilling/)).toBeInTheDocument()
       expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'false')
     })
   })
 
-  // Prop-driven behavior
   describe('Props', () => {
     it('should switch to yearly when toggled from monthly', () => {
-      // Arrange
       const handleChange = vi.fn()
       render(<PlanRangeSwitcher value={PlanRange.monthly} onChange={handleChange} />)
 
-      // Act
       fireEvent.click(screen.getByRole('switch'))
 
-      // Assert
       expect(handleChange).toHaveBeenCalledTimes(1)
       expect(handleChange).toHaveBeenCalledWith(PlanRange.yearly)
     })
 
     it('should switch to monthly when toggled from yearly', () => {
-      // Arrange
       const handleChange = vi.fn()
       render(<PlanRangeSwitcher value={PlanRange.yearly} onChange={handleChange} />)
 
-      // Act
       fireEvent.click(screen.getByRole('switch'))
 
-      // Assert
       expect(handleChange).toHaveBeenCalledTimes(1)
       expect(handleChange).toHaveBeenCalledWith(PlanRange.monthly)
     })
   })
 
-  // Edge case rendering behavior
   describe('Edge Cases', () => {
-    it('should render when the translation string is empty', () => {
-      // Arrange
-      mockTranslations = {
-        'billing.plansCommon.annualBilling': '',
-      }
+    it('should render label with translation key and params', () => {
+      render(<PlanRangeSwitcher value={PlanRange.monthly} onChange={vi.fn()} />)
 
-      // Act
-      const { container } = render(<PlanRangeSwitcher value={PlanRange.monthly} onChange={vi.fn()} />)
-
-      // Assert
-      const label = container.querySelector('span')
+      const label = screen.getByText(/billing\.plansCommon\.annualBilling/)
       expect(label).toBeInTheDocument()
-      expect(label?.textContent).toBe('')
+      expect(label.textContent).toContain('percent')
     })
   })
 })

web/app/components/billing/pricing/plan-switcher/__tests__/tab.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import Tab from './tab'
+import Tab from '../tab'
 
 const Icon = ({ isActive }: { isActive: boolean }) => (
   <svg data-testid="tab-icon" data-active={isActive ? 'true' : 'false'} />
@@ -11,10 +11,8 @@ describe('PlanSwitcherTab', () => {
     vi.clearAllMocks()
   })
 
-  // Rendering behavior
   describe('Rendering', () => {
     it('should render label and icon', () => {
-      // Arrange
       render(
         <Tab
           Icon={Icon}
@@ -25,16 +23,13 @@ describe('PlanSwitcherTab', () => {
         />,
       )
 
-      // Assert
       expect(screen.getByText('Cloud')).toBeInTheDocument()
       expect(screen.getByTestId('tab-icon')).toHaveAttribute('data-active', 'false')
     })
   })
 
-  // Prop-driven behavior
   describe('Props', () => {
     it('should call onClick with the provided value', () => {
-      // Arrange
       const handleClick = vi.fn()
       render(
         <Tab
@@ -46,16 +41,13 @@ describe('PlanSwitcherTab', () => {
         />,
       )
 
-      // Act
       fireEvent.click(screen.getByText('Self'))
 
-      // Assert
       expect(handleClick).toHaveBeenCalledTimes(1)
       expect(handleClick).toHaveBeenCalledWith('self')
     })
 
     it('should apply active text class when isActive is true', () => {
-      // Arrange
       render(
         <Tab
           Icon={Icon}
@@ -66,16 +58,13 @@ describe('PlanSwitcherTab', () => {
         />,
       )
 
-      // Assert
       expect(screen.getByText('Cloud')).toHaveClass('text-saas-dify-blue-accessible')
       expect(screen.getByTestId('tab-icon')).toHaveAttribute('data-active', 'true')
     })
   })
 
-  // Edge case rendering behavior
   describe('Edge Cases', () => {
     it('should render when label is empty', () => {
-      // Arrange
       const { container } = render(
         <Tab
           Icon={Icon}
@@ -86,7 +75,6 @@ describe('PlanSwitcherTab', () => {
         />,
       )
 
-      // Assert
       const label = container.querySelector('span')
       expect(label).toBeInTheDocument()
       expect(label?.textContent).toBe('')

web/app/components/billing/pricing/plans/__tests__/index.spec.tsx

@@ -1,14 +1,14 @@
 import type { Mock } from 'vitest'
-import type { UsagePlanInfo } from '../../type'
+import type { UsagePlanInfo } from '../../../type'
 import { render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { Plan } from '../../type'
-import { PlanRange } from '../plan-switcher/plan-range-switcher'
-import cloudPlanItem from './cloud-plan-item'
-import Plans from './index'
-import selfHostedPlanItem from './self-hosted-plan-item'
+import { Plan } from '../../../type'
+import { PlanRange } from '../../plan-switcher/plan-range-switcher'
+import cloudPlanItem from '../cloud-plan-item'
+import Plans from '../index'
+import selfHostedPlanItem from '../self-hosted-plan-item'
 
-vi.mock('./cloud-plan-item', () => ({
+vi.mock('../cloud-plan-item', () => ({
   default: vi.fn(props => (
     <div data-testid={`cloud-plan-${props.plan}`} data-current-plan={props.currentPlan}>
       Cloud
@@ -18,7 +18,7 @@ vi.mock('./cloud-plan-item', () => ({
   )),
 }))
 
-vi.mock('./self-hosted-plan-item', () => ({
+vi.mock('../self-hosted-plan-item', () => ({
   default: vi.fn(props => (
     <div data-testid={`self-plan-${props.plan}`}>
       Self

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

@@ -1,13 +1,12 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { Plan } from '../../../type'
-import Button from './button'
+import { Plan } from '../../../../type'
+import Button from '../button'
 
 describe('CloudPlanButton', () => {
   describe('Disabled state', () => {
     it('should disable button and hide arrow when plan is not available', () => {
       const handleGetPayUrl = vi.fn()
-      // Arrange
       render(
         <Button
           plan={Plan.team}
@@ -18,7 +17,6 @@ describe('CloudPlanButton', () => {
       )
 
       const button = screen.getByRole('button', { name: /Get started/i })
-      // Assert
       expect(button).toBeDisabled()
       expect(button.className).toContain('cursor-not-allowed')
       expect(handleGetPayUrl).not.toHaveBeenCalled()
@@ -28,7 +26,6 @@ describe('CloudPlanButton', () => {
   describe('Enabled state', () => {
     it('should invoke handler and render arrow when plan is available', () => {
       const handleGetPayUrl = vi.fn()
-      // Arrange
       render(
         <Button
           plan={Plan.sandbox}
@@ -39,10 +36,8 @@ describe('CloudPlanButton', () => {
       )
 
       const button = screen.getByRole('button', { name: /Start now/i })
-      // Act
       fireEvent.click(button)
 
-      // Assert
       expect(handleGetPayUrl).toHaveBeenCalledTimes(1)
       expect(button).not.toBeDisabled()
     })

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

@@ -5,13 +5,13 @@ import { useAppContext } from '@/context/app-context'
 import { useAsyncWindowOpen } from '@/hooks/use-async-window-open'
 import { fetchSubscriptionUrls } from '@/service/billing'
 import { consoleClient } from '@/service/client'
-import Toast from '../../../../base/toast'
-import { ALL_PLANS } from '../../../config'
-import { Plan } from '../../../type'
-import { PlanRange } from '../../plan-switcher/plan-range-switcher'
-import CloudPlanItem from './index'
+import Toast from '../../../../../base/toast'
+import { ALL_PLANS } from '../../../../config'
+import { Plan } from '../../../../type'
+import { PlanRange } from '../../../plan-switcher/plan-range-switcher'
+import CloudPlanItem from '../index'
 
-vi.mock('../../../../base/toast', () => ({
+vi.mock('../../../../../base/toast', () => ({
   default: {
     notify: vi.fn(),
   },
@@ -37,7 +37,7 @@ vi.mock('@/hooks/use-async-window-open', () => ({
   useAsyncWindowOpen: vi.fn(),
 }))
 
-vi.mock('../../assets', () => ({
+vi.mock('../../../assets', () => ({
   Sandbox: () => <div>Sandbox Icon</div>,
   Professional: () => <div>Professional Icon</div>,
   Team: () => <div>Team Icon</div>,
@@ -66,13 +66,6 @@ beforeAll(() => {
   })
 })
 
-afterAll(() => {
-  Object.defineProperty(window, 'location', {
-    configurable: true,
-    value: originalLocation,
-  })
-})
-
 beforeEach(() => {
   vi.clearAllMocks()
   mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: true })
@@ -82,6 +75,13 @@ beforeEach(() => {
   assignedHref = ''
 })
 
+afterAll(() => {
+  Object.defineProperty(window, 'location', {
+    configurable: true,
+    value: originalLocation,
+  })
+})
+
 describe('CloudPlanItem', () => {
   // Static content for each plan
   describe('Rendering', () => {
@@ -117,6 +117,32 @@ describe('CloudPlanItem', () => {
       expect(screen.getByText(/billing\.plansCommon\.priceTip.*billing\.plansCommon\.year/)).toBeInTheDocument()
     })
 
+    it('should show "most popular" badge for professional plan', () => {
+      render(
+        <CloudPlanItem
+          plan={Plan.professional}
+          currentPlan={Plan.sandbox}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      expect(screen.getByText('billing.plansCommon.mostPopular')).toBeInTheDocument()
+    })
+
+    it('should not show "most popular" badge for non-professional plans', () => {
+      render(
+        <CloudPlanItem
+          plan={Plan.team}
+          currentPlan={Plan.sandbox}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      expect(screen.queryByText('billing.plansCommon.mostPopular')).not.toBeInTheDocument()
+    })
+
     it('should disable CTA when workspace already on higher tier', () => {
       render(
         <CloudPlanItem
@@ -192,5 +218,128 @@ describe('CloudPlanItem', () => {
         expect(assignedHref).toBe('https://subscription.example')
       })
     })
+
+    // Covers L92-93: isFreePlan guard inside handleGetPayUrl
+    it('should do nothing when clicking sandbox plan CTA that is not the current plan', async () => {
+      render(
+        <CloudPlanItem
+          plan={Plan.sandbox}
+          currentPlan={Plan.professional}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      // Sandbox viewed from a higher plan is disabled, but let's verify no API calls
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+
+      await waitFor(() => {
+        expect(mockFetchSubscriptionUrls).not.toHaveBeenCalled()
+        expect(mockBillingInvoices).not.toHaveBeenCalled()
+        expect(assignedHref).toBe('')
+      })
+    })
+
+    // Covers L95: yearly subscription URL ('year' parameter)
+    it('should fetch yearly subscription url when planRange is yearly', async () => {
+      render(
+        <CloudPlanItem
+          plan={Plan.team}
+          currentPlan={Plan.sandbox}
+          planRange={PlanRange.yearly}
+          canPay
+        />,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'billing.plansCommon.getStarted' }))
+
+      await waitFor(() => {
+        expect(mockFetchSubscriptionUrls).toHaveBeenCalledWith(Plan.team, 'year')
+        expect(assignedHref).toBe('https://subscription.example')
+      })
+    })
+
+    // Covers L62-63: loading guard prevents double click
+    it('should ignore second click while loading', async () => {
+      // Make the first fetch hang until we resolve it
+      let resolveFirst!: (v: { url: string }) => void
+      mockFetchSubscriptionUrls.mockImplementationOnce(
+        () => new Promise((resolve) => { resolveFirst = resolve }),
+      )
+
+      render(
+        <CloudPlanItem
+          plan={Plan.professional}
+          currentPlan={Plan.sandbox}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      const button = screen.getByRole('button', { name: 'billing.plansCommon.startBuilding' })
+
+      // First click starts loading
+      fireEvent.click(button)
+      // Second click while loading should be ignored
+      fireEvent.click(button)
+
+      // Resolve first request
+      resolveFirst({ url: 'https://first.example' })
+
+      await waitFor(() => {
+        expect(mockFetchSubscriptionUrls).toHaveBeenCalledTimes(1)
+      })
+    })
+
+    // Covers L82-83, L85-87: openAsyncWindow error path when invoices returns no url
+    it('should invoke onError when billing invoices returns empty url', async () => {
+      mockBillingInvoices.mockResolvedValue({ url: '' })
+      const openWindow = vi.fn(async (cb: () => Promise<string>, opts: { onError?: (e: Error) => void }) => {
+        try {
+          await cb()
+        }
+        catch (e) {
+          opts.onError?.(e as Error)
+        }
+      })
+      mockUseAsyncWindowOpen.mockReturnValue(openWindow)
+
+      render(
+        <CloudPlanItem
+          plan={Plan.professional}
+          currentPlan={Plan.professional}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'billing.plansCommon.currentPlan' }))
+
+      await waitFor(() => {
+        expect(openWindow).toHaveBeenCalledTimes(1)
+        // The onError callback should have been passed to openAsyncWindow
+        const callArgs = openWindow.mock.calls[0]
+        expect(callArgs[1]).toHaveProperty('onError')
+      })
+    })
+
+    // Covers monthly price display (L139 !isYear branch for price)
+    it('should display monthly pricing without discount', () => {
+      render(
+        <CloudPlanItem
+          plan={Plan.team}
+          currentPlan={Plan.sandbox}
+          planRange={PlanRange.monthly}
+          canPay
+        />,
+      )
+
+      const teamPlan = ALL_PLANS[Plan.team]
+      expect(screen.getByText(`$${teamPlan.price}`)).toBeInTheDocument()
+      expect(screen.getByText(/billing\.plansCommon\.priceTip.*billing\.plansCommon\.month/)).toBeInTheDocument()
+      // Should NOT show crossed-out yearly price
+      expect(screen.queryByText(`$${teamPlan.price * 12}`)).not.toBeInTheDocument()
+    })
   })
 })

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

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { Plan } from '../../../../type'
-import List from './index'
+import { Plan } from '../../../../../type'
+import List from '../index'
 
 describe('CloudPlanItem/List', () => {
   it('should show sandbox specific quotas', () => {

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

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import Item from './index'
+import Item from '../index'
 
 describe('Item', () => {
   beforeEach(() => {
@@ -9,13 +9,10 @@ describe('Item', () => {
   // Rendering the plan item row
   describe('Rendering', () => {
     it('should render the provided label when tooltip is absent', () => {
-      // Arrange
       const label = 'Monthly credits'
 
-      // Act
       const { container } = render(<Item label={label} />)
 
-      // Assert
       expect(screen.getByText(label)).toBeInTheDocument()
       expect(container.querySelector('.group')).toBeNull()
     })
@@ -24,27 +21,21 @@ describe('Item', () => {
   // Toggling the optional tooltip indicator
   describe('Tooltip behavior', () => {
     it('should render tooltip content when tooltip text is provided', () => {
-      // Arrange
       const label = 'Workspace seats'
       const tooltip = 'Seats define how many teammates can join the workspace.'
 
-      // Act
       const { container } = render(<Item label={label} tooltip={tooltip} />)
 
-      // Assert
       expect(screen.getByText(label)).toBeInTheDocument()
       expect(screen.getByText(tooltip)).toBeInTheDocument()
       expect(container.querySelector('.group')).not.toBeNull()
     })
 
     it('should treat an empty tooltip string as absent', () => {
-      // Arrange
       const label = 'Vector storage'
 
-      // Act
       const { container } = render(<Item label={label} tooltip="" />)
 
-      // Assert
       expect(screen.getByText(label)).toBeInTheDocument()
       expect(container.querySelector('.group')).toBeNull()
     })

web/app/components/billing/pricing/plans/cloud-plan-item/list/item/__tests__/tooltip.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import Tooltip from './tooltip'
+import Tooltip from '../tooltip'
 
 describe('Tooltip', () => {
   beforeEach(() => {
@@ -9,26 +9,20 @@ describe('Tooltip', () => {
   // Rendering the info tooltip container
   describe('Rendering', () => {
     it('should render the content panel when provide with text', () => {
-      // Arrange
       const content = 'Usage resets on the first day of every month.'
 
-      // Act
       render(<Tooltip content={content} />)
 
-      // Assert
       expect(() => screen.getByText(content)).not.toThrow()
     })
   })
 
   describe('Icon rendering', () => {
     it('should render the icon when provided with content', () => {
-      // Arrange
       const content = 'Tooltips explain each plan detail.'
 
-      // Act
       render(<Tooltip content={content} />)
 
-      // Assert
       expect(screen.getByTestId('tooltip-icon')).toBeInTheDocument()
     })
   })
@@ -36,7 +30,6 @@ describe('Tooltip', () => {
   // Handling empty strings while keeping structure consistent
   describe('Edge cases', () => {
     it('should render without crashing when passed empty content', () => {
-      // Arrange
       const content = ''
 
       // Act and Assert

web/app/components/billing/pricing/plans/self-hosted-plan-item/__tests__/button.spec.tsx

@@ -3,8 +3,8 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
-import { SelfHostedPlan } from '../../../type'
-import Button from './button'
+import { SelfHostedPlan } from '../../../../type'
+import Button from '../button'
 
 vi.mock('@/hooks/use-theme')
 

web/app/components/billing/pricing/plans/self-hosted-plan-item/__tests__/index.spec.tsx

@@ -2,30 +2,21 @@ import type { Mock } from 'vitest'
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
 import { useAppContext } from '@/context/app-context'
-import Toast from '../../../../base/toast'
-import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../../../config'
-import { SelfHostedPlan } from '../../../type'
-import SelfHostedPlanItem from './index'
+import Toast from '../../../../../base/toast'
+import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../../../../config'
+import { SelfHostedPlan } from '../../../../type'
+import SelfHostedPlanItem from '../index'
 
-const featuresTranslations: Record<string, string[]> = {
-  'billing.plans.community.features': ['community-feature-1', 'community-feature-2'],
-  'billing.plans.premium.features': ['premium-feature-1'],
-  'billing.plans.enterprise.features': ['enterprise-feature-1'],
-}
-
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string, options?: Record<string, unknown>) => {
-      const prefix = options?.ns ? `${options.ns}.` : ''
-      if (options?.returnObjects)
-        return featuresTranslations[`${prefix}${key}`] || []
-      return `${prefix}${key}`
-    },
-  }),
-  Trans: ({ i18nKey, ns }: { i18nKey: string, ns?: string }) => <span>{ns ? `${ns}.${i18nKey}` : i18nKey}</span>,
+vi.mock('../list', () => ({
+  default: ({ plan }: { plan: string }) => (
+    <div data-testid={`list-${plan}`}>
+      List for
+      {plan}
+    </div>
+  ),
 }))
 
-vi.mock('../../../../base/toast', () => ({
+vi.mock('../../../../../base/toast', () => ({
   default: {
     notify: vi.fn(),
   },
@@ -35,7 +26,7 @@ vi.mock('@/context/app-context', () => ({
   useAppContext: vi.fn(),
 }))
 
-vi.mock('../../assets', () => ({
+vi.mock('../../../assets', () => ({
   Community: () => <div>Community Icon</div>,
   Premium: () => <div>Premium Icon</div>,
   Enterprise: () => <div>Enterprise Icon</div>,
@@ -63,6 +54,12 @@ beforeAll(() => {
   })
 })
 
+beforeEach(() => {
+  vi.clearAllMocks()
+  mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: true })
+  assignedHref = ''
+})
+
 afterAll(() => {
   Object.defineProperty(window, 'location', {
     configurable: true,
@@ -70,14 +67,7 @@ afterAll(() => {
   })
 })
 
-beforeEach(() => {
-  vi.clearAllMocks()
-  mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: true })
-  assignedHref = ''
-})
-
 describe('SelfHostedPlanItem', () => {
-  // Copy rendering for each plan
   describe('Rendering', () => {
     it('should display community plan info', () => {
       render(<SelfHostedPlanItem plan={SelfHostedPlan.community} />)
@@ -85,8 +75,7 @@ describe('SelfHostedPlanItem', () => {
       expect(screen.getByText('billing.plans.community.name')).toBeInTheDocument()
       expect(screen.getByText('billing.plans.community.description')).toBeInTheDocument()
       expect(screen.getByText('billing.plans.community.price')).toBeInTheDocument()
-      expect(screen.getByText('billing.plans.community.includesTitle')).toBeInTheDocument()
-      expect(screen.getByText('community-feature-1')).toBeInTheDocument()
+      expect(screen.getByTestId('list-community')).toBeInTheDocument()
     })
 
     it('should show premium extras such as cloud provider notice', () => {
@@ -97,7 +86,6 @@ describe('SelfHostedPlanItem', () => {
     })
   })
 
-  // CTA behavior for each plan
   describe('CTA interactions', () => {
     it('should show toast when non-manager tries to proceed', () => {
       mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: false })

web/app/components/billing/pricing/plans/self-hosted-plan-item/list/__tests__/index.spec.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react'
+import * as React from 'react'
+import { SelfHostedPlan } from '@/app/components/billing/type'
+import { createReactI18nextMock } from '@/test/i18n-mock'
+import List from '../index'
+
+// Override global i18n mock to support returnObjects: true for feature arrays
+vi.mock('react-i18next', () => createReactI18nextMock({
+  'billing.plans.community.features': ['Feature A', 'Feature B'],
+}))
+
+describe('SelfHostedPlanItem/List', () => {
+  it('should render plan info', () => {
+    render(<List plan={SelfHostedPlan.community} />)
+
+    expect(screen.getByText('plans.community.includesTitle')).toBeInTheDocument()
+    expect(screen.getByText('Feature A')).toBeInTheDocument()
+    expect(screen.getByText('Feature B')).toBeInTheDocument()
+  })
+})

web/app/components/billing/pricing/plans/self-hosted-plan-item/list/__tests__/item.spec.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react'
+import * as React from 'react'
+import Item from '../item'
+
+describe('SelfHostedPlanItem/List/Item', () => {
+  it('should display provided feature label', () => {
+    const { container } = render(<Item label="Dedicated support" />)
+
+    expect(screen.getByText('Dedicated support')).toBeInTheDocument()
+    expect(container.querySelector('svg')).not.toBeNull()
+  })
+
+  it('should render the check icon', () => {
+    const { container } = render(<Item label="Custom branding" />)
+
+    const svg = container.querySelector('svg')
+    expect(svg).toBeInTheDocument()
+    expect(svg).toHaveClass('size-4')
+  })
+
+  it('should render different labels correctly', () => {
+    const { rerender } = render(<Item label="Feature A" />)
+    expect(screen.getByText('Feature A')).toBeInTheDocument()
+
+    rerender(<Item label="Feature B" />)
+    expect(screen.getByText('Feature B')).toBeInTheDocument()
+    expect(screen.queryByText('Feature A')).not.toBeInTheDocument()
+  })
+
+  it('should render with empty label', () => {
+    const { container } = render(<Item label="" />)
+
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+})

web/app/components/billing/pricing/plans/self-hosted-plan-item/list/index.spec.tsx

@@ -1,26 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import * as React from 'react'
-import { SelfHostedPlan } from '@/app/components/billing/type'
-import List from './index'
-
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string, options?: Record<string, unknown>) => {
-      if (options?.returnObjects)
-        return ['Feature A', 'Feature B']
-      const prefix = options?.ns ? `${options.ns}.` : ''
-      return `${prefix}${key}`
-    },
-  }),
-  Trans: ({ i18nKey, ns }: { i18nKey: string, ns?: string }) => <span>{ns ? `${ns}.${i18nKey}` : i18nKey}</span>,
-}))
-
-describe('SelfHostedPlanItem/List', () => {
-  it('should render plan info', () => {
-    render(<List plan={SelfHostedPlan.community} />)
-
-    expect(screen.getByText('billing.plans.community.includesTitle')).toBeInTheDocument()
-    expect(screen.getByText('Feature A')).toBeInTheDocument()
-    expect(screen.getByText('Feature B')).toBeInTheDocument()
-  })
-})

web/app/components/billing/pricing/plans/self-hosted-plan-item/list/item.spec.tsx

@@ -1,12 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import * as React from 'react'
-import Item from './item'
-
-describe('SelfHostedPlanItem/List/Item', () => {
-  it('should display provided feature label', () => {
-    const { container } = render(<Item label="Dedicated support" />)
-
-    expect(screen.getByText('Dedicated support')).toBeInTheDocument()
-    expect(container.querySelector('svg')).not.toBeNull()
-  })
-})

web/app/components/billing/priority-label/__tests__/index.spec.tsx

@@ -2,8 +2,8 @@ import type { Mock } from 'vitest'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { createMockPlan } from '@/__mocks__/provider-context'
 import { useProviderContext } from '@/context/provider-context'
-import { Plan } from '../type'
-import PriorityLabel from './index'
+import { Plan } from '../../type'
+import PriorityLabel from '../index'
 
 vi.mock('@/context/provider-context', () => ({
   useProviderContext: vi.fn(),
@@ -20,16 +20,12 @@ describe('PriorityLabel', () => {
     vi.clearAllMocks()
   })
 
-  // Rendering: basic label output for sandbox plan.
   describe('Rendering', () => {
     it('should render the standard priority label when plan is sandbox', () => {
-      // Arrange
       setupPlan(Plan.sandbox)
 
-      // Act
       render(<PriorityLabel />)
 
-      // Assert
       expect(screen.getByText('billing.plansCommon.priority.standard')).toBeInTheDocument()
     })
   })
@@ -37,13 +33,10 @@ describe('PriorityLabel', () => {
   // Props: custom class name applied to the label container.
   describe('Props', () => {
     it('should apply custom className to the label container', () => {
-      // Arrange
       setupPlan(Plan.sandbox)
 
-      // Act
       render(<PriorityLabel className="custom-class" />)
 
-      // Assert
       const label = screen.getByText('billing.plansCommon.priority.standard').closest('div')
       expect(label).toHaveClass('custom-class')
     })
@@ -52,54 +45,53 @@ describe('PriorityLabel', () => {
   // Plan types: label text and icon visibility for different plans.
   describe('Plan Types', () => {
     it('should render priority label and icon when plan is professional', () => {
-      // Arrange
       setupPlan(Plan.professional)
 
-      // Act
       const { container } = render(<PriorityLabel />)
 
-      // Assert
       expect(screen.getByText('billing.plansCommon.priority.priority')).toBeInTheDocument()
       expect(container.querySelector('svg')).toBeInTheDocument()
     })
 
     it('should render top priority label and icon when plan is team', () => {
-      // Arrange
       setupPlan(Plan.team)
 
-      // Act
       const { container } = render(<PriorityLabel />)
 
-      // Assert
       expect(screen.getByText('billing.plansCommon.priority.top-priority')).toBeInTheDocument()
       expect(container.querySelector('svg')).toBeInTheDocument()
     })
 
     it('should render standard label without icon when plan is sandbox', () => {
-      // Arrange
       setupPlan(Plan.sandbox)
 
-      // Act
       const { container } = render(<PriorityLabel />)
 
-      // Assert
       expect(screen.getByText('billing.plansCommon.priority.standard')).toBeInTheDocument()
       expect(container.querySelector('svg')).not.toBeInTheDocument()
     })
   })
 
-  // Edge cases: tooltip content varies by priority level.
+  // Enterprise plan tests
+  describe('Enterprise Plan', () => {
+    it('should render top-priority label with icon for enterprise plan', () => {
+      setupPlan(Plan.enterprise)
+
+      const { container } = render(<PriorityLabel />)
+
+      expect(screen.getByText('billing.plansCommon.priority.top-priority')).toBeInTheDocument()
+      expect(container.querySelector('svg')).toBeInTheDocument()
+    })
+  })
+
   describe('Edge Cases', () => {
     it('should show the tip text when priority is not top priority', async () => {
-      // Arrange
       setupPlan(Plan.sandbox)
 
-      // Act
       render(<PriorityLabel />)
       const label = screen.getByText('billing.plansCommon.priority.standard').closest('div')
       fireEvent.mouseEnter(label as HTMLElement)
 
-      // Assert
       expect(await screen.findByText(
         'billing.plansCommon.documentProcessingPriority: billing.plansCommon.priority.standard',
       )).toBeInTheDocument()
@@ -107,15 +99,12 @@ describe('PriorityLabel', () => {
     })
 
     it('should hide the tip text when priority is top priority', async () => {
-      // Arrange
       setupPlan(Plan.enterprise)
 
-      // Act
       render(<PriorityLabel />)
       const label = screen.getByText('billing.plansCommon.priority.top-priority').closest('div')
       fireEvent.mouseEnter(label as HTMLElement)
 
-      // Assert
       expect(await screen.findByText(
         'billing.plansCommon.documentProcessingPriority: billing.plansCommon.priority.top-priority',
       )).toBeInTheDocument()

web/app/components/billing/progress-bar/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import ProgressBar from './index'
+import ProgressBar from '../index'
 
 describe('ProgressBar', () => {
   describe('Normal Mode (determinate)', () => {

web/app/components/billing/trigger-events-limit-modal/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import TriggerEventsLimitModal from './index'
+import TriggerEventsLimitModal from '../index'
 
 const mockOnClose = vi.fn()
 const mockOnUpgrade = vi.fn()
@@ -16,8 +16,7 @@ const planUpgradeModalMock = vi.fn((props: { show: boolean, title: string, descr
 ))
 
 vi.mock('@/app/components/billing/plan-upgrade-modal', () => ({
-  // eslint-disable-next-line ts/no-explicit-any
-  default: (props: any) => planUpgradeModalMock(props),
+  default: (props: { show: boolean, title: string, description: string, extraInfo?: React.ReactNode, onClose: () => void, onUpgrade: () => void }) => planUpgradeModalMock(props),
 }))
 
 describe('TriggerEventsLimitModal', () => {
@@ -66,4 +65,53 @@ describe('TriggerEventsLimitModal', () => {
     expect(planUpgradeModalMock).toHaveBeenCalled()
     expect(screen.getByTestId('plan-upgrade-modal').getAttribute('data-show')).toBe('false')
   })
+
+  it('renders reset info when resetInDays is provided', () => {
+    render(
+      <TriggerEventsLimitModal
+        show
+        onClose={mockOnClose}
+        onUpgrade={mockOnUpgrade}
+        usage={18000}
+        total={20000}
+        resetInDays={7}
+      />,
+    )
+
+    expect(screen.getByText('billing.triggerLimitModal.usageTitle')).toBeInTheDocument()
+    expect(screen.getByText('18000')).toBeInTheDocument()
+    expect(screen.getByText('20000')).toBeInTheDocument()
+  })
+
+  it('passes correct title and description translations', () => {
+    render(
+      <TriggerEventsLimitModal
+        show
+        onClose={mockOnClose}
+        onUpgrade={mockOnUpgrade}
+        usage={0}
+        total={0}
+      />,
+    )
+
+    const modal = screen.getByTestId('plan-upgrade-modal')
+    expect(modal.getAttribute('data-title')).toBe('billing.triggerLimitModal.title')
+    expect(modal.getAttribute('data-description')).toBe('billing.triggerLimitModal.description')
+  })
+
+  it('passes onClose and onUpgrade callbacks to PlanUpgradeModal', () => {
+    render(
+      <TriggerEventsLimitModal
+        show
+        onClose={mockOnClose}
+        onUpgrade={mockOnUpgrade}
+        usage={0}
+        total={0}
+      />,
+    )
+
+    const passedProps = planUpgradeModalMock.mock.calls[0][0]
+    expect(passedProps.onClose).toBe(mockOnClose)
+    expect(passedProps.onUpgrade).toBe(mockOnUpgrade)
+  })
 })

web/app/components/billing/upgrade-btn/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
 import type { Mock } from 'vitest'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import UpgradeBtn from './index'
+import UpgradeBtn from '../index'
 
 // ✅ Import real project components (DO NOT mock these)
 // PremiumBadge, Button, SparklesSoft are all base components
@@ -14,146 +14,117 @@ vi.mock('@/context/modal-context', () => ({
   }),
 }))
 
-// Mock gtag for tracking tests
+// Typed window accessor for gtag tracking tests
+const gtagWindow = window as unknown as Record<string, Mock | undefined>
 let mockGtag: Mock | undefined
 
 describe('UpgradeBtn', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockGtag = vi.fn()
-    ;(window as any).gtag = mockGtag
+    gtagWindow.gtag = mockGtag
   })
 
   afterEach(() => {
-    delete (window as any).gtag
+    delete gtagWindow.gtag
   })
 
   // Rendering tests (REQUIRED)
   describe('Rendering', () => {
     it('should render without crashing with default props', () => {
-      // Act
       render(<UpgradeBtn />)
 
-      // Assert - should render with default text
       expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
 
     it('should render premium badge by default', () => {
-      // Act
       render(<UpgradeBtn />)
 
-      // Assert - PremiumBadge renders with text content
       expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
 
     it('should render plain button when isPlain is true', () => {
-      // Act
       render(<UpgradeBtn isPlain />)
 
-      // Assert - Button should be rendered with plain text
       const button = screen.getByRole('button')
       expect(button).toBeInTheDocument()
       expect(screen.getByText(/billing\.upgradeBtn\.plain/i)).toBeInTheDocument()
     })
 
     it('should render short text when isShort is true', () => {
-      // Act
       render(<UpgradeBtn isShort />)
 
-      // Assert
       expect(screen.getByText(/billing\.upgradeBtn\.encourageShort/i)).toBeInTheDocument()
     })
 
     it('should render custom label when labelKey is provided', () => {
-      // Act
-      render(<UpgradeBtn labelKey={'custom.label.key' as any} />)
+      render(<UpgradeBtn labelKey="triggerLimitModal.upgrade" />)
 
-      // Assert
-      expect(screen.getByText(/custom\.label\.key/i)).toBeInTheDocument()
+      expect(screen.getByText(/triggerLimitModal\.upgrade/i)).toBeInTheDocument()
     })
 
     it('should render custom label in plain button when labelKey is provided with isPlain', () => {
-      // Act
-      render(<UpgradeBtn isPlain labelKey={'custom.label.key' as any} />)
+      render(<UpgradeBtn isPlain labelKey="triggerLimitModal.upgrade" />)
 
-      // Assert
       const button = screen.getByRole('button')
       expect(button).toBeInTheDocument()
-      expect(screen.getByText(/custom\.label\.key/i)).toBeInTheDocument()
+      expect(screen.getByText(/triggerLimitModal\.upgrade/i)).toBeInTheDocument()
     })
   })
 
   // Props tests (REQUIRED)
   describe('Props', () => {
     it('should apply custom className to premium badge', () => {
-      // Arrange
       const customClass = 'custom-upgrade-btn'
 
-      // Act
       const { container } = render(<UpgradeBtn className={customClass} />)
 
-      // Assert - Check the root element has the custom class
       const rootElement = container.firstChild as HTMLElement
       expect(rootElement).toHaveClass(customClass)
     })
 
     it('should apply custom className to plain button', () => {
-      // Arrange
       const customClass = 'custom-button-class'
 
-      // Act
       render(<UpgradeBtn isPlain className={customClass} />)
 
-      // Assert
       const button = screen.getByRole('button')
       expect(button).toHaveClass(customClass)
     })
 
     it('should apply custom style to premium badge', () => {
-      // Arrange
       const customStyle = { padding: '10px' }
 
-      // Act
       const { container } = render(<UpgradeBtn style={customStyle} />)
 
-      // Assert
       const rootElement = container.firstChild as HTMLElement
       expect(rootElement).toHaveStyle(customStyle)
     })
 
     it('should apply custom style to plain button', () => {
-      // Arrange
       const customStyle = { margin: '5px' }
 
-      // Act
       render(<UpgradeBtn isPlain style={customStyle} />)
 
-      // Assert
       const button = screen.getByRole('button')
       expect(button).toHaveStyle(customStyle)
     })
 
     it('should render with size "s"', () => {
-      // Act
       render(<UpgradeBtn size="s" />)
 
-      // Assert - Component renders successfully with size prop
       expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
 
     it('should render with size "m" by default', () => {
-      // Act
       render(<UpgradeBtn />)
 
-      // Assert - Component renders successfully
       expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
 
     it('should render with size "custom"', () => {
-      // Act
       render(<UpgradeBtn size="custom" />)
 
-      // Assert - Component renders successfully with custom size
       expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
   })
@@ -161,72 +132,57 @@ describe('UpgradeBtn', () => {
   // User Interactions
   describe('User Interactions', () => {
     it('should call custom onClick when provided and premium badge is clicked', async () => {
-      // Arrange
       const user = userEvent.setup()
       const handleClick = vi.fn()
 
-      // Act
       render(<UpgradeBtn onClick={handleClick} />)
       const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
       await user.click(badge)
 
-      // Assert
       expect(handleClick).toHaveBeenCalledTimes(1)
       expect(mockSetShowPricingModal).not.toHaveBeenCalled()
     })
 
     it('should call custom onClick when provided and plain button is clicked', async () => {
-      // Arrange
       const user = userEvent.setup()
       const handleClick = vi.fn()
 
-      // Act
       render(<UpgradeBtn isPlain onClick={handleClick} />)
       const button = screen.getByRole('button')
       await user.click(button)
 
-      // Assert
       expect(handleClick).toHaveBeenCalledTimes(1)
       expect(mockSetShowPricingModal).not.toHaveBeenCalled()
     })
 
     it('should open pricing modal when no custom onClick is provided and premium badge is clicked', async () => {
-      // Arrange
       const user = userEvent.setup()
 
-      // Act
       render(<UpgradeBtn />)
       const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
       await user.click(badge)
 
-      // Assert
       expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
     })
 
     it('should open pricing modal when no custom onClick is provided and plain button is clicked', async () => {
-      // Arrange
       const user = userEvent.setup()
 
-      // Act
       render(<UpgradeBtn isPlain />)
       const button = screen.getByRole('button')
       await user.click(button)
 
-      // Assert
       expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
     })
 
     it('should track gtag event when loc is provided and badge is clicked', async () => {
-      // Arrange
       const user = userEvent.setup()
       const loc = 'header-navigation'
 
-      // Act
       render(<UpgradeBtn loc={loc} />)
       const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
       await user.click(badge)
 
-      // Assert
       expect(mockGtag).toHaveBeenCalledTimes(1)
       expect(mockGtag).toHaveBeenCalledWith('event', 'click_upgrade_btn', {
         loc,
@@ -234,16 +190,13 @@ describe('UpgradeBtn', () => {
     })
 
     it('should track gtag event when loc is provided and plain button is clicked', async () => {
-      // Arrange
       const user = userEvent.setup()
       const loc = 'footer-section'
 
-      // Act
       render(<UpgradeBtn isPlain loc={loc} />)
       const button = screen.getByRole('button')
       await user.click(button)
 
-      // Assert
       expect(mockGtag).toHaveBeenCalledTimes(1)
       expect(mockGtag).toHaveBeenCalledWith('event', 'click_upgrade_btn', {
         loc,
@@ -251,44 +204,35 @@ describe('UpgradeBtn', () => {
     })
 
     it('should not track gtag event when loc is not provided', async () => {
-      // Arrange
       const user = userEvent.setup()
 
-      // Act
       render(<UpgradeBtn />)
       const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
       await user.click(badge)
 
-      // Assert
       expect(mockGtag).not.toHaveBeenCalled()
     })
 
     it('should not track gtag event when gtag is not available', async () => {
-      // Arrange
       const user = userEvent.setup()
-      delete (window as any).gtag
+      delete gtagWindow.gtag
 
-      // Act
       render(<UpgradeBtn loc="test-location" />)
       const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
       await user.click(badge)
 
-      // Assert - should not throw error
       expect(mockGtag).not.toHaveBeenCalled()
     })
 
     it('should call both custom onClick and track gtag when both are provided', async () => {
-      // Arrange
       const user = userEvent.setup()
       const handleClick = vi.fn()
       const loc = 'settings-page'
 
-      // Act
       render(<UpgradeBtn onClick={handleClick} loc={loc} />)
       const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
       await user.click(badge)
 
-      // Assert
       expect(handleClick).toHaveBeenCalledTimes(1)
       expect(mockGtag).toHaveBeenCalledTimes(1)
       expect(mockGtag).toHaveBeenCalledWith('event', 'click_upgrade_btn', {
@@ -300,121 +244,95 @@ describe('UpgradeBtn', () => {
   // Edge Cases (REQUIRED)
   describe('Edge Cases', () => {
     it('should handle undefined className', () => {
-      // Act
       render(<UpgradeBtn className={undefined} />)
 
-      // Assert - should render without error
       expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
 
     it('should handle undefined style', () => {
-      // Act
       render(<UpgradeBtn style={undefined} />)
 
-      // Assert - should render without error
       expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
 
     it('should handle undefined onClick', async () => {
-      // Arrange
       const user = userEvent.setup()
 
-      // Act
       render(<UpgradeBtn onClick={undefined} />)
       const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
       await user.click(badge)
 
-      // Assert - should fall back to setShowPricingModal
       expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
     })
 
     it('should handle undefined loc', async () => {
-      // Arrange
       const user = userEvent.setup()
 
-      // Act
       render(<UpgradeBtn loc={undefined} />)
       const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
       await user.click(badge)
 
-      // Assert - should not attempt to track gtag
       expect(mockGtag).not.toHaveBeenCalled()
     })
 
     it('should handle undefined labelKey', () => {
-      // Act
       render(<UpgradeBtn labelKey={undefined} />)
 
-      // Assert - should use default label
       expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
 
     it('should handle empty string className', () => {
-      // Act
       render(<UpgradeBtn className="" />)
 
-      // Assert
       expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
     })
 
     it('should handle empty string loc', async () => {
-      // Arrange
       const user = userEvent.setup()
 
-      // Act
       render(<UpgradeBtn loc="" />)
       const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
       await user.click(badge)
 
-      // Assert - empty loc should not trigger gtag
       expect(mockGtag).not.toHaveBeenCalled()
     })
 
-    it('should handle empty string labelKey', () => {
-      // Act
-      render(<UpgradeBtn labelKey={'' as any} />)
+    it('should handle labelKey with isShort - labelKey takes precedence', () => {
+      render(<UpgradeBtn isShort labelKey="triggerLimitModal.title" />)
 
-      // Assert - empty labelKey is falsy, so it falls back to default label
-      expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
+      expect(screen.getByText(/triggerLimitModal\.title/i)).toBeInTheDocument()
+      expect(screen.queryByText(/billing\.upgradeBtn\.encourageShort/i)).not.toBeInTheDocument()
     })
   })
 
   // Prop Combinations
   describe('Prop Combinations', () => {
     it('should handle isPlain with isShort', () => {
-      // Act
       render(<UpgradeBtn isPlain isShort />)
 
-      // Assert - isShort should not affect plain button text
       expect(screen.getByText(/billing\.upgradeBtn\.plain/i)).toBeInTheDocument()
     })
 
     it('should handle isPlain with custom labelKey', () => {
-      // Act
-      render(<UpgradeBtn isPlain labelKey={'custom.key' as any} />)
+      render(<UpgradeBtn isPlain labelKey="triggerLimitModal.upgrade" />)
 
-      // Assert - labelKey should override plain text
-      expect(screen.getByText(/custom\.key/i)).toBeInTheDocument()
+      expect(screen.getByText(/triggerLimitModal\.upgrade/i)).toBeInTheDocument()
       expect(screen.queryByText(/billing\.upgradeBtn\.plain/i)).not.toBeInTheDocument()
     })
 
     it('should handle isShort with custom labelKey', () => {
-      // Act
-      render(<UpgradeBtn isShort labelKey={'custom.short.key' as any} />)
+      render(<UpgradeBtn isShort labelKey="triggerLimitModal.title" />)
 
-      // Assert - labelKey should override isShort behavior
-      expect(screen.getByText(/custom\.short\.key/i)).toBeInTheDocument()
+      expect(screen.getByText(/triggerLimitModal\.title/i)).toBeInTheDocument()
       expect(screen.queryByText(/billing\.upgradeBtn\.encourageShort/i)).not.toBeInTheDocument()
     })
 
     it('should handle all custom props together', async () => {
-      // Arrange
       const user = userEvent.setup()
       const handleClick = vi.fn()
       const customStyle = { margin: '10px' }
       const customClass = 'all-custom'
 
-      // Act
       const { container } = render(
         <UpgradeBtn
           className={customClass}
@@ -423,17 +341,16 @@ describe('UpgradeBtn', () => {
           isShort
           onClick={handleClick}
           loc="test-loc"
-          labelKey={'custom.all' as any}
+          labelKey="triggerLimitModal.description"
         />,
       )
-      const badge = screen.getByText(/custom\.all/i)
+      const badge = screen.getByText(/triggerLimitModal\.description/i)
       await user.click(badge)
 
-      // Assert
       const rootElement = container.firstChild as HTMLElement
       expect(rootElement).toHaveClass(customClass)
       expect(rootElement).toHaveStyle(customStyle)
-      expect(screen.getByText(/custom\.all/i)).toBeInTheDocument()
+      expect(screen.getByText(/triggerLimitModal\.description/i)).toBeInTheDocument()
       expect(handleClick).toHaveBeenCalledTimes(1)
       expect(mockGtag).toHaveBeenCalledWith('event', 'click_upgrade_btn', {
         loc: 'test-loc',
@@ -444,11 +361,9 @@ describe('UpgradeBtn', () => {
   // Accessibility Tests
   describe('Accessibility', () => {
     it('should be keyboard accessible with plain button', async () => {
-      // Arrange
       const user = userEvent.setup()
       const handleClick = vi.fn()
 
-      // Act
       render(<UpgradeBtn isPlain onClick={handleClick} />)
       const button = screen.getByRole('button')
 
@@ -459,47 +374,38 @@ describe('UpgradeBtn', () => {
       // Press Enter
       await user.keyboard('{Enter}')
 
-      // Assert
       expect(handleClick).toHaveBeenCalledTimes(1)
     })
 
     it('should be keyboard accessible with Space key', async () => {
-      // Arrange
       const user = userEvent.setup()
       const handleClick = vi.fn()
 
-      // Act
       render(<UpgradeBtn isPlain onClick={handleClick} />)
 
       // Tab to button and press Space
       await user.tab()
       await user.keyboard(' ')
 
-      // Assert
       expect(handleClick).toHaveBeenCalledTimes(1)
     })
 
     it('should be clickable for premium badge variant', async () => {
-      // Arrange
       const user = userEvent.setup()
       const handleClick = vi.fn()
 
-      // Act
       render(<UpgradeBtn onClick={handleClick} />)
       const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
 
       // Click badge
       await user.click(badge)
 
-      // Assert
       expect(handleClick).toHaveBeenCalledTimes(1)
     })
 
     it('should have proper button role when isPlain is true', () => {
-      // Act
       render(<UpgradeBtn isPlain />)
 
-      // Assert - Plain button should have button role
       const button = screen.getByRole('button')
       expect(button).toBeInTheDocument()
     })
@@ -508,31 +414,25 @@ describe('UpgradeBtn', () => {
   // Integration Tests
   describe('Integration', () => {
     it('should work with modal context for pricing modal', async () => {
-      // Arrange
       const user = userEvent.setup()
 
-      // Act
       render(<UpgradeBtn />)
       const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
       await user.click(badge)
 
-      // Assert
       await waitFor(() => {
         expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
       })
     })
 
     it('should integrate onClick with analytics tracking', async () => {
-      // Arrange
       const user = userEvent.setup()
       const handleClick = vi.fn()
 
-      // Act
       render(<UpgradeBtn onClick={handleClick} loc="integration-test" />)
       const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
       await user.click(badge)
 
-      // Assert - Both onClick and gtag should be called
       await waitFor(() => {
         expect(handleClick).toHaveBeenCalledTimes(1)
         expect(mockGtag).toHaveBeenCalledWith('event', 'click_upgrade_btn', {

web/app/components/billing/usage-info/__tests__/apps-info.spec.tsx

@@ -0,0 +1,67 @@
+import { render, screen } from '@testing-library/react'
+import { defaultPlan } from '../../config'
+import AppsInfo from '../apps-info'
+
+const mockProviderContext = vi.fn()
+
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => mockProviderContext(),
+}))
+
+describe('AppsInfo', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockProviderContext.mockReturnValue({
+      plan: {
+        ...defaultPlan,
+        usage: { ...defaultPlan.usage, buildApps: 7 },
+        total: { ...defaultPlan.total, buildApps: 15 },
+      },
+    })
+  })
+
+  it('renders build apps usage information with context data', () => {
+    render(<AppsInfo className="apps-info-class" />)
+
+    expect(screen.getByText('billing.usagePage.buildApps')).toBeInTheDocument()
+    expect(screen.getByText('7')).toBeInTheDocument()
+    expect(screen.getByText('15')).toBeInTheDocument()
+    expect(screen.getByText('billing.usagePage.buildApps').closest('.apps-info-class')).toBeInTheDocument()
+  })
+
+  it('renders without className', () => {
+    render(<AppsInfo />)
+
+    expect(screen.getByText('billing.usagePage.buildApps')).toBeInTheDocument()
+  })
+
+  it('renders zero usage correctly', () => {
+    mockProviderContext.mockReturnValue({
+      plan: {
+        ...defaultPlan,
+        usage: { ...defaultPlan.usage, buildApps: 0 },
+        total: { ...defaultPlan.total, buildApps: 5 },
+      },
+    })
+
+    render(<AppsInfo />)
+
+    expect(screen.getByText('0')).toBeInTheDocument()
+    expect(screen.getByText('5')).toBeInTheDocument()
+  })
+
+  it('renders when usage equals total (at capacity)', () => {
+    mockProviderContext.mockReturnValue({
+      plan: {
+        ...defaultPlan,
+        usage: { ...defaultPlan.usage, buildApps: 10 },
+        total: { ...defaultPlan.total, buildApps: 10 },
+      },
+    })
+
+    render(<AppsInfo />)
+
+    const tens = screen.getAllByText('10')
+    expect(tens.length).toBe(2)
+  })
+})

web/app/components/billing/usage-info/__tests__/index.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
-import { NUM_INFINITE } from '../config'
-import UsageInfo from './index'
+import { NUM_INFINITE } from '../../config'
+import UsageInfo from '../index'
 
 const TestIcon = () => <span data-testid="usage-icon" />
 

web/app/components/billing/usage-info/__tests__/vector-space-info.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
-import { defaultPlan } from '../config'
-import { Plan } from '../type'
-import VectorSpaceInfo from './vector-space-info'
+import { defaultPlan } from '../../config'
+import { Plan } from '../../type'
+import VectorSpaceInfo from '../vector-space-info'
 
 // Mock provider context with configurable plan
 let mockPlanType = Plan.sandbox

web/app/components/billing/usage-info/apps-info.spec.tsx

@@ -1,35 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { defaultPlan } from '../config'
-import AppsInfo from './apps-info'
-
-const appsUsage = 7
-const appsTotal = 15
-
-const mockPlan = {
-  ...defaultPlan,
-  usage: {
-    ...defaultPlan.usage,
-    buildApps: appsUsage,
-  },
-  total: {
-    ...defaultPlan.total,
-    buildApps: appsTotal,
-  },
-}
-
-vi.mock('@/context/provider-context', () => ({
-  useProviderContext: () => ({
-    plan: mockPlan,
-  }),
-}))
-
-describe('AppsInfo', () => {
-  it('renders build apps usage information with context data', () => {
-    render(<AppsInfo className="apps-info-class" />)
-
-    expect(screen.getByText('billing.usagePage.buildApps')).toBeInTheDocument()
-    expect(screen.getByText(`${appsUsage}`)).toBeInTheDocument()
-    expect(screen.getByText(`${appsTotal}`)).toBeInTheDocument()
-    expect(screen.getByText('billing.usagePage.buildApps').closest('.apps-info-class')).toBeInTheDocument()
-  })
-})

web/app/components/billing/utils/__tests__/index.spec.ts

@@ -1,6 +1,6 @@
-import type { CurrentPlanInfoBackend } from '../type'
-import { DocumentProcessingPriority, Plan } from '../type'
-import { getPlanVectorSpaceLimitMB, parseCurrentPlan, parseVectorSpaceToMB } from './index'
+import type { CurrentPlanInfoBackend } from '../../type'
+import { DocumentProcessingPriority, Plan } from '../../type'
+import { getPlanVectorSpaceLimitMB, parseCurrentPlan, parseVectorSpaceToMB } from '../index'
 
 describe('billing utils', () => {
   // parseVectorSpaceToMB tests

web/app/components/billing/vector-space-full/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import VectorSpaceFull from './index'
+import VectorSpaceFull from '../index'
 
 type VectorProviderGlobal = typeof globalThis & {
   __vectorProviderContext?: ReturnType<typeof vi.fn>
@@ -17,12 +17,12 @@ vi.mock('@/context/provider-context', () => {
   }
 })
 
-vi.mock('../upgrade-btn', () => ({
+vi.mock('../../upgrade-btn', () => ({
   default: () => <button data-testid="vector-upgrade-btn" type="button">Upgrade</button>,
 }))
 
 // Mock utils to control threshold and plan limits
-vi.mock('../utils', () => ({
+vi.mock('../../utils', () => ({
   getPlanVectorSpaceLimitMB: (planType: string) => {
     // Return 5 for sandbox (threshold) and 100 for team
     if (planType === 'sandbox')
@@ -66,4 +66,26 @@ describe('VectorSpaceFull', () => {
     expect(screen.getByText('8')).toBeInTheDocument()
     expect(screen.getByText('100MB')).toBeInTheDocument()
   })
+
+  it('renders vector space info section', () => {
+    render(<VectorSpaceFull />)
+
+    expect(screen.getByText('billing.usagePage.vectorSpace')).toBeInTheDocument()
+  })
+
+  it('renders with sandbox plan', () => {
+    const globals = getVectorGlobal()
+    globals.__vectorProviderContext?.mockReturnValue({
+      plan: {
+        type: 'sandbox',
+        usage: { vectorSpace: 2 },
+        total: { vectorSpace: 50 },
+      },
+    })
+
+    render(<VectorSpaceFull />)
+
+    expect(screen.getByText('billing.vectorSpace.fullTip')).toBeInTheDocument()
+    expect(screen.getByTestId('vector-upgrade-btn')).toBeInTheDocument()
+  })
 })

web/app/components/explore/app-card/__tests__/index.spec.tsx

@@ -1,140 +0,0 @@
-import type { AppCardProps } from '../index'
-import type { App } from '@/models/explore'
-import { fireEvent, render, screen } from '@testing-library/react'
-import * as React from 'react'
-import { AppModeEnum } from '@/types/app'
-import AppCard from '../index'
-
-vi.mock('../../../app/type-selector', () => ({
-  AppTypeIcon: ({ type }: { type: string }) => <div data-testid="app-type-icon">{type}</div>,
-}))
-
-const createApp = (overrides?: Partial<App>): App => ({
-  can_trial: true,
-  app_id: 'app-id',
-  description: 'App description',
-  copyright: '2024',
-  privacy_policy: null,
-  custom_disclaimer: null,
-  category: 'Assistant',
-  position: 1,
-  is_listed: true,
-  install_count: 0,
-  installed: false,
-  editable: true,
-  is_agent: false,
-  ...overrides,
-  app: {
-    id: 'id-1',
-    mode: AppModeEnum.CHAT,
-    icon_type: null,
-    icon: '🤖',
-    icon_background: '#fff',
-    icon_url: '',
-    name: 'Sample App',
-    description: 'App description',
-    use_icon_as_answer_icon: false,
-    ...overrides?.app,
-  },
-})
-
-describe('AppCard', () => {
-  const onCreate = vi.fn()
-
-  const renderComponent = (props?: Partial<AppCardProps>) => {
-    const mergedProps: AppCardProps = {
-      app: createApp(),
-      canCreate: false,
-      onCreate,
-      isExplore: false,
-      ...props,
-    }
-    return render(<AppCard {...mergedProps} />)
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should render app name and description', () => {
-      renderComponent()
-
-      expect(screen.getByText('Sample App')).toBeInTheDocument()
-      expect(screen.getByText('App description')).toBeInTheDocument()
-    })
-
-    it.each([
-      [AppModeEnum.CHAT, 'APP.TYPES.CHATBOT'],
-      [AppModeEnum.ADVANCED_CHAT, 'APP.TYPES.ADVANCED'],
-      [AppModeEnum.AGENT_CHAT, 'APP.TYPES.AGENT'],
-      [AppModeEnum.WORKFLOW, 'APP.TYPES.WORKFLOW'],
-      [AppModeEnum.COMPLETION, 'APP.TYPES.COMPLETION'],
-    ])('should render correct mode label for %s mode', (mode, label) => {
-      renderComponent({ app: createApp({ app: { ...createApp().app, mode } }) })
-
-      expect(screen.getByText(label)).toBeInTheDocument()
-      expect(screen.getByTestId('app-type-icon')).toHaveTextContent(mode)
-    })
-
-    it('should render description in a truncatable container', () => {
-      renderComponent({ app: createApp({ description: 'Very long description text' }) })
-
-      const descWrapper = screen.getByText('Very long description text')
-      expect(descWrapper).toHaveClass('line-clamp-4')
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should show create button in explore mode and trigger action', () => {
-      renderComponent({
-        app: createApp({ app: { ...createApp().app, mode: AppModeEnum.WORKFLOW } }),
-        canCreate: true,
-        isExplore: true,
-      })
-
-      const button = screen.getByText('explore.appCard.addToWorkspace')
-      expect(button).toBeInTheDocument()
-      fireEvent.click(button)
-      expect(onCreate).toHaveBeenCalledTimes(1)
-    })
-
-    it('should render try button in explore mode', () => {
-      renderComponent({ canCreate: true, isExplore: true })
-
-      expect(screen.getByText('explore.appCard.try')).toBeInTheDocument()
-    })
-  })
-
-  describe('Props', () => {
-    it('should hide action buttons when not in explore mode', () => {
-      renderComponent({ canCreate: true, isExplore: false })
-
-      expect(screen.queryByText('explore.appCard.addToWorkspace')).not.toBeInTheDocument()
-      expect(screen.queryByText('explore.appCard.try')).not.toBeInTheDocument()
-    })
-
-    it('should hide create button when canCreate is false', () => {
-      renderComponent({ canCreate: false, isExplore: true })
-
-      expect(screen.queryByText('explore.appCard.addToWorkspace')).not.toBeInTheDocument()
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('should truncate long app name with title attribute', () => {
-      const longName = 'A Very Long Application Name That Should Be Truncated'
-      renderComponent({ app: createApp({ app: { ...createApp().app, name: longName } }) })
-
-      const nameElement = screen.getByText(longName)
-      expect(nameElement).toHaveAttribute('title', longName)
-      expect(nameElement).toHaveClass('truncate')
-    })
-
-    it('should render with empty description', () => {
-      renderComponent({ app: createApp({ description: '' }) })
-
-      expect(screen.getByText('Sample App')).toBeInTheDocument()
-    })
-  })
-})

web/app/components/explore/app-card/index.spec.tsx

@@ -0,0 +1,87 @@
+import type { AppCardProps } from './index'
+import type { App } from '@/models/explore'
+import { fireEvent, render, screen } from '@testing-library/react'
+import * as React from 'react'
+import { AppModeEnum } from '@/types/app'
+import AppCard from './index'
+
+vi.mock('../../app/type-selector', () => ({
+  AppTypeIcon: ({ type }: any) => <div data-testid="app-type-icon">{type}</div>,
+}))
+
+const createApp = (overrides?: Partial<App>): App => ({
+  can_trial: true,
+  app_id: 'app-id',
+  description: 'App description',
+  copyright: '2024',
+  privacy_policy: null,
+  custom_disclaimer: null,
+  category: 'Assistant',
+  position: 1,
+  is_listed: true,
+  install_count: 0,
+  installed: false,
+  editable: true,
+  is_agent: false,
+  ...overrides,
+  app: {
+    id: 'id-1',
+    mode: AppModeEnum.CHAT,
+    icon_type: null,
+    icon: '🤖',
+    icon_background: '#fff',
+    icon_url: '',
+    name: 'Sample App',
+    description: 'App description',
+    use_icon_as_answer_icon: false,
+    ...overrides?.app,
+  },
+})
+
+describe('AppCard', () => {
+  const onCreate = vi.fn()
+
+  const renderComponent = (props?: Partial<AppCardProps>) => {
+    const mergedProps: AppCardProps = {
+      app: createApp(),
+      canCreate: false,
+      onCreate,
+      isExplore: false,
+      ...props,
+    }
+    return render(<AppCard {...mergedProps} />)
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should render app info with correct mode label when mode is CHAT', () => {
+    renderComponent({ app: createApp({ app: { ...createApp().app, mode: AppModeEnum.CHAT } }) })
+
+    expect(screen.getByText('Sample App')).toBeInTheDocument()
+    expect(screen.getByText('App description')).toBeInTheDocument()
+    expect(screen.getByText('APP.TYPES.CHATBOT')).toBeInTheDocument()
+    expect(screen.getByTestId('app-type-icon')).toHaveTextContent(AppModeEnum.CHAT)
+  })
+
+  it('should show create button in explore mode and trigger action', () => {
+    renderComponent({
+      app: createApp({ app: { ...createApp().app, mode: AppModeEnum.WORKFLOW } }),
+      canCreate: true,
+      isExplore: true,
+    })
+
+    const button = screen.getByText('explore.appCard.addToWorkspace')
+    expect(button).toBeInTheDocument()
+    fireEvent.click(button)
+    expect(onCreate).toHaveBeenCalledTimes(1)
+    expect(screen.getByText('APP.TYPES.WORKFLOW')).toBeInTheDocument()
+  })
+
+  it('should hide create button when not allowed', () => {
+    renderComponent({ canCreate: false, isExplore: true })
+
+    expect(screen.queryByText('explore.appCard.addToWorkspace')).not.toBeInTheDocument()
+  })
+})

web/app/components/explore/app-list/index.spec.tsx

@@ -5,7 +5,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import ExploreContext from '@/context/explore-context'
 import { fetchAppDetail } from '@/service/explore'
 import { AppModeEnum } from '@/types/app'
-import AppList from '../index'
+import AppList from './index'
 
 const allCategoriesEn = 'explore.apps.allCategories:{"lng":"en"}'
 let mockTabValue = allCategoriesEn
@@ -150,55 +150,70 @@ describe('AppList', () => {
     mockIsError = false
   })
 
+  // Rendering: show loading when categories are not ready.
   describe('Rendering', () => {
     it('should render loading when the query is loading', () => {
+      // Arrange
       mockExploreData = undefined
       mockIsLoading = true
 
+      // Act
       renderWithContext()
 
+      // Assert
       expect(screen.getByRole('status')).toBeInTheDocument()
     })
 
     it('should render app cards when data is available', () => {
+      // Arrange
       mockExploreData = {
         categories: ['Writing', 'Translate'],
         allList: [createApp(), createApp({ app_id: 'app-2', app: { ...createApp().app, name: 'Beta' }, category: 'Translate' })],
       }
 
+      // Act
       renderWithContext()
 
+      // Assert
       expect(screen.getByText('Alpha')).toBeInTheDocument()
       expect(screen.getByText('Beta')).toBeInTheDocument()
     })
   })
 
+  // Props: category selection filters the list.
   describe('Props', () => {
     it('should filter apps by selected category', () => {
+      // Arrange
       mockTabValue = 'Writing'
       mockExploreData = {
         categories: ['Writing', 'Translate'],
         allList: [createApp(), createApp({ app_id: 'app-2', app: { ...createApp().app, name: 'Beta' }, category: 'Translate' })],
       }
 
+      // Act
       renderWithContext()
 
+      // Assert
       expect(screen.getByText('Alpha')).toBeInTheDocument()
       expect(screen.queryByText('Beta')).not.toBeInTheDocument()
     })
   })
 
+  // User interactions: search and create flow.
   describe('User Interactions', () => {
     it('should filter apps by search keywords', async () => {
+      // Arrange
       mockExploreData = {
         categories: ['Writing'],
         allList: [createApp(), createApp({ app_id: 'app-2', app: { ...createApp().app, name: 'Gamma' } })],
       }
       renderWithContext()
 
+      // Act
       const input = screen.getByPlaceholderText('common.operation.search')
       fireEvent.change(input, { target: { value: 'gam' } })
 
+      // Assert
       await waitFor(() => {
         expect(screen.queryByText('Alpha')).not.toBeInTheDocument()
         expect(screen.getByText('Gamma')).toBeInTheDocument()
@@ -206,6 +221,7 @@ describe('AppList', () => {
     })
 
     it('should handle create flow and confirm DSL when pending', async () => {
+      // Arrange
       const onSuccess = vi.fn()
       mockExploreData = {
         categories: ['Writing'],
@@ -219,10 +235,12 @@ describe('AppList', () => {
         options.onSuccess?.()
       })
 
+      // Act
       renderWithContext(true, onSuccess)
       fireEvent.click(screen.getByText('explore.appCard.addToWorkspace'))
       fireEvent.click(await screen.findByTestId('confirm-create'))
 
+      // Assert
       await waitFor(() => {
         expect(fetchAppDetail).toHaveBeenCalledWith('app-basic-id')
       })
@@ -237,14 +255,17 @@ describe('AppList', () => {
     })
   })
 
+  // Edge cases: handle clearing search keywords.
   describe('Edge Cases', () => {
     it('should reset search results when clear icon is clicked', async () => {
+      // Arrange
       mockExploreData = {
         categories: ['Writing'],
         allList: [createApp(), createApp({ app_id: 'app-2', app: { ...createApp().app, name: 'Gamma' } })],
       }
       renderWithContext()
 
+      // Act
       const input = screen.getByPlaceholderText('common.operation.search')
       fireEvent.change(input, { target: { value: 'gam' } })
       await waitFor(() => {
@@ -253,6 +274,7 @@ describe('AppList', () => {
 
       fireEvent.click(screen.getByTestId('input-clear'))
 
+      // Assert
       await waitFor(() => {
         expect(screen.getByText('Alpha')).toBeInTheDocument()
         expect(screen.getByText('Gamma')).toBeInTheDocument()

web/app/components/explore/banner/banner-item.spec.tsx

@@ -1,7 +1,7 @@
 import type { Banner } from '@/models/app'
 import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { BannerItem } from '../banner-item'
+import { BannerItem } from './banner-item'
 
 const mockScrollTo = vi.fn()
 const mockSlideNodes = vi.fn()
@@ -16,6 +16,17 @@ vi.mock('@/app/components/base/carousel', () => ({
   }),
 }))
 
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'banner.viewMore': 'View More',
+      }
+      return translations[key] || key
+    },
+  }),
+}))
+
 const createMockBanner = (overrides: Partial<Banner> = {}): Banner => ({
   id: 'banner-1',
   status: 'enabled',
@@ -29,11 +40,14 @@ const createMockBanner = (overrides: Partial<Banner> = {}): Banner => ({
   ...overrides,
 } as Banner)
 
+// Mock ResizeObserver methods declared at module level and initialized
 const mockResizeObserverObserve = vi.fn()
 const mockResizeObserverDisconnect = vi.fn()
 
+// Create mock class outside of describe block for proper hoisting
 class MockResizeObserver {
   constructor(_callback: ResizeObserverCallback) {
+    // Store callback if needed
   }
 
   observe(...args: Parameters<ResizeObserver['observe']>) {
@@ -45,6 +59,7 @@ class MockResizeObserver {
   }
 
   unobserve() {
+    // No-op
   }
 }
 
@@ -57,6 +72,7 @@ describe('BannerItem', () => {
 
     vi.stubGlobal('ResizeObserver', MockResizeObserver)
 
+    // Mock window.innerWidth for responsive tests
     Object.defineProperty(window, 'innerWidth', {
       writable: true,
       configurable: true,
@@ -131,7 +147,7 @@ describe('BannerItem', () => {
         />,
       )
 
-      expect(screen.getByText('explore.banner.viewMore')).toBeInTheDocument()
+      expect(screen.getByText('View More')).toBeInTheDocument()
     })
   })
 
@@ -241,6 +257,7 @@ describe('BannerItem', () => {
         />,
       )
 
+      // Component should render without issues
       expect(screen.getByText('Test Banner Title')).toBeInTheDocument()
     })
 
@@ -254,6 +271,7 @@ describe('BannerItem', () => {
         />,
       )
 
+      // Component should render with isPaused
       expect(screen.getByText('Test Banner Title')).toBeInTheDocument()
     })
   })
@@ -302,6 +320,7 @@ describe('BannerItem', () => {
     })
 
     it('sets maxWidth when window width is below breakpoint', () => {
+      // Set window width below RESPONSIVE_BREAKPOINT (1200)
       Object.defineProperty(window, 'innerWidth', {
         writable: true,
         configurable: true,
@@ -316,10 +335,12 @@ describe('BannerItem', () => {
         />,
       )
 
+      // Component should render and apply responsive styles
       expect(screen.getByText('Test Banner Title')).toBeInTheDocument()
     })
 
     it('applies responsive styles when below breakpoint', () => {
+      // Set window width below RESPONSIVE_BREAKPOINT (1200)
       Object.defineProperty(window, 'innerWidth', {
         writable: true,
         configurable: true,
@@ -334,7 +355,8 @@ describe('BannerItem', () => {
         />,
       )
 
-      expect(screen.getByText('explore.banner.viewMore')).toBeInTheDocument()
+      // The component should render even with responsive mode
+      expect(screen.getByText('View More')).toBeInTheDocument()
     })
   })
 
@@ -410,6 +432,8 @@ describe('BannerItem', () => {
         />,
       )
 
+      // With selectedIndex=0 and 3 slides, nextIndex should be 1
+      // The second indicator button should show the "next slide" state
       const buttons = screen.getAllByRole('button')
       expect(buttons).toHaveLength(3)
     })

web/app/components/explore/banner/banner.spec.tsx

@@ -3,7 +3,7 @@ import type { Banner as BannerType } from '@/models/app'
 import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { act } from 'react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import Banner from '../banner'
+import Banner from './banner'
 
 const mockUseGetBanners = vi.fn()
 
@@ -53,7 +53,7 @@ vi.mock('@/app/components/base/carousel', () => ({
   }),
 }))
 
-vi.mock('../banner-item', () => ({
+vi.mock('./banner-item', () => ({
   BannerItem: ({ banner, autoplayDelay, isPaused }: {
     banner: BannerType
     autoplayDelay: number
@@ -105,6 +105,7 @@ describe('Banner', () => {
 
       render(<Banner />)
 
+      // Loading component renders a spinner
       const loadingWrapper = document.querySelector('[style*="min-height"]')
       expect(loadingWrapper).toBeInTheDocument()
     })
@@ -265,6 +266,7 @@ describe('Banner', () => {
 
       const carousel = screen.getByTestId('carousel')
 
+      // Enter and then leave
       fireEvent.mouseEnter(carousel)
       fireEvent.mouseLeave(carousel)
 
@@ -283,6 +285,7 @@ describe('Banner', () => {
 
       render(<Banner />)
 
+      // Trigger resize event
       act(() => {
         window.dispatchEvent(new Event('resize'))
       })
@@ -300,10 +303,12 @@ describe('Banner', () => {
 
       render(<Banner />)
 
+      // Trigger resize event
       act(() => {
         window.dispatchEvent(new Event('resize'))
       })
 
+      // Wait for debounce delay (50ms)
       act(() => {
         vi.advanceTimersByTime(50)
       })
@@ -321,25 +326,31 @@ describe('Banner', () => {
 
       render(<Banner />)
 
+      // Trigger first resize event
       act(() => {
         window.dispatchEvent(new Event('resize'))
       })
 
+      // Wait partial time
       act(() => {
         vi.advanceTimersByTime(30)
       })
 
+      // Trigger second resize event
       act(() => {
         window.dispatchEvent(new Event('resize'))
       })
 
+      // Wait another 30ms (total 60ms from second resize but only 30ms after)
       act(() => {
         vi.advanceTimersByTime(30)
       })
 
+      // Should still be paused (debounce resets)
       let bannerItem = screen.getByTestId('banner-item')
       expect(bannerItem).toHaveAttribute('data-is-paused', 'true')
 
+      // Wait remaining time
       act(() => {
         vi.advanceTimersByTime(20)
       })
@@ -377,6 +388,7 @@ describe('Banner', () => {
 
       const { unmount } = render(<Banner />)
 
+      // Trigger resize to create timer
       act(() => {
         window.dispatchEvent(new Event('resize'))
       })
@@ -450,8 +462,10 @@ describe('Banner', () => {
 
       const { rerender } = render(<Banner />)
 
+      // Re-render with same props
       rerender(<Banner />)
 
+      // Component should still be present (memo doesn't break rendering)
       expect(screen.getByTestId('carousel')).toBeInTheDocument()
     })
   })

web/app/components/explore/banner/indicator-button.spec.tsx

@@ -1,7 +1,7 @@
 import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { act } from 'react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { IndicatorButton } from '../indicator-button'
+import { IndicatorButton } from './indicator-button'
 
 describe('IndicatorButton', () => {
   beforeEach(() => {
@@ -164,6 +164,7 @@ describe('IndicatorButton', () => {
         />,
       )
 
+      // Check for conic-gradient style which indicates progress indicator
       const progressIndicator = container.querySelector('[style*="conic-gradient"]')
       expect(progressIndicator).not.toBeInTheDocument()
     })
@@ -220,8 +221,10 @@ describe('IndicatorButton', () => {
         />,
       )
 
+      // Initially no progress indicator
       expect(container.querySelector('[style*="conic-gradient"]')).not.toBeInTheDocument()
 
+      // Rerender with isNextSlide=true
       rerender(
         <IndicatorButton
           index={1}
@@ -234,6 +237,7 @@ describe('IndicatorButton', () => {
         />,
       )
 
+      // Now progress indicator should be visible
       expect(container.querySelector('[style*="conic-gradient"]')).toBeInTheDocument()
     })
 
@@ -251,9 +255,11 @@ describe('IndicatorButton', () => {
         />,
       )
 
+      // Progress indicator should be present
       const progressIndicator = container.querySelector('[style*="conic-gradient"]')
       expect(progressIndicator).toBeInTheDocument()
 
+      // Rerender with new resetKey - this should reset the progress animation
       rerender(
         <IndicatorButton
           index={1}
@@ -267,6 +273,7 @@ describe('IndicatorButton', () => {
       )
 
       const newProgressIndicator = container.querySelector('[style*="conic-gradient"]')
+      // The progress indicator should still be present after reset
       expect(newProgressIndicator).toBeInTheDocument()
     })
 
@@ -286,6 +293,8 @@ describe('IndicatorButton', () => {
         />,
       )
 
+      // The component should still render but animation should be paused
+      // requestAnimationFrame might still be called for polling but progress won't update
       expect(screen.getByRole('button')).toBeInTheDocument()
       mockRequestAnimationFrame.mockRestore()
     })
@@ -306,6 +315,7 @@ describe('IndicatorButton', () => {
         />,
       )
 
+      // Trigger animation frame
       act(() => {
         vi.advanceTimersToNextTimer()
       })
@@ -332,10 +342,12 @@ describe('IndicatorButton', () => {
         />,
       )
 
+      // Trigger animation frame
       act(() => {
         vi.advanceTimersToNextTimer()
       })
 
+      // Change isNextSlide to false - this should cancel the animation frame
       rerender(
         <IndicatorButton
           index={1}
@@ -356,6 +368,7 @@ describe('IndicatorButton', () => {
       const mockOnClick = vi.fn()
       const mockRequestAnimationFrame = vi.spyOn(window, 'requestAnimationFrame')
 
+      // Mock document.hidden to be true
       Object.defineProperty(document, 'hidden', {
         writable: true,
         configurable: true,
@@ -374,8 +387,10 @@ describe('IndicatorButton', () => {
         />,
       )
 
+      // Component should still render
       expect(screen.getByRole('button')).toBeInTheDocument()
 
+      // Reset document.hidden
       Object.defineProperty(document, 'hidden', {
         writable: true,
         configurable: true,
@@ -400,6 +415,7 @@ describe('IndicatorButton', () => {
         />,
       )
 
+      // Progress indicator should be visible (animation running)
       expect(container.querySelector('[style*="conic-gradient"]')).toBeInTheDocument()
     })
   })

web/app/components/explore/category.spec.tsx

@@ -1,6 +1,6 @@
 import type { AppCategory } from '@/models/explore'
 import { fireEvent, render, screen } from '@testing-library/react'
-import Category from '../category'
+import Category from './category'
 
 describe('Category', () => {
   const allCategoriesEn = 'Recommended'
@@ -19,44 +19,59 @@ describe('Category', () => {
     }
   }
 
+  // Rendering: basic categories and all-categories button.
   describe('Rendering', () => {
     it('should render all categories item and translated categories', () => {
+      // Arrange
       renderComponent()
 
+      // Assert
       expect(screen.getByText('explore.apps.allCategories')).toBeInTheDocument()
       expect(screen.getByText('explore.category.Writing')).toBeInTheDocument()
     })
 
     it('should not render allCategoriesEn again inside the category list', () => {
+      // Arrange
       renderComponent()
 
+      // Assert
       const recommendedItems = screen.getAllByText('explore.apps.allCategories')
       expect(recommendedItems).toHaveLength(1)
     })
   })
 
+  // Props: clicking items triggers onChange.
   describe('Props', () => {
     it('should call onChange with category value when category item is clicked', () => {
+      // Arrange
       const { props } = renderComponent()
 
+      // Act
       fireEvent.click(screen.getByText('explore.category.Writing'))
 
+      // Assert
       expect(props.onChange).toHaveBeenCalledWith('Writing')
     })
 
     it('should call onChange with allCategoriesEn when all categories is clicked', () => {
+      // Arrange
       const { props } = renderComponent({ value: 'Writing' })
 
+      // Act
       fireEvent.click(screen.getByText('explore.apps.allCategories'))
 
+      // Assert
       expect(props.onChange).toHaveBeenCalledWith(allCategoriesEn)
     })
   })
 
+  // Edge cases: handle values not in the list.
   describe('Edge Cases', () => {
     it('should treat unknown value as all categories selection', () => {
+      // Arrange
       renderComponent({ value: 'Unknown' })
 
+      // Assert
       const allCategoriesItem = screen.getByText('explore.apps.allCategories')
       expect(allCategoriesItem.className).toContain('bg-components-main-nav-nav-button-bg-active')
     })

web/app/components/explore/create-app-modal/index.spec.tsx

@@ -1,12 +1,43 @@
-import type { CreateAppModalProps } from '../index'
+import type { CreateAppModalProps } from './index'
 import type { UsagePlanInfo } from '@/app/components/billing/type'
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
 import { createMockPlan, createMockPlanTotal, createMockPlanUsage } from '@/__mocks__/provider-context'
 import { Plan } from '@/app/components/billing/type'
 import { AppModeEnum } from '@/types/app'
-import CreateAppModal from '../index'
+import CreateAppModal from './index'
 
+let mockTranslationOverrides: Record<string, string | undefined> = {}
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: Record<string, unknown>) => {
+      const override = mockTranslationOverrides[key]
+      if (override !== undefined)
+        return override
+      if (options?.returnObjects)
+        return [`${key}-feature-1`, `${key}-feature-2`]
+      if (options) {
+        const { ns, ...rest } = options
+        const prefix = ns ? `${ns}.` : ''
+        const suffix = Object.keys(rest).length > 0 ? `:${JSON.stringify(rest)}` : ''
+        return `${prefix}${key}${suffix}`
+      }
+      return key
+    },
+    i18n: {
+      language: 'en',
+      changeLanguage: vi.fn(),
+    },
+  }),
+  Trans: ({ children }: { children?: React.ReactNode }) => children,
+  initReactI18next: {
+    type: '3rdParty',
+    init: vi.fn(),
+  },
+}))
+
+// Avoid heavy emoji dataset initialization during unit tests.
 vi.mock('emoji-mart', () => ({
   init: vi.fn(),
   SearchIndex: { search: vi.fn().mockResolvedValue([]) },
@@ -56,7 +87,7 @@ vi.mock('@/context/provider-context', () => ({
 
 type ConfirmPayload = Parameters<CreateAppModalProps['onConfirm']>[0]
 
-const setup = async (overrides: Partial<CreateAppModalProps> = {}) => {
+const setup = (overrides: Partial<CreateAppModalProps> = {}) => {
   const onConfirm = vi.fn<(payload: ConfirmPayload) => Promise<void>>().mockResolvedValue(undefined)
   const onHide = vi.fn()
 
@@ -78,9 +109,7 @@ const setup = async (overrides: Partial<CreateAppModalProps> = {}) => {
     ...overrides,
   }
 
-  await act(async () => {
-    render(<CreateAppModal {...props} />)
-  })
+  render(<CreateAppModal {...props} />)
   return { onConfirm, onHide }
 }
 
@@ -96,23 +125,25 @@ const getAppIconTrigger = (): HTMLElement => {
 describe('CreateAppModal', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    mockTranslationOverrides = {}
     mockEnableBilling = false
     mockPlanType = Plan.team
     mockUsagePlanInfo = createPlanInfo(1)
     mockTotalPlanInfo = createPlanInfo(10)
   })
 
+  // The title and form sections vary based on the modal mode (create vs edit).
   describe('Rendering', () => {
-    it('should render create title and actions when creating', async () => {
-      await setup({ appName: 'My App', isEditModal: false })
+    it('should render create title and actions when creating', () => {
+      setup({ appName: 'My App', isEditModal: false })
 
       expect(screen.getByText('explore.appCustomize.title:{"name":"My App"}')).toBeInTheDocument()
       expect(screen.getByRole('button', { name: /common\.operation\.create/ })).toBeInTheDocument()
       expect(screen.getByRole('button', { name: 'common.operation.cancel' })).toBeInTheDocument()
     })
 
-    it('should render edit-only fields when editing a chat app', async () => {
-      await setup({ isEditModal: true, appMode: AppModeEnum.CHAT, max_active_requests: 5 })
+    it('should render edit-only fields when editing a chat app', () => {
+      setup({ isEditModal: true, appMode: AppModeEnum.CHAT, max_active_requests: 5 })
 
       expect(screen.getByText('app.editAppTitle')).toBeInTheDocument()
       expect(screen.getByRole('button', { name: /common\.operation\.save/ })).toBeInTheDocument()
@@ -120,57 +151,65 @@ describe('CreateAppModal', () => {
       expect((screen.getByRole('spinbutton') as HTMLInputElement).value).toBe('5')
     })
 
-    it.each([AppModeEnum.ADVANCED_CHAT, AppModeEnum.AGENT_CHAT])('should render answer icon switch when editing %s app', async (mode) => {
-      await setup({ isEditModal: true, appMode: mode })
+    it.each([AppModeEnum.ADVANCED_CHAT, AppModeEnum.AGENT_CHAT])('should render answer icon switch when editing %s app', (mode) => {
+      setup({ isEditModal: true, appMode: mode })
 
       expect(screen.getByRole('switch')).toBeInTheDocument()
     })
 
-    it('should not render answer icon switch when editing a non-chat app', async () => {
-      await setup({ isEditModal: true, appMode: AppModeEnum.COMPLETION })
+    it('should not render answer icon switch when editing a non-chat app', () => {
+      setup({ isEditModal: true, appMode: AppModeEnum.COMPLETION })
 
       expect(screen.queryByRole('switch')).not.toBeInTheDocument()
     })
 
-    it('should not render modal content when hidden', async () => {
-      await setup({ show: false })
+    it('should not render modal content when hidden', () => {
+      setup({ show: false })
 
       expect(screen.queryByRole('button', { name: /common\.operation\.create/ })).not.toBeInTheDocument()
     })
   })
 
+  // Disabled states prevent submission and reflect parent-driven props.
   describe('Props', () => {
-    it('should disable confirm action when confirmDisabled is true', async () => {
-      await setup({ confirmDisabled: true })
+    it('should disable confirm action when confirmDisabled is true', () => {
+      setup({ confirmDisabled: true })
 
       expect(screen.getByRole('button', { name: /common\.operation\.create/ })).toBeDisabled()
     })
 
-    it('should disable confirm action when appName is empty', async () => {
-      await setup({ appName: '   ' })
+    it('should disable confirm action when appName is empty', () => {
+      setup({ appName: '   ' })
 
       expect(screen.getByRole('button', { name: /common\.operation\.create/ })).toBeDisabled()
     })
   })
 
+  // Defensive coverage for falsy input values and translation edge cases.
   describe('Edge Cases', () => {
-    it('should default description to empty string when appDescription is empty', async () => {
-      await setup({ appDescription: '' })
+    it('should default description to empty string when appDescription is empty', () => {
+      setup({ appDescription: '' })
 
       expect((screen.getByPlaceholderText('app.newApp.appDescriptionPlaceholder') as HTMLTextAreaElement).value).toBe('')
     })
 
-    it('should render i18n key placeholders when translations are available', async () => {
-      await setup()
+    it('should fall back to empty placeholders when translations return empty string', () => {
+      mockTranslationOverrides = {
+        'newApp.appNamePlaceholder': '',
+        'newApp.appDescriptionPlaceholder': '',
+      }
 
-      expect((screen.getByDisplayValue('Test App') as HTMLInputElement).placeholder).toBe('app.newApp.appNamePlaceholder')
-      expect((screen.getByDisplayValue('Test description') as HTMLTextAreaElement).placeholder).toBe('app.newApp.appDescriptionPlaceholder')
+      setup()
+
+      expect((screen.getByDisplayValue('Test App') as HTMLInputElement).placeholder).toBe('')
+      expect((screen.getByDisplayValue('Test description') as HTMLTextAreaElement).placeholder).toBe('')
     })
   })
 
+  // The modal should close from user-initiated cancellation actions.
   describe('User Interactions', () => {
-    it('should call onHide when cancel button is clicked', async () => {
-      const { onConfirm, onHide } = await setup()
+    it('should call onHide when cancel button is clicked', () => {
+      const { onConfirm, onHide } = setup()
 
       fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
 
@@ -178,16 +217,16 @@ describe('CreateAppModal', () => {
       expect(onConfirm).not.toHaveBeenCalled()
     })
 
-    it('should call onHide when pressing Escape while visible', async () => {
-      const { onHide } = await setup()
+    it('should call onHide when pressing Escape while visible', () => {
+      const { onHide } = setup()
 
       fireEvent.keyDown(window, { key: 'Escape', keyCode: 27 })
 
       expect(onHide).toHaveBeenCalledTimes(1)
     })
 
-    it('should not call onHide when pressing Escape while hidden', async () => {
-      const { onHide } = await setup({ show: false })
+    it('should not call onHide when pressing Escape while hidden', () => {
+      const { onHide } = setup({ show: false })
 
       fireEvent.keyDown(window, { key: 'Escape', keyCode: 27 })
 
@@ -195,32 +234,34 @@ describe('CreateAppModal', () => {
     })
   })
 
+  // When billing limits are reached, the modal blocks app creation and shows quota guidance.
   describe('Quota Gating', () => {
-    it('should show AppsFull and disable create when apps quota is reached', async () => {
+    it('should show AppsFull and disable create when apps quota is reached', () => {
       mockEnableBilling = true
       mockPlanType = Plan.team
       mockUsagePlanInfo = createPlanInfo(10)
       mockTotalPlanInfo = createPlanInfo(10)
 
-      await setup({ isEditModal: false })
+      setup({ isEditModal: false })
 
       expect(screen.getByText('billing.apps.fullTip2')).toBeInTheDocument()
       expect(screen.getByRole('button', { name: /common\.operation\.create/ })).toBeDisabled()
     })
 
-    it('should allow saving when apps quota is reached in edit mode', async () => {
+    it('should allow saving when apps quota is reached in edit mode', () => {
       mockEnableBilling = true
       mockPlanType = Plan.team
       mockUsagePlanInfo = createPlanInfo(10)
       mockTotalPlanInfo = createPlanInfo(10)
 
-      await setup({ isEditModal: true })
+      setup({ isEditModal: true })
 
       expect(screen.queryByText('billing.apps.fullTip2')).not.toBeInTheDocument()
       expect(screen.getByRole('button', { name: /common\.operation\.save/ })).toBeEnabled()
     })
   })
 
+  // Shortcut handlers are important for power users and must respect gating rules.
   describe('Keyboard Shortcuts', () => {
     beforeEach(() => {
       vi.useFakeTimers()
@@ -233,11 +274,11 @@ describe('CreateAppModal', () => {
     it.each([
       ['meta+enter', { metaKey: true }],
       ['ctrl+enter', { ctrlKey: true }],
-    ])('should submit when %s is pressed while visible', async (_, modifier) => {
-      const { onConfirm, onHide } = await setup()
+    ])('should submit when %s is pressed while visible', (_, modifier) => {
+      const { onConfirm, onHide } = setup()
 
       fireEvent.keyDown(window, { key: 'Enter', keyCode: 13, ...modifier })
-      await act(async () => {
+      act(() => {
         vi.advanceTimersByTime(300)
       })
 
@@ -245,11 +286,11 @@ describe('CreateAppModal', () => {
       expect(onHide).toHaveBeenCalledTimes(1)
     })
 
-    it('should not submit when modal is hidden', async () => {
-      const { onConfirm, onHide } = await setup({ show: false })
+    it('should not submit when modal is hidden', () => {
+      const { onConfirm, onHide } = setup({ show: false })
 
       fireEvent.keyDown(window, { key: 'Enter', keyCode: 13, metaKey: true })
-      await act(async () => {
+      act(() => {
         vi.advanceTimersByTime(300)
       })
 
@@ -257,16 +298,16 @@ describe('CreateAppModal', () => {
       expect(onHide).not.toHaveBeenCalled()
     })
 
-    it('should not submit when apps quota is reached in create mode', async () => {
+    it('should not submit when apps quota is reached in create mode', () => {
       mockEnableBilling = true
       mockPlanType = Plan.team
       mockUsagePlanInfo = createPlanInfo(10)
       mockTotalPlanInfo = createPlanInfo(10)
 
-      const { onConfirm, onHide } = await setup({ isEditModal: false })
+      const { onConfirm, onHide } = setup({ isEditModal: false })
 
       fireEvent.keyDown(window, { key: 'Enter', keyCode: 13, metaKey: true })
-      await act(async () => {
+      act(() => {
         vi.advanceTimersByTime(300)
       })
 
@@ -274,16 +315,16 @@ describe('CreateAppModal', () => {
       expect(onHide).not.toHaveBeenCalled()
     })
 
-    it('should submit when apps quota is reached in edit mode', async () => {
+    it('should submit when apps quota is reached in edit mode', () => {
       mockEnableBilling = true
       mockPlanType = Plan.team
       mockUsagePlanInfo = createPlanInfo(10)
       mockTotalPlanInfo = createPlanInfo(10)
 
-      const { onConfirm, onHide } = await setup({ isEditModal: true })
+      const { onConfirm, onHide } = setup({ isEditModal: true })
 
       fireEvent.keyDown(window, { key: 'Enter', keyCode: 13, metaKey: true })
-      await act(async () => {
+      act(() => {
         vi.advanceTimersByTime(300)
       })
 
@@ -291,11 +332,11 @@ describe('CreateAppModal', () => {
       expect(onHide).toHaveBeenCalledTimes(1)
     })
 
-    it('should not submit when name is empty', async () => {
-      const { onConfirm, onHide } = await setup({ appName: '   ' })
+    it('should not submit when name is empty', () => {
+      const { onConfirm, onHide } = setup({ appName: '   ' })
 
       fireEvent.keyDown(window, { key: 'Enter', keyCode: 13, metaKey: true })
-      await act(async () => {
+      act(() => {
         vi.advanceTimersByTime(300)
       })
 
@@ -304,9 +345,10 @@ describe('CreateAppModal', () => {
     })
   })
 
+  // The app icon picker is a key user flow for customizing metadata.
   describe('App Icon Picker', () => {
-    it('should open and close the picker when cancel is clicked', async () => {
-      await setup({
+    it('should open and close the picker when cancel is clicked', () => {
+      setup({
         appIconType: 'image',
         appIcon: 'file-123',
         appIconUrl: 'https://example.com/icon.png',
@@ -321,10 +363,10 @@ describe('CreateAppModal', () => {
       expect(screen.queryByRole('button', { name: 'app.iconPicker.cancel' })).not.toBeInTheDocument()
     })
 
-    it('should update icon payload when selecting emoji and confirming', async () => {
+    it('should update icon payload when selecting emoji and confirming', () => {
       vi.useFakeTimers()
       try {
-        const { onConfirm } = await setup({
+        const { onConfirm } = setup({
           appIconType: 'image',
           appIcon: 'file-123',
           appIconUrl: 'https://example.com/icon.png',
@@ -332,6 +374,7 @@ describe('CreateAppModal', () => {
 
         fireEvent.click(getAppIconTrigger())
 
+        // Find the emoji grid by locating the category label, then find the clickable emoji wrapper
         const categoryLabel = screen.getByText('people')
         const emojiGrid = categoryLabel.nextElementSibling
         const clickableEmojiWrapper = emojiGrid?.firstElementChild
@@ -342,7 +385,7 @@ describe('CreateAppModal', () => {
         fireEvent.click(screen.getByRole('button', { name: 'app.iconPicker.ok' }))
 
         fireEvent.click(screen.getByRole('button', { name: /common\.operation\.create/ }))
-        await act(async () => {
+        act(() => {
           vi.advanceTimersByTime(300)
         })
 
@@ -359,17 +402,19 @@ describe('CreateAppModal', () => {
       }
     })
 
-    it('should reset emoji icon to initial props when picker is cancelled', async () => {
+    it('should reset emoji icon to initial props when picker is cancelled', () => {
       vi.useFakeTimers()
       try {
-        const { onConfirm } = await setup({
+        const { onConfirm } = setup({
           appIconType: 'emoji',
           appIcon: '🤖',
           appIconBackground: '#FFEAD5',
         })
 
+        // Open picker, select a new emoji, and confirm
         fireEvent.click(getAppIconTrigger())
 
+        // Find the emoji grid by locating the category label, then find the clickable emoji wrapper
         const categoryLabel = screen.getByText('people')
         const emojiGrid = categoryLabel.nextElementSibling
         const clickableEmojiWrapper = emojiGrid?.firstElementChild
@@ -381,13 +426,15 @@ describe('CreateAppModal', () => {
 
         expect(screen.queryByRole('button', { name: 'app.iconPicker.cancel' })).not.toBeInTheDocument()
 
+        // Open picker again and cancel - should reset to initial props
         fireEvent.click(getAppIconTrigger())
         fireEvent.click(screen.getByRole('button', { name: 'app.iconPicker.cancel' }))
 
         expect(screen.queryByRole('button', { name: 'app.iconPicker.cancel' })).not.toBeInTheDocument()
 
+        // Submit and verify the payload uses the original icon (cancel reverts to props)
         fireEvent.click(screen.getByRole('button', { name: /common\.operation\.create/ }))
-        await act(async () => {
+        act(() => {
           vi.advanceTimersByTime(300)
         })
 
@@ -405,6 +452,7 @@ describe('CreateAppModal', () => {
     })
   })
 
+  // Submitting uses a debounced handler and builds a payload from current form state.
   describe('Submitting', () => {
     beforeEach(() => {
       vi.useFakeTimers()
@@ -414,8 +462,8 @@ describe('CreateAppModal', () => {
       vi.useRealTimers()
     })
 
-    it('should call onConfirm with emoji payload and hide when create is clicked', async () => {
-      const { onConfirm, onHide } = await setup({
+    it('should call onConfirm with emoji payload and hide when create is clicked', () => {
+      const { onConfirm, onHide } = setup({
         appName: 'My App',
         appDescription: 'My description',
         appIconType: 'emoji',
@@ -424,7 +472,7 @@ describe('CreateAppModal', () => {
       })
 
       fireEvent.click(screen.getByRole('button', { name: /common\.operation\.create/ }))
-      await act(async () => {
+      act(() => {
         vi.advanceTimersByTime(300)
       })
 
@@ -443,12 +491,12 @@ describe('CreateAppModal', () => {
       expect(payload).not.toHaveProperty('max_active_requests')
     })
 
-    it('should include updated description when textarea is changed before submitting', async () => {
-      const { onConfirm } = await setup({ appDescription: 'Old description' })
+    it('should include updated description when textarea is changed before submitting', () => {
+      const { onConfirm } = setup({ appDescription: 'Old description' })
 
       fireEvent.change(screen.getByPlaceholderText('app.newApp.appDescriptionPlaceholder'), { target: { value: 'Updated description' } })
       fireEvent.click(screen.getByRole('button', { name: /common\.operation\.create/ }))
-      await act(async () => {
+      act(() => {
         vi.advanceTimersByTime(300)
       })
 
@@ -456,8 +504,8 @@ describe('CreateAppModal', () => {
       expect(onConfirm.mock.calls[0][0]).toMatchObject({ description: 'Updated description' })
     })
 
-    it('should omit icon_background when submitting with image icon', async () => {
-      const { onConfirm } = await setup({
+    it('should omit icon_background when submitting with image icon', () => {
+      const { onConfirm } = setup({
         appIconType: 'image',
         appIcon: 'file-123',
         appIconUrl: 'https://example.com/icon.png',
@@ -465,7 +513,7 @@ describe('CreateAppModal', () => {
       })
 
       fireEvent.click(screen.getByRole('button', { name: /common\.operation\.create/ }))
-      await act(async () => {
+      act(() => {
         vi.advanceTimersByTime(300)
       })
 
@@ -477,8 +525,8 @@ describe('CreateAppModal', () => {
       expect(payload.icon_background).toBeUndefined()
     })
 
-    it('should include max_active_requests and updated answer icon when saving', async () => {
-      const { onConfirm } = await setup({
+    it('should include max_active_requests and updated answer icon when saving', () => {
+      const { onConfirm } = setup({
         isEditModal: true,
         appMode: AppModeEnum.CHAT,
         appUseIconAsAnswerIcon: false,
@@ -489,7 +537,7 @@ describe('CreateAppModal', () => {
       fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '12' } })
 
       fireEvent.click(screen.getByRole('button', { name: /common\.operation\.save/ }))
-      await act(async () => {
+      act(() => {
         vi.advanceTimersByTime(300)
       })
 
@@ -500,11 +548,11 @@ describe('CreateAppModal', () => {
       })
     })
 
-    it('should omit max_active_requests when input is empty', async () => {
-      const { onConfirm } = await setup({ isEditModal: true, max_active_requests: null })
+    it('should omit max_active_requests when input is empty', () => {
+      const { onConfirm } = setup({ isEditModal: true, max_active_requests: null })
 
       fireEvent.click(screen.getByRole('button', { name: /common\.operation\.save/ }))
-      await act(async () => {
+      act(() => {
         vi.advanceTimersByTime(300)
       })
 
@@ -512,12 +560,12 @@ describe('CreateAppModal', () => {
       expect(payload.max_active_requests).toBeUndefined()
     })
 
-    it('should omit max_active_requests when input is not a number', async () => {
-      const { onConfirm } = await setup({ isEditModal: true, max_active_requests: null })
+    it('should omit max_active_requests when input is not a number', () => {
+      const { onConfirm } = setup({ isEditModal: true, max_active_requests: null })
 
       fireEvent.change(screen.getByRole('spinbutton'), { target: { value: 'abc' } })
       fireEvent.click(screen.getByRole('button', { name: /common\.operation\.save/ }))
-      await act(async () => {
+      act(() => {
         vi.advanceTimersByTime(300)
       })
 
@@ -525,18 +573,18 @@ describe('CreateAppModal', () => {
       expect(payload.max_active_requests).toBeUndefined()
     })
 
-    it('should show toast error and not submit when name becomes empty before debounced submit runs', async () => {
-      const { onConfirm, onHide } = await setup({ appName: 'My App' })
+    it('should show toast error and not submit when name becomes empty before debounced submit runs', () => {
+      const { onConfirm, onHide } = setup({ appName: 'My App' })
 
       fireEvent.click(screen.getByRole('button', { name: /common\.operation\.create/ }))
       fireEvent.change(screen.getByPlaceholderText('app.newApp.appNamePlaceholder'), { target: { value: '   ' } })
 
-      await act(async () => {
+      act(() => {
         vi.advanceTimersByTime(300)
       })
 
       expect(screen.getByText('explore.appCustomize.nameRequired')).toBeInTheDocument()
-      await act(async () => {
+      act(() => {
         vi.advanceTimersByTime(6000)
       })
       expect(screen.queryByText('explore.appCustomize.nameRequired')).not.toBeInTheDocument()

web/app/components/explore/index.spec.tsx

@@ -6,7 +6,7 @@ import ExploreContext from '@/context/explore-context'
 import { MediaType } from '@/hooks/use-breakpoints'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { useMembers } from '@/service/use-common'
-import Explore from '../index'
+import Explore from './index'
 
 const mockReplace = vi.fn()
 const mockPush = vi.fn()
@@ -65,8 +65,10 @@ describe('Explore', () => {
     vi.clearAllMocks()
   })
 
+  // Rendering: provides ExploreContext and children.
   describe('Rendering', () => {
     it('should render children and provide edit permission from members role', async () => {
+      // Arrange
       ; (useAppContext as Mock).mockReturnValue({
         userProfile: { id: 'user-1' },
         isCurrentWorkspaceDatasetOperator: false,
@@ -77,48 +79,57 @@ describe('Explore', () => {
         },
       })
 
+      // Act
       render((
         <Explore>
           <ContextReader />
         </Explore>
       ))
 
+      // Assert
       await waitFor(() => {
         expect(screen.getByText('edit-yes')).toBeInTheDocument()
       })
     })
   })
 
+  // Effects: set document title and redirect dataset operators.
   describe('Effects', () => {
     it('should set document title on render', () => {
+      // Arrange
       ; (useAppContext as Mock).mockReturnValue({
         userProfile: { id: 'user-1' },
         isCurrentWorkspaceDatasetOperator: false,
       });
       (useMembers as Mock).mockReturnValue({ data: { accounts: [] } })
 
+      // Act
       render((
         <Explore>
           <div>child</div>
         </Explore>
       ))
 
+      // Assert
       expect(useDocumentTitle).toHaveBeenCalledWith('common.menus.explore')
     })
 
     it('should redirect dataset operators to /datasets', async () => {
+      // Arrange
       ; (useAppContext as Mock).mockReturnValue({
         userProfile: { id: 'user-1' },
         isCurrentWorkspaceDatasetOperator: true,
       });
       (useMembers as Mock).mockReturnValue({ data: { accounts: [] } })
 
+      // Act
       render((
         <Explore>
           <div>child</div>
         </Explore>
       ))
 
+      // Assert
       await waitFor(() => {
         expect(mockReplace).toHaveBeenCalledWith('/datasets')
       })

web/app/components/explore/installed-app/index.spec.tsx

@@ -8,8 +8,9 @@ import { AccessMode } from '@/models/access-control'
 import { useGetUserCanAccessApp } from '@/service/access-control'
 import { useGetInstalledAppAccessModeByAppId, useGetInstalledAppMeta, useGetInstalledAppParams } from '@/service/use-explore'
 import { AppModeEnum } from '@/types/app'
-import InstalledApp from '../index'
+import InstalledApp from './index'
 
+// Mock external dependencies BEFORE imports
 vi.mock('use-context-selector', () => ({
   useContext: vi.fn(),
   createContext: vi.fn(() => ({})),
@@ -118,11 +119,13 @@ describe('InstalledApp', () => {
   beforeEach(() => {
     vi.clearAllMocks()
 
+    // Mock useContext
     ;(useContext as Mock).mockReturnValue({
       installedApps: [mockInstalledApp],
       isFetchingInstalledApps: false,
     })
 
+    // Mock useWebAppStore
     ;(useWebAppStore as unknown as Mock).mockImplementation((
       selector: (state: {
         updateAppInfo: Mock
@@ -142,6 +145,7 @@ describe('InstalledApp', () => {
       return selector(state)
     })
 
+    // Mock service hooks with default success states
     ;(useGetInstalledAppAccessModeByAppId as Mock).mockReturnValue({
       isFetching: false,
       data: mockWebAppAccessMode,
@@ -561,6 +565,7 @@ describe('InstalledApp', () => {
       })
 
       render(<InstalledApp id="installed-app-123" />)
+      // Should find and render the correct app
       expect(screen.getByText(/Chat With History/i)).toBeInTheDocument()
       expect(screen.getByText(/installed-app-123/)).toBeInTheDocument()
     })
@@ -619,6 +624,7 @@ describe('InstalledApp', () => {
       })
 
       render(<InstalledApp id="installed-app-123" />)
+      // Error should take precedence over loading
       expect(screen.getByText(/Some error/)).toBeInTheDocument()
     })
 
@@ -634,6 +640,7 @@ describe('InstalledApp', () => {
       })
 
       render(<InstalledApp id="installed-app-123" />)
+      // Error should take precedence over permission
       expect(screen.getByText(/Params error/)).toBeInTheDocument()
       expect(screen.queryByText(/403/)).not.toBeInTheDocument()
     })
@@ -649,6 +656,7 @@ describe('InstalledApp', () => {
       })
 
       render(<InstalledApp id="nonexistent-app" />)
+      // Permission should take precedence over 404
       expect(screen.getByText(/403/)).toBeInTheDocument()
       expect(screen.queryByText(/404/)).not.toBeInTheDocument()
     })
@@ -665,6 +673,7 @@ describe('InstalledApp', () => {
       })
 
       const { container } = render(<InstalledApp id="nonexistent-app" />)
+      // Loading should take precedence over 404
       const svg = container.querySelector('svg.spin-animation')
       expect(svg).toBeInTheDocument()
       expect(screen.queryByText(/404/)).not.toBeInTheDocument()

web/app/components/explore/item-operation/index.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import ItemOperation from '../index'
+import ItemOperation from './index'
 
 describe('ItemOperation', () => {
   beforeEach(() => {
@@ -20,65 +20,87 @@ describe('ItemOperation', () => {
     }
   }
 
+  // Rendering: menu items show after opening.
   describe('Rendering', () => {
     it('should render pin and delete actions when menu is open', async () => {
+      // Arrange
       renderComponent()
 
+      // Act
       fireEvent.click(screen.getByTestId('item-operation-trigger'))
 
+      // Assert
       expect(await screen.findByText('explore.sidebar.action.pin')).toBeInTheDocument()
       expect(screen.getByText('explore.sidebar.action.delete')).toBeInTheDocument()
     })
   })
 
+  // Props: render optional rename action and pinned label text.
   describe('Props', () => {
     it('should render rename action when isShowRenameConversation is true', async () => {
+      // Arrange
       renderComponent({ isShowRenameConversation: true })
 
+      // Act
       fireEvent.click(screen.getByTestId('item-operation-trigger'))
 
+      // Assert
       expect(await screen.findByText('explore.sidebar.action.rename')).toBeInTheDocument()
     })
 
     it('should render unpin label when isPinned is true', async () => {
+      // Arrange
       renderComponent({ isPinned: true })
 
+      // Act
       fireEvent.click(screen.getByTestId('item-operation-trigger'))
 
+      // Assert
       expect(await screen.findByText('explore.sidebar.action.unpin')).toBeInTheDocument()
     })
   })
 
+  // User interactions: clicking action items triggers callbacks.
   describe('User Interactions', () => {
     it('should call togglePin when clicking pin action', async () => {
+      // Arrange
       const { props } = renderComponent()
 
+      // Act
       fireEvent.click(screen.getByTestId('item-operation-trigger'))
       fireEvent.click(await screen.findByText('explore.sidebar.action.pin'))
 
+      // Assert
       expect(props.togglePin).toHaveBeenCalledTimes(1)
     })
 
     it('should call onDelete when clicking delete action', async () => {
+      // Arrange
       const { props } = renderComponent()
 
+      // Act
       fireEvent.click(screen.getByTestId('item-operation-trigger'))
       fireEvent.click(await screen.findByText('explore.sidebar.action.delete'))
 
+      // Assert
       expect(props.onDelete).toHaveBeenCalledTimes(1)
     })
   })
 
+  // Edge cases: menu closes after mouse leave when no hovering state remains.
   describe('Edge Cases', () => {
     it('should close the menu when mouse leaves the panel and item is not hovering', async () => {
+      // Arrange
       renderComponent()
       fireEvent.click(screen.getByTestId('item-operation-trigger'))
       const pinText = await screen.findByText('explore.sidebar.action.pin')
       const menu = pinText.closest('div')?.parentElement as HTMLElement
 
+      // Act
       fireEvent.mouseEnter(menu)
       fireEvent.mouseLeave(menu)
 
+      // Assert
       await waitFor(() => {
         expect(screen.queryByText('explore.sidebar.action.pin')).not.toBeInTheDocument()
       })

web/app/components/explore/sidebar/app-nav-item/index.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import AppNavItem from '../index'
+import AppNavItem from './index'
 
 const mockPush = vi.fn()
 
@@ -37,46 +37,62 @@ describe('AppNavItem', () => {
     vi.clearAllMocks()
   })
 
+  // Rendering: display app name for desktop and hide for mobile.
   describe('Rendering', () => {
     it('should render name and item operation on desktop', () => {
+      // Arrange
       render(<AppNavItem {...baseProps} />)
 
+      // Assert
       expect(screen.getByText('My App')).toBeInTheDocument()
       expect(screen.getByTestId('item-operation-trigger')).toBeInTheDocument()
     })
 
     it('should hide name on mobile', () => {
+      // Arrange
       render(<AppNavItem {...baseProps} isMobile />)
 
+      // Assert
       expect(screen.queryByText('My App')).not.toBeInTheDocument()
     })
   })
 
+  // User interactions: navigation and delete flow.
   describe('User Interactions', () => {
     it('should navigate to installed app when item is clicked', () => {
+      // Arrange
       render(<AppNavItem {...baseProps} />)
 
+      // Act
       fireEvent.click(screen.getByText('My App'))
 
+      // Assert
       expect(mockPush).toHaveBeenCalledWith('/explore/installed/app-123')
     })
 
     it('should call onDelete with app id when delete action is clicked', async () => {
+      // Arrange
       render(<AppNavItem {...baseProps} />)
 
+      // Act
       fireEvent.click(screen.getByTestId('item-operation-trigger'))
       fireEvent.click(await screen.findByText('explore.sidebar.action.delete'))
 
+      // Assert
       expect(baseProps.onDelete).toHaveBeenCalledWith('app-123')
     })
   })
 
+  // Edge cases: hide delete when uninstallable or selected.
   describe('Edge Cases', () => {
     it('should not render delete action when app is uninstallable', () => {
+      // Arrange
       render(<AppNavItem {...baseProps} uninstallable />)
 
+      // Act
       fireEvent.click(screen.getByTestId('item-operation-trigger'))
 
+      // Assert
       expect(screen.queryByText('explore.sidebar.action.delete')).not.toBeInTheDocument()
     })
   })

web/app/components/explore/sidebar/index.spec.tsx

@@ -5,7 +5,7 @@ import Toast from '@/app/components/base/toast'
 import ExploreContext from '@/context/explore-context'
 import { MediaType } from '@/hooks/use-breakpoints'
 import { AppModeEnum } from '@/types/app'
-import SideBar from '../index'
+import SideBar from './index'
 
 const mockSegments = ['apps']
 const mockPush = vi.fn()
@@ -14,7 +14,6 @@ const mockUninstall = vi.fn()
 const mockUpdatePinStatus = vi.fn()
 let mockIsFetching = false
 let mockInstalledApps: InstalledApp[] = []
-let mockMediaType: string = MediaType.pc
 
 vi.mock('next/navigation', () => ({
   useSelectedLayoutSegments: () => mockSegments,
@@ -24,7 +23,7 @@ vi.mock('next/navigation', () => ({
 }))
 
 vi.mock('@/hooks/use-breakpoints', () => ({
-  default: () => mockMediaType,
+  default: () => MediaType.pc,
   MediaType: {
     mobile: 'mobile',
     tablet: 'tablet',
@@ -86,73 +85,53 @@ describe('SideBar', () => {
     vi.clearAllMocks()
     mockIsFetching = false
     mockInstalledApps = []
-    mockMediaType = MediaType.pc
     vi.spyOn(Toast, 'notify').mockImplementation(() => ({ clear: vi.fn() }))
   })
 
+  // Rendering: show discovery and workspace section.
   describe('Rendering', () => {
-    it('should render discovery link', () => {
-      renderWithContext()
-
-      expect(screen.getByText('explore.sidebar.title')).toBeInTheDocument()
-    })
-
     it('should render workspace items when installed apps exist', () => {
+      // Arrange
       mockInstalledApps = [createInstalledApp()]
+
+      // Act
       renderWithContext(mockInstalledApps)
 
+      // Assert
+      expect(screen.getByText('explore.sidebar.title')).toBeInTheDocument()
       expect(screen.getByText('explore.sidebar.webApps')).toBeInTheDocument()
       expect(screen.getByText('My App')).toBeInTheDocument()
     })
-
-    it('should render NoApps component when no installed apps on desktop', () => {
-      renderWithContext([])
-
-      expect(screen.getByText('explore.sidebar.noApps.title')).toBeInTheDocument()
-    })
-
-    it('should render multiple installed apps', () => {
-      mockInstalledApps = [
-        createInstalledApp({ id: 'app-1', app: { ...createInstalledApp().app, name: 'Alpha' } }),
-        createInstalledApp({ id: 'app-2', app: { ...createInstalledApp().app, name: 'Beta' } }),
-      ]
-      renderWithContext(mockInstalledApps)
-
-      expect(screen.getByText('Alpha')).toBeInTheDocument()
-      expect(screen.getByText('Beta')).toBeInTheDocument()
-    })
-
-    it('should render divider between pinned and unpinned apps', () => {
-      mockInstalledApps = [
-        createInstalledApp({ id: 'app-1', is_pinned: true, app: { ...createInstalledApp().app, name: 'Pinned' } }),
-        createInstalledApp({ id: 'app-2', is_pinned: false, app: { ...createInstalledApp().app, name: 'Unpinned' } }),
-      ]
-      const { container } = renderWithContext(mockInstalledApps)
-
-      const dividers = container.querySelectorAll('[class*="divider"], hr')
-      expect(dividers.length).toBeGreaterThan(0)
-    })
   })
 
+  // Effects: refresh and sync installed apps state.
   describe('Effects', () => {
     it('should refetch installed apps on mount', () => {
+      // Arrange
       mockInstalledApps = [createInstalledApp()]
+
+      // Act
       renderWithContext(mockInstalledApps)
 
+      // Assert
       expect(mockRefetch).toHaveBeenCalledTimes(1)
     })
   })
 
+  // User interactions: delete and pin flows.
   describe('User Interactions', () => {
     it('should uninstall app and show toast when delete is confirmed', async () => {
+      // Arrange
       mockInstalledApps = [createInstalledApp()]
       mockUninstall.mockResolvedValue(undefined)
       renderWithContext(mockInstalledApps)
 
+      // Act
       fireEvent.click(screen.getByTestId('item-operation-trigger'))
       fireEvent.click(await screen.findByText('explore.sidebar.action.delete'))
       fireEvent.click(await screen.findByText('common.operation.confirm'))
 
+      // Assert
       await waitFor(() => {
         expect(mockUninstall).toHaveBeenCalledWith('app-123')
         expect(Toast.notify).toHaveBeenCalledWith(expect.objectContaining({
@@ -163,13 +142,16 @@ describe('SideBar', () => {
     })
 
     it('should update pin status and show toast when pin is clicked', async () => {
+      // Arrange
       mockInstalledApps = [createInstalledApp({ is_pinned: false })]
       mockUpdatePinStatus.mockResolvedValue(undefined)
       renderWithContext(mockInstalledApps)
 
+      // Act
       fireEvent.click(screen.getByTestId('item-operation-trigger'))
       fireEvent.click(await screen.findByText('explore.sidebar.action.pin'))
 
+      // Assert
       await waitFor(() => {
         expect(mockUpdatePinStatus).toHaveBeenCalledWith({ appId: 'app-123', isPinned: true })
         expect(Toast.notify).toHaveBeenCalledWith(expect.objectContaining({
@@ -178,44 +160,5 @@ describe('SideBar', () => {
         }))
       })
     })
-
-    it('should unpin an already pinned app', async () => {
-      mockInstalledApps = [createInstalledApp({ is_pinned: true })]
-      mockUpdatePinStatus.mockResolvedValue(undefined)
-      renderWithContext(mockInstalledApps)
-
-      fireEvent.click(screen.getByTestId('item-operation-trigger'))
-      fireEvent.click(await screen.findByText('explore.sidebar.action.unpin'))
-
-      await waitFor(() => {
-        expect(mockUpdatePinStatus).toHaveBeenCalledWith({ appId: 'app-123', isPinned: false })
-      })
-    })
-
-    it('should open and close confirm dialog for delete', async () => {
-      mockInstalledApps = [createInstalledApp()]
-      renderWithContext(mockInstalledApps)
-
-      fireEvent.click(screen.getByTestId('item-operation-trigger'))
-      fireEvent.click(await screen.findByText('explore.sidebar.action.delete'))
-
-      expect(await screen.findByText('explore.sidebar.delete.title')).toBeInTheDocument()
-
-      fireEvent.click(screen.getByText('common.operation.cancel'))
-
-      await waitFor(() => {
-        expect(mockUninstall).not.toHaveBeenCalled()
-      })
-    })
-  })
-
-  describe('Edge Cases', () => {
-    it('should hide NoApps and app names on mobile', () => {
-      mockMediaType = MediaType.mobile
-      renderWithContext([])
-
-      expect(screen.queryByText('explore.sidebar.noApps.title')).not.toBeInTheDocument()
-      expect(screen.queryByText('explore.sidebar.webApps')).not.toBeInTheDocument()
-    })
   })
 })

web/app/components/explore/sidebar/no-apps/__tests__/index.spec.tsx

@@ -1,63 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { Theme } from '@/types/app'
-import NoApps from '../index'
-
-let mockTheme = Theme.light
-
-vi.mock('@/context/i18n', () => ({
-  useDocLink: () => (path: string) => `https://docs.dify.ai${path}`,
-}))
-
-vi.mock('@/hooks/use-theme', () => ({
-  default: () => ({ theme: mockTheme }),
-}))
-
-describe('NoApps', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockTheme = Theme.light
-  })
-
-  describe('Rendering', () => {
-    it('should render title, description and learn-more link', () => {
-      render(<NoApps />)
-
-      expect(screen.getByText('explore.sidebar.noApps.title')).toBeInTheDocument()
-      expect(screen.getByText('explore.sidebar.noApps.description')).toBeInTheDocument()
-      expect(screen.getByText('explore.sidebar.noApps.learnMore')).toBeInTheDocument()
-    })
-
-    it('should render learn-more as external link with correct href', () => {
-      render(<NoApps />)
-
-      const link = screen.getByText('explore.sidebar.noApps.learnMore')
-      expect(link.tagName).toBe('A')
-      expect(link).toHaveAttribute('href', 'https://docs.dify.ai/use-dify/publish/README')
-      expect(link).toHaveAttribute('target', '_blank')
-      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
-    })
-  })
-
-  describe('Theme', () => {
-    it('should apply light theme background class in light mode', () => {
-      mockTheme = Theme.light
-
-      const { container } = render(<NoApps />)
-      const bgDiv = container.querySelector('[class*="bg-contain"]')
-
-      expect(bgDiv).toBeInTheDocument()
-      expect(bgDiv?.className).toContain('light')
-      expect(bgDiv?.className).not.toContain('dark')
-    })
-
-    it('should apply dark theme background class in dark mode', () => {
-      mockTheme = Theme.dark
-
-      const { container } = render(<NoApps />)
-      const bgDiv = container.querySelector('[class*="bg-contain"]')
-
-      expect(bgDiv).toBeInTheDocument()
-      expect(bgDiv?.className).toContain('dark')
-    })
-  })
-})

web/app/components/explore/try-app/app-info/index.spec.tsx

@@ -1,11 +1,29 @@
 import type { TryAppInfo } from '@/service/try-app'
 import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import AppInfo from '../index'
+import AppInfo from './index'
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'types.advanced': 'Advanced',
+        'types.chatbot': 'Chatbot',
+        'types.agent': 'Agent',
+        'types.workflow': 'Workflow',
+        'types.completion': 'Completion',
+        'tryApp.createFromSampleApp': 'Create from Sample',
+        'tryApp.category': 'Category',
+        'tryApp.requirements': 'Requirements',
+      }
+      return translations[key] || key
+    },
+  }),
+}))
 
 const mockUseGetRequirements = vi.fn()
 
-vi.mock('../use-get-requirements', () => ({
+vi.mock('./use-get-requirements', () => ({
   default: (...args: unknown[]) => mockUseGetRequirements(...args),
 }))
 
@@ -100,7 +118,7 @@ describe('AppInfo', () => {
         />,
       )
 
-      expect(screen.getByText('APP.TYPES.ADVANCED')).toBeInTheDocument()
+      expect(screen.getByText('ADVANCED')).toBeInTheDocument()
     })
 
     it('displays CHATBOT for chat mode', () => {
@@ -115,7 +133,7 @@ describe('AppInfo', () => {
         />,
       )
 
-      expect(screen.getByText('APP.TYPES.CHATBOT')).toBeInTheDocument()
+      expect(screen.getByText('CHATBOT')).toBeInTheDocument()
     })
 
     it('displays AGENT for agent-chat mode', () => {
@@ -130,7 +148,7 @@ describe('AppInfo', () => {
         />,
       )
 
-      expect(screen.getByText('APP.TYPES.AGENT')).toBeInTheDocument()
+      expect(screen.getByText('AGENT')).toBeInTheDocument()
     })
 
     it('displays WORKFLOW for workflow mode', () => {
@@ -145,7 +163,7 @@ describe('AppInfo', () => {
         />,
       )
 
-      expect(screen.getByText('APP.TYPES.WORKFLOW')).toBeInTheDocument()
+      expect(screen.getByText('WORKFLOW')).toBeInTheDocument()
     })
 
     it('displays COMPLETION for completion mode', () => {
@@ -160,7 +178,7 @@ describe('AppInfo', () => {
         />,
       )
 
-      expect(screen.getByText('APP.TYPES.COMPLETION')).toBeInTheDocument()
+      expect(screen.getByText('COMPLETION')).toBeInTheDocument()
     })
   })
 
@@ -196,6 +214,7 @@ describe('AppInfo', () => {
         />,
       )
 
+      // Check that there's no element with the description class that has empty content
       const descriptionElements = container.querySelectorAll('.system-sm-regular.mt-\\[14px\\]')
       expect(descriptionElements.length).toBe(0)
     })
@@ -214,7 +233,7 @@ describe('AppInfo', () => {
         />,
       )
 
-      expect(screen.getByText('explore.tryApp.createFromSampleApp')).toBeInTheDocument()
+      expect(screen.getByText('Create from Sample')).toBeInTheDocument()
     })
 
     it('calls onCreate when button is clicked', () => {
@@ -229,7 +248,7 @@ describe('AppInfo', () => {
         />,
       )
 
-      fireEvent.click(screen.getByText('explore.tryApp.createFromSampleApp'))
+      fireEvent.click(screen.getByText('Create from Sample'))
       expect(mockOnCreate).toHaveBeenCalledTimes(1)
     })
   })
@@ -248,7 +267,7 @@ describe('AppInfo', () => {
         />,
       )
 
-      expect(screen.getByText('explore.tryApp.category')).toBeInTheDocument()
+      expect(screen.getByText('Category')).toBeInTheDocument()
       expect(screen.getByText('AI Assistant')).toBeInTheDocument()
     })
 
@@ -264,7 +283,7 @@ describe('AppInfo', () => {
         />,
       )
 
-      expect(screen.queryByText('explore.tryApp.category')).not.toBeInTheDocument()
+      expect(screen.queryByText('Category')).not.toBeInTheDocument()
     })
   })
 
@@ -288,7 +307,7 @@ describe('AppInfo', () => {
         />,
       )
 
-      expect(screen.getByText('explore.tryApp.requirements')).toBeInTheDocument()
+      expect(screen.getByText('Requirements')).toBeInTheDocument()
       expect(screen.getByText('OpenAI GPT-4')).toBeInTheDocument()
       expect(screen.getByText('Google Search')).toBeInTheDocument()
     })
@@ -309,7 +328,7 @@ describe('AppInfo', () => {
         />,
       )
 
-      expect(screen.queryByText('explore.tryApp.requirements')).not.toBeInTheDocument()
+      expect(screen.queryByText('Requirements')).not.toBeInTheDocument()
     })
 
     it('renders requirement icons with correct background image', () => {

web/app/components/explore/try-app/app-info/use-get-requirements.spec.ts

@@ -1,7 +1,7 @@
 import type { TryAppInfo } from '@/service/try-app'
 import { renderHook } from '@testing-library/react'
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import useGetRequirements from '../use-get-requirements'
+import useGetRequirements from './use-get-requirements'
 
 const mockUseGetTryAppFlowPreview = vi.fn()
 
@@ -165,6 +165,7 @@ describe('useGetRequirements', () => {
         useGetRequirements({ appDetail, appId: 'test-app-id' }),
       )
 
+      // Only model provider should be included, no disabled tools
       expect(result.current.requirements).toHaveLength(1)
       expect(result.current.requirements[0].name).toBe('openai')
     })

web/app/components/explore/try-app/app/chat.spec.tsx

@@ -1,7 +1,19 @@
 import type { TryAppInfo } from '@/service/try-app'
 import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import TryApp from '../chat'
+import TryApp from './chat'
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'chat.resetChat': 'Reset Chat',
+        'tryApp.tryInfo': 'This is try mode info',
+      }
+      return translations[key] || key
+    },
+  }),
+}))
 
 const mockRemoveConversationIdInfo = vi.fn()
 const mockHandleNewConversation = vi.fn()
@@ -19,7 +31,7 @@ vi.mock('@/hooks/use-breakpoints', () => ({
   },
 }))
 
-vi.mock('../../../../base/chat/embedded-chatbot/theme/theme-context', () => ({
+vi.mock('../../../base/chat/embedded-chatbot/theme/theme-context', () => ({
   useThemeContext: () => ({
     primaryColor: '#1890ff',
   }),
@@ -134,7 +146,7 @@ describe('TryApp (chat.tsx)', () => {
         />,
       )
 
-      expect(screen.getByText('explore.tryApp.tryInfo')).toBeInTheDocument()
+      expect(screen.getByText('This is try mode info')).toBeInTheDocument()
     })
 
     it('applies className prop', () => {
@@ -148,6 +160,7 @@ describe('TryApp (chat.tsx)', () => {
         />,
       )
 
+      // The component wraps with EmbeddedChatbotContext.Provider, first child is the div with className
       const innerDiv = container.querySelector('.custom-class')
       expect(innerDiv).toBeInTheDocument()
     })
@@ -172,6 +185,7 @@ describe('TryApp (chat.tsx)', () => {
         />,
       )
 
+      // Reset button should not be present
       expect(screen.queryByRole('button')).not.toBeInTheDocument()
     })
 
@@ -193,6 +207,7 @@ describe('TryApp (chat.tsx)', () => {
         />,
       )
 
+      // Should have a button (the reset button)
       expect(screen.getByRole('button')).toBeInTheDocument()
     })
 
@@ -298,12 +313,14 @@ describe('TryApp (chat.tsx)', () => {
         />,
       )
 
-      const alertElement = screen.getByText('explore.tryApp.tryInfo').closest('[class*="alert"]')?.parentElement
+      // Find and click the hide button on the alert
+      const alertElement = screen.getByText('This is try mode info').closest('[class*="alert"]')?.parentElement
       const hideButton = alertElement?.querySelector('button, [role="button"], svg')
 
       if (hideButton) {
         fireEvent.click(hideButton)
-        expect(screen.queryByText('explore.tryApp.tryInfo')).not.toBeInTheDocument()
+        // After hiding, the alert should not be visible
+        expect(screen.queryByText('This is try mode info')).not.toBeInTheDocument()
       }
     })
   })

web/app/components/explore/try-app/app/index.spec.tsx

@@ -1,13 +1,19 @@
 import type { TryAppInfo } from '@/service/try-app'
 import { cleanup, render, screen } from '@testing-library/react'
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import TryApp from '../index'
+import TryApp from './index'
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
 
 vi.mock('@/hooks/use-document-title', () => ({
   default: vi.fn(),
 }))
 
-vi.mock('../chat', () => ({
+vi.mock('./chat', () => ({
   default: ({ appId, appDetail, className }: { appId: string, appDetail: TryAppInfo, className: string }) => (
     <div data-testid="chat-component" data-app-id={appId} data-mode={appDetail.mode} className={className}>
       Chat Component
@@ -15,7 +21,7 @@ vi.mock('../chat', () => ({
   ),
 }))
 
-vi.mock('../text-generation', () => ({
+vi.mock('./text-generation', () => ({
   default: ({
     appId,
     className,

web/app/components/explore/try-app/app/text-generation.spec.tsx

@@ -1,7 +1,18 @@
 import type { AppData } from '@/models/share'
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import TextGeneration from '../text-generation'
+import TextGeneration from './text-generation'
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'tryApp.tryInfo': 'This is a try app notice',
+      }
+      return translations[key] || key
+    },
+  }),
+}))
 
 const mockUpdateAppInfo = vi.fn()
 const mockUpdateAppParams = vi.fn()
@@ -145,6 +156,7 @@ describe('TextGeneration', () => {
       )
 
       await waitFor(() => {
+        // Multiple elements may have the title (header and RunOnce mock)
         const titles = screen.getAllByText('Test App Title')
         expect(titles.length).toBeGreaterThan(0)
       })
@@ -263,6 +275,7 @@ describe('TextGeneration', () => {
 
       fireEvent.click(screen.getByTestId('send-button'))
 
+      // The send should work without errors
       expect(screen.getByTestId('result-component')).toBeInTheDocument()
     })
   })
@@ -285,7 +298,7 @@ describe('TextGeneration', () => {
       fireEvent.click(screen.getByTestId('complete-button'))
 
       await waitFor(() => {
-        expect(screen.getByText('explore.tryApp.tryInfo')).toBeInTheDocument()
+        expect(screen.getByText('This is a try app notice')).toBeInTheDocument()
       })
     })
   })
@@ -371,6 +384,7 @@ describe('TextGeneration', () => {
 
       fireEvent.click(screen.getByTestId('run-start-button'))
 
+      // Result panel should remain visible
       expect(screen.getByTestId('result-component')).toBeInTheDocument()
     })
   })
@@ -390,8 +404,10 @@ describe('TextGeneration', () => {
         expect(screen.getByTestId('inputs-change-button')).toBeInTheDocument()
       })
 
+      // Trigger input change which should call setInputs callback
       fireEvent.click(screen.getByTestId('inputs-change-button'))
 
+      // The component should handle the input change without errors
       expect(screen.getByTestId('run-once')).toBeInTheDocument()
     })
   })
@@ -409,6 +425,7 @@ describe('TextGeneration', () => {
       )
 
       await waitFor(() => {
+        // Mobile toggle panel should be rendered
         const togglePanel = container.querySelector('.cursor-grab')
         expect(togglePanel).toBeInTheDocument()
       })
@@ -430,11 +447,13 @@ describe('TextGeneration', () => {
         expect(togglePanel).toBeInTheDocument()
       })
 
+      // Click to show result panel
       const toggleParent = container.querySelector('.cursor-grab')?.parentElement
       if (toggleParent) {
         fireEvent.click(toggleParent)
       }
 
+      // Click again to hide result panel
       await waitFor(() => {
         const newToggleParent = container.querySelector('.cursor-grab')?.parentElement
         if (newToggleParent) {
@@ -442,6 +461,7 @@ describe('TextGeneration', () => {
         }
       })
 
+      // Component should handle both show and hide without errors
       expect(screen.getByTestId('result-component')).toBeInTheDocument()
     })
   })

web/app/components/explore/try-app/index.spec.tsx

@@ -1,8 +1,20 @@
 import type { TryAppInfo } from '@/service/try-app'
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import TryApp from '../index'
-import { TypeEnum } from '../tab'
+import TryApp from './index'
+import { TypeEnum } from './tab'
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'tryApp.tabHeader.try': 'Try',
+        'tryApp.tabHeader.detail': 'Detail',
+      }
+      return translations[key] || key
+    },
+  }),
+}))
 
 vi.mock('@/config', async (importOriginal) => {
   const actual = await importOriginal() as object
@@ -18,7 +30,7 @@ vi.mock('@/service/use-try-app', () => ({
   useGetTryAppInfo: (...args: unknown[]) => mockUseGetTryAppInfo(...args),
 }))
 
-vi.mock('../app', () => ({
+vi.mock('./app', () => ({
   default: ({ appId, appDetail }: { appId: string, appDetail: TryAppInfo }) => (
     <div data-testid="app-component" data-app-id={appId} data-mode={appDetail?.mode}>
       App Component
@@ -26,7 +38,7 @@ vi.mock('../app', () => ({
   ),
 }))
 
-vi.mock('../preview', () => ({
+vi.mock('./preview', () => ({
   default: ({ appId, appDetail }: { appId: string, appDetail: TryAppInfo }) => (
     <div data-testid="preview-component" data-app-id={appId} data-mode={appDetail?.mode}>
       Preview Component
@@ -34,7 +46,7 @@ vi.mock('../preview', () => ({
   ),
 }))
 
-vi.mock('../app-info', () => ({
+vi.mock('./app-info', () => ({
   default: ({
     appId,
     appDetail,
@@ -129,8 +141,8 @@ describe('TryApp (main index.tsx)', () => {
       )
 
       await waitFor(() => {
-        expect(screen.getByText('explore.tryApp.tabHeader.try')).toBeInTheDocument()
-        expect(screen.getByText('explore.tryApp.tabHeader.detail')).toBeInTheDocument()
+        expect(screen.getByText('Try')).toBeInTheDocument()
+        expect(screen.getByText('Detail')).toBeInTheDocument()
       })
     })
 
@@ -173,6 +185,7 @@ describe('TryApp (main index.tsx)', () => {
       )
 
       await waitFor(() => {
+        // Find the close button (the one with RiCloseLine icon)
         const buttons = document.body.querySelectorAll('button')
         expect(buttons.length).toBeGreaterThan(0)
       })
@@ -190,10 +203,10 @@ describe('TryApp (main index.tsx)', () => {
       )
 
       await waitFor(() => {
-        expect(screen.getByText('explore.tryApp.tabHeader.detail')).toBeInTheDocument()
+        expect(screen.getByText('Detail')).toBeInTheDocument()
       })
 
-      fireEvent.click(screen.getByText('explore.tryApp.tabHeader.detail'))
+      fireEvent.click(screen.getByText('Detail'))
 
       await waitFor(() => {
         expect(document.body.querySelector('[data-testid="preview-component"]')).toBeInTheDocument()
@@ -211,16 +224,18 @@ describe('TryApp (main index.tsx)', () => {
       )
 
       await waitFor(() => {
-        expect(screen.getByText('explore.tryApp.tabHeader.detail')).toBeInTheDocument()
+        expect(screen.getByText('Detail')).toBeInTheDocument()
       })
 
-      fireEvent.click(screen.getByText('explore.tryApp.tabHeader.detail'))
+      // First switch to Detail
+      fireEvent.click(screen.getByText('Detail'))
 
       await waitFor(() => {
         expect(document.body.querySelector('[data-testid="preview-component"]')).toBeInTheDocument()
       })
 
-      fireEvent.click(screen.getByText('explore.tryApp.tabHeader.try'))
+      // Then switch back to Try
+      fireEvent.click(screen.getByText('Try'))
 
       await waitFor(() => {
         expect(document.body.querySelector('[data-testid="app-component"]')).toBeInTheDocument()
@@ -241,6 +256,7 @@ describe('TryApp (main index.tsx)', () => {
       )
 
       await waitFor(() => {
+        // Find the button with close icon
         const buttons = document.body.querySelectorAll('button')
         const closeButton = Array.from(buttons).find(btn =>
           btn.querySelector('svg') || btn.className.includes('rounded-[10px]'),
@@ -352,10 +368,10 @@ describe('TryApp (main index.tsx)', () => {
       )
 
       await waitFor(() => {
-        expect(screen.getByText('explore.tryApp.tabHeader.detail')).toBeInTheDocument()
+        expect(screen.getByText('Detail')).toBeInTheDocument()
       })
 
-      fireEvent.click(screen.getByText('explore.tryApp.tabHeader.detail'))
+      fireEvent.click(screen.getByText('Detail'))
 
       await waitFor(() => {
         const previewComponent = document.body.querySelector('[data-testid="preview-component"]')

web/app/components/explore/try-app/preview/basic-app-preview.spec.tsx

@@ -1,6 +1,12 @@
 import { cleanup, render, screen, waitFor } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import BasicAppPreview from '../basic-app-preview'
+import BasicAppPreview from './basic-app-preview'
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
 
 const mockUseGetTryAppInfo = vi.fn()
 const mockUseAllToolProviders = vi.fn()
@@ -16,7 +22,7 @@ vi.mock('@/service/use-tools', () => ({
   useAllToolProviders: () => mockUseAllToolProviders(),
 }))
 
-vi.mock('../../../../header/account-setting/model-provider-page/hooks', () => ({
+vi.mock('../../../header/account-setting/model-provider-page/hooks', () => ({
   useTextGenerationCurrentProviderAndModelAndModelList: (...args: unknown[]) =>
     mockUseTextGenerationCurrentProviderAndModelAndModelList(...args),
 }))
@@ -512,6 +518,7 @@ describe('BasicAppPreview', () => {
 
       render(<BasicAppPreview appId="test-app-id" />)
 
+      // Should still render (with default model config)
       await waitFor(() => {
         expect(mockUseGetTryAppDataSets).toHaveBeenCalled()
       })

web/app/components/explore/try-app/preview/flow-app-preview.spec.tsx

@@ -1,6 +1,6 @@
 import { cleanup, render, screen } from '@testing-library/react'
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import FlowAppPreview from '../flow-app-preview'
+import FlowAppPreview from './flow-app-preview'
 
 const mockUseGetTryAppFlowPreview = vi.fn()
 

web/app/components/explore/try-app/preview/index.spec.tsx

@@ -1,9 +1,9 @@
 import type { TryAppInfo } from '@/service/try-app'
 import { cleanup, render, screen } from '@testing-library/react'
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import Preview from '../index'
+import Preview from './index'
 
-vi.mock('../basic-app-preview', () => ({
+vi.mock('./basic-app-preview', () => ({
   default: ({ appId }: { appId: string }) => (
     <div data-testid="basic-app-preview" data-app-id={appId}>
       BasicAppPreview
@@ -11,7 +11,7 @@ vi.mock('../basic-app-preview', () => ({
   ),
 }))
 
-vi.mock('../flow-app-preview', () => ({
+vi.mock('./flow-app-preview', () => ({
   default: ({ appId, className }: { appId: string, className?: string }) => (
     <div data-testid="flow-app-preview" data-app-id={appId} className={className}>
       FlowAppPreview

web/app/components/explore/try-app/tab.spec.tsx

@@ -1,6 +1,18 @@
 import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import Tab, { TypeEnum } from '../tab'
+import Tab, { TypeEnum } from './tab'
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'tryApp.tabHeader.try': 'Try',
+        'tryApp.tabHeader.detail': 'Detail',
+      }
+      return translations[key] || key
+    },
+  }),
+}))
 
 vi.mock('@/config', async (importOriginal) => {
   const actual = await importOriginal() as object
@@ -19,23 +31,23 @@ describe('Tab', () => {
     const mockOnChange = vi.fn()
     render(<Tab value={TypeEnum.TRY} onChange={mockOnChange} />)
 
-    expect(screen.getByText('explore.tryApp.tabHeader.try')).toBeInTheDocument()
-    expect(screen.getByText('explore.tryApp.tabHeader.detail')).toBeInTheDocument()
+    expect(screen.getByText('Try')).toBeInTheDocument()
+    expect(screen.getByText('Detail')).toBeInTheDocument()
   })
 
   it('renders tab with DETAIL value selected', () => {
     const mockOnChange = vi.fn()
     render(<Tab value={TypeEnum.DETAIL} onChange={mockOnChange} />)
 
-    expect(screen.getByText('explore.tryApp.tabHeader.try')).toBeInTheDocument()
-    expect(screen.getByText('explore.tryApp.tabHeader.detail')).toBeInTheDocument()
+    expect(screen.getByText('Try')).toBeInTheDocument()
+    expect(screen.getByText('Detail')).toBeInTheDocument()
   })
 
   it('calls onChange when clicking a tab', () => {
     const mockOnChange = vi.fn()
     render(<Tab value={TypeEnum.TRY} onChange={mockOnChange} />)
 
-    fireEvent.click(screen.getByText('explore.tryApp.tabHeader.detail'))
+    fireEvent.click(screen.getByText('Detail'))
     expect(mockOnChange).toHaveBeenCalledWith(TypeEnum.DETAIL)
   })
 
@@ -43,7 +55,7 @@ describe('Tab', () => {
     const mockOnChange = vi.fn()
     render(<Tab value={TypeEnum.DETAIL} onChange={mockOnChange} />)
 
-    fireEvent.click(screen.getByText('explore.tryApp.tabHeader.try'))
+    fireEvent.click(screen.getByText('Try'))
     expect(mockOnChange).toHaveBeenCalledWith(TypeEnum.TRY)
   })
 

web/app/components/header/account-setting/members-page/index.tsx

@@ -104,7 +104,7 @@ const MembersPage = () => {
             <UpgradeBtn className="mr-2" loc="member-invite" />
           )}
           <div className="shrink-0">
-            {isCurrentWorkspaceManager && <InviteButton disabled={isMemberFull} onClick={() => setInviteModalVisible(true)} />}
+            <InviteButton disabled={!isCurrentWorkspaceManager || isMemberFull} onClick={() => setInviteModalVisible(true)} />
           </div>
         </div>
         <div className="overflow-visible lg:overflow-visible">

web/app/components/rag-pipeline/hooks/use-pipeline-run.spec.ts

@@ -92,10 +92,8 @@ vi.mock('@/service/workflow', () => ({
 }))
 
 const mockInvalidAllLastRun = vi.fn()
-const mockInvalidateRunHistory = vi.fn()
 vi.mock('@/service/use-workflow', () => ({
   useInvalidAllLastRun: () => mockInvalidAllLastRun,
-  useInvalidateWorkflowRunHistory: () => mockInvalidateRunHistory,
 }))
 
 // Mock FlowType
@@ -474,7 +472,6 @@ describe('usePipelineRun', () => {
       })
 
       expect(onWorkflowStarted).toHaveBeenCalledWith({ task_id: 'task-1' })
-      expect(mockInvalidateRunHistory).toHaveBeenCalled()
     })
 
     it('should call onWorkflowFinished callback when provided', async () => {
@@ -496,7 +493,6 @@ describe('usePipelineRun', () => {
       })
 
       expect(onWorkflowFinished).toHaveBeenCalledWith({ status: 'succeeded' })
-      expect(mockInvalidateRunHistory).toHaveBeenCalled()
     })
 
     it('should call onError callback when provided', async () => {
@@ -518,7 +514,6 @@ describe('usePipelineRun', () => {
       })
 
       expect(onError).toHaveBeenCalledWith({ message: 'error' })
-      expect(mockInvalidateRunHistory).toHaveBeenCalled()
     })
 
     it('should call onNodeStarted callback when provided', async () => {

web/app/components/rag-pipeline/hooks/use-pipeline-run.ts

@@ -12,7 +12,7 @@ import { useWorkflowRunEvent } from '@/app/components/workflow/hooks/use-workflo
 import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import { ssePost } from '@/service/base'
-import { useInvalidAllLastRun, useInvalidateWorkflowRunHistory } from '@/service/use-workflow'
+import { useInvalidAllLastRun } from '@/service/use-workflow'
 import { stopWorkflowRun } from '@/service/workflow'
 import { FlowType } from '@/types/common'
 import { useNodesSyncDraft } from './use-nodes-sync-draft'
@@ -93,7 +93,6 @@ export const usePipelineRun = () => {
 
   const pipelineId = useStore(s => s.pipelineId)
   const invalidAllLastRun = useInvalidAllLastRun(FlowType.ragPipeline, pipelineId)
-  const invalidateRunHistory = useInvalidateWorkflowRunHistory()
   const { fetchInspectVars } = useSetWorkflowVarsWithValue({
     flowType: FlowType.ragPipeline,
     flowId: pipelineId!,
@@ -133,7 +132,6 @@ export const usePipelineRun = () => {
       ...restCallback
     } = callback || {}
     const { pipelineId } = workflowStore.getState()
-    const runHistoryUrl = `/rag/pipelines/${pipelineId}/workflow-runs`
     workflowStore.setState({ historyWorkflowData: undefined })
     const workflowContainer = document.getElementById('workflow-container')
 
@@ -172,14 +170,12 @@ export const usePipelineRun = () => {
         },
         onWorkflowStarted: (params) => {
           handleWorkflowStarted(params)
-          invalidateRunHistory(runHistoryUrl)
 
           if (onWorkflowStarted)
             onWorkflowStarted(params)
         },
         onWorkflowFinished: (params) => {
           handleWorkflowFinished(params)
-          invalidateRunHistory(runHistoryUrl)
           fetchInspectVars({})
           invalidAllLastRun()
 
@@ -188,7 +184,6 @@ export const usePipelineRun = () => {
         },
         onError: (params) => {
           handleWorkflowFailed()
-          invalidateRunHistory(runHistoryUrl)
 
           if (onError)
             onError(params)
@@ -280,7 +275,7 @@ export const usePipelineRun = () => {
         ...restCallback,
       },
     )
-  }, [store, doSyncWorkflowDraft, workflowStore, handleWorkflowStarted, handleWorkflowFinished, fetchInspectVars, invalidAllLastRun, invalidateRunHistory, handleWorkflowFailed, handleWorkflowNodeStarted, handleWorkflowNodeFinished, handleWorkflowNodeIterationStarted, handleWorkflowNodeIterationNext, handleWorkflowNodeIterationFinished, handleWorkflowNodeLoopStarted, handleWorkflowNodeLoopNext, handleWorkflowNodeLoopFinished, handleWorkflowNodeRetry, handleWorkflowAgentLog, handleWorkflowTextChunk, handleWorkflowTextReplace])
+  }, [store, doSyncWorkflowDraft, workflowStore, handleWorkflowStarted, handleWorkflowFinished, fetchInspectVars, invalidAllLastRun, handleWorkflowFailed, handleWorkflowNodeStarted, handleWorkflowNodeFinished, handleWorkflowNodeIterationStarted, handleWorkflowNodeIterationNext, handleWorkflowNodeIterationFinished, handleWorkflowNodeLoopStarted, handleWorkflowNodeLoopNext, handleWorkflowNodeLoopFinished, handleWorkflowNodeRetry, handleWorkflowAgentLog, handleWorkflowTextChunk, handleWorkflowTextReplace])
 
   const handleStopRun = useCallback((taskId: string) => {
     const { pipelineId } = workflowStore.getState()

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

@@ -23,7 +23,7 @@ import { useWorkflowStore } from '@/app/components/workflow/store'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import { handleStream, post, sseGet, ssePost } from '@/service/base'
 import { ContentType } from '@/service/fetch'
-import { useInvalidAllLastRun, useInvalidateWorkflowRunHistory } from '@/service/use-workflow'
+import { useInvalidAllLastRun } from '@/service/use-workflow'
 import { stopWorkflowRun } from '@/service/workflow'
 import { AppModeEnum } from '@/types/app'
 import { useSetWorkflowVarsWithValue } from '../../workflow/hooks/use-fetch-workflow-inspect-vars'
@@ -66,7 +66,6 @@ export const useWorkflowRun = () => {
   const configsMap = useConfigsMap()
   const { flowId, flowType } = configsMap
   const invalidAllLastRun = useInvalidAllLastRun(flowType, flowId)
-  const invalidateRunHistory = useInvalidateWorkflowRunHistory()
 
   const { fetchInspectVars } = useSetWorkflowVarsWithValue({
     ...configsMap,
@@ -190,9 +189,6 @@ export const useWorkflowRun = () => {
     } = callback || {}
     workflowStore.setState({ historyWorkflowData: undefined })
     const appDetail = useAppStore.getState().appDetail
-    const runHistoryUrl = appDetail?.mode === AppModeEnum.ADVANCED_CHAT
-      ? `/apps/${appDetail.id}/advanced-chat/workflow-runs`
-      : `/apps/${appDetail?.id}/workflow-runs`
     const workflowContainer = document.getElementById('workflow-container')
 
     const {
@@ -367,7 +363,6 @@ export const useWorkflowRun = () => {
     const wrappedOnError = (params: any) => {
       clearAbortController()
       handleWorkflowFailed()
-      invalidateRunHistory(runHistoryUrl)
       clearListeningState()
 
       if (onError)
@@ -386,7 +381,6 @@ export const useWorkflowRun = () => {
       ...restCallback,
       onWorkflowStarted: (params) => {
         handleWorkflowStarted(params)
-        invalidateRunHistory(runHistoryUrl)
 
         if (onWorkflowStarted)
           onWorkflowStarted(params)
@@ -394,7 +388,6 @@ export const useWorkflowRun = () => {
       onWorkflowFinished: (params) => {
         clearListeningState()
         handleWorkflowFinished(params)
-        invalidateRunHistory(runHistoryUrl)
 
         if (onWorkflowFinished)
           onWorkflowFinished(params)
@@ -503,7 +496,6 @@ export const useWorkflowRun = () => {
       },
       onWorkflowPaused: (params) => {
         handleWorkflowPaused()
-        invalidateRunHistory(runHistoryUrl)
         if (onWorkflowPaused)
           onWorkflowPaused(params)
         const url = `/workflow/${params.workflow_run_id}/events`
@@ -702,7 +694,6 @@ export const useWorkflowRun = () => {
       },
       onWorkflowFinished: (params) => {
         handleWorkflowFinished(params)
-        invalidateRunHistory(runHistoryUrl)
 
         if (onWorkflowFinished)
           onWorkflowFinished(params)
@@ -713,7 +704,6 @@ export const useWorkflowRun = () => {
       },
       onError: (params) => {
         handleWorkflowFailed()
-        invalidateRunHistory(runHistoryUrl)
 
         if (onError)
           onError(params)
@@ -813,7 +803,6 @@ export const useWorkflowRun = () => {
       },
       onWorkflowPaused: (params) => {
         handleWorkflowPaused()
-        invalidateRunHistory(runHistoryUrl)
         if (onWorkflowPaused)
           onWorkflowPaused(params)
         const url = `/workflow/${params.workflow_run_id}/events`
@@ -848,7 +837,7 @@ export const useWorkflowRun = () => {
       },
       finalCallbacks,
     )
-  }, [store, doSyncWorkflowDraft, workflowStore, pathname, handleWorkflowFailed, flowId, handleWorkflowStarted, handleWorkflowFinished, fetchInspectVars, invalidAllLastRun, invalidateRunHistory, handleWorkflowNodeStarted, handleWorkflowNodeFinished, handleWorkflowNodeIterationStarted, handleWorkflowNodeIterationNext, handleWorkflowNodeIterationFinished, handleWorkflowNodeLoopStarted, handleWorkflowNodeLoopNext, handleWorkflowNodeLoopFinished, handleWorkflowNodeRetry, handleWorkflowAgentLog, handleWorkflowTextChunk, handleWorkflowTextReplace, handleWorkflowPaused, handleWorkflowNodeHumanInputRequired, handleWorkflowNodeHumanInputFormFilled, handleWorkflowNodeHumanInputFormTimeout])
+  }, [store, doSyncWorkflowDraft, workflowStore, pathname, handleWorkflowFailed, flowId, handleWorkflowStarted, handleWorkflowFinished, fetchInspectVars, invalidAllLastRun, handleWorkflowNodeStarted, handleWorkflowNodeFinished, handleWorkflowNodeIterationStarted, handleWorkflowNodeIterationNext, handleWorkflowNodeIterationFinished, handleWorkflowNodeLoopStarted, handleWorkflowNodeLoopNext, handleWorkflowNodeLoopFinished, handleWorkflowNodeRetry, handleWorkflowAgentLog, handleWorkflowTextChunk, handleWorkflowTextReplace, handleWorkflowPaused, handleWorkflowNodeHumanInputRequired, handleWorkflowNodeHumanInputFormFilled, handleWorkflowNodeHumanInputFormTimeout])
 
   const handleStopRun = useCallback((taskId: string) => {
     const setStoppedState = () => {

web/app/components/workflow/header/view-history.tsx

@@ -1,8 +1,18 @@
+import {
+  RiCheckboxCircleLine,
+  RiCloseLine,
+  RiErrorWarningLine,
+} from '@remixicon/react'
 import {
   memo,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
+import {
+  ClockPlay,
+  ClockPlaySlim,
+} from '@/app/components/base/icons/src/vender/line/time'
 import Loading from '@/app/components/base/loading'
 import {
   PortalToFollowElem,
@@ -79,7 +89,9 @@ const ViewHistory = ({
                 open && 'bg-components-button-secondary-bg-hover',
               )}
               >
-                <span className="i-custom-vender-line-time-clock-play mr-1 h-4 w-4" />
+                <ClockPlay
+                  className="mr-1 h-4 w-4"
+                />
                 {t('common.showRunHistory', { ns: 'workflow' })}
               </div>
             )
@@ -95,7 +107,7 @@ const ViewHistory = ({
                     onClearLogAndMessageModal?.()
                   }}
                 >
-                  <span className={cn('i-custom-vender-line-time-clock-play', 'h-4 w-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')} />
+                  <ClockPlay className={cn('h-4 w-4 group-hover:text-components-button-secondary-accent-text', open ? 'text-components-button-secondary-accent-text' : 'text-components-button-ghost-text')} />
                 </div>
               </Tooltip>
             )
@@ -117,7 +129,7 @@ const ViewHistory = ({
                   setOpen(false)
                 }}
               >
-                <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+                <RiCloseLine className="h-4 w-4 text-text-tertiary" />
               </div>
             </div>
             {
@@ -133,7 +145,7 @@ const ViewHistory = ({
                   {
                     !data?.data.length && (
                       <div className="py-12">
-                        <span className="i-custom-vender-line-time-clock-play-slim mx-auto mb-2 h-8 w-8 text-text-quaternary" />
+                        <ClockPlaySlim className="mx-auto mb-2 h-8 w-8 text-text-quaternary" />
                         <div className="text-center text-[13px] text-text-quaternary">
                           {t('common.notRunning', { ns: 'workflow' })}
                         </div>
@@ -163,18 +175,18 @@ const ViewHistory = ({
                         }}
                       >
                         {
-                          !isChatMode && [WorkflowRunningStatus.Stopped, WorkflowRunningStatus.Paused].includes(item.status) && (
-                            <span className="i-custom-vender-line-alertsAndFeedback-alert-triangle mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#F79009]" />
+                          !isChatMode && item.status === WorkflowRunningStatus.Stopped && (
+                            <AlertTriangle className="mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#F79009]" />
                           )
                         }
                         {
                           !isChatMode && item.status === WorkflowRunningStatus.Failed && (
-                            <span className="i-ri-error-warning-line mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#F04438]" />
+                            <RiErrorWarningLine className="mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#F04438]" />
                           )
                         }
                         {
                           !isChatMode && item.status === WorkflowRunningStatus.Succeeded && (
-                            <span className="i-ri-checkbox-circle-line mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#12B76A]" />
+                            <RiCheckboxCircleLine className="mr-1.5 mt-0.5 h-3.5 w-3.5 text-[#12B76A]" />
                           )
                         }
                         <div>
@@ -184,7 +196,7 @@ const ViewHistory = ({
                               item.id === historyWorkflowData?.id && 'text-text-accent',
                             )}
                           >
-                            {`Test ${isChatMode ? 'Chat' : 'Run'}${formatWorkflowRunIdentifier(item.finished_at, item.status)}`}
+                            {`Test ${isChatMode ? 'Chat' : 'Run'}${formatWorkflowRunIdentifier(item.finished_at)}`}
                           </div>
                           <div className="flex items-center text-xs leading-[18px] text-text-tertiary">
                             {item.created_by_account?.name}