refactor(core): initial multiple servers infra (#8745)

This is the initial refactoring of affine to support multiple servers, but many more changes are needed to make multi-server actually work.

packages/common/infra/src/modules/workspace/providers/flavour.ts

@@ -10,6 +10,7 @@ import type {
   DocStorage,
 } from '../../../sync';
 import type { WorkspaceProfileInfo } from '../entities/profile';
+import type { Workspace } from '../entities/workspace';
 import type { WorkspaceMetadata } from '../metadata';
 
 export interface WorkspaceEngineProvider {
@@ -55,6 +56,8 @@ export interface WorkspaceFlavourProvider {
   getWorkspaceBlob(id: string, blob: string): Promise<Blob | null>;
 
   getEngineProvider(workspaceId: string): WorkspaceEngineProvider;
+
+  onWorkspaceInitialized?(workspace: Workspace): void;
 }
 
 export const WorkspaceFlavourProvider =

packages/common/infra/src/modules/workspace/services/repo.ts

@@ -83,11 +83,12 @@ export class WorkspaceRepositoryService extends Service {
     logger.info(
       `open workspace [${openOptions.metadata.flavour}] ${openOptions.metadata.id} `
     );
+    const flavourProvider = this.providers.find(
+      p => p.flavour === openOptions.metadata.flavour
+    );
     const provider =
       customProvider ??
-      this.providers
-        .find(p => p.flavour === openOptions.metadata.flavour)
-        ?.getEngineProvider(openOptions.metadata.id);
+      flavourProvider?.getEngineProvider(openOptions.metadata.id);
     if (!provider) {
       throw new Error(
         `Unknown workspace flavour: ${openOptions.metadata.flavour}`
@@ -106,6 +107,8 @@ export class WorkspaceRepositoryService extends Service {
 
     this.framework.emitEvent(WorkspaceInitialized, workspace);
 
+    flavourProvider?.onWorkspaceInitialized?.(workspace);
+
     this.profileRepo
       .getProfile(openOptions.metadata)
       .syncWithWorkspace(workspace);

packages/frontend/apps/ios/src/fetch.ts

@@ -3,7 +3,7 @@
  *
  * for support arraybuffer response type
  */
-import { FetchProvider } from '@affine/core/modules/cloud/provider/fetch';
+import { RawFetchProvider } from '@affine/core/modules/cloud/provider/fetch';
 import { CapacitorHttp } from '@capacitor/core';
 import type { Framework } from '@toeverything/infra';
 
@@ -121,7 +121,7 @@ function base64ToUint8Array(base64: string) {
   return new Uint8Array(binaryArray);
 }
 export function configureFetchProvider(framework: Framework) {
-  framework.override(FetchProvider, {
+  framework.override(RawFetchProvider, {
     fetch: async (input, init) => {
       const request = new Request(input, init);
       const { method } = request;

packages/frontend/component/src/components/auth-components/confirm-change-email.tsx

@@ -1,22 +0,0 @@
-import { useI18n } from '@affine/i18n';
-import type { FC } from 'react';
-
-import { Button } from '../../ui/button';
-import { AuthPageContainer } from './auth-page-container';
-
-export const ConfirmChangeEmail: FC<{
-  onOpenAffine: () => void;
-}> = ({ onOpenAffine }) => {
-  const t = useI18n();
-
-  return (
-    <AuthPageContainer
-      title={t['com.affine.auth.change.email.page.success.title']()}
-      subtitle={t['com.affine.auth.change.email.page.success.subtitle']()}
-    >
-      <Button variant="primary" size="large" onClick={onOpenAffine}>
-        {t['com.affine.auth.open.affine']()}
-      </Button>
-    </AuthPageContainer>
-  );
-};

packages/frontend/component/src/components/auth-components/email-verified-email.tsx

@@ -1,22 +0,0 @@
-import { useI18n } from '@affine/i18n';
-import type { FC } from 'react';
-
-import { Button } from '../../ui/button';
-import { AuthPageContainer } from './auth-page-container';
-
-export const ConfirmVerifiedEmail: FC<{
-  onOpenAffine: () => void;
-}> = ({ onOpenAffine }) => {
-  const t = useI18n();
-
-  return (
-    <AuthPageContainer
-      title={t['com.affine.auth.change.email.page.success.title']()}
-      subtitle={t['com.affine.auth.change.email.page.success.subtitle']()}
-    >
-      <Button variant="primary" size="large" onClick={onOpenAffine}>
-        {t['com.affine.auth.open.affine']()}
-      </Button>
-    </AuthPageContainer>
-  );
-};

packages/frontend/component/src/components/auth-components/index.tsx

@@ -4,9 +4,7 @@ export * from './auth-page-container';
 export * from './back-button';
 export * from './change-email-page';
 export * from './change-password-page';
-export * from './confirm-change-email';
 export * from './count-down-render';
-export * from './email-verified-email';
 export * from './modal';
 export * from './modal-header';
 export * from './onboarding-page';

packages/frontend/core/src/components/affine/auth/oauth.tsx

@@ -1,5 +1,6 @@
 import { Skeleton } from '@affine/component';
 import { Button } from '@affine/component/ui/button';
+import { ServerService } from '@affine/core/modules/cloud';
 import { UrlService } from '@affine/core/modules/url';
 import { OAuthProviderType } from '@affine/graphql';
 import track from '@affine/track';
@@ -7,8 +8,6 @@ import { GithubIcon, GoogleDuotoneIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { type ReactElement, useCallback } from 'react';
 
-import { ServerConfigService } from '../../../modules/cloud';
-
 const OAuthProviderMap: Record<
   OAuthProviderType,
   {
@@ -30,11 +29,11 @@ const OAuthProviderMap: Record<
 };
 
 export function OAuth({ redirectUrl }: { redirectUrl?: string }) {
-  const serverConfig = useService(ServerConfigService).serverConfig;
+  const serverService = useService(ServerService);
   const urlService = useService(UrlService);
-  const oauth = useLiveData(serverConfig.features$.map(r => r?.oauth));
+  const oauth = useLiveData(serverService.server.features$.map(r => r?.oauth));
   const oauthProviders = useLiveData(
-    serverConfig.config$.map(r => r?.oauthProviders)
+    serverService.server.config$.map(r => r?.oauthProviders)
   );
   const scheme = urlService.getClientScheme();
 
@@ -66,6 +65,7 @@ function OAuthProvider({
   scheme?: string;
   popupWindow: (url: string) => void;
 }) {
+  const serverService = useService(ServerService);
   const { icon } = OAuthProviderMap[provider];
 
   const onClick = useCallback(() => {
@@ -85,12 +85,12 @@ function OAuthProvider({
     // if (BUILD_CONFIG.isAndroid) {}
 
     const oauthUrl =
-      BUILD_CONFIG.serverUrlPrefix + `/oauth/login?${params.toString()}`;
+      serverService.server.baseUrl + `/oauth/login?${params.toString()}`;
 
     track.$.$.auth.signIn({ method: 'oauth', provider });
 
     popupWindow(oauthUrl);
-  }, [popupWindow, provider, redirectUrl, scheme]);
+  }, [popupWindow, provider, redirectUrl, scheme, serverService]);
 
   return (
     <Button

packages/frontend/core/src/components/affine/auth/send-email.tsx

@@ -18,7 +18,7 @@ import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useState } from 'react';
 
 import { useMutation } from '../../../components/hooks/use-mutation';
-import { ServerConfigService } from '../../../modules/cloud';
+import { ServerService } from '../../../modules/cloud';
 import type { AuthPanelProps } from './index';
 
 const useEmailTitle = (emailType: AuthPanelProps<'sendEmail'>['emailType']) => {
@@ -142,10 +142,10 @@ export const SendEmail = ({
   // todo(@pengx17): impl redirectUrl for sendEmail?
 }: AuthPanelProps<'sendEmail'>) => {
   const t = useI18n();
-  const serverConfig = useService(ServerConfigService).serverConfig;
+  const serverService = useService(ServerService);
 
   const passwordLimits = useLiveData(
-    serverConfig.credentialsRequirement$.map(r => r?.password)
+    serverService.server.credentialsRequirement$.map(r => r?.password)
   );
   const [hasSentEmail, setHasSentEmail] = useState(false);
 

packages/frontend/core/src/components/affine/auth/user-plan-button.tsx

@@ -1,13 +1,10 @@
 import { Tooltip } from '@affine/component/ui/tooltip';
 import { SubscriptionPlan } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
-import { useLiveData, useServices } from '@toeverything/infra';
+import { useLiveData, useService } from '@toeverything/infra';
 import { type SyntheticEvent, useEffect } from 'react';
 
-import {
-  ServerConfigService,
-  SubscriptionService,
-} from '../../../modules/cloud';
+import { ServerService, SubscriptionService } from '../../../modules/cloud';
 import * as styles from './style.css';
 
 export const UserPlanButton = ({
@@ -15,13 +12,11 @@ export const UserPlanButton = ({
 }: {
   onClick: (e: SyntheticEvent<Element, Event>) => void;
 }) => {
-  const { serverConfigService, subscriptionService } = useServices({
-    ServerConfigService,
-    SubscriptionService,
-  });
+  const serverService = useService(ServerService);
+  const subscriptionService = useService(SubscriptionService);
 
   const hasPayment = useLiveData(
-    serverConfigService.serverConfig.features$.map(r => r?.payment)
+    serverService.server.features$.map(r => r?.payment)
   );
   const plan = useLiveData(
     subscriptionService.subscription.pro$.map(subscription =>

packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx

@@ -6,7 +6,7 @@ import {
   useSharingUrl,
 } from '@affine/core/components/hooks/affine/use-share-url';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
-import { ServerConfigService } from '@affine/core/modules/cloud';
+import { ServerService } from '@affine/core/modules/cloud';
 import { GlobalDialogService } from '@affine/core/modules/dialogs';
 import { EditorService } from '@affine/core/modules/editor';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
@@ -70,13 +70,13 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
   const currentMode = useLiveData(editor.mode$);
   const editorContainer = useLiveData(editor.editorContainer$);
   const shareInfoService = useService(ShareInfoService);
-  const serverConfig = useService(ServerConfigService).serverConfig;
+  const serverService = useService(ServerService);
   useEffect(() => {
     shareInfoService.shareInfo.revalidate();
   }, [shareInfoService]);
   const isSharedPage = useLiveData(shareInfoService.shareInfo.isShared$);
   const sharedMode = useLiveData(shareInfoService.shareInfo.sharedMode$);
-  const baseUrl = useLiveData(serverConfig.config$.map(c => c?.baseUrl));
+  const baseUrl = serverService.server.baseUrl;
   const isLoading =
     isSharedPage === null || sharedMode === null || baseUrl === null;
 

packages/frontend/core/src/components/blocksuite/block-suite-editor/ai/copilot-client.ts

@@ -3,12 +3,11 @@ import {
   cleanupCopilotSessionMutation,
   createCopilotMessageMutation,
   createCopilotSessionMutation,
-  fetcher as defaultFetcher,
   forkCopilotSessionMutation,
-  getBaseUrl,
   getCopilotHistoriesQuery,
   getCopilotHistoryIdsQuery,
   getCopilotSessionsQuery,
+  gqlFetcherFactory,
   GraphQLError,
   type GraphQLQuery,
   type QueryOptions,
@@ -22,6 +21,26 @@ import {
 } from '@blocksuite/affine/blocks';
 import { getCurrentStore } from '@toeverything/infra';
 
+/**
+ * @deprecated will be removed soon
+ */
+export function getBaseUrl(): string {
+  if (BUILD_CONFIG.isElectron || BUILD_CONFIG.isIOS || BUILD_CONFIG.isAndroid) {
+    return BUILD_CONFIG.serverUrlPrefix;
+  }
+  if (typeof window === 'undefined') {
+    // is nodejs
+    return '';
+  }
+  const { protocol, hostname, port } = window.location;
+  return `${protocol}//${hostname}${port ? `:${port}` : ''}`;
+}
+
+/**
+ * @deprecated will be removed soon
+ */
+const defaultFetcher = gqlFetcherFactory(getBaseUrl() + '/graphql');
+
 type OptionsField<T extends GraphQLQuery> =
   RequestOptions<T>['variables'] extends { options: infer U } ? U : never;
 

packages/frontend/core/src/components/blocksuite/block-suite-editor/ai/setup-provider.tsx

@@ -2,7 +2,6 @@ import { AIProvider } from '@affine/core/blocksuite/presets/ai';
 import { toggleGeneralAIOnboarding } from '@affine/core/components/affine/ai-onboarding/apis';
 import { authAtom } from '@affine/core/components/atoms';
 import {
-  getBaseUrl,
   type getCopilotHistoriesQuery,
   type RequestOptions,
 } from '@affine/graphql';
@@ -11,6 +10,7 @@ import { assertExists } from '@blocksuite/affine/global/utils';
 import { getCurrentStore } from '@toeverything/infra';
 import { z } from 'zod';
 
+import { getBaseUrl } from './copilot-client';
 import type { PromptKey } from './prompt';
 import {
   cleanupSessions,

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/database-block.ts

@@ -3,7 +3,7 @@ import {
   generateUrl,
   type UseSharingUrl,
 } from '@affine/core/components/hooks/affine/use-share-url';
-import { getAffineCloudBaseUrl } from '@affine/core/modules/cloud/services/fetch';
+import { ServerService } from '@affine/core/modules/cloud';
 import { EditorService } from '@affine/core/modules/editor';
 import { copyLinkToBlockStdScopeClipboard } from '@affine/core/utils/clipboard';
 import { I18n } from '@affine/i18n';
@@ -41,9 +41,7 @@ function createCopyLinkToBlockMenuItem(
       return mode === 'edgeless';
     },
     select: () => {
-      const baseUrl = getAffineCloudBaseUrl();
-      if (!baseUrl) return;
-
+      const serverService = framework.get(ServerService);
       const pageId = model.doc.id;
       const { editor } = framework.get(EditorService);
       const mode = editor.mode$.value;
@@ -58,7 +56,10 @@ function createCopyLinkToBlockMenuItem(
         blockIds: [model.id],
       };
 
-      const str = generateUrl(options);
+      const str = generateUrl({
+        ...options,
+        baseUrl: serverService.server.baseUrl,
+      });
       if (!str) return;
 
       const type = model.flavour;

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/widgets/toolbar.ts

@@ -3,7 +3,7 @@ import {
   generateUrl,
   type UseSharingUrl,
 } from '@affine/core/components/hooks/affine/use-share-url';
-import { getAffineCloudBaseUrl } from '@affine/core/modules/cloud/services/fetch';
+import { WorkspaceServerService } from '@affine/core/modules/cloud';
 import { EditorService } from '@affine/core/modules/editor';
 import { copyLinkToBlockStdScopeClipboard } from '@affine/core/utils/clipboard';
 import { I18n } from '@affine/i18n';
@@ -79,11 +79,7 @@ function createCopyLinkToBlockMenuItem(
   return {
     ...item,
     action: async (ctx: MenuContext) => {
-      const baseUrl = getAffineCloudBaseUrl();
-      if (!baseUrl) {
-        ctx.close();
-        return;
-      }
+      const workspaceServerService = framework.get(WorkspaceServerService);
 
       const { editor } = framework.get(EditorService);
       const mode = editor.mode$.value;
@@ -109,7 +105,10 @@ function createCopyLinkToBlockMenuItem(
         }
       }
 
-      const str = generateUrl(options);
+      const str = generateUrl({
+        ...options,
+        baseUrl: workspaceServerService.server?.baseUrl ?? location.origin,
+      });
       if (!str) {
         ctx.close();
         return;

packages/frontend/core/src/components/hooks/affine/use-share-url.ts

@@ -1,5 +1,5 @@
 import { notify } from '@affine/component';
-import { getAffineCloudBaseUrl } from '@affine/core/modules/cloud/services/fetch';
+import { ServerService } from '@affine/core/modules/cloud';
 import { toURLSearchParams } from '@affine/core/modules/navigation';
 import { copyTextToClipboard } from '@affine/core/utils/clipboard';
 import { useI18n } from '@affine/i18n';
@@ -7,6 +7,7 @@ import { track } from '@affine/track';
 import { type EditorHost } from '@blocksuite/affine/block-std';
 import { GfxBlockElementModel } from '@blocksuite/affine/block-std/gfx';
 import type { DocMode, EdgelessRootService } from '@blocksuite/affine/blocks';
+import { useService } from '@toeverything/infra';
 import { useCallback } from 'react';
 
 export type UseSharingUrl = {
@@ -24,17 +25,14 @@ export type UseSharingUrl = {
  * https://app.affine.pro/workspace/workspaceId/docId?mode=DocMode&elementIds=seletedElementIds&blockIds=selectedBlockIds
  */
 export const generateUrl = ({
+  baseUrl,
   workspaceId,
   pageId,
   blockIds,
   elementIds,
   shareMode: mode,
   xywh, // not needed currently
-}: UseSharingUrl) => {
-  // Base URL construction
-  const baseUrl = getAffineCloudBaseUrl();
-  if (!baseUrl) return null;
-
+}: UseSharingUrl & { baseUrl: string }) => {
   try {
     const url = new URL(`/workspace/${workspaceId}/${pageId}`, baseUrl);
     const search = toURLSearchParams({ mode, blockIds, elementIds, xywh });
@@ -130,10 +128,12 @@ export const getSelectedNodes = (
 
 export const useSharingUrl = ({ workspaceId, pageId }: UseSharingUrl) => {
   const t = useI18n();
+  const serverService = useService(ServerService);
 
   const onClickCopyLink = useCallback(
     (shareMode?: DocMode, blockIds?: string[], elementIds?: string[]) => {
       const sharingUrl = generateUrl({
+        baseUrl: serverService.server.baseUrl,
         workspaceId,
         pageId,
         blockIds,
@@ -160,7 +160,7 @@ export const useSharingUrl = ({ workspaceId, pageId }: UseSharingUrl) => {
         notify.error({ title: 'Network not available' });
       }
     },
-    [pageId, t, workspaceId]
+    [pageId, serverService, t, workspaceId]
   );
 
   return {

packages/frontend/core/src/components/hooks/use-mutation.ts

@@ -1,3 +1,4 @@
+import { GraphQLService } from '@affine/core/modules/cloud';
 import type {
   GraphQLQuery,
   MutationOptions,
@@ -5,7 +6,7 @@ import type {
   QueryVariables,
   RecursiveMaybeFields,
 } from '@affine/graphql';
-import { fetcher } from '@affine/graphql';
+import { useService } from '@toeverything/infra';
 import type { GraphQLError } from 'graphql';
 import { useMemo } from 'react';
 import type { Key } from 'swr';
@@ -51,10 +52,15 @@ export function useMutation(
   options: Omit<MutationOptions<GraphQLQuery>, 'variables'>,
   config?: any
 ) {
+  const graphqlService = useService(GraphQLService);
   return useSWRMutation(
     () => ['cloud', options.mutation.id],
     (_: unknown[], { arg }: { arg: any }) =>
-      fetcher({ ...options, query: options.mutation, variables: arg }),
+      graphqlService.gql({
+        ...options,
+        query: options.mutation,
+        variables: arg,
+      }),
     config
   );
 }

packages/frontend/core/src/components/hooks/use-query.ts

@@ -1,9 +1,10 @@
+import { GraphQLService } from '@affine/core/modules/cloud';
 import type {
   GraphQLQuery,
   QueryOptions,
   QueryResponse,
 } from '@affine/graphql';
-import { fetcher } from '@affine/graphql';
+import { useService } from '@toeverything/infra';
 import type { GraphQLError } from 'graphql';
 import { useCallback, useMemo } from 'react';
 import type { SWRConfiguration, SWRResponse } from 'swr';
@@ -32,7 +33,11 @@ import useSWRInfinite from 'swr/infinite';
 type useQueryFn = <Query extends GraphQLQuery>(
   options?: QueryOptions<Query>,
   config?: Omit<
-    SWRConfiguration<QueryResponse<Query>, GraphQLError, typeof fetcher<Query>>,
+    SWRConfiguration<
+      QueryResponse<Query>,
+      GraphQLError,
+      (options: QueryOptions<Query>) => Promise<QueryResponse<Query>>
+    >,
     'fetcher'
   >
 ) => SWRResponse<
@@ -53,11 +58,12 @@ const createUseQuery =
       }),
       [config]
     );
+    const graphqlService = useService(GraphQLService);
 
     const useSWRFn = immutable ? useSWRImutable : useSWR;
     return useSWRFn(
       options ? () => ['cloud', options.query.id, options.variables] : null,
-      options ? () => fetcher(options) : null,
+      options ? () => graphqlService.gql(options) : null,
       configWithSuspense
     );
   };
@@ -76,7 +82,7 @@ export function useQueryInfinite<Query extends GraphQLQuery>(
     SWRConfiguration<
       QueryResponse<Query>,
       GraphQLError | GraphQLError[],
-      typeof fetcher<Query>
+      (options: QueryOptions<Query>) => Promise<QueryResponse<Query>>
     >,
     'fetcher'
   >
@@ -88,6 +94,7 @@ export function useQueryInfinite<Query extends GraphQLQuery>(
     }),
     [config]
   );
+  const graphqlService = useService(GraphQLService);
 
   const { data, setSize, size, error } = useSWRInfinite<
     QueryResponse<Query>,
@@ -100,7 +107,7 @@ export function useQueryInfinite<Query extends GraphQLQuery>(
     ],
     async ([_, __, variables]) => {
       const params = { ...options, variables } as QueryOptions<Query>;
-      return fetcher(params);
+      return graphqlService.gql(params);
     },
     configWithSuspense
   );

packages/frontend/core/src/components/root-app-sidebar/user-info.tsx

@@ -23,7 +23,7 @@ import { useCallback, useEffect } from 'react';
 import {
   type AuthAccountInfo,
   AuthService,
-  ServerConfigService,
+  ServerService,
   SubscriptionService,
   UserCopilotQuotaService,
   UserQuotaService,
@@ -276,10 +276,8 @@ const AIUsage = () => {
 };
 
 const OperationMenu = () => {
-  const serverConfigService = useService(ServerConfigService);
-  const serverFeatures = useLiveData(
-    serverConfigService.serverConfig.features$
-  );
+  const serverService = useService(ServerService);
+  const serverFeatures = useLiveData(serverService.server.features$);
 
   return (
     <>

packages/frontend/core/src/desktop/dialogs/setting/account-setting/ai-usage-panel.tsx

@@ -1,7 +1,7 @@
 import { Button, ErrorMessage, Skeleton } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import {
-  ServerConfigService,
+  ServerService,
   SubscriptionService,
   UserCopilotQuotaService,
 } from '@affine/core/modules/cloud';
@@ -22,9 +22,9 @@ export const AIUsagePanel = ({
   onChangeSettingState?: (settingState: SettingState) => void;
 }) => {
   const t = useI18n();
-  const serverConfigService = useService(ServerConfigService);
+  const serverService = useService(ServerService);
   const hasPaymentFeature = useLiveData(
-    serverConfigService.serverConfig.features$.map(f => f?.payment)
+    serverService.server.features$.map(f => f?.payment)
   );
   const subscriptionService = useService(SubscriptionService);
   const aiSubscription = useLiveData(subscriptionService.subscription.ai$);

packages/frontend/core/src/desktop/dialogs/setting/account-setting/index.tsx

@@ -23,7 +23,7 @@ import {
 import { useSetAtom } from 'jotai';
 import { useCallback, useEffect, useState } from 'react';
 
-import { AuthService, ServerConfigService } from '../../../../modules/cloud';
+import { AuthService, ServerService } from '../../../../modules/cloud';
 import type { SettingState } from '../types';
 import { AIUsagePanel } from './ai-usage-panel';
 import { StorageProgress } from './storage-progress';
@@ -178,13 +178,11 @@ export const AccountSetting = ({
 }: {
   onChangeSettingState?: (settingState: SettingState) => void;
 }) => {
-  const { authService, serverConfigService } = useServices({
+  const { authService, serverService } = useServices({
     AuthService,
-    ServerConfigService,
+    ServerService,
   });
-  const serverFeatures = useLiveData(
-    serverConfigService.serverConfig.features$
-  );
+  const serverFeatures = useLiveData(serverService.server.features$);
   const t = useI18n();
   const session = authService.session;
   useEffect(() => {

packages/frontend/core/src/desktop/dialogs/setting/account-setting/storage-progress.tsx

@@ -5,7 +5,7 @@ import { cssVar } from '@toeverything/theme';
 import { useEffect, useMemo } from 'react';
 
 import {
-  ServerConfigService,
+  ServerService,
   SubscriptionService,
   UserQuotaService,
 } from '../../../../modules/cloud';
@@ -34,9 +34,9 @@ export const StorageProgress = ({ onUpgrade }: StorageProgressProgress) => {
   const maxFormatted = useLiveData(quota.maxFormatted$);
   const percent = useLiveData(quota.percent$);
 
-  const serverConfigService = useService(ServerConfigService);
+  const serverService = useService(ServerService);
   const hasPaymentFeature = useLiveData(
-    serverConfigService.serverConfig.features$.map(f => f?.payment)
+    serverService.server.features$.map(f => f?.payment)
   );
   const subscription = useService(SubscriptionService).subscription;
   useEffect(() => {

packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/general.tsx

@@ -16,7 +16,7 @@ import {
   SettingWrapper,
 } from '@affine/component/setting-components';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
-import { ServerConfigService } from '@affine/core/modules/cloud';
+import { ServerService } from '@affine/core/modules/cloud';
 import { DesktopApiService } from '@affine/core/modules/desktop-api';
 import {
   EditorSettingService,
@@ -358,13 +358,11 @@ const NewDocDefaultModeSettings = () => {
 const AISettings = () => {
   const t = useI18n();
   const { openConfirmModal } = useConfirmModal();
-  const { featureFlagService, serverConfigService } = useServices({
+  const { featureFlagService, serverService } = useServices({
     FeatureFlagService,
-    ServerConfigService,
+    ServerService,
   });
-  const serverFeatures = useLiveData(
-    serverConfigService.serverConfig.features$
-  );
+  const serverFeatures = useLiveData(serverService.server.features$);
   const enableAI = useLiveData(featureFlagService.flags.enable_ai.$);
 
   const onAIChange = useCallback(

packages/frontend/core/src/desktop/dialogs/setting/general-setting/index.tsx

@@ -16,7 +16,7 @@ import {
 import type { ReactElement, SVGProps } from 'react';
 import { useEffect } from 'react';
 
-import { AuthService, ServerConfigService } from '../../../../modules/cloud';
+import { AuthService, ServerService } from '../../../../modules/cloud';
 import type { SettingState } from '../types';
 import { AboutAffine } from './about';
 import { AppearanceSettings } from './appearance';
@@ -38,20 +38,16 @@ export type GeneralSettingList = GeneralSettingListItem[];
 
 export const useGeneralSettingList = (): GeneralSettingList => {
   const t = useI18n();
-  const {
-    authService,
-    serverConfigService,
-    userFeatureService,
-    featureFlagService,
-  } = useServices({
-    AuthService,
-    ServerConfigService,
-    UserFeatureService,
-    FeatureFlagService,
-  });
+  const { authService, serverService, userFeatureService, featureFlagService } =
+    useServices({
+      AuthService,
+      ServerService,
+      UserFeatureService,
+      FeatureFlagService,
+    });
   const status = useLiveData(authService.session.status$);
   const hasPaymentFeature = useLiveData(
-    serverConfigService.serverConfig.features$.map(f => f?.payment)
+    serverService.server.features$.map(f => f?.payment)
   );
   const enableEditorSettings = useLiveData(
     featureFlagService.flags.enable_editor_settings.$

packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members.tsx

@@ -40,7 +40,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   type AuthAccountInfo,
   AuthService,
-  ServerConfigService,
+  ServerService,
   SubscriptionService,
 } from '../../../../../modules/cloud';
 import type { SettingState } from '../../types';
@@ -65,9 +65,9 @@ export const CloudWorkspaceMembersPanel = ({
 }: {
   onChangeSettingState: (settingState: SettingState) => void;
 }) => {
-  const serverConfig = useService(ServerConfigService).serverConfig;
+  const serverService = useService(ServerService);
   const hasPaymentFeature = useLiveData(
-    serverConfig.features$.map(f => f?.payment)
+    serverService.server.features$.map(f => f?.payment)
   );
   const workspace = useService(WorkspaceService).workspace;
 

packages/frontend/core/src/desktop/pages/auth/auth.tsx

@@ -2,19 +2,14 @@ import { notify } from '@affine/component';
 import {
   ChangeEmailPage,
   ChangePasswordPage,
-  ConfirmChangeEmail,
-  ConfirmVerifiedEmail,
   OnboardingPage,
   SetPasswordPage,
   SignInSuccessPage,
   SignUpPage,
 } from '@affine/component/auth-components';
 import {
-  changeEmailMutation,
   changePasswordMutation,
-  fetcher,
   sendVerifyChangeEmailMutation,
-  verifyEmailMutation,
 } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
@@ -28,7 +23,10 @@ import {
   RouteLogic,
   useNavigateHelper,
 } from '../../../components/hooks/use-navigate-helper';
-import { AuthService, ServerConfigService } from '../../../modules/cloud';
+import { AuthService, ServerService } from '../../../modules/cloud';
+import { AppContainer } from '../../components/app-container';
+import { ConfirmChangeEmail } from './confirm-change-email';
+import { ConfirmVerifiedEmail } from './email-verified-email';
 
 const authTypeSchema = z.enum([
   'onboarding',
@@ -46,9 +44,9 @@ export const Component = () => {
   const authService = useService(AuthService);
   const account = useLiveData(authService.session.account$);
   const t = useI18n();
-  const serverConfig = useService(ServerConfigService).serverConfig;
+  const serverService = useService(ServerService);
   const passwordLimits = useLiveData(
-    serverConfig.credentialsRequirement$.map(r => r?.password)
+    serverService.server.credentialsRequirement$.map(r => r?.password)
   );
 
   const { authType } = useParams();
@@ -103,8 +101,7 @@ export const Component = () => {
   }, [jumpToIndex]);
 
   if (!passwordLimits) {
-    // TODO(@eyhn): loading UI
-    return null;
+    return <AppContainer fallback />;
   }
 
   switch (authType) {
@@ -171,36 +168,5 @@ export const loader: LoaderFunction = async args => {
     return redirect('/404');
   }
 
-  if (args.params.authType === 'confirm-change-email') {
-    const url = new URL(args.request.url);
-    const searchParams = url.searchParams;
-    const token = searchParams.get('token') ?? '';
-    const email = decodeURIComponent(searchParams.get('email') ?? '');
-    const res = await fetcher({
-      query: changeEmailMutation,
-      variables: {
-        token: token,
-        email: email,
-      },
-    }).catch(console.error);
-    // TODO(@eyhn): Add error handling
-    if (!res?.changeEmail) {
-      return redirect('/expired');
-    }
-  } else if (args.params.authType === 'verify-email') {
-    const url = new URL(args.request.url);
-    const searchParams = url.searchParams;
-    const token = searchParams.get('token') ?? '';
-    const res = await fetcher({
-      query: verifyEmailMutation,
-      variables: {
-        token: token,
-      },
-    }).catch(console.error);
-
-    if (!res?.verifyEmail) {
-      return redirect('/expired');
-    }
-  }
   return null;
 };

packages/frontend/core/src/desktop/pages/auth/confirm-change-email.tsx

@@ -0,0 +1,64 @@
+import { Button } from '@affine/component';
+import { AuthPageContainer } from '@affine/component/auth-components';
+import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-helper';
+import { BackendError, GraphQLService } from '@affine/core/modules/cloud';
+import { changeEmailMutation, ErrorNames } from '@affine/graphql';
+import { useI18n } from '@affine/i18n';
+import { useService } from '@toeverything/infra';
+import { type FC, useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import { AppContainer } from '../../components/app-container';
+
+export const ConfirmChangeEmail: FC<{
+  onOpenAffine: () => void;
+}> = ({ onOpenAffine }) => {
+  const t = useI18n();
+  const [searchParams] = useSearchParams();
+  const navigateHelper = useNavigateHelper();
+  const graphqlService = useService(GraphQLService);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      const token = searchParams.get('token') ?? '';
+      const email = decodeURIComponent(searchParams.get('email') ?? '');
+      setIsLoading(true);
+      await graphqlService
+        .gql({
+          query: changeEmailMutation,
+          variables: {
+            token: token,
+            email: email,
+          },
+        })
+        .catch(err => {
+          if (err instanceof BackendError) {
+            const userFriendlyError = err.originError;
+            if (userFriendlyError.name === ErrorNames.INVALID_EMAIL_TOKEN) {
+              return navigateHelper.jumpToExpired();
+            }
+          }
+          throw err;
+        });
+    })().catch(err => {
+      // TODO(@eyhn): Add error handling
+      console.error(err);
+    });
+  }, [graphqlService, navigateHelper, searchParams]);
+
+  if (isLoading) {
+    return <AppContainer fallback />;
+  }
+
+  return (
+    <AuthPageContainer
+      title={t['com.affine.auth.change.email.page.success.title']()}
+      subtitle={t['com.affine.auth.change.email.page.success.subtitle']()}
+    >
+      <Button variant="primary" size="large" onClick={onOpenAffine}>
+        {t['com.affine.auth.open.affine']()}
+      </Button>
+    </AuthPageContainer>
+  );
+};

packages/frontend/core/src/desktop/pages/auth/email-verified-email.tsx

@@ -0,0 +1,64 @@
+import { Button } from '@affine/component';
+import { AuthPageContainer } from '@affine/component/auth-components';
+import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-helper';
+import { GraphQLService } from '@affine/core/modules/cloud';
+import {
+  ErrorNames,
+  UserFriendlyError,
+  verifyEmailMutation,
+} from '@affine/graphql';
+import { useI18n } from '@affine/i18n';
+import { useService } from '@toeverything/infra';
+import { type FC, useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import { AppContainer } from '../../components/app-container';
+
+export const ConfirmVerifiedEmail: FC<{
+  onOpenAffine: () => void;
+}> = ({ onOpenAffine }) => {
+  const t = useI18n();
+  const graphqlService = useService(GraphQLService);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchParams] = useSearchParams();
+  const navigateHelper = useNavigateHelper();
+
+  useEffect(() => {
+    (async () => {
+      const token = searchParams.get('token') ?? '';
+      setIsLoading(true);
+      await graphqlService
+        .gql({
+          query: verifyEmailMutation,
+          variables: {
+            token: token,
+          },
+        })
+        .catch(error => {
+          const userFriendlyError = UserFriendlyError.fromAnyError(error);
+          if (userFriendlyError.name === ErrorNames.INVALID_EMAIL_TOKEN) {
+            return navigateHelper.jumpToExpired();
+          }
+          throw error;
+        });
+    })().catch(err => {
+      // TODO(@eyhn): Add error handling
+      console.error(err);
+    });
+  }, [graphqlService, navigateHelper, searchParams]);
+
+  if (isLoading) {
+    return <AppContainer fallback />;
+  }
+
+  return (
+    <AuthPageContainer
+      title={t['com.affine.auth.change.email.page.success.title']()}
+      subtitle={t['com.affine.auth.change.email.page.success.subtitle']()}
+    >
+      <Button variant="primary" size="large" onClick={onOpenAffine}>
+        {t['com.affine.auth.open.affine']()}
+      </Button>
+    </AuthPageContainer>
+  );
+};

packages/frontend/core/src/desktop/pages/invite/index.tsx

@@ -2,56 +2,29 @@ import { AcceptInvitePage } from '@affine/component/member-components';
 import type { GetInviteInfoQuery } from '@affine/graphql';
 import {
   acceptInviteByInviteIdMutation,
-  fetcher,
   getInviteInfoQuery,
 } from '@affine/graphql';
 import { useLiveData, useService } from '@toeverything/infra';
-import { useCallback, useEffect } from 'react';
-import type { LoaderFunction } from 'react-router-dom';
-import { redirect, useLoaderData } from 'react-router-dom';
+import { useCallback, useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
 
 import {
   RouteLogic,
   useNavigateHelper,
 } from '../../../components/hooks/use-navigate-helper';
-import { AuthService } from '../../../modules/cloud';
+import { AuthService, GraphQLService } from '../../../modules/cloud';
+import { AppContainer } from '../../components/app-container';
 
 /**
  * /invite/:inviteId page
  *
  * only for web
  */
-export const loader: LoaderFunction = async args => {
-  const inviteId = args.params.inviteId || '';
-  const res = await fetcher({
-    query: getInviteInfoQuery,
-    variables: {
-      inviteId,
-    },
-  }).catch(console.error);
-
-  // If the inviteId is invalid, redirect to 404 page
-  if (!res || !res?.getInviteInfo) {
-    return redirect('/404');
-  }
-
-  // No mater sign in or not, we need to accept the invite
-  await fetcher({
-    query: acceptInviteByInviteIdMutation,
-    variables: {
-      workspaceId: res.getInviteInfo.workspace.id,
-      inviteId,
-      sendAcceptMail: true,
-    },
-  }).catch(console.error);
-
-  return {
-    inviteId,
-    inviteInfo: res.getInviteInfo,
-  };
-};
-
-export const Component = () => {
+const AcceptInvite = ({
+  inviteInfo,
+}: {
+  inviteInfo: GetInviteInfoQuery['getInviteInfo'];
+}) => {
   const authService = useService(AuthService);
   const isRevalidating = useLiveData(authService.session.isRevalidating$);
   const loginStatus = useLiveData(authService.session.status$);
@@ -63,11 +36,6 @@ export const Component = () => {
   const { jumpToSignIn } = useNavigateHelper();
   const { jumpToPage } = useNavigateHelper();
 
-  const { inviteInfo } = useLoaderData() as {
-    inviteId: string;
-    inviteInfo: GetInviteInfoQuery['getInviteInfo'];
-  };
-
   const openWorkspace = useCallback(() => {
     jumpToPage(inviteInfo.workspace.id, 'all', RouteLogic.REPLACE);
   }, [inviteInfo.workspace.id, jumpToPage]);
@@ -99,3 +67,57 @@ export const Component = () => {
 
   return null;
 };
+
+export const Component = () => {
+  const graphqlService = useService(GraphQLService);
+  const params = useParams<{ inviteId: string }>();
+  const navigateHelper = useNavigateHelper();
+
+  const [data, setData] = useState<{
+    inviteId: string;
+    inviteInfo: GetInviteInfoQuery['getInviteInfo'];
+  } | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      setData(null);
+      const inviteId = params.inviteId || '';
+      const res = await graphqlService.gql({
+        query: getInviteInfoQuery,
+        variables: {
+          inviteId,
+        },
+      });
+
+      // If the inviteId is invalid, redirect to 404 page
+      if (!res || !res?.getInviteInfo) {
+        return navigateHelper.jumpTo404();
+      }
+
+      // No mater sign in or not, we need to accept the invite
+      await graphqlService.gql({
+        query: acceptInviteByInviteIdMutation,
+        variables: {
+          workspaceId: res.getInviteInfo.workspace.id,
+          inviteId,
+          sendAcceptMail: true,
+        },
+      });
+
+      setData({
+        inviteId,
+        inviteInfo: res.getInviteInfo,
+      });
+      return;
+    })().catch(err => {
+      // TODO: handle error
+      console.error(err);
+    });
+  }, [graphqlService, navigateHelper, params.inviteId]);
+
+  if (!data) {
+    return <AppContainer fallback />;
+  }
+
+  return <AcceptInvite inviteInfo={data.inviteInfo} />;
+};

packages/frontend/core/src/desktop/pages/open-app/index.tsx

@@ -1,14 +1,13 @@
+import { GraphQLService } from '@affine/core/modules/cloud';
 import { OpenInAppPage } from '@affine/core/modules/open-in-app/views/open-in-app-page';
 import { appSchemes, channelToScheme } from '@affine/core/utils/channel';
 import type { GetCurrentUserQuery } from '@affine/graphql';
-import { fetcher, getCurrentUserQuery } from '@affine/graphql';
-import type { LoaderFunction } from 'react-router-dom';
-import { useLoaderData, useSearchParams } from 'react-router-dom';
+import { getCurrentUserQuery } from '@affine/graphql';
+import { useService } from '@toeverything/infra';
+import { useEffect, useState } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
 
-interface LoaderData {
-  action: 'url' | 'signin-redirect';
-  currentUser?: GetCurrentUserQuery['currentUser'];
-}
+import { AppContainer } from '../../components/app-container';
 
 const OpenUrl = () => {
   const [params] = useSearchParams();
@@ -33,8 +32,11 @@ const OpenUrl = () => {
  * @deprecated
  */
 const OpenOAuthJwt = () => {
-  const { currentUser } = useLoaderData() as LoaderData;
+  const [currentUser, setCurrentUser] = useState<
+    GetCurrentUserQuery['currentUser'] | null
+  >(null);
   const [params] = useSearchParams();
+  const graphqlService = useService(GraphQLService);
 
   const maybeScheme = appSchemes.safeParse(params.get('scheme'));
   const scheme = maybeScheme.success
@@ -42,8 +44,19 @@ const OpenOAuthJwt = () => {
     : channelToScheme[BUILD_CONFIG.appBuildType];
   const next = params.get('next');
 
+  useEffect(() => {
+    graphqlService
+      .gql({
+        query: getCurrentUserQuery,
+      })
+      .then(res => {
+        setCurrentUser(res?.currentUser || null);
+      })
+      .catch(console.error);
+  }, [graphqlService]);
+
   if (!currentUser || !currentUser?.token?.sessionToken) {
-    return null;
+    return <AppContainer fallback />;
   }
 
   const urlToOpen = `${scheme}://signin-redirect?token=${
@@ -54,7 +67,8 @@ const OpenOAuthJwt = () => {
 };
 
 export const Component = () => {
-  const { action } = useLoaderData() as LoaderData;
+  const params = useParams<{ action: string }>();
+  const action = params.action || '';
 
   if (action === 'url') {
     return <OpenUrl />;
@@ -63,22 +77,3 @@ export const Component = () => {
   }
   return null;
 };
-
-export const loader: LoaderFunction = async args => {
-  const action = args.params.action || '';
-
-  if (action === 'signin-redirect') {
-    const res = await fetcher({
-      query: getCurrentUserQuery,
-    }).catch(console.error);
-
-    return {
-      action,
-      currentUser: res?.currentUser || null,
-    };
-  } else {
-    return {
-      action,
-    };
-  }
-};

packages/frontend/core/src/desktop/pages/root/index.tsx

@@ -1,4 +1,7 @@
 import { NotificationCenter } from '@affine/component';
+import { DefaultServerService } from '@affine/core/modules/cloud';
+import { FrameworkScope, useService } from '@toeverything/infra';
+import { useEffect, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 
 import { GlobalDialogs } from '../../dialogs';
@@ -6,13 +9,34 @@ import { CustomThemeModifier } from './custom-theme';
 import { FindInPageModal } from './find-in-page/find-in-page-modal';
 
 export const RootWrapper = () => {
+  const defaultServerService = useService(DefaultServerService);
+  const [isServerReady, setIsServerReady] = useState(false);
+
+  useEffect(() => {
+    if (isServerReady) {
+      return;
+    }
+    const abortController = new AbortController();
+    defaultServerService.server
+      .waitForConfigRevalidation(abortController.signal)
+      .then(() => {
+        setIsServerReady(true);
+      })
+      .catch(error => {
+        console.error(error);
+      });
+    return () => {
+      abortController.abort();
+    };
+  }, [defaultServerService, isServerReady]);
+
   return (
-    <>
+    <FrameworkScope scope={defaultServerService.server.scope}>
       <GlobalDialogs />
       <NotificationCenter />
       <Outlet />
       <CustomThemeModifier />
       {BUILD_CONFIG.isElectron && <FindInPageModal />}
-    </>
+    </FrameworkScope>
   );
 };

packages/frontend/core/src/mobile/components/user-plan-tag/index.tsx

@@ -1,7 +1,4 @@
-import {
-  ServerConfigService,
-  SubscriptionService,
-} from '@affine/core/modules/cloud';
+import { ServerService, SubscriptionService } from '@affine/core/modules/cloud';
 import { SubscriptionPlan } from '@affine/graphql';
 import { useLiveData, useServices } from '@toeverything/infra';
 import clsx from 'clsx';
@@ -13,12 +10,12 @@ export const UserPlanTag = forwardRef<
   HTMLDivElement,
   HTMLProps<HTMLDivElement>
 >(function UserPlanTag({ className, ...attrs }, ref) {
-  const { serverConfigService, subscriptionService } = useServices({
-    ServerConfigService,
+  const { serverService, subscriptionService } = useServices({
+    ServerService,
     SubscriptionService,
   });
   const hasPayment = useLiveData(
-    serverConfigService.serverConfig.features$.map(r => r?.payment)
+    serverService.server.features$.map(r => r?.payment)
   );
   const plan = useLiveData(
     subscriptionService.subscription.pro$.map(subscription =>

packages/frontend/core/src/mobile/dialogs/setting/user-usage/index.tsx

@@ -1,7 +1,7 @@
 import { Skeleton } from '@affine/component';
 import {
   AuthService,
-  ServerConfigService,
+  ServerService,
   UserCopilotQuotaService,
   UserQuotaService,
 } from '@affine/core/modules/cloud';
@@ -71,10 +71,8 @@ const Loading = () => {
 };
 
 const UsagePanel = () => {
-  const serverConfigService = useService(ServerConfigService);
-  const serverFeatures = useLiveData(
-    serverConfigService.serverConfig.features$
-  );
+  const serverService = useService(ServerService);
+  const serverFeatures = useLiveData(serverService.server.features$);
 
   return (
     <SettingGroup title="Storage" contentStyle={{ padding: '10px 16px' }}>

packages/frontend/core/src/mobile/pages/root/index.tsx

@@ -0,0 +1,40 @@
+import { NotificationCenter } from '@affine/component';
+import { DefaultServerService } from '@affine/core/modules/cloud';
+import { FrameworkScope, useService } from '@toeverything/infra';
+import { useEffect, useState } from 'react';
+import { Outlet } from 'react-router-dom';
+
+import { GlobalDialogs } from '../../dialogs';
+import { MobileSignInModal } from '../../views/sign-in/modal';
+
+export const RootWrapper = () => {
+  const defaultServerService = useService(DefaultServerService);
+  const [isServerReady, setIsServerReady] = useState(false);
+
+  useEffect(() => {
+    if (isServerReady) {
+      return;
+    }
+    const abortController = new AbortController();
+    defaultServerService.server
+      .waitForConfigRevalidation(abortController.signal)
+      .then(() => {
+        setIsServerReady(true);
+      })
+      .catch(error => {
+        console.error(error);
+      });
+    return () => {
+      abortController.abort();
+    };
+  }, [defaultServerService, isServerReady]);
+
+  return (
+    <FrameworkScope scope={defaultServerService.server.scope}>
+      <GlobalDialogs />
+      <NotificationCenter />
+      <MobileSignInModal />
+      <Outlet />
+    </FrameworkScope>
+  );
+};

packages/frontend/core/src/mobile/router.tsx

@@ -1,18 +1,15 @@
-import { NotificationCenter } from '@affine/component';
 import { NavigateContext } from '@affine/core/components/hooks/use-navigate-helper';
 import { wrapCreateBrowserRouter } from '@sentry/react';
 import { useEffect, useState } from 'react';
 import type { RouteObject } from 'react-router-dom';
 import {
   createBrowserRouter as reactRouterCreateBrowserRouter,
-  Outlet,
   redirect,
   // eslint-disable-next-line @typescript-eslint/no-restricted-imports
   useNavigate,
 } from 'react-router-dom';
 
-import { GlobalDialogs } from './dialogs';
-import { MobileSignInModal } from './views/sign-in/modal';
+import { RootWrapper } from './pages/root';
 
 function RootRouter() {
   const navigate = useNavigate();
@@ -25,10 +22,7 @@ function RootRouter() {
   return (
     ready && (
       <NavigateContext.Provider value={navigate}>
-        <GlobalDialogs />
-        <NotificationCenter />
-        <MobileSignInModal />
-        <Outlet />
+        <RootWrapper />
       </NavigateContext.Provider>
     )
   );

packages/frontend/core/src/modules/cloud/constant.ts

@@ -0,0 +1,152 @@
+import {
+  OAuthProviderType,
+  ServerDeploymentType,
+  ServerFeature,
+} from '@affine/graphql';
+
+import type { ServerConfig, ServerMetadata } from './types';
+
+export const BUILD_IN_SERVERS: (ServerMetadata & { config: ServerConfig })[] =
+  environment.isSelfHosted
+    ? [
+        {
+          id: 'affine-cloud',
+          baseUrl: location.origin,
+          // selfhosted baseUrl is `location.origin`
+          // this is ok for web app, but not for desktop app
+          // since we never build desktop app in selfhosted mode, so it's fine
+          config: {
+            serverName: 'Affine Selfhost',
+            features: [],
+            oauthProviders: [],
+            type: ServerDeploymentType.Selfhosted,
+            credentialsRequirement: {
+              password: {
+                minLength: 8,
+                maxLength: 32,
+              },
+            },
+          },
+        },
+      ]
+    : BUILD_CONFIG.debug
+      ? [
+          {
+            id: 'affine-cloud',
+            baseUrl: 'http://localhost:8080',
+            config: {
+              serverName: 'Affine Cloud',
+              features: [
+                ServerFeature.Captcha,
+                ServerFeature.Copilot,
+                ServerFeature.OAuth,
+                ServerFeature.Payment,
+              ],
+              oauthProviders: [OAuthProviderType.Google],
+              type: ServerDeploymentType.Affine,
+              credentialsRequirement: {
+                password: {
+                  minLength: 8,
+                  maxLength: 32,
+                },
+              },
+            },
+          },
+        ]
+      : BUILD_CONFIG.appBuildType === 'stable'
+        ? [
+            {
+              id: 'affine-cloud',
+              baseUrl: 'https://app.affine.pro',
+              config: {
+                serverName: 'Affine Cloud',
+                features: [
+                  ServerFeature.Captcha,
+                  ServerFeature.Copilot,
+                  ServerFeature.OAuth,
+                  ServerFeature.Payment,
+                ],
+                oauthProviders: [OAuthProviderType.Google],
+                type: ServerDeploymentType.Affine,
+                credentialsRequirement: {
+                  password: {
+                    minLength: 8,
+                    maxLength: 32,
+                  },
+                },
+              },
+            },
+          ]
+        : BUILD_CONFIG.appBuildType === 'beta'
+          ? [
+              {
+                id: 'affine-cloud',
+                baseUrl: 'https://insider.affine.pro',
+                config: {
+                  serverName: 'Affine Cloud',
+                  features: [
+                    ServerFeature.Captcha,
+                    ServerFeature.Copilot,
+                    ServerFeature.OAuth,
+                    ServerFeature.Payment,
+                  ],
+                  oauthProviders: [OAuthProviderType.Google],
+                  type: ServerDeploymentType.Affine,
+                  credentialsRequirement: {
+                    password: {
+                      minLength: 8,
+                      maxLength: 32,
+                    },
+                  },
+                },
+              },
+            ]
+          : BUILD_CONFIG.appBuildType === 'internal'
+            ? [
+                {
+                  id: 'affine-cloud',
+                  baseUrl: 'https://insider.affine.pro',
+                  config: {
+                    serverName: 'Affine Cloud',
+                    features: [
+                      ServerFeature.Captcha,
+                      ServerFeature.Copilot,
+                      ServerFeature.OAuth,
+                      ServerFeature.Payment,
+                    ],
+                    oauthProviders: [OAuthProviderType.Google],
+                    type: ServerDeploymentType.Affine,
+                    credentialsRequirement: {
+                      password: {
+                        minLength: 8,
+                        maxLength: 32,
+                      },
+                    },
+                  },
+                },
+              ]
+            : BUILD_CONFIG.appBuildType === 'canary'
+              ? [
+                  {
+                    id: 'affine-cloud',
+                    baseUrl: 'https://affine.fail',
+                    config: {
+                      serverName: 'Affine Cloud',
+                      features: [
+                        ServerFeature.Captcha,
+                        ServerFeature.Copilot,
+                        ServerFeature.OAuth,
+                        ServerFeature.Payment,
+                      ],
+                      oauthProviders: [OAuthProviderType.Google],
+                      type: ServerDeploymentType.Affine,
+                      credentialsRequirement: {
+                        password: {
+                          minLength: 8,
+                          maxLength: 32,
+                        },
+                      },
+                    },
+                  },
+                ]
+              : [];

packages/frontend/core/src/modules/cloud/entities/server-config.ts

@@ -1,70 +0,0 @@
-import type {
-  OauthProvidersQuery,
-  ServerConfigQuery,
-  ServerFeature,
-} from '@affine/graphql';
-import {
-  backoffRetry,
-  effect,
-  Entity,
-  fromPromise,
-  LiveData,
-} from '@toeverything/infra';
-import { EMPTY, exhaustMap, mergeMap } from 'rxjs';
-
-import type { ServerConfigStore } from '../stores/server-config';
-
-type LowercaseServerFeature = Lowercase<ServerFeature>;
-type ServerFeatureRecord = {
-  [key in LowercaseServerFeature]: boolean;
-};
-
-export type ServerConfigType = ServerConfigQuery['serverConfig'] &
-  OauthProvidersQuery['serverConfig'];
-
-export class ServerConfig extends Entity {
-  readonly config$ = new LiveData<ServerConfigType | null>(null);
-
-  readonly features$ = this.config$.map(config => {
-    return config
-      ? Array.from(new Set(config.features)).reduce((acc, cur) => {
-          acc[cur.toLowerCase() as LowercaseServerFeature] = true;
-          return acc;
-        }, {} as ServerFeatureRecord)
-      : null;
-  });
-
-  readonly credentialsRequirement$ = this.config$.map(config => {
-    return config ? config.credentialsRequirement : null;
-  });
-
-  constructor(private readonly store: ServerConfigStore) {
-    super();
-  }
-
-  revalidate = effect(
-    exhaustMap(() => {
-      return fromPromise<ServerConfigType>(signal =>
-        this.store.fetchServerConfig(signal)
-      ).pipe(
-        backoffRetry({
-          count: Infinity,
-        }),
-        mergeMap(config => {
-          this.config$.next(config);
-          return EMPTY;
-        })
-      );
-    })
-  );
-
-  revalidateIfNeeded = () => {
-    if (!this.config$.value) {
-      this.revalidate();
-    }
-  };
-
-  override dispose(): void {
-    this.revalidate.unsubscribe();
-  }
-}

packages/frontend/core/src/modules/cloud/entities/server.ts

@@ -0,0 +1,110 @@
+import type { ServerFeature } from '@affine/graphql';
+import {
+  backoffRetry,
+  effect,
+  Entity,
+  fromPromise,
+  LiveData,
+  onComplete,
+  onStart,
+} from '@toeverything/infra';
+import { EMPTY, exhaustMap, map, mergeMap } from 'rxjs';
+
+import { ServerScope } from '../scopes/server';
+import { FetchService } from '../services/fetch';
+import { GraphQLService } from '../services/graphql';
+import { ServerConfigStore } from '../stores/server-config';
+import type { ServerListStore } from '../stores/server-list';
+import type { ServerConfig, ServerMetadata } from '../types';
+
+type LowercaseServerFeature = Lowercase<ServerFeature>;
+type ServerFeatureRecord = {
+  [key in LowercaseServerFeature]: boolean;
+};
+
+export class Server extends Entity<{
+  serverMetadata: ServerMetadata;
+}> {
+  readonly id = this.props.serverMetadata.id;
+  readonly baseUrl = this.props.serverMetadata.baseUrl;
+  readonly scope = this.framework.createScope(ServerScope, {
+    server: this as Server,
+  });
+
+  readonly serverConfigStore = this.scope.framework.get(ServerConfigStore);
+  readonly fetch = this.scope.framework.get(FetchService).fetch;
+  readonly gql = this.scope.framework.get(GraphQLService).gql;
+  readonly serverMetadata = this.props.serverMetadata;
+
+  constructor(private readonly serverListStore: ServerListStore) {
+    super();
+  }
+
+  readonly config$ = LiveData.from<ServerConfig>(
+    this.serverListStore.watchServerConfig(this.serverMetadata.id).pipe(
+      map(config => {
+        if (!config) {
+          throw new Error('Failed to load server config');
+        }
+        return config;
+      })
+    ),
+    null as any
+  );
+
+  readonly isConfigRevalidating$ = new LiveData(false);
+
+  readonly features$ = this.config$.map(config => {
+    return Array.from(new Set(config.features)).reduce((acc, cur) => {
+      acc[cur.toLowerCase() as LowercaseServerFeature] = true;
+      return acc;
+    }, {} as ServerFeatureRecord);
+  });
+
+  readonly credentialsRequirement$ = this.config$.map(config => {
+    return config ? config.credentialsRequirement : null;
+  });
+
+  readonly revalidateConfig = effect(
+    exhaustMap(() => {
+      return fromPromise(signal =>
+        this.serverConfigStore.fetchServerConfig(signal)
+      ).pipe(
+        backoffRetry({
+          count: Infinity,
+        }),
+        mergeMap(config => {
+          this.serverListStore.updateServerConfig(this.serverMetadata.id, {
+            credentialsRequirement: config.credentialsRequirement,
+            features: config.features,
+            oauthProviders: config.oauthProviders,
+            serverName: config.name,
+            type: config.type,
+            version: config.version,
+            initialized: config.initialized,
+          });
+          return EMPTY;
+        }),
+        onStart(() => {
+          this.isConfigRevalidating$.next(true);
+        }),
+        onComplete(() => {
+          this.isConfigRevalidating$.next(false);
+        })
+      );
+    })
+  );
+
+  async waitForConfigRevalidation(signal?: AbortSignal) {
+    this.revalidateConfig();
+    await this.isConfigRevalidating$.waitFor(
+      isRevalidating => !isRevalidating,
+      signal
+    );
+  }
+
+  override dispose(): void {
+    this.scope.dispose();
+    this.revalidateConfig.unsubscribe();
+  }
+}

packages/frontend/core/src/modules/cloud/entities/subscription-prices.ts

@@ -13,7 +13,7 @@ import {
 import { exhaustMap } from 'rxjs';
 
 import { isBackendError, isNetworkError } from '../error';
-import type { ServerConfigService } from '../services/server-config';
+import type { ServerService } from '../services/server';
 import type { SubscriptionStore } from '../stores/subscription';
 
 export class SubscriptionPrices extends Entity {
@@ -35,7 +35,7 @@ export class SubscriptionPrices extends Entity {
   );
 
   constructor(
-    private readonly serverConfigService: ServerConfigService,
+    private readonly serverService: ServerService,
     private readonly store: SubscriptionStore
   ) {
     super();
@@ -44,13 +44,7 @@ export class SubscriptionPrices extends Entity {
   revalidate = effect(
     exhaustMap(() => {
       return fromPromise(async signal => {
-        // ensure server config is loaded
-        this.serverConfigService.serverConfig.revalidateIfNeeded();
-
-        const serverConfig =
-          await this.serverConfigService.serverConfig.features$.waitForNonNull(
-            signal
-          );
+        const serverConfig = this.serverService.server.features$.value;
 
         if (!serverConfig.payment) {
           // No payment feature, no subscription

packages/frontend/core/src/modules/cloud/entities/subscription.ts

@@ -19,7 +19,7 @@ import { EMPTY, map, mergeMap } from 'rxjs';
 
 import { isBackendError, isNetworkError } from '../error';
 import type { AuthService } from '../services/auth';
-import type { ServerConfigService } from '../services/server-config';
+import type { ServerService } from '../services/server';
 import type { SubscriptionStore } from '../stores/subscription';
 
 export type SubscriptionType = NonNullable<
@@ -54,7 +54,7 @@ export class Subscription extends Entity {
 
   constructor(
     private readonly authService: AuthService,
-    private readonly serverConfigService: ServerConfigService,
+    private readonly serverService: ServerService,
     private readonly store: SubscriptionStore
   ) {
     super();
@@ -100,9 +100,7 @@ export class Subscription extends Entity {
           }
 
           const serverConfig =
-            await this.serverConfigService.serverConfig.features$.waitForNonNull(
-              signal
-            );
+            await this.serverService.server.features$.waitForNonNull(signal);
 
           if (!serverConfig.payment) {
             // No payment feature, no subscription

packages/frontend/core/src/modules/cloud/entities/user-copilot-quota.ts

@@ -13,7 +13,7 @@ import { EMPTY, map, mergeMap } from 'rxjs';
 
 import { isBackendError, isNetworkError } from '../error';
 import type { AuthService } from '../services/auth';
-import type { ServerConfigService } from '../services/server-config';
+import type { ServerService } from '../services/server';
 import type { UserCopilotQuotaStore } from '../stores/user-copilot-quota';
 
 export class UserCopilotQuota extends Entity {
@@ -26,7 +26,7 @@ export class UserCopilotQuota extends Entity {
   constructor(
     private readonly authService: AuthService,
     private readonly store: UserCopilotQuotaStore,
-    private readonly serverConfigService: ServerConfigService
+    private readonly serverService: ServerService
   ) {
     super();
   }
@@ -44,9 +44,7 @@ export class UserCopilotQuota extends Entity {
           }
 
           const serverConfig =
-            await this.serverConfigService.serverConfig.features$.waitForNonNull(
-              signal
-            );
+            await this.serverService.server.features$.waitForNonNull(signal);
 
           let aiQuota = null;
 

packages/frontend/core/src/modules/cloud/index.ts

@@ -1,4 +1,5 @@
 export type { Invoice } from './entities/invoices';
+export { Server } from './entities/server';
 export type { AuthAccountInfo } from './entities/session';
 export {
   BackendError,
@@ -6,19 +7,23 @@ export {
   isNetworkError,
   NetworkError,
 } from './error';
+export { RawFetchProvider } from './provider/fetch';
 export { ValidatorProvider } from './provider/validator';
 export { WebSocketAuthProvider } from './provider/websocket-auth';
 export { AccountChanged, AuthService } from './services/auth';
 export { CaptchaService } from './services/captcha';
+export { DefaultServerService } from './services/default-server';
 export { FetchService } from './services/fetch';
 export { GraphQLService } from './services/graphql';
 export { InvoicesService } from './services/invoices';
-export { ServerConfigService } from './services/server-config';
+export { ServerService } from './services/server';
+export { ServersService } from './services/servers';
 export { SubscriptionService } from './services/subscription';
 export { UserCopilotQuotaService } from './services/user-copilot-quota';
 export { UserFeatureService } from './services/user-feature';
 export { UserQuotaService } from './services/user-quota';
 export { WebSocketService } from './services/websocket';
+export { WorkspaceServerService } from './services/workspace-server';
 
 import {
   DocScope,
@@ -26,38 +31,44 @@ import {
   type Framework,
   GlobalCache,
   GlobalState,
+  GlobalStateService,
   WorkspaceScope,
 } from '@toeverything/infra';
 
 import { UrlService } from '../url';
 import { CloudDocMeta } from './entities/cloud-doc-meta';
 import { Invoices } from './entities/invoices';
-import { ServerConfig } from './entities/server-config';
+import { Server } from './entities/server';
 import { AuthSession } from './entities/session';
 import { Subscription } from './entities/subscription';
 import { SubscriptionPrices } from './entities/subscription-prices';
 import { UserCopilotQuota } from './entities/user-copilot-quota';
 import { UserFeature } from './entities/user-feature';
 import { UserQuota } from './entities/user-quota';
-import { DefaultFetchProvider, FetchProvider } from './provider/fetch';
+import { DefaultRawFetchProvider, RawFetchProvider } from './provider/fetch';
 import { ValidatorProvider } from './provider/validator';
 import { WebSocketAuthProvider } from './provider/websocket-auth';
+import { ServerScope } from './scopes/server';
 import { AuthService } from './services/auth';
 import { CaptchaService } from './services/captcha';
 import { CloudDocMetaService } from './services/cloud-doc-meta';
+import { DefaultServerService } from './services/default-server';
 import { FetchService } from './services/fetch';
 import { GraphQLService } from './services/graphql';
 import { InvoicesService } from './services/invoices';
-import { ServerConfigService } from './services/server-config';
+import { ServerService } from './services/server';
+import { ServersService } from './services/servers';
 import { SubscriptionService } from './services/subscription';
 import { UserCopilotQuotaService } from './services/user-copilot-quota';
 import { UserFeatureService } from './services/user-feature';
 import { UserQuotaService } from './services/user-quota';
 import { WebSocketService } from './services/websocket';
+import { WorkspaceServerService } from './services/workspace-server';
 import { AuthStore } from './stores/auth';
 import { CloudDocMetaStore } from './stores/cloud-doc-meta';
 import { InvoicesStore } from './stores/invoices';
 import { ServerConfigStore } from './stores/server-config';
+import { ServerListStore } from './stores/server-list';
 import { SubscriptionStore } from './stores/subscription';
 import { UserCopilotQuotaStore } from './stores/user-copilot-quota';
 import { UserFeatureStore } from './stores/user-feature';
@@ -65,23 +76,28 @@ import { UserQuotaStore } from './stores/user-quota';
 
 export function configureCloudModule(framework: Framework) {
   framework
-    .service(FetchService, [FetchProvider])
-    .impl(FetchProvider, DefaultFetchProvider)
+    .impl(RawFetchProvider, DefaultRawFetchProvider)
+    .service(ServersService, [ServerListStore])
+    .service(DefaultServerService, [ServersService])
+    .store(ServerListStore, [GlobalStateService])
+    .entity(Server, [ServerListStore])
+    .scope(ServerScope)
+    .service(ServerService, [ServerScope])
+    .service(FetchService, [RawFetchProvider, ServerService])
     .service(GraphQLService, [FetchService])
     .service(
       WebSocketService,
       f =>
         new WebSocketService(
+          f.get(ServerService),
           f.get(AuthService),
           f.getOptional(WebSocketAuthProvider)
         )
     )
-    .service(ServerConfigService)
-    .entity(ServerConfig, [ServerConfigStore])
     .store(ServerConfigStore, [GraphQLService])
     .service(CaptchaService, f => {
       return new CaptchaService(
-        f.get(ServerConfigService),
+        f.get(ServerService),
         f.get(FetchService),
         f.getOptional(ValidatorProvider)
       );
@@ -90,9 +106,14 @@ export function configureCloudModule(framework: Framework) {
     .store(AuthStore, [FetchService, GraphQLService, GlobalState])
     .entity(AuthSession, [AuthStore])
     .service(SubscriptionService, [SubscriptionStore])
-    .store(SubscriptionStore, [GraphQLService, GlobalCache, UrlService])
-    .entity(Subscription, [AuthService, ServerConfigService, SubscriptionStore])
-    .entity(SubscriptionPrices, [ServerConfigService, SubscriptionStore])
+    .store(SubscriptionStore, [
+      GraphQLService,
+      GlobalCache,
+      UrlService,
+      ServerService,
+    ])
+    .entity(Subscription, [AuthService, ServerService, SubscriptionStore])
+    .entity(SubscriptionPrices, [ServerService, SubscriptionStore])
     .service(UserQuotaService)
     .store(UserQuotaStore, [GraphQLService])
     .entity(UserQuota, [AuthService, UserQuotaStore])
@@ -101,7 +122,7 @@ export function configureCloudModule(framework: Framework) {
     .entity(UserCopilotQuota, [
       AuthService,
       UserCopilotQuotaStore,
-      ServerConfigService,
+      ServerService,
     ])
     .service(UserFeatureService)
     .entity(UserFeature, [AuthService, UserFeatureStore])
@@ -114,4 +135,6 @@ export function configureCloudModule(framework: Framework) {
     .service(CloudDocMetaService)
     .entity(CloudDocMeta, [CloudDocMetaStore, DocService, GlobalCache])
     .store(CloudDocMetaStore, [GraphQLService]);
+
+  framework.scope(WorkspaceScope).service(WorkspaceServerService);
 }

packages/frontend/core/src/modules/cloud/provider/fetch.ts

@@ -2,15 +2,16 @@ import { createIdentifier } from '@toeverything/infra';
 
 import type { FetchInit } from '../services/fetch';
 
-export interface FetchProvider {
+export interface RawFetchProvider {
   /**
    * standard fetch, in ios&android, we can use native fetch to implement this
    */
   fetch: (input: string | URL, init?: FetchInit) => Promise<Response>;
 }
 
-export const FetchProvider = createIdentifier<FetchProvider>('FetchProvider');
+export const RawFetchProvider =
+  createIdentifier<RawFetchProvider>('FetchProvider');
 
-export const DefaultFetchProvider = {
+export const DefaultRawFetchProvider = {
   fetch: globalThis.fetch.bind(globalThis),
 };

packages/frontend/core/src/modules/cloud/scopes/server.ts

@@ -0,0 +1,7 @@
+import { Scope } from '@toeverything/infra';
+
+import type { Server } from '../entities/server';
+
+export class ServerScope extends Scope<{ server: Server }> {
+  readonly server = this.props.server;
+}

packages/frontend/core/src/modules/cloud/services/captcha.ts

@@ -11,10 +11,10 @@ import { EMPTY, exhaustMap, mergeMap } from 'rxjs';
 
 import type { ValidatorProvider } from '../provider/validator';
 import type { FetchService } from './fetch';
-import type { ServerConfigService } from './server-config';
+import type { ServerService } from './server';
 
 export class CaptchaService extends Service {
-  needCaptcha$ = this.serverConfigService.serverConfig.features$.map(
+  needCaptcha$ = this.serverService.server.features$.map(
     r => r?.captcha || false
   );
   challenge$ = new LiveData<string | undefined>(undefined);
@@ -23,7 +23,7 @@ export class CaptchaService extends Service {
   error$ = new LiveData<any | undefined>(undefined);
 
   constructor(
-    private readonly serverConfigService: ServerConfigService,
+    private readonly serverService: ServerService,
     private readonly fetchService: FetchService,
     public readonly validatorProvider?: ValidatorProvider
   ) {

packages/frontend/core/src/modules/cloud/services/default-server.ts

@@ -0,0 +1,26 @@
+import { ServerDeploymentType } from '@affine/graphql';
+import { Service } from '@toeverything/infra';
+
+import type { Server } from '../entities/server';
+import type { ServersService } from './servers';
+
+export class DefaultServerService extends Service {
+  readonly server: Server;
+
+  constructor(private readonly serversService: ServersService) {
+    super();
+
+    // global server is always affine-cloud
+    const server = this.serversService.server$('affine-cloud').value;
+    if (!server) {
+      throw new Error('No server found');
+    }
+    this.server = server;
+  }
+
+  async waitForSelfhostedServerConfig() {
+    if (this.server.config$.value.type === ServerDeploymentType.Selfhosted) {
+      await this.server.waitForConfigRevalidation();
+    }
+  }
+}

packages/frontend/core/src/modules/cloud/services/fetch.ts

@@ -3,22 +3,18 @@ import { UserFriendlyError } from '@affine/graphql';
 import { fromPromise, Service } from '@toeverything/infra';
 
 import { BackendError, NetworkError } from '../error';
-import type { FetchProvider } from '../provider/fetch';
-
-export function getAffineCloudBaseUrl(): string {
-  if (BUILD_CONFIG.isElectron || BUILD_CONFIG.isIOS || BUILD_CONFIG.isAndroid) {
-    return BUILD_CONFIG.serverUrlPrefix;
-  }
-  const { protocol, hostname, port } = window.location;
-  return `${protocol}//${hostname}${port ? `:${port}` : ''}`;
-}
+import type { RawFetchProvider } from '../provider/fetch';
+import type { ServerService } from './server';
 
 const logger = new DebugLogger('affine:fetch');
 
 export type FetchInit = RequestInit & { timeout?: number };
 
 export class FetchService extends Service {
-  constructor(private readonly fetchProvider: FetchProvider) {
+  constructor(
+    private readonly fetchProvider: RawFetchProvider,
+    private readonly serverService: ServerService
+  ) {
     super();
   }
   rxFetch = (
@@ -55,7 +51,7 @@ export class FetchService extends Service {
     }, timeout);
 
     const res = await this.fetchProvider
-      .fetch(new URL(input, getAffineCloudBaseUrl()), {
+      .fetch(new URL(input, this.serverService.server.serverMetadata.baseUrl), {
         ...init,
         signal: abortController.signal,
       })

packages/frontend/core/src/modules/cloud/services/server-config.ts

@@ -1,12 +0,0 @@
-import { ApplicationStarted, OnEvent, Service } from '@toeverything/infra';
-
-import { ServerConfig } from '../entities/server-config';
-
-@OnEvent(ApplicationStarted, e => e.onApplicationStart)
-export class ServerConfigService extends Service {
-  serverConfig = this.framework.createEntity(ServerConfig);
-
-  private onApplicationStart() {
-    this.serverConfig.revalidate();
-  }
-}

packages/frontend/core/src/modules/cloud/services/server.ts

@@ -0,0 +1,10 @@
+import { Service } from '@toeverything/infra';
+
+import type { ServerScope } from '../scopes/server';
+
+export class ServerService extends Service {
+  readonly server = this.serverScope.server;
+  constructor(private readonly serverScope: ServerScope) {
+    super();
+  }
+}

packages/frontend/core/src/modules/cloud/services/servers.ts

@@ -0,0 +1,55 @@
+import { LiveData, ObjectPool, Service } from '@toeverything/infra';
+import { finalize, of, switchMap } from 'rxjs';
+
+import { Server } from '../entities/server';
+import type { ServerListStore } from '../stores/server-list';
+import type { ServerConfig, ServerMetadata } from '../types';
+
+export class ServersService extends Service {
+  constructor(private readonly serverListStore: ServerListStore) {
+    super();
+  }
+
+  servers$ = LiveData.from<Server[]>(
+    this.serverListStore.watchServerList().pipe(
+      switchMap(metadatas => {
+        const refs = metadatas.map(metadata => {
+          const exists = this.serverPool.get(metadata.id);
+          if (exists) {
+            return exists;
+          }
+          const server = this.framework.createEntity(Server, {
+            serverMetadata: metadata,
+          });
+          const ref = this.serverPool.put(metadata.id, server);
+          return ref;
+        });
+
+        return of(refs.map(ref => ref.obj)).pipe(
+          finalize(() => {
+            refs.forEach(ref => {
+              ref.release();
+            });
+          })
+        );
+      })
+    ),
+    [] as any
+  );
+
+  server$(id: string) {
+    return this.servers$.map(servers =>
+      servers.find(server => server.id === id)
+    );
+  }
+
+  private readonly serverPool = new ObjectPool<string, Server>({
+    onDelete(obj) {
+      obj.dispose();
+    },
+  });
+
+  addServer(metadata: ServerMetadata, config: ServerConfig) {
+    this.serverListStore.addServer(metadata, config);
+  }
+}

packages/frontend/core/src/modules/cloud/services/websocket.ts

@@ -2,14 +2,14 @@ import { ApplicationStarted, OnEvent, Service } from '@toeverything/infra';
 import { Manager } from 'socket.io-client';
 
 import type { WebSocketAuthProvider } from '../provider/websocket-auth';
-import { getAffineCloudBaseUrl } from '../services/fetch';
 import type { AuthService } from './auth';
 import { AccountChanged } from './auth';
+import type { ServerService } from './server';
 
 @OnEvent(AccountChanged, e => e.update)
 @OnEvent(ApplicationStarted, e => e.update)
 export class WebSocketService extends Service {
-  ioManager: Manager = new Manager(`${getAffineCloudBaseUrl()}/`, {
+  ioManager: Manager = new Manager(`${this.serverService.server.baseUrl}/`, {
     autoConnect: false,
     transports: ['websocket'],
     secure: location.protocol === 'https:',
@@ -18,7 +18,7 @@ export class WebSocketService extends Service {
     auth: this.webSocketAuthProvider
       ? cb => {
           this.webSocketAuthProvider
-            ?.getAuthToken(`${getAffineCloudBaseUrl()}/`)
+            ?.getAuthToken(`${this.serverService.server.baseUrl}/`)
             .then(v => {
               cb(v ?? {});
             })
@@ -31,6 +31,7 @@ export class WebSocketService extends Service {
   refCount = 0;
 
   constructor(
+    private readonly serverService: ServerService,
     private readonly authService: AuthService,
     private readonly webSocketAuthProvider?: WebSocketAuthProvider
   ) {

packages/frontend/core/src/modules/cloud/services/workspace-server.ts

@@ -0,0 +1,11 @@
+import { Service } from '@toeverything/infra';
+
+import type { Server } from '../entities/server';
+
+export class WorkspaceServerService extends Service {
+  server: Server | null = null;
+
+  bindServer(server: Server) {
+    this.server = server;
+  }
+}

packages/frontend/core/src/modules/cloud/stores/server-config.ts

@@ -1,13 +1,17 @@
 import {
+  type OauthProvidersQuery,
   oauthProvidersQuery,
+  type ServerConfigQuery,
   serverConfigQuery,
   ServerFeature,
 } from '@affine/graphql';
 import { Store } from '@toeverything/infra';
 
-import type { ServerConfigType } from '../entities/server-config';
 import type { GraphQLService } from '../services/graphql';
 
+export type ServerConfigType = ServerConfigQuery['serverConfig'] &
+  OauthProvidersQuery['serverConfig'];
+
 export class ServerConfigStore extends Store {
   constructor(private readonly gqlService: GraphQLService) {
     super();

packages/frontend/core/src/modules/cloud/stores/server-list.ts

@@ -0,0 +1,85 @@
+import type { GlobalStateService } from '@toeverything/infra';
+import { Store } from '@toeverything/infra';
+import { map } from 'rxjs';
+
+import { BUILD_IN_SERVERS } from '../constant';
+import type { ServerConfig, ServerMetadata } from '../types';
+
+export class ServerListStore extends Store {
+  constructor(private readonly globalStateService: GlobalStateService) {
+    super();
+  }
+
+  watchServerList() {
+    return this.globalStateService.globalState
+      .watch<ServerMetadata[]>('serverList')
+      .pipe(
+        map(servers => {
+          const serverList = [...BUILD_IN_SERVERS, ...(servers ?? [])];
+          return serverList;
+        })
+      );
+  }
+
+  getServerList() {
+    return [
+      ...BUILD_IN_SERVERS,
+      ...(this.globalStateService.globalState.get<ServerMetadata[]>(
+        'serverList'
+      ) ?? []),
+    ];
+  }
+
+  addServer(server: ServerMetadata, serverConfig: ServerConfig) {
+    this.updateServerConfig(server.id, serverConfig);
+    const oldServers =
+      this.globalStateService.globalState.get<ServerMetadata[]>('serverList') ??
+      [];
+
+    this.globalStateService.globalState.set<ServerMetadata[]>('serverList', [
+      ...oldServers,
+      server,
+    ]);
+  }
+
+  removeServer(serverId: string) {
+    const oldServers =
+      this.globalStateService.globalState.get<ServerMetadata[]>('serverList') ??
+      [];
+
+    this.globalStateService.globalState.set<ServerMetadata[]>(
+      'serverList',
+      oldServers.filter(server => server.id !== serverId)
+    );
+  }
+
+  watchServerConfig(serverId: string) {
+    return this.globalStateService.globalState
+      .watch<ServerConfig>(`serverConfig:${serverId}`)
+      .pipe(
+        map(config => {
+          if (!config) {
+            return BUILD_IN_SERVERS.find(server => server.id === serverId)
+              ?.config;
+          } else {
+            return config;
+          }
+        })
+      );
+  }
+
+  getServerConfig(serverId: string) {
+    return (
+      this.globalStateService.globalState.get<ServerConfig>(
+        `serverConfig:${serverId}`
+      ) ?? BUILD_IN_SERVERS.find(server => server.id === serverId)?.config
+    );
+  }
+
+  updateServerConfig(serverId: string, config: ServerConfig) {
+    this.globalStateService.globalState.set<ServerConfig>(
+      `serverConfig:${serverId}`,
+      config
+    );
+  }
+}

packages/frontend/core/src/modules/cloud/stores/subscription.ts

@@ -16,18 +16,19 @@ import { Store } from '@toeverything/infra';
 
 import type { UrlService } from '../../url';
 import type { SubscriptionType } from '../entities/subscription';
-import { getAffineCloudBaseUrl } from '../services/fetch';
 import type { GraphQLService } from '../services/graphql';
+import type { ServerService } from '../services/server';
 
 const SUBSCRIPTION_CACHE_KEY = 'subscription:';
 
 const getDefaultSubscriptionSuccessCallbackLink = (
+  baseUrl: string,
   plan: SubscriptionPlan | null,
   scheme?: string
 ) => {
   const path =
     plan === SubscriptionPlan.AI ? '/ai-upgrade-success' : '/upgrade-success';
-  const urlString = getAffineCloudBaseUrl() + path;
+  const urlString = baseUrl + path;
   const url = new URL(urlString);
   if (scheme) {
     url.searchParams.set('scheme', scheme);
@@ -39,7 +40,8 @@ export class SubscriptionStore extends Store {
   constructor(
     private readonly gqlService: GraphQLService,
     private readonly globalCache: GlobalCache,
-    private readonly urlService: UrlService
+    private readonly urlService: UrlService,
+    private readonly serverService: ServerService
   ) {
     super();
   }
@@ -132,6 +134,7 @@ export class SubscriptionStore extends Store {
           successCallbackLink:
             input.successCallbackLink ||
             getDefaultSubscriptionSuccessCallbackLink(
+              this.serverService.server.baseUrl,
               input.plan,
               this.urlService.getClientScheme()
             ),

packages/frontend/core/src/modules/cloud/types.ts

@@ -0,0 +1,22 @@
+import type {
+  CredentialsRequirementType,
+  OAuthProviderType,
+  ServerDeploymentType,
+  ServerFeature,
+} from '@affine/graphql';
+
+export interface ServerMetadata {
+  id: string;
+
+  baseUrl: string;
+}
+
+export interface ServerConfig {
+  serverName: string;
+  features: ServerFeature[];
+  oauthProviders: OAuthProviderType[];
+  type: ServerDeploymentType;
+  initialized?: boolean;
+  version?: string;
+  credentialsRequirement: CredentialsRequirementType;
+}

packages/frontend/core/src/modules/desktop-api/service/desktop-api.ts

@@ -15,7 +15,7 @@ import {
   useNavigationType,
 } from 'react-router-dom';
 
-import { AuthService } from '../../cloud';
+import { AuthService, ServersService } from '../../cloud';
 import type { DesktopApi } from '../entities/electron-api';
 
 @OnEvent(ApplicationStarted, e => e.setupStartListener)
@@ -140,10 +140,19 @@ export class DesktopApiService extends Service {
   private setupAuthRequestEvent() {
     this.events.ui.onAuthenticationRequest(({ method, payload }) => {
       (async () => {
-        const authService = this.framework.get(AuthService);
         if (!(await this.api.handler.ui.isActiveTab())) {
           return;
         }
+
+        // TODO: support multiple servers
+        const affineCloudServer = this.framework
+          .get(ServersService)
+          .server$('affine-cloud').value;
+        if (!affineCloudServer) {
+          throw new Error('Affine Cloud server not found');
+        }
+        const authService = affineCloudServer.scope.get(AuthService);
+
         switch (method) {
           case 'magic-link': {
             const { email, token } = payload;

packages/frontend/core/src/modules/editor-setting/impls/user-db.ts

@@ -2,21 +2,29 @@ import type { GlobalState } from '@toeverything/infra';
 import { Service } from '@toeverything/infra';
 import { map, type Observable, switchMap } from 'rxjs';
 
-import type { UserDBService } from '../../userspace';
+import type { ServersService } from '../../cloud';
+import { UserDBService } from '../../userspace';
 import type { EditorSettingProvider } from '../provider/editor-setting-provider';
 
 export class CurrentUserDBEditorSettingProvider
   extends Service
   implements EditorSettingProvider
 {
-  currentUserDB$ = this.userDBService.currentUserDB.db$;
+  private readonly currentUserDB$;
   fallback = new GlobalStateEditorSettingProvider(this.globalState);
 
   constructor(
-    public readonly userDBService: UserDBService,
+    public readonly serversService: ServersService,
     public readonly globalState: GlobalState
   ) {
     super();
+
+    const affineCloudServer = this.serversService.server$('affine-cloud').value; // TODO: support multiple servers
+    if (!affineCloudServer) {
+      throw new Error('affine-cloud server not found');
+    }
+    const userDBService = affineCloudServer.scope.get(UserDBService);
+    this.currentUserDB$ = userDBService.currentUserDB.db$;
   }
 
   set(key: string, value: string): void {

packages/frontend/core/src/modules/editor-setting/index.ts

@@ -4,9 +4,9 @@ import {
   GlobalStateService,
 } from '@toeverything/infra';
 
+import { ServersService } from '../cloud';
 import { DesktopApiService } from '../desktop-api';
 import { I18n } from '../i18n';
-import { UserDBService } from '../userspace';
 import { EditorSetting } from './entities/editor-setting';
 import { CurrentUserDBEditorSettingProvider } from './impls/user-db';
 import { EditorSettingProvider } from './provider/editor-setting-provider';
@@ -21,7 +21,7 @@ export function configureEditorSettingModule(framework: Framework) {
     .service(EditorSettingService)
     .entity(EditorSetting, [EditorSettingProvider])
     .impl(EditorSettingProvider, CurrentUserDBEditorSettingProvider, [
-      UserDBService,
+      ServersService,
       GlobalState,
     ]);
 }

packages/frontend/core/src/modules/favorite/index.ts

@@ -5,7 +5,7 @@ import {
   WorkspaceService,
 } from '@toeverything/infra';
 
-import { AuthService } from '../cloud';
+import { WorkspaceServerService } from '../cloud';
 import { FavoriteList } from './entities/favorite-list';
 import { FavoriteService } from './services/favorite';
 import {
@@ -27,7 +27,11 @@ export function configureFavoriteModule(framework: Framework) {
     .scope(WorkspaceScope)
     .service(FavoriteService)
     .entity(FavoriteList, [FavoriteStore])
-    .store(FavoriteStore, [AuthService, WorkspaceDBService, WorkspaceService])
+    .store(FavoriteStore, [
+      WorkspaceDBService,
+      WorkspaceService,
+      WorkspaceServerService,
+    ])
     .service(MigrationFavoriteItemsAdapter, [WorkspaceService])
     .service(CompatibleFavoriteItemsAdapter, [FavoriteService]);
 }

packages/frontend/core/src/modules/favorite/stores/favorite.ts

@@ -3,7 +3,7 @@ import type { WorkspaceDBService, WorkspaceService } from '@toeverything/infra';
 import { LiveData, Store } from '@toeverything/infra';
 import { map } from 'rxjs';
 
-import type { AuthService } from '../../cloud';
+import { AuthService, type WorkspaceServerService } from '../../cloud';
 import type { FavoriteSupportType } from '../constant';
 import { isFavoriteSupportType } from '../constant';
 
@@ -14,27 +14,31 @@ export interface FavoriteRecord {
 }
 
 export class FavoriteStore extends Store {
+  authService = this.workspaceServerService.server?.scope.get(AuthService);
   constructor(
-    private readonly authService: AuthService,
     private readonly workspaceDBService: WorkspaceDBService,
-    private readonly workspaceService: WorkspaceService
+    private readonly workspaceService: WorkspaceService,
+    private readonly workspaceServerService: WorkspaceServerService
   ) {
     super();
   }
 
   private get userdataDB$() {
-    return this.authService.session.account$.map(account => {
-      // if is local workspace or no account, use __local__ userdata
-      // sometimes we may have cloud workspace but no account for a short time, we also use __local__ userdata
-      if (
-        this.workspaceService.workspace.meta.flavour ===
-          WorkspaceFlavour.LOCAL ||
-        !account
-      ) {
-        return this.workspaceDBService.userdataDB('__local__');
-      }
-      return this.workspaceDBService.userdataDB(account.id);
-    });
+    // if is local workspace or no account, use __local__ userdata
+    // sometimes we may have cloud workspace but no account for a short time, we also use __local__ userdata
+    if (
+      this.workspaceService.workspace.meta.flavour === WorkspaceFlavour.LOCAL ||
+      !this.authService
+    ) {
+      return new LiveData(this.workspaceDBService.userdataDB('__local__'));
+    } else {
+      return this.authService.session.account$.map(account => {
+        if (!account) {
+          return this.workspaceDBService.userdataDB('__local__');
+        }
+        return this.workspaceDBService.userdataDB(account.id);
+      });
+    }
   }
 
   watchIsLoading() {

packages/frontend/core/src/modules/permissions/index.ts

@@ -2,7 +2,6 @@ export type { Member } from './entities/members';
 export { WorkspaceMembersService } from './services/members';
 export { WorkspacePermissionService } from './services/permission';
 
-import { GraphQLService } from '@affine/core/modules/cloud';
 import {
   type Framework,
   WorkspaceScope,
@@ -10,6 +9,7 @@ import {
   WorkspacesService,
 } from '@toeverything/infra';
 
+import { WorkspaceServerService } from '../cloud';
 import { WorkspaceMembers } from './entities/members';
 import { WorkspacePermission } from './entities/permission';
 import { WorkspaceMembersService } from './services/members';
@@ -25,9 +25,9 @@ export function configurePermissionsModule(framework: Framework) {
       WorkspacesService,
       WorkspacePermissionStore,
     ])
-    .store(WorkspacePermissionStore, [GraphQLService])
+    .store(WorkspacePermissionStore, [WorkspaceServerService])
     .entity(WorkspacePermission, [WorkspaceService, WorkspacePermissionStore])
     .service(WorkspaceMembersService)
-    .store(WorkspaceMembersStore, [GraphQLService])
+    .store(WorkspaceMembersStore, [WorkspaceServerService])
     .entity(WorkspaceMembers, [WorkspaceMembersStore, WorkspaceService]);
 }

packages/frontend/core/src/modules/permissions/stores/members.ts

@@ -1,10 +1,10 @@
 import { getMembersByWorkspaceIdQuery } from '@affine/graphql';
 import { Store } from '@toeverything/infra';
 
-import type { GraphQLService } from '../../cloud';
+import type { WorkspaceServerService } from '../../cloud';
 
 export class WorkspaceMembersStore extends Store {
-  constructor(private readonly graphqlService: GraphQLService) {
+  constructor(private readonly workspaceServerService: WorkspaceServerService) {
     super();
   }
 
@@ -14,7 +14,10 @@ export class WorkspaceMembersStore extends Store {
     take: number,
     signal?: AbortSignal
   ) {
-    const data = await this.graphqlService.gql({
+    if (!this.workspaceServerService.server) {
+      throw new Error('No Server');
+    }
+    const data = await this.workspaceServerService.server.gql({
       query: getMembersByWorkspaceIdQuery,
       variables: {
         workspaceId,

packages/frontend/core/src/modules/permissions/stores/permission.ts

@@ -1,14 +1,17 @@
-import type { GraphQLService } from '@affine/core/modules/cloud';
+import type { WorkspaceServerService } from '@affine/core/modules/cloud';
 import { getIsOwnerQuery, leaveWorkspaceMutation } from '@affine/graphql';
 import { Store } from '@toeverything/infra';
 
 export class WorkspacePermissionStore extends Store {
-  constructor(private readonly graphqlService: GraphQLService) {
+  constructor(private readonly workspaceServerService: WorkspaceServerService) {
     super();
   }
 
   async fetchIsOwner(workspaceId: string, signal?: AbortSignal) {
-    const isOwner = await this.graphqlService.gql({
+    if (!this.workspaceServerService.server) {
+      throw new Error('No Server');
+    }
+    const isOwner = await this.workspaceServerService.server.gql({
       query: getIsOwnerQuery,
       variables: {
         workspaceId,
@@ -23,7 +26,10 @@ export class WorkspacePermissionStore extends Store {
    * @param workspaceName for send email
    */
   async leaveWorkspace(workspaceId: string, workspaceName: string) {
-    await this.graphqlService.gql({
+    if (!this.workspaceServerService.server) {
+      throw new Error('No Server');
+    }
+    await this.workspaceServerService.server.gql({
       query: leaveWorkspaceMutation,
       variables: {
         workspaceId,

packages/frontend/core/src/modules/quota/index.ts

@@ -1,12 +1,12 @@
 export { WorkspaceQuotaService } from './services/quota';
 
-import { GraphQLService } from '@affine/core/modules/cloud';
 import {
   type Framework,
   WorkspaceScope,
   WorkspaceService,
 } from '@toeverything/infra';
 
+import { WorkspaceServerService } from '../cloud';
 import { WorkspaceQuota } from './entities/quota';
 import { WorkspaceQuotaService } from './services/quota';
 import { WorkspaceQuotaStore } from './stores/quota';
@@ -15,6 +15,6 @@ export function configureQuotaModule(framework: Framework) {
   framework
     .scope(WorkspaceScope)
     .service(WorkspaceQuotaService)
-    .store(WorkspaceQuotaStore, [GraphQLService])
+    .store(WorkspaceQuotaStore, [WorkspaceServerService])
     .entity(WorkspaceQuota, [WorkspaceService, WorkspaceQuotaStore]);
 }

packages/frontend/core/src/modules/quota/stores/quota.ts

@@ -1,14 +1,17 @@
-import type { GraphQLService } from '@affine/core/modules/cloud';
+import type { WorkspaceServerService } from '@affine/core/modules/cloud';
 import { workspaceQuotaQuery } from '@affine/graphql';
 import { Store } from '@toeverything/infra';
 
 export class WorkspaceQuotaStore extends Store {
-  constructor(private readonly graphqlService: GraphQLService) {
+  constructor(private readonly workspaceServerService: WorkspaceServerService) {
     super();
   }
 
   async fetchWorkspaceQuota(workspaceId: string, signal?: AbortSignal) {
-    const data = await this.graphqlService.gql({
+    if (!this.workspaceServerService.server) {
+      throw new Error('No Server');
+    }
+    const data = await this.workspaceServerService.server.gql({
       query: workspaceQuotaQuery,
       variables: {
         id: workspaceId,

packages/frontend/core/src/modules/share-doc/index.ts

@@ -12,7 +12,7 @@ import {
   WorkspaceService,
 } from '@toeverything/infra';
 
-import { FetchService, GraphQLService } from '../cloud';
+import { RawFetchProvider, WorkspaceServerService } from '../cloud';
 import { ShareDocsList } from './entities/share-docs-list';
 import { ShareInfo } from './entities/share-info';
 import { ShareReader } from './entities/share-reader';
@@ -27,10 +27,10 @@ export function configureShareDocsModule(framework: Framework) {
   framework
     .service(ShareReaderService)
     .entity(ShareReader, [ShareReaderStore])
-    .store(ShareReaderStore, [FetchService])
+    .store(ShareReaderStore, [RawFetchProvider])
     .scope(WorkspaceScope)
     .service(ShareDocsListService, [WorkspaceService])
-    .store(ShareDocsStore, [GraphQLService])
+    .store(ShareDocsStore, [WorkspaceServerService])
     .entity(ShareDocsList, [
       WorkspaceService,
       ShareDocsStore,
@@ -39,5 +39,5 @@ export function configureShareDocsModule(framework: Framework) {
     .scope(DocScope)
     .service(ShareInfoService)
     .entity(ShareInfo, [WorkspaceService, DocService, ShareStore])
-    .store(ShareStore, [GraphQLService]);
+    .store(ShareStore, [WorkspaceServerService]);
 }

packages/frontend/core/src/modules/share-doc/stores/share-docs.ts

@@ -1,14 +1,17 @@
-import type { GraphQLService } from '@affine/core/modules/cloud';
+import type { WorkspaceServerService } from '@affine/core/modules/cloud';
 import { getWorkspacePublicPagesQuery } from '@affine/graphql';
 import { Store } from '@toeverything/infra';
 
 export class ShareDocsStore extends Store {
-  constructor(private readonly graphqlService: GraphQLService) {
+  constructor(private readonly workspaceServerService: WorkspaceServerService) {
     super();
   }
 
   async getWorkspacesShareDocs(workspaceId: string, signal?: AbortSignal) {
-    const data = await this.graphqlService.gql({
+    if (!this.workspaceServerService.server) {
+      throw new Error('No Server');
+    }
+    const data = await this.workspaceServerService.server.gql({
       query: getWorkspacePublicPagesQuery,
       variables: {
         workspaceId: workspaceId,

packages/frontend/core/src/modules/share-doc/stores/share-reader.ts

@@ -2,16 +2,20 @@ import { ErrorNames, UserFriendlyError } from '@affine/graphql';
 import type { DocMode } from '@blocksuite/affine/blocks';
 import { Store } from '@toeverything/infra';
 
-import { type FetchService, isBackendError } from '../../cloud';
+import type { RawFetchProvider } from '../../cloud';
+import { isBackendError } from '../../cloud';
 
 export class ShareReaderStore extends Store {
-  constructor(private readonly fetchService: FetchService) {
+  constructor(private readonly rawFetch?: RawFetchProvider) {
     super();
   }
 
   async loadShare(workspaceId: string, docId: string) {
+    if (!this.rawFetch) {
+      throw new Error('No Fetch Service');
+    }
     try {
-      const docResponse = await this.fetchService.fetch(
+      const docResponse = await this.rawFetch.fetch(
         `/api/workspaces/${workspaceId}/docs/${docId}`
       );
       const publishMode = docResponse.headers.get(
@@ -19,7 +23,7 @@ export class ShareReaderStore extends Store {
       ) as DocMode | null;
       const docBinary = await docResponse.arrayBuffer();
 
-      const workspaceResponse = await this.fetchService.fetch(
+      const workspaceResponse = await this.rawFetch.fetch(
         `/api/workspaces/${workspaceId}/docs/${workspaceId}`
       );
       const workspaceBinary = await workspaceResponse.arrayBuffer();

packages/frontend/core/src/modules/share-doc/stores/share.ts

@@ -6,10 +6,10 @@ import {
 } from '@affine/graphql';
 import { Store } from '@toeverything/infra';
 
-import type { GraphQLService } from '../../cloud';
+import type { WorkspaceServerService } from '../../cloud';
 
 export class ShareStore extends Store {
-  constructor(private readonly gqlService: GraphQLService) {
+  constructor(private readonly workspaceServerService: WorkspaceServerService) {
     super();
   }
 
@@ -18,7 +18,10 @@ export class ShareStore extends Store {
     docId: string,
     signal?: AbortSignal
   ) {
-    const data = await this.gqlService.gql({
+    if (!this.workspaceServerService.server) {
+      throw new Error('No Server');
+    }
+    const data = await this.workspaceServerService.server.gql({
       query: getWorkspacePublicPageByIdQuery,
       variables: {
         pageId: docId,
@@ -37,7 +40,10 @@ export class ShareStore extends Store {
     docMode?: PublicPageMode,
     signal?: AbortSignal
   ) {
-    await this.gqlService.gql({
+    if (!this.workspaceServerService.server) {
+      throw new Error('No Server');
+    }
+    await this.workspaceServerService.server.gql({
       query: publishPageMutation,
       variables: {
         pageId,
@@ -55,7 +61,10 @@ export class ShareStore extends Store {
     pageId: string,
     signal?: AbortSignal
   ) {
-    await this.gqlService.gql({
+    if (!this.workspaceServerService.server) {
+      throw new Error('No Server');
+    }
+    await this.workspaceServerService.server.gql({
       query: revokePublicPageMutation,
       variables: {
         pageId,

packages/frontend/core/src/modules/share-setting/index.ts

@@ -1,12 +1,12 @@
 export { WorkspaceShareSettingService } from './services/share-setting';
 
-import { GraphQLService } from '@affine/core/modules/cloud';
 import {
   type Framework,
   WorkspaceScope,
   WorkspaceService,
 } from '@toeverything/infra';
 
+import { WorkspaceServerService } from '../cloud';
 import { WorkspaceShareSetting } from './entities/share-setting';
 import { WorkspaceShareSettingService } from './services/share-setting';
 import { WorkspaceShareSettingStore } from './stores/share-setting';
@@ -15,7 +15,7 @@ export function configureShareSettingModule(framework: Framework) {
   framework
     .scope(WorkspaceScope)
     .service(WorkspaceShareSettingService)
-    .store(WorkspaceShareSettingStore, [GraphQLService])
+    .store(WorkspaceShareSettingStore, [WorkspaceServerService])
     .entity(WorkspaceShareSetting, [
       WorkspaceService,
       WorkspaceShareSettingStore,

packages/frontend/core/src/modules/share-setting/stores/share-setting.ts

@@ -1,4 +1,4 @@
-import type { GraphQLService } from '@affine/core/modules/cloud';
+import type { WorkspaceServerService } from '@affine/core/modules/cloud';
 import {
   getEnableUrlPreviewQuery,
   setEnableUrlPreviewMutation,
@@ -6,7 +6,7 @@ import {
 import { Store } from '@toeverything/infra';
 
 export class WorkspaceShareSettingStore extends Store {
-  constructor(private readonly graphqlService: GraphQLService) {
+  constructor(private readonly workspaceServerService: WorkspaceServerService) {
     super();
   }
 
@@ -14,7 +14,10 @@ export class WorkspaceShareSettingStore extends Store {
     workspaceId: string,
     signal?: AbortSignal
   ) {
-    const data = await this.graphqlService.gql({
+    if (!this.workspaceServerService.server) {
+      throw new Error('No Server');
+    }
+    const data = await this.workspaceServerService.server.gql({
       query: getEnableUrlPreviewQuery,
       variables: {
         id: workspaceId,
@@ -31,7 +34,10 @@ export class WorkspaceShareSettingStore extends Store {
     enableUrlPreview: boolean,
     signal?: AbortSignal
   ) {
-    await this.graphqlService.gql({
+    if (!this.workspaceServerService.server) {
+      throw new Error('No Server');
+    }
+    await this.workspaceServerService.server.gql({
       query: setEnableUrlPreviewMutation,
       variables: {
         id: workspaceId,

packages/frontend/core/src/modules/telemetry/index.ts

@@ -1,8 +1,8 @@
 import { type Framework, GlobalContextService } from '@toeverything/infra';
 
-import { AuthService } from '../cloud';
+import { ServersService } from '../cloud/services/servers';
 import { TelemetryService } from './services/telemetry';
 
 export function configureTelemetryModule(framework: Framework) {
-  framework.service(TelemetryService, [AuthService, GlobalContextService]);
+  framework.service(TelemetryService, [ServersService, GlobalContextService]);
 }

packages/frontend/core/src/modules/telemetry/services/telemetry.ts

@@ -2,26 +2,31 @@ import { mixpanel } from '@affine/track';
 import type { GlobalContextService } from '@toeverything/infra';
 import { ApplicationStarted, OnEvent, Service } from '@toeverything/infra';
 
-import {
-  AccountChanged,
-  type AuthAccountInfo,
-  type AuthService,
-} from '../../cloud';
+import { AccountChanged, type AuthAccountInfo, AuthService } from '../../cloud';
 import { AccountLoggedOut } from '../../cloud/services/auth';
+import type { ServersService } from '../../cloud/services/servers';
 
 @OnEvent(ApplicationStarted, e => e.onApplicationStart)
 @OnEvent(AccountChanged, e => e.updateIdentity)
 @OnEvent(AccountLoggedOut, e => e.onAccountLoggedOut)
 export class TelemetryService extends Service {
+  private readonly authService;
   constructor(
-    private readonly auth: AuthService,
+    serversService: ServersService,
     private readonly globalContextService: GlobalContextService
   ) {
     super();
+
+    // TODO: support multiple servers
+    const affineCloudServer = serversService.server$('affine-cloud').value;
+    if (!affineCloudServer) {
+      throw new Error('affine-cloud server not found');
+    }
+    this.authService = affineCloudServer.scope.get(AuthService);
   }
 
   onApplicationStart() {
-    const account = this.auth.session.account$.value;
+    const account = this.authService.session.account$.value;
     this.updateIdentity(account);
     this.registerMiddlewares();
   }

packages/frontend/core/src/modules/userspace/index.ts

@@ -3,6 +3,7 @@ export { UserspaceService as UserDBService } from './services/userspace';
 import type { Framework } from '@toeverything/infra';
 
 import { AuthService, WebSocketService } from '../cloud';
+import { ServerScope } from '../cloud/scopes/server';
 import { DesktopApiService } from '../desktop-api/service/desktop-api';
 import { CurrentUserDB } from './entities/current-user-db';
 import { UserDB } from './entities/user-db';
@@ -15,6 +16,7 @@ import { UserspaceService } from './services/userspace';
 
 export function configureUserspaceModule(framework: Framework) {
   framework
+    .scope(ServerScope)
     .service(UserspaceService)
     .entity(CurrentUserDB, [UserspaceService, AuthService])
     .entity(UserDB)

packages/frontend/core/src/modules/workspace-engine/impls/cloud.ts

@@ -19,6 +19,7 @@ import {
   onComplete,
   OnEvent,
   onStart,
+  type Workspace,
   type WorkspaceEngineProvider,
   type WorkspaceFlavourProvider,
   type WorkspaceMetadata,
@@ -30,13 +31,16 @@ import { nanoid } from 'nanoid';
 import { EMPTY, map, mergeMap } from 'rxjs';
 import { applyUpdate, encodeStateAsUpdate } from 'yjs';
 
-import type {
+import type { Server } from '../../cloud';
+import {
+  AccountChanged,
   AuthService,
   FetchService,
   GraphQLService,
   WebSocketService,
+  WorkspaceServerService,
 } from '../../cloud';
-import { AccountChanged } from '../../cloud';
+import type { ServersService } from '../../cloud/services/servers';
 import type { WorkspaceEngineStorageProvider } from '../providers/engine';
 import { BroadcastChannelAwarenessConnection } from './engine/awareness-broadcast-channel';
 import { CloudAwarenessConnection } from './engine/awareness-cloud';
@@ -55,16 +59,30 @@ export class CloudWorkspaceFlavourProviderService
   extends Service
   implements WorkspaceFlavourProvider
 {
+  private readonly authService: AuthService;
+  private readonly webSocketService: WebSocketService;
+  private readonly fetchService: FetchService;
+  private readonly graphqlService: GraphQLService;
+  private readonly affineCloudServer: Server;
+
   constructor(
     private readonly globalState: GlobalState,
-    private readonly authService: AuthService,
     private readonly storageProvider: WorkspaceEngineStorageProvider,
-    private readonly graphqlService: GraphQLService,
-    private readonly webSocketService: WebSocketService,
-    private readonly fetchService: FetchService
+    serversService: ServersService
   ) {
     super();
+    // TODO: support multiple servers
+    const affineCloudServer = serversService.server$('affine-cloud').value;
+    if (!affineCloudServer) {
+      throw new Error('affine-cloud server not found');
+    }
+    this.affineCloudServer = affineCloudServer;
+    this.authService = affineCloudServer.scope.get(AuthService);
+    this.webSocketService = affineCloudServer.scope.get(WebSocketService);
+    this.fetchService = affineCloudServer.scope.get(FetchService);
+    this.graphqlService = affineCloudServer.scope.get(GraphQLService);
   }
+
   flavour: WorkspaceFlavour = WorkspaceFlavour.AFFINE_CLOUD;
 
   async deleteWorkspace(id: string): Promise<void> {
@@ -244,6 +262,7 @@ export class CloudWorkspaceFlavourProviderService
     );
     return await cloudBlob.get(blob);
   }
+
   getEngineProvider(workspaceId: string): WorkspaceEngineProvider {
     return {
       getAwarenessConnections: () => {
@@ -274,6 +293,13 @@ export class CloudWorkspaceFlavourProviderService
     };
   }
 
+  onWorkspaceInitialized(workspace: Workspace): void {
+    // bind the workspace to the affine cloud server
+    workspace.scope
+      .get(WorkspaceServerService)
+      .bindServer(this.affineCloudServer);
+  }
+
   private async getIsOwner(workspaceId: string, signal?: AbortSignal) {
     return (
       await this.graphqlService.gql({

packages/frontend/core/src/modules/workspace-engine/index.ts

@@ -1,15 +1,10 @@
-import {
-  AuthService,
-  FetchService,
-  GraphQLService,
-  WebSocketService,
-} from '@affine/core/modules/cloud';
 import {
   type Framework,
   GlobalState,
   WorkspaceFlavourProvider,
 } from '@toeverything/infra';
 
+import { ServersService } from '../cloud/services/servers';
 import { DesktopApiService } from '../desktop-api';
 import { CloudWorkspaceFlavourProviderService } from './impls/cloud';
 import { IndexedDBBlobStorage } from './impls/engine/blob-indexeddb';
@@ -31,11 +26,8 @@ export function configureBrowserWorkspaceFlavours(framework: Framework) {
     ])
     .service(CloudWorkspaceFlavourProviderService, [
       GlobalState,
-      AuthService,
       WorkspaceEngineStorageProvider,
-      GraphQLService,
-      WebSocketService,
-      FetchService,
+      ServersService,
     ])
     .impl(WorkspaceFlavourProvider('CLOUD'), p =>
       p.get(CloudWorkspaceFlavourProviderService)

packages/frontend/graphql/src/graphql/index.ts

@@ -998,6 +998,7 @@ query serverConfig {
     name
     features
     type
+    initialized
     credentialsRequirement {
       ...CredentialsRequirement
     }

packages/frontend/graphql/src/graphql/server-config.gql

@@ -8,6 +8,7 @@ query serverConfig {
     name
     features
     type
+    initialized
     credentialsRequirement {
       ...CredentialsRequirement
     }

packages/frontend/graphql/src/index.ts

@@ -2,23 +2,3 @@ export * from './error';
 export * from './fetcher';
 export * from './graphql';
 export * from './schema';
-
-import { setupGlobal } from '@affine/env/global';
-
-import { gqlFetcherFactory } from './fetcher';
-
-setupGlobal();
-
-export function getBaseUrl(): string {
-  if (BUILD_CONFIG.isElectron || BUILD_CONFIG.isIOS || BUILD_CONFIG.isAndroid) {
-    return BUILD_CONFIG.serverUrlPrefix;
-  }
-  if (typeof window === 'undefined') {
-    // is nodejs
-    return '';
-  }
-  const { protocol, hostname, port } = window.location;
-  return `${protocol}//${hostname}${port ? `:${port}` : ''}`;
-}
-
-export const fetcher = gqlFetcherFactory(getBaseUrl() + '/graphql');

packages/frontend/graphql/src/schema.ts

@@ -2175,6 +2175,7 @@ export type ServerConfigQuery = {
     name: string;
     features: Array<ServerFeature>;
     type: ServerDeploymentType;
+    initialized: boolean;
     credentialsRequirement: {
       __typename?: 'CredentialsRequirementType';
       password: {