update

client/.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(printf '%s\\\\n' \"\n================================================================================\nCOMPREHENSIVE ARCHITECTURE REPORT\nTauri 2 + Nuxt 4 + mediasoup-client Voice Chat App\n================================================================================\")"
+    ]
+  }
+}

client/CLAUDE.md

@@ -0,0 +1,118 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Chad is a voice/video chat desktop app built with **Tauri 2 + Nuxt 4 (SPA) + mediasoup-client**. It uses an SFU (Selective Forwarding Unit) architecture for WebRTC media — each peer sends to the server, which forwards selectively to others.
+
+## Commands
+
+| Command | Description |
+|---------|-------------|
+| `yarn dev` | Start dev server (binds to all interfaces via `--host`) |
+| `yarn generate` | Generate static site to `.output/public` |
+| `yarn build` | Build for production |
+| `yarn preview` | Preview production build |
+| `npx eslint .` | Lint the project |
+| `npx eslint --fix .` | Lint and auto-fix |
+
+**Tauri desktop build**: `yarn tauri build` (runs `yarn generate` first automatically).
+
+Package manager is **Yarn 4.12.0**. No test framework is configured.
+
+## Architecture
+
+### Composable-Based State (No Pinia/Vuex)
+
+All state is managed through Vue composables using `@vueuse/core`'s `createGlobalState` and `createSharedComposable`. Nuxt auto-imports all composables from `app/composables/`.
+
+**Dependency graph** (arrows = "depends on"):
+
+```
+useAuth (foundation — user session)
+  └→ useSignaling (Socket.IO connection to /webrtc namespace)
+       └→ useClients (connected peer list)
+            └→ useMediasoup (transports, producers, consumers)
+                 ├← usePreferences (device IDs, audio effects, hotkeys)
+                 │    └← useDevices (enumerates hardware via getUserMedia)
+                 └← useSfx (Howler.js sound effects)
+
+useApp (top-level orchestrator — mute/unmute, video/share toggles)
+  └→ depends on useClients, useMediasoup, useSignaling, useSfx
+```
+
+### Composable Tiers
+
+**Global state** (`createGlobalState` — single instance, persists for app lifetime):
+- `useApp` — ready state, input/output mute, video/share toggles, version info
+- `useAuth` — `me` ref, login/register/logout
+- `useClients` — `clients[]` array, add/remove/update peers
+- `usePreferences` — device selections, audio effects, hotkeys (localStorage + server sync)
+- `useUpdater` — Tauri app update checks
+- `useFullscreenVideo` — fullscreen video element control
+
+**Shared** (`createSharedComposable` — single instance, disposed when last consumer unmounts):
+- `useMediasoup` — mediasoup Device, transports, producers, consumers, speaking state
+- `useSignaling` — Socket.IO client, connect/disconnect
+- `useSfx` — sound effect playback via Howler.js
+
+**Per-instance** (new instance per call):
+- `useClient(socketId)` — per-peer volume/mute (localStorage), filtered consumers/producers
+- `useAudioContext(audioTrack)` — Web Audio API gain node for per-client volume
+- `useDevices` — media device enumeration
+
+### Initialization Flow
+
+1. **Middleware** (global, ordered by filename prefix):
+   - `00.updater` — Tauri update check, redirects to `/updater` if available
+   - `01.auth` — validates session via `GET /me`, redirects guests to `/login`
+   - `02.user-preferences` — loads server-synced preferences for authenticated users
+2. **Plugins**: build info logging, Tauri hotkey registration
+3. **Layout** (`default.vue`): calls `useApp()` which triggers `useSignaling().connect()`
+4. **Socket authenticated** → mediasoup Device created → transports created → `join()` → mic enabled
+
+### mediasoup Integration
+
+**Producer types** (tracked in `appData.source`):
+- Microphone: `kind='audio'`, `source='mic-video'`
+- Camera: `kind='video'`, `source='mic-video'`
+- Screen share: `kind='video'`, `source='share'`
+
+**Consumer filtering** uses `kind` + `appData.source` to distinguish audio/video/share streams.
+
+Transports use `emitWithAck()` on the Socket.IO connection for all signaling (create, connect, produce, join, pause/resume/close).
+
+### API & Networking
+
+- **REST API**: `shared/chad-api.ts` — `$fetch` instance with `credentials: 'include'`, base URL from `__API_BASE_URL__` build-time define
+- **WebSocket**: Socket.IO to `/webrtc` namespace for signaling
+- **Vite proxy**: `/api` → production API server (for dev)
+
+### Shared Types
+
+`shared/types.ts` defines `ChadClient`, `Consumer`, `Producer`, `AppData`, `UpdatedClient` — used by both composables and components.
+
+## Code Conventions
+
+- **ESLint**: `@antfu/eslint-config` with formatters enabled
+- **Vue SFC block order**: `<template>`, `<script>`, `<style>` (enforced by ESLint)
+- **`console.log` allowed** (no-console is off)
+- **PrimeVue components** are prefixed: `PrimeButton`, `PrimeCard`, etc.
+- **Icons**: `lucide-vue-next` + `primeicons`
+- **Styling**: Tailwind CSS 4 + PrimeVue Aura theme (Zinc palette, dark-first)
+- **Reactivity**: mediasoup objects wrapped with `markRaw()` to prevent deep reactivity; `triggerRef()` used for manual reactivity triggers on the clients array
+
+## Build-Time Defines
+
+Set via `.env` or environment variables:
+- `API_BASE_URL` — backend API base (default: `http://localhost:4000/chad`)
+- `COMMIT_SHA` — git commit hash (default: `'local'`)
+
+## Tauri
+
+- App identifier: `xyz.koptilnya.chad`
+- Windows-only NSIS installer (`bundle.targets: ["nsis"]`)
+- Plugins: global-shortcut, process, updater, single-instance, log
+- Frontend dist: `.output/public` (from `yarn generate`)
+- `@tauri-apps/plugin-*` packages provide JS bindings; use `window.__TAURI__` check or the `useTauri()` composable for Tauri detection

client/app/components/Gallery/Card.vue

@@ -16,11 +16,12 @@
 </template>
 
 <script setup lang="ts">
-import type { ChadClient } from '#shared/types'
+import type { ChadClient, Consumer, Producer } from '#shared/types'
 
 const props = defineProps<{
   client: ChadClient
-  stream: MediaStream
+  consumer?: Consumer
+  producer?: Producer
 }>()
 
 const { me } = useClients()
@@ -30,8 +31,21 @@ const isMe = computed(() => {
   return props.client.socketId === me.value?.socketId
 })
 
+const track = computed(() => {
+  return props.consumer?.raw.track ?? props.producer?.raw.track
+})
+
+const stream = computed<MediaStream | undefined>((previousStream) => {
+  if (previousStream?.getTracks()[0] === track.value) {
+    return previousStream
+  }
+
+  return track.value ? new MediaStream([track.value]) : undefined
+})
+
 function watch() {
-  fullscreenVideo.show(props.stream)
+  if (stream.value)
+    fullscreenVideo.show(stream.value)
 }
 </script>
 

client/app/composables/use-app.ts

@@ -7,8 +7,7 @@ export const useApp = createGlobalState(() => {
   const { clients } = useClients()
   const mediasoup = useMediasoup()
   const signaling = useSignaling()
-  const toast = useToast()
+  const { emit } = useEventBus()
-  const sfx = useSfx()
 
   const ready = ref(false)
   const isTauri = computed(() => '__TAURI_INTERNALS__' in window)
@@ -53,8 +52,7 @@ export const useApp = createGlobalState(() => {
 
     await mediasoup.pauseProducer(mediasoup.micProducer.value)
 
-    sfx.playEvent('mic-off').then()
+    emit('audio:muted')
-    toast.add({ severity: 'info', summary: 'Microphone muted', closable: false, life: 1000 })
   }
 
   async function unmuteInput() {
@@ -67,8 +65,7 @@ export const useApp = createGlobalState(() => {
 
     await mediasoup.resumeProducer(mediasoup.micProducer.value)
 
-    sfx.playEvent('mic-on').then()
+    emit('audio:unmuted')
-    toast.add({ severity: 'info', summary: 'Microphone activated', closable: false, life: 1000 })
   }
 
   async function toggleInput() {
@@ -92,7 +89,7 @@ export const useApp = createGlobalState(() => {
       outputMuted: true,
     })
 
-    toast.add({ severity: 'info', summary: 'Sound muted', closable: false, life: 1000 })
+    emit('output:muted')
   }
 
   async function unmuteOutput() {
@@ -105,7 +102,7 @@ export const useApp = createGlobalState(() => {
       outputMuted: false,
     })
 
-    toast.add({ severity: 'info', summary: 'Sound resumed', closable: false, life: 1000 })
+    emit('output:unmuted')
   }
 
   async function toggleOutput() {
@@ -118,22 +115,22 @@ export const useApp = createGlobalState(() => {
   async function toggleVideo() {
     if (!mediasoup.videoProducer.value) {
       await mediasoup.enableVideo()
-      await sfx.playEvent('stream-on')
+      emit('video:enabled')
     }
     else {
       await mediasoup.disableProducer(mediasoup.videoProducer.value)
-      await sfx.playEvent('stream-off')
+      emit('video:disabled')
     }
   }
 
   async function toggleShare() {
     if (!mediasoup.shareProducer.value) {
       await mediasoup.enableShare()
-      await sfx.playEvent('stream-on')
+      emit('share:enabled')
     }
     else {
       await mediasoup.disableProducer(mediasoup.shareProducer.value)
-      await sfx.playEvent('stream-off')
+      emit('share:disabled')
     }
   }
 

client/app/composables/use-clients.ts

@@ -4,7 +4,7 @@ import { createGlobalState } from '@vueuse/core'
 export const useClients = createGlobalState(() => {
   const auth = useAuth()
   const signaling = useSignaling()
-  const toast = useToast()
+  const { emit } = useEventBus()
 
   const clients = shallowRef<ChadClient[]>([])
 
@@ -16,10 +16,17 @@ export const useClients = createGlobalState(() => {
 
     socket.on('clientChanged', (clientId: ChadClient['socketId'], updatedClient: UpdatedClient) => {
       const client = getClient(clientId)
+
+      if (!client)
+        return
+
       updateClient(clientId, updatedClient)
 
-      if (client && client.displayName !== updatedClient.displayName)
+      emit('client:updated', {
-        toast.add({ severity: 'info', summary: `${client.displayName} is now ${updatedClient.displayName}`, closable: false, life: 1000 })
+        socketId: clientId,
+        oldClient: client,
+        updatedClient,
+      })
     })
 
     socket.on('disconnect', () => {

client/app/composables/use-event-bus.ts

@@ -0,0 +1,42 @@
+import type { ChadClient, Consumer, Producer } from '#shared/types'
+import type { EventType } from 'mitt'
+import mitt from 'mitt'
+
+export interface AppEvents extends Record<EventType, unknown> {
+  'socket:connected': void
+  'socket:disconnected': void
+  'socket:authenticated': { socketId: string }
+
+  'client:added': ChadClient
+  'client:removed': ChadClient
+  'client:updated': { socketId: string, oldClient: ChadClient, updatedClient: Partial<ChadClient> }
+
+  'consumer:added': Consumer
+  'consumer:removed': Consumer
+  'consumer:paused': Consumer
+  'consumer:resumed': Consumer
+
+  'producer:added': Producer
+  'producer:removed': Producer
+  'producer:paused': Producer
+  'producer:resumed': Producer
+
+  'audio:muted': void
+  'audio:unmuted': void
+  'output:muted': void
+  'output:unmuted': void
+  'video:enabled': void
+  'video:disabled': void
+  'share:enabled': void
+  'share:disabled': void
+}
+
+const emitter = mitt<AppEvents>()
+
+export function useEventBus() {
+  return {
+    emit: emitter.emit,
+    on: emitter.on,
+    off: emitter.off,
+  }
+}

client/app/composables/use-mediasoup.ts

@@ -7,8 +7,6 @@ import { useDevices } from '~/composables/use-devices'
 import { usePreferences } from '~/composables/use-preferences'
 import { useSignaling } from '~/composables/use-signaling'
 
-type ProducerType = 'microphone' | 'video' | 'share'
-
 interface SpeakingClient {
   clientId: ChadClient['socketId']
   volume: number
@@ -28,8 +26,7 @@ const ICE_SERVERS: RTCIceServer[] = [
 ]
 
 export const useMediasoup = createSharedComposable(() => {
-  const toast = useToast()
+  const { emit } = useEventBus()
-  const sfx = useSfx()
 
   const signaling = useSignaling()
   const { addClient, removeClient, me } = useClients()
@@ -171,20 +168,24 @@ export const useMediasoup = createSharedComposable(() => {
       addClient(...joinedClients)
 
       if (me.value)
-        sfx.playRandomConnectionSound(me.value.socketId).then()
+        emit('socket:authenticated', { socketId: me.value.socketId })
-
-      toast.add({ severity: 'success', summary: 'Joined', closable: false, life: 1000 })
 
       await enableMic()
     })
 
     socket.on('newPeer', (client) => {
-      sfx.playRandomConnectionSound(client.socketId).then()
       addClient(client)
+      emit('client:added', client)
     })
 
     socket.on('peerClosed', (id) => {
+      const { getClient } = useClients()
+      const client = getClient(id)
+
       removeClient(id)
+
+      if (client)
+        emit('client:removed', client)
     })
 
     socket.on(
@@ -205,9 +206,6 @@ export const useMediasoup = createSharedComposable(() => {
           appData: { ...appData, socketId },
         })
 
-        if (kind === 'video')
-          sfx.playEvent('stream-on').then()
-
         if (producerPaused)
           consumer.pause()
 
@@ -218,19 +216,27 @@ export const useMediasoup = createSharedComposable(() => {
           raw: markRaw(consumer),
         }
 
+        emit('consumer:added', consumers.value[consumer.id]!)
+
         consumer.observer.on('resume', () => {
           consumers.value[consumer.id]!.paused = false
+
+          emit('consumer:resumed', consumers.value[consumer.id]!)
         })
 
         consumer.observer.on('pause', () => {
           consumers.value[consumer.id]!.paused = true
+
+          emit('consumer:paused', consumers.value[consumer.id]!)
         })
 
         consumer.observer.on('close', () => {
-          if (kind === 'video')
+          const consumerData = consumers.value[consumer.id]
-            sfx.playEvent('stream-off').then()
 
           delete consumers.value[consumer.id]
+
+          if (consumerData)
+            emit('consumer:removed', consumerData)
         })
 
         consumer.on('trackended', () => {
@@ -311,16 +317,27 @@ export const useMediasoup = createSharedComposable(() => {
       raw: markRaw(producer),
     }
 
+    emit('producer:added', producers.value[producer.id]!)
+
     producer.observer.on('pause', () => {
       producers.value[producer.id]!.paused = true
+
+      emit('producer:paused', producers.value[producer.id]!)
     })
 
     producer.observer.on('resume', () => {
       producers.value[producer.id]!.paused = false
+
+      emit('producer:resumed', producers.value[producer.id]!)
     })
 
     producer.observer.on('close', () => {
+      const producerData = producers.value[producer.id]
+
       delete producers.value[producer.id]
+
+      if (producerData)
+        emit('producer:removed', producerData)
     })
 
     producer.on('trackended', () => {

client/app/composables/use-sfx.ts

@@ -25,7 +25,10 @@ const EVENT_VOLUME: Record<SfxEvent, number> = {
   'connection': 0.1,
 }
 
+// TODO: refactor this shit
 export const useSfx = createSharedComposable(() => {
+  const { outputMuted } = useApp()
+
   async function play(src: string, volume = 0.2): Promise<void> {
     return new Promise((resolve) => {
       const howl = new Howl({
@@ -74,6 +77,10 @@ export const useSfx = createSharedComposable(() => {
 
   async function playRandomConnectionSound(seed: string) {
     await playEvent('stream-on')
+
+    if (outputMuted.value)
+      return
+
     await play(CONNECTION_SOUNDS[hashStringToNumber(seed, CONNECTION_SOUNDS.length)]!, 0.1)
   }
 

client/app/composables/use-signaling.ts

@@ -4,7 +4,7 @@ import { io } from 'socket.io-client'
 import { parseURL } from 'ufo'
 
 export const useSignaling = createSharedComposable(() => {
-  const toast = useToast()
+  const { emit } = useEventBus()
   const { me } = useAuth()
 
   const socket = shallowRef<Socket>()
@@ -41,9 +41,9 @@ export const useSignaling = createSharedComposable(() => {
 
   watch(connected, (connected) => {
     if (connected)
-      toast.add({ severity: 'success', summary: 'Connected', closable: false, life: 1000 })
+      emit('socket:connected')
     else
-      toast.add({ severity: 'error', summary: 'Disconnected', closable: false, life: 1000 })
+      emit('socket:disconnected')
   }, { immediate: true })
 
   watch(me, (me) => {

client/app/pages/gallery.vue

@@ -1,21 +1,23 @@
 <template>
   <div class="grid grid-cols-[1fr_1fr] gap-2">
     <GalleryCard
-      v-for="item in gallery"
+      v-for="producer in producers"
-      :key="item.client.socketId"
+      :key="`producer-${producer.id}`"
-      :client="item.client"
+      :client="me!"
-      :stream="item.stream"
+      :producer="producer"
+    />
+
+    <GalleryCard
+      v-for="consumer in consumers"
+      :key="`consumer-${consumer.consumer.id}`"
+      :client="consumer.client"
+      :consumer="consumer.consumer"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import type { ChadClient } from '#shared/types'
+import type { ChadClient, Consumer, Producer } from '#shared/types'
-
-interface GalleryItem {
-  client: ChadClient
-  stream: MediaStream
-}
 
 definePageMeta({
   name: 'Gallery',
@@ -24,39 +26,29 @@ definePageMeta({
 const { videoProducer, shareProducer } = useMediasoup()
 const { clients, me } = useClients()
 
-const gallery = computed(() => {
+const producers = computed(() => {
-  return clients.value.reduce<GalleryItem[]>(
+  return [videoProducer.value, shareProducer.value].filter(p => !!p && !!p.raw.track) as Producer[]
-    (acc, client) => {
+})
-      const { streaming, videoConsumers, shareConsumers } = useClient(client.socketId)
+
+const consumers = computed(() => {
+  return clients.value.reduce<{ client: ChadClient, consumer: Consumer }[]>((acc, client) => {
+    const { streaming, videoConsumers: clientVideoConsumers, shareConsumers: clientShareConsumers } = useClient(client.socketId)
 
     if (!streaming.value)
       return acc
 
-      for (const consumer of [...videoConsumers.value, ...shareConsumers.value]) {
+    for (const consumer of [...clientVideoConsumers.value, ...clientShareConsumers.value]) {
-        acc.push({
+      acc.push({ client, consumer })
-          client,
-          stream: new MediaStream([consumer.raw.track]),
-        })
     }
 
     return acc
-    },
+  }, [])
-    [videoProducer.value, shareProducer.value].reduce<GalleryItem[]>((acc, producer) => {
-      if (!me.value || !producer || !producer.raw.track)
-        return acc
-
-      acc.push({
-        client: me.value,
-        stream: new MediaStream([producer.raw.track]),
 })
 
-      return acc
+const hasItems = computed(() => producers.value.length > 0 || consumers.value.length > 0)
-    }, []),
-  )
-})
 
-watch(gallery, (gallery) => {
+watch(hasItems, (hasItems) => {
-  if (gallery.length > 0)
+  if (hasItems)
     return
 
   navigateTo({ name: 'Index' })

client/app/plugins/sfx-listener.ts

@@ -0,0 +1,57 @@
+export default defineNuxtPlugin(() => {
+  const { on } = useEventBus()
+  const sfx = useSfx()
+
+  // Connection sounds
+  on('socket:authenticated', ({ socketId }) => {
+    sfx.playRandomConnectionSound(socketId)
+  })
+
+  // Client events
+  on('client:added', (client) => {
+    sfx.playRandomConnectionSound(client.socketId)
+  })
+
+  on('client:removed', () => {
+    sfx.playEvent('stream-off')
+  })
+
+  // Audio mute/unmute
+  on('audio:muted', () => {
+    sfx.playEvent('mic-off')
+  })
+
+  on('audio:unmuted', () => {
+    sfx.playEvent('mic-on')
+  })
+
+  // Video/share toggle
+  on('video:enabled', () => {
+    sfx.playEvent('stream-on')
+  })
+
+  on('video:disabled', () => {
+    sfx.playEvent('stream-off')
+  })
+
+  on('share:enabled', () => {
+    sfx.playEvent('stream-on')
+  })
+
+  on('share:disabled', () => {
+    sfx.playEvent('stream-off')
+  })
+
+  // Consumer video streams
+  on('consumer:added', (consumer) => {
+    if (consumer.raw.kind === 'video') {
+      sfx.playEvent('stream-on')
+    }
+  })
+
+  on('consumer:removed', (consumer) => {
+    if (consumer.raw.kind === 'video') {
+      sfx.playEvent('stream-off')
+    }
+  })
+})

client/app/plugins/toast-listener.ts

@@ -0,0 +1,62 @@
+export default defineNuxtPlugin(() => {
+  const { on } = useEventBus()
+  const toast = useToast()
+
+  // Socket events
+  on('socket:connected', () => {
+    toast.add({ severity: 'success', summary: 'Connected', life: 1000 })
+  })
+
+  on('socket:disconnected', () => {
+    toast.add({ severity: 'error', summary: 'Disconnected', life: 1000 })
+  })
+
+  on('socket:authenticated', () => {
+    toast.add({ severity: 'success', summary: 'Joined', life: 1000 })
+  })
+
+  // Client events
+  on('client:added', (client) => {
+    toast.add({
+      severity: 'info',
+      summary: `${client.displayName} connected`,
+      life: 1000,
+    })
+  })
+
+  on('client:removed', (client) => {
+    toast.add({
+      severity: 'info',
+      summary: `${client.displayName} disconnected`,
+      life: 1000,
+    })
+  })
+
+  on('client:updated', ({ oldClient, updatedClient }) => {
+    if (oldClient.displayName !== updatedClient.displayName) {
+      toast.add({
+        severity: 'info',
+        summary: `${oldClient.displayName} is now ${updatedClient.displayName}`,
+        life: 1000,
+      })
+    }
+  })
+
+  // Audio control
+  on('audio:muted', () => {
+    toast.add({ severity: 'info', summary: 'Microphone muted', life: 1000 })
+  })
+
+  on('audio:unmuted', () => {
+    toast.add({ severity: 'info', summary: 'Microphone activated', life: 1000 })
+  })
+
+  // Output mute control
+  on('output:muted', () => {
+    toast.add({ severity: 'info', summary: 'Sound muted', life: 1000 })
+  })
+
+  on('output:unmuted', () => {
+    toast.add({ severity: 'info', summary: 'Sound resumed', life: 1000 })
+  })
+})

client/package.json

@@ -22,6 +22,7 @@
     "howler": "^2.2.4",
     "lucide-vue-next": "^0.562.0",
     "mediasoup-client": "^3.18.6",
+    "mitt": "^3.0.1",
     "nuxt": "^4.2.2",
     "postcss": "^8.5.6",
     "primeicons": "^7.0.0",

client/yarn.lock

@@ -4070,6 +4070,7 @@ __metadata:
     howler: "npm:^2.2.4"
     lucide-vue-next: "npm:^0.562.0"
     mediasoup-client: "npm:^3.18.6"
+    mitt: "npm:^3.0.1"
     nuxt: "npm:^4.2.2"
     postcss: "npm:^8.5.6"
     primeicons: "npm:^7.0.0"