final polish 3

frontend/src/pages/account/AccountSettingsPage.tsx

@@ -13,6 +13,7 @@ import { Card } from '../../components/ui/card';
 import Button from '../../components/ui/button/Button';
 import Badge from '../../components/ui/badge/Badge';
 import PageMeta from '../../components/common/PageMeta';
+import { usePageContext } from '../../context/PageContext';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { useAuthStore } from '../../store/authStore';
 import {
@@ -40,6 +41,7 @@ export default function AccountSettingsPage() {
   const toast = useToast();
   const location = useLocation();
   const { user, refreshUser } = useAuthStore();
+  const { setPageInfo } = usePageContext();
   // Derive active tab from URL path
   const activeTab = getTabFromPath(location.pathname);
   const [loading, setLoading] = useState(true);
@@ -47,6 +49,16 @@ export default function AccountSettingsPage() {
   const [error, setError] = useState<string>('');
   const [success, setSuccess] = useState<string>('');
 
+  // Set page context for AppHeader - no selectors for account pages per audit Section 1
+  useEffect(() => {
+    setPageInfo({
+      title: 'Account Settings',
+      badge: { icon: <Settings className="w-4 h-4" />, color: 'indigo' },
+      selectorVisibility: 'none',
+    });
+    return () => setPageInfo(null);
+  }, [setPageInfo]);
+
   // Account settings state
   const [settings, setSettings] = useState<AccountSettings | null>(null);
   const [accountForm, setAccountForm] = useState({

frontend/src/pages/account/PlansAndBillingPage.tsx

@@ -16,6 +16,7 @@ import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
 import Button from '../../components/ui/button/Button';
 import { useToast } from '../../components/ui/toast/ToastContainer';
+import { usePageContext } from '../../context/PageContext';
 import { PricingPlan } from '../../components/ui/pricing-table';
 import PricingTable1 from '../../components/ui/pricing-table/pricing-table-1';
 import CreditCostBreakdownPanel from '../../components/billing/CreditCostBreakdownPanel';
@@ -59,6 +60,7 @@ function getTabFromPath(pathname: string): TabType {
 
 export default function PlansAndBillingPage() {
   const location = useLocation();
+  const { setPageInfo } = usePageContext();
   // Derive active tab from URL path
   const activeTab = getTabFromPath(location.pathname);
   const [loading, setLoading] = useState(true);
@@ -67,6 +69,16 @@ export default function PlansAndBillingPage() {
   const [purchaseLoadingId, setPurchaseLoadingId] = useState<number | null>(null);
   const [showCancelConfirm, setShowCancelConfirm] = useState(false);
 
+  // Set page context for AppHeader - no selectors for billing pages per audit Section 1
+  useEffect(() => {
+    setPageInfo({
+      title: 'Plans & Billing',
+      badge: { icon: <CreditCard className="w-4 h-4" />, color: 'purple' },
+      selectorVisibility: 'none',
+    });
+    return () => setPageInfo(null);
+  }, [setPageInfo]);
+
   // Data states
   const [creditBalance, setCreditBalance] = useState<CreditBalance | null>(null);
   const [packages, setPackages] = useState<CreditPackage[]>([]);

frontend/src/pages/account/UsageAnalyticsPage.tsx

@@ -8,6 +8,7 @@ import { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { TrendingUp, Activity, BarChart3, Zap, Calendar } from 'lucide-react';
 import PageMeta from '../../components/common/PageMeta';
+import { usePageContext } from '../../context/PageContext';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { getUsageAnalytics, UsageAnalytics, getCreditBalance, type CreditBalance } from '../../services/billing.api';
 import { Card } from '../../components/ui/card';
@@ -28,6 +29,7 @@ function getTabFromPath(pathname: string): TabType {
 export default function UsageAnalyticsPage() {
   const toast = useToast();
   const location = useLocation();
+  const { setPageInfo } = usePageContext();
   // Derive active tab from URL path
   const activeTab = getTabFromPath(location.pathname);
   const [analytics, setAnalytics] = useState<UsageAnalytics | null>(null);
@@ -35,6 +37,16 @@ export default function UsageAnalyticsPage() {
   const [loading, setLoading] = useState(true);
   const [period, setPeriod] = useState(30);
 
+  // Set page context for AppHeader - no selectors for usage pages per audit Section 1
+  useEffect(() => {
+    setPageInfo({
+      title: 'Usage & Analytics',
+      badge: { icon: <TrendingUp className="w-4 h-4" />, color: 'emerald' },
+      selectorVisibility: 'none',
+    });
+    return () => setPageInfo(null);
+  }, [setPageInfo]);
+
   useEffect(() => {
     loadData();
   }, [period]);