fix(webapp): org avatars blocked by img-src CSP and avatar overflow on failed load

[kathiekiwi]

What & why

Org avatars disappeared from the sidebar, replaced by alt text spilling across it. Two bugs stacked: the document img-src CSP pins the Google favicon endpoint org avatars are stored as, but Google 302-redirects it to tN.gstatic.com and CSP re-checks the redirect target, so the avatar is refused. Changelog images served from trigger.dev in the agent chat were also missing from the allowlist. And Avatar.tsx had no clipping and no error fallback, so a refused image degraded into overflowing alt text.

What's inside

CSP allowlist — app/utils/cspImageOrigins.ts: the base sources gain the four gstatic shards t0–t3.gstatic.com, path-pinned to /faviconV2, plus https://trigger.dev/changelog/ as a path prefix. No wildcards — the no-wildcard beacon policy stands. The shard hosts are Google-operated with no public write path, so the enumeration is as narrow as the existing s2/favicons entry; if Google ever adds a t4, the failure mode is one broken avatar, not a broken page.

Avatar fallback — app/components/primitives/Avatar.tsx: the image box clips, and a failed load falls back to the globe icon. That covers failures before hydration too — onError never replays for a node that already failed, so a ref checks complete && naturalWidth === 0 at attach time. The error state resets when the URL changes (key={avatar.url}).

Radio card theming — app/components/primitives/RadioButton.tsx: in the dark themes the checked radio card rendered darker than the unchecked ones. Unchecked cards now sit on background-bright (near-black in dark, unchanged white in light) and the checked card uses the surface-control tokens, so selection reads black → grey in dark themes; light theme keeps its current look. The API keys route keeps its indigo checked-hover via an explicit override.

Testing

The CSP test helper now implements CSP's real path-matching rule (trailing slash = prefix, otherwise exact, query ignored) and asserts the pins hold: the gstatic redirect target passes, beacon.png on gstatic, a t9 shard, and non-changelog trigger.dev paths stay blocked. 39 tests green plus webapp typecheck. Verified against a running webapp that the served directive contains the new sources.

[changeset-bot]

⚠️ No Changeset found

Latest commit: f549a98

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 758c08c3-d400-4d2c-934a-ee974ac58dc2

📥 Commits

Reviewing files that changed from the base of the PR and between a70f785 and 7823ead.

📒 Files selected for processing (2)

• apps/webapp/app/components/primitives/RadioButton.tsx
• apps/webapp/app/tailwind.css

🚧 Files skipped from review as they are similar to previous changes (2)

• apps/webapp/app/tailwind.css
• apps/webapp/app/components/primitives/RadioButton.tsx

📜 Recent review details

⏰ Context from checks skipped due to timeout. (2)

• GitHub Check: webapp / 🧪 Unit Tests: Webapp (3, 12)
• GitHub Check: webapp / 🧪 Unit Tests: Webapp (1, 12)

---

Walkthrough

The webapp now handles failed avatar images, including failures detected before hydration, by rendering a globe fallback. Image CSP matching supports trailing-slash path prefixes and includes Google favicon shards and Trigger.dev changelog images. Tests cover these image sources and path rules. Radio button variants use updated state colors. Preset access options use increased height and top-aligned content.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly identifies the primary avatar CSP failure and overflow fix addressed by the pull request.
Description check	✅ Passed	The description clearly explains the scope, rationale, implementation, and testing, although it does not reproduce every template section.

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/org-avatar-csp-overflow

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[devin-ai-integration]

Devin Review found 1 new potential issue.

[pkg-pr-new]

Open in StackBlitz

@trigger.dev/build

npm i https://pkg.pr.new/@trigger.dev/build@f549a98

trigger.dev

npm i https://pkg.pr.new/trigger.dev@f549a98

@trigger.dev/core

npm i https://pkg.pr.new/@trigger.dev/core@f549a98

@trigger.dev/python

npm i https://pkg.pr.new/@trigger.dev/python@f549a98

@trigger.dev/react-hooks

npm i https://pkg.pr.new/@trigger.dev/react-hooks@f549a98

@trigger.dev/redis-worker

npm i https://pkg.pr.new/@trigger.dev/redis-worker@f549a98

@trigger.dev/rsc

npm i https://pkg.pr.new/@trigger.dev/rsc@f549a98

@trigger.dev/schema-to-json

npm i https://pkg.pr.new/@trigger.dev/schema-to-json@f549a98

@trigger.dev/sdk

npm i https://pkg.pr.new/@trigger.dev/sdk@f549a98

commit: f549a98