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/MessageAttachments.vue

@@ -0,0 +1,80 @@
+<!-- Renders a message's attachments: image previews inline, everything else as a download link -->
+<template>
+  <div class="attachments">
+    <template v-for="a in attachments" :key="a.id">
+      <a
+        v-if="isImage(a)"
+        class="att-image"
+        :href="urlFor(a.id)"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img :src="urlFor(a.id)" :alt="a.filename" loading="lazy" />
+      </a>
+      <a
+        v-else
+        class="att-file"
+        :href="urlFor(a.id)"
+        target="_blank"
+        rel="noopener noreferrer"
+        :download="a.filename"
+      >
+        <span class="att-icon">{{ isExe(a) ? '⚠️' : '📎' }}</span>
+        <span class="att-name">{{ a.filename }}</span>
+        <span class="att-size">{{ kb(a.size) }}</span>
+        <span v-if="isExe(a)" class="att-warn">exécutable</span>
+      </a>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Attachment } from '@/composables/useMessages';
+import { useAttachments } from '@/composables/useAttachments';
+
+defineProps<{ attachments: Attachment[] }>();
+
+const { kb, urlFor } = useAttachments();
+
+function isImage(a: Attachment): boolean {
+  return a.mimeType.startsWith('image/');
+}
+function isExe(a: Attachment): boolean {
+  return /\.(exe|bat|cmd|msi|sh|app)$/i.test(a.filename) || a.mimeType === 'application/x-msdownload';
+}
+</script>
+
+<style scoped>
+.attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 6px 25px 0;
+}
+.att-image img {
+  max-width: 220px;
+  max-height: 160px;
+  border-radius: 8px;
+  border: 1px solid #222234;
+  display: block;
+}
+.att-file {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: #141420;
+  border: 1px solid #222234;
+  border-radius: 10px;
+  padding: 7px 12px;
+  text-decoration: none;
+  font-family: Arial, sans-serif;
+}
+.att-file:hover { background: #1c1c2e; }
+.att-icon { font-size: 14px; }
+.att-name { font-size: 12px; color: #aaccdd; }
+.att-size { font-size: 10px; color: #555577; }
+.att-warn {
+  font-size: 8px; font-weight: bold; color: #ff5544;
+  background: #2a0a08; border: 1px solid #662211; border-radius: 4px; padding: 1px 5px;
+}
+</style>