@auto-engineer/component-implementor-react 1.110.1 → 1.110.3

package/package.json

@@ -6,13 +6,13 @@
   "dependencies": {
     "ai": "^6.0.0",
     "debug": "^4.4.1",
-    "@auto-engineer/message-bus": "1.110.1",
-    "@auto-engineer/model-factory": "1.110.1"
+    "@auto-engineer/message-bus": "1.110.3",
+    "@auto-engineer/model-factory": "1.110.3"
   },
   "devDependencies": {
     "vitest": "^3.2.1"
   },
-  "version": "1.110.1",
+  "version": "1.110.3",
   "publishConfig": {
     "access": "public"
   },

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

@@ -58,6 +58,19 @@ function makeCommand(overrides: Record<string, unknown> = {}) {
   };
 }
 
+function mockPipelineResult(overrides: Record<string, unknown> = {}) {
+  return {
+    success: true,
+    llmCalls: 4,
+    fixIterations: 0,
+    typeFixIterations: 0,
+    testFixIterations: 0,
+    lintFixIterations: 0,
+    storyFixIterations: 0,
+    ...overrides,
+  };
+}
+
 describe('implement-component', () => {
   afterEach(() => {
     vi.clearAllMocks();
@@ -66,10 +79,7 @@ describe('implement-component', () => {
   describe('handleImplementComponent', () => {
     it('runs pipeline and returns ComponentImplemented on success', async () => {
       vi.mocked(existsSync).mockReturnValue(false);
-      vi.mocked(runPipeline).mockResolvedValue({
-        success: true,
-        llmCalls: 4,
-      });
+      vi.mocked(runPipeline).mockResolvedValue(mockPipelineResult());
 
       const result = await handleImplementComponent(makeCommand());
 
@@ -88,8 +98,11 @@ describe('implement-component', () => {
           targetDir: '/project/client',
           job: makeCommand().data.job,
           llmCalls: expect.any(Number),
-          attemptNumber: 0,
-          intermediate: true,
+          fixIterations: 0,
+          typeFixIterations: 0,
+          testFixIterations: 0,
+          lintFixIterations: 0,
+          storyFixIterations: 0,
         },
         timestamp: expect.any(Date),
         requestId: 'req-1',
@@ -101,11 +114,13 @@ describe('implement-component', () => {
 
     it('returns ComponentImplementationFailed when pipeline fails', async () => {
       vi.mocked(existsSync).mockReturnValue(false);
-      vi.mocked(runPipeline).mockResolvedValue({
-        success: false,
-        error: 'Step "Type Fix Loop" failed: errors remain',
-        llmCalls: 5,
-      });
+      vi.mocked(runPipeline).mockResolvedValue(
+        mockPipelineResult({
+          success: false,
+          error: 'Step "Type Fix Loop" failed: errors remain',
+          llmCalls: 5,
+        }),
+      );
 
       const result = await handleImplementComponent(makeCommand());
 
@@ -124,10 +139,7 @@ describe('implement-component', () => {
     it('reads existing component when modifying', async () => {
       vi.mocked(existsSync).mockReturnValue(true);
       vi.mocked(readFile).mockResolvedValue('existing component code' as never);
-      vi.mocked(runPipeline).mockResolvedValue({
-        success: true,
-        llmCalls: 3,
-      });
+      vi.mocked(runPipeline).mockResolvedValue(mockPipelineResult({ llmCalls: 3 }));
 
       const command = makeCommand({
         job: {
@@ -180,10 +192,7 @@ describe('implement-component', () => {
 
     it('handles payload with undefined spec delta fields without crashing', async () => {
       vi.mocked(existsSync).mockReturnValue(false);
-      vi.mocked(runPipeline).mockResolvedValue({
-        success: true,
-        llmCalls: 4,
-      });
+      vi.mocked(runPipeline).mockResolvedValue(mockPipelineResult());
 
       const command = {
         type: 'ImplementComponent' as const,
@@ -217,10 +226,7 @@ describe('implement-component', () => {
 
     it('defaults targetDir to ./client when not provided', async () => {
       vi.mocked(existsSync).mockReturnValue(false);
-      vi.mocked(runPipeline).mockResolvedValue({
-        success: true,
-        llmCalls: 2,
-      });
+      vi.mocked(runPipeline).mockResolvedValue(mockPipelineResult({ llmCalls: 2 }));
 
       const command = {
         type: 'ImplementComponent' as const,
@@ -258,10 +264,7 @@ describe('implement-component', () => {
 
     it('derives component path from componentId when files.create is empty string', async () => {
       vi.mocked(existsSync).mockReturnValue(false);
-      vi.mocked(runPipeline).mockResolvedValue({
-        success: true,
-        llmCalls: 4,
-      });
+      vi.mocked(runPipeline).mockResolvedValue(mockPipelineResult());
 
       const command = makeCommand({
         job: {
@@ -297,8 +300,11 @@ describe('implement-component', () => {
           targetDir: '/project/client',
           job: command.data.job,
           llmCalls: expect.any(Number),
-          attemptNumber: 0,
-          intermediate: true,
+          fixIterations: 0,
+          typeFixIterations: 0,
+          testFixIterations: 0,
+          lintFixIterations: 0,
+          storyFixIterations: 0,
         },
         timestamp: expect.any(Date),
         requestId: 'req-1',
@@ -308,10 +314,7 @@ describe('implement-component', () => {
 
     it('passes correct context to pipeline', async () => {
       vi.mocked(existsSync).mockReturnValue(false);
-      vi.mocked(runPipeline).mockResolvedValue({
-        success: true,
-        llmCalls: 2,
-      });
+      vi.mocked(runPipeline).mockResolvedValue(mockPipelineResult({ llmCalls: 2 }));
 
       await handleImplementComponent(makeCommand());
 
@@ -331,6 +334,11 @@ describe('implement-component', () => {
           },
           isModify: false,
           llmCalls: 0,
+          fixIterations: 0,
+          typeFixIterations: 0,
+          testFixIterations: 0,
+          lintFixIterations: 0,
+          storyFixIterations: 0,
         }),
       );
     });
@@ -344,10 +352,7 @@ describe('implement-component', () => {
 
     it('handle delegates to handleImplementComponent', async () => {
       vi.mocked(existsSync).mockReturnValue(false);
-      vi.mocked(runPipeline).mockResolvedValue({
-        success: true,
-        llmCalls: 0,
-      });
+      vi.mocked(runPipeline).mockResolvedValue(mockPipelineResult({ llmCalls: 0 }));
 
       const result = await commandHandler.handle(makeCommand());
 
@@ -358,10 +363,7 @@ describe('implement-component', () => {
   describe('filePathToImportAlias edge cases', () => {
     it('handles paths starting with ./', async () => {
       vi.mocked(existsSync).mockReturnValue(false);
-      vi.mocked(runPipeline).mockResolvedValue({
-        success: true,
-        llmCalls: 0,
-      });
+      vi.mocked(runPipeline).mockResolvedValue(mockPipelineResult({ llmCalls: 0 }));
 
       const command = makeCommand({
         job: {
@@ -396,10 +398,7 @@ describe('implement-component', () => {
     it('reads existing test when modifying and test file exists', async () => {
       vi.mocked(existsSync).mockReturnValue(true);
       vi.mocked(readFile).mockResolvedValue('existing code' as never);
-      vi.mocked(runPipeline).mockResolvedValue({
-        success: true,
-        llmCalls: 1,
-      });
+      vi.mocked(runPipeline).mockResolvedValue(mockPipelineResult({ llmCalls: 1 }));
 
       const command = makeCommand({
         job: {
@@ -433,10 +432,7 @@ describe('implement-component', () => {
     it('sets existingTest to undefined when test file does not exist in modify mode', async () => {
       vi.mocked(existsSync).mockReturnValueOnce(true).mockReturnValueOnce(false);
       vi.mocked(readFile).mockResolvedValue('existing component' as never);
-      vi.mocked(runPipeline).mockResolvedValue({
-        success: true,
-        llmCalls: 1,
-      });
+      vi.mocked(runPipeline).mockResolvedValue(mockPipelineResult({ llmCalls: 1 }));
 
       const command = makeCommand({
         job: {
@@ -469,10 +465,7 @@ describe('implement-component', () => {
 
     it('uses fallback error message when pipeline result has no error string', async () => {
       vi.mocked(existsSync).mockReturnValue(false);
-      vi.mocked(runPipeline).mockResolvedValue({
-        success: false,
-        llmCalls: 0,
-      });
+      vi.mocked(runPipeline).mockResolvedValue(mockPipelineResult({ success: false, llmCalls: 0 }));
 
       const result = await handleImplementComponent(makeCommand());
 
@@ -508,10 +501,7 @@ describe('implement-component', () => {
 
     it('handles empty files payload gracefully', async () => {
       vi.mocked(existsSync).mockReturnValue(false);
-      vi.mocked(runPipeline).mockResolvedValue({
-        success: true,
-        llmCalls: 0,
-      });
+      vi.mocked(runPipeline).mockResolvedValue(mockPipelineResult({ llmCalls: 0 }));
 
       const command = makeCommand({
         job: {

package/src/commands/implement-component.ts

@@ -53,7 +53,6 @@ export type ImplementComponentCommand = Command<
   {
     targetDir: string;
     job: ComponentJob;
-    context?: { previousOutputs?: string; attemptNumber?: number };
   }
 >;
 
@@ -68,8 +67,11 @@ export type ComponentImplementedEvent = Event<
     targetDir: string;
     job: ComponentJob;
     llmCalls: number;
-    attemptNumber: number;
-    intermediate?: boolean;
+    fixIterations: number;
+    typeFixIterations: number;
+    testFixIterations: number;
+    lintFixIterations: number;
+    storyFixIterations: number;
   }
 >;
 
@@ -138,13 +140,37 @@ function buildPipelineConfig(): PipelineConfig {
         process.env.IMPL_MODEL ??
         process.env.CUSTOM_PROVIDER_DEFAULT_MODEL ??
         '',
-      fixer:
-        process.env.STEP_FIXER_MODEL ??
+      typeFixer:
+        process.env.STEP_TYPE_FIXER_MODEL ??
+        process.env.IMPL_FIXER_MODEL ??
+        process.env.IMPL_MODEL ??
+        process.env.CUSTOM_PROVIDER_DEFAULT_MODEL ??
+        '',
+      testFixer:
+        process.env.STEP_TEST_FIXER_MODEL ??
+        process.env.IMPL_FIXER_MODEL ??
+        process.env.IMPL_MODEL ??
+        process.env.CUSTOM_PROVIDER_DEFAULT_MODEL ??
+        '',
+      lintFixer:
+        process.env.STEP_LINT_FIXER_MODEL ??
+        process.env.IMPL_FIXER_MODEL ??
+        process.env.IMPL_MODEL ??
+        process.env.CUSTOM_PROVIDER_DEFAULT_MODEL ??
+        '',
+      storyFixer:
+        process.env.STEP_STORY_FIXER_MODEL ??
         process.env.IMPL_FIXER_MODEL ??
         process.env.IMPL_MODEL ??
         process.env.CUSTOM_PROVIDER_DEFAULT_MODEL ??
         '',
     },
+    maxTypeFixIterations: Number(process.env.MAX_TYPE_FIX_ITERATIONS ?? 3),
+    maxTestFixIterations: Number(process.env.MAX_TEST_FIX_ITERATIONS ?? 3),
+    maxLintFixIterations: Number(process.env.MAX_LINT_FIX_ITERATIONS ?? 2),
+    maxStoryFixIterations: Number(process.env.MAX_STORY_FIX_ITERATIONS ?? 2),
+    enableStorybookTest: process.env.ENABLE_STORYBOOK_TEST === 'true',
+    enableVisualTest: process.env.ENABLE_VISUAL_TEST === 'true',
   };
 }
 
@@ -154,7 +180,10 @@ function createPipelineModels(): PipelineModels {
     generateTest: model,
     generateComponent: model,
     generateStory: model,
-    fixer: model,
+    typeFixer: model,
+    testFixer: model,
+    lintFixer: model,
+    storyFixer: model,
   };
 }
 
@@ -191,9 +220,6 @@ export async function handleImplementComponent(
 
     await mkdir(path.dirname(testPath), { recursive: true });
 
-    const attemptNumber = command.data.context?.attemptNumber ?? 0;
-    const errorFeedback = command.data.context?.previousOutputs;
-
     const ctx: PipelineContext = {
       componentName,
       componentPath,
@@ -209,8 +235,11 @@ export async function handleImplementComponent(
       existingTest,
       isModify,
       llmCalls: 0,
-      errorFeedback,
-      attemptNumber,
+      fixIterations: 0,
+      typeFixIterations: 0,
+      testFixIterations: 0,
+      lintFixIterations: 0,
+      storyFixIterations: 0,
     };
 
     const config = buildPipelineConfig();
@@ -231,7 +260,12 @@ export async function handleImplementComponent(
       };
     }
 
-    debug('Pipeline succeeded for %s (LLM calls: %d)', componentName, result.llmCalls);
+    debug(
+      'Pipeline succeeded for %s (LLM calls: %d, fix iterations: %d)',
+      componentName,
+      result.llmCalls,
+      result.fixIterations,
+    );
 
     return {
       type: 'ComponentImplemented',
@@ -244,8 +278,11 @@ export async function handleImplementComponent(
         targetDir,
         job,
         llmCalls: result.llmCalls,
-        attemptNumber,
-        intermediate: true,
+        fixIterations: result.fixIterations,
+        typeFixIterations: result.typeFixIterations,
+        testFixIterations: result.testFixIterations,
+        lintFixIterations: result.lintFixIterations,
+        storyFixIterations: result.storyFixIterations,
       },
       timestamp: new Date(),
       requestId: command.requestId,

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

@@ -7,11 +7,26 @@ vi.mock('./steps/generate-test', () => ({
 vi.mock('./steps/generate-component', () => ({
   generateComponentStep: vi.fn(async () => ({ success: true })),
 }));
+vi.mock('./steps/type-fix-loop', () => ({
+  typeFixLoop: vi.fn(async () => ({ success: true })),
+}));
+vi.mock('./steps/test-fix-loop', () => ({
+  testFixLoop: vi.fn(async () => ({ success: true })),
+}));
+vi.mock('./steps/lint-fix-loop', () => ({
+  lintFixLoop: vi.fn(async () => ({ success: true })),
+}));
 vi.mock('./steps/generate-story', () => ({
   generateStoryStep: vi.fn(async () => ({ success: true })),
 }));
-vi.mock('./steps/fix-from-feedback', () => ({
-  fixFromFeedbackStep: vi.fn(async () => ({ success: true })),
+vi.mock('./steps/story-fix-loop', () => ({
+  storyFixLoop: vi.fn(async () => ({ success: true })),
+}));
+vi.mock('./steps/storybook-test', () => ({
+  storybookTestStep: vi.fn(async () => ({ success: true })),
+}));
+vi.mock('./steps/visual-test', () => ({
+  visualTestStep: vi.fn(async () => ({ success: true })),
 }));
 
 import {
@@ -22,10 +37,15 @@ import {
   type PipelineStep,
   runPipeline,
 } from './run-pipeline';
-import { fixFromFeedbackStep } from './steps/fix-from-feedback';
 import { generateComponentStep } from './steps/generate-component';
 import { generateStoryStep } from './steps/generate-story';
 import { generateTestStep } from './steps/generate-test';
+import { lintFixLoop } from './steps/lint-fix-loop';
+import { storyFixLoop } from './steps/story-fix-loop';
+import { storybookTestStep } from './steps/storybook-test';
+import { testFixLoop } from './steps/test-fix-loop';
+import { typeFixLoop } from './steps/type-fix-loop';
+import { visualTestStep } from './steps/visual-test';
 
 afterEach(() => {
   vi.clearAllMocks();
@@ -44,7 +64,11 @@ function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
     composes: [],
     isModify: false,
     llmCalls: 0,
-    attemptNumber: 0,
+    fixIterations: 0,
+    typeFixIterations: 0,
+    testFixIterations: 0,
+    lintFixIterations: 0,
+    storyFixIterations: 0,
     ...overrides,
   };
 }
@@ -85,6 +109,11 @@ describe('runPipeline', () => {
     expect(result).toEqual({
       success: true,
       llmCalls: 0,
+      fixIterations: 0,
+      typeFixIterations: 0,
+      testFixIterations: 0,
+      lintFixIterations: 0,
+      storyFixIterations: 0,
     });
     expect(executionOrder).toEqual(['A', 'B', 'C']);
   });
@@ -115,6 +144,11 @@ describe('runPipeline', () => {
       success: false,
       error: 'Step "Step B" failed: something broke',
       llmCalls: 0,
+      fixIterations: 0,
+      typeFixIterations: 0,
+      testFixIterations: 0,
+      lintFixIterations: 0,
+      storyFixIterations: 0,
     });
     expect(executionOrder).toEqual(['A']);
   });
@@ -125,24 +159,34 @@ describe('runPipeline', () => {
     expect(result).toEqual({
       success: true,
       llmCalls: 0,
+      fixIterations: 0,
+      typeFixIterations: 0,
+      testFixIterations: 0,
+      lintFixIterations: 0,
+      storyFixIterations: 0,
     });
   });
 
-  it('reports accumulated llmCalls from context', async () => {
+  it('reports accumulated llmCalls and fixIterations from context', async () => {
     const steps: PipelineStep[] = [{ name: 'Step A', run: async () => ({ success: true }) }];
-    const ctx = makeCtx({ llmCalls: 5 });
+    const ctx = makeCtx({ llmCalls: 5, fixIterations: 3 });
 
     const result = await runPipeline(steps, ctx);
 
     expect(result).toEqual({
       success: true,
       llmCalls: 5,
+      fixIterations: 3,
+      typeFixIterations: 0,
+      testFixIterations: 0,
+      lintFixIterations: 0,
+      storyFixIterations: 0,
     });
   });
 
   it('reports context metrics on failure', async () => {
     const steps: PipelineStep[] = [failStep('Broken', 'oops')];
-    const ctx = makeCtx({ llmCalls: 2 });
+    const ctx = makeCtx({ llmCalls: 2, fixIterations: 1 });
 
     const result = await runPipeline(steps, ctx);
 
@@ -150,6 +194,11 @@ describe('runPipeline', () => {
       success: false,
       error: 'Step "Broken" failed: oops',
       llmCalls: 2,
+      fixIterations: 1,
+      typeFixIterations: 0,
+      testFixIterations: 0,
+      lintFixIterations: 0,
+      storyFixIterations: 0,
     });
   });
 });
@@ -161,38 +210,102 @@ function makeModels(): PipelineModels {
     generateTest: fakeModel,
     generateComponent: fakeModel,
     generateStory: fakeModel,
-    fixer: fakeModel,
+    typeFixer: fakeModel,
+    testFixer: fakeModel,
+    lintFixer: fakeModel,
+    storyFixer: fakeModel,
   };
 }
 
-function makeConfig(): PipelineConfig {
+function makeConfig(overrides: Partial<PipelineConfig> = {}): PipelineConfig {
   return {
     models: {
       generateTest: '',
       generateComponent: '',
       generateStory: '',
-      fixer: '',
+      typeFixer: '',
+      testFixer: '',
+      lintFixer: '',
+      storyFixer: '',
     },
+    maxTypeFixIterations: 3,
+    maxTestFixIterations: 3,
+    maxLintFixIterations: 2,
+    maxStoryFixIterations: 2,
+    enableStorybookTest: false,
+    enableVisualTest: false,
+    ...overrides,
   };
 }
 
 describe('buildPipelineSteps', () => {
-  it('returns 3 core steps for first attempt', () => {
+  it('returns 7 core steps by default', () => {
     const steps = buildPipelineSteps(makeModels(), makeConfig(), makeCtx());
 
-    expect(steps.map((s) => s.name)).toEqual(['Generate Test', 'Generate Component', 'Generate Story']);
+    expect(steps.map((s) => s.name)).toEqual([
+      'Generate Test',
+      'Generate Component',
+      'Type Fix Loop',
+      'Test Fix Loop',
+      'Lint Fix Loop',
+      'Generate Story',
+      'Story Fix Loop',
+    ]);
   });
 
-  it('returns fix + story steps for retry attempt', () => {
-    const ctx = makeCtx({ attemptNumber: 1, errorFeedback: 'Test failed: expected X to equal Y' });
-    const steps = buildPipelineSteps(makeModels(), makeConfig(), ctx);
+  it('adds Storybook Test step when enabled', () => {
+    const steps = buildPipelineSteps(makeModels(), makeConfig({ enableStorybookTest: true }), makeCtx());
+
+    expect(steps.map((s) => s.name)).toEqual([
+      'Generate Test',
+      'Generate Component',
+      'Type Fix Loop',
+      'Test Fix Loop',
+      'Lint Fix Loop',
+      'Generate Story',
+      'Story Fix Loop',
+      'Storybook Test',
+    ]);
+  });
 
-    expect(steps.map((s) => s.name)).toEqual(['Fix From Feedback', 'Generate Story']);
+  it('adds Visual Test step when enabled', () => {
+    const steps = buildPipelineSteps(makeModels(), makeConfig({ enableVisualTest: true }), makeCtx());
+
+    expect(steps.map((s) => s.name)).toEqual([
+      'Generate Test',
+      'Generate Component',
+      'Type Fix Loop',
+      'Test Fix Loop',
+      'Lint Fix Loop',
+      'Generate Story',
+      'Story Fix Loop',
+      'Visual Test',
+    ]);
   });
 
-  it('wires each step to its corresponding function on first attempt', async () => {
+  it('adds both optional steps when both enabled', () => {
+    const steps = buildPipelineSteps(
+      makeModels(),
+      makeConfig({ enableStorybookTest: true, enableVisualTest: true }),
+      makeCtx(),
+    );
+
+    expect(steps.map((s) => s.name)).toEqual([
+      'Generate Test',
+      'Generate Component',
+      'Type Fix Loop',
+      'Test Fix Loop',
+      'Lint Fix Loop',
+      'Generate Story',
+      'Story Fix Loop',
+      'Storybook Test',
+      'Visual Test',
+    ]);
+  });
+
+  it('wires each step to its corresponding function', async () => {
     const models = makeModels();
-    const config = makeConfig();
+    const config = makeConfig({ enableStorybookTest: true, enableVisualTest: true });
     const ctx = makeCtx();
     const steps = buildPipelineSteps(models, config, ctx);
 
@@ -202,20 +315,12 @@ describe('buildPipelineSteps', () => {
 
     expect(generateTestStep).toHaveBeenCalledWith(models.generateTest, ctx);
     expect(generateComponentStep).toHaveBeenCalledWith(models.generateComponent, ctx);
+    expect(typeFixLoop).toHaveBeenCalledWith(models.typeFixer, ctx, 3);
+    expect(testFixLoop).toHaveBeenCalledWith(models.testFixer, ctx, 3);
+    expect(lintFixLoop).toHaveBeenCalledWith(models.lintFixer, ctx, 2);
     expect(generateStoryStep).toHaveBeenCalledWith(models.generateStory, ctx);
-  });
-
-  it('wires fix step on retry attempt', async () => {
-    const models = makeModels();
-    const config = makeConfig();
-    const ctx = makeCtx({ attemptNumber: 1, errorFeedback: 'Some error' });
-    const steps = buildPipelineSteps(models, config, ctx);
-
-    for (const step of steps) {
-      await step.run();
-    }
-
-    expect(fixFromFeedbackStep).toHaveBeenCalledWith(models.fixer, ctx);
-    expect(generateStoryStep).toHaveBeenCalledWith(models.generateStory, ctx);
+    expect(storyFixLoop).toHaveBeenCalledWith(models.storyFixer, ctx, 2);
+    expect(storybookTestStep).toHaveBeenCalledWith(ctx, true);
+    expect(visualTestStep).toHaveBeenCalled();
   });
 });