Files
pentagi/frontend
Sergey KozyrenkoandClaude Opus 4.8 5e7dbb7441 fix(markdown-editor): escape URL pipes by cell-count, killing a table-row DoS
escapeRowPipes escaped pipes inside any `scheme://` run via a greedy
/[^\s]*:\/\/[^\s]*/g. Two bugs: (1) a long non-URL token (base64, a hash)
made that regex backtrack quadratically — 120k chars froze for ~11s on every
rich load, a stored, target-influenceable client-side DoS; (2) in a compact,
spaceless row like `|http://a.com|b|` the run swallowed the structural pipes
and escaped them, collapsing the row into one cell.

A URL pipe and a spaceless cell separator are indistinguishable in isolation,
so disambiguate by cell count: only escape scheme-run pipes when the row splits
into MORE cells than the header expects (a genuine phantom-cell URL pipe). A row
already at the right count keeps its structural pipes. The guard also skips the
scan on ordinary rows, and the replacement is a linear /\S+/g pass, so a long
token can no longer drive it superlinearly.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-07 19:00:25 +07:00
..
2026-03-26 06:16:07 +03:00
2026-03-26 06:16:07 +03:00
2026-03-26 06:16:07 +03:00
2026-03-26 06:16:07 +03:00
2026-03-26 06:16:07 +03:00
2026-04-21 01:59:08 +07:00

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

  1. Clone the repository
  2. Install dependencies: pnpm install
  3. 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

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request