@sun-asterisk/sungen 2.6.11 → 2.6.14

package/dist/orchestrator/templates/ai-instructions/github-skill-sungen-locale.md

@@ -0,0 +1,291 @@
+---
+name: sungen-locale
+description: 'Bootstrap i18n for a screen/flow — audit hardcoded selector text, detect locale-switch mechanism via live Playwright, generate test-data overlay file. Auto-loaded by /sungen:locale command.'
+user-invocable: false
+---
+
+## Goal
+
+Take a screen/flow whose `selectors/*.yaml` and `.feature` files were authored against the default locale (usually Vietnamese) and prepare it to run against a second locale. Output:
+
+1. `selectors/<feature>.yaml` — hardcoded `name`/`value` replaced with `{{var}}`
+2. `test-data/<feature>.yaml` — base locale, complete with all new keys
+3. `test-data/<feature>.<locale>.yaml` — overlay with only the keys that change
+4. (Optional) `selectors/<feature>.yaml` Pages block updated when locale uses URL prefix or query param
+
+After this skill finishes, `sungen run-test <name> --env <locale>` Just Works.
+
+## Run mode — Live (preferred) vs Offline (fallback)
+
+Pick mode **once at start**, based on whether MCP Playwright can reach the page.
+
+```
+Try: browser_navigate(baseURL)
+  → succeeds + page renders content → LIVE MODE (all 6 phases)
+  → fails (auth blocked, network down, app broken) → OFFLINE MODE
+    (audit + scaffold template + ask user to fill, skip detection phases)
+```
+
+**Live mode is the value-add** — it auto-detects locale switch mechanism and auto-fills translations. Offline mode just makes the file structure right; user fills in text manually.
+
+Announce which mode is being used before Phase 1.
+
+## Phase 1 — Audit selectors (always, no MCP)
+
+For each `.feature` file under the screen, read the matching `selectors/<feature>.yaml`. List every entry whose `name` or `value` field contains literal text WITHOUT `{{…}}` AND is not a CSS/href selector.
+
+Classify each candidate:
+- **`name` field of `role`-type selector** → very likely locale-dependent
+- **`value` field of `text`-type selector** → very likely locale-dependent
+- **`value` of `locator`-type selector** that contains `:has-text("…")` → check if text is in target language
+- **`value` of `page`-type selector** → URL — handled in Phase 3
+- **CSS / href / attribute selectors** (e.g. `a[href="/awards"]`) → skip, locale-invariant
+
+Print the candidate list as a table:
+
+```
+selector key       | field | hardcoded value           | classification
+-------------------+-------+---------------------------+------------------
+nav about          | name  | Giới thiệu SAA 2025       | locale-dependent
+nav awards         | name  | Thông tin giải thưởng     | locale-dependent
+event date         | name  | 26/12/2025                | maybe (date format)
+nav kudos          | name  | Sun* Kudos                | brand — skip
+```
+
+If zero candidates and zero `{{var}}` already in place → screen has no localizable text. Tell user, stop.
+
+## Phase 2 — Capture base locale (LIVE only)
+
+1. Read `playwright.config.ts` for `baseURL`. Read `Path:` from `.feature` for entry path.
+2. If screen has `@auth:<role>` tags, load `specs/.auth/<role>.json` via `browser_set_storage_state` first.
+3. `browser_navigate(baseURL + entryPath)` then `browser_wait_for` for something stable.
+4. Capture:
+   - `browser_snapshot()` — DOM accessibility tree
+   - `browser_evaluate(() => location.href)` — full URL
+   - `browser_evaluate(() => ({ localStorage: {...localStorage}, cookies: document.cookie }))` — storage state hash
+5. For each Phase-1 candidate: verify the hardcoded text actually appears on the page. Drop ones that don't (stale selectors / false positives).
+
+Save state in memory as `baseLocale = { url, snapshot, storage }`.
+
+If page redirects to `/login` (auth blocker) → stop. Print: *"Auth blocked — cannot capture live page. Re-run with `--offline` flag, or unblock auth first."*
+
+## Phase 3 — Switch locale (LIVE only) — detect mechanism + storage delta
+
+Goal: identify (a) HOW to switch the app to the target locale, and (b) WHAT app-side storage state ends up holding the locale preference so a fresh BrowserContext can be primed identically without driving the UI.
+
+Before triggering the switch, capture full storage baseline:
+
+```js
+const before = await browser_evaluate(() => ({
+  sessionStorage: { ...sessionStorage },
+  localStorage:   { ...localStorage },
+  cookies:        document.cookie,
+  url:            location.href,
+}));
+```
+
+Then try mechanisms in order. First one that produces visibly different text wins. For EACH attempt, capture `after` state and diff against `before`.
+
+**3a. URL prefix**
+- `browser_navigate(baseURL + '/' + locale + entryPath)`
+- Wait, snapshot
+- Compare a known Phase-1 candidate's text vs baseLocale
+- If text differs and page didn't 404 → **URL prefix mechanism**. Save `localePrefix = '/' + locale`.
+
+**3b. Query param** (only if 3a failed)
+- `browser_navigate(baseURL + entryPath + '?lang=' + locale)` (also try `?locale=`, `?lng=`, `?l=`, `?language=`)
+- Same diff check
+- If text differs → **Query param mechanism**. Save the variant that worked.
+
+**3c. Language switcher UI** (only if 3a + 3b failed)
+- Look in base-locale snapshot for buttons matching: `'Select language'`, `'Language'`, `'言語'`, `'Ngôn ngữ'`, role=combobox
+- If found, ask user before clicking
+- `browser_click` the switcher, then the locale option
+- Verify text changed
+- If yes → **UI switcher mechanism**.
+
+**3d. None detected** — ask user how to proceed manually.
+
+### Phase 3.5 — Storage diff (always run after Phase 3 succeeds)
+
+After locale text confirmed switched, capture `after` state and diff per area:
+
+```js
+const after = await browser_evaluate(() => ({
+  sessionStorage: { ...sessionStorage },
+  localStorage:   { ...localStorage },
+  cookies:        document.cookie,
+}));
+const sessionDiff = diffEntries(before.sessionStorage, after.sessionStorage);
+const localDiff   = diffEntries(before.localStorage,   after.localStorage);
+const cookieDiff  = diffCookies(before.cookies, after.cookies);
+```
+
+**Filter noise** — only keep entries where:
+- Key name contains `lang|locale|language|i18n|intl` (case-insensitive), OR
+- Value matches `^[a-z]{2}(-[A-Z]{2})?$` or equals the target locale code
+
+Drop noise: auth tokens (`sb-*`, `*-token`, `*-jwt`), analytics (`_ga*`, `_gid`, `_fbp`), app state (`csrf*`, `last-*`).
+
+**Auto-confidence per entry:**
+- High: key name contains locale-related word AND value is a locale code → KEEP, no prompt
+- Medium: only one signal matches → ask user
+- Low: neither matches but key changed → ask user, default skip
+
+### Phase 3.6 — Verification
+
+For each high/medium-confidence storage entry, verify by setting it manually + reloading:
+
+```js
+await browser_evaluate(`() => sessionStorage.setItem('saa-language-preference', 'en')`);
+await browser_navigate(baseURL);  // reload triggers app to read storage on boot
+await browser_snapshot();
+// confirm a known target-locale string appears
+```
+
+Caveat: hard reload kills any in-memory JWT (auth blocker amplifies failure surface). Skip verification if the screen has `@auth:*` tags and JWT persistence is known broken in the app.
+
+If verification fails → drop confidence one tier, ask user.
+
+Save mechanism + verified storage delta to memory for Phase 6.
+
+## Phase 4 — Diff base ↔ target (LIVE only)
+
+For each candidate from Phase 1 that survived Phase 2:
+- Find the SAME element in target-locale snapshot (match by `role`+position, by `aria-label`, by neighbor structure)
+- Extract its text → `targetText`
+- Pair: `(selectorKey, hardcoded baseText, observed targetText)`
+
+If matching fails for a candidate → mark "needs manual" — flag for user input rather than skip silently.
+
+Result: list of triples `{ selectorKey, baseText, targetText, confidence }`.
+
+## Phase 5 — Confirm + edit (always)
+
+Present the proposal table:
+
+```
+selector key       | base text                | target text          | proposed var     | apply?
+-------------------+--------------------------+----------------------+------------------+-------
+nav about          | Giới thiệu SAA 2025      | About SAA 2025       | nav_about        | [✓]
+nav awards         | Thông tin giải thưởng    | Awards Info          | nav_awards       | [✓]
+nav kudos          | Sun* Kudos               | Sun* Kudos           | —                | [skip — same]
+event date         | 26/12/2025               | 26/12/2025           | —                | [skip — same]
+```
+
+Var names: snake_case the selector key. Avoid collisions with existing test-data keys.
+
+Auto-skip rows where `baseText === targetText` (brand names, locale-invariant numbers).
+
+Ask user: *"Review the table. Confirm to apply / edit individual rows / re-run capture / cancel."*
+
+If user wants to edit a row → fall through to a per-row prompt for `var name` or `targetText` correction.
+
+OFFLINE mode: same table but `target text` column blank — user fills via subsequent prompts or by editing the overlay file after the skill finishes.
+
+## Phase 6 — Apply changes (always, after confirmation)
+
+For each confirmed row:
+
+**6a. Update `selectors/<feature>.yaml`**
+
+Replace `name: '<baseText>'` with `name: '{{<varName>}}'`. Preserve quoting style.
+
+**6b. Update `test-data/<feature>.yaml`** (base locale, complete dictionary)
+
+Append new keys at the end, grouped under a `# === i18n: <screen> ===` comment:
+
+```yaml
+# === i18n: home ===
+nav_about: 'Giới thiệu SAA 2025'
+nav_awards: 'Thông tin giải thưởng'
+```
+
+**6c. Create `test-data/<feature>.<locale>.yaml`** (overlay, only diffs)
+
+```yaml
+# home — <locale> overlay. Only keys that change vs base.
+# Run with: SUNGEN_ENV=<locale> npx playwright test ...
+
+nav_about: 'About SAA 2025'
+nav_awards: 'Awards Info'
+```
+
+**6d. (URL/query mechanism only) Update Pages selectors**
+
+URL prefix:
+
+```yaml
+home:
+  type: 'page'
+  value: '{{base_path}}/'
+awards:
+  type: 'page'
+  value: '{{base_path}}/awards'
+```
+
+Add to test-data:
+```yaml
+# base
+base_path: ''
+
+# overlay
+base_path: '/en'
+```
+
+Query param mechanism: append `query_suffix` similarly.
+
+UI switcher: do NOT modify Pages. Write storage delta into `specs/generated/locale-config.json` (sibling of generated `base.ts` + `locale-fixture.ts`) (6f).
+
+**6f. Storage injection config — `specs/generated/locale-config.json` (sibling of generated `base.ts` + `locale-fixture.ts`)**
+
+Always write `specs/generated/locale-config.json` (sibling of generated `base.ts` + `locale-fixture.ts`) with the verified storage delta from Phase 3.5/3.6. Consumed by `specs/locale-fixture.ts` (auto-generated alongside `specs/base.ts`), which wraps Playwright's context and calls `addInitScript` + `addCookies` BEFORE the first navigation.
+
+Schema:
+
+```json
+{
+  "$schema": "sungen-locale-config-v1",
+  "sessionStorage": {
+    "saa-language-preference": "${SUNGEN_ENV}"
+  },
+  "localStorage": {},
+  "cookies": [],
+  "notes": "Detected by /sungen:locale on YYYY-MM-DD. ..."
+}
+```
+
+Use `"${SUNGEN_ENV}"` (or `"{{SUNGEN_ENV}}"`) as placeholder for runtime substitution. Use hardcoded literals when the stored value is fixed regardless of locale. Drop auth tokens / session IDs even if the Phase 3.5 diff captured them.
+
+Multi-locale projects use the same file — placeholder gets substituted at runtime per locale.
+
+**6e. Compile**
+
+Run `sungen generate --screen <name>` (or `--flow`) and report any compile errors. Selectors changed → compile MUST succeed before run-test.
+
+## Phase 7 — Hand off
+
+Print summary:
+- N selectors converted to `{{var}}`
+- M base keys added to `test-data/<feature>.yaml`
+- K overlay keys written to `test-data/<feature>.<locale>.yaml`
+- Pages selectors updated: yes/no
+- Locale-switching mechanism: URL prefix `/en` / query `?lang=en` / UI switcher / manual
+
+Suggest:
+
+```
+/sungen:run-test <name> --env <locale>
+```
+
+## Multi-feature screens
+
+If the screen has multiple `.feature` files (e.g. `home.feature` + `home-modal.feature`), repeat Phase 1 → Phase 6 for each feature file with its own selectors + test-data pair. Phase 2 + 3 run **once per screen** — mechanism is the same. Phase 4 runs per feature because UI scope differs.
+
+## What NOT to do
+
+- Do not edit `.feature` files. The i18n shape is already correct there (`{{var}}` was the convention from the start). Only selectors + test-data need surgery.
+- Do not write a separate selectors file per locale (`home.en.yaml`). One selectors file with `{{var}}` works across all locales.
+- Do not delete keys from the base `test-data/<feature>.yaml`. Always append.
+- Do not run tests in this skill. Hand off to `/sungen:run-test`.
+- Do not commit. Hand off to user.

package/dist/orchestrator/templates/ai-instructions/github-skill-sungen-selector-fix.md

@@ -61,6 +61,7 @@ When running Phase 0 for a **flow** (`qa/flows/<name>/`), check existing screen
    - Selector priority: follow the table in **Diagnosis & Fix § Step 3** (`testid` > `role`+name > `placeholder` > `label` > `locator` > `text`).
    - Copy names **character-for-character** from the snapshot. Never infer from the Gherkin label.
    - If an element is auto-inferable per `sungen-selector-keys` § Auto-Infer, **omit it** from YAML — keep the file minimal.
+   - **i18n sites**: if the site supports multiple languages, use `{{variable}}` in `name`/`value` fields instead of hardcoded text. Add corresponding `lbl_*` keys to `test-data.yaml` + locale overlay files (see `sungen-selector-keys` § i18n).
 7. **Substring ambiguity check**: for each `role` + `name` selector, check if any other element in the snapshot has a name that **contains** this name as a substring (e.g., `"Đăng ký"` vs `"Đăng ký bằng Google"`). If yes → add `exact: true` to prevent strict mode violation at runtime.
 8. **Merge, don't overwrite**: preserve the page selector and any user-authored entries in `selectors.yaml`. Only add missing keys.
 9. **Show summary + confirm**: list the keys that will be added, ask the user to approve, then write the file.

package/dist/orchestrator/templates/ai-instructions/github-skill-sungen-selector-keys.md

@@ -115,6 +115,44 @@ gửi lời cảm ơn--3:
   name: 'Gửi lời cảm ơn'
 ```
 
+## i18n: Template Variables in Selectors
+
+For multilingual sites without `data-testid`, use `{{variable}}` in `name` or `value` fields to reference locale-dependent text from `test-data.yaml`.
+
+```yaml
+# selectors — one file for all locales
+submit:
+  type: role
+  value: button
+  name: "{{lbl_submit}}"
+
+search:
+  type: placeholder
+  value: "{{lbl_search}}"
+
+logo:
+  type: testid
+  value: app-logo            # testid is locale-independent — no variable needed
+```
+
+```yaml
+# test-data/login.yaml (base — English)
+lbl_submit: "Sign in"
+lbl_search: "Search..."
+
+# test-data/login.vi.yaml (Vietnamese)
+lbl_submit: "Đăng nhập"
+lbl_search: "Tìm kiếm..."
+```
+
+Run: `SUNGEN_ENV=vi npx playwright test`
+
+**Rules:**
+1. Prefix i18n keys with `lbl_`, `msg_`, `txt_` to separate from test data
+2. Prefer `data-testid` — only use `{{variable}}` when no stable selector exists
+3. Feature file stays identical across locales
+4. Requires runtime data mode (default, not `--inline-data`)
+
 ## Lookup Priority
 
 Resolver searches in this order:

package/dist/orchestrator/templates/ai-instructions/github-skill-sungen-tc-generation.md

@@ -352,6 +352,8 @@ Feature: <Screen> Screen
 
 **Environment-specific data**: create `<screen>.<env>.yaml` alongside the base file with only the keys that change. Users run `SUNGEN_ENV=staging npx playwright test` to merge overrides.
 
+**i18n / multilingual**: use the same `SUNGEN_ENV` overlay for locale variants — e.g., `login.vi.yaml`, `login.staging-ja.yaml`. Include `lbl_*` / `msg_*` keys for selector `{{variable}}` references (see `sungen-selector-keys` § i18n). One feature file + one selector file works across all locales.
+
 ## Flow Test Generation
 
 When generating tests for a **flow** (`qa/flows/<name>/`), adapt the strategy:

package/dist/orchestrator/templates/playwright.config.ts

@@ -1,5 +1,27 @@
 import { defineConfig, devices } from '@playwright/test';
 
+/**
+ * Resolve the JSON reporter output path.
+ *
+ * Precedence:
+ *   1. `PLAYWRIGHT_JSON_OUTPUT_NAME` if set — used as-is, but a `.<env>`
+ *      segment is inserted before the extension when `SUNGEN_ENV` is also set
+ *      so per-locale runs don't overwrite each other.
+ *   2. `SUNGEN_ENV` only → `test-results/results.<env>.json`.
+ *   3. Otherwise → `test-results/results.json`.
+ */
+function resolveJsonOutputFile(): string {
+  const explicit = process.env.PLAYWRIGHT_JSON_OUTPUT_NAME;
+  const env = process.env.SUNGEN_ENV;
+  if (explicit) {
+    if (!env) return explicit;
+    return explicit.endsWith('.json')
+      ? `${explicit.slice(0, -'.json'.length)}.${env}.json`
+      : `${explicit}.${env}`;
+  }
+  return env ? `test-results/results.${env}.json` : 'test-results/results.json';
+}
+
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
@@ -28,16 +50,11 @@ export default defineConfig({
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   /* JSON reporter is required by `sungen delivery` to populate test result columns in the exported CSV. */
   /* Output file path is controlled by PLAYWRIGHT_JSON_OUTPUT_NAME env var for per-screen isolation. */
+  /* When SUNGEN_ENV is set, the env name is inserted before `.json` so locale */
+  /* runs don't overwrite each other (e.g. `<name>-test-result.vi.json`). */
   reporter: [
     ['html'],
-    [
-      'json',
-      {
-        outputFile:
-          process.env.PLAYWRIGHT_JSON_OUTPUT_NAME ||
-          'test-results/results.json',
-      },
-    ],
+    ['json', { outputFile: resolveJsonOutputFile() }],
   ],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {

package/dist/orchestrator/templates/specs-base.ts

@@ -1,4 +1,5 @@
 import { test as base, expect, type Page } from '@playwright/test';
+import { applyLocaleInjection } from './locale-fixture';
 
 type CleanupConfig = {
   overlay?: boolean;
@@ -66,6 +67,14 @@ const test = base.extend<{
 }>({
   screenshotOnFailure: [false, { option: true }],
 
+  // Wrap the default `context` fixture so locale state (sessionStorage,
+  // localStorage, cookies) is injected before the first page navigation.
+  // No-op when SUNGEN_ENV is unset or specs/locale-config.json is missing.
+  context: async ({ context }, use) => {
+    await applyLocaleInjection(context);
+    await use(context);
+  },
+
   page: async ({ context }, use) => {
     const page = await context.newPage();
     await use(page);

package/dist/orchestrator/templates/specs-locale-fixture.ts

@@ -0,0 +1,105 @@
+/**
+ * Locale state injection — wired into the sungen base test fixture.
+ *
+ * Reads `specs/locale-config.json` (managed by the `/sungen:locale` skill)
+ * and uses `addInitScript` + `addCookies` to seed any sessionStorage /
+ * localStorage / cookie values that the app uses to remember locale.
+ *
+ * Active only when `SUNGEN_ENV` is set. When unset (default base-locale
+ * runs), every call is a no-op so existing test suites are unaffected.
+ *
+ * Auto-managed by `/sungen:locale` — edit `specs/locale-config.json`
+ * rather than this file. If the schema needs to change, update the skill
+ * `sungen-locale` so future captures stay in sync.
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import type { BrowserContext } from '@playwright/test';
+
+interface LocaleCookie {
+  name: string;
+  value: string;
+  domain?: string;
+  url?: string;
+  path?: string;
+  expires?: number;
+  httpOnly?: boolean;
+  secure?: boolean;
+  sameSite?: 'Strict' | 'Lax' | 'None';
+}
+
+interface LocaleInjection {
+  /** Values to write into `sessionStorage` via `addInitScript`. */
+  sessionStorage?: Record<string, string>;
+  /** Values to write into `localStorage` via `addInitScript`. */
+  localStorage?: Record<string, string>;
+  /** Cookies to set via `context.addCookies`. Either `domain` or `url` is required. */
+  cookies?: LocaleCookie[];
+  /** Optional notes from `/sungen:locale` capture — informational only. */
+  notes?: string;
+}
+
+let cached: LocaleInjection | null | undefined;
+
+function loadLocaleConfig(): LocaleInjection | null {
+  if (cached !== undefined) return cached;
+  try {
+    const cfgPath = path.join(__dirname, 'locale-config.json');
+    if (!fs.existsSync(cfgPath)) {
+      cached = null;
+      return null;
+    }
+    const parsed = JSON.parse(fs.readFileSync(cfgPath, 'utf-8')) as LocaleInjection;
+    cached = parsed;
+    return parsed;
+  } catch {
+    cached = null;
+    return null;
+  }
+}
+
+function interpolate(value: string, locale: string): string {
+  return value.replace(/\$\{SUNGEN_ENV\}/g, locale).replace(/\{\{SUNGEN_ENV\}\}/g, locale);
+}
+
+/**
+ * Apply locale state to a freshly-created BrowserContext.
+ * Must be called BEFORE the first page navigation so the `addInitScript`
+ * runs ahead of any app code that reads storage on boot.
+ *
+ * No-op when `SUNGEN_ENV` is unset or `specs/locale-config.json` is missing.
+ */
+export async function applyLocaleInjection(context: BrowserContext): Promise<void> {
+  const locale = process.env.SUNGEN_ENV;
+  if (!locale) return;
+  const cfg = loadLocaleConfig();
+  if (!cfg) return;
+
+  const sessionEntries = Object.entries(cfg.sessionStorage ?? {}).map(
+    ([k, v]) => [k, interpolate(String(v), locale)] as const,
+  );
+  const localEntries = Object.entries(cfg.localStorage ?? {}).map(
+    ([k, v]) => [k, interpolate(String(v), locale)] as const,
+  );
+
+  if (sessionEntries.length || localEntries.length) {
+    await context.addInitScript(
+      ({ sessionEntries, localEntries }) => {
+        for (const [k, v] of sessionEntries) sessionStorage.setItem(k, v);
+        for (const [k, v] of localEntries) localStorage.setItem(k, v);
+      },
+      { sessionEntries, localEntries },
+    );
+  }
+
+  if (cfg.cookies?.length) {
+    await context.addCookies(
+      cfg.cookies.map((c) => ({
+        ...c,
+        value: interpolate(c.value, locale),
+        path: c.path ?? '/',
+      })),
+    );
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sun-asterisk/sungen",
-  "version": "2.6.11",
+  "version": "2.6.14",
   "description": "Deterministic E2E Test Compiler - Gherkin + Selectors → Playwright tests",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",