mirror of
https://github.com/vxcontrol/pentagi.git
synced 2026-11-08 15:04:49 +00:00
Sergey KozyrenkoandClaude Opus 4.7
1a8b04aa0d
The inline create/edit row in the API tokens table used uncontrolled
<Input ref={…} defaultValue="…" /> and read the value back from the ref
inside the submit handler. When the apiTokens subscription fired during
the user's interaction, DataTable would reorder rows and the input would
re-mount with defaultValue="" (or the original name), discarding what
the user just typed. The mutation then sent name: null and the freshly
created token appeared as "(unnamed)".
Move both create and edit name inputs to controlled state, drop the
two refs, and read the value from form state at submit time so it
survives any number of re-mounts. While here, give each input a stable
useId() for id, an explicit name="token-name", and autoComplete="off"
to silence the "A form field element should have an id or name
attribute" Chrome DevTools issue that this form was triggering.
Verified via chrome-devtools MCP: creating a token named "qa-pr1-verify"
now stores and displays the name correctly across the
useApiTokenCreatedSubscription refetch.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
PentAGI Frontend
A chat application built with React, TypeScript, and GraphQL that enables intelligent conversations with AI agents.
Features
- 💬 Real-time chat interface with AI agents
- 🤖 Multiple AI agent support and management
- 📊 Real-time terminal output monitoring
- 🎯 Task and subtask tracking system
- 🔍 Integrated search capabilities
- 📚 Vector store for knowledge base management
- 📸 Screenshot capture and management
- 🌓 Dark/Light theme support
- 📱 Responsive design (mobile, tablet, desktop)
- 🔐 Authentication system with multiple providers
- 🔄 Real-time updates via GraphQL subscriptions
- ⚡ High-performance React components
Tech Stack
- Framework: React 18 with TypeScript
- Build Tool: Vite
- Styling: Tailwind CSS
- UI Components:
- shadcn/ui
- Radix UI primitives
- Lucide icons
- State Management:
- React Context
- Custom Hooks
- API Integration:
- GraphQL
- Apollo Client
- WebSocket subscriptions
- Type Safety: TypeScript
- Authentication: Multiple provider support
- Code Quality:
- ESLint
- Prettier
- TypeScript strict mode
Project Structure
src/ ├── components/ # Shared UI components │ ├── ui/ # Base UI components │ └── icons/ # SVG icons and logo ├── features/ # Feature-based modules │ ├── chat/ # Chat related components │ ├── authentication/ # Auth related components ├── hooks/ # Custom React hooks ├── lib/ # Utilities and configurations ├── graphql/ # GraphQL operations and types ├── models/ # TypeScript interfaces └── pages/ # Application routes
Key Components
Chat Interface
- Split view with messages and tools panels
- Resizable panels for desktop
- Mobile-optimized view with tabs
- Real-time message updates
Task System
- Real-time task tracking
- Subtask management
- Progress monitoring
- Status updates
Terminal
- Command output display
- Real-time updates
- Scrollable history
- Syntax highlighting
Vector Store
- Knowledge base integration
- Search capabilities
- Data management
Agent System
- Multi-agent support
- Agent status monitoring
- Agent communication logs
Development
Prerequisites
- Node.js 18+
- pnpm 10+
Installation
- Clone the repository
- Install dependencies: pnpm install
- Start the development server: pnpm run dev
Building for Production
pnpm run build
Environment Variables
Create a .env file in the root directory:
VITE_API_URL=your_api_url
Contributing
- Fork the repository
- Create your feature branch (git checkout -b feature/amazing-feature)
- Commit your changes (git commit -m 'Add some amazing feature')
- Push to the branch (git push origin feature/amazing-feature)
- Open a Pull Request