Add comprehensive web-based admin interface
Creates a production-ready admin interface with FastAPI backend and React frontend: Backend Features: - FastAPI server with JWT authentication and WebSocket support - Comprehensive API endpoints for dashboard, characters, conversations, analytics - Real-time metrics and activity monitoring with WebSocket broadcasting - System control endpoints for pause/resume and configuration management - Advanced analytics including topic trends, relationship networks, community health - Export capabilities for conversations and character data Frontend Features: - Modern React/TypeScript SPA with Tailwind CSS styling - Real-time dashboard with live activity feeds and system metrics - Character management interface with profiles and relationship visualization - Conversation browser with search, filtering, and export capabilities - Analytics dashboard with charts and community insights - System status monitoring and control interface - Responsive design with mobile support Key Components: - Authentication system with session management - WebSocket integration for real-time updates - Chart visualizations using Recharts - Component library with consistent design system - API client with automatic token management - Toast notifications for user feedback Admin Interface Access: - Backend: http://localhost:8000 (FastAPI with auto-docs) - Frontend: http://localhost:3000/admin (React SPA) - Default credentials: admin/admin123 - Startup script: python scripts/start_admin.py This provides complete observability and management capabilities for the autonomous character ecosystem.
This commit is contained in:
183
admin-frontend/README.md
Normal file
183
admin-frontend/README.md
Normal file
@@ -0,0 +1,183 @@
|
||||
# Discord Fishbowl Admin Interface
|
||||
|
||||
A modern React/TypeScript web interface for monitoring and managing the autonomous Discord character ecosystem.
|
||||
|
||||
## Features
|
||||
|
||||
### 🎯 Real-time Dashboard
|
||||
- Live activity monitoring with WebSocket updates
|
||||
- System health metrics and performance indicators
|
||||
- Character status overview and engagement metrics
|
||||
- Interactive charts and data visualizations
|
||||
|
||||
### 👥 Character Management
|
||||
- Comprehensive character profiles with personality traits
|
||||
- Relationship network visualization
|
||||
- Memory and evolution tracking
|
||||
- Character control (pause/resume/configure)
|
||||
|
||||
### 💬 Conversation Analytics
|
||||
- Searchable conversation history
|
||||
- Content analysis and sentiment tracking
|
||||
- Topic trends and engagement metrics
|
||||
- Export capabilities (JSON/text/PDF)
|
||||
|
||||
### 📊 Community Insights
|
||||
- Cultural artifact tracking
|
||||
- Community health scoring
|
||||
- Collaboration and creativity metrics
|
||||
- Behavioral pattern analysis
|
||||
|
||||
### ⚙️ System Controls
|
||||
- Real-time system monitoring
|
||||
- Configuration management
|
||||
- Performance optimization
|
||||
- Safety and moderation tools
|
||||
|
||||
## Technology Stack
|
||||
|
||||
- **Frontend**: React 18 + TypeScript
|
||||
- **Styling**: Tailwind CSS + Headless UI
|
||||
- **State Management**: React Context + Hooks
|
||||
- **Charts**: Recharts for data visualization
|
||||
- **Icons**: Lucide React
|
||||
- **HTTP Client**: Axios
|
||||
- **Real-time**: Socket.io client
|
||||
- **Routing**: React Router v6
|
||||
- **Forms**: React Hook Form + Zod validation
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Prerequisites
|
||||
- Node.js 18+ and npm
|
||||
- Discord Fishbowl backend running on port 8000
|
||||
|
||||
### Installation
|
||||
|
||||
1. Navigate to the admin frontend directory:
|
||||
```bash
|
||||
cd admin-frontend
|
||||
```
|
||||
|
||||
2. Install dependencies:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. Start the development server:
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
4. Open [http://localhost:3000/admin](http://localhost:3000/admin) in your browser.
|
||||
|
||||
### Default Login
|
||||
- **Username**: admin
|
||||
- **Password**: admin123
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/ # Reusable UI components
|
||||
│ ├── Common/ # Generic components (LoadingSpinner, etc.)
|
||||
│ ├── Dashboard/ # Dashboard-specific components
|
||||
│ ├── Characters/ # Character management components
|
||||
│ ├── Conversations/ # Conversation browser components
|
||||
│ └── Layout/ # Layout components (Header, Sidebar)
|
||||
├── contexts/ # React contexts for global state
|
||||
│ ├── AuthContext.tsx # Authentication state
|
||||
│ └── WebSocketContext.tsx # Real-time updates
|
||||
├── pages/ # Main page components
|
||||
│ ├── Dashboard.tsx # Main dashboard
|
||||
│ ├── Characters.tsx # Character listing
|
||||
│ ├── Analytics.tsx # Analytics dashboard
|
||||
│ └── ...
|
||||
├── services/ # API and external services
|
||||
│ └── api.ts # API client with endpoints
|
||||
└── types/ # TypeScript type definitions
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
### Available Scripts
|
||||
|
||||
- `npm start` - Start development server
|
||||
- `npm build` - Build for production
|
||||
- `npm test` - Run tests
|
||||
- `npm run eject` - Eject from Create React App
|
||||
|
||||
### Environment Variables
|
||||
|
||||
Create a `.env` file in the admin-frontend directory:
|
||||
|
||||
```
|
||||
REACT_APP_API_URL=http://localhost:8000/api
|
||||
REACT_APP_WS_URL=ws://localhost:8000/ws
|
||||
```
|
||||
|
||||
## API Integration
|
||||
|
||||
The admin interface communicates with the FastAPI backend through:
|
||||
|
||||
- **REST API**: CRUD operations and data retrieval
|
||||
- **WebSocket**: Real-time updates for activity feeds and metrics
|
||||
- **Authentication**: JWT-based session management
|
||||
|
||||
Key API endpoints:
|
||||
- `/api/dashboard/*` - Dashboard metrics and activity
|
||||
- `/api/characters/*` - Character management
|
||||
- `/api/conversations/*` - Conversation browsing
|
||||
- `/api/analytics/*` - Community insights
|
||||
- `/api/system/*` - System controls
|
||||
|
||||
## Features in Development
|
||||
|
||||
### Phase 2 (Analytics & Insights)
|
||||
- Advanced relationship network visualization
|
||||
- Topic trend analysis with NLP
|
||||
- Predictive analytics for character behavior
|
||||
- Community health scoring algorithms
|
||||
|
||||
### Phase 3 (Management Tools)
|
||||
- Character personality editor
|
||||
- Conversation intervention tools
|
||||
- Memory management interface
|
||||
- Backup and restore functionality
|
||||
|
||||
### Phase 4 (Advanced Features)
|
||||
- Content moderation dashboard
|
||||
- A/B testing for character modifications
|
||||
- Export and reporting tools
|
||||
- Mobile-responsive design improvements
|
||||
|
||||
## Contributing
|
||||
|
||||
1. Follow the existing code style and TypeScript patterns
|
||||
2. Use functional components with hooks
|
||||
3. Implement proper error handling and loading states
|
||||
4. Write meaningful commit messages
|
||||
5. Test thoroughly before submitting changes
|
||||
|
||||
## Architecture Notes
|
||||
|
||||
### State Management
|
||||
- Global state via React Context (Auth, WebSocket)
|
||||
- Local component state for UI interactions
|
||||
- Server state cached via React Query (future enhancement)
|
||||
|
||||
### Real-time Updates
|
||||
- WebSocket connection for live activity feeds
|
||||
- Automatic reconnection handling
|
||||
- Toast notifications for important events
|
||||
|
||||
### Security
|
||||
- JWT token authentication with automatic refresh
|
||||
- Protected routes with auth guards
|
||||
- CORS protection and API rate limiting
|
||||
|
||||
### Performance
|
||||
- Code splitting and lazy loading
|
||||
- Optimized re-renders with React.memo
|
||||
- Efficient WebSocket message handling
|
||||
- Image optimization and caching
|
||||
Reference in New Issue
Block a user