From 3dbb851f61f0bbf83e2b517eda6b7194548e515d Mon Sep 17 00:00:00 2001
From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com>
Date: Fri, 24 Jul 2026 00:07:19 -0700
Subject: [PATCH 1/2] fix(reactions): accept emoji with variation selectors /
 ZWJ / skin tones
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SAFE_EMOJI_RE was /^[\p{Emoji}‍]{1,8}$/u. `\p{Emoji}` does NOT match the
combining marks real emoji carry — U+FE0F (variation selector), skin-tone
modifiers — so ❤️ (U+2764 U+FE0F), which is in the client's reaction palette,
400'd with "emoji must be 1–8 emoji characters". The frontend swallows reaction
errors, so clicking ❤️ did nothing: users perceived "reactions can't show more
than one" (their obvious second reaction, love, silently failed). Confirmed live
against the API on 2026-07-24; the backend count aggregation and the UI count
render were both verified correct — this validation was the whole bug.

Fix: widen the char class to allow U+FE0F, U+200D (ZWJ sequences), and
\p{Emoji_Modifier} (skin tones); raise the cap to 16 code points for sequences.

Test: reactionController.emojiValidation.test.js — ❤️, 👍🏽, 👨‍👩‍👧 accepted;
plain non-emoji still 400s.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DMeWzgFxsfBcjoLVLewEES
---
 ...reactionController.emojiValidation.test.js | 66 +++++++++++++++++++
 backend/controllers/reactionController.ts     |  9 ++-
 2 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 backend/__tests__/unit/controllers/reactionController.emojiValidation.test.js

diff --git a/backend/__tests__/unit/controllers/reactionController.emojiValidation.test.js b/backend/__tests__/unit/controllers/reactionController.emojiValidation.test.js
new file mode 100644
index 000000000..9afa04194
--- /dev/null
+++ b/backend/__tests__/unit/controllers/reactionController.emojiValidation.test.js
@@ -0,0 +1,66 @@
+// Guards SAFE_EMOJI_RE after the 2026-07-24 bug: `\p{Emoji}` alone rejected the
+// combining marks real emoji carry — U+FE0F (variation selector, e.g. ❤️),
+// U+200D (ZWJ sequences), skin-tone modifiers — so ❤️ (in the client palette)
+// 400'd and the frontend swallowed it. Users couldn't add it → "reactions can't
+// show more than one." These pin that the palette + common sequences are
+// accepted, and that genuine non-emoji is still rejected.
+
+jest.mock('../../../models/pg/MessageReaction', () => ({
+  __esModule: true,
+  default: {
+    add: jest.fn().mockResolvedValue(undefined),
+    remove: jest.fn().mockResolvedValue(undefined),
+    listForMessage: jest.fn().mockResolvedValue([{ emoji: '👍', count: 1, mine: true, userIds: ['caller-1'] }]),
+  },
+}));
+jest.mock('../../../services/reactionAttributionService', () => ({
+  decorateReactionSummaries: jest.fn(async (s) => s),
+}));
+jest.mock('../../../config/db-pg', () => ({ pool: { query: jest.fn() } }));
+jest.mock('../../../models/AgentRegistry', () => ({ AgentInstallation: { findOne: jest.fn() } }));
+jest.mock('../../../models/Pod', () => ({ findById: jest.fn() }));
+jest.mock('../../../config/socket', () => ({ getIO: jest.fn() }));
+
+const reactionController = require('../../../controllers/reactionController');
+const MessageReaction = require('../../../models/pg/MessageReaction').default;
+const { pool } = require('../../../config/db-pg');
+const { AgentInstallation } = require('../../../models/AgentRegistry');
+const socketConfig = require('../../../config/socket');
+
+const buildRes = () => {
+  const res = {};
+  res.status = jest.fn().mockReturnValue(res);
+  res.json = jest.fn().mockReturnValue(res);
+  return res;
+};
+
+const reactAs = async (emoji) => {
+  // loadPodIdForMessage → a pod; agent path → active install → access granted.
+  pool.query.mockResolvedValueOnce({ rows: [{ pod_id: 'pod-1' }], rowCount: 1 });
+  AgentInstallation.findOne.mockReturnValue({ lean: () => Promise.resolve({ _id: 'inst-1' }) });
+  const req = { params: { messageId: '9' }, body: { emoji }, agentUser: { _id: 'bot-1' } };
+  const res = buildRes();
+  await reactionController.addReaction(req, res);
+  return res;
+};
+
+describe('reactionController.addReaction — emoji validation (❤️ bug 2026-07-24)', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    socketConfig.getIO.mockReturnValue({ to: jest.fn().mockReturnValue({ emit: jest.fn() }) });
+  });
+
+  // ❤️ = U+2764 U+FE0F; 👍🏽 = thumb + skin-tone modifier; 👨‍👩‍👧 = ZWJ sequence;
+  // 👍 = plain single code point (control that always worked).
+  test.each(['👍', '❤️', '👍🏽', '👨‍👩‍👧'])('accepts %s', async (emoji) => {
+    const res = await reactAs(emoji);
+    expect(res.status).not.toHaveBeenCalledWith(400);
+    expect(MessageReaction.add).toHaveBeenCalledWith('9', 'bot-1', emoji);
+  });
+
+  test.each(['abc', 'a👍', '<script>'])('rejects non-emoji %p with 400', async (emoji) => {
+    const res = await reactAs(emoji);
+    expect(res.status).toHaveBeenCalledWith(400);
+    expect(MessageReaction.add).not.toHaveBeenCalled();
+  });
+});
diff --git a/backend/controllers/reactionController.ts b/backend/controllers/reactionController.ts
index 7de95c41d..b67d21c56 100644
--- a/backend/controllers/reactionController.ts
+++ b/backend/controllers/reactionController.ts
@@ -24,7 +24,14 @@ interface AuthedRes {
   json: (d: unknown) => void;
 }
 
-const SAFE_EMOJI_RE = /^[\p{Emoji}‍]{1,8}$/u;
+// Accept a single emoji OR a full emoji sequence. `\p{Emoji}` alone rejects
+// the combining marks real emoji carry: U+FE0F (variation selector — makes
+// ❤️/☺️/⭐️ render as emoji), U+200D (ZWJ, for 👨‍👩‍👧 family/profession
+// sequences), and skin-tone modifiers (\p{Emoji_Modifier}). Before this, ❤️ —
+// which is in the client's reaction palette — 400'd ("emoji must be 1–8…") and
+// the frontend swallowed it, so users couldn't add it (2026-07-24). Widened to
+// 16 code points so ZWJ sequences fit.
+const SAFE_EMOJI_RE = /^[\p{Emoji}\u{200D}\u{FE0F}\p{Emoji_Modifier}]{1,16}$/u;
 
 function getUserId(req: AuthedReq): string {
   return String(req.user?._id || req.userId || req.agentUser?._id || '');

From 6ddc51b828648749d1664ee67d574c35b8f1959a Mon Sep 17 00:00:00 2001
From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com>
Date: Fri, 24 Jul 2026 00:15:13 -0700
Subject: [PATCH 2/2] fix(reactions): surface why a reaction failed instead of
 swallowing it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The reaction toggle caught and ignored all errors, so a rejected reaction
(bad-emoji 400, non-member 403, rate-limit 429) did nothing visible. That
silence is what made the ❤️-validation bug read as "reactions can't show more
than one" — the second reaction just vanished. Now show the server message (or
a status-mapped fallback) for ~4s beneath the chips.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DMeWzgFxsfBcjoLVLewEES
---
 .../src/v2/components/V2MessageBubble.tsx     | 19 ++++++++++++++++++-
 frontend/src/v2/v2.css                        |  7 +++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/frontend/src/v2/components/V2MessageBubble.tsx b/frontend/src/v2/components/V2MessageBubble.tsx
index dd14954ec..a2ef4f5cc 100644
--- a/frontend/src/v2/components/V2MessageBubble.tsx
+++ b/frontend/src/v2/components/V2MessageBubble.tsx
@@ -292,6 +292,11 @@ const V2MessageBubble: React.FC<V2MessageBubbleProps> = ({ message, isLead, agen
   // Picker state per message. Open via "+ react"; close on first click
   // (no need for outside-click handling — the picker hides after action).
   const [pickerOpen, setPickerOpen] = useState(false);
+  // Surface why a reaction failed instead of swallowing it. Before this, a
+  // rejected reaction (bad emoji 400, non-member 403, rate-limit 429) did
+  // nothing visible — which made the ❤️-validation bug read as "reactions
+  // don't work / can't add more than one" (2026-07-24).
+  const [reactionError, setReactionError] = useState<string | null>(null);
   const rawUsername = message.user?.username || 'Unknown';
   const overriddenDisplay = agentDisplayNames?.get(rawUsername);
   const author = overriddenDisplay || rawUsername;
@@ -478,7 +483,16 @@ const V2MessageBubble: React.FC<V2MessageBubbleProps> = ({ message, isLead, agen
               // Optimistic update is unnecessary — the socket `messageReaction`
               // event from the backend updates the message list in place.
             } catch (err) {
-              // Defensive: ignore (likely 429 or 403); next list refresh corrects.
+              const e = err as { response?: { status?: number; data?: { msg?: string; error?: string } } };
+              const status = e.response?.status;
+              const serverMsg = e.response?.data?.msg || e.response?.data?.error;
+              setReactionError(
+                serverMsg
+                || (status === 403 ? "You're not a member of this pod." : '')
+                || (status === 429 ? 'Too many reactions — give it a moment.' : '')
+                || 'Could not add that reaction.',
+              );
+              window.setTimeout(() => setReactionError(null), 4000);
               // eslint-disable-next-line no-console
               console.warn('[reactions] toggle failed:', (err as Error).message);
             } finally {
@@ -564,6 +578,9 @@ const V2MessageBubble: React.FC<V2MessageBubbleProps> = ({ message, isLead, agen
                   )}
                 </span>
               )}
+              {reactionError && (
+                <span className="v2-msg__reaction-error" role="alert">{reactionError}</span>
+              )}
             </div>
           );
         })()}
diff --git a/frontend/src/v2/v2.css b/frontend/src/v2/v2.css
index e9385c70a..be9e1b77d 100644
--- a/frontend/src/v2/v2.css
+++ b/frontend/src/v2/v2.css
@@ -5645,6 +5645,13 @@
   font-weight: 600;
   font-size: 11px;
 }
+/* Transient reason-a-reaction-failed line (bad emoji / not a member / rate
+ * limited). Auto-clears after ~4s from the component. */
+.v2-msg__reaction-error {
+  font-size: 11px;
+  color: var(--v2-danger, #c0392b);
+  align-self: center;
+}
 
 /* Sprint B5 — interactive reaction chips + picker. Mine = filled
  * indigo; not-mine = subtle gray (existing rule above). Same