# Change Request: CR-002

> Created: 2026-03-12
> Status: Approved
> Classification: Modification
> Related Feature: FEATURE-049-B (KB Sidebar & Navigation)

## Request Details

**Requestor:** Human (project owner)
**Date Received:** 2026-03-12
**Priority:** High

## Description

Add a Knowledge Base entry point to the top bar (right side of the workflow mode toggle). When clicked, open a Bootstrap 5 modal window with a split-pane layout:
- **Left panel:** KB folder tree (reusing tree data from `/api/kb/tree`)
- **Right panel:** Article content viewer (markdown rendered)

The sidebar KB section remains unchanged. This modal provides an additional, more discoverable entry point for browsing and reading KB articles from any page context.

## Business Justification

Users cannot easily discover how to access the Knowledge Base browse/home page. The current sidebar-only navigation requires knowing to double-click section headers or expand folder trees. A top-bar button makes KB globally accessible with a single click, following the same pattern as Toolbox, Skills, and Settings.

## Impact Analysis

### Classification

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

**Reasoning:**
- Same users (developers), same KB data, same API endpoints
- No new data models or backend changes needed
- Adds a new UI entry point (top-bar button) and a new modal component
- The sidebar KB tree rendering stays intact — this is additive
- Reuses existing `/api/kb/tree`, `/api/kb/files`, and content rendering patterns

### Comparison Matrix

| Aspect | CR Requirement | Existing Feature(s) |
|--------|---------------|---------------------|
| Users | Same developers | Same developers |
| Workflow | Click top-bar icon → modal with tree+content | Sidebar tree → expand folders → click file |
| Data Model | No changes | KB files + frontmatter |
| UI Elements | New: top-bar button + KB browse modal | Existing: sidebar tree, browse view, article editor |
| API Endpoints | Reuses existing `/api/kb/tree`, `/api/kb/files` | Same endpoints |

### Conflict Analysis

**Conflicts Found:** Yes (minor, all expected)

| # | Type | Affected Feature | Severity | Classification | Description |
|---|------|-----------------|----------|----------------|-------------|
| 1 | design | FEATURE-049-B | Low | expected | Sidebar KB navigation remains but modal provides alternative entry. No conflict — additive. |
| 2 | design | FEATURE-049-D | Low | expected | Article editor modal may need to work alongside KB browse modal (nested modal). Use z-index layering. |
| 3 | dependency | FEATURE-049-C | Low | expected | Browse view (kb-browse.js) renders to main content area. Modal needs its own renderer — new component, not modifying existing. |

**Unexpected Conflict Resolution:** None — all conflicts are expected and minor.

**Mitigation Strategy:**
- Keep sidebar KB code completely untouched
- Create a NEW JS component (`kb-browse-modal.js`) that reuses API data but renders independently
- For article editor: it already uses its own modal with z-index 1051. KB browse modal uses z-index 1050 (below editor).

### Affected Components

| Component | Impact Level | Details |
|-----------|--------------|---------|
| index.html (top bar) | Low | Add KB button in `.menu-actions` |
| kb-browse-modal.js (NEW) | High | New modal component with tree+content split pane |
| kb-browse-modal.css (NEW) | Medium | New styles for the modal layout |
| base.html | Low | Add script/css tags for new component |

### Dependencies

- Bootstrap 5 (already loaded)
- `/api/kb/tree` endpoint (FEATURE-049-A, implemented)
- `/api/kb/files` endpoint with `recursive` param (adding in this CR)
- `marked.js` or similar for markdown rendering (check if already available)

## Proposed Approach

1. Add `📚 Knowledge Base` button to top bar in `index.html` (after workflow toggle, before Toolbox)
2. Create `kb-browse-modal.js` — new standalone component:
   - Opens a full-screen-ish Bootstrap 5 modal (90vw × 85vh, similar to article editor)
   - Left panel (30% width): folder tree rendered from `/api/kb/tree` with expand/collapse
   - Right panel (70% width): article content viewer with markdown rendering
   - Tree node click → loads article in right panel
   - Folder click → expands/collapses in tree
3. Create `kb-browse-modal.css` for split-pane layout styles
4. Wire up the top-bar button to open the modal

## Mockup Impact

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

| Original Mockup | Path | Status After CR |
|-----------------|------|-----------------|
| KB Browse Articles | x-ipe-docs/requirements/EPIC-049/mockups/kb-interface-v1.html | current (unchanged — sidebar view still valid) |

**Updated Mockup(s):** New mockup to be created during implementation showing the modal layout.

## Approval

- [x] Classification approved (DAO-059)
- [x] Conflict analysis reviewed (all expected, minor)
- [x] Approach approved (additive, no sidebar changes)
- [x] Ready for execution

## Execution

**Classification Result:** modification
**Conflicts Resolution:** all_expected

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

## Links

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

---

## Change History

| Date | Change | By |
|------|--------|----|
| 2026-03-12 | CR-002 created — KB top-bar modal entry point | Echo 📡 (DAO-059) |
