fix(timeline): truncate long synced bucket names in sidebar

[TimeToBuildBob]

Summary

Fixes #682 — synced bucket names can exceed 137+ characters (e.g. aw-watcher-window_longhost-synced-from-longhost), making the timeline sidebar unusable on smaller screens.

Changes

Smart abbreviation for synced bucket names:

• aw-watcher-window_host-synced-from-remotehost → aw-watcher-window (synced from remotehost)
• Strips local hostname (redundant — same for all local buckets) and the synced-from boilerplate
• Full bucket ID shown on hover via title tooltip

CSS safety net for any long label:

• max-width: 250px with text-overflow: ellipsis on the vis-timeline label sidebar
• Prevents overflow regardless of bucket name format

Bug fix: onSelect used group.content (display HTML) instead of group.id (bucket ID) when looking up the bucket for event editing. Previously worked by coincidence since content equaled bucket.id, but would break with any label abbreviation.

Before/After

Before (from issue #682):

aw-watcher-window_my-very-long-hostname-synced-from-my-very-long-hostname

Takes up most of the screen width in the sidebar.

After:

aw-watcher-window (synced from my-very-long-hostname)

Compact label with full ID on hover.

---

Important

Abbreviates long synced bucket names in the timeline sidebar and fixes a bucket lookup bug in VisTimeline.vue.

• Behavior:
  • Abbreviates synced bucket names in abbreviateBucketName() in VisTimeline.vue to prevent sidebar overflow.
  • Full bucket ID shown on hover via title tooltip.
  • Fixes bug in onSelect() in VisTimeline.vue by using group.id instead of group.content for bucket lookup.
• CSS:
  • Adds max-width: 250px and text-overflow: ellipsis to .vis-labelset .vis-label .vis-inner in VisTimeline.vue to handle long labels.

^{This description was created by for c1c2d34. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to c1c2d34 in 6 seconds. Click for details.

• Reviewed 54 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 0 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

Workflow ID: wflow_u9jACVncNvfXTTdb

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[greptile-apps]

Greptile Summary

Fixes long synced bucket names causing sidebar overflow by abbreviating them from aw-watcher-window_host-synced-from-remotehost to aw-watcher-window (synced from remotehost), with full ID shown on hover. Also fixes a critical bug where onSelect() used group.content instead of group.id for bucket lookup, which would have broken with any label abbreviation.

• Added escapeHtml() helper to prevent XSS vulnerabilities
• Added abbreviateBucketName() to intelligently shorten synced bucket names
• Added CSS safety net (max-width: 250px with ellipsis) for any long labels
• Fixed bucket ID lookup in onSelect() on line 203

Confidence Score: 5/5

• This PR is safe to merge with no issues found
• The changes are well-implemented with proper HTML escaping to prevent XSS vulnerabilities (previously addressed in review thread), a critical bug fix for bucket lookup, and defensive CSS to handle edge cases. The code is clean, focused, and solves the reported issue effectively.
• No files require special attention

Important Files Changed

Filename	Overview
src/visualizations/VisTimeline.vue	Adds smart abbreviation for synced bucket names with proper HTML escaping, CSS fallback for long labels, and fixes bucket lookup bug

_{Last reviewed commit: c81046c}

[greptile-apps]

_{1 file reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 25.60%. Comparing base (fc5bdd9) to head (c81046c).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #757   +/-   ##
=======================================
  Coverage   25.60%   25.60%           
=======================================
  Files          30       30           
  Lines        1746     1746           
  Branches      319      319           
=======================================
  Hits          447      447           
  Misses       1233     1233           
  Partials       66       66           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[TimeToBuildBob]

Greptile Review Addressed — XSS Fix

Thanks for the security catch! Fixed in b0b62fe:

• Added a dedicated escapeHtml() helper that escapes all 5 HTML special characters (&, <, >, ", ')
• Applied it to bucketId (for the title attribute) and to all three positions where content is inserted as HTML: synced prefix, synced host, and plain bucket name
• The previous code only escaped double-quotes, leaving XSS vectors via <, >, and &

All three comment threads addressed.

[TimeToBuildBob]

Rebased onto master (c81046c). The conflict was in VisTimeline.vue — master had added tooltip positioning CSS (PR #758) and the bucket ID guard (PR #765) in the same file. Both changes preserved in the rebase.

[ErikBjare]

@greptileai review

[greptile-apps]

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}