agentlytics 0.1.3 → 0.1.6

package/ui/package.json

@@ -35,4 +35,4 @@
   "overrides": {
     "vite": "^8.0.0-beta.13"
   }
-}
+}

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, Users, Radio, Plug, Copy, Check } from 'lucide-react'
+import { Activity, BarChart3, GitCompare, MessageSquare, FolderOpen, DollarSign, 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 AnimatedLogo from './components/AnimatedLogo'
 import LoginScreen from './components/LoginScreen'
 import Dashboard from './pages/Dashboard'
 import Sessions from './pages/Sessions'
@@ -11,6 +12,7 @@ import Compare from './pages/Compare'
 import ChatDetail from './pages/ChatDetail'
 import Projects from './pages/Projects'
 import ProjectDetail from './pages/ProjectDetail'
+import CostAnalysis from './pages/CostAnalysis'
 import SqlViewer from './pages/SqlViewer'
 import RelayDashboard from './pages/RelayDashboard'
 import RelayUserDetail from './pages/RelayUserDetail'
@@ -85,6 +87,7 @@ export default function App() {
     { to: '/', icon: Activity, label: 'Dashboard' },
     { to: '/projects', icon: FolderOpen, label: 'Projects' },
     { to: '/sessions', icon: MessageSquare, label: 'Sessions' },
+    { to: '/costs', icon: DollarSign, label: 'Costs' },
     { to: '/analysis', icon: BarChart3, label: 'Analysis' },
     { to: '/compare', icon: GitCompare, label: 'Compare' },
     { to: '/sql', icon: Database, label: 'SQL' },
@@ -97,8 +100,9 @@ export default function App() {
   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{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 className="flex items-center gap-1.5 text-xs font-bold tracking-tight" style={{ color: 'var(--c-white)' }}>
+          <AnimatedLogo size={18} />
+          Agentlytics{isRelay && <span className="ml-1.5 text-[10px] 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 }) => (
@@ -107,7 +111,7 @@ export default function App() {
               to={to}
               end={to === '/'}
               className={({ isActive }) =>
-                `flex items-center gap-1.5 px-2.5 py-1 text-[11px] rounded transition ${
+                `flex items-center gap-1.5 px-2.5 py-1 text-[12px] rounded transition ${
                   isActive ? 'bg-[var(--c-card)] text-[var(--c-white)]' : 'text-[var(--c-text2)] hover:text-[var(--c-white)]'
                 }`
               }
@@ -122,7 +126,7 @@ export default function App() {
             <>
               <button
                 onClick={() => setLive(!live)}
-                className="flex items-center gap-1.5 px-2 py-0.5 text-[10px] transition"
+                className="flex items-center gap-1.5 px-2 py-0.5 text-[11px] transition"
                 style={{
                   color: live ? '#22c55e' : 'var(--c-text3)',
                   border: live ? '1px solid rgba(34,197,94,0.3)' : '1px solid var(--c-border)',
@@ -139,7 +143,7 @@ export default function App() {
               <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)]"
+                className="flex items-center gap-1 px-2 py-0.5 text-[11px] 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"
               >
@@ -148,7 +152,7 @@ export default function App() {
                   ? `Refetching (${refetchState.scanned}/${refetchState.total})...`
                   : 'Refetch'}
               </button>
-              <span className="text-[10px]" style={{ color: 'var(--c-text2)' }}>
+              <span className="text-[11px]" style={{ color: 'var(--c-text2)' }}>
                 {overview ? `${overview.totalChats} sessions` : '...'}
               </span>
             </>
@@ -156,7 +160,7 @@ export default function App() {
           {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)]"
+              className="flex items-center gap-1.5 px-2 py-0.5 text-[11px] transition hover:bg-[var(--c-card)]"
               style={{ color: '#818cf8', border: '1px solid var(--c-border)' }}
               title="MCP Connection"
             >
@@ -176,7 +180,7 @@ export default function App() {
       </header>
 
       {refetchState && (
-        <div className="flex items-center gap-2 px-4 py-1.5 text-[11px]" style={{ background: 'rgba(234,179,8,0.08)', borderBottom: '1px solid rgba(234,179,8,0.15)', color: '#ca8a04' }}>
+        <div className="flex items-center gap-2 px-4 py-1.5 text-[12px]" style={{ background: 'rgba(234,179,8,0.08)', borderBottom: '1px solid rgba(234,179,8,0.15)', color: '#ca8a04' }}>
           <AlertTriangle size={12} />
           <span>Windsurf, Windsurf Next, and Antigravity require their app to be running during refetch — otherwise their sessions won't be detected.</span>
         </div>
@@ -198,6 +202,7 @@ export default function App() {
             <Route path="/projects/detail" element={<ProjectDetail />} />
             <Route path="/sessions" element={<Sessions overview={overview} />} />
             {/* ChatDetail is now a sidebar in Sessions */}
+            <Route path="/costs" element={<CostAnalysis overview={overview} />} />
             <Route path="/analysis" element={<DeepAnalysis overview={overview} />} />
             <Route path="/compare" element={<Compare overview={overview} />} />
             <Route path="/sql" element={<SqlViewer />} />
@@ -205,7 +210,7 @@ export default function App() {
         )}
       </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)' }}>
+      <footer className="border-t mt-8 px-4 py-3 flex items-center justify-between text-[11px]" style={{ borderColor: 'var(--c-border)', color: 'var(--c-text3)' }}>
         <div className="flex items-center gap-3">
           <a href="https://github.com/f/agentlytics" target="_blank" rel="noopener noreferrer" className="flex items-center gap-1 hover:text-[var(--c-text)] transition">
             <Github size={11} />
@@ -237,9 +242,9 @@ export default function App() {
               <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="text-[12px] 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>
+              <div className="text-[10px]" 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)
@@ -247,21 +252,21 @@ export default function App() {
                   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)]"
+                className="flex items-center gap-1 px-1.5 py-0.5 text-[10px] 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"
+              className="text-[11px] 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>
+            <div className="text-[12px] font-medium mb-1.5" style={{ color: 'var(--c-white)' }}>Join Command</div>
+            <div className="text-[10px] 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"
+              className="text-[11px] 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>

package/ui/src/components/ActivityHeatmap.jsx

@@ -144,7 +144,7 @@ export default function ActivityHeatmap({ dailyData }) {
         </svg>
       </div>
 
-      <div className="flex items-center gap-1.5 mt-1 text-[9px]" style={{ color: 'var(--c-text3)' }}>
+      <div className="flex items-center gap-1.5 mt-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
         <span>less</span>
         {COLORS.map((color, i) => (
           <span key={i} className="inline-block w-[9px] h-[9px] rounded-sm" style={{ background: color }} />
@@ -158,13 +158,13 @@ export default function ActivityHeatmap({ dailyData }) {
           <div className="flex items-center justify-between mb-2">
             <div>
               <span className="text-xs font-medium" style={{ color: 'var(--c-white)' }}>{selectedDay.key}</span>
-              <span className="text-[10px] ml-2" style={{ color: 'var(--c-text2)' }}>
+              <span className="text-[11px] ml-2" style={{ color: 'var(--c-text2)' }}>
                 {selectedDay.count} session{selectedDay.count !== 1 ? 's' : ''}
                 {' · '}
                 {Object.entries(selectedDay.data.editors || {}).map(([e, c]) => `${editorLabel(e)}: ${c}`).join(', ')}
               </span>
             </div>
-            <button onClick={() => setSelectedDay(null)} className="text-[10px] transition" style={{ color: 'var(--c-text2)' }}>close</button>
+            <button onClick={() => setSelectedDay(null)} className="text-[11px] transition" style={{ color: 'var(--c-text2)' }}>close</button>
           </div>
           {hourlyChart && (
             <div style={{ height: 140 }}>

package/ui/src/components/AnimatedLogo.jsx

@@ -0,0 +1,96 @@
+export default function AnimatedLogo({ size = 22 }) {
+  // Carousel: a horizontal strip of bots slides left continuously.
+  // The viewport shows one bot at a time. The next bot pushes the current one out.
+  // 5 slots (4 bots + repeat of first) for seamless loop.
+  const step = 28 // each bot cell width
+  // Keyframes: hold on each bot, then slide to the next.
+  // 4 stops: 0→1→2→3→0 (repeat first = slot 4)
+  // Each stop: 5% slide + 20% hold = 25% per bot
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      style={{ overflow: 'hidden' }}
+    >
+      <style>{`
+        @keyframes carousel {
+          0%    { transform: translateX(0); }
+          5%    { transform: translateX(0); }
+          25%   { transform: translateX(-${step}px); }
+          30%   { transform: translateX(-${step}px); }
+          50%   { transform: translateX(-${step * 2}px); }
+          55%   { transform: translateX(-${step * 2}px); }
+          75%   { transform: translateX(-${step * 3}px); }
+          80%   { transform: translateX(-${step * 3}px); }
+          100%  { transform: translateX(-${step * 4}px); }
+        }
+        .carousel-strip { animation: carousel 4s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
+      `}</style>
+
+      <g className="carousel-strip">
+        {/* Slot 0: Bot 1 — indigo */}
+        <g transform="translate(0, 0)" stroke="#818cf8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 8V4H8"/>
+          <rect width="16" height="12" x="4" y="8" rx="2"/>
+          <path d="M2 14h2"/>
+          <path d="M20 14h2"/>
+          <path d="M15 13v2"/>
+          <path d="M9 13v2"/>
+        </g>
+
+        {/* Slot 1: Bot 2 — pink */}
+        <g transform={`translate(${step}, 0)`} stroke="#f472b6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 6V2H8"/>
+          <path d="M15 11v2"/>
+          <path d="M2 12h2"/>
+          <path d="M20 12h2"/>
+          <path d="M20 16a2 2 0 0 1-2 2H8.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 4 20.286V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z"/>
+          <path d="M9 11v2"/>
+        </g>
+
+        {/* Slot 2: Bot 3 — emerald */}
+        <g transform={`translate(${step * 2}, 0)`} stroke="#34d399" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M6 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2l0-4"/>
+          <path d="M12 2v2"/>
+          <path d="M9 12v9"/>
+          <path d="M15 12v9"/>
+          <path d="M5 16l4-2"/>
+          <path d="M15 14l4 2"/>
+          <path d="M9 18h6"/>
+          <path d="M10 8v.01"/>
+          <path d="M14 8v.01"/>
+        </g>
+
+        {/* Slot 3: Bot 4 — amber */}
+        <g transform={`translate(${step * 3}, 0)`} stroke="#fbbf24" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 20v2"/>
+          <path d="M12 2v2"/>
+          <path d="M17 20v2"/>
+          <path d="M17 2v2"/>
+          <path d="M2 12h2"/>
+          <path d="M2 17h2"/>
+          <path d="M2 7h2"/>
+          <path d="M20 12h2"/>
+          <path d="M20 17h2"/>
+          <path d="M20 7h2"/>
+          <path d="M7 20v2"/>
+          <path d="M7 2v2"/>
+          <rect x="4" y="4" width="16" height="16" rx="2"/>
+          <rect x="8" y="8" width="8" height="8" rx="1"/>
+        </g>
+
+        {/* Slot 4: Repeat Bot 1 for seamless loop — indigo */}
+        <g transform={`translate(${step * 4}, 0)`} stroke="#818cf8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 8V4H8"/>
+          <rect width="16" height="12" x="4" y="8" rx="2"/>
+          <path d="M2 14h2"/>
+          <path d="M20 14h2"/>
+          <path d="M15 13v2"/>
+          <path d="M9 13v2"/>
+        </g>
+      </g>
+    </svg>
+  )
+}

package/ui/src/components/ChatSidebar.jsx

@@ -77,7 +77,7 @@ export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, use
               <div className="text-sm font-medium truncate" style={{ color: 'var(--c-white)' }}>
                 {chat.name || '(untitled)'}
               </div>
-              <div className="flex items-center gap-2 text-[10px]" style={{ color: 'var(--c-text2)' }}>
+              <div className="flex items-center gap-2 text-[11px]" style={{ color: 'var(--c-text2)' }}>
                 <span className="inline-flex items-center gap-1">
                   <span className="w-1.5 h-1.5 rounded-full" style={{ background: editorColor(chat.source) }} />
                   {editorLabel(chat.source)}
@@ -91,7 +91,7 @@ export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, use
             <a
               href={`${BASE}/api/chats/${chat.id}/markdown`}
               download
-              className="flex items-center gap-1 px-2 py-1 text-[10px] transition shrink-0"
+              className="flex items-center gap-1 px-2 py-1 text-[11px] transition shrink-0"
               style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
             >
               <Download size={11} /> .md
@@ -102,7 +102,7 @@ export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, use
 
         {/* 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)' }}>
+          <div className="flex items-center gap-3 px-4 py-2 text-[11px] shrink-0" style={{ borderBottom: '1px solid var(--c-border)', color: 'var(--c-text2)' }}>
             <span>{chat.stats.totalMessages} msgs</span>
             {chat.stats.toolCalls?.length > 0 && <span>{chat.stats.toolCalls.length} tools</span>}
             {chat.stats.totalInputTokens > 0 && <span>{formatNumber(chat.stats.totalInputTokens)} in</span>}
@@ -125,7 +125,7 @@ export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, use
                 placeholder="Filter messages..."
                 value={msgFilter}
                 onChange={e => setMsgFilter(e.target.value)}
-                className="w-full pl-7 pr-3 py-1 text-[11px] outline-none"
+                className="w-full pl-7 pr-3 py-1 text-[12px] outline-none"
                 style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
               />
             </div>
@@ -135,10 +135,10 @@ export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, use
         {/* Messages */}
         <div ref={scrollRef} className="flex-1 overflow-y-auto scrollbar-thin px-4 py-3 space-y-2">
           {loading && (
-            <div className="text-[11px] py-12 text-center" style={{ color: 'var(--c-text3)' }}>Loading conversation...</div>
+            <div className="text-[12px] py-12 text-center" style={{ color: 'var(--c-text3)' }}>Loading conversation...</div>
           )}
           {!loading && chat && chat.messages.length === 0 && (
-            <div className="text-[11px] py-12 text-center" style={{ color: 'var(--c-text3)' }}>
+            <div className="text-[12px] py-12 text-center" style={{ color: 'var(--c-text3)' }}>
               {chat.encrypted ? '🔒 This conversation is encrypted.' : 'No messages found.'}
             </div>
           )}
@@ -149,7 +149,7 @@ export default function ChatSidebar({ chatId, onClose, fetchFn, extraHeader, use
               const Icon = cfg.icon
               return (
                 <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)' }}>
+                  <div className="flex items-center gap-1.5 text-[11px] mb-1" style={{ color: 'var(--c-text2)' }}>
                     <Icon size={11} />
                     <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>}

package/ui/src/components/DateRangePicker.jsx

@@ -46,7 +46,7 @@ export default function DateRangePicker({ value, onChange }) {
           <button
             key={p.label}
             onClick={() => applyPreset(p.days)}
-            className="px-2 py-0.5 text-[10px] transition"
+            className="px-2 py-0.5 text-[11px] transition"
             style={{
               border: isActive ? '1px solid var(--c-accent)' : '1px solid var(--c-border)',
               color: isActive ? 'var(--c-accent)' : 'var(--c-text2)',
@@ -64,7 +64,7 @@ export default function DateRangePicker({ value, onChange }) {
         value={value?.from || ''}
         max={value?.to || today}
         onChange={e => setFrom(e.target.value)}
-        className="px-1.5 py-0.5 text-[10px] outline-none cursor-pointer"
+        className="px-1.5 py-0.5 text-[11px] outline-none cursor-pointer"
         style={{
           background: 'var(--c-bg3)',
           color: 'var(--c-text)',
@@ -72,14 +72,14 @@ export default function DateRangePicker({ value, onChange }) {
           colorScheme: dark ? 'dark' : 'light',
         }}
       />
-      <span className="text-[10px]" style={{ color: 'var(--c-text3)' }}>—</span>
+      <span className="text-[11px]" style={{ color: 'var(--c-text3)' }}>—</span>
       <input
         type="date"
         value={value?.to || ''}
         min={value?.from || ''}
         max={today}
         onChange={e => setTo(e.target.value)}
-        className="px-1.5 py-0.5 text-[10px] outline-none cursor-pointer"
+        className="px-1.5 py-0.5 text-[11px] outline-none cursor-pointer"
         style={{
           background: 'var(--c-bg3)',
           color: 'var(--c-text)',
@@ -92,7 +92,7 @@ export default function DateRangePicker({ value, onChange }) {
       {active && (
         <button
           onClick={() => onChange(null)}
-          className="flex items-center gap-0.5 px-2 py-0.5 text-[10px] transition"
+          className="flex items-center gap-0.5 px-2 py-0.5 text-[11px] transition"
           style={{ border: '1px solid var(--c-accent)', color: 'var(--c-accent)' }}
         >
           <X size={9} /> clear

package/ui/src/components/EditorBreakdown.jsx

@@ -9,11 +9,11 @@ export default function EditorBreakdown({ editors, total }) {
         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>
+            <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-[10px] w-10 text-right" style={{ color: 'var(--c-text2)' }}>{count}</span>
+            <span className="text-[11px] w-10 text-right" style={{ color: 'var(--c-text2)' }}>{count}</span>
           </div>
         )
       })}

package/ui/src/components/EditorDot.jsx

@@ -5,7 +5,7 @@ export default function EditorDot({ source, showLabel = false, size = 8 }) {
   return (
     <span className="inline-flex items-center gap-1.5">
       <EditorIcon source={source} size={size} />
-      {showLabel && <span className="text-[10px]" style={{ color: 'var(--c-text)' }}>{editorLabel(source)}</span>}
+      {showLabel && <span className="text-[11px]" style={{ color: 'var(--c-text)' }}>{editorLabel(source)}</span>}
     </span>
   )
 }

package/ui/src/components/KpiCard.jsx

@@ -2,8 +2,8 @@ export default function KpiCard({ label, value, sub, onClick }) {
   return (
     <div className={`card px-3 py-2${onClick ? ' cursor-pointer hover:opacity-80 transition' : ''}`} onClick={onClick}>
       <div className="text-base font-bold" style={{ color: onClick ? 'var(--c-accent)' : 'var(--c-white)' }}>{value}</div>
-      <div className="text-[10px]" style={{ color: 'var(--c-text2)' }}>{label}</div>
-      {sub && <div className="text-[9px] mt-0.5" style={{ color: 'var(--c-text3)' }}>{sub}</div>}
+      <div className="text-[11px]" style={{ color: 'var(--c-text2)' }}>{label}</div>
+      {sub && <div className="text-[10px] mt-0.5" style={{ color: 'var(--c-text3)' }}>{sub}</div>}
     </div>
   )
 }

package/ui/src/components/LiveFeed.jsx

@@ -62,14 +62,14 @@ export default function LiveFeed({ onSessionClick }) {
       {/* 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="text-[12px] 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)' }}>
+          <div className="text-[12px] py-8 text-center" style={{ color: 'var(--c-text3)' }}>
             No recent activity
           </div>
         )}
@@ -77,7 +77,7 @@ export default function LiveFeed({ onSessionClick }) {
         {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)' }}>
+            <div className="sticky top-0 px-3 py-1.5 text-[10px] font-medium uppercase tracking-wider" style={{ background: 'var(--c-bg)', color: 'var(--c-text3)', borderBottom: '1px solid var(--c-border)' }}>
               {bucket.label}
             </div>
 
@@ -89,26 +89,26 @@ export default function LiveFeed({ onSessionClick }) {
                 onClick={() => onSessionClick && onSessionClick(item.id, item.username)}
               >
                 {/* Session name */}
-                <div className="text-[11px] font-medium truncate mb-1" style={{ color: 'var(--c-white)' }}>
+                <div className="text-[12px] 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]"
+                    className="text-[10px] 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>
+                  <span className="text-[10px] truncate" style={{ color: 'var(--c-text2)' }}>{editorLabel(item.source)}</span>
+                  <span className="text-[10px] 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)' }}>
+                <div className="flex items-center gap-2 text-[10px]" style={{ color: 'var(--c-text3)' }}>
                   {item.totalMessages > 0 && (
                     <span className="flex items-center gap-0.5">
                       <MessageSquare size={8} /> {item.totalMessages}

package/ui/src/components/LoginScreen.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { Lock } from 'lucide-react'
 import { login } from '../lib/api'
+import AnimatedLogo from './AnimatedLogo'
 
 export default function LoginScreen({ onSuccess }) {
   const [password, setPassword] = useState('')
@@ -31,13 +32,14 @@ export default function LoginScreen({ onSuccess }) {
             >
               <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' }}>
+            <div className="flex items-center gap-1.5 text-sm font-bold" style={{ color: 'var(--c-white)' }}>
+              <AnimatedLogo size={16} />
+              Agentlytics
+              <span className="text-[10px] 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)' }}>
+            <div className="text-[11px] mt-1" style={{ color: 'var(--c-text3)' }}>
               This relay is password-protected
             </div>
           </div>
@@ -57,12 +59,12 @@ export default function LoginScreen({ onSuccess }) {
               }}
             />
             {error && (
-              <div className="text-[10px]" style={{ color: '#f87171' }}>{error}</div>
+              <div className="text-[11px]" style={{ color: '#f87171' }}>{error}</div>
             )}
             <button
               type="submit"
               disabled={loading || !password}
-              className="w-full py-2 text-[11px] font-medium rounded transition"
+              className="w-full py-2 text-[12px] font-medium rounded transition"
               style={{
                 background: '#6366f1',
                 color: '#fff',

package/ui/src/components/MessageRenderer.jsx

@@ -52,7 +52,7 @@ export function ToolArgsDiff({ args }) {
   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)' }}>
+    <div className="mt-1.5 text-[10px] 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>
       )}
@@ -85,7 +85,7 @@ export function ToolArgsDetail({ args }) {
   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)' }}>
+    <div className="mt-1.5 text-[10px] 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>}
@@ -101,7 +101,7 @@ 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="my-1 px-2.5 py-1.5 text-[11px]" 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' }} />)
@@ -121,13 +121,13 @@ export function ToolResultBlock({ name, preview }) {
   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="my-1 px-2.5 py-1.5 text-[11px]" 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>}
+      {open && <pre className="mt-1 text-[10px] overflow-x-auto whitespace-pre-wrap break-all" style={{ color: 'var(--c-text2)' }}>{preview}</pre>}
     </div>
   )
 }

package/ui/src/components/ModelBreakdown.jsx

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

package/ui/src/components/SectionTitle.jsx

@@ -1,3 +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>
+  return <h3 className="text-[11px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>{children}</h3>
 }

package/ui/src/index.css

@@ -36,7 +36,7 @@ body {
   background: var(--c-bg);
   color: var(--c-text);
   min-height: 100vh;
-  font-size: 11.5px;
+  font-size: 13px;
   line-height: 1.5;
 }
 

package/ui/src/lib/api.js

@@ -127,6 +127,26 @@ export async function fetchDashboardStats(params = {}) {
   return res.json();
 }
 
+export async function fetchCostAnalytics(params = {}) {
+  const q = new URLSearchParams();
+  if (params.editor) q.set('editor', params.editor);
+  appendDateParams(q, params);
+  const qs = q.toString();
+  const res = await fetch(`${BASE}/api/cost-analytics${qs ? '?' + qs : ''}`);
+  return res.json();
+}
+
+export async function fetchCosts(params = {}) {
+  const q = new URLSearchParams();
+  if (params.editor) q.set('editor', params.editor);
+  if (params.folder) q.set('folder', params.folder);
+  if (params.chatId) q.set('chatId', params.chatId);
+  appendDateParams(q, params);
+  const qs = q.toString();
+  const res = await fetch(`${BASE}/api/costs${qs ? '?' + qs : ''}`);
+  return res.json();
+}
+
 export async function executeQuery(sql) {
   const res = await fetch(`${BASE}/api/query`, {
     method: 'POST',