memhouse 0.0.1 → 0.3.0

package/ui/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "node ../index.js --ui-dev & vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.1",
+    "chart.js": "^4.5.1",
+    "lucide-react": "^0.577.0",
+    "react": "^19.2.0",
+    "react-chartjs-2": "^5.3.1",
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^7.13.1",
+    "remark-gfm": "^4.0.1",
+    "tailwindcss": "^4.2.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "vite": "^8.0.0-beta.13"
+  },
+  "overrides": {
+    "vite": "^8.0.0-beta.13"
+  }
+}

package/ui/src/App.jsx

@@ -0,0 +1,364 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { Routes, Route, NavLink, useLocation } from 'react-router-dom'
+import { Activity, BarChart3, GitCompare, MessageSquare, FolderOpen, DollarSign, CreditCard, Sun, Moon, RefreshCw, AlertTriangle, Github, Terminal, Database, Users, Plug, Copy, Check, Settings as SettingsIcon, Package, ChevronDown, Target } from 'lucide-react'
+import { fetchOverview, refetchAgents, fetchMode, getAuthToken, setOnAuthFailure } from './lib/api'
+import { useTheme } from './lib/theme'
+import { useLive } from './hooks/useLive'
+import AnimatedLogo from './components/AnimatedLogo'
+import AnimatedLoader from './components/AnimatedLoader'
+import LoginScreen from './components/LoginScreen'
+import Dashboard from './pages/Dashboard'
+import Sessions from './pages/Sessions'
+import DeepAnalysis from './pages/DeepAnalysis'
+import Compare from './pages/Compare'
+import Projects from './pages/Projects'
+import ProjectDetail from './pages/ProjectDetail'
+import CostAnalysis from './pages/CostAnalysis'
+import SqlViewer from './pages/SqlViewer'
+import Artifacts from './pages/Artifacts'
+import Settings from './pages/Settings'
+import Subscriptions from './pages/Subscriptions'
+import MCPs from './pages/MCPs'
+import RelayDashboard from './pages/RelayDashboard'
+import RelayUserDetail from './pages/RelayUserDetail'
+import GSD from './pages/GSD'
+
+function NavDropdown({ icon: Icon, label, items }) {
+  const [open, setOpen] = useState(false)
+  const location = useLocation()
+  const isActive = items.some(i => i.to === location.pathname)
+  const timeout = useRef(null)
+
+  const enter = () => { clearTimeout(timeout.current); setOpen(true) }
+  const leave = () => { timeout.current = setTimeout(() => setOpen(false), 150) }
+
+  return (
+    <div className="relative" onMouseEnter={enter} onMouseLeave={leave}>
+      <button
+        className={`flex items-center gap-1.5 px-2.5 py-1 text-[12px] rounded transition ${
+          isActive ? 'bg-[var(--c-card)] text-[var(--c-white)]' : 'text-[var(--c-text2)] hover:text-[var(--c-white)]'
+        }`}
+      >
+        <Icon size={12} />
+        {label}
+        <ChevronDown size={10} style={{ opacity: 0.5 }} />
+      </button>
+      {open && (
+        <div
+          className="absolute top-full left-0 mt-1 py-1 rounded shadow-lg min-w-[160px] z-[100]"
+          style={{ background: 'var(--c-bg)', border: '1px solid var(--c-border)' }}
+        >
+          {items.map(({ to, icon: SubIcon, label: subLabel }) => (
+            <NavLink
+              key={to}
+              to={to}
+              onClick={() => setOpen(false)}
+              className={({ isActive: a }) =>
+                `flex items-center gap-2 px-3 py-1.5 text-[12px] transition ${
+                  a ? 'bg-[var(--c-bg3)] text-[var(--c-white)]' : 'text-[var(--c-text2)] hover:text-[var(--c-white)] hover:bg-[var(--c-bg3)]'
+                }`
+              }
+            >
+              <SubIcon size={12} />
+              {subLabel}
+            </NavLink>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function App() {
+  const [overview, setOverview] = useState(null)
+  const [refetchState, setRefetchState] = useState(null) // null | { scanned, total }
+  const { live, toggle: toggleLive } = useLive()
+  const [mode, setMode] = useState(null) // 'local' | 'relay'
+  const [needsAuth, setNeedsAuth] = useState(false)
+  const [authed, setAuthed] = useState(!!getAuthToken())
+  const liveRef = useRef(null)
+  const { dark, toggle } = useTheme()
+  const [mcpOpen, setMcpOpen] = useState(false)
+  const [mcpCopied, setMcpCopied] = useState(false)
+
+  useEffect(() => {
+    setOnAuthFailure(() => setAuthed(false))
+  }, [])
+
+  useEffect(() => {
+    fetchMode().then(data => {
+      setMode(data.mode || 'local')
+      setNeedsAuth(!!data.auth)
+    })
+  }, [])
+
+  const refreshOverview = useCallback(() => {
+    fetchOverview().then(setOverview).catch(() => {})
+  }, [])
+
+  useEffect(() => {
+    if (mode === 'local') refreshOverview()
+  }, [mode])
+
+  const rescanAndRefresh = useCallback(async (onProgress) => {
+    await refetchAgents(onProgress)
+    const data = await fetchOverview()
+    setOverview(data)
+  }, [])
+
+  // Live mode: rescan & refresh every 60s. `mode` must be a dependency: it
+  // starts as null (detection is async), so without it a persisted live=true
+  // never starts the interval once mode resolves to 'local'.
+  useEffect(() => {
+    if (live && mode === 'local') {
+      liveRef.current = setInterval(() => {
+        rescanAndRefresh().catch(() => {})
+      }, 60000)
+    } else {
+      if (liveRef.current) clearInterval(liveRef.current)
+      liveRef.current = null
+    }
+    return () => { if (liveRef.current) clearInterval(liveRef.current) }
+  }, [live, mode, rescanAndRefresh])
+
+  const handleRefetch = async () => {
+    setRefetchState({ scanned: 0, total: 0 })
+    try {
+      await rescanAndRefresh((p) => setRefetchState({ scanned: p.scanned, total: p.total }))
+    } catch (e) { console.error(e) }
+    setRefetchState(null)
+  }
+
+  const isRelay = mode === 'relay'
+  const showLogin = isRelay && needsAuth && !authed
+
+  const location = useLocation()
+  const isFullWidth = location.pathname === '/artifacts'
+
+  const nav = isRelay ? [
+    { to: '/', icon: Users, label: 'Team' },
+  ] : [
+    { to: '/', icon: Activity, label: 'Dashboard' },
+    { to: '/sessions', icon: MessageSquare, label: 'Sessions' },
+    { to: '/projects', icon: FolderOpen, label: 'Projects' },
+    { icon: DollarSign, label: 'Costs', children: [
+      { to: '/costs', icon: DollarSign, label: 'Cost Analysis' },
+      { to: '/subscriptions', icon: CreditCard, label: 'Subscriptions' },
+    ]},
+    { icon: BarChart3, label: 'Insights', children: [
+      { to: '/analysis', icon: BarChart3, label: 'Deep Analysis' },
+      { to: '/compare', icon: GitCompare, label: 'Compare' },
+    ]},
+    { to: '/artifacts', icon: Package, label: 'Artifacts' },
+    { to: '/gsd', icon: Target, label: 'GSD' },
+    { to: '/mcps', icon: Plug, label: 'MCPs' },
+    { to: '/sql', icon: Database, label: 'SQL' },
+  ]
+
+  if (showLogin) {
+    return <LoginScreen onSuccess={() => setAuthed(true)} />
+  }
+
+  return (
+    <div className="min-h-screen">
+      <header className="border-b px-4 py-1.5 flex items-center gap-3 sticky top-0 z-50 backdrop-blur-xl" style={{ borderColor: 'var(--c-border)', background: 'var(--c-header)' }}>
+        <span className="flex items-center gap-1.5 text-xs font-bold tracking-tight" style={{ color: 'var(--c-white)' }}>
+          <AnimatedLogo size={18} />
+          Agentlytics{isRelay && <span className="ml-1.5 text-[10px] font-medium px-1.5 py-0.5" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>relay</span>}
+        </span>
+        <nav className="flex gap-0.5 ml-2">
+          {nav.map((item) => item.children ? (
+            <NavDropdown key={item.label} icon={item.icon} label={item.label} items={item.children} />
+          ) : (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              end={item.to === '/'}
+              className={({ isActive }) =>
+                `flex items-center gap-1.5 px-2.5 py-1 text-[12px] rounded transition ${
+                  isActive ? 'bg-[var(--c-card)] text-[var(--c-white)]' : 'text-[var(--c-text2)] hover:text-[var(--c-white)]'
+                }`
+              }
+            >
+              <item.icon size={12} />
+              {item.label}
+            </NavLink>
+          ))}
+        </nav>
+        <div className="ml-auto flex items-center gap-3">
+          {!isRelay && (
+            <>
+              <button
+                onClick={toggleLive}
+                className="flex items-center gap-1.5 px-2 py-0.5 text-[11px] transition"
+                style={{
+                  color: live ? '#22c55e' : 'var(--c-text3)',
+                  border: live ? '1px solid rgba(34,197,94,0.3)' : '1px solid var(--c-border)',
+                  background: live ? 'rgba(34,197,94,0.08)' : 'transparent',
+                }}
+                title={live ? 'Disable live refresh' : 'Enable live refresh (every 60s)'}
+              >
+                <span
+                  className={`inline-block w-1.5 h-1.5 rounded-full ${live ? 'pulse-dot' : ''}`}
+                  style={{ background: live ? '#22c55e' : 'var(--c-text3)' }}
+                />
+                Live
+              </button>
+              <button
+                onClick={handleRefetch}
+                disabled={!!refetchState}
+                className="flex items-center gap-1 px-2 py-0.5 text-[11px] rounded transition hover:bg-[var(--c-card)]"
+                style={{ color: 'var(--c-text2)', border: '1px solid var(--c-border)' }}
+                title="Clear cache and rescan all editors"
+              >
+                <RefreshCw size={10} className={refetchState ? 'animate-spin' : ''} />
+                {refetchState
+                  ? `Refetching (${refetchState.scanned}/${refetchState.total})...`
+                  : 'Refetch'}
+              </button>
+              <span className="text-[11px]" style={{ color: 'var(--c-text2)' }}>
+                {overview ? `${overview.totalChats} sessions` : '...'}
+              </span>
+            </>
+          )}
+          {isRelay && (
+            <button
+              onClick={() => { setMcpOpen(true); setMcpCopied(false) }}
+              className="flex items-center gap-1.5 px-2 py-0.5 text-[11px] transition hover:bg-[var(--c-card)]"
+              style={{ color: '#818cf8', border: '1px solid var(--c-border)' }}
+              title="MCP Connection"
+            >
+              <Plug size={10} />
+              Connect
+            </button>
+          )}
+          <NavLink
+            to="/settings"
+            className="p-1 rounded transition hover:bg-[var(--c-card)]"
+            style={({ isActive }) => ({ color: isActive ? '#6366f1' : 'var(--c-text2)' })}
+            title="Settings"
+          >
+            <SettingsIcon size={13} />
+          </NavLink>
+          <button
+            onClick={toggle}
+            className="p-1 rounded transition hover:bg-[var(--c-card)]"
+            style={{ color: 'var(--c-text2)' }}
+            title={dark ? 'Light mode' : 'Dark mode'}
+          >
+            {dark ? <Sun size={13} /> : <Moon size={13} />}
+          </button>
+        </div>
+      </header>
+
+      {refetchState && (
+        <div className="flex items-center gap-2 px-4 py-1.5 text-[12px]" style={{ background: 'rgba(234,179,8,0.08)', borderBottom: '1px solid rgba(234,179,8,0.15)', color: '#ca8a04' }}>
+          <AlertTriangle size={12} />
+          <span>Devin, Devin Next, and Antigravity require their app to be running during refetch — otherwise their sessions won't be detected.</span>
+        </div>
+      )}
+
+      <main className={isRelay ? 'px-0' : isFullWidth ? 'p-0 overflow-hidden' : 'p-4 max-w-[1400px] mx-auto'}>
+        {mode === null ? (
+          <AnimatedLoader label="Loading..." />
+        ) : isRelay ? (
+          <Routes>
+            <Route path="/" element={<RelayDashboard />} />
+            <Route path="/relay" element={<RelayDashboard />} />
+            <Route path="/relay/user/:username" element={<RelayUserDetail />} />
+          </Routes>
+        ) : (
+          <Routes>
+            <Route path="/" element={<Dashboard overview={overview} />} />
+            <Route path="/projects" element={<Projects overview={overview} />} />
+            <Route path="/projects/detail" element={<ProjectDetail />} />
+            <Route path="/sessions" element={<Sessions overview={overview} />} />
+            {/* ChatDetail is now a sidebar in Sessions */}
+            <Route path="/costs" element={<CostAnalysis overview={overview} />} />
+            <Route path="/analysis" element={<DeepAnalysis overview={overview} />} />
+            <Route path="/compare" element={<Compare overview={overview} />} />
+            <Route path="/subscriptions" element={<Subscriptions />} />
+            <Route path="/artifacts" element={<Artifacts />} />
+            <Route path="/mcps" element={<MCPs />} />
+            <Route path="/sql" element={<SqlViewer />} />
+            <Route path="/gsd" element={<GSD />} />
+            <Route path="/settings" element={<Settings />} />
+          </Routes>
+        )}
+      </main>
+
+      <footer className={`border-t mt-8 px-4 py-3 flex items-center justify-between text-[11px]${isFullWidth ? ' hidden' : ''}`} style={{ borderColor: 'var(--c-border)', color: 'var(--c-text3)' }}>
+        <div className="flex items-center gap-3">
+          <a href="https://github.com/f/agentlytics" target="_blank" rel="noopener noreferrer" className="flex items-center gap-1 hover:text-[var(--c-text)] transition">
+            <Github size={11} />
+            <span>GitHub</span>
+          </a>
+          <span className="flex items-center gap-1">
+            <Terminal size={11} />
+            <code style={{ fontFamily: 'JetBrains Mono, monospace' }}>npx agentlytics</code>
+          </span>
+        </div>
+        <span>
+          built by <a href="https://github.com/f" target="_blank" rel="noopener noreferrer" className="hover:text-[var(--c-text)] transition" style={{ color: 'var(--c-text2)' }}>fkadev</a>
+        </span>
+      </footer>
+
+      {/* MCP Config Modal */}
+      {mcpOpen && (
+        <>
+          <div className="fixed inset-0 z-[60]" style={{ background: 'rgba(0,0,0,0.5)' }} onClick={() => setMcpOpen(false)} />
+          <div
+            className="fixed z-[70] w-[440px] max-w-[90vw] p-5 rounded shadow-2xl"
+            style={{ top: '50%', left: '50%', transform: 'translate(-50%, -50%)', background: 'var(--c-bg)', border: '1px solid var(--c-border)' }}
+          >
+            <div className="flex items-center justify-between mb-4">
+              <div className="text-[13px] font-bold" style={{ color: 'var(--c-white)' }}>
+                <Plug size={13} className="inline mr-1.5" style={{ color: '#818cf8' }} />
+                Connection Config
+              </div>
+              <button onClick={() => setMcpOpen(false)} className="text-[18px] leading-none px-1 hover:opacity-70 transition" style={{ color: 'var(--c-text3)' }}>&times;</button>
+            </div>
+
+            <div className="text-[12px] font-medium mb-1.5" style={{ color: 'var(--c-white)' }}>MCP Config</div>
+            <div className="flex items-center justify-between mb-1">
+              <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>Add to your AI client's MCP settings</div>
+              <button
+                onClick={() => {
+                  // Password-protected relays gate /mcp with the same bearer token the
+                  // dashboard got at login — include it or the copied config 401s.
+                  const relayToken = localStorage.getItem('agentlytics_relay_token')
+                  const server = { url: `${window.location.origin}/mcp` }
+                  if (relayToken) server.headers = { Authorization: `Bearer ${relayToken}` }
+                  const json = JSON.stringify({ "mcpServers": { "agentlytics": server } }, null, 2)
+                  navigator.clipboard.writeText(json)
+                  setMcpCopied(true)
+                  setTimeout(() => setMcpCopied(false), 2000)
+                }}
+                className="flex items-center gap-1 px-1.5 py-0.5 text-[10px] transition hover:bg-[var(--c-bg3)]"
+                style={{ border: '1px solid var(--c-border)', color: mcpCopied ? '#22c55e' : 'var(--c-text2)' }}
+              >
+                {mcpCopied ? <><Check size={9} /> Copied</> : <><Copy size={9} /> Copy</>}
+              </button>
+            </div>
+            <pre
+              className="text-[11px] px-3 py-2 overflow-x-auto mb-4"
+              style={{ background: 'var(--c-bg3)', border: '1px solid var(--c-border)', color: 'var(--c-text)', fontFamily: 'JetBrains Mono, monospace', lineHeight: 1.6 }}
+            >{localStorage.getItem('agentlytics_relay_token')
+              ? `{\n  "mcpServers": {\n    "agentlytics": {\n      "url": "${window.location.origin}/mcp",\n      "headers": { "Authorization": "Bearer ${localStorage.getItem('agentlytics_relay_token')}" }\n    }\n  }\n}`
+              : `{\n  "mcpServers": {\n    "agentlytics": {\n      "url": "${window.location.origin}/mcp"\n    }\n  }\n}`}</pre>
+
+            <div className="text-[12px] font-medium mb-1.5" style={{ color: 'var(--c-white)' }}>Team Sharing</div>
+            <div className="text-[10px] mb-1" style={{ color: 'var(--c-text3)' }}>
+              Relay join is not supported in memhouse — team sharing is kernel-based
+              (members + grants + row-level security). See mem-house/delivery/kernel-install.md.
+            </div>
+            <pre
+              className="text-[11px] px-3 py-2 overflow-x-auto"
+              style={{ background: 'var(--c-bg3)', border: '1px solid var(--c-border)', color: 'var(--c-text)', fontFamily: 'JetBrains Mono, monospace', lineHeight: 1.6 }}
+            >{`# each member ships with their own credential:\nMEMHOUSE_URL=<realm-url> MEMHOUSE_USER=<member> MEMHOUSE_PASSWORD=<credential> \\\n  memhouse ship --loop`}</pre>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

package/ui/src/components/ActivityHeatmap.jsx

@@ -0,0 +1,206 @@
+import { useState, useMemo, useRef } from 'react'
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Legend } from 'chart.js'
+import { Line } from 'react-chartjs-2'
+import { editorColor, editorLabel } from '../lib/constants'
+import { useTheme } from '../lib/theme'
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Legend)
+
+const CELL_SIZE = 11
+const CELL_GAP = 2
+const WEEK_COLS = 53
+const DAY_LABELS = ['', 'Mon', '', 'Wed', '', 'Fri', '']
+
+function getIntensity(count, maxCount) {
+  if (count === 0) return 0
+  if (maxCount <= 0) return 1
+  const ratio = count / maxCount
+  if (ratio > 0.75) return 4
+  if (ratio > 0.5) return 3
+  if (ratio > 0.25) return 2
+  return 1
+}
+
+const INTENSITY_COLORS_DARK = ['rgba(255,255,255,0.03)', '#0e4429', '#006d32', '#26a641', '#39d353']
+const INTENSITY_COLORS_LIGHT = ['rgba(0,0,0,0.04)', '#9be9a8', '#40c463', '#30a14e', '#216e39']
+
+export default function ActivityHeatmap({ dailyData }) {
+  const { dark } = useTheme()
+  const [selectedDay, setSelectedDay] = useState(null)
+  const containerRef = useRef(null)
+
+  // Build a full year grid (53 weeks × 7 days)
+  const grid = useMemo(() => {
+    if (!dailyData || dailyData.length === 0) return { weeks: [], months: [], maxCount: 0 }
+
+    const dayMap = {}
+    let maxCount = 0
+    for (const d of dailyData) {
+      dayMap[d.day] = d
+      if (d.total > maxCount) maxCount = d.total
+    }
+
+    // End on Saturday of the current week, start WEEK_COLS-1 weeks before
+    const today = new Date()
+    today.setHours(0, 0, 0, 0)
+    const start = new Date(today)
+    start.setDate(start.getDate() - start.getDay() - (WEEK_COLS - 1) * 7)
+
+    const weeks = []
+    const months = []
+    let lastMonth = -1
+    const cursor = new Date(start)
+
+    for (let w = 0; w < WEEK_COLS; w++) {
+      const week = []
+      for (let d = 0; d < 7; d++) {
+        const key = `${cursor.getFullYear()}-${String(cursor.getMonth() + 1).padStart(2, '0')}-${String(cursor.getDate()).padStart(2, '0')}`
+        const data = dayMap[key] || null
+        const count = data ? data.total : 0
+        const isFuture = cursor > today
+
+        if (cursor.getMonth() !== lastMonth) {
+          lastMonth = cursor.getMonth()
+          months.push({ week: w, label: cursor.toLocaleString('default', { month: 'short' }) })
+        }
+
+        week.push({ key, count, data, isFuture, day: d })
+        cursor.setDate(cursor.getDate() + 1)
+      }
+      weeks.push(week)
+    }
+
+    return { weeks, months, maxCount }
+  }, [dailyData])
+
+  // Hourly drill-down for selected day
+  const hourlyChart = useMemo(() => {
+    if (!selectedDay?.data) return null
+    const hours = selectedDay.data.hours || {}
+    const editors = Object.keys(hours)
+    const labels = Array.from({ length: 24 }, (_, i) => `${String(i).padStart(2, '0')}:00`)
+
+    return {
+      labels,
+      datasets: editors.map(eid => ({
+        label: editorLabel(eid),
+        data: hours[eid],
+        borderColor: editorColor(eid),
+        backgroundColor: editorColor(eid) + '20',
+        borderWidth: 1.5,
+        tension: 0.3,
+        pointRadius: 1,
+        pointHoverRadius: 3,
+        fill: true,
+      })),
+    }
+  }, [selectedDay])
+
+  if (!grid.weeks.length) return null
+
+  const COLORS = dark ? INTENSITY_COLORS_DARK : INTENSITY_COLORS_LIGHT
+  const txtDim = dark ? '#555' : '#999'
+  const gridColor = dark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.06)'
+  const legendColor = dark ? '#888' : '#555'
+  const svgWidth = WEEK_COLS * (CELL_SIZE + CELL_GAP) + 28
+  const svgHeight = 7 * (CELL_SIZE + CELL_GAP) + 20
+
+  return (
+    <div>
+      <div className="overflow-x-auto scrollbar-thin" ref={containerRef}>
+        <svg width={svgWidth} height={svgHeight} className="block">
+          {/* Month labels */}
+          {grid.months.map((m, i) => (
+            <text key={i} x={28 + m.week * (CELL_SIZE + CELL_GAP)} y={8} fill="var(--c-text3)" fontSize={8}>{m.label}</text>
+          ))}
+          {DAY_LABELS.map((label, i) => (
+            <text key={i} x={0} y={14 + i * (CELL_SIZE + CELL_GAP) + CELL_SIZE - 2} fill="var(--c-text3)" fontSize={8}>{label}</text>
+          ))}
+          {/* Cells */}
+          {grid.weeks.map((week, w) =>
+            week.map((cell, d) => {
+              if (cell.isFuture) return null
+              const intensity = getIntensity(cell.count, grid.maxCount)
+              const isSelected = selectedDay?.key === cell.key
+              return (
+                <rect
+                  key={cell.key}
+                  x={28 + w * (CELL_SIZE + CELL_GAP)}
+                  y={12 + d * (CELL_SIZE + CELL_GAP)}
+                  width={CELL_SIZE}
+                  height={CELL_SIZE}
+                  rx={0}
+                  fill={COLORS[intensity]}
+                  stroke={isSelected ? '#818cf8' : 'transparent'}
+                  strokeWidth={isSelected ? 2 : 0}
+                  className="cursor-pointer transition-all"
+                  onClick={() => setSelectedDay(cell.count > 0 ? cell : null)}
+                >
+                  <title>{`${cell.key}: ${cell.count} session${cell.count !== 1 ? 's' : ''}`}</title>
+                </rect>
+              )
+            })
+          )}
+        </svg>
+      </div>
+
+      <div className="flex items-center gap-1.5 mt-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
+        <span>less</span>
+        {COLORS.map((color, i) => (
+          <span key={i} className="inline-block w-[9px] h-[9px] rounded-sm" style={{ background: color }} />
+        ))}
+        <span>more</span>
+      </div>
+
+      {/* Drill-down: hourly activity for selected day */}
+      {selectedDay && selectedDay.data && (
+        <div className="mt-2 card p-3 fade-in">
+          <div className="flex items-center justify-between mb-2">
+            <div>
+              <span className="text-xs font-medium" style={{ color: 'var(--c-white)' }}>{selectedDay.key}</span>
+              <span className="text-[11px] ml-2" style={{ color: 'var(--c-text2)' }}>
+                {selectedDay.count} session{selectedDay.count !== 1 ? 's' : ''}
+                {' · '}
+                {Object.entries(selectedDay.data.editors || {}).map(([e, c]) => `${editorLabel(e)}: ${c}`).join(', ')}
+              </span>
+            </div>
+            <button onClick={() => setSelectedDay(null)} className="text-[11px] transition" style={{ color: 'var(--c-text2)' }}>close</button>
+          </div>
+          {hourlyChart && (
+            <div style={{ height: 140 }}>
+              <Line
+                data={hourlyChart}
+                options={{
+                  responsive: true,
+                  maintainAspectRatio: false,
+                  interaction: { mode: 'index', intersect: false },
+                  scales: {
+                    x: {
+                      grid: { color: gridColor },
+                      ticks: { color: txtDim, font: { size: 9, family: 'JetBrains Mono, monospace' }, maxRotation: 0 },
+                    },
+                    y: {
+                      beginAtZero: true,
+                      grid: { color: gridColor },
+                      ticks: { color: txtDim, stepSize: 1, font: { size: 9, family: 'JetBrains Mono, monospace' } },
+                    },
+                  },
+                  plugins: {
+                    legend: {
+                      position: 'top',
+                      labels: { color: legendColor, font: { size: 9, family: 'JetBrains Mono, monospace' }, usePointStyle: true, pointStyle: 'circle', padding: 8 },
+                    },
+                    tooltip: {
+                      bodyFont: { family: 'JetBrains Mono, monospace', size: 10 },
+                      titleFont: { family: 'JetBrains Mono, monospace', size: 10 },
+                    },
+                  },
+                }}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}