@auto-engineer/component-implementor-react 1.98.0 → 1.100.0

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

@@ -0,0 +1,292 @@
+import type { LanguageModel } from 'ai';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('./steps/generate-test', () => ({
+  generateTestStep: vi.fn(async () => ({ success: true })),
+}));
+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/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 {
+  buildPipelineSteps,
+  type PipelineConfig,
+  type PipelineContext,
+  type PipelineModels,
+  type PipelineStep,
+  runPipeline,
+} from './run-pipeline';
+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();
+});
+
+function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
+  return {
+    componentName: 'MyButton',
+    componentPath: '/project/src/MyButton.tsx',
+    testPath: '/project/src/MyButton.test.tsx',
+    storyPath: '/project/src/MyButton.stories.tsx',
+    componentImportPath: '@/components/ui/MyButton',
+    targetDir: '/project',
+    specDeltas: { structure: [], rendering: [], interaction: [], styling: [] },
+    projectSection: '',
+    composes: [],
+    isModify: false,
+    llmCalls: 0,
+    fixIterations: 0,
+    ...overrides,
+  };
+}
+
+function successStep(name: string): PipelineStep {
+  return { name, run: async () => ({ success: true }) };
+}
+
+function failStep(name: string, error: string): PipelineStep {
+  return { name, run: async () => ({ success: false, error }) };
+}
+
+describe('runPipeline', () => {
+  it('runs all steps in sequence and returns success', async () => {
+    const executionOrder: string[] = [];
+    const steps: PipelineStep[] = [
+      {
+        name: 'Step A',
+        run: async () => {
+          executionOrder.push('A');
+          return { success: true };
+        },
+      },
+      {
+        name: 'Step B',
+        run: async () => {
+          executionOrder.push('B');
+          return { success: true };
+        },
+      },
+      {
+        name: 'Step C',
+        run: async () => {
+          executionOrder.push('C');
+          return { success: true };
+        },
+      },
+    ];
+
+    const result = await runPipeline(steps, makeCtx());
+
+    expect(result).toEqual({ success: true, llmCalls: 0, fixIterations: 0 });
+    expect(executionOrder).toEqual(['A', 'B', 'C']);
+  });
+
+  it('stops at first failing step and returns failure', async () => {
+    const executionOrder: string[] = [];
+    const steps: PipelineStep[] = [
+      {
+        name: 'Step A',
+        run: async () => {
+          executionOrder.push('A');
+          return { success: true };
+        },
+      },
+      failStep('Step B', 'something broke'),
+      {
+        name: 'Step C',
+        run: async () => {
+          executionOrder.push('C');
+          return { success: true };
+        },
+      },
+    ];
+
+    const result = await runPipeline(steps, makeCtx());
+
+    expect(result).toEqual({
+      success: false,
+      error: 'Step "Step B" failed: something broke',
+      llmCalls: 0,
+      fixIterations: 0,
+    });
+    expect(executionOrder).toEqual(['A']);
+  });
+
+  it('returns success with empty steps', async () => {
+    const result = await runPipeline([], makeCtx());
+
+    expect(result).toEqual({ success: true, llmCalls: 0, fixIterations: 0 });
+  });
+
+  it('reports accumulated llmCalls and fixIterations from context', async () => {
+    const steps: PipelineStep[] = [{ name: 'Step A', run: async () => ({ success: true }) }];
+    const ctx = makeCtx({ llmCalls: 5, fixIterations: 3 });
+
+    const result = await runPipeline(steps, ctx);
+
+    expect(result).toEqual({ success: true, llmCalls: 5, fixIterations: 3 });
+  });
+
+  it('reports context metrics on failure', async () => {
+    const steps: PipelineStep[] = [failStep('Broken', 'oops')];
+    const ctx = makeCtx({ llmCalls: 2, fixIterations: 1 });
+
+    const result = await runPipeline(steps, ctx);
+
+    expect(result).toEqual({
+      success: false,
+      error: 'Step "Broken" failed: oops',
+      llmCalls: 2,
+      fixIterations: 1,
+    });
+  });
+});
+
+const fakeModel = {} as LanguageModel;
+
+function makeModels(): PipelineModels {
+  return {
+    generateTest: fakeModel,
+    generateComponent: fakeModel,
+    typeFixer: fakeModel,
+    testFixer: fakeModel,
+    lintFixer: fakeModel,
+    storyFixer: fakeModel,
+  };
+}
+
+function makeConfig(overrides: Partial<PipelineConfig> = {}): PipelineConfig {
+  return {
+    models: {
+      generateTest: '',
+      generateComponent: '',
+      typeFixer: '',
+      testFixer: '',
+      lintFixer: '',
+      storyFixer: '',
+    },
+    maxTypeFixIterations: 3,
+    maxTestFixIterations: 3,
+    maxLintFixIterations: 2,
+    maxStoryFixIterations: 2,
+    enableStorybookTest: false,
+    enableVisualTest: false,
+    ...overrides,
+  };
+}
+
+describe('buildPipelineSteps', () => {
+  it('returns 7 core steps by default', () => {
+    const steps = buildPipelineSteps(makeModels(), makeConfig(), 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',
+    ]);
+  });
+
+  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',
+    ]);
+  });
+
+  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('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({ enableStorybookTest: true, enableVisualTest: true });
+    const ctx = makeCtx();
+    const steps = buildPipelineSteps(models, config, ctx);
+
+    for (const step of steps) {
+      await step.run();
+    }
+
+    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(ctx);
+    expect(storyFixLoop).toHaveBeenCalledWith(models.storyFixer, ctx, 2);
+    expect(storybookTestStep).toHaveBeenCalledWith(ctx, true);
+    expect(visualTestStep).toHaveBeenCalled();
+  });
+});

package/src/pipeline/run-pipeline.ts

@@ -0,0 +1,160 @@
+import type { LanguageModel } from 'ai';
+import createDebug from 'debug';
+import type { DeterministicStoryProp, StoryVariant } from '../generate-story-deterministic';
+import type { SpecDeltas } from '../spec-contract';
+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';
+
+const debug = createDebug('auto:component-implementor-react:pipeline');
+
+export type StepResult = {
+  success: boolean;
+  error?: string;
+};
+
+export type PipelineStep = {
+  name: string;
+  run: () => Promise<StepResult>;
+};
+
+export type PipelineContext = {
+  componentName: string;
+  componentPath: string;
+  testPath: string;
+  storyPath: string;
+  componentImportPath: string;
+  targetDir: string;
+  specDeltas: SpecDeltas;
+  projectSection: string;
+  props?: DeterministicStoryProp[];
+  composes: Array<{ id: string; path: string }>;
+  existingComponent?: string;
+  existingTest?: string;
+  isModify: boolean;
+  storyVariants?: StoryVariant[];
+  testCode?: string;
+  componentCode?: string;
+  storyCode?: string;
+  llmCalls: number;
+  fixIterations: number;
+};
+
+export type ModelConfig = {
+  generateTest: string;
+  generateComponent: string;
+  typeFixer: string;
+  testFixer: string;
+  lintFixer: string;
+  storyFixer: string;
+};
+
+export type PipelineConfig = {
+  models: ModelConfig;
+  maxTypeFixIterations: number;
+  maxTestFixIterations: number;
+  maxLintFixIterations: number;
+  maxStoryFixIterations: number;
+  enableStorybookTest: boolean;
+  enableVisualTest: boolean;
+};
+
+export type PipelineModels = {
+  generateTest: LanguageModel;
+  generateComponent: LanguageModel;
+  typeFixer: LanguageModel;
+  testFixer: LanguageModel;
+  lintFixer: LanguageModel;
+  storyFixer: LanguageModel;
+};
+
+export type PipelineResult = {
+  success: boolean;
+  error?: string;
+  llmCalls: number;
+  fixIterations: number;
+};
+
+export function buildPipelineSteps(
+  models: PipelineModels,
+  config: PipelineConfig,
+  ctx: PipelineContext,
+): PipelineStep[] {
+  const steps: PipelineStep[] = [
+    {
+      name: 'Generate Test',
+      run: () => generateTestStep(models.generateTest, ctx),
+    },
+    {
+      name: 'Generate Component',
+      run: () => generateComponentStep(models.generateComponent, ctx),
+    },
+    {
+      name: 'Type Fix Loop',
+      run: () => typeFixLoop(models.typeFixer, ctx, config.maxTypeFixIterations),
+    },
+    {
+      name: 'Test Fix Loop',
+      run: () => testFixLoop(models.testFixer, ctx, config.maxTestFixIterations),
+    },
+    {
+      name: 'Lint Fix Loop',
+      run: () => lintFixLoop(models.lintFixer, ctx, config.maxLintFixIterations),
+    },
+    {
+      name: 'Generate Story',
+      run: () => generateStoryStep(ctx),
+    },
+    {
+      name: 'Story Fix Loop',
+      run: () => storyFixLoop(models.storyFixer, ctx, config.maxStoryFixIterations),
+    },
+  ];
+
+  if (config.enableStorybookTest) {
+    steps.push({
+      name: 'Storybook Test',
+      run: () => storybookTestStep(ctx, true),
+    });
+  }
+
+  if (config.enableVisualTest) {
+    steps.push({
+      name: 'Visual Test',
+      run: () => visualTestStep(),
+    });
+  }
+
+  return steps;
+}
+
+export async function runPipeline(steps: PipelineStep[], ctx: PipelineContext): Promise<PipelineResult> {
+  for (const step of steps) {
+    debug('Running step: %s', step.name);
+    const result = await step.run();
+
+    if (!result.success) {
+      debug('Step failed: %s — %s', step.name, result.error);
+      return {
+        success: false,
+        error: `Step "${step.name}" failed: ${result.error}`,
+        llmCalls: ctx.llmCalls,
+        fixIterations: ctx.fixIterations,
+      };
+    }
+
+    debug('Step passed: %s', step.name);
+  }
+
+  return {
+    success: true,
+    llmCalls: ctx.llmCalls,
+    fixIterations: ctx.fixIterations,
+  };
+}

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

@@ -0,0 +1,130 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('ai', () => ({
+  generateText: vi.fn(),
+}));
+
+vi.mock('node:fs/promises', () => ({
+  readFile: vi.fn(),
+  writeFile: vi.fn(),
+}));
+
+import { readFile, writeFile } from 'node:fs/promises';
+import { generateText } from 'ai';
+import type { PipelineContext } from '../run-pipeline';
+import { generateComponentStep } from './generate-component';
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
+  return {
+    componentName: 'MyButton',
+    componentPath: '/project/src/MyButton.tsx',
+    testPath: '/project/src/MyButton.test.tsx',
+    storyPath: '/project/src/MyButton.stories.tsx',
+    componentImportPath: '@/components/ui/MyButton',
+    targetDir: '/project',
+    specDeltas: {
+      structure: ['renders a button'],
+      rendering: [],
+      interaction: [],
+      styling: [],
+    },
+    projectSection: '',
+    composes: [],
+    isModify: false,
+    llmCalls: 0,
+    fixIterations: 0,
+    testCode: 'import { render } from "@testing-library/react";',
+    ...overrides,
+  };
+}
+
+describe('generateComponentStep', () => {
+  it('generates component code and writes to componentPath', async () => {
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nexport function MyButton() { return <button>Click</button> }\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const ctx = makeCtx();
+    const result = await generateComponentStep('mock-model' as never, ctx);
+
+    expect(result).toEqual({ success: true });
+    expect(generateText).toHaveBeenCalledTimes(1);
+    expect(writeFile).toHaveBeenCalledWith(
+      '/project/src/MyButton.tsx',
+      'export function MyButton() { return <button>Click</button> }',
+      'utf-8',
+    );
+  });
+
+  it('includes test code in prompt when available', async () => {
+    vi.mocked(generateText).mockResolvedValue({
+      text: 'component code',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const ctx = makeCtx({ testCode: 'test source code' });
+    await generateComponentStep('mock-model' as never, ctx);
+
+    const call = vi.mocked(generateText).mock.calls[0][0];
+    expect(call.prompt).toContain('## Test File');
+    expect(call.prompt).toContain('test source code');
+  });
+
+  it('resolves composed component exports and falls back on missing files', async () => {
+    vi.mocked(readFile).mockRejectedValue(new Error('ENOENT'));
+    vi.mocked(generateText).mockResolvedValue({
+      text: 'component code',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const ctx = makeCtx({
+      composes: [{ id: 'card', path: 'src/components/Card' }],
+    });
+    const result = await generateComponentStep('mock-model' as never, ctx);
+
+    expect(result).toEqual({ success: true });
+  });
+
+  it('resolves composed component exports when file exists', async () => {
+    vi.mocked(readFile).mockResolvedValue('export function Card() {}' as never);
+    vi.mocked(generateText).mockResolvedValue({
+      text: 'component code',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const ctx = makeCtx({
+      composes: [{ id: 'card', path: 'src/components/Card' }],
+    });
+    await generateComponentStep('mock-model' as never, ctx);
+
+    expect(readFile).toHaveBeenCalled();
+  });
+
+  it('generates scaffold section when props are provided', async () => {
+    vi.mocked(generateText).mockResolvedValue({
+      text: 'component with scaffold',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const ctx = makeCtx({
+      props: [
+        {
+          name: 'label',
+          type: 'string',
+          required: true,
+          description: 'Button label',
+          category: 'data',
+        },
+      ],
+    });
+    await generateComponentStep('mock-model' as never, ctx);
+
+    const call = vi.mocked(generateText).mock.calls[0][0];
+    expect(call.prompt).toContain('## Component Scaffold');
+  });
+});

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

@@ -0,0 +1,60 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import type { LanguageModel } from 'ai';
+import { generateText } from 'ai';
+import { extractCodeBlock } from '../../extract-code-block';
+import { extractExportedNames } from '../../extract-exports';
+import { buildComponentPrompt } from '../../prompt';
+import { generateScaffold, type ScaffoldComposedComponent } from '../../scaffold';
+import type { PipelineContext, StepResult } from '../run-pipeline';
+
+export async function generateComponentStep(model: LanguageModel, ctx: PipelineContext): Promise<StepResult> {
+  const resolvedComposes: ScaffoldComposedComponent[] = await Promise.all(
+    ctx.composes.map(async (c) => {
+      const candidates = [
+        path.join(ctx.targetDir, c.path),
+        path.join(ctx.targetDir, `${c.path}.tsx`),
+        path.join(ctx.targetDir, `${c.path}.ts`),
+      ];
+      for (const candidate of candidates) {
+        try {
+          const content = await readFile(candidate, 'utf-8');
+          const exports = extractExportedNames(content);
+          return { ...c, exports };
+        } catch {}
+      }
+      return c;
+    }),
+  );
+
+  let scaffoldSection = '';
+  if (ctx.props && ctx.props.length > 0) {
+    const scaffold = generateScaffold({
+      componentName: ctx.componentName,
+      props: ctx.props.map((p) => ({ ...p, category: p.category })),
+      composes: resolvedComposes,
+      specDeltas: ctx.specDeltas,
+    });
+    scaffoldSection = `\n\n## Component Scaffold\n\n\`\`\`tsx\n${scaffold.scaffoldedFile}\n\`\`\`\n\nUse the props type exactly as shown. Replace \`__BODY__\` with the full component body.`;
+  }
+
+  const { system, prompt: basePrompt } = buildComponentPrompt({
+    componentName: ctx.componentName,
+    specDeltas: ctx.specDeltas,
+    existingComponent: ctx.existingComponent,
+    projectSection: ctx.projectSection,
+    testCode: ctx.testCode,
+  });
+
+  const prompt = scaffoldSection ? basePrompt + scaffoldSection : basePrompt;
+
+  const { text } = await generateText({ model, system, prompt });
+  ctx.llmCalls++;
+
+  const componentCode = extractCodeBlock(text);
+  ctx.componentCode = componentCode;
+
+  await writeFile(ctx.componentPath, componentCode, 'utf-8');
+
+  return { success: true };
+}

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

@@ -0,0 +1,54 @@
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('node:fs/promises', () => ({
+  writeFile: vi.fn(),
+}));
+
+import { writeFile } from 'node:fs/promises';
+import type { PipelineContext } from '../run-pipeline';
+import { generateStoryStep } from './generate-story';
+
+function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
+  return {
+    componentName: 'MyButton',
+    componentPath: '/project/src/MyButton.tsx',
+    testPath: '/project/src/MyButton.test.tsx',
+    storyPath: '/project/src/MyButton.stories.tsx',
+    componentImportPath: '@/components/ui/MyButton',
+    targetDir: '/project',
+    specDeltas: { structure: [], rendering: [], interaction: [], styling: [] },
+    projectSection: '',
+    composes: [],
+    isModify: false,
+    llmCalls: 0,
+    fixIterations: 0,
+    ...overrides,
+  };
+}
+
+describe('generateStoryStep', () => {
+  it('generates story deterministically and writes to storyPath', async () => {
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const ctx = makeCtx();
+    const result = await generateStoryStep(ctx);
+
+    expect(result).toEqual({ success: true });
+    expect(ctx.storyCode).toContain('export default meta');
+    expect(ctx.storyCode).toContain('MyButton');
+    expect(writeFile).toHaveBeenCalledWith(
+      '/project/src/MyButton.stories.tsx',
+      expect.stringContaining('export default meta'),
+      'utf-8',
+    );
+  });
+
+  it('does not increment llmCalls since no LLM is used', async () => {
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const ctx = makeCtx();
+    await generateStoryStep(ctx);
+
+    expect(ctx.llmCalls).toBe(0);
+  });
+});