agentlytics 0.1.5 → 0.1.6

package/ui/src/pages/ProjectDetail.jsx

@@ -3,8 +3,8 @@ import { useSearchParams, useNavigate } from 'react-router-dom'
 import { ArrowLeft, Search, FolderOpen, Calendar, MessageSquare, Wrench, Cpu, Zap, AlertTriangle } from 'lucide-react'
 import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement } from 'chart.js'
 import { Doughnut, Bar } from 'react-chartjs-2'
-import { fetchProjects, fetchChats } from '../lib/api'
-import { editorColor, editorLabel, formatNumber, formatDate } from '../lib/constants'
+import { fetchProjects, fetchChats, fetchCosts } from '../lib/api'
+import { editorColor, editorLabel, formatNumber, formatDate, formatCost } from '../lib/constants'
 import { useTheme } from '../lib/theme'
 import KpiCard from '../components/KpiCard'
 import EditorIcon from '../components/EditorIcon'
@@ -31,6 +31,7 @@ export default function ProjectDetail() {
   const [loading, setLoading] = useState(true)
   const [chatSearch, setChatSearch] = useState('')
   const [selectedChatId, setSelectedChatId] = useState(null)
+  const [costs, setCosts] = useState(null)
   const [enabledEditors, setEnabledEditors] = useState(null)
 
   useEffect(() => {
@@ -39,10 +40,12 @@ export default function ProjectDetail() {
     Promise.all([
       fetchProjects(),
       fetchChats({ folder, limit: 1000 }),
-    ]).then(([projects, chatData]) => {
+      fetchCosts({ folder }),
+    ]).then(([projects, chatData, costData]) => {
       const match = projects.find(p => p.folder === folder)
       setProject(match || null)
       setChats(chatData.chats || [])
+      setCosts(costData)
       if (match) setEnabledEditors(new Set(Object.keys(match.editors)))
       setLoading(false)
     })
@@ -144,11 +147,12 @@ export default function ProjectDetail() {
         <KpiCard label="sessions" value={displaySessions} sub={!allEnabled ? 'filtered' : ''} />
         <KpiCard label="messages" value={formatNumber(project.totalMessages)} sub={`${avgMsgs} avg/session`} />
         <KpiCard label="tool calls" value={formatNumber(project.totalToolCalls)} sub={<span className="flex items-center gap-0.5"><Wrench size={8} /> invocations</span>} />
-        <KpiCard label="tokens" value={formatNumber(totalTok)} sub={`${outputRatio}× out/in`} />
+        <KpiCard label="tokens" value={formatNumber(totalTok)} sub={`${outputRatio}\u00d7 out/in`} />
         {project.totalCacheRead > 0 && (
           <KpiCard label="cache read" value={formatNumber(project.totalCacheRead)} sub={`write: ${formatNumber(project.totalCacheWrite)}`} />
         )}
         <KpiCard label="you wrote" value={formatNumber(project.totalUserChars)} sub={`AI: ${formatNumber(project.totalAssistantChars)}`} />
+        <KpiCard label="est. cost" value={costs && costs.totalCost > 0 ? formatCost(costs.totalCost) : '\u2014'} sub={costs && costs.byModel.length > 0 ? `${costs.byModel.length} model${costs.byModel.length !== 1 ? 's' : ''}` : undefined} />
       </div>
 
       {/* Charts row */}
@@ -256,6 +260,7 @@ export default function ProjectDetail() {
                 <th className="text-left py-2 px-3 font-medium">mode</th>
                 <th className="text-left py-2 px-3 font-medium">model</th>
                 <th className="text-left py-2 px-3 font-medium">context</th>
+                <th className="text-right py-2 px-3 font-medium">est. cost</th>
                 <th className="text-left py-2 px-3 font-medium">updated</th>
               </tr>
             </thead>
@@ -294,6 +299,9 @@ export default function ProjectDetail() {
                       <span style={{ color: 'var(--c-text3)' }}>{c.bubbleCount || 0} msgs</span>
                     )}
                   </td>
+                  <td className="py-2 px-3 font-mono text-right" style={{ color: c.cost > 0 ? 'var(--c-text2)' : 'var(--c-text3)' }}>
+                    {c.cost > 0 ? formatCost(c.cost) : ''}
+                  </td>
                   <td className="py-2 px-3 whitespace-nowrap" style={{ color: 'var(--c-text3)' }}>{formatDate(c.lastUpdatedAt || c.createdAt)}</td>
                 </tr>
               ))}

package/ui/src/pages/Projects.jsx

@@ -3,8 +3,8 @@ import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearSca
 import { Doughnut, Bar } from 'react-chartjs-2'
 import { Search, MessageSquare, Wrench, Cpu, FolderOpen, Calendar, ArrowRight } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
-import { fetchProjects } from '../lib/api'
-import { editorColor, editorLabel, formatNumber, formatDate, dateRangeToApiParams } from '../lib/constants'
+import { fetchProjects, fetchCosts } from '../lib/api'
+import { editorColor, editorLabel, formatNumber, formatCost, formatDate, dateRangeToApiParams } from '../lib/constants'
 import { useTheme } from '../lib/theme'
 import KpiCard from '../components/KpiCard'
 import EditorIcon from '../components/EditorIcon'
@@ -25,11 +25,16 @@ export default function Projects({ overview }) {
   const [search, setSearch] = useState('')
   const [editorFilter, setEditorFilter] = useState('')
   const [dateRange, setDateRange] = useState(null)
+  const [costs, setCosts] = useState(null)
   const navigate = useNavigate()
   const editors = overview?.editors || []
 
   useEffect(() => {
-    fetchProjects(dateRangeToApiParams(dateRange)).then(setProjects)
+    const dateParams = dateRangeToApiParams(dateRange)
+    Promise.all([
+      fetchProjects(dateParams),
+      fetchCosts(dateParams),
+    ]).then(([p, c]) => { setProjects(p); setCosts(c) })
   }, [dateRange])
 
   if (!projects) return <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text2)' }}>loading projects...</div>
@@ -64,6 +69,7 @@ export default function Projects({ overview }) {
         <KpiCard label="sessions" value={formatNumber(totalSessions)} onClick={() => navigate('/sessions')} />
         <KpiCard label="messages" value={formatNumber(totalMessages)} />
         <KpiCard label="tokens" value={formatNumber(totalTokens)} />
+        <KpiCard label="est. cost" value={costs && costs.totalCost > 0 ? formatCost(costs.totalCost) : '\u2014'} />
       </div>
 
       {/* Charts row */}

package/ui/src/pages/Sessions.jsx

@@ -4,7 +4,7 @@ import { Search, Filter, List, FolderOpen, ChevronDown, ChevronRight, X, AlertTr
 import { Chart as ChartJS, ArcElement, CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Legend, Filler } from 'chart.js'
 import { Line, Doughnut, Bar } from 'react-chartjs-2'
 import { fetchChats } from '../lib/api'
-import { editorColor, editorLabel, formatNumber, formatDate, dateRangeToApiParams } from '../lib/constants'
+import { editorColor, editorLabel, formatNumber, formatCost, formatDate, dateRangeToApiParams } from '../lib/constants'
 import { useTheme } from '../lib/theme'
 import KpiCard from '../components/KpiCard'
 import EditorIcon from '../components/EditorIcon'
@@ -285,6 +285,9 @@ export default function Sessions({ overview }) {
           <span style={{ color: 'var(--c-text3)' }}>{c.bubbleCount || 0}</span>
         )}
       </td>
+      <td className="py-2 px-3 text-[12px] font-mono text-right" style={{ color: c.cost > 0 ? 'var(--c-text2)' : 'var(--c-text3)' }}>
+        {c.cost > 0 ? formatCost(c.cost) : ''}
+      </td>
       <td className="py-2 px-3 text-[12px] whitespace-nowrap" style={{ color: 'var(--c-text3)' }}>
         {formatDate(c.lastUpdatedAt || c.createdAt)}
       </td>
@@ -475,6 +478,7 @@ export default function Sessions({ overview }) {
                 <th className="text-left py-2 px-3 font-medium">mode</th>
                 <th className="text-left py-2 px-3 font-medium">model</th>
                 <th className="text-left py-2 px-3 font-medium">context</th>
+                <th className="text-right py-2 px-3 font-medium">est. cost</th>
                 <th className="text-left py-2 px-3 font-medium">updated</th>
               </tr>
             </thead>