# FEEDBACK.md — PinchChat Feedback Queue

## Item #13
- **Date:** 2026-02-11
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-11 — commit `d118498`
- **Description:** GitHub Pages landing page — layout & design improvements
  - **Démo en hero** : La démo animée doit être EN HAUT de la page, dans le hero, bien en évidence. Pas en bas. C'est la première chose que les visiteurs doivent voir.
  - **Features layout** : Les feature cards en mosaïque/grid c'est trop classique. Trouver un layout plus original — par exemple : timeline verticale, sections alternées gauche/droite avec illustrations, ou scroll-based reveal. Pas de grid 3x3 basique.

## Item #14
- **Date:** 2026-02-11
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-11 — commit `84c8e24`
- **Description:** Progress bars plus sobres dans l'app
  - Les barres de tokens dans la sidebar et le header sont trop disparates : gradient cyan→violet, orange quand >80%, rouge quand >95%. C'est pas cohérent.
  - Adopter un style plus sobre et uniforme : une seule couleur douce (ex: un cyan/bleu soft), qui s'intensifie subtilement quand ça se remplit. Pas de changement de couleur radical.
  - Garder ça discret et élégant, pas flashy.

## Item #15
- **Date:** 2026-02-11
- **Priority:** medium
- **Status:** done
- **Completed:** 2026-02-11 — commit `72f7d76`
- **Description:** Ajouter des icônes/emojis sur les tool call badges dans l'app (comme sur la démo de la landing page)
  - Sur la landing page les badges tool calls ont des petits emojis (🔍 pour search, ⚡ pour exec, etc.) — c'est sympa et aide à identifier visuellement le type de tool
  - Reproduire ça dans la vraie app : ajouter une petite icône/emoji devant le nom du tool dans chaque badge
  - Exemples : 🔍 web_search, ⚡ exec, 📖 read, ✏️ write/edit, 🌐 browser, 🖼️ image, 🧠 memory, ⏰ cron, 🚀 sessions_spawn, etc.

## Item #12
- **Date:** 2026-02-11
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-11 — commit `d26c498`
- **Description:** Animated fake UI demo on the GitHub Pages landing page
  - Créer une version fake/simulée de l'interface PinchChat directement dans la landing page (docs/index.html)
  - L'animation doit montrer un dialogue réaliste entre un utilisateur et un assistant AI, avec :
    - Un message utilisateur qui s'affiche (typing effect)
    - L'assistant qui "réfléchit" (thinking indicator)
    - Des badges de tool calls colorés qui apparaissent (comme dans la vraie app : exec en amber, read en sky, web_search en emerald, etc.)
    - Les tool calls qui s'expandent pour montrer les paramètres/résultats
    - Le message final de l'assistant avec du markdown formaté
    - Une sidebar simplifiée avec quelques sessions fake et des barres de tokens
  - Le tout doit boucler ou rejouer après quelques secondes
  - Utiliser du CSS/JS pur (pas de React, c'est une page statique)
  - Reproduire le même style visuel que l'app (dark theme, mêmes couleurs, mêmes badges, mêmes fonts)
  - L'objectif c'est que les visiteurs voient immédiatement à quoi ressemble l'app sans avoir à l'installer
  - Mettre ça en haut de la landing page, au-dessus ou juste en dessous du hero

## Item #11
- **Date:** 2026-02-11
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-11 — commit `f556c8d`
- **Description:** Rewrite des features — README + GitHub Pages landing page
  - Les features actuelles sont mal vendues. Trop techniques, pas assez pragmatiques.
  - **Ce qu'il ne faut PAS vendre comme feature :**
    - "Dark neon theme" — on s'en fiche, c'est un choix esthétique pas une feature
    - "Runtime auth / token not in build" — c'est normal, pas un argument de vente
    - "Markdown rendering" — tous les chats font ça
    - "File upload" — basique
  - **Ce qu'il FAUT mettre en avant (la vraie valeur ajoutée vs l'UI native OpenClaw) :**
    - **Visualisation des tool calls** — comprendre ce que l'agent fait en temps réel avec des badges colorés, paramètres visibles, résultats expandables. C'est LA killer feature.
    - **Interface GPT-like** — sessions dans une sidebar, switch entre conversations, familier pour les utilisateurs de ChatGPT/Claude
    - **Focalisé sur le chat** — pas de menus settings/config partout, juste le chat, clean et efficace
    - **Token usage en temps réel** — barres de progression par session, savoir combien de contexte il reste
    - **Multi-session** — voir et naviguer entre toutes les sessions actives (crons, sub-agents, etc.)
    - **Streaming live** — voir l'agent réfléchir et écrire en temps réel
    - **Images inline** — voir les images générées/lues directement dans le chat
    - **i18n** — EN/FR switchable
  - Réécrire la section Features du README avec des descriptions courtes et percutantes
  - Réécrire les feature cards de la landing page (docs/index.html) de la même manière
  - Ordre : les features les plus différenciantes en premier
  - Ton : pragmatique, pas marketing bullshit

## Item #1
- **Date:** 2026-02-11
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-11 — commit `d58c34f`
- **Description:** Migrer le projet de "ClawChat" vers "PinchChat"

## Item #2
- **Date:** 2026-02-11
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-11 — commit `8834b2a`
- **Description:** Filtrer les messages "NO_REPLY"

## Item #3
- **Date:** 2026-02-11
- **Priority:** medium
- **Status:** done
- **Completed:** 2026-02-11 — commit `99b7db9`
- **Description:** i18n support

## Item #4
- **Date:** 2026-02-11
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-11 — commit `36f9480`
- **Description:** Runtime login screen

## Item #5
- **Date:** 2026-02-11
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-11 — commit `9b3aed4`
- **Description:** Language selector in header

## Item #6
- **Date:** 2026-02-11
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-11 — commit `5fd7300`
- **Description:** Installation simplifiée — Docker + oneliner
  - **Dockerfile** : image légère (nginx:alpine ou similar) qui sert le build statique. Multi-stage : node pour build, nginx pour serve. Pas de secrets dans l'image (tout est runtime via le login screen).
  - **docker-compose.yml** : exemple simple avec juste le container PinchChat
  - **Publier l'image sur ghcr.io** : `ghcr.io/marlburrow/pinchchat:latest` — le CI GitHub Actions doit build & push l'image à chaque push sur main
  - **Oneliner** : `docker run -p 3000:80 ghcr.io/marlburrow/pinchchat:latest` dans le README
  - Alternative sans Docker : `npx pinchchat` ou un script curl qui télécharge le dernier release (build statique) et lance un serveur
  - Mettre à jour le README avec les nouvelles méthodes d'installation

## Item #7
- **Date:** 2026-02-11
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-11 — commit `762a5f2`
- **Description:** Affichage des images dans le chat
  - Rendre les images inline dans les messages (quand le gateway envoie des images en base64/URL via `mediaUrls` ou content blocks de type image)
  - Rendre les images dans les tool results (quand un tool `read` retourne une image, l'afficher au lieu de juste "Read image file [image/png]")
  - Support des formats courants : png, jpg, gif, webp
  - Les images doivent être cliquables pour voir en taille réelle (lightbox ou nouvel onglet)
  - Garder le style dark theme cohérent (bordures arrondies, pas de fond blanc autour des images)

## Item #8
- **Date:** 2026-02-11
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-11 — commit `97c16be`
- **Description:** Intégrer le logo PinchChat
  - Le logo est déjà dans `public/logo.png`
  - L'utiliser comme favicon (générer les tailles appropriées ou utiliser le PNG directement)
  - L'afficher dans le header à côté du titre "PinchChat"
  - L'afficher sur l'écran de login
  - L'ajouter dans le README (en haut, centré)
  - Mettre à jour les meta OG tags pour utiliser le logo

## Item #9
- **Date:** 2026-02-11
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-11 — commit `4f47732`
- **Description:** GitHub Pages — landing page / démo
  - Activer GitHub Pages sur le repo (branche `gh-pages` ou dossier `docs/`)
  - Créer une landing page simple et stylée (même thème dark neon que l'app) avec :
    - Le logo PinchChat
    - Un titre + tagline
    - Des screenshots/GIFs de l'app
    - Les features principales
    - Un bouton "Get Started" qui pointe vers le README / installation
    - Le oneliner Docker
  - URL : `https://marlburrow.github.io/pinchchat/`
  - Ajouter un lien "Website" dans les settings du repo GitHub
  - Ajouter le workflow GitHub Actions pour déployer automatiquement

## Item #10
- **Date:** 2026-02-11
- **Priority:** medium
- **Status:** done
- **Completed:** 2026-02-11 — commit `02d2ab3`
- **Description:** Remplacer le diagramme d'architecture ASCII art dans le README par un diagramme Mermaid
  - GitHub rend nativement les blocs ```mermaid dans les README
  - Utiliser un flowchart ou graph LR/TD montrant : Browser → WebSocket → OpenClaw Gateway → LLM Provider, avec les composants internes (LoginScreen, Chat, Sidebar, Gateway client, etc.)
  - Plus lisible et maintenable que l'ASCII art

## Item #22
- **Date:** 2026-02-12
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-12 — commit `29482e3`
- **Description:** CI GitHub Actions en échec — vérifier et réparer en priorité. Le cron doit aussi vérifier l'état de la CI en début de chaque session avant toute autre amélioration. Si la CI est cassée, c'est la priorité #1.

## Item #23
- **Date:** 2026-02-12
- **Priority:** medium
- **Status:** done
- **Completed:** 2026-02-12 — commit `73d9e5f`
- **Description:** Icônes par channel/type dans la liste des sessions (sidebar)
  - Discord → icône Discord
  - Telegram → icône Telegram
  - Cron → icône horloge ou engrenage
  - Webchat → icône chat/bulle
  - Fallback générique pour les channels non-vanilla (ex: TeamSpeak) → icône par défaut (bulle ou globe)
  - Utiliser des SVG ou une lib d'icônes (lucide-react, react-icons, etc.)

## Item #24
- **Date:** 2026-02-12
- **Priority:** medium
- **Status:** done
- **Completed:** 2026-02-12 — commit `96f2883`
- **Description:** Display agent and model info in the UI
- **Details:**
  - Show the OpenClaw agent ID (e.g. "main") and the model being used (e.g. "claude-opus-4-6") somewhere in the UI
  - Investigate what data `sessions.list` and the connect response return — look for `agentId`, `model`, `defaultModel` or similar fields
  - Good placement options: in the header bar near the session name, or in a small info tooltip/popover
  - If the gateway doesn't expose this info via WebSocket, check if there's another endpoint or if it can be inferred from the session key
  - Keep it subtle/non-intrusive — small text or an info icon that reveals details on hover
  - This helps users know which agent/model is handling their conversation

## Item #25
- **Date:** 2026-02-12
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-12 — commit `1465ae1`
- **Description:** Move model badge from header to left of token progress bar
- **Details:**
  - Currently the model chip is in the navbar/header — too cramped on mobile
  - Move it to the left of the token usage progress bar instead
  - Should be subtle, same style as surrounding elements
  - Remove it from the header entirely

## Item #26
- **Date:** 2026-02-12
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-12 — commit `8ef1b42`
- **Description:** Mobile viewport overflow — conversation clipped on left and right edges on iPhone
- **Details:**
  - On iPhone, the chat messages are slightly clipped on both sides, requiring the user to pinch-zoom out
  - Likely a viewport/padding/overflow issue — check meta viewport tag, body/container width, and message padding
  - Ensure `<meta name="viewport" content="width=device-width, initial-scale=1">` is correct
  - Check for any elements with fixed widths or horizontal overflow (code blocks, tool calls, long URLs)
  - Test with responsive dev tools at 375px width (iPhone SE) and 390px (iPhone 14)
  - May need `overflow-x: hidden` on the main container or `max-width: 100vw` adjustments

## Item #27
- **Date:** 2026-02-12
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-12 — commit `aa158ad`
- **Description:** Clean release workflow with Docker image tags
- **Details:**
  - Currently no proper version tags on Docker images — needs a clean release process
  - Create a GitHub Actions release workflow that:
    1. Triggers on git tag push (v*)
    2. Builds Docker image
    3. Pushes to ghcr.io with proper tags: `vX.Y.Z`, `vX.Y`, `vX`, `latest`
    4. Creates a GitHub Release with changelog excerpt
  - Stop bumping versions in the cron — versions should only be bumped via the release workflow
  - The cron should NOT create tags or releases — it should commit to main with conventional commits, and Nicolas (or a manual trigger) decides when to cut a release
  - Consider using `release-please` or a simple manual workflow_dispatch with version input
  - Current Docker workflow (if any) should be reviewed and replaced by this proper one

## Item #29
- **Date:** 2026-02-12
- **Priority:** medium
- **Status:** done
- **Completed:** 2026-02-12 — commit `fa9b10a`
- **Description:** Sidebar resizable par drag & drop
- **Details:**
  - Les noms de sessions sont coupés dans la sidebar
  - Permettre à l'utilisateur de redimensionner la sidebar en glissant le bord droit
  - Persister la largeur choisie (localStorage)

## Item #30
- **Date:** 2026-02-12
- **Priority:** medium
- **Status:** done
- **Completed:** 2026-02-12 — commit `e94325b`
- **Description:** Supprimer une session depuis la sidebar
- **Details:**
  - Ajouter un bouton/action pour supprimer une session (clic droit ou icône)
  - Confirmation avant suppression
  - Vérifier si le gateway expose un endpoint de suppression de session

## Item #31
- **Date:** 2026-02-12
- **Priority:** medium
- **Status:** done
- **Completed:** 2026-02-12 — commit `03eb9e6`
- **Description:** Contenu des inputs scopé par session
- **Details:**
  - Quand on commence à taper un message dans une session puis qu'on switch vers une autre, le brouillon doit être conservé
  - Stocker les drafts par sessionKey (en mémoire ou localStorage)
  - Restaurer le brouillon quand on revient sur la session

## Item #32
- **Date:** 2026-02-12
- **Priority:** medium
- **Status:** done
- **Completed:** 2026-02-12 — commit `52a1a7f`
- **Description:** Meilleur titre de session en haut de page
- **Details:**
  - Actuellement on voit un UUID moche comme titre
  - Afficher un nom plus lisible : le displayName de la session, ou le channel + contexte
  - Pour les sessions main : afficher "Main" ou le nom de l'agent
  - Pour les sub-agents : afficher le label s'il existe
  - Fallback : session key nettoyée (sans le préfixe agent:xxx:)

## Item #33
- **Date:** 2026-02-12
- **Priority:** medium
- **Status:** done
- **Completed:** 2026-02-12 — commit `17ff52a`
- **Description:** Afficher le nom de l'agent dans l'UI
- **Details:**
  - Montrer clairement à quel agent on parle (pas juste l'agentId technique)
  - Utile pour le multi-agent : savoir si on parle à "Marlbot" ou à un autre agent
  - Placement : header ou en haut du chat

## Item #34
- **Date:** 2026-02-12
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-12 — commit `581675d`
- **Description:** Distinguer les événements système des messages utilisateur
- **Details:**
  - Les événements système (TeamSpeak join/leave, webhooks, heartbeats, etc.) arrivent comme des messages `role: user` et s'affichent comme si c'était l'utilisateur qui parlait
  - Il faut les détecter et les afficher différemment — petite notification grisée/discrète, pas une bulle utilisateur
  - Indices pour les détecter : présence de `[EVENT]`, `[from: ... (system)]`, `[HEARTBEAT]`, messages qui matchent le heartbeat prompt, etc.
  - Peut aussi checker si le gateway expose un champ type `source` ou `system` dans les métadonnées du message
  - Ces messages ne devraient pas avoir le même poids visuel que les vrais messages de l'utilisateur

## Item #28
- **Date:** 2026-02-12
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-12 — tagged `v1.4.0`
- **Description:** Cron should auto-tag releases with semver based on commit type
- **Details:**
  - The cron knows what changes it made (feat, fix, docs, refactor, etc.)
  - It should auto-determine the version bump based on conventional commits:
    - `feat:` → minor bump
    - `fix:` / `refactor:` / `style:` / `perf:` → patch bump
    - `docs:` / `ci:` / `chore:` → no release (skip tagging)
    - Breaking changes → major bump
  - After each meaningful commit (feat or fix), the cron should:
    1. Read current version from package.json
    2. Determine bump type from commit prefix
    3. Bump version in package.json
    4. Update CHANGELOG.md (move unreleased to new version section)
    5. Commit the version bump
    6. Create and push the git tag (vX.Y.Z)
    7. The release.yml workflow handles the rest (Docker, GitHub Release)
  - Accumulate doc/ci changes — only tag when there's a feat or fix to release
  - This replaces the previous "Nicolas tags manually" approach

## Item #35
- **Date:** 2026-02-12
- **Priority:** high
- **Status:** done
- **Completed:** 2026-02-12 — commit `4c8faf0`
- **Description:** Markdown not rendering in long assistant messages — raw `**bold**` shown
- **Details:**
  - Reported by Josh (external user) — screenshot shows `**Hypothèse :**` rendered as raw text instead of bold
  - Happens on long responses with multiple sections
  - The message content appears to bypass ReactMarkdown rendering
  - Investigate: is it a blocks vs content fallback issue? Does the message have empty blocks array but content filled?
  - Check if autoFormatText() is interfering with markdown syntax
  - Verify that streaming → final transition properly re-renders with markdown
  - Test with a long multi-section response to reproduce