agentlytics 0.2.4 → 0.2.5

package/ui/src/pages/MCPs.jsx

@@ -0,0 +1,744 @@
+import { useState, useEffect, useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Plug, Server, Wrench, Terminal, Globe, FolderOpen, Search, ChevronDown, ChevronRight, Hash, Layers, ArrowUpRight, Ban, BarChart3 } from 'lucide-react'
+import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement } from 'chart.js'
+import { Doughnut, Bar } from 'react-chartjs-2'
+import { fetchMCPs } from '../lib/api'
+import { editorColor, editorLabel, formatNumber } from '../lib/constants'
+import EditorIcon from '../components/EditorIcon'
+import AnimatedLoader from '../components/AnimatedLoader'
+import SectionTitle from '../components/SectionTitle'
+import KpiCard from '../components/KpiCard'
+import PageHeader from '../components/PageHeader'
+import { useTheme } from '../lib/theme'
+
+ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement)
+
+const MONO = 'JetBrains Mono, monospace'
+const CHART_COLORS = ['#6366f1', '#22c55e', '#f59e0b', '#ec4899', '#3b82f6', '#a855f7', '#14b8a6', '#f43f5e', '#84cc16', '#06b6d4', '#e879f9', '#fb923c']
+
+function ServerCard({ server, matchedTools }) {
+  const [open, setOpen] = useState(false)
+  const matched = matchedTools || []
+  const totalCalls = matched.reduce((s, t) => s + t.count, 0)
+  const queriedTools = server.tools || []
+  const hasContent = queriedTools.length > 0 || matched.length > 0
+
+  return (
+    <div className="card overflow-hidden">
+      <button
+        onClick={() => hasContent && setOpen(!open)}
+        className="w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-[var(--c-bg3)] transition"
+      >
+        <div className="flex items-center justify-center w-6 h-6" style={{ background: `${editorColor(server.editor)}15` }}>
+          <Server size={11} style={{ color: editorColor(server.editor) }} />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-1.5">
+            <span className="text-[12px] font-semibold truncate" style={{ color: 'var(--c-white)' }}>{server.name}</span>
+            <span className="text-[10px] px-1 py-px" style={{
+              background: server.scope === 'global' ? 'rgba(99,102,241,0.12)' : 'rgba(34,197,94,0.12)',
+              color: server.scope === 'global' ? '#818cf8' : '#22c55e',
+            }}>{server.scope}</span>
+            <span className="text-[10px] px-1 py-px" style={{
+              background: server.transport === 'stdio' ? 'rgba(234,179,8,0.12)' : 'rgba(59,130,246,0.12)',
+              color: server.transport === 'stdio' ? '#eab308' : '#3b82f6',
+            }}>{server.transport}</span>
+            {server.disabled && <span className="text-[10px] px-1 py-px" style={{ background: 'rgba(239,68,68,0.12)', color: '#ef4444' }}>disabled</span>}
+          </div>
+          <div className="flex items-center gap-2 mt-px">
+            <span className="flex items-center gap-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
+              <EditorIcon source={server.editor} size={10} />
+              {server.editorLabel}
+            </span>
+            {server.command && (
+              <span className="text-[10px] truncate" style={{ color: 'var(--c-text3)', fontFamily: MONO }}>
+                {server.command} {(server.args || []).slice(0, 2).join(' ')}
+              </span>
+            )}
+            {server.url && (
+              <span className="flex items-center gap-1 text-[10px] truncate" style={{ color: 'var(--c-text3)' }}>
+                <Globe size={9} />{server.url}
+              </span>
+            )}
+          </div>
+        </div>
+        <div className="text-right shrink-0">
+          {totalCalls > 0 && <div className="text-[12px] font-semibold" style={{ color: 'var(--c-white)' }}>{formatNumber(totalCalls)}</div>}
+          <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>
+            {queriedTools.length > 0 ? `${queriedTools.length} tools` : 'offline'}
+            {matched.length > 0 ? ` · ${matched.length} matched` : ''}
+          </div>
+        </div>
+        {hasContent ? (open ? <ChevronDown size={12} style={{ color: 'var(--c-text3)' }} /> : <ChevronRight size={12} style={{ color: 'var(--c-text3)' }} />) : <div className="w-3" />}
+      </button>
+      {open && hasContent && (
+        <div className="px-3 pb-2 pt-1" style={{ borderTop: '1px solid var(--c-border)' }}>
+          {queriedTools.length > 0 && (
+            <div className="mb-1.5">
+              <div className="text-[10px] font-medium mb-0.5" style={{ color: 'var(--c-text3)' }}>
+                <Wrench size={9} className="inline mr-0.5" />Available ({queriedTools.length})
+              </div>
+              <div className="flex flex-wrap gap-0.5">
+                {queriedTools.map(t => (
+                  <span key={t} className="text-[10px] px-1 py-px" style={{ background: 'var(--c-bg3)', color: 'var(--c-text3)', fontFamily: MONO }}>{t}</span>
+                ))}
+              </div>
+            </div>
+          )}
+          {matched.length > 0 && (
+            <div>
+              <div className="text-[10px] font-medium mb-0.5" style={{ color: 'var(--c-text3)' }}>
+                <Hash size={9} className="inline mr-0.5" />Matched Calls
+              </div>
+              <div className="space-y-0.5">
+                {matched.map(t => (
+                  <div key={t.name} className="flex items-center justify-between py-0.5 px-1.5" style={{ background: 'var(--c-bg3)' }}>
+                    <span className="text-[10px] truncate" style={{ fontFamily: MONO, color: 'var(--c-text)' }}>{t.name}</span>
+                    <div className="flex items-center gap-2 shrink-0 ml-2">
+                      <span className="text-[10px]" style={{ color: 'var(--c-text3)' }}>{t.sessionCount}s</span>
+                      <span className="text-[11px] font-semibold" style={{ color: 'var(--c-white)' }}>{formatNumber(t.count)}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function MCPs() {
+  const navigate = useNavigate()
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState('')
+  const [tab, setTab] = useState('servers') // servers | tools | sessions
+  const [toolProjectFilter, setToolProjectFilter] = useState('')
+  const [toolServerFilter, setToolServerFilter] = useState('')
+  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'
+
+  useEffect(() => {
+    fetchMCPs().then(d => { setData(d); setLoading(false) }).catch(() => setLoading(false))
+  }, [])
+
+  const filteredServers = useMemo(() => {
+    if (!data) return []
+    const q = search.toLowerCase()
+    return data.servers.filter(s =>
+      !q || s.name.toLowerCase().includes(q) || s.editor.toLowerCase().includes(q) || (s.command || '').toLowerCase().includes(q)
+    )
+  }, [data, search])
+
+  // Resolve tool name → matched server name
+  const toolServerMap = useMemo(() => {
+    if (!data) return {}
+    const map = {}
+    for (const [serverName, tools] of Object.entries(data.matchedTools || {})) {
+      for (const t of tools) map[t.name] = serverName
+    }
+    return map
+  }, [data])
+
+  // Unique projects and servers for filter dropdowns
+  const toolFilterOptions = useMemo(() => {
+    if (!data) return { projects: [], servers: [] }
+    const projectSet = new Set()
+    const serverSet = new Set()
+    for (const t of data.toolCalls) {
+      for (const f of (t.folders || [])) projectSet.add(f)
+      const sn = toolServerMap[t.name]
+      if (sn) serverSet.add(sn); else serverSet.add('__builtin__')
+    }
+    return {
+      projects: [...projectSet].sort((a, b) => a.split('/').pop().localeCompare(b.split('/').pop())),
+      servers: [...serverSet].filter(s => s !== '__builtin__').sort(),
+      hasBuiltIn: serverSet.has('__builtin__'),
+    }
+  }, [data, toolServerMap])
+
+  const filteredTools = useMemo(() => {
+    if (!data) return []
+    const q = search.toLowerCase()
+    return data.toolCalls.filter(t => {
+      if (q && !t.name.toLowerCase().includes(q)) return false
+      if (toolProjectFilter && !(t.folders || []).includes(toolProjectFilter)) return false
+      if (toolServerFilter === '__builtin__' && toolServerMap[t.name]) return false
+      if (toolServerFilter && toolServerFilter !== '__builtin__' && toolServerMap[t.name] !== toolServerFilter) return false
+      return true
+    })
+  }, [data, search, toolProjectFilter, toolServerFilter, toolServerMap])
+
+  const filteredSessions = useMemo(() => {
+    if (!data) return []
+    const q = search.toLowerCase()
+    return data.topSessions.filter(s =>
+      !q || (s.name || '').toLowerCase().includes(q) || s.source.toLowerCase().includes(q) || (s.folder || '').toLowerCase().includes(q)
+    )
+  }, [data, search])
+
+  // Group servers by editor
+  const serversByEditor = useMemo(() => {
+    const groups = {}
+    for (const s of filteredServers) {
+      if (!groups[s.editor]) groups[s.editor] = []
+      groups[s.editor].push(s)
+    }
+    return groups
+  }, [filteredServers])
+
+  // ── Chart data computations ──
+
+  // Most used MCP servers — stacked by editor
+  const mostUsedServersChart = useMemo(() => {
+    if (!data) return null
+    // Group calls by server name + editor
+    const serverCalls = {} // { serverName: { editor: count, ... } }
+    for (const s of data.servers) {
+      const matched = data.matchedTools[s.name] || []
+      const calls = matched.reduce((sum, t) => sum + t.count, 0)
+      if (calls === 0) continue
+      if (!serverCalls[s.name]) serverCalls[s.name] = {}
+      serverCalls[s.name][s.editor] = (serverCalls[s.name][s.editor] || 0) + calls
+    }
+    // Sort by total calls descending
+    const sorted = Object.entries(serverCalls)
+      .map(([name, byEditor]) => ({ name, byEditor, total: Object.values(byEditor).reduce((s, v) => s + v, 0) }))
+      .sort((a, b) => b.total - a.total)
+      .slice(0, 10)
+    if (sorted.length === 0) return null
+    // Collect all editors that appear
+    const allEditors = [...new Set(sorted.flatMap(s => Object.keys(s.byEditor)))]
+    return {
+      labels: sorted.map(s => s.name),
+      datasets: allEditors.map(ed => ({
+        label: editorLabel(ed),
+        data: sorted.map(s => s.byEditor[ed] || 0),
+        backgroundColor: editorColor(ed) + 'CC',
+        borderRadius: 2,
+      })),
+    }
+  }, [data])
+
+  // Never used MCP servers (no matched tool calls)
+  const neverUsedServers = useMemo(() => {
+    if (!data) return []
+    return data.servers.filter(s => {
+      const matched = data.matchedTools[s.name] || []
+      return matched.length === 0
+    })
+  }, [data])
+
+  // Most used MCP tools (only those matched to a server)
+  const mostUsedMcpTools = useMemo(() => {
+    if (!data) return []
+    const allMatched = []
+    for (const [serverName, tools] of Object.entries(data.matchedTools)) {
+      for (const t of tools) allMatched.push({ ...t, server: serverName })
+    }
+    return allMatched.sort((a, b) => b.count - a.count).slice(0, 12)
+  }, [data])
+
+  // Never used MCP tools (queried from server but no matching calls)
+  const neverUsedMcpTools = useMemo(() => {
+    if (!data) return []
+    const matchedToolNames = new Set()
+    for (const tools of Object.values(data.matchedTools)) {
+      for (const t of tools) matchedToolNames.add(t.name)
+    }
+    const unused = []
+    for (const s of data.servers) {
+      const sTools = s.tools || []
+      if (sTools.length === 0) continue
+      for (const toolName of sTools) {
+        if (!matchedToolNames.has(toolName)) {
+          unused.push({ name: toolName, server: s.name, editor: s.editor })
+        }
+      }
+    }
+    return unused
+  }, [data])
+
+  // Servers by editor (for doughnut)
+  const serversByEditorChart = useMemo(() => {
+    if (!data) return null
+    const counts = {}
+    for (const s of data.servers) {
+      const lbl = editorLabel(s.editor)
+      counts[lbl] = (counts[lbl] || 0) + 1
+    }
+    const entries = Object.entries(counts).sort((a, b) => b[1] - a[1])
+    if (entries.length === 0) return null
+    return {
+      labels: entries.map(e => e[0]),
+      colors: entries.map(e => {
+        const srv = data.servers.find(s => editorLabel(s.editor) === e[0])
+        return srv ? editorColor(srv.editor) : '#666'
+      }),
+      values: entries.map(e => e[1]),
+    }
+  }, [data])
+
+  // Servers by transport (for doughnut)
+  const serversByTransport = useMemo(() => {
+    if (!data) return null
+    const counts = {}
+    for (const s of data.servers) counts[s.transport] = (counts[s.transport] || 0) + 1
+    const entries = Object.entries(counts).sort((a, b) => b[1] - a[1])
+    if (entries.length === 0) return null
+    const tColors = { stdio: '#eab308', http: '#3b82f6', sse: '#a855f7' }
+    return {
+      labels: entries.map(e => e[0]),
+      colors: entries.map(e => tColors[e[0]] || '#666'),
+      values: entries.map(e => e[1]),
+    }
+  }, [data])
+
+  if (loading) return <AnimatedLoader label="Loading MCP data..." />
+
+  if (!data) return (
+    <div className="text-center py-20 text-[13px]" style={{ color: 'var(--c-text3)' }}>
+      Failed to load MCP data
+    </div>
+  )
+
+  const { summary, matchedTools } = data
+  const tabs = [
+    { id: 'servers', label: 'Servers', count: data.servers.length },
+    { id: 'tools', label: 'Tools', count: data.toolCalls.length },
+    { id: 'sessions', label: 'Sessions', count: data.topSessions.length },
+  ]
+
+  return (
+    <div className="fade-in space-y-3">
+      <PageHeader icon={Plug} title="MCPs" />
+
+      {/* KPIs */}
+      <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(90px, 1fr))' }}>
+        <KpiCard label="servers" value={summary.totalServers} sub={`${summary.editorsWithServers.length} editors`} />
+        <KpiCard label="unique tools" value={formatNumber(summary.uniqueTools)} />
+        <KpiCard label="tool calls" value={formatNumber(summary.totalToolCalls)} />
+        <KpiCard label="sessions" value={formatNumber(summary.sessionsWithTools)} />
+        <KpiCard label="matched" value={Object.values(matchedTools).reduce((s, arr) => s + arr.length, 0)} sub={`${Object.keys(matchedTools).length} servers`} />
+      </div>
+
+      {/* Charts row */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-2">
+        {/* Most Used MCP Servers — stacked horizontal bar by editor */}
+        <div className="card p-3">
+          <SectionTitle>most used servers <span style={{ color: 'var(--c-text3)' }}>(by editor)</span></SectionTitle>
+          {mostUsedServersChart ? (
+            <div style={{ height: Math.max(mostUsedServersChart.labels.length * 22 + 10, 80) }}>
+              <Bar
+                data={mostUsedServersChart}
+                options={{
+                  indexAxis: 'y', responsive: true, maintainAspectRatio: false,
+                  scales: {
+                    x: { stacked: true, grid: { color: gridColor }, ticks: { color: txtDim, font: { size: 9, family: MONO } } },
+                    y: { stacked: true, grid: { display: false }, ticks: { color: txtColor, font: { size: 9, family: MONO } } },
+                  },
+                  plugins: {
+                    legend: { position: 'top', labels: { color: legendColor, font: { size: 9, family: MONO }, usePointStyle: true, pointStyle: 'circle', padding: 6 } },
+                    tooltip: { mode: 'index', bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } },
+                  },
+                }}
+              />
+            </div>
+          ) : <div className="text-[11px] text-center py-6" style={{ color: 'var(--c-text3)' }}>No MCP server usage</div>}
+        </div>
+
+        {/* Most Used MCP Tools — horizontal bar */}
+        <div className="card p-3">
+          <SectionTitle>most used tools</SectionTitle>
+          {mostUsedMcpTools.length > 0 ? (
+            <div style={{ height: Math.max(mostUsedMcpTools.length * 22 + 10, 80) }}>
+              <Bar
+                data={{
+                  labels: mostUsedMcpTools.map(t => t.name),
+                  datasets: [{
+                    data: mostUsedMcpTools.map(t => t.count),
+                    backgroundColor: CHART_COLORS.slice(0, mostUsedMcpTools.length),
+                    borderRadius: 2,
+                  }],
+                }}
+                options={{
+                  indexAxis: 'y', responsive: true, maintainAspectRatio: false,
+                  scales: {
+                    x: { grid: { color: gridColor }, ticks: { color: txtDim, font: { size: 9, family: MONO } } },
+                    y: { grid: { display: false }, ticks: { color: txtColor, font: { size: 9, family: MONO } } },
+                  },
+                  plugins: { legend: { display: false }, tooltip: {
+                    bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 },
+                    callbacks: { afterLabel: (ctx) => `Server: ${mostUsedMcpTools[ctx.dataIndex]?.server || '?'}` },
+                  }},
+                }}
+              />
+            </div>
+          ) : <div className="text-[11px] text-center py-6" style={{ color: 'var(--c-text3)' }}>No MCP tool usage</div>}
+        </div>
+
+        {/* Doughnuts: by editor + by transport */}
+        <div className="space-y-2">
+          <div className="card p-3">
+            <SectionTitle>servers by editor</SectionTitle>
+            {serversByEditorChart ? (
+              <div style={{ height: 110 }}>
+                <Doughnut
+                  data={{ labels: serversByEditorChart.labels, datasets: [{ data: serversByEditorChart.values, backgroundColor: serversByEditorChart.colors, borderWidth: 0 }] }}
+                  options={{ responsive: true, maintainAspectRatio: false, cutout: '55%', plugins: {
+                    legend: { position: 'right', labels: { color: legendColor, font: { size: 9, family: MONO }, usePointStyle: true, pointStyle: 'circle', padding: 6 } },
+                    tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } },
+                  }}}
+                />
+              </div>
+            ) : <div className="text-[11px] text-center py-4" style={{ color: 'var(--c-text3)' }}>no data</div>}
+          </div>
+          <div className="card p-3">
+            <SectionTitle>servers by transport</SectionTitle>
+            {serversByTransport ? (
+              <div style={{ height: 90 }}>
+                <Doughnut
+                  data={{ labels: serversByTransport.labels, datasets: [{ data: serversByTransport.values, backgroundColor: serversByTransport.colors, borderWidth: 0 }] }}
+                  options={{ responsive: true, maintainAspectRatio: false, cutout: '55%', plugins: {
+                    legend: { position: 'right', labels: { color: legendColor, font: { size: 9, family: MONO }, usePointStyle: true, pointStyle: 'circle', padding: 6 } },
+                    tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } },
+                  }}}
+                />
+              </div>
+            ) : <div className="text-[11px] text-center py-4" style={{ color: 'var(--c-text3)' }}>no data</div>}
+          </div>
+        </div>
+      </div>
+
+      {/* Never Used Servers + Never Used Tools */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
+        <div className="card p-3">
+          <SectionTitle>never used servers <span style={{ color: 'var(--c-text3)' }}>({neverUsedServers.length})</span></SectionTitle>
+          {neverUsedServers.length > 0 ? (
+            <div className="space-y-0.5 max-h-[160px] overflow-y-auto scrollbar-thin">
+              {neverUsedServers.map((s, i) => (
+                <div key={`${s.name}-${s.editor}-${i}`} className="flex items-center gap-1.5 py-0.5 px-1.5" style={{ background: 'var(--c-bg3)' }}>
+                  <Ban size={9} style={{ color: '#ef4444', opacity: 0.5 }} />
+                  <span className="text-[10px] font-medium truncate" style={{ color: 'var(--c-text)' }}>{s.name}</span>
+                  <span className="flex items-center gap-1 ml-auto shrink-0">
+                    <EditorIcon source={s.editor} size={10} />
+                    <span className="text-[10px]" style={{ color: 'var(--c-text3)' }}>{s.editorLabel}</span>
+                  </span>
+                  {s.disabled && <span className="text-[9px] px-0.5" style={{ background: 'rgba(239,68,68,0.12)', color: '#ef4444' }}>off</span>}
+                </div>
+              ))}
+            </div>
+          ) : <div className="text-[11px] text-center py-4" style={{ color: 'var(--c-text3)' }}>All servers have been used</div>}
+        </div>
+        <div className="card p-3">
+          <SectionTitle>never used tools <span style={{ color: 'var(--c-text3)' }}>({neverUsedMcpTools.length})</span></SectionTitle>
+          {neverUsedMcpTools.length > 0 ? (
+            <div className="space-y-0.5 max-h-[160px] overflow-y-auto scrollbar-thin">
+              {neverUsedMcpTools.map((t, i) => (
+                <div key={`${t.name}-${t.server}-${i}`} className="flex items-center gap-1.5 py-0.5 px-1.5" style={{ background: 'var(--c-bg3)' }}>
+                  <Ban size={9} style={{ color: '#f59e0b', opacity: 0.5 }} />
+                  <span className="text-[10px] truncate" style={{ fontFamily: MONO, color: 'var(--c-text)' }}>{t.name}</span>
+                  <span className="ml-auto shrink-0 text-[10px] px-1 py-px" style={{ background: 'rgba(99,102,241,0.12)', color: '#818cf8' }}>{t.server}</span>
+                </div>
+              ))}
+            </div>
+          ) : <div className="text-[11px] text-center py-4" style={{ color: 'var(--c-text3)' }}>All queried tools have been used</div>}
+        </div>
+      </div>
+
+      {/* Per-Project MCP Configs */}
+      {data.projectMcps && data.projectMcps.length > 0 && (
+        <div className="card overflow-hidden">
+          <div className="px-3 py-2" style={{ borderBottom: '1px solid var(--c-border)' }}>
+            <SectionTitle>MCP servers by project <span style={{ color: 'var(--c-text3)' }}>({data.projectMcps.length})</span></SectionTitle>
+          </div>
+          <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 px-3 py-2 font-medium">project</th>
+                <th className="text-left px-3 py-2 font-medium">config</th>
+                <th className="text-left px-3 py-2 font-medium">servers</th>
+                <th className="text-right px-3 py-2 font-medium">mcp calls</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.projectMcps.map(p =>
+                p.configs.map((c, ci) => (
+                  <tr
+                    key={`${p.folder}-${c.file}`}
+                    className="transition"
+                    style={{ borderBottom: '1px solid var(--c-border)' }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--c-bg3)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                  >
+                    {ci === 0 ? (
+                      <td className="px-3 py-2" rowSpan={p.configs.length}>
+                        <span
+                          className="flex items-center gap-1.5 cursor-pointer hover:underline"
+                          style={{ color: 'var(--c-accent)' }}
+                          onClick={() => navigate(`/projects/detail?folder=${encodeURIComponent(p.folder)}`)}
+                        >
+                          <FolderOpen size={11} />
+                          <span className="font-medium truncate max-w-[200px]">{p.name}</span>
+                        </span>
+                      </td>
+                    ) : null}
+                    <td className="px-3 py-2">
+                      <span className="flex items-center gap-1.5">
+                        <EditorIcon source={c.editor} size={12} />
+                        <span style={{ color: 'var(--c-text2)' }}>{c.file}</span>
+                      </span>
+                    </td>
+                    <td className="px-3 py-2">
+                      <div className="flex flex-wrap gap-1">
+                        {c.serverNames.map(sn => (
+                          <span key={sn} className="text-[11px] px-1.5 py-px" style={{
+                            background: matchedTools[sn] ? 'rgba(99,102,241,0.12)' : 'var(--c-bg3)',
+                            color: matchedTools[sn] ? '#818cf8' : 'var(--c-text2)',
+                          }}>
+                            <Plug size={8} className="inline mr-0.5" />{sn}
+                            {matchedTools[sn] && <span className="ml-1 opacity-60">{matchedTools[sn].reduce((s, t) => s + t.count, 0)}</span>}
+                          </span>
+                        ))}
+                      </div>
+                    </td>
+                    {ci === 0 ? (
+                      <td className="px-3 py-2 text-right" rowSpan={p.configs.length}>
+                        {p.mcpToolCalls > 0 ? (
+                          <span className="font-semibold" style={{ color: 'var(--c-white)' }}>{formatNumber(p.mcpToolCalls)}</span>
+                        ) : (
+                          <span style={{ color: 'var(--c-text3)' }}>—</span>
+                        )}
+                      </td>
+                    ) : null}
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* Tabs + Search */}
+      <div className="flex items-center gap-3">
+        <div className="flex gap-0.5">
+          {tabs.map(t => (
+            <button
+              key={t.id}
+              onClick={() => setTab(t.id)}
+              className="px-2.5 py-1 text-[12px] transition"
+              style={{
+                background: tab === t.id ? 'var(--c-card)' : 'transparent',
+                color: tab === t.id ? 'var(--c-white)' : 'var(--c-text3)',
+                border: tab === t.id ? '1px solid var(--c-border)' : '1px solid transparent',
+              }}
+            >
+              {t.label} <span className="opacity-40 ml-0.5">{t.count}</span>
+            </button>
+          ))}
+        </div>
+        <div className="flex-1" />
+        {tab === 'tools' && (
+          <>
+            <select
+              value={toolProjectFilter}
+              onChange={e => setToolProjectFilter(e.target.value)}
+              className="px-2 py-1 text-[12px] outline-none"
+              style={{ background: 'var(--c-bg3)', border: '1px solid var(--c-border)', color: 'var(--c-text)' }}
+            >
+              <option value="">All Projects</option>
+              {toolFilterOptions.projects.map(f => (
+                <option key={f} value={f}>{f.split('/').pop()}</option>
+              ))}
+            </select>
+            <select
+              value={toolServerFilter}
+              onChange={e => setToolServerFilter(e.target.value)}
+              className="px-2 py-1 text-[12px] outline-none"
+              style={{ background: 'var(--c-bg3)', border: '1px solid var(--c-border)', color: 'var(--c-text)' }}
+            >
+              <option value="">All Servers</option>
+              {toolFilterOptions.hasBuiltIn && <option value="__builtin__">built-in</option>}
+              {toolFilterOptions.servers.map(s => (
+                <option key={s} value={s}>{s}</option>
+              ))}
+            </select>
+          </>
+        )}
+        <div className="relative">
+          <Search size={12} className="absolute left-2.5 top-1/2 -translate-y-1/2" style={{ color: 'var(--c-text3)' }} />
+          <input
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            placeholder="Search..."
+            className="pl-7 pr-3 py-1 text-[12px] outline-none w-[180px]"
+            style={{ background: 'var(--c-bg3)', border: '1px solid var(--c-border)', color: 'var(--c-text)' }}
+          />
+        </div>
+      </div>
+
+      {/* Servers Tab */}
+      {tab === 'servers' && (
+        <div>
+          {filteredServers.length === 0 ? (
+            <div className="text-center py-12 text-[12px]" style={{ color: 'var(--c-text3)' }}>
+              <Server size={24} className="mx-auto mb-2 opacity-30" />
+              <div>No MCP servers detected</div>
+              <div className="text-[10px] mt-0.5 opacity-60">Configure MCP servers in your editors</div>
+            </div>
+          ) : (
+            Object.entries(serversByEditor).map(([editor, servers]) => (
+              <div key={editor} className="mb-3">
+                <div className="flex items-center gap-1.5 mb-1">
+                  <EditorIcon source={editor} size={13} />
+                  <span className="text-[12px] font-semibold" style={{ color: 'var(--c-white)' }}>{editorLabel(editor)}</span>
+                  <span className="text-[11px]" style={{ color: 'var(--c-text3)' }}>({servers.length})</span>
+                </div>
+                <div className="space-y-1">
+                  {servers.map(s => (
+                    <ServerCard key={`${s.name}-${s.editor}-${s.scope}`} server={s} matchedTools={matchedTools[s.name]} />
+                  ))}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+
+      {/* Tools Tab */}
+      {tab === 'tools' && (
+        <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 px-3 py-2 font-medium">tool</th>
+                <th className="text-right px-3 py-2 font-medium">calls</th>
+                <th className="text-right px-3 py-2 font-medium">sessions</th>
+                <th className="text-left px-3 py-2 font-medium">editors</th>
+                <th className="text-left px-3 py-2 font-medium">server</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredTools.slice(0, 100).map((t, i) => {
+                const sn = toolServerMap[t.name]
+                return (
+                  <tr
+                    key={t.name}
+                    className="transition"
+                    style={{ borderBottom: '1px solid var(--c-border)' }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--c-bg3)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                  >
+                    <td className="px-3 py-2">
+                      <span style={{ fontFamily: MONO, color: 'var(--c-white)' }}>{t.name}</span>
+                    </td>
+                    <td className="px-3 py-2 text-right">
+                      <span className="font-semibold" style={{ color: 'var(--c-white)' }}>{formatNumber(t.count)}</span>
+                    </td>
+                    <td className="px-3 py-2 text-right" style={{ color: 'var(--c-text2)' }}>{t.sessionCount}</td>
+                    <td className="px-3 py-2">
+                      <div className="flex items-center gap-1">
+                        {t.editors.map(e => (
+                          <span key={e} className="inline-flex items-center gap-0.5">
+                            <EditorIcon source={e} size={12} />
+                          </span>
+                        ))}
+                      </div>
+                    </td>
+                    <td className="px-3 py-2">
+                      {sn ? (
+                        <span className="text-[11px] px-1.5 py-px" style={{ background: 'rgba(99,102,241,0.12)', color: '#818cf8' }}>
+                          <Plug size={9} className="inline mr-0.5" />{sn}
+                        </span>
+                      ) : (
+                        <span className="text-[11px]" style={{ color: 'var(--c-text2)' }}>built-in</span>
+                      )}
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+          {filteredTools.length > 100 && (
+            <div className="px-3 py-1 text-[10px] text-center" style={{ color: 'var(--c-text3)', background: 'var(--c-card)' }}>
+              Showing 100 of {filteredTools.length}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Sessions Tab */}
+      {tab === 'sessions' && (
+        <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 px-3 py-2 font-medium">session</th>
+                <th className="text-left px-3 py-2 font-medium">editor</th>
+                <th className="text-left px-3 py-2 font-medium">project</th>
+                <th className="text-right px-3 py-2 font-medium">calls</th>
+                <th className="text-left px-3 py-2 font-medium">top tools</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredSessions.map((s, i) => {
+                const topTools = Object.entries(s.tools).sort((a, b) => b[1] - a[1]).slice(0, 3)
+                return (
+                  <tr
+                    key={s.composerId}
+                    className="transition"
+                    style={{ borderBottom: '1px solid var(--c-border)' }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--c-bg3)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                  >
+                    <td className="px-3 py-2 max-w-[220px] font-medium">
+                      <span className="truncate block" style={{ color: 'var(--c-white)' }}>
+                        {s.name || <span style={{ color: 'var(--c-text3)', fontStyle: 'italic' }}>Untitled</span>}
+                      </span>
+                    </td>
+                    <td className="px-3 py-2">
+                      <span className="flex items-center gap-1">
+                        <EditorIcon source={s.source} size={12} />
+                        <span style={{ color: 'var(--c-text2)' }}>{editorLabel(s.source)}</span>
+                      </span>
+                    </td>
+                    <td className="px-3 py-2 truncate max-w-[160px]" title={s.folder}>
+                      {s.folder ? (
+                        <span
+                          className="cursor-pointer hover:underline"
+                          style={{ color: 'var(--c-accent)' }}
+                          onClick={e => { e.stopPropagation(); navigate(`/projects/detail?folder=${encodeURIComponent(s.folder)}`) }}
+                        >{s.folder.split(/[/\\]/).pop()}</span>
+                      ) : <span style={{ color: 'var(--c-text3)' }}>—</span>}
+                    </td>
+                    <td className="px-3 py-2 text-right">
+                      <span className="font-semibold" style={{ color: 'var(--c-white)' }}>{formatNumber(s.totalToolCalls)}</span>
+                    </td>
+                    <td className="px-3 py-2">
+                      <div className="flex gap-0.5 flex-wrap">
+                        {topTools.map(([name, count]) => (
+                          <span key={name} className="text-[10px] px-1 py-px" style={{ background: 'var(--c-bg3)', color: 'var(--c-text2)', fontFamily: MONO }}>
+                            {name} <span style={{ opacity: 0.5 }}>×{count}</span>
+                          </span>
+                        ))}
+                      </div>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+          {data.topSessions.length === 0 && (
+            <div className="text-center py-8 text-[11px]" style={{ color: 'var(--c-text3)' }}>No sessions with tool calls</div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}