@auto-engineer/component-implementer 0.10.5

package/README.md

@@ -0,0 +1,358 @@
+# @auto-engineer/frontend-implementer
+
+AI-powered frontend implementation plugin for the Auto Engineer CLI that implements client-side code with AI assistance. This plugin creates React components, hooks, and application logic from specifications and design requirements.
+
+## Installation
+
+This is a plugin for the Auto Engineer CLI. Install both the CLI and this plugin:
+
+```bash
+npm install -g @auto-engineer/cli
+npm install @auto-engineer/frontend-implementer
+```
+
+## Configuration
+
+Add this plugin to your `auto.config.ts`:
+
+```typescript
+export default {
+  plugins: [
+    '@auto-engineer/frontend-implementer',
+    // ... other plugins
+  ],
+};
+```
+
+## Commands
+
+This plugin provides the following commands:
+
+- `implement:client` - Implement client-side code with AI assistance
+
+## What does this plugin do?
+
+The Frontend Implementer plugin uses AI capabilities to implement React applications, including components, pages, hooks, and business logic. It understands design systems, GraphQL schemas, and user experience requirements to create functional user interfaces.
+
+## Key Features
+
+### AI React Development
+
+- Generates functional React components from specifications
+- Implements custom hooks for state management and API interactions
+- Creates responsive layouts and interactive user interfaces
+- Integrates with design systems and component libraries
+
+### GraphQL Integration
+
+- Generates Apollo Client queries and mutations
+- Implements optimistic updates and error handling
+- Creates type-safe GraphQL operations
+- Handles loading states and data caching
+
+### Design System Awareness
+
+- Uses imported design tokens and components consistently
+- Follows established design patterns and UI conventions
+- Implements accessibility standards and best practices
+- Maintains visual consistency across the application
+
+### User Experience Focus
+
+- Implements intuitive user workflows and navigation
+- Handles edge cases and error scenarios gracefully
+- Creates responsive designs for mobile and desktop
+- Optimizes for performance and user experience
+
+## Implementation Patterns
+
+### Page Component Implementation
+
+The plugin creates complete page implementations:
+
+```typescript
+// Before (generated stub)
+export function OrderHistoryPage() {
+  // TODO: Implement order history display
+  return <div>Order History - Not implemented</div>;
+}
+
+// After (AI implementation)
+export function OrderHistoryPage() {
+  const { data, loading, error, refetch } = useOrderHistoryQuery({
+    variables: { customerId: useCurrentUser().id },
+    errorPolicy: 'partial'
+  });
+
+  const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);
+
+  if (loading) return <LoadingSpinner message="Loading your orders..." />;
+  if (error) return <ErrorMessage error={error} onRetry={refetch} />;
+
+  return (
+    <PageLayout title="Order History" breadcrumbs={[{ label: 'Orders', href: '/orders' }]}>
+      <div className="space-y-6">
+        <OrderFilters onFilterChange={handleFilterChange} />
+
+        {data?.orders.length === 0 ? (
+          <EmptyState
+            title="No orders found"
+            description="You haven't placed any orders yet."
+            action={<Button href="/products">Start Shopping</Button>}
+          />
+        ) : (
+          <OrderList
+            orders={data?.orders || []}
+            onSelectOrder={setSelectedOrder}
+          />
+        )}
+
+        {selectedOrder && (
+          <OrderDetailModal
+            order={selectedOrder}
+            isOpen={!!selectedOrder}
+            onClose={() => setSelectedOrder(null)}
+          />
+        )}
+      </div>
+    </PageLayout>
+  );
+}
+```
+
+### Custom Hook Implementation
+
+Creates reusable hooks for complex logic:
+
+```typescript
+// Implements data fetching and state management
+export function useOrderManagement() {
+  const [placeOrderMutation] = usePlaceOrderMutation();
+  const [cancelOrderMutation] = useCancelOrderMutation();
+  const [orders, setOrders] = useState<Order[]>([]);
+
+  const placeOrder = useCallback(
+    async (orderData: PlaceOrderInput) => {
+      try {
+        const result = await placeOrderMutation({
+          variables: { input: orderData },
+          optimisticResponse: {
+            placeOrder: {
+              __typename: 'Order',
+              id: `temp-${Date.now()}`,
+              status: OrderStatus.Pending,
+              ...orderData,
+            },
+          },
+          update: (cache, { data }) => {
+            if (data?.placeOrder) {
+              cache.modify({
+                fields: {
+                  orders: (existing = []) => [...existing, data.placeOrder],
+                },
+              });
+            }
+          },
+        });
+
+        return result.data?.placeOrder;
+      } catch (error) {
+        throw new OrderPlacementError('Failed to place order', error);
+      }
+    },
+    [placeOrderMutation],
+  );
+
+  const cancelOrder = useCallback(
+    async (orderId: string) => {
+      // Implementation with optimistic updates and error handling
+    },
+    [cancelOrderMutation],
+  );
+
+  return { placeOrder, cancelOrder, orders };
+}
+```
+
+### Component Implementation
+
+Creates feature-rich, accessible components:
+
+```typescript
+// Implements interactive components with full functionality
+export function ProductCard({ product, onAddToCart }: ProductCardProps) {
+  const [isAdding, setIsAdding] = useState(false);
+  const [imageError, setImageError] = useState(false);
+  const { addToast } = useToast();
+
+  const handleAddToCart = async () => {
+    setIsAdding(true);
+    try {
+      await onAddToCart(product.id);
+      addToast({
+        type: 'success',
+        message: `${product.name} added to cart`
+      });
+    } catch (error) {
+      addToast({
+        type: 'error',
+        message: 'Failed to add item to cart'
+      });
+    } finally {
+      setIsAdding(false);
+    }
+  };
+
+  return (
+    <Card className="group hover:shadow-lg transition-shadow">
+      <CardContent className="p-0">
+        {!imageError ? (
+          <img
+            src={product.imageUrl}
+            alt={product.name}
+            className="w-full h-48 object-cover rounded-t-lg"
+            onError={() => setImageError(true)}
+          />
+        ) : (
+          <div className="w-full h-48 bg-gray-100 flex items-center justify-center rounded-t-lg">
+            <ImageIcon className="text-gray-400" size={48} />
+          </div>
+        )}
+
+        <div className="p-4">
+          <h3 className="font-semibold text-lg mb-2">{product.name}</h3>
+          <p className="text-gray-600 text-sm mb-3 line-clamp-2">
+            {product.description}
+          </p>
+
+          <div className="flex justify-between items-center">
+            <span className="text-xl font-bold text-primary">
+              ${product.price.toFixed(2)}
+            </span>
+
+            <Button
+              onClick={handleAddToCart}
+              disabled={isAdding || !product.inStock}
+              className="min-w-24"
+            >
+              {isAdding ? (
+                <Spinner size="sm" />
+              ) : !product.inStock ? (
+                'Out of Stock'
+              ) : (
+                'Add to Cart'
+              )}
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+## Configuration Options
+
+Customize implementation behavior:
+
+```typescript
+// auto.config.ts
+export default {
+  plugins: [
+    [
+      '@auto-engineer/frontend-implementer',
+      {
+        // AI model configuration
+        model: 'claude-3-sonnet',
+
+        // Framework preferences
+        framework: 'react',
+        stateManagement: 'apollo-client',
+
+        // UI library integration
+        designSystem: 'shadcn/ui',
+        iconLibrary: 'lucide-react',
+
+        // Implementation preferences
+        includeAccessibility: true,
+        includeAnimations: true,
+        includeErrorBoundaries: true,
+
+        // Testing
+        generateTests: true,
+        testingLibrary: 'testing-library',
+      },
+    ],
+  ],
+};
+```
+
+## Features
+
+### Responsive Design Implementation
+
+- Mobile-first approach with responsive breakpoints
+- Touch-friendly interactions for mobile devices
+- Optimized layouts for different screen sizes
+- Progressive enhancement patterns
+
+### Accessibility (a11y) Integration
+
+- ARIA labels and roles for screen readers
+- Keyboard navigation support
+- Color contrast compliance
+- Focus management and visual indicators
+
+### Performance Optimization
+
+- Lazy loading for images and components
+- Code splitting for optimal bundle sizes
+- Memoization for expensive computations
+- Efficient re-rendering patterns
+
+### Error Handling
+
+- Comprehensive error boundaries
+- User-friendly error messages
+- Retry mechanisms for failed operations
+- Graceful degradation patterns
+
+## Integration with Other Plugins
+
+Works with the Auto Engineer ecosystem:
+
+- **@auto-engineer/frontend-generator-react-graphql**: Implements generated component scaffolds
+- **@auto-engineer/design-system-importer**: Uses imported design tokens and components
+- **@auto-engineer/frontend-checks**: Validates implementations pass tests and type checking
+- **@auto-engineer/information-architect**: Uses IA specifications for navigation and content structure
+
+## Quality Assurance
+
+Ensures high-quality implementations through:
+
+- **TypeScript Compliance**: Full type safety and IntelliSense support
+- **Component Testing**: Comprehensive test coverage for user interactions
+- **Accessibility Auditing**: WCAG compliance and screen reader compatibility
+- **Performance Monitoring**: Identifies and resolves performance bottlenecks
+- **Code Review**: AI-powered review for best practices and patterns
+
+## Advanced Features
+
+### Context-Aware Implementation
+
+The AI understands:
+
+- Existing design patterns and component structure
+- GraphQL schema and available operations
+- Design system tokens and component props
+- User experience requirements and workflows
+- Performance considerations and optimization opportunities
+
+### Progressive Implementation
+
+- Implements core functionality first
+- Adds advanced features incrementally
+- Supports partial implementations and manual refinements
+- Adapts to user feedback and requirements changes
+
+The Frontend Implementer plugin transforms UI specifications and design requirements into functional React applications, accelerating frontend development while maintaining quality and consistency.

package/dist/src/agent-cli.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env tsx
+export {};
+//# sourceMappingURL=agent-cli.d.ts.map

package/dist/src/agent-cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-cli.d.ts","sourceRoot":"","sources":["../../src/agent-cli.ts"],"names":[],"mappings":""}

package/dist/src/agent-cli.js

@@ -0,0 +1,12 @@
+#!/usr/bin/env tsx
+import { runAIAgent } from './agent';
+const [, , projectDir, iaSchemeDir, designSystemPath] = process.argv;
+if (!projectDir) {
+    console.error('Usage: agent-cli <project-directory> <ia-scheme-directory>');
+    process.exit(1);
+}
+runAIAgent(projectDir, iaSchemeDir, designSystemPath, []).catch((err) => {
+    console.error('Error running AI agent:', err);
+    process.exit(1);
+});
+//# sourceMappingURL=agent-cli.js.map

package/dist/src/agent-cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-cli.js","sourceRoot":"","sources":["../../src/agent-cli.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,MAAM,CAAC,EAAE,AAAD,EAAG,UAAU,EAAE,WAAW,EAAE,gBAAgB,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;AAErE,IAAI,CAAC,UAAU,EAAE,CAAC;IAChB,OAAO,CAAC,KAAK,CAAC,4DAA4D,CAAC,CAAC;IAC5E,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAClB,CAAC;AAED,UAAU,CAAC,UAAU,EAAE,WAAW,EAAE,gBAAgB,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;IACtE,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,GAAG,CAAC,CAAC;IAC9C,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAClB,CAAC,CAAC,CAAC"}

package/dist/src/agent.d.ts

@@ -0,0 +1,54 @@
+export declare function callAI(prompt: string, options?: {
+    temperature?: number;
+    maxTokens?: number;
+}): Promise<any>;
+interface Scheme {
+    generatedComponents?: {
+        type: string;
+        items?: Record<string, unknown>;
+    }[];
+    atoms?: {
+        description?: string;
+        items?: Record<string, unknown>;
+    };
+    molecules?: {
+        description?: string;
+        items?: Record<string, unknown>;
+    };
+    organisms?: {
+        description?: string;
+        items?: Record<string, unknown>;
+    };
+    pages?: {
+        description?: string;
+        items?: Record<string, {
+            route: string;
+            description: string;
+            layout?: unknown;
+            navigation?: unknown;
+            [key: string]: unknown;
+        }>;
+    };
+}
+interface ProjectContext {
+    scheme: Scheme | undefined;
+    files: string[];
+    atoms: {
+        name: string;
+        props: {
+            name: string;
+            type: string;
+        }[];
+    }[];
+    keyFileContents: Record<string, string>;
+    fileTreeSummary: string[];
+    graphqlOperations: Record<string, string>;
+    userPreferences: string;
+    theme: string;
+    failures: string[];
+}
+export declare function loadScheme(iaSchemeDir: string): Promise<Scheme | undefined>;
+export declare function getProjectContext(projectDir: string, iaSchemeDir: string, userPreferences: string, designSystem: string, failures: string[]): Promise<ProjectContext>;
+export declare function runAIAgent(projectDir: string, iaSchemeDir: string, designSystemPath: string, failures: string[]): Promise<void>;
+export {};
+//# sourceMappingURL=agent.d.ts.map

package/dist/src/agent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent.d.ts","sourceRoot":"","sources":["../../src/agent.ts"],"names":[],"mappings":"AAqHA,wBAAsB,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,gBAOlG;AAGD,UAAU,MAAM;IACd,mBAAmB,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,EAAE,CAAC;IAC1E,KAAK,CAAC,EAAE;QACN,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACjC,CAAC;IACF,SAAS,CAAC,EAAE;QACV,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACjC,CAAC;IACF,SAAS,CAAC,EAAE;QACV,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACjC,CAAC;IACF,KAAK,CAAC,EAAE;QACN,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,KAAK,CAAC,EAAE,MAAM,CACZ,MAAM,EACN;YACE,KAAK,EAAE,MAAM,CAAC;YACd,WAAW,EAAE,MAAM,CAAC;YACpB,MAAM,CAAC,EAAE,OAAO,CAAC;YACjB,UAAU,CAAC,EAAE,OAAO,CAAC;YACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CACF,CAAC;KACH,CAAC;CACH;AAED,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,EAAE,CAAA;KAAE,EAAE,CAAC;IACnE,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB;AAGD,wBAAsB,UAAU,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAuBjF;AA0ED,wBAAsB,iBAAiB,CACrC,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,eAAe,EAAE,MAAM,EACvB,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,MAAM,EAAE,GACjB,OAAO,CAAC,cAAc,CAAC,CAiCzB;AA+gBD,wBAAsB,UAAU,CAC9B,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,gBAAgB,EAAE,MAAM,EACxB,QAAQ,EAAE,MAAM,EAAE,iBA2CnB"}