fix(frontend): use consistent avatar fallback in navbar

[GautamKumarOffical]

fix(frontend): use consistent avatar fallback in navbar

The navbar account menu was using a plain violet initial-letter fallback (InitialAvatar) while profile and creator views use the design-system Avatar component with a BoringAvatar marble gradient fallback.

This PR updates InitialAvatar to use the shared AvatarFallback component, so the same user looks the same everywhere.

Fixes #13411

[CLAassistant]

All committers have signed the CLA.

[github-actions]

This PR targets the master branch but does not come from dev or a hotfix/* branch.

Automatically setting the base branch to dev.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c93d998f-d9a3-4326-8185-95967d87c0f2

📥 Commits

Reviewing files that changed from the base of the PR and between e2711b1 and f46093b.

📒 Files selected for processing (1)

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

📜 Recent review details

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

• GitHub Check: lint
• GitHub Check: integration_test
• GitHub Check: check API types
• GitHub Check: Check PR Status
• GitHub Check: conflicts
• GitHub Check: Analyze (typescript)
• GitHub Check: end-to-end tests
• GitHub Check: Analyze (python)

🧰 Additional context used

📓 Path-based instructions (13)

autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Use Node.js 21+ with pnpm package manager for frontend development
Always run 'pnpm format' for formatting and linting code in frontend development

Format frontend code using pnpm format

autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Fully capitalize acronyms in symbols, e.g. graphID, useBackendAPI
No linter suppressors (// @ts-ignore``, // eslint-disable) — fix the actual issue

Files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

autogpt_platform/frontend/**/*.{tsx,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

autogpt_platform/frontend/**/*.{tsx,ts}: Use function declarations for components and handlers (not arrow functions) in React components
Only use arrow functions for small inline lambdas (map, filter, etc.) in React components
Use PascalCase for component names and camelCase with 'use' prefix for hook names in React
Use Tailwind CSS utilities only for styling in frontend components
Use design system components from 'src/components/' (atoms, molecules, organisms) in frontend development
Never use 'src/components/legacy/' in frontend code
Only use Phosphor Icons (@phosphor-icons/react) for icons in frontend components
Use generated API hooks from '@/app/api/__generated__/endpoints/' instead of deprecated 'BackendAPI' or 'src/lib/autogpt-server-api/'
Use React Query for server state (via generated hooks) in frontend development
Default to client components ('use client') in Next.js; only use server components for SEO or extreme TTFB needs
Use '' component for rendering errors in frontend UI; use toast notifications for mutation errors; use 'Sentry.captureException()' for manual exceptions
Separate render logic from data/behavior in React components; keep comments minimal (code should be self-documenting)

Files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

autogpt_platform/frontend/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

autogpt_platform/frontend/**/*.{ts,tsx}: No barrel files or 'index.ts' re-exports in frontend code
Regenerate API hooks with 'pnpm generate:api' after backend OpenAPI spec changes in frontend development

autogpt_platform/frontend/**/*.{ts,tsx}: Use function declarations (not arrow functions) for components/handlers
No any types unless the value genuinely can be anything
Keep render functions and hooks under ~50 lines; extract named helpers or sub-components when they grow longer

Files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

autogpt_platform/frontend/src/components/**/*.{tsx,ts}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Structure React components as: ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts (exception: small 3-4 line components can be inline; render-only components can be direct files)

Files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

autogpt_platform/frontend/src/components/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Structure components as ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts, use design system components from src/components/ (atoms, molecules, organisms), and never use src/components/__legacy__/*

Files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

autogpt_platform/frontend/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

autogpt_platform/frontend/src/**/*.{ts,tsx}: Use generated API hooks from @/app/api/__generated__/endpoints/ following the pattern use{Method}{Version}{OperationName}, and regenerate with pnpm generate:api
Separate render logic from business logic using component.tsx + useComponent.ts + helpers.ts pattern, colocate state when possible and avoid creating large components, use sub-components in local /components folder
Use function declarations for components and handlers, use arrow functions only for callbacks
Do not use useCallback or useMemo unless asked to optimise a given function

autogpt_platform/frontend/src/**/*.{ts,tsx}: Keep files under ~200 lines; extract sub-components or hooks into their own files when a file grows beyond this
Use generated API hooks from @/app/api/__generated__/endpoints/ with pattern use{Method}{Version}{OperationName}
Always import the -Icon-suffixed alias from @phosphor-icons/react (e.g. TrashIcon, PlusIcon, SquareIcon) — bare exports are deprecated
Do not use useCallback or useMemo unless asked to optimize a given function
Never use src/components/__legacy__/* — use design system components from src/components/

Files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

autogpt_platform/frontend/**/*.{tsx,css}

📄 CodeRabbit inference engine (AGENTS.md)

Use Tailwind CSS only for styling, use design tokens, and use Phosphor Icons only

Files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

autogpt_platform/frontend/src/**/*.tsx

📄 CodeRabbit inference engine (AGENTS.md)

Component props should use interface Props { ... } (not exported) unless the interface needs to be used outside the component

Files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

autogpt_platform/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Never type with any, if no types available use unknown

Files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

autogpt_platform/frontend/**/*.{tsx,jsx}

📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)

autogpt_platform/frontend/**/*.{tsx,jsx}: No dark: Tailwind classes — the design system handles dark mode
Use Next.js <Link> for internal navigation — never raw <a> tags
Use Tailwind CSS only for styling with design tokens and Phosphor Icons only

Files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

autogpt_platform/frontend/src/**/components/**/*.{tsx,jsx}

📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)

Put sub-components in local components/ folder; component props should be type Props = { ... } (not exported) unless used outside the component

Files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

autogpt_platform/frontend/src/**/components/**/*.{ts,tsx}

📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)

Structure components as ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts

Files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

autogpt_platform/frontend/src/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)

Avoid index and barrel files

Files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

🧠 Learnings (7)

📚 Learning: 2026-03-24T02:05:04.672Z

Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12526
File: autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx:0-0
Timestamp: 2026-03-24T02:05:04.672Z
Learning: When gating React component logic on a React Query result (e.g., hooks like `useQuery` / `useGetV2GetCopilotUsage`), prefer destructuring and checking `isSuccess` (or aliasing it to a meaningful boolean like `isSuccess: hasUsage`) instead of relying on `!isLoading`. Reason: `isLoading` can be `false` in error/idle states where `data` may still be `undefined`, while `isSuccess` indicates the query completed successfully and `data` is populated.

Applied to files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

📚 Learning: 2026-04-01T18:54:16.035Z

Learnt from: Bentlybro
Repo: Significant-Gravitas/AutoGPT PR: 12633
File: autogpt_platform/frontend/src/app/(platform)/library/components/AgentFilterMenu/AgentFilterMenu.tsx:3-10
Timestamp: 2026-04-01T18:54:16.035Z
Learning: In the frontend, the legacy Select component at `@/components/__legacy__/ui/select` is an intentional, codebase-wide visual-consistency pattern. During code reviews, do not flag or block PRs merely for continuing to use this legacy Select. If a migration to the newer design-system Select is desired, bundle it into a single dedicated cleanup/migration PR that updates all Select usages together (e.g., avoid piecemeal replacements).

Applied to files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

📚 Learning: 2026-04-07T09:24:16.582Z

Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12686
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/__tests__/PainPointsStep.test.tsx:1-19
Timestamp: 2026-04-07T09:24:16.582Z
Learning: In Significant-Gravitas/AutoGPT’s `autogpt_platform/frontend` (Vite + `vitejs/plugin-react` with the automatic JSX transform), do not flag usages of React types/components (e.g., `React.ReactNode`) in `.ts`/`.tsx` files as missing `React` imports. Since the React namespace is made available by the project’s TS/Vite setup, an explicit `import React from 'react'` or `import type { ReactNode } ...` is not required; only treat it as missing if typechecking (e.g., `pnpm types`) would actually fail.

Applied to files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

📚 Learning: 2026-04-02T05:43:49.128Z

Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12640
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/WelcomeStep.tsx:13-13
Timestamp: 2026-04-02T05:43:49.128Z
Learning: Do not flag `import { Question } from "phosphor-icons/react"` as an invalid import. `Question` is a valid named export from `phosphor-icons/react` (as reflected in the package’s generated `.d.ts` files and re-exports via `dist/index.d.ts`), so it should be treated as a supported named export during code reviews.

Applied to files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

📚 Learning: 2026-04-13T13:11:07.445Z

Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12764
File: autogpt_platform/frontend/src/app/(platform)/library/components/SitrepItem/SitrepItem.tsx:143-145
Timestamp: 2026-04-13T13:11:07.445Z
Learning: In `autogpt_platform/frontend`, do not flag direct interpolation of `executionID` UUID strings into URL query parameters (e.g., `activeItem=${executionID}` in JSX/Next links). If the value is a UUID string matching `[0-9a-f-]`, it contains no reserved URL characters, so additional `encodeURIComponent` or Next.js object-based `href` encoding is unnecessary. Only treat it as an encoding issue if the query-param value is not guaranteed to be UUID-formatted (i.e., may include characters outside `[0-9a-f-]`).

Applied to files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

📚 Learning: 2026-04-15T22:49:06.896Z

Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/ExecutionsTable.tsx:0-0
Timestamp: 2026-04-15T22:49:06.896Z
Learning: In the AutoGPT frontend (React Query + toast/ErrorCard patterns), do not require `Sentry.captureException` in React Query mutation `catch` blocks. React Query handles error propagation for mutation paths, so follow the established pattern: show toast notifications for mutation errors and use `ErrorCard` for render/fetch errors. Only add `Sentry.captureException` for truly manual/unexpected exception paths that are outside React Query’s control (e.g., standalone async utilities or event handlers not wired through React Query).

Applied to files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

📚 Learning: 2026-05-16T12:12:12.246Z

Learnt from: Abhi1992002
Repo: Significant-Gravitas/AutoGPT PR: 13138
File: autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/helpers.tsx:1-1
Timestamp: 2026-05-16T12:12:12.246Z
Learning: Code reviews for the Navbar component set should treat the `MenuItemGroup` contract as shared between `AccountMenu` (desktop) and `MobileNavbar`. If a PR attempts to migrate `AccountMenu` off the legacy `IconType` imported from `src/components/__legacy__/ui/icons.tsx`, require that the migration be coordinated with `MobileNavbar` as part of the same follow-up change (or explicitly defer the `MobileNavbar` side to a dedicated follow-up PR) to avoid leaving the shared contract in an inconsistent state. Do not block an otherwise-complete `AccountMenu` PR solely due to the pending cross-consumer legacy `IconType` dependency.

Applied to files:

• autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

🪛 GitHub Actions: PR Overlap Detection / 0_check-overlaps.txt

autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

[error] 1-1: Merge conflicts detected for PR #13426. File path causing conflicts: autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/ -> InitialAvatar.tsx (2 conflicts, ~19 lines).

🪛 GitHub Actions: PR Overlap Detection / check-overlaps

autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx

[error] 1-1: Merge conflicts detected against PR #13426. File path: autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/ includes InitialAvatar.tsx (2 conflicts, ~19 lines).

🔇 Additional comments (1)

autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx (1)

1-4: LGTM!

Also applies to: 16-16

---

Walkthrough

The navbar account avatar fallback now renders the user’s name inside AvatarFallback instead of a computed initial. The avatar import was also reformatted into a multi-line named import.

Changes

Navbar avatar fallback update

Layer / File(s)	Summary
InitialAvatar fallback rendering autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx	InitialAvatar now imports AvatarFallback with AvatarImage and renders name inside the fallback instead of a computed uppercase initial.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• Significant-Gravitas/AutoGPT#13155: Also changes InitialAvatar.tsx in the navbar account menu and adjusts avatar fallback rendering behavior.

Suggested reviewers

• kcze
• majdyz
• 0ubbe

Poem

🐰 I hopped by the navbar with a grin,
and tucked the user’s name right in.
No lonely initial, just a gentle glow,
where avatar fallbacks softly show.

🚥 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
Title check	✅ Passed	The title clearly matches the navbar avatar fallback consistency change.
Description check	✅ Passed	The description accurately describes the navbar avatar fallback update and its purpose.
Linked Issues check	✅ Passed	The navbar fallback now uses the shared avatar fallback, addressing the inconsistent user avatar treatment in #13411.
Out of Scope Changes check	✅ Passed	Only the navbar avatar fallback and import formatting changed; no unrelated scope is evident.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.69%. Comparing base (e2711b1) to head (f46093b).

Additional details and impacted files

@@            Coverage Diff             @@
##              dev   #13433      +/-   ##
==========================================
- Coverage   74.71%   74.69%   -0.03%     
==========================================
  Files        2537     2537              
  Lines      192315   192310       -5     
  Branches    18925    18925              
==========================================
- Hits       143697   143646      -51     
- Misses      44493    44533      +40     
- Partials     4125     4131       +6     

Flag	Coverage Δ
platform-frontend-e2e	31.88% <ø> (-0.50%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Components	Coverage Δ
Platform Backend	81.98% <ø> (ø)
Platform Frontend	47.39% <ø> (-0.15%)	⬇️
AutoGPT Libs	∅ <ø> (∅)
Classic AutoGPT	28.43% <ø> (ø)

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request.