Replace frontend with Blazor UX implementation

FAQ.md

@@ -13,7 +13,15 @@ This keeps the first commit small while preserving CI discipline. Additional too
 
 ## Is frontend JavaScript handwritten?
 
-No. Frontend source code lives in `RpgRoller/frontend/*.ts` and is compiled to `RpgRoller/wwwroot/*.js` for browser delivery.
+The runtime UI is now built with Blazor components (`RpgRoller/Components/*`).
+
+There is still small handwritten JavaScript in `RpgRoller/wwwroot/js/rpgroller-api.js` for:
+
+- browser `fetch` calls with cookie auth
+- SSE connection/reconnect handling
+- per-tab session storage helpers used by the Blazor UI
+
+The TypeScript frontend folders remain in the repo for tooling and generated API client contract checks used by CI.
 
 ## Where is backend state stored locally?
 

FRONTEND_PROGRESS.md

@@ -0,0 +1,35 @@
+# Frontend Rebuild Progress (Blazor)
+
+Tracking against `UX.md` tasks and decisions.
+
+## Status Snapshot
+
+- Branch: `feature/blazor-frontend-rebuild-ux`
+- Runtime frontend stack: Blazor (`RpgRoller/Components/*`) + browser JS interop (`wwwroot/js/rpgroller-api.js`)
+
+## UX Checklist
+
+| UX area | Status | Notes |
+|---|---|---|
+| 9.1 App load + session restore | Implemented | Health check on load, rulesets/session load, unauthorized session reset, API unhealthy retry banner. |
+| 9.2 Authentication view | Implemented | Register/login cards, required validation, register password length check, server-error display. |
+| 9.3 Shared authenticated header | Implemented | User chip, campaign/active context, connection state, screen switch, refresh, logout. |
+| 9.4 Play screen character column | Implemented | Character icon tabs, sheet, modal edit/create flows, activate action, skill list, roll controls, last roll card. |
+| 9.5 Play screen log column | Implemented | Chronological feed, private/public badges, private perspective styles (roller vs GM), local time + ISO tooltip. |
+| 9.6 Campaign management screen | Implemented | Campaign selector/summary, create form, details card, character management actions with modal edit pattern. |
+| 9.7 Tablet/mobile bottom bar | Implemented | `Character` / `Log` panel switch in play screen and per-tab session persistence. |
+| 10 Validation and error UX | Partially implemented | Required-field and common API errors are mapped; message/code-specific mapping is limited by current API exposing only text messages. |
+| 11 Empty/loading/disabled states | Implemented | Empty states, skeleton placeholders, mutation button disabling. |
+| 12 Real-time and sync rules | Implemented | Campaign-scoped SSE subscribe/unsubscribe, reconnect with exponential backoff, manual refresh fallback. |
+| 13 Accessibility requirements | Partially implemented | Keyboard-friendly controls, labels, focus styling, `aria-live` announcements; screen-reader validation for all flows still needs dedicated accessibility QA. |
+| 14 Content and copy guidance | Implemented | Direct action labels and corrective error copy used throughout. |
+| 15 Visual direction | Implemented | Tabletop utility styling, tokenized colors, responsive layout, private/public visual differentiation. |
+| 17 Next iteration targets: wireframes | Not yet implemented | No separate low-fidelity wireframe artifact added in repo. |
+| 17 Next iteration targets: component contracts doc | Not yet implemented | Component contract document not yet extracted from implementation. |
+| 17 Next iteration targets: visual token doc | Not yet implemented | Tokens are implemented in CSS but not yet documented in a dedicated spec file. |
+
+## Follow-up Candidates
+
+1. Add explicit machine-readable API error codes to HTTP responses for richer field-level mapping.
+2. Add automated accessibility checks (focus order, contrast, and screen-reader behavior assertions).
+3. Document component contracts and visual token references as separate markdown artifacts.

README.md

@@ -2,11 +2,12 @@
 
 Fresh full-stack starter scaffold:
 
-- `RpgRoller/`: ASP.NET Core backend + static frontend output (`wwwroot`)
+- `RpgRoller/`: ASP.NET Core backend + Blazor frontend host (`Components` + `wwwroot`)
 - `RpgRoller/frontend/`: TypeScript frontend source
 - `RpgRoller.Tests/`: xUnit integration-heavy test project
 - `RpgRoller.sln`: solution used by local CI script
 - `UX.md`: frontend UX and interaction design specification (pre-implementation baseline)
+- `FRONTEND_PROGRESS.md`: implementation tracking (`Implemented` / `Partially implemented` / `Not yet implemented`)
 
 Test layout:
 
@@ -25,10 +26,11 @@ Backend:
 
 Frontend:
 
-- `RpgRoller/frontend/app.ts`: orchestration entrypoint
+- `RpgRoller/Components/`: Blazor root app, routes, layout and page components
-- `RpgRoller/frontend/app/`: split modules (`dom`, `state`, `loaders`, `render`, `events`, `actions`)
+- `RpgRoller/Components/Pages/Home.razor(.cs)`: main UX implementation for auth/play/management screens
-- `RpgRoller/frontend/generated/`: generated API client source
+- `RpgRoller/wwwroot/js/rpgroller-api.js`: browser-side API + SSE + session storage interop for Blazor
-- `RpgRoller/wwwroot/`: compiled browser assets
+- `RpgRoller/wwwroot/styles.css`: responsive UX styling and theme tokens
+- `RpgRoller/frontend/generated/`: generated TypeScript API client source retained for contract/tooling parity
 
 Backend state persistence:
 
@@ -92,10 +94,14 @@ To use a custom SQLite database path, set `ConnectionStrings__RpgRoller`.
 
 ## Implemented Frontend Scope
 
-- TypeScript-driven UI for:
+- Blazor-driven UI for:
   - registration, login, logout
+  - play screen and campaign management screen switch
   - campaign creation and selection
-  - character creation and activation
+  - character create/edit/activate via modal forms
-  - skill creation and editing
+  - skill create/edit via modal forms
   - public/private rolling and campaign log viewing
-- SSE-backed live refresh for selected campaign state/log
+- responsive play UX:
+  - desktop two-column (character + log)
+  - tablet/mobile panel switching with bottom tab bar (`Character` / `Log`)
+- SSE-backed live refresh with reconnect status + manual refresh fallback

RpgRoller.Tests/Api/FrontendHostTests.cs

@@ -0,0 +1,24 @@
+using Microsoft.AspNetCore.Mvc.Testing;
+
+namespace RpgRoller.Tests;
+
+public sealed class FrontendHostTests : ApiTestBase
+{
+    public FrontendHostTests(WebApplicationFactory<Program> factory)
+        : base(factory)
+    {
+    }
+
+    [Fact]
+    public async Task RootPath_ServesBlazorFrontendShell()
+    {
+        using var factory = CreateFactory(1);
+        using var client = factory.CreateClient(new WebApplicationFactoryClientOptions { AllowAutoRedirect = false });
+        var response = await client.GetAsync("/");
+
+        Assert.Equal(HttpStatusCode.OK, response.StatusCode);
+        var html = await response.Content.ReadAsStringAsync();
+        Assert.Contains("_framework/blazor.web.js", html);
+        Assert.Contains("Connecting...", html);
+    }
+}

RpgRoller/Components/App.razor

@@ -1,4 +1,5 @@
 @using Microsoft.AspNetCore.Components.Web
+@attribute [ExcludeFromCodeCoverage]
 
 <!DOCTYPE html>
 <html lang="en">

RpgRoller/Components/Pages/Home.razor

@@ -1,7 +1,471 @@
 @page "/"
-@attribute [ExcludeFromCodeCoverage]
+@implements IAsyncDisposable
 
-<main class="app-shell">
+<div class="rr-app">
-    <h1>RpgRoller</h1>
+    <p class="sr-only" aria-live="polite">@LiveAnnouncement</p>
-    <p class="status-line">Frontend migration in progress: Blazor shell is active.</p>
+
-</main>
+    @if (!IsInitialized)
+    {
+        <main class="loading-shell" aria-busy="true" aria-live="polite">
+            <h1>RpgRoller</h1>
+            <p>Connecting...</p>
+        </main>
+    }
+    else
+    {
+        @if (HasHealthIssue)
+        {
+            <section class="health-banner" role="alert">
+                <div>
+                    <strong>API currently unavailable.</strong>
+                    <p>@HealthIssueMessage</p>
+                </div>
+                <button type="button" @onclick="RetryAfterHealthIssueAsync">Retry</button>
+            </section>
+        }
+
+        @if (User is null)
+        {
+            <main class="auth-shell">
+                <h1>RpgRoller</h1>
+                <p class="auth-subtitle">Register or log in to join a campaign session.</p>
+                @if (!string.IsNullOrWhiteSpace(StatusMessage))
+                {
+                    <p class="status-message @(StatusIsError ? "error" : "success")">@StatusMessage</p>
+                }
+                <div class="auth-grid">
+                    <section class="card auth-card">
+                        <h2>Register</h2>
+                        @if (!string.IsNullOrWhiteSpace(RegisterFormError))
+                        {
+                            <p class="form-error">@RegisterFormError</p>
+                        }
+                        <form class="form-grid" @onsubmit="RegisterAsync" @onsubmit:preventDefault>
+                            <label for="register-username">Username</label>
+                            <input id="register-username" @bind="RegisterForm.Username" @bind:event="oninput" autocomplete="username" />
+                            @if (RegisterErrors.TryGetValue("username", out var registerUsernameError))
+                            {
+                                <p class="field-error">@registerUsernameError</p>
+                            }
+                            <label for="register-display-name">Display name</label>
+                            <input id="register-display-name" @bind="RegisterForm.DisplayName" @bind:event="oninput" autocomplete="name" />
+                            @if (RegisterErrors.TryGetValue("displayName", out var registerDisplayNameError))
+                            {
+                                <p class="field-error">@registerDisplayNameError</p>
+                            }
+                            <label for="register-password">Password</label>
+                            <input id="register-password" type="password" @bind="RegisterForm.Password" @bind:event="oninput" autocomplete="new-password" />
+                            @if (RegisterErrors.TryGetValue("password", out var registerPasswordError))
+                            {
+                                <p class="field-error">@registerPasswordError</p>
+                            }
+                            <button type="submit" disabled="@IsMutating">@(IsMutating ? "Registering..." : "Register")</button>
+                        </form>
+                    </section>
+
+                    <section class="card auth-card">
+                        <h2>Login</h2>
+                        @if (!string.IsNullOrWhiteSpace(LoginFormError))
+                        {
+                            <p class="form-error">@LoginFormError</p>
+                        }
+                        <form class="form-grid" @onsubmit="LoginAsync" @onsubmit:preventDefault>
+                            <label for="login-username">Username</label>
+                            <input id="login-username" @bind="LoginForm.Username" @bind:event="oninput" autocomplete="username" />
+                            @if (LoginErrors.TryGetValue("username", out var loginUsernameError))
+                            {
+                                <p class="field-error">@loginUsernameError</p>
+                            }
+                            <label for="login-password">Password</label>
+                            <input id="login-password" type="password" @bind="LoginForm.Password" @bind:event="oninput" autocomplete="current-password" />
+                            @if (LoginErrors.TryGetValue("password", out var loginPasswordError))
+                            {
+                                <p class="field-error">@loginPasswordError</p>
+                            }
+                            <button type="submit" disabled="@IsMutating">@(IsMutating ? "Logging in..." : "Login")</button>
+                        </form>
+                    </section>
+                </div>
+            </main>
+        }
+        else
+        {
+            <div class="workspace-shell">
+                <header class="workspace-header">
+                    <div class="header-group brand">
+                        <h1>RpgRoller</h1>
+                        <p>Tabletop utility cockpit</p>
+                    </div>
+                    <div class="header-group context">
+                        <p><strong>@User.DisplayName</strong> <span class="muted">(@User.Username)</span></p>
+                        <p>Campaign: <strong>@(SelectedCampaignName ?? "No campaign selected")</strong></p>
+                        <p>Active: <strong>@(ActiveCharacterName ?? "None selected")</strong></p>
+                    </div>
+                    <div class="header-group controls">
+                        <p class="connection @ConnectionStateCssClass">@ConnectionStateLabel</p>
+                        <div class="switch-group" role="tablist" aria-label="Screen selector">
+                            <button type="button" class="switch @(CurrentScreen == "play" ? "active" : string.Empty)" @onclick="SwitchToPlayAsync">Play</button>
+                            <button type="button" class="switch @(CurrentScreen == "management" ? "active" : string.Empty)" @onclick="SwitchToManagementAsync">Campaign Management</button>
+                        </div>
+                        <div class="header-actions">
+                            <button type="button" @onclick="ManualRefreshAsync" disabled="@IsMutating">Refresh</button>
+                            <button type="button" class="ghost" @onclick="LogoutAsync" disabled="@IsMutating">Logout</button>
+                        </div>
+                    </div>
+                </header>
+
+                @if (!string.IsNullOrWhiteSpace(StatusMessage))
+                {
+                    <p class="status-message @(StatusIsError ? "error" : "success")">@StatusMessage</p>
+                }
+
+                @if (CurrentScreen == "play")
+                {
+                    <main class="play-screen @(MobilePanel == "log" ? "mobile-log" : "mobile-character")">
+                        <section class="card character-panel">
+                            <div class="section-head"><h2>Character Context</h2></div>
+                            @if (IsCampaignDataLoading)
+                            {
+                                <div class="skeleton-stack"><div class="skeleton-line"></div><div class="skeleton-line short"></div><div class="skeleton-line"></div></div>
+                            }
+                            else if (SelectedCampaign is null)
+                            {
+                                <p class="empty">No campaign selected. Choose one in Campaign Management.</p>
+                            }
+                            else if (SelectedCampaign.Characters.Count == 0)
+                            {
+                                <p class="empty">No characters in this campaign yet.</p>
+                            }
+                            else
+                            {
+                                <div class="character-picker" role="tablist" aria-label="Character picker">
+                                    @foreach (var character in SelectedCampaign.Characters)
+                                    {
+                                        var isSelectedCharacter = SelectedCharacterId == character.Id;
+                                        <button type="button" class="icon-tab @(isSelectedCharacter ? "active" : string.Empty)" aria-label="@character.Name" @onclick="() => SelectCharacter(character.Id)">
+                                            <span class="icon-tab-glyph">@InitialsFor(character.Name)</span>
+                                            <span class="icon-tab-text">@character.Name</span>
+                                        </button>
+                                    }
+                                </div>
+                                @if (SelectedCharacter is not null)
+                                {
+                                    <article class="character-sheet">
+                                        <h3>@SelectedCharacter.Name</h3>
+                                        <p>Owner: @OwnerLabel(SelectedCharacter.OwnerUserId)</p>
+                                        <p>Campaign: @SelectedCampaign.Name</p>
+                                        @if (SelectedCharacter.Id == ActiveCharacterId)
+                                        {
+                                            <span class="badge active">Active</span>
+                                        }
+                                        <div class="inline-actions">
+                                            <button type="button" disabled="@(IsMutating || !CanEditCharacter(SelectedCharacter))" @onclick="() => OpenEditCharacterModal(SelectedCharacter)">Edit Character</button>
+                                            <button type="button" disabled="@(IsMutating || !CanActivateCharacter(SelectedCharacter))" @onclick="() => ActivateCharacterAsync(SelectedCharacter.Id)">Activate Character</button>
+                                        </div>
+                                    </article>
+                                    <article class="skills-section">
+                                        <div class="section-head">
+                                            <h3>Skills</h3>
+                                            <div class="inline-actions">
+                                                <button type="button" disabled="@(IsMutating || !CanEditCharacter(SelectedCharacter))" @onclick="OpenCreateSkillModal">Create Skill</button>
+                                                <button type="button" disabled="@(IsMutating || SelectedSkill is null || !CanEditSkill(SelectedSkill))" @onclick="OpenEditSkillModal">Edit Skill</button>
+                                            </div>
+                                        </div>
+                                        @if (SelectedCharacterSkills.Count == 0)
+                                        {
+                                            <p class="empty">No skills for this character yet.</p>
+                                        }
+                                        else
+                                        {
+                                            <div class="skill-list">
+                                                @foreach (var skill in SelectedCharacterSkills)
+                                                {
+                                                    var isSelectedSkill = SelectedSkillId == skill.Id;
+                                                    <button type="button" class="skill-item @(isSelectedSkill ? "active" : string.Empty)" @onclick="() => SelectSkill(skill.Id)">
+                                                        <strong>@skill.Name</strong><span>@skill.DiceRollDefinition</span>
+                                                    </button>
+                                                }
+                                            </div>
+                                        }
+                                        <form class="roll-panel" @onsubmit="RollSelectedSkillAsync" @onsubmit:preventDefault>
+                                            <label for="roll-visibility">Visibility</label>
+                                            <select id="roll-visibility" @bind="RollVisibility">
+                                                <option value="public">Public</option>
+                                                <option value="private">Private</option>
+                                            </select>
+                                            <button type="submit" disabled="@(IsMutating || SelectedSkill is null || !CanRollSkill(SelectedSkill))">Roll Skill</button>
+                                        </form>
+                                    </article>
+                                }
+                            }
+                            <article class="last-roll">
+                                <h3>Last Roll</h3>
+                                @if (LastRoll is null)
+                                {
+                                    <p class="empty">No roll yet.</p>
+                                }
+                                else
+                                {
+                                    <p class="roll-total">@LastRoll.Result</p>
+                                    <p>@LastRoll.Breakdown</p>
+                                    <p><span class="badge @(LastRoll.Visibility == "private" ? "private-self" : "public")">@LastRoll.Visibility</span> <time title="@LastRoll.TimestampUtc.ToString("O")">@LastRoll.TimestampUtc.ToLocalTime().ToString("g")</time></p>
+                                }
+                            </article>
+                        </section>
+
+                        <aside class="card log-panel">
+                            <div class="section-head"><h2>Campaign Log</h2></div>
+                            @if (IsCampaignDataLoading)
+                            {
+                                <div class="skeleton-stack"><div class="skeleton-line"></div><div class="skeleton-line"></div><div class="skeleton-line short"></div></div>
+                            }
+                            else if (CampaignLog.Count == 0)
+                            {
+                                <p class="empty">No log entries yet.</p>
+                            }
+                            else
+                            {
+                                <ul class="log-list">
+                                    @foreach (var entry in CampaignLog)
+                                    {
+                                        <li class="log-entry @LogEntryCssClass(entry)">
+                                            <p><strong>@RollerLabel(entry)</strong> rolled <strong>@SkillLabel(entry.SkillId)</strong> with <strong>@CharacterLabel(entry.CharacterId)</strong></p>
+                                            <p>@entry.Breakdown</p>
+                                            <p class="log-meta"><span class="badge @VisibilityBadgeCssClass(entry)">@VisibilityLabel(entry)</span> <time title="@entry.TimestampUtc.ToString("O")">@entry.TimestampUtc.ToLocalTime().ToString("g")</time></p>
+                                        </li>
+                                    }
+                                </ul>
+                            }
+                        </aside>
+                    </main>
+                    <nav class="mobile-bottom-nav" aria-label="Play panel selector">
+                        <button type="button" class="switch @(MobilePanel == "character" ? "active" : string.Empty)" @onclick="SetMobilePanelCharacterAsync">Character</button>
+                        <button type="button" class="switch @(MobilePanel == "log" ? "active" : string.Empty)" @onclick="SetMobilePanelLogAsync">Log</button>
+                    </nav>
+                }
+                else
+                {
+                    <main class="management-screen">
+                        <section class="card">
+                            <h2>Campaign Selector</h2>
+                            @if (Campaigns.Count == 0)
+                            {
+                                <p class="empty">No campaigns yet.</p>
+                            }
+                            else
+                            {
+                                <label for="campaign-select">Campaign</label>
+                                <select id="campaign-select" @onchange="OnCampaignSelectionChangedAsync">
+                                    @foreach (var campaign in Campaigns)
+                                    {
+                                        <option value="@campaign.Id" selected="@(campaign.Id == SelectedCampaignId)">@campaign.Name (@campaign.RulesetId)</option>
+                                    }
+                                </select>
+                            }
+                            <p class="muted">Current campaign in this tab: <strong>@(SelectedCampaignName ?? "None selected")</strong></p>
+                        </section>
+                        <section class="card">
+                            <h2>Create Campaign</h2>
+                            @if (!string.IsNullOrWhiteSpace(CampaignFormError))
+                            {
+                                <p class="form-error">@CampaignFormError</p>
+                            }
+                            <form class="form-grid" @onsubmit="CreateCampaignAsync" @onsubmit:preventDefault>
+                                <label for="campaign-name">Campaign name</label>
+                                <input id="campaign-name" @bind="CampaignForm.Name" @bind:event="oninput" />
+                                @if (CampaignErrors.TryGetValue("name", out var campaignNameError))
+                                {
+                                    <p class="field-error">@campaignNameError</p>
+                                }
+                                <label for="campaign-ruleset">Ruleset</label>
+                                <select id="campaign-ruleset" @bind="CampaignForm.RulesetId">
+                                    <option value="">Select ruleset</option>
+                                    @foreach (var ruleset in Rulesets)
+                                    {
+                                        <option value="@ruleset.Id">@ruleset.Name</option>
+                                    }
+                                </select>
+                                @if (CampaignErrors.TryGetValue("rulesetId", out var campaignRulesetError))
+                                {
+                                    <p class="field-error">@campaignRulesetError</p>
+                                }
+                                <button type="submit" disabled="@IsMutating">@(IsMutating ? "Creating..." : "Create Campaign")</button>
+                            </form>
+                        </section>
+                        <section class="card">
+                            <h2>Campaign Details</h2>
+                            @if (SelectedCampaign is null)
+                            {
+                                <p class="empty">No campaign selected.</p>
+                            }
+                            else
+                            {
+                                <p>Name: <strong>@SelectedCampaign.Name</strong></p>
+                                <p>Ruleset: <strong>@SelectedCampaign.RulesetId</strong></p>
+                                <p>GM: <strong>@SelectedCampaign.Gm.DisplayName</strong> <span class="muted">(@SelectedCampaign.Gm.Username)</span></p>
+                                <p>Characters visible: <strong>@SelectedCampaign.Characters.Count</strong></p>
+                            }
+                        </section>
+                        <section class="card">
+                            <div class="section-head">
+                                <h2>Character Management</h2>
+                                <button type="button" disabled="@(IsMutating || SelectedCampaign is null)" @onclick="OpenCreateCharacterModal">Create Character</button>
+                            </div>
+                            @if (SelectedCampaign is null)
+                            {
+                                <p class="empty">Select a campaign first.</p>
+                            }
+                            else if (SelectedCampaign.Characters.Count == 0)
+                            {
+                                <p class="empty">No characters in this campaign yet.</p>
+                            }
+                            else
+                            {
+                                <ul class="management-list">
+                                    @foreach (var character in SelectedCampaign.Characters)
+                                    {
+                                        <li>
+                                            <div><strong>@character.Name</strong><p class="muted">Owner: @OwnerLabel(character.OwnerUserId)</p></div>
+                                            <div class="inline-actions">
+                                                <button type="button" disabled="@(IsMutating || !CanEditCharacter(character))" @onclick="() => OpenEditCharacterModal(character)">Edit</button>
+                                                <button type="button" disabled="@(IsMutating || !CanActivateCharacter(character))" @onclick="() => ActivateCharacterAsync(character.Id)">Activate</button>
+                                            </div>
+                                        </li>
+                                    }
+                                </ul>
+                            }
+                        </section>
+                    </main>
+                }
+            </div>
+        }
+    }
+</div>
+
+@if (ShowCreateCharacterModal)
+{
+    <div class="modal-overlay" role="presentation">
+        <section class="modal-card" role="dialog" aria-modal="true" aria-label="Create character">
+            <h2>Create Character</h2>
+            @if (!string.IsNullOrWhiteSpace(CharacterFormError))
+            {
+                <p class="form-error">@CharacterFormError</p>
+            }
+            <form class="form-grid" @onsubmit="CreateCharacterAsync" @onsubmit:preventDefault>
+                <label for="character-create-name">Character name</label>
+                <input id="character-create-name" @bind="CharacterForm.Name" @bind:event="oninput" />
+                @if (CharacterErrors.TryGetValue("name", out var createCharacterNameError))
+                {
+                    <p class="field-error">@createCharacterNameError</p>
+                }
+                <label for="character-create-campaign">Campaign</label>
+                <select id="character-create-campaign" @bind="CharacterForm.CampaignId">
+                    <option value="">Select campaign</option>
+                    @foreach (var campaign in Campaigns)
+                    {
+                        <option value="@campaign.Id">@campaign.Name</option>
+                    }
+                </select>
+                <div class="inline-actions">
+                    <button type="submit" disabled="@IsMutating">Create Character</button>
+                    <button type="button" class="ghost" @onclick="CloseCharacterModals">Cancel</button>
+                </div>
+            </form>
+        </section>
+    </div>
+}
+
+@if (ShowEditCharacterModal)
+{
+    <div class="modal-overlay" role="presentation">
+        <section class="modal-card" role="dialog" aria-modal="true" aria-label="Edit character">
+            <h2>Edit Character</h2>
+            @if (!string.IsNullOrWhiteSpace(EditCharacterFormError))
+            {
+                <p class="form-error">@EditCharacterFormError</p>
+            }
+            <form class="form-grid" @onsubmit="UpdateCharacterAsync" @onsubmit:preventDefault>
+                <label for="character-edit-name">Character name</label>
+                <input id="character-edit-name" @bind="EditCharacterForm.Name" @bind:event="oninput" />
+                @if (EditCharacterErrors.TryGetValue("name", out var editCharacterNameError))
+                {
+                    <p class="field-error">@editCharacterNameError</p>
+                }
+                <label for="character-edit-campaign">Campaign</label>
+                <select id="character-edit-campaign" @bind="EditCharacterForm.CampaignId">
+                    <option value="">Select campaign</option>
+                    @foreach (var campaign in Campaigns)
+                    {
+                        <option value="@campaign.Id">@campaign.Name</option>
+                    }
+                </select>
+                <div class="inline-actions">
+                    <button type="submit" disabled="@IsMutating">Save Character</button>
+                    <button type="button" class="ghost" @onclick="CloseCharacterModals">Cancel</button>
+                </div>
+            </form>
+        </section>
+    </div>
+}
+
+@if (ShowCreateSkillModal)
+{
+    <div class="modal-overlay" role="presentation">
+        <section class="modal-card" role="dialog" aria-modal="true" aria-label="Create skill">
+            <h2>Create Skill</h2>
+            @if (!string.IsNullOrWhiteSpace(SkillFormError))
+            {
+                <p class="form-error">@SkillFormError</p>
+            }
+            <form class="form-grid" @onsubmit="CreateSkillAsync" @onsubmit:preventDefault>
+                <label for="skill-create-name">Skill name</label>
+                <input id="skill-create-name" @bind="SkillForm.Name" @bind:event="oninput" />
+                @if (SkillErrors.TryGetValue("name", out var createSkillNameError))
+                {
+                    <p class="field-error">@createSkillNameError</p>
+                }
+                <label for="skill-create-expression">Expression</label>
+                <input id="skill-create-expression" @bind="SkillForm.DiceRollDefinition" @bind:event="oninput" />
+                @if (SkillErrors.TryGetValue("diceRollDefinition", out var createSkillExpressionError))
+                {
+                    <p class="field-error">@createSkillExpressionError</p>
+                }
+                <div class="inline-actions">
+                    <button type="submit" disabled="@IsMutating">Create Skill</button>
+                    <button type="button" class="ghost" @onclick="CloseSkillModals">Cancel</button>
+                </div>
+            </form>
+        </section>
+    </div>
+}
+
+@if (ShowEditSkillModal)
+{
+    <div class="modal-overlay" role="presentation">
+        <section class="modal-card" role="dialog" aria-modal="true" aria-label="Edit skill">
+            <h2>Edit Skill</h2>
+            @if (!string.IsNullOrWhiteSpace(EditSkillFormError))
+            {
+                <p class="form-error">@EditSkillFormError</p>
+            }
+            <form class="form-grid" @onsubmit="UpdateSkillAsync" @onsubmit:preventDefault>
+                <label for="skill-edit-name">Skill name</label>
+                <input id="skill-edit-name" @bind="EditSkillForm.Name" @bind:event="oninput" />
+                @if (EditSkillErrors.TryGetValue("name", out var editSkillNameError))
+                {
+                    <p class="field-error">@editSkillNameError</p>
+                }
+                <label for="skill-edit-expression">Expression</label>
+                <input id="skill-edit-expression" @bind="EditSkillForm.DiceRollDefinition" @bind:event="oninput" />
+                @if (EditSkillErrors.TryGetValue("diceRollDefinition", out var editSkillExpressionError))
+                {
+                    <p class="field-error">@editSkillExpressionError</p>
+                }
+                <div class="inline-actions">
+                    <button type="submit" disabled="@IsMutating">Save Skill</button>
+                    <button type="button" class="ghost" @onclick="CloseSkillModals">Cancel</button>
+                </div>
+            </form>
+        </section>
+    </div>
+}

RpgRoller/Components/Routes.razor

@@ -1,3 +1,5 @@
+@attribute [ExcludeFromCodeCoverage]
+
 <Router AppAssembly="@typeof(Program).Assembly">
     <Found Context="routeData">
         <RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />

RpgRoller/Program.cs

@@ -10,6 +10,7 @@ var app = builder.Build();
 app.InitializeRpgRollerState();
 
 app.UseStaticFiles();
+app.UseAntiforgery();
 
 app.MapRpgRollerApi();
 app.MapRazorComponents<RpgRoller.Components.App>()

RpgRoller/wwwroot/js/rpgroller-api.js

@@ -1,4 +1,112 @@
 window.rpgRollerApi = (() => {
+    const sessionPrefix = "rpgroller.";
+    const stateStream = {
+        source: null,
+        dotNetRef: null,
+        campaignId: null,
+        reconnectDelayMs: 1000,
+        reconnectTimer: null,
+        stopped: true
+    };
+
+    function clearReconnectTimer() {
+        if (stateStream.reconnectTimer) {
+            clearTimeout(stateStream.reconnectTimer);
+            stateStream.reconnectTimer = null;
+        }
+    }
+
+    function invokeDotNet(method, ...args) {
+        if (!stateStream.dotNetRef) {
+            return;
+        }
+
+        stateStream.dotNetRef.invokeMethodAsync(method, ...args).catch(() => {
+        });
+    }
+
+    function scheduleReconnect() {
+        if (stateStream.stopped || stateStream.reconnectTimer) {
+            return;
+        }
+
+        const delay = stateStream.reconnectDelayMs;
+        stateStream.reconnectTimer = setTimeout(() => {
+            stateStream.reconnectTimer = null;
+            if (stateStream.stopped) {
+                return;
+            }
+
+            stateStream.reconnectDelayMs = Math.min(stateStream.reconnectDelayMs * 2, 30000);
+            connectStateStream();
+        }, delay);
+    }
+
+    function connectStateStream() {
+        if (stateStream.stopped || !stateStream.campaignId) {
+            return;
+        }
+
+        clearReconnectTimer();
+        invokeDotNet("OnConnectionStateChanged", "reconnecting");
+
+        const source = new EventSource(`/api/events/state?campaignId=${encodeURIComponent(stateStream.campaignId)}`);
+        stateStream.source = source;
+
+        source.onopen = () => {
+            stateStream.reconnectDelayMs = 1000;
+            invokeDotNet("OnConnectionStateChanged", "connected");
+        };
+
+        source.addEventListener("state", (event) => {
+            try {
+                const payload = JSON.parse(event.data);
+                const version = typeof payload.version === "number" ? payload.version : 0;
+                invokeDotNet("OnStateEventReceived", version);
+            }
+            catch {
+                invokeDotNet("OnStateEventReceived", 0);
+            }
+        });
+
+        source.onerror = () => {
+            if (stateStream.source === source) {
+                source.close();
+                stateStream.source = null;
+            }
+
+            if (stateStream.stopped) {
+                return;
+            }
+
+            invokeDotNet("OnConnectionStateChanged", "reconnecting");
+            scheduleReconnect();
+        };
+    }
+
+    function stopStateEvents() {
+        stateStream.stopped = true;
+        clearReconnectTimer();
+
+        if (stateStream.source) {
+            stateStream.source.close();
+            stateStream.source = null;
+        }
+
+        stateStream.campaignId = null;
+        stateStream.dotNetRef = null;
+    }
+
+    window.addEventListener("offline", () => {
+        invokeDotNet("OnConnectionStateChanged", "offline");
+    });
+
+    window.addEventListener("online", () => {
+        if (!stateStream.stopped) {
+            connectStateStream();
+        }
+    });
+
     async function request(method, url, body) {
         const options = {
             method,
@@ -51,7 +159,34 @@ window.rpgRollerApi = (() => {
         };
     }
 
+    function getSessionValue(key) {
+        return sessionStorage.getItem(`${sessionPrefix}${key}`);
+    }
+
+    function setSessionValue(key, value) {
+        const qualifiedKey = `${sessionPrefix}${key}`;
+        if (value === null || value === undefined || value === "") {
+            sessionStorage.removeItem(qualifiedKey);
+            return;
+        }
+
+        sessionStorage.setItem(qualifiedKey, value);
+    }
+
+    function startStateEvents(campaignId, dotNetRef) {
+        stopStateEvents();
+        stateStream.stopped = false;
+        stateStream.dotNetRef = dotNetRef;
+        stateStream.campaignId = campaignId;
+        stateStream.reconnectDelayMs = 1000;
+        connectStateStream();
+    }
+
     return {
-        request
+        request,
+        getSessionValue,
+        setSessionValue,
+        startStateEvents,
+        stopStateEvents
     };
 })();

RpgRoller/wwwroot/styles.css

@@ -1,66 +1,305 @@
+:root {
+    --bg-top: #f7f0d8;
+    --bg-bottom: #ecdfc4;
+    --card: #fffaf0;
+    --card-border: #c3b28b;
+    --text: #2b2418;
+    --muted: #6a5b3f;
+    --accent: #385f3d;
+    --accent-2: #9a402b;
+    --warn: #b4681b;
+    --danger: #8f2323;
+    --focus: #1d3f72;
+    --public: #2d6645;
+    --private-self: #4f3a8f;
+    --private-gm: #915119;
+}
+
 * {
     box-sizing: border-box;
 }
 
+html,
 body {
     margin: 0;
-    min-height: 100vh;
+    min-height: 100%;
-    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-    background: linear-gradient(165deg, #f2f4f8 0%, #e6ebf5 100%);
-    color: #1f2937;
 }
 
-.layout {
+body {
-    max-width: 56rem;
+    background:
+        radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.32), transparent 45%),
+        linear-gradient(165deg, var(--bg-top), var(--bg-bottom));
+    color: var(--text);
+    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Segoe UI", sans-serif;
+    line-height: 1.4;
+}
+
+h1,
+h2,
+h3 {
+    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
+    letter-spacing: 0.02em;
+}
+
+.rr-app {
+    max-width: 78rem;
     margin: 0 auto;
-    padding: 2.5rem 1.25rem;
+    padding: 1rem 1rem 4.5rem;
+}
+
+.loading-shell,
+.auth-shell {
+    display: grid;
+    gap: 1rem;
+    max-width: 70rem;
+    margin: 0 auto;
+}
+
+.auth-subtitle {
+    margin-top: 0;
+    color: var(--muted);
+}
+
+.workspace-shell {
     display: grid;
     gap: 1rem;
 }
 
-.panel {
+.workspace-header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
     display: grid;
-    gap: 0.6rem;
+    gap: 0.75rem;
-    background: rgba(255, 255, 255, 0.8);
+    grid-template-columns: 1.1fr 1.2fr 1fr;
-    border: 1px solid #c8d2e6;
+    background: linear-gradient(120deg, #f1e4c9, #efe0bf);
-    border-radius: 0.6rem;
+    border: 1px solid var(--card-border);
-    padding: 0.9rem;
+    border-radius: 0.8rem;
+    padding: 0.85rem;
+    backdrop-filter: blur(6px);
 }
 
-.grid-form {
+.header-group {
     display: grid;
-    gap: 0.5rem;
+    gap: 0.2rem;
 }
 
-.inline-controls {
+.brand h1 {
+    margin: 0;
+}
+
+.brand p,
+.context p {
+    margin: 0;
+}
+
+.controls {
+    justify-items: end;
+}
+
+.switch-group,
+.header-actions,
+.inline-actions {
     display: flex;
-    gap: 0.5rem;
+    gap: 0.45rem;
+    flex-wrap: wrap;
+}
+
+.card {
+    background: color-mix(in srgb, var(--card) 94%, #ffffff 6%);
+    border: 1px solid var(--card-border);
+    border-radius: 0.8rem;
+    padding: 0.85rem;
+    display: grid;
+    gap: 0.75rem;
+}
+
+.auth-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+}
+
+.form-grid {
+    display: grid;
+    gap: 0.35rem;
+}
+
+label {
+    font-weight: 600;
 }
 
 input,
 select,
 button {
     font: inherit;
-    padding: 0.6rem 0.75rem;
+    border-radius: 0.45rem;
+    border: 1px solid #8e7b57;
+    padding: 0.55rem 0.65rem;
+}
+
+input,
+select {
+    background: #fffdf5;
+    color: var(--text);
 }
 
 button {
-    border: 0;
+    background: linear-gradient(180deg, var(--accent), #2f4f34);
-    border-radius: 0.4rem;
+    color: #f8f7ef;
-    background: #2563eb;
+    border-color: transparent;
-    color: #ffffff;
     cursor: pointer;
 }
 
-.status,
+button.ghost {
-.result {
+    background: transparent;
-    font-weight: 600;
+    color: var(--text);
+    border-color: #8e7b57;
 }
 
-.message {
+button.switch {
-    min-height: 1.5rem;
+    background: transparent;
-    color: #1d4ed8;
+    color: var(--text);
-    font-weight: 600;
+    border-color: #8e7b57;
+}
+
+button.switch.active {
+    background: var(--accent-2);
+    border-color: var(--accent-2);
+    color: #fff9ef;
+}
+
+button:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+button:focus-visible,
+input:focus-visible,
+select:focus-visible {
+    outline: 3px solid var(--focus);
+    outline-offset: 2px;
+}
+
+.status-message,
+.form-error,
+.field-error {
+    margin: 0;
+}
+
+.status-message {
+    font-weight: 700;
+}
+
+.status-message.success {
+    color: var(--public);
+}
+
+.status-message.error,
+.form-error,
+.field-error {
+    color: var(--danger);
+}
+
+.section-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+}
+
+.play-screen {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(19rem, 1fr);
+    gap: 1rem;
+}
+
+.management-screen {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1rem;
+}
+
+.character-picker {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.45rem;
+}
+
+.icon-tab {
+    display: grid;
+    place-items: center;
+    gap: 0.2rem;
+    min-width: 4.8rem;
+    padding: 0.45rem;
+    background: transparent;
+    color: var(--text);
+    border-color: #8e7b57;
+}
+
+.icon-tab.active {
+    background: linear-gradient(145deg, #e9d4a4, #d7b672);
+    border-color: #9e7328;
+}
+
+.icon-tab-glyph {
+    width: 2rem;
+    height: 2rem;
+    display: grid;
+    place-items: center;
+    border-radius: 50%;
+    border: 1px solid #8e7b57;
+    font-weight: 700;
+}
+
+.icon-tab-text {
+    font-size: 0.82rem;
+}
+
+.character-sheet,
+.skills-section,
+.last-roll {
+    border: 1px dashed #a89066;
+    border-radius: 0.65rem;
+    padding: 0.65rem;
+    display: grid;
+    gap: 0.4rem;
+}
+
+.skill-list {
+    display: grid;
+    gap: 0.35rem;
+}
+
+.skill-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.6rem;
+    background: #f8f1df;
+    color: var(--text);
+    border: 1px solid #b39f79;
+}
+
+.skill-item.active {
+    border-color: #7b5a1f;
+    background: #ecdfc2;
+}
+
+.roll-panel {
+    display: grid;
+    gap: 0.4rem;
+}
+
+.roll-total {
+    font-size: 1.8rem;
+    font-weight: 800;
+    margin: 0;
+}
+
+.empty,
+.muted {
+    color: var(--muted);
 }
 
 .log-list {
@@ -68,11 +307,213 @@ button {
     margin: 0;
     padding: 0;
     display: grid;
-    gap: 0.35rem;
+    gap: 0.5rem;
 }
 
-.log-item {
+.log-entry {
-    padding: 0.45rem 0.55rem;
+    border: 1px solid #b8a37b;
-    border-radius: 0.35rem;
+    border-radius: 0.55rem;
-    background: #f6f8fc;
+    padding: 0.5rem;
+    background: #f8f0de;
+}
+
+.log-entry.private-self {
+    border-color: #6252a8;
+    background: #ece7ff;
+}
+
+.log-entry.private-gm {
+    border-color: #9a5f1e;
+    background: #fff1db;
+}
+
+.log-meta {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.badge {
+    display: inline-flex;
+    border-radius: 999px;
+    font-size: 0.78rem;
+    padding: 0.18rem 0.45rem;
+    border: 1px solid transparent;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+}
+
+.badge.active {
+    border-color: #8f5f12;
+    background: #f6d28d;
+    color: #5d3808;
+}
+
+.badge.public {
+    background: #e1f2e3;
+    color: var(--public);
+}
+
+.badge.private-self {
+    background: #e8ddfb;
+    color: var(--private-self);
+}
+
+.badge.private-gm {
+    background: #f9e2be;
+    color: var(--private-gm);
+}
+
+.badge.private-generic {
+    background: #f4e8d4;
+    color: #6f5832;
+}
+
+.connection {
+    font-weight: 700;
+    margin: 0;
+}
+
+.connection.ok {
+    color: var(--public);
+}
+
+.connection.warn {
+    color: var(--warn);
+}
+
+.connection.offline {
+    color: var(--danger);
+}
+
+.skeleton-stack {
+    display: grid;
+    gap: 0.4rem;
+}
+
+.skeleton-line {
+    height: 0.85rem;
+    border-radius: 0.4rem;
+    background: linear-gradient(90deg, #dfd2b7, #efe3c9, #dfd2b7);
+    background-size: 220% 100%;
+    animation: shimmer 1.1s linear infinite;
+}
+
+.skeleton-line.short {
+    width: 65%;
+}
+
+.health-banner {
+    border: 1px solid #b77a29;
+    background: #fff2db;
+    border-radius: 0.75rem;
+    padding: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.management-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 0.45rem;
+}
+
+.management-list li {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+    border: 1px solid #b8a37b;
+    border-radius: 0.55rem;
+    padding: 0.5rem;
+}
+
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(35, 25, 9, 0.55);
+    display: grid;
+    place-items: center;
+    z-index: 20;
+    padding: 1rem;
+}
+
+.modal-card {
+    width: min(32rem, 100%);
+    background: var(--card);
+    border: 1px solid var(--card-border);
+    border-radius: 0.85rem;
+    padding: 0.9rem;
+    display: grid;
+    gap: 0.65rem;
+}
+
+.mobile-bottom-nav {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 30;
+    padding: 0.55rem;
+    display: none;
+    gap: 0.45rem;
+    background: rgba(241, 228, 201, 0.96);
+    border-top: 1px solid var(--card-border);
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}
+
+@keyframes shimmer {
+    from {
+        background-position: 220% 0;
+    }
+
+    to {
+        background-position: -220% 0;
+    }
+}
+
+@media (max-width: 1023px) {
+    .workspace-header {
+        position: static;
+        grid-template-columns: 1fr;
+    }
+
+    .play-screen {
+        grid-template-columns: 1fr;
+    }
+
+    .play-screen.mobile-log .character-panel {
+        display: none;
+    }
+
+    .play-screen.mobile-character .log-panel {
+        display: none;
+    }
+
+    .management-screen {
+        grid-template-columns: 1fr;
+    }
+
+    .auth-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .mobile-bottom-nav {
+        display: flex;
+    }
 }