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

package/src/commands/implement-component.ts

@@ -1,12 +1,17 @@
 import { existsSync } from 'node:fs';
-import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { mkdir, readFile } from 'node:fs/promises';
 import path from 'node:path';
 import { type Command, defineCommandHandler, type Event } from '@auto-engineer/message-bus';
+import { createModelFromEnv } from '@auto-engineer/model-factory';
 import createDebug from 'debug';
-import { generateComponentFile } from '../generate-component';
-import { generateStoryFile } from '../generate-story';
-import { generateTestFile } from '../generate-test';
-import { reconcile } from '../reconcile';
+import {
+  buildPipelineSteps,
+  type PipelineConfig,
+  type PipelineContext,
+  type PipelineModels,
+  runPipeline,
+} from '../pipeline/run-pipeline';
+import { buildFullProjectSection } from '../project-context';
 
 const debug = createDebug('auto:component-implementor-react:command');
 
@@ -18,6 +23,22 @@ type ComponentJobPayload = {
   styling: string[];
   storybookPath: string;
   files: { create?: string[]; modify?: string[] };
+  composes: { id: string; path: string }[];
+  props?: Array<{
+    name: string;
+    type: string;
+    required: boolean;
+    default?: string;
+    description: string;
+    category: 'data' | 'callback' | 'slot' | 'visual' | 'state' | 'config';
+  }>;
+  storyVariants?: Array<{
+    name: string;
+    description: string;
+    args: Record<string, unknown>;
+    needsPlayFunction?: boolean;
+    playDescription?: string;
+  }>;
 };
 
 type ComponentJob = {
@@ -63,37 +84,108 @@ function pascalCase(id: string): string {
     .join('');
 }
 
+function filePathToImportAlias(filePath: string): string {
+  let rel = filePath;
+  if (rel.startsWith('./')) {
+    rel = rel.slice(2);
+  }
+  if (rel.startsWith('src/')) {
+    rel = rel.slice(4);
+  }
+  rel = rel.replace(/\.tsx?$/, '');
+  return `@/${rel}`;
+}
+
 function deriveFilePaths(
   targetDir: string,
   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 };
 }
 
+function buildPipelineConfig(): PipelineConfig {
+  return {
+    models: {
+      generateTest:
+        process.env.STEP_GENERATE_TEST_MODEL ??
+        process.env.IMPL_MODEL ??
+        process.env.CUSTOM_PROVIDER_DEFAULT_MODEL ??
+        '',
+      generateComponent:
+        process.env.STEP_GENERATE_COMPONENT_MODEL ??
+        process.env.IMPL_MODEL ??
+        process.env.CUSTOM_PROVIDER_DEFAULT_MODEL ??
+        '',
+      typeFixer:
+        process.env.STEP_TYPE_FIXER_MODEL ??
+        process.env.IMPL_FIXER_MODEL ??
+        process.env.IMPL_MODEL ??
+        process.env.CUSTOM_PROVIDER_DEFAULT_MODEL ??
+        '',
+      testFixer:
+        process.env.STEP_TEST_FIXER_MODEL ??
+        process.env.IMPL_FIXER_MODEL ??
+        process.env.IMPL_MODEL ??
+        process.env.CUSTOM_PROVIDER_DEFAULT_MODEL ??
+        '',
+      lintFixer:
+        process.env.STEP_LINT_FIXER_MODEL ??
+        process.env.IMPL_FIXER_MODEL ??
+        process.env.IMPL_MODEL ??
+        process.env.CUSTOM_PROVIDER_DEFAULT_MODEL ??
+        '',
+      storyFixer:
+        process.env.STEP_STORY_FIXER_MODEL ??
+        process.env.IMPL_FIXER_MODEL ??
+        process.env.IMPL_MODEL ??
+        process.env.CUSTOM_PROVIDER_DEFAULT_MODEL ??
+        '',
+    },
+    maxTypeFixIterations: 3,
+    maxTestFixIterations: 3,
+    maxLintFixIterations: 2,
+    maxStoryFixIterations: 2,
+    enableStorybookTest: process.env.ENABLE_STORYBOOK_TEST === 'true',
+    enableVisualTest: process.env.ENABLE_VISUAL_TEST === 'true',
+  };
+}
+
+function createPipelineModels(): PipelineModels {
+  const model = createModelFromEnv();
+  return {
+    generateTest: model,
+    generateComponent: model,
+    typeFixer: model,
+    testFixer: model,
+    lintFixer: model,
+    storyFixer: model,
+  };
+}
+
 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;
+  const rawPath = payload.files.modify?.[0] ?? payload.files.create?.[0] ?? '';
+  const componentImportPath = filePathToImportAlias(rawPath);
 
-  debug('Implementing component: %s', componentName);
+  debug('Implementing component: %s (mode: %s)', componentName, isModify ? 'modify' : 'create');
 
   try {
-    let existingComponent: string | undefined;
-    if (isModify && existsSync(componentPath)) {
-      existingComponent = await readFile(componentPath, 'utf-8');
-      debug('Read existing component: %d chars', existingComponent.length);
-    }
-
     const specDeltas = {
       structure: payload.structure,
       rendering: payload.rendering,
@@ -101,31 +193,67 @@ export async function handleImplementComponent(
       styling: payload.styling,
     };
 
-    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('Building project context...');
+    const projectSection = await buildFullProjectSection(targetDir, payload.composes);
+
+    let existingComponent: string | undefined;
+    let existingTest: string | undefined;
+
+    if (isModify && existsSync(componentPath)) {
+      existingComponent = await readFile(componentPath, 'utf-8');
+      existingTest = existsSync(testPath) ? await readFile(testPath, 'utf-8') : undefined;
+    }
+
+    await mkdir(path.dirname(testPath), { recursive: true });
 
-    debug('Reconciling component and story against tests...');
-    const reconciled = await reconcile({
+    const ctx: PipelineContext = {
       componentName,
+      componentPath,
+      testPath,
+      storyPath,
+      componentImportPath,
+      targetDir,
       specDeltas,
-      componentCode,
-      testCode,
-      storyCode,
+      projectSection,
+      props: payload.props,
+      composes: payload.composes,
       existingComponent,
-    });
+      existingTest,
+      isModify,
+      storyVariants: payload.storyVariants,
+      llmCalls: 0,
+      fixIterations: 0,
+    };
 
-    await mkdir(path.dirname(testPath), { recursive: true });
-    await Promise.all([
-      writeFile(testPath, testCode, 'utf-8'),
-      writeFile(componentPath, reconciled.componentCode, 'utf-8'),
-      writeFile(storyPath, reconciled.storyCode, 'utf-8'),
-    ]);
+    const config = buildPipelineConfig();
+    const models = createPipelineModels();
 
-    debug('Wrote 3 files for %s', componentName);
+    debug('Running TDD pipeline...');
+    const steps = buildPipelineSteps(models, config, ctx);
+    const result = await runPipeline(steps, ctx);
+
+    if (!result.success) {
+      debug(
+        'Pipeline failed: %s (LLM calls: %d, fix iterations: %d)',
+        result.error,
+        result.llmCalls,
+        result.fixIterations,
+      );
+      return {
+        type: 'ComponentImplementationFailed',
+        data: { error: result.error ?? 'Pipeline failed', name: componentName },
+        timestamp: new Date(),
+        requestId: command.requestId,
+        correlationId: command.correlationId,
+      };
+    }
+
+    debug(
+      'Pipeline succeeded for %s (LLM calls: %d, fix iterations: %d)',
+      componentName,
+      result.llmCalls,
+      result.fixIterations,
+    );
 
     return {
       type: 'ComponentImplemented',

package/src/extract-exports.ts

@@ -0,0 +1,53 @@
+// ═══════════════════════════════════════════════════════════════════
+// Extract exported names from a TypeScript/TSX file using the TS AST
+// ═══════════════════════════════════════════════════════════════════
+
+import ts from 'typescript';
+
+/**
+ * Parse a TypeScript/TSX source string and return all exported value names
+ * (functions, constants, classes) — excludes type-only exports.
+ */
+export function extractExportedNames(content: string): string[] {
+  const sourceFile = ts.createSourceFile('temp.tsx', content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+
+  const names: string[] = [];
+
+  ts.forEachChild(sourceFile, (node) => {
+    const modifiers = ts.canHaveModifiers(node) ? ts.getModifiers(node) : undefined;
+    const isExported = modifiers?.some((m) => m.kind === ts.SyntaxKind.ExportKeyword);
+
+    // export function Foo() { ... }
+    if (ts.isFunctionDeclaration(node) && isExported && node.name) {
+      names.push(node.name.text);
+    }
+
+    // export const Foo = ...
+    if (ts.isVariableStatement(node) && isExported) {
+      for (const decl of node.declarationList.declarations) {
+        if (ts.isIdentifier(decl.name)) {
+          names.push(decl.name.text);
+        }
+      }
+    }
+
+    // export class Foo { ... }
+    if (ts.isClassDeclaration(node) && isExported && node.name) {
+      names.push(node.name.text);
+    }
+
+    // export { Foo, Bar, Baz }
+    if (ts.isExportDeclaration(node) && node.exportClause && ts.isNamedExports(node.exportClause)) {
+      // Skip type-only re-exports: export type { Foo }
+      if (node.isTypeOnly) return;
+
+      for (const spec of node.exportClause.elements) {
+        // Skip individual type-only exports: export { type Foo, Bar }
+        if (spec.isTypeOnly) continue;
+        names.push(spec.name.text);
+      }
+    }
+  });
+
+  return names;
+}

package/src/generate-story-deterministic.ts

@@ -0,0 +1,267 @@
+// ═══════════════════════════════════════════════════════════════════
+// Deterministic story generator — no LLM call, pure template logic
+// ═══════════════════════════════════════════════════════════════════
+
+export interface DeterministicStoryProp {
+  name: string;
+  type: string;
+  required: boolean;
+  default?: string;
+  description: string;
+  category: 'data' | 'callback' | 'slot' | 'visual' | 'state' | 'config';
+}
+
+export interface StoryVariant {
+  name: string;
+  description: string;
+  args: Record<string, unknown>;
+  needsPlayFunction?: boolean;
+  playDescription?: string;
+}
+
+export interface DeterministicStoryInput {
+  componentName: string;
+  componentImportPath: string;
+  props?: DeterministicStoryProp[];
+  storyVariants?: StoryVariant[];
+}
+
+/**
+ * Generates a Storybook CSF3 story file deterministically (no LLM call).
+ *
+ * Uses structured prop data and optional story variants to emit a complete
+ * `.stories.tsx` file string. When no variants are provided, a Default
+ * story is synthesized from the props with sensible placeholder values.
+ */
+export function generateStoryDeterministic(input: DeterministicStoryInput): string {
+  const { componentName, componentImportPath, props, storyVariants } = input;
+
+  const lines: string[] = [];
+
+  // ── Imports ──────────────────────────────────────────────────────
+  lines.push(`import type { Meta, StoryObj } from '@storybook/react-vite';`);
+  lines.push(`import { ${componentName} } from '${componentImportPath}';`);
+  lines.push('');
+
+  // ── Meta ─────────────────────────────────────────────────────────
+  lines.push(`const meta: Meta<typeof ${componentName}> = {`);
+  lines.push(`  title: 'UI Components/${componentName}',`);
+  lines.push(`  component: ${componentName},`);
+  lines.push(`};`);
+  lines.push(`export default meta;`);
+  lines.push('');
+
+  // ── Story type alias ─────────────────────────────────────────────
+  lines.push(`type Story = StoryObj<typeof ${componentName}>;`);
+
+  // ── Stories ──────────────────────────────────────────────────────
+  if (storyVariants && storyVariants.length > 0) {
+    for (const variant of storyVariants) {
+      lines.push('');
+      lines.push(`export const ${variant.name}: Story = {`);
+      const argsBlock = serializeArgs(variant.args);
+      if (argsBlock) {
+        lines.push(`  args: {`);
+        lines.push(argsBlock);
+        lines.push(`  },`);
+      }
+      lines.push(`};`);
+    }
+  } else {
+    // Derive a Default story from props
+    const defaultArgs = deriveDefaultArgs(props ?? []);
+    lines.push('');
+    lines.push(`export const Default: Story = {`);
+    const argsBlock = serializeArgs(defaultArgs);
+    if (argsBlock) {
+      lines.push(`  args: {`);
+      lines.push(argsBlock);
+      lines.push(`  },`);
+    }
+    lines.push(`};`);
+  }
+
+  lines.push('');
+  return lines.join('\n');
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// Internals
+// ═══════════════════════════════════════════════════════════════════
+
+/**
+ * Derives sensible default arg values from structured prop definitions.
+ *
+ * - `callback` props are omitted (Storybook auto-detects them via argTypes).
+ * - `slot` props are omitted (ReactNode cannot be serialized to args).
+ * - `data` props get placeholder values based on their TypeScript type.
+ * - `visual` props use the declared default if present, otherwise a placeholder.
+ * - `state` props default to `false`.
+ * - `config` props use the declared default if present, otherwise a placeholder.
+ */
+function deriveDefaultArgs(props: DeterministicStoryProp[]): Record<string, unknown> {
+  const args: Record<string, unknown> = {};
+
+  for (const prop of props) {
+    // Skip categories that cannot or should not be serialized in args
+    if (prop.category === 'callback' || prop.category === 'slot') {
+      continue;
+    }
+
+    if (prop.category === 'state') {
+      args[prop.name] = false;
+      continue;
+    }
+
+    // If a default is declared, try to use it
+    if (prop.default !== undefined) {
+      const parsed = parseDefaultValue(prop.default);
+      if (parsed !== undefined) {
+        args[prop.name] = parsed;
+        continue;
+      }
+    }
+
+    // Otherwise generate a placeholder based on the TypeScript type string
+    args[prop.name] = placeholderForType(prop.type);
+  }
+
+  return args;
+}
+
+/**
+ * Attempts to parse a default value string into a JS primitive.
+ * Returns `undefined` when the string cannot be meaningfully parsed
+ * (e.g. an arrow function or complex expression).
+ */
+function parseDefaultValue(raw: string): unknown {
+  const trimmed = raw.trim();
+  if (trimmed === 'true') return true;
+  if (trimmed === 'false') return false;
+  if (trimmed === 'null') return null;
+  if (trimmed === 'undefined') return undefined;
+
+  // Quoted string
+  const stringMatch = trimmed.match(/^['"](.*)['"]$/);
+  if (stringMatch) return stringMatch[1];
+
+  // Numeric
+  const num = Number(trimmed);
+  if (!Number.isNaN(num) && trimmed !== '') return num;
+
+  // Array or object literal — attempt JSON parse
+  if (trimmed.startsWith('[') || trimmed.startsWith('{')) {
+    try {
+      return JSON.parse(trimmed);
+    } catch {
+      return undefined;
+    }
+  }
+
+  // Anything else (functions, expressions) → skip
+  return undefined;
+}
+
+/**
+ * Returns a sensible placeholder value for a given TypeScript type string.
+ */
+function placeholderForType(typeStr: string): unknown {
+  const t = typeStr.trim();
+
+  if (t === 'string') return 'Example';
+  if (t === 'number') return 42;
+  if (t === 'boolean') return true;
+
+  // Union of string literals — pick the first literal
+  const literalUnion = t.match(/^['"]([^'"]+)['"]/);
+  if (literalUnion) return literalUnion[1];
+
+  // Array types
+  if (t.endsWith('[]') || t.startsWith('Array<')) return [];
+
+  // Generic object / Record
+  if (t === 'object' || t.startsWith('Record<') || t.startsWith('{')) return {};
+
+  // Fallback
+  return undefined;
+}
+
+/**
+ * Serializes an args record into indented TypeScript object body lines.
+ * Returns an empty string when the args record is empty (caller should
+ * omit the `args` block entirely).
+ *
+ * Each value is formatted as a valid TypeScript literal:
+ * - strings → quoted
+ * - numbers / booleans → as-is
+ * - arrays / plain objects → JSON.stringify
+ * - undefined, null, functions → skipped
+ */
+function serializeArgs(args: Record<string, unknown>): string {
+  const entries: string[] = [];
+
+  for (const [key, value] of Object.entries(args)) {
+    const formatted = formatArgValue(value);
+    if (formatted === null) continue;
+    entries.push(`    ${key}: ${formatted},`);
+  }
+
+  return entries.join('\n');
+}
+
+function formatArgValue(value: unknown): string | null {
+  if (value === undefined) return null;
+  if (value === null) return null;
+  if (typeof value === 'function') return null;
+
+  if (typeof value === 'string') {
+    // Callback strings like "() => {}" — emit as raw JS, not quoted
+    if (/^\s*\(/.test(value) || /^\s*function\s*\(/.test(value)) {
+      return value;
+    }
+    return JSON.stringify(value);
+  }
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'boolean') return String(value);
+
+  // Arrays and plain objects — deep-fix stringified JSON values first
+  if (Array.isArray(value) || typeof value === 'object') {
+    const fixed = deepParseStringifiedJson(value);
+    return JSON.stringify(fixed);
+  }
+
+  return null;
+}
+
+/**
+ * Recursively walks a value and parses any string that looks like
+ * stringified JSON back into an actual object/array. This fixes
+ * FEA output where nested objects are accidentally double-stringified.
+ */
+function deepParseStringifiedJson(value: unknown): unknown {
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    if ((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+      try {
+        return deepParseStringifiedJson(JSON.parse(trimmed));
+      } catch {
+        return value;
+      }
+    }
+    return value;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(deepParseStringifiedJson);
+  }
+
+  if (value !== null && typeof value === 'object') {
+    const result: Record<string, unknown> = {};
+    for (const [k, v] of Object.entries(value)) {
+      result[k] = deepParseStringifiedJson(v);
+    }
+    return result;
+  }
+
+  return value;
+}

package/src/index.ts

@@ -9,3 +9,15 @@ export type {
   ImplementComponentEvents,
 } from './commands/implement-component';
 export { handleImplementComponent } from './commands/implement-component';
+export { generateStoryDeterministic } from './generate-story-deterministic';
+export type {
+  ModelConfig,
+  PipelineConfig,
+  PipelineContext,
+  PipelineModels,
+  PipelineResult,
+  PipelineStep,
+  StepResult,
+} from './pipeline/run-pipeline';
+export { buildPipelineSteps, runPipeline } from './pipeline/run-pipeline';
+export { generateScaffold } from './scaffold';