agentlytics 0.1.3 → 0.1.6

package/ui/src/lib/constants.js

@@ -49,6 +49,14 @@ export function formatNumber(n) {
   return n.toLocaleString();
 }
 
+export function formatCost(n) {
+  if (n == null || n === 0) return '$0';
+  if (n < 0.01) return '<$0.01';
+  if (n >= 1000) return '$' + (n / 1000).toFixed(1) + 'K';
+  if (n >= 100) return '$' + Math.round(n);
+  return '$' + n.toFixed(2);
+}
+
 export function formatDate(ts) {
   if (!ts) return '';
   return new Date(ts).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });

package/ui/src/pages/ChatDetail.jsx

@@ -1,8 +1,8 @@
 import { useState, useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import { ArrowLeft, Download } from 'lucide-react'
-import { fetchChat, BASE } from '../lib/api'
-import { editorColor, editorLabel, formatDateTime, formatNumber } from '../lib/constants'
+import { fetchChat, fetchCosts, BASE } from '../lib/api'
+import { editorColor, editorLabel, formatDateTime, formatNumber, formatCost } from '../lib/constants'
 import KpiCard from '../components/KpiCard'
 import { MessageBubble } from '../components/MessageRenderer'
 
@@ -10,12 +10,14 @@ export default function ChatDetail() {
   const { id } = useParams()
   const navigate = useNavigate()
   const [chat, setChat] = useState(null)
+  const [costs, setCosts] = useState(null)
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
     setLoading(true)
     fetchChat(id).then(data => {
       setChat(data)
+      fetchCosts({ chatId: data.id }).then(setCosts)
       setLoading(false)
     })
   }, [id])
@@ -76,6 +78,7 @@ export default function ChatDetail() {
           <KpiCard label="Tool Calls" value={s.toolCalls.length} />
           {s.totalInputTokens > 0 && <KpiCard label="Input Tokens" value={formatNumber(s.totalInputTokens)} />}
           {s.totalOutputTokens > 0 && <KpiCard label="Output Tokens" value={formatNumber(s.totalOutputTokens)} />}
+          {costs && costs.totalCost > 0 && <KpiCard label="Est. Cost" value={formatCost(costs.totalCost)} />}
         </div>
       )}
 

package/ui/src/pages/Compare.jsx

@@ -16,15 +16,15 @@ function MetricRow({ label, a, b, colorA, colorB }) {
   const max = Math.max(numA, numB, 1)
   return (
     <div className="grid grid-cols-[1fr_100px_100px] gap-x-3 items-center py-0.5" style={{ borderBottom: '1px solid var(--c-border)' }}>
-      <div className="text-[10px]" style={{ color: 'var(--c-text2)' }}>{label}</div>
+      <div className="text-[11px]" style={{ color: 'var(--c-text2)' }}>{label}</div>
       <div className="text-right">
-        <span className="text-[11px] font-mono font-medium" style={{ color: 'var(--c-white)' }}>
+        <span className="text-[12px] font-mono font-medium" style={{ color: 'var(--c-white)' }}>
           {typeof a === 'number' ? formatNumber(a) : a}
         </span>
         <div className="h-1 rounded-full mt-0.5 ml-auto" style={{ background: colorA, width: `${(numA / max * 100).toFixed(0)}%` }} />
       </div>
       <div className="text-right">
-        <span className="text-[11px] font-mono font-medium" style={{ color: 'var(--c-white)' }}>
+        <span className="text-[12px] font-mono font-medium" style={{ color: 'var(--c-white)' }}>
           {typeof b === 'number' ? formatNumber(b) : b}
         </span>
         <div className="h-1 rounded-full mt-0.5 ml-auto" style={{ background: colorB, width: `${(numB / max * 100).toFixed(0)}%` }} />
@@ -37,27 +37,27 @@ function ListCompare({ titleA, titleB, colorA, colorB, itemsA, itemsB, limit = 8
   return (
     <div className="grid grid-cols-2 gap-2">
       <div>
-        <h4 className="text-[10px] font-medium uppercase tracking-wider mb-1" style={{ color: colorA }}>{titleA}</h4>
+        <h4 className="text-[11px] font-medium uppercase tracking-wider mb-1" style={{ color: colorA }}>{titleA}</h4>
         <div className="space-y-0.5">
           {itemsA.slice(0, limit).map(t => (
-            <div key={t.name} className="flex justify-between text-[10px] py-0.5">
+            <div key={t.name} className="flex justify-between text-[11px] py-0.5">
               <span className="truncate" style={{ color: 'var(--c-text)' }}>{t.name}</span>
               <span className="font-mono ml-2" style={{ color: 'var(--c-text3)' }}>{t.count}</span>
             </div>
           ))}
-          {itemsA.length === 0 && <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>none</div>}
+          {itemsA.length === 0 && <div className="text-[11px]" style={{ color: 'var(--c-text3)' }}>none</div>}
         </div>
       </div>
       <div>
-        <h4 className="text-[10px] font-medium uppercase tracking-wider mb-1" style={{ color: colorB }}>{titleB}</h4>
+        <h4 className="text-[11px] font-medium uppercase tracking-wider mb-1" style={{ color: colorB }}>{titleB}</h4>
         <div className="space-y-0.5">
           {itemsB.slice(0, limit).map(t => (
-            <div key={t.name} className="flex justify-between text-[10px] py-0.5">
+            <div key={t.name} className="flex justify-between text-[11px] py-0.5">
               <span className="truncate" style={{ color: 'var(--c-text)' }}>{t.name}</span>
               <span className="font-mono ml-2" style={{ color: 'var(--c-text3)' }}>{t.count}</span>
             </div>
           ))}
-          {itemsB.length === 0 && <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>none</div>}
+          {itemsB.length === 0 && <div className="text-[11px]" style={{ color: 'var(--c-text3)' }}>none</div>}
         </div>
       </div>
     </div>
@@ -156,7 +156,7 @@ export default function Compare({ overview }) {
         <select
           value={editorA}
           onChange={e => setEditorA(e.target.value)}
-          className="px-2 py-1 text-[11px] outline-none"
+          className="px-2 py-1 text-[12px] outline-none"
           style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
         >
           {editors.map(e => <option key={e.id} value={e.id}>{editorLabel(e.id)}</option>)}
@@ -165,7 +165,7 @@ export default function Compare({ overview }) {
         <select
           value={editorB}
           onChange={e => setEditorB(e.target.value)}
-          className="px-2 py-1 text-[11px] outline-none"
+          className="px-2 py-1 text-[12px] outline-none"
           style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
         >
           {editors.map(e => <option key={e.id} value={e.id}>{editorLabel(e.id)}</option>)}
@@ -179,8 +179,8 @@ export default function Compare({ overview }) {
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
             <div className="card p-3">
               <div className="flex items-center justify-between mb-1.5">
-                <h3 className="text-[10px] font-medium uppercase tracking-wider" style={{ color: 'var(--c-text2)' }}>totals</h3>
-                <div className="flex items-center gap-3 text-[9px]">
+                <h3 className="text-[11px] font-medium uppercase tracking-wider" style={{ color: 'var(--c-text2)' }}>totals</h3>
+                <div className="flex items-center gap-3 text-[10px]">
                   <span style={{ color: colorA }}>● {nameA}</span>
                   <span style={{ color: colorB }}>● {nameB}</span>
                 </div>
@@ -188,7 +188,7 @@ export default function Compare({ overview }) {
               {metrics.map(m => <MetricRow key={m.label} label={m.label} a={m.a} b={m.b} colorA={colorA} colorB={colorB} />)}
             </div>
             <div className="card p-3">
-              <h3 className="text-[10px] font-medium uppercase tracking-wider mb-1.5" style={{ color: 'var(--c-text2)' }}>efficiency</h3>
+              <h3 className="text-[11px] font-medium uppercase tracking-wider mb-1.5" style={{ color: 'var(--c-text2)' }}>efficiency</h3>
               {ratios.map(m => <MetricRow key={m.label} label={m.label} a={m.a} b={m.b} colorA={colorA} colorB={colorB} />)}
             </div>
           </div>
@@ -196,14 +196,14 @@ export default function Compare({ overview }) {
           {/* Charts row */}
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
             <div className="card p-3">
-              <h3 className="text-[10px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>usage</h3>
+              <h3 className="text-[11px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>usage</h3>
               <div style={{ height: 160 }}>
                 <Bar data={barChart} options={barOpts} />
               </div>
             </div>
             {tokenChart && (
               <div className="card p-3">
-                <h3 className="text-[10px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>tokens</h3>
+                <h3 className="text-[11px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>tokens</h3>
                 <div style={{ height: 160 }}>
                   <Bar data={tokenChart} options={barOpts} />
                 </div>
@@ -214,12 +214,12 @@ export default function Compare({ overview }) {
           {/* Tools + Models side-by-side */}
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
             <div className="card p-3">
-              <h3 className="text-[10px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>top tools</h3>
+              <h3 className="text-[11px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>top tools</h3>
               <ListCompare titleA={nameA} titleB={nameB} colorA={colorA} colorB={colorB}
                 itemsA={result.deepA.topTools} itemsB={result.deepB.topTools} limit={10} />
             </div>
             <div className="card p-3">
-              <h3 className="text-[10px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>models</h3>
+              <h3 className="text-[11px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>models</h3>
               <ListCompare titleA={nameA} titleB={nameB} colorA={colorA} colorB={colorB}
                 itemsA={result.deepA.topModels} itemsB={result.deepB.topModels} limit={8} />
             </div>

package/ui/src/pages/CostAnalysis.jsx

@@ -0,0 +1,356 @@
+import { useState, useEffect, useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { DollarSign, TrendingUp, Cpu, FolderOpen, AlertTriangle } from 'lucide-react'
+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 { fetchCostAnalytics, fetchOverview } 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'
+import SectionTitle from '../components/SectionTitle'
+import DateRangePicker from '../components/DateRangePicker'
+import ChatSidebar from '../components/ChatSidebar'
+
+ChartJS.register(ArcElement, CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Legend, Filler)
+
+const MONO = 'JetBrains Mono, monospace'
+const MODEL_COLORS = ['#6366f1', '#a78bfa', '#818cf8', '#c084fc', '#e879f9', '#f472b6', '#fb7185', '#f87171', '#fbbf24', '#34d399', '#2dd4bf', '#38bdf8', '#60a5fa', '#a3e635']
+
+export default function CostAnalysis({ overview }) {
+  const { dark } = useTheme()
+  const navigate = useNavigate()
+  const txtDim = dark ? '#555' : '#999'
+  const legendColor = dark ? '#777' : '#555'
+  const gridColor = dark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.06)'
+
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [editor, setEditor] = useState('')
+  const [apiDateRange, setApiDateRange] = useState(null)
+  const [selectedChatId, setSelectedChatId] = useState(null)
+
+  const editors = overview?.editors || []
+
+  useEffect(() => {
+    setLoading(true)
+    fetchCostAnalytics({ editor, ...dateRangeToApiParams(apiDateRange) }).then(d => {
+      setData(d)
+      setLoading(false)
+    }).catch(() => setLoading(false))
+  }, [editor, apiDateRange])
+
+  if (!data) {
+    return <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text2)' }}>loading cost data...</div>
+  }
+
+  const { totalCost, byModel, byEditor, byProject, monthly, topSessions, summary, unknownModels } = data
+
+  // Charts
+  const modelChartData = byModel.length > 0 ? {
+    labels: byModel.slice(0, 10).map(m => m.model),
+    datasets: [{
+      data: byModel.slice(0, 10).map(m => Math.round(m.cost * 100) / 100),
+      backgroundColor: MODEL_COLORS,
+      borderWidth: 0,
+    }],
+  } : null
+
+  const editorChartData = byEditor.length > 0 ? {
+    labels: byEditor.map(e => editorLabel(e.editor)),
+    datasets: [{
+      data: byEditor.map(e => Math.round(e.cost * 100) / 100),
+      backgroundColor: byEditor.map(e => editorColor(e.editor)),
+      borderWidth: 0,
+    }],
+  } : null
+
+  const monthlyChartData = monthly.length > 1 ? {
+    labels: monthly.map(m => m.month),
+    datasets: [{
+      label: 'Cost ($)',
+      data: monthly.map(m => m.cost),
+      borderColor: '#6366f1',
+      backgroundColor: 'rgba(99,102,241,0.1)',
+      borderWidth: 2,
+      tension: 0.3,
+      pointRadius: 3,
+      pointHoverRadius: 5,
+      fill: true,
+    }],
+  } : null
+
+  const projectChartData = byProject.length > 0 ? {
+    labels: byProject.slice(0, 10).map(p => p.name),
+    datasets: [{
+      data: byProject.slice(0, 10).map(p => Math.round(p.cost * 100) / 100),
+      backgroundColor: '#818cf8',
+      borderRadius: 3,
+    }],
+  } : null
+
+  const doughnutOpts = {
+    responsive: true, maintainAspectRatio: false, cutout: '55%',
+    plugins: {
+      legend: { position: 'right', labels: { color: legendColor, font: { size: 9, family: MONO }, usePointStyle: true, pointStyle: 'circle', padding: 6 } },
+      tooltip: {
+        bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 },
+        callbacks: { label: ctx => ` ${ctx.label}: $${ctx.raw.toFixed(2)}` },
+      },
+    },
+  }
+
+  return (
+    <div className="fade-in space-y-4">
+      {/* Filters */}
+      <div className="flex items-center gap-3">
+        <div className="flex items-center gap-1.5 text-[13px] font-bold" style={{ color: 'var(--c-white)' }}>
+          <DollarSign size={14} style={{ color: '#6366f1' }} />
+          Cost Analysis
+        </div>
+        <select
+          value={editor}
+          onChange={e => setEditor(e.target.value)}
+          className="px-2 py-1 text-[12px] outline-none appearance-none cursor-pointer"
+          style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
+        >
+          <option value="">All Editors</option>
+          {editors.map(e => (
+            <option key={e.id} value={e.id}>{editorLabel(e.id)} ({e.count})</option>
+          ))}
+        </select>
+        <div className="ml-auto"><DateRangePicker value={apiDateRange} onChange={setApiDateRange} /></div>
+      </div>
+
+      {/* Disclaimer */}
+      <div className="flex items-start gap-2 px-3 py-2 text-[11px] rounded" style={{ background: 'rgba(234,179,8,0.06)', border: '1px solid rgba(234,179,8,0.15)', color: '#ca8a04' }}>
+        <AlertTriangle size={12} className="mt-0.5 shrink-0" />
+        <span>These are <strong>estimates</strong> based on public API list prices. Actual costs may be lower if you use discounted plans, commitments, prompt caching, batching, or provider credits. Token counts for some editors are approximated from character counts (~4 chars/token).</span>
+      </div>
+
+      {/* KPIs */}
+      <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))' }}>
+        <KpiCard label="total est. cost" value={formatCost(totalCost)} sub="all models" />
+        <KpiCard label="avg / session" value={formatCost(summary.avgPerSession)} sub={`${formatNumber(summary.totalSessions)} sessions`} />
+        <KpiCard label="avg / day" value={formatCost(summary.avgPerDay)} sub={`${summary.totalDays} days`} />
+        <KpiCard label="models" value={byModel.length} sub={unknownModels.length > 0 ? `${unknownModels.length} unknown` : 'all priced'} />
+        <KpiCard label="top model" value={byModel[0]?.model || '—'} sub={byModel[0] ? formatCost(byModel[0].cost) : ''} />
+        <KpiCard label="top editor" value={byEditor[0] ? editorLabel(byEditor[0].editor) : '—'} sub={byEditor[0] ? formatCost(byEditor[0].cost) : ''} />
+      </div>
+
+      {/* Charts row 1: Model + Editor doughnuts */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
+        <div className="card p-3 lg:col-span-2">
+          <SectionTitle>cost by model</SectionTitle>
+          {modelChartData ? (
+            <div style={{ height: 220 }}>
+              <Bar
+                data={{
+                  labels: byModel.slice(0, 12).map(m => m.model),
+                  datasets: [{
+                    data: byModel.slice(0, 12).map(m => Math.round(m.cost * 100) / 100),
+                    backgroundColor: MODEL_COLORS,
+                    borderRadius: 3,
+                  }],
+                }}
+                options={{
+                  responsive: true, maintainAspectRatio: false, indexAxis: 'y',
+                  scales: {
+                    x: { grid: { color: gridColor }, ticks: { color: txtDim, font: { size: 9, family: MONO }, callback: v => '$' + v } },
+                    y: { grid: { display: false }, ticks: { color: legendColor, font: { size: 9, family: MONO } } },
+                  },
+                  plugins: {
+                    legend: { display: false },
+                    tooltip: {
+                      bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 },
+                      callbacks: { label: ctx => ` $${ctx.raw.toFixed(2)}` },
+                    },
+                  },
+                }}
+              />
+            </div>
+          ) : <div className="text-[11px] py-8 text-center" style={{ color: 'var(--c-text3)' }}>no cost data</div>}
+        </div>
+        <div className="card p-3">
+          <SectionTitle>cost by editor</SectionTitle>
+          {editorChartData ? (
+            <div style={{ height: 220 }}>
+              <Doughnut data={editorChartData} options={doughnutOpts} />
+            </div>
+          ) : <div className="text-[11px] py-8 text-center" style={{ color: 'var(--c-text3)' }}>no cost data</div>}
+        </div>
+      </div>
+
+      {/* Monthly trend */}
+      {monthlyChartData && (
+        <div className="card p-3">
+          <SectionTitle>monthly cost trend</SectionTitle>
+          <div style={{ height: 180 }}>
+            <Line
+              data={monthlyChartData}
+              options={{
+                responsive: true, maintainAspectRatio: false,
+                interaction: { mode: 'index', intersect: false },
+                scales: {
+                  x: { grid: { display: false }, ticks: { color: txtDim, font: { size: 9, family: MONO }, maxRotation: 0, maxTicksLimit: 12 } },
+                  y: { beginAtZero: true, grid: { color: gridColor }, ticks: { color: txtDim, font: { size: 9, family: MONO }, callback: v => '$' + v } },
+                },
+                plugins: {
+                  legend: { display: false },
+                  tooltip: {
+                    bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 },
+                    callbacks: { label: ctx => ` $${ctx.raw.toFixed(2)} (${monthly[ctx.dataIndex]?.sessions || 0} sessions)` },
+                  },
+                },
+              }}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Charts row 2: Projects */}
+      {projectChartData && (
+        <div className="card p-3">
+          <SectionTitle>cost by project (top 10)</SectionTitle>
+          <div style={{ height: 220 }}>
+            <Bar
+              data={projectChartData}
+              options={{
+                responsive: true, maintainAspectRatio: false, indexAxis: 'y',
+                scales: {
+                  x: { grid: { color: gridColor }, ticks: { color: txtDim, font: { size: 9, family: MONO }, callback: v => '$' + v } },
+                  y: { grid: { display: false }, ticks: { color: legendColor, font: { size: 9, family: MONO } } },
+                },
+                plugins: {
+                  legend: { display: false },
+                  tooltip: {
+                    bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 },
+                    callbacks: { label: ctx => ` $${ctx.raw.toFixed(2)}` },
+                  },
+                },
+              }}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Model breakdown table */}
+      <div className="card overflow-hidden">
+        <div className="px-3 py-2" style={{ borderBottom: '1px solid var(--c-border)' }}>
+          <SectionTitle>model breakdown</SectionTitle>
+        </div>
+        <table className="w-full text-[12px]">
+          <thead>
+            <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">model</th>
+              <th className="text-right py-2 px-3 font-medium">input tokens</th>
+              <th className="text-right py-2 px-3 font-medium">output tokens</th>
+              <th className="text-right py-2 px-3 font-medium">cache read</th>
+              <th className="text-right py-2 px-3 font-medium">cache write</th>
+              <th className="text-right py-2 px-3 font-medium">est. cost</th>
+              <th className="text-right py-2 px-3 font-medium">% of total</th>
+            </tr>
+          </thead>
+          <tbody>
+            {byModel.map((m, i) => (
+              <tr key={m.model} style={{ borderBottom: '1px solid var(--c-border)' }}>
+                <td className="py-2 px-3 font-mono font-medium" style={{ color: 'var(--c-white)' }}>
+                  <span className="inline-block w-2 h-2 rounded-full mr-1.5" style={{ background: MODEL_COLORS[i % MODEL_COLORS.length] }} />
+                  {m.model}
+                </td>
+                <td className="py-2 px-3 text-right font-mono" style={{ color: 'var(--c-text2)' }}>{formatNumber(m.inputTokens)}</td>
+                <td className="py-2 px-3 text-right font-mono" style={{ color: 'var(--c-text2)' }}>{formatNumber(m.outputTokens)}</td>
+                <td className="py-2 px-3 text-right font-mono" style={{ color: 'var(--c-text3)' }}>{m.cacheRead > 0 ? formatNumber(m.cacheRead) : '—'}</td>
+                <td className="py-2 px-3 text-right font-mono" style={{ color: 'var(--c-text3)' }}>{m.cacheWrite > 0 ? formatNumber(m.cacheWrite) : '—'}</td>
+                <td className="py-2 px-3 text-right font-mono font-medium" style={{ color: 'var(--c-white)' }}>{formatCost(m.cost)}</td>
+                <td className="py-2 px-3 text-right font-mono" style={{ color: 'var(--c-text3)' }}>
+                  {totalCost > 0 ? ((m.cost / totalCost) * 100).toFixed(1) + '%' : '—'}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {byModel.length === 0 && (
+          <div className="text-center py-8 text-sm" style={{ color: 'var(--c-text3)' }}>no model cost data</div>
+        )}
+      </div>
+
+      {/* Top expensive sessions */}
+      {topSessions.length > 0 && (
+        <div className="card overflow-hidden">
+          <div className="px-3 py-2" style={{ borderBottom: '1px solid var(--c-border)' }}>
+            <SectionTitle>most expensive sessions</SectionTitle>
+          </div>
+          <table className="w-full text-[12px]">
+            <thead>
+              <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">project</th>
+                <th className="text-left py-2 px-3 font-medium">model</th>
+                <th className="text-right py-2 px-3 font-medium">msgs</th>
+                <th className="text-right py-2 px-3 font-medium">est. cost</th>
+                <th className="text-left py-2 px-3 font-medium">date</th>
+              </tr>
+            </thead>
+            <tbody>
+              {topSessions.slice(0, 30).map(s => (
+                <tr
+                  key={s.id}
+                  className="cursor-pointer transition"
+                  style={{ borderBottom: '1px solid var(--c-border)' }}
+                  onMouseEnter={e => e.currentTarget.style.background = 'var(--c-bg3)'}
+                  onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                  onClick={() => setSelectedChatId(s.id)}
+                >
+                  <td className="py-2 px-3">
+                    <span className="inline-flex items-center gap-1.5">
+                      <EditorIcon source={s.source} size={12} />
+                      <span style={{ color: 'var(--c-text2)' }}>{editorLabel(s.source)}</span>
+                    </span>
+                  </td>
+                  <td className="py-2 px-3 font-medium truncate max-w-[200px]" style={{ color: 'var(--c-white)' }}>
+                    {s.name || <span style={{ color: 'var(--c-text3)' }}>Untitled</span>}
+                  </td>
+                  <td className="py-2 px-3 truncate max-w-[140px]" style={{ color: 'var(--c-text2)' }} title={s.folder}>
+                    {s.folder ? (
+                      <span
+                        className="cursor-pointer hover:underline"
+                        style={{ color: 'var(--c-accent)' }}
+                        onClick={e => { e.stopPropagation(); navigate(`/projects/detail?folder=${encodeURIComponent(s.folder)}`) }}
+                      >{s.folder.split('/').pop()}</span>
+                    ) : ''}
+                  </td>
+                  <td className="py-2 px-3 font-mono truncate max-w-[140px]" style={{ color: 'var(--c-text2)' }} title={s.model}>{s.model}</td>
+                  <td className="py-2 px-3 text-right" style={{ color: 'var(--c-text3)' }}>{s.messages}</td>
+                  <td className="py-2 px-3 text-right font-mono font-medium" style={{ color: 'var(--c-white)' }}>{formatCost(s.cost)}</td>
+                  <td className="py-2 px-3 whitespace-nowrap" style={{ color: 'var(--c-text3)' }}>{formatDate(s.lastUpdatedAt)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* Unknown models */}
+      {unknownModels.length > 0 && (
+        <div className="card p-3">
+          <SectionTitle>
+            <AlertTriangle size={11} className="inline mr-1" style={{ color: '#f59e0b' }} />
+            unpriced models ({unknownModels.length})
+          </SectionTitle>
+          <div className="flex flex-wrap gap-1.5 mt-2">
+            {unknownModels.map(m => (
+              <span key={m} className="text-[11px] px-2 py-0.5 font-mono" style={{ background: 'rgba(245,158,11,0.08)', color: '#f59e0b', border: '1px solid rgba(245,158,11,0.2)' }}>
+                {m}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Chat sidebar */}
+      <ChatSidebar chatId={selectedChatId} onClose={() => setSelectedChatId(null)} />
+    </div>
+  )
+}