V0.7.0 avatar and user to user name update

frontend/src/components/ChatWindow.jsx

@@ -183,15 +183,31 @@ export default function ChatWindow({ group, onBack, onGroupUpdated, onDirectMess
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="15 18 9 12 15 6"/></svg>
           </button>
         )}
-        <div
-          className="group-icon-sm"
-          style={{ background: group.type === 'public' ? '#1a73e8' : '#a142f4' }}
-        >
-          {group.type === 'public' ? '#' : group.name[0]?.toUpperCase()}
-        </div>
+        {group.is_direct && group.peer_avatar ? (
+          <img
+            src={group.peer_avatar}
+            alt={group.name}
+            className="group-icon-sm"
+            style={{ objectFit: 'cover', padding: 0 }}
+          />
+        ) : (
+          <div
+            className="group-icon-sm"
+            style={{ background: group.type === 'public' ? '#1a73e8' : '#a142f4' }}
+          >
+            {group.type === 'public' ? '#' : group.is_direct ? (group.peer_real_name || group.name)[0]?.toUpperCase() : group.name[0]?.toUpperCase()}
+          </div>
+        )}
         <div className="flex-col flex-1 overflow-hidden">
           <div className="flex items-center gap-2">
-            <span className="chat-header-name">{group.name}</span>
+            {group.is_direct && group.peer_display_name ? (
+              <span className="chat-header-name">
+                {group.peer_display_name}
+                <span className="chat-header-real-name"> ({group.peer_real_name})</span>
+              </span>
+            ) : (
+              <span className="chat-header-name">{group.is_direct && group.peer_real_name ? group.peer_real_name : group.name}</span>
+            )}
             {group.is_readonly ? (
               <span className="readonly-badge">Read-only</span>
             ) : null}