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

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

@@ -0,0 +1,201 @@
+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(),
+}));
+
+vi.mock('../../tools/test-runner', () => ({
+  runTests: vi.fn(),
+}));
+
+import { readFile, writeFile } from 'node:fs/promises';
+import { generateText } from 'ai';
+import { runTests } from '../../tools/test-runner';
+import type { PipelineContext } from '../run-pipeline';
+import { testFixLoop } from './test-fix-loop';
+
+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,
+    componentCode: 'original component',
+    testCode: 'original test',
+    ...overrides,
+  };
+}
+
+describe('testFixLoop', () => {
+  it('returns success immediately when all tests pass', async () => {
+    vi.mocked(runTests).mockReturnValue({
+      passed: true,
+      numPassed: 3,
+      numFailed: 0,
+      failures: [],
+      output: '',
+    });
+
+    const result = await testFixLoop('mock-model' as never, makeCtx(), 3);
+
+    expect(result).toEqual({ success: true });
+    expect(generateText).not.toHaveBeenCalled();
+  });
+
+  it('calls LLM to fix failures and writes fixed files', async () => {
+    vi.mocked(runTests)
+      .mockReturnValueOnce({
+        passed: false,
+        numPassed: 1,
+        numFailed: 1,
+        failures: ['renders button: element not found'],
+        output: 'FAIL',
+      })
+      .mockReturnValueOnce({
+        passed: true,
+        numPassed: 2,
+        numFailed: 0,
+        failures: [],
+        output: 'PASS',
+      });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nfixed component\n```\n```tsx\nfixed test\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await testFixLoop('mock-model' as never, makeCtx(), 3);
+
+    expect(result).toEqual({ success: true });
+    expect(generateText).toHaveBeenCalledTimes(1);
+    expect(writeFile).toHaveBeenCalledWith('/project/src/MyButton.tsx', 'fixed component', 'utf-8');
+    expect(writeFile).toHaveBeenCalledWith('/project/src/MyButton.test.tsx', 'fixed test', 'utf-8');
+  });
+
+  it('returns failure after exhausting max iterations', async () => {
+    vi.mocked(runTests).mockReturnValue({
+      passed: false,
+      numPassed: 0,
+      numFailed: 1,
+      failures: ['persistent failure'],
+      output: 'FAIL',
+    });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nstill broken\n```\n```tsx\nstill broken test\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+    vi.mocked(readFile).mockResolvedValue('still broken' as never);
+
+    const result = await testFixLoop('mock-model' as never, makeCtx(), 1);
+
+    expect(result).toEqual({
+      success: false,
+      error: expect.stringContaining('Test failures remain after 1 iterations'),
+    });
+  });
+
+  it('handles single code block response by updating only component', async () => {
+    vi.mocked(runTests)
+      .mockReturnValueOnce({
+        passed: false,
+        numPassed: 0,
+        numFailed: 1,
+        failures: ['failure'],
+        output: 'FAIL',
+      })
+      .mockReturnValueOnce({
+        passed: true,
+        numPassed: 1,
+        numFailed: 0,
+        failures: [],
+        output: 'PASS',
+      });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nfixed component only\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await testFixLoop('mock-model' as never, makeCtx(), 3);
+
+    expect(result).toEqual({ success: true });
+    expect(writeFile).toHaveBeenCalledWith('/project/src/MyButton.tsx', 'fixed component only', 'utf-8');
+    expect(writeFile).toHaveBeenCalledTimes(1);
+  });
+
+  it('returns success when final check passes after last iteration fix', async () => {
+    vi.mocked(runTests)
+      .mockReturnValueOnce({
+        passed: false,
+        numPassed: 0,
+        numFailed: 1,
+        failures: ['failure'],
+        output: 'FAIL',
+      })
+      .mockReturnValueOnce({
+        passed: true,
+        numPassed: 1,
+        numFailed: 0,
+        failures: [],
+        output: 'PASS',
+      });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nfixed\n```\n```tsx\nfixed test\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await testFixLoop('mock-model' as never, makeCtx(), 1);
+
+    expect(result).toEqual({ success: true });
+  });
+
+  it('uses empty string fallback when componentCode and testCode are undefined', async () => {
+    vi.mocked(runTests)
+      .mockReturnValueOnce({
+        passed: false,
+        numPassed: 0,
+        numFailed: 1,
+        failures: ['failure'],
+        output: 'FAIL',
+      })
+      .mockReturnValueOnce({
+        passed: true,
+        numPassed: 1,
+        numFailed: 0,
+        failures: [],
+        output: 'PASS',
+      });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nfixed\n```\n```tsx\nfixed test\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await testFixLoop(
+      'mock-model' as never,
+      makeCtx({ componentCode: undefined, testCode: undefined }),
+      1,
+    );
+
+    expect(result).toEqual({ success: true });
+  });
+});

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

@@ -0,0 +1,56 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import type { LanguageModel } from 'ai';
+import { generateText } from 'ai';
+import { extractCodeBlocks } from '../../extract-code-block';
+import { buildTestFixPrompt } from '../../prompt';
+import { runTests } from '../../tools/test-runner';
+import type { PipelineContext, StepResult } from '../run-pipeline';
+
+export async function testFixLoop(
+  model: LanguageModel,
+  ctx: PipelineContext,
+  maxIterations: number,
+): Promise<StepResult> {
+  for (let i = 0; i < maxIterations; i++) {
+    const result = runTests(ctx.testPath, ctx.targetDir);
+
+    if (result.passed) {
+      return { success: true };
+    }
+
+    const { system, prompt } = buildTestFixPrompt({
+      componentCode: ctx.componentCode ?? '',
+      testCode: ctx.testCode ?? '',
+      failures: result.failures,
+      testOutput: result.output,
+    });
+
+    const { text } = await generateText({ model, system, prompt });
+    ctx.llmCalls++;
+    ctx.fixIterations++;
+
+    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');
+    }
+  }
+
+  const finalResult = runTests(ctx.testPath, ctx.targetDir);
+  if (finalResult.passed) {
+    return { success: true };
+  }
+
+  ctx.componentCode = await readFile(ctx.componentPath, 'utf-8');
+  ctx.testCode = await readFile(ctx.testPath, 'utf-8');
+
+  return {
+    success: false,
+    error: `Test failures remain after ${maxIterations} iterations: ${finalResult.failures.join('; ')}`,
+  };
+}

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

@@ -0,0 +1,145 @@
+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(),
+}));
+
+vi.mock('../../tools/type-checker', () => ({
+  runTypeCheck: vi.fn(),
+}));
+
+import { readFile, writeFile } from 'node:fs/promises';
+import { generateText } from 'ai';
+import { runTypeCheck } from '../../tools/type-checker';
+import type { PipelineContext } from '../run-pipeline';
+import { typeFixLoop } from './type-fix-loop';
+
+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,
+    componentCode: 'original component',
+    testCode: 'original test',
+    ...overrides,
+  };
+}
+
+describe('typeFixLoop', () => {
+  it('returns success immediately when type check passes', async () => {
+    vi.mocked(runTypeCheck).mockReturnValue({ passed: true, errors: [] });
+
+    const result = await typeFixLoop('mock-model' as never, makeCtx(), 3);
+
+    expect(result).toEqual({ success: true });
+    expect(generateText).not.toHaveBeenCalled();
+  });
+
+  it('calls LLM to fix type errors and writes fixed files', async () => {
+    vi.mocked(runTypeCheck)
+      .mockReturnValueOnce({ passed: false, errors: ['error TS2307: Module not found'] })
+      .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);
+
+    const result = await typeFixLoop('mock-model' as never, makeCtx(), 3);
+
+    expect(result).toEqual({ success: true });
+    expect(generateText).toHaveBeenCalledTimes(1);
+    expect(writeFile).toHaveBeenCalledWith('/project/src/MyButton.tsx', 'fixed component', 'utf-8');
+    expect(writeFile).toHaveBeenCalledWith('/project/src/MyButton.test.tsx', 'fixed test', 'utf-8');
+  });
+
+  it('returns failure after exhausting max iterations', async () => {
+    vi.mocked(runTypeCheck).mockReturnValue({
+      passed: false,
+      errors: ['persistent error'],
+    });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nstill broken\n```\n```tsx\nstill broken test\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+    vi.mocked(readFile).mockResolvedValue('still broken' as never);
+
+    const result = await typeFixLoop('mock-model' as never, makeCtx(), 2);
+
+    expect(result).toEqual({
+      success: false,
+      error: expect.stringContaining('Type errors remain after 2 iterations'),
+    });
+    expect(generateText).toHaveBeenCalledTimes(2);
+  });
+
+  it('handles single code block response by updating only component', async () => {
+    vi.mocked(runTypeCheck)
+      .mockReturnValueOnce({ passed: false, errors: ['error in component'] })
+      .mockReturnValueOnce({ passed: true, errors: [] });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nfixed component only\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await typeFixLoop('mock-model' as never, makeCtx(), 3);
+
+    expect(result).toEqual({ success: true });
+    expect(writeFile).toHaveBeenCalledWith('/project/src/MyButton.tsx', 'fixed component only', 'utf-8');
+    expect(writeFile).toHaveBeenCalledTimes(1);
+  });
+
+  it('returns success when final check passes after last iteration fix', async () => {
+    vi.mocked(runTypeCheck)
+      .mockReturnValueOnce({ passed: false, errors: ['error'] })
+      .mockReturnValueOnce({ passed: true, errors: [] });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nfixed\n```\n```tsx\nfixed test\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await typeFixLoop('mock-model' as never, makeCtx(), 1);
+
+    expect(result).toEqual({ success: true });
+  });
+
+  it('uses empty string fallback when componentCode and testCode are undefined', async () => {
+    vi.mocked(runTypeCheck)
+      .mockReturnValueOnce({ passed: false, errors: ['error'] })
+      .mockReturnValueOnce({ passed: true, errors: [] });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nfixed\n```\n```tsx\nfixed test\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await typeFixLoop(
+      'mock-model' as never,
+      makeCtx({ componentCode: undefined, testCode: undefined }),
+      1,
+    );
+
+    expect(result).toEqual({ success: true });
+  });
+});

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

@@ -0,0 +1,55 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import type { LanguageModel } from 'ai';
+import { generateText } from 'ai';
+import { extractCodeBlocks } from '../../extract-code-block';
+import { buildTypeFixPrompt } from '../../prompt';
+import { runTypeCheck } from '../../tools/type-checker';
+import type { PipelineContext, StepResult } from '../run-pipeline';
+
+export async function typeFixLoop(
+  model: LanguageModel,
+  ctx: PipelineContext,
+  maxIterations: number,
+): Promise<StepResult> {
+  for (let i = 0; i < maxIterations; i++) {
+    const result = runTypeCheck(ctx.targetDir, [ctx.componentPath, ctx.testPath]);
+
+    if (result.passed) {
+      return { success: true };
+    }
+
+    const { system, prompt } = buildTypeFixPrompt({
+      componentCode: ctx.componentCode ?? '',
+      testCode: ctx.testCode ?? '',
+      errors: result.errors,
+    });
+
+    const { text } = await generateText({ model, system, prompt });
+    ctx.llmCalls++;
+    ctx.fixIterations++;
+
+    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');
+    }
+  }
+
+  const finalResult = runTypeCheck(ctx.targetDir, [ctx.componentPath, ctx.testPath]);
+  if (finalResult.passed) {
+    return { success: true };
+  }
+
+  ctx.componentCode = await readFile(ctx.componentPath, 'utf-8');
+  ctx.testCode = await readFile(ctx.testPath, 'utf-8');
+
+  return {
+    success: false,
+    error: `Type errors remain after ${maxIterations} iterations: ${finalResult.errors.join('; ')}`,
+  };
+}

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

@@ -0,0 +1,10 @@
+import { describe, expect, it } from 'vitest';
+import { visualTestStep } from './visual-test';
+
+describe('visualTestStep', () => {
+  it('returns success (placeholder)', async () => {
+    const result = await visualTestStep();
+
+    expect(result).toEqual({ success: true });
+  });
+});

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

@@ -0,0 +1,5 @@
+import type { StepResult } from '../run-pipeline';
+
+export async function visualTestStep(): Promise<StepResult> {
+  return { success: true };
+}

package/src/project-context.ts

@@ -0,0 +1,205 @@
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+
+export type ComposedComponent = { id: string; path: string };
+
+function kebabToPascal(name: string): string {
+  return name
+    .split('-')
+    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+    .join('');
+}
+
+/**
+ * Extract the component name from a file path.
+ * e.g. "./src/components/ui/Button.tsx" → "Button"
+ *      "src/components/MyWidget.tsx" → "MyWidget"
+ */
+function componentNameFromPath(filePath: string): string {
+  const lastSlash = filePath.lastIndexOf('/');
+  const filename = lastSlash === -1 ? filePath : filePath.slice(lastSlash + 1);
+  const dotIndex = filename.lastIndexOf('.');
+  return dotIndex === -1 ? filename : filename.slice(0, dotIndex);
+}
+
+/**
+ * Converts a file path like `src/components/ui/Button.tsx` or `src/components/MyFeature`
+ * to a `@/` import alias like `@/components/ui/Button` or `@/components/MyFeature`.
+ */
+function filePathToImportAlias(filePath: string): string {
+  let rel = filePath;
+  if (rel.startsWith('./')) {
+    rel = rel.slice(2);
+  }
+  if (rel.startsWith('src/')) {
+    rel = rel.slice(4);
+  }
+  // Strip .tsx/.ts extension
+  rel = rel.replace(/\.tsx?$/, '');
+  return `@/${rel}`;
+}
+
+async function readFileSafe(filePath: string): Promise<string | null> {
+  try {
+    return await readFile(filePath, 'utf-8');
+  } catch {
+    return null;
+  }
+}
+
+export async function buildPackageJsonSection(targetDir: string): Promise<string> {
+  const content = await readFileSafe(path.join(targetDir, 'package.json'));
+  if (!content) return '';
+
+  return [
+    '## Project Dependencies (package.json)',
+    'Only use packages listed here. Do not import packages that are not installed.',
+    '',
+    content,
+  ].join('\n');
+}
+
+export async function buildBarrelFileSection(targetDir: string): Promise<string> {
+  const content = await readFileSafe(path.join(targetDir, 'src', 'components', 'ui', 'index.ts'));
+  if (!content) return '';
+
+  return [
+    '## Component Library (src/components/ui/index.ts)',
+    "These are all available UI components. Import from '@/components/ui'.",
+    '',
+    content,
+  ].join('\n');
+}
+
+export async function buildStylesSection(targetDir: string): Promise<string> {
+  const content = await readFileSafe(path.join(targetDir, 'src', 'index.css'));
+  if (!content) return '';
+
+  return [
+    '## Project Styles (Tailwind CSS v4)',
+    "This project uses Tailwind CSS v4. Here is the project's stylesheet with design tokens and base utilities:",
+    '',
+    content,
+  ].join('\n');
+}
+
+/**
+ * Extract only the exported interface from a component file:
+ * - export type/interface declarations (props types)
+ * - export function/const signatures (without function body)
+ * - import statements (to understand dependencies)
+ *
+ * This reduces token usage by ~70% compared to sending full source.
+ */
+function extractSignature(content: string): string {
+  const lines = content.split('\n');
+  const signatureLines: string[] = [];
+  let inExportBlock = false;
+  let braceDepth = 0;
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+
+    // Always include import statements
+    if (trimmed.startsWith('import ')) {
+      signatureLines.push(line);
+      continue;
+    }
+
+    // Capture export type / export interface blocks
+    if (trimmed.startsWith('export type ') || trimmed.startsWith('export interface ')) {
+      inExportBlock = true;
+      braceDepth = 0;
+    }
+
+    // Capture export { ... } re-export blocks (e.g. `export { Select, SelectTrigger, ... }`)
+    if (!inExportBlock && trimmed.startsWith('export {')) {
+      inExportBlock = true;
+      braceDepth = 0;
+    }
+
+    // Track export function/const signatures (just the signature line)
+    if (
+      !inExportBlock &&
+      (trimmed.startsWith('export function ') ||
+        trimmed.startsWith('export const ') ||
+        trimmed.startsWith('export default '))
+    ) {
+      // Grab just the signature — stop at opening brace
+      const sigLine = trimmed.replace(/\{[\s\S]*$/, '{ ... }');
+      signatureLines.push(sigLine);
+      continue;
+    }
+
+    if (inExportBlock) {
+      signatureLines.push(line);
+      for (const ch of trimmed) {
+        if (ch === '{') braceDepth++;
+        if (ch === '}') braceDepth--;
+      }
+      if (braceDepth <= 0 && trimmed.includes('}')) {
+        inExportBlock = false;
+      }
+    }
+  }
+
+  return signatureLines.join('\n');
+}
+
+export async function buildComposedComponentsSection(
+  targetDir: string,
+  composes: ComposedComponent[],
+): Promise<string> {
+  if (composes.length === 0) return '';
+
+  const sections: string[] = [
+    '## Composed Components',
+    'This component uses the following components. Import each using the exact path shown.',
+  ];
+
+  for (const { id, path: componentPath } of composes) {
+    const pascalName = componentNameFromPath(componentPath);
+    const importAlias = filePathToImportAlias(componentPath);
+
+    // Try .tsx then without extension
+    const candidates = [
+      path.join(targetDir, componentPath + '.tsx'),
+      path.join(targetDir, componentPath + '.ts'),
+      path.join(targetDir, componentPath),
+    ];
+
+    let content: string | null = null;
+    let resolvedRelative = componentPath;
+    for (const candidate of candidates) {
+      content = await readFileSafe(candidate);
+      if (content) {
+        resolvedRelative = path.relative(targetDir, candidate);
+        break;
+      }
+    }
+
+    if (!content) continue;
+
+    // Extract only the signature (types + exports), not full implementation
+    const signature = extractSignature(content);
+
+    sections.push('');
+    sections.push(`### ${pascalName} — import from '${importAlias}' (${resolvedRelative})`);
+    sections.push('```tsx');
+    sections.push(signature);
+    sections.push('```');
+  }
+
+  return sections.join('\n');
+}
+
+export async function buildFullProjectSection(targetDir: string, composes: ComposedComponent[]): Promise<string> {
+  const parts = await Promise.all([
+    buildPackageJsonSection(targetDir),
+    buildBarrelFileSection(targetDir),
+    buildStylesSection(targetDir),
+    buildComposedComponentsSection(targetDir, composes),
+  ]);
+
+  return parts.filter(Boolean).join('\n\n');
+}