Test

Chrono/Web/Components/CardDialog.razor

@@ -0,0 +1,454 @@
+@using System.Text.RegularExpressions
+@using Microsoft.AspNetCore.Components.Rendering
+@namespace Chrono.Components
+
+@if (Card != null)
+{
+    <div class="modal-backdrop" @onclick="HandleBackdropClick"></div>
+    <div class="card-detail @(!HasImage ? "card-detail-noimg" : "")">
+        <button class="detail-close" @onclick="HandleClose"><i class="bi bi-x-lg"></i></button>
+        <div class="detail-layout @(!HasImage ? "layout-noimg" : "")">
+            @if (HasImage)
+            {
+                <div class="detail-image">
+                    <img src="@Card.ImagePath" alt="@Card.Name"
+                         onerror="this.src='@Card.SmallImagePath';this.onerror=null;"/>
+                </div>
+            }
+            <div class="detail-info">
+                <div class="detail-header">
+                    <h2>@Card.Name</h2>
+                    <div class="detail-meta">
+                        <span class="meta-badge category @Card.Category?.ToLowerInvariant()">@Card.Category</span>
+                        @if (Card.Cost.HasValue)
+                        {
+                            <span class="meta-badge cost"><i class="bi bi-lightning-fill"></i> @Card.Cost</span>
+                        }
+                        @if (Card.Attack.HasValue)
+                        {
+                            <span class="meta-badge attack"><i class="bi bi-crosshair"></i> @Card.Attack</span>
+                        }
+                        @if (Card.Health.HasValue)
+                        {
+                            <span class="meta-badge health"><i class="bi bi-heart-fill"></i> @Card.Health</span>
+                        }
+                        @if (Card.Speed != null)
+                        {
+                            <span class="meta-badge speed"><i class="bi bi-wind"></i> @Card.Speed</span>
+                        }
+                    </div>
+                </div>
+
+                @if (Card.Syndicate != null)
+                {
+                    <div class="detail-field">
+                        <span class="field-label"><i class="bi bi-diagram-3-fill"></i> Syndicate</span>
+                        <span class="field-value">@Card.Syndicate</span>
+                    </div>
+                }
+
+                @if (Card.Description != null)
+                {
+                    <div class="detail-field description">
+                        <span class="field-label"><i class="bi bi-chat-quote-fill"></i></span>
+                        <div class="markdown-content">
+                            @RenderDescription(Card.Description)
+                        </div>
+                    </div>
+                }
+
+                @if (Card.Set != null)
+                {
+                    <div class="detail-field">
+                        <span class="field-label"><i class="bi bi-collection"></i> Set</span>
+                        <span class="field-value">@Card.Set</span>
+                    </div>
+                }
+
+                @if (Card.Archetypes is { Count: > 0 })
+                {
+                    <div class="detail-field">
+                        <span class="field-label"><i class="bi bi-layers-fill"></i> Archetypes</span>
+                        <span class="field-value">@string.Join(", ", Card.Archetypes)</span>
+                    </div>
+                }
+
+                @if (Card.ImmortalizeWhen != null)
+                {
+                    <div class="detail-field">
+                        <span class="field-label"><i class="bi bi-star-fill"></i> Immortalize When</span>
+                        <span class="field-value">@Card.ImmortalizeWhen</span>
+                    </div>
+                }
+
+                @if (Card.HasImmortalize)
+                {
+                    <div class="detail-field">
+                        <span class="field-label"><i class="bi bi-arrow-right-circle-fill"></i> Immortalizes To</span>
+                        <span class="field-value">
+                            @foreach (var name in Card.ImmortalizeTo!)
+                            {
+                                var targetName = name;
+                                var target = LookupCard(targetName);
+                                if (target != null)
+                                {
+                                    <button class="inline-card-btn"
+                                            @onclick="() => Navigate(targetName)">@targetName</button>
+                                }
+                                else
+                                {
+                                    @targetName
+                                }
+                            }
+                        </span>
+                    </div>
+                }
+
+                @if (Card.ImmortalizeFrom != null)
+                {
+                    <div class="detail-field">
+                        <span class="field-label"><i class="bi bi-arrow-left-circle-fill"></i> Immortalizes From</span>
+                        <span class="field-value">
+                            @{
+                                var fromCard = LookupCard(Card.ImmortalizeFrom);
+                                if (fromCard != null)
+                                {
+                                    <button class="inline-card-btn"
+                                            @onclick="() => Navigate(Card.ImmortalizeFrom)">@Card.ImmortalizeFrom</button>
+                                }
+                                else
+                                {
+                                    @Card.ImmortalizeFrom
+                                }
+                            }
+                        </span>
+                    </div>
+                }
+
+                @if (ShowNotes && Card.IsAgent)
+                {
+                    <div class="detail-field note">
+                        <span class="field-label"><i class="bi bi-pencil-fill"></i> Personal Note</span>
+                        <textarea class="form-control note-input" @bind="currentNote" @onblur="SaveNote"
+                                  placeholder="Add a private note about this agent..."></textarea>
+                        @if (isSaving)
+                        {
+                            <span class="saving-indicator">Saving...</span>
+                        }
+                    </div>
+                }
+            </div>
+        </div>
+    </div>
+}
+
+@code {
+    [Parameter] public CardData? Card { get; set; }
+    [Parameter] public EventCallback OnClose { get; set; }
+    [Parameter] public EventCallback<string> OnNavigate { get; set; }
+    [Parameter] public bool ShowNotes { get; set; }
+
+    [Inject] private HttpClient Http { get; set; } = default!;
+
+    private bool HasImage => Card?.ImageFile is { Length: > 0 } && Card.ImageFile != "placeholder.png";
+
+    private string currentNote = "";
+    private bool isSaving;
+
+    protected override void OnParametersSet()
+    {
+        if (Card != null && Card.IsAgent)
+        {
+            currentNote = "";
+            _ = LoadNote();
+        }
+    }
+
+    private async Task LoadNote()
+    {
+        if (Card == null || !Card.IsAgent) return;
+        try
+        {
+            var note = await Http.GetFromJsonAsync<CardNote>($"api/notes/{Uri.EscapeDataString(Card.Name)}");
+            currentNote = note?.Note ?? "";
+        }
+        catch
+        {
+            currentNote = "";
+        }
+    }
+
+    private async Task SaveNote()
+    {
+        if (Card == null || !Card.IsAgent) return;
+
+        isSaving = true;
+        try
+        {
+            await Http.PostAsJsonAsync("api/notes", new CardNote { CardName = Card.Name, Note = currentNote });
+        }
+        catch
+        {
+        }
+        finally
+        {
+            isSaving = false;
+        }
+    }
+
+    private void HandleClose()
+    {
+        _ = OnClose.InvokeAsync();
+    }
+
+    private void HandleBackdropClick()
+    {
+        _ = OnClose.InvokeAsync();
+    }
+
+    private void Navigate(string name)
+    {
+        var card = LookupCard(name);
+        if (card != null)
+        {
+            Card = card;
+            _ = LoadNote();
+            StateHasChanged();
+        }
+        else
+        {
+            _ = OnNavigate.InvokeAsync(name);
+        }
+    }
+
+    private static CardData? LookupCard(string cardName)
+    {
+        return CardDatabase.Cards.FirstOrDefault(c =>
+            string.Equals(c.Name, cardName, StringComparison.OrdinalIgnoreCase));
+    }
+
+    private static DocData? LookupDoc(string title)
+    {
+        return DocDatabase.Docs.FirstOrDefault(d =>
+            string.Equals(d.Title, title, StringComparison.OrdinalIgnoreCase));
+    }
+
+    private RenderFragment RenderDescription(string content)
+    {
+        return builder =>
+        {
+            if (string.IsNullOrWhiteSpace(content)) return;
+
+            var seq = 0;
+            var lines = content.Split(['\r', '\n'], StringSplitOptions.None);
+            var inList = false;
+            var tableLines = new List<string>();
+            var inTable = false;
+
+            for (var i = 0; i < lines.Length; i++)
+            {
+                var line = lines[i];
+                var trimmedLine = line.Trim();
+
+                // Handle Tables
+                if (trimmedLine.StartsWith("|") && trimmedLine.EndsWith("|"))
+                {
+                    inTable = true;
+                    tableLines.Add(trimmedLine);
+                    continue;
+                }
+
+                if (inTable)
+                {
+                    RenderTable(builder, ref seq, tableLines);
+                    tableLines.Clear();
+                    inTable = false;
+                }
+
+                // Handle Lists
+                if (trimmedLine.StartsWith("- ") || trimmedLine.StartsWith("* "))
+                {
+                    if (!inList)
+                    {
+                        builder.OpenElement(seq++, "ul");
+                        inList = true;
+                    }
+
+                    var isCardListItem = trimmedLine.Contains("[[") && trimmedLine.Contains("]]");
+                    builder.OpenElement(seq++, "li");
+                    RenderInlines(builder, ref seq, trimmedLine[2..], true);
+                    builder.CloseElement();
+                    continue;
+                }
+
+                if (inList)
+                {
+                    builder.CloseElement(); // Close ul
+                    inList = false;
+                }
+
+                // Handle Headings
+                if (trimmedLine.StartsWith("### "))
+                {
+                    builder.OpenElement(seq++, "h4");
+                    RenderInlines(builder, ref seq, trimmedLine[4..], false);
+                    builder.CloseElement();
+                }
+                else if (trimmedLine.StartsWith("## "))
+                {
+                    builder.OpenElement(seq++, "h3");
+                    RenderInlines(builder, ref seq, trimmedLine[3..], false);
+                    builder.CloseElement();
+                }
+                else if (trimmedLine.StartsWith("# "))
+                {
+                    builder.OpenElement(seq++, "h2");
+                    RenderInlines(builder, ref seq, trimmedLine[2..], false);
+                    builder.CloseElement();
+                }
+                else if (!string.IsNullOrWhiteSpace(trimmedLine))
+                {
+                    builder.OpenElement(seq++, "p");
+                    RenderInlines(builder, ref seq, line, false);
+                    builder.CloseElement();
+                }
+            }
+
+            if (inTable) RenderTable(builder, ref seq, tableLines);
+            if (inList) builder.CloseElement();
+        };
+    }
+
+    private void RenderTable(RenderTreeBuilder builder, ref int seq, List<string> lines)
+    {
+        if (lines.Count < 2) return;
+
+        builder.OpenElement(seq++, "div");
+        builder.AddAttribute(seq++, "class", "table-responsive");
+        builder.OpenElement(seq++, "table");
+        builder.AddAttribute(seq++, "class", "markdown-table");
+
+        var hasHeader = lines.Count > 2 && lines[1].Contains("---");
+        var startIdx = 0;
+
+        if (hasHeader)
+        {
+            builder.OpenElement(seq++, "thead");
+            builder.OpenElement(seq++, "tr");
+            var cells = lines[0].Split('|', StringSplitOptions.RemoveEmptyEntries);
+            foreach (var cell in cells)
+            {
+                builder.OpenElement(seq++, "th");
+                RenderInlines(builder, ref seq, cell.Trim(), false);
+                builder.CloseElement();
+            }
+
+            builder.CloseElement();
+            builder.CloseElement();
+            startIdx = 2;
+        }
+
+        builder.OpenElement(seq++, "tbody");
+        for (var i = startIdx; i < lines.Count; i++)
+        {
+            if (i == 1 && hasHeader) continue;
+            builder.OpenElement(seq++, "tr");
+            var cells = lines[i].Split('|', StringSplitOptions.RemoveEmptyEntries);
+            foreach (var cell in cells)
+            {
+                builder.OpenElement(seq++, "td");
+                RenderInlines(builder, ref seq, cell.Trim(), false);
+                builder.CloseElement();
+            }
+
+            builder.CloseElement();
+        }
+
+        builder.CloseElement();
+        builder.CloseElement();
+        builder.CloseElement();
+    }
+
+    private void RenderInlines(RenderTreeBuilder builder, ref int seq, string text, bool renderAsImage)
+    {
+        var remaining = text;
+
+        while (!string.IsNullOrEmpty(remaining))
+        {
+            var boldMatch = Regex.Match(remaining, @"\*\*(.*?)\*\*");
+            var italicMatch = Regex.Match(remaining, @"\*(.*?)\*");
+            var cardMatch = Regex.Match(remaining, @"\[\[(.*?)\]\]");
+
+            var bestIdx = int.MaxValue;
+            Match? bestMatch = null;
+            var matchType = 0; // 1: bold, 2: italic, 3: card
+
+            if (boldMatch.Success && boldMatch.Index < bestIdx)
+            {
+                bestIdx = boldMatch.Index;
+                bestMatch = boldMatch;
+                matchType = 1;
+            }
+
+            if (italicMatch.Success && italicMatch.Index < bestIdx)
+            {
+                bestIdx = italicMatch.Index;
+                bestMatch = italicMatch;
+                matchType = 2;
+            }
+
+            if (cardMatch.Success && cardMatch.Index < bestIdx)
+            {
+                bestIdx = cardMatch.Index;
+                bestMatch = cardMatch;
+                matchType = 3;
+            }
+
+            if (bestMatch != null)
+            {
+                if (bestIdx > 0)
+                    builder.AddContent(seq++, remaining[..bestIdx]);
+
+                var innerText = bestMatch.Groups[1].Value;
+
+                if (matchType == 1) // Bold
+                {
+                    builder.OpenElement(seq++, "strong");
+                    builder.AddContent(seq++, innerText);
+                    builder.CloseElement();
+                }
+                else if (matchType == 2) // Italic
+                {
+                    builder.OpenElement(seq++, "em");
+                    builder.AddContent(seq++, innerText);
+                    builder.CloseElement();
+                }
+                else if (matchType == 3) // Card Link / Doc Link
+                {
+                    var card = LookupCard(innerText);
+                    var doc = LookupDoc(innerText);
+                    if (card != null || doc != null)
+                    {
+                        builder.OpenElement(seq++, "button");
+                        builder.AddAttribute(seq++, "class", "inline-card-btn");
+                        builder.AddAttribute(seq++, "onclick", EventCallback.Factory.Create(this, () => Navigate(innerText)));
+                        builder.AddContent(seq++, innerText);
+                        builder.CloseElement();
+                    }
+                    else
+                    {
+                        builder.AddContent(seq++, innerText);
+                    }
+                }
+
+                remaining = remaining[(bestIdx + bestMatch.Length)..];
+            }
+            else
+            {
+                builder.AddContent(seq++, remaining);
+                remaining = "";
+            }
+        }
+    }
+
+}

Chrono/Web/Components/CardDialog.razor.css

@@ -0,0 +1,312 @@
+.modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1060;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+    animation: fade-in 0.2s ease-out;
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.card-detail {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1070;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 0;
+    max-width: 850px;
+    width: 92vw;
+    max-height: 88vh;
+    overflow-y: auto;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+    color: var(--text-primary);
+    animation: detail-enter 0.25s ease-out;
+}
+
+@keyframes detail-enter {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(0.92);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+.detail-close {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: var(--text-primary);
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 0.8rem;
+    transition: all var(--transition);
+}
+
+.detail-close:hover {
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.detail-layout {
+    display: flex;
+    gap: 1.5rem;
+    padding: 1.5rem;
+}
+
+.detail-image {
+    flex: 0 0 320px;
+}
+
+.detail-image img {
+    width: 100%;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    max-height: 80vh;
+    object-fit: contain;
+}
+
+/* ── No-image layout ── */
+.card-detail-noimg {
+    max-width: 460px;
+}
+
+.layout-noimg {
+    justify-content: center;
+}
+
+.detail-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.detail-header {
+    margin-bottom: 1rem;
+}
+
+.detail-header h2 {
+    margin: 0 0 0.75rem;
+    font-size: 1.4rem;
+    line-height: 1.3;
+}
+
+.detail-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
+
+.meta-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0.25rem 0.6rem;
+    border-radius: 100px;
+    background: var(--bg-hover);
+    color: var(--text-secondary);
+    border: 1px solid var(--border);
+}
+
+.meta-badge.category.agent,
+.meta-badge.category.immortalized {
+    background: rgba(79, 195, 247, 0.15);
+    color: #4fc3f7;
+    border-color: rgba(79, 195, 247, 0.3);
+}
+
+.meta-badge.category.spell {
+    background: rgba(206, 147, 216, 0.15);
+    color: #ce93d8;
+    border-color: rgba(206, 147, 216, 0.3);
+}
+
+.meta-badge.cost {
+    background: rgba(255, 215, 0, 0.12);
+    color: var(--gold);
+    border-color: rgba(255, 215, 0, 0.3);
+}
+
+.meta-badge.attack {
+    background: rgba(239, 83, 80, 0.15);
+    color: #ef5350;
+    border-color: rgba(239, 83, 80, 0.3);
+}
+
+.meta-badge.health {
+    background: rgba(102, 187, 106, 0.15);
+    color: #66bb6a;
+    border-color: rgba(102, 187, 106, 0.3);
+}
+
+.meta-badge.speed {
+    background: rgba(79, 195, 247, 0.12);
+    color: #4fc3f7;
+    border-color: rgba(79, 195, 247, 0.3);
+}
+
+.detail-field {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.6rem;
+    font-size: 0.88rem;
+    line-height: 1.45;
+}
+
+.detail-field.description {
+    padding: 0;
+    margin-top: 0.25rem;
+}
+
+.field-label {
+    flex-shrink: 0;
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    font-weight: 500;
+    min-width: 7.5rem;
+    display: flex;
+    align-items: flex-start;
+    gap: 0.3rem;
+}
+
+.detail-field.description .field-label {
+    min-width: auto;
+    color: var(--accent);
+}
+
+.field-value {
+    color: var(--text-secondary);
+}
+
+.markdown-content {
+    color: var(--text-primary);
+    line-height: 1.6;
+}
+
+.markdown-content p {
+    margin-bottom: 0.75rem;
+}
+
+.markdown-content ul {
+    margin-bottom: 0.75rem;
+    padding-left: 1.25rem;
+}
+
+.markdown-content li {
+    margin-bottom: 0.25rem;
+}
+
+.markdown-content h2, .markdown-content h3, .markdown-content h4 {
+    margin-top: 1rem;
+    margin-bottom: 0.75rem;
+    font-weight: 700;
+}
+
+.markdown-content h2 {
+    font-size: 1.3rem;
+}
+
+.markdown-content h3 {
+    font-size: 1.2rem;
+}
+
+.markdown-content h4 {
+    font-size: 1rem;
+}
+
+.table-responsive {
+    overflow-x: auto;
+    margin-bottom: 1rem;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+}
+
+.markdown-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.85rem;
+}
+
+.markdown-table th, .markdown-table td {
+    padding: 0.5rem;
+    border: 1px solid var(--border);
+    text-align: left;
+}
+
+.markdown-table th {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.card-detail::-webkit-scrollbar {
+    width: 4px;
+}
+
+.card-detail::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 2px;
+}
+
+.inline-card-btn {
+    background: none;
+    border: none;
+    padding: 0;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 600;
+    color: var(--accent);
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-color: rgba(108, 99, 255, 0.3);
+    transition: color var(--transition), text-decoration-color var(--transition);
+}
+
+.inline-card-btn:hover {
+    color: #7b73ff;
+    text-decoration-color: #7b73ff;
+}
+
+
+@media (max-width: 768px) {
+    .detail-layout {
+        flex-direction: column;
+        padding: 1rem;
+    }
+
+    .detail-image {
+        flex: 0 0 auto;
+        max-width: 180px;
+        margin: 0 auto;
+    }
+
+    .card-detail,
+    .card-detail-noimg {
+        max-height: 90vh;
+    }
+
+    .card-detail-noimg {
+        max-width: 92vw;
+    }
+}

Chrono/Web/Components/GenericDocDialog.razor

@@ -0,0 +1,138 @@
+@using System.Text.RegularExpressions
+@using Microsoft.AspNetCore.Components.Rendering
+@namespace Chrono.Components
+
+@if (Doc != null)
+{
+    <div class="modal-backdrop" @onclick="HandleBackdropClick"></div>
+    <div class="generic-detail">
+        <button class="detail-close" @onclick="HandleClose"><i class="bi bi-x-lg"></i></button>
+        <div class="detail-layout">
+            <div class="detail-info">
+                <div class="detail-header">
+                    @if (!string.IsNullOrEmpty(Doc.Category))
+                    {
+                        <span class="category-badge">@Doc.Category</span>
+                    }
+                    <h2>@Doc.Title</h2>
+                </div>
+
+                @if (!string.IsNullOrWhiteSpace(Doc.Content))
+                {
+                    <div class="detail-field description">
+                        <div class="markdown-content">
+                            @RenderDescription(Doc.Content)
+                        </div>
+                    </div>
+                }
+            </div>
+        </div>
+    </div>
+}
+
+@code {
+    [Parameter] public DocData? Doc { get; set; }
+    [Parameter] public EventCallback OnClose { get; set; }
+
+    private void HandleClose()
+    {
+        _ = OnClose.InvokeAsync();
+    }
+
+    private void HandleBackdropClick()
+    {
+        _ = OnClose.InvokeAsync();
+    }
+
+    private RenderFragment RenderDescription(string content)
+    {
+        return builder =>
+        {
+            if (string.IsNullOrWhiteSpace(content)) return;
+
+            var seq = 0;
+            var lines = content.Split(['\r', '\n'], StringSplitOptions.None);
+            var inList = false;
+
+            for (var i = 0; i < lines.Length; i++)
+            {
+                var line = lines[i];
+                var trimmedLine = line.Trim();
+
+                // Handle Lists
+                if (trimmedLine.StartsWith("- ") || trimmedLine.StartsWith("* "))
+                {
+                    if (!inList)
+                    {
+                        builder.OpenElement(seq++, "ul");
+                        inList = true;
+                    }
+
+                    builder.OpenElement(seq++, "li");
+                    RenderInlines(builder, ref seq, trimmedLine[2..]);
+                    builder.CloseElement();
+                    continue;
+                }
+
+                if (inList)
+                {
+                    builder.CloseElement();
+                    inList = false;
+                }
+
+                if (!string.IsNullOrWhiteSpace(trimmedLine))
+                {
+                    builder.OpenElement(seq++, "p");
+                    RenderInlines(builder, ref seq, line);
+                    builder.CloseElement();
+                }
+            }
+
+            if (inList) builder.CloseElement();
+        };
+    }
+
+    private void RenderInlines(RenderTreeBuilder builder, ref int seq, string text)
+    {
+        var remaining = text;
+        while (!string.IsNullOrEmpty(remaining))
+        {
+            var boldMatch = Regex.Match(remaining, @"\*\*(.*?)\*\*");
+            var italicMatch = Regex.Match(remaining, @"\*(.*?)\*");
+
+            var bestIdx = int.MaxValue;
+            Match? bestMatch = null;
+            var matchType = 0; // 1: bold, 2: italic
+
+            if (boldMatch.Success && boldMatch.Index < bestIdx)
+            {
+                bestIdx = boldMatch.Index;
+                bestMatch = boldMatch;
+                matchType = 1;
+            }
+
+            if (italicMatch.Success && italicMatch.Index < bestIdx)
+            {
+                bestIdx = italicMatch.Index;
+                bestMatch = italicMatch;
+                matchType = 2;
+            }
+
+            if (bestMatch != null)
+            {
+                if (bestIdx > 0) builder.AddContent(seq++, remaining[..bestIdx]);
+                var innerText = bestMatch.Groups[1].Value;
+                builder.OpenElement(seq++, matchType == 1 ? "strong" : "em");
+                builder.AddContent(seq++, innerText);
+                builder.CloseElement();
+                remaining = remaining[(bestIdx + bestMatch.Length)..];
+            }
+            else
+            {
+                builder.AddContent(seq++, remaining);
+                remaining = "";
+            }
+        }
+    }
+
+}

Chrono/Web/Components/GenericDocDialog.razor.css

@@ -0,0 +1,76 @@
+.modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1060;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+}
+
+.generic-detail {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1070;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 20px;
+    padding: 2rem;
+    max-width: 600px;
+    width: 90vw;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+    color: var(--text-primary);
+}
+
+.detail-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: var(--text-primary);
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.detail-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    transform: rotate(90deg);
+}
+
+.detail-header {
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+.category-badge {
+    display: inline-block;
+    padding: 0.2rem 0.6rem;
+    background: var(--accent);
+    color: white;
+    font-size: 0.75rem;
+    font-weight: 700;
+    border-radius: 4px;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+}
+
+.detail-header h2 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 800;
+}
+
+.markdown-content {
+    line-height: 1.6;
+}
+
+.markdown-content p {
+    margin-bottom: 1rem;
+}

Chrono/Web/Components/Layout/MainLayout.razor

@@ -0,0 +1,19 @@
+@inherits LayoutComponentBase
+@inject CardPreviewService PreviewService
+<div class="page">
+    <div class="sidebar">
+        <NavMenu/>
+    </div>
+
+    <main>
+        <NavigationTracker/>
+        <article class="content px-4">
+            <TelerikRootComponent>
+                @Body
+                <Shared.Components.CardPreview />
+                <Shared.Components.DocDetailModal Doc="@PreviewService.SelectedDoc" 
+                                                 OnClose="@(() => PreviewService.SelectDoc(null))" />
+            </TelerikRootComponent>
+        </article>
+    </main>
+</div>

Chrono/Web/Components/Layout/MainLayout.razor.css

@@ -0,0 +1,77 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.top-row ::deep a, .top-row ::deep .btn-link {
+    white-space: nowrap;
+    margin-left: 1.5rem;
+    text-decoration: none;
+}
+
+.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+    text-decoration: underline;
+}
+
+.top-row ::deep a:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@media (max-width: 640.98px) {
+    .top-row {
+        justify-content: space-between;
+    }
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row.auth ::deep a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
+
+    .top-row, article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}

Chrono/Web/Components/Layout/NavMenu.razor

@@ -0,0 +1,60 @@
+<div class="top-row ps-3 pe-3 navbar navbar-dark">
+    <div class="container-fluid d-flex align-items-center justify-content-between p-0">
+        <a class="navbar-brand" href="">
+            <i class="bi bi-hourglass-split me-2 text-warning"></i> Chrono CCG
+        </a>
+        <div class="d-flex align-items-center gap-2">
+            <NetworkStatusChip />
+            <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+        </div>
+    </div>
+</div>
+
+<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
+    <nav class="nav flex-column">
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="home">
+                <i class="bi bi-house-door-fill nav-icon"></i> Home
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                <i class="bi bi-collection-fill nav-icon"></i> Cards
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="agents">
+                <i class="bi bi-people-fill nav-icon"></i> Agents
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="decks">
+                <i class="bi bi-journal-text nav-icon"></i> Decks
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="syndicates">
+                <i class="bi bi-diagram-2-fill nav-icon"></i> Syndicates
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="docs">
+                <i class="bi bi-book-fill nav-icon"></i> Docs
+            </NavLink>
+        </div>
+    </nav>
+</div>
+
+@code {
+    private bool collapseNavMenu = true;
+
+    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
+    private void ToggleNavMenu()
+    {
+        collapseNavMenu = !collapseNavMenu;
+    }
+
+}

Chrono/Web/Components/Layout/NavMenu.razor.css

@@ -0,0 +1,66 @@
+.navbar-toggler {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.top-row {
+    min-height: 3.5rem;
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.navbar-brand {
+    font-size: 1.1rem;
+}
+
+.nav-icon {
+    margin-right: 0.75rem;
+    font-size: 1.05rem;
+    width: 1.25rem;
+    text-align: center;
+}
+
+.nav-item {
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+}
+
+.nav-item:first-of-type {
+    padding-top: 1rem;
+}
+
+.nav-item:last-of-type {
+    padding-bottom: 1rem;
+}
+
+.nav-item ::deep a {
+    color: #d7d7d7;
+    border-radius: 4px;
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    line-height: 3rem;
+}
+
+.nav-item ::deep a.active {
+    background-color: rgba(255, 255, 255, 0.37);
+    color: white;
+}
+
+.nav-item ::deep a:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: white;
+}
+
+@media (min-width: 641px) {
+    .navbar-toggler {
+        display: none;
+    }
+
+    .collapse {
+        display: block;
+    }
+
+    .nav-scrollable {
+        height: calc(100vh - 3.5rem);
+        overflow-y: auto;
+    }
+}

Chrono/Web/Components/NetworkStatusChip.razor

@@ -0,0 +1,27 @@
+@inject NetworkStatusService NetworkStatus
+@implements IDisposable
+
+<div class="network-status-chip @(NetworkStatus.IsOnline ? "online" : "offline")"
+     title="@(NetworkStatus.IsOnline ? "Connected - App is online" : "Offline - Running from local cache")">
+    <span class="status-dot"></span>
+    <i class="bi @(NetworkStatus.IsOnline ? "bi-wifi" : "bi-wifi-off") status-icon"></i>
+    <span class="status-text">@(NetworkStatus.IsOnline ? "Online" : "Offline")</span>
+</div>
+
+@code {
+    protected override async Task OnInitializedAsync()
+    {
+        NetworkStatus.StatusChanged += OnStatusChanged;
+        await NetworkStatus.InitializeAsync();
+    }
+
+    private void OnStatusChanged(bool isOnline)
+    {
+        InvokeAsync(StateHasChanged);
+    }
+
+    public void Dispose()
+    {
+        NetworkStatus.StatusChanged -= OnStatusChanged;
+    }
+}

Chrono/Web/Components/NetworkStatusChip.razor.css

@@ -0,0 +1,63 @@
+.network-status-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.2rem 0.55rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    user-select: none;
+    transition: all 0.25s ease-in-out;
+    border: 1px solid transparent;
+}
+
+.network-status-chip.online {
+    background-color: rgba(16, 185, 129, 0.15);
+    border-color: rgba(16, 185, 129, 0.35);
+    color: #34d399;
+}
+
+.network-status-chip.offline {
+    background-color: rgba(245, 158, 11, 0.18);
+    border-color: rgba(245, 158, 11, 0.45);
+    color: #fbbf24;
+}
+
+.status-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    display: inline-block;
+    flex-shrink: 0;
+}
+
+.network-status-chip.online .status-dot {
+    background-color: #10b981;
+    box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
+}
+
+.network-status-chip.offline .status-dot {
+    background-color: #f59e0b;
+    box-shadow: 0 0 6px rgba(245, 158, 11, 0.8);
+    animation: pulse 2s infinite ease-in-out;
+}
+
+.status-icon {
+    font-size: 0.8rem;
+}
+
+.status-text {
+    line-height: 1;
+}
+
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.4;
+        transform: scale(0.85);
+    }
+}

Chrono/Web/Pages/Cards.razor

@@ -0,0 +1,424 @@
+@page "/"
+@page "/cards"
+@using Chrono.Components
+@inject AnalyticsService AnalyticsService
+
+<PageTitle>Chrono CCG - Card Gallery</PageTitle>
+
+<HeadContent>
+    <meta name="description" content="Browse and filter all Chrono CCG cards. Explore agents, spells, and more."/>
+</HeadContent>
+
+
+<div class="gallery-container">
+    <div class="gallery-header">
+        <h1>Card Gallery</h1>
+        <p class="text-secondary">Browse all @allCards.Count cards</p>
+    </div>
+
+    <div class="category-tabs">
+        <button class="tab @(categoryFilter == "" ? "active" : "")" @onclick='@(() => SetCategory(""))'>
+            <i class="bi bi-grid-3x3-gap-fill"></i> All
+        </button>
+
+        <button class="tab agent @(categoryFilter == "Agent" ? "active" : "")" @onclick='@(() => SetCategory("Agent"))'>
+            <i class="bi bi-person-fill"></i> Agents
+        </button>
+        <button class="tab agent @(categoryFilter == "Immortalized" ? "active" : "")"
+                @onclick='@(() => SetCategory("Immortalized"))'>
+            <i class="bi bi-person-fill"></i> Immortalized
+        </button>
+
+        <div class="tab link-toggle @(agentLink ? "active" : "")" @onclick="ToggleAgentLink"
+             title="Link Agents and Immortalized cards">
+            <i class="bi bi-link-45deg"></i>
+            <span>Linked</span>
+            <span class="toggle-switch @(agentLink ? "on" : "off")"></span>
+        </div>
+
+        <div class="category-divider"></div>
+
+        <button class="tab spell @(categoryFilter == "Spell" ? "active" : "")" @onclick='@(() => SetCategory("Spell"))'>
+            <i class="bi bi-wand"></i> Spells
+        </button>
+    </div>
+
+    <div class="filter-bar">
+        <div class="search-wrapper">
+            <i class="bi bi-search search-icon"></i>
+            <input @bind="search" @bind:event="oninput" class="form-control search-input"
+                   placeholder="Search cards by name or description..."/>
+            @if (search.Length > 0)
+            {
+                <button class="search-clear" @onclick="ClearSearch"><i class="bi bi-x-lg"></i></button>
+            }
+        </div>
+        <div class="syndicate-toggle-group">
+            @foreach (var s in syndicates)
+            {
+                <button class="syndicate-btn @(syndicateFilter.Contains(s) ? "active" : "") @s.ToLowerInvariant()"
+                        @onclick="() => SetSyndicate(s)" title="@s">
+                    <span class="syn-icon"></span>
+                    <span class="syn-name">@s</span>
+                </button>
+            }
+        </div>
+        <select @bind="costFilter" class="form-select filter-select">
+            <option value="">All Costs</option>
+            @for (var i = 0; i <= 13; i++)
+            {
+                <option value="@i">@i</option>
+            }
+        </select>
+        <div class="sort-group d-flex gap-1">
+            <select @bind="sortBy" class="form-select filter-select sort-select">
+                <option value="Cost">Sort by Cost</option>
+                <option value="Name">Sort by Name</option>
+                <option value="Attack">Sort by Attack</option>
+                <option value="Health">Sort by Health</option>
+                <option value="Efficiency">Sort by Efficiency</option>
+            </select>
+            <button class="btn btn-outline-secondary sort-dir-btn" @onclick="() => sortDescending = !sortDescending"
+                    title="@(sortDescending ? "Descending" : "Ascending")">
+                <i class="bi bi-sort-@(sortDescending ? "down" : "up")"></i>
+            </button>
+        </div>
+        <button class="btn @(showDetailedView ? "btn-primary" : "btn-outline-primary") view-toggle-btn"
+                @onclick="() => showDetailedView = !showDetailedView" title="Toggle Detailed View">
+            <i class="bi bi-list-ul"></i>
+        </button>
+    </div>
+
+    @if (HasActiveFilters)
+    {
+        <div class="active-filters">
+            <span class="filter-label">Filters:</span>
+            @if (categoryFilter != "")
+            {
+                <span class="filter-chip">
+                    <i class="bi bi-tag-fill"></i> @categoryFilter
+                    <button @onclick="ClearCategoryFilter"><i class="bi bi-x"></i></button>
+                </span>
+            }
+            @if (syndicateFilter.Count > 0)
+            {
+                @foreach (var s in syndicateFilter)
+                {
+                    <span class="filter-chip">
+                        <i class="bi bi-diagram-3-fill"></i> @s
+                        <button @onclick="() => SetSyndicate(s)"><i class="bi bi-x"></i></button>
+                    </span>
+                }
+            }
+            @if (costFilter != "")
+            {
+                <span class="filter-chip">
+                    <i class="bi bi-lightning-fill"></i> Cost @costFilter
+                    <button @onclick="ClearCostFilter"><i class="bi bi-x"></i></button>
+                </span>
+            }
+            <button class="clear-all" @onclick="ClearFilters">Clear all</button>
+        </div>
+    }
+
+    <div class="result-count">
+        <span>@filteredCards.Count() card@(filteredCards.Count() != 1 ? "s" : "") found</span>
+        @if (HasActiveFilters || search != "")
+        {
+            <span class="text-muted">out of @allCards.Count total</span>
+        }
+    </div>
+
+    @if (filteredCards.Any())
+    {
+        <div class="card-grid @(showDetailedView ? "detailed-view" : "")">
+            @{ var idx = 0; }
+            @foreach (var card in filteredCards.Where(a => a.Category is "Agent" or "Spell" or "Immortalized"))
+            {
+                <div class="card-cell @(selectedCard == card ? "selected" : "")"
+                     style="--i: @idx"
+                     @onclick="() => SelectCard(card.Name)">
+                    <div class="card-image-wrapper">
+                        <div class="card-shimmer"></div>
+                        <img src="@card.ImagePath" alt="@card.Name" loading="lazy"
+                             onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22280%22><rect fill=%22%23222244%22 width=%22200%22 height=%22280%22/><text fill=%22%23686888%22 font-size=%2214%22 x=%22100%22 y=%22140%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22>No Image</text></svg>'"/>
+
+                        @if (card.Cost.HasValue)
+                        {
+                            <div class="card-cost-badge" title="Cost">@card.Cost</div>
+                        }
+
+                        @if (card.IsSpell && !string.IsNullOrEmpty(card.Speed))
+                        {
+                            <div class="card-speed-badge" title="Speed">
+                                <i class="bi bi-wind"></i> @card.Speed
+                            </div>
+                        }
+
+                        @if (card.IsImmortalized)
+                        {
+                            <div class="card-immortalize-badge"
+                                 title="@(card.IsImmortalized ? "Immortalized" : "Immortalizes")">
+                                <i class="bi bi-star-fill"></i>
+                            </div>
+                        }
+
+                        <div class="card-info-overlay">
+                            <div class="card-name-overlay">
+                                <span class="name-text">@card.Name</span>
+                            </div>
+                            @if (!string.IsNullOrEmpty(card.Description))
+                            {
+                                <div class="card-description">@card.Description</div>
+                            }
+
+                            @if (card.IsImmortalized && !string.IsNullOrEmpty(card.ImmortalizeFrom))
+                            {
+                                <div class="card-immortalize-info">
+                                    <i class="bi bi-arrow-left-circle-fill"></i> From @card.ImmortalizeFrom
+                                </div>
+                            }
+                            else if (!string.IsNullOrEmpty(card.ImmortalizeWhen))
+                            {
+                                <div class="card-immortalize-info">
+                                    <i class="bi bi-star-fill"></i> @card.ImmortalizeWhen
+                                </div>
+                            }
+
+                            @if (card.Attack.HasValue || card.Health.HasValue)
+                            {
+                                <div class="card-stats-row">
+                                    @if (card.Attack.HasValue)
+                                    {
+                                        <span class="stat attack"><i class="bi bi-crosshair"></i> @card.Attack</span>
+                                    }
+                                    @if (card.Health.HasValue)
+                                    {
+                                        <span class="stat health"><i class="bi bi-heart-fill"></i> @card.Health</span>
+                                    }
+                                </div>
+                            }
+                        </div>
+                    </div>
+                    @if (showDetailedView)
+                    {
+                        <div class="card-label">
+                            <div class="card-name">@card.Name</div>
+                            <div class="card-stats">
+                                @if (card.Attack.HasValue)
+                                {
+                                    <span class="stat"><i class="bi bi-crosshair"></i> @card.Attack</span>
+                                }
+                                @if (card.Health.HasValue)
+                                {
+                                    <span class="stat"><i class="bi bi-heart-fill"></i> @card.Health</span>
+                                }
+                            </div>
+                            <div class="card-description-preview">@card.Description</div>
+                            <div class="card-category-badge @card.Category?.ToLowerInvariant()">@card.Category</div>
+
+                        </div>
+                    }
+                </div>
+                idx++;
+            }
+        </div>
+    }
+    else
+    {
+        <div class="empty-state">
+            <i class="bi bi-search"></i>
+            <p>No cards match your filters.</p>
+            <button class="btn btn-outline-secondary" @onclick="ClearFilters">Reset Filters</button>
+        </div>
+    }
+</div>
+
+
+
+@if (selectedCard != null)
+{
+    <CardDialog Card="selectedCard" OnClose="CloseDetail" OnNavigate="SelectCard"/>
+}
+
+@code {
+    private List<CardData> allCards = [];
+    private IEnumerable<CardData> filteredCards => ApplyFilters();
+    private string search = "";
+    private string categoryFilter = "";
+    private string immortalFilter = "";
+    private bool agentLink = true;
+    private readonly HashSet<string> syndicateFilter = [];
+    private string costFilter = "";
+    private string sortBy = "Cost";
+    private bool sortDescending;
+    private bool showDetailedView;
+    private CardData? selectedCard;
+    private List<string> syndicates = [];
+
+    private bool HasActiveFilters => categoryFilter != "" || syndicateFilter.Count > 0 || costFilter != "" || immortalFilter != "";
+
+    protected override void OnInitialized()
+    {
+        allCards = CardDatabase.Cards;
+        syndicates = allCards
+            .Select(c => c.Syndicate)
+            .Where(f => f != null)
+            .Distinct()
+            .OrderBy(f => f)
+            .ToList()!;
+    }
+
+    private IEnumerable<CardData> ApplyFilters()
+    {
+        var primarySet = allCards.Where(c =>
+            c.MatchesSearch(search) &&
+            (categoryFilter == "" || c.Category == categoryFilter) &&
+            (syndicateFilter.Count == 0 || (c.Syndicate != null && syndicateFilter.Contains(c.Syndicate))) &&
+            (costFilter == "" || c.Cost?.ToString() == costFilter)
+        );
+
+        var sortedPrimary = sortBy switch
+        {
+            "Cost" => sortDescending ? primarySet.OrderByDescending(c => c.Cost) : primarySet.OrderBy(c => c.Cost),
+            "Efficiency" => sortDescending ? primarySet.OrderByDescending(c => c.StatEfficiency) : primarySet.OrderBy(c => c.StatEfficiency),
+            "Attack" => sortDescending ? primarySet.OrderByDescending(c => c.Attack) : primarySet.OrderBy(c => c.Attack),
+            "Health" => sortDescending ? primarySet.OrderByDescending(c => c.Health) : primarySet.OrderBy(c => c.Health),
+            _ => sortDescending ? primarySet.OrderByDescending(c => c.Name) : primarySet.OrderBy(c => c.Name)
+        };
+
+        if (!agentLink)
+        {
+            return sortedPrimary;
+        }
+
+        var result = new List<CardData>();
+        var seen = new HashSet<string>();
+        foreach (var card in sortedPrimary)
+        {
+            if (seen.Contains(card.Name)) continue;
+
+            // Determine the "Chain Head" (the Agent)
+            var head = card;
+            if (card.Category == "Immortalized" && card.ImmortalizeFrom != null)
+            {
+                var source = allCards.FirstOrDefault(c => c.Name == card.ImmortalizeFrom);
+                if (source != null) head = source;
+            }
+
+            // Add the chain starting from head
+            if (!seen.Contains(head.Name))
+            {
+                result.Add(head);
+                seen.Add(head.Name);
+            }
+
+            if (head.ImmortalizeTo != null)
+            {
+                foreach (var targetName in head.ImmortalizeTo)
+                {
+                    if (seen.Contains(targetName)) continue;
+                    var linked = allCards.FirstOrDefault(c => c.Name == targetName);
+                    if (linked != null)
+                    {
+                        result.Add(linked);
+                        seen.Add(linked.Name);
+                    }
+                }
+            }
+
+            // Ensure the original card is added if it was somehow not part of the head's chain
+            if (!seen.Contains(card.Name))
+            {
+                result.Add(card);
+                seen.Add(card.Name);
+            }
+        }
+
+        return result;
+    }
+
+    private void SetImmortal(string imm)
+    {
+        immortalFilter = immortalFilter == imm ? "" : imm;
+    }
+
+    private void ClearImmortalFilter()
+    {
+        immortalFilter = "";
+    }
+
+    private void SetSyndicate(string syn)
+    {
+        if (syndicateFilter.Contains(syn))
+        {
+            syndicateFilter.Remove(syn);
+        }
+        else
+        {
+            syndicateFilter.Add(syn);
+        }
+    }
+
+    private void SetCategory(string cat)
+    {
+        categoryFilter = categoryFilter == cat ? "" : cat;
+        _ = AnalyticsService.TrackEvent("filter_category", new { category = categoryFilter });
+    }
+
+    private void ClearCategoryFilter()
+    {
+        categoryFilter = "";
+        _ = AnalyticsService.TrackEvent("filter_category", new { category = "All" });
+    }
+
+    private void ClearSyndicateFilter()
+    {
+        syndicateFilter.Clear();
+    }
+
+    private void ToggleAgentLink()
+    {
+        agentLink = !agentLink;
+        OnToggleAgentLink();
+    }
+
+    private void OnToggleAgentLink()
+    {
+        _ = AnalyticsService.TrackEvent("toggle_agent_link", new { enabled = agentLink });
+    }
+
+    private void ClearCostFilter()
+    {
+        costFilter = "";
+    }
+
+    private void ClearSearch()
+    {
+        search = "";
+    }
+
+    private void SelectCard(string name)
+    {
+        var card = allCards.FirstOrDefault(c => string.Equals(c.Name, name, StringComparison.OrdinalIgnoreCase));
+        if (card != null)
+        {
+            selectedCard = card;
+            _ = AnalyticsService.TrackEvent("select_item", new { item_name = card.Name, item_category = card.Category });
+        }
+    }
+
+    private void CloseDetail()
+    {
+        selectedCard = null;
+    }
+
+    private void ClearFilters()
+    {
+        search = "";
+        categoryFilter = "";
+        syndicateFilter.Clear();
+        costFilter = "";
+    }
+
+}

Chrono/Web/Pages/Cards.razor.css

@@ -0,0 +1,822 @@
+.gallery-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 1.5rem;
+}
+
+/* ── Header ── */
+.gallery-header {
+    margin-bottom: 1.5rem;
+}
+
+.gallery-header h1 {
+    margin-bottom: 0.25rem;
+}
+
+.gallery-header p {
+    font-size: 0.9rem;
+    margin: 0;
+}
+
+/* ── Category Tabs ── */
+.category-tabs {
+    display: flex;
+    gap: 0.4rem;
+    margin-bottom: 1rem;
+    flex-wrap: wrap;
+}
+
+.tab {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--border);
+    border-radius: 100px;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition);
+    font-family: inherit;
+}
+
+.tab:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+    border-color: var(--text-muted);
+}
+
+.tab.active {
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+    border-color: var(--accent);
+    box-shadow: 0 0 12px var(--accent-glow);
+}
+
+.tab.active.agent {
+    border-color: #4fc3f7;
+    box-shadow: 0 0 12px rgba(79, 195, 247, 0.3);
+}
+
+.tab.active.spell {
+    border-color: #ce93d8;
+    box-shadow: 0 0 12px rgba(206, 147, 216, 0.3);
+}
+
+.tab.active.token {
+    border-color: #ffd54f;
+    box-shadow: 0 0 12px rgba(255, 213, 79, 0.3);
+}
+
+.tab i {
+    font-size: 0.9rem;
+}
+
+.category-divider {
+    width: 1px;
+    height: 1.5rem;
+    background: var(--border);
+    margin: 0 0.6rem;
+    align-self: center;
+    opacity: 0.6;
+}
+
+.tab.link-toggle {
+    border-style: dashed;
+    gap: 0.6rem;
+    user-select: none;
+    padding-right: 0.8rem;
+    margin-left: 0.2rem;
+}
+
+.tab.link-toggle.active {
+    border-style: solid;
+    background: rgba(108, 99, 255, 0.1);
+    border-color: var(--accent);
+    color: var(--text-primary);
+}
+
+.toggle-switch {
+    width: 28px;
+    height: 16px;
+    background: var(--bg-hover);
+    border-radius: 10px;
+    position: relative;
+    transition: all 0.2s;
+    border: 1px solid var(--border);
+    flex-shrink: 0;
+}
+
+.toggle-switch.on {
+    background: var(--accent);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.toggle-switch::after {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background: white;
+    border-radius: 50%;
+    top: 2px;
+    left: 2px;
+    transition: transform 0.2s;
+}
+
+.toggle-switch.on::after {
+    transform: translateX(12px);
+}
+
+/* ── Filter Bar ── */
+.filter-bar {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+    align-items: stretch;
+}
+
+.search-wrapper {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+}
+
+.search-icon {
+    position: absolute;
+    left: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-muted);
+    z-index: 3;
+    pointer-events: none;
+    font-size: 0.85rem;
+}
+
+.search-input {
+    padding-left: 2.2rem;
+    padding-right: 2.2rem;
+    height: 100%;
+}
+
+.search-clear {
+    position: absolute;
+    right: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0.2rem;
+    display: flex;
+    align-items: center;
+    font-size: 0.7rem;
+    z-index: 3;
+}
+
+.search-clear:hover {
+    color: var(--text-primary);
+}
+
+.filter-select {
+    width: auto;
+    min-width: 120px;
+}
+
+/* ── Syndicate Toggle Group ── */
+.syndicate-toggle-group {
+    display: flex;
+    gap: 0.25rem;
+    background: var(--bg-surface);
+    padding: 0.25rem;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+}
+
+.syndicate-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.4rem 0.75rem;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+}
+
+.syndicate-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.syndicate-btn.active {
+    background: var(--bg-elevated);
+    border-color: var(--border);
+    color: var(--text-primary);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* Syndicate Colors */
+.syndicate-btn.active.singularity {
+    border-color: #ffffff;
+    color: #ffffff;
+}
+
+.syndicate-btn.active.phasetide {
+    border-color: #2196f3;
+    color: #2196f3;
+}
+
+.syndicate-btn.active.silence {
+    border-color: #9c27b0;
+    color: #9c27b0;
+}
+
+.syndicate-btn.active.lifeblood {
+    border-color: #4caf50;
+    color: #4caf50;
+}
+
+.syndicate-btn.active.sungrace {
+    border-color: #ff9800;
+    color: #ff9800;
+}
+
+.syndicate-btn.active.splintergleam {
+    border-color: #f44336;
+    color: #f44336;
+}
+
+.syn-icon {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: 0.5;
+}
+
+.syndicate-btn.active .syn-icon {
+    opacity: 1;
+    box-shadow: 0 0 8px currentColor;
+}
+
+@media (max-width: 1100px) {
+    .syndicate-toggle-group {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+/* ── Active Filter Chips ── */
+.active-filters {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin-bottom: 0.75rem;
+    flex-wrap: wrap;
+    font-size: 0.85rem;
+}
+
+.filter-label {
+    color: var(--text-muted);
+    font-weight: 500;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.filter-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.25rem 0.5rem;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    border-radius: 100px;
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+}
+
+.filter-chip i:first-child {
+    font-size: 0.7rem;
+}
+
+.filter-chip button {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    font-size: 0.65rem;
+    line-height: 1;
+}
+
+.filter-chip button:hover {
+    color: var(--text-primary);
+}
+
+.clear-all {
+    background: none;
+    border: none;
+    color: var(--accent);
+    cursor: pointer;
+    font-size: 0.8rem;
+    padding: 0.25rem 0.5rem;
+    font-family: inherit;
+}
+
+.clear-all:hover {
+    text-decoration: underline;
+}
+
+/* ── Result Count ── */
+.result-count {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
+    display: flex;
+    gap: 0.3rem;
+}
+
+/* ── Card Grid ── */
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 1rem;
+}
+
+@media (min-width: 1400px) {
+    .card-grid {
+        grid-template-columns: repeat(6, 1fr);
+    }
+}
+
+.card-grid.detailed-view {
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+}
+
+.card-grid.detailed-view .card-name-overlay,
+.card-grid.detailed-view .card-info-overlay,
+.card-grid.detailed-view .card-cost-badge,
+.card-grid.detailed-view .card-immortalize-badge {
+    display: none;
+}
+
+.card-grid.detailed-view .card-cell {
+    display: flex;
+    flex-direction: row;
+    height: 180px;
+    animation: none;
+}
+
+.card-grid.detailed-view .card-image-wrapper {
+    width: 130px;
+    height: 100%;
+    flex-shrink: 0;
+}
+
+.card-grid.detailed-view .card-label {
+    flex: 1;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 0.75rem;
+    gap: 0.4rem;
+    background: var(--bg-surface);
+}
+
+.card-grid.detailed-view .card-name {
+    font-size: 1rem;
+    font-weight: 700;
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    line-height: 1.2;
+}
+
+.card-stats {
+    display: flex;
+    gap: 0.75rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.card-stats .stat {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.card-stats .stat i {
+    font-size: 0.75rem;
+}
+
+.card-stats .stat:nth-child(1) {
+    color: #ffab40;
+}
+
+/* Attack */
+.card-stats .stat:nth-child(2) {
+    color: #f44336;
+}
+
+/* Health */
+
+.card-description-preview {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: 1.4;
+    margin-top: 0.2rem;
+}
+
+.sort-group {
+    min-width: 200px;
+}
+
+.sort-select {
+    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+}
+
+.sort-dir-btn {
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    border-left: none;
+    background: var(--bg-surface);
+}
+
+.view-toggle-btn {
+    min-width: 40px;
+    background: var(--bg-surface);
+}
+
+/* ── Card Cell ── */
+.card-cell {
+    cursor: pointer;
+    border-radius: var(--radius);
+    overflow: hidden;
+    background: var(--bg-surface);
+    transition: transform 0.25s ease, box-shadow 0.25s ease;
+    border: 2px solid transparent;
+    animation: card-enter 0.4s ease-out both;
+    animation-delay: calc(var(--i, 0) * 25ms);
+    will-change: transform;
+}
+
+.card-cell:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 8px 30px rgba(108, 99, 255, 0.2);
+    border-color: rgba(108, 99, 255, 0.2);
+}
+
+.card-cell.selected {
+    border-color: var(--gold);
+    box-shadow: 0 0 20px var(--gold-glow);
+}
+
+.card-cell.selected:hover {
+    box-shadow: 0 8px 30px var(--gold-glow);
+}
+
+@keyframes card-enter {
+    from {
+        opacity: 0;
+        transform: translateY(16px) scale(0.97);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+/* ── Card Image ── */
+.card-image-wrapper {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 5 / 7;
+    overflow: hidden;
+    background: #111128;
+}
+
+.card-shimmer {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100%);
+    background-size: 200% 100%;
+    animation: shimmer 2.5s infinite;
+    pointer-events: none;
+    z-index: 0;
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: -200% 0;
+    }
+    100% {
+        background-position: 200% 0;
+    }
+}
+
+.card-image-wrapper img {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    z-index: 1;
+}
+
+.card-name-overlay {
+    padding: 0 0 0.25rem;
+    color: white;
+    font-size: 0.85rem;
+    font-weight: 700;
+    text-align: center;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+
+.name-text {
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: 1.1;
+    max-width: 100%;
+}
+
+.card-info-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 2.5rem 0.5rem 0.5rem;
+    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    z-index: 2;
+}
+
+.card-description {
+    font-size: 0.7rem;
+    color: rgba(255, 255, 255, 0.9);
+    line-height: 1.25;
+    text-align: center;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+.card-immortalize-info {
+    font-size: 0.65rem;
+    color: var(--gold);
+    font-weight: 600;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    background: rgba(0, 0, 0, 0.3);
+    padding: 0.15rem 0.3rem;
+    border-radius: 4px;
+    margin: 0 auto;
+}
+
+.card-stats-row {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin-top: 0.1rem;
+}
+
+.card-stats-row .stat {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-weight: 800;
+    font-size: 1rem;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
+}
+
+.card-stats-row .stat.attack {
+    color: #ffcc80;
+}
+
+.card-stats-row .stat.health {
+    color: #ef9a9a;
+}
+
+.card-stats-row .stat i {
+    font-size: 0.85rem;
+}
+
+.card-cost-badge {
+    position: absolute;
+    top: 0.3rem;
+    left: 0.3rem;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+    color: #fff;
+    font-weight: 800;
+    font-size: 0.75rem;
+    padding: 0.1rem 0.4rem;
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    z-index: 3;
+    line-height: 1.2;
+}
+
+.card-cost-badge::before {
+    content: "⚡";
+    margin-right: 0.1rem;
+    color: #ffd700;
+}
+
+.card-immortalize-badge {
+    position: absolute;
+    top: 0.4rem;
+    right: 0.4rem;
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(4px);
+    color: var(--gold);
+    font-size: 0.7rem;
+    padding: 0.25rem;
+    border-radius: 50%;
+    z-index: 2;
+    width: 1.5rem;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(255, 215, 0, 0.3);
+}
+
+.card-speed-badge {
+    position: absolute;
+    top: 0.4rem;
+    right: 0.4rem;
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(4px);
+    color: #ce93d8; /* Match spell category color */
+    font-weight: 700;
+    font-size: 0.65rem;
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    border: 1px solid rgba(206, 147, 216, 0.3);
+    z-index: 2;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+}
+
+.card-speed-badge i {
+    font-size: 0.75rem;
+}
+
+/* ── Card Label ── */
+.card-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.4rem 0.6rem;
+    background: var(--bg-elevated);
+    min-height: 2.4rem;
+}
+
+.card-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.card-category-badge {
+    flex-shrink: 0;
+    font-size: 0.65rem;
+    font-weight: 600;
+    padding: 0.15rem 0.45rem;
+    border-radius: 100px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    background: var(--bg-hover);
+    color: var(--text-secondary);
+    border: 1px solid var(--border);
+}
+
+.card-category-badge.agent {
+    background: rgba(79, 195, 247, 0.15);
+    color: #4fc3f7;
+    border-color: rgba(79, 195, 247, 0.3);
+}
+
+.card-category-badge.spell {
+    background: rgba(206, 147, 216, 0.15);
+    color: #ce93d8;
+    border-color: rgba(206, 147, 216, 0.3);
+}
+
+.card-category-badge.token {
+    background: rgba(255, 213, 79, 0.15);
+    color: #ffd54f;
+    border-color: rgba(255, 213, 79, 0.3);
+}
+
+/* ── Empty State ── */
+.empty-state {
+    text-align: center;
+    padding: 3rem 1rem;
+    color: var(--text-muted);
+}
+
+.empty-state i {
+    font-size: 2.5rem;
+    display: block;
+    margin-bottom: 1rem;
+}
+
+.empty-state p {
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+}
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+    .gallery-container {
+        padding: 1rem;
+    }
+
+    .filter-bar {
+        flex-direction: column;
+    }
+
+    .syndicate-toggle-group {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .filter-select {
+        width: 100%;
+        min-width: 0;
+    }
+
+    .card-grid {
+        grid-template-columns: 1fr;
+        gap: 0.75rem;
+        max-width: 400px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .card-grid.detailed-view {
+        grid-template-columns: 1fr;
+        max-width: 500px;
+    }
+
+    .tab {
+        padding: 0.4rem 0.8rem;
+        font-size: 0.8rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .card-grid, .card-grid.detailed-view {
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+        max-width: 100%;
+    }
+
+    .category-tabs {
+        gap: 0.3rem;
+    }
+
+    .tab {
+        padding: 0.35rem 0.65rem;
+        font-size: 0.75rem;
+    }
+
+    .tab i {
+        display: none;
+    }
+}

Chrono/Web/Program.cs

@@ -0,0 +1,18 @@
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Shared.Services;
+using Web;
+using Web.Services;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+builder.RootComponents.Add<Routes>("#app");
+builder.RootComponents.Add<HeadOutlet>("head::after");
+
+builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+builder.Services.AddTelerikBlazor();
+builder.Services.AddSingleton<CardRenderingService>();
+builder.Services.AddScoped<CardPreviewService>();
+builder.Services.AddScoped<AnalyticsService>();
+builder.Services.AddScoped<NetworkStatusService>();
+
+await builder.Build().RunAsync();

Chrono/Web/Properties/launchSettings.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://json.schemastore.org/launchsettings.json",
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": false,
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "http://localhost:5256",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": false,
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "https://localhost:7294;http://localhost:5256",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

Chrono/Web/Routes.razor

@@ -0,0 +1,8 @@
+@using Web.Components.Layout
+<Router AppAssembly="@typeof(Routes).Assembly" AdditionalAssemblies="new[] { typeof(Home).Assembly }"
+        NotFoundPage="typeof(NotFound)">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
+        <FocusOnNavigate RouteData="@routeData" Selector="h1"/>
+    </Found>
+</Router>

Chrono/Web/Services/NetworkStatusService.cs

@@ -0,0 +1,69 @@
+namespace Web.Services;
+
+using Microsoft.JSInterop;
+
+public class NetworkStatusService : IAsyncDisposable, IDisposable
+{
+    private readonly IJSRuntime _jsRuntime;
+    private DotNetObjectReference<NetworkStatusService>? _dotNetRef;
+    private bool _isOnline = true;
+    private bool _initialized;
+
+    public event Action<bool>? StatusChanged;
+
+    public bool IsOnline => _isOnline;
+
+    public NetworkStatusService(IJSRuntime jsRuntime)
+    {
+        _jsRuntime = jsRuntime;
+    }
+
+    public async Task InitializeAsync()
+    {
+        if (_initialized) return;
+        _initialized = true;
+
+        try
+        {
+            _dotNetRef = DotNetObjectReference.Create(this);
+            _isOnline = await _jsRuntime.InvokeAsync<bool>("networkStatus.initialize", _dotNetRef);
+            StatusChanged?.Invoke(_isOnline);
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"[NetworkStatusService] Failed to initialize: {ex.Message}");
+        }
+    }
+
+    [JSInvokable]
+    public void SetOnlineStatus(bool isOnline)
+    {
+        if (_isOnline != isOnline)
+        {
+            _isOnline = isOnline;
+            StatusChanged?.Invoke(_isOnline);
+        }
+    }
+
+    public void Dispose()
+    {
+        _dotNetRef?.Dispose();
+        _dotNetRef = null;
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_dotNetRef != null)
+        {
+            try
+            {
+                await _jsRuntime.InvokeVoidAsync("networkStatus.dispose");
+            }
+            catch
+            {
+                // Ignore disposal errors
+            }
+            _dotNetRef.Dispose();
+        }
+    }
+}

Chrono/Web/Web.csproj

@@ -0,0 +1,28 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+
+    <PropertyGroup>
+        <TargetFramework>net10.0</TargetFramework>
+        <Nullable>enable</Nullable>
+        <ImplicitUsings>enable</ImplicitUsings>
+        <OverrideHtmlAssetPlaceholders>false</OverrideHtmlAssetPlaceholders>
+        <StaticWebAssetsFingerprintingEnabled>false</StaticWebAssetsFingerprintingEnabled>
+        <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
+        <RootNamespace>Web</RootNamespace>
+    </PropertyGroup>
+
+    <ItemGroup>
+        <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js"/>
+    </ItemGroup>
+
+    <ItemGroup>
+        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.9"/>
+        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.9" PrivateAssets="all"/>
+        <PackageReference Include="MudBlazor" Version="9.6.0"/>
+        <PackageReference Include="Telerik.UI.for.Blazor" Version="14.0.0" PrivateAssets="none"/>
+    </ItemGroup>
+
+    <ItemGroup>
+        <ProjectReference Include="..\Model\Model.csproj"/>
+        <ProjectReference Include="..\Shared\Shared.csproj"/>
+    </ItemGroup>
+</Project>

Chrono/Web/_Imports.razor

@@ -0,0 +1,18 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Model
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.AspNetCore.Components.WebAssembly.Http
+@using Microsoft.JSInterop
+@using Shared.Pages
+@using Shared.Services
+@using Shared.Components
+@using Web.Components.Layout
+@using Telerik.Blazor
+@using Telerik.Blazor.Components
+@using Telerik.DataSource
+@using Web.Components
+@using Web.Services