feat: marketplace, économie à crédits, perks temps réel & pubs réelles

Transforme XIP en réseau social satirique complet : monnaie fictive,
marketplace, cosmétiques visibles de tous, messages riches sandboxés,
pubs pilotées par les données, et tous les compteurs mock rendus réels.

Backend (Bun + Hono + Prisma + Redis)
- Économie par IP : modèles Wallet/Purchase/Entitlement, lib/wallet.ts
  avec spend() atomique (point unique du paywall) + recharge gratuite.
- isLocalhost() → mode gratuit (README « si localhost: pas de paywall »).
- Marketplace : lib/catalog.ts (achat transactionnel, stock limité,
  limites par IP) + routes/shop.ts ; 10 produits seedés (idempotent).
- Perks : lib/perks.ts (cache Redis busté à l'achat) ; authorPerks
  injecté dans les payloads messages + endpoint batch /api/perks ;
  frame WS « perks » global pour MAJ live des messages déjà affichés.
- Messages riches : Message.richMode/richContent, gating par entitlement.
- Pubs réelles : modèle Ad seedé avec les 4 pubs (ex-hardcodées),
  rotation par API, comptage d'impressions réel + réconciliation.
- WebSocket : IP capturée par connexion → broadcastToIp / broadcast ;
  frames wallet/perks/ads/alert.
- Pièces jointes : lib/storage.ts (UUID, jamais exécuté) + routes/uploads.ts
  (limite 1 Mo sauf déblocage/localhost, Content-Disposition: attachment).
- Alerte audio : routes/alert.ts (cooldown serveur Redis NX, clamp durée).
- Compteur « argent extorqué » réel : impressions×CPM + crédits dépensés.

Frontend (Vue 3 + Vite)
- /shop : ShopPage + ProductCard fidèles aux maquettes ; composables
  useWallet/useShop/usePerks/useAds/useAttachments/useAlert.
- UI de réponse (bannière + sous-threads), solde + lien Shop dans le header.
- Perks rendus : Style Doré (or), Pets autour de l'IP, NoAds masque les pubs.
- RichContent.vue : iframe sandbox verrouillée (htmlcss sans script ;
  js allow-scripts seul, jamais allow-same-origin) + CSP.
- AdBand/InlineCasinoAd pilotés par l'API ; barre de saisie avec 📎,
  compteur de caractères, composer riche et bouton alerte.

Infra
- Migration economy_ads_attachments_rich ; seed idempotent (produits+pubs).
- vite.config : usePolling (HMR fiable sur /mnt/c via WSL).
- backend/.gitignore : uploads/.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/components/ChatHeader.vue

@@ -7,12 +7,26 @@
       <span class="online-dot" aria-hidden="true" />
       <span class="online-count">{{ connectedCount }} connectés</span>
     </div>
-    <div class="channel-badge"># général</div>
+
+    <div class="header-right">
+      <span v-if="ip" class="me-ip" :title="'Ton pseudo = ton IP'">{{ ip }}</span>
+      <span class="balance" :class="{ 'balance--free': freeMode }" title="Tes crédits XIP">
+        <span class="balance-coin">◈</span>
+        <span class="balance-val">{{ displayBalance() }}</span>
+        <span class="balance-unit">cr</span>
+      </span>
+      <router-link to="/shop" class="shop-link">🛒 Shop</router-link>
+      <span class="channel-badge"># général</span>
+    </div>
   </header>
 </template>
 
 <script setup lang="ts">
+import { useWallet } from '@/composables/useWallet';
+
 defineProps<{ connectedCount: number }>();
+
+const { ip, freeMode, displayBalance } = useWallet();
 </script>
 
 <style scoped>
@@ -33,6 +47,12 @@ defineProps<{ connectedCount: number }>();
   gap: 8px;
 }
 
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
 .xip-title {
   font-family: Arial, sans-serif;
   font-size: 18px;
@@ -62,6 +82,44 @@ defineProps<{ connectedCount: number }>();
   color: #33ff66;
 }
 
+.me-ip {
+  font-family: 'Courier New', monospace;
+  font-size: 11px;
+  color: #5566aa;
+}
+
+.balance {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  background: #131322;
+  border: 1px solid #2a2a44;
+  border-radius: 12px;
+  padding: 3px 10px;
+  font-family: 'Courier New', monospace;
+}
+.balance-coin { color: #ffcc44; font-size: 11px; }
+.balance-val { color: #ffdd66; font-size: 13px; font-weight: bold; text-shadow: 0 0 8px #ffaa0055; }
+.balance-unit { color: #886633; font-size: 9px; }
+.balance--free .balance-val { color: #33ff99; text-shadow: 0 0 8px #00ff6655; }
+.balance--free .balance-coin { color: #33ff99; }
+
+.shop-link {
+  font-family: Arial, sans-serif;
+  font-size: 12px;
+  font-weight: bold;
+  color: #00eeff;
+  text-decoration: none;
+  border: 1px solid #00eeff55;
+  border-radius: 12px;
+  padding: 4px 12px;
+  transition: background 0.15s, box-shadow 0.15s;
+}
+.shop-link:hover {
+  background: #00eeff14;
+  box-shadow: 0 0 10px #00ccff44;
+}
+
 .channel-badge {
   background: #131320;
   border: 1px solid #222233;