docs: retire the fixes that shipped and were confirmed in use

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

.github/workflows/build-windows.yml

@@ -0,0 +1,97 @@
+# Caminho rápido: só Windows x64, disparado à mão.
+#
+# O `release.yml` continua sendo o release de verdade (todas as plataformas,
+# publica release e alimenta o electron-updater). Este aqui existe para quando
+# você só quer um .exe para testar, sem marcar versão.
+#
+# Arquivo separado de propósito: o release.yml veio do upstream e recebe merges;
+# mexer nele criaria conflito a cada atualização.
+name: Build Windows (rápido)
+
+on:
+  workflow_dispatch:
+    inputs:
+      arch:
+        description: Arquitetura
+        required: false
+        default: x64
+        type: choice
+        options: [x64, arm64]
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    # windows-2022, não windows-latest: a imagem latest traz o Visual Studio 18,
+    # que o node-gyp embutido no electron-rebuild não detecta ao compilar os
+    # módulos nativos. Mesma razão documentada no release.yml.
+    runs-on: windows-2022
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
+        with:
+          version: 10.34.3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        with:
+          node-version: 20
+          cache: pnpm
+
+      # ~100MB de binários do Electron e das ferramentas do NSIS, baixados a
+      # cada execução sem isto. É o maior ganho depois de cortar o arm64.
+      - name: Cache Electron binaries
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~\AppData\Local\electron\Cache
+            ~\AppData\Local\electron-builder\Cache
+          key: electron-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: electron-cache-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build shared package
+        run: pnpm --filter @backspace/shared build
+
+      # O postinstall termina em `|| console.warn` para que quem não tem
+      # ferramentas de build consiga instalar. No CI isso transforma falha em
+      # sucesso silencioso: o instalador sai sem o módulo nativo e o app
+      # compartilha tela sem som, sem erro nenhum. Então verifica-se o
+      # resultado em vez de confiar no código de saída.
+      - name: Verify native audio module compiled
+        shell: bash
+        run: |
+          found=$(find node_modules/.pnpm -path '*electron-native-screenshare*' -name '*.node' 2>/dev/null | head -5)
+          if [ -z "$found" ]; then
+            echo "::error::electron-native-screenshare has no compiled .node — the installer would ship without system-audio capture"
+            find node_modules/.pnpm -maxdepth 1 -name 'electron-native-screenshare*' -printf '%p\n' 2>/dev/null || true
+            exit 1
+          fi
+          echo "OK:"; echo "$found"
+
+      - name: Compile desktop TypeScript
+        working-directory: packages/desktop
+        run: pnpm exec tsc
+
+      # --publish never: sem release, sem precisar de tag nem bump de versão.
+      # O instalador sai como artefato desta execução.
+      - name: Build installer
+        working-directory: packages/desktop
+        run: pnpm exec electron-builder --win --${{ inputs.arch || 'x64' }} --publish never
+        env:
+          CSC_IDENTITY_AUTO_DISCOVERY: "false"
+
+      - name: Upload installer
+        uses: actions/upload-artifact@v4
+        with:
+          name: backspace-windows-${{ inputs.arch || 'x64' }}
+          path: packages/desktop/dist-electron/*.exe
+          retention-days: 14
+          if-no-files-found: error

.github/workflows/publish-gitea.yml

@@ -0,0 +1,183 @@
+# Compila no GitHub, publica no Gitea.
+#
+# O GitHub entra só como máquina de build — é dele que vêm os runners Windows
+# de que o módulo nativo de áudio precisa. A distribuição fica no Gitea, que
+# serve os arquivos a qualquer um: assim o electron-updater não precisa de
+# credencial embutida no app, o que aconteceria com um repositório privado no
+# GitHub.
+name: Publicar no Gitea
+
+on:
+  push:
+    tags: ['v*']
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: Tag a publicar (ex. v1.1.0)
+        required: true
+        type: string
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - os: windows-2022
+            args: --win --x64
+          - os: ubuntu-latest
+            args: --linux --x64
+    runs-on: ${{ matrix.os }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd # v5.0.1
+
+      - name: Install Linux build dependencies
+        if: runner.os == 'Linux'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            libx11-dev libxtst-dev libxt-dev \
+            libxkbcommon-dev libxkbcommon-x11-dev libxkbfile-dev \
+            libxrandr-dev libxinerama-dev libx11-xcb-dev \
+            libpipewire-0.3-dev libpulse-dev
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
+        with:
+          version: 10.34.3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Cache Electron binaries
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.cache/electron
+            ~/.cache/electron-builder
+            ~\AppData\Local\electron\Cache
+            ~\AppData\Local\electron-builder\Cache
+          key: electron-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: electron-cache-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build shared package
+        run: pnpm --filter @backspace/shared build
+
+      # O postinstall termina em `|| console.warn` para quem não tem ferramentas
+      # de build. No CI isso esconde falha: o instalador sairia sem captura de
+      # áudio do sistema e ninguém saberia. Verifica-se o resultado.
+      - name: Verify native audio module compiled
+        if: runner.os == 'Windows'
+        shell: bash
+        run: |
+          found=$(find node_modules/.pnpm -path '*electron-native-screenshare*' -name '*.node' | head -5)
+          [ -n "$found" ] || { echo "::error::sem .node compilado — instalador sairia sem áudio do sistema"; exit 1; }
+          echo "$found"
+
+      - name: Compile desktop TypeScript
+        working-directory: packages/desktop
+        run: pnpm exec tsc
+
+      # --publish never: o electron-builder não sabe enviar para o Gitea. Ele
+      # gera os instaladores e o latest.yml (o índice que o app consulta), e o
+      # passo seguinte faz o upload.
+      - name: Build installers
+        working-directory: packages/desktop
+        run: pnpm exec electron-builder ${{ matrix.args }} --publish never
+        env:
+          CSC_IDENTITY_AUTO_DISCOVERY: "false"
+
+      - name: Upload to Gitea release
+        shell: bash
+        env:
+          GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}
+          GITEA_API: https://git.resenha.website/api/v1/repos/devsyncwrld/backspace
+          TAG: latest
+        run: |
+          set -uo pipefail
+          if [ -z "${GITEA_TOKEN:-}" ]; then
+            echo "::error::segredo GITEA_TOKEN não configurado"
+            exit 1
+          fi
+
+          # Sem -f e imprimindo o corpo: a versão anterior usava `curl -sf`, que
+          # engole a resposta de erro, então uma falha aqui só aparecia como um
+          # JSONDecodeError sem dizer o motivo.
+          api() {
+            local method=$1 path=$2; shift 2
+            curl -s -w '\n%{http_code}' -X "$method" \
+              -H "Authorization: token $GITEA_TOKEN" "$GITEA_API$path" "$@"
+          }
+          body() { sed '$d' <<<"$1"; }
+          code() { tail -n1 <<<"$1"; }
+          # jq em vez de python embutido: um heredoc multilinha dentro de um
+          # bloco literal de YAML encerra o bloco na primeira linha sem recuo.
+          json_id() { jq -r '.id // empty'; }
+
+          find_release() {
+            local r; r=$(api GET "/releases/tags/$TAG")
+            [ "$(code "$r")" = "200" ] && body "$r" | json_id || echo ""
+          }
+
+          # O corpo do POST fica em ASCII de proposito: o shell do runner
+          # Windows corrompe UTF-8 na requisicao e o Gitea recusa com
+          # "invalid UTF-8 within /name" (HTTP 422).
+          ID=$(find_release)
+          if [ -z "$ID" ]; then
+            R=$(api POST "/releases" -H 'Content-Type: application/json' \
+                 -d "{\"tag_name\":\"$TAG\",\"name\":\"Latest build\",\"target_commitish\":\"main\",\"body\":\"Installers published automatically by CI.\"}")
+            if [ "$(code "$R")" = "201" ]; then
+              ID=$(body "$R" | json_id)
+              echo "release criada: $ID"
+            else
+              echo "criação retornou HTTP $(code "$R"): $(body "$R")"
+              # O outro job da matriz pode tê-la criado no mesmo instante.
+              ID=$(find_release)
+              [ -n "$ID" ] || { echo "::error::não foi possível obter nem criar a release"; exit 1; }
+              echo "release encontrada após corrida: $ID"
+            fi
+          else
+            echo "release existente: $ID"
+          fi
+
+          # Remove só os anexos que esta plataforma vai repor, para os dois jobs
+          # não apagarem o trabalho um do outro.
+          R=$(api GET "/releases/$ID/assets")
+          if [ "$(code "$R")" = "200" ]; then
+            body "$R" | jq -r '.[] | "\(.id) \(.name)"' | while read -r aid aname; do
+              case "$aname" in
+                ${{ runner.os == 'Windows' && '*.exe|latest.yml' || '*.AppImage|*.deb|latest-linux.yml' }})
+                  echo "removendo anexo antigo: $aname"
+                  api DELETE "/releases/$ID/assets/$aid" > /dev/null ;;
+              esac
+            done
+          fi
+
+          shopt -s nullglob
+          sent=0
+          for f in packages/desktop/dist-electron/*.exe \
+                   packages/desktop/dist-electron/*.AppImage \
+                   packages/desktop/dist-electron/*.deb \
+                   packages/desktop/dist-electron/latest*.yml; do
+            name=$(basename "$f")
+            R=$(api POST "/releases/$ID/assets?name=$name" -F "attachment=@$f")
+            if [ "$(code "$R")" != "201" ]; then
+              echo "::error::falha ao enviar $name — HTTP $(code "$R"): $(body "$R")"
+              exit 1
+            fi
+            echo "enviado: $name"
+            sent=$((sent+1))
+          done
+          [ "$sent" -gt 0 ] || { echo "::error::o build não produziu instaladores"; exit 1; }
+          echo "$sent arquivo(s) publicados"

.github/workflows/release.yml

@@ -14,22 +14,26 @@ jobs:
       fail-fast: false
       matrix:
         include:
-          # macOS — universal build (arm64 + x64) on Apple Silicon runner
+          # Fork: só as plataformas que o grupo usa. Windows arm64 saiu porque
-          - os: macos-latest
+          # dobrava o job mais lento (duas distribuições do Electron, módulos
-            args: --mac --arm64 --x64
+          # nativos compilados duas vezes) e ninguém roda Windows em ARM.
+          # Linux arm64 saiu pelo mesmo motivo. Com o arm64 fora, o passo que
+          # instalava o fpm nativo perdeu a razão de existir: ele só era
+          # necessário porque o fpm embutido no electron-builder é x86_64 e
+          # falhava no runner arm64.
+          # macOS removido neste fork: ninguém do grupo usa, e o runner macOS
+          # é cobrado a 10x num repositório privado — era a plataforma mais cara
+          # da matriz, compilada em toda tag para zero usuários.
           # Windows — x64 + arm64 on x64 runner.
           # Pinned to windows-2022 (VS 2022 / v17): the windows-latest image
           # ships VS "18", which the node-gyp bundled with electron-rebuild
           # cannot detect ("unknown version undefined") when compiling
           # uiohook-napi in postinstall.
           - os: windows-2022
-            args: --win --x64 --arm64
+            args: --win --x64
           # Linux — x64 on x64 runner
           - os: ubuntu-latest
             args: --linux --x64
-          # Linux — arm64 on arm64 runner
-          - os: ubuntu-24.04-arm
-            args: --linux --arm64
 
     runs-on: ${{ matrix.os }}
 
@@ -59,17 +63,6 @@ jobs:
             libxkbcommon-dev libxkbcommon-x11-dev libxkbfile-dev \
             libxrandr-dev libxinerama-dev libx11-xcb-dev
 
-      - name: Install fpm for .deb packaging
-        if: runner.os == 'Linux'
-        # electron-builder bundles an x86_64-only fpm; on the arm64 runner it
-        # aborts the .deb target with "cannot execute binary file: Exec format
-        # error". Install fpm natively and set USE_SYSTEM_FPM (below) so both
-        # arches package their .deb with a host-native fpm. ruby-dev + make are
-        # needed for fpm's native gem dependencies.
-        run: |
-          sudo apt-get install -y ruby ruby-dev build-essential
-          sudo gem install --no-document fpm
-
       - name: Setup pnpm
         uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v5.0.0
         with:
@@ -97,7 +90,3 @@ jobs:
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CSC_IDENTITY_AUTO_DISCOVERY: "false"
-          # Use the host-native fpm installed above instead of electron-builder's
-          # bundled x86_64 fpm (which can't run on the arm64 runner). No-op on
-          # macOS/Windows, which don't build .deb.
-          USE_SYSTEM_FPM: "true"

Caddyfile

@@ -10,3 +10,9 @@
     # Backspace API, WebSocket, and frontend — Docker DNS resolves "backspace"
     reverse_proxy backspace:3000
 }
+
+# Gitea — servidor git próprio (stack em /opt/gitea). Alcançado pelo nome do
+# container na rede interna; o Gitea não publica porta nenhuma no host.
+{$GIT_DOMAIN:git.resenha.website} {
+    reverse_proxy gitea:3000
+}

docs/build-desktop.md

@@ -0,0 +1,56 @@
+# Gerar o instalador do app desktop
+
+O workflow **`.github/workflows/release.yml`** (herdado do upstream) já compila
+para macOS, Windows e Linux e publica os instaladores como release. Ele dispara
+ao empurrar uma tag `v*`.
+
+Não foi preciso escrever workflow novo — foi preciso **adaptá-lo ao fork**.
+
+## Por que GitHub e não Gitea
+
+O Gitea desta instância não tem Actions habilitado, e mesmo habilitado ele
+**não oferece máquinas hospedadas**: seria preciso registrar um PC Windows
+como runner e mantê-lo ligado. O GitHub fornece runners Windows prontos, que é
+exatamente o que falta — o módulo nativo do compartilhamento de áudio usa
+WASAPI e só compila no Windows, com o compilador da Microsoft.
+
+O Gitea continua sendo o repositório principal. O GitHub entra apenas como
+espelho para compilar.
+
+## Passos (uma vez)
+
+1. Criar um repositório no GitHub — o `electron-builder.yml` está apontado para
+   `syncwrld/resenhacord`. **Se o seu for outro nome, ajuste lá.**
+2. Adicionar o espelho e empurrar:
+   ```
+   cd /opt/backspace
+   git remote add github git@github.com:syncwrld/resenhacord.git
+   git push github main
+   ```
+3. Marcar uma versão e empurrar a tag — é ela que dispara a compilação:
+   ```
+   git tag v1.0.1 && git push github v1.0.1
+   ```
+4. Os instaladores aparecem na aba Releases do GitHub em ~15 minutos.
+
+## O que isso resolve de quebra
+
+O `electron-updater` já estava instalado no projeto mas **sem feed** — o app
+não se atualizava sozinho. Como o `publish` agora aponta para as releases do
+fork, o app passa a encontrar versões novas por conta própria. Ninguém do grupo
+precisa reinstalar na mão de novo.
+
+## Adaptações feitas para o fork
+
+| O quê | Por quê |
+|---|---|
+| `publish.owner` → `syncwrld` | Apontava para o repositório do upstream |
+| `postinstall` reconstrói também `electron-native-screenshare` | Rodava `electron-rebuild` só no `uiohook-napi`. O módulo novo seria compilado para a ABI do Node em vez da do Electron e falharia ao carregar — e como o carregamento degrada em silêncio, o sintoma seria "compartilha sem som", sem erro visível |
+| Nota sobre `asarUnpack` | O `uiohook-napi` tem `build/` excluído do asar porque distribui binários prontos. O módulo novo **não** distribui: `build/Release/*.node` é a única cópia e não pode ser excluída |
+
+## Detalhe herdado que vale preservar
+
+O runner do Windows está fixado em `windows-2022`, não `windows-latest`. O
+comentário no workflow explica: a imagem `latest` traz o Visual Studio 18, que
+o node-gyp embutido no `electron-rebuild` não detecta ("unknown version
+undefined"). Não mude isso sem testar.

docs/roadmap-resenha.md

@@ -0,0 +1,144 @@
+# Roadmap — fork Resenha
+
+Plano de features próprias desta instância. Arquivo exclusivo do fork
+(nome com sufixo para não colidir com arquivos do upstream em merges).
+
+Escrito em português por ser documento de planejamento do dono do fork; o
+código e os commits seguem em inglês, como o resto do repositório.
+
+## Entregue
+
+| Feature | Commit | Nota |
+|---|---|---|
+| Ir para a call clicando no nome do canal | `c70b0095` | Exigiu o `voiceStore` passar a guardar o espaço da call — antes ele não sabia onde a call estava assim que o usuário navegava para outro servidor |
+| Botão de GIF redesenhado | `20526e1b` | Contorno vazado com letras cheias, no lugar do bloco sólido |
+| Explorador de GIF no banner | `20526e1b` | Sem upload: banner já aceita URL absoluta no cliente e no servidor |
+| Teste de microfone com retorno | `bfe62d70` | `AudioManager.startMicTest/stopMicTest`; devolve o microfone ao parar, com duas travas independentes |
+| Bloco de atividade no perfil | `d7da0ff2` | `ProfileActivity`; inclui correção de validação de assets no servidor |
+| Favoritar GIFs + categorias (#6) | `fb662bfe` | Favoritos no servidor, por conta; guarda o resultado inteiro porque o provedor não busca por id |
+| Registro de auditoria (#9) | `bbb190cb` | Tabela append-only genérica; 8 ganchos; sair ≠ ser expulso |
+| Estatísticas do grupo | `18300517` | Tabela própria de sessões de voz; ganchos no ponto único de entrada/saída |
+| Spotify por OAuth (atividade com capa e progresso) | `75316b08` | Token só no servidor; `state` assinado; atividades por fonte para não brigar com o detector do Electron |
+| Menu do próprio nome | `f5451e1b` | Perfil, status e copiar ID. Sem Clips/trocar conta — não existem aqui |
+| Cronômetro da call | `f5451e1b` | `startedAt` do servidor; zera sozinho porque sala vazia é destruída |
+| Correções do Spotify (sincronia, sumiço, barra) | `c899253e` | Pausa virou estado; horário do servidor no `ready` corrige relógio |
+| Soundboard no app desktop | `c899253e` | `window.prompt` não existe no Electron; campo inline no lugar |
+| Áudio do sistema sem eco | `d525bbb8` `5b848432` | Módulo nativo com isolamento por processo + ganho e preset de música |
+| Instaladores publicados pelo Gitea | `ce6bba05` | GitHub compila, Gitea distribui; atualização automática ligada |
+| Fundação de i18n (en + pt-BR) | `688a1335` | `src/i18n/`; pt-BR é parcial e cai para inglês. Aba Idioma nas configurações |
+| Preview de perfil nos participantes da call | (ver git log) | O popout já existia e era aberto de 11 lugares; **nenhum era de voz**. Ligado nas linhas da lista de voz e no nome dos tiles da grade |
+
+## Já existia no código (verificado, não construir de novo)
+
+- **Animação de digitação** — `TypingIndicator.tsx`, três pontos `animate-bounce`
+  escalonados em 0/150/300ms.
+- **Sons de call/stream** — `SoundController.tsx`, montado no `AppLayout`:
+  stream started/ended, alguém entra/sai da tela, entra/sai da call, câmera,
+  mute, ringing. Os `.ogg` estão em `web/public/sounds/`.
+- **Preview de perfil ancorado** — `uiStore.openUserProfile(user, anchor, placement)`
+  guarda `userProfilePopout`; popout posicionado no desktop, tela cheia no
+  mobile. Já era aberto por mensagens, menções, avatares, lista de membros,
+  DMs e painel de atividade. O que faltava era só a voz — agora ligado.
+  Continua faltando o bloco de atividade do print do Discord, que é a #8.
+
+Se qualquer um dos dois não se manifestar em uso, o trabalho é **depuração**,
+não implementação.
+
+## Pendente — pedido original
+
+Ordem sugerida: as pequenas primeiro, as grandes uma de cada vez.
+
+| # | Feature | Tamanho | Observação técnica |
+|---|---|---|---|
+
+## Pendente — ideias aprovadas
+
+| Feature | Tamanho | Observação técnica |
+|---|---|---|
+| Watch party | Grande | O screen share do LiveKit já existe; falta sincronizar posição de reprodução entre participantes |
+| Emojis e stickers do grupo | Média | `UPLOAD_DIR` e o pipeline de upload já existem; falta tabela por espaço e resolução no render de mensagem |
+
+## Regra de idioma (a partir de 2026-08-31)
+
+Funcionalidade nova sai com interface em **pt-BR**, e a cada update um sistema
+existente é traduzido. Os dois idiomas **coexistem**. Código, comentários e
+commits seguem em inglês.
+
+A fundação está pronta (`src/i18n/`). Para traduzir um sistema: adicione as
+chaves em `locales/en.ts`, traduza em `locales/pt-BR.ts` e troque as strings
+fixas por `t('chave')`. O que faltar cai para o inglês sozinho.
+
+### Sistemas já traduzidos
+
+- Configurações → navegação e aba Idioma
+- Configurações → Voz (dispositivo de entrada, volume, teste de microfone)
+- Cartão de perfil (sobre mim, membro desde, enviar mensagem, atividade)
+- Configurações → Privacidade
+- Configurações → Conexões (nasceu bilíngue)
+- Seletor de GIF
+- Chat: composer e mensagens (placeholder, anexos, responder, reações)
+- Barra lateral: servidores, canais e menus de contexto
+- Lista de membros (grupos por cargo, carregamento)
+- Registro de auditoria e Estatísticas (nasceram bilíngues)
+
+### Fila sugerida de tradução
+
+Mensagens e composer · lista de membros · servidores e canais · amigos e DMs ·
+modais de convite · configurações restantes · telas de erro
+
+## Correções pendentes
+
+| Problema | Causa provável | Correção |
+|---|---|---|
+
+
+## App desktop — já existia (verificado 2026-08-31)
+
+As três pedidas já estão implementadas e ligadas de ponta a ponta. **Não
+construir de novo.**
+
+- **Bandeja** — `createTray()` em `desktop/src/main.ts`, chamada na inicialização;
+  fechar a janela esconde em vez de sair (`mainWindow.on('close')`).
+- **Notificações nativas** — `showNotification()` no processo principal, canal
+  IPC `show-notification`, e o web já chama por `platform/notifications.ts`.
+- **Áudio do sistema no compartilhamento** — `setDisplayMediaRequestHandler`
+  devolve `audio: 'loopback'`; existe caixa de seleção no `ScreenSharePicker`
+  ligada a `screenShareConfig.shareAudio`, que atravessa o IPC.
+
+Se algum não se manifestar em uso, o trabalho é **depuração**, não construção.
+
+
+## Aprovadas, a fazer depois (2026-08-31)
+
+Escolhidas pelo dono, inspiradas no Discord. **Nenhuma iniciada.**
+
+| Feature | Tamanho | Observação técnica |
+|---|---|---|
+| **Fixar mensagens no canal** | Pequena | Tabela de fixadas por canal + rota de listagem; permissão natural é `MANAGE_MESSAGES` |
+| **Busca com filtros** | Média | `SearchPopover` já existe; falta filtrar por autor, canal e presença de anexo — e índice no banco, senão fica lento quando o histórico crescer |
+| **Resposta rápida de voz (soundboard por atalho)** | Pequena | O soundboard já está pronto; falta só marcar favoritos e ligar a atalhos de teclado, sem abrir painel. Cuidado: o limite de repetição do servidor continua valendo e é o que impede virar metralhadora |
+| **Cargos com ícone e exibição separada** | Média | Cargos e cores já existem; falta ícone, o campo "exibir separadamente" e o agrupamento na lista de membros |
+
+
+## Ideias novas — a avaliar
+
+Ordenadas por relação valor/custo para um servidor de grupo fechado.
+
+| Sistema | Tamanho | Por que faz sentido aqui |
+|---|---|---|
+| **Backup fora da VPS** | Pequena | Hoje app, banco, uploads, backups e as três cópias do repositório morrem no mesmo evento. Um envio periódico para fora resolve |
+| **Aniversários e lembretes** | Pequena | Alto retorno afetivo, custo baixo: campo de data + verificação diária + mensagem no canal |
+| **Perfis por servidor** | Média | Apelido e avatar diferentes por espaço, como no Discord. O modelo já tem membro por espaço |
+| **Eventos agendados com presença** | Média | "Sexta 21h" com confirmação. Encaixa nas notificações e no PWA já instalado |
+| **Notificações push de verdade** | Média | O `vite-plugin-pwa` e o service worker já estão lá; falta Web Push (VAPID) e o registro no servidor |
+| **Níveis e conquistas** | Média | Gamificação por tempo em call e mensagens. **Mesmo registro de eventos da auditoria e das estatísticas** — três features, um mecanismo |
+| **Clipes de call** | Grande | "Salvar os últimos 30 segundos" depois de alguém falar besteira. O LiveKit tem egress; exige buffer contínuo e armazenamento |
+| **Fila de música compartilhada** | Grande | Um participante-robô publicando faixa de áudio na sala LiveKit. É o que mais muda o uso de um servidor de amigos, e o mais caro |
+| **Autenticação em duas etapas** | Média | Só faz sentido depois de decidir o modelo de cadastro |
+
+## Dependência que vale respeitar
+
+**Auditoria (#9) e Estatísticas compartilham o mesmo mecanismo**: uma tabela de
+eventos append-only no servidor. Construir a auditoria primeiro e as
+estatísticas como leitura agregada dessa mesma tabela evita escrever dois
+sistemas de registro paralelos que divergem com o tempo.

package.json

@@ -1,8 +1,8 @@
 {
   "name": "backspace",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
-  "description": "Open, self-hosted communication platform — text, voice, video, and federation",
+  "description": "Open, self-hosted communication platform \u2014 text, voice, video, and federation",
   "license": "AGPL-3.0-only",
   "author": "Jannis Braun",
   "homepage": "https://github.com/TheZwiss/backspace",
@@ -32,8 +32,9 @@
   "pnpm": {
     "onlyBuiltDependencies": [
       "better-sqlite3",
-      "esbuild",
       "electron",
+      "electron-native-screenshare",
+      "esbuild",
       "sharp"
     ],
     "patchedDependencies": {

packages/desktop/electron-builder.yml

@@ -14,14 +14,27 @@ files:
   - "!**/node_modules/uiohook-napi/build/**"
   - "!**/node_modules/uiohook-napi/build.bak/**"
   - "!**/node_modules/uiohook-napi/bin/**"
+  # electron-native-screenshare has no prebuilds — build/Release/*.node is the
+  # only copy, so it must NOT be excluded the way uiohook-napi's is. asarUnpack
+  # below takes it out of the archive so the loader can find it.
 asarUnpack:
   - "**/*.node"
 npmRebuild: false
 afterPack: ./scripts/afterPack.js
 publish:
-  - provider: github
+  # Updates are served from this fork's own Gitea, not from GitHub.
-    owner: TheZwiss
+  #
-    repo: backspace
+  # GitHub is only the build machine — it has the Windows runners the native
+  # audio module needs. Its repository is private, and electron-updater against
+  # a private GitHub repo would need a token shipped inside the app, which is a
+  # leaked token. Gitea serves release assets to anyone, so no credential ends
+  # up in the installer.
+  #
+  # The tag is fixed at `latest` on purpose: electron-updater fetches
+  # latest.yml before it knows which version exists, so the URL cannot contain
+  # a version. CI replaces that release's assets on every publish.
+  - provider: generic
+    url: https://git.resenha.website/devsyncwrld/backspace/releases/download/latest/
 protocols:
   - name: Backspace
     schemes:

packages/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backspace/desktop",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "license": "AGPL-3.0-only",
   "description": "Backspace",
@@ -18,9 +18,10 @@
     "clean": "rm -rf dist dist-electron",
     "test": "vitest run",
     "test:watch": "vitest",
-    "postinstall": "electron-rebuild -f -w uiohook-napi || node -e \"console.warn('[desktop] uiohook-napi native rebuild skipped - needs build tools (make, g++, python3). Only required to RUN the desktop app; the server, web client, and Docker image are unaffected.')\""
+    "postinstall": "electron-rebuild -f -w uiohook-napi,electron-native-screenshare || node -e \"console.warn('[desktop] uiohook-napi native rebuild skipped - needs build tools (make, g++, python3). Only required to RUN the desktop app; the server, web client, and Docker image are unaffected.')\""
   },
   "dependencies": {
+    "electron-native-screenshare": "^1.2.0",
     "electron-updater": "^6.3.0",
     "uiohook-napi": "^1.5.5"
   },

packages/desktop/src/main.ts

@@ -265,6 +265,102 @@ function applyLoginItemSettings(openAtLogin: boolean, startMinimized: boolean):
   }
 }
 
+// ─── Native system-audio capture ────────────────────────────────────────────
+//
+// Electron's own `audio: 'loopback'` captures the whole output mix, which
+// includes this app playing everyone else's voices — so those voices went back
+// out inside the screen share and every listener heard themselves. Not acoustic
+// echo: it is a digital copy of the output, so headphones never helped.
+//
+// This module captures with process-level isolation instead: only the shared
+// window (include mode), or everything except this app (exclude mode).
+interface NativeAudioMeta {
+  sampleRate: number;
+  channels: number;
+  bitsPerSample: number;
+  isFloat: boolean;
+}
+
+interface NativeScreenShareAudio {
+  startCapture(processId?: number, isIncludeMode?: boolean, onData?: (data: Buffer, meta: NativeAudioMeta) => void): boolean;
+  stopCapture(): boolean;
+  getPidFromWindowHandle(windowHandle: number): number;
+  isAvailable(): boolean;
+  getLoadError(): string | null;
+}
+
+let nativeAudio: NativeScreenShareAudio | null = null;
+try {
+  // Required lazily and defensively: a native module that fails to load must
+  // degrade to sharing without audio, never stop the app from starting.
+  nativeAudio = require('electron-native-screenshare') as NativeScreenShareAudio;
+  if (!nativeAudio.isAvailable()) {
+    console.warn('[Main:ScreenShare] Native audio unavailable:', nativeAudio.getLoadError());
+    nativeAudio = null;
+  }
+} catch (err) {
+  console.warn('[Main:ScreenShare] Native audio module missing:', err);
+  nativeAudio = null;
+}
+
+let nativeAudioActive = false;
+
+/**
+ * Windows and Linux hand desktopCapturer ids of the form `window:<handle>:<n>`.
+ * Recovering the handle lets us capture only that window's audio, which is
+ * better than excluding ourselves: a game's sound goes out, the rest of the
+ * desktop does not.
+ */
+function windowHandleFromSourceId(sourceId: string): number | null {
+  const match = /^window:(\d+)/.exec(sourceId);
+  if (!match) return null;
+  const handle = Number(match[1]);
+  return Number.isFinite(handle) && handle > 0 ? handle : null;
+}
+
+function startNativeAudioCapture(sourceId: string): boolean {
+  if (!nativeAudio || nativeAudioActive) return false;
+
+  let targetPid = process.pid;
+  let includeMode = false;
+
+  const handle = windowHandleFromSourceId(sourceId);
+  if (handle !== null) {
+    const pid = nativeAudio.getPidFromWindowHandle(handle);
+    // pid 0 means the handle did not resolve; fall back to excluding ourselves
+    // rather than capturing nothing.
+    if (pid > 0) {
+      targetPid = pid;
+      includeMode = true;
+    }
+  }
+
+  try {
+    const started = nativeAudio.startCapture(targetPid, includeMode, (data, meta) => {
+      if (!mainWindow || mainWindow.isDestroyed()) return;
+      mainWindow.webContents.send('native-audio-data', data, meta);
+    });
+    nativeAudioActive = started;
+    console.log('[Main:ScreenShare] Native audio', started ? 'started' : 'failed',
+      includeMode ? `(only pid ${targetPid})` : '(excluding self)');
+    return started;
+  } catch (err) {
+    console.error('[Main:ScreenShare] Native audio start failed:', err);
+    nativeAudioActive = false;
+    return false;
+  }
+}
+
+function stopNativeAudioCapture(): void {
+  if (!nativeAudio || !nativeAudioActive) return;
+  try {
+    nativeAudio.stopCapture();
+  } catch (err) {
+    console.warn('[Main:ScreenShare] Native audio stop failed:', err);
+  }
+  nativeAudioActive = false;
+}
+
 // ─── Tray Icon ──────────────────────────────────────────────────────────────
 
 function generateFallbackTrayIcon(): Electron.NativeImage {
@@ -594,6 +690,10 @@ function registerIpcHandlers(): void {
   ipcMain.handle('get-app-version', () => app.getVersion());
 
   // Screen share picker coordination (used by setDisplayMediaRequestHandler)
+  ipcMain.on('native-audio-stop', () => {
+    stopNativeAudioCapture();
+  });
+
   ipcMain.on('screen-share-selected', (_event, _sourceId: string | null, _shareAudio?: boolean) => {
     // Handled via ipcMain.once in the display media handler — this is just
     // a safety net to prevent unhandled-message warnings
@@ -953,7 +1053,19 @@ if (!gotTheLock) {
         //     `PulseaudioLoopbackForScreenShare` feature flag we enable above.
         //     Fails on PipeWire-only systems without pulse compat — the
         //     renderer catches that and toasts the user.
-        callback({ video: selected, ...(shareAudio ? { audio: 'loopback' } : {}) });
+        // Audio no longer rides on the Electron stream: `loopback` would put
+        // this app's own output (everyone else's voices) back into the share.
+        // The native module captures it separately, isolated by process, and
+        // the renderer turns it into the track LiveKit publishes.
+        if (shareAudio) {
+          const started = startNativeAudioCapture(sourceId);
+          if (!started) {
+            // Tell the renderer so it can say the share is going out silently,
+            // instead of the user assuming sound is included.
+            mainWindow?.webContents.send('native-audio-unavailable');
+          }
+        }
+        callback({ video: selected });
       } catch (err) {
         console.error('[Main:ScreenShare] Handler error:', err);
         // @ts-ignore — deny the request without crashing

packages/desktop/src/preload.ts

@@ -65,6 +65,24 @@ contextBridge.exposeInMainWorld('backspace', {
   onScreenShareSources: (callback: (sources: unknown[]) => void) => {
     ipcRenderer.on('screen-share-sources', (_event, sources) => callback(sources));
   },
+  // Raw PCM from the native capture. Arrives ~50x/second; the renderer turns it
+  // into a MediaStreamTrack for LiveKit.
+  onNativeAudioData: (callback: (data: ArrayBuffer, meta: { sampleRate: number; channels: number; bitsPerSample: number; isFloat: boolean }) => void) => {
+    const listener = (_event: unknown, data: Uint8Array, meta: { sampleRate: number; channels: number; bitsPerSample: number; isFloat: boolean }) => {
+      // Copied out of the transferred buffer: reusing it across IPC messages
+      // would let a later chunk overwrite one still being read.
+      callback(data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength) as ArrayBuffer, meta);
+    };
+    ipcRenderer.on('native-audio-data', listener);
+    return () => ipcRenderer.off('native-audio-data', listener);
+  },
+  onNativeAudioUnavailable: (callback: () => void) => {
+    const listener = () => callback();
+    ipcRenderer.on('native-audio-unavailable', listener);
+    return () => ipcRenderer.off('native-audio-unavailable', listener);
+  },
+  stopNativeAudio: () => ipcRenderer.send('native-audio-stop'),
+
   selectScreenSource: (sourceId: string | null, shareAudio?: boolean) => {
     ipcRenderer.send('screen-share-selected', sourceId, shareAudio ?? true);
   },

packages/server/drizzle/0011_lethal_bruce_banner.sql

@@ -0,0 +1,9 @@
+CREATE TABLE `spotify_connections` (
+	`user_id` text PRIMARY KEY NOT NULL,
+	`access_token` text NOT NULL,
+	`refresh_token` text NOT NULL,
+	`expires_at` integer NOT NULL,
+	`spotify_user_id` text,
+	`created_at` integer NOT NULL,
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE cascade
+);

packages/server/drizzle/0012_sour_pixie.sql

@@ -0,0 +1,14 @@
+CREATE TABLE `gif_favorites` (
+	`user_id` text NOT NULL,
+	`gif_id` text NOT NULL,
+	`title` text NOT NULL,
+	`preview_url` text NOT NULL,
+	`url` text NOT NULL,
+	`width` integer NOT NULL,
+	`height` integer NOT NULL,
+	`created_at` integer NOT NULL,
+	PRIMARY KEY(`user_id`, `gif_id`),
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE INDEX `idx_gif_favorites_user_id` ON `gif_favorites` (`user_id`);

packages/server/drizzle/0013_fancy_betty_brant.sql

@@ -0,0 +1,15 @@
+CREATE TABLE `audit_events` (
+	`id` text PRIMARY KEY NOT NULL,
+	`space_id` text NOT NULL,
+	`actor_id` text,
+	`action` text NOT NULL,
+	`target_type` text,
+	`target_id` text,
+	`metadata` text,
+	`created_at` integer NOT NULL,
+	FOREIGN KEY (`space_id`) REFERENCES `spaces`(`id`) ON UPDATE no action ON DELETE cascade,
+	FOREIGN KEY (`actor_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE set null
+);
+--> statement-breakpoint
+CREATE INDEX `idx_audit_events_space_created` ON `audit_events` (`space_id`,`created_at`);--> statement-breakpoint
+CREATE INDEX `idx_audit_events_actor` ON `audit_events` (`actor_id`);

packages/server/drizzle/0014_mean_killer_shrike.sql

@@ -0,0 +1,14 @@
+CREATE TABLE `voice_sessions` (
+	`id` text PRIMARY KEY NOT NULL,
+	`space_id` text,
+	`channel_id` text NOT NULL,
+	`user_id` text NOT NULL,
+	`started_at` integer NOT NULL,
+	`ended_at` integer,
+	FOREIGN KEY (`space_id`) REFERENCES `spaces`(`id`) ON UPDATE no action ON DELETE cascade,
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE INDEX `idx_voice_sessions_space_started` ON `voice_sessions` (`space_id`,`started_at`);--> statement-breakpoint
+CREATE INDEX `idx_voice_sessions_user` ON `voice_sessions` (`user_id`);--> statement-breakpoint
+CREATE INDEX `idx_voice_sessions_ended` ON `voice_sessions` (`ended_at`);

packages/server/drizzle/0015_young_human_fly.sql

@@ -0,0 +1,12 @@
+CREATE TABLE `soundboard_sounds` (
+	`id` text PRIMARY KEY NOT NULL,
+	`space_id` text NOT NULL,
+	`name` text NOT NULL,
+	`filename` text NOT NULL,
+	`uploader_id` text,
+	`created_at` integer NOT NULL,
+	FOREIGN KEY (`space_id`) REFERENCES `spaces`(`id`) ON UPDATE no action ON DELETE cascade,
+	FOREIGN KEY (`uploader_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE set null
+);
+--> statement-breakpoint
+CREATE INDEX `idx_soundboard_space` ON `soundboard_sounds` (`space_id`);

packages/server/drizzle/meta/_journal.json

@@ -78,6 +78,41 @@
       "when": 1783035334526,
       "tag": "0010_broken_blazing_skull",
       "breakpoints": true
+    },
+    {
+      "idx": 11,
+      "version": "6",
+      "when": 1788190305853,
+      "tag": "0011_lethal_bruce_banner",
+      "breakpoints": true
+    },
+    {
+      "idx": 12,
+      "version": "6",
+      "when": 1788192490711,
+      "tag": "0012_sour_pixie",
+      "breakpoints": true
+    },
+    {
+      "idx": 13,
+      "version": "6",
+      "when": 1788193162813,
+      "tag": "0013_fancy_betty_brant",
+      "breakpoints": true
+    },
+    {
+      "idx": 14,
+      "version": "6",
+      "when": 1788193659704,
+      "tag": "0014_mean_killer_shrike",
+      "breakpoints": true
+    },
+    {
+      "idx": 15,
+      "version": "6",
+      "when": 1788194631751,
+      "tag": "0015_young_human_fly",
+      "breakpoints": true
     }
   ]
 }

packages/server/src/config.ts

@@ -76,6 +76,10 @@ export const config = {
   sourceCodeUrl,
   commit,
 
+  spotify: {
+    clientId: envOptional('SPOTIFY_CLIENT_ID'),
+    clientSecret: envOptional('SPOTIFY_CLIENT_SECRET'),
+  },
   livekit: {
     url: envOptional('LIVEKIT_URL'),
     apiKey: envOptional('LIVEKIT_API_KEY'),

packages/server/src/db/schema.ts

@@ -549,3 +549,99 @@ export const inviteRedemptions = sqliteTable('invite_redemptions', {
   inviteIdx: index('idx_invite_redemptions_invite_id').on(table.inviteId),
   userIdx: index('idx_invite_redemptions_user_id').on(table.userId),
 }));
+
+/**
+ * Spotify tokens, one row per user.
+ *
+ * Kept server-side on purpose: refreshing requires the client secret, so the
+ * browser never holds a Spotify token at all — it asks this server what is
+ * playing and this server talks to Spotify.
+ */
+export const spotifyConnections = sqliteTable('spotify_connections', {
+  userId: text('user_id').primaryKey().references(() => users.id, { onDelete: 'cascade' }),
+  accessToken: text('access_token').notNull(),
+  refreshToken: text('refresh_token').notNull(),
+  // Epoch millis at which accessToken stops working.
+  expiresAt: integer('expires_at').notNull(),
+  spotifyUserId: text('spotify_user_id'),
+  createdAt: integer('created_at').notNull(),
+});
+
+/**
+ * Favourited GIFs, one row per user per GIF.
+ *
+ * Stores the whole result rather than an id: the provider offers no lookup by
+ * id, so a favourites tab that only kept ids could not render without
+ * re-searching for something the user may never find again.
+ */
+export const gifFavorites = sqliteTable('gif_favorites', {
+  userId: text('user_id').notNull().references(() => users.id, { onDelete: 'cascade' }),
+  gifId: text('gif_id').notNull(),
+  title: text('title').notNull(),
+  previewUrl: text('preview_url').notNull(),
+  url: text('url').notNull(),
+  width: integer('width').notNull(),
+  height: integer('height').notNull(),
+  createdAt: integer('created_at').notNull(),
+}, (table) => ({
+  pk: primaryKey({ columns: [table.userId, table.gifId] }),
+  userIdx: index('idx_gif_favorites_user_id').on(table.userId),
+}));
+
+/**
+ * Append-only record of who changed what in a space.
+ *
+ * Deliberately generic (action + target + JSON metadata) rather than a column
+ * per event type: new actions must not require a migration. Statistics read
+ * this same table — two features, one mechanism, instead of two logs that
+ * drift apart.
+ */
+export const auditEvents = sqliteTable('audit_events', {
+  id: text('id').primaryKey(),
+  spaceId: text('space_id').notNull().references(() => spaces.id, { onDelete: 'cascade' }),
+  actorId: text('actor_id').references(() => users.id, { onDelete: 'set null' }),
+  action: text('action').notNull(),
+  targetType: text('target_type'),
+  targetId: text('target_id'),
+  // JSON blob; shape depends on `action`. Never trusted for permissions.
+  metadata: text('metadata'),
+  createdAt: integer('created_at').notNull(),
+}, (table) => ({
+  spaceIdx: index('idx_audit_events_space_created').on(table.spaceId, table.createdAt),
+  actorIdx: index('idx_audit_events_actor').on(table.actorId),
+}));
+
+/**
+ * One row per stay in a voice room, closed when the user leaves.
+ *
+ * Separate from `auditEvents` on purpose: that table records points in time,
+ * while a call is an interval. Storing joins and leaves as separate point
+ * events would make every statistics query pair rows by hand and guess at
+ * joins whose leave never arrived (a crash, a restart).
+ *
+ * `endedAt` null means still connected. `spaceId` is null for DM calls.
+ */
+export const voiceSessions = sqliteTable('voice_sessions', {
+  id: text('id').primaryKey(),
+  spaceId: text('space_id').references(() => spaces.id, { onDelete: 'cascade' }),
+  channelId: text('channel_id').notNull(),
+  userId: text('user_id').notNull().references(() => users.id, { onDelete: 'cascade' }),
+  startedAt: integer('started_at').notNull(),
+  endedAt: integer('ended_at'),
+}, (table) => ({
+  spaceIdx: index('idx_voice_sessions_space_started').on(table.spaceId, table.startedAt),
+  userIdx: index('idx_voice_sessions_user').on(table.userId),
+  openIdx: index('idx_voice_sessions_ended').on(table.endedAt),
+}));
+
+/** Soundboard clips, per space. The file lives in the normal upload dir. */
+export const soundboardSounds = sqliteTable('soundboard_sounds', {
+  id: text('id').primaryKey(),
+  spaceId: text('space_id').notNull().references(() => spaces.id, { onDelete: 'cascade' }),
+  name: text('name').notNull(),
+  filename: text('filename').notNull(),
+  uploaderId: text('uploader_id').references(() => users.id, { onDelete: 'set null' }),
+  createdAt: integer('created_at').notNull(),
+}, (table) => ({
+  spaceIdx: index('idx_soundboard_space').on(table.spaceId),
+}));

packages/server/src/index.ts

@@ -15,6 +15,11 @@ import { uploadRoutes } from './routes/uploads.js';
 import { filesRoutes } from './routes/files.js';
 import { dmRoutes } from './routes/dm.js';
 import { livekitRoutes } from './routes/livekit.js';
+import { spotifyRoutes } from './routes/spotify.js';
+import { auditRoutes } from './routes/audit.js';
+import { statsRoutes } from './routes/stats.js';
+import { soundboardRoutes } from './routes/soundboard.js';
+import { closeOrphanedVoiceSessions } from './utils/voiceSessions.js';
 import { socialRoutes } from './routes/social.js';
 import { settingsRoutes } from './routes/settings.js';
 import { utilRoutes } from './routes/utils.js';
@@ -109,6 +114,10 @@ async function main(): Promise<void> {
   // Initialize database
   getDb();
 
+  // A restart leaves voice sessions open with no way to know when they really
+  // ended. Sweep them before anything can read the statistics.
+  closeOrphanedVoiceSessions();
+
   // Reset orphaned `users.status` rows for locally-homed users. The previous
   // process's in-memory disconnect timers are gone, so any non-offline row
   // is stale by construction. Replicated (federated) rows are skipped — their
@@ -126,6 +135,10 @@ async function main(): Promise<void> {
   await app.register(filesRoutes);
   await app.register(dmRoutes);
   await app.register(livekitRoutes);
+  await app.register(spotifyRoutes);
+  await app.register(auditRoutes);
+  await app.register(statsRoutes);
+  await app.register(soundboardRoutes);
   await app.register(socialRoutes);
   await app.register(settingsRoutes);
   await app.register(utilRoutes);

packages/server/src/routes/audit.ts

@@ -0,0 +1,83 @@
+import type { FastifyInstance } from 'fastify';
+import { and, desc, eq, lt } from 'drizzle-orm';
+import { getDb, schema } from '../db/index.js';
+import { authenticate } from '../utils/auth.js';
+import { hasPermission } from '../utils/permissions.js';
+import { PermissionBits } from '@backspace/shared/src/permissions.js';
+import { AUDIT_PAGE_SIZE, type AuditAction, type AuditEvent } from '@backspace/shared/src/audit.js';
+
+export async function auditRoutes(app: FastifyInstance): Promise<void> {
+  app.get<{ Params: { id: string }; Querystring: { before?: string; limit?: string } }>(
+    '/api/spaces/:id/audit-log',
+    { preHandler: authenticate },
+    async (request, reply) => {
+      const { id } = request.params;
+
+      // Gated on MANAGE_SPACE rather than a new permission bit: the log names
+      // who did what to whom, which is administrator-shaped information, and a
+      // new bit would silently default to nobody until roles were re-edited.
+      if (!hasPermission(request.userId, id, PermissionBits.MANAGE_SPACE)) {
+        return reply.code(403).send({ error: 'Missing MANAGE_SPACE permission', statusCode: 403 });
+      }
+
+      const limit = Math.min(Math.max(Number(request.query.limit) || AUDIT_PAGE_SIZE, 1), AUDIT_PAGE_SIZE);
+      const db = getDb();
+
+      // Ids are snowflakes, so ordering by id is chronological and gives a
+      // stable cursor even when two events land in the same millisecond.
+      const where = request.query.before
+        ? and(eq(schema.auditEvents.spaceId, id), lt(schema.auditEvents.id, request.query.before))
+        : eq(schema.auditEvents.spaceId, id);
+
+      const rows = db.select({
+        id: schema.auditEvents.id,
+        spaceId: schema.auditEvents.spaceId,
+        action: schema.auditEvents.action,
+        targetType: schema.auditEvents.targetType,
+        targetId: schema.auditEvents.targetId,
+        metadata: schema.auditEvents.metadata,
+        createdAt: schema.auditEvents.createdAt,
+        actorId: schema.users.id,
+        actorUsername: schema.users.username,
+        actorDisplayName: schema.users.displayName,
+        actorAvatar: schema.users.avatar,
+      })
+        .from(schema.auditEvents)
+        .leftJoin(schema.users, eq(schema.auditEvents.actorId, schema.users.id))
+        .where(where)
+        .orderBy(desc(schema.auditEvents.id))
+        .limit(limit)
+        .all();
+
+      const events: AuditEvent[] = rows.map((r) => ({
+        id: r.id,
+        spaceId: r.spaceId,
+        action: r.action as AuditAction,
+        // Null when the account was deleted: the event stays, the actor does
+        // not — an audit log that vanished with its actor would be useless.
+        actor: r.actorId
+          ? { id: r.actorId, username: r.actorUsername!, displayName: r.actorDisplayName, avatar: r.actorAvatar }
+          : null,
+        targetType: r.targetType,
+        targetId: r.targetId,
+        metadata: parseMetadata(r.metadata),
+        createdAt: r.createdAt,
+      }));
+
+      return reply.code(200).send({ events, hasMore: events.length === limit });
+    },
+  );
+}
+
+/** Metadata is written by us, but a malformed row must not break the whole page. */
+function parseMetadata(raw: string | null): Record<string, unknown> | null {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw) as unknown;
+    return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
+      ? (parsed as Record<string, unknown>)
+      : null;
+  } catch {
+    return null;
+  }
+}

packages/server/src/routes/channels.ts

@@ -2,6 +2,7 @@ import type { FastifyInstance } from 'fastify';
 import { eq, and, inArray } from 'drizzle-orm';
 import { getDb, schema } from '../db/index.js';
 import { authenticate } from '../utils/auth.js';
+import { recordAuditEvent } from '../utils/auditLog.js';
 import { generateSnowflake } from '../utils/snowflake.js';
 import { isMember, hasPermission, getChannelSpaceId, PermissionBits, computePermissions } from '../utils/permissions.js';
 import { permissionsToString } from '@backspace/shared/src/permissions.js';
@@ -257,6 +258,15 @@ export async function channelRoutes(app: FastifyInstance): Promise<void> {
     // Return the channel with the creator's computed permissions (same shape as
     // the channel_created WS event) so the client can render it immediately
     // without waiting for the broadcast to round-trip.
+    recordAuditEvent({
+      spaceId: id,
+      actorId: request.userId,
+      action: 'channel.create',
+      targetType: 'channel',
+      targetId: channelId,
+      metadata: { name: channelData.name, type: channelData.type },
+    });
+
     const creatorPerms = computePermissions(request.userId, id, channelId);
     return reply.code(201).send({
       ...channelData,
@@ -346,6 +356,15 @@ export async function channelRoutes(app: FastifyInstance): Promise<void> {
       });
     }
 
+    recordAuditEvent({
+      spaceId,
+      actorId: request.userId,
+      action: 'channel.update',
+      targetType: 'channel',
+      targetId: id,
+      metadata: { name: channelData.name },
+    });
+
     return reply.code(200).send(channelData);
   });
 
@@ -418,6 +437,15 @@ export async function channelRoutes(app: FastifyInstance): Promise<void> {
       connectionManager.sendToUser(uid, deleteEvent);
     }
 
+    recordAuditEvent({
+      spaceId,
+      actorId: request.userId,
+      action: 'channel.delete',
+      targetType: 'channel',
+      targetId: id,
+      metadata: { name: channel.name },
+    });
+
     return reply.code(200).send({ success: true });
   });
 

packages/server/src/routes/gif.ts

@@ -1,5 +1,5 @@
 import type { FastifyInstance } from 'fastify';
-import { eq } from 'drizzle-orm';
+import { eq, and, desc } from 'drizzle-orm';
 import { getDb, schema } from '../db/index.js';
 import { authenticate } from '../utils/auth.js';
 import type { GifResult } from '@backspace/shared';
@@ -178,4 +178,68 @@ export async function gifRoutes(app: FastifyInstance): Promise<void> {
       return reply.code(200).send({ results: [], next: '' });
     }
   });
+
+  // ─── Favourites ──────────────────────────────────────────────────────────
+  // Kept per user and synced server-side so a favourite made on the phone is
+  // there on the desktop, which is the whole point of favouriting.
+
+  /** Cap per user: a favourites tab is a shortlist, not an archive. */
+  const MAX_FAVORITES = 200;
+
+  app.get('/api/gif/favorites', { preHandler: authenticate }, async (request, reply) => {
+    const db = getDb();
+    const rows = db.select().from(schema.gifFavorites)
+      .where(eq(schema.gifFavorites.userId, request.userId))
+      .orderBy(desc(schema.gifFavorites.createdAt))
+      .all();
+    const results: GifResult[] = rows.map((r) => ({
+      id: r.gifId, title: r.title, previewUrl: r.previewUrl,
+      url: r.url, width: r.width, height: r.height,
+    }));
+    return reply.code(200).send({ results });
+  });
+
+  app.post<{ Body: GifResult }>('/api/gif/favorites', { preHandler: authenticate }, async (request, reply) => {
+    const { id, title, previewUrl, url, width, height } = request.body ?? ({} as GifResult);
+    if (!id || typeof id !== 'string' || !previewUrl || !url) {
+      return reply.code(400).send({ error: 'id, previewUrl and url are required', statusCode: 400 });
+    }
+    // Only http(s): these become <img src> for everyone who opens the picker.
+    for (const candidate of [previewUrl, url]) {
+      if (!/^https?:\/\//.test(candidate)) {
+        return reply.code(400).send({ error: 'previewUrl and url must be http(s)', statusCode: 400 });
+      }
+    }
+
+    const db = getDb();
+    const count = db.select().from(schema.gifFavorites)
+      .where(eq(schema.gifFavorites.userId, request.userId)).all().length;
+    const existing = db.select().from(schema.gifFavorites)
+      .where(and(eq(schema.gifFavorites.userId, request.userId), eq(schema.gifFavorites.gifId, id))).get();
+    if (!existing && count >= MAX_FAVORITES) {
+      return reply.code(409).send({ error: `At most ${MAX_FAVORITES} favourites`, statusCode: 409 });
+    }
+
+    db.insert(schema.gifFavorites).values({
+      userId: request.userId,
+      gifId: id,
+      title: typeof title === 'string' ? title.slice(0, 200) : '',
+      previewUrl,
+      url,
+      width: Number.isFinite(width) ? width : 0,
+      height: Number.isFinite(height) ? height : 0,
+      createdAt: Date.now(),
+    }).onConflictDoNothing().run();
+
+    return reply.code(204).send();
+  });
+
+  app.delete<{ Params: { id: string } }>('/api/gif/favorites/:id', { preHandler: authenticate }, async (request, reply) => {
+    const db = getDb();
+    db.delete(schema.gifFavorites)
+      .where(and(eq(schema.gifFavorites.userId, request.userId), eq(schema.gifFavorites.gifId, request.params.id)))
+      .run();
+    return reply.code(204).send();
+  });
+
 }

packages/server/src/routes/soundboard.ts

@@ -0,0 +1,85 @@
+import type { FastifyInstance } from 'fastify';
+import { eq } from 'drizzle-orm';
+import { getDb, schema } from '../db/index.js';
+import { authenticate } from '../utils/auth.js';
+import { hasPermission, isMember } from '../utils/permissions.js';
+import { PermissionBits } from '@backspace/shared/src/permissions.js';
+import { generateSnowflake } from '../utils/snowflake.js';
+
+/** A soundboard is a shortlist of gags, not a media library. */
+const MAX_SOUNDS_PER_SPACE = 48;
+const MAX_NAME_LENGTH = 32;
+
+export async function soundboardRoutes(app: FastifyInstance): Promise<void> {
+  app.get<{ Params: { id: string } }>(
+    '/api/spaces/:id/sounds',
+    { preHandler: authenticate },
+    async (request, reply) => {
+      if (!isMember(request.params.id, request.userId)) {
+        return reply.code(403).send({ error: 'Not a member of this space', statusCode: 403 });
+      }
+      const rows = getDb().select().from(schema.soundboardSounds)
+        .where(eq(schema.soundboardSounds.spaceId, request.params.id)).all();
+      return reply.code(200).send({ sounds: rows });
+    },
+  );
+
+  app.post<{ Params: { id: string }; Body: { name?: string; filename?: string } }>(
+    '/api/spaces/:id/sounds',
+    { preHandler: authenticate },
+    async (request, reply) => {
+      const { id } = request.params;
+      // Adding is gated but playing is not: anyone in the call may press a
+      // button, only the people who run the space decide what the buttons are.
+      if (!hasPermission(request.userId, id, PermissionBits.MANAGE_SPACE)) {
+        return reply.code(403).send({ error: 'Missing MANAGE_SPACE permission', statusCode: 403 });
+      }
+
+      const name = (request.body?.name ?? '').trim().slice(0, MAX_NAME_LENGTH);
+      const filename = (request.body?.filename ?? '').trim();
+      if (!name || !filename) {
+        return reply.code(400).send({ error: 'name and filename are required', statusCode: 400 });
+      }
+      // The filename is a key into the upload directory, never a path.
+      if (filename.includes('/') || filename.includes('\\') || filename.includes('..')) {
+        return reply.code(400).send({ error: 'Invalid filename', statusCode: 400 });
+      }
+
+      const db = getDb();
+      const count = db.select().from(schema.soundboardSounds)
+        .where(eq(schema.soundboardSounds.spaceId, id)).all().length;
+      if (count >= MAX_SOUNDS_PER_SPACE) {
+        return reply.code(409).send({ error: `At most ${MAX_SOUNDS_PER_SPACE} sounds`, statusCode: 409 });
+      }
+
+      const row = {
+        id: generateSnowflake(),
+        spaceId: id,
+        name,
+        filename,
+        uploaderId: request.userId,
+        createdAt: Date.now(),
+      };
+      db.insert(schema.soundboardSounds).values(row).run();
+      return reply.code(201).send(row);
+    },
+  );
+
+  app.delete<{ Params: { id: string } }>(
+    '/api/sounds/:id',
+    { preHandler: authenticate },
+    async (request, reply) => {
+      const db = getDb();
+      const sound = db.select().from(schema.soundboardSounds)
+        .where(eq(schema.soundboardSounds.id, request.params.id)).get();
+      if (!sound) return reply.code(404).send({ error: 'Sound not found', statusCode: 404 });
+
+      if (!hasPermission(request.userId, sound.spaceId, PermissionBits.MANAGE_SPACE)) {
+        return reply.code(403).send({ error: 'Missing MANAGE_SPACE permission', statusCode: 403 });
+      }
+
+      db.delete(schema.soundboardSounds).where(eq(schema.soundboardSounds.id, request.params.id)).run();
+      return reply.code(204).send();
+    },
+  );
+}

packages/server/src/routes/spaces.ts

@@ -3,6 +3,7 @@ import type { FastifyInstance } from 'fastify';
 import { eq, and, inArray } from 'drizzle-orm';
 import { getDb, getRawDb, schema } from '../db/index.js';
 import { authenticate } from '../utils/auth.js';
+import { recordAuditEvent } from '../utils/auditLog.js';
 import { generateSnowflake } from '../utils/snowflake.js';
 import { isMember, isSpaceOwner, isBanned, hasPermission, computePermissions, PermissionBits } from '../utils/permissions.js';
 import { DEFAULT_EVERYONE_PERMISSIONS, ALL_PERMISSIONS, permissionsToString } from '@backspace/shared/src/permissions.js';
@@ -489,6 +490,15 @@ export async function spaceRoutes(app: FastifyInstance): Promise<void> {
       space: spaceData,
     });
 
+    recordAuditEvent({
+      spaceId: id,
+      actorId: request.userId,
+      action: 'space.update',
+      targetType: 'space',
+      targetId: id,
+      metadata: { fields: Object.keys(updates) },
+    });
+
     return reply.code(200).send(spaceData);
   });
 
@@ -1005,6 +1015,16 @@ export async function spaceRoutes(app: FastifyInstance): Promise<void> {
       userId: uid,
     });
 
+    recordAuditEvent({
+      spaceId: id,
+      actorId: request.userId,
+      // Leaving on your own is not the same event as being removed by someone
+      // else, and a log that conflates the two misleads exactly when it matters.
+      action: request.userId === uid ? 'member.leave' : 'member.kick',
+      targetType: 'user',
+      targetId: uid,
+    });
+
     return reply.code(200).send({ success: true });
   });
 
@@ -1068,6 +1088,17 @@ export async function spaceRoutes(app: FastifyInstance): Promise<void> {
     }
     checkVoicePermissions(id);
 
+    recordAuditEvent({
+      spaceId: id,
+      actorId: request.userId,
+      action: 'role.create',
+      targetType: 'role',
+      // roleId is the value just inserted; `role` is a read-back the compiler
+      // cannot prove returned a row.
+      targetId: roleId,
+      metadata: { name: role?.name ?? null },
+    });
+
     return reply.code(201).send(role);
   });
 
@@ -1125,6 +1156,15 @@ export async function spaceRoutes(app: FastifyInstance): Promise<void> {
     }
     checkVoicePermissions(id);
 
+    recordAuditEvent({
+      spaceId: id,
+      actorId: request.userId,
+      action: 'role.update',
+      targetType: 'role',
+      targetId: roleId,
+      metadata: { name: updated?.name ?? null },
+    });
+
     return reply.code(200).send(updated);
   });
 
@@ -1247,6 +1287,14 @@ export async function spaceRoutes(app: FastifyInstance): Promise<void> {
       space: spaceData,
     });
 
+    recordAuditEvent({
+      spaceId: id,
+      actorId: request.userId,
+      action: 'space.transfer_ownership',
+      targetType: 'user',
+      targetId: newOwnerId,
+    });
+
     return reply.code(200).send(spaceData);
   });
 

packages/server/src/routes/spotify.ts

@@ -0,0 +1,219 @@
+import type { FastifyInstance } from 'fastify';
+import crypto from 'crypto';
+import { eq } from 'drizzle-orm';
+import { getDb, schema } from '../db/index.js';
+import { authenticate } from '../utils/auth.js';
+import { config } from '../config.js';
+import { getOurOrigin } from '../utils/federationAuth.js';
+import type { Activity } from '@backspace/shared';
+
+const SPOTIFY_AUTH = 'https://accounts.spotify.com/authorize';
+const SPOTIFY_TOKEN = 'https://accounts.spotify.com/api/token';
+const SPOTIFY_NOW_PLAYING = 'https://api.spotify.com/v1/me/player/currently-playing';
+
+// Read-only: enough to see the current track, nothing that can control playback
+// or read the library.
+const SCOPES = 'user-read-currently-playing user-read-playback-state';
+
+/** Refresh this many ms before expiry, so a request never races the deadline. */
+const REFRESH_MARGIN_MS = 60_000;
+
+function redirectUri(): string {
+  return `${getOurOrigin()}/api/connections/spotify/callback`;
+}
+
+function isConfigured(): boolean {
+  return Boolean(config.spotify.clientId && config.spotify.clientSecret);
+}
+
+/**
+ * OAuth `state`, signed with the instance's JWT secret.
+ *
+ * The callback arrives as a browser redirect, which carries no Authorization
+ * header — so the state has to say who started the flow, and be tamper-proof
+ * or anyone could bind their Spotify account to someone else's user.
+ */
+function signState(userId: string): string {
+  const payload = Buffer.from(JSON.stringify({ userId, exp: Date.now() + 10 * 60_000 })).toString('base64url');
+  const sig = crypto.createHmac('sha256', config.jwtSecret).update(payload).digest('base64url');
+  return `${payload}.${sig}`;
+}
+
+function verifyState(state: string): string | null {
+  const [payload, sig] = state.split('.');
+  if (!payload || !sig) return null;
+  const expected = crypto.createHmac('sha256', config.jwtSecret).update(payload).digest('base64url');
+  const a = Buffer.from(sig);
+  const b = Buffer.from(expected);
+  if (a.length !== b.length || !crypto.timingSafeEqual(a, b)) return null;
+  try {
+    const data = JSON.parse(Buffer.from(payload, 'base64url').toString()) as { userId: string; exp: number };
+    if (!data.userId || typeof data.exp !== 'number' || data.exp < Date.now()) return null;
+    return data.userId;
+  } catch {
+    return null;
+  }
+}
+
+function basicAuthHeader(): string {
+  return 'Basic ' + Buffer.from(`${config.spotify.clientId}:${config.spotify.clientSecret}`).toString('base64');
+}
+
+/**
+ * Returns a usable access token, refreshing it first when it is about to
+ * expire. Returns null when the connection is gone or Spotify rejected the
+ * refresh token — the caller then treats the user as disconnected.
+ */
+async function getAccessToken(userId: string): Promise<string | null> {
+  const db = getDb();
+  const row = db.select().from(schema.spotifyConnections)
+    .where(eq(schema.spotifyConnections.userId, userId)).get();
+  if (!row) return null;
+
+  if (row.expiresAt - REFRESH_MARGIN_MS > Date.now()) return row.accessToken;
+
+  const res = await fetch(SPOTIFY_TOKEN, {
+    method: 'POST',
+    headers: { Authorization: basicAuthHeader(), 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: new URLSearchParams({ grant_type: 'refresh_token', refresh_token: row.refreshToken }),
+  });
+
+  if (!res.ok) {
+    // A refresh token is rejected when the user revoked access on Spotify's
+    // side. Drop the row so the UI stops claiming a live connection.
+    if (res.status === 400 || res.status === 401) {
+      db.delete(schema.spotifyConnections).where(eq(schema.spotifyConnections.userId, userId)).run();
+    }
+    return null;
+  }
+
+  const body = await res.json() as { access_token: string; expires_in: number; refresh_token?: string };
+  db.update(schema.spotifyConnections).set({
+    accessToken: body.access_token,
+    // Spotify only returns a new refresh token sometimes; keep the old one otherwise.
+    refreshToken: body.refresh_token ?? row.refreshToken,
+    expiresAt: Date.now() + body.expires_in * 1000,
+  }).where(eq(schema.spotifyConnections.userId, userId)).run();
+
+  return body.access_token;
+}
+
+interface SpotifyTrack {
+  is_playing: boolean;
+  progress_ms: number | null;
+  item: {
+    name: string;
+    duration_ms: number;
+    artists: { name: string }[];
+    album: { name: string; images: { url: string }[] };
+    external_urls?: { spotify?: string };
+  } | null;
+}
+
+/**
+ * Maps Spotify's payload onto the Activity shape the profile card renders.
+ *
+ * A paused track is still reported, marked `paused`. Returning null for it made
+ * the block disappear on every pause — and, together with the silent gap
+ * between two songs, produced the flicker of it vanishing and coming back.
+ */
+function toActivity(track: SpotifyTrack): Activity | null {
+  if (!track.item) return null;
+  const now = Date.now();
+  const progress = track.progress_ms ?? 0;
+  return {
+    type: 'listening',
+    name: 'Spotify',
+    paused: !track.is_playing,
+    details: track.item.name,
+    state: track.item.artists.map((a) => a.name).join(', '),
+    timestamps: { start: now - progress, end: now - progress + track.item.duration_ms },
+    assets: {
+      largeImage: track.item.album.images[0]?.url,
+      largeText: track.item.album.name,
+    },
+    url: track.item.external_urls?.spotify,
+  };
+}
+
+export async function spotifyRoutes(app: FastifyInstance): Promise<void> {
+  app.get('/api/connections/spotify/status', { preHandler: authenticate }, async (request, reply) => {
+    if (!isConfigured()) return reply.code(200).send({ configured: false, connected: false });
+    const db = getDb();
+    const row = db.select({ userId: schema.spotifyConnections.userId })
+      .from(schema.spotifyConnections)
+      .where(eq(schema.spotifyConnections.userId, request.userId)).get();
+    return reply.code(200).send({ configured: true, connected: Boolean(row) });
+  });
+
+  // Returns the URL rather than redirecting: the caller is fetch(), which would
+  // follow a 302 to Spotify instead of navigating the window there.
+  app.get('/api/connections/spotify/authorize', { preHandler: authenticate }, async (request, reply) => {
+    if (!isConfigured()) {
+      return reply.code(503).send({ error: 'Spotify is not configured on this instance', statusCode: 503 });
+    }
+    const params = new URLSearchParams({
+      client_id: config.spotify.clientId!,
+      response_type: 'code',
+      redirect_uri: redirectUri(),
+      scope: SCOPES,
+      state: signState(request.userId),
+    });
+    return reply.code(200).send({ url: `${SPOTIFY_AUTH}?${params}` });
+  });
+
+  app.get<{ Querystring: { code?: string; state?: string; error?: string } }>(
+    '/api/connections/spotify/callback',
+    async (request, reply) => {
+      const { code, state, error } = request.query;
+      const settingsUrl = `${getOurOrigin()}/channels/@me?settings=connections`;
+
+      if (error || !code || !state) return reply.redirect(`${settingsUrl}&spotify=denied`);
+
+      const userId = verifyState(state);
+      if (!userId) return reply.redirect(`${settingsUrl}&spotify=invalid_state`);
+
+      const res = await fetch(SPOTIFY_TOKEN, {
+        method: 'POST',
+        headers: { Authorization: basicAuthHeader(), 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: new URLSearchParams({ grant_type: 'authorization_code', code, redirect_uri: redirectUri() }),
+      });
+      if (!res.ok) return reply.redirect(`${settingsUrl}&spotify=exchange_failed`);
+
+      const body = await res.json() as { access_token: string; refresh_token: string; expires_in: number };
+      const db = getDb();
+      const row = {
+        userId,
+        accessToken: body.access_token,
+        refreshToken: body.refresh_token,
+        expiresAt: Date.now() + body.expires_in * 1000,
+        spotifyUserId: null,
+        createdAt: Date.now(),
+      };
+      db.insert(schema.spotifyConnections).values(row)
+        .onConflictDoUpdate({ target: schema.spotifyConnections.userId, set: row }).run();
+
+      return reply.redirect(`${settingsUrl}&spotify=connected`);
+    },
+  );
+
+  app.get('/api/connections/spotify/now-playing', { preHandler: authenticate }, async (request, reply) => {
+    const token = await getAccessToken(request.userId);
+    if (!token) return reply.code(200).send({ activity: null, connected: false, serverTime: Date.now() });
+
+    const res = await fetch(SPOTIFY_NOW_PLAYING, { headers: { Authorization: `Bearer ${token}` } });
+    // 204 means "nothing playing"; anything else non-OK is a transient problem
+    // and must not be reported as a lost connection.
+    if (res.status === 204) return reply.code(200).send({ activity: null, connected: true, serverTime: Date.now() });
+    if (!res.ok) return reply.code(200).send({ activity: null, connected: res.status !== 401, serverTime: Date.now() });
+
+    const track = await res.json() as SpotifyTrack;
+    return reply.code(200).send({ activity: toActivity(track), connected: true, serverTime: Date.now() });
+  });
+
+  app.delete('/api/connections/spotify', { preHandler: authenticate }, async (request, reply) => {
+    const db = getDb();
+    db.delete(schema.spotifyConnections).where(eq(schema.spotifyConnections.userId, request.userId)).run();
+    return reply.code(204).send();
+  });
+}

packages/server/src/routes/stats.ts

@@ -0,0 +1,94 @@
+import type { FastifyInstance } from 'fastify';
+import { and, eq, gte, sql, isNotNull, inArray } from 'drizzle-orm';
+import { getDb, schema } from '../db/index.js';
+import { authenticate } from '../utils/auth.js';
+import { isMember } from '../utils/permissions.js';
+
+/** Windows the UI offers. Anything else is clamped into this range. */
+const DEFAULT_DAYS = 30;
+const MAX_DAYS = 365;
+
+interface Leader {
+  userId: string;
+  username: string;
+  displayName: string | null;
+  avatar: string | null;
+  value: number;
+}
+
+export async function statsRoutes(app: FastifyInstance): Promise<void> {
+  app.get<{ Params: { id: string }; Querystring: { days?: string } }>(
+    '/api/spaces/:id/stats',
+    { preHandler: authenticate },
+    async (request, reply) => {
+      const { id } = request.params;
+
+      // Any member may look: these are the group's own numbers, not moderation
+      // data. The audit log, which names who did what, stays admin-only.
+      if (!isMember(id, request.userId)) {
+        return reply.code(403).send({ error: 'Not a member of this space', statusCode: 403 });
+      }
+
+      const days = Math.min(Math.max(Number(request.query.days) || DEFAULT_DAYS, 1), MAX_DAYS);
+      const since = Date.now() - days * 24 * 60 * 60 * 1000;
+      const db = getDb();
+
+      // Voice time. Only closed sessions count: an open one has no duration
+      // yet, and counting "now - startedAt" would make the numbers move every
+      // time the page is refreshed.
+      const voiceRows = db.select({
+        userId: schema.voiceSessions.userId,
+        username: schema.users.username,
+        displayName: schema.users.displayName,
+        avatar: schema.users.avatar,
+        value: sql<number>`sum(${schema.voiceSessions.endedAt} - ${schema.voiceSessions.startedAt})`,
+      })
+        .from(schema.voiceSessions)
+        .innerJoin(schema.users, eq(schema.voiceSessions.userId, schema.users.id))
+        .where(and(
+          eq(schema.voiceSessions.spaceId, id),
+          gte(schema.voiceSessions.startedAt, since),
+          isNotNull(schema.voiceSessions.endedAt),
+        ))
+        .groupBy(schema.voiceSessions.userId)
+        .all() as Leader[];
+
+      // Messages. Scoped through the space's channels — the messages table has
+      // no space column.
+      const channelIds = db.select({ id: schema.channels.id })
+        .from(schema.channels)
+        .where(eq(schema.channels.spaceId, id))
+        .all()
+        .map((c) => c.id);
+
+      const messageRows = channelIds.length === 0 ? [] : db.select({
+        userId: schema.messages.userId,
+        username: schema.users.username,
+        displayName: schema.users.displayName,
+        avatar: schema.users.avatar,
+        value: sql<number>`count(*)`,
+      })
+        .from(schema.messages)
+        .innerJoin(schema.users, eq(schema.messages.userId, schema.users.id))
+        .where(and(
+          inArray(schema.messages.channelId, channelIds),
+          gte(schema.messages.createdAt, since),
+        ))
+        .groupBy(schema.messages.userId)
+        .all() as Leader[];
+
+      const byValueDesc = (a: Leader, b: Leader) => b.value - a.value;
+
+      return reply.code(200).send({
+        days,
+        since,
+        voice: voiceRows.sort(byValueDesc),
+        messages: messageRows.sort(byValueDesc),
+        totals: {
+          voiceMs: voiceRows.reduce((sum, r) => sum + (r.value ?? 0), 0),
+          messages: messageRows.reduce((sum, r) => sum + (r.value ?? 0), 0),
+        },
+      });
+    },
+  );
+}

packages/server/src/utils/auditLog.ts

@@ -0,0 +1,36 @@
+import { getDb, schema } from '../db/index.js';
+import { generateSnowflake } from './snowflake.js';
+import type { AuditAction } from '@backspace/shared/src/audit.js';
+
+interface RecordAuditEventInput {
+  spaceId: string;
+  actorId: string | null;
+  action: AuditAction;
+  targetType?: string | null;
+  targetId?: string | null;
+  metadata?: Record<string, unknown> | null;
+}
+
+/**
+ * Appends one entry to a space's audit log.
+ *
+ * Never throws: an audit write must not be able to fail the action it is
+ * describing. A moderator kicking someone must not see the kick fail because
+ * the log could not be written — the kick already happened.
+ */
+export function recordAuditEvent(input: RecordAuditEventInput): void {
+  try {
+    getDb().insert(schema.auditEvents).values({
+      id: generateSnowflake(),
+      spaceId: input.spaceId,
+      actorId: input.actorId,
+      action: input.action,
+      targetType: input.targetType ?? null,
+      targetId: input.targetId ?? null,
+      metadata: input.metadata ? JSON.stringify(input.metadata) : null,
+      createdAt: Date.now(),
+    }).run();
+  } catch (err) {
+    console.warn('[audit] failed to record event', input.action, err);
+  }
+}

packages/server/src/utils/voiceSessions.ts

@@ -0,0 +1,65 @@
+import { and, eq, isNull, sql } from 'drizzle-orm';
+import { getDb, schema } from '../db/index.js';
+import { generateSnowflake } from './snowflake.js';
+
+/**
+ * Opens a session when someone joins a voice room.
+ *
+ * Never throws: statistics must not be able to break a call. Closes any
+ * dangling session for the same user first — the one-room-per-user invariant
+ * means a second open row would be a bookkeeping error, not two real calls.
+ */
+export function openVoiceSession(input: {
+  spaceId: string | null;
+  channelId: string;
+  userId: string;
+}): void {
+  try {
+    const db = getDb();
+    closeVoiceSession(input.userId);
+    db.insert(schema.voiceSessions).values({
+      id: generateSnowflake(),
+      spaceId: input.spaceId,
+      channelId: input.channelId,
+      userId: input.userId,
+      startedAt: Date.now(),
+      endedAt: null,
+    }).run();
+  } catch (err) {
+    console.warn('[voice-sessions] failed to open session', err);
+  }
+}
+
+/** Closes the user's open session, if any. Never throws. */
+export function closeVoiceSession(userId: string): void {
+  try {
+    getDb().update(schema.voiceSessions)
+      .set({ endedAt: Date.now() })
+      .where(and(eq(schema.voiceSessions.userId, userId), isNull(schema.voiceSessions.endedAt)))
+      .run();
+  } catch (err) {
+    console.warn('[voice-sessions] failed to close session', err);
+  }
+}
+
+/**
+ * Closes sessions left open by a crash or restart.
+ *
+ * Their real end time is unknowable. Ending them at `startedAt` — a zero-length
+ * session — discards that time rather than inventing it: crediting the gap
+ * would silently hand someone hours they never spent, and the numbers are the
+ * entire point of keeping this table.
+ */
+export function closeOrphanedVoiceSessions(): void {
+  try {
+    const result = getDb().update(schema.voiceSessions)
+      .set({ endedAt: sql`${schema.voiceSessions.startedAt}` })
+      .where(isNull(schema.voiceSessions.endedAt))
+      .run();
+    if (result.changes > 0) {
+      console.log(`[voice-sessions] closed ${result.changes} session(s) orphaned by a restart`);
+    }
+  } catch (err) {
+    console.warn('[voice-sessions] failed to close orphans', err);
+  }
+}

packages/server/src/ws/events.ts

@@ -168,6 +168,10 @@ export function handleClientEvent(
     case 'voice_join':
       handleVoiceJoin(event, userId, ws);
       break;
+    case 'soundboard_play':
+      handleSoundboardPlay(event, userId);
+      break;
+
     case 'voice_leave':
       handleVoiceLeave(userId);
       break;
@@ -470,12 +474,23 @@ function validateActivities(raw: unknown): Activity[] | null {
       if (ts.start !== undefined || ts.end !== undefined) activity.timestamps = ts;
     }
 
+    // Preserved through validation: without it the paused flag is stripped on
+    // its way to everyone else, and the block resumes ticking on their screens.
+    if (obj.paused === true) activity.paused = true;
+
     if (obj.assets && typeof obj.assets === 'object') {
       const aObj = obj.assets as Record<string, unknown>;
       const assets: ActivityAssets = {};
-      if (typeof aObj.largeImage === 'string' && aObj.largeImage.length <= ACTIVITY_LIMITS.MAX_URL_LENGTH) assets.largeImage = aObj.largeImage;
+      // Image assets are rendered as <img src> by clients, so they get the same
+      // scheme check `url` above already has. Without it a client could point
+      // them at a host it controls and harvest the IP of everyone who opens
+      // that profile — and data: URIs would smuggle payloads through a field
+      // only length-checked.
+      if (typeof aObj.largeImage === 'string' && aObj.largeImage.length <= ACTIVITY_LIMITS.MAX_URL_LENGTH
+          && isHttpUrl(aObj.largeImage)) assets.largeImage = aObj.largeImage;
       if (typeof aObj.largeText === 'string' && aObj.largeText.length <= ACTIVITY_LIMITS.MAX_ASSET_TEXT_LENGTH) assets.largeText = aObj.largeText;
-      if (typeof aObj.smallImage === 'string' && aObj.smallImage.length <= ACTIVITY_LIMITS.MAX_URL_LENGTH) assets.smallImage = aObj.smallImage;
+      if (typeof aObj.smallImage === 'string' && aObj.smallImage.length <= ACTIVITY_LIMITS.MAX_URL_LENGTH
+          && isHttpUrl(aObj.smallImage)) assets.smallImage = aObj.smallImage;
       if (typeof aObj.smallText === 'string' && aObj.smallText.length <= ACTIVITY_LIMITS.MAX_ASSET_TEXT_LENGTH) assets.smallText = aObj.smallText;
       if (Object.keys(assets).length > 0) activity.assets = assets;
     }
@@ -485,6 +500,10 @@ function validateActivities(raw: unknown): Activity[] | null {
   return validated;
 }
 
+function isHttpUrl(value: string): boolean {
+  return value.startsWith('https://') || value.startsWith('http://');
+}
+
 function handlePresenceUpdate(event: Record<string, unknown>, userId: string): void {
   const status = event.status as string;
 
@@ -713,12 +732,14 @@ function handleVoiceJoin(event: Record<string, unknown>, userId: string, ws: Web
   // Join room
   connectionManager.joinRoom(channelId, userId);
 
-  // Broadcast join
+  // Broadcast join. Carries when this occupancy began so late joiners show the
+  // call's real elapsed time rather than counting from their own arrival.
   connectionManager.sendToRoom(channelId, {
     type: 'voice_state_update',
     channelId,
     userId,
     action: 'join',
+    startedAt: connectionManager.getRoomStartedAt(channelId) ?? undefined,
   });
 
   // Also broadcast current voice status if it exists (persisted during moves)
@@ -783,6 +804,48 @@ function handleVoiceJoin(event: Record<string, unknown>, userId: string, ws: Web
   }
 }
 
+/**
+ * Minimum gap between one person's soundboard triggers.
+ *
+ * Enforced on the server: a client-side cooldown only slows down people who
+ * are not trying to abuse it, and a soundboard is the easiest thing in a chat
+ * app to turn into a weapon.
+ */
+const SOUNDBOARD_COOLDOWN_MS = 2000;
+const lastSoundboardPlay = new Map<string, number>();
+
+function handleSoundboardPlay(event: Record<string, unknown>, userId: string): void {
+  const soundId = event.soundId;
+  if (typeof soundId !== 'string' || !soundId) return;
+
+  const now = Date.now();
+  const last = lastSoundboardPlay.get(userId) ?? 0;
+  if (now - last < SOUNDBOARD_COOLDOWN_MS) return;
+
+  // Must be in a voice room: a soundboard is something you press while in a
+  // call, not a way to make noise in a call you are not part of.
+  const userRoom = connectionManager.getUserRoom(userId);
+  if (!userRoom || userRoom.room.roomType !== 'space') return;
+
+  const sound = getDb().select().from(schema.soundboardSounds)
+    .where(eq(schema.soundboardSounds.id, soundId)).get();
+  if (!sound) return;
+
+  // And the sound must belong to the space whose call they are in.
+  const meta = userRoom.room.metadata as SpaceRoomMeta;
+  if (sound.spaceId !== meta.spaceId) return;
+
+  lastSoundboardPlay.set(userId, now);
+
+  connectionManager.sendToRoomParticipants(userRoom.roomId, {
+    type: 'soundboard_played',
+    soundId: sound.id,
+    userId,
+    name: sound.name,
+    filename: sound.filename,
+  });
+}
+
 function handleVoiceLeave(userId: string): void {
   connectionManager.clearVoiceWs(userId);
   const left = connectionManager.leaveCurrentRoom(userId);

packages/server/src/ws/handler.ts

@@ -1,6 +1,7 @@
 import type { FastifyInstance } from 'fastify';
 import type { WebSocket } from 'ws';
 import { verifyJwt } from '../utils/auth.js';
+import { openVoiceSession, closeVoiceSession } from '../utils/voiceSessions.js';
 import { getDb, schema } from '../db/index.js';
 import { eq, and, or, inArray, isNull, desc, sql } from 'drizzle-orm';
 import { handleClientEvent } from './events.js';
@@ -414,6 +415,7 @@ class ConnectionManager {
       type: 'space_voice_state',
       spaceId,
       voiceStates: snapshot.voiceStates,
+      voiceRoomStarts: snapshot.voiceRoomStarts,
       voiceUserStates: snapshot.voiceUserStates,
       spaceVoiceStates: snapshot.spaceVoiceStates,
     });
@@ -441,11 +443,13 @@ class ConnectionManager {
    */
   buildSpaceVoiceState(spaceId: string, userId: string): {
     voiceStates: Record<string, string[]>;
+    voiceRoomStarts: Record<string, number>;
     voiceUserStates: Record<string, { isMuted: boolean; isDeafened: boolean; isCameraOn: boolean; isScreenSharing: boolean }>;
     spaceVoiceStates: Record<string, { spaceMuted: boolean; spaceDeafened: boolean; permissionMuted: boolean }>;
   } {
     const db = getDb();
     const voiceStates: Record<string, string[]> = {};
+    const voiceRoomStarts: Record<string, number> = {};
     const voiceUserStates: Record<string, { isMuted: boolean; isDeafened: boolean; isCameraOn: boolean; isScreenSharing: boolean }> = {};
     const spaceVoiceStates: Record<string, { spaceMuted: boolean; spaceDeafened: boolean; permissionMuted: boolean }> = {};
 
@@ -462,6 +466,8 @@ class ConnectionManager {
       if (participants.size > 0) {
         const ids = Array.from(participants);
         voiceStates[ch.id] = ids;
+        const startedAt = this.getRoomStartedAt(ch.id);
+        if (startedAt !== null) voiceRoomStarts[ch.id] = startedAt;
         for (const uid of ids) {
           const status = this.getVoiceUserStatus(uid);
           if (status) voiceUserStates[uid] = status;
@@ -499,7 +505,7 @@ class ConnectionManager {
       }
     }
 
-    return { voiceStates, voiceUserStates, spaceVoiceStates };
+    return { voiceStates, voiceRoomStarts, voiceUserStates, spaceVoiceStates };
   }
 
   // ─── Unified VoiceRoom API ─────────────────────────────────────────────────
@@ -714,6 +720,16 @@ class ConnectionManager {
 
     room.participants.add(userId);
     this.userToRoom.set(userId, roomId);
+
+    // Recorded here rather than at the seven call sites that lead into voice:
+    // every path — join, move, DM call, reconnect — funnels through this
+    // method, so hooking it cannot miss one.
+    openVoiceSession({
+      spaceId: room.roomType === 'space' ? (room.metadata as SpaceRoomMeta).spaceId : null,
+      channelId: roomId,
+      userId,
+    });
+
     return room;
   }
 
@@ -746,6 +762,8 @@ class ConnectionManager {
     const room = this.leaveRoom(roomId, userId);
     if (!room) return null;
 
+    closeVoiceSession(userId);
+
     return { roomId, room };
   }
 
@@ -757,6 +775,9 @@ class ConnectionManager {
     const displaced: string[] = [];
     for (const userId of room.participants) {
       this.userToRoom.delete(userId);
+      // Destroying a room bypasses leaveCurrentRoom, so these sessions would
+      // otherwise stay open until the next restart swept them away.
+      closeVoiceSession(userId);
       displaced.push(userId);
     }
 
@@ -960,6 +981,30 @@ class ConnectionManager {
     }
   }
 
+  /**
+   * When the current occupancy of a room began. Null when nobody is in it —
+   * empty space rooms are destroyed, which is what makes the call timer reset
+   * once the last person leaves.
+   */
+  getRoomStartedAt(roomId: string): number | null {
+    return this.voiceRooms.get(roomId)?.startedAt ?? null;
+  }
+
+  /**
+   * Send only to the people actually inside a room.
+   *
+   * Distinct from `sendToRoom`, which fans a space room out to the whole
+   * space — right for presence updates the sidebar shows, wrong for anything
+   * audible: a soundboard clip must reach the call, not everyone online.
+   */
+  sendToRoomParticipants(roomId: string, event: ServerEvent): void {
+    const room = this.voiceRooms.get(roomId);
+    if (!room) return;
+    for (const userId of room.participants) {
+      this.sendToUser(userId, event);
+    }
+  }
+
   /** Send to all connections of all online users. */
   sendToAll(event: ServerEvent, excludeUserId?: string): void {
     const message = JSON.stringify(event);
@@ -1073,7 +1118,7 @@ class ConnectionManager {
     if (connections.size === 0) return;
 
     const readyData = buildReadyPayload(userId);
-    const message = JSON.stringify({ type: 'ready', ...readyData });
+    const message = JSON.stringify({ type: 'ready', serverTime: Date.now(), ...readyData });
     for (const ws of connections) {
       if (ws.readyState === 1) {
         ws.send(message);
@@ -1747,6 +1792,9 @@ export async function registerWebSocket(app: FastifyInstance): Promise<void> {
           const readyData = buildReadyPayload(userId);
           ws.send(JSON.stringify({
             type: 'ready',
+            // Lets each client measure its own offset from this server, so activity
+            // timestamps computed here render correctly on a machine whose clock drifts.
+            serverTime: Date.now(),
             ...readyData,
           }));
 

packages/shared/package.json

@@ -14,7 +14,9 @@
     "./src/activities": "./src/activities.ts",
     "./src/activities.js": "./src/activities.ts",
     "./src/constants": "./src/constants.ts",
-    "./src/constants.js": "./src/constants.ts"
+    "./src/constants.js": "./src/constants.ts",
+    "./src/audit": "./src/audit.ts",
+    "./src/audit.js": "./src/audit.ts"
   },
   "scripts": {
     "build": "tsc",

packages/shared/src/audit.ts

@@ -0,0 +1,44 @@
+/**
+ * Audit action vocabulary, shared so the server writes and the client renders
+ * the same strings. Values are stored in the database, so renaming one
+ * rewrites history — add new actions instead.
+ */
+export const AUDIT_ACTIONS = [
+  'space.update',
+  'space.transfer_ownership',
+  'channel.create',
+  'channel.update',
+  'channel.delete',
+  'member.kick',
+  'member.leave',
+  'member.ban',
+  'member.unban',
+  'role.create',
+  'role.update',
+  'role.delete',
+  'invite.create',
+  'message.delete',
+] as const;
+
+export type AuditAction = (typeof AUDIT_ACTIONS)[number];
+
+export interface AuditEventActor {
+  id: string;
+  username: string;
+  displayName: string | null;
+  avatar: string | null;
+}
+
+export interface AuditEvent {
+  id: string;
+  spaceId: string;
+  action: AuditAction;
+  actor: AuditEventActor | null;
+  targetType: string | null;
+  targetId: string | null;
+  /** Shape depends on `action`; used for display only. */
+  metadata: Record<string, unknown> | null;
+  createdAt: number;
+}
+
+export const AUDIT_PAGE_SIZE = 50;

packages/shared/src/types.ts

@@ -369,6 +369,12 @@ export interface ActivityAssets {
 export interface Activity {
   type: ActivityType;
   name: string;
+  /**
+   * Playback is paused. Kept as a state rather than dropping the activity:
+   * pausing a track used to remove the block entirely, so it vanished and
+   * reappeared on every pause and every gap between songs.
+   */
+  paused?: boolean;
   details?: string;
   state?: string;
   timestamps?: ActivityTimestamps;
@@ -403,6 +409,7 @@ export type ClientEvent =
   | { type: 'typing_start'; channelId: string }
   | { type: 'presence_update'; status: 'online' | 'idle' | 'dnd' }
   | { type: 'voice_join'; channelId: string }
+  | { type: 'soundboard_play'; soundId: string }
   | { type: 'voice_leave' }
   | { type: 'dm_message_create'; dmChannelId: string; content?: string; attachments?: string[]; replyToId?: string }
   | { type: 'dm_typing_start'; dmChannelId: string }
@@ -426,13 +433,14 @@ export type ClientEvent =
 
 // Server → Client Events
 export type ServerEvent =
-  | { type: 'ready'; user: User; spaces: SpaceWithChannelsAndMembers[]; dmChannels: DmChannel[]; folders?: SpaceFolder[]; spaceLayout?: SpaceLayoutItem[] | null; layoutUpdatedAt?: number; voiceStates?: Record<string, string[]>; voiceUserStates?: Record<string, { isMuted: boolean; isDeafened: boolean; isCameraOn: boolean; isScreenSharing: boolean }>; readStates?: ReadState[]; activeCalls?: ActiveCallInfo[]; spaceVoiceStates?: Record<string, { spaceMuted: boolean; spaceDeafened: boolean }>; userActivities?: Record<string, Activity[]>; rejectedPeerOrigins?: string[]; awaitingApprovalPeerOrigins?: string[]; activePeerOrigins?: string[]; pendingApprovalCount?: number }
+  | { type: 'ready'; serverTime?: number; user: User; spaces: SpaceWithChannelsAndMembers[]; dmChannels: DmChannel[]; folders?: SpaceFolder[]; spaceLayout?: SpaceLayoutItem[] | null; layoutUpdatedAt?: number; voiceStates?: Record<string, string[]>; voiceRoomStarts?: Record<string, number>; voiceUserStates?: Record<string, { isMuted: boolean; isDeafened: boolean; isCameraOn: boolean; isScreenSharing: boolean }>; readStates?: ReadState[]; activeCalls?: ActiveCallInfo[]; spaceVoiceStates?: Record<string, { spaceMuted: boolean; spaceDeafened: boolean }>; userActivities?: Record<string, Activity[]>; rejectedPeerOrigins?: string[]; awaitingApprovalPeerOrigins?: string[]; activePeerOrigins?: string[]; pendingApprovalCount?: number }
   | { type: 'message_created'; message: MessageWithUser }
   | { type: 'message_updated'; message: MessageWithUser }
   | { type: 'message_deleted'; messageId: string; channelId: string }
   | { type: 'typing'; channelId: string; userId: string; username: string }
   | { type: 'presence_update'; userId: string; status: string; activities?: Activity[] }
-  | { type: 'voice_state_update'; channelId: string; userId: string; action: 'join' | 'leave' }
+  | { type: 'voice_state_update'; channelId: string; userId: string; action: 'join' | 'leave'; startedAt?: number }
+  | { type: 'soundboard_played'; soundId: string; userId: string; name: string; filename: string }
   | { type: 'member_joined'; spaceId: string; member: MemberWithUser }
   | { type: 'member_left'; spaceId: string; userId: string }
   | { type: 'dm_message_created'; message: DmMessageWithUser }
@@ -451,7 +459,7 @@ export type ServerEvent =
   | { type: 'dm_call_ended'; dmChannelId: string }
   | { type: 'dm_call_undeliverable'; dmChannelId: string | null; federatedCallId: string; terminal: boolean; phase: DmCallPhase; failures: DmCallUndeliverableFailure[] }
   | { type: 'voice_status_update'; userId: string; channelId: string; isMuted: boolean; isDeafened: boolean; isCameraOn: boolean; isScreenSharing: boolean }
-  | { type: 'space_voice_state'; spaceId: string; voiceStates: Record<string, string[]>; voiceUserStates: Record<string, { isMuted: boolean; isDeafened: boolean; isCameraOn: boolean; isScreenSharing: boolean }>; spaceVoiceStates: Record<string, { spaceMuted: boolean; spaceDeafened: boolean; permissionMuted: boolean }> }
+  | { type: 'space_voice_state'; spaceId: string; voiceStates: Record<string, string[]>; voiceRoomStarts?: Record<string, number>; voiceUserStates: Record<string, { isMuted: boolean; isDeafened: boolean; isCameraOn: boolean; isScreenSharing: boolean }>; spaceVoiceStates: Record<string, { spaceMuted: boolean; spaceDeafened: boolean; permissionMuted: boolean }> }
   | { type: 'dm_channel_created'; dmChannel: DmChannel }
   | { type: 'dm_channel_closed'; dmChannelId: string }
   | { type: 'dm_channel_updated'; dmChannelId: string; name: string | null; icon: string | null }

packages/web/src/api/client.ts

@@ -71,7 +71,34 @@ import type {
   AttachProofResponse,
   ReattachRequest,
   ReattachResponse,
+  Activity,
 } from '@backspace/shared';
+import type { AuditEvent } from '@backspace/shared/src/audit.js';
+
+export interface SoundboardSound {
+  id: string;
+  spaceId: string;
+  name: string;
+  filename: string;
+  uploaderId: string | null;
+  createdAt: number;
+}
+
+export interface StatsLeader {
+  userId: string;
+  username: string;
+  displayName: string | null;
+  avatar: string | null;
+  value: number;
+}
+
+export interface SpaceStats {
+  days: number;
+  since: number;
+  voice: StatsLeader[];
+  messages: StatsLeader[];
+  totals: { voiceMs: number; messages: number };
+}
 import { getApiForOrigin, getOwnerInstanceForDm } from '../utils/crossStoreResolvers';
 
 export type { FederationPeer, FederationOrphanedAccount, FederationResetEvent, FederationResetEventsResponse, ApprovalRequest, PeeringSubscription, PeeringNotification };
@@ -279,6 +306,30 @@ export class BackspaceApiClient {
     trending: (limit?: number, pos?: string) => Promise<{ results: GifResult[]; next: string }>;
     search: (q: string, limit?: number, pos?: string) => Promise<{ results: GifResult[]; next: string }>;
     enabled: () => Promise<{ enabled: boolean }>;
+    favorites: () => Promise<{ results: GifResult[] }>;
+    addFavorite: (gif: GifResult) => Promise<void>;
+    removeFavorite: (id: string) => Promise<void>;
+  };
+
+  readonly soundboard: {
+    list: (spaceId: string) => Promise<{ sounds: SoundboardSound[] }>;
+    add: (spaceId: string, name: string, filename: string) => Promise<SoundboardSound>;
+    remove: (soundId: string) => Promise<void>;
+  };
+
+  readonly stats: {
+    space: (spaceId: string, days: number) => Promise<SpaceStats>;
+  };
+
+  readonly audit: {
+    log: (spaceId: string, before?: string) => Promise<{ events: AuditEvent[]; hasMore: boolean }>;
+  };
+
+  readonly spotify: {
+    status: () => Promise<{ configured: boolean; connected: boolean }>;
+    authorizeUrl: () => Promise<{ url: string }>;
+    nowPlaying: () => Promise<{ activity: Activity | null; connected: boolean; serverTime?: number }>;
+    disconnect: () => Promise<void>;
   };
 
   readonly federation: {
@@ -688,6 +739,35 @@ export class BackspaceApiClient {
       },
     };
 
+    this.soundboard = {
+      list: (spaceId: string) => request<{ sounds: SoundboardSound[] }>('GET', `/spaces/${spaceId}/sounds`),
+      add: (spaceId: string, name: string, filename: string) =>
+        request<SoundboardSound>('POST', `/spaces/${spaceId}/sounds`, { name, filename }),
+      remove: (soundId: string) => request<void>('DELETE', `/sounds/${soundId}`),
+    };
+
+    this.stats = {
+      space: (spaceId: string, days: number) =>
+        request<SpaceStats>('GET', `/spaces/${spaceId}/stats?days=${days}`),
+    };
+
+    this.audit = {
+      log: (spaceId: string, before?: string) => {
+        const params = new URLSearchParams();
+        if (before) params.set('before', before);
+        const qs = params.toString();
+        return request<{ events: AuditEvent[]; hasMore: boolean }>(
+          'GET', `/spaces/${spaceId}/audit-log${qs ? `?${qs}` : ''}`);
+      },
+    };
+
+    this.spotify = {
+      status: () => request<{ configured: boolean; connected: boolean }>('GET', '/connections/spotify/status'),
+      authorizeUrl: () => request<{ url: string }>('GET', '/connections/spotify/authorize'),
+      nowPlaying: () => request<{ activity: Activity | null; connected: boolean; serverTime?: number }>('GET', '/connections/spotify/now-playing'),
+      disconnect: () => request<void>('DELETE', '/connections/spotify'),
+    };
+
     this.gif = {
       trending: (limit = 30, pos?: string) => {
         const params = new URLSearchParams();
@@ -695,6 +775,9 @@ export class BackspaceApiClient {
         if (pos) params.set('pos', pos);
         return request<{ results: GifResult[]; next: string }>('GET', `/gif/trending?${params}`);
       },
+      favorites: () => request<{ results: GifResult[] }>('GET', '/gif/favorites'),
+      addFavorite: (gif: GifResult) => request<void>('POST', '/gif/favorites', gif),
+      removeFavorite: (id: string) => request<void>('DELETE', `/gif/favorites/${encodeURIComponent(id)}`),
       search: (q: string, limit = 30, pos?: string) => {
         const params = new URLSearchParams();
         params.set('q', q);

packages/web/src/audio/AudioManager.ts

@@ -32,6 +32,10 @@ export class AudioManager {
   private rnnoiseReady = false;
   private keepAliveOscillator: OscillatorNode | null = null;
 
+  // Mic test (settings → Voice). See startMicTest().
+  private micTestGain: GainNode | null = null;
+  private micTestStream: MediaStream | null = null;
+
   // Cached `getUserMedia` denial. After a NotAllowedError, subsequent
   // `setInputDevice` calls (e.g. `useLiveKit.syncMic` racing the user's
   // tap on a denial prompt) re-throw the cached error WITHOUT issuing a
@@ -181,6 +185,34 @@ export class AudioManager {
     }
   }
 
+  /**
+   * Plays a sound from an arbitrary URL (soundboard clips, which live in the
+   * upload directory rather than /sounds). Cached by URL like the built-in
+   * effects, so repeats do not re-download.
+   */
+  async playUrl(url: string, options: { volume?: number } = {}): Promise<void> {
+    try {
+      const ctx = this.ensureContext();
+      await this.resumeContext();
+      let buffer = this.soundBuffers.get(url);
+      if (!buffer) {
+        const response = await fetch(url);
+        if (!response.ok) return;
+        buffer = await ctx.decodeAudioData(await response.arrayBuffer());
+        this.soundBuffers.set(url, buffer);
+      }
+      const source = ctx.createBufferSource();
+      source.buffer = buffer;
+      const gain = ctx.createGain();
+      gain.gain.value = options.volume ?? 1;
+      source.connect(gain);
+      gain.connect(this.getMasterOutput());
+      source.start(0);
+    } catch (err) {
+      console.warn('[AudioManager] playUrl failed', err);
+    }
+  }
+
   async playSound(name: string, options: { loop?: boolean; volume?: number } = {}): Promise<AudioBufferSourceNode | null> {
     await this.resumeContext();
     const buffer = await this.loadSound(name);
@@ -567,6 +599,65 @@ export class AudioManager {
     osc.stop(now + 0.45);
   }
 
+  /**
+   * Mic test: routes the processed input bus to the speakers so the user hears
+   * themselves, outside of any call.
+   *
+   * Settings deliberately never opened the mic on their own — the level meter
+   * only measures a stream that a call had already established. A mic test
+   * cannot honour that, so this is the one path that opens it, and
+   * `stopMicTest` hands it back rather than leaving the mic indicator lit.
+   *
+   * Returns false when the mic could not be opened (denied, unplugged).
+   */
+  async startMicTest(): Promise<boolean> {
+    if (this.micTestGain) return true;
+    const ctx = this.ensureContext();
+    await this.resumeContext();
+
+    const hadStream = this.hasActiveStream();
+    if (!hadStream) {
+      const stream = await this.setInputDevice(this.currentInputDeviceId);
+      if (!stream) return false;
+      // Remember the exact stream we opened, so stopMicTest only ever stops
+      // that one — never a stream something else established meanwhile.
+      this.micTestStream = this.currentStream;
+    }
+
+    this.micTestGain = ctx.createGain();
+    this.inputGain!.connect(this.micTestGain);
+    this.micTestGain.connect(this.getMasterOutput());
+    return true;
+  }
+
+  /**
+   * Tears down the loopback.
+   *
+   * @param allowRelease Whether the mic may be handed back. Only the caller
+   *   knows whether a call has started since the test began — AudioManager
+   *   does not read stores — so releasing needs its consent as well as our own
+   *   record that this test is what opened the stream.
+   */
+  stopMicTest(allowRelease: boolean): void {
+    if (!this.micTestGain) return;
+    try { this.inputGain?.disconnect(this.micTestGain); } catch { /* graph already torn down */ }
+    try { this.micTestGain.disconnect(); } catch { /* already detached */ }
+    this.micTestGain = null;
+
+    if (allowRelease && this.micTestStream && this.currentStream === this.micTestStream) {
+      // Detach listeners before stopping (see `_setInputDeviceImpl`).
+      const tracks = this.currentStream.getTracks();
+      tracks.forEach(t => { t.onended = null; });
+      tracks.forEach(t => t.stop());
+      this.currentStream = null;
+    }
+    this.micTestStream = null;
+  }
+
+  isMicTestActive(): boolean {
+    return this.micTestGain !== null;
+  }
+
   getContext(): AudioContext | null {
     return this.ctx;
   }

packages/web/src/components/chat/GifPicker.tsx

@@ -1,6 +1,21 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { api } from '../../api/client';
 import type { GifResult } from '@backspace/shared';
+import { useT, type TranslationKey } from '../../i18n';
+
+/**
+ * Category shortcuts. The label is translated but the query is not: it is sent
+ * to the provider, which indexes in English — a translated query would return
+ * nothing.
+ */
+const CATEGORIES: { key: TranslationKey; query: string }[] = [
+  { key: 'gif.category.hello', query: 'hello' },
+  { key: 'gif.category.lol', query: 'lol' },
+  { key: 'gif.category.love', query: 'love' },
+  { key: 'gif.category.birthday', query: 'happy birthday' },
+  { key: 'gif.category.dance', query: 'dance' },
+  { key: 'gif.category.facepalm', query: 'facepalm' },
+];
 
 interface GifPickerProps {
   onGifSelect: (url: string) => void;
@@ -12,6 +27,10 @@ interface GifPickerProps {
 }
 
 export function GifPicker({ onGifSelect, mobile = false }: GifPickerProps) {
+  const t = useT();
+  const [showFavorites, setShowFavorites] = useState(false);
+  const [favorites, setFavorites] = useState<GifResult[]>([]);
+  const [favoriteIds, setFavoriteIds] = useState<Set<string>>(new Set());
   const [query, setQuery] = useState('');
   const [debouncedQuery, setDebouncedQuery] = useState('');
   const [results, setResults] = useState<GifResult[]>([]);
@@ -21,6 +40,46 @@ export function GifPicker({ onGifSelect, mobile = false }: GifPickerProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const debounceRef = useRef<ReturnType<typeof setTimeout>>();
 
+  // Favourites load once and are kept in memory: the picker is opened and
+  // closed constantly, and re-fetching on every open would be visible.
+  useEffect(() => {
+    let cancelled = false;
+    api.gif.favorites()
+      .then(({ results }) => {
+        if (cancelled) return;
+        setFavorites(results);
+        setFavoriteIds(new Set(results.map((g) => g.id)));
+      })
+      .catch(() => { /* favourites are an enhancement; browsing still works */ });
+    return () => { cancelled = true; };
+  }, []);
+
+  const toggleFavorite = async (gif: GifResult, e: React.MouseEvent) => {
+    // The tile behind this button inserts the GIF into the message.
+    e.stopPropagation();
+    const isFavorite = favoriteIds.has(gif.id);
+
+    // Optimistic: the star must feel instant. Reverted below if the call fails.
+    setFavoriteIds((prev) => {
+      const next = new Set(prev);
+      if (isFavorite) next.delete(gif.id); else next.add(gif.id);
+      return next;
+    });
+    setFavorites((prev) => (isFavorite ? prev.filter((g) => g.id !== gif.id) : [gif, ...prev]));
+
+    try {
+      if (isFavorite) await api.gif.removeFavorite(gif.id);
+      else await api.gif.addFavorite(gif);
+    } catch {
+      setFavoriteIds((prev) => {
+        const next = new Set(prev);
+        if (isFavorite) next.add(gif.id); else next.delete(gif.id);
+        return next;
+      });
+      setFavorites((prev) => (isFavorite ? [gif, ...prev] : prev.filter((g) => g.id !== gif.id)));
+    }
+  };
+
   // Debounce search query
   useEffect(() => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
@@ -60,6 +119,8 @@ export function GifPicker({ onGifSelect, mobile = false }: GifPickerProps) {
   // Infinite scroll
   const handleScroll = useCallback(() => {
     const el = scrollRef.current;
+    // Favourites are a complete local list — nothing to page through.
+    if (showFavorites) return;
     if (!el || loadingMore || !nextPos) return;
     if (el.scrollTop + el.clientHeight >= el.scrollHeight - 100) {
       setLoadingMore(true);
@@ -76,13 +137,16 @@ export function GifPicker({ onGifSelect, mobile = false }: GifPickerProps) {
       };
       fetchMore();
     }
-  }, [loadingMore, nextPos, debouncedQuery]);
+  }, [loadingMore, nextPos, debouncedQuery, showFavorites]);
 
   // Prevent keyboard events from bubbling
   const handleKeyDown = (e: React.KeyboardEvent) => {
     e.stopPropagation();
   };
 
+  // Favourites are a local list; browsing results come from the provider.
+  const shown = showFavorites ? favorites : results;
+
   // Mobile: fill parent (sheet sets width + max-height). Desktop: fixed dims
   // matching the legacy popover footprint.
   const rootClass = mobile
@@ -97,7 +161,7 @@ export function GifPicker({ onGifSelect, mobile = false }: GifPickerProps) {
           type="text"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
-          placeholder="Search GIFs"
+          placeholder={t('gif.search')}
           className="input-search w-full"
           // Auto-focus only on desktop. On mobile this would force the OS
           // keyboard up the moment the sheet opens, hiding most of the grid.
@@ -105,13 +169,41 @@ export function GifPicker({ onGifSelect, mobile = false }: GifPickerProps) {
         />
       </div>
 
+      {/* Category shortcuts */}
+      <div className="flex gap-1.5 px-3 pb-2 overflow-x-auto no-scrollbar shrink-0">
+        <button
+          type="button"
+          onClick={() => setShowFavorites((v) => !v)}
+          className={`px-2.5 py-1 rounded-full text-[12px] font-medium whitespace-nowrap transition-colors flex items-center gap-1 ${
+            showFavorites
+              ? 'bg-accent-primary text-white'
+              : 'bg-surface-elevated text-txt-secondary hover:text-txt-primary'
+          }`}
+        >
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <path d="m12 17.27 6.18 3.73-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
+          </svg>
+          {t('gif.tab.favorites')}
+        </button>
+        {CATEGORIES.map((category) => (
+          <button
+            key={category.query}
+            type="button"
+            onClick={() => { setShowFavorites(false); setQuery(category.query); }}
+            className="px-2.5 py-1 rounded-full text-[12px] font-medium whitespace-nowrap bg-surface-elevated text-txt-secondary hover:text-txt-primary transition-colors"
+          >
+            {t(category.key)}
+          </button>
+        ))}
+      </div>
+
       {/* Results grid */}
       <div
         ref={scrollRef}
         className="flex-1 overflow-y-auto scrollbar-thin px-2 pb-1"
         onScroll={handleScroll}
       >
-        {loading ? (
+        {loading && !showFavorites ? (
           <div className="grid grid-cols-2 gap-1.5 p-1">
             {Array.from({ length: 6 }).map((_, i) => (
               <div
@@ -121,17 +213,25 @@ export function GifPicker({ onGifSelect, mobile = false }: GifPickerProps) {
               />
             ))}
           </div>
-        ) : results.length === 0 ? (
+        ) : shown.length === 0 ? (
-          <div className="flex items-center justify-center h-full text-txt-tertiary text-sm">
+          <div className="flex items-center justify-center h-full text-txt-tertiary text-sm text-center px-4">
-            {debouncedQuery.trim() ? 'No GIFs found' : 'No trending GIFs'}
+            {showFavorites
+              ? t('gif.empty.favorites')
+              : debouncedQuery.trim()
+                ? t('gif.empty.search')
+                : t('gif.empty.trending')}
           </div>
         ) : (
           <div className="columns-2 gap-1.5 p-1">
-            {results.map((gif) => (
+            {shown.map((gif) => {
+              const isFavorite = favoriteIds.has(gif.id);
+              return (
+                // The star cannot live inside the tile button — a button inside
+                // a button is invalid and swallows the click. Siblings instead.
+                <div key={gif.id} className="relative group w-full mb-1.5 break-inside-avoid">
                   <button
-                key={gif.id}
                     onClick={() => onGifSelect(gif.url)}
-                className="w-full mb-1.5 rounded-lg overflow-hidden hover:ring-2 hover:ring-accent-primary transition-all break-inside-avoid"
+                    className="w-full rounded-lg overflow-hidden hover:ring-2 hover:ring-accent-primary transition-all block"
                   >
                     <img
                       src={gif.previewUrl}
@@ -143,7 +243,22 @@ export function GifPicker({ onGifSelect, mobile = false }: GifPickerProps) {
                       }}
                     />
                   </button>
-            ))}
+                  <button
+                    type="button"
+                    onClick={(e) => void toggleFavorite(gif, e)}
+                    title={isFavorite ? t('gif.favorite.remove') : t('gif.favorite.add')}
+                    aria-label={isFavorite ? t('gif.favorite.remove') : t('gif.favorite.add')}
+                    className={`absolute top-1.5 right-1.5 w-7 h-7 rounded-full flex items-center justify-center bg-black/55 backdrop-blur-sm transition-opacity ${
+                      isFavorite ? 'opacity-100 text-accent-amber' : 'opacity-0 group-hover:opacity-100 focus:opacity-100 text-white'
+                    }`}
+                  >
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill={isFavorite ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2">
+                      <path d="m12 17.27 6.18 3.73-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
+                    </svg>
+                  </button>
+                </div>
+              );
+            })}
           </div>
         )}
         {loadingMore && (

packages/web/src/components/chat/Message.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { useT } from '../../i18n';
 import { createPortal } from 'react-dom';
 import type { MessageWithUser, Embed, User } from '@backspace/shared';
 import { MarkdownRenderer } from './MarkdownRenderer';
@@ -131,6 +132,7 @@ export function Message({ message, isCompact, isFirstInGroup, previousMessageId
   const editMessage = useChatStore((s) => s.editMessage);
   const deleteMessage = useChatStore((s) => s.deleteMessage);
   const members = useSpaceStore((s) => s.members);
+  const tr = useT();
   const openUserProfile = useUIStore((s) => s.openUserProfile);
 
   const pending = isPendingMessage(message) ? message.__pending : null;
@@ -676,7 +678,7 @@ export function Message({ message, isCompact, isFirstInGroup, previousMessageId
                 className={`p-1 hover:bg-interactive-hover rounded transition-colors text-[14px] leading-none ${
                   showReactionPicker ? 'text-accent-primary' : 'text-txt-tertiary hover:text-txt-secondary'
                 }`}
-                title="Add reaction"
+                title={tr('chat.message.addReaction')}
               >
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                   <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm1-13h-2v4H7v2h4v4h2v-4h4v-2h-4V7z" />
@@ -687,7 +689,7 @@ export function Message({ message, isCompact, isFirstInGroup, previousMessageId
           <button
             onClick={() => setReplyTo(message)}
             className="px-2 h-full text-txt-tertiary hover:text-txt-primary hover:bg-interactive-hover transition-all flex items-center justify-center"
-            title="Reply"
+            title={tr('chat.message.reply')}
           >
             <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
               <path d="M10 9V5L3 12L10 19V14.9C15 14.9 18.5 16.5 21 20C20 15 17 10 10 9Z" />
@@ -700,7 +702,7 @@ export function Message({ message, isCompact, isFirstInGroup, previousMessageId
                 setIsEditing(true);
               }}
               className="px-2 h-full text-txt-tertiary hover:text-txt-primary hover:bg-interactive-hover transition-all flex items-center justify-center"
-              title="Edit"
+              title={tr('chat.message.edit')}
             >
               <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                 <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" />

packages/web/src/components/chat/MessageInput.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import { useT } from '../../i18n';
 import { useChatStore } from '../../stores/chatStore';
 import { isDmChannel, getChannelOrigin, useSpaceStore } from '../../stores/spaceStore';
 import { wsSend } from '../../hooks/useWebSocket';
@@ -94,6 +95,7 @@ export function MessageInput({ channelId, channelName, placeholder }: MessageInp
   const typingTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
 
   // Feature flags
+  const tr = useT();
   const gifEnabled = useSettingsStore((s) => s.gifEnabled);
 
   // Permission gating: DM channels always allow sending; space channels check SEND_MESSAGES
@@ -775,7 +777,7 @@ export function MessageInput({ channelId, channelName, placeholder }: MessageInp
       {chatReplyTo && (
         <div className="bg-interactive-hover rounded-t-lg px-4 py-2 flex items-center justify-between border-b border-white/[0.06]">
           <div className="flex items-center gap-1 text-[14px] text-txt-message truncate">
-            <span className="opacity-60">Replying to</span>
+            <span className="opacity-60">{tr('chat.composer.replyingTo')}</span>
             <span className="font-bold">
               {chatReplyTo.user.displayName ?? chatReplyTo.user.username}
             </span>
@@ -783,7 +785,7 @@ export function MessageInput({ channelId, channelName, placeholder }: MessageInp
           <button
             onClick={() => chatSetReplyTo(null)}
             className="text-txt-tertiary hover:text-txt-primary transition-colors"
-            aria-label="Cancel reply"
+            aria-label={tr('chat.composer.cancelReply')}
           >
             <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
               <path d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z" />
@@ -867,7 +869,7 @@ export function MessageInput({ channelId, channelName, placeholder }: MessageInp
                     <button
                       onClick={() => removeStagedTransfer(t.id)}
                       className="absolute -top-2 -right-2 w-7 h-7 bg-accent-rose hover:bg-accent-rose/80 shadow-elevation-high rounded-lg flex items-center justify-center text-white transition-colors z-10"
-                      aria-label="Remove attachment"
+                      aria-label={tr('chat.composer.removeAttachment')}
                     >
                       <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
                         <path d="M5 2a1 1 0 011-1h4a1 1 0 011 1v1h3a1 1 0 110 2h-.08L13 14a2 2 0 01-2 2H5a2 2 0 01-2-2L2.08 5H2a1 1 0 110-2h3V2zm2 0v1h2V2H7z" />
@@ -886,8 +888,8 @@ export function MessageInput({ channelId, channelName, placeholder }: MessageInp
             <button
               onClick={() => fileInputRef.current?.click()}
               className="w-10 h-10 md:w-[34px] md:h-[34px] flex items-center justify-center rounded-[6px] text-txt-tertiary hover:text-txt-secondary transition-colors flex-shrink-0"
-              title="Attach file"
+              title={tr('chat.composer.attach')}
-              aria-label="Attach file"
+              aria-label={tr('chat.composer.attach')}
             >
               <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                 <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
@@ -915,14 +917,16 @@ export function MessageInput({ channelId, channelName, placeholder }: MessageInp
             onChange={handleChange}
             onKeyDown={handleKeyDown}
             onPaste={canAttachFiles ? handlePaste : undefined}
-            placeholder={placeholder ?? `Message ${channelName.startsWith('@') ? channelName : `#${channelName}`}`}
+            placeholder={placeholder ?? tr('chat.composer.placeholder', {
+              channel: channelName.startsWith('@') ? channelName : `#${channelName}`,
+            })}
             className="input-embedded flex-1 py-[10px] px-1 resize-none text-[15px] leading-[1.375rem] max-h-[50vh] scrollbar-thin"
             rows={1}
           />
 
           {/* Active-upload indicator */}
           {anyActiveOrQueued && (
-            <div className="p-3 text-txt-tertiary" title="Uploading…" aria-label="Uploading">
+            <div className="p-3 text-txt-tertiary" title={tr('chat.composer.uploadingEllipsis')} aria-label={tr('chat.composer.uploading')}>
               <svg className="w-5 h-5 animate-spin" viewBox="0 0 24 24" fill="none">
                 <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                 <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
@@ -934,7 +938,7 @@ export function MessageInput({ channelId, channelName, placeholder }: MessageInp
           {failedCount > 0 && (
             <span
               className="text-[12px] font-medium text-accent-rose px-1 flex-shrink-0"
-              title="Remove or retry the failed attachment to send"
+              title={tr('chat.composer.failedAttachment')}
             >
               {failedCount} failed
             </span>
@@ -956,11 +960,17 @@ export function MessageInput({ channelId, channelName, placeholder }: MessageInp
               className={`w-10 h-10 md:w-[34px] md:h-[34px] flex items-center justify-center rounded-[6px] transition-colors flex-shrink-0 ${
                 activePopover === 'gif' ? 'text-accent-primary' : 'text-txt-tertiary hover:text-txt-secondary'
               }`}
-              title="GIF"
+              title={tr('chat.composer.gif')}
-              aria-label="GIF picker"
+              aria-label={tr('chat.composer.gifPicker')}
             >
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+              {/* Outlined badge, not a filled block: the solid rectangle read as
-                <path d="M2 5.5A2.5 2.5 0 0 1 4.5 3h15A2.5 2.5 0 0 1 22 5.5v13a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 18.5v-13ZM5.1 14V10h3.2v1.2H6.5v.6h1.6v1.1H6.5V14H5.1Zm4.5 0V10h1.4v4H9.6Zm2.5 0V10h3.2v1.2h-1.8v.5h1.6v1h-1.6V14h-1.4Z" />
+                  a plain square rather than a GIF picker. Letters reuse the
+                  original glyph paths, scaled and centred inside the outline. */}
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                <rect x="3" y="6" width="18" height="12" rx="3" stroke="currentColor" strokeWidth="2" />
+                <g fill="currentColor" transform="translate(-1.77 -4.2) scale(1.35)">
+                  <path d="M5.1 14V10h3.2v1.2H6.5v.6h1.6v1.1H6.5V14H5.1Zm4.5 0V10h1.4v4H9.6Zm2.5 0V10h3.2v1.2h-1.8v.5h1.6v1h-1.6V14h-1.4Z" />
+                </g>
               </svg>
             </button>
           )}
@@ -971,8 +981,8 @@ export function MessageInput({ channelId, channelName, placeholder }: MessageInp
             className={`w-10 h-10 md:w-[34px] md:h-[34px] flex items-center justify-center rounded-[6px] transition-colors flex-shrink-0 ${
               activePopover === 'emoji' ? 'text-accent-primary' : 'text-txt-tertiary hover:text-txt-secondary'
             }`}
-            title="Emoji"
+            title={tr('chat.composer.emoji')}
-            aria-label="Emoji picker"
+            aria-label={tr('chat.composer.emojiPicker')}
           >
             <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
               <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5s.67 1.5 1.5 1.5zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z" />
@@ -985,8 +995,8 @@ export function MessageInput({ channelId, channelName, placeholder }: MessageInp
               onClick={() => void handleSubmit()}
               disabled={anyUnshippable}
               className="w-10 h-10 md:w-[34px] md:h-[34px] flex items-center justify-center rounded-[6px] bg-accent-primary hover:bg-accent-primary-hover text-white transition-all duration-150 flex-shrink-0 disabled:opacity-50"
-              aria-label="Send message"
+              aria-label={tr('chat.composer.sendMessage')}
-              title="Send"
+              title={tr('chat.composer.send')}
             >
               <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                 <path d="M3.4 20.4l17.45-7.48a1 1 0 000-1.84L3.4 3.6a.993.993 0 00-1.39.91L2 9.12c0 .5.37.93.87.99L17 12 2.87 13.88c-.5.07-.87.5-.87 1l.01 4.61c0 .71.73 1.2 1.39.91z" />

packages/web/src/components/layout/AccountMenu.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useRef, useState } from 'react';
+import type { UserStatus } from '@backspace/shared';
+import { useAuthStore } from '../../stores/authStore';
+import { useT, type TranslationKey } from '../../i18n';
+
+interface AccountMenuProps {
+  onClose: () => void;
+  onEditProfile: () => void;
+}
+
+const STATUSES: { value: UserStatus; key: TranslationKey; dot: string }[] = [
+  { value: 'online', key: 'accountMenu.status.online', dot: 'bg-status-online' },
+  { value: 'idle', key: 'accountMenu.status.idle', dot: 'bg-status-idle' },
+  { value: 'dnd', key: 'accountMenu.status.dnd', dot: 'bg-status-dnd' },
+  // 'offline' chosen deliberately is what other clients call invisible.
+  { value: 'offline', key: 'accountMenu.status.offline', dot: 'bg-txt-tertiary' },
+];
+
+export function AccountMenu({ onClose, onEditProfile }: AccountMenuProps) {
+  const t = useT();
+  const user = useAuthStore((s) => s.user);
+  const updateProfile = useAuthStore((s) => s.updateProfile);
+  const [copied, setCopied] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handlePointer = (e: MouseEvent | TouchEvent) => {
+      if (!menuRef.current?.contains(e.target as Node)) onClose();
+    };
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') { e.stopPropagation(); onClose(); }
+    };
+    // touchstart alongside mousedown: iOS Safari does not reliably synthesise
+    // mousedown from a tap, matching what the other popovers here do.
+    document.addEventListener('mousedown', handlePointer);
+    document.addEventListener('touchstart', handlePointer);
+    document.addEventListener('keydown', handleKey);
+    return () => {
+      document.removeEventListener('mousedown', handlePointer);
+      document.removeEventListener('touchstart', handlePointer);
+      document.removeEventListener('keydown', handleKey);
+    };
+  }, [onClose]);
+
+  if (!user) return null;
+
+  const handleStatus = async (status: UserStatus) => {
+    if (status === (user.status ?? 'online')) return onClose();
+    try {
+      await updateProfile({ status });
+    } finally {
+      onClose();
+    }
+  };
+
+  const handleCopyId = async () => {
+    try {
+      await navigator.clipboard.writeText(user.id);
+      setCopied(true);
+      // Left open on purpose: the confirmation is the only feedback, and
+      // closing immediately would hide it.
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // Clipboard is unavailable over plain http or without permission.
+    }
+  };
+
+  return (
+    <div
+      ref={menuRef}
+      role="menu"
+      className="absolute bottom-full left-2 right-2 mb-2 z-[200] glass rounded-xl overflow-hidden py-1.5 shadow-xl"
+    >
+      <button
+        role="menuitem"
+        onClick={() => { onEditProfile(); onClose(); }}
+        className="w-full px-3 py-2 flex items-center gap-2.5 text-[13.5px] text-txt-secondary hover:bg-interactive-hover hover:text-txt-primary transition-colors"
+      >
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25ZM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83Z" />
+        </svg>
+        {t('accountMenu.editProfile')}
+      </button>
+
+      <div className="h-px bg-white/[0.06] my-1.5 mx-2" />
+      <div className="px-3 pb-1 text-[10px] font-semibold uppercase tracking-wider text-txt-tertiary">
+        {t('accountMenu.status')}
+      </div>
+      {STATUSES.map((option) => (
+        <button
+          key={option.value}
+          role="menuitemradio"
+          aria-checked={(user.status ?? 'online') === option.value}
+          onClick={() => void handleStatus(option.value)}
+          className="w-full px-3 py-1.5 flex items-center gap-2.5 text-[13.5px] text-txt-secondary hover:bg-interactive-hover hover:text-txt-primary transition-colors"
+        >
+          <span className={`w-2.5 h-2.5 rounded-full ${option.dot}`} />
+          <span className="flex-1 text-left">{t(option.key)}</span>
+          {(user.status ?? 'online') === option.value && (
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+              <path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+            </svg>
+          )}
+        </button>
+      ))}
+
+      <div className="h-px bg-white/[0.06] my-1.5 mx-2" />
+      <button
+        role="menuitem"
+        onClick={() => void handleCopyId()}
+        className="w-full px-3 py-2 flex items-center gap-2.5 text-[13.5px] text-txt-secondary hover:bg-interactive-hover hover:text-txt-primary transition-colors"
+      >
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          <path d="M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1Zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Zm0 16H8V7h11v14Z" />
+        </svg>
+        {copied ? t('accountMenu.copied') : t('accountMenu.copyId')}
+      </button>
+    </div>
+  );
+}

packages/web/src/components/layout/AppLayout.tsx

@@ -22,6 +22,7 @@ import { UserProfileModal } from '../modals/UserProfileModal';
 import { IncomingCallModal } from '../voice/IncomingCallModal';
 import { PictureInPicture } from '../voice/PictureInPicture';
 import { SoundController } from '../voice/SoundController';
+import { useSpotifyActivity } from '../../hooks/useSpotifyActivity';
 import { GlobalAudioRenderer } from '../voice/GlobalAudioRenderer';
 import { NotificationController } from '../NotificationController';
 import { UserProfilePopout } from '../ui/UserProfilePopout';
@@ -215,6 +216,7 @@ export function AppLayout() {
   const showBootSkeleton = useDelayedLoading(isLoading);
   const setCurrentSpace = useSpaceStore((s) => s.setCurrentSpace);
   const loadSpaceDetail = useSpaceStore((s) => s.loadSpaceDetail);
+  useSpotifyActivity();
   const setCurrentChannel = useChatStore((s) => s.setCurrentChannel);
   const loadMessages = useChatStore((s) => s.loadMessages);
   const setIsMobile = useUIStore((s) => s.setIsMobile);

packages/web/src/components/layout/ChannelSidebar.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { useT } from '../../i18n';
 import { useNavigate, useLocation } from 'react-router-dom';
 import type { Channel } from '@backspace/shared';
 import { useSpaceStore, getChannelOrigin, getMyUserIdForOrigin } from '../../stores/spaceStore';
@@ -7,6 +8,7 @@ import { useUIStore } from '../../stores/uiStore';
 import { useAuthStore } from '../../stores/authStore';
 import { useInstanceStore } from '../../stores/instanceStore';
 import { VoiceChannel } from '../voice/VoiceChannel';
+import { AccountMenu } from './AccountMenu';
 import { VoiceControls } from '../voice/VoiceControls';
 import { useVoiceStore } from '../../stores/voiceStore';
 import { ProfileAvatar } from '../ui/ProfileAvatar';
@@ -25,6 +27,7 @@ import { useAudioDevices } from '../../hooks/useAudioDevices';
 import { DropdownItem } from '../modals/settingsPanels/_shared/SettingsPickerPrimitives';
 
 export function ChannelSidebar() {
+  const tr = useT();
   const spaces = useSpaceStore((s) => s.spaces);
   const currentSpaceId = useSpaceStore((s) => s.currentSpaceId);
   const loadingSpaceId = useSpaceStore((s) => s.loadingSpaceId);
@@ -317,7 +320,7 @@ export function ChannelSidebar() {
       items.push({
         key: 'create-channel',
         type: 'action',
-        label: 'Create Channel',
+        label: tr('sidebar.createChannel'),
         icon: (
           <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
             <path d="M2.5 12.5v-9l5-2v9l-5 2zm6-9v9l5-2v-9l-5 2z" opacity="0.5" />
@@ -329,7 +332,7 @@ export function ChannelSidebar() {
       items.push({
         key: 'create-category',
         type: 'action',
-        label: 'Create Category',
+        label: tr('sidebar.createCategory'),
         icon: (
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
@@ -342,7 +345,7 @@ export function ChannelSidebar() {
       items.push({
         key: 'invite',
         type: 'action',
-        label: 'Invite People',
+        label: tr('sidebar.invitePeople'),
         icon: (
           <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
             <path d="M21 3H24V5H21V8H19V5H16V3H19V0H21V3ZM10 12C12.21 12 14 10.21 14 8C14 5.79 12.21 4 10 4C7.79 4 6 5.79 6 8C6 10.21 7.79 12 10 12ZM10 13C6.69 13 1 14.66 1 18V20H19V18C19 14.66 13.31 13 10 13Z" />
@@ -354,7 +357,7 @@ export function ChannelSidebar() {
     items.push({
       key: 'settings',
       type: 'action',
-      label: 'Space Settings',
+      label: tr('sidebar.spaceSettings'),
       icon: (
         <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
           <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 00-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1112 8.4a3.6 3.6 0 010 7.2z" />
@@ -372,7 +375,7 @@ export function ChannelSidebar() {
       {
         key: 'leave-group',
         type: 'action',
-        label: 'Leave Group',
+        label: tr('sidebar.leaveGroup'),
         danger: true,
         icon: (
           <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
@@ -452,7 +455,7 @@ export function ChannelSidebar() {
               <path d="M3 18a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-1c0-2.76-5.37-4-8-4s-8 1.24-8 4v1Z" />
               <path d="M3.5 13.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z" opacity=".5" />
             </svg>
-            <span className="font-medium text-[16px]">Friends</span>
+            <span className="font-medium text-[16px]">{tr('sidebar.friends')}</span>
           </div>
 
           {/* Placeholder nav items */}
@@ -462,7 +465,7 @@ export function ChannelSidebar() {
             <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" className="flex-shrink-0">
               <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
             </svg>
-            <span className="font-medium text-[16px]">Coming Soon</span>
+            <span className="font-medium text-[16px]">{tr('sidebar.comingSoon')}</span>
           </div>
           <div
             className="flex items-center gap-3 px-2 h-[42px] rounded-[6px] mb-[2px] text-txt-tertiary cursor-default opacity-50"
@@ -470,11 +473,11 @@ export function ChannelSidebar() {
             <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" className="flex-shrink-0">
               <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z" />
             </svg>
-            <span className="font-medium text-[16px]">Coming Soon</span>
+            <span className="font-medium text-[16px]">{tr('sidebar.comingSoon')}</span>
           </div>
 
           <div className="mt-[18px] px-2 mb-1 flex items-center justify-between group">
-            <span className="text-[12px] font-bold text-txt-tertiary tracking-wider">Direct Messages</span>
+            <span className="text-[12px] font-bold text-txt-tertiary tracking-wider">{tr('sidebar.directMessages')}</span>
             <button
               onClick={() => openModal('newDm')}
               className="text-txt-tertiary hover:text-txt-primary transition-colors"
@@ -583,7 +586,7 @@ export function ChannelSidebar() {
       {/* Channels — dynamic category layout */}
       <div ref={scrollContainerRef} className="flex-1 overflow-y-auto pt-3 px-2 no-scrollbar" style={{ paddingBottom: floatingPanelHeight + 24 }} onDrop={containerHandlers.onDrop} onDragOver={containerHandlers.onDragOver} onContextMenu={handleSidebarContextMenu}>
         {showChannelSkeleton ? (
-          <div className="px-2 pt-3" role="status" aria-label="Loading channels">
+          <div className="px-2 pt-3" role="status" aria-label={tr('sidebar.loadingChannels')}>
             {/* Category group 1 */}
             <div className="skeleton skeleton-bar h-2 w-[45%] ml-2 mb-3" />
             {Array.from({ length: 3 }, (_, i) => (
@@ -705,7 +708,7 @@ export function ChannelSidebar() {
                     {
                       key: 'category-settings',
                       type: 'action',
-                      label: 'Category Settings',
+                      label: tr('sidebar.categorySettings'),
                       icon: (
                         <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                           <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 00-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1115.6 12 3.611 3.611 0 0112 15.6z" />
@@ -716,7 +719,7 @@ export function ChannelSidebar() {
                     {
                       key: 'delete-category',
                       type: 'action',
-                      label: 'Delete Category',
+                      label: tr('sidebar.deleteCategory'),
                       danger: true,
                       icon: (
                         <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
@@ -757,7 +760,7 @@ export function ChannelSidebar() {
                     />
                   ))}
                   {catChannels.length === 0 && (
-                    <div className="px-2 py-2 text-[12px] text-txt-tertiary italic opacity-40">No channels</div>
+                    <div className="px-2 py-2 text-[12px] text-txt-tertiary italic opacity-40">{tr('sidebar.noChannels')}</div>
                   )}
                 </div>
               )}
@@ -776,7 +779,7 @@ export function ChannelSidebar() {
                 <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" className="flex-shrink-0 opacity-70">
                   <path d="M8 2a.5.5 0 01.5.5v5h5a.5.5 0 010 1h-5v5a.5.5 0 01-1 0v-5h-5a.5.5 0 010-1h5v-5A.5.5 0 018 2z" />
                 </svg>
-                <span className="text-[12px]">Create Channel</span>
+                <span className="text-[12px]">{tr('sidebar.createChannel')}</span>
               </button>
             )}
             <button
@@ -786,7 +789,7 @@ export function ChannelSidebar() {
               <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" className="flex-shrink-0 opacity-70">
                 <path d="M8 2a.5.5 0 01.5.5v5h5a.5.5 0 010 1h-5v5a.5.5 0 01-1 0v-5h-5a.5.5 0 010-1h5v-5A.5.5 0 018 2z" />
               </svg>
-              <span className="text-[12px]">Create Category</span>
+              <span className="text-[12px]">{tr('sidebar.createCategory')}</span>
             </button>
           </div>
         )}
@@ -844,6 +847,8 @@ function UserAreaPanel({
   onDeafenToggle: () => void;
   onSettingsClick: (tab?: string) => void;
 }) {
+  const tr = useT();
+  const [accountMenuOpen, setAccountMenuOpen] = useState(false);
   const [openPanel, setOpenPanel] = useState<'input' | 'output' | null>(null);
   const inputDeviceId = useVoiceStore((s) => s.inputDeviceId);
   const outputDeviceId = useVoiceStore((s) => s.outputDeviceId);
@@ -957,7 +962,7 @@ function UserAreaPanel({
               className="w-full px-4 py-3 flex items-center justify-between hover:bg-interactive-hover transition-colors"
             >
               <div className="min-w-0 flex-1">
-                <div className="text-[15px] font-semibold text-txt-primary text-left">Input Device</div>
+                <div className="text-[15px] font-semibold text-txt-primary text-left">{tr('sidebar.inputDevice')}</div>
                 <div className="text-[13px] text-txt-tertiary truncate text-left">{selectedInputLabel}</div>
               </div>
               <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary flex-shrink-0 ml-2">
@@ -1002,7 +1007,7 @@ function UserAreaPanel({
 
                       {/* Input Volume */}
                       <div className="px-4 py-3">
-                        <div className="text-[15px] font-semibold text-txt-primary mb-2">Input Volume</div>
+                        <div className="text-[15px] font-semibold text-txt-primary mb-2">{tr('sidebar.inputVolume')}</div>
                         <input
                           type="range"
                           min={0}
@@ -1037,7 +1042,7 @@ function UserAreaPanel({
                         onClick={() => onSettingsClick('voice')}
                         className="w-full px-4 py-3 flex items-center justify-between hover:bg-interactive-hover transition-colors"
                       >
-                        <span className="text-[15px] font-semibold text-txt-primary">Voice Settings</span>
+                        <span className="text-[15px] font-semibold text-txt-primary">{tr('sidebar.voiceSettings')}</span>
                         <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary">
                           <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" />
                         </svg>
@@ -1055,7 +1060,7 @@ function UserAreaPanel({
                           className="w-full px-4 py-3 flex items-center justify-between hover:bg-interactive-hover transition-colors"
                         >
                           <div className="min-w-0 flex-1">
-                            <div className="text-[15px] font-semibold text-txt-primary text-left">Output Device</div>
+                            <div className="text-[15px] font-semibold text-txt-primary text-left">{tr('sidebar.outputDevice')}</div>
                             <div className="text-[13px] text-txt-tertiary truncate text-left">{selectedOutputLabel}</div>
                           </div>
                           <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary flex-shrink-0 ml-2">
@@ -1100,7 +1105,7 @@ function UserAreaPanel({
           
                       {/* Output Volume */}
                       <div className="px-4 py-3">
-                        <div className="text-[15px] font-semibold text-txt-primary mb-2">Output Volume</div>
+                        <div className="text-[15px] font-semibold text-txt-primary mb-2">{tr('sidebar.outputVolume')}</div>
                         <input
                           type="range"
                           min={0}
@@ -1123,7 +1128,7 @@ function UserAreaPanel({
             onClick={() => onSettingsClick('voice')}
             className="w-full px-4 py-3 flex items-center justify-between hover:bg-interactive-hover transition-colors"
           >
-            <span className="text-[15px] font-semibold text-txt-primary">Voice Settings</span>
+            <span className="text-[15px] font-semibold text-txt-primary">{tr('sidebar.voiceSettings')}</span>
             <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary">
               <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" />
             </svg>
@@ -1132,14 +1137,27 @@ function UserAreaPanel({
       )}
 
       {/* User area bar */}
-      <div className="h-[52px] px-2 flex items-center select-none">
+      <div className="relative h-[52px] px-2 flex items-center select-none">
-        {/* Avatar + name */}
+        {accountMenuOpen && (
-        <div className="p-1 hover:bg-interactive-hover rounded-[4px] flex items-center gap-2 flex-1 min-w-0 cursor-pointer transition-colors group">
+          <AccountMenu
+            onClose={() => setAccountMenuOpen(false)}
+            onEditProfile={() => onSettingsClick('account')}
+          />
+        )}
+        {/* Avatar + name. The avatar opens the profile card (ProfileAvatar);
+            the name opens the account menu — which is what the cursor here has
+            been promising all along without anything happening. */}
+        <div className="p-1 hover:bg-interactive-hover rounded-[4px] flex items-center gap-2 flex-1 min-w-0 transition-colors group">
           <ProfileAvatar src={user.avatar} name={user.displayName ?? user.username} size={34} status={user.status} user={user} />
-          <div className="flex-1 min-w-0">
+          <button
+            onClick={() => setAccountMenuOpen((v) => !v)}
+            aria-haspopup="menu"
+            aria-expanded={accountMenuOpen}
+            className="flex-1 min-w-0 text-left cursor-pointer"
+          >
             <div className="text-[13.5px] font-semibold text-txt-primary truncate leading-tight">{user.displayName ?? user.username}</div>
             <div className="text-[11px] text-txt-tertiary truncate leading-tight group-hover:text-txt-secondary">@{user.username}</div>
-          </div>
+          </button>
         </div>
 
         {/* Controls */}

packages/web/src/components/layout/MemberSidebar.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { useT } from '../../i18n';
 import type { MemberWithUser, Activity } from '@backspace/shared';
 import { useSpaceStore } from '../../stores/spaceStore';
 import { useUIStore } from '../../stores/uiStore';
@@ -21,7 +22,7 @@ function getMemberGroup(member: MemberWithUser, ownerId: string | undefined) {
     const ownerRole = member.roles?.find(r => r.position > 0);
     return {
       key: '__owner__',
-      label: 'OWNER',
+      label: '__OWNER__',
       color: ownerRole?.color ?? 'rgb(var(--accent-rose))',
       position: Infinity,
     };
@@ -40,7 +41,10 @@ function getMemberGroup(member: MemberWithUser, ownerId: string | undefined) {
   // No explicit roles — just @everyone
   return {
     key: '__online__',
-    label: 'ONLINE',
+    // Marcado em vez de traduzido aqui: esta funcao nao e um componente e nao
+    // pode usar o hook. Nomes de cargo passam adiante sem traducao — sao dados
+    // do usuario, nao interface.
+    label: '__ONLINE__',
     color: undefined,
     position: -1,
   };
@@ -111,6 +115,7 @@ export function MemberSidebar() {
   const currentSpaceId = useSpaceStore((s) => s.currentSpaceId);
   const loadingSpaceId = useSpaceStore((s) => s.loadingSpaceId);
   const memberListOpen = useUIStore((s) => s.memberListOpen);
+  const tr = useT();
   const openUserProfile = useUIStore((s) => s.openUserProfile);
   const userActivities = useActivityStore((s) => s.userActivities);
 
@@ -183,7 +188,7 @@ export function MemberSidebar() {
   return (
     <div className="w-60 bg-surface-members flex-shrink-0 overflow-y-auto select-none no-scrollbar hidden md:block border-l border-border-hard">
       {showMemberSkeleton ? (
-        <div className="px-3 pt-4" role="status" aria-label="Loading members">
+        <div className="px-3 pt-4" role="status" aria-label={tr('sidebar.loadingMembers')}>
           {/* Role group 1 */}
           <div className="skeleton skeleton-bar h-2 w-[40%] mb-3" style={{ animationDelay: '0s' }} />
           {Array.from({ length: 2 }, (_, i) => (
@@ -207,7 +212,11 @@ export function MemberSidebar() {
         {roleGroups.map(([key, group]) => (
           <div key={key} className="mb-4">
             <h3 className="text-[10.5px] font-bold text-txt-tertiary uppercase tracking-[0.06em] px-2 mb-1">
-              {group.label} — {group.members.length}
+              {group.label === '__ONLINE__'
+                ? tr('sidebar.groupOnline')
+                : group.label === '__OWNER__'
+                  ? tr('sidebar.groupOwner')
+                  : group.label} — {group.members.length}
             </h3>
             {group.members.map((m) => renderMember(m))}
           </div>

packages/web/src/components/modals/SpaceSettings.tsx

@@ -7,6 +7,9 @@ import { Avatar } from '../ui/Avatar';
 import { api } from '../../api/client';
 import { hasPermissionBit, PermissionBits } from '../../utils/permissions';
 import { OverviewPanel } from './spaceSettingsPanels/OverviewPanel';
+import { AuditLogPanel } from './spaceSettingsPanels/AuditLogPanel';
+import { StatsPanel } from './spaceSettingsPanels/StatsPanel';
+import { useT } from '../../i18n';
 import { MembersPanel } from './spaceSettingsPanels/MembersPanel';
 import { RolesPanel } from './spaceSettingsPanels/RolesPanel';
 import { BansPanel } from './spaceSettingsPanels/BansPanel';
@@ -266,7 +269,8 @@ export function SpaceSettingsModal() {
   const spaces = useSpaceStore((s) => s.spaces);
   const spacePermissions = useSpaceStore((s) => s.spacePermissions);
 
-  const [tab, setTab] = useState<'overview' | 'discovery' | 'members' | 'roles' | 'bans'>('overview');
+  const t = useT();
+  const [tab, setTab] = useState<'overview' | 'discovery' | 'members' | 'roles' | 'bans' | 'audit' | 'stats'>('overview');
   const [mobileView, setMobileView] = useState<'tabs' | 'content'>('tabs');
 
   const isOpen = activeModal === 'spaceSettings';
@@ -331,6 +335,10 @@ export function SpaceSettingsModal() {
             {canBanMembers && (
               <button onClick={() => handleTabClick('bans')} className={tabClass('bans')}>Bans</button>
             )}
+            {canManageSpace && (
+              <button onClick={() => handleTabClick('audit')} className={tabClass('audit')}>{t('audit.title')}</button>
+            )}
+            <button onClick={() => handleTabClick('stats')} className={tabClass('stats')}>{t('stats.title')}</button>
           </div>
         </div>
 
@@ -366,6 +374,10 @@ export function SpaceSettingsModal() {
               {canBanMembers && (
                 <button onClick={() => handleTabClick('bans')} className={tabClass('bans')}>Bans</button>
               )}
+              {canManageSpace && (
+                <button onClick={() => handleTabClick('audit')} className={tabClass('audit')}>{t('audit.title')}</button>
+              )}
+              <button onClick={() => handleTabClick('stats')} className={tabClass('stats')}>{t('stats.title')}</button>
             </div>
           </div>
         )}
@@ -392,6 +404,8 @@ export function SpaceSettingsModal() {
               {tab === 'members' && <MembersPanel spaceId={currentSpaceId} />}
               {tab === 'roles' && canManageRoles && <RolesPanel spaceId={currentSpaceId} />}
               {tab === 'bans' && canBanMembers && <BansPanel spaceId={currentSpaceId} />}
+              {tab === 'audit' && canManageSpace && <AuditLogPanel spaceId={currentSpaceId} />}
+              {tab === 'stats' && <StatsPanel spaceId={currentSpaceId} />}
             </div>
           </div>
         )}

packages/web/src/components/modals/UserProfileModal.tsx

@@ -3,6 +3,9 @@ import { useNavigate } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
 import type { User } from '@backspace/shared';
 import { Avatar } from '../ui/Avatar';
+import { ProfileActivity } from '../ui/ProfileActivity';
+import { useT } from '../../i18n';
+import { useActivityStore } from '../../stores/activityStore';
 import { Username } from '../ui/Username';
 import { useUIStore } from '../../stores/uiStore';
 import { useSpaceStore, getApiForOrigin, resolveUserOrigin } from '../../stores/spaceStore';
@@ -64,6 +67,7 @@ export function UserProfileModal() {
   const cancelFriendRequest = useSocialStore((s) => s.cancelFriendRequest);
   const currentUser = useAuthStore((s) => s.user);
 
+  const t = useT();
   const [user, setUser] = useState<User | null>(null);
   const [userOrigin, setUserOrigin] = useState('');
   const [activeTab, setActiveTab] = useState<Tab>('about');
@@ -142,13 +146,28 @@ export function UserProfileModal() {
     return () => document.removeEventListener('keydown', handleKey);
   }, [isOpen, closeModal]);
 
+  // Keyed by home id, matching every other activity consumer (ActivityPanel,
+  // MemberSidebar), so federated users resolve to the same record.
+  //
+  // Must sit ABOVE the early return: `user` is null on the first render and
+  // arrives asynchronously, so a hook below it runs on some renders and not
+  // others — React counts hooks per render and aborts the tree (#310).
+  // The `?? []` stays OUTSIDE the selector; building it inside would hand
+  // zustand a fresh array reference every render and spin.
+  const activityList = useActivityStore((s) =>
+    user ? s.userActivities.get(user.homeUserId ?? user.id) : undefined,
+  );
+
   if (!isOpen || !user) return null;
 
+  const activities = activityList ?? [];
+
   const { baseName, domain } = parseFederatedUsername(user.username);
   const displayName = user.displayName ?? baseName;
 
   // Banner — use correct API client for remote users
   const profileApi = getApiForOrigin(userOrigin);
+
   const bannerSrc = user.banner
     ? (user.banner.startsWith('http') ? user.banner : profileApi.uploads.url(user.banner))
     : null;
@@ -335,7 +354,7 @@ export function UserProfileModal() {
               {user.bio && (
                 <div>
                   <span className="text-[11px] uppercase tracking-wide font-semibold text-txt-tertiary">
-                    About Me
+                    {t('profile.aboutMe')}
                   </span>
                   <div className="text-[13px] text-txt-secondary mt-1 whitespace-pre-wrap break-words leading-relaxed [&_strong]:font-semibold [&_strong]:text-txt-primary [&_em]:italic [&_a]:text-accent-primary [&_a]:underline">
                     <ReactMarkdown
@@ -353,10 +372,13 @@ export function UserProfileModal() {
                 </div>
               )}
 
+              {/* Current activity — the "Listening to Spotify" block */}
+              <ProfileActivity activities={activities} />
+
               {/* Member Since */}
               <div>
                 <span className="text-[11px] uppercase tracking-wide font-semibold text-txt-tertiary">
-                  Member Since
+                  {t('profile.memberSince')}
                 </span>
                 <div className="text-[13px] text-txt-secondary mt-1">
                   {new Date(user.createdAt).toLocaleDateString(undefined, {
@@ -499,7 +521,7 @@ export function UserProfileModal() {
             onClick={handleSendMessage}
             className="flex-1 py-2 rounded-lg text-[13px] font-medium text-white bg-accent-primary hover:bg-accent-primary/80 transition-colors"
           >
-            Send Message
+            {t('profile.sendMessage')}
           </button>
 
           {friendship.state === 'none' && (

packages/web/src/components/modals/UserSettings.tsx

@@ -9,6 +9,8 @@ import { useAuthStore } from '../../stores/authStore';
 import { AccountPanel } from './settingsPanels/AccountPanel';
 import { VoicePanel } from './settingsPanels/VoicePanel';
 import { PrivacyPanel } from './settingsPanels/PrivacyPanel';
+import { LanguagePanel } from './settingsPanels/LanguagePanel';
+import { useT } from '../../i18n';
 import { ConnectionsPanel } from './settingsPanels/ConnectionsPanel';
 import { DesktopPanel } from './settingsPanels/DesktopPanel';
 import { InstancePanel } from './settingsPanels/InstancePanel';
@@ -16,7 +18,7 @@ import { KeybindsPanel } from './settingsPanels/KeybindsPanel';
 import { isElectron } from '../../platform/platform';
 import { SettingsSectionsProvider, useSettingsSectionsContext } from './SettingsSectionsContext';
 
-type SettingsTab = 'account' | 'voice' | 'privacy' | 'connections' | 'keybinds' | 'desktop' | 'instance';
+type SettingsTab = 'account' | 'voice' | 'privacy' | 'connections' | 'keybinds' | 'language' | 'desktop' | 'instance';
 
 function SidebarSubLinks() {
   const ctx = useSettingsSectionsContext();
@@ -60,6 +62,7 @@ export function UserSettingsModal() {
   const user = useAuthStore((s) => s.user);
   const logout = useAuthStore((s) => s.logout);
 
+  const t = useT();
   const [tab, setTab] = useState<SettingsTab>('account');
   const [mobileView, setMobileView] = useState<'tabs' | 'content'>('tabs');
   // AGPL § 13: home-instance source offer. Fetched from the public info endpoint
@@ -81,7 +84,7 @@ export function UserSettingsModal() {
   useEffect(() => {
     if (isOpen) {
       const requested = modalData.tab as SettingsTab | undefined;
-      if (requested && ['account', 'voice', 'privacy', 'connections', 'keybinds', 'instance'].includes(requested)) {
+      if (requested && ['account', 'voice', 'privacy', 'connections', 'keybinds', 'language', 'instance'].includes(requested)) {
         // Only allow instance tab for admins
         if (requested === 'instance' && !isAdmin) {
           setTab('account');
@@ -135,14 +138,15 @@ export function UserSettingsModal() {
           {/* Nav list */}
           <div className="glass-bubble rounded-lg p-2 flex-1 flex flex-col">
             <div className="text-[10px] font-semibold text-txt-tertiary uppercase tracking-wider px-3 py-1">User Settings</div>
-            <button onClick={() => handleTabClick('account')} className={tabClass('account')}>Account</button>
+            <button onClick={() => handleTabClick('account')} className={tabClass('account')}>{t('settings.tab.account')}</button>
-            <button onClick={() => handleTabClick('voice')} className={tabClass('voice')}>Voice &amp; Video</button>
+            <button onClick={() => handleTabClick('voice')} className={tabClass('voice')}>{t('settings.tab.voice')}</button>
-            <button onClick={() => handleTabClick('privacy')} className={tabClass('privacy')}>Privacy</button>
+            <button onClick={() => handleTabClick('privacy')} className={tabClass('privacy')}>{t('settings.tab.privacy')}</button>
 
             <div className="border-t border-white/[0.04] my-2 mx-2" />
             <div className="text-[10px] font-semibold text-txt-tertiary uppercase tracking-wider px-3 py-1">App Settings</div>
-            <button onClick={() => handleTabClick('connections')} className={tabClass('connections')}>Connections</button>
+            <button onClick={() => handleTabClick('connections')} className={tabClass('connections')}>{t('settings.tab.connections')}</button>
-            <button onClick={() => handleTabClick('keybinds')} className={tabClass('keybinds')}>Keybinds</button>
+            <button onClick={() => handleTabClick('keybinds')} className={tabClass('keybinds')}>{t('settings.tab.keybinds')}</button>
+            <button onClick={() => handleTabClick('language')} className={tabClass('language')}>{t('settings.tab.language')}</button>
             {isElectron() && <button onClick={() => handleTabClick('desktop')} className={tabClass('desktop')}>Desktop</button>}
 
             {isAdmin && (
@@ -192,14 +196,15 @@ export function UserSettingsModal() {
 
             <div className="glass-bubble rounded-lg p-2 space-y-0.5">
               <div className="text-[10px] font-semibold text-txt-tertiary uppercase tracking-wider px-3 py-1">User Settings</div>
-              <button onClick={() => handleTabClick('account')} className={tabClass('account')}>Account</button>
+              <button onClick={() => handleTabClick('account')} className={tabClass('account')}>{t('settings.tab.account')}</button>
-              <button onClick={() => handleTabClick('voice')} className={tabClass('voice')}>Voice &amp; Video</button>
+              <button onClick={() => handleTabClick('voice')} className={tabClass('voice')}>{t('settings.tab.voice')}</button>
-              <button onClick={() => handleTabClick('privacy')} className={tabClass('privacy')}>Privacy</button>
+              <button onClick={() => handleTabClick('privacy')} className={tabClass('privacy')}>{t('settings.tab.privacy')}</button>
 
               <div className="border-t border-white/[0.04] my-2 mx-2" />
               <div className="text-[10px] font-semibold text-txt-tertiary uppercase tracking-wider px-3 py-1">App Settings</div>
-              <button onClick={() => handleTabClick('connections')} className={tabClass('connections')}>Connections</button>
+              <button onClick={() => handleTabClick('connections')} className={tabClass('connections')}>{t('settings.tab.connections')}</button>
-              <button onClick={() => handleTabClick('keybinds')} className={tabClass('keybinds')}>Keybinds</button>
+              <button onClick={() => handleTabClick('keybinds')} className={tabClass('keybinds')}>{t('settings.tab.keybinds')}</button>
+              <button onClick={() => handleTabClick('language')} className={tabClass('language')}>{t('settings.tab.language')}</button>
               {isElectron() && <button onClick={() => handleTabClick('desktop')} className={tabClass('desktop')}>Desktop</button>}
 
               {isAdmin && (
@@ -249,6 +254,7 @@ export function UserSettingsModal() {
               {tab === 'privacy' && <PrivacyPanel />}
               {tab === 'connections' && <ConnectionsPanel />}
               {tab === 'keybinds' && <KeybindsPanel />}
+              {tab === 'language' && <LanguagePanel />}
               {tab === 'desktop' && <DesktopPanel />}
               {tab === 'instance' && isAdmin && <InstancePanel />}
             </div>

packages/web/src/components/modals/settingsPanels/AccountPanel.tsx

@@ -5,6 +5,7 @@ import { useInstanceStore } from '../../../stores/instanceStore';
 import { useSpaceStore } from '../../../stores/spaceStore';
 import { Avatar } from '../../ui/Avatar';
 import { ImageCropModal } from '../../ui/ImageCropModal';
+import { GifPicker } from '../../chat/GifPicker';
 import { DeleteAccountModal } from '../DeleteAccountModal';
 import { api } from '../../../api/client';
 import { useTransferStore } from '../../../stores/transferStore';
@@ -13,6 +14,16 @@ import { getAvatarGradient, adjustColor, mutedGradient, AVATAR_GRADIENT_MAP, BAN
 import { AVATAR_COLORS } from '@backspace/shared';
 import type { User, UserStatus, AvatarColor } from '@backspace/shared';
 import type { FederationOpResult } from '../../../utils/federationOps';
+/**
+ * Banner/avatar previews hold either a `blob:` object URL (local upload) or a
+ * remote `https:` URL (GIF picker). Only the former owns memory that must be
+ * released — calling revokeObjectURL on a remote URL is a silent no-op that
+ * would quietly hide a mistake here.
+ */
+function releasePreview(url: string | null): void {
+  if (url && url.startsWith('blob:')) URL.revokeObjectURL(url);
+}
+
 export function AccountPanel() {
   const user = useAuthStore((s) => s.user);
   const updateProfile = useAuthStore((s) => s.updateProfile);
@@ -37,6 +48,7 @@ export function AccountPanel() {
   const [bannerFilename, setBannerFilename] = useState<string | null>(null);
   const [uploadingBanner, setUploadingBanner] = useState(false);
   const [bannerCropSrc, setBannerCropSrc] = useState<string | null>(null);
+  const [showBannerGif, setShowBannerGif] = useState(false);
   const bannerInputRef = useRef<HTMLInputElement>(null);
 
   const addToast = useUIStore((s) => s.addToast);
@@ -54,7 +66,7 @@ export function AccountPanel() {
       setCustomHex(user.accentColor ?? '');
       // Reset upload state
       if (avatarPreview) URL.revokeObjectURL(avatarPreview);
-      if (bannerPreview) URL.revokeObjectURL(bannerPreview);
+      releasePreview(bannerPreview);
       setAvatarPreview(null);
       setAvatarFilename(null);
       setBannerPreview(null);
@@ -202,7 +214,7 @@ export function AccountPanel() {
   };
 
   const handleBannerCropComplete = async (blob: Blob) => {
-    if (bannerPreview) URL.revokeObjectURL(bannerPreview);
+    releasePreview(bannerPreview);
     const previewUrl = URL.createObjectURL(blob);
     setBannerPreview(previewUrl);
     setBannerCropSrc(null);
@@ -227,8 +239,21 @@ export function AccountPanel() {
     setAvatarFilename('');
   };
 
+  /**
+   * Banners accept absolute URLs end to end: the server's isValidAssetUrl
+   * allows http(s), and the profile render already branches on
+   * `banner.startsWith('http')`. So a picked GIF needs no upload — the remote
+   * URL is stored directly.
+   */
+  const handleBannerGifSelect = (url: string) => {
+    releasePreview(bannerPreview);
+    setBannerPreview(url);
+    setBannerFilename(url);
+    setShowBannerGif(false);
+  };
+
   const handleRemoveBanner = () => {
-    if (bannerPreview) URL.revokeObjectURL(bannerPreview);
+    releasePreview(bannerPreview);
     setBannerPreview(null);
     setBannerFilename('');
   };
@@ -300,7 +325,7 @@ export function AccountPanel() {
     setAvatarColorState(user.avatarColor ?? null);
     setCustomHex(user.accentColor ?? '');
     if (avatarPreview) URL.revokeObjectURL(avatarPreview);
-    if (bannerPreview) URL.revokeObjectURL(bannerPreview);
+    releasePreview(bannerPreview);
     setAvatarPreview(null);
     setAvatarFilename(null);
     setBannerPreview(null);
@@ -482,7 +507,7 @@ export function AccountPanel() {
                 </div>
               )}
             </button>
-            <div className="flex gap-2 mt-1">
+            <div className="relative flex gap-2 mt-1">
               <button
                 type="button"
                 onClick={() => bannerInputRef.current?.click()}
@@ -491,6 +516,23 @@ export function AccountPanel() {
               >
                 Change Banner
               </button>
+              <button
+                type="button"
+                onClick={() => setShowBannerGif((v) => !v)}
+                disabled={uploadingBanner}
+                className="text-xs text-accent-primary hover:underline"
+              >
+                Choose GIF
+              </button>
+              {showBannerGif && (
+                <>
+                  {/* Click-away layer, below the panel but above the page */}
+                  <div className="fixed inset-0 z-[290]" onClick={() => setShowBannerGif(false)} />
+                  <div className="absolute left-0 top-full mt-2 z-[300] glass rounded-xl overflow-hidden">
+                    <GifPicker onGifSelect={handleBannerGifSelect} />
+                  </div>
+                </>
+              )}
               {(displayBannerSrc || user.banner) && bannerFilename !== '' && (
                 <button
                   type="button"

packages/web/src/components/modals/settingsPanels/AudioInputSection.tsx

@@ -3,12 +3,14 @@ import { useVoiceStore } from '../../../stores/voiceStore';
 import { AudioManager } from '../../../audio/AudioManager';
 import { useAudioDevices } from '../../../hooks/useAudioDevices';
 import { SectionShell, DropdownItem } from './_shared/SettingsPickerPrimitives';
+import { useT } from '../../../i18n';
 
 export function AudioInputSection() {
   const inputDeviceId = useVoiceStore((s) => s.inputDeviceId);
   const setInputDevice = useVoiceStore((s) => s.setInputDevice);
   const inputVolume = useVoiceStore((s) => s.inputVolume);
   const setInputVolume = useVoiceStore((s) => s.setInputVolume);
+  const t = useT();
   const { permState, inputs, inputLabels, requestPermission } = useAudioDevices();
 
   const [listOpen, setListOpen] = useState(false);
@@ -20,6 +22,8 @@ export function AudioInputSection() {
   // then join voice and expect the meter / resolved-default hint to come
   // alive without reopening the panel.
   const [audioCtxGen, setAudioCtxGen] = useState(0);
+  const [micTesting, setMicTesting] = useState(false);
+  const [micTestError, setMicTestError] = useState('');
   const dropdownRef = useRef<HTMLDivElement>(null);
   const animFrameRef = useRef<number>(0);
 
@@ -77,7 +81,39 @@ export function AudioInputSection() {
       stopped = true;
       if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
     };
-  }, [permState, audioCtxGen]);
+  }, [permState, audioCtxGen, micTesting]);
+
+  // Subscribed (not a one-off getState) so the hint text below tracks the call
+  // state live. The release decision itself reads getState() at the moment of
+  // stopping, which is when it must be accurate.
+  const isLiveKitConnected = useVoiceStore((s) => s.isLiveKitConnected);
+
+  const toggleMicTest = async () => {
+    const am = AudioManager.getInstance();
+    if (micTesting) {
+      am.stopMicTest(!useVoiceStore.getState().isLiveKitConnected);
+      setMicTesting(false);
+      return;
+    }
+    setMicTestError('');
+    const ok = await am.startMicTest();
+    if (!ok) {
+      setMicTestError(t('settings.voice.micTest.failed'));
+      return;
+    }
+    setMicTesting(true);
+  };
+
+  // Leaving the panel mid-test must not leave the loopback running or the mic
+  // held open.
+  useEffect(() => {
+    return () => {
+      const am = AudioManager.getInstance();
+      if (am.isMicTestActive()) {
+        am.stopMicTest(!useVoiceStore.getState().isLiveKitConnected);
+      }
+    };
+  }, []);
 
   // Track the resolved upstream deviceId for the "Currently using: X" hint.
   // Re-runs on `audioCtxGen` because the resolved-default ID is only known
@@ -91,7 +127,7 @@ export function AudioInputSection() {
 
   if (permState === 'unknown') {
     return (
-      <SectionShell title="Input Device">
+      <SectionShell title={t('settings.voice.input.title')}>
         <div className="text-sm text-txt-tertiary">Checking microphone access…</div>
       </SectionShell>
     );
@@ -99,7 +135,7 @@ export function AudioInputSection() {
 
   if (permState === 'denied') {
     return (
-      <SectionShell title="Input Device">
+      <SectionShell title={t('settings.voice.input.title')}>
         <div className="space-y-2">
           <div className="text-sm text-txt-primary">⚠ Microphone access denied</div>
           <div className="text-xs text-txt-tertiary">
@@ -118,7 +154,7 @@ export function AudioInputSection() {
 
   if (permState === 'prompt') {
     return (
-      <SectionShell title="Input Device">
+      <SectionShell title={t('settings.voice.input.title')}>
         <div className="space-y-3">
           <div className="text-xs text-txt-tertiary">
             Microphone permission needed to list and choose an input device.
@@ -152,7 +188,7 @@ export function AudioInputSection() {
   const activeBars = Math.round(micLevel * micBars * (inputVolume / 100));
 
   return (
-    <SectionShell title="Input Device">
+    <SectionShell title={t('settings.voice.input.title')}>
       <div className="space-y-3">
         <div ref={dropdownRef}>
           <button
@@ -189,7 +225,7 @@ export function AudioInputSection() {
 
         <div>
           <div className="flex items-center justify-between mb-1.5">
-            <div className="text-[13px] font-medium text-txt-primary">Input Volume</div>
+            <div className="text-[13px] font-medium text-txt-primary">{t('settings.voice.input.volume')}</div>
             <div className="text-xs text-txt-tertiary tabular-nums">{inputVolume}%</div>
           </div>
           <input
@@ -213,9 +249,30 @@ export function AudioInputSection() {
               />
             ))}
           </div>
-          <div className="text-xs text-txt-tertiary mt-1.5">
+          <div className="flex items-center gap-3 mt-3">
-            The level meter activates once you join a voice channel.
+            <button
+              type="button"
+              onClick={() => void toggleMicTest()}
+              disabled={permState !== 'granted'}
+              className={`px-3 py-1.5 rounded-md text-[13px] font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
+                micTesting
+                  ? 'bg-interactive-muted text-txt-primary hover:brightness-110'
+                  : 'bg-accent-primary text-white hover:brightness-110'
+              }`}
+            >
+              {micTesting ? t('settings.voice.micTest.stop') : t('settings.voice.micTest.start')}
+            </button>
+            <span className="text-xs text-txt-tertiary">
+              {micTesting
+                ? t('settings.voice.micTest.playing')
+                : isLiveKitConnected
+                  ? t('settings.voice.micTest.inCall')
+                  : t('settings.voice.micTest.idle')}
+            </span>
           </div>
+          {micTestError && (
+            <div className="text-xs text-txt-danger mt-1.5">{micTestError}</div>
+          )}
         </div>
       </div>
     </SectionShell>

packages/web/src/components/modals/settingsPanels/ConnectionsPanel.tsx

@@ -1,10 +1,111 @@
-import { ConnectedInstances } from '../ConnectedInstances';
+import { useEffect, useState } from 'react';
+import { api } from '../../../api/client';
+import { useT, type TranslationKey } from '../../../i18n';
+
+/** Errors the OAuth callback can hand back in the URL. */
+const CALLBACK_ERRORS = ['denied', 'invalid_state', 'exchange_failed'] as const;
+type CallbackError = (typeof CALLBACK_ERRORS)[number];
+
+function readCallbackResult(): CallbackError | 'connected' | null {
+  if (typeof window === 'undefined') return null;
+  const value = new URLSearchParams(window.location.search).get('spotify');
+  if (value === 'connected') return 'connected';
+  return CALLBACK_ERRORS.includes(value as CallbackError) ? (value as CallbackError) : null;
+}
 
 export function ConnectionsPanel() {
+  const t = useT();
+  const [configured, setConfigured] = useState(true);
+  const [connected, setConnected] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [callbackError, setCallbackError] = useState<CallbackError | null>(null);
+
+  useEffect(() => {
+    const result = readCallbackResult();
+    if (result && result !== 'connected') setCallbackError(result);
+    // Drop the parameter so a refresh does not replay the old outcome.
+    if (result && typeof window !== 'undefined') {
+      const url = new URL(window.location.href);
+      url.searchParams.delete('spotify');
+      window.history.replaceState({}, '', url.toString());
+    }
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    api.spotify.status()
+      .then((s) => { if (!cancelled) { setConfigured(s.configured); setConnected(s.connected); } })
+      .catch(() => { /* leave the panel in its default state */ });
+    return () => { cancelled = true; };
+  }, []);
+
+  const handleConnect = async () => {
+    setBusy(true);
+    try {
+      const { url } = await api.spotify.authorizeUrl();
+      window.location.href = url;
+    } catch {
+      setBusy(false);
+    }
+  };
+
+  const handleDisconnect = async () => {
+    setBusy(true);
+    try {
+      await api.spotify.disconnect();
+      setConnected(false);
+    } finally {
+      setBusy(false);
+    }
+  };
+
   return (
-    <div className="space-y-5">
+    <div className="max-w-2xl">
-      <h2 className="text-lg font-semibold text-txt-primary mb-6">Connections</h2>
+      <h2 className="text-lg font-semibold text-txt-primary mb-6">{t('connections.title')}</h2>
-      <ConnectedInstances />
+
+      <div className="rounded-lg bg-surface-elevated/40 p-4">
+        <div className="flex items-center justify-between gap-4">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" className="text-accent-mint flex-shrink-0" aria-hidden="true">
+                <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.586 14.424a.623.623 0 0 1-.857.207c-2.348-1.435-5.304-1.76-8.785-.964a.623.623 0 1 1-.277-1.215c3.809-.871 7.077-.496 9.712 1.115a.623.623 0 0 1 .207.857Zm1.223-2.722a.78.78 0 0 1-1.072.257c-2.687-1.652-6.785-2.131-9.965-1.166a.78.78 0 1 1-.452-1.492c3.632-1.102 8.147-.568 11.232 1.329a.78.78 0 0 1 .257 1.072Zm.105-2.835c-3.223-1.914-8.54-2.09-11.617-1.156a.935.935 0 1 1-.542-1.79c3.532-1.072 9.404-.865 13.115 1.338a.935.935 0 0 1-.956 1.608Z" />
+              </svg>
+              <span className="text-[15px] font-semibold text-txt-primary">Spotify</span>
+              {connected && (
+                <span className="text-[11px] px-1.5 py-0.5 rounded bg-status-online/15 text-status-online font-medium">
+                  {t('connections.spotify.connected')}
+                </span>
+              )}
+            </div>
+            <p className="text-[13px] text-txt-secondary mt-1">{t('connections.spotify.description')}</p>
+            <p className="text-[12px] text-txt-tertiary mt-1">{t('connections.spotify.hint')}</p>
+          </div>
+
+          {configured && (
+            <button
+              type="button"
+              onClick={() => void (connected ? handleDisconnect() : handleConnect())}
+              disabled={busy}
+              className={`px-3 py-1.5 rounded-md text-[13px] font-medium flex-shrink-0 transition-colors disabled:opacity-50 ${
+                connected
+                  ? 'bg-interactive-muted text-txt-primary hover:brightness-110'
+                  : 'bg-accent-primary text-white hover:brightness-110'
+              }`}
+            >
+              {connected ? t('connections.spotify.disconnect') : t('connections.spotify.connect')}
+            </button>
+          )}
+        </div>
+
+        {!configured && (
+          <p className="text-[12px] text-txt-tertiary mt-3">{t('connections.spotify.notConfigured')}</p>
+        )}
+        {callbackError && (
+          <p className="text-[12px] text-txt-danger mt-3">
+            {t(`connections.spotify.error.${callbackError}` as TranslationKey)}
+          </p>
+        )}
+      </div>
     </div>
   );
 }

packages/web/src/components/modals/settingsPanels/LanguagePanel.tsx

@@ -0,0 +1,48 @@
+import { SectionShell } from './_shared/SettingsPickerPrimitives';
+import { useLocaleStore, useT, LOCALES, type Locale } from '../../../i18n';
+import type { TranslationKey } from '../../../i18n';
+
+const LOCALE_LABEL: Record<Locale, TranslationKey> = {
+  en: 'settings.language.en',
+  'pt-BR': 'settings.language.ptBR',
+};
+
+/**
+ * Language picker. Each option is labelled in the active language rather than
+ * in its own — a reader who cannot find their way back out of a language they
+ * picked by mistake is the one failure this screen must not have.
+ */
+export function LanguagePanel() {
+  const t = useT();
+  const locale = useLocaleStore((s) => s.locale);
+  const setLocale = useLocaleStore((s) => s.setLocale);
+
+  return (
+    <SectionShell title={t('settings.language.title')}>
+      <p className="text-[13px] text-txt-tertiary mb-3">
+        {t('settings.language.description')}
+      </p>
+      <div className="flex flex-col gap-1.5">
+        {LOCALES.map((option) => (
+          <button
+            key={option}
+            type="button"
+            onClick={() => setLocale(option)}
+            className={`flex items-center justify-between px-3 py-2 rounded-md text-[14px] text-left transition-colors ${
+              option === locale
+                ? 'bg-interactive-selected text-txt-primary'
+                : 'text-txt-secondary hover:bg-interactive-hover'
+            }`}
+          >
+            <span>{t(LOCALE_LABEL[option])}</span>
+            {option === locale && (
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                <path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+              </svg>
+            )}
+          </button>
+        ))}
+      </div>
+    </SectionShell>
+  );
+}

packages/web/src/components/modals/settingsPanels/PrivacyPanel.tsx

@@ -3,8 +3,10 @@ import { useAuthStore } from '../../../stores/authStore';
 import { useActivityStore } from '../../../stores/activityStore';
 import { api } from '../../../api/client';
 import { Toggle } from '../../ui/Toggle';
+import { useT } from '../../../i18n';
 
 export function PrivacyPanel() {
+  const t = useT();
   const user = useAuthStore((s) => s.user);
   const setUser = useAuthStore((s) => s.setUser);
   const showActivity = useActivityStore((s) => s.showActivity);
@@ -31,7 +33,7 @@ export function PrivacyPanel() {
 
   return (
     <div className="space-y-5">
-      <h2 className="text-lg font-semibold text-txt-primary mb-6">Privacy</h2>
+      <h2 className="text-lg font-semibold text-txt-primary mb-6">{t('privacy.title')}</h2>
       <div>
         <div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">
           Discovery
@@ -39,9 +41,9 @@ export function PrivacyPanel() {
         <div className="rounded-lg bg-white/[0.03] border border-white/[0.04] p-3.5">
           <div className="flex items-center justify-between py-1">
             <div className="flex-1 mr-4">
-              <div className="text-sm text-txt-primary">Allow others to find my profile</div>
+              <div className="text-sm text-txt-primary">{t('privacy.discoverable.label')}</div>
               <div className="text-xs text-txt-tertiary mt-0.5">
-                When enabled, your profile appears in Discover People. Others can always add you by exact username.
+                {t('privacy.discoverable.description')}
               </div>
             </div>
             <Toggle enabled={discoverable} onChange={handleToggle} />
@@ -60,9 +62,9 @@ export function PrivacyPanel() {
         <div className="rounded-lg bg-white/[0.03] border border-white/[0.04] p-3.5">
           <div className="flex items-center justify-between py-1">
             <div className="flex-1 mr-4">
-              <div className="text-sm text-txt-primary">Share Activity Status</div>
+              <div className="text-sm text-txt-primary">{t('privacy.activity.label')}</div>
               <div className="text-xs text-txt-tertiary mt-0.5">
-                Allow others to see what you're up to, like games you're playing or music you're listening to.
+                {t('privacy.activity.description')}
               </div>
             </div>
             <Toggle

packages/web/src/components/modals/spaceSettingsPanels/AuditLogPanel.tsx

@@ -0,0 +1,132 @@
+import { useEffect, useState, useCallback } from 'react';
+import type { AuditEvent } from '@backspace/shared/src/audit.js';
+import { api } from '../../../api/client';
+import { Avatar } from '../../ui/Avatar';
+import { useT, type TranslationKey } from '../../../i18n';
+
+interface AuditLogPanelProps {
+  spaceId: string;
+}
+
+/** Actions carry a `{name}` only when the metadata supplies one. */
+function actionKey(action: string): TranslationKey {
+  const key = `audit.action.${action}` as TranslationKey;
+  return key;
+}
+
+const KNOWN_ACTIONS = new Set([
+  'space.update', 'space.transfer_ownership',
+  'channel.create', 'channel.update', 'channel.delete',
+  'member.kick', 'member.leave', 'member.ban', 'member.unban',
+  'role.create', 'role.update', 'role.delete',
+  'invite.create', 'message.delete',
+]);
+
+function formatTimestamp(ms: number, locale: string): string {
+  return new Date(ms).toLocaleString(locale, {
+    day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit',
+  });
+}
+
+export function AuditLogPanel({ spaceId }: AuditLogPanelProps) {
+  const t = useT();
+  const [events, setEvents] = useState<AuditEvent[]>([]);
+  const [hasMore, setHasMore] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+
+  const load = useCallback(async (before?: string) => {
+    const page = await api.audit.log(spaceId, before);
+    setEvents((prev) => (before ? [...prev, ...page.events] : page.events));
+    setHasMore(page.hasMore);
+  }, [spaceId]);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    load()
+      .catch(() => { /* an empty log reads the same as an unreachable one here */ })
+      .finally(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+  }, [load]);
+
+  const handleLoadMore = async () => {
+    const last = events[events.length - 1];
+    if (!last) return;
+    setLoadingMore(true);
+    try {
+      await load(last.id);
+    } finally {
+      setLoadingMore(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="max-w-2xl">
+        <h2 className="text-lg font-semibold text-txt-primary mb-6">{t('audit.title')}</h2>
+        <div className="space-y-2">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="h-12 rounded-lg bg-surface-elevated animate-pulse" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-2xl">
+      <h2 className="text-lg font-semibold text-txt-primary mb-6">{t('audit.title')}</h2>
+
+      {events.length === 0 ? (
+        <p className="text-[13px] text-txt-tertiary">{t('audit.empty')}</p>
+      ) : (
+        <>
+          <ul className="space-y-1">
+            {events.map((event) => {
+              const actorName = event.actor
+                ? (event.actor.displayName ?? event.actor.username)
+                : t('audit.unknownActor');
+              const name = typeof event.metadata?.name === 'string' ? event.metadata.name : '';
+              // An action this build does not know about still gets a row: the
+              // log is a record, and hiding entries would defeat its purpose.
+              const key = KNOWN_ACTIONS.has(event.action) ? actionKey(event.action) : 'audit.action.unknown';
+              return (
+                <li key={event.id} className="flex items-center gap-3 py-2 px-2 rounded-lg hover:bg-interactive-hover">
+                  <Avatar
+                    src={event.actor?.avatar ?? null}
+                    name={actorName}
+                    size={28}
+                    userId={event.actor?.id}
+                  />
+                  <div className="min-w-0 flex-1">
+                    <div className="text-[13px] text-txt-secondary truncate">
+                      {t(key, { actor: actorName, name })}
+                    </div>
+                  </div>
+                  <time
+                    dateTime={new Date(event.createdAt).toISOString()}
+                    className="text-[11px] text-txt-tertiary flex-shrink-0 tabular-nums"
+                  >
+                    {formatTimestamp(event.createdAt, document.documentElement.lang || 'en')}
+                  </time>
+                </li>
+              );
+            })}
+          </ul>
+
+          {hasMore && (
+            <button
+              type="button"
+              onClick={() => void handleLoadMore()}
+              disabled={loadingMore}
+              className="mt-4 px-3 py-1.5 rounded-md text-[13px] font-medium bg-surface-elevated text-txt-secondary hover:text-txt-primary transition-colors disabled:opacity-50"
+            >
+              {t('audit.loadMore')}
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

packages/web/src/components/modals/spaceSettingsPanels/StatsPanel.tsx

@@ -0,0 +1,142 @@
+import { useEffect, useState } from 'react';
+import { api, type SpaceStats, type StatsLeader } from '../../../api/client';
+import { Avatar } from '../../ui/Avatar';
+import { useT, type TranslationKey } from '../../../i18n';
+
+interface StatsPanelProps {
+  spaceId: string;
+}
+
+const RANGES: { days: number; key: TranslationKey }[] = [
+  { days: 7, key: 'stats.range.7' },
+  { days: 30, key: 'stats.range.30' },
+  { days: 365, key: 'stats.range.365' },
+];
+
+function Leaderboard({
+  title,
+  rows,
+  format,
+}: {
+  title: string;
+  rows: StatsLeader[];
+  format: (value: number) => string;
+}) {
+  // The bar is relative to the leader, not to the total: with five people the
+  // share of a total is tiny and every bar looks the same.
+  const max = rows.length > 0 ? Math.max(...rows.map((r) => r.value)) : 0;
+
+  return (
+    <div>
+      <h3 className="text-[11px] uppercase tracking-wide font-semibold text-txt-tertiary mb-2">{title}</h3>
+      <ul className="space-y-1.5">
+        {rows.map((row) => (
+          <li key={row.userId} className="flex items-center gap-3">
+            <Avatar src={row.avatar} name={row.displayName ?? row.username} size={26} userId={row.userId} />
+            <div className="min-w-0 flex-1">
+              <div className="flex items-baseline justify-between gap-2">
+                <span className="text-[13px] text-txt-secondary truncate">
+                  {row.displayName ?? row.username}
+                </span>
+                <span className="text-[12px] text-txt-tertiary tabular-nums flex-shrink-0">
+                  {format(row.value)}
+                </span>
+              </div>
+              <div className="h-[3px] rounded-full bg-interactive-muted mt-1 overflow-hidden">
+                <div
+                  className="h-full bg-accent-primary rounded-full"
+                  style={{ width: max > 0 ? `${(row.value / max) * 100}%` : '0%' }}
+                />
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export function StatsPanel({ spaceId }: StatsPanelProps) {
+  const t = useT();
+  const [days, setDays] = useState(30);
+  const [stats, setStats] = useState<SpaceStats | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    api.stats.space(spaceId, days)
+      .then((data) => { if (!cancelled) setStats(data); })
+      .catch(() => { if (!cancelled) setStats(null); })
+      .finally(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+  }, [spaceId, days]);
+
+  const formatDuration = (ms: number) => {
+    const minutes = Math.round(ms / 60000);
+    const hours = Math.floor(minutes / 60);
+    return hours > 0
+      ? t('stats.hours', { hours, minutes: minutes % 60 })
+      : t('stats.minutes', { minutes });
+  };
+
+  const isEmpty = !stats || (stats.voice.length === 0 && stats.messages.length === 0);
+
+  return (
+    <div className="max-w-2xl">
+      <h2 className="text-lg font-semibold text-txt-primary mb-4">{t('stats.title')}</h2>
+
+      <div className="flex gap-1.5 mb-5">
+        {RANGES.map((range) => (
+          <button
+            key={range.days}
+            type="button"
+            onClick={() => setDays(range.days)}
+            className={`px-2.5 py-1 rounded-full text-[12px] font-medium transition-colors ${
+              days === range.days
+                ? 'bg-accent-primary text-white'
+                : 'bg-surface-elevated text-txt-secondary hover:text-txt-primary'
+            }`}
+          >
+            {t(range.key)}
+          </button>
+        ))}
+      </div>
+
+      {loading ? (
+        <div className="space-y-2">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="h-10 rounded-lg bg-surface-elevated animate-pulse" />
+          ))}
+        </div>
+      ) : isEmpty ? (
+        <p className="text-[13px] text-txt-tertiary">{t('stats.empty')}</p>
+      ) : (
+        <div className="space-y-6">
+          {stats.voice.length > 0 && (
+            <div>
+              <Leaderboard title={t('stats.voice.title')} rows={stats.voice} format={formatDuration} />
+              <p className="text-[11px] text-txt-tertiary mt-2">
+                {t('stats.total.voice', { value: formatDuration(stats.totals.voiceMs) })}
+              </p>
+            </div>
+          )}
+          {stats.messages.length > 0 && (
+            <div>
+              <Leaderboard
+                title={t('stats.messages.title')}
+                rows={stats.messages}
+                format={(value) => String(value)}
+              />
+              <p className="text-[11px] text-txt-tertiary mt-2">
+                {t('stats.total.messages', { value: stats.totals.messages })}
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+
+      <p className="text-[11px] text-txt-tertiary mt-6">{t('stats.note')}</p>
+    </div>
+  );
+}

packages/web/src/components/ui/ProfileActivity.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useState } from 'react';
+import type { Activity } from '@backspace/shared';
+import { getPrimaryActivity } from '@backspace/shared/src/activities.js';
+import { useT, type TranslationKey } from '../../i18n';
+import { serverNow } from '../../utils/serverTime';
+
+interface ProfileActivityProps {
+  activities: Activity[];
+}
+
+const VERB_KEY: Record<Exclude<Activity['type'], 'custom'>, TranslationKey> = {
+  playing: 'profile.activity.playing',
+  listening: 'profile.activity.listening',
+  watching: 'profile.activity.watching',
+  streaming: 'profile.activity.streaming',
+};
+
+function formatClock(ms: number): string {
+  const total = Math.max(0, Math.floor(ms / 1000));
+  const minutes = Math.floor(total / 60);
+  const seconds = total % 60;
+  const hours = Math.floor(minutes / 60);
+  if (hours > 0) return `${hours}:${String(minutes % 60).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+  return `${minutes}:${String(seconds).padStart(2, '0')}`;
+}
+
+/**
+ * The activity block on the profile card — the "Listening to Spotify" panel.
+ *
+ * Deliberately richer than `ActivityCard` (which renders name + elapsed for
+ * compact list rows): here there is room for the artwork, the track and the
+ * artist, so it reads `details`, `state` and `assets` too. Every one of those
+ * is optional and the block degrades to just the name, which is all today's
+ * process-based detector supplies — the extra fields are what a Spotify
+ * producer would fill in.
+ */
+export function ProfileActivity({ activities }: ProfileActivityProps) {
+  const t = useT();
+  const primary = getPrimaryActivity(activities);
+  const start = primary?.timestamps?.start;
+  const end = primary?.timestamps?.end;
+
+  const paused = primary?.paused === true;
+
+  // Ticks only while something is actually advancing: a paused track kept
+  // counting until the next poll, so the bar walked past where the listener
+  // had stopped.
+  const [now, setNow] = useState(() => serverNow());
+  useEffect(() => {
+    if (!start || paused) return;
+    const id = setInterval(() => setNow(serverNow()), 1000);
+    return () => clearInterval(id);
+  }, [start, paused]);
+
+  // Recompute once when playback resumes or the track changes, so the frozen
+  // value is not what gets drawn.
+  useEffect(() => { setNow(serverNow()); }, [start, paused]);
+
+  if (!primary || primary.type === 'custom') return null;
+
+  const elapsed = start ? now - start : 0;
+  const duration = start && end ? end - start : 0;
+  const progress = duration > 0 ? Math.min(Math.max(elapsed / duration, 0), 1) : 0;
+
+  // The server restricts asset images to http(s); this mirrors that so a
+  // record stored before that check cannot inject another scheme.
+  const art = primary.assets?.largeImage;
+  const artSrc = art && (art.startsWith('https://') || art.startsWith('http://')) ? art : null;
+
+  return (
+    <div>
+      <span className="text-[11px] uppercase tracking-wide font-semibold text-txt-tertiary">
+        {t(VERB_KEY[primary.type])} {primary.name}
+      </span>
+      <div className="mt-2 flex gap-3 rounded-lg bg-surface-elevated/40 p-2.5">
+        {artSrc && (
+          <img
+            src={artSrc}
+            alt={primary.assets?.largeText ?? ''}
+            className="w-[60px] h-[60px] rounded object-cover flex-shrink-0"
+            referrerPolicy="no-referrer"
+            loading="lazy"
+          />
+        )}
+        <div className="min-w-0 flex-1">
+          {primary.details && (
+            <div className="text-[13px] font-semibold text-txt-primary truncate">
+              {primary.details}
+            </div>
+          )}
+          {primary.state && (
+            <div className="text-[12px] text-txt-secondary truncate">{primary.state}</div>
+          )}
+          {duration > 0 ? (
+            <div className="mt-2">
+              <div className="h-[3px] rounded-full bg-interactive-muted overflow-hidden">
+                <div
+                  className="h-full bg-txt-primary rounded-full"
+                  style={{ width: `${progress * 100}%` }}
+                />
+              </div>
+              <div className="flex justify-between text-[10px] text-txt-tertiary mt-1 tabular-nums">
+                <span>{formatClock(elapsed)}</span>
+                <span>{formatClock(duration)}</span>
+              </div>
+            </div>
+          ) : start ? (
+            <div className="text-[11px] text-txt-tertiary mt-1 tabular-nums">
+              {t('profile.activity.elapsed', { time: formatClock(elapsed) })}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

packages/web/src/components/voice/CallTimer.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+
+interface CallTimerProps {
+  startedAt: number;
+  className?: string;
+}
+
+function format(elapsedMs: number): string {
+  const total = Math.max(0, Math.floor(elapsedMs / 1000));
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor((total % 3600) / 60);
+  const seconds = total % 60;
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return hours > 0 ? `${hours}:${pad(minutes)}:${pad(seconds)}` : `${minutes}:${pad(seconds)}`;
+}
+
+/**
+ * How long the current call has been running.
+ *
+ * `startedAt` comes from the server, so everyone sees the same figure and a
+ * late joiner sees the call's age rather than their own. The server destroys an
+ * empty room, so the next call starts from zero on its own.
+ */
+export function CallTimer({ startedAt, className = '' }: CallTimerProps) {
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    // Aligned to the next whole second so the digits do not visibly stutter.
+    const timeout = setTimeout(() => setNow(Date.now()), 1000 - (Date.now() % 1000));
+    return () => clearTimeout(timeout);
+  }, [now]);
+
+  return (
+    <span className={`tabular-nums ${className}`} title={new Date(startedAt).toLocaleTimeString()}>
+      {format(now - startedAt)}
+    </span>
+  );
+}

packages/web/src/components/voice/SoundboardPopover.tsx

@@ -0,0 +1,213 @@
+import { useEffect, useRef, useState } from 'react';
+import { api, type SoundboardSound } from '../../api/client';
+import { wsSend } from '../../hooks/useWebSocket';
+import { useTransferStore } from '../../stores/transferStore';
+import { waitForTransferAttachment } from '../../utils/waitForTransfer';
+import { useT } from '../../i18n';
+
+interface SoundboardPopoverProps {
+  spaceId: string;
+  canManage: boolean;
+  onClose: () => void;
+}
+
+/** Clips are short gags; anything larger is a music file in disguise. */
+const MAX_SOUND_BYTES = 2 * 1024 * 1024;
+
+export function SoundboardPopover({ spaceId, canManage, onClose }: SoundboardPopoverProps) {
+  const t = useT();
+  const [sounds, setSounds] = useState<SoundboardSound[]>([]);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState('');
+  // Two-step add: pick the file, then name it in a field right here. The first
+  // version asked with window.prompt, which Electron does not implement — it
+  // returned nothing and the flow aborted in silence, so adding a sound worked
+  // in the browser and did nothing at all in the desktop app.
+  const [pendingFile, setPendingFile] = useState<File | null>(null);
+  const [pendingName, setPendingName] = useState('');
+  const fileRef = useRef<HTMLInputElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    api.soundboard.list(spaceId)
+      .then(({ sounds: list }) => { if (!cancelled) setSounds(list); })
+      .catch(() => { /* an empty board is the honest fallback */ });
+    return () => { cancelled = true; };
+  }, [spaceId]);
+
+  useEffect(() => {
+    const handlePointer = (e: MouseEvent | TouchEvent) => {
+      if (!panelRef.current?.contains(e.target as Node)) onClose();
+    };
+    const handleKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('mousedown', handlePointer);
+    document.addEventListener('touchstart', handlePointer);
+    document.addEventListener('keydown', handleKey);
+    return () => {
+      document.removeEventListener('mousedown', handlePointer);
+      document.removeEventListener('touchstart', handlePointer);
+      document.removeEventListener('keydown', handleKey);
+    };
+  }, [onClose]);
+
+  // Fire and forget: the server echoes the clip back to everyone in the call,
+  // this client included, so the presser hears exactly what the others hear —
+  // including the server's refusal when the cooldown is still running.
+  const play = (soundId: string) => wsSend({ type: 'soundboard_play', soundId });
+
+  const pickFile = (file: File) => {
+    setError('');
+    if (file.size > MAX_SOUND_BYTES) {
+      setError(t('soundboard.tooLarge'));
+      return;
+    }
+    setPendingFile(file);
+    setPendingName(file.name.replace(/\.[^.]+$/, '').slice(0, 32));
+  };
+
+  const cancelPending = () => {
+    setPendingFile(null);
+    setPendingName('');
+    if (fileRef.current) fileRef.current.value = '';
+  };
+
+  const confirmPending = async () => {
+    const file = pendingFile;
+    const name = pendingName.trim();
+    if (!file || !name) return;
+
+    setUploading(true);
+    setError('');
+    try {
+      const tid = await useTransferStore.getState().startUpload(file, { tray: false });
+      const { filename } = await waitForTransferAttachment(tid);
+      const created = await api.soundboard.add(spaceId, name, filename);
+      setSounds((prev) => [...prev, created]);
+      cancelPending();
+    } catch {
+      // Distinct from the size check above: reporting every failure as "too
+      // large" sends people to shrink a file that was never the problem.
+      setError(t('soundboard.uploadFailed'));
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleRemove = async (soundId: string) => {
+    const previous = sounds;
+    setSounds((prev) => prev.filter((s) => s.id !== soundId));
+    try {
+      await api.soundboard.remove(soundId);
+    } catch {
+      setSounds(previous);
+    }
+  };
+
+  return (
+    <div
+      ref={panelRef}
+      className="absolute bottom-full left-2 right-2 mb-2 z-[200] glass rounded-xl overflow-hidden p-3 shadow-xl"
+    >
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-[12px] font-semibold uppercase tracking-wider text-txt-tertiary">
+          {t('soundboard.title')}
+        </span>
+        {canManage && (
+          <>
+            <button
+              type="button"
+              onClick={() => fileRef.current?.click()}
+              disabled={uploading}
+              className="text-[11px] text-accent-primary hover:underline disabled:opacity-50"
+            >
+              {uploading ? t('soundboard.adding') : t('soundboard.add')}
+            </button>
+            <input
+              ref={fileRef}
+              type="file"
+              accept="audio/*"
+              className="hidden"
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                if (file) pickFile(file);
+              }}
+            />
+          </>
+        )}
+      </div>
+
+      {error && <div className="text-[11px] text-txt-danger mb-2">{error}</div>}
+
+      {pendingFile && (
+        <div className="mb-2 p-2 rounded-lg bg-surface-elevated/60">
+          <label className="block text-[11px] text-txt-tertiary mb-1">
+            {t('soundboard.namePrompt')}
+          </label>
+          <input
+            type="text"
+            value={pendingName}
+            maxLength={32}
+            autoFocus
+            onChange={(e) => setPendingName(e.target.value)}
+            onKeyDown={(e) => {
+              // Scoped here so Enter does not reach the composer behind the popover.
+              e.stopPropagation();
+              if (e.key === 'Enter' && pendingName.trim()) void confirmPending();
+              if (e.key === 'Escape') cancelPending();
+            }}
+            className="input-search w-full mb-2"
+          />
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={() => void confirmPending()}
+              disabled={uploading || !pendingName.trim()}
+              className="px-2.5 py-1 rounded-md text-[11px] font-medium bg-accent-primary text-white disabled:opacity-50"
+            >
+              {uploading ? t('soundboard.adding') : t('soundboard.confirm')}
+            </button>
+            <button
+              type="button"
+              onClick={cancelPending}
+              disabled={uploading}
+              className="px-2.5 py-1 rounded-md text-[11px] font-medium bg-interactive-muted text-txt-secondary disabled:opacity-50"
+            >
+              {t('soundboard.cancel')}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {sounds.length === 0 ? (
+        <p className="text-[12px] text-txt-tertiary py-2">{t('soundboard.empty')}</p>
+      ) : (
+        <div className="grid grid-cols-3 gap-1.5 max-h-[220px] overflow-y-auto scrollbar-thin">
+          {sounds.map((sound) => (
+            <div key={sound.id} className="relative group">
+              <button
+                type="button"
+                onClick={() => play(sound.id)}
+                className="w-full px-2 py-2.5 rounded-lg bg-surface-elevated text-txt-secondary hover:text-txt-primary hover:brightness-125 transition-all text-[11px] font-medium truncate"
+                title={sound.name}
+              >
+                {sound.name}
+              </button>
+              {canManage && (
+                <button
+                  type="button"
+                  onClick={() => void handleRemove(sound.id)}
+                  title={t('soundboard.remove')}
+                  aria-label={t('soundboard.remove')}
+                  className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-accent-rose text-white text-[10px] leading-none opacity-0 group-hover:opacity-100 transition-opacity"
+                >
+                  ×
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

packages/web/src/components/voice/VoiceChannel.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 import { useVoiceStore } from '../../stores/voiceStore';
+import { CallTimer } from './CallTimer';
 import { useSpaceStore } from '../../stores/spaceStore';
 import { useAuthStore } from '../../stores/authStore';
 import { useContextMenuStore, type ContextMenuItem } from '../../stores/contextMenuStore';
@@ -33,6 +34,9 @@ interface VoiceChannelProps {
 
 /** Wrapper component for the volume slider so it can use hooks (useState). */
 export function VoiceChannel({ channelId, channelName, onClick, locked, canManage, onSettingsClick, voiceUserHandlers, dropZone }: VoiceChannelProps) {
+  // Present only while someone is in the channel; the server drops the room
+  // when it empties, which is what makes the next call start from zero.
+  const callStartedAt = useVoiceStore((s) => s.voiceRoomStarts.get(channelId));
   const serverVoiceUsers = useVoiceStore((s) => s.voiceUsers.get(channelId)) ?? EMPTY_VOICE_USERS;
   const currentVoiceChannel = useVoiceStore((s) => s.currentVoiceChannelId);
   const participants = useVoiceStore((s) => s.participants);
@@ -141,6 +145,12 @@ export function VoiceChannel({ channelId, channelName, onClick, locked, canManag
           </svg>
         )}
         <span className="truncate text-[15px] font-medium flex-1 text-left">{channelName}</span>
+        {callStartedAt !== undefined && (
+          <CallTimer
+            startedAt={callStartedAt}
+            className="flex-shrink-0 text-[11px] text-txt-tertiary font-medium"
+          />
+        )}
         {canManage && (
           <svg
             width="16"
@@ -199,6 +209,7 @@ export function VoiceChannel({ channelId, channelName, onClick, locked, canManag
                 <VoiceUserRow
                   userId={member?.user.homeUserId ?? userId}
                   displayName={displayName}
+                  user={member?.user}
                   avatar={avatar}
                   avatarColor={avatarColor ?? undefined}
                   isMuted={isMuted}

packages/web/src/components/voice/VoiceControls.tsx

@@ -1,10 +1,13 @@
 import React, { useState, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useVoiceStore } from '../../stores/voiceStore';
+import { useChatStore } from '../../stores/chatStore';
 import { useSpaceStore, getChannelOrigin } from '../../stores/spaceStore';
 import { getActiveRoom } from '../../hooks/useLiveKit';
 import { wsSend } from '../../hooks/useWebSocket';
 import { ScreenShareSettingsPopover } from './ScreenShareSettingsPopover';
 import { ConnectionInfoPopover } from './ConnectionInfoPopover';
+import { SoundboardPopover } from './SoundboardPopover';
 import { startScreenShare, stopScreenShare } from '../../utils/screenShare';
 import { hasPermissionBit, PermissionBits } from '../../utils/permissions';
 import { broadcastVoiceStatus } from '../../utils/voice';
@@ -16,6 +19,11 @@ import { handleCameraAction } from '../../utils/voiceActions';
  */
 export function VoiceControls() {
   const currentVoiceChannelId = useVoiceStore((s) => s.currentVoiceChannelId);
+  const currentVoiceSpaceId = useVoiceStore((s) => s.currentVoiceSpaceId);
+  const currentVoiceChannelName = useVoiceStore((s) => s.currentVoiceChannelName);
+  const setCurrentChannel = useChatStore((s) => s.setCurrentChannel);
+  const navigate = useNavigate();
+  const [showSoundboard, setShowSoundboard] = useState(false);
   const isCameraOn = useVoiceStore((s) => s.isCameraOn);
   const isScreenSharing = useVoiceStore((s) => s.isScreenSharing);
   const rnnoiseEnabled = useVoiceStore((s) => s.rnnoiseEnabled);
@@ -31,6 +39,10 @@ export function VoiceControls() {
 
   const activeDmCall = useVoiceStore((s) => s.activeDmCall);
   const channelPerms = useSpaceStore((s) => currentVoiceChannelId ? s.channelPermissions.get(currentVoiceChannelId) : undefined);
+  // MANAGE_SPACE lives in the space-level bitfield, not the per-channel one —
+  // reading it from channelPermissions silently yielded false for everyone.
+  const spacePerms = useSpaceStore((s) => currentVoiceSpaceId ? s.spacePermissions.get(currentVoiceSpaceId) : undefined);
+  const canManageSpace = hasPermissionBit(spacePerms, PermissionBits.MANAGE_SPACE);
 
   // In DM calls, all permissions are granted; in space channels, check SPEAK and STREAM
   const isDmCall = !!activeDmCall;
@@ -42,7 +54,20 @@ export function VoiceControls() {
   if (!currentVoiceChannelId && !activeDmCall) return null;
 
   const channel = channels.find(c => c.id === currentVoiceChannelId);
-  const channelName = channel?.name ?? (activeDmCall ? 'DM Call' : 'Voice Channel');
+  const channelName =
+    channel?.name ?? currentVoiceChannelName ?? (activeDmCall ? 'DM Call' : 'Voice Channel');
+
+  // Jump back to where the call is happening. DM calls live under @me; space
+  // calls under the space captured at join time.
+  const callSpaceId = activeDmCall ? '@me' : currentVoiceSpaceId;
+  const callChannelId = activeDmCall ? activeDmCall.dmChannelId : currentVoiceChannelId;
+  const canGoToCall = Boolean(callChannelId && callSpaceId && !connectionError);
+
+  const handleGoToCall = () => {
+    if (!canGoToCall || !callChannelId) return;
+    setCurrentChannel(callChannelId);
+    navigate(`/channels/${callSpaceId}/${callChannelId}`);
+  };
 
   const handleScreenShare = async () => {
     const room = getActiveRoom();
@@ -100,6 +125,19 @@ export function VoiceControls() {
 
   return (
     <>
+      {/* Zero-height anchor: the component returns a fragment, so without a
+          positioned ancestor the popover would resolve against whatever
+          happened to be relative further up the sidebar. */}
+      <div className="relative">
+        {showSoundboard && currentVoiceSpaceId && (
+          <SoundboardPopover
+            spaceId={currentVoiceSpaceId}
+            canManage={canManageSpace}
+            onClose={() => setShowSoundboard(false)}
+          />
+        )}
+      </div>
+
       {/* Row 1: Signal icon + status text + disconnect */}
       <div className="relative flex items-center gap-2 px-3 pt-3 pb-1">
         <button
@@ -120,9 +158,19 @@ export function VoiceControls() {
           <div className={`text-[13px] font-semibold leading-[18px] ${statusColor}`}>
             {connectionError ? 'Connection Failed' : isLiveKitConnected ? 'Voice Connected' : 'Connecting...'}
           </div>
+          {canGoToCall ? (
+            <button
+              onClick={handleGoToCall}
+              title="Go to call"
+              className="text-[12px] text-txt-tertiary truncate leading-[16px] w-full text-left hover:text-txt-primary hover:underline transition-colors cursor-pointer"
+            >
+              {channelName}
+            </button>
+          ) : (
             <div className="text-[12px] text-txt-tertiary truncate leading-[16px]">
               {connectionError ? connectionError : channelName}
             </div>
+          )}
         </div>
 
         <div className="flex items-center gap-0.5 flex-shrink-0">
@@ -187,6 +235,23 @@ export function VoiceControls() {
           </button>
         )}
 
+        {/* Soundboard — space calls only: clips belong to a space. */}
+        {currentVoiceSpaceId && (
+          <button
+            onClick={() => setShowSoundboard((v) => !v)}
+            className={`${btnBase} ${
+              showSoundboard
+                ? 'bg-surface-base text-accent-primary hover:bg-surface-channel'
+                : btnDefaultStyle
+            }`}
+            title="Soundboard"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6Z" />
+            </svg>
+          </button>
+        )}
+
         {/* Video Quality */}
         <button
           ref={qualityBtnRef}

packages/web/src/components/voice/VoiceUser.tsx

@@ -4,6 +4,7 @@ import { useVoiceStore } from '../../stores/voiceStore';
 import { useContextMenuStore, type ContextMenuItem } from '../../stores/contextMenuStore';
 import { buildVoiceModMenuItems, VolumeSliderItem } from './voiceMenuItems';
 import { useSpaceStore } from '../../stores/spaceStore';
+import { useUIStore } from '../../stores/uiStore';
 import { useVoiceParticipantMeta } from '../../hooks/useVoiceParticipantMeta';
 import { getActiveRoom, setCameraSubscription } from '../../hooks/useLiveKit';
 import type { UserTile } from '../../hooks/useLiveKit';
@@ -34,6 +35,7 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {
   const isLocal = participant.isLocal;
   const avatarUserId = participant.homeUserId ?? participant.userId;
   const { displayName, avatar, user } = useVoiceParticipantMeta(participant);
+  const openUserProfile = useUIStore((s) => s.openUserProfile);
 
   // --- VIDEO & UI ---
 
@@ -177,11 +179,25 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {
       <div className="absolute bottom-0 left-0 right-0 px-3 py-2 bg-gradient-to-t from-black/70 via-black/30 to-transparent">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-1.5 min-w-0">
+            {user ? (
+              // The tile's avatar already opens the profile card; the name
+              // sitting next to it did not, which read as the click failing.
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  openUserProfile(user, e.currentTarget.getBoundingClientRect(), 'right');
+                }}
+                className={`font-semibold text-white truncate text-left hover:underline ${large ? 'text-base' : 'text-[13px]'}`}
+              >
+                {displayName}
+              </button>
+            ) : (
               <span
                 className={`font-semibold text-white truncate ${large ? 'text-base' : 'text-[13px]'}`}
               >
                 {displayName}
               </span>
+            )}
             {isLocal && (
               <span className="text-[10px] text-white/40 font-medium">
                 (you)

packages/web/src/components/voice/VoiceUserRow.tsx

@@ -1,8 +1,18 @@
+import type { MouseEvent as ReactMouseEvent } from 'react';
+import type { User } from '@backspace/shared';
 import { Avatar } from '../ui/Avatar';
+import { ProfileAvatar } from '../ui/ProfileAvatar';
+import { useUIStore } from '../../stores/uiStore';
 
 export interface VoiceUserRowProps {
   userId: string;
   displayName: string;
+  /**
+   * Full record for the participant, when it has resolved. Without it the row
+   * stays presentational rather than offering a click that opens nothing —
+   * the same contract ProfileAvatar documents.
+   */
+  user?: User;
   avatar: string | null;
   avatarColor?: string;
   isMuted?: boolean;
@@ -22,6 +32,7 @@ export interface VoiceUserRowProps {
 export function VoiceUserRow({
   userId,
   displayName,
+  user,
   avatar,
   avatarColor,
   isMuted,
@@ -38,6 +49,15 @@ export function VoiceUserRow({
   className = '',
 }: VoiceUserRowProps) {
   const avatarSize = size === 'compact' ? 20 : 24;
+  const openUserProfile = useUIStore((s) => s.openUserProfile);
+
+  const openProfile = (e: ReactMouseEvent) => {
+    if (!user) return;
+    // The row sits inside a channel that has its own click target (join the
+    // call). Opening the profile is the more specific intent.
+    e.stopPropagation();
+    openUserProfile(user, e.currentTarget.getBoundingClientRect(), 'right');
+  };
 
   // Mic icon priority: server muted/deafened/permission muted (amber) > self-muted (danger)
   const showServerMicIcon = isServerMuted || isServerDeafened || isPermissionMuted;
@@ -49,6 +69,17 @@ export function VoiceUserRow({
 
   return (
     <div className={`flex items-center gap-2 ${className}`}>
+      {user ? (
+        <ProfileAvatar
+          src={avatar}
+          name={displayName}
+          size={avatarSize}
+          userId={userId}
+          user={user}
+          avatarColor={avatarColor}
+          className={isSpeaking ? 'rounded-full ring-2 ring-status-online' : ''}
+        />
+      ) : (
         <Avatar
           src={avatar}
           name={displayName}
@@ -57,9 +88,19 @@ export function VoiceUserRow({
           avatarColor={avatarColor}
           className={isSpeaking ? 'rounded-full ring-2 ring-status-online' : ''}
         />
+      )}
+      {user ? (
+        <button
+          onClick={openProfile}
+          className="text-[13px] text-txt-secondary truncate flex-1 min-w-0 text-left hover:text-txt-primary hover:underline"
+        >
+          {displayName}
+        </button>
+      ) : (
         <span className="text-[13px] text-txt-secondary truncate flex-1 min-w-0">
           {displayName}
         </span>
+      )}
       {/* Status badges */}
       <div className="flex items-center gap-1 flex-shrink-0">
         {/* Server muted / space deafened / permission muted — amber mic with slash */}

packages/web/src/hooks/useSpotifyActivity.ts

@@ -0,0 +1,108 @@
+import { useEffect, useRef } from 'react';
+import type { Activity } from '@backspace/shared';
+import { api } from '../api/client';
+import { useActivityStore } from '../stores/activityStore';
+import { setServerTime } from '../utils/serverTime';
+
+/** Ceiling between checks while a track is playing. */
+const POLL_CONNECTED_MS = 20_000;
+/** While the account is not linked — cheap heartbeat that notices a new link. */
+const POLL_IDLE_MS = 60_000;
+/** Never hammer the API, however close the track end looks. */
+const MIN_POLL_MS = 4_000;
+/**
+ * How long a silent answer is tolerated before the block is taken down.
+ *
+ * Spotify reports "nothing playing" in the gap between two songs, so clearing
+ * on the first empty answer made the block vanish and reappear between every
+ * track.
+ */
+const EMPTY_GRACE_MS = 25_000;
+
+function trackKey(activity: Activity | null): string {
+  return activity ? `${activity.details ?? ''}|${activity.state ?? ''}` : '';
+}
+
+/**
+ * Publishes what the user is listening to on Spotify as an activity.
+ *
+ * The browser never sees a Spotify token: it asks this instance, which holds
+ * the credentials and talks to Spotify. Reported under its own source so it
+ * coexists with the desktop game detector instead of replacing it.
+ */
+export function useSpotifyActivity(): void {
+  const showActivity = useActivityStore((s) => s.showActivity);
+  const lastKeyRef = useRef('');
+  const emptySinceRef = useRef(0);
+
+  useEffect(() => {
+    const setSource = useActivityStore.getState().setSourceActivities;
+
+    // The privacy toggle governs this like any other activity source.
+    if (!showActivity) {
+      setSource('spotify', []);
+      return;
+    }
+
+    let cancelled = false;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+
+    const tick = async () => {
+      let delay = POLL_IDLE_MS;
+      try {
+        // Polling a hidden tab burns Spotify's rate limit for a screen nobody
+        // is looking at; the next visible tick catches up.
+        if (typeof document === 'undefined' || !document.hidden) {
+          const { activity, connected, serverTime } = await api.spotify.nowPlaying();
+          if (cancelled) return;
+          if (serverTime) setServerTime(serverTime);
+
+          if (activity) {
+            emptySinceRef.current = 0;
+            const key = trackKey(activity);
+            // A new track goes out at once; progress-only updates can wait for
+            // the debounce, which is what it is there for.
+            const immediate = key !== lastKeyRef.current;
+            lastKeyRef.current = key;
+            setSource('spotify', [activity], { immediate });
+
+            // Check back just after this track should end, rather than landing
+            // mid-song and showing everyone the previous one for another
+            // twenty seconds.
+            const end = activity.timestamps?.end;
+            const remaining = end ? end - Date.now() + 1_000 : POLL_CONNECTED_MS;
+            delay = Math.max(MIN_POLL_MS, Math.min(POLL_CONNECTED_MS, remaining));
+          } else if (connected) {
+            const now = Date.now();
+            if (!emptySinceRef.current) emptySinceRef.current = now;
+            if (now - emptySinceRef.current >= EMPTY_GRACE_MS) {
+              lastKeyRef.current = '';
+              setSource('spotify', []);
+            }
+            delay = MIN_POLL_MS;
+          } else {
+            lastKeyRef.current = '';
+            emptySinceRef.current = 0;
+            setSource('spotify', []);
+            delay = POLL_IDLE_MS;
+          }
+        } else {
+          delay = POLL_CONNECTED_MS;
+        }
+      } catch {
+        // Network hiccup or a logged-out session: keep the last known state and
+        // retry, rather than reporting "stopped listening" on a transient error.
+        delay = POLL_CONNECTED_MS;
+      }
+      if (!cancelled) timer = setTimeout(() => void tick(), delay);
+    };
+
+    void tick();
+
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+      setSource('spotify', []);
+    };
+  }, [showActivity]);
+}

packages/web/src/hooks/useWebSocket.ts

@@ -1,4 +1,7 @@
 import React, { useEffect, useRef } from 'react';
+import { AudioManager } from '../audio/AudioManager';
+import { getSfxVolume } from '../utils/sfx';
+import { api } from '../api/client';
 import { useAuthStore } from '../stores/authStore';
 import { useSpaceStore, getChannelOrigin, getMyUserIdForOrigin, setMyUserIdForOrigin, resolveDmChannelId } from '../stores/spaceStore';
 import { useChatStore } from '../stores/chatStore';
@@ -9,6 +12,7 @@ import type { ServerEvent, ClientEvent, ActiveCallInfo, Activity, User } from '@
 import { resolveAssetUrl, normalizeUserAssets, normalizeMessageAssets } from '../utils/assetUrls';
 import { broadcastVoiceStatus, broadcastDeafenViaLiveKit } from '../utils/voice';
 import { applySpaceVoiceState } from '../utils/voiceStateSync';
+import { setServerTime } from '../utils/serverTime';
 import { sortDmChannels } from '../utils/dmSorting';
 import { registerSelfId } from '../utils/identity';
 import { getActiveRoom } from './useLiveKit';
@@ -278,6 +282,8 @@ function handleEvent(origin: string, event: ServerEvent): void {
         }
       }
 
+      if (event.serverTime) setServerTime(event.serverTime);
+
       // Clear voice state only for the reconnecting origin before repopulating
       clearVoiceUsersForOrigin(origin);
       if (event.voiceStates) {
@@ -285,6 +291,12 @@ function handleEvent(origin: string, event: ServerEvent): void {
           setVoiceUsers(channelId, userIds);
         }
       }
+      if (event.voiceRoomStarts) {
+        const vs = useVoiceStore.getState();
+        for (const [channelId, startedAt] of Object.entries(event.voiceRoomStarts)) {
+          vs.setVoiceRoomStart(channelId, startedAt);
+        }
+      }
       // Initialize activity data from ready payload
       if (event.userActivities) {
         useActivityStore.getState().initActivities(event.userActivities);
@@ -574,14 +586,31 @@ function handleEvent(origin: string, event: ServerEvent): void {
       break;
     }
 
-    case 'voice_state_update':
+    case 'voice_state_update': {
+      const vs = useVoiceStore.getState();
       if (event.action === 'join') {
         addVoiceUser(event.channelId, event.userId);
+        if (event.startedAt) vs.setVoiceRoomStart(event.channelId, event.startedAt);
       } else {
         removeVoiceUser(event.channelId, event.userId);
         clearVoiceUserStatus(event.userId);
+        // The server destroys an empty space room, so its clock is gone; drop
+        // ours too or the next call would show the previous one's elapsed time.
+        const remaining = useVoiceStore.getState().voiceUsers.get(event.channelId);
+        if (!remaining || remaining.length === 0) vs.clearVoiceRoomStart(event.channelId);
       }
       break;
+    }
+
+    case 'soundboard_played':
+      // Played locally by every client in the call rather than mixed into the
+      // presser's microphone: no upstream bandwidth, no LiveKit track, and the
+      // clip stays crisp instead of going through voice processing.
+      void AudioManager.getInstance().playUrl(
+        api.uploads.url(event.filename),
+        { volume: getSfxVolume() },
+      );
+      break;
 
     case 'voice_status_update':
       setVoiceUserStatus(event.userId, event.isMuted, event.isDeafened, event.isCameraOn, event.isScreenSharing);

packages/web/src/i18n/i18n.test.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest';
+import { translate } from './index';
+import { en } from './locales/en';
+import { ptBR } from './locales/pt-BR';
+
+describe('translate', () => {
+  it('returns the translation for the active locale', () => {
+    expect(translate('pt-BR', 'settings.tab.account')).toBe('Conta');
+  });
+
+  it('falls back to English for a key the locale has not translated yet', () => {
+    // The whole migration strategy depends on this: pt-BR is deliberately
+    // partial, and an untranslated screen must read in English rather than
+    // break.
+    const untranslated = (Object.keys(en) as (keyof typeof en)[]).find((k) => !(k in ptBR));
+    if (!untranslated) return; // pt-BR fully caught up — nothing to assert
+    expect(translate('pt-BR', untranslated)).toBe(en[untranslated]);
+  });
+
+  it('substitutes named parameters', () => {
+    expect(translate('en', 'profile.activity.elapsed', { time: '3:20' })).toBe('3:20 elapsed');
+    expect(translate('pt-BR', 'profile.activity.elapsed', { time: '3:20' })).toBe('3:20 decorrido');
+  });
+
+  it('leaves a placeholder alone when no value is supplied', () => {
+    expect(translate('en', 'profile.activity.elapsed')).toBe('{time} elapsed');
+  });
+
+  it('keeps every pt-BR key present in the source dictionary', () => {
+    // Guards against a key being renamed in en.ts while pt-BR keeps the old
+    // one, which would silently fall back forever.
+    for (const key of Object.keys(ptBR)) {
+      expect(en).toHaveProperty(key);
+    }
+  });
+});

packages/web/src/i18n/index.ts

@@ -0,0 +1,78 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { en, type TranslationKey } from './locales/en';
+import { ptBR } from './locales/pt-BR';
+
+export const LOCALES = ['en', 'pt-BR'] as const;
+export type Locale = (typeof LOCALES)[number];
+
+const DICTIONARIES: Record<Locale, Partial<Record<TranslationKey, string>>> = {
+  en,
+  'pt-BR': ptBR,
+};
+
+/**
+ * First-run guess from the browser. Persisted afterwards, so an explicit
+ * choice always wins over the browser's setting on later visits.
+ */
+function detectLocale(): Locale {
+  if (typeof navigator === 'undefined') return 'en';
+  return navigator.language?.toLowerCase().startsWith('pt') ? 'pt-BR' : 'en';
+}
+
+interface LocaleState {
+  locale: Locale;
+  setLocale: (locale: Locale) => void;
+}
+
+export const useLocaleStore = create<LocaleState>()(
+  persist(
+    (set) => ({
+      locale: detectLocale(),
+      setLocale: (locale) => set({ locale }),
+    }),
+    { name: 'backspace-locale' },
+  ),
+);
+
+// Keep <html lang> in sync: screen readers, spellcheck and hyphenation all read
+// it, and persisted state rehydrates after the first paint — hence the
+// subscription rather than a one-off assignment.
+if (typeof document !== 'undefined') {
+  document.documentElement.lang = useLocaleStore.getState().locale;
+  useLocaleStore.subscribe((state) => {
+    document.documentElement.lang = state.locale;
+  });
+}
+
+/**
+ * Resolves a key, substituting `{name}` placeholders.
+ *
+ * Falls back to English, then to the key itself. The key is a deliberate last
+ * resort: it is ugly on screen, which makes a missing entry obvious in review
+ * instead of silently rendering an empty string.
+ */
+export function translate(
+  locale: Locale,
+  key: TranslationKey,
+  params?: Record<string, string | number>,
+): string {
+  const template = DICTIONARIES[locale]?.[key] ?? en[key] ?? key;
+  if (!params) return template;
+  return template.replace(/\{(\w+)\}/g, (match, name: string) =>
+    name in params ? String(params[name]) : match,
+  );
+}
+
+/**
+ * Subscribes the calling component to the active locale, so switching language
+ * re-renders it. Components that only need the string once (outside React) can
+ * call `translate` with `useLocaleStore.getState().locale` instead.
+ */
+export function useT() {
+  const locale = useLocaleStore((s) => s.locale);
+  return (key: TranslationKey, params?: Record<string, string | number>) =>
+    translate(locale, key, params);
+}
+
+export type { TranslationKey };

packages/web/src/i18n/locales/en.ts

@@ -0,0 +1,182 @@
+/**
+ * Source dictionary. Every key the app can translate is declared here, and its
+ * type is derived from this object — a typo or a missing key fails typecheck
+ * rather than silently rendering the raw key at runtime.
+ *
+ * Keys are flat and dot-namespaced by system (`settings.voice.*`), so a
+ * translation pass can take one system at a time.
+ */
+export const en = {
+  // Settings — navigation
+  'settings.tab.account': 'Account',
+  'settings.tab.voice': 'Voice & Video',
+  'settings.tab.privacy': 'Privacy',
+  'settings.tab.connections': 'Connections',
+  'settings.tab.keybinds': 'Keybinds',
+  'settings.tab.desktop': 'Desktop',
+  'settings.tab.instance': 'Instance',
+  'settings.tab.language': 'Language',
+
+  // Settings — language
+  'settings.language.title': 'Language',
+  'settings.language.description': 'Choose the language for the interface. Anything not yet translated stays in English.',
+  'settings.language.en': 'English',
+  'settings.language.ptBR': 'Portuguese (Brazil)',
+
+  // Settings — voice: input
+  'settings.voice.input.title': 'Input Device',
+  'settings.voice.input.volume': 'Input Volume',
+  'settings.voice.micTest.start': "Let's Check",
+  'settings.voice.micTest.stop': 'Stop Testing',
+  'settings.voice.micTest.playing': 'Playing your mic back to you — say something.',
+  'settings.voice.micTest.inCall': 'The level meter is live while you are in a call.',
+  'settings.voice.micTest.idle': 'Test your mic without joining a call.',
+  'settings.voice.micTest.failed': 'Could not open the microphone. Check the device and its permission.',
+
+  // Soundboard
+  'soundboard.title': 'Soundboard',
+  'soundboard.empty': 'No sounds yet.',
+  'soundboard.add': 'Add sound',
+  'soundboard.adding': 'Uploading...',
+  'soundboard.remove': 'Remove',
+  'soundboard.namePrompt': 'Name for this sound',
+  'soundboard.confirm': 'Add',
+  'soundboard.cancel': 'Cancel',
+  'soundboard.joinFirst': 'Join a voice channel to use the soundboard.',
+  'soundboard.tooLarge': 'Sound must be under 2 MB and a few seconds long.',
+  'soundboard.uploadFailed': 'Could not upload that file. Try a different one.',
+
+  // Account menu (own name in the user bar)
+  'accountMenu.editProfile': 'Edit Profile',
+  'accountMenu.status': 'Status',
+  'accountMenu.status.online': 'Online',
+  'accountMenu.status.idle': 'Idle',
+  'accountMenu.status.dnd': 'Do Not Disturb',
+  'accountMenu.status.offline': 'Invisible',
+  'accountMenu.copyId': 'Copy User ID',
+  'accountMenu.copied': 'Copied',
+
+  // Sidebar — spaces, channels and members
+  'sidebar.friends': 'Friends',
+  'sidebar.directMessages': 'Direct Messages',
+  'sidebar.noChannels': 'No channels',
+  'sidebar.comingSoon': 'Coming Soon',
+  'sidebar.loadingChannels': 'Loading channels',
+  'sidebar.loadingMembers': 'Loading members',
+  'sidebar.groupOnline': 'ONLINE',
+  'sidebar.groupOwner': 'OWNER',
+  'sidebar.createChannel': 'Create Channel',
+  'sidebar.createCategory': 'Create Category',
+  'sidebar.categorySettings': 'Category Settings',
+  'sidebar.deleteCategory': 'Delete Category',
+  'sidebar.invitePeople': 'Invite People',
+  'sidebar.spaceSettings': 'Space Settings',
+  'sidebar.leaveGroup': 'Leave Group',
+  'sidebar.voiceSettings': 'Voice Settings',
+  'sidebar.inputDevice': 'Input Device',
+  'sidebar.inputVolume': 'Input Volume',
+  'sidebar.outputDevice': 'Output Device',
+  'sidebar.outputVolume': 'Output Volume',
+
+  // Chat — composer and messages
+  'chat.composer.placeholder': 'Message {channel}',
+  'chat.composer.attach': 'Attach file',
+  'chat.composer.emoji': 'Emoji',
+  'chat.composer.gif': 'GIF',
+  'chat.composer.gifPicker': 'GIF picker',
+  'chat.composer.emojiPicker': 'Emoji picker',
+  'chat.composer.send': 'Send',
+  'chat.composer.sendMessage': 'Send message',
+  'chat.composer.uploading': 'Uploading',
+  'chat.composer.uploadingEllipsis': 'Uploading…',
+  'chat.composer.removeAttachment': 'Remove attachment',
+  'chat.composer.failedAttachment': 'Remove or retry the failed attachment to send',
+  'chat.composer.replyingTo': 'Replying to',
+  'chat.composer.cancelReply': 'Cancel reply',
+  'chat.message.addReaction': 'Add reaction',
+  'chat.message.edit': 'Edit',
+  'chat.message.reply': 'Reply',
+
+  // Statistics
+  'stats.title': 'Statistics',
+  'stats.range.7': 'Last 7 days',
+  'stats.range.30': 'Last 30 days',
+  'stats.range.365': 'Last year',
+  'stats.voice.title': 'Time in voice',
+  'stats.messages.title': 'Messages sent',
+  'stats.empty': 'Nothing recorded in this period yet.',
+  'stats.total.voice': '{value} total',
+  'stats.total.messages': '{value} messages in total',
+  'stats.hours': '{hours}h {minutes}m',
+  'stats.minutes': '{minutes}m',
+  'stats.note': 'Counting started when this feature was installed — earlier activity is not included.',
+
+  // Audit log
+  'audit.title': 'Audit Log',
+  'audit.empty': 'Nothing recorded yet. Changes to the server show up here.',
+  'audit.loadMore': 'Load more',
+  'audit.unknownActor': 'Deleted account',
+  'audit.action.space.update': '{actor} updated the server settings',
+  'audit.action.space.transfer_ownership': '{actor} transferred ownership of the server',
+  'audit.action.channel.create': '{actor} created the channel {name}',
+  'audit.action.channel.update': '{actor} updated the channel {name}',
+  'audit.action.channel.delete': '{actor} deleted the channel {name}',
+  'audit.action.member.kick': '{actor} removed a member',
+  'audit.action.member.leave': '{actor} left the server',
+  'audit.action.member.ban': '{actor} banned a member',
+  'audit.action.member.unban': '{actor} unbanned a member',
+  'audit.action.role.create': '{actor} created the role {name}',
+  'audit.action.role.update': '{actor} updated the role {name}',
+  'audit.action.role.delete': '{actor} deleted a role',
+  'audit.action.invite.create': '{actor} created an invite',
+  'audit.action.message.delete': '{actor} deleted a message',
+  'audit.action.unknown': '{actor} performed an action',
+
+  // GIF picker
+  'gif.search': 'Search GIFs',
+  'gif.tab.favorites': 'Favorites',
+  'gif.tab.trending': 'Trending',
+  'gif.empty.search': 'No GIFs found',
+  'gif.empty.trending': 'No trending GIFs',
+  'gif.empty.favorites': 'No favorites yet — tap the star on any GIF.',
+  'gif.favorite.add': 'Add to favorites',
+  'gif.favorite.remove': 'Remove from favorites',
+  'gif.category.hello': 'hello',
+  'gif.category.lol': 'lol',
+  'gif.category.love': 'love',
+  'gif.category.birthday': 'happy birthday',
+  'gif.category.dance': 'dance',
+  'gif.category.facepalm': 'facepalm',
+
+  // Settings — privacy
+  'privacy.title': 'Privacy',
+  'privacy.discoverable.label': 'Allow others to find my profile',
+  'privacy.discoverable.description': 'When enabled, your profile appears in Discover People. Others can always add you by exact username.',
+  'privacy.activity.label': 'Share Activity Status',
+  'privacy.activity.description': "Allow others to see what you're up to, like games you're playing or music you're listening to.",
+
+  // Settings — connections
+  'connections.title': 'Connections',
+  'connections.spotify.description': 'Show what you are listening to on your profile.',
+  'connections.spotify.connect': 'Connect Spotify',
+  'connections.spotify.disconnect': 'Disconnect',
+  'connections.spotify.connected': 'Connected',
+  'connections.spotify.notConfigured': 'This instance has no Spotify credentials configured.',
+  'connections.spotify.hint': 'Only what is playing is read — playback cannot be controlled.',
+  'connections.spotify.error.denied': 'Authorisation was cancelled on Spotify.',
+  'connections.spotify.error.invalid_state': 'The authorisation link expired. Try again.',
+  'connections.spotify.error.exchange_failed': 'Spotify refused the authorisation. Try again.',
+
+  // Profile card
+  'profile.aboutMe': 'About Me',
+  'profile.memberSince': 'Member Since',
+  'profile.sendMessage': 'Send Message',
+  'profile.activity.playing': 'Playing',
+  'profile.activity.listening': 'Listening to',
+  'profile.activity.watching': 'Watching',
+  'profile.activity.streaming': 'Streaming',
+  'profile.activity.elapsed': '{time} elapsed',
+} as const;
+
+export type TranslationKey = keyof typeof en;
+export type Dictionary = Record<TranslationKey, string>;

packages/web/src/i18n/locales/pt-BR.ts

@@ -0,0 +1,178 @@
+import type { Dictionary } from './en';
+
+/**
+ * Partial on purpose. Translation happens one system per update, and anything
+ * absent here falls back to English — so a half-migrated interface is never
+ * broken, just partly in English.
+ */
+export const ptBR: Partial<Dictionary> = {
+  // Configurações — navegação
+  'settings.tab.account': 'Conta',
+  'settings.tab.voice': 'Voz e Vídeo',
+  'settings.tab.privacy': 'Privacidade',
+  'settings.tab.connections': 'Conexões',
+  'settings.tab.keybinds': 'Atalhos',
+  'settings.tab.desktop': 'Desktop',
+  'settings.tab.instance': 'Instância',
+  'settings.tab.language': 'Idioma',
+
+  // Configurações — idioma
+  'settings.language.title': 'Idioma',
+  'settings.language.description': 'Escolha o idioma da interface. O que ainda não foi traduzido continua em inglês.',
+  'settings.language.en': 'Inglês',
+  'settings.language.ptBR': 'Português (Brasil)',
+
+  // Configurações — voz: entrada
+  'settings.voice.input.title': 'Dispositivo de entrada',
+  'settings.voice.input.volume': 'Volume de entrada',
+  'settings.voice.micTest.start': 'Testar microfone',
+  'settings.voice.micTest.stop': 'Parar teste',
+  'settings.voice.micTest.playing': 'Devolvendo seu microfone para você — fale alguma coisa.',
+  'settings.voice.micTest.inCall': 'O medidor fica ativo enquanto você está numa call.',
+  'settings.voice.micTest.idle': 'Teste seu microfone sem entrar numa call.',
+  'settings.voice.micTest.failed': 'Não foi possível abrir o microfone. Verifique o dispositivo e a permissão.',
+
+  // Soundboard
+  'soundboard.title': 'Soundboard',
+  'soundboard.empty': 'Nenhum som ainda.',
+  'soundboard.add': 'Adicionar som',
+  'soundboard.adding': 'Enviando...',
+  'soundboard.remove': 'Remover',
+  'soundboard.namePrompt': 'Nome deste som',
+  'soundboard.confirm': 'Adicionar',
+  'soundboard.cancel': 'Cancelar',
+  'soundboard.joinFirst': 'Entre num canal de voz para usar o soundboard.',
+  'soundboard.tooLarge': 'O som precisa ter menos de 2 MB e poucos segundos.',
+  'soundboard.uploadFailed': 'Não foi possível enviar esse arquivo. Tente outro.',
+
+  // Menu da conta (próprio nome na barra de usuário)
+  'accountMenu.editProfile': 'Editar perfil',
+  'accountMenu.status': 'Status',
+  'accountMenu.status.online': 'Disponível',
+  'accountMenu.status.idle': 'Ausente',
+  'accountMenu.status.dnd': 'Não perturbe',
+  'accountMenu.status.offline': 'Invisível',
+  'accountMenu.copyId': 'Copiar ID do usuário',
+  'accountMenu.copied': 'Copiado',
+
+  // Barra lateral — servidores, canais e membros
+  'sidebar.friends': 'Amigos',
+  'sidebar.directMessages': 'Mensagens diretas',
+  'sidebar.noChannels': 'Nenhum canal',
+  'sidebar.comingSoon': 'Em breve',
+  'sidebar.loadingChannels': 'Carregando canais',
+  'sidebar.loadingMembers': 'Carregando membros',
+  'sidebar.groupOnline': 'DISPONÍVEIS',
+  'sidebar.groupOwner': 'DONO',
+  'sidebar.createChannel': 'Criar canal',
+  'sidebar.createCategory': 'Criar categoria',
+  'sidebar.categorySettings': 'Configurações da categoria',
+  'sidebar.deleteCategory': 'Excluir categoria',
+  'sidebar.invitePeople': 'Convidar pessoas',
+  'sidebar.spaceSettings': 'Configurações do servidor',
+  'sidebar.leaveGroup': 'Sair do grupo',
+  'sidebar.voiceSettings': 'Configurações de voz',
+  'sidebar.inputDevice': 'Dispositivo de entrada',
+  'sidebar.inputVolume': 'Volume de entrada',
+  'sidebar.outputDevice': 'Dispositivo de saída',
+  'sidebar.outputVolume': 'Volume de saída',
+
+  // Chat — composer e mensagens
+  'chat.composer.placeholder': 'Conversar em {channel}',
+  'chat.composer.attach': 'Anexar arquivo',
+  'chat.composer.emoji': 'Emoji',
+  'chat.composer.gif': 'GIF',
+  'chat.composer.gifPicker': 'Seletor de GIF',
+  'chat.composer.emojiPicker': 'Seletor de emoji',
+  'chat.composer.send': 'Enviar',
+  'chat.composer.sendMessage': 'Enviar mensagem',
+  'chat.composer.uploading': 'Enviando',
+  'chat.composer.uploadingEllipsis': 'Enviando…',
+  'chat.composer.removeAttachment': 'Remover anexo',
+  'chat.composer.failedAttachment': 'Remova ou tente de novo o anexo que falhou para poder enviar',
+  'chat.composer.replyingTo': 'Respondendo a',
+  'chat.composer.cancelReply': 'Cancelar resposta',
+  'chat.message.addReaction': 'Adicionar reação',
+  'chat.message.edit': 'Editar',
+  'chat.message.reply': 'Responder',
+
+  // Estatísticas
+  'stats.title': 'Estatísticas',
+  'stats.range.7': 'Últimos 7 dias',
+  'stats.range.30': 'Últimos 30 dias',
+  'stats.range.365': 'Último ano',
+  'stats.voice.title': 'Tempo em call',
+  'stats.messages.title': 'Mensagens enviadas',
+  'stats.empty': 'Nada registrado neste período ainda.',
+  'stats.total.voice': '{value} no total',
+  'stats.total.messages': '{value} mensagens no total',
+  'stats.hours': '{hours}h {minutes}min',
+  'stats.minutes': '{minutes}min',
+  'stats.note': 'A contagem começou quando esta funcionalidade foi instalada — atividade anterior não entra.',
+
+  // Registro de auditoria
+  'audit.title': 'Registro de auditoria',
+  'audit.empty': 'Nada registrado ainda. Mudanças no servidor aparecem aqui.',
+  'audit.loadMore': 'Carregar mais',
+  'audit.unknownActor': 'Conta excluída',
+  'audit.action.space.update': '{actor} alterou as configurações do servidor',
+  'audit.action.space.transfer_ownership': '{actor} transferiu a propriedade do servidor',
+  'audit.action.channel.create': '{actor} criou o canal {name}',
+  'audit.action.channel.update': '{actor} alterou o canal {name}',
+  'audit.action.channel.delete': '{actor} excluiu o canal {name}',
+  'audit.action.member.kick': '{actor} removeu um membro',
+  'audit.action.member.leave': '{actor} saiu do servidor',
+  'audit.action.member.ban': '{actor} baniu um membro',
+  'audit.action.member.unban': '{actor} removeu o banimento de um membro',
+  'audit.action.role.create': '{actor} criou o cargo {name}',
+  'audit.action.role.update': '{actor} alterou o cargo {name}',
+  'audit.action.role.delete': '{actor} excluiu um cargo',
+  'audit.action.invite.create': '{actor} criou um convite',
+  'audit.action.message.delete': '{actor} excluiu uma mensagem',
+  'audit.action.unknown': '{actor} realizou uma ação',
+
+  // Seletor de GIF
+  'gif.search': 'Buscar GIFs',
+  'gif.tab.favorites': 'Favoritos',
+  'gif.tab.trending': 'Em alta',
+  'gif.empty.search': 'Nenhum GIF encontrado',
+  'gif.empty.trending': 'Nenhum GIF em alta',
+  'gif.empty.favorites': 'Nenhum favorito ainda — toque na estrela de um GIF.',
+  'gif.favorite.add': 'Adicionar aos favoritos',
+  'gif.favorite.remove': 'Remover dos favoritos',
+  'gif.category.hello': 'oi',
+  'gif.category.lol': 'risada',
+  'gif.category.love': 'amor',
+  'gif.category.birthday': 'feliz aniversário',
+  'gif.category.dance': 'dança',
+  'gif.category.facepalm': 'vergonha alheia',
+
+  // Configurações — privacidade
+  'privacy.title': 'Privacidade',
+  'privacy.discoverable.label': 'Permitir que me encontrem',
+  'privacy.discoverable.description': 'Quando ativado, seu perfil aparece em Descobrir Pessoas. Qualquer um sempre pode te adicionar pelo nome de usuário exato.',
+  'privacy.activity.label': 'Compartilhar atividade',
+  'privacy.activity.description': 'Permite que os outros vejam o que você está fazendo, como jogos que está jogando ou música que está ouvindo.',
+
+  // Configurações — conexões
+  'connections.title': 'Conexões',
+  'connections.spotify.description': 'Mostre no seu perfil o que você está ouvindo.',
+  'connections.spotify.connect': 'Conectar Spotify',
+  'connections.spotify.disconnect': 'Desconectar',
+  'connections.spotify.connected': 'Conectado',
+  'connections.spotify.notConfigured': 'Esta instância não tem credenciais do Spotify configuradas.',
+  'connections.spotify.hint': 'Só é lido o que está tocando — não é possível controlar a reprodução.',
+  'connections.spotify.error.denied': 'A autorização foi cancelada no Spotify.',
+  'connections.spotify.error.invalid_state': 'O link de autorização expirou. Tente de novo.',
+  'connections.spotify.error.exchange_failed': 'O Spotify recusou a autorização. Tente de novo.',
+
+  // Cartão de perfil
+  'profile.aboutMe': 'Sobre mim',
+  'profile.memberSince': 'Membro desde',
+  'profile.sendMessage': 'Enviar mensagem',
+  'profile.activity.playing': 'Jogando',
+  'profile.activity.listening': 'Ouvindo',
+  'profile.activity.watching': 'Assistindo',
+  'profile.activity.streaming': 'Transmitindo',
+  'profile.activity.elapsed': '{time} decorrido',
+};

packages/web/src/platform/activityBridge.ts

@@ -10,16 +10,16 @@ export function initActivityBridge(): void {
   // Subscribe to future activity changes from main process
   unsubscribe = window.backspace.onActivityDetected((activity) => {
     if (activity) {
-      useActivityStore.getState().pushActivities([activity as Activity]);
+      useActivityStore.getState().setSourceActivities('desktop', [activity as Activity]);
     } else {
-      useActivityStore.getState().pushActivities([]);
+      useActivityStore.getState().setSourceActivities('desktop', []);
     }
   });
 
   // Request current state (handles instance-switch: game was already running)
   window.backspace.getCurrentActivity?.().then((activity: unknown) => {
     if (activity) {
-      useActivityStore.getState().pushActivities([activity as Activity]);
+      useActivityStore.getState().setSourceActivities('desktop', [activity as Activity]);
     }
   }).catch(() => {});
 }

packages/web/src/platform/electron.d.ts

@@ -61,6 +61,11 @@ interface BackspaceElectronAPI {
   // Screen share picker coordination
   onScreenShareSources: (callback: (sources: ElectronScreenSource[]) => void) => void;
   selectScreenSource: (sourceId: string | null, shareAudio?: boolean) => void;
+  onNativeAudioData?: (
+    callback: (data: ArrayBuffer, meta: { sampleRate: number; channels: number; bitsPerSample: number; isFloat: boolean }) => void,
+  ) => () => void;
+  onNativeAudioUnavailable?: (callback: () => void) => () => void;
+  stopNativeAudio?: () => void;
 
   // Instance URL management
   getInstanceUrl: () => Promise<string | null>;

packages/web/src/stores/activityStore.ts

@@ -1,5 +1,6 @@
 import { create } from 'zustand';
 import type { Activity } from '@backspace/shared';
+import { ACTIVITY_LIMITS } from '@backspace/shared/src/activities.js';
 import { wsSendAll } from '../hooks/useWebSocket';
 
 let pushTimer: ReturnType<typeof setTimeout> | null = null;
@@ -14,9 +15,18 @@ interface ActivityState {
   initActivities: (activityMap: Record<string, Activity[]>) => void;
   setShowActivity: (show: boolean) => void;
   pushActivities: (activities: Activity[]) => void;
+  setSourceActivities: (source: string, activities: Activity[], opts?: { immediate?: boolean }) => void;
   reset: () => void;
 }
 
+/**
+ * Activities kept per producer. The desktop process detector and Spotify report
+ * independently of each other, and a plain replace would let whichever spoke
+ * last erase the other — losing precisely the case this exists for: a game and
+ * Spotify at the same time.
+ */
+const bySource = new Map<string, Activity[]>();
+
 export const useActivityStore = create<ActivityState>((set, get) => ({
   userActivities: new Map(),
   showActivity: true,
@@ -75,8 +85,30 @@ export const useActivityStore = create<ActivityState>((set, get) => ({
     }, 5000);
   },
 
+  setSourceActivities: (source, activities, opts) => {
+    if (activities.length === 0) bySource.delete(source);
+    else bySource.set(source, activities);
+    const merged = Array.from(bySource.values())
+      .flat()
+      .slice(0, ACTIVITY_LIMITS.MAX_ACTIVITIES_PER_USER);
+
+    if (!opts?.immediate) {
+      get().pushActivities(merged);
+      return;
+    }
+
+    // Skips the 5s debounce. That delay exists to coalesce a chatty producer,
+    // but a track change happens once every few minutes and stacking it on top
+    // of the poll interval is what made everyone else see the previous song.
+    if (!get().showActivity) return;
+    if (pushTimer) { clearTimeout(pushTimer); pushTimer = null; }
+    set({ myActivities: merged });
+    wsSendAll({ type: 'activity_update', activities: merged });
+  },
+
   reset: () => {
     if (pushTimer) { clearTimeout(pushTimer); pushTimer = null; }
+    bySource.clear();
     set({ userActivities: new Map(), showActivity: true, myActivities: null });
   },
 }));

packages/web/src/stores/voiceStore.ts

@@ -16,7 +16,22 @@ export interface ScreenShareConfig {
 
 interface VoiceState {
   voiceUsers: Map<string, string[]>; // channelId → userIds
+  /**
+   * When each occupied voice channel's current call began, from the server.
+   * The client cannot derive this: someone joining an hour in must see the
+   * call's elapsed time, not their own.
+   */
+  voiceRoomStarts: Map<string, number>;
   currentVoiceChannelId: string | null;
+  /**
+   * Space and name of the channel the call is in, captured at join time.
+   * `channels` in spaceStore only holds the space the user is *viewing*, so
+   * once they navigate elsewhere the call's channel is no longer resolvable
+   * from it — these keep the voice panel able to name and link to the call.
+   * Transient: intentionally absent from `partialize`.
+   */
+  currentVoiceSpaceId: string | null;
+  currentVoiceChannelName: string | null;
   isMuted: boolean;
   isDeafened: boolean;
   isCameraOn: boolean;
@@ -85,7 +100,9 @@ interface VoiceState {
   setVoiceUsers: (channelId: string, userIds: string[]) => void;
   addVoiceUser: (channelId: string, userId: string) => void;
   removeVoiceUser: (channelId: string, userId: string) => void;
-  setCurrentVoiceChannel: (channelId: string | null) => void;
+  setVoiceRoomStart: (channelId: string, startedAt: number) => void;
+  clearVoiceRoomStart: (channelId: string) => void;
+  setCurrentVoiceChannel: (channelId: string | null, spaceId?: string | null, channelName?: string | null) => void;
   setParticipants: (participants: ParticipantInfo[]) => void;
   setSpeakingParticipants: (ids: Set<string>) => void;
   setConnectionError: (error: string | null) => void;
@@ -157,7 +174,10 @@ export const useVoiceStore = create<VoiceState>()(
   persist(
     (set, get) => ({
       voiceUsers: new Map(),
+      voiceRoomStarts: new Map(),
       currentVoiceChannelId: null,
+      currentVoiceSpaceId: null,
+      currentVoiceChannelName: null,
       isMuted: false,
       pttActive: false,
       isDeafened: false,
@@ -349,8 +369,26 @@ export const useVoiceStore = create<VoiceState>()(
         });
       },
 
-      setCurrentVoiceChannel: (channelId) => set({ 
+      setVoiceRoomStart: (channelId, startedAt) => set((state) => {
+        // First value wins: re-broadcasts on later joins carry the same start,
+        // but a stray newer one must not restart a running clock.
+        if (state.voiceRoomStarts.get(channelId) === startedAt) return {};
+        const next = new Map(state.voiceRoomStarts);
+        next.set(channelId, startedAt);
+        return { voiceRoomStarts: next };
+      }),
+
+      clearVoiceRoomStart: (channelId) => set((state) => {
+        if (!state.voiceRoomStarts.has(channelId)) return {};
+        const next = new Map(state.voiceRoomStarts);
+        next.delete(channelId);
+        return { voiceRoomStarts: next };
+      }),
+
+      setCurrentVoiceChannel: (channelId, spaceId = null, channelName = null) => set({
         currentVoiceChannelId: channelId,
+        currentVoiceSpaceId: channelId ? spaceId : null,
+        currentVoiceChannelName: channelId ? channelName : null,
         activeDmCall: null // Clear active DM call when joining a server channel
       }),
 
@@ -514,8 +552,11 @@ export const useVoiceStore = create<VoiceState>()(
         // Connection state
         hwOverdrive: false,
         voiceUsers: new Map(),
+        voiceRoomStarts: new Map(),
         voiceUserStates: new Map(),
         currentVoiceChannelId: null,
+        currentVoiceSpaceId: null,
+        currentVoiceChannelName: null,
         participants: [],
         speakingParticipantIds: new Set(),
         speakingUserIds: new Set(),

packages/web/src/utils/nativeScreenAudio.ts

@@ -0,0 +1,160 @@
+import { Room, Track, LocalAudioTrack, AudioPresets } from 'livekit-client';
+import { isElectron } from '../platform/platform';
+
+/**
+ * Turns the desktop app's native system-audio capture into a track LiveKit can
+ * publish.
+ *
+ * The native module hands the main process raw PCM, which arrives here in
+ * chunks over IPC. Web Audio has no "push samples" input, so each chunk is
+ * scheduled as a buffer source on a running cursor — the standard way to play a
+ * live stream without gaps.
+ *
+ * Exists because Electron's `audio: 'loopback'` captures the whole output mix,
+ * this app's own playback included, so every listener heard themselves echo.
+ */
+class NativeScreenAudio {
+  private ctx: AudioContext | null = null;
+  private destination: MediaStreamAudioDestinationNode | null = null;
+  private gain: GainNode | null = null;
+  private limiter: DynamicsCompressorNode | null = null;
+  private track: LocalAudioTrack | null = null;
+  private unsubscribe: (() => void) | null = null;
+  private nextStartTime = 0;
+
+  /**
+   * Held ahead of the cursor so a late chunk does not land in the past and get
+   * dropped. Small enough not to be noticeable against the video.
+   */
+  private static readonly BUFFER_AHEAD_S = 0.08;
+  /** Beyond this the stream has stalled; resync rather than drift forever. */
+  private static readonly MAX_DRIFT_S = 0.5;
+
+  /**
+   * WASAPI hands back the process's own mix, which sits far below the level a
+   * microphone track arrives at — listeners had to run the participant at 200%
+   * to hear anything. Boosted here rather than asking every listener to
+   * compensate, with a limiter after it so loud passages do not clip.
+   */
+  private static readonly BOOST = 3.0;
+
+  isActive(): boolean {
+    return this.track !== null;
+  }
+
+  async start(room: Room): Promise<boolean> {
+    if (!isElectron() || !window.backspace?.onNativeAudioData) return false;
+    if (this.track) return true;
+
+    this.ctx = new AudioContext();
+    this.destination = this.ctx.createMediaStreamDestination();
+
+    // source → gain → limiter → destination. The limiter is a compressor with
+    // a high ratio and fast attack: it only engages on peaks the boost would
+    // otherwise clip, and is transparent below that.
+    this.gain = this.ctx.createGain();
+    this.gain.gain.value = NativeScreenAudio.BOOST;
+    this.limiter = this.ctx.createDynamicsCompressor();
+    this.limiter.threshold.value = -6;
+    this.limiter.knee.value = 0;
+    this.limiter.ratio.value = 20;
+    this.limiter.attack.value = 0.003;
+    this.limiter.release.value = 0.1;
+    this.gain.connect(this.limiter);
+    this.limiter.connect(this.destination);
+
+    this.nextStartTime = 0;
+
+    this.unsubscribe = window.backspace.onNativeAudioData((data, meta) => {
+      this.enqueue(data, meta);
+    });
+
+    const mediaTrack = this.destination.stream.getAudioTracks()[0];
+    if (!mediaTrack) {
+      await this.stop();
+      return false;
+    }
+
+    this.track = new LocalAudioTrack(mediaTrack);
+    try {
+      await room.localParticipant.publishTrack(this.track, {
+        source: Track.Source.ScreenShareAudio,
+        // Defaults are tuned for speech: mono, low bitrate, and DTX on, which
+        // stops transmitting during silence. On game and music audio that
+        // reads as clipped and thin.
+        audioPreset: AudioPresets.musicHighQualityStereo,
+        forceStereo: true,
+        dtx: false,
+        red: false,
+      });
+      return true;
+    } catch (err) {
+      console.error('[NativeScreenAudio] publish failed', err);
+      await this.stop();
+      return false;
+    }
+  }
+
+  private enqueue(data: ArrayBuffer, meta: { sampleRate: number; channels: number; isFloat: boolean; bitsPerSample: number }): void {
+    const ctx = this.ctx;
+    const destination = this.destination;
+    if (!ctx || !destination) return;
+
+    // Only float32 is handled: it is what every supported platform reports.
+    // Anything else is dropped rather than played as noise.
+    if (!meta.isFloat || meta.bitsPerSample !== 32) return;
+
+    const samples = new Float32Array(data);
+    const channels = Math.max(1, meta.channels);
+    const frames = Math.floor(samples.length / channels);
+    if (frames === 0) return;
+
+    const buffer = ctx.createBuffer(channels, frames, meta.sampleRate);
+    for (let channel = 0; channel < channels; channel++) {
+      const channelData = buffer.getChannelData(channel);
+      // Interleaved in, planar out. The bounds are computed from the buffer's
+      // own length, but the index signature is still optional under
+      // noUncheckedIndexedAccess — a truncated final chunk reads as silence
+      // rather than NaN, which would click.
+      for (let frame = 0; frame < frames; frame++) {
+        channelData[frame] = samples[frame * channels + channel] ?? 0;
+      }
+    }
+
+    const source = ctx.createBufferSource();
+    source.buffer = buffer;
+    source.connect(this.gain ?? destination);
+
+    const now = ctx.currentTime;
+    if (this.nextStartTime < now || this.nextStartTime > now + NativeScreenAudio.MAX_DRIFT_S) {
+      this.nextStartTime = now + NativeScreenAudio.BUFFER_AHEAD_S;
+    }
+    source.start(this.nextStartTime);
+    this.nextStartTime += buffer.duration;
+  }
+
+  async stop(): Promise<void> {
+    this.unsubscribe?.();
+    this.unsubscribe = null;
+    window.backspace?.stopNativeAudio?.();
+
+    if (this.track) {
+      try {
+        this.track.stop();
+      } catch { /* already gone */ }
+      this.track = null;
+    }
+    this.gain = null;
+    this.limiter = null;
+    this.destination = null;
+    if (this.ctx) {
+      try {
+        await this.ctx.close();
+      } catch { /* already closed */ }
+      this.ctx = null;
+    }
+    this.nextStartTime = 0;
+  }
+}
+
+export const nativeScreenAudio = new NativeScreenAudio();

packages/web/src/utils/screenShare.ts

@@ -1,5 +1,7 @@
 import { Room, Track, BackupCodecPolicy } from 'livekit-client';
 import { useVoiceStore } from '../stores/voiceStore';
+import { nativeScreenAudio } from './nativeScreenAudio';
+import { isElectron } from '../platform/platform';
 import type { ScreenShareConfig } from '../stores/voiceStore';
 import { getStreamingLimits } from '../stores/settingsStore';
 import { getPublisherPC, getMediaStreamTrack } from './livekitInternals';
@@ -253,7 +255,10 @@ export async function startScreenShare(room: Room): Promise<boolean> {
   try {
     // For native mode: omit resolution constraint to capture at display's full native resolution
     const captureOptions: any = {
-      audio: config.shareAudio ? {
+      // In the desktop app audio never comes through this stream: Electron
+      // ignores these constraints and its loopback would carry our own output
+      // back into the share. The native capture below supplies it instead.
+      audio: config.shareAudio && !isElectron() ? {
         // Chrome 141+: exclude this tab's own audio from system audio capture
         // @ts-ignore — restrictOwnAudio is not yet in all TS type definitions
         restrictOwnAudio: true,
@@ -287,6 +292,14 @@ export async function startScreenShare(room: Room): Promise<boolean> {
       return false;
     }
 
+    // Desktop only, and only after the video track exists: publishing the audio
+    // first would briefly show a share with sound and no picture. A failure
+    // here leaves the share running silently rather than tearing it down.
+    if (isElectron() && config.shareAudio) {
+      const ok = await nativeScreenAudio.start(room);
+      if (!ok) console.warn('[SS] native system audio unavailable — sharing without sound');
+    }
+
     // Set content hint from builder (motion for gaming, detail for text)
     const screenPub = room.localParticipant.getTrackPublications()
       .find(p => p.source === Track.Source.ScreenShare);
@@ -416,6 +429,9 @@ function scheduleEncoderDetection(room: Room): void {
 // ---------------------------------------------------------------------------
 
 export async function stopScreenShare(room: Room): Promise<void> {
+  // Stopped first: leaving the native capture running would keep reading system
+  // audio after the share is gone.
+  await nativeScreenAudio.stop();
   try {
     await room.localParticipant.setScreenShareEnabled(false);
   } catch (err) {

packages/web/src/utils/serverTime.ts

@@ -0,0 +1,19 @@
+/**
+ * Offset between this machine's clock and the server's, in milliseconds.
+ *
+ * Activity timestamps (a Spotify track's start and end, for instance) are
+ * computed on the server and rendered here. A machine whose clock is a minute
+ * off would draw the progress bar a minute out of place — or past the end of
+ * the track — with nothing obviously wrong on screen.
+ */
+let offsetMs = 0;
+
+/** Called on every `ready`: the round trip is short enough to ignore. */
+export function setServerTime(serverTime: number): void {
+  offsetMs = Date.now() - serverTime;
+}
+
+/** `Date.now()` as the server would report it. */
+export function serverNow(): number {
+  return Date.now() - offsetMs;
+}

packages/web/src/utils/voice.ts

@@ -152,7 +152,15 @@ export function joinVoiceChannel(
     if (myOldId) removeVoiceUser(currentVoiceChannelId, myOldId);
   }
 
-  setCurrentVoiceChannel(channelId);
+  // Capture the space and name now: a voice channel can only be joined from
+  // within its own space, but the user may navigate away afterwards — at which
+  // point spaceStore.channels no longer resolves this channel.
+  const spaceStore = useSpaceStore.getState();
+  setCurrentVoiceChannel(
+    channelId,
+    spaceStore.currentSpaceId ?? null,
+    spaceStore.channels.find((c) => c.id === channelId)?.name ?? null,
+  );
   // Optimistic: immediately show self in new channel (using origin-aware ID)
   const myNewId = getMyUserIdForOrigin(getChannelOrigin(channelId));
   if (myNewId) addVoiceUser(channelId, myNewId);

packages/web/src/utils/voiceStateSync.ts

@@ -9,6 +9,7 @@ import { useVoiceStore } from '../stores/voiceStore';
 export interface SpaceVoiceStateSnapshot {
   spaceId: string;
   voiceStates: Record<string, string[]>;
+  voiceRoomStarts?: Record<string, number>;
   voiceUserStates: Record<string, { isMuted: boolean; isDeafened: boolean; isCameraOn: boolean; isScreenSharing: boolean }>;
   spaceVoiceStates: Record<string, { spaceMuted: boolean; spaceDeafened: boolean; permissionMuted: boolean }>;
 }
@@ -33,6 +34,12 @@ export function applySpaceVoiceState(snapshot: SpaceVoiceStateSnapshot): void {
   for (const [channelId, userIds] of Object.entries(snapshot.voiceStates)) {
     setVoiceUsers(channelId, userIds);
   }
+  if (snapshot.voiceRoomStarts) {
+    const { setVoiceRoomStart } = useVoiceStore.getState();
+    for (const [channelId, startedAt] of Object.entries(snapshot.voiceRoomStarts)) {
+      setVoiceRoomStart(channelId, startedAt);
+    }
+  }
   for (const [userId, status] of Object.entries(snapshot.voiceUserStates)) {
     setVoiceUserStatus(userId, status.isMuted, status.isDeafened, status.isCameraOn, status.isScreenSharing);
   }

pnpm-lock.yaml

@@ -25,6 +25,9 @@ importers:
 
   packages/desktop:
     dependencies:
+      electron-native-screenshare:
+        specifier: ^1.2.0
+        version: 1.2.0
       electron-updater:
         specifier: ^6.3.0
         version: 6.8.3
@@ -876,11 +879,11 @@ packages:
 
   '@esbuild-kit/core-utils@3.3.2':
     resolution: {integrity: sha512-sPRAnw9CdSsRmEtnsl2WXWdyquogVpB3yZ3dgwJfe8zrOzTsV7cJvmwrKVa+0ma5BoiGJ+BoqkMvawbayKUsqQ==}
-    deprecated: 'Merged into tsx: https://tsx.is'
+    deprecated: 'Merged into tsx: https://tsx.hirok.io'
 
   '@esbuild-kit/esm-loader@2.6.5':
     resolution: {integrity: sha512-FxEMIkJKnodyA1OaCUoEvbYRkoZlLZ4d/eXFu9Fh8CbBBgP5EmZxrfTRyN0qpXZ4vOvqnE5YdRdcrmUUXuU+dA==}
-    deprecated: 'Merged into tsx: https://tsx.is'
+    deprecated: 'Merged into tsx: https://tsx.hirok.io'
 
   '@esbuild/aix-ppc64@0.19.12':
     resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
@@ -2119,6 +2122,7 @@ packages:
 
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+    deprecated: Potential CWE-502 - Update to 1.3.1 or higher
 
   '@vitejs/plugin-react@4.7.0':
     resolution: {integrity: sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==}
@@ -2158,6 +2162,7 @@ packages:
   '@xmldom/xmldom@0.8.11':
     resolution: {integrity: sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==}
     engines: {node: '>=10.0.0'}
+    deprecated: this version has critical issues, please update to the latest version
 
   abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
@@ -2953,6 +2958,11 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  electron-native-screenshare@1.2.0:
+    resolution: {integrity: sha512-O7m+/AeE0UWFq8Z18THGSrPHRIxYiYtjdMKtVhGcNRE/sUN6Fj9EgXDOmmJnORCh303NWaNgmAnNz+JbeLa48Q==}
+    engines: {node: '>=18.0.0'}
+    os: [win32, linux, darwin]
+
   electron-publish@25.1.7:
     resolution: {integrity: sha512-+jbTkR9m39eDBMP4gfbqglDd6UvBC7RLh5Y0MhFSsc6UkGHj9Vj9TWobxevHYMMqmoujL11ZLjfPpMX+Pt6YEg==}
 
@@ -4184,6 +4194,9 @@ packages:
   node-addon-api@1.7.2:
     resolution: {integrity: sha512-ibPK3iA+vaY1eEjESkQkM0BbCqFOaZMiXRTtdB0u7b4djtY6JnsjvPdUHVMg6xQt3B8fpTTWHI9A+ADjM9frzg==}
 
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+
   node-api-version@0.2.1:
     resolution: {integrity: sha512-2xP/IGGMmmSQpI1+O/k72jF/ykvZ89JeuKX3TLJAYPDVLUalrshrLHkeVcCCZqG/eEa635cr8IBYzgnDvM2O8Q==}
 
@@ -8257,6 +8270,10 @@ snapshots:
       - electron-builder-squirrel-windows
       - supports-color
 
+  electron-native-screenshare@1.2.0:
+    dependencies:
+      node-addon-api: 7.1.1
+
   electron-publish@25.1.7:
     dependencies:
       '@types/fs-extra': 9.0.13
@@ -9929,6 +9946,8 @@ snapshots:
   node-addon-api@1.7.2:
     optional: true
 
+  node-addon-api@7.1.1: {}
+
   node-api-version@0.2.1:
     dependencies:
       semver: 7.7.4

tools/sfx/README.md

@@ -0,0 +1,32 @@
+# Geradores dos efeitos sonoros
+
+Os `.ogg` em `packages/web/public/sounds/` para call e transmissão são
+sintetizados por estes scripts — nenhum arquivo de terceiros, nenhuma questão
+de licença num repositório público.
+
+Os parâmetros não foram escolhidos a gosto: saíram da **medição** de dois sons
+de referência fornecidos pelo dono da instância (análise de envelope, picos
+espectrais e tempo de decaimento). O timbre resultante é fundamental + oitava
+quase na mesma intensidade, com pouco acima disso:
+
+| Harmônico | Proporção medida |
+|---|---|
+| 1x (fundamental) | 1.00 |
+| 2x (oitava)      | 0.85 |
+| 3x               | 0.10 |
+| 4x               | 0.02 |
+
+Decaimento a 1/e: ~0,19 s. Sem reverberação.
+
+| Script | Gera | Notas |
+|---|---|---|
+| `build.py`    | `user_join`, `user_leave` | C4→G4 subindo / D4→G3 descendo |
+| `stream.py`   | `stream_user_joined`, `stream_user_left` | nota única (G4 / G3), ~55% do volume |
+| `started4.py` | `stream_started` | acorde de dó + golpe grave + sopro de ar |
+| `ended.py`    | `stream_ended` | arpejo descendo, resolve na raiz grave |
+
+Para regerar: `python3 <script>.py` produz `.wav`, depois converter com
+`ffmpeg -i X.wav -c:a libvorbis -q:a 5 -ar 48000 X.ogg`.
+
+Ajustes comuns: `HARM` muda o timbre, `tau` a duração, `step` a velocidade do
+arpejo, e o alvo em `write()` o volume (pico RMS).

tools/sfx/build.py

@@ -0,0 +1,47 @@
+import math, wave, struct
+SR=48000
+# Proporcoes medidas nas referencias: fundamental, oitava, 3o, 4o
+HARM=(1.00, 0.85, 0.10, 0.02)
+TAU=0.19          # decaimento a 1/e medido
+ATTACK=0.004
+
+def note(f, dur):
+    n=int(SR*dur); o=[]
+    for i in range(n):
+        t=i/SR
+        s=sum(a*math.sin(2*math.pi*f*(k+1)*t) for k,a in enumerate(HARM))
+        o.append(s*min(1.0,t/ATTACK)*math.exp(-t/TAU))
+    return o
+
+def mix(layers,total):
+    b=[0.0]*total
+    for off,s in layers:
+        for i,v in enumerate(s):
+            if off+i<total: b[off+i]+=v
+    return b
+
+def peak_rms(x, win=int(SR*0.01)):
+    best=0.0
+    for i in range(0,len(x)-win,win):
+        seg=x[i:i+win]
+        best=max(best, math.sqrt(sum(v*v for v in seg)/len(seg)))
+    return best
+
+def write(name, buf, target_rms):
+    cur=peak_rms(buf)
+    g=target_rms/max(1e-9,cur)
+    # nao deixa estourar mesmo casando o volume da referencia
+    pk=max(abs(s*g) for s in buf)
+    if pk>0.97: g*=0.97/pk
+    with wave.open(name,'w') as w:
+        w.setnchannels(1); w.setsampwidth(2); w.setframerate(SR)
+        w.writeframes(b''.join(struct.pack('<h',int(max(-1,min(1,s*g))*32767)) for s in buf))
+    print(f"{name}: pico RMS {peak_rms([s*g for s in buf]):.3f}, {len(buf)/SR:.2f}s")
+
+C4,D4,G3,G4 = 261.63, 293.66, 196.00, 392.00
+GAP=int(SR*0.10)   # 100ms entre as notas, medido
+
+# join: quinta subindo — mesmas notas da referencia
+write('user_join.wav',  mix([(0,note(C4,0.55)),(GAP,note(G4,0.55))], int(SR*0.62)), 0.365)
+# leave: quinta descendo
+write('user_leave.wav', mix([(0,note(D4,0.55)),(GAP,note(G3,0.55))], int(SR*0.62)), 0.440)

tools/sfx/ended.py

@@ -0,0 +1,53 @@
+import math, wave, struct
+SR=48000
+HARM=(1.00, 0.85, 0.10, 0.02)
+
+def note(f, dur, tau, amp=1.0):
+    n=int(SR*dur); o=[]
+    for i in range(n):
+        t=i/SR
+        s=sum(a*math.sin(2*math.pi*f*(k+1)*t) for k,a in enumerate(HARM))
+        o.append(s*amp*min(1.0,t/0.004)*math.exp(-t/tau))
+    return o
+
+def thump(f, dur, amp):
+    n=int(SR*dur); o=[]; ph=0.0
+    for i in range(n):
+        t=i/SR
+        ph += 2*math.pi*(f*(1+1.2*math.exp(-t/0.02)))/SR
+        o.append(math.sin(ph)*amp*math.exp(-t/(dur*0.30)))
+    return o
+
+def mix(layers,total):
+    b=[0.0]*total
+    for off,s in layers:
+        for i,v in enumerate(s):
+            if off+i<total: b[off+i]+=v
+    return b
+
+def peak_rms(x, win=int(SR*0.01)):
+    return max(math.sqrt(sum(v*v for v in x[i:i+win])/win) for i in range(0,len(x)-win,win))
+
+def write(name, buf, target):
+    g=target/max(1e-9,peak_rms(buf))
+    pk=max(abs(s*g) for s in buf)
+    if pk>0.97: g*=0.97/pk
+    with wave.open(name,'w') as w:
+        w.setnchannels(1); w.setsampwidth(2); w.setframerate(SR)
+        w.writeframes(b''.join(struct.pack('<h',int(max(-1,min(1,s*g))*32767)) for s in buf))
+    print(f"{name}: pico RMS {peak_rms([s*g for s in buf]):.3f}, {len(buf)/SR:.2f}s")
+
+C3,C4,E4,G4,C5 = 130.81,261.63,329.63,392.00,523.25
+step=int(SR*0.033)
+
+# Espelho do inicio: o arpejo DESCE e resolve na raiz grave, que entra por
+# ultimo. Sem o sopro de ar — brilho sugere chegada, nao encerramento.
+# Mais curto e mais baixo: encerrar merece menos destaque que comecar.
+write('stream_ended.wav', mix([
+    (0,      note(C5, 0.42, 0.15, 0.70)),
+    (step,   note(G4, 0.44, 0.16)),
+    (2*step, note(E4, 0.46, 0.17)),
+    (3*step, note(C4, 0.48, 0.19)),
+    (3*step, note(C3, 0.50, 0.21, 0.80)),
+    (3*step, thump(85, 0.13, 0.40)),
+], int(SR*0.55)), 0.34)

tools/sfx/started4.py

@@ -0,0 +1,65 @@
+import math, random, wave, struct
+SR=48000; random.seed(11)
+HARM=(1.00, 0.85, 0.10, 0.02)
+
+def note(f, dur, tau, amp=1.0):
+    n=int(SR*dur); o=[]
+    for i in range(n):
+        t=i/SR
+        s=sum(a*math.sin(2*math.pi*f*(k+1)*t) for k,a in enumerate(HARM))
+        o.append(s*amp*min(1.0,t/0.004)*math.exp(-t/tau))
+    return o
+
+def thump(f, dur, amp):
+    """Instrumento 2: golpe grave com queda de tom. Da impacto no ataque e
+    morre em 90ms — engorda sem alongar."""
+    n=int(SR*dur); o=[]; ph=0.0
+    for i in range(n):
+        t=i/SR
+        ph += 2*math.pi*(f*(1+1.2*math.exp(-t/0.02)))/SR
+        o.append(math.sin(ph)*amp*math.exp(-t/(dur*0.30)))
+    return o
+
+def air(dur, amp, cutoff=5000):
+    """Instrumento 3: sopro curto de ruido filtrado. Brilho no inicio, sem cauda."""
+    n=int(SR*dur)
+    y=0.0; a=1-math.exp(-2*math.pi*cutoff/SR); o=[]
+    for i in range(n):
+        t=i/SR
+        y += a*(random.uniform(-1,1)-y)
+        o.append(y*amp*min(1.0,t/0.008)*math.exp(-t/(dur*0.22)))
+    return o
+
+def mix(layers,total):
+    b=[0.0]*total
+    for off,s in layers:
+        for i,v in enumerate(s):
+            if off+i<total: b[off+i]+=v
+    return b
+
+def peak_rms(x, win=int(SR*0.01)):
+    return max(math.sqrt(sum(v*v for v in x[i:i+win])/win) for i in range(0,len(x)-win,win))
+
+def write(name, buf, target):
+    g=target/max(1e-9,peak_rms(buf))
+    pk=max(abs(s*g) for s in buf)
+    if pk>0.97: g*=0.97/pk
+    with wave.open(name,'w') as w:
+        w.setnchannels(1); w.setsampwidth(2); w.setframerate(SR)
+        w.writeframes(b''.join(struct.pack('<h',int(max(-1,min(1,s*g))*32767)) for s in buf))
+    print(f"{name}: pico RMS {peak_rms([s*g for s in buf]):.3f}, {len(buf)/SR:.2f}s")
+
+C3,G3,C4,E4,G4,C5 = 130.81,196.00,261.63,329.63,392.00,523.25
+step=int(SR*0.033)   # arpejo bem rapido: acorde montado em 100ms
+
+# Decaimentos ~metade dos anteriores (0.20 vs 0.38). Total 0.62s vs 1.08s.
+write('stream_started.wav', mix([
+    (0,      thump(85, 0.14, 0.55)),        # impacto
+    (0,      air(0.13, 0.16)),              # brilho
+    (0,      note(C3, 0.60, 0.22, 0.80)),
+    (0,      note(G3, 0.58, 0.20, 0.45)),
+    (0,      note(C4, 0.56, 0.20)),
+    (step,   note(E4, 0.54, 0.19)),
+    (2*step, note(G4, 0.52, 0.18)),
+    (3*step, note(C5, 0.50, 0.16, 0.70)),
+], int(SR*0.62)), 0.42)

tools/sfx/stream.py

@@ -0,0 +1,31 @@
+import math, wave, struct
+SR=48000
+HARM=(1.00, 0.85, 0.10, 0.02)   # mesmo timbre medido nas referencias
+ATTACK=0.004
+
+def note(f, dur, tau):
+    n=int(SR*dur); o=[]
+    for i in range(n):
+        t=i/SR
+        s=sum(a*math.sin(2*math.pi*f*(k+1)*t) for k,a in enumerate(HARM))
+        o.append(s*min(1.0,t/ATTACK)*math.exp(-t/tau))
+    return o
+
+def peak_rms(x, win=int(SR*0.01)):
+    return max(math.sqrt(sum(v*v for v in x[i:i+win])/win)
+               for i in range(0,len(x)-win,win))
+
+def write(name, buf, target):
+    g=target/max(1e-9,peak_rms(buf))
+    pk=max(abs(s*g) for s in buf)
+    if pk>0.97: g*=0.97/pk
+    with wave.open(name,'w') as w:
+        w.setnchannels(1); w.setsampwidth(2); w.setframerate(SR)
+        w.writeframes(b''.join(struct.pack('<h',int(max(-1,min(1,s*g))*32767)) for s in buf))
+    print(f"{name}: pico RMS {peak_rms([s*g for s in buf]):.3f}, {len(buf)/SR:.2f}s")
+
+G3, G4 = 196.00, 392.00
+# Decaimento mais curto (0.13 vs 0.19) e volume ~55% do som de call:
+# entrar/sair da tela dispara muitas vezes durante uma transmissao.
+write('stream_user_joined.wav', note(G4, 0.42, 0.13), 0.20)
+write('stream_user_left.wav',   note(G3, 0.42, 0.13), 0.20)