feat(react-component-implementer): improvements

Author: osamanar

.changeset/auto-d2cc0c2c.md

@@ -0,0 +1,33 @@
+---
+"@auto-engineer/adk-claude-code-bridge": minor
+"@auto-engineer/app-assembler": minor
+"@auto-engineer/app-implementer": minor
+"@auto-engineer/checks": minor
+"@auto-engineer/cli": minor
+"@auto-engineer/component-implementor-react": minor
+"@auto-engineer/component-parser": minor
+"@auto-engineer/dev-server": minor
+"@auto-engineer/file-store": minor
+"@auto-engineer/file-upload": minor
+"@auto-engineer/generate-react-client": minor
+"@auto-engineer/id": minor
+"@auto-engineer/job-graph-processor": minor
+"@auto-engineer/message-bus": minor
+"@auto-engineer/message-store": minor
+"@auto-engineer/model-factory": minor
+"@auto-engineer/narrative": minor
+"@auto-engineer/pipeline": minor
+"@auto-engineer/release-automation": minor
+"@auto-engineer/server-generator-apollo-emmett": minor
+"@auto-engineer/server-generator-nestjs": minor
+"@auto-engineer/server-implementer": minor
+"@auto-engineer/set-theme": minor
+"@auto-engineer/submit-bug-report": minor
+"create-auto-app": minor
+---
+
+Based on the actual diff, here's the changelog:
+
+- Added pipeline logging with per-stage timing, token usage tracking, and a summary report for component generation runs
+- Improved pipeline performance by running initial type checks and tests in parallel and skipping fix loops when checks already pass
+- Enhanced fix loop agents with iteration tracking and smarter stage-level diagnostics

packages/component-implementor-react/src/agents/lint-fix-loop-agent.ts

@@ -45,6 +45,8 @@ export class LintFixLoopAgent extends BaseAgent {
   private readonly targetDir: string;
   private readonly filePaths: string[];
   private readonly maxIterations: number;
+  iterationsUsed = 0;
+  autoFixed = false;
 
   constructor(config: LintFixLoopConfig) {
     const lintFixAgent = createLintFixAgent(config.model);
@@ -59,7 +61,11 @@ export class LintFixLoopAgent extends BaseAgent {
   }
 
   protected async *runAsyncImpl(ctx: InvocationContext): AsyncGenerator<Event, void, void> {
+    this.iterationsUsed = 0;
+    this.autoFixed = false;
+
     runLintFix(this.filePaths, this.targetDir);
+    this.autoFixed = true;
     debug('Auto-fix pass completed');
 
     for (let i = 0; i < this.maxIterations; i++) {
@@ -70,6 +76,7 @@ export class LintFixLoopAgent extends BaseAgent {
         return;
       }
 
+      this.iterationsUsed++;
       debug('Lint check failed with %d errors on iteration %d', result.errors.length, i);
 
       const errorText = result.errors.join('\n');

packages/component-implementor-react/src/agents/pipeline-agent.ts

@@ -5,11 +5,14 @@ import type { BaseLlm } from 'adk-llm-bridge';
 import createDebug from 'debug';
 import { extractCodeBlock } from '../extract-code-block.js';
 import { extractExportedNames } from '../extract-exports.js';
+import { PipelineLogger } from '../pipeline-logger.js';
 import { generatePlaceholderComponent, generatePlaceholderStory } from '../placeholder.js';
 import { sanitizeBodyWithImports } from '../sanitize-body.js';
 import { generateScaffold, type ScaffoldComposedComponent } from '../scaffold.js';
 import { type StoryVariant, scaffoldStoryFile } from '../scaffold-story.js';
 import { buildSpecText, type SpecDeltas } from '../spec-contract.js';
+import { runTestsAsync } from '../tools/test-runner.js';
+import { runTypeCheckAsync } from '../tools/type-checker.js';
 import { createComponentBodyAgent } from './component-body-agent.js';
 import { createEvaluationAgent } from './evaluation-agent.js';
 import { LintFixLoopAgent } from './lint-fix-loop-agent.js';
@@ -260,16 +263,27 @@ export class ComponentPipelineAgent extends BaseAgent {
     });
     ctx.session.events.push(userEvent);
 
+    const logger = new PipelineLogger(componentName);
+
     debug('Stage 1: Generating component body and tests in parallel');
+    logger.stageStart('Stage 1: Component body');
+    logger.stageStart('Stage 1: Test generation');
+    const llmStart1 = Date.now();
     const componentGen = this.runSubAgent(this.componentBodyAgent, ctx);
     const testGen = this.runSubAgent(this.testGenerationAgent, ctx);
     const [componentEvents, testEvents] = await Promise.all([
       this.collectEvents(componentGen),
       this.collectEvents(testGen),
     ]);
+    const llmDuration1 = Date.now() - llmStart1;
+    logger.trackLlmTime(llmDuration1);
+    logger.trackEvents(componentEvents);
+    logger.trackEvents(testEvents);
     for (const event of componentEvents) yield event;
     for (const event of testEvents) yield event;
     this.llmCallCount += 2;
+    logger.stageEnd('Stage 1: Component body');
+    logger.stageEnd('Stage 1: Test generation');
 
     const rawBody = String(ctx.session.state['component_body'] ?? '');
     const { body, additionalImports } = sanitizeBodyWithImports(rawBody, componentName);
@@ -291,58 +305,155 @@ export class ComponentPipelineAgent extends BaseAgent {
     writeFileSync(testPath, testCode, 'utf-8');
 
     debug('Stage 2: Generating story');
+    logger.stageStart('Stage 2: Story generation');
     if (storyVariants && storyVariants.length > 0) {
       const storyCode = scaffoldStoryFile({
         componentName,
         componentImportPath,
         variants: storyVariants,
       });
       writeFileSync(storyPath, storyCode, 'utf-8');
+      logger.stageEnd('Stage 2: Story generation', 'scaffolded, no LLM');
     } else {
       ctx.session.state['component_code'] = componentCode;
 
+      const llmStart2 = Date.now();
+      const storyEvents: Event[] = [];
       for await (const event of this.storyAgent.runAsync(ctx)) {
+        storyEvents.push(event);
         yield event;
       }
+      logger.trackLlmTime(Date.now() - llmStart2);
+      logger.trackEvents(storyEvents);
       this.llmCallCount++;
 
       const rawStory = String(ctx.session.state['story_code'] ?? '');
       const storyCode = extractCodeBlock(rawStory);
       writeFileSync(storyPath, storyCode, 'utf-8');
+      logger.stageEnd('Stage 2: Story generation');
     }
 
-    debug('Stage 3: Fix loops — type check');
-    for await (const event of this.typeFixLoopAgent.runAsync(ctx)) {
-      yield event;
+    debug('Stage 3: Parallel initial checks');
+    logger.stageStart('Stage 3: Initial checks');
+    const checksT0 = Date.now();
+    const [typeResult, testResult, storyTypeResult] = await Promise.all([
+      runTypeCheckAsync(targetDir, [componentPath, storyPath]),
+      runTestsAsync(testPath, targetDir),
+      runTypeCheckAsync(targetDir, [storyPath]),
+    ]);
+    logger.trackToolTime(Date.now() - checksT0);
+    logger.stageEnd(
+      'Stage 3: Initial checks',
+      [
+        typeResult.passed ? 'types: ok' : `types: ${typeResult.errors.length} error(s)`,
+        testResult.passed ? 'tests: ok' : `tests: ${testResult.failures.length} failure(s)`,
+        storyTypeResult.passed ? 'story types: ok' : `story types: ${storyTypeResult.errors.length} error(s)`,
+      ].join(', '),
+    );
+
+    if (!typeResult.passed) {
+      debug('Stage 3: Fix loops — type check');
+      logger.stageStart('Stage 3: Type check fix');
+      const t0 = Date.now();
+      for await (const event of this.typeFixLoopAgent.runAsync(ctx)) {
+        logger.trackTokens(event);
+        yield event;
+      }
+      const dur = Date.now() - t0;
+      if (this.typeFixLoopAgent.iterationsUsed > 0) {
+        logger.trackLlmTime(dur);
+        logger.addFixIterations(this.typeFixLoopAgent.iterationsUsed);
+      } else {
+        logger.trackToolTime(dur);
+      }
+      logger.stageEnd('Stage 3: Type check fix', `${this.typeFixLoopAgent.iterationsUsed} fix iteration(s)`);
+    } else {
+      debug('Stage 3: Type check passed — skipping fix loop');
     }
 
-    debug('Stage 3: Fix loops — test fix');
-    for await (const event of this.testFixLoopAgent.runAsync(ctx)) {
-      yield event;
+    if (!testResult.passed) {
+      debug('Stage 3: Fix loops — test fix');
+      logger.stageStart('Stage 3: Test fix');
+      const t0 = Date.now();
+      for await (const event of this.testFixLoopAgent.runAsync(ctx)) {
+        logger.trackTokens(event);
+        yield event;
+      }
+      const dur = Date.now() - t0;
+      if (this.testFixLoopAgent.iterationsUsed > 0) {
+        logger.trackLlmTime(dur);
+        logger.addFixIterations(this.testFixLoopAgent.iterationsUsed);
+      } else {
+        logger.trackToolTime(dur);
+      }
+      logger.stageEnd('Stage 3: Test fix', `${this.testFixLoopAgent.iterationsUsed} fix iteration(s)`);
+    } else {
+      debug('Stage 3: Test run passed — skipping fix loop');
     }
 
-    debug('Stage 3: Fix loops — lint fix');
-    for await (const event of this.lintFixLoopAgent.runAsync(ctx)) {
-      yield event;
+    {
+      debug('Stage 3: Fix loops — lint fix');
+      logger.stageStart('Stage 3: Lint fix');
+      const t0 = Date.now();
+      for await (const event of this.lintFixLoopAgent.runAsync(ctx)) {
+        logger.trackTokens(event);
+        yield event;
+      }
+      const dur = Date.now() - t0;
+      if (this.lintFixLoopAgent.iterationsUsed > 0) {
+        logger.trackLlmTime(dur);
+        logger.addFixIterations(this.lintFixLoopAgent.iterationsUsed);
+      } else {
+        logger.trackToolTime(dur);
+      }
+      logger.stageEnd(
+        'Stage 3: Lint fix',
+        this.lintFixLoopAgent.iterationsUsed > 0
+          ? `${this.lintFixLoopAgent.iterationsUsed} fix iteration(s)`
+          : 'passed after auto-fix',
+      );
     }
 
-    debug('Stage 3: Fix loops — story fix');
-    for await (const event of this.storyFixLoopAgent.runAsync(ctx)) {
-      yield event;
+    if (!storyTypeResult.passed) {
+      debug('Stage 3: Fix loops — story fix');
+      logger.stageStart('Stage 3: Story type check fix');
+      const t0 = Date.now();
+      for await (const event of this.storyFixLoopAgent.runAsync(ctx)) {
+        logger.trackTokens(event);
+        yield event;
+      }
+      const dur = Date.now() - t0;
+      if (this.storyFixLoopAgent.iterationsUsed > 0) {
+        logger.trackLlmTime(dur);
+        logger.addFixIterations(this.storyFixLoopAgent.iterationsUsed);
+      } else {
+        logger.trackToolTime(dur);
+      }
+      logger.stageEnd('Stage 3: Story type check fix', `${this.storyFixLoopAgent.iterationsUsed} fix iteration(s)`);
+    } else {
+      debug('Stage 3: Story type check passed — skipping fix loop');
     }
 
     debug('Stage 4: Evaluation');
+    logger.stageStart('Stage 4: Evaluation');
     ctx.session.state['component_code'] = readFileSync(componentPath, 'utf-8');
     ctx.session.state['test_code'] = readFileSync(testPath, 'utf-8');
     ctx.session.state['story_code'] = readFileSync(storyPath, 'utf-8');
 
+    const llmStart4 = Date.now();
     for await (const event of this.evaluationAgent.runAsync(ctx)) {
+      logger.trackTokens(event);
       yield event;
     }
+    logger.trackLlmTime(Date.now() - llmStart4);
     this.llmCallCount++;
 
     this.evaluationResult = this.parseEvaluation(String(ctx.session.state['evaluation_result'] ?? ''));
 
+    const evalScore = this.evaluationResult?.totalScore;
+    logger.stageEnd('Stage 4: Evaluation', evalScore != null ? `score: ${evalScore}` : undefined);
+
+    logger.summary();
     debug('Pipeline complete. Evaluation score: %d', this.evaluationResult?.totalScore ?? -1);
   }
 

packages/component-implementor-react/src/agents/story-fix-loop-agent.ts

@@ -2,6 +2,7 @@ import { readFileSync } from 'node:fs';
 import { BaseAgent, createEvent, type Event, type InvocationContext } from '@google/adk';
 import type { BaseLlm } from 'adk-llm-bridge';
 import createDebug from 'debug';
+import { extractExportedNames } from '../extract-exports.js';
 import { runTypeCheck } from '../tools/type-checker.js';
 import { createStoryFixAgent } from './story-fix-agent.js';
 
@@ -21,6 +22,7 @@ export class StoryFixLoopAgent extends BaseAgent {
   private readonly componentPath: string;
   private readonly storyPath: string;
   private readonly maxIterations: number;
+  iterationsUsed = 0;
 
   constructor(config: StoryFixLoopConfig) {
     const storyFixAgent = createStoryFixAgent(config.model);
@@ -36,6 +38,8 @@ export class StoryFixLoopAgent extends BaseAgent {
   }
 
   protected async *runAsyncImpl(ctx: InvocationContext): AsyncGenerator<Event, void, void> {
+    this.iterationsUsed = 0;
+
     for (let i = 0; i < this.maxIterations; i++) {
       const result = runTypeCheck(this.targetDir, [this.storyPath]);
 
@@ -44,6 +48,7 @@ export class StoryFixLoopAgent extends BaseAgent {
         return;
       }
 
+      this.iterationsUsed++;
       debug('Story type check failed with %d errors on iteration %d', result.errors.length, i);
 
       const componentCode = readFileSync(this.componentPath, 'utf-8');
@@ -54,6 +59,15 @@ export class StoryFixLoopAgent extends BaseAgent {
         // story file may not exist yet
       }
 
+      let componentRef: string;
+      try {
+        const exportNames = extractExportedNames(componentCode);
+        const propsTypeMatch = componentCode.match(/(?:export\s+)?(?:type|interface)\s+\w+Props[\s\S]*?\}/);
+        componentRef = propsTypeMatch ? `${propsTypeMatch[0]}\n\n// Exports: ${exportNames.join(', ')}` : componentCode;
+      } catch {
+        componentRef = componentCode;
+      }
+
       ctx.session.state.type_errors = result.errors.join('\n');
       ctx.session.state.story_code = storyCode;
       ctx.session.state.component_code = componentCode;
@@ -62,7 +76,7 @@ export class StoryFixLoopAgent extends BaseAgent {
       userMessage += `## File Paths\n- Story: ${this.storyPath}\n- Component: ${this.componentPath}\n\n`;
       userMessage += `## TypeScript Errors\n\n\`\`\`\n${result.errors.join('\n')}\n\`\`\`\n\n`;
       userMessage += `## Story Code\n\n\`\`\`tsx\n${storyCode}\n\`\`\`\n\n`;
-      userMessage += `## Component Code (reference only)\n\n\`\`\`tsx\n${componentCode}\n\`\`\`\n\n`;
+      userMessage += `## Component Exports (reference)\n\n\`\`\`tsx\n${componentRef}\n\`\`\`\n\n`;
       userMessage += `Use the write_file tool to write the fixed story file. Write the COMPLETE file content, not just the changed parts.`;
 
       const userEvent = createEvent({

packages/component-implementor-react/src/agents/test-fix-loop-agent.ts

@@ -21,6 +21,7 @@ export class TestFixLoopAgent extends BaseAgent {
   private readonly componentPath: string;
   private readonly testPath: string;
   private readonly maxIterations: number;
+  iterationsUsed = 0;
 
   constructor(config: TestFixLoopConfig) {
     const testFixAgent = createTestFixAgent(config.model);
@@ -36,6 +37,8 @@ export class TestFixLoopAgent extends BaseAgent {
   }
 
   protected async *runAsyncImpl(ctx: InvocationContext): AsyncGenerator<Event, void, void> {
+    this.iterationsUsed = 0;
+
     for (let i = 0; i < this.maxIterations; i++) {
       const result = runTests(this.testPath, this.targetDir);
 
@@ -44,6 +47,7 @@ export class TestFixLoopAgent extends BaseAgent {
         return;
       }
 
+      this.iterationsUsed++;
       debug('Tests failed with %d failures on iteration %d', result.failures.length, i);
 
       const componentCode = readFileSync(this.componentPath, 'utf-8');