agentlytics 0.2.3 → 0.2.5

package/server.js

@@ -431,6 +431,294 @@ app.get('/api/artifact-content', (req, res) => {
   }
 });
 
+// ============================================================
+// MCPs — collect MCP servers from all editors + match tool calls
+// ============================================================
+
+// Cache: MCP server tool lists are queried once at startup via initMcpToolsCache()
+let _mcpToolsCache = null; // { servers, serverToolResults, toolToServer, serverToolPatterns }
+
+async function initMcpToolsCache() {
+  const { getAllMCPServers } = require('./editors');
+  const { queryMcpServerTools } = require('./editors/base');
+  const projects = cache.getCachedProjects({ hiddenFolders: getHiddenFolders() });
+  const projectFolders = projects.map(p => p.folder).filter(Boolean);
+
+  const servers = getAllMCPServers(projectFolders);
+
+  const queryPromises = servers.map(async (server) => {
+    if (server.disabled) return { server, tools: [] };
+    try {
+      const tools = await queryMcpServerTools(server);
+      return { server, tools };
+    } catch {
+      return { server, tools: [] };
+    }
+  });
+
+  const serverToolResults = await Promise.all(queryPromises);
+
+  const toolToServer = {};
+  for (const { server, tools } of serverToolResults) {
+    server.tools = tools;
+    for (const toolName of tools) {
+      toolToServer[toolName] = server.name;
+    }
+  }
+
+  const serverToolPatterns = {};
+  for (const { server, tools } of serverToolResults) {
+    if (tools.length === 0) continue;
+    serverToolPatterns[server.name] = new Set(tools.map(t => t.toLowerCase()));
+  }
+
+  _mcpToolsCache = { servers, serverToolResults, toolToServer, serverToolPatterns };
+  return _mcpToolsCache;
+}
+
+app.initMcpToolsCache = initMcpToolsCache;
+
+app.get('/api/mcps', async (req, res) => {
+  try {
+    const db = cache.getDb();
+
+    // Use cached MCP tool data (queried once at startup)
+    if (!_mcpToolsCache) await initMcpToolsCache();
+    const { servers, serverToolResults, toolToServer, serverToolPatterns } = _mcpToolsCache;
+
+    // 3. Get tool call stats from the SQLite cache
+    const toolRows = db.prepare(`
+      SELECT tc.tool_name, tc.source, tc.chat_id, tc.folder, tc.timestamp, c.name as chat_name
+      FROM tool_calls tc JOIN chats c ON tc.chat_id = c.id
+      ORDER BY tc.timestamp DESC
+    `).all();
+
+    const toolCallMap = {}; // toolName -> { count, editors: Set, sessions: Set, folders: Set }
+    const sessionMap = {};  // chatId -> { ... }
+
+    for (const row of toolRows) {
+      const name = row.tool_name;
+      if (!toolCallMap[name]) toolCallMap[name] = { count: 0, editors: new Set(), sessions: new Set(), folders: new Set() };
+      toolCallMap[name].count++;
+      toolCallMap[name].editors.add(row.source);
+      toolCallMap[name].sessions.add(row.chat_id);
+      if (row.folder) toolCallMap[name].folders.add(row.folder);
+
+      if (!sessionMap[row.chat_id]) {
+        sessionMap[row.chat_id] = {
+          composerId: row.chat_id,
+          source: row.source,
+          name: row.chat_name,
+          folder: row.folder,
+          createdAt: row.timestamp,
+          totalToolCalls: 0,
+          tools: {},
+        };
+      }
+      sessionMap[row.chat_id].totalToolCalls++;
+      sessionMap[row.chat_id].tools[name] = (sessionMap[row.chat_id].tools[name] || 0) + 1;
+    }
+
+    // 4. Build tool call summary
+    const toolCalls = Object.entries(toolCallMap)
+      .map(([name, data]) => ({
+        name,
+        count: data.count,
+        editors: [...data.editors],
+        sessionCount: data.sessions.size,
+        folders: [...data.folders],
+      }))
+      .sort((a, b) => b.count - a.count);
+
+    // 5. Match tool calls to MCP servers using actual queried tool names.
+    //    Editors prefix MCP tool names in various ways:
+    //    - Windsurf: mcp{N}_{toolName}  (e.g. mcp1_query-docs)
+    //    - Cursor:   mcp_{ServerName}_{toolName}  (e.g. mcp_Figma_get_figma_data)
+    //    - VS Code:  mcp_{sanitizedId}_{toolName}  (e.g. mcp_io_github_byt_execute_sql)
+    //    - Others:   {server}_{sep}_{toolName}  (e.g. prompts_chat__search_prompts)
+    //
+    //    IMPORTANT: Only match tool calls that have an explicit MCP prefix.
+    //    Tool calls without a prefix (e.g. "read_file", "edit_file") are built-in
+    //    editor tools even if an MCP server happens to expose a tool with the same name.
+    const matchedTools = {};
+
+    for (const tc of toolCalls) {
+      const tcName = tc.name;
+      let serverName = null;
+
+      // Pattern 1: Windsurf — mcp{N}_{toolName}
+      const windsurfMatch = tcName.match(/^mcp(\d+)_(.+)$/);
+      if (windsurfMatch) {
+        const stripped = windsurfMatch[2];
+        serverName = toolToServer[stripped];
+        if (!serverName) {
+          // Fallback: search all server tool sets
+          for (const [sn, toolSet] of Object.entries(serverToolPatterns)) {
+            if (toolSet.has(stripped.toLowerCase())) { serverName = sn; break; }
+          }
+        }
+      }
+
+      // Pattern 2: Cursor — mcp_{ServerName}_{toolName}
+      if (!serverName) {
+        const cursorMatch = tcName.match(/^mcp_([^_]+)_(.+)$/);
+        if (cursorMatch) {
+          const sName = cursorMatch[1];
+          const tName = cursorMatch[2];
+          for (const [sn, toolSet] of Object.entries(serverToolPatterns)) {
+            if (sn.toLowerCase() === sName.toLowerCase() && toolSet.has(tName.toLowerCase())) {
+              serverName = sn; break;
+            }
+          }
+          // Even if we can't verify the tool, the prefix confirms it's an MCP call
+          if (!serverName) {
+            for (const s of servers) {
+              if (s.name.toLowerCase() === sName.toLowerCase()) { serverName = s.name; break; }
+            }
+          }
+        }
+      }
+
+      // Pattern 3: VS Code / generic — mcp_{sanitizedServerId}_{toolName}
+      //   Server IDs like "io.github.f/prompts.chat-mcp" become "io_github_f_prompts_chat_mcp"
+      if (!serverName && tcName.startsWith('mcp_') && !tcName.match(/^mcp\d/)) {
+        const suffix = tcName.slice(4).toLowerCase(); // after "mcp_"
+        // First try matching via queried tool sets
+        for (const [sn, toolSet] of Object.entries(serverToolPatterns)) {
+          for (const tool of toolSet) {
+            if (suffix.endsWith('_' + tool) || suffix.endsWith(tool)) {
+              serverName = sn; break;
+            }
+          }
+          if (serverName) break;
+        }
+        // Fallback: match by sanitized server name (for servers whose tools couldn't be queried)
+        //   VS Code may truncate sanitized server IDs, so find the best (longest) prefix match
+        if (!serverName) {
+          let bestLen = 0;
+          let bestServer = null;
+          for (const s of servers) {
+            const sanitized = s.name.toLowerCase().replace(/[^a-z0-9]/g, '_').replace(/_+/g, '_');
+            // Full sanitized name match
+            if (suffix.startsWith(sanitized + '_') && sanitized.length > bestLen) {
+              bestLen = sanitized.length; bestServer = s.name;
+            }
+            // Truncated prefix: suffix must start with at least 60% of sanitized name
+            const minLen = Math.max(6, Math.ceil(sanitized.length * 0.6));
+            for (let len = sanitized.length; len >= minLen; len--) {
+              const prefix = sanitized.slice(0, len);
+              if (suffix.startsWith(prefix + '_') && len > bestLen) {
+                bestLen = len; bestServer = s.name; break;
+              }
+            }
+          }
+          if (bestServer) serverName = bestServer;
+        }
+      }
+
+      // Pattern 4: Double-underscore separator — {server_name}__{toolName}
+      if (!serverName) {
+        const sepMatch = tcName.match(/^(.+?)__(.+)$/);
+        if (sepMatch) {
+          const tName = sepMatch[2];
+          for (const [sn, toolSet] of Object.entries(serverToolPatterns)) {
+            if (toolSet.has(tName.toLowerCase())) { serverName = sn; break; }
+          }
+        }
+      }
+
+      if (serverName) {
+        if (!matchedTools[serverName]) matchedTools[serverName] = [];
+        matchedTools[serverName].push(tc);
+      }
+    }
+
+    // 6. Top sessions by tool calls
+    const topSessions = Object.values(sessionMap)
+      .sort((a, b) => b.totalToolCalls - a.totalToolCalls)
+      .slice(0, 50);
+
+    // 7. Per-project MCP stats
+    const projects = cache.getCachedProjects({ hiddenFolders: getHiddenFolders() });
+    const projectMcpConfigs = [
+      { file: '.mcp.json', editor: 'claude-code', label: 'Claude Code' },
+      { file: '.cursor/mcp.json', editor: 'cursor', label: 'Cursor' },
+      { file: '.vscode/mcp.json', editor: 'vscode', label: 'VS Code' },
+      { file: '.gemini/settings.json', editor: 'gemini-cli', label: 'Gemini CLI' },
+      { file: '.kiro/settings/mcp.json', editor: 'kiro', label: 'Kiro' },
+    ];
+
+    const projectMcps = [];
+    for (const proj of projects) {
+      if (!proj.folder) continue;
+      const configs = [];
+      for (const pc of projectMcpConfigs) {
+        const configPath = path.join(proj.folder, pc.file);
+        if (!fs.existsSync(configPath)) continue;
+        try {
+          const raw = fs.readFileSync(configPath, 'utf-8');
+          const parsed = JSON.parse(raw);
+          const mcpServers = parsed.mcpServers || parsed.mcp_servers || parsed.servers || {};
+          configs.push({
+            file: pc.file,
+            editor: pc.editor,
+            editorLabel: pc.label,
+            serverCount: Object.keys(mcpServers).length,
+            serverNames: Object.keys(mcpServers),
+          });
+        } catch { /* skip invalid configs */ }
+      }
+      if (configs.length === 0) continue;
+
+      // Count MCP tool calls from this project's sessions
+      const projToolCalls = toolRows.filter(r => r.folder === proj.folder);
+      const mcpToolCallCount = projToolCalls.filter(r => {
+        const n = r.tool_name;
+        return n.startsWith('mcp') || n.includes('__');
+      }).length;
+
+      // Which configured servers are used (matched to tool calls)
+      const configuredServerNames = new Set(configs.flatMap(c => c.serverNames));
+      const matchedServerNames = [];
+      for (const sn of configuredServerNames) {
+        if (matchedTools[sn]) matchedServerNames.push(sn);
+      }
+
+      projectMcps.push({
+        folder: proj.folder,
+        name: proj.name,
+        configs,
+        totalServers: [...configuredServerNames].length,
+        matchedServers: matchedServerNames.length,
+        mcpToolCalls: mcpToolCallCount,
+        totalSessions: proj.totalSessions || 0,
+      });
+    }
+
+    projectMcps.sort((a, b) => b.totalServers - a.totalServers || b.mcpToolCalls - a.mcpToolCalls);
+
+    // Strip _env from response (security)
+    const safeServers = servers.map(({ _env, ...rest }) => rest);
+
+    res.json({
+      servers: safeServers,
+      toolCalls,
+      matchedTools,
+      topSessions,
+      projectMcps,
+      summary: {
+        totalServers: servers.length,
+        totalToolCalls: toolRows.length,
+        uniqueTools: toolCalls.length,
+        sessionsWithTools: Object.keys(sessionMap).length,
+        editorsWithServers: [...new Set(servers.map(s => s.editor))],
+      },
+    });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
 app.get('/api/all-projects', (req, res) => {
   try {
     res.json(cache.getCachedProjects({ ...parseDateOpts(req.query), includeHidden: true }));

package/ui/src/App.jsx

@@ -17,6 +17,7 @@ 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'
 
@@ -148,6 +149,7 @@ export default function App() {
       { to: '/compare', icon: GitCompare, label: 'Compare' },
     ]},
     { to: '/artifacts', icon: Package, label: 'Artifacts' },
+    { to: '/mcps', icon: Plug, label: 'MCPs' },
     { to: '/sql', icon: Database, label: 'SQL' },
   ]
 
@@ -275,6 +277,7 @@ export default function App() {
             <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="/settings" element={<Settings />} />
           </Routes>

package/ui/src/components/PageHeader.jsx

@@ -0,0 +1,11 @@
+export default function PageHeader({ icon: Icon, title, children }) {
+  return (
+    <div className="flex items-center gap-3">
+      <div className="flex items-center gap-1.5 text-[13px] font-bold" style={{ color: 'var(--c-white)' }}>
+        {Icon && <Icon size={14} style={{ color: '#6366f1' }} />}
+        {title}
+      </div>
+      {children}
+    </div>
+  )
+}

package/ui/src/lib/api.js

@@ -227,6 +227,13 @@ export async function fetchArtifactContent(filePath) {
   return res.json();
 }
 
+// ── MCPs API ──
+
+export async function fetchMCPs() {
+  const res = await fetch(`${BASE}/api/mcps`);
+  return res.json();
+}
+
 // ── Relay API ──
 
 export async function fetchMode() {

package/ui/src/pages/Artifacts.jsx

@@ -6,6 +6,7 @@ import { fetchArtifacts, fetchArtifactContent } from '../lib/api'
 import { editorColor, editorLabel } from '../lib/constants'
 import EditorIcon from '../components/EditorIcon'
 import AnimatedLoader from '../components/AnimatedLoader'
+import PageHeader from '../components/PageHeader'
 
 const MONO = 'JetBrains Mono, monospace'
 
@@ -395,36 +396,22 @@ export default function Artifacts() {
 
   return (
     <div className="h-full">
-      {/* Header stats */}
-      <div className="flex items-center gap-4 mb-0 px-4 py-3" style={{ borderBottom: '1px solid var(--c-border)' }}>
-        <div className="flex items-center gap-4">
-          <div className="flex items-center gap-2 px-3 py-1.5 rounded" style={{ background: 'var(--c-card)', border: '1px solid var(--c-border)' }}>
-            <Package size={13} style={{ color: '#6366f1' }} />
-            <span className="text-[12px] font-medium" style={{ color: 'var(--c-white)' }}>{totalArtifacts}</span>
-            <span className="text-[11px]" style={{ color: 'var(--c-text3)' }}>artifacts</span>
+      {/* Header */}
+      <div className="px-4 py-3" style={{ borderBottom: '1px solid var(--c-border)' }}>
+        <PageHeader icon={Package} title="Artifacts">
+          <span className="text-[11px]" style={{ color: 'var(--c-text3)' }}>{totalArtifacts} artifacts · {totalProjects} projects · {allEditors.size} editors</span>
+          <div className="ml-auto relative">
+            <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 artifacts..."
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              className="pl-7 pr-3 py-1 text-[12px] outline-none w-[200px]"
+              style={{ background: 'var(--c-bg3)', border: '1px solid var(--c-border)', color: 'var(--c-text)' }}
+            />
           </div>
-          <div className="flex items-center gap-2 px-3 py-1.5 rounded" style={{ background: 'var(--c-card)', border: '1px solid var(--c-border)' }}>
-            <FolderOpen size={13} style={{ color: '#6366f1' }} />
-            <span className="text-[12px] font-medium" style={{ color: 'var(--c-white)' }}>{totalProjects}</span>
-            <span className="text-[11px]" style={{ color: 'var(--c-text3)' }}>projects</span>
-          </div>
-          <div className="flex items-center gap-2 px-3 py-1.5 rounded" style={{ background: 'var(--c-card)', border: '1px solid var(--c-border)' }}>
-            <Hash size={13} style={{ color: '#6366f1' }} />
-            <span className="text-[12px] font-medium" style={{ color: 'var(--c-white)' }}>{allEditors.size}</span>
-            <span className="text-[11px]" style={{ color: 'var(--c-text3)' }}>editors</span>
-          </div>
-        </div>
-        <div className="ml-auto relative">
-          <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 artifacts..."
-            value={search}
-            onChange={e => setSearch(e.target.value)}
-            className="pl-7 pr-3 py-1.5 text-[12px] rounded w-[240px]"
-            style={{ background: 'var(--c-card)', border: '1px solid var(--c-border)', color: 'var(--c-text)', outline: 'none' }}
-          />
-        </div>
+        </PageHeader>
       </div>
 
       {filtered.length === 0 ? (

package/ui/src/pages/Compare.jsx

@@ -5,6 +5,7 @@ import { Bar } from 'react-chartjs-2'
 import { fetchDeepAnalytics, fetchChats } from '../lib/api'
 import { editorColor, editorLabel, formatNumber } from '../lib/constants'
 import { useTheme } from '../lib/theme'
+import PageHeader from '../components/PageHeader'
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend)
 
@@ -152,7 +153,7 @@ export default function Compare({ overview }) {
 
   return (
     <div className="fade-in space-y-3">
-      <div className="flex items-center gap-2">
+      <PageHeader icon={ArrowLeftRight} title="Compare">
         <select
           value={editorA}
           onChange={e => setEditorA(e.target.value)}
@@ -161,7 +162,7 @@ export default function Compare({ overview }) {
         >
           {editors.map(e => <option key={e.id} value={e.id}>{editorLabel(e.id)}</option>)}
         </select>
-        <ArrowLeftRight size={12} style={{ color: 'var(--c-text3)' }} />
+        <span style={{ color: 'var(--c-text3)' }}>vs</span>
         <select
           value={editorB}
           onChange={e => setEditorB(e.target.value)}
@@ -171,7 +172,7 @@ export default function Compare({ overview }) {
           {editors.map(e => <option key={e.id} value={e.id}>{editorLabel(e.id)}</option>)}
         </select>
         {loading && <Loader2 size={11} className="animate-spin" style={{ color: 'var(--c-text3)' }} />}
-      </div>
+      </PageHeader>
 
       {result && (
         <div className="space-y-3">

package/ui/src/pages/CostAnalysis.jsx

@@ -12,6 +12,7 @@ import AnimatedLoader from '../components/AnimatedLoader'
 import SectionTitle from '../components/SectionTitle'
 import DateRangePicker from '../components/DateRangePicker'
 import ChatSidebar from '../components/ChatSidebar'
+import PageHeader from '../components/PageHeader'
 
 ChartJS.register(ArcElement, CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Legend, Filler)
 
@@ -102,17 +103,13 @@ export default function CostAnalysis({ overview }) {
   }
 
   return (
-    <div className="fade-in space-y-4">
+    <div className="fade-in space-y-3">
       {/* Filters */}
-      <div className="flex items-center gap-3">
-        <div className="flex items-center gap-1.5 text-[13px] font-bold" style={{ color: 'var(--c-white)' }}>
-          <DollarSign size={14} style={{ color: '#6366f1' }} />
-          Cost Analysis
-        </div>
+      <PageHeader icon={DollarSign} title="Cost Analysis">
         <select
           value={editor}
           onChange={e => setEditor(e.target.value)}
-          className="px-2 py-1 text-[12px] outline-none appearance-none cursor-pointer"
+          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>
@@ -121,7 +118,7 @@ export default function CostAnalysis({ overview }) {
           ))}
         </select>
         <div className="ml-auto"><DateRangePicker value={apiDateRange} onChange={setApiDateRange} /></div>
-      </div>
+      </PageHeader>
 
       {/* Disclaimer */}
       <div className="flex items-start gap-2 px-3 py-2 text-[11px] rounded" style={{ background: 'rgba(234,179,8,0.06)', border: '1px solid rgba(234,179,8,0.15)', color: '#ca8a04' }}>
@@ -130,7 +127,7 @@ export default function CostAnalysis({ overview }) {
       </div>
 
       {/* KPIs */}
-      <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))' }}>
+      <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(90px, 1fr))' }}>
         <KpiCard label="total est. cost" value={formatCost(totalCost)} sub="all models" />
         <KpiCard label="avg / session" value={formatCost(summary.avgPerSession)} sub={`${formatNumber(summary.totalSessions)} sessions`} />
         <KpiCard label="avg / day" value={formatCost(summary.avgPerDay)} sub={`${summary.totalDays} days`} />

package/ui/src/pages/Dashboard.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { ArrowRight, X, Flame, Zap, MessageSquare, Wrench, Share2, AlertTriangle } from 'lucide-react'
+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'
@@ -14,6 +14,7 @@ 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)
 
@@ -175,17 +176,19 @@ export default function Dashboard({ overview }) {
   return (
     <div className="fade-in space-y-3">
       {/* Top bar */}
-      <div className="flex items-center justify-end 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 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">

package/ui/src/pages/DeepAnalysis.jsx

@@ -9,6 +9,7 @@ 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)
 
@@ -247,13 +248,13 @@ export default function DeepAnalysis({ overview }) {
   }
 
   return (
-    <div className="fade-in space-y-4">
+    <div className="fade-in space-y-3">
       {/* Filters */}
-      <div className="flex items-center gap-2">
+      <PageHeader icon={TrendingUp} title="Deep Analysis">
         <select
           value={editor}
           onChange={e => setEditor(e.target.value)}
-          className="px-2 py-1.5 text-[12px] outline-none rounded-sm"
+          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>
@@ -264,7 +265,7 @@ export default function DeepAnalysis({ overview }) {
         <select
           value={folder}
           onChange={e => setFolder(e.target.value)}
-          className="px-2 py-1.5 text-[12px] outline-none max-w-[200px] truncate rounded-sm"
+          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>
@@ -275,7 +276,7 @@ export default function DeepAnalysis({ overview }) {
         {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>
-      </div>
+      </PageHeader>
 
       {data && insights && (
         <>