feat(telemetry): clickable source jump buttons on Unified Telemetry

[Yeraze]

Summary

On large meshes the Unified Telemetry view gets long, making it tedious to jump between source/node groups. This PR turns the source legend pills at the top of the page into in-page navigation buttons and pins the header so they stay reachable while the card grids scroll underneath. The pill for the section nearest the top is highlighted as the active jump target.

Changes

• Source legend pills are now <button>s instead of <span>s; clicking one smooth-scrolls to that source's section.
• Scroll offset is computed from the live header height so sections land just below the sticky bar (robust against the controls wrapping on narrow viewports).
• An IntersectionObserver tracks the section nearest the top and highlights the matching pill (is-active + aria-current="true").
• Pills whose section is filtered out (by source/type/search) are disabled so they can't jump to nothing.
• New .unified-header--sticky CSS modifier pins the header — scoped so the chat-style Unified Messages page (own scroll surface) is unaffected.
• Added button-pill styles: hover brightness, disabled dimming, and an is-active inset ring using currentColor (matches each source's color).
• Added i18n key unified.telemetry.jump_to_source for the pill tooltip/aria.

Issues Resolved

Fixes #3262

Documentation Updates

• Added a CHANGELOG entry under [Unreleased] > Added. No feature docs under docs/ reference the Unified Telemetry legend, so none required updates.

Testing

• Unit tests pass (5766 tests)
• TypeScript compiles cleanly
• ESLint clean on changed files
• Manual: open Unified Telemetry with multiple sources, click a source pill, confirm smooth-scroll to its section and active highlight; scroll manually and confirm the active pill updates; apply a source filter and confirm filtered-out pills are disabled.

🤖 Generated with Claude Code

[github-actions]

Claude finished @Yeraze's task —— View job

---

Code Review Complete ✅

Todo List:

• Read and analyze the main component changes (UnifiedTelemetryPage.tsx)
• Review test coverage and implementation (UnifiedTelemetryPage.test.tsx)
• Check CSS changes for potential issues (unified.css)
• Review i18n changes (en.json)
• Check CHANGELOG entry
• Analyze for performance implications
• Check for accessibility concerns
• Provide comprehensive feedback

Review Summary

This is a well-implemented feature that transforms the static source legend into functional navigation buttons. The code demonstrates good React patterns, proper accessibility considerations, and thoughtful UX design.

Positive Aspects

Code Quality & Architecture ✅

• Clean React patterns: Proper use of useCallback, useMemo, and useRef for performance optimization
• Stable dependencies: Smart use of renderedKey for effect dependencies prevents unnecessary re-renders
• Good separation of concerns: Navigation logic is cleanly separated from data fetching and rendering
• Type safety: Proper TypeScript usage throughout

Performance ✅

• Efficient IntersectionObserver usage: Properly disconnects observer in cleanup
• Smart memoization: bySource is memoized to prevent re-scanning on sort-only changes
• Minimal re-renders: Stable setSectionRef callback prevents unnecessary ref updates

Accessibility ✅

• Proper ARIA attributes: aria-current="true" for active state, meaningful title attributes
• Keyboard accessible: Pills are <button> elements that work with keyboard navigation
• Disabled state handling: Pills for filtered-out sections are properly disabled
• Screen reader support: Good use of i18n for tooltips

User Experience ✅

• Sticky header: Keeps navigation accessible while scrolling through long content
• Smooth scrolling: Nice touch that calculates header offset dynamically
• Visual feedback: Active state highlighting with source-colored border
• Responsive behavior: Header height calculation handles viewport changes

Minor Suggestions for Improvement

Performance Optimization

Consider debouncing the IntersectionObserver callback if performance becomes an issue with many sources:

// In the observer callback
const debounced = useMemo(() => debounce((sid: string) => setActiveSource(sid), 100), []);

Error Handling

The scrollToSource function could benefit from error handling:

const scrollToSource = useCallback((sid: string) => {
  try {
    const el = sectionRefs.current.get(sid);
    if (!el) return;
    const headerH = headerRef.current?.offsetHeight ?? 0;
    const top = el.getBoundingClientRect().top + window.scrollY - headerH - 12;
    window.scrollTo({ top, behavior: 'smooth' });
    setActiveSource(sid);
  } catch (error) {
    console.warn('Failed to scroll to source:', error);
  }
}, []);

CSS Enhancement

Consider adding a subtle animation for the active state transition:

button.unified-source-pill {
  transition: filter 0.15s, box-shadow 0.15s, transform 0.1s;
}

button.unified-source-pill:active {
  transform: scale(0.98);
}

Test Coverage Assessment

Strengths ✅

• Core functionality tested: Navigation button rendering and click behavior
• Accessibility verified: Proper ARIA attributes and button states
• Mock setup: Good stubbing of DOM APIs not available in jsdom

Coverage Gaps ⚠️

Consider adding tests for:

1. IntersectionObserver behavior: Test active source updates during scroll
2. Disabled state logic: Verify pills are disabled when sections are filtered out
3. Smooth scroll calculation: Test header height offset calculation
4. Edge cases: Empty source lists, single source scenarios

Security & Safety ✅

No security concerns identified. The implementation:

• Uses safe DOM APIs without innerHTML manipulation
• Properly sanitizes user input through React's built-in XSS protection
• Uses stable object references to prevent memory leaks

Technical Implementation Quality

React Best Practices ✅

• Proper effect cleanup with observer.disconnect()
• Stable callback references prevent render cascades
• Good use of refs for DOM manipulation without triggering renders

Browser Compatibility ✅

• IntersectionObserver feature detection: typeof IntersectionObserver === 'undefined'
• Graceful degradation when APIs aren't available
• Standard CSS that works across modern browsers

Integration Quality ✅

• Follows existing codebase patterns and conventions
• Proper i18n integration with parameterized strings
• CSS classes follow established naming conventions

Overall Assessment

This is production-ready code that demonstrates solid engineering practices. The feature enhances usability without introducing technical debt, follows accessibility guidelines, and includes appropriate test coverage. The implementation is clean, performant, and maintainable.

Recommendation: ✅ Approve

The implementation successfully addresses the stated goal of improving navigation on large telemetry pages while maintaining code quality and following established patterns.

---