agentlytics 0.0.10 → 0.1.0

package/ui/src/App.jsx

@@ -1,8 +1,9 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { Routes, Route, NavLink } from 'react-router-dom'
-import { Activity, BarChart3, GitCompare, MessageSquare, FolderOpen, Sun, Moon, RefreshCw, AlertTriangle, Github, Terminal, Database } from 'lucide-react'
-import { fetchOverview, refetchAgents } from './lib/api'
+import { Activity, BarChart3, GitCompare, MessageSquare, FolderOpen, Sun, Moon, RefreshCw, AlertTriangle, Github, Terminal, Database, Users, Radio, Plug, Copy, Check } from 'lucide-react'
+import { fetchOverview, refetchAgents, fetchMode, fetchRelayConfig, getAuthToken, setOnAuthFailure } from './lib/api'
 import { useTheme } from './lib/theme'
+import LoginScreen from './components/LoginScreen'
 import Dashboard from './pages/Dashboard'
 import Sessions from './pages/Sessions'
 import DeepAnalysis from './pages/DeepAnalysis'
@@ -11,13 +12,38 @@ import ChatDetail from './pages/ChatDetail'
 import Projects from './pages/Projects'
 import ProjectDetail from './pages/ProjectDetail'
 import SqlViewer from './pages/SqlViewer'
+import RelayDashboard from './pages/RelayDashboard'
+import RelayUserDetail from './pages/RelayUserDetail'
 
 export default function App() {
   const [overview, setOverview] = useState(null)
   const [refetchState, setRefetchState] = useState(null) // null | { scanned, total }
   const [live, setLive] = useState(false)
+  const [mode, setMode] = useState(null) // 'local' | 'relay'
+  const [needsAuth, setNeedsAuth] = useState(false)
+  const [authed, setAuthed] = useState(!!getAuthToken())
   const liveRef = useRef(null)
   const { dark, toggle } = useTheme()
+  const [mcpOpen, setMcpOpen] = useState(false)
+  const [mcpCopied, setMcpCopied] = useState(false)
+  const [relayPassword, setRelayPassword] = useState('')
+
+  useEffect(() => {
+    setOnAuthFailure(() => setAuthed(false))
+  }, [])
+
+  useEffect(() => {
+    fetchMode().then(data => {
+      setMode(data.mode || 'local')
+      setNeedsAuth(!!data.auth)
+    })
+  }, [])
+
+  useEffect(() => {
+    if (mode === 'relay' && authed) {
+      fetchRelayConfig().then(c => setRelayPassword(c.relayPassword || '')).catch(() => {})
+    }
+  }, [mode, authed])
 
   const refreshOverview = useCallback(() => {
     fetchOverview().then(setOverview)
@@ -50,7 +76,12 @@ export default function App() {
     setRefetchState(null)
   }
 
-  const nav = [
+  const isRelay = mode === 'relay'
+  const showLogin = isRelay && needsAuth && !authed
+
+  const nav = isRelay ? [
+    { to: '/', icon: Users, label: 'Team' },
+  ] : [
     { to: '/', icon: Activity, label: 'Dashboard' },
     { to: '/projects', icon: FolderOpen, label: 'Projects' },
     { to: '/sessions', icon: MessageSquare, label: 'Sessions' },
@@ -59,10 +90,16 @@ export default function App() {
     { to: '/sql', icon: Database, label: 'SQL' },
   ]
 
+  if (showLogin) {
+    return <LoginScreen onSuccess={() => setAuthed(true)} />
+  }
+
   return (
     <div className="min-h-screen">
       <header className="border-b px-4 py-1.5 flex items-center gap-3 sticky top-0 z-50 backdrop-blur-xl" style={{ borderColor: 'var(--c-border)', background: 'var(--c-header)' }}>
-        <span className="text-xs font-bold tracking-tight" style={{ color: 'var(--c-white)' }}>npx agentlytics</span>
+        <span className="text-xs font-bold tracking-tight" style={{ color: 'var(--c-white)' }}>
+          npx agentlytics{isRelay && <span className="ml-1.5 text-[9px] font-medium px-1.5 py-0.5" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>relay</span>}
+        </span>
         <nav className="flex gap-0.5 ml-2">
           {nav.map(({ to, icon: Icon, label }) => (
             <NavLink
@@ -81,37 +118,52 @@ export default function App() {
           ))}
         </nav>
         <div className="ml-auto flex items-center gap-3">
-          <button
-            onClick={() => setLive(!live)}
-            className="flex items-center gap-1.5 px-2 py-0.5 text-[10px] transition"
-            style={{
-              color: live ? '#22c55e' : 'var(--c-text3)',
-              border: live ? '1px solid rgba(34,197,94,0.3)' : '1px solid var(--c-border)',
-              background: live ? 'rgba(34,197,94,0.08)' : 'transparent',
-            }}
-            title={live ? 'Disable live refresh' : 'Enable live refresh (every 60s)'}
-          >
-            <span
-              className={`inline-block w-1.5 h-1.5 rounded-full ${live ? 'pulse-dot' : ''}`}
-              style={{ background: live ? '#22c55e' : 'var(--c-text3)' }}
-            />
-            Live
-          </button>
-          <button
-            onClick={handleRefetch}
-            disabled={!!refetchState}
-            className="flex items-center gap-1 px-2 py-0.5 text-[10px] rounded transition hover:bg-[var(--c-card)]"
-            style={{ color: 'var(--c-text2)', border: '1px solid var(--c-border)' }}
-            title="Clear cache and rescan all editors"
-          >
-            <RefreshCw size={10} className={refetchState ? 'animate-spin' : ''} />
-            {refetchState
-              ? `Refetching (${refetchState.scanned}/${refetchState.total})...`
-              : 'Refetch'}
-          </button>
-          <span className="text-[10px]" style={{ color: 'var(--c-text2)' }}>
-            {overview ? `${overview.totalChats} sessions` : '...'}
-          </span>
+          {!isRelay && (
+            <>
+              <button
+                onClick={() => setLive(!live)}
+                className="flex items-center gap-1.5 px-2 py-0.5 text-[10px] transition"
+                style={{
+                  color: live ? '#22c55e' : 'var(--c-text3)',
+                  border: live ? '1px solid rgba(34,197,94,0.3)' : '1px solid var(--c-border)',
+                  background: live ? 'rgba(34,197,94,0.08)' : 'transparent',
+                }}
+                title={live ? 'Disable live refresh' : 'Enable live refresh (every 60s)'}
+              >
+                <span
+                  className={`inline-block w-1.5 h-1.5 rounded-full ${live ? 'pulse-dot' : ''}`}
+                  style={{ background: live ? '#22c55e' : 'var(--c-text3)' }}
+                />
+                Live
+              </button>
+              <button
+                onClick={handleRefetch}
+                disabled={!!refetchState}
+                className="flex items-center gap-1 px-2 py-0.5 text-[10px] rounded transition hover:bg-[var(--c-card)]"
+                style={{ color: 'var(--c-text2)', border: '1px solid var(--c-border)' }}
+                title="Clear cache and rescan all editors"
+              >
+                <RefreshCw size={10} className={refetchState ? 'animate-spin' : ''} />
+                {refetchState
+                  ? `Refetching (${refetchState.scanned}/${refetchState.total})...`
+                  : 'Refetch'}
+              </button>
+              <span className="text-[10px]" style={{ color: 'var(--c-text2)' }}>
+                {overview ? `${overview.totalChats} sessions` : '...'}
+              </span>
+            </>
+          )}
+          {isRelay && (
+            <button
+              onClick={() => { setMcpOpen(true); setMcpCopied(false) }}
+              className="flex items-center gap-1.5 px-2 py-0.5 text-[10px] transition hover:bg-[var(--c-card)]"
+              style={{ color: '#818cf8', border: '1px solid var(--c-border)' }}
+              title="MCP Connection"
+            >
+              <Plug size={10} />
+              Connect
+            </button>
+          )}
           <button
             onClick={toggle}
             className="p-1 rounded transition hover:bg-[var(--c-card)]"
@@ -131,16 +183,26 @@ export default function App() {
       )}
 
       <main className="p-4 max-w-[1400px] mx-auto">
-        <Routes>
-          <Route path="/" element={<Dashboard overview={overview} />} />
-          <Route path="/projects" element={<Projects overview={overview} />} />
-          <Route path="/projects/detail" element={<ProjectDetail />} />
-          <Route path="/sessions" element={<Sessions overview={overview} />} />
-          {/* ChatDetail is now a sidebar in Sessions */}
-          <Route path="/analysis" element={<DeepAnalysis overview={overview} />} />
-          <Route path="/compare" element={<Compare overview={overview} />} />
-          <Route path="/sql" element={<SqlViewer />} />
-        </Routes>
+        {mode === null ? (
+          <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text2)' }}>loading...</div>
+        ) : isRelay ? (
+          <Routes>
+            <Route path="/" element={<RelayDashboard />} />
+            <Route path="/relay" element={<RelayDashboard />} />
+            <Route path="/relay/user/:username" element={<RelayUserDetail />} />
+          </Routes>
+        ) : (
+          <Routes>
+            <Route path="/" element={<Dashboard overview={overview} />} />
+            <Route path="/projects" element={<Projects overview={overview} />} />
+            <Route path="/projects/detail" element={<ProjectDetail />} />
+            <Route path="/sessions" element={<Sessions overview={overview} />} />
+            {/* ChatDetail is now a sidebar in Sessions */}
+            <Route path="/analysis" element={<DeepAnalysis overview={overview} />} />
+            <Route path="/compare" element={<Compare overview={overview} />} />
+            <Route path="/sql" element={<SqlViewer />} />
+          </Routes>
+        )}
       </main>
 
       <footer className="border-t mt-8 px-4 py-3 flex items-center justify-between text-[10px]" style={{ borderColor: 'var(--c-border)', color: 'var(--c-text3)' }}>
@@ -158,6 +220,53 @@ export default function App() {
           built by <a href="https://github.com/f" target="_blank" rel="noopener noreferrer" className="hover:text-[var(--c-text)] transition" style={{ color: 'var(--c-text2)' }}>fkadev</a>
         </span>
       </footer>
+
+      {/* MCP Config Modal */}
+      {mcpOpen && (
+        <>
+          <div className="fixed inset-0 z-[60]" style={{ background: 'rgba(0,0,0,0.5)' }} onClick={() => setMcpOpen(false)} />
+          <div
+            className="fixed z-[70] w-[440px] max-w-[90vw] p-5 rounded shadow-2xl"
+            style={{ top: '50%', left: '50%', transform: 'translate(-50%, -50%)', background: 'var(--c-bg)', border: '1px solid var(--c-border)' }}
+          >
+            <div className="flex items-center justify-between mb-4">
+              <div className="text-[13px] font-bold" style={{ color: 'var(--c-white)' }}>
+                <Plug size={13} className="inline mr-1.5" style={{ color: '#818cf8' }} />
+                Connection Config
+              </div>
+              <button onClick={() => setMcpOpen(false)} className="text-[18px] leading-none px-1 hover:opacity-70 transition" style={{ color: 'var(--c-text3)' }}>&times;</button>
+            </div>
+
+            <div className="text-[11px] font-medium mb-1.5" style={{ color: 'var(--c-white)' }}>MCP Config</div>
+            <div className="flex items-center justify-between mb-1">
+              <div className="text-[9px]" style={{ color: 'var(--c-text3)' }}>Add to your AI client's MCP settings</div>
+              <button
+                onClick={() => {
+                  const json = JSON.stringify({ "mcpServers": { "agentlytics": { "url": `${window.location.origin}/mcp` } } }, null, 2)
+                  navigator.clipboard.writeText(json)
+                  setMcpCopied(true)
+                  setTimeout(() => setMcpCopied(false), 2000)
+                }}
+                className="flex items-center gap-1 px-1.5 py-0.5 text-[9px] transition hover:bg-[var(--c-bg3)]"
+                style={{ border: '1px solid var(--c-border)', color: mcpCopied ? '#22c55e' : 'var(--c-text2)' }}
+              >
+                {mcpCopied ? <><Check size={9} /> Copied</> : <><Copy size={9} /> Copy</>}
+              </button>
+            </div>
+            <pre
+              className="text-[10px] px-3 py-2 overflow-x-auto mb-4"
+              style={{ background: 'var(--c-bg3)', border: '1px solid var(--c-border)', color: 'var(--c-text)', fontFamily: 'JetBrains Mono, monospace', lineHeight: 1.6 }}
+            >{`{\n  "mcpServers": {\n    "agentlytics": {\n      "url": "${window.location.origin}/mcp"\n    }\n  }\n}`}</pre>
+
+            <div className="text-[11px] font-medium mb-1.5" style={{ color: 'var(--c-white)' }}>Join Command</div>
+            <div className="text-[9px] mb-1" style={{ color: 'var(--c-text3)' }}>Share with your team to start syncing sessions</div>
+            <pre
+              className="text-[10px] px-3 py-2 overflow-x-auto"
+              style={{ background: 'var(--c-bg3)', border: '1px solid var(--c-border)', color: 'var(--c-text)', fontFamily: 'JetBrains Mono, monospace', lineHeight: 1.6 }}
+            >{`cd /path/to/your-project\nRELAY_PASSWORD=${relayPassword || '<pass>'} npx agentlytics --join ${window.location.host}`}</pre>
+          </div>
+        </>
+      )}
     </div>
   )
 }

package/ui/src/components/ChatSidebar.jsx

@@ -1,170 +1,41 @@
 import { useState, useEffect, useRef } from 'react'
-import { X, User, Bot, Wrench, Settings, Play, CheckCircle, ChevronRight, ChevronDown, Download, Send, Search } from 'lucide-react'
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
+import { X, Download, Send, Search } from 'lucide-react'
 import { fetchChat, BASE } from '../lib/api'
 import { editorColor, editorLabel, formatDateTime, formatNumber } from '../lib/constants'
+import MessageContent, { ROLE_CONFIG } from './MessageRenderer'
 
-const ROLE_CONFIG = {
-  user: { icon: User, label: 'User', borderColor: 'rgba(34,197,94,0.2)', bg: 'rgba(34,197,94,0.05)' },
-  assistant: { icon: Bot, label: 'Assistant', borderColor: 'rgba(99,102,241,0.2)', bg: 'rgba(99,102,241,0.05)' },
-  system: { icon: Settings, label: 'System', borderColor: 'rgba(107,114,128,0.2)', bg: 'rgba(107,114,128,0.05)' },
-  tool: { icon: Wrench, label: 'Tool', borderColor: 'rgba(234,179,8,0.2)', bg: 'rgba(234,179,8,0.05)' },
-}
-
-function parseContent(content) {
-  const segments = []
-  const regex = /\[tool-call: ([^\]]+)\]|\[tool-result: ([^\]]+)\]\s*(.*?)(?=\n\[tool-|$)/gs
-  let lastIdx = 0
-  let match
-  while ((match = regex.exec(content)) !== null) {
-    if (match.index > lastIdx) {
-      const text = content.slice(lastIdx, match.index).trim()
-      if (text) segments.push({ type: 'text', value: text })
-    }
-    if (match[1]) {
-      segments.push({ type: 'tool-call', name: match[1].replace(/\(.*\)$/, '').trim(), args: match[1] })
-    } else if (match[2]) {
-      segments.push({ type: 'tool-result', name: match[2].trim(), preview: (match[3] || '').trim() })
-    }
-    lastIdx = match.index + match[0].length
-  }
-  if (lastIdx < content.length) {
-    const text = content.slice(lastIdx).trim()
-    if (text) segments.push({ type: 'text', value: text })
-  }
-  return segments.length > 0 ? segments : [{ type: 'text', value: content }]
-}
-
-function summarizeToolArgs(name, args) {
-  if (!args || typeof args !== 'object') return ''
-  if (args.file_path || args.TargetFile) return args.file_path || args.TargetFile
-  if (args.CommandLine || args.command) return args.CommandLine || args.command
-  if (args.Query || args.query) return `${args.Query || args.query}${args.SearchPath ? ` in ${args.SearchPath}` : ''}`
-  if (args.Url || args.url) return args.Url || args.url
-  const vals = Object.values(args).filter(v => typeof v === 'string' && v.length > 0 && v.length < 120)
-  return vals.length > 0 ? vals[0] : ''
-}
-
-function ToolArgsDiff({ args }) {
-  const old = args.old_string || args.old_text || args.oldText || args.search || null
-  const nw = args.new_string || args.new_text || args.newText || args.replace || null
-  if (old == null && nw == null) return null
-  const maxLines = 8
-  const oldLines = (old || '').split('\n').slice(0, maxLines)
-  const newLines = (nw || '').split('\n').slice(0, maxLines)
-  return (
-    <div className="mt-1 text-[9px] font-mono overflow-x-auto" style={{ border: '1px solid var(--c-border)' }}>
-      {(args.file_path || args.TargetFile) && (
-        <div className="px-2 py-0.5" style={{ background: 'var(--c-code-bg)', color: 'var(--c-text)' }}>{args.file_path || args.TargetFile}</div>
-      )}
-      {old && oldLines.map((line, i) => (
-        <div key={'o' + i} className="px-2" style={{ background: 'rgba(248,113,113,0.1)', color: '#f87171' }}>
-          <span style={{ color: 'var(--c-text3)', userSelect: 'none' }}>- </span>{line}
-        </div>
-      ))}
-      {old && oldLines.length < (old || '').split('\n').length && (
-        <div className="px-2" style={{ color: 'var(--c-text3)' }}>  ... {(old || '').split('\n').length - maxLines} more lines</div>
-      )}
-      {nw && newLines.map((line, i) => (
-        <div key={'n' + i} className="px-2" style={{ background: 'rgba(52,211,153,0.1)', color: '#34d399' }}>
-          <span style={{ color: 'var(--c-text3)', userSelect: 'none' }}>+ </span>{line}
-        </div>
-      ))}
-      {nw && newLines.length < (nw || '').split('\n').length && (
-        <div className="px-2" style={{ color: 'var(--c-text3)' }}>  ... {(nw || '').split('\n').length - maxLines} more lines</div>
-      )}
-    </div>
-  )
-}
-
-function ToolArgsDetail({ args }) {
-  if (!args || Object.keys(args).length === 0) return null
-  const hasDiff = args.old_string || args.new_string || args.old_text || args.new_text || args.search || args.replace
-  if (hasDiff) return <ToolArgsDiff args={args} />
-  const file = args.file_path || args.TargetFile || args.filePath || args.path || null
-  const cmd = args.CommandLine || args.command || null
-  const query = args.Query || args.query || args.search_term || null
-  const url = args.Url || args.url || null
-  return (
-    <div className="mt-1 text-[9px] font-mono overflow-x-auto" style={{ background: 'var(--c-code-bg)', border: '1px solid var(--c-border)' }}>
-      {file && <div className="px-2 py-0.5" style={{ color: 'var(--c-text)' }}>file: {file}</div>}
-      {cmd && <div className="px-2 py-0.5" style={{ color: 'var(--c-text)' }}>cmd: {cmd}</div>}
-      {query && <div className="px-2 py-0.5" style={{ color: 'var(--c-text)' }}>query: {query}</div>}
-      {url && <div className="px-2 py-0.5" style={{ color: 'var(--c-text)' }}>url: {url}</div>}
-      {!file && !cmd && !query && !url && (
-        <pre className="px-2 py-1 whitespace-pre-wrap break-all" style={{ color: 'var(--c-text2)' }}>{JSON.stringify(args, null, 2)}</pre>
-      )}
-    </div>
-  )
-}
-
-function ToolCallBlock({ name, args, detail }) {
-  const [open, setOpen] = useState(false)
-  const hasDetail = detail && Object.keys(detail).length > 0
-  return (
-    <div className="my-1 px-2 py-1 text-[10px]" style={{ background: 'var(--c-code-bg)', border: '1px solid var(--c-border)' }}>
-      <div className="flex items-center gap-1.5 cursor-pointer" onClick={() => hasDetail && setOpen(!open)}>
-        {hasDetail
-          ? (open ? <ChevronDown size={9} style={{ color: '#a78bfa' }} /> : <ChevronRight size={9} style={{ color: '#a78bfa' }} />)
-          : <Play size={9} style={{ color: '#a78bfa' }} />
-        }
-        <span className="font-bold" style={{ color: 'var(--c-white)' }}>{name}</span>
-        {args !== name && !hasDetail && <span className="truncate" style={{ color: 'var(--c-text2)' }}>{args}</span>}
-        {hasDetail && <span className="truncate" style={{ color: 'var(--c-text2)' }}>{summarizeToolArgs(name, detail)}</span>}
-      </div>
-      {open && hasDetail && <ToolArgsDetail args={detail} />}
-    </div>
-  )
-}
-
-function ToolResultBlock({ name, preview }) {
-  const [open, setOpen] = useState(false)
-  const isNoisy = preview.length > 120 || preview.startsWith('{') || preview.includes('contentId')
-  const short = isNoisy ? `${name} completed` : preview.substring(0, 120)
-  return (
-    <div className="my-1 px-2 py-1 text-[10px]" style={{ background: 'var(--c-code-bg)', border: '1px solid var(--c-border)' }}>
-      <div className="flex items-center gap-1.5 cursor-pointer" onClick={() => preview && setOpen(!open)}>
-        <CheckCircle size={9} style={{ color: '#34d399' }} />
-        <span className="truncate" style={{ color: 'var(--c-text)' }}>{short}</span>
-        {isNoisy && preview && <span style={{ color: 'var(--c-text3)' }}>{open ? '[-]' : '[+]'}</span>}
-      </div>
-      {open && <pre className="mt-1 text-[9px] overflow-x-auto whitespace-pre-wrap break-all" style={{ color: 'var(--c-text2)' }}>{preview}</pre>}
-    </div>
-  )
-}
-
-function MessageContent({ content, toolCallDetails }) {
-  const segments = parseContent(content)
-  let toolIdx = 0
-  return segments.map((seg, i) => {
-    if (seg.type === 'tool-call') {
-      const detail = toolCallDetails ? toolCallDetails.find(tc => tc.name === seg.name && toolCallDetails.indexOf(tc) >= toolIdx) : null
-      if (detail) toolIdx = toolCallDetails.indexOf(detail) + 1
-      return <ToolCallBlock key={i} name={seg.name} args={seg.args} detail={detail?.args} />
-    }
-    if (seg.type === 'tool-result') return <ToolResultBlock key={i} name={seg.name} preview={seg.preview} />
-    return <div key={i} className="md-body text-[12px] leading-relaxed"><ReactMarkdown remarkPlugins={[remarkGfm]}>{seg.value}</ReactMarkdown></div>
-  })
-}
-
-export default function ChatSidebar({ chatId, onClose }) {
+export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, username }) {
   const [chat, setChat] = useState(null)
   const [loading, setLoading] = useState(true)
   const [msgFilter, setMsgFilter] = useState('')
   const scrollRef = useRef(null)
+  const msgCountRef = useRef(0)
 
   useEffect(() => {
     if (!chatId) return
     setLoading(true)
     setChat(null)
-    fetchChat(chatId).then(data => {
+    msgCountRef.current = 0
+    const doFetch = fetchFn || fetchChat
+    doFetch(chatId).then(data => {
       setChat(data)
+      msgCountRef.current = data?.messages?.length || 0
       setLoading(false)
     })
-  }, [chatId])
 
-  // Scroll to bottom when chat loads
+    // Poll for new messages while sidebar is open
+    const iv = setInterval(() => {
+      doFetch(chatId).then(data => {
+        if (data?.messages?.length !== msgCountRef.current) {
+          msgCountRef.current = data?.messages?.length || 0
+          setChat(data)
+        }
+      }).catch(() => {})
+    }, 10000)
+    return () => clearInterval(iv)
+  }, [chatId, fetchFn])
+
+  // Scroll to bottom when chat loads or new messages arrive
   useEffect(() => {
     if (!loading && chat && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight
@@ -216,7 +87,7 @@ export default function ChatSidebar({ chatId, onClose }) {
               </div>
             </div>
           )}
-          {chat && (
+          {chat && !fetchFn && (
             <a
               href={`${BASE}/api/chats/${chat.id}/markdown`}
               download
@@ -226,16 +97,17 @@ export default function ChatSidebar({ chatId, onClose }) {
               <Download size={11} /> .md
             </a>
           )}
+          {extraHeader}
         </div>
 
         {/* Stats row */}
         {chat?.stats && (
           <div className="flex items-center gap-3 px-4 py-2 text-[10px] shrink-0" style={{ borderBottom: '1px solid var(--c-border)', color: 'var(--c-text2)' }}>
             <span>{chat.stats.totalMessages} msgs</span>
-            <span>{chat.stats.toolCalls.length} tools</span>
+            {chat.stats.toolCalls?.length > 0 && <span>{chat.stats.toolCalls.length} tools</span>}
             {chat.stats.totalInputTokens > 0 && <span>{formatNumber(chat.stats.totalInputTokens)} in</span>}
             {chat.stats.totalOutputTokens > 0 && <span>{formatNumber(chat.stats.totalOutputTokens)} out</span>}
-            {chat.stats.models.length > 0 && (
+            {chat.stats.models?.length > 0 && (
               <span className="ml-auto font-mono truncate" style={{ color: 'var(--c-accent)', opacity: 0.7 }}>
                 {[...new Set(chat.stats.models)].join(', ')}
               </span>
@@ -279,11 +151,11 @@ export default function ChatSidebar({ chatId, onClose }) {
                 <div key={i} className="rounded-r px-3 py-2" style={{ borderLeft: `2px solid ${cfg.borderColor}`, background: cfg.bg }}>
                   <div className="flex items-center gap-1.5 text-[10px] mb-1" style={{ color: 'var(--c-text2)' }}>
                     <Icon size={11} />
-                    <span className="font-medium">{cfg.label}</span>
+                    <span className="font-medium">{msg.role === 'user' && (username || chat?.username) ? (username || chat.username) : cfg.label}</span>
                     {msg.model && <span className="font-mono" style={{ color: 'var(--c-accent)', opacity: 0.6 }}>· {msg.model}</span>}
                   </div>
                   <div className="text-[12px]" style={{ color: 'var(--c-text)' }}>
-                    <MessageContent content={msg.content} toolCallDetails={chat.toolCallDetails} />
+                    <MessageContent content={msg.content} toolCallDetails={chat.toolCallDetails || []} />
                   </div>
                 </div>
               )

package/ui/src/components/EditorBreakdown.jsx

@@ -0,0 +1,22 @@
+import EditorDot from './EditorDot'
+import { editorColor, editorLabel } from '../lib/constants'
+
+export default function EditorBreakdown({ editors, total }) {
+  return (
+    <div className="space-y-1.5">
+      {editors.map(([src, count]) => {
+        const pct = total > 0 ? (count / total * 100) : 0
+        return (
+          <div key={src} className="flex items-center gap-2">
+            <EditorDot source={src} size={8} />
+            <span className="text-[10px] w-24" style={{ color: 'var(--c-text)' }}>{editorLabel(src)}</span>
+            <div className="flex-1 h-2 relative" style={{ background: 'var(--c-card)' }}>
+              <div className="h-full" style={{ width: `${pct}%`, background: editorColor(src), opacity: 0.7 }} />
+            </div>
+            <span className="text-[10px] w-10 text-right" style={{ color: 'var(--c-text2)' }}>{count}</span>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/ui/src/components/LiveFeed.jsx

@@ -0,0 +1,138 @@
+import { useState, useEffect, useRef } from 'react'
+import { Radio, MessageSquare, FolderOpen, Cpu } from 'lucide-react'
+import EditorDot from './EditorDot'
+import { editorLabel, formatNumber } from '../lib/constants'
+import { fetchRelayFeed } from '../lib/api'
+
+function timeAgo(ts) {
+  if (!ts) return ''
+  const diff = Date.now() - ts
+  if (diff < 60000) return 'just now'
+  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`
+  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`
+  return `${Math.floor(diff / 86400000)}d ago`
+}
+
+function timeLabel(ts) {
+  if (!ts) return ''
+  const d = new Date(ts)
+  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+export default function LiveFeed({ onSessionClick }) {
+  const [items, setItems] = useState([])
+  const scrollRef = useRef(null)
+  const prevCountRef = useRef(0)
+
+  useEffect(() => {
+    const load = () => {
+      fetchRelayFeed({ limit: 80 })
+        .then(data => {
+          if (Array.isArray(data)) setItems(data)
+        })
+        .catch(() => {})
+    }
+    load()
+    const iv = setInterval(load, 10000)
+    return () => clearInterval(iv)
+  }, [])
+
+  // Group items by relative time buckets
+  const now = Date.now()
+  const buckets = []
+  let currentBucket = null
+
+  for (const item of items) {
+    const diff = now - item.lastUpdatedAt
+    let label
+    if (diff < 300000) label = 'Just now'
+    else if (diff < 3600000) label = `${Math.floor(diff / 60000)} min ago`
+    else if (diff < 86400000) label = `${Math.floor(diff / 3600000)}h ago`
+    else label = new Date(item.lastUpdatedAt).toLocaleDateString()
+
+    if (!currentBucket || currentBucket.label !== label) {
+      currentBucket = { label, items: [] }
+      buckets.push(currentBucket)
+    }
+    currentBucket.items.push(item)
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center gap-2 px-3 py-2.5 shrink-0" style={{ borderBottom: '1px solid var(--c-border)' }}>
+        <Radio size={12} style={{ color: '#22c55e' }} />
+        <span className="text-[11px] font-medium uppercase tracking-wider" style={{ color: 'var(--c-text2)' }}>Live Feed</span>
+        <span className="inline-block w-1.5 h-1.5 rounded-full pulse-dot ml-auto" style={{ background: '#22c55e' }} />
+      </div>
+
+      {/* Feed */}
+      <div ref={scrollRef} className="flex-1 overflow-y-auto scrollbar-thin">
+        {items.length === 0 && (
+          <div className="text-[11px] py-8 text-center" style={{ color: 'var(--c-text3)' }}>
+            No recent activity
+          </div>
+        )}
+
+        {buckets.map((bucket, bi) => (
+          <div key={bi}>
+            {/* Time separator */}
+            <div className="sticky top-0 px-3 py-1.5 text-[9px] font-medium uppercase tracking-wider" style={{ background: 'var(--c-bg)', color: 'var(--c-text3)', borderBottom: '1px solid var(--c-border)' }}>
+              {bucket.label}
+            </div>
+
+            {bucket.items.map((item) => (
+              <div
+                key={`${item.id}-${item.username}`}
+                className="px-3 py-2.5 cursor-pointer transition hover:bg-[var(--c-card)]"
+                style={{ borderBottom: '1px solid var(--c-border)' }}
+                onClick={() => onSessionClick && onSessionClick(item.id, item.username)}
+              >
+                {/* Session name */}
+                <div className="text-[11px] font-medium truncate mb-1" style={{ color: 'var(--c-white)' }}>
+                  {item.name || 'Untitled'}
+                </div>
+
+                {/* User + editor row */}
+                <div className="flex items-center gap-1.5 mb-1">
+                  <span
+                    className="text-[9px] font-medium px-1 py-0.5 shrink-0 truncate max-w-[120px]"
+                    style={{ background: 'rgba(99,102,241,0.12)', color: '#818cf8' }}
+                    title={item.username}
+                  >
+                    {item.username}
+                  </span>
+                  <EditorDot source={item.source} size={6} />
+                  <span className="text-[9px] truncate" style={{ color: 'var(--c-text2)' }}>{editorLabel(item.source)}</span>
+                  <span className="text-[9px] ml-auto shrink-0" style={{ color: 'var(--c-text3)' }}>{timeLabel(item.lastUpdatedAt)}</span>
+                </div>
+
+                {/* Meta row */}
+                <div className="flex items-center gap-2 text-[9px]" style={{ color: 'var(--c-text3)' }}>
+                  {item.totalMessages > 0 && (
+                    <span className="flex items-center gap-0.5">
+                      <MessageSquare size={8} /> {item.totalMessages}
+                    </span>
+                  )}
+                  {item.folder && (
+                    <span className="flex items-center gap-0.5 truncate">
+                      <FolderOpen size={8} /> {item.folder.split('/').pop()}
+                    </span>
+                  )}
+                  {item.mode && (
+                    <span className="px-1 py-0" style={{ background: 'rgba(168,85,247,0.1)', color: '#a855f7' }}>{item.mode}</span>
+                  )}
+                  {item.models?.[0] && (
+                    <span className="flex items-center gap-0.5 ml-auto truncate" style={{ color: '#818cf8' }}>
+                      <Cpu size={8} /> {item.models[0]}
+                    </span>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}