feat: Add Network Health Overview cards to the /networks page with real-time status indicators

[alibabaedge]

What: Add Network Health Overview cards to the /networks page showing real-time ecosystem health metrics.

Why: Closes #552

How:

• Added getEcosystemHealthOverview() method to ChainService that aggregates per-ecosystem metrics: active chains count, average APR, total validators, and health percentage (based on chain uptime data availability)
• Created NetworkHealthOverview server component for data fetching and NetworkHealthCards client component for interactive card rendering
• Cards display ecosystem name with logo, active chains count, average APR, validator count, and a colored health indicator dot (green >= 80%, yellow >= 50%, red < 50%)
• Clicking a card filters the networks table below to that ecosystem; clicking again clears the filter
• URL updates with ?ecosystem= param for shareable state
• Cards are keyboard navigable (Tab + Enter) with ARIA labels for accessibility
• Added NetworkHealth localization namespace to all 3 locale files (EN, PT, RU)

Testing:

• ESLint: 0 errors (8 pre-existing warnings in unrelated files)
• JSON validation: all 3 locale files valid
• Playwright screenshot: verified cards render correctly with real data in dark theme

Screenshot:

[m1amgn]

AI Review Summary

PR Scope: This is a large PR with two distinct parts:

1. Agent infrastructure — Skills, workflows (pr-review.yml, pr-fix.yml, task-execute.yml), Docker setup, monitoring, and agent tooling
2. Feature — Network Health Overview cards on /networks page with ecosystem health data

Feature Code Assessment

The feature code is well-implemented:

• Follows the service layer pattern correctly (getEcosystemHealthOverview in chain-service.ts)
• Uses OwnProps interface pattern per project conventions
• All 3 locale files (en/pt/ru) updated with NetworkHealth namespace
• Proper accessibility (role="button", tabIndex, aria-label, aria-pressed, keyboard handlers)
• Uses cn() for conditional classes, project Tailwind tokens (bg-card, bg-bgHover, text-highlight, font-handjet, font-sfpro)
• Import paths are valid per tsconfig.json (@/app/* → ./src/app/[locale]/*, @/services/* → ./src/app/services/*)

Issues Found

[LOW] Unused import in network-health-overview.tsx:3
EcosystemHealthData is imported but never used in this file — it's only needed in network-health-cards.tsx.

[LOW] Typo in docs/networks.md
"Omsosis" appears twice (lines 23 and 23 of tags section) — should be "Osmosis".

[LOW] Binary screenshot committed
screenshots/issue-552.png is a binary file committed to the repo. Consider adding screenshots/ to .gitignore if these are only for PR verification.

No HIGH or MED issues found. The feature follows project architecture, the service layer is used correctly, i18n is complete, and the UI component matches existing design patterns.

[m1amgn]

/fix

src/app/[locale]/networks/network-health/network-health-cards.tsx that component should be SSR rendering component, in that card aren't functions which need CSR functionality

[m1amgn]

Now I have a comprehensive understanding of the PR. Let me write the review.

AI Review Summary

This PR adds two major components:

1. Network Health Overview cards on the /networks page with real-time ecosystem status indicators
2. AI Agent infrastructure — Claude Code skills, GitHub workflows for automated PR review/fix, Docker setup, and agent tooling

Feature Code (Network Health)

The network health feature is well-implemented:

• Follows project conventions: OwnProps, service layer pattern, cn(), SSR-first, proper i18n (all 3 locales updated)
• Uses @/services/chain-service correctly, no DB queries in components
• Import paths are valid per tsconfig.json aliases (@/app/networks/... maps to ./src/app/[locale]/networks/...)
• Accessibility is solid: aria-label, aria-pressed, aria-hidden
• Existing Tailwind design tokens used correctly: bg-card, hover:bg-bgHover, border-highlight, text-highlight, font-handjet, font-sfpro, border-bgSt

Issues Found

[MED] SQL injection risk in run-agent.sh and pr-fix.yml

In agents-tools/run-agent.sh, user-controlled values ($PROMPT, $AGENT, $ROLE, etc.) are interpolated directly into SQL strings with only single-quote escaping via sed "s/'/''/g". This is fragile — a prompt containing '); DROP TABLE agent_runs; -- with strategic escaping could still break out. The same pattern appears in pr-fix.yml and pr-review.yml where review body content is logged to SQLite.

Consider using parameterized queries or at minimum a proper escaping function, or pipe content via sqlite3 .import with a temp file.

[MED] Hardcoded hex colors in network-health-cards.tsx:16-18

style={{ backgroundColor: health.color }}

The getHealthStatus function returns hardcoded hex colors (#4FB848, #E5C46B, #EB1616) applied via inline style={}. Per CLAUDE.md: "Use TailwindCSS classes exclusively, avoid inline CSS or style tags." These should be Tailwind classes (e.g., bg-[#4FB848] or custom theme tokens) applied via className instead of style.

[LOW] healthPercentage metric is misleading

In chain-service.ts:757-758, healthPercentage is calculated as the ratio of chains that have health data (healthMap.has(c.id)) rather than actual health scores. A chain with 10% uptime and a chain with 99% uptime both count equally as "healthy." This means the metric shows data coverage, not actual health. Consider using average uptime values from healthMap instead.

[LOW] No caching on getEcosystemHealthOverview

This method runs 3 DB queries (ecosystems with chains+aprs, health map, validator group-by) on every page load. Other service methods in this codebase use Redis caching for similar aggregate queries. Consider adding caching since the networks page is force-dynamic.

[LOW] Missing \n at end of team-feature-development/SKILL.md

The file ends without a trailing newline (line 1430: \ No newline at end of file).

Verdict

The MED issues (SQL injection risk in agent tooling and inline styles) should be addressed. Requesting changes.

[consensusguards]

/fix

[MED] SQL injection risk in run-agent.sh and pr-fix.yml

In agents-tools/run-agent.sh, user-controlled values ($PROMPT, $AGENT, $ROLE, etc.) are interpolated directly into SQL strings with only single-quote escaping via sed "s/'/''/g". This is fragile — a prompt containing '); DROP TABLE agent_runs; -- with strategic escaping could still break out. The same pattern appears in pr-fix.yml and pr-review.yml where review body content is logged to SQLite.

Consider using parameterized queries or at minimum a proper escaping function, or pipe content via sqlite3 .import with a temp file.