agentlytics 0.1.3 → 0.1.6

package/ui/src/pages/Dashboard.jsx

@@ -6,9 +6,9 @@ import { Doughnut, Bar, Line } from 'react-chartjs-2'
 import KpiCard from '../components/KpiCard'
 import ActivityHeatmap from '../components/ActivityHeatmap'
 import DateRangePicker from '../components/DateRangePicker'
-import { editorColor, editorLabel, formatNumber, dateRangeToApiParams } from '../lib/constants'
+import { editorColor, editorLabel, formatNumber, formatCost, dateRangeToApiParams } from '../lib/constants'
 import EditorIcon from '../components/EditorIcon'
-import { fetchDailyActivity, fetchOverview as fetchOverviewApi, fetchDashboardStats, fetchShareImage, fetchChats } from '../lib/api'
+import { fetchDailyActivity, fetchOverview as fetchOverviewApi, fetchDashboardStats, fetchShareImage, fetchChats, fetchCosts } from '../lib/api'
 import { useTheme } from '../lib/theme'
 import SectionTitle from '../components/SectionTitle'
 
@@ -30,6 +30,7 @@ export default function Dashboard({ overview }) {
   const [selectedEditor, setSelectedEditor] = useState(null)
   const [dateRange, setDateRange] = useState(null)
   const { dark } = useTheme()
+  const [costs, setCosts] = useState(null)
   const [sharing, setSharing] = useState(false)
   const [largeContextChats, setLargeContextChats] = useState(null)
   const txtColor = dark ? '#888' : '#555'
@@ -64,16 +65,19 @@ export default function Dashboard({ overview }) {
       setFilteredData(null)
       fetchDailyActivity(dateParams).then(setDailyData)
       fetchDashboardStats(dateParams).then(setStats)
+      fetchCosts(dateParams).then(setCosts)
       return
     }
     Promise.all([
       fetchOverviewApi({ editor: selectedEditor, ...dateParams }),
       fetchDailyActivity({ editor: selectedEditor, ...dateParams }),
       fetchDashboardStats({ editor: selectedEditor, ...dateParams }),
-    ]).then(([ov, daily, st]) => {
+      fetchCosts({ editor: selectedEditor, ...dateParams }),
+    ]).then(([ov, daily, st, c]) => {
       setFilteredData(ov)
       setDailyData(daily)
       setStats(st)
+      setCosts(c)
     })
   }, [selectedEditor, dateRange])
 
@@ -220,7 +224,7 @@ export default function Dashboard({ overview }) {
         <button
           onClick={handleShare}
           disabled={sharing}
-          className="flex items-center gap-1.5 px-3 py-1 text-[11px] rounded-md transition hover:opacity-80"
+          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 }}
         >
           <Share2 size={12} />
@@ -236,7 +240,7 @@ export default function Dashboard({ overview }) {
             return (
               <button
                 key={e.id}
-                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-[11px] cursor-pointer transition rounded-sm"
+                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-[12px] cursor-pointer transition rounded-sm"
                 style={{
                   border: isSelected ? `1.5px solid ${editorColor(e.id)}` : '1px solid var(--c-border)',
                   background: isSelected ? editorColor(e.id) + '15' : 'transparent',
@@ -254,10 +258,10 @@ export default function Dashboard({ overview }) {
         </div>
         {selectedEditor && sel && (
           <div className="mt-2 flex items-center gap-2">
-            <button onClick={() => navigate(`/sessions?editor=${selectedEditor}`)} className="flex items-center gap-1 text-[11px] px-2.5 py-1 transition" style={{ color: 'var(--c-accent)', border: '1px solid var(--c-border)' }}>
+            <button onClick={() => navigate(`/sessions?editor=${selectedEditor}`)} className="flex items-center gap-1 text-[12px] px-2.5 py-1 transition" style={{ color: 'var(--c-accent)', border: '1px solid var(--c-border)' }}>
               Show Sessions <ArrowRight size={11} />
             </button>
-            <button onClick={() => setSelectedEditor(null)} className="flex items-center gap-1 text-[11px] px-2.5 py-1 transition" style={{ color: 'var(--c-text2)', border: '1px solid var(--c-border)' }}>
+            <button onClick={() => setSelectedEditor(null)} className="flex items-center gap-1 text-[12px] px-2.5 py-1 transition" style={{ color: 'var(--c-text2)', border: '1px solid var(--c-border)' }}>
               <X size={9} /> Clear
             </button>
           </div>
@@ -282,12 +286,25 @@ export default function Dashboard({ overview }) {
         </>}
       </div>
 
+      {/* Token economy KPIs */}
+      {tk && tk.input > 0 && (
+        <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(90px, 1fr))' }}>
+          <KpiCard label="in tokens" value={formatNumber(tk.input)} sub="total prompt" />
+          <KpiCard label="out tokens" value={formatNumber(tk.output)} sub="total completion" />
+          <KpiCard label="cache read" value={formatNumber(tk.cacheRead)} sub={`${cacheHitRate}% hit rate`} />
+          <KpiCard label="cache write" value={formatNumber(tk.cacheWrite)} />
+          <KpiCard label="out/in ratio" value={`${outputInputRatio}×`} sub={<span className="flex items-center gap-0.5"><Zap size={8} /> efficiency</span>} />
+          <KpiCard label="you wrote" value={formatNumber(tk.userChars)} sub={`AI wrote ${formatNumber(tk.assistantChars)}`} />
+          <KpiCard label="est. cost" value={costs && costs.totalCost > 0 ? formatCost(costs.totalCost) : '—'} sub={costs && costs.byModel.length > 0 ? `${costs.byModel.length} model${costs.byModel.length !== 1 ? 's' : ''}` : undefined} />
+        </div>
+      )}
+
       {/* Activity Heatmap | Col 1 | Col 2 | Col 3 */}
       <div className="card p-3">
         <SectionTitle>agentic coding activity</SectionTitle>
         <div className="flex gap-4">
           <div className="min-w-0 flex-shrink-0">
-            {dailyData ? <ActivityHeatmap dailyData={dailyData} /> : <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>loading...</div>}
+            {dailyData ? <ActivityHeatmap dailyData={dailyData} /> : <div className="text-[11px]" style={{ color: 'var(--c-text3)' }}>loading...</div>}
           </div>
           {stats && dailyData && (() => {
             const activeDays = dailyData.filter(d => d.total > 0)
@@ -295,7 +312,7 @@ export default function Dashboard({ overview }) {
             const totalSessions = activeDays.reduce((s, d) => s + d.total, 0)
             const avgPerDay = activeDays.length > 0 ? (totalSessions / activeDays.length).toFixed(1) : 0
             return (
-              <div className="flex-1 grid grid-cols-3 gap-3 text-[10px] min-w-0" style={{ borderLeft: '1px solid var(--c-border)', paddingLeft: 16 }}>
+              <div className="flex-1 grid grid-cols-3 gap-3 text-[11px] min-w-0" style={{ borderLeft: '1px solid var(--c-border)', paddingLeft: 16 }}>
                 <div className="space-y-2 min-w-0">
                   <div>
                     <div style={{ color: 'var(--c-text3)' }} className="uppercase tracking-wider mb-1">streaks</div>
@@ -452,11 +469,11 @@ export default function Dashboard({ overview }) {
           <div className="space-y-1 max-h-[180px] overflow-y-auto scrollbar-thin">
             {d.topProjects.slice(0, 12).map(p => (
               <div key={p.name} className="flex items-center gap-1.5">
-                <div className="text-[9px] w-6 text-right" style={{ color: 'var(--c-text2)' }}>{p.count}</div>
+                <div className="text-[10px] w-6 text-right" style={{ color: 'var(--c-text2)' }}>{p.count}</div>
                 <div className="flex-1 h-3 rounded-sm overflow-hidden" style={{ background: 'var(--c-code-bg)' }}>
                   <div className="h-full bg-accent/30 rounded-sm" style={{ width: `${(p.count / maxProject * 100).toFixed(1)}%` }} />
                 </div>
-                <div className="text-[9px] truncate max-w-[140px]" style={{ color: 'var(--c-text2)' }} title={p.fullPath}>{p.name}</div>
+                <div className="text-[10px] truncate max-w-[140px]" style={{ color: 'var(--c-text2)' }} title={p.fullPath}>{p.name}</div>
               </div>
             ))}
           </div>
@@ -467,19 +484,20 @@ export default function Dashboard({ overview }) {
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-2">
         {stats && stats.topModels.length > 0 && (
           <div className="card p-3">
-            <SectionTitle>top models</SectionTitle>
+            <SectionTitle>top models {costs && costs.totalCost > 0 && <span style={{ color: 'var(--c-text3)' }}>({formatCost(costs.totalCost)} est.)</span>}</SectionTitle>
             <div className="space-y-1">
               {stats.topModels.map((m, i) => {
                 const maxM = stats.topModels[0].count
+                const modelCost = costs?.byModel?.find(c => c.model === m.name)
                 return (
                   <div key={m.name} className="flex items-center gap-2">
-                    <span className="text-[9px] w-3 text-right" style={{ color: 'var(--c-text3)' }}>{i + 1}</span>
+                    <span className="text-[10px] w-3 text-right" style={{ color: 'var(--c-text3)' }}>{i + 1}</span>
+                    <span className="text-[9px] truncate w-28" style={{ color: 'var(--c-text2)' }} title={m.name}>{m.name}</span>
                     <div className="flex-1 h-4 rounded-sm overflow-hidden" style={{ background: 'var(--c-code-bg)' }}>
-                      <div className="h-full rounded-sm flex items-center px-1.5" style={{ width: `${(m.count / maxM * 100).toFixed(1)}%`, background: i === 0 ? '#6366f1' : i === 1 ? '#818cf8' : '#a5b4fc40' }}>
-                        <span className="text-[8px] truncate" style={{ color: i < 2 ? '#fff' : 'var(--c-text2)' }}>{m.name}</span>
-                      </div>
+                      <div className="h-full rounded-sm" style={{ width: `${(m.count / maxM * 100).toFixed(1)}%`, background: i === 0 ? '#6366f1' : i === 1 ? '#818cf8' : '#a5b4fc40' }} />
                     </div>
-                    <span className="text-[9px] w-8 text-right" style={{ color: 'var(--c-text3)' }}>{m.count}</span>
+                    {modelCost ? <span className="text-[9px] w-12 text-right" style={{ color: '#10b981' }}>{formatCost(modelCost.cost)}</span> : null}
+                    <span className="text-[10px] w-8 text-right" style={{ color: 'var(--c-text3)' }}>{m.count}</span>
                   </div>
                 )
               })}
@@ -495,13 +513,13 @@ export default function Dashboard({ overview }) {
                 const maxT = stats.topTools[0].count
                 return (
                   <div key={t.name} className="flex items-center gap-2">
-                    <span className="text-[9px] w-3 text-right" style={{ color: 'var(--c-text3)' }}>{i + 1}</span>
+                    <span className="text-[10px] w-3 text-right" style={{ color: 'var(--c-text3)' }}>{i + 1}</span>
                     <div className="flex-1 h-4 rounded-sm overflow-hidden" style={{ background: 'var(--c-code-bg)' }}>
                       <div className="h-full rounded-sm flex items-center px-1.5" style={{ width: `${(t.count / maxT * 100).toFixed(1)}%`, background: i === 0 ? '#10b981' : i === 1 ? '#34d399' : '#6ee7b740' }}>
                         <span className="text-[8px] truncate font-mono" style={{ color: i < 2 ? '#fff' : 'var(--c-text2)' }}>{t.name}</span>
                       </div>
                     </div>
-                    <span className="text-[9px] w-8 text-right" style={{ color: 'var(--c-text3)' }}>{formatNumber(t.count)}</span>
+                    <span className="text-[10px] w-8 text-right" style={{ color: 'var(--c-text3)' }}>{formatNumber(t.count)}</span>
                   </div>
                 )
               })}
@@ -527,9 +545,9 @@ export default function Dashboard({ overview }) {
                   onClick={() => navigate(`/sessions/${c.id}`)}
                 >
                   <EditorIcon source={c.source} size={10} />
-                  <span className="text-[9px] truncate flex-1" style={{ color: 'var(--c-text)' }}>{c.name || 'Untitled'}</span>
+                  <span className="text-[10px] truncate flex-1" style={{ color: 'var(--c-text)' }}>{c.name || 'Untitled'}</span>
                   <span
-                    className="text-[9px] font-bold flex-shrink-0"
+                    className="text-[10px] font-bold flex-shrink-0"
                     style={{ color: c.bubbleCount >= 500 ? '#ef4444' : '#f59e0b' }}
                   >
                     {c.bubbleCount}

package/ui/src/pages/DeepAnalysis.jsx

@@ -2,8 +2,8 @@ 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 { fetchDeepAnalytics, fetchToolCalls } from '../lib/api'
-import { editorLabel, editorColor, formatNumber, formatDateTime, dateRangeToApiParams } from '../lib/constants'
+import { fetchDeepAnalytics, fetchToolCalls, fetchCosts } from '../lib/api'
+import { editorLabel, editorColor, formatNumber, formatCost, formatDateTime, dateRangeToApiParams } from '../lib/constants'
 import { useTheme } from '../lib/theme'
 import KpiCard from '../components/KpiCard'
 import EditorIcon from '../components/EditorIcon'
@@ -75,7 +75,7 @@ function DiffBlock({ diff }) {
   const oldLines = (diff.old || '').split('\n').slice(0, maxLines)
   const newLines = (diff.new || '').split('\n').slice(0, maxLines)
   return (
-    <div className="mt-1 text-[9px] font-mono overflow-x-auto" style={{ border: '1px solid var(--c-border)' }}>
+    <div className="mt-1 text-[10px] font-mono overflow-x-auto" style={{ border: '1px solid var(--c-border)' }}>
       {diff.file && (
         <div className="px-2 py-0.5" style={{ background: 'var(--c-code-bg)', color: 'var(--c-text2)' }}>{diff.file}</div>
       )}
@@ -107,7 +107,7 @@ function ToolCallRow({ call, toolName, index }) {
   const hasDetail = diff || (call.args && Object.keys(call.args).length > 0)
 
   return (
-    <div className="px-2 py-1 text-[10px]" style={{ background: index % 2 === 0 ? 'var(--c-code-bg)' : 'transparent' }}>
+    <div className="px-2 py-1 text-[11px]" style={{ background: index % 2 === 0 ? 'var(--c-code-bg)' : 'transparent' }}>
       <div className="flex items-start gap-2 cursor-pointer" onClick={() => hasDetail && setExpanded(!expanded)}>
         <EditorIcon source={call.source} size={10} />
         <div className="flex-1 min-w-0">
@@ -124,7 +124,7 @@ function ToolCallRow({ call, toolName, index }) {
       </div>
       {expanded && diff && <DiffBlock diff={diff} />}
       {expanded && !diff && call.args && Object.keys(call.args).length > 0 && (
-        <pre className="mt-1 px-2 py-1 text-[9px] overflow-x-auto whitespace-pre-wrap break-all" style={{ background: 'var(--c-code-bg)', color: 'var(--c-text2)' }}>
+        <pre className="mt-1 px-2 py-1 text-[10px] overflow-x-auto whitespace-pre-wrap break-all" style={{ background: 'var(--c-code-bg)', color: 'var(--c-text2)' }}>
           {JSON.stringify(call.args, null, 2)}
         </pre>
       )}
@@ -148,7 +148,7 @@ function ToolDrillDown({ toolName, folder, onClose }) {
         <div className="flex items-center gap-2">
           <Wrench size={12} style={{ color: 'var(--c-accent)' }} />
           <span className="text-xs font-bold" style={{ color: 'var(--c-white)' }}>{toolName}</span>
-          <span className="text-[10px]" style={{ color: 'var(--c-text2)' }}>
+          <span className="text-[11px]" style={{ color: 'var(--c-text2)' }}>
             {calls ? `${calls.length} calls` : '...'}
             {calls && projectName ? ` in ${projectName}` : ''}
           </span>
@@ -156,7 +156,7 @@ function ToolDrillDown({ toolName, folder, onClose }) {
         <button onClick={onClose} className="p-0.5" style={{ color: 'var(--c-text2)' }}><X size={12} /></button>
       </div>
       {loading ? (
-        <div className="text-[10px] py-4 text-center" style={{ color: 'var(--c-text3)' }}>loading...</div>
+        <div className="text-[11px] py-4 text-center" style={{ color: 'var(--c-text3)' }}>loading...</div>
       ) : calls && calls.length > 0 ? (
         <div className="max-h-[500px] overflow-y-auto scrollbar-thin space-y-0.5">
           {calls.map((c, i) => (
@@ -164,7 +164,7 @@ function ToolDrillDown({ toolName, folder, onClose }) {
           ))}
         </div>
       ) : (
-        <div className="text-[10px] py-4 text-center" style={{ color: 'var(--c-text3)' }}>no calls found</div>
+        <div className="text-[11px] py-4 text-center" style={{ color: 'var(--c-text3)' }}>no calls found</div>
       )}
     </div>
   )
@@ -195,6 +195,7 @@ export default function DeepAnalysis({ overview }) {
   const [data, setData] = useState(null)
   const [loading, setLoading] = useState(false)
   const [selectedTool, setSelectedTool] = useState(null)
+  const [costs, setCosts] = useState(null)
   const chartRef = useRef(null)
   const { dark } = useTheme()
   const txtColor = dark ? '#a0a0a0' : '#444'
@@ -207,8 +208,13 @@ export default function DeepAnalysis({ overview }) {
 
   async function analyze() {
     setLoading(true)
-    const result = await fetchDeepAnalytics({ editor, folder: folder || undefined, limit: 500, ...dateRangeToApiParams(dateRange) })
+    const dateParams = dateRangeToApiParams(dateRange)
+    const [result, costData] = await Promise.all([
+      fetchDeepAnalytics({ editor, folder: folder || undefined, limit: 500, ...dateParams }),
+      fetchCosts({ editor, folder: folder || undefined, ...dateParams }),
+    ])
     setData(result)
+    setCosts(costData)
     setLoading(false)
   }
 
@@ -247,7 +253,7 @@ export default function DeepAnalysis({ overview }) {
         <select
           value={editor}
           onChange={e => setEditor(e.target.value)}
-          className="px-2 py-1.5 text-[11px] outline-none rounded-sm"
+          className="px-2 py-1.5 text-[12px] outline-none rounded-sm"
           style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
         >
           <option value="">All Editors</option>
@@ -258,7 +264,7 @@ export default function DeepAnalysis({ overview }) {
         <select
           value={folder}
           onChange={e => setFolder(e.target.value)}
-          className="px-2 py-1.5 text-[11px] outline-none max-w-[200px] truncate rounded-sm"
+          className="px-2 py-1.5 text-[12px] outline-none max-w-[200px] truncate rounded-sm"
           style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
         >
           <option value="">All Projects</option>
@@ -267,7 +273,7 @@ export default function DeepAnalysis({ overview }) {
           ))}
         </select>
         {loading && <Loader2 size={11} className="animate-spin" style={{ color: 'var(--c-text3)' }} />}
-        {data && <span className="text-[10px]" style={{ color: 'var(--c-text2)' }}>{data.analyzedChats} sessions analyzed</span>}
+        {data && <span className="text-[11px]" style={{ color: 'var(--c-text2)' }}>{data.analyzedChats} sessions analyzed</span>}
         <div className="ml-auto"><DateRangePicker value={dateRange} onChange={setDateRange} /></div>
       </div>
 
@@ -279,7 +285,8 @@ export default function DeepAnalysis({ overview }) {
             <KpiCard label="messages" value={formatNumber(data.totalMessages)} sub={`${insights.msgsPerSession}/session`} />
             <KpiCard label="tool calls" value={formatNumber(data.totalToolCalls)} sub={`${insights.toolsPerSession}/session`} />
             <KpiCard label="total tokens" value={formatNumber(insights.totalTok)} sub={`${formatNumber(insights.tokPerMsg)}/msg`} />
-            <KpiCard label="you wrote" value={formatNumber(data.totalUserChars)} sub={`AI: ${insights.aiVsHuman}× more`} />
+            <KpiCard label="you wrote" value={formatNumber(data.totalUserChars)} sub={`AI: ${insights.aiVsHuman}\u00d7 more`} />
+            <KpiCard label="est. cost" value={costs && costs.totalCost > 0 ? formatCost(costs.totalCost) : '\u2014'} />
           </div>
 
           {/* Token flow + Insights row */}
@@ -290,7 +297,7 @@ export default function DeepAnalysis({ overview }) {
               <div className="space-y-3 mt-2">
                 {/* Input tokens breakdown */}
                 <div>
-                  <div className="flex items-center justify-between text-[10px] mb-1">
+                  <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>
                   </div>
@@ -298,14 +305,14 @@ export default function DeepAnalysis({ overview }) {
                     { label: 'Fresh input', value: data.totalInputTokens - data.totalCacheRead, color: '#6366f1' },
                     { label: 'Cache read', value: data.totalCacheRead, color: '#34d399' },
                   ]} />
-                  <div className="flex items-center gap-3 mt-1 text-[9px]">
+                  <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>
                   </div>
                 </div>
                 {/* Output tokens */}
                 <div>
-                  <div className="flex items-center justify-between text-[10px] mb-1">
+                  <div className="flex items-center justify-between text-[11px] mb-1">
                     <span style={{ color: 'var(--c-text2)' }}>output tokens</span>
                     <span className="font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(data.totalOutputTokens)}</span>
                   </div>
@@ -316,7 +323,7 @@ export default function DeepAnalysis({ overview }) {
                 {/* Cache write */}
                 {data.totalCacheWrite > 0 && (
                   <div>
-                    <div className="flex items-center justify-between text-[10px] mb-1">
+                    <div className="flex items-center justify-between text-[11px] mb-1">
                       <span style={{ color: 'var(--c-text2)' }}>cache write</span>
                       <span className="font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(data.totalCacheWrite)}</span>
                     </div>
@@ -327,14 +334,14 @@ export default function DeepAnalysis({ overview }) {
                 )}
                 {/* Overall ratio bar */}
                 <div className="pt-2" style={{ borderTop: '1px solid var(--c-border)' }}>
-                  <div className="text-[9px] mb-1" style={{ color: 'var(--c-text3)' }}>overall token distribution</div>
+                  <div className="text-[10px] mb-1" style={{ color: 'var(--c-text3)' }}>overall token distribution</div>
                   <ProportionBar height={10} segments={[
                     { label: 'Input', value: data.totalInputTokens, color: '#6366f1' },
                     { label: 'Output', value: data.totalOutputTokens, color: '#a78bfa' },
                     { label: 'Cache Read', value: data.totalCacheRead, color: '#34d399' },
                     { label: 'Cache Write', value: data.totalCacheWrite, color: '#fbbf24' },
                   ]} />
-                  <div className="flex items-center gap-3 mt-1 text-[9px]" style={{ color: 'var(--c-text3)' }}>
+                  <div className="flex items-center gap-3 mt-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
                     <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#6366f1' }} /> in</span>
                     <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#a78bfa' }} /> out</span>
                     <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#34d399' }} /> cache read</span>
@@ -350,12 +357,12 @@ export default function DeepAnalysis({ overview }) {
               <div className="space-y-3 mt-2">
                 {/* Human vs AI chars */}
                 <div>
-                  <div className="text-[10px] mb-1" style={{ color: 'var(--c-text2)' }}>you vs AI (characters)</div>
+                  <div className="text-[11px] mb-1" style={{ color: 'var(--c-text2)' }}>you vs AI (characters)</div>
                   <ProportionBar height={8} segments={[
                     { label: 'You', value: data.totalUserChars, color: '#6366f1' },
                     { label: 'AI', value: data.totalAssistantChars, color: '#34d399' },
                   ]} />
-                  <div className="flex items-center justify-between mt-1 text-[9px]">
+                  <div className="flex items-center justify-between mt-1 text-[10px]">
                     <span style={{ color: '#6366f1' }}>You: {formatNumber(data.totalUserChars)}</span>
                     <span style={{ color: '#34d399' }}>AI: {formatNumber(data.totalAssistantChars)}</span>
                   </div>
@@ -364,25 +371,25 @@ export default function DeepAnalysis({ overview }) {
                 {/* Metric cards */}
                 <div className="grid grid-cols-2 gap-2">
                   <div className="p-2 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
-                    <div className="flex items-center gap-1 text-[9px]" style={{ color: 'var(--c-text3)' }}>
+                    <div className="flex items-center gap-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
                       <TrendingUp size={9} /> output/input ratio
                     </div>
                     <div className="text-sm font-bold mt-0.5" style={{ color: 'var(--c-white)' }}>{insights.outputRatio}×</div>
                   </div>
                   <div className="p-2 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
-                    <div className="flex items-center gap-1 text-[9px]" style={{ color: 'var(--c-text3)' }}>
+                    <div className="flex items-center gap-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
                       <Zap size={9} /> cache hit rate
                     </div>
                     <div className="text-sm font-bold mt-0.5" style={{ color: parseFloat(insights.cacheHitRate) > 50 ? '#34d399' : parseFloat(insights.cacheHitRate) > 20 ? '#fbbf24' : 'var(--c-white)' }}>{insights.cacheHitRate}%</div>
                   </div>
                   <div className="p-2 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
-                    <div className="flex items-center gap-1 text-[9px]" style={{ color: 'var(--c-text3)' }}>
+                    <div className="flex items-center gap-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
                       <MessageSquare size={9} /> tokens per message
                     </div>
                     <div className="text-sm font-bold mt-0.5" style={{ color: 'var(--c-white)' }}>{formatNumber(insights.tokPerMsg)}</div>
                   </div>
                   <div className="p-2 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
-                    <div className="flex items-center gap-1 text-[9px]" style={{ color: 'var(--c-text3)' }}>
+                    <div className="flex items-center gap-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
                       <Wrench size={9} /> tools per session
                     </div>
                     <div className="text-sm font-bold mt-0.5" style={{ color: 'var(--c-white)' }}>{insights.toolsPerSession}</div>
@@ -391,9 +398,9 @@ export default function DeepAnalysis({ overview }) {
 
                 {/* AI amplification */}
                 <div className="p-2 rounded-sm text-center" style={{ background: 'var(--c-code-bg)' }}>
-                  <div className="text-[9px]" style={{ color: 'var(--c-text3)' }}>AI amplification factor</div>
+                  <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>AI amplification factor</div>
                   <div className="text-lg font-bold" style={{ color: 'var(--c-accent)' }}>{insights.aiVsHuman}×</div>
-                  <div className="text-[9px]" style={{ color: 'var(--c-text3)' }}>AI writes {insights.aiVsHuman}× more than you type</div>
+                  <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>AI writes {insights.aiVsHuman}× more than you type</div>
                 </div>
               </div>
             </div>
@@ -424,7 +431,7 @@ export default function DeepAnalysis({ overview }) {
                       plugins: { legend: { display: false }, tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } } },
                     }}
                   />
-                ) : <div className="text-[10px] text-center py-8" style={{ color: 'var(--c-text3)' }}>no tool calls found</div>}
+                ) : <div className="text-[11px] text-center py-8" style={{ color: 'var(--c-text3)' }}>no tool calls found</div>}
               </div>
             </div>
 
@@ -446,16 +453,16 @@ export default function DeepAnalysis({ overview }) {
                       },
                     }}
                   />
-                ) : <div className="text-[10px] text-center py-8" style={{ color: 'var(--c-text3)' }}>no model data</div>}
+                ) : <div className="text-[11px] text-center py-8" style={{ color: 'var(--c-text3)' }}>no model data</div>}
               </div>
 
               {/* Tool categories below models */}
               {toolCategories.length > 0 && (
                 <div className="mt-3 pt-3" style={{ borderTop: '1px solid var(--c-border)' }}>
-                  <div className="text-[9px] uppercase tracking-wider mb-2" style={{ color: 'var(--c-text3)' }}>tool categories</div>
+                  <div className="text-[10px] uppercase tracking-wider mb-2" style={{ color: 'var(--c-text3)' }}>tool categories</div>
                   <div className="space-y-1.5">
                     {toolCategories.map(([cat, { tools: catTools, total }]) => (
-                      <div key={cat} className="flex items-center gap-2 text-[10px]">
+                      <div key={cat} className="flex items-center gap-2 text-[11px]">
                         <span className="truncate flex-1" style={{ color: 'var(--c-text2)' }}>{cat}</span>
                         <span className="font-bold" style={{ color: 'var(--c-white)' }}>{total}</span>
                         <span style={{ color: 'var(--c-text3)' }}>({catTools.length})</span>

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)
     })
@@ -104,7 +107,7 @@ export default function ProjectDetail() {
         <div className="flex items-start gap-3">
           <button
             onClick={() => navigate('/projects')}
-            className="flex items-center gap-1 text-[11px] transition mt-0.5 flex-shrink-0"
+            className="flex items-center gap-1 text-[12px] transition mt-0.5 flex-shrink-0"
             style={{ color: 'var(--c-text3)' }}
           >
             <ArrowLeft size={12} />
@@ -112,7 +115,7 @@ export default function ProjectDetail() {
           <FolderOpen size={18} className="flex-shrink-0 mt-0.5" style={{ color: 'var(--c-accent)' }} />
           <div className="flex-1 min-w-0">
             <h1 className="text-sm font-bold truncate" style={{ color: 'var(--c-white)' }}>{project.name}</h1>
-            <div className="text-[10px] truncate" style={{ color: 'var(--c-text3)' }}>{project.folder}</div>
+            <div className="text-[11px] truncate" style={{ color: 'var(--c-text3)' }}>{project.folder}</div>
           </div>
           <div className="flex items-center gap-1.5 flex-shrink-0">
             {editorEntries.map(([e]) => (
@@ -120,7 +123,7 @@ export default function ProjectDetail() {
             ))}
           </div>
         </div>
-        <div className="flex items-center gap-4 mt-3 pt-3 text-[10px]" style={{ borderTop: '1px solid var(--c-border)' }}>
+        <div className="flex items-center gap-4 mt-3 pt-3 text-[11px]" style={{ borderTop: '1px solid var(--c-border)' }}>
           <div className="flex items-center gap-1" style={{ color: 'var(--c-text3)' }}>
             <Calendar size={9} />
             <span>{formatDate(project.firstSeen)}</span>
@@ -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 */}
@@ -169,11 +173,11 @@ export default function ProjectDetail() {
                     className="accent-[var(--c-accent)] w-3 h-3 flex-shrink-0 cursor-pointer"
                   />
                   <EditorIcon source={e} size={11} />
-                  <span className="text-[10px] truncate flex-1 cursor-pointer select-none" onClick={() => toggleEditor(e)} style={{ color: checked ? 'var(--c-text2)' : 'var(--c-text3)', opacity: checked ? 1 : 0.4 }}>{editorLabel(e)}</span>
+                  <span className="text-[11px] truncate flex-1 cursor-pointer select-none" onClick={() => toggleEditor(e)} style={{ color: checked ? 'var(--c-text2)' : 'var(--c-text3)', opacity: checked ? 1 : 0.4 }}>{editorLabel(e)}</span>
                   <div className="w-16 h-3 rounded-sm overflow-hidden" style={{ background: 'var(--c-code-bg)' }}>
                     <div className="h-full rounded-sm transition-all" style={{ width: `${(count / fMaxEditorCount * 100).toFixed(0)}%`, background: checked ? editorColor(e) : 'var(--c-text3)', opacity: checked ? 1 : 0.2 }} />
                   </div>
-                  <span className="text-[10px] w-6 text-right font-bold" style={{ color: checked ? 'var(--c-white)' : 'var(--c-text3)', opacity: checked ? 1 : 0.4 }}>{count}</span>
+                  <span className="text-[11px] w-6 text-right font-bold" style={{ color: checked ? 'var(--c-white)' : 'var(--c-text3)', opacity: checked ? 1 : 0.4 }}>{count}</span>
                 </div>
               )
             })}
@@ -199,7 +203,7 @@ export default function ProjectDetail() {
                 }}
               />
             </div>
-          ) : <div className="text-[10px] py-8 text-center" style={{ color: 'var(--c-text3)' }}>no model data</div>}
+          ) : <div className="text-[11px] py-8 text-center" style={{ color: 'var(--c-text3)' }}>no model data</div>}
         </div>
 
         {/* Top tools horizontal bar */}
@@ -226,7 +230,7 @@ export default function ProjectDetail() {
                 }}
               />
             </div>
-          ) : <div className="text-[10px] py-8 text-center" style={{ color: 'var(--c-text3)' }}>no tool data</div>}
+          ) : <div className="text-[11px] py-8 text-center" style={{ color: 'var(--c-text3)' }}>no tool data</div>}
         </div>
       </div>
 
@@ -241,21 +245,22 @@ export default function ProjectDetail() {
               placeholder="filter sessions..."
               value={chatSearch}
               onChange={e => setChatSearch(e.target.value)}
-              className="w-full pl-7 pr-3 py-1 text-[11px] outline-none rounded-sm"
+              className="w-full pl-7 pr-3 py-1 text-[12px] outline-none rounded-sm"
               style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
             />
           </div>
         </div>
 
         <div className="card overflow-hidden">
-          <table className="w-full text-[11px]">
+          <table className="w-full text-[12px]">
             <thead>
-              <tr className="text-[9px] uppercase tracking-wider" style={{ borderBottom: '1px solid var(--c-border)', color: 'var(--c-text3)' }}>
+              <tr className="text-[10px] uppercase tracking-wider" style={{ borderBottom: '1px solid var(--c-border)', color: 'var(--c-text3)' }}>
                 <th className="text-left py-2 px-3 font-medium">editor</th>
                 <th className="text-left py-2 px-3 font-medium">name</th>
                 <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>
@@ -277,7 +282,7 @@ export default function ProjectDetail() {
                   </td>
                   <td className="py-2 px-3 font-medium truncate max-w-[280px]" style={{ color: 'var(--c-white)' }}>
                     {c.name || <span style={{ color: 'var(--c-text3)' }}>Untitled</span>}
-                    {c.encrypted && <span className="ml-1.5 text-[9px] text-yellow-500/60">locked</span>}
+                    {c.encrypted && <span className="ml-1.5 text-[10px] text-yellow-500/60">locked</span>}
                   </td>
                   <td className="py-2 px-3" style={{ color: 'var(--c-text2)' }}>{c.mode || ''}</td>
                   <td className="py-2 px-3 font-mono truncate max-w-[150px]" style={{ color: 'var(--c-text2)' }} title={c.topModel || ''}>{c.topModel || ''}</td>
@@ -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>
               ))}