From 9a944048e8154b72e19831cf484e96ac5ca607ae Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Thu, 18 Jan 2024 07:53:15 +0000
Subject: [PATCH] feat(core): experimental features ui (#5338)

fix TOV-280

experimental features ui
- enabled in the workspace settings for a cloud workspace; only show for workspace owner + early access
- a disclaimer prompt will be shown before going to the next feature setting page
- for now only show the ai poc switch, which controls the display of the ai tab in editor's sidepanel
---
 packages/common/env/src/global.ts             |   1 -
 .../component/src/ui/switch/switch.tsx        |   3 +-
 .../frontend/core/.webpack/runtime-config.ts  |   8 -
 .../setting-modal/general-setting/index.tsx   |  12 +-
 .../components/affine/setting-modal/index.tsx |  54 +-
 .../setting-modal/setting-sidebar/index.tsx   | 217 +++--
 .../setting-sidebar/style.css.ts              |  27 +-
 .../affine/setting-modal/style.css.ts         |   1 +
 .../components/affine/setting-modal/types.ts  |  21 +
 .../experimental-features/arts.css.ts         |   7 +
 .../experimental-features/arts.tsx            |  18 +
 .../experimental-features/dark-art-svg.ts     | 857 ++++++++++++++++++
 .../experimental-features/index.css.ts        |  64 ++
 .../experimental-features/index.tsx           | 149 +++
 .../experimental-features/light-art-svg.ts    | 843 +++++++++++++++++
 .../setting-modal/workspace-setting/index.tsx |  21 +-
 .../workspace-list/index.tsx                  |   2 +-
 .../core/src/hooks/use-workspace-features.ts  |  74 ++
 .../detail-page/editor-sidebar/atoms.ts       |   7 +-
 .../editor-sidebar/extensions/extensions.tsx  |  17 +-
 .../frontend/graphql/src/graphql/index.ts     |  13 +
 .../graphql/workspace-enabled-features.gql    |   5 +
 packages/frontend/graphql/src/schema.ts       |  14 +
 packages/frontend/i18n/src/resources/en.json  |   8 +
 24 files changed, 2297 insertions(+), 146 deletions(-)
 create mode 100644 packages/frontend/core/src/components/affine/setting-modal/types.ts
 create mode 100644 packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/arts.css.ts
 create mode 100644 packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/arts.tsx
 create mode 100644 packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/dark-art-svg.ts
 create mode 100644 packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/index.css.ts
 create mode 100644 packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/index.tsx
 create mode 100644 packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/light-art-svg.ts
 create mode 100644 packages/frontend/core/src/hooks/use-workspace-features.ts
 create mode 100644 packages/frontend/graphql/src/graphql/workspace-enabled-features.gql

diff --git a/packages/common/env/src/global.ts b/packages/common/env/src/global.ts
index 7e9527be4e..40fbf74ee7 100644
--- a/packages/common/env/src/global.ts
+++ b/packages/common/env/src/global.ts
@@ -29,7 +29,6 @@ export const runtimeFlagsSchema = z.object({
   enableEnhanceShareMode: z.boolean(),
   enablePayment: z.boolean(),
   enablePageHistory: z.boolean(),
-  enableCopilot: z.boolean(),
   // this is for the electron app
   serverUrlPrefix: z.string(),
   enableMoveDatabase: z.boolean(),
diff --git a/packages/frontend/component/src/ui/switch/switch.tsx b/packages/frontend/component/src/ui/switch/switch.tsx
index b26c896396..739d47e47f 100644
--- a/packages/frontend/component/src/ui/switch/switch.tsx
+++ b/packages/frontend/component/src/ui/switch/switch.tsx
@@ -19,6 +19,7 @@ export const Switch = ({
   checked: checkedProp = false,
   onChange: onChangeProp,
   children,
+  className,
   ...otherProps
 }: SwitchProps) => {
   const [checkedState, setCheckedState] = useState(checkedProp);
@@ -34,7 +35,7 @@ export const Switch = ({
   );
 
   return (
-    <label className={clsx(styles.labelStyle)} {...otherProps}>
+    <label className={clsx(styles.labelStyle, className)} {...otherProps}>
       {children}
       <input
         className={clsx(styles.inputStyle)}
diff --git a/packages/frontend/core/.webpack/runtime-config.ts b/packages/frontend/core/.webpack/runtime-config.ts
index ad61f39931..405996e39f 100644
--- a/packages/frontend/core/.webpack/runtime-config.ts
+++ b/packages/frontend/core/.webpack/runtime-config.ts
@@ -30,7 +30,6 @@ export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
       enableEnhanceShareMode: false,
       enablePayment: true,
       enablePageHistory: true,
-      enableCopilot: false,
       serverUrlPrefix: 'https://app.affine.pro',
       editorFlags,
       appVersion: packageJson.version,
@@ -41,7 +40,6 @@ export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
       return {
         ...this.stable,
         enablePageHistory: true,
-        enableCopilot: false,
         serverUrlPrefix: 'https://insider.affine.pro',
         appBuildType: 'beta' as const,
       };
@@ -72,7 +70,6 @@ export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
       enableEnhanceShareMode: false,
       enablePayment: true,
       enablePageHistory: true,
-      enableCopilot: true,
       serverUrlPrefix: 'https://affine.fail',
       editorFlags,
       appVersion: packageJson.version,
@@ -136,11 +133,6 @@ export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
       : buildFlags.mode === 'development'
         ? true
         : currentBuildPreset.enablePageHistory,
-    enableCopilot: process.env.ENABLE_COPILOT
-      ? process.env.ENABLE_COPILOT === 'true'
-      : buildFlags.mode === 'development'
-        ? true
-        : currentBuildPreset.enableCopilot,
   };
 
   if (buildFlags.mode === 'development') {
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/index.tsx
index 4c359206c2..fda5ddd85e 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/index.tsx
@@ -8,6 +8,7 @@ import type { ReactElement, SVGProps } from 'react';
 
 import { useCurrentLoginStatus } from '../../../../hooks/affine/use-current-login-status';
 import { useSelfHosted } from '../../../../hooks/affine/use-server-config';
+import type { GeneralSettingKey } from '../types';
 import { AboutAffine } from './about';
 import { AppearanceSettings } from './appearance';
 import { BillingSettings } from './billing';
@@ -15,15 +16,8 @@ import { PaymentIcon, UpgradeIcon } from './icons';
 import { AFFiNECloudPlans } from './plans';
 import { Shortcuts } from './shortcuts';
 
-export type GeneralSettingKeys =
-  | 'shortcuts'
-  | 'appearance'
-  | 'about'
-  | 'plans'
-  | 'billing';
-
 interface GeneralSettingListItem {
-  key: GeneralSettingKeys;
+  key: GeneralSettingKey;
   title: string;
   icon: (props: SVGProps<SVGSVGElement>) => ReactElement;
   testId: string;
@@ -78,7 +72,7 @@ export const useGeneralSettingList = (): GeneralSettingList => {
 };
 
 interface GeneralSettingProps {
-  generalKey: GeneralSettingKeys;
+  generalKey: GeneralSettingKey;
 }
 
 export const GeneralSetting = ({ generalKey }: GeneralSettingProps) => {
diff --git a/packages/frontend/core/src/components/affine/setting-modal/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/index.tsx
index b92abedf63..3a68c47dba 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/index.tsx
@@ -8,17 +8,17 @@ import { Suspense, useCallback, useLayoutEffect, useRef } from 'react';
 
 import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status';
 import { AccountSetting } from './account-setting';
-import {
-  GeneralSetting,
-  type GeneralSettingKeys,
-  useGeneralSettingList,
-} from './general-setting';
+import { GeneralSetting } from './general-setting';
 import { SettingSidebar } from './setting-sidebar';
 import * as style from './style.css';
+import {
+  type ActiveTab,
+  type GeneralSettingKey,
+  GeneralSettingKeys,
+  type WorkspaceSubTab,
+} from './types';
 import { WorkspaceSetting } from './workspace-setting';
 
-type ActiveTab = GeneralSettingKeys | 'workspace' | 'account';
-
 export interface SettingProps extends ModalProps {
   activeTab: ActiveTab;
   workspaceMetadata?: WorkspaceMetadata | null;
@@ -28,6 +28,9 @@ export interface SettingProps extends ModalProps {
   }) => void;
 }
 
+const isGeneralSetting = (key: string): key is GeneralSettingKey =>
+  GeneralSettingKeys.includes(key as GeneralSettingKey);
+
 export const SettingModal = ({
   activeTab = 'appearance',
   workspaceMetadata = null,
@@ -37,8 +40,6 @@ export const SettingModal = ({
   const t = useAFFiNEI18N();
   const loginStatus = useCurrentLoginStatus();
 
-  const generalSettingList = useGeneralSettingList();
-
   const modalContentRef = useRef<HTMLDivElement>(null);
   const modalContentWrapperRef = useRef<HTMLDivElement>(null);
 
@@ -72,27 +73,12 @@ export const SettingModal = ({
     };
   }, [modalProps.open]);
 
-  const onGeneralSettingClick = useCallback(
-    (key: GeneralSettingKeys) => {
-      onSettingClick({
-        activeTab: key,
-        workspaceMetadata: null,
-      });
+  const onTabChange = useCallback(
+    (key: ActiveTab, meta: WorkspaceMetadata | null) => {
+      onSettingClick({ activeTab: key, workspaceMetadata: meta });
     },
     [onSettingClick]
   );
-  const onWorkspaceSettingClick = useCallback(
-    (workspaceMetadata: WorkspaceMetadata) => {
-      onSettingClick({
-        activeTab: 'workspace',
-        workspaceMetadata,
-      });
-    },
-    [onSettingClick]
-  );
-  const onAccountSettingClick = useCallback(() => {
-    onSettingClick({ activeTab: 'account', workspaceMetadata: null });
-  }, [onSettingClick]);
 
   return (
     <Modal
@@ -111,12 +97,9 @@ export const SettingModal = ({
       {...modalProps}
     >
       <SettingSidebar
-        generalSettingList={generalSettingList}
-        onGeneralSettingClick={onGeneralSettingClick}
-        onWorkspaceSettingClick={onWorkspaceSettingClick}
-        selectedGeneralKey={activeTab}
+        activeTab={activeTab}
+        onTabChange={onTabChange}
         selectedWorkspaceId={workspaceMetadata?.id ?? null}
-        onAccountSettingClick={onAccountSettingClick}
       />
 
       <div
@@ -127,14 +110,15 @@ export const SettingModal = ({
         <div ref={modalContentRef} className={style.centerContainer}>
           <div className={style.content}>
             <Suspense fallback={<WorkspaceDetailSkeleton />}>
-              {activeTab === 'workspace' && workspaceMetadata ? (
+              {activeTab.startsWith('workspace:') && workspaceMetadata ? (
                 <WorkspaceSetting
+                  subTab={activeTab.split(':')[1] as WorkspaceSubTab}
                   key={workspaceMetadata.id}
                   workspaceMetadata={workspaceMetadata}
                 />
               ) : null}
-              {generalSettingList.some(v => v.key === activeTab) ? (
-                <GeneralSetting generalKey={activeTab as GeneralSettingKeys} />
+              {isGeneralSetting(activeTab) ? (
+                <GeneralSetting generalKey={activeTab} />
               ) : null}
               {activeTab === 'account' && loginStatus === 'authenticated' ? (
                 <AccountSetting />
diff --git a/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
index d29069803e..2bcac594d3 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
@@ -4,38 +4,30 @@ import {
 } from '@affine/component/setting-components';
 import { Avatar } from '@affine/component/ui/avatar';
 import { Tooltip } from '@affine/component/ui/tooltip';
+import { useIsWorkspaceOwner } from '@affine/core/hooks/affine/use-is-workspace-owner';
 import { useWorkspaceBlobObjectUrl } from '@affine/core/hooks/use-workspace-blob';
+import { useWorkspaceAvailableFeatures } from '@affine/core/hooks/use-workspace-features';
 import { useWorkspaceInfo } from '@affine/core/hooks/use-workspace-info';
 import {
   waitForCurrentWorkspaceAtom,
   workspaceListAtom,
 } from '@affine/core/modules/workspace';
 import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
+import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { WorkspaceMetadata } from '@affine/workspace';
 import { Logo1Icon } from '@blocksuite/icons';
 import clsx from 'clsx';
 import { useAtom, useAtomValue } from 'jotai/react';
-import { type ReactElement, Suspense, useCallback } from 'react';
+import { type ReactElement, Suspense, useCallback, useMemo } from 'react';
 
 import { authAtom } from '../../../../atoms';
 import { useCurrentLoginStatus } from '../../../../hooks/affine/use-current-login-status';
 import { useCurrentUser } from '../../../../hooks/affine/use-current-user';
 import { UserPlanButton } from '../../auth/user-plan-button';
-import type {
-  GeneralSettingKeys,
-  GeneralSettingList,
-} from '../general-setting';
-import {
-  accountButton,
-  currentWorkspaceLabel,
-  settingSlideBar,
-  sidebarFooter,
-  sidebarItemsWrapper,
-  sidebarSelectItem,
-  sidebarSubtitle,
-  sidebarTitle,
-} from './style.css';
+import { useGeneralSettingList } from '../general-setting';
+import type { ActiveTab, WorkspaceSubTab } from '../types';
+import * as style from './style.css';
 
 export type UserInfoProps = {
   onAccountSettingClick: () => void;
@@ -50,7 +42,7 @@ export const UserInfo = ({
   return (
     <div
       data-testid="user-info-card"
-      className={clsx(accountButton, {
+      className={clsx(style.accountButton, {
         active: active,
       })}
       onClick={onAccountSettingClick}
@@ -79,7 +71,7 @@ export const SignInButton = () => {
 
   return (
     <div
-      className={accountButton}
+      className={style.accountButton}
       onClick={useCallback(() => {
         setAuthModal({ openModal: true, state: 'signIn' });
       }, [setAuthModal])}
@@ -101,41 +93,48 @@ export const SignInButton = () => {
 };
 
 export const SettingSidebar = ({
-  generalSettingList,
-  onGeneralSettingClick,
-  onWorkspaceSettingClick,
+  activeTab,
+  onTabChange,
   selectedWorkspaceId,
-  selectedGeneralKey,
-  onAccountSettingClick,
 }: {
-  generalSettingList: GeneralSettingList;
-  onGeneralSettingClick: (key: GeneralSettingKeys) => void;
-  onWorkspaceSettingClick: (workspaceMetadata: WorkspaceMetadata) => void;
+  activeTab: ActiveTab;
+  onTabChange: (
+    key: ActiveTab,
+    workspaceMetadata: WorkspaceMetadata | null
+  ) => void;
   selectedWorkspaceId: string | null;
-  selectedGeneralKey: string | null;
-  onAccountSettingClick: () => void;
 }) => {
   const t = useAFFiNEI18N();
   const loginStatus = useCurrentLoginStatus();
+  const generalList = useGeneralSettingList();
+  const onAccountSettingClick = useCallback(() => {
+    onTabChange('account', null);
+  }, [onTabChange]);
+  const onWorkspaceSettingClick = useCallback(
+    (subTab: WorkspaceSubTab, workspaceMetadata: WorkspaceMetadata) => {
+      onTabChange(`workspace:${subTab}`, workspaceMetadata);
+    },
+    [onTabChange]
+  );
   return (
-    <div className={settingSlideBar} data-testid="settings-sidebar">
-      <div className={sidebarTitle}>
+    <div className={style.settingSlideBar} data-testid="settings-sidebar">
+      <div className={style.sidebarTitle}>
         {t['com.affine.settingSidebar.title']()}
       </div>
-      <div className={sidebarSubtitle}>
+      <div className={style.sidebarSubtitle}>
         {t['com.affine.settingSidebar.settings.general']()}
       </div>
-      <div className={sidebarItemsWrapper}>
-        {generalSettingList.map(({ title, icon, key, testId }) => {
+      <div className={style.sidebarItemsWrapper}>
+        {generalList.map(({ title, icon, key, testId }) => {
           return (
             <div
-              className={clsx(sidebarSelectItem, {
-                active: key === selectedGeneralKey,
+              className={clsx(style.sidebarSelectItem, {
+                active: key === activeTab,
               })}
               key={key}
               title={title}
               onClick={() => {
-                onGeneralSettingClick(key);
+                onTabChange(key, null);
               }}
               data-testid={testId}
             >
@@ -146,19 +145,20 @@ export const SettingSidebar = ({
         })}
       </div>
 
-      <div className={sidebarSubtitle}>
+      <div className={style.sidebarSubtitle}>
         {t['com.affine.settingSidebar.settings.workspace']()}
       </div>
-      <div className={clsx(sidebarItemsWrapper, 'scroll')}>
+      <div className={clsx(style.sidebarItemsWrapper, 'scroll')}>
         <Suspense fallback={<WorkspaceListSkeleton />}>
           <WorkspaceList
             onWorkspaceSettingClick={onWorkspaceSettingClick}
             selectedWorkspaceId={selectedWorkspaceId}
+            activeSubTab={activeTab.split(':')[1] as WorkspaceSubTab}
           />
         </Suspense>
       </div>
 
-      <div className={sidebarFooter}>
+      <div className={style.sidebarFooter}>
         {runtimeConfig.enableCloud && loginStatus === 'unauthenticated' ? (
           <SignInButton />
         ) : null}
@@ -167,7 +167,7 @@ export const SettingSidebar = ({
           <Suspense>
             <UserInfo
               onAccountSettingClick={onAccountSettingClick}
-              active={selectedGeneralKey === 'account'}
+              active={activeTab === 'account'}
             />
           </Suspense>
         ) : null}
@@ -179,12 +179,16 @@ export const SettingSidebar = ({
 export const WorkspaceList = ({
   onWorkspaceSettingClick,
   selectedWorkspaceId,
+  activeSubTab,
 }: {
-  onWorkspaceSettingClick: (workspaceMetadata: WorkspaceMetadata) => void;
+  onWorkspaceSettingClick: (
+    subTab: WorkspaceSubTab,
+    workspaceMetadata: WorkspaceMetadata
+  ) => void;
   selectedWorkspaceId: string | null;
+  activeSubTab: WorkspaceSubTab;
 }) => {
   const workspaces = useAtomValue(workspaceListAtom);
-  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
   return (
     <>
       {workspaces.map(workspace => {
@@ -192,11 +196,12 @@ export const WorkspaceList = ({
           <Suspense key={workspace.id} fallback={<WorkspaceListItemSkeleton />}>
             <WorkspaceListItem
               meta={workspace}
-              onClick={() => {
-                onWorkspaceSettingClick(workspace);
+              onClick={subTab => {
+                onWorkspaceSettingClick(subTab, workspace);
               }}
-              isCurrent={workspace.id === currentWorkspace.id}
-              isActive={workspace.id === selectedWorkspaceId}
+              activeSubTab={
+                workspace.id === selectedWorkspaceId ? activeSubTab : undefined
+              }
             />
           </Suspense>
         );
@@ -205,48 +210,106 @@ export const WorkspaceList = ({
   );
 };
 
+const subTabConfigs = [
+  {
+    key: 'preference',
+    title: 'com.affine.settings.workspace.preferences',
+  },
+  {
+    key: 'experimental-features',
+    title: 'com.affine.settings.workspace.experimental-features',
+  },
+] satisfies {
+  key: WorkspaceSubTab;
+  title: keyof ReturnType<typeof useAFFiNEI18N>;
+}[];
+
 const WorkspaceListItem = ({
+  activeSubTab,
   meta,
   onClick,
-  isCurrent,
-  isActive,
 }: {
   meta: WorkspaceMetadata;
-  onClick: () => void;
-  isCurrent: boolean;
-  isActive: boolean;
+  activeSubTab?: WorkspaceSubTab;
+  onClick: (subTab: WorkspaceSubTab) => void;
 }) => {
   const information = useWorkspaceInfo(meta);
-
   const avatarUrl = useWorkspaceBlobObjectUrl(meta, information?.avatar);
-
   const name = information?.name ?? UNTITLED_WORKSPACE_NAME;
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
+  const isCurrent = currentWorkspace.id === meta.id;
+  const t = useAFFiNEI18N();
+  const isOwner = useIsWorkspaceOwner(meta);
+  const availableFeatures = useWorkspaceAvailableFeatures();
+
+  const onClickPreference = useCallback(() => {
+    onClick('preference');
+  }, [onClick]);
+
+  const subTabs = useMemo(() => {
+    return subTabConfigs
+      .filter(({ key }) => {
+        if (key === 'experimental-features') {
+          return (
+            isOwner &&
+            currentWorkspace.flavour === WorkspaceFlavour.AFFINE_CLOUD &&
+            availableFeatures.length > 0
+          );
+        }
+        return true;
+      })
+      .map(({ key, title }) => {
+        return (
+          <div
+            onClick={() => {
+              onClick(key);
+            }}
+            className={clsx(style.sidebarSelectSubItem, {
+              active: activeSubTab === key,
+            })}
+            key={key}
+          >
+            {t[title]()}
+          </div>
+        );
+      });
+  }, [
+    activeSubTab,
+    availableFeatures.length,
+    currentWorkspace.flavour,
+    isOwner,
+    onClick,
+    t,
+  ]);
 
   return (
-    <div
-      className={clsx(sidebarSelectItem, { active: isActive })}
-      title={name}
-      onClick={onClick}
-      data-testid="workspace-list-item"
-    >
-      <Avatar
-        size={14}
-        url={avatarUrl}
-        name={name}
-        colorfulFallback
-        style={{
-          marginRight: '10px',
-        }}
-      />
-      <span className="setting-name">{name}</span>
-      {isCurrent ? (
-        <Tooltip content="Current" side="top">
-          <div
-            className={currentWorkspaceLabel}
-            data-testid="current-workspace-label"
-          ></div>
-        </Tooltip>
-      ) : null}
-    </div>
+    <>
+      <div
+        className={clsx(style.sidebarSelectItem, { active: !!activeSubTab })}
+        title={name}
+        onClick={onClickPreference}
+        data-testid="workspace-list-item"
+      >
+        <Avatar
+          size={14}
+          url={avatarUrl}
+          name={name}
+          colorfulFallback
+          style={{
+            marginRight: '10px',
+          }}
+        />
+        <span className="setting-name">{name}</span>
+        {isCurrent ? (
+          <Tooltip content="Current" side="top">
+            <div
+              className={style.currentWorkspaceLabel}
+              data-testid="current-workspace-label"
+            ></div>
+          </Tooltip>
+        ) : null}
+      </div>
+      {activeSubTab && subTabs.length > 1 ? subTabs : null}
+    </>
   );
 };
diff --git a/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
index 08abd856ad..3fe4db50ca 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
+++ b/packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
@@ -31,6 +31,9 @@ export const sidebarSubtitle = style({
 });
 
 export const sidebarItemsWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 4,
   selectors: {
     '&.scroll': {
       flexGrow: 1,
@@ -42,9 +45,10 @@ export const sidebarItemsWrapper = style({
 export const sidebarSelectItem = style({
   display: 'flex',
   alignItems: 'center',
-  margin: '0px 16px 4px 16px',
+  margin: '0px 16px',
   padding: '0px 8px',
   height: '30px',
+  flexShrink: 0,
   fontSize: 'var(--affine-font-sm)',
   borderRadius: '8px',
   cursor: 'pointer',
@@ -56,11 +60,28 @@ export const sidebarSelectItem = style({
     '&.active': {
       background: 'var(--affine-hover-color)',
     },
-    [`${sidebarItemsWrapper} &:last-of-type`]: {
-      marginBottom: 0,
+  },
+});
+
+export const sidebarSelectSubItem = style({
+  display: 'flex',
+  alignItems: 'center',
+  margin: '0px 16px',
+  padding: '0px 8px 0px 32px',
+  height: '30px',
+  flexShrink: 0,
+  fontSize: 'var(--affine-font-sm)',
+  borderRadius: '8px',
+  cursor: 'pointer',
+  userSelect: 'none',
+  color: 'var(--affine-text-secondary-color)',
+  selectors: {
+    '&.active, &:hover': {
+      color: 'var(--affine-text-primary-color)',
     },
   },
 });
+
 globalStyle(`${settingSlideBar} .icon`, {
   width: '16px',
   height: '16px',
diff --git a/packages/frontend/core/src/components/affine/setting-modal/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/style.css.ts
index 75cae6561a..215ca8c9a7 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/style.css.ts
+++ b/packages/frontend/core/src/components/affine/setting-modal/style.css.ts
@@ -23,6 +23,7 @@ export const centerContainer = style({
 });
 
 export const content = style({
+  position: 'relative',
   width: '100%',
   marginBottom: '24px',
   minHeight: 'calc(100% - 48px)',
diff --git a/packages/frontend/core/src/components/affine/setting-modal/types.ts b/packages/frontend/core/src/components/affine/setting-modal/types.ts
new file mode 100644
index 0000000000..d6e6d604ad
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/setting-modal/types.ts
@@ -0,0 +1,21 @@
+export const GeneralSettingKeys = [
+  'shortcuts',
+  'appearance',
+  'about',
+  'plans',
+  'billing',
+] as const;
+
+export const WorkspaceSubTabs = [
+  'preference',
+  'experimental-features',
+] as const;
+
+export type GeneralSettingKey = (typeof GeneralSettingKeys)[number];
+
+export type WorkspaceSubTab = (typeof WorkspaceSubTabs)[number];
+
+export type ActiveTab =
+  | GeneralSettingKey
+  | 'account'
+  | `workspace:${WorkspaceSubTab}`;
diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/arts.css.ts b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/arts.css.ts
new file mode 100644
index 0000000000..b569f0506d
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/arts.css.ts
@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+
+export const root = style({
+  height: 100,
+  display: 'flex',
+  justifyContent: 'center',
+});
diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/arts.tsx b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/arts.tsx
new file mode 100644
index 0000000000..0c9346062b
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/arts.tsx
@@ -0,0 +1,18 @@
+import { useTheme } from 'next-themes';
+
+import * as styles from './arts.css';
+import DarkSvg from './dark-art-svg';
+import LightSvg from './light-art-svg';
+
+export const ExperimentalFeatureArts = () => {
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <div
+      className={styles.root}
+      dangerouslySetInnerHTML={{
+        __html: resolvedTheme === 'dark' ? DarkSvg : LightSvg,
+      }}
+    />
+  );
+};
diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/dark-art-svg.ts b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/dark-art-svg.ts
new file mode 100644
index 0000000000..90ed7158d2
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/dark-art-svg.ts
@@ -0,0 +1,857 @@
+export default `<svg
+  width="429"
+  height="101"
+  viewBox="0 0 429 101"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g opacity="0.3" filter="url(#filter0_i_909_33931)">
+    <g clip-path="url(#clip0_909_33931)">
+      <rect
+        x="0.505859"
+        y="30.9414"
+        width="40"
+        height="40"
+        rx="6.06061"
+        fill="#454545"
+        fill-opacity="0.42"
+      />
+      <g filter="url(#filter1_d_909_33931)">
+        <rect
+          x="2.32397"
+          y="32.7595"
+          width="36.3636"
+          height="36.3636"
+          rx="3.96118"
+          fill="url(#paint0_linear_909_33931)"
+        />
+        <rect
+          x="2.47549"
+          y="32.911"
+          width="36.0606"
+          height="36.0606"
+          rx="3.80966"
+          stroke="#757575"
+          stroke-width="0.30303"
+        />
+        <g filter="url(#filter2_i_909_33931)">
+          <path
+            d="M29.6836 40.9414H20.0521C20.0521 43.3415 21.998 45.2874 24.398 45.2874H26.1719V47.0019C26.1739 49.3966 28.1125 51.3379 30.5052 51.3445H30.5059V41.7797C30.5059 41.7783 30.5059 41.7777 30.5059 41.7763C30.5059 41.3195 30.1391 40.9487 29.6843 40.9421H29.6836V40.9414ZM24.9182 45.7388H15.2866C15.2873 48.1389 17.2325 50.0841 19.6326 50.0841H21.4065V51.7993C21.4085 54.1987 23.353 56.1426 25.7524 56.1446V46.5738C25.7524 46.113 25.379 45.7395 24.9182 45.7395V45.7388ZM20.1488 50.5356H10.5059C10.5072 52.9363 12.4538 54.8816 14.8545 54.8816C14.8585 54.8816 14.8625 54.8816 14.8665 54.8816H16.641V56.5954C16.641 58.9948 18.5856 60.9401 20.985 60.9414V51.3732C20.985 50.9104 20.6102 50.5356 20.1474 50.5356H20.1488Z"
+            fill="#D0CFCF"
+          />
+        </g>
+      </g>
+    </g>
+  </g>
+  <g opacity="0.5" filter="url(#filter3_i_909_33931)">
+    <g clip-path="url(#clip1_909_33931)">
+      <rect
+        x="72.5059"
+        y="20.9414"
+        width="60"
+        height="60"
+        rx="9.09091"
+        fill="#454545"
+        fill-opacity="0.42"
+      />
+      <g filter="url(#filter4_d_909_33931)">
+        <rect
+          x="75.2332"
+          y="23.6687"
+          width="54.5455"
+          height="54.5455"
+          rx="5.94177"
+          fill="url(#paint1_linear_909_33931)"
+        />
+        <rect
+          x="75.4604"
+          y="23.896"
+          width="54.0909"
+          height="54.0909"
+          rx="5.7145"
+          stroke="#757575"
+          stroke-width="0.454545"
+        />
+        <g filter="url(#filter5_i_909_33931)">
+          <path
+            d="M107.701 47.2596H101.514V35.1914H107.701C111.04 35.1914 113.756 37.8977 113.756 41.2248C113.756 44.552 111.04 47.2596 107.701 47.2596ZM103.498 45.283H107.701C109.947 45.283 111.772 43.4622 111.772 41.2262C111.772 38.9902 109.945 37.1694 107.701 37.1694H103.498V45.283ZM103.498 47.2596H97.3123C93.9734 47.2596 91.2575 44.5533 91.2575 41.2262C91.2575 37.8991 93.9734 35.1914 97.3123 35.1914H103.499V47.2596H103.498ZM97.3123 37.1681C95.067 37.1681 93.2411 38.9888 93.2411 41.2248C93.2411 43.4608 95.067 45.283 97.3123 45.283H101.516V37.1681H97.3123ZM103.498 57.3498H97.3123C93.9734 57.3498 91.2575 54.6435 91.2575 51.3164C91.2575 47.9893 93.9734 45.283 97.3123 45.283H103.499V57.3498H103.498ZM97.3123 47.2596C95.067 47.2596 93.2411 49.0804 93.2411 51.3164C93.2411 53.5524 95.0684 55.3732 97.3123 55.3732H101.516V47.2596H97.3123ZM97.3447 67.4414C93.9882 67.4414 91.2561 64.7351 91.2561 61.408C91.2561 58.0808 93.972 55.3745 97.3109 55.3745H103.498V61.3421C103.498 64.7055 100.738 67.4414 97.3447 67.4414ZM97.3123 57.3498C96.233 57.3513 95.1983 57.7791 94.4351 58.5396C93.6719 59.3001 93.2425 60.3311 93.2411 61.4066C93.2411 63.644 95.0818 65.4634 97.346 65.4634C99.6452 65.4634 101.517 63.6144 101.517 61.3408V57.3498H97.3123ZM107.701 57.3498H107.569C104.23 57.3498 101.514 54.6435 101.514 51.3164C101.514 47.9893 104.23 45.283 107.569 45.283H107.701C111.04 45.283 113.756 47.9893 113.756 51.3164C113.756 54.6435 111.04 57.3498 107.701 57.3498ZM107.57 47.2596C105.325 47.2596 103.499 49.0804 103.499 51.3164C103.499 53.5524 105.327 55.3732 107.57 55.3732H107.703C109.948 55.3732 111.774 53.5524 111.774 51.3164C111.774 49.0804 109.945 47.2596 107.701 47.2596H107.57Z"
+            fill="#3E3E3E"
+          />
+          <path
+            d="M107.701 47.2596H101.514V35.1914H107.701C111.04 35.1914 113.756 37.8977 113.756 41.2248C113.756 44.552 111.04 47.2596 107.701 47.2596ZM103.498 45.283H107.701C109.947 45.283 111.772 43.4622 111.772 41.2262C111.772 38.9902 109.945 37.1694 107.701 37.1694H103.498V45.283ZM103.498 47.2596H97.3123C93.9734 47.2596 91.2575 44.5533 91.2575 41.2262C91.2575 37.8991 93.9734 35.1914 97.3123 35.1914H103.499V47.2596H103.498ZM97.3123 37.1681C95.067 37.1681 93.2411 38.9888 93.2411 41.2248C93.2411 43.4608 95.067 45.283 97.3123 45.283H101.516V37.1681H97.3123ZM103.498 57.3498H97.3123C93.9734 57.3498 91.2575 54.6435 91.2575 51.3164C91.2575 47.9893 93.9734 45.283 97.3123 45.283H103.499V57.3498H103.498ZM97.3123 47.2596C95.067 47.2596 93.2411 49.0804 93.2411 51.3164C93.2411 53.5524 95.0684 55.3732 97.3123 55.3732H101.516V47.2596H97.3123ZM97.3447 67.4414C93.9882 67.4414 91.2561 64.7351 91.2561 61.408C91.2561 58.0808 93.972 55.3745 97.3109 55.3745H103.498V61.3421C103.498 64.7055 100.738 67.4414 97.3447 67.4414ZM97.3123 57.3498C96.233 57.3513 95.1983 57.7791 94.4351 58.5396C93.6719 59.3001 93.2425 60.3311 93.2411 61.4066C93.2411 63.644 95.0818 65.4634 97.346 65.4634C99.6452 65.4634 101.517 63.6144 101.517 61.3408V57.3498H97.3123ZM107.701 57.3498H107.569C104.23 57.3498 101.514 54.6435 101.514 51.3164C101.514 47.9893 104.23 45.283 107.569 45.283H107.701C111.04 45.283 113.756 47.9893 113.756 51.3164C113.756 54.6435 111.04 57.3498 107.701 57.3498ZM107.57 47.2596C105.325 47.2596 103.499 49.0804 103.499 51.3164C103.499 53.5524 105.327 55.3732 107.57 55.3732H107.703C109.948 55.3732 111.774 53.5524 111.774 51.3164C111.774 49.0804 109.945 47.2596 107.701 47.2596H107.57Z"
+            fill="#D0CFCF"
+          />
+        </g>
+      </g>
+    </g>
+  </g>
+  <g filter="url(#filter6_i_909_33931)">
+    <g clip-path="url(#clip2_909_33931)">
+      <rect
+        x="164.506"
+        y="0.941406"
+        width="100"
+        height="100"
+        rx="15.1515"
+        fill="#454545"
+        fill-opacity="0.42"
+      />
+      <g filter="url(#filter7_d_909_33931)">
+        <rect
+          x="169.051"
+          y="5.48682"
+          width="90.9091"
+          height="90.9091"
+          rx="9.90295"
+          fill="url(#paint2_linear_909_33931)"
+        />
+        <rect
+          x="169.43"
+          y="5.8656"
+          width="90.1515"
+          height="90.1515"
+          rx="9.52416"
+          stroke="#595959"
+          stroke-width="0.757576"
+        />
+        <g filter="url(#filter8_i_909_33931)">
+          <path
+            d="M194.424 41.464C194.424 39.6297 195.152 37.8706 196.449 36.5736C197.746 35.2766 199.506 34.548 201.34 34.548H207.917C208.602 34.548 209.023 33.8356 208.761 33.204C208.628 32.8934 208.523 32.5717 208.447 32.2426C207.684 28.8146 210.273 25.3267 214.019 25.3267C217.768 25.3267 220.354 28.8146 219.591 32.2426C219.515 32.5717 219.41 32.8934 219.278 33.204C219.012 33.8356 219.437 34.548 220.121 34.548H224.393C226.227 34.548 227.986 35.2766 229.283 36.5736C230.58 37.8706 231.309 39.6297 231.309 41.464V45.7357C231.309 46.4204 232.019 46.8423 232.653 46.5795C232.964 46.4504 233.282 46.3397 233.614 46.266C237.042 45.5029 240.53 48.0895 240.53 51.8379C240.53 55.5864 237.042 58.173 233.614 57.4099C233.285 57.3341 232.964 57.2291 232.653 57.0964C232.021 56.8313 231.309 57.2554 231.309 57.9401V64.5172C231.309 66.3515 230.58 68.1106 229.283 69.4076C227.986 70.7046 226.227 71.4332 224.393 71.4332H220.029C219.365 71.4332 218.939 70.7624 219.13 70.1284C219.225 69.8057 219.296 69.4737 219.326 69.1279C219.387 68.3938 219.296 67.655 219.057 66.9581C218.818 66.2613 218.437 65.6216 217.938 65.0795C217.439 64.5373 216.834 64.1046 216.159 63.8086C215.484 63.5126 214.756 63.3598 214.019 63.3598C213.282 63.3598 212.554 63.5126 211.879 63.8086C211.205 64.1046 210.599 64.5373 210.1 65.0795C209.601 65.6216 209.22 66.2613 208.982 66.9581C208.743 67.655 208.651 68.3938 208.712 69.1279C208.742 69.4737 208.814 69.8057 208.911 70.1284C209.1 70.7624 208.673 71.4332 208.011 71.4332H201.34C199.506 71.4332 197.746 70.7046 196.449 69.4076C195.152 68.1106 194.424 66.3515 194.424 64.5172V57.8479C194.424 57.184 195.095 56.7575 195.729 56.9488C196.051 57.0434 196.383 57.1148 196.729 57.1448C197.463 57.206 198.202 57.1143 198.899 56.8754C199.596 56.6366 200.235 56.2557 200.778 55.7569C201.32 55.2582 201.752 54.6523 202.048 53.9778C202.344 53.3032 202.497 52.5746 202.497 51.8379C202.497 51.1013 202.344 50.3726 202.048 49.6981C201.752 49.0235 201.32 48.4177 200.778 47.9189C200.235 47.4202 199.596 47.0393 198.899 46.8004C198.202 46.5615 197.463 46.4698 196.729 46.5311C196.383 46.561 196.051 46.6325 195.729 46.7293C195.095 46.9184 194.424 46.4919 194.424 45.8302V41.464Z"
+            fill="#D0CFCF"
+          />
+        </g>
+      </g>
+    </g>
+  </g>
+  <g opacity="0.5" filter="url(#filter9_i_909_33931)">
+    <g clip-path="url(#clip3_909_33931)">
+      <rect
+        x="296.506"
+        y="20.9414"
+        width="60"
+        height="60"
+        rx="9.09091"
+        fill="#454545"
+        fill-opacity="0.42"
+      />
+      <g filter="url(#filter10_d_909_33931)">
+        <rect
+          x="299.233"
+          y="23.6687"
+          width="54.5455"
+          height="54.5455"
+          rx="5.94177"
+          fill="url(#paint3_linear_909_33931)"
+        />
+        <rect
+          x="299.46"
+          y="23.896"
+          width="54.0909"
+          height="54.0909"
+          rx="5.7145"
+          stroke="#757575"
+          stroke-width="0.454545"
+        />
+        <g
+          clip-path="url(#clip4_909_33931)"
+          filter="url(#filter11_i_909_33931)"
+        >
+          <path
+            d="M326.539 32.9546C316.589 32.9546 308.519 41.023 308.519 50.9746C308.519 58.9364 313.682 65.6909 320.843 68.074C321.743 68.2407 322.034 67.6821 322.034 67.2076V63.8528C317.022 64.943 315.978 61.7265 315.978 61.7265C315.158 59.6437 313.976 59.0896 313.976 59.0896C312.341 57.9708 314.101 57.9948 314.101 57.9948C315.91 58.121 316.863 59.8524 316.863 59.8524C318.469 62.6065 321.078 61.8106 322.106 61.3496C322.267 60.1858 322.734 59.3899 323.251 58.9409C319.249 58.4829 315.041 56.9377 315.041 50.0345C315.041 48.0658 315.745 46.4591 316.897 45.1977C316.711 44.7427 316.094 42.9091 317.073 40.4284C317.073 40.4284 318.586 39.9448 322.03 42.2754C323.467 41.876 325.008 41.6763 326.539 41.6687C328.071 41.6763 329.613 41.876 331.053 42.2754C334.494 39.9448 336.004 40.4284 336.004 40.4284C336.985 42.9106 336.368 44.7442 336.181 45.1977C337.338 46.4591 338.036 48.0673 338.036 50.0345C338.036 56.9557 333.821 58.4799 329.808 58.9259C330.454 59.4845 331.044 60.5807 331.044 62.2626V67.2076C331.044 67.6866 331.333 68.2497 332.247 68.0725C339.403 65.6864 344.559 58.9334 344.559 50.9746C344.559 41.023 336.491 32.9546 326.539 32.9546Z"
+            fill="#D0CFCF"
+          />
+        </g>
+      </g>
+    </g>
+  </g>
+  <g opacity="0.3" filter="url(#filter12_i_909_33931)">
+    <g clip-path="url(#clip5_909_33931)">
+      <rect
+        x="388.506"
+        y="30.9414"
+        width="40"
+        height="40"
+        rx="6.06061"
+        fill="#454545"
+        fill-opacity="0.42"
+      />
+      <g filter="url(#filter13_d_909_33931)">
+        <rect
+          x="390.324"
+          y="32.7595"
+          width="36.3636"
+          height="36.3636"
+          rx="3.96118"
+          fill="url(#paint4_linear_909_33931)"
+        />
+        <rect
+          x="390.475"
+          y="32.911"
+          width="36.0606"
+          height="36.0606"
+          rx="3.80966"
+          stroke="#757575"
+          stroke-width="0.30303"
+        />
+        <g filter="url(#filter14_i_909_33931)">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M414.856 44.5774C411.355 41.0764 405.687 41.0628 402.169 44.5366L414.897 57.2642C418.37 53.7463 418.357 48.0785 414.856 44.5774ZM400.373 47.0514L412.382 59.06C413.005 58.7615 413.6 58.3872 414.155 57.937L401.496 45.278C401.046 45.8326 400.672 46.4284 400.373 47.0514ZM408.998 59.9272L399.506 50.4352C399.551 49.6297 399.704 48.8291 399.964 48.0569L411.376 59.4687C410.604 59.7293 409.803 59.8821 408.998 59.9272ZM402.128 57.3054C400.611 55.7882 399.748 53.8641 399.541 51.8845L407.549 59.8922C405.569 59.6848 403.645 58.8225 402.128 57.3054Z"
+            fill="#D0CFCF"
+          />
+        </g>
+      </g>
+    </g>
+  </g>
+  <defs>
+    <filter
+      id="filter0_i_909_33931"
+      x="0.505859"
+      y="30.7394"
+      width="40"
+      height="40.202"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="-0.20202" />
+      <feGaussianBlur stdDeviation="0.707071" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_909_33931"
+      />
+    </filter>
+    <filter
+      id="filter1_d_909_33931"
+      x="0.808823"
+      y="31.7494"
+      width="39.3938"
+      height="39.3938"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="0.505051" />
+      <feGaussianBlur stdDeviation="0.757576" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="BackgroundImageFix"
+        result="effect1_dropShadow_909_33931"
+      />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="effect1_dropShadow_909_33931"
+        result="shape"
+      />
+    </filter>
+    <filter
+      id="filter2_i_909_33931"
+      x="8.51465"
+      y="38.9502"
+      width="24.2725"
+      height="24.2725"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dx="0.245902" dy="0.245902" />
+      <feGaussianBlur stdDeviation="0.327869" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_909_33931"
+      />
+    </filter>
+    <filter
+      id="filter3_i_909_33931"
+      x="72.5059"
+      y="20.6384"
+      width="60"
+      height="60.303"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="-0.30303" />
+      <feGaussianBlur stdDeviation="1.06061" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_909_33931"
+      />
+    </filter>
+    <filter
+      id="filter4_d_909_33931"
+      x="72.9604"
+      y="22.1535"
+      width="59.0909"
+      height="59.0909"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="0.757576" />
+      <feGaussianBlur stdDeviation="1.13636" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="BackgroundImageFix"
+        result="effect1_dropShadow_909_33931"
+      />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="effect1_dropShadow_909_33931"
+        result="shape"
+      />
+    </filter>
+    <filter
+      id="filter5_i_909_33931"
+      x="84.5193"
+      y="32.9546"
+      width="36.4089"
+      height="36.4089"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dx="0.368852" dy="0.368852" />
+      <feGaussianBlur stdDeviation="0.491803" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_909_33931"
+      />
+    </filter>
+    <filter
+      id="filter6_i_909_33931"
+      x="164.506"
+      y="0.436356"
+      width="100"
+      height="100.505"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="-0.50505" />
+      <feGaussianBlur stdDeviation="1.76768" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_909_33931"
+      />
+    </filter>
+    <filter
+      id="filter7_d_909_33931"
+      x="165.263"
+      y="2.96156"
+      width="98.4849"
+      height="98.4849"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="1.26263" />
+      <feGaussianBlur stdDeviation="1.89394" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="BackgroundImageFix"
+        result="effect1_dropShadow_909_33931"
+      />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="effect1_dropShadow_909_33931"
+        result="shape"
+      />
+    </filter>
+    <filter
+      id="filter8_i_909_33931"
+      x="194.424"
+      y="25.3267"
+      width="46.7212"
+      height="46.7212"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dx="0.614754" dy="0.614754" />
+      <feGaussianBlur stdDeviation="0.819672" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_909_33931"
+      />
+    </filter>
+    <filter
+      id="filter9_i_909_33931"
+      x="296.506"
+      y="20.6384"
+      width="60"
+      height="60.303"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="-0.30303" />
+      <feGaussianBlur stdDeviation="1.06061" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_909_33931"
+      />
+    </filter>
+    <filter
+      id="filter10_d_909_33931"
+      x="296.96"
+      y="22.1535"
+      width="59.0909"
+      height="59.0909"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="0.757576" />
+      <feGaussianBlur stdDeviation="1.13636" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="BackgroundImageFix"
+        result="effect1_dropShadow_909_33931"
+      />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="effect1_dropShadow_909_33931"
+        result="shape"
+      />
+    </filter>
+    <filter
+      id="filter11_i_909_33931"
+      x="308.519"
+      y="32.9546"
+      width="36.4089"
+      height="36.4089"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dx="0.368852" dy="0.368852" />
+      <feGaussianBlur stdDeviation="0.491803" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_909_33931"
+      />
+    </filter>
+    <filter
+      id="filter12_i_909_33931"
+      x="388.506"
+      y="30.7394"
+      width="40"
+      height="40.202"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="-0.20202" />
+      <feGaussianBlur stdDeviation="0.707071" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_909_33931"
+      />
+    </filter>
+    <filter
+      id="filter13_d_909_33931"
+      x="388.809"
+      y="31.7494"
+      width="39.3938"
+      height="39.3938"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="0.505051" />
+      <feGaussianBlur stdDeviation="0.757576" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="BackgroundImageFix"
+        result="effect1_dropShadow_909_33931"
+      />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="effect1_dropShadow_909_33931"
+        result="shape"
+      />
+    </filter>
+    <filter
+      id="filter14_i_909_33931"
+      x="396.515"
+      y="38.9502"
+      width="24.2725"
+      height="24.2725"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dx="0.245902" dy="0.245902" />
+      <feGaussianBlur stdDeviation="0.327869" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_909_33931"
+      />
+    </filter>
+    <linearGradient
+      id="paint0_linear_909_33931"
+      x1="7.37448"
+      y1="33.5171"
+      x2="28.6876"
+      y2="69.5777"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#383838" />
+      <stop offset="0.260417" stop-color="#2A2A2A" />
+      <stop offset="0.619792" stop-color="#393939" />
+      <stop offset="1" stop-color="#414141" />
+    </linearGradient>
+    <linearGradient
+      id="paint1_linear_909_33931"
+      x1="82.8089"
+      y1="24.8051"
+      x2="114.779"
+      y2="78.896"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#383838" />
+      <stop offset="0.260417" stop-color="#2A2A2A" />
+      <stop offset="0.619792" stop-color="#393939" />
+      <stop offset="1" stop-color="#414141" />
+    </linearGradient>
+    <linearGradient
+      id="paint2_linear_909_33931"
+      x1="181.678"
+      y1="7.38076"
+      x2="234.96"
+      y2="97.5323"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#383838" />
+      <stop offset="0.260417" stop-color="#2A2A2A" />
+      <stop offset="0.619792" stop-color="#393939" />
+      <stop offset="1" stop-color="#414141" />
+    </linearGradient>
+    <linearGradient
+      id="paint3_linear_909_33931"
+      x1="306.809"
+      y1="24.8051"
+      x2="338.779"
+      y2="78.896"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#383838" />
+      <stop offset="0.260417" stop-color="#2A2A2A" />
+      <stop offset="0.619792" stop-color="#393939" />
+      <stop offset="1" stop-color="#414141" />
+    </linearGradient>
+    <linearGradient
+      id="paint4_linear_909_33931"
+      x1="395.374"
+      y1="33.5171"
+      x2="416.688"
+      y2="69.5777"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#383838" />
+      <stop offset="0.260417" stop-color="#2A2A2A" />
+      <stop offset="0.619792" stop-color="#393939" />
+      <stop offset="1" stop-color="#414141" />
+    </linearGradient>
+    <clipPath id="clip0_909_33931">
+      <rect
+        x="0.505859"
+        y="30.9414"
+        width="40"
+        height="40"
+        rx="6.06061"
+        fill="white"
+      />
+    </clipPath>
+    <clipPath id="clip1_909_33931">
+      <rect
+        x="72.5059"
+        y="20.9414"
+        width="60"
+        height="60"
+        rx="9.09091"
+        fill="white"
+      />
+    </clipPath>
+    <clipPath id="clip2_909_33931">
+      <rect
+        x="164.506"
+        y="0.941406"
+        width="100"
+        height="100"
+        rx="15.1515"
+        fill="white"
+      />
+    </clipPath>
+    <clipPath id="clip3_909_33931">
+      <rect
+        x="296.506"
+        y="20.9414"
+        width="60"
+        height="60"
+        rx="9.09091"
+        fill="white"
+      />
+    </clipPath>
+    <clipPath id="clip4_909_33931">
+      <rect
+        width="36.0399"
+        height="36.0399"
+        fill="white"
+        transform="translate(308.519 32.9546)"
+      />
+    </clipPath>
+    <clipPath id="clip5_909_33931">
+      <rect
+        x="388.506"
+        y="30.9414"
+        width="40"
+        height="40"
+        rx="6.06061"
+        fill="white"
+      />
+    </clipPath>
+  </defs>
+</svg>`;
diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/index.css.ts b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/index.css.ts
new file mode 100644
index 0000000000..7b91d3db57
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/index.css.ts
@@ -0,0 +1,64 @@
+import { style } from '@vanilla-extract/css';
+
+export const promptRoot = style({
+  position: 'absolute',
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+});
+
+export const promptTitle = style({
+  fontSize: 'var(--affine-font-h-4)',
+  fontWeight: '600',
+  marginBottom: 48,
+});
+
+export const promptArt = style({
+  marginBottom: 68,
+});
+
+export const promptWarning = style({
+  backgroundColor: 'var(--affine-background-tertiary-color)',
+  fontSize: 'var(--affine-font-xs)',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  gap: 14,
+  padding: 10,
+  borderRadius: 8,
+});
+
+export const promptWarningTitle = style({
+  color: 'var(--affine-error-color)',
+  fontWeight: 600,
+});
+
+export const spacer = style({
+  flexGrow: 1,
+  minHeight: 12,
+});
+
+export const promptDisclaimer = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginBottom: 32,
+  gap: 4,
+});
+
+export const promptDisclaimerConfirm = style({
+  display: 'flex',
+  justifyContent: 'center',
+});
+
+export const switchRow = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  marginBottom: 32,
+});
+
+export const switchDisabled = style({
+  opacity: 0.5,
+  pointerEvents: 'none',
+});
diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/index.tsx
new file mode 100644
index 0000000000..c45b8ef380
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/index.tsx
@@ -0,0 +1,149 @@
+import { Button, Checkbox, Loading, Switch } from '@affine/component';
+import { SettingHeader } from '@affine/component/setting-components';
+import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import {
+  useSetWorkspaceFeature,
+  useWorkspaceAvailableFeatures,
+  useWorkspaceEnabledFeatures,
+} from '@affine/core/hooks/use-workspace-features';
+import { FeatureType } from '@affine/graphql';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useAtom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
+import { Suspense, useCallback, useState } from 'react';
+
+import { ExperimentalFeatureArts } from './arts';
+import * as styles from './index.css';
+
+const ExperimentalFeaturesPrompt = ({
+  onConfirm,
+}: {
+  onConfirm: () => void;
+}) => {
+  const t = useAFFiNEI18N();
+  const [checked, setChecked] = useState(false);
+
+  const onChange: (
+    event: React.ChangeEvent<HTMLInputElement>,
+    checked: boolean
+  ) => void = useCallback((_, checked) => {
+    setChecked(checked);
+  }, []);
+
+  return (
+    <div className={styles.promptRoot}>
+      <div className={styles.promptTitle}>
+        {t[
+          'com.affine.settings.workspace.experimental-features.prompt-header'
+        ]()}
+      </div>
+      <div className={styles.promptArt}>
+        <ExperimentalFeatureArts />
+      </div>
+      <div className={styles.promptWarning}>
+        <div className={styles.promptWarningTitle}>
+          {t[
+            'com.affine.settings.workspace.experimental-features.prompt-warning-title'
+          ]()}
+        </div>
+        {t[
+          'com.affine.settings.workspace.experimental-features.prompt-warning'
+        ]()}
+      </div>
+
+      <div className={styles.spacer} />
+
+      <label className={styles.promptDisclaimer}>
+        <Checkbox checked={checked} onChange={onChange} />
+        {t[
+          'com.affine.settings.workspace.experimental-features.prompt-disclaimer'
+        ]()}
+      </label>
+
+      <div className={styles.promptDisclaimerConfirm}>
+        <Button disabled={!checked} onClick={onConfirm} type="primary">
+          {t[
+            'com.affine.settings.workspace.experimental-features.get-started'
+          ]()}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+interface ExperimentalFeaturesItemProps {
+  feature: FeatureType;
+  title: React.ReactNode;
+}
+
+const ExperimentalFeaturesItem = ({
+  feature,
+  title,
+}: ExperimentalFeaturesItemProps) => {
+  const enabledFeatures = useWorkspaceEnabledFeatures();
+  const enabled = enabledFeatures.includes(feature);
+  const [localEnabled, setLocalEnabled] = useState(enabled);
+  const { trigger, isMutating } = useSetWorkspaceFeature();
+  const onChange = useCallback(
+    (checked: boolean) => {
+      setLocalEnabled(checked);
+      trigger(feature, checked);
+    },
+    [trigger, feature]
+  );
+
+  return (
+    <div className={styles.switchRow}>
+      {title}
+      <Switch
+        checked={localEnabled}
+        onChange={onChange}
+        className={isMutating ? styles.switchDisabled : ''}
+      />
+    </div>
+  );
+};
+
+const ExperimentalFeaturesMain = () => {
+  const t = useAFFiNEI18N();
+  const features = useWorkspaceAvailableFeatures();
+
+  return (
+    <>
+      <SettingHeader
+        title={t[
+          'com.affine.settings.workspace.experimental-features.header.plugins'
+        ]()}
+      />
+
+      {features.includes(FeatureType.Copilot) ? (
+        <ExperimentalFeaturesItem
+          title="AI POC"
+          feature={FeatureType.Copilot}
+        />
+      ) : null}
+    </>
+  );
+};
+
+// todo: save to workspace meta instead?
+const experimentalFeaturesDisclaimerAtom = atomWithStorage(
+  'affine:experimental-features-disclaimer',
+  false
+);
+
+export const ExperimentalFeatures = () => {
+  const [enabled, setEnabled] = useAtom(experimentalFeaturesDisclaimerAtom);
+  const handleConfirm = useAsyncCallback(async () => {
+    setEnabled(true);
+  }, [setEnabled]);
+  if (!enabled) {
+    return <ExperimentalFeaturesPrompt onConfirm={handleConfirm} />;
+  } else {
+    return (
+      <Suspense fallback={<Loading />}>
+        <ExperimentalFeaturesMain />
+      </Suspense>
+    );
+  }
+};
diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/light-art-svg.ts b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/light-art-svg.ts
new file mode 100644
index 0000000000..a6d089699e
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/light-art-svg.ts
@@ -0,0 +1,843 @@
+export default `<svg
+  width="429"
+  height="100"
+  viewBox="0 0 429 100"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g opacity="0.6" filter="url(#filter0_i_907_33313)">
+    <g clip-path="url(#clip0_907_33313)">
+      <rect
+        x="0.624512"
+        y="30"
+        width="40"
+        height="40"
+        rx="6.06061"
+        fill="#F8F8F8"
+      />
+      <g filter="url(#filter1_d_907_33313)">
+        <rect
+          x="2.44263"
+          y="31.8181"
+          width="36.3636"
+          height="36.3636"
+          rx="3.96118"
+          fill="url(#paint0_linear_907_33313)"
+        />
+        <rect
+          x="2.59414"
+          y="31.9697"
+          width="36.0606"
+          height="36.0606"
+          rx="3.80966"
+          stroke="#E4E4E4"
+          stroke-width="0.30303"
+        />
+        <g filter="url(#filter2_i_907_33313)">
+          <path
+            d="M29.8023 40H20.1707C20.1707 42.4001 22.1166 44.346 24.5167 44.346H26.2905V46.0605C26.2925 48.4552 28.2311 50.3965 30.6238 50.4031H30.6245V40.8383C30.6245 40.8369 30.6245 40.8363 30.6245 40.8349C30.6245 40.3781 30.2577 40.0073 29.8029 40.0007H29.8023V40ZM25.0368 44.7974H15.4053C15.4059 47.1975 17.3512 49.1427 19.7512 49.1427H21.5251V50.8579C21.5271 53.2573 23.4717 55.2012 25.8711 55.2032V45.6324C25.8711 45.1716 25.4976 44.7981 25.0368 44.7981V44.7974ZM20.2674 49.5942H10.6245C10.6258 51.9949 12.5724 53.9402 14.9731 53.9402C14.9772 53.9402 14.9812 53.9402 14.9852 53.9402H16.7597V55.654C16.7597 58.0534 18.7043 59.9987 21.1037 60V50.4318C21.1037 49.969 20.7289 49.5942 20.2661 49.5942H20.2674Z"
+            fill="#E2E5E6"
+          />
+        </g>
+      </g>
+    </g>
+  </g>
+  <g opacity="0.8" filter="url(#filter3_i_907_33313)">
+    <g clip-path="url(#clip1_907_33313)">
+      <rect
+        x="72.6245"
+        y="20"
+        width="60"
+        height="60"
+        rx="9.09091"
+        fill="#F8F8F8"
+      />
+      <g filter="url(#filter4_d_907_33313)">
+        <rect
+          x="75.3518"
+          y="22.7272"
+          width="54.5455"
+          height="54.5455"
+          rx="5.94177"
+          fill="url(#paint1_linear_907_33313)"
+        />
+        <rect
+          x="75.5791"
+          y="22.9545"
+          width="54.0909"
+          height="54.0909"
+          rx="5.7145"
+          stroke="#E4E4E4"
+          stroke-width="0.454545"
+        />
+        <g filter="url(#filter5_i_907_33313)">
+          <path
+            d="M107.82 46.3182H101.633V34.25H107.82C111.159 34.25 113.875 36.9563 113.875 40.2834C113.875 43.6105 111.159 46.3182 107.82 46.3182ZM103.617 44.3415H107.82C110.065 44.3415 111.891 42.5208 111.891 40.2848C111.891 38.0488 110.064 36.228 107.82 36.228H103.617V44.3415ZM103.617 46.3182H97.4309C94.092 46.3182 91.3761 43.6119 91.3761 40.2848C91.3761 36.9576 94.092 34.25 97.4309 34.25H103.618V46.3182H103.617ZM97.4309 36.2266C95.1857 36.2266 93.3598 38.0474 93.3598 40.2834C93.3598 42.5194 95.1857 44.3415 97.4309 44.3415H101.634V36.2266H97.4309ZM103.617 56.4084H97.4309C94.092 56.4084 91.3761 53.7021 91.3761 50.375C91.3761 47.0478 94.092 44.3415 97.4309 44.3415H103.618V56.4084H103.617ZM97.4309 46.3182C95.1857 46.3182 93.3598 48.139 93.3598 50.375C93.3598 52.611 95.187 54.4318 97.4309 54.4318H101.634V46.3182H97.4309ZM97.4633 66.5C94.1069 66.5 91.3748 63.7937 91.3748 60.4665C91.3748 57.1394 94.0907 54.4331 97.4296 54.4331H103.617V60.4007C103.617 63.7641 100.856 66.5 97.4633 66.5ZM97.4309 56.4084C96.3516 56.4098 95.317 56.8377 94.5538 57.5982C93.7906 58.3587 93.3612 59.3897 93.3598 60.4652C93.3598 62.7025 95.2005 64.522 97.4647 64.522C99.7639 64.522 101.636 62.673 101.636 60.3993V56.4084H97.4309ZM107.82 56.4084H107.688C104.349 56.4084 101.633 53.7021 101.633 50.375C101.633 47.0478 104.349 44.3415 107.688 44.3415H107.82C111.159 44.3415 113.875 47.0478 113.875 50.375C113.875 53.7021 111.159 56.4084 107.82 56.4084ZM107.689 46.3182C105.444 46.3182 103.618 48.139 103.618 50.375C103.618 52.611 105.445 54.4318 107.689 54.4318H107.821C110.067 54.4318 111.892 52.611 111.892 50.375C111.892 48.139 110.064 46.3182 107.82 46.3182H107.689Z"
+            fill="black"
+          />
+          <path
+            d="M107.82 46.3182H101.633V34.25H107.82C111.159 34.25 113.875 36.9563 113.875 40.2834C113.875 43.6105 111.159 46.3182 107.82 46.3182ZM103.617 44.3415H107.82C110.065 44.3415 111.891 42.5208 111.891 40.2848C111.891 38.0488 110.064 36.228 107.82 36.228H103.617V44.3415ZM103.617 46.3182H97.4309C94.092 46.3182 91.3761 43.6119 91.3761 40.2848C91.3761 36.9576 94.092 34.25 97.4309 34.25H103.618V46.3182H103.617ZM97.4309 36.2266C95.1857 36.2266 93.3598 38.0474 93.3598 40.2834C93.3598 42.5194 95.1857 44.3415 97.4309 44.3415H101.634V36.2266H97.4309ZM103.617 56.4084H97.4309C94.092 56.4084 91.3761 53.7021 91.3761 50.375C91.3761 47.0478 94.092 44.3415 97.4309 44.3415H103.618V56.4084H103.617ZM97.4309 46.3182C95.1857 46.3182 93.3598 48.139 93.3598 50.375C93.3598 52.611 95.187 54.4318 97.4309 54.4318H101.634V46.3182H97.4309ZM97.4633 66.5C94.1069 66.5 91.3748 63.7937 91.3748 60.4665C91.3748 57.1394 94.0907 54.4331 97.4296 54.4331H103.617V60.4007C103.617 63.7641 100.856 66.5 97.4633 66.5ZM97.4309 56.4084C96.3516 56.4098 95.317 56.8377 94.5538 57.5982C93.7906 58.3587 93.3612 59.3897 93.3598 60.4652C93.3598 62.7025 95.2005 64.522 97.4647 64.522C99.7639 64.522 101.636 62.673 101.636 60.3993V56.4084H97.4309ZM107.82 56.4084H107.688C104.349 56.4084 101.633 53.7021 101.633 50.375C101.633 47.0478 104.349 44.3415 107.688 44.3415H107.82C111.159 44.3415 113.875 47.0478 113.875 50.375C113.875 53.7021 111.159 56.4084 107.82 56.4084ZM107.689 46.3182C105.444 46.3182 103.618 48.139 103.618 50.375C103.618 52.611 105.445 54.4318 107.689 54.4318H107.821C110.067 54.4318 111.892 52.611 111.892 50.375C111.892 48.139 110.064 46.3182 107.82 46.3182H107.689Z"
+            fill="#E2E5E6"
+          />
+        </g>
+      </g>
+    </g>
+  </g>
+  <g filter="url(#filter6_i_907_33313)">
+    <g clip-path="url(#clip2_907_33313)">
+      <rect x="164.625" width="100" height="100" rx="15.1515" fill="#F8F8F8" />
+      <g filter="url(#filter7_d_907_33313)">
+        <rect
+          x="169.17"
+          y="4.54544"
+          width="90.9091"
+          height="90.9091"
+          rx="9.90295"
+          fill="url(#paint2_linear_907_33313)"
+        />
+        <rect
+          x="169.549"
+          y="4.92423"
+          width="90.1515"
+          height="90.1515"
+          rx="9.52416"
+          stroke="#E4E4E4"
+          stroke-width="0.757576"
+        />
+        <g filter="url(#filter8_i_907_33313)">
+          <path
+            d="M194.542 40.5226C194.542 38.6884 195.271 36.9293 196.568 35.6323C197.865 34.3353 199.624 33.6066 201.458 33.6066H208.036C208.72 33.6066 209.142 32.8943 208.879 32.2626C208.747 31.9521 208.642 31.6304 208.566 31.3013C207.803 27.8733 210.392 24.3853 214.138 24.3853C217.886 24.3853 220.473 27.8733 219.71 31.3013C219.634 31.6304 219.529 31.9521 219.396 32.2626C219.131 32.8943 219.555 33.6066 220.24 33.6066H224.512C226.346 33.6066 228.105 34.3353 229.402 35.6323C230.699 36.9293 231.428 38.6884 231.428 40.5226V44.7944C231.428 45.4791 232.138 45.9009 232.772 45.6381C233.083 45.509 233.401 45.3984 233.733 45.3246C237.161 44.5615 240.649 47.1481 240.649 50.8966C240.649 54.645 237.161 57.2316 233.733 56.4686C233.404 56.3927 233.082 56.2878 232.772 56.155C232.14 55.8899 231.428 56.3141 231.428 56.9988V63.5759C231.428 65.4101 230.699 67.1692 229.402 68.4662C228.105 69.7632 226.346 70.4919 224.512 70.4919H220.148C219.484 70.4919 219.057 69.821 219.249 69.1871C219.343 68.8643 219.415 68.5323 219.445 68.1865C219.506 67.4524 219.414 66.7136 219.175 66.0168C218.936 65.3199 218.556 64.6802 218.057 64.1381C217.558 63.596 216.952 63.1633 216.278 62.8673C215.603 62.5713 214.874 62.4184 214.138 62.4184C213.401 62.4184 212.672 62.5713 211.998 62.8673C211.323 63.1633 210.718 63.596 210.219 64.1381C209.72 64.6802 209.339 65.3199 209.1 66.0168C208.861 66.7136 208.77 67.4524 208.831 68.1865C208.861 68.5323 208.932 68.8643 209.029 69.1871C209.218 69.821 208.792 70.4919 208.13 70.4919H201.458C199.624 70.4919 197.865 69.7632 196.568 68.4662C195.271 67.1692 194.542 65.4101 194.542 63.5759V56.9066C194.542 56.2426 195.213 55.8162 195.847 56.0075C196.17 56.102 196.502 56.1735 196.848 56.2034C197.582 56.2647 198.321 56.173 199.018 55.9341C199.714 55.6952 200.354 55.3143 200.896 54.8156C201.438 54.3168 201.871 53.711 202.167 53.0364C202.463 52.3619 202.616 51.6332 202.616 50.8966C202.616 50.1599 202.463 49.4313 202.167 48.7567C201.871 48.0822 201.438 47.4764 200.896 46.9776C200.354 46.4788 199.714 46.098 199.018 45.8591C198.321 45.6202 197.582 45.5285 196.848 45.5897C196.502 45.6197 196.17 45.6912 195.847 45.788C195.213 45.977 194.542 45.5505 194.542 44.8889V40.5226Z"
+            fill="#DEE2E3"
+          />
+        </g>
+      </g>
+    </g>
+  </g>
+  <g opacity="0.8" filter="url(#filter9_i_907_33313)">
+    <g clip-path="url(#clip3_907_33313)">
+      <rect
+        x="296.625"
+        y="20"
+        width="60"
+        height="60"
+        rx="9.09091"
+        fill="#F8F8F8"
+      />
+      <g filter="url(#filter10_d_907_33313)">
+        <rect
+          x="299.352"
+          y="22.7272"
+          width="54.5455"
+          height="54.5455"
+          rx="5.94177"
+          fill="url(#paint3_linear_907_33313)"
+        />
+        <rect
+          x="299.579"
+          y="22.9545"
+          width="54.0909"
+          height="54.0909"
+          rx="5.7145"
+          stroke="#E4E4E4"
+          stroke-width="0.454545"
+        />
+        <g
+          clip-path="url(#clip4_907_33313)"
+          filter="url(#filter11_i_907_33313)"
+        >
+          <path
+            d="M326.658 32.0132C316.708 32.0132 308.638 40.0817 308.638 50.0332C308.638 57.995 313.801 64.7495 320.962 67.1327C321.862 67.2994 322.153 66.7407 322.153 66.2662V62.9115C317.14 64.0017 316.097 60.7851 316.097 60.7851C315.277 58.7023 314.095 58.1482 314.095 58.1482C312.46 57.0295 314.22 57.0535 314.22 57.0535C316.029 57.1796 316.981 58.9111 316.981 58.9111C318.588 61.6651 321.196 60.8692 322.225 60.4082C322.386 59.2444 322.853 58.4485 323.369 57.9995C319.367 57.5415 315.16 55.9963 315.16 49.0932C315.16 47.1245 315.864 45.5177 317.016 44.2563C316.83 43.8013 316.212 41.9678 317.191 39.487C317.191 39.487 318.705 39.0035 322.148 41.3341C323.586 40.9346 325.126 40.7349 326.658 40.7274C328.19 40.7349 329.732 40.9346 331.172 41.3341C334.612 39.0035 336.123 39.487 336.123 39.487C337.103 41.9693 336.486 43.8028 336.3 44.2563C337.456 45.5177 338.155 47.126 338.155 49.0932C338.155 56.0143 333.939 57.5385 329.927 57.9845C330.573 58.5432 331.163 59.6394 331.163 61.3212V66.2662C331.163 66.7452 331.451 67.3084 332.366 67.1312C339.521 64.745 344.678 57.992 344.678 50.0332C344.678 40.0817 336.609 32.0132 326.658 32.0132Z"
+            fill="#E2E5E6"
+          />
+        </g>
+      </g>
+    </g>
+  </g>
+  <g opacity="0.6" filter="url(#filter12_i_907_33313)">
+    <g clip-path="url(#clip5_907_33313)">
+      <rect
+        x="388.625"
+        y="30"
+        width="40"
+        height="40"
+        rx="6.06061"
+        fill="#F8F8F8"
+      />
+      <g filter="url(#filter13_d_907_33313)">
+        <rect
+          x="390.443"
+          y="31.8181"
+          width="36.3636"
+          height="36.3636"
+          rx="3.96118"
+          fill="url(#paint4_linear_907_33313)"
+        />
+        <rect
+          x="390.594"
+          y="31.9697"
+          width="36.0606"
+          height="36.0606"
+          rx="3.80966"
+          stroke="#E4E4E4"
+          stroke-width="0.30303"
+        />
+        <g filter="url(#filter14_i_907_33313)">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M414.974 43.636C411.473 40.135 405.805 40.1214 402.287 43.5952L415.015 56.3228C418.489 52.8049 418.475 47.1371 414.974 43.636ZM400.492 46.1099L412.5 58.1186C413.123 57.8201 413.719 57.4458 414.274 56.9956L401.615 44.3365C401.165 44.8912 400.79 45.487 400.492 46.1099ZM409.117 58.9858L399.625 49.4938C399.67 48.6883 399.822 47.8877 400.083 47.1155L411.495 58.5273C410.723 58.7879 409.922 58.9407 409.117 58.9858ZM402.246 56.364C400.729 54.8468 399.867 52.9227 399.66 50.9431L407.667 58.9508C405.688 58.7434 403.763 57.8811 402.246 56.364Z"
+            fill="#DEE2E3"
+          />
+        </g>
+      </g>
+    </g>
+  </g>
+  <defs>
+    <filter
+      id="filter0_i_907_33313"
+      x="0.624512"
+      y="29.798"
+      width="40"
+      height="40.202"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="-0.20202" />
+      <feGaussianBlur stdDeviation="0.707071" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_907_33313"
+      />
+    </filter>
+    <filter
+      id="filter1_d_907_33313"
+      x="0.927476"
+      y="30.808"
+      width="39.3938"
+      height="39.394"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="0.505051" />
+      <feGaussianBlur stdDeviation="0.757576" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="BackgroundImageFix"
+        result="effect1_dropShadow_907_33313"
+      />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="effect1_dropShadow_907_33313"
+        result="shape"
+      />
+    </filter>
+    <filter
+      id="filter2_i_907_33313"
+      x="8.6333"
+      y="38.0088"
+      width="24.2725"
+      height="24.2725"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dx="0.245902" dy="0.245902" />
+      <feGaussianBlur stdDeviation="0.327869" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_907_33313"
+      />
+    </filter>
+    <filter
+      id="filter3_i_907_33313"
+      x="72.6245"
+      y="19.697"
+      width="60"
+      height="60.303"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="-0.30303" />
+      <feGaussianBlur stdDeviation="1.06061" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_907_33313"
+      />
+    </filter>
+    <filter
+      id="filter4_d_907_33313"
+      x="73.0791"
+      y="21.2121"
+      width="59.0909"
+      height="59.0909"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="0.757576" />
+      <feGaussianBlur stdDeviation="1.13636" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="BackgroundImageFix"
+        result="effect1_dropShadow_907_33313"
+      />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="effect1_dropShadow_907_33313"
+        result="shape"
+      />
+    </filter>
+    <filter
+      id="filter5_i_907_33313"
+      x="84.6379"
+      y="32.0132"
+      width="36.4089"
+      height="36.4088"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dx="0.368852" dy="0.368852" />
+      <feGaussianBlur stdDeviation="0.491803" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_907_33313"
+      />
+    </filter>
+    <filter
+      id="filter6_i_907_33313"
+      x="164.625"
+      y="-0.50505"
+      width="100"
+      height="100.505"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="-0.50505" />
+      <feGaussianBlur stdDeviation="1.76768" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_907_33313"
+      />
+    </filter>
+    <filter
+      id="filter7_d_907_33313"
+      x="165.382"
+      y="2.02019"
+      width="98.4849"
+      height="98.4848"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="1.26263" />
+      <feGaussianBlur stdDeviation="1.89394" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="BackgroundImageFix"
+        result="effect1_dropShadow_907_33313"
+      />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="effect1_dropShadow_907_33313"
+        result="shape"
+      />
+    </filter>
+    <filter
+      id="filter8_i_907_33313"
+      x="194.542"
+      y="24.3853"
+      width="46.7212"
+      height="46.7213"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dx="0.614754" dy="0.614754" />
+      <feGaussianBlur stdDeviation="0.819672" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_907_33313"
+      />
+    </filter>
+    <filter
+      id="filter9_i_907_33313"
+      x="296.625"
+      y="19.697"
+      width="60"
+      height="60.303"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="-0.30303" />
+      <feGaussianBlur stdDeviation="1.06061" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_907_33313"
+      />
+    </filter>
+    <filter
+      id="filter10_d_907_33313"
+      x="297.079"
+      y="21.2121"
+      width="59.0909"
+      height="59.0909"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="0.757576" />
+      <feGaussianBlur stdDeviation="1.13636" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="BackgroundImageFix"
+        result="effect1_dropShadow_907_33313"
+      />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="effect1_dropShadow_907_33313"
+        result="shape"
+      />
+    </filter>
+    <filter
+      id="filter11_i_907_33313"
+      x="308.638"
+      y="32.0132"
+      width="36.4089"
+      height="36.4088"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dx="0.368852" dy="0.368852" />
+      <feGaussianBlur stdDeviation="0.491803" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_907_33313"
+      />
+    </filter>
+    <filter
+      id="filter12_i_907_33313"
+      x="388.625"
+      y="29.798"
+      width="40"
+      height="40.202"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="-0.20202" />
+      <feGaussianBlur stdDeviation="0.707071" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_907_33313"
+      />
+    </filter>
+    <filter
+      id="filter13_d_907_33313"
+      x="388.927"
+      y="30.808"
+      width="39.3938"
+      height="39.394"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="0.505051" />
+      <feGaussianBlur stdDeviation="0.757576" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="BackgroundImageFix"
+        result="effect1_dropShadow_907_33313"
+      />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="effect1_dropShadow_907_33313"
+        result="shape"
+      />
+    </filter>
+    <filter
+      id="filter14_i_907_33313"
+      x="396.633"
+      y="38.0088"
+      width="24.2725"
+      height="24.2725"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="BackgroundImageFix"
+        result="shape"
+      />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dx="0.245902" dy="0.245902" />
+      <feGaussianBlur stdDeviation="0.327869" />
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="shape"
+        result="effect1_innerShadow_907_33313"
+      />
+    </filter>
+    <linearGradient
+      id="paint0_linear_907_33313"
+      x1="7.49313"
+      y1="32.5757"
+      x2="28.8063"
+      y2="68.6363"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#F8F8F8" />
+      <stop offset="0.348555" stop-color="white" />
+      <stop offset="0.672956" stop-color="white" />
+      <stop offset="1" stop-color="#FAFAFA" />
+      <stop offset="1" stop-color="#F8F8F8" />
+    </linearGradient>
+    <linearGradient
+      id="paint1_linear_907_33313"
+      x1="82.9276"
+      y1="23.8636"
+      x2="114.897"
+      y2="77.9545"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#F8F8F8" />
+      <stop offset="0.348555" stop-color="white" />
+      <stop offset="0.672956" stop-color="white" />
+      <stop offset="1" stop-color="#FAFAFA" />
+      <stop offset="1" stop-color="#F8F8F8" />
+    </linearGradient>
+    <linearGradient
+      id="paint2_linear_907_33313"
+      x1="181.796"
+      y1="6.43938"
+      x2="235.079"
+      y2="96.5909"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#F8F8F8" />
+      <stop offset="0.348555" stop-color="white" />
+      <stop offset="0.672956" stop-color="white" />
+      <stop offset="1" stop-color="#FAFAFA" />
+      <stop offset="1" stop-color="#F8F8F8" />
+    </linearGradient>
+    <linearGradient
+      id="paint3_linear_907_33313"
+      x1="306.928"
+      y1="23.8636"
+      x2="338.897"
+      y2="77.9545"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#F8F8F8" />
+      <stop offset="0.348555" stop-color="white" />
+      <stop offset="0.672956" stop-color="white" />
+      <stop offset="1" stop-color="#FAFAFA" />
+      <stop offset="1" stop-color="#F8F8F8" />
+    </linearGradient>
+    <linearGradient
+      id="paint4_linear_907_33313"
+      x1="395.493"
+      y1="32.5757"
+      x2="416.806"
+      y2="68.6363"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="#F8F8F8" />
+      <stop offset="0.348555" stop-color="white" />
+      <stop offset="0.672956" stop-color="white" />
+      <stop offset="1" stop-color="#FAFAFA" />
+      <stop offset="1" stop-color="#F8F8F8" />
+    </linearGradient>
+    <clipPath id="clip0_907_33313">
+      <rect
+        x="0.624512"
+        y="30"
+        width="40"
+        height="40"
+        rx="6.06061"
+        fill="white"
+      />
+    </clipPath>
+    <clipPath id="clip1_907_33313">
+      <rect
+        x="72.6245"
+        y="20"
+        width="60"
+        height="60"
+        rx="9.09091"
+        fill="white"
+      />
+    </clipPath>
+    <clipPath id="clip2_907_33313">
+      <rect x="164.625" width="100" height="100" rx="15.1515" fill="white" />
+    </clipPath>
+    <clipPath id="clip3_907_33313">
+      <rect
+        x="296.625"
+        y="20"
+        width="60"
+        height="60"
+        rx="9.09091"
+        fill="white"
+      />
+    </clipPath>
+    <clipPath id="clip4_907_33313">
+      <rect
+        width="36.0399"
+        height="36.0399"
+        fill="white"
+        transform="translate(308.638 32.0132)"
+      />
+    </clipPath>
+    <clipPath id="clip5_907_33313">
+      <rect
+        x="388.625"
+        y="30"
+        width="40"
+        height="40"
+        rx="6.06061"
+        fill="white"
+      />
+    </clipPath>
+  </defs>
+</svg>`;
diff --git a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/index.tsx
index f28d62e7e7..9bca67907d 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/workspace-setting/index.tsx
@@ -1,18 +1,27 @@
 import type { WorkspaceMetadata } from '@affine/workspace/metadata';
 
 import { useIsWorkspaceOwner } from '../../../../hooks/affine/use-is-workspace-owner';
+import { ExperimentalFeatures } from './experimental-features';
 import { WorkspaceSettingDetail } from './new-workspace-setting-detail';
 
 export const WorkspaceSetting = ({
   workspaceMetadata,
+  subTab,
 }: {
   workspaceMetadata: WorkspaceMetadata;
+  subTab: 'preference' | 'experimental-features';
 }) => {
   const isOwner = useIsWorkspaceOwner(workspaceMetadata);
-  return (
-    <WorkspaceSettingDetail
-      workspaceMetadata={workspaceMetadata}
-      isOwner={isOwner}
-    />
-  );
+
+  switch (subTab) {
+    case 'preference':
+      return (
+        <WorkspaceSettingDetail
+          workspaceMetadata={workspaceMetadata}
+          isOwner={isOwner}
+        />
+      );
+    case 'experimental-features':
+      return <ExperimentalFeatures />;
+  }
 };
diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx
index b924574cc2..91164deb48 100644
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx
@@ -141,7 +141,7 @@ export const AFFiNEWorkspaceList = ({
     (workspaceMetadata: WorkspaceMetadata) => {
       setOpenSettingModalAtom({
         open: true,
-        activeTab: 'workspace',
+        activeTab: 'workspace:preference',
         workspaceMetadata,
       });
       onEventEnd?.();
diff --git a/packages/frontend/core/src/hooks/use-workspace-features.ts b/packages/frontend/core/src/hooks/use-workspace-features.ts
new file mode 100644
index 0000000000..c207cc1ef0
--- /dev/null
+++ b/packages/frontend/core/src/hooks/use-workspace-features.ts
@@ -0,0 +1,74 @@
+import { WorkspaceFlavour } from '@affine/env/workspace';
+import type { FeatureType } from '@affine/graphql';
+import {
+  availableFeaturesQuery,
+  enabledFeaturesQuery,
+  setWorkspaceExperimentalFeatureMutation,
+} from '@affine/graphql';
+import { useAtomValue } from 'jotai';
+
+import { waitForCurrentWorkspaceAtom } from '../modules/workspace';
+import { useAsyncCallback } from './affine-async-hooks';
+import { useMutateQueryResource, useMutation } from './use-mutation';
+import { useQueryImmutable } from './use-query';
+
+const emptyFeatures: FeatureType[] = [];
+
+export const useWorkspaceAvailableFeatures = () => {
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
+  const isCloudWorkspace =
+    currentWorkspace.flavour === WorkspaceFlavour.AFFINE_CLOUD;
+  const { data } = useQueryImmutable(
+    isCloudWorkspace
+      ? {
+          query: availableFeaturesQuery,
+          variables: {
+            id: currentWorkspace.id,
+          },
+        }
+      : undefined
+  );
+  return data?.workspace.availableFeatures ?? emptyFeatures;
+};
+
+export const useWorkspaceEnabledFeatures = () => {
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
+  const isCloudWorkspace =
+    currentWorkspace.flavour === WorkspaceFlavour.AFFINE_CLOUD;
+  const { data } = useQueryImmutable(
+    isCloudWorkspace
+      ? {
+          query: enabledFeaturesQuery,
+          variables: {
+            id: currentWorkspace.id,
+          },
+        }
+      : undefined
+  );
+  return data?.workspace.features ?? emptyFeatures;
+};
+
+export const useSetWorkspaceFeature = () => {
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
+  const { trigger, isMutating } = useMutation({
+    mutation: setWorkspaceExperimentalFeatureMutation,
+  });
+  const revalidate = useMutateQueryResource();
+
+  return {
+    trigger: useAsyncCallback(
+      async (feature: FeatureType, enable: boolean) => {
+        await trigger({
+          workspaceId: currentWorkspace.id,
+          feature,
+          enable,
+        });
+        await revalidate(enabledFeaturesQuery, vars => {
+          return vars.id === currentWorkspace.id;
+        });
+      },
+      [currentWorkspace.id, revalidate, trigger]
+    ),
+    isMutating,
+  };
+};
diff --git a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/atoms.ts b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/atoms.ts
index f26511d258..fb179f6e4a 100644
--- a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/atoms.ts
+++ b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/atoms.ts
@@ -40,10 +40,9 @@ const activeExtensionAtom = selectAtom(
 );
 const widthAtom = selectAtom(baseStateAtom, state => state.width);
 
-export const editorExtensionsAtom = selectAtom(baseStateAtom, state =>
-  state.extensions.filter(e => {
-    return e.name !== 'copilot' || runtimeConfig.enableCopilot;
-  })
+export const editorExtensionsAtom = selectAtom(
+  baseStateAtom,
+  state => state.extensions
 );
 
 // get/set sidebar open state
diff --git a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/extensions.tsx b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/extensions.tsx
index 01c0a07221..1c6ec27857 100644
--- a/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/extensions.tsx
+++ b/packages/frontend/core/src/pages/workspace/detail-page/editor-sidebar/extensions/extensions.tsx
@@ -1,6 +1,9 @@
 import { IconButton } from '@affine/component';
+import { useWorkspaceEnabledFeatures } from '@affine/core/hooks/use-workspace-features';
+import { FeatureType } from '@affine/graphql';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { useAtom, useAtomValue } from 'jotai';
+import { useEffect } from 'react';
 
 import {
   editorExtensionsAtom,
@@ -11,13 +14,25 @@ import * as styles from './extensions.css';
 // provide a switcher for active extensions
 // will be used in global top header (MacOS) or sidebar (Windows)
 export const ExtensionTabs = () => {
-  const exts = useAtomValue(editorExtensionsAtom);
+  // todo: filter in editorExtensionsAtom instead?
+  const copilotEnabled = useWorkspaceEnabledFeatures().includes(
+    FeatureType.Copilot
+  );
+  const exts = useAtomValue(editorExtensionsAtom).filter(ext => {
+    if (ext.name === 'copilot' && !copilotEnabled) return false;
+    return true;
+  });
   const [selected, setSelected] = useAtom(editorSidebarActiveExtensionAtom);
   const vars = assignInlineVars({
     [styles.activeIdx]: String(
       exts.findIndex(ext => ext.name === selected?.name) ?? 0
     ),
   });
+  useEffect(() => {
+    if (!selected || !exts.some(e => selected.name === e.name)) {
+      setSelected(exts[0].name);
+    }
+  }, [exts, selected, setSelected]);
   return (
     <div className={styles.switchRoot} style={vars}>
       {exts.map(extension => {
diff --git a/packages/frontend/graphql/src/graphql/index.ts b/packages/frontend/graphql/src/graphql/index.ts
index f357782539..19d3ff334e 100644
--- a/packages/frontend/graphql/src/graphql/index.ts
+++ b/packages/frontend/graphql/src/graphql/index.ts
@@ -780,6 +780,19 @@ mutation uploadAvatar($avatar: Upload!) {
 }`,
 };
 
+export const enabledFeaturesQuery = {
+  id: 'enabledFeaturesQuery' as const,
+  operationName: 'enabledFeatures',
+  definitionName: 'workspace',
+  containsFile: false,
+  query: `
+query enabledFeatures($id: String!) {
+  workspace(id: $id) {
+    features
+  }
+}`,
+};
+
 export const availableFeaturesQuery = {
   id: 'availableFeaturesQuery' as const,
   operationName: 'availableFeatures',
diff --git a/packages/frontend/graphql/src/graphql/workspace-enabled-features.gql b/packages/frontend/graphql/src/graphql/workspace-enabled-features.gql
new file mode 100644
index 0000000000..837dddc86c
--- /dev/null
+++ b/packages/frontend/graphql/src/graphql/workspace-enabled-features.gql
@@ -0,0 +1,5 @@
+query enabledFeatures($id: String!) {
+  workspace(id: $id) {
+    features
+  }
+}
diff --git a/packages/frontend/graphql/src/schema.ts b/packages/frontend/graphql/src/schema.ts
index fb9ad9beae..40975525f3 100644
--- a/packages/frontend/graphql/src/schema.ts
+++ b/packages/frontend/graphql/src/schema.ts
@@ -749,6 +749,15 @@ export type UploadAvatarMutation = {
   };
 };
 
+export type EnabledFeaturesQueryVariables = Exact<{
+  id: Scalars['String']['input'];
+}>;
+
+export type EnabledFeaturesQuery = {
+  __typename?: 'Query';
+  workspace: { __typename?: 'WorkspaceType'; features: Array<FeatureType> };
+};
+
 export type AvailableFeaturesQueryVariables = Exact<{
   id: Scalars['String']['input'];
 }>;
@@ -967,6 +976,11 @@ export type Queries =
       variables: SubscriptionQueryVariables;
       response: SubscriptionQuery;
     }
+  | {
+      name: 'enabledFeaturesQuery';
+      variables: EnabledFeaturesQueryVariables;
+      response: EnabledFeaturesQuery;
+    }
   | {
       name: 'availableFeaturesQuery';
       variables: AvailableFeaturesQueryVariables;
diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json
index 98f484ba7d..1b7847b985 100644
--- a/packages/frontend/i18n/src/resources/en.json
+++ b/packages/frontend/i18n/src/resources/en.json
@@ -875,6 +875,14 @@
   "com.affine.settings.workspace.not-owner": "Only an owner can edit the the Workspace avatar and name.Changes will be shown for everyone.",
   "com.affine.settings.workspace.publish-tooltip": "Enable AFFiNE Cloud to publish this Workspace",
   "com.affine.settings.workspace.storage.tip": "Click to move storage location.",
+  "com.affine.settings.workspace.experimental-features.prompt-header": "Do you want to use the plugin system that is in an experimental stage?",
+  "com.affine.settings.workspace.experimental-features.prompt-warning-title": "WARNING MESSAGE",
+  "com.affine.settings.workspace.experimental-features.prompt-warning": "You are about to enable an experimental feature. This feature is still in development and may contain errors or behave unpredictably. Please proceed with caution and at your own risk.",
+  "com.affine.settings.workspace.experimental-features.prompt-disclaimer": "I am aware of the risks, and I am willing to continue to use it.",
+  "com.affine.settings.workspace.experimental-features.get-started": "Get Started",
+  "com.affine.settings.workspace.experimental-features.header.plugins": "Experimental Features",
+  "com.affine.settings.workspace.preferences": "Preference",
+  "com.affine.settings.workspace.experimental-features": "Plugins",
   "com.affine.share-menu.EnableCloudDescription": "Sharing page requires AFFiNE Cloud.",
   "com.affine.share-menu.ShareMode": "Share mode",
   "com.affine.share-menu.SharePage": "Share Page",