Error toast and key skill display

Fellowship/Web/Pages/Keyboard.razor

@@ -2,6 +2,22 @@
 
 <PageTitle>Keyboard</PageTitle>
 
+<div class="kb-layout">
+<div class="kb-left">
+
+@if (toast != null)
+{
+    <div class="toast-notification @(toast.Visible ? "toast-show" : "toast-hide")">
+        <div class="toast-content">
+            <span class="toast-icon">&#x26A0;</span>
+            <div class="toast-text">
+                <span class="toast-title">@toast.SkillName</span>
+                <span class="toast-message">Cannot cast yet — @toast.Remaining seconds remaining</span>
+            </div>
+        </div>
+    </div>
+}
+
 <div class="character-selector">
     <label>Character:</label>
     <select @bind="selectedCharacter" @bind:after="RebuildKeyboardData">
@@ -259,6 +275,108 @@
         </div>
     </div>
 </div>
+</div>
+
+<div class="kb-right">
+    @if (selectedSkill != null)
+    {
+        <div class="skill-detail">
+            <div class="skill-detail-header">
+                <h3 class="skill-detail-name">@Path.GetFileNameWithoutExtension(selectedSkill.FileName)</h3>
+                <span class="skill-detail-key">@selectedSkill.Key</span>
+            </div>
+
+            @if (!string.IsNullOrEmpty(selectedSkill.Description))
+            {
+                <div class="skill-detail-desc">
+                    @foreach (var line in selectedSkill.Description.Split('\n'))
+                    {
+                        <p>@line</p>
+                    }
+                </div>
+            }
+
+            <div class="skill-detail-stats">
+                @if (!string.IsNullOrEmpty(selectedSkill.Cast))
+                {
+                    <div class="stat-row">
+                        <span class="stat-label">Cast</span>
+                        <span class="stat-value">@selectedSkill.Cast</span>
+                    </div>
+                }
+                @if (ParseValue(selectedSkill.Damage) > 0)
+                {
+                    <div class="stat-row">
+                        <span class="stat-label">Damage</span>
+                        <span class="stat-value">@FormatStat(selectedSkill.Damage)</span>
+                    </div>
+                }
+                @if (!string.IsNullOrEmpty(selectedSkill.DamageType))
+                {
+                    <div class="stat-row">
+                        <span class="stat-label">Type</span>
+                        <span class="stat-value">@selectedSkill.DamageType</span>
+                    </div>
+                }
+                @if (ParseValue(selectedSkill.Heal) > 0)
+                {
+                    <div class="stat-row">
+                        <span class="stat-label">Healing</span>
+                        <span class="stat-value">@FormatStat(selectedSkill.Heal)</span>
+                    </div>
+                }
+                @if (ParseValue(selectedSkill.Shield) > 0)
+                {
+                    <div class="stat-row">
+                        <span class="stat-label">Shield</span>
+                        <span class="stat-value">@FormatStat(selectedSkill.Shield)</span>
+                    </div>
+                }
+                @if (!string.IsNullOrEmpty(selectedSkill.Cooldown) && ParseValue(selectedSkill.Cooldown) > 0)
+                {
+                    <div class="stat-row">
+                        <span class="stat-label">Cooldown</span>
+                        <span class="stat-value">@selectedSkill.Cooldown s</span>
+                    </div>
+                }
+                @if (ParseValue(selectedSkill.Mana) > 0)
+                {
+                    <div class="stat-row">
+                        <span class="stat-label">Mana</span>
+                        <span class="stat-value">@FormatStat(selectedSkill.Mana)</span>
+                    </div>
+                }
+                @if (!string.IsNullOrEmpty(selectedSkill.Range) && ParseValue(selectedSkill.Range) > 0)
+                {
+                    <div class="stat-row">
+                        <span class="stat-label">Range</span>
+                        <span class="stat-value">@selectedSkill.Range</span>
+                    </div>
+                }
+            </div>
+
+            @if (selectedSkill.Tags is { Count: > 0 })
+            {
+                <div class="skill-detail-tags">
+                    @foreach (var tag in selectedSkill.Tags)
+                    {
+                        <span class="tag-badge">@tag</span>
+                    }
+                </div>
+            }
+        </div>
+    }
+    else
+    {
+        <div class="skill-detail skill-detail-empty">
+            <div class="empty-hint">
+                <span class="empty-icon">&#x2328;</span>
+                <p>Press a key to view skill details</p>
+            </div>
+        </div>
+    }
+</div>
+</div>
 
 @code {
     private ElementReference containerRef;
@@ -269,6 +387,9 @@
     private KeyData shiftSpaceKey = null!;
     private string selectedCharacter = "Xavian";
     private List<string> Characters = [];
+    private ToastData? toast;
+    private CancellationTokenSource? toastCts;
+    private SkillDoc? selectedSkill;
 
     public class KeyData
     {
@@ -276,6 +397,7 @@
         public string Label { get; set; } = "";
         public string? SkillName { get; set; }
         public string? Character { get; set; }
+        public SkillDoc? SkillDoc { get; set; }
         public double CooldownDuration { get; set; }
         public double Remaining { get; set; }
         public bool OnCooldown => Remaining > 0;
@@ -349,6 +471,7 @@
                 Label = label,
                 SkillName = skillName,
                 Character = skill?.Character,
+                SkillDoc = skill,
                 CooldownDuration = ParseCooldown(skill?.Cooldown)
             };
         }).ToList();
@@ -361,6 +484,7 @@
             Label = "Space",
             SkillName = spaceSkill != null ? Path.GetFileNameWithoutExtension(spaceSkill.FileName) : spaceAction,
             Character = spaceSkill?.Character,
+            SkillDoc = spaceSkill,
             CooldownDuration = ParseCooldown(spaceSkill?.Cooldown)
         };
 
@@ -376,6 +500,7 @@
                 Label = "Shift+" + label,
                 SkillName = skillName,
                 Character = skill?.Character,
+                SkillDoc = skill,
                 CooldownDuration = ParseCooldown(skill?.Cooldown)
             };
         }).ToList();
@@ -388,8 +513,11 @@
             Label = "Shift+Space",
             SkillName = shiftSpaceSkill != null ? Path.GetFileNameWithoutExtension(shiftSpaceSkill.FileName) : shiftSpaceAction,
             Character = shiftSpaceSkill?.Character,
+            SkillDoc = shiftSpaceSkill,
             CooldownDuration = ParseCooldown(shiftSpaceSkill?.Cooldown)
         };
+
+        selectedSkill = null;
     }
 
     private static double ParseCooldown(string? cooldown)
@@ -399,6 +527,20 @@
         return 0;
     }
 
+    private static double ParseValue(string? value)
+    {
+        if (string.IsNullOrEmpty(value)) return 0;
+        var clean = value.Replace(",", "").Trim();
+        if (double.TryParse(clean, out var result)) return result;
+        return 0;
+    }
+
+    private static string FormatStat(string? value)
+    {
+        if (string.IsNullOrEmpty(value)) return "";
+        return value;
+    }
+
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
@@ -437,11 +579,46 @@
         }
     }
 
+    private record ToastData(string SkillName, double Remaining, bool Visible);
+
+    private async void ShowToast(string skillName, double remaining)
+    {
+        toastCts?.Cancel();
+        toastCts = new CancellationTokenSource();
+        var token = toastCts.Token;
+
+        toast = new ToastData(skillName, remaining, true);
+        StateHasChanged();
+
+        try
+        {
+            await Task.Delay(2000, token);
+            if (!token.IsCancellationRequested)
+            {
+                toast = toast with { Visible = false };
+                StateHasChanged();
+                await Task.Delay(300, token);
+                if (!token.IsCancellationRequested)
+                {
+                    toast = null;
+                    StateHasChanged();
+                }
+            }
+        }
+        catch (TaskCanceledException) { }
+    }
+
     private void ActivateKey(KeyData key)
     {
-        if (key.OnCooldown) return;
+        if (key.OnCooldown)
+        {
+            ShowToast(key.SkillName ?? key.Label, Math.Ceiling(key.Remaining));
+            return;
+        }
         if (key.Character == null) return;
 
+        selectedSkill = key.SkillDoc;
+
         var duration = key.CooldownDuration > 0 ? key.CooldownDuration : 0.5;
         key.Remaining = duration;