memhouse 0.0.1 → 0.3.0

package/ui/src/pages/RelayDashboard.jsx

@@ -0,0 +1,590 @@
+import { useState, useEffect, useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Users, Search, Merge, MessageSquare, FolderOpen, ChevronDown, ChevronRight } from 'lucide-react'
+import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement } from 'chart.js'
+import { Doughnut, Bar } from 'react-chartjs-2'
+import KpiCard from '../components/KpiCard'
+import EditorIcon from '../components/EditorIcon'
+import SectionTitle from '../components/SectionTitle'
+import ChatSidebar from '../components/ChatSidebar'
+import LiveFeed from '../components/LiveFeed'
+import { editorColor, editorLabel, formatNumber, formatDate } from '../lib/constants'
+import { fetchRelayTeamStats, fetchRelaySearch, fetchRelaySession, mergeRelayUsers } from '../lib/api'
+import AnimatedLoader from '../components/AnimatedLoader'
+import PageHeader from '../components/PageHeader'
+import { useTheme } from '../lib/theme'
+
+ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement)
+
+const MONO = 'JetBrains Mono, monospace'
+const MODEL_COLORS = ['#6366f1', '#a78bfa', '#818cf8', '#c084fc', '#e879f9', '#f472b6', '#fb7185', '#f87171', '#fbbf24', '#34d399']
+const USER_COLORS = ['#6366f1', '#8b5cf6', '#a855f7', '#c084fc', '#d8b4fe', '#e879f9', '#f472b6', '#fb7185']
+
+function ProportionBar({ segments, height = 6 }) {
+  const total = segments.reduce((s, seg) => s + seg.value, 0)
+  if (total === 0) return null
+  return (
+    <div className="flex w-full rounded-full overflow-hidden" style={{ height }}>
+      {segments.filter(s => s.value > 0).map((seg, i) => (
+        <div
+          key={i}
+          title={`${seg.label}: ${formatNumber(seg.value)}`}
+          className="h-full transition-all"
+          style={{ width: `${(seg.value / total * 100).toFixed(1)}%`, background: seg.color }}
+        />
+      ))}
+    </div>
+  )
+}
+
+// Left sidebar: team members grouped by project (folder-tree view)
+function TeamSidebar({ userList, userColorMap, selectedUser }) {
+  const [collapsed, setCollapsed] = useState(new Set())
+  const navigate = useNavigate()
+
+  // Build project → users mapping
+  const { projectGroups, ungrouped } = useMemo(() => {
+    const projMap = {}
+    const seen = new Set()
+    for (const u of userList) {
+      const projects = u.sharedProjects || []
+      if (projects.length === 0) {
+        seen.add(u.username)
+        continue
+      }
+      for (const p of projects) {
+        const name = typeof p === 'string' ? p : (p.name || p)
+        if (!projMap[name]) projMap[name] = []
+        projMap[name].push(u)
+        seen.add(u.username)
+      }
+    }
+    const ungrouped = userList.filter(u => !(u.sharedProjects?.length > 0))
+    const projectGroups = Object.entries(projMap).sort((a, b) => b[1].length - a[1].length)
+    return { projectGroups, ungrouped }
+  }, [userList])
+
+  const toggle = (key) => {
+    setCollapsed(prev => {
+      const next = new Set(prev)
+      next.has(key) ? next.delete(key) : next.add(key)
+      return next
+    })
+  }
+
+  const UserItem = ({ u }) => {
+    const idx = userList.indexOf(u)
+    const color = userColorMap[u.username] || '#6366f1'
+    const editorEntries = Object.entries(u.editors || {}).sort((a, b) => b[1] - a[1])
+    return (
+      <div
+        className="flex items-center gap-1.5 px-2 py-1.5 cursor-pointer transition rounded-sm"
+        style={{
+          background: selectedUser === u.username ? 'rgba(99,102,241,0.12)' : 'transparent',
+        }}
+        onMouseEnter={e => { if (selectedUser !== u.username) e.currentTarget.style.background = 'var(--c-bg3)' }}
+        onMouseLeave={e => { if (selectedUser !== u.username) e.currentTarget.style.background = 'transparent' }}
+        onClick={() => navigate(`/relay/user/${u.username}`)}
+      >
+        <div className="w-5 h-5 flex items-center justify-center text-[8px] font-bold rounded-sm flex-shrink-0" style={{ background: `${color}20`, color }}>
+          {u.username.charAt(0).toUpperCase()}
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="text-[11px] font-medium truncate" style={{ color: 'var(--c-white)' }}>{u.username}</div>
+          <div className="flex items-center gap-1 text-[8px]" style={{ color: 'var(--c-text3)' }}>
+            <span>{u.sessions}s</span>
+            <span>·</span>
+            <span>{formatNumber(u.totalMessages)}m</span>
+          </div>
+          {editorEntries.length > 0 && (
+            <div className="flex items-center gap-1 mt-0.5">
+              {editorEntries.slice(0, 4).map(([src]) => (
+                <EditorIcon key={src} source={src} size={9} />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center gap-2 px-3 py-2.5 shrink-0" style={{ borderBottom: '1px solid var(--c-border)' }}>
+        <Users size={12} style={{ color: 'var(--c-accent)' }} />
+        <span className="text-[12px] font-medium uppercase tracking-wider" style={{ color: 'var(--c-text2)' }}>Team</span>
+        <span className="text-[10px] ml-auto" style={{ color: 'var(--c-text3)' }}>{userList.length}</span>
+      </div>
+
+      <div className="flex-1 overflow-y-auto scrollbar-thin py-1">
+        {/* Project groups */}
+        {projectGroups.map(([proj, users]) => {
+          const isCollapsed = collapsed.has(proj)
+          const projName = proj.split('/').pop()
+          return (
+            <div key={proj}>
+              <div
+                className="flex items-center gap-1.5 px-2 py-1.5 cursor-pointer transition"
+                onMouseEnter={e => e.currentTarget.style.background = 'var(--c-bg3)'}
+                onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                onClick={() => toggle(proj)}
+              >
+                {isCollapsed ? <ChevronRight size={10} style={{ color: 'var(--c-text3)' }} /> : <ChevronDown size={10} style={{ color: 'var(--c-text3)' }} />}
+                <FolderOpen size={10} style={{ color: '#818cf8' }} />
+                <span className="text-[11px] font-medium truncate flex-1" style={{ color: 'var(--c-text2)' }} title={proj}>{projName}</span>
+                <span className="text-[8px]" style={{ color: 'var(--c-text3)' }}>{users.length}</span>
+              </div>
+              {!isCollapsed && (
+                <div className="pl-3">
+                  {users.map(u => <UserItem key={`${proj}-${u.username}`} u={u} />)}
+                </div>
+              )}
+            </div>
+          )
+        })}
+
+        {/* Ungrouped users */}
+        {ungrouped.length > 0 && (
+          <div>
+            {projectGroups.length > 0 && (
+              <div className="px-2 py-1.5 text-[10px] uppercase tracking-wider" style={{ color: 'var(--c-text3)' }}>
+                unassigned
+              </div>
+            )}
+            <div className={projectGroups.length > 0 ? 'pl-1' : ''}>
+              {ungrouped.map(u => <UserItem key={u.username} u={u} />)}
+            </div>
+          </div>
+        )}
+
+        {userList.length === 0 && (
+          <div className="text-[11px] py-6 text-center" style={{ color: 'var(--c-text3)' }}>
+            No team members yet
+          </div>
+        )}
+      </div>
+
+      {/* Merge section at bottom */}
+      {userList.length >= 2 && (
+        <MergeSection userList={userList} />
+      )}
+    </div>
+  )
+}
+
+function MergeSection({ userList }) {
+  const [mergeFrom, setMergeFrom] = useState('')
+  const [mergeTo, setMergeTo] = useState('')
+  const [merging, setMerging] = useState(false)
+  const [mergeResult, setMergeResult] = useState(null)
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="shrink-0 px-2 py-2" style={{ borderTop: '1px solid var(--c-border)' }}>
+      <div
+        className="flex items-center gap-1.5 cursor-pointer text-[10px] uppercase tracking-wider"
+        style={{ color: 'var(--c-text3)' }}
+        onClick={() => setOpen(!open)}
+      >
+        {open ? <ChevronDown size={9} /> : <ChevronRight size={9} />}
+        <Merge size={9} />
+        <span>merge users</span>
+      </div>
+      {open && (
+        <div className="mt-2 space-y-1.5">
+          <select
+            value={mergeFrom}
+            onChange={e => setMergeFrom(e.target.value)}
+            className="w-full text-[11px] px-1.5 py-1 outline-none rounded-sm"
+            style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
+          >
+            <option value="">from...</option>
+            {userList.filter(u => u.username !== mergeTo).map(u => (
+              <option key={u.username} value={u.username}>{u.username}</option>
+            ))}
+          </select>
+          <select
+            value={mergeTo}
+            onChange={e => setMergeTo(e.target.value)}
+            className="w-full text-[11px] px-1.5 py-1 outline-none rounded-sm"
+            style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
+          >
+            <option value="">into...</option>
+            {userList.filter(u => u.username !== mergeFrom).map(u => (
+              <option key={u.username} value={u.username}>{u.username}</option>
+            ))}
+          </select>
+          <button
+            disabled={!mergeFrom || !mergeTo || merging}
+            onClick={async () => {
+              if (!confirm(`Merge "${mergeFrom}" → "${mergeTo}"? Cannot undo.`)) return
+              setMerging(true)
+              setMergeResult(null)
+              try {
+                const r = await mergeRelayUsers(mergeFrom, mergeTo)
+                setMergeResult(r)
+                setMergeFrom('')
+                setMergeTo('')
+              } catch (err) {
+                setMergeResult({ error: err.message })
+              }
+              setMerging(false)
+            }}
+            className="w-full text-[11px] px-2 py-1 font-medium transition rounded-sm"
+            style={{
+              background: mergeFrom && mergeTo ? 'rgba(239,68,68,0.15)' : 'var(--c-bg3)',
+              color: mergeFrom && mergeTo ? '#ef4444' : 'var(--c-text3)',
+              border: '1px solid var(--c-border)',
+              cursor: !mergeFrom || !mergeTo || merging ? 'not-allowed' : 'pointer',
+              opacity: !mergeFrom || !mergeTo || merging ? 0.5 : 1,
+            }}
+          >
+            {merging ? 'Merging...' : 'Merge'}
+          </button>
+          {mergeResult && (
+            <div className="text-[10px]" style={{ color: mergeResult.error ? '#ef4444' : '#22c55e' }}>
+              {mergeResult.error ? `Error: ${mergeResult.error}` : 'Merged!'}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function RelayDashboard() {
+  const navigate = useNavigate()
+  const [stats, setStats] = useState(null)
+  const [search, setSearch] = useState('')
+  const [searchResults, setSearchResults] = useState(null)
+  const [searching, setSearching] = useState(false)
+  const [selectedChat, setSelectedChat] = useState(null)
+  const [selectedUsername, setSelectedUsername] = useState(null)
+  const { dark } = useTheme()
+
+  const legendColor = dark ? '#888' : '#555'
+  const gridColor = dark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.06)'
+  const txtDim = dark ? '#555' : '#999'
+  const txtColor = dark ? '#888' : '#555'
+
+  useEffect(() => {
+    fetchRelayTeamStats().then(setStats)
+    const iv = setInterval(() => fetchRelayTeamStats().then(setStats), 15000)
+    return () => clearInterval(iv)
+  }, [])
+
+  const handleSearch = async (e) => {
+    e.preventDefault()
+    if (!search.trim()) return
+    setSearching(true)
+    try {
+      const results = await fetchRelaySearch(search.trim(), { limit: 30 })
+      setSearchResults(results)
+    } catch { setSearchResults([]) }
+    setSearching(false)
+  }
+
+  const userList = stats?.users || []
+
+  // Stable color map for users (must be before early return to keep hooks order)
+  const userColorMap = useMemo(() => {
+    const map = {}
+    userList.forEach((u, i) => { map[u.username] = USER_COLORS[i % USER_COLORS.length] })
+    return map
+  }, [userList])
+
+  if (!stats) return <AnimatedLoader label="Loading relay data..." />
+
+  const editorData = stats.editors || []
+  const models = stats.topModels || []
+  const totalTok = (stats.totalInputTokens || 0) + (stats.totalOutputTokens || 0)
+  const msgsPerSession = stats.totalSessions > 0 ? (stats.totalMessages / stats.totalSessions).toFixed(1) : 0
+  const tokPerSession = stats.totalSessions > 0 ? Math.round(totalTok / stats.totalSessions) : 0
+  const maxUserSessions = userList.length > 0 ? Math.max(...userList.map(u => u.sessions)) : 1
+
+  const handleFeedClick = (chatId, username) => {
+    setSelectedChat(chatId)
+    setSelectedUsername(username)
+  }
+
+  const sidebarH = 'calc(100vh - 42px)'
+
+  return (
+    <div className="fade-in flex" style={{ height: sidebarH }}>
+      {/* ── Left sidebar: Team tree ── */}
+      <div
+        className="hidden lg:flex flex-col w-[250px] shrink-0 sticky top-[42px] self-start"
+        style={{ height: sidebarH, borderRight: '1px solid var(--c-border)', background: 'var(--c-bg)' }}
+      >
+        <TeamSidebar userList={userList} userColorMap={userColorMap} selectedUser={selectedUsername} onUserClick={u => navigate(`/relay/user/${u}`)} />
+      </div>
+
+      {/* ── Center: scrollable content ── */}
+      <div className="flex-1 min-w-0 overflow-y-auto p-4 space-y-3">
+        <PageHeader icon={Users} title="Team Relay" />
+
+        {/* KPIs */}
+        <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(90px, 1fr))' }}>
+          <KpiCard label="team members" value={stats.totalUsers} />
+          <KpiCard label="sessions" value={formatNumber(stats.totalSessions)} sub={`${msgsPerSession} msgs/session`} />
+          <KpiCard label="active users" value={stats.activeUsers} />
+          <KpiCard label="projects" value={stats.totalProjects} />
+          <KpiCard label="messages" value={formatNumber(stats.totalMessages)} />
+          <KpiCard label="tokens" value={formatNumber(totalTok)} sub={`${formatNumber(tokPerSession)}/session`} />
+        </div>
+
+        {/* Token overview */}
+        {totalTok > 0 && (
+          <div className="card p-3">
+            <div className="flex items-center justify-between mb-2">
+              <SectionTitle>team token usage</SectionTitle>
+              <span className="text-[11px] font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(totalTok)} total</span>
+            </div>
+            <ProportionBar height={10} segments={[
+              { label: 'Input', value: stats.totalInputTokens, color: '#6366f1' },
+              { label: 'Output', value: stats.totalOutputTokens, color: '#a78bfa' },
+            ]} />
+            <div className="flex items-center gap-4 mt-1.5 text-[10px]">
+              <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#6366f1' }} /> input {formatNumber(stats.totalInputTokens)}</span>
+              <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#a78bfa' }} /> output {formatNumber(stats.totalOutputTokens)}</span>
+            </div>
+            {userList.length > 1 && (
+              <div className="mt-3 pt-2" style={{ borderTop: '1px solid var(--c-border)' }}>
+                <div className="text-[10px] mb-1.5" style={{ color: 'var(--c-text3)' }}>per-user contribution</div>
+                <ProportionBar height={8} segments={userList.map(u => ({
+                  label: u.username,
+                  value: u.totalInputTokens + u.totalOutputTokens,
+                  color: userColorMap[u.username],
+                }))} />
+                <div className="flex flex-wrap gap-3 mt-1 text-[10px]">
+                  {userList.map(u => (
+                    <span key={u.username} className="flex items-center gap-1" style={{ color: 'var(--c-text3)' }}>
+                      <span className="w-2 h-2 rounded-sm" style={{ background: userColorMap[u.username] }} />
+                      {u.username}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Charts: editors + models + sessions per user */}
+        <div className="grid grid-cols-1 xl:grid-cols-3 gap-3">
+          {editorData.length > 0 && (
+            <div className="card p-3">
+              <SectionTitle>editors</SectionTitle>
+              <div style={{ height: 160 }}>
+                <Doughnut
+                  data={{
+                    labels: editorData.map(e => editorLabel(e.source)),
+                    datasets: [{ data: editorData.map(e => e.count), backgroundColor: editorData.map(e => editorColor(e.source)), borderWidth: 0 }],
+                  }}
+                  options={{
+                    responsive: true, maintainAspectRatio: false, cutout: '60%',
+                    plugins: {
+                      legend: { position: 'right', labels: { color: legendColor, font: { size: 9, family: MONO }, usePointStyle: true, pointStyle: 'circle', padding: 6 } },
+                      tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } },
+                    },
+                  }}
+                />
+              </div>
+            </div>
+          )}
+          {models.length > 0 && (
+            <div className="card p-3">
+              <SectionTitle>models</SectionTitle>
+              <div style={{ height: 160 }}>
+                <Doughnut
+                  data={{
+                    labels: models.slice(0, 10).map(m => m.name),
+                    datasets: [{ data: models.slice(0, 10).map(m => m.count), backgroundColor: MODEL_COLORS, borderWidth: 0 }],
+                  }}
+                  options={{
+                    responsive: true, maintainAspectRatio: false, cutout: '60%',
+                    plugins: {
+                      legend: { position: 'right', labels: { color: legendColor, font: { size: 8, family: MONO }, usePointStyle: true, pointStyle: 'circle', padding: 6 } },
+                      tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } },
+                    },
+                  }}
+                />
+              </div>
+            </div>
+          )}
+          {userList.length > 0 && (
+            <div className="card p-3">
+              <SectionTitle>sessions per user</SectionTitle>
+              <div style={{ height: Math.max(120, userList.length * 28) }}>
+                <Bar
+                  data={{
+                    labels: userList.map(u => u.username),
+                    datasets: [{
+                      data: userList.map(u => u.sessions),
+                      backgroundColor: userList.map(u => userColorMap[u.username]),
+                      borderRadius: 2,
+                    }],
+                  }}
+                  options={{
+                    responsive: true, maintainAspectRatio: false, indexAxis: 'y',
+                    plugins: { legend: { display: false }, tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } } },
+                    scales: {
+                      x: { grid: { color: gridColor }, ticks: { color: txtDim, font: { size: 8, family: MONO } }, beginAtZero: true },
+                      y: { grid: { display: false }, ticks: { color: txtColor, font: { size: 9, family: MONO } } },
+                    },
+                  }}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Search */}
+        <div className="card p-3">
+          <SectionTitle>search across team</SectionTitle>
+          <form onSubmit={handleSearch} className="flex gap-2 mt-1">
+            <div className="relative flex-1">
+              <Search size={11} className="absolute left-2.5 top-1/2 -translate-y-1/2" style={{ color: 'var(--c-text3)' }} />
+              <input
+                type="text"
+                value={search}
+                onChange={e => setSearch(e.target.value)}
+                placeholder="Search messages, files, topics across all users..."
+                className="w-full pl-7 pr-3 py-1.5 text-[12px] outline-none rounded-sm"
+                style={{ background: 'var(--c-bg3)', color: 'var(--c-white)', border: '1px solid var(--c-border)' }}
+              />
+            </div>
+            <button
+              type="submit"
+              disabled={searching}
+              className="px-3 py-1.5 text-[11px] font-medium transition rounded-sm"
+              style={{ background: 'var(--c-card)', border: '1px solid var(--c-border)', color: 'var(--c-white)' }}
+            >
+              {searching ? 'Searching...' : 'Search'}
+            </button>
+          </form>
+          {searchResults && (
+            <div className="mt-3 max-h-[300px] overflow-y-auto scrollbar-thin">
+              {searchResults.length === 0 ? (
+                <div className="text-[12px] py-2" style={{ color: 'var(--c-text3)' }}>No results found</div>
+              ) : (
+                <table className="w-full text-[12px]">
+                  <tbody>
+                    {searchResults.map((r, i) => (
+                      <tr
+                        key={i}
+                        className="cursor-pointer transition"
+                        style={{ borderBottom: '1px solid var(--c-border)' }}
+                        onMouseEnter={e => e.currentTarget.style.background = 'var(--c-bg3)'}
+                        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                        onClick={() => { setSelectedChat(r.chatId); setSelectedUsername(r.username) }}
+                      >
+                        <td className="py-2 px-2 w-[80px]">
+                          <span className="text-[10px] font-medium px-1.5 py-0.5" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>{r.username}</span>
+                        </td>
+                        <td className="py-2 px-2 w-[24px]"><EditorIcon source={r.source} size={11} /></td>
+                        <td className="py-2 px-2">
+                          <div className="text-[11px] truncate" style={{ color: 'var(--c-text3)' }}>{r.chatName}</div>
+                          <div className="text-[11px] line-clamp-1 mt-0.5" style={{ color: 'var(--c-text)' }}>{r.content}</div>
+                        </td>
+                        <td className="py-2 px-2 text-[10px] whitespace-nowrap" style={{ color: 'var(--c-text3)' }}>{r.role}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Team member cards (for detail view) */}
+        <SectionTitle>team overview</SectionTitle>
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+          {userList.map((u) => {
+            const uTok = u.totalInputTokens + u.totalOutputTokens
+            const color = userColorMap[u.username]
+            const editorEntries = Object.entries(u.editors || {}).sort((a, b) => b[1] - a[1])
+            return (
+              <div
+                key={u.username}
+                className="card p-3 cursor-pointer transition hover:opacity-90"
+                onClick={() => navigate(`/relay/user/${u.username}`)}
+              >
+                <div className="flex items-center gap-2 mb-2">
+                  <div className="w-7 h-7 flex items-center justify-center text-[12px] font-bold rounded-sm flex-shrink-0" style={{ background: `${color}20`, color }}>
+                    {u.username.charAt(0).toUpperCase()}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="text-[12px] font-bold truncate" style={{ color: 'var(--c-white)' }}>{u.username}</div>
+                    <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>
+                      {u.lastActive ? formatDate(u.lastActive) : 'No activity'}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-0.5 flex-shrink-0">
+                    {editorEntries.slice(0, 3).map(([src]) => (
+                      <EditorIcon key={src} source={src} size={11} />
+                    ))}
+                  </div>
+                </div>
+                <div className="grid grid-cols-4 gap-1 text-center mb-2">
+                  {[
+                    [u.sessions, 'sessions'],
+                    [formatNumber(u.totalMessages), 'messages'],
+                    [u.projects, 'projects'],
+                    [formatNumber(uTok), 'tokens'],
+                  ].map(([v, l]) => (
+                    <div key={l} className="p-1 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
+                      <div className="text-[11px] font-bold" style={{ color: 'var(--c-white)' }}>{v}</div>
+                      <div className="text-[7px]" style={{ color: 'var(--c-text3)' }}>{l}</div>
+                    </div>
+                  ))}
+                </div>
+                {/* Activity bar */}
+                <div className="h-1.5 rounded-full overflow-hidden" style={{ background: 'var(--c-code-bg)' }}>
+                  <div className="h-full rounded-full" style={{ width: `${(u.sessions / maxUserSessions * 100).toFixed(0)}%`, background: color }} />
+                </div>
+                {u.topModels && u.topModels.length > 0 && (
+                  <div className="flex flex-wrap gap-1 mt-1.5">
+                    {u.topModels.slice(0, 2).map(m => (
+                      <span key={m.name} className="text-[8px] px-1.5 py-0.5 rounded-sm" style={{ background: 'rgba(99,102,241,0.08)', color: '#818cf8' }}>{m.name}</span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+
+        {userList.length === 0 && (
+          <div className="card p-8 text-center">
+            <Users size={32} className="mx-auto mb-3" style={{ color: 'var(--c-text3)' }} />
+            <div className="text-[12px] font-medium mb-1" style={{ color: 'var(--c-white)' }}>No team members yet</div>
+            <div className="text-[11px]" style={{ color: 'var(--c-text3)' }}>Share the join command with your team to start collecting data</div>
+          </div>
+        )}
+      </div>
+
+      {/* ── Right sidebar: Live Feed ── */}
+      <div
+        className="hidden xl:flex flex-col w-[300px] shrink-0 sticky top-[42px] self-start"
+        style={{ height: sidebarH, borderLeft: '1px solid var(--c-border)', background: 'var(--c-bg)' }}
+      >
+        <LiveFeed onSessionClick={handleFeedClick} />
+      </div>
+
+      {/* Session sidebar */}
+      <ChatSidebar
+        chatId={selectedChat}
+        onClose={() => { setSelectedChat(null); setSelectedUsername(null) }}
+        fetchFn={selectedUsername ? (id) => fetchRelaySession(id, selectedUsername) : undefined}
+        username={selectedUsername}
+        extraHeader={
+          selectedUsername ? (
+            <span className="text-[11px] font-medium px-1.5 py-0.5 shrink-0" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>
+              {selectedUsername}
+            </span>
+          ) : null
+        }
+      />
+    </div>
+  )
+}