@swarmclawai/swarmclaw 0.5.3 → 0.6.2

package/src/components/chatrooms/reaction-picker.tsx

@@ -0,0 +1,273 @@
+'use client'
+
+import { useState, useEffect, useRef, useMemo } from 'react'
+
+const CATEGORIES: Array<{ id: string; label: string; icon: string; emojis: string[] }> = [
+  {
+    id: 'frequent',
+    label: 'Frequently Used',
+    icon: '🕐',
+    emojis: ['👍', '❤️', '😂', '🔥', '🎉', '👀', '🚀', '✅', '💯', '🤔'],
+  },
+  {
+    id: 'smileys',
+    label: 'Smileys & People',
+    icon: '😀',
+    emojis: [
+      '😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '😊',
+      '😇', '🥰', '😍', '🤩', '😘', '😗', '😚', '😙', '🥲', '😋',
+      '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🫢', '🤫', '🤔',
+      '🫡', '🤐', '🤨', '😐', '😑', '😶', '🫥', '😏', '😒', '🙄',
+      '😬', '🤥', '🫨', '😌', '😔', '😪', '🤤', '😴', '😷', '🤒',
+      '🤕', '🤢', '🤮', '🥴', '😵', '🤯', '🥳', '🥸', '😎', '🤓',
+      '🧐', '😕', '🫤', '😟', '🙁', '😮', '😯', '😲', '😳', '🥺',
+      '🥹', '😦', '😧', '😨', '😰', '😥', '😢', '😭', '😱', '😖',
+      '😣', '😞', '😓', '😩', '😫', '🥱', '😤', '😡', '😠', '🤬',
+      '😈', '👿', '💀', '☠️', '💩', '🤡', '👹', '👺', '👻', '👽',
+      '🤖', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '😿', '😾',
+      '🙈', '🙉', '🙊', '👋', '🤚', '🖐️', '✋', '🖖', '🫱', '🫲',
+      '🫳', '🫴', '👌', '🤌', '🤏', '✌️', '🤞', '🫰', '🤟', '🤘',
+      '🤙', '👈', '👉', '👆', '🖕', '👇', '☝️', '🫵', '👍', '👎',
+      '✊', '👊', '🤛', '🤜', '👏', '🙌', '🫶', '👐', '🤲', '🤝',
+      '🙏', '✍️', '💪', '🦾', '🧠', '👀', '👁️', '👅', '👄', '🫦',
+    ],
+  },
+  {
+    id: 'nature',
+    label: 'Animals & Nature',
+    icon: '🐶',
+    emojis: [
+      '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐻‍❄️', '🐨',
+      '🐯', '🦁', '🐮', '🐷', '🐸', '🐵', '🐔', '🐧', '🐦', '🐤',
+      '🦆', '🦅', '🦉', '🦇', '🐺', '🐗', '🐴', '🦄', '🐝', '🪱',
+      '🐛', '🦋', '🐌', '🐞', '🐜', '🪲', '🪳', '🕷️', '🦂', '🐢',
+      '🐍', '🦎', '🐙', '🦑', '🦐', '🦞', '🦀', '🐡', '🐠', '🐟',
+      '🐬', '🐳', '🐋', '🦈', '🪸', '🐊', '🐅', '🐆', '🦓', '🦍',
+      '🐘', '🦛', '🦏', '🐪', '🐫', '🦒', '🦘', '🦬', '🐃', '🐂',
+      '🐄', '🐎', '🐖', '🐏', '🐑', '🦙', '🐐', '🦌', '🐕', '🐩',
+      '🌵', '🎄', '🌲', '🌳', '🌴', '🪵', '🌱', '🌿', '☘️', '🍀',
+      '🍁', '🍂', '🍃', '🪹', '🪺', '🌺', '🌻', '🌹', '🥀', '🌷',
+      '🌼', '🌸', '💐', '🍄', '🌰', '🎃', '🌍', '🌙', '⭐', '🌟',
+      '💫', '✨', '⚡', '☀️', '🌤️', '🌈', '☁️', '🌧️', '❄️', '🔥',
+    ],
+  },
+  {
+    id: 'food',
+    label: 'Food & Drink',
+    icon: '🍕',
+    emojis: [
+      '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🫐', '🍈',
+      '🍒', '🍑', '🥭', '🍍', '🥥', '🥝', '🍅', '🥑', '🍆', '🥦',
+      '🥬', '🥒', '🌶️', '🫑', '🌽', '🥕', '🧄', '🧅', '🥔', '🍠',
+      '🥐', '🍞', '🥖', '🥨', '🧀', '🥚', '🍳', '🥞', '🧇', '🥓',
+      '🥩', '🍗', '🍖', '🌭', '🍔', '🍟', '🍕', '🫓', '🥪', '🥙',
+      '🧆', '🌮', '🌯', '🫔', '🥗', '🍝', '🍜', '🍲', '🍛', '🍣',
+      '🍱', '🥟', '🍤', '🍙', '🍚', '🍘', '🍥', '🥠', '🥮', '🍡',
+      '🍧', '🍨', '🍦', '🥧', '🧁', '🍰', '🎂', '🍮', '🍭', '🍬',
+      '🍫', '🍿', '🧈', '🥤', '☕', '🍵', '🧃', '🧉', '🍶', '🍺',
+      '🍻', '🥂', '🍷', '🍸', '🍹', '🍾', '🧊', '🥄', '🍴', '🥢',
+    ],
+  },
+  {
+    id: 'activity',
+    label: 'Activities',
+    icon: '⚽',
+    emojis: [
+      '⚽', '🏀', '🏈', '⚾', '🥎', '🎾', '🏐', '🏉', '🥏', '🎱',
+      '🏓', '🏸', '🏒', '🥊', '🥋', '🥅', '⛳', '⛸️', '🎣', '🤿',
+      '🎿', '🛷', '🥌', '🎯', '🪀', '🪁', '🎮', '🕹️', '🎰', '🧩',
+      '♟️', '🎲', '🎭', '🎨', '🎬', '🎤', '🎧', '🎼', '🎹', '🥁',
+      '🎷', '🎺', '🪗', '🎸', '🎻', '🎪', '🎫', '🎟️', '🏆', '🥇',
+      '🥈', '🥉', '🏅', '🎖️', '🏵️', '🎗️', '🎁', '🎀', '🎈', '🎊',
+    ],
+  },
+  {
+    id: 'travel',
+    label: 'Travel & Places',
+    icon: '✈️',
+    emojis: [
+      '🚗', '🚕', '🚙', '🚌', '🚎', '🏎️', '🚓', '🚑', '🚒', '🚐',
+      '🛻', '🚚', '🚛', '🚜', '🏍️', '🛵', '🚲', '🛴', '🛺', '🚔',
+      '🚍', '🚘', '🚖', '✈️', '🚀', '🛸', '🚁', '🛶', '⛵', '🚢',
+      '🏠', '🏡', '🏘️', '🏢', '🏣', '🏥', '🏦', '🏪', '🏫', '🏩',
+      '💒', '🏛️', '⛪', '🕌', '🛕', '🕍', '⛩️', '🏰', '🏯', '🗼',
+      '🗽', '🗿', '🏟️', '🎡', '🎢', '🎠', '⛲', '⛱️', '🏖️', '🏝️',
+      '🏔️', '🗻', '🌋', '🏕️', '🛤️', '🛣️', '🌅', '🌄', '🌃', '🌉',
+    ],
+  },
+  {
+    id: 'objects',
+    label: 'Objects',
+    icon: '💡',
+    emojis: [
+      '⌚', '📱', '💻', '⌨️', '🖥️', '🖨️', '🖱️', '🖲️', '💽', '💾',
+      '💿', '📀', '🎥', '📷', '📸', '📹', '📼', '🔍', '🔎', '🕯️',
+      '💡', '🔦', '🏮', '🪔', '📔', '📕', '📖', '📗', '📘', '📙',
+      '📚', '📓', '📒', '📃', '📜', '📄', '📰', '📑', '🔖', '💰',
+      '🪙', '💴', '💵', '💶', '💷', '💸', '💳', '✉️', '📧', '📨',
+      '📩', '📤', '📥', '📦', '📫', '📪', '📬', '📭', '📮', '🗳️',
+      '✏️', '✒️', '🖋️', '🖊️', '🖌️', '🖍️', '📝', '📁', '📂', '🗂️',
+      '📅', '📆', '📇', '📈', '📉', '📊', '📋', '📌', '📍', '📎',
+      '🔐', '🔑', '🗝️', '🔨', '🪓', '⛏️', '⚒️', '🛠️', '🗡️', '⚔️',
+      '🔧', '🪛', '🔩', '⚙️', '🗜️', '⚖️', '🦯', '🔗', '⛓️', '🪝',
+    ],
+  },
+  {
+    id: 'symbols',
+    label: 'Symbols',
+    icon: '❤️',
+    emojis: [
+      '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔',
+      '❤️‍🔥', '❤️‍🩹', '❣️', '💕', '💞', '💓', '💗', '💖', '💘', '💝',
+      '💟', '☮️', '✝️', '☪️', '🕉️', '☸️', '✡️', '🔯', '🕎', '☯️',
+      '♈', '♉', '♊', '♋', '♌', '♍', '♎', '♏', '♐', '♑',
+      '♒', '♓', '⛎', '🔀', '🔁', '🔂', '▶️', '⏩', '⏭️', '⏯️',
+      '◀️', '⏪', '⏮️', '🔼', '⏫', '🔽', '⏬', '⏸️', '⏹️', '⏺️',
+      '⏏️', '🎦', '🔅', '🔆', '📶', '🛜', '📳', '📴', '♀️', '♂️',
+      '⚧️', '✖️', '➕', '➖', '➗', '🟰', '♾️', '‼️', '⁉️', '❓',
+      '❔', '❕', '❗', '〰️', '💱', '💲', '⚕️', '♻️', '⚜️', '🔱',
+      '✔️', '☑️', '✅', '❌', '❎', '➰', '➿', '〽️', '✳️', '✴️',
+      '❇️', '©️', '®️', '™️', '#️⃣', '*️⃣', '0️⃣', '1️⃣', '2️⃣', '3️⃣',
+      '🔴', '🟠', '🟡', '🟢', '🔵', '🟣', '⚫', '⚪', '🟤', '🔶',
+      '🔷', '🔸', '🔹', '🔺', '🔻', '💠', '🔘', '🔳', '🔲', '🏁',
+      '🚩', '🎌', '🏴', '🏳️', '🏳️‍🌈', '🏳️‍⚧️', '🏴‍☠️', '🇺🇸', '🇬🇧', '🇯🇵',
+    ],
+  },
+]
+
+interface Props {
+  onSelect: (emoji: string) => void
+  onClose: () => void
+}
+
+export function ReactionPicker({ onSelect, onClose }: Props) {
+  const ref = useRef<HTMLDivElement>(null)
+  const searchRef = useRef<HTMLInputElement>(null)
+  const [search, setSearch] = useState('')
+  const [activeCategory, setActiveCategory] = useState('frequent')
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        onClose()
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [onClose])
+
+  // Auto-focus search on open
+  useEffect(() => {
+    setTimeout(() => searchRef.current?.focus(), 50)
+  }, [])
+
+  const filteredEmojis = useMemo(() => {
+    if (!search.trim()) return null
+    const q = search.toLowerCase()
+    // Simple search: match against category names or just return all emojis that are visible
+    const results: string[] = []
+    const seen = new Set<string>()
+    for (const cat of CATEGORIES) {
+      if (cat.id === 'frequent') continue
+      for (const emoji of cat.emojis) {
+        if (!seen.has(emoji)) {
+          seen.add(emoji)
+          results.push(emoji)
+        }
+      }
+    }
+    // For basic emoji search, filter by category label matching
+    // Since emoji don't have text names in this simple implementation,
+    // we filter categories that match and show all their emojis
+    const matchingCats = CATEGORIES.filter(
+      (c) => c.id !== 'frequent' && c.label.toLowerCase().includes(q)
+    )
+    if (matchingCats.length > 0) {
+      const catResults: string[] = []
+      const catSeen = new Set<string>()
+      for (const cat of matchingCats) {
+        for (const emoji of cat.emojis) {
+          if (!catSeen.has(emoji)) {
+            catSeen.add(emoji)
+            catResults.push(emoji)
+          }
+        }
+      }
+      return catResults
+    }
+    // If no category match, just return all emojis (user can visually scan)
+    return results
+  }, [search])
+
+  return (
+    <div
+      ref={ref}
+      className="absolute right-0 bottom-8 z-50 bg-[#13131e] border border-white/[0.1] rounded-[12px] shadow-[0_8px_40px_rgba(0,0,0,0.6)] w-[320px] flex flex-col overflow-hidden"
+      style={{ animation: 'msg-in 0.15s ease-out both' }}
+    >
+      {/* Search */}
+      <div className="px-3 pt-3 pb-2">
+        <input
+          ref={searchRef}
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search emoji..."
+          className="w-full px-2.5 py-1.5 rounded-[8px] bg-white/[0.06] border border-white/[0.08] text-[12px] text-text placeholder:text-text-3 focus:outline-none focus:border-accent-bright/40"
+        />
+      </div>
+
+      {/* Category tabs */}
+      {!search.trim() && (
+        <div className="flex px-2 gap-0.5 pb-1">
+          {CATEGORIES.map((cat) => (
+            <button
+              key={cat.id}
+              onClick={() => setActiveCategory(cat.id)}
+              title={cat.label}
+              className={`flex-1 py-1 flex items-center justify-center rounded-[6px] text-[14px] cursor-pointer transition-all ${
+                activeCategory === cat.id ? 'bg-white/[0.08]' : 'hover:bg-white/[0.04]'
+              }`}
+            >
+              {cat.icon}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Emoji grid */}
+      <div className="px-2 pb-2 max-h-[220px] overflow-y-auto">
+        {search.trim() ? (
+          <div className="grid grid-cols-8 gap-0.5">
+            {filteredEmojis?.map((emoji, i) => (
+              <button
+                key={`${emoji}-${i}`}
+                onClick={() => onSelect(emoji)}
+                className="w-[34px] h-[34px] flex items-center justify-center rounded-[6px] hover:bg-white/[0.08] transition-all cursor-pointer text-[18px]"
+              >
+                {emoji}
+              </button>
+            ))}
+          </div>
+        ) : (
+          CATEGORIES.filter((c) => c.id === activeCategory).map((cat) => (
+            <div key={cat.id}>
+              <div className="text-[10px] font-600 text-text-3 uppercase tracking-wider px-1 py-1.5">{cat.label}</div>
+              <div className="grid grid-cols-8 gap-0.5">
+                {cat.emojis.map((emoji, i) => (
+                  <button
+                    key={`${emoji}-${i}`}
+                    onClick={() => onSelect(emoji)}
+                    className="w-[34px] h-[34px] flex items-center justify-center rounded-[6px] hover:bg-white/[0.08] transition-all cursor-pointer text-[18px]"
+                  >
+                    {emoji}
+                  </button>
+                ))}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/connectors/connector-list.tsx

@@ -2,27 +2,40 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { useChatroomStore } from '@/stores/use-chatroom-store'
 import { useWs } from '@/hooks/use-ws'
 import { api } from '@/lib/api-client'
 import type { Connector } from '@/types'
-import { ConnectorPlatformBadge, getConnectorPlatformLabel } from '@/components/shared/connector-platform-icon'
+import { ConnectorPlatformIcon, ConnectorPlatformBadge, CONNECTOR_PLATFORM_META, getConnectorPlatformLabel } from '@/components/shared/connector-platform-icon'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 
-export function ConnectorList({ inSidebar: _inSidebar }: { inSidebar?: boolean }) {
-  void _inSidebar
+function relativeTime(ts: number): string {
+  const diff = Date.now() - ts
+  if (diff < 60_000) return 'just now'
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`
+  const d = new Date(ts)
+  return d.toLocaleDateString([], { month: 'short', day: 'numeric' })
+}
+
+export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
   const connectors = useAppStore((s) => s.connectors)
   const loadConnectors = useAppStore((s) => s.loadConnectors)
   const setConnectorSheetOpen = useAppStore((s) => s.setConnectorSheetOpen)
   const setEditingConnectorId = useAppStore((s) => s.setEditingConnectorId)
   const agents = useAppStore((s) => s.agents)
   const loadAgents = useAppStore((s) => s.loadAgents)
+  const chatrooms = useChatroomStore((s) => s.chatrooms)
+  const loadChatrooms = useChatroomStore((s) => s.loadChatrooms)
   const [toggling, setToggling] = useState<string | null>(null)
   const [reconnecting, setReconnecting] = useState<string | null>(null)
   const [loaded, setLoaded] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
   const refresh = useCallback(async () => {
-    await Promise.all([loadConnectors(), loadAgents()])
+    await Promise.all([loadConnectors(), loadAgents(), loadChatrooms()])
     setLoaded(true)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [loadConnectors, loadAgents])
 
   useEffect(() => { void refresh() }, [refresh])
@@ -55,7 +68,6 @@ export function ConnectorList({ inSidebar: _inSidebar }: { inSidebar?: boolean }
     setReconnecting(c.id)
     setError(null)
     try {
-      // Stop then start to reconnect
       try { await api('PUT', `/connectors/${c.id}`, { action: 'stop' }) } catch { /* may already be stopped */ }
       await api('PUT', `/connectors/${c.id}`, { action: 'start' })
       await refresh()
@@ -92,104 +104,170 @@ export function ConnectorList({ inSidebar: _inSidebar }: { inSidebar?: boolean }
     )
   }
 
+  // Sidebar: compact list layout
+  if (inSidebar) {
+    return (
+      <div className="flex-1 overflow-y-auto pb-20">
+        {error && (
+          <div className="mx-4 mt-2 mb-1 px-3 py-2 rounded-[8px] bg-red-500/10 border border-red-500/20 text-red-400 text-[11px] leading-snug">
+            {error}
+          </div>
+        )}
+        {list.map((c) => {
+          const agent = c.agentId ? agents[c.agentId] : null
+          const chatroom = c.chatroomId ? chatrooms[c.chatroomId] : null
+          const isRunning = c.status === 'running'
+          const meta = CONNECTOR_PLATFORM_META[c.platform]
+          return (
+            <button
+              key={c.id}
+              onClick={() => { setEditingConnectorId(c.id); setConnectorSheetOpen(true) }}
+              className="w-full flex items-center gap-3 px-5 py-2.5 hover:bg-white/[0.02] transition-colors cursor-pointer bg-transparent border-none text-left"
+            >
+              <ConnectorPlatformIcon platform={c.platform} size={16} />
+              <div className="flex-1 min-w-0">
+                <span className="text-[13px] font-600 text-text truncate block">{c.name}</span>
+                <span className="text-[11px] text-text-3 truncate block">
+                  {chatroom ? chatroom.name : agent?.name || meta?.label}
+                </span>
+              </div>
+              <span className={`shrink-0 w-2 h-2 rounded-full ${
+                isRunning ? 'bg-green-400' : c.status === 'error' ? 'bg-red-400' : 'bg-white/20'
+              }`} />
+            </button>
+          )
+        })}
+      </div>
+    )
+  }
+
+  // Main view: card grid
   return (
-    <div className="flex-1 overflow-y-auto pb-20">
+    <div className="flex-1 overflow-y-auto pb-20 px-5 pt-2">
       {error && (
-        <div className="mx-4 mt-2 mb-1 px-3 py-2 rounded-[8px] bg-red-500/10 border border-red-500/20 text-red-400 text-[11px] leading-snug">
+        <div className="mb-3 px-3 py-2 rounded-[8px] bg-red-500/10 border border-red-500/20 text-red-400 text-[11px] leading-snug">
           {error}
         </div>
       )}
-      {list.map((c) => {
-        const platformLabel = getConnectorPlatformLabel(c.platform)
-        const agent = agents[c.agentId]
-        const isRunning = c.status === 'running'
-        const isToggling = toggling === c.id
-        // Can only toggle if connector has credentials (or uses non-token auth modes).
-        const hasCredentials = c.platform === 'whatsapp'
-          || c.platform === 'openclaw'
-          || c.platform === 'signal'
-          || (c.platform === 'bluebubbles' && (!!c.credentialId || !!c.config?.password))
-          || !!c.credentialId
-        return (
-          <div
-            key={c.id}
-            className="w-full flex items-center gap-3 px-5 py-3 hover:bg-white/[0.02] transition-colors group"
-          >
-            {/* Clickable area — opens editor */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+        {list.map((c) => {
+          const platformLabel = getConnectorPlatformLabel(c.platform)
+          const agent = c.agentId ? agents[c.agentId] : null
+          const chatroom = c.chatroomId ? chatrooms[c.chatroomId] : null
+          const isRunning = c.status === 'running'
+          const isToggling = toggling === c.id
+          const hasCredentials = c.platform === 'whatsapp'
+            || c.platform === 'openclaw'
+            || c.platform === 'signal'
+            || (c.platform === 'bluebubbles' && (!!c.credentialId || !!c.config?.password))
+            || !!c.credentialId
+          const lastMsg = c.presence?.lastMessageAt
+
+          return (
             <button
+              key={c.id}
               onClick={() => { setEditingConnectorId(c.id); setConnectorSheetOpen(true) }}
-              className="flex items-center gap-3 flex-1 min-w-0 cursor-pointer bg-transparent border-none text-left p-0"
+              className="group relative flex flex-col rounded-[14px] border border-white/[0.06] bg-surface p-4 cursor-pointer transition-all hover:border-white/[0.12] hover:bg-white/[0.02] text-left w-full"
+              style={{ fontFamily: 'inherit' }}
             >
-              <ConnectorPlatformBadge platform={c.platform} size={36} iconSize={16} />
+              {/* Header: platform badge + status */}
+              <div className="flex items-center gap-3 mb-3">
+                <ConnectorPlatformBadge platform={c.platform} size={40} iconSize={20} roundedClassName="rounded-[10px]" />
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-[14px] font-600 text-text truncate">{c.name}</span>
+                    <span className={`shrink-0 w-2 h-2 rounded-full ${
+                      isRunning ? 'bg-green-400' : c.status === 'error' ? 'bg-red-400' : 'bg-white/20'
+                    }`} />
+                  </div>
+                  <span className="text-[11px] text-text-3 block">
+                    {isRunning ? 'Connected' : c.status === 'error' ? 'Error' : 'Stopped'}
+                    {c.qrDataUrl && ' · QR ready'}
+                  </span>
+                </div>
+              </div>
 
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <span className="text-[13px] font-600 text-text truncate">{c.name}</span>
-                  <span
-                    className={`shrink-0 w-2 h-2 rounded-full ${
-                      isRunning ? 'bg-green-400' :
-                      c.status === 'error' ? 'bg-red-400' : 'bg-white/20'
-                    }`}
-                  />
-                  {c.qrDataUrl && (
-                    <span className="shrink-0 text-[10px] font-600 uppercase tracking-wider text-violet-400/80 bg-violet-400/[0.08] px-1.5 py-0.5 rounded-[5px]">
-                      QR Ready
-                    </span>
+              {/* Route target: agent or chatroom */}
+              <div className="flex items-center gap-2.5 mb-2.5 px-0.5">
+                {chatroom ? (
+                  <>
+                    <div className="w-6 h-6 rounded-full bg-white/[0.06] flex items-center justify-center shrink-0">
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3">
+                        <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">
+                      <span className="text-[12px] font-600 text-text-2 block truncate">{chatroom.name}</span>
+                      <span className="text-[10px] text-text-3/60 block">
+                        {chatroom.agentIds.length} agent{chatroom.agentIds.length !== 1 ? 's' : ''}
+                        {chatroom.chatMode === 'parallel' ? ' · parallel' : ' · sequential'}
+                      </span>
+                    </div>
+                  </>
+                ) : agent ? (
+                  <>
+                    <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={24} />
+                    <div className="flex-1 min-w-0">
+                      <span className="text-[12px] font-600 text-text-2 block truncate">{agent.name}</span>
+                      <span className="text-[10px] text-text-3/60 block">{agent.provider}/{agent.model}</span>
+                    </div>
+                  </>
+                ) : (
+                  <span className="text-[11px] text-text-3/50">{platformLabel}</span>
+                )}
+              </div>
+
+              {/* Footer: last message time + error */}
+              <div className="flex items-center gap-2 mt-auto pt-2 border-t border-white/[0.04]">
+                {c.lastError ? (
+                  <span className="text-[10px] text-red-400 truncate flex-1">
+                    {c.lastError.slice(0, 50)}{c.lastError.length > 50 ? '...' : ''}
+                  </span>
+                ) : lastMsg ? (
+                  <span className="text-[10px] text-text-3/60 flex-1">Last message {relativeTime(lastMsg)}</span>
+                ) : (
+                  <span className="text-[10px] text-text-3/40 flex-1">No messages yet</span>
+                )}
+
+                {/* Action buttons */}
+                <div className="flex gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
+                  {c.status === 'error' && hasCredentials && (
+                    <button
+                      onClick={(e) => handleReconnect(e, c)}
+                      disabled={reconnecting === c.id}
+                      title="Reconnect"
+                      className="px-2 py-1 rounded-[6px] text-[10px] font-600 transition-all cursor-pointer border-none opacity-0 group-hover:opacity-100 bg-amber-500/10 text-amber-400 hover:bg-amber-500/20 disabled:opacity-50"
+                    >
+                      {reconnecting === c.id ? '...' : 'Reconnect'}
+                    </button>
+                  )}
+                  {hasCredentials && (
+                    <button
+                      onClick={(e) => handleToggle(e, c)}
+                      disabled={isToggling}
+                      title={isRunning ? 'Stop' : 'Start'}
+                      className={`w-7 h-7 rounded-[6px] flex items-center justify-center transition-all cursor-pointer border-none ${
+                        isToggling ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                      } ${isRunning
+                        ? 'bg-red-500/10 text-red-400 hover:bg-red-500/20'
+                        : 'bg-green-500/10 text-green-400 hover:bg-green-500/20'
+                      } disabled:opacity-50`}
+                    >
+                      {isToggling ? (
+                        <span className="w-3 h-3 rounded-full border-2 border-current border-t-transparent animate-spin" />
+                      ) : isRunning ? (
+                        <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="2" /></svg>
+                      ) : (
+                        <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><polygon points="6,3 21,12 6,21" /></svg>
+                      )}
+                    </button>
                   )}
-                </div>
-                <div className="text-[11px] text-text-3 truncate">
-                  {c.lastError
-                    ? <span className="text-red-400">{c.lastError.slice(0, 60)}{c.lastError.length > 60 ? '...' : ''}</span>
-                    : <>{platformLabel} {agent ? `\u2192 ${agent.name}` : ''}</>
-                  }
                 </div>
               </div>
             </button>
-
-            {/* Reconnect button for error-state connectors */}
-            {c.status === 'error' && hasCredentials && (
-              <button
-                onClick={(e) => handleReconnect(e, c)}
-                disabled={reconnecting === c.id}
-                title="Reconnect"
-                aria-label="Reconnect connector"
-                className={`shrink-0 px-2.5 py-1.5 rounded-[8px] text-[11px] font-600 transition-all cursor-pointer border-none
-                  ${reconnecting === c.id ? 'opacity-50' : 'opacity-0 group-hover:opacity-100 focus:opacity-100'}
-                  bg-amber-500/10 text-amber-400 hover:bg-amber-500/20`}
-              >
-                {reconnecting === c.id ? '...' : 'Reconnect'}
-              </button>
-            )}
-
-            {/* Toggle button — visible on hover, only if connector has credentials */}
-            {hasCredentials && <button
-              onClick={(e) => handleToggle(e, c)}
-              disabled={isToggling}
-              title={isRunning ? 'Stop connector' : 'Start connector'}
-              aria-label={isRunning ? 'Stop connector' : 'Start connector'}
-              className={`shrink-0 w-8 h-8 rounded-[8px] flex items-center justify-center transition-all cursor-pointer border-none ${
-                isToggling ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 focus:opacity-100'
-              } ${
-                isRunning
-                  ? 'bg-red-500/10 text-red-400 hover:bg-red-500/20'
-                  : 'bg-green-500/10 text-green-400 hover:bg-green-500/20'
-              } disabled:opacity-50`}
-            >
-              {isToggling ? (
-                <span className="w-3 h-3 rounded-full border-2 border-current border-t-transparent animate-spin" />
-              ) : isRunning ? (
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
-                  <rect x="4" y="4" width="16" height="16" rx="2" />
-                </svg>
-              ) : (
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
-                  <polygon points="6,3 21,12 6,21" />
-                </svg>
-              )}
-            </button>}
-          </div>
-        )
-      })}
+          )
+        })}
+      </div>
     </div>
   )
 }