mirror of
https://github.com/vxcontrol/pentagi.git
synced 2026-08-28 03:39:56 -04:00
Sergey Kozyrenko
c196e55d5d
Roll the truncate-chain + mobile-navigation pattern introduced for the /flows/:id page out to every other detail and list page so a long title never pushes the action buttons off-screen on a ~390px viewport. Detail pages - `templates/template.tsx` and `features/knowledges/knowledge-header.tsx` now mirror `pages/flows/flow.tsx`: left container becomes `flex min-w-0 flex-1` with `shrink-0` on the SidebarTrigger/Separator, Breadcrumb/BreadcrumbList/BreadcrumbItem get the `min-w-0` / `flex-nowrap` chain, BreadcrumbPage gets `truncate`, the right action area becomes `flex shrink-0`. InlineEditInput in both pages now uses `w-64 min-w-0 max-w-full flex-1` so the rename input shrinks with the parent instead of forcing it to ≥256px. - On `isMobile`, the DetailNavigationToolbar is hidden and re-surfaced inside the existing actions dropdown as a single row matching `pages/flows/flow.tsx` (icon + label + Prev/Position/Next button group with shared borders; middle button doubles as the sheet trigger). DetailNavigationSheet is mounted separately, controlled by `isMobileNavSheetOpen` state. List pages - `pages/flows/flows.tsx`, `pages/knowledges/knowledges.tsx`, `pages/templates/templates.tsx`, `pages/resources/resources.tsx`, and `pages/flows/new-flow.tsx` get the same header truncate chain preventively — most page titles are short, but the structure stays consistent across pages and protects against future longer labels. - `pages/templates/templates.tsx` Title cell gains `max-w-[380px] truncate` (matched to the existing Text-cell cap) so a long template title can't blow up the row. - Settings pages (`settings-providers.tsx`, `settings-api-tokens.tsx`) don't render a breadcrumb header — their `SettingsLayout` already shows the sidebar trigger — but their inline header rows still leaked on narrow screens. Add `min-w-0 flex-1 truncate` to the description text and `shrink-0` to the Create button so the right-edge CTA stays visible while the left text degrades gracefully. 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