feat: display user's avatar when logged in

Author: danielroe

app/components/ConnectorStatus.client.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
-const { isConnected, isConnecting, npmUser, error, activeOperations, hasPendingOperations } =
-  useConnector()
+const {
+  isConnected,
+  isConnecting,
+  npmUser,
+  avatar,
+  error,
+  activeOperations,
+  hasPendingOperations,
+} = useConnector()
 
 const showModal = shallowRef(false)
 const showTooltip = shallowRef(false)
@@ -41,8 +48,16 @@ const ariaLabel = computed(() => {
       @focus="showTooltip = true"
       @blur="showTooltip = false"
     >
-      <!-- Status dot -->
+      <!-- Avatar (when connected with avatar) -->
+      <img
+        v-if="isConnected && avatar"
+        :src="avatar"
+        :alt="`${npmUser}'s avatar`"
+        class="w-6 h-6 rounded-full"
+      />
+      <!-- Status dot (when not connected or no avatar) -->
       <span
+        v-else
         class="w-2.5 h-2.5 rounded-full transition-colors duration-200"
         :class="statusColor"
         aria-hidden="true"

app/composables/useConnector.ts

@@ -22,6 +22,8 @@ export interface ConnectorState {
   connecting: boolean
   /** The npm username if connected and authenticated */
   npmUser: string | null
+  /** Base64 data URL of the user's avatar */
+  avatar: string | null
   /** Pending operations queue */
   operations: PendingOperation[]
   /** Last connection error message */
@@ -34,6 +36,7 @@ interface ConnectResponse {
   success: boolean
   data?: {
     npmUser: string | null
+    avatar: string | null
     connectedAt: number
   }
   error?: string
@@ -43,6 +46,7 @@ interface StateResponse {
   success: boolean
   data?: {
     npmUser: string | null
+    avatar: string | null
     operations: PendingOperation[]
   }
   error?: string
@@ -60,6 +64,7 @@ export const useConnector = createSharedComposable(function useConnector() {
     connected: false,
     connecting: false,
     npmUser: null,
+    avatar: null,
     operations: [],
     error: null,
     lastExecutionTime: null,
@@ -115,6 +120,7 @@ export const useConnector = createSharedComposable(function useConnector() {
 
         state.value.connected = true
         state.value.npmUser = response.data.npmUser
+        state.value.avatar = response.data.avatar
         state.value.error = null
 
         // Fetch full state after connecting
@@ -155,6 +161,7 @@ export const useConnector = createSharedComposable(function useConnector() {
       connected: false,
       connecting: false,
       npmUser: null,
+      avatar: null,
       operations: [],
       error: null,
       lastExecutionTime: null,
@@ -174,6 +181,7 @@ export const useConnector = createSharedComposable(function useConnector() {
 
       if (response.success && response.data) {
         state.value.npmUser = response.data.npmUser
+        state.value.avatar = response.data.avatar
         state.value.operations = response.data.operations
         state.value.connected = true
       }
@@ -380,6 +388,7 @@ export const useConnector = createSharedComposable(function useConnector() {
     isConnected: computed(() => state.value.connected),
     isConnecting: computed(() => state.value.connecting),
     npmUser: computed(() => state.value.npmUser),
+    avatar: computed(() => state.value.avatar),
     error: computed(() => state.value.error),
     /** Timestamp of last execution completion (watch this to refresh data) */
     lastExecutionTime: computed(() => state.value.lastExecutionTime),

cli/src/npm-client.ts

@@ -1,3 +1,4 @@
+import crypto from 'node:crypto'
 import process from 'node:process'
 import { execFile } from 'node:child_process'
 import { promisify } from 'node:util'
@@ -184,6 +185,40 @@ export async function getNpmUser(): Promise<string | null> {
   return null
 }
 
+/**
+ * Gets the user's avatar as a base64 data URL from Gravatar.
+ * Returns null if the user's email cannot be retrieved or avatar fetch fails.
+ */
+export async function getNpmAvatar(): Promise<string | null> {
+  const result = await execNpm(['profile', 'get', 'email', '--json'], { silent: true })
+  if (result.exitCode !== 0 || !result.stdout) {
+    return null
+  }
+
+  try {
+    const parsed = JSON.parse(result.stdout) as { email?: string }
+    if (!parsed.email) {
+      return null
+    }
+
+    const email = parsed.email.trim().toLowerCase()
+    const hash = crypto.createHash('md5').update(email).digest('hex')
+    const gravatarUrl = `https://www.gravatar.com/avatar/${hash}?s=64&d=retro`
+
+    const response = await fetch(gravatarUrl)
+    if (!response.ok) {
+      return null
+    }
+
+    const contentType = response.headers.get('content-type') || 'image/png'
+    const buffer = await response.arrayBuffer()
+    const base64 = Buffer.from(buffer).toString('base64')
+    return `data:${contentType};base64,${base64}`
+  } catch {
+    return null
+  }
+}
+
 export async function orgAddUser(
   org: string,
   user: string,

cli/src/server.ts

@@ -6,6 +6,7 @@ import type { ConnectorState, PendingOperation, OperationType, ApiResponse } fro
 import { logDebug, logError } from './logger.ts'
 import {
   getNpmUser,
+  getNpmAvatar,
   orgAddUser,
   orgRemoveUser,
   orgListUsers,
@@ -50,6 +51,7 @@ export function createConnectorApp(expectedToken: string) {
       token: expectedToken,
       connectedAt: 0,
       npmUser: null,
+      avatar: null,
     },
     operations: [],
   }
@@ -76,14 +78,16 @@ export function createConnectorApp(expectedToken: string) {
       throw new HTTPError({ statusCode: 401, message: 'Invalid token' })
     }
 
-    const npmUser = await getNpmUser()
+    const [npmUser, avatar] = await Promise.all([getNpmUser(), getNpmAvatar()])
     state.session.connectedAt = Date.now()
     state.session.npmUser = npmUser
+    state.session.avatar = avatar
 
     return {
       success: true,
       data: {
         npmUser,
+        avatar,
         connectedAt: state.session.connectedAt,
       },
     } as ApiResponse
@@ -99,6 +103,7 @@ export function createConnectorApp(expectedToken: string) {
       success: true,
       data: {
         npmUser: state.session.npmUser,
+        avatar: state.session.avatar,
         operations: state.operations,
       },
     } as ApiResponse

cli/src/types.ts

@@ -7,6 +7,8 @@ export interface ConnectorSession {
   token: string
   connectedAt: number
   npmUser: string | null
+  /** Base64 data URL of the user's avatar */
+  avatar: string | null
 }
 
 export type OperationType =