refactor(web): remove mutateCurrentWorkspace from AppContext, use service-layer invalidation hook

The previous implementation stored query invalidation logic (mutateCurrentWorkspace) and
isFetching state (isValidatingCurrentWorkspace) in React Context, causing QuotaPanel to
flash a loading spinner on every settings tab switch due to a useEffect calling
invalidateQueries on mount. This violated separation of concerns and React best practices.

- Remove mutateCurrentWorkspace and isValidatingCurrentWorkspace from AppContext
- Add useInvalidateCurrentWorkspace hook in service layer (consistent with project pattern)
- Remove redundant useEffect + invalidateQueries in ModelProviderPage
- QuotaPanel now derives loading from !currentWorkspace.id instead of external prop
- Update custom-web-app-brand to use the new service-layer hook

api/extensions/otel/decorators/base.py

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

api/extensions/otel/decorators/handler.py

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

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

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

api/services/account_service.py

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

api/services/workspace_service.py

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

api/tests/unit_tests/services/test_account_service.py

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

web/__tests__/billing-integration.test.tsx

@@ -1,996 +0,0 @@
-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 { defaultPlan, NUM_INFINITE } from '@/app/components/billing/config'
-import { Plan } from '@/app/components/billing/type'
-
-// ─── Module-level mock state ────────────────────────────────────────────────
-let mockProviderCtx: Record<string, unknown> = {}
-let mockAppCtx: Record<string, unknown> = {}
-const mockSetShowPricingModal = vi.fn()
-const mockSetShowAccountSettingModal = 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',
-  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,
-  }
-}
-
-// ─── Imports (after mocks) ──────────────────────────────────────────────────
-// These must be imported after all vi.mock() calls
-/* eslint-disable import/first */
-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 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 UpgradeBtn from '@/app/components/billing/upgrade-btn'
-import VectorSpaceFull from '@/app/components/billing/vector-space-full'
-/* eslint-enable import/first */
-
-// ═══════════════════════════════════════════════════════════════════════════
-// 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/app/components/billing/apps-full-in-dialog/index.spec.tsx

@@ -96,10 +96,8 @@ const buildAppContext = (overrides: Partial<AppContextValue> = {}): AppContextVa
     isCurrentWorkspaceEditor: false,
     isCurrentWorkspaceDatasetOperator: false,
     mutateUserProfile: vi.fn(),
-    mutateCurrentWorkspace: vi.fn(),
     langGeniusVersionInfo,
     isLoadingCurrentWorkspace: false,
-    isValidatingCurrentWorkspace: false,
   }
   const useSelector: AppContextValue['useSelector'] = selector => selector({ ...base, useSelector })
   return {

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

@@ -193,107 +193,4 @@ 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/pricing/plans/cloud-plan-item/index.spec.tsx

@@ -66,6 +66,13 @@ beforeAll(() => {
   })
 })
 
+afterAll(() => {
+  Object.defineProperty(window, 'location', {
+    configurable: true,
+    value: originalLocation,
+  })
+})
+
 beforeEach(() => {
   vi.clearAllMocks()
   mockUseAppContext.mockReturnValue({ isCurrentWorkspaceManager: true })
@@ -75,13 +82,6 @@ beforeEach(() => {
   assignedHref = ''
 })
 
-afterAll(() => {
-  Object.defineProperty(window, 'location', {
-    configurable: true,
-    value: originalLocation,
-  })
-})
-
 describe('CloudPlanItem', () => {
   // Static content for each plan
   describe('Rendering', () => {
@@ -192,128 +192,5 @@ 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/custom/custom-web-app-brand/index.spec.tsx

@@ -7,6 +7,7 @@ import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useProviderContext } from '@/context/provider-context'
 import { updateCurrentWorkspace } from '@/service/common'
+import { useInvalidateCurrentWorkspace } from '@/service/use-common'
 import CustomWebAppBrand from './index'
 
 vi.mock('@/app/components/base/toast', () => ({
@@ -15,6 +16,9 @@ vi.mock('@/app/components/base/toast', () => ({
 vi.mock('@/service/common', () => ({
   updateCurrentWorkspace: vi.fn(),
 }))
+vi.mock('@/service/use-common', () => ({
+  useInvalidateCurrentWorkspace: vi.fn(),
+}))
 vi.mock('@/context/app-context', () => ({
   useAppContext: vi.fn(),
 }))
@@ -37,6 +41,8 @@ const mockUseProviderContext = vi.mocked(useProviderContext)
 const mockUseGlobalPublicStore = vi.mocked(useGlobalPublicStore)
 const mockImageUpload = vi.mocked(imageUpload)
 const mockGetImageUploadErrorMessage = vi.mocked(getImageUploadErrorMessage)
+const mockInvalidateCurrentWorkspace = vi.fn()
+vi.mocked(useInvalidateCurrentWorkspace).mockReturnValue(mockInvalidateCurrentWorkspace)
 
 const defaultPlanUsage = {
   buildApps: 0,
@@ -62,7 +68,6 @@ describe('CustomWebAppBrand', () => {
           remove_webapp_brand: false,
         },
       },
-      mutateCurrentWorkspace: vi.fn(),
       isCurrentWorkspaceManager: true,
     } as any)
     mockUseProviderContext.mockReturnValue({
@@ -92,7 +97,6 @@ describe('CustomWebAppBrand', () => {
           remove_webapp_brand: false,
         },
       },
-      mutateCurrentWorkspace: vi.fn(),
       isCurrentWorkspaceManager: false,
     } as any)
 
@@ -101,8 +105,7 @@ describe('CustomWebAppBrand', () => {
     expect(fileInput).toBeDisabled()
   })
 
-  it('toggles remove brand switch and calls the backend + mutate', async () => {
-    const mutateMock = vi.fn()
+  it('toggles remove brand switch and calls the backend + invalidate', async () => {
     mockUseAppContext.mockReturnValue({
       currentWorkspace: {
         custom_config: {
@@ -110,7 +113,6 @@ describe('CustomWebAppBrand', () => {
           remove_webapp_brand: false,
         },
       },
-      mutateCurrentWorkspace: mutateMock,
       isCurrentWorkspaceManager: true,
     } as any)
 
@@ -122,7 +124,7 @@ describe('CustomWebAppBrand', () => {
       url: '/workspaces/custom-config',
       body: { remove_webapp_brand: true },
     }))
-    await waitFor(() => expect(mutateMock).toHaveBeenCalled())
+    await waitFor(() => expect(mockInvalidateCurrentWorkspace).toHaveBeenCalled())
   })
 
   it('shows cancel/apply buttons after successful upload and cancels properly', async () => {

web/app/components/custom/custom-web-app-brand/index.tsx

@@ -24,6 +24,7 @@ import { useProviderContext } from '@/context/provider-context'
 import {
   updateCurrentWorkspace,
 } from '@/service/common'
+import { useInvalidateCurrentWorkspace } from '@/service/use-common'
 import { cn } from '@/utils/classnames'
 
 const ALLOW_FILE_EXTENSIONS = ['svg', 'png']
@@ -34,9 +35,9 @@ const CustomWebAppBrand = () => {
   const { plan, enableBilling } = useProviderContext()
   const {
     currentWorkspace,
-    mutateCurrentWorkspace,
     isCurrentWorkspaceManager,
   } = useAppContext()
+  const invalidateCurrentWorkspace = useInvalidateCurrentWorkspace()
   const [fileId, setFileId] = useState('')
   const [imgKey, setImgKey] = useState(() => Date.now())
   const [uploadProgress, setUploadProgress] = useState(0)
@@ -83,7 +84,7 @@ const CustomWebAppBrand = () => {
         replace_webapp_logo: fileId,
       },
     })
-    mutateCurrentWorkspace()
+    invalidateCurrentWorkspace()
     setFileId('')
     setImgKey(Date.now())
   }
@@ -96,7 +97,7 @@ const CustomWebAppBrand = () => {
         replace_webapp_logo: '',
       },
     })
-    mutateCurrentWorkspace()
+    invalidateCurrentWorkspace()
   }
 
   const handleSwitch = async (checked: boolean) => {
@@ -106,7 +107,7 @@ const CustomWebAppBrand = () => {
         remove_webapp_brand: checked,
       },
     })
-    mutateCurrentWorkspace()
+    invalidateCurrentWorkspace()
   }
 
   const handleCancel = () => {
@@ -116,7 +117,7 @@ const CustomWebAppBrand = () => {
 
   return (
     <div className="py-4">
-      <div className="system-md-medium mb-2 flex items-center justify-between rounded-xl bg-background-section-burn p-4 text-text-primary">
+      <div className="mb-2 flex items-center justify-between rounded-xl bg-background-section-burn p-4 text-text-primary system-md-medium">
         {t('webapp.removeBrand', { ns: 'custom' })}
         <Switch
           size="l"
@@ -127,8 +128,8 @@ const CustomWebAppBrand = () => {
       </div>
       <div className={cn('flex h-14 items-center justify-between rounded-xl bg-background-section-burn px-4', webappBrandRemoved && 'opacity-30')}>
         <div>
-          <div className="system-md-medium text-text-primary">{t('webapp.changeLogo', { ns: 'custom' })}</div>
-          <div className="system-xs-regular text-text-tertiary">{t('webapp.changeLogoTip', { ns: 'custom' })}</div>
+          <div className="text-text-primary system-md-medium">{t('webapp.changeLogo', { ns: 'custom' })}</div>
+          <div className="text-text-tertiary system-xs-regular">{t('webapp.changeLogoTip', { ns: 'custom' })}</div>
         </div>
         <div className="flex items-center">
           {(!uploadDisabled && webappLogo && !webappBrandRemoved) && (
@@ -204,7 +205,7 @@ const CustomWebAppBrand = () => {
         <div className="mt-2 text-xs text-[#D92D20]">{t('uploadedFail', { ns: 'custom' })}</div>
       )}
       <div className="mb-2 mt-5 flex items-center gap-2">
-        <div className="system-xs-medium-uppercase shrink-0 text-text-tertiary">{t('overview.appInfo.preview', { ns: 'appOverview' })}</div>
+        <div className="shrink-0 text-text-tertiary system-xs-medium-uppercase">{t('overview.appInfo.preview', { ns: 'appOverview' })}</div>
         <Divider bgStyle="gradient" className="grow" />
       </div>
       <div className="relative mb-2 flex items-center gap-3">
@@ -215,7 +216,7 @@ const CustomWebAppBrand = () => {
               <div className={cn('inline-flex h-8 w-8 items-center justify-center rounded-lg border border-divider-regular', 'bg-components-icon-bg-blue-light-solid')}>
                 <BubbleTextMod className="h-4 w-4 text-components-avatar-shape-fill-stop-100" />
               </div>
-              <div className="system-md-semibold grow text-text-secondary">Chatflow App</div>
+              <div className="grow text-text-secondary system-md-semibold">Chatflow App</div>
               <div className="p-1.5">
                 <RiLayoutLeft2Line className="h-4 w-4 text-text-tertiary" />
               </div>
@@ -246,7 +247,7 @@ const CustomWebAppBrand = () => {
               <div className="flex items-center gap-1.5">
                 {!webappBrandRemoved && (
                   <>
-                    <div className="system-2xs-medium-uppercase text-text-tertiary">POWERED BY</div>
+                    <div className="text-text-tertiary system-2xs-medium-uppercase">POWERED BY</div>
                     {
                       systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
                         ? <img src={systemFeatures.branding.workspace_logo} alt="logo" className="block h-5 w-auto" />
@@ -262,12 +263,12 @@ const CustomWebAppBrand = () => {
           <div className="flex w-[138px] grow flex-col justify-between p-2 pr-0">
             <div className="flex grow flex-col justify-between rounded-l-2xl border-[0.5px] border-r-0 border-components-panel-border-subtle bg-chatbot-bg pb-4 pl-[22px] pt-16">
               <div className="w-[720px] rounded-2xl border border-divider-subtle bg-chat-bubble-bg px-4 py-3">
-                <div className="body-md-regular mb-1 text-text-primary">Hello! How can I assist you today?</div>
+                <div className="mb-1 text-text-primary body-md-regular">Hello! How can I assist you today?</div>
                 <Button size="small">
                   <div className="h-2 w-[144px] rounded-sm bg-text-quaternary opacity-20"></div>
                 </Button>
               </div>
-              <div className="body-lg-regular flex h-[52px] w-[578px] items-center rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pl-3.5 text-text-placeholder shadow-md backdrop-blur-sm">Talk to Dify</div>
+              <div className="flex h-[52px] w-[578px] items-center rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur pl-3.5 text-text-placeholder shadow-md backdrop-blur-sm body-lg-regular">Talk to Dify</div>
             </div>
           </div>
         </div>
@@ -278,14 +279,14 @@ const CustomWebAppBrand = () => {
               <div className={cn('inline-flex h-8 w-8 items-center justify-center rounded-lg border border-divider-regular', 'bg-components-icon-bg-indigo-solid')}>
                 <RiExchange2Fill className="h-4 w-4 text-components-avatar-shape-fill-stop-100" />
               </div>
-              <div className="system-md-semibold grow text-text-secondary">Workflow App</div>
+              <div className="grow text-text-secondary system-md-semibold">Workflow App</div>
               <div className="p-1.5">
                 <RiLayoutLeft2Line className="h-4 w-4 text-text-tertiary" />
               </div>
             </div>
             <div className="flex items-center gap-4">
-              <div className="system-md-semibold-uppercase flex h-10 shrink-0 items-center border-b-2 border-components-tab-active text-text-primary">RUN ONCE</div>
-              <div className="system-md-semibold-uppercase flex h-10 grow items-center border-b-2 border-transparent text-text-tertiary">RUN BATCH</div>
+              <div className="flex h-10 shrink-0 items-center border-b-2 border-components-tab-active text-text-primary system-md-semibold-uppercase">RUN ONCE</div>
+              <div className="flex h-10 grow items-center border-b-2 border-transparent text-text-tertiary system-md-semibold-uppercase">RUN BATCH</div>
             </div>
           </div>
           <div className="grow bg-components-panel-bg">
@@ -293,7 +294,7 @@ const CustomWebAppBrand = () => {
               <div className="mb-1 py-2">
                 <div className="h-2 w-20 rounded-sm bg-text-quaternary opacity-20"></div>
               </div>
-              <div className="h-16 w-full rounded-lg bg-components-input-bg-normal "></div>
+              <div className="h-16 w-full rounded-lg bg-components-input-bg-normal"></div>
             </div>
             <div className="flex items-center justify-between px-4 py-3">
               <Button size="small">
@@ -308,7 +309,7 @@ const CustomWebAppBrand = () => {
           <div className="flex h-12 shrink-0 items-center gap-1.5 bg-components-panel-bg p-4 pt-3">
             {!webappBrandRemoved && (
               <>
-                <div className="system-2xs-medium-uppercase text-text-tertiary">POWERED BY</div>
+                <div className="text-text-tertiary system-2xs-medium-uppercase">POWERED BY</div>
                 {
                   systemFeatures.branding.enabled && systemFeatures.branding.workspace_logo
                     ? <img src={systemFeatures.branding.workspace_logo} alt="logo" className="block h-5 w-auto" />

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

@@ -6,10 +6,9 @@ import {
   RiBrainLine,
 } from '@remixicon/react'
 import { useDebounce } from 'ahooks'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { IS_CLOUD_EDITION } from '@/config'
-import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useProviderContext } from '@/context/provider-context'
 import { cn } from '@/utils/classnames'
@@ -34,7 +33,6 @@ const FixedModelProvider = ['langgenius/openai/openai', 'langgenius/anthropic/an
 const ModelProviderPage = ({ searchText }: Props) => {
   const debouncedSearchText = useDebounce(searchText, { wait: 500 })
   const { t } = useTranslation()
-  const { mutateCurrentWorkspace, isValidatingCurrentWorkspace } = useAppContext()
   const { data: textGenerationDefaultModel, isLoading: isTextGenerationDefaultModelLoading } = useDefaultModel(ModelTypeEnum.textGeneration)
   const { data: embeddingsDefaultModel, isLoading: isEmbeddingsDefaultModelLoading } = useDefaultModel(ModelTypeEnum.textEmbedding)
   const { data: rerankDefaultModel, isLoading: isRerankDefaultModelLoading } = useDefaultModel(ModelTypeEnum.rerank)
@@ -92,14 +90,10 @@ const ModelProviderPage = ({ searchText }: Props) => {
     return [filteredConfiguredProviders, filteredNotConfiguredProviders]
   }, [configuredProviders, debouncedSearchText, notConfiguredProviders])
 
-  useEffect(() => {
-    mutateCurrentWorkspace()
-  }, [mutateCurrentWorkspace])
-
   return (
     <div className="relative -mt-2 pt-1">
       <div className={cn('mb-2 flex items-center')}>
-        <div className="system-md-semibold grow text-text-primary">{t('modelProvider.models', { ns: 'common' })}</div>
+        <div className="grow text-text-primary system-md-semibold">{t('modelProvider.models', { ns: 'common' })}</div>
         <div className={cn(
           'relative flex shrink-0 items-center justify-end gap-2 rounded-lg border border-transparent p-px',
           defaultModelNotConfigured && 'border-components-panel-border bg-components-panel-bg-blur pl-2 shadow-xs',
@@ -107,7 +101,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
         >
           {defaultModelNotConfigured && <div className="absolute bottom-0 left-0 right-0 top-0 opacity-40" style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }} />}
           {defaultModelNotConfigured && (
-            <div className="system-xs-medium flex items-center gap-1 text-text-primary">
+            <div className="flex items-center gap-1 text-text-primary system-xs-medium">
               <RiAlertFill className="h-4 w-4 text-text-warning-secondary" />
               <span className="max-w-[460px] truncate" title={t('modelProvider.notConfigured', { ns: 'common' })}>{t('modelProvider.notConfigured', { ns: 'common' })}</span>
             </div>
@@ -123,14 +117,14 @@ const ModelProviderPage = ({ searchText }: Props) => {
           />
         </div>
       </div>
-      {IS_CLOUD_EDITION && <QuotaPanel providers={providers} isLoading={isValidatingCurrentWorkspace} />}
+      {IS_CLOUD_EDITION && <QuotaPanel providers={providers} />}
       {!filteredConfiguredProviders?.length && (
         <div className="mb-2 rounded-[10px] bg-workflow-process-bg p-4">
           <div className="flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur">
             <RiBrainLine className="h-5 w-5 text-text-primary" />
           </div>
-          <div className="system-sm-medium mt-2 text-text-secondary">{t('modelProvider.emptyProviderTitle', { ns: 'common' })}</div>
-          <div className="system-xs-regular mt-1 text-text-tertiary">{t('modelProvider.emptyProviderTip', { ns: 'common' })}</div>
+          <div className="mt-2 text-text-secondary system-sm-medium">{t('modelProvider.emptyProviderTitle', { ns: 'common' })}</div>
+          <div className="mt-1 text-text-tertiary system-xs-regular">{t('modelProvider.emptyProviderTip', { ns: 'common' })}</div>
         </div>
       )}
       {!!filteredConfiguredProviders?.length && (
@@ -145,7 +139,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
       )}
       {!!filteredNotConfiguredProviders?.length && (
         <>
-          <div className="system-md-semibold mb-2 flex items-center pt-2 text-text-primary">{t('modelProvider.toBeConfigured', { ns: 'common' })}</div>
+          <div className="mb-2 flex items-center pt-2 text-text-primary system-md-semibold">{t('modelProvider.toBeConfigured', { ns: 'common' })}</div>
           <div className="relative">
             {filteredNotConfiguredProviders?.map(provider => (
               <ProviderAddedCard

web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx

@@ -48,11 +48,9 @@ const providerKeyToPluginId: Record<ModelProviderQuotaGetPaid, string> = {
 
 type QuotaPanelProps = {
   providers: ModelProvider[]
-  isLoading?: boolean
 }
 const QuotaPanel: FC<QuotaPanelProps> = ({
   providers,
-  isLoading = false,
 }) => {
   const { t } = useTranslation()
   const { currentWorkspace } = useAppContext()
@@ -98,7 +96,7 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
     }
   }, [providers, isShowInstallModal, hideInstallFromMarketplace])
 
-  if (isLoading) {
+  if (!currentWorkspace.id) {
     return (
       <div className="my-2 flex min-h-[72px] items-center justify-center rounded-xl border-[0.5px] border-components-panel-border bg-third-party-model-bg-default shadow-xs">
         <Loading />
@@ -108,13 +106,13 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
 
   return (
     <div className={cn('my-2 min-w-[72px] shrink-0 rounded-xl border-[0.5px] pb-2.5 pl-4 pr-2.5 pt-3 shadow-xs', credits <= 0 ? 'border-state-destructive-border hover:bg-state-destructive-hover' : 'border-components-panel-border bg-third-party-model-bg-default')}>
-      <div className="system-xs-medium-uppercase mb-2 flex h-4 items-center text-text-tertiary">
+      <div className="mb-2 flex h-4 items-center text-text-tertiary system-xs-medium-uppercase">
         {t('modelProvider.quota', { ns: 'common' })}
         <Tooltip popupContent={t('modelProvider.card.tip', { ns: 'common', modelNames: trial_models.map(key => modelNameMap[key as keyof typeof modelNameMap]).filter(Boolean).join(', ') })} />
       </div>
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-1 text-xs text-text-tertiary">
-          <span className="system-md-semibold-uppercase mr-0.5 text-text-secondary">{formatNumber(credits)}</span>
+          <span className="mr-0.5 text-text-secondary system-md-semibold-uppercase">{formatNumber(credits)}</span>
           <span>{t('modelProvider.credits', { ns: 'common' })}</span>
           {currentWorkspace.next_credit_reset_date
             ? (

web/context/app-context.tsx

@@ -25,11 +25,9 @@ export type AppContextValue = {
   isCurrentWorkspaceOwner: boolean
   isCurrentWorkspaceEditor: boolean
   isCurrentWorkspaceDatasetOperator: boolean
-  mutateCurrentWorkspace: VoidFunction
   langGeniusVersionInfo: LangGeniusVersionResponse
   useSelector: typeof useSelector
   isLoadingCurrentWorkspace: boolean
-  isValidatingCurrentWorkspace: boolean
 }
 
 const userProfilePlaceholder = {
@@ -72,11 +70,9 @@ const AppContext = createContext<AppContextValue>({
   isCurrentWorkspaceEditor: false,
   isCurrentWorkspaceDatasetOperator: false,
   mutateUserProfile: noop,
-  mutateCurrentWorkspace: noop,
   langGeniusVersionInfo: initialLangGeniusVersionInfo,
   useSelector,
   isLoadingCurrentWorkspace: false,
-  isValidatingCurrentWorkspace: false,
 })
 
 export function useSelector<T>(selector: (value: AppContextValue) => T): T {
@@ -91,7 +87,7 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) =>
   const queryClient = useQueryClient()
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
   const { data: userProfileResp } = useUserProfile()
-  const { data: currentWorkspaceResp, isPending: isLoadingCurrentWorkspace, isFetching: isValidatingCurrentWorkspace } = useCurrentWorkspace()
+  const { data: currentWorkspaceResp, isPending: isLoadingCurrentWorkspace } = useCurrentWorkspace()
   const langGeniusVersionQuery = useLangGeniusVersion(
     userProfileResp?.meta.currentVersion,
     !systemFeatures.branding.enabled,
@@ -123,10 +119,6 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) =>
     queryClient.invalidateQueries({ queryKey: ['common', 'user-profile'] })
   }, [queryClient])
 
-  const mutateCurrentWorkspace = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: ['common', 'current-workspace'] })
-  }, [queryClient])
-
   // #region Zendesk conversation fields
   useEffect(() => {
     if (ZENDESK_FIELD_IDS.ENVIRONMENT && langGeniusVersionInfo?.current_env) {
@@ -198,9 +190,7 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) =>
       isCurrentWorkspaceOwner,
       isCurrentWorkspaceEditor,
       isCurrentWorkspaceDatasetOperator,
-      mutateCurrentWorkspace,
       isLoadingCurrentWorkspace,
-      isValidatingCurrentWorkspace,
     }}
     >
       <div className="flex h-full flex-col overflow-y-auto">

web/eslint-rules/index.js

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

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

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

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

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

web/eslint-suppressions.json

@@ -3002,6 +3002,11 @@
       "count": 1
     }
   },
+  "app/components/billing/pricing/plans/cloud-plan-item/index.spec.tsx": {
+    "test/prefer-hooks-in-order": {
+      "count": 1
+    }
+  },
   "app/components/billing/pricing/plans/cloud-plan-item/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 6
@@ -3076,12 +3081,6 @@
     }
   },
   "app/components/custom/custom-web-app-brand/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 12
-    },
-    "tailwindcss/no-unnecessary-whitespace": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 2
     }
@@ -4526,11 +4525,6 @@
       "count": 3
     }
   },
-  "app/components/header/account-setting/model-provider-page/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
   "app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 3
@@ -4734,11 +4728,6 @@
       "count": 3
     }
   },
-  "app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/header/account-setting/model-provider-page/provider-icon/index.tsx": {
     "tailwindcss/enforce-consistent-class-order": {
       "count": 1

web/eslint.config.mjs

@@ -2,7 +2,6 @@
 import antfu, { GLOB_TESTS, GLOB_TS, GLOB_TSX } from '@antfu/eslint-config'
 import pluginQuery from '@tanstack/eslint-plugin-query'
 import tailwindcss from 'eslint-plugin-better-tailwindcss'
-import hyoban from 'eslint-plugin-hyoban'
 import sonar from 'eslint-plugin-sonarjs'
 import storybook from 'eslint-plugin-storybook'
 import dify from './eslint-rules/index.js'
@@ -81,47 +80,7 @@ export default antfu(
     },
   },
   {
-    name: 'dify/custom/setup',
-    plugins: {
-      dify,
-      hyoban,
-    },
-  },
-  {
-    files: ['**/*.tsx'],
-    rules: {
-      'hyoban/prefer-tailwind-icons': ['warn', {
-        prefix: 'i-',
-        propMappings: {
-          size: 'size',
-          width: 'w',
-          height: 'h',
-        },
-        libraries: [
-          {
-            prefix: 'i-custom-',
-            source: '^@/app/components/base/icons/src/(?<set>(?:public|vender)(?:/.*)?)$',
-            name: '^(?<name>.*)$',
-          },
-          {
-            source: '^@remixicon/react$',
-            name: '^(?<set>Ri)(?<name>.+)$',
-          },
-          {
-            source: '^@(?<set>heroicons)/react/24/outline$',
-            name: '^(?<name>.*)Icon$',
-          },
-          {
-            source: '^@(?<set>heroicons)/react/24/(?<variant>solid)$',
-            name: '^(?<name>.*)Icon$',
-          },
-          {
-            source: '^@(?<set>heroicons)/react/(?<variant>\\d+/(?:solid|outline))$',
-            name: '^(?<name>.*)Icon$',
-          },
-        ],
-      }],
-    },
+    plugins: { dify },
   },
   {
     files: ['i18n/**/*.json'],
@@ -130,7 +89,7 @@ export default antfu(
       'max-lines': 'off',
       'jsonc/sort-keys': 'error',
 
-      'hyoban/i18n-flat-key': 'error',
+      'dify/valid-i18n-keys': 'error',
       'dify/no-extra-keys': 'error',
       'dify/consistent-placeholders': 'error',
     },
@@ -138,7 +97,7 @@ export default antfu(
   {
     files: ['**/package.json'],
     rules: {
-      'hyoban/no-dependency-version-prefix': 'error',
+      'dify/no-version-prefix': 'error',
     },
   },
 )

web/package.json

@@ -31,8 +31,8 @@
     "build": "next build",
     "build:docker": "next build && node scripts/optimize-standalone.js",
     "start": "node ./scripts/copy-and-start.mjs",
-    "lint": "eslint --cache --concurrency=auto",
-    "lint:ci": "eslint --cache --concurrency 2",
+    "lint": "eslint --cache --concurrency=\"auto\"",
+    "lint:ci": "eslint --cache --concurrency 3",
     "lint:fix": "pnpm lint --fix",
     "lint:quiet": "pnpm lint --quiet",
     "lint:complexity": "pnpm lint --rule 'complexity: [error, {max: 15}]' --quiet",
@@ -166,10 +166,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "7.2.0",
     "@chromatic-com/storybook": "5.0.0",
-    "@egoist/tailwindcss-icons": "1.9.2",
     "@eslint-react/eslint-plugin": "2.9.4",
-    "@iconify-json/heroicons": "1.2.3",
-    "@iconify-json/ri": "1.2.9",
     "@mdx-js/loader": "3.1.1",
     "@mdx-js/react": "3.1.1",
     "@next/bundle-analyzer": "16.1.5",
@@ -197,7 +194,7 @@
     "@types/js-cookie": "3.0.6",
     "@types/js-yaml": "4.0.9",
     "@types/negotiator": "0.6.4",
-    "@types/node": "24.10.12",
+    "@types/node": "18.15.0",
     "@types/postcss-js": "4.1.0",
     "@types/qs": "6.14.0",
     "@types/react": "19.2.9",
@@ -217,14 +214,12 @@
     "cross-env": "10.1.0",
     "esbuild": "0.27.2",
     "eslint": "9.39.2",
-    "eslint-plugin-better-tailwindcss": "https://pkg.pr.new/hyoban/eslint-plugin-better-tailwindcss@c0161c7",
-    "eslint-plugin-hyoban": "0.11.1",
+    "eslint-plugin-better-tailwindcss": "4.1.1",
     "eslint-plugin-react-hooks": "7.0.1",
     "eslint-plugin-react-refresh": "0.5.0",
     "eslint-plugin-sonarjs": "3.0.6",
     "eslint-plugin-storybook": "10.2.6",
     "husky": "9.1.7",
-    "iconify-import-svg": "0.1.1",
     "jsdom": "27.3.0",
     "jsdom-testing-mocks": "1.16.0",
     "knip": "5.78.0",

web/service/use-common.ts

@@ -318,6 +318,10 @@ export const useInvalidDataSourceIntegrates = () => {
   return useInvalid(commonQueryKeys.dataSourceIntegrates)
 }
 
+export const useInvalidateCurrentWorkspace = () => {
+  return useInvalid(commonQueryKeys.currentWorkspace)
+}
+
 export const usePluginProviders = () => {
   return useQuery<PluginProvider[] | null>({
     queryKey: commonQueryKeys.pluginProviders,

web/tailwind-common-config.ts

@@ -1,8 +1,6 @@
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
-import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons'
 import tailwindTypography from '@tailwindcss/typography'
-import { importSvgCollections } from 'iconify-import-svg'
 // @ts-expect-error workaround for turbopack issue
 import { cssAsPlugin } from './tailwind-css-plugin.ts'
 // @ts-expect-error workaround for turbopack issue
@@ -160,26 +158,6 @@ const config = {
   },
   plugins: [
     tailwindTypography,
-    iconsPlugin({
-      collections: {
-        ...getIconCollections(['heroicons', 'ri']),
-        ...importSvgCollections({
-          source: path.resolve(_dirname, 'app/components/base/icons/assets/public'),
-          prefix: 'custom-public',
-          ignoreImportErrors: true,
-        }),
-        ...importSvgCollections({
-          source: path.resolve(_dirname, 'app/components/base/icons/assets/vender'),
-          prefix: 'custom-vender',
-          ignoreImportErrors: true,
-        }),
-      },
-      extraProperties: {
-        width: '1rem',
-        height: '1rem',
-        display: 'block',
-      },
-    }),
     cssAsPlugin([
       path.resolve(_dirname, './app/styles/globals.css'),
     ]),