docs(FR-2645): mandate language-specific captures + replace 6 dark-mode WebUI screenshots by ironAiken2 · Pull Request #6868 · lablup/backend.ai-webui

ironAiken2 · 2026-04-22T05:08:31Z

Resolves FR-2645

Summary

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

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.
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 docs(FR-2571): add Allowed Client IPs field to My Account dialog documentation #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:

Navigate to /usersettings, switch UI language to the target locale.
Capture each of the 6 screens at 1440×900 viewport (light mode, React Grab toolbar hidden).
For modal-only captures, crop the viewport screenshot to the dialog's exact bbox using sips.
Save to src/{lang}/images/{filename}.png.
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

ironAiken2 · 2026-04-22T05:08:44Z

docs(FR-2645): mandate language-specific captures + replace 6 dark-mode WebUI screenshots #6868 : 2 dependent PRs (#6885 , #6891 ) 👈 (View in Graphite)
main

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

flow:merge-queue - adds this PR to the back of the merge queue
flow:hotfix - for urgent changes, fast-track this PR to the front of the merge queue

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has required the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

Copilot

Copilot wasn't able to review any files in this pull request.

agatha197

LGTM

graphite-app · 2026-04-22T09:00:23Z

Merge activity

Apr 22, 9:00 AM UTC: agatha197 added this pull request to the Graphite merge queue.
Apr 22, 9:02 AM UTC: Merged by the Graphite merge queue.

…de 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)

…ext rendering (#6891) Stacked on top of #6868. Resolves part of FR-2650. ## Summary First incremental batch of locale screenshot recapture under FR-2650. **1 file** (`dashboard.png`) recaptured in 3 locales using `window.switchLanguage()` (PR #5796 / FR-2230). ## Approach The earlier manifest-based bulk approach (PR #6885, closed) produced too many context-wrong captures (admin vs user view, wrong tabs, modal vs page, drill-down state, etc.). This PR series uses **direct Playwright MCP capture** with per-image context lookup. Progress tracked at `packages/backend.ai-webui-docs/.agent-output/fr-2650-progress.md` (gitignored, 259 entries pending). Next sessions pick up from there incrementally. ## Capture process used 1. Navigate to `/dashboard` in dev WebUI 2. Hide React Grab dev toolbar 3. `window.switchLanguage('ko')` → screenshot → save to `src/ko/images/dashboard.png` 4. `window.switchLanguage('ja')` → screenshot → save to `src/ja/images/dashboard.png` 5. `window.switchLanguage('th')` → screenshot → save to `src/th/images/dashboard.png` Viewport 1440×900 logical, light mode, admin user (`admin@lablup.com`). ## Note for reviewers This PR will be amended/extended as more entries get captured incrementally. Current dashboard layout differs from the prior `en/images/dashboard.png` (different widget arrangement); framing matches the current dev environment which is what the docs render against. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

github-actions Bot assigned ironAiken2 Apr 22, 2026

github-actions Bot added the size:XS ~10 LoC label Apr 22, 2026

ironAiken2 force-pushed the 04-22-docs_fr-2645_replace_6_dark-mode_webui_screenshots_with_light-mode_captures_across_all_4_languages branch from ac46a6a to e5d7156 Compare April 22, 2026 05:32

ironAiken2 marked this pull request as ready for review April 22, 2026 05:48

Copilot AI review requested due to automatic review settings April 22, 2026 05:48

Copilot AI reviewed Apr 22, 2026

View reviewed changes

ironAiken2 requested review from agatha197 and nowgnuesLee April 22, 2026 05:49

ironAiken2 force-pushed the 04-22-docs_fr-2645_replace_6_dark-mode_webui_screenshots_with_light-mode_captures_across_all_4_languages branch from e5d7156 to 5124687 Compare April 22, 2026 05:50

github-actions Bot added size:S 10~30 LoC and removed size:XS ~10 LoC labels Apr 22, 2026

ironAiken2 changed the title ~~docs(FR-2645): replace 6 dark-mode WebUI screenshots with light-mode captures across all 4 languages~~ docs(FR-2645): mandate language-specific captures + replace 6 dark-mode WebUI screenshots Apr 22, 2026

ironAiken2 force-pushed the 04-22-docs_fr-2645_replace_6_dark-mode_webui_screenshots_with_light-mode_captures_across_all_4_languages branch from 5124687 to 9235647 Compare April 22, 2026 06:14

github-actions Bot added size:M 30~100 LoC and removed size:S 10~30 LoC labels Apr 22, 2026

This was referenced Apr 22, 2026

docs(FR-2650): add locale-capture spec + initial 22 page-overview captures (ko/ja/th) #6885

Closed

docs(FR-2650): update all locale screenshots to 2× zoom for sharper text rendering #6891

Merged

agatha197 approved these changes Apr 22, 2026

View reviewed changes

graphite-app Bot force-pushed the 04-22-docs_fr-2645_replace_6_dark-mode_webui_screenshots_with_light-mode_captures_across_all_4_languages branch from 9235647 to 25d2656 Compare April 22, 2026 09:01

graphite-app Bot merged commit 25d2656 into main Apr 22, 2026
8 checks passed

graphite-app Bot deleted the 04-22-docs_fr-2645_replace_6_dark-mode_webui_screenshots_with_light-mode_captures_across_all_4_languages branch April 22, 2026 09:02

github-pages Bot temporarily deployed to github-pages April 22, 2026 09:02 Inactive

ironAiken2 mentioned this pull request Apr 22, 2026

docs(FR-2650): re-capture serving_list_page + model_store_page_v2 in ko/ja/th #6896

Closed

5 tasks

ironAiken2 mentioned this pull request Apr 27, 2026

docs(FR-2645): re-capture all docs screenshots in ko/ja/th UI locales using switchLanguage #7067

Open

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

docs(FR-2645): mandate language-specific captures + replace 6 dark-mode WebUI screenshots#6868
graphite-app[bot] merged 1 commit intomainfrom
04-22-docs_fr-2645_replace_6_dark-mode_webui_screenshots_with_light-mode_captures_across_all_4_languages

ironAiken2 commented Apr 22, 2026 •

edited

Loading

Uh oh!

ironAiken2 commented Apr 22, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

agatha197 left a comment

Uh oh!

graphite-app Bot commented Apr 22, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

ironAiken2 commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

SCREENSHOT-GUIDELINES.md

Image replacements (6 × 4 languages = 24 PNGs)

Capture process

Verification

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

Notes for reviewers

Uh oh!

ironAiken2 commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

agatha197 left a comment

Choose a reason for hiding this comment

Uh oh!

graphite-app Bot commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ironAiken2 commented Apr 22, 2026 •

edited

Loading

`SCREENSHOT-GUIDELINES.md`

ironAiken2 commented Apr 22, 2026 •

edited

Loading

graphite-app Bot commented Apr 22, 2026 •

edited

Loading