Frontend Application

Frontend Application

**Referenced Files in This Document** - [frontend/src/App.jsx](https://github.com/RunTimeAdmin/AgentID/blob/main/frontend/src/App.jsx) - [frontend/src/main.jsx](https://github.com/RunTimeAdmin/AgentID/blob/main/frontend/src/main.jsx) - [frontend/src/lib/api.js](https://github.com/RunTimeAdmin/AgentID/blob/main/frontend/src/lib/api.js) - [frontend/src/pages/Registry.jsx](https://github.com/RunTimeAdmin/AgentID/blob/main/frontend/src/pages/Registry.jsx) - [frontend/src/pages/AgentDetail.jsx](https://github.com/RunTimeAdmin/AgentID/blob/main/frontend/src/pages/AgentDetail.jsx) - [frontend/src/pages/Register.jsx](https://github.com/RunTimeAdmin/AgentID/blob/main/frontend/src/pages/Register.jsx) - [frontend/src/pages/Discover.jsx](https://github.com/RunTimeAdmin/AgentID/blob/main/frontend/src/pages/Discover.jsx) - [frontend/src/components/TrustBadge.jsx](https://github.com/RunTimeAdmin/AgentID/blob/main/frontend/src/components/TrustBadge.jsx) - [frontend/src/components/ReputationBreakdown.jsx](https://github.com/RunTimeAdmin/AgentID/blob/main/frontend/src/components/ReputationBreakdown.jsx) - [frontend/src/components/CapabilityList.jsx](https://github.com/RunTimeAdmin/AgentID/blob/main/frontend/src/components/CapabilityList.jsx) - [frontend/src/components/FlagModal.jsx](https://github.com/RunTimeAdmin/AgentID/blob/main/frontend/src/components/FlagModal.jsx) - [frontend/src/index.css](https://github.com/RunTimeAdmin/AgentID/blob/main/frontend/src/index.css) - [frontend/package.json](https://github.com/RunTimeAdmin/AgentID/blob/main/frontend/package.json) - [frontend/vite.config.js](https://github.com/RunTimeAdmin/AgentID/blob/main/frontend/vite.config.js)

Table of Contents

1. Introduction
2. Project Structure
3. Core Components
4. Architecture Overview
5. Detailed Component Analysis
6. Dependency Analysis
7. Performance Considerations
8. Troubleshooting Guide
9. Conclusion
10. Appendices

Introduction

This document describes the AgentID frontend React application, focusing on the user interface and component architecture. It explains the routing configuration, state management approach, and styling strategy using TailwindCSS.

Project Structure

The frontend is a Vite-powered React application with:

• Pages under src/pages for route handlers
• Reusable components under src/components
• Shared API client under src/lib/api.js
• Global styles under src/index.css
• Routing and navigation in src/App.jsx

graph TB
subgraph "Entry"
MAIN["main.jsx"]
APP["App.jsx"]
end
subgraph "Routing"
ROUTES["React Router Routes"]
NAV["Navigation"]
end
subgraph "Pages"
REG["Registry.jsx"]
DETAIL["AgentDetail.jsx"]
REGISTER["Register.jsx"]
DISCOVER["Discover.jsx"]
end
subgraph "Components"
BADGE["TrustBadge.jsx"]
REP["ReputationBreakdown.jsx"]
CAPS["CapabilityList.jsx"]
FLAG["FlagModal.jsx"]
end
subgraph "API"
API["api.js"]
end
MAIN --> APP
APP --> ROUTES
ROUTES --> REG
ROUTES --> DETAIL
ROUTES --> REGISTER
ROUTES --> DISCOVER
DETAIL --> BADGE
DETAIL --> REP
DETAIL --> CAPS
DETAIL --> FLAG
REG --> BADGE
DISCOVER --> BADGE
DISCOVER --> CAPS
REGISTER --> BADGE
REG --> API
DETAIL --> API
REGISTER --> API
DISCOVER --> API

Loading

Core Components

• Navigation and Footer: Provide global site layout and links.
• Pages:
  • Registry: Browse agents with filters, pagination
  • AgentDetail: View agent profile, reputation, capabilities
  • Register: Multi-step agent onboarding
  • Discover: Capability-based agent discovery
• Reusable Components:
  • TrustBadge: Visual trust status and score display
  • ReputationBreakdown: Five-factor reputation scoring
  • CapabilityList: Capability tags with categorization
  • FlagModal: Enhanced modal for reporting agents

Architecture Overview

The app uses React Router for client-side routing and a shared Axios-based API client. Pages orchestrate state and render reusable components. Styling relies on TailwindCSS with a custom dark theme.

Detailed Component Analysis

Routing and Navigation

Routes:

• "/" → Registry
• "/agents/:pubkey" → AgentDetail
• "/register" → Register
• "/discover" → Discover

Registry Page

State: agents, loading, error, filters, pagination Behavior:

• Fetches paginated agent list with filters
• Renders skeletons while loading
• Pagination controls

AgentDetail Page

State: agent, badge, reputation, attestations, flags Behavior:

• Parallel fetch of agent data
• Flag submission with cryptographic authentication
• Handles 404 and generic errors

Register Page

Multi-step workflow:

1. Collect pubkey and name
2. Fetch challenge, user signs
3. Optional metadata
4. Review and submit

Reusable Components

TrustBadge

• Props: status, name, score, registeredAt, totalActions
• Status-dependent styling (verified/unverified/flagged)

FlagModal

• Enhanced with Ed25519 signature requirements
• Cryptographic message construction
• Real-time message generation

Dependency Analysis

• Runtime: React, ReactDOM, React Router, Axios
• Dev: Vite, TailwindCSS, ESLint
• Build: Multi-page with widget entry point

Performance Considerations

• Parallel API fetching in AgentDetail
• Pagination in Registry
• Skeleton loaders for perceived performance

Troubleshooting Guide

• 401 responses clear stored token
• Check proxy configuration for network errors
• Form validation in Register steps

Conclusion

The AgentID frontend is a modular, theme-consistent React application with clear separation of concerns.

Appendices

Component Usage Examples

• Registry: Pass TrustBadge to each agent card
• AgentDetail: Compose TrustBadge, ReputationBreakdown, CapabilityList
• Register: Use FormField, TextAreaField, CapabilitiesInput