From 2d9aec865778d42da155659766cfa830f3534267 Mon Sep 17 00:00:00 2001
From: hzhang <hzhang@hangman-lab.top>
Date: Fri, 15 May 2026 15:52:43 +0100
Subject: [PATCH] feat(frontend): render <@id> as @name mention chips

Markdown renderer turns <@userId> into a Discord-style mention chip
(@displayName, resolved via guild members; short-id fallback). Tokens
inside backticks stay literal; untranslated <@user.name:..> left as-is.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.css          |  11 +++++++++++
 src/lib/markdown.ts    | Bin 3572 -> 4272 bytes
 src/pages/ChatPage.tsx |   9 ++++++++-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index 7b096e8..a196794 100644
--- a/src/index.css
+++ b/src/index.css
@@ -626,6 +626,17 @@ button {
 .md del {
   color: var(--text-faint);
 }
+.mention {
+  color: #c4b5fd;
+  background: var(--accent-soft);
+  border-radius: 4px;
+  padding: 0 3px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.mention:hover {
+  background: rgba(168, 85, 247, 0.28);
+}
 .meta-badge {
   font-family: var(--mono);
   font-size: 10px;
diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts
index 15115d3fa496d0bcf706b38f9762fcb7ae25b5c6..7049d88cca10c7ed5bbe91e0c777c8d94b43216e 100644
GIT binary patch
delta 775
zcmZva!EVz)5QddhG*SvDgaG9-R8?xLsV%t0b(~x{aHx<fP>~2#7kiUf+3s39Yf2SG
zIdaF3zynapM^3yG55TPLpbEIHXZQc-pKtuDcl+%2O>4tHXG$9|HyMXhrk9Djmaj8|
zFoIPV!1qCORN@l{23K5~R7svdj$FS=z$mIFDQ1G*fMi!3oa@vqR8EEq4uZ2Jm2;T5
z<kZ-l)*j;koHPmGAsS6jTo^@AAG_=FtaZQD3nyt3!Ev<h3h^S%JUGiG7OMSZGXPXo
z7o(P3f>3ISU5YExC5OH+C#3Js&4~wZrO`~HV1|;16Pw+$VFS;LXarItFm2<`49N}G
zOnBW{E@M0Gwm&);G!X}&vW-ES;Vv<EdtHIk+~isUdYTiRm^*%z$$5X#52Go5IC5<`
ze?9<bmJ2ZeOXCg<3m+hzSxg=prVXAGTIaBdzoGnxu1i>}KGvgB#7ZJf!9H?9D^#?}
zF-530*r11TRsO3=ZCnT_Mdi}CUWS-439(>^qy1+6`_bfJ#UEqrR9)P4=-XG(B`Mc#
zao$cISwR2rDSouSynusMtP+l%;Bsyja177aP%BAp|GK6N;jUfE>CQ#F1I{!#a-sNn
n@7@31%cr~0+N~wuhMk?}SPr|<wp<K5z4Gf``RDuPgYUlqQab=#

delta 92
zcmV-i0Hgn~A@m!tQ~|T-0SW<=zyw{BG6jbk03>^3Z)9b2E^K9PXLM*FEg&&{0ALCr
yAbqpz1zrLN04Q8!D=7ezPzYGFy$B!ylPwM#v;GO?0<-B1J^`~W4$c9S0T8c<l^yN?

diff --git a/src/pages/ChatPage.tsx b/src/pages/ChatPage.tsx
index 9c46f29..a3257ee 100644
--- a/src/pages/ChatPage.tsx
+++ b/src/pages/ChatPage.tsx
@@ -336,6 +336,10 @@ export default function ChatPage() {
   const nameById = new Map(members.map((m) => [m.userId, m.name || m.email]))
   const authorLabel = (uid?: string) =>
     uid ? (uid === session?.user.id ? session?.user.name || 'You' : nameById.get(uid) || uid.slice(0, 8)) : 'unknown'
+  const mentionName = (id: string) =>
+    id === session?.user.id
+      ? session?.user.name || session?.user.email || 'you'
+      : nameById.get(id) || id.slice(0, 8)
 
   const guildById = new Map(members.map((m) => [m.userId, m]))
   const channelMembers = channelMemberIds.map(
@@ -471,7 +475,10 @@ export default function ChatPage() {
                     <span className={`meta-badge ${m.wakeup ? 'on' : ''}`}>wakeup={String(m.wakeup)}</span>
                   ) : null}
                 </div>
-                <div className="text md" dangerouslySetInnerHTML={{ __html: renderMarkdown(m.content) }} />
+                <div
+                  className="text md"
+                  dangerouslySetInnerHTML={{ __html: renderMarkdown(m.content, { resolveMention: mentionName }) }}
+                />
                 {devMode ? (
                   <pre className="meta-raw">
 {JSON.stringify(