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

package/package.json

@@ -6,13 +6,13 @@
   "dependencies": {
     "ai": "^6.0.0",
     "debug": "^4.4.1",
-    "@auto-engineer/message-bus": "1.97.2",
-    "@auto-engineer/model-factory": "1.97.2"
+    "@auto-engineer/message-bus": "1.98.0",
+    "@auto-engineer/model-factory": "1.98.0"
   },
   "devDependencies": {
     "vitest": "^3.2.1"
   },
-  "version": "1.97.2",
+  "version": "1.98.0",
   "publishConfig": {
     "access": "public"
   },

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

@@ -149,6 +149,156 @@ describe('implement-component', () => {
         correlationId: 'cor-1',
       });
     });
+
+    it('handles payload with undefined spec delta fields without crashing', async () => {
+      const mockGenerateText = vi.mocked(generateText);
+      mockGenerateText
+        .mockResolvedValueOnce({ text: 'component 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>>)
+        .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);
+
+      // Simulate production payload where the pipeline omits spec delta fields
+      // (e.g. "Resource-preview", "Plant-fields-page" components).
+      // At runtime JSON deserialization can produce undefined for these fields,
+      // bypassing TypeScript's compile-time guarantees.
+      const command = {
+        type: 'ImplementComponent' as const,
+        data: {
+          targetDir: '/project/client',
+          job: {
+            id: 'job_3',
+            dependsOn: [],
+            target: 'ImplementComponent' as const,
+            payload: {
+              componentId: 'resource-preview',
+              structure: ['renders a preview card'],
+              rendering: undefined,
+              interaction: undefined,
+              styling: undefined,
+              storybookPath: 'src/components/ui/ResourcePreview.stories.tsx',
+              files: { create: ['src/components/ui/ResourcePreview.tsx'] },
+            },
+          },
+        },
+        requestId: 'req-1',
+        correlationId: 'cor-1',
+      };
+
+      // Cast through unknown to bypass TypeScript — this is what happens at runtime
+      // when the pipeline sends a payload with missing fields
+      const result = await handleImplementComponent(
+        command as unknown as Parameters<typeof handleImplementComponent>[0],
+      );
+
+      // Should succeed, not crash. Undefined spec delta fields should be treated as empty arrays.
+      // Currently fails: buildSpecSection() throws "Cannot read properties of undefined (reading 'map')"
+      // which gets caught by try/catch and returns ComponentImplementationFailed instead.
+      expect(result.type).toBe('ComponentImplemented');
+    });
+
+    it('defaults targetDir to ./client when not provided', async () => {
+      const mockGenerateText = vi.mocked(generateText);
+      mockGenerateText
+        .mockResolvedValueOnce({ text: 'component 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(false);
+      vi.mocked(writeFile).mockResolvedValue(undefined);
+
+      const command = {
+        type: 'ImplementComponent' as const,
+        data: {
+          job: {
+            id: 'job_1',
+            dependsOn: [],
+            target: 'ImplementComponent' as const,
+            payload: {
+              componentId: 'my-widget',
+              structure: ['renders a widget'],
+              rendering: ['shows content'],
+              interaction: ['handles click'],
+              styling: ['uses primary'],
+              storybookPath: 'src/MyWidget.stories.tsx',
+              files: { create: ['src/MyWidget.tsx'] },
+            },
+          },
+        },
+        requestId: 'req-1',
+        correlationId: 'cor-1',
+      };
+
+      const result = await handleImplementComponent(
+        command as unknown as Parameters<typeof handleImplementComponent>[0],
+      );
+
+      expect(result).toEqual(
+        expect.objectContaining({
+          type: 'ComponentImplemented',
+          data: expect.objectContaining({ name: 'MyWidget' }),
+        }),
+      );
+    });
+
+    it('derives component path from componentId when files.create is empty string', async () => {
+      const mockGenerateText = vi.mocked(generateText);
+      mockGenerateText
+        .mockResolvedValueOnce({ text: 'component 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(false);
+      vi.mocked(writeFile).mockResolvedValue(undefined);
+
+      const command = makeCommand({
+        job: {
+          id: 'job_1',
+          dependsOn: [],
+          target: 'ImplementComponent',
+          payload: {
+            componentId: 'task-form-input',
+            structure: ['renders input'],
+            rendering: [],
+            interaction: [],
+            styling: [],
+            storybookPath: '.stories',
+            files: { create: [''] },
+          },
+        },
+      });
+
+      const result = await handleImplementComponent(command);
+
+      expect(result).toEqual({
+        type: 'ComponentImplemented',
+        data: {
+          name: 'TaskFormInput',
+          componentPath: expect.stringContaining('src/components/TaskFormInput.tsx'),
+          testPath: expect.stringContaining('src/components/TaskFormInput.test.tsx'),
+          storyPath: expect.stringContaining('src/components/TaskFormInput.stories.tsx'),
+          filesCreated: expect.arrayContaining([
+            expect.stringContaining('TaskFormInput.tsx'),
+            expect.stringContaining('TaskFormInput.test.tsx'),
+            expect.stringContaining('TaskFormInput.stories.tsx'),
+          ]),
+        },
+        timestamp: expect.any(Date),
+        requestId: 'req-1',
+        correlationId: 'cor-1',
+      });
+    });
   });
 
   describe('commandHandler', () => {

package/src/commands/implement-component.ts

@@ -68,11 +68,15 @@ function deriveFilePaths(
   payload: ComponentJobPayload,
 ): { componentPath: string; testPath: string; storyPath: string; componentName: string } {
   const rawPath = payload.files.modify?.[0] ?? payload.files.create?.[0] ?? '';
-  const componentPath = path.resolve(targetDir, rawPath);
-  const dir = path.dirname(componentPath);
   const componentName = pascalCase(payload.componentId);
+  const effectivePath = rawPath || `src/components/${componentName}.tsx`;
+  const componentPath = path.resolve(targetDir, effectivePath);
+  const dir = path.dirname(componentPath);
   const testPath = path.join(dir, `${componentName}.test.tsx`);
-  const storyPath = path.resolve(targetDir, payload.storybookPath);
+  const storyPath =
+    payload.storybookPath && payload.storybookPath !== '.stories'
+      ? path.resolve(targetDir, payload.storybookPath)
+      : path.join(dir, `${componentName}.stories.tsx`);
 
   return { componentPath, testPath, storyPath, componentName };
 }
@@ -80,7 +84,7 @@ function deriveFilePaths(
 export async function handleImplementComponent(
   command: ImplementComponentCommand,
 ): Promise<ComponentImplementedEvent | ComponentImplementationFailedEvent> {
-  const { targetDir, job } = command.data;
+  const { targetDir = './client', job } = command.data;
   const { payload } = job;
   const { componentPath, testPath, storyPath, componentName } = deriveFilePaths(targetDir, payload);
   const isModify = (payload.files.modify?.length ?? 0) > 0;

package/src/prompt.test.ts

@@ -131,6 +131,85 @@ describe('prompt builders', () => {
     });
   });
 
+  describe('buildComponentPrompt handles undefined specDelta fields', () => {
+    const specDeltasWithUndefined = {
+      structure: ['renders a Card element'],
+      rendering: undefined as unknown as string[],
+      interaction: undefined as unknown as string[],
+      styling: ['applies elevated style when raised=true'],
+    };
+
+    it('returns valid result when rendering and interaction are undefined', () => {
+      const result = buildComponentPrompt({
+        componentName: 'Card',
+        specDeltas: specDeltasWithUndefined,
+      });
+      expect(result.system).toBeTruthy();
+      expect(result.prompt).toBeTruthy();
+      expect(result.prompt).toContain('renders a Card element');
+    });
+  });
+
+  describe('buildTestPrompt handles undefined specDelta fields', () => {
+    const specDeltasWithUndefined = {
+      structure: undefined as unknown as string[],
+      rendering: ['shows skeleton when loading'],
+      interaction: undefined as unknown as string[],
+      styling: ['applies elevated style when raised=true'],
+    };
+
+    it('returns valid result when structure and interaction are undefined', () => {
+      const result = buildTestPrompt({
+        componentName: 'Card',
+        specDeltas: specDeltasWithUndefined,
+      });
+      expect(result.system).toBeTruthy();
+      expect(result.prompt).toBeTruthy();
+      expect(result.prompt).toContain('shows skeleton when loading');
+    });
+  });
+
+  describe('buildStoryPrompt handles undefined specDelta fields', () => {
+    const specDeltasWithUndefined = {
+      structure: ['renders a Card element'],
+      rendering: undefined as unknown as string[],
+      interaction: ['calls onSelect when clicked'],
+      styling: undefined as unknown as string[],
+    };
+
+    it('returns valid result when rendering and styling are undefined', () => {
+      const result = buildStoryPrompt({
+        componentName: 'Card',
+        specDeltas: specDeltasWithUndefined,
+      });
+      expect(result.system).toBeTruthy();
+      expect(result.prompt).toBeTruthy();
+      expect(result.prompt).toContain('renders a Card element');
+    });
+  });
+
+  describe('buildReconcilerPrompt handles undefined specDelta fields', () => {
+    const specDeltasWithUndefined = {
+      structure: ['renders a Card element'],
+      rendering: ['shows skeleton when loading'],
+      interaction: undefined as unknown as string[],
+      styling: undefined as unknown as string[],
+    };
+
+    it('returns valid result when interaction and styling are undefined', () => {
+      const result = buildReconcilerPrompt({
+        componentName: 'Card',
+        specDeltas: specDeltasWithUndefined,
+        componentCode: 'component source',
+        testCode: 'test source',
+        storyCode: 'story source',
+      });
+      expect(result.system).toBeTruthy();
+      expect(result.prompt).toBeTruthy();
+      expect(result.prompt).toContain('renders a Card element');
+    });
+  });
+
   describe('exported prompt sections', () => {
     it('component sections are all non-empty strings', () => {
       for (const value of Object.values(componentPromptSections)) {

package/src/spec-contract.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+import { buildSpecSection, buildSpecText, type SpecDeltas } from './spec-contract';
+
+describe('buildSpecSection', () => {
+  it('returns empty string when items is undefined', () => {
+    const result = buildSpecSection('Structure', undefined as unknown as string[]);
+    expect(result).toBe('');
+  });
+});
+
+describe('buildSpecText', () => {
+  it('returns empty string when specDeltas fields are undefined', () => {
+    const specDeltas = {
+      structure: undefined,
+      rendering: ['renders heading'],
+      interaction: undefined,
+      styling: ['uses red background'],
+    } as unknown as SpecDeltas;
+
+    const result = buildSpecText(specDeltas);
+    expect(result).toContain('Rendering');
+  });
+});

package/src/spec-contract.ts

@@ -6,7 +6,7 @@ export type SpecDeltas = {
 };
 
 export function buildSpecSection(heading: string, items: string[]): string {
-  if (items.length === 0) return '';
+  if (!items || items.length === 0) return '';
   return `## ${heading}\n${items.map((i) => `- ${i}`).join('\n')}`;
 }