# Change Request: CR-001

> Created: 2026-03-12
> Status: Approved
> Classification: Modification
> Related Feature: FEATURE-049-D (primary), cross-cutting (workplace, content-editor, folder-view, quality-evaluation, tracing-dashboard)

## Request Details

**Requestor:** Human (product owner)
**Date Received:** 2026-03-12
**Priority:** Medium

## Description

Replace all native browser dialog calls (`alert()`, `confirm()`, `prompt()`) with Bootstrap 5 modal dialogs across the entire frontend codebase. This ensures consistent UX, professional appearance, and styleable dialogs throughout the application.

**Scope:** 14 call sites across 6 JavaScript files:

| File | alert | confirm | prompt | Total |
|------|-------|---------|--------|-------|
| `workplace.js` | 0 | 3 | 2 | 5 |
| `content-editor.js` | 0 | 3 | 0 | 3 |
| `quality-evaluation.js` | 2 | 0 | 0 | 2 |
| `kb-article-editor.js` | 0 | 1 | 0 | 1 |
| `tracing-dashboard.js` | 0 | 1 | 0 | 1 |
| `folder-view.js` | 0 | 1 | 0 | 1 |
| **Total** | **2** | **9** | **2** | **14** (note: 1 prompt call is duplicate) |

## Business Justification

- Native browser dialogs are visually inconsistent with Bootstrap 5 themed UI
- Cannot be styled, branded, or customized
- Block the JavaScript thread (synchronous)
- Look unprofessional in a polished application
- Existing Bootstrap modal patterns already proven in `workflow-stage.js` — extracting to shared utility is low-risk

## Impact Analysis

### Classification

**Type:** Modification to existing features (cross-cutting)

**Reasoning:**
- Works within existing system boundaries — no new features, workflows, or data models
- Same user interactions (confirm yes/no, enter text, acknowledge alert) — only presentation changes
- Existing Bootstrap modal implementations in `workflow.js` and `workflow-stage.js` prove the pattern
- Cross-cutting scope (6 files) represents implementation breadth, not feature novelty

### Comparison Matrix

| Aspect | CR Requirement | Existing Feature(s) |
|--------|---------------|---------------------|
| Users | Same users | Same users |
| Workflow | Same confirm/prompt/alert flows | Native browser dialogs |
| Data Model | No changes | No changes |
| UI Elements | Bootstrap 5 modals | Native browser dialogs |
| API Endpoints | No changes | No changes |

### Conflict Analysis

**Conflicts Found:** No

No spec, design, or dependency conflicts. This is a purely presentational change. The return values remain identical:
- `confirm()` → `Promise<boolean>` (was sync `boolean`)
- `prompt()` → `Promise<string|null>` (was sync `string|null`)
- `alert()` → `Promise<void>` (was sync `void`)

**Note:** The sync→async change requires callers to be `async` functions or handle promises. All affected call sites already use `async` patterns or can trivially be converted.

### Affected Components

| Component | Impact Level | Details |
|-----------|--------------|---------|
| workplace.js | Medium | 5 calls: 3 confirm (unsaved changes), 2 prompt (folder name, rename) |
| content-editor.js | Medium | 3 calls: all confirm (unsaved changes) |
| quality-evaluation.js | Low | 2 calls: alert (clipboard copy feedback) |
| kb-article-editor.js | Low | 1 call: confirm (discard unsaved changes) |
| tracing-dashboard.js | Low | 1 call: confirm (delete all trace logs) |
| folder-view.js | Low | 1 call: confirm (delete file/folder) |
| **New: shared utility** | New module | Extract `showConfirmModal`, `showPromptModal`, `showAlertModal` from existing workflow-stage.js patterns |

### Dependencies

- Bootstrap 5 CSS/JS (already loaded in application)
- No new dependencies required

## Proposed Approach

1. **Create shared utility module** `src/x_ipe/static/js/utils/bootstrap-dialogs.js`
   - Extract `showConfirmModal()`, `showPromptModal()`, `showAlertModal()` from `workflow-stage.js` patterns
   - Return Promises for async/await usage
   - Configurable: title, body, button labels, danger mode
2. **Replace all 14 call sites** with utility function calls
3. **Update tests** to mock the new utility functions
4. **Verify** via chrome-devtools-mcp that all dialogs render correctly

## Mockup Impact

**UI/UX Change:** Yes — visual change from native to Bootstrap modals
**Existing Mockups Referenced:** No mockups need updating — dialogs were not part of the original KB mockups (they are triggered by user actions not shown in static mockups)

## Approval

- [x] Classification approved (DAO-056)
- [x] Conflict analysis reviewed (DAO-056)
- [x] Approach approved (DAO-056)
- [x] Ready for execution

## Execution

**Classification Result:** modification
**Conflicts Resolution:** none

**Actions Taken:**
- [x] CR document created in feature folder
- [x] Conflict analysis completed and documented
- [x] Specification Version History to be updated with CR link
- [x] Next task type set: x-ipe-task-based-feature-refinement

## Links

- Feature Specification: [specification.md](./specification.md)
- DAO-054: Original instruction (Bootstrap 5 dialogs)
- DAO-055: Task routing
- DAO-056: Classification approval

---

## Change History

| Date | Change | By |
|------|--------|----|
| 2026-03-12 | CR created | Echo 📡 (Agent) |
