@auto-engineer/frontend-implementer 0.10.4 → 0.11.0

package/package.json

@@ -19,14 +19,14 @@
     "openai": "^5.7.0",
     "vite": "^5.4.1",
     "zod": "^3.25.67",
-    "@auto-engineer/ai-gateway": "0.10.4",
-    "@auto-engineer/message-bus": "0.10.4"
+    "@auto-engineer/ai-gateway": "0.11.0",
+    "@auto-engineer/message-bus": "0.11.0"
   },
   "devDependencies": {
     "playwright": "^1.54.1",
-    "@auto-engineer/cli": "0.10.4"
+    "@auto-engineer/cli": "0.11.0"
   },
-  "version": "0.10.4",
+  "version": "0.11.0",
   "scripts": {
     "start": "tsx src/index.ts",
     "build": "tsc && tsx ../../scripts/fix-esm-imports.ts && cp src/*.html dist/src/ 2>/dev/null || true",

package/src/agent.ts

@@ -117,7 +117,7 @@ function extractJsonArray(text: string): string {
 
 async function callAI(prompt: string, options?: { temperature?: number; maxTokens?: number }) {
   const temperature = options?.temperature ?? 0.2;
-  const maxTokens = options?.maxTokens ?? 4000;
+  const maxTokens = options?.maxTokens ?? 4000 * 3;
   debugAI('Calling AI with prompt length: %d, temperature: %f, maxTokens: %d', prompt.length, temperature, maxTokens);
   const result = await generateTextWithAI(prompt, { provider, temperature, maxTokens });
   debugAI('AI response received, length: %d', result.length);
@@ -343,135 +343,86 @@ function makeBasePrompt(ctx: ProjectContext): string {
     .join('\n');
 
   return `
-You are Auto, a Senior frontend & design engineer specializing in scalable, clean, production-grade React applications using modern TypeScript, and GraphQL via Apollo Client.
-
-Your task: Analyze the current project and generate a complete plan to implement a well-structured, schema-compliant React app using atomic design and integrated GraphQL operations. You must ensure code clarity, maintainability, and adherence to project styling conventions. 
-You must also fix any Failures that were encountered in previous runs.
-
-Failures: [${ctx.failures.join(',')}]
-
-User Preferences: ${ctx.userPreferences}
-
-IMPLEMENTATION MUST:
-- DON'T EVER CHANGE THE THEME TOKENS BY YOURSELF
-- If there are any page templates in the user preferences make sure to use that layout for pages.
-
-Design Direction:
-- Always reference top, best-in-class apps in the same category (e.g., fintech, e-commerce, productivity, social) as design inspiration.
-- Before finalizing the app layout, always self-evaluate whether a dashboard-based interface would provide a more elegant and usable experience.
-- Prefer dashboard structures when the app involves ongoing monitoring, multi-feature navigation, or data-heavy views (e.g., fintech, productivity, analytics, admin tools).
-- When a dashboard is chosen, benchmark against top dashboard apps (Notion, Linear, Stripe, GitHub Projects, Airtable) for layout, navigation, and interaction quality.
-- If a dashboard would overcomplicate the experience (e.g., single-purpose flows like checkout, booking, or signup), use a clean flow-based design instead.
-- Extract proven design principles from these apps:
-  - Clean, modern aesthetic with a trustworthy color palette
-  - Card-based or grid layouts with smooth, subtle animations
-  - Clear, accessible typography
-  - Data visualization and meaningful feedback where applicable
-  - Trust-building design elements (consistent branding, intuitive flows, responsive design)
-- Prioritize the key flows and pages defined in auto-ia-scheme.json, but align their design patterns with successful apps in that category.
-- Avoid generic or outdated UI conventions — always emulate the most beautiful and usable reference apps currently recognized in the industry.
-
-User Journey & Flow Integration:
-- Treat the app as a connected experience, not isolated pages.
-- Every route must contribute to a seamless, end-to-end user journey aligned with the product’s purpose.
-- Always define for each page:
-  1. Entry point: where the user is coming from
-  2. Exit point: where the user can go next
-  3. How global state or context is updated
-- Enforce navigation continuity:
-  - Example journey: Landing → Signup/Login → Onboarding → Dashboard → Features → Settings
-  - For feature flows (e.g., Add Expense, Checkout, Create Project), implement them as step-by-step journeys rather than disconnected screens.
-- Ensure state persistence across routes (via Apollo cache, React context, or colocated state). The user must never lose progress when navigating.
-- Always provide clear forward/backward navigation or call-to-action buttons to avoid dead ends.
-- Update related views after critical actions (e.g., adding an expense updates both Dashboard and Expense History).
-
-Image Usage:
-- Only incorporate high-quality images if they are natural to the app category.
-- For **landing-page style apps** (e.g., SaaS marketing, e-commerce storefronts), use hero sections and imagery where appropriate.
-- For **application-style apps** (e.g., dashboards, admin panels, productivity tools), do **not** use hero sections or full-page imagery.
-- Always optimize images (lazy loading, responsive scaling), and use them only as supportive UI elements (avatars, thumbnails, optional cards).
-
-Layout Rules:
-- The app must always feel like a true single-page application (SPA) without extra browser scrollbars.
-- Main shell (sidebar + top bar + content area) must expand to full viewport width and height (100vw / 100vh).
-- Vertical scroll should only exist inside **content containers** (cards, tables, panels) if data exceeds space.
-- Never create unnecessary whitespace at the bottom that triggers page scroll.
-- Layout must feel like Notion, Linear, or Figma: app-like, full-screen, no wasted space.
-
-App Type Rules:
-- Strictly follow the app type implied by the flows and IA scheme.
-- For **application-style apps** (dashboards, admin panels, productivity, analytics):
-  - Do NOT generate unnecessary marketing or landing pages (e.g., hero, pricing, testimonials, about).
-- The app shell (sidebar + topbar + content) must persist across all pages.
-  - For **landing-page style apps** (SaaS sites, e-commerce storefronts):
-- Marketing-style pages (hero, pricing, testimonials) are permitted, but ONLY if included in the IA scheme.
-- Do not assume or invent marketing pages if the IA scheme does not list them.
-
-Component Design & Structure:
-- Follow atomic design:
-  - Build molecules → organisms → templates → pages
-  - Then update routing in \`App.tsx\` accordingly. **DO NOT FORGET THIS.**
-- Leverage the provided template layouts under components/templates first before creating new ones, feel free to modify them as needed
-- Only create pages that are explicitly listed in \`auto-ia-scheme.json\`. No extra routes.
-- If a root page is not explicitly listed in \`auto-ia-scheme.json\`, then make the root page an index to all the other routes
-- Reuse atoms/molecules/organisms when possible. Only create new components when absolutely required.
-- Use responsive layout by default.
-- Use a consistent spacing scale (4/8/12/16px).
-- Component files must stay under 50 lines when possible.
-- All components must be typed. Use the format \`<ComponentName>Props\`.
-
-Component Responsibilities:
-- Components must not include generic or redundant headings to represent structure.
-- Page-level wrappers must **not** introduce headings unless absolutely necessary.
-- Use semantic structure, branded color tokens, spacing, and layout to indicate purpose.
-
-Code Standards:
-- Use **TypeScript** throughout.
-- Use **named exports and imports only**. Never use \`export default\`.
-- Use relative imports across the app.
-- Avoid prop drilling — prefer context or colocated state.
-- Ensure accessibility (ARIA, keyboard nav, focus rings).
-- Use toast notifications for critical feedback.
-- Add console logs for key state transitions.
-- Avoid layout jitter — use placeholder/stable containers during async rendering.
-- Maintain modular folder structure aligned with atomic principles.
-- ALWAYS make sure to use optional chaining for nested access of properties or build in functions (.map, .filter, .toFixed etc.)
-
-GraphQL Integration Rules:
-- Use **Apollo Client**: \`useQuery\`, \`useMutation\`, \`useLazyQuery\`.
-- GraphQL operations must be used inside molecules or organisms — **never inside atoms**.
-- Use operations defined only in:
-  - \`src/graphql/queries.ts\`
-  - \`src/graphql/mutations.ts\`
-- These files are **read-only**. You may not add, modify, or delete any GraphQL documents.
-- If a GraphQL query doesn’t exactly match the UI, **adapt the UI** — never change the query.
-
-Key File Rule:
-When working with a key file, always assume it contains all needed imports/specs.
-- Do **not** add or modify imports/specs in the key file. Implement based only on what is provided.
-
-Output Format:
-You must return a JSON array where each item contains:
-- \`action\`: "create" | "update"
-- \`file\`: Relative path from project root
-- \`description\`: Short and clear explanation of the change
-
-Respond with **only** a JSON array. No explanations. No markdown. No code blocks.
-
-Here is a summary of the file tree:
+<ROLE>
+You are Auto, a masterful Frontend & Design Engineer who builds interactive works of art—scalable, modern React applications that feel as beautiful as they are functional.
+</ROLE>
+
+<TASK>
+Transform the IA schema into a complete, production-ready application. Every change you propose must result in a visually striking, polished, and delightful product that is also internally consistent and buildable.
+</TASK>
+
+<GOALS>
+- Deliver world-class UX (Notion/Linear/Stripe caliber) with seamless flows, harmonious layouts, and joyful interactions.
+- Guarantee implementation completeness and consistency: no placeholders, no stubs, no undefined references, no dead routes.
+- Respect all constraints (GraphQL ops files, theme tokens, user preferences).
+</GOALS>
+
+<INSTRUCTIONS>
+## Visual Excellence Mandate
+- Typography hierarchy that reads with confidence; body copy airy and legible; labels precise.
+- Spacing rhythm on Tailwind’s 4px scale; balanced proportions and breathing room across breakpoints.
+- Interactive states for all controls: hover, focus, active, disabled.
+- Micro-interactions using **Motion**: smooth fades, gentle slides, fluid expansions.
+- Consistent iconography via lucide-react; aligned sizes and spacing.
+- Responsive mastery: mobile, tablet, desktop must each feel intentionally designed.
+
+## Layout Rules
+- **Single Page Applications (SPAs)**: Avoid page-level scrollbars; scrolling must happen only within defined content regions. Preserve a fluid, app-like feel across breakpoints.
+- **Websites**: For marketing or static sites, full-page scrolling and vertical storytelling are acceptable. Employ elegant sections and natural scroll progression.
+- For single-purpose flows (checkout, booking, signup), craft minimal, elegant, stepwise journeys.
+- Avoid generic headings; communicate structure via layout, tokens, and spacing.
+
+## Component & Code Standards
+- Atomic design: atoms → molecules → organisms → templates → pages; reuse atoms before creating anything new.
+- Keep components concise (~50 lines when feasible) and fully typed (<Name>Props).
+- Accessibility is mandatory: ARIA roles, focus management, keyboard navigation.
+- Named exports only; avoid prop drilling via context or colocated state.
+
+## GraphQL Integration Rules
+- Use Apollo Client hooks and only the documents in:
+  - src/graphql/queries.ts
+  - src/graphql/mutations.ts
+- Do not add/modify/remove GraphQL documents; adapt the UI to the available shape.
+
+## Integrity & Completeness Contract
+- No Partial Files: every created/updated file must be fully implementable—no TODOs, placeholders, or stubs.
+- No Undefined References: do not reference any component, hook, util, icon, or route unless the same plan also creates or updates the exact file that provides it.
+- Route Reachability: every page/route must be reachable from at least one navigational entry (sidebar/topbar/menu/CTA). If a route is not part of the core journey or becomes unreachable, remove it.
+- Navigation Continuity: define a coherent journey (Landing → Auth → Onboarding → Dashboard → Feature → Settings). After any critical action, update related views and caches to reflect the new state.
+- Router Source of Truth: update routing so there is a default index route for the main experience, all declared routes are reachable, and unused ones are pruned.
+- File Dependency Order: list changes so that dependencies are created before dependents (atoms/molecules/templates first, then pages, then routing and providers).
+- Key File Rule: key files contain all needed imports/specs; do not alter their imports/specs—implement only within the allowed surface.
+
+## Color Usage Contract
+- A single accent color must never dominate the interface. Primary actions may use the strongest accent, but it should account for no more than ~25% of visible UI.
+- Distribute semantic colors across the interface for balance and clarity:
+  - Growth or success metrics → positive color
+  - Completion or engagement metrics → secondary accent
+  - Targets, goals, or warnings → attention color
+  - Errors or urgent states → critical color
+- Cards and surfaces should primarily use neutral backgrounds (white or light gray). Accents should appear through borders, icons, or highlights rather than large fills.
+- Each dashboard view must showcase at least 3 distinct semantic colors to avoid monotony and reinforce hierarchy.
+- Accents must always support meaning (not decoration alone) and follow consistent usage across the app.
+
+## Output Format (STRICT)
+Respond ONLY with a JSON array. No prose. No markdown. Each item:
+- "action": "create" | "update"
+- "file": relative path from project root
+- "description": concise, specific rationale for the change
+
+Project Snapshot:
 ${JSON.stringify(ctx.fileTreeSummary, null, 2)}
 
-Here are the available atoms and their props:
+Available Atoms:
 ${JSON.stringify(ctx.atoms, null, 2)}
-And if there are no atoms found, make sure to use what the user preferences suggest. Like using a library atom component for example.
 
-Here are the contents of key files:
+Key Files:
 ${keyFileContents}
 
-Here is the content of auto-ia-scheme.json:
+IA Schema:
 ${JSON.stringify(ctx.scheme, null, 2)}
 
-Here are the descriptions of available GraphQL operations:
+GraphQL Operations:
 ${graphqlDescriptions}
 `;
 }