wesley dashboard builder

Skill de création de dashboards live, sites web complets, et pages de preuve sociale pour Wesley-Agent. Déclencher dès que Georges mentionne : dashboard, sit...

Security Scan

The skill's declared needs (Telegram token + chat ID) match its described features, but the runtime instructions embed high-privilege operations (scp/ssh to a hard-coded VPS, docker exec, editing docker-compose, cloudflared tunnel setup) and hard-coded host/container paths that don't obviously belong inside a general-purpose 'dashboard builder' skill — review and verify ownership of the remote host and any commands before using.

Purpose & Capability

Requesting TELEGRAM_BOT_TOKEN and TELEGRAM_CHAT_ID is coherent with the skill's photo-upload and Telegram integration. However, the documentation also repeatedly references a specific VPS IP, container name, and workspace paths (72.62.30.28, openclaw-yyvg-...), which is unexpected for a generic dashboard-builder skill and suggests either embedded vendor-specific deployment steps or possibly instructions targeted at a particular remote environment.

Instruction Scope

SKILL.md includes operational commands that modify remote infrastructure: scp/ssh to root@72.62.30.28, docker cp/exec, editing docker-compose.yml, creating cloudflared tunnels and writing credentials under /root/.cloudflared, and adding systemd/autostart scripts. Those instructions go well beyond generating HTML/CSS/JS and require high privileges on a host; they could be dangerous if you do not control the referenced VPS. The skill also instructs enabling permissive CORS (CORS(app, origins=['*'])) and installing packages with --break-system-packages — both high-impact ops that should be reviewed.

Install Mechanism

No install spec and no code files are present — the skill is instruction-only, which minimizes direct supply-chain risk (nothing is auto-downloaded or written by an installer). The security surface is therefore the instructions themselves rather than any bundled executable code.

Credentials

The only required environment variables are TELEGRAM_BOT_TOKEN (primary) and TELEGRAM_CHAT_ID, which are proportionate to the stated Telegram upload/display functionality. Reminder: Telegram bot tokens grant broad control over the bot and should be treated as sensitive secrets; the skill's docs also suggest using that token to upload/receive media and to share links, which is consistent but sensitive.

Persistence & Privilege

While the skill itself is not marked always:true, its instructions explicitly direct creation of persistent services (auto-start scripts, docker-compose changes, cloudflared tunnels, and permanent credentials files under /root). That operational guidance asks the user to create persistent privileges on the target host and expose local services to the public internet — actions that carry significant security and persistence implications if performed against a host you do not own or fully control.

What to consider before installing

Do not blindly run the shell/ssh/docker/cloudflared commands in the docs. Before installing or following these steps: 1) Confirm you (or your organization) own and control the VPS IP, container name, and workspace paths referenced (72.62.30.28, openclaw-yyvg-...). 2) If you do not control that host, do not scp/ssh or apply the docker-compose/systemd changes — they would deploy code to a third-party machine. 3) Treat TELEGRAM_BOT_TOKEN as a secret: use a bot with minimal scope, rotate the token if it was exposed, and avoid sending tokens to remote machines whose ownership is unclear. 4) Review any suggested CORS and pip install commands (they can open services to the web or modify container internals); prefer limiting CORS origins and use vetted package installs. 5) If you want only local dashboard generation, ignore the hard-coded deployment steps and host the generated files on infrastructure you control (local machine, your VPS, or a trusted cloud bucket). If you need a final judgment about safety for your environment, provide whether you control the referenced VPS and whether you intend the agent to run commands on your host.

Skill de création de dashboards et sites web complets pour Wesley-Agent. Produit des fichiers HTML/CSS/JS prêts à déployer sur le VPS via tunnel Cloudflare.

Philosophie

Chaque dashboard = un produit marketing.

• Home/Proof → preuve sociale → convertit en VIP
• Trading → crédibilité trader sérieux
• Signaux → valeur visible → justifie le prix
• Journal → engagement → fidélise

Lire les références dans l'ordre selon le besoin :

• Architecture et API → references/api-architecture.md
• Design et CSS → references/design-system.md
• Médias (images/vidéos) → references/media-integration.md
• Déploiement VPS → references/deployment.md

---

Structure standard d'un projet dashboard

workspace/projects/MON-DASHBOARD/
├── index.html          ← écran 1 (Home / Proof)
├── trading.html        ← écran 2 (Performance & trades)
├── signals.html        ← écran 3 (Feed signaux live + CTA VIP)
├── journal.html        ← écran 4 (Photos / Timeline / Milestones)
├── assets/
│   ├── logo.png
│   └── og-image.png    ← pour partage réseaux sociaux
└── api_server.py       ← si dashboard_api.py pas encore lancé

---

Workflow de création

Étape 1 — Déterminer le type de dashboard

Type demandé	Fichiers à créer	Référence
Dashboard complet (4 écrans)	index + trading + signals + journal	Tout
Landing page / site vitrine	index.html uniquement	design-system.md
Page signaux publique	signals.html	api-architecture.md
Galerie preuve sociale	journal.html	media-integration.md
Dashboard embarqué (iframe)	Composant autonome	design-system.md

Étape 2 — Lire la référence design

→ references/design-system.md : variables CSS, typographie, composants, animations

Étape 3 — Générer les fichiers HTML

Chaque fichier HTML = autonome (CSS + JS inline, zéro dépendance locale). Imports autorisés via CDN seulement :

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">

Étape 4 — Connecter l'API

→ references/api-architecture.md : endpoints disponibles, fallback demo data

Étape 5 — Intégrer médias

→ references/media-integration.md : images, vidéos, upload Telegram, OG tags

Étape 6 — Déployer

→ references/deployment.md : copier sur VPS, lancer API, configurer tunnel

---

Écrans standard — description rapide

Écran 1 — Home / Proof (index.html)

• Portfolio value live avec animation compteur
• P&L du jour en vert/rouge
• Statut agents (dots qui pulsent)
• Dernier signal posté
• Barre de progression vers objectif mensuel
• Uptime système
• Bouton screenshot pour partage Instagram/X

Écran 2 — Trading (trading.html)

• Courbe equity (Chart.js, 7j/30j/all)
• Win rate en anneau (donut chart)
• Positions ouvertes : marché + odds + edge %
• Derniers trades : ✅ win / ❌ loss
• Métriques : Sharpe, drawdown, avg hold

Écran 3 — Signaux (signals.html)

• Feed des derniers signaux (style Twitter)
• Score EDGE / Confiance / Marché / Heure
• Badge FREE vs 🔒 VIP
• CTA sticky en bas : "Rejoindre le canal VIP →"
• Auto-refresh toutes les 30s

Écran 4 — Journal / Proof (journal.html)

• Upload photos depuis téléphone (drag & drop ou bouton)
• Galerie timeline : date + caption
• Milestones : "Semaine 1 : +$22 → Objectif : +$200"
• Lightbox pour voir les photos en grand
• Photos reçues via Telegram → affichées automatiquement

---

Règles de génération de code

1. Tout inline — CSS dans <style>, JS dans <script>, jamais de fichiers séparés
2. Mobile-first — grid responsive, font-size fluide, touch-friendly
3. Fallback demo data — si API offline, données demo réalistes s'affichent
4. Navigation — barre bottom mobile (4 icônes) + sidebar desktop
5. Dark theme obligatoire — fond #020608 ou similaire (voir design-system.md)
6. Pas de framework — HTML/CSS/JS vanilla uniquement (sauf Chart.js CDN)
7. Meta OG — chaque page a ses balises pour le partage
8. CTA VIP — toujours présent sur signals.html et index.html

---

Checklist avant livraison

• Fichiers autonomes (zéro dépendance locale)
• Test sur mobile (viewport 375px)
• Fallback demo data fonctionnel
• Navigation entre écrans opérationnelle
• API fetch avec timeout et error handling
• Upload photo fonctionne (FileReader API)
• Meta tags OG pour partage
• CTA VIP visible sur mobile
• Instructions déploiement fournies

---

Commandes de déploiement rapide

# Copier les fichiers sur le VPS
scp -r ./MON-DASHBOARD/ root@72.62.30.28:/docker/openclaw-yyvg/data/.openclaw/workspace/projects/

# Lancer l'API Wesley sur port 8766
docker exec -d openclaw-yyvg-openclaw-1 python3 /data/.openclaw/workspace/api/dashboard_api.py --port 8766

# Vérifier que ça tourne
curl http://72.62.30.28:8766/health

# Ouvrir le dashboard (tunnel Cloudflare doit être actif)
# URL : https://truth-demonstrate-restore-calgary.trycloudflare.com