shiyue/PinchChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d852652390d07e49180c7ce97b7643c00bf34990
PinchChat/FEEDBACK.md
Nicolas Varrot 5ee2d119a5 docs: mark feedback items #75-#78 as done
2026-02-15 20:08:33 +00:00

45 KiB
Raw Blame History

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

Item #36

  • Date: 2026-02-12
  • Priority: medium
  • Status: done
  • Completed: 2026-02-12 — commit cecfa3e
  • Description: Prettier scrollbar in the text input field (ChatInput textarea)
  • Details:
    • On macOS the default scrollbar in the textarea looks ugly
    • Style it with custom CSS (thin, dark theme matching the UI — similar to the chat scroll area)
    • Use webkit-scrollbar styles + scrollbar-width/scrollbar-color for Firefox
    • Keep it subtle: thin track, small thumb with rounded corners, matching the zinc/cyan theme
    • Reported by Josh (external user on macOS)

Item #37

  • Date: 2026-02-12
  • Priority: high
  • Status: done
  • Completed: 2026-02-12 — commit ad7d149
  • Description: Scrollbar in textarea still ugly on Windows (horizontal scrollbar)
  • Details:
    • Josh reports the textarea horizontal scrollbar is still ugly/beige on Windows even after v1.11.0
    • The webkit scrollbar fix from #36 may not apply to the textarea horizontal scrollbar
    • Screenshot shows a small beige/gold horizontal scrollbar at the bottom of the input area
    • May need to also hide the horizontal scrollbar entirely (textarea shouldn't need horizontal scroll — use word-wrap/overflow-wrap instead)
    • Add overflow-x: hidden on the textarea to prevent horizontal scrollbar entirely
    • Also check that resize: none is set and word-break: break-word / overflow-wrap: break-word to avoid horizontal overflow

Item #38

  • Date: 2026-02-12
  • Priority: high
  • Status: done
  • Completed: 2026-02-12 — commit d9e1b88
  • Description: Session deletion doesn't persist — deleted sessions reappear after page refresh
  • Details:
    • The delete session feature (v1.7.0) only deletes from local state/localStorage
    • On refresh, sessions are reloaded from the gateway via loadHistory/listSessions API
    • Need to actually call the gateway API to delete the session server-side
    • Check if the gateway WS protocol supports session deletion (DELETE or a command message)
    • If not, at minimum maintain a localStorage blacklist of deleted session keys and filter them out on reload

Item #39

  • Date: 2026-02-12
  • Priority: medium
  • Status: done
  • Completed: 2026-02-12 — commit b4813f0
  • Description: Message metadata viewer — discreet button on each message to show raw metadata
  • Details:
    • Small icon button (ℹ️ or ⋯) on hover of each message
    • Click to expand/toggle a subtle panel showing all available metadata: timestamp, message_id, channel, sender info, session key, etc.
    • Should show whatever the gateway sends in the message object (raw dump or formatted key/value pairs)
    • Keep it discreet — not visible by default, only on hover, doesn't clutter the UI
    • Useful for debugging and understanding message routing
    • Collapsed by default, like the tool call details

Item #40

  • Date: 2026-02-12
  • Priority: medium
  • Status: done
  • Completed: 2026-02-12 — commit 25e63f8
  • Description: Better thinking/reasoning indicator when content is hidden
  • Details:
    • When the gateway streams a thinking block without visible content (thinking=low), PinchChat shows "Thinking..." but nothing happens for a while
    • Improve the UX: show elapsed time counter, maybe a pulsing animation, and a label like "Reasoning..." or "Thinking (hidden)..."
    • If the gateway sends thinking content (thinking=stream), display it in a collapsible block (already works)
    • If no content is sent, at least show the user that the agent is actively reasoning and how long it's been
    • Keep it purely client-side, no gateway modifications

Item #41

  • Date: 2026-02-12
  • Priority: medium
  • Status: done
  • Completed: 2026-02-12 — commit bd446aa
  • Description: Tool call payload viewer — word-wrap toggle instead of horizontal scroll
  • Details:
    • Currently tool call JSON payloads/results have long lines that require horizontal scrolling
    • Add a toggle button (wrap/nowrap) on the tool call content viewer
    • Default to word-wrap (break-word / white-space: pre-wrap) so content fits without horizontal scroll
    • Optional toggle to switch to nowrap (pre + overflow-x scroll) for when users want to see raw formatting
    • Apply to both tool call parameters and tool results

Item #42

  • Date: 2026-02-12
  • Priority: high
  • Status: done
  • Completed: 2026-02-12 — commit 792a34b
  • Description: Visual differentiation between user messages and assistant messages/tool calls
  • Details:
    • Currently user and assistant messages look too similar
    • Add distinct background color or left border color for user messages (like classic chat apps)
    • Keep it subtle and matching the dark theme (e.g. slightly different zinc shade, or a colored left border like cyan for user)
    • Assistant messages stay as-is, tool calls already have their own styling
    • System events should also be visually distinct (already somewhat handled but could be improved)
    • Think WhatsApp/Telegram style: your messages vs their messages are clearly different
    • Keep the soft palette for keratoconus — no harsh contrast

Item #43

  • Date: 2026-02-12
  • Priority: medium
  • Status: done
  • Completed: 2026-02-12 — commit 7388139
  • Description: Textarea scrollbar always visible — should only show on overflow
  • Details:
    • The vertical scrollbar in the message input textarea is always displayed
    • It should only appear when the content exceeds the max height (overflow)
    • Use overflow-y: auto instead of overflow-y: scroll on the textarea
    • The scrollbar should be hidden when the textarea hasn't reached its max size

Item #44

  • Date: 2026-02-12
  • Priority: high
  • Status: done
  • Completed: 2026-02-12 — commit 3ca76eb
  • Description: User message styling from #42 needs rework — too dark and off-brand
  • Details:
    • The violet tint from #42 is too dark and doesn't fit the color scheme
    • Use a lighter, more visible differentiation — try cyan/teal tones instead of violet (matches the existing cyan accent theme)
    • Could use a lighter background (slightly brighter than assistant messages) or a colored left border
    • Keep it subtle but clearly distinguishable
    • Test against the zinc dark theme to make sure it's readable for keratoconus (no harsh contrast)

Item #45

  • Date: 2026-02-12
  • Priority: high
  • Status: done
  • Completed: 2026-02-12 — commit da2e486
  • Description: Display the agent's avatar when set in OpenClaw config
    • OpenClaw gateway can provide an avatar URL for the agent (configured in openclaw.json)
    • PinchChat should display this avatar next to assistant messages instead of the default Bot icon
    • Check the gateway WebSocket session/handshake data for avatar info
    • Fallback to the current default icon if no avatar is configured
    • Should also appear in the header next to the agent name

Item #46

  • Date: 2026-02-12
  • Priority: high
  • Status: done
  • Completed: 2026-02-12 — commit 9f67c9e
  • Description: Bug: metadata viewer (ℹ️ button) doesn't work
    • Clicking the info button on messages does nothing — no panel appears
    • Introduced in v1.15.0 (commit b4813f0)
    • Fix the click handler / panel display logic

Item #47

  • Date: 2026-02-12
  • Priority: medium
  • Status: done
  • Completed: 2026-02-12 — commit b20bf41
  • Description: Themes — light mode, OLED black, custom theme support
    • Add theme switcher (dark default, light mode, OLED black)
    • Configurable accent color
    • Persist choice in localStorage

Item #48

  • Date: 2026-02-12
  • Priority: medium
  • Status: done
  • Completed: 2026-02-13 — commit 6c19c26
  • Description: Message search — Ctrl+F in conversation history
    • Search bar that filters/highlights messages in the current session
    • Navigate between results (up/down arrows)
    • Keyboard shortcut Ctrl+F

Item #49

  • Date: 2026-02-12
  • Priority: medium
  • Status: done
  • Completed: 2026-02-13 — commit b049243
  • Description: Syntax highlight in the input textarea
    • Color code blocks even while typing in the prompt input
    • Highlight markdown syntax (bold, code, headers) in real-time

Item #50

  • Date: 2026-02-12
  • Priority: medium
  • Status: done
  • Completed: 2026-02-13 — commit f09482e
  • Description: Multi-tab — split view for 2 sessions side by side
    • Allow viewing 2 sessions simultaneously in a split pane layout
    • Drag-to-resize divider between panes
    • Toggle via button or keyboard shortcut

Item #51

  • Date: 2026-02-12
  • Priority: medium
  • Status: done
  • Completed: 2026-02-13 — commit 4dfaaff
  • Description: Typing preview — live markdown render while typing
    • Show a preview pane below or beside the input with rendered markdown
    • Toggle on/off
    • Helps compose complex messages with formatting

Item #52

  • Date: 2026-02-12
  • Priority: medium
  • Status: done
  • Completed: 2026-02-13 — commit 82d2e37
  • Description: Raw JSON viewer — toggle to see raw gateway messages
    • Toggle button to switch between rendered view and raw JSON
    • Show the full gateway message payload as formatted JSON
    • Useful for debugging and understanding the protocol

Item #53

  • Date: 2026-02-12
  • Priority: high
  • Status: done
  • Completed: 2026-02-12 — commit 4b41b45
  • Description: Update the fake chat demo on the GitHub Pages landing page
    • The animated demo is completely outdated — it no longer matches the current UI
    • Needs to reflect the actual current look: cyan user bubbles, avatar display, date separators, channel icons, metadata button, tool call emojis, etc.
    • Make it as close as possible to the real PinchChat UI

Item #54

  • Date: 2026-02-12
  • Priority: medium
  • Status: done
  • Completed: 2026-02-13 — commit c7cd47b
  • Description: Better display of webhook/hook session messages
    • Sessions created via /hooks/agent show raw prompt scaffolding (SECURITY NOTICE, EXTERNAL_UNTRUSTED_CONTENT delimiters, task IDs, job IDs)
    • This raw envelope should be cleaned up or collapsed in the UI
    • Strip or collapse the system scaffolding, show only the actual user message content
    • Could detect the <<<EXTERNAL_UNTRUSTED_CONTENT>>> pattern and extract just the message body

Item #55

  • Date: 2026-02-12
  • Priority: high
  • Status: done
  • Completed: 2026-02-13 — commit b60c0ce
  • Description: Bug: Theme switcher (v1.20.0) doesn't work — clicking options closes the popup and nothing changes visually
    • Root cause: the ThemeContext and CSS variables ARE being set correctly, but almost all components still use hardcoded Tailwind classes (bg-zinc-800, text-zinc-400, border-white/8, etc.) instead of the CSS variables
    • The Tailwind classes override the CSS variables, so theme changes have zero visual effect
    • FIX: Migrate ALL hardcoded color classes across ALL components to use the CSS variables from ThemeContext. This includes: ChatMessage, Sidebar, Header, Chat, LoginScreen, ConnectionBanner, ToolCall, CodeBlock, ImageBlock, ErrorBoundary, KeyboardShortcuts, ChatInput, TypingIndicator, DateSeparator, etc.
    • Also check index.css / globals for hardcoded colors
    • This is a multi-file migration — may take several runs. Do it systematically, component by component.
    • TEST: after each component migration, verify Dark/Light/OLED all look correct

Item #56

  • Date: 2026-02-12
  • Priority: medium
  • Status: done
  • Completed: 2026-02-13 — commit 35652ea
  • Source: Josh (Bardak)
  • Description: Drag & drop session reordering in sidebar
    • Allow users to drag sessions to reorder them manually in the sidebar
    • The custom order should persist in localStorage
    • Works alongside the existing pin feature (pinned group stays on top, but order within groups is customizable)

Item #57

  • Date: 2026-02-12
  • Priority: medium
  • Status: done
  • Completed: 2026-02-13 — commit 664fc0e
  • Source: Josh (Bardak)
  • Description: Display agent thinking/reasoning content in chat
    • When the agent uses thinking/reasoning (extended thinking), show the thinking content in a collapsible section
    • Currently PinchChat shows a "Reasoning…" badge but doesn't display the actual thinking text
    • Add an expandable block (like tool calls) that shows the thinking content when available
    • Some models stream thinking — handle both streamed and final thinking blocks

Item #58

  • Date: 2026-02-13
  • Priority: high
  • Status: done
  • Completed: 2026-02-13 — commit 73a46f3
  • Description: Fix CI lint errors blocking ALL release workflows since v1.14.0
    • 4 ESLint errors cause every release.yml run to fail:
    1. ThemeContext.tsx: exports useTheme hook alongside Provider component → react-refresh/only-export-components. Fix: move useTheme to a separate file or use eslint-disable.
    2. ThemeContext.tsx: empty catch block → no-empty. Fix: add a comment.
    3. ToolCollapseContext.tsx: same react-refresh/only-export-components issue.
    4. ToolCall.tsx:246: setState in useEffect → react-hooks/set-state-in-effect. Fix: use useSyncExternalStore or useCallback pattern.
    • This is BLOCKING all GitHub Releases and Docker image builds. Fix ASAP.

Item #59

  • Date: 2026-02-13
  • Priority: high
  • Status: done
  • Completed: 2026-02-13 — commit b783ae1
  • Description: Optimistic message rendering — messages sent by the user should appear immediately in the chat, not wait for server echo. Currently when the agent is busy processing, user messages can take a long time to appear.
    • Show the message instantly in the chat (optimistic UI) with a subtle "sending" indicator (e.g. clock icon or dimmed opacity)
    • When server confirms (echo received), update to "sent" state (e.g. checkmark or full opacity)
    • If send fails, show error state with retry option
    • Message should always appear at the bottom of the chat immediately after pressing Send
    • This is important UX — users think their message didn't go through

Item #60

  • Date: 2026-02-13
  • Priority: high
  • Status: done
  • Completed: 2026-02-13 — commit e596eea
  • Description: Light theme fixes — 4 issues:
    1. Progress bar colors (sidebar + header) should follow accent color, not hardcoded cyan — ✅ already using --pc-accent-rgb
    2. Send button gradient should adapt to theme/accent — ✅ already using var(--pc-accent)
    3. Tool call badges are unreadable in light theme (dark-only Tailwind classes like amber-950, sky-950) — ✅ fixed: darker text + higher bg opacity in light mode
    4. User message bubble background too subtle in light theme — needs more contrast — ✅ fixed: higher opacity bg + border in light mode
    • Added resolvedTheme to ThemeContext for components to adapt to current theme

Item #61

  • Date: 2026-02-13
  • Priority: medium
  • Status: done
  • Completed: 2026-02-13 — commit cbb4611
  • Description: Markdown unordered lists (- item, * item) are not rendered properly in chat messages. They appear as raw text instead of formatted bullet points. Need to verify remarkGfm/ReactMarkdown config handles list rendering correctly, and ensure CSS styles are applied for ul/ol elements in the markdown-body class.

Item #62

  • Date: 2026-02-13
  • Priority: high
  • Status: done
  • Completed: 2026-02-13 — commit 2f25c45
  • Description: Textarea has an ugly/thick accent-colored border (cyan) visible in the screenshot. The border around the chat input textarea looks bad — it should be more subtle (thin border, muted color, or no visible border at all). The input area should blend cleanly with its container, not have a glowing cyan outline.

Item #63

  • Date: 2026-02-13
  • Priority: high
  • Status: done
  • Completed: 2026-02-13 — commit 84512b1
  • Description: "New message" indicator shows when scrolling up even when there are no new messages. The indicator should only appear when an actual new message arrives while scrolled up.

Item #64

  • Date: 2026-02-13
  • Priority: high
  • Status: done
  • Completed: 2026-02-13 — commit 84512b1
  • Description: Cursor desync in textarea — the cursor position gets ahead of where characters actually appear (whitespace gap between cursor and text). Likely related to HighlightedTextarea overlay sync issue.

Item #65

  • Date: 2026-02-13
  • Priority: high
  • Status: done
  • Completed: 2026-02-13 — commit 84512b1
  • Description: "New message" indicator and expand/collapse toggle overlap with the textarea when it grows (multi-line input). These elements should stay outside/above the textarea area and not overlap.

Item #66

  • Date: 2026-02-13
  • Priority: medium
  • Status: done
  • Completed: 2026-02-13 — commit 84512b1
  • Description: Avatar image shows as broken for some deployments. Bardak's instance (deployed by Pelouse) shows a broken image. Works on Nicolas's instance. Likely the avatar URL configured by Pelouse is invalid or blocked. PinchChat should handle broken avatar images gracefully (fallback to initials or default icon).

Item #67

  • Date: 2026-02-13
  • Priority: medium
  • Status: done
  • Completed: 2026-02-13 — commit d478eee, tagged v1.40.1
  • Description: Add an update indicator next to the version number in the UI. When a newer Docker image/release is available on GitHub (compare current version vs latest GitHub release tag), show a visual indicator (badge, dot, or link) so users know they can update.

Item #68

  • Date: 2026-02-13
  • Priority: high
  • Status: done
  • Completed: 2026-02-13 — commit d478eee, tagged v1.40.1
  • Description: Cursor desync in textarea STILL present after v1.39.2 fix. The cursor position still gets ahead of where characters actually appear. The previous fix (removing padding/bold from backdrop tokens) was insufficient. Need deeper investigation — likely the HighlightedTextarea backdrop and textarea have mismatched rendering (font metrics, line-height, word-wrap differences, or span wrapping in the backdrop creating different text flow). Consider disabling highlight entirely as test, or ensuring backdrop uses identical character-level rendering with zero extra styling that could affect text width/flow.

Item #63

  • Date: 2026-02-13
  • Priority: medium
  • Status: done
  • Completed: 2026-02-14 — commit bd5ff6b, tagged v1.49.0
  • Description: Context compaction button — Add a button in the PinchChat UI to trigger OpenClaw's context summarize/compaction. When a session's token usage is high (e.g. near the limit), the user can click to compact the conversation history, summarizing older messages to free up context window space. OpenClaw should expose an API/tool for this. (Feedback from Bardak)

Item #64

  • Date: 2026-02-14
  • Priority: high
  • Status: done
  • Completed: 2026-02-14 — commit 143e948, tagged v1.46.0
  • Source: Josh (Bardak)
  • Description: PWA not working — no install button appears on mobile or desktop. The app should be installable as a Progressive Web App. Check manifest.json, service worker registration, and install prompt handling. Test on both Chrome mobile and desktop.

Item #65

  • Date: 2026-02-14
  • Priority: medium
  • Status: done
  • Completed: 2026-02-14 — commit 143e948, tagged v1.46.0
  • Source: Josh (Bardak)
  • Description: Replace the star icon (⭐) next to "PinchChat" and "Sessions" in the sidebar/navbar. It looks cheap. Replace with something better — PinchChat logo, lobster emoji (🦞), or whatever looks cool and fits the branding. Make it feel intentional, not placeholder.

Item #66

  • Date: 2026-02-14
  • Priority: high
  • Status: done
  • Completed: 2026-02-14 — commit 143e948, tagged v1.46.0
  • Source: Josh (Bardak)
  • Description: Image display bug — when the assistant sends an image, it initially shows as an empty square container (wrong aspect ratio, no image visible). Clicking it opens the preview modal correctly and shows the image. After closing the preview, the image then renders correctly in the message bubble with the right aspect ratio. The image should render correctly on first load without requiring user interaction. Likely a lazy-loading or onload sizing issue.

Item #67 (DUPLICATE — see Item #63)

  • Date: 2026-02-14
  • Note: Already tracked as Item #63. Context compaction button.

Item #68

  • Date: 2026-02-14
  • Priority: medium
  • Status: done
  • Completed: 2026-02-14 — commit 143e948, tagged v1.46.0
  • Source: Josh (Bardak)
  • Description: Colorize channel/source icons in the session list and chat — use each service's brand colors for visual identification. Discord = blurple (#5865F2), Telegram = blue (#26A5E4), Cron = amber/orange, TeamSpeak = blue (#2580C3), Signal = blue (#3A76F0), webchat = green, bardak-bot = custom, etc. Currently they're all the same color and hard to distinguish at a glance.

Item #69

  • Date: 2026-02-14
  • Priority: medium
  • Status: done
  • Completed: 2026-02-14 — commit 70d29dc, tagged v1.47.0
  • Source: Josh (Bardak)
  • Description: Display the agent/assistant name somewhere in the UI (header, sidebar, or chat). The name is available in OpenClaw config at ui.assistant.name (e.g. "Marlbot"). Currently there's no indication of who the agent is — should be visible, especially for multi-agent setups. Could also show the avatar if ui.assistant.avatar is set. Important: these fields are optional and most users won't set them — always have a sensible fallback (e.g. "Assistant" + default robot icon) when ui.assistant.name / ui.assistant.avatar are absent.

Item #70

  • Date: 2026-02-14
  • Priority: medium
  • Status: done
  • Completed: 2026-02-14 — commit 143e948, tagged v1.46.0
  • Source: Josh (Bardak)
  • Description: WebSocket connection indicator uses primary/accent color — this is problematic because when the theme accent is red, the "connected" dot looks like an error/disconnected state. Use fixed semantic colors instead: green (#22c55e) for connected, red for disconnected, amber for reconnecting. Never tie connection status indicator to the theme accent color.

Item #71

  • Date: 2026-02-14
  • Priority: low
  • Status: done
  • Completed: 2026-02-14 — commit 143e948, tagged v1.46.0
  • Source: Josh (Bardak)
  • Description: The three-dot menu (⋯) at the bottom of the sidebar next to the version number feels useless. Remove it or replace with something actually useful (e.g. settings shortcut, theme picker, link to GitHub repo, etc.).

Item #72

  • Date: 2026-02-14
  • Priority: high
  • Status: done
  • Completed: 2026-02-14 — commit 70d29dc, tagged v1.47.0
  • Source: Josh (Bardak)
  • Description: After OpenClaw compaction, all previous messages disappear from the chat UI. This is a bad UX — the user loses their message history visually even though the conversation continues. Ideally PinchChat should keep a local cache/history of previous messages (IndexedDB or localStorage) so the user can still scroll back and see/copy-paste old messages even after compaction. The compaction boundary could be shown with a visual separator ("— context compacted —") but old messages should remain visible above it. This is critical for usability — users need to be able to reference what they said earlier.

Item #73

  • Date: 2026-02-14
  • Priority: medium
  • Status: done
  • Completed: 2026-02-15 — commit e1ba4aa, tagged v1.57.1
  • Description: Message action buttons (copy, view source, etc.) are misaligned when hovering over message text. The buttons overlay/overlap the text content incorrectly. They should be properly positioned outside the text area or in a consistent location that doesn't interfere with reading. (Feedback from Bardak, screenshot: https://i.imgur.com/O9CwAix.png)

Item #74

  • Date: 2026-02-14
  • Priority: high
  • Status: done
  • Completed: 2026-02-15 — commit e1ba4aa, tagged v1.57.1
  • Description: Session deletion doesn't persist — when deleting a session from the sidebar, it disappears visually but comes back on page reload. The deletion is only client-side/cosmetic and doesn't actually delete the session from the OpenClaw backend. Need to call the proper API endpoint to actually delete/archive the session server-side. (Feedback from Bardak)

Item #75

  • Date: 2026-02-15
  • Priority: high
  • Status: done
  • Completed: 2026-02-15 — commit b315d80, tagged v1.64.1
  • Description: Session info tooltip not clickable — clicking inside the tooltip (e.g. to copy sessionKey) closes it immediately. The click event bubbles up to the parent button that toggles the tooltip. Need stopPropagation on the tooltip container. (Note: fix attempted in v1.63.3 but marlbot-chat had stale files)
  • Resolution: stopPropagation was already in code from v1.63.3; redeployed dev instance with fresh src files. Also fixed clipboard fallback (#76) which was the actual copy failure.

Item #76

  • Date: 2026-02-15
  • Priority: high
  • Status: done
  • Completed: 2026-02-15 — commit 7606a09, tagged v1.64.1
  • Description: Code/payload copy button doesn't work — clicking the copy button on code blocks and tool call payloads does nothing. Investigate clipboard API calls in CodeBlock and ToolCall components.
  • Resolution: navigator.clipboard.writeText requires HTTPS/localhost (secure context). Added copyToClipboard utility with execCommand('copy') fallback for HTTP deployments. Replaced all 5 clipboard call sites.

Item #78

  • Date: 2026-02-15
  • Priority: medium
  • Status: done
  • Completed: 2026-02-15 — commit 7606a09, tagged v1.64.1
  • Source: Josh (Bardak)
  • Description: Session renaming — allow users to rename sessions from the sidebar. OpenClaw supports sessions.patch with a label field. Add a rename action (double-click, right-click menu, or edit icon) on session names in the sidebar. Requires operator.admin scope (already added in v1.63.3).
  • Resolution: Rename UI already existed (local-only). Added server-side persistence via sessions.patch with label field.

Item #77

  • Date: 2026-02-15
  • Priority: high
  • Status: done
  • Completed: 2026-02-15 — tagged v1.64.1
  • Description: Compact button doesn't work — need to verify the correct OpenClaw API for triggering compaction. Current implementation sends sessions.compact which requires operator.admin scope (added in v1.63.3). If it still doesn't work, check OpenClaw docs for the correct method name and parameters. May need to use /compact slash command equivalent via WS.
  • Resolution: Code verified correct: sessions.compact with { key } param, operator.admin scope already requested since v1.63.3. The compact only truncates transcript files with >400 lines. May have appeared broken because session didn't have enough history to compact. Redeployed dev instance with fresh build.