Skip to content

feat(#524): compress affordance in context ring tooltip#1223

Closed
bergeouss wants to merge 2 commits intonesquena:masterfrom
bergeouss:feat/524-compress-context-ring
Closed

feat(#524): compress affordance in context ring tooltip#1223
bergeouss wants to merge 2 commits intonesquena:masterfrom
bergeouss:feat/524-compress-context-ring

Conversation

@bergeouss
Copy link
Copy Markdown
Contributor

@bergeouss bergeouss commented Apr 28, 2026

Summary

Adds a discoverability layer for /compress directly in the context usage indicator, as discussed in the issue consensus.

Behaviour

Context usage What appears
0–49% Nothing — context is healthy
50–74% (yellow) Subtle hint button in tooltip: Compress context to free up space
75%+ (red) Intensified button with warning style: ⚠ Compress now to free context

Clicking the button pre-fills /compress into the composer and focuses it — the user can type a focus topic or just hit send. No auto-fire, user stays in control.

Implementation

  • static/ui.js — Conditional visibility + click handler inside _syncCtxIndicator()
  • static/index.html — ctxCompressBtn element inside ctxTooltip
  • static/style.css — Muted button style, red variant for ctx-high
  • static/i18n.js — ctx_compress_hint / ctx_compress_action in all 7 locales

Test results

  • 80 i18n/locale tests passed (including key parity)
  • 38 profile switch + compression tests passed
  • JS syntax: OK

Closes #524

@bergeouss
feat(nesquena#524): add compress affordance to context ring tooltip
0a0513c 
When context usage reaches 50% (yellow), a subtle hint button appears
in the context ring tooltip suggesting /compress.  At 75%+ (red), the
hint intensifies with a warning style.

Clicking the button pre-fills /compress into the composer and focuses
it, so the user can add a focus topic or just hit send.  No auto-fire
— the user stays in control.

- static/ui.js: conditional visibility + click handler in _syncCtxIndicator
- static/index.html: ctxCompressBtn element inside ctxTooltip
- static/style.css: muted button style, red variant for ctx-high
- static/i18n.js: ctx_compress_hint / ctx_compress_action in all 7 locales

Closes nesquena#524
@nesquena-hermes
Copy link
Copy Markdown
Collaborator

nesquena-hermes commented Apr 28, 2026

Thanks for the PR, @bergeouss! The compress affordance is a solid discoverability improvement — surfacing /compress contextually at 50% and 75%+ usage thresholds is exactly the right UX pattern, and keeping it as a pre-fill (not auto-fire) keeps the user in control.

The tiered styling (subtle hint → warning button) is clean. A few things to confirm before merge:

  1. Mobile accessibility: The compress button lives inside ctxTooltip. On mobile, the context ring tooltip isn't hover-triggered — is the tooltip/button reachable on touch devices, or is this desktop-only? If desktop-only, worth noting in the PR so users don't expect it on mobile.

  2. Button state reset: When context usage drops below 50% (e.g. after a /compress succeeds), does _syncCtxIndicator() correctly hide the button again? Confirm no stale-visible state after compression.

  3. i18n key parity: The 80 i18n tests passing is good. Just confirm ctx_compress_hint and ctx_compress_action are present in all 7 locales (en, ru, es, de, zh, zh-Hant, ko) with non-empty values.

The implementation scope is tight (4 files, clear separation of concerns). Once the above are confirmed this should be merge-ready!

@bergeouss
fix(ui): add touch toggle support for context tooltip on mobile
6a17e4c 
Addresses reviewer feedback on nesquena#524 — the compress affordance was only
reachable via hover (desktop). Mobile users can now tap the context ring
button to toggle the tooltip and access the compress button.

- CSS: add .ctx-tooltip-active class with opacity + pointer-events
- JS: tap-to-toggle handler on ctxIndicator with outside-click dismiss
- aria-hidden toggled correctly for accessibility

Ref: nesquena#1223 review comment
@bergeouss
Copy link
Copy Markdown
Contributor Author

bergeouss commented Apr 29, 2026

Review Feedback Addressed

Thank you for the thorough review! Addressing all three points:

1. Mobile accessibility — Touch toggle support added

The compress affordance was only reachable via hover (desktop-only). Added a tap-to-toggle mechanism for the context tooltip on touch devices:

  • CSS: New .ctx-tooltip-active class with opacity: 1 and pointer-events: auto so the compress button is clickable
  • JS: Click handler on #ctxIndicator toggles the tooltip, with outside-click dismiss and stopPropagation to keep tooltip interactions intact
  • Accessibility: aria-hidden toggled correctly on open/close

2. Button state reset ✅ Already handled

When context usage drops below 50% (e.g. after /compress succeeds), _syncCtxIndicator() correctly sets compressWrap.style.display='none' — no stale-visible state after compression (line 662-664 in ui.js).

3. i18n key parity ✅ All 7 locales covered

Both ctx_compress_hint and ctx_compress_action are present with native translations in all 7 locales:

  • en (line 72-73), ru (789-790), es (1366-1367), de (1975-1976), zh (2366-2367), zh-Hant (2970-2971), ko (3636-3637) in i18n.js

Files modified: static/ui.js, static/style.css
Tests: 2828 passed, 0 failed

🤖 AI-assisted via Hermes Agent

@nesquena-hermes nesquena-hermes mentioned this pull request Apr 29, 2026
Merged
@nesquena-hermes
Copy link
Copy Markdown
Collaborator

nesquena-hermes commented Apr 29, 2026

Thanks for the follow-up commit, @bergeouss — the three review points are all addressed:

  • ✅ Mobile accessibility / touch toggle — tap-to-toggle on #ctxIndicator with outside-click dismiss, stopPropagation for inner interactions, and aria-hidden toggled correctly on open/close. This makes the compress affordance reachable on touch devices, not just on hover. The CSS .ctx-tooltip-active class approach (opacity + pointer-events) is a clean pattern.
  • ✅ Button state reset — _syncCtxIndicator() setting compressWrap.style.display='none' when usage drops below 50% means no stale-visible state after /compress succeeds. The reset happens on the next context sync, not after a manual dismiss.
  • ✅ i18n key parity — both ctx_compress_hint and ctx_compress_action present in all 7 locales (en, ru, es, de, zh, zh-Hant, ko) with native translations. Key parity is complete.

The 2828-test pass confirms the changes integrate cleanly with the existing suite.

One small observation: the ru locale is included in this PR but not listed among the "current locales" in the original PR description. That's fine — it's already in i18n.js — just noting it for the record.

This looks ready for merge.

🤖 Automated triage via nesquena-hermes

@nesquena-hermes
Copy link
Copy Markdown
Collaborator

nesquena-hermes commented Apr 29, 2026

Merged in v0.50.237 via #1243. Thank you @bergeouss! 🎉

@nesquena nesquena mentioned this pull request Apr 29, 2026
Merged
JKJameson pushed a commit to JKJameson/hermes-webui that referenced this pull request Apr 29, 2026
@bergeouss
fix(ui): add touch toggle support for context tooltip on mobile
31021bb 
Addresses reviewer feedback on nesquena#524 — the compress affordance was only
reachable via hover (desktop). Mobile users can now tap the context ring
button to toggle the tooltip and access the compress button.

- CSS: add .ctx-tooltip-active class with opacity + pointer-events
- JS: tap-to-toggle handler on ctxIndicator with outside-click dismiss
- aria-hidden toggled correctly for accessibility

Ref: nesquena#1223 review comment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

ux(composer): compact/compress button on context usage indicator when context is getting full

2 participants

@bergeouss @nesquena-hermes