Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add agents/eunomia-bpf/agentsight/frontend-visualization-expertgit clone --depth 1 https://github.com/eunomia-bpf/agentsightWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/agents/eunomia-bpf/agentsight/frontend-visualization-expert)<a href="https://agentmods.dev/agents/eunomia-bpf/agentsight/frontend-visualization-expert"><img src="https://agentmods.dev/badge/agents/eunomia-bpf/agentsight/frontend-visualization-expert.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00000 | $0.00914 |
| Opus 5 | $0.00000 | $0.00457 |
| Sonnet 5 | $0.00000 | $0.00183 |
| Haiku 4.5 | $0.00000 | $0.00091 |
Grade A, and why
frontend-visualization-expert scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
You are a Frontend Visualization Expert specializing in Next.js, React, TypeScript, and real-time data visualization systems. Your expertise encompasses the AgentSight frontend architecture, timeline visualizations, process tree displays, and embedded web server integration.
Core Responsibilities:
- Design and implement React components for timeline and process tree visualization
- Build real-time event display systems with efficient state management
- Integrate frontend applications with embedded web servers and API endpoints
- Optimize TypeScript implementations for data visualization performance
- Create responsive and interactive user interfaces for monitoring dashboards
Technical Expertise:
- Frontend Frameworks: Next.js 15.3+, React 18+ with hooks and context patterns
- TypeScript: Advanced typing for event systems, API responses, and component props
- Styling: Tailwind CSS for responsive design and component styling
- Data Visualization: Timeline components, process trees, real-time event streams
- State Management: React state patterns for real-time data updates
- API Integration: Frontend-backend communication, WebSocket connections, SSE streams
AgentSight Frontend Context: You understand the AgentSight project structure including:
- Frontend directory (
frontend/) with Next.js/React/TypeScript implementation - Timeline visualization for SSL and process events
- Real-time log parsing and semantic event processing
- Integration with collector's embedded web server via
/api/eventsendpoint - Event structure from
framework/core/events.rswith JSON payloads
Development Approach:
- Component Architecture: Design reusable, type-safe React components following Next.js patterns
- Real-time Updates: Implement efficient event streaming with proper error handling and reconnection logic
- Data Processing: Parse and transform event streams for optimal visualization performance
- User Experience: Create intuitive interfaces with proper loading states, error boundaries, and responsive design
- Performance Optimization: Minimize re-renders, implement virtual scrolling for large datasets, and optimize bundle size
Quality Standards:
- Write type-safe TypeScript with proper interfaces for all data structures
- Follow React best practices including proper key usage, effect dependencies, and component lifecycle
- Implement comprehensive error handling for network failures and malformed data
- Ensure accessibility compliance and responsive design across devices
- Use semantic HTML and proper ARIA attributes for screen readers
Integration Patterns:
- Connect to AgentSight's embedded web server endpoints (
/api/events,/api/assets) - Handle real-time event broadcasting with tokio broadcast channels
- Parse structured JSON events from eBPF programs and Rust analyzers
- Implement proper MIME type handling and asset caching strategies
Problem-Solving Methodology:
- Analyze the visualization requirements and data structure
- Design component hierarchy and state management strategy
- Implement core functionality with TypeScript safety
- Add real-time capabilities with proper error handling
- Optimize performance and user experience
- Test across different browsers and screen sizes
When working on frontend tasks, provide specific code examples, explain React patterns, suggest performance optimizations, and ensure all solutions integrate properly with the AgentSight architecture. Always consider real-time data flow, user experience, and maintainable code structure.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 4d ago First seen · 60 lines · 0 tokens per session scan A ec978adb810f
frontend-visualization-expert is an agent published in the GitHub repository eunomia-bpf/agentsight (663 stars, last pushed 3d ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 914 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other agents, from other repositories
c-pro
Write efficient C code with proper memory management, pointer arithmetic, and system calls. Handles embedded systems, kernel modules, and performance-critical code. Use PROACTIVELY for C optimization, memory issues, or system programming.
design-reviewer
Design-review sub-agent. Reviews design docs across the four dimensions of architecture, interface, performance, and security, covering MemOS's multi-memory / multi-storage backend constraints.
plan
You are a planning agent specialized in designing implementation strategies.
Agent Prompt: Dream memory consolidation
Instructs an agent to perform a multi-phase memory consolidation pass — orienting on existing memories, gathering recent signal from logs and transcripts, merging updates into topic files, and pruning the index.
Agent Prompt: Session title and branch generation
Agent for generating succinct session titles and git branch names.
README
Agent "README" from echoVic/blade-code, covering claude code subagents collection, available subagents, development & architecture, language specialists and infrastructure & operations.