AI Workbench

User Story¶

As a user of the React Calculator application,
I want a fully functional multi-mode calculator with Basic, Scientific, Unit Converter, and EMI modes,
so that I can perform everyday arithmetic, advanced mathematical operations, physical unit conversions, and loan EMI calculations in a single, reliable web application.

Background¶

A code analysis of the Dev branch (rupesh-gl/react-calc) revealed the application is structurally present but entirely non-functional. All handleClick switch cases are empty stubs — setResult is never called, so the display is permanently frozen at "0". Three advertised calculator modes (Scientific, Unit Converter, EMI) do not exist in the codebase. The monolithic App.jsx (~70 lines) has no component decomposition, no input validation, no error handling, and zero test coverage. This ticket captures the full remediation and feature implementation required to make the application production-ready.

Scope¶

In Scope:

• Basic Calculator — arithmetic logic via mathjs (no eval()); fix all empty stubs; division-by-zero, NaN/Infinity, double-decimal guards; null guard on click handler; fix null className coercion bug
• Scientific Calculator — new mode with 13 scientific functions (sin, cos, tan, log, ln, √, x², x³, π, e, (, ), ±)
• Unit Converter — new mode, 6 categories: Length, Mass, Temperature (formula-based), Speed, Area, Volume; real-time conversion
• EMI Calculator — new mode; EMI formula with zero-rate edge case; result cards for EMI, total interest, total payment
• Component decomposition — ModeSelector, Display, BasicPad, ScientificPad, UnitConverter, EMICalculator, ErrorBoundary
• Utility modules — calculatorUtils.js, unitConverterUtils.js, emiUtils.js
• Test setup — Vitest + React Testing Library + jsdom; ≥80% utility coverage; component and integration tests
• Build verification — zero eval() in src/ confirmed post-implementation

Out of Scope: backend API, real-time currency rates, persistent history, mobile packaging, TypeScript migration.

Acceptance Criteria¶

AC-01 — Basic Calculator functional

• Digit/operator buttons update display correctly
• = evaluates via mathjs; result shown in display
• Division by zero shows human-readable error; calculator resets cleanly on next input
• NaN and Infinity show readable errors

AC-02 — Input validation guards

• Double-decimal prevented at token level
• Consecutive operators blocked by isTokenAllowed
• Expression capped at 50 characters
• Null guard on getAttribute("value"); no crash on non-button click

AC-03 — Scientific Calculator mode

• "Scientific" tab visible and selectable
• All 13 scientific buttons produce correct mathjs-evaluated output
• Radians/degrees toggle present (default: degrees)
• Mode switch preserves display value

AC-04 — Unit Converter mode

• "Unit Converter" tab visible and selectable
• Exactly 6 categories in dropdown; from/to units update to match category
• Conversion result updates in real-time
• Temperature conversions use formula (°C↔°F↔K)

AC-05 — EMI Calculator mode

• "EMI" tab visible and selectable
• Three inputs: Principal (₹), Annual Rate (%), Tenure (months)
• EMI = P × r × (1+r)^n / ((1+r)^n − 1); zero-rate: EMI = Principal / Tenure
• Result cards show Monthly EMI, Total Interest, Total Payment
• Invalid inputs show inline validation messages

AC-06 — Component decomposition

• App.jsx delegates to ≥6 child components under src/components/
• ErrorBoundary wraps top-level; unhandled errors show fallback UI

AC-07 — Utility modules

• calculatorUtils.js: evaluate, appendToken, isTokenAllowed, CalcError
• unitConverterUtils.js: convert(value, from, to, category)
• emiUtils.js: calculateEMI(principal, annualRate, tenureMonths)

AC-08 — Test coverage

• Vitest + React Testing Library configured in vite.config.js
• ≥80% line coverage on all three utility modules
• Component tests for all 6 components
• 6 integration test flows in App.jsx (no internal mocks)

AC-09 — No eval() usage

• grep -r "eval(" src/ returns zero matches

AC-10 — Build succeeds

• npm run build exits 0; npm test exits 0 with all tests passing

Technical Notes¶

Stack: JavaScript/JSX · React 18.2.0 · Vite 4.0.0 · SCSS

New dependencies:

• Runtime: mathjs (safe expression evaluator — replaces all eval())
• Dev: vitest, @vitest/ui, @testing-library/react, @testing-library/jest-dom, jsdom

22 implementation tasks across 4 phases — critical path:
T-01 → T-04/T-05/T-06 → T-10 → T-11/T-12/T-13 → T-14 → T-21

Security: eval() is prohibited in all src/ files. CSP meta tag added in index.html.

Repo access: rupesh-gl/react-calc Dev branch via GitHub REST API (OAuth — cloud mode).

Prior pipeline artifacts:

• Code Analysis: agent-runs/20260817T144034_k8yzhl/01-code-analysis.md
• Design Document: agent-runs/20260817T144034_k8yzhl/02-design-document.md
• Task List: agent-runs/20260817T145605_gz44do/03-task-list.md

Labels: ai-created, react, frontend, enhancement, calculator

Labels: ai-created, react, frontend, enhancement