fix(workspace): avoid data loss (hot-fix) (#6114)

enhancement

___

- Introduced a new ESM module resolution setup using `ts-node` to enhance the development and deployment process.
- Implemented a dynamic loader script registration mechanism to facilitate ESM module loading.
- Simplified the predeploy script execution by refining environment variable handling and stdout configuration.
- Updated `package.json` to reflect changes in script commands for better ESM support and added necessary dependencies for `ts-node` and `typescript`.

___

<table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table>
<tr>
  <td>
    <details>
      <summary><strong>loader.js</strong><dd><code>Introduce ESM Module Resolution via ts-node</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

packages/backend/server/scripts/loader.js

<li>Introduced <code>ts-node</code> configuration for ESM module resolution.<br> <li> Exported a <code>resolve</code> function for module resolution.<br>

</details>

  </td>
  <td><a href="https:/toeverything/AFFiNE/pull/5920/files#diff-9ed793897a493633028d510db0742ff38d2d86471c54b17513d4354c51597ef8">+11/-0</a>&nbsp; &nbsp; </td>

</tr>

<tr>
  <td>
    <details>
      <summary><strong>register.js</strong><dd><code>Implement Dynamic Loader Script Registration</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

packages/backend/server/scripts/register.js

<li>Implemented dynamic registration of the loader script.<br> <li> Utilized <code>node:module</code> and <code>node:url</code> for script registration.<br>

</details>

  </td>
  <td><a href="https:/toeverything/AFFiNE/pull/5920/files#diff-64831012a09f2bc4bc5a611ddb8e0871b0e83588de6c5d4f2f5cb1dae8fff244">+4/-0</a>&nbsp; &nbsp; &nbsp; </td>

</tr>

<tr>
  <td>
    <details>
      <summary><strong>self-host-predeploy.js</strong><dd><code>Simplify Predeploy Script Execution</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

packages/backend/server/scripts/self-host-predeploy.js

<li>Simplified environment variable passing to <code>execSync</code>.<br> <li> Changed stdout handling to inherit from the parent process.<br>

</details>

  </td>
  <td><a href="https:/toeverything/AFFiNE/pull/5920/files#diff-bd7b0be14c198018c21dadda6945a779c57d13e4c8584ee62da4baa99d370664">+3/-5</a>&nbsp; &nbsp; &nbsp; </td>

</tr>

<tr>
  <td>
    <details>
      <summary><strong>package.json</strong><dd><code>Update Scripts and Dependencies for ESM Support</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

packages/backend/server/package.json

<li>Updated script commands for ESM compatibility.<br> <li> Added <code>ts-node</code> and <code>typescript</code> dependencies.<br> <li> Removed redundant <code>--es-module-specifier-resolution=node</code> flags.<br>

</details>

  </td>
  <td><a href="https:/toeverything/AFFiNE/pull/5920/files#diff-a6530c6fe539aaa49ff0a7a80bc4362c1d95c419fdd19125415dcc869b31a443">+6/-6</a>&nbsp; &nbsp; &nbsp; </td>

</tr>
</table></td></tr></tr></tbody></table>

___

> ✨ **PR-Agent usage**:
>Comment `/help` on the PR to get a list of all available PR-Agent tools and their descriptions

.eslintignore

@@ -12,3 +12,4 @@ static
 web-static
 public
 packages/frontend/i18n/src/i18n-generated.ts
+packages/frontend/templates/edgeless-templates.gen.ts

.github/actions/deploy/deploy.mjs

@@ -15,12 +15,13 @@ const {
   R2_SECRET_ACCESS_KEY,
   ENABLE_CAPTCHA,
   CAPTCHA_TURNSTILE_SECRET,
-  OAUTH_EMAIL_SENDER,
-  OAUTH_EMAIL_LOGIN,
-  OAUTH_EMAIL_PASSWORD,
+  MAILER_SENDER,
+  MAILER_USER,
+  MAILER_PASSWORD,
   AFFINE_GOOGLE_CLIENT_ID,
   AFFINE_GOOGLE_CLIENT_SECRET,
   CLOUD_SQL_IAM_ACCOUNT,
+  CLOUD_LOGGER_IAM_ACCOUNT,
   GCLOUD_CONNECTION_NAME,
   GCLOUD_CLOUD_SQL_INTERNAL_ENDPOINT,
   REDIS_HOST,
@@ -59,7 +60,9 @@ const createHelmCommand = ({ isDryRun }) => {
       ? [
           `--set-json   web.service.annotations=\"{ \\"cloud.google.com/neg\\": \\"{\\\\\\"ingress\\\\\\": true}\\" }\"`,
           `--set-json   graphql.service.annotations=\"{ \\"cloud.google.com/neg\\": \\"{\\\\\\"ingress\\\\\\": true}\\" }\"`,
+          `--set-json   graphql.serviceAccount.annotations=\"{ \\"iam.gke.io/gcp-service-account\\": \\"${CLOUD_LOGGER_IAM_ACCOUNT}\\"}\"`,
           `--set-json   sync.service.annotations=\"{ \\"cloud.google.com/neg\\": \\"{\\\\\\"ingress\\\\\\": true}\\" }\"`,
+          `--set-json   sync.serviceAccount.annotations=\"{ \\"iam.gke.io/gcp-service-account\\": \\"${CLOUD_LOGGER_IAM_ACCOUNT}\\"}\"`,
           `--set-json   cloud-sql-proxy.serviceAccount.annotations=\"{ \\"iam.gke.io/gcp-service-account\\": \\"${CLOUD_SQL_IAM_ACCOUNT}\\" }\"`,
           `--set-json   cloud-sql-proxy.nodeSelector=\"{ \\"iam.gke.io/gke-metadata-server-enabled\\": \\"true\\" }\"`,
         ]
@@ -103,15 +106,15 @@ const createHelmCommand = ({ isDryRun }) => {
     `--set-string graphql.app.objectStorage.r2.accountId="${R2_ACCOUNT_ID}"`,
     `--set-string graphql.app.objectStorage.r2.accessKeyId="${R2_ACCESS_KEY_ID}"`,
     `--set-string graphql.app.objectStorage.r2.secretAccessKey="${R2_SECRET_ACCESS_KEY}"`,
-    `--set-string graphql.app.oauth.email.sender="${OAUTH_EMAIL_SENDER}"`,
-    `--set-string graphql.app.oauth.email.login="${OAUTH_EMAIL_LOGIN}"`,
-    `--set-string graphql.app.oauth.email.password="${OAUTH_EMAIL_PASSWORD}"`,
+    `--set-string graphql.app.mailer.sender="${MAILER_SENDER}"`,
+    `--set-string graphql.app.mailer.user="${MAILER_USER}"`,
+    `--set-string graphql.app.mailer.password="${MAILER_PASSWORD}"`,
     `--set-string graphql.app.oauth.google.enabled=true`,
     `--set-string graphql.app.oauth.google.clientId="${AFFINE_GOOGLE_CLIENT_ID}"`,
     `--set-string graphql.app.oauth.google.clientSecret="${AFFINE_GOOGLE_CLIENT_SECRET}"`,
     `--set-string graphql.app.payment.stripe.apiKey="${STRIPE_API_KEY}"`,
     `--set-string graphql.app.payment.stripe.webhookKey="${STRIPE_WEBHOOK_KEY}"`,
-    `--set        graphql.app.experimental.enableJwstCodec=true`,
+    `--set        graphql.app.experimental.enableJwstCodec=${isInternal}`,
     `--set        graphql.app.features.earlyAccessPreview=false`,
     `--set        sync.replicaCount=${syncReplicaCount}`,
     `--set-string sync.image.tag="${imageTag}"`,

.github/deployment/front/Dockerfile

@@ -1,6 +1,6 @@
 FROM openresty/openresty:1.21.4.3-0-buster
 WORKDIR /app
-COPY ./packages/frontend/core/dist/index.html ./dist/index.html
+COPY ./packages/frontend/core/dist ./dist
 COPY ./.github/deployment/front/nginx.conf /usr/local/openresty/nginx/conf/nginx.conf
 COPY ./.github/deployment/front/affine.nginx.conf /etc/nginx/conf.d/affine.nginx.conf
 

.github/deployment/node/Dockerfile

@@ -8,4 +8,4 @@ RUN apt-get update && \
   apt-get install -y --no-install-recommends openssl && \
   rm -rf /var/lib/apt/lists/*
 
-CMD ["node", "--es-module-specifier-resolution=node", "./dist/index.js"]
+CMD ["node", "--import", "./scripts/register.js", "./dist/index.js"]

.github/deployment/self-host/compose.yaml

@@ -1,6 +1,6 @@
 services:
   affine:
-    image: ghcr.io/toeverything/affine-graphql:beta
+    image: ghcr.io/toeverything/affine-graphql:stable
     container_name: affine_selfhosted
     command:
       ['sh', '-c', 'node ./scripts/self-host-predeploy && node ./dist/index.js']
@@ -23,13 +23,11 @@ services:
         max-size: '1000m'
     restart: unless-stopped
     environment:
-      - NODE_OPTIONS=--es-module-specifier-resolution node
+      - NODE_OPTIONS="--import=./scripts/register.js"
       - AFFINE_CONFIG_PATH=/root/.affine/config
       - REDIS_SERVER_HOST=redis
       - DATABASE_URL=postgres://affine:affine@postgres:5432/affine
-      - DISABLE_TELEMETRY=true
       - NODE_ENV=production
-      - SERVER_FLAVOR=selfhosted
       - AFFINE_ADMIN_EMAIL=${AFFINE_ADMIN_EMAIL}
       - AFFINE_ADMIN_PASSWORD=${AFFINE_ADMIN_PASSWORD}
   redis:

.github/helm/affine/charts/graphql/templates/deployment.yaml

@@ -39,6 +39,8 @@ spec:
             value: "--max-old-space-size=4096"
           - name: NO_COLOR
             value: "1"
+          - name: DEPLOYMENT_TYPE
+            value: "affine"
           - name: SERVER_FLAVOR
             value: "graphql"
           - name: AFFINE_ENV
@@ -81,31 +83,33 @@ spec:
             value: "{{ .Values.app.captcha.enabled }}"
           - name: FEATURES_EARLY_ACCESS_PREVIEW
             value: "{{ .Values.app.features.earlyAccessPreview }}"
-          - name: OAUTH_EMAIL_SENDER
+          - name: FEATURES_SYNC_CLIENT_VERSION_CHECK
+            value: "{{ .Values.app.features.syncClientVersionCheck }}"
+          - name: MAILER_HOST
             valueFrom:
               secretKeyRef:
-                name: "{{ .Values.app.oauth.email.secretName }}"
-                key: sender
-          - name: OAUTH_EMAIL_LOGIN
+                name: "{{ .Values.app.mailer.secretName }}"
+                key: host
+          - name: MAILER_PORT
             valueFrom:
               secretKeyRef:
-                name: "{{ .Values.app.oauth.email.secretName }}"
-                key: login
-          - name: OAUTH_EMAIL_SERVER
-            valueFrom:
-              secretKeyRef:
-                name: "{{ .Values.app.oauth.email.secretName }}"
-                key: server
-          - name: OAUTH_EMAIL_PORT
-            valueFrom:
-              secretKeyRef:
-                name: "{{ .Values.app.oauth.email.secretName }}"
+                name: "{{ .Values.app.mailer.secretName }}"
                 key: port
-          - name: OAUTH_EMAIL_PASSWORD
+          - name: MAILER_USER
             valueFrom:
               secretKeyRef:
-                name: "{{ .Values.app.oauth.email.secretName }}"
+                name: "{{ .Values.app.mailer.secretName }}"
+                key: user
+          - name: MAILER_PASSWORD
+            valueFrom:
+              secretKeyRef:
+                name: "{{ .Values.app.mailer.secretName }}"
                 key: password
+          - name: MAILER_SENDER
+            valueFrom:
+              secretKeyRef:
+                name: "{{ .Values.app.mailer.secretName }}"
+                key: sender
           - name: STRIPE_API_KEY
             valueFrom:
               secretKeyRef:

.github/helm/affine/charts/graphql/templates/mailer.yaml

@@ -0,0 +1,13 @@
+{{- if .Values.app.mailer.secretName -}}
+apiVersion: v1
+kind: Secret
+metadata:
+  name: "{{ .Values.app.mailer.secretName }}"
+type: Opaque
+data:
+  host: "{{ .Values.app.mailer.host | b64enc }}"
+  port: "{{ .Values.app.mailer.port | b64enc }}"
+  user: "{{ .Values.app.mailer.user | b64enc }}"
+  password: "{{ .Values.app.mailer.password | b64enc }}"
+  sender: "{{ .Values.app.mailer.sender | b64enc }}"
+{{- end }}

.github/helm/affine/charts/graphql/templates/oauth.yaml

@@ -1,15 +1,3 @@
-apiVersion: v1
-kind: Secret
-metadata:
-  name: "{{ .Values.app.oauth.email.secretName }}"
-type: Opaque
-data:
-  sender: "{{ .Values.app.oauth.email.sender | b64enc }}"
-  login: "{{ .Values.app.oauth.email.login | b64enc }}"
-  password: "{{ .Values.app.oauth.email.password | b64enc }}"
-  server: "{{ .Values.app.oauth.email.server | b64enc }}"
-  port: "{{ .Values.app.oauth.email.port | b64enc }}"
----
 {{- if .Values.app.oauth.google.enabled -}}
 apiVersion: v1
 kind: Secret

.github/helm/affine/charts/graphql/values.yaml

@@ -35,14 +35,7 @@ app:
       accountId: ''
       accessKeyId: ''
       secretAccessKey: ''
-  oauth:
-    email:
-      secretName: 'oauth-email'
-      sender: 'noreply@toeverything.info'
-      login: ''
-      password: ''
-      server: 'smtp.gmail.com'
-      port: '465'
+  oauth: 
     google:
       enabled: false
       secretName: oauth-google
@@ -53,6 +46,13 @@ app:
       secretName: oauth-github
       clientId: ''
       clientSecret: ''
+  mailer:
+    secretName: 'mailer'
+    host: 'smtp.gmail.com'
+    port: '465'
+    user: ''
+    password: ''
+    sender: 'noreply@toeverything.info'
   payment:
     stripe:
       secretName: 'stripe'

.github/helm/affine/charts/sync/templates/deployment.yaml

@@ -36,6 +36,8 @@ spec:
             value: "{{ .Values.env }}"
           - name: NO_COLOR
             value: "1"
+          - name: DEPLOYMENT_TYPE
+            value: "affine"
           - name: SERVER_FLAVOR
             value: "sync"
           - name: NEXTAUTH_URL

.github/renovate.json

@@ -47,11 +47,11 @@
       "groupName": "electron-forge"
     },
     {
-      "groupName": "blocksuite-nightly",
+      "groupName": "blocksuite-canary",
       "matchPackagePatterns": ["^@blocksuite"],
       "excludePackageNames": ["@blocksuite/icons"],
       "rangeStrategy": "replace",
-      "followTag": "nightly"
+      "followTag": "canary"
     },
     {
       "groupName": "all non-major dependencies",

.github/workflows/build-test.yml

@@ -19,7 +19,7 @@ env:
   MACOSX_DEPLOYMENT_TARGET: '10.13'
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
   PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/node_modules/.cache/ms-playwright
-  DISABLE_TELEMETRY: true
+  DEPLOYMENT_TYPE: affine
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -291,6 +291,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: build-storage
     env:
+      NODE_ENV: test
       DISTRIBUTION: browser
     services:
       postgres:
@@ -447,7 +448,6 @@ jobs:
           ${{ matrix.tests.script }}
         env:
           DEV_SERVER_URL: http://localhost:8080
-          ENABLE_LOCAL_EMAIL: true
 
       - name: Upload test results
         if: ${{ failure() }}

.github/workflows/deploy.yml

@@ -136,6 +136,10 @@ jobs:
   build-docker:
     name: Build Docker
     runs-on: ubuntu-latest
+    permissions:
+      contents: 'write'
+      id-token: 'write'
+      packages: 'write'
     needs:
       - build-server
       - build-core
@@ -275,9 +279,9 @@ jobs:
           R2_SECRET_ACCESS_KEY: ${{ secrets.R2_SECRET_ACCESS_KEY }}
           ENABLE_CAPTCHA: true
           CAPTCHA_TURNSTILE_SECRET: ${{ secrets.CAPTCHA_TURNSTILE_SECRET }}
-          OAUTH_EMAIL_SENDER: ${{ secrets.OAUTH_EMAIL_SENDER }}
-          OAUTH_EMAIL_LOGIN: ${{ secrets.OAUTH_EMAIL_LOGIN }}
-          OAUTH_EMAIL_PASSWORD: ${{ secrets.OAUTH_EMAIL_PASSWORD }}
+          MAILER_SENDER: ${{ secrets.OAUTH_EMAIL_SENDER }}
+          MAILER_USER: ${{ secrets.OAUTH_EMAIL_LOGIN }}
+          MAILER_PASSWORD: ${{ secrets.OAUTH_EMAIL_PASSWORD }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           AFFINE_GOOGLE_CLIENT_ID: ${{ secrets.AFFINE_GOOGLE_CLIENT_ID }}
           AFFINE_GOOGLE_CLIENT_SECRET: ${{ secrets.AFFINE_GOOGLE_CLIENT_SECRET }}
@@ -290,6 +294,7 @@ jobs:
           REDIS_HOST: ${{ secrets.REDIS_HOST }}
           REDIS_PASSWORD: ${{ secrets.REDIS_PASSWORD }}
           CLOUD_SQL_IAM_ACCOUNT: ${{ secrets.CLOUD_SQL_IAM_ACCOUNT }}
+          CLOUD_LOGGER_IAM_ACCOUNT: ${{ secrets.CLOUD_LOGGER_IAM_ACCOUNT }}
           STRIPE_API_KEY: ${{ secrets.STRIPE_API_KEY }}
           STRIPE_WEBHOOK_KEY: ${{ secrets.STRIPE_WEBHOOK_KEY }}
           STATIC_IP_NAME: ${{ secrets.STATIC_IP_NAME }}

.github/workflows/release-desktop.yml

@@ -143,7 +143,7 @@ jobs:
         run: |
           mkdir -p builds
           mv packages/frontend/electron/out/*/make/zip/linux/x64/*.zip ./builds/affine-${{ env.BUILD_TYPE }}-linux-x64.zip
-          mv packages/frontend/electron/out/*/make/AppImage/x64/*.AppImage ./builds/affine-${{ env.BUILD_TYPE }}-linux-x64.AppImage
+          mv packages/frontend/electron/out/*/make/*.AppImage ./builds/affine-${{ env.BUILD_TYPE }}-linux-x64.AppImage
 
       - name: Upload Artifact
         uses: actions/upload-artifact@v4

.gitignore

@@ -79,3 +79,6 @@ lib
 affine.db
 apps/web/next-routes.conf
 .nx
+
+packages/frontend/templates/edgeless
+packages/frontend/core/public/static/templates

.prettierignore

@@ -16,6 +16,7 @@ packages/frontend/i18n/src/i18n-generated.ts
 packages/frontend/graphql/src/graphql/index.ts
 tests/affine-legacy/**/static
 .yarnrc.yml
+packages/frontend/templates/edgeless-templates.gen.ts
 packages/frontend/templates/templates.gen.ts
 packages/frontend/templates/onboarding
 

docs/developing-server.md

@@ -59,9 +59,9 @@ You may need additional env for auth login. You may want to put your own one if
 For email login & password, please refer to https://nodemailer.com/usage/using-gmail/
 
 ```
-OAUTH_EMAIL_SENDER=
-OAUTH_EMAIL_LOGIN=
-OAUTH_EMAIL_PASSWORD=
+MAILER_SENDER=
+MAILER_USER=
+MAILER_PASSWORD=
 OAUTH_GOOGLE_ENABLED="true"
 OAUTH_GOOGLE_CLIENT_ID=
 OAUTH_GOOGLE_CLIENT_SECRET=

package.json

@@ -76,7 +76,7 @@
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@vitest/coverage-istanbul": "1.1.3",
     "@vitest/ui": "1.1.3",
-    "electron": "^28.1.4",
+    "electron": "^28.2.1",
     "eslint": "^8.54.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-i": "^2.29.0",

packages/backend/server/package.json

@@ -9,13 +9,13 @@
   },
   "scripts": {
     "build": "tsc",
-    "start": "node --loader ts-node/esm/transpile-only.mjs --es-module-specifier-resolution node ./src/index.ts",
+    "start": "node --loader ts-node/esm/transpile-only.mjs ./src/index.ts",
     "dev": "nodemon ./src/index.ts",
     "test": "ava --concurrency 1 --serial",
     "test:coverage": "c8 ava --concurrency 1 --serial",
     "postinstall": "prisma generate",
-    "data-migration": "node --loader ts-node/esm/transpile-only.mjs --es-module-specifier-resolution node ./src/data/index.ts",
-    "predeploy": "yarn prisma migrate deploy && node --es-module-specifier-resolution node ./dist/data/index.js run"
+    "data-migration": "node --loader ts-node/esm/transpile-only.mjs ./src/data/index.ts",
+    "predeploy": "yarn prisma migrate deploy && node --import ./scripts/register.js ./dist/data/index.js run"
   },
   "dependencies": {
     "@apollo/server": "^4.9.5",
@@ -40,21 +40,21 @@
     "@node-rs/crc32": "^1.7.2",
     "@node-rs/jsonwebtoken": "^0.3.0",
     "@opentelemetry/api": "^1.7.0",
-    "@opentelemetry/core": "^1.20.0",
-    "@opentelemetry/exporter-prometheus": "^0.47.0",
-    "@opentelemetry/exporter-zipkin": "^1.20.0",
-    "@opentelemetry/host-metrics": "^0.34.0",
-    "@opentelemetry/instrumentation": "^0.47.0",
-    "@opentelemetry/instrumentation-graphql": "^0.36.0",
-    "@opentelemetry/instrumentation-http": "^0.47.0",
-    "@opentelemetry/instrumentation-ioredis": "^0.36.0",
-    "@opentelemetry/instrumentation-nestjs-core": "^0.33.3",
-    "@opentelemetry/instrumentation-socket.io": "^0.35.0",
-    "@opentelemetry/resources": "^1.20.0",
-    "@opentelemetry/sdk-metrics": "^1.20.0",
-    "@opentelemetry/sdk-node": "^0.47.0",
-    "@opentelemetry/sdk-trace-node": "^1.20.0",
-    "@opentelemetry/semantic-conventions": "^1.20.0",
+    "@opentelemetry/core": "^1.21.0",
+    "@opentelemetry/exporter-prometheus": "^0.48.0",
+    "@opentelemetry/exporter-zipkin": "^1.21.0",
+    "@opentelemetry/host-metrics": "^0.35.0",
+    "@opentelemetry/instrumentation": "^0.48.0",
+    "@opentelemetry/instrumentation-graphql": "^0.37.0",
+    "@opentelemetry/instrumentation-http": "^0.48.0",
+    "@opentelemetry/instrumentation-ioredis": "^0.37.0",
+    "@opentelemetry/instrumentation-nestjs-core": "^0.34.0",
+    "@opentelemetry/instrumentation-socket.io": "^0.36.0",
+    "@opentelemetry/resources": "^1.21.0",
+    "@opentelemetry/sdk-metrics": "^1.21.0",
+    "@opentelemetry/sdk-node": "^0.48.0",
+    "@opentelemetry/sdk-trace-node": "^1.21.0",
+    "@opentelemetry/semantic-conventions": "^1.21.0",
     "@prisma/client": "^5.7.1",
     "@prisma/instrumentation": "^5.7.1",
     "@socket.io/redis-adapter": "^8.2.1",
@@ -86,6 +86,8 @@
     "semver": "^7.5.4",
     "socket.io": "^4.7.2",
     "stripe": "^14.5.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.3.3",
     "ws": "^8.14.2",
     "yjs": "^13.6.10",
     "zod": "^3.22.4"
@@ -112,9 +114,7 @@
     "c8": "^9.0.0",
     "nodemon": "^3.0.1",
     "sinon": "^17.0.1",
-    "supertest": "^6.3.3",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.3.2"
+    "supertest": "^6.3.3"
   },
   "ava": {
     "timeout": "1m",
@@ -139,10 +139,11 @@
     "environmentVariables": {
       "TS_NODE_PROJECT": "./tests/tsconfig.json",
       "NODE_ENV": "test",
-      "ENABLE_LOCAL_EMAIL": "true",
-      "OAUTH_EMAIL_LOGIN": "noreply@toeverything.info",
-      "OAUTH_EMAIL_PASSWORD": "affine",
-      "OAUTH_EMAIL_SENDER": "noreply@toeverything.info",
+      "MAILER_HOST": "0.0.0.0",
+      "MAILER_PORT": "1025",
+      "MAILER_USER": "noreply@toeverything.info",
+      "MAILER_PASSWORD": "affine",
+      "MAILER_SENDER": "noreply@toeverything.info",
       "FEATURES_EARLY_ACCESS_PREVIEW": "false"
     }
   },
@@ -162,7 +163,6 @@
     "env": {
       "TS_NODE_TRANSPILE_ONLY": true,
       "TS_NODE_PROJECT": "./tsconfig.json",
-      "NODE_ENV": "development",
       "DEBUG": "affine:*",
       "FORCE_COLOR": true,
       "DEBUG_COLORS": true

packages/backend/server/schema.prisma

@@ -265,7 +265,9 @@ model Snapshot {
   seq         Int      @default(0) @db.Integer
   state       Bytes?   @db.ByteA
   createdAt   DateTime @default(now()) @map("created_at") @db.Timestamptz(6)
-  updatedAt   DateTime @updatedAt @map("updated_at") @db.Timestamptz(6)
+  // the `updated_at` field will not record the time of record changed,
+  // but the created time of last seen update that has been merged into snapshot.
+  updatedAt   DateTime @map("updated_at") @db.Timestamptz(6)
 
   @@id([id, workspaceId])
   @@map("snapshots")

packages/backend/server/scripts/loader.js

@@ -0,0 +1,11 @@
+import { create, createEsmHooks } from 'ts-node';
+
+const service = create({
+  experimentalSpecifierResolution: 'node',
+  transpileOnly: true,
+  logError: true,
+  skipProject: true,
+});
+const hooks = createEsmHooks(service);
+
+export const resolve = hooks.resolve;

packages/backend/server/scripts/register.js

@@ -0,0 +1,4 @@
+import { register } from 'node:module';
+import { pathToFileURL } from 'node:url';
+
+register('./scripts/loader.js', pathToFileURL('./'));

packages/backend/server/scripts/self-host-predeploy.js

@@ -13,7 +13,10 @@ const configFiles = [
 ];
 
 function configCleaner(content) {
-  return content.replace(/(\/\/#.*$)|(\/\/\s+TODO.*$)/gm, '');
+  return content.replace(
+    /(^\/\/#.*$)|(^\/\/\s+TODO.*$)|("use\sstrict";?)|(^.*eslint-disable.*$)/gm,
+    ''
+  );
 }
 
 function prepare() {
@@ -39,11 +42,9 @@ function prepare() {
 function runPredeployScript() {
   console.log('running predeploy script.');
   execSync('yarn predeploy', {
-    env: {
-      ...process.env,
-      NODE_OPTIONS:
-        (process.env.NODE_OPTIONS ?? '') + ' --import ./dist/prelude.js',
-    },
+    encoding: 'utf-8',
+    env: process.env,
+    stdio: 'inherit',
   });
 }
 

packages/backend/server/src/app.controller.ts

@@ -11,6 +11,7 @@ export class AppController {
     return {
       compatibility: this.config.version,
       message: `AFFiNE ${this.config.version} Server`,
+      type: this.config.type,
       flavor: this.config.flavor,
     };
   }

packages/backend/server/src/app.module.ts

@@ -109,7 +109,7 @@ export class AppModuleBuilder {
         },
       ],
       imports: this.modules,
-      controllers: this.config.flavor.selfhosted ? [] : [AppController],
+      controllers: this.config.isSelfhosted ? [] : [AppController],
     })
     class AppModule {}
 
@@ -132,9 +132,9 @@ function buildAppModule() {
     // sync server only
     .useIf(config => config.flavor.sync, SyncModule)
 
-    // main server only
+    // graphql server only
     .useIf(
-      config => config.flavor.main,
+      config => config.flavor.graphql,
       ServerConfigModule,
       WebSocketModule,
       GqlModule,
@@ -147,7 +147,7 @@ function buildAppModule() {
 
     // self hosted server only
     .useIf(
-      config => config.flavor.selfhosted,
+      config => config.isSelfhosted,
       ServeStaticModule.forRoot({
         rootPath: join('/app', 'static'),
       })

packages/backend/server/src/config/affine.env.ts

@@ -3,8 +3,7 @@ AFFiNE.ENV_MAP = {
   AFFINE_SERVER_PORT: ['port', 'int'],
   AFFINE_SERVER_HOST: 'host',
   AFFINE_SERVER_SUB_PATH: 'path',
-  AFFIHE_SERVER_HTTPS: ['https', 'boolean'],
-  AFFINE_ENV: 'affineEnv',
+  AFFINE_SERVER_HTTPS: ['https', 'boolean'],
   DATABASE_URL: 'db.url',
   ENABLE_CAPTCHA: ['auth.captcha.enable', 'boolean'],
   CAPTCHA_TURNSTILE_SECRET: ['auth.captcha.turnstile.secret', 'string'],
@@ -14,11 +13,12 @@ AFFiNE.ENV_MAP = {
   OAUTH_GITHUB_ENABLED: ['auth.oauthProviders.github.enabled', 'boolean'],
   OAUTH_GITHUB_CLIENT_ID: 'auth.oauthProviders.github.clientId',
   OAUTH_GITHUB_CLIENT_SECRET: 'auth.oauthProviders.github.clientSecret',
-  OAUTH_EMAIL_LOGIN: 'auth.email.login',
-  OAUTH_EMAIL_SENDER: 'auth.email.sender',
-  OAUTH_EMAIL_SERVER: 'auth.email.server',
-  OAUTH_EMAIL_PORT: ['auth.email.port', 'int'],
-  OAUTH_EMAIL_PASSWORD: 'auth.email.password',
+  MAILER_HOST: 'mailer.host',
+  MAILER_PORT: ['mailer.port', 'int'],
+  MAILER_USER: 'mailer.auth.user',
+  MAILER_PASSWORD: 'mailer.auth.pass',
+  MAILER_SENDER: 'mailer.from.address',
+  MAILER_SECURE: ['mailer.secure', 'boolean'],
   THROTTLE_TTL: ['rateLimiter.ttl', 'int'],
   THROTTLE_LIMIT: ['rateLimiter.limit', 'int'],
   REDIS_SERVER_HOST: 'plugins.redis.host',
@@ -28,13 +28,10 @@ AFFiNE.ENV_MAP = {
   REDIS_SERVER_DATABASE: ['plugins.redis.db', 'int'],
   DOC_MERGE_INTERVAL: ['doc.manager.updatePollInterval', 'int'],
   DOC_MERGE_USE_JWST_CODEC: [
-    'doc.manager.experimentalMergeWithJwstCodec',
+    'doc.manager.experimentalMergeWithYOcto',
     'boolean',
   ],
-  ENABLE_LOCAL_EMAIL: ['auth.localEmail', 'boolean'],
   STRIPE_API_KEY: 'plugins.payment.stripe.keys.APIKey',
   STRIPE_WEBHOOK_KEY: 'plugins.payment.stripe.keys.webhookKey',
   FEATURES_EARLY_ACCESS_PREVIEW: ['featureFlags.earlyAccessPreview', 'boolean'],
 };
-
-export default AFFiNE;

packages/backend/server/src/config/affine.self.ts

@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+// Custom configurations for AFFiNE Cloud
+// ====================================================================================
+// Q: WHY THIS FILE EXISTS?
+// A: AFFiNE deployment environment may have a lot of custom environment variables,
+//    which are not suitable to be put in the `affine.ts` file.
+//    For example, AFFiNE Cloud Clusters are deployed on Google Cloud Platform.
+//    We need to enable the `gcloud` plugin to make sure the nodes working well,
+//    but the default selfhost version may not require it.
+//    So it's not a good idea to put such logic in the common `affine.ts` file.
+//
+//    ```
+//    if (AFFiNE.deploy) {
+//      AFFiNE.plugins.use('gcloud');
+//    }
+//    ```
+// ====================================================================================
+const env = process.env;
+
+AFFiNE.metrics.enabled = !AFFiNE.node.test;
+
+if (env.R2_OBJECT_STORAGE_ACCOUNT_ID) {
+  AFFiNE.storage.providers.r2 = {
+    accountId: env.R2_OBJECT_STORAGE_ACCOUNT_ID,
+    credentials: {
+      accessKeyId: env.R2_OBJECT_STORAGE_ACCESS_KEY_ID!,
+      secretAccessKey: env.R2_OBJECT_STORAGE_SECRET_ACCESS_KEY!,
+    },
+  };
+  AFFiNE.storage.storages.avatar.provider = 'r2';
+  AFFiNE.storage.storages.avatar.bucket = 'account-avatar';
+  AFFiNE.storage.storages.avatar.publicLinkFactory = key =>
+    `https://avatar.affineassets.com/${key}`;
+
+  AFFiNE.storage.storages.blob.provider = 'r2';
+  AFFiNE.storage.storages.blob.bucket = `workspace-blobs-${
+    AFFiNE.affine.canary ? 'canary' : 'prod'
+  }`;
+}
+
+AFFiNE.plugins.use('redis');
+AFFiNE.plugins.use('payment');
+
+if (AFFiNE.deploy) {
+  AFFiNE.mailer = {
+    service: 'gmail',
+    auth: {
+      user: env.MAILER_USER,
+      pass: env.MAILER_PASSWORD,
+    },
+  };
+
+  AFFiNE.plugins.use('gcloud');
+}

packages/backend/server/src/config/affine.ts

@@ -1,39 +1,94 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-// Custom configurations
-const env = process.env;
-
-// TODO(@forehalo): detail explained
-// Storage
-if (env.R2_OBJECT_STORAGE_ACCOUNT_ID) {
-  AFFiNE.storage.providers.r2 = {
-    accountId: env.R2_OBJECT_STORAGE_ACCOUNT_ID,
-    credentials: {
-      accessKeyId: env.R2_OBJECT_STORAGE_ACCESS_KEY_ID!,
-      secretAccessKey: env.R2_OBJECT_STORAGE_SECRET_ACCESS_KEY!,
-    },
-  };
-  AFFiNE.storage.storages.avatar.provider = 'r2';
-  AFFiNE.storage.storages.avatar.bucket = 'account-avatar';
-  AFFiNE.storage.storages.avatar.publicLinkFactory = key =>
-    `https://avatar.affineassets.com/${key}`;
-
-  AFFiNE.storage.storages.blob.provider = 'r2';
-  AFFiNE.storage.storages.blob.bucket = `workspace-blobs-${
-    AFFiNE.affine.canary ? 'canary' : 'prod'
-  }`;
-}
-
-// Metrics
-AFFiNE.metrics.enabled = true;
-
-// Plugins Section Start
-AFFiNE.plugins.use('payment', {
-  stripe: {
-    keys: {},
-    apiVersion: '2023-10-16',
-  },
+//
+// ###############################################################
+// ##                AFFiNE Configuration System                ##
+// ###############################################################
+// Here is the file of all AFFiNE configurations that will affect runtime behavior.
+// Override any configuration here and it will be merged when starting the server.
+// Any changes in this file won't take effect before server restarted.
+//
+//
+// > Configurations merge order
+//   1. load environment variables (`.env` if provided, and from system)
+//   2. load `src/fundamentals/config/default.ts` for all default settings
+//   3. apply `./affine.ts` patches (this file)
+//   4. apply `./affine.env.ts` patches
+//
+//
+// ###############################################################
+// ##                       General settings                    ##
+// ###############################################################
+//
+// /* The unique identity of the server */
+// AFFiNE.serverId = 'some-randome-uuid';
+//
+// /* The name of AFFiNE Server, may show on the UI */
+// AFFiNE.serverName = 'Your Cool AFFiNE Selfhosted Cloud';
+//
+// /* Whether the server is deployed behind a HTTPS proxied environment */
+AFFiNE.https = false;
+// /* Domain of your server that your server will be available at */
+AFFiNE.host = 'localhost';
+// /* The local port of your server that will listen on */
+AFFiNE.port = 3010;
+// /* The sub path of your server */
+// /* For example, if you set `AFFiNE.path = '/affine'`, then the server will be available at `${domain}/affine` */
+// AFFiNE.path = '/affine';
+//
+//
+// ###############################################################
+// ##                       Database settings                   ##
+// ###############################################################
+//
+// /* The URL of the database where most of AFFiNE server data will be stored in */
+// AFFiNE.db.url = 'postgres://user:passsword@localhost:5432/affine';
+//
+//
+// ###############################################################
+// ##                   Server Function settings                ##
+// ###############################################################
+//
+// /* Whether enable metrics and tracing while running the server */
+// /* The metrics will be available at `http://localhost:9464/metrics` with [Prometheus] format exported */
+// AFFiNE.metrics.enabled = true;
+//
+// /* GraphQL configurations that control the behavior of the Apollo Server behind */
+// /* @see https://www.apollographql.com/docs/apollo-server/api/apollo-server */
+// AFFiNE.graphql = {
+//   /* Path to mount GraphQL API */
+//   path: '/graphql',
+//   buildSchemaOptions: {
+//     numberScalarMode: 'integer',
+//   },
+//   /* Whether allow client to query the schema introspection */
+//   introspection: true,
+//   /* Whether enable GraphQL Playground UI */
+//   playground: true,
+// }
+//
+// /* Doc Store & Collaberation */
+// /* How long the buffer time of creating a new history snapshot when doc get updated */
+// AFFiNE.doc.history.interval = 1000 * 60 * 10; // 10 minutes
+//
+// /* Use `y-octo` to merge updates at the same time when merging using Yjs */
+// AFFiNE.doc.manager.experimentalMergeWithYOcto = true;
+//
+// /* How often the manager will start a new turn of merging pending updates into doc snapshot */
+// AFFiNE.doc.manager.updatePollInterval = 1000 * 3;
+//
+//
+// ###############################################################
+// ##                        Plugins settings                   ##
+// ###############################################################
+//
+// /* Redis Plugin */
+// /* Provide caching and session storing backed by Redis. */
+// /* Useful when you deploy AFFiNE server in a cluster. */
+AFFiNE.plugins.use('redis', {
+  /* override options */
 });
-AFFiNE.plugins.use('redis');
-// Plugins Section end
-
-export default AFFiNE;
+// /* Payment Plugin */
+AFFiNE.plugins.use('payment', {
+  stripe: { keys: {}, apiVersion: '2023-10-16' },
+});
+//

packages/backend/server/src/core/auth/next-auth-options.ts

@@ -96,28 +96,28 @@ export const NextAuthOptionsProvider: FactoryProvider<NextAuthOptions> = {
       }
       return result;
     };
+
+    prismaAdapter.createVerificationToken = async data => {
+      await session.set(
+        `${data.identifier}:${data.token}`,
+        Date.now() + session.sessionTtl
+      );
+      return data;
+    };
+
+    prismaAdapter.useVerificationToken = async ({ identifier, token }) => {
+      const expires = await session.get(`${identifier}:${token}`);
+      if (expires) {
+        return { identifier, token, expires: new Date(expires) };
+      } else {
+        return null;
+      }
+    };
+
     const nextAuthOptions: NextAuthOptions = {
-      providers: [
-        // @ts-expect-error esm interop issue
-        Email.default({
-          server: {
-            host: config.auth.email.server,
-            port: config.auth.email.port,
-            auth: {
-              user: config.auth.email.login,
-              pass: config.auth.email.password,
-            },
-          },
-          from: config.auth.email.sender,
-          sendVerificationRequest: (params: SendVerificationRequestParams) =>
-            sendVerificationRequest(config, logger, mailer, session, params),
-        }),
-      ],
+      providers: [],
       adapter: prismaAdapter,
       debug: !config.node.prod,
-      session: {
-        strategy: 'database',
-      },
       logger: {
         debug(code, metadata) {
           logger.debug(`${code}: ${JSON.stringify(metadata)}`);
@@ -170,6 +170,16 @@ export const NextAuthOptionsProvider: FactoryProvider<NextAuthOptions> = {
       })
     );
 
+    if (config.mailer && mailer) {
+      nextAuthOptions.providers.push(
+        // @ts-expect-error esm interop issue
+        Email.default({
+          sendVerificationRequest: (params: SendVerificationRequestParams) =>
+            sendVerificationRequest(config, logger, mailer, session, params),
+        })
+      );
+    }
+
     if (config.auth.oauthProviders.github) {
       nextAuthOptions.providers.push(
         // @ts-expect-error esm interop issue
@@ -196,6 +206,11 @@ export const NextAuthOptionsProvider: FactoryProvider<NextAuthOptions> = {
       );
     }
 
+    if (nextAuthOptions.providers.length > 1) {
+      // not only credentials provider
+      nextAuthOptions.session = { strategy: 'database' };
+    }
+
     nextAuthOptions.jwt = {
       encode: async ({ token, maxAge }) =>
         encode(config, prisma, token, maxAge),

packages/backend/server/src/core/auth/service.ts

@@ -136,7 +136,7 @@ export class AuthService {
     return (
       !!outcome.success &&
       // skip hostname check in dev mode
-      (this.config.affineEnv === 'dev' || outcome.hostname === this.config.host)
+      (this.config.node.dev || outcome.hostname === this.config.host)
     );
   }
 

packages/backend/server/src/core/auth/utils/send-mail.ts

@@ -11,7 +11,7 @@ export async function sendVerificationRequest(
   session: SessionService,
   params: SendVerificationRequestParams
 ) {
-  const { identifier, url, provider } = params;
+  const { identifier, url } = params;
   const urlWithToken = new URL(url);
   const callbackUrl = urlWithToken.searchParams.get('callbackUrl') || '';
   if (!callbackUrl) {
@@ -28,7 +28,6 @@ export async function sendVerificationRequest(
 
   const result = await mailer.sendSignInEmail(urlWithToken.toString(), {
     to: identifier,
-    from: provider.from,
   });
   logger.log(`send verification email success: ${result.accepted.join(', ')}`);
 

packages/backend/server/src/core/config.ts

@@ -1,6 +1,8 @@
 import { Module } from '@nestjs/common';
 import { Field, ObjectType, Query, registerEnumType } from '@nestjs/graphql';
 
+import { DeploymentType } from '../fundamentals';
+
 export enum ServerFeature {
   Payment = 'payment',
 }
@@ -9,6 +11,10 @@ registerEnumType(ServerFeature, {
   name: 'ServerFeature',
 });
 
+registerEnumType(DeploymentType, {
+  name: 'ServerDeploymentType',
+});
+
 const ENABLED_FEATURES: ServerFeature[] = [];
 export function ADD_ENABLED_FEATURES(feature: ServerFeature) {
   ENABLED_FEATURES.push(feature);
@@ -28,6 +34,9 @@ export class ServerConfigType {
   @Field({ description: 'server base url' })
   baseUrl!: string;
 
+  @Field(() => DeploymentType, { description: 'server type' })
+  type!: DeploymentType;
+
   /**
    * @deprecated
    */
@@ -46,7 +55,11 @@ export class ServerConfigResolver {
       name: AFFiNE.serverName,
       version: AFFiNE.version,
       baseUrl: AFFiNE.baseUrl,
-      flavor: AFFiNE.flavor.type,
+      type: AFFiNE.type,
+      // BACKWARD COMPATIBILITY
+      // the old flavors contains `selfhosted` but it actually not flavor but deployment type
+      // this field should be removed after frontend feature flags implemented
+      flavor: AFFiNE.type,
       features: ENABLED_FEATURES,
     };
   }

packages/backend/server/src/core/doc/manager.ts

@@ -10,7 +10,6 @@ import { chunk } from 'lodash-es';
 import { defer, retry } from 'rxjs';
 import {
   applyUpdate,
-  decodeStateVector,
   Doc,
   encodeStateAsUpdate,
   encodeStateVector,
@@ -19,6 +18,7 @@ import {
 
 import {
   Cache,
+  CallTimer,
   Config,
   EventEmitter,
   type EventPayload,
@@ -45,36 +45,6 @@ function compare(yBinary: Buffer, jwstBinary: Buffer, strict = false): boolean {
   return compare(yBinary, yBinary2, true);
 }
 
-/**
- * Detect whether rhs state is newer than lhs state.
- *
- * How could we tell a state is newer:
- *
- *   i. if the state vector size is larger, it's newer
- *  ii. if the state vector size is same, compare each client's state
- */
-function isStateNewer(lhs: Buffer, rhs: Buffer): boolean {
-  const lhsVector = decodeStateVector(lhs);
-  const rhsVector = decodeStateVector(rhs);
-
-  if (lhsVector.size < rhsVector.size) {
-    return true;
-  }
-
-  for (const [client, state] of lhsVector) {
-    const rstate = rhsVector.get(client);
-    if (!rstate) {
-      return false;
-    }
-
-    if (state < rstate) {
-      return true;
-    }
-  }
-
-  return false;
-}
-
 export function isEmptyBuffer(buf: Buffer): boolean {
   return (
     buf.length === 0 ||
@@ -119,6 +89,7 @@ export class DocManager implements OnModuleInit, OnModuleDestroy {
     this.destroy();
   }
 
+  @CallTimer('doc', 'yjs_recover_updates_to_doc')
   private recoverDoc(...updates: Buffer[]): Promise<Doc> {
     const doc = new Doc();
     const chunks = chunk(updates, 10);
@@ -154,11 +125,7 @@ export class DocManager implements OnModuleInit, OnModuleDestroy {
     const doc = await this.recoverDoc(...updates);
 
     // test jwst codec
-    if (
-      this.config.affine.canary &&
-      this.config.doc.manager.experimentalMergeWithJwstCodec &&
-      updates.length < 100 /* avoid overloading */
-    ) {
+    if (this.config.doc.manager.experimentalMergeWithYOcto) {
       metrics.jwst.counter('codec_merge_counter').add(1);
       const yjsResult = Buffer.from(encodeStateAsUpdate(doc));
       let log = false;
@@ -209,7 +176,7 @@ export class DocManager implements OnModuleInit, OnModuleDestroy {
     }, this.config.doc.manager.updatePollInterval);
 
     this.logger.log('Automation started');
-    if (this.config.doc.manager.experimentalMergeWithJwstCodec) {
+    if (this.config.doc.manager.experimentalMergeWithYOcto) {
       this.logger.warn(
         'Experimental feature enabled: merge updates with jwst codec is enabled'
       );
@@ -382,7 +349,7 @@ export class DocManager implements OnModuleInit, OnModuleDestroy {
     const updates = await this.getUpdates(workspaceId, guid);
 
     if (updates.length) {
-      const doc = await this.squash(updates, snapshot);
+      const doc = await this.squash(snapshot, updates);
       return Buffer.from(encodeStateVector(doc));
     }
 
@@ -415,7 +382,7 @@ export class DocManager implements OnModuleInit, OnModuleDestroy {
       // take it ease, we don't want to overload db and or cpu
       // if we limit the taken number here,
       // user will never see the latest doc if there are too many updates pending to be merged.
-      take: 100,
+      take: this.config.doc.manager.maxUpdatesPullCount,
     });
 
     // perf(memory): avoid sorting in db
@@ -463,80 +430,92 @@ export class DocManager implements OnModuleInit, OnModuleDestroy {
     });
   }
 
+  /**
+   * @returns whether the snapshot is updated to the latest, `undefined` means the doc to be upserted is outdated.
+   */
+  @CallTimer('doc', 'upsert')
   private async upsert(
     workspaceId: string,
     guid: string,
     doc: Doc,
     // we always delay the snapshot update to avoid db overload,
-    // so the value of `updatedAt` will not be accurate to user's real action time
+    // so the value of auto updated `updatedAt` by db will never be accurate to user's real action time
     updatedAt: Date,
-    initialSeq?: number
+    seq: number
   ) {
-    return this.lockSnapshotForUpsert(workspaceId, guid, async () => {
-      const blob = Buffer.from(encodeStateAsUpdate(doc));
+    const blob = Buffer.from(encodeStateAsUpdate(doc));
 
-      if (isEmptyBuffer(blob)) {
-        return false;
+    if (isEmptyBuffer(blob)) {
+      return undefined;
+    }
+
+    const state = Buffer.from(encodeStateVector(doc));
+
+    // CONCERNS:
+    //   i. Because we save the real user's last seen action time as `updatedAt`,
+    //      it's possible to simply compare the `updatedAt` to determine if the snapshot is older than the one we are going to save.
+    //
+    //  ii. Prisma doesn't support `upsert` with additional `where` condition along side unique constraint.
+    //      In our case, we need to manually check the `updatedAt` to avoid overriding the newer snapshot.
+    //      where: { id_workspaceId: {}, updatedAt: { lt: updatedAt } }
+    //                                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+    //
+    // iii. Only set the seq number when creating the snapshot.
+    //      For updating scenario, the seq number will be updated when updates pushed to db.
+    try {
+      const result: { updatedAt: Date }[] = await this.db.$queryRaw`
+        INSERT INTO "snapshots" ("workspace_id", "guid", "blob", "state", "seq", "created_at", "updated_at")
+        VALUES (${workspaceId}, ${guid}, ${blob}, ${state}, ${seq}, DEFAULT, ${updatedAt})
+        ON CONFLICT ("workspace_id", "guid")
+        DO UPDATE SET "blob" = ${blob}, "state" = ${state}, "updated_at" = ${updatedAt}, "seq" = ${seq}
+        WHERE "snapshots"."workspace_id" = ${workspaceId} AND "snapshots"."guid" = ${guid} AND "snapshots"."updated_at" <= ${updatedAt}
+        RETURNING "snapshots"."workspace_id" as "workspaceId", "snapshots"."guid" as "id", "snapshots"."updated_at" as "updatedAt"
+      `;
+
+      // const result = await this.db.snapshot.upsert({
+      //   select: {
+      //     updatedAt: true,
+      //     seq: true,
+      //   },
+      //   where: {
+      //     id_workspaceId: {
+      //       workspaceId,
+      //       id: guid,
+      //     },
+      //     ⬇️ NOT SUPPORTED BY PRISMA YET
+      //     updatedAt: {
+      //       lt: updatedAt,
+      //     },
+      //   },
+      //   update: {
+      //     blob,
+      //     state,
+      //     updatedAt,
+      //   },
+      //   create: {
+      //     workspaceId,
+      //     id: guid,
+      //     blob,
+      //     state,
+      //     updatedAt,
+      //     seq,
+      //   },
+      // });
+
+      // if the condition `snapshot.updatedAt > updatedAt` is true, by which means the snapshot has already been updated by other process,
+      // the updates has been applied to current `doc` must have been seen by the other process as well.
+      // The `updatedSnapshot` will be `undefined` in this case.
+      const updatedSnapshot = result.at(0);
+
+      if (!updatedSnapshot) {
+        return undefined;
       }
 
-      const state = Buffer.from(encodeStateVector(doc));
-
-      return await this.db.$transaction(async db => {
-        const snapshot = await db.snapshot.findUnique({
-          where: {
-            id_workspaceId: {
-              id: guid,
-              workspaceId,
-            },
-          },
-        });
-
-        // update
-        if (snapshot) {
-          // only update if state is newer
-          if (isStateNewer(snapshot.state ?? Buffer.from([0]), state)) {
-            await db.snapshot.update({
-              select: {
-                seq: true,
-              },
-              where: {
-                id_workspaceId: {
-                  workspaceId,
-                  id: guid,
-                },
-              },
-              data: {
-                blob,
-                state,
-                updatedAt,
-              },
-            });
-
-            return true;
-          } else {
-            return false;
-          }
-        } else {
-          // create
-          await db.snapshot.create({
-            select: {
-              seq: true,
-            },
-            data: {
-              id: guid,
-              workspaceId,
-              blob,
-              state,
-              seq: initialSeq,
-              createdAt: updatedAt,
-              updatedAt,
-            },
-          });
-
-          return true;
-        }
-      });
-    });
+      return true;
+    } catch (e) {
+      this.logger.error('Failed to upsert snapshot', e);
+      return false;
+    }
   }
 
   private async _get(
@@ -548,7 +527,7 @@ export class DocManager implements OnModuleInit, OnModuleDestroy {
 
     if (updates.length) {
       return {
-        doc: await this.squash(updates, snapshot),
+        doc: await this.squash(snapshot, updates),
       };
     }
 
@@ -559,17 +538,17 @@ export class DocManager implements OnModuleInit, OnModuleDestroy {
    * Squash updates into a single update and save it as snapshot,
    * and delete the updates records at the same time.
    */
-  private async squash(updates: Update[], snapshot: Snapshot | null) {
+  @CallTimer('doc', 'squash')
+  private async squash(snapshot: Snapshot | null, updates: Update[]) {
     if (!updates.length) {
       throw new Error('No updates to squash');
     }
-    const first = updates[0];
-    const last = updates[updates.length - 1];
 
-    const { id, workspaceId } = first;
+    const last = updates[updates.length - 1];
+    const { id, workspaceId } = last;
 
     const doc = await this.applyUpdates(
-      first.id,
+      id,
       snapshot ? snapshot.blob : Buffer.from([0, 0]),
       ...updates.map(u => u.blob)
     );
@@ -600,19 +579,24 @@ export class DocManager implements OnModuleInit, OnModuleDestroy {
       );
     }
 
-    // always delete updates
-    // the upsert will return false if the state is not newer, so we don't need to worry about it
-    const { count } = await this.db.update.deleteMany({
-      where: {
-        id,
-        workspaceId,
-        seq: {
-          in: updates.map(u => u.seq),
+    // we will keep the updates only if the upsert failed on unknown reason
+    // `done === undefined` means the updates is outdated(have already been merged by other process), safe to be deleted
+    // `done === true` means the upsert is successful, safe to be deleted
+    if (done !== false) {
+      // always delete updates
+      // the upsert will return false if the state is not newer, so we don't need to worry about it
+      const { count } = await this.db.update.deleteMany({
+        where: {
+          id,
+          workspaceId,
+          seq: {
+            in: updates.map(u => u.seq),
+          },
         },
-      },
-    });
+      });
 
-    await this.updateCachedUpdatesCount(workspaceId, id, -count);
+      await this.updateCachedUpdatesCount(workspaceId, id, -count);
+    }
 
     return doc;
   }
@@ -761,18 +745,6 @@ export class DocManager implements OnModuleInit, OnModuleDestroy {
     );
   }
 
-  async lockSnapshotForUpsert<T>(
-    workspaceId: string,
-    guid: string,
-    job: () => Promise<T>
-  ) {
-    return this.doWithLock(
-      'doc:manager:snapshot',
-      `${workspaceId}::${guid}`,
-      job
-    );
-  }
-
   @Cron(CronExpression.EVERY_MINUTE)
   async reportUpdatesQueueCount() {
     metrics.doc

packages/backend/server/src/core/workspaces/controller.ts

@@ -56,7 +56,7 @@ export class WorkspacesController {
       this.logger.warn(`Blob ${workspaceId}/${name} has no metadata`);
     }
 
-    res.setHeader('cache-control', 'public, max-age=31536000, immutable');
+    res.setHeader('cache-control', 'public, max-age=2592000, immutable');
     body.pipe(res);
   }
 
@@ -106,6 +106,7 @@ export class WorkspacesController {
     }
 
     res.setHeader('content-type', 'application/octet-stream');
+    res.setHeader('cache-control', 'no-cache');
     res.send(update);
   }
 
@@ -142,6 +143,7 @@ export class WorkspacesController {
 
     if (history) {
       res.setHeader('content-type', 'application/octet-stream');
+      res.setHeader('cache-control', 'public, max-age=2592000, immutable');
       res.send(history.blob);
     } else {
       throw new NotFoundException('Doc history not found');

packages/backend/server/src/core/workspaces/resolvers/workspace.ts

@@ -277,6 +277,7 @@ export class WorkspaceResolver {
             id: workspace.id,
             workspaceId: workspace.id,
             blob: buffer,
+            updatedAt: new Date(),
           },
         });
       }

packages/backend/server/src/data/migrations/1605053000403-self-host-admin.ts

@@ -8,7 +8,7 @@ export class SelfHostAdmin1605053000403 {
   // do the migration
   static async up(db: PrismaClient, ref: ModuleRef) {
     const config = ref.get(Config, { strict: false });
-    if (config.flavor.selfhosted) {
+    if (config.isSelfhosted) {
       if (
         !process.env.AFFINE_ADMIN_EMAIL ||
         !process.env.AFFINE_ADMIN_PASSWORD

packages/backend/server/src/data/migrations/1708321519830-refresh-unlimited-workspace-feature.ts

@@ -0,0 +1,15 @@
+import { PrismaClient } from '@prisma/client';
+
+import { FeatureType } from '../../core/features';
+import { upsertLatestFeatureVersion } from './utils/user-features';
+
+export class RefreshUnlimitedWorkspaceFeature1708321519830 {
+  // do the migration
+  static async up(db: PrismaClient) {
+    // add unlimited workspace feature
+    await upsertLatestFeatureVersion(db, FeatureType.UnlimitedWorkspace);
+  }
+
+  // revert the migration
+  static async down(_db: PrismaClient) {}
+}

packages/backend/server/src/data/migrations/utils/user-features.ts

@@ -3,6 +3,7 @@ import { Prisma, PrismaClient } from '@prisma/client';
 import {
   CommonFeature,
   FeatureKind,
+  Features,
   FeatureType,
 } from '../../../core/features';
 
@@ -33,6 +34,16 @@ export async function upsertFeature(
   }
 }
 
+export async function upsertLatestFeatureVersion(
+  db: PrismaClient,
+  type: FeatureType
+) {
+  const feature = Features.filter(f => f.feature === type);
+  feature.sort((a, b) => b.version - a.version);
+  const latestFeature = feature[0];
+  await upsertFeature(db, latestFeature);
+}
+
 export async function migrateNewFeatureTable(prisma: PrismaClient) {
   const waitingList = await prisma.newFeaturesWaitingList.findMany();
   for (const oldUser of waitingList) {

packages/backend/server/src/fundamentals/config/def.ts

@@ -1,4 +1,5 @@
 import type { ApolloDriverConfig } from '@nestjs/apollo';
+import SMTPTransport from 'nodemailer/lib/smtp-transport';
 
 import type { LeafPaths } from '../utils/types';
 import { EnvConfigType } from './env';
@@ -18,18 +19,22 @@ export enum ExternalAccount {
   firebase = 'firebase',
 }
 
-export type ServerFlavor =
-  | 'allinone'
-  | 'main'
-  // @deprecated
-  | 'graphql'
-  | 'sync'
-  | 'selfhosted';
+export type ServerFlavor = 'allinone' | 'graphql' | 'sync';
+export type AFFINE_ENV = 'dev' | 'beta' | 'production';
+export type NODE_ENV = 'development' | 'test' | 'production';
+
+export enum DeploymentType {
+  Affine = 'affine',
+  Selfhosted = 'selfhosted',
+}
+
 export type ConfigPaths = LeafPaths<
   Omit<
     AFFiNEConfig,
     | 'ENV_MAP'
     | 'version'
+    | 'type'
+    | 'isSelfhosted'
     | 'flavor'
     | 'env'
     | 'affine'
@@ -63,27 +68,36 @@ export interface AFFiNEConfig {
    */
   readonly version: string;
 
+  /**
+   * Deployment type, AFFiNE Cloud, or Selfhosted
+   */
+  get type(): DeploymentType;
+
+  /**
+   * Fast detect whether currently deployed in a selfhosted environment
+   */
+  get isSelfhosted(): boolean;
+
   /**
    * Server flavor
    */
   get flavor(): {
     type: string;
-    main: boolean;
+    graphql: boolean;
     sync: boolean;
-    selfhosted: boolean;
   };
 
   /**
    * Deployment environment
    */
-  readonly affineEnv: 'dev' | 'beta' | 'production';
+  readonly AFFINE_ENV: AFFINE_ENV;
   /**
    * alias to `process.env.NODE_ENV`
    *
-   * @default 'production'
+   * @default 'development'
    * @env NODE_ENV
    */
-  readonly env: string;
+  readonly NODE_ENV: NODE_ENV;
 
   /**
    * fast AFFiNE environment judge
@@ -101,6 +115,7 @@ export interface AFFiNEConfig {
     dev: boolean;
     test: boolean;
   };
+
   get deploy(): boolean;
 
   /**
@@ -249,18 +264,6 @@ export interface AFFiNEConfig {
         }
       >
     >;
-    /**
-     * whether to use local email service to send email
-     * local debug only
-     */
-    localEmail: boolean;
-    email: {
-      server: string;
-      port: number;
-      login: string;
-      sender: string;
-      password: string;
-    };
     captcha: {
       /**
        * whether to enable captcha
@@ -284,6 +287,13 @@ export interface AFFiNEConfig {
     };
   };
 
+  /**
+   * Configurations for mail service used to post auth or bussiness mails.
+   *
+   * @see https://nodemailer.com/smtp/
+   */
+  mailer?: SMTPTransport.Options;
+
   doc: {
     manager: {
       /**
@@ -302,11 +312,17 @@ export interface AFFiNEConfig {
       updatePollInterval: number;
 
       /**
-       * Use JwstCodec to merge updates at the same time when merging using Yjs.
+       * The maximum number of updates that will be pulled from the server at once.
+       * Existing for avoiding the server to be overloaded when there are too many updates for one doc.
+       */
+      maxUpdatesPullCount: number;
+
+      /**
+       * Use `y-octo` to merge updates at the same time when merging using Yjs.
        *
        * This is an experimental feature, and aimed to check the correctness of JwstCodec.
        */
-      experimentalMergeWithJwstCodec: boolean;
+      experimentalMergeWithYOcto: boolean;
     };
     history: {
       /**

packages/backend/server/src/fundamentals/config/default.ts

@@ -6,7 +6,14 @@ import { merge } from 'lodash-es';
 import parse from 'parse-duration';
 
 import pkg from '../../../package.json' assert { type: 'json' };
-import type { AFFiNEConfig, ServerFlavor } from './def';
+import {
+  type AFFINE_ENV,
+  AFFiNEConfig,
+  DeploymentType,
+  type NODE_ENV,
+  type ServerFlavor,
+} from './def';
+import { readEnv } from './env';
 import { getDefaultAFFiNEStorageConfig } from './storage';
 
 // Don't use this in production
@@ -46,40 +53,62 @@ const jwtKeyPair = (function () {
 })();
 
 export const getDefaultAFFiNEConfig: () => AFFiNEConfig = () => {
-  let isHttps: boolean | null = null;
-  let flavor = (process.env.SERVER_FLAVOR ?? 'allinone') as ServerFlavor;
+  const NODE_ENV = readEnv<NODE_ENV>('NODE_ENV', 'development', [
+    'development',
+    'test',
+    'production',
+  ]);
+  const AFFINE_ENV = readEnv<AFFINE_ENV>('AFFINE_ENV', 'dev', [
+    'dev',
+    'beta',
+    'production',
+  ]);
+  const flavor = readEnv<ServerFlavor>('SERVER_FLAVOR', 'allinone', [
+    'allinone',
+    'graphql',
+    'sync',
+  ]);
+  const deploymentType = readEnv<DeploymentType>(
+    'DEPLOYMENT_TYPE',
+    NODE_ENV === 'development'
+      ? DeploymentType.Affine
+      : DeploymentType.Selfhosted,
+    Object.values(DeploymentType)
+  );
+  const isSelfhosted = deploymentType === DeploymentType.Selfhosted;
+
   const defaultConfig = {
     serverId: 'affine-nestjs-server',
-    serverName: flavor === 'selfhosted' ? 'Self-Host Cloud' : 'AFFiNE Cloud',
+    serverName: isSelfhosted ? 'Self-Host Cloud' : 'AFFiNE Cloud',
     version: pkg.version,
+    get type() {
+      return deploymentType;
+    },
+    get isSelfhosted() {
+      return isSelfhosted;
+    },
     get flavor() {
-      if (flavor === 'graphql') {
-        flavor = 'main';
-      }
       return {
         type: flavor,
-        main: flavor === 'main' || flavor === 'allinone',
+        graphql: flavor === 'graphql' || flavor === 'allinone',
         sync: flavor === 'sync' || flavor === 'allinone',
-        selfhosted: flavor === 'selfhosted',
       };
     },
     ENV_MAP: {},
-    affineEnv: 'dev',
+    AFFINE_ENV,
     get affine() {
-      const env = this.affineEnv;
       return {
-        canary: env === 'dev',
-        beta: env === 'beta',
-        stable: env === 'production',
+        canary: AFFINE_ENV === 'dev',
+        beta: AFFINE_ENV === 'beta',
+        stable: AFFINE_ENV === 'production',
       };
     },
-    env: process.env.NODE_ENV ?? 'development',
+    NODE_ENV,
     get node() {
-      const env = this.env;
       return {
-        prod: env === 'production',
-        dev: env === 'development',
-        test: env === 'test',
+        prod: NODE_ENV === 'production',
+        dev: NODE_ENV === 'development',
+        test: NODE_ENV === 'test',
       };
     },
     get deploy() {
@@ -88,12 +117,7 @@ export const getDefaultAFFiNEConfig: () => AFFiNEConfig = () => {
     featureFlags: {
       earlyAccessPreview: false,
     },
-    get https() {
-      return isHttps ?? !this.node.dev;
-    },
-    set https(value: boolean) {
-      isHttps = value;
-    },
+    https: false,
     host: 'localhost',
     port: 3010,
     path: '',
@@ -142,14 +166,6 @@ export const getDefaultAFFiNEConfig: () => AFFiNEConfig = () => {
         return this.privateKey;
       },
       oauthProviders: {},
-      localEmail: false,
-      email: {
-        server: 'smtp.gmail.com',
-        port: 465,
-        login: '',
-        sender: '',
-        password: '',
-      },
     },
     storage: getDefaultAFFiNEStorageConfig(),
     rateLimiter: {
@@ -160,7 +176,8 @@ export const getDefaultAFFiNEConfig: () => AFFiNEConfig = () => {
       manager: {
         enableUpdateAutoMerging: flavor !== 'sync',
         updatePollInterval: 3000,
-        experimentalMergeWithJwstCodec: false,
+        maxUpdatesPullCount: 500,
+        experimentalMergeWithYOcto: false,
       },
       history: {
         interval: 1000 * 60 * 10 /* 10 mins */,

packages/backend/server/src/fundamentals/config/env.ts

@@ -48,3 +48,24 @@ export function applyEnvToConfig(rawConfig: AFFiNEConfig) {
     }
   }
 }
+
+export function readEnv<T>(
+  env: string,
+  defaultValue: T,
+  availableValues?: T[]
+) {
+  const value = process.env[env];
+  if (value === undefined) {
+    return defaultValue;
+  }
+
+  if (availableValues && !availableValues.includes(value as any)) {
+    throw new Error(
+      `Invalid value '${value}' for environment variable ${env}, expected one of [${availableValues.join(
+        ', '
+      )}]`
+    );
+  }
+
+  return value as T;
+}

packages/backend/server/src/fundamentals/index.ts

@@ -9,6 +9,7 @@ export {
   applyEnvToConfig,
   Config,
   type ConfigPaths,
+  DeploymentType,
   getDefaultAFFiNEStorageConfig,
 } from './config';
 export { EventEmitter, type EventPayload, OnEvent } from './event';

packages/backend/server/src/fundamentals/mailer/index.ts

@@ -1,11 +1,21 @@
 import { Global, Module } from '@nestjs/common';
 
+import { OptionalModule } from '../nestjs';
 import { MailService } from './mail.service';
 import { MAILER } from './mailer';
 
+@Global()
+@OptionalModule({
+  providers: [MAILER],
+  exports: [MAILER],
+  requires: ['mailer.auth.user', 'mailer.auth.pass'],
+})
+class MailerModule {}
+
 @Global()
 @Module({
-  providers: [MAILER, MailService],
+  imports: [MailerModule],
+  providers: [MailService],
   exports: [MailService],
 })
 export class MailModule {}

packages/backend/server/src/fundamentals/mailer/mail.service.ts

@@ -1,30 +1,28 @@
-import { Inject, Injectable } from '@nestjs/common';
+import { Inject, Injectable, Optional } from '@nestjs/common';
 
 import { Config } from '../config';
-import {
-  MAILER_SERVICE,
-  type MailerService,
-  type Options,
-  type Response,
-} from './mailer';
+import { MAILER_SERVICE, type MailerService, type Options } from './mailer';
 import { emailTemplate } from './template';
 @Injectable()
 export class MailService {
   constructor(
-    @Inject(MAILER_SERVICE) private readonly mailer: MailerService,
-    private readonly config: Config
+    private readonly config: Config,
+    @Optional() @Inject(MAILER_SERVICE) private readonly mailer?: MailerService
   ) {}
 
-  async sendMail(options: Options): Promise<Response> {
-    return this.mailer.sendMail(options);
+  async sendMail(options: Options) {
+    if (!this.mailer) {
+      throw new Error('Mailer service is not configured.');
+    }
+
+    return this.mailer.sendMail({
+      from: this.config.mailer?.from,
+      ...options,
+    });
   }
 
   hasConfigured() {
-    return (
-      !!this.config.auth.email.login &&
-      !!this.config.auth.email.password &&
-      !!this.config.auth.email.sender
-    );
+    return !!this.mailer;
   }
 
   async sendInviteEmail(
@@ -80,7 +78,6 @@ export class MailService {
     });
 
     return this.sendMail({
-      from: this.config.auth.email.sender,
       to,
       subject: `${invitationInfo.user.name} invited you to join ${invitationInfo.workspace.name}`,
       html,
@@ -119,7 +116,6 @@ export class MailService {
       buttonUrl: url,
     });
     return this.sendMail({
-      from: this.config.auth.email.sender,
       to,
       subject: `Modify your AFFiNE password`,
       html,
@@ -135,7 +131,6 @@ export class MailService {
       buttonUrl: url,
     });
     return this.sendMail({
-      from: this.config.auth.email.sender,
       to,
       subject: `Set your AFFiNE password`,
       html,
@@ -150,7 +145,6 @@ export class MailService {
       buttonUrl: url,
     });
     return this.sendMail({
-      from: this.config.auth.email.sender,
       to,
       subject: `Verify your current email for AFFiNE`,
       html,
@@ -165,7 +159,6 @@ export class MailService {
       buttonUrl: url,
     });
     return this.sendMail({
-      from: this.config.auth.email.sender,
       to,
       subject: `Verify your new email for AFFiNE`,
       html,
@@ -177,7 +170,6 @@ export class MailService {
       content: `As per your request, we have changed your email. Please make sure you're using ${to} when you log in the next time. `,
     });
     return this.sendMail({
-      from: this.config.auth.email.sender,
       to,
       subject: `Your email has been changed`,
       html,
@@ -200,7 +192,6 @@ export class MailService {
       content: `${inviteeName} has joined ${workspaceName}`,
     });
     return this.sendMail({
-      from: this.config.auth.email.sender,
       to,
       subject: title,
       html,
@@ -223,7 +214,6 @@ export class MailService {
       content: `${inviteeName} has left your workspace`,
     });
     return this.sendMail({
-      from: this.config.auth.email.sender,
       to,
       subject: title,
       html,

packages/backend/server/src/fundamentals/mailer/mailer.ts

@@ -11,28 +11,11 @@ export type Response = SMTPTransport.SentMessageInfo;
 export type Options = SMTPTransport.Options;
 
 export const MAILER: FactoryProvider<
-  Transporter<SMTPTransport.SentMessageInfo>
+  Transporter<SMTPTransport.SentMessageInfo> | undefined
 > = {
   provide: MAILER_SERVICE,
   useFactory: (config: Config) => {
-    if (config.auth.localEmail) {
-      return createTransport({
-        host: '0.0.0.0',
-        port: 1025,
-        secure: false,
-        auth: {
-          user: config.auth.email.login,
-          pass: config.auth.email.password,
-        },
-      });
-    }
-    return createTransport({
-      service: 'gmail',
-      auth: {
-        user: config.auth.email.login,
-        pass: config.auth.email.password,
-      },
-    });
+    return config.mailer ? createTransport(config.mailer) : undefined;
   },
   inject: [Config],
 };

packages/backend/server/src/fundamentals/metrics/index.ts

@@ -1,28 +1,48 @@
-import { Global, Module, OnModuleDestroy, OnModuleInit } from '@nestjs/common';
+import {
+  Global,
+  Module,
+  OnModuleDestroy,
+  OnModuleInit,
+  Provider,
+} from '@nestjs/common';
+import { ModuleRef } from '@nestjs/core';
 import { NodeSDK } from '@opentelemetry/sdk-node';
 
-import { Config, parseEnvValue } from '../config';
-import { createSDK, registerCustomMetrics } from './opentelemetry';
+import { Config } from '../config';
+import {
+  LocalOpentelemetryFactory,
+  OpentelemetryFactory,
+  registerCustomMetrics,
+} from './opentelemetry';
+
+const factorProvider: Provider = {
+  provide: OpentelemetryFactory,
+  useFactory: (config: Config) => {
+    return config.metrics.enabled ? new LocalOpentelemetryFactory() : null;
+  },
+  inject: [Config],
+};
 
 @Global()
-@Module({})
+@Module({
+  providers: [factorProvider],
+  exports: [factorProvider],
+})
 export class MetricsModule implements OnModuleInit, OnModuleDestroy {
   private sdk: NodeSDK | null = null;
-  constructor(private readonly config: Config) {}
+  constructor(private readonly ref: ModuleRef) {}
 
   onModuleInit() {
-    if (
-      this.config.metrics.enabled &&
-      !parseEnvValue(process.env.DISABLE_TELEMETRY, 'boolean')
-    ) {
-      this.sdk = createSDK();
+    const factor = this.ref.get(OpentelemetryFactory, { strict: false });
+    if (factor) {
+      this.sdk = factor.create();
       this.sdk.start();
       registerCustomMetrics();
     }
   }
 
   async onModuleDestroy() {
-    if (this.config.metrics.enabled && this.sdk) {
+    if (this.sdk) {
       await this.sdk.shutdown();
     }
   }
@@ -30,3 +50,4 @@ export class MetricsModule implements OnModuleInit, OnModuleDestroy {
 
 export * from './metrics';
 export * from './utils';
+export { OpentelemetryFactory };

packages/backend/server/src/fundamentals/metrics/opentelemetry.ts

@@ -1,6 +1,4 @@
-import { MetricExporter } from '@google-cloud/opentelemetry-cloud-monitoring-exporter';
-import { TraceExporter } from '@google-cloud/opentelemetry-cloud-trace-exporter';
-import { GcpDetectorSync } from '@google-cloud/opentelemetry-resource-util';
+import { OnModuleDestroy } from '@nestjs/common';
 import { metrics } from '@opentelemetry/api';
 import {
   CompositePropagator,
@@ -18,16 +16,13 @@ import { NestInstrumentation } from '@opentelemetry/instrumentation-nestjs-core'
 import { SocketIoInstrumentation } from '@opentelemetry/instrumentation-socket.io';
 import { Resource } from '@opentelemetry/resources';
 import {
-  ConsoleMetricExporter,
   type MeterProvider,
   MetricProducer,
   MetricReader,
-  PeriodicExportingMetricReader,
 } from '@opentelemetry/sdk-metrics';
 import { NodeSDK } from '@opentelemetry/sdk-node';
 import {
   BatchSpanProcessor,
-  ConsoleSpanExporter,
   SpanExporter,
   TraceIdRatioBasedSampler,
 } from '@opentelemetry/sdk-trace-node';
@@ -38,7 +33,7 @@ import { PrismaMetricProducer } from './prisma';
 
 const { PrismaInstrumentation } = prismaInstrument;
 
-abstract class OpentelemetryFactor {
+export abstract class OpentelemetryFactory {
   abstract getMetricReader(): MetricReader;
   abstract getSpanExporter(): SpanExporter;
 
@@ -59,7 +54,7 @@ abstract class OpentelemetryFactor {
 
   getResource() {
     return new Resource({
-      [SemanticResourceAttributes.K8S_NAMESPACE_NAME]: AFFiNE.affineEnv,
+      [SemanticResourceAttributes.K8S_NAMESPACE_NAME]: AFFiNE.AFFINE_ENV,
       [SemanticResourceAttributes.SERVICE_NAME]: AFFiNE.flavor.type,
       [SemanticResourceAttributes.SERVICE_VERSION]: AFFiNE.version,
     });
@@ -85,32 +80,20 @@ abstract class OpentelemetryFactor {
   }
 }
 
-class GCloudOpentelemetryFactor extends OpentelemetryFactor {
-  override getResource(): Resource {
-    return super.getResource().merge(new GcpDetectorSync().detect());
+export class LocalOpentelemetryFactory
+  extends OpentelemetryFactory
+  implements OnModuleDestroy
+{
+  private readonly metricsExporter = new PrometheusExporter({
+    metricProducers: this.getMetricsProducers(),
+  });
+
+  async onModuleDestroy() {
+    await this.metricsExporter.shutdown();
   }
 
   override getMetricReader(): MetricReader {
-    return new PeriodicExportingMetricReader({
-      exportIntervalMillis: 30000,
-      exportTimeoutMillis: 10000,
-      exporter: new MetricExporter({
-        prefix: 'custom.googleapis.com',
-      }),
-      metricProducers: this.getMetricsProducers(),
-    });
-  }
-
-  override getSpanExporter(): SpanExporter {
-    return new TraceExporter();
-  }
-}
-
-class LocalOpentelemetryFactor extends OpentelemetryFactor {
-  override getMetricReader(): MetricReader {
-    return new PrometheusExporter({
-      metricProducers: this.getMetricsProducers(),
-    });
+    return this.metricsExporter;
   }
 
   override getSpanExporter(): SpanExporter {
@@ -118,33 +101,6 @@ class LocalOpentelemetryFactor extends OpentelemetryFactor {
   }
 }
 
-class DebugOpentelemetryFactor extends OpentelemetryFactor {
-  override getMetricReader(): MetricReader {
-    return new PeriodicExportingMetricReader({
-      exporter: new ConsoleMetricExporter(),
-      metricProducers: this.getMetricsProducers(),
-    });
-  }
-
-  override getSpanExporter(): SpanExporter {
-    return new ConsoleSpanExporter();
-  }
-}
-
-// TODO(@forehalo): make it configurable
-export function createSDK() {
-  let factor: OpentelemetryFactor | null = null;
-  if (process.env.NODE_ENV === 'production') {
-    factor = new GCloudOpentelemetryFactor();
-  } else if (process.env.DEBUG_METRICS) {
-    factor = new DebugOpentelemetryFactor();
-  } else {
-    factor = new LocalOpentelemetryFactor();
-  }
-
-  return factor?.create();
-}
-
 function getMeterProvider() {
   return metrics.getMeterProvider();
 }

packages/backend/server/src/fundamentals/session/index.ts

@@ -5,7 +5,7 @@ import { SessionCache } from '../cache';
 @Injectable()
 export class SessionService {
   private readonly prefix = 'session:';
-  private readonly sessionTtl = 30 * 60 * 1000; // 30 min
+  public readonly sessionTtl = 30 * 60 * 1000; // 30 min
 
   constructor(private readonly cache: SessionCache) {}
 

packages/backend/server/src/fundamentals/storage/index.ts

@@ -15,8 +15,6 @@ try {
         : require('../../../storage.node');
 }
 
-export { storageModule as OctoBaseStorageModule };
-
 export const mergeUpdatesInApplyWay = storageModule.mergeUpdatesInApplyWay;
 
 export const verifyChallengeResponse = async (

packages/backend/server/src/index.ts

@@ -1,14 +1,16 @@
 /// <reference types="./global.d.ts" />
-// keep the config import at the top
-// eslint-disable-next-line simple-import-sort/imports
 import './prelude';
+
+import { Logger } from '@nestjs/common';
+
 import { createApp } from './app';
 
 const app = await createApp();
 const listeningHost = AFFiNE.deploy ? '0.0.0.0' : 'localhost';
 await app.listen(AFFiNE.port, listeningHost);
 
-console.log(
-  `AFFiNE Server has been started on http://${listeningHost}:${AFFiNE.port}.`
-);
-console.log(`And the public server should be recognized as ${AFFiNE.baseUrl}`);
+const logger = new Logger('App');
+
+logger.log(`AFFiNE Server is running in [${AFFiNE.type}] mode`);
+logger.log(`Listening on http://${listeningHost}:${AFFiNE.port}`);
+logger.log(`And the public server should be recognized as ${AFFiNE.baseUrl}`);

packages/backend/server/src/plugins/config.ts

@@ -1,3 +1,4 @@
+import { GCloudConfig } from './gcloud/config';
 import { PaymentConfig } from './payment';
 import { RedisOptions } from './redis';
 
@@ -5,6 +6,7 @@ declare module '../fundamentals/config' {
   interface PluginsConfig {
     readonly payment: PaymentConfig;
     readonly redis: RedisOptions;
+    readonly gcloud: GCloudConfig;
   }
 
   export type AvailablePlugins = keyof PluginsConfig;

packages/backend/server/src/plugins/gcloud/config.ts

@@ -0,0 +1 @@
+export interface GCloudConfig {}

packages/backend/server/src/plugins/gcloud/index.ts

@@ -0,0 +1,10 @@
+import { Global } from '@nestjs/common';
+
+import { OptionalModule } from '../../fundamentals';
+import { GCloudMetrics } from './metrics';
+
+@Global()
+@OptionalModule({
+  imports: [GCloudMetrics],
+})
+export class GCloudModule {}

packages/backend/server/src/plugins/gcloud/metrics.ts

@@ -0,0 +1,46 @@
+import { MetricExporter } from '@google-cloud/opentelemetry-cloud-monitoring-exporter';
+import { TraceExporter } from '@google-cloud/opentelemetry-cloud-trace-exporter';
+import { GcpDetectorSync } from '@google-cloud/opentelemetry-resource-util';
+import { Global, Provider } from '@nestjs/common';
+import { Resource } from '@opentelemetry/resources';
+import {
+  MetricReader,
+  PeriodicExportingMetricReader,
+} from '@opentelemetry/sdk-metrics';
+import { SpanExporter } from '@opentelemetry/sdk-trace-node';
+
+import { OptionalModule } from '../../fundamentals';
+import { OpentelemetryFactory } from '../../fundamentals/metrics';
+
+export class GCloudOpentelemetryFactory extends OpentelemetryFactory {
+  override getResource(): Resource {
+    return super.getResource().merge(new GcpDetectorSync().detect());
+  }
+
+  override getMetricReader(): MetricReader {
+    return new PeriodicExportingMetricReader({
+      exportIntervalMillis: 30000,
+      exportTimeoutMillis: 10000,
+      exporter: new MetricExporter({
+        prefix: 'custom.googleapis.com',
+      }),
+      metricProducers: this.getMetricsProducers(),
+    });
+  }
+
+  override getSpanExporter(): SpanExporter {
+    return new TraceExporter();
+  }
+}
+
+const factorProvider: Provider = {
+  provide: OpentelemetryFactory,
+  useFactory: () => new GCloudOpentelemetryFactory(),
+};
+
+@Global()
+@OptionalModule({
+  if: config => config.metrics.enabled,
+  overrides: [factorProvider],
+})
+export class GCloudMetrics {}

packages/backend/server/src/plugins/index.ts

@@ -1,8 +1,10 @@
 import type { AvailablePlugins } from '../fundamentals/config';
+import { GCloudModule } from './gcloud';
 import { PaymentModule } from './payment';
 import { RedisModule } from './redis';
 
 export const pluginsMap = new Map<AvailablePlugins, AFFiNEModule>([
   ['payment', PaymentModule],
   ['redis', RedisModule],
+  ['gcloud', GCloudModule],
 ]);

packages/backend/server/src/plugins/payment/index.ts

@@ -23,6 +23,7 @@ import { StripeWebhook } from './webhook';
   //   'plugins.payment.stripe.keys.webhookKey',
   // ],
   contributesTo: ServerFeature.Payment,
+  if: config => config.flavor.graphql,
 })
 export class PaymentModule {}
 

packages/backend/server/src/plugins/payment/resolver.ts

@@ -3,6 +3,7 @@ import {
   Args,
   Context,
   Field,
+  InputType,
   Int,
   Mutation,
   ObjectType,
@@ -125,6 +126,31 @@ class UserInvoiceType implements Partial<UserInvoice> {
   updatedAt!: Date;
 }
 
+@InputType()
+class CreateCheckoutSessionInput {
+  @Field(() => SubscriptionRecurring, {
+    nullable: true,
+    defaultValue: SubscriptionRecurring.Yearly,
+  })
+  recurring!: SubscriptionRecurring;
+
+  @Field(() => SubscriptionPlan, {
+    nullable: true,
+    defaultValue: SubscriptionPlan.Pro,
+  })
+  plan!: SubscriptionPlan;
+
+  @Field(() => String, { nullable: true })
+  coupon!: string | null;
+
+  @Field(() => String, { nullable: true })
+  successCallbackLink!: string | null;
+
+  // @FIXME(forehalo): we should put this field in the header instead of as a explicity args
+  @Field(() => String)
+  idempotencyKey!: string;
+}
+
 @Auth()
 @Resolver(() => UserSubscriptionType)
 export class SubscriptionResolver {
@@ -182,7 +208,11 @@ export class SubscriptionResolver {
     });
   }
 
+  /**
+   * @deprecated
+   */
   @Mutation(() => String, {
+    deprecationReason: 'use `createCheckoutSession` instead',
     description: 'Create a subscription checkout link of stripe',
   })
   async checkout(
@@ -193,6 +223,7 @@ export class SubscriptionResolver {
   ) {
     const session = await this.service.createCheckoutSession({
       user,
+      plan: SubscriptionPlan.Pro,
       recurring,
       redirectUrl: `${this.config.baseUrl}/upgrade-success`,
       idempotencyKey,
@@ -210,6 +241,36 @@ export class SubscriptionResolver {
     return session.url;
   }
 
+  @Mutation(() => String, {
+    description: 'Create a subscription checkout link of stripe',
+  })
+  async createCheckoutSession(
+    @CurrentUser() user: User,
+    @Args({ name: 'input', type: () => CreateCheckoutSessionInput })
+    input: CreateCheckoutSessionInput
+  ) {
+    const session = await this.service.createCheckoutSession({
+      user,
+      plan: input.plan,
+      recurring: input.recurring,
+      promotionCode: input.coupon,
+      redirectUrl:
+        input.successCallbackLink ?? `${this.config.baseUrl}/upgrade-success`,
+      idempotencyKey: input.idempotencyKey,
+    });
+
+    if (!session.url) {
+      throw new GraphQLError('Failed to create checkout session', {
+        extensions: {
+          status: HttpStatus[HttpStatus.BAD_GATEWAY],
+          code: HttpStatus.BAD_GATEWAY,
+        },
+      });
+    }
+
+    return session.url;
+  }
+
   @Mutation(() => String, {
     description: 'Create a stripe customer portal to manage payment methods',
   })
@@ -276,7 +337,7 @@ export class UserSubscriptionResolver {
 
     // @FIXME(@forehalo): should not mock any api for selfhosted server
     // the frontend should avoid calling such api if feature is not enabled
-    if (this.config.flavor.selfhosted) {
+    if (this.config.isSelfhosted) {
       const start = new Date();
       const end = new Date();
       end.setFullYear(start.getFullYear() + 1);

packages/backend/server/src/plugins/payment/service.ts

@@ -69,13 +69,15 @@ export class SubscriptionService {
   async createCheckoutSession({
     user,
     recurring,
+    plan,
+    promotionCode,
     redirectUrl,
     idempotencyKey,
-    plan = SubscriptionPlan.Pro,
   }: {
     user: User;
-    plan?: SubscriptionPlan;
     recurring: SubscriptionRecurring;
+    plan: SubscriptionPlan;
+    promotionCode?: string | null;
     redirectUrl: string;
     idempotencyKey: string;
   }) {
@@ -95,7 +97,28 @@ export class SubscriptionService {
       `${idempotencyKey}-getOrCreateCustomer`,
       user
     );
-    const coupon = await this.getAvailableCoupon(user, CouponType.EarlyAccess);
+
+    let discount: { coupon?: string; promotion_code?: string } | undefined;
+
+    if (promotionCode) {
+      const code = await this.getAvailablePromotionCode(
+        promotionCode,
+        customer.stripeCustomerId
+      );
+      if (code) {
+        discount ??= {};
+        discount.promotion_code = code;
+      }
+    } else {
+      const coupon = await this.getAvailableCoupon(
+        user,
+        CouponType.EarlyAccess
+      );
+      if (coupon) {
+        discount ??= {};
+        discount.coupon = coupon;
+      }
+    }
 
     return await this.stripe.checkout.sessions.create(
       {
@@ -108,13 +131,11 @@ export class SubscriptionService {
         tax_id_collection: {
           enabled: true,
         },
-        ...(coupon
+        ...(discount
           ? {
-              discounts: [{ coupon }],
+              discounts: [discount],
             }
-          : {
-              allow_promotion_codes: true,
-            }),
+          : { allow_promotion_codes: true }),
         mode: 'subscription',
         success_url: redirectUrl,
         customer: customer.stripeCustomerId,
@@ -643,4 +664,33 @@ export class SubscriptionService {
 
     return null;
   }
+
+  private async getAvailablePromotionCode(
+    userFacingPromotionCode: string,
+    customer?: string
+  ) {
+    const list = await this.stripe.promotionCodes.list({
+      code: userFacingPromotionCode,
+      active: true,
+      limit: 1,
+    });
+
+    const code = list.data[0];
+    if (!code) {
+      return null;
+    }
+
+    let available = false;
+
+    if (code.customer) {
+      available =
+        typeof code.customer === 'string'
+          ? code.customer === customer
+          : code.customer.id === customer;
+    } else {
+      available = true;
+    }
+
+    return available ? code.id : null;
+  }
 }

packages/backend/server/src/prelude.ts

@@ -5,6 +5,7 @@ import { join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 import { config } from 'dotenv';
+import { omit } from 'lodash-es';
 
 import {
   applyEnvToConfig,
@@ -43,14 +44,23 @@ async function load() {
   // 3. load env => config map to `globalThis.AFFiNE.ENV_MAP
   await loadRemote(AFFiNE_CONFIG_PATH, 'affine.env.js');
 
-  // 4. apply `process.env` map overriding to `globalThis.AFFiNE`
-  applyEnvToConfig(globalThis.AFFiNE);
-
-  // 5. load `config/affine` to patch custom configs
+  // 4. load `config/affine` to patch custom configs
   await loadRemote(AFFiNE_CONFIG_PATH, 'affine.js');
 
-  if (process.env.NODE_ENV === 'development') {
-    console.log('AFFiNE Config:', JSON.stringify(globalThis.AFFiNE, null, 2));
+  // 5. load `config/affine.self` to patch custom configs
+  // This is the file only take effect in [AFFiNE Cloud]
+  if (!AFFiNE.isSelfhosted) {
+    await loadRemote(AFFiNE_CONFIG_PATH, 'affine.self.js');
+  }
+
+  // 6. apply `process.env` map overriding to `globalThis.AFFiNE`
+  applyEnvToConfig(globalThis.AFFiNE);
+
+  if (AFFiNE.node.dev) {
+    console.log(
+      'AFFiNE Config:',
+      JSON.stringify(omit(globalThis.AFFiNE, 'ENV_MAP'), null, 2)
+    );
   }
 }
 

packages/backend/server/src/schema.gql

@@ -2,6 +2,14 @@
 # THIS FILE WAS AUTOMATICALLY GENERATED (DO NOT MODIFY)
 # ------------------------------------------------------
 
+input CreateCheckoutSessionInput {
+  coupon: String
+  idempotencyKey: String!
+  plan: SubscriptionPlan = Pro
+  recurring: SubscriptionRecurring = Yearly
+  successCallbackLink: String
+}
+
 """
 A date-time string at UTC, such as 2019-12-03T09:54:33Z, compliant with the date-time format.
 """
@@ -107,7 +115,10 @@ type Mutation {
   changePassword(newPassword: String!, token: String!): UserType!
 
   """Create a subscription checkout link of stripe"""
-  checkout(idempotencyKey: String!, recurring: SubscriptionRecurring!): String!
+  checkout(idempotencyKey: String!, recurring: SubscriptionRecurring!): String! @deprecated(reason: "use `createCheckoutSession` instead")
+
+  """Create a subscription checkout link of stripe"""
+  createCheckoutSession(input: CreateCheckoutSessionInput!): String!
 
   """Create a stripe customer portal to manage payment methods"""
   createCustomerPortal: String!
@@ -229,10 +240,18 @@ type ServerConfigType {
   """server identical name could be shown as badge on user interface"""
   name: String!
 
+  """server type"""
+  type: ServerDeploymentType!
+
   """server version"""
   version: String!
 }
 
+enum ServerDeploymentType {
+  Affine
+  Selfhosted
+}
+
 enum ServerFeature {
   Payment
 }

packages/backend/server/tests/config.spec.ts

@@ -18,7 +18,7 @@ test.afterEach.always(async () => {
 
 test('should be able to get config', t => {
   t.true(typeof config.host === 'string');
-  t.is(config.env, 'test');
+  t.is(config.NODE_ENV, 'test');
 });
 
 test('should be able to override config', async t => {

packages/backend/server/tests/doc.spec.ts

@@ -4,12 +4,7 @@ import { TestingModule } from '@nestjs/testing';
 import { PrismaClient } from '@prisma/client';
 import test from 'ava';
 import * as Sinon from 'sinon';
-import {
-  applyUpdate,
-  decodeStateVector,
-  Doc as YDoc,
-  encodeStateAsUpdate,
-} from 'yjs';
+import { applyUpdate, Doc as YDoc, encodeStateAsUpdate } from 'yjs';
 
 import { DocManager, DocModule } from '../src/core/doc';
 import { QuotaModule } from '../src/core/quota';
@@ -277,72 +272,120 @@ test('should throw if meet max retry times', async t => {
   t.is(stub.callCount, 5);
 });
 
-test('should not update snapshot if state is outdated', async t => {
-  const db = m.get(PrismaClient);
+test('should be able to insert the snapshot if it is new created', async t => {
   const manager = m.get(DocManager);
 
-  await db.snapshot.create({
-    data: {
-      id: '2',
-      workspaceId: '2',
-      blob: Buffer.from([0, 0]),
-      seq: 1,
-    },
-  });
   const doc = new YDoc();
   const text = doc.getText('content');
-  const updates: Buffer[] = [];
-
-  doc.on('update', update => {
-    updates.push(Buffer.from(update));
-  });
-
   text.insert(0, 'hello');
-  text.insert(5, 'world');
-  text.insert(5, ' ');
+  const update = encodeStateAsUpdate(doc);
 
-  await Promise.all(updates.map(update => manager.push('2', '2', update)));
+  await manager.push('1', '1', Buffer.from(update));
 
-  const updateWith3Records = await manager.getUpdates('2', '2');
-  text.insert(11, '!');
-  await manager.push('2', '2', updates[3]);
-  const updateWith4Records = await manager.getUpdates('2', '2');
-
-  // Simulation:
-  //   Node A get 3 updates and squash them at time 1, will finish at time 10
-  //   Node B get 4 updates and squash them at time 3, will finish at time 8
-  //   Node B finish the squash first, and update the snapshot
-  //   Node A finish the squash later, and update the snapshot to an outdated state
-  // Time: ---------------------->
-  //    A:   ^get           ^upsert
-  //    B:      ^get    ^upsert
-  //
-  // We should avoid such situation
+  const updates = await manager.getUpdates('1', '1');
+  t.is(updates.length, 1);
   // @ts-expect-error private
-  await manager.squash(updateWith4Records, null);
-  // @ts-expect-error private
-  await manager.squash(updateWith3Records, null);
+  const snapshot = await manager.squash(null, updates);
 
-  const result = await db.snapshot.findUnique({
+  t.truthy(snapshot);
+  t.is(snapshot.getText('content').toString(), 'hello');
+
+  const restUpdates = await manager.getUpdates('1', '1');
+
+  t.is(restUpdates.length, 0);
+});
+
+test('should be able to merge updates into snapshot', async t => {
+  const manager = m.get(DocManager);
+
+  const updates: Buffer[] = [];
+  {
+    const doc = new YDoc();
+    doc.on('update', data => {
+      updates.push(Buffer.from(data));
+    });
+
+    const text = doc.getText('content');
+    text.insert(0, 'hello');
+    text.insert(5, 'world');
+    text.insert(5, ' ');
+    text.insert(11, '!');
+  }
+
+  {
+    await manager.batchPush('1', '1', updates.slice(0, 2));
+    // do the merge
+    const doc = (await manager.get('1', '1'))!;
+
+    t.is(doc.getText('content').toString(), 'helloworld');
+  }
+
+  {
+    await manager.batchPush('1', '1', updates.slice(2));
+    const doc = (await manager.get('1', '1'))!;
+
+    t.is(doc.getText('content').toString(), 'hello world!');
+  }
+
+  const restUpdates = await manager.getUpdates('1', '1');
+
+  t.is(restUpdates.length, 0);
+});
+
+test('should not update snapshot if doc is outdated', async t => {
+  const manager = m.get(DocManager);
+  const db = m.get(PrismaClient);
+
+  const updates: Buffer[] = [];
+  {
+    const doc = new YDoc();
+    doc.on('update', data => {
+      updates.push(Buffer.from(data));
+    });
+
+    const text = doc.getText('content');
+    text.insert(0, 'hello');
+    text.insert(5, 'world');
+    text.insert(5, ' ');
+    text.insert(11, '!');
+  }
+
+  await manager.batchPush('2', '1', updates.slice(0, 2)); // 'helloworld'
+  // merge updates into snapshot
+  await manager.get('2', '1');
+  // fake the snapshot is a lot newer
+  await db.snapshot.update({
     where: {
       id_workspaceId: {
-        id: '2',
         workspaceId: '2',
+        id: '1',
       },
     },
+    data: {
+      updatedAt: new Date(Date.now() + 10000),
+    },
   });
 
-  if (!result) {
-    t.fail('snapshot not found');
-    return;
+  {
+    const snapshot = await manager.getSnapshot('2', '1');
+    await manager.batchPush('2', '1', updates.slice(2)); // 'hello world!'
+    const updateRecords = await manager.getUpdates('2', '1');
+
+    // @ts-expect-error private
+    const doc = await manager.squash(snapshot, updateRecords);
+
+    // all updated will merged into doc not matter it's timestamp is outdated or not,
+    // but the snapshot record will not be updated
+    t.is(doc.getText('content').toString(), 'hello world!');
   }
 
-  const state = decodeStateVector(result.state!);
-  t.is(state.get(doc.clientID), 12);
+  {
+    const doc = new YDoc();
+    applyUpdate(doc, (await manager.getSnapshot('2', '1'))!.blob);
+    // the snapshot will not get touched if the new doc's timestamp is outdated
+    t.is(doc.getText('content').toString(), 'helloworld');
 
-  const d = new YDoc();
-  applyUpdate(d, result.blob!);
-
-  const dtext = d.getText('content');
-  t.is(dtext.toString(), 'hello world!');
+    // the updates are known as outdated, so they will be deleted
+    t.is((await manager.getUpdates('2', '1')).length, 0);
+  }
 });

packages/backend/storage/Cargo.toml

@@ -8,9 +8,6 @@ crate-type = ["cdylib"]
 
 [dependencies]
 chrono = "0.4"
-jwst-codec = { git = "https://github.com/toeverything/OctoBase.git", rev = "49a6b7a" }
-jwst-core = { git = "https://github.com/toeverything/OctoBase.git", rev = "49a6b7a" }
-jwst-storage = { git = "https://github.com/toeverything/OctoBase.git", rev = "49a6b7a" }
 napi = { version = "2", default-features = false, features = [
   "napi5",
   "async",
@@ -18,6 +15,7 @@ napi = { version = "2", default-features = false, features = [
 napi-derive = { version = "2", features = ["type-def"] }
 rand = "0.8"
 sha3 = "0.10"
+y-octo = { git = "https://github.com/y-crdt/y-octo.git", branch = "main" }
 
 [dev-dependencies]
 tokio = "1"

packages/backend/storage/index.d.ts

@@ -1,28 +1,6 @@
 /* auto-generated by NAPI-RS */
 /* eslint-disable */
 
-export class Storage {
-  /** Create a storage instance and establish connection to persist store. */
-  static connect(database: string, debugOnlyAutoMigrate?: boolean | undefined | null): Promise<Storage>
-  /** List all blobs in a workspace. */
-  listBlobs(workspaceId?: string | undefined | null): Promise<Array<string>>
-  /** Fetch a workspace blob. */
-  getBlob(workspaceId: string, name: string): Promise<Blob | null>
-  /** Upload a blob into workspace storage. */
-  uploadBlob(workspaceId: string, blob: Buffer): Promise<string>
-  /** Delete a blob from workspace storage. */
-  deleteBlob(workspaceId: string, hash: string): Promise<boolean>
-  /** Workspace size taken by blobs. */
-  blobsSize(workspaces: Array<string>): Promise<number>
-}
-
-export interface Blob {
-  contentType: string
-  lastModified: string
-  size: number
-  data: Buffer
-}
-
 /**
  * Merge updates in form like `Y.applyUpdate(doc, update)` way and return the
  * result binary.

packages/backend/storage/src/lib.rs

@@ -2,16 +2,10 @@
 
 pub mod hashcash;
 
-use std::{
-  collections::HashMap,
-  fmt::{Debug, Display},
-  path::PathBuf,
-};
+use std::fmt::{Debug, Display};
 
-use jwst_codec::Doc;
-use jwst_core::BlobStorage;
-use jwst_storage::{BlobStorageType, JwstStorage, JwstStorageError};
 use napi::{bindgen_prelude::*, Error, Result, Status};
+use y_octo::Doc;
 
 #[macro_use]
 extern crate napi_derive;
@@ -35,132 +29,13 @@ macro_rules! map_err {
   };
 }
 
-macro_rules! napi_wrap {
-    ($( ($name: ident, $target: ident) ),*) => {
-        $(
-            #[napi]
-            pub struct $name($target);
-
-            impl std::ops::Deref for $name {
-                type Target = $target;
-
-                fn deref(&self) -> &Self::Target {
-                    &self.0
-                }
-            }
-
-            impl From<$target> for $name {
-                fn from(t: $target) -> Self {
-                    Self(t)
-                }
-            }
-        )*
-    };
-}
-
-napi_wrap!((Storage, JwstStorage));
-
-#[napi(object)]
-pub struct Blob {
-  pub content_type: String,
-  pub last_modified: String,
-  pub size: i64,
-  pub data: Buffer,
-}
-
-#[napi]
-impl Storage {
-  /// Create a storage instance and establish connection to persist store.
-  #[napi]
-  pub async fn connect(database: String, debug_only_auto_migrate: Option<bool>) -> Result<Storage> {
-    let inner = match if cfg!(debug_assertions) && debug_only_auto_migrate.unwrap_or(false) {
-      JwstStorage::new_with_migration(&database, BlobStorageType::DB).await
-    } else {
-      JwstStorage::new(&database, BlobStorageType::DB).await
-    } {
-      Ok(storage) => storage,
-      Err(JwstStorageError::Db(e)) => {
-        return Err(Error::new(
-          Status::GenericFailure,
-          format!("failed to connect to database: {}", e),
-        ));
-      }
-      Err(e) => return Err(Error::new(Status::GenericFailure, e.to_string())),
-    };
-
-    Ok(inner.into())
-  }
-
-  /// List all blobs in a workspace.
-  #[napi]
-  pub async fn list_blobs(&self, workspace_id: Option<String>) -> Result<Vec<String>> {
-    map_err!(self.blobs().list_blobs(workspace_id).await)
-  }
-
-  /// Fetch a workspace blob.
-  #[napi]
-  pub async fn get_blob(&self, workspace_id: String, name: String) -> Result<Option<Blob>> {
-    let (id, params) = {
-      let path = PathBuf::from(name.clone());
-      let ext = path
-        .extension()
-        .and_then(|s| s.to_str().map(|s| s.to_string()));
-      let id = path
-        .file_stem()
-        .and_then(|s| s.to_str().map(|s| s.to_string()))
-        .unwrap_or(name);
-
-      (id, ext.map(|ext| HashMap::from([("format".into(), ext)])))
-    };
-
-    let Ok(meta) = self
-      .blobs()
-      .get_metadata(Some(workspace_id.clone()), id.clone(), params.clone())
-      .await
-    else {
-      return Ok(None);
-    };
-
-    let Ok(file) = self.blobs().get_blob(Some(workspace_id), id, params).await else {
-      return Ok(None);
-    };
-
-    Ok(Some(Blob {
-      content_type: meta.content_type,
-      last_modified: format!("{:?}", meta.last_modified),
-      size: meta.size,
-      data: file.into(),
-    }))
-  }
-
-  /// Upload a blob into workspace storage.
-  #[napi]
-  pub async fn upload_blob(&self, workspace_id: String, blob: Buffer) -> Result<String> {
-    // TODO: can optimize, avoid copy
-    let blob = blob.as_ref().to_vec();
-    map_err!(self.blobs().put_blob(Some(workspace_id), blob).await)
-  }
-
-  /// Delete a blob from workspace storage.
-  #[napi]
-  pub async fn delete_blob(&self, workspace_id: String, hash: String) -> Result<bool> {
-    map_err!(self.blobs().delete_blob(Some(workspace_id), hash).await)
-  }
-
-  /// Workspace size taken by blobs.
-  #[napi]
-  pub async fn blobs_size(&self, workspaces: Vec<String>) -> Result<i64> {
-    map_err!(self.blobs().get_blobs_size(workspaces).await)
-  }
-}
-
 /// Merge updates in form like `Y.applyUpdate(doc, update)` way and return the
 /// result binary.
 #[napi(catch_unwind)]
 pub fn merge_updates_in_apply_way(updates: Vec<Buffer>) -> Result<Buffer> {
   let mut doc = Doc::default();
   for update in updates {
-    map_err!(doc.apply_update_from_binary(update.as_ref().to_vec()))?;
+    map_err!(doc.apply_update_from_binary_v1(update.as_ref()))?;
   }
 
   let buf = map_err!(doc.encode_update_v1())?;

packages/common/env/package.json

@@ -3,8 +3,8 @@
   "private": true,
   "type": "module",
   "devDependencies": {
-    "@blocksuite/global": "0.12.0-nightly-202401290223-b6302df",
-    "@blocksuite/store": "0.12.0-nightly-202401290223-b6302df",
+    "@blocksuite/global": "0.12.0-canary-202402220729-0868ac6",
+    "@blocksuite/store": "0.12.0-canary-202402220729-0868ac6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vitest": "1.1.3"

packages/common/env/src/global.ts

@@ -7,6 +7,7 @@ import { isDesktop, isServer } from './constant.js';
 import { UaHelper } from './ua-helper.js';
 
 export const blockSuiteFeatureFlags = z.object({
+  enable_synced_doc_block: z.boolean(),
   enable_expand_database_block: z.boolean(),
   enable_bultin_ledits: z.boolean(),
 });
@@ -15,6 +16,7 @@ export const runtimeFlagsSchema = z.object({
   enableTestProperties: z.boolean(),
   enableBroadcastChannelProvider: z.boolean(),
   enableDebugPage: z.boolean(),
+  githubUrl: z.string(),
   changelogUrl: z.string(),
   downloadUrl: z.string(),
   // see: tools/workers

packages/common/infra/package.json

@@ -13,9 +13,9 @@
     "@affine/debug": "workspace:*",
     "@affine/env": "workspace:*",
     "@affine/templates": "workspace:*",
-    "@blocksuite/blocks": "0.12.0-nightly-202401290223-b6302df",
-    "@blocksuite/global": "0.12.0-nightly-202401290223-b6302df",
-    "@blocksuite/store": "0.12.0-nightly-202401290223-b6302df",
+    "@blocksuite/blocks": "0.12.0-canary-202402220729-0868ac6",
+    "@blocksuite/global": "0.12.0-canary-202402220729-0868ac6",
+    "@blocksuite/store": "0.12.0-canary-202402220729-0868ac6",
     "jotai": "^2.5.1",
     "jotai-effect": "^0.2.3",
     "nanoid": "^5.0.3",
@@ -26,8 +26,8 @@
   "devDependencies": {
     "@affine-test/fixtures": "workspace:*",
     "@affine/templates": "workspace:*",
-    "@blocksuite/lit": "0.12.0-nightly-202401290223-b6302df",
-    "@blocksuite/presets": "0.12.0-nightly-202401290223-b6302df",
+    "@blocksuite/lit": "0.12.0-canary-202402220729-0868ac6",
+    "@blocksuite/presets": "0.12.0-canary-202402220729-0868ac6",
     "async-call-rpc": "^6.3.1",
     "react": "^18.2.0",
     "rxjs": "^7.8.1",

packages/common/infra/src/blocksuite/initialization/index.ts

@@ -7,14 +7,14 @@ import type {
   WorkspaceInfoSnapshot,
 } from '@blocksuite/store';
 import { Job } from '@blocksuite/store';
-import type { createStore, WritableAtom } from 'jotai/vanilla';
+import type { createStore, WritableAtom } from 'jotai';
 import { Map as YMap } from 'yjs';
 
 import { getLatestVersions } from '../migration/blocksuite';
 import { replaceIdMiddleware } from './middleware';
 
-export async function initEmptyPage(page: Page, title?: string) {
-  await page.load(() => {
+export function initEmptyPage(page: Page, title?: string) {
+  page.load(() => {
     const pageBlockId = page.addBlock('affine:page', {
       title: new page.Text(title ?? ''),
     });
@@ -29,6 +29,7 @@ export async function initEmptyPage(page: Page, title?: string) {
  */
 export async function buildShowcaseWorkspace(
   workspace: Workspace,
+  blobStorage: { set: (key: string, blob: Blob) => Promise<string> },
   {
     store,
     atoms,
@@ -46,6 +47,7 @@ export async function buildShowcaseWorkspace(
   const { onboarding } = await import('@affine/templates');
 
   const info = onboarding['info.json'] as WorkspaceInfoSnapshot;
+  const blob = onboarding['blob.json'] as { [key: string]: string };
 
   const migrationMiddleware: JobMiddleware = ({ slots, workspace }) => {
     slots.afterImport.on(payload => {
@@ -88,27 +90,29 @@ export async function buildShowcaseWorkspace(
     .getMap('meta')
     .set('blockVersions', new YMap(Object.entries(newVersions)));
 
+  for (const [key, base64] of Object.entries(blob)) {
+    await blobStorage.set(key, new Blob([base64ToUint8Array(base64)]));
+  }
+
   // todo: find better way to do the following
   // perhaps put them into middleware?
   {
-    // the "AFFiNE - not just a note-taking app" page should be set to edgeless mode
+    // the "Write, Draw, Plan all at Once." page should be set to edgeless mode
     const edgelessPage1 = (workspace.meta.pages as PageMeta[])?.find(
-      p => p.title === 'AFFiNE - not just a note-taking app'
+      p => p.title === 'Write, Draw, Plan all at Once.'
     )?.id;
 
     if (edgelessPage1) {
+      workspace.setPageMeta(edgelessPage1, { jumpOnce: true });
       store.set(atoms.pageMode, edgelessPage1, 'edgeless');
     }
-
-    // should jump to "Getting Started" by default
-    const gettingStartedPage = (workspace.meta.pages as PageMeta[])?.find(p =>
-      p.title.startsWith('Getting Started')
-    )?.id;
-
-    if (gettingStartedPage) {
-      workspace.setPageMeta(gettingStartedPage, {
-        jumpOnce: true,
-      });
-    }
   }
 }
+
+function base64ToUint8Array(base64: string) {
+  const binaryString = atob(base64);
+  const binaryArray = binaryString.split('').map(function (char) {
+    return char.charCodeAt(0);
+  });
+  return new Uint8Array(binaryArray);
+}

packages/common/infra/src/blocksuite/migration/fixing.ts

@@ -13,6 +13,9 @@ export function fixWorkspaceVersion(rootDoc: YDoc) {
    * Blocksuite just set the value, do nothing else.
    */
   function doFix() {
+    if (meta.size === 0) {
+      return;
+    }
     const workspaceVersion = meta.get('workspaceVersion');
     if (typeof workspaceVersion !== 'number' || workspaceVersion < 2) {
       transact(

packages/common/workspace/src/engine/sync/peer.ts

@@ -19,6 +19,7 @@ export interface SyncPeerStatus {
   loadedDocs: number;
   pendingPullUpdates: number;
   pendingPushUpdates: number;
+  rootDocLoaded: boolean;
 }
 
 /**
@@ -54,6 +55,7 @@ export class SyncPeer {
     loadedDocs: 0,
     pendingPullUpdates: 0,
     pendingPushUpdates: 0,
+    rootDocLoaded: false,
   };
   onStatusChange = new Slot<SyncPeerStatus>();
   readonly abort = new AbortController();
@@ -119,6 +121,7 @@ export class SyncPeer {
           loadedDocs: 0,
           pendingPullUpdates: 0,
           pendingPushUpdates: 0,
+          rootDocLoaded: this.status.rootDocLoaded,
         };
         await Promise.race([
           new Promise<void>(resolve => {
@@ -291,6 +294,13 @@ export class SyncPeer {
       (await this.storage.pull(doc.guid, encodeStateVector(doc))) ?? {};
     throwIfAborted(abort);
 
+    if (docData !== undefined && doc.guid === this.rootDoc.guid) {
+      this.status = {
+        ...this.status,
+        rootDocLoaded: true,
+      };
+    }
+
     if (docData) {
       applyUpdate(doc, docData, 'load');
     }
@@ -391,6 +401,7 @@ export class SyncPeer {
         this.state.pullUpdatesQueue.length + (this.state.subdocLoading ? 1 : 0),
       pendingPushUpdates:
         this.state.pushUpdatesQueue.length + (this.state.pushingUpdate ? 1 : 0),
+      rootDocLoaded: this.status.rootDocLoaded,
     };
   }
 

packages/common/workspace/src/manager.ts

@@ -1,4 +1,5 @@
 import { DebugLogger } from '@affine/debug';
+import { setupEditorFlags } from '@affine/env/global';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { assertEquals } from '@blocksuite/global/utils';
 import type { Workspace as BlockSuiteWorkspace } from '@blocksuite/store';
@@ -164,6 +165,8 @@ export class WorkspaceManager {
     // apply compatibility fix
     fixWorkspaceVersion(workspace.blockSuiteWorkspace.doc);
 
+    setupEditorFlags(workspace.blockSuiteWorkspace);
+
     return workspace;
   }
 }

packages/common/y-indexeddb/package.json

@@ -32,14 +32,14 @@
     }
   },
   "dependencies": {
-    "@blocksuite/global": "0.12.0-nightly-202401290223-b6302df",
+    "@blocksuite/global": "0.12.0-canary-202402220729-0868ac6",
     "idb": "^8.0.0",
     "nanoid": "^5.0.3",
     "y-provider": "workspace:*"
   },
   "devDependencies": {
-    "@blocksuite/blocks": "0.12.0-nightly-202401290223-b6302df",
-    "@blocksuite/store": "0.12.0-nightly-202401290223-b6302df",
+    "@blocksuite/blocks": "0.12.0-canary-202402220729-0868ac6",
+    "@blocksuite/store": "0.12.0-canary-202402220729-0868ac6",
     "fake-indexeddb": "^5.0.0",
     "vite": "^5.0.6",
     "vite-plugin-dts": "3.7.0",

packages/common/y-indexeddb/src/__tests__/index.spec.ts

@@ -100,7 +100,7 @@ describe('indexeddb provider', () => {
         ],
       });
       const page = workspace.createPage({ id: 'page0' });
-      await page.waitForLoaded();
+      page.waitForLoaded();
       const pageBlockId = page.addBlock('affine:page', { title: '' });
       const frameId = page.addBlock('affine:note', {}, pageBlockId);
       page.addBlock('affine:paragraph', {}, frameId);
@@ -129,7 +129,7 @@ describe('indexeddb provider', () => {
           | WorkspacePersist
           | undefined;
         assertExists(data);
-        await testWorkspace.getPage('page0')?.waitForLoaded();
+        testWorkspace.getPage('page0')?.waitForLoaded();
         data.updates.forEach(({ update }) => {
           Workspace.Y.applyUpdate(subPage, update);
         });
@@ -148,7 +148,7 @@ describe('indexeddb provider', () => {
     expect(provider.connected).toBe(false);
     {
       const page = workspace.createPage({ id: 'page0' });
-      await page.waitForLoaded();
+      page.waitForLoaded();
       const pageBlockId = page.addBlock('affine:page', { title: '' });
       const frameId = page.addBlock('affine:note', {}, pageBlockId);
       page.addBlock('affine:paragraph', {}, frameId);
@@ -203,7 +203,7 @@ describe('indexeddb provider', () => {
     provider.connect();
     {
       const page = workspace.createPage({ id: 'page0' });
-      await page.waitForLoaded();
+      page.waitForLoaded();
       const pageBlockId = page.addBlock('affine:page', { title: '' });
       const frameId = page.addBlock('affine:note', {}, pageBlockId);
       for (let i = 0; i < 99; i++) {
@@ -369,14 +369,14 @@ describe('subDoc', () => {
     const page0 = workspace.createPage({
       id: 'page0',
     });
-    await page0.waitForLoaded();
+    page0.waitForLoaded();
     const { paragraphBlockId: paragraphBlockIdPage1 } = initEmptyPage(page0);
     const provider = createIndexedDBProvider(workspace.doc, rootDBName);
     provider.connect();
     const page1 = workspace.createPage({
       id: 'page1',
     });
-    await page1.waitForLoaded();
+    page1.waitForLoaded();
     const { paragraphBlockId: paragraphBlockIdPage2 } = initEmptyPage(page1);
     await setTimeout(200);
     provider.disconnect();
@@ -390,14 +390,14 @@ describe('subDoc', () => {
       provider.connect();
       await setTimeout(200);
       const page0 = newWorkspace.getPage('page0') as Page;
-      await page0.waitForLoaded();
+      page0.waitForLoaded();
       await setTimeout(200);
       {
         const block = page0.getBlockById(paragraphBlockIdPage1);
         assertExists(block);
       }
       const page1 = newWorkspace.getPage('page1') as Page;
-      await page1.waitForLoaded();
+      page1.waitForLoaded();
       await setTimeout(200);
       {
         const block = page1.getBlockById(paragraphBlockIdPage2);
@@ -410,7 +410,7 @@ describe('subDoc', () => {
 describe('utils', () => {
   test('download binary', async () => {
     const page = workspace.createPage({ id: 'page0' });
-    await page.waitForLoaded();
+    page.waitForLoaded();
     initEmptyPage(page);
     const provider = createIndexedDBProvider(workspace.doc, rootDBName);
     provider.connect();

packages/common/y-provider/package.json

@@ -24,7 +24,7 @@
     "build": "vite build"
   },
   "devDependencies": {
-    "@blocksuite/store": "0.12.0-nightly-202401290223-b6302df",
+    "@blocksuite/store": "0.12.0-canary-202402220729-0868ac6",
     "vite": "^5.0.6",
     "vite-plugin-dts": "3.7.0",
     "vitest": "1.1.3",

packages/frontend/component/package.json

@@ -73,12 +73,12 @@
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@blocksuite/blocks": "0.12.0-nightly-202401290223-b6302df",
-    "@blocksuite/global": "0.12.0-nightly-202401290223-b6302df",
+    "@blocksuite/blocks": "0.12.0-canary-202402220729-0868ac6",
+    "@blocksuite/global": "0.12.0-canary-202402220729-0868ac6",
     "@blocksuite/icons": "2.1.44",
-    "@blocksuite/lit": "0.12.0-nightly-202401290223-b6302df",
-    "@blocksuite/presets": "0.12.0-nightly-202401290223-b6302df",
-    "@blocksuite/store": "0.12.0-nightly-202401290223-b6302df",
+    "@blocksuite/lit": "0.12.0-canary-202402220729-0868ac6",
+    "@blocksuite/presets": "0.12.0-canary-202402220729-0868ac6",
+    "@blocksuite/store": "0.12.0-canary-202402220729-0868ac6",
     "@storybook/addon-actions": "^7.5.3",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-interactions": "^7.5.3",

packages/frontend/component/src/components/tour-modal/index.css.ts

@@ -1,195 +0,0 @@
-import { keyframes, style } from '@vanilla-extract/css';
-
-export const modalStyle = style({
-  width: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  backgroundColor: 'var(--affine-background-secondary-color)',
-  borderRadius: '16px',
-  overflow: 'hidden',
-});
-export const titleContainerStyle = style({
-  width: 'calc(100% - 72px)',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  position: 'relative',
-  height: '60px',
-  overflow: 'hidden',
-});
-export const titleStyle = style({
-  fontSize: 'var(--affine-font-h6)',
-  fontWeight: '600',
-  marginTop: '12px',
-  position: 'absolute',
-  marginBottom: '12px',
-});
-const slideToLeft = keyframes({
-  '0%': {
-    transform: 'translateX(0)',
-    opacity: 1,
-  },
-  '100%': {
-    transform: 'translateX(-300px)',
-    opacity: 0,
-  },
-});
-const slideToRight = keyframes({
-  '0%': {
-    transform: 'translateX(0)',
-    opacity: 1,
-  },
-  '100%': {
-    transform: 'translateX(300px)',
-    opacity: 0,
-  },
-});
-const slideFormLeft = keyframes({
-  '0%': {
-    transform: 'translateX(300px)',
-    opacity: 0,
-  },
-  '100%': {
-    transform: 'translateX(0)',
-    opacity: 1,
-  },
-});
-const slideFormRight = keyframes({
-  '0%': {
-    transform: 'translateX(-300px)',
-    opacity: 0,
-  },
-  '100%': {
-    transform: 'translateX(0)',
-    opacity: 1,
-  },
-});
-export const formSlideToLeftStyle = style({
-  animation: `${slideFormLeft} 0.3s ease-in-out forwards`,
-});
-export const formSlideToRightStyle = style({
-  animation: `${slideFormRight} 0.3s ease-in-out forwards`,
-});
-export const slideToLeftStyle = style({
-  animation: `${slideToLeft} 0.3s ease-in-out forwards`,
-});
-export const slideToRightStyle = style({
-  animation: `${slideToRight} 0.3s ease-in-out forwards`,
-});
-
-export const containerStyle = style({
-  width: '100%',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-});
-export const videoContainerStyle = style({
-  height: '300px',
-  width: 'calc(100% - 72px)',
-  display: 'flex',
-  alignItems: 'center',
-  flexGrow: 1,
-  justifyContent: 'space-between',
-  position: 'relative',
-  overflow: 'hidden',
-});
-export const videoSlideStyle = style({
-  width: '100%',
-  position: 'absolute',
-  top: 0,
-  display: 'flex',
-  justifyContent: 'center',
-});
-export const videoStyle = style({
-  position: 'absolute',
-  objectFit: 'fill',
-  height: '300px',
-  border: '1px solid var(--affine-border-color)',
-  transition: 'opacity 0.5s ease-in-out',
-});
-const fadeIn = keyframes({
-  '0%': {
-    transform: 'translateX(300px)',
-  },
-  '100%': {
-    transform: 'translateX(0)',
-  },
-});
-export const videoActiveStyle = style({
-  animation: `${fadeIn} 0.5s ease-in-out forwards`,
-  opacity: 0,
-});
-
-export const arrowStyle = style({
-  wordBreak: 'break-all',
-  wordWrap: 'break-word',
-  width: '36px',
-  fontSize: '32px',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  height: '240px',
-  flexGrow: 0.2,
-  cursor: 'pointer',
-});
-export const descriptionContainerStyle = style({
-  width: 'calc(100% - 112px)',
-  height: '100px',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  position: 'relative',
-  overflow: 'hidden',
-});
-
-export const descriptionStyle = style({
-  marginTop: '15px',
-  width: '100%',
-  display: 'flex',
-  fontSize: 'var(--affine-font-sm)',
-  lineHeight: '18px',
-  position: 'absolute',
-});
-export const tabStyle = style({
-  width: '40px',
-  height: '40px',
-  content: '""',
-  margin: '40px 10px 40px 0',
-  transition: 'all 0.15s ease-in-out',
-  position: 'relative',
-  cursor: 'pointer',
-  ':hover': {
-    opacity: 1,
-  },
-  '::after': {
-    content: '""',
-    position: 'absolute',
-    bottom: '20px',
-    left: '0',
-    width: '100%',
-    height: '2px',
-    background: 'var(--affine-text-primary-color)',
-    transition: 'all 0.15s ease-in-out',
-    opacity: 0.2,
-    cursor: 'pointer',
-  },
-});
-export const tabActiveStyle = style({
-  '::after': {
-    opacity: 1,
-  },
-});
-export const tabContainerStyle = style({
-  width: '100%',
-  marginTop: '20px',
-  position: 'relative',
-  height: '2px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
-export const buttonDisableStyle = style({
-  cursor: 'not-allowed',
-  color: 'var(--affine-text-disable-color)',
-});

packages/frontend/component/src/components/tour-modal/index.tsx

@@ -1 +0,0 @@
-export * from './tour-modal';

packages/frontend/component/src/components/tour-modal/tour-modal.tsx

@@ -1,160 +0,0 @@
-/// <reference types="../../type.d.ts" />
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { ArrowLeftSmallIcon, ArrowRightSmallIcon } from '@blocksuite/icons';
-import clsx from 'clsx';
-import { useState } from 'react';
-
-import { Modal, type ModalProps } from '../../ui/modal';
-import editingVideo from './editingVideo.mp4';
-import {
-  arrowStyle,
-  buttonDisableStyle,
-  containerStyle,
-  descriptionContainerStyle,
-  descriptionStyle,
-  formSlideToLeftStyle,
-  formSlideToRightStyle,
-  modalStyle,
-  slideToLeftStyle,
-  slideToRightStyle,
-  tabActiveStyle,
-  tabContainerStyle,
-  tabStyle,
-  titleContainerStyle,
-  titleStyle,
-  videoContainerStyle,
-  videoSlideStyle,
-  videoStyle,
-} from './index.css';
-import switchVideo from './switchVideo.mp4';
-
-export const TourModal = (props: ModalProps) => {
-  const t = useAFFiNEI18N();
-  const [step, setStep] = useState(-1);
-  return (
-    <Modal
-      width={545}
-      contentOptions={{
-        ['data-testid' as string]: 'onboarding-modal',
-        style: {
-          minHeight: '480px',
-          padding: 0,
-        },
-      }}
-      overlayOptions={{
-        style: {
-          background: 'transparent',
-        },
-      }}
-      closeButtonOptions={{
-        // @ts-expect-error - fix upstream type
-        'data-testid': 'onboarding-modal-close-button',
-      }}
-      {...props}
-    >
-      <div className={modalStyle}>
-        <div className={titleContainerStyle}>
-          {step !== -1 && (
-            <div
-              className={clsx(titleStyle, {
-                [slideToRightStyle]: step === 0,
-                [formSlideToLeftStyle]: step === 1,
-              })}
-            >
-              {t['com.affine.onboarding.title2']()}
-            </div>
-          )}
-          <div
-            className={clsx(titleStyle, {
-              [slideToLeftStyle]: step === 1,
-              [formSlideToRightStyle]: step === 0,
-            })}
-          >
-            {t['com.affine.onboarding.title1']()}
-          </div>
-        </div>
-
-        <div className={containerStyle}>
-          <div
-            className={clsx(arrowStyle, { [buttonDisableStyle]: step !== 1 })}
-            onClick={() => step === 1 && setStep(0)}
-            data-testid="onboarding-modal-pre-button"
-          >
-            <ArrowLeftSmallIcon />
-          </div>
-          <div className={videoContainerStyle}>
-            <div className={videoSlideStyle}>
-              {step !== -1 && (
-                <video
-                  autoPlay
-                  muted
-                  loop
-                  className={clsx(videoStyle, {
-                    [slideToRightStyle]: step === 0,
-                    [formSlideToLeftStyle]: step === 1,
-                  })}
-                  data-testid="onboarding-modal-editing-video"
-                >
-                  <source src={editingVideo} type="video/mp4" />
-                </video>
-              )}
-              <video
-                autoPlay
-                muted
-                loop
-                className={clsx(videoStyle, {
-                  [slideToLeftStyle]: step === 1,
-                  [formSlideToRightStyle]: step === 0,
-                })}
-                data-testid="onboarding-modal-switch-video"
-              >
-                <source src={switchVideo} type="video/mp4" />
-              </video>
-            </div>
-          </div>
-          <div
-            className={clsx(arrowStyle, { [buttonDisableStyle]: step === 1 })}
-            onClick={() => setStep(1)}
-            data-testid="onboarding-modal-next-button"
-          >
-            <ArrowRightSmallIcon />
-          </div>
-        </div>
-        <ul className={tabContainerStyle}>
-          <li
-            className={clsx(tabStyle, {
-              [tabActiveStyle]: step !== 1,
-            })}
-            onClick={() => setStep(0)}
-          ></li>
-          <li
-            className={clsx(tabStyle, { [tabActiveStyle]: step === 1 })}
-            onClick={() => setStep(1)}
-          ></li>
-        </ul>
-        <div className={descriptionContainerStyle}>
-          {step !== -1 && (
-            <div
-              className={clsx(descriptionStyle, {
-                [slideToRightStyle]: step === 0,
-                [formSlideToLeftStyle]: step === 1,
-              })}
-            >
-              {t['com.affine.onboarding.videoDescription2']()}
-            </div>
-          )}
-          <div
-            className={clsx(descriptionStyle, {
-              [slideToLeftStyle]: step === 1,
-              [formSlideToRightStyle]: step === 0,
-            })}
-          >
-            {t['com.affine.onboarding.videoDescription1']()}
-          </div>
-        </div>
-      </div>
-    </Modal>
-  );
-};
-
-export default TourModal;

packages/frontend/component/src/ui/modal/index.ts

@@ -1,2 +1,3 @@
 export * from './confirm-modal';
 export * from './modal';
+export * from './overlay-modal';

packages/frontend/component/src/ui/modal/modal.stories.tsx

@@ -5,6 +5,7 @@ import { Button } from '../button';
 import { Input, type InputProps } from '../input';
 import { ConfirmModal, type ConfirmModalProps } from './confirm-modal';
 import { Modal, type ModalProps } from './modal';
+import { OverlayModal, type OverlayModalProps } from './overlay-modal';
 
 export default {
   title: 'UI/Modal',
@@ -65,5 +66,38 @@ const ConfirmModalTemplate: StoryFn<ConfirmModalProps> = () => {
   );
 };
 
+const OverlayModalTemplate: StoryFn<OverlayModalProps> = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Overlay Modal</Button>
+      <OverlayModal
+        open={open}
+        onOpenChange={setOpen}
+        title="Modal Title"
+        description="Modal description"
+        confirmButtonOptions={{
+          type: 'primary',
+        }}
+        topImage={
+          <div
+            style={{
+              width: '400px',
+              height: '300px',
+              background: '#66ccff',
+              opacity: 0.1,
+              color: '#fff',
+            }}
+          ></div>
+        }
+      />
+    </>
+  );
+};
+
 export const Confirm: StoryFn<ModalProps> =
   ConfirmModalTemplate.bind(undefined);
+
+export const Overlay: StoryFn<ModalProps> =
+  OverlayModalTemplate.bind(undefined);

packages/frontend/component/src/ui/modal/overlay-modal.css.ts

@@ -0,0 +1,37 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const title = style({
+  padding: '20px 24px 8px 24px',
+  fontSize: cssVar('fontH6'),
+  fontFamily: cssVar('fontFamily'),
+  fontWeight: '600',
+  lineHeight: '26px',
+});
+
+export const content = style({
+  padding: '0px 24px 8px',
+  fontSize: cssVar('fontBase'),
+  lineHeight: '24px',
+  fontWeight: 400,
+});
+
+export const footer = style({
+  padding: '20px 24px',
+  display: 'flex',
+  justifyContent: 'flex-end',
+  gap: '20px',
+});
+
+export const gotItBtn = style({
+  fontWeight: 500,
+});
+
+export const buttonText = style({
+  color: cssVar('pureWhite'),
+  textDecoration: 'none',
+  cursor: 'pointer',
+  ':visited': {
+    color: cssVar('pureWhite'),
+  },
+});

packages/frontend/component/src/ui/modal/overlay-modal.tsx

@@ -0,0 +1,102 @@
+import { DialogTrigger } from '@radix-ui/react-dialog';
+import { cssVar } from '@toeverything/theme';
+import { memo, useCallback } from 'react';
+import { Link } from 'react-router-dom';
+
+import { Button, type ButtonProps } from '../button';
+import { Modal, type ModalProps } from './modal';
+import * as styles from './overlay-modal.css';
+
+const defaultContentOptions: ModalProps['contentOptions'] = {
+  style: {
+    padding: 0,
+    overflow: 'hidden',
+    boxShadow: cssVar('menuShadow'),
+  },
+};
+const defaultOverlayOptions: ModalProps['overlayOptions'] = {
+  style: {
+    background: cssVar('white80'),
+    backdropFilter: 'blur(2px)',
+  },
+};
+
+export interface OverlayModalProps extends ModalProps {
+  to?: string;
+  external?: boolean;
+  topImage?: React.ReactNode;
+  confirmText?: string;
+  confirmButtonOptions?: ButtonProps;
+  onConfirm?: () => void;
+  cancelText?: string;
+  cancelButtonOptions?: ButtonProps;
+  withoutCancelButton?: boolean;
+}
+
+export const OverlayModal = memo(function OverlayModal({
+  open,
+  topImage,
+  onOpenChange,
+  title,
+  description,
+  onConfirm,
+  to,
+  external,
+  confirmButtonOptions,
+  cancelButtonOptions,
+  withoutCancelButton,
+  contentOptions = defaultContentOptions,
+  overlayOptions = defaultOverlayOptions,
+  // FIXME: we need i18n
+  cancelText = 'Cancel',
+  confirmText = 'Confirm',
+  width = 400,
+}: OverlayModalProps) {
+  const handleConfirm = useCallback(() => {
+    onOpenChange?.(false);
+    onConfirm?.();
+  }, [onOpenChange, onConfirm]);
+
+  return (
+    <Modal
+      contentOptions={contentOptions}
+      overlayOptions={overlayOptions}
+      open={open}
+      width={width}
+      onOpenChange={onOpenChange}
+      withoutCloseButton
+    >
+      {topImage}
+      <div className={styles.title}>{title}</div>
+      <div className={styles.content}>{description}</div>
+      <div className={styles.footer}>
+        {!withoutCancelButton ? (
+          <DialogTrigger asChild>
+            <Button {...cancelButtonOptions}>{cancelText}</Button>
+          </DialogTrigger>
+        ) : null}
+
+        {to ? (
+          external ? (
+            //FIXME: we need a more standardized way to implement this link with other click events
+            <a href={to} target="_blank" rel="noreferrer">
+              <Button onClick={handleConfirm} {...confirmButtonOptions}>
+                {confirmText}
+              </Button>
+            </a>
+          ) : (
+            <Link to={to}>
+              <Button onClick={handleConfirm} {...confirmButtonOptions}>
+                {confirmText}
+              </Button>
+            </Link>
+          )
+        ) : (
+          <Button onClick={handleConfirm} {...confirmButtonOptions}>
+            {confirmText}
+          </Button>
+        )}
+      </div>
+    </Modal>
+  );
+});

packages/frontend/core/.webpack/runtime-config.ts

@@ -6,6 +6,7 @@ const require = createRequire(import.meta.url);
 const packageJson = require('../package.json');
 
 const editorFlags: BlockSuiteFeatureFlags = {
+  enable_synced_doc_block: false,
   enable_expand_database_block: false,
   enable_bultin_ledits: false,
 };
@@ -16,6 +17,7 @@ export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
       enableTestProperties: false,
       enableBroadcastChannelProvider: true,
       enableDebugPage: true,
+      githubUrl: 'https://github.com/toeverything/AFFiNE',
       changelogUrl: 'https://affine.pro/what-is-new',
       downloadUrl: 'https://affine.pro/download',
       imageProxyUrl: '/api/worker/image-proxy',
@@ -57,6 +59,7 @@ export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
       enableTestProperties: true,
       enableBroadcastChannelProvider: true,
       enableDebugPage: true,
+      githubUrl: 'https://github.com/toeverything/AFFiNE',
       changelogUrl: 'https://github.com/toeverything/AFFiNE/releases',
       downloadUrl: 'https://affine.pro/download',
       imageProxyUrl: '/api/worker/image-proxy',

packages/frontend/core/package.json

@@ -26,14 +26,14 @@
     "@affine/templates": "workspace:*",
     "@affine/workspace": "workspace:*",
     "@affine/workspace-impl": "workspace:*",
-    "@blocksuite/block-std": "0.12.0-nightly-202401290223-b6302df",
-    "@blocksuite/blocks": "0.12.0-nightly-202401290223-b6302df",
-    "@blocksuite/global": "0.12.0-nightly-202401290223-b6302df",
+    "@blocksuite/block-std": "0.12.0-canary-202402220729-0868ac6",
+    "@blocksuite/blocks": "0.12.0-canary-202402220729-0868ac6",
+    "@blocksuite/global": "0.12.0-canary-202402220729-0868ac6",
     "@blocksuite/icons": "2.1.44",
-    "@blocksuite/inline": "0.12.0-nightly-202401290223-b6302df",
-    "@blocksuite/lit": "0.12.0-nightly-202401290223-b6302df",
-    "@blocksuite/presets": "0.12.0-nightly-202401290223-b6302df",
-    "@blocksuite/store": "0.12.0-nightly-202401290223-b6302df",
+    "@blocksuite/inline": "0.12.0-canary-202402220729-0868ac6",
+    "@blocksuite/lit": "0.12.0-canary-202402220729-0868ac6",
+    "@blocksuite/presets": "0.12.0-canary-202402220729-0868ac6",
+    "@blocksuite/store": "0.12.0-canary-202402220729-0868ac6",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^8.0.0",
     "@emotion/cache": "^11.11.0",

packages/frontend/core/src/atoms/guide.ts

@@ -55,21 +55,6 @@ export const guideChangeLogAtom = atom<
     }));
   }
 );
-export const guideOnboardingAtom = atom<
-  Guide['onBoarding'],
-  [open: boolean],
-  void
->(
-  get => {
-    return get(guidePrimitiveAtom).onBoarding;
-  },
-  (_, set, open) => {
-    set(guidePrimitiveAtom, tips => ({
-      ...tips,
-      onBoarding: open,
-    }));
-  }
-);
 
 export const guideDownloadClientTipAtom = atom<
   Guide['downloadClientTip'],

packages/frontend/core/src/atoms/index.ts

@@ -10,10 +10,11 @@ import type { SettingProps } from '../components/affine/setting-modal';
 export const openWorkspacesModalAtom = atom(false);
 export const openCreateWorkspaceModalAtom = atom<CreateWorkspaceMode>(false);
 export const openQuickSearchModalAtom = atom(false);
-export const openOnboardingModalAtom = atom(false);
 export const openSignOutModalAtom = atom(false);
 export const openPaymentDisableAtom = atom(false);
 export const openQuotaModalAtom = atom(false);
+export const openStarAFFiNEModalAtom = atom(false);
+export const openIssueFeedbackModalAtom = atom(false);
 
 export type SettingAtom = Pick<
   SettingProps,

packages/frontend/core/src/atoms/sync-engine-status.ts

@@ -0,0 +1,4 @@
+import type { SyncEngineStatus } from '@affine/workspace';
+import { atom } from 'jotai';
+
+export const syncEngineStatusAtom = atom<SyncEngineStatus | null>(null);

packages/frontend/core/src/bootstrap/edgeless-template.ts

@@ -0,0 +1,7 @@
+import { builtInTemplates } from '@affine/templates/edgeless';
+import {
+  EdgelessTemplatePanel,
+  type TemplateManager,
+} from '@blocksuite/blocks';
+
+EdgelessTemplatePanel.templates.extend(builtInTemplates as TemplateManager);

packages/frontend/core/src/bootstrap/first-app-data.ts

@@ -19,10 +19,10 @@ export async function createFirstAppData() {
   localStorage.setItem('is-first-open', 'false');
   const workspaceId = await workspaceManager.createWorkspace(
     WorkspaceFlavour.LOCAL,
-    async workspace => {
+    async (workspace, blob) => {
       workspace.meta.setName(DEFAULT_WORKSPACE_NAME);
       if (runtimeConfig.enablePreloading) {
-        await buildShowcaseWorkspace(workspace, {
+        await buildShowcaseWorkspace(workspace, blob, {
           store: getCurrentStore(),
           atoms: {
             pageMode: setPageModeAtom,
@@ -33,7 +33,7 @@ export async function createFirstAppData() {
         workspace.setPageMeta(page.id, {
           jumpOnce: true,
         });
-        await initEmptyPage(page);
+        initEmptyPage(page);
       }
       logger.debug('create first workspace');
     }

packages/frontend/core/src/bootstrap/setup.ts

@@ -1,4 +1,5 @@
 import './register-blocksuite-components';
+import './edgeless-template';
 
 import { setupGlobal } from '@affine/env/global';
 import * as Sentry from '@sentry/react';

packages/frontend/core/src/commands/affine-help.tsx

@@ -1,9 +1,9 @@
 import type { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { ContactWithUsIcon, NewIcon, UserGuideIcon } from '@blocksuite/icons';
+import { ContactWithUsIcon, NewIcon } from '@blocksuite/icons';
 import { registerAffineCommand } from '@toeverything/infra/command';
 import type { createStore } from 'jotai';
 
-import { openOnboardingModalAtom, openSettingModalAtom } from '../atoms';
+import { openSettingModalAtom } from '../atoms';
 
 export function registerAffineHelpCommands({
   t,
@@ -39,18 +39,6 @@ export function registerAffineHelpCommands({
       },
     })
   );
-  unsubs.push(
-    registerAffineCommand({
-      id: 'affine:help-getting-started',
-      category: 'affine:help',
-      icon: <UserGuideIcon />,
-      label: t['com.affine.cmdk.affine.getting-started'](),
-      preconditionStrategy: () => environment.isDesktop,
-      run() {
-        store.set(openOnboardingModalAtom, true);
-      },
-    })
-  );
 
   return () => {
     unsubs.forEach(unsub => unsub());

packages/frontend/core/src/commands/affine-navigation.tsx

@@ -83,11 +83,12 @@ export function registerAffineNavigationCommands({
       category: 'affine:navigation',
       icon: <ArrowRightBigIcon />,
       label: t['com.affine.cmdk.affine.navigation.open-settings'](),
+      keyBinding: '$mod+,',
       run() {
-        store.set(openSettingModalAtom, {
+        store.set(openSettingModalAtom, s => ({
           activeTab: 'appearance',
-          open: true,
-        });
+          open: !s.open,
+        }));
       },
     })
   );

packages/frontend/core/src/components/affine/auth/sign-in.tsx

@@ -20,6 +20,7 @@ import type { AuthPanelProps } from './index';
 import * as style from './style.css';
 import { INTERNAL_BETA_URL, useAuth } from './use-auth';
 import { Captcha, useCaptcha } from './use-captcha';
+import { useSubscriptionSearch } from './use-subscription';
 
 function validateEmail(email: string) {
   return emailRegex.test(email);
@@ -34,6 +35,7 @@ export const SignIn: FC<AuthPanelProps> = ({
   const t = useAFFiNEI18N();
   const loginStatus = useCurrentLoginStatus();
   const [verifyToken, challenge] = useCaptcha();
+  const subscriptionData = useSubscriptionSearch();
 
   const {
     isMutating: isSigningIn,
@@ -81,7 +83,8 @@ export const SignIn: FC<AuthPanelProps> = ({
     if (verifyToken) {
       if (user) {
         // provider password sign-in if user has by default
-        if (user.hasPassword) {
+        //  If with payment, onl support email sign in to avoid redirect to affine app
+        if (user.hasPassword && !subscriptionData) {
           setAuthState('signInWithPassword');
         } else {
           const res = await signIn(email, verifyToken, challenge);
@@ -101,6 +104,7 @@ export const SignIn: FC<AuthPanelProps> = ({
       }
     }
   }, [
+    subscriptionData,
     challenge,
     email,
     setAuthEmail,

packages/frontend/core/src/components/affine/auth/subscription-redirect.tsx

@@ -3,10 +3,10 @@ import { Button } from '@affine/component/ui/button';
 import { Loading } from '@affine/component/ui/loading';
 import { AffineShapeIcon } from '@affine/core/components/page-list';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import type { SubscriptionRecurring } from '@affine/graphql';
+import type { SubscriptionPlan, SubscriptionRecurring } from '@affine/graphql';
 import {
   changePasswordMutation,
-  checkoutMutation,
+  createCheckoutSessionMutation,
   subscriptionQuery,
 } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
@@ -30,18 +30,25 @@ const usePaymentRedirect = () => {
   }
 
   const recurring = searchData.recurring as SubscriptionRecurring;
+  const plan = searchData.plan as SubscriptionPlan;
+  const coupon = searchData.coupon;
   const idempotencyKey = useMemo(() => nanoid(), []);
   const { trigger: checkoutSubscription } = useMutation({
-    mutation: checkoutMutation,
+    mutation: createCheckoutSessionMutation,
   });
 
   return useAsyncCallback(async () => {
-    const { checkout } = await checkoutSubscription({
-      recurring,
-      idempotencyKey,
+    const { createCheckoutSession: checkoutUrl } = await checkoutSubscription({
+      input: {
+        recurring,
+        plan,
+        coupon,
+        idempotencyKey,
+        successCallbackLink: null,
+      },
     });
-    window.open(checkout, '_self', 'norefferer');
-  }, [recurring, idempotencyKey, checkoutSubscription]);
+    window.open(checkoutUrl, '_self', 'norefferer');
+  }, [recurring, plan, coupon, idempotencyKey, checkoutSubscription]);
 };
 
 const CenterLoading = () => {