memhouse 0.0.1 → 0.3.1

package/ui/src/pages/Dashboard.jsx

@@ -0,0 +1,529 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { ArrowRight, X, Flame, Zap, MessageSquare, Wrench, Share2, AlertTriangle, LayoutDashboard } from 'lucide-react'
+import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, PointElement, LineElement, Filler } from 'chart.js'
+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, formatCost, dateRangeToApiParams } from '../lib/constants'
+import EditorIcon from '../components/EditorIcon'
+import { fetchDailyActivity, fetchOverview as fetchOverviewApi, fetchDashboardStats, fetchChats, fetchCosts } from '../lib/api'
+import ChatSidebar from '../components/ChatSidebar'
+import AnimatedLoader from '../components/AnimatedLoader'
+import ShareModal from '../components/ShareModal'
+import { useTheme } from '../lib/theme'
+import SectionTitle from '../components/SectionTitle'
+import PageHeader from '../components/PageHeader'
+
+ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, PointElement, LineElement, Filler)
+
+const MONO = 'JetBrains Mono, monospace'
+const WEEKDAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+const MODE_COLORS = {
+  agent: '#a855f7', chat: '#3b82f6', cascade: '#06b6d4', edit: '#10b981',
+  copilot: '#f59e0b', thread: '#ec4899', opencode: '#f43f5e', claude: '#f97316',
+}
+
+export default function Dashboard({ overview }) {
+  const navigate = useNavigate()
+  const [dailyData, setDailyData] = useState(null)
+  const [filteredData, setFilteredData] = useState(null)
+  const [stats, setStats] = useState(null)
+  const [selectedEditor, setSelectedEditor] = useState(null)
+  const [dateRange, setDateRange] = useState(null)
+  const { dark } = useTheme()
+  const [costs, setCosts] = useState(null)
+  const [shareOpen, setShareOpen] = 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)'
+  const legendColor = dark ? '#888' : '#555'
+
+  const chartOpts = {
+    responsive: true, maintainAspectRatio: false,
+    plugins: {
+      legend: { position: 'right', labels: { color: legendColor, font: { size: 10, family: MONO }, padding: 12, usePointStyle: true, pointStyle: 'circle' } },
+      tooltip: { bodyFont: { family: MONO, size: 11 }, titleFont: { family: MONO, size: 11 } },
+    },
+  }
+  const barScales = {
+    x: { grid: { display: false }, ticks: { color: txtDim, font: { size: 8, family: MONO } } },
+    y: { grid: { color: gridColor }, ticks: { color: txtDim, font: { size: 8, family: MONO } }, beginAtZero: true },
+  }
+  const noLegend = { legend: { display: false }, tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } } }
+
+  useEffect(() => {
+    const dateParams = dateRangeToApiParams(dateRange)
+    const chatParams = { limit: 500, named: false, ...dateParams }
+    if (selectedEditor) chatParams.editor = selectedEditor
+
+    fetchChats(chatParams).then(r => {
+      const big = (r.chats || []).filter(c => c.bubbleCount >= 100).sort((a, b) => b.bubbleCount - a.bubbleCount)
+      setLargeContextChats(big)
+    })
+
+    if (!selectedEditor) {
+      // A date range without an editor must still refresh the overview widgets
+      // (KPIs, monthly trend, top projects) — falling back to the all-time
+      // `overview` prop would disagree with the date-scoped heatmap/stats/costs.
+      const hasDates = dateParams.dateFrom || dateParams.dateTo
+      if (hasDates) fetchOverviewApi(dateParams).then(setFilteredData)
+      else 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 }),
+      fetchCosts({ editor: selectedEditor, ...dateParams }),
+    ]).then(([ov, daily, st, c]) => {
+      setFilteredData(ov)
+      setDailyData(daily)
+      setStats(st)
+      setCosts(c)
+    })
+  }, [selectedEditor, dateRange])
+
+  if (!overview) return <AnimatedLoader label="Loading dashboard..." />
+
+  const d = filteredData || overview
+  const allEditors = overview.editors.sort((a, b) => b.count - a.count)
+  const daysSpan = d.oldestChat && d.newestChat ? Math.max(1, Math.round((d.newestChat - d.oldestChat) / 86400000)) : 0
+  const thisMonth = d.byMonth.length > 0 ? d.byMonth[d.byMonth.length - 1] : null
+  const modes = Object.entries(d.byMode).sort((a, b) => b[1] - a[1])
+  const sel = selectedEditor ? allEditors.find(e => e.id === selectedEditor) : null
+
+  const editorChartData = {
+    labels: allEditors.map(e => editorLabel(e.id)),
+    datasets: [{ data: allEditors.map(e => e.count), backgroundColor: allEditors.map(e => editorColor(e.id)), borderWidth: 0, spacing: 2 }],
+  }
+  const modeChartData = {
+    labels: modes.map(e => e[0]),
+    datasets: [{ data: modes.map(e => e[1]), backgroundColor: modes.map(e => MODE_COLORS[e[0]] || '#6b7280'), borderWidth: 0 }],
+  }
+  const maxProject = d.topProjects.length > 0 ? d.topProjects[0].count : 1
+
+  // ── Stats-derived charts ──
+  const mt = stats?.monthlyTrend
+  const monthlyTrendData = mt && mt.months.length > 0 ? {
+    labels: mt.months.map(m => m.substring(2)), // "25-01" etc
+    datasets: mt.sources.map(src => ({
+      label: editorLabel(src),
+      data: mt.months.map(m => mt.data[m]?.[src] || 0),
+      backgroundColor: editorColor(src) + 'CC',
+      borderRadius: 2,
+    })),
+  } : null
+
+  const hourlyData = stats ? {
+    labels: stats.hourly.map((_, i) => `${String(i).padStart(2, '0')}`),
+    datasets: [{
+      data: stats.hourly,
+      backgroundColor: stats.hourly.map((v, i) => {
+        const peak = Math.max(...stats.hourly)
+        const ratio = peak > 0 ? v / peak : 0
+        return ratio > 0.75 ? '#6366f1' : ratio > 0.5 ? '#818cf8' : ratio > 0.25 ? '#a5b4fc' : '#c7d2fe50'
+      }),
+      borderRadius: 2,
+    }],
+  } : null
+
+  const weekdayData = stats ? {
+    labels: WEEKDAY_LABELS,
+    datasets: [{
+      data: stats.weekdays,
+      backgroundColor: stats.weekdays.map((_, i) => i === 0 || i === 6 ? '#f59e0b80' : '#6366f1'),
+      borderRadius: 3,
+    }],
+  } : null
+
+  const depthData = stats ? {
+    labels: Object.keys(stats.depthBuckets),
+    datasets: [{
+      data: Object.values(stats.depthBuckets),
+      backgroundColor: ['#ef444460', '#f97316', '#f59e0b', '#10b981', '#06b6d4', '#6366f1', '#a855f7'],
+      borderRadius: 3,
+    }],
+  } : null
+
+  const velocityData = stats?.velocity?.length > 1 ? {
+    labels: stats.velocity.map(v => v.month.substring(2)),
+    datasets: [{
+      label: 'Avg msgs/session',
+      data: stats.velocity.map(v => v.avgMsgs),
+      borderColor: '#6366f1',
+      backgroundColor: '#6366f120',
+      borderWidth: 2,
+      tension: 0.3,
+      pointRadius: 2,
+      pointHoverRadius: 4,
+      fill: true,
+    }],
+  } : null
+
+  const tk = stats?.tokens
+  const totalInputAll = tk ? tk.input + tk.cacheRead + (tk.cacheWrite || 0) : 0
+  const cacheHitRate = totalInputAll > 0 ? ((tk.cacheRead / totalInputAll) * 100).toFixed(1) : 0
+  const outputInputRatio = totalInputAll > 0 ? (tk.output / totalInputAll).toFixed(3) : 0
+  const avgMsgsPerSession = tk && tk.sessions > 0 ? (depthData ? (Object.values(stats.depthBuckets).reduce((s, v, i) => {
+    const labels = Object.keys(stats.depthBuckets)
+    const midpoints = [1, 3.5, 8, 15.5, 35.5, 75.5, 150]
+    return s + v * midpoints[i]
+  }, 0) / tk.sessions).toFixed(1) : '—') : '—'
+
+
+  return (
+    <div className="fade-in space-y-3">
+      {/* Top bar */}
+      <PageHeader icon={LayoutDashboard} title="Dashboard">
+        <div className="ml-auto flex items-center gap-3">
+          <DateRangePicker value={dateRange} onChange={setDateRange} />
+          <button
+            onClick={() => setShareOpen(true)}
+            className="flex items-center gap-1.5 px-3 py-1 text-[12px] rounded-md transition hover:opacity-80"
+            style={{ background: '#6366f1', color: '#fff' }}
+          >
+            <Share2 size={12} />
+            Share Stats
+          </button>
+        </div>
+      </PageHeader>
+
+      {/* Editor breakdown - compact row */}
+      <div className="card p-3">
+        <div className="flex items-center flex-wrap gap-1.5">
+          {allEditors.map(e => {
+            const isSelected = selectedEditor === e.id
+            return (
+              <button
+                key={e.id}
+                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-[12px] cursor-pointer transition rounded-sm"
+                style={{
+                  border: isSelected ? `1.5px solid ${editorColor(e.id)}` : '1px solid var(--c-border)',
+                  background: isSelected ? editorColor(e.id) + '15' : 'transparent',
+                  opacity: selectedEditor && !isSelected ? 0.4 : 1,
+                  color: 'var(--c-text)',
+                }}
+                onClick={() => setSelectedEditor(isSelected ? null : e.id)}
+              >
+                <EditorIcon source={e.id} size={14} />
+                <span style={{ color: 'var(--c-text2)' }}>{editorLabel(e.id)}</span>
+                <span className="font-bold" style={{ color: 'var(--c-white)' }}>{e.count}</span>
+              </button>
+            )
+          })}
+        </div>
+        {selectedEditor && sel && (
+          <div className="mt-2 flex items-center gap-2">
+            <button onClick={() => navigate(`/sessions?editor=${selectedEditor}`)} className="flex items-center gap-1 text-[12px] px-2.5 py-1 transition" style={{ color: 'var(--c-accent)', border: '1px solid var(--c-border)' }}>
+              Show Sessions <ArrowRight size={11} />
+            </button>
+            <button onClick={() => setSelectedEditor(null)} className="flex items-center gap-1 text-[12px] px-2.5 py-1 transition" style={{ color: 'var(--c-text2)', border: '1px solid var(--c-border)' }}>
+              <X size={9} /> Clear
+            </button>
+          </div>
+        )}
+      </div>
+
+
+      {/* KPIs — compact single row */}
+      <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(90px, 1fr))' }}>
+        <KpiCard label="sessions" value={formatNumber(d.totalChats)} sub={sel ? editorLabel(sel.id) : `${allEditors.length} editors`} onClick={() => navigate(selectedEditor ? `/sessions?editor=${selectedEditor}` : '/sessions')} />
+        <KpiCard label="projects" value={d.topProjects.length} sub={`${daysSpan}d span`} onClick={() => navigate('/projects')} />
+        <KpiCard label="this month" value={thisMonth ? thisMonth.count : 0} sub={thisMonth ? thisMonth.month : ''} onClick={() => navigate('/sessions')} />
+        {stats && <>
+          <KpiCard label="avg depth" value={avgMsgsPerSession} sub={<span className="flex items-center gap-0.5"><MessageSquare size={8} /> msgs/session</span>} />
+          <KpiCard label="tool calls" value={formatNumber(stats.totalToolCalls)} sub={<span className="flex items-center gap-0.5"><Wrench size={8} /> total</span>} />
+        </>}
+        {tk && tk.input > 0 && <>
+          <KpiCard label="tokens in" value={formatNumber(tk.input)} sub="prompt" />
+          <KpiCard label="tokens out" value={formatNumber(tk.output)} sub={`${outputInputRatio}× ratio`} />
+          <KpiCard label="cache hit" value={`${cacheHitRate}%`} sub={formatNumber(tk.cacheRead)} />
+          <KpiCard label="you wrote" value={formatNumber(tk.userChars)} sub={`AI: ${formatNumber(tk.assistantChars)}`} />
+        </>}
+      </div>
+
+      {/* Token economy KPIs */}
+      {tk && tk.input > 0 && (
+        <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(90px, 1fr))' }}>
+          <KpiCard label="in tokens" value={formatNumber(tk.input)} sub="total prompt" />
+          <KpiCard label="out tokens" value={formatNumber(tk.output)} sub="total completion" />
+          <KpiCard label="cache read" value={formatNumber(tk.cacheRead)} sub={`${cacheHitRate}% hit rate`} />
+          <KpiCard label="cache write" value={formatNumber(tk.cacheWrite)} />
+          <KpiCard label="out/in ratio" value={`${outputInputRatio}×`} sub={<span className="flex items-center gap-0.5"><Zap size={8} /> efficiency</span>} />
+          <KpiCard label="you wrote" value={formatNumber(tk.userChars)} sub={`AI wrote ${formatNumber(tk.assistantChars)}`} />
+          <KpiCard label="est. cost" value={costs && costs.totalCost > 0 ? formatCost(costs.totalCost) : '—'} sub={costs && costs.byModel.length > 0 ? `${costs.byModel.length} model${costs.byModel.length !== 1 ? 's' : ''}` : undefined} />
+        </div>
+      )}
+
+      {/* Activity Heatmap | Col 1 | Col 2 | Col 3 */}
+      <div className="card p-3">
+        <SectionTitle>agentic coding activity</SectionTitle>
+        <div className="flex gap-4">
+          <div className="min-w-0 flex-shrink-0">
+            {dailyData ? <ActivityHeatmap dailyData={dailyData} /> : <div className="text-[11px]" style={{ color: 'var(--c-text3)' }}>loading...</div>}
+          </div>
+          {stats && dailyData && (() => {
+            const activeDays = dailyData.filter(d => d.total > 0)
+            const busiest = activeDays.length > 0 ? activeDays.reduce((a, b) => a.total > b.total ? a : b) : null
+            const totalSessions = activeDays.reduce((s, d) => s + d.total, 0)
+            const avgPerDay = activeDays.length > 0 ? (totalSessions / activeDays.length).toFixed(1) : 0
+            return (
+              <div className="flex-1 grid grid-cols-3 gap-3 text-[11px] min-w-0" style={{ borderLeft: '1px solid var(--c-border)', paddingLeft: 16 }}>
+                <div className="space-y-2 min-w-0">
+                  <div>
+                    <div style={{ color: 'var(--c-text3)' }} className="uppercase tracking-wider mb-1">streaks</div>
+                    <div className="flex items-center gap-1">
+                      <Flame size={10} className="text-orange-400 flex-shrink-0" />
+                      <span style={{ color: 'var(--c-white)' }} className="font-bold">{stats.streaks.current}d</span>
+                      <span style={{ color: 'var(--c-text3)' }}>now</span>
+                    </div>
+                    <div className="flex items-center gap-1 mt-0.5">
+                      <Zap size={10} className="text-yellow-400 flex-shrink-0" />
+                      <span style={{ color: 'var(--c-white)' }} className="font-bold">{stats.streaks.longest}d</span>
+                      <span style={{ color: 'var(--c-text3)' }}>best</span>
+                    </div>
+                  </div>
+                  <div>
+                    <div style={{ color: 'var(--c-text3)' }} className="uppercase tracking-wider mb-1">active days</div>
+                    <span style={{ color: 'var(--c-white)' }} className="font-bold">{stats.streaks.totalDays}</span>
+                    <span className="ml-1" style={{ color: 'var(--c-text3)' }}>{avgPerDay}/day</span>
+                  </div>
+                </div>
+                <div className="space-y-2 min-w-0">
+                  {busiest && (
+                    <div>
+                      <div style={{ color: 'var(--c-text3)' }} className="uppercase tracking-wider mb-1">busiest day</div>
+                      <div style={{ color: 'var(--c-white)' }} className="font-bold">{busiest.day}</div>
+                      <div style={{ color: 'var(--c-text3)' }}>{busiest.total} sessions</div>
+                    </div>
+                  )}
+                  <div>
+                    <div style={{ color: 'var(--c-text3)' }} className="uppercase tracking-wider mb-1">peak hour</div>
+                    <div style={{ color: 'var(--c-white)' }} className="font-bold">{String(stats.hourly.indexOf(Math.max(...stats.hourly))).padStart(2, '0')}:00</div>
+                    <div style={{ color: 'var(--c-text3)' }}>{Math.max(...stats.hourly)} sessions</div>
+                  </div>
+                </div>
+                <div className="min-w-0">
+                  <div style={{ color: 'var(--c-text3)' }} className="uppercase tracking-wider mb-1">top modes</div>
+                  <div className="space-y-1">
+                    {modes.slice(0, 5).map(([mode, count]) => (
+                      <div key={mode} className="flex items-center gap-1">
+                        <div className="w-1.5 h-1.5 rounded-full flex-shrink-0" style={{ background: MODE_COLORS[mode] || '#6b7280' }} />
+                        <span className="truncate" style={{ color: 'var(--c-text)' }}>{mode}</span>
+                        <span className="ml-auto font-bold flex-shrink-0" style={{ color: 'var(--c-white)' }}>{formatNumber(count)}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )
+          })()}
+        </div>
+      </div>
+
+      {/* Monthly trend (stacked bar by editor) */}
+      {monthlyTrendData && (
+        <div className="card p-3">
+          <SectionTitle>monthly trend <span style={{ color: 'var(--c-text3)' }}>(sessions by editor)</span></SectionTitle>
+          <div style={{ height: 200 }}>
+            <Bar data={monthlyTrendData} options={{
+              responsive: true, maintainAspectRatio: false,
+              scales: {
+                x: { stacked: true, grid: { display: false }, ticks: { color: txtDim, font: { size: 8, family: MONO }, maxRotation: 0 } },
+                y: { stacked: true, grid: { color: gridColor }, ticks: { color: txtDim, font: { size: 8, family: MONO } }, beginAtZero: true },
+              },
+              plugins: {
+                legend: { position: 'top', labels: { color: legendColor, font: { size: 9, family: MONO }, usePointStyle: true, pointStyle: 'circle', padding: 8 } },
+                tooltip: { mode: 'index', bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } },
+              },
+            }} />
+          </div>
+        </div>
+      )}
+
+      {/* Behavior row: hourly, weekday, depth */}
+      {stats && (
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-2">
+          {/* Peak hours */}
+          <div className="card p-3">
+            <SectionTitle>peak hours <span style={{ color: 'var(--c-text3)' }}>(when you code with AI)</span></SectionTitle>
+            <div style={{ height: 160 }}>
+              {hourlyData && <Bar data={hourlyData} options={{
+                responsive: true, maintainAspectRatio: false,
+                scales: {
+                  x: { grid: { display: false }, ticks: { color: txtDim, font: { size: 7, family: MONO }, maxRotation: 0, callback: (v, i) => i % 3 === 0 ? `${String(i).padStart(2, '0')}` : '' } },
+                  y: { grid: { color: gridColor }, ticks: { color: txtDim, font: { size: 8, family: MONO } }, beginAtZero: true },
+                },
+                plugins: noLegend,
+              }} />}
+            </div>
+          </div>
+
+          {/* Weekday pattern */}
+          <div className="card p-3">
+            <SectionTitle>weekday pattern <span style={{ color: 'var(--c-text3)' }}>(weekends highlighted)</span></SectionTitle>
+            <div style={{ height: 160 }}>
+              {weekdayData && <Bar data={weekdayData} options={{
+                responsive: true, maintainAspectRatio: false,
+                scales: barScales,
+                plugins: noLegend,
+              }} />}
+            </div>
+          </div>
+
+          {/* Session depth */}
+          <div className="card p-3">
+            <SectionTitle>session depth <span style={{ color: 'var(--c-text3)' }}>(messages per session)</span></SectionTitle>
+            <div style={{ height: 160 }}>
+              {depthData && <Bar data={depthData} options={{
+                responsive: true, maintainAspectRatio: false,
+                scales: barScales,
+                plugins: noLegend,
+              }} />}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Velocity + Editors/Modes + Projects */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-2">
+        {/* Conversation velocity trend */}
+        {velocityData ? (
+          <div className="card p-3">
+            <SectionTitle>conversation velocity <span style={{ color: 'var(--c-text3)' }}>(avg msgs/session)</span></SectionTitle>
+            <div style={{ height: 180 }}>
+              <Line data={velocityData} options={{
+                responsive: true, maintainAspectRatio: false,
+                scales: {
+                  x: { grid: { display: false }, ticks: { color: txtDim, font: { size: 8, family: MONO }, maxRotation: 0 } },
+                  y: { grid: { color: gridColor }, ticks: { color: txtDim, font: { size: 8, family: MONO } }, beginAtZero: true },
+                },
+                plugins: noLegend,
+              }} />
+            </div>
+          </div>
+        ) : (
+          <div className="card p-3">
+            <SectionTitle>editors</SectionTitle>
+            <div style={{ height: 180 }}>
+              <Doughnut data={editorChartData} options={{ ...chartOpts, cutout: '65%' }} />
+            </div>
+          </div>
+        )}
+
+        {/* Modes */}
+        <div className="card p-3">
+          <SectionTitle>modes</SectionTitle>
+          <div style={{ height: 180 }}>
+            <Doughnut data={modeChartData} options={{ ...chartOpts, cutout: '60%' }} />
+          </div>
+        </div>
+
+        {/* Top projects */}
+        <div className="card p-3">
+          <SectionTitle>top projects</SectionTitle>
+          <div className="space-y-1 max-h-[180px] overflow-y-auto scrollbar-thin">
+            {d.topProjects.slice(0, 12).map(p => (
+              <div key={p.name} className="flex items-center gap-1.5">
+                <div className="text-[10px] w-6 text-right" style={{ color: 'var(--c-text2)' }}>{p.count}</div>
+                <div className="flex-1 h-3 rounded-sm overflow-hidden" style={{ background: 'var(--c-code-bg)' }}>
+                  <div className="h-full bg-accent/30 rounded-sm" style={{ width: `${(p.count / maxProject * 100).toFixed(1)}%` }} />
+                </div>
+                <div className="text-[10px] truncate max-w-[140px]" style={{ color: 'var(--c-text2)' }} title={p.fullPath}>{p.name}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom row: Top models + Top tools + Large context */}
+      <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 {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" 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>
+                )
+              })}
+            </div>
+          </div>
+        )}
+
+        {stats && stats.topTools.length > 0 && (
+          <div className="card p-3">
+            <SectionTitle>top tools <span style={{ color: 'var(--c-text3)' }}>({formatNumber(stats.totalToolCalls)} total)</span></SectionTitle>
+            <div className="space-y-1">
+              {stats.topTools.map((t, i) => {
+                const maxT = stats.topTools[0].count
+                return (
+                  <div key={t.name} className="flex items-center gap-2">
+                    <span className="text-[10px] w-3 text-right" style={{ color: 'var(--c-text3)' }}>{i + 1}</span>
+                    <div className="flex-1 h-4 rounded-sm overflow-hidden" style={{ background: 'var(--c-code-bg)' }}>
+                      <div className="h-full rounded-sm flex items-center px-1.5" style={{ width: `${(t.count / maxT * 100).toFixed(1)}%`, background: i === 0 ? '#10b981' : i === 1 ? '#34d399' : '#6ee7b740' }}>
+                        <span className="text-[8px] truncate font-mono" style={{ color: i < 2 ? '#fff' : 'var(--c-text2)' }}>{t.name}</span>
+                      </div>
+                    </div>
+                    <span className="text-[10px] w-8 text-right" style={{ color: 'var(--c-text3)' }}>{formatNumber(t.count)}</span>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        )}
+
+        {largeContextChats && largeContextChats.length > 0 && (
+          <div className="card p-3">
+            <SectionTitle>
+              <span className="inline-flex items-center gap-1">
+                <AlertTriangle size={10} className="text-amber-400" />
+                large context
+                <span style={{ color: 'var(--c-text3)' }}>({largeContextChats.length})</span>
+              </span>
+            </SectionTitle>
+            <div className="space-y-1">
+              {largeContextChats.slice(0, 10).map(c => (
+                <div
+                  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={() => 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>
+                  <span
+                    className="text-[10px] font-bold flex-shrink-0"
+                    style={{ color: c.bubbleCount >= 500 ? '#ef4444' : '#f59e0b' }}
+                  >
+                    {c.bubbleCount}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+      <ChatSidebar chatId={selectedChatId} onClose={() => setSelectedChatId(null)} />
+      <ShareModal open={shareOpen} onClose={() => setShareOpen(false)} />
+    </div>
+  )
+}