update

frontend/src/components/chat/ChatMessage.tsx

@@ -125,7 +125,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ message, isOwnMessage, isOneT
             borderRadius: 2,
           }}
         >
-          {!isOwnMessage && (
+          {!isOwnMessage && !isOneToOne && (
             <Typography variant="caption" sx={{ fontWeight: 600, display: 'block' }}>
               {message.actorDisplayName}
             </Typography>

frontend/src/components/chat/ChatMessageView.tsx

@@ -137,6 +137,7 @@ const ChatMessageView: React.FC = () => {
   }, [selectedRoomToken, chatPanelOpen, queryClient, fetchReactions]);
 
   const room = rooms.find((r) => r.token === selectedRoomToken);
+  const isOneToOne = room?.type === 1;
 
   const sendMutation = useMutation({
     mutationFn: ({ message, replyTo }: { message: string; replyTo?: number }) =>
@@ -271,6 +272,7 @@ const ChatMessageView: React.FC = () => {
               key={msg.id}
               message={msg}
               isOwnMessage={msg.actorType === 'users' && msg.actorId === loginName}
+              isOneToOne={isOneToOne}
               onReplyClick={setReplyToMessage}
               onReactionToggled={handleReactionToggled}
               reactionsOverride={reactionsMap.get(msg.id)}

frontend/src/components/chat/ChatPanel.tsx

@@ -189,7 +189,58 @@ const ChatPanelInner: React.FC = () => {
           </Typography>
         </Box>
       ) : selectedRoomToken ? (
-        <ChatMessageView />
+        <Box sx={{ display: 'flex', flex: 1, minHeight: 0 }}>
+          {/* Compact room sidebar — hidden on mobile */}
+          <Box
+            sx={{
+              display: { xs: 'none', sm: 'flex' },
+              flexDirection: 'column',
+              width: 56,
+              flexShrink: 0,
+              borderRight: 1,
+              borderColor: 'divider',
+              overflow: 'auto',
+              py: 0.5,
+            }}
+          >
+            {rooms.map((room) => {
+              const isSelected = room.token === selectedRoomToken;
+              return (
+                <Tooltip key={room.token} title={room.displayName} placement="left" arrow>
+                  <IconButton
+                    onClick={() => selectRoom(room.token)}
+                    sx={{
+                      mx: 'auto',
+                      my: 0.25,
+                      p: 0.5,
+                    }}
+                  >
+                    <Badge
+                      variant="dot"
+                      color="primary"
+                      invisible={room.unreadMessages === 0}
+                    >
+                      <Avatar
+                        sx={{
+                          width: 32,
+                          height: 32,
+                          fontSize: '0.7rem',
+                          bgcolor: isSelected ? 'primary.main' : 'action.hover',
+                          color: isSelected ? 'primary.contrastText' : 'text.primary',
+                        }}
+                      >
+                        {room.displayName.substring(0, 2).toUpperCase()}
+                      </Avatar>
+                    </Badge>
+                  </IconButton>
+                </Tooltip>
+              );
+            })}
+          </Box>
+          <Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
+            <ChatMessageView />
+          </Box>
+        </Box>
       ) : (
         <ChatRoomList />
       )}