feat(auth): display username in connected status

When a user successfully authenticates with their Bugzilla API key,
we now fetch their account info via the /whoami endpoint and display
their name in the "Connected as [name]" status message.

Changes:
- Add WhoAmIResponse type and whoAmI method to BugzillaClient
- Add username field to auth slice state
- Fetch and store username during API key validation
- Display username in ApiKeyStatus authenticated state

Author: msujaws

src/components/Auth/ApiKeyStatus.test.tsx

@@ -68,6 +68,7 @@ describe('ApiKeyStatus', () => {
           isValid: true,
           isValidating: false,
           clearApiKey: mockClearApiKey,
+          username: 'Test User',
         }
         // @ts-expect-error - Simplified mock for testing
         return selector(state)
@@ -80,6 +81,12 @@ describe('ApiKeyStatus', () => {
       expect(screen.getByText(/connected/i)).toBeInTheDocument()
     })
 
+    it('should show username in connected message', () => {
+      render(<ApiKeyStatus onOpenModal={mockOnOpenModal} />)
+
+      expect(screen.getByText(/test user/i)).toBeInTheDocument()
+    })
+
     it('should show playful authenticated message', () => {
       render(<ApiKeyStatus onOpenModal={mockOnOpenModal} />)
 

src/components/Auth/ApiKeyStatus.tsx

@@ -9,6 +9,7 @@ export function ApiKeyStatus({ onOpenModal }: ApiKeyStatusProps) {
   const isValid = useStore((state) => state.isValid)
   const isValidating = useStore((state) => state.isValidating)
   const clearApiKey = useStore((state) => state.clearApiKey)
+  const username = useStore((state) => state.username)
 
   // Determine current state
   const hasApiKey = Boolean(apiKey)
@@ -60,7 +61,9 @@ export function ApiKeyStatus({ onOpenModal }: ApiKeyStatusProps) {
       <div role="status" className="flex items-center gap-3 rounded-lg bg-bg-secondary px-4 py-2">
         <span className="material-icons text-accent-success">check_circle</span>
         <div className="flex-1">
-          <p className="text-sm font-bold text-text-primary">Connected! 🎉</p>
+          <p className="text-sm font-bold text-text-primary">
+            Connected as {username || 'Unknown'} 🎉
+          </p>
           <p className="text-xs text-text-secondary">You&apos;re all set to manage bugs</p>
         </div>
         <button

src/lib/bugzilla/client.test.ts

@@ -468,4 +468,47 @@ describe('BugzillaClient', () => {
       )
     })
   })
+
+  describe('whoAmI', () => {
+    it('should return current user info', async () => {
+      const mockUser = {
+        id: 12_345,
+        real_name: 'Test User',
+        name: 'testuser@mozilla.com',
+      }
+
+      global.fetch = vi.fn().mockResolvedValue({
+        ok: true,
+        json: () => Promise.resolve(mockUser),
+      })
+
+      const result = await client.whoAmI()
+
+      expect(result).toEqual(mockUser)
+      expect(fetch).toHaveBeenCalledWith(
+        expect.stringContaining(`${baseUrl}/whoami`),
+        expect.objectContaining({
+          headers: {
+            'X-BUGZILLA-API-KEY': mockApiKey,
+            'Content-Type': 'application/json',
+          },
+        }),
+      )
+    })
+
+    it('should throw error on 401 Unauthorized', async () => {
+      global.fetch = vi.fn().mockResolvedValue({
+        ok: false,
+        status: 401,
+        json: () =>
+          Promise.resolve({
+            error: true,
+            message: 'Invalid API key',
+            code: 401,
+          }),
+      })
+
+      await expect(client.whoAmI()).rejects.toThrow('Unauthorized: Invalid API key')
+    })
+  })
 })

src/lib/bugzilla/client.ts

@@ -7,6 +7,7 @@ import type {
   BugFilters,
   BugUpdate,
   BatchUpdateResult,
+  WhoAmIResponse,
 } from './types'
 
 const DEFAULT_TIMEOUT = 30_000 // 30 seconds
@@ -85,6 +86,14 @@ export class BugzillaClient {
     })
   }
 
+  /**
+   * Get current user info (authenticated user)
+   */
+  async whoAmI(): Promise<WhoAmIResponse> {
+    const url = `${this.baseUrl}/whoami`
+    return this.request<WhoAmIResponse>(url)
+  }
+
   /**
    * Update multiple bugs in batch
    */

src/lib/bugzilla/types.ts

@@ -74,3 +74,9 @@ export interface BatchUpdateResult {
   successful: number[]
   failed: Array<{ id: number; error: string }>
 }
+
+export interface WhoAmIResponse {
+  id: number
+  real_name: string
+  name: string
+}

src/store/slices/auth-slice.test.ts

@@ -4,12 +4,15 @@ import { createAuthSlice } from './auth-slice'
 import type { AuthSlice } from './auth-slice'
 
 // Use vi.hoisted to create mocks that can be referenced in vi.mock
-const { mockSaveApiKey, mockGetApiKey, mockClearApiKey, mockGetBugs } = vi.hoisted(() => ({
-  mockSaveApiKey: vi.fn(),
-  mockGetApiKey: vi.fn(),
-  mockClearApiKey: vi.fn(),
-  mockGetBugs: vi.fn(),
-}))
+const { mockSaveApiKey, mockGetApiKey, mockClearApiKey, mockGetBugs, mockWhoAmI } = vi.hoisted(
+  () => ({
+    mockSaveApiKey: vi.fn(),
+    mockGetApiKey: vi.fn(),
+    mockClearApiKey: vi.fn(),
+    mockGetBugs: vi.fn(),
+    mockWhoAmI: vi.fn(),
+  }),
+)
 
 // Mock ApiKeyStorage
 vi.mock('@/lib/storage/api-key-storage', () => ({
@@ -24,6 +27,7 @@ vi.mock('@/lib/storage/api-key-storage', () => ({
 vi.mock('@/lib/bugzilla/client', () => ({
   BugzillaClient: vi.fn().mockImplementation(() => ({
     getBugs: mockGetBugs,
+    whoAmI: mockWhoAmI,
   })),
 }))
 
@@ -36,6 +40,7 @@ describe('AuthSlice', () => {
     mockSaveApiKey.mockResolvedValue()
     mockGetApiKey.mockResolvedValue(null)
     mockGetBugs.mockResolvedValue([])
+    mockWhoAmI.mockResolvedValue({ id: 12345, real_name: 'Test User', name: 'test@mozilla.com' })
 
     useStore = create<AuthSlice>()((...args) => ({
       ...createAuthSlice(...args),
@@ -64,6 +69,12 @@ describe('AuthSlice', () => {
 
       expect(validationError).toBeNull()
     })
+
+    it('should have username null initially', () => {
+      const { username } = useStore.getState()
+
+      expect(username).toBeNull()
+    })
   })
 
   describe('setApiKey', () => {
@@ -92,6 +103,15 @@ describe('AuthSlice', () => {
       expect(isValid).toBe(true)
     })
 
+    it('should fetch and store username on successful validation', async () => {
+      const { setApiKey } = useStore.getState()
+      await setApiKey('test-api-key-123')
+
+      const { username } = useStore.getState()
+      expect(username).toBe('Test User')
+      expect(mockWhoAmI).toHaveBeenCalled()
+    })
+
     it('should set isValidating during validation', async () => {
       const { setApiKey } = useStore.getState()
       const promise = setApiKey('test-api-key-123')
@@ -178,6 +198,20 @@ describe('AuthSlice', () => {
       // Can't easily verify this without exposing storage instance
       // Trust that implementation calls storage.clearApiKey()
     })
+
+    it('should clear username', async () => {
+      const { setApiKey, clearApiKey } = useStore.getState()
+      await setApiKey('test-api-key-123')
+
+      const { username: usernameBefore } = useStore.getState()
+      expect(usernameBefore).toBe('Test User')
+
+      clearApiKey()
+
+      const { username: usernameAfter } = useStore.getState()
+
+      expect(usernameAfter).toBeNull()
+    })
   })
 
   describe('loadApiKey', () => {

src/store/slices/auth-slice.ts

@@ -13,6 +13,7 @@ export interface AuthSlice {
   isValid: boolean
   isValidating: boolean
   validationError: string | null
+  username: string | null
 
   // Actions
   setApiKey: (apiKey: string) => Promise<void>
@@ -29,6 +30,7 @@ export const createAuthSlice: StateCreator<AuthSlice> = (set, get) => ({
   isValid: false,
   isValidating: false,
   validationError: null,
+  username: null,
 
   // Set API key, save to storage, and validate
   setApiKey: async (apiKeyString: string) => {
@@ -51,7 +53,15 @@ export const createAuthSlice: StateCreator<AuthSlice> = (set, get) => ({
       const client = new BugzillaClient(apiKey, DEFAULT_BUGZILLA_URL)
       await client.getBugs({ status: ['NEW'], limit: 1 })
 
-      set({ isValid: true, isValidating: false, validationError: null })
+      // Fetch user info
+      const userInfo = await client.whoAmI()
+
+      set({
+        isValid: true,
+        isValidating: false,
+        validationError: null,
+        username: userInfo.real_name || userInfo.name,
+      })
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : 'Unknown error'
       set({ isValid: false, isValidating: false, validationError: errorMessage })
@@ -66,6 +76,7 @@ export const createAuthSlice: StateCreator<AuthSlice> = (set, get) => ({
       isValid: false,
       isValidating: false,
       validationError: null,
+      username: null,
     })
   },
 
@@ -86,7 +97,15 @@ export const createAuthSlice: StateCreator<AuthSlice> = (set, get) => ({
       const client = new BugzillaClient(apiKey, DEFAULT_BUGZILLA_URL)
       await client.getBugs({ status: ['NEW'], limit: 1 })
 
-      set({ isValid: true, isValidating: false, validationError: null })
+      // Fetch user info
+      const userInfo = await client.whoAmI()
+
+      set({
+        isValid: true,
+        isValidating: false,
+        validationError: null,
+        username: userInfo.real_name || userInfo.name,
+      })
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : 'Unknown error'
       set({