feat(ux): GAP-16 UX/IA improvements, GAP-133 design tokens, GAP-297 CI digest#129
Merged
Conversation
… Part D) Adds a small numbered group-navigation strip so users can jump back to an earlier question group to review or edit it without losing forward progress or resubmitting anything. Groups are marked active (aria-current) or done (checkmark + non-color visual cue), never color-only. Buttons are plain <button> elements, not an ARIA tablist, since no arrow-key roving is implemented here. Also fixes a real pre-existing bug found while touching this file: advanceQGroup() was called via inline onclick but was never in the module's export list, so Object.assign(globalThis, ...) in main.js never attached it — clicking "Continue →" across multiple question groups would have thrown a ReferenceError in production. Extracted the shared flush logic into _flushCurrentGroupAnswers() so advanceQGroup() and the new jumpToQGroup() persist in-progress answers identically. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…art A)
Adds a small "Now viewing: {step}" label above the tab bar, sourced from
the existing _STEP_DISPLAY map, so users can see which workflow step's
sub-tabs are currently shown after a step click silently filters the tab
bar (STAGE_TABS/updateTabBarForStage already did this filtering correctly,
just invisibly).
Screen-reader announcement is combined into the single existing
#workflow-stage-announcer write in switchTab() (stage + tab in one
message) rather than adding a second live region, avoiding a double-
announce on every navigation.
Also fixes a real terminology inconsistency this label would otherwise
have propagated: _STEP_DISPLAY.customizations read "Customisations" while
the step pill itself reads "Customise" (already flagged in tasks/ui-review.md's
H4 finding). Normalized to "Customise" everywhere, including two matching
strings in download-tab.js's "Refine Customisations" button.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…(GAP-16 Part C) The chat+viewer split had zero responsive handling at any width. Below 900px, .main-container switches to a column layout so both panels stack and remain usable; .interaction-area gets a capped height (50vh, 44px when collapsed) so the viewer panel isn't squeezed out. Below 600px the new .tab-stage-label (GAP-16 Part A) is hidden to keep the tab-bar scroll arrows usable in the remaining space. Verified via Playwright against the static markup at 1280/1024/900/899/ 700/600/599px: flex-direction switches at exactly 900px as intended, and toggleChat()'s inline style.flex (main-axis, set on .viewer-area) does not interfere with width in the stacked layout, since main axis becomes vertical once flex-direction is column. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…(GAP-16 Part B) Add a persistent, collapsible CV preview panel shown across the customization/rewrite/spell-check pipeline, so users see a rendered CV long before Layout Review. Fetches only the read-only GET /api/layout-html endpoint via a new early-preview-panel.js module; iframe rendering is extracted into a shared, side-effect-free preview-render.js util (also adopted by layout-instruction.js) so no mutating fetch path can leak into this read-only panel via a shared import. Adds an ESLint mutation-boundary guard scoped to early-preview-panel.js, wired into CI, as a structural backstop beyond the unit tests. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
master-cv.js referenced a non-existent --cv-warning-bg token that silently fell through to its hardcoded fallback; fixed to the real --cv-warn-bg. Add 13 new --cv-* tokens for the raw hex colors reused 3+ times in styles.css (error-dark, success-text-dark, text-darkest, gray-100/200, warn-dark/text-dark, sky-bg-md/border, emerald-bg, orange-text, green-700, bg-input), replacing 44 occurrences. Raw hex literal count: 148 -> 117. Verified pure refactor (identical resolved color values) via a throwaway Playwright check. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…lasses (GAP-133) Batch 2 of the inline-style cleanup: 4 modal close buttons duplicated the existing .modal-close-btn class byte-for-byte (missing its :hover state) — now use the class directly. 6 modal-header divs repeated the same flex-split layout inline — extracted to .modal-header-split. 6 modal title <h2>s repeated style="margin:0;" — folded into the existing .modal-header h2 rule instead. The entire Settings modal's field/card markup (LLM Defaults, Generation Defaults, Retry Policy) repeated 7 distinct inline-style patterns per field — extracted to .settings-card/.settings-card-title/.settings-card-grid/.field-group/ .field-label-sm/.field-hint-xs/.settings-input. Inline style="" count: 228 -> 157. Verified pixel-identical computed styles via Playwright. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Port the pr-summary job (commit 031000c on feature/multi-user-deployment, already shipped and reviewed there but not yet merged into devel) rather than re-deriving a possibly-divergent version. Runs if: always() after codeql/python-tests/js-tests/lint/integration-harness, writes a pass/fail table to $GITHUB_STEP_SUMMARY, and posts a PR comment with a link to the Actions log only when a required check actually failed. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
… 39) Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…entation A post-implementation committee review (6 personas: frontend-developer, ux-expert, accessibility-specialist, graphical-designer, ci-cd-engineer, trust-compliance) against the shipped GAP-16/133/297 code found no Critical or unresolved-safety issues, but surfaced 6 fixable items: - graphical-designer (Major): --cv-green-700 and --cv-success-md were near-duplicate/inconsistently-used greens with no naming signal for which to reach for. Renamed to --cv-success-md-dark, documented as the explicit hover/darken pair for --cv-success-md. - accessibility-specialist (Minor, WCAG 1.4.1): .q-group-dot.active relied on color alone, unlike .done (dashed border + checkmark). Added a non-color double-ring box-shadow cue. - graphical-designer (Minor x3): 4 raw hex values in the settings modal exactly matched existing tokens but were missed during extraction — tokenized. .dirty-phases-callout mixed a tokenized color with 3 untouched raw-hex siblings in the same rule (the exact "alongside an existing token" case GAP-133's tokenization criterion targets) — added --cv-orange-bg/-border/-text-dark and applied them, also reusing --cv-orange-bg for the non-confidential badge's now provably-duplicate background value. - ux-expert (Minor): the 600px breakpoint hid #tab-stage-label entirely with no substitute, removing the only visible stage indicator on the narrowest viewports. Changed to further truncation instead of display:none. - ux-expert (Minor): the group-nav "no resubmission" aria-label didn't mention that jumping back does trigger a benign draft-autosave POST. Extended the wording to state this explicitly. All 1273 JS + 1516 Python tests pass; no orphaned CSS tokens (re-audited). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
--cv-warning-bgreference, tokenized 13 reused hex literals, and extracted the Settings modal + modal-header/close-button inline styles to utility classes.pr-summaryjob from the unmergedfeature/multi-user-deploymentbranch (commit031000c) rather than re-deriving it.The implementation plan was committee-reviewed twice: once before implementation (6 personas against the plan) and once after (6 personas against the shipped code) — all findings from both rounds were fixed, including a Major finding (near-duplicate/ambiguous CSS token naming) and several Minor accessibility/consistency findings.
Test plan
npm run test:js)pytest, 1 pre-existing deselect)npm run buildsucceeds, bundle committeddevelis conflict-free (git merge-tree)🤖 Generated with Claude Code