memhouse 0.0.1 → 0.3.0

package/ui/src/pages/ProjectDetail.jsx

@@ -0,0 +1,325 @@
+import { useState, useEffect, useMemo } from 'react'
+import { useSearchParams, useNavigate } from 'react-router-dom'
+import { ArrowLeft, Search, FolderOpen, Calendar, MessageSquare, Wrench, Cpu, Zap, AlertTriangle, ShieldCheck } from 'lucide-react'
+import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement } from 'chart.js'
+import { Doughnut, Bar } from 'react-chartjs-2'
+import { fetchProjects, fetchChats, fetchCosts } from '../lib/api'
+import { editorColor, editorLabel, formatNumber, formatDate, formatCost } from '../lib/constants'
+import { useTheme } from '../lib/theme'
+import KpiCard from '../components/KpiCard'
+import EditorIcon from '../components/EditorIcon'
+import SectionTitle from '../components/SectionTitle'
+import ChatSidebar from '../components/ChatSidebar'
+import AnimatedLoader from '../components/AnimatedLoader'
+import AiAuditCard from '../components/AiAuditCard'
+
+ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement)
+
+const MONO = 'JetBrains Mono, monospace'
+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']
+
+export default function ProjectDetail() {
+  const [searchParams] = useSearchParams()
+  const navigate = useNavigate()
+  const folder = searchParams.get('folder')
+  const { dark } = useTheme()
+  const txtColor = dark ? '#888' : '#555'
+  const txtDim = dark ? '#555' : '#999'
+  const gridColor = dark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.06)'
+
+  const [project, setProject] = useState(null)
+  const [chats, setChats] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [chatSearch, setChatSearch] = useState('')
+  const [selectedChatId, setSelectedChatId] = useState(null)
+  const [costs, setCosts] = useState(null)
+  const [enabledEditors, setEnabledEditors] = useState(null)
+
+  useEffect(() => {
+    if (!folder) return
+    setLoading(true)
+    Promise.all([
+      fetchProjects(),
+      fetchChats({ folder, limit: 1000 }),
+      fetchCosts({ folder }),
+    ]).then(([projects, chatData, costData]) => {
+      const match = projects.find(p => p.folder === folder)
+      setProject(match || null)
+      setChats(chatData.chats || [])
+      setCosts(costData)
+      if (match) setEnabledEditors(new Set(Object.keys(match.editors)))
+      setLoading(false)
+    })
+  }, [folder])
+
+  const editorFilteredChats = useMemo(() => {
+    if (!enabledEditors) return chats
+    return chats.filter(c => enabledEditors.has(c.source))
+  }, [chats, enabledEditors])
+
+  const filteredChats = useMemo(() => {
+    if (!chatSearch) return editorFilteredChats
+    const q = chatSearch.toLowerCase()
+    return editorFilteredChats.filter(c =>
+      (c.name && c.name.toLowerCase().includes(q)) ||
+      (c.topModel && c.topModel.toLowerCase().includes(q)) ||
+      (c.source && c.source.toLowerCase().includes(q))
+    )
+  }, [editorFilteredChats, chatSearch])
+
+  const toggleEditor = (editorId) => {
+    setEnabledEditors(prev => {
+      const next = new Set(prev)
+      if (next.has(editorId)) next.delete(editorId)
+      else next.add(editorId)
+      return next
+    })
+  }
+
+  if (!folder) return <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text3)' }}>no project specified</div>
+  if (loading) return <AnimatedLoader label="Loading project..." />
+  if (!project) return <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text3)' }}>project not found</div>
+
+  const editorEntries = Object.entries(project.editors).sort((a, b) => b[1] - a[1])
+  const allEnabled = !enabledEditors || enabledEditors.size === editorEntries.length
+
+  // Derive stats from editor-filtered chats
+  const fSessionCount = editorFilteredChats.length
+  const fEditorCounts = {}
+  const fModelCounts = {}
+  for (const c of editorFilteredChats) {
+    fEditorCounts[c.source] = (fEditorCounts[c.source] || 0) + 1
+    if (c.topModel) fModelCounts[c.topModel] = (fModelCounts[c.topModel] || 0) + 1
+  }
+  const fTopModels = Object.entries(fModelCounts).sort((a, b) => b[1] - a[1]).slice(0, 10)
+  const fMaxEditorCount = Math.max(...Object.values(fEditorCounts), 1)
+
+  // Use project-level stats when all editors enabled, otherwise show filtered session count
+  const totalTok = project.totalInputTokens + project.totalOutputTokens
+  const outputRatio = project.totalInputTokens > 0 ? (project.totalOutputTokens / project.totalInputTokens).toFixed(1) : '0'
+  const displaySessions = allEnabled ? project.totalSessions : fSessionCount
+  const avgMsgs = allEnabled && project.totalSessions > 0 ? (project.totalMessages / project.totalSessions).toFixed(1) : 0
+
+  return (
+    <div className="fade-in space-y-3">
+      {/* Header card */}
+      <div className="card p-4">
+        <div className="flex items-start gap-3">
+          <button
+            onClick={() => navigate('/projects')}
+            className="flex items-center gap-1 text-[12px] transition mt-0.5 flex-shrink-0"
+            style={{ color: 'var(--c-text3)' }}
+          >
+            <ArrowLeft size={12} />
+          </button>
+          <FolderOpen size={18} className="flex-shrink-0 mt-0.5" style={{ color: 'var(--c-accent)' }} />
+          <div className="flex-1 min-w-0">
+            <h1 className="text-sm font-bold truncate" style={{ color: 'var(--c-white)' }}>{project.name}</h1>
+            <div className="text-[11px] truncate" style={{ color: 'var(--c-text3)' }}>{project.folder}</div>
+          </div>
+          <div className="flex items-center gap-1.5 flex-shrink-0">
+            {editorEntries.map(([e]) => (
+              <EditorIcon key={e} source={e} size={14} />
+            ))}
+          </div>
+        </div>
+        <div className="flex items-center gap-4 mt-3 pt-3 text-[11px]" style={{ borderTop: '1px solid var(--c-border)' }}>
+          <div className="flex items-center gap-1" style={{ color: 'var(--c-text3)' }}>
+            <Calendar size={9} />
+            <span>{formatDate(project.firstSeen)}</span>
+            <span>→</span>
+            <span>{formatDate(project.lastSeen)}</span>
+          </div>
+          <div className="flex items-center gap-1.5 ml-auto">
+            {editorEntries.map(([e, c]) => (
+              <span key={e} className="inline-flex items-center gap-0.5">
+                <span className="w-1.5 h-1.5 rounded-full" 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>
+      </div>
+
+      {/* KPIs */}
+      <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(90px, 1fr))' }}>
+        <KpiCard label="sessions" value={displaySessions} sub={!allEnabled ? 'filtered' : ''} />
+        <KpiCard label="messages" value={formatNumber(project.totalMessages)} sub={`${avgMsgs} avg/session`} />
+        <KpiCard label="tool calls" value={formatNumber(project.totalToolCalls)} sub={<span className="flex items-center gap-0.5"><Wrench size={8} /> invocations</span>} />
+        <KpiCard label="tokens" value={formatNumber(totalTok)} sub={`${outputRatio}\u00d7 out/in`} />
+        {project.totalCacheRead > 0 && (
+          <KpiCard label="cache read" value={formatNumber(project.totalCacheRead)} sub={`write: ${formatNumber(project.totalCacheWrite)}`} />
+        )}
+        <KpiCard label="you wrote" value={formatNumber(project.totalUserChars)} sub={`AI: ${formatNumber(project.totalAssistantChars)}`} />
+        <KpiCard label="est. cost" value={costs && costs.totalCost > 0 ? formatCost(costs.totalCost) : '\u2014'} sub={costs && costs.byModel.length > 0 ? `${costs.byModel.length} model${costs.byModel.length !== 1 ? 's' : ''}` : undefined} />
+      </div>
+
+      {/* Charts row */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
+        {/* Editors bar with checkboxes */}
+        <div className="card p-3">
+          <SectionTitle>editors</SectionTitle>
+          <div className="space-y-1.5 mt-1">
+            {editorEntries.map(([e, c]) => {
+              const checked = enabledEditors ? enabledEditors.has(e) : true
+              const count = fEditorCounts[e] || 0
+              return (
+                <div key={e} className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    checked={checked}
+                    onChange={() => toggleEditor(e)}
+                    className="accent-[var(--c-accent)] w-3 h-3 flex-shrink-0 cursor-pointer"
+                  />
+                  <EditorIcon source={e} size={11} />
+                  <span className="text-[11px] truncate flex-1 cursor-pointer select-none" onClick={() => toggleEditor(e)} style={{ color: checked ? 'var(--c-text2)' : 'var(--c-text3)', opacity: checked ? 1 : 0.4 }}>{editorLabel(e)}</span>
+                  <div className="w-16 h-3 rounded-sm overflow-hidden" style={{ background: 'var(--c-code-bg)' }}>
+                    <div className="h-full rounded-sm transition-all" style={{ width: `${(count / fMaxEditorCount * 100).toFixed(0)}%`, background: checked ? editorColor(e) : 'var(--c-text3)', opacity: checked ? 1 : 0.2 }} />
+                  </div>
+                  <span className="text-[11px] w-6 text-right font-bold" style={{ color: checked ? 'var(--c-white)' : 'var(--c-text3)', opacity: checked ? 1 : 0.4 }}>{count}</span>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+
+        {/* Models doughnut */}
+        <div className="card p-3">
+          <SectionTitle>models</SectionTitle>
+          {fTopModels.length > 0 ? (
+            <div style={{ height: 160 }}>
+              <Doughnut
+                data={{
+                  labels: fTopModels.map(m => m[0]),
+                  datasets: [{ data: fTopModels.map(m => m[1]), backgroundColor: MODEL_COLORS, borderWidth: 0 }],
+                }}
+                options={{
+                  responsive: true, maintainAspectRatio: false, cutout: '60%',
+                  plugins: {
+                    legend: { position: 'right', labels: { color: txtColor, font: { size: 8, family: MONO }, usePointStyle: true, pointStyle: 'circle', padding: 6 } },
+                    tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } },
+                  },
+                }}
+              />
+            </div>
+          ) : <div className="text-[11px] py-8 text-center" style={{ color: 'var(--c-text3)' }}>no model data</div>}
+        </div>
+
+        {/* Top tools horizontal bar */}
+        <div className="card p-3">
+          <SectionTitle>top tools <span style={{ color: 'var(--c-text3)' }}>({formatNumber(project.totalToolCalls)})</span></SectionTitle>
+          {project.topTools.length > 0 ? (
+            <div style={{ height: 160 }}>
+              <Bar
+                data={{
+                  labels: project.topTools.map(t => t.name),
+                  datasets: [{
+                    data: project.topTools.map(t => t.count),
+                    backgroundColor: TOOL_COLORS.slice(0, project.topTools.length),
+                    borderRadius: 2,
+                  }],
+                }}
+                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 } } },
+                  },
+                  plugins: { legend: { display: false }, tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } } },
+                }}
+              />
+            </div>
+          ) : <div className="text-[11px] py-8 text-center" style={{ color: 'var(--c-text3)' }}>no tool data</div>}
+        </div>
+      </div>
+
+      {/* AI Readiness Audit */}
+      {console.log('Rendering AiAuditCard, folder:', folder)}
+      <AiAuditCard folder={folder} />
+
+      {/* Sessions */}
+      <div>
+        <div className="flex items-center gap-3 mb-2">
+          <SectionTitle>sessions <span style={{ color: 'var(--c-text3)' }}>({filteredChats.length}{!allEnabled ? ` of ${chats.length}` : ''})</span></SectionTitle>
+          <div className="relative max-w-xs flex-1">
+            <Search size={11} className="absolute left-2.5 top-1/2 -translate-y-1/2" style={{ color: 'var(--c-text3)' }} />
+            <input
+              type="text"
+              placeholder="filter sessions..."
+              value={chatSearch}
+              onChange={e => setChatSearch(e.target.value)}
+              className="w-full pl-7 pr-3 py-1 text-[12px] outline-none rounded-sm"
+              style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
+            />
+          </div>
+        </div>
+
+        <div className="card overflow-hidden">
+          <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">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-right py-2 px-3 font-medium">est. cost</th>
+                <th className="text-left py-2 px-3 font-medium">updated</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredChats.map(c => (
+                <tr
+                  key={c.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(c.id)}
+                >
+                  <td className="py-2 px-3">
+                    <span className="inline-flex items-center gap-1.5">
+                      <EditorIcon source={c.source} size={12} />
+                      <span style={{ color: 'var(--c-text2)' }}>{editorLabel(c.source)}</span>
+                    </span>
+                  </td>
+                  <td className="py-2 px-3 font-medium truncate max-w-[280px]" style={{ color: 'var(--c-white)' }}>
+                    {c.name || <span style={{ color: 'var(--c-text3)' }}>Untitled</span>}
+                    {c.encrypted && <span className="ml-1.5 text-[10px] text-yellow-500/60">locked</span>}
+                  </td>
+                  <td className="py-2 px-3" style={{ color: 'var(--c-text2)' }}>{c.mode || ''}</td>
+                  <td className="py-2 px-3 font-mono truncate max-w-[150px]" style={{ color: 'var(--c-text2)' }} title={c.topModel || ''}>{c.topModel || ''}</td>
+                  <td className="py-2 px-3">
+                    {c.bubbleCount >= 500 ? (
+                      <span className="inline-flex items-center gap-0.5 font-bold" style={{ color: '#ef4444' }}>
+                        <AlertTriangle size={9} />{c.bubbleCount} msgs
+                      </span>
+                    ) : c.bubbleCount >= 100 ? (
+                      <span className="inline-flex items-center gap-0.5 font-bold" style={{ color: '#f59e0b' }}>
+                        <AlertTriangle size={9} />{c.bubbleCount} msgs
+                      </span>
+                    ) : (
+                      <span style={{ color: 'var(--c-text3)' }}>{c.bubbleCount || 0} msgs</span>
+                    )}
+                  </td>
+                  <td className="py-2 px-3 font-mono text-right" style={{ color: c.cost > 0 ? 'var(--c-text2)' : 'var(--c-text3)' }}>
+                    {c.cost > 0 ? formatCost(c.cost) : ''}
+                  </td>
+                  <td className="py-2 px-3 whitespace-nowrap" style={{ color: 'var(--c-text3)' }}>{formatDate(c.lastUpdatedAt || c.createdAt)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          {filteredChats.length === 0 && (
+            <div className="text-center py-8 text-sm" style={{ color: 'var(--c-text3)' }}>no sessions found</div>
+          )}
+        </div>
+      </div>
+
+      {/* Chat sidebar */}
+      <ChatSidebar chatId={selectedChatId} onClose={() => setSelectedChatId(null)} />
+    </div>
+  )
+}

package/ui/src/pages/Projects.jsx

@@ -0,0 +1,249 @@
+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, MessageSquare, Wrench, Cpu, FolderOpen, Calendar } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+import { fetchProjects, fetchCosts } 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 DateRangePicker from '../components/DateRangePicker'
+import SectionTitle from '../components/SectionTitle'
+import AnimatedLoader from '../components/AnimatedLoader'
+import PageHeader from '../components/PageHeader'
+
+ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement)
+
+const MONO = 'JetBrains Mono, monospace'
+const MODEL_COLORS = ['#6366f1', '#a78bfa', '#818cf8', '#c084fc', '#e879f9', '#f472b6', '#fb7185', '#f87171', '#fbbf24', '#34d399']
+
+export default function Projects({ overview }) {
+  const { dark } = useTheme()
+  const txtColor = dark ? '#888' : '#555'
+  const txtDim = dark ? '#555' : '#999'
+  const gridColor = dark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.06)'
+  const [projects, setProjects] = useState(null)
+  const [search, setSearch] = useState('')
+  const [editorFilter, setEditorFilter] = useState('')
+  const [dateRange, setDateRange] = useState(null)
+  const [costs, setCosts] = useState(null)
+  const navigate = useNavigate()
+  const editors = overview?.editors || []
+
+  useEffect(() => {
+    const dateParams = dateRangeToApiParams(dateRange)
+    Promise.all([
+      fetchProjects(dateParams),
+      fetchCosts(dateParams),
+    ]).then(([p, c]) => { setProjects(p); setCosts(c) })
+  }, [dateRange])
+
+  if (!projects) return <AnimatedLoader label="Loading projects..." />
+
+  const filtered = projects.filter(p => {
+    if (editorFilter && !p.editors[editorFilter]) return false
+    if (search && !p.folder.toLowerCase().includes(search.toLowerCase()) && !p.name.toLowerCase().includes(search.toLowerCase())) return false
+    return true
+  })
+
+  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 maxSessions = Math.max(...projects.map(p => p.totalSessions), 1)
+
+  // 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, 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-3">
+      <PageHeader icon={FolderOpen} title="Projects" />
+
+      {/* KPIs */}
+      <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(90px, 1fr))' }}>
+        <KpiCard label="projects" value={projects.length} />
+        <KpiCard label="sessions" value={formatNumber(totalSessions)} onClick={() => navigate('/sessions')} />
+        <KpiCard label="messages" value={formatNumber(totalMessages)} />
+        <KpiCard label="tokens" value={formatNumber(totalTokens)} />
+        <KpiCard label="est. cost" value={costs && costs.totalCost > 0 ? formatCost(costs.totalCost) : '\u2014'} />
+      </div>
+
+      {/* 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={{
+                  labels: topGlobalModels.map(m => m[0]),
+                  datasets: [{ data: topGlobalModels.map(m => m[1]), backgroundColor: MODEL_COLORS, 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 className="text-xs text-center py-12" style={{ color: 'var(--c-text3)' }}>no model data</div>}
+          </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-[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>
+        <div className="relative flex-1 max-w-sm">
+          <Search size={12} className="absolute left-2.5 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-7 pr-3 py-1 text-[12px] outline-none"
+            style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
+          />
+        </div>
+        <div className="ml-auto"><DateRangePicker value={dateRange} onChange={setDateRange} /></div>
+      </div>
+
+      {/* 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 p-3 cursor-pointer transition hover:opacity-90 flex flex-col gap-2.5"
+              onClick={() => navigate(`/projects/detail?folder=${encodeURIComponent(p.folder)}`)}
+            >
+              {/* 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-[10px] 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]) => (
+                    <EditorIcon key={e} source={e} size={12} />
+                  ))}
+                </div>
+              </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-[11px]">
+                <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-[10px]" 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>
+          )
+        })}
+      </div>
+
+      {filtered.length === 0 && <div className="text-center py-12 text-sm" style={{ color: 'var(--c-text3)' }}>no projects found</div>}
+    </div>
+  )
+}