Debian
87 lines
4.5 KiB
Markdown
87 lines
4.5 KiB
Markdown
# 📑 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. |