@swarmclawai/swarmclaw 0.7.2 → 0.7.4

package/src/components/chatrooms/chatroom-view.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import { useEffect, useRef, useCallback, useState } from 'react'
+import { useEffect, useRef, useCallback, useState, useMemo } from 'react'
 import { useChatroomStore } from '@/stores/use-chatroom-store'
+import type { StreamingAgent } from '@/stores/use-chatroom-store'
 import { useAppStore } from '@/stores/use-app-store'
 import { useWs } from '@/hooks/use-ws'
 import { ChatroomMessageBubble } from './chatroom-message'
@@ -10,6 +11,7 @@ import { ChatroomTypingBar } from './chatroom-typing-bar'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
 import { HeartbeatMoment, ActivityMoment, isNotableTool } from '@/components/chat/activity-moment'
+import { BottomSheet } from '@/components/shared/bottom-sheet'
 import type { Chatroom, ChatroomMessage, ChatroomMember, Agent } from '@/types'
 
 function navigateToAgent(agentId: string) {
@@ -41,7 +43,6 @@ function isAgentMuted(chatroom: Chatroom, agentId: string): boolean {
 
 type MomentType = { kind: 'heartbeat' } | { kind: 'tool'; name: string; input: string }
 
-/** Subscribe to a single agent heartbeat topic — one hook call per agent */
 function useAgentHeartbeat(agentId: string, onPulse: (id: string) => void) {
   const topic = agentId ? `heartbeat:agent:${agentId}` : ''
   const onPulseRef = useRef(onPulse)
@@ -51,18 +52,22 @@ function useAgentHeartbeat(agentId: string, onPulse: (id: string) => void) {
   useWs(topic, () => onPulseRef.current(agentId))
 }
 
-/** Subscribes up to 6 member agents to heartbeat topics */
-function AgentHeartbeatListeners({ agentIds, onPulse }: { agentIds: string[]; onPulse: (id: string) => void }) {
-  useAgentHeartbeat(agentIds[0] || '', onPulse)
-  useAgentHeartbeat(agentIds[1] || '', onPulse)
-  useAgentHeartbeat(agentIds[2] || '', onPulse)
-  useAgentHeartbeat(agentIds[3] || '', onPulse)
-  useAgentHeartbeat(agentIds[4] || '', onPulse)
-  useAgentHeartbeat(agentIds[5] || '', onPulse)
+function AgentHeartbeatListener({ agentId, onPulse }: { agentId: string; onPulse: (id: string) => void }) {
+  useAgentHeartbeat(agentId, onPulse)
   return null
 }
 
-const GROUP_THRESHOLD_MS = 2 * 60 * 1000 // 2 minutes
+function AgentHeartbeatListeners({ agentIds, onPulse }: { agentIds: string[]; onPulse: (id: string) => void }) {
+  return (
+    <>
+      {agentIds.map((agentId) => (
+        <AgentHeartbeatListener key={agentId} agentId={agentId} onPulse={onPulse} />
+      ))}
+    </>
+  )
+}
+
+const GROUP_THRESHOLD_MS = 2 * 60 * 1000
 
 function dayLabel(ts: number): string {
   const d = new Date(ts)
@@ -78,7 +83,6 @@ function dayLabel(ts: number): string {
 export function ChatroomView() {
   const currentChatroomId = useChatroomStore((s) => s.currentChatroomId)
   const chatrooms = useChatroomStore((s) => s.chatrooms)
-  const streaming = useChatroomStore((s) => s.streaming)
   const streamingAgents = useChatroomStore((s) => s.streamingAgents)
   const sendMessage = useChatroomStore((s) => s.sendMessage)
   const toggleReaction = useChatroomStore((s) => s.toggleReaction)
@@ -92,11 +96,13 @@ export function ChatroomView() {
   const unmuteAgent = useChatroomStore((s) => s.unmuteAgent)
   const setMemberRole = useChatroomStore((s) => s.setMemberRole)
   const agents = useAppStore((s) => s.agents) as Record<string, Agent>
+  const lastReadTimestamps = useAppStore((s) => s.lastReadTimestamps)
+  const markChatRead = useAppStore((s) => s.markChatRead)
   const scrollRef = useRef<HTMLDivElement>(null)
   const [pinsExpanded, setPinsExpanded] = useState(false)
-
-  // Per-agent moment overlays (heartbeat or tool events)
+  const [isNearBottom, setIsNearBottom] = useState(true)
   const [agentMoments, setAgentMoments] = useState<Record<string, MomentType>>({})
+  const [detailsOpen, setDetailsOpen] = useState(false)
 
   const handleHeartbeatPulse = useCallback((agentId: string) => {
     setAgentMoments((prev) => ({ ...prev, [agentId]: { kind: 'heartbeat' } }))
@@ -111,13 +117,11 @@ export function ChatroomView() {
   }, [])
 
   const chatroom = currentChatroomId ? (chatrooms[currentChatroomId] as Chatroom | undefined) : null
-
-  // Detect notable tool events from chatroom messages
   const chatroomMessages = chatroom?.messages
   const prevToolKeysRef = useRef<Record<string, string>>({})
+
   useEffect(() => {
     if (!chatroomMessages?.length) return
-    // Find the last message from each agent and check for notable tools
     const lastByAgent = new Map<string, ChatroomMessage>()
     for (const msg of chatroomMessages) {
       if (msg.senderId !== 'user' && msg.senderId !== 'system') {
@@ -142,32 +146,77 @@ export function ChatroomView() {
 
   const refreshChatroom = useCallback(() => {
     loadChatrooms()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [loadChatrooms])
 
   useWs(currentChatroomId ? `chatroom:${currentChatroomId}` : '', refreshChatroom)
 
-  // Smooth auto-scroll on new messages
-  useEffect(() => {
-    if (scrollRef.current) {
-      scrollRef.current.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' })
+  const memberAgents = useMemo(() => (
+    chatroom
+      ? (chatroom.agentIds.map((id) => agents[id]).filter(Boolean) as Agent[])
+      : []
+  ), [agents, chatroom])
+
+  const streamingAgentIds = useMemo(() => new Set(streamingAgents.keys()), [streamingAgents])
+  const chatroomId = chatroom?.id || null
+  const pinnedIds = useMemo(() => chatroom?.pinnedMessageIds ?? [], [chatroom?.pinnedMessageIds])
+  const pinnedMessages = useMemo(() => (
+    chatroom
+      ? (pinnedIds.map((pid) => chatroom.messages.find((m) => m.id === pid)).filter(Boolean) as ChatroomMessage[])
+      : []
+  ), [chatroom, pinnedIds])
+  const memberAgentIds = chatroom?.agentIds || []
+  const mutedCount = chatroom ? chatroom.agentIds.filter((agentId) => isAgentMuted(chatroom, agentId)).length : 0
+  const adminCount = chatroom ? chatroom.agentIds.filter((agentId) => getMemberRole(chatroom, agentId) === 'admin').length : 0
+  const lastReadAt = chatroom ? (lastReadTimestamps[chatroom.id] || 0) : 0
+  const unreadCount = useMemo(() => (
+    chatroom
+      ? chatroom.messages.filter((msg) => msg.senderId !== 'user' && msg.senderId !== 'system' && (msg.time || 0) > lastReadAt).length
+      : 0
+  ), [chatroom, lastReadAt])
+
+  const focusMessage = useCallback((messageId: string) => {
+    const el = document.getElementById(`chatroom-msg-${messageId}`)
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      el.classList.add('bg-accent-soft/20')
+      setTimeout(() => el.classList.remove('bg-accent-soft/20'), 2000)
     }
-  }, [chatroom?.messages.length, streamingAgents.size])
+  }, [])
+
+  const scrollToLatest = useCallback((behavior: ScrollBehavior = 'smooth') => {
+    const node = scrollRef.current
+    if (!node || !chatroom) return
+    node.scrollTo({ top: node.scrollHeight, behavior })
+    markChatRead(chatroom.id)
+  }, [chatroom, markChatRead])
 
-  const memberAgents = chatroom
-    ? (chatroom.agentIds
-      .map((id) => agents[id])
-      .filter(Boolean) as Agent[])
-    : []
+  useEffect(() => {
+    if (!chatroomId) return
+    markChatRead(chatroomId)
+  }, [chatroomId, markChatRead])
 
-  const streamingAgentIds = new Set(streamingAgents.keys())
-  const pinnedIds = chatroom?.pinnedMessageIds || []
-  const pinnedMessages = chatroom
-    ? (pinnedIds.map((pid) => chatroom.messages.find((m) => m.id === pid)).filter(Boolean) as ChatroomMessage[])
-    : []
+  useEffect(() => {
+    setDetailsOpen(false)
+  }, [chatroomId])
 
-  // Heartbeat subscriptions for up to 6 member agents
-  const memberAgentIds = chatroom?.agentIds.slice(0, 6) || []
+  useEffect(() => {
+    const node = scrollRef.current
+    if (!node || !chatroomId) return
+    const handleScroll = () => {
+      const nearBottom = node.scrollHeight - node.scrollTop - node.clientHeight < 120
+      setIsNearBottom(nearBottom)
+      if (nearBottom) markChatRead(chatroomId)
+    }
+    handleScroll()
+    node.addEventListener('scroll', handleScroll)
+    return () => node.removeEventListener('scroll', handleScroll)
+  }, [chatroomId, markChatRead])
+
+  useEffect(() => {
+    if (chatroom && isNearBottom) {
+      scrollToLatest(chatroom.messages.length <= 1 ? 'auto' : 'smooth')
+    }
+  }, [chatroom, isNearBottom, scrollToLatest, streamingAgents.size])
 
   if (!chatroom) {
     return (
@@ -185,7 +234,6 @@ export function ChatroomView() {
   }
 
   const handleTransfer = (messageId: string, targetAgentId: string) => {
-    if (!chatroom) return
     const msg = chatroom.messages.find((m) => m.id === messageId)
     const targetAgent = agents[targetAgentId]
     if (!msg || !targetAgent) return
@@ -194,196 +242,361 @@ export function ChatroomView() {
   }
 
   return (
-    <div className="flex-1 flex flex-col h-full min-w-0">
-      {/* Header */}
-      <div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.06] shrink-0">
-        <div className="w-8 h-8 rounded-full bg-accent-soft flex items-center justify-center shrink-0">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-accent-bright">
-            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-          </svg>
-        </div>
-        <div className="flex-1 min-w-0">
-          <h3 className="text-[14px] font-700 text-text truncate">{chatroom.name}</h3>
-          <p className="text-[11px] text-text-3 truncate">
-            {memberAgents.length} agent{memberAgents.length !== 1 ? 's' : ''}
-            {chatroom.description ? ` · ${chatroom.description}` : ''}
-          </p>
+    <div className="flex-1 flex min-h-0 min-w-0">
+      <div className="min-w-0 flex-1 flex flex-col h-full">
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.06] shrink-0">
+          <div className="w-8 h-8 rounded-full bg-accent-soft flex items-center justify-center shrink-0">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-accent-bright">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+            </svg>
+          </div>
+          <div className="flex-1 min-w-0">
+            <h3 className="text-[14px] font-700 text-text truncate">{chatroom.name}</h3>
+            <div className="flex flex-wrap items-center gap-2 mt-1">
+              <p className="text-[11px] text-text-3 truncate">
+                {memberAgents.length} agent{memberAgents.length !== 1 ? 's' : ''}
+                {chatroom.description ? ` · ${chatroom.description}` : ''}
+              </p>
+              <span className="px-1.5 py-0.5 rounded-[5px] bg-white/[0.04] text-[10px] font-700 uppercase tracking-[0.08em] text-text-3/70">
+                {chatroom.chatMode === 'parallel' ? 'Parallel' : 'Sequential'}
+              </span>
+              <span className={`px-1.5 py-0.5 rounded-[5px] text-[10px] font-700 uppercase tracking-[0.08em] ${
+                chatroom.autoAddress ? 'bg-emerald-500/10 text-emerald-400' : 'bg-white/[0.04] text-text-3/70'
+              }`}>
+                Auto-address {chatroom.autoAddress ? 'on' : 'off'}
+              </span>
+              {streamingAgents.size > 0 && (
+                <span className="px-1.5 py-0.5 rounded-[5px] bg-sky-500/10 text-[10px] font-700 uppercase tracking-[0.08em] text-sky-400">
+                  {streamingAgents.size} active now
+                </span>
+              )}
+            </div>
+          </div>
+
+          <div className="flex -space-x-1.5 shrink-0">
+            {memberAgents.slice(0, 5).map((agent) => {
+              const role = getMemberRole(chatroom, agent.id)
+              const badge = getRoleBadge(role)
+              const muted = isAgentMuted(chatroom, agent.id)
+              return (
+                <Tooltip key={agent.id}>
+                  <TooltipTrigger asChild>
+                    <button
+                      onClick={() => navigateToAgent(agent.id)}
+                      className={`relative transition-all duration-200 hover:scale-110 hover:z-10 hover:-translate-y-0.5 cursor-pointer bg-transparent border-none p-0 ${muted ? 'opacity-40' : ''}`}
+                    >
+                      <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={22} status={streamingAgents.has(agent.id) ? 'busy' : 'online'} />
+                      {badge && (
+                        <span className={`absolute -bottom-1 -right-1 text-[7px] font-700 px-0.5 rounded border ${badge.className}`}>
+                          {badge.label[0]}
+                        </span>
+                      )}
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" sideOffset={6}>
+                    <div className="flex items-center gap-1.5">
+                      <span>{agent.name}</span>
+                      {badge && <span className={`text-[9px] font-600 px-1 py-0.5 rounded border ${badge.className}`}>{badge.label}</span>}
+                      {muted && <span className="text-[9px] text-red-400">Muted</span>}
+                    </div>
+                  </TooltipContent>
+                </Tooltip>
+              )
+            })}
+            {memberAgents.length > 5 && (
+              <div className="w-[22px] h-[22px] rounded-full bg-white/[0.08] flex items-center justify-center text-[9px] text-text-3">
+                +{memberAgents.length - 5}
+              </div>
+            )}
+          </div>
+
+          <button
+            type="button"
+            onClick={() => setDetailsOpen(true)}
+            className="xl:hidden shrink-0 rounded-[9px] border border-white/[0.08] bg-white/[0.03] px-2.5 py-1.5 text-[11px] font-600 text-text-2 hover:bg-white/[0.06] cursor-pointer transition-colors"
+          >
+            Details
+          </button>
+
+          <button
+            onClick={() => {
+              setEditingChatroomId(chatroom.id)
+              setChatroomSheetOpen(true)
+            }}
+            className="shrink-0 w-7 h-7 rounded-full flex items-center justify-center hover:bg-white/[0.08] transition-all cursor-pointer"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3">
+              <circle cx="12" cy="12" r="3" />
+              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+            </svg>
+          </button>
         </div>
-        {/* Member avatars with role badges */}
-        <div className="flex -space-x-1.5 shrink-0">
-          {memberAgents.slice(0, 5).map((agent) => {
-            const role = getMemberRole(chatroom, agent.id)
-            const badge = getRoleBadge(role)
-            const muted = isAgentMuted(chatroom, agent.id)
-            return (
-              <Tooltip key={agent.id}>
-                <TooltipTrigger asChild>
+
+        {pinnedMessages.length > 0 && (
+          <div className="border-b border-white/[0.06] shrink-0">
+            <button
+              onClick={() => setPinsExpanded(!pinsExpanded)}
+              className="w-full flex items-center gap-2 px-4 py-2 hover:bg-white/[0.02] transition-colors cursor-pointer bg-transparent border-none text-left"
+              style={{ fontFamily: 'inherit' }}
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-amber-400 shrink-0">
+                <path d="M12 17v5" />
+                <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16h14v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 2-2H6a2 2 0 0 0 2 2 1 1 0 0 1 1 1z" />
+              </svg>
+              <span className="text-[12px] font-500 text-text-2">{pinnedMessages.length} pinned</span>
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={`text-text-3 transition-transform ${pinsExpanded ? 'rotate-180' : ''}`}>
+                <polyline points="6 9 12 15 18 9" />
+              </svg>
+            </button>
+            {pinsExpanded && (
+              <div className="px-4 pb-2 flex flex-col gap-1">
+                {pinnedMessages.map((message) => (
                   <button
-                    onClick={() => navigateToAgent(agent.id)}
-                    className={`relative transition-all duration-200 hover:scale-110 hover:z-10 hover:-translate-y-0.5 cursor-pointer bg-transparent border-none p-0 ${muted ? 'opacity-40' : ''}`}
+                    key={message.id}
+                    onClick={() => focusMessage(message.id)}
+                    className="flex items-center gap-2 px-2 py-1.5 rounded-[8px] hover:bg-white/[0.04] transition-colors cursor-pointer bg-transparent border-none text-left w-full"
+                    style={{ fontFamily: 'inherit' }}
                   >
-                    <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={22} status={streamingAgents.has(agent.id) ? 'busy' : 'online'} />
-                    {badge && (
-                      <span className={`absolute -bottom-1 -right-1 text-[7px] font-700 px-0.5 rounded border ${badge.className}`}>
-                        {badge.label[0]}
-                      </span>
-                    )}
+                    <span className="text-[11px] font-600 text-accent-bright shrink-0">{message.senderName}</span>
+                    <span className="text-[11px] text-text-3 truncate flex-1">{message.text.slice(0, 80)}</span>
                   </button>
-                </TooltipTrigger>
-                <TooltipContent side="bottom" sideOffset={6}>
-                  <div className="flex items-center gap-1.5">
-                    <span>{agent.name}</span>
-                    {badge && <span className={`text-[9px] font-600 px-1 py-0.5 rounded border ${badge.className}`}>{badge.label}</span>}
-                    {muted && <span className="text-[9px] text-red-400">Muted</span>}
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        <AgentHeartbeatListeners agentIds={memberAgentIds} onPulse={handleHeartbeatPulse} />
+
+        <div className="relative flex-1 min-h-0">
+          <div ref={scrollRef} className="absolute inset-0 overflow-y-auto py-3">
+            {chatroom.messages.length === 0 ? (
+              <div className="flex items-center justify-center h-full px-6">
+                <div className="text-center">
+                  <p className="text-[13px] text-text-3 mb-1">No messages yet</p>
+                  <p className="text-[12px] text-text-3/60">Use @AgentName to mention specific agents, or @all for everyone</p>
+                </div>
+              </div>
+            ) : (
+              chatroom.messages.map((msg, i) => {
+                const prev = i > 0 ? chatroom.messages[i - 1] : null
+                const isGrouped = prev
+                  ? prev.senderId === msg.senderId && (msg.time - prev.time) < GROUP_THRESHOLD_MS
+                  : false
+                const prevDay = prev ? new Date(prev.time).toDateString() : null
+                const msgDay = new Date(msg.time).toDateString()
+                const showDaySep = !prev || prevDay !== msgDay
+
+                const senderId = msg.senderId
+                const moment = agentMoments[senderId]
+                const isLastFromSender = !chatroom.messages.slice(i + 1).some((m) => m.senderId === senderId)
+                let momentOverlay: React.ReactNode = null
+                if (moment && isLastFromSender && senderId !== 'user' && senderId !== 'system') {
+                  if (moment.kind === 'heartbeat') {
+                    momentOverlay = <HeartbeatMoment onDismiss={() => clearAgentMoment(senderId)} />
+                  } else {
+                    momentOverlay = (
+                      <ActivityMoment
+                        key={`${moment.name}-${senderId}`}
+                        toolName={moment.name}
+                        toolInput={moment.input}
+                        onDismiss={() => clearAgentMoment(senderId)}
+                      />
+                    )
+                  }
+                }
+
+                return (
+                  <div key={msg.id}>
+                    {showDaySep && (
+                      <div className="flex items-center gap-3 px-4 py-3">
+                        <div className="flex-1 h-px bg-white/[0.06]" />
+                        <span className="text-[10px] font-600 text-text-3 uppercase tracking-wider">{dayLabel(msg.time)}</span>
+                        <div className="flex-1 h-px bg-white/[0.06]" />
+                      </div>
+                    )}
+                    <ChatroomMessageBubble
+                      message={msg}
+                      agents={agents}
+                      onToggleReaction={toggleReaction}
+                      onReply={(message: ChatroomMessage) => setReplyingTo(message)}
+                      onTogglePin={togglePin}
+                      onTransfer={handleTransfer}
+                      onDeleteMessage={(messageId, targetAgentId) => deleteMessage(messageId, targetAgentId)}
+                      onMuteAgent={(agentId) => muteAgent(agentId)}
+                      onUnmuteAgent={(agentId) => unmuteAgent(agentId)}
+                      onSetRole={(agentId, role) => setMemberRole(agentId, role)}
+                      chatroom={chatroom}
+                      pinnedMessageIds={pinnedIds}
+                      streamingAgentIds={streamingAgentIds}
+                      messages={chatroom.messages}
+                      grouped={isGrouped && !showDaySep}
+                      momentOverlay={momentOverlay}
+                    />
                   </div>
-                </TooltipContent>
-              </Tooltip>
-            )
-          })}
-          {memberAgents.length > 5 && (
-            <div className="w-[22px] h-[22px] rounded-full bg-white/[0.08] flex items-center justify-center text-[9px] text-text-3">
-              +{memberAgents.length - 5}
-            </div>
+                )
+              })
+            )}
+            <ChatroomTypingBar streamingAgents={streamingAgents} />
+          </div>
+
+          {(!isNearBottom || unreadCount > 0) && (
+            <button
+              onClick={() => scrollToLatest('smooth')}
+              className="absolute bottom-4 right-4 px-3.5 py-2 rounded-[10px] bg-surface-2/95 backdrop-blur-xl border border-white/[0.1] text-[12px] font-700 text-text shadow-[0_8px_30px_rgba(0,0,0,0.4)] hover:bg-white/[0.08] transition-all cursor-pointer"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Jump to latest{unreadCount > 0 ? ` · ${unreadCount} new` : ''}
+            </button>
           )}
         </div>
-        <button
-          onClick={() => {
-            setEditingChatroomId(chatroom.id)
-            setChatroomSheetOpen(true)
+
+        <ChatroomInput
+          agents={memberAgents}
+          onSend={sendMessage}
+        />
+      </div>
+
+      <aside className="hidden xl:flex xl:w-[300px] xl:flex-col xl:border-l xl:border-white/[0.06] bg-surface/30">
+        <RoomDetailsPanel
+          chatroom={chatroom}
+          memberAgents={memberAgents}
+          streamingAgents={streamingAgents}
+          pinnedMessages={pinnedMessages}
+          mutedCount={mutedCount}
+          adminCount={adminCount}
+          onFocusMessage={focusMessage}
+        />
+      </aside>
+
+      <BottomSheet open={detailsOpen} onClose={() => setDetailsOpen(false)}>
+        <RoomDetailsPanel
+          chatroom={chatroom}
+          memberAgents={memberAgents}
+          streamingAgents={streamingAgents}
+          pinnedMessages={pinnedMessages}
+          mutedCount={mutedCount}
+          adminCount={adminCount}
+          onFocusMessage={(messageId) => {
+            setDetailsOpen(false)
+            setTimeout(() => focusMessage(messageId), 50)
           }}
-          className="shrink-0 w-7 h-7 rounded-full flex items-center justify-center hover:bg-white/[0.08] transition-all cursor-pointer"
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3">
-            <circle cx="12" cy="12" r="3" />
-            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
-          </svg>
-        </button>
+          compact
+        />
+      </BottomSheet>
+    </div>
+  )
+}
+
+function RoomDetailsPanel({
+  chatroom,
+  memberAgents,
+  streamingAgents,
+  pinnedMessages,
+  mutedCount,
+  adminCount,
+  onFocusMessage,
+  compact = false,
+}: {
+  chatroom: Chatroom
+  memberAgents: Agent[]
+  streamingAgents: Map<string, StreamingAgent>
+  pinnedMessages: ChatroomMessage[]
+  mutedCount: number
+  adminCount: number
+  onFocusMessage: (messageId: string) => void
+  compact?: boolean
+}) {
+  return (
+    <div className={`flex flex-col ${compact ? 'gap-5' : 'h-full'}`}>
+      <div className={compact ? '' : 'border-b border-white/[0.06] px-4 py-4'}>
+        <h3 className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/60">Room Status</h3>
+        <div className="mt-3 grid grid-cols-2 gap-2">
+          {[
+            { label: 'Members', value: String(memberAgents.length), tone: 'text-text' },
+            { label: 'Active', value: String(streamingAgents.size), tone: 'text-sky-400' },
+            { label: 'Pinned', value: String(pinnedMessages.length), tone: 'text-amber-400' },
+            { label: 'Muted', value: String(mutedCount), tone: 'text-rose-400' },
+          ].map((item) => (
+            <div key={item.label} className="rounded-[10px] border border-white/[0.06] bg-white/[0.02] px-3 py-2.5">
+              <div className={`text-[18px] font-display font-700 tracking-[-0.02em] ${item.tone}`}>{item.value}</div>
+              <div className="mt-0.5 text-[10px] uppercase tracking-[0.08em] text-text-3/50">{item.label}</div>
+            </div>
+          ))}
+        </div>
+        <div className="mt-3 space-y-1 text-[11px] text-text-3/65">
+          <div>Mode: {chatroom.chatMode === 'parallel' ? 'Parallel replies' : 'Sequential replies'}</div>
+          <div>Auto-address: {chatroom.autoAddress ? 'Enabled' : 'Off'}</div>
+          <div>Admins: {adminCount}</div>
+        </div>
       </div>
 
-      {/* Pinned messages bar */}
-      {pinnedMessages.length > 0 && (
-        <div className="border-b border-white/[0.06] shrink-0">
-          <button
-            onClick={() => setPinsExpanded(!pinsExpanded)}
-            className="w-full flex items-center gap-2 px-4 py-2 hover:bg-white/[0.02] transition-colors cursor-pointer bg-transparent border-none text-left"
-            style={{ fontFamily: 'inherit' }}
-          >
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-amber-400 shrink-0">
-              <path d="M12 17v5" />
-              <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16h14v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 2-2H6a2 2 0 0 0 2 2 1 1 0 0 1 1 1z" />
-            </svg>
-            <span className="text-[12px] font-500 text-text-2">{pinnedMessages.length} pinned</span>
-            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={`text-text-3 transition-transform ${pinsExpanded ? 'rotate-180' : ''}`}>
-              <polyline points="6 9 12 15 18 9" />
-            </svg>
-          </button>
-          {pinsExpanded && (
-            <div className="px-4 pb-2 flex flex-col gap-1">
-              {pinnedMessages.map((pm) => (
+      <div className={compact ? 'space-y-4' : 'flex-1 overflow-y-auto px-4 py-4 space-y-4'}>
+        <section>
+          <div className="mb-2 flex items-center justify-between">
+            <h4 className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/60">Members</h4>
+            <span className="text-[11px] text-text-3/40">{memberAgents.length}</span>
+          </div>
+          <div className="space-y-2">
+            {memberAgents.map((agent) => {
+              const role = getMemberRole(chatroom, agent.id)
+              const muted = isAgentMuted(chatroom, agent.id)
+              return (
                 <button
-                  key={pm.id}
-                  onClick={() => {
-                    const el = document.getElementById(`chatroom-msg-${pm.id}`)
-                    if (el) {
-                      el.scrollIntoView({ behavior: 'smooth', block: 'center' })
-                      el.classList.add('bg-accent-soft/20')
-                      setTimeout(() => el.classList.remove('bg-accent-soft/20'), 2000)
-                    }
-                  }}
-                  className="flex items-center gap-2 px-2 py-1.5 rounded-[8px] hover:bg-white/[0.04] transition-colors cursor-pointer bg-transparent border-none text-left w-full"
+                  key={agent.id}
+                  onClick={() => navigateToAgent(agent.id)}
+                  className="w-full rounded-[12px] border border-white/[0.06] bg-white/[0.02] px-3 py-2.5 text-left hover:bg-white/[0.05] transition-all cursor-pointer"
                   style={{ fontFamily: 'inherit' }}
                 >
-                  <span className="text-[11px] font-600 text-accent-bright shrink-0">{pm.senderName}</span>
-                  <span className="text-[11px] text-text-3 truncate flex-1">{pm.text.slice(0, 80)}</span>
+                  <div className="flex items-center gap-3">
+                    <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={26} status={streamingAgents.has(agent.id) ? 'busy' : 'online'} />
+                    <div className="min-w-0 flex-1">
+                      <div className="truncate text-[12px] font-600 text-text">{agent.name}</div>
+                      <div className="mt-1 flex flex-wrap gap-1.5">
+                        <span className="rounded-[5px] bg-white/[0.04] px-1.5 py-0.5 text-[10px] font-700 uppercase tracking-[0.08em] text-text-3/70">
+                          {role}
+                        </span>
+                        {muted && (
+                          <span className="rounded-[5px] bg-rose-500/10 px-1.5 py-0.5 text-[10px] font-700 uppercase tracking-[0.08em] text-rose-400">
+                            Muted
+                          </span>
+                        )}
+                        {streamingAgents.has(agent.id) && (
+                          <span className="rounded-[5px] bg-sky-500/10 px-1.5 py-0.5 text-[10px] font-700 uppercase tracking-[0.08em] text-sky-400">
+                            Active
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
                 </button>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-
-      <AgentHeartbeatListeners agentIds={memberAgentIds} onPulse={handleHeartbeatPulse} />
+              )
+            })}
+          </div>
+        </section>
 
-      {/* Messages */}
-      <div ref={scrollRef} className="flex-1 overflow-y-auto py-3">
-        {chatroom.messages.length === 0 ? (
-          <div className="flex items-center justify-center h-full px-6">
-            <div className="text-center">
-              <p className="text-[13px] text-text-3 mb-1">No messages yet</p>
-              <p className="text-[12px] text-text-3/60">Use @AgentName to mention specific agents, or @all for everyone</p>
+        {pinnedMessages.length > 0 && (
+          <section>
+            <div className="mb-2 flex items-center justify-between">
+              <h4 className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/60">Pinned</h4>
+              <span className="text-[11px] text-text-3/40">{pinnedMessages.length}</span>
             </div>
-          </div>
-        ) : (
-          chatroom.messages.map((msg, i) => {
-            const prev = i > 0 ? chatroom.messages[i - 1] : null
-            const isGrouped = prev
-              ? prev.senderId === msg.senderId && (msg.time - prev.time) < GROUP_THRESHOLD_MS
-              : false
-            // Day separator: show when the date changes between messages
-            const prevDay = prev ? new Date(prev.time).toDateString() : null
-            const msgDay = new Date(msg.time).toDateString()
-            const showDaySep = !prev || prevDay !== msgDay
-
-            // Moment overlay — show on the last message from each agent that has an active moment
-            const senderId = msg.senderId
-            const moment = agentMoments[senderId]
-            const isLastFromSender = !chatroom.messages.slice(i + 1).some((m) => m.senderId === senderId)
-            let momentOverlay: React.ReactNode = null
-            if (moment && isLastFromSender && senderId !== 'user' && senderId !== 'system') {
-              if (moment.kind === 'heartbeat') {
-                momentOverlay = <HeartbeatMoment onDismiss={() => clearAgentMoment(senderId)} />
-              } else {
-                momentOverlay = (
-                  <ActivityMoment
-                    key={`${moment.name}-${senderId}`}
-                    toolName={moment.name}
-                    toolInput={moment.input}
-                    onDismiss={() => clearAgentMoment(senderId)}
-                  />
-                )
-              }
-            }
-
-            return (
-              <div key={msg.id}>
-                {showDaySep && (
-                  <div className="flex items-center gap-3 px-4 py-3">
-                    <div className="flex-1 h-px bg-white/[0.06]" />
-                    <span className="text-[10px] font-600 text-text-3 uppercase tracking-wider">{dayLabel(msg.time)}</span>
-                    <div className="flex-1 h-px bg-white/[0.06]" />
-                  </div>
-                )}
-                <ChatroomMessageBubble
-                  message={msg}
-                  agents={agents}
-                  onToggleReaction={toggleReaction}
-                  onReply={(m: ChatroomMessage) => setReplyingTo(m)}
-                  onTogglePin={togglePin}
-                  onTransfer={handleTransfer}
-                  onDeleteMessage={(messageId, targetAgentId) => deleteMessage(messageId, targetAgentId)}
-                  onMuteAgent={(agentId) => muteAgent(agentId)}
-                  onUnmuteAgent={(agentId) => unmuteAgent(agentId)}
-                  onSetRole={(agentId, role) => setMemberRole(agentId, role)}
-                  chatroom={chatroom}
-                  pinnedMessageIds={pinnedIds}
-                  streamingAgentIds={streamingAgentIds}
-                  messages={chatroom.messages}
-                  grouped={isGrouped && !showDaySep}
-                  momentOverlay={momentOverlay}
-                />
-              </div>
-            )
-          })
+            <div className="space-y-2">
+              {pinnedMessages.slice(0, compact ? pinnedMessages.length : 4).map((message) => (
+                <button
+                  key={message.id}
+                  onClick={() => onFocusMessage(message.id)}
+                  className="w-full rounded-[12px] border border-white/[0.06] bg-white/[0.02] px-3 py-2.5 text-left hover:bg-white/[0.05] transition-all cursor-pointer"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  <div className="text-[11px] font-700 text-accent-bright">{message.senderName}</div>
+                  <div className="mt-1 line-clamp-2 text-[12px] text-text-3">{message.text}</div>
+                </button>
+              ))}
+            </div>
+          </section>
         )}
-        <ChatroomTypingBar streamingAgents={streamingAgents} />
       </div>
-
-      {/* Input */}
-      <ChatroomInput
-        agents={memberAgents}
-        onSend={sendMessage}
-        disabled={streaming}
-      />
     </div>
   )
 }