update

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 />
       )}