agentlytics 0.0.10 → 0.1.0

package/ui/src/components/LoginScreen.jsx

@@ -0,0 +1,79 @@
+import { useState } from 'react'
+import { Lock } from 'lucide-react'
+import { login } from '../lib/api'
+
+export default function LoginScreen({ onSuccess }) {
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState(null)
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError(null)
+    setLoading(true)
+    try {
+      await login(password)
+      onSuccess()
+    } catch (err) {
+      setError(err.message || 'Invalid password')
+    }
+    setLoading(false)
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4" style={{ background: 'var(--c-bg)' }}>
+      <div className="w-full max-w-xs">
+        <div className="card p-6">
+          <div className="flex flex-col items-center mb-5">
+            <div
+              className="w-10 h-10 flex items-center justify-center rounded-full mb-3"
+              style={{ background: 'rgba(99,102,241,0.12)' }}
+            >
+              <Lock size={18} style={{ color: '#818cf8' }} />
+            </div>
+            <div className="text-sm font-bold" style={{ color: 'var(--c-white)' }}>
+              npx agentlytics
+              <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>
+            </div>
+            <div className="text-[10px] mt-1" style={{ color: 'var(--c-text3)' }}>
+              This relay is password-protected
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-3">
+            <input
+              type="password"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              placeholder="Password"
+              autoFocus
+              className="w-full px-3 py-2 text-[12px] outline-none rounded"
+              style={{
+                background: 'var(--c-bg3)',
+                color: 'var(--c-white)',
+                border: error ? '1px solid #f87171' : '1px solid var(--c-border)',
+              }}
+            />
+            {error && (
+              <div className="text-[10px]" style={{ color: '#f87171' }}>{error}</div>
+            )}
+            <button
+              type="submit"
+              disabled={loading || !password}
+              className="w-full py-2 text-[11px] font-medium rounded transition"
+              style={{
+                background: '#6366f1',
+                color: '#fff',
+                opacity: loading || !password ? 0.5 : 1,
+              }}
+            >
+              {loading ? 'Signing in...' : 'Sign in'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}

package/ui/src/components/MessageRenderer.jsx

@@ -0,0 +1,167 @@
+import { useState } from 'react'
+import { User, Bot, Wrench, Settings, Play, CheckCircle, ChevronRight, ChevronDown } from 'lucide-react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+export 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)' },
+}
+
+export 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 }]
+}
+
+export 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] : ''
+}
+
+export 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 = 12
+  const oldLines = (old || '').split('\n').slice(0, maxLines)
+  const newLines = (nw || '').split('\n').slice(0, maxLines)
+  return (
+    <div className="mt-1.5 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>
+  )
+}
+
+export 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.5 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>
+  )
+}
+
+export 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.5 py-1.5 text-[10px]" style={{ background: 'var(--c-code-bg)', border: '1px solid var(--c-border)' }}>
+      <div className="flex items-center gap-2 cursor-pointer" onClick={() => hasDetail && setOpen(!open)}>
+        {hasDetail
+          ? (open ? <ChevronDown size={10} style={{ color: '#a78bfa' }} /> : <ChevronRight size={10} style={{ color: '#a78bfa' }} />)
+          : <Play size={10} 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>
+  )
+}
+
+export 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.5 py-1.5 text-[10px]" style={{ background: 'var(--c-code-bg)', border: '1px solid var(--c-border)' }}>
+      <div className="flex items-center gap-2 cursor-pointer" onClick={() => preview && setOpen(!open)}>
+        <CheckCircle size={10} 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>
+  )
+}
+
+export default 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"><ReactMarkdown remarkPlugins={[remarkGfm]}>{seg.value}</ReactMarkdown></div>
+  })
+}
+
+/**
+ * Renders a single message bubble with role icon, model tag, and content.
+ */
+export function MessageBubble({ msg, toolCallDetails }) {
+  const cfg = ROLE_CONFIG[msg.role] || ROLE_CONFIG.system
+  const Icon = cfg.icon
+  return (
+    <div className="rounded-r-lg px-4 py-3" style={{ borderLeft: `2px solid ${cfg.borderColor}`, background: cfg.bg }}>
+      <div className="flex items-center gap-2 text-xs mb-2" style={{ color: 'var(--c-text2)' }}>
+        <Icon size={13} />
+        <span className="font-medium">{cfg.label}</span>
+        {msg.model && <span className="font-mono" style={{ color: 'var(--c-accent)', opacity: 0.6 }}>· {msg.model}</span>}
+      </div>
+      <div className="text-sm" style={{ color: 'var(--c-text)' }}>
+        <MessageContent content={msg.content} toolCallDetails={toolCallDetails} />
+      </div>
+    </div>
+  )
+}

package/ui/src/components/ModelBreakdown.jsx

@@ -0,0 +1,23 @@
+import { Cpu } from 'lucide-react'
+
+export default function ModelBreakdown({ models }) {
+  const max = models[0]?.[1] || 1
+  return (
+    <div className="space-y-1.5">
+      {models.map(([name, count]) => {
+        const pct = (count / max * 100)
+        return (
+          <div key={name} className="flex items-center gap-2">
+            <Cpu size={10} style={{ color: '#818cf8' }} />
+            <span className="text-[10px] truncate w-40" style={{ color: 'var(--c-text)' }}>{name}</span>
+            <div className="flex-1 h-2 relative" style={{ background: 'var(--c-card)' }}>
+              <div className="h-full" style={{ width: `${pct}%`, background: '#6366f1', opacity: 0.5 }} />
+            </div>
+            <span className="text-[10px] w-10 text-right" style={{ color: 'var(--c-text2)' }}>{count}</span>
+          </div>
+        )
+      })}
+      {models.length === 0 && <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>No model data</div>}
+    </div>
+  )
+}

package/ui/src/components/SectionTitle.jsx

@@ -0,0 +1,3 @@
+export default function SectionTitle({ children }) {
+  return <h3 className="text-[10px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>{children}</h3>
+}

package/ui/src/lib/api.js

@@ -1,5 +1,49 @@
 export const BASE = '';
 
+// ── Auth helpers ──
+const AUTH_KEY = 'agentlytics_relay_token';
+
+export function getAuthToken() {
+  return localStorage.getItem(AUTH_KEY);
+}
+
+export function setAuthToken(token) {
+  if (token) localStorage.setItem(AUTH_KEY, token);
+  else localStorage.removeItem(AUTH_KEY);
+}
+
+let onAuthFailure = null;
+export function setOnAuthFailure(fn) { onAuthFailure = fn; }
+
+async function authFetch(url, opts = {}) {
+  const token = getAuthToken();
+  if (token) {
+    opts.headers = { ...opts.headers, Authorization: `Bearer ${token}` };
+  }
+  const res = await fetch(url, opts);
+  if (res.status === 401) {
+    setAuthToken(null);
+    if (onAuthFailure) onAuthFailure();
+    throw new Error('Unauthorized');
+  }
+  return res;
+}
+
+export async function login(password) {
+  const res = await fetch(`${BASE}/api/login`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ password }),
+  });
+  if (!res.ok) {
+    const data = await res.json().catch(() => ({}));
+    throw new Error(data.error || 'Login failed');
+  }
+  const data = await res.json();
+  if (data.token) setAuthToken(data.token);
+  return data;
+}
+
 // Append optional dateFrom/dateTo (ms timestamps) to URLSearchParams
 function appendDateParams(q, params) {
   if (params.dateFrom) q.set('dateFrom', params.dateFrom);
@@ -109,3 +153,74 @@ export async function fetchToolCalls(name, opts = {}) {
   const res = await fetch(`${BASE}/api/tool-calls?${q}`);
   return res.json();
 }
+
+// ── Relay API ──
+
+export async function fetchMode() {
+  try {
+    const res = await fetch(`${BASE}/api/mode`);
+    if (!res.ok) return { mode: 'local' };
+    return res.json();
+  } catch {
+    return { mode: 'local' };
+  }
+}
+
+export async function fetchRelayTeamStats() {
+  const res = await authFetch(`${BASE}/relay/team-stats`);
+  return res.json();
+}
+
+export async function fetchRelayUsers() {
+  const res = await authFetch(`${BASE}/relay/users`);
+  return res.json();
+}
+
+export async function fetchRelayUserActivity(username, opts = {}) {
+  const q = new URLSearchParams();
+  if (opts.folder) q.set('folder', opts.folder);
+  if (opts.limit) q.set('limit', opts.limit);
+  const qs = q.toString();
+  const res = await authFetch(`${BASE}/relay/activity/${encodeURIComponent(username)}${qs ? '?' + qs : ''}`);
+  return res.json();
+}
+
+export async function fetchRelaySearch(query, opts = {}) {
+  const q = new URLSearchParams({ q: query });
+  if (opts.username) q.set('username', opts.username);
+  if (opts.folder) q.set('folder', opts.folder);
+  if (opts.limit) q.set('limit', opts.limit);
+  const res = await authFetch(`${BASE}/relay/search?${q}`);
+  return res.json();
+}
+
+export async function fetchRelayFeed(opts = {}) {
+  const q = new URLSearchParams();
+  if (opts.limit) q.set('limit', opts.limit);
+  if (opts.since) q.set('since', opts.since);
+  const qs = q.toString();
+  const res = await authFetch(`${BASE}/relay/feed${qs ? '?' + qs : ''}`);
+  return res.json();
+}
+
+export async function fetchRelayConfig() {
+  const res = await authFetch(`${BASE}/relay/config`);
+  return res.json();
+}
+
+export async function mergeRelayUsers(from, to) {
+  const res = await authFetch(`${BASE}/relay/merge-users`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ from, to }),
+  });
+  return res.json();
+}
+
+export async function fetchRelaySession(chatId, username) {
+  const q = new URLSearchParams();
+  if (username) q.set('username', username);
+  const qs = q.toString();
+  const res = await authFetch(`${BASE}/relay/session/${encodeURIComponent(chatId)}${qs ? '?' + qs : ''}`);
+  return res.json();
+}

package/ui/src/pages/ChatDetail.jsx

@@ -1,156 +1,10 @@
 import { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
-import { ArrowLeft, User, Bot, Wrench, Settings, Play, CheckCircle, ChevronRight, ChevronDown, Download } from 'lucide-react'
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
+import { ArrowLeft, Download } from 'lucide-react'
 import { fetchChat, BASE } from '../lib/api'
 import { editorColor, editorLabel, formatDateTime, formatNumber } from '../lib/constants'
 import KpiCard from '../components/KpiCard'
-
-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)' },
-}
-
-// Parse message content into segments: text, tool-call, tool-result
-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 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 = 12
-  const oldLines = (old || '').split('\n').slice(0, maxLines)
-  const newLines = (nw || '').split('\n').slice(0, maxLines)
-  return (
-    <div className="mt-1.5 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} />
-  // Summarize key 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.5 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.5 py-1.5 text-[10px]" style={{ background: 'var(--c-code-bg)', border: '1px solid var(--c-border)' }}>
-      <div className="flex items-center gap-2 cursor-pointer" onClick={() => hasDetail && setOpen(!open)}>
-        {hasDetail
-          ? (open ? <ChevronDown size={10} style={{ color: '#a78bfa' }} /> : <ChevronRight size={10} style={{ color: '#a78bfa' }} />)
-          : <Play size={10} 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 style={{ color: 'var(--c-text2)' }}>{summarizeToolArgs(name, detail)}</span>}
-      </div>
-      {open && hasDetail && <ToolArgsDetail args={detail} />}
-    </div>
-  )
-}
-
-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 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.5 py-1.5 text-[10px]" style={{ background: 'var(--c-code-bg)', border: '1px solid var(--c-border)' }}>
-      <div className="flex items-center gap-2 cursor-pointer" onClick={() => preview && setOpen(!open)}>
-        <CheckCircle size={10} style={{ color: '#34d399' }} />
-        <span 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"><ReactMarkdown remarkPlugins={[remarkGfm]}>{seg.value}</ReactMarkdown></div>
-  })
-}
+import { MessageBubble } from '../components/MessageRenderer'
 
 export default function ChatDetail() {
   const { id } = useParams()
@@ -241,22 +95,9 @@ export default function ChatDetail() {
             {chat.encrypted ? '🔒 This conversation is encrypted.' : 'No messages found.'}
           </div>
         )}
-        {chat.messages.map((msg, i) => {
-          const cfg = ROLE_CONFIG[msg.role] || ROLE_CONFIG.system
-          const Icon = cfg.icon
-          return (
-            <div key={i} className="rounded-r-lg px-4 py-3" style={{ borderLeft: `2px solid ${cfg.borderColor}`, background: cfg.bg }}>
-              <div className="flex items-center gap-2 text-xs mb-2" style={{ color: 'var(--c-text2)' }}>
-                <Icon size={13} />
-                <span className="font-medium">{cfg.label}</span>
-                {msg.model && <span className="font-mono" style={{ color: 'var(--c-accent)', opacity: 0.6 }}>· {msg.model}</span>}
-              </div>
-              <div className="text-sm" style={{ color: 'var(--c-text)' }}>
-                <MessageContent content={msg.content} toolCallDetails={chat.toolCallDetails} />
-              </div>
-            </div>
-          )
-        })}
+        {chat.messages.map((msg, i) => (
+          <MessageBubble key={i} msg={msg} toolCallDetails={chat.toolCallDetails} />
+        ))}
       </div>
     </div>
   )

package/ui/src/pages/Dashboard.jsx

@@ -9,6 +9,7 @@ import DateRangePicker from '../components/DateRangePicker'
 import { editorColor, editorLabel, formatNumber, dateRangeToApiParams } from '../lib/constants'
 import { fetchDailyActivity, fetchOverview as fetchOverviewApi, fetchDashboardStats, fetchShareImage } from '../lib/api'
 import { useTheme } from '../lib/theme'
+import SectionTitle from '../components/SectionTitle'
 
 ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, PointElement, LineElement, Filler)
 
@@ -20,10 +21,6 @@ const MODE_COLORS = {
   copilot: '#f59e0b', thread: '#ec4899', opencode: '#f43f5e', claude: '#f97316',
 }
 
-function SectionTitle({ children }) {
-  return <h3 className="text-[10px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>{children}</h3>
-}
-
 export default function Dashboard({ overview }) {
   const navigate = useNavigate()
   const [dailyData, setDailyData] = useState(null)