---
phase: 03-core-components
task: UAT-and-scrollbar-refactor
total_tasks: 2
status: in_progress
last_updated: "2026-02-28T10:30:11.574Z"
---

<current_state>
Phase 3 plan 03-03 code is committed (Dropdown, Table, ComponentDemo). Multiple rounds of UAT blur mask fixes done. Two major items remain before Phase 3 can be closed:

1. **CyberScrollbar refactor** — current implementation does not match the original description/vision. Needs rework.
2. **Full UAT checks** — all Phase 3 elements need visual/functional verification.
</current_state>

<completed_work>

**Plans 03-01 through 03-03 code complete:**
- 03-01: WindowChrome, GlowPerimeter, DotGrid, CyberScrollbar, shared CSS foundation
- 03-02: Button, TextInput, Label, Toggle, Slider, Panel (6 core UI components)
- 03-03: Dropdown, Table, ComponentDemo (complex components + showcase)

**UAT blur mask fixes (this session + prior):**
- TR notch diagonal blur divs: height reduced 11->8px, confirmed working
- Restored SVG `marginRingPath` with evenodd fill for uniform margin darkening (was accidentally removed during rotated-div refactoring)
- Updated marginRingPath outer path to match CHROME_CLIP_PATH (follows BL diagonal instead of full rectangle)
- Separated concerns: blur divs handle only backdrop-filter blur, SVG handles darkening tint
- Confirmed via red debug fill that SVG tint correctly follows diagonal at BL

**Known accepted limitation:**
- BL corner has a subtle rectangular blur artifact visible when the glow sweep passes. This is a WebView2 limitation — backdrop-filter cannot be clip-pathed to non-rectangular shapes. The darkening (SVG tint) is correct; the blur boundary from the straight HTML div strips creates a faint rectangular edge. Accepted as minor visual imperfection.

**Other UAT fixes from prior sessions:**
- Titlebar z-index changed from z-40 to z-8 (renders behind glow perimeter z-10)
- Various window chrome visual tweaks across multiple commits
</completed_work>

<remaining_work>

1. **CyberScrollbar refactor** — User explicitly stated current form does not reflect original description/vision. This is the PRIORITY next task. Review the original CONTEXT.md/RESEARCH.md vision for what CyberScrollbar should be, discuss with user, then refactor.

2. **Full UAT for all Phase 3 elements** — After scrollbar refactor, systematic visual/functional check of:
   - Window chrome (clip-path, glow perimeter, dot grid)
   - All 8 UI components (Button, TextInput, Label, Toggle, Slider, Panel, Dropdown, Table)
   - ComponentDemo showcase
   - Theme switching across all components
   - Keyboard navigation

3. **Write 03-03-SUMMARY.md** — After UAT approval

4. **Phase 3 verification** — After summary
</remaining_work>

<decisions_made>

- SVG evenodd `marginRingPath` is the correct approach for margin darkening (covers all diagonals uniformly)
- Blur divs (HTML divs with backdrop-filter) are ONLY for blur effect, not darkening — darkening is SVG-only
- BL rectangular blur artifact accepted as WebView2 limitation (backdrop-filter + clip-path incompatibility)
- backdrop-filter does NOT work with any form of clip-path in WebView2 (confirmed across 6+ approaches)
- Rotated HTML divs with backdrop-filter DO work for diagonal blur areas (WebView2 respects CSS transform: rotate())
- DOM order strategy: diagonal blur divs rendered BEFORE straight strips so strips hide anti-aliased seam edges
</decisions_made>

<blockers>
- WebView2 backdrop-filter + clip-path incompatibility limits BL diagonal blur quality (accepted)
- CyberScrollbar vision mismatch needs user discussion before refactoring
</blockers>

<context>
Key files:
- src/components/chrome/GlowPerimeter.tsx — blur mask divs + SVG glow ring + sweep + margin tint
- src/components/chrome/WindowChrome.tsx — window chrome container (CHROME_CLIP_PATH)
- src/components/chrome/CyberScrollbar.tsx — NEEDS REFACTOR
- src/components/chrome/DotGrid.tsx — hex dot grid with parallax
- src/components/Titlebar.tsx — titlebar (z-index 8)
- src/components/ui/*.tsx — all 8 UI components
- src/components/ComponentDemo.tsx — showcase component
- src/styles/components.css — shared CSS foundation
- .planning/phases/03-core-components/03-CONTEXT.md — original vision (check for scrollbar description)
- .planning/phases/03-core-components/03-RESEARCH.md — research (check for scrollbar approach)

The blurStyle object in GlowPerimeter currently has NO background property (blur only):
```js
const blurStyle = {
  'backdrop-filter': 'blur(12px)',
  '-webkit-backdrop-filter': 'blur(12px)',
};
```
All darkening comes from the SVG marginRingPath with fill="rgba(3, 7, 18, 0.4)" and fill-rule="evenodd".
</context>

<next_action>
1. Read 03-CONTEXT.md and 03-RESEARCH.md to understand the original CyberScrollbar vision
2. Read current CyberScrollbar.tsx to understand what it does now
3. Discuss with user what the scrollbar should look like / how it should behave
4. Refactor CyberScrollbar to match vision
5. Then proceed to full UAT of all Phase 3 elements
</next_action>