@auto-engineer/component-implementor-react 1.95.0 → 1.96.0

package/src/reconcile.test.ts

@@ -0,0 +1,127 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { reconcile } from './reconcile';
+
+vi.mock('ai', () => ({
+  generateText: vi.fn(),
+}));
+
+vi.mock('@auto-engineer/model-factory', () => ({
+  createModelFromEnv: vi.fn(() => 'mock-model'),
+}));
+
+import { generateText } from 'ai';
+
+const specDeltas = {
+  structure: ['renders a Button element'],
+  rendering: ['shows loading spinner when loading=true'],
+  interaction: ['calls onClick when clicked'],
+  styling: ['applies primary variant by default'],
+};
+
+describe('reconcile', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('passes system prompt with methodology, rules, and checklist', async () => {
+    const mockGenerateText = vi.mocked(generateText);
+    mockGenerateText.mockResolvedValue({
+      text: '```tsx\nc\n```\n```tsx\ns\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+
+    await reconcile({
+      componentName: 'Button',
+      specDeltas,
+      componentCode: 'c',
+      testCode: 't',
+      storyCode: 's',
+    });
+
+    const system = mockGenerateText.mock.calls[0][0].system as string;
+    expect(system).toContain('staff frontend engineer');
+    expect(system).toContain('integration review');
+    expect(system).toContain('METHODOLOGY');
+    expect(system).toContain('RULES');
+    expect(system).toContain('QUALITY CHECKLIST');
+    expect(system).toContain('Tests are immutable');
+  });
+
+  it('sends component, test, and story code in the user prompt', async () => {
+    const mockGenerateText = vi.mocked(generateText);
+    mockGenerateText.mockResolvedValue({
+      text: '```tsx\nfixed component\n```\n\n```tsx\nfixed story\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+
+    await reconcile({
+      componentName: 'Button',
+      specDeltas,
+      componentCode: 'original component',
+      testCode: 'test code here',
+      storyCode: 'original story',
+    });
+
+    const prompt = mockGenerateText.mock.calls[0][0].prompt as string;
+    expect(prompt).toContain('## Component Code');
+    expect(prompt).toContain('original component');
+    expect(prompt).toContain('## Test File (source of truth');
+    expect(prompt).toContain('test code here');
+    expect(prompt).toContain('## Story File');
+    expect(prompt).toContain('original story');
+  });
+
+  it('parses two code blocks and returns component + story', async () => {
+    const mockGenerateText = vi.mocked(generateText);
+    mockGenerateText.mockResolvedValue({
+      text: '```tsx\nfixed component code\n```\n\n```tsx\nfixed story code\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+
+    const result = await reconcile({
+      componentName: 'Button',
+      specDeltas,
+      componentCode: 'original component',
+      testCode: 'test code',
+      storyCode: 'original story',
+    });
+
+    expect(result.componentCode).toBe('fixed component code');
+    expect(result.storyCode).toBe('fixed story code');
+  });
+
+  it('falls back to original code when blocks are missing', async () => {
+    const mockGenerateText = vi.mocked(generateText);
+    mockGenerateText.mockResolvedValue({
+      text: 'no code blocks at all',
+    } as Awaited<ReturnType<typeof generateText>>);
+
+    const result = await reconcile({
+      componentName: 'Button',
+      specDeltas,
+      componentCode: 'original component',
+      testCode: 'test code',
+      storyCode: 'original story',
+    });
+
+    expect(result.componentCode).toBe('no code blocks at all');
+    expect(result.storyCode).toBe('original story');
+  });
+
+  it('includes existing component in prompt when provided', async () => {
+    const mockGenerateText = vi.mocked(generateText);
+    mockGenerateText.mockResolvedValue({
+      text: '```tsx\nfixed\n```\n```tsx\nstory\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+
+    await reconcile({
+      componentName: 'Button',
+      specDeltas,
+      componentCode: 'new component',
+      testCode: 'test code',
+      storyCode: 'story code',
+      existingComponent: 'old component',
+    });
+
+    const prompt = mockGenerateText.mock.calls[0][0].prompt as string;
+    expect(prompt).toContain('## Existing Component');
+    expect(prompt).toContain('old component');
+  });
+});

package/src/reconcile.ts

@@ -0,0 +1,27 @@
+import { createModelFromEnv } from '@auto-engineer/model-factory';
+import { generateText } from 'ai';
+import { extractCodeBlocks } from './extract-code-block';
+import { buildReconcilerPrompt, type ReconcilerPromptInput } from './prompt';
+
+export type ReconcileInput = ReconcilerPromptInput;
+
+export type ReconcileOutput = {
+  componentCode: string;
+  storyCode: string;
+};
+
+export async function reconcile(input: ReconcileInput): Promise<ReconcileOutput> {
+  const { system, prompt } = buildReconcilerPrompt(input);
+  const { text } = await generateText({
+    model: createModelFromEnv(),
+    system,
+    prompt,
+  });
+
+  const blocks = extractCodeBlocks(text);
+
+  return {
+    componentCode: blocks[0] ?? input.componentCode,
+    storyCode: blocks[1] ?? input.storyCode,
+  };
+}

package/src/run.ts

@@ -0,0 +1,106 @@
+import { mkdir, readFile, rm, stat } from 'node:fs/promises';
+import path from 'node:path';
+import { config } from 'dotenv';
+import { handleImplementComponent, type ImplementComponentCommand } from './commands/implement-component';
+
+// Load .env from package root
+config({ path: path.resolve(import.meta.dirname, '..', '.env') });
+
+const pkgDir = path.resolve(import.meta.dirname, '..');
+
+function pascalCase(id: string): string {
+  return id
+    .split('-')
+    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+    .join('');
+}
+
+/**
+ * Fix empty file paths for new components that weren't in the components DB.
+ * Derives sensible paths from the componentId.
+ */
+function patchJobPayload(payload: Record<string, unknown>): void {
+  const componentId = payload.componentId as string;
+  const name = pascalCase(componentId);
+  const componentFile = `src/components/${name}.tsx`;
+  const storyFile = `src/components/${name}.stories.tsx`;
+
+  // Fix empty files.create
+  const files = payload.files as { create?: string[]; modify?: string[] };
+  if (files.create && files.create.length > 0 && files.create[0] === '') {
+    files.create = [componentFile];
+  }
+  if (!files.create || files.create.length === 0) {
+    files.create = [componentFile];
+  }
+
+  // Fix empty storybookPath
+  if (!payload.storybookPath || payload.storybookPath === '.stories') {
+    payload.storybookPath = storyFile;
+  }
+}
+
+async function main() {
+  const jobGraphPath = path.join(pkgDir, 'job-graph.json');
+  const raw = await readFile(jobGraphPath, 'utf-8');
+  const jobs = JSON.parse(raw) as Array<{
+    id: string;
+    dependsOn: string[];
+    target: string;
+    payload: Record<string, unknown>;
+  }>;
+
+  console.log(`[run] Loaded ${jobs.length} jobs from job-graph.json`);
+
+  // Target dir — where component files get written
+  const targetDir = path.join(pkgDir, 'output');
+
+  // Guard: if 'output' exists as a file, remove it so mkdir succeeds
+  try {
+    const s = await stat(targetDir);
+    if (!s.isDirectory()) {
+      await rm(targetDir);
+    }
+  } catch {
+    // doesn't exist yet — fine
+  }
+
+  await mkdir(path.join(targetDir, 'src/components'), { recursive: true });
+
+  for (const job of jobs) {
+    const componentId = job.payload.componentId as string;
+    console.log(`\n[run] ── ${componentId} ──`);
+
+    // Patch empty paths for new components
+    patchJobPayload(job.payload);
+
+    const command: ImplementComponentCommand = {
+      type: 'ImplementComponent',
+      data: {
+        targetDir,
+        job: job as ImplementComponentCommand['data']['job'],
+      },
+      timestamp: new Date(),
+      requestId: `run-${componentId}`,
+      correlationId: `run-${Date.now()}`,
+    };
+
+    const result = await handleImplementComponent(command);
+
+    if (result.type === 'ComponentImplemented') {
+      console.log(`[run] ✓ ${result.data.name}`);
+      console.log(`[run]   component: ${result.data.componentPath}`);
+      console.log(`[run]   test:      ${result.data.testPath}`);
+      console.log(`[run]   story:     ${result.data.storyPath}`);
+    } else {
+      console.log(`[run] ✗ ${result.data.name}: ${result.data.error}`);
+    }
+  }
+
+  console.log('\n[run] Done');
+}
+
+main().catch((err) => {
+  console.error('[run] Fatal error:', err);
+  process.exit(1);
+});

package/src/spec-contract.ts

@@ -0,0 +1,22 @@
+export type SpecDeltas = {
+  structure: string[];
+  rendering: string[];
+  interaction: string[];
+  styling: string[];
+};
+
+export function buildSpecSection(heading: string, items: string[]): string {
+  if (items.length === 0) return '';
+  return `## ${heading}\n${items.map((i) => `- ${i}`).join('\n')}`;
+}
+
+export function buildSpecText(specDeltas: SpecDeltas): string {
+  return [
+    buildSpecSection('Structure', specDeltas.structure),
+    buildSpecSection('Rendering', specDeltas.rendering),
+    buildSpecSection('Interaction', specDeltas.interaction),
+    buildSpecSection('Styling', specDeltas.styling),
+  ]
+    .filter(Boolean)
+    .join('\n\n');
+}