vxcontrol/pentagi
1
0
Fork 0
mirror of https://github.com/vxcontrol/pentagi.git synced 2026-07-21 08:15:23 -04:00
Code Issues 45 Packages Projects Releases 9 Wiki Activity

[PR #211] [MERGED] Feature/frontend fix #240

New Issue
Closed
opened 2026-06-06 22:09:50 -04:00 by yindo · 0 comments
yindo commented 2026-06-06 22:09:50 -04:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/vxcontrol/pentagi/pull/211
Author: @sirozha
Created: 3/17/2026
Status: ✅ Merged
Merged: 3/17/2026
Merged by: @asdek

Base: master ← Head: feature/frontend-fix

📝 Commits (4)

📊 Changes

13 files changed (+666 additions, -686 deletions)

View changed files

📝 frontend/package-lock.json (+26 -2)
📝 frontend/src/features/flows/agents/flow-agents.tsx (+33 -23)
📝 frontend/src/features/flows/messages/flow-assistant-messages.tsx (+21 -26)
📝 frontend/src/features/flows/messages/flow-automation-messages.tsx (+9 -5)
📝 frontend/src/features/flows/screenshots/flow-screenshots.tsx (+36 -9)
📝 frontend/src/features/flows/tasks/flow-task.tsx (+2 -2)
📝 frontend/src/features/flows/tasks/flow-tasks.tsx (+34 -10)
📝 frontend/src/features/flows/tools/flow-tools.tsx (+33 -23)
📝 frontend/src/features/flows/vector-stores/flow-vector-stores.tsx (+33 -24)
➕ frontend/src/hooks/use-auto-scroll.ts (+127 -0)
➖ frontend/src/hooks/use-chat-scroll.ts (+0 -166)
📝 frontend/src/lib/apollo.ts (+309 -394)
📝 frontend/src/providers/flow-provider.tsx (+3 -2)

📄 Description

Description of the Change

Problem

Critical data inconsistency bugs when working with multiple flows:

PAGI-61: Cache pollution between flows

  • When a flow was opened and cached in Apollo Client, messages, tasks, and logs from newly created flows leaked into the cached flow
  • Switching between multiple flows without page refresh caused incorrect data to appear in message logs and task lists
  • Root cause: Apollo Client cache updates and subscriptions were not properly isolated by flow ID

PAGI-64: Excessive re-renders in task list

  • Task list components re-rendered unnecessarily on every update
  • Caused performance degradation and visual flickering
  • Contributed to cache inconsistency issues

Solution

Apollo Client Architecture Refactoring:

  • Restructured apollo.ts with clear separation of concerns: constants, types, pure utilities, link helpers
  • Improved subscription handling with proper cache isolation
  • Enhanced streaming assistant log processing with functional approach
  • Better cache key management to prevent cross-flow contamination

Auto-scroll State Isolation:

  • Created new useAutoScroll hook with flow-specific state tracking via resetKey parameter
  • Replaced deprecated use-chat-scroll that didn't properly reset state between flows
  • Each flow maintains independent scroll position and message indicators
  • Prevents state leakage when switching between flows

Optimized Re-rendering:

  • Fixed task completion calculation to include both Finished and Failed statuses
  • Reduced unnecessary component updates through better memoization
  • Migrated 7 flow components to use optimized auto-scroll hook

Closes PAGI-61, PAGI-64

Type of Change

  • 🐛 Bug fix (non-breaking change which fixes an issue)
  • 🔄 Code refactoring (restructuring existing code without changing behavior)
  • 🚀 New feature (non-breaking change which adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • 📚 Documentation update
  • 🔧 Configuration change
  • 🧪 Test update
  • 🛡️ Security update

Areas Affected

  • Core Services (Frontend UI/Backend API)
  • AI Agents (Researcher/Developer/Executor)
  • Security Tools Integration
  • Memory System (Vector Store/Knowledge Base)
  • Monitoring Stack (Grafana/OpenTelemetry)
  • Analytics Platform (Langfuse)
  • External Integrations (LLM/Search APIs)
  • Documentation
  • Infrastructure/DevOps

Testing and Verification

Test Configuration

PentAGI Version: Latest development
Docker: 24.0.x
Host OS: macOS/Linux
LLM Provider: OpenAI, Anthropic
Enabled Features: Core

Test Steps

  1. Cache isolation test (PAGI-61):
    • Created first flow, observed messages/tasks/logs
    • Created second flow without page refresh
    • Switched back to first flow
    • Verified no data leakage from second flow
    • Repeated with 3+ flows
  2. Apollo Client streaming:
    • Verified assistant log updates arrive correctly
    • Confirmed streaming parts accumulate only for correct flow
    • Tested cache clearing on flow switch
  3. Auto-scroll behavior:
    • Tested scroll-to-bottom on new messages per flow
    • Verified manual scroll up/down behavior
    • Confirmed "New messages" indicator per flow
    • Tested reset when switching flows
  4. Progress calculation (PAGI-64):
    • Created flows with mixed success/failure tasks
    • Verified progress bars show correct percentages
    • Confirmed no unnecessary re-renders

Test Results

  • ✅ PAGI-61 FIXED: No data leakage between flows - each flow maintains isolated state
  • ✅ PAGI-64 FIXED: Task list re-renders reduced significantly
  • ✅ All existing frontend tests pass
  • ✅ Apollo Client cache properly isolated by flow ID
  • ✅ Auto-scroll state independent per flow
  • ✅ Message logs, tasks, and screenshots show correct data
  • ✅ npm run lint passed

Security Considerations

No Security Impact:

  • Frontend-only refactoring
  • No authentication or authorization changes
  • No new dependencies introduced
  • Cache isolation prevents potential data leakage between flows (security improvement)

Performance Impact

Improvements:

  • Reduced re-renders: Task list updates now trigger minimal re-renders
  • Better memory management: Proper cache isolation prevents memory leaks
  • Optimized scroll handling: New auto-scroll hook uses efficient event handling (2px threshold)
  • Cleaner code: Simplified Apollo Client logic improves bundle size

Testing:

  • Tested with 5+ concurrent flows without page refresh
  • No performance degradation observed
  • Memory usage stable when switching between flows
  • Subscription handling remains responsive

Documentation Updates

  • README.md updates
  • API documentation updates
  • Configuration documentation updates
  • GraphQL schema updates
  • Other

Deployment Notes

No Special Requirements:

  • Frontend-only changes
  • No environment variables
  • No database migrations
  • No configuration changes

Deployment Steps:

  1. Pull latest changes
  2. Rebuild frontend: docker compose build frontend
  3. Restart: docker compose up -d

Backward Compatibility:

  • ✅ Fully backward compatible
  • ✅ No breaking changes
  • ✅ Existing flows work correctly

Checklist

Code Quality

  • My code follows the project's coding standards
  • I have added/updated necessary documentation
  • I have added tests to cover my changes
  • All new and existing tests pass
  • I have run go fmt and go vet (for Go code)
  • I have run npm run lint (for TypeScript/JavaScript code)

Security

  • I have considered security implications
  • Changes maintain or improve the security model
  • Sensitive information has been properly handled

Compatibility

  • Changes are backward compatible
  • Breaking changes are clearly marked and documented (no breaking changes)
  • Dependencies are properly updated (no dependency changes)

Documentation

  • Documentation is clear and complete
  • Comments are added for non-obvious code
  • API changes are documented (no API changes)

Additional Notes

Key Changes by Category

Cache Isolation Fix (PAGI-61)

Root Cause:
When users created multiple flows and switched between them without page refresh, Apollo Client cache was not properly isolating data by flow ID. This caused:

  • Messages from Flow B appearing in Flow A's message log
  • Tasks from newly created flows appearing in cached flows
  • Vector store logs mixing between different flows

File: frontend/src/lib/apollo.ts

  • Reorganized with clear structure:
    • Constants: GRAPHQL_ENDPOINT, ASSISTANT_LOG_TYPENAME, cache settings
    • Types: StreamingLogEntry, SubscriptionAction
    • Pure utilities: concatStrings, resolveSubscriptionAction, isSubscriptionOperation
    • Link helpers: createInterceptLink for cleaner subscription handling
  • Improved subscription result processing with better cache key management
  • Enhanced streaming assistant log handling with functional approach
  • Result: 338 insertions, 398 deletions (net -60 lines, cleaner code)

State Isolation via Auto-scroll Rewrite (PAGI-61)

Old Hook Issues (use-chat-scroll):

  • Shared state across different flows
  • Didn't properly reset when switching flows
  • Caused scroll position and message indicators to leak between flows

New Hook: frontend/src/hooks/use-auto-scroll.ts

  • Generic: Supports any list of identifiable items
  • Flow-isolated: Uses resetKey parameter (typically flow ID) to reset state
  • Features:
    • Scroll-to-bottom detection (2px threshold)
    • "New messages" indicator (per-flow)
    • Smooth scroll animations with jank prevention
    • Proper cleanup when switching flows
  • Result: Each flow maintains independent scroll state

Components Migrated (7 files):

  • flow-agents.tsx - Agent execution list
  • flow-assistant-messages.tsx - AI assistant conversations
  • flow-automation-messages.tsx - System automation logs
  • flow-screenshots.tsx - Screenshot gallery
  • flow-tasks.tsx - Task list view
  • flow-tools.tsx - Tool execution results
  • flow-vector-stores.tsx - Vector store operations

Re-render Optimization (PAGI-64)

File: frontend/src/features/flows/tasks/flow-task.tsx

  • Before: Only counted StatusType.Finished subtasks for completion
  • After: Counts both StatusType.Finished and StatusType.Failed
  • Impact:
    • Progress calculation now triggers fewer updates
    • Completed tasks (regardless of success/failure) properly reflected
    • Reduced unnecessary component re-renders in task list

Reproduction Steps (Before Fix)

To reproduce the original bugs:

  1. Create Flow A, observe messages/tasks
  2. Create Flow B without page refresh
  3. Switch back to Flow A
  4. Bug: Flow A shows messages/tasks from Flow B

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/vxcontrol/pentagi/pull/211 **Author:** [@sirozha](https://github.com/sirozha) **Created:** 3/17/2026 **Status:** ✅ Merged **Merged:** 3/17/2026 **Merged by:** [@asdek](https://github.com/asdek) **Base:** `master` ← **Head:** `feature/frontend-fix` --- ### 📝 Commits (4) - [`64cc993`](https://github.com/vxcontrol/pentagi/commit/64cc9936d25cefb7a4a23ae897991fd52f5971fe) fix: PAGI-61 - [`713b5b5`](https://github.com/vxcontrol/pentagi/commit/713b5b5095e8263f5dec16345b87f7a0a8bf00f3) fix: PAGI-64 - [`b8b7a2c`](https://github.com/vxcontrol/pentagi/commit/b8b7a2cc8f561f1b372c47af92bd207aba548573) fix: PAGI-61 - [`3380d0c`](https://github.com/vxcontrol/pentagi/commit/3380d0c3bcecedc89f6a627ede4446f6db2e74b9) Merge branch 'master' into feature/frontend-fix ### 📊 Changes **13 files changed** (+666 additions, -686 deletions) <details> <summary>View changed files</summary> 📝 `frontend/package-lock.json` (+26 -2) 📝 `frontend/src/features/flows/agents/flow-agents.tsx` (+33 -23) 📝 `frontend/src/features/flows/messages/flow-assistant-messages.tsx` (+21 -26) 📝 `frontend/src/features/flows/messages/flow-automation-messages.tsx` (+9 -5) 📝 `frontend/src/features/flows/screenshots/flow-screenshots.tsx` (+36 -9) 📝 `frontend/src/features/flows/tasks/flow-task.tsx` (+2 -2) 📝 `frontend/src/features/flows/tasks/flow-tasks.tsx` (+34 -10) 📝 `frontend/src/features/flows/tools/flow-tools.tsx` (+33 -23) 📝 `frontend/src/features/flows/vector-stores/flow-vector-stores.tsx` (+33 -24) ➕ `frontend/src/hooks/use-auto-scroll.ts` (+127 -0) ➖ `frontend/src/hooks/use-chat-scroll.ts` (+0 -166) 📝 `frontend/src/lib/apollo.ts` (+309 -394) 📝 `frontend/src/providers/flow-provider.tsx` (+3 -2) </details> ### 📄 Description <!-- Thank you for your contribution to PentAGI! Please fill out this template completely to help us review your changes effectively. Any PR that does not include enough information may be closed at maintainers' discretion. --> ### Description of the Change #### Problem Critical data inconsistency bugs when working with multiple flows: **PAGI-61: Cache pollution between flows** - When a flow was opened and cached in Apollo Client, messages, tasks, and logs from newly created flows leaked into the cached flow - Switching between multiple flows without page refresh caused incorrect data to appear in message logs and task lists - Root cause: Apollo Client cache updates and subscriptions were not properly isolated by flow ID **PAGI-64: Excessive re-renders in task list** - Task list components re-rendered unnecessarily on every update - Caused performance degradation and visual flickering - Contributed to cache inconsistency issues #### Solution **Apollo Client Architecture Refactoring:** - Restructured `apollo.ts` with clear separation of concerns: constants, types, pure utilities, link helpers - Improved subscription handling with proper cache isolation - Enhanced streaming assistant log processing with functional approach - Better cache key management to prevent cross-flow contamination **Auto-scroll State Isolation:** - Created new `useAutoScroll` hook with flow-specific state tracking via `resetKey` parameter - Replaced deprecated `use-chat-scroll` that didn't properly reset state between flows - Each flow maintains independent scroll position and message indicators - Prevents state leakage when switching between flows **Optimized Re-rendering:** - Fixed task completion calculation to include both `Finished` and `Failed` statuses - Reduced unnecessary component updates through better memoization - Migrated 7 flow components to use optimized auto-scroll hook Closes PAGI-61, PAGI-64 ### Type of Change <!-- Mark with an `x` all options that apply --> - [x] 🐛 Bug fix (non-breaking change which fixes an issue) - [x] 🔄 Code refactoring (restructuring existing code without changing behavior) - [ ] 🚀 New feature (non-breaking change which adds functionality) - [ ] 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] 📚 Documentation update - [ ] 🔧 Configuration change - [ ] 🧪 Test update - [ ] 🛡️ Security update ### Areas Affected <!-- Mark with an `x` all components that are affected --> - [x] Core Services (Frontend UI/Backend API) - [ ] AI Agents (Researcher/Developer/Executor) - [ ] Security Tools Integration - [ ] Memory System (Vector Store/Knowledge Base) - [ ] Monitoring Stack (Grafana/OpenTelemetry) - [ ] Analytics Platform (Langfuse) - [ ] External Integrations (LLM/Search APIs) - [ ] Documentation - [ ] Infrastructure/DevOps ### Testing and Verification #### Test Configuration ```yaml PentAGI Version: Latest development Docker: 24.0.x Host OS: macOS/Linux LLM Provider: OpenAI, Anthropic Enabled Features: Core ``` #### Test Steps 1. **Cache isolation test (PAGI-61):** - Created first flow, observed messages/tasks/logs - Created second flow without page refresh - Switched back to first flow - Verified no data leakage from second flow - Repeated with 3+ flows 2. **Apollo Client streaming:** - Verified assistant log updates arrive correctly - Confirmed streaming parts accumulate only for correct flow - Tested cache clearing on flow switch 3. **Auto-scroll behavior:** - Tested scroll-to-bottom on new messages per flow - Verified manual scroll up/down behavior - Confirmed "New messages" indicator per flow - Tested reset when switching flows 4. **Progress calculation (PAGI-64):** - Created flows with mixed success/failure tasks - Verified progress bars show correct percentages - Confirmed no unnecessary re-renders #### Test Results - ✅ **PAGI-61 FIXED**: No data leakage between flows - each flow maintains isolated state - ✅ **PAGI-64 FIXED**: Task list re-renders reduced significantly - ✅ All existing frontend tests pass - ✅ Apollo Client cache properly isolated by flow ID - ✅ Auto-scroll state independent per flow - ✅ Message logs, tasks, and screenshots show correct data - ✅ `npm run lint` passed ### Security Considerations **No Security Impact:** - Frontend-only refactoring - No authentication or authorization changes - No new dependencies introduced - Cache isolation prevents potential data leakage between flows (security improvement) ### Performance Impact **Improvements:** - **Reduced re-renders**: Task list updates now trigger minimal re-renders - **Better memory management**: Proper cache isolation prevents memory leaks - **Optimized scroll handling**: New auto-scroll hook uses efficient event handling (2px threshold) - **Cleaner code**: Simplified Apollo Client logic improves bundle size **Testing:** - Tested with 5+ concurrent flows without page refresh - No performance degradation observed - Memory usage stable when switching between flows - Subscription handling remains responsive ### Documentation Updates <!-- Note any documentation changes required by this PR --> - [ ] README.md updates - [ ] API documentation updates - [ ] Configuration documentation updates - [ ] GraphQL schema updates - [ ] Other ### Deployment Notes **No Special Requirements:** - Frontend-only changes - No environment variables - No database migrations - No configuration changes **Deployment Steps:** 1. Pull latest changes 2. Rebuild frontend: `docker compose build frontend` 3. Restart: `docker compose up -d` **Backward Compatibility:** - ✅ Fully backward compatible - ✅ No breaking changes - ✅ Existing flows work correctly ### Checklist <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> #### Code Quality - [x] My code follows the project's coding standards - [ ] I have added/updated necessary documentation - [ ] I have added tests to cover my changes - [x] All new and existing tests pass - [ ] I have run `go fmt` and `go vet` (for Go code) - [x] I have run `npm run lint` (for TypeScript/JavaScript code) #### Security - [x] I have considered security implications - [x] Changes maintain or improve the security model - [x] Sensitive information has been properly handled #### Compatibility - [x] Changes are backward compatible - [ ] Breaking changes are clearly marked and documented (no breaking changes) - [x] Dependencies are properly updated (no dependency changes) #### Documentation - [x] Documentation is clear and complete - [x] Comments are added for non-obvious code - [ ] API changes are documented (no API changes) ### Additional Notes ## Key Changes by Category ### Cache Isolation Fix (PAGI-61) **Root Cause:** When users created multiple flows and switched between them without page refresh, Apollo Client cache was not properly isolating data by flow ID. This caused: - Messages from Flow B appearing in Flow A's message log - Tasks from newly created flows appearing in cached flows - Vector store logs mixing between different flows **File: `frontend/src/lib/apollo.ts`** - Reorganized with clear structure: - **Constants**: `GRAPHQL_ENDPOINT`, `ASSISTANT_LOG_TYPENAME`, cache settings - **Types**: `StreamingLogEntry`, `SubscriptionAction` - **Pure utilities**: `concatStrings`, `resolveSubscriptionAction`, `isSubscriptionOperation` - **Link helpers**: `createInterceptLink` for cleaner subscription handling - Improved subscription result processing with better cache key management - Enhanced streaming assistant log handling with functional approach - **Result**: 338 insertions, 398 deletions (net -60 lines, cleaner code) ### State Isolation via Auto-scroll Rewrite (PAGI-61) **Old Hook Issues (`use-chat-scroll`):** - Shared state across different flows - Didn't properly reset when switching flows - Caused scroll position and message indicators to leak between flows **New Hook: `frontend/src/hooks/use-auto-scroll.ts`** - **Generic**: Supports any list of identifiable items - **Flow-isolated**: Uses `resetKey` parameter (typically flow ID) to reset state - **Features**: - Scroll-to-bottom detection (2px threshold) - "New messages" indicator (per-flow) - Smooth scroll animations with jank prevention - Proper cleanup when switching flows - **Result**: Each flow maintains independent scroll state **Components Migrated (7 files):** - `flow-agents.tsx` - Agent execution list - `flow-assistant-messages.tsx` - AI assistant conversations - `flow-automation-messages.tsx` - System automation logs - `flow-screenshots.tsx` - Screenshot gallery - `flow-tasks.tsx` - Task list view - `flow-tools.tsx` - Tool execution results - `flow-vector-stores.tsx` - Vector store operations ### Re-render Optimization (PAGI-64) **File: `frontend/src/features/flows/tasks/flow-task.tsx`** - **Before**: Only counted `StatusType.Finished` subtasks for completion - **After**: Counts both `StatusType.Finished` and `StatusType.Failed` - **Impact**: - Progress calculation now triggers fewer updates - Completed tasks (regardless of success/failure) properly reflected - Reduced unnecessary component re-renders in task list ## Reproduction Steps (Before Fix) To reproduce the original bugs: 1. Create Flow A, observe messages/tasks 2. Create Flow B without page refresh 3. Switch back to Flow A 4. **Bug**: Flow A shows messages/tasks from Flow B --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
yindo added the pull-request label 2026-06-06 22:09:50 -04:00
yindo closed this issue 2026-06-06 22:09:50 -04:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
enhancement
help wanted
pull-request
Mirrored from GitHub Pull Request
 question
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: vxcontrol/pentagi#240
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?