add @mentions — parsed server-side, rendered as highlighted spans

- Backend: parse_mentions() extracts @username from content
- Message API response includes mentions: string[] field
- Frontend: renderContent() highlights @mentions in hot orange
- Works with alphanumeric + hyphens + underscores

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/colony/src/components/MessageItem.tsx

@@ -26,6 +26,21 @@ function timeAgo(dateStr: string): string {
   return `${Math.floor(hrs / 24)}d`;
 }
 
+function renderContent(text: string) {
+  // Split on @mentions and render them as highlighted spans
+  const parts = text.split(/(@[\w-]+)/g);
+  return parts.map((part, i) => {
+    if (part.startsWith("@")) {
+      return (
+        <span key={i} className="text-primary font-bold cursor-default">
+          {part}
+        </span>
+      );
+    }
+    return part;
+  });
+}
+
 export function MessageItem({ message, replyTarget, onReply }: Props) {
   const [metaOpen, setMetaOpen] = useState(false);
   const isAgent = message.user.role === "agent";
@@ -110,7 +125,7 @@ export function MessageItem({ message, replyTarget, onReply }: Props) {
           {isDeleted ? (
             <span className="italic text-muted-foreground/40">[deleted]</span>
           ) : (
-            message.content
+            renderContent(message.content)
           )}
         </div>