feat: show bluesky avatar in header by danielroe · Pull Request #896 · npmx-dev/npmx.dev

danielroe · 2026-02-03T23:23:20Z

vercel · 2026-02-03T23:23:25Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Error		Feb 4, 2026 0:25am
npmx.dev	Ready	Preview, Comment	Feb 4, 2026 0:25am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Feb 4, 2026 0:25am

codecov · 2026-02-03T23:25:41Z

Codecov Report

❌ Patch coverage is 0% with 5 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Header/AccountMenu.client.vue	0.00%	5 Missing ⚠️

📢 Thoughts on this report? Let us know!

coderabbitai · 2026-02-03T23:31:44Z

📝 Walkthrough

Walkthrough

Backend session data now includes an optional avatar URL sourced from the PDS profile blob when available. The public session schema and server-side UserServerSession type were extended with an optional avatar field. The header component was updated to render Atmosphere avatars where present, retain the existing cloud-icon fallback when absent, and apply conditional z-indexing to ensure consistent overlapping when both npm and Atmosphere connections exist. Error handling prevents avatar-fetch failures from breaking the session flow.

🚥 Pre-merge checks | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The pull request description contains only an image screenshot showing the feature implementation, with no textual explanation of the changes.	Add a brief textual description explaining what the pull request does, why the changes were made, and any relevant implementation details or testing performed.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/at-avatar

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

coderabbitai

Actionable comments posted: 1

coderabbitai · 2026-02-03T23:31:47Z

server/api/auth/atproto.get.ts

+    // Fetch the user's profile record to get their avatar blob reference
+    // We use com.atproto.repo.getRecord to fetch directly from the user's PDS
+    // This works with any PDS, not just Bluesky
+    let avatar: string | undefined
+    try {
+      const profileResponse = await fetch(
+        `${miniDoc.pds}/xrpc/com.atproto.repo.getRecord?repo=${encodeURIComponent(agent.did!)}&collection=app.bsky.actor.profile&rkey=self`,
+        { headers: { 'User-Agent': 'npmx' } },
+      )
+      if (profileResponse.ok) {
+        const record = (await profileResponse.json()) as { value: ProfileRecord }
+        const avatarBlob = record.value.avatar
+        if (avatarBlob?.ref?.$link) {
+          // Construct the blob URL from the user's PDS
+          avatar = `${miniDoc.pds}/xrpc/com.atproto.sync.getBlob?did=${encodeURIComponent(agent.did!)}&cid=${encodeURIComponent(avatarBlob.ref.$link)}`
+        }


⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# First, let's read the file to understand the full context wc -l server/api/auth/atproto.get.ts

Repository: npmx-dev/npmx.dev

Length of output: 95

🏁 Script executed:

# Read the entire file to understand variable declarations and context cat -n server/api/auth/atproto.get.ts

Repository: npmx-dev/npmx.dev

Length of output: 3923

🏁 Script executed:

# Find the PublicUserSession type definition fd -t f "publicUserSession" --exec cat {}

Repository: npmx-dev/npmx.dev

Length of output: 438

🏁 Script executed:

# Search for PublicUserSession type in shared directory rg "interface PublicUserSession|type PublicUserSession" -A 10

Repository: npmx-dev/npmx.dev

Length of output: 172

🏁 Script executed:

# Check the Agent type from `@atproto/api` to see if did is optional rg "class Agent|interface Agent" -A 20 | head -50

Repository: npmx-dev/npmx.dev

Length of output: 43

🏁 Script executed:

# Search for any SSRF or URL validation patterns in the codebase rg "ssrf|SSRF|private.*host|localhost|127.0.0.1" -i

Repository: npmx-dev/npmx.dev

Length of output: 14997

🏁 Script executed:

# Check what valibot's url() validator does and how it's used rg "from 'valibot'" -B 2 -A 2

Repository: npmx-dev/npmx.dev

Length of output: 8676

🏁 Script executed:

# Check the Agent type and its did property rg "class Agent|did\?" -A 5 | grep -A 5 "class Agent" | head -20

Repository: npmx-dev/npmx.dev

Length of output: 43

🏁 Script executed:

# Search for what valibot's url() validator does - check documentation or usage rg "url" -B 3 -A 3 | head -40

Repository: npmx-dev/npmx.dev

Length of output: 1870

🏁 Script executed:

# Check if miniDoc validation happens on line 69 sed -n '64,70p' server/api/auth/atproto.get.ts

Repository: npmx-dev/npmx.dev

Length of output: 324

🏁 Script executed:

# Check if PublicUserSessionSchema is used to validate miniDoc anywhere rg "PublicUserSessionSchema" -B 2 -A 2

Repository: npmx-dev/npmx.dev

Length of output: 1119

🏁 Script executed:

# Look at atproto Agent type - search npm packages or type definitions in node_modules # First, let's see if there are any .d.ts files or type definitions fd -e "d.ts" "@atproto" 2>/dev/null | head -5

Repository: npmx-dev/npmx.dev

Length of output: 43

🏁 Script executed:

# Check if agent.did can be undefined by looking at the Agent constructor rg "@atproto/api" -A 10 | grep -A 10 "Agent"

Repository: npmx-dev/npmx.dev

Length of output: 914

🏁 Script executed:

# Check if miniDoc is validated using safeParse in atproto.get.ts sed -n '58,75p' server/api/auth/atproto.get.ts

Repository: npmx-dev/npmx.dev

Length of output: 763

🏁 Script executed:

# Search for any Agent type definitions or usage to understand if did is optional rg "did\?" -i -B 2 -A 2 | head -50

Repository: npmx-dev/npmx.dev

Length of output: 551

🏁 Script executed:

# Check if miniDoc is ever validated with safeParse in the atproto file rg "safeParse.*miniDoc|miniDoc.*safeParse" server/api/auth/atproto.get.ts

Repository: npmx-dev/npmx.dev

Length of output: 43

🏁 Script executed:

# Look for all uses of agent.did to see if it's ever checked for undefined rg "agent\.did" server/api/auth/atproto.get.ts -B 2 -A 2

Repository: npmx-dev/npmx.dev

Length of output: 761

🏁 Script executed:

# Let's verify if valibot's url() validator provides any SSRF protection # by checking what it validates web_search "valibot url validator what does it validate"

Repository: npmx-dev/npmx.dev

Length of output: 111

🏁 Script executed:

# Check if there's any validation of miniDoc using safeParse in the complete file cat -n server/api/auth/atproto.get.ts | grep -A 5 -B 5 "safeParse\|parse"

Repository: npmx-dev/npmx.dev

Length of output: 43

🏁 Script executed:

# Let's also check the complete context around agent initialization sed -n '58,77p' server/api/auth/atproto.get.ts

Repository: npmx-dev/npmx.dev

Length of output: 947

🌐 Web query:

valibot url validator what does it check validate

💡 Result:

Valibot’s url() only validates that a string is “badly formatted” vs “validly formatted” as a URL (i.e., it’s a URL format check on a string, returning a url validation issue if it isn’t). [1]

What it does not check by itself:

Protocol safety / allowlist (e.g., it won’t inherently block javascript:...; you must add your own constraints). [2]

Specific scheme requirements like “must be https” (you’d add an additional rule such as startsWith('https://')). [3]

Host/domain allowlists, URL reachability, DNS/HTTP status, etc. (those are outside “formatting”). [1]

Sources:
[1] Valibot url action docs: https://valibot.dev/api/url/
[2] Discussion referencing javascript: concerns with extending url: open-circle/valibot#835
[3] Valibot startsWith docs (HTTPS URL schema example): https://valibot.dev/api/startsWith/

🏁 Script executed:

# Check if miniDoc is cast without validation (on line 69) sed -n '68,70p' server/api/auth/atproto.get.ts

Repository: npmx-dev/npmx.dev

Length of output: 143

🏁 Script executed:

# Look for any valibot documentation comments or usage patterns in the codebase rg "valibot.*url|url.*valibot" -A 3 -B 3 | head -40

Repository: npmx-dev/npmx.dev

Length of output: 617

Validate miniDoc.pds and guard agent.did before server-side fetches.

miniDoc.pds is cast to type without validation—valibot's url() only checks format, not SSRF protections. This allows fetches to localhost, private IPs, or restricted hosts. Additionally, agent.did! uses a non-null assertion without checking if it's defined, bypassing type safety.

Before fetching from the user's PDS, ensure you:

Validate miniDoc against PublicUserSessionSchema using safeParse()

Check agent.did is defined before using it in URLs

Restrict PDS URLs to HTTPS and exclude private hosts

🔒 Suggested guard + validation

- const profileResponse = await fetch( - `${miniDoc.pds}/xrpc/com.atproto.repo.getRecord?repo=${encodeURIComponent(agent.did!)}&collection=app.bsky.actor.profile&rkey=self`, - { headers: { 'User-Agent': 'npmx' } }, - ) - if (profileResponse.ok) { - const record = (await profileResponse.json()) as { value: ProfileRecord } - const avatarBlob = record.value.avatar - if (avatarBlob?.ref?.$link) { - // Construct the blob URL from the user's PDS - avatar = `${miniDoc.pds}/xrpc/com.atproto.sync.getBlob?did=${encodeURIComponent(agent.did!)}&cid=${encodeURIComponent(avatarBlob.ref.$link)}` - } - } + const did = agent.did + const pdsUrl = new URL(miniDoc.pds) + if (did && pdsUrl.protocol === 'https:' /* && isPublicHost(pdsUrl.hostname) */) { + const profileResponse = await fetch( + `${pdsUrl.origin}/xrpc/com.atproto.repo.getRecord?repo=${encodeURIComponent(did)}&collection=app.bsky.actor.profile&rkey=self`, + { headers: { 'User-Agent': 'npmx' } }, + ) + if (profileResponse.ok) { + const record = (await profileResponse.json()) as { value: ProfileRecord } + const avatarBlob = record.value.avatar + if (avatarBlob?.ref?.$link) { + avatar = `${pdsUrl.origin}/xrpc/com.atproto.sync.getBlob?did=${encodeURIComponent(did)}&cid=${encodeURIComponent(avatarBlob.ref.$link)}` + } + } + }

fatfingers23

Looks good! Listed the couple of edge cases I notice.

fatfingers23 · 2026-02-03T23:24:46Z

server/api/auth/atproto.get.ts

+          avatar = `${miniDoc.pds}/xrpc/com.atproto.sync.getBlob?did=${encodeURIComponent(agent.did!)}&cid=${encodeURIComponent(avatarBlob.ref.$link)}`
+        }
+      }
+    } catch {


This catch will happen a good bit for our npmx.social users. They do not get a app.bsky.actor.profile on signup. Nothing we have to change now since the cloud will be good back up still

fatfingers23 · 2026-02-03T23:31:30Z

server/api/auth/atproto.get.ts

+        const avatarBlob = record.value.avatar
+        if (avatarBlob?.ref?.$link) {
+          // Construct the blob URL from the user's PDS
+          avatar = `${miniDoc.pds}/xrpc/com.atproto.sync.getBlob?did=${encodeURIComponent(agent.did!)}&cid=${encodeURIComponent(avatarBlob.ref.$link)}`


Since it's a bluesky profile we can leverage their CDN to show these images. Usually loads a bit faster as well

https://cdn.bsky.app/img/feed_thumbnail/plain/{agent.did!}/{avatarBlob.ref.$link)}@jpeg

Is there any equivalent (of what I'm doing in the PR) that isn't bluesky-specific?

Whoops sorry I missed this. Nah. I think using the Bluesky profile for now and loading from their CDN is good since that's what most people have @zeucapua is working on a profile lexicon with an avatar blob ref we can probably map over to as well. Default to bsky, if the npmx profile has one use it, etc

feat: show bluesky avatar in header

5e3bd2e

danielroe requested review from fatfingers23 and zeucapua February 3, 2026 23:23

vercel bot deployed to Preview – npmx.dev February 3, 2026 23:24 View deployment

coderabbitai bot reviewed Feb 3, 2026

View reviewed changes

fatfingers23 reviewed Feb 3, 2026

View reviewed changes

danielroe added 2 commits February 4, 2026 12:23

fix: use bsky cdn + only fetch from https pds endpoints

f868fde

Merge remote-tracking branch 'origin/main' into feat/at-avatar

844a70d

vercel bot had a problem deploying to Preview – docs.npmx.dev February 4, 2026 12:24 Failure

vercel bot deployed to Preview – npmx.dev February 4, 2026 12:25 View deployment

danielroe merged commit ee4d95a into main Feb 4, 2026
17 of 19 checks passed

danielroe deleted the feat/at-avatar branch February 4, 2026 13:38

This was referenced Feb 5, 2026

fix(ui): fix squashed avatars & add missing mobile bluesky avatar #1022

Merged

feat(ui): use icon-only when connected to both services #1223

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Comments

feat: show bluesky avatar in header#896

feat: show bluesky avatar in header#896
danielroe merged 3 commits intomainfrom
feat/at-avatar

danielroe commented Feb 3, 2026

Uh oh!

vercel bot commented Feb 3, 2026 •

edited

Loading

Uh oh!

codecov bot commented Feb 3, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Feb 3, 2026 •

edited

Loading

Walkthrough

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot Feb 3, 2026

Uh oh!

fatfingers23 left a comment

Uh oh!

fatfingers23 Feb 3, 2026 •

edited

Loading

Uh oh!

fatfingers23 Feb 3, 2026

Uh oh!

danielroe Feb 4, 2026 •

edited

Loading

Uh oh!

fatfingers23 Feb 4, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Comments

Conversation

danielroe commented Feb 3, 2026

Uh oh!

vercel bot commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai bot commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

fatfingers23 left a comment

Choose a reason for hiding this comment

Uh oh!

fatfingers23 Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fatfingers23 Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

danielroe Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fatfingers23 Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Feb 3, 2026 •

edited

Loading

codecov bot commented Feb 3, 2026 •

edited

Loading

coderabbitai bot commented Feb 3, 2026 •

edited

Loading

fatfingers23 Feb 3, 2026 •

edited

Loading

danielroe Feb 4, 2026 •

edited

Loading