memhouse 0.0.1 → 0.3.1

package/ui/src/pages/DeepAnalysis.jsx

@@ -0,0 +1,495 @@
+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, Zap, MessageSquare, Wrench, Cpu, TrendingUp } from 'lucide-react'
+import { fetchDeepAnalytics, fetchToolCalls, fetchCosts } from '../lib/api'
+import { editorLabel, editorColor, formatNumber, formatCost, 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 PageHeader from '../components/PageHeader'
+
+ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement)
+
+const MODEL_COLORS = ['#6366f1', '#a78bfa', '#818cf8', '#c084fc', '#e879f9', '#f472b6', '#fb7185', '#f87171', '#fbbf24', '#34d399']
+const TOOL_COLORS = ['#10b981', '#34d399', '#6ee7b7', '#a7f3d0', '#d1fae5', '#ecfdf5', '#b8f0d8', '#7ce0b8', '#4ade80', '#22c55e']
+const MONO = 'JetBrains Mono, monospace'
+
+// Categorize tools into groups
+const TOOL_CATEGORIES = {
+  'File Operations': ['read_file', 'write_to_file', 'edit', 'multi_edit', 'Read', 'Write', 'EditFile', 'edit_file', 'create_file', 'read_notebook', 'edit_notebook'],
+  'Search': ['grep_search', 'find_by_name', 'code_search', 'search', 'list_dir', 'Grep', 'Find', 'SearchFiles', 'ListDir'],
+  'Terminal': ['run_command', 'command_status', 'RunCommand', 'execute_command', 'Bash', 'bash'],
+  'Browser': ['browser_preview', 'read_url_content', 'view_content_chunk'],
+  'AI Tools': ['mcp0_', 'mcp1_', 'mcp5_', 'mcp6_', 'skill', 'trajectory_search'],
+}
+
+function categorizeTools(tools) {
+  const cats = {}
+  for (const t of tools) {
+    let found = false
+    for (const [cat, patterns] of Object.entries(TOOL_CATEGORIES)) {
+      if (patterns.some(p => t.name.startsWith(p) || t.name === p || t.name.toLowerCase().includes(p.toLowerCase()))) {
+        if (!cats[cat]) cats[cat] = { tools: [], total: 0 }
+        cats[cat].tools.push(t)
+        cats[cat].total += t.count
+        found = true
+        break
+      }
+    }
+    if (!found) {
+      if (!cats['Other']) cats['Other'] = { tools: [], total: 0 }
+      cats['Other'].tools.push(t)
+      cats['Other'].total += t.count
+    }
+  }
+  return Object.entries(cats).sort((a, b) => b[1].total - a[1].total)
+}
+
+// Summarize args for display
+function summarizeArgs(toolName, args) {
+  if (!args || typeof args !== 'object') return null
+  if (args.CommandLine || args.command) return args.CommandLine || args.command
+  if (args.file_path) return args.file_path
+  if (args.TargetFile) return args.TargetFile
+  if (args.SearchPath || args.search_path) return `${args.Query || args.query || ''} in ${args.SearchPath || args.search_path || ''}`
+  if (args.Pattern) return `${args.Pattern} in ${args.SearchDirectory || ''}`
+  if (args.Url || args.url) return args.Url || args.url
+  if (args.query) return args.query
+  const vals = Object.values(args).filter(v => typeof v === 'string' && v.length > 0)
+  return vals.length > 0 ? vals[0].substring(0, 120) : null
+}
+
+function getDiff(args) {
+  if (!args || typeof args !== 'object') return null
+  const old = args.old_string || args.old_text || args.oldText || args.search || null
+  const nw = args.new_string || args.new_text || args.newText || args.replace || null
+  const file = args.file_path || args.TargetFile || args.filePath || args.path || null
+  if (old != null || nw != null) return { old, new: nw, file }
+  return null
+}
+
+function DiffBlock({ diff }) {
+  const maxLines = 8
+  const oldLines = (diff.old || '').split('\n').slice(0, maxLines)
+  const newLines = (diff.new || '').split('\n').slice(0, maxLines)
+  return (
+    <div className="mt-1 text-[10px] font-mono overflow-x-auto" style={{ border: '1px solid var(--c-border)' }}>
+      {diff.file && (
+        <div className="px-2 py-0.5" style={{ background: 'var(--c-code-bg)', color: 'var(--c-text2)' }}>{diff.file}</div>
+      )}
+      {diff.old && oldLines.map((line, i) => (
+        <div key={'o' + i} className="px-2" style={{ background: 'rgba(248,113,113,0.07)', color: '#f87171' }}>
+          <span style={{ color: 'var(--c-text3)', userSelect: 'none' }}>- </span>{line}
+        </div>
+      ))}
+      {diff.old && oldLines.length < (diff.old || '').split('\n').length && (
+        <div className="px-2" style={{ color: 'var(--c-text3)' }}>  ... {(diff.old || '').split('\n').length - maxLines} more lines</div>
+      )}
+      {diff.new && newLines.map((line, i) => (
+        <div key={'n' + i} className="px-2" style={{ background: 'rgba(52,211,153,0.07)', color: '#34d399' }}>
+          <span style={{ color: 'var(--c-text3)', userSelect: 'none' }}>+ </span>{line}
+        </div>
+      ))}
+      {diff.new && newLines.length < (diff.new || '').split('\n').length && (
+        <div className="px-2" style={{ color: 'var(--c-text3)' }}>  ... {(diff.new || '').split('\n').length - maxLines} more lines</div>
+      )}
+    </div>
+  )
+}
+
+function ToolCallRow({ call, toolName, index }) {
+  const [expanded, setExpanded] = useState(false)
+  const summary = summarizeArgs(toolName, call.args)
+  const diff = getDiff(call.args)
+  const project = call.folder ? call.folder.split('/').pop() : null
+  const hasDetail = diff || (call.args && Object.keys(call.args).length > 0)
+
+  return (
+    <div className="px-2 py-1 text-[11px]" style={{ background: index % 2 === 0 ? 'var(--c-code-bg)' : 'transparent' }}>
+      <div className="flex items-start gap-2 cursor-pointer" onClick={() => hasDetail && setExpanded(!expanded)}>
+        <EditorIcon source={call.source} size={10} />
+        <div className="flex-1 min-w-0">
+          {summary && (
+            <div className="font-mono truncate" style={{ color: 'var(--c-white)' }} title={summary}>{summary}</div>
+          )}
+          <div className="flex items-center gap-2" style={{ color: 'var(--c-text3)' }}>
+            <span>{editorLabel(call.source)}</span>
+            {project && <span>· {project}</span>}
+            {call.timestamp && <span>· {new Date(call.timestamp).toLocaleDateString()}</span>}
+            {hasDetail && <span>{expanded ? '▾' : '▸'}</span>}
+          </div>
+        </div>
+      </div>
+      {expanded && diff && <DiffBlock diff={diff} />}
+      {expanded && !diff && call.args && Object.keys(call.args).length > 0 && (
+        <pre className="mt-1 px-2 py-1 text-[10px] overflow-x-auto whitespace-pre-wrap break-all" style={{ background: 'var(--c-code-bg)', color: 'var(--c-text2)' }}>
+          {JSON.stringify(call.args, null, 2)}
+        </pre>
+      )}
+    </div>
+  )
+}
+
+function ToolDrillDown({ toolName, folder, editor, dateRange, onClose }) {
+  const [calls, setCalls] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const projectName = folder ? folder.split('/').pop() : null
+
+  useEffect(() => {
+    setLoading(true)
+    // Same filters as the charts this drill-down was opened from — otherwise the
+    // call list can show other editors/dates than the clicked segment counted.
+    fetchToolCalls(toolName, {
+      folder: folder || undefined,
+      editor: editor || undefined,
+      ...dateRangeToApiParams(dateRange),
+    }).then(data => { setCalls(data); setLoading(false) })
+  }, [toolName, folder, editor, dateRange])
+
+  return (
+    <div className="card p-3 fade-in" style={{ borderColor: 'rgba(99,102,241,0.3)' }}>
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-2">
+          <Wrench size={12} style={{ color: 'var(--c-accent)' }} />
+          <span className="text-xs font-bold" style={{ color: 'var(--c-white)' }}>{toolName}</span>
+          <span className="text-[11px]" style={{ color: 'var(--c-text2)' }}>
+            {calls ? `${calls.length} calls` : '...'}
+            {calls && projectName ? ` in ${projectName}` : ''}
+          </span>
+        </div>
+        <button onClick={onClose} className="p-0.5" style={{ color: 'var(--c-text2)' }}><X size={12} /></button>
+      </div>
+      {loading ? (
+        <div className="text-[11px] py-4 text-center" style={{ color: 'var(--c-text3)' }}>loading...</div>
+      ) : calls && calls.length > 0 ? (
+        <div className="max-h-[500px] overflow-y-auto scrollbar-thin space-y-0.5">
+          {calls.map((c, i) => (
+            <ToolCallRow key={i} call={c} toolName={toolName} index={i} />
+          ))}
+        </div>
+      ) : (
+        <div className="text-[11px] py-4 text-center" style={{ color: 'var(--c-text3)' }}>no calls found</div>
+      )}
+    </div>
+  )
+}
+
+// Proportional bar component
+function ProportionBar({ segments, height = 6 }) {
+  const total = segments.reduce((s, seg) => s + seg.value, 0)
+  if (total === 0) return null
+  return (
+    <div className="flex w-full rounded-full overflow-hidden" style={{ height }}>
+      {segments.filter(s => s.value > 0).map((seg, i) => (
+        <div
+          key={i}
+          title={`${seg.label}: ${formatNumber(seg.value)}`}
+          className="h-full transition-all"
+          style={{ width: `${(seg.value / total * 100).toFixed(1)}%`, background: seg.color }}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default function DeepAnalysis({ overview }) {
+  const [editor, setEditor] = useState('')
+  const [folder, setFolder] = useState('')
+  const [dateRange, setDateRange] = useState(null)
+  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'
+  const txtDim = dark ? '#555' : '#999'
+  const gridColor = dark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.06)'
+  const legendColor = dark ? '#9ca3af' : '#555'
+
+  const editors = overview?.editors || []
+  const projects = overview?.topProjects || []
+
+  async function analyze() {
+    setLoading(true)
+    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)
+  }
+
+  useEffect(() => { analyze() }, [editor, folder, dateRange])
+
+  const tools = data?.topTools?.slice(0, 15) || []
+  const models = data?.topModels?.slice(0, 10) || []
+
+  // Computed insights
+  const insights = useMemo(() => {
+    if (!data) return null
+    const totalTok = data.totalInputTokens + data.totalOutputTokens + data.totalCacheRead + data.totalCacheWrite
+    const msgsPerSession = data.analyzedChats > 0 ? (data.totalMessages / data.analyzedChats).toFixed(1) : 0
+    const toolsPerSession = data.analyzedChats > 0 ? (data.totalToolCalls / data.analyzedChats).toFixed(1) : 0
+    const tokPerMsg = data.totalMessages > 0 ? Math.round(totalTok / data.totalMessages) : 0
+    const totalInputAll = data.totalInputTokens + data.totalCacheRead + data.totalCacheWrite
+    const cacheHitRate = totalInputAll > 0 ? ((data.totalCacheRead / totalInputAll) * 100).toFixed(1) : 0
+    const outputRatio = totalInputAll > 0 ? (data.totalOutputTokens / totalInputAll).toFixed(3) : 0
+    const aiVsHuman = data.totalUserChars > 0 ? (data.totalAssistantChars / data.totalUserChars).toFixed(1) : 0
+    return { totalTok, msgsPerSession, toolsPerSession, tokPerMsg, cacheHitRate, outputRatio, aiVsHuman }
+  }, [data])
+
+  const toolCategories = useMemo(() => tools.length > 0 ? categorizeTools(tools) : [], [tools])
+
+  function handleToolClick(evt, elements) {
+    if (elements.length > 0) {
+      const idx = elements[0].index
+      const toolName = tools[idx]?.name
+      if (toolName) setSelectedTool(toolName)
+    }
+  }
+
+  return (
+    <div className="fade-in space-y-3">
+      {/* Filters */}
+      <PageHeader icon={TrendingUp} title="Deep Analysis">
+        <select
+          value={editor}
+          onChange={e => setEditor(e.target.value)}
+          className="px-2 py-1 text-[12px] outline-none"
+          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>
+        <select
+          value={folder}
+          onChange={e => setFolder(e.target.value)}
+          className="px-2 py-1 text-[12px] outline-none max-w-[200px] truncate"
+          style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
+        >
+          <option value="">All Projects</option>
+          {projects.map(p => (
+            <option key={p.fullPath || p.name} value={p.fullPath}>{p.name}</option>
+          ))}
+        </select>
+        {loading && <Loader2 size={11} className="animate-spin" style={{ color: 'var(--c-text3)' }} />}
+        {data && <span className="text-[11px]" style={{ color: 'var(--c-text2)' }}>{data.analyzedChats} sessions analyzed</span>}
+        <div className="ml-auto"><DateRangePicker value={dateRange} onChange={setDateRange} /></div>
+      </PageHeader>
+
+      {data && insights && (
+        <>
+          {/* KPIs */}
+          <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(90px, 1fr))' }}>
+            <KpiCard label="sessions" value={data.analyzedChats} />
+            <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}\u00d7 more`} />
+            <KpiCard label="est. cost" value={costs && costs.totalCost > 0 ? formatCost(costs.totalCost) : '\u2014'} />
+          </div>
+
+          {/* Token flow + Insights row */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+            {/* Token flow visualization */}
+            <div className="card p-3">
+              <SectionTitle>token flow</SectionTitle>
+              <div className="space-y-3 mt-2">
+                {/* Input tokens breakdown */}
+                <div>
+                  <div className="flex items-center justify-between text-[11px] mb-1">
+                    <span style={{ color: 'var(--c-text2)' }}>input tokens</span>
+                    <span className="font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(data.totalInputTokens + data.totalCacheRead + data.totalCacheWrite)}</span>
+                  </div>
+                  <ProportionBar segments={[
+                    { label: 'Fresh input', value: data.totalInputTokens, color: '#6366f1' },
+                    { label: 'Cache write', value: data.totalCacheWrite, color: '#fbbf24' },
+                    { label: 'Cache read', value: data.totalCacheRead, color: '#34d399' },
+                  ]} />
+                  <div className="flex items-center gap-3 mt-1 text-[10px]">
+                    <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#6366f1' }} /> fresh {formatNumber(data.totalInputTokens)}</span>
+                    <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#fbbf24' }} /> cache write {formatNumber(data.totalCacheWrite)}</span>
+                    <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#34d399' }} /> cache read {formatNumber(data.totalCacheRead)}</span>
+                  </div>
+                </div>
+                {/* Output tokens */}
+                <div>
+                  <div className="flex items-center justify-between text-[11px] mb-1">
+                    <span style={{ color: 'var(--c-text2)' }}>output tokens</span>
+                    <span className="font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(data.totalOutputTokens)}</span>
+                  </div>
+                  <ProportionBar segments={[
+                    { label: 'Output', value: data.totalOutputTokens, color: '#a78bfa' },
+                  ]} />
+                </div>
+                {/* Cache write */}
+                {data.totalCacheWrite > 0 && (
+                  <div>
+                    <div className="flex items-center justify-between text-[11px] mb-1">
+                      <span style={{ color: 'var(--c-text2)' }}>cache write</span>
+                      <span className="font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(data.totalCacheWrite)}</span>
+                    </div>
+                    <ProportionBar segments={[
+                      { label: 'Cache write', value: data.totalCacheWrite, color: '#fbbf24' },
+                    ]} />
+                  </div>
+                )}
+                {/* Overall ratio bar */}
+                <div className="pt-2" style={{ borderTop: '1px solid var(--c-border)' }}>
+                  <div className="text-[10px] mb-1" style={{ color: 'var(--c-text3)' }}>overall token distribution</div>
+                  <ProportionBar height={10} segments={[
+                    { label: 'Input', value: data.totalInputTokens, color: '#6366f1' },
+                    { label: 'Output', value: data.totalOutputTokens, color: '#a78bfa' },
+                    { label: 'Cache Read', value: data.totalCacheRead, color: '#34d399' },
+                    { label: 'Cache Write', value: data.totalCacheWrite, color: '#fbbf24' },
+                  ]} />
+                  <div className="flex items-center gap-3 mt-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
+                    <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#6366f1' }} /> in</span>
+                    <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#a78bfa' }} /> out</span>
+                    <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#34d399' }} /> cache read</span>
+                    <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#fbbf24' }} /> cache write</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Efficiency insights */}
+            <div className="card p-3">
+              <SectionTitle>efficiency insights</SectionTitle>
+              <div className="space-y-3 mt-2">
+                {/* Human vs AI chars */}
+                <div>
+                  <div className="text-[11px] mb-1" style={{ color: 'var(--c-text2)' }}>you vs AI (characters)</div>
+                  <ProportionBar height={8} segments={[
+                    { label: 'You', value: data.totalUserChars, color: '#6366f1' },
+                    { label: 'AI', value: data.totalAssistantChars, color: '#34d399' },
+                  ]} />
+                  <div className="flex items-center justify-between mt-1 text-[10px]">
+                    <span style={{ color: '#6366f1' }}>You: {formatNumber(data.totalUserChars)}</span>
+                    <span style={{ color: '#34d399' }}>AI: {formatNumber(data.totalAssistantChars)}</span>
+                  </div>
+                </div>
+
+                {/* Metric cards */}
+                <div className="grid grid-cols-2 gap-2">
+                  <div className="p-2 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
+                    <div className="flex items-center gap-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
+                      <TrendingUp size={9} /> output/input ratio
+                    </div>
+                    <div className="text-sm font-bold mt-0.5" style={{ color: 'var(--c-white)' }}>{insights.outputRatio}×</div>
+                  </div>
+                  <div className="p-2 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
+                    <div className="flex items-center gap-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
+                      <Zap size={9} /> cache hit rate
+                    </div>
+                    <div className="text-sm font-bold mt-0.5" style={{ color: parseFloat(insights.cacheHitRate) > 50 ? '#34d399' : parseFloat(insights.cacheHitRate) > 20 ? '#fbbf24' : 'var(--c-white)' }}>{insights.cacheHitRate}%</div>
+                  </div>
+                  <div className="p-2 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
+                    <div className="flex items-center gap-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
+                      <MessageSquare size={9} /> tokens per message
+                    </div>
+                    <div className="text-sm font-bold mt-0.5" style={{ color: 'var(--c-white)' }}>{formatNumber(insights.tokPerMsg)}</div>
+                  </div>
+                  <div className="p-2 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
+                    <div className="flex items-center gap-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
+                      <Wrench size={9} /> tools per session
+                    </div>
+                    <div className="text-sm font-bold mt-0.5" style={{ color: 'var(--c-white)' }}>{insights.toolsPerSession}</div>
+                  </div>
+                </div>
+
+                {/* AI amplification */}
+                <div className="p-2 rounded-sm text-center" style={{ background: 'var(--c-code-bg)' }}>
+                  <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>AI amplification factor</div>
+                  <div className="text-lg font-bold" style={{ color: 'var(--c-accent)' }}>{insights.aiVsHuman}×</div>
+                  <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>AI writes {insights.aiVsHuman}× more than you type</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Charts row: Tools + Models + Tool Categories */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
+            {/* Tools bar */}
+            <div className="card p-3 lg:col-span-2">
+              <SectionTitle>most used tools <span style={{ color: 'var(--c-text3)' }}>(click to drill down)</span></SectionTitle>
+              <div style={{ height: Math.max(tools.length * 20 + 10, 120) }}>
+                {tools.length > 0 ? (
+                  <Bar
+                    ref={chartRef}
+                    data={{
+                      labels: tools.map(t => t.name),
+                      datasets: [{ data: tools.map(t => t.count), backgroundColor: TOOL_COLORS.concat(MODEL_COLORS).slice(0, tools.length), borderRadius: 2 }],
+                    }}
+                    options={{
+                      indexAxis: 'y',
+                      responsive: true,
+                      maintainAspectRatio: false,
+                      onClick: handleToolClick,
+                      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 } } },
+                      },
+                      plugins: { legend: { display: false }, tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } } },
+                    }}
+                  />
+                ) : <div className="text-[11px] text-center py-8" style={{ color: 'var(--c-text3)' }}>no tool calls found</div>}
+              </div>
+            </div>
+
+            {/* Models doughnut */}
+            <div className="card p-3">
+              <SectionTitle>models</SectionTitle>
+              <div style={{ height: 160 }}>
+                {models.length > 0 ? (
+                  <Doughnut
+                    data={{
+                      labels: models.map(m => m.name),
+                      datasets: [{ data: models.map(m => m.count), backgroundColor: MODEL_COLORS, borderWidth: 0 }],
+                    }}
+                    options={{
+                      responsive: true, maintainAspectRatio: false, cutout: '60%',
+                      plugins: {
+                        legend: { position: 'right', labels: { color: legendColor, font: { size: 8, family: MONO }, usePointStyle: true, pointStyle: 'circle', padding: 6 } },
+                        tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } },
+                      },
+                    }}
+                  />
+                ) : <div className="text-[11px] text-center py-8" style={{ color: 'var(--c-text3)' }}>no model data</div>}
+              </div>
+
+              {/* Tool categories below models */}
+              {toolCategories.length > 0 && (
+                <div className="mt-3 pt-3" style={{ borderTop: '1px solid var(--c-border)' }}>
+                  <div className="text-[10px] uppercase tracking-wider mb-2" style={{ color: 'var(--c-text3)' }}>tool categories</div>
+                  <div className="space-y-1.5">
+                    {toolCategories.map(([cat, { tools: catTools, total }]) => (
+                      <div key={cat} className="flex items-center gap-2 text-[11px]">
+                        <span className="truncate flex-1" style={{ color: 'var(--c-text2)' }}>{cat}</span>
+                        <span className="font-bold" style={{ color: 'var(--c-white)' }}>{total}</span>
+                        <span style={{ color: 'var(--c-text3)' }}>({catTools.length})</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Tool drill-down */}
+          {selectedTool && (
+            <ToolDrillDown toolName={selectedTool} folder={folder} editor={editor} dateRange={dateRange} onClose={() => setSelectedTool(null)} />
+          )}
+        </>
+      )}
+    </div>
+  )
+}