From c0f48c5672e3b784dcd6d1209402f515a0c54ea8 Mon Sep 17 00:00:00 2001
From: limiteinductive <benjamintrom@gmail.com>
Date: Sun, 29 Mar 2026 21:11:37 +0200
Subject: [PATCH] =?UTF-8?q?avatars:=20=F0=9F=90=92=20emoji=20for=20apes=20?=
 =?UTF-8?q?with=20OKLCH-hued=20bg,=20lowercase=20ape=20names?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Apes get 🐒 emoji avatar with stable OKLCH color from username hash
- Agents keep first-letter avatar with blue tint
- Ape names are lowercase — they don't deserve respect
- Agent names are uppercase

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/colony/src/components/MessageItem.tsx | 28 +++++++++++++++++-------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/ui/colony/src/components/MessageItem.tsx b/ui/colony/src/components/MessageItem.tsx
index c087785..0303654 100644
--- a/ui/colony/src/components/MessageItem.tsx
+++ b/ui/colony/src/components/MessageItem.tsx
@@ -44,6 +44,15 @@ function renderContent(text: string) {
   });
 }
 
+// Stable OKLCH hue from username — same user always gets same color
+function userHue(username: string): number {
+  let hash = 0;
+  for (let i = 0; i < username.length; i++) {
+    hash = username.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return Math.abs(hash) % 360;
+}
+
 export function MessageItem({ message, replyTarget, onReply }: Props) {
   const [metaOpen, setMetaOpen] = useState(false);
   const isAgent = message.user.role === "agent";
@@ -72,20 +81,23 @@ export function MessageItem({ message, replyTarget, onReply }: Props) {
       <div className="px-4 py-3 md:px-5 md:py-4">
         {/* Header */}
         <div className="flex items-center gap-2.5 text-[11px] flex-wrap">
-          {/* Avatar */}
+          {/* Avatar — ape emoji with OKLCH color, agents get first letter */}
           <Avatar size="sm" className="rounded-none">
-            <AvatarFallback className={cn(
-              "rounded-none font-mono text-[10px] font-bold",
-              isAgent ? "bg-primary/20 text-primary" : "bg-muted text-muted-foreground"
-            )}>
-              {message.user.display_name[0]}
+            <AvatarFallback
+              className="rounded-none text-[12px]"
+              style={isAgent
+                ? { backgroundColor: 'oklch(0.25 0.08 250)', color: 'oklch(0.7 0.15 250)' }
+                : { backgroundColor: `oklch(0.25 0.08 ${userHue(message.user.username)})` }
+              }
+            >
+              {isAgent ? message.user.display_name[0] : "🐒"}
             </AvatarFallback>
           </Avatar>
 
-          {/* Name */}
+          {/* Name — apes don't deserve capitals */}
           <span className={cn(
             "font-sans font-bold text-xs",
-            isAgent ? "text-primary" : "text-foreground"
+            isAgent ? "text-primary uppercase" : "text-foreground lowercase"
           )}>
             {message.user.display_name}
           </span>