agentlytics 0.1.2 → 0.1.3

package/ui/src/pages/RelayDashboard.jsx

@@ -1,10 +1,10 @@
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Users, Cpu, ArrowRight, Search, Merge } from 'lucide-react'
+import { Users, Cpu, ArrowRight, Search, Merge, MessageSquare, Zap, FolderOpen, ChevronDown, ChevronRight, User } 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 EditorDot from '../components/EditorDot'
+import EditorIcon from '../components/EditorIcon'
 import SectionTitle from '../components/SectionTitle'
 import ChatSidebar from '../components/ChatSidebar'
 import LiveFeed from '../components/LiveFeed'
@@ -15,6 +15,240 @@ 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, onUserClick, 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-[10px] 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-[11px] font-medium uppercase tracking-wider" style={{ color: 'var(--c-text2)' }}>Team</span>
+        <span className="text-[9px] 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-[10px] 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-[9px] 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-[10px] 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-[9px] 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-[10px] 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-[10px] 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-[10px] 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-[9px]" style={{ color: mergeResult.error ? '#ef4444' : '#22c55e' }}>
+              {mergeResult.error ? `Error: ${mergeResult.error}` : 'Merged!'}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
 
 export default function RelayDashboard() {
   const navigate = useNavigate()
@@ -24,16 +258,12 @@ export default function RelayDashboard() {
   const [searching, setSearching] = useState(false)
   const [selectedChat, setSelectedChat] = useState(null)
   const [selectedUsername, setSelectedUsername] = useState(null)
-  const [mergeFrom, setMergeFrom] = useState('')
-  const [mergeTo, setMergeTo] = useState('')
-  const [merging, setMerging] = useState(false)
-  const [mergeResult, setMergeResult] = useState(null)
   const { dark } = useTheme()
 
-  const txtColor = dark ? '#888' : '#555'
   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)
@@ -52,316 +282,292 @@ export default function RelayDashboard() {
     setSearching(false)
   }
 
-  if (!stats) return <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text2)' }}>loading relay data...</div>
-
-  const editorData = stats.editors || []
-  const userList = stats.users || []
-
-  const editorChartData = {
-    labels: editorData.map(e => editorLabel(e.source)),
-    datasets: [{
-      data: editorData.map(e => e.count),
-      backgroundColor: editorData.map(e => editorColor(e.source)),
-      borderWidth: 0,
-    }],
-  }
+  const userList = stats?.users || []
 
-  const userSessionData = {
-    labels: userList.map(u => u.username),
-    datasets: [{
-      label: 'Sessions',
-      data: userList.map(u => u.sessions),
-      backgroundColor: userList.map((_, i) => {
-        const colors = ['#6366f1', '#8b5cf6', '#a855f7', '#c084fc', '#d8b4fe', '#e879f9', '#f472b6', '#fb7185']
-        return colors[i % colors.length]
-      }),
-      borderWidth: 0,
-    }],
-  }
+  // 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])
 
-  const chartOpts = {
-    responsive: true, maintainAspectRatio: false,
-    plugins: {
-      legend: { position: 'right', labels: { color: legendColor, font: { size: 10, family: MONO }, padding: 12, usePointStyle: true, pointStyle: 'circle' } },
-      tooltip: { bodyFont: { family: MONO, size: 11 }, titleFont: { family: MONO, size: 11 } },
-    },
-  }
+  if (!stats) return <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text2)' }}>loading relay data...</div>
 
-  const barOpts = {
-    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 } } },
-    },
-  }
+  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 gap-4">
-      {/* ── Main content ── */}
-      <div className="flex-1 min-w-0 space-y-4">
+    <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-4">
         {/* KPIs */}
-        <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-2">
-          <KpiCard label="Team Members" value={stats.totalUsers} />
-          <KpiCard label="Total Sessions" value={formatNumber(stats.totalSessions)} />
-          <KpiCard label="Active Users" value={stats.activeUsers} />
-          <KpiCard label="Projects" value={stats.totalProjects} />
-          <KpiCard label="Messages" value={formatNumber(stats.totalMessages)} />
-          <KpiCard label="Input Tokens" value={formatNumber(stats.totalInputTokens)} />
-          <KpiCard label="Output Tokens" value={formatNumber(stats.totalOutputTokens)} />
+        <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-[10px] 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-[9px]">
+              <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-[9px] 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-[9px]">
+                  {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">
+          <SectionTitle>search across team</SectionTitle>
+          <form onSubmit={handleSearch} className="flex gap-2 mt-1">
             <div className="relative flex-1">
-              <Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2" style={{ color: 'var(--c-text3)' }} />
+              <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-[11px] bg-transparent border outline-none"
-                style={{ borderColor: 'var(--c-border)', color: 'var(--c-white)' }}
+                className="w-full pl-7 pr-3 py-1.5 text-[11px] 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-[10px] font-medium transition"
+              className="px-3 py-1.5 text-[10px] 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 space-y-1">
+            <div className="mt-3 max-h-[300px] overflow-y-auto scrollbar-thin">
               {searchResults.length === 0 ? (
                 <div className="text-[11px] py-2" style={{ color: 'var(--c-text3)' }}>No results found</div>
               ) : (
-                searchResults.map((r, i) => (
-                  <div
-                    key={i}
-                    className="card px-3 py-2 cursor-pointer hover:border-[var(--c-card-hover)] transition"
-                    onClick={() => { setSelectedChat(r.chatId); setSelectedUsername(r.username) }}
-                  >
-                    <div className="flex items-center gap-2 mb-1">
-                      <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>
-                      <EditorDot source={r.source} showLabel size={6} />
-                      <span className="text-[10px]" style={{ color: 'var(--c-text3)' }}>{r.chatName}</span>
-                      <span className="text-[9px] ml-auto" style={{ color: 'var(--c-text3)' }}>{r.role}</span>
-                    </div>
-                    <div className="text-[10px] line-clamp-2" style={{ color: 'var(--c-text)' }}>{r.content}</div>
-                  </div>
-                ))
+                <table className="w-full text-[11px]">
+                  <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-[9px] 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-[10px] truncate" style={{ color: 'var(--c-text3)' }}>{r.chatName}</div>
+                          <div className="text-[10px] line-clamp-1 mt-0.5" style={{ color: 'var(--c-text)' }}>{r.content}</div>
+                        </td>
+                        <td className="py-2 px-2 text-[9px] whitespace-nowrap" style={{ color: 'var(--c-text3)' }}>{r.role}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
               )}
             </div>
           )}
         </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-          {/* Editor breakdown */}
-          {editorData.length > 0 && (
-            <div className="card p-3">
-              <SectionTitle>Team Editor Usage</SectionTitle>
-              <div className="h-[200px]">
-                <Doughnut data={editorChartData} options={chartOpts} />
-              </div>
-            </div>
-          )}
-
-          {/* Sessions per user */}
-          {userList.length > 0 && (
-            <div className="card p-3">
-              <SectionTitle>Sessions per User</SectionTitle>
-              <div style={{ height: Math.max(120, userList.length * 32) }}>
-                <Bar data={userSessionData} options={barOpts} />
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Top Models */}
-        {stats.topModels && stats.topModels.length > 0 && (
-          <div className="card p-3">
-            <SectionTitle>Top Models (Team)</SectionTitle>
-            <div className="flex flex-wrap gap-2">
-              {stats.topModels.map(m => (
-                <span key={m.name} className="inline-flex items-center gap-1.5 px-2 py-1 text-[10px]" style={{ background: 'var(--c-card)', border: '1px solid var(--c-border)', color: 'var(--c-text)' }}>
-                  <Cpu size={10} style={{ color: '#818cf8' }} />
-                  {m.name}
-                  <span style={{ color: 'var(--c-text3)' }}>×{m.count}</span>
-                </span>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* User cards */}
-        <SectionTitle>Team Members</SectionTitle>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-          {userList.map(u => (
-            <div
-              key={u.username}
-              className="card p-3 cursor-pointer hover:border-[var(--c-card-hover)] transition"
-              onClick={() => navigate(`/relay/user/${u.username}`)}
-            >
-              <div className="flex items-center justify-between mb-2">
-                <div className="flex items-center gap-2">
-                  <div className="w-7 h-7 flex items-center justify-center text-[11px] font-bold" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>
+        {/* 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-[11px] font-bold rounded-sm flex-shrink-0" style={{ background: `${color}20`, color }}>
                     {u.username.charAt(0).toUpperCase()}
                   </div>
-                  <div>
-                    <div className="text-[11px] font-medium" style={{ color: 'var(--c-white)' }}>{u.username}</div>
+                  <div className="flex-1 min-w-0">
+                    <div className="text-[11px] font-bold truncate" style={{ color: 'var(--c-white)' }}>{u.username}</div>
                     <div className="text-[9px]" style={{ color: 'var(--c-text3)' }}>
-                      {u.lastActive ? `Active ${formatDate(u.lastActive)}` : 'No activity'}
+                      {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>
-                <ArrowRight size={12} style={{ color: 'var(--c-text3)' }} />
-              </div>
-
-              <div className="grid grid-cols-3 gap-2 mb-2">
-                <div>
-                  <div className="text-[12px] font-bold" style={{ color: 'var(--c-white)' }}>{u.sessions}</div>
-                  <div className="text-[9px]" style={{ color: 'var(--c-text3)' }}>sessions</div>
-                </div>
-                <div>
-                  <div className="text-[12px] font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(u.totalMessages)}</div>
-                  <div className="text-[9px]" style={{ color: 'var(--c-text3)' }}>messages</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-[10px] font-bold" style={{ color: 'var(--c-white)' }}>{v}</div>
+                      <div className="text-[7px]" style={{ color: 'var(--c-text3)' }}>{l}</div>
+                    </div>
+                  ))}
                 </div>
-                <div>
-                  <div className="text-[12px] font-bold" style={{ color: 'var(--c-white)' }}>{u.projects}</div>
-                  <div className="text-[9px]" style={{ color: 'var(--c-text3)' }}>projects</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>
-
-              {/* Editor dots */}
-              <div className="flex flex-wrap gap-2">
-                {Object.entries(u.editors).sort((a, b) => b[1] - a[1]).map(([src, count]) => (
-                  <span key={src} className="inline-flex items-center gap-1 text-[9px]" style={{ color: 'var(--c-text2)' }}>
-                    <EditorDot source={src} size={6} />
-                    {editorLabel(src)} <span style={{ color: 'var(--c-text3)' }}>{count}</span>
-                  </span>
-                ))}
-              </div>
-
-              {/* Top models */}
-              {u.topModels && u.topModels.length > 0 && (
-                <div className="flex flex-wrap gap-1 mt-1.5">
-                  {u.topModels.slice(0, 3).map(m => (
-                    <span key={m.name} className="text-[8px] px-1.5 py-0.5" style={{ background: 'rgba(99,102,241,0.08)', color: '#818cf8' }}>
-                      {m.name}
-                    </span>
-                  ))}
-                </div>
-              )}
-            </div>
-          ))}
+            )
+          })}
         </div>
 
-        {/* Merge users */}
-        {userList.length >= 2 && (
-          <div className="card p-3">
-            <SectionTitle><Merge size={12} className="inline mr-1" />Merge Users</SectionTitle>
-            <div className="flex items-end gap-2 flex-wrap">
-              <div>
-                <div className="text-[9px] mb-1" style={{ color: 'var(--c-text3)' }}>Merge from</div>
-                <select
-                  value={mergeFrom}
-                  onChange={e => setMergeFrom(e.target.value)}
-                  className="text-[11px] px-2 py-1.5 outline-none"
-                  style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
-                >
-                  <option value="">Select user...</option>
-                  {userList.filter(u => u.username !== mergeTo).map(u => (
-                    <option key={u.username} value={u.username}>{u.username} ({u.sessions} sessions)</option>
-                  ))}
-                </select>
-              </div>
-              <div className="text-[11px] pb-1.5" style={{ color: 'var(--c-text3)' }}>→</div>
-              <div>
-                <div className="text-[9px] mb-1" style={{ color: 'var(--c-text3)' }}>Merge into</div>
-                <select
-                  value={mergeTo}
-                  onChange={e => setMergeTo(e.target.value)}
-                  className="text-[11px] px-2 py-1.5 outline-none"
-                  style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
-                >
-                  <option value="">Select user...</option>
-                  {userList.filter(u => u.username !== mergeFrom).map(u => (
-                    <option key={u.username} value={u.username}>{u.username} ({u.sessions} sessions)</option>
-                  ))}
-                </select>
-              </div>
-              <button
-                disabled={!mergeFrom || !mergeTo || merging}
-                onClick={async () => {
-                  if (!confirm(`Merge all data from "${mergeFrom}" into "${mergeTo}"? This cannot be undone.`)) return
-                  setMerging(true)
-                  setMergeResult(null)
-                  try {
-                    const r = await mergeRelayUsers(mergeFrom, mergeTo)
-                    setMergeResult(r)
-                    setMergeFrom('')
-                    setMergeTo('')
-                    fetchRelayTeamStats().then(setStats)
-                  } catch (err) {
-                    setMergeResult({ error: err.message })
-                  }
-                  setMerging(false)
-                }}
-                className="text-[10px] px-3 py-1.5 font-medium transition"
-                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>
-            </div>
-            {mergeResult && (
-              <div className="mt-2 text-[10px]" style={{ color: mergeResult.error ? '#ef4444' : '#22c55e' }}>
-                {mergeResult.error
-                  ? `Error: ${mergeResult.error}`
-                  : `Merged ${mergeResult.moved?.chats || 0} chats, ${mergeResult.moved?.messages || 0} messages from "${mergeResult.merged?.from}" → "${mergeResult.merged?.to}". ${mergeResult.duplicatesSkipped || 0} duplicates skipped.`}
-              </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-[10px]" style={{ color: 'var(--c-text3)' }}>
-              Share the join command with your team to start collecting data
-            </div>
+            <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>Share the join command with your team to start collecting data</div>
           </div>
         )}
       </div>
 
-      {/* ── Live Feed (right column) ── */}
+      {/* ── Right sidebar: Live Feed ── */}
       <div
-        className="hidden xl:block w-[280px] shrink-0 card sticky top-[42px] self-start"
-        style={{ height: 'calc(100vh - 58px)', overflow: 'hidden' }}
+        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 — same component as default UI */}
+      {/* Session sidebar */}
       <ChatSidebar
         chatId={selectedChat}
         onClose={() => { setSelectedChat(null); setSelectedUsername(null) }}