#551
Improve profile page with useful personal and account information
Problem
The profile page should provide a clearer and more useful overview of the signed-in user, account details, workspace context, and relevant product state.
Scope
Improve the profile page so it surfaces practical personal and account information rather than feeling sparse or purely decorative.
Areas to consider
- User identity and account details.
- Workspace membership and role information.
- API key or usage-related summaries, where appropriate.
- Billing or plan context, where appropriate.
- Security and account management actions.
Acceptance criteria
- The profile page shows useful information for the current user.
- Sensitive information is not exposed accidentally.
- Empty states are clear and helpful.
- The page works well on mobile and desktop.
- Existing account-management flows remain accessible.
Activity
2Issue understanding
The `/settings/profile` page is a read-only analytics dashboard (activity charts, top models, heatmaps, credit/BYOK usage) but lacks practical account context. It shows no workspace role, plan/billing status, API key summary, or security actions — users have to navigate elsewhere to find basic account info. The page lives at `apps/web/src/app/(dashboard)/settings/profile/page.tsx` with the main component at `apps/web/src/components/(gateway)/settings/profile/ProfileDashboard.tsx`. The data fetcher is `getOwnProfileSnapshot()` in `apps/web/src/lib/fetchers/profile/getProfileSnapshot.ts`. Existing account management pages (`/settings/account/details`, `/settings/keys`, `/settings/credits`) remain untouched; the profile page should surface summaries + quick links to them.AI Agent Prompt (Copy/Paste)
Improve the /settings/profile page (apps/web/src/app/(dashboard)/settings/profile/page.tsx, main component at apps/web/src/components/(gateway)/settings/profile/ProfileDashboard.tsx) to surface useful personal and account information.
Specifically:
1. Fetch and display the user's workspace role (from workspace_members table) and list workspace memberships — reuse patterns from apps/web/src/app/(dashboard)/settings/teams/teamsData.ts.
2. Add a summary section showing plan/billing status (fetch wallet balance and plan tier if available; link to /settings/credits).
3. Add an API keys summary card — show count of active keys and a link to /settings/keys.
4. Add a security/account summary card linking to MFA status, account details, and danger zone pages.
5. Update the SettingsPageHeader description to reflect the page is now an account overview (not just "Create a share card...").
6. Keep the existing analytics dashboard sections intact below the new summary cards.
7. Do NOT expose sensitive PII (full keys, secrets, raw IDs). Respect the existing obfuscation data attribute.
8. Empty states should show helpful placeholder text where no data exists.
Reproduce first by reading ProfileDashboard.tsx and getProfileSnapshot.ts, then inspect teamsData.ts and AccountSettingsClient.tsx for roles/teams/billing patterns. Also check apps/web/src/components/ui/ for available card/badge/button primitives. Run pnpm --filter @ai-stats/web lint and pnpm --filter @ai-stats/web typecheck after changes.Clarifying Questions (Optional)
- Should the plan/billing info show current credit balance from wallets, or a plan name from a subscriptions table? I assumed wallet balance (used in
teamsData.ts). - Should the API key summary show the count of active keys, or just a link? I assumed count + link.
This is an automated response - a team member will follow up shortly.
AI-101