Anu 1.2

apps/backend/app/api/routes/auth/api.py

@@ -257,6 +257,9 @@ async def update_profile(
     if payload.personal_info is not None:
         updates["personal_info"] = payload.personal_info.model_dump()
 
+    if payload.persona is not None:
+        updates["persona"] = payload.persona
+
     if updates:
         await update_user_profile(current_user.uid, updates)
 

apps/backend/app/api/routes/auth/schema.py

@@ -108,6 +108,8 @@ class UserProfileResponse(BaseModel):
     certifications: list[Certification] = Field(default_factory=list)
     portfolio_settings: PortfolioSettings | None = None
     personal_info: PersonalInfo | None = None
+    # Role picked during onboarding (frontend/backend/fullstack/devops/qa/designer/exploring)
+    persona: str | None = None
     onboarding_completed: bool = False
     # Workspace migration fields (T25)
     workspace_setup_at: int | None = None
@@ -128,6 +130,7 @@ class UpdateProfileRequest(BaseModel):
     certifications: list[Certification] | None = None
     portfolio_settings: PortfolioSettings | None = None
     personal_info: PersonalInfo | None = None
+    persona: str | None = None
 
 
 class OkResponse(BaseModel):

apps/web/src/app/app/api-keys/page.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef } from "react"
 import { AddApiKeyDialog } from "@/components/api-key-vault/add-api-key-dialog"
 import { ApiKeyList } from "@/components/api-key-vault/api-key-list"
 import { useApiKeyVaultStore, type ApiKeyEntry, type ApiKeyEnv } from "@/store/api-key-vault-store"
-import { ShieldCheck } from "lucide-react"
+import { ToolHeader } from "@/components/tools/tool-header"
 import { useVaultGuard } from "@/hooks/use-vault-guard"
 import { VaultLockedPlaceholder } from "@/components/vault-locked-placeholder"
 import { VaultRestoringSkeleton } from "@/components/vault-restoring-skeleton"
@@ -44,7 +44,7 @@ export default function ApiKeyVaultPage() {
     const { user, loading } = useAuth(true)
     const encryptionKey = useCipherKey()
     const { isUnlocked, isRestoring } = useVaultGuard()
-    const { entries, setEntries, setLoading, clearEntries } = useApiKeyVaultStore()
+    const { setEntries, setLoading, clearEntries } = useApiKeyVaultStore()
     const isMobile = useIsMobile()
     const loadedRef = useRef(false)
 
@@ -130,39 +130,19 @@ export default function ApiKeyVaultPage() {
                     : "h-full flex flex-col container mx-auto px-4 md:px-6 lg:px-8 min-h-0"
             }
         >
+            <ToolHeader
+                title="API Keys"
+                description="AES-256-GCM encrypted on your device — server never sees plaintext."
+                toolId="/app/api-keys"
+                className="shrink-0"
+            />
+
             {!isMobile && (
-                <div className="flex justify-between items-end py-6 shrink-0 gap-4">
-                    <div className="min-w-0">
-                        <div className="flex items-center gap-3">
-                            <h1 className="text-3xl font-bold tracking-tight">API Keys</h1>
-                            {entries.length > 0 && (
-                                <span className="text-sm font-medium text-muted-foreground bg-muted/60 px-2 py-0.5 rounded-full">
-                                    {entries.length}
-                                </span>
-                            )}
-                        </div>
-                        <p className="text-sm text-muted-foreground mt-1 flex items-center gap-1.5">
-                            <ShieldCheck className="h-3.5 w-3.5 text-emerald-600 dark:text-emerald-500" />
-                            AES-256-GCM encrypted on your device — server never sees plaintext.
-                        </p>
-                    </div>
+                <div className="flex justify-end py-3 shrink-0">
                     <AddApiKeyDialog />
                 </div>
             )}
 
-            {isMobile && (
-                <div className="px-4 pt-4 pb-2 shrink-0">
-                    <div className="flex items-center justify-between">
-                        <h1 className="text-2xl font-bold tracking-tight">API Keys</h1>
-                        {entries.length > 0 && (
-                            <span className="text-xs font-medium text-muted-foreground bg-muted/60 px-2 py-0.5 rounded-full">
-                                {entries.length} stored
-                            </span>
-                        )}
-                    </div>
-                </div>
-            )}
-
             <div className="flex-1 min-h-0 flex flex-col">
                 <ApiKeyList />
             </div>

apps/web/src/app/app/environment-manager/page.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef } from "react"
 import { AddEnvironmentSetDialog } from "@/components/environment-manager/add-environment-set-dialog"
 import { EnvironmentSetList } from "@/components/environment-manager/environment-set-list"
+import { ToolHeader } from "@/components/tools/tool-header"
 import { useEnvironmentManagerStore, type EnvSetEntry } from "@/store/environment-manager-store"
 import { useVaultGuard } from "@/hooks/use-vault-guard"
 import { VaultLockedPlaceholder } from "@/components/vault-locked-placeholder"
@@ -118,9 +119,11 @@ export default function EnvironmentManagerPage() {
             }
         >
             {!isMobile && (
-                <div className="flex justify-between items-center py-6 shrink-0">
-                    <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
-                    <AddEnvironmentSetDialog />
+                <div className="shrink-0">
+                    <ToolHeader title={t("title")} toolId="/app/environment-manager" />
+                    <div className="flex justify-end py-3">
+                        <AddEnvironmentSetDialog />
+                    </div>
                 </div>
             )}
 

apps/web/src/app/dashboard/page.tsx

@@ -273,7 +273,7 @@ const DashboardPage: React.FC = () => {
         mobileOnly
       />
 
-      <div className="px-3 md:px-8 pb-24 md:pb-12">
+      <div className="px-3 pt-4 md:px-8 md:pt-8 pb-24 md:pb-12">
         <div className="max-w-7xl mx-auto space-y-5 md:space-y-8">
           {/* ── Desktop Hero (inside padded container for alignment) ── */}
           <RevealItem index={0}>