All files / vqa/generators ai-agent-readme.template.ts

100% Statements 186/186
100% Branches 5/5
100% Functions 1/1
100% Lines 186/186

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 1871x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 1x  
import { DyE2E_VQA_FeatureManifest_Interface } from '../_models/interfaces/feature-manifest.interface';
import { DyE2E_VQA_FindingSeverity_Type } from '../_enums/finding-severity.enum';
import { DyE2E_VQA_FindingStatus_Type } from '../_enums/finding-status.enum';
 
/**
 * `DyE2E_VQA_AIAgentReadme_Template` — generálja a `review-bundles/<id>/<run>/README.md`-t,
 * ami az AI-agent (Claude Code vagy más LLM) számára a review-instrukció + a finding-/
 * backlog-entry-schema. **Spec §10 14 audit-kérdés + §11 13 feedback-típus + §12 finding +
 * §13 report-szempontok beágyazva.**
 *
 * **scope-LOCK**: a bedrock-tooling-tól ez az utolsó artifact — az AI agent EXTERNAL,
 * itt találja meg a review-rubric-ot, a schema-t, és az elvárt finding-formátumot.
 */
export class DyE2E_VQA_AIAgentReadme_Template {
 
  static render(
    manifest: DyE2E_VQA_FeatureManifest_Interface,
    runId: string,
    bundleStats: {
      stateCount: number;
      viewportCount: number;
      screenshotCount: number;
      hasComparison: boolean;
    },
  ): string {
    return `# AI-agent review-instrukció — \`${manifest.featureName}\` (\`${manifest.featureId}\`)
 
> **Run-ID:** \`${runId}\`
> **Generator:** \`@futdevpro/dynamo-e2e\` — \`DyE2E_VQA_ReviewBundle_Generator\`
> **Bundle-stats:** ${bundleStats.stateCount} állapot × ${bundleStats.viewportCount} viewport
> = ${bundleStats.screenshotCount} screenshot; comparison: ${bundleStats.hasComparison ? '✓ van' : '✗ nincs'}
 
---
 
## Mit kell tenned (AI agent)
 
1. **Olvasd át a manifest-et** (\`manifest.json\`) — feature-cél, állapotok, viewportok, critical-element-ek.
2. **Tekintsd át a \`summary.md\`-t** — feature-state-viewport tábla a bundle szerkezetével.
3. **Per (állapot × viewport)** menj végig:
   - \`screenshots/<stateId>/<viewport>-full.png\` — full-page kép
   - \`screenshots/<stateId>/<viewport>-fold.png\` — above-fold (viewport-only)
   - \`crops/<stateId>/<viewport>/<region>.png\` — region-crop-ok (modal, primary-cta, form, error)
   - \`dom-snapshots/<stateId>/<viewport>.json\` — DOM-metrikák
   - \`evidence/<stateId>/<viewport>.json\` — 16 DOM-detektor strukturált bizonyíték
   - \`a11y/<stateId>/<viewport>.json\` — axe-core a11y scan
4. **QA-rubric szerint** értékeld a 14 audit-kérdést (lásd lent).
5. **Finding-eket írj** a \`findings.md\`-be a megadott schema szerint (lásd lent).
6. **Ne dönts pixelpontosan** — emberi QA-szemlélettel ítélj.
 
${bundleStats.hasComparison ? `
 
## Re-audit eset
 
A \`comparison/\` mappa tartalmazza a before/after diff-eket. Olvasd a \`comparison/README.md\`-t,
és minden \`finding-refs.json\`-ban felsorolt finding-re dönts:
- **verified** — a probléma megszűnt
- **reopened** — a probléma visszatért
- **partial** — részlegesen javult (státusz: \`in-progress\`)
 
Új problémát talál a re-audit során? Új finding-et írj (\`findingId\` = következő szabad).
` : ''}
 
---
 
## QA rubric — 14 audit-kérdés (spec §10)
 
Minden (állapot × viewport) párra add választ:
 
1. **A felület használható ebben az állapotban?**
2. **Látható és érthető a fő művelet?**
3. **Egyértelmű, hogy a user mit tud most csinálni?**
4. **Hiba esetén világos, mi történt?**
5. **Hiba esetén világos, hogyan lehet javítani?**
6. **Nincs-e dupla vagy zavaró scroll?** (lásd \`nested-scroll\`, \`scrollbar-count\` evidence)
7. **Nincs-e levágott tartalom?** (lásd \`overflow-clipping\`, \`truncated-text\` evidence)
8. **Nincs-e takart gomb vagy input?** (lásd \`occluded-target\`, \`sticky-occludes\` evidence)
9. **Olvasható-e a szöveg?** (lásd \`unreadable-error\` evidence)
10. **Megfelelő-e a vizuális hierarchia?**
11. **Nem esett-e szét a layout?** (lásd \`form-field-break\` evidence)
12. **A modal vagy popup kezelhető-e kis képernyőn?** (lásd \`modal-viewport-fit\` evidence)
13. **A feedback elég konkrét-e?**
14. **A sikeres állapot tényleg sikeresnek érződik-e?** / **Az üres állapot ad-e következő lépést?**
 
---
 
## Feedback-típusok (spec §11)
 
Nézz arra, hogy az állapot megfelelő visszajelzést ad-e:
 
\`loading\` · \`fieldValidation\` · \`formValidation\` · \`backendError\` · \`networkError\` ·
\`permissionError\` · \`emptyState\` · \`successState\` · \`warning\` · \`confirmation\` ·
\`retryOption\` · \`destructiveConfirm\` · \`partialSuccess\`
 
Akkor jelez problémát az audit, ha a user **nem tudná megérteni**: mi történt, mi a következő lépés,
vagy mit kell javítania.
 
---
 
## DOM-evidence detektorok (spec §9)
 
Az \`evidence/<stateId>/<viewport>.json\`-ban 16 detektor strukturált eredménye van. **A
\`severityHint\` AJÁNLÁS — Te döntesz.** A \`suggestedRegions\` mutatja a fókusz-zónákat.
 
| Detektor | Mit nézz |
|---|---|
| \`nested-scroll\` | body + modal egyidejű scroll? |
| \`overflow-clipping\` | clip-path levágott tartalom? |
| \`viewport-off-cta\` | primary CTA fold alatt? |
| \`occluded-target\` | kattintható elem takarásban? |
| \`sticky-occludes\` | sticky/fixed elem takar? |
| \`small-touch-target\` | < 44×44 px touch target? |
| \`truncated-text\` | ellipsis-elment szöveg? |
| \`table-overflow\` | táblázat túl széles? |
| \`modal-viewport-fit\` | modal > viewport? |
| \`scrollbar-count\` | > 1 scrollbar? |
| \`focus-loss\` | fókusz body-ra esett? |
| \`hidden-error\` | aria-invalid + nincs látható error? |
| \`unreadable-error\` | error < 12px / kontraszt? |
| \`ambiguous-interactive\` | onclick cursor:pointer NÉLKÜL? |
| \`form-field-break\` | input kilóg a formból? |
| \`vertical-space-shortage\` | landscape + CTA tight? |
 
---
 
## Severity (spec §12)
 
| Szint | Mikor |
|---|---|
| \`${DyE2E_VQA_FindingSeverity_Type.blocker}\` | A user NEM tudja befejezni a flow-t. |
| \`${DyE2E_VQA_FindingSeverity_Type.high}\` | Fő CTA takarásban, modal használhatatlan, hibaüzenet nem látható. |
| \`${DyE2E_VQA_FindingSeverity_Type.medium}\` | Layout zavaró, de a flow használható. |
| \`${DyE2E_VQA_FindingSeverity_Type.low}\` | Kisebb vizuális inkonzisztencia. |
| \`${DyE2E_VQA_FindingSeverity_Type.informational}\` | Fejlesztési javaslat / UX-észrevétel. |
 
---
 
## Finding írás — schema
 
A finding-eket írd a \`findings.md\` (markdown) ÉS \`findings.json\` (validálható) fájlokba.
**Validátor:** \`DyE2E_VQA_FindingValidator_Util\` ellenőrzi. Schema:
 
\`\`\`jsonc
{
  "findingId": "VQA-<projekt-slug>-${manifest.featureId}-NNN",   // 001-tól, padding 3
  "featureId": "${manifest.featureId}",
  "stateId": "<manifest-state-id>",
  "viewport": "<manifest-viewport-key>",
  "orientation": "portrait" | "landscape",                       // opcionális
  "screenshotRef": "screenshots/<stateId>/<viewport>-full.png",  // bundle-relative
  "domSnapshotRef": "dom-snapshots/<stateId>/<viewport>.json",   // opcionális
  "additionalEvidenceRefs": [],                                  // opcionális extra-utak
  "description": "<észlelt probléma — Te írod>",
  "expectedBehavior": "<mit várnánk helyette — Te írod>",
  "severity": "${DyE2E_VQA_FindingSeverity_Type.blocker}" | "high" | "medium" | "low" | "informational",
  "status": "${DyE2E_VQA_FindingStatus_Type.open}",               // új finding kezdő-státusza
  "reproSteps": ["<step1>", "<step2>", ...],                     // legalább 1
  "suggestedFix": "<opcionális javaslat>",
  "aiConfidence": 0.0..1.0,
  "detectorEvidenceRefs": ["nested-scroll"],                     // opcionális detektor-link
  "createdInRunId": "${runId}",
  "createdAt": "<ISO-8601 timestamp>",
  "acceptanceCriteria": ["<criterion1>", ...],                   // opcionális
  "reAuditInstruction": "<mit nézz re-audit-kor>"                // opcionális, blocker/high esetén kötelező
}
\`\`\`
 
**Sorszámozás:** ha a bundle-en kívül van projekt-szintű BACKLOG.md, ott találod a meglévő ID-ket;
különben \`001\`-től indulj.
 
---
 
## Nem célok (spec §20)
 
- ❌ Pixelpontos design approval
- ❌ Minden lehetséges állapotkombináció kimerítő futtatása
- ❌ Általános ízlésalapú designkritika
- ❌ Funkcionális üzleti logika teljes helyettesítése
 
A cél **gyakorlati vizuális QA**: olyan problémák, amiket emberi tesztelő észrevenne.
 
---
 
*Bundle generated by \`@futdevpro/dynamo-e2e/vqa\` \`DyE2E_VQA_ReviewBundle_Generator\`.*
`;
  }
}