snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

packages/frontend/apps/electron-renderer/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@affine/electron-renderer",
+  "private": true,
+  "version": "0.27.5",
+  "type": "module",
+  "scripts": {
+    "build": "affine bundle",
+    "dev": "affine bundle --dev"
+  },
+  "dependencies": {
+    "@affine/component": "workspace:*",
+    "@affine/core": "workspace:*",
+    "@affine/debug": "workspace:*",
+    "@affine/electron-api": "workspace:*",
+    "@affine/i18n": "workspace:*",
+    "@affine/nbstore": "workspace:*",
+    "@affine/track": "workspace:*",
+    "@blocksuite/affine": "workspace:*",
+    "@emotion/react": "^11.14.0",
+    "@toeverything/infra": "workspace:*",
+    "@toeverything/theme": "^1.1.23",
+    "@vanilla-extract/css": "^1.17.0",
+    "next-themes": "^0.4.4",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "react-router-dom": "^6.30.4",
+    "uuid": "^14.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
+    "typescript": "npm:@typescript/typescript6@6.0.2"
+  }
+}

packages/frontend/apps/electron-renderer/src/app/app.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const fallback = style({
+  paddingTop: 52,
+});

packages/frontend/apps/electron-renderer/src/app/app.tsx

@@ -0,0 +1,76 @@
+import { AffineContext } from '@affine/core/components/context';
+import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
+import { AppContainer } from '@affine/core/desktop/components/app-container';
+import { router } from '@affine/core/desktop/router';
+import { I18nProvider } from '@affine/core/modules/i18n';
+import createEmotionCache from '@affine/core/utils/create-emotion-cache';
+import { CacheProvider } from '@emotion/react';
+import { FrameworkRoot, getCurrentStore } from '@toeverything/infra';
+import { Suspense, useEffect } from 'react';
+import { RouterProvider } from 'react-router-dom';
+
+import { setupEffects, useIsOnBattery } from './effects';
+import { DesktopLanguageSync } from './language-sync';
+import { DesktopThemeSync } from './theme-sync';
+
+const { frameworkProvider } = setupEffects();
+
+const desktopWhiteList = [
+  '/open-app/signin-redirect',
+  '/open-app/url',
+  '/upgrade-success',
+  '/ai-upgrade-success',
+  '/share',
+  '/oauth',
+  '/magic-link',
+];
+if (
+  !BUILD_CONFIG.isElectron &&
+  BUILD_CONFIG.debug &&
+  desktopWhiteList.every(path => !location.pathname.startsWith(path))
+) {
+  document.body.innerHTML = `<h1 style="color:red;font-size:5rem;text-align:center;">Don't run electron entry in browser.</h1>`;
+  throw new Error('Wrong distribution');
+}
+
+const cache = createEmotionCache();
+
+const future = {
+  v7_startTransition: true,
+} as const;
+
+export function App() {
+  const isOnBattery = useIsOnBattery();
+
+  useEffect(() => {
+    document.body.classList.toggle('on-battery', isOnBattery);
+    return () => {
+      document.body.classList.remove('on-battery');
+    };
+  }, [isOnBattery]);
+
+  return (
+    <Suspense>
+      <FrameworkRoot framework={frameworkProvider}>
+        <CacheProvider value={cache}>
+          <I18nProvider>
+            <AffineContext store={getCurrentStore()}>
+              <DesktopThemeSync />
+              <DesktopLanguageSync />
+              <RouterProvider
+                fallbackElement={<AppContainer fallback />}
+                router={router}
+                future={future}
+              />
+              {environment.isWindows && (
+                <div style={{ position: 'fixed', right: 0, top: 0, zIndex: 5 }}>
+                  <WindowsAppControls />
+                </div>
+              )}
+            </AffineContext>
+          </I18nProvider>
+        </CacheProvider>
+      </FrameworkRoot>
+    </Suspense>
+  );
+}

packages/frontend/apps/electron-renderer/src/app/effects/events.ts

@@ -0,0 +1,76 @@
+import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
+import type { SettingTab } from '@affine/core/modules/dialogs/constant';
+import { DocsService } from '@affine/core/modules/doc';
+import { JournalService } from '@affine/core/modules/journal';
+import { LifecycleService } from '@affine/core/modules/lifecycle';
+import { WorkbenchService } from '@affine/core/modules/workbench';
+import { apis, events } from '@affine/electron-api';
+import type { FrameworkProvider } from '@toeverything/infra';
+
+import { setupRecordingEvents } from './recording';
+import { getCurrentWorkspace } from './utils';
+
+export function setupEvents(frameworkProvider: FrameworkProvider) {
+  // setup application lifecycle events, and emit application start event
+  window.addEventListener('focus', () => {
+    frameworkProvider.get(LifecycleService).applicationFocus();
+  });
+  frameworkProvider.get(LifecycleService).applicationStart();
+
+  events?.applicationMenu.openInSettingModal(({ activeTab, scrollAnchor }) => {
+    using currentWorkspace = getCurrentWorkspace(frameworkProvider);
+    if (!currentWorkspace) {
+      return;
+    }
+    const { workspace } = currentWorkspace;
+    const workspaceDialogService = workspace.scope.get(WorkspaceDialogService);
+    // close all other dialogs first
+    workspaceDialogService.closeAll();
+    workspaceDialogService.open('setting', {
+      activeTab: activeTab as unknown as SettingTab,
+      scrollAnchor,
+    });
+  });
+
+  events?.applicationMenu.onNewPageAction(type => {
+    apis?.ui
+      .isActiveTab()
+      .then(isActive => {
+        if (!isActive) {
+          return;
+        }
+        using currentWorkspace = getCurrentWorkspace(frameworkProvider);
+        if (!currentWorkspace) {
+          return;
+        }
+        const { workspace } = currentWorkspace;
+        const docsService = workspace.scope.get(DocsService);
+
+        const page =
+          type === 'default'
+            ? docsService.createDoc()
+            : docsService.createDoc({ primaryMode: type });
+        workspace.scope.get(WorkbenchService).workbench.openDoc(page.id);
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  });
+
+  events?.applicationMenu.onOpenJournal(() => {
+    using currentWorkspace = getCurrentWorkspace(frameworkProvider);
+    if (!currentWorkspace) {
+      return;
+    }
+    const { workspace, dispose } = currentWorkspace;
+
+    const workbench = workspace.scope.get(WorkbenchService).workbench;
+    const journalService = workspace.scope.get(JournalService);
+    const docId = journalService.ensureJournalByDate(new Date()).id;
+    workbench.openDoc(docId);
+
+    dispose();
+  });
+
+  setupRecordingEvents(frameworkProvider);
+}

packages/frontend/apps/electron-renderer/src/app/effects/index.ts

@@ -0,0 +1,14 @@
+import { setupEvents } from './events';
+import { setupModules } from './modules';
+import { setupPowerSourceStore } from './power';
+import { setupStoreManager } from './store-manager';
+
+export function setupEffects() {
+  const { framework, frameworkProvider } = setupModules();
+  setupStoreManager(framework);
+  setupEvents(frameworkProvider);
+  setupPowerSourceStore();
+  return { framework, frameworkProvider };
+}
+
+export { useIsOnBattery } from './power';

packages/frontend/apps/electron-renderer/src/app/effects/modules.ts

@@ -0,0 +1,134 @@
+import { notify } from '@affine/component';
+import { configureElectronStateStorageImpls } from '@affine/core/desktop/storage';
+import { configureCommonModules } from '@affine/core/modules';
+import { configureAppTabsHeaderModule } from '@affine/core/modules/app-tabs-header';
+import { configureDesktopBackupModule } from '@affine/core/modules/backup';
+import {
+  AuthProvider,
+  ServerScope,
+  ServerService,
+  ValidatorProvider,
+} from '@affine/core/modules/cloud';
+import {
+  configureDesktopApiModule,
+  DesktopApiService,
+} from '@affine/core/modules/desktop-api';
+import {
+  configureSpellCheckSettingModule,
+  configureTraySettingModule,
+} from '@affine/core/modules/editor-setting';
+import { configureFindInPageModule } from '@affine/core/modules/find-in-page';
+import {
+  ClientSchemeProvider,
+  PopupWindowProvider,
+} from '@affine/core/modules/url';
+import { configureDesktopWorkbenchModule } from '@affine/core/modules/workbench';
+import { configureBrowserWorkspaceFlavours } from '@affine/core/modules/workspace-engine';
+import { Framework } from '@toeverything/infra';
+
+function notifySessionOnlySignIn(sessionOnly?: boolean) {
+  if (!sessionOnly) return;
+
+  notify.warning({
+    title: 'Sign-in is only valid for this session',
+    message:
+      'Encrypted storage is unavailable, so you will need to sign in again after restarting AFFiNE.',
+  });
+}
+
+export function setupModules() {
+  const framework = new Framework();
+  configureCommonModules(framework);
+  configureElectronStateStorageImpls(framework);
+  configureBrowserWorkspaceFlavours(framework);
+  configureDesktopWorkbenchModule(framework);
+  configureAppTabsHeaderModule(framework);
+  configureFindInPageModule(framework);
+  configureDesktopApiModule(framework);
+  configureSpellCheckSettingModule(framework);
+  configureTraySettingModule(framework);
+  configureDesktopBackupModule(framework);
+
+  framework.impl(PopupWindowProvider, p => {
+    const apis = p.get(DesktopApiService).api;
+    return {
+      open: (url: string) => {
+        apis.handler.ui.openExternal(url).catch(e => {
+          console.error('Failed to open external URL', e);
+        });
+      },
+    };
+  });
+  framework.impl(ClientSchemeProvider, p => {
+    const appInfo = p.get(DesktopApiService).appInfo;
+    return {
+      getClientScheme() {
+        return appInfo?.scheme;
+      },
+    };
+  });
+  framework.impl(ValidatorProvider, p => {
+    const apis = p.get(DesktopApiService).api;
+    return {
+      async validate(_challenge, resource) {
+        const token = await apis.handler.ui.getChallengeResponse(resource);
+        if (!token) {
+          throw new Error('Challenge failed');
+        }
+        return token;
+      },
+    };
+  });
+  framework.scope(ServerScope).override(AuthProvider, p => {
+    const apis = p.get(DesktopApiService).api;
+    const serverService = p.get(ServerService);
+    const endpoint = serverService.server.baseUrl;
+
+    return {
+      async signInMagicLink(email, token, clientNonce) {
+        const result = await apis.handler.auth.signInMagicLink(
+          endpoint,
+          email,
+          token,
+          clientNonce
+        );
+        notifySessionOnlySignIn(result.sessionOnly);
+      },
+      async signInOauth(code, state, _provider, clientNonce) {
+        const result = await apis.handler.auth.signInOauth(
+          endpoint,
+          code,
+          state,
+          clientNonce
+        );
+        notifySessionOnlySignIn(result.sessionOnly);
+        return result;
+      },
+      async signInPassword(credential) {
+        const result = await apis.handler.auth.signInPassword(
+          endpoint,
+          credential
+        );
+        notifySessionOnlySignIn(result.sessionOnly);
+        return result;
+      },
+      async signInOpenAppSignInCode(code) {
+        const result = await apis.handler.auth.signInOpenAppSignInCode(
+          endpoint,
+          code
+        );
+        notifySessionOnlySignIn(result.sessionOnly);
+      },
+      async signOut() {
+        await apis.handler.auth.signOut(endpoint);
+      },
+      async clearSession() {
+        await apis.handler.auth.clearSession(endpoint);
+      },
+    };
+  });
+
+  const frameworkProvider = framework.provider();
+
+  return { framework, frameworkProvider };
+}

packages/frontend/apps/electron-renderer/src/app/effects/power.ts

@@ -0,0 +1,54 @@
+import { useSyncExternalStore } from 'react';
+
+type Listener = () => void;
+
+let snapshot = false;
+let teardown: (() => void) | null = null;
+const listeners = new Set<Listener>();
+
+function emitChange() {
+  listeners.forEach(listener => listener());
+}
+
+function handlePowerSourceChange(isOnBattery: boolean) {
+  if (snapshot === isOnBattery) return;
+  snapshot = isOnBattery;
+  emitChange();
+}
+
+function ensureSubscribed() {
+  if (teardown) return;
+  if (typeof window === 'undefined') return;
+
+  const subscribePowerSource = window.__apis?.events?.power?.['power-source'];
+  if (typeof subscribePowerSource !== 'function') return;
+
+  const unsubscribe = subscribePowerSource(handlePowerSourceChange);
+  teardown = typeof unsubscribe === 'function' ? unsubscribe : null;
+}
+
+function subscribe(listener: Listener) {
+  listeners.add(listener);
+  if (listeners.size === 1) {
+    ensureSubscribed();
+  }
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) {
+      teardown?.();
+      teardown = null;
+    }
+  };
+}
+
+export function setupPowerSourceStore() {
+  ensureSubscribed();
+}
+
+export function getIsOnBatterySnapshot() {
+  return snapshot;
+}
+
+export function useIsOnBattery() {
+  return useSyncExternalStore(subscribe, getIsOnBatterySnapshot, () => false);
+}

packages/frontend/apps/electron-renderer/src/app/effects/recording.ts

@@ -0,0 +1,412 @@
+import type { DocProps } from '@affine/core/blocksuite/initialization';
+import { DocsService } from '@affine/core/modules/doc';
+import { AudioAttachmentService } from '@affine/core/modules/media/services/audio-attachment';
+import { WorkbenchService } from '@affine/core/modules/workbench';
+import { DebugLogger } from '@affine/debug';
+import { apis, events } from '@affine/electron-api';
+import { i18nTime } from '@affine/i18n';
+import track from '@affine/track';
+import type { AttachmentBlockModel } from '@blocksuite/affine/model';
+import type { Store } from '@blocksuite/affine/store';
+import type { BlobEngine } from '@blocksuite/affine/sync';
+import type { FrameworkProvider } from '@toeverything/infra';
+
+import { getCurrentWorkspace, isAiEnabled } from './utils';
+
+const logger = new DebugLogger('electron-renderer:recording');
+const RECORDING_IMPORT_RETRY_MS = 1000;
+const NATIVE_RECORDING_MIME_TYPE = 'audio/ogg';
+const TRANSCRIPTION_BLOCK_FLAVOUR = 'affine:transcription';
+
+type TranscriptionBlockModel = {
+  props: {
+    transcription: {
+      sourceAudio?: {
+        mimeType?: string;
+        durationMs?: number;
+        sampleRate?: number;
+        channels?: number;
+      };
+      quality?: { degraded?: boolean; overflowCount?: number };
+    };
+  };
+};
+
+type RecordingImportStatus = {
+  id: number;
+  appName?: string;
+  workspaceId?: string;
+  docId?: string;
+  filepath: string;
+  startTime: number;
+  sampleRate?: number;
+  numberOfChannels?: number;
+  durationMs?: number;
+  size?: number;
+  degraded?: boolean;
+  overflowCount?: number;
+  errorMessage?: string;
+  importStatus: 'pending_import' | 'importing' | 'imported' | 'import_failed';
+  createdAt: number;
+  updatedAt: number;
+};
+
+type WorkspaceHandle = NonNullable<ReturnType<typeof getCurrentWorkspace>>;
+
+async function readRecordingFile(filepath: string) {
+  if (apis?.recording?.readRecordingFile) {
+    try {
+      return await apis.recording.readRecordingFile(filepath);
+    } catch (error) {
+      logger.error(
+        'Failed to read recording file via IPC, fallback to fetch',
+        error
+      );
+    }
+  }
+
+  const fileUrl = new URL(
+    filepath,
+    typeof location !== 'undefined' && location.protocol === 'assets:'
+      ? 'assets://local-file'
+      : location.origin
+  );
+  const response = await fetch(fileUrl);
+  if (!response.ok) {
+    throw new Error(
+      `Failed to fetch recording file: ${response.status} ${response.statusText}`
+    );
+  }
+  return response.arrayBuffer();
+}
+
+async function saveRecordingBlob(blobEngine: BlobEngine, filepath: string) {
+  logger.debug('Saving recording', filepath);
+  const opusBuffer = await readRecordingFile(filepath);
+  const blob = new Blob([opusBuffer], {
+    type: NATIVE_RECORDING_MIME_TYPE,
+  });
+  const blobId = await blobEngine.set(blob);
+  logger.debug('Recording saved', blobId);
+  return { blob, blobId };
+}
+
+function getAttachmentName(status: RecordingImportStatus) {
+  const timestamp = i18nTime(status.startTime, {
+    absolute: {
+      accuracy: 'minute',
+      noYear: true,
+    },
+  });
+
+  return {
+    timestamp,
+    attachmentName:
+      (status.appName ?? 'System Audio') + ' ' + timestamp + '.opus',
+  };
+}
+
+function ensureNoteId(docStore: Store) {
+  const [existingNote] = docStore.getModelsByFlavour('affine:note');
+  if (existingNote) {
+    return existingNote.id;
+  }
+
+  const [page] = docStore.getModelsByFlavour('affine:page');
+  if (!page) {
+    throw new Error('Recording doc is missing the page block');
+  }
+
+  return docStore.addBlock('affine:note', {}, page.id);
+}
+
+function findExistingAttachment(docStore: Store, attachmentName: string) {
+  return (
+    docStore.getModelsByFlavour('affine:attachment') as AttachmentBlockModel[]
+  ).find(
+    model =>
+      model.props.name === attachmentName &&
+      model.props.type === NATIVE_RECORDING_MIME_TYPE
+  );
+}
+
+function ensureTranscriptionBlock(model: AttachmentBlockModel) {
+  for (const key of model.childMap.value.keys()) {
+    const block = model.store.getBlock$(key);
+    if (block?.flavour === TRANSCRIPTION_BLOCK_FLAVOUR) {
+      return block.model as unknown as TranscriptionBlockModel;
+    }
+  }
+
+  const blockId = model.store.addBlock(
+    TRANSCRIPTION_BLOCK_FLAVOUR,
+    { transcription: {} },
+    model.id
+  );
+
+  const block = model.store.getBlock(blockId)?.model as
+    | TranscriptionBlockModel
+    | undefined;
+  if (!block) {
+    throw new Error('Failed to create transcription block');
+  }
+  return block;
+}
+
+async function createRecordingDoc(
+  frameworkProvider: FrameworkProvider,
+  workspace: WorkspaceHandle['workspace'],
+  status: RecordingImportStatus
+) {
+  if (!status.docId) {
+    throw new Error('Recording import is missing docId');
+  }
+
+  const docsService = workspace.scope.get(DocsService);
+  const aiEnabled = isAiEnabled(frameworkProvider);
+  const { attachmentName, timestamp } = getAttachmentName(status);
+  const targetDocId = status.docId;
+  const docExists = !!docsService.list.doc$(targetDocId).value;
+
+  if (!docExists) {
+    const docProps: DocProps = {};
+    docsService.createDoc({
+      id: targetDocId,
+      docProps,
+      title:
+        'Recording ' + (status.appName ?? 'System Audio') + ' ' + timestamp,
+      primaryMode: 'page',
+    });
+  }
+
+  const { doc, release } = docsService.open(targetDocId);
+  const disposePriorityLoad = doc.addPriorityLoad(10);
+
+  try {
+    try {
+      await doc.waitForSyncReady();
+    } finally {
+      disposePriorityLoad();
+    }
+
+    const noteId = ensureNoteId(doc.blockSuiteDoc);
+    const existingAttachment = findExistingAttachment(
+      doc.blockSuiteDoc,
+      attachmentName
+    );
+
+    let model = existingAttachment;
+    let attachmentCreated = false;
+
+    if (!model) {
+      const { blobId, blob } = await saveRecordingBlob(
+        workspace.docCollection.blobSync,
+        status.filepath
+      );
+
+      const attachmentId = doc.blockSuiteDoc.addBlock(
+        'affine:attachment',
+        {
+          name: attachmentName,
+          type: NATIVE_RECORDING_MIME_TYPE,
+          size: blob.size,
+          sourceId: blobId,
+          embed: true,
+        },
+        noteId
+      );
+
+      model = doc.blockSuiteDoc.getBlock(attachmentId)?.model as
+        | AttachmentBlockModel
+        | undefined;
+      if (!model) {
+        throw new Error('Failed to create recording attachment');
+      }
+      attachmentCreated = true;
+    }
+
+    const transcriptionBlock = ensureTranscriptionBlock(model);
+    transcriptionBlock.props.transcription = {
+      sourceAudio: {
+        mimeType: model.props.type,
+        durationMs: status.durationMs,
+        sampleRate: status.sampleRate,
+        channels: status.numberOfChannels,
+      },
+      quality: {
+        degraded: status.degraded,
+        overflowCount: status.overflowCount,
+      },
+    };
+
+    workspace.scope.get(WorkbenchService).workbench.openDoc(targetDocId);
+
+    if (!aiEnabled || !attachmentCreated) {
+      return;
+    }
+
+    using currentWorkspace = getCurrentWorkspace(frameworkProvider);
+    if (!currentWorkspace) {
+      return;
+    }
+    const { workspace: currentWorkspaceEntity } = currentWorkspace;
+    using audioAttachment = currentWorkspaceEntity.scope
+      .get(AudioAttachmentService)
+      .get(model);
+    audioAttachment?.obj
+      .transcribe()
+      .then(() => {
+        track.doc.editor.audioBlock.transcribeRecording({
+          type: 'Meeting record',
+          method: 'success',
+          option: 'Auto transcribing',
+        });
+      })
+      .catch(err => {
+        logger.error('Failed to transcribe recording', err);
+      });
+  } finally {
+    release();
+  }
+}
+
+export function setupRecordingEvents(frameworkProvider: FrameworkProvider) {
+  let importQueue: RecordingImportStatus[] = [];
+  let retryTimer: ReturnType<typeof setTimeout> | null = null;
+  let isProcessingImport = false;
+  let hasSeenLiveQueueUpdate = false;
+
+  const clearRetry = () => {
+    if (retryTimer !== null) {
+      clearTimeout(retryTimer);
+      retryTimer = null;
+    }
+  };
+
+  const updateQueue = (nextQueue: RecordingImportStatus[]) => {
+    importQueue = nextQueue;
+  };
+
+  const scheduleRetry = () => {
+    if (importQueue.length === 0 || retryTimer !== null) {
+      return;
+    }
+    retryTimer = setTimeout(() => {
+      retryTimer = null;
+      void processNextImport().catch(console.error);
+    }, RECORDING_IMPORT_RETRY_MS);
+  };
+
+  const processNextImport = async () => {
+    if (isProcessingImport) {
+      return;
+    }
+
+    isProcessingImport = true;
+    try {
+      let isActiveTab = false;
+      try {
+        isActiveTab = !!(await apis?.ui.isActiveTab());
+      } catch (error) {
+        logger.error('Failed to probe active recording tab', error);
+        return;
+      }
+
+      if (!isActiveTab) {
+        return;
+      }
+
+      using currentWorkspace = getCurrentWorkspace(frameworkProvider);
+      if (!currentWorkspace) {
+        return;
+      }
+
+      const workspaceId = currentWorkspace.workspace.id;
+      const nextStatus =
+        importQueue.find(
+          status =>
+            status.importStatus === 'pending_import' &&
+            (!status.workspaceId || status.workspaceId === workspaceId)
+        ) ??
+        importQueue.find(
+          status =>
+            status.importStatus === 'importing' &&
+            status.workspaceId === workspaceId
+        ) ??
+        null;
+
+      if (!nextStatus) {
+        return;
+      }
+
+      const claimed = await apis?.recording.claimRecordingImport(
+        nextStatus.id,
+        workspaceId
+      );
+      if (!claimed) {
+        return;
+      }
+
+      try {
+        await createRecordingDoc(
+          frameworkProvider,
+          currentWorkspace.workspace,
+          claimed
+        );
+      } catch (error) {
+        const importError =
+          error instanceof Error
+            ? error
+            : new Error('Failed to import recording artifact');
+        logger.error('Failed to import recording artifact', importError);
+        await apis?.recording.failRecordingImport(
+          nextStatus.id,
+          importError.message
+        );
+        return;
+      }
+
+      try {
+        await apis?.recording.completeRecordingImport(nextStatus.id);
+      } catch (error) {
+        const completionError =
+          error instanceof Error
+            ? error
+            : new Error('Failed to persist recording import completion');
+        logger.error(
+          'Failed to persist recording import completion',
+          completionError
+        );
+        await apis?.recording.failRecordingImport(
+          nextStatus.id,
+          completionError.message
+        );
+      }
+    } finally {
+      isProcessingImport = false;
+      scheduleRetry();
+    }
+  };
+
+  if (apis?.recording) {
+    void apis.recording
+      .getRecordingImportQueue()
+      .then(queue => {
+        if (hasSeenLiveQueueUpdate) {
+          return;
+        }
+        updateQueue(queue ?? []);
+        void processNextImport().catch(console.error);
+      })
+      .catch(error => {
+        logger.error('Failed to load recording import queue', error);
+      });
+  }
+
+  events?.recording.onRecordingImportQueueChanged(queue => {
+    hasSeenLiveQueueUpdate = true;
+    updateQueue(queue);
+    clearRetry();
+    void processNextImport().catch(console.error);
+  });
+}

packages/frontend/apps/electron-renderer/src/app/effects/store-manager.ts

@@ -0,0 +1,74 @@
+import { NbstoreProvider } from '@affine/core/modules/storage';
+import { apis } from '@affine/electron-api';
+import { StoreManagerClient } from '@affine/nbstore/worker/client';
+import { setTelemetryTransport } from '@affine/track';
+import type { Framework } from '@toeverything/infra';
+import { OpClient } from '@toeverything/infra/op';
+import { v4 as uuid } from 'uuid';
+
+function createStoreManagerClient() {
+  const { port1: portForOpClient, port2: portForWorker } = new MessageChannel();
+  let portFromWorker: MessagePort | null = null;
+  let portId = uuid();
+
+  const handleMessage = (ev: MessageEvent) => {
+    if (
+      ev.data.type === 'electron:worker-connect' &&
+      ev.data.portId === portId
+    ) {
+      portFromWorker = ev.ports[0];
+      // connect portForWorker and portFromWorker
+      portFromWorker.addEventListener('message', ev => {
+        portForWorker.postMessage(ev.data, [...ev.ports]);
+      });
+      portForWorker.addEventListener('message', ev => {
+        // oxlint-disable-next-line no-non-null-assertion
+        portFromWorker!.postMessage(ev.data, [...ev.ports]);
+      });
+      portForWorker.start();
+      portFromWorker.start();
+    }
+  };
+
+  window.addEventListener('message', handleMessage);
+
+  // oxlint-disable-next-line no-non-null-assertion
+  apis!.worker.connectWorker('affine-shared-worker', portId).catch(err => {
+    console.error('failed to connect worker', err);
+  });
+
+  const storeManager = new StoreManagerClient(new OpClient(portForOpClient));
+  portForOpClient.start();
+  return storeManager;
+}
+
+export function setupStoreManager(framework: Framework) {
+  const storeManagerClient = createStoreManagerClient();
+  setTelemetryTransport(storeManagerClient.telemetry);
+  window.addEventListener('beforeunload', () => {
+    storeManagerClient.dispose();
+  });
+  window.addEventListener('focus', () => {
+    storeManagerClient.resume();
+  });
+  window.addEventListener('click', () => {
+    storeManagerClient.resume();
+  });
+  window.addEventListener('blur', () => {
+    storeManagerClient.pause();
+  });
+
+  framework.impl(NbstoreProvider, {
+    realtime: storeManagerClient.realtime,
+    openStore(key, options) {
+      const { store, dispose } = storeManagerClient.open(key, options);
+
+      return {
+        store,
+        dispose: () => {
+          dispose();
+        },
+      };
+    },
+  });
+}

packages/frontend/apps/electron-renderer/src/app/effects/utils.ts

@@ -0,0 +1,45 @@
+import { ServersService } from '@affine/core/modules/cloud';
+import { FeatureFlagService } from '@affine/core/modules/feature-flag';
+import { GlobalContextService } from '@affine/core/modules/global-context';
+import { WorkspacesService } from '@affine/core/modules/workspace';
+import type { FrameworkProvider } from '@toeverything/infra';
+
+export function getCurrentWorkspace(frameworkProvider: FrameworkProvider) {
+  const currentWorkspaceId = frameworkProvider
+    .get(GlobalContextService)
+    .globalContext.workspaceId.get();
+  const workspacesService = frameworkProvider.get(WorkspacesService);
+  const workspaceRef = currentWorkspaceId
+    ? workspacesService.openByWorkspaceId(currentWorkspaceId)
+    : null;
+  if (!workspaceRef) {
+    return;
+  }
+  const { workspace, dispose } = workspaceRef;
+
+  return {
+    workspace,
+    dispose,
+    [Symbol.dispose]: dispose,
+  };
+}
+
+export function getCurrentServerService(frameworkProvider: FrameworkProvider) {
+  const currentServerId = frameworkProvider
+    .get(GlobalContextService)
+    .globalContext.serverId.get();
+  const serversService = frameworkProvider.get(ServersService);
+  const serverRef = currentServerId
+    ? serversService.servers$.value.find(
+        server => server.id === currentServerId
+      )
+    : null;
+  return serverRef;
+}
+
+export function isAiEnabled(frameworkProvider: FrameworkProvider) {
+  const featureFlagService = frameworkProvider.get(FeatureFlagService);
+  const serverService = getCurrentServerService(frameworkProvider);
+  const aiConfig = serverService?.features$.value.copilot;
+  return featureFlagService.flags.enable_ai.$ && aiConfig;
+}

packages/frontend/apps/electron-renderer/src/app/global.css

@@ -0,0 +1,35 @@
+button,
+input,
+select,
+textarea
+/* [role='button']  */ {
+  -webkit-app-region: no-drag;
+}
+
+#webpack-dev-server-client-overlay,
+#rspack-dev-server-client-overlay {
+  -webkit-app-region: no-drag;
+}
+
+html:is([data-active='false'], [data-dragging='true']) * {
+  -webkit-app-region: no-drag !important;
+}
+
+html[data-active='false']:has([data-translucent='true']) {
+  opacity: 0;
+  transition: opacity 0.2s 0.1s;
+}
+
+html[data-active='true']:has([data-translucent='true']) {
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+
+/**
+ * Disable animations and transitions when on battery.
+ * We use :not(.playwright-test) to ensure tests (which rely on animations) don't break.
+ */
+body.on-battery:not(.playwright-test) * {
+  animation-duration: 0ms !important;
+  transition-duration: 0ms !important;
+}

packages/frontend/apps/electron-renderer/src/app/index.tsx

@@ -0,0 +1,35 @@
+import './setup';
+
+import { appConfigProxy } from '@affine/core/components/hooks/use-app-config-storage';
+import { Telemetry } from '@affine/core/components/telemetry';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { App } from './app';
+
+function main() {
+  // load persistent config for electron
+  // TODO(@Peng): should be sync, but it's not necessary for now
+  appConfigProxy
+    .getSync()
+    .catch(() => console.error('failed to load app config'));
+
+  mountApp();
+}
+
+function mountApp() {
+  // oxlint-disable-next-line typescript/no-non-null-assertion
+  const root = document.getElementById('app')!;
+  createRoot(root).render(
+    <StrictMode>
+      <Telemetry />
+      <App />
+    </StrictMode>
+  );
+}
+
+try {
+  main();
+} catch (err) {
+  console.error('Failed to bootstrap app', err);
+}

packages/frontend/apps/electron-renderer/src/app/language-sync.ts

@@ -0,0 +1,18 @@
+import { DesktopApiService } from '@affine/core/modules/desktop-api';
+import { I18nService } from '@affine/core/modules/i18n';
+import { useLiveData, useService } from '@toeverything/infra';
+import { useEffect } from 'react';
+
+export const DesktopLanguageSync = () => {
+  const i18nService = useService(I18nService);
+  const currentLanguage = useLiveData(i18nService.i18n.currentLanguageKey$);
+  const handler = useService(DesktopApiService).api.handler;
+
+  useEffect(() => {
+    handler.i18n.changeLanguage(currentLanguage ?? 'en').catch(err => {
+      console.error(err);
+    });
+  }, [currentLanguage, handler]);
+
+  return null;
+};

packages/frontend/apps/electron-renderer/src/app/native-import.ts

@@ -0,0 +1,15 @@
+import { registerNativeImportSessionHandlers } from '@affine/core/modules/import';
+import { apis } from '@affine/electron-api';
+
+const importApis = apis?.import;
+
+if (importApis) {
+  registerNativeImportSessionHandlers({
+    createImportSession: options =>
+      importApis.createImportSessionFromSource(options),
+    nextImportBatch: sessionId => importApis.nextImportBatch(sessionId),
+    cancelImportSession: sessionId => importApis.cancelImportSession(sessionId),
+    disposeImportSession: sessionId =>
+      importApis.disposeImportSession(sessionId),
+  });
+}

packages/frontend/apps/electron-renderer/src/app/setup.ts

@@ -0,0 +1,14 @@
+import '@affine/core/bootstrap/electron';
+import '@affine/core/bootstrap/cleanup';
+import '@affine/component/theme';
+import './global.css';
+import './native-import';
+
+import { apis } from '@affine/electron-api';
+import { bindNativeDBApis } from '@affine/nbstore/sqlite';
+import { bindNativeDBV1Apis } from '@affine/nbstore/sqlite/v1';
+
+// oxlint-disable-next-line no-non-null-assertion
+bindNativeDBApis(apis!.nbstore);
+// oxlint-disable-next-line no-non-null-assertion
+bindNativeDBV1Apis(apis!.db);

packages/frontend/apps/electron-renderer/src/app/theme-sync.ts

@@ -0,0 +1,25 @@
+import { DesktopApiService } from '@affine/core/modules/desktop-api';
+import { useService } from '@toeverything/infra';
+import { useTheme } from 'next-themes';
+import { useRef } from 'react';
+
+export const DesktopThemeSync = () => {
+  const { theme } = useTheme();
+  const lastThemeRef = useRef(theme);
+  const onceRef = useRef(false);
+
+  const handler = useService(DesktopApiService).api.handler;
+
+  if (lastThemeRef.current !== theme || !onceRef.current) {
+    if (BUILD_CONFIG.isElectron && theme) {
+      handler.ui
+        .handleThemeChange(theme as 'dark' | 'light' | 'system')
+        .catch(err => {
+          console.error(err);
+        });
+    }
+    lastThemeRef.current = theme;
+    onceRef.current = true;
+  }
+  return null;
+};

packages/frontend/apps/electron-renderer/src/background-worker/index.ts

@@ -0,0 +1,48 @@
+import '@affine/core/bootstrap/electron';
+
+import { apis } from '@affine/electron-api';
+import { broadcastChannelStorages } from '@affine/nbstore/broadcast-channel';
+import {
+  cloudStorages,
+  configureSocketAuthMethod,
+} from '@affine/nbstore/cloud';
+import { bindNativeDBApis, sqliteStorages } from '@affine/nbstore/sqlite';
+import {
+  bindNativeDBV1Apis,
+  sqliteV1Storages,
+} from '@affine/nbstore/sqlite/v1';
+import {
+  StoreManagerConsumer,
+  type WorkerManagerOps,
+} from '@affine/nbstore/worker/consumer';
+import { OpConsumer } from '@toeverything/infra/op';
+
+// oxlint-disable-next-line no-non-null-assertion
+bindNativeDBApis(apis!.nbstore);
+// oxlint-disable-next-line no-non-null-assertion
+bindNativeDBV1Apis(apis!.db);
+configureSocketAuthMethod((endpoint, cb) => {
+  // oxlint-disable-next-line no-non-null-assertion
+  apis!.auth
+    .getValidAccessToken(endpoint)
+    .then(({ token }: { token?: string | null }) => {
+      cb(token ? { token, tokenType: 'jwt' } : {});
+    })
+    .catch(() => cb({ error: 'AUTH_SESSION_TEMPORARILY_UNAVAILABLE' }));
+});
+
+const storeManager = new StoreManagerConsumer([
+  ...sqliteStorages,
+  ...sqliteV1Storages,
+  ...broadcastChannelStorages,
+  ...cloudStorages,
+]);
+
+window.addEventListener('message', ev => {
+  if (ev.data.type === 'electron:worker-connect') {
+    const port = ev.ports[0];
+
+    const consumer = new OpConsumer<WorkerManagerOps>(port);
+    storeManager.bindConsumer(consumer);
+  }
+});

packages/frontend/apps/electron-renderer/src/global.d.ts

@@ -0,0 +1,16 @@
+import type { apis, events } from '@affine/electron-api';
+
+/**
+ * Extends the global Window interface to include AFFiNE's 
+ * Electron bridge APIs and event emitters.
+ */
+declare global {
+  interface Window {
+    __apis?: {
+      apis: typeof apis;
+      events: typeof events;
+    };
+  }
+}
+
+export {};

packages/frontend/apps/electron-renderer/src/popup/app.css.ts

@@ -0,0 +1,22 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { globalStyle, style } from '@vanilla-extract/css';
+
+globalStyle('html', {
+  backgroundColor: 'transparent',
+});
+
+globalStyle('body', {
+  backgroundColor: 'transparent',
+});
+
+export const root = style({
+  backgroundColor: 'transparent',
+  width: '100%',
+  height: '100%',
+  userSelect: 'none',
+  selectors: {
+    '&[data-is-windows]': {
+      backgroundColor: cssVarV2('layer/background/primary'),
+    },
+  },
+});

packages/frontend/apps/electron-renderer/src/popup/app.tsx

@@ -0,0 +1,35 @@
+import { ThemeProvider } from '@affine/core/components/theme-provider';
+import { configureElectronStateStorageImpls } from '@affine/core/desktop/storage';
+import { configureDesktopApiModule } from '@affine/core/modules/desktop-api';
+import { configureI18nModule, I18nProvider } from '@affine/core/modules/i18n';
+import { configureStorageModule } from '@affine/core/modules/storage';
+import { configureEssentialThemeModule } from '@affine/core/modules/theme';
+import { appInfo } from '@affine/electron-api';
+import { Framework, FrameworkRoot } from '@toeverything/infra';
+
+import * as styles from './app.css';
+import { Recording } from './recording';
+
+const framework = new Framework();
+configureI18nModule(framework);
+configureEssentialThemeModule(framework);
+configureStorageModule(framework);
+configureElectronStateStorageImpls(framework);
+configureDesktopApiModule(framework);
+const frameworkProvider = framework.provider();
+
+const mode = appInfo?.windowName as 'notification' | 'recording';
+
+export function App() {
+  return (
+    <FrameworkRoot framework={frameworkProvider}>
+      <ThemeProvider>
+        <I18nProvider>
+          <div className={styles.root} data-is-windows={environment.isWindows}>
+            {mode === 'recording' && <Recording />}
+          </div>
+        </I18nProvider>
+      </ThemeProvider>
+    </FrameworkRoot>
+  );
+}

packages/frontend/apps/electron-renderer/src/popup/index.tsx

@@ -0,0 +1,24 @@
+import './setup';
+
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { App } from './app';
+
+function main() {
+  mountApp();
+}
+
+function mountApp() {
+  const root = document.getElementById('app');
+  if (!root) {
+    throw new Error('Root element not found');
+  }
+  createRoot(root).render(
+    <StrictMode>
+      <App />
+    </StrictMode>
+  );
+}
+
+main();

packages/frontend/apps/electron-renderer/src/popup/recording/index.tsx

@@ -0,0 +1,235 @@
+import { Button } from '@affine/component';
+import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
+import { appIconMap } from '@affine/core/utils';
+import { apis, events } from '@affine/electron-api';
+import { useI18n } from '@affine/i18n';
+import track from '@affine/track';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import * as styles from './styles.css';
+
+type Status = {
+  id: number;
+  status:
+    | 'new'
+    | 'starting'
+    | 'start_failed'
+    | 'recording'
+    | 'finalizing'
+    | 'pending_import'
+    | 'importing'
+    | 'imported'
+    | 'import_failed'
+    | 'finalize_failed';
+  appName?: string;
+  appGroupId?: number;
+  icon?: Buffer;
+  filepath?: string;
+  sampleRate?: number;
+  numberOfChannels?: number;
+};
+
+export const useRecordingStatus = () => {
+  const [status, setStatus] = useState<Status | null>(null);
+
+  useEffect(() => {
+    // Get initial status
+    apis?.recording
+      .getCurrentRecording()
+      .then(status => setStatus(status satisfies Status | null))
+      .catch(console.error);
+
+    // Subscribe to status changes
+    const unsubscribe = events?.recording.onRecordingStatusChanged(status =>
+      setStatus(status satisfies Status | null)
+    );
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, []);
+
+  return status;
+};
+
+const appIcon = appIconMap[BUILD_CONFIG.appBuildType];
+
+export function Recording() {
+  const status = useRecordingStatus();
+  const trackedNewRecordingIdsRef = useRef<Set<number>>(new Set());
+
+  const t = useI18n();
+  const textElement = useMemo(() => {
+    if (!status) {
+      return null;
+    }
+    if (status.status === 'new') {
+      return t['com.affine.recording.new']();
+    } else if (status.status === 'imported') {
+      return t['com.affine.recording.success.prompt']();
+    } else if (
+      status.status === 'import_failed' ||
+      status.status === 'start_failed' ||
+      status.status === 'finalize_failed'
+    ) {
+      return t['com.affine.recording.failed.prompt']();
+    } else if (
+      status.status === 'starting' ||
+      status.status === 'recording' ||
+      status.status === 'finalizing'
+    ) {
+      if (status.appName) {
+        return t['com.affine.recording.recording']({
+          appName: status.appName,
+        });
+      } else {
+        return t['com.affine.recording.recording.unnamed']();
+      }
+    } else if (
+      status.status === 'pending_import' ||
+      status.status === 'importing'
+    ) {
+      return t['com.affine.recording.importing.prompt']();
+    }
+    return null;
+  }, [status, t]);
+
+  const handleDismiss = useAsyncCallback(async () => {
+    if (status) {
+      await apis?.recording?.dismissRecordingStatus(status.id);
+    }
+    await apis?.popup?.dismissCurrentRecording();
+    track.popup.$.recordingBar.dismissRecording({
+      type: 'Meeting record',
+      appName: status?.appName || 'System Audio',
+    });
+  }, [status]);
+
+  const handleStopRecording = useAsyncCallback(async () => {
+    if (!status) {
+      return;
+    }
+    track.popup.$.recordingBar.finishRecording({
+      type: 'Meeting record',
+      appName: status.appName || 'System Audio',
+    });
+    await apis?.recording?.stopRecording(status.id);
+  }, [status]);
+
+  useEffect(() => {
+    if (!status || status.status !== 'new') return;
+    if (trackedNewRecordingIdsRef.current.has(status.id)) return;
+
+    trackedNewRecordingIdsRef.current.add(status.id);
+    track.popup.$.recordingBar.toggleRecordingBar({
+      type: 'Meeting record',
+      appName: status.appName || 'System Audio',
+    });
+  }, [status]);
+
+  const handleStartRecording = useAsyncCallback(async () => {
+    if (!status) {
+      return;
+    }
+    track.popup.$.recordingBar.startRecording({
+      type: 'Meeting record',
+      appName: status.appName || 'System Audio',
+    });
+    await apis?.recording?.startRecording(status.appGroupId);
+  }, [status]);
+
+  const handleOpenFile = useAsyncCallback(async () => {
+    if (!status) {
+      return;
+    }
+    await apis?.recording?.showSavedRecordings(status.filepath);
+  }, [status]);
+
+  const controlsElement = useMemo(() => {
+    if (!status) {
+      return null;
+    }
+    if (status.status === 'new') {
+      return (
+        <>
+          <Button variant="plain" onClick={handleDismiss}>
+            {t['com.affine.recording.dismiss']()}
+          </Button>
+          <Button
+            onClick={handleStartRecording}
+            variant="primary"
+            prefix={<div className={styles.recordingIcon} />}
+          >
+            {t['com.affine.recording.start']()}
+          </Button>
+        </>
+      );
+    } else if (status.status === 'recording') {
+      return (
+        <Button variant="error" onClick={handleStopRecording}>
+          {t['com.affine.recording.stop']()}
+        </Button>
+      );
+    } else if (
+      status.status === 'starting' ||
+      status.status === 'finalizing' ||
+      status.status === 'pending_import' ||
+      status.status === 'importing'
+    ) {
+      return (
+        <Button
+          variant="error"
+          onClick={handleDismiss}
+          loading={true}
+          disabled
+        />
+      );
+    } else if (status.status === 'imported') {
+      return (
+        <Button variant="primary" onClick={handleDismiss}>
+          {t['com.affine.recording.success.button']()}
+        </Button>
+      );
+    } else if (status.status === 'start_failed') {
+      return (
+        <Button variant="plain" onClick={handleDismiss}>
+          {t['com.affine.recording.dismiss']()}
+        </Button>
+      );
+    } else if (
+      status.status === 'import_failed' ||
+      status.status === 'finalize_failed'
+    ) {
+      return (
+        <>
+          <Button variant="plain" onClick={handleDismiss}>
+            {t['com.affine.recording.dismiss']()}
+          </Button>
+          <Button variant="error" onClick={handleOpenFile}>
+            {t['com.affine.recording.failed.button']()}
+          </Button>
+        </>
+      );
+    }
+    return null;
+  }, [
+    handleDismiss,
+    handleOpenFile,
+    handleStartRecording,
+    handleStopRecording,
+    status,
+    t,
+  ]);
+
+  if (!status) {
+    return null;
+  }
+
+  return (
+    <div className={styles.root}>
+      <img className={styles.affineIcon} src={appIcon} alt="AFFiNE" />
+      <div className={styles.text}>{textElement}</div>
+      <div className={styles.controls}>{controlsElement}</div>
+    </div>
+  );
+}

packages/frontend/apps/electron-renderer/src/popup/recording/styles.css.ts

@@ -0,0 +1,39 @@
+import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+export const root = style({
+  width: '100%',
+  height: '100%',
+  padding: 4,
+  display: 'flex',
+  gap: 4,
+  alignItems: 'center',
+  ['WebkitAppRegion' as string]: 'drag',
+});
+
+export const affineIcon = style({
+  width: 28,
+  height: 28,
+});
+
+export const recordingIcon = style({
+  width: 8,
+  height: 8,
+  borderRadius: '50%',
+  backgroundColor: cssVarV2('layer/pureWhite'),
+});
+
+export const text = style({
+  fontSize: cssVar('fontSm'),
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  fontWeight: 600,
+  flex: 1,
+});
+
+export const controls = style({
+  display: 'flex',
+  gap: 2,
+});

packages/frontend/apps/electron-renderer/src/popup/setup.ts

@@ -0,0 +1,2 @@
+import '@affine/core/bootstrap/electron';
+import '@affine/component/theme';

packages/frontend/apps/electron-renderer/src/shell/app.css.ts

@@ -0,0 +1,38 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { createVar, style } from '@vanilla-extract/css';
+
+export const sidebarOffsetVar = createVar();
+
+export const root = style({
+  width: '100vw',
+  height: '100vh',
+  display: 'flex',
+  flexDirection: 'column',
+  background: cssVarV2('layer/background/primary'),
+  selectors: {
+    '&[data-translucent="true"]': {
+      background: 'transparent',
+    },
+  },
+});
+
+export const body = style({
+  flex: 1,
+  paddingTop: 52,
+});
+
+export const appTabsHeader = style({
+  zIndex: 1,
+  position: 'absolute',
+  top: 0,
+});
+
+export const splitViewFallback = style({
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  bottom: 0,
+  right: 0,
+  zIndex: 0,
+  background: cssVarV2('layer/background/primary'),
+});

packages/frontend/apps/electron-renderer/src/shell/app.tsx

@@ -0,0 +1,55 @@
+import { useAppSettingHelper } from '@affine/core/components/hooks/affine/use-app-setting-helper';
+import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
+import { ThemeProvider } from '@affine/core/components/theme-provider';
+import { configureElectronStateStorageImpls } from '@affine/core/desktop/storage';
+import { configureAppSidebarModule } from '@affine/core/modules/app-sidebar';
+import { ShellAppSidebarFallback } from '@affine/core/modules/app-sidebar/views';
+import {
+  AppTabsHeader,
+  configureAppTabsHeaderModule,
+} from '@affine/core/modules/app-tabs-header';
+import { configureDesktopApiModule } from '@affine/core/modules/desktop-api';
+import { configureI18nModule, I18nProvider } from '@affine/core/modules/i18n';
+import { configureStorageModule } from '@affine/core/modules/storage';
+import { configureAppThemeModule } from '@affine/core/modules/theme';
+import { Framework, FrameworkRoot } from '@toeverything/infra';
+
+import * as styles from './app.css';
+
+const framework = new Framework();
+configureStorageModule(framework);
+configureElectronStateStorageImpls(framework);
+configureAppTabsHeaderModule(framework);
+configureAppSidebarModule(framework);
+configureI18nModule(framework);
+configureDesktopApiModule(framework);
+configureAppThemeModule(framework);
+const frameworkProvider = framework.provider();
+
+export function App() {
+  const { appSettings } = useAppSettingHelper();
+  const translucent =
+    BUILD_CONFIG.isElectron &&
+    environment.isMacOs &&
+    appSettings.enableBlurBackground;
+
+  return (
+    <FrameworkRoot framework={frameworkProvider}>
+      <ThemeProvider>
+        <I18nProvider>
+          <div className={styles.root} data-translucent={translucent}>
+            <AppTabsHeader mode="shell" className={styles.appTabsHeader} />
+            <div className={styles.body}>
+              <ShellAppSidebarFallback />
+            </div>
+            {environment.isWindows && (
+              <div style={{ position: 'fixed', right: 0, top: 0, zIndex: 5 }}>
+                <WindowsAppControls />
+              </div>
+            )}
+          </div>
+        </I18nProvider>
+      </ThemeProvider>
+    </FrameworkRoot>
+  );
+}

packages/frontend/apps/electron-renderer/src/shell/index.tsx

@@ -0,0 +1,29 @@
+import './setup';
+
+import { events } from '@affine/electron-api';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { App } from './app';
+
+async function main() {
+  const handleActive = (active: boolean | undefined) => {
+    document.documentElement.dataset.active = String(active);
+  };
+  events?.ui.onTabShellViewActiveChange(handleActive);
+  mountApp();
+}
+
+function mountApp() {
+  const root = document.getElementById('app');
+  if (!root) {
+    throw new Error('Root element not found');
+  }
+  createRoot(root).render(
+    <StrictMode>
+      <App />
+    </StrictMode>
+  );
+}
+
+main().catch(console.error);

packages/frontend/apps/electron-renderer/src/shell/setup.ts

@@ -0,0 +1,3 @@
+import '@affine/core/bootstrap/electron';
+import '@affine/component/theme';
+import '../app/global.css';

packages/frontend/apps/electron-renderer/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../../../tsconfig.web.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    // dist is kept for webpack output
+    "outDir": "./lib",
+    "tsBuildInfoFile": "./lib/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../../component" },
+    { "path": "../../core" },
+    { "path": "../../../common/debug" },
+    { "path": "../../electron-api" },
+    { "path": "../../i18n" },
+    { "path": "../../../common/nbstore" },
+    { "path": "../../track" },
+    { "path": "../../../../blocksuite/affine/all" },
+    { "path": "../../../common/infra" }
+  ]
+}