├── .dockerignore ├── .gitignore ├── Dockerfile ├── LICENSE ├── README.md ├── bun.lockb ├── components.json ├── deploy.sh ├── docs ├── ARCHITECTURE.md ├── CALCULATOR_SPECIFICATION.md ├── COMPONENTS.md ├── DEPLOYMENT.md ├── QUICKSTART.md ├── README.md ├── REQUIREMENTS.md ├── TUTORIAL.md ├── UI_SPECIFICATION.md └── research.md ├── eslint.config.js ├── fly.toml ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico ├── og-image-orginal.png ├── og-image.png └── placeholder.svg ├── src ├── App.css ├── App.tsx ├── components │ ├── layout │ │ ├── AppLayout.tsx │ │ └── NavigationBar.tsx │ └── ui │ │ ├── accordion.tsx │ │ ├── alert-dialog.tsx │ │ ├── alert.tsx │ │ ├── aspect-ratio.tsx │ │ ├── avatar.tsx │ │ ├── badge.tsx │ │ ├── breadcrumb.tsx │ │ ├── button.tsx │ │ ├── calendar.tsx │ │ ├── card.tsx │ │ ├── carousel.tsx │ │ ├── chart.tsx │ │ ├── checkbox.tsx │ │ ├── collapsible.tsx │ │ ├── command.tsx │ │ ├── context-menu.tsx │ │ ├── dialog.tsx │ │ ├── drawer.tsx │ │ ├── dropdown-menu.tsx │ │ ├── form.tsx │ │ ├── hover-card.tsx │ │ ├── input-otp.tsx │ │ ├── input.tsx │ │ ├── label.tsx │ │ ├── menubar.tsx │ │ ├── navigation-menu.tsx │ │ ├── pagination.tsx │ │ ├── popover.tsx │ │ ├── progress.tsx │ │ ├── radio-group.tsx │ │ ├── resizable.tsx │ │ ├── scroll-area.tsx │ │ ├── select.tsx │ │ ├── separator.tsx │ │ ├── sheet.tsx │ │ ├── sidebar.tsx │ │ ├── skeleton.tsx │ │ ├── slider.tsx │ │ ├── sonner.tsx │ │ ├── switch.tsx │ │ ├── table.tsx │ │ ├── tabs.tsx │ │ ├── textarea.tsx │ │ ├── toast.tsx │ │ ├── toaster.tsx │ │ ├── toggle-group.tsx │ │ ├── toggle.tsx │ │ ├── tooltip.tsx │ │ └── use-toast.ts ├── context │ └── CalculatorContext.tsx ├── docs │ └── sections │ │ └── project-setup.mdx ├── hooks │ ├── use-mobile.tsx │ └── use-toast.ts ├── index.css ├── lib │ └── utils.ts ├── main.tsx ├── pages │ ├── AgentConfig.tsx │ ├── Documentation.tsx │ ├── HumanComparison.tsx │ ├── Index.tsx │ ├── LLMParameters.tsx │ ├── OverheadCalculator.tsx │ ├── ProjectSetup.tsx │ └── Results.tsx ├── styles │ └── globals.css └── vite-env.d.ts ├── tailwind.config.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.dockerignore: -------------------------------------------------------------------------------- 1 | # flyctl launch added from .gitignore 2 | # Logs 3 | **/logs 4 | **/*.log 5 | **/npm-debug.log* 6 | **/yarn-debug.log* 7 | **/yarn-error.log* 8 | **/pnpm-debug.log* 9 | **/lerna-debug.log* 10 | 11 | **/node_modules 12 | **/dist 13 | **/dist-ssr 14 | **/*.local 15 | 16 | # Editor directories and files 17 | **/.vscode/* 18 | !**/.vscode/extensions.json 19 | **/.idea 20 | **/.DS_Store 21 | **/*.suo 22 | **/*.ntvs* 23 | **/*.njsproj 24 | **/*.sln 25 | **/*.sw? 26 | **/.env 27 | fly.toml 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | .env -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM heroku/builder:22 as builder 2 | 3 | # Set working directory 4 | WORKDIR /app 5 | 6 | # Copy package files 7 | COPY package*.json ./ 8 | 9 | # Install dependencies 10 | RUN npm install 11 | 12 | # Copy source code 13 | COPY . . 14 | 15 | # Build the application 16 | RUN npm run build 17 | 18 | # Runtime stage 19 | FROM node:18-slim 20 | 21 | WORKDIR /app 22 | 23 | # Install serve to host the static files 24 | RUN npm install -g serve 25 | 26 | # Copy built assets from builder 27 | COPY --from=builder /app/dist ./dist 28 | 29 | # Expose port 30 | EXPOSE 8080 31 | 32 | # Start the server 33 | CMD ["serve", "-s", "dist", "-l", "8080"] 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 AiCodeCalc 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AiCodeCalc - LLM Development Efficiency Calculator 2 | 3 | AiCodeCalc is a sophisticated calculator designed to analyze and compare the costs and efficiency of LLM-powered development versus traditional human development. This tool helps organizations make data-driven decisions about implementing AI-assisted development workflows. 4 | 5 | ![AiCodeCalc Screenshot](public/og-image.png) 6 | 7 | ## Overview 8 | 9 | AiCodeCalc provides detailed cost and efficiency analysis by considering multiple factors: 10 | 11 | - Project complexity and scope 12 | - LLM model configurations and costs 13 | - Development overhead factors 14 | - Human resource metrics 15 | - Agent system configurations 16 | - Operational expenses 17 | 18 | ## Key Benefits 19 | 20 | - **Cost Analysis**: Compare direct costs between LLM-powered and human development 21 | - **Efficiency Metrics**: Analyze time savings and productivity improvements 22 | - **Resource Optimization**: Identify optimal configurations for LLM usage 23 | - **Risk Assessment**: Evaluate overhead factors and potential bottlenecks 24 | - **Team Planning**: Make informed decisions about resource allocation 25 | 26 | ## Features 27 | 28 | - **Project Setup** 29 | - Lines of code estimation 30 | - Complexity assessment 31 | - Timeline planning 32 | 33 | - **LLM Configuration** 34 | - Multiple model support 35 | - Usage share optimization 36 | - Cost tracking per 1K tokens 37 | 38 | - **Human Metrics** 39 | - Team size and composition 40 | - Experience level consideration 41 | - Productivity metrics 42 | - Overhead time allocation 43 | 44 | - **Agent Configuration** 45 | - Multiple operation modes (single, swarm, parallel) 46 | - Advanced memory management 47 | - Resource allocation strategies 48 | - Performance monitoring 49 | 50 | - **Results Analysis** 51 | - Detailed cost breakdowns 52 | - Time comparisons 53 | - Token usage analytics 54 | - Efficiency metrics 55 | - OPEX calculations 56 | 57 | ## Installation 58 | 59 | 1. Clone the repository: 60 | ```bash 61 | git clone https://github.com/ruvnet/AiCodeCalc.git 62 | cd AiCodeCalc 63 | ``` 64 | 65 | 2. Install dependencies: 66 | ```bash 67 | npm install 68 | # or 69 | yarn install 70 | # or 71 | bun install 72 | ``` 73 | 74 | 3. Start the development server: 75 | ```bash 76 | npm run dev 77 | # or 78 | yarn dev 79 | # or 80 | bun dev 81 | ``` 82 | 83 | ## Usage 84 | 85 | 1. **Project Setup** 86 | - Enter your project details including total lines of code and complexity 87 | - Specify project timeline and requirements 88 | 89 | 2. **Configure LLM Models** 90 | - Select and configure LLM models (default: GPT-4o 60%, GPT-4o-mini 40%) 91 | - Adjust usage shares and cost parameters 92 | 93 | 3. **Human Development Metrics** 94 | - Input team size and composition 95 | - Set productivity metrics and overhead factors 96 | 97 | 4. **Review Results** 98 | - Analyze cost comparisons 99 | - Review efficiency metrics 100 | - Export or share analysis results 101 | 102 | ## Technologies Used 103 | 104 | - **Frontend Framework**: React with TypeScript 105 | - **Build Tool**: Vite 106 | - **UI Components**: shadcn/ui 107 | - **Styling**: Tailwind CSS 108 | - **State Management**: React Context 109 | - **Deployment**: Fly.io 110 | 111 | ## Deployment 112 | 113 | The application can be deployed using the included Dockerfile and deployment scripts: 114 | 115 | ```bash 116 | # Build the Docker image 117 | docker build -t aicalc . 118 | 119 | # Deploy to fly.io 120 | fly deploy 121 | ``` 122 | 123 | ## Development 124 | 125 | To contribute to the project: 126 | 127 | 1. Fork the repository 128 | 2. Create a feature branch 129 | 3. Make your changes 130 | 4. Submit a pull request 131 | 132 | ## License 133 | 134 | [MIT License](LICENSE) 135 | 136 | ## Support 137 | 138 | For support, please open an issue in the GitHub repository or contact the development team. 139 | -------------------------------------------------------------------------------- /bun.lockb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruvnet/AiCodeCalc/29fbf90f42ae396f48d85d348bb886020a9dd082/bun.lockb -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": false, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "src/index.css", 9 | "baseColor": "slate", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | } 20 | } -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Exit on error 4 | set -e 5 | 6 | echo "🚀 Starting deployment process for AiCodeCalc..." 7 | 8 | # Ensure flyctl is in PATH 9 | export FLYCTL_INSTALL="/home/codespace/.fly" 10 | export PATH="$FLYCTL_INSTALL/bin:$PATH" 11 | 12 | # Install dependencies 13 | echo "📦 Installing dependencies..." 14 | npm install 15 | 16 | # Build the application 17 | echo "🔨 Building the application..." 18 | npm run build 19 | 20 | # Deploy to fly.io 21 | echo "🌐 Deploying to fly.io..." 22 | flyctl deploy --remote-only 23 | 24 | echo "✅ Deployment complete! Your app should be live at https://aicodecalc.fly.dev" 25 | -------------------------------------------------------------------------------- /docs/ARCHITECTURE.md: -------------------------------------------------------------------------------- 1 | # AiCodeCalc Technical Architecture 2 | 3 | ## System Architecture 4 | 5 | ### Frontend Architecture 6 | 7 | ``` 8 | AiCodeCalc 9 | ├── Core Application 10 | │ ├── Router 11 | │ ├── Context Providers 12 | │ └── Theme Provider 13 | │ 14 | ├── Calculator Engine 15 | │ ├── Cost Calculations 16 | │ ├── Token Estimations 17 | │ └── Comparison Logic 18 | │ 19 | ├── UI Components 20 | │ ├── Navigation 21 | │ ├── Forms 22 | │ └── Visualizations 23 | │ 24 | └── Data Management 25 | ├── State Management 26 | ├── Local Storage 27 | └── Export Services 28 | ``` 29 | 30 | ## Technical Design Decisions 31 | 32 | ### 1. Framework Selection 33 | - **React + TypeScript**: Chosen for type safety and component reusability 34 | - **Vite.js**: Selected for fast development and optimal build performance 35 | - **Tailwind CSS**: Utilized for consistent, maintainable styling 36 | 37 | ### 2. State Management 38 | - React Context for global state 39 | - Local component state for UI-specific data 40 | - Custom hooks for reusable logic 41 | 42 | ### 3. Component Architecture 43 | - Atomic design principles 44 | - Composition over inheritance 45 | - Shared component library (Shadcn UI) 46 | 47 | ### 4. Responsive Design 48 | - Mobile-first approach 49 | - Fluid typography 50 | - Breakpoint system 51 | - Flexible grid layouts 52 | 53 | ### 5. Performance Considerations 54 | - Lazy loading of routes 55 | - Memoization of expensive calculations 56 | - Debounced input handlers 57 | - Optimized rendering with React.memo 58 | 59 | ## Core Systems 60 | 61 | ### 1. Calculator Engine 62 | - Pure TypeScript implementation 63 | - Modular calculation functions 64 | - Memoized results caching 65 | - Error boundary protection 66 | 67 | ### 2. State Management System 68 | ```typescript 69 | interface CalculatorState { 70 | project: ProjectSetup; 71 | llmParams: LLMParameters; 72 | overheads: OverheadFactors; 73 | humanComparison: HumanDevParams; 74 | results: CalculationResults; 75 | } 76 | ``` 77 | 78 | ### 3. Theme System 79 | - Dark mode by default 80 | - CSS variables for theming 81 | - Consistent color palette 82 | - Accessibility considerations 83 | 84 | ### 4. Navigation System 85 | - Tab-based navigation 86 | - Progress tracking 87 | - State persistence 88 | - Mobile-optimized menu 89 | 90 | ## Data Flow 91 | 92 | ``` 93 | User Input → Validation → State Update → Calculation → UI Update 94 | ↑ ↓ ↓ ↓ ↓ 95 | └──────────┴────────────┴─────────────┴────────────┘ 96 | Real-time Updates 97 | ``` 98 | 99 | ## Security Considerations 100 | 101 | 1. **Data Protection** 102 | - All calculations performed client-side 103 | - No sensitive data transmission 104 | - Optional local storage encryption 105 | 106 | 2. **Input Validation** 107 | - Type-safe interfaces 108 | - Boundary checking 109 | - Sanitization of inputs 110 | 111 | ## Error Handling 112 | 113 | 1. **Calculation Errors** 114 | - Graceful degradation 115 | - User-friendly error messages 116 | - Logging and recovery 117 | 118 | 2. **UI Error Boundaries** 119 | - Component-level isolation 120 | - Fallback UI components 121 | - Error reporting 122 | 123 | ## Testing Strategy 124 | 125 | 1. **Unit Tests** 126 | - Calculator logic 127 | - Component rendering 128 | - State management 129 | 130 | 2. **Integration Tests** 131 | - User flows 132 | - State transitions 133 | - Cross-component interaction 134 | 135 | 3. **E2E Tests** 136 | - Critical user journeys 137 | - Mobile responsiveness 138 | - Performance benchmarks 139 | 140 | ## Build and Deployment 141 | 142 | 1. **Build Process** 143 | - TypeScript compilation 144 | - Asset optimization 145 | - Bundle analysis 146 | 147 | 2. **Deployment Pipeline** 148 | - Automated testing 149 | - Production builds 150 | - Static hosting 151 | 152 | ## Performance Metrics 153 | 154 | 1. **Target Metrics** 155 | - First contentful paint < 1.5s 156 | - Time to interactive < 3s 157 | - Input latency < 100ms 158 | 159 | 2. **Optimization Techniques** 160 | - Code splitting 161 | - Tree shaking 162 | - Asset optimization 163 | - Performance monitoring 164 | 165 | ## Future Considerations 166 | 167 | 1. **Scalability** 168 | - Additional LLM models 169 | - New calculation features 170 | - Enhanced visualizations 171 | 172 | 2. **Maintainability** 173 | - Documentation 174 | - Code organization 175 | - Component library 176 | 177 | 3. **Extensibility** 178 | - Plugin system 179 | - API integration 180 | - Custom calculations 181 | -------------------------------------------------------------------------------- /docs/CALCULATOR_SPECIFICATION.md: -------------------------------------------------------------------------------- 1 | # AiCodeCalc Calculator Specification 2 | 3 | ## Overview 4 | 5 | This document provides a comprehensive specification of the mathematical models, formulas, and calculations used in the AiCodeCalc system for estimating LLM-based development costs and comparing them with traditional human development costs. 6 | 7 | ## Core Parameters 8 | 9 | ### Project Parameters 10 | ```typescript 11 | interface ProjectParameters { 12 | totalLoc: number; // Total lines of code 13 | complexity: ComplexityLevel;// Language/domain complexity 14 | timeline: number; // Project timeline in days 15 | } 16 | ``` 17 | 18 | ### LLM Cost Parameters 19 | ```typescript 20 | interface LLMCostParameters { 21 | inputTokenCost: number; // Cost per 1000 input tokens (Cin) 22 | outputTokenCost: number; // Cost per 1000 output tokens (Cout) 23 | tokensPerLoc: number; // Average tokens per line of code (r) 24 | inputTokenFraction: number; // Fraction of tokens that are input (βin) 25 | } 26 | ``` 27 | 28 | ### Overhead Factors 29 | ```typescript 30 | interface OverheadFactors { 31 | agenticOverhead: number; // Iteration overhead factor (α) 32 | retryFactor: number; // Retry/error factor (ε) 33 | bugFixOverhead: number; // Bug-fix overhead factor (δ) 34 | testingOverhead: number; // Testing overhead factor (γ) 35 | } 36 | ``` 37 | 38 | ### Human Development Parameters 39 | ```typescript 40 | interface HumanDevParameters { 41 | hourlyRate: number; // Cost per hour (CostHumanHourly) 42 | locPerDay: number; // Lines of code per day (LoCHumanDay) 43 | errorRate: number; // Errors per KLoC (ErrorsPerLoCHuman) 44 | teamSize: number; // Number of developers 45 | } 46 | ``` 47 | 48 | ## Mathematical Models 49 | 50 | ### 1. Combined Overhead Factor (Ω) 51 | 52 | The composite overhead factor combines all individual overhead multipliers: 53 | 54 | ```typescript 55 | Ω = α × ε × δ × γ 56 | 57 | where: 58 | α = Agentic overhead (1.0 - 3.0) 59 | ε = Retry factor (typically 1.1 - 2.0) 60 | δ = Bug-fix overhead (typically 1.1 - 2.0) 61 | γ = Testing overhead (typically 1.1 - 2.0) 62 | ``` 63 | 64 | ### 2. Token Calculations 65 | 66 | #### 2.1 Total Tokens with Overhead 67 | ```typescript 68 | TcodeTotal = Ω × LoC × r 69 | 70 | where: 71 | Ω = Combined overhead factor 72 | LoC = Total lines of code 73 | r = Tokens per line of code 74 | ``` 75 | 76 | #### 2.2 Input/Output Token Split 77 | ```typescript 78 | Tin = βin × TcodeTotal 79 | Tout = (1 - βin) × TcodeTotal 80 | 81 | where: 82 | βin = Input token fraction (typically 0.3) 83 | ``` 84 | 85 | ### 3. Cost Calculations 86 | 87 | #### 3.1 Single Model Cost 88 | ```typescript 89 | CostProject = (Tin/1000) × Cin + (Tout/1000) × Cout 90 | 91 | where: 92 | Cin = Cost per 1000 input tokens 93 | Cout = Cost per 1000 output tokens 94 | ``` 95 | 96 | #### 3.2 Multi-Model Cost 97 | ```typescript 98 | For each model m: 99 | Costm = (βinm × θm × Ωm × LoC × r/1000) × Cinm + 100 | ((1 - βinm) × θm × Ωm × LoC × r/1000) × Coutm 101 | 102 | Total Cost = Σ Costm 103 | 104 | where: 105 | θm = Usage fraction for model m 106 | Ωm = Overhead factor for model m 107 | Cinm, Coutm = Cost rates for model m 108 | ``` 109 | 110 | ### 4. Error and Retry Calculations 111 | 112 | #### 4.1 Detailed Retry Factor 113 | ```typescript 114 | ε = 1 + pfail × nretries 115 | 116 | where: 117 | pfail = Probability of failure/invalid response 118 | nretries = Average number of extra attempts per failure 119 | ``` 120 | 121 | ### 5. Human Development Calculations 122 | 123 | #### 5.1 Development Timeline 124 | ```typescript 125 | DaysHuman = LoC / LoCHumanDay 126 | ``` 127 | 128 | #### 5.2 Human Development Cost 129 | ```typescript 130 | CostHumanTotal = DaysHuman × 8 × CostHumanHourly × TeamSize 131 | ``` 132 | 133 | ## Implementation Guidelines 134 | 135 | ### 1. Real-time Calculation Flow 136 | 137 | ```typescript 138 | interface CalculationFlow { 139 | 1. Validate inputs 140 | 2. Calculate overhead factors 141 | 3. Compute token requirements 142 | 4. Calculate LLM costs 143 | 5. Calculate human comparison 144 | 6. Update UI with results 145 | } 146 | ``` 147 | 148 | ### 2. Validation Rules 149 | 150 | ```typescript 151 | const ValidationRules = { 152 | LoC: { min: 1, max: 1000000 }, 153 | α: { min: 1.0, max: 3.0 }, 154 | ε: { min: 1.0, max: 2.0 }, 155 | δ: { min: 1.0, max: 2.0 }, 156 | γ: { min: 1.0, max: 2.0 }, 157 | βin: { min: 0.0, max: 1.0 }, 158 | tokensPerLoc: { min: 1, max: 20 } 159 | }; 160 | ``` 161 | 162 | ### 3. Default Values 163 | 164 | ```typescript 165 | const DefaultValues = { 166 | α: 1.5, // Moderate agentic overhead 167 | ε: 1.1, // 10% retry rate 168 | δ: 1.2, // 20% bug-fix overhead 169 | γ: 1.3, // 30% testing overhead 170 | βin: 0.3, // 30% input tokens 171 | tokensPerLoc: 5 // 5 tokens per LoC average 172 | }; 173 | ``` 174 | 175 | ## Calculation Examples 176 | 177 | ### Example 1: Basic Project Calculation 178 | ```typescript 179 | Input: 180 | - LoC = 10000 181 | - α = 1.5 182 | - ε = 1.1 183 | - δ = 1.2 184 | - γ = 1.3 185 | - r = 5 tokens/LoC 186 | - βin = 0.3 187 | - Cin = $0.005 188 | - Cout = $0.015 189 | 190 | Calculations: 191 | 1. Ω = 1.5 × 1.1 × 1.2 × 1.3 = 2.574 192 | 2. TcodeTotal = 2.574 × 10000 × 5 = 128,700 tokens 193 | 3. Tin = 0.3 × 128,700 = 38,610 tokens 194 | 4. Tout = 0.7 × 128,700 = 90,090 tokens 195 | 5. Cost = (38,610/1000 × $0.005) + (90,090/1000 × $0.015) 196 | = $1.54 + $1.35 197 | = $2.89 198 | ``` 199 | 200 | ### Example 2: Human Comparison 201 | ```typescript 202 | Input: 203 | - LoC = 10000 204 | - LoCHumanDay = 50 205 | - CostHumanHourly = $80 206 | - TeamSize = 1 207 | 208 | Calculations: 209 | 1. DaysHuman = 10000 / 50 = 200 days 210 | 2. CostHumanTotal = 200 × 8 × $80 × 1 = $128,000 211 | ``` 212 | 213 | ## Performance Optimization 214 | 215 | ### 1. Calculation Optimizations 216 | - Memoize intermediate results 217 | - Debounce real-time calculations 218 | - Use efficient math operations 219 | 220 | ### 2. Update Strategies 221 | - Batch UI updates 222 | - Calculate only changed values 223 | - Use progressive enhancement 224 | 225 | ## Error Handling 226 | 227 | ### 1. Input Validation 228 | - Range checking 229 | - Type validation 230 | - Dependency validation 231 | 232 | ### 2. Calculation Error Handling 233 | - Handle division by zero 234 | - Check for overflow 235 | - Validate results 236 | 237 | ## Future Extensions 238 | 239 | ### 1. Additional Metrics 240 | - ROI calculations 241 | - Break-even analysis 242 | - Sensitivity analysis 243 | 244 | ### 2. Advanced Features 245 | - Custom overhead factors 246 | - Model comparison tools 247 | - Cost optimization suggestions 248 | -------------------------------------------------------------------------------- /docs/DEPLOYMENT.md: -------------------------------------------------------------------------------- 1 | # AiCodeCalc Deployment Guide 2 | 3 | ## Development Environment Setup 4 | 5 | ### Prerequisites 6 | - Node.js (v18.0.0 or higher) 7 | - npm (v9.0.0 or higher) 8 | - Git 9 | 10 | ### Initial Setup 11 | ```bash 12 | # Clone the repository 13 | git clone 14 | cd aicodecalc 15 | 16 | # Install dependencies 17 | npm install 18 | 19 | # Start development server 20 | npm run dev 21 | ``` 22 | 23 | ## Project Structure 24 | ``` 25 | aicodecalc/ 26 | ├── src/ # Source code 27 | ├── public/ # Static assets 28 | ├── dist/ # Build output 29 | ├── tests/ # Test files 30 | └── docs/ # Documentation 31 | ``` 32 | 33 | ## Environment Configuration 34 | 35 | ### Development (.env.development) 36 | ```env 37 | VITE_APP_TITLE=AiCodeCalc (Dev) 38 | VITE_APP_ENV=development 39 | VITE_APP_DEBUG=true 40 | ``` 41 | 42 | ### Production (.env.production) 43 | ```env 44 | VITE_APP_TITLE=AiCodeCalc 45 | VITE_APP_ENV=production 46 | VITE_APP_DEBUG=false 47 | ``` 48 | 49 | ## Build Process 50 | 51 | ### Development Build 52 | ```bash 53 | # Start development server 54 | npm run dev 55 | 56 | # Run with specific port 57 | npm run dev -- --port 3000 58 | ``` 59 | 60 | ### Production Build 61 | ```bash 62 | # Create production build 63 | npm run build 64 | 65 | # Preview production build 66 | npm run preview 67 | ``` 68 | 69 | ### Build Configuration (vite.config.ts) 70 | ```typescript 71 | export default defineConfig({ 72 | build: { 73 | target: 'es2015', 74 | outDir: 'dist', 75 | sourcemap: true, 76 | minify: 'terser', 77 | cssMinify: true, 78 | rollupOptions: { 79 | output: { 80 | manualChunks: { 81 | vendor: ['react', 'react-dom'], 82 | charts: ['chart.js', 'recharts'] 83 | } 84 | } 85 | } 86 | } 87 | }) 88 | ``` 89 | 90 | ## Deployment Workflows 91 | 92 | ### 1. Local Development 93 | 1. Clone repository 94 | 2. Install dependencies 95 | 3. Set up environment variables 96 | 4. Run development server 97 | 5. Make changes 98 | 6. Test locally 99 | 7. Commit changes 100 | 101 | ### 2. Staging Deployment 102 | 1. Push to staging branch 103 | 2. Automated tests run 104 | 3. Build staging version 105 | 4. Deploy to staging environment 106 | 5. Run integration tests 107 | 6. Manual QA review 108 | 109 | ### 3. Production Deployment 110 | 1. Merge to main branch 111 | 2. Trigger production build 112 | 3. Run full test suite 113 | 4. Generate deployment artifacts 114 | 5. Deploy to production 115 | 6. Run smoke tests 116 | 7. Monitor metrics 117 | 118 | ## Performance Optimization 119 | 120 | ### 1. Build Optimization 121 | - Code splitting 122 | - Tree shaking 123 | - Asset optimization 124 | - Bundle analysis 125 | 126 | ### 2. Runtime Optimization 127 | - Lazy loading 128 | - Caching strategies 129 | - Performance monitoring 130 | - Error tracking 131 | 132 | ### 3. Asset Optimization 133 | ```bash 134 | # Optimize images 135 | npm run optimize-images 136 | 137 | # Analyze bundle 138 | npm run analyze 139 | ``` 140 | 141 | ## Monitoring and Logging 142 | 143 | ### 1. Performance Monitoring 144 | - Page load times 145 | - Time to interactive 146 | - First contentful paint 147 | - Largest contentful paint 148 | 149 | ### 2. Error Tracking 150 | - Runtime errors 151 | - API failures 152 | - Performance issues 153 | - User interactions 154 | 155 | ### 3. Usage Analytics 156 | - User engagement 157 | - Feature usage 158 | - Error rates 159 | - User flows 160 | 161 | ## Security Measures 162 | 163 | ### 1. Build Security 164 | - Dependency scanning 165 | - Code analysis 166 | - Security testing 167 | - Vulnerability checks 168 | 169 | ### 2. Runtime Security 170 | - Input validation 171 | - XSS prevention 172 | - CSRF protection 173 | - Content Security Policy 174 | 175 | ## Continuous Integration 176 | 177 | ### GitHub Actions Workflow 178 | ```yaml 179 | name: CI/CD Pipeline 180 | 181 | on: 182 | push: 183 | branches: [ main, staging ] 184 | pull_request: 185 | branches: [ main ] 186 | 187 | jobs: 188 | build: 189 | runs-on: ubuntu-latest 190 | steps: 191 | - uses: actions/checkout@v2 192 | - name: Setup Node.js 193 | uses: actions/setup-node@v2 194 | with: 195 | node-version: '18' 196 | - name: Install dependencies 197 | run: npm ci 198 | - name: Run tests 199 | run: npm test 200 | - name: Build 201 | run: npm run build 202 | ``` 203 | 204 | ## Deployment Checklist 205 | 206 | ### Pre-deployment 207 | - [ ] All tests passing 208 | - [ ] Build successful 209 | - [ ] Dependencies updated 210 | - [ ] Environment variables set 211 | - [ ] Documentation updated 212 | 213 | ### Deployment 214 | - [ ] Backup current version 215 | - [ ] Deploy new version 216 | - [ ] Run smoke tests 217 | - [ ] Check monitoring 218 | - [ ] Verify functionality 219 | 220 | ### Post-deployment 221 | - [ ] Monitor error rates 222 | - [ ] Check performance metrics 223 | - [ ] Verify analytics 224 | - [ ] Update documentation 225 | - [ ] Tag release 226 | 227 | ## Rollback Procedures 228 | 229 | ### 1. Immediate Rollback 230 | ```bash 231 | # Revert to previous version 232 | npm run rollback 233 | 234 | # Verify rollback 235 | npm run verify 236 | ``` 237 | 238 | ### 2. Gradual Rollback 239 | 1. Identify issues 240 | 2. Stop new deployments 241 | 3. Scale down new version 242 | 4. Scale up previous version 243 | 5. Verify stability 244 | 6. Update documentation 245 | 246 | ## Maintenance 247 | 248 | ### 1. Regular Updates 249 | - Dependency updates 250 | - Security patches 251 | - Performance improvements 252 | - Bug fixes 253 | 254 | ### 2. Monitoring 255 | - Server health 256 | - Application performance 257 | - Error rates 258 | - User feedback 259 | 260 | ### 3. Backup Strategy 261 | - Code repository 262 | - Database backups 263 | - Configuration backups 264 | - Documentation updates 265 | 266 | ## Troubleshooting 267 | 268 | ### Common Issues 269 | 1. Build failures 270 | - Check dependencies 271 | - Verify environment variables 272 | - Review build logs 273 | 274 | 2. Performance issues 275 | - Check bundle size 276 | - Review lazy loading 277 | - Analyze network requests 278 | 279 | 3. Runtime errors 280 | - Check error logs 281 | - Review monitoring 282 | - Test in isolation 283 | 284 | ## Support and Documentation 285 | 286 | ### 1. Technical Support 287 | - GitHub issues 288 | - Documentation 289 | - Support channels 290 | - Bug reporting 291 | 292 | ### 2. User Support 293 | - Usage guides 294 | - FAQs 295 | - Troubleshooting guides 296 | - Contact information 297 | 298 | ## Version Control 299 | 300 | ### 1. Branching Strategy 301 | - main: Production code 302 | - staging: Pre-production testing 303 | - develop: Development work 304 | - feature/*: New features 305 | - hotfix/*: Emergency fixes 306 | 307 | ### 2. Release Process 308 | 1. Version bump 309 | 2. Changelog update 310 | 3. Tag release 311 | 4. Deploy to staging 312 | 5. Deploy to production 313 | 314 | ## Future Considerations 315 | 316 | ### 1. Scalability 317 | - Container support 318 | - Cloud deployment 319 | - CDN integration 320 | - Load balancing 321 | 322 | ### 2. Monitoring 323 | - Advanced metrics 324 | - User analytics 325 | - Performance tracking 326 | - Error reporting 327 | 328 | ### 3. Automation 329 | - Deployment automation 330 | - Testing automation 331 | - Documentation generation 332 | - Release management 333 | -------------------------------------------------------------------------------- /docs/QUICKSTART.md: -------------------------------------------------------------------------------- 1 | # AiCodeCalc Quick Start Guide 2 | 3 | ## What is AiCodeCalc? 4 | AiCodeCalc helps you evaluate and implement AI-powered code development by calculating costs, efficiency, and resource requirements. It compares traditional human development with AI-assisted development using advanced LLM models. 5 | 6 | ## 5-Minute Setup 7 | 8 | ### Prerequisites 9 | - Node.js v18+ 10 | - npm or bun 11 | - Git 12 | 13 | ### Installation 14 | ```bash 15 | # Clone repository 16 | git clone https://github.com/ruvnet/AiCodeCalc.git 17 | cd AiCodeCalc 18 | 19 | # Install dependencies 20 | npm install 21 | 22 | # Start development server 23 | npm run dev 24 | 25 | # Open in browser 26 | open http://localhost:3000 27 | ``` 28 | 29 | ## Quick Configuration Steps 30 | 31 | ### 1. Project Setup 32 | - Enter your project's total lines of code 33 | - Select complexity level (Simple/Moderate/Complex/High-verbosity) 34 | - Set development timeline 35 | - **Detailed guide**: See [Project Setup Module](TUTORIAL.md#1-project-setup-module) 36 | 37 | ### 2. LLM Configuration 38 | Default configuration (recommended for first project): 39 | - GPT-4o: 60% usage 40 | - GPT-4o-mini: 40% usage 41 | - **Detailed guide**: See [LLM Configuration](TUTORIAL.md#2-llm-configuration) 42 | 43 | ### 3. Agent Configuration 44 | Start with Single Agent mode for your first project: 45 | - Set agent count to 1 46 | - Use static resource allocation 47 | - Enable debug mode for monitoring 48 | - **Detailed guide**: See [Agent Configuration](TUTORIAL.md#3-agent-configuration) 49 | 50 | ### 4. Human Development Metrics 51 | Enter your team's metrics: 52 | - Team size 53 | - Average hourly rate 54 | - Lines of code per day 55 | - Meeting and overhead time 56 | - **Detailed guide**: See [Human Development Integration](TUTORIAL.md#4-human-development-integration) 57 | 58 | ### 5. Review Results 59 | Analyze the comparison: 60 | - Cost analysis 61 | - Time savings 62 | - Resource utilization 63 | - Token usage 64 | - **Detailed guide**: See [Results Analysis](TUTORIAL.md#5-results-analysis) 65 | 66 | ## Next Steps 67 | 68 | ### Optimization 69 | 1. Review the [Best Practices](TUTORIAL.md#best-practices) section 70 | 2. Experiment with different agent modes 71 | 3. Fine-tune model allocation 72 | 4. Monitor and adjust based on results 73 | 74 | ### Advanced Features 75 | - Multi-agent configuration 76 | - Memory management 77 | - Resource optimization 78 | - Communication protocols 79 | - **Full details**: See [Advanced Configuration](TUTORIAL.md#advanced-configuration) 80 | 81 | ### Common Issues 82 | If you encounter problems, check: 83 | 1. [Troubleshooting Guide](TUTORIAL.md#troubleshooting-guide) 84 | 2. [GitHub Issues](https://github.com/ruvnet/AiCodeCalc/issues) 85 | 3. [Community Support](https://github.com/ruvnet/AiCodeCalc/discussions) 86 | 87 | ## Getting Help 88 | - Read the full [Tutorial](TUTORIAL.md) 89 | - Join our [Community](https://github.com/ruvnet/AiCodeCalc/discussions) 90 | - Report issues on [GitHub](https://github.com/ruvnet/AiCodeCalc/issues) 91 | 92 | Remember: Start small, monitor results, and gradually increase AI involvement as you become more comfortable with the system. 93 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # 🚀 AiCodeCalc Documentation 2 | 3 | ![AiCodeCalc Banner](../public/og-image.png) 4 | 5 | ## Transform Your Development Process with AI 6 | 7 | AiCodeCalc is a sophisticated web-based calculator designed to estimate the financial and temporal costs associated with using Large Language Models (LLMs) for agent-based software development. Built with modern web technologies including Vite.js, React, and Tailwind CSS, it provides an intuitive dark-themed interface optimized for both desktop and mobile use. 8 | 9 | The calculator features a cyberpunk-inspired design with real-time calculations, interactive visualizations, and comprehensive analytics. It helps organizations make data-driven decisions about AI implementation by: 10 | 11 | - **Cost Analysis**: Calculate exact token usage, API costs, and operational expenses 12 | - **Time Estimation**: Compare development timelines between traditional and AI-assisted approaches 13 | - **Resource Planning**: Optimize allocation of both AI and human resources 14 | - **Efficiency Metrics**: Track and analyze performance indicators and quality metrics 15 | 16 | With support for multiple LLM models, advanced agent configurations, and detailed reporting, AiCodeCalc provides enterprise-grade analysis capabilities in an accessible web interface. 17 | 18 | ### 💡 Why AiCodeCalc? 19 | 20 | #### Unlock Development Potential 21 | - **3x Faster Development** through optimized AI agent collaboration 22 | - **40% Cost Reduction** potential in suitable projects 23 | - **24/7 Development Capacity** with AI agents 24 | - **Seamless Human-AI Integration** for maximum efficiency 25 | 26 | #### Smart Resource Optimization 27 | - **Intelligent Model Selection** (GPT-4o & GPT-4o-mini) 28 | - **Dynamic Resource Allocation** 29 | - **Automated Cost Optimization** 30 | - **Real-time Performance Analytics** 31 | 32 | #### Enterprise-Grade Features 33 | - **Advanced Agent Configurations** 34 | - Single Agent Mode for focused tasks 35 | - Parallel Processing for speed 36 | - Swarm Intelligence for complex projects 37 | - Concurrent Operations for flexibility 38 | 39 | - **Comprehensive Analysis** 40 | - Detailed cost breakdowns 41 | - Efficiency metrics 42 | - Resource utilization 43 | - Quality indicators 44 | 45 | ## 🎯 Perfect For 46 | 47 | ### Technology Leaders 48 | - Make informed decisions about AI adoption 49 | - Optimize development resources 50 | - Reduce operational costs 51 | - Accelerate project delivery 52 | 53 | ### Development Teams 54 | - Seamless AI integration 55 | - Enhanced productivity 56 | - Reduced repetitive work 57 | - Better code quality 58 | 59 | ### Financial Planners 60 | - Clear cost projections 61 | - ROI analysis 62 | - Resource optimization 63 | - Budget planning 64 | 65 | ## 🌟 Key Features 66 | 67 | ### Intelligent Project Analysis 68 | - **Smart LOC Estimation** 69 | - Pattern-based calculations 70 | - Complexity assessment 71 | - Accurate effort prediction 72 | 73 | ### Advanced LLM Integration 74 | - **Dual Model Strategy** 75 | - GPT-4o (60%) for complex tasks 76 | - GPT-4o-mini (40%) for routine work 77 | - Optimized cost-performance ratio 78 | 79 | ### Powerful Agent Systems 80 | - **Multiple Operation Modes** 81 | - Single Agent: Perfect for small projects 82 | - Parallel: Up to 5x throughput increase 83 | - Swarm: Complex problem solving 84 | - Concurrent: Balanced performance 85 | 86 | ### Smart Resource Management 87 | - **Dynamic Allocation** 88 | - Automated scaling 89 | - Load balancing 90 | - Performance optimization 91 | 92 | ### Comprehensive Analytics 93 | - **Real-time Insights** 94 | - Cost tracking 95 | - Efficiency metrics 96 | - Quality indicators 97 | - Resource utilization 98 | 99 | ## 🚀 Getting Started 100 | 101 | ### Quick Setup 102 | ```bash 103 | git clone https://github.com/ruvnet/AiCodeCalc.git 104 | cd AiCodeCalc 105 | npm install 106 | npm run dev 107 | ``` 108 | 109 | ### Documentation Structure 110 | 111 | #### Essential Guides 112 | - [📚 Comprehensive Tutorial](TUTORIAL.md) 113 | - [⚡ Quick Start Guide](QUICKSTART.md) 114 | - [🏗️ Architecture Overview](ARCHITECTURE.md) 115 | - [📊 Calculator Specification](CALCULATOR_SPECIFICATION.md) 116 | 117 | #### Technical Details 118 | - [🧩 Component Documentation](COMPONENTS.md) 119 | - [🚀 Deployment Guide](DEPLOYMENT.md) 120 | - [📋 Requirements Specification](REQUIREMENTS.md) 121 | - [🎨 UI Specification](UI_SPECIFICATION.md) 122 | 123 | ## 🤝 Community & Support 124 | 125 | ### Join Our Community 126 | - [GitHub Discussions](https://github.com/ruvnet/AiCodeCalc/discussions) 127 | - [Issue Tracking](https://github.com/ruvnet/AiCodeCalc/issues) 128 | - [Contributing Guidelines](TUTORIAL.md#contributing) 129 | 130 | ### Enterprise Support 131 | - Custom integration assistance 132 | - Dedicated support channels 133 | - Training and workshops 134 | - Optimization consulting 135 | 136 | ## 📈 Performance Metrics 137 | 138 | ### Development Speed 139 | - Up to 300% faster development cycles 140 | - 24/7 continuous development capability 141 | - Reduced time-to-market 142 | 143 | ### Cost Efficiency 144 | - 40-60% potential cost reduction 145 | - Optimized resource utilization 146 | - Reduced overhead costs 147 | 148 | ### Quality Improvements 149 | - 90%+ code consistency 150 | - Automated quality checks 151 | - Standardized practices 152 | 153 | ## 🔒 Security & Compliance 154 | 155 | - Enterprise-grade security 156 | - Data privacy controls 157 | - Compliance monitoring 158 | - Audit trails 159 | 160 | ## 🌟 Start Transforming Your Development Today 161 | 162 | Join the future of software development with AiCodeCalc. Make informed decisions, optimize resources, and accelerate your development process with advanced AI assistance. 163 | 164 | [Get Started Now](QUICKSTART.md) | [View Documentation](TUTORIAL.md) | [Join Community](https://github.com/ruvnet/AiCodeCalc/discussions) 165 | 166 | --- 167 | 168 | ## License 169 | 170 | AiCodeCalc is released under the MIT License. See [LICENSE](../LICENSE) for details. 171 | -------------------------------------------------------------------------------- /docs/REQUIREMENTS.md: -------------------------------------------------------------------------------- 1 | # AiCodeCalc Requirements Specification 2 | 3 | ## 1. Functional Requirements 4 | 5 | ### 1.1 Project Setup 6 | - **FR1.1:** Users must be able to input project name 7 | - **FR1.2:** System must accept total lines of code (LoC) input 8 | - **FR1.3:** Users must be able to select language/domain complexity 9 | - **FR1.4:** System must allow timeline specification 10 | - **FR1.5:** All inputs must be validated with appropriate constraints 11 | 12 | ### 1.2 LLM Configuration 13 | - **FR2.1:** Support multiple LLM model selection 14 | - **FR2.2:** Allow input/output token cost configuration per model 15 | - **FR2.3:** Enable token distribution configuration 16 | - **FR2.4:** Support usage fraction allocation across models 17 | - **FR2.5:** Provide real-time cost estimation updates 18 | 19 | ### 1.3 Overhead Calculation 20 | - **FR3.1:** Support configuration of iteration overhead (α) 21 | - **FR3.2:** Allow retry factor adjustment (ε) 22 | - **FR3.3:** Enable bug-fix overhead configuration (δ) 23 | - **FR3.4:** Support testing overhead adjustment (γ) 24 | - **FR3.5:** Calculate and display composite overhead factor (Ω) 25 | 26 | ### 1.4 Human Development Comparison 27 | - **FR4.1:** Accept hourly rate input for human developers 28 | - **FR4.2:** Allow specification of LoC per day productivity 29 | - **FR4.3:** Support team size configuration 30 | - **FR4.4:** Calculate human development timeline 31 | - **FR4.5:** Compare costs between LLM and human development 32 | 33 | ### 1.5 Results and Analytics 34 | - **FR5.1:** Generate detailed cost breakdown 35 | - **FR5.2:** Provide comparative visualizations 36 | - **FR5.3:** Support data export (PDF/CSV) 37 | - **FR5.4:** Display savings calculations 38 | - **FR5.5:** Show timeline comparisons 39 | 40 | ### 1.6 Data Persistence 41 | - **FR6.1:** Save calculator state locally 42 | - **FR6.2:** Support multiple saved configurations 43 | - **FR6.3:** Allow configuration export/import 44 | - **FR6.4:** Maintain calculation history 45 | - **FR6.5:** Enable configuration presets 46 | 47 | ## 2. Non-Functional Requirements 48 | 49 | ### 2.1 Performance 50 | - **NFR1.1:** Page load time < 2 seconds 51 | - **NFR1.2:** Calculation updates < 100ms 52 | - **NFR1.3:** Smooth animations (60fps) 53 | - **NFR1.4:** Efficient memory usage 54 | - **NFR1.5:** Optimize for mobile devices 55 | 56 | ### 2.2 Usability 57 | - **NFR2.1:** Mobile-friendly interface 58 | - **NFR2.2:** Intuitive navigation 59 | - **NFR2.3:** Clear error messages 60 | - **NFR2.4:** Helpful tooltips 61 | - **NFR2.5:** Responsive design 62 | 63 | ### 2.3 Reliability 64 | - **NFR3.1:** Graceful error handling 65 | - **NFR3.2:** Data validation 66 | - **NFR3.3:** State recovery 67 | - **NFR3.4:** Offline functionality 68 | - **NFR3.5:** Input sanitization 69 | 70 | ### 2.4 Security 71 | - **NFR4.1:** Secure local storage 72 | - **NFR4.2:** Data encryption 73 | - **NFR4.3:** Input validation 74 | - **NFR4.4:** XSS prevention 75 | - **NFR4.5:** CSRF protection 76 | 77 | ### 2.5 Accessibility 78 | - **NFR5.1:** WCAG 2.1 AA compliance 79 | - **NFR5.2:** Screen reader support 80 | - **NFR5.3:** Keyboard navigation 81 | - **NFR5.4:** Color contrast compliance 82 | - **NFR5.5:** Focus management 83 | 84 | ### 2.6 Maintainability 85 | - **NFR6.1:** Modular architecture 86 | - **NFR6.2:** Code documentation 87 | - **NFR6.3:** Testing coverage 88 | - **NFR6.4:** Version control 89 | - **NFR6.5:** Dependency management 90 | 91 | ## 3. Technical Requirements 92 | 93 | ### 3.1 Development Stack 94 | - **TR1.1:** Vite.js build system 95 | - **TR1.2:** React with TypeScript 96 | - **TR1.3:** Tailwind CSS 97 | - **TR1.4:** Shadcn UI components 98 | - **TR1.5:** Chart.js/Recharts for visualizations 99 | 100 | ### 3.2 Browser Support 101 | - **TR2.1:** Chrome (latest 2 versions) 102 | - **TR2.2:** Firefox (latest 2 versions) 103 | - **TR2.3:** Safari (latest 2 versions) 104 | - **TR2.4:** Edge (latest 2 versions) 105 | - **TR2.5:** Mobile browsers 106 | 107 | ### 3.3 Development Tools 108 | - **TR3.1:** ESLint configuration 109 | - **TR3.2:** Prettier formatting 110 | - **TR3.3:** Jest testing framework 111 | - **TR3.4:** React Testing Library 112 | - **TR3.5:** Cypress for E2E testing 113 | 114 | ## 4. Calculation Requirements 115 | 116 | ### 4.1 Basic Calculations 117 | - **CR1.1:** Token cost calculation 118 | - **CR1.2:** Time estimation 119 | - **CR1.3:** Cost comparison 120 | - **CR1.4:** Overhead factors 121 | - **CR1.5:** Savings projection 122 | 123 | ### 4.2 Advanced Analytics 124 | - **CR2.1:** ROI calculation 125 | - **CR2.2:** Break-even analysis 126 | - **CR2.3:** Sensitivity analysis 127 | - **CR2.4:** Risk assessment 128 | - **CR2.5:** Trend analysis 129 | 130 | ## 5. User Interface Requirements 131 | 132 | ### 5.1 Theme 133 | - **UR1.1:** Dark mode by default 134 | - **UR1.2:** High contrast text 135 | - **UR1.3:** Neon accent colors 136 | - **UR1.4:** Professional aesthetic 137 | - **UR1.5:** Consistent branding 138 | 139 | ### 5.2 Layout 140 | - **UR2.1:** Responsive grid system 141 | - **UR2.2:** Mobile navigation 142 | - **UR2.3:** Tab-based interface 143 | - **UR2.4:** Card-based components 144 | - **UR2.5:** Flexible containers 145 | 146 | ### 5.3 Interactive Elements 147 | - **UR3.1:** Animated transitions 148 | - **UR3.2:** Interactive charts 149 | - **UR3.3:** Form validation 150 | - **UR3.4:** Loading states 151 | - **UR3.5:** Error states 152 | 153 | ## 6. Documentation Requirements 154 | 155 | ### 6.1 User Documentation 156 | - **DR1.1:** Usage guidelines 157 | - **DR1.2:** FAQ section 158 | - **DR1.3:** Tutorial content 159 | - **DR1.4:** Troubleshooting guide 160 | - **DR1.5:** Feature explanations 161 | 162 | ### 6.2 Technical Documentation 163 | - **DR2.1:** API documentation 164 | - **DR2.2:** Component documentation 165 | - **DR2.3:** Build instructions 166 | - **DR2.4:** Testing guidelines 167 | - **DR2.5:** Deployment guide 168 | 169 | ## 7. Testing Requirements 170 | 171 | ### 7.1 Unit Testing 172 | - **TR1.1:** Component testing 173 | - **TR1.2:** Utility function testing 174 | - **TR1.3:** State management testing 175 | - **TR1.4:** Hook testing 176 | - **TR1.5:** Error handling testing 177 | 178 | ### 7.2 Integration Testing 179 | - **TR2.1:** Form submission flows 180 | - **TR2.2:** Navigation flows 181 | - **TR2.3:** Data persistence 182 | - **TR2.4:** State updates 183 | - **TR2.5:** API integration 184 | 185 | ### 7.3 E2E Testing 186 | - **TR3.1:** Critical user paths 187 | - **TR3.2:** Cross-browser testing 188 | - **TR3.3:** Mobile testing 189 | - **TR3.4:** Performance testing 190 | - **TR3.5:** Accessibility testing 191 | 192 | ## 8. Deployment Requirements 193 | 194 | ### 8.1 Build Process 195 | - **DR1.1:** Automated builds 196 | - **DR1.2:** Asset optimization 197 | - **DR1.3:** Code splitting 198 | - **DR1.4:** Bundle analysis 199 | - **DR1.5:** Environment configuration 200 | 201 | ### 8.2 Deployment Process 202 | - **DR2.1:** Continuous integration 203 | - **DR2.2:** Automated testing 204 | - **DR2.3:** Version control 205 | - **DR2.4:** Release management 206 | - **DR2.5:** Monitoring setup 207 | -------------------------------------------------------------------------------- /docs/UI_SPECIFICATION.md: -------------------------------------------------------------------------------- 1 | # AiCodeCalc UI Specification 2 | 3 | ## Design Philosophy 4 | 5 | The UI follows a dark hacker-style aesthetic with a focus on: 6 | - Clean, minimalist design 7 | - High contrast for readability 8 | - Neon accent colors 9 | - Mobile-first responsive layout 10 | - Professional and technical feel 11 | 12 | ## Color Palette 13 | 14 | ```css 15 | :root { 16 | /* Base Colors */ 17 | --background-primary: #0a0a0a; 18 | --background-secondary: #121212; 19 | --text-primary: #e0e0e0; 20 | --text-secondary: #a0a0a0; 21 | 22 | /* Accent Colors */ 23 | --accent-primary: #00ff9d; /* Neon Green */ 24 | --accent-secondary: #0066ff; /* Electric Blue */ 25 | --accent-warning: #ff3e00; /* Warning Red */ 26 | 27 | /* UI Elements */ 28 | --input-background: #1a1a1a; 29 | --border-color: #333333; 30 | --hover-color: #2a2a2a; 31 | } 32 | ``` 33 | 34 | ## Typography 35 | 36 | - **Primary Font**: JetBrains Mono (for code-like aesthetic) 37 | - **Secondary Font**: Inter (for general text) 38 | - **Font Sizes**: 39 | - Headings: 2rem, 1.5rem, 1.25rem 40 | - Body: 1rem 41 | - Small Text: 0.875rem 42 | - Micro Text: 0.75rem 43 | 44 | ## Layout Structure 45 | 46 | ### Header 47 | - Fixed position 48 | - Height: 60px 49 | - Contains: Logo, Navigation Menu, Theme Toggle 50 | 51 | ### Main Navigation 52 | - Tab-based navigation 53 | - Mobile: Bottom navigation bar 54 | - Desktop: Top horizontal tabs 55 | - Progress indicator 56 | 57 | ### Content Area 58 | - Centered container 59 | - Max-width: 1200px 60 | - Padding: 1rem (mobile), 2rem (desktop) 61 | - Scrollable content 62 | 63 | ## Component Specifications 64 | 65 | ### 1. Input Fields 66 | ```css 67 | /* Styling */ 68 | background: var(--input-background); 69 | border: 1px solid var(--border-color); 70 | border-radius: 4px; 71 | padding: 0.75rem; 72 | color: var(--text-primary); 73 | ``` 74 | 75 | ### 2. Sliders 76 | - Track height: 4px 77 | - Thumb size: 16px 78 | - Active state: Neon glow effect 79 | - Value tooltip on hover 80 | 81 | ### 3. Buttons 82 | ```css 83 | /* Primary Button */ 84 | background: var(--accent-primary); 85 | color: var(--background-primary); 86 | padding: 0.75rem 1.5rem; 87 | border-radius: 4px; 88 | font-weight: 500; 89 | 90 | /* Secondary Button */ 91 | background: transparent; 92 | border: 1px solid var(--accent-primary); 93 | color: var(--accent-primary); 94 | ``` 95 | 96 | ### 4. Cards 97 | - Background: var(--background-secondary) 98 | - Border radius: 8px 99 | - Box shadow: 0 4px 6px rgba(0, 0, 0, 0.1) 100 | - Padding: 1.5rem 101 | 102 | ### 5. Charts 103 | - Grid lines: var(--border-color) 104 | - Data points: var(--accent-primary) 105 | - Tooltips: Dark background with high contrast text 106 | - Responsive sizing 107 | 108 | ## Page-Specific Layouts 109 | 110 | ### 1. Project Setup Tab 111 | ``` 112 | ┌─────────────────────────┐ 113 | │ Project Name │ 114 | ├─────────────────────────┤ 115 | │ Total Lines of Code │ 116 | ├─────────────────────────┤ 117 | │ Language Complexity │ 118 | ├─────────────────────────┤ 119 | │ Timeline │ 120 | └─────────────────────────┘ 121 | ``` 122 | 123 | ### 2. LLM Parameters Tab 124 | ``` 125 | ┌─────────────────────────┐ 126 | │ Model Selection │ 127 | ├─────────────────────────┤ 128 | │ Cost Configuration │ 129 | ├─────────────────────────┤ 130 | │ Token Distribution │ 131 | └─────────────────────────┘ 132 | ``` 133 | 134 | ### 3. Overheads Tab 135 | ``` 136 | ┌─────────────────────────┐ 137 | │ Overhead Sliders │ 138 | ├─────────────────────────┤ 139 | │ Real-time Preview │ 140 | └─────────────────────────┘ 141 | ``` 142 | 143 | ### 4. Human Comparison Tab 144 | ``` 145 | ┌─────────────────────────┐ 146 | │ Developer Metrics │ 147 | ├─────────────────────────┤ 148 | │ Cost Comparison Chart │ 149 | └─────────────────────────┘ 150 | ``` 151 | 152 | ### 5. Results Tab 153 | ``` 154 | ┌─────────────────────────┐ 155 | │ Summary Cards │ 156 | ├─────────────────────────┤ 157 | │ Detailed Charts │ 158 | ├─────────────────────────┤ 159 | │ Export Options │ 160 | └─────────────────────────┘ 161 | ``` 162 | 163 | ## Responsive Breakpoints 164 | 165 | ```css 166 | /* Mobile First Approach */ 167 | /* Base styles are for mobile */ 168 | 169 | /* Tablet (640px) */ 170 | @media (min-width: 40em) { 171 | /* Tablet-specific styles */ 172 | } 173 | 174 | /* Laptop (1024px) */ 175 | @media (min-width: 64em) { 176 | /* Desktop-specific styles */ 177 | } 178 | 179 | /* Desktop (1280px) */ 180 | @media (min-width: 80em) { 181 | /* Large screen styles */ 182 | } 183 | ``` 184 | 185 | ## Interactive Elements 186 | 187 | ### Hover States 188 | - Subtle background color change 189 | - Transition duration: 200ms 190 | - Scale transform: 1.02 for clickable elements 191 | 192 | ### Focus States 193 | - Neon glow effect 194 | - High contrast outline 195 | - Keyboard navigation support 196 | 197 | ### Active States 198 | - Scale transform: 0.98 199 | - Color intensity increase 200 | 201 | ## Loading States 202 | 203 | ### Skeletons 204 | - Pulse animation 205 | - Matching component dimensions 206 | - Subtle gradient 207 | 208 | ### Progress Indicators 209 | - Circular spinner for operations 210 | - Linear progress for steps 211 | - Color: var(--accent-primary) 212 | 213 | ## Error States 214 | 215 | ### Input Validation 216 | - Red border highlight 217 | - Error message below input 218 | - Icon indicator 219 | 220 | ### System Errors 221 | - Modal dialog 222 | - Clear error message 223 | - Recovery action button 224 | 225 | ## Animations 226 | 227 | ### Transitions 228 | - Duration: 200ms - 300ms 229 | - Timing function: ease-in-out 230 | - Properties: opacity, transform 231 | 232 | ### Micro-interactions 233 | - Button clicks 234 | - Hover effects 235 | - Focus transitions 236 | - Tab switching 237 | 238 | ## Accessibility 239 | 240 | ### Color Contrast 241 | - Meet WCAG 2.1 AA standards 242 | - Minimum contrast ratio: 4.5:1 243 | - Test all color combinations 244 | 245 | ### Keyboard Navigation 246 | - Visible focus indicators 247 | - Logical tab order 248 | - Keyboard shortcuts 249 | 250 | ### Screen Readers 251 | - ARIA labels 252 | - Role attributes 253 | - Meaningful alt text 254 | - Skip links 255 | 256 | ## Mobile Optimizations 257 | 258 | ### Touch Targets 259 | - Minimum size: 44x44px 260 | - Adequate spacing 261 | - Clear hit states 262 | 263 | ### Gestures 264 | - Swipe between tabs 265 | - Pull to refresh 266 | - Pinch to zoom charts 267 | 268 | ### Performance 269 | - Optimized images 270 | - Minimal animations 271 | - Efficient rendering 272 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from "@eslint/js"; 2 | import globals from "globals"; 3 | import reactHooks from "eslint-plugin-react-hooks"; 4 | import reactRefresh from "eslint-plugin-react-refresh"; 5 | import tseslint from "typescript-eslint"; 6 | 7 | export default tseslint.config( 8 | { ignores: ["dist"] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ["**/*.{ts,tsx}"], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | "react-hooks": reactHooks, 18 | "react-refresh": reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | "react-refresh/only-export-components": [ 23 | "warn", 24 | { allowConstantExport: true }, 25 | ], 26 | "@typescript-eslint/no-unused-vars": "off", 27 | }, 28 | } 29 | ); 30 | -------------------------------------------------------------------------------- /fly.toml: -------------------------------------------------------------------------------- 1 | # fly.toml app configuration file generated for aicodecalc on 2025-01-12T15:06:34Z 2 | # 3 | # See https://fly.io/docs/reference/configuration/ for information about how to use this file. 4 | # 5 | 6 | app = 'aicodecalc' 7 | primary_region = 'lax' 8 | 9 | [build] 10 | builder = 'heroku/builder:22' 11 | [build.args] 12 | NODE_VERSION = "20" 13 | 14 | [processes] 15 | app = "sh -c 'npm run build && npx serve dist'" 16 | 17 | [env] 18 | PORT = '8080' 19 | 20 | [http_service] 21 | internal_port = 8080 22 | force_https = true 23 | auto_stop_machines = 'stop' 24 | auto_start_machines = true 25 | min_machines_running = 0 26 | processes = ['app'] 27 | 28 | [[vm]] 29 | cpu_kind = 'shared' 30 | cpus = 1 31 | memory_mb = 1024 32 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | AiCodeCalc - Compare AI vs Human Software Development Costs 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite_react_shadcn_ts", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "build:dev": "vite build --mode development", 10 | "lint": "eslint .", 11 | "preview": "vite preview" 12 | }, 13 | "dependencies": { 14 | "@hookform/resolvers": "^3.9.0", 15 | "@radix-ui/react-accordion": "^1.2.0", 16 | "@radix-ui/react-alert-dialog": "^1.1.1", 17 | "@radix-ui/react-aspect-ratio": "^1.1.0", 18 | "@radix-ui/react-avatar": "^1.1.0", 19 | "@radix-ui/react-checkbox": "^1.1.1", 20 | "@radix-ui/react-collapsible": "^1.1.0", 21 | "@radix-ui/react-context-menu": "^2.2.1", 22 | "@radix-ui/react-dialog": "^1.1.2", 23 | "@radix-ui/react-dropdown-menu": "^2.1.1", 24 | "@radix-ui/react-hover-card": "^1.1.1", 25 | "@radix-ui/react-label": "^2.1.0", 26 | "@radix-ui/react-menubar": "^1.1.1", 27 | "@radix-ui/react-navigation-menu": "^1.2.0", 28 | "@radix-ui/react-popover": "^1.1.1", 29 | "@radix-ui/react-progress": "^1.1.0", 30 | "@radix-ui/react-radio-group": "^1.2.0", 31 | "@radix-ui/react-scroll-area": "^1.1.0", 32 | "@radix-ui/react-select": "^2.1.1", 33 | "@radix-ui/react-separator": "^1.1.0", 34 | "@radix-ui/react-slider": "^1.2.0", 35 | "@radix-ui/react-slot": "^1.1.0", 36 | "@radix-ui/react-switch": "^1.1.0", 37 | "@radix-ui/react-tabs": "^1.1.0", 38 | "@radix-ui/react-toast": "^1.2.1", 39 | "@radix-ui/react-toggle": "^1.1.0", 40 | "@radix-ui/react-toggle-group": "^1.1.0", 41 | "@radix-ui/react-tooltip": "^1.1.4", 42 | "@tanstack/react-query": "^5.56.2", 43 | "class-variance-authority": "^0.7.1", 44 | "clsx": "^2.1.1", 45 | "cmdk": "^1.0.0", 46 | "date-fns": "^3.6.0", 47 | "embla-carousel-react": "^8.3.0", 48 | "input-otp": "^1.2.4", 49 | "lucide-react": "^0.462.0", 50 | "next-themes": "^0.3.0", 51 | "react": "^18.3.1", 52 | "react-day-picker": "^8.10.1", 53 | "react-dom": "^18.3.1", 54 | "react-hook-form": "^7.53.0", 55 | "react-resizable-panels": "^2.1.3", 56 | "react-router-dom": "^6.26.2", 57 | "recharts": "^2.12.7", 58 | "serve": "^14.2.4", 59 | "sonner": "^1.5.0", 60 | "tailwind-merge": "^2.5.2", 61 | "tailwindcss-animate": "^1.0.7", 62 | "vaul": "^0.9.3", 63 | "zod": "^3.23.8" 64 | }, 65 | "devDependencies": { 66 | "@eslint/js": "^9.9.0", 67 | "@tailwindcss/typography": "^0.5.15", 68 | "@types/node": "^22.5.5", 69 | "@types/react": "^18.3.3", 70 | "@types/react-dom": "^18.3.0", 71 | "@vitejs/plugin-react": "^4.3.4", 72 | "@vitejs/plugin-react-swc": "^3.5.0", 73 | "autoprefixer": "^10.4.20", 74 | "eslint": "^9.9.0", 75 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 76 | "eslint-plugin-react-refresh": "^0.4.9", 77 | "globals": "^15.9.0", 78 | "lovable-tagger": "^1.0.19", 79 | "postcss": "^8.4.47", 80 | "tailwindcss": "^3.4.11", 81 | "typescript": "^5.5.3", 82 | "typescript-eslint": "^8.0.1", 83 | "vite": "^5.4.1" 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruvnet/AiCodeCalc/29fbf90f42ae396f48d85d348bb886020a9dd082/public/favicon.ico -------------------------------------------------------------------------------- /public/og-image-orginal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruvnet/AiCodeCalc/29fbf90f42ae396f48d85d348bb886020a9dd082/public/og-image-orginal.png -------------------------------------------------------------------------------- /public/og-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ruvnet/AiCodeCalc/29fbf90f42ae396f48d85d348bb886020a9dd082/public/og-image.png -------------------------------------------------------------------------------- /public/placeholder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'; 3 | import { AppLayout } from '@/components/layout/AppLayout'; 4 | import { ProjectSetup } from '@/pages/ProjectSetup'; 5 | import { LLMParameters } from '@/pages/LLMParameters'; 6 | import { AgentConfig } from '@/pages/AgentConfig'; 7 | import { OverheadCalculator } from '@/pages/OverheadCalculator'; 8 | import { HumanComparison } from '@/pages/HumanComparison'; 9 | import { Results } from '@/pages/Results'; 10 | import { Documentation } from '@/pages/Documentation'; 11 | import { CalculatorProvider } from '@/context/CalculatorContext'; 12 | import { Toaster } from '@/components/ui/toaster'; 13 | 14 | function App() { 15 | return ( 16 | 17 | 18 | 19 | 20 | {/* Redirect root to project setup */} 21 | } /> 22 | 23 | {/* Main routes */} 24 | } /> 25 | } /> 26 | } /> 27 | } /> 28 | } /> 29 | } /> 30 | } /> 31 | 32 | {/* Catch all redirect */} 33 | } /> 34 | 35 | 36 | 37 | 38 | 39 | 40 | ); 41 | } 42 | 43 | export default App; 44 | -------------------------------------------------------------------------------- /src/components/layout/AppLayout.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { NavigationBar } from './NavigationBar'; 3 | 4 | interface AppLayoutProps { 5 | children: React.ReactNode; 6 | } 7 | 8 | function GridBackground() { 9 | return ( 10 |