# Story 2.4: Panel d'Insights & Revue des Outliers (Frontend)

Status: review

## Story

As a Julien (Analyst),
I want to review detected outliers in a side panel,
so that I can understand why they are flagged before excluding them.

## Acceptance Criteria

1. **Insight Panel UI:** A slide-over panel (Shadcn Sheet) displays detailed outlier information.
2. **Interactive Triggers:** Clicking a "warning" badge in the grid header opens the panel for that column.
3. **Reasoning Display:** The panel shows the statistical reason for each flagged point (e.g., "Value 9.9 is > 3 Sigma").
4. **Visual Summary:** Displays a small chart (boxplot or histogram) showing the distribution and the outlier's position.
5. **Batch Actions:** Users can click "Exclude All" within the panel to gray out all flagged rows in the grid.

## Tasks / Subtasks

- [x] **Shadcn UI Setup** (AC: 1)
  - [x] Install Shadcn `Sheet` and `ScrollArea` components.
- [x] **InsightPanel Component** (AC: 1, 3, 4, 5)
  - [x] Create `frontend/src/features/insight-panel/components/InsightPanel.tsx`.
  - [x] Integrate `Recharts` for distribution visualization.
- [x] **State Integration** (AC: 2, 5)
  - [x] Update `useGridStore` to trigger outlier detection and store results.
  - [x] Add `detectedOutliers` object to the Zustand store.

## Dev Notes

- **Explainable AI:** Successfully mapped backend `reasons` to user-friendly list items in the panel.
- **Visualization:** Used `recharts` to build a dynamic histogram of the selected column.
- **Integration:** Added a pulse animation to column headers when outliers are detected.

### Project Structure Notes

- Created `frontend/src/features/insight-panel/components/InsightPanel.tsx`.
- Integrated panel trigger in `frontend/src/features/smart-grid/components/SmartGrid.tsx`.
- Updated main layout in `frontend/src/app/page.tsx` to host the panel.

### References

- [Source: ux-design-specification.md#2.4 Novel UX Patterns]
- [Source: architecture.md#Frontend Architecture]

## Dev Agent Record

### Agent Model Used

{{agent_model_name_version}}

### Completion Notes List
- Implemented the `InsightPanel` slide-over component.
- Integrated automated backend outlier detection triggered on data change.
- Added a distribution histogram using Recharts.
- Implemented "Exclude All" functionality which syncs with the Grid's visual state.

### File List
- /frontend/src/features/insight-panel/components/InsightPanel.tsx
- /frontend/src/store/use-grid-store.ts
- /frontend/src/features/smart-grid/components/SmartGrid.tsx
- /frontend/src/app/page.tsx