fix: preserve whitespace around mentions

renderContent: mention span now includes trailing space when the
next text segment doesn't start with one (React collapses whitespace
between sibling inline elements).

handleMentionSelect: avoid double space when the text after cursor
already starts with a space.

web/src/components/ChatArea.tsx

@@ -59,9 +59,12 @@ function renderContent(content: string, memberUsernames: Set<string>) {
 
   return segments.map((seg, idx) => {
     if (seg.type === "mention") {
+      // ponytail: add trailing space because React collapses whitespace between sibling spans
+      const nextSeg = segments[idx + 1];
+      const needsSpace = !nextSeg || (nextSeg.type === "text" && !nextSeg.value.startsWith(" "));
       return (
         <span key={idx} className="text-gb-aqua">
-          @{seg.value}
+          @{seg.value}{needsSpace ? " " : ""}
         </span>
       );
     }
@@ -458,7 +461,8 @@ export function ChatArea() {
     if (atIndex === -1) return;
     const before = currentValue.slice(0, atIndex);
     const after = currentValue.slice(cursor);
-    const next = `${before}@${username} ${after}`;
+    const separator = after.startsWith(" ") || after === "" ? "" : " ";
+    const next = `${before}@${username}${separator}${after}`;
     setInput(next);
     setMentionQuery(null);
     // Also set the DOM value immediately so cursor positioning works