adhit-r/aran-mcp

Implement Comprehensive Server Detail View

Open

#34 opened on Dec 4, 2025

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (2 forks)auto 404
data-visualizationenhancementfeaturefrontendhelp wantedui/ux

Repository metrics

Stars
 (0 stars)
PR merge metrics
 (PR metrics pending)

Description

Overview

Create a detailed server view page showing comprehensive information, metrics, and management options for a single MCP server.

Business Value

Users need detailed information about each server to make management decisions. This is essential for understanding server health and configuration.

Technology Stack

  • Frontend: TypeScript, React, Next.js
  • Data Visualization: Chart.js or Recharts
  • Backend: Go REST API
  • Styling: Tailwind CSS, component library

Skill Level Required

  • Intermediate
  • Strong React and TypeScript skills
  • Experience with data visualization libraries
  • Understanding of REST API integration
  • UI/UX design sensibilities

Learning Opportunities

  • Learn Next.js dynamic routing patterns
  • Practice building complex data visualization dashboards
  • Gain experience with responsive design
  • Learn about accessibility in data-heavy interfaces
  • Understand API design for detail views

Impact

This feature significantly improves user experience by providing comprehensive server insights. Contributors will build a polished, production-ready detail page that showcases frontend development skills.

Current State

  • Server list view exists
  • No dedicated detail page
  • Limited server information displayed

Subtasks

  • Design server detail page layout
  • Implement server information section
  • Add server metrics and statistics
  • Display server tools and resources
  • Add server health history chart
  • Implement server actions (edit, delete, test)
  • Add server activity timeline
  • Create responsive mobile layout

Implementation Steps

  1. Create frontend/src/app/servers/[id]/page.tsx
  2. Add server detail API endpoint
  3. Implement metrics visualization
  4. Add interactive charts for health history
  5. Create server action buttons

Getting Started

  1. Review existing server list component
  2. Study Next.js dynamic routes documentation
  3. Check available chart libraries in package.json
  4. Review design system in frontend/DESIGN_SYSTEM.md

Acceptance Criteria

  • Server detail page shows all server information
  • Metrics are displayed with charts
  • Health history is visualized
  • Tools and resources are listed
  • Server actions are accessible
  • Page is responsive and accessible
  • Loading states are handled

Estimated Effort

  • Hours: 12-16
  • Complexity: Medium

Contributor guide

Research direction
Start by reviewing the existing server list component and Next.js dynamic routing patterns. Then design the detail page layout, implement the frontend page with charts (using Recharts or Chart.js), and add the corresponding Go API endpoint for server details.
Tech stack
typescriptreactnextjsgotailwindcss
Domain
frontendbackend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReactTypeScriptNext.jsGit
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
55