agentlytics 0.1.5 → 0.1.7

package/ui/package.json

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

package/ui/src/App.jsx

@@ -1,6 +1,6 @@
 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, Settings as SettingsIcon } from 'lucide-react'
 import { fetchOverview, refetchAgents, fetchMode, fetchRelayConfig, getAuthToken, setOnAuthFailure } from './lib/api'
 import { useTheme } from './lib/theme'
 import AnimatedLogo from './components/AnimatedLogo'
@@ -12,7 +12,9 @@ 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 Settings from './pages/Settings'
 import RelayDashboard from './pages/RelayDashboard'
 import RelayUserDetail from './pages/RelayUserDetail'
 
@@ -86,6 +88,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' },
@@ -166,6 +169,14 @@ export default function App() {
               Connect
             </button>
           )}
+          <NavLink
+            to="/settings"
+            className="p-1 rounded transition hover:bg-[var(--c-card)]"
+            style={({ isActive }) => ({ color: isActive ? '#6366f1' : 'var(--c-text2)' })}
+            title="Settings"
+          >
+            <SettingsIcon size={13} />
+          </NavLink>
           <button
             onClick={toggle}
             className="p-1 rounded transition hover:bg-[var(--c-card)]"
@@ -200,9 +211,11 @@ 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 />} />
+            <Route path="/settings" element={<Settings />} />
           </Routes>
         )}
       </main>

package/ui/src/lib/api.js

@@ -127,6 +127,45 @@ 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 fetchConfig() {
+  const res = await fetch(`${BASE}/api/config`);
+  return res.json();
+}
+
+export async function updateConfig(data) {
+  const res = await fetch(`${BASE}/api/config`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+  return res.json();
+}
+
+export async function fetchAllProjects() {
+  const res = await fetch(`${BASE}/api/all-projects`);
+  return res.json();
+}
+
 export async function executeQuery(sql) {
   const res = await fetch(`${BASE}/api/query`, {
     method: 'POST',

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/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>
+  )
+}

package/ui/src/pages/Dashboard.jsx

@@ -6,9 +6,10 @@ 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 ChatSidebar from '../components/ChatSidebar'
 import { useTheme } from '../lib/theme'
 import SectionTitle from '../components/SectionTitle'
 
@@ -30,8 +31,10 @@ 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 [selectedChatId, setSelectedChatId] = useState(null)
   const txtColor = dark ? '#888' : '#555'
   const txtDim = dark ? '#555' : '#999'
   const gridColor = dark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.06)'
@@ -64,16 +67,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])
 
@@ -282,6 +288,19 @@ 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>
@@ -467,18 +486,19 @@ 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-[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>
+                    {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>
                 )
@@ -524,7 +544,7 @@ export default function Dashboard({ overview }) {
                   key={c.id}
                   className="flex items-center gap-1.5 px-1.5 py-1 rounded-sm cursor-pointer transition hover:opacity-80"
                   style={{ background: c.bubbleCount >= 500 ? 'rgba(239,68,68,0.06)' : 'rgba(245,158,11,0.06)' }}
-                  onClick={() => navigate(`/sessions/${c.id}`)}
+                  onClick={() => setSelectedChatId(c.id)}
                 >
                   <EditorIcon source={c.source} size={10} />
                   <span className="text-[10px] truncate flex-1" style={{ color: 'var(--c-text)' }}>{c.name || 'Untitled'}</span>
@@ -540,6 +560,7 @@ export default function Dashboard({ overview }) {
           </div>
         )}
       </div>
+      <ChatSidebar chatId={selectedChatId} onClose={() => setSelectedChatId(null)} />
     </div>
   )
 }

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'
@@ -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)
   }
 
@@ -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 */}