Phase 5-B: Frontend MCP Server Health Panel #54

New Issue

Open

opened 2026-05-24 16:55:20 -05:00 by null · 0 comments

null commented

2026-05-24 16:55:20 -05:00

Owner

Source plan: /home/kaspa/.claude/plans/with-our-backend-created-precious-owl.md

Feature context: Feature 5: MCP Server Health Panel

Scope

Phase 5-B — Frontend

Summary

Add an MCP Servers card/panel on the dashboard or Claude settings page showing each server's name, transport, and status badge.

Affected area

UI component: MCP health panel
UI page: dashboard or /settings/ai-providers

Affected files

frontend/src/components/claude/McpServersPanel.tsx — new component
frontend/src/lib/api/claude-code.ts — add getMcpServers() API function
frontend/src/app/dashboard/page.tsx — embed panel (only when MCP servers exist)

Affected routes or endpoints

Calls: GET /api/v1/claude-code/mcp-servers

Expected behavior

Card panel titled "MCP Servers" with a list of server rows
Each row: server name, transport badge (stdio / http), status dot (green = reachable, grey = unknown, red = unreachable)
Panel hidden entirely if no MCP servers are configured
Refresh button re-fetches (probes HTTP servers again)
stdio rows show a neutral grey dot with tooltip "Cannot probe stdio servers"

Steps to reproduce (acceptance criteria)

If MCP servers are configured, panel appears on dashboard
HTTP servers show correct reachability
Refresh button triggers a new probe
Panel is absent when no servers configured

Source plan: `/home/kaspa/.claude/plans/with-our-backend-created-precious-owl.md` Feature context: **Feature 5: MCP Server Health Panel** ## Scope ### Phase 5-B — Frontend #### Summary Add an MCP Servers card/panel on the dashboard or Claude settings page showing each server's name, transport, and status badge. #### Affected area - UI component: MCP health panel - UI page: dashboard or `/settings/ai-providers` #### Affected files - `frontend/src/components/claude/McpServersPanel.tsx` — new component - `frontend/src/lib/api/claude-code.ts` — add `getMcpServers()` API function - `frontend/src/app/dashboard/page.tsx` — embed panel (only when MCP servers exist) #### Affected routes or endpoints - Calls: `GET /api/v1/claude-code/mcp-servers` #### Expected behavior - Card panel titled "MCP Servers" with a list of server rows - Each row: server name, transport badge (`stdio` / `http`), status dot (green = reachable, grey = unknown, red = unreachable) - Panel hidden entirely if no MCP servers are configured - Refresh button re-fetches (probes HTTP servers again) - `stdio` rows show a neutral grey dot with tooltip "Cannot probe stdio servers" #### Steps to reproduce (acceptance criteria) 1. If MCP servers are configured, panel appears on dashboard 2. HTTP servers show correct reachability 3. Refresh button triggers a new probe 4. Panel is absent when no servers configured ---