From 6b3acfa4c392984eaec87d2e7cc07a852cac4c1e Mon Sep 17 00:00:00 2001
From: Neko <neko@ayaka.moe>
Date: Tue, 13 Jan 2026 04:31:58 +0800
Subject: [PATCH] chore(electron-screen-capture): improve the UI, added
 comments about bugs, refactored with libs & utils (#941)

---------

Co-authored-by: Makito <5277268+sumimakito@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Makito <i@maki.to>
---
 apps/stage-tamagotchi/package.json            |   2 +-
 .../pages/devtools/screen-capture.vue         | 263 +++++++++++++-----
 packages/electron-screen-capture/package.json |   7 +-
 packages/electron-screen-capture/src/index.ts |   8 +
 .../electron-screen-capture/src/main/index.ts |  96 +++++--
 .../electron-screen-capture/src/main/utils.ts |   7 +-
 .../src/vue/use-electron-screen-capture.ts    |  12 +-
 pnpm-lock.yaml                                |  20 +-
 pnpm-workspace.yaml                           |   2 +
 9 files changed, 308 insertions(+), 109 deletions(-)

diff --git a/apps/stage-tamagotchi/package.json b/apps/stage-tamagotchi/package.json
index e4da095c6..58769d836 100644
--- a/apps/stage-tamagotchi/package.json
+++ b/apps/stage-tamagotchi/package.json
@@ -162,7 +162,7 @@
     "builder-util-runtime": "catalog:",
     "cac": "^6.7.14",
     "csstype": "^3.2.3",
-    "electron": "^39.2.7",
+    "electron": "catalog:",
     "electron-builder": "^26.4.0",
     "electron-vite": "^5.0.0",
     "less": "^4.5.1",
diff --git a/apps/stage-tamagotchi/src/renderer/pages/devtools/screen-capture.vue b/apps/stage-tamagotchi/src/renderer/pages/devtools/screen-capture.vue
index 46d34feaf..5c04a978e 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/devtools/screen-capture.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/devtools/screen-capture.vue
@@ -3,8 +3,8 @@ import type { SerializableDesktopCapturerSource } from '@proj-airi/electron-scre
 import type { SourcesOptions } from 'electron'
 
 import { useElectronScreenCapture } from '@proj-airi/electron-screen-capture/vue'
-import { Button } from '@proj-airi/ui'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { Button, SelectTab } from '@proj-airi/ui'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import WithScreenCapture from '../../components/WithScreenCapture.vue'
@@ -14,9 +14,13 @@ interface ScreenCaptureSource extends SerializableDesktopCapturerSource {
   thumbnailURL?: string
 }
 
+type SourceCategory = 'applications' | 'displays' | 'devices'
+
 const sources = ref<ScreenCaptureSource[]>([])
 const isRefetching = ref(false)
 const activeStreams = ref<MediaStream[]>([])
+const sourceCategory = ref<SourceCategory>('applications')
+const hasFetchedOnce = ref(false)
 
 const sourcesOptions = ref<SourcesOptions>({
   types: ['screen', 'window'],
@@ -29,6 +33,50 @@ const {
   selectWithSource,
 } = useElectronScreenCapture(window.electron.ipcRenderer, sourcesOptions)
 
+const categoryOptions = [
+  { label: 'Applications', value: 'applications', icon: 'i-solar:window-frame-line-duotone' },
+  { label: 'Displays', value: 'displays', icon: 'i-solar:screencast-2-line-duotone' },
+  { label: 'Devices', value: 'devices', icon: 'i-solar:smartphone-2-line-duotone' },
+]
+
+const isDisplaySource = (source: ScreenCaptureSource) => source.id.startsWith('screen:')
+const isWindowSource = (source: ScreenCaptureSource) => source.id.startsWith('window:')
+const isDeviceSource = (source: ScreenCaptureSource) => source.id.startsWith('device:')
+
+const filteredSources = computed(() => {
+  if (sourceCategory.value === 'applications')
+    return sources.value.filter(isWindowSource)
+  if (sourceCategory.value === 'displays')
+    return sources.value.filter(isDisplaySource)
+  return sources.value.filter(isDeviceSource)
+})
+
+const sourceCounts = computed(() => ({
+  applications: sources.value.filter(isWindowSource).length,
+  displays: sources.value.filter(isDisplaySource).length,
+  devices: sources.value.filter(isDeviceSource).length,
+}))
+
+const isInitialLoading = computed(() => !hasFetchedOnce.value && isRefetching.value)
+
+const refetchLabel = computed(() => {
+  if (isInitialLoading.value)
+    return 'Loading...'
+  return isRefetching.value ? 'Refetching...' : 'Refetch'
+})
+
+const refetchIcon = computed(() =>
+  isInitialLoading.value ? 'i-svg-spinners:ring-resize' : 'i-solar:refresh-line-duotone',
+)
+
+function getShareLabel(source: ScreenCaptureSource) {
+  if (isDisplaySource(source))
+    return 'Share Screen'
+  if (isDeviceSource(source))
+    return 'Share Device'
+  return 'Share Window'
+}
+
 function toLocalArrayBuffer(bytes: Uint8Array) {
   if (typeof SharedArrayBuffer !== 'undefined' && bytes.buffer instanceof SharedArrayBuffer) {
     return bytes.slice().buffer
@@ -86,6 +134,11 @@ async function refetchSources() {
 
     sources.value = nextSources.map(source => ({
       ...source,
+      // NOTICE(@nekomeowww): In probability of 9/10, the window thumbnail is purely empty or black, sources printed and
+      // nothing is returned from the desktopCapturer API.
+      // NOTICE(@sumimakito): Not only thumbnail is empty, the appIcon could be empty as well with nothing returned.
+      // REVIEW(@sumimakito): This has nothing to do with our side, probably related to a Electron bug, you can
+      // read more here https://github.com/electron/electron/issues/44504
       appIconURL: source.appIcon && source.appIcon.length > 0 ? toObjectUrl(source.appIcon, 'image/png') : undefined,
       thumbnailURL: source.thumbnail && source.thumbnail.length > 0 ? toObjectUrl(source.thumbnail, 'image/jpeg') : undefined,
     }))
@@ -95,6 +148,7 @@ async function refetchSources() {
   }
   finally {
     isRefetching.value = false
+    hasFetchedOnce.value = true
   }
 }
 
@@ -117,39 +171,40 @@ onBeforeUnmount(() => {
     <template #default="{ hasPermissions, requestPermission }">
       <div
         v-if="hasPermissions"
-        flex="~ col gap-4 items-start" w-full
-        text="neutral-500 dark:neutral-400"
+        :class="[
+          'flex', 'w-full', 'flex-col', 'items-start', 'gap-4',
+          'text-neutral-500', 'dark:text-neutral-400',
+        ]"
       >
         <div
           v-if="activeStreams.length > 0"
-          bg="primary-300/10"
-          b="2 solid primary-400/70"
-          w-full overflow-hidden rounded-2xl p-3
-          flex="~ col gap-2"
+          :class="[
+            'flex', 'w-full', 'flex-col', 'gap-2',
+            'overflow-hidden', 'rounded-2xl', 'p-3',
+            'bg-primary-300/10', 'border-2', 'border-solid', 'border-primary-400/70',
+          ]"
         >
-          <div flex="~ row items-center gap-2">
+          <div :class="['flex', 'items-center', 'gap-2']">
             <div class="i-solar:videocamera-record-line-duotone" />
             <div>Capturing</div>
           </div>
-          <div
-            flex="~ row items-center gap-3"
-            w-full overflow-x-auto
-          >
+          <div :class="['flex', 'w-full', 'items-center', 'gap-3', 'overflow-x-auto']">
             <div
               v-for="stream in activeStreams" :key="stream.id"
-              relative overflow-hidden rounded-lg
+              :class="['relative', 'overflow-hidden', 'rounded-lg']"
             >
               <div
-                flex="~ col items-center justify-center gap-1"
-                absolute right-0 top-0 z-10 h-full w-full cursor-pointer
-                rounded-lg op-0 backdrop-blur-sm hover:op-100
-                transition="all duration-200"
-                text="light"
-                bg="black/30"
+                :class="[
+                  'absolute', 'right-0', 'top-0', 'z-10',
+                  'flex', 'h-full', 'w-full', 'cursor-pointer', 'flex-col',
+                  'items-center', 'justify-center', 'gap-1', 'rounded-lg',
+                  'bg-black/30', 'text-light', 'opacity-0', 'backdrop-blur-sm',
+                  'transition-all', 'duration-200', 'hover:opacity-100',
+                ]"
                 @click="stopStream(stream)"
               >
                 <div class="i-solar:stop-line-duotone" />
-                <div text-sm>
+                <div class="text-sm">
                   Stop
                 </div>
               </div>
@@ -158,40 +213,116 @@ onBeforeUnmount(() => {
                 muted
                 playsinline
                 :srcObject="stream"
-                h-140px
-                w-auto
+                class="h-140px w-auto"
               />
             </div>
           </div>
         </div>
 
         <div
-          flex="~ col gap-3"
-          w-full pb-6
+          :class="[
+            'flex', 'w-full', 'flex-col', 'gap-3', 'pb-6',
+          ]"
         >
-          <div flex="~ row items-center justify-between" w-full>
-            <div>{{ sources.length }} source(s)</div>
+          <div :class="['flex', 'w-full', 'items-center', 'gap-3']">
+            <SelectTab
+              v-model="sourceCategory"
+              size="sm"
+              :options="categoryOptions.map(option => ({
+                ...option,
+                label: `${option.label} (${sourceCounts[option.value as SourceCategory]})`,
+              }))"
+              :class="['flex-1']"
+            />
             <Button
-              :label="isRefetching ? 'Refetching...' : 'Refetch'"
-              icon="i-solar:refresh-line-duotone"
+              :label="refetchLabel"
+              :icon="refetchIcon"
               size="sm"
               :disabled="isRefetching"
+              :class="['shrink-0']"
               @click="refetchSources()"
             />
           </div>
-          <div grid="~ cols-1 sm:cols-2 md:cols-3 lg:cols-4 xl:cols-5 gap-3">
+
+          <div
+            v-if="isInitialLoading"
+            :class="[
+              'flex', 'w-full', 'items-center', 'justify-center',
+              'rounded-2xl',
+              'border-2', 'border-dashed', 'border-neutral-200/70', 'dark:border-neutral-800/40',
+              'px-4', 'py-12',
+              'text-sm', 'text-neutral-500',
+            ]"
+          >
+            <div :class="['flex', 'items-center', 'gap-2']">
+              <div class="i-svg-spinners:ring-resize text-lg" />
+              <span>Loading sources...</span>
+            </div>
+          </div>
+
+          <div
+            v-else
+            :class="[
+              'grid', 'gap-3',
+              'grid-cols-1', 'md:grid-cols-2', 'xl:grid-cols-4', '3xl:grid-cols-5',
+            ]"
+          >
             <div
-              v-for="source in sources"
+              v-for="source in filteredSources"
               :key="source.id"
-              flex="~ col justify-between gap-3"
-              w-full cursor-pointer rounded-2xl p-3
-              transition="all duration-200"
-              border="2 solid neutral-200/60 dark:neutral-800/10 hover:primary-400/70"
-              @click="startCapture(source)"
+              :class="[
+                'group', 'flex', 'w-full', 'flex-col', 'gap-3',
+                'rounded-2xl', 'bg-white/60', 'dark:bg-neutral-950/40',
+                'transition-all', 'duration-200',
+              ]"
             >
-              <div flex="~ col items-start w-full">
-                <div flex="~ row items-center gap-1">
-                  <div class="h-16px w-16px">
+              <div
+                :class="[
+                  'relative', 'aspect-video', 'w-full', 'overflow-hidden', 'rounded-2xl',
+                  'bg-neutral-100', 'dark:bg-neutral-800',
+                  'outline-0', 'outline-offset-2',
+                  'group-hover:outline-2', 'group-hover:outline-neutral-100', 'dark:group-hover:outline-neutral-800',
+                  'group-focus-within:outline-2', 'group-focus-within:outline-neutral-100', 'dark:group-focus-within:outline-neutral-800',
+                ]"
+              >
+                <div
+                  :class="[
+                    'absolute', 'inset-0', 'z-10',
+                    'flex', 'items-center', 'justify-center',
+                    'opacity-0', 'backdrop-blur-sm',
+                    'transition-all', 'duration-200',
+                    'bg-black/30', 'group-hover:opacity-100',
+                  ]"
+                >
+                  <button
+                    type="button"
+                    :class="[
+                      'flex', 'items-center', 'gap-2', 'rounded-lg', 'px-3', 'py-2',
+                      'bg-primary-500/80', 'text-white', 'shadow-lg',
+                      'transition-transform', 'duration-200', 'hover:scale-105',
+                    ]"
+                    @click.stop="startCapture(source)"
+                  >
+                    <span class="i-solar:share-line-duotone" />
+                    <span class="text-sm font-medium">{{ getShareLabel(source) }}</span>
+                  </button>
+                </div>
+
+                <img
+                  v-if="source.thumbnailURL"
+                  :src="source.thumbnailURL"
+                  alt="Thumbnail"
+                  class="h-full w-full object-contain"
+                >
+                <div
+                  v-else
+                  class="i-solar:forbidden-circle-line-duotone absolute inset-0 m-auto h-10 w-10 bg-light"
+                />
+              </div>
+
+              <div :class="['flex', 'w-full', 'flex-col', 'items-start', 'gap-1', 'px-3', 'pb-3']">
+                <div :class="['flex', 'items-start', 'gap-2']">
+                  <div :class="['h-20px', 'w-20px', 'self-start', 'flex-shrink-0']">
                     <img
                       v-if="source.appIconURL"
                       :src="source.appIconURL"
@@ -200,50 +331,48 @@ onBeforeUnmount(() => {
                     >
                     <div
                       v-else-if="source.id.startsWith('screen:')"
-                      h-full w-full
-                      class="i-solar:screencast-2-line-duotone"
+                      class="i-solar:screencast-2-line-duotone h-full w-full"
                     />
                     <div
                       v-else
-                      h-full w-full
-                      class="i-solar:window-frame-line-duotone"
+                      class="i-solar:window-frame-line-duotone h-full w-full"
                     />
                   </div>
 
-                  <div text-sm>
-                    {{ source.id.startsWith('screen:') ? 'Screen' : 'Window' }}
+                  <div class="text-sm text-neutral-700 leading-snug dark:text-neutral-200">
+                    {{ source.name }}
                   </div>
                 </div>
 
-                <div text-ellipsis break-all>
-                  {{ source.name }}
-                </div>
-                <div text-sm font-mono text="neutral-400 dark:neutral-600">
+                <div class="text-xs text-neutral-400 font-mono dark:text-neutral-600">
                   {{ source.id }}
                 </div>
               </div>
-              <div
-                h-200px w-full overflow-hidden rounded-2xl bg-black
-                flex="~ items-center justify-center shrink-0"
-              >
-                <img
-                  v-if="source.thumbnailURL"
-                  :src="source.thumbnailURL"
-                  alt="Thumbnail"
-                  h-full
-                  w-full object-contain
-                >
-                <div
-                  v-else
-                  class="i-solar:forbidden-circle-line-duotone"
-                  h-10 w-10 bg-light
-                />
-              </div>
+            </div>
+          </div>
+
+          <div
+            v-if="filteredSources.length === 0"
+            :class="[
+              'flex', 'w-full', 'flex-col', 'items-center', 'justify-center', 'gap-2',
+              'rounded-2xl', 'border-2', 'border-dashed', 'border-neutral-200/70',
+              'px-4', 'py-10', 'text-sm', 'text-neutral-500', 'dark:border-neutral-800/40',
+            ]"
+          >
+            <div class="i-solar:shield-warning-line-duotone text-2xl" />
+            <div>No sources found for this category.</div>
+            <div class="text-xs text-neutral-400">
+              Try switching tabs or refetching the sources.
             </div>
           </div>
         </div>
       </div>
-      <div v-else flex="~ col gap-4 items-center justify-center" h-full p-6>
+      <div
+        v-else
+        :class="[
+          'flex', 'h-full', 'flex-col', 'items-center', 'justify-center', 'gap-4', 'p-6',
+        ]"
+      >
         <div>
           {{ t('tamagotchi.settings.screen-capture.permissions-prompt.description') }}
         </div>
diff --git a/packages/electron-screen-capture/package.json b/packages/electron-screen-capture/package.json
index 8b1feb37b..6d0f66530 100644
--- a/packages/electron-screen-capture/package.json
+++ b/packages/electron-screen-capture/package.json
@@ -35,15 +35,18 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
+    "@guiiai/logg": ">=1 <2",
+    "electron": ">=39 <40",
     "vue": ">=3"
   },
+  "dependencies": {
+    "std-env": "catalog:"
+  },
   "devDependencies": {
     "@electron-toolkit/preload": "catalog:",
-    "@guiiai/logg": "catalog:",
     "@moeru/eventa": "catalog:",
     "@moeru/std": "catalog:",
     "async-mutex": "catalog:",
-    "electron": "catalog:",
     "nanoid": "catalog:",
     "vite": "catalog:rolldown-vite"
   }
diff --git a/packages/electron-screen-capture/src/index.ts b/packages/electron-screen-capture/src/index.ts
index a5e1a6d7b..1e7089060 100644
--- a/packages/electron-screen-capture/src/index.ts
+++ b/packages/electron-screen-capture/src/index.ts
@@ -24,3 +24,11 @@ export const screenCaptureResetSource = defineInvokeEventa<void, string>('eventa
 
 export const screenCaptureCheckMacOSPermission = defineInvokeEventa<ReturnType<typeof systemPreferences.getMediaAccessStatus>, never>('eventa:invoke:electron:screen-capture:check-macos-permission')
 export const screenCaptureRequestMacOSPermission = defineInvokeEventa<void, never>('eventa:invoke:electron:screen-capture:request-macos-permission')
+
+export const screenCapture = {
+  getSources: screenCaptureGetSources,
+  setSource: screenCaptureSetSourceEx,
+  resetSource: screenCaptureResetSource,
+  checkMacOSPermission: screenCaptureCheckMacOSPermission,
+  requestMacOSPermission: screenCaptureRequestMacOSPermission,
+}
diff --git a/packages/electron-screen-capture/src/main/index.ts b/packages/electron-screen-capture/src/main/index.ts
index c72517a09..42f54c167 100644
--- a/packages/electron-screen-capture/src/main/index.ts
+++ b/packages/electron-screen-capture/src/main/index.ts
@@ -1,6 +1,7 @@
 // SPDX-FileCopyrightText: Copyright (c) Alec Armbruster, Licensed under MIT License
 // SPDX-FileCopyrightText: Copyright (c) Moeru AI Project AIRI Team
 
+import type { Format, LogLevelString } from '@guiiai/logg'
 import type { MutexInterface } from 'async-mutex'
 import type { BrowserWindow, DesktopCapturerSource, SourcesOptions } from 'electron'
 
@@ -11,8 +12,12 @@ import { Mutex, withTimeout } from 'async-mutex'
 import { app, desktopCapturer, ipcMain, session as sessionModule } from 'electron'
 import { nanoid } from 'nanoid'
 
-import { screenCaptureCheckMacOSPermission, screenCaptureGetSources, screenCaptureRequestMacOSPermission, screenCaptureResetSource, screenCaptureSetSourceEx } from '..'
-import { checkMacOSScreenCapturePermission, requestMacOSScreenCapturePermission, toSerializableDesktopCapturerSource } from './utils'
+import { screenCapture } from '..'
+import {
+  checkMacOSScreenCapturePermission,
+  requestMacOSScreenCapturePermission,
+  toSerializableDesktopCapturerSource,
+} from './utils'
 
 export const defaultSourcesOptions: SourcesOptions = { types: ['screen'] }
 
@@ -66,12 +71,20 @@ let initMainCalled = false
 export interface InitMainOptions {
   forceCoreAudioTap?: boolean
   mutexAcquireTimeout?: number
+  loggerOptions?: {
+    logLevel?: string
+    format?: 'json' | 'plain'
+  }
 }
 
 export interface InitWindowOptions {
   loopbackWithMute?: boolean
   sourcesOptions?: SourcesOptions
   onAfterGetSources?: (sources: DesktopCapturerSource[]) => DesktopCapturerSource[]
+  loggerOptions?: {
+    logLevel?: string
+    format?: 'json' | 'plain'
+  }
 }
 
 export interface GetLoopbackAudioMediaStreamOptions {
@@ -82,14 +95,20 @@ let setSourceMutex: MutexInterface
 let screenCaptureSourceMutexHandle: string | undefined
 let setSourceMutexTimeoutHandle: NodeJS.Timeout | undefined
 
-const log = useLogg('screen-capture').useGlobalConfig()
-
 export function initScreenCaptureForMain(options: InitMainOptions = {}): void {
   const {
     forceCoreAudioTap = false,
     mutexAcquireTimeout = 5000,
   } = options
 
+  let log = useLogg('screen-capture').useGlobalConfig()
+  if (options?.loggerOptions?.logLevel) {
+    log = log.withLogLevelString((options?.loggerOptions?.logLevel ?? 'info') as LogLevelString)
+  }
+  if (options?.loggerOptions?.format) {
+    log = log.withFormat((options?.loggerOptions?.format ?? 'plain') as Format)
+  }
+
   if (mutexAcquireTimeout <= 0 || !Number.isFinite(mutexAcquireTimeout) || Number.isNaN(mutexAcquireTimeout)) {
     throw new Error('mutexAcquireTimeout must be a positive finite number')
   }
@@ -127,32 +146,61 @@ function resetScreenCaptureSource() {
 
 const initializedWindows = new WeakSet<BrowserWindow>()
 
+// NOTICE: use this to guard to prevent handling destroyed window
+// especially when trying to get window title,
+// but window.id is another story as window.id is stable and unique even
+// after window is destroyed
+function tryWindowTitle(window: BrowserWindow, previous?: string): string {
+  if (window.isDestroyed()) {
+    return previous || '<destroyed>'
+  }
+
+  const title = window.getTitle()
+  return title
+}
+
 export function initScreenCaptureForWindow(window: BrowserWindow, options?: InitWindowOptions): void {
-  log.debug(`init for window #${window.id} (${window.title})`)
+  let log = useLogg('screen-capture').useGlobalConfig()
+  if (options?.loggerOptions?.logLevel) {
+    log = log.withLogLevelString((options?.loggerOptions?.logLevel ?? 'info') as LogLevelString)
+  }
+  if (options?.loggerOptions?.format) {
+    log = log.withFormat((options?.loggerOptions?.format ?? 'plain') as Format)
+  }
+
+  const windowId = window.id
+  const windowTitle = tryWindowTitle(window)
+
+  log.withFields({ windowId, windowTitle: tryWindowTitle(window, windowTitle) }).debug(`init for window`)
 
   if (!initMainCalled) {
     // Throwing an error because this is unlikely to be recoverable.
     throw new Error('initScreenCaptureForMain must be called before calling initScreenCaptureForWindow')
   }
-
   if (initializedWindows.has(window)) {
-    log.warn('initScreenCaptureForWindow should only be called once per window')
+    log.withFields({ windowId, windowTitle: tryWindowTitle(window, windowTitle) }).warn('initScreenCaptureForWindow should only be called once per window')
     return
   }
+
   initializedWindows.add(window)
 
   const { context } = createContext(ipcMain, window, { onlySameWindow: true })
   const session = sessionModule.defaultSession
 
-  defineInvokeHandler(context, screenCaptureCheckMacOSPermission, async () => checkMacOSScreenCapturePermission())
-  defineInvokeHandler(context, screenCaptureRequestMacOSPermission, async () => requestMacOSScreenCapturePermission())
+  defineInvokeHandler(context, screenCapture.checkMacOSPermission, async () => checkMacOSScreenCapturePermission())
+  defineInvokeHandler(context, screenCapture.requestMacOSPermission, async () => requestMacOSScreenCapturePermission())
 
-  defineInvokeHandler(context, screenCaptureGetSources, async (sourcesOptions) => {
+  defineInvokeHandler(context, screenCapture.getSources, async (sourcesOptions) => {
+    // NOTICE(@nekomeowww): In probability of 9/10, the window thumbnail is purely empty or black, sources printed and
+    // nothing is returned from the desktopCapturer API.
+    // NOTICE(@sumimakito): Not only thumbnail is empty, the appIcon could be empty as well with nothing returned.
+    // REVIEW(@sumimakito): This has nothing to do with out side, probably related to Electron Bug, you can
+    // read more here https://github.com/electron/electron/issues/44504
     const sources = await desktopCapturer.getSources(sourcesOptions)
     return sources.map(source => toSerializableDesktopCapturerSource(source))
   })
 
-  defineInvokeHandler(context, screenCaptureSetSourceEx, async (request, eventaOptions) => {
+  defineInvokeHandler(context, screenCapture.setSource, async (request, eventaOptions) => {
     // FIXME: Would be better if `onlySameWindow` in `createContext` also filters out invocations here.
     if (window.webContents.id !== eventaOptions?.raw.ipcMainEvent.sender.id)
       return
@@ -163,7 +211,7 @@ export function initScreenCaptureForWindow(window: BrowserWindow, options?: Init
     }
 
     await setSourceMutex.acquire()
-    log.debug(`setSourceMutex acquired for window #${window.id} (${window.title})`)
+    log.withFields({ windowId, windowTitle: tryWindowTitle(window, windowTitle) }).debug('setSourceMutex acquired')
 
     clearTimeout(setSourceMutexTimeoutHandle)
     const handle = nanoid()
@@ -177,6 +225,7 @@ export function initScreenCaptureForWindow(window: BrowserWindow, options?: Init
         if (!source) {
           throw new Error(`Source with id ${request.sourceId} not found.`)
         }
+
         callback({
           video: source,
           audio: options?.loopbackWithMute ? LoopbackAudioTypes.LoopbackWithMute : LoopbackAudioTypes.Loopback,
@@ -189,19 +238,22 @@ export function initScreenCaptureForWindow(window: BrowserWindow, options?: Init
 
         resetScreenCaptureSource()
         setSourceMutex.release()
-        log.warn(
-          `setSourceMutex released for window #${window.id} (${window.title}) due to timeout. `
-          + 'Please make sure to invoke screenCaptureResetSource when getDisplayMedia is completed.',
-        )
+
+        log
+          .withFields({ windowId, windowTitle: tryWindowTitle(window, windowTitle) })
+          .warn(
+            `setSourceMutex released for window due to timeout. `
+            + 'Please make sure to invoke screenCaptureResetSource when getDisplayMedia is completed.',
+          )
       }, timeout ?? 5000)
 
       return handle
     }
     catch (e) {
-      log.error(
-        `screenCaptureSetSourceEx failed for window #${window.id} (${window.title}): ${e instanceof Error ? e.message : String(e)}`,
-        e instanceof Error ? e.stack : undefined,
-      )
+      log
+        .withFields({ windowId, windowTitle: tryWindowTitle(window, windowTitle) })
+        .withError(e)
+        .error('screenCaptureSetSourceEx failed for window')
 
       resetScreenCaptureSource()
       setSourceMutex.release()
@@ -209,13 +261,13 @@ export function initScreenCaptureForWindow(window: BrowserWindow, options?: Init
     }
   })
 
-  defineInvokeHandler(context, screenCaptureResetSource, async (mutexHandle) => {
+  defineInvokeHandler(context, screenCapture.resetSource, async (mutexHandle) => {
     if (screenCaptureSourceMutexHandle !== mutexHandle)
       return
 
     resetScreenCaptureSource()
     setSourceMutex.release()
 
-    log.debug(`setSourceMutex released by window #${window.id} (${window.title})`)
+    log.withFields({ windowId, windowTitle: tryWindowTitle(window, windowTitle) }).debug('setSourceMutex released by window')
   })
 }
diff --git a/packages/electron-screen-capture/src/main/utils.ts b/packages/electron-screen-capture/src/main/utils.ts
index 37f4591fb..54d4b672a 100644
--- a/packages/electron-screen-capture/src/main/utils.ts
+++ b/packages/electron-screen-capture/src/main/utils.ts
@@ -2,9 +2,8 @@ import type { DesktopCapturerSource } from 'electron'
 
 import type { SerializableDesktopCapturerSource } from '..'
 
-import process from 'node:process'
-
 import { shell, systemPreferences } from 'electron'
+import { isMacOS } from 'std-env'
 
 /**
  * Serializes a DesktopCapturerSource to a format that can be sent over IPC.
@@ -30,7 +29,7 @@ export function toSerializableDesktopCapturerSource(source: DesktopCapturerSourc
 }
 
 export function checkMacOSScreenCapturePermission(): ReturnType<typeof systemPreferences.getMediaAccessStatus> {
-  if (process.platform !== 'darwin') {
+  if (!isMacOS) {
     throw new Error('checkMacOSScreenCapturePermission is only available on macOS (darwin)')
   }
 
@@ -38,7 +37,7 @@ export function checkMacOSScreenCapturePermission(): ReturnType<typeof systemPre
 }
 
 export function requestMacOSScreenCapturePermission(): void {
-  if (process.platform !== 'darwin') {
+  if (!isMacOS) {
     throw new Error('requestMacOSScreenCapturePermission is only available on macOS (darwin)')
   }
 
diff --git a/packages/electron-screen-capture/src/vue/use-electron-screen-capture.ts b/packages/electron-screen-capture/src/vue/use-electron-screen-capture.ts
index 7cd67365f..98538346b 100644
--- a/packages/electron-screen-capture/src/vue/use-electron-screen-capture.ts
+++ b/packages/electron-screen-capture/src/vue/use-electron-screen-capture.ts
@@ -8,17 +8,17 @@ import { defineInvoke } from '@moeru/eventa'
 import { createContext } from '@moeru/eventa/adapters/electron/renderer'
 import { toRaw, toValue } from 'vue'
 
-import { screenCaptureCheckMacOSPermission, screenCaptureGetSources, screenCaptureRequestMacOSPermission, screenCaptureResetSource, screenCaptureSetSourceEx } from '..'
+import { screenCapture } from '..'
 
 export function useElectronScreenCapture(ipcRenderer: IpcRenderer, sourcesOptions: MaybeRefOrGetter<SourcesOptions>) {
   const context = createContext(ipcRenderer).context
 
-  const invokeGetSources = defineInvoke(context, screenCaptureGetSources)
-  const setSource = defineInvoke(context, screenCaptureSetSourceEx)
-  const resetSource = defineInvoke(context, screenCaptureResetSource)
+  const invokeGetSources = defineInvoke(context, screenCapture.getSources)
+  const setSource = defineInvoke(context, screenCapture.setSource)
+  const resetSource = defineInvoke(context, screenCapture.resetSource)
 
-  const checkMacOSPermission = defineInvoke(context, screenCaptureCheckMacOSPermission)
-  const requestMacOSPermission = defineInvoke(context, screenCaptureRequestMacOSPermission)
+  const checkMacOSPermission = defineInvoke(context, screenCapture.checkMacOSPermission)
+  const requestMacOSPermission = defineInvoke(context, screenCapture.requestMacOSPermission)
 
   async function getSources() {
     return invokeGetSources(toRaw(toValue(sourcesOptions)))
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5f01ef346..4d00dc053 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -147,6 +147,9 @@ catalogs:
     splitpanes:
       specifier: ^4.0.4
       version: 4.0.4
+    std-env:
+      specifier: ^3.10.0
+      version: 3.10.0
     superjson:
       specifier: ^2.2.6
       version: 2.2.6
@@ -1204,7 +1207,7 @@ importers:
         specifier: ^3.2.3
         version: 3.2.3
       electron:
-        specifier: ^39.2.7
+        specifier: 'catalog:'
         version: 39.2.7
       electron-builder:
         specifier: ^26.4.0
@@ -1822,6 +1825,15 @@ importers:
 
   packages/electron-screen-capture:
     dependencies:
+      '@guiiai/logg':
+        specifier: '>=1 <2'
+        version: 1.2.11
+      electron:
+        specifier: '>=39 <40'
+        version: 39.2.7
+      std-env:
+        specifier: 'catalog:'
+        version: 3.10.0
       vue:
         specifier: '>=3'
         version: 3.5.25(typescript@5.9.3)
@@ -1829,9 +1841,6 @@ importers:
       '@electron-toolkit/preload':
         specifier: 'catalog:'
         version: 3.0.2(electron@39.2.7)
-      '@guiiai/logg':
-        specifier: 'catalog:'
-        version: 1.2.11
       '@moeru/eventa':
         specifier: 'catalog:'
         version: 1.0.0-alpha.10(electron@39.2.7)(h3@2.0.1-rc.5(crossws@0.4.1(srvx@0.9.8(patch_hash=f0151386fdcbcb6f53833cf8f66926ef2eb31b71a2782d6e0960dec832ef108d))))
@@ -1841,9 +1850,6 @@ importers:
       async-mutex:
         specifier: 'catalog:'
         version: 0.5.0
-      electron:
-        specifier: 'catalog:'
-        version: 39.2.7
       nanoid:
         specifier: 'catalog:'
         version: 5.1.6
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 9d3ed57e3..7fb6d65a4 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -22,6 +22,7 @@ overrides:
 
 patchedDependencies:
   srvx@0.9.8: patches/srvx@0.9.8.patch
+
 catalog:
   '@capacitor/cli': ^8.0.0
   '@capacitor/core': ^8.0.0
@@ -70,6 +71,7 @@ catalog:
   ofetch: ^1.5.1
   posthog-js: 1.306.1
   splitpanes: ^4.0.4
+  std-env: ^3.10.0
   superjson: ^2.2.6
   tsx: ^4.21.0
   uncrypto: ^0.1.3