feat(stage-tamagotchi): debugger

Co-authored-by: Makito <5277268+sumimakito@users.noreply.github.com>

apps/stage-tamagotchi/src/main/index.ts

@@ -1,3 +1,5 @@
+import http from 'node:http'
+
 import { dirname, join } from 'node:path'
 import { env, platform } from 'node:process'
 import { fileURLToPath } from 'node:url'
@@ -80,6 +82,40 @@ function createWindow(): void {
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.whenReady().then(() => {
+  if (/^true$/i.test(env.APP_REMOTE_DEBUG || '')) {
+    const remoteDebugEndpoint = `http://localhost:${env.APP_REMOTE_DEBUG_PORT || '9222'}`
+
+    http.get(`${remoteDebugEndpoint}/json`, (res) => {
+      let data = ''
+      res.on('data', chunk => data += chunk)
+      res.on('end', () => {
+        try {
+          const targets = JSON.parse(data)
+          if (targets.length <= 0) {
+            console.warn('[Remote Debugging] No targets found')
+            return
+          }
+
+          let wsUrl = targets[0].webSocketDebuggerUrl
+          if (!wsUrl.startsWith('ws://')) {
+            console.warn('[Remote Debugging] Invalid WebSocket URL:', wsUrl)
+            return
+          }
+
+          wsUrl = wsUrl.substring(5)
+          // eslint-disable-next-line no-console
+          console.log(`Inspect remotely: ${remoteDebugEndpoint}/devtools/inspector.html?ws=${wsUrl}`)
+          shell.openExternal(`${remoteDebugEndpoint}/devtools/inspector.html?ws=${wsUrl}`)
+        }
+        catch (err) {
+          console.error('[Remote Debugging] Failed to parse metadata from /json:', err)
+        }
+      })
+    }).on('error', (err) => {
+      console.error('[Remote Debugging] Failed to fetch metadata from /json:', err)
+    })
+  }
+
   // Set app user model id for windows
   electronApp.setAppUserModelId('ai.moeru.airi')
 

apps/stage-tamagotchi/src/renderer/components/Settings/CheckBar.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  text: string
-  iconOn: string
-  iconOff: string
-  description?: string
-}>()
-const model = defineModel<boolean>()
-</script>
-
-<template>
-  <label
-    class="w-full flex cursor-pointer items-center justify-between rounded-lg px-4 py-3 text-sm outline-none transition-all duration-250 ease-in-out"
-    bg="neutral-50 dark:neutral-800"
-    hover="bg-neutral-200 dark:bg-neutral-700"
-  >
-    <input v-model="model" :aria-checked="model" type="checkbox" hidden>
-    <div>
-      {{ $t(text) }}
-      <div v-if="description" text="sm neutral-500">
-        {{ $t(description) }}
-      </div>
-    </div>
-    <Transition name="slide-away" mode="out-in">
-      <div v-if="model" :class="iconOn" transition="all ease-in-out duration-250" />
-      <div v-else :class="iconOff" transition="all ease-in-out duration-250" />
-    </Transition>
-  </label>
-</template>

apps/stage-tamagotchi/src/renderer/components/Widgets/ResourceStatusIsland/LoadingModules.vue

@@ -3,7 +3,7 @@ import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import WindowRouterLink from '../../Tauri/WindowRouterLink.vue'
+import WindowRouterLink from '../../WindowRouterLink.vue'
 import LoadingComponent from './LoadingComponent.vue'
 
 import { useResourcesStore } from '../../../stores/resources'

apps/stage-tamagotchi/src/renderer/pages/index.vue

@@ -74,10 +74,23 @@ const modeIndicatorClass = computed(() => {
     <div v-show="isLoading" h-full w-full>
       <div class="absolute left-0 top-0 z-99 h-full w-full flex cursor-grab items-center justify-center overflow-hidden">
         <div
-          class="absolute h-24 w-full flex items-center justify-center overflow-hidden rounded-xl"
-          bg="white/80 dark:neutral-950/80" backdrop-blur="md"
+          :class="[
+            'absolute h-24 w-full overflow-hidden rounded-xl',
+            'flex items-center justify-center',
+            'bg-white/80 dark:bg-neutral-950/80',
+            'backdrop-blur-md',
+          ]"
         >
-          <div class="drag-region absolute left-0 top-0 h-full w-full flex animate-flash animate-duration-5s animate-count-infinite select-none items-center justify-center text-1.5rem text-primary-400 font-normal">
+          <div
+            :class="[
+              'drag-region',
+              'absolute left-0 top-0',
+              'h-full w-full flex items-center justify-center',
+              'text-1.5rem text-primary-600 dark:text-primary-400 font-normal',
+              'select-none',
+              'animate-flash animate-duration-5s animate-count-infinite',
+            ]"
+          >
             Loading...
           </div>
         </div>