/ INTEGRATION.md
INTEGRATION.md
1 # Sprint 7 — Batch 1 Integration Guide 2 3 ## Files Delivered 4 5 ``` 6 lib/prompts/ats-scoring.ts → NEW file 7 lib/ats-format-check.ts → NEW file 8 lib/knowledge/company-ats.ts → NEW file 9 app/api/ats-score/route.ts → NEW file 10 components/results/ATSScorePanel.tsx → NEW file 11 ``` 12 13 ## Integration Steps 14 15 ### 1. Merge types into `lib/types.ts` 16 17 Add all interfaces from `types-ats-additions.ts` to the end of your existing `lib/types.ts`. 18 19 Then add the `atsScore` field to your existing `AnalysisResult` interface: 20 21 ```typescript 22 interface AnalysisResult { 23 // ... existing fields ... 24 jobMatch?: JobMatch; 25 atsScore?: ATSScoreResult; // ← ADD THIS 26 } 27 ``` 28 29 ### 2. Add ATS tab to ChapterNav 30 31 In `components/results/ChapterNav.tsx`, add the new tab constant and entry. Based on the existing pattern (conditional tabs like jobMatch/cvSuggestions): 32 33 ```typescript 34 // Add to the tabs array (after 'cv-suggestions' or wherever appropriate) 35 // This tab only shows when atsScore exists AND a job posting was provided 36 37 // In your tab definitions: 38 { id: 'ats-score', icon: Shield, labelKey: 'ats.tab' } 39 40 // Import Shield from lucide-react 41 ``` 42 43 **Conditional rendering** — same pattern as jobMatch: 44 ```typescript 45 // Only include the ats-score tab when data exists 46 if (analysisResult.atsScore) { 47 tabs.push({ id: 'ats-score', icon: Shield, labelKey: 'ats.tab' }); 48 } 49 ``` 50 51 ### 3. Add ATS panel rendering in analyze/page.tsx 52 53 In the section where you render panels based on the active tab: 54 55 ```tsx 56 import { ATSScorePanel } from '@/components/results/ATSScorePanel'; 57 58 // In the render switch/conditional: 59 {activeTab === 'ats-score' && analysisResult.atsScore && ( 60 <ATSScorePanel atsScore={analysisResult.atsScore} /> 61 )} 62 ``` 63 64 ### 4. Add SectionIntro message for ATS tab 65 66 In `components/results/SectionIntro.tsx`, add the 'atsScore' section: 67 68 ```typescript 69 // In your section config/messages map: 70 atsScore: { 71 key: 'ats.sectionIntro' 72 } 73 ``` 74 75 ### 5. Trigger ATS scoring during analysis 76 77 **Option A: Call ATS scoring as part of streaming analysis** (recommended) 78 79 In `app/api/analyze-stream/route.ts`, after the existing Claude calls (skill extraction, gap analysis, career plan), add a 4th step if a job posting was provided: 80 81 ```typescript 82 // After existing analysis steps, if job posting exists: 83 if (questionnaire.jobPosting) { 84 // Send SSE progress update 85 sendEvent({ step: 'ats', status: 'Scoring ATS compatibility...' }); 86 87 // Call the ATS scoring logic directly (don't HTTP call your own API) 88 // Import and use the functions from lib/prompts/ats-scoring.ts 89 const extractionPrompt = buildATSKeywordExtractionPrompt(questionnaire.jobPosting); 90 const extractionResponse = await callClaude(extractionPrompt, { maxTokens: 4000, temperature: 0.1 }); 91 // ... match, compute, format check ... 92 93 result.atsScore = atsResult; 94 } 95 ``` 96 97 **Option B: Separate API call from frontend** (if you prefer independence) 98 99 After the main analysis completes, call `/api/ats-score` from the frontend with the CV text and job posting, then merge the result. 100 101 ### 6. Merge translations 102 103 For each of the 6 language files (`en.json`, `ro.json`, `de.json`, `fr.json`, `es.json`, `it.json`), add all the ATS keys from `ats-translations.ts`. 104 105 The keys are organized by language in the translation file — just copy the key-value pairs into each respective JSON file. 106 107 ### 7. Add streaming progress message 108 109 In `components/analyze/StreamingProgress.tsx`, add a step for ATS scoring: 110 111 ```typescript 112 // In your progress steps array: 113 { id: 'ats', label: 'Scoring ATS compatibility...', labelKey: 'progress.ats' } 114 ``` 115 116 Add translation key `progress.ats` to all 6 language files: 117 - EN: "Scoring ATS compatibility..." 118 - RO: "Se calculează compatibilitatea ATS..." 119 - DE: "ATS-Kompatibilität wird bewertet..." 120 - FR: "Évaluation de la compatibilité ATS..." 121 - ES: "Evaluando compatibilidad ATS..." 122 - IT: "Valutazione compatibilità ATS..." 123 124 --- 125 126 ## Testing Checklist 127 128 - [ ] Upload a CV PDF + provide a job posting → ATS tab appears in results 129 - [ ] ATS score shows 0-100% with color coding 130 - [ ] Keyword analysis shows matched/semantic/missing with correct categorization 131 - [ ] Format issues display with severity colors and fix suggestions 132 - [ ] Company ATS info shows when company is recognized 133 - [ ] Recommendations expand on click to show examples 134 - [ ] All text is translated (switch to RO/DE/FR/ES/IT and verify) 135 - [ ] Works on mobile (responsive layout) 136 - [ ] Without job posting → ATS tab does NOT appear 137 - [ ] API handles errors gracefully (malformed input, Claude timeout) 138 139 --- 140 141 ## What's Next (Batch 2) 142 143 Once this is tested and working, the next batch will integrate ATS scoring into the streaming analysis pipeline directly (so it runs as part of the main analysis flow rather than a separate call). Then we move to Sprint 8 (Real Salary Data).