[QOL FEATURE]: implement 'Histogram Ribs' context x-ray for bulk selection (#186)

[VooDisss]

Summary

This PR introduces "Histogram Ribs," a high-visibility visual diagnostic tool for the activity timeline. It allows users to instantly identify context-heavy interactions when in Bulk Selection mode, facilitating efficient context management and pruning.

Features

• Context X-Ray Mode: Horizontal histogram bars project from activity badges directly over the chat area to reveal token weight.
• Selective Visibility: The visualization is strictly hidden during normal use and only activates when items are selected or "Selection Mode" is enabled.
• Dual-Rib Visualization:
  • Primary Rib (Top): Thick (8px) bar representing weight relative to the heaviest item in the current history.
  • Secondary Rib (Bottom): Thin (3px) bar showing absolute token load against a ~10k token "hot" threshold.
• Deep Weight Analysis: Implements recursive character counting that drills into tool payloads (e.g., read tool outputs, bash stdout), ensuring background operations are accurately weighted.
• Mobile-First Scaling: Viewport-aware scaling logic automatically adjusts rib lengths to fit perfectly within mobile screens without clipping or horizontal overflow.
• Overlay Projection: Utilizes a Portal and fixed positioning to escape sidebar scroll-clipping boundaries, ensuring bars float clearly above the chat text.

Interaction

• Heatmap Coloring: Bars transition from Green (Safe) to Red (Heavy) using smooth CSS color-mixing based on absolute token impact.
• Performance: High-performance scroll synchronization keeps ribs perfectly aligned with badges during rapid sidebar navigation.

Verification Results

• Verified deep weighting for "Read" tool calls (massive file contents now visible).
• Tested viewport-aware scaling on mobile (bars stay within screen bounds).
• Confirmed bars project over chat text without being clipped by the scroll container.
• Verified ribs are 100% hidden when no items are selected.