popeye-cli 1.9.1 → 1.9.3

package/src/workflow/audit-analyzer.ts

@@ -185,13 +185,25 @@ ${scan.dockerComposeContent}
   // Framework-specific checks
   const frameworks = scan.components.map((c) => c.framework).filter(Boolean);
   if (frameworks.some((f) => f === 'next')) {
-    sections.push(`## Next.js-Specific Checks (IMPORTANT)
-- Check for hydration mismatches: event handlers (onClick, onSubmit, onChange) in Server Components (files WITHOUT 'use client' directive) cause hydration errors
+    sections.push(`## Next.js-Specific Checks (IMPORTANT — Hydration Errors)
+
+### Server vs Client Component Architecture
+- Pages (page.tsx) should be Server Components by default — do NOT add 'use client' to pages
+- Only extract interactive parts (forms, accordions, modals, toggles) into separate Client Component files
+- If a page has 'use client' ONLY because of one interactive section (e.g. FAQ accordion), flag as major issue: extract the interactive part into its own 'use client' component file and keep the page as a Server Component
+- Server Components never hydrate, so they cannot have hydration mismatches
+
+### Hydration Mismatch Detection
+- Check for event handlers (onClick, onSubmit, onChange) in Server Components (files WITHOUT 'use client' directive) — these cause hydration errors
 - Check for \`new Date()\`, \`Date.now()\`, \`Math.random()\` in Server Components — these produce different values on server vs client
 - Check for \`typeof window\`, \`localStorage\`, \`navigator\` usage in render path of Server Components
+- Check for \`<script>\` tags with dangerouslySetInnerHTML in Client Components — add suppressHydrationWarning or move to Server Component
 - Check for invalid HTML nesting: \`<p>\` inside \`<p>\`, \`<div>\` inside \`<p>\`, block elements inside inline elements
+
+### Component Directive Verification
 - Verify that components with hooks (useState, useEffect, useRef) have 'use client' directive
-- Check for proper 'use client' boundary — interactive components (forms, buttons with handlers) must be Client Components`);
+- Components with form handlers (onSubmit) or interactive elements must be Client Components
+- Components rendering \`new Date().getFullYear()\` in JSX should be Client Components OR use suppressHydrationWarning`);
   }
   if (frameworks.some((f) => f === 'react' || f === 'vue' || f === 'svelte')) {
     sections.push(`## Frontend Framework Checks

package/src/workflow/tester.ts

@@ -134,6 +134,14 @@ export function getComponentPlaybook(language: OutputLanguage): string {
 - Verify SEO meta tags with custom assertions (title, description, OG tags)
 - Test responsive layouts with viewport size assertions
 - Lighthouse CI for performance regression testing
+
+### Hydration Error Prevention (CRITICAL for Next.js)
+- Verify page.tsx files are Server Components (NO 'use client') — pages should not hydrate
+- Interactive sections (FAQ accordions, forms, modals) must be in separate 'use client' component files
+- Check that components with event handlers (onClick, onSubmit) or hooks (useState) have 'use client'
+- Check that <script> tags with dangerouslySetInnerHTML use suppressHydrationWarning
+- Verify no new Date(), Math.random(), or window/localStorage access in Server Component render paths
+- Run \`npm run build\` to catch hydration warnings at build time
 `.trim();
 
   if (language === 'python') return pythonPlaybook;

package/tests/generators/database.test.ts

@@ -299,12 +299,13 @@ describe('generateDockerComposeWithDb', () => {
 });
 
 describe('generateAllDockerComposeWithDb', () => {
-  it('should include postgres, frontend, backend, and website services', () => {
+  it('should include postgres, frontend, and backend services (no website)', () => {
     const result = generateAllDockerComposeWithDb(TEST_PROJECT);
     expect(result).toContain('postgres:');
     expect(result).toContain('frontend:');
     expect(result).toContain('backend:');
-    expect(result).toContain('website:');
+    // Website runs outside Docker (npm run dev / npm start)
+    expect(result).not.toContain('website:');
   });
 
   it('should have backend depends_on postgres with healthy condition', () => {

package/tests/generators/fe-be-db-integration.test.ts

@@ -328,11 +328,12 @@ describe('Docker Compose: Fullstack service wiring', () => {
 describe('Docker Compose: All project service wiring', () => {
   const compose = generateAllDockerComposeWithDb(TEST_PROJECT);
 
-  it('should include frontend, backend, website, and postgres services', () => {
+  it('should include frontend, backend, and postgres services (no website)', () => {
     expect(compose).toContain('frontend:');
     expect(compose).toContain('backend:');
-    expect(compose).toContain('website:');
     expect(compose).toContain('postgres:');
+    // Website runs outside Docker (npm run dev / npm start)
+    expect(compose).not.toContain('website:');
   });
 
   it('backend should depend on postgres with health condition', () => {
@@ -344,7 +345,7 @@ describe('Docker Compose: All project service wiring', () => {
     expect(compose).toContain(networkName);
     // Count network references - should appear in services + network definition
     const networkCount = (compose.match(new RegExp(networkName, 'g')) || []).length;
-    expect(networkCount).toBeGreaterThanOrEqual(5); // 4 services + 1 definition
+    expect(networkCount).toBeGreaterThanOrEqual(4); // 3 services + 1 definition
   });
 
   it('frontend API URL should point to backend service', () => {

package/tests/generators/website-landing.test.ts

@@ -121,7 +121,10 @@ describe('generateWebsiteLandingPageWithInfo', () => {
     const result = generateWebsiteLandingPageWithInfo('gateco', makeContext());
     expect(result.code).toContain('Is it secure?');
     expect(result.code).toContain('Does it scale?');
-    expect(result.code).toContain('FaqItem');
+    // Uses FaqSection component (separate client component) instead of inline FaqItem
+    expect(result.code).toContain('FaqSection');
+    // Page should NOT have 'use client' — FAQ is isolated in FaqSection component
+    expect(result.code).not.toContain("'use client'");
   });
 
   it('renders pricing teaser from context pricing', () => {

package/tests/generators/website-sections.test.ts

@@ -15,6 +15,7 @@ import {
   generateFaqSection,
   buildFaqItemsDeclaration,
   generateFaqItemComponent,
+  generateFaqSectionComponent,
   generatePricingTeaserSection,
 } from '../../src/generators/templates/website-sections.js';
 import type { WebsiteStrategyDocument } from '../../src/types/website-strategy.js';
@@ -188,9 +189,9 @@ describe('generateSocialProofSection', () => {
 describe('generateFaqSection', () => {
   it('renders FAQ from objections', () => {
     const { jsx, info, needsClientDirective } = generateFaqSection(makeStrategy());
-    // FAQ section JSX references faqItems via runtime mapping
-    expect(jsx).toContain('FaqItem');
-    expect(jsx).toContain('faqItems.map');
+    // FAQ section uses FaqSection component (separate client component)
+    expect(jsx).toContain('FaqSection');
+    expect(jsx).toContain('faqItems');
     expect(info.dataSource).toBe('strategy');
     expect(needsClientDirective).toBe(true);
   });
@@ -207,6 +208,16 @@ describe('generateFaqSection', () => {
     expect(component).toContain('onClick');
   });
 
+  it('generates standalone FaqSection client component', () => {
+    const component = generateFaqSectionComponent();
+    expect(component).toContain("'use client'");
+    expect(component).toContain('useState');
+    expect(component).toContain('FaqSection');
+    expect(component).toContain('FaqItem');
+    expect(component).toContain('aria-expanded');
+    expect(component).toContain('ChevronDown');
+  });
+
   it('skips when no objections', () => {
     const strategy = makeStrategy({
       icp: { primaryPersona: 'devs', painPoints: [], goals: [], objections: [] },