feat: destaca dados mockados e WIP no app

src/pages/ProfilePage.jsx

@@ -1,5 +1,7 @@
 import { useRef, useState, useEffect } from 'react'
 
+import { FeatureCallout } from '../components/FeatureState.jsx'
+import { featurePanelClass } from '../components/featureStateStyles.js'
 import { profileRepository } from '../repositories/profileRepository.js'
 import { authRepository } from '../repositories/authRepository.js'
 
@@ -59,13 +61,19 @@ export function ProfilePage({ navigate }) {
 
   return (
     <div className="mx-auto max-w-6xl space-y-6">
+      <FeatureCallout
+        description="Carregar perfil, avatar e logout usam integração. O botão de salvar preferências desta tela ainda grava só localmente."
+        status="partial"
+        title="Perfil com persistência parcial"
+      />
+
       <header>
         <h1 className="text-2xl font-bold tracking-tight text-[#f5f5f5]">Perfil</h1>
         <p className="mt-1 text-sm text-[#b8b8b8]">Dados locais do usuário logado e preferências básicas do shell.</p>
       </header>
 
       <div className="grid gap-6 lg:grid-cols-[1fr_360px]">
-        <section className={`${cardClass} p-6`}>
+        <section className={`${cardClass} ${featurePanelClass('partial')} p-6`}>
           <div className="mb-6 flex items-center gap-4">
             {profile.avatarUrl ? (
               <img
@@ -134,12 +142,12 @@ export function ProfilePage({ navigate }) {
               <button className="h-10 rounded-sm bg-[#3b82f6] px-4 text-sm font-semibold text-white" type="submit">
                 Salvar alterações
               </button>
-              {saved ? <span className="rounded bg-emerald-500/20 px-2.5 py-1 text-xs font-bold text-emerald-400">Preferências salvas localmente</span> : null}
+              {saved ? <span className="rounded bg-amber-500/20 px-2.5 py-1 text-xs font-bold text-amber-300">Preferências salvas localmente</span> : null}
             </div>
           </form>
         </section>
 
-        <aside className={`${cardClass} p-6`}>
+        <aside className={`${cardClass} ${featurePanelClass('live')} p-6`}>
           <h2 className="text-xl font-bold text-[#f5f5f5]">Resumo de acesso</h2>
           <dl className="mt-5 grid gap-4 text-sm">
             <Info label="Perfil" value={profile.role} />