diff --git a/frontend/src/components/common/PageHeader.tsx b/frontend/src/components/common/PageHeader.tsx
index b0b3be25..31414bdf 100644
--- a/frontend/src/components/common/PageHeader.tsx
+++ b/frontend/src/components/common/PageHeader.tsx
@@ -8,7 +8,7 @@ import { useSiteStore } from '../../store/siteStore';
import { useSectorStore } from '../../store/sectorStore';
import { trackLoading } from './LoadingStateMonitor';
import { useErrorHandler } from '../../hooks/useErrorHandler';
-import { usePageContext } from '../../context/PageContext';
+import { usePageContext, SelectorVisibility } from '../../context/PageContext';
interface PageHeaderProps {
title: string;
@@ -28,6 +28,13 @@ interface PageHeaderProps {
workflowInsights?: any[]; // Kept for backwards compat but not rendered
/** Right-side actions slot */
actions?: ReactNode;
+ /**
+ * Controls site/sector selector visibility in AppHeader per audit Section 1:
+ * - 'both': Show both site and sector selectors (Planner, Writer pages) - DEFAULT
+ * - 'site-only': Show only site selector (Automation page)
+ * - 'none': Hide both selectors (Account, Billing, Thinker pages)
+ */
+ selectorVisibility?: SelectorVisibility;
}
export default function PageHeader({
@@ -42,6 +49,7 @@ export default function PageHeader({
badge,
hideSiteSector = false,
actions,
+ selectorVisibility = 'both',
}: PageHeaderProps) {
const { activeSite } = useSiteStore();
const { loadSectorsForSite } = useSectorStore();
@@ -54,9 +62,9 @@ export default function PageHeader({
const parentModule = parent || breadcrumb;
// Update page context with title and badge info for AppHeader
- const pageInfoKey = useMemo(() => `${title}|${parentModule}`, [title, parentModule]);
+ const pageInfoKey = useMemo(() => `${title}|${parentModule}|${selectorVisibility}`, [title, parentModule, selectorVisibility]);
useEffect(() => {
- setPageInfo({ title, parent: parentModule, badge });
+ setPageInfo({ title, parent: parentModule, badge, selectorVisibility });
return () => setPageInfo(null);
}, [pageInfoKey, badge?.color]);
diff --git a/frontend/src/context/PageContext.tsx b/frontend/src/context/PageContext.tsx
index 7615925c..f1b5bc45 100644
--- a/frontend/src/context/PageContext.tsx
+++ b/frontend/src/context/PageContext.tsx
@@ -1,9 +1,19 @@
/**
* Page Context - Shares current page info with header
* Allows pages to set title, parent module, badge for display in AppHeader
+ * Also controls page-specific visibility of site/sector selectors
*/
import React, { createContext, useContext, useState, ReactNode } from 'react';
+/**
+ * Selector visibility configuration per audit Section 1 requirements:
+ * - 'both': Show both site and sector selectors (Planner, Writer pages)
+ * - 'site-only': Show only site selector (Automation page)
+ * - 'none': Hide both selectors (Account, Billing, Thinker pages)
+ * Default: 'both' (for backward compatibility)
+ */
+export type SelectorVisibility = 'both' | 'site-only' | 'none';
+
interface PageInfo {
title: string;
parent?: string; // Parent module name (e.g., "Planner", "Writer")
@@ -11,6 +21,8 @@ interface PageInfo {
icon: ReactNode;
color: 'blue' | 'green' | 'purple' | 'orange' | 'red' | 'indigo' | 'yellow' | 'pink' | 'emerald' | 'cyan' | 'amber' | 'teal';
};
+ /** Controls site/sector selector visibility in AppHeader. Default: 'both' */
+ selectorVisibility?: SelectorVisibility;
}
interface PageContextType {
diff --git a/frontend/src/layout/AppHeader.tsx b/frontend/src/layout/AppHeader.tsx
index 2b4f275c..a3653116 100644
--- a/frontend/src/layout/AppHeader.tsx
+++ b/frontend/src/layout/AppHeader.tsx
@@ -117,10 +117,14 @@ const AppHeader: React.FC = () => {
{/* Header Metrics */}
- {/* Site and Sector Selector - Desktop */}
-
-
-
+ {/* Site and Sector Selector - Desktop (visibility controlled by page context) */}
+ {pageInfo?.selectorVisibility !== 'none' && (
+
+
+
+ )}
{/* Search Icon */}