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

package/scripts/improve.ts

@@ -0,0 +1,592 @@
+/**
+ * Improvement Loop for the Component Implementor React Agent
+ *
+ * Runs the 4-agent pipeline (component + test + story in parallel, then reconcile)
+ * against MULTIPLE spec scenarios, evaluates each with Claude CLI, aggregates
+ * scores, and iteratively improves the agents' system prompts until average
+ * quality reaches the target.
+ *
+ * Using multiple diverse scenarios prevents overfitting the prompts to
+ * a single component type. The improvement prompt enforces that all suggested
+ * changes are component-agnostic structural patterns.
+ *
+ * Usage:
+ *   npx tsx scripts/improve.ts
+ *
+ * Input structure (minimum 3 scenarios recommended):
+ *   inputs/
+ *     action-button/
+ *       spec.json
+ *     status-badge/
+ *       spec.json
+ *     data-card/
+ *       spec.json
+ *
+ * Environment:
+ *   MAX_ITERATIONS   — max improvement cycles (default: 5)
+ *   TARGET_SCORE     — minimum average score (default: 90)
+ *   CLAUDE_MODEL     — Claude CLI model flag (default: opus)
+ */
+
+import 'dotenv/config';
+import { type ExecSyncOptions, execSync } from 'child_process';
+import {
+  copyFileSync,
+  existsSync,
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  rmSync,
+  statSync,
+  unlinkSync,
+  writeFileSync,
+} from 'fs';
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const PKG_ROOT = resolve(__dirname, '..');
+
+// ─── Config ──────────────────────────────────────────────────────────────────
+const MAX_ITERATIONS = parseInt(process.env.MAX_ITERATIONS ?? '5', 10);
+const TARGET_SCORE = parseInt(process.env.TARGET_SCORE ?? '90', 10);
+const CLAUDE_MODEL = process.env.CLAUDE_MODEL ?? 'opus';
+
+// ─── Paths ───────────────────────────────────────────────────────────────────
+const INPUTS_DIR = resolve(PKG_ROOT, 'inputs');
+const OUTPUTS_DIR = resolve(PKG_ROOT, 'outputs');
+const PROMPT_FILE = resolve(PKG_ROOT, 'src', 'prompt.ts');
+const IMPROVEMENT_PROMPT_FILE = resolve(PKG_ROOT, 'improvement-prompt.md');
+const RUNNER_FILE = resolve(PKG_ROOT, '.improve-runner.ts');
+
+const EXEC_OPTS: ExecSyncOptions = {
+  cwd: PKG_ROOT,
+  env: { ...process.env },
+  maxBuffer: 50 * 1024 * 1024,
+};
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function log(msg: string) {
+  console.log(`  ${msg}`);
+}
+
+function heading(msg: string) {
+  console.log(`\n${'─'.repeat(60)}`);
+  console.log(`  ${msg}`);
+  console.log(`${'─'.repeat(60)}\n`);
+}
+
+// ─── Clean scenario outputs ─────────────────────────────────────────────────
+function cleanScenarioOutputs(scenarios: string[]): void {
+  for (const scenario of scenarios) {
+    const outputDir = resolve(OUTPUTS_DIR, scenario);
+    if (existsSync(outputDir)) {
+      rmSync(outputDir, { recursive: true, force: true });
+    }
+  }
+  log('Cleared previous scenario outputs.');
+}
+
+// ─── Discover scenarios ──────────────────────────────────────────────────────
+function discoverScenarios(): string[] {
+  if (!existsSync(INPUTS_DIR)) {
+    return [];
+  }
+
+  const entries = readdirSync(INPUTS_DIR);
+  const scenarios: string[] = [];
+
+  for (const entry of entries) {
+    const entryPath = resolve(INPUTS_DIR, entry);
+    if (!statSync(entryPath).isDirectory()) continue;
+    const specPath = resolve(entryPath, 'spec.json');
+    if (existsSync(specPath)) {
+      scenarios.push(entry);
+    }
+  }
+
+  return scenarios.sort();
+}
+
+// ─── Validate ────────────────────────────────────────────────────────────────
+function validate(): string[] {
+  const scenarios = discoverScenarios();
+
+  if (scenarios.length === 0) {
+    console.error('\n  ERROR: No scenarios found in inputs/');
+    console.error('  Create subdirectories with spec.json files:');
+    console.error('    inputs/action-button/spec.json');
+    console.error('    inputs/data-card/spec.json');
+    console.error('    inputs/search-input/spec.json\n');
+    process.exit(1);
+  }
+
+  if (scenarios.length < 3) {
+    console.warn(`\n  WARNING: Only ${scenarios.length} scenario(s) found.`);
+    console.warn('  Minimum 3 diverse scenarios recommended to prevent overfitting.\n');
+  }
+
+  if (!existsSync(PROMPT_FILE)) {
+    console.error(`\n  ERROR: Prompt file not found at ${PROMPT_FILE}\n`);
+    process.exit(1);
+  }
+  if (!existsSync(IMPROVEMENT_PROMPT_FILE)) {
+    console.error(`\n  ERROR: Improvement prompt not found at ${IMPROVEMENT_PROMPT_FILE}\n`);
+    process.exit(1);
+  }
+
+  log(`Found ${scenarios.length} scenario(s): ${scenarios.join(', ')}`);
+  return scenarios;
+}
+
+// ─── Run agent for one scenario ──────────────────────────────────────────────
+function runAgentForScenario(scenario: string): void {
+  log(`  Running agent on ${scenario}...`);
+
+  const outputDir = resolve(OUTPUTS_DIR, scenario);
+  mkdirSync(outputDir, { recursive: true });
+
+  // The runner imports the generators directly, runs the 3-parallel + reconcile
+  // pipeline, and writes the outputs.
+  const runnerCode = `
+import 'dotenv/config';
+import { readFileSync, writeFileSync } from 'fs';
+import { generateComponentFile } from './src/generate-component.js';
+import { generateTestFile } from './src/generate-test.js';
+import { generateStoryFile } from './src/generate-story.js';
+import { reconcile } from './src/reconcile.js';
+
+const spec = JSON.parse(readFileSync('inputs/${scenario}/spec.json', 'utf-8'));
+const { componentName, specDeltas } = spec;
+
+console.log('    Phase 1: Running 3 agents in parallel...');
+const [componentCode, testCode, storyCode] = await Promise.all([
+  generateComponentFile({ componentName, specDeltas }),
+  generateTestFile({ componentName, specDeltas }),
+  generateStoryFile({ componentName, specDeltas }),
+]);
+
+console.log('    Phase 2: Reconciling...');
+const reconciled = await reconcile({
+  componentName,
+  specDeltas,
+  componentCode,
+  testCode,
+  storyCode,
+});
+
+writeFileSync('outputs/${scenario}/component.tsx', reconciled.componentCode);
+writeFileSync('outputs/${scenario}/test.tsx', testCode);
+writeFileSync('outputs/${scenario}/story.tsx', reconciled.storyCode);
+
+console.log('    -> Wrote component.tsx, test.tsx, story.tsx');
+`;
+
+  writeFileSync(RUNNER_FILE, runnerCode);
+
+  try {
+    execSync('npx tsx .improve-runner.ts', { ...EXEC_OPTS, stdio: 'inherit' });
+  } finally {
+    try {
+      unlinkSync(RUNNER_FILE);
+    } catch {}
+  }
+}
+
+// ─── Evaluate one scenario with Claude CLI ───────────────────────────────────
+function evaluateScenario(scenario: string): { totalScore: number; raw: any } | null {
+  log(`  Evaluating ${scenario}...`);
+
+  const improvementPrompt = readFileSync(IMPROVEMENT_PROMPT_FILE, 'utf-8');
+  const specInput = readFileSync(resolve(INPUTS_DIR, scenario, 'spec.json'), 'utf-8');
+  const componentOutput = readFileSync(resolve(OUTPUTS_DIR, scenario, 'component.tsx'), 'utf-8');
+  const testOutput = readFileSync(resolve(OUTPUTS_DIR, scenario, 'test.tsx'), 'utf-8');
+  const storyOutput = readFileSync(resolve(OUTPUTS_DIR, scenario, 'story.tsx'), 'utf-8');
+  const agentPrompts = readFileSync(PROMPT_FILE, 'utf-8');
+
+  const fullPrompt = [
+    improvementPrompt,
+    '',
+    '---',
+    '',
+    `## Input: Spec Deltas (scenario: ${scenario})`,
+    '',
+    '```json',
+    specInput,
+    '```',
+    '',
+    '## Output: Generated Component',
+    '',
+    '```tsx',
+    componentOutput,
+    '```',
+    '',
+    '## Output: Generated Test',
+    '',
+    '```tsx',
+    testOutput,
+    '```',
+    '',
+    '## Output: Generated Story',
+    '',
+    '```tsx',
+    storyOutput,
+    '```',
+    '',
+    '## Agent System Prompts (src/prompt.ts)',
+    '',
+    '```typescript',
+    agentPrompts,
+    '```',
+    '',
+    'Now evaluate the output against the rubric. Respond with ONLY the JSON scorecard — no markdown fences, no explanation, just the raw JSON object.',
+  ].join('\n');
+
+  let result: string;
+  try {
+    result = execSync(`claude -p --model ${CLAUDE_MODEL}`, {
+      ...EXEC_OPTS,
+      input: fullPrompt,
+      encoding: 'utf-8',
+      stdio: ['pipe', 'pipe', 'pipe'],
+    });
+  } catch (err: any) {
+    console.error(`    Claude CLI evaluation failed for ${scenario}:`, err.message);
+    return null;
+  }
+
+  const jsonMatch = result.match(/\{[\s\S]*\}/);
+  if (!jsonMatch) {
+    console.error(`    Failed to parse evaluation JSON for ${scenario}`);
+    return null;
+  }
+
+  try {
+    const parsed = JSON.parse(jsonMatch[0]);
+    return { totalScore: parsed.totalScore ?? 0, raw: parsed };
+  } catch (err: any) {
+    console.error(`    JSON parse error for ${scenario}:`, err.message);
+    return null;
+  }
+}
+
+// ─── Aggregate improvements across scenarios ─────────────────────────────────
+function aggregateImprovements(evaluations: { scenario: string; eval: any }[]): any[] {
+  const allImprovements: { improvement: any; scenario: string }[] = [];
+  for (const e of evaluations) {
+    for (const imp of e.eval.promptImprovements ?? []) {
+      allImprovements.push({ improvement: imp, scenario: e.scenario });
+    }
+  }
+
+  // Deduplicate by category + priority — prefer improvements that appear in multiple scenarios
+  const seen = new Map<string, { improvement: any; count: number; scenarios: string[] }>();
+
+  for (const { improvement, scenario } of allImprovements) {
+    const key = `${improvement.category}::${improvement.priority}::${improvement.desiredBehavior?.slice(0, 80)}`;
+    const existing = seen.get(key);
+    if (existing) {
+      existing.count++;
+      existing.scenarios.push(scenario);
+    } else {
+      seen.set(key, { improvement, count: 1, scenarios: [scenario] });
+    }
+  }
+
+  // Sort: improvements that appear across MORE scenarios come first (more generalizable)
+  const sorted = [...seen.values()].sort(
+    (a, b) => b.count - a.count || priorityOrder(a.improvement.priority) - priorityOrder(b.improvement.priority),
+  );
+
+  // Take top 10
+  return sorted.slice(0, 10).map((s) => ({
+    ...s.improvement,
+    _appearsInScenarios: s.scenarios,
+    _frequency: s.count,
+  }));
+}
+
+function priorityOrder(p: string): number {
+  switch (p) {
+    case 'critical':
+      return 0;
+    case 'high':
+      return 1;
+    case 'medium':
+      return 2;
+    case 'low':
+      return 3;
+    default:
+      return 4;
+  }
+}
+
+// ─── Apply improvements ─────────────────────────────────────────────────────
+function applyImprovements(improvements: any[]): boolean {
+  if (improvements.length === 0) {
+    log('No improvements to apply.');
+    return false;
+  }
+
+  log(`Applying ${improvements.length} aggregated improvements...`);
+
+  const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+  const backupPath = resolve(OUTPUTS_DIR, `prompt.backup.${timestamp}.ts`);
+  mkdirSync(OUTPUTS_DIR, { recursive: true });
+  copyFileSync(PROMPT_FILE, backupPath);
+  log(`Backed up prompt to outputs/prompt.backup.${timestamp}.ts`);
+
+  const currentPrompt = readFileSync(PROMPT_FILE, 'utf-8');
+
+  const improvementList = improvements
+    .map((imp: any, i: number) => {
+      const freq =
+        imp._frequency > 1
+          ? ` (appeared in ${imp._frequency} scenarios: ${imp._appearsInScenarios?.join(', ')})`
+          : ` (from scenario: ${imp._appearsInScenarios?.[0]})`;
+      return (
+        `### Improvement ${i + 1} [${imp.priority}] — ${imp.category}${freq}\n` +
+        `**Current behavior:** ${imp.currentBehavior}\n` +
+        `**Desired behavior:** ${imp.desiredBehavior}\n` +
+        `**Suggested change:** ${imp.suggestedPromptChange}\n`
+      );
+    })
+    .join('\n');
+
+  const applyPrompt = [
+    'You are modifying an LLM system prompt file to improve the quality of its output.',
+    'Your job is to apply specific, targeted improvements. Be surgical.',
+    '',
+    'CRITICAL CONSTRAINT: This prompt must remain COMPONENT-AGNOSTIC. It will be used',
+    'to generate ANY React component (buttons, tables, modals, forms, dashboards, etc).',
+    'Do NOT introduce any component-specific vocabulary, prop names, or examples tied',
+    'to a particular component type. Every change must be expressed as a structural',
+    'pattern that works universally.',
+    '',
+    'The file contains FOUR system prompts — one per agent (Frontend Agent, Tester Agent,',
+    'Story Agent, Reconciler). Each improvement specifies which agent it targets. Apply',
+    "changes only to the targeted agent's prompt sections.",
+    '',
+    '## Current prompt file (src/prompt.ts)',
+    '',
+    '```typescript',
+    currentPrompt,
+    '```',
+    '',
+    '## Improvements to apply (ordered by cross-scenario frequency and priority)',
+    '',
+    improvementList,
+    '',
+    '## Instructions',
+    '',
+    "1. Apply each improvement to the correct agent's prompt section.",
+    '2. Be surgical — make minimum changes to address each improvement.',
+    '3. Do NOT restructure, reformat, or rewrite sections that are not targeted.',
+    '4. Preserve all existing rules, formatting, and structure.',
+    '5. Keep the file as valid TypeScript — do not break string literals, template literals, or exports.',
+    '6. NEVER introduce component-specific vocabulary into the prompt.',
+    '7. Express every new rule as a structural pattern, not a component instance.',
+    "8. Preserve the persona paragraphs at the start of each agent's preamble.",
+    '',
+    'Output ONLY the complete modified file content.',
+    'No markdown code fences. No explanations. No commentary.',
+    'Start directly with the first line of the TypeScript file.',
+  ].join('\n');
+
+  let result: string;
+  try {
+    result = execSync(`claude -p --model ${CLAUDE_MODEL}`, {
+      ...EXEC_OPTS,
+      input: applyPrompt,
+      encoding: 'utf-8',
+      stdio: ['pipe', 'pipe', 'pipe'],
+    });
+  } catch (err: any) {
+    console.error('  Claude CLI prompt-improvement failed:', err.message);
+    return false;
+  }
+
+  let cleaned = result.trim();
+  if (cleaned.startsWith('```')) {
+    cleaned = cleaned.replace(/^```\w*\n?/, '').replace(/\n?```\s*$/, '');
+  }
+
+  if (cleaned.length < 500) {
+    console.error('  Modified prompt is suspiciously short — skipping write.');
+    return false;
+  }
+
+  writeFileSync(PROMPT_FILE, cleaned);
+  log('Prompt file updated.');
+  return true;
+}
+
+// ─── Print scorecard ─────────────────────────────────────────────────────────
+function printAggregateScorecard(
+  results: { scenario: string; totalScore: number; eval: any }[],
+  avgScore: number,
+): void {
+  console.log('');
+  console.log('  ┌──────────────────────────────────────────────┐');
+  console.log(`  │  AVERAGE SCORE: ${avgScore.toFixed(1).padStart(5)} / 100                   │`);
+  console.log('  ├──────────────────────────────────────────────┤');
+
+  for (const r of results) {
+    const name = r.scenario.padEnd(30);
+    console.log(`  │  ${name} ${String(r.totalScore).padStart(3)} / 100    │`);
+  }
+
+  console.log('  ├──────────────────────────────────────────────┤');
+
+  // Show per-category averages
+  const categories = new Map<string, { total: number; max: number; count: number }>();
+  for (const r of results) {
+    for (const [key, val] of Object.entries(r.eval.categories ?? {})) {
+      const v = val as any;
+      const existing = categories.get(key) ?? { total: 0, max: v.maxScore, count: 0 };
+      existing.total += v.score;
+      existing.count++;
+      categories.set(key, existing);
+    }
+  }
+  for (const [key, val] of categories) {
+    const avg = (val.total / val.count).toFixed(1);
+    const name = key.padEnd(30);
+    console.log(`  │  ${name} ${avg.padStart(4)} / ${String(val.max).padEnd(4)}│`);
+  }
+
+  console.log('  └──────────────────────────────────────────────┘');
+  console.log('');
+}
+
+// ─── Save iteration artifacts ────────────────────────────────────────────────
+function saveIteration(
+  iteration: number,
+  results: { scenario: string; totalScore: number; eval: any }[],
+  avgScore: number,
+): void {
+  const iterDir = resolve(OUTPUTS_DIR, `iteration-${iteration}`);
+  mkdirSync(iterDir, { recursive: true });
+
+  for (const r of results) {
+    const scenarioDir = resolve(iterDir, r.scenario);
+    mkdirSync(scenarioDir, { recursive: true });
+
+    // Copy generated files
+    for (const file of ['component.tsx', 'test.tsx', 'story.tsx']) {
+      const srcPath = resolve(OUTPUTS_DIR, r.scenario, file);
+      if (existsSync(srcPath)) {
+        copyFileSync(srcPath, resolve(scenarioDir, file));
+      }
+    }
+    writeFileSync(resolve(scenarioDir, 'evaluation.json'), JSON.stringify(r.eval, null, 2));
+  }
+
+  copyFileSync(PROMPT_FILE, resolve(iterDir, 'prompt.ts'));
+  writeFileSync(
+    resolve(iterDir, 'summary.json'),
+    JSON.stringify(
+      {
+        avgScore,
+        scores: results.map((r) => ({ scenario: r.scenario, score: r.totalScore })),
+      },
+      null,
+      2,
+    ),
+  );
+}
+
+// ─── Main loop ───────────────────────────────────────────────────────────────
+async function main() {
+  console.log('');
+  const agentModel = process.env.CUSTOM_PROVIDER_DEFAULT_MODEL ?? 'unknown';
+  const providerName = process.env.CUSTOM_PROVIDER_NAME ?? 'unknown';
+
+  console.log('╔══════════════════════════════════════════════════╗');
+  console.log('║   Component Implementor — Improvement Loop       ║');
+  console.log(`║   Target: ${TARGET_SCORE}/100 avg    Max iterations: ${MAX_ITERATIONS}       ║`);
+  console.log('╠══════════════════════════════════════════════════╣');
+  console.log(`║   Agent model:  ${agentModel.padEnd(32)}║`);
+  console.log(`║   Provider:     ${providerName.padEnd(32)}║`);
+  console.log(`║   Eval model:   claude (${CLAUDE_MODEL})${''.padEnd(Math.max(0, 22 - CLAUDE_MODEL.length))}║`);
+  console.log('╚══════════════════════════════════════════════════╝');
+
+  const scenarios = validate();
+
+  for (let i = 1; i <= MAX_ITERATIONS; i++) {
+    heading(`Iteration ${i} / ${MAX_ITERATIONS}`);
+
+    // 1. Clean previous outputs — each iteration starts fresh
+    cleanScenarioOutputs(scenarios);
+
+    // 2. Run agent on all scenarios
+    log('Running agent on all scenarios...');
+    for (const scenario of scenarios) {
+      try {
+        runAgentForScenario(scenario);
+      } catch (err: any) {
+        console.error(`  Agent failed on ${scenario}: ${err.message}`);
+      }
+    }
+
+    // 3. Evaluate all scenarios
+    log('\nEvaluating all scenarios...');
+    const results: { scenario: string; totalScore: number; eval: any }[] = [];
+
+    for (const scenario of scenarios) {
+      const outputPath = resolve(OUTPUTS_DIR, scenario, 'component.tsx');
+      if (!existsSync(outputPath)) {
+        log(`  Skipping ${scenario} — no output generated.`);
+        continue;
+      }
+
+      const evalResult = evaluateScenario(scenario);
+      if (evalResult) {
+        results.push({ scenario, totalScore: evalResult.totalScore, eval: evalResult.raw });
+      }
+    }
+
+    if (results.length === 0) {
+      console.error('  No scenarios evaluated successfully.');
+      continue;
+    }
+
+    // 4. Aggregate scores
+    const avgScore = results.reduce((sum, r) => sum + r.totalScore, 0) / results.length;
+    const minScore = Math.min(...results.map((r) => r.totalScore));
+
+    printAggregateScorecard(results, avgScore);
+    saveIteration(i, results, avgScore);
+
+    // 5. Check target
+    if (avgScore >= TARGET_SCORE) {
+      log(`Target average score reached! (${avgScore.toFixed(1)} >= ${TARGET_SCORE})`);
+      log(`Min score: ${minScore} across ${results.length} scenarios.`);
+      log('Final outputs in outputs/<scenario>/');
+      break;
+    }
+
+    log(`Average ${avgScore.toFixed(1)} < ${TARGET_SCORE} target (min: ${minScore}).`);
+
+    // 6. Aggregate improvements from all scenarios and apply
+    if (i < MAX_ITERATIONS) {
+      const improvements = aggregateImprovements(results);
+      log(`\n  ${improvements.length} aggregated improvements (cross-scenario deduped)`);
+
+      const improved = applyImprovements(improvements);
+      if (improved) {
+        log('Prompt updated — next iteration will use the improved prompt.');
+      } else {
+        log('Could not apply improvements — retrying with current prompt.');
+      }
+    } else {
+      log('Max iterations reached. Best outputs saved.');
+    }
+  }
+}
+
+main().catch((err) => {
+  console.error('Fatal error:', err);
+  process.exit(1);
+});

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

@@ -55,12 +55,17 @@ describe('implement-component', () => {
   });
 
   describe('handleImplementComponent', () => {
-    it('generates 3 files and returns ComponentImplemented on success', async () => {
+    it('generates 3 files via parallel agents + reconciliation and returns ComponentImplemented', async () => {
       const mockGenerateText = vi.mocked(generateText);
+      // Phase 1: 3 parallel calls (component, test, story)
       mockGenerateText
-        .mockResolvedValueOnce({ text: 'test file code' } as Awaited<ReturnType<typeof generateText>>)
         .mockResolvedValueOnce({ text: 'component file code' } as Awaited<ReturnType<typeof generateText>>)
-        .mockResolvedValueOnce({ text: 'story file code' } as Awaited<ReturnType<typeof generateText>>);
+        .mockResolvedValueOnce({ text: 'test file code' } as Awaited<ReturnType<typeof generateText>>)
+        .mockResolvedValueOnce({ text: 'story file code' } as Awaited<ReturnType<typeof generateText>>)
+        // Phase 2: reconciliation
+        .mockResolvedValueOnce({
+          text: '```tsx\nreconciled component\n```\n\n```tsx\nreconciled story\n```',
+        } as Awaited<ReturnType<typeof generateText>>);
 
       vi.mocked(existsSync).mockReturnValue(false);
       vi.mocked(writeFile).mockResolvedValue(undefined);
@@ -85,15 +90,19 @@ describe('implement-component', () => {
         correlationId: 'cor-1',
       });
 
+      expect(mockGenerateText).toHaveBeenCalledTimes(4);
       expect(writeFile).toHaveBeenCalledTimes(3);
     });
 
     it('reads existing component when modifying', async () => {
       const mockGenerateText = vi.mocked(generateText);
       mockGenerateText
-        .mockResolvedValueOnce({ text: 'test code' } as Awaited<ReturnType<typeof generateText>>)
         .mockResolvedValueOnce({ text: 'component code' } as Awaited<ReturnType<typeof generateText>>)
-        .mockResolvedValueOnce({ text: 'story code' } as Awaited<ReturnType<typeof generateText>>);
+        .mockResolvedValueOnce({ text: 'test code' } as Awaited<ReturnType<typeof generateText>>)
+        .mockResolvedValueOnce({ text: 'story code' } as Awaited<ReturnType<typeof generateText>>)
+        .mockResolvedValueOnce({
+          text: '```tsx\nrc\n```\n```tsx\nrs\n```',
+        } as Awaited<ReturnType<typeof generateText>>);
 
       vi.mocked(existsSync).mockReturnValue(true);
       vi.mocked(readFile).mockResolvedValue('existing component code' as never);

package/src/commands/implement-component.ts

@@ -6,6 +6,7 @@ import createDebug from 'debug';
 import { generateComponentFile } from '../generate-component';
 import { generateStoryFile } from '../generate-story';
 import { generateTestFile } from '../generate-test';
+import { reconcile } from '../reconcile';
 
 const debug = createDebug('auto:component-implementor-react:command');
 
@@ -100,33 +101,28 @@ export async function handleImplementComponent(
       styling: payload.styling,
     };
 
-    debug('Generating test file...');
-    const testCode = await generateTestFile({
-      componentName,
-      specDeltas,
-      existingComponent,
-    });
+    debug('Running Frontend, Tester, and Story agents in parallel...');
+    const [componentCode, testCode, storyCode] = await Promise.all([
+      generateComponentFile({ componentName, specDeltas, existingComponent }),
+      generateTestFile({ componentName, specDeltas, existingComponent }),
+      generateStoryFile({ componentName, specDeltas }),
+    ]);
 
-    debug('Generating component file...');
-    const componentCode = await generateComponentFile({
+    debug('Reconciling component and story against tests...');
+    const reconciled = await reconcile({
       componentName,
       specDeltas,
+      componentCode,
       testCode,
+      storyCode,
       existingComponent,
     });
 
-    debug('Generating story file...');
-    const storyCode = await generateStoryFile({
-      componentName,
-      specDeltas,
-      componentCode,
-    });
-
     await mkdir(path.dirname(testPath), { recursive: true });
     await Promise.all([
       writeFile(testPath, testCode, 'utf-8'),
-      writeFile(componentPath, componentCode, 'utf-8'),
-      writeFile(storyPath, storyCode, 'utf-8'),
+      writeFile(componentPath, reconciled.componentCode, 'utf-8'),
+      writeFile(storyPath, reconciled.storyCode, 'utf-8'),
     ]);
 
     debug('Wrote 3 files for %s', componentName);