feat(search/rag): implement NexusSearchBox, dynamic Qdrant collection auto-provisioning, batch vector ingestion, mobile Serilog logging, and resolve 401 auth handler error (#51)

Resolves #52

This Pull Request introduces the **NexusSearchBox** search feature with premium unified styling, implements a robust **dynamic Qdrant collection auto-provisioning and batch-vector ingestion pipeline**, integrates a unified **Serilog logging infrastructure** for the Blazor Hybrid environment (MAUI), and resolves the **401 Unauthorized API header propagation error** inside mobile builds.

### 🚀 Key Implementations

#### 1. Premium `NexusSearchBox` & Semantic Search UI
* **NexusSearchBox Component:** Created an elegant search-as-you-type search box with smooth key navigation, quick-clearing, and seamless dynamic styling.
* **Unified Aesthetics:** Refactored the search box isolated styling to align perfectly with the dashboard's design system using glassmorphism, `--nexus-neon` token gradients, and smooth pulse/fade animations.
* **Semantic Search Integration:** Integrated semantic search query dispatching (`SearchLibrarySemanticallyQuery`) and wired up navigation seamlessly through the updated `ReaderNavigationService`.
* **Tests Hardening:** Added/adapted query assertions in `QueryTests.cs` to guarantee safe parameterization and error boundary mapping.

#### 2. Qdrant Collection Provisioning & Vector Ingestion
* **Dynamic Auto-Provisioning:** Implemented dynamic checking and lazy-creation of the `knowledge_units` collection using 768 dimensions and Cosine distance.
* **High-Performance Ingestion:** Optimized `ProcessKnowledgeUnitsAsync` with high-performance batch embedding generation using `_embeddingGenerator` and deterministic MD5 GUIDs for stable, duplicate-free upsertion.
* **Database Cache Clear Sync:** Integrated Qdrant collection deletion in `ClearCacheAsync` to ensure absolute consistency between the PostgreSQL database cache and vector database indices.

#### 3. Cross-Platform MAUI Logging (Serilog Infrastructure)
* **Serilog Integration:** Configured cross-platform Serilog routing in `SerilogConfiguration.cs`, streaming diagnostic logs safely across native platforms and the Blazor Webview container.
* **Interop Bridge:** Built `BlazorLoggingBridge.cs` to capture web console messages and pipe them directly to the native host logger.
* **Demo Interface:** Added an interactive `SerilogDemo.razor` sandbox under Pages.

#### 4. Resolving 401 Load Errors (Authentication Handler Flow)
* **Authentication Header Handler:** Implemented the `MobileAuthenticationHeaderHandler` to correctly extract, validate, and inject bearer JWT tokens into outbound API requests.
* **Configuration-based API Host:** Structured standard API URI routing to use clean configuration bindings in `appsettings.json`.

---

### 🧪 Verification & Build Status
* Run `dotnet build` from the solution root: Successfully compiled the full multi-targeted solution (`Liczba błędów: 0`).
* All unit and integration tests successfully executed and verified (`dotnet test`).

---------

Co-authored-by: Marek Jasiński <jasins.marek@gmail.com>
Co-authored-by: Marek Jaisński <jasins.marek@gmail.com>
Reviewed-on: #51
Co-authored-by: Antigravity <antigravity@google.com>
Co-committed-by: Antigravity <antigravity@google.com>

src/NexusReader.UI.Shared/Components/Atoms/NexusCitationMarker.razor

@@ -0,0 +1,76 @@
+@using NexusReader.Application.DTOs.AI
+
+<div class="nexus-citation-container" @onmouseenter="ShowPopup" @onmouseleave="HidePopup">
+    <button type="button" class="nexus-citation-trigger" aria-label="Citation source">
+        <!-- Circular Neon SVG Radar Ping / Stylized Book Icon -->
+        <svg class="neon-radar-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <circle cx="12" cy="12" r="6"></circle>
+            <circle cx="12" cy="12" r="2"></circle>
+        </svg>
+        <span class="pulse-ring"></span>
+    </button>
+
+    @if (_isHovered && _citation != null)
+    {
+        <div class="nexus-citation-popup">
+            <div class="popup-header">
+                <span class="book-title"><i class="bi bi-book-half"></i> @_citation.SourceBook</span>
+                @if (!string.IsNullOrEmpty(_citation.Author))
+                {
+                    <span class="separator">•</span>
+                    <span class="book-author">@_citation.Author</span>
+                }
+                @if (_citation.PageNumber.HasValue)
+                {
+                    <span class="separator">•</span>
+                    <span class="page-number">Page @_citation.PageNumber.Value</span>
+                }
+            </div>
+            <div class="popup-body">
+                <p class="citation-quote">"@_citation.Snippet"</p>
+            </div>
+            <div class="popup-footer">
+                <span class="id-badge">ID: @SourceId.Substring(0, Math.Min(8, SourceId.Length))</span>
+            </div>
+        </div>
+    }
+</div>
+
+@code {
+    [Parameter]
+    [EditorRequired]
+    public string SourceId { get; set; } = string.Empty;
+
+    [Parameter]
+    public List<CitationDto>? Citations { get; set; }
+
+    private bool _isHovered;
+    private CitationDto? _citation;
+
+    protected override void OnParametersSet()
+    {
+        _citation = Citations?.FirstOrDefault(c => c.CitationId.Equals(SourceId, System.StringComparison.OrdinalIgnoreCase));
+        
+        // If not found in the thread citations, provide a clean fallback so the UI never displays an empty error
+        if (_citation == null)
+        {
+            _citation = new CitationDto
+            {
+                CitationId = SourceId,
+                SourceBook = "Grounded Document Chunk",
+                Snippet = "Context snippet retrieved from vector search node."
+            };
+        }
+    }
+
+    private void ShowPopup()
+    {
+        _isHovered = true;
+    }
+
+    private void HidePopup()
+    {
+        _isHovered = false;
+    }
+}

src/NexusReader.UI.Shared/Components/Atoms/NexusCitationMarker.razor.css

@@ -0,0 +1,148 @@
+.nexus-citation-container {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    margin: 0 4px;
+}
+
+.nexus-citation-trigger {
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #06b6d4; /* Glowing Cyan */
+    width: 20px;
+    height: 20px;
+    position: relative;
+    outline: none;
+    transition: all 0.3s ease;
+}
+
+.nexus-citation-trigger:hover {
+    color: #00ff99; /* Neon Green on hover */
+    transform: scale(1.2);
+}
+
+.neon-radar-svg {
+    width: 100%;
+    height: 100%;
+    filter: drop-shadow(0 0 4px currentColor);
+    animation: radar-spin 8s linear infinite;
+}
+
+.pulse-ring {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border: 1px solid currentColor;
+    border-radius: 50%;
+    animation: radar-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.nexus-citation-popup {
+    position: absolute;
+    bottom: calc(100% + 10px);
+    left: 50%;
+    transform: translateX(-50%) translateY(5px);
+    width: 320px;
+    padding: 1rem;
+    border-radius: 12px;
+    background: rgba(10, 16, 26, 0.9); /* Premium dark background */
+    border: 1px solid rgba(6, 182, 212, 0.25); /* Cyan border */
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 12px rgba(6, 182, 212, 0.15);
+    z-index: 1000;
+    pointer-events: none;
+    opacity: 0;
+    animation: popup-fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    transform-origin: bottom center;
+}
+
+.popup-header {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: #00ff99; /* Emerald/Neon Green micro-header */
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 0.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    padding-bottom: 0.35rem;
+}
+
+.separator {
+    color: rgba(255, 255, 255, 0.3);
+}
+
+.book-title {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.book-author, .page-number {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.popup-body {
+    margin-bottom: 0.5rem;
+}
+
+.citation-quote {
+    font-size: 0.85rem;
+    line-height: 1.4;
+    color: rgba(255, 255, 255, 0.95);
+    font-style: italic;
+    margin: 0;
+}
+
+.popup-footer {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.id-badge {
+    font-size: 0.65rem;
+    color: rgba(255, 255, 255, 0.3);
+    font-family: monospace;
+}
+
+/* Animations */
+@keyframes radar-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes radar-ping {
+    0% {
+        transform: scale(1);
+        opacity: 0.8;
+    }
+    100% {
+        transform: scale(2.2);
+        opacity: 0;
+    }
+}
+
+@keyframes popup-fade-in {
+    0% {
+        opacity: 0;
+        transform: translateX(-50%) translateY(8px) scale(0.95);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0) scale(1);
+    }
+}

src/NexusReader.UI.Shared/Components/Atoms/NexusSearchBox.razor

@@ -1,39 +1,347 @@
 @namespace NexusReader.UI.Shared.Components.Atoms
+@using System.Text.RegularExpressions
+@using MediatR
+@using NexusReader.Application.DTOs.AI
+@using NexusReader.Application.Queries.Library
+@inject IMediator Mediator
+@inject IReaderNavigationService NavService
+@inject IReaderInteractionService InteractionService
+@inject NavigationManager NavManager
+@inject AuthenticationStateProvider AuthStateProvider
+@inject ILogger<NexusSearchBox> Logger
+@implements IDisposable
 
-<div class="nexus-search-container @(IsActive ? "active" : "")">
+<div class="nexus-search-container @(IsFocused ? "focused" : "") @(HasResults ? "has-results" : "")" @onfocusin="HandleFocusIn" @onfocusout="HandleFocusOut">
     <div class="search-wrapper">
-        <i class="nexus-icon @IconClass"></i>
-        <input type="text" 
-               @bind="SearchValue" 
-               @bind:event="oninput"
-               @onkeypress="HandleKeyPress"
-               placeholder="@Placeholder" 
+        <div class="search-icon-container">
+            @if (_isLoading)
+            {
+                <div class="neon-spinner"></div>
+            }
+            else
+            {
+                <i class="nexus-icon bi bi-search"></i>
+            }
+        </div>
+        
+        <input type="text"
+               value="@SearchValue"
+               @oninput="HandleInput"
+               @onkeydown="HandleKeyDown"
+               placeholder="@Placeholder"
                class="nexus-search-input" />
+               
+        <div class="ai-status-indicator" title="Aktywny silnik AI biblioteki">
+            <span class="ai-pulse-dot"></span>
+        </div>
+
         @if (!string.IsNullOrEmpty(SearchValue))
         {
-            <button class="clear-btn" @onclick="ClearSearch">×</button>
+            <button type="button" class="clear-btn" @onclick="ClearSearch" aria-label="Wyczyść wyszukiwanie">×</button>
         }
     </div>
+
+    @if (_isDropdownOpen && (!string.IsNullOrEmpty(SearchValue) || _isLoading || _results.Any() || _searchError != null))
+    {
+        <div class="search-dropdown glass-panel">
+            @if (_isLoading)
+            {
+                <div class="dropdown-state-container">
+                    <div class="neon-spinner-large"></div>
+                    <span class="state-text">Analizowanie biblioteki semantycznej...</span>
+                </div>
+            }
+            else if (_searchError != null)
+            {
+                <div class="dropdown-state-container error">
+                    <i class="bi bi-exclamation-triangle-fill error-icon"></i>
+                    <span class="state-text">@_searchError</span>
+                </div>
+            }
+            else if (_results.Any())
+            {
+                <div class="dropdown-results-list">
+                    @foreach (var result in _results)
+                    {
+                        <div class="result-card" @onclick="() => HandleResultClick(result)">
+                            <div class="result-header">
+                                <span class="relevance-badge">@(Math.Round(result.RelevanceScore * 100))% Trafności</span>
+                                @if (!string.IsNullOrEmpty(result.SourceBookTitle))
+                                {
+                                    <span class="source-title" title="@result.SourceBookTitle">w <strong>@result.SourceBookTitle</strong></span>
+                                }
+                            </div>
+                            <div class="result-snippet">
+                                @((MarkupString)HighlightQueryWords(result.Snippet, SearchValue))
+                            </div>
+                        </div>
+                    }
+                </div>
+            }
+            else if (!string.IsNullOrEmpty(SearchValue))
+            {
+                <div class="dropdown-state-container empty">
+                    <i class="bi bi-search empty-icon"></i>
+                    <span class="state-text">Brak wyników dla zapytania.</span>
+                </div>
+            }
+        </div>
+    }
 </div>
 
 @code {
-    [Parameter] public string Placeholder { get; set; } = "Search your library...";
-    [Parameter] public string IconClass { get; set; } = "bi bi-search";
+    [Parameter] public string Placeholder { get; set; } = "Zapytaj swoją bibliotekę AI...";
     [Parameter] public EventCallback<string> OnSearch { get; set; }
-    
-    private string SearchValue { get; set; } = string.Empty;
-    private bool IsActive => !string.IsNullOrEmpty(SearchValue);
+    [Parameter] public int Limit { get; set; } = 5;
 
-    private async Task HandleKeyPress(KeyboardEventArgs e)
+    private string SearchValue { get; set; } = string.Empty;
+    private bool IsFocused { get; set; }
+    private bool HasResults => _results.Any() && _isDropdownOpen;
+
+    private List<SemanticSearchResultDto> _results = new();
+    private bool _isLoading;
+    private string? _searchError;
+    private bool _isDropdownOpen;
+    private bool _disposed;
+    
+    private CancellationTokenSource? _searchCts;
+
+    private async Task HandleInput(ChangeEventArgs e)
     {
-        if (e.Key == "Enter")
+        SearchValue = e.Value?.ToString() ?? string.Empty;
+        _searchError = null;
+
+        if (string.IsNullOrWhiteSpace(SearchValue))
         {
-            await OnSearch.InvokeAsync(SearchValue);
+            _results.Clear();
+            _isDropdownOpen = false;
+            return;
         }
+
+        _isDropdownOpen = true;
+
+        // Cancel previous search in-flight
+        _searchCts?.Cancel();
+        _searchCts?.Dispose();
+        _searchCts = new CancellationTokenSource();
+
+        var token = _searchCts.Token;
+
+        try
+        {
+            // Debounce for 300ms
+            await Task.Delay(300, token);
+            await PerformSearchAsync(token);
+        }
+        catch (TaskCanceledException)
+        {
+            // Typing continued, search cancelled
+        }
+    }
+
+    private async Task PerformSearchAsync(CancellationToken token)
+    {
+        _isLoading = true;
+        _searchError = null;
+        if (!_disposed)
+        {
+            await InvokeAsync(StateHasChanged);
+        }
+
+        try
+        {
+            var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+            var tenantId = authState.User.FindFirst("TenantId")?.Value ?? "global";
+
+            var result = await Mediator.Send(new SearchLibrarySemanticallyQuery(SearchValue, tenantId, Limit), token);
+            if (token.IsCancellationRequested || _disposed) return;
+
+            if (result.IsSuccess)
+            {
+                _results = result.Value ?? new List<SemanticSearchResultDto>();
+                _searchError = null;
+            }
+            else
+            {
+                _results.Clear();
+                _searchError = result.Errors.FirstOrDefault()?.Message ?? "Nie udało się wykonać wyszukiwania.";
+                Logger.LogWarning("Semantic search returned errors: {Errors}", string.Join(", ", result.Errors.Select(e => e.Message)));
+            }
+        }
+        catch (Exception ex)
+        {
+            if (!token.IsCancellationRequested && !_disposed)
+            {
+                _results.Clear();
+                _searchError = "Wystąpił nieoczekiwany błąd podczas wyszukiwania.";
+                Logger.LogError(ex, "Unexpected error during semantic search for query: {Query}", SearchValue);
+            }
+        }
+        finally
+        {
+            if (!token.IsCancellationRequested && !_disposed)
+            {
+                _isLoading = false;
+                await InvokeAsync(StateHasChanged);
+            }
+        }
+    }
+
+    private async Task HandleResultClick(SemanticSearchResultDto result)
+    {
+        _isDropdownOpen = false;
+
+        // 1. Resolve Ebook ID
+        Guid? ebookId = null;
+        if (result.Metadata != null)
+        {
+            foreach (var key in new[] { "ebookId", "ebook_id", "EbookId", "Ebook_Id" })
+            {
+                if (result.Metadata.TryGetValue(key, out var val) && val != null)
+                {
+                    if (Guid.TryParse(val.ToString(), out var g))
+                    {
+                        ebookId = g;
+                        break;
+                    }
+                }
+            }
+        }
+
+        if (ebookId == null || ebookId == Guid.Empty)
+        {
+            ebookId = NavService.CurrentEbookId;
+        }
+
+        if (ebookId == null || ebookId == Guid.Empty)
+        {
+            Logger.LogWarning("Could not resolve ebook ID from search result metadata.");
+            return;
+        }
+
+        // 2. Resolve Chapter Index
+        int chapterIndex = 0;
+        if (result.Metadata != null)
+        {
+            foreach (var key in new[] { "chapterIndex", "chapter_index", "ChapterIndex", "chapter" })
+            {
+                if (result.Metadata.TryGetValue(key, out var val) && val != null)
+                {
+                    if (int.TryParse(val.ToString(), out var parsedInt))
+                    {
+                        chapterIndex = parsedInt;
+                        break;
+                    }
+                }
+            }
+        }
+
+        // 3. Resolve Block ID
+        string? blockId = null;
+        if (result.Metadata != null)
+        {
+            foreach (var key in new[] { "blockId", "block_id", "BlockId", "nodeId", "node_id", "NodeId", "id" })
+            {
+                if (result.Metadata.TryGetValue(key, out var val) && val != null)
+                {
+                    blockId = val.ToString();
+                    break;
+                }
+            }
+        }
+
+        if (string.IsNullOrEmpty(blockId))
+        {
+            blockId = result.ContentHash;
+        }
+
+        // 4. Set pending scroll and navigate
+        NavService.PendingScrollBlockId = blockId;
+
+        if (NavService.CurrentEbookId == ebookId.Value && NavService.CurrentChapterIndex == chapterIndex)
+        {
+            // Same chapter - scroll and highlight immediately
+            if (!string.IsNullOrEmpty(blockId))
+            {
+                await InteractionService.RequestScrollToBlock(blockId);
+                await InteractionService.RequestHighlightBlock(blockId);
+            }
+        }
+        else
+        {
+            // Different chapter or book - perform routing
+            NavService.SetBook(ebookId.Value, chapterIndex);
+            NavManager.NavigateTo($"/reader/{ebookId.Value}?chapter={chapterIndex}");
+        }
+
+        // Invoke the optional callback for parent components
+        await OnSearch.InvokeAsync(SearchValue);
+    }
+
+    private void HandleKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Escape")
+        {
+            _isDropdownOpen = false;
+        }
+    }
+
+    private void HandleFocusIn()
+    {
+        IsFocused = true;
+        _isDropdownOpen = true;
+    }
+
+    private async Task HandleFocusOut()
+    {
+        IsFocused = false;
+        // Delay slightly to allow click handlers on result cards to execute
+        await Task.Delay(200);
+        if (_disposed) return;
+        _isDropdownOpen = false;
+        StateHasChanged();
     }
 
     private void ClearSearch()
     {
         SearchValue = string.Empty;
+        _results.Clear();
+        _searchError = null;
+        _isDropdownOpen = false;
+    }
+
+    private string HighlightQueryWords(string text, string query)
+    {
+        if (string.IsNullOrWhiteSpace(text))
+            return string.Empty;
+
+        var escapedText = System.Net.WebUtility.HtmlEncode(text);
+
+        if (string.IsNullOrWhiteSpace(query))
+            return escapedText;
+
+        var words = query.Split(new[] { ' ' }, StringSplitOptions.RemoveEmptyEntries)
+                         .Where(w => w.Length > 2)
+                         .Select(Regex.Escape);
+
+        if (!words.Any())
+            return escapedText;
+
+        var pattern = "(" + string.Join("|", words) + ")";
+        try
+        {
+            return Regex.Replace(escapedText, pattern, "<mark class=\"search-highlight\">$1</mark>", RegexOptions.IgnoreCase);
+        }
+        catch
+        {
+            return escapedText;
+        }
+    }
+
+    public void Dispose()
+    {
+        _disposed = true;
+        _searchCts?.Cancel();
+        _searchCts?.Dispose();
     }
 }

src/NexusReader.UI.Shared/Components/Atoms/NexusSearchBox.razor.css

@@ -1,57 +1,309 @@
 .nexus-search-container {
+    position: relative;
     width: 100%;
-    max-width: 500px;
-    margin: 1rem auto;
-    transition: all 0.3s ease;
+    max-width: 600px;
+    margin: 1.5rem auto;
+    font-family: var(--nexus-font-sans), 'Inter', sans-serif;
+    z-index: 1000;
 }
 
 .search-wrapper {
     position: relative;
     display: flex;
     align-items: center;
-    background: var(--nexus-card, #141414);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 12px;
-    padding: 0.5rem 1rem;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 14px;
+    padding: 0.65rem 1.1rem;
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
-.nexus-search-container.active .search-wrapper,
-.search-wrapper:focus-within {
-    border-color: var(--nexus-neon, #00ff99);
-    box-shadow: 0 0 15px rgba(0, 255, 153, 0.2);
+/* Focused state: glowing neon border matching other dashboard components */
+.nexus-search-container.focused .search-wrapper {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: var(--nexus-neon);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 255, 153, 0.25);
+}
+
+.search-icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    margin-right: 0.85rem;
 }
 
 .nexus-icon {
-    color: rgba(255, 255, 255, 0.5);
-    margin-right: 0.75rem;
-    font-size: 1.1rem;
+    color: rgba(255, 255, 255, 0.45);
+    font-size: 1.25rem;
+    transition: color 0.3s ease;
+}
+
+.nexus-search-container.focused .nexus-icon {
+    color: var(--nexus-neon);
 }
 
 .nexus-search-input {
     flex: 1;
     background: transparent;
     border: none;
-    color: white;
-    font-family: 'Inter', sans-serif;
-    font-size: 0.95rem;
+    color: #ffffff;
+    font-size: 1rem;
+    font-weight: 400;
     outline: none;
+    padding: 0;
+    width: 100%;
 }
 
 .nexus-search-input::placeholder {
-    color: rgba(255, 255, 255, 0.3);
+    color: rgba(255, 255, 255, 0.35);
+    font-style: italic;
+    transition: color 0.3s ease;
+}
+
+.nexus-search-container.focused .nexus-search-input::placeholder {
+    color: rgba(255, 255, 255, 0.5);
+}
+
+/* Pulsing neon-green AI status indicator */
+.ai-status-indicator {
+    display: flex;
+    align-items: center;
+    margin: 0 0.75rem;
+}
+
+.ai-pulse-dot {
+    width: 8px;
+    height: 8px;
+    background-color: var(--nexus-neon);
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    box-shadow: 0 0 8px var(--nexus-neon);
+}
+
+.ai-pulse-dot::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: var(--nexus-neon);
+    border-radius: 50%;
+    z-index: -1;
+    animation: pulse 2s infinite ease-in-out;
 }
 
 .clear-btn {
     background: transparent;
     border: none;
     color: rgba(255, 255, 255, 0.4);
-    font-size: 1.2rem;
+    font-size: 1.5rem;
+    line-height: 1;
     cursor: pointer;
-    padding: 0 0.5rem;
-    transition: color 0.2s ease;
+    padding: 0 0.25rem;
+    margin-left: 0.5rem;
+    transition: color 0.2s ease, transform 0.2s ease;
 }
 
 .clear-btn:hover {
-    color: var(--nexus-neon, #00ff99);
+    color: #ff3b30;
+    transform: scale(1.1);
+}
+
+/* Frosted glass results container */
+.search-dropdown {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 0;
+    right: 0;
+    background: rgba(18, 18, 18, 0.9);
+    backdrop-filter: blur(20px) saturate(160%);
+    -webkit-backdrop-filter: blur(20px) saturate(160%);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 14px;
+    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 255, 153, 0.05);
+    max-height: 420px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    animation: slideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.search-dropdown::-webkit-scrollbar {
+    width: 6px;
+}
+
+.search-dropdown::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 3px;
+}
+
+.search-dropdown::-webkit-scrollbar-thumb:hover {
+    background: var(--nexus-neon);
+}
+
+/* In-flight spinners */
+.neon-spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(0, 255, 153, 0.15);
+    border-top: 2px solid var(--nexus-neon);
+    border-radius: 50%;
+    animation: spin 0.75s linear infinite;
+}
+
+.neon-spinner-large {
+    width: 32px;
+    height: 32px;
+    border: 3px solid rgba(255, 255, 255, 0.05);
+    border-top: 3px solid var(--nexus-neon);
+    border-radius: 50%;
+    animation: spin 0.8s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
+    margin-bottom: 1rem;
+}
+
+.dropdown-state-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2.5rem 1.5rem;
+    text-align: center;
+}
+
+.state-text {
+    font-size: 0.95rem;
+    color: rgba(255, 255, 255, 0.65);
+    font-weight: 300;
+}
+
+.error-icon, .empty-icon {
+    font-size: 2rem;
+    margin-bottom: 0.75rem;
+}
+
+.error-icon {
+    color: #ff3b30;
+    text-shadow: 0 0 10px rgba(255, 59, 48, 0.4);
+}
+
+.empty-icon {
+    color: rgba(255, 255, 255, 0.2);
+}
+
+/* Results Cards list */
+.dropdown-results-list {
+    padding: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+.result-card {
+    padding: 0.95rem 1.1rem;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.04);
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.result-card:hover {
+    background: rgba(0, 255, 153, 0.05);
+    border-color: rgba(0, 255, 153, 0.2);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.result-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+    font-size: 0.8rem;
+}
+
+.relevance-badge {
+    background: rgba(0, 255, 153, 0.1);
+    color: var(--nexus-neon);
+    border: 1px solid rgba(0, 255, 153, 0.25);
+    border-radius: 6px;
+    padding: 0.15rem 0.45rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-shadow: 0 0 4px rgba(0, 255, 153, 0.25);
+}
+
+.source-title {
+    color: rgba(255, 255, 255, 0.5);
+    max-width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.source-title strong {
+    color: rgba(255, 255, 255, 0.85);
+}
+
+.result-snippet {
+    font-size: 0.88rem;
+    line-height: 1.45;
+    color: rgba(255, 255, 255, 0.78);
+    font-weight: 300;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* Markup highlights */
+::deep mark.search-highlight {
+    background: rgba(0, 255, 153, 0.2);
+    color: var(--nexus-neon);
+    border-bottom: 1px solid var(--nexus-neon);
+    padding: 0.05rem 0.15rem;
+    border-radius: 3px;
+    font-weight: 500;
+}
+
+/* Animations */
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(0, 255, 153, 0.7);
+    }
+    70% {
+        transform: scale(1.6);
+        box-shadow: 0 0 0 6px rgba(0, 255, 153, 0);
+    }
+    100% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(0, 255, 153, 0);
+    }
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }

src/NexusReader.UI.Shared/Components/Molecules/KnowledgeCheck.razor

@@ -2,9 +2,14 @@
 @using NexusReader.Application.Queries.Quiz
 @using NexusReader.Application.Commands.Quiz
 @using NexusReader.Application.Abstractions.Services
+@using NexusReader.UI.Shared.Components.Atoms
+@using NexusReader.UI.Shared.Services
 @inject IMediator Mediator
 @inject IPlatformService PlatformService
 @inject IQuizStateService QuizService
+@inject IIdentityService IdentityService
+@inject IKnowledgeGraphService GraphService
+@inject KnowledgeCoordinator Coordinator
 
 <div class="knowledge-check">
     <div class="quiz-header">
@@ -12,10 +17,33 @@
         <button class="expand-btn">⌵</button>
     </div>
 
-    @if (QuizService.IsHydrating)
+    @if (QuizService.IsHydrating || _isGenerating)
     {
         <div class="loading-state shimmer">Skanowanie wiedzy przez AI...</div>
     }
+    else if (_isSubmitted)
+    {
+        <div class="submitted-container">
+            <div class="success-icon-wrapper">
+                <NexusIcon Name="check" Size="48" Class="success-glow" />
+            </div>
+            <h3 class="submitted-title">Gratulacje!</h3>
+            <p class="submitted-text">Sprawdzian zakończony pomyślnie. Twój wynik został zapisany w bazie danych.</p>
+            
+            <div class="score-card">
+                <div class="score-main">
+                    <span class="score-num">@_score</span>
+                    <span class="score-divider">/</span>
+                    <span class="score-total">@_totalQuestions</span>
+                </div>
+                <div class="score-percent">@((int)_percentage)% poprawnych odpowiedzi</div>
+            </div>
+
+            <button class="reset-quiz-btn" @onclick="CloseQuiz">
+                <span>ZAKOŃCZ</span>
+            </button>
+        </div>
+    }
     else if (QuizService.CurrentQuiz != null)
     {
         <div class="quiz-body">
@@ -41,17 +69,45 @@
             }
             
             <div class="quiz-footer">
-                <button class="submit-btn" disabled="@(!AllQuestionsAnswered())">Wyślij</button>
+                <button class="submit-btn" disabled="@(!AllQuestionsAnswered() || _isSubmitting)" @onclick="SubmitQuizAsync">
+                    @if (_isSubmitting)
+                    {
+                        <span>Zapisywanie...</span>
+                    }
+                    else
+                    {
+                        <span>Wyślij</span>
+                    }
+                </button>
             </div>
         </div>
     }
+    else
+    {
+        <div class="empty-quiz-state">
+            <div class="empty-icon-wrapper">
+                <NexusIcon Name="robot" Size="48" Class="neon-glow" />
+            </div>
+            <h3 class="empty-title">Brak Aktywnego Quizu</h3>
+            <p class="empty-text">Generuj spersonalizowany sprawdzian wiedzy na podstawie bieżącego rozdziału książki.</p>
+            
+            <button class="generate-quiz-btn" @onclick="GenerateChapterQuizAsync" disabled="@(string.IsNullOrWhiteSpace(Coordinator.CurrentFullPageContent))">
+                <span>GENERUJ QUIZ DLA ROZDZIAŁU</span>
+            </button>
+        </div>
+    }
 </div>
 
-
 @code {
     [Parameter] public string ContextBlockId { get; set; } = string.Empty;
 
     private Dictionary<QuizQuestionDto, (int SelectedIndex, bool IsCorrect)> _states = new();
+    private bool _isSubmitting = false;
+    private bool _isSubmitted = false;
+    private bool _isGenerating = false;
+    private int _score = 0;
+    private int _totalQuestions = 0;
+    private double _percentage = 0.0;
 
     protected override void OnInitialized()
     {
@@ -65,6 +121,24 @@
         QuizService.OnQuizUpdated -= HandleUpdate;
     }
 
+    private async Task GenerateChapterQuizAsync()
+    {
+        if (_isGenerating || string.IsNullOrWhiteSpace(Coordinator.CurrentFullPageContent)) return;
+
+        _isGenerating = true;
+        StateHasChanged();
+
+        try
+        {
+            await Coordinator.RequestSummaryAndQuizAsync(Coordinator.CurrentFullPageContent);
+        }
+        finally
+        {
+            _isGenerating = false;
+            StateHasChanged();
+        }
+    }
+
     private async Task SelectOptionAsync(QuizQuestionDto question, int index)
     {
         if (_states.ContainsKey(question)) return;
@@ -90,6 +164,67 @@
         return QuizService.CurrentQuiz != null && _states.Count == QuizService.CurrentQuiz.Questions.Count;
     }
 
+    private async Task SubmitQuizAsync()
+    {
+        if (QuizService.CurrentQuiz == null || !AllQuestionsAnswered() || _isSubmitting) return;
+
+        _isSubmitting = true;
+        StateHasChanged();
+
+        try
+        {
+            _score = _states.Values.Count(s => s.IsCorrect);
+            _totalQuestions = QuizService.CurrentQuiz.Questions.Count;
+            _percentage = _totalQuestions > 0 ? ((double)_score / _totalQuestions) * 100 : 0.0;
+
+            string topic = "Quiz wiedzy";
+            var graph = GraphService.CurrentGraphData;
+            if (graph != null && !string.IsNullOrEmpty(QuizService.CurrentQuizBlockId))
+            {
+                var node = graph.Nodes.FirstOrDefault(n => n.Id == QuizService.CurrentQuizBlockId);
+                if (node != null && !string.IsNullOrEmpty(node.Label))
+                {
+                    topic = $"Test: {node.Label}";
+                }
+            }
+
+            var profileResult = await IdentityService.GetProfileAsync();
+            if (profileResult.IsSuccess && profileResult.Value != null)
+            {
+                var userId = profileResult.Value.UserId;
+
+                var cmd = new SubmitQuizResultCommand(userId, topic, _score, _totalQuestions);
+                var result = await Mediator.Send(cmd);
+                
+                if (result.IsSuccess)
+                {
+                    IdentityService.ClearCache();
+                    _isSubmitted = true;
+                    await PlatformService.VibrateSuccessAsync();
+                }
+                else
+                {
+                    await PlatformService.VibrateErrorAsync();
+                }
+            }
+        }
+        catch
+        {
+            await PlatformService.VibrateErrorAsync();
+        }
+        finally
+        {
+            _isSubmitting = false;
+            StateHasChanged();
+        }
+    }
+
+    private void CloseQuiz()
+    {
+        _isSubmitted = false;
+        _states.Clear();
+        QuizService.SetQuiz(null, null);
+    }
 
     private string GetBlockClass(QuizQuestionDto question)
     {

src/NexusReader.UI.Shared/Components/Molecules/KnowledgeCheck.razor.css

@@ -121,3 +121,217 @@
     0% { background-position: -200% 0; }
     100% { background-position: 200% 0; }
 }
+
+.option-revealed-correct {
+    border-color: #00ff99 !important;
+    background: rgba(0, 255, 153, 0.08) !important;
+    box-shadow: 0 0 8px rgba(0, 255, 153, 0.15);
+}
+
+.option-faded {
+    opacity: 0.45;
+}
+
+.submitted-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 2rem 1rem;
+    animation: fadeIn 0.4s ease-out;
+}
+
+.success-icon-wrapper {
+    background: rgba(0, 255, 153, 0.1);
+    border: 1px solid rgba(0, 255, 153, 0.3);
+    border-radius: 50%;
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1.5rem;
+    box-shadow: 0 0 20px rgba(0, 255, 153, 0.15);
+}
+
+.success-glow {
+    color: var(--nexus-neon, #00ff99);
+    filter: drop-shadow(0 0 8px var(--nexus-neon, #00ff99));
+}
+
+.submitted-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #fff;
+    margin-bottom: 0.5rem;
+    letter-spacing: -0.5px;
+}
+
+.submitted-text {
+    font-size: 0.9rem;
+    color: #888;
+    margin-bottom: 2rem;
+    line-height: 1.5;
+}
+
+.score-card {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 16px;
+    padding: 1.5rem 2.5rem;
+    margin-bottom: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    backdrop-filter: blur(10px);
+}
+
+.score-main {
+    display: flex;
+    align-items: baseline;
+    gap: 0.2rem;
+    margin-bottom: 0.5rem;
+}
+
+.score-num {
+    font-size: 3rem;
+    font-weight: 800;
+    color: var(--nexus-neon, #00ff99);
+    line-height: 1;
+    text-shadow: 0 0 15px rgba(0, 255, 153, 0.3);
+}
+
+.score-divider {
+    font-size: 1.8rem;
+    color: #444;
+}
+
+.score-total {
+    font-size: 1.8rem;
+    font-weight: 600;
+    color: #fff;
+}
+
+.score-percent {
+    font-size: 0.85rem;
+    color: #666;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.reset-quiz-btn {
+    padding: 0.8rem 3rem;
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 30px;
+    color: #fff;
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    letter-spacing: 0.5px;
+}
+
+.reset-quiz-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: #fff;
+    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.empty-quiz-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 2.5rem 1rem;
+    animation: fadeIn 0.4s ease-out;
+}
+
+.empty-icon-wrapper {
+    background: rgba(0, 255, 153, 0.03);
+    border: 1px solid rgba(0, 255, 153, 0.15);
+    border-radius: 50%;
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1.5rem;
+    box-shadow: 0 0 30px rgba(0, 255, 153, 0.05);
+    transition: all 0.3s ease;
+}
+
+.empty-quiz-state:hover .empty-icon-wrapper {
+    background: rgba(0, 255, 153, 0.08);
+    border-color: rgba(0, 255, 153, 0.4);
+    box-shadow: 0 0 35px rgba(0, 255, 153, 0.15);
+    transform: scale(1.05);
+}
+
+.neon-glow {
+    color: var(--nexus-neon, #00ff99);
+    filter: drop-shadow(0 0 6px var(--nexus-neon, #00ff99));
+}
+
+.empty-title {
+    font-size: 1.3rem;
+    font-weight: 700;
+    color: #fff;
+    margin-bottom: 0.5rem;
+    letter-spacing: -0.3px;
+}
+
+.empty-text {
+    font-size: 0.9rem;
+    color: #888;
+    margin-bottom: 2rem;
+    line-height: 1.5;
+    max-width: 280px;
+}
+
+.generate-quiz-btn {
+    padding: 0.85rem 2rem;
+    background: rgba(0, 255, 153, 0.08);
+    border: 1px solid var(--nexus-neon, #00ff99);
+    border-radius: 30px;
+    color: var(--nexus-neon, #00ff99);
+    font-size: 0.85rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    letter-spacing: 0.8px;
+    text-shadow: 0 0 10px rgba(0, 255, 153, 0.3);
+    box-shadow: 0 0 15px rgba(0, 255, 153, 0.1);
+}
+
+.generate-quiz-btn:not(:disabled):hover {
+    background: var(--nexus-neon, #00ff99);
+    color: #000;
+    box-shadow: 0 0 25px rgba(0, 255, 153, 0.4);
+    transform: translateY(-2px);
+    text-shadow: none;
+}
+
+.generate-quiz-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    border-color: rgba(255, 255, 255, 0.15);
+    background: rgba(255, 255, 255, 0.02);
+    color: #666;
+    text-shadow: none;
+    box-shadow: none;
+}
+

src/NexusReader.UI.Shared/Components/Organisms/BookIngestionModal.razor

@@ -2,12 +2,14 @@
 @using NexusReader.Application.Abstractions.Services
 @using NexusReader.Application.Queries.Reader
 @using NexusReader.Application.Commands.Library
+@using NexusReader.UI.Shared.Services
 @using System.Net.Http.Json
 @inject IEpubMetadataExtractor MetadataExtractor
 @inject ILogger<BookIngestionModal> Logger
 @inject HttpClient Http
 @inject IReaderNavigationService ReaderNavigation
 @inject IJSRuntime JSRuntime
+@inject ISyncService SyncService
 @implements IAsyncDisposable
 
 @if (IsOpen)
@@ -16,20 +18,23 @@
         <div class="modal-content glass-panel" @onclick:stopPropagation>
             <div class="modal-header">
                 <h2>Add New Book</h2>
-                <button class="close-btn" @onclick="CloseModal">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-                </button>
+                @if (!IsIngesting && !IsIndexing)
+                {
+                    <button class="close-btn" @onclick="CloseModal">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                    </button>
+                }
             </div>
 
             <div class="modal-body">
-                <div class="parsing-state shimmer" style="@(IsParsing ? "display:flex;" : "display:none;")">
+                <div class="parsing-state shimmer" style="@(IsParsing && !IsIndexing ? "display:flex;" : "display:none;")">
                     <div class="shimmer-content">
                         <div class="spinner"></div>
                         <p>Scanning metadata...</p>
                     </div>
                 </div>
                 
-                <div class="verification-state" style="@(IsVerifying && !IsParsing ? "display:flex;" : "display:none;")">
+                <div class="verification-state" style="@(IsVerifying && !IsParsing && !IsIndexing ? "display:flex;" : "display:none;")">
                     @if (Metadata != null)
                     {
                         <div class="verification-layout">
@@ -74,7 +79,7 @@
                 </div>
                 
                 <div class="upload-state @(_isDragging ? "drag-over" : "")" 
-                     style="@(!IsParsing && !IsVerifying ? "display:flex;" : "display:none;")"
+                     style="@(!IsParsing && !IsVerifying && !IsIndexing ? "display:flex;" : "display:none;")"
                      @ondragenter="OnDragEnter" 
                      @ondragleave="OnDragLeave">
                     <div class="drop-zone">
@@ -87,6 +92,18 @@
                     </div>
                 </div>
 
+                <div class="indexing-state" style="@(IsIndexing ? "display:flex;" : "display:none;")">
+                    <div class="indexing-content">
+                        <div class="spinner"></div>
+                        <h3>Nexus AI Indexing</h3>
+                        <p class="status-msg">@IngestionStatusMessage</p>
+                        <div class="progress-bar-container">
+                            <div class="progress-bar-fill" style="width: @((IngestionProgressPercent * 100).ToString("F0"))%"></div>
+                        </div>
+                        <span class="percent">@((IngestionProgressPercent * 100).ToString("F0"))%</span>
+                    </div>
+                </div>
+
                 
                 @if (!string.IsNullOrEmpty(ErrorMessage))
                 {
@@ -118,15 +135,61 @@
     private bool IsParsing { get; set; }
     private bool IsVerifying { get; set; }
     private bool IsIngesting { get; set; }
+    private bool IsIndexing { get; set; }
+    private string IngestionStatusMessage { get; set; } = "Initializing...";
+    private double IngestionProgressPercent { get; set; }
+    private Guid IngestedBookId { get; set; } = Guid.Empty;
     private LocalEpubMetadata? Metadata { get; set; }
     private string? ErrorMessage { get; set; }
     private byte[]? _epubBytes;
+    private bool _disposed;
     
     // Allow up to 50 MB
     private const long MaxFileSize = 50 * 1024 * 1024;
 
+    protected override async Task OnInitializedAsync()
+    {
+        await SyncService.InitializeAsync();
+        SyncService.OnIngestionProgressReceived += HandleIngestionProgress;
+    }
+
+    private async Task HandleIngestionProgress(string message, double progress)
+    {
+        if (_disposed) return;
+        if (!IsIndexing) return;
+
+        IngestionStatusMessage = message;
+        IngestionProgressPercent = progress;
+        
+        if (!_disposed)
+        {
+            await InvokeAsync(StateHasChanged);
+        }
+
+        if (progress >= 1.0)
+        {
+            // Give the user a moment to see the completion message
+            await Task.Delay(2500);
+            
+            if (_disposed) return;
+
+            // Now close the modal and navigate to the book
+            if (IngestedBookId != Guid.Empty)
+            {
+                var bookId = IngestedBookId;
+                await InvokeAsync(async () => {
+                    if (_disposed) return;
+                    await CloseModal();
+                    ReaderNavigation.NavigateToBook(bookId);
+                });
+            }
+        }
+    }
+
     private async Task CloseModal()
     {
+        if (IsIngesting || IsIndexing) return;
+
         IsOpen = false;
         Reset();
         await IsOpenChanged.InvokeAsync(false);
@@ -137,6 +200,10 @@
         IsParsing = false;
         IsVerifying = false;
         IsIngesting = false;
+        IsIndexing = false;
+        IngestionStatusMessage = "Initializing...";
+        IngestionProgressPercent = 0.0;
+        IngestedBookId = Guid.Empty;
         Metadata = null;
         ErrorMessage = null;
         _isDragging = false;
@@ -168,10 +235,12 @@
             using var stream = file.OpenReadStream(MaxFileSize);
             using var memoryStream = new MemoryStream();
             await stream.CopyToAsync(memoryStream);
+            if (_disposed) return;
             _epubBytes = memoryStream.ToArray();
             
             memoryStream.Position = 0;
             var result = await MetadataExtractor.ExtractMetadataAsync(memoryStream);
+            if (_disposed) return;
 
             if (result.IsSuccess)
             {
@@ -186,12 +255,18 @@
         catch (Exception ex)
         {
             Logger.LogError(ex, "Error uploading EPUB");
-            ErrorMessage = $"An unexpected error occurred: {ex.Message}";
+            if (!_disposed)
+            {
+                ErrorMessage = $"An unexpected error occurred: {ex.Message}";
+            }
         }
         finally
         {
-            IsParsing = false;
-            StateHasChanged();
+            if (!_disposed)
+            {
+                IsParsing = false;
+                StateHasChanged();
+            }
         }
     }
 
@@ -214,39 +289,55 @@
             );
 
             var response = await Http.PostAsJsonAsync("api/library/ingest", request);
+            if (_disposed) return;
 
             if (response.IsSuccessStatusCode)
             {
                 var result = await response.Content.ReadFromJsonAsync<IngestResult>();
+                if (_disposed) return;
                 if (result != null)
                 {
-                    await CloseModal();
-                    ReaderNavigation.NavigateToBook(result.Id);
+                    IngestedBookId = result.Id;
+                    IsVerifying = false;
+                    IsIngesting = false;
+                    IsIndexing = true;
+                    IngestionStatusMessage = "Book saved! Starting background indexing...";
+                    IngestionProgressPercent = 0.0;
+                    StateHasChanged();
                 }
             }
             else
             {
                 ErrorMessage = await response.Content.ReadAsStringAsync();
+                IsIngesting = false;
             }
         }
         catch (Exception ex)
         {
             Logger.LogError(ex, "Error during ingestion");
-            ErrorMessage = "Failed to save book to library. Please try again.";
+            if (!_disposed)
+            {
+                ErrorMessage = "Failed to save book to library. Please try again.";
+                IsIngesting = false;
+            }
         }
         finally
         {
-            IsIngesting = false;
-            StateHasChanged();
+            if (!_disposed)
+            {
+                StateHasChanged();
+            }
         }
     }
 
     private record IngestResult(Guid Id);
 
-    public ValueTask DisposeAsync()
+    public async ValueTask DisposeAsync()
     {
+        _disposed = true;
+        SyncService.OnIngestionProgressReceived -= HandleIngestionProgress;
         // Clear the large byte array so it is eligible for GC even if the component is cached.
         _epubBytes = null;
-        return ValueTask.CompletedTask;
+        await ValueTask.CompletedTask;
     }
 }

src/NexusReader.UI.Shared/Components/Organisms/BookIngestionModal.razor.css

@@ -377,6 +377,72 @@
     animation: spin 0.8s linear infinite;
 }
 
+/* Indexing State */
+.indexing-state {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.02);
+    position: relative;
+    overflow: hidden;
+    padding: 2rem;
+    animation: fadeIn 0.4s ease-out;
+}
+
+.indexing-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 100%;
+    gap: 1.25rem;
+}
+
+.indexing-content h3 {
+    margin: 0;
+    font-size: 1.25rem;
+    color: var(--nexus-neon, #00ffaa);
+    text-shadow: 0 0 10px rgba(0, 255, 153, 0.2);
+    letter-spacing: 0.5px;
+}
+
+.status-msg {
+    margin: 0;
+    font-size: 0.9rem;
+    color: var(--nexus-text-muted, #888);
+    min-height: 2.5rem;
+    line-height: 1.4;
+}
+
+.progress-bar-container {
+    width: 100%;
+    height: 8px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 4px;
+    overflow: hidden;
+    position: relative;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.progress-bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--nexus-neon, #00ffaa) 0%, #00b3ff 100%);
+    box-shadow: 0 0 10px rgba(0, 255, 153, 0.4);
+    border-radius: 4px;
+    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.percent {
+    font-family: var(--nexus-font-mono, monospace);
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--nexus-text);
+}
+
 @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }

src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor

@@ -67,6 +67,7 @@
     private bool _isJsInitialized;
     private ElementReference _containerRef;
     private bool _isInteractive;
+    private string? _currentActiveBlockId;
 
     protected override async Task OnInitializedAsync()
     {
@@ -143,6 +144,7 @@
     [JSInvokable]
     public async Task HandleBlockReached(string blockId, string content)
     {
+        _currentActiveBlockId = blockId;
         await Coordinator.OnBlockReachedAsync(blockId, content);
 
         if (ViewModel != null)
@@ -160,8 +162,15 @@
 
     private async Task HandleSyncProgressReceived(string blockId, DateTime timestamp)
     {
+        if (string.IsNullOrEmpty(blockId) || blockId == _currentActiveBlockId)
+        {
+            Logger.LogDebug("[Sync] Received progress {BlockId} is empty or matches active block. Ignoring scroll.", blockId);
+            return;
+        }
+
         Logger.LogInformation("[Sync] Received progress from another device: block {BlockId} at {Timestamp}", blockId, timestamp);
 
+        _currentActiveBlockId = blockId;
         await ScrollToNodeAsync(blockId);
         await InvokeAsync(StateHasChanged);
     }
@@ -211,6 +220,8 @@
 
     private async Task LoadChapterAsync(int index)
     {
+        await Coordinator.ClearAsync();
+        _isJsInitialized = false; // Reset JS initialization to re-bind the scroll observer to new DOM elements!
         _isLoadingChapter = true;
         StatusMessage = "Wczytywanie treści...";
         StateHasChanged();
@@ -247,6 +258,18 @@
 
         _isLoadingChapter = false;
         StateHasChanged();
+
+        if (result.IsSuccess && !string.IsNullOrEmpty(NavigationService.PendingScrollBlockId))
+        {
+            var targetBlockId = NavigationService.PendingScrollBlockId;
+            NavigationService.PendingScrollBlockId = null; // Clear it to prevent multiple scrolls
+            _currentActiveBlockId = targetBlockId;
+
+            // Give the browser slightly more than one frame to render the loaded blocks
+            await Task.Delay(150);
+            await ScrollToNodeAsync(targetBlockId);
+            await InteractionService.RequestHighlightBlock(targetBlockId);
+        }
     }
 
     public async Task ScrollToNodeAsync(string id)

src/NexusReader.UI.Shared/Layout/ReaderLayout.razor

@@ -3,10 +3,13 @@
 @using NexusReader.UI.Shared.Services
 @using NexusReader.UI.Shared.Components.Molecules
 @using NexusReader.UI.Shared.Components.Organisms
+@using NexusReader.Application.Queries.Graph
 @using Microsoft.Extensions.Logging
 @inject IPlatformService PlatformService
 @inject IFocusModeService FocusMode
 @inject IQuizStateService QuizService
+@inject IReaderInteractionService InteractionService
+@inject IKnowledgeGraphService GraphService
 @inject IJSRuntime JS
 @inject IIdentityService IdentityService
 @inject NavigationManager NavigationManager
@@ -41,13 +44,92 @@
                         <button class="close-btn">×</button>
                     </div>
 
-                    <div class="intelligence-scroll-area">
-                        @if (!_isMobile)
-                        {
-                            <KnowledgeGraph />
-                        }
-                        <KnowledgeCheck />
-                    </div>
+                    @if (_activeTab == SidebarTab.Knowledge)
+                    {
+                        <div class="intelligence-scroll-area stacked-layout">
+                            @if (!_isMobile)
+                            {
+                                <div class="visual-workspace">
+                                    <KnowledgeGraph />
+                                </div>
+                            }
+                            
+                            <div class="contextual-intelligence-panel">
+                                <div class="panel-header">
+                                    <NexusIcon Name="brain" Size="18" Class="neon-accent-icon" />
+                                    <span class="panel-title">Contextual Intelligence Panel</span>
+                                </div>
+                                <div class="panel-body">
+                                    @if (_selectedNode != null)
+                                    {
+                                        <div class="node-details">
+                                            <div class="node-header-section">
+                                                <span class="node-group-badge @(_selectedNode.Group.ToLower())">@(_selectedNode.Group.ToUpper())</span>
+                                                <h3 class="node-label">@_selectedNode.Label</h3>
+                                            </div>
+                                            
+                                            @if (!string.IsNullOrEmpty(_selectedNode.Description))
+                                            {
+                                                <div class="detail-section">
+                                                    <p class="node-description">@_selectedNode.Description</p>
+                                                </div>
+                                            }
+
+                                            @if (!string.IsNullOrEmpty(_selectedNode.Summary))
+                                            {
+                                                <div class="detail-section summary-section">
+                                                    <h4 class="section-title neon-sub-header">Podsumowanie</h4>
+                                                    <p class="node-summary">@_selectedNode.Summary</p>
+                                                </div>
+                                            }
+
+                                            @if (_selectedNode.KeyTerms != null && _selectedNode.KeyTerms.Any())
+                                            {
+                                                <div class="detail-section key-terms-section">
+                                                    <h4 class="section-title neon-sub-header">Kluczowe Pojęcia</h4>
+                                                    <ul class="key-terms-list">
+                                                        @foreach (var term in _selectedNode.KeyTerms)
+                                                        {
+                                                            <li class="key-term-item">
+                                                                <span class="term-bullet">•</span>
+                                                                <span class="term-text">@term</span>
+                                                            </li>
+                                                        }
+                                                    </ul>
+                                                </div>
+                                            }
+                                        </div>
+                                    }
+                                    else
+                                    {
+                                        <div class="no-node-selected">
+                                            <div class="placeholder-glow"></div>
+                                            <p class="placeholder-text">Wybierz węzeł na wykresie, aby wyświetlić szczegóły architektoniczne.</p>
+                                        </div>
+                                    }
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="sidebar-footer">
+                            <button class="open-quiz-btn neon-glow-btn @(QuizService.HasNewQuiz ? "quiz-pulse-btn" : "")" @onclick="() => SetActiveTab(SidebarTab.Quiz)">
+                                <NexusIcon Name="quiz" Size="18" />
+                                <span>OPEN KNOWLEDGE QUIZ</span>
+                            </button>
+                        </div>
+                    }
+                    else
+                    {
+                        <div class="intelligence-scroll-area quiz-layout">
+                            <div class="quiz-nav">
+                                <button class="back-to-graph-btn" @onclick="() => SetActiveTab(SidebarTab.Knowledge)">
+                                    <NexusIcon Name="arrow-left" Size="16" />
+                                    <span>← Powrót do wykresu</span>
+                                </button>
+                            </div>
+                            <KnowledgeCheck />
+                        </div>
+                    }
                 </div>
             </div>
         </Authorized>
@@ -67,6 +149,16 @@
 </div>
 
 @code {
+    private enum SidebarTab
+    {
+        Knowledge,
+        Quiz
+    }
+
+    private SidebarTab _activeTab = SidebarTab.Knowledge;
+    private string? _selectedNodeId;
+    private GraphNodeDto? _selectedNode;
+
     private string _platformClass = "platform-desktop";
     private bool _isMobile = false;
 
@@ -74,6 +166,10 @@
     {
         FocusMode.OnFocusModeChanged += HandleUpdate;
         QuizService.OnQuizUpdated += HandleUpdate;
+        QuizService.OnQuizRequested += HandleQuizRequestedAsync;
+
+        InteractionService.OnNodeSelected += HandleNodeSelectedAsync;
+        GraphService.OnGraphUpdated += HandleGraphUpdatedAsync;
 
         var context = PlatformService.GetDeviceContext();
         if (context.IsSuccess)
@@ -88,7 +184,34 @@
         }
     }
 
+    private void SetActiveTab(SidebarTab tab)
+    {
+        _activeTab = tab;
+        StateHasChanged();
+    }
 
+    private async Task HandleQuizRequestedAsync(string blockId)
+    {
+        _activeTab = SidebarTab.Quiz;
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task HandleNodeSelectedAsync(string nodeId)
+    {
+        _selectedNodeId = nodeId;
+        if (GraphService.CurrentGraphData != null)
+        {
+            _selectedNode = GraphService.CurrentGraphData.Nodes.FirstOrDefault(n => n.Id == nodeId);
+        }
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private async Task HandleGraphUpdatedAsync()
+    {
+        _selectedNodeId = null;
+        _selectedNode = null;
+        await InvokeAsync(StateHasChanged);
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -112,5 +235,8 @@
     {
         FocusMode.OnFocusModeChanged -= HandleUpdate;
         QuizService.OnQuizUpdated -= HandleUpdate;
+        QuizService.OnQuizRequested -= HandleQuizRequestedAsync;
+        InteractionService.OnNodeSelected -= HandleNodeSelectedAsync;
+        GraphService.OnGraphUpdated -= HandleGraphUpdatedAsync;
     }
 }

src/NexusReader.UI.Shared/Layout/ReaderLayout.razor.css

@@ -152,4 +152,319 @@ main {
     0% { filter: drop-shadow(0 0 2px var(--nexus-neon)); transform: scale(1); }
     50% { filter: drop-shadow(0 0 10px var(--nexus-neon)); transform: scale(1.1); }
     100% { filter: drop-shadow(0 0 2px var(--nexus-neon)); transform: scale(1); }
+}
+
+/* Contextual Intelligence Panel Layout */
+.stacked-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.visual-workspace {
+    flex-shrink: 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.contextual-intelligence-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: rgba(13, 13, 13, 0.6);
+    border-top: 1px solid rgba(255, 255, 255, 0.03);
+    overflow: hidden;
+}
+
+.panel-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    background: rgba(255, 255, 255, 0.01);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+}
+
+.neon-accent-icon {
+    color: var(--nexus-neon, #00f0ff);
+    filter: drop-shadow(0 0 5px var(--nexus-neon, #00f0ff));
+}
+
+.panel-title {
+    font-family: var(--nexus-font-sans, "Outfit", sans-serif);
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: rgba(255, 255, 255, 0.5);
+    font-weight: 600;
+}
+
+.panel-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1.25rem;
+}
+
+.no-node-selected {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    min-height: 150px;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.35);
+    padding: 2rem;
+}
+
+.placeholder-glow {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(0, 240, 255, 0.15) 0%, transparent 70%);
+    animation: glow-pulse 2s infinite ease-in-out;
+    margin-bottom: 1rem;
+}
+
+@keyframes glow-pulse {
+    0% { transform: scale(0.9); opacity: 0.5; }
+    50% { transform: scale(1.1); opacity: 1; }
+    100% { transform: scale(0.9); opacity: 0.5; }
+}
+
+.placeholder-text {
+    font-size: 0.85rem;
+    line-height: 1.4;
+    font-weight: 300;
+}
+
+.node-details {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+    animation: fade-in 0.3s ease-out;
+}
+
+@keyframes fade-in {
+    from { opacity: 0; transform: translateY(5px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.node-header-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    padding-bottom: 0.75rem;
+}
+
+.node-group-badge {
+    align-self: flex-start;
+    font-size: 0.65rem;
+    font-weight: 700;
+    padding: 0.15rem 0.5rem;
+    border-radius: 4px;
+    letter-spacing: 0.08em;
+    border: 1px solid transparent;
+}
+
+/* Badge specific styling matching category theme colors */
+.node-group-badge.rule {
+    background: rgba(244, 63, 94, 0.1);
+    color: #f43f5e;
+    border-color: rgba(244, 63, 94, 0.3);
+}
+
+.node-group-badge.definition {
+    background: rgba(234, 179, 8, 0.1);
+    color: #eab308;
+    border-color: rgba(234, 179, 8, 0.3);
+}
+
+.node-group-badge.table {
+    background: rgba(168, 85, 247, 0.1);
+    color: #a855f7;
+    border-color: rgba(168, 85, 247, 0.3);
+}
+
+.node-group-badge.section {
+    background: rgba(59, 130, 246, 0.1);
+    color: #3b82f6;
+    border-color: rgba(59, 130, 246, 0.3);
+}
+
+.node-group-badge.bridge {
+    background: rgba(236, 72, 153, 0.1);
+    color: #ec4899;
+    border-color: rgba(236, 72, 153, 0.3);
+}
+
+.node-group-badge.current {
+    background: rgba(16, 185, 129, 0.1);
+    color: #10b981;
+    border-color: rgba(16, 185, 129, 0.3);
+}
+
+.node-group-badge.concept {
+    background: rgba(0, 240, 255, 0.1);
+    color: #00f0ff;
+    border-color: rgba(0, 240, 255, 0.3);
+}
+
+.node-label {
+    font-family: var(--nexus-font-sans, "Outfit", sans-serif);
+    font-size: 1.15rem;
+    font-weight: 600;
+    color: #ffffff;
+    margin: 0;
+}
+
+.detail-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.section-title {
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    margin: 0;
+    color: rgba(255, 255, 255, 0.4);
+}
+
+.neon-sub-header {
+    border-left: 2px solid var(--nexus-neon, #00f0ff);
+    padding-left: 0.5rem;
+    text-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
+}
+
+.node-description {
+    font-size: 0.85rem;
+    line-height: 1.5;
+    color: rgba(255, 255, 255, 0.85);
+    margin: 0;
+}
+
+.node-summary {
+    font-size: 0.82rem;
+    line-height: 1.5;
+    color: rgba(255, 255, 255, 0.75);
+    background: rgba(255, 255, 255, 0.02);
+    border-left: 2px solid rgba(255, 255, 255, 0.1);
+    padding: 0.5rem 0.75rem;
+    border-radius: 0 4px 4px 0;
+    margin: 0;
+}
+
+.key-terms-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+.key-term-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    font-size: 0.82rem;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.term-bullet {
+    color: var(--nexus-neon, #00f0ff);
+    filter: drop-shadow(0 0 3px var(--nexus-neon, #00f0ff));
+    font-weight: bold;
+}
+
+.term-text {
+    line-height: 1.4;
+}
+
+/* Sidebar Footer & Open Quiz Button */
+.sidebar-footer {
+    padding: 1rem 1.25rem;
+    background: rgba(13, 13, 13, 0.95);
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    z-index: 10;
+}
+
+.open-quiz-btn {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    font-family: var(--nexus-font-sans, "Outfit", sans-serif);
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.6rem;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background: rgba(0, 240, 255, 0.03);
+    border: 1px solid rgba(0, 240, 255, 0.3);
+    color: var(--nexus-neon, #00f0ff);
+    box-shadow: 0 4px 15px rgba(0, 240, 255, 0.05);
+}
+
+.open-quiz-btn:hover {
+    background: rgba(0, 240, 255, 0.1);
+    border-color: var(--nexus-neon, #00f0ff);
+    color: #ffffff;
+    box-shadow: 0 0 20px rgba(0, 240, 255, 0.25);
+    transform: translateY(-2px);
+}
+
+.open-quiz-btn:active {
+    transform: translateY(0);
+}
+
+.quiz-pulse-btn {
+    animation: quiz-pulse-glow 2s infinite ease-in-out;
+}
+
+@keyframes quiz-pulse-glow {
+    0% { border-color: rgba(0, 240, 255, 0.3); box-shadow: 0 0 5px rgba(0, 240, 255, 0.1); }
+    50% { border-color: var(--nexus-neon, #00f0ff); box-shadow: 0 0 25px rgba(0, 240, 255, 0.3); }
+    100% { border-color: rgba(0, 240, 255, 0.3); box-shadow: 0 0 5px rgba(0, 240, 255, 0.1); }
+}
+
+/* Quiz Navigation Header */
+.quiz-layout {
+    display: flex;
+    flex-direction: column;
+}
+
+.quiz-nav {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    background: rgba(255, 255, 255, 0.01);
+}
+
+.back-to-graph-btn {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    transition: all 0.2s;
+}
+
+.back-to-graph-btn:hover {
+    color: var(--nexus-neon, #00f0ff);
+    background: rgba(255, 255, 255, 0.02);
 }

src/NexusReader.UI.Shared/Pages/Dashboard.razor

@@ -5,7 +5,10 @@
 @using NexusReader.UI.Shared.Services
 @inject IIdentityService IdentityService
 @inject NavigationManager NavigationManager
+@inject ISyncService SyncService
 @attribute [Authorize]
+@implements IDisposable
+
 
 <PageTitle>Dashboard | Nexus Reader</PageTitle>
 
@@ -18,20 +21,20 @@
                 <img src="https://api.dicebear.com/7.x/bottts/svg?seed=Nexus" alt="Profile" class="profile-img" />
                 <div class="avatar-glow"></div>
             </div>
-            <h1 class="username">[User_Explorer1988]</h1>
+            <h1 class="username">@(string.IsNullOrEmpty(_profile?.DisplayName) ? (_profile?.Email.Split('@')[0] ?? "Użytkownik") : _profile.DisplayName)</h1>
             
             <div class="status-pills">
                 <div class="status-pill">
-                    <span class="pill-label">Books Read:</span>
-                    <span class="pill-value">12</span>
+                    <span class="pill-label">Książki:</span>
+                    <span class="pill-value">@(_profile?.BooksReadCount ?? 0)</span>
                 </div>
                 <div class="status-pill">
-                    <span class="pill-label">Concepts Mapped:</span>
-                    <span class="pill-value">450</span>
+                    <span class="pill-label">Pojęcia:</span>
+                    <span class="pill-value">@(_profile?.ConceptsMappedCount ?? 0)</span>
                 </div>
                 <div class="status-pill">
-                    <span class="pill-label">Quiz Mastery:</span>
-                    <span class="pill-value">88%</span>
+                    <span class="pill-label">Średni Wynik:</span>
+                    <span class="pill-value">@(_profile?.AverageQuizScore ?? 0)%</span>
                 </div>
             </div>
         </div>
@@ -39,7 +42,7 @@
 
     <!-- Main Content Area -->
     <main class="dashboard-content">
-        <h2 class="section-title">Witaj, @(_profile?.Email.Split('@')[0] ?? "Użytkowniku")</h2>
+        <h2 class="section-title">Witaj, @(string.IsNullOrEmpty(_profile?.DisplayName) ? (_profile?.Email.Split('@')[0] ?? "Użytkowniku") : _profile.DisplayName)</h2>
         
         <div class="main-grid">
             <!-- Current Reading Card -->
@@ -49,34 +52,88 @@
                 <!-- Knowledge Integration -->
                 <section class="integration-card glass-panel">
                     <div class="panel-header">
-                        <h4>Knowledge Integration Progress</h4>
+                        <h4>Integracja Wiedzy</h4>
                         <NexusIcon Name="arrow-right" Size="16" />
                     </div>
                     <div class="graph-placeholder">
-                        <div class="graph-node central"></div>
-                        <div class="graph-node satellite" style="--angle: 0deg; --dist: 60px;"></div>
-                        <div class="graph-node satellite" style="--angle: 120deg; --dist: 50px;"></div>
-                        <div class="graph-node satellite" style="--angle: 240deg; --dist: 70px;"></div>
-                        <div class="active-node-label">TU JESTEŚ</div>
+                        <div class="graph-node central" title="Ośrodek Wiedzy Nexus Reader"></div>
+                        
+                        @if (_profile?.MappedConcepts != null && _profile.MappedConcepts.Any())
+                        {
+                            @for (int i = 0; i < _profile.MappedConcepts.Count; i++)
+                            {
+                                var concept = _profile.MappedConcepts[i];
+                                var angle = i * (360.0 / _profile.MappedConcepts.Count);
+                                var dist = 65;
+                                <div class="graph-node satellite" 
+                                     style="--angle: @(angle)deg; --dist: @(dist)px;"
+                                     title="[@concept.Type] @concept.Content"
+                                     @onmouseover="() => SetHoveredConcept(concept)"
+                                     @onmouseout="ClearHoveredConcept">
+                                </div>
+                            }
+                        }
+                        else
+                        {
+                            <div class="graph-node satellite" style="--angle: 0deg; --dist: 60px;"></div>
+                            <div class="graph-node satellite" style="--angle: 120deg; --dist: 50px;"></div>
+                            <div class="graph-node satellite" style="--angle: 240deg; --dist: 70px;"></div>
+                        }
+                        
+                        <div class="active-node-label">
+                            @(string.IsNullOrEmpty(_hoveredConceptLabel) ? "TU JESTEŚ" : _hoveredConceptLabel)
+                        </div>
                     </div>
+                    
+                    @if (_hoveredConcept != null)
+                    {
+                        <div class="concept-detail-toast">
+                            <span class="concept-type">@_hoveredConcept.Type</span>
+                            <p class="concept-content">@_hoveredConcept.Content</p>
+                        </div>
+                    }
+                    else
+                    {
+                        <div class="concept-detail-toast placeholder">
+                            <span class="concept-type">Mapowanie AI</span>
+                            <p class="concept-content">Najedź na węzeł, aby zbadać pojęcie wydobyte przez Nexus AI.</p>
+                        </div>
+                    }
                 </section>
 
                 <!-- Quiz Summary -->
                 <section class="quiz-card glass-panel">
                     <div class="panel-header">
-                        <h4>Quiz Summary: Key Thinkers</h4>
+                        <h4>Rozwiązane Quizy</h4>
                         <NexusIcon Name="arrow-right" Size="16" />
                     </div>
                     <div class="quiz-preview">
-                        <p class="question">Który artysta namalował 'Ostatnią Wieczerzę'?</p>
-                        <div class="quiz-options">
-                            <div class="quiz-option active">
-                                <span class="option-letter">A)</span> Michal Anioł
+                        @if (_profile?.RecentQuizzes != null && _profile.RecentQuizzes.Any())
+                        {
+                            <div class="quiz-history-list">
+                                @foreach (var quiz in _profile.RecentQuizzes)
+                                {
+                                    <div class="quiz-history-item">
+                                        <div class="quiz-item-header">
+                                            <span class="quiz-topic">@quiz.Topic</span>
+                                            <span class="quiz-score badge @(quiz.Percentage >= 80 ? "badge-success" : quiz.Percentage >= 50 ? "badge-warning" : "badge-danger")">
+                                                @quiz.Score / @quiz.TotalQuestions (@((int)quiz.Percentage)%)
+                                            </span>
+                                        </div>
+                                        <div class="quiz-item-meta">
+                                            <span class="quiz-date">@quiz.CompletedDate.ToString("g")</span>
+                                        </div>
+                                    </div>
+                                }
                             </div>
-                            <div class="quiz-option">
-                                <span class="option-letter">B)</span> Leonardo da Vinci
+                        }
+                        else
+                        {
+                            <div class="empty-quiz-state">
+                                <p class="question">Brak rozwiązanych quizów</p>
+                                <p class="sub-text">Rozwiązuj quizy w trakcie czytania książek, aby śledzić swoje postępy.</p>
                             </div>
-                        </div>
+                        }
                     </div>
                 </section>
             </div>
@@ -86,13 +143,65 @@
 
 @code {
     private UserProfileDto? _profile;
+    private MappedConceptDto? _hoveredConcept;
+    private string _hoveredConceptLabel = string.Empty;
 
     protected override async Task OnInitializedAsync()
+    {
+        IdentityService.OnStateInvalidated += HandleStateInvalidatedAsync;
+        await LoadProfileAsync();
+        
+        await SyncService.InitializeAsync();
+        SyncService.OnProgressReceived += HandleProgressReceivedAsync;
+    }
+
+    private void SetHoveredConcept(MappedConceptDto concept)
+    {
+        _hoveredConcept = concept;
+        _hoveredConceptLabel = concept.DisplayLabel;
+    }
+
+    private void ClearHoveredConcept()
+    {
+        _hoveredConcept = null;
+        _hoveredConceptLabel = string.Empty;
+    }
+
+    private async Task LoadProfileAsync()
     {
         var result = await IdentityService.GetProfileAsync();
         if (result.IsSuccess) 
         {
             _profile = result.Value;
         }
+        else
+        {
+            _profile = null;
+        }
+        StateHasChanged();
+    }
+
+    private async Task HandleStateInvalidatedAsync()
+    {
+        await InvokeAsync(async () =>
+        {
+            await LoadProfileAsync();
+        });
+    }
+
+    private async Task HandleProgressReceivedAsync(string pageId, DateTime timestamp)
+    {
+        await InvokeAsync(async () =>
+        {
+            IdentityService.ClearCache();
+            await LoadProfileAsync();
+        });
+    }
+
+    public void Dispose()
+    {
+        IdentityService.OnStateInvalidated -= HandleStateInvalidatedAsync;
+        SyncService.OnProgressReceived -= HandleProgressReceivedAsync;
     }
 }
+

src/NexusReader.UI.Shared/Pages/Dashboard.razor.css

@@ -294,9 +294,19 @@
 }
 
 .graph-node.satellite {
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
     transform: rotate(var(--angle)) translateY(var(--dist));
+    background: rgba(0, 255, 153, 0.4);
+    border: 1px solid var(--nexus-neon);
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.graph-node.satellite:hover {
+    background: var(--nexus-neon);
+    box-shadow: 0 0 15px var(--nexus-neon);
+    transform: rotate(var(--angle)) translateY(var(--dist)) scale(1.3);
 }
 
 .active-node-label {
@@ -404,3 +414,117 @@
         grid-template-columns: 1fr;
     }
 }
+
+/* --- Quiz History Styling --- */
+.quiz-history-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.quiz-history-item {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 1rem;
+    transition: all 0.2s ease;
+}
+
+.quiz-history-item:hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+.quiz-item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+.quiz-topic {
+    font-size: 0.95rem;
+    font-weight: 500;
+    color: #ffffff;
+}
+
+.quiz-item-meta {
+    display: flex;
+    font-size: 0.75rem;
+    color: #666666;
+}
+
+.badge {
+    padding: 0.25rem 0.5rem;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.badge-success {
+    background: rgba(0, 255, 153, 0.1);
+    color: var(--nexus-neon);
+    border: 1px solid rgba(0, 255, 153, 0.3);
+}
+
+.badge-warning {
+    background: rgba(255, 170, 0, 0.1);
+    color: #ffa800;
+    border: 1px solid rgba(255, 170, 0, 0.3);
+}
+
+.badge-danger {
+    background: rgba(255, 50, 50, 0.1);
+    color: #ff3232;
+    border: 1px solid rgba(255, 50, 50, 0.3);
+}
+
+.empty-quiz-state {
+    text-align: center;
+    padding: 2rem 1rem;
+}
+
+.empty-quiz-state .sub-text {
+    font-size: 0.8rem;
+    color: #666666;
+    margin-top: 0.5rem;
+}
+
+/* --- Concept Detail Toast for Dashboard --- */
+.concept-detail-toast {
+    margin-top: 1rem;
+    padding: 0.75rem 1rem;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    min-height: 80px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.concept-detail-toast.placeholder {
+    opacity: 0.5;
+}
+
+.concept-type {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--nexus-neon);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.concept-content {
+    font-size: 0.85rem;
+    line-height: 1.4;
+    color: #E0E0E0;
+    margin: 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+

src/NexusReader.UI.Shared/Pages/Intelligence.razor

@@ -3,179 +3,430 @@
 @using NexusReader.Application.DTOs.AI
 @using NexusReader.Application.Abstractions.Services
 @using NexusReader.Application.DTOs.User
+@using NexusReader.UI.Shared.Components.Atoms
 @using System.Net.Http.Json
 @inject HttpClient Http
 @inject IKnowledgeService KnowledgeService
+@inject AuthenticationStateProvider AuthStateProvider
 
 <div class="intelligence-page">
     <header class="intelligence-header">
         <div class="header-title-section">
-            <h1>Global AI Q&A</h1>
-            <p class="subtitle">Search, interrogate, and extract grounded facts from your library using Polyglot KM-RAG</p>
+            <h1 class="neon-glow-text">Global Intelligence</h1>
+            <p class="subtitle">Interrogate, explore, and synthesize grounded knowledge from your library using Polyglot KM-RAG</p>
         </div>
     </header>
 
     <div class="intelligence-layout glass-panel">
-        <div class="search-scope-bar">
-            <div class="input-group search-input-group">
-                <input class="nexus-input" 
-                       placeholder="Ask a question about your books..." 
-                       @bind="_question" 
-                       @bind:event="oninput"
-                       @onkeyup="HandleKeyUp" />
-                <button class="btn-nexus primary search-btn" 
-                        disabled="@(string.IsNullOrWhiteSpace(_question) || _isLoading)" 
-                        @onclick="AskQuestionAsync">
-                    @if (_isLoading)
-                    {
-                        <div class="spinner-glow small btn-spinner"></div>
-                    }
-                    else
-                    {
-                        <span>Ask AI</span>
-                    }
-                </button>
-            </div>
-            
-            <div class="scope-selector">
-                <label for="book-select">Scope:</label>
-                <select id="book-select" class="nexus-select" @bind="_selectedBookId">
-                    <option value="">All Books (Global Search)</option>
-                    @if (_books != null)
-                    {
-                        @foreach (var book in _books)
-                        {
-                            <option value="@book.Id">@book.Title</option>
-                        }
-                    }
-                </select>
-            </div>
-        </div>
-
-        <div class="results-area">
-            @if (_isLoading)
+        <div class="chat-thread-container">
+            @if (_chatMessages.Count == 0)
             {
-                <div class="loading-state">
-                    <div class="nexus-spinner"></div>
-                    <span>Analyzing conceptual graph and synthesizing response...</span>
+                <div class="welcome-state">
+                    <div class="welcome-icon">
+                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+                        </svg>
+                    </div>
+                    <h3>Start Interrogating Your Library</h3>
+                    <p>Ask complex questions across your entire ebook collection. The KM-RAG engine dynamically builds semantic maps, resolves dependencies, and formulates high-fidelity, grounded answers with interactive popover citations.</p>
                 </div>
             }
-            else if (_response != null)
+            else
             {
-                <div class="response-container">
-                    <div class="response-section">
-                        <h4><i class="bi bi-robot"></i> Answer</h4>
-                        <div class="answer-text">
-                            @_response.Answer
-                        </div>
-                    </div>
-
-                    @if (_response.Citations != null && _response.Citations.Any())
+                <div class="chat-bubbles-scroll">
+                    @foreach (var message in _chatMessages)
                     {
-                        <div class="citations-section">
-                            <h4><i class="bi bi-journal-check"></i> Grounded Citations</h4>
-                            <div class="citations-grid">
-                                @foreach (var citation in _response.Citations)
+                        <div class="message-row @(message.Sender == "User" ? "user-row" : "ai-row")" key="@message.Id">
+                            <div class="message-avatar">
+                                @if (message.Sender == "User")
                                 {
-                                    <div class="citation-card">
-                                        <div class="citation-header">
-                                            <span class="source-badge">@citation.SourceBook</span>
-                                            @if (!string.IsNullOrEmpty(citation.CitationId) && citation.CitationId.Length > 8)
-                                            {
-                                                <span class="id-badge">ID: @citation.CitationId.Substring(0, Math.Min(8, citation.CitationId.Length))</span>
-                                            }
-                                        </div>
-                                        <div class="citation-body">
-                                            "@citation.Snippet"
-                                        </div>
-                                    </div>
+                                    <i class="bi bi-person-fill"></i>
                                 }
+                                else
+                                {
+                                    <i class="bi bi-robot"></i>
+                                }
+                            </div>
+                            <div class="message-bubble @(message.Sender == "User" ? "user-bubble" : "ai-bubble")">
+                                <div class="message-header">
+                                    <span class="sender-name">@message.Sender</span>
+                                    <span class="message-time">@message.Timestamp.ToString("HH:mm")</span>
+                                </div>
+                                <div class="message-content">
+                                    @foreach (var segment in message.Segments)
+                                    {
+                                        @if (segment.IsCitation)
+                                        {
+                                            <NexusCitationMarker SourceId="@segment.CitationId" Citations="@message.Citations" />
+                                        }
+                                        else
+                                        {
+                                            @RenderMarkdown(segment.Text)
+                                        }
+                                    }
+                                </div>
+                            </div>
+                        </div>
+                    }
+
+                    @if (_isLoading)
+                    {
+                        <div class="message-row ai-row">
+                            <div class="message-avatar">
+                                <i class="bi bi-robot"></i>
+                            </div>
+                            <div class="message-bubble ai-bubble pending-bubble">
+                                <div class="message-header">
+                                    <span class="sender-name">AI</span>
+                                    <span class="message-time">Thinking...</span>
+                                </div>
+                                <div class="message-content">
+                                    <div class="typing-indicator">
+                                        <span></span>
+                                        <span></span>
+                                        <span></span>
+                                    </div>
+                                    <span class="loading-label">Analyzing conceptual graphs and synthesizing response...</span>
+                                </div>
                             </div>
                         </div>
                     }
                 </div>
             }
-            else if (_hasSearched)
-            {
-                <div class="empty-state">
-                    <i class="bi bi-info-circle"></i>
-                    <p>No answers generated. Try adjusting your question.</p>
-                </div>
-            }
-            else
-            {
-                <div class="welcome-state">
-                    <div class="welcome-icon">
-                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-                        </svg>
+        </div>
+
+        <div class="chat-input-controls">
+            <div class="input-panel-wrapper">
+                <div class="scope-bar">
+                    <div class="scope-selector">
+                        <label for="book-select"><i class="bi bi-compass"></i> Scope:</label>
+                        <select id="book-select" class="nexus-select" @bind="_selectedBookId">
+                            <option value="">All Books (Global Search)</option>
+                            @if (_books != null)
+                            {
+                                @foreach (var book in _books)
+                                {
+                                    <option value="@book.Id">@book.Title</option>
+                                }
+                            }
+                        </select>
                     </div>
-                    <h3>Start Interrogating Your Library</h3>
-                    <p>Ask complex questions across all your books. The system will search vectors, pull concept graph relations, and formulate a grounded answer with precise citations.</p>
                 </div>
-            }
+
+                <div class="input-field-group">
+                    <input class="nexus-input" 
+                           placeholder="Ask a question about your books..." 
+                           @bind="_question" 
+                           @bind:event="oninput"
+                           @onkeyup="HandleKeyUp"
+                           disabled="@_isLoading" />
+                    <button class="btn-nexus primary search-btn" 
+                            disabled="@(string.IsNullOrWhiteSpace(_question) || _isLoading)" 
+                            @onclick="AskQuestionAsync">
+                        @if (_isLoading)
+                        {
+                            <div class="btn-spinner"></div>
+                        }
+                        else
+                        {
+                            <span><i class="bi bi-send-fill"></i></span>
+                        }
+                    </button>
+                </div>
+            </div>
         </div>
     </div>
 </div>
 
 <style>
     .intelligence-page {
-        padding: 3rem 2rem;
+        padding: 2rem;
         max-width: 1100px;
         margin: 0 auto;
+        height: calc(100vh - 100px);
+        display: flex;
+        flex-direction: column;
         animation: fadeIn 0.5s ease-out;
     }
 
     .intelligence-header {
-        margin-bottom: 2rem;
+        margin-bottom: 1.5rem;
+        flex-shrink: 0;
     }
 
-    .header-title-section h1 {
-        font-family: var(--nexus-font-serif, 'Outfit', 'Georgia', serif);
-        font-size: 2.8rem;
-        font-weight: 700;
-        margin: 0 0 0.5rem 0;
-        background: linear-gradient(135deg, var(--nexus-text, #ffffff) 0%, rgba(255, 255, 255, 0.7) 100%);
+    .neon-glow-text {
+        font-family: var(--nexus-font-sans, 'Outfit', sans-serif);
+        font-size: 2.5rem;
+        font-weight: 800;
+        margin: 0 0 0.25rem 0;
+        background: linear-gradient(135deg, #00ff99 0%, #06b6d4 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
+        filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.2));
     }
 
     .subtitle {
-        font-size: 1rem;
+        font-size: 0.95rem;
         color: rgba(255, 255, 255, 0.6);
         margin: 0;
     }
 
     .intelligence-layout {
-        padding: 2.5rem;
-        border-radius: var(--nexus-radius-lg, 16px);
-        background: rgba(15, 23, 42, 0.4);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        backdrop-filter: blur(20px);
-        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
-    }
-
-    .search-scope-bar {
-        display: flex;
-        gap: 1.5rem;
-        align-items: center;
-        margin-bottom: 2.5rem;
-        flex-wrap: wrap;
-    }
-
-    .search-input-group {
         flex-grow: 1;
         display: flex;
-        background: rgba(15, 23, 42, 0.5);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        border-radius: 30px;
-        padding: 0.25rem 0.25rem 0.25rem 1.25rem;
-        transition: all 0.3s ease;
+        flex-direction: column;
+        border-radius: 20px;
+        background: rgba(10, 16, 26, 0.45);
+        border: 1px solid rgba(6, 182, 212, 0.15);
+        backdrop-filter: blur(16px);
+        -webkit-backdrop-filter: blur(16px);
+        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(6, 182, 212, 0.05);
+        overflow: hidden;
     }
 
-    .search-input-group:focus-within {
-        border-color: var(--nexus-primary, #6366f1);
-        box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);
+    .chat-thread-container {
+        flex-grow: 1;
+        overflow-y: auto;
+        padding: 2rem;
+        display: flex;
+        flex-direction: column;
+    }
+
+    /* Custom Scrollbars */
+    .chat-thread-container::-webkit-scrollbar {
+        width: 6px;
+    }
+    .chat-thread-container::-webkit-scrollbar-track {
+        background: rgba(255, 255, 255, 0.01);
+    }
+    .chat-thread-container::-webkit-scrollbar-thumb {
+        background: rgba(6, 182, 212, 0.2);
+        border-radius: 4px;
+    }
+    .chat-thread-container::-webkit-scrollbar-thumb:hover {
+        background: rgba(6, 182, 212, 0.4);
+    }
+
+    .chat-bubbles-scroll {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+        width: 100%;
+    }
+
+    .message-row {
+        display: flex;
+        gap: 1rem;
+        width: 100%;
+        max-width: 85%;
+        animation: bubble-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    }
+
+    .user-row {
+        align-self: flex-end;
+        flex-direction: row-reverse;
+    }
+
+    .ai-row {
+        align-self: flex-start;
+    }
+
+    .message-avatar {
+        width: 38px;
+        height: 38px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.1rem;
+        flex-shrink: 0;
+    }
+
+    .user-row .message-avatar {
+        background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
+        color: #f5f3ff;
+        border: 1px solid rgba(139, 92, 246, 0.4);
+        box-shadow: 0 0 10px rgba(139, 92, 246, 0.25);
+    }
+
+    .ai-row .message-avatar {
+        background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
+        color: #ccfbf1;
+        border: 1px solid rgba(13, 148, 136, 0.4);
+        box-shadow: 0 0 10px rgba(13, 148, 136, 0.25);
+    }
+
+    .message-bubble {
+        padding: 1.25rem 1.5rem;
+        border-radius: 16px;
+        position: relative;
+        line-height: 1.6;
+        font-size: 0.975rem;
+    }
+
+    .user-bubble {
+        background: rgba(43, 24, 80, 0.35);
+        border: 1px solid rgba(139, 92, 246, 0.25);
+        color: #f3e8ff;
+        border-top-right-radius: 4px;
+        box-shadow: 0 4px 15px rgba(139, 92, 246, 0.05);
+    }
+
+    .ai-bubble {
+        background: rgba(10, 20, 30, 0.55);
+        border: 1px solid rgba(6, 182, 212, 0.2);
+        color: #e2e8f0;
+        border-top-left-radius: 4px;
+        box-shadow: 0 4px 15px rgba(6, 182, 212, 0.05);
+        flex-grow: 1;
+    }
+
+    .message-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.5rem;
+        font-size: 0.75rem;
+        opacity: 0.6;
+    }
+
+    .sender-name {
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+
+    .message-time {
+        font-family: monospace;
+    }
+
+    .message-content {
+        word-break: break-word;
+    }
+
+    /* Paragraph Spacing & Markdown */
+    .message-content p {
+        margin: 0 0 1rem 0;
+    }
+    .message-content p:last-child {
+        margin-bottom: 0;
+    }
+
+    .nexus-code-block {
+        background: rgba(0, 0, 0, 0.4) !important;
+        border: 1px solid rgba(255, 255, 255, 0.08) !important;
+        border-radius: 8px;
+        padding: 1rem;
+        margin: 1rem 0;
+        overflow-x: auto;
+        font-family: 'Fira Code', monospace;
+        font-size: 0.85rem;
+        color: #a7f3d0;
+    }
+
+    .nexus-inline-code {
+        background: rgba(255, 255, 255, 0.06);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 4px;
+        padding: 0.15rem 0.35rem;
+        font-family: monospace;
+        font-size: 0.9em;
+        color: #f472b6; /* Light pink for inline code */
+    }
+
+    /* Pending State Bubble */
+    .pending-bubble {
+        border-color: rgba(6, 182, 212, 0.4);
+        box-shadow: 0 0 15px rgba(6, 182, 212, 0.1);
+    }
+
+    .typing-indicator {
+        display: flex;
+        gap: 4px;
+        align-items: center;
+        margin-bottom: 0.5rem;
+    }
+
+    .typing-indicator span {
+        width: 8px;
+        height: 8px;
+        background: #06b6d4;
+        border-radius: 50%;
+        display: inline-block;
+        animation: typing-bounce 1.4s infinite ease-in-out both;
+    }
+
+    .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
+    .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
+
+    .loading-label {
+        font-size: 0.85rem;
+        color: rgba(255, 255, 255, 0.5);
+        font-style: italic;
+    }
+
+    /* Input Controls */
+    .chat-input-controls {
+        padding: 1.5rem 2rem 2rem 2rem;
+        background: rgba(0, 0, 0, 0.2);
+        border-top: 1px solid rgba(255, 255, 255, 0.05);
+        flex-shrink: 0;
+    }
+
+    .input-panel-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+    }
+
+    .scope-bar {
+        display: flex;
+        align-items: center;
+    }
+
+    .scope-selector {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.85rem;
+        color: rgba(255, 255, 255, 0.5);
+    }
+
+    .nexus-select {
+        background: rgba(255, 255, 255, 0.02);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        color: #ffffff;
+        padding: 0.35rem 2rem 0.35rem 0.75rem;
+        border-radius: 8px;
+        outline: none;
+        cursor: pointer;
+        font-size: 0.85rem;
+        transition: all 0.3s ease;
+        appearance: none;
+        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+        background-repeat: no-repeat;
+        background-position: right 0.75rem center;
+        background-size: 0.85em;
+    }
+
+    .nexus-select:focus {
+        border-color: #06b6d4;
+        box-shadow: 0 0 8px rgba(6, 182, 212, 0.2);
+    }
+
+    .input-field-group {
+        display: flex;
+        background: rgba(255, 255, 255, 0.02);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 12px;
+        padding: 0.35rem;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .input-field-group:focus-within {
+        border-color: #06b6d4;
+        background: rgba(6, 182, 212, 0.01);
+        box-shadow: 0 0 15px rgba(6, 182, 212, 0.15);
     }
 
     .nexus-input {
@@ -185,205 +436,137 @@
         color: #ffffff;
         font-size: 1rem;
         outline: none;
-        padding: 0.5rem 0;
+        padding: 0.5rem 1rem;
     }
 
     .nexus-input::placeholder {
-        color: rgba(255, 255, 255, 0.4);
+        color: rgba(255, 255, 255, 0.35);
+    }
+
+    .btn-nexus {
+        padding: 0.75rem 1.25rem;
+        border-radius: 10px;
+        font-size: 0.95rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s;
+        border: none;
+    }
+
+    .btn-nexus.primary {
+        background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
+        color: #ffffff;
+        box-shadow: 0 4px 10px rgba(6, 182, 212, 0.25);
+    }
+
+    .btn-nexus:hover:not(:disabled) {
+        transform: translateY(-1px);
+        filter: brightness(1.1);
+        box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4);
+    }
+
+    .btn-nexus:disabled {
+        background: rgba(255, 255, 255, 0.05);
+        color: rgba(255, 255, 255, 0.25);
+        box-shadow: none;
+        cursor: not-allowed;
     }
 
     .search-btn {
-        border-radius: 25px !important;
-        padding: 0.5rem 1.5rem !important;
-        font-size: 0.95rem !important;
+        width: 46px;
+        height: 46px;
+        padding: 0 !important;
         display: flex;
         align-items: center;
         justify-content: center;
+        border-radius: 10px;
     }
 
-    .scope-selector {
-        display: flex;
-        align-items: center;
-        gap: 0.75rem;
-        color: rgba(255, 255, 255, 0.7);
-    }
-
-    .nexus-select {
-        background: rgba(15, 23, 42, 0.6);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        color: #ffffff;
-        padding: 0.5rem 1.5rem 0.5rem 1rem;
-        border-radius: 20px;
-        outline: none;
-        cursor: pointer;
-        transition: all 0.3s ease;
-    }
-
-    .nexus-select:focus {
-        border-color: var(--nexus-primary, #6366f1);
-    }
-
-    .results-area {
-        min-height: 250px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-    }
-
-    .loading-state {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 1.5rem;
-        color: rgba(255, 255, 255, 0.7);
-    }
-
-    .nexus-spinner {
-        width: 50px;
-        height: 50px;
-        border: 3px solid rgba(99, 102, 241, 0.1);
-        border-radius: 50%;
-        border-top-color: var(--nexus-primary, #6366f1);
-        animation: spin 1s linear infinite;
-    }
-
-    .welcome-state, .empty-state {
+    .welcome-state {
         text-align: center;
         color: rgba(255, 255, 255, 0.5);
-        padding: 3rem 1rem;
+        padding: 4rem 2rem;
         display: flex;
         flex-direction: column;
         align-items: center;
+        justify-content: center;
+        height: 100%;
     }
 
     .welcome-icon {
-        color: rgba(255, 255, 255, 0.25);
+        color: rgba(6, 182, 212, 0.4);
         margin-bottom: 1.5rem;
-        animation: pulse 2s infinite alternate;
+        filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.2));
+        animation: pulse 2.5s infinite alternate;
     }
 
     .welcome-state h3 {
         color: #ffffff;
-        font-family: var(--nexus-font-sans);
-        margin: 0 0 0.5rem 0;
+        font-size: 1.5rem;
+        margin: 0 0 0.75rem 0;
     }
 
-    .welcome-state p, .empty-state p {
-        max-width: 500px;
+    .welcome-state p {
+        max-width: 550px;
         margin: 0;
         font-size: 0.95rem;
         line-height: 1.6;
     }
 
-    .response-container {
-        display: flex;
-        flex-direction: column;
-        gap: 2.5rem;
-        animation: slideUp 0.4s ease-out;
-    }
-
-    .response-section h4, .citations-section h4 {
-        font-size: 1.1rem;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        color: rgba(255, 255, 255, 0.5);
-        margin: 0 0 1rem 0;
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-
-    .answer-text {
-        font-size: 1.15rem;
-        line-height: 1.7;
-        color: #ffffff;
-        background: rgba(255, 255, 255, 0.03);
-        padding: 1.5rem;
-        border-radius: 12px;
-        border: 1px solid rgba(255, 255, 255, 0.05);
-    }
-
-    .citations-grid {
-        display: grid;
-        grid-template-columns: 1fr;
-        gap: 1.25rem;
-    }
-
-    .citation-card {
-        background: rgba(15, 23, 42, 0.4);
-        border: 1px solid rgba(255, 255, 255, 0.05);
-        border-radius: 12px;
-        padding: 1.25rem;
-        transition: all 0.3s ease;
-    }
-
-    .citation-card:hover {
-        border-color: rgba(99, 102, 241, 0.3);
-        transform: translateY(-2px);
-    }
-
-    .citation-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 0.75rem;
-    }
-
-    .source-badge {
-        font-size: 0.8rem;
-        font-weight: 600;
-        color: var(--nexus-primary, #6366f1);
-        background: rgba(99, 102, 241, 0.1);
-        padding: 0.25rem 0.75rem;
-        border-radius: 20px;
-    }
-
-    .id-badge {
-        font-size: 0.75rem;
-        color: rgba(255, 255, 255, 0.4);
-        font-family: monospace;
-    }
-
-    .citation-body {
-        font-size: 0.95rem;
-        line-height: 1.5;
-        color: rgba(255, 255, 255, 0.8);
-        font-style: italic;
-    }
-
     .btn-spinner {
-        margin: 0;
+        width: 20px;
+        height: 20px;
+        border: 2px solid rgba(255, 255, 255, 0.1);
+        border-radius: 50%;
+        border-top-color: #ffffff;
+        animation: spin 0.8s linear infinite;
     }
 
-    /* Animations */
-    @@keyframes fadeIn {
-        from { opacity: 0; transform: translateY(15px); }
-        to { opacity: 1; transform: translateY(0); }
+    /* Keyframe Animations */
+    @@keyframes bubble-fade-in {
+        0% { opacity: 0; transform: translateY(10px) scale(0.98); }
+        100% { opacity: 1; transform: translateY(0) scale(1); }
     }
 
-    @@keyframes slideUp {
-        from { opacity: 0; transform: translateY(10px); }
-        to { opacity: 1; transform: translateY(0); }
+    @@keyframes typing-bounce {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-4px); }
+    }
+
+    @@keyframes pulse {
+        0% { transform: scale(0.96); opacity: 0.8; }
+        100% { transform: scale(1.04); opacity: 1; }
     }
 
     @@keyframes spin {
         0% { transform: rotate(0deg); }
         100% { transform: rotate(360deg); }
     }
-
-    @@keyframes pulse {
-        0% { transform: scale(0.95); opacity: 0.7; }
-        100% { transform: scale(1.05); opacity: 1; }
-    }
 </style>
 
 @code {
     private string _question = string.Empty;
     private string _selectedBookId = string.Empty;
     private bool _isLoading;
-    private bool _hasSearched;
-    private GroundedResponseDto? _response;
     private List<LastReadBookDto>? _books;
+    private List<ChatMessage> _chatMessages = new();
+
+    public class ChatMessage
+    {
+        public string Id { get; set; } = Guid.NewGuid().ToString();
+        public string Sender { get; set; } = string.Empty; // "User" or "AI"
+        public string Text { get; set; } = string.Empty;
+        public DateTime Timestamp { get; set; } = DateTime.UtcNow;
+        public List<ResponseSegment> Segments { get; set; } = new();
+        public List<CitationDto> Citations { get; set; } = new();
+    }
+
+    public class ResponseSegment
+    {
+        public string Text { get; set; } = string.Empty;
+        public bool IsCitation { get; set; }
+        public string CitationId { get; set; } = string.Empty;
+    }
 
     protected override async Task OnInitializedAsync()
     {
@@ -409,9 +592,18 @@
     {
         if (string.IsNullOrWhiteSpace(_question) || _isLoading) return;
 
+        var userQuestion = _question;
+        _question = string.Empty; // Clear input field immediately
         _isLoading = true;
-        _hasSearched = true;
-        _response = null;
+
+        // Add user query message
+        _chatMessages.Add(new ChatMessage
+        {
+            Sender = "User",
+            Text = userQuestion,
+            Segments = new List<ResponseSegment> { new ResponseSegment { Text = userQuestion, IsCitation = false } }
+        });
+        
         StateHasChanged();
 
         try
@@ -422,27 +614,41 @@
                 ebookId = parsedId;
             }
 
-            var result = await KnowledgeService.AskQuestionAsync(_question, "tenantId", ebookId);
+            var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+            var tenantId = authState.User.FindFirst("TenantId")?.Value ?? "global";
+
+            var result = await KnowledgeService.AskQuestionAsync(userQuestion, tenantId, ebookId);
             if (result.IsSuccess)
             {
-                _response = result.Value;
+                var response = result.Value;
+                _chatMessages.Add(new ChatMessage
+                {
+                    Sender = "AI",
+                    Text = response.Answer,
+                    Segments = ParseSegments(response.Answer),
+                    Citations = response.Citations
+                });
             }
             else
             {
-                _response = new GroundedResponseDto
+                var errMsg = $"Error: {result.Errors.FirstOrDefault()?.Message ?? "An error occurred."}";
+                _chatMessages.Add(new ChatMessage
                 {
-                    Answer = $"Error: {result.Errors.FirstOrDefault()?.Message ?? "An error occurred."}",
-                    Citations = new List<CitationDto>()
-                };
+                    Sender = "AI",
+                    Text = errMsg,
+                    Segments = new List<ResponseSegment> { new ResponseSegment { Text = errMsg, IsCitation = false } }
+                });
             }
         }
         catch (Exception ex)
         {
-            _response = new GroundedResponseDto
+            var errMsg = $"Network/API Error: {ex.Message}";
+            _chatMessages.Add(new ChatMessage
             {
-                Answer = $"Network/API Error: {ex.Message}",
-                Citations = new List<CitationDto>()
-            };
+                Sender = "AI",
+                Text = errMsg,
+                Segments = new List<ResponseSegment> { new ResponseSegment { Text = errMsg, IsCitation = false } }
+            });
         }
         finally
         {
@@ -450,4 +656,77 @@
             StateHasChanged();
         }
     }
+
+    private List<ResponseSegment> ParseSegments(string text)
+    {
+        var segments = new List<ResponseSegment>();
+        if (string.IsNullOrEmpty(text)) return segments;
+
+        // Matches [Source ID: some-id] OR raw GUIDs in brackets [e225e58f-7539-cd51-e0ab-82741ec7e65c]
+        var regex = new System.Text.RegularExpressions.Regex(
+            @"\[Source ID:\s*([^\]]+)\]|\[([a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12})\]", 
+            System.Text.RegularExpressions.RegexOptions.IgnoreCase);
+        var matches = regex.Matches(text);
+
+        int lastIndex = 0;
+        foreach (System.Text.RegularExpressions.Match match in matches)
+        {
+            if (match.Index > lastIndex)
+            {
+                segments.Add(new ResponseSegment
+                {
+                    Text = text.Substring(lastIndex, match.Index - lastIndex),
+                    IsCitation = false
+                });
+            }
+
+            var citationId = match.Groups[1].Success 
+                ? match.Groups[1].Value.Trim() 
+                : match.Groups[2].Value.Trim();
+
+            segments.Add(new ResponseSegment
+            {
+                IsCitation = true,
+                CitationId = citationId
+            });
+
+            lastIndex = match.Index + match.Length;
+        }
+
+        if (lastIndex < text.Length)
+        {
+            segments.Add(new ResponseSegment
+            {
+                Text = text.Substring(lastIndex),
+                IsCitation = false
+            });
+        }
+
+        return segments;
+    }
+
+    private MarkupString RenderMarkdown(string text)
+    {
+        if (string.IsNullOrEmpty(text)) return new MarkupString(string.Empty);
+
+        // 1. HTML Encode to prevent XSS
+        var html = System.Net.WebUtility.HtmlEncode(text);
+
+        // 2. Bold: **text** -> <strong>text</strong>
+        html = System.Text.RegularExpressions.Regex.Replace(html, @"\*\*(.*?)\*\*", "<strong>$1</strong>");
+
+        // 3. Italic: *text* -> <em>text</em>
+        html = System.Text.RegularExpressions.Regex.Replace(html, @"\*(.*?)\*", "<em>$1</em>");
+
+        // 4. Code blocks: ```language ... ``` -> <pre class="nexus-code-block"><code>...</code></pre>
+        html = System.Text.RegularExpressions.Regex.Replace(html, @"```(?:[a-zA-Z0-9+#]+)?\s*([\s\S]*?)\s*```", "<pre class=\"nexus-code-block\"><code>$1</code></pre>");
+
+        // 5. Inline Code: `code` -> <code class="nexus-inline-code">code</code>
+        html = System.Text.RegularExpressions.Regex.Replace(html, @"`(.*?)`", "<code class=\"nexus-inline-code\">$1</code>");
+
+        // 6. Newlines: \n -> <br />
+        html = html.Replace("\n", "<br />");
+
+        return new MarkupString(html);
+    }
 }

src/NexusReader.UI.Shared/Pages/SerilogDemo.razor

@@ -0,0 +1,370 @@
+@page "/serilog-demo"
+@inject ILogger<SerilogDemo> Logger
+@inject IJSRuntime JSRuntime
+
+<div class="serilog-demo-container">
+    <div class="header-card">
+        <div class="header-content">
+            <NexusIcon Name="cpu" Size="36" Class="header-icon" />
+            <div class="header-text">
+                <h1>Serilog Logging Infrastructure</h1>
+                <p class="subtitle">Production-grade diagnostic pipeline for unified native & web logs</p>
+            </div>
+        </div>
+        <div class="status-badge">
+            <span class="status-dot green"></span>
+            <span class="status-text">Pipeline Active</span>
+        </div>
+    </div>
+
+    <div class="demo-grid">
+        <!-- Native .NET Logging Panel -->
+        <div class="control-card">
+            <div class="card-header">
+                <NexusIcon Name="terminal" Size="20" Class="card-icon" />
+                <h2>Native .NET Logs (C#)</h2>
+            </div>
+            <p class="card-desc">Trigger structured C# logs using Dependency Injected ILogger.</p>
+            <div class="btn-group">
+                <button class="btn btn-info" @onclick="LogInfo">
+                    <NexusIcon Name="info" Size="16" />
+                    Log Info
+                </button>
+                <button class="btn btn-warning" @onclick="LogWarning">
+                    <NexusIcon Name="alert-triangle" Size="16" />
+                    Log Warning
+                </button>
+                <button class="btn btn-error" @onclick="LogError">
+                    <NexusIcon Name="x-circle" Size="16" />
+                    Log Error Exception
+                </button>
+            </div>
+        </div>
+
+        <!-- Blazor / JS Interop Bridge Panel -->
+        <div class="control-card">
+            <div class="card-header">
+                <NexusIcon Name="globe" Size="20" Class="card-icon js-icon" />
+                <h2>Blazor / JS WebView Logs</h2>
+            </div>
+            <p class="card-desc">Trigger logs from JavaScript to verify the interop error capture bridge.</p>
+            <div class="btn-group">
+                <button class="btn btn-js-info" @onclick="TriggerJsLog">
+                    <NexusIcon Name="message-square" Size="16" />
+                    Trigger console.log()
+                </button>
+                <button class="btn btn-js-error" @onclick="TriggerJsException">
+                    <NexusIcon Name="zap" Size="16" />
+                    Trigger JS Exception
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Active Log Config Panel -->
+    <div class="config-card">
+        <div class="card-header">
+            <NexusIcon Name="settings" Size="20" Class="card-icon" />
+            <h2>Pipeline Diagnostics</h2>
+        </div>
+        <div class="config-grid">
+            <div class="config-item">
+                <span class="label">Rolling Daily File Sandbox Path</span>
+                <span class="value code-value">AppDataDirectory/logs/log-*.txt</span>
+            </div>
+            <div class="config-item">
+                <span class="label">Active Configuration Provider</span>
+                <span class="value">Serilog.Settings.Configuration (appsettings.json)</span>
+            </div>
+            <div class="config-item">
+                <span class="label">Native Apple Console Sink</span>
+                <span class="value">Serilog.Sinks.Debug (conditional compilation)</span>
+            </div>
+            <div class="config-item">
+                <span class="label">Native Android Logcat Sink</span>
+                <span class="value">AndroidLogcatSink (direct JNI bindings)</span>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+.serilog-demo-container {
+    padding: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    color: #e2e8f0;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+.header-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.8) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 16px;
+    padding: 2rem;
+    margin-bottom: 2rem;
+    backdrop-filter: blur(12px);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+}
+
+.header-content {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.header-icon {
+    color: #6366f1;
+    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5));
+}
+
+.header-text h1 {
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin: 0;
+    background: linear-gradient(to right, #ffffff, #94a3b8);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.subtitle {
+    margin: 0.25rem 0 0 0;
+    color: #94a3b8;
+    font-size: 0.95rem;
+}
+
+.status-badge {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.2);
+    padding: 0.5rem 1rem;
+    border-radius: 9999px;
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
+
+.status-dot.green {
+    background-color: #10b981;
+    box-shadow: 0 0 8px #10b981;
+}
+
+.status-text {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #10b981;
+}
+
+.demo-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+@@media (max-width: 768px) {
+    .demo-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.control-card {
+    background: rgba(30, 41, 59, 0.45);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 16px;
+    padding: 2rem;
+    backdrop-filter: blur(8px);
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+}
+
+.card-icon {
+    color: #6366f1;
+}
+
+.js-icon {
+    color: #eab308;
+}
+
+.card-header h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0;
+}
+
+.card-desc {
+    color: #94a3b8;
+    font-size: 0.9rem;
+    margin-bottom: 1.5rem;
+    line-height: 1.5;
+}
+
+.btn-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    border-radius: 8px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: none;
+}
+
+.btn-info {
+    background-color: rgba(99, 102, 241, 0.1);
+    color: #818cf8;
+    border: 1px solid rgba(99, 102, 241, 0.2);
+}
+
+.btn-info:hover {
+    background-color: #6366f1;
+    color: white;
+}
+
+.btn-warning {
+    background-color: rgba(245, 158, 11, 0.1);
+    color: #fbbf24;
+    border: 1px solid rgba(245, 158, 11, 0.2);
+}
+
+.btn-warning:hover {
+    background-color: #f59e0b;
+    color: white;
+}
+
+.btn-error {
+    background-color: rgba(239, 68, 68, 0.1);
+    color: #f87171;
+    border: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+.btn-error:hover {
+    background-color: #ef4444;
+    color: white;
+}
+
+.btn-js-info {
+    background-color: rgba(234, 179, 8, 0.1);
+    color: #fef08a;
+    border: 1px solid rgba(234, 179, 8, 0.2);
+}
+
+.btn-js-info:hover {
+    background-color: #eab308;
+    color: #0f172a;
+}
+
+.btn-js-error {
+    background-color: rgba(236, 72, 153, 0.1);
+    color: #fbcfe8;
+    border: 1px solid rgba(236, 72, 153, 0.2);
+}
+
+.btn-js-error:hover {
+    background-color: #ec4899;
+    color: white;
+}
+
+.config-card {
+    background: rgba(15, 23, 42, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 16px;
+    padding: 2rem;
+}
+
+.config-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+    margin-top: 1.5rem;
+}
+
+@@media (max-width: 768px) {
+    .config-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.config-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.config-item .label {
+    font-size: 0.8rem;
+    color: #64748b;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 600;
+}
+
+.config-item .value {
+    font-size: 0.95rem;
+    color: #cbd5e1;
+}
+
+.code-value {
+    font-family: 'Fira Code', 'Courier New', Courier, monospace;
+    background: rgba(0, 0, 0, 0.2);
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    word-break: break-all;
+}
+</style>
+
+@code {
+    private void LogInfo()
+    {
+        Logger.LogInformation("Structured native log triggered by user from SerilogDemo. Button: LogInfo");
+    }
+
+    private void LogWarning()
+    {
+        Logger.LogWarning("Potential warning log triggered from Blazor razor component at {Time}", DateTime.UtcNow);
+    }
+
+    private void LogError()
+    {
+        try
+        {
+            throw new InvalidOperationException("Simulated native C# operation exception triggered in Diagnostic dashboard.");
+        }
+        catch (Exception ex)
+        {
+            Logger.LogError(ex, "Captured exception successfully in native Serilog pipeline!");
+        }
+    }
+
+    private async Task TriggerJsLog()
+    {
+        await JSRuntime.InvokeVoidAsync("console.log", "Intercepted JS console statement from Blazor WebView interop trigger!");
+    }
+
+    private async Task TriggerJsException()
+    {
+        await JSRuntime.InvokeVoidAsync("eval", "throw new Error('Simulated runtime JS Exception triggered from Blazor UI button click!');");
+    }
+}

src/NexusReader.UI.Shared/Pages/Settings.razor

@@ -2,16 +2,63 @@
 @attribute [Authorize]
 
 <div class="settings-page">
-    <h1>Ustawienia</h1>
-    <p>Konfiguracja Twojego konta i preferencji czytania.</p>
+    <h1>Settings</h1>
+    <p>Configure your account and application preferences.</p>
+
+    <div class="settings-section">
+        <h2>Diagnostics & System Logs</h2>
+        <p>Inspect native logging infrastructure, trigger custom logs, and trace WebView errors.</p>
+        <a class="diag-btn" href="/serilog-demo">
+            <NexusIcon Name="cpu" Size="16" />
+            Open Serilog Diagnostics Dashboard
+        </a>
+    </div>
 </div>
 
 <style>
     .settings-page {
         padding: 2rem;
+        color: #e2e8f0;
+        font-family: 'Inter', sans-serif;
     }
     h1 {
-        margin-bottom: 1rem;
+        margin-bottom: 0.5rem;
         color: #fff;
     }
+    h2 {
+        margin-top: 2rem;
+        font-size: 1.2rem;
+        color: #fff;
+        margin-bottom: 0.5rem;
+    }
+    .settings-section {
+        background: rgba(30, 41, 59, 0.45);
+        border: 1px solid rgba(255, 255, 255, 0.05);
+        padding: 1.5rem;
+        border-radius: 12px;
+        margin-top: 1.5rem;
+    }
+    .settings-section p {
+        color: #94a3b8;
+        font-size: 0.9rem;
+        margin-bottom: 1.25rem;
+    }
+    .diag-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        background: rgba(99, 102, 241, 0.1);
+        color: #818cf8;
+        border: 1px solid rgba(99, 102, 241, 0.2);
+        padding: 0.75rem 1.25rem;
+        border-radius: 8px;
+        text-decoration: none;
+        font-size: 0.85rem;
+        font-weight: 600;
+        transition: all 0.2s ease;
+    }
+    .diag-btn:hover {
+        background: #6366f1;
+        color: white;
+    }
 </style>

src/NexusReader.UI.Shared/Services/IReaderNavigationService.cs

@@ -6,6 +6,7 @@ public interface IReaderNavigationService
     int CurrentChapterIndex { get; }
     int TotalChapters { get; }
     string ChapterTitle { get; }
+    string? PendingScrollBlockId { get; set; }
 
     event Func<Task>? OnNavigationChanged;
 

src/NexusReader.UI.Shared/Services/ISyncService.cs

@@ -7,5 +7,6 @@ public interface ISyncService
     Task<Result> InitializeAsync();
     Task<Result> UpdateProgressAsync(string pageId, Guid ebookId, double progress, string? chapterTitle, int chapterIndex);
     event Func<string, DateTime, Task> OnProgressReceived;
+    event Func<string, double, Task>? OnIngestionProgressReceived;
     Task DisposeAsync();
 }

src/NexusReader.UI.Shared/Services/IdentityService.cs

@@ -249,6 +249,25 @@ public class IdentityService : IIdentityService
         }
     }
 
+    public void ClearCache()
+    {
+        _cachedProfile = null;
+        if (OnStateInvalidated != null)
+        {
+            _ = Task.Run(async () =>
+            {
+                try
+                {
+                    await OnStateInvalidated.Invoke();
+                }
+                catch
+                {
+                    // Ignore exceptions from event handlers
+                }
+            });
+        }
+    }
+
     private class LoginResponse
     {
         public string TokenType { get; set; } = string.Empty;

src/NexusReader.UI.Shared/Services/KnowledgeCoordinator.cs

@@ -17,6 +17,8 @@ public sealed partial class KnowledgeCoordinator : IDisposable
     private readonly IReaderInteractionService _interactionService;
     private readonly ILogger<KnowledgeCoordinator> _logger;
     
+    public string CurrentFullPageContent { get; private set; } = string.Empty;
+    
     /// <summary>
     /// Raised when the knowledge graph has been updated with new data.
     /// Subscribers must return a Task to enable proper async handling.
@@ -77,6 +79,7 @@ public sealed partial class KnowledgeCoordinator : IDisposable
     {
         if (string.IsNullOrWhiteSpace(fullContent)) return;
 
+        CurrentFullPageContent = fullContent;
         LogGeneratingGraph(tenantId);
         
         await _graphService.Clear();
@@ -94,11 +97,15 @@ public sealed partial class KnowledgeCoordinator : IDisposable
                     if (OnGraphUpdated != null)
                         await OnGraphUpdated.Invoke(packet.Graph);
                     await _platformService.VibrateSuccessAsync();
+                    return;
                 }
             }
+            
+            await _graphService.SetLoading(false);
         }
         catch (Exception ex)
         {
+            await _graphService.SetLoading(false);
             LogGraphError(ex, tenantId);
         }
     }
@@ -144,6 +151,7 @@ public sealed partial class KnowledgeCoordinator : IDisposable
 
     public async Task ClearAsync()
     {
+        CurrentFullPageContent = string.Empty;
         await _graphService.Clear();
         await _quizService.SetQuiz(null, null);
     }

src/NexusReader.UI.Shared/Services/ReaderNavigationService.cs

@@ -15,6 +15,7 @@ public class ReaderNavigationService : IReaderNavigationService
     public int CurrentChapterIndex { get; private set; } = 0;
     public int TotalChapters { get; private set; } = 1;
     public string ChapterTitle { get; private set; } = "Loading...";
+    public string? PendingScrollBlockId { get; set; }
 
     public event Func<Task>? OnNavigationChanged;
 

src/NexusReader.UI.Shared/Services/SyncService.cs

@@ -16,6 +16,7 @@ public class SyncService : ISyncService, IAsyncDisposable
     private CancellationTokenSource? _debounceCts;
 
     public event Func<string, DateTime, Task>? OnProgressReceived;
+    public event Func<string, double, Task>? OnIngestionProgressReceived;
 
     public SyncService(
         HttpClient httpClient,
@@ -50,9 +51,20 @@ public class SyncService : ISyncService, IAsyncDisposable
         _hubConnection.On<string, DateTime>("ProgressUpdated", async (pageId, timestamp) =>
         {
             // Note: In the future we might want to receive ebookId and progress here too
+            if (pageId == _lastSentPageId)
+            {
+                _logger.LogDebug("[Sync] Ignoring self progress update for page {PageId}.", pageId);
+                return;
+            }
+            _lastSentPageId = pageId; // Prevent echoing back duplicate progress updates
             if (OnProgressReceived != null) await OnProgressReceived(pageId, timestamp);
         });
 
+        _hubConnection.On<string, double>("IngestionProgress", async (message, progress) =>
+        {
+            if (OnIngestionProgressReceived != null) await OnIngestionProgressReceived(message, progress);
+        });
+
         try
         {
             await _hubConnection.StartAsync();
@@ -71,6 +83,8 @@ public class SyncService : ISyncService, IAsyncDisposable
     {
         if (pageId == _lastSentPageId) return Result.Ok();
         
+        _lastSentPageId = pageId;
+        
         // Proper trailing-edge debounce
         _debounceCts?.Cancel();
         _debounceCts = new CancellationTokenSource();
@@ -86,8 +100,7 @@ public class SyncService : ISyncService, IAsyncDisposable
 
                 if (_hubConnection?.State == HubConnectionState.Connected)
                 {
-                    await _hubConnection.SendAsync("UpdateProgress", pageId, ebookId, progress, chapterTitle, token);
-                    _lastSentPageId = pageId;
+                    await _hubConnection.SendAsync("UpdateProgress", pageId, ebookId, progress, chapterTitle, chapterIndex);
                 }
             }
             catch (TaskCanceledException) { /* Ignored, user kept scrolling */ }

src/NexusReader.UI.Shared/wwwroot/js/knowledgeGraph.js

@@ -3,6 +3,110 @@ import * as d3 from 'https://esm.sh/d3@7';
 const getDisplayLabel = d => d.label.length > 20 ? d.label.substring(0, 17) + "..." : d.label;
 const getPillWidth = d => getDisplayLabel(d).length * 8 + 30;
 
+const getNodeType = d => {
+    if (d) {
+        if (d.type) {
+            const t = d.type.toLowerCase();
+            if (t === 'definition') return 'definition';
+            if (t === 'table') return 'table';
+            if (t === 'rule') return 'rule';
+            if (t === 'section') return 'section';
+        }
+        if (d.group) {
+            const g = d.group.toLowerCase();
+            if (g === 'definition') return 'definition';
+            if (g === 'table') return 'table';
+            if (g === 'rule') return 'rule';
+            if (g === 'section') return 'section';
+        }
+    }
+    return null;
+};
+
+const getNodeGroup = d => {
+    if (d && d.group) {
+        const g = d.group.toLowerCase();
+        if (g === 'bridge') return 'bridge';
+        if (g === 'current') return 'current';
+        if (g === 'concept') return 'concept';
+    }
+    return 'concept'; // fallback
+};
+
+const getCategoryStyle = d => {
+    const type = getNodeType(d);
+    const group = getNodeGroup(d);
+
+    // 1. Rule (red/coral)
+    if (type === 'rule') {
+        return {
+            color: '#ff4646',
+            fill: 'rgba(255, 70, 70, 0.1)',
+            opacity: 0.8,
+            glowKey: 'rule',
+            textColor: '#ff8b8b'
+        };
+    }
+    // 2. Definition (gold/amber)
+    if (type === 'definition') {
+        return {
+            color: '#ffb03a',
+            fill: 'rgba(255, 176, 58, 0.1)',
+            opacity: 0.8,
+            glowKey: 'definition',
+            textColor: '#ffd18c'
+        };
+    }
+    // 3. Table (purple/magenta)
+    if (type === 'table') {
+        return {
+            color: '#d946ef',
+            fill: 'rgba(217, 70, 239, 0.1)',
+            opacity: 0.8,
+            glowKey: 'table',
+            textColor: '#f5d0fe'
+        };
+    }
+    // 4. Section (blue/indigo)
+    if (type === 'section') {
+        return {
+            color: '#3b82f6',
+            fill: 'rgba(59, 130, 246, 0.1)',
+            opacity: 0.8,
+            glowKey: 'section',
+            textColor: '#93c5fd'
+        };
+    }
+    // 5. Bridge (cyan/comparison)
+    if (group === 'bridge') {
+        return {
+            color: '#06b6d4',
+            fill: 'rgba(6, 182, 212, 0.1)',
+            opacity: 0.7,
+            glowKey: 'bridge',
+            textColor: '#67e8f9'
+        };
+    }
+    // 6. Current (active/focus landmark - neon green)
+    if (group === 'current') {
+        return {
+            color: 'var(--nexus-neon)',
+            fill: 'rgba(0, 255, 153, 0.15)',
+            opacity: 0.9,
+            glowKey: 'current',
+            textColor: '#ffffff'
+        };
+    }
+    // 7. Concept / Default (subtle cool steel blue/teal)
+    return {
+        color: '#00d2c4',
+        fill: 'rgba(0, 210, 196, 0.05)',
+        opacity: 0.4,
+        glowKey: 'concept',
+        textColor: '#e0e0e0'
+    };
+};
+
 let simulation;
 let zoomBehavior;
 let svgElement;
@@ -24,8 +128,10 @@ export function mount(containerId, data, dotNetHelper) {
         .attr("height", "100%")
         .style("background", "radial-gradient(circle, #1a1a1a 0%, #121212 100%)");
 
-    // Radial gradient for Nebula effect
+    // Radial gradients for Nebula effects
     const defs = svgElement.append("defs");
+    
+    // Fallback radial gradient for legacy nebulaGlow
     const radialGradient = defs.append("radialGradient")
         .attr("id", "nebulaGlow")
         .attr("cx", "50%")
@@ -34,6 +140,26 @@ export function mount(containerId, data, dotNetHelper) {
     radialGradient.append("stop").attr("offset", "0%").attr("stop-color", "var(--nexus-neon)").attr("stop-opacity", 1);
     radialGradient.append("stop").attr("offset", "100%").attr("stop-color", "var(--nexus-neon)").attr("stop-opacity", 0);
 
+    const colors = {
+        'rule': '#ff4646',
+        'definition': '#ffb03a',
+        'table': '#d946ef',
+        'section': '#3b82f6',
+        'bridge': '#06b6d4',
+        'current': 'var(--nexus-neon)',
+        'concept': '#00d2c4'
+    };
+
+    Object.entries(colors).forEach(([key, color]) => {
+        const radGrad = defs.append("radialGradient")
+            .attr("id", `nebulaGlow-${key}`)
+            .attr("cx", "50%")
+            .attr("cy", "50%")
+            .attr("r", "50%");
+        radGrad.append("stop").attr("offset", "0%").attr("stop-color", color).attr("stop-opacity", 1);
+        radGrad.append("stop").attr("offset", "100%").attr("stop-color", color).attr("stop-opacity", 0);
+    });
+
     // Root Group for Zoom
     rootGroup = svgElement.append("g").attr("class", "zoom-containment");
 
@@ -135,21 +261,33 @@ export function updateData(data) {
         }
     });
 
+    // Sanitize links to filter out any references to non-existent nodes
+    const nodeIds = new Set(data.nodes.map(n => n.id));
+    const validLinks = (data.links || []).filter(l => {
+        const srcId = typeof l.source === 'object' ? l.source.id : l.source;
+        const tgtId = typeof l.target === 'object' ? l.target.id : l.target;
+        return nodeIds.has(srcId) && nodeIds.has(tgtId);
+    });
+
     // Update Links
     link = rootGroup.select(".links-layer")
         .selectAll("path")
-        .data(data.links, d => d.source + "-" + d.target + "-" + d.relationType)
+        .data(validLinks, d => {
+            const srcId = typeof d.source === 'object' ? d.source.id : d.source;
+            const tgtId = typeof d.target === 'object' ? d.target.id : d.target;
+            return srcId + "-" + tgtId + "-" + d.type;
+        })
         .join(
             enter => enter.append("path")
                 .attr("stroke", d => {
-                    if (d.relationType === 'Defines') return 'var(--nexus-accent)';
-                    if (d.relationType === 'Next') return 'rgba(255,255,255,0.2)';
-                    if (d.relationType === 'Contains') return 'var(--nexus-neon)';
+                    if (d.type === 'Defines' || d.type === 'maps_to') return 'var(--nexus-accent, #00ffaa)';
+                    if (d.type === 'Next' || d.type === 'relates_to') return 'rgba(255,255,255,0.2)';
+                    if (d.type === 'Contains' || d.type === 'contains') return 'var(--nexus-neon)';
                     return 'rgba(255,255,255,0.1)';
                 })
                 .attr("fill", "none")
-                .attr("stroke-width", d => d.relationType === 'Defines' ? 2 : 1)
-                .attr("stroke-dasharray", d => d.relationType === 'References' ? "5,5" : "0")
+                .attr("stroke-width", d => (d.type === 'Defines' || d.type === 'maps_to') ? 2 : 1)
+                .attr("stroke-dasharray", d => d.type === 'References' ? "5,5" : "0")
                 .style("opacity", 0)
                 .call(enter => enter.transition().duration(500).style("opacity", 1)),
             update => update,
@@ -174,13 +312,8 @@ export function updateData(data) {
 
                 g.append("circle")
                     .attr("r", 30)
-                    .attr("fill", d => {
-                        if (d.type === 'Definition') return 'var(--nexus-accent)';
-                        if (d.type === 'Table') return 'var(--nexus-neon)';
-                        if (d.type === 'Rule') return '#ff4444';
-                        return "url(#nebulaGlow)";
-                    })
-                    .attr("opacity", d => d.group === 'current' ? 0.6 : 0.2);
+                    .attr("fill", d => `url(#nebulaGlow-${getCategoryStyle(d).glowKey})`)
+                    .attr("opacity", d => getCategoryStyle(d).opacity);
 
                 g.append("rect")
                     .attr("class", "node-pill")
@@ -189,23 +322,20 @@ export function updateData(data) {
                     .attr("width", d => getPillWidth(d))
                     .attr("height", 30)
                     .attr("rx", 15)
-                    .attr("fill", "rgba(20, 20, 20, 0.9)")
-                    .attr("stroke", d => {
-                        if (d.type === 'Definition') return 'var(--nexus-accent)';
-                        if (d.type === 'Rule') return '#ff4444';
-                        return "rgba(255, 255, 255, 0.1)";
-                    })
-                    .attr("stroke-width", 1);
+                    .attr("fill", "rgba(20, 20, 20, 0.95)")
+                    .attr("stroke", d => getCategoryStyle(d).color)
+                    .attr("stroke-width", d => getNodeGroup(d) === 'current' ? 2 : 1.2);
 
                 g.append("text")
                     .text(d => getDisplayLabel(d))
                     .attr("text-anchor", "middle")
                     .attr("y", 5)
-                    .attr("fill", d => d.type === 'Definition' ? 'var(--nexus-accent)' : '#ccc')
-                    .attr("font-size", "0.8rem");
+                    .attr("fill", d => getCategoryStyle(d).textColor)
+                    .attr("font-size", "0.8rem")
+                    .attr("font-weight", d => getNodeGroup(d) === 'current' ? '600' : 'normal');
 
                 g.append("title")
-                    .text(d => d.label);
+                    .text(d => d.description ? `${d.label}\n\n${d.description}` : d.label);
                 
                 g.transition().duration(500).style("opacity", 1);
                 
@@ -216,7 +346,7 @@ export function updateData(data) {
         );
 
     simulation.nodes(data.nodes);
-    simulation.force("link").links(data.links);
+    simulation.force("link").links(validLinks);
     simulation.alpha(0.5).restart();
 
     // Trigger zoom to fit after a short delay to allow simulation to settle
@@ -398,6 +528,15 @@ export function clear() {
             }
             simulation.nodes([]);
         }
+
+        // Reset selections
+        link = null;
+        node = null;
+
+        // Reset D3 zoom transform to clean identity state
+        if (svgElement && zoomBehavior) {
+            svgElement.call(zoomBehavior.transform, d3.zoomIdentity);
+        }
     } catch (e) {
         console.warn("Failed to clear force simulation safely:", e);
     }