# Change Request: CR-001

> Created: 2026-03-04
> Status: Approved
> Classification: Modification
> Related Feature: FEATURE-036-C (Stage Ribbon & Action Execution)

## Request Details

**Requestor:** User (UIUX Feedback)
**Date Received:** 2026-03-04
**Priority:** Medium
**Feedback ID:** Feedback-20260304-134328

## Description

During workflow action execution, action buttons currently become unclickable (`pointer-events: none`) with no visible in-progress animation on the button itself. The user requests three behavioral changes:

1. **Keep buttons clickable** — Action buttons should remain clickable regardless of whether an action is currently executing. Users should be able to re-trigger or trigger other actions while one is running.
2. **Add running animation** — When an action is in-progress, the corresponding action button should display a visible animation (e.g., pulse, spinner) to indicate it is actively running.
3. **Client-side running state** — The running/in-progress visual state should be tracked in JavaScript memory only (not persisted to backend). On page refresh, buttons should show their original API-derived status (done/pending/suggested/normal), not the transient running state.

## Business Justification

Better user experience during action execution:
- Users currently cannot tell which actions are running (no visual feedback)
- Users are blocked from interacting with action buttons during execution
- This contradicts NFR-038-A.15 ("User can interact with the rest of the UI during execution")
- Edge case 4 in the current spec already allows "multiple actions in_progress simultaneously" but the UI prevents it

## Impact Analysis

### Classification

**Type:** Modification to FEATURE-036-C

**Reasoning:**
- Works within current system boundaries — same action buttons, same workflow panel
- No new API endpoints, screens, or data models required
- Same users with extended functionality (clickable during execution + animation)
- Builds upon existing user stories (US-002: See Available Actions, US-003: Execute CLI Agent Action)
- The spec already has edge case 4 allowing simultaneous in-progress actions — this CR makes the UI actually support it

### Comparison Matrix

| Aspect | CR Requirement | Existing Feature(s) |
|--------|---------------|---------------------|
| Users | Same workflow users | Same |
| Workflow | Same action execution flow | Same |
| Data Model | No change (client-side state only) | Backend `in_progress` status via API |
| UI Elements | Same `.action-btn` elements | Same |
| API Endpoints | No new endpoints | Same |

### Affected Components

| Component | Impact Level | Details |
|-----------|--------------|---------|
| workflow-stage.js | Medium | Remove click-blocking logic during execution, add client-side running state tracking |
| workflow.css | Medium | Replace `pointer-events: none` with visible running animation, keep button interactive |
| action-execution-modal.css | Low | May need adjustment to `.action-btn.in-progress` styles |
| action-execution-modal.js | Low | Update to set client-side running state instead of/alongside backend state |

### Dependencies

- No new dependencies introduced
- Existing dependency on FEATURE-036-A (Workflow Manager API) unchanged
- Existing dependency on FEATURE-038-A (Action Execution Modal) — modal behavior unchanged, only button state behavior

## Proposed Approach

1. **Remove click-blocking:** Remove `pointer-events: none` from `.action-btn.in-progress` CSS class
2. **Add running animation:** Add CSS animation (pulse ring or spinner overlay) to `.action-btn.running` class that is visually distinct from the "suggested" glow animation
3. **Client-side state management:** Add a `Set` or `Map` in the workflow-stage.js module to track which actions are currently running. On action click → add to running set → apply `.running` class. On page refresh → set is empty → buttons show API-derived state only.
4. **Button re-click behavior:** If user clicks a running action again, allow re-execution (the existing modal flow handles the interaction)

## Mockup Impact

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

| Original Mockup | Path | Status After CR |
|-----------------|------|-----------------|
| Engineering Workflow View | mockups/workflow-view-v1.html | current (unchanged — mockup shows static states, animation is CSS-only) |

No new mockup version needed — the change is CSS animation behavior, not layout or structural change.

## 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
- [x] [If modification] Specification updated with new/changed ACs
- [x] Next task type set: x-ipe-task-based-feature-refinement

## Specification Changes Required

The following acceptance criteria and sections need updating in specification.md:

### New/Modified Acceptance Criteria

- **AC-010 (modify):** Add new visual state "Running" — visible animation (pulse/spinner), button remains clickable
- **AC-014 (modify):** Remove pre-check that blocks re-clicking in-progress actions; allow re-trigger
- **NEW AC-030:** Action buttons remain clickable during execution — `pointer-events` is NOT set to `none` for in-progress buttons
- **NEW AC-031:** Running action displays visible animation (CSS pulse ring or spinner) distinct from "suggested" glow
- **NEW AC-032:** Running state is tracked client-side only (JavaScript `Set`/`Map`); not persisted to backend; resets on page refresh
- **NEW AC-033:** Multiple actions can display running animation simultaneously

### Edge Case Updates

- **Edge case 4 (modify):** Clarify that UI now fully supports simultaneous in-progress actions (buttons remain clickable with running animation)

## Links

- Feature Specification: [specification.md](x-ipe-docs/requirements/EPIC-036/FEATURE-036-C/specification.md)
- Requirement Details: [requirement-details-part-9.md](x-ipe-docs/requirements/requirement-details-part-9.md)
- UIUX Feedback: [Feedback-20260304-134328](x-ipe-docs/uiux-feedback/Feedback-20260304-134328/feedback.md)

---

## Change History

| Date | Change | By |
|------|--------|----|
| 2026-03-04 | CR created | Bolt ⚡ |
