feat(client): real-time tool analytics dashboard component (`<McpAnalytics />`)

[zonlabs]

Summary

Extend the SSE event stream with a structured tool_analytics event after every tool call. Provide a drop-in React component <McpAnalytics /> that renders a live dashboard: calls/min, top-5 tools by usage, error rates, and average latency.

Motivation

Developers building chatbots and agents currently have no visibility into which MCP tools are actually being used, which are failing silently, or how latency distributes across servers. A live dashboard bridges this gap directly in the developer's app.

Proposed Change

Server Side (src/shared/events.ts)

export interface McpToolAnalyticsEvent {
  type: 'tool_analytics';
  toolName: string;
  serverId: string;
  durationMs: number;
  isError: boolean;
  tokenEstimate: number;
  timestamp: number;
}

Client Side (mcp-ui/components/McpAnalytics.tsx)

export interface McpAnalyticsProps {
  url: string;
  identity: string;
  windowMs?: number; // rolling window (default: 5 min)
}

export function McpAnalytics({ url, identity, windowMs = 300_000 }: McpAnalyticsProps) {
  // Subscribe to SSE stream, aggregate tool_analytics events
  // Render: sparkline chart, top-5 tool table, error rate badge, avg latency
}

Uses a lightweight charting library (e.g., recharts or plain SVG). Chart is responsive and auto-refreshes as SSE events arrive.

Expected Outcome

• Drop-in <McpAnalytics /> component renders a live tool usage dashboard.
• Zero config — just pass the same url and identity as useMcp.
• Accessible in development and production environments.

Acceptance Criteria

• McpToolAnalyticsEvent type added to events.ts
• Server emits tool_analytics event after every callTool
• <McpAnalytics /> component created in mcp-ui/
• Dashboard shows: calls/min sparkline, top-5 tools table, error rate, avg latency
• Storybook story (if applicable) or standalone demo page added
• Unit tests: event aggregation logic tested independently of rendering

References

• Related: src/shared/events.ts, mcp-ui/, src/client/react/