Portfolio Charts & Proactive Notifications#26
Merged
soomtochukwu merged 3 commits intoDXmakers:mainfrom Mar 30, 2026
Merged
Conversation
- Create custom SVG-based pie/donut chart component (zero external dependencies) - Add chartUtils for pie slice calculations and SVG path generation - Implement allocationParser to extract allocations from agent messages - Add hover tooltips showing asset name and percentage - Integrate color-coded legend matching theme colors - Update dashboard to display dynamic portfolio allocations - Add comprehensive CSS styling for chart, legend, and interactions - Chart automatically updates when strategy changes
Backend Components: - Create notification-service.ts: Monitors user goals and flags 'Falling Behind' status - Create websocket-server.ts: Real-time WebSocket server for pushing notifications to clients - Create agent-service.ts: Claude-powered message generation for proactive nudges - Create notification-monitor.ts: Service runner with goal monitoring every 5 minutes - Add test-notifications.ts: Integration test demonstrating the notification flow - Update package.json: Add 'ws' dependency and 'notifications' script Frontend Components: - Create useNotifications.ts: React hook for WebSocket connection management - Create suggestionHandler.ts: Utilities for parsing and applying proactive suggestions - Update page.tsx: Integrate notification hook, handle incoming agent messages - Display 'Proactive Nudge' indicator on agent-initiated messages - Add CSS styling for proactive notifications and status indicators Features: ✅ Backend detects 'Falling Behind' status and initiates proactive messages ✅ WebSocket broadcasts AI-generated suggestions to active frontend sessions ✅ Frontend receives notifications and displays as incoming agent messages ✅ OpenClaw proposes exact rebalancing with concrete contribution increases ✅ System includes automatic reconnection with exponential backoff ✅ Monitoring runs every 5 minutes only while clients are connected Environment: - Add .env.example with required variables (ANTHROPIC_API_KEY, NOTIFICATION_PORT, etc.) - Configure NEXT_PUBLIC_WS_URL for frontend WebSocket connection
|
@memplethee-lab Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
Contributor
|
@memplethee-lab, could you look into this? |
Contributor
|
Try one more time, copy the errors and feed it to your AI It's crucial that the CI/CD workflow passes/works Thanks |
Contributor
Author
Oh i dont even notice i will fix this |
…om SVGSVGElement to Element
Contributor
Author
|
@soomtochukwu Approve workflow |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
Implements actionable portfolio visualization and AI-driven proactive nudging to keep users on track with their savings goals.
Issues Addressed
1. Dynamic Portfolio Charts
Files:
frontend/src/app/PortfolioChart.tsx- SVG chart componentfrontend/src/utils/chartUtils.ts- Pie slice calculations & path generationfrontend/src/utils/allocationParser.ts- Extracts allocations from agent messagesfrontend/src/app/globals.css- Chart styling2. Proactive Notification Triggers
Files:
agent/notification-service.ts- Goal monitoring & message generationagent/websocket-server.ts- Real-time client managementagent/agent-service.ts- Claude API integrationagent/notification-monitor.ts- Service runnerfrontend/src/hooks/useNotifications.ts- WebSocket connection hookfrontend/src/utils/suggestionHandler.ts- Suggestion parsing utilitiesfrontend/src/app/page.tsx- Notification integration.env.example- Configuration templateAcceptance Criteria ✅
Testing
Run integration test:
Or test notifications specifically:
Environment Setup
Copy
.env.exampleto.envand set:ANTHROPIC_API_KEY- Claude API key for message generationNOTIFICATION_PORT- WebSocket server port (default: 3001)NEXT_PUBLIC_WS_URL- Frontend WebSocket URL (default: ws://localhost:3001)Notes
Charts use pure SVG (no Recharts, Plotly, etc.) → minimal bundle size
Notification monitoring runs every 5 minutes only while clients connected
WebSocket includes exponential backoff reconnection
Proactive messages display with "Proactive Nudge" badge for clarity
Closes Issue 5.3: Proactive Notification Triggers #16