fix(ui): show avatar initials for single-segment usernames; tooltip truncated chart names

[eliran-ops]

Summary

SKY-825 cosmetic batch:

• 41 ✅ — Account menu avatar showed a generic silhouette while another circle in the header (radar-hub-web's avatar) showed correctly-computed initials.
• 43 ✅ — Long chart names in the Helm catalogue were truncated with no way to read the full string.
• 42 ⛔ Out of scope — the "Stop Claude" floating pill is the Cursor IDE agent UI, not radar.
• 60 ⛔ Out of scope — the resource toolbar `+` button `onClick` is wired to `handleCreateResource` and `` renders correctly in radar OSS; could not reproduce.

Fixes

Bug 41 — silhouette avatar

The previous `UserMenu` initials computation only looked at separator-split segments of the username's local-part, so a username like `mkohli` (no `.`, `_`, `-`) produced no initials and the silhouette fallback kicked in.

Extracted `computeUserInitials` into `packages/k8s-ui/src/utils/user-initials.ts` with a clearer rule:

• 2+ segments → first letter of each (max 2). `mary.kohli` → `MK`
• otherwise → first 1-2 letters of the whole local-part. `mkohli` → `MK`
• always uppercased; returns `''` for empty/null inputs

9 unit tests pin the contract including the bug 41 fixture verbatim, separator variants, the 2-cap, the @-domain stripping, edge cases (consecutive separators, single-character, empty/null).

Bug 43 — truncated chart names

Wrapped both `ChartBrowser` card variants' `

` in `` so users can hover to reveal the full name. Reuses the existing Tooltip primitive (itself fixed in PR #570 to anchor correctly and dismiss on click).

Test plan

• `cd packages/k8s-ui && npm test` — 77 passing (9 new for `computeUserInitials`)
• `cd web && npm run tsc` — clean
• `cd web && npm run build` — clean

Made with Cursor

---

Note

Low Risk
Low risk UI/utility changes: adds a small pure helper for initials and adjusts tooltip class merging, with unit tests to pin behavior.

Overview
Fixes two UI papercuts: user avatar initials now come from a shared computeUserInitials helper that handles single-segment usernames/emails and filters non-letter glyphs, and the Helm ChartBrowser now wraps truncated chart titles in Tooltip so the full name is visible on hover.

Updates Tooltip to use tailwind-merge when combining its default wrapper classes with wrapperClassName, allowing callers (e.g. chart cards) to override display utilities correctly; adds targeted unit tests for both the tooltip class-merge contract and the new initials helper.

^{Reviewed by Cursor Bugbot for commit 7175703. Bugbot is set up for automated code reviews on this repo. Configure here.}

[nadaverell]

🤖 This review is the output of /pr-review-toolkit:review-pr — four Claude agents (code review, test coverage, comment accuracy, silent failures) on the diff. I've triaged their findings and stripped the noise; what's below is what survived.

Worth fixing before merge

1. Docstring contradicts the implementation. computeUserInitials.ts:16-17 claims it returns '' for "inputs with no usable letters." It doesn't:

• computeUserInitials('..') → '..'
• computeUserInitials('123') → '12'
• computeUserInitials('_') → '_'

Plus the rule list says "if the local-part contains separators, use the first letter of each segment" — but the code branches on segments.length >= 2 after filter(Boolean). So 'mary.' returns 'MA', not 'M'. The inline comment at the if is right; only the top-of-file docstring is wrong.

Fix either way: tighten the impl with a final letter-check (if (!/[a-z]/i.test(initials)) return '') or rewrite the docstring to match reality. Add one test pinning whichever you pick.

2. Whitespace bug. computeUserInitials(' alice') returns ' ' (two uppercased spaces — truthy). The UserMenu fallback {initials || <silhouette>} then renders two blank chars instead of falling back. Trim the local-part: username.trim().split('@')[0].

3. The twMerge override claim has no test. The whole point of the second commit is "callers can override inline-flex with block." But every existing test passes if you revert twMerge(clsx(...)) back to clsx(...). The regression only surfaces visually in ChartBrowser. Five-line render test in Tooltip.test.tsx closes it — render with wrapperClassName="block", assert the className resolves to block max-w-full (no inline-flex).

Style nits (same as #579)

4. (SKY-825 bug 41/43) refs across 5 inline spots and the test file's preamble — including the '... (the SKY-825 bug 41 fix)' test name. Same rule from CLAUDE.md as #579: ticket context belongs in the PR description, not in code that outlives the ticket.

5. The docstring's last paragraph references radar-hub-web's avatar. This util lives in @skyhook-io/k8s-ui and is consumed cross-repo. Embedding the rationale in the docstring will rot the moment radar-hub-web's header changes. One-liner WHY is enough: "Single-segment usernames must still produce a 2-letter label so avatars don't degrade to a generic icon."

Considered but skipping

• Tooltip comment's "stylesheet ordering wins" framing — agent argued mechanism is "twMerge removes the conflicting utility." Substantively right but pedantic; the comment reads clearly enough.
• wrapperClassName="min-w-0 flex-1" vs "block" inconsistency between the two ChartBrowser cards — both work; parent contexts may differ.
• New user-initials.ts file vs colocating in format.ts — defensible either way, not worth churning.

---

Net: docstring/impl coherence + whitespace fix can be one commit; twMerge test is its own; ticket-ref cleanup is mechanical. Otherwise the PR is in good shape — twMerge swap was verified to regress nothing, peer-dep call is right, the substantive Tailwind comment is keeper material.

[eliran-ops]

@nadaverell @hisco — ready for review. Cursor bugbot found 2 issues: tailwind class conflict on Tooltip wrapper and avatar initials including separator chars. Both addressed: 75a43ae (twMerge for tooltip wrapper) and 0ab023e (drop non-letters in single-segment fallback). Cursor Bugbot SUCCESS on current HEAD.

[eliran-ops]

Visual test

Tested locally on gke_koalabackend_us-east1-b_nonprod-cluster-us-east1.

Bug 43 - long chart name tooltip ✓

Helm Catalog → hovered `prometheus-yet-another-cloudwatch-exporter` (40-char name). Tooltip renders above the card with the full name (shown even when the card itself manages to fit it - the tooltip is the truncation safety-net at narrower viewports):

DOM check: the <h4 class="...truncate"> is wrapped in <span class="inline-flex max-w-full min-w-0 flex-1"> (the Tooltip primitive), and tailwind-merge lets the caller's flex-1 override the default inline-flex. No layout regressions on the card grid.

Bug 41 - avatar initials computation

Could not exercise - radar OSS launched here has no authenticated UserMenu rendering (/home shows no avatar in the header). The computeUserInitials extraction lands the helper into shared utils with 9 unit tests pinning the mkohli → MK fixture; verifiable end-to-end only in radar-hub-web where the menu is shown.

Verdict

Bug 43 visually verified. Bug 41 helper + tests are correct by inspection; needs a follow-up check in cloud where the avatar actually renders.

[cursor]

You have used all Bugbot PR reviews included in your free trial for your GitHub account on this workspace.

To continue using Bugbot reviews, enable Bugbot for your team in the Cursor dashboard.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 6bbaf88. Configure here.}

[eliran-ops]

@nadaverell a reminder

[eliran-ops]

@nadaverell — final review-comment items from #issuecomment-4350877739 addressed.

• 3. twMerge override test — packages/k8s-ui/src/components/ui/Tooltip.test.tsx (commit 6bbaf88) pins the regression directly: render with wrapperClassName="block" asserts block lands on the wrapper and inline-flex does NOT. Three cases: caller override wins, default stays when no override, non-conflicting utilities (min-w-0 flex-1) merge alongside defaults. Reverting twMerge(clsx(...)) back to clsx(...) fails the first case.
• 4. SKY-825 refs in user-initials.test.ts preamble — same commit. The two diff-narration comments ("Bugbot regression: the v2 fallback…", "Reviewer regression: the v2 docstring said…") rewritten to state the WHY without referencing prior versions, per CLAUDE.md. Added one more test pinning leading-whitespace handling (' alice' → 'AL').
• Items 1 (docstring/impl coherence), 2 (whitespace trim — handled by the non-letter strip), and 5 (docstring's radar-hub-web framing) were addressed in the earlier 0ab023e / a760e41 pass; rationale in the file comments stands on its own without ticket refs.

Test suite: packages/k8s-ui — 161 passed across 15 files. npm run tsc clean. Cursor Bugbot SUCCESS on current HEAD (7175703).