Implement Phase 6 website wizard with validation and responsive UI - #4
Merged
Merged
Conversation
…roject and framework
… and state management
- Added Extras step UI to manage Docker setup for PostgreSQL development. - Implemented Docker selector with metadata-driven options and validation. - Created Preview step to display selected stack summary, dependencies, scripts, environment variables, and generated file tree. - Introduced new components for displaying dependencies, environment variables, scripts, and file tree in the Preview step. - Integrated builder preview logic to derive dependencies and scripts from the generation plan. - Updated progress tracker with completion notes for Steps 8 and 9.
- Added Download step UI to the wizard, displaying project name, package manager, and stack summary. - Created a typed API client for POST /api/generate to handle project generation requests. - Implemented zip creation functionality using jszip, ensuring safe file paths and proper encoding. - Triggered browser download of the generated zip file after successful project generation. - Added loading, success, and error states to the download process. - Included client-side validation before API calls to prevent invalid configurations. - Updated tests for the API client and zip creation logic to ensure correctness and safety. - Added relevant types for API responses and project files.
- Updated various components to improve text wrapping and responsiveness across the wizard steps. - Ensured that project names and selected options are displayed correctly without truncation. - Added new tests to validate the wizard's functionality and ensure compliance with the defined schema. - Created a new verification step to confirm the complete functionality of the website MVP. - Documented changes and progress in the progress tracker.
…verification tests
There was a problem hiding this comment.
Pull request overview
Implements the Phase 6 website “project builder” wizard in apps/web, including schema-backed validation, generator-backed preview data, a server-side generate API route, and a client-side ZIP download flow.
Changes:
- Added builder wizard shell + step UIs, driven by
@launchkit/schemavalidation/metadata. - Added generator-backed preview computation and a
POST /api/generateroute that validates config + returns generated files safely. - Added browser ZIP creation/download (JSZip) and Vitest coverage for the Phase 6 contract, API behavior, and ZIP safety.
Reviewed changes
Copilot reviewed 52 out of 53 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| package-lock.json | Adds workspace dependencies (schema/generator) and JSZip transitive deps. |
| memory.md | Updates project memory log for Phase 6 Step 12 status and verification notes. |
| apps/web/package.json | Adds @launchkit/schema, @launchkit/generator, JSZip, and Vitest test script. |
| apps/web/lib/download/create-project-zip.ts | Creates ZIP blobs from generated project responses with path safety checks. |
| apps/web/lib/download/create-project-zip.test.ts | Tests ZIP structure, base64 handling, and unsafe path rejection. |
| apps/web/lib/builder/validation.ts | Centralizes schema + compatibility validation and per-step validation helpers. |
| apps/web/lib/builder/steps.ts | Defines the 9-step wizard order and labels used by the UI. |
| apps/web/lib/builder/preview.ts | Builds preview data from generator planning + schema metadata labels. |
| apps/web/lib/builder/phase-6-verification.test.ts | Contract-style tests for step order, supported options, validation, and preview contents. |
| apps/web/lib/builder/builder-state.ts | Defines builder state and patch-based updates around LaunchKitConfig. |
| apps/web/lib/api/types.ts | Adds typed request/response shapes for API client + route usage. |
| apps/web/lib/api/template-loader.ts | Implements a server-side template loader that reads monorepo templates for generation. |
| apps/web/lib/api/response.ts | Adds small helpers for consistent JSON + JSON error responses. |
| apps/web/lib/api/generate.ts | Implements request parsing/validation, generator invocation, and safe serialization for /api/generate. |
| apps/web/lib/api/generate.test.ts | Tests API helpers: valid/invalid/incompatible configs, size limits, and safety behaviors. |
| apps/web/lib/api/client.ts | Adds a typed browser client for POST /api/generate with structured errors. |
| apps/web/lib/api/client.test.ts | Tests client success and structured error behavior via stubbed fetch. |
| apps/web/components/builder/wizard-step-panel.tsx | Step container UI with consistent header layout and placeholder support. |
| apps/web/components/builder/wizard-progress.tsx | Responsive progress UI for step navigation context. |
| apps/web/components/builder/wizard-navigation.tsx | Back/Next controls with disabled states and responsive layout. |
| apps/web/components/builder/steps/project-step.tsx | Project name + package manager selection UI with validation feedback. |
| apps/web/components/builder/steps/framework-step.tsx | Fixed MVP “foundation” display for framework/language/router/structure. |
| apps/web/components/builder/steps/styling-ui-step.tsx | Tailwind fixed + shadcn/none selection UI with validation display. |
| apps/web/components/builder/steps/database-step.tsx | Database selection UI with dependent resets for ORM/Docker on “none”. |
| apps/web/components/builder/steps/orm-step.tsx | ORM selection UI with Prisma disabled unless PostgreSQL is selected. |
| apps/web/components/builder/steps/auth-step.tsx | Auth selection UI with scaffold messaging for Auth.js credentials. |
| apps/web/components/builder/steps/extras-step.tsx | Docker selection UI with PostgreSQL Docker disabled unless PostgreSQL is selected. |
| apps/web/components/builder/steps/preview-step.tsx | Preview step UI rendering stack, deps, scripts, env vars, and file tree. |
| apps/web/components/builder/steps/download-step.tsx | Download step that calls API, zips response, and triggers browser download. |
| apps/web/components/builder/preview/stack-summary.tsx | Stack summary preview section. |
| apps/web/components/builder/preview/dependency-list.tsx | Dependency/devDependency list preview section. |
| apps/web/components/builder/preview/script-list.tsx | Script list preview section with safe horizontal scrolling for commands. |
| apps/web/components/builder/preview/env-var-list.tsx | Env var preview section with required indicators and descriptions. |
| apps/web/components/builder/preview/file-tree-preview.tsx | File tree formatter and preview rendering in monospace block. |
| apps/web/components/builder/download/download-button.tsx | Download button with generating state. |
| apps/web/components/builder/download/download-status.tsx | Status/alert rendering for download flow. |
| apps/web/components/builder/builder-shell.tsx | Overall wizard orchestration: state, validation gates, and responsive layout. |
| apps/web/app/page.tsx | Swaps landing placeholder for the builder shell. |
| apps/web/app/layout.tsx | Updates site metadata to LaunchKit-specific title/description. |
| apps/web/app/api/generate/route.ts | Next.js route handlers wiring to the shared generate helper. |
| .agents/prompts/phase-06/step-1.md | Adds Phase 6 Step 1 agent prompt documentation. |
| .agents/prompts/phase-06/step-2.md | Adds Phase 6 Step 2 agent prompt documentation. |
| .agents/prompts/phase-06/step-3.md | Adds Phase 6 Step 3 agent prompt documentation. |
| .agents/prompts/phase-06/step-4.md | Adds Phase 6 Step 4 agent prompt documentation. |
| .agents/prompts/phase-06/step-5.md | Adds Phase 6 Step 5 agent prompt documentation. |
| .agents/prompts/phase-06/step-6.md | Adds Phase 6 Step 6 agent prompt documentation. |
| .agents/prompts/phase-06/step-7.md | Adds Phase 6 Step 7 agent prompt documentation. |
| .agents/prompts/phase-06/step-8.md | Adds Phase 6 Step 8 agent prompt documentation. |
| .agents/prompts/phase-06/step-9.md | Adds Phase 6 Step 9 agent prompt documentation. |
| .agents/prompts/phase-06/step-10.md | Adds Phase 6 Step 10 agent prompt documentation. |
| .agents/prompts/phase-06/step-11.md | Adds Phase 6 Step 11 agent prompt documentation. |
| .agents/prompts/phase-06/step-12.md | Adds Phase 6 Step 12 agent prompt documentation. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| className="flex min-w-0 items-start justify-between gap-4 border-b border-border pb-3 last:border-b-0 last:pb-0" | ||
| > | ||
| <dt className="text-sm text-muted-foreground">{label}</dt> | ||
| <dd className="max-w-48 rounded-md bg-muted px-2 py-1 text-right font-mono text-xs text-foreground wrap-break-word"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.