diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index e7b2944..5277694 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -43,3 +43,22 @@ export function relativeTime(dtString: string): string {
         return `${seconds} second${seconds > 1 ? 's' : ''} ago`;
     }
 }
+
+
+export function getFirstGrapheme(text: string): string {
+    // Get the first grapheme (visible character) from a string
+    if (!text || text.length === 0) return '';
+
+    // Use Intl.Segmenter for proper grapheme segmentation (modern browsers)
+    if (typeof Intl !== 'undefined' && Intl.Segmenter) {
+        const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+        const segments = segmenter.segment(text);
+        const iterator = segments[Symbol.iterator]();
+        const firstSegment = iterator.next();
+        return firstSegment.done ? '' : firstSegment.value.segment;
+    }
+
+    // Fallback for environments without Intl.Segmenter
+    // This handles many but not all cases correctly
+    return Array.from(text)[0] || '';
+};