agentlytics 0.1.0 → 0.1.2

package/ui/src/pages/Projects.jsx

@@ -1,13 +1,15 @@
 import { useState, useEffect } from 'react'
 import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement } from 'chart.js'
 import { Doughnut, Bar } from 'react-chartjs-2'
-import { Search, ChevronRight } from 'lucide-react'
+import { Search, MessageSquare, Wrench, Cpu, FolderOpen, Calendar, ArrowRight } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
 import { fetchProjects } from '../lib/api'
 import { editorColor, editorLabel, formatNumber, formatDate, dateRangeToApiParams } from '../lib/constants'
 import { useTheme } from '../lib/theme'
 import KpiCard from '../components/KpiCard'
+import EditorIcon from '../components/EditorIcon'
 import DateRangePicker from '../components/DateRangePicker'
+import SectionTitle from '../components/SectionTitle'
 
 ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement)
 
@@ -41,33 +43,75 @@ export default function Projects({ overview }) {
   const totalSessions = projects.reduce((s, p) => s + p.totalSessions, 0)
   const totalMessages = projects.reduce((s, p) => s + p.totalMessages, 0)
   const totalTokens = projects.reduce((s, p) => s + p.totalInputTokens + p.totalOutputTokens, 0)
-  const totalTools = projects.reduce((s, p) => s + p.totalToolCalls, 0)
+  const maxSessions = Math.max(...projects.map(p => p.totalSessions), 1)
 
-  // Aggregate model usage across all projects
+  // Aggregate for charts
   const globalModels = {}
   const globalEditors = {}
   for (const p of projects) {
     for (const m of p.topModels) globalModels[m.name] = (globalModels[m.name] || 0) + m.count
     for (const [e, c] of Object.entries(p.editors)) globalEditors[e] = (globalEditors[e] || 0) + c
   }
-  const topGlobalModels = Object.entries(globalModels).sort((a, b) => b[1] - a[1]).slice(0, 10)
+  const topGlobalModels = Object.entries(globalModels).sort((a, b) => b[1] - a[1]).slice(0, 8)
   const topGlobalEditors = Object.entries(globalEditors).sort((a, b) => b[1] - a[1])
+  const top10 = projects.slice(0, 10)
 
   return (
-    <div className="fade-in space-y-5">
+    <div className="fade-in space-y-4">
       {/* KPIs */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+      <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(90px, 1fr))' }}>
         <KpiCard label="projects" value={projects.length} />
-        <KpiCard label="total sessions" value={formatNumber(totalSessions)} />
-        <KpiCard label="total messages" value={formatNumber(totalMessages)} />
-        <KpiCard label="total tokens" value={formatNumber(totalTokens)} />
+        <KpiCard label="sessions" value={formatNumber(totalSessions)} onClick={() => navigate('/sessions')} />
+        <KpiCard label="messages" value={formatNumber(totalMessages)} />
+        <KpiCard label="tokens" value={formatNumber(totalTokens)} />
       </div>
 
-      {/* Global model & editor breakdown */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        <div className="card p-5">
-          <h3 className="text-xs font-medium uppercase tracking-wider mb-3" style={{ color: 'var(--c-text2)' }}>models across projects</h3>
-          <div style={{ height: 240 }}>
+      {/* Charts row */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
+        <div className="card p-3">
+          <SectionTitle>top projects <span style={{ color: 'var(--c-text3)' }}>by sessions</span></SectionTitle>
+          <div style={{ height: 160 }}>
+            <Bar
+              data={{
+                labels: top10.map(p => p.name),
+                datasets: [{
+                  data: top10.map(p => p.totalSessions),
+                  backgroundColor: '#6366f1',
+                  borderRadius: 3,
+                }],
+              }}
+              options={{
+                responsive: true, maintainAspectRatio: false, indexAxis: 'y',
+                scales: {
+                  x: { grid: { color: gridColor }, ticks: { color: txtDim, font: { size: 8, family: MONO } } },
+                  y: { grid: { display: false }, ticks: { color: txtColor, font: { size: 8, family: MONO }, callback: (v, i) => top10[i]?.name?.length > 16 ? top10[i].name.slice(0, 15) + '…' : top10[i]?.name } },
+                },
+                plugins: { legend: { display: false }, tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } } },
+              }}
+            />
+          </div>
+        </div>
+        <div className="card p-3">
+          <SectionTitle>editors</SectionTitle>
+          <div style={{ height: 160 }}>
+            <Doughnut
+              data={{
+                labels: topGlobalEditors.map(e => editorLabel(e[0])),
+                datasets: [{ data: topGlobalEditors.map(e => e[1]), backgroundColor: topGlobalEditors.map(e => editorColor(e[0])), borderWidth: 0 }],
+              }}
+              options={{
+                responsive: true, maintainAspectRatio: false, cutout: '60%',
+                plugins: {
+                  legend: { position: 'right', labels: { color: txtColor, font: { size: 9, family: MONO }, usePointStyle: true, pointStyle: 'circle', padding: 6 } },
+                  tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } },
+                },
+              }}
+            />
+          </div>
+        </div>
+        <div className="card p-3">
+          <SectionTitle>models</SectionTitle>
+          <div style={{ height: 160 }}>
             {topGlobalModels.length > 0 ? (
               <Doughnut
                 data={{
@@ -75,95 +119,114 @@ export default function Projects({ overview }) {
                   datasets: [{ data: topGlobalModels.map(m => m[1]), backgroundColor: MODEL_COLORS, borderWidth: 0 }],
                 }}
                 options={{
-                  responsive: true, maintainAspectRatio: false, cutout: '55%',
+                  responsive: true, maintainAspectRatio: false, cutout: '60%',
                   plugins: {
-                    legend: { position: 'right', labels: { color: txtColor, font: { size: 9, family: MONO }, usePointStyle: true, pointStyle: 'circle', padding: 8 } },
-                    tooltip: { bodyFont: { family: MONO, size: 11 }, titleFont: { family: MONO, size: 11 } },
+                    legend: { position: 'right', labels: { color: txtColor, font: { size: 9, family: MONO }, usePointStyle: true, pointStyle: 'circle', padding: 6 } },
+                    tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } },
                   },
                 }}
               />
             ) : <div className="text-xs text-center py-12" style={{ color: 'var(--c-text3)' }}>no model data</div>}
           </div>
         </div>
-        <div className="card p-5">
-          <h3 className="text-xs font-medium uppercase tracking-wider mb-3" style={{ color: 'var(--c-text2)' }}>editors across projects</h3>
-          <div style={{ height: 240 }}>
-            <Bar
-              data={{
-                labels: topGlobalEditors.map(e => editorLabel(e[0])),
-                datasets: [{
-                  data: topGlobalEditors.map(e => e[1]),
-                  backgroundColor: topGlobalEditors.map(e => editorColor(e[0])),
-                  borderRadius: 4,
-                }],
-              }}
-              options={{
-                responsive: true, maintainAspectRatio: false,
-                scales: {
-                  x: { grid: { display: false }, ticks: { color: txtColor, font: { size: 9, family: MONO } } },
-                  y: { grid: { color: gridColor }, ticks: { color: txtDim, font: { size: 9, family: MONO } } },
-                },
-                plugins: { legend: { display: false }, tooltip: { bodyFont: { family: MONO, size: 11 }, titleFont: { family: MONO, size: 11 } } },
-              }}
-            />
-          </div>
-        </div>
       </div>
 
       {/* Filters */}
       <div className="flex items-center gap-2">
-          <select
-            value={editorFilter}
-            onChange={e => setEditorFilter(e.target.value)}
-            className="px-2 py-1 text-[11px] outline-none"
+        <select
+          value={editorFilter}
+          onChange={e => setEditorFilter(e.target.value)}
+          className="px-2 py-1.5 text-[11px] outline-none rounded-sm"
+          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)}</option>
+          ))}
+        </select>
+        <div className="relative max-w-sm flex-1">
+          <Search size={13} className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: 'var(--c-text3)' }} />
+          <input
+            type="text"
+            placeholder="search projects..."
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            className="w-full pl-8 pr-3 py-1.5 text-[11px] outline-none rounded-sm"
             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)}</option>
-            ))}
-          </select>
-          <div className="relative max-w-sm flex-1">
-            <Search size={13} className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: 'var(--c-text3)' }} />
-            <input
-              type="text"
-              placeholder="search projects..."
-              value={search}
-              onChange={e => setSearch(e.target.value)}
-              className="w-full pl-8 pr-3 py-1 text-[11px] outline-none"
-              style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
-            />
-          </div>
+          />
+        </div>
         <div className="ml-auto"><DateRangePicker value={dateRange} onChange={setDateRange} /></div>
       </div>
 
-      {/* Project list */}
-      <div className="space-y-2">
+      {/* Project cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
         {filtered.map(p => {
           const editorEntries = Object.entries(p.editors).sort((a, b) => b[1] - a[1])
+          const totalTok = p.totalInputTokens + p.totalOutputTokens
+          const topModel = p.topModels[0]
 
           return (
             <div
               key={p.folder}
-              className="card px-4 py-3 flex items-center gap-3 cursor-pointer transition"
+              className="card p-3 cursor-pointer transition hover:opacity-90 flex flex-col gap-2.5"
               onClick={() => navigate(`/projects/detail?folder=${encodeURIComponent(p.folder)}`)}
             >
-              <div className="flex-1 min-w-0">
-                <div className="text-sm font-medium truncate" style={{ color: 'var(--c-white)' }}>{p.name}</div>
-                <div className="text-[10px] truncate" style={{ color: 'var(--c-text3)' }}>{p.folder}</div>
-              </div>
-              <div className="flex items-center gap-4 text-[10px] flex-shrink-0" style={{ color: 'var(--c-text2)' }}>
-                <div className="flex items-center gap-1.5">
+              {/* Header: name + editors */}
+              <div className="flex items-start gap-2 min-w-0">
+                <FolderOpen size={14} className="flex-shrink-0 mt-0.5" style={{ color: 'var(--c-accent)' }} />
+                <div className="flex-1 min-w-0">
+                  <div className="text-[12px] font-bold truncate" style={{ color: 'var(--c-white)' }}>{p.name}</div>
+                  <div className="text-[9px] truncate" style={{ color: 'var(--c-text3)' }}>{p.folder}</div>
+                </div>
+                <div className="flex items-center gap-1 flex-shrink-0">
                   {editorEntries.slice(0, 4).map(([e]) => (
-                    <span key={e} className="w-2 h-2 rounded-full" style={{ background: editorColor(e) }} title={editorLabel(e)} />
+                    <EditorIcon key={e} source={e} size={12} />
                   ))}
                 </div>
-                <span>{p.totalSessions} sessions</span>
-                <span>{formatNumber(p.totalMessages)} msgs</span>
-                {p.totalToolCalls > 0 && <span>{formatNumber(p.totalToolCalls)} tools</span>}
-                {(p.totalInputTokens + p.totalOutputTokens) > 0 && <span>{formatNumber(p.totalInputTokens + p.totalOutputTokens)} tokens</span>}
-                <span>{formatDate(p.lastSeen)}</span>
-                <ChevronRight size={14} />
+              </div>
+
+              {/* Activity bar */}
+              <div className="w-full h-1 rounded-full overflow-hidden" style={{ background: 'var(--c-code-bg)' }}>
+                <div className="h-full rounded-full" style={{ width: `${(p.totalSessions / maxSessions * 100).toFixed(1)}%`, background: 'var(--c-accent)' }} />
+              </div>
+
+              {/* Stats grid */}
+              <div className="grid grid-cols-2 gap-x-3 gap-y-1 text-[10px]">
+                <div className="flex items-center gap-1">
+                  <MessageSquare size={9} style={{ color: 'var(--c-text3)' }} />
+                  <span style={{ color: 'var(--c-text2)' }}>{p.totalSessions} sessions</span>
+                  <span className="ml-auto font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(p.totalMessages)} msgs</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <Wrench size={9} style={{ color: 'var(--c-text3)' }} />
+                  <span style={{ color: 'var(--c-text2)' }}>tools</span>
+                  <span className="ml-auto font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(p.totalToolCalls)}</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <Cpu size={9} style={{ color: 'var(--c-text3)' }} />
+                  <span className="truncate" style={{ color: 'var(--c-text2)' }}>{topModel ? topModel.name : '—'}</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <span style={{ color: 'var(--c-text3)' }}>tok</span>
+                  <span className="ml-auto font-bold" style={{ color: totalTok > 0 ? 'var(--c-white)' : 'var(--c-text3)' }}>{totalTok > 0 ? formatNumber(totalTok) : '—'}</span>
+                </div>
+              </div>
+
+              {/* Footer: editors breakdown + date */}
+              <div className="flex items-center gap-2 pt-1 text-[9px]" style={{ borderTop: '1px solid var(--c-border)' }}>
+                <div className="flex items-center gap-1.5 flex-1 min-w-0">
+                  {editorEntries.map(([e, c]) => (
+                    <span key={e} className="inline-flex items-center gap-0.5 truncate">
+                      <span className="w-1.5 h-1.5 rounded-full flex-shrink-0" style={{ background: editorColor(e) }} />
+                      <span style={{ color: 'var(--c-text3)' }}>{editorLabel(e)}</span>
+                      <span className="font-bold" style={{ color: 'var(--c-text2)' }}>{c}</span>
+                    </span>
+                  ))}
+                </div>
+                <div className="flex items-center gap-1 flex-shrink-0" style={{ color: 'var(--c-text3)' }}>
+                  <Calendar size={8} />
+                  <span>{formatDate(p.lastSeen)}</span>
+                </div>
               </div>
             </div>
           )

package/ui/src/pages/Sessions.jsx

@@ -1,16 +1,18 @@
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react'
-import { useSearchParams } from 'react-router-dom'
+import { useSearchParams, useNavigate } from 'react-router-dom'
 import { Search, Filter, List, FolderOpen, ChevronDown, ChevronRight, X, AlertTriangle } from 'lucide-react'
-import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Legend, Filler } from 'chart.js'
-import { Line } from 'react-chartjs-2'
+import { Chart as ChartJS, ArcElement, CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Legend, Filler } from 'chart.js'
+import { Line, Doughnut, Bar } from 'react-chartjs-2'
 import { fetchChats } from '../lib/api'
-import { editorColor, editorLabel, formatDate, dateRangeToApiParams } from '../lib/constants'
+import { editorColor, editorLabel, formatNumber, formatDate, dateRangeToApiParams } from '../lib/constants'
 import { useTheme } from '../lib/theme'
-import EditorDot from '../components/EditorDot'
+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(CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Legend, Filler)
+ChartJS.register(ArcElement, CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Legend, Filler)
 
 const MONO = 'JetBrains Mono, monospace'
 
@@ -105,6 +107,7 @@ export default function Sessions({ overview }) {
   const [total, setTotal] = useState(0)
   const [search, setSearch] = useState('')
   const [searchParams] = useSearchParams()
+  const navigate = useNavigate()
   const [editor, setEditor] = useState(searchParams.get('editor') || '')
   const [loading, setLoading] = useState(true)
   const [groupByProject, setGroupByProject] = useState(false)
@@ -149,6 +152,33 @@ export default function Sessions({ overview }) {
   }, [searchFiltered, dateRange])
 
   const editors = overview?.editors || []
+  const MODEL_COLORS = ['#6366f1', '#a78bfa', '#818cf8', '#c084fc', '#e879f9', '#f472b6', '#fb7185', '#f87171', '#fbbf24', '#34d399']
+
+  // Summary stats from filtered chats
+  const stats = useMemo(() => {
+    const editorCounts = {}
+    const modelCounts = {}
+    const modeCounts = {}
+    let bloatCount = 0
+    let largeCount = 0
+    const projectSet = new Set()
+    for (const c of filtered) {
+      if (c.source) editorCounts[c.source] = (editorCounts[c.source] || 0) + 1
+      if (c.topModel) modelCounts[c.topModel] = (modelCounts[c.topModel] || 0) + 1
+      if (c.mode) modeCounts[c.mode] = (modeCounts[c.mode] || 0) + 1
+      if (c.folder) projectSet.add(c.folder)
+      if (c.bubbleCount >= 500) bloatCount++
+      else if (c.bubbleCount >= 200) largeCount++
+    }
+    return {
+      editorEntries: Object.entries(editorCounts).sort((a, b) => b[1] - a[1]),
+      modelEntries: Object.entries(modelCounts).sort((a, b) => b[1] - a[1]).slice(0, 10),
+      modeEntries: Object.entries(modeCounts).sort((a, b) => b[1] - a[1]),
+      bloatCount,
+      largeCount,
+      projectCount: projectSet.size,
+    }
+  }, [filtered])
 
   // Timeline chart data: sessions per week by editor (always use full list, not date-filtered)
   const timelineChart = useMemo(() => {
@@ -217,38 +247,45 @@ export default function Sessions({ overview }) {
       onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
       onClick={() => setSelectedChatId(c.id)}
     >
-      <td className="py-2.5 px-4">
-        <EditorDot source={c.source} showLabel size={7} />
+      <td className="py-2 px-3">
+        <span className="inline-flex items-center gap-1.5">
+          <EditorIcon source={c.source} size={12} />
+          <span className="text-[11px]" style={{ color: 'var(--c-text2)' }}>{editorLabel(c.source)}</span>
+        </span>
       </td>
-      <td className="py-2.5 px-4 font-medium truncate max-w-[300px]" style={{ color: 'var(--c-white)' }}>
-        {c.name || <span style={{ color: 'var(--c-text3)' }}>(untitled)</span>}
-        {c.encrypted && <span className="ml-2 text-[10px] text-yellow-500/60">locked</span>}
-        {c.bubbleCount >= 200 && (
-          <span
-            className="ml-2 inline-flex items-center gap-0.5 text-[10px] px-1.5 py-0.5 rounded-sm"
-            style={{
-              color: c.bubbleCount >= 500 ? '#ef4444' : '#f59e0b',
-              background: c.bubbleCount >= 500 ? 'rgba(239,68,68,0.1)' : 'rgba(245,158,11,0.1)',
-            }}
-            title={`${c.bubbleCount} messages — large context may degrade AI performance`}
-          >
-            <AlertTriangle size={9} />
-            {c.bubbleCount >= 500 ? 'context bloat' : 'large context'}
-          </span>
-        )}
+      <td className="py-2 px-3 font-medium truncate max-w-[280px] text-[11px]" 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>}
       </td>
       {!groupByProject && (
-        <td className="py-2.5 px-4 truncate max-w-[200px] text-xs" style={{ color: 'var(--c-text2)' }} title={c.folder}>
-          {c.folder ? c.folder.split('/').pop() : ''}
+        <td className="py-2 px-3 truncate max-w-[160px] text-[11px]" style={{ color: 'var(--c-text2)' }} title={c.folder}>
+          {c.folder ? (
+            <span
+              className="cursor-pointer hover:underline"
+              style={{ color: 'var(--c-accent)' }}
+              onClick={e => { e.stopPropagation(); navigate(`/projects/detail?folder=${encodeURIComponent(c.folder)}`) }}
+            >{c.folder.split('/').pop()}</span>
+          ) : ''}
         </td>
       )}
-      <td className="py-2.5 px-4">
-        <span className="text-xs" style={{ color: 'var(--c-text2)' }}>{c.mode}</span>
-      </td>
-      <td className="py-2.5 px-4 text-xs truncate max-w-[180px] font-mono" style={{ color: 'var(--c-text2)' }} title={c.topModel || ''}>
+      <td className="py-2 px-3 text-[11px]" style={{ color: 'var(--c-text2)' }}>{c.mode || ''}</td>
+      <td className="py-2 px-3 text-[11px] font-mono truncate max-w-[150px]" style={{ color: 'var(--c-text2)' }} title={c.topModel || ''}>
         {c.topModel || ''}
       </td>
-      <td className="py-2.5 px-4 text-xs whitespace-nowrap" style={{ color: 'var(--c-text2)' }}>
+      <td className="py-2 px-3 text-[11px]">
+        {c.bubbleCount >= 500 ? (
+          <span className="inline-flex items-center gap-0.5 font-bold" style={{ color: '#ef4444' }}>
+            <AlertTriangle size={9} />{c.bubbleCount}
+          </span>
+        ) : c.bubbleCount >= 200 ? (
+          <span className="inline-flex items-center gap-0.5 font-bold" style={{ color: '#f59e0b' }}>
+            <AlertTriangle size={9} />{c.bubbleCount}
+          </span>
+        ) : (
+          <span style={{ color: 'var(--c-text3)' }}>{c.bubbleCount || 0}</span>
+        )}
+      </td>
+      <td className="py-2 px-3 text-[11px] whitespace-nowrap" style={{ color: 'var(--c-text3)' }}>
         {formatDate(c.lastUpdatedAt || c.createdAt)}
       </td>
     </tr>
@@ -256,14 +293,94 @@ export default function Sessions({ overview }) {
 
   return (
     <div className="fade-in space-y-4">
+      {/* KPIs */}
+      <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(90px, 1fr))' }}>
+        <KpiCard label="sessions" value={formatNumber(filtered.length)} sub={filtered.length !== total ? `of ${formatNumber(total)}` : ''} />
+        <KpiCard label="projects" value={stats.projectCount} />
+        <KpiCard label="editors" value={stats.editorEntries.length} />
+        <KpiCard label="models" value={stats.modelEntries.length} />
+        {(stats.bloatCount + stats.largeCount) > 0 && (
+          <KpiCard label="large context" value={stats.bloatCount + stats.largeCount} sub={stats.bloatCount > 0 ? `${stats.bloatCount} bloated` : ''} />
+        )}
+      </div>
+
+      {/* Summary charts */}
+      {filtered.length > 0 && (
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
+          <div className="card p-3">
+            <SectionTitle>editors</SectionTitle>
+            <div style={{ height: 140 }}>
+              <Doughnut
+                data={{
+                  labels: stats.editorEntries.map(e => editorLabel(e[0])),
+                  datasets: [{ data: stats.editorEntries.map(e => e[1]), backgroundColor: stats.editorEntries.map(e => editorColor(e[0])), borderWidth: 0 }],
+                }}
+                options={{
+                  responsive: true, maintainAspectRatio: false, cutout: '60%',
+                  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 } },
+                  },
+                }}
+              />
+            </div>
+          </div>
+          <div className="card p-3">
+            <SectionTitle>models</SectionTitle>
+            <div style={{ height: 140 }}>
+              {stats.modelEntries.length > 0 ? (
+                <Doughnut
+                  data={{
+                    labels: stats.modelEntries.map(m => m[0]),
+                    datasets: [{ data: stats.modelEntries.map(m => m[1]), backgroundColor: MODEL_COLORS, borderWidth: 0 }],
+                  }}
+                  options={{
+                    responsive: true, maintainAspectRatio: false, cutout: '60%',
+                    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 } },
+                    },
+                  }}
+                />
+              ) : <div className="text-[10px] py-8 text-center" style={{ color: 'var(--c-text3)' }}>no model data</div>}
+            </div>
+          </div>
+          <div className="card p-3">
+            <SectionTitle>modes</SectionTitle>
+            <div style={{ height: 140 }}>
+              {stats.modeEntries.length > 0 ? (
+                <Bar
+                  data={{
+                    labels: stats.modeEntries.map(m => m[0] || 'unknown'),
+                    datasets: [{
+                      data: stats.modeEntries.map(m => m[1]),
+                      backgroundColor: '#6366f1',
+                      borderRadius: 3,
+                    }],
+                  }}
+                  options={{
+                    responsive: true, maintainAspectRatio: false, indexAxis: 'y',
+                    scales: {
+                      x: { grid: { color: gridColor }, ticks: { color: txtDim, font: { size: 8, family: MONO } } },
+                      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 } } },
+                  }}
+                />
+              ) : <div className="text-[10px] py-8 text-center" style={{ color: 'var(--c-text3)' }}>no mode data</div>}
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Timeline chart */}
       {timelineChart && timelineChart.labels.length > 1 && (
-        <div className="card p-4">
+        <div className="card p-3">
           <div className="flex items-center justify-between mb-2">
-            <h3 className="text-xs font-medium uppercase tracking-wider" style={{ color: 'var(--c-text2)' }}>
+            <SectionTitle>
               session timeline
-              <span className="ml-2 font-normal" style={{ color: 'var(--c-text3)' }}>(drag to select range)</span>
-            </h3>
+              <span className="ml-2 font-normal text-[9px]" style={{ color: 'var(--c-text3)' }}>(drag to select range)</span>
+            </SectionTitle>
             {dateRange && (
               <button
                 onClick={() => setDateRange(null)}
@@ -310,7 +427,7 @@ export default function Sessions({ overview }) {
               className="pl-8 pr-3 py-1 text-[11px] 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>
+              <option value="">All Editors</option>
               {editors.map(e => (
                 <option key={e.id} value={e.id}>{editorLabel(e.id)} ({e.count})</option>
               ))}
@@ -351,13 +468,14 @@ export default function Sessions({ overview }) {
         <div className="card overflow-hidden">
           <table className="w-full text-sm">
             <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.5 px-4 font-medium">editor</th>
-                <th className="text-left py-2.5 px-4 font-medium">name</th>
-                <th className="text-left py-2.5 px-4 font-medium">project</th>
-                <th className="text-left py-2.5 px-4 font-medium">mode</th>
-                <th className="text-left py-2.5 px-4 font-medium">model</th>
-                <th className="text-left py-2.5 px-4 font-medium">updated</th>
+              <tr className="text-[9px] 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">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-left py-2 px-3 font-medium">updated</th>
               </tr>
             </thead>
             <tbody>