docs(FR-2645): mandate language-specific captures + replace 6 dark-mode WebUI screenshots (#6868)

Resolves FR-2645

## Summary

This PR addresses the two findings from the FR-2645 audit of `packages/backend.ai-webui-docs/`:

1. **Policy fix** — Resolves the contradiction in `SCREENSHOT-GUIDELINES.md` (one section said "language-specific captures", another said "always capture in English"). The authoritative rule is now: **screenshots must be captured in the locale that matches the destination directory.**
2. **Dark-mode fix** — Replaces 6 dark-mode WebUI screenshots with light-mode recaptures, captured in the matching UI locale for each language (`en/`, `ko/`, `ja/`, `th/`).

## Changes

### `SCREENSHOT-GUIDELINES.md`

- Removed the contradictory line *"Always capture in English regardless of which language directory the screenshot will be saved to"* (added in PR #6631 / commit `a7033c9430`).
- Renamed *File Location* section → *File Location and Localization*.
- Made the language-specific capture rule a MUST, with explicit per-directory mapping (ko → 한국어, ja → 日本語, th → ภาษาไทย, en → English).
- Defined explicit "single-language exception" criteria (no UI text — diagrams, terminal output, third-party tools).
- *Capture Standards › Content* now forward-references the localization rules instead of duplicating them.

### Image replacements (6 × 4 languages = 24 PNGs)

| Filename | Original framing | New capture | Locale-specific labels |
|---|---:|---:|---|
| `sessions_page.png` | 2880×1800 (full page) | 1440×900 (full page) | sidebar/breadcrumb/filter/columns |
| `data_page.png` | 2880×1800 (full page) | 1440×900 (full page) | sidebar/Active/Trash tabs/filter/columns |
| `rename_vfolder.png` | 2592×1590 (folder explorer) | 1296×795 (folder explorer, rename mode) | toolbar buttons/property table headers |
| `vfolder_create_modal.png` | 1300×1060 (modal only) | 650×530 (modal only) | field labels/radio options/buttons |
| `vfolder_delete_dialog.png` | 1040×692 (modal only) | 520×346 (modal only) | warning text/instructions/buttons |
| `move_to_trash.png` | 832×276 (modal only) | 416×138 (modal only) | title/buttons |

All new captures match the original framing scope (full page vs. modal-only) per the SCREENSHOT-GUIDELINES preflight checklist. Captures are 1× (non-retina) per guideline preference; total disk footprint reduced by ~70% per file.

## Capture process

For each language:
1. Navigate to `/usersettings`, switch UI language to the target locale.
2. Capture each of the 6 screens at 1440×900 viewport (light mode, React Grab toolbar hidden).
3. For modal-only captures, crop the viewport screenshot to the dialog's exact bbox using `sips`.
4. Save to `src/{lang}/images/{filename}.png`.
5. After all 4 languages, reset UI back to English.

## Verification

- Re-ran the dark-mode detector after applying changes — 0 Backend.AI WebUI screenshots flagged. Remaining dark candidates (`vscode_connect_finish.png`, `mlflow_first_execution.png`, `bad_permissions.png`) are intentionally dark third-party UIs.
- Visually confirmed each of the 24 PNGs renders the correct locale UI text (sidebar menus, button labels, dialog titles).

## Follow-up work (out of scope for this PR)

This PR only re-captures the 6 dark-mode files. The broader audit found ~280 additional images per language directory that are still byte-identical to `en/` (English UI). Those should be re-captured in the matching locale per the new guideline; recommend creating section-by-section sub-tasks under FR-2645 (e.g., per documentation chapter: vfolder, sessions, admin_menu, rbac_management, etc.) since the volume (~840 captures) is too large for a single PR.

## Notes for reviewers

- **Folder data**: `data_page` shows 1–2 active folders depending on quota state at capture time (5-folder quota was at the limit because trash items count); original showed 3. Framing identical.
- **Folder names in dialogs**: dialogs show `e2e-mod-{83xbfn,dt2hqj,rjc9pl}` instead of the original `doc-capture-delete-test`. Dialog UI is identical.
- **Empty file list**: Korean `rename_vfolder.png` shows the empty-folder state (newly created folder). Japanese and Thai versions show the populated `e2e-mod-rjc9pl` folder (same data as original: `config 2.toml`, `model-definition.yaml`, `service-definition.toml`, `mock_openai_server.py`).
- 5 trash items remain in DELETE-PENDING in the dev environment (3 pre-existing + 2 created during capture). Auto-purges, but can be manually purged if desired.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Author: ironAiken2

packages/backend.ai-webui-docs/SCREENSHOT-GUIDELINES.md

@@ -29,12 +29,48 @@ Standards for capturing, naming, and maintaining screenshots in the Backend.AI W
 - Avoid abbreviations unless they are standard (e.g., `ssh`, `sftp`)
 - Acronyms in lowercase: `ssh_sftp_connection.png`, `llm_chat.png`
 
-## File Location
+## File Location and Localization
 
 - All screenshots go in `src/{lang}/images/`
-- Images are shared across languages (same filenames, same directory structure per language)
-- **Language-specific captures**: Each language directory should contain screenshots captured in that language's UI locale. Switch the app language before capturing so that UI labels (buttons, menus, headers) appear in the correct language for each version
-- When UI is purely visual with no text (e.g., diagrams), one capture can be shared across all directories
+- All four language directories (`en/`, `ko/`, `ja/`, `th/`) use **identical filenames** for the same screen — the filename is the contract; only the rendered UI language differs.
+- **Each language directory MUST contain screenshots captured in that language's UI locale.** Switch the UI language before capturing so that labels (sidebar menus, buttons, dialog titles, table headers, breadcrumbs, etc.) appear in the correct language for each version.
+   * Korean docs (`src/ko/images/`) → capture with UI language set to **한국어**
+   * Japanese docs (`src/ja/images/`) → capture with UI language set to **日本語**
+   * Thai docs (`src/th/images/`) → capture with UI language set to **ภาษาไทย**
+   * English docs (`src/en/images/`) → capture with UI language set to **English**
+- **Single-language exceptions** (one capture shared across all 4 directories) are allowed only when the image is purely visual with no UI text — e.g., architecture diagrams, terminal/CLI output, third-party tool screenshots (VS Code, MLflow, etc.), version-print outputs.
+- For all other screenshots (any image showing Backend.AI WebUI chrome — sidebar, header, modals, forms, tables), the file in each language directory **must be a separate capture in that language**, even if the underlying screen layout is identical.
+
+### Switching Languages In-Place
+
+The WebUI exposes a global function `window.switchLanguage(lang)` that updates the UI language **without reloading the page** (added in PR #5796 / FR-2230). Use this for screenshot capture instead of navigating to `/usersettings` each time — it preserves the current page state (open modals, populated forms, applied filters, etc.) and lets you capture the **same screen** in all four languages from a single setup.
+
+Available locale codes: `'en'`, `'ko'`, `'ja'`, `'th'`.
+
+**Recommended capture pattern (4 languages from one page state):**
+
+```javascript
+// In Playwright MCP (via browser_evaluate):
+() => { window.switchLanguage('ko'); return 'ok'; }
+// → take screenshot, save to ko/images/<file>.png
+
+() => { window.switchLanguage('ja'); return 'ok'; }
+// → take screenshot, save to ja/images/<file>.png
+
+() => { window.switchLanguage('th'); return 'ok'; }
+// → take screenshot, save to th/images/<file>.png
+
+() => { window.switchLanguage('en'); return 'ok'; }
+// → take screenshot, save to en/images/<file>.png  (and reset to English at end of session)
+```
+
+Per-image workflow:
+1. Navigate to the screen, set up necessary state (open modal, fill form, populate data).
+2. Hide developer overlays (e.g., React Grab toolbar) once.
+3. Loop through the 4 languages: `switchLanguage(lang)` → take screenshot → save to `src/{lang}/images/<file>.png`.
+4. Move to the next screen.
+
+This pattern is ~4× faster than re-navigating to `/usersettings` for each language and avoids repeating the page setup four times.
 
 ## Capture Standards
 
@@ -51,7 +87,7 @@ Standards for capturing, naming, and maintaining screenshots in the Backend.AI W
 - Avoid showing personal information, real email addresses, or API keys
 - Clear the browser address bar of internal/development URLs if visible
 - Use light theme as the default (unless documenting dark mode features)
-- **Always capture in English** regardless of which language directory the screenshot will be saved to. Switch the UI language to English before capturing, then copy the same screenshot to all language directories (`en/`, `ko/`, `ja/`, `th/`)
+- For UI language, see **[File Location and Localization](#file-location-and-localization)** — capture in the locale that matches the destination directory (do not capture in English and copy across all languages)
 
 ### Focused Cropping