@auto-engineer/component-implementor-react 1.102.0 → 1.104.0

package/src/commands/implement-component.test.ts

@@ -70,6 +70,10 @@ describe('implement-component', () => {
         success: true,
         llmCalls: 4,
         fixIterations: 1,
+        typeFixIterations: 0,
+        testFixIterations: 0,
+        lintFixIterations: 0,
+        storyFixIterations: 0,
       });
 
       const result = await handleImplementComponent(makeCommand());
@@ -102,6 +106,10 @@ describe('implement-component', () => {
         error: 'Step "Type Fix Loop" failed: errors remain',
         llmCalls: 5,
         fixIterations: 3,
+        typeFixIterations: 0,
+        testFixIterations: 0,
+        lintFixIterations: 0,
+        storyFixIterations: 0,
       });
 
       const result = await handleImplementComponent(makeCommand());
@@ -125,6 +133,10 @@ describe('implement-component', () => {
         success: true,
         llmCalls: 3,
         fixIterations: 0,
+        typeFixIterations: 0,
+        testFixIterations: 0,
+        lintFixIterations: 0,
+        storyFixIterations: 0,
       });
 
       const command = makeCommand({
@@ -182,6 +194,10 @@ describe('implement-component', () => {
         success: true,
         llmCalls: 4,
         fixIterations: 1,
+        typeFixIterations: 0,
+        testFixIterations: 0,
+        lintFixIterations: 0,
+        storyFixIterations: 0,
       });
 
       const command = {
@@ -220,6 +236,10 @@ describe('implement-component', () => {
         success: true,
         llmCalls: 2,
         fixIterations: 0,
+        typeFixIterations: 0,
+        testFixIterations: 0,
+        lintFixIterations: 0,
+        storyFixIterations: 0,
       });
 
       const command = {
@@ -262,6 +282,10 @@ describe('implement-component', () => {
         success: true,
         llmCalls: 4,
         fixIterations: 0,
+        typeFixIterations: 0,
+        testFixIterations: 0,
+        lintFixIterations: 0,
+        storyFixIterations: 0,
       });
 
       const command = makeCommand({
@@ -308,6 +332,10 @@ describe('implement-component', () => {
         success: true,
         llmCalls: 2,
         fixIterations: 0,
+        typeFixIterations: 0,
+        testFixIterations: 0,
+        lintFixIterations: 0,
+        storyFixIterations: 0,
       });
 
       await handleImplementComponent(makeCommand());
@@ -346,6 +374,10 @@ describe('implement-component', () => {
         success: true,
         llmCalls: 0,
         fixIterations: 0,
+        typeFixIterations: 0,
+        testFixIterations: 0,
+        lintFixIterations: 0,
+        storyFixIterations: 0,
       });
 
       const result = await commandHandler.handle(makeCommand());
@@ -361,6 +393,10 @@ describe('implement-component', () => {
         success: true,
         llmCalls: 0,
         fixIterations: 0,
+        typeFixIterations: 0,
+        testFixIterations: 0,
+        lintFixIterations: 0,
+        storyFixIterations: 0,
       });
 
       const command = makeCommand({
@@ -400,6 +436,10 @@ describe('implement-component', () => {
         success: true,
         llmCalls: 1,
         fixIterations: 0,
+        typeFixIterations: 0,
+        testFixIterations: 0,
+        lintFixIterations: 0,
+        storyFixIterations: 0,
       });
 
       const command = makeCommand({
@@ -438,6 +478,10 @@ describe('implement-component', () => {
         success: true,
         llmCalls: 1,
         fixIterations: 0,
+        typeFixIterations: 0,
+        testFixIterations: 0,
+        lintFixIterations: 0,
+        storyFixIterations: 0,
       });
 
       const command = makeCommand({
@@ -475,6 +519,10 @@ describe('implement-component', () => {
         success: false,
         llmCalls: 0,
         fixIterations: 0,
+        typeFixIterations: 0,
+        testFixIterations: 0,
+        lintFixIterations: 0,
+        storyFixIterations: 0,
       });
 
       const result = await handleImplementComponent(makeCommand());
@@ -515,6 +563,10 @@ describe('implement-component', () => {
         success: true,
         llmCalls: 0,
         fixIterations: 0,
+        typeFixIterations: 0,
+        testFixIterations: 0,
+        lintFixIterations: 0,
+        storyFixIterations: 0,
       });
 
       const command = makeCommand({

package/src/commands/implement-component.ts

@@ -223,6 +223,10 @@ export async function handleImplementComponent(
       storyVariants: payload.storyVariants,
       llmCalls: 0,
       fixIterations: 0,
+      typeFixIterations: 0,
+      testFixIterations: 0,
+      lintFixIterations: 0,
+      storyFixIterations: 0,
     };
 
     const config = buildPipelineConfig();

package/src/pipeline/run-pipeline.test.ts

@@ -65,6 +65,10 @@ function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
     isModify: false,
     llmCalls: 0,
     fixIterations: 0,
+    typeFixIterations: 0,
+    testFixIterations: 0,
+    lintFixIterations: 0,
+    storyFixIterations: 0,
     ...overrides,
   };
 }
@@ -106,7 +110,15 @@ describe('runPipeline', () => {
 
     const result = await runPipeline(steps, makeCtx());
 
-    expect(result).toEqual({ success: true, llmCalls: 0, fixIterations: 0 });
+    expect(result).toEqual({
+      success: true,
+      llmCalls: 0,
+      fixIterations: 0,
+      typeFixIterations: 0,
+      testFixIterations: 0,
+      lintFixIterations: 0,
+      storyFixIterations: 0,
+    });
     expect(executionOrder).toEqual(['A', 'B', 'C']);
   });
 
@@ -137,6 +149,10 @@ describe('runPipeline', () => {
       error: 'Step "Step B" failed: something broke',
       llmCalls: 0,
       fixIterations: 0,
+      typeFixIterations: 0,
+      testFixIterations: 0,
+      lintFixIterations: 0,
+      storyFixIterations: 0,
     });
     expect(executionOrder).toEqual(['A']);
   });
@@ -144,7 +160,15 @@ describe('runPipeline', () => {
   it('returns success with empty steps', async () => {
     const result = await runPipeline([], makeCtx());
 
-    expect(result).toEqual({ success: true, llmCalls: 0, fixIterations: 0 });
+    expect(result).toEqual({
+      success: true,
+      llmCalls: 0,
+      fixIterations: 0,
+      typeFixIterations: 0,
+      testFixIterations: 0,
+      lintFixIterations: 0,
+      storyFixIterations: 0,
+    });
   });
 
   it('reports accumulated llmCalls and fixIterations from context', async () => {
@@ -153,7 +177,15 @@ describe('runPipeline', () => {
 
     const result = await runPipeline(steps, ctx);
 
-    expect(result).toEqual({ success: true, llmCalls: 5, fixIterations: 3 });
+    expect(result).toEqual({
+      success: true,
+      llmCalls: 5,
+      fixIterations: 3,
+      typeFixIterations: 0,
+      testFixIterations: 0,
+      lintFixIterations: 0,
+      storyFixIterations: 0,
+    });
   });
 
   it('reports context metrics on failure', async () => {
@@ -167,6 +199,10 @@ describe('runPipeline', () => {
       error: 'Step "Broken" failed: oops',
       llmCalls: 2,
       fixIterations: 1,
+      typeFixIterations: 0,
+      testFixIterations: 0,
+      lintFixIterations: 0,
+      storyFixIterations: 0,
     });
   });
 });

package/src/pipeline/run-pipeline.ts

@@ -44,6 +44,10 @@ export type PipelineContext = {
   storyCode?: string;
   llmCalls: number;
   fixIterations: number;
+  typeFixIterations: number;
+  testFixIterations: number;
+  lintFixIterations: number;
+  storyFixIterations: number;
 };
 
 export type ModelConfig = {
@@ -79,6 +83,10 @@ export type PipelineResult = {
   error?: string;
   llmCalls: number;
   fixIterations: number;
+  typeFixIterations: number;
+  testFixIterations: number;
+  lintFixIterations: number;
+  storyFixIterations: number;
 };
 
 export function buildPipelineSteps(
@@ -146,6 +154,10 @@ export async function runPipeline(steps: PipelineStep[], ctx: PipelineContext):
         error: `Step "${step.name}" failed: ${result.error}`,
         llmCalls: ctx.llmCalls,
         fixIterations: ctx.fixIterations,
+        typeFixIterations: ctx.typeFixIterations,
+        testFixIterations: ctx.testFixIterations,
+        lintFixIterations: ctx.lintFixIterations,
+        storyFixIterations: ctx.storyFixIterations,
       };
     }
 
@@ -156,5 +168,9 @@ export async function runPipeline(steps: PipelineStep[], ctx: PipelineContext):
     success: true,
     llmCalls: ctx.llmCalls,
     fixIterations: ctx.fixIterations,
+    typeFixIterations: ctx.typeFixIterations,
+    testFixIterations: ctx.testFixIterations,
+    lintFixIterations: ctx.lintFixIterations,
+    storyFixIterations: ctx.storyFixIterations,
   };
 }

package/src/pipeline/steps/generate-component.test.ts

@@ -37,6 +37,10 @@ function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
     isModify: false,
     llmCalls: 0,
     fixIterations: 0,
+    typeFixIterations: 0,
+    testFixIterations: 0,
+    lintFixIterations: 0,
+    storyFixIterations: 0,
     testCode: 'import { render } from "@testing-library/react";',
     ...overrides,
   };

package/src/pipeline/steps/generate-story.test.ts

@@ -22,6 +22,10 @@ function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
     isModify: false,
     llmCalls: 0,
     fixIterations: 0,
+    typeFixIterations: 0,
+    testFixIterations: 0,
+    lintFixIterations: 0,
+    storyFixIterations: 0,
     ...overrides,
   };
 }

package/src/pipeline/steps/generate-test.test.ts

@@ -36,6 +36,10 @@ function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
     isModify: false,
     llmCalls: 0,
     fixIterations: 0,
+    typeFixIterations: 0,
+    testFixIterations: 0,
+    lintFixIterations: 0,
+    storyFixIterations: 0,
     ...overrides,
   };
 }

package/src/pipeline/steps/lint-fix-loop.test.ts

@@ -38,6 +38,10 @@ function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
     isModify: false,
     llmCalls: 0,
     fixIterations: 0,
+    typeFixIterations: 0,
+    testFixIterations: 0,
+    lintFixIterations: 0,
+    storyFixIterations: 0,
     componentCode: 'original component',
     testCode: 'original test',
     ...overrides,
@@ -132,6 +136,23 @@ describe('lintFixLoop', () => {
     expect(result).toEqual({ success: true });
   });
 
+  it('re-runs auto-fix after each LLM write to handle formatting issues', async () => {
+    vi.mocked(runLintFix).mockReturnValue({ passed: true, errors: [] });
+    vi.mocked(readFile).mockResolvedValue('auto-fixed' as never);
+    vi.mocked(runLint)
+      .mockReturnValueOnce({ passed: false, errors: ['format error'] })
+      .mockReturnValueOnce({ passed: true, errors: [] });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nfixed component\n```\n```tsx\nfixed test\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    await lintFixLoop('mock-model' as never, makeCtx(), 2);
+
+    expect(runLintFix).toHaveBeenCalledTimes(2);
+  });
+
   it('uses empty string fallback when componentCode and testCode are undefined after readFile', async () => {
     vi.mocked(runLintFix).mockReturnValue({ passed: true, errors: [] });
     vi.mocked(readFile).mockResolvedValue(undefined as never);

package/src/pipeline/steps/lint-fix-loop.ts

@@ -34,17 +34,19 @@ export async function lintFixLoop(
     const { text } = await generateText({ model, system, prompt });
     ctx.llmCalls++;
     ctx.fixIterations++;
+    ctx.lintFixIterations++;
 
     const blocks = extractCodeBlocks(text);
     if (blocks.length >= 2) {
-      ctx.componentCode = blocks[0];
-      ctx.testCode = blocks[1];
       await writeFile(ctx.componentPath, blocks[0], 'utf-8');
       await writeFile(ctx.testPath, blocks[1], 'utf-8');
     } else if (blocks.length === 1) {
-      ctx.componentCode = blocks[0];
       await writeFile(ctx.componentPath, blocks[0], 'utf-8');
     }
+
+    runLintFix(filePaths, ctx.targetDir);
+    ctx.componentCode = await readFile(ctx.componentPath, 'utf-8');
+    ctx.testCode = await readFile(ctx.testPath, 'utf-8');
   }
 
   const finalResult = runLint(filePaths, ctx.targetDir);

package/src/pipeline/steps/story-fix-loop.test.ts

@@ -37,6 +37,10 @@ function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
     isModify: false,
     llmCalls: 0,
     fixIterations: 0,
+    typeFixIterations: 0,
+    testFixIterations: 0,
+    lintFixIterations: 0,
+    storyFixIterations: 0,
     storyCode: 'original story',
     componentCode: 'original component',
     ...overrides,

package/src/pipeline/steps/story-fix-loop.ts

@@ -27,6 +27,7 @@ export async function storyFixLoop(
     const { text } = await generateText({ model, system, prompt });
     ctx.llmCalls++;
     ctx.fixIterations++;
+    ctx.storyFixIterations++;
 
     const fixedStory = extractCodeBlock(text);
     ctx.storyCode = fixedStory;

package/src/pipeline/steps/storybook-test.test.ts

@@ -27,6 +27,10 @@ function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
     isModify: false,
     llmCalls: 0,
     fixIterations: 0,
+    typeFixIterations: 0,
+    testFixIterations: 0,
+    lintFixIterations: 0,
+    storyFixIterations: 0,
     ...overrides,
   };
 }

package/src/pipeline/steps/test-fix-loop.test.ts

@@ -37,6 +37,10 @@ function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
     isModify: false,
     llmCalls: 0,
     fixIterations: 0,
+    typeFixIterations: 0,
+    testFixIterations: 0,
+    lintFixIterations: 0,
+    storyFixIterations: 0,
     componentCode: 'original component',
     testCode: 'original test',
     ...overrides,

package/src/pipeline/steps/test-fix-loop.ts

@@ -28,6 +28,7 @@ export async function testFixLoop(
     const { text } = await generateText({ model, system, prompt });
     ctx.llmCalls++;
     ctx.fixIterations++;
+    ctx.testFixIterations++;
 
     const blocks = extractCodeBlocks(text);
     if (blocks.length >= 2) {

package/src/pipeline/steps/type-fix-loop.test.ts

@@ -37,6 +37,10 @@ function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
     isModify: false,
     llmCalls: 0,
     fixIterations: 0,
+    typeFixIterations: 0,
+    testFixIterations: 0,
+    lintFixIterations: 0,
+    storyFixIterations: 0,
     componentCode: 'original component',
     testCode: 'original test',
     ...overrides,

package/src/pipeline/steps/type-fix-loop.ts

@@ -27,6 +27,7 @@ export async function typeFixLoop(
     const { text } = await generateText({ model, system, prompt });
     ctx.llmCalls++;
     ctx.fixIterations++;
+    ctx.typeFixIterations++;
 
     const blocks = extractCodeBlocks(text);
     if (blocks.length >= 2) {

package/src/prompt.test.ts

@@ -40,6 +40,34 @@ describe('prompt builders', () => {
       expect(system).toContain('QUALITY CHECKLIST');
     });
 
+    it('system prompt contains strict package boundary rule', () => {
+      const { system } = buildComponentPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(system).toContain('Strict package boundary');
+      expect(system).toContain('package.json');
+    });
+
+    it('system prompt contains UI barrel import rule', () => {
+      const { system } = buildComponentPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(system).toContain('UI components from barrel only');
+      expect(system).toContain('src/components/ui/index.ts');
+    });
+
+    it('system prompt contains page navigation callback rule', () => {
+      const { system } = buildComponentPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(system).toContain('callback props for navigation');
+      expect(system).toContain('Never import a router library');
+    });
+
+    it('system prompt contains controlled input initialization rule', () => {
+      const { system } = buildComponentPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(system).toContain("always initialize text/number inputs with an empty string (`useState('')`)");
+    });
+
+    it('system prompt contains array key rule preventing index-based keys', () => {
+      const { system } = buildComponentPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(system).toContain("Biome's `noArrayIndexKey` rule flags both forms");
+    });
+
     it('user prompt includes component name and spec deltas', () => {
       const { prompt } = buildComponentPrompt({ componentName: 'Card', specDeltas, projectSection });
       expect(prompt).toContain('**Card**');
@@ -111,6 +139,64 @@ describe('prompt builders', () => {
       expect(system).toContain('Verify semantic elements from component source');
       expect(system).toContain('getByText');
     });
+
+    it('system prompt contains strict package boundary rule', () => {
+      const { system } = buildTestPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(system).toContain('Strict package boundary');
+      expect(system).toContain('@testing-library/react');
+    });
+
+    it('system prompt contains jsdom limitations rule', () => {
+      const { system } = buildTestPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(system).toContain('jsdom limitations');
+      expect(system).toContain('DataTransfer');
+      expect(system).toContain('scrollIntoView');
+    });
+
+    it('system prompt contains individual class testing rule', () => {
+      const { system } = buildTestPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(system).toContain('Test Tailwind classes individually');
+      expect(system).toContain('toHaveClass');
+    });
+
+    it('system prompt contains mock composed components rule', () => {
+      const { system } = buildTestPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(system).toContain('Mock composed components');
+      expect(system).toContain('vi.mock');
+    });
+
+    it('system prompt warns against spreading props in mocks', () => {
+      const { system } = buildTestPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(system).toContain('Do NOT spread props');
+    });
+
+    it('system prompt warns page tests not to query mocked child elements', () => {
+      const { system } = buildTestPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(system).toContain('expect.anything()');
+    });
+
+    it('system prompt requires mock.calls direct access for mock component prop assertions', () => {
+      const { system } = buildTestPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(system).toContain(
+        'NEVER use `toHaveBeenCalledWith` — React passes `(props, ref)` where `ref` is `undefined`',
+      );
+      expect(system).toContain('MockChild.mock.calls[0]');
+    });
+
+    it('system prompt forbids @testing-library/dom import', () => {
+      const { system } = buildTestPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(system).toContain('@testing-library/dom');
+    });
+
+    it('system prompt contains vi.mock hoisting rule', () => {
+      const { system } = buildTestPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(system).toContain('hoisted');
+    });
+
+    it('system prompt contains semantic HTML role mapping rule', () => {
+      const { system } = buildTestPrompt({ componentName: 'Card', specDeltas, projectSection });
+      expect(system).toContain('`<section>` has role="region"');
+    });
   });
 
   describe('buildStoryPrompt', () => {
@@ -366,6 +452,76 @@ describe('prompt builders', () => {
       expect(result.prompt).toContain('## Component Code');
       expect(result.prompt).toContain('## Test Code');
     });
+
+    it('system prompt contains unresolvable import guidance', () => {
+      const result = buildTestFixPrompt({
+        componentCode: 'export function Card() {}',
+        testCode: 'test code',
+        failures: [],
+        testOutput: '',
+      });
+
+      expect(result.system).toContain('Unresolvable imports');
+      expect(result.system).toContain('Failed to resolve import');
+    });
+
+    it('system prompt contains missing UI component guidance', () => {
+      const result = buildTestFixPrompt({
+        componentCode: 'export function Card() {}',
+        testCode: 'test code',
+        failures: [],
+        testOutput: '',
+      });
+
+      expect(result.system).toContain('Missing UI component imports');
+      expect(result.system).toContain('@/components/ui');
+    });
+
+    it('system prompt contains vi.mock hoisting guidance', () => {
+      const result = buildTestFixPrompt({
+        componentCode: 'export function Card() {}',
+        testCode: 'test code',
+        failures: [],
+        testOutput: '',
+      });
+
+      expect(result.system).toContain('hoisted');
+    });
+
+    it('system prompt contains mock spy direct access fix guidance', () => {
+      const result = buildTestFixPrompt({
+        componentCode: 'export function Card() {}',
+        testCode: 'test code',
+        failures: [],
+        testOutput: '',
+      });
+
+      expect(result.system).toContain('replace `toHaveBeenCalledWith` with direct mock call access');
+    });
+
+    it('system prompt contains toHaveStyle replacement guidance', () => {
+      const result = buildTestFixPrompt({
+        componentCode: 'export function Card() {}',
+        testCode: 'test code',
+        failures: [],
+        testOutput: '',
+      });
+
+      expect(result.system).toContain('toHaveStyle()');
+      expect(result.system).toContain('toHaveClass');
+    });
+
+    it('system prompt contains ReferenceError mock import guidance', () => {
+      const result = buildTestFixPrompt({
+        componentCode: 'export function Card() {}',
+        testCode: 'test code',
+        failures: [],
+        testOutput: '',
+      });
+
+      expect(result.system).toContain('ReferenceError');
+      expect(result.system).toContain('Add the import after the `vi.mock` call');
+    });
   });
 
   describe('buildLintFixPrompt', () => {
@@ -385,6 +541,26 @@ describe('prompt builders', () => {
       expect(result.prompt).toContain('## Test Code');
       expect(result.prompt).toContain('var y = 2');
     });
+
+    it('system prompt contains noArrayIndexKey guidance', () => {
+      const result = buildLintFixPrompt({
+        componentCode: 'const x = 1',
+        testCode: 'const y = 2',
+        errors: [],
+      });
+
+      expect(result.system).toContain('noArrayIndexKey');
+    });
+
+    it('system prompt covers derived keys like template literals in noArrayIndexKey guidance', () => {
+      const result = buildLintFixPrompt({
+        componentCode: 'const x = 1',
+        testCode: 'const y = 2',
+        errors: [],
+      });
+
+      expect(result.system).toContain('inside a template literal');
+    });
   });
 
   describe('buildStoryFixPrompt', () => {