🤖 fix: Handle emojis with variation selectors in status_set

- Use Intl.Segmenter to count grapheme clusters instead of code points
- Properly handles variation selectors (like ✏️), skin tones, and complex emojis
- Remove text-sm class from error message in StatusSetToolCall
- Add tests for emojis with variation selectors and skin tone modifiers

Author: ammar-agent

src/components/tools/StatusSetToolCall.tsx

@@ -31,7 +31,7 @@ export const StatusSetToolCall: React.FC<StatusSetToolCallProps> = ({
           <Tooltip>status_set</Tooltip>
         </TooltipWrapper>
         <span className="text-muted-foreground italic">{args.message}</span>
-        {errorMessage && <span className="text-error-foreground text-sm">({errorMessage})</span>}
+        {errorMessage && <span className="text-error-foreground">({errorMessage})</span>}
         <StatusIndicator status={status}>{statusDisplay}</StatusIndicator>
       </ToolHeader>
     </ToolContainer>

src/services/tools/status_set.test.ts

@@ -31,6 +31,35 @@ describe("status_set tool validation", () => {
       }
     });
 
+    it("should accept emojis with variation selectors", async () => {
+      const tool = createStatusSetTool(mockConfig);
+
+      // Emojis with variation selectors (U+FE0F)
+      const emojis = ["✏️", "✅", "➡️", "☀️"];
+      for (const emoji of emojis) {
+        const result = (await tool.execute!({ emoji, message: "Test" }, mockToolCallOptions)) as {
+          success: boolean;
+          emoji: string;
+          message: string;
+        };
+        expect(result).toEqual({ success: true, emoji, message: "Test" });
+      }
+    });
+
+    it("should accept emojis with skin tone modifiers", async () => {
+      const tool = createStatusSetTool(mockConfig);
+
+      const emojis = ["👋🏻", "👋🏽", "👋🏿"];
+      for (const emoji of emojis) {
+        const result = (await tool.execute!({ emoji, message: "Test" }, mockToolCallOptions)) as {
+          success: boolean;
+          emoji: string;
+          message: string;
+        };
+        expect(result).toEqual({ success: true, emoji, message: "Test" });
+      }
+    });
+
     it("should reject multiple emojis", async () => {
       const tool = createStatusSetTool(mockConfig);
 

src/services/tools/status_set.ts

@@ -18,18 +18,24 @@ export type StatusSetToolResult =
 
 /**
  * Validates that a string is a single emoji character
- * Uses Unicode property escapes to match emoji characters
+ * Uses Intl.Segmenter to count grapheme clusters (handles variation selectors, skin tones, etc.)
  */
 function isValidEmoji(str: string): boolean {
-  // Check if string contains exactly one character (handles multi-byte emojis)
-  const chars = [...str];
-  if (chars.length !== 1) {
+  if (!str) return false;
+
+  // Use Intl.Segmenter to count grapheme clusters (what users perceive as single characters)
+  // This properly handles emojis with variation selectors (like ✏️), skin tones, flags, etc.
+  const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
+  const segments = [...segmenter.segment(str)];
+
+  // Must be exactly one grapheme cluster
+  if (segments.length !== 1) {
     return false;
   }
 
   // Check if it's an emoji using Unicode properties
-  const emojiRegex = /^[\p{Emoji_Presentation}\p{Extended_Pictographic}]$/u;
-  return emojiRegex.test(str);
+  const emojiRegex = /^[\p{Emoji_Presentation}\p{Extended_Pictographic}]/u;
+  return emojiRegex.test(segments[0].segment);
 }
 
 /**