refactor: redesign selection AI panel to a compact toolbar with independent summary and quiz actions and improved coordinate calculation

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

@@ -3,49 +3,40 @@
 @using NexusReader.Application.DTOs.AI
 @inject KnowledgeCoordinator Coordinator
 @inject IReaderInteractionService InteractionService
+@inject IQuizStateService QuizService
 
 @if (IsVisible)
 {
-    <div class="selection-ai-panel expanded @(PositionBelow ? "below" : "")" style="@PanelStyle">
-        <div class="ai-bubble">
-            <div class="ai-avatar">
-                <div class="avatar-ring"></div>
-                <NexusIcon Name="robot" Size="48" Class="neon-pulse" />
-                <div class="avatar-label">
-                    <span class="name">E-Czytnik</span>
-                    <span class="role">Asystent AI</span>
-                </div>
-            </div>
-            <div class="ai-content">
-                @if (IsLoading)
-                {
-                    <div class="loading-state">
-                        <div class="shimmer">Skanowanie fragmentu...</div>
-                    </div>
-                }
-                else if (Packet != null)
-                {
-                    <div class="summary-box">
-                        <NexusTypography Variant="NexusTypography.TypographyVariant.UI">@Packet.Summary</NexusTypography>
-                    </div>
-                    <div class="ai-actions">
-                        <button class="action-btn neon-border" @onclick="GenerateFullQuiz">Generuj Quiz dla całej strony</button>
-                        <button class="action-btn ghost" @onclick="CloseAsync">Zamknij</button>
-                    </div>
-                }
-                else
-                {
-                    <div class="summary-box">
-                        <NexusTypography Variant="NexusTypography.TypographyVariant.UI">Wykryto ciekawy fragment! Czy chcesz, abym wygenerował podsumowanie lub quiz z tego rozdziału?</NexusTypography>
-                    </div>
-                    <div class="ai-actions">
-                        <button class="action-btn neon-border" @onclick="RequestSummary">Podsumuj zaznaczenie</button>
-                        <button class="action-btn ghost" @onclick="CloseAsync">Pomiń</button>
-                    </div>
-                }
-            </div>
-            <div class="bubble-pointer"></div>
-        </div>
+    <div class="selection-ai-panel @(PositionBelow ? "below" : "")" style="@PanelStyle">
+        <button class="toolbar-btn primary @(IsLoadingSummary ? "loading" : "") @(IsAnyLoading ? "disabled" : "")" 
+                disabled="@IsAnyLoading" 
+                @onclick="RequestSummaryAsync">
+            @if (IsLoadingSummary)
+            {
+                <span class="spinner-inline"></span>
+                <span class="btn-text">Podsumowywanie...</span>
+            }
+            else
+            {
+                <NexusIcon Name="book-open" Size="14" Class="btn-icon" />
+                <span class="btn-text">Podsumuj</span>
+            }
+        </button>
+        <div class="toolbar-divider"></div>
+        <button class="toolbar-btn secondary @(IsLoadingQuiz ? "loading" : "") @(IsAnyLoading ? "disabled" : "")" 
+                disabled="@IsAnyLoading" 
+                @onclick="GenerateQuizAsync">
+            @if (IsLoadingQuiz)
+            {
+                <span class="spinner-inline"></span>
+                <span class="btn-text">Generowanie...</span>
+            }
+            else
+            {
+                <NexusIcon Name="target" Size="14" Class="btn-icon" />
+                <span class="btn-text">Quiz</span>
+            }
+        </button>
     </div>
 }
 
@@ -56,47 +47,89 @@
     [Parameter] public string FullPageContent { get; set; } = string.Empty;
 
     private bool IsVisible => !string.IsNullOrEmpty(SelectedText) && Coordinates != null;
-    private bool IsLoading = false;
-    private KnowledgePacket? Packet;
+    private bool IsLoadingSummary = false;
+    private bool IsLoadingQuiz = false;
+    private bool IsAnyLoading => IsLoadingSummary || IsLoadingQuiz;
     private bool PositionBelow => Coordinates != null && Coordinates.Top < 250;
 
     protected override void OnParametersSet()
     {
         Console.WriteLine($"[SelectionAiPanel] Parameters set. SelectedText: {SelectedText.Length} chars, Coordinates: {Coordinates?.Top}, PositionBelow: {PositionBelow}");
-        // Reset packet when selection changes
-        Packet = null;
+        // Reset loading states when parameters change
+        IsLoadingSummary = false;
+        IsLoadingQuiz = false;
     }
 
     private string PanelStyle => Coordinates != null 
         ? string.Create(System.Globalization.CultureInfo.InvariantCulture, 
-            $"top: {(PositionBelow ? Coordinates.Bottom + 8 : Coordinates.Top - 8):F1}px !important; " +
-            $"left: {Math.Clamp(Coordinates.Left + Coordinates.Width / 2, 280, 1600):F1}px !important; " +
+            $"top: {(PositionBelow ? Coordinates.Bottom + 16 : Coordinates.Top - 16):F1}px !important; " +
+            $"left: {Math.Max(140.0, Math.Min(Coordinates.ViewportWidth - 140.0, Coordinates.Left + Coordinates.Width / 2.0)):F1}px !important; " +
             $"transform: translate(-50%, {(PositionBelow ? "0" : "-100%")}) !important;")
         : "";
 
-    private async Task RequestSummary()
+    private async Task RequestSummaryAsync()
     {
-        IsLoading = true;
-        var contextPrompt = !string.IsNullOrWhiteSpace(FullPageContent) 
-            ? $"ANALYSIS CONTEXT (Full Page Content):\n{FullPageContent}\n\nUSER SELECTION TO SUMMARIZE:\n" 
-            : "";
-        
-        var result = await Coordinator.RequestSummaryAndQuizAsync($"{contextPrompt}{SelectedText}");
-        Packet = result.IsSuccess ? result.Value : null;
-        IsLoading = false;
+        if (IsAnyLoading) return;
+        IsLoadingSummary = true;
+        StateHasChanged();
+
+        try
+        {
+            var contextPrompt = !string.IsNullOrWhiteSpace(FullPageContent) 
+                ? $"ANALYSIS CONTEXT (Full Page Content):\n{FullPageContent}\n\nUSER SELECTION TO SUMMARIZE:\n" 
+                : "";
+            
+            var result = await Coordinator.RequestSummaryAndQuizAsync($"{contextPrompt}{SelectedText}");
+            if (result.IsSuccess)
+            {
+                await CloseAsync();
+                await InteractionService.RequestAssistant();
+            }
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"[SelectionAiPanel] Error requesting summary: {ex.Message}");
+        }
+        finally
+        {
+            IsLoadingSummary = false;
+            StateHasChanged();
+        }
     }
 
-    private async Task GenerateFullQuiz()
+    private async Task GenerateQuizAsync()
     {
-        IsLoading = true;
-        await Coordinator.RequestSummaryAndQuizAsync(FullPageContent);
-        IsLoading = false;
-        await CloseAsync();
+        if (IsAnyLoading) return;
+        IsLoadingQuiz = true;
+        StateHasChanged();
+
+        try
+        {
+            var contextPrompt = !string.IsNullOrWhiteSpace(FullPageContent) 
+                ? $"ANALYSIS CONTEXT (Full Page Content):\n{FullPageContent}\n\nUSER SELECTION TO SUMMARIZE:\n" 
+                : "";
+            
+            var result = await Coordinator.RequestSummaryAndQuizAsync($"{contextPrompt}{SelectedText}");
+            if (result.IsSuccess)
+            {
+                await CloseAsync();
+                await QuizService.RequestQuiz(BlockId);
+            }
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"[SelectionAiPanel] Error generating quiz: {ex.Message}");
+        }
+        finally
+        {
+            IsLoadingQuiz = false;
+            StateHasChanged();
+        }
     }
 
     private async Task CloseAsync()
     {
-        Packet = null;
         await InteractionService.NotifyTextSelected(string.Empty, string.Empty, null!);
     }
 }
+

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

@@ -1,158 +1,111 @@
 .selection-ai-panel {
     position: fixed;
     z-index: 9999;
-    width: 550px;
-    max-width: 90vw;
-    animation: fadeInScale 0.2s ease-out;
+    display: flex;
+    align-items: center;
+    background: rgba(24, 24, 28, 0.85);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.4);
+    padding: 4px 6px;
+    gap: 4px;
     pointer-events: auto;
+    user-select: none;
+    animation: fadeInScale 0.18s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 @keyframes fadeInScale {
-    from { opacity: 0; transform: translate(-50%, -90%) scale(0.95); }
-    to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
+    from {
+        opacity: 0;
+        transform: translate(-50%, -80%) scale(0.96);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -100%) scale(1);
+    }
 }
 
-.ai-bubble {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    gap: 1.5rem;
-    padding: 1.5rem;
-    background: rgba(18, 18, 18, 0.95);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 16px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-    color: #fff;
+.selection-ai-panel.below {
+    animation: fadeInScaleBelow 0.18s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.ai-avatar {
+@keyframes fadeInScaleBelow {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -20%) scale(0.96);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, 0) scale(1);
+    }
+}
+
+.toolbar-btn {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    gap: 0.5rem;
-    min-width: 100px;
-}
-
-.avatar-label {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-}
-
-.avatar-label .name {
+    gap: 6px;
+    padding: 6px 12px;
+    background: transparent;
+    border: none;
+    border-radius: 6px;
+    color: #e4e4e7; /* zinc-200 */
     font-size: 0.8rem;
-    font-weight: 600;
-    color: #fff;
-}
-
-.avatar-label .role {
-    font-size: 0.7rem;
-    opacity: 0.6;
-}
-
-.neon-pulse {
-    color: #00ff99;
-    filter: drop-shadow(0 0 8px #00ff99);
-    animation: pulse 2s infinite ease-in-out;
-}
-
-@keyframes pulse {
-    0% { transform: scale(1); filter: drop-shadow(0 0 8px #00ff99); }
-    50% { transform: scale(1.05); filter: drop-shadow(0 0 15px #00ff99); }
-    100% { transform: scale(1); filter: drop-shadow(0 0 8px #00ff99); }
-}
-
-.ai-content {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    justify-content: center;
-}
-
-.summary-box {
-    font-size: 0.95rem;
-    line-height: 1.5;
-    color: #e0e0e0;
-    max-height: 40vh;
-    overflow-y: auto;
-    padding-right: 8px;
-}
-
-.summary-box::-webkit-scrollbar {
-    width: 4px;
-}
-
-.summary-box::-webkit-scrollbar-thumb {
-    background: rgba(0, 255, 153, 0.3);
-    border-radius: 2px;
-}
-
-.ai-actions {
-    display: flex;
-    gap: 1rem;
-}
-
-.action-btn {
-    padding: 0.5rem 1.2rem;
-    border-radius: 20px;
-    font-size: 0.85rem;
+    font-weight: 500;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    white-space: nowrap;
     font-family: inherit;
 }
 
-.action-btn.ghost {
-    background: transparent;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    color: #aaa;
+.toolbar-btn:hover:not(.disabled) {
+    background: rgba(255, 255, 255, 0.05);
+    color: #ffffff;
 }
 
-.action-btn.neon-border {
-    background: rgba(0, 255, 153, 0.1);
-    border: 1px solid #00ff99;
-    color: #00ff99;
+.toolbar-btn.primary {
+    color: var(--nexus-neon, #00ff99);
 }
 
-.action-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 255, 153, 0.2);
+.toolbar-btn.primary:hover:not(.disabled) {
+    background: rgba(0, 255, 153, 0.08);
+    box-shadow: 0 0 12px rgba(0, 255, 153, 0.15);
 }
 
-.bubble-pointer {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0;
-    height: 0;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
+.toolbar-btn.disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+    pointer-events: none;
 }
 
-.selection-ai-panel:not(.below) .bubble-pointer {
-    bottom: -10px;
-    border-top: 10px solid rgba(18, 18, 18, 0.95);
+.toolbar-divider {
+    width: 1px;
+    height: 16px;
+    background: rgba(255, 255, 255, 0.1);
 }
 
-.selection-ai-panel.below .bubble-pointer {
-    top: -10px;
-    border-bottom: 10px solid rgba(18, 18, 18, 0.95);
+.btn-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
 }
 
-.loading-state {
-    padding: 1rem;
+.spinner-inline {
+    width: 12px;
+    height: 12px;
+    border: 2px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    display: inline-block;
+    flex-shrink: 0;
 }
 
-.shimmer {
-    background: linear-gradient(90deg, transparent, rgba(0, 255, 153, 0.2), transparent);
-    background-size: 200% 100%;
-    animation: shimmer 1.5s infinite;
-    padding: 0.5rem;
-    border-radius: 4px;
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
 }
 
-@keyframes shimmer {
-    from { background-position: 200% 0; }
-    to { background-position: -200% 0; }
-}

src/NexusReader.UI.Shared/Models/ReaderModels.cs

@@ -15,7 +15,7 @@ public enum MobileReaderTab
 /// <summary>
 /// Screen coordinates for text selection popup positioning.
 /// </summary>
-public record SelectionCoordinates(double Top, double Left, double Width, double Height, double Bottom);
+public record SelectionCoordinates(double Top, double Left, double Width, double Height, double Bottom, double ViewportWidth);
 
 /// <summary>
 /// Represents a message in the KM-RAG global and mobile intelligence chat threads.

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

@@ -17,19 +17,26 @@ export function initSelectionListener(dotNetHelper, container) {
             const blockNode = node.closest('[id]');
 
                 if (blockNode) {
-                    const rect = range.getBoundingClientRect();
+                    const rects = range.getClientRects();
+                    const firstRect = rects && rects.length > 0 ? rects[0] : null;
+                    const lastRect = rects && rects.length > 0 ? rects[rects.length - 1] : null;
+                    const combinedRect = range.getBoundingClientRect();
 
-                    console.log("[SelectionHandler] Selection at screen coords:", rect.top, rect.left);
+                    const topVal = firstRect ? firstRect.top : combinedRect.top;
+                    const bottomVal = lastRect ? lastRect.bottom : combinedRect.bottom;
+
+                    console.log("[SelectionHandler] Selection coords (first/last/combined):", topVal, bottomVal, combinedRect.left);
 
                     dotNetHelper.invokeMethodAsync('HandleTextSelected', 
                         text, 
                         blockNode.id, 
                         { 
-                            Top: rect.top, 
-                            Left: rect.left,
-                            Width: rect.width,
-                            Height: rect.height,
-                            Bottom: rect.bottom
+                            Top: topVal, 
+                            Left: combinedRect.left,
+                            Width: combinedRect.width,
+                            Height: combinedRect.height,
+                            Bottom: bottomVal,
+                            ViewportWidth: window.innerWidth
                         });
                 }
         } else {