@auto-engineer/component-implementor-react 1.110.2 → 1.110.4

package/src/pipeline/run-pipeline.ts

@@ -2,10 +2,15 @@ import type { LanguageModel } from 'ai';
 import createDebug from 'debug';
 import type { ScaffoldProp } from '../scaffold';
 import type { SpecDeltas } from '../spec-contract';
-import { fixFromFeedbackStep } from './steps/fix-from-feedback';
 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');
 
@@ -37,55 +42,60 @@ export type PipelineContext = {
   componentCode?: string;
   storyCode?: string;
   llmCalls: number;
-  errorFeedback?: string;
-  attemptNumber: number;
+  fixIterations: number;
+  typeFixIterations: number;
+  testFixIterations: number;
+  lintFixIterations: number;
+  storyFixIterations: number;
 };
 
 export type ModelConfig = {
   generateTest: string;
   generateComponent: string;
   generateStory: string;
-  fixer: 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;
   generateStory: LanguageModel;
-  fixer: LanguageModel;
+  typeFixer: LanguageModel;
+  testFixer: LanguageModel;
+  lintFixer: LanguageModel;
+  storyFixer: LanguageModel;
 };
 
 export type PipelineResult = {
   success: boolean;
   error?: string;
   llmCalls: number;
+  fixIterations: number;
+  typeFixIterations: number;
+  testFixIterations: number;
+  lintFixIterations: number;
+  storyFixIterations: number;
 };
 
 export function buildPipelineSteps(
   models: PipelineModels,
-  _config: PipelineConfig,
+  config: PipelineConfig,
   ctx: PipelineContext,
 ): PipelineStep[] {
-  // On retry (attemptNumber > 0), fix from feedback then regenerate story
-  if (ctx.attemptNumber > 0 && ctx.errorFeedback) {
-    return [
-      {
-        name: 'Fix From Feedback',
-        run: () => fixFromFeedbackStep(models.fixer, ctx),
-      },
-      {
-        name: 'Generate Story',
-        run: () => generateStoryStep(models.generateStory, ctx),
-      },
-    ];
-  }
-
-  // First attempt: generate everything
-  return [
+  const steps: PipelineStep[] = [
     {
       name: 'Generate Test',
       run: () => generateTestStep(models.generateTest, ctx),
@@ -94,11 +104,43 @@ export function buildPipelineSteps(
       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(models.generateStory, 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> {
@@ -112,6 +154,11 @@ export async function runPipeline(steps: PipelineStep[], ctx: PipelineContext):
         success: false,
         error: `Step "${step.name}" failed: ${result.error}`,
         llmCalls: ctx.llmCalls,
+        fixIterations: ctx.fixIterations,
+        typeFixIterations: ctx.typeFixIterations,
+        testFixIterations: ctx.testFixIterations,
+        lintFixIterations: ctx.lintFixIterations,
+        storyFixIterations: ctx.storyFixIterations,
       };
     }
 
@@ -121,5 +168,10 @@ export async function runPipeline(steps: PipelineStep[], ctx: PipelineContext):
   return {
     success: true,
     llmCalls: ctx.llmCalls,
+    fixIterations: ctx.fixIterations,
+    typeFixIterations: ctx.typeFixIterations,
+    testFixIterations: ctx.testFixIterations,
+    lintFixIterations: ctx.lintFixIterations,
+    storyFixIterations: ctx.storyFixIterations,
   };
 }

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

@@ -36,7 +36,11 @@ function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
     composes: [],
     isModify: false,
     llmCalls: 0,
-    attemptNumber: 0,
+    fixIterations: 0,
+    typeFixIterations: 0,
+    testFixIterations: 0,
+    lintFixIterations: 0,
+    storyFixIterations: 0,
     testCode: 'import { render } from "@testing-library/react";',
     ...overrides,
   };

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

@@ -28,7 +28,11 @@ function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
     composes: [],
     isModify: false,
     llmCalls: 0,
-    attemptNumber: 0,
+    fixIterations: 0,
+    typeFixIterations: 0,
+    testFixIterations: 0,
+    lintFixIterations: 0,
+    storyFixIterations: 0,
     ...overrides,
   };
 }

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

@@ -35,7 +35,11 @@ function makeCtx(overrides: Partial<PipelineContext> = {}): PipelineContext {
     composes: [],
     isModify: false,
     llmCalls: 0,
-    attemptNumber: 0,
+    fixIterations: 0,
+    typeFixIterations: 0,
+    testFixIterations: 0,
+    lintFixIterations: 0,
+    storyFixIterations: 0,
     ...overrides,
   };
 }

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

@@ -0,0 +1,159 @@
+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/lint-runner', () => ({
+  runLint: vi.fn(),
+  runLintFix: vi.fn(),
+}));
+
+import { readFile, writeFile } from 'node:fs/promises';
+import { generateText } from 'ai';
+import { runLint, runLintFix } from '../../tools/lint-runner';
+import type { PipelineContext } from '../run-pipeline';
+import { lintFixLoop } from './lint-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,
+    typeFixIterations: 0,
+    testFixIterations: 0,
+    lintFixIterations: 0,
+    storyFixIterations: 0,
+    componentCode: 'original component',
+    testCode: 'original test',
+    ...overrides,
+  };
+}
+
+describe('lintFixLoop', () => {
+  it('runs auto-fix first, then returns success if lint passes', async () => {
+    vi.mocked(runLintFix).mockReturnValue({ passed: true, errors: [] });
+    vi.mocked(readFile).mockResolvedValue('auto-fixed code' as never);
+    vi.mocked(runLint).mockReturnValue({ passed: true, errors: [] });
+
+    const result = await lintFixLoop('mock-model' as never, makeCtx(), 2);
+
+    expect(result).toEqual({ success: true });
+    expect(runLintFix).toHaveBeenCalledWith(
+      ['/project/src/MyButton.tsx', '/project/src/MyButton.test.tsx'],
+      '/project',
+    );
+    expect(generateText).not.toHaveBeenCalled();
+  });
+
+  it('calls LLM for remaining lint errors after auto-fix', async () => {
+    vi.mocked(runLintFix).mockReturnValue({ passed: false, errors: ['unfixable'] });
+    vi.mocked(readFile).mockResolvedValue('auto-fixed partial' as never);
+    vi.mocked(runLint)
+      .mockReturnValueOnce({ passed: false, errors: ['remaining error'] })
+      .mockReturnValueOnce({ passed: true, errors: [] });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nlint-fixed component\n```\n```tsx\nlint-fixed test\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await lintFixLoop('mock-model' as never, makeCtx(), 2);
+
+    expect(result).toEqual({ success: true });
+    expect(generateText).toHaveBeenCalledTimes(1);
+  });
+
+  it('returns failure after exhausting max iterations', async () => {
+    vi.mocked(runLintFix).mockReturnValue({ passed: true, errors: [] });
+    vi.mocked(readFile).mockResolvedValue('code' as never);
+    vi.mocked(runLint).mockReturnValue({ passed: false, errors: ['persistent lint error'] });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nstill bad\n```\n```tsx\nstill bad test\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await lintFixLoop('mock-model' as never, makeCtx(), 1);
+
+    expect(result).toEqual({
+      success: false,
+      error: expect.stringContaining('Lint errors remain after 1 iterations'),
+    });
+  });
+
+  it('handles single code block response by updating only component', async () => {
+    vi.mocked(runLintFix).mockReturnValue({ passed: true, errors: [] });
+    vi.mocked(readFile).mockResolvedValue('auto-fixed' as never);
+    vi.mocked(runLint)
+      .mockReturnValueOnce({ passed: false, errors: ['lint error'] })
+      .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 lintFixLoop('mock-model' as never, makeCtx(), 2);
+
+    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', async () => {
+    vi.mocked(runLintFix).mockReturnValue({ passed: true, errors: [] });
+    vi.mocked(readFile).mockResolvedValue('auto-fixed' as never);
+    vi.mocked(runLint)
+      .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 lintFixLoop('mock-model' as never, makeCtx(), 1);
+
+    expect(result).toEqual({ success: true });
+  });
+
+  it('uses empty string fallback when componentCode and testCode are undefined after readFile', async () => {
+    vi.mocked(runLintFix).mockReturnValue({ passed: true, errors: [] });
+    vi.mocked(readFile).mockResolvedValue(undefined as never);
+    vi.mocked(runLint)
+      .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 lintFixLoop(
+      'mock-model' as never,
+      makeCtx({ componentCode: undefined, testCode: undefined }),
+      1,
+    );
+
+    expect(result).toEqual({ success: true });
+  });
+});

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

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

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

@@ -0,0 +1,127 @@
+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 { storyFixLoop } from './story-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,
+    typeFixIterations: 0,
+    testFixIterations: 0,
+    lintFixIterations: 0,
+    storyFixIterations: 0,
+    storyCode: 'original story',
+    componentCode: 'original component',
+    ...overrides,
+  };
+}
+
+describe('storyFixLoop', () => {
+  it('returns success immediately when story type-checks', async () => {
+    vi.mocked(runTypeCheck).mockReturnValue({ passed: true, errors: [] });
+
+    const result = await storyFixLoop('mock-model' as never, makeCtx(), 2);
+
+    expect(result).toEqual({ success: true });
+    expect(generateText).not.toHaveBeenCalled();
+  });
+
+  it('calls LLM to fix story type errors and writes fixed story', async () => {
+    vi.mocked(runTypeCheck)
+      .mockReturnValueOnce({ passed: false, errors: ['error in story'] })
+      .mockReturnValueOnce({ passed: true, errors: [] });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nfixed story code\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await storyFixLoop('mock-model' as never, makeCtx(), 2);
+
+    expect(result).toEqual({ success: true });
+    expect(generateText).toHaveBeenCalledTimes(1);
+    expect(writeFile).toHaveBeenCalledWith('/project/src/MyButton.stories.tsx', 'fixed story code', 'utf-8');
+  });
+
+  it('returns failure after exhausting max iterations', async () => {
+    vi.mocked(runTypeCheck).mockReturnValue({ passed: false, errors: ['persistent story error'] });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nstill broken story\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+    vi.mocked(readFile).mockResolvedValue('still broken story' as never);
+
+    const result = await storyFixLoop('mock-model' as never, makeCtx(), 1);
+
+    expect(result).toEqual({
+      success: false,
+      error: expect.stringContaining('Story type errors remain after 1 iterations'),
+    });
+  });
+
+  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 story\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await storyFixLoop('mock-model' as never, makeCtx(), 1);
+
+    expect(result).toEqual({ success: true });
+  });
+
+  it('uses empty string fallback when storyCode and componentCode are undefined', async () => {
+    vi.mocked(runTypeCheck)
+      .mockReturnValueOnce({ passed: false, errors: ['error'] })
+      .mockReturnValueOnce({ passed: true, errors: [] });
+
+    vi.mocked(generateText).mockResolvedValue({
+      text: '```tsx\nfixed story\n```',
+    } as Awaited<ReturnType<typeof generateText>>);
+    vi.mocked(writeFile).mockResolvedValue(undefined);
+
+    const result = await storyFixLoop(
+      'mock-model' as never,
+      makeCtx({ storyCode: undefined, componentCode: undefined }),
+      1,
+    );
+
+    expect(result).toEqual({ success: true });
+  });
+});

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

@@ -0,0 +1,48 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import type { LanguageModel } from 'ai';
+import { generateText } from 'ai';
+import { extractCodeBlock } from '../../extract-code-block';
+import { buildStoryFixPrompt } from '../../prompt';
+import { runTypeCheck } from '../../tools/type-checker';
+import type { PipelineContext, StepResult } from '../run-pipeline';
+
+export async function storyFixLoop(
+  model: LanguageModel,
+  ctx: PipelineContext,
+  maxIterations: number,
+): Promise<StepResult> {
+  for (let i = 0; i < maxIterations; i++) {
+    const result = runTypeCheck(ctx.targetDir, [ctx.storyPath]);
+
+    if (result.passed) {
+      return { success: true };
+    }
+
+    const { system, prompt } = buildStoryFixPrompt({
+      storyCode: ctx.storyCode ?? '',
+      componentCode: ctx.componentCode ?? '',
+      errors: result.errors,
+    });
+
+    const { text } = await generateText({ model, system, prompt });
+    ctx.llmCalls++;
+    ctx.fixIterations++;
+    ctx.storyFixIterations++;
+
+    const fixedStory = extractCodeBlock(text);
+    ctx.storyCode = fixedStory;
+    await writeFile(ctx.storyPath, fixedStory, 'utf-8');
+  }
+
+  const finalResult = runTypeCheck(ctx.targetDir, [ctx.storyPath]);
+  if (finalResult.passed) {
+    return { success: true };
+  }
+
+  ctx.storyCode = await readFile(ctx.storyPath, 'utf-8');
+
+  return {
+    success: false,
+    error: `Story type errors remain after ${maxIterations} iterations: ${finalResult.errors.join('; ')}`,
+  };
+}

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

@@ -0,0 +1,86 @@
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('../../tools/type-checker', () => ({
+  runTypeCheck: vi.fn(),
+}));
+
+vi.mock('../../tools/storybook-runner', () => ({
+  runStorybookTest: vi.fn(),
+}));
+
+import { runStorybookTest } from '../../tools/storybook-runner';
+import { runTypeCheck } from '../../tools/type-checker';
+import type { PipelineContext } from '../run-pipeline';
+import { storybookTestStep } from './storybook-test';
+
+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,
+    typeFixIterations: 0,
+    testFixIterations: 0,
+    lintFixIterations: 0,
+    storyFixIterations: 0,
+    ...overrides,
+  };
+}
+
+describe('storybookTestStep', () => {
+  it('returns success when type check passes and storybook cli disabled', async () => {
+    vi.mocked(runTypeCheck).mockReturnValue({ passed: true, errors: [] });
+
+    const result = await storybookTestStep(makeCtx(), false);
+
+    expect(result).toEqual({ success: true });
+    expect(runStorybookTest).not.toHaveBeenCalled();
+  });
+
+  it('returns failure when story type check fails', async () => {
+    vi.mocked(runTypeCheck).mockReturnValue({
+      passed: false,
+      errors: ['error in story'],
+    });
+
+    const result = await storybookTestStep(makeCtx(), false);
+
+    expect(result).toEqual({
+      success: false,
+      error: expect.stringContaining('Story type errors'),
+    });
+  });
+
+  it('runs storybook CLI test when enabled and type check passes', async () => {
+    vi.mocked(runTypeCheck).mockReturnValue({ passed: true, errors: [] });
+    vi.mocked(runStorybookTest).mockReturnValue({ passed: true, errors: [] });
+
+    const result = await storybookTestStep(makeCtx(), true);
+
+    expect(result).toEqual({ success: true });
+    expect(runStorybookTest).toHaveBeenCalledWith('/project/src/MyButton.stories.tsx', '/project');
+  });
+
+  it('returns failure when storybook CLI test fails', async () => {
+    vi.mocked(runTypeCheck).mockReturnValue({ passed: true, errors: [] });
+    vi.mocked(runStorybookTest).mockReturnValue({
+      passed: false,
+      errors: ['Story failed'],
+    });
+
+    const result = await storybookTestStep(makeCtx(), true);
+
+    expect(result).toEqual({
+      success: false,
+      error: expect.stringContaining('Storybook test failures'),
+    });
+  });
+});