browser/openspec/changes/polish-theme-frame-accessories/tasks.md

Tasks

• Add generated mecha and magical-girl SVG accessory variables to theme tokens.
• Apply accessory variables to shared framed surfaces and active sidebar states.
• Extend theme token tests for accessory variables.
• Run tests, structure check, OpenSpec validation, and browser walkthrough.
• Recalibrate uploaded-background glass so configured artwork remains recognizable.
• Enlarge and strengthen magical-girl frame accessories across shared surfaces.
• Repeat browser walkthrough and all repository validation after the correction.
• Reduce magical-girl accessories to compact single-motif edge badges.
• Rotate distinct heart, wand, moon, ribbon, crystal, and circle assets across repeated items.
• Verify uploaded backgrounds remain unobscured after the decoration-density correction.
• Clear stale palette variables and synchronize shell chrome after live theme switches.
• Suppress nested state-view frames when a shared parent already owns the decoration.
• Re-run browser theme switching and repository validation for the isolation fix.

Evidence

• npm test: 11 files passed, 49 tests passed.
• npm run typecheck: passed.
• npm run build: passed.
• scripts/check-structure.sh: passed.
• openspec validate polish-theme-frame-accessories --strict: passed.
• Browser walkthrough: entered local fallback workbench, verified mecha active navigation uses generated spacecraft/radar accessories, then switched through Profile Settings to magical-girl / 粉月魔法阵 and verified shared panels render heart/star/wand/magic-circle accessories.
• Follow-up browser walkthrough after visual feedback: reduced magical-girl accessory size to 70px 42px, 78px 54px, lowered opacity to 0.44, moved frame accessories under content (::after z-index: 0, content z-index above), and confirmed the custom-background overlay token is transparent.
• Second follow-up after screenshot feedback: converted the SVG accessories to small line-art edge accents, locked token accessory sizes to max 48px, reduced custom-background surface blur to 4px, removed theme color tint from uploaded-background panel material, lowered custom-background ambient particles to 0.08, and verified a headless Chrome screenshot at .tmp/theme-visual-check/profile-custom-background.png with data-custom-background="true", --custom-background-overlay: transparent, and profile panels using blur(4px) saturate(1.02).
• Final color audit after palette feedback: rebalanced uploaded-background mode so the page uses --custom-background-overlay: transparent, keeps controls on readable dark glass, and removes large-panel blur in favor of low-opacity ink glass; verified fresh headless screenshots at .tmp/theme-color-audit/mecha-uploaded.png and .tmp/theme-color-audit/magical-uploaded.png where uploaded artwork remains visible behind the profile/settings panels.
• Custom-background readability pass after latest screenshots: removed the visible theme-color mask from uploaded backgrounds while dimming the wallpaper layer itself, increased content-panel opacity/blur only on foreground surfaces, added dark glass treatment for server toolbars and state/error panels, and added a compact title backplate so bright uploads do not wash out page headers; verified screenshots at .tmp/custom-background-audit/servers.png and .tmp/custom-background-audit/profile-settings.png with data-custom-background="true", filter: saturate(0.72) contrast(0.88) brightness(0.82), and panel backdrop blur(16px) saturate(0.78).
• Magical-girl correction after latest feedback: restored visible pink moonlight panel material and frame accessories under custom uploaded backgrounds, prevented the generic custom-background opacity rule from suppressing magical-girl decorations, and moved magical-girl frame accessories outside the panel border with larger edge-overhanging assets; verified screenshots at .tmp/magical-custom-background-check.png and .tmp/magical-preset-border-check.png.
• Final uploaded-background correction: replaced opaque maroon surfaces with low-opacity neutral-pink crystal glass, restored the uploaded artwork to saturate(0.92) contrast(0.96) brightness(0.94), removed backdrop blur from large magical-girl custom-background panels, added real ::after accessory layers for server toolbars and state views, and strengthened generated heart/star/wand/magic-circle SVGs so they cross the border at 132-154px with 0.80-0.84 opacity. Browser walkthrough at 1440x1000 confirmed the configured anime artwork remains recognizable, accessories are immediately visible outside the frame, and the browser console has no errors; evidence saved at .tmp/magical-custom-background-final.png.
• Final verification: npm --prefix platform_web test passed 11 files and 49 tests; npm --prefix platform_web run typecheck, npm --prefix platform_web run build, and scripts/check-structure.sh passed; openspec validate polish-theme-frame-accessories --strict reported the change valid with exit code 0 (telemetry flush warnings only).
• Decoration-density correction after item-level feedback: replaced the two oversized magical illustrations on each surface with one 68px × 44px edge-overhanging badge, generated six distinct inline SVG motifs (heart wings, star wand, crescent moon, ribbon, crystal, and magic circle), and rotate them through repeated cards with shared CSS variables and :nth-child() rules. In-app browser verification on #/profile with data-theme-palette="magical-girl" and data-custom-background="true" confirmed the three metric items resolve to heart, wand, and moon, lower settings panels resolve to different motifs, the configured background remains fully recognizable, and browser console errors are empty.
• Decoration-density verification: npm --prefix platform_web test passed 11 files and 49 tests; npm --prefix platform_web run typecheck, npm --prefix platform_web run build, scripts/check-structure.sh, and openspec validate polish-theme-frame-accessories --strict passed (OpenSpec telemetry flush warnings only).
• Theme-isolation correction: applyThemePalette now removes the union of prior palette variables before applying the selected palette and publishes a live palette-change event so AppShell updates its subtitle and swatch strip without a remount.
• Single-frame correction: nested .state-view elements inside shared framed surfaces now resolve to transparent, borderless, shadowless content with both pseudo-elements disabled, while the parent surface keeps the active theme accessory.
• Browser walkthrough with an uploaded custom background: switched magical-girl to mecha-black and confirmed data-theme-palette="mecha-black", sidebar subtitle 黑色机甲 / OPS, cyan --accent: #48e6ff, and no remaining inline --frame-accessory-heart; switched back to magical-girl and confirmed only parent panel accessories render; restored mecha as the final state. Two nested home-page state views resolved to border: 0px, transparent backgrounds, and ::after content: none; browser warnings/errors were empty.
• Isolation verification: npm --prefix platform_web test passed 12 files and 51 tests; npm --prefix platform_web run typecheck, npm --prefix platform_web run build, and scripts/check-structure.sh passed; strict OpenSpec validation reported the change valid (telemetry flush warnings only).