# 📑 Project Backlog: Nexus AI E-Reader (Mockup Implementation)
**Architecture Framework:** .NET 10 | Blazor Component Model | CQRS with MediatR | FluentResult | Mapster

---

## 🟢 PHASE 1: Infrastructure & Design Tokens
*Goal: Prepare the clean architecture foundation and the visual DNA.*

### [TASK-01] Solution & Directory Structure Setup
- **Action:** Create the folder structure: `/src` for projects, `/tests` for unit/integration tests.
- **Details:** Initialize `NexusReader.Web` (Blazor), `NexusReader.Application`, `NexusReader.Domain`, and `NexusReader.Infrastructure`.
- **DoD:** Solution compiles with strict folder separation.

### [TASK-02] Core Library Integration
- **Action:** Install and configure LuckyPennySoftware.MediatR, Mapster, and FluentResult.
- **Details:** - Setup `MappingConfig` for Mapster in the Application layer.
    - Implement a `BaseHandler` that returns `Result<T>`.
- **DoD:** A sample Query returns a `Success` Result via MediatR.

### [TASK-03] Nexus Neon Design System
- **Action:** Implement global CSS variables in `app.css` and base Atoms.
- **Details:** - Variables: `--nexus-neon: #00ff99`, `--nexus-bg: #121212`, `--nexus-card: #1e1e1e`.
    - Components: `NexusButton.razor`, `NexusTypography.razor` (handling Serif for ebook, Sans for UI).
- **DoD:** Variables are accessible via all scoped CSS files.

---

## 🔵 PHASE 2: Seamless Reader & AI Assistant (Left Side / Inline)
*Goal: Implement the ebook reading logic and the "Vertical Flow" AI injection.*

### [TASK-04] ReaderCanvas & Dynamic Content Injection
- **Action:** Create `ReaderCanvas.razor` to render ebook text.
- **Details:** - Logic to split text into blocks.
    - Implementation of an "Injection Point" system where `AiAssistantBubble.razor` can be rendered inline between paragraphs.
- **Mockup Match:** Text must use the high-contrast Serif font from the mockup.

### [TASK-05] AiAssistantBubble Component
- **Action:** Implement the AI chat bubble with a robot avatar.
- **Details:** - Scoped CSS for the glowing border and dark glassmorphism background.
    - Parameters for `DialogueText` and `ActionButtons` ("Pokaż więcej", "Rozwiąż quiz").
    - Integration with Semantic Kernel for streaming text.
- **DoD:** Bubble appears smoothly in the text flow without absolute positioning.

---

## 🟡 PHASE 3: Knowledge Graph & Brain (Right Side / Flow)
*Goal: Implement the D3.js graph and the "You are here" logic.*

### [TASK-06] D3.js Knowledge Graph Bridge
- **Action:** Implement `KnowledgeGraph.razor` with JS Interop.
- **Details:** - ES6 Module `knowledgeGraph.js` using D3.js v7.
    - SVG ViewBox scaling for portrait orientation.
    - Implementation of the "TU JESTEŚ" (You Are Here) pulsing label on the active node.
- **DoD:** Clicking a node in JS triggers a C# EventCallback via `DotNetObjectReference`.

### [TASK-07] Semantic Mapping Service
- **Action:** Create the `GetKnowledgeGraphQuery` (CQRS).
- **Details:** - Service uses Semantic Kernel to extract nodes from the current chapter.
    - Mapster maps the AI raw response to the `GraphViewModel`.
- **DoD:** Graph updates dynamically when the reader moves to a new chapter.

---

## 🟠 PHASE 4: Verification & Mobile Polish
*Goal: Implement the quiz module and cross-platform readiness.*

### [TASK-08] KnowledgeCheck (Quiz) Module
- **Action:** Implement the `SubmitAnswerCommand` using MediatR.
- **Details:** - UI: `KnowledgeCheck.razor` with radio buttons and a "Wyślij" (Submit) button.
    - Logic: Handler returns `Result` (Success/Failure) via FluentResult.
    - Mapster: Map `QuizDto` to `QuizViewModel`.
- **Mockup Match:** Neon highlight on the selected/correct answer.

### [TASK-09] Persistence & Cross-Platform (Hybrid)
- **Action:** Implement `IPlatformService` for Android/iOS support.
- **Details:** - Safe-area-insets implementation for notches.
    - `BrowserStorage` implementation of `AppState` to save progress.
    - Haptic feedback abstraction (trigger vibration on correct answer).
- **DoD:** App maintains graph state after a manual refresh.

---

## 🛠️ Instructions for NexusArchitect
1. **Vertical Flow Priority:** Ensure that the AI assistant and the Graph never overlay text. Use `Flexbox` or `Grid` for a single, continuous scrollable column in portrait mode.
2. **Result Pattern:** Every single Mediator Handler **must** return `FluentResults.Result`.
3. **Mapster:** Perform all DTO-to-UI mappings in the Query/Command Handlers, not in the Razor components.
4. **Isolated Styles:** All specific CSS for the Neon effect must be in `.razor.css` files.