📑 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.

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.

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.

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.

Goal: Implement the ebook reading logic and the "Vertical Flow" AI 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.

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.

Goal: Implement the D3.js graph and the "You are here" logic.

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.

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.

Goal: Implement the quiz module and cross-platform readiness.

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.

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.

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.
Result Pattern: Every single Mediator Handler must return FluentResults.Result.
Mapster: Perform all DTO-to-UI mappings in the Query/Command Handlers, not in the Razor components.
Isolated Styles: All specific CSS for the Neon effect must be in .razor.css files.