# Change Request: CR-001

> Created: 02-13-2026
> Status: Approved
> Classification: Modification to FEATURE-030-B
> Related Feature: FEATURE-030-B (UIUX Reference Agent Skill & Toolbar)

## Request Details

**Requestor:** Human (Product Owner)
**Date Received:** 02-13-2026
**Priority:** Medium

## Description

Five improvements to the UIUX Reference Toolbar:

1. **Eyedropper cursor for Color Picker** — When Color Picker mode is active, the mouse cursor should change to an eyedropper/straw icon so the user has clear visual feedback about what they're picking. Currently there's no cursor change, making it hard to aim precisely.

2. **Expandable picked-colors list with hover-to-highlight** — Add an expandable list below/within the Color Picker section showing all picked colors. When hovering over a color entry in the list, highlight the source element on the page where that color was picked.

3. **Expandable selected-elements list with hover-to-highlight** — Add an expandable list below/within the Element Highlighter section showing all selected elements. When hovering over an element entry in the list, highlight that element on the page with the overlay.

4. **Improve element-level screenshot accuracy** — The current element screenshot capture via the agent skill is inaccurate because the toolbar's CSS selector doesn't always match the DOM (dynamic classes). Improve the approach so element screenshots are reliably captured.

5. **Reset all selections after Send References** — After the user clicks "Send References" and data is transmitted, all collected colors and elements should be cleared/reset so a fresh collection session can begin.

## Business Justification

- **Usability:** The eyedropper cursor is standard UX for color-picking tools (Figma, Chrome DevTools, etc.) and gives precise targeting feedback.
- **Review workflow:** Users need to verify what they've collected before sending. Expandable lists with hover-highlight let them review and validate each item.
- **Data quality:** Inaccurate element screenshots reduce the value of the reference data for downstream design tasks.
- **Session continuity:** Without reset after send, stale data accumulates and confuses subsequent collection rounds.

## Impact Analysis

### Classification

**Type:** Modification to FEATURE-030-B

**Reasoning:**
All 5 items enhance existing user stories (US-4 Color Picker, US-5 Element Highlighter, US-6 Send References) within the same toolbar UI, same data model (`window.__xipeRefData`), same panel component. No new APIs, screens, data models, or user types are introduced.

### Comparison Matrix

| Aspect | CR Requirement | Existing Feature(s) |
|--------|---------------|---------------------|
| Users | Same (agent + human user) | Agent + human user |
| Workflow | Same (pick → review → send) with added review step | Pick → send |
| Data Model | Same (`colors[]`, `elements[]`) with reset capability | `colors[]`, `elements[]` |
| UI Elements | Enhanced toolbar panel (lists, cursor) | Toolbar panel with badges |
| API Endpoints | None new | None |

### Affected Components

| Component | Impact Level | Details |
|-----------|--------------|---------|
| Toolbar IIFE (toolbar-template.md) | High | Add cursor style, expandable lists, hover-highlight, reset logic |
| Color Picker handler | Medium | Wire up eyedropper cursor on mode activation |
| Element Highlighter handler | Medium | Wire up hover-highlight from list entries |
| Send References handler | Medium | Clear data store and reset UI after send |
| Agent skill (x-ipe-tool-uiux-reference) | Medium | Improve element screenshot targeting (use element UID from snapshot instead of CSS selector) |

### Dependencies

- None — all changes are self-contained within toolbar IIFE and agent skill procedure.

## Proposed Approach

1. **CR-001-A: Eyedropper cursor** — Set `cursor: crosshair` (or custom eyedropper SVG cursor) on `<body>` when Color Picker is active; restore on deactivation.
2. **CR-001-B: Picked colors list** — Add collapsible `<div>` in panel below Color Picker button. Each color entry shows swatch + hex + selector. On `mouseenter`, find source element via stored selector and show highlight overlay. On `mouseleave`, hide overlay.
3. **CR-001-C: Selected elements list** — Same pattern as colors list but for elements. Each entry shows tag + truncated selector. On `mouseenter`, show bounding-box overlay on the element. On `mouseleave`, hide overlay.
4. **CR-001-D: Screenshot accuracy** — In the agent skill, instead of using CSS selector to find the element, use `take_snapshot()` to get the a11y tree, then find a matching node by bounding box coordinates and use its `uid` for `take_screenshot(uid)`.
5. **CR-001-E: Post-send reset** — After `window.__xipeRefReady = true` is set and the agent has consumed the data, clear `colors[]` and `elements[]`, reset badge counts and list UI, set `__xipeRefReady = false`.

## Mockup Impact

**UI/UX Change:** Yes
**Existing Mockups Referenced:**

| Original Mockup | Path | Status After CR |
|-----------------|------|-----------------|
| Injected Reference Toolbar (light) v2 | mockups/injected-toolbar-v2.html | Superseded by v3 (after refinement) |

**Updated Mockup(s):**

| New Mockup | Path | Based On | Changes Applied |
|------------|------|----------|-----------------|
| TBD — to be created during Feature Refinement | mockups/injected-toolbar-v3.html | injected-toolbar-v2.html | Eyedropper cursor, expandable color/element lists with hover-highlight, post-send reset state |

> Note: Mockup v3 will be created during the Feature Refinement task, not during this CR.

## Approval

- [x] Classification approved by human
- [x] Approach approved by human
- [x] Ready for execution

## Execution

**Classification Result:** modification

**Actions Taken:**
- [x] CR document created in feature folder
- [x] Specification Version History updated with CR link
- [ ] [If UI/UX CR] Mockup v3 deferred to Feature Refinement task
- [x] Next task type set: x-ipe-task-based-feature-refinement

## Links

- Feature Specification: [specification.md](./specification.md)
- Requirement Details: [requirement-details.md](../../requirements/requirement-details.md)

---

## Change History

| Date | Change | By |
|------|--------|----|
| 02-13-2026 | CR created | Nova (Agent) |
