fix: add metadata-based Stripe customer lookup in verify-checkout for reliable post-subscription plan detection (#538)

frontend/src/components/BlogWriter/BlogWriterUtils/HeaderBar.tsx

@@ -98,6 +98,29 @@ export const HeaderBar: React.FC<HeaderBarProps> = ({
           </Typography>
         </Stack>
 
+        <Box sx={{
+          flex: { xs: '1 1 100%', md: '0 1 auto' },
+          order: { xs: 3, md: 0 },
+          mt: { xs: 0.75, md: 0 },
+        }}>
+          <PhaseNavigation
+            phases={phases}
+            currentPhase={currentPhase}
+            onPhaseClick={onPhaseClick}
+            copilotKitAvailable={copilotKitAvailable}
+            actionHandlers={actionHandlers}
+            researchKeywords={researchKeywords}
+            hasResearch={hasResearch}
+            hasOutline={hasOutline}
+            outlineConfirmed={outlineConfirmed}
+            hasContent={hasContent}
+            contentConfirmed={contentConfirmed}
+            hasSEOAnalysis={hasSEOAnalysis}
+            seoRecommendationsApplied={seoRecommendationsApplied}
+            hasSEOMetadata={hasSEOMetadata}
+          />
+        </Box>
+
         <Stack direction="row" spacing={1} alignItems="center">
           <HeaderControls colorMode="light" showAlerts={true} showUser={true} />
 
@@ -161,25 +184,6 @@ export const HeaderBar: React.FC<HeaderBarProps> = ({
           </Menu>
         </Stack>
       </Stack>
-
-      <Box sx={{ mt: 1 }}>
-        <PhaseNavigation
-          phases={phases}
-          currentPhase={currentPhase}
-          onPhaseClick={onPhaseClick}
-          copilotKitAvailable={copilotKitAvailable}
-          actionHandlers={actionHandlers}
-          researchKeywords={researchKeywords}
-          hasResearch={hasResearch}
-          hasOutline={hasOutline}
-          outlineConfirmed={outlineConfirmed}
-          hasContent={hasContent}
-          contentConfirmed={contentConfirmed}
-          hasSEOAnalysis={hasSEOAnalysis}
-          seoRecommendationsApplied={seoRecommendationsApplied}
-          hasSEOMetadata={hasSEOMetadata}
-        />
-      </Box>
     </Box>
   );
 };

frontend/src/components/BlogWriter/BrainstormButton.tsx

@@ -138,6 +138,35 @@ export const BrainstormButton: React.FC<BrainstormButtonProps> = ({
         )}
       </button>
 
+      {gscConnected && (
+        <span
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '5px',
+            padding: '4px 10px',
+            borderRadius: '12px',
+            fontSize: '12px',
+            fontWeight: 500,
+            color: '#2e7d32',
+            background: '#e8f5e9',
+            border: '1px solid #a5d6a7',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          <span
+            style={{
+              width: '8px',
+              height: '8px',
+              borderRadius: '50%',
+              background: '#4caf50',
+              boxShadow: '0 0 6px #4caf50',
+            }}
+          />
+          GSC
+        </span>
+      )}
+
       <GSCBrainstormModal
         open={showModal}
         onClose={() => {