agentlytics 0.1.9 → 0.1.11

package/ui/src/components/ShareModal.jsx

@@ -0,0 +1,273 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { X, Download, Share2, BarChart3, DollarSign, Clock, Cpu, Braces, User, Sun, Moon } from 'lucide-react'
+import { fetchShareImage } from '../lib/api'
+
+const TOGGLE_ITEMS = [
+  { key: 'showEditors', label: 'Editors', icon: BarChart3 },
+  { key: 'showCosts', label: 'Est. Costs', icon: DollarSign },
+  { key: 'showHours', label: 'Peak Hours', icon: Clock },
+  { key: 'showModels', label: 'Top Models', icon: Cpu },
+  { key: 'showTokens', label: 'Token Footer', icon: Braces },
+]
+
+export default function ShareModal({ open, onClose }) {
+  const [opts, setOpts] = useState({
+    showEditors: true,
+    showCosts: true,
+    showHours: true,
+    showModels: true,
+    showTokens: true,
+    username: '',
+    theme: 'dark',
+  })
+  const [svg, setSvg] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [downloading, setDownloading] = useState(false)
+  const debounceRef = useRef(null)
+  const backdropRef = useRef(null)
+
+  const loadPreview = useCallback(async (currentOpts) => {
+    setLoading(true)
+    try {
+      const result = await fetchShareImage(currentOpts)
+      if (result && !result.startsWith('{')) setSvg(result)
+    } catch (e) {
+      console.error('Preview failed:', e)
+    }
+    setLoading(false)
+  }, [])
+
+  useEffect(() => {
+    if (!open) return
+    loadPreview(opts)
+  }, [open])
+
+  const updateOpt = (key, value) => {
+    const next = { ...opts, [key]: value }
+    setOpts(next)
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    debounceRef.current = setTimeout(() => loadPreview(next), 300)
+  }
+
+  const handleDownloadPng = async () => {
+    if (!svg) return
+    setDownloading(true)
+    try {
+      const canvas = document.createElement('canvas')
+      canvas.width = 1200
+      canvas.height = 675
+      const ctx = canvas.getContext('2d')
+      const img = new Image()
+      const svgB64 = btoa(unescape(encodeURIComponent(svg)))
+      const dataUrl = `data:image/svg+xml;base64,${svgB64}`
+      await new Promise((resolve, reject) => {
+        img.onload = resolve
+        img.onerror = reject
+        img.src = dataUrl
+      })
+      ctx.drawImage(img, 0, 0, 1200, 675)
+      const pngUrl = canvas.toDataURL('image/png')
+      const a = document.createElement('a')
+      a.href = pngUrl
+      a.download = 'agentlytics.png'
+      a.click()
+    } catch {
+      const blob = new Blob([svg], { type: 'image/svg+xml' })
+      const a = document.createElement('a')
+      a.href = URL.createObjectURL(blob)
+      a.download = 'agentlytics.svg'
+      a.click()
+      URL.revokeObjectURL(a.href)
+    }
+    setDownloading(false)
+  }
+
+  const handleDownloadSvg = () => {
+    if (!svg) return
+    const blob = new Blob([svg], { type: 'image/svg+xml' })
+    const a = document.createElement('a')
+    a.href = URL.createObjectURL(blob)
+    a.download = 'agentlytics.svg'
+    a.click()
+    URL.revokeObjectURL(a.href)
+  }
+
+  const handleShareTwitter = async () => {
+    await handleDownloadPng()
+    const text = encodeURIComponent("Here's my agentic coding stats using github.com/f/agentlytics")
+    window.open(`https://x.com/intent/post?text=${text}`, '_blank')
+  }
+
+  if (!open) return null
+
+  return (
+    <div
+      ref={backdropRef}
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      style={{ background: 'rgba(0,0,0,0.85)', backdropFilter: 'blur(8px)' }}
+      onClick={(e) => e.target === backdropRef.current && onClose()}
+    >
+      <div
+        className="w-full relative flex flex-col"
+        style={{
+          maxWidth: 960,
+          maxHeight: '90vh',
+          background: 'var(--c-bg)',
+          border: '1px solid var(--c-border)',
+          borderRadius: 12,
+        }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-3" style={{ borderBottom: '1px solid var(--c-border)' }}>
+          <div className="flex items-center gap-2">
+            <Share2 size={14} style={{ color: 'var(--c-accent)' }} />
+            <span className="text-[13px] font-semibold" style={{ color: 'var(--c-white)' }}>Share Stats</span>
+          </div>
+          <button onClick={onClose} className="p-1 rounded hover:opacity-70 transition" style={{ color: 'var(--c-text2)' }}>
+            <X size={16} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-auto p-5" style={{ minHeight: 0 }}>
+          <div className="flex gap-5" style={{ flexDirection: 'row' }}>
+
+            {/* Sidebar: toggles */}
+            <div className="flex-shrink-0" style={{ width: 200 }}>
+              <div className="text-[11px] font-medium mb-3" style={{ color: 'var(--c-text2)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                Customize
+              </div>
+
+              <div className="space-y-1.5">
+                {TOGGLE_ITEMS.map(({ key, label, icon: Icon }) => {
+                  const active = opts[key]
+                  return (
+                    <button
+                      key={key}
+                      onClick={() => updateOpt(key, !active)}
+                      className="flex items-center gap-2 w-full px-2.5 py-2 rounded-md text-[12px] transition"
+                      style={{
+                        background: active ? 'var(--c-accent-bg, rgba(99,102,241,0.1))' : 'transparent',
+                        border: `1px solid ${active ? 'var(--c-accent, #6366f1)' : 'var(--c-border)'}`,
+                        color: active ? 'var(--c-accent, #818cf8)' : 'var(--c-text2)',
+                        opacity: active ? 1 : 0.6,
+                      }}
+                    >
+                      <Icon size={12} />
+                      {label}
+                    </button>
+                  )
+                })}
+              </div>
+
+              <div className="mt-4">
+                <div className="text-[11px] font-medium mb-2" style={{ color: 'var(--c-text2)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                  Theme
+                </div>
+                <div className="flex gap-1.5">
+                  {[{ key: 'dark', icon: Moon, label: 'Dark' }, { key: 'light', icon: Sun, label: 'Light' }].map(({ key, icon: Icon, label }) => {
+                    const active = opts.theme === key
+                    return (
+                      <button
+                        key={key}
+                        onClick={() => updateOpt('theme', key)}
+                        className="flex items-center gap-1.5 flex-1 justify-center px-2 py-1.5 rounded-md text-[11px] transition"
+                        style={{
+                          background: active ? 'var(--c-accent-bg, rgba(99,102,241,0.1))' : 'transparent',
+                          border: `1px solid ${active ? 'var(--c-accent, #6366f1)' : 'var(--c-border)'}`,
+                          color: active ? 'var(--c-accent, #818cf8)' : 'var(--c-text2)',
+                          opacity: active ? 1 : 0.6,
+                        }}
+                      >
+                        <Icon size={11} />
+                        {label}
+                      </button>
+                    )
+                  })}
+                </div>
+              </div>
+
+              <div className="mt-4">
+                <div className="text-[11px] font-medium mb-2" style={{ color: 'var(--c-text2)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                  Username
+                </div>
+                <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md" style={{ border: '1px solid var(--c-border)', background: 'var(--c-bg)' }}>
+                  <User size={11} style={{ color: 'var(--c-text3)' }} />
+                  <input
+                    type="text"
+                    placeholder="optional"
+                    value={opts.username}
+                    onChange={(e) => updateOpt('username', e.target.value)}
+                    className="bg-transparent outline-none text-[12px] w-full"
+                    style={{ color: 'var(--c-text)' }}
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Preview */}
+            <div className="flex-1 min-w-0">
+              <div className="text-[11px] font-medium mb-3" style={{ color: 'var(--c-text2)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                Preview
+              </div>
+              <div
+                className="rounded-lg overflow-hidden relative"
+                style={{
+                  border: '1px solid var(--c-border)',
+                  background: '#09090f',
+                  minHeight: 200,
+                }}
+              >
+                {loading && (
+                  <div className="absolute inset-0 flex items-center justify-center" style={{ background: 'rgba(0,0,0,0.5)', zIndex: 2 }}>
+                    <span className="text-[12px]" style={{ color: 'var(--c-text2)' }}>Generating...</span>
+                  </div>
+                )}
+                {svg && (
+                  <div
+                    className="w-full [&>svg]:w-full [&>svg]:h-auto [&>svg]:block"
+                    dangerouslySetInnerHTML={{ __html: svg }}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer: actions */}
+        <div className="flex items-center justify-between px-5 py-3" style={{ borderTop: '1px solid var(--c-border)' }}>
+          <span className="text-[11px]" style={{ color: 'var(--c-text3)' }}>
+            Tip: Toggle sections to customize your share card
+          </span>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleDownloadSvg}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-[12px] rounded-md transition hover:opacity-80"
+              style={{ border: '1px solid var(--c-border)', color: 'var(--c-text)' }}
+            >
+              <Download size={12} />
+              SVG
+            </button>
+            <button
+              onClick={handleDownloadPng}
+              disabled={downloading}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-[12px] rounded-md transition hover:opacity-80"
+              style={{ border: '1px solid var(--c-border)', color: 'var(--c-text)', opacity: downloading ? 0.5 : 1 }}
+            >
+              <Download size={12} />
+              {downloading ? 'Converting...' : 'PNG'}
+            </button>
+            <button
+              onClick={handleShareTwitter}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-[12px] rounded-md transition hover:opacity-80"
+              style={{ background: '#6366f1', color: '#fff' }}
+            >
+              <Share2 size={12} />
+              Share on X
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/ui/src/lib/api.js

@@ -180,8 +180,17 @@ export async function fetchSchema() {
   return res.json();
 }
 
-export async function fetchShareImage() {
-  const res = await fetch(`${BASE}/api/share-image`);
+export async function fetchShareImage(opts = {}) {
+  const q = new URLSearchParams();
+  if (opts.showEditors !== undefined) q.set('showEditors', opts.showEditors);
+  if (opts.showModels !== undefined) q.set('showModels', opts.showModels);
+  if (opts.showCosts !== undefined) q.set('showCosts', opts.showCosts);
+  if (opts.showTokens !== undefined) q.set('showTokens', opts.showTokens);
+  if (opts.showHours !== undefined) q.set('showHours', opts.showHours);
+  if (opts.username) q.set('username', opts.username);
+  if (opts.theme) q.set('theme', opts.theme);
+  const qs = q.toString();
+  const res = await fetch(`${BASE}/api/share-image${qs ? '?' + qs : ''}`);
   return res.text();
 }
 
@@ -210,11 +219,6 @@ export async function fetchRelayTeamStats() {
   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);

package/ui/src/pages/Dashboard.jsx

@@ -8,8 +8,9 @@ import ActivityHeatmap from '../components/ActivityHeatmap'
 import DateRangePicker from '../components/DateRangePicker'
 import { editorColor, editorLabel, formatNumber, formatCost, dateRangeToApiParams } from '../lib/constants'
 import EditorIcon from '../components/EditorIcon'
-import { fetchDailyActivity, fetchOverview as fetchOverviewApi, fetchDashboardStats, fetchShareImage, fetchChats, fetchCosts } from '../lib/api'
+import { fetchDailyActivity, fetchOverview as fetchOverviewApi, fetchDashboardStats, fetchChats, fetchCosts } from '../lib/api'
 import ChatSidebar from '../components/ChatSidebar'
+import ShareModal from '../components/ShareModal'
 import { useTheme } from '../lib/theme'
 import SectionTitle from '../components/SectionTitle'
 
@@ -32,7 +33,7 @@ export default function Dashboard({ overview }) {
   const [dateRange, setDateRange] = useState(null)
   const { dark } = useTheme()
   const [costs, setCosts] = useState(null)
-  const [sharing, setSharing] = useState(false)
+  const [shareOpen, setShareOpen] = useState(false)
   const [largeContextChats, setLargeContextChats] = useState(null)
   const [selectedChatId, setSelectedChatId] = useState(null)
   const txtColor = dark ? '#888' : '#555'
@@ -169,54 +170,6 @@ export default function Dashboard({ overview }) {
     return s + v * midpoints[i]
   }, 0) / tk.sessions).toFixed(1) : '—') : '—'
 
-  const handleShare = async () => {
-    setSharing(true)
-    try {
-      const svg = await fetchShareImage()
-      if (!svg || svg.startsWith('{')) throw new Error('Failed to fetch image')
-
-      // Try PNG conversion via canvas, fallback to SVG download
-      let downloaded = false
-      try {
-        const canvas = document.createElement('canvas')
-        canvas.width = 1600
-        canvas.height = 880
-        const ctx = canvas.getContext('2d')
-        const img = new Image()
-        const svgB64 = btoa(unescape(encodeURIComponent(svg)))
-        const dataUrl = `data:image/svg+xml;base64,${svgB64}`
-        await new Promise((resolve, reject) => {
-          img.onload = resolve
-          img.onerror = reject
-          img.src = dataUrl
-        })
-        ctx.drawImage(img, 0, 0, 1600, 880)
-        const pngUrl = canvas.toDataURL('image/png')
-        const a = document.createElement('a')
-        a.href = pngUrl
-        a.download = 'agentlytics.png'
-        a.click()
-        downloaded = true
-      } catch {
-        // Fallback: download SVG directly
-        const blob = new Blob([svg], { type: 'image/svg+xml' })
-        const a = document.createElement('a')
-        a.href = URL.createObjectURL(blob)
-        a.download = 'agentlytics.svg'
-        a.click()
-        URL.revokeObjectURL(a.href)
-        downloaded = true
-      }
-
-      if (downloaded) {
-        const text = encodeURIComponent("Here's my agentic coding stats using github.com/f/agentlytics")
-        window.open(`https://x.com/intent/post?text=${text}`, '_blank')
-      }
-    } catch (e) {
-      console.error('Share failed:', e)
-    }
-    setSharing(false)
-  }
 
   return (
     <div className="fade-in space-y-3">
@@ -224,13 +177,12 @@ export default function Dashboard({ overview }) {
       <div className="flex items-center justify-end gap-3">
         <DateRangePicker value={dateRange} onChange={setDateRange} />
         <button
-          onClick={handleShare}
-          disabled={sharing}
+          onClick={() => setShareOpen(true)}
           className="flex items-center gap-1.5 px-3 py-1 text-[12px] rounded-md transition hover:opacity-80"
-          style={{ background: '#6366f1', color: '#fff', opacity: sharing ? 0.5 : 1 }}
+          style={{ background: '#6366f1', color: '#fff' }}
         >
           <Share2 size={12} />
-          {sharing ? 'Generating...' : 'Share Stats'}
+          Share Stats
         </button>
       </div>
 
@@ -561,6 +513,7 @@ export default function Dashboard({ overview }) {
         )}
       </div>
       <ChatSidebar chatId={selectedChatId} onClose={() => setSelectedChatId(null)} />
+      <ShareModal open={shareOpen} onClose={() => setShareOpen(false)} />
     </div>
   )
 }

package/ui/src/pages/DeepAnalysis.jsx

@@ -1,9 +1,9 @@
 import { useState, useEffect, useRef, useMemo } from 'react'
 import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement } from 'chart.js'
 import { Doughnut, Bar } from 'react-chartjs-2'
-import { Loader2, X, ArrowRight, Zap, MessageSquare, Wrench, Cpu, TrendingUp, BarChart3 } from 'lucide-react'
+import { Loader2, X, Zap, MessageSquare, Wrench, Cpu, TrendingUp } from 'lucide-react'
 import { fetchDeepAnalytics, fetchToolCalls, fetchCosts } from '../lib/api'
-import { editorLabel, editorColor, formatNumber, formatCost, formatDateTime, dateRangeToApiParams } from '../lib/constants'
+import { editorLabel, editorColor, formatNumber, formatCost, dateRangeToApiParams } from '../lib/constants'
 import { useTheme } from '../lib/theme'
 import KpiCard from '../components/KpiCard'
 import EditorIcon from '../components/EditorIcon'

package/ui/src/pages/ProjectDetail.jsx

@@ -80,7 +80,6 @@ export default function ProjectDetail() {
   if (!project) return <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text3)' }}>project not found</div>
 
   const editorEntries = Object.entries(project.editors).sort((a, b) => b[1] - a[1])
-  const maxEditorCount = editorEntries.length > 0 ? editorEntries[0][1] : 1
   const allEnabled = !enabledEditors || enabledEditors.size === editorEntries.length
 
   // Derive stats from editor-filtered chats

package/ui/src/pages/Projects.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement } from 'chart.js'
 import { Doughnut, Bar } from 'react-chartjs-2'
-import { Search, MessageSquare, Wrench, Cpu, FolderOpen, Calendar, ArrowRight } from 'lucide-react'
+import { Search, MessageSquare, Wrench, Cpu, FolderOpen, Calendar } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
 import { fetchProjects, fetchCosts } from '../lib/api'
 import { editorColor, editorLabel, formatNumber, formatCost, formatDate, dateRangeToApiParams } from '../lib/constants'

package/ui/src/pages/RelayDashboard.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Users, Cpu, ArrowRight, Search, Merge, MessageSquare, Zap, FolderOpen, ChevronDown, ChevronRight, User } from 'lucide-react'
+import { Users, Search, Merge, MessageSquare, FolderOpen, ChevronDown, ChevronRight } from 'lucide-react'
 import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement } from 'chart.js'
 import { Doughnut, Bar } from 'react-chartjs-2'
 import KpiCard from '../components/KpiCard'
@@ -36,7 +36,7 @@ function ProportionBar({ segments, height = 6 }) {
 }
 
 // Left sidebar: team members grouped by project (folder-tree view)
-function TeamSidebar({ userList, userColorMap, onUserClick, selectedUser }) {
+function TeamSidebar({ userList, userColorMap, selectedUser }) {
   const [collapsed, setCollapsed] = useState(new Set())
   const navigate = useNavigate()
 

package/ui/src/pages/RelayUserDetail.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useMemo } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
-import { ArrowLeft, MessageSquare, FolderOpen, ChevronDown, ChevronRight, Zap, Clock, Hash } from 'lucide-react'
+import { ArrowLeft, MessageSquare, FolderOpen, ChevronDown, ChevronRight, Hash } 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'
@@ -37,7 +37,6 @@ function ProportionBar({ segments, height = 6 }) {
 // Left sidebar: sessions grouped by project (folder-tree)
 function SessionSidebar({ sessions, projects, selectedChat, onSelectChat }) {
   const [collapsed, setCollapsed] = useState(new Set())
-  const [filter, setFilter] = useState(null) // null = all, or project path
 
   const toggle = (key) => {
     setCollapsed(prev => {
@@ -142,7 +141,6 @@ export default function RelayUserDetail() {
   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(() => {
     if (username) {

package/ui/src/components/EditorBreakdown.jsx

@@ -1,22 +0,0 @@
-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-[11px] 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-[11px] w-10 text-right" style={{ color: 'var(--c-text2)' }}>{count}</span>
-          </div>
-        )
-      })}
-    </div>
-  )
-}

package/ui/src/components/ModelBreakdown.jsx

@@ -1,23 +0,0 @@
-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-[11px] 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-[11px] w-10 text-right" style={{ color: 'var(--c-text2)' }}>{count}</span>
-          </div>
-        )
-      })}
-      {models.length === 0 && <div className="text-[11px]" style={{ color: 'var(--c-text3)' }}>No model data</div>}
-    </div>
-  )
-}

package/ui/src/pages/ChatDetail.jsx

@@ -1,107 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
-import { ArrowLeft, Download } from 'lucide-react'
-import { fetchChat, fetchCosts, BASE } from '../lib/api'
-import { editorColor, editorLabel, formatDateTime, formatNumber, formatCost } from '../lib/constants'
-import KpiCard from '../components/KpiCard'
-import { MessageBubble } from '../components/MessageRenderer'
-
-export default function ChatDetail() {
-  const { id } = useParams()
-  const navigate = useNavigate()
-  const [chat, setChat] = useState(null)
-  const [costs, setCosts] = useState(null)
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    setLoading(true)
-    fetchChat(id).then(data => {
-      setChat(data)
-      fetchCosts({ chatId: data.id }).then(setCosts)
-      setLoading(false)
-    })
-  }, [id])
-
-  if (loading) return <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text2)' }}>Loading conversation...</div>
-  if (!chat) return <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text2)' }}>Chat not found.</div>
-
-  const s = chat.stats
-
-  return (
-    <div className="fade-in max-w-4xl mx-auto">
-      <button
-        onClick={() => navigate(-1)}
-        className="flex items-center gap-2 text-sm mb-4 transition"
-        style={{ color: 'var(--c-text2)' }}
-      >
-        <ArrowLeft size={16} /> Back
-      </button>
-
-      {/* Header */}
-      <div className="card p-5 mb-4">
-        <div className="flex items-start justify-between">
-          <div className="flex-1 min-w-0">
-            <h2 className="text-xl font-semibold mb-1" style={{ color: 'var(--c-white)' }}>{chat.name || '(untitled)'}</h2>
-            <div className="flex items-center gap-3 text-xs" style={{ color: 'var(--c-text2)' }}>
-              <span className="inline-flex items-center gap-1.5">
-                <span className="w-2 h-2 rounded-full" style={{ background: editorColor(chat.source) }} />
-                {editorLabel(chat.source)}
-              </span>
-              {chat.mode && <span>· {chat.mode}</span>}
-              {chat.folder && <span className="font-mono">· {chat.folder}</span>}
-            </div>
-            <div className="text-xs mt-1" style={{ color: 'var(--c-text3)' }}>
-              {formatDateTime(chat.createdAt)}
-              {chat.lastUpdatedAt && chat.lastUpdatedAt !== chat.createdAt && ` — ${formatDateTime(chat.lastUpdatedAt)}`}
-              <span className="ml-3 font-mono" style={{ color: 'var(--c-text3)' }}>{chat.id}</span>
-            </div>
-          </div>
-          <a
-            href={`${BASE}/api/chats/${chat.id}/markdown`}
-            download
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition shrink-0"
-            style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
-            onMouseEnter={e => e.currentTarget.style.background = 'var(--c-bg2)'}
-            onMouseLeave={e => e.currentTarget.style.background = 'var(--c-bg3)'}
-          >
-            <Download size={13} /> Export .md
-          </a>
-        </div>
-      </div>
-
-      {/* Stats */}
-      {s && (
-        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3 mb-4">
-          <KpiCard label="Messages" value={s.totalMessages} />
-          <KpiCard label="User" value={s.userMessages} />
-          <KpiCard label="Assistant" value={s.assistantMessages} />
-          <KpiCard label="Tool Calls" value={s.toolCalls.length} />
-          {s.totalInputTokens > 0 && <KpiCard label="Input Tokens" value={formatNumber(s.totalInputTokens)} />}
-          {s.totalOutputTokens > 0 && <KpiCard label="Output Tokens" value={formatNumber(s.totalOutputTokens)} />}
-          {costs && costs.totalCost > 0 && <KpiCard label="Est. Cost" value={formatCost(costs.totalCost)} />}
-        </div>
-      )}
-
-      {/* Model badges */}
-      {s && s.models.length > 0 && (
-        <div className="flex flex-wrap gap-2 mb-4">
-          {[...new Set(s.models)].map(m => (
-            <span key={m} className="text-xs bg-accent/10 text-accent-light px-2.5 py-1 rounded-full font-mono">{m}</span>
-          ))}
-        </div>
-      )}
-
-      {/* Messages */}
-      <div className="space-y-3">
-        {chat.messages.length === 0 && (
-          <div className="text-center py-12 text-sm" style={{ color: 'var(--c-text2)' }}>
-            {chat.encrypted ? '🔒 This conversation is encrypted.' : 'No messages found.'}
-          </div>
-        )}
-        {chat.messages.map((msg, i) => (
-          <MessageBubble key={i} msg={msg} toolCallDetails={chat.toolCallDetails} />
-        ))}
-      </div>
-    </div>
-  )
-}

package/ui/src/pages/RelaySessionDetail.jsx

@@ -1,32 +0,0 @@
-import { useCallback } from 'react'
-import { useParams, useSearchParams, useNavigate } from 'react-router-dom'
-import { fetchRelaySession } from '../lib/api'
-import ChatSidebar from '../components/ChatSidebar'
-
-export default function RelaySessionDetail() {
-  const { chatId } = useParams()
-  const [searchParams] = useSearchParams()
-  const username = searchParams.get('username')
-  const navigate = useNavigate()
-
-  const fetchFn = useCallback(
-    (id) => fetchRelaySession(id, username),
-    [username]
-  )
-
-  const extraHeader = username ? (
-    <span className="text-[11px] font-medium px-1.5 py-0.5 shrink-0" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>
-      {username}
-    </span>
-  ) : null
-
-  return (
-    <ChatSidebar
-      chatId={chatId}
-      onClose={() => navigate(-1)}
-      fetchFn={fetchFn}
-      username={username}
-      extraHeader={extraHeader}
-    />
-  )
-}