agentlytics 0.2.7 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentlytics",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "Comprehensive analytics dashboard for AI coding agents — Cursor, Windsurf, Claude Code, VS Code Copilot, Zed, Antigravity, OpenCode, Command Code",
   "main": "index.js",
   "bin": {
@@ -23,7 +23,9 @@
     "ui/package-lock.json",
     "ui/vite.config.js",
     "ui/eslint.config.js",
-    "README.md"
+    "README.md",
+    "mod.ts",
+    "deno.json"
   ],
   "scripts": {
     "start": "node index.js",
@@ -46,6 +48,9 @@
   ],
   "author": "fkadev",
   "license": "ISC",
+  "engines": {
+    "node": ">=20.19.0"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/f/agentlytics"

package/relay-server.js

@@ -542,7 +542,7 @@ function createRelayApp() {
     if (fs.existsSync(index)) {
       res.sendFile(index);
     } else {
-      res.status(404).send('UI not built. Run: cd ui && npm install && npm run build');
+      res.status(404).send('UI not built. Run: cd ui && npm install && npm run build (or use your preferred package manager)');
     }
   });
 

package/ui/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "node ../index.js --ui-dev & vite",
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"

package/ui/src/App.jsx

@@ -3,6 +3,7 @@ import { Routes, Route, NavLink, useLocation } from 'react-router-dom'
 import { Activity, BarChart3, GitCompare, MessageSquare, FolderOpen, DollarSign, CreditCard, Sun, Moon, RefreshCw, AlertTriangle, Github, Terminal, Database, Users, Plug, Copy, Check, Settings as SettingsIcon, Package, ChevronDown } from 'lucide-react'
 import { fetchOverview, refetchAgents, fetchMode, fetchRelayConfig, getAuthToken, setOnAuthFailure } from './lib/api'
 import { useTheme } from './lib/theme'
+import { useLive } from './hooks/useLive'
 import AnimatedLogo from './components/AnimatedLogo'
 import AnimatedLoader from './components/AnimatedLoader'
 import LoginScreen from './components/LoginScreen'
@@ -70,7 +71,7 @@ function NavDropdown({ icon: Icon, label, items }) {
 export default function App() {
   const [overview, setOverview] = useState(null)
   const [refetchState, setRefetchState] = useState(null) // null | { scanned, total }
-  const [live, setLive] = useState(false)
+  const { live, toggle: toggleLive } = useLive()
   const [mode, setMode] = useState(null) // 'local' | 'relay'
   const [needsAuth, setNeedsAuth] = useState(false)
   const [authed, setAuthed] = useState(!!getAuthToken())
@@ -105,25 +106,29 @@ export default function App() {
     if (mode === 'local') refreshOverview()
   }, [mode])
 
-  // Live mode: refetch overview every 60s
+  const rescanAndRefresh = useCallback(async (onProgress) => {
+    await refetchAgents(onProgress)
+    const data = await fetchOverview()
+    setOverview(data)
+  }, [])
+
+  // Live mode: rescan & refresh every 60s
   useEffect(() => {
     if (live && mode === 'local') {
       liveRef.current = setInterval(() => {
-        refreshOverview()
+        rescanAndRefresh().catch(() => {})
       }, 60000)
     } else {
       if (liveRef.current) clearInterval(liveRef.current)
       liveRef.current = null
     }
     return () => { if (liveRef.current) clearInterval(liveRef.current) }
-  }, [live, refreshOverview])
+  }, [live, rescanAndRefresh])
 
   const handleRefetch = async () => {
     setRefetchState({ scanned: 0, total: 0 })
     try {
-      await refetchAgents((p) => setRefetchState({ scanned: p.scanned, total: p.total }))
-      const data = await fetchOverview()
-      setOverview(data)
+      await rescanAndRefresh((p) => setRefetchState({ scanned: p.scanned, total: p.total }))
     } catch (e) { console.error(e) }
     setRefetchState(null)
   }
@@ -187,7 +192,7 @@ export default function App() {
           {!isRelay && (
             <>
               <button
-                onClick={() => setLive(!live)}
+                onClick={toggleLive}
                 className="flex items-center gap-1.5 px-2 py-0.5 text-[11px] transition"
                 style={{
                   color: live ? '#22c55e' : 'var(--c-text3)',

package/ui/src/hooks/useLive.jsx

@@ -0,0 +1,15 @@
+import { useState, useEffect, useCallback } from 'react'
+
+const KEY = 'agentlytics-live'
+
+export function useLive() {
+  const [live, setLive] = useState(() => localStorage.getItem(KEY) === 'true')
+
+  useEffect(() => {
+    localStorage.setItem(KEY, live)
+  }, [live])
+
+  const toggle = useCallback(() => setLive(l => !l), [])
+
+  return { live, toggle }
+}

package/ui/src/pages/Dashboard.jsx

@@ -164,8 +164,9 @@ export default function Dashboard({ overview }) {
   } : null
 
   const tk = stats?.tokens
-  const cacheHitRate = tk && tk.input > 0 ? ((tk.cacheRead / tk.input) * 100).toFixed(1) : 0
-  const outputInputRatio = tk && tk.input > 0 ? (tk.output / tk.input).toFixed(2) : 0
+  const totalInputAll = tk ? tk.input + tk.cacheRead + (tk.cacheWrite || 0) : 0
+  const cacheHitRate = totalInputAll > 0 ? ((tk.cacheRead / totalInputAll) * 100).toFixed(1) : 0
+  const outputInputRatio = totalInputAll > 0 ? (tk.output / totalInputAll).toFixed(3) : 0
   const avgMsgsPerSession = tk && tk.sessions > 0 ? (depthData ? (Object.values(stats.depthBuckets).reduce((s, v, i) => {
     const labels = Object.keys(stats.depthBuckets)
     const midpoints = [1, 3.5, 8, 15.5, 35.5, 75.5, 150]

package/ui/src/pages/DeepAnalysis.jsx

@@ -227,12 +227,13 @@ export default function DeepAnalysis({ overview }) {
   // Computed insights
   const insights = useMemo(() => {
     if (!data) return null
-    const totalTok = data.totalInputTokens + data.totalOutputTokens
+    const totalTok = data.totalInputTokens + data.totalOutputTokens + data.totalCacheRead + data.totalCacheWrite
     const msgsPerSession = data.analyzedChats > 0 ? (data.totalMessages / data.analyzedChats).toFixed(1) : 0
     const toolsPerSession = data.analyzedChats > 0 ? (data.totalToolCalls / data.analyzedChats).toFixed(1) : 0
     const tokPerMsg = data.totalMessages > 0 ? Math.round(totalTok / data.totalMessages) : 0
-    const cacheHitRate = data.totalInputTokens > 0 ? ((data.totalCacheRead / data.totalInputTokens) * 100).toFixed(1) : 0
-    const outputRatio = data.totalInputTokens > 0 ? (data.totalOutputTokens / data.totalInputTokens).toFixed(2) : 0
+    const totalInputAll = data.totalInputTokens + data.totalCacheRead + data.totalCacheWrite
+    const cacheHitRate = totalInputAll > 0 ? ((data.totalCacheRead / totalInputAll) * 100).toFixed(1) : 0
+    const outputRatio = totalInputAll > 0 ? (data.totalOutputTokens / totalInputAll).toFixed(3) : 0
     const aiVsHuman = data.totalUserChars > 0 ? (data.totalAssistantChars / data.totalUserChars).toFixed(1) : 0
     return { totalTok, msgsPerSession, toolsPerSession, tokPerMsg, cacheHitRate, outputRatio, aiVsHuman }
   }, [data])
@@ -300,15 +301,17 @@ export default function DeepAnalysis({ overview }) {
                 <div>
                   <div className="flex items-center justify-between text-[11px] mb-1">
                     <span style={{ color: 'var(--c-text2)' }}>input tokens</span>
-                    <span className="font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(data.totalInputTokens)}</span>
+                    <span className="font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(data.totalInputTokens + data.totalCacheRead + data.totalCacheWrite)}</span>
                   </div>
                   <ProportionBar segments={[
-                    { label: 'Fresh input', value: data.totalInputTokens - data.totalCacheRead, color: '#6366f1' },
+                    { label: 'Fresh input', value: data.totalInputTokens, color: '#6366f1' },
+                    { label: 'Cache write', value: data.totalCacheWrite, color: '#fbbf24' },
                     { label: 'Cache read', value: data.totalCacheRead, color: '#34d399' },
                   ]} />
                   <div className="flex items-center gap-3 mt-1 text-[10px]">
-                    <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#6366f1' }} /> fresh {formatNumber(data.totalInputTokens - data.totalCacheRead)}</span>
-                    <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#34d399' }} /> cached {formatNumber(data.totalCacheRead)}</span>
+                    <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#6366f1' }} /> fresh {formatNumber(data.totalInputTokens)}</span>
+                    <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#fbbf24' }} /> cache write {formatNumber(data.totalCacheWrite)}</span>
+                    <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#34d399' }} /> cache read {formatNumber(data.totalCacheRead)}</span>
                   </div>
                 </div>
                 {/* Output tokens */}