├── .husky
    └── pre-commit
├── postcss.config.js
├── .env.example
├── .prettierrc
├── next.config.js
├── .prettierignore
├── tailwind.config.ts
├── lib
    ├── questions.ts
    ├── testTypes.ts
    ├── genericQuestions.json
    ├── testCaseUtils.ts
    ├── settings.ts
    └── autoContext.ts
├── tsconfig.node.json
├── .eslintrc.json
├── .gitignore
├── .github
    └── workflows
    │   └── ci.yml
├── app
    ├── globals.css
    ├── api
    │   ├── classify
    │   │   └── route.ts
    │   ├── generate
    │   │   └── route.ts
    │   └── generate-questions
    │   │   └── route.ts
    ├── layout.tsx
    ├── settings
    │   └── page.tsx
    ├── questions
    │   └── page.tsx
    ├── page.tsx
    └── results
    │   └── page.tsx
├── tsconfig.json
├── package.json
├── components
    ├── SettingsProvider.tsx
    ├── ToastProvider.tsx
    ├── ConfirmDialogProvider.tsx
    ├── SavedTestsList.tsx
    └── BoilerplateModal.tsx
├── README.md
└── contributing.md


/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 | 
4 | npm run lint
5 | npm run format:check
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | # OpenAI API Key
2 | # Get your key at: https://platform.openai.com/account/api-keys
3 | OPENAI_API_KEY=sk_your_api_key_here


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": true,
3 |   "singleQuote": false,
4 |   "trailingComma": "es5",
5 |   "printWidth": 100,
6 |   "tabWidth": 2
7 | }
8 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   reactStrictMode: true,
4 | };
5 | 
6 | module.exports = nextConfig;
7 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | .next
 3 | out
 4 | coverage
 5 | dist
 6 | build
 7 | 
 8 | # lockfiles generated by package managers shouldn't be formatted
 9 | package-lock.json
10 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | const config: Config = {
 4 |   content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
 5 |   theme: {
 6 |     extend: {},
 7 |   },
 8 |   plugins: [],
 9 |   darkMode: "class",
10 | };
11 | export default config;
12 | 


--------------------------------------------------------------------------------
/lib/questions.ts:
--------------------------------------------------------------------------------
 1 | export const categoryDescriptions: Record<string, string> = {
 2 |   "backend-api": "REST API Endpoint",
 3 |   "frontend-component": "Frontend Component",
 4 |   database: "Database Operation",
 5 |   "library-function": "Library Function",
 6 |   integration: "System Integration",
 7 |   "data-pipeline": "Data Pipeline",
 8 |   other: "Other",
 9 | };
10 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "target": "ES2020",
 6 |     "useDefineForClassFields": true,
 7 |     "lib": ["ES2020"],
 8 |     "module": "ESNext",
 9 |     "moduleResolution": "bundler",
10 |     "allowImportingTsExtensions": true
11 |   },
12 |   "include": ["next.config.ts"]
13 | }
14 | 


--------------------------------------------------------------------------------
/lib/testTypes.ts:
--------------------------------------------------------------------------------
 1 | export enum TestType {
 2 |   Unit = "unit",
 3 |   Integration = "integration",
 4 |   Feature = "feature",
 5 |   Performance = "performance",
 6 |   Manual = "manual",
 7 | }
 8 | 
 9 | export const TEST_TYPE_VALUES = [
10 |   TestType.Unit,
11 |   TestType.Integration,
12 |   TestType.Feature,
13 |   TestType.Performance,
14 |   TestType.Manual,
15 | ] as const;
16 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["next/core-web-vitals", "prettier"],
 3 |   "plugins": ["@typescript-eslint"],
 4 |   "parser": "@typescript-eslint/parser",
 5 |   "parserOptions": {
 6 |     "project": "./tsconfig.json"
 7 |   },
 8 |   "rules": {
 9 |     "no-unused-vars": "off",
10 |     "@typescript-eslint/no-unused-vars": [
11 |       "error",
12 |       { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
13 |     ]
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/lib/genericQuestions.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   "What is the main purpose of this code?",
 3 |   "What are the primary inputs?",
 4 |   "What are the expected outputs?",
 5 |   "What error cases should be tested?",
 6 |   "What are the edge cases?",
 7 |   "What performance requirements exist?",
 8 |   "What security considerations matter?",
 9 |   "What dependencies are involved?",
10 |   "What validation rules apply?",
11 |   "What should not be tested?"
12 | ]
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | /node_modules
 3 | /.pnp
 4 | .pnp.js
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # next.js
10 | /.next/
11 | /out/
12 | 
13 | # production
14 | /build
15 | 
16 | # misc
17 | .DS_Store
18 | *.pem
19 | 
20 | # debug
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | # local env files
26 | .env.local
27 | .env.*.local
28 | 
29 | # vercel
30 | .vercel
31 | 
32 | # typescript
33 | *.tsbuildinfo
34 | next-env.d.ts
35 | .idea


--------------------------------------------------------------------------------
/lib/testCaseUtils.ts:
--------------------------------------------------------------------------------
 1 | import type { Settings } from "@/lib/settings";
 2 | 
 3 | interface TestCaseLike {
 4 |   testType: string;
 5 |   [key: string]: any;
 6 | }
 7 | 
 8 | export function filterTestCasesBySettings<T extends TestCaseLike>(
 9 |   testCases: T[],
10 |   settings: Settings
11 | ): T[] {
12 |   const disabledTypes = Object.entries(settings.disabledTestTypes)
13 |     .filter(([, disabled]) => disabled)
14 |     .map(([type]) => type);
15 | 
16 |   if (!disabledTypes.length) {
17 |     return testCases;
18 |   }
19 | 
20 |   return testCases.filter((testCase) => !disabledTypes.includes(testCase.testType));
21 | }
22 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: Lint and Format
 2 | 
 3 | on:
 4 |   pull_request:
 5 |     branches:
 6 |       - master
 7 | 
 8 | jobs:
 9 |   quality-checks:
10 |     runs-on: ubuntu-latest
11 | 
12 |     steps:
13 |       - name: Checkout repository
14 |         uses: actions/checkout@v4
15 | 
16 |       - name: Setup Node.js
17 |         uses: actions/setup-node@v4
18 |         with:
19 |           node-version: 18
20 |           cache: npm
21 | 
22 |       - name: Install dependencies
23 |         run: npm ci
24 | 
25 |       - name: Run linting
26 |         run: npm run lint
27 | 
28 |       - name: Run formatting check
29 |         run: npm run format:check
30 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | * {
 6 |   margin: 0;
 7 |   padding: 0;
 8 |   box-sizing: border-box;
 9 | }
10 | 
11 | html {
12 |   scroll-behavior: smooth;
13 | }
14 | 
15 | body {
16 |   font-family:
17 |     -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
18 |     "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
19 |   -webkit-font-smoothing: antialiased;
20 |   -moz-osx-font-smoothing: grayscale;
21 |   background-color: white;
22 |   color: #000;
23 |   transition:
24 |     background-color 0.3s,
25 |     color 0.3s;
26 | }
27 | 
28 | body.dark {
29 |   background-color: #0f172a;
30 |   color: #f1f5f9;
31 | }
32 | 
33 | * {
34 |   @apply transition-colors duration-300;
35 | }
36 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["es2020", "dom", "dom.iterable"],
 6 |     "module": "esnext",
 7 |     "skipLibCheck": true,
 8 |     "esModuleInterop": true,
 9 |     "allowSyntheticDefaultImports": true,
10 |     "strict": true,
11 |     "forceConsistentCasingInFileNames": true,
12 |     "noEmit": true,
13 |     "isolatedModules": true,
14 |     "moduleResolution": "node",
15 |     "resolveJsonModule": true,
16 |     "jsx": "preserve",
17 |     "paths": {
18 |       "@/*": ["./*"]
19 |     },
20 |     "allowJs": true,
21 |     "incremental": true,
22 |     "plugins": [
23 |       {
24 |         "name": "next"
25 |       }
26 |     ]
27 |   },
28 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
29 |   "exclude": ["node_modules"]
30 | }
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "assertify",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint",
10 |     "prepare": "husky install",
11 |     "format": "prettier --write .",
12 |     "format:check": "prettier --check ."
13 |   },
14 |   "dependencies": {
15 |     "next": "^14.1.0",
16 |     "openai": "^4.28.0",
17 |     "react": "^18.3.1",
18 |     "react-dom": "^18.3.1"
19 |   },
20 |   "devDependencies": {
21 |     "@types/node": "^20.10.6",
22 |     "@types/react": "^18.2.47",
23 |     "@types/react-dom": "^18.2.18",
24 |     "@typescript-eslint/eslint-plugin": "^8.48.0",
25 |     "@typescript-eslint/parser": "^8.48.0",
26 |     "autoprefixer": "^10.4.16",
27 |     "eslint": "^8.57.0",
28 |     "eslint-config-next": "^14.2.18",
29 |     "eslint-config-prettier": "^9.1.0",
30 |     "husky": "^9.1.7",
31 |     "postcss": "^8.4.32",
32 |     "prettier": "^3.6.2",
33 |     "tailwindcss": "^3.4.1",
34 |     "typescript": "^5.3.3"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/app/api/classify/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from "next/server";
 2 | import { OpenAI } from "openai";
 3 | 
 4 | export async function POST(req: NextRequest) {
 5 |   try {
 6 |     const { projectDescription, apiKey } = await req.json();
 7 | 
 8 |     if (!projectDescription) {
 9 |       return NextResponse.json({ error: "Project description required" }, { status: 400 });
10 |     }
11 | 
12 |     if (!apiKey) {
13 |       return NextResponse.json({ error: "API key required" }, { status: 400 });
14 |     }
15 | 
16 |     const openai = new OpenAI({
17 |       apiKey: apiKey,
18 |     });
19 | 
20 |     const categories = [
21 |       "backend-api",
22 |       "frontend-component",
23 |       "database",
24 |       "library-function",
25 |       "integration",
26 |       "data-pipeline",
27 |     ];
28 | 
29 |     const message = await openai.chat.completions.create({
30 |       model: "gpt-4",
31 |       messages: [
32 |         {
33 |           role: "system",
34 |           content: `You are a project classifier. Classify the given project description into one of these categories: ${categories.join(
35 |             ", "
36 |           )}. Respond with ONLY the category name, nothing else.`,
37 |         },
38 |         {
39 |           role: "user",
40 |           content: projectDescription,
41 |         },
42 |       ],
43 |     });
44 | 
45 |     let category = (message.choices[0].message.content || "other").trim().toLowerCase();
46 | 
47 |     if (!categories.includes(category)) {
48 |       category = "other";
49 |     }
50 | 
51 |     return NextResponse.json({ category });
52 |   } catch (error: any) {
53 |     console.error("Classification error:", error);
54 | 
55 |     if (error.status === 401) {
56 |       return NextResponse.json({ error: "Unauthorized: Invalid API key" }, { status: 401 });
57 |     }
58 | 
59 |     return NextResponse.json(
60 |       { error: "Classification failed", details: String(error.message) },
61 |       { status: 500 }
62 |     );
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/components/SettingsProvider.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import {
 4 |   createContext,
 5 |   useCallback,
 6 |   useContext,
 7 |   useEffect,
 8 |   useMemo,
 9 |   useState,
10 |   type PropsWithChildren,
11 | } from "react";
12 | import { SETTINGS_STORAGE_KEY, Settings, sanitizeSettings, defaultSettings } from "@/lib/settings";
13 | 
14 | interface SettingsContextValue {
15 |   settings: Settings;
16 |   updateSettings: (updates: Partial<Settings>) => void;
17 | }
18 | 
19 | const SettingsContext = createContext<SettingsContextValue | undefined>(undefined);
20 | 
21 | export function SettingsProvider({ children }: PropsWithChildren) {
22 |   const [settings, setSettings] = useState<Settings>(defaultSettings);
23 | 
24 |   useEffect(() => {
25 |     try {
26 |       const stored = localStorage.getItem(SETTINGS_STORAGE_KEY);
27 |       if (stored) {
28 |         const parsed = JSON.parse(stored);
29 |         setSettings(sanitizeSettings(parsed));
30 |       }
31 |     } catch (error) {
32 |       console.error("Failed to load settings: ", error);
33 |     }
34 |   }, []);
35 | 
36 |   const persist = useCallback((value: Settings) => {
37 |     try {
38 |       localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(value));
39 |     } catch (error) {
40 |       console.error("Failed to persist settings:", error);
41 |     }
42 |   }, []);
43 | 
44 |   const updateSettings = useCallback(
45 |     (updates: Partial<Settings>) => {
46 |       setSettings((prev) => {
47 |         const merged = sanitizeSettings({ ...prev, ...updates });
48 |         persist(merged);
49 |         return merged;
50 |       });
51 |     },
52 |     [persist]
53 |   );
54 | 
55 |   const value = useMemo(() => ({ settings, updateSettings }), [settings, updateSettings]);
56 | 
57 |   return <SettingsContext.Provider value={value}>{children}</SettingsContext.Provider>;
58 | }
59 | 
60 | export function useSettings(): SettingsContextValue {
61 |   const context = useContext(SettingsContext);
62 |   if (!context) {
63 |     throw new Error("useSettings must be used within a SettingsProvider");
64 |   }
65 |   return context;
66 | }
67 | 


--------------------------------------------------------------------------------
/lib/settings.ts:
--------------------------------------------------------------------------------
 1 | import { TestType, TEST_TYPE_VALUES } from "./testTypes";
 2 | 
 3 | export { TestType } from "./testTypes";
 4 | 
 5 | export const boilerplateOptions = [
 6 |   "vitest",
 7 |   "jest",
 8 |   "pytest",
 9 |   "unittest",
10 |   "junit",
11 |   "phpunit",
12 |   "rspec",
13 |   "mocha",
14 | ] as const;
15 | 
16 | export type BoilerplateKey = (typeof boilerplateOptions)[number];
17 | 
18 | export interface Settings {
19 |   defaultContext: string;
20 |   disabledTestTypes: Record<TestType, boolean>;
21 |   boilerplateSampleSize: number;
22 |   disabledBoilerplates: Record<BoilerplateKey, boolean>;
23 | }
24 | 
25 | export const SETTINGS_STORAGE_KEY = "tcg_settings";
26 | 
27 | export const testTypeOptions: TestType[] = [...TEST_TYPE_VALUES];
28 | 
29 | export const defaultSettings: Settings = {
30 |   defaultContext: "",
31 |   disabledTestTypes: {
32 |     [TestType.Unit]: false,
33 |     [TestType.Integration]: false,
34 |     [TestType.Feature]: false,
35 |     [TestType.Performance]: false,
36 |     [TestType.Manual]: false,
37 |   },
38 |   boilerplateSampleSize: 5,
39 |   disabledBoilerplates: boilerplateOptions.reduce(
40 |     (acc, key) => {
41 |       acc[key] = false;
42 |       return acc;
43 |     },
44 |     {} as Record<BoilerplateKey, boolean>
45 |   ),
46 | };
47 | 
48 | export function sanitizeSettings(partial?: Partial<Settings>): Settings {
49 |   const merged: Settings = {
50 |     defaultContext: partial?.defaultContext ?? defaultSettings.defaultContext,
51 |     boilerplateSampleSize:
52 |       typeof partial?.boilerplateSampleSize === "number"
53 |         ? partial.boilerplateSampleSize
54 |         : defaultSettings.boilerplateSampleSize,
55 |     disabledTestTypes: {
56 |       ...defaultSettings.disabledTestTypes,
57 |       ...(partial?.disabledTestTypes ?? {}),
58 |     },
59 |     disabledBoilerplates: {
60 |       ...defaultSettings.disabledBoilerplates,
61 |       ...(partial?.disabledBoilerplates ?? {}),
62 |     },
63 |   };
64 | 
65 |   merged.boilerplateSampleSize = Math.min(5, Math.max(1, Math.round(merged.boilerplateSampleSize)));
66 | 
67 |   return merged;
68 | }
69 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Assertify - AI-Powered Test Case Generation
 2 | 
 3 | Assertify is an intelligent testing assistant that analyzes your project description, asks clarifying questions, and generates comprehensive test suites across multiple testing styles and frameworks.
 4 | 
 5 | ## Features
 6 | 
 7 | - **AI project analysis** that classifies your work and requests extra context before any generation starts.
 8 | - **Dynamic question generation** with a resilient fallback list so you never get stuck when the API is unavailable.
 9 | - **Configurable settings** for persistent default context, disabling unwanted test types, and tailoring boilerplate sample sizes.
10 | - **Comprehensive test coverage** spanning unit, integration, feature, performance, and manual scenarios with prioritization metadata.
11 | - **Boilerplate code generation** for eight popular frameworks, respecting the frameworks you disable in settings.
12 | - **Flexible exports and saving** allowing JSON/CSV downloads plus local storage history.
13 | - **Responsive, themable UI** that works on desktop, tablet, and mobile with light/dark theme support.
14 | 
15 | ## Supported Testing Frameworks
16 | 
17 | - Vitest (JavaScript/TypeScript)
18 | - Jest (JavaScript/TypeScript)
19 | - Pytest (Python)
20 | - Unittest (Python)
21 | - JUnit (Java)
22 | - PHPUnit (PHP)
23 | - RSpec (Ruby)
24 | - Mocha (JavaScript)
25 | 
26 | ## Tech Stack
27 | 
28 | - Next.js 14
29 | - TypeScript
30 | - Tailwind CSS
31 | - OpenAI API
32 | 
33 | ## Installation
34 | 
35 | 1. Install dependencies: `npm install`
36 | 2. Copy the environment file: `cp .env.example .env.local`
37 | 3. Add your OpenAI API key to `.env.local`
38 | 4. Start the dev server: `npm run dev`
39 | 5. Open http://localhost:3000 in your browser
40 | 
41 | ## How to Use
42 | 
43 | 1. Provide your project description from the landing page; the app automatically classifies the category.
44 | 2. Answer the context questions (or skip) so the generator can tailor scenarios to your needs.
45 | 3. Review generated tests on the results page, filter by type or priority, and inspect the suggested testing strategy and risk areas.
46 | 4. Generate boilerplate code for your preferred frameworks or export the dataset as JSON/CSV.
47 | 5. Manage settings at `/settings` to define default context, disable frameworks, and control boilerplate sample sizes.
48 | 
49 | ## Future Improvements
50 | 
51 | - Allow selecting different LLM providers and models per generation so teams can optimize for latency or cost.
52 | - Offer more granular configuration for question generation (e.g., required question count, tone, or domain presets).
53 | - Optimize large test suites by streaming responses and deduplicating similar scenarios before persistence.
54 | - Provide deeper integrations with CI/CD by exporting ready-to-run suites or syncing with test management tools.
55 | 
56 | ## License
57 | 
58 | MIT
59 | 


--------------------------------------------------------------------------------
/contributing.md:
--------------------------------------------------------------------------------
 1 | # Contributing to Assertify
 2 | 
 3 | Thanks for considering a contribution to Assertify! This document outlines how to set up a local environment, the coding standards we follow, and what we expect from every pull request.
 4 | 
 5 | ## Ways to Contribute
 6 | - Report bugs or request features by opening an Issue with clear reproduction steps or user stories.
 7 | - Improve documentation, copy, or accessibility anywhere in the repo.
 8 | - Tackle open Issues that are tagged `good first issue`, `help wanted`, or any topic you feel comfortable owning.
 9 | 
10 | ## Prerequisites
11 | - **Node.js 18.x** and the matching npm release (the CI pipeline pins Node 18).
12 | - An OpenAI API key stored in `.env.local` so you can exercise AI-powered features locally.
13 | - `git` and GitHub access so you can fork and open pull requests.
14 | 
15 | ## Local Development
16 | 1. Fork the repository on GitHub and clone your fork.
17 | 2. Install dependencies: `npm install`.
18 | 3. Copy the example environment file: `cp .env.example .env.local`, then add your OpenAI API key.
19 | 4. Launch the dev server with `npm run dev` and visit `http://localhost:3000`.
20 | 5. Run `npm run build` before opening a pull request to ensure Next.js can compile.
21 | 
22 | ## Branching, Commits, and Style
23 | - Create feature branches off `master` using the pattern `type/short-description` (e.g., `feat/context-questions`).
24 | - Keep commits focused; prefer smaller commits that describe *why* a change exists.
25 | - Follow the existing TypeScript, React, and Tailwind conventions already present in the code you touch.
26 | 
27 | ## Quality Checks
28 | The GitHub Actions workflow (`.github/workflows/ci.yml`) runs linting and formatting on every pull request. Run the same commands locally before pushing:
29 | 
30 | ```bash
31 | npm run lint
32 | npm run format:check
33 | ```
34 | 
35 | Use `npm run format` to auto-format files. Please fix all warnings or explain why they cannot be resolved in the pull request description.
36 | 
37 | ## Pull Request Checklist
38 | - [ ] Explain the motivation and link the Issue being addressed.
39 | - [ ] Include screenshots or recordings for UI changes (desktop + mobile where relevant).
40 | - [ ] Update documentation (README, docs, or component stories) when behavior changes.
41 | - [ ] Ensure `npm run build`, `npm run lint`, and `npm run format:check` succeed locally.
42 | - [ ] Request at least one review and be responsive to feedback.
43 | 
44 | ## Reporting Issues
45 | When filing an Issue, include:
46 | - Expected vs. actual behavior and reproduction steps.
47 | - Environment details (OS, browser, Node version) if applicable.
48 | - Logs, stack traces, or screenshots that make the problem easier to diagnose.
49 | 
50 | ## Questions
51 | Unsure about the best approach or need clarification before opening a PR? Start a GitHub Discussion or comment on the related Issue so we can align on a solution before you invest significant time.
52 | 
53 | Happy testing!
54 | 


--------------------------------------------------------------------------------
/app/api/generate/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from "next/server";
 2 | import { OpenAI } from "openai";
 3 | 
 4 | export async function POST(req: NextRequest) {
 5 |   try {
 6 |     const { projectDescription, category, answers, apiKey } = await req.json();
 7 | 
 8 |     if (!projectDescription || !category || !answers) {
 9 |       return NextResponse.json({ error: "Missing required fields" }, { status: 400 });
10 |     }
11 | 
12 |     if (!apiKey) {
13 |       return NextResponse.json({ error: "API key required" }, { status: 400 });
14 |     }
15 | 
16 |     const openai = new OpenAI({
17 |       apiKey: apiKey,
18 |     });
19 | 
20 |     const prompt = `You are a QA expert. Generate comprehensive test cases for the following project:
21 | 
22 | Category: ${category}
23 | Description: ${projectDescription}
24 | 
25 | Context from developer:
26 | ${answers.map((a: string, i: number) => `${i + 1}. ${a}`).join("\n")}
27 | 
28 | Generate test cases in JSON format with this structure:
29 | {
30 |   "testCases": [
31 |     {
32 |       "testType": "unit|integration|feature|performance|manual",
33 |       "testName": "test name",
34 |       "description": "what is being tested",
35 |       "givenContext": "preconditions",
36 |       "testSteps": ["step 1", "step 2"],
37 |       "expectedOutcome": "what should happen",
38 |       "priority": "high|medium|low",
39 |       "notes": "additional notes"
40 |     }
41 |   ],
42 |   "testingStrategy": "overall strategy",
43 |   "riskAreas": ["risk 1", "risk 2"]
44 | }
45 | 
46 | Generate 12-15 diverse test cases covering:
47 | - Unit tests (3-4)
48 | - Integration tests (2-3)
49 | - Feature/acceptance tests (3-4)
50 | - Performance tests (1-2)
51 | - Manual tests (2-3)
52 | 
53 | Respond ONLY with valid JSON, no markdown or extra text.`;
54 | 
55 |     const message = await openai.chat.completions.create({
56 |       model: "gpt-4",
57 |       messages: [
58 |         {
59 |           role: "system",
60 |           content:
61 |             "You are a QA expert that generates test cases. Always respond with valid JSON only.",
62 |         },
63 |         {
64 |           role: "user",
65 |           content: prompt,
66 |         },
67 |       ],
68 |       temperature: 0.7,
69 |     });
70 | 
71 |     const content = message.choices[0].message.content || "{}";
72 | 
73 |     let parsedResponse;
74 |     try {
75 |       parsedResponse = JSON.parse(content);
76 |     } catch {
77 |       const jsonMatch = content.match(/\{[\s\S]*\}/);
78 |       if (jsonMatch) {
79 |         parsedResponse = JSON.parse(jsonMatch[0]);
80 |       } else {
81 |         throw new Error("Invalid JSON response");
82 |       }
83 |     }
84 | 
85 |     return NextResponse.json(parsedResponse);
86 |   } catch (error: any) {
87 |     console.error("Generation error:", error);
88 | 
89 |     if (error.status === 401) {
90 |       return NextResponse.json({ error: "Unauthorized: Invalid API key" }, { status: 401 });
91 |     }
92 | 
93 |     return NextResponse.json(
94 |       { error: "Test case generation failed", details: String(error.message) },
95 |       { status: 500 }
96 |     );
97 |   }
98 | }
99 | 


--------------------------------------------------------------------------------
/app/api/generate-questions/route.ts:
--------------------------------------------------------------------------------
  1 | import { NextRequest, NextResponse } from "next/server";
  2 | import { OpenAI } from "openai";
  3 | 
  4 | export async function POST(req: NextRequest) {
  5 |   try {
  6 |     const { projectDescription, category, apiKey } = await req.json();
  7 | 
  8 |     console.log("Received:", {
  9 |       projectDescription: !!projectDescription,
 10 |       category,
 11 |       apiKey: !!apiKey,
 12 |     });
 13 | 
 14 |     if (!projectDescription || !category) {
 15 |       return NextResponse.json(
 16 |         { error: "Missing projectDescription or category" },
 17 |         { status: 400 }
 18 |       );
 19 |     }
 20 | 
 21 |     if (!apiKey) {
 22 |       return NextResponse.json({ error: "API key required" }, { status: 400 });
 23 |     }
 24 | 
 25 |     const openai = new OpenAI({
 26 |       apiKey: apiKey,
 27 |     });
 28 | 
 29 |     const prompt = `You are a QA expert. Based on the following project description and category, generate exactly 10 specific, actionable questions that a developer should answer to help write comprehensive tests for this project.
 30 | 
 31 | Project Category: ${category}
 32 | Project Description: ${projectDescription}
 33 | 
 34 | Generate 10 questions that are:
 35 | - Specific to this project type
 36 | - Actionable and clear
 37 | - Focused on testing requirements
 38 | - Cover different aspects (inputs, outputs, errors, edge cases, performance, security, etc.)
 39 | 
 40 | Format your response as a JSON array of strings, like this:
 41 | ["Question 1?", "Question 2?", "Question 3?", ...]
 42 | 
 43 | Respond ONLY with the JSON array, no additional text or markdown.`;
 44 | 
 45 |     const message = await openai.chat.completions.create({
 46 |       model: "gpt-4",
 47 |       messages: [
 48 |         {
 49 |           role: "system",
 50 |           content:
 51 |             "You are a QA expert. Generate exactly 10 testing-focused questions. Respond ONLY with a JSON array of strings.",
 52 |         },
 53 |         {
 54 |           role: "user",
 55 |           content: prompt,
 56 |         },
 57 |       ],
 58 |       temperature: 0.7,
 59 |     });
 60 | 
 61 |     const content = message.choices[0].message.content || "[]";
 62 | 
 63 |     let questions;
 64 |     try {
 65 |       questions = JSON.parse(content);
 66 |       if (!Array.isArray(questions)) {
 67 |         throw new Error("Response is not an array");
 68 |       }
 69 |       questions = questions.slice(0, 10);
 70 |     } catch (parseError) {
 71 |       console.error("Failed to parse questions:", content, parseError);
 72 |       questions = [
 73 |         "What is the main purpose of this code?",
 74 |         "What are the primary inputs?",
 75 |         "What are the expected outputs?",
 76 |         "What error cases should be tested?",
 77 |         "What are the edge cases?",
 78 |         "What performance requirements exist?",
 79 |         "What security considerations matter?",
 80 |         "What dependencies are involved?",
 81 |         "What validation rules apply?",
 82 |         "What should not be tested?",
 83 |       ];
 84 |     }
 85 | 
 86 |     return NextResponse.json({ questions });
 87 |   } catch (error: any) {
 88 |     console.error("Generate questions error:", error);
 89 | 
 90 |     if (error.status === 401) {
 91 |       return NextResponse.json({ error: "Unauthorized: Invalid API key" }, { status: 401 });
 92 |     }
 93 | 
 94 |     return NextResponse.json(
 95 |       { error: "Failed to generate questions", details: String(error.message) },
 96 |       { status: 500 }
 97 |     );
 98 |   }
 99 | }
100 | 


--------------------------------------------------------------------------------
/components/ToastProvider.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import {
  4 |   createContext,
  5 |   useCallback,
  6 |   useContext,
  7 |   useMemo,
  8 |   useRef,
  9 |   useState,
 10 |   type PropsWithChildren,
 11 | } from "react";
 12 | 
 13 | interface ToastOptions {
 14 |   message: string;
 15 |   type?: "success" | "error" | "info";
 16 |   duration?: number;
 17 | }
 18 | 
 19 | interface Toast extends Required<Omit<ToastOptions, "duration">> {
 20 |   id: number;
 21 | }
 22 | 
 23 | interface ToastContextValue {
 24 |   addToast: (options: ToastOptions) => void;
 25 | }
 26 | 
 27 | const ToastContext = createContext<ToastContextValue | undefined>(undefined);
 28 | 
 29 | export function ToastProvider({ children }: PropsWithChildren) {
 30 |   const [toasts, setToasts] = useState<Toast[]>([]);
 31 |   const timeoutRefs = useRef<Map<number, ReturnType<typeof setTimeout>>>(new Map());
 32 | 
 33 |   const removeToast = useCallback((id: number) => {
 34 |     const timeoutId = timeoutRefs.current.get(id);
 35 |     if (timeoutId) {
 36 |       clearTimeout(timeoutId);
 37 |       timeoutRefs.current.delete(id);
 38 |     }
 39 |     setToasts((prev) => prev.filter((toast) => toast.id !== id));
 40 |   }, []);
 41 | 
 42 |   const addToast = useCallback(
 43 |     ({ message, type = "info", duration = 4000 }: ToastOptions) => {
 44 |       if (!message) {
 45 |         return;
 46 |       }
 47 | 
 48 |       const id = Date.now() + Math.random();
 49 |       setToasts((prev) => [...prev, { id, message, type }]);
 50 | 
 51 |       const timeoutId = setTimeout(() => {
 52 |         removeToast(id);
 53 |       }, duration);
 54 | 
 55 |       timeoutRefs.current.set(id, timeoutId);
 56 |     },
 57 |     [removeToast]
 58 |   );
 59 | 
 60 |   const contextValue = useMemo(() => ({ addToast }), [addToast]);
 61 | 
 62 |   const variantStyles = useMemo(
 63 |     () => ({
 64 |       success:
 65 |         "border-green-500/80 bg-white/95 dark:bg-slate-800/95 text-slate-900 dark:text-white",
 66 |       error: "border-red-500/80 bg-white/95 dark:bg-slate-800/95 text-slate-900 dark:text-white",
 67 |       info: "border-blue-500/80 bg-white/95 dark:bg-slate-800/95 text-slate-900 dark:text-white",
 68 |     }),
 69 |     []
 70 |   );
 71 | 
 72 |   const iconClasses: Record<Toast["type"], string> = {
 73 |     success: "fas fa-check-circle text-green-500",
 74 |     error: "fas fa-circle-xmark text-red-500",
 75 |     info: "fas fa-circle-info text-blue-500",
 76 |   };
 77 | 
 78 |   return (
 79 |     <ToastContext.Provider value={contextValue}>
 80 |       {children}
 81 |       <div
 82 |         className="fixed top-4 right-4 z-[9999] flex max-w-sm flex-col gap-3"
 83 |         aria-live="polite"
 84 |         aria-atomic="true"
 85 |       >
 86 |         {toasts.map((toast) => (
 87 |           <div
 88 |             key={toast.id}
 89 |             className={`flex items-start gap-3 rounded-xl border-l-4 p-4 shadow-2xl backdrop-blur transition-all duration-300 ${
 90 |               variantStyles[toast.type]
 91 |             }`}
 92 |           >
 93 |             <span className={`text-xl ${iconClasses[toast.type]}`}></span>
 94 |             <p className="text-sm leading-relaxed">{toast.message}</p>
 95 |             <button
 96 |               type="button"
 97 |               className="ml-auto text-slate-400 transition-colors hover:text-slate-700 dark:text-slate-500 dark:hover:text-white"
 98 |               onClick={() => removeToast(toast.id)}
 99 |               aria-label="Dismiss notification"
100 |             >
101 |               ✕
102 |             </button>
103 |           </div>
104 |         ))}
105 |       </div>
106 |     </ToastContext.Provider>
107 |   );
108 | }
109 | 
110 | export function useToast(): ToastContextValue {
111 |   const context = useContext(ToastContext);
112 | 
113 |   if (!context) {
114 |     throw new Error("useToast must be used within a ToastProvider");
115 |   }
116 | 
117 |   return context;
118 | }
119 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState, useEffect, type ReactNode } from "react";
  4 | import Link from "next/link";
  5 | import { ToastProvider } from "@/components/ToastProvider";
  6 | import { ConfirmDialogProvider } from "@/components/ConfirmDialogProvider";
  7 | import { SettingsProvider } from "@/components/SettingsProvider";
  8 | import "./globals.css";
  9 | 
 10 | export default function RootLayout({ children }: { children: ReactNode }) {
 11 |   const [isDark, setIsDark] = useState(false);
 12 |   const [mounted, setMounted] = useState(false);
 13 | 
 14 |   useEffect(() => {
 15 |     setMounted(true);
 16 |     const savedTheme = localStorage.getItem("theme");
 17 |     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 18 |     const shouldBeDark = savedTheme ? savedTheme === "dark" : prefersDark;
 19 | 
 20 |     setIsDark(shouldBeDark);
 21 |     if (shouldBeDark) {
 22 |       document.documentElement.classList.add("dark");
 23 |     }
 24 |   }, []);
 25 | 
 26 |   const toggleDarkMode = () => {
 27 |     const newIsDark = !isDark;
 28 |     setIsDark(newIsDark);
 29 |     localStorage.setItem("theme", newIsDark ? "dark" : "light");
 30 | 
 31 |     if (newIsDark) {
 32 |       document.documentElement.classList.add("dark");
 33 |     } else {
 34 |       document.documentElement.classList.remove("dark");
 35 |     }
 36 |   };
 37 | 
 38 |   if (!mounted) {
 39 |     return (
 40 |       <html lang="en">
 41 |         <head>
 42 |           <title>Test Case Generator</title>
 43 |           <meta name="description" content="AI-powered test case generator" />
 44 |           <meta name="viewport" content="width=device-width, initial-scale=1" />
 45 |           <link
 46 |             rel="stylesheet"
 47 |             href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
 48 |           />
 49 |         </head>
 50 |         <body>
 51 |           <div className="min-h-screen flex items-center justify-center">
 52 |             <div className="text-slate-600">Loading...</div>
 53 |           </div>
 54 |         </body>
 55 |       </html>
 56 |     );
 57 |   }
 58 | 
 59 |   return (
 60 |     <html lang="en" className={isDark ? "dark" : ""}>
 61 |       <head>
 62 |         <title>Test Case Generator</title>
 63 |         <meta name="description" content="AI-powered test case generator" />
 64 |         <meta name="viewport" content="width=device-width, initial-scale=1" />
 65 |         <link
 66 |           rel="stylesheet"
 67 |           href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
 68 |         />
 69 |       </head>
 70 |       <body>
 71 |         <ConfirmDialogProvider>
 72 |           <SettingsProvider>
 73 |             <ToastProvider>
 74 |               <div className="fixed top-4 right-4 z-50 flex flex-col gap-3">
 75 |                 <Link
 76 |                   href="/settings"
 77 |                   className="flex h-12 w-12 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 shadow-lg transition-colors hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700"
 78 |                   aria-label="Open settings"
 79 |                 >
 80 |                   <i className="fas fa-gear"></i>
 81 |                 </Link>
 82 |                 <button
 83 |                   onClick={toggleDarkMode}
 84 |                   className="flex h-12 w-12 items-center justify-center rounded-full border border-slate-200 bg-slate-200 text-slate-900 shadow-lg transition-colors hover:bg-slate-300 dark:border-slate-600 dark:bg-slate-700 dark:text-yellow-400 dark:hover:bg-slate-600"
 85 |                   title={isDark ? "Switch to light mode" : "Switch to dark mode"}
 86 |                   aria-label="Toggle dark mode"
 87 |                 >
 88 |                   {isDark ? (
 89 |                     <i className="fas fa-sun text-lg"></i>
 90 |                   ) : (
 91 |                     <i className="fas fa-moon text-lg"></i>
 92 |                   )}
 93 |                 </button>
 94 |               </div>
 95 | 
 96 |               {children}
 97 |             </ToastProvider>
 98 |           </SettingsProvider>
 99 |         </ConfirmDialogProvider>
100 |       </body>
101 |     </html>
102 |   );
103 | }
104 | 


--------------------------------------------------------------------------------
/components/ConfirmDialogProvider.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import {
  4 |   createContext,
  5 |   useCallback,
  6 |   useContext,
  7 |   useMemo,
  8 |   useRef,
  9 |   useState,
 10 |   type PropsWithChildren,
 11 | } from "react";
 12 | 
 13 | interface ConfirmDialogOptions {
 14 |   title: string;
 15 |   description?: string;
 16 |   confirmLabel?: string;
 17 |   cancelLabel?: string;
 18 |   variant?: "default" | "danger";
 19 | }
 20 | 
 21 | interface ConfirmDialogContextValue {
 22 |   confirm: (options: ConfirmDialogOptions) => Promise<boolean>;
 23 | }
 24 | 
 25 | interface DialogState extends ConfirmDialogOptions {
 26 |   open: boolean;
 27 | }
 28 | 
 29 | const defaultLabels = {
 30 |   confirmLabel: "Confirm",
 31 |   cancelLabel: "Cancel",
 32 | };
 33 | 
 34 | const ConfirmDialogContext = createContext<ConfirmDialogContextValue | undefined>(undefined);
 35 | 
 36 | export function ConfirmDialogProvider({ children }: PropsWithChildren) {
 37 |   const [dialogState, setDialogState] = useState<DialogState | null>(null);
 38 |   const resolverRef = useRef<(confirmed: boolean) => void>();
 39 | 
 40 |   const closeDialog = useCallback((confirmed: boolean) => {
 41 |     setDialogState(null);
 42 |     resolverRef.current?.(confirmed);
 43 |     resolverRef.current = undefined;
 44 |   }, []);
 45 | 
 46 |   const confirm = useCallback((options: ConfirmDialogOptions) => {
 47 |     return new Promise<boolean>((resolve) => {
 48 |       resolverRef.current = resolve;
 49 |       setDialogState({
 50 |         open: true,
 51 |         title: options.title,
 52 |         description: options.description,
 53 |         variant: options.variant || "default",
 54 |         confirmLabel: options.confirmLabel || defaultLabels.confirmLabel,
 55 |         cancelLabel: options.cancelLabel || defaultLabels.cancelLabel,
 56 |       });
 57 |     });
 58 |   }, []);
 59 | 
 60 |   const contextValue = useMemo(() => ({ confirm }), [confirm]);
 61 | 
 62 |   const variantStyles = useMemo(
 63 |     () => ({
 64 |       default: {
 65 |         confirm: "bg-blue-600 hover:bg-blue-700 text-white",
 66 |         icon: "text-blue-600",
 67 |       },
 68 |       danger: {
 69 |         confirm: "bg-red-600 hover:bg-red-700 text-white",
 70 |         icon: "text-red-600",
 71 |       },
 72 |     }),
 73 |     []
 74 |   );
 75 | 
 76 |   const activeVariant = dialogState?.variant || "default";
 77 | 
 78 |   return (
 79 |     <ConfirmDialogContext.Provider value={contextValue}>
 80 |       {children}
 81 |       {dialogState?.open ? (
 82 |         <div
 83 |           className="fixed inset-0 z-[1200] flex items-center justify-center bg-slate-900/60 px-4"
 84 |           role="dialog"
 85 |           aria-modal="true"
 86 |         >
 87 |           <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-2xl dark:bg-slate-800">
 88 |             <div className="flex items-start gap-3">
 89 |               <span className={`text-2xl ${variantStyles[activeVariant].icon}`}>
 90 |                 <i className="fas fa-circle-question"></i>
 91 |               </span>
 92 |               <div>
 93 |                 <h3 className="text-xl font-semibold text-slate-900 dark:text-white">
 94 |                   {dialogState.title}
 95 |                 </h3>
 96 |                 {dialogState.description && (
 97 |                   <p className="mt-2 text-sm text-slate-600 dark:text-slate-300">
 98 |                     {dialogState.description}
 99 |                   </p>
100 |                 )}
101 |               </div>
102 |             </div>
103 |             <div className="mt-6 flex justify-end gap-3">
104 |               <button
105 |                 type="button"
106 |                 className="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-700"
107 |                 onClick={() => closeDialog(false)}
108 |               >
109 |                 {dialogState.cancelLabel}
110 |               </button>
111 |               <button
112 |                 type="button"
113 |                 className={`rounded-lg px-4 py-2 text-sm font-semibold transition-colors ${variantStyles[activeVariant].confirm}`}
114 |                 onClick={() => closeDialog(true)}
115 |               >
116 |                 {dialogState.confirmLabel}
117 |               </button>
118 |             </div>
119 |           </div>
120 |         </div>
121 |       ) : null}
122 |     </ConfirmDialogContext.Provider>
123 |   );
124 | }
125 | 
126 | export function useConfirmDialog(): ConfirmDialogContextValue {
127 |   const context = useContext(ConfirmDialogContext);
128 | 
129 |   if (!context) {
130 |     throw new Error("useConfirmDialog must be used within a ConfirmDialogProvider");
131 |   }
132 | 
133 |   return context;
134 | }
135 | 


--------------------------------------------------------------------------------
/lib/autoContext.ts:
--------------------------------------------------------------------------------
 1 | import { categoryDescriptions } from "./questions";
 2 | 
 3 | const categoryHints: Record<string, string[]> = {
 4 |   "backend-api": [
 5 |     "Validate all HTTP methods, payload schemas, and authentication flows including success, validation, and authorization failures.",
 6 |     "Cover rate limiting, concurrency, idempotency of repeated requests, and graceful handling of upstream/downstream outages.",
 7 |     "Ensure error responses follow the contract (status codes + structured error bodies).",
 8 |     "Verify integration with the data layer including transaction rollback, pagination, and filtering logic.",
 9 |   ],
10 |   "frontend-component": [
11 |     "Exercise UI states: initial, loading, success, empty, and error across desktop and mobile breakpoints.",
12 |     "Validate accessibility (ARIA labels, keyboard navigation, focus rings) and visual contrast in light/dark themes.",
13 |     "Ensure form validation, inline feedback, and disabling/enabling of controls behaves correctly.",
14 |     "Confirm external API interactions are debounced, retried, and surfaced to the user appropriately.",
15 |   ],
16 |   database: [
17 |     "Test CRUD operations with transactional integrity, constraints, and cascading behavior.",
18 |     "Validate indexing, query performance, and plan for long-running analytical workloads.",
19 |     "Exercise migration/rollback scripts and ensure backward compatibility for existing data.",
20 |     "Check backup/restore procedures, failover replicas, and data retention policies.",
21 |   ],
22 |   "library-function": [
23 |     "Cover deterministic outputs, rounding/precision rules, and locale/timezone awareness where applicable.",
24 |     "Test invalid inputs, optional arguments, and default parameter handling.",
25 |     "Verify side effects, asynchronous flows, and integration with caller-supplied callbacks/promises.",
26 |     "Evaluate performance for large payloads and repeated invocations to catch regressions.",
27 |   ],
28 |   integration: [
29 |     "Exercise full end-to-end workflows spanning multiple services or queues.",
30 |     "Simulate upstream/downstream failures, retries, timeouts, and circuit breaker scenarios.",
31 |     "Validate data contracts, serialization formats, and schema evolution between systems.",
32 |     "Confirm monitoring/alerting signals fire when integrations degrade or drift.",
33 |   ],
34 |   "data-pipeline": [
35 |     "Cover ingestion of both happy-path and malformed records, ensuring data quality checks block bad data.",
36 |     "Test scheduling, batching vs. streaming paths, and idempotent reprocessing of historical runs.",
37 |     "Validate transformations, aggregations, and schema evolution as data moves through stages.",
38 |     "Ensure failure recovery, checkpointing, and alerting operate without data loss.",
39 |   ],
40 |   other: [
41 |     "Exercise core business flows plus negative, edge, and boundary cases.",
42 |     "Validate observability: structured logging, metrics, and tracing for key milestones.",
43 |     "Ensure resiliency to dependency outages, slow responses, and retry storms.",
44 |     "Cover cross-cutting concerns like security, performance, and accessibility relevant to the stack.",
45 |   ],
46 | };
47 | 
48 | export function buildAutoContext(
49 |   projectDescription: string,
50 |   category: string,
51 |   requirements?: string,
52 |   defaultContext?: string
53 | ): string[] {
54 |   const cleanDescription = projectDescription.trim() || "No additional description provided.";
55 |   const requirementContext = requirements?.trim()
56 |     ? `Key requirements: ${requirements.trim()}`
57 |     : null;
58 |   const globalContext = defaultContext?.trim()
59 |     ? `Global considerations: ${defaultContext.trim()}`
60 |     : null;
61 |   const readableCategory = categoryDescriptions[category] || categoryDescriptions.other;
62 | 
63 |   const normalizedCategory = categoryHints[category] ? category : "other";
64 | 
65 |   const baseContext = [
66 |     `Project summary: ${cleanDescription}`,
67 |     `System type: ${readableCategory}.`,
68 |     "Target outcome: deliver reliable, user-friendly functionality aligned with the described goals.",
69 |     "Assume modern authentication/authorization, data validation, and logging best practices are required.",
70 |     "Consider performance budgets, scalability, and graceful degradation under load spikes.",
71 |     "Plan for operational readiness: monitoring, alerting, and fallback behavior for partial outages.",
72 |   ];
73 | 
74 |   const insertIndex = 1;
75 |   const contextEntries = [requirementContext, globalContext].filter(Boolean) as string[];
76 |   if (contextEntries.length) {
77 |     baseContext.splice(insertIndex, 0, ...contextEntries);
78 |   }
79 | 
80 |   const combined = [...baseContext, ...categoryHints[normalizedCategory]];
81 | 
82 |   // Ensure we always return a consistent number of context items for the generator
83 |   return combined.slice(0, 10);
84 | }
85 | 


--------------------------------------------------------------------------------
/components/SavedTestsList.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState, useEffect } from "react";
  4 | import { useRouter } from "next/navigation";
  5 | import { useToast } from "@/components/ToastProvider";
  6 | import { useConfirmDialog } from "@/components/ConfirmDialogProvider";
  7 | 
  8 | interface SavedTest {
  9 |   id: string;
 10 |   projectDescription: string;
 11 |   category: string;
 12 |   timestamp: string;
 13 |   testCaseCount: number;
 14 | }
 15 | 
 16 | interface SavedTestsListProps {
 17 |   onLoadTest: (testId: string) => void;
 18 | }
 19 | 
 20 | export default function SavedTestsList({ onLoadTest }: SavedTestsListProps) {
 21 |   const [savedTests, setSavedTests] = useState<SavedTest[]>([]);
 22 |   const [showList, setShowList] = useState(false);
 23 |   const router = useRouter();
 24 |   const { addToast } = useToast();
 25 |   const { confirm } = useConfirmDialog();
 26 | 
 27 |   useEffect(() => {
 28 |     loadSavedTests();
 29 |   }, []);
 30 | 
 31 |   const loadSavedTests = () => {
 32 |     try {
 33 |       const saved = localStorage.getItem("savedTests");
 34 |       if (saved) {
 35 |         const tests = JSON.parse(saved);
 36 |         setSavedTests(
 37 |           tests.sort(
 38 |             (a: SavedTest, b: SavedTest) =>
 39 |               new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
 40 |           )
 41 |         );
 42 |       }
 43 |     } catch (error) {
 44 |       console.error("Error loading saved tests:", error);
 45 |     }
 46 |   };
 47 | 
 48 |   const handleLoadTest = (testId: string) => {
 49 |     try {
 50 |       const saved = localStorage.getItem(testId);
 51 |       if (saved) {
 52 |         const testData = JSON.parse(saved);
 53 |         // Restore the session storage with the saved data
 54 |         sessionStorage.setItem("projectDescription", testData.projectDescription);
 55 |         sessionStorage.setItem("category", testData.category);
 56 |         sessionStorage.setItem("testCases", JSON.stringify(testData.testCases));
 57 |         sessionStorage.setItem("testingStrategy", testData.testingStrategy);
 58 |         sessionStorage.setItem("riskAreas", JSON.stringify(testData.riskAreas));
 59 |         sessionStorage.setItem("currentTestId", testId);
 60 |         onLoadTest(testId);
 61 |         router.push("/results");
 62 |       }
 63 |     } catch (error) {
 64 |       console.error("Error loading test:", error);
 65 |       addToast({ message: "Failed to load test.", type: "error" });
 66 |     }
 67 |   };
 68 | 
 69 |   const handleDeleteTest = async (testId: string) => {
 70 |     const confirmed = await confirm({
 71 |       title: "Delete saved test?",
 72 |       description:
 73 |         "This test will be permanently removed from your saved list. This action cannot be undone.",
 74 |       confirmLabel: "Delete test",
 75 |       variant: "danger",
 76 |     });
 77 | 
 78 |     if (!confirmed) {
 79 |       return;
 80 |     }
 81 | 
 82 |     try {
 83 |       localStorage.removeItem(testId);
 84 |       const updated = savedTests.filter((test) => test.id !== testId);
 85 |       setSavedTests(updated);
 86 |       localStorage.setItem("savedTests", JSON.stringify(updated));
 87 |       addToast({ message: "Saved test deleted.", type: "success" });
 88 |     } catch (error) {
 89 |       console.error("Error deleting test:", error);
 90 |       addToast({ message: "Failed to delete test.", type: "error" });
 91 |     }
 92 |   };
 93 | 
 94 |   if (savedTests.length === 0) {
 95 |     return null;
 96 |   }
 97 | 
 98 |   return (
 99 |     <div className="mt-8 pt-8 border-t border-slate-200 dark:border-slate-700">
100 |       <button
101 |         onClick={() => setShowList(!showList)}
102 |         className="flex items-center gap-2 text-lg font-semibold text-slate-900 dark:text-white mb-4 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
103 |       >
104 |         <span className="text-xl">{showList ? "▼" : "▶"}</span>
105 |         <i className="fas fa-book"></i>
106 |         Saved Tests ({savedTests.length})
107 |       </button>
108 | 
109 |       {showList && (
110 |         <div className="space-y-3">
111 |           {savedTests.map((test) => (
112 |             <div
113 |               key={test.id}
114 |               className="bg-white dark:bg-slate-800 rounded-lg shadow p-4 border-l-4 border-blue-500 hover:shadow-lg transition-shadow"
115 |             >
116 |               <div className="flex justify-between items-start gap-4">
117 |                 <div className="flex-1 min-w-0">
118 |                   <h3
119 |                     className="font-semibold text-slate-900 dark:text-white mb-1 truncate"
120 |                     title={test.projectDescription}
121 |                   >
122 |                     {test.projectDescription}
123 |                   </h3>
124 |                   <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
125 |                     Category: <span className="font-medium">{test.category}</span>
126 |                   </p>
127 |                   <p className="text-xs text-slate-500 dark:text-slate-500">
128 |                     {test.testCaseCount} test cases •{" "}
129 |                     {new Date(test.timestamp).toLocaleDateString()} at{" "}
130 |                     {new Date(test.timestamp).toLocaleTimeString([], {
131 |                       hour: "2-digit",
132 |                       minute: "2-digit",
133 |                     })}
134 |                   </p>
135 |                 </div>
136 |                 <div className="flex gap-2 ml-4 flex-shrink-0">
137 |                   <button
138 |                     onClick={() => handleLoadTest(test.id)}
139 |                     className="px-3 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white text-xs rounded-lg font-medium transition-colors whitespace-nowrap flex items-center gap-1"
140 |                     title="Load this test"
141 |                   >
142 |                     <i className="fas fa-upload"></i>
143 |                     Load
144 |                   </button>
145 |                   <button
146 |                     onClick={() => handleDeleteTest(test.id)}
147 |                     className="px-3 py-2 bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 text-white text-xs rounded-lg font-medium transition-colors whitespace-nowrap flex items-center gap-1"
148 |                     title="Delete this test"
149 |                   >
150 |                     <i className="fas fa-trash"></i>
151 |                     Delete
152 |                   </button>
153 |                 </div>
154 |               </div>
155 |             </div>
156 |           ))}
157 |         </div>
158 |       )}
159 |     </div>
160 |   );
161 | }
162 | 


--------------------------------------------------------------------------------
/app/settings/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useEffect, useState } from "react";
  4 | import { useRouter } from "next/navigation";
  5 | import { useSettings } from "@/components/SettingsProvider";
  6 | import { useToast } from "@/components/ToastProvider";
  7 | import { boilerplateOptions, defaultSettings, testTypeOptions } from "@/lib/settings";
  8 | 
  9 | export default function SettingsPage() {
 10 |   const router = useRouter();
 11 |   const { settings, updateSettings } = useSettings();
 12 |   const { addToast } = useToast();
 13 |   const [formState, setFormState] = useState(settings);
 14 | 
 15 |   useEffect(() => {
 16 |     setFormState(settings);
 17 |   }, [settings]);
 18 | 
 19 |   const handleSave = () => {
 20 |     updateSettings(formState);
 21 |     addToast({ message: "Settings saved successfully.", type: "success" });
 22 |   };
 23 | 
 24 |   const handleReset = () => {
 25 |     updateSettings(defaultSettings);
 26 |     addToast({ message: "Settings reset to defaults.", type: "info" });
 27 |   };
 28 | 
 29 |   return (
 30 |     <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 px-4 py-10 dark:from-slate-900 dark:to-slate-800">
 31 |       <div className="mx-auto max-w-3xl">
 32 |         <button
 33 |           onClick={() => router.back()}
 34 |           className="mb-6 inline-flex items-center gap-2 text-sm font-medium text-blue-600 transition-colors hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
 35 |         >
 36 |           <i className="fas fa-arrow-left"></i>
 37 |           Back
 38 |         </button>
 39 | 
 40 |         <div className="rounded-3xl bg-white p-8 shadow-2xl dark:bg-slate-800">
 41 |           <div className="mb-8">
 42 |             <h1 className="text-3xl font-bold text-slate-900 dark:text-white">Settings</h1>
 43 |             <p className="text-sm text-slate-500 dark:text-slate-400">
 44 |               Personalize how we generate context, test cases, and boilerplate.
 45 |             </p>
 46 |           </div>
 47 | 
 48 |           <div className="space-y-8">
 49 |             <section>
 50 |               <h2 className="text-lg font-semibold text-slate-900 dark:text-white">
 51 |                 Default context
 52 |               </h2>
 53 |               <p className="text-sm text-slate-500 dark:text-slate-400">
 54 |                 This text is automatically appended to every request to emphasize permanent testing
 55 |                 requirements (e.g. compliance rules, performance SLAs).
 56 |               </p>
 57 |               <textarea
 58 |                 value={formState.defaultContext}
 59 |                 onChange={(e) =>
 60 |                   setFormState((prev) => ({ ...prev, defaultContext: e.target.value }))
 61 |                 }
 62 |                 rows={4}
 63 |                 className="mt-3 w-full rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-900/40 dark:text-white"
 64 |                 placeholder="Example: Always validate PII masking and SOC2 logging requirements."
 65 |               />
 66 |             </section>
 67 | 
 68 |             <section>
 69 |               <h2 className="text-lg font-semibold text-slate-900 dark:text-white">Test types</h2>
 70 |               <p className="text-sm text-slate-500 dark:text-slate-400">
 71 |                 Disable test categories you do not want generated. This can significantly reduce
 72 |                 turnaround time.
 73 |               </p>
 74 |               <div className="mt-4 grid gap-3 md:grid-cols-2">
 75 |                 {testTypeOptions.map((type) => (
 76 |                   <label
 77 |                     key={type}
 78 |                     className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white/70 p-4 text-sm font-medium text-slate-700 shadow-sm transition-colors hover:border-blue-500 dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-200"
 79 |                   >
 80 |                     <input
 81 |                       type="checkbox"
 82 |                       className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
 83 |                       checked={formState.disabledTestTypes[type]}
 84 |                       onChange={(e) =>
 85 |                         setFormState((prev) => ({
 86 |                           ...prev,
 87 |                           disabledTestTypes: {
 88 |                             ...prev.disabledTestTypes,
 89 |                             [type]: e.target.checked,
 90 |                           },
 91 |                         }))
 92 |                       }
 93 |                     />
 94 |                     <span className="capitalize">{type}</span>
 95 |                   </label>
 96 |                 ))}
 97 |               </div>
 98 |             </section>
 99 | 
100 |             <section>
101 |               <h2 className="text-lg font-semibold text-slate-900 dark:text-white">
102 |                 Boilerplate detail
103 |               </h2>
104 |               <p className="text-sm text-slate-500 dark:text-slate-400">
105 |                 Choose how many sample tests each boilerplate template should include.
106 |               </p>
107 |               <div className="mt-4">
108 |                 <input
109 |                   type="range"
110 |                   min={1}
111 |                   max={5}
112 |                   value={formState.boilerplateSampleSize}
113 |                   onChange={(e) =>
114 |                     setFormState((prev) => ({
115 |                       ...prev,
116 |                       boilerplateSampleSize: Number(e.target.value),
117 |                     }))
118 |                   }
119 |                   className="w-full"
120 |                 />
121 |                 <div className="mt-2 text-sm text-slate-600 dark:text-slate-300">
122 |                   {formState.boilerplateSampleSize} sample test
123 |                   {formState.boilerplateSampleSize > 1 ? "s" : ""}
124 |                 </div>
125 |               </div>
126 |             </section>
127 | 
128 |             <section>
129 |               <h2 className="text-lg font-semibold text-slate-900 dark:text-white">
130 |                 Boilerplate templates
131 |               </h2>
132 |               <p className="text-sm text-slate-500 dark:text-slate-400">
133 |                 Hide any code templates you never use so the modal stays focused.
134 |               </p>
135 |               <div className="mt-4 grid gap-3 md:grid-cols-2">
136 |                 {boilerplateOptions.map((framework) => (
137 |                   <label
138 |                     key={framework}
139 |                     className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white/70 p-4 text-sm font-medium text-slate-700 shadow-sm transition-colors hover:border-blue-500 dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-200"
140 |                   >
141 |                     <input
142 |                       type="checkbox"
143 |                       className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
144 |                       checked={formState.disabledBoilerplates[framework]}
145 |                       onChange={(e) =>
146 |                         setFormState((prev) => ({
147 |                           ...prev,
148 |                           disabledBoilerplates: {
149 |                             ...prev.disabledBoilerplates,
150 |                             [framework]: e.target.checked,
151 |                           },
152 |                         }))
153 |                       }
154 |                     />
155 |                     <span className="capitalize">{framework}</span>
156 |                   </label>
157 |                 ))}
158 |               </div>
159 |             </section>
160 |           </div>
161 | 
162 |           <div className="mt-10 flex flex-wrap gap-3">
163 |             <button
164 |               onClick={handleSave}
165 |               className="flex-1 rounded-2xl bg-blue-600 px-4 py-3 text-center text-white transition-colors hover:bg-blue-700"
166 |             >
167 |               Save settings
168 |             </button>
169 |             <button
170 |               onClick={handleReset}
171 |               className="flex-1 rounded-2xl border border-slate-300 px-4 py-3 text-center text-slate-600 transition-colors hover:bg-slate-100 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-700"
172 |             >
173 |               Reset to defaults
174 |             </button>
175 |           </div>
176 |         </div>
177 |       </div>
178 |     </div>
179 |   );
180 | }
181 | 


--------------------------------------------------------------------------------
/app/questions/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useEffect, useState } from "react";
  4 | import { useRouter } from "next/navigation";
  5 | import { categoryDescriptions } from "@/lib/questions";
  6 | import genericQuestions from "@/lib/genericQuestions.json";
  7 | import { useToast } from "@/components/ToastProvider";
  8 | import { useSettings } from "@/components/SettingsProvider";
  9 | import { filterTestCasesBySettings } from "@/lib/testCaseUtils";
 10 | 
 11 | export default function QuestionsPage() {
 12 |   const router = useRouter();
 13 |   const [category, setCategory] = useState("");
 14 |   const [questions, setQuestions] = useState<string[]>([]);
 15 |   const [answers, setAnswers] = useState<string[]>([]);
 16 |   const [loading, setLoading] = useState(true);
 17 |   const [generatingQuestions, setGeneratingQuestions] = useState(false);
 18 |   const [projectDescription, setProjectDescription] = useState("");
 19 |   const [projectRequirements, setProjectRequirements] = useState("");
 20 |   const { settings } = useSettings();
 21 |   const { addToast } = useToast();
 22 | 
 23 |   useEffect(() => {
 24 |     const loadQuestions = async () => {
 25 |       const savedCategory = sessionStorage.getItem("category");
 26 |       const savedProject = sessionStorage.getItem("projectDescription");
 27 |       const savedRequirements = sessionStorage.getItem("projectRequirements") || "";
 28 | 
 29 |       if (!savedCategory || !savedProject) {
 30 |         router.push("/");
 31 |         return;
 32 |       }
 33 | 
 34 |       setCategory(savedCategory);
 35 |       setProjectDescription(savedProject);
 36 |       setProjectRequirements(savedRequirements);
 37 | 
 38 |       // Fetch custom questions based on project description
 39 |       setGeneratingQuestions(true);
 40 |       try {
 41 |         const apiKey = localStorage.getItem("openai_api_key");
 42 | 
 43 |         const response = await fetch("/api/generate-questions", {
 44 |           method: "POST",
 45 |           headers: { "Content-Type": "application/json" },
 46 |           body: JSON.stringify({
 47 |             projectDescription: savedProject,
 48 |             category: savedCategory,
 49 |             apiKey: apiKey,
 50 |           }),
 51 |         });
 52 | 
 53 |         const data = await response.json();
 54 | 
 55 |         if (!response.ok) {
 56 |           console.error("Error generating questions:", data);
 57 |           throw new Error(data.error || "Failed to generate questions");
 58 |         }
 59 | 
 60 |         const generatedQuestions = data.questions || [];
 61 |         setQuestions(generatedQuestions);
 62 |         setAnswers(new Array(generatedQuestions.length).fill(""));
 63 |       } catch (error) {
 64 |         console.error("Error generating questions:", error);
 65 |         // Fallback to generic questions if generation fails
 66 |         setQuestions(genericQuestions);
 67 |         setAnswers(new Array(genericQuestions.length).fill(""));
 68 |       } finally {
 69 |         setGeneratingQuestions(false);
 70 |         setLoading(false);
 71 |       }
 72 |     };
 73 | 
 74 |     loadQuestions();
 75 |   }, [router]);
 76 | 
 77 |   const handleAnswerChange = (index: number, value: string) => {
 78 |     const newAnswers = [...answers];
 79 |     newAnswers[index] = value;
 80 |     setAnswers(newAnswers);
 81 |   };
 82 | 
 83 |   const handleSkip = () => {
 84 |     sessionStorage.setItem("answers", JSON.stringify(answers));
 85 |     router.push("/results");
 86 |   };
 87 | 
 88 |   const handleNext = async () => {
 89 |     if (answers.some((a) => !a.trim())) {
 90 |       addToast({ message: "Please answer all questions or skip.", type: "info" });
 91 |       return;
 92 |     }
 93 | 
 94 |     setLoading(true);
 95 |     try {
 96 |       const apiKey = localStorage.getItem("openai_api_key");
 97 | 
 98 |       const supplementalContext: string[] = [];
 99 |       if (projectRequirements.trim()) {
100 |         supplementalContext.push(`Requirement specification: ${projectRequirements.trim()}`);
101 |       }
102 |       if (settings.defaultContext.trim()) {
103 |         supplementalContext.push(settings.defaultContext.trim());
104 |       }
105 | 
106 |       const response = await fetch("/api/generate", {
107 |         method: "POST",
108 |         headers: { "Content-Type": "application/json" },
109 |         body: JSON.stringify({
110 |           projectDescription,
111 |           category,
112 |           answers: [...answers, ...supplementalContext],
113 |           apiKey: apiKey,
114 |         }),
115 |       });
116 | 
117 |       const data = await response.json();
118 | 
119 |       if (!response.ok) {
120 |         console.error("Error generating tests:", data);
121 |         throw new Error(data.error || "Failed to generate test cases");
122 |       }
123 | 
124 |       const filteredTestCases = filterTestCasesBySettings(data.testCases || [], settings);
125 |       if (!filteredTestCases.length) {
126 |         addToast({
127 |           message: "All generated test cases were filtered out by your settings.",
128 |           type: "error",
129 |         });
130 |         return;
131 |       }
132 | 
133 |       sessionStorage.setItem("answers", JSON.stringify([...answers, ...supplementalContext]));
134 |       sessionStorage.setItem("testCases", JSON.stringify(filteredTestCases));
135 |       sessionStorage.setItem("testingStrategy", data.testingStrategy || "");
136 |       sessionStorage.setItem("riskAreas", JSON.stringify(data.riskAreas || []));
137 | 
138 |       router.push("/results");
139 |     } catch (error) {
140 |       console.error("Error:", error);
141 |       addToast({ message: "Error generating test cases. Please try again.", type: "error" });
142 |     } finally {
143 |       setLoading(false);
144 |     }
145 |   };
146 | 
147 |   if (loading) {
148 |     return (
149 |       <div className="min-h-screen px-4 py-8 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center">
150 |         <div className="text-center">
151 |           <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
152 |           <p className="text-slate-600 dark:text-slate-300">
153 |             {generatingQuestions ? "Generating custom questions..." : "Loading..."}
154 |           </p>
155 |         </div>
156 |       </div>
157 |     );
158 |   }
159 | 
160 |   const progress = ((questions.length > 0 ? questions.length : 1) / 10) * 100;
161 | 
162 |   return (
163 |     <div className="min-h-screen px-4 py-8 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800">
164 |       <div className="max-w-4xl mx-auto">
165 |         {/* Header */}
166 |         <div className="mb-8">
167 |           <h1 className="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white mb-2">
168 |             Context Questions
169 |           </h1>
170 |           <p className="text-slate-600 dark:text-slate-300">
171 |             For: {categoryDescriptions[category] || category}
172 |           </p>
173 | 
174 |           {/* Progress Bar */}
175 |           <div className="mt-4 bg-slate-200 dark:bg-slate-700 rounded-full h-2">
176 |             <div
177 |               className="bg-gradient-to-r from-blue-600 to-indigo-600 h-2 rounded-full transition-all duration-300"
178 |               style={{ width: `${progress}%` }}
179 |             />
180 |           </div>
181 |           <p className="text-sm text-slate-600 dark:text-slate-400 mt-2">
182 |             {progress.toFixed(0)}% complete
183 |           </p>
184 |         </div>
185 | 
186 |         {/* Questions */}
187 |         <div className="space-y-6 mb-8">
188 |           {questions.map((question, index) => (
189 |             <div key={index} className="bg-white dark:bg-slate-800 rounded-lg shadow p-6">
190 |               <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
191 |                 Question {index + 1} of {questions.length}
192 |               </label>
193 |               <p className="text-lg text-slate-900 dark:text-white mb-4 font-medium">{question}</p>
194 |               <textarea
195 |                 value={answers[index]}
196 |                 onChange={(e) => handleAnswerChange(index, e.target.value)}
197 |                 placeholder="Type your answer here..."
198 |                 className="w-full p-4 border-2 border-slate-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white resize-none"
199 |                 rows={3}
200 |               />
201 |             </div>
202 |           ))}
203 |         </div>
204 | 
205 |         {/* Buttons */}
206 |         <div className="flex gap-4">
207 |           <button
208 |             onClick={handleSkip}
209 |             disabled={loading}
210 |             className="flex-1 px-6 py-3 bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 disabled:opacity-50 text-slate-900 dark:text-white font-semibold rounded-lg transition-all"
211 |           >
212 |             Skip
213 |           </button>
214 |           <button
215 |             onClick={handleNext}
216 |             disabled={loading}
217 |             className="flex-1 px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 disabled:opacity-50 text-white font-semibold rounded-lg transition-all"
218 |           >
219 |             {loading ? "Generating..." : "Generate Tests →"}
220 |           </button>
221 |         </div>
222 |       </div>
223 |     </div>
224 |   );
225 | }
226 | 


--------------------------------------------------------------------------------
/components/BoilerplateModal.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useEffect, useMemo, useState } from "react";
  4 | import { useToast } from "@/components/ToastProvider";
  5 | import { useSettings } from "@/components/SettingsProvider";
  6 | import type { BoilerplateKey } from "@/lib/settings";
  7 | import type { TestType } from "@/lib/testTypes";
  8 | 
  9 | interface TestCase {
 10 |   testType: TestType;
 11 |   category: string;
 12 |   testName: string;
 13 |   description: string;
 14 |   givenContext: string;
 15 |   testSteps: string[];
 16 |   expectedOutcome: string;
 17 |   notes?: string;
 18 |   setupRequired?: string;
 19 |   teardownRequired?: string;
 20 |   priority: "high" | "medium" | "low";
 21 | }
 22 | 
 23 | interface Framework {
 24 |   title: string;
 25 |   description: string;
 26 |   filename: string;
 27 |   extension: string;
 28 |   language: string;
 29 |   generateCode: (testCases: TestCase[], sampleSize: number) => string;
 30 | }
 31 | 
 32 | const frameworks: Record<BoilerplateKey, Framework> = {
 33 |   vitest: {
 34 |     title: "Vitest",
 35 |     description:
 36 |       "Fast unit test framework built on Vite. Perfect for modern JavaScript and TypeScript projects.",
 37 |     filename: "test.test.ts",
 38 |     extension: ".ts",
 39 |     language: "typescript",
 40 |     generateCode: (testCases, sampleSize) => generateVitestCode(testCases, sampleSize),
 41 |   },
 42 |   jest: {
 43 |     title: "Jest",
 44 |     description:
 45 |       "Widely used JavaScript testing framework with great documentation and extensive ecosystem.",
 46 |     filename: "test.test.js",
 47 |     extension: ".js",
 48 |     language: "javascript",
 49 |     generateCode: (testCases, sampleSize) => generateJestCode(testCases, sampleSize),
 50 |   },
 51 |   pytest: {
 52 |     title: "Pytest",
 53 |     description:
 54 |       "Popular Python testing framework. Simple syntax and powerful features for test discovery.",
 55 |     filename: "test_main.py",
 56 |     extension: ".py",
 57 |     language: "python",
 58 |     generateCode: (testCases, sampleSize) => generatePytestCode(testCases, sampleSize),
 59 |   },
 60 |   unittest: {
 61 |     title: "Unittest",
 62 |     description:
 63 |       "Python's built-in testing framework. No installation required, part of standard library.",
 64 |     filename: "test_main.py",
 65 |     extension: ".py",
 66 |     language: "python",
 67 |     generateCode: (testCases, sampleSize) => generateUnittestCode(testCases, sampleSize),
 68 |   },
 69 |   junit: {
 70 |     title: "JUnit",
 71 |     description: "Java testing framework. Industry standard for Java development.",
 72 |     filename: "MainTest.java",
 73 |     extension: ".java",
 74 |     language: "java",
 75 |     generateCode: (testCases, sampleSize) => generateJUnitCode(testCases, sampleSize),
 76 |   },
 77 |   phpunit: {
 78 |     title: "PHPUnit",
 79 |     description: "PHP testing framework. Comprehensive assertion library and mocking support.",
 80 |     filename: "MainTest.php",
 81 |     extension: ".php",
 82 |     language: "php",
 83 |     generateCode: (testCases, sampleSize) => generatePHPUnitCode(testCases, sampleSize),
 84 |   },
 85 |   rspec: {
 86 |     title: "RSpec",
 87 |     description: "Ruby testing framework. Behavior-driven development focused.",
 88 |     filename: "main_spec.rb",
 89 |     extension: ".rb",
 90 |     language: "ruby",
 91 |     generateCode: (testCases, sampleSize) => generateRSpecCode(testCases, sampleSize),
 92 |   },
 93 |   mocha: {
 94 |     title: "Mocha",
 95 |     description: "Flexible JavaScript test framework. Great for both unit and integration testing.",
 96 |     filename: "test.test.js",
 97 |     extension: ".js",
 98 |     language: "javascript",
 99 |     generateCode: (testCases, sampleSize) => generateMochaCode(testCases, sampleSize),
100 |   },
101 | };
102 | 
103 | function generateVitestCode(testCases: TestCase[], sampleSize: number): string {
104 |   const testCaseCode = testCases
105 |     .slice(0, sampleSize)
106 |     .map(
107 |       (tc) => `  it('${tc.testName}', () => {
108 |     // ${tc.description}
109 |     // ${tc.givenContext}
110 |     expect(true).toBe(true)
111 |   })`
112 |     )
113 |     .join("\n\n");
114 | 
115 |   return `import { describe, it, expect, beforeEach, afterEach } from 'vitest'
116 | 
117 | describe('Generated Tests', () => {
118 |   beforeEach(() => {
119 |     // Setup: Initialize test data
120 |   })
121 | 
122 |   afterEach(() => {
123 |     // Teardown: Clean up test data
124 |   })
125 | 
126 | ${testCaseCode}
127 | })`;
128 | }
129 | 
130 | function generateJestCode(testCases: TestCase[], sampleSize: number): string {
131 |   const testCaseCode = testCases
132 |     .slice(0, sampleSize)
133 |     .map(
134 |       (tc) => `  test('${tc.testName}', () => {
135 |     // ${tc.description}
136 |     expect(true).toBe(true)
137 |   })`
138 |     )
139 |     .join("\n\n");
140 | 
141 |   return `describe('Generated Tests', () => {
142 |   beforeEach(() => {
143 |     // Setup: Initialize test data
144 |   })
145 | 
146 |   afterEach(() => {
147 |     // Teardown: Clean up test data
148 |   })
149 | 
150 | ${testCaseCode}
151 | })`;
152 | }
153 | 
154 | function generatePytestCode(testCases: TestCase[], sampleSize: number): string {
155 |   const testCaseCode = testCases
156 |     .slice(0, sampleSize)
157 |     .map(
158 |       (tc) => `def test_${tc.testName.toLowerCase().replace(/\\s+/g, "_")}():
159 |     # ${tc.description}
160 |     assert True`
161 |     )
162 |     .join("\n\n");
163 | 
164 |   return `import pytest
165 | 
166 | class TestGenerated:
167 |     @pytest.fixture
168 |     def setup(self):
169 |         # Setup test data
170 |         yield
171 |         # Cleanup
172 | 
173 | ${testCaseCode}`;
174 | }
175 | 
176 | function generateUnittestCode(testCases: TestCase[], sampleSize: number): string {
177 |   const testMethods = testCases
178 |     .slice(0, sampleSize)
179 |     .map(
180 |       (tc) => `    def test_${tc.testName.toLowerCase().replace(/\\s+/g, "_")}(self):
181 |         """${tc.description}"""
182 |         self.assertTrue(True)`
183 |     )
184 |     .join("\n\n");
185 | 
186 |   return `import unittest
187 | 
188 | class TestGenerated(unittest.TestCase):
189 |     def setUp(self):
190 |         # Setup test data
191 |         pass
192 | 
193 |     def tearDown(self):
194 |         # Cleanup
195 |         pass
196 | 
197 | ${testMethods}
198 | 
199 | if __name__ == '__main__':
200 |     unittest.main()`;
201 | }
202 | 
203 | function generateJUnitCode(testCases: TestCase[], sampleSize: number): string {
204 |   const testMethods = testCases
205 |     .slice(0, sampleSize)
206 |     .map(
207 |       (tc) => `    @Test
208 |     public void ${
209 |       tc.testName.charAt(0).toLowerCase() + tc.testName.slice(1).replace(/\\s+/g, "")
210 |     }() {
211 |         // ${tc.description}
212 |         assertTrue(true);
213 |     }`
214 |     )
215 |     .join("\n\n");
216 | 
217 |   return `import org.junit.jupiter.api.BeforeEach;
218 | import org.junit.jupiter.api.AfterEach;
219 | import org.junit.jupiter.api.Test;
220 | import static org.junit.jupiter.api.Assertions.*;
221 | 
222 | public class GeneratedTests {
223 |     @BeforeEach
224 |     void setUp() {
225 |         // Setup test data
226 |     }
227 | 
228 |     @AfterEach
229 |     void tearDown() {
230 |         // Cleanup
231 |     }
232 | 
233 | ${testMethods}
234 | }`;
235 | }
236 | 
237 | function generatePHPUnitCode(testCases: TestCase[], sampleSize: number): string {
238 |   const testMethods = testCases
239 |     .slice(0, sampleSize)
240 |     .map(
241 |       (tc) => `    public function test${tc.testName.replace(/\\s+/g, "")}()
242 |     {
243 |         // ${tc.description}
244 |         $this->assertTrue(true);
245 |     }`
246 |     )
247 |     .join("\n\n");
248 | 
249 |   return `<?php
250 | 
251 | namespace Tests;
252 | 
253 | use PHPUnit\\Framework\\TestCase;
254 | 
255 | class GeneratedTests extends TestCase
256 | {
257 |     protected function setUp(): void
258 |     {
259 |         // Setup test data
260 |         parent::setUp();
261 |     }
262 | 
263 |     protected function tearDown(): void
264 |     {
265 |         // Cleanup
266 |         parent::tearDown();
267 |     }
268 | 
269 | ${testMethods}
270 | }`;
271 | }
272 | 
273 | function generateRSpecCode(testCases: TestCase[], sampleSize: number): string {
274 |   const testCaseCode = testCases
275 |     .slice(0, sampleSize)
276 |     .map(
277 |       (tc) => `  it '${tc.testName}' do
278 |     # ${tc.description}
279 |     expect(true).to eq(true)
280 |   end`
281 |     )
282 |     .join("\n\n");
283 | 
284 |   return `describe 'Generated Tests' do
285 |   before(:each) do
286 |     # Setup test data
287 |   end
288 | 
289 |   after(:each) do
290 |     # Cleanup
291 |   end
292 | 
293 | ${testCaseCode}
294 | end`;
295 | }
296 | 
297 | function generateMochaCode(testCases: TestCase[], sampleSize: number): string {
298 |   const testCaseCode = testCases
299 |     .slice(0, sampleSize)
300 |     .map(
301 |       (tc) => `  it('${tc.testName}', () => {
302 |     // ${tc.description}
303 |     expect(true).to.equal(true)
304 |   })`
305 |     )
306 |     .join("\n\n");
307 | 
308 |   return `const { expect } = require('chai')
309 | 
310 | describe('Generated Tests', () => {
311 |   beforeEach(() => {
312 |     // Setup test data
313 |   })
314 | 
315 |   afterEach(() => {
316 |     // Cleanup test data
317 |   })
318 | 
319 | ${testCaseCode}
320 | })`;
321 | }
322 | 
323 | interface BoilerplateModalProps {
324 |   testCases: TestCase[];
325 |   onClose: () => void;
326 |   disabledFrameworks?: Partial<Record<BoilerplateKey, boolean>>;
327 | }
328 | 
329 | export default function BoilerplateModal({
330 |   testCases,
331 |   onClose,
332 |   disabledFrameworks,
333 | }: BoilerplateModalProps) {
334 |   const [selectedFramework, setSelectedFramework] = useState<string>("vitest");
335 |   const { addToast } = useToast();
336 |   const { settings } = useSettings();
337 | 
338 |   const availableFrameworks = useMemo(() => {
339 |     return Object.entries(frameworks).filter(
340 |       ([key]) => !disabledFrameworks?.[key as BoilerplateKey]
341 |     );
342 |   }, [disabledFrameworks]);
343 | 
344 |   useEffect(() => {
345 |     if (!availableFrameworks.length) {
346 |       setSelectedFramework("");
347 |       return;
348 |     }
349 | 
350 |     const currentStillAvailable = availableFrameworks.some(([key]) => key === selectedFramework);
351 |     if (!currentStillAvailable) {
352 |       setSelectedFramework(availableFrameworks[0][0]);
353 |     }
354 |   }, [availableFrameworks, selectedFramework]);
355 | 
356 |   const framework = frameworks[selectedFramework as BoilerplateKey];
357 |   const desiredSampleSize = Math.min(
358 |     Math.max(settings.boilerplateSampleSize, 1),
359 |     Math.max(testCases.length, 1)
360 |   );
361 |   const generatedCode = framework
362 |     ? framework.generateCode(testCases, desiredSampleSize)
363 |     : "No template selected.";
364 | 
365 |   const copyToClipboard = () => {
366 |     navigator.clipboard.writeText(generatedCode).then(() => {
367 |       addToast({ message: "Code copied to clipboard!", type: "success" });
368 |     });
369 |   };
370 | 
371 |   const downloadFile = () => {
372 |     const blob = new Blob([generatedCode], { type: "text/plain" });
373 |     const url = window.URL.createObjectURL(blob);
374 |     const a = document.createElement("a");
375 |     a.href = url;
376 |     a.download = framework.filename;
377 |     a.click();
378 |     window.URL.revokeObjectURL(url);
379 |   };
380 | 
381 |   if (!availableFrameworks.length) {
382 |     return (
383 |       <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
384 |         <div className="w-full max-w-md rounded-2xl bg-white p-6 text-center shadow-2xl dark:bg-slate-800">
385 |           <h2 className="text-2xl font-bold text-slate-900 dark:text-white">
386 |             No templates enabled
387 |           </h2>
388 |           <p className="mt-3 text-sm text-slate-600 dark:text-slate-300">
389 |             All boilerplate templates are disabled. Enable at least one in settings to generate
390 |             code.
391 |           </p>
392 |           <button
393 |             onClick={onClose}
394 |             className="mt-6 w-full rounded-2xl bg-blue-600 px-4 py-2 text-white transition-colors hover:bg-blue-700"
395 |           >
396 |             Close
397 |           </button>
398 |         </div>
399 |       </div>
400 |     );
401 |   }
402 | 
403 |   return (
404 |     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
405 |       <div className="bg-white dark:bg-slate-800 rounded-lg shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
406 |         {/* Header */}
407 |         <div className="flex justify-between items-center p-6 border-b border-slate-200 dark:border-slate-700">
408 |           <h2 className="text-2xl font-bold text-slate-900 dark:text-white flex items-center gap-2">
409 |             <i className="fas fa-laptop-code"></i>
410 |             Generate Test Code Boilerplate
411 |           </h2>
412 |           <button
413 |             onClick={onClose}
414 |             className="text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 text-2xl"
415 |           >
416 |             ✕
417 |           </button>
418 |         </div>
419 | 
420 |         <div className="p-6 space-y-6">
421 |           {/* Description */}
422 |           <p className="text-slate-600 dark:text-slate-300">
423 |             Select your testing framework and we will generate ready-to-use test boilerplate code.
424 |           </p>
425 | 
426 |           {/* Framework Selection */}
427 |           <div>
428 |             <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
429 |               Select Testing Framework:
430 |             </h3>
431 |             <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
432 |               {availableFrameworks.map(([key, fw]) => (
433 |                 <button
434 |                   key={key}
435 |                   onClick={() => setSelectedFramework(key)}
436 |                   className={`p-4 rounded-lg border-2 transition-all text-center ${
437 |                     selectedFramework === key
438 |                       ? "border-green-600 bg-green-50 dark:bg-green-900 text-slate-900 dark:text-white"
439 |                       : "border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:border-slate-300"
440 |                   }`}
441 |                 >
442 |                   <div className="font-semibold">{fw.title}</div>
443 |                   <div className="text-xs text-slate-500 dark:text-slate-400">{fw.language}</div>
444 |                 </button>
445 |               ))}
446 |             </div>
447 |           </div>
448 | 
449 |           {/* Framework Info */}
450 |           <div className="bg-blue-50 dark:bg-blue-900 p-4 rounded-lg border border-blue-200 dark:border-blue-800">
451 |             <h4 className="font-semibold text-blue-900 dark:text-blue-100 mb-2">
452 |               {framework.title}
453 |             </h4>
454 |             <p className="text-blue-800 dark:text-blue-200 text-sm">{framework.description}</p>
455 |           </div>
456 | 
457 |           {/* Code Preview */}
458 |           <div>
459 |             <div className="flex justify-between items-center mb-3">
460 |               <h4 className="font-semibold text-slate-900 dark:text-white">
461 |                 Generated Boilerplate Code
462 |               </h4>
463 |               <span className="text-xs text-slate-500 dark:text-slate-400">
464 |                 {framework.filename}
465 |               </span>
466 |             </div>
467 |             <pre className="bg-slate-900 dark:bg-slate-950 text-slate-100 p-4 rounded-lg overflow-x-auto max-h-96 overflow-y-auto text-sm">
468 |               <code>{generatedCode}</code>
469 |             </pre>
470 |           </div>
471 | 
472 |           {/* Action Buttons */}
473 |           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
474 |             <button
475 |               onClick={copyToClipboard}
476 |               className="px-4 py-3 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
477 |             >
478 |               <i className="fas fa-copy"></i>
479 |               Copy Code
480 |             </button>
481 |             <button
482 |               onClick={downloadFile}
483 |               className="px-4 py-3 bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
484 |             >
485 |               <i className="fas fa-download"></i>
486 |               Download File
487 |             </button>
488 |           </div>
489 | 
490 |           {/* Close Button */}
491 |           <button
492 |             onClick={onClose}
493 |             className="w-full px-4 py-3 bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-900 dark:text-white rounded-lg font-medium transition-colors"
494 |           >
495 |             ✓ Done
496 |           </button>
497 |         </div>
498 |       </div>
499 |     </div>
500 |   );
501 | }
502 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState, useEffect } from "react";
  4 | import { useRouter } from "next/navigation";
  5 | import SavedTestsList from "@/components/SavedTestsList";
  6 | import { useToast } from "@/components/ToastProvider";
  7 | import { useConfirmDialog } from "@/components/ConfirmDialogProvider";
  8 | import { buildAutoContext } from "@/lib/autoContext";
  9 | import { useSettings } from "@/components/SettingsProvider";
 10 | import { filterTestCasesBySettings } from "@/lib/testCaseUtils";
 11 | 
 12 | export default function Home() {
 13 |   const [input, setInput] = useState("");
 14 |   const [apiKey, setApiKey] = useState("");
 15 |   const [showApiKeyInput, setShowApiKeyInput] = useState(false);
 16 |   const [loading, setLoading] = useState(false);
 17 |   const [apiKeySaved, setApiKeySaved] = useState(false);
 18 |   const [needsManualContext, setNeedsManualContext] = useState(false);
 19 |   const [requirements, setRequirements] = useState("");
 20 |   const [showRequirementsInput, setShowRequirementsInput] = useState(false);
 21 |   const router = useRouter();
 22 |   const { addToast } = useToast();
 23 |   const { confirm } = useConfirmDialog();
 24 |   const { settings } = useSettings();
 25 | 
 26 |   useEffect(() => {
 27 |     const savedKey = localStorage.getItem("openai_api_key");
 28 |     if (savedKey) {
 29 |       setApiKey(savedKey);
 30 |       setApiKeySaved(true);
 31 |     }
 32 |   }, []);
 33 | 
 34 |   const handleSaveApiKey = () => {
 35 |     if (!apiKey.trim()) {
 36 |       addToast({ message: "Please enter your OpenAI API key.", type: "error" });
 37 |       return;
 38 |     }
 39 | 
 40 |     if (!apiKey.startsWith("sk-")) {
 41 |       addToast({
 42 |         message: 'Invalid API key. It should start with "sk-".',
 43 |         type: "error",
 44 |       });
 45 |       return;
 46 |     }
 47 | 
 48 |     localStorage.setItem("openai_api_key", apiKey);
 49 |     setApiKeySaved(true);
 50 |     setShowApiKeyInput(false);
 51 |     addToast({
 52 |       message: "API key saved! You can now generate test cases.",
 53 |       type: "success",
 54 |     });
 55 |   };
 56 | 
 57 |   const handleRemoveApiKey = async () => {
 58 |     const confirmed = await confirm({
 59 |       title: "Remove API key?",
 60 |       description:
 61 |         "This will remove your saved OpenAI API key from this browser. You can add it again later.",
 62 |       confirmLabel: "Remove key",
 63 |       variant: "danger",
 64 |     });
 65 | 
 66 |     if (!confirmed) {
 67 |       return;
 68 |     }
 69 | 
 70 |     localStorage.removeItem("openai_api_key");
 71 |     setApiKey("");
 72 |     setApiKeySaved(false);
 73 |     addToast({ message: "API key removed.", type: "info" });
 74 |   };
 75 | 
 76 |   const handleNext = async () => {
 77 |     if (!apiKeySaved || !input.trim()) {
 78 |       if (!apiKeySaved) {
 79 |         setShowApiKeyInput(true);
 80 |       }
 81 |       return;
 82 |     }
 83 | 
 84 |     setLoading(true);
 85 |     const trimmedRequirements = requirements.trim();
 86 |     const trimmedDefaultContext = settings.defaultContext.trim();
 87 |     const classificationPayload = [
 88 |       input,
 89 |       trimmedRequirements ? `Requirement specification:\n${trimmedRequirements}` : null,
 90 |     ]
 91 |       .filter(Boolean)
 92 |       .join("\n\n");
 93 | 
 94 |     const generationPayload = [
 95 |       input,
 96 |       trimmedRequirements ? `Requirement specification:\n${trimmedRequirements}` : null,
 97 |       trimmedDefaultContext ? `Global considerations: ${trimmedDefaultContext}` : null,
 98 |     ]
 99 |       .filter(Boolean)
100 |       .join("\n\n");
101 |     try {
102 |       const response = await fetch("/api/classify", {
103 |         method: "POST",
104 |         headers: { "Content-Type": "application/json" },
105 |         body: JSON.stringify({
106 |           projectDescription: classificationPayload,
107 |           apiKey: localStorage.getItem("openai_api_key"),
108 |         }),
109 |       });
110 | 
111 |       const data = await response.json();
112 | 
113 |       if (response.status === 401 || data.error?.includes("Unauthorized")) {
114 |         addToast({
115 |           message: "Invalid API key. Please check and try again.",
116 |           type: "error",
117 |         });
118 |         setShowApiKeyInput(true);
119 |         return;
120 |       }
121 | 
122 |       if (!response.ok) {
123 |         addToast({
124 |           message: `Error: ${data.error || "Failed to classify project"}`,
125 |           type: "error",
126 |         });
127 |         return;
128 |       }
129 | 
130 |       const normalizedCategory = data.category || "other";
131 |       sessionStorage.setItem("projectDescription", input);
132 |       if (trimmedRequirements) {
133 |         sessionStorage.setItem("projectRequirements", trimmedRequirements);
134 |       } else {
135 |         sessionStorage.removeItem("projectRequirements");
136 |       }
137 |       sessionStorage.setItem("category", normalizedCategory);
138 |       sessionStorage.removeItem("currentTestId");
139 | 
140 |       if (needsManualContext) {
141 |         sessionStorage.removeItem("answers");
142 |         sessionStorage.setItem("manualContextMode", "true");
143 |         router.push("/questions");
144 |         return;
145 |       }
146 | 
147 |       const autoContext = buildAutoContext(
148 |         input,
149 |         normalizedCategory,
150 |         trimmedRequirements,
151 |         trimmedDefaultContext
152 |       );
153 |       sessionStorage.setItem("manualContextMode", "false");
154 | 
155 |       const generationResponse = await fetch("/api/generate", {
156 |         method: "POST",
157 |         headers: { "Content-Type": "application/json" },
158 |         body: JSON.stringify({
159 |           projectDescription: generationPayload,
160 |           category: normalizedCategory,
161 |           answers: autoContext,
162 |           apiKey: localStorage.getItem("openai_api_key"),
163 |         }),
164 |       });
165 | 
166 |       const generationData = await generationResponse.json();
167 | 
168 |       if (!generationResponse.ok) {
169 |         addToast({
170 |           message: generationData.error || "Failed to generate test cases.",
171 |           type: "error",
172 |         });
173 |         return;
174 |       }
175 | 
176 |       const filteredTestCases = filterTestCasesBySettings(generationData.testCases || [], settings);
177 |       if (!filteredTestCases.length) {
178 |         addToast({
179 |           message: "All generated test cases were filtered out by your settings.",
180 |           type: "error",
181 |         });
182 |         return;
183 |       }
184 | 
185 |       sessionStorage.setItem("answers", JSON.stringify(autoContext));
186 |       sessionStorage.setItem("testCases", JSON.stringify(filteredTestCases));
187 |       sessionStorage.setItem("testingStrategy", generationData.testingStrategy || "");
188 |       sessionStorage.setItem("riskAreas", JSON.stringify(generationData.riskAreas || []));
189 | 
190 |       router.push("/results");
191 |     } catch (error) {
192 |       console.error("Error:", error);
193 |       addToast({ message: "Something went wrong while preparing your tests.", type: "error" });
194 |     } finally {
195 |       setLoading(false);
196 |     }
197 |   };
198 | 
199 |   return (
200 |     <div className="min-h-screen flex items-center justify-center px-4 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800">
201 |       <div className="max-w-2xl w-full">
202 |         <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl p-8 md:p-12">
203 |           {/* Header */}
204 |           <div className="text-center mb-8">
205 |             <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent mb-4">
206 |               Assertify
207 |             </h1>
208 |             <p className="text-lg text-slate-600 dark:text-slate-300">
209 |               AI-powered test case generation with boilerplate code
210 |             </p>
211 |           </div>
212 | 
213 |           {/* API Key Section */}
214 |           <div className="mb-8 p-4 bg-blue-50 dark:bg-blue-900 rounded-lg border-l-4 border-blue-600">
215 |             <div className="flex items-center justify-between">
216 |               <div>
217 |                 <h3 className="font-semibold text-slate-900 dark:text-white mb-1 flex items-center gap-2">
218 |                   <i className="fas fa-key text-blue-600 dark:text-blue-400"></i>
219 |                   OpenAI API Key
220 |                 </h3>
221 |                 {apiKeySaved ? (
222 |                   <p className="text-sm text-green-700 dark:text-green-300 flex items-center gap-1">
223 |                     <i className="fas fa-check-circle"></i>
224 |                     API key configured
225 |                   </p>
226 |                 ) : (
227 |                   <p className="text-sm text-blue-700 dark:text-blue-300 flex items-center gap-1">
228 |                     <i className="fas fa-exclamation-circle"></i>
229 |                     Please add your OpenAI API key to continue
230 |                   </p>
231 |                 )}
232 |               </div>
233 |               <button
234 |                 onClick={() => setShowApiKeyInput(!showApiKeyInput)}
235 |                 className="px-4 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white text-sm rounded-lg font-medium transition-colors"
236 |               >
237 |                 {showApiKeyInput ? "Close" : apiKeySaved ? "Change" : "Add"}
238 |               </button>
239 |             </div>
240 | 
241 |             {showApiKeyInput && (
242 |               <div className="mt-4 space-y-3">
243 |                 <p className="text-xs text-slate-600 dark:text-slate-300">
244 |                   Get your free API key at{" "}
245 |                   <a
246 |                     href="https://platform.openai.com/account/api-keys"
247 |                     target="_blank"
248 |                     rel="noopener noreferrer"
249 |                     className="text-blue-600 dark:text-blue-400 hover:underline font-medium"
250 |                   >
251 |                     platform.openai.com/account/api-keys
252 |                   </a>
253 |                 </p>
254 |                 <input
255 |                   type="password"
256 |                   value={apiKey}
257 |                   onChange={(e) => setApiKey(e.target.value)}
258 |                   placeholder="sk-proj-..."
259 |                   className="w-full p-3 border-2 border-slate-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white text-sm"
260 |                 />
261 |                 <p className="text-xs text-slate-500 dark:text-slate-400">
262 |                   Your API key is stored locally in your browser only. Never shared with us.
263 |                 </p>
264 |                 <div className="flex gap-2">
265 |                   <button
266 |                     onClick={handleSaveApiKey}
267 |                     className="flex-1 px-3 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium transition-colors text-sm flex items-center justify-center gap-2"
268 |                   >
269 |                     <i className="fas fa-save"></i>
270 |                     Save Key
271 |                   </button>
272 |                   {apiKeySaved && (
273 |                     <button
274 |                       onClick={handleRemoveApiKey}
275 |                       className="flex-1 px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-medium transition-colors text-sm flex items-center justify-center gap-2"
276 |                     >
277 |                       <i className="fas fa-trash"></i>
278 |                       Remove Key
279 |                     </button>
280 |                   )}
281 |                 </div>
282 |               </div>
283 |             )}
284 |           </div>
285 | 
286 |           {/* Input Section */}
287 |           <div className="space-y-4">
288 |             <label className="block text-sm font-semibold text-slate-700 dark:text-slate-300">
289 |               Describe what you built
290 |             </label>
291 |             <textarea
292 |               value={input}
293 |               onChange={(e) => setInput(e.target.value)}
294 |               placeholder="Example: I built a feature flag service to safely launch experiments, including REST APIs for toggles and a dashboard"
295 |               className="w-full p-4 border-2 border-slate-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white resize-none"
296 |               rows={4}
297 |               disabled={!apiKeySaved}
298 |             />
299 |             <p className="text-xs text-slate-500 dark:text-slate-400">
300 |               Share the overall project or feature goals. Add optional requirements below for extra
301 |               precision.
302 |             </p>
303 | 
304 |             <div className="rounded-xl border border-slate-200 bg-white/70 p-4 shadow-sm dark:border-slate-700 dark:bg-slate-800/60">
305 |               <button
306 |                 type="button"
307 |                 onClick={() => setShowRequirementsInput((prev) => !prev)}
308 |                 className="flex w-full items-center justify-between"
309 |               >
310 |                 <div className="text-left">
311 |                   <p className="font-semibold text-slate-900 dark:text-white">
312 |                     Requirement specification (optional)
313 |                   </p>
314 |                   <p className="text-xs text-slate-500 dark:text-slate-400">
315 |                     Capture acceptance criteria, SLAs, integrations, or compliance needs you want
316 |                     the tests to respect.
317 |                   </p>
318 |                 </div>
319 |                 <span className="text-slate-500 dark:text-slate-300">
320 |                   <i
321 |                     className={`fas fa-chevron-${showRequirementsInput ? "up" : "down"} transition-transform`}
322 |                   ></i>
323 |                 </span>
324 |               </button>
325 | 
326 |               {showRequirementsInput && (
327 |                 <textarea
328 |                   value={requirements}
329 |                   onChange={(e) => setRequirements(e.target.value)}
330 |                   placeholder="Acceptance criteria, regulatory constraints, performance targets, unsupported scenarios, etc."
331 |                   className="mt-4 w-full rounded-lg border-2 border-slate-300 p-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-slate-600 dark:bg-slate-700 dark:text-white"
332 |                   rows={4}
333 |                 />
334 |               )}
335 |             </div>
336 | 
337 |             <div className="rounded-xl border border-dashed border-slate-200 bg-slate-50/60 p-4 dark:border-slate-700 dark:bg-slate-900/30">
338 |               <label className="flex cursor-pointer items-start gap-3">
339 |                 <input
340 |                   type="checkbox"
341 |                   className="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
342 |                   checked={needsManualContext}
343 |                   onChange={(e) => setNeedsManualContext(e.target.checked)}
344 |                 />
345 |                 <div>
346 |                   <span className="font-semibold text-slate-900 dark:text-white">
347 |                     Add extra context manually
348 |                   </span>
349 |                   <p className="text-xs text-slate-600 dark:text-slate-400">
350 |                     When disabled, we craft smart context automatically and jump straight to your
351 |                     test cases. Enable this if you prefer to answer detailed questions yourself.
352 |                   </p>
353 |                 </div>
354 |               </label>
355 |             </div>
356 |           </div>
357 | 
358 |           {/* Button */}
359 |           <button
360 |             onClick={handleNext}
361 |             disabled={loading || !apiKeySaved || !input.trim()}
362 |             className="w-full mt-8 px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold rounded-lg transition-all duration-200 transform hover:scale-105 flex items-center justify-center gap-2"
363 |           >
364 |             <i className="fas fa-arrow-right"></i>
365 |             {loading ? "Classifying..." : "Next"}
366 |           </button>
367 | 
368 |           {/* Features */}
369 |           <div className="grid grid-cols-3 gap-4 mt-12 pt-8 border-t border-slate-200 dark:border-slate-700">
370 |             <div className="text-center">
371 |               <div className="text-3xl mb-2 text-blue-600 dark:text-blue-400">
372 |                 <i className="fas fa-flask"></i>
373 |               </div>
374 |               <p className="text-sm text-slate-600 dark:text-slate-400">5 Test Types</p>
375 |             </div>
376 |             <div className="text-center">
377 |               <div className="text-3xl mb-2 text-green-600 dark:text-green-400">
378 |                 <i className="fas fa-code"></i>
379 |               </div>
380 |               <p className="text-sm text-slate-600 dark:text-slate-400">8 Frameworks</p>
381 |             </div>
382 |             <div className="text-center">
383 |               <div className="text-3xl mb-2 text-yellow-600 dark:text-yellow-400">
384 |                 <i className="fas fa-bolt"></i>
385 |               </div>
386 |               <p className="text-sm text-slate-600 dark:text-slate-400">Instant Results</p>
387 |             </div>
388 |           </div>
389 | 
390 |           {/* Saved Tests */}
391 |           <SavedTestsList onLoadTest={() => {}} />
392 |         </div>
393 |       </div>
394 |     </div>
395 |   );
396 | }
397 | 


--------------------------------------------------------------------------------
/app/results/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useEffect, useMemo, useState } from "react";
  4 | import { useRouter } from "next/navigation";
  5 | import BoilerplateModal from "@/components/BoilerplateModal";
  6 | import { useToast } from "@/components/ToastProvider";
  7 | import { useSettings } from "@/components/SettingsProvider";
  8 | import { filterTestCasesBySettings } from "@/lib/testCaseUtils";
  9 | import { boilerplateOptions, testTypeOptions } from "@/lib/settings";
 10 | import { TestType } from "@/lib/testTypes";
 11 | 
 12 | interface TestCase {
 13 |   testType: TestType;
 14 |   category: string;
 15 |   testName: string;
 16 |   description: string;
 17 |   givenContext: string;
 18 |   testSteps: string[];
 19 |   expectedOutcome: string;
 20 |   notes?: string;
 21 |   setupRequired?: string;
 22 |   teardownRequired?: string;
 23 |   priority: "high" | "medium" | "low";
 24 | }
 25 | 
 26 | interface Analysis {
 27 |   summary: string;
 28 |   riskAreas: string[];
 29 |   testingStrategy: string;
 30 | }
 31 | 
 32 | const testTypeStatMeta: Record<TestType, { label: string; textClass: string }> = {
 33 |   [TestType.Unit]: {
 34 |     label: "Unit Tests",
 35 |     textClass: "text-blue-600 dark:text-blue-400",
 36 |   },
 37 |   [TestType.Integration]: {
 38 |     label: "Integration",
 39 |     textClass: "text-purple-600 dark:text-purple-400",
 40 |   },
 41 |   [TestType.Feature]: {
 42 |     label: "Feature Tests",
 43 |     textClass: "text-green-600 dark:text-green-400",
 44 |   },
 45 |   [TestType.Performance]: {
 46 |     label: "Performance",
 47 |     textClass: "text-orange-600 dark:text-orange-400",
 48 |   },
 49 |   [TestType.Manual]: {
 50 |     label: "Manual Tests",
 51 |     textClass: "text-pink-600 dark:text-pink-400",
 52 |   },
 53 | };
 54 | 
 55 | const formatTestTypeLabel = (type: TestType) => type.charAt(0).toUpperCase() + type.slice(1);
 56 | 
 57 | export default function ResultsPage() {
 58 |   const router = useRouter();
 59 |   const [testCases, setTestCases] = useState<TestCase[]>([]);
 60 |   const [analysis, setAnalysis] = useState<Analysis | null>(null);
 61 |   const [selectedTestType, setSelectedTestType] = useState<TestType | "all">("all");
 62 |   const [selectedPriority, setSelectedPriority] = useState<string>("all");
 63 |   const [showBoilerplateModal, setShowBoilerplateModal] = useState<boolean>(false);
 64 |   const { addToast } = useToast();
 65 |   const { settings } = useSettings();
 66 |   const hasBoilerplateOptions = useMemo(
 67 |     () => boilerplateOptions.some((key) => !settings.disabledBoilerplates[key]),
 68 |     [settings.disabledBoilerplates]
 69 |   );
 70 | 
 71 |   useEffect(() => {
 72 |     const cases = sessionStorage.getItem("testCases");
 73 |     const testingStrategy = sessionStorage.getItem("testingStrategy");
 74 |     const riskAreas = sessionStorage.getItem("riskAreas");
 75 |     const projectDescription = sessionStorage.getItem("projectDescription");
 76 |     const category = sessionStorage.getItem("category");
 77 |     const savedTestId = sessionStorage.getItem("currentTestId");
 78 | 
 79 |     if (!cases) {
 80 |       router.push("/");
 81 |       return;
 82 |     }
 83 | 
 84 |     try {
 85 |       const parsedCases = JSON.parse(cases) as TestCase[];
 86 |       const filteredCases = filterTestCasesBySettings(parsedCases, settings);
 87 |       setTestCases(filteredCases);
 88 | 
 89 |       if (testingStrategy || riskAreas) {
 90 |         setAnalysis({
 91 |           summary: testingStrategy || "",
 92 |           riskAreas: riskAreas ? JSON.parse(riskAreas) : [],
 93 |           testingStrategy: testingStrategy || "",
 94 |         });
 95 |       }
 96 | 
 97 |       // Only auto-save if this test hasn't been saved yet
 98 |       if (projectDescription && category && !savedTestId) {
 99 |         saveTestCase(
100 |           projectDescription,
101 |           category,
102 |           filteredCases,
103 |           testingStrategy || "",
104 |           riskAreas || null
105 |         );
106 |       }
107 |     } catch (error) {
108 |       console.error("Failed to parse test cases:", error);
109 |       router.push("/");
110 |     }
111 |   }, [router, settings]);
112 | 
113 |   const saveTestCase = (
114 |     projectDescription: string,
115 |     category: string,
116 |     testCases: TestCase[],
117 |     testingStrategy: string,
118 |     riskAreasStr: string | null
119 |   ) => {
120 |     try {
121 |       const testId = `test_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
122 |       const riskAreasArray = riskAreasStr ? JSON.parse(riskAreasStr) : [];
123 | 
124 |       const testData = {
125 |         projectDescription,
126 |         category,
127 |         testCases,
128 |         testingStrategy,
129 |         riskAreas: riskAreasArray,
130 |         timestamp: new Date().toISOString(),
131 |       };
132 | 
133 |       localStorage.setItem(testId, JSON.stringify(testData));
134 | 
135 |       // Store the current test ID in session storage so we don't save it again
136 |       sessionStorage.setItem("currentTestId", testId);
137 | 
138 |       const savedTestsStr = localStorage.getItem("savedTests") || "[]";
139 |       const savedTests = JSON.parse(savedTestsStr);
140 | 
141 |       const newTestEntry = {
142 |         id: testId,
143 |         projectDescription,
144 |         category,
145 |         timestamp: new Date().toISOString(),
146 |         testCaseCount: testCases.length,
147 |       };
148 | 
149 |       savedTests.unshift(newTestEntry);
150 |       localStorage.setItem("savedTests", JSON.stringify(savedTests));
151 |     } catch (error) {
152 |       console.error("Error saving test case:", error);
153 |     }
154 |   };
155 | 
156 |   const filteredTestCases = useMemo(() => {
157 |     return testCases.filter((tc) => {
158 |       const typeMatch = selectedTestType === "all" || tc.testType === selectedTestType;
159 |       const priorityMatch = selectedPriority === "all" || tc.priority === selectedPriority;
160 |       return typeMatch && priorityMatch;
161 |     });
162 |   }, [testCases, selectedPriority, selectedTestType]);
163 | 
164 |   const testTypeCount = testTypeOptions.reduce(
165 |     (acc, type) => {
166 |       acc[type] = testCases.filter((tc) => tc.testType === type).length;
167 |       return acc;
168 |     },
169 |     {} as Record<TestType, number>
170 |   );
171 | 
172 |   const exportToCSV = () => {
173 |     const headers = [
174 |       "Test Type",
175 |       "Priority",
176 |       "Test Name",
177 |       "Description",
178 |       "Given Context",
179 |       "Test Steps",
180 |       "Expected Outcome",
181 |       "Notes",
182 |       "Setup Required",
183 |       "Teardown Required",
184 |     ];
185 | 
186 |     const rows = testCases.map((tc) => [
187 |       tc.testType,
188 |       tc.priority,
189 |       tc.testName,
190 |       tc.description,
191 |       tc.givenContext,
192 |       tc.testSteps.join(" | "),
193 |       tc.expectedOutcome,
194 |       tc.notes || "",
195 |       tc.setupRequired || "",
196 |       tc.teardownRequired || "",
197 |     ]);
198 | 
199 |     const csv = [
200 |       headers.join(","),
201 |       ...rows.map((row) =>
202 |         row
203 |           .map((cell) => {
204 |             const cellStr = String(cell);
205 |             if (cellStr.includes(",") || cellStr.includes('"')) {
206 |               return `"${cellStr.replace(/"/g, '""')}"`;
207 |             }
208 |             return cellStr;
209 |           })
210 |           .join(",")
211 |       ),
212 |     ].join("\n");
213 | 
214 |     const blob = new Blob([csv], { type: "text/csv" });
215 |     const url = window.URL.createObjectURL(blob);
216 |     const a = document.createElement("a");
217 |     a.href = url;
218 |     a.download = "test-cases.csv";
219 |     a.click();
220 |   };
221 | 
222 |   const exportToJSON = () => {
223 |     const data = {
224 |       analysis,
225 |       testCases,
226 |       exportedAt: new Date().toISOString(),
227 |     };
228 | 
229 |     const blob = new Blob([JSON.stringify(data, null, 2)], {
230 |       type: "application/json",
231 |     });
232 |     const url = window.URL.createObjectURL(blob);
233 |     const a = document.createElement("a");
234 |     a.href = url;
235 |     a.download = "test-cases.json";
236 |     a.click();
237 |   };
238 | 
239 |   const getPriorityColor = (priority: string) => {
240 |     switch (priority) {
241 |       case "high":
242 |         return "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-100 border-red-300 dark:border-red-700";
243 |       case "medium":
244 |         return "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-100 border-yellow-300 dark:border-yellow-700";
245 |       case "low":
246 |         return "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100 border-green-300 dark:border-green-700";
247 |       default:
248 |         return "bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border-slate-300 dark:border-slate-600";
249 |     }
250 |   };
251 | 
252 |   const getTestTypeColor = (testType: TestType) => {
253 |     switch (testType) {
254 |       case TestType.Unit:
255 |         return "bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100";
256 |       case TestType.Integration:
257 |         return "bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-100";
258 |       case TestType.Feature:
259 |         return "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100";
260 |       case TestType.Performance:
261 |         return "bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-100";
262 |       case TestType.Manual:
263 |         return "bg-pink-100 dark:bg-pink-900 text-pink-800 dark:text-pink-100";
264 |       default:
265 |         return "bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-100";
266 |     }
267 |   };
268 | 
269 |   if (!testCases.length) {
270 |     return (
271 |       <div className="min-h-screen bg-gradient-to-br from-slate-50 dark:from-slate-900 to-slate-100 dark:to-slate-800 flex items-center justify-center p-4">
272 |         <div className="text-center text-slate-600 dark:text-slate-300">Loading...</div>
273 |       </div>
274 |     );
275 |   }
276 | 
277 |   return (
278 |     <div className="min-h-screen bg-gradient-to-br from-slate-50 dark:from-slate-900 to-slate-100 dark:to-slate-800 p-4 dark:text-white">
279 |       <div className="max-w-7xl mx-auto">
280 |         {/* Header */}
281 |         <div className="mb-8">
282 |           <button
283 |             onClick={() => router.push("/")}
284 |             className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium mb-4 flex items-center gap-2"
285 |           >
286 |             <i className="fas fa-arrow-left"></i>
287 |             Start New
288 |           </button>
289 |           <h1 className="text-4xl font-bold text-slate-900 dark:text-white mb-4">
290 |             Test Cases Generated
291 |           </h1>
292 | 
293 |           {/* Analysis Summary */}
294 |           {analysis && (
295 |             <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-6 mb-6">
296 |               <h2 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">
297 |                 Testing Strategy
298 |               </h2>
299 |               <p className="text-slate-700 dark:text-slate-300 mb-4">{analysis.summary}</p>
300 |               <div>
301 |                 <h3 className="font-semibold text-slate-900 dark:text-white mb-2">Risk Areas:</h3>
302 |                 <div className="flex flex-wrap gap-2">
303 |                   {analysis.riskAreas.map((risk, idx) => (
304 |                     <span
305 |                       key={idx}
306 |                       className="px-3 py-1 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-full text-sm"
307 |                     >
308 |                       {risk}
309 |                     </span>
310 |                   ))}
311 |                 </div>
312 |               </div>
313 |             </div>
314 |           )}
315 | 
316 |           {/* Statistics */}
317 |           <div className="grid grid-cols-2 md:grid-cols-5 gap-3 mb-6">
318 |             {testTypeOptions.map((type) => (
319 |               <div
320 |                 key={type}
321 |                 className="bg-white dark:bg-slate-800 rounded-lg shadow p-4 text-center"
322 |               >
323 |                 <div className={`text-2xl font-bold ${testTypeStatMeta[type].textClass}`}>
324 |                   {testTypeCount[type]}
325 |                 </div>
326 |                 <div className="text-xs text-slate-600 dark:text-slate-400">
327 |                   {testTypeStatMeta[type].label}
328 |                 </div>
329 |               </div>
330 |             ))}
331 |           </div>
332 |         </div>
333 | 
334 |         {/* Filters and Export */}
335 |         <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-6 mb-6">
336 |           <div className="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between">
337 |             <div className="flex flex-col md:flex-row gap-4 w-full md:w-auto">
338 |               <div>
339 |                 <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
340 |                   Test Type
341 |                 </label>
342 |                 <select
343 |                   value={selectedTestType}
344 |                   onChange={(e) => setSelectedTestType(e.target.value as TestType | "all")}
345 |                   className="px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white"
346 |                 >
347 |                   <option value="all">All Types</option>
348 |                   {testTypeOptions.map((type) => (
349 |                     <option key={type} value={type}>
350 |                       {formatTestTypeLabel(type)}
351 |                     </option>
352 |                   ))}
353 |                 </select>
354 |               </div>
355 |               <div>
356 |                 <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
357 |                   Priority
358 |                 </label>
359 |                 <select
360 |                   value={selectedPriority}
361 |                   onChange={(e) => setSelectedPriority(e.target.value)}
362 |                   className="px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:text-white"
363 |                 >
364 |                   <option value="all">All Priorities</option>
365 |                   <option value="high">High</option>
366 |                   <option value="medium">Medium</option>
367 |                   <option value="low">Low</option>
368 |                 </select>
369 |               </div>
370 |             </div>
371 | 
372 |             <div className="flex gap-2 w-full md:w-auto flex-wrap">
373 |               <button
374 |                 onClick={exportToJSON}
375 |                 className="flex-1 md:flex-none px-4 py-2 bg-slate-600 dark:bg-slate-700 text-white rounded-lg hover:bg-slate-700 dark:hover:bg-slate-600 font-medium transition-colors text-sm flex items-center justify-center gap-2"
376 |               >
377 |                 <i className="fas fa-file-code"></i>
378 |                 Export JSON
379 |               </button>
380 |               <button
381 |                 onClick={exportToCSV}
382 |                 className="flex-1 md:flex-none px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600 font-medium transition-colors text-sm flex items-center justify-center gap-2"
383 |               >
384 |                 <i className="fas fa-file-csv"></i>
385 |                 Export CSV
386 |               </button>
387 |               <button
388 |                 onClick={() => setShowBoilerplateModal(true)}
389 |                 disabled={!hasBoilerplateOptions}
390 |                 title={
391 |                   hasBoilerplateOptions
392 |                     ? undefined
393 |                     : "Enable at least one boilerplate template in settings"
394 |                 }
395 |                 className="flex-1 md:flex-none px-4 py-2 bg-green-600 dark:bg-green-700 text-white rounded-lg hover:bg-green-700 dark:hover:bg-green-600 font-medium transition-colors text-sm flex items-center justify-center gap-2 disabled:cursor-not-allowed disabled:opacity-50"
396 |               >
397 |                 <i className="fas fa-code"></i>
398 |                 Generate Code
399 |               </button>
400 |               <button
401 |                 onClick={() => {
402 |                   const testCasesStr = sessionStorage.getItem("testCases") || "[]";
403 |                   const projectDescription =
404 |                     sessionStorage.getItem("projectDescription") || "Untitled Project";
405 |                   const category = sessionStorage.getItem("category") || "other";
406 |                   const testingStrategy = sessionStorage.getItem("testingStrategy") || "";
407 |                   const riskAreasStr = sessionStorage.getItem("riskAreas") || "[]";
408 |                   const currentTestId = sessionStorage.getItem("currentTestId");
409 | 
410 |                   try {
411 |                     const testCases = JSON.parse(testCasesStr);
412 |                     const riskAreas = JSON.parse(riskAreasStr);
413 | 
414 |                     // If already saved, just notify
415 |                     if (currentTestId) {
416 |                       addToast({
417 |                         message: "This test was already saved automatically!",
418 |                         type: "info",
419 |                       });
420 |                       return;
421 |                     }
422 | 
423 |                     const testId = `test_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
424 |                     const testData = {
425 |                       projectDescription,
426 |                       category,
427 |                       testCases,
428 |                       testingStrategy,
429 |                       riskAreas,
430 |                       timestamp: new Date().toISOString(),
431 |                     };
432 | 
433 |                     localStorage.setItem(testId, JSON.stringify(testData));
434 |                     sessionStorage.setItem("currentTestId", testId);
435 | 
436 |                     const savedTestsStr = localStorage.getItem("savedTests") || "[]";
437 |                     const savedTests = JSON.parse(savedTestsStr);
438 | 
439 |                     const newTestEntry = {
440 |                       id: testId,
441 |                       projectDescription,
442 |                       category,
443 |                       timestamp: new Date().toISOString(),
444 |                       testCaseCount: testCases.length,
445 |                     };
446 | 
447 |                     savedTests.unshift(newTestEntry);
448 |                     localStorage.setItem("savedTests", JSON.stringify(savedTests));
449 |                     addToast({
450 |                       message: "Test saved to local storage!",
451 |                       type: "success",
452 |                     });
453 |                   } catch (error) {
454 |                     console.error("Error saving:", error);
455 |                     addToast({
456 |                       message: "Failed to save test. Please try again.",
457 |                       type: "error",
458 |                     });
459 |                   }
460 |                 }}
461 |                 className="flex-1 md:flex-none px-4 py-2 bg-purple-600 dark:bg-purple-700 text-white rounded-lg hover:bg-purple-700 dark:hover:bg-purple-600 font-medium transition-colors text-sm flex items-center justify-center gap-2"
462 |               >
463 |                 <i className="fas fa-save"></i>
464 |                 Save Test
465 |               </button>
466 |             </div>
467 |           </div>
468 | 
469 |           <p className="text-sm text-slate-600 dark:text-slate-400 mt-4">
470 |             Showing {filteredTestCases.length} of {testCases.length} test cases
471 |           </p>
472 |         </div>
473 | 
474 |         {/* Test Cases Table */}
475 |         <div className="space-y-4">
476 |           {filteredTestCases.map((testCase, idx) => (
477 |             <div key={idx} className="bg-white dark:bg-slate-800 rounded-lg shadow-md p-6">
478 |               <div className="flex flex-wrap gap-3 mb-4">
479 |                 <span
480 |                   className={`px-3 py-1 rounded-full text-sm font-medium ${getTestTypeColor(
481 |                     testCase.testType
482 |                   )}`}
483 |                 >
484 |                   {testCase.testType.toUpperCase()}
485 |                 </span>
486 |                 <span
487 |                   className={`px-3 py-1 rounded-full text-sm font-medium border ${getPriorityColor(
488 |                     testCase.priority
489 |                   )}`}
490 |                 >
491 |                   {testCase.priority.toUpperCase()}
492 |                 </span>
493 |               </div>
494 | 
495 |               <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-2">
496 |                 {testCase.testName}
497 |               </h3>
498 | 
499 |               <p className="text-slate-700 dark:text-slate-300 mb-4">{testCase.description}</p>
500 | 
501 |               <div className="bg-slate-50 dark:bg-slate-700 rounded-lg p-4 mb-4">
502 |                 <h4 className="font-semibold text-slate-900 dark:text-white text-sm mb-2">
503 |                   Context
504 |                 </h4>
505 |                 <p className="text-slate-700 dark:text-slate-300 text-sm mb-4">
506 |                   {testCase.givenContext}
507 |                 </p>
508 | 
509 |                 <h4 className="font-semibold text-slate-900 dark:text-white text-sm mb-2">
510 |                   Test Steps
511 |                 </h4>
512 |                 <ol className="list-decimal list-inside space-y-1 text-slate-700 dark:text-slate-300 text-sm mb-4">
513 |                   {testCase.testSteps.map((step, stepIdx) => (
514 |                     <li key={stepIdx}>{step}</li>
515 |                   ))}
516 |                 </ol>
517 | 
518 |                 <h4 className="font-semibold text-slate-900 dark:text-white text-sm mb-2">
519 |                   Expected Outcome
520 |                 </h4>
521 |                 <p className="text-slate-700 dark:text-slate-300 text-sm mb-4">
522 |                   {testCase.expectedOutcome}
523 |                 </p>
524 | 
525 |                 {testCase.setupRequired && (
526 |                   <>
527 |                     <h4 className="font-semibold text-slate-900 dark:text-white text-sm mb-2">
528 |                       Setup Required
529 |                     </h4>
530 |                     <p className="text-slate-700 dark:text-slate-300 text-sm mb-4">
531 |                       {testCase.setupRequired}
532 |                     </p>
533 |                   </>
534 |                 )}
535 | 
536 |                 {testCase.teardownRequired && (
537 |                   <>
538 |                     <h4 className="font-semibold text-slate-900 dark:text-white text-sm mb-2">
539 |                       Teardown Required
540 |                     </h4>
541 |                     <p className="text-slate-700 dark:text-slate-300 text-sm mb-4">
542 |                       {testCase.teardownRequired}
543 |                     </p>
544 |                   </>
545 |                 )}
546 | 
547 |                 {testCase.notes && (
548 |                   <>
549 |                     <h4 className="font-semibold text-slate-900 dark:text-white text-sm mb-2">
550 |                       Notes
551 |                     </h4>
552 |                     <p className="text-slate-700 dark:text-slate-300 text-sm">{testCase.notes}</p>
553 |                   </>
554 |                 )}
555 |               </div>
556 |             </div>
557 |           ))}
558 |         </div>
559 |       </div>
560 | 
561 |       {/* Boilerplate Modal */}
562 |       {showBoilerplateModal && (
563 |         <BoilerplateModal
564 |           testCases={testCases}
565 |           onClose={() => setShowBoilerplateModal(false)}
566 |           disabledFrameworks={settings.disabledBoilerplates}
567 |         />
568 |       )}
569 |     </div>
570 |   );
571 | }
572 | 


--------------------------------------------------------------------------------