{"id":42598275,"url":"https://github.com/agentsystems/agentsystems-ui","last_synced_at":"2026-01-29T00:13:36.560Z","repository":{"id":315327429,"uuid":"1038714826","full_name":"agentsystems/agentsystems-ui","owner":"agentsystems","description":"Web interface for agent management and monitoring","archived":false,"fork":false,"pushed_at":"2025-10-31T10:55:53.000Z","size":963,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-31T12:20:26.856Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://agentsystems.ai","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agentsystems.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-15T17:38:04.000Z","updated_at":"2025-10-31T10:43:19.000Z","dependencies_parsed_at":"2025-09-18T01:20:58.413Z","dependency_job_id":"8cba648b-b5f0-4add-bdee-6b29b6c1d9ec","html_url":"https://github.com/agentsystems/agentsystems-ui","commit_stats":null,"previous_names":["agentsystems/agentsystems-ui"],"tags_count":51,"template":false,"template_full_name":null,"purl":"pkg:github/agentsystems/agentsystems-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agentsystems%2Fagentsystems-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agentsystems%2Fagentsystems-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agentsystems%2Fagentsystems-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agentsystems%2Fagentsystems-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agentsystems","download_url":"https://codeload.github.com/agentsystems/agentsystems-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agentsystems%2Fagentsystems-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28857232,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T22:56:21.783Z","status":"ssl_error","status_checked_at":"2026-01-28T22:56:00.861Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-29T00:13:35.651Z","updated_at":"2026-01-29T00:13:36.548Z","avatar_url":"https://github.com/agentsystems.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AgentSystems UI\n\n[![GitHub stars](https://img.shields.io/github/stars/agentsystems/agentsystems?style=flat-square\u0026logo=github)](https://github.com/agentsystems/agentsystems/stargazers)\n[![Build Status](https://img.shields.io/github/actions/workflow/status/agentsystems/agentsystems-ui/ci.yml?branch=main)](https://github.com/agentsystems/agentsystems-ui/actions)\n\n\u003e [!NOTE]\n\u003e **Pre-Release Software** - AgentSystems is in active development. Join our [Discord](https://discord.com/invite/JsxDxQ5zfV) for updates and early access.\n\u003e ⭐ [**Star the main repository**](https://github.com/agentsystems/agentsystems) to show your support!\n\n\u003e This is the **web interface** for AgentSystems. See the [main repository](https://github.com/agentsystems/agentsystems) for platform overview and documentation.\n[![TypeScript](https://img.shields.io/badge/typescript-strict-blue)](https://www.typescriptlang.org/)\n\nA self-hostable web interface for the AgentSystems platform. Built with modern React patterns and TypeScript.\n\n## Features\n\n### 🎨 **Professional Theming**\n- **Dark Theme**: Professional dark interface with electric cyan accents\n- **Light Theme**: Clean, bright interface for daytime use  \n- **Cyber Theme**: Retro terminal aesthetic with matrix effects and authentic audio feedback\n\n### 🚀 **Core Functionality**\n- 📊 **Real-time Dashboard**: Live agent monitoring with system metrics\n- 🤖 **Agent Management**: Discover, start, stop, and invoke agents\n- 📝 **Live Logs**: Stream real-time logs with filtering and search\n- ⚙️ **Settings**: Configuration with validation and security checks\n- 🔄 **File Uploads**: Support for agent file processing workflows\n\n### 🛡️ **Security Features**\n- 🔒 **Input Sanitization**: Configured with XSS protection and input filtering\n- 🚦 **Rate Limiting**: Configured for abuse prevention on forms and API calls\n- 🔐 **Authentication**: Token-handling practices (no hardcoded credentials)\n- 📋 **Form Validation**: Client-side validation with user feedback\n\n### ♿ **Accessibility Excellence**\n- **Accessibility**: Aims to meet WCAG 2.1 guidelines; includes screen-reader and keyboard navigation support\n- **Skip Links**: Quick navigation for assistive technology users\n- **ARIA Labels**: Comprehensive labeling for all interactive elements\n- **Semantic HTML**: Proper landmark and heading structure\n\n### 🧪 **Quality Assurance**\n- **Error Boundaries**: Graceful failure handling with user-friendly error messages\n- **Performance Optimized**: Efficient rendering and state management\n\n## 🛠️ Tech Stack\n\n- **Frontend**: React 18 + TypeScript (strict mode)\n- **Build Tool**: Vite with optimized production builds\n- **Styling**: CSS Modules + CSS Variables (theme system)\n- **State Management**: Zustand with persistence\n- **Data Fetching**: TanStack Query with caching and error handling\n- **Routing**: React Router v6 with lazy loading support\n- **Testing**: Vitest + React Testing Library\n- **Security**: Input sanitization and validation\n- **Container**: Multi-stage Docker builds with nginx Alpine\n- **Audio**: Web Audio API for cyber theme sound effects\n\n## Quick Start\n\n### Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n# Build for production\nnpm run build\n```\n\n### Docker\n\n```bash\n# Build the image\ndocker build -t agentsystems-ui:latest .\n\n# Run the container\ndocker run -d \\\n  -p 3001:80 \\\n  -e API_GATEWAY_URL=http://localhost:18080 \\\n  -e WS_ENDPOINT_URL=ws://localhost:18080 \\\n  agentsystems-ui:latest\n```\n\n### Docker Compose\n\n```bash\n# Start with docker-compose\ndocker-compose up -d\n\n# Access the UI\nopen http://localhost:3001\n```\n\n## Environment Variables\n\n| Variable | Default | Description |\n|----------|---------|-------------|\n| `API_GATEWAY_URL` | `http://localhost:18080` | AgentSystems gateway URL |\n| `WS_ENDPOINT_URL` | `ws://localhost:18080` | WebSocket endpoint for real-time updates |\n\n## Project Structure\n\n```\nagentsystems-ui/\n├── src/\n│   ├── api/            # API client and endpoints\n│   ├── components/     # Reusable React components\n│   ├── hooks/          # Custom React hooks\n│   ├── pages/          # Route pages\n│   ├── stores/         # Zustand state stores\n│   ├── styles/         # Global styles and themes\n│   └── types/          # TypeScript type definitions\n├── docker/             # Docker configuration\n├── public/             # Static assets\n└── package.json\n```\n\n## Integration with AgentSystems\n\nThe UI integrates with other AgentSystems components:\n\n- **Agent Control Plane**: Connects to the gateway API on port 18080\n- **Agent Discovery**: Auto-discovers and displays available agents\n- **Invocation**: Supports sync/async agent invocation with progress tracking\n- **Artifacts**: Handles file uploads and downloads through the gateway\n- **Audit Logs**: Displays hash-chained audit logs for operation tracking\n\n## Development\n\n### Prerequisites\n\n- Node.js 20+\n- npm or yarn\n- Running AgentSystems gateway (port 18080)\n\n### Commands\n\n```bash\n# Install dependencies\nnpm install\n\n# Start dev server with hot reload\nnpm run dev\n\n# Type checking\nnpm run type-check\n\n# Linting\nnpm run lint\n\n# Run test suite\nnpm test\n\n# Test with UI dashboard\nnpm run test:ui\n\n# Coverage report\nnpm run test:coverage\n\n# Build for production\nnpm run build\n\n# Preview production build\nnpm run preview\n```\n\n### Testing\n\nThe application includes a test suite:\n\n- **Component Tests**: UI components include test coverage\n- **Integration Tests**: Page-level functionality verification\n- **Security Tests**: Input sanitization and validation testing\n- **Accessibility tests**: Automated checks against WCAG 2.1 rules\n- **API Tests**: Client functionality and error handling\n\nRun `npm test` to execute the test suite.\n\n## 🎨 Themes \u0026 Customization\n\nThe UI supports three professionally designed themes:\n\n### **Dark Theme** (Default)\n- Deep space color palette with electric cyan accents\n- Subtle gradient backgrounds for depth\n- Optimized for extended use and eye comfort\n\n### **Light Theme**\n- Clean, bright interface perfect for daytime work\n- High contrast for excellent readability\n- Professional appearance for business environments\n\n### **Cyber Theme** 🎮\n- Authentic retro terminal aesthetic with matrix-inspired effects\n- **Dynamic scanline effects** with customizable frequency (30s/90s/300s)\n- **Audio feedback** with synthesized terminal click sounds (Web Audio API)\n- **Terminal typography** with monospace fonts throughout\n- Perfect for developers who want that classic hacker movie experience\n\nAll themes use CSS custom properties for easy customization and aim to align with WCAG 2.1 accessibility guidelines.\n\n## 🔒 Security Features\n\n- **Input Sanitization**: User inputs are sanitized to help prevent XSS attacks\n- **Rate Limiting**: Configured to help protect against form spam and API abuse\n- **Security headers**: CSRF protection and content-type validation\n- **Authentication**: Token handling without hardcoded credentials\n- **JSON Validation**: Parsing and validation of agent payloads\n\n## 🤝 Contributing\n\nWe welcome contributions! The codebase is designed for easy contribution with:\n\n- **Test coverage** - Changes are protected by tests\n- **TypeScript strict mode** - Catch errors at compile time\n- **ESLint + Prettier** - Consistent code formatting\n- **Comprehensive documentation** - JSDoc comments throughout\n\n### Development Workflow\n\n1. **Fork the repository**\n2. **Install dependencies**: `npm install`\n3. **Run tests**: `npm test`\n4. **Start development**: `npm run dev`\n5. **Create feature branch**: `git checkout -b feature/amazing-feature`\n6. **Make changes** with tests\n7. **Verify quality**: `npm run lint \u0026\u0026 npm run type-check \u0026\u0026 npm test`\n8. **Commit changes**: `git commit -m 'Add amazing feature'`\n9. **Push to branch**: `git push origin feature/amazing-feature`\n10. **Open Pull Request**\n\n### Code Standards\n\n- All new components must include TypeScript interfaces and JSDoc documentation\n- Add tests for new functionality\n- Follow accessibility guidelines (ARIA labels, keyboard navigation)\n- Security: Sanitize all user inputs and validate forms\n- UI: Support all three themes (Dark, Light, Cyber)\n\n## Links\n\n- [AgentSystems Main Repository](https://github.com/agentsystems/agentsystems)\n- [Agent Control Plane](https://github.com/agentsystems/agent-control-plane)\n- [AgentSystems SDK](https://github.com/agentsystems/agentsystems-sdk)\n\n## License\n\nLicensed under the [Apache-2.0 license](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagentsystems%2Fagentsystems-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagentsystems%2Fagentsystems-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagentsystems%2Fagentsystems-ui/lists"}