@auto-engineer/react-component-implementer 1.12.1

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @auto-engineer/react-component-implementer
+
+## 1.12.1
+
+### Patch Changes
+
+- [`6557224`](https://github.com/BeOnAuto/auto-engineer/commit/6557224ec6f51c704855e5058931e81ab1de1544) Thanks [@osamanar](https://github.com/osamanar)! - - Updated project dependency lock file to ensure consistent package installations
+
+- [`cd5f56b`](https://github.com/BeOnAuto/auto-engineer/commit/cd5f56b01951cd27392c51a384706a8c2a7401c5) Thanks [@osamanar](https://github.com/osamanar)! - - Removed unused packages to keep the project lean and reduce maintenance overhead
+
+- Updated dependencies [[`6557224`](https://github.com/BeOnAuto/auto-engineer/commit/6557224ec6f51c704855e5058931e81ab1de1544), [`cd5f56b`](https://github.com/BeOnAuto/auto-engineer/commit/cd5f56b01951cd27392c51a384706a8c2a7401c5)]:
+  - @auto-engineer/message-bus@1.12.1

package/LICENSE

@@ -0,0 +1,10 @@
+Elastic License 2.0
+
+Copyright 2024 Sam Hatoum
+
+This software and associated documentation files (the "Software") are licensed under the Elastic License 2.0 (the "License"). You may not use this file except in compliance with the License.
+
+You may obtain a copy of the License at:
+https://www.elastic.co/licensing/elastic-license
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. 

package/dist/src/commands/implement-react-component.d.ts

@@ -0,0 +1,26 @@
+import { type Command, type Event } from '@auto-engineer/message-bus';
+import type { Job } from '../types.js';
+export type ImplementReactComponentCommand = Command<'ImplementReactComponent', {
+    targetDir: string;
+    job: Job;
+}>;
+export type ReactComponentImplementedEvent = Event<'ReactComponentImplemented', {
+    name: string;
+    componentPath: string;
+    storyPath: string;
+    iterations: number;
+}>;
+export type ReactComponentImplementationFailedEvent = Event<'ReactComponentImplementationFailed', {
+    error: string;
+    name: string;
+}>;
+export type ImplementReactComponentEvents = ReactComponentImplementedEvent | ReactComponentImplementationFailedEvent;
+export declare const commandHandler: import("@auto-engineer/message-bus").UnifiedCommandHandler<Readonly<{
+    type: string;
+    data: Readonly<Record<string, unknown>>;
+    timestamp?: Date;
+    requestId?: string;
+    correlationId?: string;
+}>>;
+export default commandHandler;
+//# sourceMappingURL=implement-react-component.d.ts.map

package/dist/src/commands/implement-react-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"implement-react-component.d.ts","sourceRoot":"","sources":["../../../src/commands/implement-react-component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,OAAO,EAAwB,KAAK,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAc5F,OAAO,KAAK,EAAiB,GAAG,EAAE,MAAM,aAAa,CAAC;AAoItD,MAAM,MAAM,8BAA8B,GAAG,OAAO,CAClD,yBAAyB,EACzB;IACE,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,EAAE,GAAG,CAAC;CACV,CACF,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG,KAAK,CAChD,2BAA2B,EAC3B;IACE,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB,CACF,CAAC;AAEF,MAAM,MAAM,uCAAuC,GAAG,KAAK,CACzD,oCAAoC,EACpC;IACE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CACF,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG,8BAA8B,GAAG,uCAAuC,CAAC;AA4GrH,eAAO,MAAM,cAAc;;;;;;GAiIzB,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/dist/src/commands/implement-react-component.js

@@ -0,0 +1,295 @@
+import { readdir } from 'node:fs/promises';
+import path from 'node:path';
+import { createAnthropic } from '@ai-sdk/anthropic';
+import { defineCommandHandler } from '@auto-engineer/message-bus';
+import createDebug from 'debug';
+import { chromium } from 'playwright';
+import { componentName, createComponentGenerator } from '../component-generator.js';
+import { writeComponent, writeStory } from '../component-writer.js';
+import { scanFileTree } from '../file-tree.js';
+import { validateFunctional } from '../functional-validator.js';
+import { connectMcpClient } from '../mcp-client.js';
+import { checkTypes } from '../type-checker.js';
+import { evaluateVisual } from '../visual-evaluator.js';
+const debug = createDebug('auto:react-component-implementer:command');
+const PORT = 6006;
+const MAX_ITERATIONS = 3;
+async function runValidationLoop(params) {
+    const { task, targetDir, outputDir, generator, context, mcpClient, browser, model, designReference, initialCode } = params;
+    const name = componentName(task.componentId);
+    let { code, history } = initialCode;
+    let componentPath = await writeComponent(name, code.componentCode, outputDir);
+    let storyPath = await writeStory(name, code.storyCode, outputDir);
+    let lastFeedback;
+    for (let iteration = 1; iteration <= MAX_ITERATIONS; iteration++) {
+        console.log(`  Iteration ${iteration}/${MAX_ITERATIONS} for ${name}`);
+        const typeResult = checkTypes([componentPath, storyPath], targetDir);
+        if (!typeResult.passed) {
+            console.log('    Type errors found, skipping functional/visual validation');
+            lastFeedback = collectFeedback(typeResult, [], []);
+            console.log(`  Errors: ${summarizeFeedback(lastFeedback)}`);
+            if (iteration < MAX_ITERATIONS) {
+                console.log(`  Refining ${name}...`);
+                const refined = await generator.refine(lastFeedback, context, history);
+                code = refined.code;
+                history = refined.history;
+                componentPath = await writeComponent(name, code.componentCode, outputDir);
+                storyPath = await writeStory(name, code.storyCode, outputDir);
+            }
+            continue;
+        }
+        const storyExports = extractStoryExports(code.storyCode);
+        if (storyExports.length === 0) {
+            console.log(`  Warning: no named exports found in story for ${name}, skipping validation`);
+            return { success: true, componentPath, storyPath, iterations: iteration };
+        }
+        const storyUrls = await waitForStoryUrls(mcpClient, storyExports, storyPath);
+        const storyResults = [];
+        for (const { exportName, url } of storyUrls) {
+            console.log(`    Validating story ${exportName}...`);
+            const functionalResult = await validateFunctional(url, browser);
+            // Retry visual evaluation up to 3 times; if it passes early, stop.
+            // After 3 attempts, consider it a success regardless.
+            const MAX_VISUAL_ATTEMPTS = 3;
+            let visualResult = { score: 0, passed: false, feedback: '' };
+            for (let v = 1; v <= MAX_VISUAL_ATTEMPTS; v++) {
+                console.log(`      Visual check ${v}/${MAX_VISUAL_ATTEMPTS} for ${exportName}...`);
+                visualResult = await evaluateVisual(url, { name, description: task.description }, browser, model, designReference);
+                if (visualResult.passed)
+                    break;
+            }
+            // After all attempts, visual always passes
+            visualResult.passed = true;
+            storyResults.push({ functionalResult, visualResult });
+        }
+        const functionalResults = storyResults.map((r) => r.functionalResult);
+        const visualResults = storyResults.map((r) => r.visualResult);
+        if (isPassing(typeResult, functionalResults, visualResults)) {
+            console.log(`  ${name} passed all validations on iteration ${iteration}`);
+            return { success: true, componentPath, storyPath, iterations: iteration };
+        }
+        lastFeedback = collectFeedback(typeResult, functionalResults, visualResults);
+        console.log(`  Errors: ${summarizeFeedback(lastFeedback)}`);
+        if (iteration < MAX_ITERATIONS) {
+            console.log(`  Refining ${name}...`);
+            const refined = await generator.refine(lastFeedback, context, history);
+            code = refined.code;
+            history = refined.history;
+            componentPath = await writeComponent(name, code.componentCode, outputDir);
+            storyPath = await writeStory(name, code.storyCode, outputDir);
+        }
+    }
+    console.log(`  ${name} failed after ${MAX_ITERATIONS} iterations`);
+    return { success: false, componentPath, storyPath, iterations: MAX_ITERATIONS, lastFeedback };
+}
+async function checkStorybookRunning() {
+    try {
+        const response = await fetch(`http://localhost:${PORT}`);
+        if (!response.ok) {
+            throw new Error('Storybook responded with non-OK status');
+        }
+    }
+    catch {
+        throw new Error(`Storybook is not running on port ${PORT}. Start it with \`pnpm storybook\` in the client directory before running this command.`);
+    }
+}
+function delay(ms) {
+    return new Promise((r) => setTimeout(r, ms));
+}
+function collectFeedback(typeResult, functionalResults, visualResults) {
+    return {
+        typeErrors: typeResult.errors,
+        interactionErrors: functionalResults.flatMap((r) => r.interactionErrors),
+        consoleErrors: functionalResults.flatMap((r) => r.consoleErrors),
+        consoleWarnings: functionalResults.flatMap((r) => r.consoleWarnings),
+        visualFeedback: visualResults
+            .filter((r) => !r.passed)
+            .map((r) => r.feedback)
+            .join('\n') || undefined,
+    };
+}
+function summarizeFeedback(feedback) {
+    const parts = [];
+    const typeErrors = feedback.typeErrors ?? [];
+    const interactionErrors = feedback.interactionErrors ?? [];
+    const consoleErrors = feedback.consoleErrors ?? [];
+    const consoleWarnings = feedback.consoleWarnings ?? [];
+    if (typeErrors.length > 0) {
+        parts.push(`${typeErrors.length} type error(s): ${typeErrors[0]}`);
+    }
+    if (interactionErrors.length > 0) {
+        parts.push(`${interactionErrors.length} interaction error(s): ${interactionErrors[0]}`);
+    }
+    if (consoleErrors.length > 0) {
+        parts.push(`${consoleErrors.length} console error(s): ${consoleErrors[0]}`);
+    }
+    if (consoleWarnings.length > 0) {
+        parts.push(`${consoleWarnings.length} console warning(s): ${consoleWarnings[0]}`);
+    }
+    if (feedback.visualFeedback) {
+        parts.push(`visual: ${feedback.visualFeedback.split('\n')[0]}`);
+    }
+    return parts.join('; ');
+}
+function isPassing(typeResult, functionalResults, visualResults) {
+    return typeResult.passed && functionalResults.every((r) => r.passed) && visualResults.every((r) => r.passed);
+}
+function extractStoryExports(storyCode) {
+    const results = [];
+    const regex = /export\s+const\s+(\w+)/g;
+    let match = regex.exec(storyCode);
+    while (match) {
+        results.push(match[1]);
+        match = regex.exec(storyCode);
+    }
+    return results;
+}
+function toIframeUrl(url) {
+    const parsed = new URL(url);
+    const pathParam = parsed.searchParams.get('path');
+    if (pathParam && !parsed.pathname.includes('iframe.html')) {
+        const storyId = pathParam.replace(/^\/story\//, '');
+        parsed.pathname = '/iframe.html';
+        parsed.searchParams.delete('path');
+        parsed.searchParams.set('id', storyId);
+        return parsed.toString();
+    }
+    return url;
+}
+async function waitForStoryUrls(mcpClient, exportNames, storyPath, maxAttempts = 10, interval = 3000) {
+    for (let attempt = 0; attempt < maxAttempts; attempt++) {
+        const result = await mcpClient.getStoryUrl(exportNames[0], storyPath);
+        if (result.startsWith('http'))
+            break;
+        console.log(result);
+        console.log(`    Story not indexed yet, retrying (${attempt + 1}/${maxAttempts})...`);
+        if (attempt === maxAttempts - 1) {
+            throw new Error(`Story not found after ${maxAttempts} attempts: ${storyPath}`);
+        }
+        await delay(interval);
+    }
+    const results = await Promise.all(exportNames.map(async (exportName) => {
+        const url = await mcpClient.getStoryUrl(exportName, storyPath);
+        return { exportName, url: toIframeUrl(url) };
+    }));
+    return results;
+}
+export const commandHandler = defineCommandHandler({
+    name: 'ImplementReactComponent',
+    displayName: 'Implement React Component',
+    alias: 'implement:react-component',
+    description: 'Generate a React/shadcn component with Storybook story, validated through type-checking, functional testing, and visual evaluation',
+    category: 'implement',
+    icon: 'component',
+    fields: {
+        targetDir: {
+            description: 'The client project root directory (components will be written to src/components/ui/)',
+            required: true,
+        },
+        job: {
+            description: 'Job object with payload containing component details (componentId, description, type, prompt)',
+            required: true,
+        },
+    },
+    examples: [
+        '$ auto implement:react-component --target-dir=./client --job=\'{"id":"job_1","dependsOn":[],"target":"ImplementReactComponent","payload":{"componentId":"button","description":"A button","type":"component","prompt":"Create a Button"}}\'',
+    ],
+    events: [
+        { name: 'ReactComponentImplemented', displayName: 'React Component Implemented' },
+        { name: 'ReactComponentImplementationFailed', displayName: 'React Component Implementation Failed' },
+    ],
+    handle: async (command) => {
+        const { targetDir, job } = command.data;
+        const task = job.payload;
+        const name = componentName(task.componentId);
+        debug('Implementing React component: %s in %s', name, targetDir);
+        let browser;
+        let mcpClient;
+        try {
+            debug('Checking Storybook on port %d...', PORT);
+            await checkStorybookRunning();
+            debug('Connecting MCP client...');
+            mcpClient = await connectMcpClient({ baseUrl: `http://localhost:${PORT}` });
+            debug('Fetching generation context...');
+            const outputDir = path.resolve(targetDir, 'src', 'components', 'ui');
+            const [uiBuildingInstructions, existingComponents, fileTree] = await Promise.all([
+                mcpClient.getUiBuildingInstructions(),
+                mcpClient.listComponents(),
+                scanFileTree(outputDir, { readdir }),
+            ]);
+            const context = { uiBuildingInstructions, existingComponents, fileTree };
+            const modelName = process.env.DEFAULT_AI_MODEL ?? 'claude-sonnet-4-20250514';
+            debug('Using AI model: %s', modelName);
+            const model = createAnthropic()(modelName);
+            debug('Launching browser...');
+            browser = await chromium.launch();
+            debug('Capturing design references...');
+            // const designReference = await captureDesignReferences(browser, PORT, existingComponents, uiBuildingInstructions);
+            const designReference = {
+                screenshots: [],
+                instructions: '',
+            };
+            const generator = createComponentGenerator(model);
+            debug('Generating component: %s', name);
+            const initialCode = await generator.generate(task, context);
+            const resolvedTargetDir = path.resolve(targetDir);
+            const result = await runValidationLoop({
+                task,
+                targetDir: resolvedTargetDir,
+                outputDir,
+                generator,
+                context,
+                mcpClient,
+                browser,
+                model,
+                designReference,
+                initialCode,
+            });
+            if (result.success) {
+                return {
+                    type: 'ReactComponentImplemented',
+                    data: {
+                        name,
+                        componentPath: result.componentPath,
+                        storyPath: result.storyPath,
+                        iterations: result.iterations,
+                    },
+                    timestamp: new Date(),
+                    requestId: command.requestId,
+                    correlationId: command.correlationId,
+                };
+            }
+            return {
+                type: 'ReactComponentImplementationFailed',
+                data: {
+                    error: `Failed after ${MAX_ITERATIONS} iterations. Last feedback: ${result.lastFeedback ? summarizeFeedback(result.lastFeedback) : 'none'}`,
+                    name,
+                },
+                timestamp: new Date(),
+                requestId: command.requestId,
+                correlationId: command.correlationId,
+            };
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            debug('Implementation failed: %s', errorMessage);
+            return {
+                type: 'ReactComponentImplementationFailed',
+                data: { error: errorMessage, name },
+                timestamp: new Date(),
+                requestId: command.requestId,
+                correlationId: command.correlationId,
+            };
+        }
+        finally {
+            if (browser) {
+                await browser.close();
+            }
+            if (mcpClient) {
+                await mcpClient.close();
+            }
+        }
+    },
+});
+export default commandHandler;
+//# sourceMappingURL=implement-react-component.js.map

package/dist/src/commands/implement-react-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"implement-react-component.js","sourceRoot":"","sources":["../../../src/commands/implement-react-component.ts"],"names":[],"mappings":"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"}

package/dist/src/component-generator.d.ts

@@ -0,0 +1,37 @@
+import type { LanguageModel } from 'ai';
+import type { ComponentTask } from './types.js';
+export declare function componentName(componentId: string): string;
+export interface GeneratedCode {
+    componentCode: string;
+    storyCode: string;
+}
+export interface GenerationContext {
+    uiBuildingInstructions: string;
+    existingComponents: string;
+    fileTree: string;
+}
+export interface ValidationFeedback {
+    typeErrors?: string[];
+    interactionErrors?: string[];
+    consoleErrors?: string[];
+    consoleWarnings?: string[];
+    visualFeedback?: string;
+}
+export interface Message {
+    role: 'user' | 'assistant';
+    content: string;
+}
+export interface RefinementHistory {
+    messages: Message[];
+}
+export declare function createComponentGenerator(model: LanguageModel): {
+    generate(task: ComponentTask, context: GenerationContext): Promise<{
+        code: GeneratedCode;
+        history: RefinementHistory;
+    }>;
+    refine(feedback: ValidationFeedback, context: GenerationContext, history: RefinementHistory): Promise<{
+        code: GeneratedCode;
+        history: RefinementHistory;
+    }>;
+};
+//# sourceMappingURL=component-generator.d.ts.map

package/dist/src/component-generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-generator.d.ts","sourceRoot":"","sources":["../../src/component-generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC;AAExC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,wBAAgB,aAAa,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAKzD;AAED,MAAM,WAAW,aAAa;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;CACjB;AAgMD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,aAAa;mBAGjD,aAAa,WACV,iBAAiB,GACzB,OAAO,CAAC;QAAE,IAAI,EAAE,aAAa,CAAC;QAAC,OAAO,EAAE,iBAAiB,CAAA;KAAE,CAAC;qBA4BnD,kBAAkB,WACnB,iBAAiB,WACjB,iBAAiB,GACzB,OAAO,CAAC;QAAE,IAAI,EAAE,aAAa,CAAC;QAAC,OAAO,EAAE,iBAAiB,CAAA;KAAE,CAAC;EA6BlE"}

package/dist/src/component-generator.js

@@ -0,0 +1,228 @@
+import { generateText } from 'ai';
+export function componentName(componentId) {
+    return componentId
+        .split('_')
+        .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+        .join('');
+}
+function buildSystemPrompt(context) {
+    const lines = [
+        'You are a React component generator for a shadcn/ui design system.',
+        'Tech stack: React, react-router-dom, shadcn/ui, Tailwind CSS.',
+        'Do not use Next.js or any Next.js-specific APIs (no next/link, next/image, next/router, useRouter from next/navigation, server components, etc.). Use react-router-dom for navigation (Link, useNavigate, useParams).',
+        'Follow these conventions:',
+        '- Use Tailwind CSS for styling',
+        '- Use the data-slot pattern for component identification (e.g. data-slot="button")',
+        '- Export components as named exports',
+        '- Stories must use play functions for interaction testing',
+        '- Use React.forwardRef where appropriate',
+        '- Story titles must be just the component name (e.g. title: "Button"), never with folder prefixes',
+        '- Import existing components from "@/components/ui/{kebab-name}" (e.g. import { Button } from "@/components/ui/button")',
+        '- The parenthesized name in the existing components list is the file name for imports',
+        '- In story files, import the component being tested using a relative path (e.g. import { BookCard } from "./book-card")',
+        '- When a component would benefit from imagery (e.g. cards, lists, heroes, profiles, products), use Unsplash image URLs (e.g. "https://images.unsplash.com/photo-{id}?w=300&h=200&fit=crop") to make the component visually rich and realistic. Pick real Unsplash photo IDs that match the content (e.g. a food photo for a restaurant card, a book cover for a bookstore). Use a different photo per item for visual variety.',
+        '',
+        'UI Building Instructions:',
+        context.uiBuildingInstructions,
+        '',
+        'Existing Components:',
+        context.existingComponents,
+        '',
+        'File Tree:',
+        context.fileTree,
+        'Use these exact file paths when constructing import statements. Do not guess or invent file paths.',
+        '',
+        'GraphQL & Data Fetching (for components with data requirements):',
+        '- When a component has GraphQL requests, use @tanstack/react-query with graphql-request',
+        '- Import { useQuery, useMutation } from "@tanstack/react-query"',
+        '- Import { request, gql } from "graphql-request"',
+        '- Define the GraphQL document using gql`...` with the exact operation string provided',
+        '- Use a queryFn that calls request(endpoint, document, variables)',
+        '- Accept the GraphQL endpoint via props or use a default "/graphql"',
+        '- Handle loading (isPending) and error (isError) states in the component',
+        '',
+        'Storybook MSW Mocking (for components with GraphQL requests):',
+        '- Mock GraphQL operations in stories using MSW (Mock Service Worker) via msw-storybook-addon',
+        '- Import { graphql, HttpResponse } from "msw"',
+        '- Define handlers using graphql.query("OperationName", ...) or graphql.mutation("OperationName", ...)',
+        '- Attach handlers to each story via parameters.msw.handlers',
+        '- Provide realistic, visually rich mock data that matches the GraphQL response shape',
+        '- Include Unsplash image URLs in mock data whenever the component displays images (e.g. cover art, thumbnails, avatars, product photos). Use real Unsplash photo IDs that are contextually relevant, and a different photo per item for visual variety.',
+        '- Example:',
+        '  export const Default: StoryObj = {',
+        '    parameters: {',
+        '      msw: {',
+        '        handlers: [',
+        '          graphql.query("SearchBooks", () => HttpResponse.json({',
+        '            data: { searchBooks: { results: [',
+        '              { bookId: "1", title: "The Great Gatsby", author: "F. Scott Fitzgerald", price: 12.99, coverUrl: "https://images.unsplash.com/photo-1544947950-fa07a98d237f?w=200&h=300&fit=crop" },',
+        '              { bookId: "2", title: "To Kill a Mockingbird", author: "Harper Lee", price: 14.99, coverUrl: "https://images.unsplash.com/photo-1512820790803-83ca734da794?w=200&h=300&fit=crop" },',
+        '            ] } }',
+        '          }))',
+        '        ]',
+        '      }',
+        '    }',
+        '  }',
+        '- Each story variant should have its own handlers (e.g. loading, error, empty state)',
+        '- For error stories, return errors: graphql.query("Op", () => HttpResponse.json({ errors: [{ message: "Failed" }] }))',
+        '',
+        'Visual Hierarchy & Typography:',
+        '- Headlines: text-4xl or text-5xl font-bold tracking-tight',
+        '- Subheadings: text-2xl font-semibold',
+        '- Body text: text-base leading-relaxed',
+        '- Captions/metadata: text-sm text-muted-foreground',
+        '- Use consistent font weights: bold for emphasis, semibold for subheadings, normal for body',
+        '',
+        'Spacing Rhythm:',
+        '- Section gaps: space-y-16 or py-16 between major page sections',
+        '- Content block gaps: space-y-6 between related content groups',
+        '- Element spacing: space-y-3 or gap-3 between individual elements',
+        '- Use consistent padding: p-6 for cards, p-4 for compact elements, p-8 for spacious sections',
+        '',
+        'Interactive States:',
+        '- Hover: hover:shadow-lg, hover:bg-accent, hover:scale-[1.02]',
+        '- Focus: focus:ring-2 focus:ring-ring focus:ring-offset-2',
+        '- Active: active:scale-95',
+        '- Transitions: transition-all duration-200 for smooth state changes',
+        '- Disabled: opacity-50 cursor-not-allowed',
+        '',
+        'Layout Architecture Patterns:',
+        '- Full-height layout: <div className="h-screen flex flex-col"><header className="flex-shrink-0">...</header><main className="flex-1 overflow-auto">...</main></div>',
+        '- Sidebar + main: <div className="h-full flex"><aside className="w-64 flex-shrink-0 border-r">...</aside><main className="flex-1 overflow-auto">...</main></div>',
+        '- Scrollable content area: Use flex-1 overflow-auto on the scrollable container, flex-shrink-0 on fixed elements',
+        '- Centered content: max-w-7xl mx-auto px-4 sm:px-6 lg:px-8',
+        '- Grid layouts: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6',
+        '',
+        'Error Prevention Rules:',
+        '- Zustand selectors: NEVER use object-literal selectors like useStore(s => ({ a: s.a, b: s.b })). Select primitives individually: const a = useStore(s => s.a)',
+        '- Render loops: NEVER call setState during render. Use useEffect for side effects with stable dependency arrays',
+        '- Import validation: Verify named vs default exports. Use correct import paths matching the file tree above',
+        '- Dependency validation: Only import packages that are available. Do not import from packages not listed in the file tree or existing components',
+        '',
+        'BAD vs GOOD Examples:',
+        '- BAD: const { a, b } = useStore(s => ({ a: s.a, b: s.b })) — creates new object every render, causes infinite re-renders',
+        '- GOOD: const a = useStore(s => s.a); const b = useStore(s => s.b); — stable primitive selectors',
+        '- BAD: import { Button } from "shadcn/ui" — wrong import path',
+        '- GOOD: import { Button } from "@/components/ui/button" — correct shadcn/ui import path',
+        '- BAD: import Link from "react-router-dom" — wrong, Link is a named export',
+        '- GOOD: import { Link } from "react-router-dom" — correct named import',
+        '',
+        'Respond with exactly two tsx code blocks.',
+        'The first code block is the component implementation.',
+        'The second code block is the Storybook story.',
+    ];
+    return lines.join('\n');
+}
+function buildUserPrompt(task) {
+    const name = componentName(task.componentId);
+    const lines = [
+        `Component: ${name}`,
+        `Description: ${task.description}`,
+        `Level: ${task.type}`,
+        '',
+        `Implementation: ${task.implementation}`,
+        '',
+        'Acceptance Criteria:',
+        ...task.acceptanceCriteria.map((c) => `  - ${c}`),
+    ];
+    if (task.prompt) {
+        lines.push('', 'Additional Instructions:', task.prompt);
+    }
+    if (task.files.create.length > 0) {
+        lines.push('', 'Files to create:', ...task.files.create.map((f) => `  - ${f}`));
+    }
+    return lines.join('\n');
+}
+function parseCodeBlocks(text) {
+    const codeBlockRegex = /```tsx\n([\s\S]*?)```/g;
+    const matches = [];
+    let match = codeBlockRegex.exec(text);
+    while (match) {
+        matches.push(match[1].trim());
+        match = codeBlockRegex.exec(text);
+    }
+    if (matches.length < 2) {
+        throw new Error(`Expected 2 tsx code blocks but found ${matches.length}`);
+    }
+    return {
+        componentCode: matches[0],
+        storyCode: matches[1],
+    };
+}
+function buildFeedbackPrompt(feedback) {
+    const lines = [
+        'The component and story code you generated above had validation issues.',
+        '',
+        'Validation errors:',
+    ];
+    if (feedback.typeErrors && feedback.typeErrors.length > 0) {
+        lines.push('', 'TypeScript errors:', ...feedback.typeErrors.map((e) => `  - ${e}`));
+    }
+    if (feedback.interactionErrors && feedback.interactionErrors.length > 0) {
+        lines.push('', 'Interaction errors:', ...feedback.interactionErrors.map((e) => `  - ${e}`));
+    }
+    if (feedback.consoleErrors && feedback.consoleErrors.length > 0) {
+        lines.push('', 'Console errors:', ...feedback.consoleErrors.map((e) => `  - ${e}`));
+    }
+    if (feedback.consoleWarnings && feedback.consoleWarnings.length > 0) {
+        lines.push('', 'Console warnings:', ...feedback.consoleWarnings.map((e) => `  - ${e}`));
+    }
+    if (feedback.visualFeedback) {
+        lines.push('', 'Visual feedback:', `  ${feedback.visualFeedback}`);
+    }
+    lines.push('', 'Fix all the issues above. Respond with exactly two tsx code blocks.', 'The first code block is the fixed component implementation.', 'The second code block is the fixed Storybook story.');
+    return lines.join('\n');
+}
+export function createComponentGenerator(model) {
+    return {
+        async generate(task, context) {
+            const system = buildSystemPrompt(context);
+            const prompt = buildUserPrompt(task);
+            const { text } = await generateText({
+                model,
+                messages: [
+                    {
+                        role: 'system',
+                        content: system,
+                        providerOptions: { anthropic: { cacheControl: { type: 'ephemeral' } } },
+                    },
+                    { role: 'user', content: prompt },
+                ],
+            });
+            const code = parseCodeBlocks(text);
+            const history = {
+                messages: [
+                    { role: 'user', content: prompt },
+                    { role: 'assistant', content: text },
+                ],
+            };
+            return { code, history };
+        },
+        async refine(feedback, context, history) {
+            const system = buildSystemPrompt(context);
+            const feedbackPrompt = buildFeedbackPrompt(feedback);
+            const { text } = await generateText({
+                model,
+                messages: [
+                    {
+                        role: 'system',
+                        content: system,
+                        providerOptions: { anthropic: { cacheControl: { type: 'ephemeral' } } },
+                    },
+                    ...history.messages,
+                    { role: 'user', content: feedbackPrompt },
+                ],
+            });
+            const newCode = parseCodeBlocks(text);
+            const newHistory = {
+                messages: [
+                    ...history.messages,
+                    { role: 'user', content: feedbackPrompt },
+                    { role: 'assistant', content: text },
+                ],
+            };
+            return { code: newCode, history: newHistory };
+        },
+    };
+}
+//# sourceMappingURL=component-generator.js.map