diff --git a/.env.example b/.env.example
index 6ade72b..7d3c28d 100644
--- a/.env.example
+++ b/.env.example
@@ -26,3 +26,18 @@ Llm__Providers__OpenAI__Model=gpt-5.1
 Llm__Providers__Claude__Model=claude-3-5-haiku-latest
 Llm__Providers__Claude__Version=2023-06-01
 Llm__Providers__Gemini__Model=gemini-3.1-flash-lite
+# LM Studio does not require auth by default; a harmless placeholder such as
+# "lmstudio" is sufficient for the saved provider key when auth is off.
+# If the backend runs in Docker, point this at a host-reachable LM Studio server,
+# for example http://host.docker.internal:1234/v1.
+Llm__Providers__LmStudio__BaseUrl=http://localhost:1234/v1
+Llm__Providers__LmStudio__Model=local-model
+
+# Built-in guest preview keys used once per logged-out browser session.
+# These should be low-quota or dedicated guest credentials.
+Llm__GuestPreview__OpenAI__ApiKey=
+Llm__GuestPreview__OpenAI__Model=gpt-5.2
+Llm__GuestPreview__Claude__ApiKey=
+Llm__GuestPreview__Claude__Model=claude-sonnet-4-20250514
+Llm__GuestPreview__Gemini__ApiKey=
+Llm__GuestPreview__Gemini__Model=gemini-2.5-flash
diff --git a/.gitignore b/.gitignore
index deecb06..61aeabd 100644
Binary files a/.gitignore and b/.gitignore differ
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 985e24a..2f1c824 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -27,7 +27,7 @@ docker compose up --build
 Coliee/
 ├── .github/workflows/        CI/CD pipelines (GitHub Actions)
 ├── backend/Coliee.API/       .NET 8 Web API
-├── frontend/                 React frontend (Vite + Nginx)
+├── frontend/                 Unified React frontend (Vite + Nginx)
 ├── docker-compose.yml        Multi-service orchestration
 ├── init.sql                  MySQL schema initialisation
 ├── .env.example              Environment variable template
diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md
index 092bcae..f59216d 100644
--- a/DEPLOYMENT.md
+++ b/DEPLOYMENT.md
@@ -145,6 +145,12 @@ Go to your repo → **Settings** → **Secrets and variables** → **Actions** a
 | `SMTP_PORT`            | `587`                                          |
 | `SMTP_USER`            | Your Gmail address                             |
 | `SMTP_PASSWORD`        | [Google App Password](https://myaccount.google.com/apppasswords) |
+| `Llm__GuestPreview__OpenAI__ApiKey` | Dedicated one-time guest preview key for OpenAI |
+| `Llm__GuestPreview__OpenAI__Model` | Default built-in OpenAI guest model |
+| `Llm__GuestPreview__Claude__ApiKey` | Dedicated one-time guest preview key for Claude |
+| `Llm__GuestPreview__Claude__Model` | Default built-in Claude guest model |
+| `Llm__GuestPreview__Gemini__ApiKey` | Dedicated one-time guest preview key for Gemini |
+| `Llm__GuestPreview__Gemini__Model` | Default built-in Gemini guest model |
 
 ---
 
diff --git a/README.md b/README.md
index bbccdb7..a2f0e8d 100644
--- a/README.md
+++ b/README.md
@@ -15,8 +15,8 @@
 - � **Note Generation** — synthesise notes from any combination of nodes
 - � **Export** — download notes as PDF or plain text
 - 🔒 **Secure Authentication** — JWT-based auth with BCrypt password hashing
-- 🔑 **BYOK Provider Settings** — save and manage personal OpenAI, Claude, and Gemini keys
-- 💬 **Main-Node Chat** — minimal chat surface on `/home` using the selected BYOK provider
+- 🔑 **BYOK Provider Settings** — save and manage personal OpenAI, Claude, Gemini, and LM Studio keys
+- 💬 **Canvas Workspace** — the primary frontend experience now lives in the unified canvas workspace on `/`
 
 ---
 
@@ -27,7 +27,7 @@
 | Frontend   | React.js (functional components + hooks), React Flow |
 | Backend    | ASP.NET Web API (.NET 8), ADO.NET       |
 | Database   | MySQL 8.0 hosted on Supabase            |
-| AI         | OpenAI API (GPT-4 / GPT-3.5-turbo)     |
+| AI         | OpenAI, Anthropic Claude, and Google Gemini APIs |
 | Proxy      | Nginx reverse proxy                     |
 | DevOps     | Docker, GitHub Actions CI/CD            |
 | Hosting    | Azure App Service (API) + Azure Static Web Apps (frontend) |
@@ -56,7 +56,8 @@ Coliee/
 - [Docker](https://docs.docker.com/get-docker/) & Docker Compose
 - [.NET 8 SDK](https://dotnet.microsoft.com/download/dotnet/8.0) *(for backend development outside Docker)*
 - [Node.js 18+](https://nodejs.org/) *(for frontend development outside Docker)*
-- A provider API key for OpenAI, Claude, or Gemini if you want to use the BYOK chat flow
+- A provider API key for OpenAI, Claude, Gemini, or LM Studio if you want to use the BYOK chat flow
+- Optional built-in guest preview API keys for OpenAI, Claude, and Gemini if you want logged-out users to get one real AI action before sign-in
 
 ### 1. Clone the repository
 
@@ -81,6 +82,18 @@ MYSQL_ROOT_PASSWORD=your_root_password
 
 JWT_KEY=your_jwt_secret
 Llm__EncryptionKey=replace-with-base64-32-byte-key
+Llm__GuestPreview__OpenAI__ApiKey=
+Llm__GuestPreview__OpenAI__Model=gpt-5.2
+Llm__GuestPreview__Claude__ApiKey=
+Llm__GuestPreview__Claude__Model=claude-sonnet-4-20250514
+Llm__GuestPreview__Gemini__ApiKey=
+Llm__GuestPreview__Gemini__Model=gemini-2.5-flash
+# LM Studio does not require auth by default; a placeholder such as
+# "lmstudio" is enough for the saved provider key when auth is off.
+# If the backend runs in Docker, point LM Studio at a host-reachable URL such as
+# http://host.docker.internal:1234/v1.
+Llm__Providers__LmStudio__BaseUrl=http://localhost:1234/v1
+Llm__Providers__LmStudio__Model=local-model
 
 # Backend API URL (used by frontend)
 VITE_API_URL=http://localhost:5000
@@ -162,7 +175,7 @@ The backend follows a **layered structure**:
 Controller  →  Service  →  Data Access (ADO.NET)  →  MySQL
 ```
 
-All LLM providers are abstracted behind an interface, and the current BYOK flow supports OpenAI, Claude, and Gemini using user-managed keys stored encrypted at rest.
+All LLM providers are abstracted behind an interface, and the current BYOK flow supports OpenAI, Claude, Gemini, and LM Studio using user-managed keys stored encrypted at rest. Logged-out guest canvas actions can also use dedicated built-in preview keys for a single real AI action before sign-in is required.
 
 ---
 
diff --git a/backend/Coliee.API.Tests/AuthControllerTests.cs b/backend/Coliee.API.Tests/AuthControllerTests.cs
index 2377714..e0b9321 100644
--- a/backend/Coliee.API.Tests/AuthControllerTests.cs
+++ b/backend/Coliee.API.Tests/AuthControllerTests.cs
@@ -2,6 +2,7 @@
 using Coliee.API.DTOs;
 using Coliee.API.Services;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Logging.Abstractions;
 using Xunit;
 
 namespace Coliee.API.Tests;
@@ -57,7 +58,14 @@ public async Task ResendPasswordResetOtp_ReturnsRateLimitPayload_OnBlock()
     }
 
     private static AuthController CreateController(IPasswordResetOtpService passwordResetOtpService) =>
-        new(null!, null!, passwordResetOtpService, new StubEmailVerificationOtpService(), new StubPasswordPolicyService(), new StubGoogleAuthService());
+        new(
+            null!,
+            null!,
+            passwordResetOtpService,
+            new StubEmailVerificationOtpService(),
+            new StubPasswordPolicyService(),
+            new StubGoogleAuthService(),
+            NullLogger<AuthController>.Instance);
 }
 
 internal sealed class StubPasswordResetOtpService : IPasswordResetOtpService
diff --git a/backend/Coliee.API.Tests/Controllers/AuthControllerTests.cs b/backend/Coliee.API.Tests/Controllers/AuthControllerTests.cs
index 39a6fd4..9084abc 100644
--- a/backend/Coliee.API.Tests/Controllers/AuthControllerTests.cs
+++ b/backend/Coliee.API.Tests/Controllers/AuthControllerTests.cs
@@ -5,6 +5,7 @@
 using Coliee.API.Services;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.Logging.Abstractions;
 using Xunit;
 
 namespace Coliee.API.Tests.Controllers;
@@ -220,7 +221,8 @@ private static AuthController CreateController(
             new StubPasswordResetOtpService(),
             emailVerificationOtpService ?? new StubEmailVerificationOtpService(),
             new StubPasswordPolicyService(),
-            googleAuthService);
+            googleAuthService,
+            NullLogger<AuthController>.Instance);
     }
 
     private static TokenService CreateTokenService()
diff --git a/backend/Coliee.API.Tests/Controllers/CanvasesControllerTests.cs b/backend/Coliee.API.Tests/Controllers/CanvasesControllerTests.cs
index 2144c24..76e33f1 100644
--- a/backend/Coliee.API.Tests/Controllers/CanvasesControllerTests.cs
+++ b/backend/Coliee.API.Tests/Controllers/CanvasesControllerTests.cs
@@ -21,7 +21,7 @@ public async Task GetCanvases_ReturnsOrderedCanvasSummaries()
                 new CanvasSummaryResponse { Id = 1, Title = "Older" }
             ]
         };
-        var controller = CreateController(service, new FakeCanvasGraphService());
+        var controller = CreateController(new FakeCanvasCreationService(), service, new FakeCanvasGraphService());
 
         var result = await controller.GetCanvases();
 
@@ -34,14 +34,16 @@ public async Task GetCanvases_ReturnsOrderedCanvasSummaries()
     public async Task CreateCanvas_ReturnsCreatedStatus()
     {
         var service = new FakeCanvasService
+        { };
+        var creationService = new FakeCanvasCreationService
         {
             CreateResult = new CanvasSummaryResponse
             {
                 Id = 10,
-                Title = "Launch checklist"
+                Title = "Launch Checklist"
             }
         };
-        var controller = CreateController(service, new FakeCanvasGraphService());
+        var controller = CreateController(creationService, service, new FakeCanvasGraphService());
 
         var result = await controller.CreateCanvas(new CreateCanvasRequest { FirstPrompt = "Launch checklist" });
 
@@ -49,17 +51,40 @@ public async Task CreateCanvas_ReturnsCreatedStatus()
         Assert.Equal(201, objectResult.StatusCode);
         var payload = Assert.IsType<CanvasSummaryResponse>(objectResult.Value);
         Assert.Equal(10, payload.Id);
-        Assert.Equal("Launch checklist", payload.Title);
+        Assert.Equal("Launch Checklist", payload.Title);
+    }
+
+    [Fact]
+    public async Task CreateCanvas_PassesGenerationModeToCreationService()
+    {
+        var creationService = new FakeCanvasCreationService
+        {
+            CreateResult = new CanvasSummaryResponse
+            {
+                Id = 11,
+                Title = "Launch Checklist"
+            }
+        };
+        var controller = CreateController(creationService, new FakeCanvasService(), new FakeCanvasGraphService());
+
+        await controller.CreateCanvas(new CreateCanvasRequest
+        {
+            FirstPrompt = "Launch checklist",
+            GenerationMode = "rich"
+        });
+
+        Assert.Equal("rich", creationService.LastGenerationMode);
     }
 
     [Fact]
     public async Task CreateCanvas_WhenServiceRejectsPrompt_ReturnsBadRequest()
     {
-        var service = new FakeCanvasService
+        var service = new FakeCanvasService();
+        var creationService = new FakeCanvasCreationService
         {
             ExceptionToThrow = new CanvasOperationException("A first prompt is required to create a canvas.", 400)
         };
-        var controller = CreateController(service, new FakeCanvasGraphService());
+        var controller = CreateController(creationService, service, new FakeCanvasGraphService());
 
         var result = await controller.CreateCanvas(new CreateCanvasRequest { FirstPrompt = " " });
 
@@ -78,7 +103,7 @@ public async Task RenameCanvas_ReturnsUpdatedCanvas()
                 Title = "Renamed canvas"
             }
         };
-        var controller = CreateController(service, new FakeCanvasGraphService());
+        var controller = CreateController(new FakeCanvasCreationService(), service, new FakeCanvasGraphService());
 
         var result = await controller.RenameCanvas(10, new RenameCanvasRequest { Title = "Renamed canvas" });
 
@@ -94,7 +119,7 @@ public async Task RenameCanvas_WhenServiceRejectsTitle_ReturnsBadRequest()
         {
             ExceptionToThrow = new CanvasOperationException("A canvas title is required.", 400)
         };
-        var controller = CreateController(service, new FakeCanvasGraphService());
+        var controller = CreateController(new FakeCanvasCreationService(), service, new FakeCanvasGraphService());
 
         var result = await controller.RenameCanvas(10, new RenameCanvasRequest { Title = " " });
 
@@ -105,7 +130,7 @@ public async Task RenameCanvas_WhenServiceRejectsTitle_ReturnsBadRequest()
     [Fact]
     public async Task DeleteCanvas_ReturnsNoContent()
     {
-        var controller = CreateController(new FakeCanvasService(), new FakeCanvasGraphService());
+        var controller = CreateController(new FakeCanvasCreationService(), new FakeCanvasService(), new FakeCanvasGraphService());
 
         var result = await controller.DeleteCanvas(10);
 
@@ -119,7 +144,7 @@ public async Task DeleteCanvas_WhenForbidden_ReturnsForbidden()
         {
             DeleteExceptionToThrow = new CanvasOperationException("You do not have access to that canvas.", 403)
         };
-        var controller = CreateController(service, new FakeCanvasGraphService());
+        var controller = CreateController(new FakeCanvasCreationService(), service, new FakeCanvasGraphService());
 
         var result = await controller.DeleteCanvas(10);
 
@@ -134,7 +159,7 @@ public async Task DeleteCanvas_WhenMissing_ReturnsNotFound()
         {
             DeleteExceptionToThrow = new CanvasOperationException("Canvas not found.", 404)
         };
-        var controller = CreateController(service, new FakeCanvasGraphService());
+        var controller = CreateController(new FakeCanvasCreationService(), service, new FakeCanvasGraphService());
 
         var result = await controller.DeleteCanvas(999);
 
@@ -158,7 +183,7 @@ public async Task GetCanvasGraph_ReturnsGraphPayload()
                 ]
             }
         };
-        var controller = CreateController(new FakeCanvasService(), graphService);
+        var controller = CreateController(new FakeCanvasCreationService(), new FakeCanvasService(), graphService);
 
         var result = await controller.GetCanvasGraph(10);
 
@@ -175,7 +200,7 @@ public async Task ExpandCanvasNode_WhenProviderMissing_ReturnsBadRequestWithCode
         {
             LlmExceptionToThrow = new LlmChatException("Missing provider", LlmProviderErrorCodes.MissingKey, 400)
         };
-        var controller = CreateController(new FakeCanvasService(), graphService);
+        var controller = CreateController(new FakeCanvasCreationService(), new FakeCanvasService(), graphService);
 
         var result = await controller.ExpandCanvasNode(10, 42, new ExpandCanvasNodeRequest { Prompt = "Hello" });
 
@@ -183,9 +208,24 @@ public async Task ExpandCanvasNode_WhenProviderMissing_ReturnsBadRequestWithCode
         Assert.Equal(400, objectResult.StatusCode);
     }
 
-    private static CanvasesController CreateController(ICanvasService service, ICanvasGraphService graphService, int userId = 1)
+    [Fact]
+    public async Task ExpandCanvasNode_PassesGenerationModeToGraphService()
+    {
+        var graphService = new FakeCanvasGraphService();
+        var controller = CreateController(new FakeCanvasCreationService(), new FakeCanvasService(), graphService);
+
+        await controller.ExpandCanvasNode(10, 42, new ExpandCanvasNodeRequest
+        {
+            Prompt = "Hello",
+            GenerationMode = "rich"
+        });
+
+        Assert.Equal("rich", graphService.LastGenerationMode);
+    }
+
+    private static CanvasesController CreateController(ICanvasCreationService creationService, ICanvasService service, ICanvasGraphService graphService, int userId = 1)
     {
-        var controller = new CanvasesController(service, graphService);
+        var controller = new CanvasesController(creationService, service, graphService);
         var claims = new List<Claim>
         {
             new Claim(ClaimTypes.NameIdentifier, userId.ToString()),
@@ -202,21 +242,28 @@ private static CanvasesController CreateController(ICanvasService service, ICanv
         return controller;
     }
 
-    private sealed class FakeCanvasService : ICanvasService
+    private sealed class FakeCanvasCreationService : ICanvasCreationService
     {
-        public IReadOnlyList<CanvasSummaryResponse> Items { get; set; } = [];
         public CanvasSummaryResponse CreateResult { get; set; } = new();
-        public CanvasSummaryResponse RenameResult { get; set; } = new();
         public Exception? ExceptionToThrow { get; set; }
-        public Exception? DeleteExceptionToThrow { get; set; }
+        public string? LastGenerationMode { get; private set; }
 
-        public Task<CanvasSummaryResponse> CreateCanvasAsync(int userId, string firstPrompt)
+        public Task<CanvasSummaryResponse> CreateCanvasAsync(int userId, string firstPrompt, string? generationMode)
         {
             if (ExceptionToThrow != null)
                 throw ExceptionToThrow;
 
+            LastGenerationMode = generationMode;
             return Task.FromResult(CreateResult);
         }
+    }
+
+    private sealed class FakeCanvasService : ICanvasService
+    {
+        public IReadOnlyList<CanvasSummaryResponse> Items { get; set; } = [];
+        public CanvasSummaryResponse RenameResult { get; set; } = new();
+        public Exception? ExceptionToThrow { get; set; }
+        public Exception? DeleteExceptionToThrow { get; set; }
 
         public Task<IReadOnlyList<CanvasSummaryResponse>> GetCanvasesAsync(int userId)
         {
@@ -246,6 +293,7 @@ private sealed class FakeCanvasGraphService : ICanvasGraphService
         public CanvasGraphResponse ExpandResult { get; set; } = new();
         public Exception? ExceptionToThrow { get; set; }
         public Exception? LlmExceptionToThrow { get; set; }
+        public string? LastGenerationMode { get; private set; }
 
         public Task<CanvasGraphResponse> GetCanvasGraphAsync(int userId, int canvasId)
         {
@@ -255,7 +303,7 @@ public Task<CanvasGraphResponse> GetCanvasGraphAsync(int userId, int canvasId)
             return Task.FromResult(GraphResult);
         }
 
-        public Task<CanvasGraphResponse> ExpandCanvasNodeAsync(int userId, int canvasId, int nodeId, string prompt, string? providerOverride)
+        public Task<CanvasGraphResponse> ExpandCanvasNodeAsync(int userId, int canvasId, int nodeId, string prompt, string? providerOverride, string? generationMode)
         {
             if (ExceptionToThrow != null)
                 throw ExceptionToThrow;
@@ -263,6 +311,7 @@ public Task<CanvasGraphResponse> ExpandCanvasNodeAsync(int userId, int canvasId,
             if (LlmExceptionToThrow != null)
                 throw LlmExceptionToThrow;
 
+            LastGenerationMode = generationMode;
             return Task.FromResult(ExpandResult);
         }
     }
diff --git a/backend/Coliee.API.Tests/Controllers/ChatGuestControllerTests.cs b/backend/Coliee.API.Tests/Controllers/ChatGuestControllerTests.cs
new file mode 100644
index 0000000..100674a
--- /dev/null
+++ b/backend/Coliee.API.Tests/Controllers/ChatGuestControllerTests.cs
@@ -0,0 +1,101 @@
+using Coliee.API.Controllers;
+using Coliee.API.DTOs;
+using Coliee.API.Models;
+using Coliee.API.Services;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Caching.Memory;
+using Xunit;
+
+namespace Coliee.API.Tests.Controllers;
+
+public class ChatGuestControllerTests
+{
+    [Fact]
+    public async Task GuestPreview_AllowsOneRealActionThenRequiresSignIn()
+    {
+        var service = new FakeChatSessionService
+        {
+            Response = new GuestChatPreviewResponse
+            {
+                ActionType = "chat",
+                Message = "Real guest reply",
+                Provider = "gemini",
+                Model = "gemini-3.1-flash-lite-preview"
+            }
+        };
+        var cache = new MemoryCache(new MemoryCacheOptions());
+        var controller = CreateController(service, cache);
+
+        var first = await controller.GuestPreview(new GuestChatPreviewRequest
+        {
+            ActionType = "chat",
+            Prompt = "Hello",
+            ModelId = "gemini-3.1-flash-lite-preview"
+        });
+
+        var firstResult = Assert.IsType<OkObjectResult>(first);
+        var firstPayload = Assert.IsType<GuestChatPreviewResponse>(firstResult.Value);
+        Assert.Equal("Real guest reply", firstPayload.Message);
+        Assert.Equal(1, service.PreviewCallCount);
+
+        var second = await controller.GuestPreview(new GuestChatPreviewRequest
+        {
+            ActionType = "chat",
+            Prompt = "Try again",
+            ModelId = "gemini-3.1-flash-lite-preview"
+        });
+
+        var unauthorized = Assert.IsType<ObjectResult>(second);
+        Assert.Equal(401, unauthorized.StatusCode);
+        Assert.Equal("auth_required", ReadAnonymousProperty<string>(unauthorized.Value!, "code"));
+        Assert.Equal(1, service.PreviewCallCount);
+    }
+
+    private static ChatGuestController CreateController(FakeChatSessionService service, IMemoryCache cache)
+    {
+        var controller = new ChatGuestController(service, cache);
+        controller.ControllerContext = new ControllerContext
+        {
+            HttpContext = new DefaultHttpContext()
+        };
+        controller.ControllerContext.HttpContext!.Request.Headers["Cookie"] = "coliee_guest_preview_id=guest-123";
+        return controller;
+    }
+
+    private static T ReadAnonymousProperty<T>(object value, string propertyName)
+    {
+        return (T)(value.GetType().GetProperty(propertyName)?.GetValue(value)
+            ?? throw new InvalidOperationException($"Property '{propertyName}' was not found."));
+    }
+
+    private sealed class FakeChatSessionService : IChatSessionService
+    {
+        public GuestChatPreviewResponse Response { get; set; } = new();
+        public int PreviewCallCount { get; private set; }
+
+        public Task<GuestChatPreviewResponse> PreviewGuestAsync(GuestChatPreviewRequest request)
+        {
+            PreviewCallCount++;
+            return Task.FromResult(Response);
+        }
+
+        public Task<IReadOnlyList<ChatSessionSummaryResponse>> GetSessionsAsync(int userId) => throw new NotImplementedException();
+        public Task<ChatSessionStateResponse> CreateSessionAsync(int userId, string? title, string? content, string? providerOverride, string? modelOverride = null) => throw new NotImplementedException();
+        public Task<ChatSessionStateResponse> ImportGuestCanvasesAsync(int userId, ImportGuestCanvasesRequest request) => throw new NotImplementedException();
+        public Task<ChatSessionSummaryResponse> RenameSessionAsync(int userId, int sessionId, string title) => throw new NotImplementedException();
+        public Task DeleteSessionAsync(int userId, int sessionId) => throw new NotImplementedException();
+        public Task<ChatSessionGraphResponse> GetSessionAsync(int userId, int sessionId, int? activeNodeId = null) => throw new NotImplementedException();
+        public Task<ChatCanvasNodeDetailResponse> GetNodeAsync(int userId, int sessionId, int nodeId) => throw new NotImplementedException();
+        public Task<ChatSessionStateResponse> CreateNodeAsync(int userId, int sessionId, CreateChatNodeRequest request) => throw new NotImplementedException();
+        public Task<ChatSessionStateResponse> UpdateNodeAsync(int userId, int sessionId, int nodeId, UpdateChatNodeRequest request) => throw new NotImplementedException();
+        public Task<ChatSessionStateResponse> SendNodeMessageAsync(int userId, int sessionId, int nodeId, string content, string? imageUrl, string? providerOverride, string? modelOverride = null) => throw new NotImplementedException();
+        public Task<ChatSessionStateResponse> UpdateMessageAsync(int userId, int sessionId, int nodeId, int messageId, UpdateChatCanvasMessageRequest request) => throw new NotImplementedException();
+        public Task<ChatSessionStateResponse> CreateBranchAsync(int userId, int sessionId, int nodeId, int branchFromMessageId, string content, string? providerOverride, string? modelOverride = null) => throw new NotImplementedException();
+        public Task<ChatSessionStateResponse> MoveMessagesToBranchAsync(int userId, int sessionId, int nodeId, IReadOnlyList<int> messageIds, string? transferMode = null) => throw new NotImplementedException();
+        public Task<ChatSessionStateResponse> GenerateNoteAsync(int userId, int sessionId, int nodeId, string? providerOverride, string? modelOverride = null) => throw new NotImplementedException();
+        public Task<ChatSessionStateResponse> GenerateImageAsync(int userId, int sessionId, int nodeId, string prompt, string? providerOverride, string? modelOverride = null) => throw new NotImplementedException();
+        public Task<ChatSessionGraphResponse> DeleteNodeAsync(int userId, int sessionId, int nodeId, int? newActiveNodeId = null) => throw new NotImplementedException();
+        public Task<ChatSessionGraphResponse> SaveLayoutAsync(int userId, int sessionId, IReadOnlyList<ChatNodeLayoutUpdateInput> nodes, int? activeNodeId = null) => throw new NotImplementedException();
+    }
+}
diff --git a/backend/Coliee.API.Tests/Controllers/ChatSessionsControllerTests.cs b/backend/Coliee.API.Tests/Controllers/ChatSessionsControllerTests.cs
new file mode 100644
index 0000000..732e17e
--- /dev/null
+++ b/backend/Coliee.API.Tests/Controllers/ChatSessionsControllerTests.cs
@@ -0,0 +1,493 @@
+using System.Security.Claims;
+using Coliee.API.Controllers;
+using Coliee.API.DTOs;
+using Coliee.API.Models;
+using Coliee.API.Services;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using Xunit;
+
+namespace Coliee.API.Tests.Controllers;
+
+public class ChatSessionsControllerTests
+{
+    [Fact]
+    public async Task GetSessions_ReturnsOrderedSessions()
+    {
+        var service = new FakeChatSessionService
+        {
+            Sessions =
+            [
+                new ChatSessionSummaryResponse { Id = 2, Title = "Newest" },
+                new ChatSessionSummaryResponse { Id = 1, Title = "Older" }
+            ]
+        };
+        var controller = CreateController(service);
+
+        var result = await controller.GetSessions();
+
+        var okResult = Assert.IsType<OkObjectResult>(result);
+        var payload = Assert.IsAssignableFrom<IReadOnlyList<ChatSessionSummaryResponse>>(okResult.Value);
+        Assert.Equal(["Newest", "Older"], payload.Select(item => item.Title).ToArray());
+    }
+
+    [Fact]
+    public async Task CreateSession_ReturnsCreatedState()
+    {
+        var service = new FakeChatSessionService
+        {
+            State = new ChatSessionStateResponse
+            {
+                Graph = new ChatSessionGraphResponse
+                {
+                    Session = new ChatSessionSummaryResponse { Id = 12, Title = "Launch plan" },
+                    RootNodeId = 42,
+                    ActiveNodeId = 42
+                },
+                Node = new ChatCanvasNodeDetailResponse
+                {
+                    SessionId = 12,
+                    NodeId = 42,
+                    Title = "Launch plan"
+                }
+            }
+        };
+        var controller = CreateController(service);
+
+        var result = await controller.CreateSession(new CreateChatSessionRequest
+        {
+            Title = "Launch plan",
+            Content = "Launch plan"
+        });
+
+        var objectResult = Assert.IsType<ObjectResult>(result);
+        Assert.Equal(201, objectResult.StatusCode);
+        var payload = Assert.IsType<ChatSessionStateResponse>(objectResult.Value);
+        Assert.Equal("Launch plan", payload.Graph.Session.Title);
+    }
+
+    [Fact]
+    public async Task SendNodeMessage_PassesRouteAndContent()
+    {
+        var service = new FakeChatSessionService
+        {
+            State = new ChatSessionStateResponse
+            {
+                Graph = new ChatSessionGraphResponse
+                {
+                    Session = new ChatSessionSummaryResponse { Id = 12, Title = "Launch plan" },
+                    RootNodeId = 42,
+                    ActiveNodeId = 42
+                },
+                Node = new ChatCanvasNodeDetailResponse
+                {
+                    SessionId = 12,
+                    NodeId = 42,
+                    Title = "Launch plan"
+                }
+            }
+        };
+        var controller = CreateController(service);
+
+        var result = await controller.SendNodeMessage(12, 42, new SendChatNodeMessageRequest
+        {
+            Content = "Continue",
+            ProviderOverride = "gemini",
+            ModelOverride = "gemini-1.5-flash"
+        });
+
+        var okResult = Assert.IsType<OkObjectResult>(result);
+        Assert.IsType<ChatSessionStateResponse>(okResult.Value);
+        Assert.Equal(12, service.LastSessionId);
+        Assert.Equal(42, service.LastNodeId);
+        Assert.Equal("Continue", service.LastContent);
+        Assert.Equal("gemini", service.LastProviderOverride);
+        Assert.Equal("gemini-1.5-flash", service.LastModelOverride);
+    }
+
+    [Fact]
+    public async Task UpdateMessage_PassesMessageRouteAndContent()
+    {
+        var service = new FakeChatSessionService
+        {
+            State = new ChatSessionStateResponse
+            {
+                Graph = new ChatSessionGraphResponse
+                {
+                    Session = new ChatSessionSummaryResponse { Id = 12, Title = "Launch plan" },
+                    RootNodeId = 42,
+                    ActiveNodeId = 42
+                },
+                Node = new ChatCanvasNodeDetailResponse
+                {
+                    SessionId = 12,
+                    NodeId = 42,
+                    Title = "Launch plan"
+                }
+            }
+        };
+        var controller = CreateController(service);
+
+        var result = await controller.UpdateMessage(12, 42, 77, new UpdateChatCanvasMessageRequest
+        {
+            Content = "Edited response"
+        });
+
+        var okResult = Assert.IsType<OkObjectResult>(result);
+        Assert.IsType<ChatSessionStateResponse>(okResult.Value);
+        Assert.Equal(12, service.LastSessionId);
+        Assert.Equal(42, service.LastNodeId);
+        Assert.Equal(77, service.LastMessageId);
+        Assert.Equal("Edited response", service.LastContent);
+    }
+
+    [Fact]
+    public async Task CreateBranch_ReturnsBadRequestWhenServiceRejectsBranch()
+    {
+        var service = new FakeChatSessionService
+        {
+            ExceptionToThrow = new ChatSessionOperationException("Branches can only start from assistant replies in the current node.", 400)
+        };
+        var controller = CreateController(service);
+
+        var result = await controller.CreateBranch(12, 42, new CreateChatBranchRequest
+        {
+            BranchFromMessageId = 9,
+            Content = "Explore another angle"
+        });
+
+        var objectResult = Assert.IsType<ObjectResult>(result);
+        Assert.Equal(400, objectResult.StatusCode);
+        Assert.Equal("Branches can only start from assistant replies in the current node.", ReadAnonymousProperty<string>(objectResult.Value!, "message"));
+    }
+
+    [Fact]
+    public async Task SaveLayout_MapsPayloadNodes()
+    {
+        var service = new FakeChatSessionService
+        {
+            Graph = new ChatSessionGraphResponse
+            {
+                Session = new ChatSessionSummaryResponse { Id = 12, Title = "Launch plan" },
+                RootNodeId = 42,
+                ActiveNodeId = 77
+            }
+        };
+        var controller = CreateController(service);
+
+        var result = await controller.SaveLayout(12, new SaveChatLayoutRequest
+        {
+            Nodes =
+            [
+                new SaveChatLayoutNodeRequest { NodeId = 42, PositionX = 10, PositionY = 20 },
+                new SaveChatLayoutNodeRequest { NodeId = 77, PositionX = 100, PositionY = 140 }
+            ]
+        }, 77);
+
+        var okResult = Assert.IsType<OkObjectResult>(result);
+        Assert.IsType<ChatSessionGraphResponse>(okResult.Value);
+        Assert.Equal(2, service.LastLayout.Count);
+        Assert.Equal(77, service.LastActiveNodeId);
+    }
+
+    [Fact]
+    public async Task DeleteSession_ReturnsNoContent_WhenServiceSucceeds()
+    {
+        var service = new FakeChatSessionService();
+        var controller = CreateController(service);
+
+        var result = await controller.DeleteSession(55);
+
+        Assert.IsType<NoContentResult>(result);
+        Assert.Equal(55, service.LastSessionId);
+    }
+
+    [Fact]
+    public async Task GenerateNote_PassesRouteAndOverridesToService()
+    {
+        var service = new FakeChatSessionService
+        {
+            State = new ChatSessionStateResponse
+            {
+                Graph = new ChatSessionGraphResponse
+                {
+                    Session = new ChatSessionSummaryResponse { Id = 12, Title = "Launch plan" },
+                    RootNodeId = 42,
+                    ActiveNodeId = 42
+                },
+                Node = new ChatCanvasNodeDetailResponse
+                {
+                    SessionId = 12,
+                    NodeId = 99,
+                    Title = "AI Summary"
+                }
+            }
+        };
+        var controller = CreateController(service);
+
+        var result = await controller.GenerateNote(12, 42, new GenerateChatNodeNoteRequest
+        {
+            ProviderOverride = "openai",
+            ModelOverride = "gpt-4o-mini"
+        });
+
+        var okResult = Assert.IsType<OkObjectResult>(result);
+        Assert.IsType<ChatSessionStateResponse>(okResult.Value);
+        Assert.Equal(12, service.LastSessionId);
+        Assert.Equal(42, service.LastNodeId);
+        Assert.Equal("openai", service.LastProviderOverride);
+        Assert.Equal("gpt-4o-mini", service.LastModelOverride);
+    }
+
+    [Fact]
+    public async Task GenerateNote_ReturnsLlmErrorPayload_WhenServiceThrowsLlmException()
+    {
+        var service = new FakeChatSessionService
+        {
+            ExceptionToThrow = new LlmChatException("Provider key missing", "provider_key_missing", 422)
+        };
+        var controller = CreateController(service);
+
+        var result = await controller.GenerateNote(12, 42, new GenerateChatNodeNoteRequest());
+
+        var objectResult = Assert.IsType<ObjectResult>(result);
+        Assert.Equal(422, objectResult.StatusCode);
+        Assert.Equal("Provider key missing", ReadAnonymousProperty<string>(objectResult.Value!, "message"));
+        Assert.Equal("provider_key_missing", ReadAnonymousProperty<string>(objectResult.Value!, "code"));
+    }
+
+    private static ChatSessionsController CreateController(IChatSessionService service, int userId = 1)
+    {
+        var controller = new ChatSessionsController(service);
+        var claims = new List<Claim>
+        {
+            new Claim(ClaimTypes.NameIdentifier, userId.ToString()),
+            new Claim("email", "test@example.com")
+        };
+        var identity = new ClaimsIdentity(claims, "TestAuth");
+        controller.ControllerContext = new ControllerContext
+        {
+            HttpContext = new DefaultHttpContext
+            {
+                User = new ClaimsPrincipal(identity)
+            }
+        };
+        return controller;
+    }
+
+    private static T ReadAnonymousProperty<T>(object value, string propertyName)
+    {
+        return (T)(value.GetType().GetProperty(propertyName)?.GetValue(value)
+            ?? throw new InvalidOperationException($"Property '{propertyName}' was not found."));
+    }
+
+    private sealed class FakeChatSessionService : IChatSessionService
+    {
+        public IReadOnlyList<ChatSessionSummaryResponse> Sessions { get; set; } = [];
+        public ChatSessionStateResponse State { get; set; } = new();
+        public ChatSessionGraphResponse Graph { get; set; } = new();
+        public Exception? ExceptionToThrow { get; set; }
+        public int LastSessionId { get; private set; }
+        public int LastNodeId { get; private set; }
+        public string? LastTitle { get; private set; }
+        public string? LastContent { get; private set; }
+        public string? LastProviderOverride { get; private set; }
+        public string? LastModelOverride { get; private set; }
+        public int LastMessageId { get; private set; }
+        public IReadOnlyList<ChatNodeLayoutUpdateInput> LastLayout { get; private set; } = [];
+        public int? LastActiveNodeId { get; private set; }
+
+        public Task<IReadOnlyList<ChatSessionSummaryResponse>> GetSessionsAsync(int userId)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            return Task.FromResult(Sessions);
+        }
+
+        public Task<ChatSessionStateResponse> CreateSessionAsync(int userId, string? title, string? content, string? providerOverride, string? modelOverride = null)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            LastTitle = title;
+            LastContent = content;
+            LastProviderOverride = providerOverride;
+            LastModelOverride = modelOverride;
+            return Task.FromResult(State);
+        }
+
+        public Task<GuestChatPreviewResponse> PreviewGuestAsync(GuestChatPreviewRequest request)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            return Task.FromResult(new GuestChatPreviewResponse());
+        }
+
+        public Task<ChatSessionStateResponse> ImportGuestCanvasesAsync(int userId, ImportGuestCanvasesRequest request)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            return Task.FromResult(State);
+        }
+
+        public Task<ChatSessionSummaryResponse> RenameSessionAsync(int userId, int sessionId, string title)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            LastSessionId = sessionId;
+            LastContent = title;
+            return Task.FromResult(Graph.Session);
+        }
+
+        public Task DeleteSessionAsync(int userId, int sessionId)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            LastSessionId = sessionId;
+            return Task.CompletedTask;
+        }
+
+        public Task<ChatSessionGraphResponse> GetSessionAsync(int userId, int sessionId, int? activeNodeId = null)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            LastSessionId = sessionId;
+            LastActiveNodeId = activeNodeId;
+            return Task.FromResult(Graph);
+        }
+
+        public Task<ChatCanvasNodeDetailResponse> GetNodeAsync(int userId, int sessionId, int nodeId)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            LastSessionId = sessionId;
+            LastNodeId = nodeId;
+            return Task.FromResult(State.Node);
+        }
+
+        public Task<ChatSessionStateResponse> CreateNodeAsync(int userId, int sessionId, CreateChatNodeRequest request)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            LastSessionId = sessionId;
+            LastNodeId = request.ParentNodeId;
+            LastContent = request.Content;
+            return Task.FromResult(State);
+        }
+
+        public Task<ChatSessionStateResponse> UpdateNodeAsync(int userId, int sessionId, int nodeId, UpdateChatNodeRequest request)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            LastSessionId = sessionId;
+            LastNodeId = nodeId;
+            LastContent = request.Content ?? request.Title;
+            return Task.FromResult(State);
+        }
+
+        public Task<ChatSessionStateResponse> SendNodeMessageAsync(int userId, int sessionId, int nodeId, string content, string? imageUrl, string? providerOverride, string? modelOverride = null)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            LastSessionId = sessionId;
+            LastNodeId = nodeId;
+            LastContent = content;
+            LastProviderOverride = providerOverride;
+            LastModelOverride = modelOverride;
+            return Task.FromResult(State);
+        }
+
+        public Task<ChatSessionStateResponse> CreateBranchAsync(int userId, int sessionId, int nodeId, int branchFromMessageId, string content, string? providerOverride, string? modelOverride = null)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            LastSessionId = sessionId;
+            LastNodeId = nodeId;
+            LastContent = content;
+            LastProviderOverride = providerOverride;
+            LastModelOverride = modelOverride;
+            return Task.FromResult(State);
+        }
+
+        public Task<ChatSessionStateResponse> MoveMessagesToBranchAsync(int userId, int sessionId, int nodeId, IReadOnlyList<int> messageIds, string? transferMode = null)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            LastSessionId = sessionId;
+            LastNodeId = nodeId;
+            LastMessageId = messageIds.FirstOrDefault();
+            return Task.FromResult(State);
+        }
+
+        public Task<ChatSessionStateResponse> UpdateMessageAsync(int userId, int sessionId, int nodeId, int messageId, UpdateChatCanvasMessageRequest request)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            LastSessionId = sessionId;
+            LastNodeId = nodeId;
+            LastMessageId = messageId;
+            LastContent = request.Content;
+            return Task.FromResult(State);
+        }
+
+        public Task<ChatSessionStateResponse> GenerateNoteAsync(int userId, int sessionId, int nodeId, string? providerOverride, string? modelOverride = null)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            LastSessionId = sessionId;
+            LastNodeId = nodeId;
+            LastProviderOverride = providerOverride;
+            LastModelOverride = modelOverride;
+            return Task.FromResult(State);
+        }
+
+        public Task<ChatSessionStateResponse> GenerateImageAsync(int userId, int sessionId, int nodeId, string prompt, string? providerOverride, string? modelOverride = null)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            LastSessionId = sessionId;
+            LastNodeId = nodeId;
+            LastContent = prompt;
+            LastProviderOverride = providerOverride;
+            LastModelOverride = modelOverride;
+            return Task.FromResult(State);
+        }
+
+        public Task<ChatSessionGraphResponse> DeleteNodeAsync(int userId, int sessionId, int nodeId, int? newActiveNodeId = null)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            LastSessionId = sessionId;
+            LastNodeId = nodeId;
+            LastActiveNodeId = newActiveNodeId;
+            return Task.FromResult(Graph);
+        }
+
+        public Task<ChatSessionGraphResponse> SaveLayoutAsync(int userId, int sessionId, IReadOnlyList<ChatNodeLayoutUpdateInput> nodes, int? activeNodeId = null)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            LastSessionId = sessionId;
+            LastLayout = nodes;
+            LastActiveNodeId = activeNodeId;
+            return Task.FromResult(Graph);
+        }
+    }
+}
diff --git a/backend/Coliee.API.Tests/Controllers/LlmControllerTests.cs b/backend/Coliee.API.Tests/Controllers/LlmControllerTests.cs
index f944b8b..3e145a7 100644
--- a/backend/Coliee.API.Tests/Controllers/LlmControllerTests.cs
+++ b/backend/Coliee.API.Tests/Controllers/LlmControllerTests.cs
@@ -10,6 +10,31 @@ namespace Coliee.API.Tests.Controllers;
 
 public class LlmControllerTests
 {
+    [Fact]
+    public async Task GetProviderModels_ReturnsPayload()
+    {
+        var service = new FakeLlmService
+        {
+            ProviderModels = new ProviderModelsResponse
+            {
+                Provider = "openai",
+                Models =
+                [
+                    new ProviderModelResponse { Id = "gpt-4.1-mini", DisplayName = "GPT-4.1 Mini" }
+                ]
+            }
+        };
+        var controller = CreateController(service);
+
+        var result = await controller.GetProviderModels("openai");
+
+        var okResult = Assert.IsType<OkObjectResult>(result);
+        var payload = Assert.IsType<ProviderModelsResponse>(okResult.Value);
+        Assert.Equal("openai", payload.Provider);
+        Assert.Equal("openai", service.LastProvider);
+        Assert.Single(payload.Models);
+    }
+
     [Fact]
     public async Task GetMainNodeChat_ReturnsChatPayload()
     {
@@ -97,6 +122,44 @@ public async Task SendMainNodeMessage_ReturnsUpdatedChatPayload()
         Assert.Equal(2, payload.Messages.Count);
     }
 
+    [Fact]
+    public async Task SendStandaloneChatMessage_ReturnsAssistantReply()
+    {
+        var service = new FakeLlmService
+        {
+            StandaloneResponse = new StandaloneChatResponse
+            {
+                DefaultProvider = "gemini",
+                AvailableProviders = ["openai", "gemini"],
+                Message = new StandaloneChatMessageResponse
+                {
+                    Role = "assistant",
+                    Content = "Standalone reply",
+                    Provider = "gemini",
+                    Model = "gemini-1.5-flash"
+                }
+            }
+        };
+        var controller = CreateController(service);
+
+        var result = await controller.SendStandaloneChatMessage(new SendStandaloneChatMessageRequest
+        {
+            History =
+            [
+                new StandaloneChatMessageRequest { Role = "user", Content = "Hello" }
+            ],
+            Content = "Continue",
+            ProviderOverride = "gemini"
+        });
+
+        var okResult = Assert.IsType<OkObjectResult>(result);
+        var payload = Assert.IsType<StandaloneChatResponse>(okResult.Value);
+        Assert.Equal("Continue", service.LastContent);
+        Assert.Equal("gemini", service.LastProviderOverride);
+        Assert.Single(service.LastHistory);
+        Assert.Equal("Standalone reply", payload.Message.Content);
+    }
+
     [Fact]
     public async Task SendMainNodeMessage_InvalidModelState_ReturnsBadRequest()
     {
@@ -149,6 +212,19 @@ public async Task SendMainNodeMessage_InvalidClaims_ReturnsUnauthorized()
         Assert.Equal("Invalid token claims.", ReadAnonymousProperty<string>(objectResult.Value!, "message"));
     }
 
+    [Fact]
+    public async Task SendStandaloneChatMessage_InvalidModelState_ReturnsBadRequest()
+    {
+        var service = new FakeLlmService();
+        var controller = CreateController(service);
+        controller.ModelState.AddModelError("Content", "Required");
+
+        var result = await controller.SendStandaloneChatMessage(new SendStandaloneChatMessageRequest());
+
+        var badRequestResult = Assert.IsType<BadRequestObjectResult>(result);
+        Assert.Equal("Validation failed", ReadAnonymousProperty<string>(badRequestResult.Value!, "message"));
+    }
+
     private static LlmController CreateController(ILlmService service, int userId = 1)
     {
         var controller = new LlmController(service);
@@ -190,17 +266,41 @@ private static T ReadAnonymousProperty<T>(object value, string propertyName)
     private sealed class FakeLlmService : ILlmService
     {
         public MainNodeChatResponse ChatResponse { get; set; } = new();
+        public ProviderModelsResponse ProviderModels { get; set; } = new();
+        public StandaloneChatResponse StandaloneResponse { get; set; } = new();
         public Exception? ExceptionToThrow { get; set; }
         public int LastCanvasId { get; private set; }
+        public IReadOnlyList<StandaloneChatMessageRequest> LastHistory { get; private set; } = [];
         public string? LastContent { get; private set; }
+        public string? LastProvider { get; private set; }
         public string? LastProviderOverride { get; private set; }
 
         public Task<ProviderListResponse> GetProvidersAsync(int userId) => throw new NotImplementedException();
+        public Task<ProviderModelsResponse> GetProviderModelsAsync(int userId, string provider)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            LastProvider = provider;
+            return Task.FromResult(ProviderModels);
+        }
+
         public Task<ProviderListResponse> UpsertProviderKeyAsync(int userId, string provider, string apiKey) => throw new NotImplementedException();
         public Task<ProviderListResponse> DeleteProviderKeyAsync(int userId, string provider) => throw new NotImplementedException();
         public Task<ProviderListResponse> SetDefaultProviderAsync(int userId, string provider) => throw new NotImplementedException();
         public Task<ProviderListResponse> TestProviderAsync(int userId, string provider) => throw new NotImplementedException();
 
+        public Task<StandaloneChatResponse> SendStandaloneChatMessageAsync(int userId, IReadOnlyList<StandaloneChatMessageRequest> history, string content, string? providerOverride)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            LastHistory = history;
+            LastContent = content;
+            LastProviderOverride = providerOverride;
+            return Task.FromResult(StandaloneResponse);
+        }
+
         public Task<MainNodeChatResponse> GetMainNodeChatAsync(int userId, int canvasId)
         {
             if (ExceptionToThrow != null)
diff --git a/backend/Coliee.API.Tests/Services/CanvasCreationServiceTests.cs b/backend/Coliee.API.Tests/Services/CanvasCreationServiceTests.cs
new file mode 100644
index 0000000..09eceb2
--- /dev/null
+++ b/backend/Coliee.API.Tests/Services/CanvasCreationServiceTests.cs
@@ -0,0 +1,322 @@
+using Coliee.API.DTOs;
+using Coliee.API.Data;
+using Coliee.API.Models;
+using Coliee.API.Services;
+using FluentAssertions;
+using Microsoft.Extensions.Logging.Abstractions;
+using Xunit;
+
+namespace Coliee.API.Tests.Services;
+
+public class CanvasCreationServiceTests
+{
+    [Fact]
+    public async Task CreateCanvas_GeneratesShortSemanticTitleAndSeedsGraph()
+    {
+        var repository = new InMemoryCanvasRepository();
+        var graphService = new FakeCanvasGraphService(repository);
+        var providerResolver = new FakeCanvasProviderResolver();
+        var service = new CanvasCreationService(repository, graphService, providerResolver, NullLogger<CanvasCreationService>.Instance);
+
+        var response = await service.CreateCanvasAsync(1, "   Plan   launch\nchecklist for the Q2 release   ");
+
+        response.Title.Should().Be("Launch Checklist For Q2 Release");
+        graphService.LastPrompt.Should().Be("Plan launch checklist for the Q2 release");
+        graphService.LastGenerationMode.Should().Be(CanvasGenerationModes.Compact);
+        repository.GetChildNodeCount(response.Id).Should().BeGreaterThan(0);
+    }
+
+    [Fact]
+    public async Task CreateCanvas_WithRichGenerationMode_PassesModeToGraphExpansion()
+    {
+        var repository = new InMemoryCanvasRepository();
+        var graphService = new FakeCanvasGraphService(repository);
+        var providerResolver = new FakeCanvasProviderResolver();
+        var service = new CanvasCreationService(repository, graphService, providerResolver, NullLogger<CanvasCreationService>.Instance);
+
+        await service.CreateCanvasAsync(1, "Plan launch checklist", CanvasGenerationModes.Rich);
+
+        graphService.LastGenerationMode.Should().Be(CanvasGenerationModes.Rich);
+    }
+
+    [Fact]
+    public async Task CreateCanvas_WhitespaceOnlyPrompt_ThrowsBadRequest()
+    {
+        var repository = new InMemoryCanvasRepository();
+        var service = new CanvasCreationService(
+            repository,
+            new FakeCanvasGraphService(repository),
+            new FakeCanvasProviderResolver(),
+            NullLogger<CanvasCreationService>.Instance);
+
+        var action = async () => await service.CreateCanvasAsync(1, "   ");
+
+        var exception = await action.Should().ThrowAsync<CanvasOperationException>();
+        exception.Which.StatusCode.Should().Be(400);
+    }
+
+    [Fact]
+    public async Task CreateCanvas_WhenNoProviderConfigured_ThrowsMissingKeyWithoutPersistingCanvas()
+    {
+        var repository = new InMemoryCanvasRepository();
+        var service = new CanvasCreationService(
+            repository,
+            new FakeCanvasGraphService(repository),
+            new FakeCanvasProviderResolver
+            {
+                ExceptionToThrow = new LlmChatException("Add a provider API key in Settings before creating a canvas.", LlmProviderErrorCodes.MissingKey, 400)
+            },
+            NullLogger<CanvasCreationService>.Instance);
+
+        var action = async () => await service.CreateCanvasAsync(1, "Launch checklist");
+
+        var exception = await action.Should().ThrowAsync<LlmChatException>();
+        exception.Which.Code.Should().Be(LlmProviderErrorCodes.MissingKey);
+        (await repository.GetCanvasesAsync(1)).Should().BeEmpty();
+    }
+
+    [Fact]
+    public async Task CreateCanvas_WhenInitialExpansionFails_RollsBackCanvas()
+    {
+        var repository = new InMemoryCanvasRepository();
+        var service = new CanvasCreationService(
+            repository,
+            new FakeCanvasGraphService(repository)
+            {
+                ExceptionToThrow = new LlmChatException("Provider unavailable.", LlmProviderErrorCodes.ProviderError, 502)
+            },
+            new FakeCanvasProviderResolver(),
+            NullLogger<CanvasCreationService>.Instance);
+
+        var action = async () => await service.CreateCanvasAsync(1, "Launch checklist");
+
+        await action.Should().ThrowAsync<LlmChatException>();
+        (await repository.GetCanvasesAsync(1)).Should().BeEmpty();
+    }
+
+    private sealed class FakeCanvasProviderResolver : ICanvasProviderResolver
+    {
+        public Exception? ExceptionToThrow { get; set; }
+
+        public Task<CanvasProviderResolution> ResolveAsync(int userId, string? providerOverride)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            return Task.FromResult(new CanvasProviderResolution(
+                LlmProviderNames.OpenAi,
+                [new LlmProviderKeyRecord { Provider = LlmProviderNames.OpenAi, EncryptedApiKey = "enc", IsDefault = true }]));
+        }
+    }
+
+    private sealed class FakeCanvasGraphService : ICanvasGraphService
+    {
+        private readonly ICanvasRepository _canvasRepository;
+        public Exception? ExceptionToThrow { get; set; }
+        public string? LastPrompt { get; private set; }
+        public string? LastGenerationMode { get; private set; }
+
+        public FakeCanvasGraphService(ICanvasRepository canvasRepository)
+        {
+            _canvasRepository = canvasRepository;
+        }
+
+        public Task<CanvasGraphResponse> GetCanvasGraphAsync(int userId, int canvasId)
+        {
+            throw new NotImplementedException();
+        }
+
+        public async Task<CanvasGraphResponse> ExpandCanvasNodeAsync(int userId, int canvasId, int nodeId, string prompt, string? providerOverride, string? generationMode)
+        {
+            if (ExceptionToThrow != null)
+                throw ExceptionToThrow;
+
+            LastPrompt = prompt;
+            LastGenerationMode = generationMode;
+            await _canvasRepository.AddChildCanvasNodesAsync(userId, canvasId, nodeId,
+            [
+                new CanvasNodeCreateInput
+                {
+                    Kind = "response",
+                    Title = "Launch Sequencing",
+                    Content = "Test child",
+                    SourcePrompt = prompt,
+                    Depth = 1
+                }
+            ]);
+
+            return new CanvasGraphResponse
+            {
+                CanvasId = canvasId,
+                Mode = "graph",
+                RootNodeId = nodeId,
+                Nodes =
+                [
+                    new CanvasGraphNodeResponse
+                    {
+                        Id = nodeId,
+                        ParentNodeId = null,
+                        Kind = "main",
+                        Title = "Main Node",
+                        GenerationMode = "compact",
+                        Content = string.Empty,
+                        Depth = 0,
+                        SiblingOrder = 0
+                    },
+                    new CanvasGraphNodeResponse
+                    {
+                        Id = nodeId + 1,
+                        ParentNodeId = nodeId,
+                        Kind = "response",
+                        Title = "Launch Sequencing",
+                        GenerationMode = generationMode ?? "compact",
+                        Summary = "Test child",
+                        Content = "Test child",
+                        SourcePrompt = prompt,
+                        Blocks = [],
+                        Sources = [],
+                        Depth = 1,
+                        SiblingOrder = 0
+                    }
+                ]
+            };
+        }
+    }
+
+    private sealed class InMemoryCanvasRepository : ICanvasRepository
+    {
+        private readonly List<Canvas> _items = [];
+        private readonly List<CanvasNode> _nodes = [];
+        private int _nextId = 1;
+        private int _nextNodeId = 1;
+
+        public Task<Canvas> CreateCanvasAsync(int userId, string title)
+        {
+            var now = DateTime.UtcNow.AddMinutes(_nextId);
+            var canvas = new Canvas
+            {
+                Id = _nextId++,
+                UserId = userId,
+                Title = title,
+                CreatedAt = now,
+                UpdatedAt = now
+            };
+            _items.Add(canvas);
+            _nodes.Add(new CanvasNode
+            {
+                Id = _nextNodeId++,
+                CanvasId = canvas.Id,
+                ParentNodeId = null,
+                Kind = "main",
+                Title = "Main Node",
+                Content = string.Empty,
+                Depth = 0,
+                SiblingOrder = 0,
+                CreatedAt = now,
+                UpdatedAt = now
+            });
+            return Task.FromResult(canvas);
+        }
+
+        public Task<IReadOnlyList<Canvas>> GetCanvasesAsync(int userId)
+        {
+            return Task.FromResult<IReadOnlyList<Canvas>>(_items.Where(item => item.UserId == userId).ToList());
+        }
+
+        public Task<Canvas?> GetCanvasAsync(int userId, int canvasId)
+        {
+            return Task.FromResult(_items.FirstOrDefault(item => item.UserId == userId && item.Id == canvasId));
+        }
+
+        public Task<Canvas?> GetCanvasByIdAsync(int canvasId)
+        {
+            return Task.FromResult(_items.FirstOrDefault(item => item.Id == canvasId));
+        }
+
+        public Task<Canvas> RenameCanvasAsync(int userId, int canvasId, string title)
+        {
+            var canvas = _items.First(item => item.UserId == userId && item.Id == canvasId);
+            canvas.Title = title;
+            canvas.UpdatedAt = DateTime.UtcNow;
+            return Task.FromResult(canvas);
+        }
+
+        public Task DeleteCanvasAsync(int userId, int canvasId)
+        {
+            _items.RemoveAll(item => item.UserId == userId && item.Id == canvasId);
+            _nodes.RemoveAll(item => item.CanvasId == canvasId);
+            return Task.CompletedTask;
+        }
+
+        public Task<bool> HasLegacyMainNodeMessagesAsync(int userId, int canvasId)
+        {
+            return Task.FromResult(false);
+        }
+
+        public Task<CanvasNode> EnsureRootCanvasNodeAsync(int userId, int canvasId)
+        {
+            return Task.FromResult(_nodes.First(item => item.CanvasId == canvasId && item.ParentNodeId == null));
+        }
+
+        public Task<IReadOnlyList<CanvasNode>> GetCanvasNodesAsync(int userId, int canvasId)
+        {
+            return Task.FromResult<IReadOnlyList<CanvasNode>>(_nodes.Where(item => item.CanvasId == canvasId).ToList());
+        }
+
+        public Task<CanvasNode?> GetCanvasNodeAsync(int userId, int canvasId, int nodeId)
+        {
+            return Task.FromResult(_nodes.FirstOrDefault(item => item.CanvasId == canvasId && item.Id == nodeId));
+        }
+
+        public Task<CanvasNode> UpdateCanvasNodeAsync(int userId, int canvasId, int nodeId, CanvasNodeUpdateInput node)
+        {
+            var existing = _nodes.First(item => item.CanvasId == canvasId && item.Id == nodeId);
+            existing.GenerationMode = node.GenerationMode;
+            existing.Summary = node.Summary;
+            existing.Category = node.Category;
+            existing.Content = node.Content;
+            existing.SourcePrompt = node.SourcePrompt;
+            existing.ContinuationPrompt = node.ContinuationPrompt;
+            existing.Blocks = [.. node.Blocks];
+            existing.Sources = [.. node.Sources];
+            existing.UpdatedAt = DateTime.UtcNow;
+
+            var canvas = _items.First(item => item.Id == canvasId && item.UserId == userId);
+            canvas.UpdatedAt = existing.UpdatedAt;
+            return Task.FromResult(existing);
+        }
+
+        public Task<IReadOnlyList<CanvasNode>> AddChildCanvasNodesAsync(int userId, int canvasId, int parentNodeId, IReadOnlyList<CanvasNodeCreateInput> nodes)
+        {
+            var now = DateTime.UtcNow;
+            var inserted = nodes.Select((node, index) =>
+            {
+                var created = new CanvasNode
+                {
+                    Id = _nextNodeId++,
+                    CanvasId = canvasId,
+                    ParentNodeId = parentNodeId,
+                    Kind = node.Kind,
+                    Title = node.Title,
+                    Content = node.Content,
+                    SourcePrompt = node.SourcePrompt,
+                    Depth = node.Depth,
+                    SiblingOrder = index,
+                    CreatedAt = now,
+                    UpdatedAt = now
+                };
+                _nodes.Add(created);
+                return created;
+            }).ToList();
+
+            var canvas = _items.First(item => item.Id == canvasId);
+            canvas.UpdatedAt = now;
+            return Task.FromResult<IReadOnlyList<CanvasNode>>(inserted);
+        }
+
+        public int GetChildNodeCount(int canvasId)
+        {
+            return _nodes.Count(item => item.CanvasId == canvasId && item.ParentNodeId != null);
+        }
+    }
+}
diff --git a/backend/Coliee.API.Tests/Services/CanvasGraphServiceTests.cs b/backend/Coliee.API.Tests/Services/CanvasGraphServiceTests.cs
index 3a73ae2..a7eb189 100644
--- a/backend/Coliee.API.Tests/Services/CanvasGraphServiceTests.cs
+++ b/backend/Coliee.API.Tests/Services/CanvasGraphServiceTests.cs
@@ -38,6 +38,50 @@ public async Task GetCanvasGraph_LegacyCanvas_ReturnsLegacyMode()
         response.RootNodeId.Should().BeNull();
     }
 
+    [Fact]
+    public async Task GetCanvasGraph_EmptyRootWithFoundationalChild_PromotesFoundationIntoRootResponse()
+    {
+        var repository = new InMemoryGraphStore();
+        var canvas = await repository.CreateCanvasAsync(1, "Graph canvas");
+        var service = CreateService(repository, new StubProviderClient(LlmProviderNames.OpenAi));
+        var rootNode = await repository.EnsureRootCanvasNodeAsync(1, canvas.Id);
+
+        await repository.AddChildCanvasNodesAsync(1, canvas.Id, rootNode.Id,
+        [
+            new CanvasNodeCreateInput
+            {
+                Kind = "response",
+                Title = "Define Mixed Fruit Drink",
+                GenerationMode = CanvasGenerationModes.Rich,
+                Summary = "Provides a clear definition and outlines typical fruit combinations in mixed fruit drinks.",
+                Category = "Foundational Knowledge",
+                Content = "Mixed fruit drinks are beverages made by blending multiple fruit juices or purees into one drink.",
+                SourcePrompt = "What is Mixed Fruit Drink",
+                Depth = 1
+            },
+            new CanvasNodeCreateInput
+            {
+                Kind = "response",
+                Title = "Nutritional Value",
+                GenerationMode = CanvasGenerationModes.Rich,
+                Summary = "Explores the health benefits and nutritional content, including vitamins, sugars, and fiber.",
+                Category = "Health & Wellness",
+                Content = "This branch focuses on nutrients, sugars, and health tradeoffs.",
+                SourcePrompt = "What is Mixed Fruit Drink",
+                Depth = 1
+            }
+        ]);
+
+        var response = await service.GetCanvasGraphAsync(1, canvas.Id);
+
+        var responseRoot = response.Nodes.Single(node => node.Id == rootNode.Id);
+        responseRoot.Summary.Should().Be("Provides a clear definition and outlines typical fruit combinations in mixed fruit drinks.");
+        responseRoot.Content.Should().Be("Mixed fruit drinks are beverages made by blending multiple fruit juices or purees into one drink.");
+        responseRoot.SourcePrompt.Should().Be("What is Mixed Fruit Drink");
+        response.Nodes.Should().NotContain(node => node.Title == "Define Mixed Fruit Drink");
+        response.Nodes.Should().Contain(node => node.Title == "Nutritional Value");
+    }
+
     [Fact]
     public async Task ExpandCanvasNode_SplitsReplyIntoChildrenAndStoresPrompt()
     {
@@ -45,7 +89,23 @@ public async Task ExpandCanvasNode_SplitsReplyIntoChildrenAndStoresPrompt()
         var canvas = await repository.CreateCanvasAsync(1, "Graph canvas");
         var service = CreateService(
             repository,
-            new StubProviderClient(LlmProviderNames.OpenAi, "## Alpha\nA details\n\n## Beta\nB details", "gpt-test"));
+            new StubProviderClient(
+                LlmProviderNames.OpenAi,
+                """
+                {
+                  "branches": [
+                    {
+                      "title": "Alpha angle",
+                      "summary": "Alpha details explain the first meaningful angle to investigate."
+                    },
+                    {
+                      "title": "Beta angle",
+                      "summary": "Beta details explain the second meaningful angle to investigate."
+                    }
+                  ]
+                }
+                """,
+                "gpt-test"));
 
         await service.UpsertProviderKeyAsync(1, "openai", "sk-openai-1234");
         var rootNode = await repository.EnsureRootCanvasNodeAsync(1, canvas.Id);
@@ -55,6 +115,8 @@ public async Task ExpandCanvasNode_SplitsReplyIntoChildrenAndStoresPrompt()
         response.Mode.Should().Be("graph");
         response.Nodes.Count(node => node.ParentNodeId == rootNode.Id).Should().Be(2);
         response.Nodes.Where(node => node.ParentNodeId == rootNode.Id).Select(node => node.SourcePrompt).Distinct().Should().ContainSingle("Break this down");
+        response.Nodes.Should().Contain(node => node.Title == "Alpha angle");
+        response.Nodes.Should().Contain(node => node.Title == "Beta angle");
     }
 
     [Fact]
@@ -82,9 +144,242 @@ public async Task ExpandCanvasNode_UsesAncestorPathContextOnly()
         await service.ExpandCanvasNodeAsync(1, canvas.Id, firstLevel[0].Id, "Go deeper", null);
 
         provider.LastMessages.Should().HaveCount(2);
-        provider.LastMessages[0].Content.Should().Contain("Main Node");
+        provider.LastMessages[0].Content.Should().Contain("Existing canvas context:");
         provider.LastMessages[0].Content.Should().Contain("Parent context");
-        provider.LastMessages[1].Content.Should().Be("Go deeper");
+        provider.LastMessages[1].Content.Should().Contain("Original user request:");
+        provider.LastMessages[1].Content.Should().Contain("Go deeper");
+    }
+
+    [Fact]
+    public async Task ExpandCanvasNode_EmptyRoot_DoesNotSendPlaceholderMainNodeContext()
+    {
+        var repository = new InMemoryGraphStore();
+        var canvas = await repository.CreateCanvasAsync(1, "Graph canvas");
+        var provider = new StubProviderClient(
+            LlmProviderNames.OpenAi,
+            """
+            {
+              "branches": [
+                {
+                  "title": "Financial performance",
+                  "summary": "Compare earnings growth, margins, asset quality, and return metrics."
+                },
+                {
+                  "title": "Digital banking",
+                  "summary": "Compare apps, online journeys, product access, and service responsiveness."
+                }
+              ]
+            }
+            """);
+        var service = CreateService(repository, provider);
+
+        await service.UpsertProviderKeyAsync(1, "openai", "sk-openai-1234");
+        var rootNode = await repository.EnsureRootCanvasNodeAsync(1, canvas.Id);
+
+        await service.ExpandCanvasNodeAsync(1, canvas.Id, rootNode.Id, "HNB vs Sampath Bank", null);
+
+        provider.LastMessages.Should().HaveCount(1);
+        provider.LastMessages[0].Content.Should().NotContain("Existing canvas context:");
+        provider.LastMessages[0].Content.Should().NotContain("Main Node");
+        provider.LastMessages[0].Content.Should().Contain("Original user request:");
+        provider.LastMessages[0].Content.Should().Contain("HNB vs Sampath Bank");
+    }
+
+    [Fact]
+    public async Task ExpandCanvasNode_RootMainNode_StoresFoundationOnRootInsteadOfCreatingDefinitionChild()
+    {
+        var repository = new InMemoryGraphStore();
+        var canvas = await repository.CreateCanvasAsync(1, "Graph canvas");
+        var service = CreateService(
+            repository,
+            new StubProviderClient(
+                LlmProviderNames.OpenAi,
+                """
+                {
+                  "mainNode": {
+                    "summary": "Neural networks are layered function approximators that learn useful patterns from data.",
+                    "content": "Neural networks are layered systems that transform inputs through learned weights so they can model complex patterns and make predictions.",
+                    "blocks": [
+                      {
+                        "type": "description",
+                        "text": "They learn by adjusting weights to reduce error on training examples.",
+                        "options": []
+                      },
+                      {
+                        "type": "analysis",
+                        "text": "The key idea is composing simple transformations into a more expressive model.",
+                        "options": []
+                      }
+                    ],
+                    "sources": []
+                  },
+                  "branches": [
+                    {
+                      "title": "Architectures",
+                      "summary": "Compare feedforward, convolutional, recurrent, and transformer-style designs."
+                    },
+                    {
+                      "title": "Training dynamics",
+                      "summary": "Understand loss functions, backpropagation, optimization, and regularization."
+                    },
+                    {
+                      "title": "Practical uses",
+                      "summary": "Connect the concept to real product, research, and decision-making use cases."
+                    }
+                  ]
+                }
+                """));
+
+        await service.UpsertProviderKeyAsync(1, "openai", "sk-openai-1234");
+        var rootNode = await repository.EnsureRootCanvasNodeAsync(1, canvas.Id);
+
+        var response = await service.ExpandCanvasNodeAsync(1, canvas.Id, rootNode.Id, "Teach me neural networks", null, CanvasGenerationModes.Compact);
+
+        var updatedRoot = response.Nodes.Single(node => node.Id == rootNode.Id);
+        updatedRoot.GenerationMode.Should().Be(CanvasGenerationModes.Rich);
+        updatedRoot.Summary.Should().Be("Neural networks are layered function approximators that learn useful patterns from data.");
+        updatedRoot.Content.Should().Contain("Neural networks are layered systems");
+        updatedRoot.SourcePrompt.Should().Be("Teach me neural networks");
+        updatedRoot.Blocks.Should().HaveCount(2);
+
+        var childNodes = response.Nodes.Where(node => node.ParentNodeId == rootNode.Id).ToList();
+        childNodes.Should().HaveCount(3);
+        childNodes.Select(node => node.Title).Should().BeEquivalentTo(["Architectures", "Training dynamics", "Practical uses"]);
+        childNodes.Select(node => node.Title).Should().NotContain(title => title.Contains("definition", StringComparison.OrdinalIgnoreCase));
+    }
+
+    [Fact]
+    public async Task ExpandCanvasNode_RootMainNode_SecondExpansion_AppendsContentAndUpdatesLatestMetadata()
+    {
+        var repository = new InMemoryGraphStore();
+        var canvas = await repository.CreateCanvasAsync(1, "Graph canvas");
+        var service = CreateService(
+            repository,
+            new StubProviderClient(
+                LlmProviderNames.OpenAi,
+                [
+                    """
+                    {
+                      "mainNode": {
+                        "summary": "A first foundation summary.",
+                        "content": "First foundation content explains the core concept in a grounded way.",
+                        "blocks": [],
+                        "sources": []
+                      },
+                      "branches": [
+                        {
+                          "title": "First branch",
+                          "summary": "Explore the first meaningful path from the main topic."
+                        },
+                        {
+                          "title": "Second branch",
+                          "summary": "Explore the second meaningful path from the main topic."
+                        }
+                      ]
+                    }
+                    """,
+                    """
+                    {
+                      "mainNode": {
+                        "summary": "A newer foundation summary.",
+                        "content": "Second foundation content adds a sharper explanation and a new angle.",
+                        "blocks": [],
+                        "sources": []
+                      },
+                      "branches": [
+                        {
+                          "title": "Third branch",
+                          "summary": "Explore a third path that becomes relevant after the update."
+                        },
+                        {
+                          "title": "Fourth branch",
+                          "summary": "Explore a fourth path that broadens the workspace direction."
+                        }
+                      ]
+                    }
+                    """
+                ]));
+
+        await service.UpsertProviderKeyAsync(1, "openai", "sk-openai-1234");
+        var rootNode = await repository.EnsureRootCanvasNodeAsync(1, canvas.Id);
+
+        await service.ExpandCanvasNodeAsync(1, canvas.Id, rootNode.Id, "First prompt", null, CanvasGenerationModes.Compact);
+        var secondResponse = await service.ExpandCanvasNodeAsync(1, canvas.Id, rootNode.Id, "Second prompt", null, CanvasGenerationModes.Compact);
+
+        var updatedRoot = secondResponse.Nodes.Single(node => node.Id == rootNode.Id);
+        updatedRoot.Summary.Should().Be("A newer foundation summary.");
+        updatedRoot.SourcePrompt.Should().Be("Second prompt");
+        updatedRoot.Content.Should().Contain("First foundation content explains the core concept in a grounded way.");
+        updatedRoot.Content.Should().Contain("## Update");
+        updatedRoot.Content.Should().Contain("Second foundation content adds a sharper explanation and a new angle.");
+    }
+
+    [Fact]
+    public async Task ExpandCanvasNode_RootMainNode_FallbackAbsorbsDefinitionLikeBranchIntoRoot()
+    {
+        var repository = new InMemoryGraphStore();
+        var canvas = await repository.CreateCanvasAsync(1, "Graph canvas");
+        var service = CreateService(
+            repository,
+            new StubProviderClient(
+                LlmProviderNames.OpenAi,
+                ["{ \"branches\": [] }"],
+                [
+                    """
+                    ## Core Definition
+                    Event-driven architecture coordinates components by publishing events and letting interested services react asynchronously.
+
+                    ## Service boundaries
+                    Break the system into clear domains so events represent useful business changes instead of low-level implementation noise.
+
+                    ## Reliability patterns
+                    Use retries, dead-letter handling, and idempotency so asynchronous processing stays dependable under failure.
+                    """
+                ]));
+
+        await service.UpsertProviderKeyAsync(1, "openai", "sk-openai-1234");
+        var rootNode = await repository.EnsureRootCanvasNodeAsync(1, canvas.Id);
+
+        var response = await service.ExpandCanvasNodeAsync(1, canvas.Id, rootNode.Id, "Explain event-driven architecture", null, CanvasGenerationModes.Compact);
+
+        var updatedRoot = response.Nodes.Single(node => node.Id == rootNode.Id);
+        updatedRoot.Content.Should().Contain("Event-driven architecture coordinates components");
+        updatedRoot.SourcePrompt.Should().Be("Explain event-driven architecture");
+
+        var childNodes = response.Nodes.Where(node => node.ParentNodeId == rootNode.Id).ToList();
+        childNodes.Should().HaveCount(2);
+        childNodes.Select(node => node.Title).Should().NotContain(title => title.Contains("definition", StringComparison.OrdinalIgnoreCase));
+        childNodes.Select(node => node.Title).Should().Contain(["Service boundaries", "Reliability patterns"]);
+    }
+
+    [Fact]
+    public async Task ExpandCanvasNode_FallbackFiltering_RemovesLowSignalFragments()
+    {
+        var repository = new InMemoryGraphStore();
+        var canvas = await repository.CreateCanvasAsync(1, "Graph canvas");
+        var service = CreateService(
+            repository,
+            new StubProviderClient(
+                LlmProviderNames.OpenAi,
+                """
+                Let's break it down:
+
+                Financial performance compares earnings quality, loan growth, margins, and balance-sheet resilience between HNB and Sampath Bank.
+
+                In context, this node path means:
+
+                Digital banking compares mobile app quality, online onboarding, and day-to-day customer experience across the two banks.
+                """));
+
+        await service.UpsertProviderKeyAsync(1, "openai", "sk-openai-1234");
+        var rootNode = await repository.EnsureRootCanvasNodeAsync(1, canvas.Id);
+
+        var response = await service.ExpandCanvasNodeAsync(1, canvas.Id, rootNode.Id, "HNB vs Sampath Bank", null);
+
+        var childNodes = response.Nodes.Where(node => node.ParentNodeId == rootNode.Id).ToList();
+        childNodes.Should().HaveCount(2);
+        childNodes.Select(node => node.Title).Should().NotContain(title => title.Contains("break it down", StringComparison.OrdinalIgnoreCase));
+        childNodes.Select(node => node.Title).Should().NotContain(title => title.Contains("node path", StringComparison.OrdinalIgnoreCase));
     }
 
     [Fact]
@@ -106,6 +401,7 @@ private static TestCanvasGraphService CreateService(InMemoryGraphStore repositor
         return new TestCanvasGraphService(
             repository,
             repository,
+            new CanvasProviderResolver(repository, NullLogger<CanvasProviderResolver>.Instance),
             new StubEncryptionService(),
             clients,
             NullLogger<CanvasGraphService>.Instance);
@@ -118,10 +414,11 @@ private sealed class TestCanvasGraphService : CanvasGraphService
         public TestCanvasGraphService(
             ICanvasRepository canvasRepository,
             ILlmRepository llmRepository,
+            ICanvasProviderResolver canvasProviderResolver,
             ILlmEncryptionService encryptionService,
             IEnumerable<ILlmProviderClient> providerClients,
             Microsoft.Extensions.Logging.ILogger<CanvasGraphService> logger)
-            : base(canvasRepository, llmRepository, encryptionService, providerClients, logger)
+            : base(canvasRepository, llmRepository, canvasProviderResolver, encryptionService, providerClients, logger)
         {
             _llmService = new LlmService(
                 canvasRepository,
@@ -147,27 +444,68 @@ private sealed class StubEncryptionService : ILlmEncryptionService
 
     private sealed class StubProviderClient : ILlmProviderClient
     {
-        private readonly string _content;
+        private readonly Queue<string> _chatResponses;
+        private readonly Queue<string> _structuredResponses;
+        private readonly string _defaultChatContent;
+        private readonly string _defaultStructuredContent;
         private readonly string _model;
 
         public StubProviderClient(string provider, string content = "Assistant reply", string model = "test-model")
         {
             Provider = provider;
-            _content = content;
+            _chatResponses = new Queue<string>();
+            _structuredResponses = new Queue<string>();
+            _defaultChatContent = content;
+            _defaultStructuredContent = content;
+            _model = model;
+        }
+
+        public StubProviderClient(
+            string provider,
+            IEnumerable<string> structuredResponses,
+            IEnumerable<string>? chatResponses = null,
+            string model = "test-model")
+        {
+            Provider = provider;
+            _structuredResponses = new Queue<string>(structuredResponses);
+            _chatResponses = new Queue<string>(chatResponses ?? []);
+            _defaultStructuredContent = _structuredResponses.LastOrDefault() ?? "Assistant reply";
+            _defaultChatContent = _chatResponses.LastOrDefault() ?? _defaultStructuredContent;
             _model = model;
         }
 
         public string Provider { get; }
         public List<LlmProviderChatMessage> LastMessages { get; } = [];
 
-        public Task<LlmProviderChatResult> SendChatAsync(string apiKey, IReadOnlyList<LlmProviderChatMessage> messages, CancellationToken cancellationToken = default)
+        public Task<IReadOnlyList<LlmProviderModel>> GetModelsAsync(string apiKey, CancellationToken cancellationToken = default)
+        {
+            return Task.FromResult<IReadOnlyList<LlmProviderModel>>([new LlmProviderModel { Id = _model, DisplayName = _model }]);
+        }
+
+        public Task<LlmProviderChatResult> SendChatAsync(
+            string apiKey,
+            IReadOnlyList<LlmProviderChatMessage> messages,
+            string? modelOverride = null,
+            string? systemPrompt = null,
+            CancellationToken cancellationToken = default)
         {
             LastMessages.Clear();
             LastMessages.AddRange(messages);
             return Task.FromResult(new LlmProviderChatResult
             {
-                Content = _content,
-                Model = _model
+                Content = _chatResponses.Count > 0 ? _chatResponses.Dequeue() : _defaultChatContent,
+                Model = modelOverride ?? _model
+            });
+        }
+
+        public Task<LlmProviderChatResult> SendStructuredJsonAsync(string apiKey, LlmProviderStructuredRequest request, string? modelOverride = null, CancellationToken cancellationToken = default)
+        {
+            LastMessages.Clear();
+            LastMessages.AddRange(request.Messages);
+            return Task.FromResult(new LlmProviderChatResult
+            {
+                Content = _structuredResponses.Count > 0 ? _structuredResponses.Dequeue() : _defaultStructuredContent,
+                Model = modelOverride ?? _model
             });
         }
 
@@ -209,6 +547,7 @@ public Task<Canvas> CreateCanvasAsync(int userId, string title)
                 ParentNodeId = null,
                 Kind = "main",
                 Title = "Main Node",
+                GenerationMode = CanvasGenerationModes.Compact,
                 Content = string.Empty,
                 Depth = 0,
                 SiblingOrder = 0,
@@ -270,6 +609,24 @@ public Task<IReadOnlyList<CanvasNode>> GetCanvasNodesAsync(int userId, int canva
             return Task.FromResult(_nodes.FirstOrDefault(item => item.CanvasId == canvasId && item.Id == nodeId));
         }
 
+        public Task<CanvasNode> UpdateCanvasNodeAsync(int userId, int canvasId, int nodeId, CanvasNodeUpdateInput node)
+        {
+            var existing = _nodes.First(item => item.CanvasId == canvasId && item.Id == nodeId);
+            existing.GenerationMode = node.GenerationMode;
+            existing.Summary = node.Summary;
+            existing.Category = node.Category;
+            existing.Content = node.Content;
+            existing.SourcePrompt = node.SourcePrompt;
+            existing.ContinuationPrompt = node.ContinuationPrompt;
+            existing.Blocks = [.. node.Blocks];
+            existing.Sources = [.. node.Sources];
+            existing.UpdatedAt = DateTime.UtcNow;
+
+            var canvas = _canvases.First(item => item.UserId == userId && item.Id == canvasId);
+            canvas.UpdatedAt = existing.UpdatedAt;
+            return Task.FromResult(existing);
+        }
+
         public Task<IReadOnlyList<CanvasNode>> AddChildCanvasNodesAsync(int userId, int canvasId, int parentNodeId, IReadOnlyList<CanvasNodeCreateInput> nodes)
         {
             var nextOrder = _nodes.Where(item => item.CanvasId == canvasId && item.ParentNodeId == parentNodeId).Select(item => item.SiblingOrder).DefaultIfEmpty(-1).Max() + 1;
@@ -284,8 +641,14 @@ public Task<IReadOnlyList<CanvasNode>> AddChildCanvasNodesAsync(int userId, int
                     ParentNodeId = parentNodeId,
                     Kind = node.Kind,
                     Title = node.Title,
+                    GenerationMode = node.GenerationMode,
+                    Summary = node.Summary,
+                    Category = node.Category,
                     Content = node.Content,
                     SourcePrompt = node.SourcePrompt,
+                    ContinuationPrompt = node.ContinuationPrompt,
+                    Blocks = node.Blocks,
+                    Sources = node.Sources,
                     Depth = node.Depth,
                     SiblingOrder = nextOrder++,
                     CreatedAt = DateTime.UtcNow,
diff --git a/backend/Coliee.API.Tests/Services/CanvasServiceTests.cs b/backend/Coliee.API.Tests/Services/CanvasServiceTests.cs
index 96d8948..612e292 100644
--- a/backend/Coliee.API.Tests/Services/CanvasServiceTests.cs
+++ b/backend/Coliee.API.Tests/Services/CanvasServiceTests.cs
@@ -9,30 +9,6 @@ namespace Coliee.API.Tests.Services;
 
 public class CanvasServiceTests
 {
-    [Fact]
-    public async Task CreateCanvas_TrimsAndGeneratesReadableTitle()
-    {
-        var repository = new InMemoryCanvasRepository();
-        var service = new CanvasService(repository, NullLogger<CanvasService>.Instance);
-
-        var response = await service.CreateCanvasAsync(1, "   Plan   launch\nchecklist for the Q2 release   ");
-
-        response.Title.Should().Be("Plan launch checklist for the Q2 release");
-        response.Id.Should().BeGreaterThan(0);
-    }
-
-    [Fact]
-    public async Task CreateCanvas_WhitespaceOnlyPrompt_ThrowsBadRequest()
-    {
-        var repository = new InMemoryCanvasRepository();
-        var service = new CanvasService(repository, NullLogger<CanvasService>.Instance);
-
-        var action = async () => await service.CreateCanvasAsync(1, "   ");
-
-        var exception = await action.Should().ThrowAsync<CanvasOperationException>();
-        exception.Which.StatusCode.Should().Be(400);
-    }
-
     [Fact]
     public async Task GetCanvases_ReturnsItemsOrderedByMostRecentlyUpdated()
     {
@@ -227,6 +203,21 @@ public Task<IReadOnlyList<CanvasNode>> GetCanvasNodesAsync(int userId, int canva
             return Task.FromResult(_nodes.FirstOrDefault(item => item.CanvasId == canvasId && item.Id == nodeId));
         }
 
+        public Task<CanvasNode> UpdateCanvasNodeAsync(int userId, int canvasId, int nodeId, CanvasNodeUpdateInput node)
+        {
+            var existing = _nodes.First(item => item.CanvasId == canvasId && item.Id == nodeId);
+            existing.GenerationMode = node.GenerationMode;
+            existing.Summary = node.Summary;
+            existing.Category = node.Category;
+            existing.Content = node.Content;
+            existing.SourcePrompt = node.SourcePrompt;
+            existing.ContinuationPrompt = node.ContinuationPrompt;
+            existing.Blocks = [.. node.Blocks];
+            existing.Sources = [.. node.Sources];
+            existing.UpdatedAt = DateTime.UtcNow;
+            return Task.FromResult(existing);
+        }
+
         public Task<IReadOnlyList<CanvasNode>> AddChildCanvasNodesAsync(int userId, int canvasId, int parentNodeId, IReadOnlyList<CanvasNodeCreateInput> nodes)
         {
             var nextOrder = _nodes.Where(item => item.CanvasId == canvasId && item.ParentNodeId == parentNodeId).Select(item => item.SiblingOrder).DefaultIfEmpty(-1).Max() + 1;
diff --git a/backend/Coliee.API.Tests/Services/ChatSessionServiceTests.cs b/backend/Coliee.API.Tests/Services/ChatSessionServiceTests.cs
new file mode 100644
index 0000000..e38bc6b
--- /dev/null
+++ b/backend/Coliee.API.Tests/Services/ChatSessionServiceTests.cs
@@ -0,0 +1,973 @@
+using System.Text.Json;
+using Coliee.API.Data;
+using Coliee.API.DTOs;
+using Coliee.API.Models;
+using Coliee.API.Services;
+using FluentAssertions;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Extensions.Logging.Abstractions;
+using Xunit;
+
+namespace Coliee.API.Tests.Services;
+
+public class ChatSessionServiceTests
+{
+    [Fact]
+    public async Task CreateSession_CreatesRootNodeAndFirstAssistantReply()
+    {
+        var repository = new InMemoryChatSessionStore();
+        var service = CreateService(repository, new StubProviderClient(LlmProviderNames.Gemini, "First reply", "gemini-1.5-flash"));
+        await serviceDependencies(repository, "gemini");
+
+        var response = await service.CreateSessionAsync(1, null, "Plan the launch", null);
+
+        response.Graph.Session.Title.Should().Be("Plan the launch");
+        response.Graph.RootNodeId.Should().Be(response.Node.NodeId);
+        response.Node.LocalMessages.Select(item => item.Content).Should().ContainInOrder("Plan the launch", "First reply");
+
+        static async Task serviceDependencies(InMemoryChatSessionStore repository, string provider)
+        {
+            await repository.UpsertProviderKeyAsync(1, provider, $"enc::{provider}", $"****{provider[..4]}");
+            await repository.SetDefaultProviderAsync(1, provider);
+        }
+    }
+
+    [Fact]
+    public async Task SendNodeMessage_AppendsOnlyToSelectedNode()
+    {
+        var repository = new InMemoryChatSessionStore();
+        var service = CreateService(repository, new QueueProviderClient(LlmProviderNames.Gemini, [
+            new LlmProviderChatResult { Content = "First reply", Model = "gemini-1.5-flash" },
+            new LlmProviderChatResult { Content = "Next reply", Model = "gemini-1.5-flash" }
+        ]));
+        await ConfigureGeminiAsync(repository);
+
+        var created = await service.CreateSessionAsync(1, null, "Plan the launch", null);
+        var rootNodeId = created.Graph.RootNodeId;
+
+        var response = await service.SendNodeMessageAsync(1, created.Graph.Session.Id, rootNodeId, "Give me milestones", null, null);
+
+        response.Node.LocalMessages.Select(item => item.Content).Should().ContainInOrder(
+            "Plan the launch",
+            "First reply",
+            "Give me milestones",
+            "Next reply");
+    }
+
+    [Fact]
+    public async Task UpdateMessage_OnlyAllowsLatestUserPrompt()
+    {
+        var repository = new InMemoryChatSessionStore();
+        var service = CreateService(repository, new QueueProviderClient(LlmProviderNames.Gemini, [
+            new LlmProviderChatResult { Content = "First reply", Model = "gemini-1.5-flash" },
+            new LlmProviderChatResult { Content = "Second reply", Model = "gemini-1.5-flash" }
+        ]));
+        await ConfigureGeminiAsync(repository);
+
+        var created = await service.CreateSessionAsync(1, null, "Plan the launch", null);
+        await service.SendNodeMessageAsync(1, created.Graph.Session.Id, created.Graph.RootNodeId, "Give me milestones", null, null);
+        var firstUserMessageId = created.Node.LocalMessages.Single(item => item.Role == "user").Id;
+
+        var action = async () => await service.UpdateMessageAsync(1, created.Graph.Session.Id, created.Graph.RootNodeId, firstUserMessageId, new UpdateChatCanvasMessageRequest
+        {
+            Content = "Edited first prompt"
+        });
+
+        var exception = await action.Should().ThrowAsync<ChatSessionOperationException>();
+        exception.Which.StatusCode.Should().Be(400);
+    }
+
+    [Fact]
+    public async Task UpdateMessage_PersistsEditedPromptAndPreview()
+    {
+        var repository = new InMemoryChatSessionStore();
+        var service = CreateService(repository, new QueueProviderClient(LlmProviderNames.Gemini, [
+            new LlmProviderChatResult { Content = "Original reply", Model = "gemini-1.5-flash" }
+        ]));
+        await ConfigureGeminiAsync(repository);
+
+        var created = await service.CreateSessionAsync(1, null, "Plan the launch", null);
+        var userMessageId = created.Node.LocalMessages.Single(item => item.Role == "user").Id;
+
+        var updated = await service.UpdateMessageAsync(1, created.Graph.Session.Id, created.Graph.RootNodeId, userMessageId, new UpdateChatCanvasMessageRequest
+        {
+            Content = "Edited prompt with better detail"
+        });
+
+        updated.Node.LocalMessages.First(item => item.Role == "user").Content.Should().Be("Edited prompt with better detail");
+        updated.Node.Preview.Should().Contain("Edited prompt with better detail");
+    }
+
+    [Fact]
+    public async Task SendNodeMessage_WithModelOverride_PassesSelectedModelToProvider()
+    {
+        var repository = new InMemoryChatSessionStore();
+        var provider = new QueueProviderClient(LlmProviderNames.Gemini, [
+            new LlmProviderChatResult { Content = "First reply", Model = "gemini-1.5-flash" },
+            new LlmProviderChatResult { Content = "Next reply", Model = "gemini-2.0-flash" }
+        ]);
+        var service = CreateService(repository, provider);
+        await ConfigureGeminiAsync(repository);
+
+        var created = await service.CreateSessionAsync(1, null, "Plan the launch", null);
+
+        await service.SendNodeMessageAsync(1, created.Graph.Session.Id, created.Graph.RootNodeId, "Give me milestones", null, null, "gemini-2.0-flash");
+
+        provider.LastModelOverride.Should().Be("gemini-2.0-flash");
+    }
+
+    [Fact]
+    public async Task CreateBranch_CreatesChildNodeAndResolvedHistoryStopsAtBranchPoint()
+    {
+        var repository = new InMemoryChatSessionStore();
+        var provider = new QueueProviderClient(
+            LlmProviderNames.Gemini,
+            [
+                new LlmProviderChatResult { Content = "Root reply", Model = "gemini-1.5-flash" },
+                new LlmProviderChatResult { Content = "Second root reply", Model = "gemini-1.5-flash" },
+                new LlmProviderChatResult { Content = "Branch reply", Model = "gemini-1.5-flash" }
+            ],
+            [
+                new LlmProviderChatResult
+                {
+                    Content = """
+                        {
+                          "facts": [
+                            "Plan the launch"
+                          ],
+                          "decisions": [
+                            "Keep the rollout staged"
+                          ],
+                          "openQuestions": [
+                            "What is the budget?"
+                          ],
+                          "carryForwardInstructions": [
+                            "Continue from the selected assistant reply."
+                          ]
+                        }
+                        """,
+                    Model = "gemini-1.5-flash"
+                }
+            ]);
+        var service = CreateService(repository, provider);
+        await ConfigureGeminiAsync(repository);
+
+        var created = await service.CreateSessionAsync(1, null, "Plan the launch", null);
+        var rootNodeId = created.Graph.RootNodeId;
+        var continued = await service.SendNodeMessageAsync(1, created.Graph.Session.Id, rootNodeId, "Give me milestones", null, null);
+        var branchFromMessageId = continued.Node.LocalMessages
+            .Single(item => item.Content == "Root reply")
+            .Id;
+
+        var branched = await service.CreateBranchAsync(1, created.Graph.Session.Id, rootNodeId, branchFromMessageId, "Explore budget risks", null);
+
+        branched.Graph.Nodes.Should().HaveCount(2);
+        branched.Node.ParentNodeId.Should().Be(rootNodeId);
+        branched.Node.BranchFromMessageId.Should().Be(branchFromMessageId);
+        branched.Node.ResolvedMessages.Select(item => item.Content).Should().ContainInOrder(
+            "Plan the launch",
+            "Root reply",
+            "Explore budget risks",
+            "Branch reply");
+        branched.Node.ResolvedMessages.Select(item => item.Content).Should().NotContain("Give me milestones");
+        (await repository.GetNodeContextSnapshotAsync(1, created.Graph.Session.Id, branched.Node.NodeId))!.BoundaryMessageId.Should().Be(branchFromMessageId);
+    }
+
+    [Fact]
+    public async Task CreateBranch_WhenMessageIsNotAssistant_ThrowsBadRequest()
+    {
+        var repository = new InMemoryChatSessionStore();
+        var service = CreateService(repository, new StubProviderClient(LlmProviderNames.Gemini, "Root reply", "gemini-1.5-flash"));
+        await ConfigureGeminiAsync(repository);
+
+        var created = await service.CreateSessionAsync(1, null, "Plan the launch", null);
+        var userMessageId = created.Node.LocalMessages.First(item => item.Role == "user").Id;
+
+        var action = async () => await service.CreateBranchAsync(
+            1,
+            created.Graph.Session.Id,
+            created.Graph.RootNodeId,
+            userMessageId,
+            "Explore budget risks",
+            null);
+
+        var exception = await action.Should().ThrowAsync<ChatSessionOperationException>();
+        exception.Which.StatusCode.Should().Be(400);
+    }
+
+    [Fact]
+    public async Task SaveLayout_PersistsNodePositions()
+    {
+        var repository = new InMemoryChatSessionStore();
+        var service = CreateService(repository, new StubProviderClient(LlmProviderNames.Gemini, "Root reply", "gemini-1.5-flash"));
+        await ConfigureGeminiAsync(repository);
+
+        var created = await service.CreateSessionAsync(1, null, "Plan the launch", null);
+        var graph = await service.SaveLayoutAsync(1, created.Graph.Session.Id, [
+            new ChatNodeLayoutUpdateInput
+            {
+                NodeId = created.Graph.RootNodeId,
+                PositionX = 240,
+                PositionY = 96
+            }
+        ]);
+
+        graph.Nodes.Single(item => item.Id == created.Graph.RootNodeId).PositionX.Should().Be(240);
+        graph.Nodes.Single(item => item.Id == created.Graph.RootNodeId).PositionY.Should().Be(96);
+    }
+
+    [Fact]
+    public async Task CreateBlankSession_UsesExplicitTitleWithoutProviderCall()
+    {
+        var repository = new InMemoryChatSessionStore();
+        var service = CreateService(repository, new StubProviderClient(LlmProviderNames.Gemini, "Unused", "gemini-3.1-flash-lite-preview"));
+
+        var response = await service.CreateSessionAsync(1, "New Canvas", null, null);
+
+        response.Graph.Session.Title.Should().Be("New Canvas");
+        response.Node.Title.Should().Be("Main Node");
+        response.Node.LocalMessages.Should().BeEmpty();
+    }
+
+    [Fact]
+    public async Task DeleteSession_WhenOnlyOneCanvasRemains_ThrowsConflict()
+    {
+        var repository = new InMemoryChatSessionStore();
+        var service = CreateService(repository, new StubProviderClient(LlmProviderNames.Gemini, "Unused", "gemini-1.5-flash"));
+
+        var created = await service.CreateSessionAsync(1, "Untitled Canvas", null, null);
+
+        var action = async () => await service.DeleteSessionAsync(1, created.Graph.Session.Id);
+
+        var exception = await action.Should().ThrowAsync<ChatSessionOperationException>();
+        exception.Which.StatusCode.Should().Be(409);
+    }
+
+    [Fact]
+    public async Task SendNodeMessage_AppendsFormattingInstructionToProviderInputForTextOnlyChats()
+    {
+        var repository = new InMemoryChatSessionStore();
+        var provider = new CapturingProviderClient(LlmProviderNames.Gemini, "Formatted reply", "gemini-3.1-flash-lite-preview");
+        var service = CreateService(repository, provider);
+        await ConfigureGeminiAsync(repository);
+
+        var created = await service.CreateSessionAsync(1, null, "Plan the launch", null);
+
+        await service.SendNodeMessageAsync(1, created.Graph.Session.Id, created.Graph.RootNodeId, "Give me milestones", null, null);
+
+        provider.LastSystemPrompt.Should().Contain("Formatting instruction:");
+        provider.LastMessages.Should().NotBeNull();
+        provider.LastMessages!.Last().Content.Should().Be("Give me milestones");
+    }
+
+    [Fact]
+    public async Task SendNodeMessage_WhenContextExceedsBudget_CompactsHistoryIntoHiddenSnapshot()
+    {
+        var repository = new InMemoryChatSessionStore();
+        var provider = new QueueProviderClient(
+            LlmProviderNames.Gemini,
+            [
+                new LlmProviderChatResult { Content = "Root reply", Model = "gemini-1.5-flash" },
+                new LlmProviderChatResult { Content = "Compacted reply", Model = "gemini-1.5-flash" }
+            ],
+            [
+                new LlmProviderChatResult
+                {
+                    Content = """
+                        {
+                          "facts": [
+                            "Plan the launch"
+                          ],
+                          "decisions": [
+                            "Use a phased rollout"
+                          ],
+                          "openQuestions": [
+                            "How much budget is available?"
+                          ],
+                          "carryForwardInstructions": [
+                            "Keep the response focused on the latest prompt."
+                          ]
+                        }
+                        """,
+                    Model = "gemini-1.5-flash"
+                }
+            ]);
+        var service = CreateService(
+            repository,
+            provider,
+            new Dictionary<string, string?>
+            {
+                ["Llm:ContextCompaction:Default:MaxPromptChars"] = "50",
+                ["Llm:ContextCompaction:Default:ReserveChars"] = "0",
+                ["Llm:ContextCompaction:Default:FallbackWindowMessages"] = "2"
+            });
+        await ConfigureGeminiAsync(repository);
+
+        var created = await service.CreateSessionAsync(1, null, "Plan the launch", null);
+        var response = await service.SendNodeMessageAsync(
+            1,
+            created.Graph.Session.Id,
+            created.Graph.RootNodeId,
+            "Give me a detailed breakdown of the risks, milestones, dependencies, and rollout considerations for this launch.",
+            null,
+            null);
+
+        provider.LastSystemPrompt.Should().Contain("Compacted memory:");
+        provider.LastMessages.Select(item => item.Content).Should().ContainSingle();
+        response.Node.LocalMessages.Select(item => item.Content).Should().ContainInOrder(
+            "Plan the launch",
+            "Root reply",
+            "Give me a detailed breakdown of the risks, milestones, dependencies, and rollout considerations for this launch.",
+            "Compacted reply");
+
+        var snapshot = await repository.GetNodeContextSnapshotAsync(1, created.Graph.Session.Id, created.Graph.RootNodeId);
+        snapshot.Should().NotBeNull();
+        snapshot!.BoundaryMessageId.Should().Be(response.Node.LocalMessages.First(item => item.Content == "Root reply").Id);
+    }
+
+    [Fact]
+    public async Task PreviewGuestAsync_UsesRequestedModelWhenBuiltInGuestKeyExists()
+    {
+        var repository = new InMemoryChatSessionStore();
+        var provider = new QueueProviderClient(LlmProviderNames.OpenAi, [
+            new LlmProviderChatResult { Content = "Guest reply", Model = "gpt-5.2" }
+        ]);
+        var service = CreateService(
+            repository,
+            provider,
+            new Dictionary<string, string?>
+            {
+                ["Llm:GuestPreview:OpenAI:ApiKey"] = "guest-openai-key",
+                ["Llm:GuestPreview:OpenAI:Model"] = "gpt-5.1"
+            });
+
+        var response = await service.PreviewGuestAsync(new GuestChatPreviewRequest
+        {
+            ActionType = "chat",
+            Prompt = "Explain the roadmap",
+            ModelId = "gpt-5.2"
+        });
+
+        response.Provider.Should().Be(LlmProviderNames.OpenAi);
+        response.Model.Should().Be("gpt-5.2");
+        provider.LastModelOverride.Should().Be("gpt-5.2");
+        response.Message.Should().Be("Guest reply");
+    }
+
+    [Fact]
+    public async Task PreviewGuestAsync_WhenGuestCredentialsAreMissing_ReturnsFallbackPreview()
+    {
+        var repository = new InMemoryChatSessionStore();
+        var service = CreateService(
+            repository,
+            new StubProviderClient(LlmProviderNames.Gemini, "Unused", "gemini-3.1-flash-lite-preview"),
+            new Dictionary<string, string?>());
+
+        var response = await service.PreviewGuestAsync(new GuestChatPreviewRequest
+        {
+            ActionType = "chat",
+            Prompt = "Outline the launch plan",
+            ModelId = "gemini-3.1-flash-lite-preview"
+        });
+
+        response.Provider.Should().Be(LlmProviderNames.Gemini);
+        response.Model.Should().Be("gemini-3.1-flash-lite-preview");
+        response.Message.Should().Contain("guest preview interpreted your prompt");
+    }
+
+    private static async Task ConfigureGeminiAsync(InMemoryChatSessionStore repository)
+    {
+        await repository.UpsertProviderKeyAsync(1, LlmProviderNames.Gemini, "enc::AIza-gemini", "****9999");
+        await repository.SetDefaultProviderAsync(1, LlmProviderNames.Gemini);
+    }
+
+    private static ChatSessionService CreateService(
+        InMemoryChatSessionStore repository,
+        ILlmProviderClient providerClient,
+        IReadOnlyDictionary<string, string?>? configurationValues = null)
+    {
+        var configurationData = new Dictionary<string, string?>
+        {
+            ["Llm:GuestPreview:Provider"] = LlmProviderNames.Gemini,
+            ["Llm:GuestPreview:Model"] = "gemini-3.1-flash-lite-preview"
+        };
+
+        if (configurationValues != null)
+        {
+            foreach (var entry in configurationValues)
+                configurationData[entry.Key] = entry.Value;
+        }
+
+        var configuration = new ConfigurationBuilder()
+            .AddInMemoryCollection(configurationData)
+            .Build();
+
+        return new ChatSessionService(
+            repository,
+            repository,
+            new CanvasProviderResolver(repository, NullLogger<CanvasProviderResolver>.Instance),
+            new StubEncryptionService(),
+            new ChatNodeContextCompactionService(configuration, NullLogger<ChatNodeContextCompactionService>.Instance),
+            [providerClient],
+            configuration,
+            NullLogger<ChatSessionService>.Instance);
+    }
+
+    private sealed class StubEncryptionService : ILlmEncryptionService
+    {
+        public string Encrypt(string plaintext) => $"enc::{plaintext}";
+
+        public string Decrypt(string ciphertext) => ciphertext.Replace("enc::", string.Empty, StringComparison.Ordinal);
+    }
+
+    private sealed class StubProviderClient : ILlmProviderClient
+    {
+        private readonly string _content;
+        private readonly string _model;
+
+        public StubProviderClient(string provider, string content, string model)
+        {
+            Provider = provider;
+            _content = content;
+            _model = model;
+        }
+
+        public string Provider { get; }
+        public string? LastSystemPrompt { get; private set; }
+
+        public Task<IReadOnlyList<LlmProviderModel>> GetModelsAsync(string apiKey, CancellationToken cancellationToken = default)
+        {
+            return Task.FromResult<IReadOnlyList<LlmProviderModel>>([new LlmProviderModel { Id = _model, DisplayName = _model }]);
+        }
+
+        public Task<LlmProviderChatResult> SendChatAsync(
+            string apiKey,
+            IReadOnlyList<LlmProviderChatMessage> messages,
+            string? modelOverride = null,
+            string? systemPrompt = null,
+            CancellationToken cancellationToken = default)
+        {
+            LastSystemPrompt = systemPrompt;
+            return Task.FromResult(new LlmProviderChatResult
+            {
+                Content = _content,
+                Model = modelOverride ?? _model
+            });
+        }
+
+        public Task<LlmProviderChatResult> SendStructuredJsonAsync(string apiKey, LlmProviderStructuredRequest request, string? modelOverride = null, CancellationToken cancellationToken = default)
+        {
+            return Task.FromResult(new LlmProviderChatResult
+            {
+                Content = _content,
+                Model = modelOverride ?? _model
+            });
+        }
+
+        public Task TestApiKeyAsync(string apiKey, CancellationToken cancellationToken = default) => Task.CompletedTask;
+    }
+
+    private sealed class QueueProviderClient : ILlmProviderClient
+    {
+        private readonly Queue<LlmProviderChatResult> _chatResults;
+        private readonly Queue<LlmProviderChatResult> _structuredResults;
+
+        public QueueProviderClient(string provider, IReadOnlyList<LlmProviderChatResult> results)
+            : this(provider, results, [])
+        {
+        }
+
+        public QueueProviderClient(
+            string provider,
+            IReadOnlyList<LlmProviderChatResult> chatResults,
+            IReadOnlyList<LlmProviderChatResult> structuredResults)
+        {
+            Provider = provider;
+            _chatResults = new Queue<LlmProviderChatResult>(chatResults);
+            _structuredResults = new Queue<LlmProviderChatResult>(structuredResults);
+        }
+
+        public string Provider { get; }
+        public string? LastModelOverride { get; private set; }
+        public string? LastSystemPrompt { get; private set; }
+        public IReadOnlyList<LlmProviderChatMessage> LastMessages { get; private set; } = [];
+
+        public Task<IReadOnlyList<LlmProviderModel>> GetModelsAsync(string apiKey, CancellationToken cancellationToken = default)
+        {
+            var model = _chatResults.Count > 0 ? _chatResults.Peek().Model : (_structuredResults.Count > 0 ? _structuredResults.Peek().Model : "test-model");
+            return Task.FromResult<IReadOnlyList<LlmProviderModel>>([new LlmProviderModel { Id = model, DisplayName = model }]);
+        }
+
+        public Task<LlmProviderChatResult> SendChatAsync(
+            string apiKey,
+            IReadOnlyList<LlmProviderChatMessage> messages,
+            string? modelOverride = null,
+            string? systemPrompt = null,
+            CancellationToken cancellationToken = default)
+        {
+            LastModelOverride = modelOverride;
+            LastSystemPrompt = systemPrompt;
+            LastMessages = messages;
+            return Task.FromResult(_chatResults.Dequeue());
+        }
+
+        public Task<LlmProviderChatResult> SendStructuredJsonAsync(string apiKey, LlmProviderStructuredRequest request, string? modelOverride = null, CancellationToken cancellationToken = default)
+        {
+            LastModelOverride = modelOverride;
+            return Task.FromResult(_structuredResults.Count > 0 ? _structuredResults.Dequeue() : _chatResults.Dequeue());
+        }
+
+        public Task TestApiKeyAsync(string apiKey, CancellationToken cancellationToken = default) => Task.CompletedTask;
+    }
+
+    private sealed class CapturingProviderClient : ILlmProviderClient
+    {
+        private readonly string _content;
+        private readonly string _model;
+
+        public CapturingProviderClient(string provider, string content, string model)
+        {
+            Provider = provider;
+            _content = content;
+            _model = model;
+        }
+
+        public string Provider { get; }
+        public IReadOnlyList<LlmProviderChatMessage>? LastMessages { get; private set; }
+        public string? LastModelOverride { get; private set; }
+        public string? LastSystemPrompt { get; private set; }
+
+        public Task<IReadOnlyList<LlmProviderModel>> GetModelsAsync(string apiKey, CancellationToken cancellationToken = default)
+        {
+            return Task.FromResult<IReadOnlyList<LlmProviderModel>>([new LlmProviderModel { Id = _model, DisplayName = _model }]);
+        }
+
+        public Task<LlmProviderChatResult> SendChatAsync(
+            string apiKey,
+            IReadOnlyList<LlmProviderChatMessage> messages,
+            string? modelOverride = null,
+            string? systemPrompt = null,
+            CancellationToken cancellationToken = default)
+        {
+            LastMessages = messages;
+            LastModelOverride = modelOverride;
+            LastSystemPrompt = systemPrompt;
+
+            return Task.FromResult(new LlmProviderChatResult
+            {
+                Content = _content,
+                Model = modelOverride ?? _model
+            });
+        }
+
+        public Task<LlmProviderChatResult> SendStructuredJsonAsync(string apiKey, LlmProviderStructuredRequest request, string? modelOverride = null, CancellationToken cancellationToken = default)
+        {
+            LastModelOverride = modelOverride;
+
+            return Task.FromResult(new LlmProviderChatResult
+            {
+                Content = _content,
+                Model = modelOverride ?? _model
+            });
+        }
+
+        public Task TestApiKeyAsync(string apiKey, CancellationToken cancellationToken = default) => Task.CompletedTask;
+    }
+
+    private sealed class InMemoryChatSessionStore : IChatSessionRepository, ILlmRepository
+    {
+        private readonly List<ChatSession> _sessions = [];
+        private readonly List<ChatNode> _nodes = [];
+        private readonly List<ChatMessage> _messages = [];
+        private readonly List<LlmProviderKeyRecord> _providerKeys = [];
+        private readonly List<MainNodeMessage> _mainNodeMessages = [];
+        private readonly Dictionary<int, int> _conversationIdsByCanvasId = [];
+        private int _nextSessionId = 1;
+        private int _nextNodeId = 1;
+        private int _nextMessageId = 1;
+        private int _nextConversationId = 1;
+
+        public Task<ChatSession> CreateSessionAsync(int userId, string title)
+        {
+            var session = new ChatSession
+            {
+                Id = _nextSessionId++,
+                UserId = userId,
+                Title = title,
+                CreatedAt = DateTime.UtcNow,
+                UpdatedAt = DateTime.UtcNow
+            };
+            _sessions.Add(session);
+            return Task.FromResult(session);
+        }
+
+        public Task<IReadOnlyList<ChatSession>> GetSessionsAsync(int userId)
+        {
+            return Task.FromResult<IReadOnlyList<ChatSession>>(
+                _sessions
+                    .Where(item => item.UserId == userId)
+                    .OrderByDescending(item => item.UpdatedAt)
+                    .ThenByDescending(item => item.Id)
+                    .ToList());
+        }
+
+        public Task<ChatSession?> GetSessionAsync(int userId, int sessionId)
+        {
+            return Task.FromResult(_sessions.FirstOrDefault(item => item.UserId == userId && item.Id == sessionId));
+        }
+
+        public Task<ChatSession> RenameSessionAsync(int userId, int sessionId, string title)
+        {
+            var session = _sessions.First(item => item.UserId == userId && item.Id == sessionId);
+            session.Title = title;
+            session.UpdatedAt = DateTime.UtcNow;
+            return Task.FromResult(session);
+        }
+
+        public Task DeleteSessionAsync(int userId, int sessionId)
+        {
+            _sessions.RemoveAll(item => item.UserId == userId && item.Id == sessionId);
+            var deletedNodeIds = _nodes.Where(item => item.SessionId == sessionId).Select(item => item.Id).ToHashSet();
+            _nodes.RemoveAll(item => item.SessionId == sessionId);
+            _messages.RemoveAll(item => deletedNodeIds.Contains(item.NodeId));
+            return Task.CompletedTask;
+        }
+
+        public Task<ChatNode> EnsureRootNodeAsync(int userId, int sessionId, string title)
+        {
+            var existing = _nodes.FirstOrDefault(item => item.SessionId == sessionId && item.ParentNodeId == null);
+            if (existing != null)
+                return Task.FromResult(existing);
+
+            var root = new ChatNode
+            {
+                Id = _nextNodeId++,
+                SessionId = sessionId,
+                ParentNodeId = null,
+                BranchFromMessageId = null,
+                NodeType = ChatNodeTypes.Question,
+                Title = title,
+                Preview = string.Empty,
+                Content = string.Empty,
+                PositionX = 400,
+                PositionY = 300,
+                Width = 600,
+                Height = 520,
+                IsCollapsed = false,
+                ExpandedWidth = 600,
+                ExpandedHeight = 520,
+                PreferredProvider = null,
+                PreferredModel = null,
+                ContextBoundaryMessageId = null,
+                ContextSnapshotJson = null,
+                ContextSnapshotUpdatedAt = null,
+                SiblingOrder = 0,
+                CreatedAt = DateTime.UtcNow,
+                UpdatedAt = DateTime.UtcNow
+            };
+            _nodes.Add(root);
+            return Task.FromResult(root);
+        }
+
+        public Task<IReadOnlyList<ChatNode>> GetNodesAsync(int userId, int sessionId)
+        {
+            return Task.FromResult<IReadOnlyList<ChatNode>>(
+                _nodes
+                    .Where(item => item.SessionId == sessionId)
+                    .OrderBy(item => item.ParentNodeId)
+                    .ThenBy(item => item.SiblingOrder)
+                    .ThenBy(item => item.Id)
+                    .ToList());
+        }
+
+        public Task<ChatNode?> GetNodeAsync(int userId, int sessionId, int nodeId)
+        {
+            return Task.FromResult(_nodes.FirstOrDefault(item => item.SessionId == sessionId && item.Id == nodeId));
+        }
+
+        public Task<ChatNode> CreateNodeAsync(int userId, int sessionId, ChatNodeCreateInput node)
+        {
+            var siblingOrder = _nodes
+                .Where(item => item.SessionId == sessionId && item.ParentNodeId == node.ParentNodeId)
+                .Select(item => item.SiblingOrder)
+                .DefaultIfEmpty(-1)
+                .Max() + 1;
+
+            var created = new ChatNode
+            {
+                Id = _nextNodeId++,
+                SessionId = sessionId,
+                ParentNodeId = node.ParentNodeId,
+                BranchFromMessageId = node.BranchFromMessageId,
+                NodeType = node.NodeType,
+                Title = node.Title,
+                Preview = node.Preview,
+                Content = node.Content,
+                PositionX = node.PositionX,
+                PositionY = node.PositionY,
+                Width = node.Width,
+                Height = node.Height,
+                IsCollapsed = node.IsCollapsed,
+                ExpandedWidth = node.ExpandedWidth,
+                ExpandedHeight = node.ExpandedHeight,
+                PreferredProvider = node.PreferredProvider,
+                PreferredModel = node.PreferredModel,
+                ContextBoundaryMessageId = null,
+                ContextSnapshotJson = null,
+                ContextSnapshotUpdatedAt = null,
+                SiblingOrder = siblingOrder,
+                CreatedAt = DateTime.UtcNow,
+                UpdatedAt = DateTime.UtcNow
+            };
+            _nodes.Add(created);
+            return Task.FromResult(created);
+        }
+
+        public Task<ChatNode> UpdateNodeAsync(int userId, int sessionId, int nodeId, ChatNodeUpdateInput update)
+        {
+            var node = _nodes.First(item => item.SessionId == sessionId && item.Id == nodeId);
+            node.NodeType = update.NodeType;
+            node.Title = update.Title;
+            node.Preview = update.Preview;
+            node.Content = update.Content;
+            node.PositionX = update.PositionX;
+            node.PositionY = update.PositionY;
+            node.Width = update.Width;
+            node.Height = update.Height;
+            node.IsCollapsed = update.IsCollapsed;
+            node.ExpandedWidth = update.ExpandedWidth;
+            node.ExpandedHeight = update.ExpandedHeight;
+            node.PreferredProvider = update.PreferredProvider;
+            node.PreferredModel = update.PreferredModel;
+            node.UpdatedAt = DateTime.UtcNow;
+            var session = _sessions.First(item => item.Id == sessionId && item.UserId == userId);
+            session.UpdatedAt = DateTime.UtcNow;
+            return Task.FromResult(node);
+        }
+
+        public Task<ChatNodeContextSnapshot?> GetNodeContextSnapshotAsync(int userId, int sessionId, int nodeId)
+        {
+            var node = _nodes.FirstOrDefault(item => item.SessionId == sessionId && item.Id == nodeId);
+            if (node == null || string.IsNullOrWhiteSpace(node.ContextSnapshotJson))
+                return Task.FromResult<ChatNodeContextSnapshot?>(null);
+
+            return Task.FromResult(JsonSerializer.Deserialize<ChatNodeContextSnapshot>(node.ContextSnapshotJson));
+        }
+
+        public Task<ChatNode> UpdateNodeContextSnapshotAsync(int userId, int sessionId, int nodeId, int boundaryMessageId, string snapshotJson)
+        {
+            var node = _nodes.First(item => item.SessionId == sessionId && item.Id == nodeId);
+            node.ContextBoundaryMessageId = boundaryMessageId;
+            node.ContextSnapshotJson = snapshotJson;
+            node.ContextSnapshotUpdatedAt = DateTime.UtcNow;
+            node.UpdatedAt = DateTime.UtcNow;
+            var session = _sessions.First(item => item.Id == sessionId && item.UserId == userId);
+            session.UpdatedAt = DateTime.UtcNow;
+            return Task.FromResult(node);
+        }
+
+        public Task SaveNodeLayoutsAsync(int userId, int sessionId, IReadOnlyList<ChatNodeLayoutUpdateInput> nodes)
+        {
+            foreach (var update in nodes)
+            {
+                var node = _nodes.First(item => item.SessionId == sessionId && item.Id == update.NodeId);
+                node.PositionX = update.PositionX;
+                node.PositionY = update.PositionY;
+            }
+
+            return Task.CompletedTask;
+        }
+
+        public Task<bool> DeleteNodeAsync(int userId, int sessionId, int nodeId)
+        {
+            var target = _nodes.FirstOrDefault(item => item.SessionId == sessionId && item.Id == nodeId);
+            if (target == null || target.ParentNodeId == null)
+                return Task.FromResult(false);
+
+            var toDelete = new HashSet<int> { nodeId };
+            var changed = true;
+            while (changed)
+            {
+                changed = false;
+                foreach (var child in _nodes.Where(item => item.SessionId == sessionId && item.ParentNodeId.HasValue && toDelete.Contains(item.ParentNodeId.Value)).ToList())
+                {
+                    if (toDelete.Add(child.Id))
+                        changed = true;
+                }
+            }
+
+            _nodes.RemoveAll(item => item.SessionId == sessionId && toDelete.Contains(item.Id));
+            _messages.RemoveAll(item => toDelete.Contains(item.NodeId));
+            return Task.FromResult(true);
+        }
+
+        public Task<IReadOnlyList<ChatMessage>> GetNodeMessagesAsync(int userId, int sessionId, int nodeId)
+        {
+            return Task.FromResult<IReadOnlyList<ChatMessage>>(
+                _messages.Where(item => item.NodeId == nodeId).OrderBy(item => item.Id).ToList());
+        }
+
+        public Task<ChatMessage?> GetNodeMessageAsync(int userId, int sessionId, int nodeId, int messageId)
+        {
+            return Task.FromResult(_messages.FirstOrDefault(item => item.NodeId == nodeId && item.Id == messageId));
+        }
+
+        public Task<ChatMessage> AddMessageAsync(int userId, int sessionId, int nodeId, string role, string content, string? imageUrl, string? provider, string? model)
+        {
+            var message = new ChatMessage
+            {
+                Id = _nextMessageId++,
+                NodeId = nodeId,
+                Role = role,
+                Content = content,
+                ImageUrl = imageUrl,
+                Provider = provider,
+                Model = model,
+                CreatedAt = DateTime.UtcNow,
+                UpdatedAt = DateTime.UtcNow
+            };
+            _messages.Add(message);
+
+            var node = _nodes.First(item => item.SessionId == sessionId && item.Id == nodeId);
+            node.UpdatedAt = DateTime.UtcNow;
+            var session = _sessions.First(item => item.UserId == userId && item.Id == sessionId);
+            session.UpdatedAt = DateTime.UtcNow;
+
+            return Task.FromResult(message);
+        }
+
+        public Task<ChatMessage> UpdateMessageAsync(int userId, int sessionId, int nodeId, int messageId, string content)
+        {
+            var message = _messages.First(item => item.NodeId == nodeId && item.Id == messageId);
+            message.Content = content;
+            message.UpdatedAt = DateTime.UtcNow;
+
+            var node = _nodes.First(item => item.SessionId == sessionId && item.Id == nodeId);
+            node.UpdatedAt = DateTime.UtcNow;
+            var session = _sessions.First(item => item.UserId == userId && item.Id == sessionId);
+            session.UpdatedAt = DateTime.UtcNow;
+
+            return Task.FromResult(message);
+        }
+
+        public Task ReassignMessagesAsync(int userId, int sessionId, int sourceNodeId, int targetNodeId, IReadOnlyList<int> messageIds)
+        {
+            var normalizedIds = messageIds.ToHashSet();
+            var sourceMessages = _messages
+                .Where(item => item.NodeId == sourceNodeId && normalizedIds.Contains(item.Id))
+                .ToList();
+            if (sourceMessages.Count != normalizedIds.Count)
+                throw new InvalidOperationException("Message reassignment was incomplete.");
+
+            foreach (var message in sourceMessages)
+            {
+                message.NodeId = targetNodeId;
+                message.UpdatedAt = DateTime.UtcNow;
+            }
+
+            var now = DateTime.UtcNow;
+            var sourceNode = _nodes.First(item => item.SessionId == sessionId && item.Id == sourceNodeId);
+            sourceNode.UpdatedAt = now;
+            var targetNode = _nodes.First(item => item.SessionId == sessionId && item.Id == targetNodeId);
+            targetNode.UpdatedAt = now;
+            var session = _sessions.First(item => item.UserId == userId && item.Id == sessionId);
+            session.UpdatedAt = now;
+
+            return Task.CompletedTask;
+        }
+
+        public Task<IReadOnlyList<LlmProviderKeyRecord>> GetProviderKeysAsync(int userId)
+        {
+            return Task.FromResult<IReadOnlyList<LlmProviderKeyRecord>>(
+                _providerKeys.Where(item => item.UserId == userId).ToList());
+        }
+
+        public Task<LlmProviderKeyRecord?> GetProviderKeyAsync(int userId, string provider)
+        {
+            return Task.FromResult(_providerKeys.FirstOrDefault(item => item.UserId == userId && item.Provider == provider));
+        }
+
+        public Task UpsertProviderKeyAsync(int userId, string provider, string encryptedApiKey, string maskedLast4)
+        {
+            var existing = _providerKeys.FirstOrDefault(item => item.UserId == userId && item.Provider == provider);
+            if (existing == null)
+            {
+                _providerKeys.Add(new LlmProviderKeyRecord
+                {
+                    UserId = userId,
+                    Provider = provider,
+                    EncryptedApiKey = encryptedApiKey,
+                    MaskedLast4 = maskedLast4,
+                    CreatedAt = DateTime.UtcNow,
+                    UpdatedAt = DateTime.UtcNow
+                });
+            }
+            else
+            {
+                existing.EncryptedApiKey = encryptedApiKey;
+                existing.MaskedLast4 = maskedLast4;
+                existing.UpdatedAt = DateTime.UtcNow;
+            }
+
+            return Task.CompletedTask;
+        }
+
+        public Task DeleteProviderKeyAsync(int userId, string provider)
+        {
+            _providerKeys.RemoveAll(item => item.UserId == userId && item.Provider == provider);
+            return Task.CompletedTask;
+        }
+
+        public Task SetDefaultProviderAsync(int userId, string? provider)
+        {
+            foreach (var key in _providerKeys.Where(item => item.UserId == userId))
+                key.IsDefault = key.Provider == provider;
+
+            return Task.CompletedTask;
+        }
+
+        public Task MarkProviderTestedAsync(int userId, string provider, DateTime testedAtUtc)
+        {
+            var existing = _providerKeys.First(item => item.UserId == userId && item.Provider == provider);
+            existing.LastTestedAt = testedAtUtc;
+            return Task.CompletedTask;
+        }
+
+        public Task<int> GetOrCreateMainNodeConversationAsync(int userId, int canvasId)
+        {
+            if (!_conversationIdsByCanvasId.TryGetValue(canvasId, out var conversationId))
+            {
+                conversationId = _nextConversationId++;
+                _conversationIdsByCanvasId[canvasId] = conversationId;
+            }
+
+            return Task.FromResult(conversationId);
+        }
+
+        public Task<int?> GetMainNodeConversationIdAsync(int userId, int canvasId)
+        {
+            return Task.FromResult<int?>(_conversationIdsByCanvasId.GetValueOrDefault(canvasId));
+        }
+
+        public Task<IReadOnlyList<MainNodeMessage>> GetMainNodeMessagesAsync(int userId, int canvasId)
+        {
+            return Task.FromResult<IReadOnlyList<MainNodeMessage>>(_mainNodeMessages);
+        }
+
+        public Task<int> AddMainNodeMessageAsync(int userId, int canvasId, string role, string content, string? provider, string? model)
+        {
+            var nextId = _mainNodeMessages.Count + 1;
+            _mainNodeMessages.Add(new MainNodeMessage
+            {
+                Id = nextId,
+                ConversationId = canvasId,
+                Role = role,
+                Content = content,
+                Provider = provider,
+                Model = model,
+                CreatedAt = DateTime.UtcNow
+            });
+            return Task.FromResult(nextId);
+        }
+    }
+}
diff --git a/backend/Coliee.API.Tests/Services/LlmProviderClientTests.cs b/backend/Coliee.API.Tests/Services/LlmProviderClientTests.cs
index d7c9dd7..b37122b 100644
--- a/backend/Coliee.API.Tests/Services/LlmProviderClientTests.cs
+++ b/backend/Coliee.API.Tests/Services/LlmProviderClientTests.cs
@@ -2,6 +2,7 @@
 using System.Text;
 using Coliee.API.Services;
 using FluentAssertions;
+using Microsoft.AspNetCore.Http;
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.Logging.Abstractions;
 using Xunit;
@@ -61,6 +62,134 @@ public async Task GeminiClient_ParsesAssistantReply()
         response.Content.Should().Be("Gemini says hi");
     }
 
+    [Fact]
+    public async Task GeminiClient_StructuredJson_UsesResponseJsonSchema()
+    {
+        string? requestBody = null;
+        var client = new GeminiProviderClient(
+            new HttpClient(new StubHttpMessageHandler(request =>
+            {
+                requestBody = request.Content!.ReadAsStringAsync().GetAwaiter().GetResult();
+                return new HttpResponseMessage(HttpStatusCode.OK)
+                {
+                    Content = new StringContent("""{"candidates":[{"content":{"parts":[{"text":"{\"branches\":[]}"}]}}]}""", Encoding.UTF8, "application/json")
+                };
+            })),
+            CreateConfiguration(),
+            NullLogger<GeminiProviderClient>.Instance);
+
+        await client.SendStructuredJsonAsync(
+            "AIza-test",
+            new LlmProviderStructuredRequest
+            {
+                Instructions = "Return JSON.",
+                Messages = [new LlmProviderChatMessage { Role = "user", Content = "Hello" }],
+                SchemaName = "branch_plan",
+                SchemaJson = """{"type":"object","properties":{"branches":{"type":"array"}}}""",
+                MaxOutputTokens = 256
+            });
+
+        requestBody.Should().NotBeNull();
+        requestBody.Should().Contain("responseJsonSchema");
+        requestBody.Should().NotContain("responseSchema");
+    }
+
+    [Fact]
+    public async Task LmStudioClient_ParsesAssistantReply()
+    {
+        var client = new LmStudioProviderClient(
+            new HttpClient(new StubHttpMessageHandler(_ =>
+                new HttpResponseMessage(HttpStatusCode.OK)
+                {
+                    Content = new StringContent("""{"choices":[{"message":{"content":"LM Studio says hi"}}]}""", Encoding.UTF8, "application/json")
+                })),
+            CreateConfiguration(),
+            NullLogger<LmStudioProviderClient>.Instance);
+
+        var response = await client.SendChatAsync("lmstudio", [new LlmProviderChatMessage { Role = "user", Content = "Hello" }]);
+
+        response.Content.Should().Be("LM Studio says hi");
+    }
+
+    [Fact]
+    public async Task LmStudioClient_GetModels_ReturnsAvailableModels()
+    {
+        var client = new LmStudioProviderClient(
+            new HttpClient(new StubHttpMessageHandler(_ =>
+                new HttpResponseMessage(HttpStatusCode.OK)
+                {
+                    Content = new StringContent("""{"data":[{"id":"local-model"},{"id":"qwen/qwen3-4b-2507"}]}""", Encoding.UTF8, "application/json")
+                })),
+            CreateConfiguration(),
+            NullLogger<LmStudioProviderClient>.Instance);
+
+        var models = await client.GetModelsAsync("lmstudio");
+
+        models.Select(item => item.Id).Should().ContainInOrder("local-model", "qwen/qwen3-4b-2507");
+    }
+
+    [Fact]
+    public async Task GeminiClient_InvalidArgument_DoesNotMapToInvalidKey()
+    {
+        var client = new GeminiProviderClient(
+            new HttpClient(new StubHttpMessageHandler(_ =>
+                new HttpResponseMessage(HttpStatusCode.BadRequest)
+                {
+                    Content = new StringContent(
+                        """{"error":{"code":400,"message":"Request contains an invalid argument.","status":"INVALID_ARGUMENT"}}""",
+                        Encoding.UTF8,
+                        "application/json")
+                })),
+            CreateConfiguration(),
+            NullLogger<GeminiProviderClient>.Instance);
+
+        var action = async () => await client.SendStructuredJsonAsync(
+            "AIza-test",
+            new LlmProviderStructuredRequest
+            {
+                Instructions = "Return JSON.",
+                Messages = [new LlmProviderChatMessage { Role = "user", Content = "Hello" }],
+                SchemaName = "branch_plan",
+                SchemaJson = """{"type":"object","properties":{"branches":{"type":"array"}}}""",
+                MaxOutputTokens = 256
+            });
+
+        var exception = await action.Should().ThrowAsync<LlmChatException>();
+        exception.Which.Code.Should().Be(LlmProviderErrorCodes.ProviderError);
+        exception.Which.Message.Should().Be("Request contains an invalid argument.");
+    }
+
+    [Fact]
+    public async Task GeminiClient_ServiceUnavailable_Preserves503StatusCode()
+    {
+        var client = new GeminiProviderClient(
+            new HttpClient(new StubHttpMessageHandler(_ =>
+                new HttpResponseMessage(HttpStatusCode.ServiceUnavailable)
+                {
+                    Content = new StringContent(
+                        """{"error":{"code":503,"message":"This model is currently experiencing high demand.","status":"UNAVAILABLE"}}""",
+                        Encoding.UTF8,
+                        "application/json")
+                })),
+            CreateConfiguration(),
+            NullLogger<GeminiProviderClient>.Instance);
+
+        var action = async () => await client.SendStructuredJsonAsync(
+            "AIza-test",
+            new LlmProviderStructuredRequest
+            {
+                Instructions = "Return JSON.",
+                Messages = [new LlmProviderChatMessage { Role = "user", Content = "Hello" }],
+                SchemaName = "branch_plan",
+                SchemaJson = """{"type":"object","properties":{"branches":{"type":"array"}}}""",
+                MaxOutputTokens = 256
+            });
+
+        var exception = await action.Should().ThrowAsync<LlmChatException>();
+        exception.Which.StatusCode.Should().Be(StatusCodes.Status503ServiceUnavailable);
+        exception.Which.Code.Should().Be(LlmProviderErrorCodes.ProviderError);
+    }
+
     [Fact]
     public async Task OpenAiClient_InvalidKey_MapsToLlmChatException()
     {
@@ -87,6 +216,8 @@ private static IConfiguration CreateConfiguration()
                 ["Llm:Providers:OpenAI:Model"] = "gpt-4.1-mini",
                 ["Llm:Providers:Claude:Model"] = "claude-3-5-haiku-latest",
                 ["Llm:Providers:Gemini:Model"] = "gemini-1.5-flash",
+                ["Llm:Providers:LmStudio:BaseUrl"] = "http://localhost:1234/v1",
+                ["Llm:Providers:LmStudio:Model"] = "local-model",
             })
             .Build();
     }
diff --git a/backend/Coliee.API.Tests/Services/LlmServiceTests.cs b/backend/Coliee.API.Tests/Services/LlmServiceTests.cs
index edf225d..899ba6c 100644
--- a/backend/Coliee.API.Tests/Services/LlmServiceTests.cs
+++ b/backend/Coliee.API.Tests/Services/LlmServiceTests.cs
@@ -1,4 +1,5 @@
 using Coliee.API.Data;
+using Coliee.API.DTOs;
 using Coliee.API.Models;
 using Coliee.API.Services;
 using FluentAssertions;
@@ -35,6 +36,116 @@ public async Task DeleteProviderKey_DefaultProviderPromotesNextConfiguredProvide
         response.DefaultProvider.Should().Be("claude");
     }
 
+    [Fact]
+    public async Task DeleteProviderKey_DefaultProviderPromotesLmStudioWhenItIsTheOnlyRemainingProvider()
+    {
+        var repository = new InMemoryDataStore();
+        var service = CreateService(
+            repository,
+            new StubProviderClient(LlmProviderNames.OpenAi),
+            new StubProviderClient(LlmProviderNames.LmStudio));
+
+        await service.UpsertProviderKeyAsync(1, "openai", "sk-openai-1234");
+        await service.UpsertProviderKeyAsync(1, "lmstudio", "lmstudio");
+
+        var response = await service.DeleteProviderKeyAsync(1, "openai");
+
+        response.DefaultProvider.Should().Be("lmstudio");
+    }
+
+    [Fact]
+    public async Task GetProviderModels_ConfiguredProvider_ReturnsDiscoveredModels()
+    {
+        var repository = new InMemoryDataStore();
+        var service = CreateService(
+            repository,
+            new StubProviderClient(
+                LlmProviderNames.OpenAi,
+                models:
+                [
+                    new LlmProviderModel { Id = "gpt-4.1-mini", DisplayName = "GPT-4.1 Mini" },
+                    new LlmProviderModel { Id = "gpt-4.1", DisplayName = "GPT-4.1" }
+                ]));
+
+        await service.UpsertProviderKeyAsync(1, "openai", "sk-openai-1234");
+
+        var response = await service.GetProviderModelsAsync(1, "openai");
+
+        response.Provider.Should().Be("openai");
+        response.Models.Select(item => item.Id).Should().ContainInOrder("gpt-4.1-mini", "gpt-4.1");
+    }
+
+    [Fact]
+    public async Task GetProviders_IncludesLmStudioInConfiguredOrder()
+    {
+        var repository = new InMemoryDataStore();
+        var service = CreateService(
+            repository,
+            new StubProviderClient(LlmProviderNames.OpenAi),
+            new StubProviderClient(LlmProviderNames.LmStudio));
+
+        await service.UpsertProviderKeyAsync(1, "lmstudio", "lmstudio");
+        await service.UpsertProviderKeyAsync(1, "openai", "sk-openai-1234");
+
+        var response = await service.GetProvidersAsync(1);
+
+        response.Providers.Select(item => item.Provider).Should().ContainInOrder("openai", "claude", "gemini", "lmstudio");
+        response.Providers.Single(item => item.Provider == "lmstudio").Configured.Should().BeTrue();
+    }
+
+    [Fact]
+    public async Task GetProviderModels_WithoutConfiguredProvider_ThrowsMissingKey()
+    {
+        var repository = new InMemoryDataStore();
+        var service = CreateService(repository, new StubProviderClient(LlmProviderNames.OpenAi));
+
+        var action = async () => await service.GetProviderModelsAsync(1, "openai");
+
+        var exception = await action.Should().ThrowAsync<LlmChatException>();
+        exception.Which.Code.Should().Be(LlmProviderErrorCodes.MissingKey);
+        exception.Which.StatusCode.Should().Be(400);
+    }
+
+    [Fact]
+    public async Task SendStandaloneChatMessage_WithoutConfiguredProviders_ThrowsMissingKey()
+    {
+        var repository = new InMemoryDataStore();
+        var service = CreateService(repository, new StubProviderClient(LlmProviderNames.OpenAi));
+
+        var action = async () => await service.SendStandaloneChatMessageAsync(1, [], "Hello", null);
+
+        var exception = await action.Should().ThrowAsync<LlmChatException>();
+        exception.Which.Code.Should().Be(LlmProviderErrorCodes.MissingKey);
+    }
+
+    [Fact]
+    public async Task SendStandaloneChatMessage_UsesHistoryAndReturnsAssistantReply()
+    {
+        var repository = new InMemoryDataStore();
+        var geminiClient = new StubProviderClient(LlmProviderNames.Gemini, "Standalone reply", "gemini-1.5-flash");
+        var service = CreateService(
+            repository,
+            new StubProviderClient(LlmProviderNames.OpenAi),
+            geminiClient);
+
+        await service.UpsertProviderKeyAsync(1, "openai", "sk-openai-1234");
+        await service.UpsertProviderKeyAsync(1, "gemini", "AIza-gemini-9999");
+
+        var response = await service.SendStandaloneChatMessageAsync(
+            1,
+            [
+                new StandaloneChatMessageRequest { Role = "user", Content = "Hello there" },
+                new StandaloneChatMessageRequest { Role = "assistant", Content = "Hi" }
+            ],
+            "Can you expand on that?",
+            "gemini");
+
+        response.Message.Content.Should().Be("Standalone reply");
+        response.Message.Provider.Should().Be("gemini");
+        response.Message.Model.Should().Be("gemini-1.5-flash");
+        geminiClient.LastMessages.Select(item => item.Content).Should().ContainInOrder("Hello there", "Hi", "Can you expand on that?");
+    }
+
     [Fact]
     public async Task SendMainNodeMessage_WithoutConfiguredProviders_ThrowsMissingKey()
     {
@@ -147,22 +258,49 @@ private sealed class StubProviderClient : ILlmProviderClient
     {
         private readonly string _content;
         private readonly string _model;
+        private readonly IReadOnlyList<LlmProviderModel> _models;
 
-        public StubProviderClient(string provider, string content = "Assistant reply", string model = "test-model")
+        public StubProviderClient(
+            string provider,
+            string content = "Assistant reply",
+            string model = "test-model",
+            IReadOnlyList<LlmProviderModel>? models = null)
         {
             Provider = provider;
             _content = content;
             _model = model;
+            _models = models ?? [new LlmProviderModel { Id = model, DisplayName = model }];
         }
 
         public string Provider { get; }
+        public IReadOnlyList<LlmProviderChatMessage> LastMessages { get; private set; } = [];
+
+        public Task<IReadOnlyList<LlmProviderModel>> GetModelsAsync(string apiKey, CancellationToken cancellationToken = default)
+        {
+            return Task.FromResult(_models);
+        }
 
-        public Task<LlmProviderChatResult> SendChatAsync(string apiKey, IReadOnlyList<LlmProviderChatMessage> messages, CancellationToken cancellationToken = default)
+        public Task<LlmProviderChatResult> SendChatAsync(
+            string apiKey,
+            IReadOnlyList<LlmProviderChatMessage> messages,
+            string? modelOverride = null,
+            string? systemPrompt = null,
+            CancellationToken cancellationToken = default)
         {
+            LastMessages = messages.ToList();
             return Task.FromResult(new LlmProviderChatResult
             {
                 Content = _content,
-                Model = _model
+                Model = modelOverride ?? _model
+            });
+        }
+
+        public Task<LlmProviderChatResult> SendStructuredJsonAsync(string apiKey, LlmProviderStructuredRequest request, string? modelOverride = null, CancellationToken cancellationToken = default)
+        {
+            return Task.FromResult(new LlmProviderChatResult
+            {
+                Content = _content,
+                Model = modelOverride ?? _model
             });
         }
 
@@ -271,6 +409,21 @@ public Task<IReadOnlyList<CanvasNode>> GetCanvasNodesAsync(int userId, int canva
             return Task.FromResult(_nodes.FirstOrDefault(item => item.CanvasId == canvasId && item.Id == nodeId));
         }
 
+        public Task<CanvasNode> UpdateCanvasNodeAsync(int userId, int canvasId, int nodeId, CanvasNodeUpdateInput node)
+        {
+            var existing = _nodes.First(item => item.CanvasId == canvasId && item.Id == nodeId);
+            existing.GenerationMode = node.GenerationMode;
+            existing.Summary = node.Summary;
+            existing.Category = node.Category;
+            existing.Content = node.Content;
+            existing.SourcePrompt = node.SourcePrompt;
+            existing.ContinuationPrompt = node.ContinuationPrompt;
+            existing.Blocks = [.. node.Blocks];
+            existing.Sources = [.. node.Sources];
+            existing.UpdatedAt = DateTime.UtcNow;
+            return Task.FromResult(existing);
+        }
+
         public Task<IReadOnlyList<CanvasNode>> AddChildCanvasNodesAsync(int userId, int canvasId, int parentNodeId, IReadOnlyList<CanvasNodeCreateInput> nodes)
         {
             var nextOrder = _nodes.Where(item => item.CanvasId == canvasId && item.ParentNodeId == parentNodeId).Select(item => item.SiblingOrder).DefaultIfEmpty(-1).Max() + 1;
diff --git a/backend/Coliee.API/Controllers/AuthController.cs b/backend/Coliee.API/Controllers/AuthController.cs
index 5f12c55..6d13065 100644
--- a/backend/Coliee.API/Controllers/AuthController.cs
+++ b/backend/Coliee.API/Controllers/AuthController.cs
@@ -4,6 +4,7 @@
 using Coliee.API.DTOs;
 using Coliee.API.Services;
 using Microsoft.AspNetCore.RateLimiting;
+using Microsoft.Extensions.Logging;
 
 namespace Coliee.API.Controllers;
 
@@ -17,6 +18,7 @@ public class AuthController : ControllerBase
     private readonly IEmailVerificationOtpService _emailVerificationOtpService;
     private readonly IPasswordPolicyService _passwordPolicyService;
     private readonly IGoogleAuthService _googleAuthService;
+    private readonly ILogger<AuthController> _logger;
 
     public AuthController(
         IUserRepository userRepo,
@@ -24,7 +26,8 @@ public AuthController(
         IPasswordResetOtpService passwordResetOtpService,
         IEmailVerificationOtpService emailVerificationOtpService,
         IPasswordPolicyService passwordPolicyService,
-        IGoogleAuthService googleAuthService)
+        IGoogleAuthService googleAuthService,
+        ILogger<AuthController> logger)
     {
         _userRepo     = userRepo;
         _tokenService = tokenService;
@@ -32,6 +35,7 @@ public AuthController(
         _emailVerificationOtpService = emailVerificationOtpService;
         _passwordPolicyService = passwordPolicyService;
         _googleAuthService = googleAuthService;
+        _logger = logger;
     }
 
     // POST api/auth/register
@@ -264,6 +268,9 @@ public async Task<IActionResult> VerifyEmail([FromBody] VerifyEmailRequest req)
     [EnableRateLimiting("AuthEndpoints")]
     public async Task<IActionResult> GoogleLogin([FromBody] GoogleLoginRequest req)
     {
+        if (string.IsNullOrWhiteSpace(req.IdToken))
+            return BadRequest(new { message = "Google ID token is required" });
+
         Google.Apis.Auth.GoogleJsonWebSignature.Payload? payload;
         try
         {
@@ -277,48 +284,65 @@ public async Task<IActionResult> GoogleLogin([FromBody] GoogleLoginRequest req)
         if (payload == null)
             return Unauthorized(new { message = "Invalid Google token" });
 
-        var user = await _userRepo.GetByEmailAsync(payload.Email);
-        
-        if (user == null)
+        if (string.IsNullOrWhiteSpace(payload.Email))
         {
-            await _userRepo.CreateGoogleUserAsync(payload.Email, payload.Name);
-            user = await _userRepo.GetByEmailAsync(payload.Email);
-            if (user == null)
-                return StatusCode(500, new { message = "Failed to create user account" });
+            _logger.LogWarning("Google token validation succeeded but email claim was missing.");
+            return Unauthorized(new { message = "Google account email was not available." });
         }
-        else
+
+        try
         {
-            // If user exists but is locked out
-            if (user.LockedUntil.HasValue && user.LockedUntil.Value > DateTime.UtcNow)
-                return StatusCode(429, new
+            var user = await _userRepo.GetByEmailAsync(payload.Email);
+            
+            if (user == null)
+            {
+                await _userRepo.CreateGoogleUserAsync(payload.Email, payload.Name ?? payload.Email);
+                user = await _userRepo.GetByEmailAsync(payload.Email);
+                if (user == null)
                 {
-                    message = "Account locked due to too many failed attempts",
-                    lockedUntil = user.LockedUntil.Value
-                });
-                
-            // Google login resets failed login attempts
-            if (user.FailedLoginAttempts > 0)
-                await _userRepo.ResetFailedLoginAsync(user.Id);
-                
-            // If user registered with email/password but never verified, mark as verified now
-            if (!user.IsEmailVerified)
+                    _logger.LogError("Google login could not load the newly-created user for email {Email}.", payload.Email);
+                    return StatusCode(500, new { message = "Failed to create user account" });
+                }
+            }
+            else
             {
-                await _userRepo.MarkEmailVerifiedAsync(user.Id);
-                user.IsEmailVerified = true;
+                // If user exists but is locked out
+                if (user.LockedUntil.HasValue && user.LockedUntil.Value > DateTime.UtcNow)
+                    return StatusCode(429, new
+                    {
+                        message = "Account locked due to too many failed attempts",
+                        lockedUntil = user.LockedUntil.Value
+                    });
+                    
+                // Google login resets failed login attempts
+                if (user.FailedLoginAttempts > 0)
+                    await _userRepo.ResetFailedLoginAsync(user.Id);
+                    
+                // If user registered with email/password but never verified, mark as verified now
+                if (!user.IsEmailVerified)
+                {
+                    await _userRepo.MarkEmailVerifiedAsync(user.Id);
+                    user.IsEmailVerified = true;
+                }
             }
-        }
 
-        var token        = _tokenService.GenerateToken(user);
-        var refreshToken = Guid.NewGuid().ToString();
-        await _userRepo.StoreRefreshTokenAsync(user.Id, refreshToken, DateTime.UtcNow.AddDays(7));
-    
-        return Ok(new AuthResponse
+            var token        = _tokenService.GenerateToken(user);
+            var refreshToken = Guid.NewGuid().ToString();
+            await _userRepo.StoreRefreshTokenAsync(user.Id, refreshToken, DateTime.UtcNow.AddDays(7));
+        
+            return Ok(new AuthResponse
+            {
+                Token        = token,
+                Email        = user.Email,
+                Expiry       = DateTime.UtcNow.AddMinutes(60),
+                RefreshToken = refreshToken
+            });
+        }
+        catch (Exception ex)
         {
-            Token        = token,
-            Email        = user.Email,
-            Expiry       = DateTime.UtcNow.AddMinutes(60),
-            RefreshToken = refreshToken
-        });
+            _logger.LogError(ex, "Google login failed for email {Email}.", payload.Email);
+            return StatusCode(500, new { message = "Google sign-in failed while linking your account." });
+        }
     }
 
     [HttpPost("resend-email-verification-otp")]
diff --git a/backend/Coliee.API/Controllers/CanvasesController.cs b/backend/Coliee.API/Controllers/CanvasesController.cs
index 1c79c90..37a7e98 100644
--- a/backend/Coliee.API/Controllers/CanvasesController.cs
+++ b/backend/Coliee.API/Controllers/CanvasesController.cs
@@ -11,11 +11,13 @@ namespace Coliee.API.Controllers;
 [Authorize]
 public class CanvasesController : ControllerBase
 {
+    private readonly ICanvasCreationService _canvasCreationService;
     private readonly ICanvasService _canvasService;
     private readonly ICanvasGraphService _canvasGraphService;
 
-    public CanvasesController(ICanvasService canvasService, ICanvasGraphService canvasGraphService)
+    public CanvasesController(ICanvasCreationService canvasCreationService, ICanvasService canvasService, ICanvasGraphService canvasGraphService)
     {
+        _canvasCreationService = canvasCreationService;
         _canvasService = canvasService;
         _canvasGraphService = canvasGraphService;
     }
@@ -34,13 +36,17 @@ public async Task<IActionResult> CreateCanvas([FromBody] CreateCanvasRequest req
 
         try
         {
-            var canvas = await _canvasService.CreateCanvasAsync(GetUserId(), request.FirstPrompt);
+            var canvas = await _canvasCreationService.CreateCanvasAsync(GetUserId(), request.FirstPrompt, request.GenerationMode);
             return StatusCode(StatusCodes.Status201Created, canvas);
         }
         catch (CanvasOperationException ex)
         {
             return StatusCode(ex.StatusCode, new { message = ex.Message });
         }
+        catch (LlmChatException ex)
+        {
+            return StatusCode(ex.StatusCode, new { message = ex.Message, code = ex.Code });
+        }
     }
 
     [HttpPatch("{canvasId:int}")]
@@ -80,7 +86,13 @@ public async Task<IActionResult> ExpandCanvasNode(int canvasId, int nodeId, [Fro
 
         try
         {
-            return Ok(await _canvasGraphService.ExpandCanvasNodeAsync(GetUserId(), canvasId, nodeId, request.Prompt, request.ProviderOverride));
+            return Ok(await _canvasGraphService.ExpandCanvasNodeAsync(
+                GetUserId(),
+                canvasId,
+                nodeId,
+                request.Prompt,
+                request.ProviderOverride,
+                request.GenerationMode));
         }
         catch (CanvasOperationException ex)
         {
diff --git a/backend/Coliee.API/Controllers/ChatGuestController.cs b/backend/Coliee.API/Controllers/ChatGuestController.cs
new file mode 100644
index 0000000..b0fbcff
--- /dev/null
+++ b/backend/Coliee.API/Controllers/ChatGuestController.cs
@@ -0,0 +1,98 @@
+using System.Security.Claims;
+using Coliee.API.DTOs;
+using Coliee.API.Models;
+using Coliee.API.Services;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.Extensions.Caching.Memory;
+
+namespace Coliee.API.Controllers;
+
+[ApiController]
+[Route("api/chat")]
+public class ChatGuestController : ControllerBase
+{
+    private const string GuestPreviewCookieName = "coliee_guest_preview_id";
+    private readonly IChatSessionService _chatSessionService;
+    private readonly IMemoryCache _memoryCache;
+
+    public ChatGuestController(IChatSessionService chatSessionService, IMemoryCache memoryCache)
+    {
+        _chatSessionService = chatSessionService;
+        _memoryCache = memoryCache;
+    }
+
+    [HttpPost("guest-preview")]
+    [AllowAnonymous]
+    public async Task<IActionResult> GuestPreview([FromBody] GuestChatPreviewRequest request)
+    {
+        var guestId = EnsureGuestIdCookie();
+        var cacheKey = $"guest-preview:{guestId}";
+        if (_memoryCache.TryGetValue(cacheKey, out _))
+        {
+            return StatusCode(StatusCodes.Status401Unauthorized, new
+            {
+                message = "Sign in to continue with AI actions.",
+                code = "auth_required"
+            });
+        }
+
+        try
+        {
+            var response = await _chatSessionService.PreviewGuestAsync(request);
+            _memoryCache.Set(cacheKey, true, TimeSpan.FromHours(12));
+            return Ok(response);
+        }
+        catch (ChatSessionOperationException ex)
+        {
+            return StatusCode(ex.StatusCode, new { message = ex.Message });
+        }
+        catch (LlmChatException ex)
+        {
+            return StatusCode(ex.StatusCode, new { message = ex.Message, code = ex.Code });
+        }
+    }
+
+    [HttpPost("import-guest")]
+    [Authorize]
+    public async Task<IActionResult> ImportGuestCanvases([FromBody] ImportGuestCanvasesRequest request)
+    {
+        try
+        {
+            return Ok(await _chatSessionService.ImportGuestCanvasesAsync(GetUserId(), request));
+        }
+        catch (ChatSessionOperationException ex)
+        {
+            return StatusCode(ex.StatusCode, new { message = ex.Message });
+        }
+        catch (LlmChatException ex)
+        {
+            return StatusCode(ex.StatusCode, new { message = ex.Message, code = ex.Code });
+        }
+    }
+
+    private string EnsureGuestIdCookie()
+    {
+        if (Request.Cookies.TryGetValue(GuestPreviewCookieName, out var existing) && !string.IsNullOrWhiteSpace(existing))
+            return existing;
+
+        var guestId = Guid.NewGuid().ToString("N");
+        Response.Cookies.Append(GuestPreviewCookieName, guestId, new CookieOptions
+        {
+            HttpOnly = true,
+            IsEssential = true,
+            SameSite = SameSiteMode.Lax,
+            Expires = DateTimeOffset.UtcNow.AddDays(7)
+        });
+        return guestId;
+    }
+
+    private int GetUserId()
+    {
+        var userIdStr = User.FindFirst(ClaimTypes.NameIdentifier)?.Value;
+        if (userIdStr == null || !int.TryParse(userIdStr, out var userId))
+            throw new ChatSessionOperationException("Invalid token claims.", StatusCodes.Status401Unauthorized);
+
+        return userId;
+    }
+}
diff --git a/backend/Coliee.API/Controllers/ChatSessionsController.cs b/backend/Coliee.API/Controllers/ChatSessionsController.cs
new file mode 100644
index 0000000..c845676
--- /dev/null
+++ b/backend/Coliee.API/Controllers/ChatSessionsController.cs
@@ -0,0 +1,218 @@
+using System.Security.Claims;
+using Coliee.API.DTOs;
+using Coliee.API.Models;
+using Coliee.API.Services;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+
+namespace Coliee.API.Controllers;
+
+[ApiController]
+[Route("api/chat-sessions")]
+[Authorize]
+public class ChatSessionsController : ControllerBase
+{
+    private readonly IChatSessionService _chatSessionService;
+
+    public ChatSessionsController(IChatSessionService chatSessionService)
+    {
+        _chatSessionService = chatSessionService;
+    }
+
+    [HttpGet]
+    public async Task<IActionResult> GetSessions()
+    {
+        return await ExecuteAsync(() => _chatSessionService.GetSessionsAsync(GetUserId()));
+    }
+
+    [HttpPost]
+    public async Task<IActionResult> CreateSession([FromBody] CreateChatSessionRequest request)
+    {
+        try
+        {
+            var result = await _chatSessionService.CreateSessionAsync(GetUserId(), request.Title, request.Content, request.ProviderOverride, request.ModelOverride);
+            return StatusCode(StatusCodes.Status201Created, result);
+        }
+        catch (ChatSessionOperationException ex)
+        {
+            return StatusCode(ex.StatusCode, new { message = ex.Message });
+        }
+        catch (LlmChatException ex)
+        {
+            return StatusCode(ex.StatusCode, new { message = ex.Message, code = ex.Code });
+        }
+    }
+
+    [HttpPatch("{sessionId:int}")]
+    public async Task<IActionResult> RenameSession(int sessionId, [FromBody] RenameChatSessionRequest request)
+    {
+        if (!ModelState.IsValid)
+            return BadRequest(new { message = "Validation failed" });
+
+        return await ExecuteAsync(() => _chatSessionService.RenameSessionAsync(GetUserId(), sessionId, request.Title));
+    }
+
+    [HttpDelete("{sessionId:int}")]
+    public async Task<IActionResult> DeleteSession(int sessionId)
+    {
+        try
+        {
+            await _chatSessionService.DeleteSessionAsync(GetUserId(), sessionId);
+            return NoContent();
+        }
+        catch (ChatSessionOperationException ex)
+        {
+            return StatusCode(ex.StatusCode, new { message = ex.Message });
+        }
+    }
+
+    [HttpGet("{sessionId:int}")]
+    public async Task<IActionResult> GetSession(int sessionId, [FromQuery] int? activeNodeId = null)
+    {
+        return await ExecuteAsync(() => _chatSessionService.GetSessionAsync(GetUserId(), sessionId, activeNodeId));
+    }
+
+    [HttpGet("{sessionId:int}/nodes/{nodeId:int}")]
+    public async Task<IActionResult> GetNode(int sessionId, int nodeId)
+    {
+        return await ExecuteAsync(() => _chatSessionService.GetNodeAsync(GetUserId(), sessionId, nodeId));
+    }
+
+    [HttpPost("{sessionId:int}/nodes")]
+    public async Task<IActionResult> CreateNode(int sessionId, [FromBody] CreateChatNodeRequest request)
+    {
+        if (!ModelState.IsValid)
+            return BadRequest(new { message = "Validation failed" });
+
+        return await ExecuteAsync(() => _chatSessionService.CreateNodeAsync(GetUserId(), sessionId, request));
+    }
+
+    [HttpPatch("{sessionId:int}/nodes/{nodeId:int}")]
+    public async Task<IActionResult> UpdateNode(int sessionId, int nodeId, [FromBody] UpdateChatNodeRequest request)
+    {
+        return await ExecuteAsync(() => _chatSessionService.UpdateNodeAsync(GetUserId(), sessionId, nodeId, request));
+    }
+
+    [HttpPost("{sessionId:int}/nodes/{nodeId:int}/messages")]
+    public async Task<IActionResult> SendNodeMessage(int sessionId, int nodeId, [FromBody] SendChatNodeMessageRequest request)
+    {
+        if (!ModelState.IsValid)
+            return BadRequest(new { message = "Validation failed" });
+
+        return await ExecuteAsync(() => _chatSessionService.SendNodeMessageAsync(GetUserId(), sessionId, nodeId, request.Content, request.ImageUrl, request.ProviderOverride, request.ModelOverride));
+    }
+
+    [HttpPatch("{sessionId:int}/nodes/{nodeId:int}/messages/{messageId:int}")]
+    public async Task<IActionResult> UpdateMessage(int sessionId, int nodeId, int messageId, [FromBody] UpdateChatCanvasMessageRequest request)
+    {
+        if (!ModelState.IsValid)
+            return BadRequest(new { message = "Validation failed" });
+
+        return await ExecuteAsync(() => _chatSessionService.UpdateMessageAsync(GetUserId(), sessionId, nodeId, messageId, request));
+    }
+
+    [HttpPost("{sessionId:int}/nodes/{nodeId:int}/branches")]
+    public async Task<IActionResult> CreateBranch(int sessionId, int nodeId, [FromBody] CreateChatBranchRequest request)
+    {
+        if (!ModelState.IsValid)
+            return BadRequest(new { message = "Validation failed" });
+
+        return await ExecuteAsync(() => _chatSessionService.CreateBranchAsync(
+            GetUserId(),
+            sessionId,
+            nodeId,
+            request.BranchFromMessageId,
+            request.Content,
+            request.ProviderOverride,
+            request.ModelOverride));
+    }
+
+    [HttpPost("{sessionId:int}/nodes/{nodeId:int}/message-selections/branches")]
+    public async Task<IActionResult> MoveMessagesToBranch(int sessionId, int nodeId, [FromBody] MoveChatNodeMessagesRequest request)
+    {
+        if (!ModelState.IsValid)
+            return BadRequest(new { message = "Validation failed" });
+
+        return await ExecuteAsync(() => _chatSessionService.MoveMessagesToBranchAsync(
+            GetUserId(),
+            sessionId,
+            nodeId,
+            request.MessageIds,
+            request.TransferMode));
+    }
+
+    [HttpPost("{sessionId:int}/nodes/{nodeId:int}/notes")]
+    public async Task<IActionResult> GenerateNote(int sessionId, int nodeId, [FromBody] GenerateChatNodeNoteRequest request)
+    {
+        return await ExecuteAsync(() => _chatSessionService.GenerateNoteAsync(
+            GetUserId(),
+            sessionId,
+            nodeId,
+            request.ProviderOverride,
+            request.ModelOverride));
+    }
+
+    [HttpPost("{sessionId:int}/nodes/{nodeId:int}/image-prompts")]
+    public async Task<IActionResult> GenerateImage(int sessionId, int nodeId, [FromBody] GenerateChatNodeImageRequest request)
+    {
+        if (!ModelState.IsValid)
+            return BadRequest(new { message = "Validation failed" });
+
+        return await ExecuteAsync(() => _chatSessionService.GenerateImageAsync(
+            GetUserId(),
+            sessionId,
+            nodeId,
+            request.Prompt,
+            request.ProviderOverride,
+            request.ModelOverride));
+    }
+
+    [HttpDelete("{sessionId:int}/nodes/{nodeId:int}")]
+    public async Task<IActionResult> DeleteNode(int sessionId, int nodeId, [FromQuery] int? newActiveNodeId = null)
+    {
+        return await ExecuteAsync(() => _chatSessionService.DeleteNodeAsync(GetUserId(), sessionId, nodeId, newActiveNodeId));
+    }
+
+    [HttpPatch("{sessionId:int}/layout")]
+    public async Task<IActionResult> SaveLayout(int sessionId, [FromBody] SaveChatLayoutRequest request, [FromQuery] int? activeNodeId = null)
+    {
+        if (!ModelState.IsValid)
+            return BadRequest(new { message = "Validation failed" });
+
+        var updates = request.Nodes
+            .Select(node => new ChatNodeLayoutUpdateInput
+            {
+                NodeId = node.NodeId,
+                PositionX = node.PositionX,
+                PositionY = node.PositionY
+            })
+            .ToList();
+
+        return await ExecuteAsync(() => _chatSessionService.SaveLayoutAsync(GetUserId(), sessionId, updates, activeNodeId));
+    }
+
+    private int GetUserId()
+    {
+        var userIdStr = User.FindFirst(ClaimTypes.NameIdentifier)?.Value;
+        if (userIdStr == null || !int.TryParse(userIdStr, out var userId))
+            throw new ChatSessionOperationException("Invalid token claims.", StatusCodes.Status401Unauthorized);
+
+        return userId;
+    }
+
+    private async Task<IActionResult> ExecuteAsync<T>(Func<Task<T>> action)
+    {
+        try
+        {
+            return Ok(await action());
+        }
+        catch (ChatSessionOperationException ex)
+        {
+            return StatusCode(ex.StatusCode, new { message = ex.Message });
+        }
+        catch (LlmChatException ex)
+        {
+            return StatusCode(ex.StatusCode, new { message = ex.Message, code = ex.Code });
+        }
+    }
+}
diff --git a/backend/Coliee.API/Controllers/LlmController.cs b/backend/Coliee.API/Controllers/LlmController.cs
index cb10d91..6d59f09 100644
--- a/backend/Coliee.API/Controllers/LlmController.cs
+++ b/backend/Coliee.API/Controllers/LlmController.cs
@@ -24,6 +24,12 @@ public async Task<IActionResult> GetProviders()
         return await ExecuteAsync(() => _llmService.GetProvidersAsync(GetUserId()));
     }
 
+    [HttpGet("providers/{provider}/models")]
+    public async Task<IActionResult> GetProviderModels(string provider)
+    {
+        return await ExecuteAsync(() => _llmService.GetProviderModelsAsync(GetUserId(), provider));
+    }
+
     [HttpPut("providers/{provider}")]
     public async Task<IActionResult> UpsertProvider(string provider, [FromBody] UpsertProviderKeyRequest request)
     {
@@ -60,6 +66,15 @@ public async Task<IActionResult> GetMainNodeChat([FromQuery] int canvasId)
         return await ExecuteAsync(() => _llmService.GetMainNodeChatAsync(GetUserId(), canvasId));
     }
 
+    [HttpPost("chat/session/messages")]
+    public async Task<IActionResult> SendStandaloneChatMessage([FromBody] SendStandaloneChatMessageRequest request)
+    {
+        if (!ModelState.IsValid)
+            return BadRequest(new { message = "Validation failed" });
+
+        return await ExecuteAsync(() => _llmService.SendStandaloneChatMessageAsync(GetUserId(), request.History, request.Content, request.ProviderOverride));
+    }
+
     [HttpPost("chat/main-node/messages")]
     public async Task<IActionResult> SendMainNodeMessage([FromBody] SendMainNodeMessageRequest request)
     {
diff --git a/backend/Coliee.API/DTOs/CanvasGraphNodeBlockResponse.cs b/backend/Coliee.API/DTOs/CanvasGraphNodeBlockResponse.cs
new file mode 100644
index 0000000..7db79d4
--- /dev/null
+++ b/backend/Coliee.API/DTOs/CanvasGraphNodeBlockResponse.cs
@@ -0,0 +1,8 @@
+namespace Coliee.API.DTOs;
+
+public class CanvasGraphNodeBlockResponse
+{
+    public string Type { get; set; } = string.Empty;
+    public string Text { get; set; } = string.Empty;
+    public List<string> Options { get; set; } = [];
+}
diff --git a/backend/Coliee.API/DTOs/CanvasGraphNodeResponse.cs b/backend/Coliee.API/DTOs/CanvasGraphNodeResponse.cs
index 0c6fda8..2949308 100644
--- a/backend/Coliee.API/DTOs/CanvasGraphNodeResponse.cs
+++ b/backend/Coliee.API/DTOs/CanvasGraphNodeResponse.cs
@@ -6,8 +6,14 @@ public class CanvasGraphNodeResponse
     public int? ParentNodeId { get; set; }
     public string Kind { get; set; } = string.Empty;
     public string Title { get; set; } = string.Empty;
+    public string GenerationMode { get; set; } = "compact";
+    public string? Summary { get; set; }
+    public string? Category { get; set; }
     public string Content { get; set; } = string.Empty;
     public string? SourcePrompt { get; set; }
+    public string? ContinuationPrompt { get; set; }
+    public List<CanvasGraphNodeBlockResponse> Blocks { get; set; } = [];
+    public List<CanvasGraphNodeSourceResponse> Sources { get; set; } = [];
     public int Depth { get; set; }
     public int SiblingOrder { get; set; }
     public DateTime CreatedAt { get; set; }
diff --git a/backend/Coliee.API/DTOs/CanvasGraphNodeSourceResponse.cs b/backend/Coliee.API/DTOs/CanvasGraphNodeSourceResponse.cs
new file mode 100644
index 0000000..86c911d
--- /dev/null
+++ b/backend/Coliee.API/DTOs/CanvasGraphNodeSourceResponse.cs
@@ -0,0 +1,7 @@
+namespace Coliee.API.DTOs;
+
+public class CanvasGraphNodeSourceResponse
+{
+    public string Label { get; set; } = string.Empty;
+    public string Url { get; set; } = string.Empty;
+}
diff --git a/backend/Coliee.API/DTOs/CanvasGraphResponse.cs b/backend/Coliee.API/DTOs/CanvasGraphResponse.cs
index 9427eda..db38fa6 100644
--- a/backend/Coliee.API/DTOs/CanvasGraphResponse.cs
+++ b/backend/Coliee.API/DTOs/CanvasGraphResponse.cs
@@ -3,6 +3,7 @@ namespace Coliee.API.DTOs;
 public class CanvasGraphResponse
 {
     public int CanvasId { get; set; }
+    public string? CanvasTitle { get; set; }
     public string Mode { get; set; } = "graph";
     public string? DefaultProvider { get; set; }
     public List<string> AvailableProviders { get; set; } = [];
diff --git a/backend/Coliee.API/DTOs/ChatCanvasMessageResponse.cs b/backend/Coliee.API/DTOs/ChatCanvasMessageResponse.cs
new file mode 100644
index 0000000..670c03b
--- /dev/null
+++ b/backend/Coliee.API/DTOs/ChatCanvasMessageResponse.cs
@@ -0,0 +1,15 @@
+namespace Coliee.API.DTOs;
+
+public class ChatCanvasMessageResponse
+{
+    public int Id { get; set; }
+    public int NodeId { get; set; }
+    public string Role { get; set; } = string.Empty;
+    public string Content { get; set; } = string.Empty;
+    public string? ImageUrl { get; set; }
+    public string? Provider { get; set; }
+    public string? Model { get; set; }
+    public DateTime CreatedAt { get; set; }
+    public DateTime UpdatedAt { get; set; }
+    public bool CanBranch { get; set; }
+}
diff --git a/backend/Coliee.API/DTOs/ChatCanvasNodeDetailResponse.cs b/backend/Coliee.API/DTOs/ChatCanvasNodeDetailResponse.cs
new file mode 100644
index 0000000..dbb7649
--- /dev/null
+++ b/backend/Coliee.API/DTOs/ChatCanvasNodeDetailResponse.cs
@@ -0,0 +1,26 @@
+namespace Coliee.API.DTOs;
+
+public class ChatCanvasNodeDetailResponse
+{
+    public int SessionId { get; set; }
+    public int NodeId { get; set; }
+    public int? ParentNodeId { get; set; }
+    public int? BranchFromMessageId { get; set; }
+    public string NodeType { get; set; } = "question";
+    public string Title { get; set; } = string.Empty;
+    public string Preview { get; set; } = string.Empty;
+    public string Content { get; set; } = string.Empty;
+    public double PositionX { get; set; }
+    public double PositionY { get; set; }
+    public double Width { get; set; }
+    public double Height { get; set; }
+    public bool IsCollapsed { get; set; }
+    public double? ExpandedWidth { get; set; }
+    public double? ExpandedHeight { get; set; }
+    public string? PreferredProvider { get; set; }
+    public string? PreferredModel { get; set; }
+    public DateTime CreatedAt { get; set; }
+    public DateTime UpdatedAt { get; set; }
+    public List<ChatCanvasMessageResponse> LocalMessages { get; set; } = [];
+    public List<ChatCanvasMessageResponse> ResolvedMessages { get; set; } = [];
+}
diff --git a/backend/Coliee.API/DTOs/ChatCanvasNodeSummaryResponse.cs b/backend/Coliee.API/DTOs/ChatCanvasNodeSummaryResponse.cs
new file mode 100644
index 0000000..cfe009b
--- /dev/null
+++ b/backend/Coliee.API/DTOs/ChatCanvasNodeSummaryResponse.cs
@@ -0,0 +1,23 @@
+namespace Coliee.API.DTOs;
+
+public class ChatCanvasNodeSummaryResponse
+{
+    public int Id { get; set; }
+    public int? ParentNodeId { get; set; }
+    public int? BranchFromMessageId { get; set; }
+    public string NodeType { get; set; } = "question";
+    public string Title { get; set; } = string.Empty;
+    public string Preview { get; set; } = string.Empty;
+    public string Content { get; set; } = string.Empty;
+    public double PositionX { get; set; }
+    public double PositionY { get; set; }
+    public double Width { get; set; }
+    public double Height { get; set; }
+    public bool IsCollapsed { get; set; }
+    public double? ExpandedWidth { get; set; }
+    public double? ExpandedHeight { get; set; }
+    public string? PreferredProvider { get; set; }
+    public string? PreferredModel { get; set; }
+    public DateTime CreatedAt { get; set; }
+    public DateTime UpdatedAt { get; set; }
+}
diff --git a/backend/Coliee.API/DTOs/ChatSessionGraphResponse.cs b/backend/Coliee.API/DTOs/ChatSessionGraphResponse.cs
new file mode 100644
index 0000000..3cdb255
--- /dev/null
+++ b/backend/Coliee.API/DTOs/ChatSessionGraphResponse.cs
@@ -0,0 +1,11 @@
+namespace Coliee.API.DTOs;
+
+public class ChatSessionGraphResponse
+{
+    public ChatSessionSummaryResponse Session { get; set; } = new();
+    public string? DefaultProvider { get; set; }
+    public List<string> AvailableProviders { get; set; } = [];
+    public int RootNodeId { get; set; }
+    public int ActiveNodeId { get; set; }
+    public List<ChatCanvasNodeSummaryResponse> Nodes { get; set; } = [];
+}
diff --git a/backend/Coliee.API/DTOs/ChatSessionStateResponse.cs b/backend/Coliee.API/DTOs/ChatSessionStateResponse.cs
new file mode 100644
index 0000000..7891485
--- /dev/null
+++ b/backend/Coliee.API/DTOs/ChatSessionStateResponse.cs
@@ -0,0 +1,7 @@
+namespace Coliee.API.DTOs;
+
+public class ChatSessionStateResponse
+{
+    public ChatSessionGraphResponse Graph { get; set; } = new();
+    public ChatCanvasNodeDetailResponse Node { get; set; } = new();
+}
diff --git a/backend/Coliee.API/DTOs/ChatSessionSummaryResponse.cs b/backend/Coliee.API/DTOs/ChatSessionSummaryResponse.cs
new file mode 100644
index 0000000..4b01cc1
--- /dev/null
+++ b/backend/Coliee.API/DTOs/ChatSessionSummaryResponse.cs
@@ -0,0 +1,9 @@
+namespace Coliee.API.DTOs;
+
+public class ChatSessionSummaryResponse
+{
+    public int Id { get; set; }
+    public string Title { get; set; } = string.Empty;
+    public DateTime CreatedAt { get; set; }
+    public DateTime UpdatedAt { get; set; }
+}
diff --git a/backend/Coliee.API/DTOs/CreateCanvasRequest.cs b/backend/Coliee.API/DTOs/CreateCanvasRequest.cs
index c3e6768..555abc0 100644
--- a/backend/Coliee.API/DTOs/CreateCanvasRequest.cs
+++ b/backend/Coliee.API/DTOs/CreateCanvasRequest.cs
@@ -8,4 +8,7 @@ public class CreateCanvasRequest
     [MinLength(1)]
     [MaxLength(4000)]
     public string FirstPrompt { get; set; } = string.Empty;
+
+    [MaxLength(16)]
+    public string? GenerationMode { get; set; }
 }
diff --git a/backend/Coliee.API/DTOs/CreateChatBranchRequest.cs b/backend/Coliee.API/DTOs/CreateChatBranchRequest.cs
new file mode 100644
index 0000000..3195356
--- /dev/null
+++ b/backend/Coliee.API/DTOs/CreateChatBranchRequest.cs
@@ -0,0 +1,15 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Coliee.API.DTOs;
+
+public class CreateChatBranchRequest
+{
+    [Required]
+    public int BranchFromMessageId { get; set; }
+
+    [Required]
+    public string Content { get; set; } = string.Empty;
+
+    public string? ProviderOverride { get; set; }
+    public string? ModelOverride { get; set; }
+}
diff --git a/backend/Coliee.API/DTOs/CreateChatNodeRequest.cs b/backend/Coliee.API/DTOs/CreateChatNodeRequest.cs
new file mode 100644
index 0000000..04403cf
--- /dev/null
+++ b/backend/Coliee.API/DTOs/CreateChatNodeRequest.cs
@@ -0,0 +1,24 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Coliee.API.DTOs;
+
+public class CreateChatNodeRequest
+{
+    [Required]
+    public int ParentNodeId { get; set; }
+
+    [Required]
+    public string NodeType { get; set; } = "question";
+
+    public string? Title { get; set; }
+    public string? Content { get; set; }
+    public double? PositionX { get; set; }
+    public double? PositionY { get; set; }
+    public double? Width { get; set; }
+    public double? Height { get; set; }
+    public bool? IsCollapsed { get; set; }
+    public double? ExpandedWidth { get; set; }
+    public double? ExpandedHeight { get; set; }
+    public string? PreferredProvider { get; set; }
+    public string? PreferredModel { get; set; }
+}
diff --git a/backend/Coliee.API/DTOs/CreateChatSessionRequest.cs b/backend/Coliee.API/DTOs/CreateChatSessionRequest.cs
new file mode 100644
index 0000000..96dea21
--- /dev/null
+++ b/backend/Coliee.API/DTOs/CreateChatSessionRequest.cs
@@ -0,0 +1,10 @@
+namespace Coliee.API.DTOs;
+
+public class CreateChatSessionRequest
+{
+    public string? Title { get; set; }
+    public string? Content { get; set; }
+
+    public string? ProviderOverride { get; set; }
+    public string? ModelOverride { get; set; }
+}
diff --git a/backend/Coliee.API/DTOs/ExpandCanvasNodeRequest.cs b/backend/Coliee.API/DTOs/ExpandCanvasNodeRequest.cs
index bb6d9be..990460c 100644
--- a/backend/Coliee.API/DTOs/ExpandCanvasNodeRequest.cs
+++ b/backend/Coliee.API/DTOs/ExpandCanvasNodeRequest.cs
@@ -11,4 +11,7 @@ public class ExpandCanvasNodeRequest
 
     [MaxLength(40)]
     public string? ProviderOverride { get; set; }
+
+    [MaxLength(16)]
+    public string? GenerationMode { get; set; }
 }
diff --git a/backend/Coliee.API/DTOs/GenerateChatNodeImageRequest.cs b/backend/Coliee.API/DTOs/GenerateChatNodeImageRequest.cs
new file mode 100644
index 0000000..351464a
--- /dev/null
+++ b/backend/Coliee.API/DTOs/GenerateChatNodeImageRequest.cs
@@ -0,0 +1,12 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Coliee.API.DTOs;
+
+public class GenerateChatNodeImageRequest
+{
+    [Required]
+    public string Prompt { get; set; } = string.Empty;
+
+    public string? ProviderOverride { get; set; }
+    public string? ModelOverride { get; set; }
+}
diff --git a/backend/Coliee.API/DTOs/GenerateChatNodeNoteRequest.cs b/backend/Coliee.API/DTOs/GenerateChatNodeNoteRequest.cs
new file mode 100644
index 0000000..5720b9c
--- /dev/null
+++ b/backend/Coliee.API/DTOs/GenerateChatNodeNoteRequest.cs
@@ -0,0 +1,7 @@
+namespace Coliee.API.DTOs;
+
+public class GenerateChatNodeNoteRequest
+{
+    public string? ProviderOverride { get; set; }
+    public string? ModelOverride { get; set; }
+}
diff --git a/backend/Coliee.API/DTOs/GuestChatPreviewMessageRequest.cs b/backend/Coliee.API/DTOs/GuestChatPreviewMessageRequest.cs
new file mode 100644
index 0000000..a0e1b35
--- /dev/null
+++ b/backend/Coliee.API/DTOs/GuestChatPreviewMessageRequest.cs
@@ -0,0 +1,8 @@
+namespace Coliee.API.DTOs;
+
+public class GuestChatPreviewMessageRequest
+{
+    public string Role { get; set; } = "user";
+    public string Content { get; set; } = string.Empty;
+    public string? ImageUrl { get; set; }
+}
diff --git a/backend/Coliee.API/DTOs/GuestChatPreviewRequest.cs b/backend/Coliee.API/DTOs/GuestChatPreviewRequest.cs
new file mode 100644
index 0000000..1753c81
--- /dev/null
+++ b/backend/Coliee.API/DTOs/GuestChatPreviewRequest.cs
@@ -0,0 +1,11 @@
+namespace Coliee.API.DTOs;
+
+public class GuestChatPreviewRequest
+{
+    public string ActionType { get; set; } = "chat";
+    public string? Prompt { get; set; }
+    public string? Content { get; set; }
+    public string? ImageUrl { get; set; }
+    public string? ModelId { get; set; }
+    public List<GuestChatPreviewMessageRequest> Messages { get; set; } = [];
+}
diff --git a/backend/Coliee.API/DTOs/GuestChatPreviewResponse.cs b/backend/Coliee.API/DTOs/GuestChatPreviewResponse.cs
new file mode 100644
index 0000000..c1b57dd
--- /dev/null
+++ b/backend/Coliee.API/DTOs/GuestChatPreviewResponse.cs
@@ -0,0 +1,12 @@
+namespace Coliee.API.DTOs;
+
+public class GuestChatPreviewResponse
+{
+    public string ActionType { get; set; } = "chat";
+    public string? Message { get; set; }
+    public string? ImageUrl { get; set; }
+    public string? NoteTitle { get; set; }
+    public string? NoteContent { get; set; }
+    public string? Provider { get; set; }
+    public string? Model { get; set; }
+}
diff --git a/backend/Coliee.API/DTOs/ImportGuestCanvasMessageRequest.cs b/backend/Coliee.API/DTOs/ImportGuestCanvasMessageRequest.cs
new file mode 100644
index 0000000..e97fd39
--- /dev/null
+++ b/backend/Coliee.API/DTOs/ImportGuestCanvasMessageRequest.cs
@@ -0,0 +1,10 @@
+namespace Coliee.API.DTOs;
+
+public class ImportGuestCanvasMessageRequest
+{
+    public string Role { get; set; } = "user";
+    public string Content { get; set; } = string.Empty;
+    public string? ImageUrl { get; set; }
+    public string? Provider { get; set; }
+    public string? Model { get; set; }
+}
diff --git a/backend/Coliee.API/DTOs/ImportGuestCanvasNodeRequest.cs b/backend/Coliee.API/DTOs/ImportGuestCanvasNodeRequest.cs
new file mode 100644
index 0000000..9fbbe55
--- /dev/null
+++ b/backend/Coliee.API/DTOs/ImportGuestCanvasNodeRequest.cs
@@ -0,0 +1,20 @@
+namespace Coliee.API.DTOs;
+
+public class ImportGuestCanvasNodeRequest
+{
+    public string TempId { get; set; } = string.Empty;
+    public string? ParentTempId { get; set; }
+    public string NodeType { get; set; } = "question";
+    public string? Title { get; set; }
+    public string? Content { get; set; }
+    public double PositionX { get; set; }
+    public double PositionY { get; set; }
+    public double Width { get; set; }
+    public double Height { get; set; }
+    public bool? IsCollapsed { get; set; }
+    public double? ExpandedWidth { get; set; }
+    public double? ExpandedHeight { get; set; }
+    public string? PreferredProvider { get; set; }
+    public string? PreferredModel { get; set; }
+    public List<ImportGuestCanvasMessageRequest> Messages { get; set; } = [];
+}
diff --git a/backend/Coliee.API/DTOs/ImportGuestCanvasRequest.cs b/backend/Coliee.API/DTOs/ImportGuestCanvasRequest.cs
new file mode 100644
index 0000000..cf82267
--- /dev/null
+++ b/backend/Coliee.API/DTOs/ImportGuestCanvasRequest.cs
@@ -0,0 +1,8 @@
+namespace Coliee.API.DTOs;
+
+public class ImportGuestCanvasRequest
+{
+    public string TempId { get; set; } = string.Empty;
+    public string Name { get; set; } = string.Empty;
+    public List<ImportGuestCanvasNodeRequest> Nodes { get; set; } = [];
+}
diff --git a/backend/Coliee.API/DTOs/ImportGuestCanvasesRequest.cs b/backend/Coliee.API/DTOs/ImportGuestCanvasesRequest.cs
new file mode 100644
index 0000000..6380e37
--- /dev/null
+++ b/backend/Coliee.API/DTOs/ImportGuestCanvasesRequest.cs
@@ -0,0 +1,7 @@
+namespace Coliee.API.DTOs;
+
+public class ImportGuestCanvasesRequest
+{
+    public string? ActiveCanvasId { get; set; }
+    public List<ImportGuestCanvasRequest> Canvases { get; set; } = [];
+}
diff --git a/backend/Coliee.API/DTOs/MoveChatNodeMessagesRequest.cs b/backend/Coliee.API/DTOs/MoveChatNodeMessagesRequest.cs
new file mode 100644
index 0000000..d11bf7b
--- /dev/null
+++ b/backend/Coliee.API/DTOs/MoveChatNodeMessagesRequest.cs
@@ -0,0 +1,12 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Coliee.API.DTOs;
+
+public class MoveChatNodeMessagesRequest
+{
+    [Required]
+    [MinLength(1)]
+    public List<int> MessageIds { get; set; } = [];
+
+    public string? TransferMode { get; set; }
+}
diff --git a/backend/Coliee.API/DTOs/ProviderModelResponse.cs b/backend/Coliee.API/DTOs/ProviderModelResponse.cs
new file mode 100644
index 0000000..dc52d68
--- /dev/null
+++ b/backend/Coliee.API/DTOs/ProviderModelResponse.cs
@@ -0,0 +1,7 @@
+namespace Coliee.API.DTOs;
+
+public class ProviderModelResponse
+{
+    public string Id { get; set; } = string.Empty;
+    public string? DisplayName { get; set; }
+}
diff --git a/backend/Coliee.API/DTOs/ProviderModelsResponse.cs b/backend/Coliee.API/DTOs/ProviderModelsResponse.cs
new file mode 100644
index 0000000..939d60e
--- /dev/null
+++ b/backend/Coliee.API/DTOs/ProviderModelsResponse.cs
@@ -0,0 +1,7 @@
+namespace Coliee.API.DTOs;
+
+public class ProviderModelsResponse
+{
+    public string Provider { get; set; } = string.Empty;
+    public List<ProviderModelResponse> Models { get; set; } = [];
+}
diff --git a/backend/Coliee.API/DTOs/RenameChatSessionRequest.cs b/backend/Coliee.API/DTOs/RenameChatSessionRequest.cs
new file mode 100644
index 0000000..f98d3ba
--- /dev/null
+++ b/backend/Coliee.API/DTOs/RenameChatSessionRequest.cs
@@ -0,0 +1,9 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Coliee.API.DTOs;
+
+public class RenameChatSessionRequest
+{
+    [Required]
+    public string Title { get; set; } = string.Empty;
+}
diff --git a/backend/Coliee.API/DTOs/SaveChatLayoutNodeRequest.cs b/backend/Coliee.API/DTOs/SaveChatLayoutNodeRequest.cs
new file mode 100644
index 0000000..ecfbfe2
--- /dev/null
+++ b/backend/Coliee.API/DTOs/SaveChatLayoutNodeRequest.cs
@@ -0,0 +1,15 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Coliee.API.DTOs;
+
+public class SaveChatLayoutNodeRequest
+{
+    [Required]
+    public int NodeId { get; set; }
+
+    [Required]
+    public double PositionX { get; set; }
+
+    [Required]
+    public double PositionY { get; set; }
+}
diff --git a/backend/Coliee.API/DTOs/SaveChatLayoutRequest.cs b/backend/Coliee.API/DTOs/SaveChatLayoutRequest.cs
new file mode 100644
index 0000000..38ff4cd
--- /dev/null
+++ b/backend/Coliee.API/DTOs/SaveChatLayoutRequest.cs
@@ -0,0 +1,10 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Coliee.API.DTOs;
+
+public class SaveChatLayoutRequest
+{
+    [Required]
+    [MinLength(1)]
+    public List<SaveChatLayoutNodeRequest> Nodes { get; set; } = [];
+}
diff --git a/backend/Coliee.API/DTOs/SendChatNodeMessageRequest.cs b/backend/Coliee.API/DTOs/SendChatNodeMessageRequest.cs
new file mode 100644
index 0000000..bbf697f
--- /dev/null
+++ b/backend/Coliee.API/DTOs/SendChatNodeMessageRequest.cs
@@ -0,0 +1,13 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Coliee.API.DTOs;
+
+public class SendChatNodeMessageRequest
+{
+    [Required]
+    public string Content { get; set; } = string.Empty;
+
+    public string? ImageUrl { get; set; }
+    public string? ProviderOverride { get; set; }
+    public string? ModelOverride { get; set; }
+}
diff --git a/backend/Coliee.API/DTOs/SendStandaloneChatMessageRequest.cs b/backend/Coliee.API/DTOs/SendStandaloneChatMessageRequest.cs
new file mode 100644
index 0000000..4ba9ba2
--- /dev/null
+++ b/backend/Coliee.API/DTOs/SendStandaloneChatMessageRequest.cs
@@ -0,0 +1,15 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Coliee.API.DTOs;
+
+public class SendStandaloneChatMessageRequest
+{
+    public List<StandaloneChatMessageRequest> History { get; set; } = [];
+
+    [Required]
+    [MinLength(1)]
+    [MaxLength(4000)]
+    public string Content { get; set; } = string.Empty;
+
+    public string? ProviderOverride { get; set; }
+}
diff --git a/backend/Coliee.API/DTOs/StandaloneChatMessageRequest.cs b/backend/Coliee.API/DTOs/StandaloneChatMessageRequest.cs
new file mode 100644
index 0000000..49cc5b4
--- /dev/null
+++ b/backend/Coliee.API/DTOs/StandaloneChatMessageRequest.cs
@@ -0,0 +1,15 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Coliee.API.DTOs;
+
+public class StandaloneChatMessageRequest
+{
+    [Required]
+    [RegularExpression("^(user|assistant)$")]
+    public string Role { get; set; } = string.Empty;
+
+    [Required]
+    [MinLength(1)]
+    [MaxLength(4000)]
+    public string Content { get; set; } = string.Empty;
+}
diff --git a/backend/Coliee.API/DTOs/StandaloneChatMessageResponse.cs b/backend/Coliee.API/DTOs/StandaloneChatMessageResponse.cs
new file mode 100644
index 0000000..bb8b014
--- /dev/null
+++ b/backend/Coliee.API/DTOs/StandaloneChatMessageResponse.cs
@@ -0,0 +1,10 @@
+namespace Coliee.API.DTOs;
+
+public class StandaloneChatMessageResponse
+{
+    public string Role { get; set; } = string.Empty;
+    public string Content { get; set; } = string.Empty;
+    public string? Provider { get; set; }
+    public string? Model { get; set; }
+    public DateTime CreatedAt { get; set; }
+}
diff --git a/backend/Coliee.API/DTOs/StandaloneChatResponse.cs b/backend/Coliee.API/DTOs/StandaloneChatResponse.cs
new file mode 100644
index 0000000..8dcda33
--- /dev/null
+++ b/backend/Coliee.API/DTOs/StandaloneChatResponse.cs
@@ -0,0 +1,8 @@
+namespace Coliee.API.DTOs;
+
+public class StandaloneChatResponse
+{
+    public string? DefaultProvider { get; set; }
+    public List<string> AvailableProviders { get; set; } = [];
+    public StandaloneChatMessageResponse Message { get; set; } = new();
+}
diff --git a/backend/Coliee.API/DTOs/UpdateChatCanvasMessageRequest.cs b/backend/Coliee.API/DTOs/UpdateChatCanvasMessageRequest.cs
new file mode 100644
index 0000000..5c744f4
--- /dev/null
+++ b/backend/Coliee.API/DTOs/UpdateChatCanvasMessageRequest.cs
@@ -0,0 +1,9 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Coliee.API.DTOs;
+
+public class UpdateChatCanvasMessageRequest
+{
+    [Required]
+    public string Content { get; set; } = string.Empty;
+}
diff --git a/backend/Coliee.API/DTOs/UpdateChatNodeRequest.cs b/backend/Coliee.API/DTOs/UpdateChatNodeRequest.cs
new file mode 100644
index 0000000..8319030
--- /dev/null
+++ b/backend/Coliee.API/DTOs/UpdateChatNodeRequest.cs
@@ -0,0 +1,16 @@
+namespace Coliee.API.DTOs;
+
+public class UpdateChatNodeRequest
+{
+    public string? Title { get; set; }
+    public string? Content { get; set; }
+    public double? PositionX { get; set; }
+    public double? PositionY { get; set; }
+    public double? Width { get; set; }
+    public double? Height { get; set; }
+    public bool? IsCollapsed { get; set; }
+    public double? ExpandedWidth { get; set; }
+    public double? ExpandedHeight { get; set; }
+    public string? PreferredProvider { get; set; }
+    public string? PreferredModel { get; set; }
+}
diff --git a/backend/Coliee.API/Data/CanvasRepository.cs b/backend/Coliee.API/Data/CanvasRepository.cs
index 80908ef..0d2dbf0 100644
--- a/backend/Coliee.API/Data/CanvasRepository.cs
+++ b/backend/Coliee.API/Data/CanvasRepository.cs
@@ -1,3 +1,4 @@
+using System.Text.Json;
 using Coliee.API.Models;
 using MySql.Data.MySqlClient;
 
@@ -46,12 +47,13 @@ INSERT INTO main_node_conversations (canvas_id, created_at, updated_at)
 
             using var insertRootNode = new MySqlCommand(
                 """
-                INSERT INTO canvas_nodes (canvas_id, parent_node_id, kind, title, content, source_prompt, depth, sibling_order, created_at, updated_at)
-                VALUES (@canvasId, NULL, 'main', 'Main Node', '', NULL, 0, 0, UTC_TIMESTAMP(), UTC_TIMESTAMP())
+                INSERT INTO canvas_nodes (canvas_id, parent_node_id, kind, title, generation_mode, summary, category, content, source_prompt, continuation_prompt, details_json, depth, sibling_order, created_at, updated_at)
+                VALUES (@canvasId, NULL, 'main', 'Main Node', @generationMode, NULL, NULL, '', NULL, NULL, NULL, 0, 0, UTC_TIMESTAMP(), UTC_TIMESTAMP())
                 """,
                 conn,
                 (MySqlTransaction)tx);
             insertRootNode.Parameters.AddWithValue("@canvasId", canvasId);
+            insertRootNode.Parameters.AddWithValue("@generationMode", CanvasGenerationModes.Compact);
             await insertRootNode.ExecuteNonQueryAsync();
 
             await tx.CommitAsync();
@@ -211,14 +213,15 @@ public async Task<CanvasNode> EnsureRootCanvasNodeAsync(int userId, int canvasId
         await conn.OpenAsync();
         using var cmd = new MySqlCommand(
             """
-            INSERT INTO canvas_nodes (canvas_id, parent_node_id, kind, title, content, source_prompt, depth, sibling_order, created_at, updated_at)
-            SELECT canvas.id, NULL, 'main', 'Main Node', '', NULL, 0, 0, UTC_TIMESTAMP(), UTC_TIMESTAMP()
+            INSERT INTO canvas_nodes (canvas_id, parent_node_id, kind, title, generation_mode, summary, category, content, source_prompt, continuation_prompt, details_json, depth, sibling_order, created_at, updated_at)
+            SELECT canvas.id, NULL, 'main', 'Main Node', @generationMode, NULL, NULL, '', NULL, NULL, NULL, 0, 0, UTC_TIMESTAMP(), UTC_TIMESTAMP()
             FROM canvases canvas
             WHERE canvas.user_id = @userId AND canvas.id = @canvasId
             """,
             conn);
         cmd.Parameters.AddWithValue("@userId", userId);
         cmd.Parameters.AddWithValue("@canvasId", canvasId);
+        cmd.Parameters.AddWithValue("@generationMode", CanvasGenerationModes.Compact);
         var rows = await cmd.ExecuteNonQueryAsync();
 
         if (rows == 0)
@@ -237,7 +240,7 @@ public async Task<IReadOnlyList<CanvasNode>> GetCanvasNodesAsync(int userId, int
         await EnsureCanvasNodesSchemaAsync(conn);
         using var cmd = new MySqlCommand(
             """
-            SELECT node.id, node.canvas_id, node.parent_node_id, node.kind, node.title, node.content, node.source_prompt, node.depth, node.sibling_order, node.created_at, node.updated_at
+            SELECT node.id, node.canvas_id, node.parent_node_id, node.kind, node.title, node.generation_mode, node.summary, node.category, node.content, node.source_prompt, node.continuation_prompt, node.details_json, node.depth, node.sibling_order, node.created_at, node.updated_at
             FROM canvas_nodes node
             INNER JOIN canvases canvas ON canvas.id = node.canvas_id
             WHERE canvas.user_id = @userId AND canvas.id = @canvasId
@@ -261,7 +264,7 @@ FROM canvas_nodes node
         await EnsureCanvasNodesSchemaAsync(conn);
         using var cmd = new MySqlCommand(
             """
-            SELECT node.id, node.canvas_id, node.parent_node_id, node.kind, node.title, node.content, node.source_prompt, node.depth, node.sibling_order, node.created_at, node.updated_at
+            SELECT node.id, node.canvas_id, node.parent_node_id, node.kind, node.title, node.generation_mode, node.summary, node.category, node.content, node.source_prompt, node.continuation_prompt, node.details_json, node.depth, node.sibling_order, node.created_at, node.updated_at
             FROM canvas_nodes node
             INNER JOIN canvases canvas ON canvas.id = node.canvas_id
             WHERE canvas.user_id = @userId AND canvas.id = @canvasId AND node.id = @nodeId
@@ -279,6 +282,72 @@ LIMIT 1
         return null;
     }
 
+    public async Task<CanvasNode> UpdateCanvasNodeAsync(int userId, int canvasId, int nodeId, CanvasNodeUpdateInput node)
+    {
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureCanvasNodesSchemaAsync(conn);
+        using var tx = await conn.BeginTransactionAsync();
+
+        try
+        {
+            using var updateNode = new MySqlCommand(
+                """
+                UPDATE canvas_nodes node
+                INNER JOIN canvases canvas ON canvas.id = node.canvas_id
+                SET node.generation_mode = @generationMode,
+                    node.summary = @summary,
+                    node.category = @category,
+                    node.content = @content,
+                    node.source_prompt = @sourcePrompt,
+                    node.continuation_prompt = @continuationPrompt,
+                    node.details_json = @detailsJson,
+                    node.updated_at = UTC_TIMESTAMP()
+                WHERE canvas.user_id = @userId
+                  AND canvas.id = @canvasId
+                  AND node.id = @nodeId
+                """,
+                conn,
+                (MySqlTransaction)tx);
+            updateNode.Parameters.AddWithValue("@generationMode", CanvasGenerationModes.Normalize(node.GenerationMode));
+            updateNode.Parameters.AddWithValue("@summary", (object?)node.Summary ?? DBNull.Value);
+            updateNode.Parameters.AddWithValue("@category", (object?)node.Category ?? DBNull.Value);
+            updateNode.Parameters.AddWithValue("@content", node.Content);
+            updateNode.Parameters.AddWithValue("@sourcePrompt", (object?)node.SourcePrompt ?? DBNull.Value);
+            updateNode.Parameters.AddWithValue("@continuationPrompt", (object?)node.ContinuationPrompt ?? DBNull.Value);
+            updateNode.Parameters.AddWithValue("@detailsJson", (object?)SerializeDetailsJson(node.Blocks, node.Sources) ?? DBNull.Value);
+            updateNode.Parameters.AddWithValue("@userId", userId);
+            updateNode.Parameters.AddWithValue("@canvasId", canvasId);
+            updateNode.Parameters.AddWithValue("@nodeId", nodeId);
+
+            var rows = await updateNode.ExecuteNonQueryAsync();
+            if (rows == 0)
+                throw new InvalidOperationException("Canvas node update did not persist.");
+
+            using var touchCanvas = new MySqlCommand(
+                """
+                UPDATE canvases
+                SET updated_at = UTC_TIMESTAMP()
+                WHERE id = @canvasId AND user_id = @userId
+                """,
+                conn,
+                (MySqlTransaction)tx);
+            touchCanvas.Parameters.AddWithValue("@canvasId", canvasId);
+            touchCanvas.Parameters.AddWithValue("@userId", userId);
+            await touchCanvas.ExecuteNonQueryAsync();
+
+            await tx.CommitAsync();
+        }
+        catch
+        {
+            await tx.RollbackAsync();
+            throw;
+        }
+
+        return await GetCanvasNodeAsync(userId, canvasId, nodeId)
+            ?? throw new InvalidOperationException("Updated canvas node could not be reloaded.");
+    }
+
     public async Task<IReadOnlyList<CanvasNode>> AddChildCanvasNodesAsync(int userId, int canvasId, int parentNodeId, IReadOnlyList<CanvasNodeCreateInput> nodes)
     {
         if (nodes.Count == 0)
@@ -310,8 +379,8 @@ FROM canvas_nodes node
             {
                 using var insert = new MySqlCommand(
                     """
-                    INSERT INTO canvas_nodes (canvas_id, parent_node_id, kind, title, content, source_prompt, depth, sibling_order, created_at, updated_at)
-                    VALUES (@canvasId, @parentNodeId, @kind, @title, @content, @sourcePrompt, @depth, @siblingOrder, UTC_TIMESTAMP(), UTC_TIMESTAMP())
+                    INSERT INTO canvas_nodes (canvas_id, parent_node_id, kind, title, generation_mode, summary, category, content, source_prompt, continuation_prompt, details_json, depth, sibling_order, created_at, updated_at)
+                    VALUES (@canvasId, @parentNodeId, @kind, @title, @generationMode, @summary, @category, @content, @sourcePrompt, @continuationPrompt, @detailsJson, @depth, @siblingOrder, UTC_TIMESTAMP(), UTC_TIMESTAMP())
                     """,
                     conn,
                     (MySqlTransaction)tx);
@@ -319,8 +388,13 @@ INSERT INTO canvas_nodes (canvas_id, parent_node_id, kind, title, content, sourc
                 insert.Parameters.AddWithValue("@parentNodeId", parentNodeId);
                 insert.Parameters.AddWithValue("@kind", node.Kind);
                 insert.Parameters.AddWithValue("@title", node.Title);
+                insert.Parameters.AddWithValue("@generationMode", CanvasGenerationModes.Normalize(node.GenerationMode));
+                insert.Parameters.AddWithValue("@summary", (object?)node.Summary ?? DBNull.Value);
+                insert.Parameters.AddWithValue("@category", (object?)node.Category ?? DBNull.Value);
                 insert.Parameters.AddWithValue("@content", node.Content);
                 insert.Parameters.AddWithValue("@sourcePrompt", (object?)node.SourcePrompt ?? DBNull.Value);
+                insert.Parameters.AddWithValue("@continuationPrompt", (object?)node.ContinuationPrompt ?? DBNull.Value);
+                insert.Parameters.AddWithValue("@detailsJson", (object?)SerializeDetailsJson(node.Blocks, node.Sources) ?? DBNull.Value);
                 insert.Parameters.AddWithValue("@depth", node.Depth);
                 insert.Parameters.AddWithValue("@siblingOrder", nextSiblingOrder);
                 await insert.ExecuteNonQueryAsync();
@@ -333,8 +407,14 @@ INSERT INTO canvas_nodes (canvas_id, parent_node_id, kind, title, content, sourc
                     ParentNodeId = parentNodeId,
                     Kind = node.Kind,
                     Title = node.Title,
+                    GenerationMode = CanvasGenerationModes.Normalize(node.GenerationMode),
+                    Summary = node.Summary,
+                    Category = node.Category,
                     Content = node.Content,
                     SourcePrompt = node.SourcePrompt,
+                    ContinuationPrompt = node.ContinuationPrompt,
+                    Blocks = [.. node.Blocks],
+                    Sources = [.. node.Sources],
                     Depth = node.Depth,
                     SiblingOrder = nextSiblingOrder,
                     CreatedAt = now,
@@ -385,7 +465,7 @@ private static Canvas MapCanvas(MySqlDataReader reader)
         await EnsureCanvasNodesSchemaAsync(conn);
         using var cmd = new MySqlCommand(
             """
-            SELECT node.id, node.canvas_id, node.parent_node_id, node.kind, node.title, node.content, node.source_prompt, node.depth, node.sibling_order, node.created_at, node.updated_at
+            SELECT node.id, node.canvas_id, node.parent_node_id, node.kind, node.title, node.generation_mode, node.summary, node.category, node.content, node.source_prompt, node.continuation_prompt, node.details_json, node.depth, node.sibling_order, node.created_at, node.updated_at
             FROM canvas_nodes node
             INNER JOIN canvases canvas ON canvas.id = node.canvas_id
             WHERE canvas.user_id = @userId
@@ -408,7 +488,13 @@ LIMIT 1
     private static CanvasNode MapCanvasNode(MySqlDataReader reader)
     {
         var parentNodeOrdinal = reader.GetOrdinal("parent_node_id");
+        var generationModeOrdinal = reader.GetOrdinal("generation_mode");
+        var summaryOrdinal = reader.GetOrdinal("summary");
+        var categoryOrdinal = reader.GetOrdinal("category");
         var sourcePromptOrdinal = reader.GetOrdinal("source_prompt");
+        var continuationPromptOrdinal = reader.GetOrdinal("continuation_prompt");
+        var detailsJsonOrdinal = reader.GetOrdinal("details_json");
+        var details = ParseDetailsJson(reader.IsDBNull(detailsJsonOrdinal) ? null : reader.GetString(detailsJsonOrdinal));
 
         return new CanvasNode
         {
@@ -417,8 +503,14 @@ private static CanvasNode MapCanvasNode(MySqlDataReader reader)
             ParentNodeId = reader.IsDBNull(parentNodeOrdinal) ? null : reader.GetInt32(parentNodeOrdinal),
             Kind = reader.GetString("kind"),
             Title = reader.GetString("title"),
+            GenerationMode = CanvasGenerationModes.Normalize(reader.IsDBNull(generationModeOrdinal) ? null : reader.GetString(generationModeOrdinal)),
+            Summary = reader.IsDBNull(summaryOrdinal) ? null : reader.GetString(summaryOrdinal),
+            Category = reader.IsDBNull(categoryOrdinal) ? null : reader.GetString(categoryOrdinal),
             Content = reader.GetString("content"),
             SourcePrompt = reader.IsDBNull(sourcePromptOrdinal) ? null : reader.GetString(sourcePromptOrdinal),
+            ContinuationPrompt = reader.IsDBNull(continuationPromptOrdinal) ? null : reader.GetString(continuationPromptOrdinal),
+            Blocks = details.Blocks,
+            Sources = details.Sources,
             Depth = reader.GetInt32("depth"),
             SiblingOrder = reader.GetInt32("sibling_order"),
             CreatedAt = reader.GetDateTime("created_at"),
@@ -436,8 +528,13 @@ CREATE TABLE IF NOT EXISTS canvas_nodes (
                 parent_node_id  INT           NULL,
                 kind            VARCHAR(32)   NOT NULL,
                 title           VARCHAR(160)  NOT NULL,
+                generation_mode VARCHAR(16)   NOT NULL DEFAULT 'compact',
+                summary         MEDIUMTEXT    NULL,
+                category        VARCHAR(80)   NULL,
                 content         MEDIUMTEXT    NOT NULL,
                 source_prompt   TEXT          NULL,
+                continuation_prompt TEXT      NULL,
+                details_json    JSON          NULL,
                 depth           INT           NOT NULL,
                 sibling_order   INT           NOT NULL,
                 created_at      TIMESTAMP     NOT NULL DEFAULT CURRENT_TIMESTAMP,
@@ -449,5 +546,74 @@ INDEX idx_canvas_nodes_canvas_parent (canvas_id, parent_node_id, sibling_order,
             """,
             conn);
         await cmd.ExecuteNonQueryAsync();
+
+        await EnsureColumnExistsAsync(conn, "canvas_nodes", "generation_mode", "VARCHAR(16) NOT NULL DEFAULT 'compact'", "title");
+        await EnsureColumnExistsAsync(conn, "canvas_nodes", "summary", "MEDIUMTEXT NULL", "generation_mode");
+        await EnsureColumnExistsAsync(conn, "canvas_nodes", "category", "VARCHAR(80) NULL", "summary");
+        await EnsureColumnExistsAsync(conn, "canvas_nodes", "continuation_prompt", "TEXT NULL", "source_prompt");
+        await EnsureColumnExistsAsync(conn, "canvas_nodes", "details_json", "JSON NULL", "continuation_prompt");
+    }
+
+    private static async Task EnsureColumnExistsAsync(
+        MySqlConnection conn,
+        string tableName,
+        string columnName,
+        string columnDefinition,
+        string? afterColumn = null)
+    {
+        using var existsCmd = new MySqlCommand(
+            """
+            SELECT COUNT(*)
+            FROM INFORMATION_SCHEMA.COLUMNS
+            WHERE TABLE_SCHEMA = DATABASE()
+              AND TABLE_NAME = @tableName
+              AND COLUMN_NAME = @columnName
+            """,
+            conn);
+        existsCmd.Parameters.AddWithValue("@tableName", tableName);
+        existsCmd.Parameters.AddWithValue("@columnName", columnName);
+
+        var exists = Convert.ToInt32(await existsCmd.ExecuteScalarAsync()) > 0;
+        if (exists)
+            return;
+
+        var placement = string.IsNullOrWhiteSpace(afterColumn) ? string.Empty : $" AFTER {afterColumn}";
+        using var alterCmd = new MySqlCommand(
+            $"ALTER TABLE {tableName} ADD COLUMN {columnName} {columnDefinition}{placement};",
+            conn);
+        await alterCmd.ExecuteNonQueryAsync();
+    }
+
+    private static string? SerializeDetailsJson(IReadOnlyList<CanvasNodeBlock> blocks, IReadOnlyList<CanvasNodeSource> sources)
+    {
+        if (blocks.Count == 0 && sources.Count == 0)
+            return null;
+
+        return JsonSerializer.Serialize(new CanvasNodeDetailsPayload
+        {
+            Blocks = [.. blocks],
+            Sources = [.. sources]
+        });
+    }
+
+    private static CanvasNodeDetailsPayload ParseDetailsJson(string? json)
+    {
+        if (string.IsNullOrWhiteSpace(json))
+            return new CanvasNodeDetailsPayload();
+
+        try
+        {
+            return JsonSerializer.Deserialize<CanvasNodeDetailsPayload>(json) ?? new CanvasNodeDetailsPayload();
+        }
+        catch (JsonException)
+        {
+            return new CanvasNodeDetailsPayload();
+        }
+    }
+
+    private sealed class CanvasNodeDetailsPayload
+    {
+        public List<CanvasNodeBlock> Blocks { get; set; } = [];
+        public List<CanvasNodeSource> Sources { get; set; } = [];
     }
 }
diff --git a/backend/Coliee.API/Data/ChatSessionRepository.cs b/backend/Coliee.API/Data/ChatSessionRepository.cs
new file mode 100644
index 0000000..24ba1a1
--- /dev/null
+++ b/backend/Coliee.API/Data/ChatSessionRepository.cs
@@ -0,0 +1,1174 @@
+using System.Text.Json;
+using Coliee.API.Models;
+using Coliee.API.Services;
+using MySql.Data.MySqlClient;
+
+namespace Coliee.API.Data;
+
+public class ChatSessionRepository : IChatSessionRepository
+{
+    private const string RootNodeType = "question";
+    private const double RootPositionX = 400;
+    private const double RootPositionY = 300;
+    private const double DefaultNodeWidth = 600;
+    private const double DefaultNodeHeight = 520;
+    private readonly string _conn;
+
+    public ChatSessionRepository(IConfiguration config)
+    {
+        _conn = config.GetConnectionString("Default") ?? string.Empty;
+    }
+
+    public async Task<ChatSession> CreateSessionAsync(int userId, string title)
+    {
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+        using var cmd = new MySqlCommand(
+            """
+            INSERT INTO chat_sessions (user_id, title, created_at, updated_at)
+            VALUES (@userId, @title, UTC_TIMESTAMP(), UTC_TIMESTAMP())
+            """,
+            conn);
+        cmd.Parameters.AddWithValue("@userId", userId);
+        cmd.Parameters.AddWithValue("@title", title);
+        await cmd.ExecuteNonQueryAsync();
+
+        return new ChatSession
+        {
+            Id = Convert.ToInt32(cmd.LastInsertedId),
+            UserId = userId,
+            Title = title,
+            CreatedAt = DateTime.UtcNow,
+            UpdatedAt = DateTime.UtcNow
+        };
+    }
+
+    public async Task<IReadOnlyList<ChatSession>> GetSessionsAsync(int userId)
+    {
+        var items = new List<ChatSession>();
+
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+        using var cmd = new MySqlCommand(
+            """
+            SELECT id, user_id, title, created_at, updated_at
+            FROM chat_sessions
+            WHERE user_id = @userId
+            ORDER BY updated_at DESC, id DESC
+            """,
+            conn);
+        cmd.Parameters.AddWithValue("@userId", userId);
+
+        using var reader = await cmd.ExecuteReaderAsync();
+        while (await reader.ReadAsync())
+            items.Add(MapSession((MySqlDataReader)reader));
+
+        return items;
+    }
+
+    public async Task<ChatSession?> GetSessionAsync(int userId, int sessionId)
+    {
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+        using var cmd = new MySqlCommand(
+            """
+            SELECT id, user_id, title, created_at, updated_at
+            FROM chat_sessions
+            WHERE user_id = @userId AND id = @sessionId
+            LIMIT 1
+            """,
+            conn);
+        cmd.Parameters.AddWithValue("@userId", userId);
+        cmd.Parameters.AddWithValue("@sessionId", sessionId);
+
+        using var reader = await cmd.ExecuteReaderAsync();
+        if (await reader.ReadAsync())
+            return MapSession((MySqlDataReader)reader);
+
+        return null;
+    }
+
+    public async Task<ChatSession> RenameSessionAsync(int userId, int sessionId, string title)
+    {
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+        using var cmd = new MySqlCommand(
+            """
+            UPDATE chat_sessions
+            SET title = @title,
+                updated_at = UTC_TIMESTAMP()
+            WHERE user_id = @userId AND id = @sessionId
+            """,
+            conn);
+        cmd.Parameters.AddWithValue("@title", title);
+        cmd.Parameters.AddWithValue("@userId", userId);
+        cmd.Parameters.AddWithValue("@sessionId", sessionId);
+        await cmd.ExecuteNonQueryAsync();
+
+        return await GetSessionAsync(userId, sessionId)
+            ?? throw new InvalidOperationException("Chat session rename did not persist.");
+    }
+
+    public async Task DeleteSessionAsync(int userId, int sessionId)
+    {
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+        using var cmd = new MySqlCommand(
+            """
+            DELETE FROM chat_sessions
+            WHERE user_id = @userId AND id = @sessionId
+            """,
+            conn);
+        cmd.Parameters.AddWithValue("@userId", userId);
+        cmd.Parameters.AddWithValue("@sessionId", sessionId);
+        await cmd.ExecuteNonQueryAsync();
+    }
+
+    public async Task<ChatNode> EnsureRootNodeAsync(int userId, int sessionId, string title)
+    {
+        var existing = await GetRootNodeAsync(userId, sessionId);
+        if (existing != null)
+            return existing;
+
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+        using var cmd = new MySqlCommand(
+            """
+            INSERT INTO chat_nodes (session_id, parent_node_id, branch_from_message_id, node_type, title, preview, content, position_x, position_y, width, height, preferred_provider, preferred_model, sibling_order, created_at, updated_at)
+            SELECT session.id, NULL, NULL, @nodeType, @title, '', '', @positionX, @positionY, @width, @height, NULL, NULL, 0, UTC_TIMESTAMP(), UTC_TIMESTAMP()
+            FROM chat_sessions session
+            WHERE session.user_id = @userId AND session.id = @sessionId
+            """,
+            conn);
+        cmd.Parameters.AddWithValue("@userId", userId);
+        cmd.Parameters.AddWithValue("@sessionId", sessionId);
+        cmd.Parameters.AddWithValue("@title", title);
+        cmd.Parameters.AddWithValue("@nodeType", RootNodeType);
+        cmd.Parameters.AddWithValue("@positionX", RootPositionX);
+        cmd.Parameters.AddWithValue("@positionY", RootPositionY);
+        cmd.Parameters.AddWithValue("@width", DefaultNodeWidth);
+        cmd.Parameters.AddWithValue("@height", DefaultNodeHeight);
+        var rows = await cmd.ExecuteNonQueryAsync();
+
+        if (rows == 0)
+            throw new InvalidOperationException("Chat session not found for root node creation.");
+
+        return await GetRootNodeAsync(userId, sessionId)
+            ?? throw new InvalidOperationException("Root chat node creation did not persist.");
+    }
+
+    public async Task<IReadOnlyList<ChatNode>> GetNodesAsync(int userId, int sessionId)
+    {
+        var items = new List<ChatNode>();
+
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+        using var cmd = new MySqlCommand(
+            """
+            SELECT node.id, node.session_id, node.parent_node_id, node.branch_from_message_id, node.node_type, node.title, node.preview, node.content, node.position_x, node.position_y, node.width, node.height, node.is_collapsed, node.expanded_width, node.expanded_height, node.preferred_provider, node.preferred_model, node.context_boundary_message_id, node.context_snapshot_json, node.context_snapshot_updated_at, node.sibling_order, node.created_at, node.updated_at
+            FROM chat_nodes node
+            INNER JOIN chat_sessions session ON session.id = node.session_id
+            WHERE session.user_id = @userId AND session.id = @sessionId
+            ORDER BY node.parent_node_id, node.sibling_order, node.id
+            """,
+            conn);
+        cmd.Parameters.AddWithValue("@userId", userId);
+        cmd.Parameters.AddWithValue("@sessionId", sessionId);
+
+        using var reader = await cmd.ExecuteReaderAsync();
+        while (await reader.ReadAsync())
+            items.Add(MapNode((MySqlDataReader)reader));
+
+        return items;
+    }
+
+    public async Task<ChatNode?> GetNodeAsync(int userId, int sessionId, int nodeId)
+    {
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+        using var cmd = new MySqlCommand(
+            """
+            SELECT node.id, node.session_id, node.parent_node_id, node.branch_from_message_id, node.node_type, node.title, node.preview, node.content, node.position_x, node.position_y, node.width, node.height, node.is_collapsed, node.expanded_width, node.expanded_height, node.preferred_provider, node.preferred_model, node.context_boundary_message_id, node.context_snapshot_json, node.context_snapshot_updated_at, node.sibling_order, node.created_at, node.updated_at
+            FROM chat_nodes node
+            INNER JOIN chat_sessions session ON session.id = node.session_id
+            WHERE session.user_id = @userId AND session.id = @sessionId AND node.id = @nodeId
+            LIMIT 1
+            """,
+            conn);
+        cmd.Parameters.AddWithValue("@userId", userId);
+        cmd.Parameters.AddWithValue("@sessionId", sessionId);
+        cmd.Parameters.AddWithValue("@nodeId", nodeId);
+
+        using var reader = await cmd.ExecuteReaderAsync();
+        if (await reader.ReadAsync())
+            return MapNode((MySqlDataReader)reader);
+
+        return null;
+    }
+
+    public async Task<ChatNode> CreateNodeAsync(int userId, int sessionId, ChatNodeCreateInput node)
+    {
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+        using var tx = await conn.BeginTransactionAsync();
+
+        try
+        {
+            var siblingOrder = 0;
+            if (node.ParentNodeId.HasValue)
+            {
+                using var orderCmd = new MySqlCommand(
+                    """
+                    SELECT COALESCE(MAX(child.sibling_order), -1)
+                    FROM chat_nodes child
+                    INNER JOIN chat_sessions session ON session.id = child.session_id
+                    WHERE session.user_id = @userId
+                      AND session.id = @sessionId
+                      AND child.parent_node_id = @parentNodeId
+                    """,
+                    conn,
+                    (MySqlTransaction)tx);
+                orderCmd.Parameters.AddWithValue("@userId", userId);
+                orderCmd.Parameters.AddWithValue("@sessionId", sessionId);
+                orderCmd.Parameters.AddWithValue("@parentNodeId", node.ParentNodeId.Value);
+                siblingOrder = Convert.ToInt32(await orderCmd.ExecuteScalarAsync()) + 1;
+            }
+
+            using var cmd = new MySqlCommand(
+                """
+                INSERT INTO chat_nodes (session_id, parent_node_id, branch_from_message_id, node_type, title, preview, content, position_x, position_y, width, height, is_collapsed, expanded_width, expanded_height, preferred_provider, preferred_model, sibling_order, created_at, updated_at)
+                SELECT session.id, @parentNodeId, @branchFromMessageId, @nodeType, @title, @preview, @content, @positionX, @positionY, @width, @height, @isCollapsed, @expandedWidth, @expandedHeight, @preferredProvider, @preferredModel, @siblingOrder, UTC_TIMESTAMP(), UTC_TIMESTAMP()
+                FROM chat_sessions session
+                WHERE session.user_id = @userId AND session.id = @sessionId
+                """,
+                conn,
+                (MySqlTransaction)tx);
+            cmd.Parameters.AddWithValue("@userId", userId);
+            cmd.Parameters.AddWithValue("@sessionId", sessionId);
+            cmd.Parameters.AddWithValue("@parentNodeId", (object?)node.ParentNodeId ?? DBNull.Value);
+            cmd.Parameters.AddWithValue("@branchFromMessageId", (object?)node.BranchFromMessageId ?? DBNull.Value);
+            cmd.Parameters.AddWithValue("@nodeType", node.NodeType);
+            cmd.Parameters.AddWithValue("@title", node.Title);
+            cmd.Parameters.AddWithValue("@preview", node.Preview);
+            cmd.Parameters.AddWithValue("@content", node.Content);
+            cmd.Parameters.AddWithValue("@positionX", node.PositionX);
+            cmd.Parameters.AddWithValue("@positionY", node.PositionY);
+            cmd.Parameters.AddWithValue("@width", node.Width);
+            cmd.Parameters.AddWithValue("@height", node.Height);
+            cmd.Parameters.AddWithValue("@isCollapsed", node.IsCollapsed);
+            cmd.Parameters.AddWithValue("@expandedWidth", (object?)node.ExpandedWidth ?? DBNull.Value);
+            cmd.Parameters.AddWithValue("@expandedHeight", (object?)node.ExpandedHeight ?? DBNull.Value);
+            cmd.Parameters.AddWithValue("@preferredProvider", (object?)node.PreferredProvider ?? DBNull.Value);
+            cmd.Parameters.AddWithValue("@preferredModel", (object?)node.PreferredModel ?? DBNull.Value);
+            cmd.Parameters.AddWithValue("@siblingOrder", siblingOrder);
+
+            var rows = await cmd.ExecuteNonQueryAsync();
+            if (rows == 0)
+                throw new InvalidOperationException("Chat node creation did not persist.");
+
+            using var touchSession = new MySqlCommand(
+                """
+                UPDATE chat_sessions
+                SET updated_at = UTC_TIMESTAMP()
+                WHERE user_id = @userId AND id = @sessionId
+                """,
+                conn,
+                (MySqlTransaction)tx);
+            touchSession.Parameters.AddWithValue("@userId", userId);
+            touchSession.Parameters.AddWithValue("@sessionId", sessionId);
+            await touchSession.ExecuteNonQueryAsync();
+
+            await tx.CommitAsync();
+            var createdNode = await GetNodeAsync(userId, sessionId, Convert.ToInt32(cmd.LastInsertedId));
+            return createdNode ?? throw new InvalidOperationException("Created chat node could not be reloaded.");
+        }
+        catch
+        {
+            await tx.RollbackAsync();
+            throw;
+        }
+    }
+
+    public async Task<bool> DeleteNodeAsync(int userId, int sessionId, int nodeId)
+    {
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+
+        // Prevent deletion of root nodes (nodes without a parent)
+        using var checkCmd = new MySqlCommand(
+            """
+            SELECT COUNT(*)
+            FROM chat_nodes node
+            INNER JOIN chat_sessions session ON session.id = node.session_id
+            WHERE session.user_id = @userId
+              AND session.id = @sessionId
+              AND node.id = @nodeId
+              AND node.parent_node_id IS NULL
+            """,
+            conn);
+        checkCmd.Parameters.AddWithValue("@userId", userId);
+        checkCmd.Parameters.AddWithValue("@sessionId", sessionId);
+        checkCmd.Parameters.AddWithValue("@nodeId", nodeId);
+        var rootCount = Convert.ToInt32(await checkCmd.ExecuteScalarAsync());
+        if (rootCount > 0)
+            return false; // cannot delete root
+
+        using var cmd = new MySqlCommand(
+            """
+            DELETE node FROM chat_nodes node
+            INNER JOIN chat_sessions session ON session.id = node.session_id
+            WHERE session.user_id = @userId
+              AND session.id = @sessionId
+              AND node.id = @nodeId
+            """,
+            conn);
+        cmd.Parameters.AddWithValue("@userId", userId);
+        cmd.Parameters.AddWithValue("@sessionId", sessionId);
+        cmd.Parameters.AddWithValue("@nodeId", nodeId);
+        var rows = await cmd.ExecuteNonQueryAsync();
+        return rows > 0;
+    }
+
+    public async Task<ChatNode> UpdateNodeAsync(int userId, int sessionId, int nodeId, ChatNodeUpdateInput node)
+    {
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+        using var tx = await conn.BeginTransactionAsync();
+
+        try
+        {
+            using var cmd = new MySqlCommand(
+                """
+                UPDATE chat_nodes node
+                INNER JOIN chat_sessions session ON session.id = node.session_id
+                SET node.node_type = @nodeType,
+                    node.title = @title,
+                    node.preview = @preview,
+                    node.content = @content,
+                    node.position_x = @positionX,
+                    node.position_y = @positionY,
+                    node.width = @width,
+                    node.height = @height,
+                    node.is_collapsed = @isCollapsed,
+                    node.expanded_width = @expandedWidth,
+                    node.expanded_height = @expandedHeight,
+                    node.preferred_provider = @preferredProvider,
+                    node.preferred_model = @preferredModel,
+                    node.updated_at = UTC_TIMESTAMP()
+                WHERE session.user_id = @userId
+                  AND session.id = @sessionId
+                  AND node.id = @nodeId
+                """,
+                conn,
+                (MySqlTransaction)tx);
+            cmd.Parameters.AddWithValue("@userId", userId);
+            cmd.Parameters.AddWithValue("@sessionId", sessionId);
+            cmd.Parameters.AddWithValue("@nodeId", nodeId);
+            cmd.Parameters.AddWithValue("@nodeType", node.NodeType);
+            cmd.Parameters.AddWithValue("@title", node.Title);
+            cmd.Parameters.AddWithValue("@preview", node.Preview);
+            cmd.Parameters.AddWithValue("@content", node.Content);
+            cmd.Parameters.AddWithValue("@positionX", node.PositionX);
+            cmd.Parameters.AddWithValue("@positionY", node.PositionY);
+            cmd.Parameters.AddWithValue("@width", node.Width);
+            cmd.Parameters.AddWithValue("@height", node.Height);
+            cmd.Parameters.AddWithValue("@isCollapsed", node.IsCollapsed);
+            cmd.Parameters.AddWithValue("@expandedWidth", (object?)node.ExpandedWidth ?? DBNull.Value);
+            cmd.Parameters.AddWithValue("@expandedHeight", (object?)node.ExpandedHeight ?? DBNull.Value);
+            cmd.Parameters.AddWithValue("@preferredProvider", (object?)node.PreferredProvider ?? DBNull.Value);
+            cmd.Parameters.AddWithValue("@preferredModel", (object?)node.PreferredModel ?? DBNull.Value);
+            await cmd.ExecuteNonQueryAsync();
+
+            using var touchSession = new MySqlCommand(
+                """
+                UPDATE chat_sessions
+                SET updated_at = UTC_TIMESTAMP()
+                WHERE user_id = @userId AND id = @sessionId
+                """,
+                conn,
+                (MySqlTransaction)tx);
+            touchSession.Parameters.AddWithValue("@userId", userId);
+            touchSession.Parameters.AddWithValue("@sessionId", sessionId);
+            await touchSession.ExecuteNonQueryAsync();
+
+            await tx.CommitAsync();
+            return await GetNodeAsync(userId, sessionId, nodeId)
+                ?? throw new InvalidOperationException("Updated chat node could not be reloaded.");
+        }
+        catch
+        {
+            await tx.RollbackAsync();
+            throw;
+        }
+    }
+
+    public async Task<ChatNodeContextSnapshot?> GetNodeContextSnapshotAsync(int userId, int sessionId, int nodeId)
+    {
+        var node = await GetNodeAsync(userId, sessionId, nodeId);
+        if (node == null || string.IsNullOrWhiteSpace(node.ContextSnapshotJson))
+            return null;
+
+        return JsonSerializer.Deserialize<ChatNodeContextSnapshot>(node.ContextSnapshotJson);
+    }
+
+    public async Task<ChatNode> UpdateNodeContextSnapshotAsync(int userId, int sessionId, int nodeId, int boundaryMessageId, string snapshotJson)
+    {
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+        using var tx = await conn.BeginTransactionAsync();
+
+        try
+        {
+            using var cmd = new MySqlCommand(
+                """
+                UPDATE chat_nodes node
+                INNER JOIN chat_sessions session ON session.id = node.session_id
+                SET node.context_boundary_message_id = @boundaryMessageId,
+                    node.context_snapshot_json = @snapshotJson,
+                    node.context_snapshot_updated_at = UTC_TIMESTAMP(),
+                    node.updated_at = UTC_TIMESTAMP()
+                WHERE session.user_id = @userId
+                  AND session.id = @sessionId
+                  AND node.id = @nodeId
+                """,
+                conn,
+                (MySqlTransaction)tx);
+            cmd.Parameters.AddWithValue("@userId", userId);
+            cmd.Parameters.AddWithValue("@sessionId", sessionId);
+            cmd.Parameters.AddWithValue("@nodeId", nodeId);
+            cmd.Parameters.AddWithValue("@boundaryMessageId", boundaryMessageId);
+            cmd.Parameters.AddWithValue("@snapshotJson", snapshotJson);
+            await cmd.ExecuteNonQueryAsync();
+
+            using var touchSession = new MySqlCommand(
+                """
+                UPDATE chat_sessions
+                SET updated_at = UTC_TIMESTAMP()
+                WHERE user_id = @userId AND id = @sessionId
+                """,
+                conn,
+                (MySqlTransaction)tx);
+            touchSession.Parameters.AddWithValue("@userId", userId);
+            touchSession.Parameters.AddWithValue("@sessionId", sessionId);
+            await touchSession.ExecuteNonQueryAsync();
+
+            await tx.CommitAsync();
+            return await GetNodeAsync(userId, sessionId, nodeId)
+                ?? throw new InvalidOperationException("Updated chat node snapshot could not be reloaded.");
+        }
+        catch
+        {
+            await tx.RollbackAsync();
+            throw;
+        }
+    }
+
+    public async Task SaveNodeLayoutsAsync(int userId, int sessionId, IReadOnlyList<ChatNodeLayoutUpdateInput> nodes)
+    {
+        if (nodes.Count == 0)
+            return;
+
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+        using var tx = await conn.BeginTransactionAsync();
+
+        try
+        {
+            foreach (var node in nodes)
+            {
+                using var cmd = new MySqlCommand(
+                    """
+                    UPDATE chat_nodes current_node
+                    INNER JOIN chat_sessions session ON session.id = current_node.session_id
+                    SET current_node.position_x = @positionX,
+                        current_node.position_y = @positionY
+                    WHERE session.user_id = @userId
+                      AND session.id = @sessionId
+                      AND current_node.id = @nodeId
+                    """,
+                    conn,
+                    (MySqlTransaction)tx);
+                cmd.Parameters.AddWithValue("@userId", userId);
+                cmd.Parameters.AddWithValue("@sessionId", sessionId);
+                cmd.Parameters.AddWithValue("@nodeId", node.NodeId);
+                cmd.Parameters.AddWithValue("@positionX", node.PositionX);
+                cmd.Parameters.AddWithValue("@positionY", node.PositionY);
+                await cmd.ExecuteNonQueryAsync();
+            }
+
+            await tx.CommitAsync();
+        }
+        catch
+        {
+            await tx.RollbackAsync();
+            throw;
+        }
+    }
+
+    public async Task<IReadOnlyList<ChatMessage>> GetNodeMessagesAsync(int userId, int sessionId, int nodeId)
+    {
+        var items = new List<ChatMessage>();
+
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+        using var cmd = new MySqlCommand(
+            """
+            SELECT message.id, message.node_id, message.role, message.content, message.image_url, message.provider, message.model, message.created_at, message.updated_at
+            FROM chat_messages message
+            INNER JOIN chat_nodes node ON node.id = message.node_id
+            INNER JOIN chat_sessions session ON session.id = node.session_id
+            WHERE session.user_id = @userId
+              AND session.id = @sessionId
+              AND node.id = @nodeId
+            ORDER BY message.id
+            """,
+            conn);
+        cmd.Parameters.AddWithValue("@userId", userId);
+        cmd.Parameters.AddWithValue("@sessionId", sessionId);
+        cmd.Parameters.AddWithValue("@nodeId", nodeId);
+
+        using var reader = await cmd.ExecuteReaderAsync();
+        while (await reader.ReadAsync())
+            items.Add(MapMessage((MySqlDataReader)reader));
+
+        return items;
+    }
+
+    public async Task<ChatMessage?> GetNodeMessageAsync(int userId, int sessionId, int nodeId, int messageId)
+    {
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+        using var cmd = new MySqlCommand(
+            """
+            SELECT message.id, message.node_id, message.role, message.content, message.image_url, message.provider, message.model, message.created_at, message.updated_at
+            FROM chat_messages message
+            INNER JOIN chat_nodes node ON node.id = message.node_id
+            INNER JOIN chat_sessions session ON session.id = node.session_id
+            WHERE session.user_id = @userId
+              AND session.id = @sessionId
+              AND node.id = @nodeId
+              AND message.id = @messageId
+            LIMIT 1
+            """,
+            conn);
+        cmd.Parameters.AddWithValue("@userId", userId);
+        cmd.Parameters.AddWithValue("@sessionId", sessionId);
+        cmd.Parameters.AddWithValue("@nodeId", nodeId);
+        cmd.Parameters.AddWithValue("@messageId", messageId);
+
+        using var reader = await cmd.ExecuteReaderAsync();
+        if (await reader.ReadAsync())
+            return MapMessage((MySqlDataReader)reader);
+
+        return null;
+    }
+
+    public async Task<ChatMessage> AddMessageAsync(int userId, int sessionId, int nodeId, string role, string content, string? imageUrl, string? provider, string? model)
+    {
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+        using var tx = await conn.BeginTransactionAsync();
+
+        try
+        {
+            using var insert = new MySqlCommand(
+                """
+                INSERT INTO chat_messages (node_id, role, content, image_url, provider, model, created_at, updated_at)
+                SELECT node.id, @role, @content, @imageUrl, @provider, @model, UTC_TIMESTAMP(), UTC_TIMESTAMP()
+                FROM chat_nodes node
+                INNER JOIN chat_sessions session ON session.id = node.session_id
+                WHERE session.user_id = @userId
+                  AND session.id = @sessionId
+                  AND node.id = @nodeId
+                """,
+                conn,
+                (MySqlTransaction)tx);
+            insert.Parameters.AddWithValue("@userId", userId);
+            insert.Parameters.AddWithValue("@sessionId", sessionId);
+            insert.Parameters.AddWithValue("@nodeId", nodeId);
+            insert.Parameters.AddWithValue("@role", role);
+            insert.Parameters.AddWithValue("@content", content);
+            insert.Parameters.AddWithValue("@imageUrl", (object?)imageUrl ?? DBNull.Value);
+            insert.Parameters.AddWithValue("@provider", (object?)provider ?? DBNull.Value);
+            insert.Parameters.AddWithValue("@model", (object?)model ?? DBNull.Value);
+            var rows = await insert.ExecuteNonQueryAsync();
+            if (rows == 0)
+                throw new InvalidOperationException("Chat message creation did not persist.");
+
+            using var touchNode = new MySqlCommand(
+                """
+                UPDATE chat_nodes node
+                INNER JOIN chat_sessions session ON session.id = node.session_id
+                SET node.updated_at = UTC_TIMESTAMP()
+                WHERE session.user_id = @userId
+                  AND session.id = @sessionId
+                  AND node.id = @nodeId
+                """,
+                conn,
+                (MySqlTransaction)tx);
+            touchNode.Parameters.AddWithValue("@userId", userId);
+            touchNode.Parameters.AddWithValue("@sessionId", sessionId);
+            touchNode.Parameters.AddWithValue("@nodeId", nodeId);
+            await touchNode.ExecuteNonQueryAsync();
+
+            using var touchSession = new MySqlCommand(
+                """
+                UPDATE chat_sessions
+                SET updated_at = UTC_TIMESTAMP()
+                WHERE user_id = @userId AND id = @sessionId
+                """,
+                conn,
+                (MySqlTransaction)tx);
+            touchSession.Parameters.AddWithValue("@userId", userId);
+            touchSession.Parameters.AddWithValue("@sessionId", sessionId);
+            await touchSession.ExecuteNonQueryAsync();
+
+            await tx.CommitAsync();
+            return (await GetNodeMessageAsync(userId, sessionId, nodeId, Convert.ToInt32(insert.LastInsertedId)))
+                ?? throw new InvalidOperationException("Created chat message could not be reloaded.");
+        }
+        catch
+        {
+            await tx.RollbackAsync();
+            throw;
+        }
+    }
+
+    public async Task<ChatMessage> UpdateMessageAsync(int userId, int sessionId, int nodeId, int messageId, string content)
+    {
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+        using var tx = await conn.BeginTransactionAsync();
+
+        try
+        {
+            using var update = new MySqlCommand(
+                """
+                UPDATE chat_messages message
+                INNER JOIN chat_nodes node ON node.id = message.node_id
+                INNER JOIN chat_sessions session ON session.id = node.session_id
+                SET message.content = @content,
+                    message.updated_at = UTC_TIMESTAMP()
+                WHERE session.user_id = @userId
+                  AND session.id = @sessionId
+                  AND node.id = @nodeId
+                  AND message.id = @messageId
+                """,
+                conn,
+                (MySqlTransaction)tx);
+            update.Parameters.AddWithValue("@userId", userId);
+            update.Parameters.AddWithValue("@sessionId", sessionId);
+            update.Parameters.AddWithValue("@nodeId", nodeId);
+            update.Parameters.AddWithValue("@messageId", messageId);
+            update.Parameters.AddWithValue("@content", content);
+
+            var rows = await update.ExecuteNonQueryAsync();
+            if (rows == 0)
+                throw new InvalidOperationException("Chat message update did not persist.");
+
+            using var touchNode = new MySqlCommand(
+                """
+                UPDATE chat_nodes node
+                INNER JOIN chat_sessions session ON session.id = node.session_id
+                SET node.updated_at = UTC_TIMESTAMP()
+                WHERE session.user_id = @userId
+                  AND session.id = @sessionId
+                  AND node.id = @nodeId
+                """,
+                conn,
+                (MySqlTransaction)tx);
+            touchNode.Parameters.AddWithValue("@userId", userId);
+            touchNode.Parameters.AddWithValue("@sessionId", sessionId);
+            touchNode.Parameters.AddWithValue("@nodeId", nodeId);
+            await touchNode.ExecuteNonQueryAsync();
+
+            using var touchSession = new MySqlCommand(
+                """
+                UPDATE chat_sessions
+                SET updated_at = UTC_TIMESTAMP()
+                WHERE user_id = @userId AND id = @sessionId
+                """,
+                conn,
+                (MySqlTransaction)tx);
+            touchSession.Parameters.AddWithValue("@userId", userId);
+            touchSession.Parameters.AddWithValue("@sessionId", sessionId);
+            await touchSession.ExecuteNonQueryAsync();
+
+            await tx.CommitAsync();
+            return await GetNodeMessageAsync(userId, sessionId, nodeId, messageId)
+                ?? throw new InvalidOperationException("Updated chat message could not be reloaded.");
+        }
+        catch
+        {
+            await tx.RollbackAsync();
+            throw;
+        }
+    }
+
+    public async Task ReassignMessagesAsync(int userId, int sessionId, int sourceNodeId, int targetNodeId, IReadOnlyList<int> messageIds)
+    {
+        if (messageIds.Count == 0)
+            return;
+
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+        using var tx = await conn.BeginTransactionAsync();
+
+        try
+        {
+            var placeholders = new List<string>(messageIds.Count);
+            using var update = new MySqlCommand
+            {
+                Connection = conn,
+                Transaction = (MySqlTransaction)tx
+            };
+
+            for (var index = 0; index < messageIds.Count; index++)
+            {
+                var parameterName = $"@messageId{index}";
+                placeholders.Add(parameterName);
+                update.Parameters.AddWithValue(parameterName, messageIds[index]);
+            }
+
+            update.CommandText =
+                $"""
+                UPDATE chat_messages message
+                INNER JOIN chat_nodes source_node ON source_node.id = message.node_id
+                INNER JOIN chat_sessions session ON session.id = source_node.session_id
+                INNER JOIN chat_nodes target_node ON target_node.id = @targetNodeId AND target_node.session_id = session.id
+                SET message.node_id = @targetNodeId,
+                    message.updated_at = UTC_TIMESTAMP()
+                WHERE session.user_id = @userId
+                  AND session.id = @sessionId
+                  AND source_node.id = @sourceNodeId
+                  AND message.id IN ({string.Join(", ", placeholders)})
+                """;
+            update.Parameters.AddWithValue("@userId", userId);
+            update.Parameters.AddWithValue("@sessionId", sessionId);
+            update.Parameters.AddWithValue("@sourceNodeId", sourceNodeId);
+            update.Parameters.AddWithValue("@targetNodeId", targetNodeId);
+
+            var movedRows = await update.ExecuteNonQueryAsync();
+            if (movedRows != messageIds.Count)
+                throw new InvalidOperationException("Message reassignment was incomplete.");
+
+            using var touchSourceNode = new MySqlCommand(
+                """
+                UPDATE chat_nodes node
+                INNER JOIN chat_sessions session ON session.id = node.session_id
+                SET node.updated_at = UTC_TIMESTAMP()
+                WHERE session.user_id = @userId
+                  AND session.id = @sessionId
+                  AND node.id = @sourceNodeId
+                """,
+                conn,
+                (MySqlTransaction)tx);
+            touchSourceNode.Parameters.AddWithValue("@userId", userId);
+            touchSourceNode.Parameters.AddWithValue("@sessionId", sessionId);
+            touchSourceNode.Parameters.AddWithValue("@sourceNodeId", sourceNodeId);
+            await touchSourceNode.ExecuteNonQueryAsync();
+
+            using var touchTargetNode = new MySqlCommand(
+                """
+                UPDATE chat_nodes node
+                INNER JOIN chat_sessions session ON session.id = node.session_id
+                SET node.updated_at = UTC_TIMESTAMP()
+                WHERE session.user_id = @userId
+                  AND session.id = @sessionId
+                  AND node.id = @targetNodeId
+                """,
+                conn,
+                (MySqlTransaction)tx);
+            touchTargetNode.Parameters.AddWithValue("@userId", userId);
+            touchTargetNode.Parameters.AddWithValue("@sessionId", sessionId);
+            touchTargetNode.Parameters.AddWithValue("@targetNodeId", targetNodeId);
+            await touchTargetNode.ExecuteNonQueryAsync();
+
+            using var touchSession = new MySqlCommand(
+                """
+                UPDATE chat_sessions
+                SET updated_at = UTC_TIMESTAMP()
+                WHERE user_id = @userId AND id = @sessionId
+                """,
+                conn,
+                (MySqlTransaction)tx);
+            touchSession.Parameters.AddWithValue("@userId", userId);
+            touchSession.Parameters.AddWithValue("@sessionId", sessionId);
+            await touchSession.ExecuteNonQueryAsync();
+
+            await tx.CommitAsync();
+        }
+        catch
+        {
+            await tx.RollbackAsync();
+            throw;
+        }
+    }
+
+    private async Task<ChatNode?> GetRootNodeAsync(int userId, int sessionId)
+    {
+        using var conn = new MySqlConnection(_conn);
+        await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
+        using var cmd = new MySqlCommand(
+            """
+            SELECT node.id, node.session_id, node.parent_node_id, node.branch_from_message_id, node.node_type, node.title, node.preview, node.content, node.position_x, node.position_y, node.width, node.height, node.is_collapsed, node.expanded_width, node.expanded_height, node.preferred_provider, node.preferred_model, node.context_boundary_message_id, node.context_snapshot_json, node.context_snapshot_updated_at, node.sibling_order, node.created_at, node.updated_at
+            FROM chat_nodes node
+            INNER JOIN chat_sessions session ON session.id = node.session_id
+            WHERE session.user_id = @userId
+              AND session.id = @sessionId
+              AND node.parent_node_id IS NULL
+            LIMIT 1
+            """,
+            conn);
+        cmd.Parameters.AddWithValue("@userId", userId);
+        cmd.Parameters.AddWithValue("@sessionId", sessionId);
+
+        using var reader = await cmd.ExecuteReaderAsync();
+        if (await reader.ReadAsync())
+            return MapNode((MySqlDataReader)reader);
+
+        return null;
+    }
+
+    private static ChatSession MapSession(MySqlDataReader reader)
+    {
+        return new ChatSession
+        {
+            Id = reader.GetInt32("id"),
+            UserId = reader.GetInt32("user_id"),
+            Title = reader.GetString("title"),
+            CreatedAt = reader.GetDateTime("created_at"),
+            UpdatedAt = reader.GetDateTime("updated_at")
+        };
+    }
+
+    private static ChatNode MapNode(MySqlDataReader reader)
+    {
+        var parentNodeOrdinal = reader.GetOrdinal("parent_node_id");
+        var branchFromMessageOrdinal = reader.GetOrdinal("branch_from_message_id");
+        var isCollapsedOrdinal = reader.GetOrdinal("is_collapsed");
+        var expandedWidthOrdinal = reader.GetOrdinal("expanded_width");
+        var expandedHeightOrdinal = reader.GetOrdinal("expanded_height");
+        var preferredProviderOrdinal = reader.GetOrdinal("preferred_provider");
+        var preferredModelOrdinal = reader.GetOrdinal("preferred_model");
+        var contextBoundaryOrdinal = reader.GetOrdinal("context_boundary_message_id");
+        var contextSnapshotOrdinal = reader.GetOrdinal("context_snapshot_json");
+        var contextSnapshotUpdatedOrdinal = reader.GetOrdinal("context_snapshot_updated_at");
+
+        return new ChatNode
+        {
+            Id = reader.GetInt32("id"),
+            SessionId = reader.GetInt32("session_id"),
+            ParentNodeId = reader.IsDBNull(parentNodeOrdinal) ? null : reader.GetInt32(parentNodeOrdinal),
+            BranchFromMessageId = reader.IsDBNull(branchFromMessageOrdinal) ? null : reader.GetInt32(branchFromMessageOrdinal),
+            NodeType = reader.GetString("node_type"),
+            Title = reader.GetString("title"),
+            Preview = reader.GetString("preview"),
+            Content = reader.GetString("content"),
+            PositionX = reader.GetDouble("position_x"),
+            PositionY = reader.GetDouble("position_y"),
+            Width = reader.GetDouble("width"),
+            Height = reader.GetDouble("height"),
+            IsCollapsed = reader.GetBoolean(isCollapsedOrdinal),
+            ExpandedWidth = reader.IsDBNull(expandedWidthOrdinal) ? null : reader.GetDouble(expandedWidthOrdinal),
+            ExpandedHeight = reader.IsDBNull(expandedHeightOrdinal) ? null : reader.GetDouble(expandedHeightOrdinal),
+            PreferredProvider = reader.IsDBNull(preferredProviderOrdinal) ? null : reader.GetString(preferredProviderOrdinal),
+            PreferredModel = reader.IsDBNull(preferredModelOrdinal) ? null : reader.GetString(preferredModelOrdinal),
+            ContextBoundaryMessageId = reader.IsDBNull(contextBoundaryOrdinal) ? null : reader.GetInt32(contextBoundaryOrdinal),
+            ContextSnapshotJson = reader.IsDBNull(contextSnapshotOrdinal) ? null : reader.GetString(contextSnapshotOrdinal),
+            ContextSnapshotUpdatedAt = reader.IsDBNull(contextSnapshotUpdatedOrdinal) ? null : reader.GetDateTime(contextSnapshotUpdatedOrdinal),
+            SiblingOrder = reader.GetInt32("sibling_order"),
+            CreatedAt = reader.GetDateTime("created_at"),
+            UpdatedAt = reader.GetDateTime("updated_at")
+        };
+    }
+
+    private static ChatMessage MapMessage(MySqlDataReader reader)
+    {
+        var imageUrlOrdinal = reader.GetOrdinal("image_url");
+        var providerOrdinal = reader.GetOrdinal("provider");
+        var modelOrdinal = reader.GetOrdinal("model");
+
+        return new ChatMessage
+        {
+            Id = reader.GetInt32("id"),
+            NodeId = reader.GetInt32("node_id"),
+            Role = reader.GetString("role"),
+            Content = reader.GetString("content"),
+            ImageUrl = reader.IsDBNull(imageUrlOrdinal) ? null : reader.GetString(imageUrlOrdinal),
+            Provider = reader.IsDBNull(providerOrdinal) ? null : reader.GetString(providerOrdinal),
+            Model = reader.IsDBNull(modelOrdinal) ? null : reader.GetString(modelOrdinal),
+            CreatedAt = reader.GetDateTime("created_at"),
+            UpdatedAt = reader.GetDateTime("updated_at")
+        };
+    }
+
+    private static async Task EnsureSchemaAsync(MySqlConnection conn)
+    {
+        using var sessionsCmd = new MySqlCommand(
+            """
+            CREATE TABLE IF NOT EXISTS chat_sessions (
+                id          INT AUTO_INCREMENT PRIMARY KEY,
+                user_id     INT           NOT NULL,
+                title       VARCHAR(120)  NOT NULL,
+                created_at  TIMESTAMP     NOT NULL DEFAULT CURRENT_TIMESTAMP,
+                updated_at  TIMESTAMP     NOT NULL DEFAULT CURRENT_TIMESTAMP,
+                FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
+                INDEX idx_chat_sessions_user_updated (user_id, updated_at, id)
+            )
+            """,
+            conn);
+        await sessionsCmd.ExecuteNonQueryAsync();
+
+        using var nodesCmd = new MySqlCommand(
+            """
+            CREATE TABLE IF NOT EXISTS chat_nodes (
+                id                     INT AUTO_INCREMENT PRIMARY KEY,
+                session_id             INT            NOT NULL,
+                parent_node_id         INT            NULL,
+                branch_from_message_id INT            NULL,
+                node_type              VARCHAR(24)    NOT NULL DEFAULT 'question',
+                title                  VARCHAR(160)   NOT NULL,
+                preview                VARCHAR(280)   NOT NULL DEFAULT '',
+                content                MEDIUMTEXT     NOT NULL,
+                position_x             DOUBLE         NOT NULL DEFAULT 0,
+                position_y             DOUBLE         NOT NULL DEFAULT 0,
+                width                  DOUBLE         NOT NULL DEFAULT 600,
+                height                 DOUBLE         NOT NULL DEFAULT 520,
+                is_collapsed           TINYINT(1)     NOT NULL DEFAULT 0,
+                expanded_width         DOUBLE         NULL,
+                expanded_height        DOUBLE         NULL,
+                preferred_provider     VARCHAR(32)    NULL,
+                preferred_model        VARCHAR(120)   NULL,
+                context_boundary_message_id INT       NULL,
+                context_snapshot_json  MEDIUMTEXT     NULL,
+                context_snapshot_updated_at TIMESTAMP NULL,
+                sibling_order          INT            NOT NULL DEFAULT 0,
+                created_at             TIMESTAMP      NOT NULL DEFAULT CURRENT_TIMESTAMP,
+                updated_at             TIMESTAMP      NOT NULL DEFAULT CURRENT_TIMESTAMP,
+                FOREIGN KEY (session_id) REFERENCES chat_sessions(id) ON DELETE CASCADE,
+                FOREIGN KEY (parent_node_id) REFERENCES chat_nodes(id) ON DELETE CASCADE,
+                INDEX idx_chat_nodes_session_parent (session_id, parent_node_id, sibling_order, id),
+                INDEX idx_chat_nodes_branch_message (branch_from_message_id)
+            )
+            """,
+            conn);
+        await nodesCmd.ExecuteNonQueryAsync();
+
+        await EnsureColumnAsync(
+            conn,
+            "chat_nodes",
+            "node_type",
+            """
+            ALTER TABLE chat_nodes
+            ADD COLUMN node_type VARCHAR(24) NOT NULL DEFAULT 'question' AFTER branch_from_message_id
+            """);
+
+        await EnsureColumnAsync(
+            conn,
+            "chat_nodes",
+            "content",
+            """
+            ALTER TABLE chat_nodes
+            ADD COLUMN content MEDIUMTEXT NOT NULL DEFAULT '' AFTER preview
+            """);
+
+        await EnsureColumnAsync(
+            conn,
+            "chat_nodes",
+            "width",
+            """
+            ALTER TABLE chat_nodes
+            ADD COLUMN width DOUBLE NOT NULL DEFAULT 600 AFTER position_y
+            """);
+
+        await EnsureColumnAsync(
+            conn,
+            "chat_nodes",
+            "height",
+            """
+            ALTER TABLE chat_nodes
+            ADD COLUMN height DOUBLE NOT NULL DEFAULT 520 AFTER width
+            """);
+
+        await EnsureColumnAsync(
+            conn,
+            "chat_nodes",
+            "is_collapsed",
+            """
+            ALTER TABLE chat_nodes
+            ADD COLUMN is_collapsed TINYINT(1) NOT NULL DEFAULT 0 AFTER height
+            """);
+
+        await EnsureColumnAsync(
+            conn,
+            "chat_nodes",
+            "expanded_width",
+            """
+            ALTER TABLE chat_nodes
+            ADD COLUMN expanded_width DOUBLE NULL AFTER is_collapsed
+            """);
+
+        await EnsureColumnAsync(
+            conn,
+            "chat_nodes",
+            "expanded_height",
+            """
+            ALTER TABLE chat_nodes
+            ADD COLUMN expanded_height DOUBLE NULL AFTER expanded_width
+            """);
+
+        await EnsureColumnAsync(
+            conn,
+            "chat_nodes",
+            "preferred_provider",
+            """
+            ALTER TABLE chat_nodes
+            ADD COLUMN preferred_provider VARCHAR(32) NULL AFTER expanded_height
+            """);
+
+        await EnsureColumnAsync(
+            conn,
+            "chat_nodes",
+            "preferred_model",
+            """
+            ALTER TABLE chat_nodes
+            ADD COLUMN preferred_model VARCHAR(120) NULL AFTER preferred_provider
+            """);
+
+        await EnsureColumnAsync(
+            conn,
+            "chat_nodes",
+            "context_boundary_message_id",
+            """
+            ALTER TABLE chat_nodes
+            ADD COLUMN context_boundary_message_id INT NULL AFTER preferred_model
+            """);
+
+        await EnsureColumnAsync(
+            conn,
+            "chat_nodes",
+            "context_snapshot_json",
+            """
+            ALTER TABLE chat_nodes
+            ADD COLUMN context_snapshot_json MEDIUMTEXT NULL AFTER context_boundary_message_id
+            """);
+
+        await EnsureColumnAsync(
+            conn,
+            "chat_nodes",
+            "context_snapshot_updated_at",
+            """
+            ALTER TABLE chat_nodes
+            ADD COLUMN context_snapshot_updated_at TIMESTAMP NULL AFTER context_snapshot_json
+            """);
+
+        using var backfillNodeTypesCmd = new MySqlCommand(
+            """
+            UPDATE chat_nodes
+            SET node_type = CASE
+                WHEN parent_node_id IS NULL THEN 'question'
+                WHEN branch_from_message_id IS NOT NULL THEN 'response'
+                ELSE node_type
+            END
+            WHERE parent_node_id IS NULL
+               OR branch_from_message_id IS NOT NULL
+            """,
+            conn);
+        await backfillNodeTypesCmd.ExecuteNonQueryAsync();
+
+        using var backfillNoteExpansionCmd = new MySqlCommand(
+            """
+            UPDATE chat_nodes
+            SET is_collapsed = COALESCE(is_collapsed, 0),
+                expanded_width = COALESCE(expanded_width, width),
+                expanded_height = COALESCE(expanded_height, height)
+            WHERE node_type = 'note'
+            """,
+            conn);
+        await backfillNoteExpansionCmd.ExecuteNonQueryAsync();
+
+        using var messagesCmd = new MySqlCommand(
+            """
+            CREATE TABLE IF NOT EXISTS chat_messages (
+                id          INT AUTO_INCREMENT PRIMARY KEY,
+                node_id      INT          NOT NULL,
+                role         VARCHAR(16)  NOT NULL,
+                content      MEDIUMTEXT   NOT NULL,
+                image_url    MEDIUMTEXT   NULL,
+                provider     VARCHAR(32)  NULL,
+                model        VARCHAR(120) NULL,
+                created_at   TIMESTAMP    NOT NULL DEFAULT CURRENT_TIMESTAMP,
+                updated_at   TIMESTAMP    NOT NULL DEFAULT CURRENT_TIMESTAMP,
+                FOREIGN KEY (node_id) REFERENCES chat_nodes(id) ON DELETE CASCADE,
+                INDEX idx_chat_messages_node_order (node_id, id)
+            )
+            """,
+            conn);
+        await messagesCmd.ExecuteNonQueryAsync();
+
+        await EnsureColumnAsync(
+            conn,
+            "chat_messages",
+            "image_url",
+            """
+            ALTER TABLE chat_messages
+            ADD COLUMN image_url MEDIUMTEXT NULL AFTER content
+            """);
+
+        await EnsureColumnAsync(
+            conn,
+            "chat_messages",
+            "updated_at",
+            """
+            ALTER TABLE chat_messages
+            ADD COLUMN updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP AFTER created_at
+            """);
+    }
+
+    private static async Task EnsureColumnAsync(MySqlConnection conn, string tableName, string columnName, string alterStatement)
+    {
+        if (await ColumnExistsAsync(conn, tableName, columnName))
+            return;
+
+        using var alterCmd = new MySqlCommand(alterStatement, conn);
+        await alterCmd.ExecuteNonQueryAsync();
+    }
+
+    private static async Task<bool> ColumnExistsAsync(MySqlConnection conn, string tableName, string columnName)
+    {
+        using var cmd = new MySqlCommand(
+            """
+            SELECT COUNT(*)
+            FROM information_schema.columns
+            WHERE table_schema = DATABASE()
+              AND table_name = @tableName
+              AND column_name = @columnName
+            """,
+            conn);
+        cmd.Parameters.AddWithValue("@tableName", tableName);
+        cmd.Parameters.AddWithValue("@columnName", columnName);
+
+        var count = Convert.ToInt32(await cmd.ExecuteScalarAsync());
+        return count > 0;
+    }
+}
diff --git a/backend/Coliee.API/Data/ICanvasRepository.cs b/backend/Coliee.API/Data/ICanvasRepository.cs
index 827806a..909d642 100644
--- a/backend/Coliee.API/Data/ICanvasRepository.cs
+++ b/backend/Coliee.API/Data/ICanvasRepository.cs
@@ -14,5 +14,6 @@ public interface ICanvasRepository
     Task<CanvasNode> EnsureRootCanvasNodeAsync(int userId, int canvasId);
     Task<IReadOnlyList<CanvasNode>> GetCanvasNodesAsync(int userId, int canvasId);
     Task<CanvasNode?> GetCanvasNodeAsync(int userId, int canvasId, int nodeId);
+    Task<CanvasNode> UpdateCanvasNodeAsync(int userId, int canvasId, int nodeId, CanvasNodeUpdateInput node);
     Task<IReadOnlyList<CanvasNode>> AddChildCanvasNodesAsync(int userId, int canvasId, int parentNodeId, IReadOnlyList<CanvasNodeCreateInput> nodes);
 }
diff --git a/backend/Coliee.API/Data/IChatSessionRepository.cs b/backend/Coliee.API/Data/IChatSessionRepository.cs
new file mode 100644
index 0000000..b1b552b
--- /dev/null
+++ b/backend/Coliee.API/Data/IChatSessionRepository.cs
@@ -0,0 +1,27 @@
+using Coliee.API.Models;
+using Coliee.API.Services;
+
+namespace Coliee.API.Data;
+
+public interface IChatSessionRepository
+{
+    Task<ChatSession> CreateSessionAsync(int userId, string title);
+    Task<IReadOnlyList<ChatSession>> GetSessionsAsync(int userId);
+    Task<ChatSession?> GetSessionAsync(int userId, int sessionId);
+    Task<ChatSession> RenameSessionAsync(int userId, int sessionId, string title);
+    Task DeleteSessionAsync(int userId, int sessionId);
+    Task<ChatNode> EnsureRootNodeAsync(int userId, int sessionId, string title);
+    Task<IReadOnlyList<ChatNode>> GetNodesAsync(int userId, int sessionId);
+    Task<ChatNode?> GetNodeAsync(int userId, int sessionId, int nodeId);
+    Task<ChatNode> CreateNodeAsync(int userId, int sessionId, ChatNodeCreateInput node);
+    Task<ChatNode> UpdateNodeAsync(int userId, int sessionId, int nodeId, ChatNodeUpdateInput node);
+    Task<ChatNodeContextSnapshot?> GetNodeContextSnapshotAsync(int userId, int sessionId, int nodeId);
+    Task<ChatNode> UpdateNodeContextSnapshotAsync(int userId, int sessionId, int nodeId, int boundaryMessageId, string snapshotJson);
+    Task SaveNodeLayoutsAsync(int userId, int sessionId, IReadOnlyList<ChatNodeLayoutUpdateInput> nodes);
+    Task<bool> DeleteNodeAsync(int userId, int sessionId, int nodeId);
+    Task<IReadOnlyList<ChatMessage>> GetNodeMessagesAsync(int userId, int sessionId, int nodeId);
+    Task<ChatMessage?> GetNodeMessageAsync(int userId, int sessionId, int nodeId, int messageId);
+    Task<ChatMessage> AddMessageAsync(int userId, int sessionId, int nodeId, string role, string content, string? imageUrl, string? provider, string? model);
+    Task<ChatMessage> UpdateMessageAsync(int userId, int sessionId, int nodeId, int messageId, string content);
+    Task ReassignMessagesAsync(int userId, int sessionId, int sourceNodeId, int targetNodeId, IReadOnlyList<int> messageIds);
+}
diff --git a/backend/Coliee.API/Data/LlmRepository.cs b/backend/Coliee.API/Data/LlmRepository.cs
index bdeb9a3..c5fa90e 100644
--- a/backend/Coliee.API/Data/LlmRepository.cs
+++ b/backend/Coliee.API/Data/LlmRepository.cs
@@ -18,12 +18,13 @@ public async Task<IReadOnlyList<LlmProviderKeyRecord>> GetProviderKeysAsync(int
 
         using var conn = new MySqlConnection(_conn);
         await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
         using var cmd = new MySqlCommand(
             """
             SELECT user_id, provider, encrypted_api_key, masked_last4, is_default, last_tested_at, created_at, updated_at
             FROM llm_provider_keys
             WHERE user_id = @userId
-            ORDER BY FIELD(provider, 'openai', 'claude', 'gemini')
+            ORDER BY FIELD(provider, 'openai', 'claude', 'gemini', 'lmstudio')
             """,
             conn);
         cmd.Parameters.AddWithValue("@userId", userId);
@@ -39,6 +40,7 @@ ORDER BY FIELD(provider, 'openai', 'claude', 'gemini')
     {
         using var conn = new MySqlConnection(_conn);
         await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
         using var cmd = new MySqlCommand(
             """
             SELECT user_id, provider, encrypted_api_key, masked_last4, is_default, last_tested_at, created_at, updated_at
@@ -60,6 +62,7 @@ public async Task UpsertProviderKeyAsync(int userId, string provider, string enc
     {
         using var conn = new MySqlConnection(_conn);
         await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
         using var cmd = new MySqlCommand(
             """
             INSERT INTO llm_provider_keys (user_id, provider, encrypted_api_key, masked_last4, is_default, created_at, updated_at)
@@ -82,6 +85,7 @@ public async Task DeleteProviderKeyAsync(int userId, string provider)
     {
         using var conn = new MySqlConnection(_conn);
         await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
         using var cmd = new MySqlCommand(
             "DELETE FROM llm_provider_keys WHERE user_id = @userId AND provider = @provider",
             conn);
@@ -94,6 +98,7 @@ public async Task SetDefaultProviderAsync(int userId, string? provider)
     {
         using var conn = new MySqlConnection(_conn);
         await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
         using var cmd = new MySqlCommand(
             """
             UPDATE llm_provider_keys
@@ -114,6 +119,7 @@ public async Task MarkProviderTestedAsync(int userId, string provider, DateTime
     {
         using var conn = new MySqlConnection(_conn);
         await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
         using var cmd = new MySqlCommand(
             """
             UPDATE llm_provider_keys
@@ -135,6 +141,7 @@ public async Task<int> GetOrCreateMainNodeConversationAsync(int userId, int canv
 
         using var conn = new MySqlConnection(_conn);
         await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
         using var cmd = new MySqlCommand(
             """
             INSERT INTO main_node_conversations (canvas_id, created_at, updated_at)
@@ -168,6 +175,7 @@ FROM canvases
     {
         using var conn = new MySqlConnection(_conn);
         await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
         using var cmd = new MySqlCommand(
             """
             SELECT conversation.id
@@ -190,6 +198,7 @@ public async Task<IReadOnlyList<MainNodeMessage>> GetMainNodeMessagesAsync(int u
 
         using var conn = new MySqlConnection(_conn);
         await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
         using var cmd = new MySqlCommand(
             """
             SELECT m.id, m.conversation_id, m.role, m.content, m.provider, m.model, m.created_at
@@ -216,6 +225,7 @@ public async Task<int> AddMainNodeMessageAsync(int userId, int canvasId, string
 
         using var conn = new MySqlConnection(_conn);
         await conn.OpenAsync();
+        await EnsureSchemaAsync(conn);
         using var tx = await conn.BeginTransactionAsync();
 
         try
@@ -302,4 +312,104 @@ private static MainNodeMessage MapMessage(MySqlDataReader reader)
             CreatedAt = reader.GetDateTime("created_at")
         };
     }
+
+    private static async Task EnsureSchemaAsync(MySqlConnection conn)
+    {
+        using var providerKeysCmd = new MySqlCommand(
+            """
+            CREATE TABLE IF NOT EXISTS llm_provider_keys (
+                user_id           INT           NOT NULL,
+                provider          VARCHAR(32)   NOT NULL,
+                encrypted_api_key MEDIUMTEXT    NOT NULL,
+                masked_last4      VARCHAR(16)   NOT NULL,
+                is_default        TINYINT(1)    NOT NULL DEFAULT 0,
+                last_tested_at    TIMESTAMP     NULL DEFAULT NULL,
+                created_at        TIMESTAMP     NOT NULL DEFAULT CURRENT_TIMESTAMP,
+                updated_at        TIMESTAMP     NOT NULL DEFAULT CURRENT_TIMESTAMP,
+                PRIMARY KEY (user_id, provider),
+                FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+            )
+            """,
+            conn);
+        await providerKeysCmd.ExecuteNonQueryAsync();
+
+        await EnsureColumnExistsAsync(conn, "llm_provider_keys", "encrypted_api_key", "MEDIUMTEXT NOT NULL", "provider");
+        await EnsureColumnExistsAsync(conn, "llm_provider_keys", "masked_last4", "VARCHAR(16) NOT NULL", "encrypted_api_key");
+        await EnsureColumnExistsAsync(conn, "llm_provider_keys", "is_default", "TINYINT(1) NOT NULL DEFAULT 0", "masked_last4");
+        await EnsureColumnExistsAsync(conn, "llm_provider_keys", "last_tested_at", "TIMESTAMP NULL DEFAULT NULL", "is_default");
+        await EnsureColumnExistsAsync(conn, "llm_provider_keys", "created_at", "TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP", "last_tested_at");
+        await EnsureColumnExistsAsync(conn, "llm_provider_keys", "updated_at", "TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP", "created_at");
+
+        using var conversationsCmd = new MySqlCommand(
+            """
+            CREATE TABLE IF NOT EXISTS main_node_conversations (
+                id          INT AUTO_INCREMENT PRIMARY KEY,
+                canvas_id   INT          NOT NULL,
+                created_at  TIMESTAMP    NOT NULL DEFAULT CURRENT_TIMESTAMP,
+                updated_at  TIMESTAMP    NOT NULL DEFAULT CURRENT_TIMESTAMP,
+                UNIQUE KEY uq_main_node_conversations_canvas (canvas_id),
+                FOREIGN KEY (canvas_id) REFERENCES canvases(id) ON DELETE CASCADE
+            )
+            """,
+            conn);
+        await conversationsCmd.ExecuteNonQueryAsync();
+
+        await EnsureColumnExistsAsync(conn, "main_node_conversations", "canvas_id", "INT NOT NULL", "id");
+        await EnsureColumnExistsAsync(conn, "main_node_conversations", "created_at", "TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP", "canvas_id");
+        await EnsureColumnExistsAsync(conn, "main_node_conversations", "updated_at", "TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP", "created_at");
+
+        using var messagesCmd = new MySqlCommand(
+            """
+            CREATE TABLE IF NOT EXISTS main_node_messages (
+                id              INT AUTO_INCREMENT PRIMARY KEY,
+                conversation_id  INT           NOT NULL,
+                role             VARCHAR(16)   NOT NULL,
+                content          MEDIUMTEXT    NOT NULL,
+                provider         VARCHAR(32)   NULL,
+                model            VARCHAR(120)  NULL,
+                created_at       TIMESTAMP     NOT NULL DEFAULT CURRENT_TIMESTAMP,
+                FOREIGN KEY (conversation_id) REFERENCES main_node_conversations(id) ON DELETE CASCADE,
+                INDEX idx_main_node_messages_conversation_order (conversation_id, id)
+            )
+            """,
+            conn);
+        await messagesCmd.ExecuteNonQueryAsync();
+
+        await EnsureColumnExistsAsync(conn, "main_node_messages", "conversation_id", "INT NOT NULL", "id");
+        await EnsureColumnExistsAsync(conn, "main_node_messages", "role", "VARCHAR(16) NOT NULL", "conversation_id");
+        await EnsureColumnExistsAsync(conn, "main_node_messages", "content", "MEDIUMTEXT NOT NULL", "role");
+        await EnsureColumnExistsAsync(conn, "main_node_messages", "provider", "VARCHAR(32) NULL", "content");
+        await EnsureColumnExistsAsync(conn, "main_node_messages", "model", "VARCHAR(120) NULL", "provider");
+        await EnsureColumnExistsAsync(conn, "main_node_messages", "created_at", "TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP", "model");
+    }
+
+    private static async Task EnsureColumnExistsAsync(
+        MySqlConnection conn,
+        string tableName,
+        string columnName,
+        string columnDefinition,
+        string? afterColumn = null)
+    {
+        using var existsCmd = new MySqlCommand(
+            """
+            SELECT COUNT(*)
+            FROM INFORMATION_SCHEMA.COLUMNS
+            WHERE TABLE_SCHEMA = DATABASE()
+              AND TABLE_NAME = @tableName
+              AND COLUMN_NAME = @columnName
+            """,
+            conn);
+        existsCmd.Parameters.AddWithValue("@tableName", tableName);
+        existsCmd.Parameters.AddWithValue("@columnName", columnName);
+
+        var exists = Convert.ToInt32(await existsCmd.ExecuteScalarAsync()) > 0;
+        if (exists)
+            return;
+
+        var placement = string.IsNullOrWhiteSpace(afterColumn) ? string.Empty : $" AFTER {afterColumn}";
+        using var alterCmd = new MySqlCommand(
+            $"ALTER TABLE {tableName} ADD COLUMN {columnName} {columnDefinition}{placement};",
+            conn);
+        await alterCmd.ExecuteNonQueryAsync();
+    }
 }
diff --git a/backend/Coliee.API/Migrations/006_canvas_node_generation_modes.sql b/backend/Coliee.API/Migrations/006_canvas_node_generation_modes.sql
new file mode 100644
index 0000000..c301097
--- /dev/null
+++ b/backend/Coliee.API/Migrations/006_canvas_node_generation_modes.sql
@@ -0,0 +1,84 @@
+SET @ddl = (
+    SELECT IF(
+        EXISTS(
+            SELECT 1
+            FROM INFORMATION_SCHEMA.COLUMNS
+            WHERE TABLE_SCHEMA = DATABASE()
+              AND TABLE_NAME = 'canvas_nodes'
+              AND COLUMN_NAME = 'generation_mode'
+        ),
+        'SELECT 1',
+        'ALTER TABLE canvas_nodes ADD COLUMN generation_mode VARCHAR(16) NOT NULL DEFAULT ''compact'' AFTER title'
+    )
+);
+PREPARE stmt FROM @ddl;
+EXECUTE stmt;
+DEALLOCATE PREPARE stmt;
+
+SET @ddl = (
+    SELECT IF(
+        EXISTS(
+            SELECT 1
+            FROM INFORMATION_SCHEMA.COLUMNS
+            WHERE TABLE_SCHEMA = DATABASE()
+              AND TABLE_NAME = 'canvas_nodes'
+              AND COLUMN_NAME = 'summary'
+        ),
+        'SELECT 1',
+        'ALTER TABLE canvas_nodes ADD COLUMN summary MEDIUMTEXT NULL AFTER generation_mode'
+    )
+);
+PREPARE stmt FROM @ddl;
+EXECUTE stmt;
+DEALLOCATE PREPARE stmt;
+
+SET @ddl = (
+    SELECT IF(
+        EXISTS(
+            SELECT 1
+            FROM INFORMATION_SCHEMA.COLUMNS
+            WHERE TABLE_SCHEMA = DATABASE()
+              AND TABLE_NAME = 'canvas_nodes'
+              AND COLUMN_NAME = 'category'
+        ),
+        'SELECT 1',
+        'ALTER TABLE canvas_nodes ADD COLUMN category VARCHAR(80) NULL AFTER summary'
+    )
+);
+PREPARE stmt FROM @ddl;
+EXECUTE stmt;
+DEALLOCATE PREPARE stmt;
+
+SET @ddl = (
+    SELECT IF(
+        EXISTS(
+            SELECT 1
+            FROM INFORMATION_SCHEMA.COLUMNS
+            WHERE TABLE_SCHEMA = DATABASE()
+              AND TABLE_NAME = 'canvas_nodes'
+              AND COLUMN_NAME = 'continuation_prompt'
+        ),
+        'SELECT 1',
+        'ALTER TABLE canvas_nodes ADD COLUMN continuation_prompt TEXT NULL AFTER source_prompt'
+    )
+);
+PREPARE stmt FROM @ddl;
+EXECUTE stmt;
+DEALLOCATE PREPARE stmt;
+
+SET @ddl = (
+    SELECT IF(
+        EXISTS(
+            SELECT 1
+            FROM INFORMATION_SCHEMA.COLUMNS
+            WHERE TABLE_SCHEMA = DATABASE()
+              AND TABLE_NAME = 'canvas_nodes'
+              AND COLUMN_NAME = 'details_json'
+        ),
+        'SELECT 1',
+        'ALTER TABLE canvas_nodes ADD COLUMN details_json JSON NULL AFTER continuation_prompt'
+    )
+);
+PREPARE stmt FROM @ddl;
+EXECUTE stmt;
+DEALLOCATE PREPARE stmt;
diff --git a/backend/Coliee.API/Migrations/007_chat_sessions.sql b/backend/Coliee.API/Migrations/007_chat_sessions.sql
new file mode 100644
index 0000000..f9fff1b
--- /dev/null
+++ b/backend/Coliee.API/Migrations/007_chat_sessions.sql
@@ -0,0 +1,39 @@
+CREATE TABLE IF NOT EXISTS chat_sessions (
+    id          INT AUTO_INCREMENT PRIMARY KEY,
+    user_id     INT           NOT NULL,
+    title       VARCHAR(120)  NOT NULL,
+    created_at  TIMESTAMP     NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at  TIMESTAMP     NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
+    INDEX idx_chat_sessions_user_updated (user_id, updated_at, id)
+);
+
+CREATE TABLE IF NOT EXISTS chat_nodes (
+    id                     INT AUTO_INCREMENT PRIMARY KEY,
+    session_id             INT            NOT NULL,
+    parent_node_id         INT            NULL,
+    branch_from_message_id INT            NULL,
+    title                  VARCHAR(160)   NOT NULL,
+    preview                VARCHAR(280)   NOT NULL DEFAULT '',
+    position_x             DOUBLE         NOT NULL DEFAULT 0,
+    position_y             DOUBLE         NOT NULL DEFAULT 0,
+    sibling_order          INT            NOT NULL DEFAULT 0,
+    created_at             TIMESTAMP      NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at             TIMESTAMP      NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (session_id) REFERENCES chat_sessions(id) ON DELETE CASCADE,
+    FOREIGN KEY (parent_node_id) REFERENCES chat_nodes(id) ON DELETE CASCADE,
+    INDEX idx_chat_nodes_session_parent (session_id, parent_node_id, sibling_order, id),
+    INDEX idx_chat_nodes_branch_message (branch_from_message_id)
+);
+
+CREATE TABLE IF NOT EXISTS chat_messages (
+    id          INT AUTO_INCREMENT PRIMARY KEY,
+    node_id      INT          NOT NULL,
+    role         VARCHAR(16)  NOT NULL,
+    content      MEDIUMTEXT   NOT NULL,
+    provider     VARCHAR(32)  NULL,
+    model        VARCHAR(120) NULL,
+    created_at   TIMESTAMP    NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (node_id) REFERENCES chat_nodes(id) ON DELETE CASCADE,
+    INDEX idx_chat_messages_node_order (node_id, id)
+);
diff --git a/backend/Coliee.API/Models/CanvasGenerationModes.cs b/backend/Coliee.API/Models/CanvasGenerationModes.cs
new file mode 100644
index 0000000..ebfda43
--- /dev/null
+++ b/backend/Coliee.API/Models/CanvasGenerationModes.cs
@@ -0,0 +1,18 @@
+namespace Coliee.API.Models;
+
+public static class CanvasGenerationModes
+{
+    public const string Compact = "compact";
+    public const string Rich = "rich";
+
+    public static readonly IReadOnlyList<string> Ordered = [Compact, Rich];
+
+    public static string Normalize(string? mode)
+    {
+        if (string.IsNullOrWhiteSpace(mode))
+            return Compact;
+
+        var normalized = mode.Trim().ToLowerInvariant();
+        return Ordered.Contains(normalized, StringComparer.Ordinal) ? normalized : Compact;
+    }
+}
diff --git a/backend/Coliee.API/Models/CanvasNode.cs b/backend/Coliee.API/Models/CanvasNode.cs
index 1da8d3f..f6deb42 100644
--- a/backend/Coliee.API/Models/CanvasNode.cs
+++ b/backend/Coliee.API/Models/CanvasNode.cs
@@ -7,8 +7,14 @@ public class CanvasNode
     public int? ParentNodeId { get; set; }
     public string Kind { get; set; } = string.Empty;
     public string Title { get; set; } = string.Empty;
+    public string GenerationMode { get; set; } = CanvasGenerationModes.Compact;
+    public string? Summary { get; set; }
+    public string? Category { get; set; }
     public string Content { get; set; } = string.Empty;
     public string? SourcePrompt { get; set; }
+    public string? ContinuationPrompt { get; set; }
+    public List<CanvasNodeBlock> Blocks { get; set; } = [];
+    public List<CanvasNodeSource> Sources { get; set; } = [];
     public int Depth { get; set; }
     public int SiblingOrder { get; set; }
     public DateTime CreatedAt { get; set; }
diff --git a/backend/Coliee.API/Models/CanvasNodeBlock.cs b/backend/Coliee.API/Models/CanvasNodeBlock.cs
new file mode 100644
index 0000000..2640570
--- /dev/null
+++ b/backend/Coliee.API/Models/CanvasNodeBlock.cs
@@ -0,0 +1,8 @@
+namespace Coliee.API.Models;
+
+public class CanvasNodeBlock
+{
+    public string Type { get; set; } = string.Empty;
+    public string Text { get; set; } = string.Empty;
+    public List<string> Options { get; set; } = [];
+}
diff --git a/backend/Coliee.API/Models/CanvasNodeCreateInput.cs b/backend/Coliee.API/Models/CanvasNodeCreateInput.cs
index 0b2d6e2..4c05e20 100644
--- a/backend/Coliee.API/Models/CanvasNodeCreateInput.cs
+++ b/backend/Coliee.API/Models/CanvasNodeCreateInput.cs
@@ -4,7 +4,13 @@ public class CanvasNodeCreateInput
 {
     public string Kind { get; set; } = string.Empty;
     public string Title { get; set; } = string.Empty;
+    public string GenerationMode { get; set; } = CanvasGenerationModes.Compact;
+    public string? Summary { get; set; }
+    public string? Category { get; set; }
     public string Content { get; set; } = string.Empty;
     public string? SourcePrompt { get; set; }
+    public string? ContinuationPrompt { get; set; }
+    public List<CanvasNodeBlock> Blocks { get; set; } = [];
+    public List<CanvasNodeSource> Sources { get; set; } = [];
     public int Depth { get; set; }
 }
diff --git a/backend/Coliee.API/Models/CanvasNodeSource.cs b/backend/Coliee.API/Models/CanvasNodeSource.cs
new file mode 100644
index 0000000..4be1af3
--- /dev/null
+++ b/backend/Coliee.API/Models/CanvasNodeSource.cs
@@ -0,0 +1,7 @@
+namespace Coliee.API.Models;
+
+public class CanvasNodeSource
+{
+    public string Label { get; set; } = string.Empty;
+    public string Url { get; set; } = string.Empty;
+}
diff --git a/backend/Coliee.API/Models/CanvasNodeUpdateInput.cs b/backend/Coliee.API/Models/CanvasNodeUpdateInput.cs
new file mode 100644
index 0000000..28f9083
--- /dev/null
+++ b/backend/Coliee.API/Models/CanvasNodeUpdateInput.cs
@@ -0,0 +1,13 @@
+namespace Coliee.API.Models;
+
+public class CanvasNodeUpdateInput
+{
+    public string GenerationMode { get; set; } = CanvasGenerationModes.Compact;
+    public string? Summary { get; set; }
+    public string? Category { get; set; }
+    public string Content { get; set; } = string.Empty;
+    public string? SourcePrompt { get; set; }
+    public string? ContinuationPrompt { get; set; }
+    public List<CanvasNodeBlock> Blocks { get; set; } = [];
+    public List<CanvasNodeSource> Sources { get; set; } = [];
+}
diff --git a/backend/Coliee.API/Models/ChatMessage.cs b/backend/Coliee.API/Models/ChatMessage.cs
new file mode 100644
index 0000000..e848568
--- /dev/null
+++ b/backend/Coliee.API/Models/ChatMessage.cs
@@ -0,0 +1,14 @@
+namespace Coliee.API.Models;
+
+public class ChatMessage
+{
+    public int Id { get; set; }
+    public int NodeId { get; set; }
+    public string Role { get; set; } = string.Empty;
+    public string Content { get; set; } = string.Empty;
+    public string? ImageUrl { get; set; }
+    public string? Provider { get; set; }
+    public string? Model { get; set; }
+    public DateTime CreatedAt { get; set; }
+    public DateTime UpdatedAt { get; set; }
+}
diff --git a/backend/Coliee.API/Models/ChatNode.cs b/backend/Coliee.API/Models/ChatNode.cs
new file mode 100644
index 0000000..46a92e7
--- /dev/null
+++ b/backend/Coliee.API/Models/ChatNode.cs
@@ -0,0 +1,28 @@
+namespace Coliee.API.Models;
+
+public class ChatNode
+{
+    public int Id { get; set; }
+    public int SessionId { get; set; }
+    public int? ParentNodeId { get; set; }
+    public int? BranchFromMessageId { get; set; }
+    public string NodeType { get; set; } = "question";
+    public string Title { get; set; } = string.Empty;
+    public string Preview { get; set; } = string.Empty;
+    public string Content { get; set; } = string.Empty;
+    public double PositionX { get; set; }
+    public double PositionY { get; set; }
+    public double Width { get; set; }
+    public double Height { get; set; }
+    public bool IsCollapsed { get; set; }
+    public double? ExpandedWidth { get; set; }
+    public double? ExpandedHeight { get; set; }
+    public string? PreferredProvider { get; set; }
+    public string? PreferredModel { get; set; }
+    public int? ContextBoundaryMessageId { get; set; }
+    public string? ContextSnapshotJson { get; set; }
+    public DateTime? ContextSnapshotUpdatedAt { get; set; }
+    public int SiblingOrder { get; set; }
+    public DateTime CreatedAt { get; set; }
+    public DateTime UpdatedAt { get; set; }
+}
diff --git a/backend/Coliee.API/Models/ChatNodeCreateInput.cs b/backend/Coliee.API/Models/ChatNodeCreateInput.cs
new file mode 100644
index 0000000..9fd5865
--- /dev/null
+++ b/backend/Coliee.API/Models/ChatNodeCreateInput.cs
@@ -0,0 +1,20 @@
+namespace Coliee.API.Models;
+
+public class ChatNodeCreateInput
+{
+    public int? ParentNodeId { get; set; }
+    public int? BranchFromMessageId { get; set; }
+    public string NodeType { get; set; } = "question";
+    public string Title { get; set; } = string.Empty;
+    public string Preview { get; set; } = string.Empty;
+    public string Content { get; set; } = string.Empty;
+    public double PositionX { get; set; }
+    public double PositionY { get; set; }
+    public double Width { get; set; }
+    public double Height { get; set; }
+    public bool IsCollapsed { get; set; }
+    public double? ExpandedWidth { get; set; }
+    public double? ExpandedHeight { get; set; }
+    public string? PreferredProvider { get; set; }
+    public string? PreferredModel { get; set; }
+}
diff --git a/backend/Coliee.API/Models/ChatNodeLayoutUpdateInput.cs b/backend/Coliee.API/Models/ChatNodeLayoutUpdateInput.cs
new file mode 100644
index 0000000..7b9eba5
--- /dev/null
+++ b/backend/Coliee.API/Models/ChatNodeLayoutUpdateInput.cs
@@ -0,0 +1,8 @@
+namespace Coliee.API.Models;
+
+public class ChatNodeLayoutUpdateInput
+{
+    public int NodeId { get; set; }
+    public double PositionX { get; set; }
+    public double PositionY { get; set; }
+}
diff --git a/backend/Coliee.API/Models/ChatNodeTypes.cs b/backend/Coliee.API/Models/ChatNodeTypes.cs
new file mode 100644
index 0000000..0b5f8f9
--- /dev/null
+++ b/backend/Coliee.API/Models/ChatNodeTypes.cs
@@ -0,0 +1,19 @@
+namespace Coliee.API.Models;
+
+public static class ChatNodeTypes
+{
+    public const string Question = "question";
+    public const string Response = "response";
+    public const string Note = "note";
+
+    public static string Normalize(string? nodeType)
+    {
+        var normalized = nodeType?.Trim().ToLowerInvariant();
+        return normalized switch
+        {
+            Response => Response,
+            Note => Note,
+            _ => Question
+        };
+    }
+}
diff --git a/backend/Coliee.API/Models/ChatNodeUpdateInput.cs b/backend/Coliee.API/Models/ChatNodeUpdateInput.cs
new file mode 100644
index 0000000..9f29ac7
--- /dev/null
+++ b/backend/Coliee.API/Models/ChatNodeUpdateInput.cs
@@ -0,0 +1,18 @@
+namespace Coliee.API.Models;
+
+public class ChatNodeUpdateInput
+{
+    public string NodeType { get; set; } = "question";
+    public string Title { get; set; } = string.Empty;
+    public string Preview { get; set; } = string.Empty;
+    public string Content { get; set; } = string.Empty;
+    public double PositionX { get; set; }
+    public double PositionY { get; set; }
+    public double Width { get; set; }
+    public double Height { get; set; }
+    public bool IsCollapsed { get; set; }
+    public double? ExpandedWidth { get; set; }
+    public double? ExpandedHeight { get; set; }
+    public string? PreferredProvider { get; set; }
+    public string? PreferredModel { get; set; }
+}
diff --git a/backend/Coliee.API/Models/ChatSession.cs b/backend/Coliee.API/Models/ChatSession.cs
new file mode 100644
index 0000000..65d4aca
--- /dev/null
+++ b/backend/Coliee.API/Models/ChatSession.cs
@@ -0,0 +1,10 @@
+namespace Coliee.API.Models;
+
+public class ChatSession
+{
+    public int Id { get; set; }
+    public int UserId { get; set; }
+    public string Title { get; set; } = string.Empty;
+    public DateTime CreatedAt { get; set; }
+    public DateTime UpdatedAt { get; set; }
+}
diff --git a/backend/Coliee.API/Program.cs b/backend/Coliee.API/Program.cs
index 48ea546..c9e443e 100644
--- a/backend/Coliee.API/Program.cs
+++ b/backend/Coliee.API/Program.cs
@@ -11,6 +11,7 @@
 builder.Services.AddControllers();
 builder.Services.AddEndpointsApiExplorer();
 builder.Services.AddSwaggerGen();
+builder.Services.AddMemoryCache();
 
 // Register repositories and services
 builder.Services.AddScoped<UserRepository>();
@@ -18,9 +19,14 @@
 builder.Services.AddScoped<IPasswordResetOtpRepository>(sp => sp.GetRequiredService<UserRepository>());
 builder.Services.AddScoped<IEmailVerificationOtpRepository>(sp => sp.GetRequiredService<UserRepository>());
 builder.Services.AddScoped<ICanvasRepository, CanvasRepository>();
+builder.Services.AddScoped<IChatSessionRepository, ChatSessionRepository>();
 builder.Services.AddScoped<ILlmRepository, LlmRepository>();
 builder.Services.AddScoped<ICanvasService, CanvasService>();
+builder.Services.AddScoped<ICanvasCreationService, CanvasCreationService>();
+builder.Services.AddScoped<ICanvasProviderResolver, CanvasProviderResolver>();
 builder.Services.AddScoped<ICanvasGraphService, CanvasGraphService>();
+builder.Services.AddScoped<IChatNodeContextCompactionService, ChatNodeContextCompactionService>();
+builder.Services.AddScoped<IChatSessionService, ChatSessionService>();
 builder.Services.AddScoped<TokenService>();
 builder.Services.AddScoped<IEmailService, EmailService>();
 builder.Services.AddScoped<IPasswordResetOtpService, PasswordResetOtpService>();
@@ -35,6 +41,8 @@
 builder.Services.AddScoped<ILlmProviderClient>(sp => sp.GetRequiredService<ClaudeProviderClient>());
 builder.Services.AddHttpClient<GeminiProviderClient>();
 builder.Services.AddScoped<ILlmProviderClient>(sp => sp.GetRequiredService<GeminiProviderClient>());
+builder.Services.AddHttpClient<LmStudioProviderClient>();
+builder.Services.AddScoped<ILlmProviderClient>(sp => sp.GetRequiredService<LmStudioProviderClient>());
 builder.Services.AddSingleton(TimeProvider.System);
 
 // Rate limiting configuration
diff --git a/backend/Coliee.API/Services/CanvasConversationMessage.cs b/backend/Coliee.API/Services/CanvasConversationMessage.cs
new file mode 100644
index 0000000..fc58235
--- /dev/null
+++ b/backend/Coliee.API/Services/CanvasConversationMessage.cs
@@ -0,0 +1,3 @@
+namespace Coliee.API.Services;
+
+public sealed record CanvasConversationMessage(string Role, string Content, string? ImageUrl = null);
diff --git a/backend/Coliee.API/Services/CanvasCreationService.cs b/backend/Coliee.API/Services/CanvasCreationService.cs
new file mode 100644
index 0000000..3f6ebe3
--- /dev/null
+++ b/backend/Coliee.API/Services/CanvasCreationService.cs
@@ -0,0 +1,168 @@
+using System.Globalization;
+using System.Text.RegularExpressions;
+using Coliee.API.Data;
+using Coliee.API.DTOs;
+using Coliee.API.Models;
+using Microsoft.AspNetCore.Http;
+
+namespace Coliee.API.Services;
+
+public partial class CanvasCreationService : ICanvasCreationService
+{
+    private const int TitleMaxLength = 80;
+    private readonly ICanvasRepository _canvasRepository;
+    private readonly ICanvasGraphService _canvasGraphService;
+    private readonly ICanvasProviderResolver _canvasProviderResolver;
+    private readonly ILogger<CanvasCreationService> _logger;
+
+    public CanvasCreationService(
+        ICanvasRepository canvasRepository,
+        ICanvasGraphService canvasGraphService,
+        ICanvasProviderResolver canvasProviderResolver,
+        ILogger<CanvasCreationService> logger)
+    {
+        _canvasRepository = canvasRepository;
+        _canvasGraphService = canvasGraphService;
+        _canvasProviderResolver = canvasProviderResolver;
+        _logger = logger;
+    }
+
+    public async Task<CanvasSummaryResponse> CreateCanvasAsync(int userId, string firstPrompt, string? generationMode = null)
+    {
+        var normalizedPrompt = NormalizePrompt(firstPrompt);
+        if (string.IsNullOrWhiteSpace(normalizedPrompt))
+            throw new CanvasOperationException("A first prompt is required to create a canvas.", StatusCodes.Status400BadRequest);
+
+        await _canvasProviderResolver.ResolveAsync(userId, null);
+
+        var title = BuildTitle(normalizedPrompt);
+        var canvas = await _canvasRepository.CreateCanvasAsync(userId, title);
+
+        try
+        {
+            var rootNode = await _canvasRepository.EnsureRootCanvasNodeAsync(userId, canvas.Id);
+            await _canvasGraphService.ExpandCanvasNodeAsync(
+                userId,
+                canvas.Id,
+                rootNode.Id,
+                normalizedPrompt,
+                null,
+                CanvasGenerationModes.Normalize(generationMode));
+
+            var persistedCanvas = await _canvasRepository.GetCanvasAsync(userId, canvas.Id) ?? canvas;
+            _logger.LogInformation("Created and seeded canvas {CanvasId} for user {UserId}.", canvas.Id, userId);
+            return MapCanvas(persistedCanvas);
+        }
+        catch (Exception ex) when (ex is CanvasOperationException or LlmChatException)
+        {
+            try
+            {
+                await _canvasRepository.DeleteCanvasAsync(userId, canvas.Id);
+            }
+            catch (Exception rollbackEx)
+            {
+                _logger.LogError(rollbackEx, "Failed to rollback canvas {CanvasId} for user {UserId} after seeded create failed.", canvas.Id, userId);
+            }
+
+            throw;
+        }
+    }
+
+    private static CanvasSummaryResponse MapCanvas(Models.Canvas canvas)
+    {
+        return new CanvasSummaryResponse
+        {
+            Id = canvas.Id,
+            Title = canvas.Title,
+            CreatedAt = canvas.CreatedAt,
+            UpdatedAt = canvas.UpdatedAt
+        };
+    }
+
+    private static string NormalizePrompt(string firstPrompt)
+    {
+        return WhitespaceRegex().Replace(firstPrompt.Trim(), " ");
+    }
+
+    private static string BuildTitle(string normalizedPrompt)
+    {
+        var stripped = StripLeadingLowSignalText(normalizedPrompt);
+        var words = TokenRegex().Matches(stripped).Select(match => match.Value).ToList();
+        if (words.Count == 0)
+            words = TokenRegex().Matches(normalizedPrompt).Select(match => match.Value).ToList();
+
+        var selectedWords = new List<string>();
+        foreach (var word in words)
+        {
+            var lower = word.ToLowerInvariant();
+            if (selectedWords.Count == 0 && LeadingStopWords().Contains(lower))
+                continue;
+
+            if (AlwaysIgnoredWords().Contains(lower))
+                continue;
+
+            selectedWords.Add(FormatTitleWord(word));
+            if (selectedWords.Count == 6)
+                break;
+        }
+
+        if (selectedWords.Count == 0)
+            return "New Canvas";
+
+        var title = string.Join(" ", selectedWords).Trim().TrimEnd('.', '!', '?', ',', ';', ':');
+        if (title.Length <= TitleMaxLength)
+            return title;
+
+        var truncated = title[..TitleMaxLength].TrimEnd();
+        var splitIndex = truncated.LastIndexOf(' ');
+        if (splitIndex >= TitleMaxLength / 2)
+            truncated = truncated[..splitIndex];
+
+        return truncated.TrimEnd('.', '!', '?', ',', ';', ':');
+    }
+
+    private static string StripLeadingLowSignalText(string prompt)
+    {
+        var stripped = prompt.Trim();
+        foreach (var pattern in LeadingPhrasePatterns())
+            stripped = pattern.Replace(stripped, string.Empty, 1).Trim();
+
+        return stripped;
+    }
+
+    private static string FormatTitleWord(string word)
+    {
+        if (word.All(char.IsUpper))
+            return word;
+
+        return CultureInfo.InvariantCulture.TextInfo.ToTitleCase(word.ToLowerInvariant());
+    }
+
+    private static HashSet<string> LeadingStopWords()
+    {
+        return ["a", "an", "the", "my", "our", "this", "that", "these", "those"];
+    }
+
+    private static HashSet<string> AlwaysIgnoredWords()
+    {
+        return ["a", "an", "the"];
+    }
+
+    private static Regex[] LeadingPhrasePatterns()
+    {
+        return
+        [
+            new Regex(@"^(help me|can you|could you|would you|please)\s+", RegexOptions.IgnoreCase | RegexOptions.CultureInvariant),
+            new Regex(@"^(i need to|i want to|i'm trying to|im trying to)\s+", RegexOptions.IgnoreCase | RegexOptions.CultureInvariant),
+            new Regex(@"^(create|make|build|draft|outline|brainstorm|plan|write)\s+(a|an|the)?\s*canvas\s+(for|about|on)\s+", RegexOptions.IgnoreCase | RegexOptions.CultureInvariant),
+            new Regex(@"^(create|make|build|draft|outline|brainstorm|plan|write)\s+", RegexOptions.IgnoreCase | RegexOptions.CultureInvariant),
+            new Regex(@"^(how should we|how do we|what should we|what do we)\s+", RegexOptions.IgnoreCase | RegexOptions.CultureInvariant)
+        ];
+    }
+
+    [GeneratedRegex(@"\s+")]
+    private static partial Regex WhitespaceRegex();
+
+    [GeneratedRegex(@"[A-Za-z0-9][A-Za-z0-9'&/-]*")]
+    private static partial Regex TokenRegex();
+}
diff --git a/backend/Coliee.API/Services/CanvasGraphService.cs b/backend/Coliee.API/Services/CanvasGraphService.cs
index 4a1c697..be697c5 100644
--- a/backend/Coliee.API/Services/CanvasGraphService.cs
+++ b/backend/Coliee.API/Services/CanvasGraphService.cs
@@ -1,4 +1,5 @@
 using System.Text;
+using System.Text.Json;
 using System.Text.RegularExpressions;
 using Coliee.API.Data;
 using Coliee.API.DTOs;
@@ -10,8 +11,14 @@ namespace Coliee.API.Services;
 public partial class CanvasGraphService : ICanvasGraphService
 {
     private const int NodeTitleMaxLength = 60;
+    private const int MinimumStructuredBranchCount = 2;
+    private const int CompactMaxContextItems = 6;
+    private const int CompactMaxContextChars = 2000;
+    private const int RichMaxContextItems = 8;
+    private const int RichMaxContextChars = 4000;
     private readonly ICanvasRepository _canvasRepository;
     private readonly ILlmRepository _llmRepository;
+    private readonly ICanvasProviderResolver _canvasProviderResolver;
     private readonly ILlmEncryptionService _encryptionService;
     private readonly IReadOnlyDictionary<string, ILlmProviderClient> _providerClients;
     private readonly ILogger<CanvasGraphService> _logger;
@@ -19,12 +26,14 @@ public partial class CanvasGraphService : ICanvasGraphService
     public CanvasGraphService(
         ICanvasRepository canvasRepository,
         ILlmRepository llmRepository,
+        ICanvasProviderResolver canvasProviderResolver,
         ILlmEncryptionService encryptionService,
         IEnumerable<ILlmProviderClient> providerClients,
         ILogger<CanvasGraphService> logger)
     {
         _canvasRepository = canvasRepository;
         _llmRepository = llmRepository;
+        _canvasProviderResolver = canvasProviderResolver;
         _encryptionService = encryptionService;
         _providerClients = providerClients.ToDictionary(client => client.Provider, StringComparer.Ordinal);
         _logger = logger;
@@ -37,7 +46,13 @@ public async Task<CanvasGraphResponse> GetCanvasGraphAsync(int userId, int canva
         return await BuildGraphResponseAsync(userId, canvasId, providers);
     }
 
-    public async Task<CanvasGraphResponse> ExpandCanvasNodeAsync(int userId, int canvasId, int nodeId, string prompt, string? providerOverride)
+    public async Task<CanvasGraphResponse> ExpandCanvasNodeAsync(
+        int userId,
+        int canvasId,
+        int nodeId,
+        string prompt,
+        string? providerOverride,
+        string? generationMode = null)
     {
         await EnsureCanvasExistsAsync(userId, canvasId);
         if (nodeId <= 0)
@@ -50,165 +65,1251 @@ public async Task<CanvasGraphResponse> ExpandCanvasNodeAsync(int userId, int can
         if (string.IsNullOrWhiteSpace(trimmedPrompt))
             throw new LlmChatException("Prompt content is required.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status400BadRequest);
 
-        var providers = await _llmRepository.GetProviderKeysAsync(userId);
-        var selectedProvider = ResolveProvider(providers, providerOverride);
+        var normalizedGenerationMode = CanvasGenerationModes.Normalize(generationMode);
+        var resolution = await _canvasProviderResolver.ResolveAsync(userId, providerOverride);
+        var providers = resolution.Providers;
+        var selectedProvider = resolution.Provider;
         var providerRecord = providers.First(item => item.Provider == selectedProvider);
         var decryptedApiKey = _encryptionService.Decrypt(providerRecord.EncryptedApiKey);
+        var providerClient = GetProviderClient(selectedProvider);
 
         var nodes = await _canvasRepository.GetCanvasNodesAsync(userId, canvasId);
         var selectedNode = nodes.FirstOrDefault(item => item.Id == nodeId);
         if (selectedNode == null)
             throw new CanvasOperationException("Node not found.", StatusCodes.Status404NotFound);
 
-        var providerMessages = BuildProviderMessages(nodes, selectedNode, trimmedPrompt);
-        var providerClient = GetProviderClient(selectedProvider);
-        var providerReply = await providerClient.SendChatAsync(decryptedApiKey, providerMessages);
+        if (IsRootMainNode(selectedNode))
+        {
+            var rootExpansion = await GenerateRootNodeExpansionAsync(
+                providerClient,
+                decryptedApiKey,
+                nodes,
+                selectedNode,
+                trimmedPrompt,
+                normalizedGenerationMode);
 
-        var childNodes = ChunkResponse(providerReply.Content)
-            .Select(chunk => new CanvasNodeCreateInput
+            if (rootExpansion.MainNode != null)
             {
-                Kind = "response",
-                Title = BuildNodeTitle(chunk),
-                Content = chunk,
-                SourcePrompt = trimmedPrompt,
-                Depth = selectedNode.Depth + 1
-            })
-            .ToList();
+                await _canvasRepository.UpdateCanvasNodeAsync(
+                    userId,
+                    canvasId,
+                    selectedNode.Id,
+                    rootExpansion.MainNode);
+            }
+
+            if (rootExpansion.ChildNodes.Count > 0)
+                await _canvasRepository.AddChildCanvasNodesAsync(userId, canvasId, selectedNode.Id, rootExpansion.ChildNodes);
+        }
+        else
+        {
+            var childNodes = await GenerateChildNodesAsync(
+                providerClient,
+                decryptedApiKey,
+                nodes,
+                selectedNode,
+                trimmedPrompt,
+                normalizedGenerationMode);
+
+            await _canvasRepository.AddChildCanvasNodesAsync(userId, canvasId, selectedNode.Id, childNodes);
+        }
 
-        await _canvasRepository.AddChildCanvasNodesAsync(userId, canvasId, selectedNode.Id, childNodes);
         _logger.LogInformation(
-            "Expanded canvas node {NodeId} for user {UserId} on canvas {CanvasId} with provider {Provider}.",
+            "Expanded canvas node {NodeId} for user {UserId} on canvas {CanvasId} with provider {Provider} in {GenerationMode} mode.",
             nodeId,
             userId,
             canvasId,
-            selectedProvider);
+            selectedProvider,
+            normalizedGenerationMode);
 
         return await BuildGraphResponseAsync(userId, canvasId, providers);
     }
 
-    private async Task<CanvasGraphResponse> BuildGraphResponseAsync(int userId, int canvasId, IReadOnlyList<LlmProviderKeyRecord> providers)
+    private async Task<IReadOnlyList<CanvasNodeCreateInput>> GenerateChildNodesAsync(
+        ILlmProviderClient providerClient,
+        string apiKey,
+        IReadOnlyList<CanvasNode> allNodes,
+        CanvasNode selectedNode,
+        string prompt,
+        string generationMode)
+    {
+        return generationMode == CanvasGenerationModes.Rich
+            ? await GenerateRichChildNodesAsync(providerClient, apiKey, allNodes, selectedNode, prompt)
+            : await GenerateCompactChildNodesAsync(providerClient, apiKey, allNodes, selectedNode, prompt);
+    }
+
+    private static bool IsRootMainNode(CanvasNode node)
+    {
+        return node.Kind == "main" && node.ParentNodeId == null;
+    }
+
+    private async Task<RootNodeExpansionResult> GenerateRootNodeExpansionAsync(
+        ILlmProviderClient providerClient,
+        string apiKey,
+        IReadOnlyList<CanvasNode> allNodes,
+        CanvasNode selectedNode,
+        string prompt,
+        string generationMode)
+    {
+        return generationMode == CanvasGenerationModes.Rich
+            ? await GenerateRichRootNodeExpansionAsync(providerClient, apiKey, allNodes, selectedNode, prompt)
+            : await GenerateCompactRootNodeExpansionAsync(providerClient, apiKey, allNodes, selectedNode, prompt);
+    }
+
+    private async Task<RootNodeExpansionResult> GenerateCompactRootNodeExpansionAsync(
+        ILlmProviderClient providerClient,
+        string apiKey,
+        IReadOnlyList<CanvasNode> allNodes,
+        CanvasNode selectedNode,
+        string prompt)
+    {
+        var plannerResponse = await GenerateStructuredPlanAsync<CompactRootPlannerResponse>(
+            providerClient,
+            apiKey,
+            BuildRootPlannerRequest(allNodes, selectedNode, prompt, CanvasGenerationModes.Compact),
+            ValidateCompactRootPlannerResponse,
+            "compact root");
+
+        if (plannerResponse?.MainNode != null)
+        {
+            var childNodes = plannerResponse.Branches
+                .Where(branch => !IsFoundationLikeBranch(branch.Title))
+                .Select(branch =>
+                {
+                    var normalizedSummary = NormalizeChunk(branch.Summary);
+                    return new CanvasNodeCreateInput
+                    {
+                        Kind = "response",
+                        Title = NormalizeBranchTitle(branch.Title),
+                        GenerationMode = CanvasGenerationModes.Compact,
+                        Summary = normalizedSummary,
+                        Content = normalizedSummary,
+                        SourcePrompt = prompt,
+                        ContinuationPrompt = BuildContinuationPrompt(prompt, branch.Title, branch.Summary),
+                        Depth = selectedNode.Depth + 1
+                    };
+                })
+                .Where(node => !IsLowSignalBranch(node.Title, node.Summary ?? node.Content))
+                .Distinct(CanvasNodeCreateInputComparer.Instance)
+                .ToList();
+
+            if (childNodes.Count >= MinimumStructuredBranchCount)
+            {
+                return new RootNodeExpansionResult
+                {
+                    MainNode = BuildRootNodeUpdate(selectedNode, prompt, plannerResponse.MainNode),
+                    ChildNodes = childNodes
+                };
+            }
+        }
+
+        return await GenerateFallbackRootNodeExpansionAsync(
+            providerClient,
+            apiKey,
+            allNodes,
+            selectedNode,
+            prompt,
+            CanvasGenerationModes.Compact);
+    }
+
+    private async Task<RootNodeExpansionResult> GenerateRichRootNodeExpansionAsync(
+        ILlmProviderClient providerClient,
+        string apiKey,
+        IReadOnlyList<CanvasNode> allNodes,
+        CanvasNode selectedNode,
+        string prompt)
+    {
+        var plannerResponse = await GenerateStructuredPlanAsync<RichRootPlannerResponse>(
+            providerClient,
+            apiKey,
+            BuildRootPlannerRequest(allNodes, selectedNode, prompt, CanvasGenerationModes.Rich),
+            ValidateRichRootPlannerResponse,
+            "rich root");
+
+        if (plannerResponse?.MainNode != null)
+        {
+            var childNodes = new List<CanvasNodeCreateInput>();
+            foreach (var branch in plannerResponse.Branches.Where(branch => !IsFoundationLikeBranch(branch.Title)))
+            {
+                if (IsLowSignalBranch(branch.Title, branch.Summary))
+                    continue;
+
+                var detailResponse = await GenerateStructuredPlanAsync<RichDetailResponse>(
+                    providerClient,
+                    apiKey,
+                    BuildRichDetailRequest(allNodes, selectedNode, prompt, branch),
+                    ValidateRichDetailResponse,
+                    "rich detail");
+
+                var normalizedSummary = NormalizeChunk(branch.Summary);
+                var detailContent = !string.IsNullOrWhiteSpace(detailResponse?.Content)
+                    ? NormalizeChunk(detailResponse.Content)
+                    : normalizedSummary;
+
+                childNodes.Add(new CanvasNodeCreateInput
+                {
+                    Kind = "response",
+                    Title = NormalizeBranchTitle(branch.Title),
+                    GenerationMode = CanvasGenerationModes.Rich,
+                    Summary = normalizedSummary,
+                    Category = NormalizeCategory(branch.Category),
+                    Content = detailContent,
+                    SourcePrompt = prompt,
+                    ContinuationPrompt = NormalizeChunk(branch.ContinuationPrompt),
+                    Blocks = detailResponse?.Blocks?
+                        .Where(block => !string.IsNullOrWhiteSpace(block.Type) && !string.IsNullOrWhiteSpace(block.Text))
+                        .Select(block => new CanvasNodeBlock
+                        {
+                            Type = NormalizeBlockType(block.Type),
+                            Text = NormalizeChunk(block.Text),
+                            Options = block.Options?.Where(option => !string.IsNullOrWhiteSpace(option)).Select(NormalizeChunk).ToList() ?? []
+                        })
+                        .Take(4)
+                        .ToList() ?? [],
+                    Sources = detailResponse?.Sources?
+                        .Where(source => !string.IsNullOrWhiteSpace(source.Label) && !string.IsNullOrWhiteSpace(source.Url))
+                        .Select(source => new CanvasNodeSource
+                        {
+                            Label = NormalizeChunk(source.Label),
+                            Url = NormalizeChunk(source.Url)
+                        })
+                        .ToList() ?? [],
+                    Depth = selectedNode.Depth + 1
+                });
+            }
+
+            var distinctChildNodes = childNodes.Distinct(CanvasNodeCreateInputComparer.Instance).ToList();
+            if (distinctChildNodes.Count >= MinimumStructuredBranchCount)
+            {
+                return new RootNodeExpansionResult
+                {
+                    MainNode = BuildRootNodeUpdate(selectedNode, prompt, plannerResponse.MainNode),
+                    ChildNodes = distinctChildNodes
+                };
+            }
+        }
+
+        return await GenerateFallbackRootNodeExpansionAsync(
+            providerClient,
+            apiKey,
+            allNodes,
+            selectedNode,
+            prompt,
+            CanvasGenerationModes.Rich);
+    }
+
+    private async Task<RootNodeExpansionResult> GenerateFallbackRootNodeExpansionAsync(
+        ILlmProviderClient providerClient,
+        string apiKey,
+        IReadOnlyList<CanvasNode> allNodes,
+        CanvasNode selectedNode,
+        string prompt,
+        string generationMode)
+    {
+        var fallbackReply = await providerClient.SendChatAsync(apiKey, BuildRootFallbackMessages(allNodes, selectedNode, prompt, generationMode));
+        var fallbackBranches = BuildFallbackBranches(fallbackReply.Content);
+        var foundationBranch = fallbackBranches.FirstOrDefault(branch => IsFoundationLikeBranch(branch.Title));
+        var childBranches = fallbackBranches
+            .Where(branch => !ReferenceEquals(branch, foundationBranch))
+            .ToList();
+
+        CanvasNodeUpdateInput? mainNode = null;
+        if (foundationBranch != null)
+        {
+            var normalizedFoundation = NormalizeMarkdownBody(foundationBranch.Content);
+            mainNode = new CanvasNodeUpdateInput
+            {
+                GenerationMode = CanvasGenerationModes.Rich,
+                Summary = NormalizeChunk(foundationBranch.Content),
+                Content = AppendRootContent(selectedNode.Content, normalizedFoundation),
+                SourcePrompt = prompt,
+                Blocks = [],
+                Sources = []
+            };
+        }
+
+        var childNodes = childBranches
+            .Select(branch =>
+            {
+                var normalizedSummary = NormalizeChunk(branch.Content);
+                return new CanvasNodeCreateInput
+                {
+                    Kind = "response",
+                    Title = NormalizeBranchTitle(branch.Title),
+                    GenerationMode = generationMode,
+                    Summary = normalizedSummary,
+                    Content = normalizedSummary,
+                    SourcePrompt = prompt,
+                    ContinuationPrompt = BuildContinuationPrompt(prompt, branch.Title, branch.Content),
+                    Depth = selectedNode.Depth + 1
+                };
+            })
+            .Distinct(CanvasNodeCreateInputComparer.Instance)
+            .ToList();
+
+        return new RootNodeExpansionResult
+        {
+            MainNode = mainNode,
+            ChildNodes = childNodes
+        };
+    }
+
+    private static CanvasNodeUpdateInput BuildRootNodeUpdate(CanvasNode selectedNode, string prompt, RootMainNodeResponse foundation)
+    {
+        var normalizedContent = NormalizeMarkdownBody(foundation.Content);
+        return new CanvasNodeUpdateInput
+        {
+            GenerationMode = CanvasGenerationModes.Rich,
+            Summary = NormalizeChunk(foundation.Summary),
+            Content = AppendRootContent(selectedNode.Content, normalizedContent),
+            SourcePrompt = prompt,
+            Blocks = foundation.Blocks
+                .Where(block => !string.IsNullOrWhiteSpace(block.Type) && !string.IsNullOrWhiteSpace(block.Text))
+                .Select(block => new CanvasNodeBlock
+                {
+                    Type = NormalizeBlockType(block.Type),
+                    Text = NormalizeChunk(block.Text),
+                    Options = block.Options?.Where(option => !string.IsNullOrWhiteSpace(option)).Select(NormalizeChunk).ToList() ?? []
+                })
+                .Take(4)
+                .ToList(),
+            Sources = foundation.Sources
+                .Where(source => !string.IsNullOrWhiteSpace(source.Label) && !string.IsNullOrWhiteSpace(source.Url))
+                .Select(source => new CanvasNodeSource
+                {
+                    Label = NormalizeChunk(source.Label),
+                    Url = NormalizeChunk(source.Url)
+                })
+                .ToList()
+        };
+    }
+
+    private async Task<IReadOnlyList<CanvasNodeCreateInput>> GenerateCompactChildNodesAsync(
+        ILlmProviderClient providerClient,
+        string apiKey,
+        IReadOnlyList<CanvasNode> allNodes,
+        CanvasNode selectedNode,
+        string prompt)
+    {
+        var plannerResponse = await GenerateStructuredPlanAsync<CompactPlannerResponse>(
+            providerClient,
+            apiKey,
+            BuildPlannerRequest(allNodes, selectedNode, prompt, CanvasGenerationModes.Compact),
+            ValidateCompactPlannerResponse,
+            "compact");
+
+        if (plannerResponse?.Branches?.Count >= MinimumStructuredBranchCount)
+        {
+            return plannerResponse.Branches
+                .Select(branch =>
+                {
+                    var normalizedSummary = NormalizeChunk(branch.Summary);
+                    return new CanvasNodeCreateInput
+                    {
+                        Kind = "response",
+                        Title = NormalizeBranchTitle(branch.Title),
+                        GenerationMode = CanvasGenerationModes.Compact,
+                        Summary = normalizedSummary,
+                        Content = normalizedSummary,
+                        SourcePrompt = prompt,
+                        ContinuationPrompt = BuildContinuationPrompt(prompt, branch.Title, branch.Summary),
+                        Depth = selectedNode.Depth + 1
+                    };
+                })
+                .Where(node => !IsLowSignalBranch(node.Title, node.Summary ?? node.Content))
+                .Distinct(CanvasNodeCreateInputComparer.Instance)
+                .ToList();
+        }
+
+        return await GenerateFallbackChildNodesAsync(
+            providerClient,
+            apiKey,
+            allNodes,
+            selectedNode,
+            prompt,
+            CanvasGenerationModes.Compact);
+    }
+
+    private async Task<IReadOnlyList<CanvasNodeCreateInput>> GenerateRichChildNodesAsync(
+        ILlmProviderClient providerClient,
+        string apiKey,
+        IReadOnlyList<CanvasNode> allNodes,
+        CanvasNode selectedNode,
+        string prompt)
+    {
+        var plannerResponse = await GenerateStructuredPlanAsync<RichPlannerResponse>(
+            providerClient,
+            apiKey,
+            BuildPlannerRequest(allNodes, selectedNode, prompt, CanvasGenerationModes.Rich),
+            ValidateRichPlannerResponse,
+            "rich planner");
+
+        var plannerBranches = plannerResponse?.Branches;
+        if (plannerBranches is null || plannerBranches.Count < MinimumStructuredBranchCount)
+        {
+            return await GenerateFallbackChildNodesAsync(
+                providerClient,
+                apiKey,
+                allNodes,
+                selectedNode,
+                prompt,
+                CanvasGenerationModes.Rich);
+        }
+
+        var childNodes = new List<CanvasNodeCreateInput>();
+        foreach (var branch in plannerBranches)
+        {
+            if (IsLowSignalBranch(branch.Title, branch.Summary))
+                continue;
+
+            var detailResponse = await GenerateStructuredPlanAsync<RichDetailResponse>(
+                providerClient,
+                apiKey,
+                BuildRichDetailRequest(allNodes, selectedNode, prompt, branch),
+                ValidateRichDetailResponse,
+                "rich detail");
+
+            var normalizedSummary = NormalizeChunk(branch.Summary);
+            var detailContent = !string.IsNullOrWhiteSpace(detailResponse?.Content)
+                ? NormalizeChunk(detailResponse.Content)
+                : normalizedSummary;
+
+            childNodes.Add(new CanvasNodeCreateInput
+            {
+                Kind = "response",
+                Title = NormalizeBranchTitle(branch.Title),
+                GenerationMode = CanvasGenerationModes.Rich,
+                Summary = normalizedSummary,
+                Category = NormalizeCategory(branch.Category),
+                Content = detailContent,
+                SourcePrompt = prompt,
+                ContinuationPrompt = NormalizeChunk(branch.ContinuationPrompt),
+                Blocks = detailResponse?.Blocks?
+                    .Where(block => !string.IsNullOrWhiteSpace(block.Type) && !string.IsNullOrWhiteSpace(block.Text))
+                    .Select(block => new CanvasNodeBlock
+                    {
+                        Type = NormalizeBlockType(block.Type),
+                        Text = NormalizeChunk(block.Text),
+                        Options = block.Options?.Where(option => !string.IsNullOrWhiteSpace(option)).Select(NormalizeChunk).ToList() ?? []
+                    })
+                    .Take(4)
+                    .ToList() ?? [],
+                Sources = detailResponse?.Sources?
+                    .Where(source => !string.IsNullOrWhiteSpace(source.Label) && !string.IsNullOrWhiteSpace(source.Url))
+                    .Select(source => new CanvasNodeSource
+                    {
+                        Label = NormalizeChunk(source.Label),
+                        Url = NormalizeChunk(source.Url)
+                    })
+                    .ToList() ?? [],
+                Depth = selectedNode.Depth + 1
+            });
+        }
+
+        return childNodes.Count >= MinimumStructuredBranchCount
+            ? childNodes.Distinct(CanvasNodeCreateInputComparer.Instance).ToList()
+            : await GenerateFallbackChildNodesAsync(
+                providerClient,
+                apiKey,
+                allNodes,
+                selectedNode,
+                prompt,
+                CanvasGenerationModes.Rich);
+    }
+
+    private async Task<IReadOnlyList<CanvasNodeCreateInput>> GenerateFallbackChildNodesAsync(
+        ILlmProviderClient providerClient,
+        string apiKey,
+        IReadOnlyList<CanvasNode> allNodes,
+        CanvasNode selectedNode,
+        string prompt,
+        string generationMode)
+    {
+        var fallbackReply = await providerClient.SendChatAsync(apiKey, BuildFallbackMessages(allNodes, selectedNode, prompt, generationMode));
+        var fallbackBranches = BuildFallbackBranches(fallbackReply.Content);
+        if (fallbackBranches.Count == 0)
+        {
+            var normalized = NormalizeChunk(fallbackReply.Content);
+            fallbackBranches =
+            [
+                new GeneratedBranch(BuildNodeTitle(normalized), normalized)
+            ];
+        }
+
+        return fallbackBranches
+            .Select(branch =>
+            {
+                var normalizedSummary = NormalizeChunk(branch.Content);
+                return new CanvasNodeCreateInput
+                {
+                    Kind = "response",
+                    Title = NormalizeBranchTitle(branch.Title),
+                    GenerationMode = generationMode,
+                    Summary = normalizedSummary,
+                    Content = normalizedSummary,
+                    SourcePrompt = prompt,
+                    ContinuationPrompt = BuildContinuationPrompt(prompt, branch.Title, branch.Content),
+                    Depth = selectedNode.Depth + 1
+                };
+            })
+            .Distinct(CanvasNodeCreateInputComparer.Instance)
+            .ToList();
+    }
+
+    private async Task<T?> GenerateStructuredPlanAsync<T>(
+        ILlmProviderClient providerClient,
+        string apiKey,
+        LlmProviderStructuredRequest request,
+        Func<T, IReadOnlyList<string>> validator,
+        string operationLabel)
+        where T : class
+    {
+        var validationErrors = new List<string>();
+        for (var attempt = 0; attempt < 2; attempt += 1)
+        {
+            var attemptRequest = attempt == 0
+                ? request
+                : new LlmProviderStructuredRequest
+                {
+                    Instructions = request.Instructions + "\n\nPrevious response errors:\n- " + string.Join("\n- ", validationErrors) + "\nReturn corrected JSON only.",
+                    Messages = request.Messages,
+                    SchemaJson = request.SchemaJson,
+                    SchemaName = request.SchemaName,
+                    MaxOutputTokens = request.MaxOutputTokens
+                };
+
+            try
+            {
+                var providerReply = await providerClient.SendStructuredJsonAsync(apiKey, attemptRequest);
+                var candidateJson = ExtractJsonCandidate(providerReply.Content) ?? providerReply.Content;
+                var model = JsonSerializer.Deserialize<T>(candidateJson, JsonSerializerOptions);
+                if (model == null)
+                {
+                    validationErrors = ["Structured response could not be deserialized."];
+                    continue;
+                }
+
+                validationErrors = [.. validator(model)];
+                if (validationErrors.Count == 0)
+                    return model;
+            }
+            catch (JsonException ex)
+            {
+                _logger.LogWarning(ex, "Failed to parse {OperationLabel} structured JSON.", operationLabel);
+                validationErrors = ["Structured JSON could not be parsed."];
+            }
+            catch (LlmChatException)
+            {
+                throw;
+            }
+        }
+
+        if (validationErrors.Count > 0)
+        {
+            _logger.LogWarning(
+                "Structured generation for {OperationLabel} failed validation after retry: {Errors}",
+                operationLabel,
+                string.Join("; ", validationErrors));
+        }
+
+        return null;
+    }
+
+    private LlmProviderStructuredRequest BuildRootPlannerRequest(
+        IReadOnlyList<CanvasNode> allNodes,
+        CanvasNode selectedNode,
+        string prompt,
+        string generationMode)
+    {
+        var promptType = DetectPromptType(prompt);
+        var contextMessage = BuildContextMessage(
+            allNodes,
+            selectedNode,
+            generationMode == CanvasGenerationModes.Rich ? RichMaxContextItems : CompactMaxContextItems,
+            generationMode == CanvasGenerationModes.Rich ? RichMaxContextChars : CompactMaxContextChars);
+
+        var instructions = generationMode == CanvasGenerationModes.Rich
+            ? BuildRichRootPlannerInstructions(promptType)
+            : BuildCompactRootPlannerInstructions(promptType);
+
+        var schema = generationMode == CanvasGenerationModes.Rich ? RichRootPlannerSchema : CompactRootPlannerSchema;
+        var schemaName = generationMode == CanvasGenerationModes.Rich ? "rich_root_branch_plan" : "compact_root_branch_plan";
+        var maxOutputTokens = generationMode == CanvasGenerationModes.Rich ? 2200 : 1500;
+
+        var messages = new List<LlmProviderChatMessage>();
+        if (!string.IsNullOrWhiteSpace(contextMessage))
+        {
+            messages.Add(new LlmProviderChatMessage
+            {
+                Role = "user",
+                Content = contextMessage
+            });
+        }
+
+        messages.Add(new LlmProviderChatMessage
+        {
+            Role = "user",
+            Content =
+                """
+                Original user request:
+                """ + "\n" + prompt
+        });
+
+        return new LlmProviderStructuredRequest
+        {
+            Instructions = instructions,
+            Messages = messages,
+            SchemaName = schemaName,
+            SchemaJson = schema,
+            MaxOutputTokens = maxOutputTokens
+        };
+    }
+
+    private LlmProviderStructuredRequest BuildPlannerRequest(
+        IReadOnlyList<CanvasNode> allNodes,
+        CanvasNode selectedNode,
+        string prompt,
+        string generationMode)
+    {
+        var promptType = DetectPromptType(prompt);
+        var contextMessage = BuildContextMessage(
+            allNodes,
+            selectedNode,
+            generationMode == CanvasGenerationModes.Rich ? RichMaxContextItems : CompactMaxContextItems,
+            generationMode == CanvasGenerationModes.Rich ? RichMaxContextChars : CompactMaxContextChars);
+
+        var instructions = generationMode == CanvasGenerationModes.Rich
+            ? BuildRichPlannerInstructions(promptType)
+            : BuildCompactPlannerInstructions(promptType);
+
+        var schema = generationMode == CanvasGenerationModes.Rich ? RichPlannerSchema : CompactPlannerSchema;
+        var schemaName = generationMode == CanvasGenerationModes.Rich ? "rich_branch_plan" : "compact_branch_plan";
+        var maxOutputTokens = generationMode == CanvasGenerationModes.Rich ? 1400 : 900;
+
+        var messages = new List<LlmProviderChatMessage>();
+        if (!string.IsNullOrWhiteSpace(contextMessage))
+        {
+            messages.Add(new LlmProviderChatMessage
+            {
+                Role = "user",
+                Content = contextMessage
+            });
+        }
+
+        messages.Add(new LlmProviderChatMessage
+        {
+            Role = "user",
+            Content =
+                """
+                Original user request:
+                """ + "\n" + prompt
+        });
+
+        return new LlmProviderStructuredRequest
+        {
+            Instructions = instructions,
+            Messages = messages,
+            SchemaName = schemaName,
+            SchemaJson = schema,
+            MaxOutputTokens = maxOutputTokens
+        };
+    }
+
+    private LlmProviderStructuredRequest BuildRichDetailRequest(
+        IReadOnlyList<CanvasNode> allNodes,
+        CanvasNode selectedNode,
+        string prompt,
+        RichPlannerBranch branch)
+    {
+        var contextMessage = BuildContextMessage(allNodes, selectedNode, RichMaxContextItems, RichMaxContextChars);
+        var messages = new List<LlmProviderChatMessage>();
+        if (!string.IsNullOrWhiteSpace(contextMessage))
+        {
+            messages.Add(new LlmProviderChatMessage
+            {
+                Role = "user",
+                Content = contextMessage
+            });
+        }
+
+        messages.Add(new LlmProviderChatMessage
+        {
+            Role = "user",
+            Content =
+                """
+                Original user request:
+                """ + "\n" + prompt + "\n\n" +
+                """
+                Selected branch:
+                """ + "\n" +
+                $"Title: {NormalizeBranchTitle(branch.Title)}\n" +
+                $"Category: {NormalizeCategory(branch.Category) ?? "focused workstream"}\n" +
+                $"Summary: {NormalizeChunk(branch.Summary)}\n" +
+                $"Continuation prompt: {NormalizeChunk(branch.ContinuationPrompt)}"
+        });
+
+        return new LlmProviderStructuredRequest
+        {
+            Instructions = RichDetailInstructions,
+            Messages = messages,
+            SchemaName = "rich_branch_detail",
+            SchemaJson = RichDetailSchema,
+            MaxOutputTokens = 1800
+        };
+    }
+
+    private async Task<CanvasGraphResponse> BuildGraphResponseAsync(int userId, int canvasId, IReadOnlyList<LlmProviderKeyRecord> providers)
+    {
+        var canvas = await _canvasRepository.GetCanvasAsync(userId, canvasId)
+            ?? throw new CanvasOperationException("Canvas not found.", StatusCodes.Status404NotFound);
+
+        if (await _canvasRepository.HasLegacyMainNodeMessagesAsync(userId, canvasId))
+        {
+            return new CanvasGraphResponse
+            {
+                CanvasId = canvasId,
+                CanvasTitle = canvas.Title,
+                Mode = "legacy",
+                DefaultProvider = providers.FirstOrDefault(item => item.IsDefault)?.Provider,
+                AvailableProviders = providers.Select(item => item.Provider).ToList()
+            };
+        }
+
+        var rootNode = await _canvasRepository.EnsureRootCanvasNodeAsync(userId, canvasId);
+        var nodes = NormalizeGraphNodes(await _canvasRepository.GetCanvasNodesAsync(userId, canvasId));
+
+        return new CanvasGraphResponse
+        {
+            CanvasId = canvasId,
+            CanvasTitle = canvas.Title,
+            Mode = "graph",
+            DefaultProvider = providers.FirstOrDefault(item => item.IsDefault)?.Provider,
+            AvailableProviders = providers.Select(item => item.Provider).ToList(),
+            RootNodeId = rootNode.Id,
+            Nodes = nodes.Select(MapNode).ToList()
+        };
+    }
+
+    private static IReadOnlyList<CanvasNode> NormalizeGraphNodes(IReadOnlyList<CanvasNode> nodes)
+    {
+        var rootNode = nodes.FirstOrDefault(IsRootMainNode);
+        if (rootNode == null || !string.IsNullOrWhiteSpace(rootNode.Summary) || !string.IsNullOrWhiteSpace(rootNode.Content))
+            return nodes;
+
+        var foundationChild = nodes
+            .Where(node => node.ParentNodeId == rootNode.Id && node.Kind == "response")
+            .OrderBy(GetFoundationCandidatePriority)
+            .ThenBy(node => node.SiblingOrder)
+            .ThenBy(node => node.Id)
+            .FirstOrDefault(IsFoundationGraphChild);
+
+        if (foundationChild == null)
+            return nodes;
+
+        var normalizedRoot = new CanvasNode
+        {
+            Id = rootNode.Id,
+            CanvasId = rootNode.CanvasId,
+            ParentNodeId = rootNode.ParentNodeId,
+            Kind = rootNode.Kind,
+            Title = rootNode.Title,
+            GenerationMode = CanvasGenerationModes.Normalize(foundationChild.GenerationMode),
+            Summary = string.IsNullOrWhiteSpace(foundationChild.Summary) ? foundationChild.Content : foundationChild.Summary,
+            Category = null,
+            Content = foundationChild.Content,
+            SourcePrompt = foundationChild.SourcePrompt,
+            ContinuationPrompt = null,
+            Blocks = [.. foundationChild.Blocks],
+            Sources = [.. foundationChild.Sources],
+            Depth = rootNode.Depth,
+            SiblingOrder = rootNode.SiblingOrder,
+            CreatedAt = rootNode.CreatedAt,
+            UpdatedAt = foundationChild.UpdatedAt > rootNode.UpdatedAt ? foundationChild.UpdatedAt : rootNode.UpdatedAt
+        };
+
+        return nodes
+            .Where(node => node.Id != foundationChild.Id)
+            .Select(node => node.Id == rootNode.Id ? normalizedRoot : node)
+            .ToList();
+    }
+
+    private async Task EnsureCanvasExistsAsync(int userId, int canvasId)
+    {
+        if (canvasId <= 0)
+            throw new CanvasOperationException("A valid canvas is required.", StatusCodes.Status400BadRequest);
+
+        var canvas = await _canvasRepository.GetCanvasAsync(userId, canvasId);
+        if (canvas == null)
+            throw new CanvasOperationException("Canvas not found.", StatusCodes.Status404NotFound);
+    }
+
+    private ILlmProviderClient GetProviderClient(string provider)
+    {
+        if (_providerClients.TryGetValue(provider, out var client))
+            return client;
+
+        throw new InvalidOperationException($"No provider client is registered for '{provider}'.");
+    }
+
+    private static string BuildContextMessage(
+        IReadOnlyList<CanvasNode> allNodes,
+        CanvasNode selectedNode,
+        int maxItems,
+        int maxChars)
+    {
+        var nodesById = allNodes.ToDictionary(item => item.Id);
+        var path = new Stack<CanvasNode>();
+        var current = selectedNode;
+
+        while (true)
+        {
+            path.Push(current);
+            if (!current.ParentNodeId.HasValue || !nodesById.TryGetValue(current.ParentNodeId.Value, out current!))
+                break;
+        }
+
+        var sections = path
+            .Select(FormatNodeContext)
+            .Where(section => !string.IsNullOrWhiteSpace(section))
+            .TakeLast(maxItems)
+            .ToList();
+
+        if (sections.Count == 0)
+            return string.Empty;
+
+        var builder = new StringBuilder();
+        builder.AppendLine("Existing canvas context:");
+        builder.AppendLine("Use the following nodes as background context.");
+        builder.AppendLine("Do not explain the canvas structure unless explicitly asked.");
+        builder.AppendLine();
+
+        var remainingChars = maxChars;
+        foreach (var section in sections)
+        {
+            var clipped = ClipToLength(section, Math.Min(remainingChars, maxChars));
+            if (string.IsNullOrWhiteSpace(clipped))
+                continue;
+
+            if (builder.Length > 0 && builder[^1] != '\n')
+                builder.AppendLine();
+
+            builder.AppendLine(clipped);
+            builder.AppendLine();
+            remainingChars -= clipped.Length;
+            if (remainingChars <= 0)
+                break;
+        }
+
+        return builder.ToString().Trim();
+    }
+
+    private static string FormatNodeContext(CanvasNode node)
+    {
+        if (node.Kind == "main" && string.IsNullOrWhiteSpace(node.Content) && string.Equals(node.Title, "Main Node", StringComparison.Ordinal))
+            return string.Empty;
+
+        if (node.Kind == "main" && string.IsNullOrWhiteSpace(node.Summary) && string.IsNullOrWhiteSpace(node.Content))
+            return $"Canvas topic: {node.Title}";
+
+        var summary = string.IsNullOrWhiteSpace(node.Summary) ? node.Content : node.Summary;
+        if (string.IsNullOrWhiteSpace(summary))
+            return node.Title;
+
+        return $"{node.Title}\n{ClipToLength(NormalizeChunk(summary), 320)}";
+    }
+
+    private static string DetectPromptType(string prompt)
+    {
+        var normalized = prompt.Trim().ToLowerInvariant();
+
+        if (normalized.Contains(" vs ") || normalized.Contains("compare") || normalized.Contains("tradeoff") || normalized.Contains("choose") || normalized.Contains("decision"))
+            return "comparison";
+
+        if (normalized.Contains("debug") || normalized.Contains("bug") || normalized.Contains("error") || normalized.Contains("issue") || normalized.Contains("failing"))
+            return "debugging";
+
+        if (normalized.Contains("learn") || normalized.Contains("understand") || normalized.Contains("explain") || normalized.Contains("teach"))
+            return "learning";
+
+        if (normalized.Contains("research") || normalized.Contains("analyze") || normalized.Contains("analysis") || normalized.Contains("investigate"))
+            return "analysis";
+
+        if (normalized.Contains("brainstorm") || normalized.Contains("ideate") || normalized.Contains("idea"))
+            return "creative";
+
+        if (normalized.Contains("plan") || normalized.Contains("roadmap") || normalized.Contains("launch") || normalized.Contains("strategy"))
+            return "planning";
+
+        if (normalized.Contains("build") || normalized.Contains("create") || normalized.Contains("implement") || normalized.Contains("design"))
+            return "building";
+
+        return "general";
+    }
+
+    private static string BuildCompactPlannerInstructions(string promptType)
+    {
+        return
+            """
+            You are a branch planner for a node-based workspace.
+            Generate 3 to 5 distinct next branches, targeting 4 when the prompt is broad enough.
+            Optimize for token efficiency while keeping branches useful, concrete, and non-overlapping.
+            Use the inferred prompt type to choose a natural structure instead of a fixed template.
+            Titles must be concise and easy to scan.
+            Summaries must be one short sentence each.
+            Do not answer the user's full request.
+            Do not include filler such as overview, miscellaneous, or more details unless clearly necessary.
+            Return only JSON matching the schema.
+            """ + "\n" + $"Prompt type: {promptType}.";
+    }
+
+    private static string BuildRichPlannerInstructions(string promptType)
+    {
+        return
+            """
+            You are a branch planner for a node-based workspace.
+            Generate 4 to 5 distinct next branches for the user's request.
+            Titles must be concise and easy to scan.
+            Categories must reflect the branch role clearly.
+            Summaries must explain why the branch matters in one concise sentence.
+            Continuation prompts must be directly usable for going deeper on that branch.
+            Do not answer the user's full request.
+            Do not include filler or overlapping branches.
+            Return only JSON matching the schema.
+            """ + "\n" + $"Prompt type: {promptType}.";
+    }
+
+    private static string BuildCompactRootPlannerInstructions(string promptType)
+    {
+        return
+            """
+            You are planning the root main node of a node-based workspace.
+            Put the foundational framing, definition, or concept setup into mainNode.
+            mainNode should explain the core idea directly instead of turning that material into a child branch.
+            Generate 3 to 5 distinct child branches, targeting 4 when the prompt is broad enough.
+            Child branches must start at the next meaningful exploration paths and must exclude the foundation.
+            Child branch titles must be concise and easy to scan.
+            Child branch summaries must be one short, useful sentence each.
+            Do not answer the user's full request as a final solution.
+            Do not include filler or overlapping branches.
+            Return only JSON matching the schema.
+            """ + "\n" + $"Prompt type: {promptType}.";
+    }
+
+    private static string BuildRichRootPlannerInstructions(string promptType)
+    {
+        return
+            """
+            You are planning the root main node of a node-based workspace.
+            Put the foundational framing, definition, or concept setup into mainNode.
+            mainNode should explain the core idea directly instead of turning that material into a child branch.
+            Generate 4 to 5 distinct child branches.
+            Child branches must start at the next meaningful exploration paths and must exclude the foundation.
+            Child branch titles must be concise and easy to scan.
+            Child branch categories must reflect the branch role clearly.
+            Child branch summaries must explain why the branch matters in one concise sentence.
+            Child continuation prompts must be directly usable for going deeper on that branch.
+            Do not answer the user's full request as a final solution.
+            Do not include filler or overlapping branches.
+            Return only JSON matching the schema.
+            """ + "\n" + $"Prompt type: {promptType}.";
+    }
+
+    private static string BuildContinuationPrompt(string prompt, string title, string summary)
+    {
+        return NormalizeChunk($"Go deeper on '{NormalizeBranchTitle(title)}' for the user's goal '{prompt}'. Focus on: {summary}");
+    }
+
+    private static string NormalizeCategory(string? category)
+    {
+        if (string.IsNullOrWhiteSpace(category))
+            return null!;
+
+        return NormalizeChunk(category);
+    }
+
+    private static string NormalizeBlockType(string? type)
+    {
+        var normalized = type?.Trim().ToLowerInvariant();
+        return normalized switch
+        {
+            "analysis" or "description" or "recommendation" or "question" or "user-input" => normalized,
+            _ => "description"
+        };
+    }
+
+    private static IReadOnlyList<LlmProviderChatMessage> BuildFallbackMessages(
+        IReadOnlyList<CanvasNode> allNodes,
+        CanvasNode selectedNode,
+        string prompt,
+        string generationMode)
+    {
+        var contextMessage = BuildContextMessage(
+            allNodes,
+            selectedNode,
+            generationMode == CanvasGenerationModes.Rich ? RichMaxContextItems : CompactMaxContextItems,
+            generationMode == CanvasGenerationModes.Rich ? RichMaxContextChars : CompactMaxContextChars);
+
+        var messages = new List<LlmProviderChatMessage>();
+        if (!string.IsNullOrWhiteSpace(contextMessage))
+        {
+            messages.Add(new LlmProviderChatMessage
+            {
+                Role = "user",
+                Content = contextMessage
+            });
+        }
+
+        messages.Add(new LlmProviderChatMessage
+        {
+            Role = "user",
+            Content =
+                """
+                Generate child branches for this canvas node.
+                Return plain text with one branch per paragraph or heading.
+                Make branches distinct, specific, and directly useful.
+                Avoid filler and do not explain the node path or canvas structure.
+                """ + "\n\nOriginal user request:\n" + prompt
+        });
+
+        return messages;
+    }
+
+    private static IReadOnlyList<LlmProviderChatMessage> BuildRootFallbackMessages(
+        IReadOnlyList<CanvasNode> allNodes,
+        CanvasNode selectedNode,
+        string prompt,
+        string generationMode)
     {
-        if (await _canvasRepository.HasLegacyMainNodeMessagesAsync(userId, canvasId))
+        var contextMessage = BuildContextMessage(
+            allNodes,
+            selectedNode,
+            generationMode == CanvasGenerationModes.Rich ? RichMaxContextItems : CompactMaxContextItems,
+            generationMode == CanvasGenerationModes.Rich ? RichMaxContextChars : CompactMaxContextChars);
+
+        var messages = new List<LlmProviderChatMessage>();
+        if (!string.IsNullOrWhiteSpace(contextMessage))
         {
-            return new CanvasGraphResponse
+            messages.Add(new LlmProviderChatMessage
             {
-                CanvasId = canvasId,
-                Mode = "legacy",
-                DefaultProvider = providers.FirstOrDefault(item => item.IsDefault)?.Provider,
-                AvailableProviders = providers.Select(item => item.Provider).ToList()
-            };
+                Role = "user",
+                Content = contextMessage
+            });
         }
 
-        var rootNode = await _canvasRepository.EnsureRootCanvasNodeAsync(userId, canvasId);
-        var nodes = await _canvasRepository.GetCanvasNodesAsync(userId, canvasId);
-
-        return new CanvasGraphResponse
+        messages.Add(new LlmProviderChatMessage
         {
-            CanvasId = canvasId,
-            Mode = "graph",
-            DefaultProvider = providers.FirstOrDefault(item => item.IsDefault)?.Provider,
-            AvailableProviders = providers.Select(item => item.Provider).ToList(),
-            RootNodeId = rootNode.Id,
-            Nodes = nodes.Select(MapNode).ToList()
-        };
+            Role = "user",
+            Content =
+                """
+                Generate content for the root main node plus child branches.
+                Start with one foundation section for the main node using a heading such as Core Definition, Definition, Overview, Concept, What Is, or Fundamentals when appropriate.
+                Then provide 3 to 5 distinct child branches as separate headings or paragraphs.
+                The foundation section must not be repeated as a child branch.
+                Make child branches concrete, distinct, and directly useful.
+                Avoid filler and do not explain canvas structure.
+                """ + "\n\nOriginal user request:\n" + prompt
+        });
+
+        return messages;
     }
 
-    private async Task EnsureCanvasExistsAsync(int userId, int canvasId)
+    private static IReadOnlyList<string> ValidateCompactPlannerResponse(CompactPlannerResponse response)
     {
-        if (canvasId <= 0)
-            throw new CanvasOperationException("A valid canvas is required.", StatusCodes.Status400BadRequest);
+        var errors = new List<string>();
+        if (response.Branches is null || response.Branches.Count < MinimumStructuredBranchCount || response.Branches.Count > 5)
+            errors.Add("The response must contain 2 to 5 branches.");
 
-        var canvas = await _canvasRepository.GetCanvasAsync(userId, canvasId);
-        if (canvas == null)
-            throw new CanvasOperationException("Canvas not found.", StatusCodes.Status404NotFound);
+        var seenTitles = new HashSet<string>(StringComparer.OrdinalIgnoreCase);
+        foreach (var branch in response.Branches ?? [])
+        {
+            if (string.IsNullOrWhiteSpace(branch.Title) || string.IsNullOrWhiteSpace(branch.Summary))
+                errors.Add("Every compact branch must include title and summary.");
+
+            var normalizedTitle = NormalizeBranchTitle(branch.Title);
+            if (!seenTitles.Add(normalizedTitle))
+                errors.Add("Compact branch titles must be unique.");
+
+            if (IsLowSignalBranch(normalizedTitle, branch.Summary))
+                errors.Add("Compact branch summaries must be substantive and non-filler.");
+        }
+
+        return errors;
     }
 
-    private ILlmProviderClient GetProviderClient(string provider)
+    private static IReadOnlyList<string> ValidateCompactRootPlannerResponse(CompactRootPlannerResponse response)
     {
-        if (_providerClients.TryGetValue(provider, out var client))
-            return client;
+        var errors = new List<string>();
+        errors.AddRange(ValidateRootMainNodeResponse(response.MainNode));
 
-        throw new InvalidOperationException($"No provider client is registered for '{provider}'.");
+        if (response.Branches is null || response.Branches.Count < MinimumStructuredBranchCount || response.Branches.Count > 5)
+            errors.Add("The root planner response must contain 2 to 5 child branches.");
+
+        var seenTitles = new HashSet<string>(StringComparer.OrdinalIgnoreCase);
+        foreach (var branch in response.Branches ?? [])
+        {
+            if (string.IsNullOrWhiteSpace(branch.Title) || string.IsNullOrWhiteSpace(branch.Summary))
+                errors.Add("Every compact root branch must include title and summary.");
+
+            var normalizedTitle = NormalizeBranchTitle(branch.Title);
+            if (!seenTitles.Add(normalizedTitle))
+                errors.Add("Compact root branch titles must be unique.");
+
+            if (IsFoundationLikeBranch(normalizedTitle))
+                errors.Add("Root child branches must exclude foundation or definition branches.");
+
+            if (IsLowSignalBranch(normalizedTitle, branch.Summary))
+                errors.Add("Compact root branch summaries must be substantive and non-filler.");
+        }
+
+        return errors;
     }
 
-    private string ResolveProvider(IReadOnlyList<LlmProviderKeyRecord> providers, string? providerOverride)
+    private static IReadOnlyList<string> ValidateRichPlannerResponse(RichPlannerResponse response)
     {
-        if (providers.Count == 0)
+        var errors = new List<string>();
+        if (response.Branches is null || response.Branches.Count < MinimumStructuredBranchCount || response.Branches.Count > 5)
+            errors.Add("The rich planner response must contain 2 to 5 branches.");
+
+        var seenTitles = new HashSet<string>(StringComparer.OrdinalIgnoreCase);
+        foreach (var branch in response.Branches ?? [])
         {
-            _logger.LogWarning("Rejected graph node expansion because no provider keys are configured.");
-            throw new LlmChatException(
-                "Add a provider API key in Settings before sending a message.",
-                LlmProviderErrorCodes.MissingKey,
-                StatusCodes.Status400BadRequest);
+            if (string.IsNullOrWhiteSpace(branch.Title)
+                || string.IsNullOrWhiteSpace(branch.Summary)
+                || string.IsNullOrWhiteSpace(branch.Category)
+                || string.IsNullOrWhiteSpace(branch.ContinuationPrompt))
+            {
+                errors.Add("Every rich branch must include title, category, summary, and continuationPrompt.");
+            }
+
+            var normalizedTitle = NormalizeBranchTitle(branch.Title);
+            if (!seenTitles.Add(normalizedTitle))
+                errors.Add("Rich branch titles must be unique.");
+
+            if (IsLowSignalBranch(normalizedTitle, branch.Summary))
+                errors.Add("Rich branch summaries must be substantive and non-filler.");
         }
 
-        if (!string.IsNullOrWhiteSpace(providerOverride))
+        return errors;
+    }
+
+    private static IReadOnlyList<string> ValidateRichRootPlannerResponse(RichRootPlannerResponse response)
+    {
+        var errors = new List<string>();
+        errors.AddRange(ValidateRootMainNodeResponse(response.MainNode));
+
+        if (response.Branches is null || response.Branches.Count < MinimumStructuredBranchCount || response.Branches.Count > 5)
+            errors.Add("The rich root planner response must contain 2 to 5 child branches.");
+
+        var seenTitles = new HashSet<string>(StringComparer.OrdinalIgnoreCase);
+        foreach (var branch in response.Branches ?? [])
         {
-            var normalizedOverride = NormalizeProvider(providerOverride);
-            if (!providers.Any(item => item.Provider == normalizedOverride))
+            if (string.IsNullOrWhiteSpace(branch.Title)
+                || string.IsNullOrWhiteSpace(branch.Summary)
+                || string.IsNullOrWhiteSpace(branch.Category)
+                || string.IsNullOrWhiteSpace(branch.ContinuationPrompt))
             {
-                throw new LlmChatException(
-                    "That provider is not configured yet.",
-                    LlmProviderErrorCodes.MissingKey,
-                    StatusCodes.Status400BadRequest);
+                errors.Add("Every rich root branch must include title, category, summary, and continuationPrompt.");
             }
 
-            return normalizedOverride;
+            var normalizedTitle = NormalizeBranchTitle(branch.Title);
+            if (!seenTitles.Add(normalizedTitle))
+                errors.Add("Rich root branch titles must be unique.");
+
+            if (IsFoundationLikeBranch(normalizedTitle))
+                errors.Add("Root child branches must exclude foundation or definition branches.");
+
+            if (IsLowSignalBranch(normalizedTitle, branch.Summary))
+                errors.Add("Rich root branch summaries must be substantive and non-filler.");
         }
 
-        return providers.FirstOrDefault(item => item.IsDefault)?.Provider
-            ?? providers.First().Provider;
+        return errors;
     }
 
-    private static IReadOnlyList<LlmProviderChatMessage> BuildProviderMessages(
-        IReadOnlyList<CanvasNode> allNodes,
-        CanvasNode selectedNode,
-        string prompt)
+    private static IReadOnlyList<string> ValidateRichDetailResponse(RichDetailResponse response)
     {
-        var nodesById = allNodes.ToDictionary(item => item.Id);
-        var path = new Stack<CanvasNode>();
-        var current = selectedNode;
+        var errors = new List<string>();
+        if (string.IsNullOrWhiteSpace(response.Content))
+            errors.Add("Rich detail content is required.");
 
-        while (true)
+        if (response.Blocks is null || response.Blocks.Count < 2 || response.Blocks.Count > 4)
+            errors.Add("Rich detail responses must include 2 to 4 blocks.");
+
+        foreach (var block in response.Blocks ?? [])
         {
-            path.Push(current);
-            if (!current.ParentNodeId.HasValue || !nodesById.TryGetValue(current.ParentNodeId.Value, out current!))
-                break;
+            if (string.IsNullOrWhiteSpace(block.Type) || string.IsNullOrWhiteSpace(block.Text))
+                errors.Add("Each detail block must include type and text.");
         }
 
-        var contextSections = path
-            .Select(node => FormatNodeContext(node))
-            .Where(section => !string.IsNullOrWhiteSpace(section))
-            .ToList();
+        return errors;
+    }
 
-        var messages = new List<LlmProviderChatMessage>();
-        if (contextSections.Count > 0)
+    private static IReadOnlyList<string> ValidateRootMainNodeResponse(RootMainNodeResponse response)
+    {
+        var errors = new List<string>();
+        if (string.IsNullOrWhiteSpace(response.Summary))
+            errors.Add("Root mainNode summary is required.");
+
+        if (string.IsNullOrWhiteSpace(response.Content))
+            errors.Add("Root mainNode content is required.");
+
+        if (response.Blocks?.Count > 4)
+            errors.Add("Root mainNode may include at most 4 blocks.");
+
+        foreach (var block in response.Blocks ?? [])
         {
-            messages.Add(new LlmProviderChatMessage
-            {
-                Role = "user",
-                Content = $"Use this node path as context:\n\n{string.Join("\n\n", contextSections)}"
-            });
+            if (string.IsNullOrWhiteSpace(block.Type) || string.IsNullOrWhiteSpace(block.Text))
+                errors.Add("Each root mainNode block must include type and text.");
         }
 
-        messages.Add(new LlmProviderChatMessage
+        foreach (var source in response.Sources ?? [])
         {
-            Role = "user",
-            Content = prompt
-        });
+            if (string.IsNullOrWhiteSpace(source.Label) || string.IsNullOrWhiteSpace(source.Url))
+                errors.Add("Each root mainNode source must include label and url.");
+        }
 
-        return messages;
+        if (IsLowSignalBranch("main node", response.Content))
+            errors.Add("Root mainNode content must be substantive.");
+
+        return errors;
     }
 
-    private static string FormatNodeContext(CanvasNode node)
+    private static List<GeneratedBranch> BuildFallbackBranches(string content)
     {
-        if (node.Kind == "main")
-            return "Main Node";
+        var jsonBranches = TryBuildFallbackBranchesFromJson(content);
+        if (jsonBranches.Count > 0)
+            return jsonBranches;
 
-        if (string.IsNullOrWhiteSpace(node.Content))
-            return node.Title;
+        return ChunkResponse(content)
+            .Select(chunk =>
+            {
+                var normalizedChunk = NormalizeChunk(chunk);
+                return new GeneratedBranch(BuildNodeTitle(chunk), normalizedChunk);
+            })
+            .Where(branch => !IsLowSignalBranch(branch.Title, branch.Content))
+            .Distinct(GeneratedBranchComparer.Instance)
+            .ToList();
+    }
+
+    private static string? ExtractJsonCandidate(string content)
+    {
+        var normalized = content.Replace("\r\n", "\n").Trim();
+        if (string.IsNullOrWhiteSpace(normalized))
+            return null;
+
+        var fencedJsonMatch = JsonFenceRegex().Match(normalized);
+        if (fencedJsonMatch.Success)
+            return fencedJsonMatch.Groups["json"].Value.Trim();
+
+        var firstBrace = normalized.IndexOf('{');
+        var lastBrace = normalized.LastIndexOf('}');
+        if (firstBrace >= 0 && lastBrace > firstBrace)
+            return normalized[firstBrace..(lastBrace + 1)];
+
+        var firstBracket = normalized.IndexOf('[');
+        var lastBracket = normalized.LastIndexOf(']');
+        if (firstBracket >= 0 && lastBracket > firstBracket)
+            return normalized[firstBracket..(lastBracket + 1)];
 
-        return $"{node.Title}\n{node.Content}";
+        return null;
     }
 
     private static IReadOnlyList<string> ChunkResponse(string content)
@@ -318,19 +1419,171 @@ private static string BuildNodeTitle(string chunk)
             .FirstOrDefault(line => !string.IsNullOrWhiteSpace(line))
             ?? "Response Node";
 
+        firstLine = NormalizeBranchTitle(firstLine);
+
         if (firstLine.Length <= NodeTitleMaxLength)
             return firstLine;
 
         return $"{firstLine[..(NodeTitleMaxLength - 3)].TrimEnd()}...";
     }
 
-    private string NormalizeProvider(string provider)
+    private static List<GeneratedBranch> TryBuildFallbackBranchesFromJson(string content)
+    {
+        var candidateJson = ExtractJsonCandidate(content);
+        if (string.IsNullOrWhiteSpace(candidateJson))
+            return [];
+
+        try
+        {
+            using var document = JsonDocument.Parse(candidateJson);
+            if (!document.RootElement.TryGetProperty("branches", out var branchesElement)
+                || branchesElement.ValueKind != JsonValueKind.Array)
+            {
+                return [];
+            }
+
+            return branchesElement
+                .EnumerateArray()
+                .Select(branch =>
+                {
+                    var title = branch.TryGetProperty("title", out var titleElement)
+                        ? NormalizeBranchTitle(titleElement.GetString() ?? string.Empty)
+                        : string.Empty;
+                    var summary = branch.TryGetProperty("summary", out var summaryElement)
+                        ? NormalizeChunk(summaryElement.GetString() ?? string.Empty)
+                        : string.Empty;
+
+                    return new GeneratedBranch(title, summary);
+                })
+                .Where(branch => !IsLowSignalBranch(branch.Title, branch.Content))
+                .Distinct(GeneratedBranchComparer.Instance)
+                .ToList();
+        }
+        catch (JsonException)
+        {
+            return [];
+        }
+    }
+
+    private static string NormalizeBranchTitle(string title)
+    {
+        var normalized = StripMarkdownPrefix(title).Trim();
+        normalized = normalized.Trim('"', '\'', '`', '*', '-', '•', ':');
+        normalized = WhitespaceRegex().Replace(normalized, " ").Trim();
+        return string.IsNullOrWhiteSpace(normalized) ? "Response Node" : normalized;
+    }
+
+    private static bool IsFoundationLikeBranch(string? title)
+    {
+        var normalized = NormalizeBranchTitle(title ?? string.Empty).ToLowerInvariant();
+        if (string.IsNullOrWhiteSpace(normalized))
+            return false;
+
+        return normalized is "overview" or "definition" or "core definition" or "concept" or "fundamentals" or "basics"
+            || normalized.StartsWith("what is ", StringComparison.Ordinal)
+            || normalized.Contains(" definition", StringComparison.Ordinal)
+            || normalized.Contains("overview", StringComparison.Ordinal)
+            || normalized.Contains("concept", StringComparison.Ordinal)
+            || normalized.Contains("fundamental", StringComparison.Ordinal)
+            || normalized.Contains("basics", StringComparison.Ordinal)
+            || normalized.Contains("introduction", StringComparison.Ordinal);
+    }
+
+    private static bool IsFoundationGraphChild(CanvasNode node)
+    {
+        if (IsFoundationLikeBranch(node.Title))
+            return true;
+
+        var normalizedCategory = NormalizeCategory(node.Category);
+        if (string.IsNullOrWhiteSpace(normalizedCategory))
+            return false;
+
+        var lowerCategory = normalizedCategory.ToLowerInvariant();
+        return lowerCategory.Contains("foundation", StringComparison.Ordinal)
+            || lowerCategory.Contains("foundational", StringComparison.Ordinal)
+            || lowerCategory.Contains("core concept", StringComparison.Ordinal)
+            || lowerCategory.Contains("concept", StringComparison.Ordinal)
+            || lowerCategory.Contains("overview", StringComparison.Ordinal);
+    }
+
+    private static int GetFoundationCandidatePriority(CanvasNode node)
+    {
+        var normalizedCategory = NormalizeCategory(node.Category)?.ToLowerInvariant();
+        if (!string.IsNullOrWhiteSpace(normalizedCategory))
+        {
+            if (normalizedCategory.Contains("foundational", StringComparison.Ordinal)
+                || normalizedCategory.Contains("foundation", StringComparison.Ordinal))
+            {
+                return 0;
+            }
+
+            if (normalizedCategory.Contains("concept", StringComparison.Ordinal)
+                || normalizedCategory.Contains("overview", StringComparison.Ordinal))
+            {
+                return 1;
+            }
+        }
+
+        return IsFoundationLikeBranch(node.Title) ? 2 : 3;
+    }
+
+    private static string NormalizeChunk(string content)
+    {
+        var normalized = content.Replace("\r\n", "\n").Trim();
+        return WhitespaceRegex().Replace(normalized, " ").Trim();
+    }
+
+    private static string NormalizeMarkdownBody(string content)
+    {
+        var normalized = content.Replace("\r\n", "\n").Trim();
+        if (string.IsNullOrWhiteSpace(normalized))
+            return string.Empty;
+
+        normalized = Regex.Replace(normalized, @"[ \t]+\n", "\n");
+        normalized = Regex.Replace(normalized, @"\n{3,}", "\n\n");
+        return normalized.Trim();
+    }
+
+    private static string AppendRootContent(string existingContent, string latestContent)
+    {
+        var normalizedLatest = NormalizeMarkdownBody(latestContent);
+        if (string.IsNullOrWhiteSpace(normalizedLatest))
+            return NormalizeMarkdownBody(existingContent);
+
+        var normalizedExisting = NormalizeMarkdownBody(existingContent);
+        if (string.IsNullOrWhiteSpace(normalizedExisting))
+            return normalizedLatest;
+
+        return $"{normalizedExisting}\n\n---\n\n## Update\n\n{normalizedLatest}";
+    }
+
+    private static bool IsLowSignalBranch(string? title, string? content)
     {
-        var normalizedProvider = LlmProviderNames.Normalize(provider);
-        if (!LlmProviderNames.IsSupported(normalizedProvider))
-            throw new LlmChatException("Unsupported provider.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status400BadRequest);
+        var normalizedTitle = NormalizeBranchTitle(title ?? string.Empty).Trim().ToLowerInvariant();
+        var normalizedContent = NormalizeChunk(content ?? string.Empty).Trim().ToLowerInvariant();
+
+        if (string.IsNullOrWhiteSpace(normalizedTitle) || string.IsNullOrWhiteSpace(normalizedContent))
+            return true;
+
+        if (normalizedContent.Length < 30)
+            return true;
+
+        if (normalizedTitle.EndsWith(':') || normalizedContent.EndsWith(':'))
+            return true;
 
-        return normalizedProvider;
+        if (normalizedContent == normalizedTitle)
+            return true;
+
+        if (normalizedTitle is "let's break it down" or "overview" or "miscellaneous" or "other ideas")
+            return true;
+
+        if (normalizedContent.Contains("this node path")
+            || normalizedContent.Contains("what a node path means")
+            || normalizedContent.Contains("greater than symbol")
+            || normalizedContent.Contains("child-parent relationship"))
+            return true;
+
+        return false;
     }
 
     private static string StripMarkdownPrefix(string line)
@@ -338,6 +1591,22 @@ private static string StripMarkdownPrefix(string line)
         return MarkdownPrefixRegex().Replace(line, string.Empty).Trim();
     }
 
+    private static string ClipToLength(string content, int maxLength)
+    {
+        if (maxLength <= 0 || string.IsNullOrWhiteSpace(content))
+            return string.Empty;
+
+        if (content.Length <= maxLength)
+            return content;
+
+        var clipped = content[..maxLength].TrimEnd();
+        var lastSpace = clipped.LastIndexOf(' ');
+        if (lastSpace >= maxLength / 2)
+            clipped = clipped[..lastSpace];
+
+        return clipped.TrimEnd() + "...";
+    }
+
     private static CanvasGraphNodeResponse MapNode(CanvasNode node)
     {
         return new CanvasGraphNodeResponse
@@ -346,8 +1615,23 @@ private static CanvasGraphNodeResponse MapNode(CanvasNode node)
             ParentNodeId = node.ParentNodeId,
             Kind = node.Kind,
             Title = node.Title,
+            GenerationMode = CanvasGenerationModes.Normalize(node.GenerationMode),
+            Summary = string.IsNullOrWhiteSpace(node.Summary) ? (string.IsNullOrWhiteSpace(node.Content) ? null : node.Content) : node.Summary,
+            Category = node.Category,
             Content = node.Content,
             SourcePrompt = node.SourcePrompt,
+            ContinuationPrompt = node.ContinuationPrompt,
+            Blocks = node.Blocks.Select(block => new CanvasGraphNodeBlockResponse
+            {
+                Type = block.Type,
+                Text = block.Text,
+                Options = [.. block.Options]
+            }).ToList(),
+            Sources = node.Sources.Select(source => new CanvasGraphNodeSourceResponse
+            {
+                Label = source.Label,
+                Url = source.Url
+            }).ToList(),
             Depth = node.Depth,
             SiblingOrder = node.SiblingOrder,
             CreatedAt = node.CreatedAt,
@@ -355,6 +1639,246 @@ private static CanvasGraphNodeResponse MapNode(CanvasNode node)
         };
     }
 
+    private static readonly JsonSerializerOptions JsonSerializerOptions = new()
+    {
+        PropertyNameCaseInsensitive = true
+    };
+
+    private const string CompactPlannerSchema =
+        """
+        {
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {
+            "branches": {
+              "type": "array",
+              "minItems": 2,
+              "maxItems": 5,
+              "items": {
+                "type": "object",
+                "additionalProperties": false,
+                "properties": {
+                  "title": { "type": "string" },
+                  "summary": { "type": "string" }
+                },
+                "required": ["title", "summary"]
+              }
+            }
+          },
+          "required": ["branches"]
+        }
+        """;
+
+    private const string CompactRootPlannerSchema =
+        """
+        {
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {
+            "mainNode": {
+              "type": "object",
+              "additionalProperties": false,
+              "properties": {
+                "summary": { "type": "string" },
+                "content": { "type": "string" },
+                "blocks": {
+                  "type": "array",
+                  "maxItems": 4,
+                  "items": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "type": { "type": "string" },
+                      "text": { "type": "string" },
+                      "options": {
+                        "type": "array",
+                        "items": { "type": "string" }
+                      }
+                    },
+                    "required": ["type", "text", "options"]
+                  }
+                },
+                "sources": {
+                  "type": "array",
+                  "items": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "label": { "type": "string" },
+                      "url": { "type": "string" }
+                    },
+                    "required": ["label", "url"]
+                  }
+                }
+              },
+              "required": ["summary", "content"]
+            },
+            "branches": {
+              "type": "array",
+              "minItems": 2,
+              "maxItems": 5,
+              "items": {
+                "type": "object",
+                "additionalProperties": false,
+                "properties": {
+                  "title": { "type": "string" },
+                  "summary": { "type": "string" }
+                },
+                "required": ["title", "summary"]
+              }
+            }
+          },
+          "required": ["mainNode", "branches"]
+        }
+        """;
+
+    private const string RichPlannerSchema =
+        """
+        {
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {
+            "branches": {
+              "type": "array",
+              "minItems": 2,
+              "maxItems": 5,
+              "items": {
+                "type": "object",
+                "additionalProperties": false,
+                "properties": {
+                  "title": { "type": "string" },
+                  "category": { "type": "string" },
+                  "summary": { "type": "string" },
+                  "continuationPrompt": { "type": "string" }
+                },
+                "required": ["title", "category", "summary", "continuationPrompt"]
+              }
+            }
+          },
+          "required": ["branches"]
+        }
+        """;
+
+    private const string RichRootPlannerSchema =
+        """
+        {
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {
+            "mainNode": {
+              "type": "object",
+              "additionalProperties": false,
+              "properties": {
+                "summary": { "type": "string" },
+                "content": { "type": "string" },
+                "blocks": {
+                  "type": "array",
+                  "maxItems": 4,
+                  "items": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "type": { "type": "string" },
+                      "text": { "type": "string" },
+                      "options": {
+                        "type": "array",
+                        "items": { "type": "string" }
+                      }
+                    },
+                    "required": ["type", "text", "options"]
+                  }
+                },
+                "sources": {
+                  "type": "array",
+                  "items": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "label": { "type": "string" },
+                      "url": { "type": "string" }
+                    },
+                    "required": ["label", "url"]
+                  }
+                }
+              },
+              "required": ["summary", "content"]
+            },
+            "branches": {
+              "type": "array",
+              "minItems": 2,
+              "maxItems": 5,
+              "items": {
+                "type": "object",
+                "additionalProperties": false,
+                "properties": {
+                  "title": { "type": "string" },
+                  "category": { "type": "string" },
+                  "summary": { "type": "string" },
+                  "continuationPrompt": { "type": "string" }
+                },
+                "required": ["title", "category", "summary", "continuationPrompt"]
+              }
+            }
+          },
+          "required": ["mainNode", "branches"]
+        }
+        """;
+
+    private const string RichDetailSchema =
+        """
+        {
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {
+            "content": { "type": "string" },
+            "blocks": {
+              "type": "array",
+              "minItems": 2,
+              "maxItems": 4,
+              "items": {
+                "type": "object",
+                "additionalProperties": false,
+                "properties": {
+                  "type": { "type": "string" },
+                  "text": { "type": "string" },
+                  "options": {
+                    "type": "array",
+                    "items": { "type": "string" }
+                  }
+                },
+                "required": ["type", "text", "options"]
+              }
+            },
+            "sources": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "additionalProperties": false,
+                "properties": {
+                  "label": { "type": "string" },
+                  "url": { "type": "string" }
+                },
+                "required": ["label", "url"]
+              }
+            }
+          },
+          "required": ["content", "blocks", "sources"]
+        }
+        """;
+
+    private const string RichDetailInstructions =
+        """
+        You are enriching one branch in a node workspace.
+        Expand only the selected branch.
+        Content must be substantive, concrete, and directly useful.
+        Include 2 to 4 short blocks using only relevant block types.
+        Include sources only when they are genuinely useful and public.
+        Return only JSON matching the schema.
+        """;
+
+    [GeneratedRegex(@"```(?:json)?\s*(?<json>[\s\S]*?)```", RegexOptions.IgnoreCase)]
+    private static partial Regex JsonFenceRegex();
+
     [GeneratedRegex(@"^#{1,6}\s+")]
     private static partial Regex HeadingRegex();
 
@@ -369,4 +1893,123 @@ private static CanvasGraphNodeResponse MapNode(CanvasNode node)
 
     [GeneratedRegex(@"^(#{1,6}\s+|(\*|-|\+|\d+\.)\s+)")]
     private static partial Regex MarkdownPrefixRegex();
+
+    [GeneratedRegex(@"\s+")]
+    private static partial Regex WhitespaceRegex();
+
+    private sealed class CompactPlannerResponse
+    {
+        public List<CompactPlannerBranch> Branches { get; set; } = [];
+    }
+
+    private sealed class CompactRootPlannerResponse
+    {
+        public RootMainNodeResponse MainNode { get; set; } = new();
+        public List<CompactPlannerBranch> Branches { get; set; } = [];
+    }
+
+    private sealed class CompactPlannerBranch
+    {
+        public string Title { get; set; } = string.Empty;
+        public string Summary { get; set; } = string.Empty;
+    }
+
+    private sealed class RichPlannerResponse
+    {
+        public List<RichPlannerBranch> Branches { get; set; } = [];
+    }
+
+    private sealed class RichRootPlannerResponse
+    {
+        public RootMainNodeResponse MainNode { get; set; } = new();
+        public List<RichPlannerBranch> Branches { get; set; } = [];
+    }
+
+    private sealed class RichPlannerBranch
+    {
+        public string Title { get; set; } = string.Empty;
+        public string Category { get; set; } = string.Empty;
+        public string Summary { get; set; } = string.Empty;
+        public string ContinuationPrompt { get; set; } = string.Empty;
+    }
+
+    private sealed class RootMainNodeResponse
+    {
+        public string Summary { get; set; } = string.Empty;
+        public string Content { get; set; } = string.Empty;
+        public List<RichDetailBlock> Blocks { get; set; } = [];
+        public List<RichDetailSource> Sources { get; set; } = [];
+    }
+
+    private sealed class RichDetailResponse
+    {
+        public string Content { get; set; } = string.Empty;
+        public List<RichDetailBlock> Blocks { get; set; } = [];
+        public List<RichDetailSource> Sources { get; set; } = [];
+    }
+
+    private sealed class RichDetailBlock
+    {
+        public string Type { get; set; } = string.Empty;
+        public string Text { get; set; } = string.Empty;
+        public List<string> Options { get; set; } = [];
+    }
+
+    private sealed class RichDetailSource
+    {
+        public string Label { get; set; } = string.Empty;
+        public string Url { get; set; } = string.Empty;
+    }
+
+    private sealed class RootNodeExpansionResult
+    {
+        public CanvasNodeUpdateInput? MainNode { get; set; }
+        public IReadOnlyList<CanvasNodeCreateInput> ChildNodes { get; set; } = [];
+    }
+
+    private sealed record GeneratedBranch(string Title, string Content);
+
+    private sealed class GeneratedBranchComparer : IEqualityComparer<GeneratedBranch>
+    {
+        public static GeneratedBranchComparer Instance { get; } = new();
+
+        public bool Equals(GeneratedBranch? x, GeneratedBranch? y)
+        {
+            if (ReferenceEquals(x, y)) return true;
+            if (x is null || y is null) return false;
+
+            return string.Equals(x.Title, y.Title, StringComparison.OrdinalIgnoreCase)
+                && string.Equals(x.Content, y.Content, StringComparison.OrdinalIgnoreCase);
+        }
+
+        public int GetHashCode(GeneratedBranch obj)
+        {
+            return HashCode.Combine(
+                obj.Title.ToLowerInvariant(),
+                obj.Content.ToLowerInvariant());
+        }
+    }
+
+    private sealed class CanvasNodeCreateInputComparer : IEqualityComparer<CanvasNodeCreateInput>
+    {
+        public static CanvasNodeCreateInputComparer Instance { get; } = new();
+
+        public bool Equals(CanvasNodeCreateInput? x, CanvasNodeCreateInput? y)
+        {
+            if (ReferenceEquals(x, y)) return true;
+            if (x is null || y is null) return false;
+
+            return string.Equals(x.Title, y.Title, StringComparison.OrdinalIgnoreCase)
+                && string.Equals(x.Summary ?? x.Content, y.Summary ?? y.Content, StringComparison.OrdinalIgnoreCase)
+                && string.Equals(x.GenerationMode, y.GenerationMode, StringComparison.OrdinalIgnoreCase);
+        }
+
+        public int GetHashCode(CanvasNodeCreateInput obj)
+        {
+            return HashCode.Combine(
+                obj.Title.ToLowerInvariant(),
+                (obj.Summary ?? obj.Content).ToLowerInvariant(),
+                obj.GenerationMode.ToLowerInvariant());
+        }
+    }
 }
diff --git a/backend/Coliee.API/Services/CanvasProviderResolution.cs b/backend/Coliee.API/Services/CanvasProviderResolution.cs
new file mode 100644
index 0000000..49cbd81
--- /dev/null
+++ b/backend/Coliee.API/Services/CanvasProviderResolution.cs
@@ -0,0 +1,7 @@
+using Coliee.API.Models;
+
+namespace Coliee.API.Services;
+
+public sealed record CanvasProviderResolution(
+    string Provider,
+    IReadOnlyList<LlmProviderKeyRecord> Providers);
diff --git a/backend/Coliee.API/Services/CanvasProviderResolver.cs b/backend/Coliee.API/Services/CanvasProviderResolver.cs
new file mode 100644
index 0000000..8444c2b
--- /dev/null
+++ b/backend/Coliee.API/Services/CanvasProviderResolver.cs
@@ -0,0 +1,47 @@
+using Coliee.API.Data;
+using Microsoft.AspNetCore.Http;
+
+namespace Coliee.API.Services;
+
+public class CanvasProviderResolver : ICanvasProviderResolver
+{
+    private readonly ILlmRepository _llmRepository;
+    private readonly ILogger<CanvasProviderResolver> _logger;
+
+    public CanvasProviderResolver(ILlmRepository llmRepository, ILogger<CanvasProviderResolver> logger)
+    {
+        _llmRepository = llmRepository;
+        _logger = logger;
+    }
+
+    public async Task<CanvasProviderResolution> ResolveAsync(int userId, string? providerOverride)
+    {
+        var providers = await _llmRepository.GetProviderKeysAsync(userId);
+        if (providers.Count == 0)
+        {
+            _logger.LogWarning("Rejected canvas generation because no provider keys are configured for user {UserId}.", userId);
+            throw new LlmChatException(
+                "Add a provider API key in Settings before creating a canvas.",
+                LlmProviderErrorCodes.MissingKey,
+                StatusCodes.Status400BadRequest);
+        }
+
+        if (!string.IsNullOrWhiteSpace(providerOverride))
+        {
+            var normalizedOverride = providerOverride.Trim().ToLowerInvariant();
+            if (!providers.Any(item => item.Provider == normalizedOverride))
+            {
+                throw new LlmChatException(
+                    "That provider is not configured yet.",
+                    LlmProviderErrorCodes.MissingKey,
+                    StatusCodes.Status400BadRequest);
+            }
+
+            return new CanvasProviderResolution(normalizedOverride, providers);
+        }
+
+        return new CanvasProviderResolution(
+            providers.FirstOrDefault(item => item.IsDefault)?.Provider ?? providers.First().Provider,
+            providers);
+    }
+}
diff --git a/backend/Coliee.API/Services/CanvasService.cs b/backend/Coliee.API/Services/CanvasService.cs
index 456aaaa..e8d33dd 100644
--- a/backend/Coliee.API/Services/CanvasService.cs
+++ b/backend/Coliee.API/Services/CanvasService.cs
@@ -1,8 +1,6 @@
 using System.Text.RegularExpressions;
 using Coliee.API.Data;
 using Coliee.API.DTOs;
-using Microsoft.AspNetCore.Http;
-
 namespace Coliee.API.Services;
 
 public partial class CanvasService : ICanvasService
@@ -17,19 +15,6 @@ public CanvasService(ICanvasRepository canvasRepository, ILogger<CanvasService>
         _logger = logger;
     }
 
-    public async Task<CanvasSummaryResponse> CreateCanvasAsync(int userId, string firstPrompt)
-    {
-        var normalizedPrompt = NormalizePrompt(firstPrompt);
-        if (string.IsNullOrWhiteSpace(normalizedPrompt))
-            throw new CanvasOperationException("A first prompt is required to create a canvas.", StatusCodes.Status400BadRequest);
-
-        var title = BuildTitle(normalizedPrompt);
-        var canvas = await _canvasRepository.CreateCanvasAsync(userId, title);
-        _logger.LogInformation("Created canvas {CanvasId} for user {UserId}.", canvas.Id, userId);
-
-        return MapCanvas(canvas);
-    }
-
     public async Task<IReadOnlyList<CanvasSummaryResponse>> GetCanvasesAsync(int userId)
     {
         var canvases = await _canvasRepository.GetCanvasesAsync(userId);
@@ -70,11 +55,6 @@ private static CanvasSummaryResponse MapCanvas(Models.Canvas canvas)
         };
     }
 
-    private static string NormalizePrompt(string firstPrompt)
-    {
-        return WhitespaceRegex().Replace(firstPrompt.Trim(), " ");
-    }
-
     private static string NormalizeTitle(string title)
     {
         return WhitespaceRegex().Replace(title.Trim(), " ");
@@ -93,19 +73,6 @@ private async Task EnsureCanvasAccessAsync(int userId, int canvasId)
             throw new CanvasOperationException("You do not have access to that canvas.", StatusCodes.Status403Forbidden);
     }
 
-    private static string BuildTitle(string normalizedPrompt)
-    {
-        if (normalizedPrompt.Length <= TitleMaxLength)
-            return normalizedPrompt;
-
-        var truncated = normalizedPrompt[..TitleMaxLength].TrimEnd();
-        var splitIndex = truncated.LastIndexOf(' ');
-        if (splitIndex >= TitleMaxLength / 2)
-            truncated = truncated[..splitIndex];
-
-        return $"{truncated.TrimEnd()}...";
-    }
-
     [GeneratedRegex(@"\s+")]
     private static partial Regex WhitespaceRegex();
 }
diff --git a/backend/Coliee.API/Services/ChatNodeContextCompactionService.cs b/backend/Coliee.API/Services/ChatNodeContextCompactionService.cs
new file mode 100644
index 0000000..85d2e79
--- /dev/null
+++ b/backend/Coliee.API/Services/ChatNodeContextCompactionService.cs
@@ -0,0 +1,426 @@
+using System.Text;
+using System.Text.Json;
+using Coliee.API.Models;
+
+namespace Coliee.API.Services;
+
+public class ChatNodeContextCompactionService : IChatNodeContextCompactionService
+{
+    private static readonly JsonSerializerOptions SnapshotJsonOptions = new()
+    {
+        PropertyNameCaseInsensitive = true
+    };
+    private const int DefaultMaxPromptChars = 24000;
+    private const int DefaultReserveChars = 4000;
+    private const int DefaultFallbackWindowMessages = 12;
+    private const int CompactionMaxOutputTokens = 512;
+    private const int MessageOverheadChars = 120;
+    private const int ImageOverheadChars = 1200;
+    private readonly IConfiguration _configuration;
+    private readonly ILogger<ChatNodeContextCompactionService> _logger;
+
+    public ChatNodeContextCompactionService(
+        IConfiguration configuration,
+        ILogger<ChatNodeContextCompactionService> logger)
+    {
+        _configuration = configuration;
+        _logger = logger;
+    }
+
+    public async Task<ChatNodePromptContextResult> BuildPromptContextAsync(
+        int userId,
+        int sessionId,
+        ChatNode node,
+        IReadOnlyList<ChatMessage> history,
+        CanvasConversationMessage nextMessage,
+        ILlmProviderClient providerClient,
+        string apiKey,
+        string? modelOverride,
+        bool includeFormattingInstruction,
+        bool compactAllHistory = false,
+        ChatNodeContextSnapshot? initialSnapshot = null,
+        CancellationToken cancellationToken = default)
+    {
+        _ = userId;
+        _ = sessionId;
+
+        var limit = ResolveContextLimit(providerClient.Provider, modelOverride);
+        var snapshot = initialSnapshot == null ? null : CloneSnapshot(initialSnapshot);
+        var rawHistory = history
+            .Where(message => snapshot == null || message.Id > snapshot.BoundaryMessageId)
+            .OrderBy(message => message.Id)
+            .ToList();
+
+        var snapshotChanged = false;
+        if (compactAllHistory && rawHistory.Count > 0)
+        {
+            snapshot = await CompactHistoryAsync(
+                providerClient,
+                apiKey,
+                modelOverride,
+                snapshot,
+                rawHistory,
+                cancellationToken,
+                boundaryMessageId: rawHistory.Last().Id);
+            snapshotChanged = true;
+            rawHistory.Clear();
+        }
+
+        while (EstimateRequestChars(
+            BuildSystemPrompt(node, snapshot, includeFormattingInstruction),
+            rawHistory,
+            nextMessage) > limit.PromptBudgetChars)
+        {
+            var chunk = TakeOldestCompactableChunk(rawHistory);
+            if (chunk.Count == 0)
+            {
+                return BuildFallbackContext(
+                    node,
+                    snapshot,
+                    rawHistory,
+                    nextMessage,
+                    includeFormattingInstruction,
+                    limit,
+                    snapshotChanged || compactAllHistory);
+            }
+
+            snapshot = await CompactHistoryAsync(
+                providerClient,
+                apiKey,
+                modelOverride,
+                snapshot,
+                chunk,
+                cancellationToken,
+                boundaryMessageId: chunk.Last().Id);
+            snapshotChanged = true;
+            rawHistory = rawHistory.Skip(chunk.Count).ToList();
+        }
+
+        var systemPrompt = BuildSystemPrompt(node, snapshot, includeFormattingInstruction);
+        var messages = rawHistory
+            .Select(message => new CanvasConversationMessage(message.Role, message.Content, message.ImageUrl))
+            .ToList();
+        messages.Add(nextMessage);
+
+        return new ChatNodePromptContextResult
+        {
+            SystemPrompt = systemPrompt,
+            Messages = messages,
+            Snapshot = snapshotChanged || compactAllHistory ? snapshot : null
+        };
+    }
+
+    private async Task<ChatNodeContextSnapshot> CompactHistoryAsync(
+        ILlmProviderClient providerClient,
+        string apiKey,
+        string? modelOverride,
+        ChatNodeContextSnapshot? existingSnapshot,
+        IReadOnlyList<ChatMessage> chunk,
+        CancellationToken cancellationToken,
+        int boundaryMessageId)
+    {
+        if (chunk.Count == 0)
+        {
+            var empty = existingSnapshot != null ? CloneSnapshot(existingSnapshot) : new ChatNodeContextSnapshot();
+            empty.BoundaryMessageId = boundaryMessageId;
+            return empty;
+        }
+
+        var request = new LlmProviderStructuredRequest
+        {
+            Instructions = BuildCompactionInstructions(existingSnapshot),
+            SchemaName = "chat_node_context_snapshot",
+            SchemaJson = """
+                {
+                  "type": "object",
+                  "properties": {
+                    "facts": { "type": "array", "items": { "type": "string" } },
+                    "decisions": { "type": "array", "items": { "type": "string" } },
+                    "openQuestions": { "type": "array", "items": { "type": "string" } },
+                    "carryForwardInstructions": { "type": "array", "items": { "type": "string" } }
+                  },
+                  "required": ["facts", "decisions", "openQuestions", "carryForwardInstructions"],
+                  "additionalProperties": false
+                }
+                """,
+            Messages =
+            [
+                new LlmProviderChatMessage
+                {
+                    Role = "user",
+                    Content = BuildCompactionTranscript(existingSnapshot, chunk)
+                }
+            ],
+            MaxOutputTokens = CompactionMaxOutputTokens
+        };
+
+        try
+        {
+            var result = await providerClient.SendStructuredJsonAsync(
+                apiKey,
+                request,
+                modelOverride,
+                cancellationToken);
+
+            var incoming = DeserializeSnapshot(result.Content, boundaryMessageId);
+            return MergeSnapshot(existingSnapshot, incoming, boundaryMessageId);
+        }
+        catch (Exception ex) when (ex is LlmChatException or JsonException or InvalidOperationException)
+        {
+            _logger.LogWarning(ex, "Context compaction failed; retaining the existing snapshot.");
+            var fallback = existingSnapshot != null ? CloneSnapshot(existingSnapshot) : new ChatNodeContextSnapshot();
+            fallback.BoundaryMessageId = boundaryMessageId;
+            return fallback;
+        }
+    }
+
+    private ChatNodePromptContextResult BuildFallbackContext(
+        ChatNode node,
+        ChatNodeContextSnapshot? snapshot,
+        IReadOnlyList<ChatMessage> rawHistory,
+        CanvasConversationMessage nextMessage,
+        bool includeFormattingInstruction,
+        ContextLimit limit,
+        bool snapshotChanged)
+    {
+        var retained = TrimToRecentWindow(rawHistory, limit.FallbackWindowMessages);
+        while (EstimateRequestChars(BuildSystemPrompt(node, snapshot, includeFormattingInstruction), retained, nextMessage) > limit.PromptBudgetChars
+            && retained.Count > 1)
+        {
+            retained.RemoveAt(0);
+        }
+
+        return new ChatNodePromptContextResult
+        {
+            SystemPrompt = BuildSystemPrompt(node, snapshot, includeFormattingInstruction),
+            Messages = retained
+                .Select(message => new CanvasConversationMessage(message.Role, message.Content, message.ImageUrl))
+                .Append(nextMessage)
+                .ToList(),
+            Snapshot = snapshotChanged ? snapshot : null
+        };
+    }
+
+    private static string BuildCompactionInstructions(ChatNodeContextSnapshot? existingSnapshot)
+    {
+        var builder = new StringBuilder();
+        builder.AppendLine("You are compressing canvas chat history into durable memory.");
+        builder.AppendLine("Return only JSON that matches the schema.");
+        builder.AppendLine("Preserve durable information, not exact wording.");
+        builder.AppendLine("Deduplicate repeated items and keep entries concise.");
+        if (existingSnapshot != null)
+            builder.AppendLine("Merge the new history with the existing snapshot.");
+
+        return builder.ToString().Trim();
+    }
+
+    private static string BuildCompactionTranscript(ChatNodeContextSnapshot? existingSnapshot, IReadOnlyList<ChatMessage> chunk)
+    {
+        var builder = new StringBuilder();
+        if (existingSnapshot != null)
+        {
+            builder.AppendLine("Existing snapshot:");
+            builder.AppendLine(JsonSerializer.Serialize(existingSnapshot));
+            builder.AppendLine();
+        }
+
+        builder.AppendLine("Conversation chunk:");
+        foreach (var message in chunk)
+        {
+            builder.Append('[')
+                .Append(message.Id)
+                .Append("] ")
+                .Append(message.Role)
+                .Append(": ")
+                .AppendLine(message.Content);
+
+            if (!string.IsNullOrWhiteSpace(message.ImageUrl))
+                builder.AppendLine($"image: {message.ImageUrl}");
+        }
+
+        return builder.ToString().Trim();
+    }
+
+    private static ChatNodeContextSnapshot DeserializeSnapshot(string json, int boundaryMessageId)
+    {
+        var snapshot = JsonSerializer.Deserialize<ChatNodeContextSnapshot>(json, SnapshotJsonOptions) ?? new ChatNodeContextSnapshot();
+        snapshot.BoundaryMessageId = boundaryMessageId;
+        snapshot.Facts = NormalizeItems(snapshot.Facts);
+        snapshot.Decisions = NormalizeItems(snapshot.Decisions);
+        snapshot.OpenQuestions = NormalizeItems(snapshot.OpenQuestions);
+        snapshot.CarryForwardInstructions = NormalizeItems(snapshot.CarryForwardInstructions);
+        return snapshot;
+    }
+
+    private static ChatNodeContextSnapshot MergeSnapshot(
+        ChatNodeContextSnapshot? existingSnapshot,
+        ChatNodeContextSnapshot incomingSnapshot,
+        int boundaryMessageId)
+    {
+        var merged = existingSnapshot != null ? CloneSnapshot(existingSnapshot) : new ChatNodeContextSnapshot();
+        merged.BoundaryMessageId = boundaryMessageId;
+        merged.Facts = MergeItems(merged.Facts, incomingSnapshot.Facts);
+        merged.Decisions = MergeItems(merged.Decisions, incomingSnapshot.Decisions);
+        merged.OpenQuestions = MergeItems(merged.OpenQuestions, incomingSnapshot.OpenQuestions);
+        merged.CarryForwardInstructions = MergeItems(merged.CarryForwardInstructions, incomingSnapshot.CarryForwardInstructions);
+        return merged;
+    }
+
+    private static ChatNodeContextSnapshot CloneSnapshot(ChatNodeContextSnapshot snapshot)
+    {
+        return new ChatNodeContextSnapshot
+        {
+            BoundaryMessageId = snapshot.BoundaryMessageId,
+            Facts = snapshot.Facts.ToList(),
+            Decisions = snapshot.Decisions.ToList(),
+            OpenQuestions = snapshot.OpenQuestions.ToList(),
+            CarryForwardInstructions = snapshot.CarryForwardInstructions.ToList()
+        };
+    }
+
+    private static List<string> MergeItems(IReadOnlyList<string> existing, IReadOnlyList<string> incoming)
+    {
+        return existing
+            .Concat(incoming)
+            .Select(item => item.Trim())
+            .Where(item => !string.IsNullOrWhiteSpace(item))
+            .Distinct(StringComparer.OrdinalIgnoreCase)
+            .ToList();
+    }
+
+    private static List<string> NormalizeItems(IReadOnlyList<string>? items)
+    {
+        if (items == null)
+            return [];
+
+        return items
+            .Select(item => item.Trim())
+            .Where(item => !string.IsNullOrWhiteSpace(item))
+            .Distinct(StringComparer.OrdinalIgnoreCase)
+            .ToList();
+    }
+
+    private static string? BuildSystemPrompt(
+        ChatNode node,
+        ChatNodeContextSnapshot? snapshot,
+        bool includeFormattingInstruction)
+    {
+        var builder = new StringBuilder();
+        if (!string.IsNullOrWhiteSpace(node.Content))
+        {
+            builder.AppendLine("Node context:");
+            builder.AppendLine(node.Content.Trim());
+            builder.AppendLine();
+        }
+
+        if (snapshot != null && (
+            snapshot.Facts.Count > 0
+            || snapshot.Decisions.Count > 0
+            || snapshot.OpenQuestions.Count > 0
+            || snapshot.CarryForwardInstructions.Count > 0))
+        {
+            builder.AppendLine("Compacted memory:");
+            AppendSection(builder, "Facts", snapshot.Facts);
+            AppendSection(builder, "Decisions", snapshot.Decisions);
+            AppendSection(builder, "Open questions", snapshot.OpenQuestions);
+            AppendSection(builder, "Carry-forward instructions", snapshot.CarryForwardInstructions);
+            builder.AppendLine();
+        }
+
+        if (includeFormattingInstruction)
+        {
+            builder.AppendLine("Formatting instruction:");
+            builder.AppendLine("Always format your response as a professional Rich Document. Use # and ## headers, emojis as visual anchors, and --- (horizontal lines) to separate major ideas. Structure your breakdown with lists and bold highlights.");
+        }
+
+        var systemPrompt = builder.ToString().Trim();
+        return string.IsNullOrWhiteSpace(systemPrompt) ? null : systemPrompt;
+    }
+
+    private static void AppendSection(StringBuilder builder, string title, IReadOnlyList<string> items)
+    {
+        if (items.Count == 0)
+            return;
+
+        builder.AppendLine(title + ":");
+        foreach (var item in items)
+            builder.AppendLine($"- {item}");
+
+        builder.AppendLine();
+    }
+
+    private ContextLimit ResolveContextLimit(string provider, string? modelOverride)
+    {
+        var normalizedProvider = provider.Trim().ToLowerInvariant();
+        var normalizedModel = string.IsNullOrWhiteSpace(modelOverride) ? null : modelOverride.Trim();
+        var providerPath = $"Llm:ContextCompaction:Providers:{normalizedProvider}";
+        var modelPath = normalizedModel == null ? null : $"{providerPath}:Models:{normalizedModel}";
+
+        var maxPromptChars =
+            GetInt(modelPath is null ? null : $"{modelPath}:MaxPromptChars")
+            ?? GetInt($"{providerPath}:MaxPromptChars")
+            ?? GetInt("Llm:ContextCompaction:Default:MaxPromptChars")
+            ?? DefaultMaxPromptChars;
+        var reserveChars =
+            GetInt(modelPath is null ? null : $"{modelPath}:ReserveChars")
+            ?? GetInt($"{providerPath}:ReserveChars")
+            ?? GetInt("Llm:ContextCompaction:Default:ReserveChars")
+            ?? DefaultReserveChars;
+        var fallbackWindowMessages =
+            GetInt(modelPath is null ? null : $"{modelPath}:FallbackWindowMessages")
+            ?? GetInt($"{providerPath}:FallbackWindowMessages")
+            ?? GetInt("Llm:ContextCompaction:Default:FallbackWindowMessages")
+            ?? DefaultFallbackWindowMessages;
+
+        return new ContextLimit(maxPromptChars, reserveChars, fallbackWindowMessages);
+    }
+
+    private int? GetInt(string? key)
+    {
+        if (string.IsNullOrWhiteSpace(key))
+            return null;
+
+        return int.TryParse(_configuration[key], out var value) ? value : null;
+    }
+
+    private static int EstimateRequestChars(string? systemPrompt, IReadOnlyList<ChatMessage> history, CanvasConversationMessage nextMessage)
+    {
+        var total = string.IsNullOrWhiteSpace(systemPrompt) ? 0 : systemPrompt.Length;
+        foreach (var message in history)
+        {
+            total += message.Content.Length + MessageOverheadChars;
+            if (!string.IsNullOrWhiteSpace(message.ImageUrl))
+                total += ImageOverheadChars + message.ImageUrl!.Length;
+        }
+
+        total += nextMessage.Content.Length + MessageOverheadChars;
+        if (!string.IsNullOrWhiteSpace(nextMessage.ImageUrl))
+            total += ImageOverheadChars + nextMessage.ImageUrl!.Length;
+
+        return total;
+    }
+
+    private static List<ChatMessage> TakeOldestCompactableChunk(IReadOnlyList<ChatMessage> messages)
+    {
+        var assistantIndex = messages
+            .Select((message, index) => new { message, index })
+            .FirstOrDefault(item => item.message.Role == "assistant");
+
+        return assistantIndex == null
+            ? []
+            : messages.Take(assistantIndex.index + 1).ToList();
+    }
+
+    private static List<ChatMessage> TrimToRecentWindow(IReadOnlyList<ChatMessage> history, int maxMessages)
+    {
+        if (history.Count <= maxMessages)
+            return history.ToList();
+
+        return history.Skip(history.Count - maxMessages).ToList();
+    }
+
+    private sealed record ContextLimit(int MaxPromptChars, int ReserveChars, int FallbackWindowMessages)
+    {
+        public int PromptBudgetChars => Math.Max(0, MaxPromptChars - ReserveChars);
+    }
+}
diff --git a/backend/Coliee.API/Services/ChatNodeContextSnapshot.cs b/backend/Coliee.API/Services/ChatNodeContextSnapshot.cs
new file mode 100644
index 0000000..c268e55
--- /dev/null
+++ b/backend/Coliee.API/Services/ChatNodeContextSnapshot.cs
@@ -0,0 +1,10 @@
+namespace Coliee.API.Services;
+
+public sealed class ChatNodeContextSnapshot
+{
+    public int BoundaryMessageId { get; set; }
+    public List<string> Facts { get; set; } = [];
+    public List<string> Decisions { get; set; } = [];
+    public List<string> OpenQuestions { get; set; } = [];
+    public List<string> CarryForwardInstructions { get; set; } = [];
+}
diff --git a/backend/Coliee.API/Services/ChatNodePromptContextResult.cs b/backend/Coliee.API/Services/ChatNodePromptContextResult.cs
new file mode 100644
index 0000000..80ebc1e
--- /dev/null
+++ b/backend/Coliee.API/Services/ChatNodePromptContextResult.cs
@@ -0,0 +1,8 @@
+namespace Coliee.API.Services;
+
+public sealed class ChatNodePromptContextResult
+{
+    public string? SystemPrompt { get; set; }
+    public IReadOnlyList<CanvasConversationMessage> Messages { get; set; } = [];
+    public ChatNodeContextSnapshot? Snapshot { get; set; }
+}
diff --git a/backend/Coliee.API/Services/ChatSessionOperationException.cs b/backend/Coliee.API/Services/ChatSessionOperationException.cs
new file mode 100644
index 0000000..c40285a
--- /dev/null
+++ b/backend/Coliee.API/Services/ChatSessionOperationException.cs
@@ -0,0 +1,12 @@
+namespace Coliee.API.Services;
+
+public class ChatSessionOperationException : Exception
+{
+    public int StatusCode { get; }
+
+    public ChatSessionOperationException(string message, int statusCode)
+        : base(message)
+    {
+        StatusCode = statusCode;
+    }
+}
diff --git a/backend/Coliee.API/Services/ChatSessionService.cs b/backend/Coliee.API/Services/ChatSessionService.cs
new file mode 100644
index 0000000..49bef9d
--- /dev/null
+++ b/backend/Coliee.API/Services/ChatSessionService.cs
@@ -0,0 +1,2008 @@
+using System.Net;
+using System.Net.Http.Headers;
+using System.Net.Http.Json;
+using System.Text.Json;
+using System.Text.RegularExpressions;
+using Coliee.API.Data;
+using Coliee.API.DTOs;
+using Coliee.API.Models;
+using Microsoft.AspNetCore.Http;
+
+namespace Coliee.API.Services;
+
+public partial class ChatSessionService : IChatSessionService
+{
+    private const int SessionTitleMaxLength = 80;
+    private const int NodeTitleMaxLength = 64;
+    private const int PreviewMaxLength = 180;
+    private const string BlankSessionTitle = "Untitled Canvas";
+    private const string RichDocumentInstruction =
+        "Always format your response as a professional Rich Document. Use # and ## headers, emojis as visual anchors, and --- (horizontal lines) to separate major ideas. Structure your breakdown with lists and bold highlights.";
+    private const string RootNodeTitle = "Main Node";
+    private const string GeneratedNoteTitle = "AI Summary";
+    private const double RootPositionX = 400;
+    private const double RootPositionY = 300;
+    private const double DefaultNodeWidth = 600;
+    private const double DefaultNodeHeight = 520;
+    private const double DefaultNoteWidth = 400;
+    private const double DefaultNoteHeight = 400;
+    private readonly IChatSessionRepository _chatSessionRepository;
+    private readonly ILlmRepository _llmRepository;
+    private readonly ICanvasProviderResolver _providerResolver;
+    private readonly ILlmEncryptionService _encryptionService;
+    private readonly IChatNodeContextCompactionService _contextCompactionService;
+    private readonly IReadOnlyDictionary<string, ILlmProviderClient> _providerClients;
+    private readonly IConfiguration _configuration;
+    private readonly ILogger<ChatSessionService> _logger;
+
+    public ChatSessionService(
+        IChatSessionRepository chatSessionRepository,
+        ILlmRepository llmRepository,
+        ICanvasProviderResolver providerResolver,
+        ILlmEncryptionService encryptionService,
+        IChatNodeContextCompactionService contextCompactionService,
+        IEnumerable<ILlmProviderClient> providerClients,
+        IConfiguration configuration,
+        ILogger<ChatSessionService> logger)
+    {
+        _chatSessionRepository = chatSessionRepository;
+        _llmRepository = llmRepository;
+        _providerResolver = providerResolver;
+        _encryptionService = encryptionService;
+        _contextCompactionService = contextCompactionService;
+        _providerClients = providerClients.ToDictionary(client => client.Provider, StringComparer.Ordinal);
+        _configuration = configuration;
+        _logger = logger;
+    }
+
+    public async Task<IReadOnlyList<ChatSessionSummaryResponse>> GetSessionsAsync(int userId)
+    {
+        var sessions = await _chatSessionRepository.GetSessionsAsync(userId);
+        return sessions.Select(MapSession).ToList();
+    }
+
+    public async Task<ChatSessionStateResponse> CreateSessionAsync(int userId, string? title, string? content, string? providerOverride, string? modelOverride = null)
+    {
+        var normalizedTitle = NormalizeSessionTitle(title);
+        var trimmedContent = NormalizeOptionalContent(content);
+        var sessionTitle = normalizedTitle
+            ?? (trimmedContent is null
+                ? BlankSessionTitle
+                : BuildDisplayTitle(trimmedContent, SessionTitleMaxLength));
+
+        var session = await _chatSessionRepository.CreateSessionAsync(userId, sessionTitle);
+
+        try
+        {
+            var rootNode = await _chatSessionRepository.EnsureRootNodeAsync(userId, session.Id, RootNodeTitle);
+            if (trimmedContent is null)
+                return await BuildStateResponseAsync(userId, session.Id, rootNode.Id);
+
+            var resolution = await ResolveProviderAsync(userId, null, providerOverride);
+            var selectedProvider = resolution.Provider;
+            var providerRecord = resolution.Providers.First(item => item.Provider == selectedProvider);
+            var providerClient = GetProviderClient(selectedProvider);
+            var apiKey = _encryptionService.Decrypt(providerRecord.EncryptedApiKey);
+            var normalizedModelOverride = NormalizeModelOverride(selectedProvider, modelOverride);
+
+            var promptContext = await _contextCompactionService.BuildPromptContextAsync(
+                userId,
+                session.Id,
+                rootNode,
+                [],
+                new CanvasConversationMessage("user", trimmedContent),
+                providerClient,
+                apiKey,
+                normalizedModelOverride,
+                includeFormattingInstruction: true);
+
+            await _chatSessionRepository.AddMessageAsync(userId, session.Id, rootNode.Id, "user", trimmedContent, null, null, null);
+
+            if (promptContext.Snapshot != null)
+            {
+                await PersistNodeContextSnapshotAsync(userId, session.Id, rootNode.Id, promptContext.Snapshot);
+            }
+
+            var providerReply = await SendConversationAsync(
+                selectedProvider,
+                providerClient,
+                apiKey,
+                promptContext.Messages,
+                normalizedModelOverride,
+                promptContext.SystemPrompt);
+
+            await _chatSessionRepository.AddMessageAsync(
+                userId,
+                session.Id,
+                rootNode.Id,
+                "assistant",
+                providerReply.Content,
+                null,
+                selectedProvider,
+                providerReply.Model);
+
+            await _chatSessionRepository.UpdateNodeAsync(
+                userId,
+                session.Id,
+                rootNode.Id,
+                BuildUpdatedNodeInput(rootNode, preview: BuildPreview(providerReply.Content)));
+
+            _logger.LogInformation("Created chat session {SessionId} for user {UserId}.", session.Id, userId);
+            return await BuildStateResponseAsync(userId, session.Id, rootNode.Id, resolution.Providers);
+        }
+        catch (Exception ex) when (ex is ChatSessionOperationException or LlmChatException)
+        {
+            try
+            {
+                await _chatSessionRepository.DeleteSessionAsync(userId, session.Id);
+            }
+            catch (Exception rollbackEx)
+            {
+                _logger.LogError(rollbackEx, "Failed to rollback chat session {SessionId} for user {UserId}.", session.Id, userId);
+            }
+
+            throw;
+        }
+    }
+
+    public async Task<GuestChatPreviewResponse> PreviewGuestAsync(GuestChatPreviewRequest request)
+    {
+        var actionType = NormalizeGuestActionType(request.ActionType);
+        var modelId = NormalizeNullable(request.ModelId) ?? "gemini-3.1-flash-lite-preview";
+        var provider = InferProviderFromModel(modelId);
+        var normalizedModel = NormalizeModelOverride(provider, modelId) ?? modelId;
+        var normalizedPrompt = NormalizeOptionalContent(request.Prompt);
+        var normalizedContent = NormalizeOptionalContent(request.Content);
+        var normalizedImageUrl = NormalizeNullable(request.ImageUrl);
+        var messages = request.Messages
+            .Select(message => new ConversationMessage(
+                message.Role == "assistant" || message.Role == "model" ? "assistant" : "user",
+                NormalizeOptionalContent(message.Content) ?? string.Empty,
+                NormalizeNullable(message.ImageUrl)))
+            .ToList();
+
+        var guestApiKey = ResolveGuestPreviewApiKey(provider);
+        var providerClient = !string.IsNullOrWhiteSpace(guestApiKey)
+            ? GetProviderClient(provider)
+            : null;
+        var guestModelOverride = ResolveGuestPreviewModel(provider, normalizedModel);
+
+        return actionType switch
+        {
+            "note" => await PreviewGuestNoteAsync(messages, normalizedContent, provider, providerClient, guestApiKey, guestModelOverride),
+            "image" => await PreviewGuestImageAsync(normalizedPrompt ?? normalizedContent, provider, guestApiKey, guestModelOverride),
+            _ => await PreviewGuestChatAsync(messages, normalizedPrompt ?? normalizedContent, normalizedImageUrl, provider, providerClient, guestApiKey, guestModelOverride)
+        };
+    }
+
+    public async Task<ChatSessionStateResponse> ImportGuestCanvasesAsync(int userId, ImportGuestCanvasesRequest request)
+    {
+        if (request.Canvases.Count == 0)
+            throw new ChatSessionOperationException("At least one guest canvas is required.", StatusCodes.Status400BadRequest);
+
+        ChatSessionStateResponse? activeState = null;
+
+        foreach (var guestCanvas in request.Canvases)
+        {
+            var normalizedTitle = NormalizeSessionTitle(guestCanvas.Name) ?? BlankSessionTitle;
+            var createdSession = await _chatSessionRepository.CreateSessionAsync(userId, normalizedTitle);
+            var rootSource = guestCanvas.Nodes.FirstOrDefault(node => string.IsNullOrWhiteSpace(node.ParentTempId))
+                ?? guestCanvas.Nodes.FirstOrDefault()
+                ?? throw new ChatSessionOperationException("Each imported canvas requires at least one node.", StatusCodes.Status400BadRequest);
+
+            var rootNode = await _chatSessionRepository.EnsureRootNodeAsync(userId, createdSession.Id, NormalizeNodeTitle(rootSource.Title, RootNodeTitle, NodeTitleMaxLength));
+            var rootType = ChatNodeTypes.Normalize(rootSource.NodeType);
+            var rootTitle = NormalizeNodeTitle(rootSource.Title, RootNodeTitle, NodeTitleMaxLength);
+            var rootContent = rootSource.Content?.Trim() ?? string.Empty;
+            var rootWidth = rootSource.Width > 0 ? rootSource.Width : DefaultNodeWidth;
+            var rootHeight = rootSource.Height > 0 ? rootSource.Height : DefaultNodeHeight;
+
+            await _chatSessionRepository.UpdateNodeAsync(
+                userId,
+                createdSession.Id,
+                rootNode.Id,
+                new ChatNodeUpdateInput
+                {
+                    NodeType = rootType,
+                    Title = rootTitle,
+                    Preview = BuildPreview(rootContent),
+                    Content = rootContent,
+                    PositionX = rootSource.PositionX,
+                    PositionY = rootSource.PositionY,
+                    Width = rootWidth,
+                    Height = rootHeight,
+                    IsCollapsed = rootSource.IsCollapsed ?? false,
+                    ExpandedWidth = rootSource.ExpandedWidth ?? rootWidth,
+                    ExpandedHeight = rootSource.ExpandedHeight ?? rootHeight,
+                    PreferredProvider = NormalizeNullable(rootSource.PreferredProvider),
+                    PreferredModel = NormalizeNullable(rootSource.PreferredModel)
+                });
+
+            foreach (var message in rootSource.Messages)
+            {
+                await _chatSessionRepository.AddMessageAsync(
+                    userId,
+                    createdSession.Id,
+                    rootNode.Id,
+                    NormalizeImportedRole(message.Role),
+                    message.Content?.Trim() ?? string.Empty,
+                    NormalizeNullable(message.ImageUrl),
+                    NormalizeNullable(message.Provider),
+                    NormalizeNullable(message.Model));
+            }
+
+            var createdNodeIds = new Dictionary<string, int>(StringComparer.Ordinal)
+            {
+                [rootSource.TempId] = rootNode.Id
+            };
+
+            var pendingNodes = guestCanvas.Nodes.Where(node => node.TempId != rootSource.TempId).ToList();
+            while (pendingNodes.Count > 0)
+            {
+                var progressed = false;
+
+                foreach (var guestNode in pendingNodes.ToList())
+                {
+                    if (string.IsNullOrWhiteSpace(guestNode.ParentTempId) || !createdNodeIds.TryGetValue(guestNode.ParentTempId, out var parentNodeId))
+                        continue;
+
+                    var nodeType = ChatNodeTypes.Normalize(guestNode.NodeType);
+                    var createdNode = await _chatSessionRepository.CreateNodeAsync(userId, createdSession.Id, new ChatNodeCreateInput
+                    {
+                        ParentNodeId = parentNodeId,
+                        BranchFromMessageId = null,
+                        NodeType = nodeType,
+                        Title = NormalizeNodeTitle(guestNode.Title, GetDefaultNodeTitle(nodeType), NodeTitleMaxLength),
+                        Preview = BuildPreview(guestNode.Content?.Trim() ?? string.Empty),
+                        Content = guestNode.Content?.Trim() ?? string.Empty,
+                        PositionX = guestNode.PositionX,
+                        PositionY = guestNode.PositionY,
+                        Width = guestNode.Width > 0 ? guestNode.Width : (nodeType == ChatNodeTypes.Note ? DefaultNoteWidth : DefaultNodeWidth),
+                        Height = guestNode.Height > 0 ? guestNode.Height : (nodeType == ChatNodeTypes.Note ? DefaultNoteHeight : DefaultNodeHeight),
+                        IsCollapsed = guestNode.IsCollapsed ?? false,
+                        ExpandedWidth = guestNode.ExpandedWidth ?? (guestNode.Width > 0 ? guestNode.Width : (nodeType == ChatNodeTypes.Note ? DefaultNoteWidth : DefaultNodeWidth)),
+                        ExpandedHeight = guestNode.ExpandedHeight ?? (guestNode.Height > 0 ? guestNode.Height : (nodeType == ChatNodeTypes.Note ? DefaultNoteHeight : DefaultNodeHeight)),
+                        PreferredProvider = NormalizeNullable(guestNode.PreferredProvider),
+                        PreferredModel = NormalizeNullable(guestNode.PreferredModel)
+                    });
+
+                    foreach (var message in guestNode.Messages)
+                    {
+                        await _chatSessionRepository.AddMessageAsync(
+                            userId,
+                            createdSession.Id,
+                            createdNode.Id,
+                            NormalizeImportedRole(message.Role),
+                            message.Content?.Trim() ?? string.Empty,
+                            NormalizeNullable(message.ImageUrl),
+                            NormalizeNullable(message.Provider),
+                            NormalizeNullable(message.Model));
+                    }
+
+                    createdNodeIds[guestNode.TempId] = createdNode.Id;
+                    pendingNodes.Remove(guestNode);
+                    progressed = true;
+                }
+
+                if (!progressed)
+                {
+                    throw new ChatSessionOperationException(
+                        "Guest canvas import contains invalid parent references.",
+                        StatusCodes.Status400BadRequest);
+                }
+            }
+
+            if (activeState == null || string.Equals(request.ActiveCanvasId, guestCanvas.TempId, StringComparison.Ordinal))
+                activeState = await BuildStateResponseAsync(userId, createdSession.Id, rootNode.Id);
+        }
+
+        return activeState
+            ?? throw new ChatSessionOperationException("Guest canvas import failed.", StatusCodes.Status500InternalServerError);
+    }
+
+    public async Task<ChatSessionSummaryResponse> RenameSessionAsync(int userId, int sessionId, string title)
+    {
+        await EnsureSessionExistsAsync(userId, sessionId);
+        var normalizedTitle = NormalizeTitle(title, "Canvas title is required.", SessionTitleMaxLength);
+        var session = await _chatSessionRepository.RenameSessionAsync(userId, sessionId, normalizedTitle);
+        return MapSession(session);
+    }
+
+    public async Task DeleteSessionAsync(int userId, int sessionId)
+    {
+        await EnsureSessionExistsAsync(userId, sessionId);
+        var sessions = await _chatSessionRepository.GetSessionsAsync(userId);
+        if (sessions.Count <= 1)
+        {
+            throw new ChatSessionOperationException(
+                "At least one canvas must remain.",
+                StatusCodes.Status409Conflict);
+        }
+
+        await _chatSessionRepository.DeleteSessionAsync(userId, sessionId);
+    }
+
+    public async Task<ChatSessionGraphResponse> GetSessionAsync(int userId, int sessionId, int? activeNodeId = null)
+    {
+        await EnsureSessionExistsAsync(userId, sessionId);
+        return await BuildGraphResponseAsync(userId, sessionId, activeNodeId);
+    }
+
+    public async Task<ChatCanvasNodeDetailResponse> GetNodeAsync(int userId, int sessionId, int nodeId)
+    {
+        await EnsureSessionExistsAsync(userId, sessionId);
+        var node = await GetRequiredNodeAsync(userId, sessionId, nodeId);
+        return await BuildNodeDetailAsync(userId, sessionId, node);
+    }
+
+    public async Task<ChatSessionStateResponse> CreateNodeAsync(int userId, int sessionId, CreateChatNodeRequest request)
+    {
+        await EnsureSessionExistsAsync(userId, sessionId);
+        if (request.ParentNodeId <= 0)
+            throw new ChatSessionOperationException("A valid parent node is required.", StatusCodes.Status400BadRequest);
+
+        var parentNode = await GetRequiredNodeAsync(userId, sessionId, request.ParentNodeId);
+        var nodes = await _chatSessionRepository.GetNodesAsync(userId, sessionId);
+        var nodeType = ChatNodeTypes.Normalize(request.NodeType);
+        var (width, height) = ResolveNodeSize(nodeType, request.Width, request.Height);
+        var (positionX, positionY) = ResolveNodePosition(parentNode, nodeType, nodes, request.PositionX, request.PositionY);
+        var content = request.Content?.Trim() ?? string.Empty;
+        var preferredProvider = NormalizeNullable(request.PreferredProvider);
+        var preferredModel = NormalizeNullable(request.PreferredModel);
+
+        var createdNode = await _chatSessionRepository.CreateNodeAsync(userId, sessionId, new ChatNodeCreateInput
+        {
+            ParentNodeId = parentNode.Id,
+            BranchFromMessageId = null,
+            NodeType = nodeType,
+            Title = NormalizeNodeTitle(request.Title, GetDefaultNodeTitle(nodeType), NodeTitleMaxLength),
+            Preview = BuildPreview(content),
+            Content = content,
+            PositionX = positionX,
+            PositionY = positionY,
+            Width = width,
+            Height = height,
+            IsCollapsed = request.IsCollapsed ?? false,
+            ExpandedWidth = request.ExpandedWidth ?? width,
+            ExpandedHeight = request.ExpandedHeight ?? height,
+            PreferredProvider = preferredProvider,
+            PreferredModel = preferredModel
+        });
+
+        return await BuildStateResponseAsync(userId, sessionId, createdNode.Id);
+    }
+
+    public async Task<ChatSessionStateResponse> UpdateNodeAsync(int userId, int sessionId, int nodeId, UpdateChatNodeRequest request)
+    {
+        await EnsureSessionExistsAsync(userId, sessionId);
+        var node = await GetRequiredNodeAsync(userId, sessionId, nodeId);
+        var nodeType = node.ParentNodeId == null ? ChatNodeTypes.Question : node.NodeType;
+        var title = request.Title is null
+            ? node.Title
+            : NormalizeNodeTitle(request.Title, GetDefaultNodeTitle(nodeType), NodeTitleMaxLength);
+        var content = request.Content is null ? node.Content : request.Content.Trim();
+        var preview = request.Content is null ? node.Preview : BuildPreview(content);
+        var preferredProvider = request.PreferredProvider is null
+            ? node.PreferredProvider
+            : NormalizeNullable(request.PreferredProvider);
+        var preferredModel = request.PreferredModel is null
+            ? node.PreferredModel
+            : NormalizeNullable(request.PreferredModel);
+
+        await _chatSessionRepository.UpdateNodeAsync(
+            userId,
+            sessionId,
+            nodeId,
+            new ChatNodeUpdateInput
+            {
+                NodeType = nodeType,
+                Title = title,
+                Preview = preview,
+                Content = content,
+                PositionX = request.PositionX ?? node.PositionX,
+                PositionY = request.PositionY ?? node.PositionY,
+                Width = request.Width ?? node.Width,
+                Height = request.Height ?? node.Height,
+                IsCollapsed = request.IsCollapsed ?? node.IsCollapsed,
+                ExpandedWidth = request.ExpandedWidth ?? node.ExpandedWidth ?? node.Width,
+                ExpandedHeight = request.ExpandedHeight ?? node.ExpandedHeight ?? node.Height,
+                PreferredProvider = preferredProvider,
+                PreferredModel = preferredModel
+            });
+
+        return await BuildStateResponseAsync(userId, sessionId, nodeId);
+    }
+
+    public async Task<ChatSessionStateResponse> SendNodeMessageAsync(
+        int userId,
+        int sessionId,
+        int nodeId,
+        string content,
+        string? imageUrl,
+        string? providerOverride,
+        string? modelOverride = null)
+    {
+        var session = await EnsureSessionExistsAsync(userId, sessionId);
+        var node = await GetRequiredNodeAsync(userId, sessionId, nodeId);
+        if (node.NodeType == ChatNodeTypes.Note)
+        {
+            throw new ChatSessionOperationException(
+                "Notes do not accept chat messages.",
+                StatusCodes.Status400BadRequest);
+        }
+
+        var normalizedImageUrl = NormalizeNullable(imageUrl);
+        var normalizedContent = NormalizeOptionalContent(content) ?? string.Empty;
+        if (string.IsNullOrWhiteSpace(normalizedContent) && string.IsNullOrWhiteSpace(normalizedImageUrl))
+        {
+            throw new ChatSessionOperationException(
+                "Message content is required.",
+                StatusCodes.Status400BadRequest);
+        }
+
+        var resolution = await ResolveProviderAsync(userId, node.PreferredProvider, providerOverride);
+        var selectedProvider = resolution.Provider;
+        var providerRecord = resolution.Providers.First(item => item.Provider == selectedProvider);
+        var providerClient = GetProviderClient(selectedProvider);
+        var apiKey = _encryptionService.Decrypt(providerRecord.EncryptedApiKey);
+        var normalizedModelOverride = NormalizeModelOverride(selectedProvider, modelOverride) ?? NormalizeModelOverride(selectedProvider, node.PreferredModel);
+
+        var localHistory = await _chatSessionRepository.GetNodeMessagesAsync(userId, sessionId, node.Id);
+        var initialSnapshot = await _chatSessionRepository.GetNodeContextSnapshotAsync(userId, sessionId, node.Id);
+        var promptContext = await _contextCompactionService.BuildPromptContextAsync(
+            userId,
+            sessionId,
+            node,
+            localHistory,
+            new CanvasConversationMessage("user", normalizedContent, normalizedImageUrl),
+            providerClient,
+            apiKey,
+            normalizedModelOverride,
+            includeFormattingInstruction: normalizedImageUrl is null,
+            initialSnapshot: initialSnapshot);
+
+        await _chatSessionRepository.AddMessageAsync(userId, session.Id, node.Id, "user", normalizedContent, normalizedImageUrl, null, null);
+
+        if (promptContext.Snapshot != null)
+        {
+            await PersistNodeContextSnapshotAsync(userId, session.Id, node.Id, promptContext.Snapshot);
+        }
+
+        var providerReply = await SendConversationAsync(
+            selectedProvider,
+            providerClient,
+            apiKey,
+            promptContext.Messages,
+            normalizedModelOverride,
+            promptContext.SystemPrompt);
+
+        await _chatSessionRepository.AddMessageAsync(
+            userId,
+            session.Id,
+            node.Id,
+            "assistant",
+            providerReply.Content,
+            null,
+            selectedProvider,
+            providerReply.Model);
+
+        await _chatSessionRepository.UpdateNodeAsync(
+            userId,
+            session.Id,
+            node.Id,
+            BuildUpdatedNodeInput(node, preview: BuildPreview(providerReply.Content)));
+
+        return await BuildStateResponseAsync(userId, session.Id, node.Id, resolution.Providers);
+    }
+
+    public async Task<ChatSessionStateResponse> UpdateMessageAsync(int userId, int sessionId, int nodeId, int messageId, UpdateChatCanvasMessageRequest request)
+    {
+        await EnsureSessionExistsAsync(userId, sessionId);
+        var node = await GetRequiredNodeAsync(userId, sessionId, nodeId);
+        var messages = await _chatSessionRepository.GetNodeMessagesAsync(userId, sessionId, nodeId);
+        var latestUserMessage = messages.LastOrDefault(message => message.Role == "user");
+
+        if (latestUserMessage == null || latestUserMessage.Id != messageId)
+        {
+            throw new ChatSessionOperationException(
+                "Only the latest user prompt can be edited.",
+                StatusCodes.Status400BadRequest);
+        }
+
+        var normalizedContent = NormalizeRichContent(request.Content) ?? throw new ChatSessionOperationException(
+            "Message content is required.",
+            StatusCodes.Status400BadRequest);
+
+        await _chatSessionRepository.UpdateMessageAsync(userId, sessionId, nodeId, messageId, normalizedContent);
+        await _chatSessionRepository.UpdateNodeAsync(
+            userId,
+            sessionId,
+            nodeId,
+            BuildUpdatedNodeInput(node, content: normalizedContent, preview: BuildPreview(normalizedContent)));
+
+        return await BuildStateResponseAsync(userId, sessionId, nodeId);
+    }
+
+    public async Task<ChatSessionStateResponse> CreateBranchAsync(int userId, int sessionId, int nodeId, int branchFromMessageId, string content, string? providerOverride, string? modelOverride = null)
+    {
+        var session = await EnsureSessionExistsAsync(userId, sessionId);
+        var parentNode = await GetRequiredNodeAsync(userId, sessionId, nodeId);
+        var branchFromMessage = await _chatSessionRepository.GetNodeMessageAsync(userId, sessionId, nodeId, branchFromMessageId);
+        if (branchFromMessage == null || branchFromMessage.Role != "assistant")
+        {
+            throw new ChatSessionOperationException(
+                "Branches can only start from assistant replies in the current node.",
+                StatusCodes.Status400BadRequest);
+        }
+
+        var trimmedContent = NormalizeTitle(content, "Message content is required.", 2000);
+        var resolution = await ResolveProviderAsync(userId, parentNode.PreferredProvider, providerOverride);
+        var selectedProvider = resolution.Provider;
+        var providerRecord = resolution.Providers.First(item => item.Provider == selectedProvider);
+        var providerClient = GetProviderClient(selectedProvider);
+        var apiKey = _encryptionService.Decrypt(providerRecord.EncryptedApiKey);
+        var normalizedModelOverride = NormalizeModelOverride(selectedProvider, modelOverride) ?? NormalizeModelOverride(selectedProvider, parentNode.PreferredModel);
+
+        var parentResolvedHistory = await BuildResolvedMessagesAsync(userId, sessionId, parentNode);
+        var truncatedHistory = TakeHistoryUntil(parentResolvedHistory, branchFromMessageId);
+        var parentSnapshot = await _chatSessionRepository.GetNodeContextSnapshotAsync(userId, sessionId, nodeId);
+        var branchSeedSnapshot = parentSnapshot != null && parentSnapshot.BoundaryMessageId < branchFromMessageId
+            ? parentSnapshot
+            : null;
+        var promptContext = await _contextCompactionService.BuildPromptContextAsync(
+            userId,
+            sessionId,
+            parentNode,
+            truncatedHistory,
+            new CanvasConversationMessage("user", trimmedContent),
+            providerClient,
+            apiKey,
+            normalizedModelOverride,
+            includeFormattingInstruction: true,
+            compactAllHistory: true,
+            initialSnapshot: branchSeedSnapshot);
+
+        var providerReply = await SendConversationAsync(
+            selectedProvider,
+            providerClient,
+            apiKey,
+            promptContext.Messages,
+            normalizedModelOverride,
+            promptContext.SystemPrompt);
+
+        var nodes = await _chatSessionRepository.GetNodesAsync(userId, sessionId);
+        var (positionX, positionY) = ResolveNodePosition(parentNode, ChatNodeTypes.Response, nodes, null, null);
+        var childNode = await _chatSessionRepository.CreateNodeAsync(userId, sessionId, new ChatNodeCreateInput
+        {
+            ParentNodeId = parentNode.Id,
+            BranchFromMessageId = branchFromMessageId,
+            NodeType = ChatNodeTypes.Response,
+            Title = NormalizeNodeTitle(null, BuildDisplayTitle(trimmedContent, NodeTitleMaxLength), NodeTitleMaxLength),
+            Preview = BuildPreview(providerReply.Content),
+            Content = string.Empty,
+            PositionX = positionX,
+            PositionY = positionY,
+            Width = DefaultNodeWidth,
+            Height = DefaultNodeHeight,
+            PreferredProvider = parentNode.PreferredProvider,
+            PreferredModel = parentNode.PreferredModel
+        });
+
+        await _chatSessionRepository.AddMessageAsync(userId, session.Id, childNode.Id, "user", trimmedContent, null, null, null);
+        await _chatSessionRepository.AddMessageAsync(userId, session.Id, childNode.Id, "assistant", providerReply.Content, null, selectedProvider, providerReply.Model);
+
+        if (promptContext.Snapshot != null)
+        {
+            await PersistNodeContextSnapshotAsync(userId, session.Id, childNode.Id, promptContext.Snapshot);
+        }
+
+        return await BuildStateResponseAsync(userId, session.Id, childNode.Id, resolution.Providers);
+    }
+
+    public async Task<ChatSessionStateResponse> MoveMessagesToBranchAsync(
+        int userId,
+        int sessionId,
+        int nodeId,
+        IReadOnlyList<int> messageIds,
+        string? transferMode = null)
+    {
+        var session = await EnsureSessionExistsAsync(userId, sessionId);
+        var sourceNode = await GetRequiredNodeAsync(userId, sessionId, nodeId);
+        if (sourceNode.NodeType == ChatNodeTypes.Note)
+        {
+            throw new ChatSessionOperationException(
+                "Notes do not contain transferable chat messages.",
+                StatusCodes.Status400BadRequest);
+        }
+
+        var requestedIds = messageIds
+            .Where(id => id > 0)
+            .Distinct()
+            .ToList();
+        if (requestedIds.Count == 0)
+        {
+            throw new ChatSessionOperationException(
+                "Select at least one message to move.",
+                StatusCodes.Status400BadRequest);
+        }
+        var normalizedTransferMode = NormalizeNullable(transferMode)?.ToLowerInvariant();
+        var shouldMove = normalizedTransferMode switch
+        {
+            null or "" or "move" => true,
+            "copy" => false,
+            _ => throw new ChatSessionOperationException(
+                "Transfer mode must be either 'move' or 'copy'.",
+                StatusCodes.Status400BadRequest)
+        };
+
+        var localMessages = (await _chatSessionRepository.GetNodeMessagesAsync(userId, sessionId, nodeId)).ToList();
+        var messageById = localMessages.ToDictionary(message => message.Id);
+        if (requestedIds.Any(id => !messageById.ContainsKey(id)))
+        {
+            throw new ChatSessionOperationException(
+                "Only messages from the current node can be moved.",
+                StatusCodes.Status400BadRequest);
+        }
+
+        var selectedMessages = localMessages
+            .Where(message => requestedIds.Contains(message.Id))
+            .ToList();
+        var selectedIndices = selectedMessages
+            .Select(message => localMessages.FindIndex(item => item.Id == message.Id))
+            .OrderBy(index => index)
+            .ToList();
+        var firstSelectedIndex = selectedIndices.First();
+        var lastSelectedIndex = selectedIndices.Last();
+        var expectedCount = lastSelectedIndex - firstSelectedIndex + 1;
+        if (expectedCount != selectedIndices.Count)
+        {
+            throw new ChatSessionOperationException(
+                "Select a continuous message range before moving to a new node.",
+                StatusCodes.Status400BadRequest);
+        }
+
+        var childNodes = await _chatSessionRepository.GetNodesAsync(userId, sessionId);
+        if (shouldMove)
+        {
+            var blockedAnchors = childNodes
+                .Where(node => node.ParentNodeId == sourceNode.Id && node.BranchFromMessageId.HasValue)
+                .Select(node => node.BranchFromMessageId!.Value)
+                .ToHashSet();
+            var selectedAssistantIds = selectedMessages
+                .Where(message => message.Role == "assistant")
+                .Select(message => message.Id);
+            if (selectedAssistantIds.Any(blockedAnchors.Contains))
+            {
+                throw new ChatSessionOperationException(
+                    "Some selected assistant replies already anchor other branches. Remove those branches first.",
+                    StatusCodes.Status409Conflict);
+            }
+        }
+
+        var branchFromMessageId = firstSelectedIndex > 0
+            ? localMessages[firstSelectedIndex - 1].Id
+            : sourceNode.BranchFromMessageId;
+        var seedTitle = selectedMessages.FirstOrDefault(message => message.Role == "user")?.Content
+            ?? selectedMessages[0].Content;
+        var remainingMessages = localMessages
+            .Where(message => !requestedIds.Contains(message.Id))
+            .ToList();
+        var finalMovedMessage = selectedMessages.Last();
+        var finalRemainingMessage = remainingMessages.LastOrDefault();
+        var (positionX, positionY) = ResolveNodePosition(sourceNode, ChatNodeTypes.Response, childNodes, null, null);
+
+        var childNode = await _chatSessionRepository.CreateNodeAsync(userId, sessionId, new ChatNodeCreateInput
+        {
+            ParentNodeId = sourceNode.Id,
+            BranchFromMessageId = branchFromMessageId,
+            NodeType = ChatNodeTypes.Response,
+            Title = NormalizeNodeTitle(null, BuildDisplayTitle(seedTitle, NodeTitleMaxLength), NodeTitleMaxLength),
+            Preview = BuildPreview(finalMovedMessage.Content),
+            Content = string.Empty,
+            PositionX = positionX,
+            PositionY = positionY,
+            Width = DefaultNodeWidth,
+            Height = DefaultNodeHeight,
+            PreferredProvider = sourceNode.PreferredProvider,
+            PreferredModel = sourceNode.PreferredModel
+        });
+
+        if (shouldMove)
+        {
+            await _chatSessionRepository.ReassignMessagesAsync(
+                userId,
+                session.Id,
+                sourceNode.Id,
+                childNode.Id,
+                requestedIds);
+
+            await _chatSessionRepository.UpdateNodeAsync(
+                userId,
+                session.Id,
+                sourceNode.Id,
+                BuildUpdatedNodeInput(
+                    sourceNode,
+                    preview: finalRemainingMessage == null ? string.Empty : BuildPreview(finalRemainingMessage.Content)));
+        }
+        else
+        {
+            foreach (var message in selectedMessages)
+            {
+                await _chatSessionRepository.AddMessageAsync(
+                    userId,
+                    session.Id,
+                    childNode.Id,
+                    message.Role,
+                    message.Content,
+                    message.ImageUrl,
+                    message.Provider,
+                    message.Model);
+            }
+        }
+
+        await _chatSessionRepository.UpdateNodeAsync(
+            userId,
+            session.Id,
+            childNode.Id,
+            BuildUpdatedNodeInput(childNode, preview: BuildPreview(finalMovedMessage.Content)));
+
+        return await BuildStateResponseAsync(userId, session.Id, childNode.Id);
+    }
+
+    public async Task<ChatSessionStateResponse> GenerateNoteAsync(int userId, int sessionId, int nodeId, string? providerOverride, string? modelOverride = null)
+    {
+        await EnsureSessionExistsAsync(userId, sessionId);
+        var sourceNode = await GetRequiredNodeAsync(userId, sessionId, nodeId);
+        var localMessages = (await _chatSessionRepository.GetNodeMessagesAsync(userId, sessionId, nodeId)).ToList();
+        if (localMessages.Count == 0 && string.IsNullOrWhiteSpace(sourceNode.Content))
+        {
+            throw new ChatSessionOperationException(
+                "Add some content or messages before generating a note.",
+                StatusCodes.Status400BadRequest);
+        }
+
+        var resolution = await ResolveProviderAsync(userId, sourceNode.PreferredProvider, providerOverride);
+        var selectedProvider = resolution.Provider;
+        var providerRecord = resolution.Providers.First(item => item.Provider == selectedProvider);
+        var providerClient = GetProviderClient(selectedProvider);
+        var apiKey = _encryptionService.Decrypt(providerRecord.EncryptedApiKey);
+        var normalizedModelOverride = NormalizeModelOverride(selectedProvider, modelOverride) ?? NormalizeModelOverride(selectedProvider, sourceNode.PreferredModel);
+
+        var prompt = BuildNotePrompt(sourceNode, localMessages);
+        var providerReply = await providerClient.SendChatAsync(
+            apiKey,
+            [new LlmProviderChatMessage { Role = "user", Content = prompt }],
+            normalizedModelOverride);
+
+        var nodes = await _chatSessionRepository.GetNodesAsync(userId, sessionId);
+        var (positionX, positionY) = ResolveNodePosition(sourceNode, ChatNodeTypes.Note, nodes, null, null);
+        var (_, noteHeight) = CalculateGeneratedNoteSize(providerReply.Content);
+        var noteNode = await _chatSessionRepository.CreateNodeAsync(userId, sessionId, new ChatNodeCreateInput
+        {
+            ParentNodeId = sourceNode.Id,
+            BranchFromMessageId = null,
+            NodeType = ChatNodeTypes.Note,
+            Title = GeneratedNoteTitle,
+            Preview = BuildPreview(providerReply.Content),
+            Content = providerReply.Content,
+            PositionX = positionX,
+            PositionY = positionY,
+            Width = DefaultNodeWidth,
+            Height = noteHeight,
+            IsCollapsed = false,
+            ExpandedWidth = DefaultNodeWidth,
+            ExpandedHeight = noteHeight,
+            PreferredProvider = sourceNode.PreferredProvider,
+            PreferredModel = sourceNode.PreferredModel
+        });
+
+        return await BuildStateResponseAsync(userId, sessionId, noteNode.Id, resolution.Providers);
+    }
+
+    public async Task<ChatSessionStateResponse> GenerateImageAsync(int userId, int sessionId, int nodeId, string prompt, string? providerOverride, string? modelOverride = null)
+    {
+        var session = await EnsureSessionExistsAsync(userId, sessionId);
+        var node = await GetRequiredNodeAsync(userId, sessionId, nodeId);
+        if (node.NodeType == ChatNodeTypes.Note)
+        {
+            throw new ChatSessionOperationException(
+                "Notes do not support image generation.",
+                StatusCodes.Status400BadRequest);
+        }
+
+        var trimmedPrompt = NormalizeTitle(prompt, "Image prompt is required.", 4000);
+        var resolution = await ResolveProviderAsync(userId, node.PreferredProvider, providerOverride);
+        var selectedProvider = resolution.Provider;
+        var providerRecord = resolution.Providers.First(item => item.Provider == selectedProvider);
+        var apiKey = _encryptionService.Decrypt(providerRecord.EncryptedApiKey);
+        var preferredModel = NormalizeModelOverride(selectedProvider, modelOverride) ?? NormalizeModelOverride(selectedProvider, node.PreferredModel);
+        var imageModel = ResolveImageModel(selectedProvider, preferredModel);
+        var imageUrl = await GenerateImageForProviderAsync(selectedProvider, apiKey, trimmedPrompt, imageModel);
+        var assistantMessage = $"Here is the visual manifestation for: **{trimmedPrompt}**";
+
+        await _chatSessionRepository.AddMessageAsync(session.UserId, session.Id, node.Id, "user", $"[GENERATE IMAGE]: {trimmedPrompt}", null, null, null);
+        await _chatSessionRepository.AddMessageAsync(session.UserId, session.Id, node.Id, "assistant", assistantMessage, imageUrl, selectedProvider, imageModel);
+
+        await _chatSessionRepository.UpdateNodeAsync(
+            userId,
+            session.Id,
+            node.Id,
+            BuildUpdatedNodeInput(node, preview: BuildPreview(assistantMessage)));
+
+        return await BuildStateResponseAsync(userId, session.Id, node.Id, resolution.Providers);
+    }
+
+    public async Task<ChatSessionGraphResponse> DeleteNodeAsync(int userId, int sessionId, int nodeId, int? newActiveNodeId = null)
+    {
+        await EnsureSessionExistsAsync(userId, sessionId);
+        var node = await GetRequiredNodeAsync(userId, sessionId, nodeId);
+
+        if (node.ParentNodeId == null)
+        {
+            throw new ChatSessionOperationException(
+                "The root node cannot be deleted. Delete the entire session instead.",
+                StatusCodes.Status400BadRequest);
+        }
+
+        var deleted = await _chatSessionRepository.DeleteNodeAsync(userId, sessionId, nodeId);
+        if (!deleted)
+        {
+            throw new ChatSessionOperationException(
+                "Chat node could not be deleted.",
+                StatusCodes.Status500InternalServerError);
+        }
+
+        _logger.LogInformation("Deleted sub-node {NodeId} from session {SessionId} for user {UserId}.", nodeId, sessionId, userId);
+        return await BuildGraphResponseAsync(userId, sessionId, newActiveNodeId);
+    }
+
+    public async Task<ChatSessionGraphResponse> SaveLayoutAsync(int userId, int sessionId, IReadOnlyList<ChatNodeLayoutUpdateInput> nodes, int? activeNodeId = null)
+    {
+        await EnsureSessionExistsAsync(userId, sessionId);
+        if (nodes.Any(node => node.NodeId <= 0))
+        {
+            throw new ChatSessionOperationException("A valid node is required for layout updates.", StatusCodes.Status400BadRequest);
+        }
+
+        await _chatSessionRepository.SaveNodeLayoutsAsync(userId, sessionId, nodes);
+        return await BuildGraphResponseAsync(userId, sessionId, activeNodeId);
+    }
+
+    private async Task<ChatSession> EnsureSessionExistsAsync(int userId, int sessionId)
+    {
+        var session = await _chatSessionRepository.GetSessionAsync(userId, sessionId);
+        return session ?? throw new ChatSessionOperationException("Chat session not found.", StatusCodes.Status404NotFound);
+    }
+
+    private async Task<ChatNode> GetRequiredNodeAsync(int userId, int sessionId, int nodeId)
+    {
+        if (nodeId <= 0)
+            throw new ChatSessionOperationException("A valid node is required.", StatusCodes.Status400BadRequest);
+
+        var node = await _chatSessionRepository.GetNodeAsync(userId, sessionId, nodeId);
+        return node ?? throw new ChatSessionOperationException("Chat node not found.", StatusCodes.Status404NotFound);
+    }
+
+    private async Task<ChatSessionStateResponse> BuildStateResponseAsync(
+        int userId,
+        int sessionId,
+        int nodeId,
+        IReadOnlyList<LlmProviderKeyRecord>? providers = null)
+    {
+        var graph = await BuildGraphResponseAsync(userId, sessionId, nodeId, providers);
+        var node = await GetRequiredNodeAsync(userId, sessionId, nodeId);
+        return new ChatSessionStateResponse
+        {
+            Graph = graph,
+            Node = await BuildNodeDetailAsync(userId, sessionId, node)
+        };
+    }
+
+    private async Task<ChatSessionGraphResponse> BuildGraphResponseAsync(
+        int userId,
+        int sessionId,
+        int? activeNodeId = null,
+        IReadOnlyList<LlmProviderKeyRecord>? providers = null)
+    {
+        var session = await EnsureSessionExistsAsync(userId, sessionId);
+        var nodes = await _chatSessionRepository.GetNodesAsync(userId, sessionId);
+        var rootNode = nodes.FirstOrDefault(item => item.ParentNodeId == null)
+            ?? throw new ChatSessionOperationException("Chat root node not found.", StatusCodes.Status500InternalServerError);
+        var activeId = activeNodeId ?? rootNode.Id;
+        if (nodes.All(item => item.Id != activeId))
+            activeId = rootNode.Id;
+
+        var configuredProviders = providers ?? await _llmRepository.GetProviderKeysAsync(userId);
+        return new ChatSessionGraphResponse
+        {
+            Session = MapSession(session),
+            DefaultProvider = configuredProviders.FirstOrDefault(item => item.IsDefault)?.Provider,
+            AvailableProviders = configuredProviders.Select(item => item.Provider).ToList(),
+            RootNodeId = rootNode.Id,
+            ActiveNodeId = activeId,
+            Nodes = nodes.Select(MapNode).ToList()
+        };
+    }
+
+    private async Task<ChatCanvasNodeDetailResponse> BuildNodeDetailAsync(int userId, int sessionId, ChatNode node)
+    {
+        var localMessages = await _chatSessionRepository.GetNodeMessagesAsync(userId, sessionId, node.Id);
+        var resolvedMessages = await BuildResolvedMessagesAsync(userId, sessionId, node);
+
+        return new ChatCanvasNodeDetailResponse
+        {
+            SessionId = sessionId,
+            NodeId = node.Id,
+            ParentNodeId = node.ParentNodeId,
+            BranchFromMessageId = node.BranchFromMessageId,
+            NodeType = node.NodeType,
+            Title = node.Title,
+            Preview = node.Preview,
+            Content = node.Content,
+            PositionX = node.PositionX,
+            PositionY = node.PositionY,
+            Width = node.Width,
+            Height = node.Height,
+            IsCollapsed = node.IsCollapsed,
+            ExpandedWidth = node.ExpandedWidth,
+            ExpandedHeight = node.ExpandedHeight,
+            PreferredProvider = node.PreferredProvider,
+            PreferredModel = node.PreferredModel,
+            CreatedAt = node.CreatedAt,
+            UpdatedAt = node.UpdatedAt,
+            LocalMessages = localMessages.Select(message => MapMessage(message, message.Role == "assistant")).ToList(),
+            ResolvedMessages = resolvedMessages.Select(message => MapMessage(message, message.NodeId == node.Id && message.Role == "assistant")).ToList()
+        };
+    }
+
+    private async Task<List<ChatMessage>> BuildResolvedMessagesAsync(int userId, int sessionId, ChatNode node)
+    {
+        var localMessages = (await _chatSessionRepository.GetNodeMessagesAsync(userId, sessionId, node.Id)).ToList();
+        if (node.ParentNodeId == null || !node.BranchFromMessageId.HasValue)
+            return localMessages;
+
+        var parentNode = await GetRequiredNodeAsync(userId, sessionId, node.ParentNodeId.Value);
+        var parentHistory = await BuildResolvedMessagesAsync(userId, sessionId, parentNode);
+        var truncatedParentHistory = TakeHistoryUntil(parentHistory, node.BranchFromMessageId.Value);
+
+        return truncatedParentHistory
+            .Concat(localMessages)
+            .ToList();
+    }
+
+    private static List<ChatMessage> TakeHistoryUntil(IReadOnlyList<ChatMessage> messages, int messageId)
+    {
+        var targetIndex = messages.ToList().FindIndex(message => message.Id == messageId);
+        if (targetIndex < 0)
+        {
+            throw new ChatSessionOperationException(
+                "The selected branch message does not exist in this thread.",
+                StatusCodes.Status400BadRequest);
+        }
+
+        return messages.Take(targetIndex + 1).ToList();
+    }
+
+    private async Task<CanvasProviderResolution> ResolveProviderAsync(int userId, string? preferredProvider, string? providerOverride)
+    {
+        var provider = NormalizeNullable(providerOverride) ?? NormalizeNullable(preferredProvider);
+        return await _providerResolver.ResolveAsync(userId, provider);
+    }
+
+    private async Task PersistNodeContextSnapshotAsync(int userId, int sessionId, int nodeId, ChatNodeContextSnapshot snapshot)
+    {
+        var snapshotJson = JsonSerializer.Serialize(snapshot);
+        await _chatSessionRepository.UpdateNodeContextSnapshotAsync(
+            userId,
+            sessionId,
+            nodeId,
+            snapshot.BoundaryMessageId,
+            snapshotJson);
+    }
+
+    private async Task<LlmProviderChatResult> SendConversationAsync(
+        string provider,
+        ILlmProviderClient providerClient,
+        string apiKey,
+        IReadOnlyList<CanvasConversationMessage> messages,
+        string? modelOverride,
+        string? systemPrompt = null)
+    {
+        if (messages.Any(message => !string.IsNullOrWhiteSpace(message.ImageUrl)))
+            return await SendMultimodalConversationAsync(provider, apiKey, messages, modelOverride, systemPrompt);
+
+        return await providerClient.SendChatAsync(
+            apiKey,
+            messages.Select(message => new LlmProviderChatMessage
+            {
+                Role = message.Role,
+                Content = message.Content
+            }).ToList(),
+            modelOverride,
+            systemPrompt);
+    }
+
+    private async Task<LlmProviderChatResult> SendMultimodalConversationAsync(
+        string provider,
+        string apiKey,
+        IReadOnlyList<CanvasConversationMessage> messages,
+        string? modelOverride,
+        string? systemPrompt = null)
+    {
+        return provider switch
+        {
+            LlmProviderNames.OpenAi => await SendOpenAiMultimodalAsync(apiKey, messages, modelOverride, systemPrompt),
+            LlmProviderNames.LmStudio => await SendOpenAiMultimodalAsync(apiKey, messages, modelOverride, systemPrompt),
+            LlmProviderNames.Gemini => await SendGeminiMultimodalAsync(apiKey, messages, modelOverride, systemPrompt),
+            LlmProviderNames.Claude => await SendClaudeMultimodalAsync(apiKey, messages, modelOverride, systemPrompt),
+            _ => throw new LlmChatException(
+                "That provider is not supported yet.",
+                LlmProviderErrorCodes.ProviderError,
+                StatusCodes.Status400BadRequest)
+        };
+    }
+
+    private static async Task<LlmProviderChatResult> SendOpenAiMultimodalAsync(
+        string apiKey,
+        IReadOnlyList<CanvasConversationMessage> messages,
+        string? modelOverride,
+        string? systemPrompt = null)
+    {
+        var model = NormalizeModelOverride(LlmProviderNames.OpenAi, modelOverride) ?? "gpt-4o-mini";
+        using var httpClient = CreateHttpClient();
+        using var request = new HttpRequestMessage(HttpMethod.Post, "https://api.openai.com/v1/chat/completions");
+        request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", apiKey);
+        var chatMessages = messages
+            .Select(message => new
+            {
+                role = message.Role == "assistant" ? "assistant" : "user",
+                content = BuildOpenAiMessageContent(message)
+            })
+            .ToList();
+        if (!string.IsNullOrWhiteSpace(systemPrompt))
+        {
+            chatMessages.Insert(0, new { role = "system", content = (object)systemPrompt });
+        }
+        request.Content = JsonContent.Create(new
+        {
+            model,
+            messages = chatMessages
+        });
+
+        using var response = await SendProviderRequestAsync(httpClient, request, model);
+        using var document = JsonDocument.Parse(await response.Content.ReadAsStringAsync());
+        var messageContent = document.RootElement
+            .GetProperty("choices")[0]
+            .GetProperty("message")
+            .GetProperty("content");
+
+        var content = ExtractTextContent(messageContent);
+        if (string.IsNullOrWhiteSpace(content))
+            throw new LlmChatException("Provider returned an empty response.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway);
+
+        return new LlmProviderChatResult
+        {
+            Content = content.Trim(),
+            Model = model
+        };
+    }
+
+    private static object BuildOpenAiMessageContent(CanvasConversationMessage message)
+    {
+        if (string.IsNullOrWhiteSpace(message.ImageUrl) || message.Role == "assistant")
+            return message.Content;
+
+        return new object[]
+        {
+            new { type = "text", text = message.Content },
+            new { type = "image_url", image_url = new { url = message.ImageUrl } }
+        };
+    }
+
+    private static async Task<LlmProviderChatResult> SendGeminiMultimodalAsync(
+        string apiKey,
+        IReadOnlyList<CanvasConversationMessage> messages,
+        string? modelOverride,
+        string? systemPrompt = null)
+    {
+        var model = NormalizeModelOverride(LlmProviderNames.Gemini, modelOverride) ?? "gemini-1.5-flash";
+        using var httpClient = CreateHttpClient();
+        using var request = new HttpRequestMessage(
+            HttpMethod.Post,
+            $"https://generativelanguage.googleapis.com/v1beta/models/{model}:generateContent?key={Uri.EscapeDataString(apiKey)}");
+        request.Content = JsonContent.Create(new
+        {
+            systemInstruction = string.IsNullOrWhiteSpace(systemPrompt)
+                ? null
+                : new
+                {
+                    parts = new[]
+                    {
+                        new { text = systemPrompt }
+                    }
+                },
+            contents = messages.Select(message => new
+            {
+                role = message.Role == "assistant" ? "model" : "user",
+                parts = BuildGeminiParts(message)
+            })
+        });
+
+        using var response = await SendProviderRequestAsync(httpClient, request, model);
+        using var document = JsonDocument.Parse(await response.Content.ReadAsStringAsync());
+        var parts = document.RootElement
+            .GetProperty("candidates")[0]
+            .GetProperty("content")
+            .GetProperty("parts");
+
+        var content = string.Join(
+            "\n",
+            parts.EnumerateArray()
+                .Where(part => part.TryGetProperty("text", out _))
+                .Select(part => part.GetProperty("text").GetString())
+                .Where(text => !string.IsNullOrWhiteSpace(text)));
+
+        if (string.IsNullOrWhiteSpace(content))
+            throw new LlmChatException("Provider returned an empty response.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway);
+
+        return new LlmProviderChatResult
+        {
+            Content = content.Trim(),
+            Model = model
+        };
+    }
+
+    private static IReadOnlyList<object> BuildGeminiParts(CanvasConversationMessage message)
+    {
+        var parts = new List<object>();
+        if (!string.IsNullOrWhiteSpace(message.Content))
+            parts.Add(new { text = message.Content });
+
+        if (!string.IsNullOrWhiteSpace(message.ImageUrl) && message.Role != "assistant")
+        {
+            var image = ParseDataUrl(message.ImageUrl);
+            parts.Add(new
+            {
+                inlineData = new
+                {
+                    mimeType = image.MimeType,
+                    data = image.Base64Data
+                }
+            });
+        }
+
+        return parts;
+    }
+
+    private static async Task<LlmProviderChatResult> SendClaudeMultimodalAsync(
+        string apiKey,
+        IReadOnlyList<CanvasConversationMessage> messages,
+        string? modelOverride,
+        string? systemPrompt = null)
+    {
+        var model = NormalizeModelOverride(LlmProviderNames.Claude, modelOverride) ?? "claude-3-5-sonnet-latest";
+        using var httpClient = CreateHttpClient();
+        using var request = new HttpRequestMessage(HttpMethod.Post, "https://api.anthropic.com/v1/messages");
+        request.Headers.Add("x-api-key", apiKey);
+        request.Headers.Add("anthropic-version", "2023-06-01");
+        request.Content = JsonContent.Create(new
+        {
+            model,
+            max_tokens = 1024,
+            system = systemPrompt,
+            messages = messages.Select(message => new
+            {
+                role = message.Role == "assistant" ? "assistant" : "user",
+                content = BuildClaudeContent(message)
+            })
+        });
+
+        using var response = await SendProviderRequestAsync(httpClient, request, model);
+        using var document = JsonDocument.Parse(await response.Content.ReadAsStringAsync());
+        var content = string.Join(
+            "\n",
+            document.RootElement
+                .GetProperty("content")
+                .EnumerateArray()
+                .Where(item => item.TryGetProperty("type", out var typeProperty) && typeProperty.GetString() == "text")
+                .Select(item => item.GetProperty("text").GetString())
+                .Where(text => !string.IsNullOrWhiteSpace(text)));
+
+        if (string.IsNullOrWhiteSpace(content))
+            throw new LlmChatException("Provider returned an empty response.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway);
+
+        return new LlmProviderChatResult
+        {
+            Content = content.Trim(),
+            Model = model
+        };
+    }
+
+    private static IReadOnlyList<object> BuildClaudeContent(CanvasConversationMessage message)
+    {
+        var parts = new List<object>();
+        if (!string.IsNullOrWhiteSpace(message.Content))
+            parts.Add(new { type = "text", text = message.Content });
+
+        if (!string.IsNullOrWhiteSpace(message.ImageUrl) && message.Role != "assistant")
+        {
+            var image = ParseDataUrl(message.ImageUrl);
+            parts.Add(new
+            {
+                type = "image",
+                source = new
+                {
+                    type = "base64",
+                    media_type = image.MimeType,
+                    data = image.Base64Data
+                }
+            });
+        }
+
+        return parts;
+    }
+
+    private static async Task<HttpResponseMessage> SendProviderRequestAsync(HttpClient httpClient, HttpRequestMessage request, string model)
+    {
+        try
+        {
+            var response = await httpClient.SendAsync(request);
+            if (response.IsSuccessStatusCode)
+                return response;
+
+            await ThrowProviderFailureAsync(response, model);
+            throw new InvalidOperationException("Provider failure did not throw as expected.");
+        }
+        catch (TaskCanceledException ex)
+        {
+            throw new LlmChatException("Provider request timed out.", LlmProviderErrorCodes.Timeout, StatusCodes.Status504GatewayTimeout, ex);
+        }
+        catch (HttpRequestException ex)
+        {
+            throw new LlmChatException("Provider request failed.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway, ex);
+        }
+    }
+
+    private static async Task ThrowProviderFailureAsync(HttpResponseMessage response, string model)
+    {
+        var body = await response.Content.ReadAsStringAsync();
+        var code = response.StatusCode switch
+        {
+            HttpStatusCode.Unauthorized or HttpStatusCode.Forbidden => LlmProviderErrorCodes.InvalidKey,
+            HttpStatusCode.TooManyRequests => LlmProviderErrorCodes.RateLimited,
+            _ => LlmProviderErrorCodes.ProviderError
+        };
+
+        var message = response.StatusCode switch
+        {
+            HttpStatusCode.Unauthorized or HttpStatusCode.Forbidden => "The saved API key is invalid.",
+            HttpStatusCode.TooManyRequests => "The provider is rate limiting requests right now.",
+            _ => "The provider returned an unexpected error."
+        };
+
+        throw new LlmChatException(
+            message,
+            code,
+            response.StatusCode switch
+            {
+                HttpStatusCode.Unauthorized or HttpStatusCode.Forbidden => StatusCodes.Status400BadRequest,
+                HttpStatusCode.TooManyRequests => StatusCodes.Status429TooManyRequests,
+                _ => StatusCodes.Status502BadGateway
+            },
+            new InvalidOperationException($"Model: {model}\n{body}"));
+    }
+
+    private static string ExtractTextContent(JsonElement contentElement)
+    {
+        if (contentElement.ValueKind == JsonValueKind.String)
+            return contentElement.GetString() ?? string.Empty;
+
+        if (contentElement.ValueKind != JsonValueKind.Array)
+            return string.Empty;
+
+        return string.Join(
+            "\n",
+            contentElement.EnumerateArray()
+                .Where(item => item.TryGetProperty("type", out var typeProperty) && typeProperty.GetString() == "text")
+                .Select(item => item.GetProperty("text").GetString())
+                .Where(text => !string.IsNullOrWhiteSpace(text)));
+    }
+
+    private static string ResolveImageModel(string provider, string? explicitModel)
+    {
+        var normalizedModel = NormalizeModelOverride(provider, explicitModel);
+        if (!string.IsNullOrWhiteSpace(normalizedModel))
+        {
+            if (!SupportsImageGeneration(provider, normalizedModel))
+            {
+                throw new LlmChatException(
+                    "The selected provider or model does not support image generation.",
+                    LlmProviderErrorCodes.UnsupportedCapability,
+                    StatusCodes.Status400BadRequest);
+            }
+
+            return normalizedModel;
+        }
+
+        return provider switch
+        {
+            LlmProviderNames.OpenAi => "gpt-image-1",
+            LlmProviderNames.Gemini => "gemini-2.0-flash-preview-image-generation",
+            _ => throw new LlmChatException(
+                "The selected provider or model does not support image generation.",
+                LlmProviderErrorCodes.UnsupportedCapability,
+                StatusCodes.Status400BadRequest)
+        };
+    }
+
+    private static bool SupportsImageGeneration(string provider, string model)
+    {
+        var normalizedProvider = LlmProviderNames.Normalize(provider);
+        var normalizedModel = model.Trim().ToLowerInvariant();
+
+        return normalizedProvider switch
+        {
+            LlmProviderNames.OpenAi => normalizedModel.Contains("image", StringComparison.Ordinal),
+            LlmProviderNames.Gemini => normalizedModel.Contains("image", StringComparison.Ordinal),
+            _ => false
+        };
+    }
+
+    private static async Task<string> GenerateImageForProviderAsync(string provider, string apiKey, string prompt, string model)
+    {
+        return provider switch
+        {
+            LlmProviderNames.OpenAi => await GenerateOpenAiImageAsync(apiKey, prompt, model),
+            LlmProviderNames.Gemini => await GenerateGeminiImageAsync(apiKey, prompt, model),
+            _ => throw new LlmChatException(
+                "The selected provider or model does not support image generation.",
+                LlmProviderErrorCodes.UnsupportedCapability,
+                StatusCodes.Status400BadRequest)
+        };
+    }
+
+    private static async Task<string> GenerateOpenAiImageAsync(string apiKey, string prompt, string model)
+    {
+        using var httpClient = CreateHttpClient();
+        using var request = new HttpRequestMessage(HttpMethod.Post, "https://api.openai.com/v1/images/generations");
+        request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", apiKey);
+        request.Content = JsonContent.Create(new
+        {
+            model,
+            prompt,
+            size = "1024x1024",
+            response_format = "b64_json"
+        });
+
+        using var response = await SendProviderRequestAsync(httpClient, request, model);
+        using var document = JsonDocument.Parse(await response.Content.ReadAsStringAsync());
+        var data = document.RootElement.GetProperty("data")[0];
+
+        if (data.TryGetProperty("b64_json", out var b64Element) && !string.IsNullOrWhiteSpace(b64Element.GetString()))
+            return $"data:image/png;base64,{b64Element.GetString()}";
+
+        if (data.TryGetProperty("url", out var urlElement) && !string.IsNullOrWhiteSpace(urlElement.GetString()))
+            return urlElement.GetString()!;
+
+        throw new LlmChatException("Provider returned an empty image response.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway);
+    }
+
+    private static async Task<string> GenerateGeminiImageAsync(string apiKey, string prompt, string model)
+    {
+        using var httpClient = CreateHttpClient();
+        using var request = new HttpRequestMessage(
+            HttpMethod.Post,
+            $"https://generativelanguage.googleapis.com/v1beta/models/{model}:generateContent?key={Uri.EscapeDataString(apiKey)}");
+        request.Content = JsonContent.Create(new
+        {
+            contents = new[]
+            {
+                new
+                {
+                    role = "user",
+                    parts = new[]
+                    {
+                        new { text = prompt }
+                    }
+                }
+            },
+            generationConfig = new
+            {
+                responseModalities = new[] { "TEXT", "IMAGE" }
+            }
+        });
+
+        using var response = await SendProviderRequestAsync(httpClient, request, model);
+        using var document = JsonDocument.Parse(await response.Content.ReadAsStringAsync());
+        var parts = document.RootElement
+            .GetProperty("candidates")[0]
+            .GetProperty("content")
+            .GetProperty("parts");
+
+        foreach (var part in parts.EnumerateArray())
+        {
+            if (!part.TryGetProperty("inlineData", out var inlineData))
+                continue;
+
+            var mimeType = inlineData.GetProperty("mimeType").GetString() ?? "image/png";
+            var base64Data = inlineData.GetProperty("data").GetString();
+            if (!string.IsNullOrWhiteSpace(base64Data))
+                return $"data:{mimeType};base64,{base64Data}";
+        }
+
+        throw new LlmChatException("Provider returned an empty image response.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway);
+    }
+
+    private static HttpClient CreateHttpClient()
+    {
+        return new HttpClient
+        {
+            Timeout = TimeSpan.FromSeconds(30)
+        };
+    }
+
+    private static DataUrlParts ParseDataUrl(string dataUrl)
+    {
+        var match = DataUrlRegex().Match(dataUrl);
+        if (!match.Success)
+        {
+            throw new LlmChatException(
+                "Image attachments must be sent as data URLs.",
+                LlmProviderErrorCodes.UnsupportedCapability,
+                StatusCodes.Status400BadRequest);
+        }
+
+        return new DataUrlParts(match.Groups["mime"].Value, match.Groups["data"].Value);
+    }
+
+    private static string BuildNotePrompt(ChatNode node, IReadOnlyList<ChatMessage> messages)
+    {
+        var history = string.Join(
+            "\n",
+            messages.Select(message => $"{message.Role.ToUpperInvariant()}: {message.Content}"));
+
+        return
+            """
+            Synthesize the following node into a professional, elegant note.
+            Use structured plain text only.
+            Do not use markdown symbols such as #, *, or bullet markers.
+            Treat the first line as the note title.
+            Keep the result substantial and easy to read in a sticky-note style layout.
+            """
+            + $"\n\nNODE TITLE:\n{node.Title}\n"
+            + (string.IsNullOrWhiteSpace(node.Content) ? string.Empty : $"\nNODE CONTENT:\n{node.Content}\n")
+            + (string.IsNullOrWhiteSpace(history) ? string.Empty : $"\nLOCAL CONVERSATION:\n{history}\n");
+    }
+
+    private async Task<GuestChatPreviewResponse> PreviewGuestChatAsync(
+        IReadOnlyList<ConversationMessage> messages,
+        string? prompt,
+        string? imageUrl,
+        string provider,
+        ILlmProviderClient? providerClient,
+        string? apiKey,
+        string? modelOverride)
+    {
+        var normalizedPrompt = prompt ?? "Continue this thought.";
+        if (providerClient != null && !string.IsNullOrWhiteSpace(apiKey))
+        {
+            var conversation = messages
+                .Select(message => new CanvasConversationMessage(message.Role, message.Content, message.ImageUrl))
+                .ToList();
+            conversation.Add(new CanvasConversationMessage(
+                "user",
+                imageUrl is null ? ApplyRichDocumentInstruction(normalizedPrompt) : normalizedPrompt,
+                imageUrl));
+
+            var providerReply = await SendConversationAsync(provider, providerClient, apiKey, conversation, modelOverride);
+            return new GuestChatPreviewResponse
+            {
+                ActionType = "chat",
+                Message = providerReply.Content,
+                Provider = provider,
+                Model = providerReply.Model
+            };
+        }
+
+        return new GuestChatPreviewResponse
+        {
+            ActionType = "chat",
+            Message = BuildGuestFallbackRichDocument(normalizedPrompt),
+            Provider = provider,
+            Model = modelOverride
+        };
+    }
+
+    private async Task<GuestChatPreviewResponse> PreviewGuestNoteAsync(
+        IReadOnlyList<ConversationMessage> messages,
+        string? content,
+        string provider,
+        ILlmProviderClient? providerClient,
+        string? apiKey,
+        string? modelOverride)
+    {
+        var noteSource = string.Join(
+            "\n",
+            messages
+                .Where(message => !string.IsNullOrWhiteSpace(message.Content))
+                .Select(message => $"{message.Role.ToUpperInvariant()}: {message.Content}"));
+
+        if (!string.IsNullOrWhiteSpace(content))
+            noteSource = string.IsNullOrWhiteSpace(noteSource) ? content : $"{noteSource}\nRAW CONTENT: {content}";
+
+        if (string.IsNullOrWhiteSpace(noteSource))
+            noteSource = "Thought summary";
+
+        if (providerClient != null && !string.IsNullOrWhiteSpace(apiKey))
+        {
+            var providerReply = await providerClient.SendChatAsync(
+                apiKey,
+                [new LlmProviderChatMessage
+                {
+                    Role = "user",
+                    Content =
+                        """
+                        Synthesize the following node into a professional, elegant note.
+                        Use structured plain text only.
+                        Do not use markdown symbols such as #, *, or bullet markers.
+                        Treat the first line as the note title.
+                        Keep the result substantial and easy to read in a sticky-note style layout.
+                        """
+                        + $"\n\nSOURCE:\n{noteSource}"
+                }],
+                modelOverride);
+
+            var lines = providerReply.Content
+                .Split('\n', StringSplitOptions.TrimEntries | StringSplitOptions.RemoveEmptyEntries);
+            return new GuestChatPreviewResponse
+            {
+                ActionType = "note",
+                NoteTitle = lines.FirstOrDefault() ?? GeneratedNoteTitle,
+                NoteContent = providerReply.Content,
+                Provider = provider,
+                Model = providerReply.Model
+            };
+        }
+
+        var fallbackNote = BuildGuestFallbackNote(noteSource);
+        return new GuestChatPreviewResponse
+        {
+            ActionType = "note",
+            NoteTitle = fallbackNote.Split('\n', StringSplitOptions.RemoveEmptyEntries).FirstOrDefault() ?? GeneratedNoteTitle,
+            NoteContent = fallbackNote,
+            Provider = provider,
+            Model = modelOverride
+        };
+    }
+
+    private async Task<GuestChatPreviewResponse> PreviewGuestImageAsync(
+        string? prompt,
+        string provider,
+        string? apiKey,
+        string? modelOverride)
+    {
+        var normalizedPrompt = NormalizeTitle(prompt ?? "Abstract visual composition", "Image prompt is required.", 4000);
+        if (!string.IsNullOrWhiteSpace(apiKey))
+        {
+            var imageModel = ResolveImageModel(provider, modelOverride);
+            var imageUrl = await GenerateImageForProviderAsync(provider, apiKey, normalizedPrompt, imageModel);
+            return new GuestChatPreviewResponse
+            {
+                ActionType = "image",
+                Message = $"Here is the visual manifestation for: **{normalizedPrompt}**",
+                ImageUrl = imageUrl,
+                Provider = provider,
+                Model = imageModel
+            };
+        }
+
+        return new GuestChatPreviewResponse
+        {
+            ActionType = "image",
+            Message = $"Here is the visual manifestation for: **{normalizedPrompt}**",
+            ImageUrl = BuildGuestFallbackImageDataUrl(normalizedPrompt),
+            Provider = provider,
+            Model = modelOverride
+        };
+    }
+
+    private string? ResolveGuestPreviewApiKey(string provider)
+    {
+        return NormalizeNullable(
+            _configuration[$"Llm:GuestPreview:{provider}:ApiKey"]
+            ?? _configuration["Llm:GuestPreview:ApiKey"]);
+    }
+
+    private string? ResolveGuestPreviewModel(string provider, string requestedModel)
+    {
+        var configuredModel = NormalizeNullable(
+            _configuration[$"Llm:GuestPreview:{provider}:Model"]
+            ?? _configuration["Llm:GuestPreview:Model"]);
+
+        return NormalizeModelOverride(provider, requestedModel)
+            ?? NormalizeModelOverride(provider, configuredModel)
+            ?? GetDefaultGuestModel(provider);
+    }
+
+    private static string NormalizeGuestActionType(string? actionType)
+    {
+        var normalized = NormalizeNullable(actionType)?.ToLowerInvariant();
+        return normalized switch
+        {
+            "chat" or "response" => "chat",
+            "note" => "note",
+            "image" => "image",
+            _ => "chat"
+        };
+    }
+
+    private static string InferProviderFromModel(string model)
+    {
+        var normalized = model.Trim().ToLowerInvariant();
+        if (normalized == "local-model" || normalized.StartsWith("lmstudio", StringComparison.Ordinal))
+            return LlmProviderNames.LmStudio;
+        if (normalized.Contains("claude", StringComparison.Ordinal))
+            return LlmProviderNames.Claude;
+        if (normalized.StartsWith("gpt", StringComparison.Ordinal) || normalized.Contains("gpt-", StringComparison.Ordinal) || normalized.StartsWith("o1", StringComparison.Ordinal) || normalized.StartsWith("o3", StringComparison.Ordinal))
+            return LlmProviderNames.OpenAi;
+        return LlmProviderNames.Gemini;
+    }
+
+    private static string GetDefaultGuestModel(string provider)
+    {
+        return LlmProviderNames.Normalize(provider) switch
+        {
+            LlmProviderNames.OpenAi => "gpt-5.2",
+            LlmProviderNames.Claude => "claude-sonnet-4-20250514",
+            LlmProviderNames.LmStudio => "local-model",
+            _ => "gemini-3.1-flash-lite-preview"
+        };
+    }
+
+    private static string BuildGuestFallbackRichDocument(string prompt)
+    {
+        var title = BuildDisplayTitle(prompt, 48);
+        return
+            $"# {title}\n\n" +
+            "## Overview\n" +
+            $"The guest preview interpreted your prompt as: **{prompt}**.\n\n" +
+            "---\n\n" +
+            "## Next Angles\n" +
+            "1. Clarify the core objective.\n" +
+            "2. Identify the strongest supporting evidence.\n" +
+            "3. Decide what should become a branch, note, or follow-up prompt.\n\n" +
+            "---\n\n" +
+            "## Recommended Next Step\n" +
+            "Turn this into a deeper node conversation after signing in so the canvas can persist across sessions.";
+    }
+
+    private static string BuildGuestFallbackNote(string content)
+    {
+        var title = BuildDisplayTitle(content, 42);
+        return
+            $"{title}\n\n" +
+            "This preview note captures the current thought in plain text.\n\n" +
+            $"Source focus: {content}\n\n" +
+            "Convert this into a saved canvas after sign-in to keep the full structure and AI history.";
+    }
+
+    private static string BuildGuestFallbackImageDataUrl(string prompt)
+    {
+        var escapedPrompt = WebUtility.HtmlEncode(prompt);
+        var svg =
+            """
+            <svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
+              <defs>
+                <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop offset="0%" stop-color="#0f0f10"/>
+                  <stop offset="100%" stop-color="#242426"/>
+                </linearGradient>
+              </defs>
+              <rect width="1024" height="1024" fill="url(#bg)"/>
+              <rect x="96" y="96" width="832" height="832" rx="48" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.12)"/>
+              <text x="512" y="460" text-anchor="middle" fill="#f4f4f5" font-size="42" font-family="Arial, sans-serif">Guest Preview</text>
+              <text x="512" y="540" text-anchor="middle" fill="#a1a1aa" font-size="26" font-family="Arial, sans-serif">
+            """
+            + escapedPrompt +
+            """
+              </text>
+            </svg>
+            """;
+
+        return $"data:image/svg+xml;base64,{Convert.ToBase64String(System.Text.Encoding.UTF8.GetBytes(svg))}";
+    }
+
+    private static string NormalizeImportedRole(string role)
+    {
+        return role.Trim().ToLowerInvariant() switch
+        {
+            "assistant" or "model" => "assistant",
+            _ => "user"
+        };
+    }
+
+    private static string ApplyRichDocumentInstruction(string content)
+    {
+        return $"{content}\n\n[FORMATTING INSTRUCTION: {RichDocumentInstruction}]";
+    }
+
+    private static (double Width, double Height) ResolveNodeSize(string nodeType, double? width, double? height)
+    {
+        var defaultWidth = nodeType == ChatNodeTypes.Note ? DefaultNoteWidth : DefaultNodeWidth;
+        var defaultHeight = nodeType == ChatNodeTypes.Note ? DefaultNoteHeight : DefaultNodeHeight;
+
+        return (width ?? defaultWidth, height ?? defaultHeight);
+    }
+
+    private static (double PositionX, double PositionY) ResolveNodePosition(
+        ChatNode parentNode,
+        string nodeType,
+        IReadOnlyList<ChatNode> existingNodes,
+        double? requestedX,
+        double? requestedY)
+    {
+        if (requestedX.HasValue && requestedY.HasValue)
+            return (requestedX.Value, requestedY.Value);
+
+        const double collisionWidth = 600;
+        const double collisionHeight = 520;
+
+        static bool IsColliding(IReadOnlyList<ChatNode> nodes, double candidateX, double candidateY)
+        {
+            return nodes.Any(node =>
+            {
+                var width = node.Width > 0 ? node.Width : 340;
+                var height = node.Height > 0 ? node.Height : 420;
+
+                return !(candidateX + collisionWidth < node.PositionX
+                    || candidateX > node.PositionX + width + 60
+                    || candidateY + collisionHeight < node.PositionY
+                    || candidateY > node.PositionY + height + 60);
+            });
+        }
+
+        if (nodeType == ChatNodeTypes.Note)
+        {
+            var candidateX = requestedX ?? (parentNode.PositionX + (parentNode.Width > 0 ? parentNode.Width : 340) + 40);
+            var candidateY = requestedY ?? parentNode.PositionY;
+
+            if (!IsColliding(existingNodes, candidateX, candidateY))
+                return (candidateX, candidateY);
+
+            return (
+                candidateX,
+                candidateY + 100);
+        }
+
+        var nextX = requestedX ?? (parentNode.PositionX + 20);
+        var nextY = requestedY ?? (parentNode.PositionY + 450);
+        var tier = 0;
+
+        while (IsColliding(existingNodes, nextX, nextY) && tier < 10)
+        {
+            foreach (var offset in new[] { -1d, 1d })
+            {
+                var candidateX = nextX + (offset * collisionWidth);
+                if (!IsColliding(existingNodes, candidateX, nextY))
+                    return (candidateX, nextY);
+            }
+
+            nextY += collisionHeight - 100;
+            tier++;
+        }
+
+        return (nextX, nextY);
+    }
+
+    private static (double Width, double Height) CalculateGeneratedNoteSize(string content)
+    {
+        var lines = Math.Max(4, Math.Ceiling(content.Length / 70d));
+        return (DefaultNodeWidth, lines * 37.8 + 160);
+    }
+
+    private static ChatNodeUpdateInput BuildUpdatedNodeInput(
+        ChatNode node,
+        string? title = null,
+        string? preview = null,
+        string? content = null,
+        double? positionX = null,
+        double? positionY = null,
+        double? width = null,
+        double? height = null,
+        string? preferredProvider = null,
+        string? preferredModel = null)
+    {
+        return new ChatNodeUpdateInput
+        {
+            NodeType = node.ParentNodeId == null ? ChatNodeTypes.Question : node.NodeType,
+            Title = title ?? node.Title,
+            Preview = preview ?? node.Preview,
+            Content = content ?? node.Content,
+            PositionX = positionX ?? node.PositionX,
+            PositionY = positionY ?? node.PositionY,
+            Width = width ?? node.Width,
+            Height = height ?? node.Height,
+            IsCollapsed = node.IsCollapsed,
+            ExpandedWidth = node.ExpandedWidth ?? node.Width,
+            ExpandedHeight = node.ExpandedHeight ?? node.Height,
+            PreferredProvider = preferredProvider ?? node.PreferredProvider,
+            PreferredModel = preferredModel ?? node.PreferredModel
+        };
+    }
+
+    private static string GetDefaultNodeTitle(string nodeType)
+    {
+        return nodeType switch
+        {
+            ChatNodeTypes.Response => "AI response...",
+            ChatNodeTypes.Note => "Note...",
+            _ => "New question..."
+        };
+    }
+
+    private static string NormalizeNodeTitle(string? title, string defaultTitle, int maxLength)
+    {
+        var normalized = NormalizeOptionalContent(title);
+        if (normalized is null)
+            return defaultTitle;
+
+        return normalized.Length <= maxLength
+            ? normalized
+            : $"{normalized[..(maxLength - 3)].TrimEnd()}...";
+    }
+
+    private static string NormalizeTitle(string value, string errorMessage, int maxLength)
+    {
+        var normalized = NormalizeOptionalContent(value);
+        if (normalized is null)
+            throw new ChatSessionOperationException(errorMessage, StatusCodes.Status400BadRequest);
+
+        return normalized.Length <= maxLength
+            ? normalized
+            : $"{normalized[..(maxLength - 3)].TrimEnd()}...";
+    }
+
+    private static string? NormalizeOptionalContent(string? content)
+    {
+        if (string.IsNullOrWhiteSpace(content))
+            return null;
+
+        return WhitespaceRegex().Replace(content, " ").Trim();
+    }
+
+    private static string? NormalizeRichContent(string? content)
+    {
+        if (string.IsNullOrWhiteSpace(content))
+            return null;
+
+        return content.Trim();
+    }
+
+    private static string? NormalizeSessionTitle(string? title)
+    {
+        var normalized = NormalizeOptionalContent(title);
+        if (normalized is null)
+            return null;
+
+        return normalized.Length <= SessionTitleMaxLength
+            ? normalized
+            : $"{normalized[..(SessionTitleMaxLength - 3)].TrimEnd()}...";
+    }
+
+    private static string? NormalizeNullable(string? value)
+    {
+        return string.IsNullOrWhiteSpace(value)
+            ? null
+            : value.Trim();
+    }
+
+    private static string? NormalizeModelOverride(string provider, string? modelOverride)
+    {
+        if (string.IsNullOrWhiteSpace(modelOverride))
+            return null;
+
+        var normalizedProvider = LlmProviderNames.Normalize(provider);
+        var normalizedModel = modelOverride.Trim();
+
+        return (normalizedProvider, normalizedModel.ToLowerInvariant()) switch
+        {
+            (LlmProviderNames.Claude, "claude-3-5-sonnet") => "claude-sonnet-4-20250514",
+            (LlmProviderNames.Claude, "claude-3-5-sonnet-latest") => "claude-sonnet-4-20250514",
+            _ => normalizedModel
+        };
+    }
+
+    private static ChatSessionSummaryResponse MapSession(ChatSession session)
+    {
+        return new ChatSessionSummaryResponse
+        {
+            Id = session.Id,
+            Title = session.Title,
+            CreatedAt = session.CreatedAt,
+            UpdatedAt = session.UpdatedAt
+        };
+    }
+
+    private static ChatCanvasNodeSummaryResponse MapNode(ChatNode node)
+    {
+        return new ChatCanvasNodeSummaryResponse
+        {
+            Id = node.Id,
+            ParentNodeId = node.ParentNodeId,
+            BranchFromMessageId = node.BranchFromMessageId,
+            NodeType = node.NodeType,
+            Title = node.Title,
+            Preview = node.Preview,
+            Content = node.Content,
+            PositionX = node.PositionX,
+            PositionY = node.PositionY,
+            Width = node.Width,
+            Height = node.Height,
+            IsCollapsed = node.IsCollapsed,
+            ExpandedWidth = node.ExpandedWidth,
+            ExpandedHeight = node.ExpandedHeight,
+            PreferredProvider = node.PreferredProvider,
+            PreferredModel = node.PreferredModel,
+            CreatedAt = node.CreatedAt,
+            UpdatedAt = node.UpdatedAt
+        };
+    }
+
+    private static ChatCanvasMessageResponse MapMessage(ChatMessage message, bool canBranch)
+    {
+        return new ChatCanvasMessageResponse
+        {
+            Id = message.Id,
+            NodeId = message.NodeId,
+            Role = message.Role,
+            Content = message.Content,
+            ImageUrl = message.ImageUrl,
+            Provider = message.Provider,
+            Model = message.Model,
+            CreatedAt = message.CreatedAt,
+            CanBranch = canBranch
+        };
+    }
+
+    private ILlmProviderClient GetProviderClient(string provider)
+    {
+        if (_providerClients.TryGetValue(provider, out var client))
+            return client;
+
+        throw new LlmChatException(
+            "That provider is not supported yet.",
+            LlmProviderErrorCodes.ProviderError,
+            StatusCodes.Status400BadRequest);
+    }
+
+    private static string BuildDisplayTitle(string content, int maxLength)
+    {
+        var normalized = WhitespaceRegex().Replace(content, " ").Trim();
+        if (string.IsNullOrWhiteSpace(normalized))
+            return BlankSessionTitle;
+
+        return normalized.Length <= maxLength
+            ? normalized
+            : $"{normalized[..(maxLength - 3)].TrimEnd()}...";
+    }
+
+    private static string BuildPreview(string content)
+    {
+        var normalized = WhitespaceRegex().Replace(content, " ").Trim();
+        if (string.IsNullOrWhiteSpace(normalized))
+            return string.Empty;
+
+        return normalized.Length <= PreviewMaxLength
+            ? normalized
+            : $"{normalized[..(PreviewMaxLength - 3)].TrimEnd()}...";
+    }
+
+    [GeneratedRegex(@"\s+")]
+    private static partial Regex WhitespaceRegex();
+
+    [GeneratedRegex(@"^data:(?<mime>[-\w.+/]+);base64,(?<data>.+)$", RegexOptions.IgnoreCase)]
+    private static partial Regex DataUrlRegex();
+
+    private sealed record ConversationMessage(string Role, string Content, string? ImageUrl);
+    private sealed record DataUrlParts(string MimeType, string Base64Data);
+}
diff --git a/backend/Coliee.API/Services/ClaudeProviderClient.cs b/backend/Coliee.API/Services/ClaudeProviderClient.cs
index 219a8c1..6bf2915 100644
--- a/backend/Coliee.API/Services/ClaudeProviderClient.cs
+++ b/backend/Coliee.API/Services/ClaudeProviderClient.cs
@@ -28,21 +28,81 @@ public Task TestApiKeyAsync(string apiKey, CancellationToken cancellationToken =
         return SendChatAsync(
             apiKey,
             [new LlmProviderChatMessage { Role = "user", Content = "Reply with OK." }],
-            cancellationToken);
+            cancellationToken: cancellationToken);
+    }
+
+    public async Task<IReadOnlyList<LlmProviderModel>> GetModelsAsync(string apiKey, CancellationToken cancellationToken = default)
+    {
+        using var request = new HttpRequestMessage(HttpMethod.Get, $"{_baseUrl}/models?limit=1000");
+        request.Headers.Add("x-api-key", apiKey);
+        request.Headers.Add("anthropic-version", _anthropicVersion);
+
+        using var linkedCts = CancellationTokenSource.CreateLinkedTokenSource(cancellationToken);
+        linkedCts.CancelAfter(TimeSpan.FromSeconds(30));
+
+        HttpResponseMessage response;
+
+        try
+        {
+            response = await _httpClient.SendAsync(request, linkedCts.Token);
+        }
+        catch (OperationCanceledException ex) when (!cancellationToken.IsCancellationRequested)
+        {
+            _logger.LogWarning(ex, "Claude model list request timed out.");
+            throw new LlmChatException("Provider request timed out.", LlmProviderErrorCodes.Timeout, StatusCodes.Status504GatewayTimeout, ex);
+        }
+        catch (HttpRequestException ex)
+        {
+            _logger.LogWarning(ex, "Claude model list request failed.");
+            throw new LlmChatException("Provider request failed.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway, ex);
+        }
+
+        using (response)
+        {
+            if (!response.IsSuccessStatusCode)
+                await ThrowForFailureAsync(response, _model, linkedCts.Token);
+
+            using var document = JsonDocument.Parse(await response.Content.ReadAsStringAsync(linkedCts.Token));
+            if (!document.RootElement.TryGetProperty("data", out var dataElement) || dataElement.ValueKind != JsonValueKind.Array)
+                return [];
+
+            return dataElement
+                .EnumerateArray()
+                .Select(item =>
+                {
+                    var id = TryGetString(item, "id");
+                    if (string.IsNullOrWhiteSpace(id))
+                        return null;
+
+                    return new LlmProviderModel
+                    {
+                        Id = id,
+                        DisplayName = TryGetString(item, "display_name") ?? id
+                    };
+                })
+                .Where(item => item != null)
+                .Cast<LlmProviderModel>()
+                .OrderBy(item => item.DisplayName ?? item.Id, StringComparer.OrdinalIgnoreCase)
+                .ToList();
+        }
     }
 
     public async Task<LlmProviderChatResult> SendChatAsync(
         string apiKey,
         IReadOnlyList<LlmProviderChatMessage> messages,
+        string? modelOverride = null,
+        string? systemPrompt = null,
         CancellationToken cancellationToken = default)
     {
+        var model = ResolveModel(modelOverride);
         using var request = new HttpRequestMessage(HttpMethod.Post, $"{_baseUrl}/messages");
         request.Headers.Add("x-api-key", apiKey);
         request.Headers.Add("anthropic-version", _anthropicVersion);
         request.Content = JsonContent.Create(new
         {
-            model = _model,
+            model,
             max_tokens = 1024,
+            system = systemPrompt,
             messages = messages.Select(message => new
             {
                 role = message.Role == "assistant" ? "assistant" : "user",
@@ -61,19 +121,19 @@ public async Task<LlmProviderChatResult> SendChatAsync(
         }
         catch (OperationCanceledException ex) when (!cancellationToken.IsCancellationRequested)
         {
-            _logger.LogWarning(ex, "Claude request timed out for model {Model}.", _model);
+            _logger.LogWarning(ex, "Claude request timed out for model {Model}.", model);
             throw new LlmChatException("Provider request timed out.", LlmProviderErrorCodes.Timeout, StatusCodes.Status504GatewayTimeout, ex);
         }
         catch (HttpRequestException ex)
         {
-            _logger.LogWarning(ex, "Claude request failed for model {Model}.", _model);
+            _logger.LogWarning(ex, "Claude request failed for model {Model}.", model);
             throw new LlmChatException("Provider request failed.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway, ex);
         }
 
         using (response)
         {
             if (!response.IsSuccessStatusCode)
-                await ThrowForFailureAsync(response, linkedCts.Token);
+                await ThrowForFailureAsync(response, model, linkedCts.Token);
 
             using var document = JsonDocument.Parse(await response.Content.ReadAsStringAsync(linkedCts.Token));
             var contentItems = document.RootElement.GetProperty("content");
@@ -81,19 +141,113 @@ public async Task<LlmProviderChatResult> SendChatAsync(
 
             if (string.IsNullOrWhiteSpace(content))
             {
-                _logger.LogWarning("Claude returned an empty response for model {Model}.", _model);
+                _logger.LogWarning("Claude returned an empty response for model {Model}.", model);
                 throw new LlmChatException("Provider returned an empty response.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway);
             }
 
             return new LlmProviderChatResult
             {
                 Content = content.Trim(),
-                Model = _model
+                Model = model
             };
         }
     }
 
-    private async Task ThrowForFailureAsync(HttpResponseMessage response, CancellationToken cancellationToken)
+    public async Task<LlmProviderChatResult> SendStructuredJsonAsync(
+        string apiKey,
+        LlmProviderStructuredRequest structuredRequest,
+        string? modelOverride = null,
+        CancellationToken cancellationToken = default)
+    {
+        var model = ResolveModel(modelOverride);
+        using var schemaDocument = JsonDocument.Parse(structuredRequest.SchemaJson);
+        using var request = new HttpRequestMessage(HttpMethod.Post, $"{_baseUrl}/messages");
+        request.Headers.Add("x-api-key", apiKey);
+        request.Headers.Add("anthropic-version", _anthropicVersion);
+        request.Content = JsonContent.Create(new
+        {
+            model,
+            max_tokens = structuredRequest.MaxOutputTokens,
+            system = structuredRequest.Instructions,
+            messages = structuredRequest.Messages.Select(message => new
+            {
+                role = message.Role == "assistant" ? "assistant" : "user",
+                content = message.Content
+            }),
+            tools = new[]
+            {
+                new
+                {
+                    name = structuredRequest.SchemaName,
+                    description = "Return the requested structured JSON.",
+                    input_schema = schemaDocument.RootElement.Clone()
+                }
+            },
+            tool_choice = new
+            {
+                type = "tool",
+                name = structuredRequest.SchemaName
+            }
+        });
+
+        using var linkedCts = CancellationTokenSource.CreateLinkedTokenSource(cancellationToken);
+        linkedCts.CancelAfter(TimeSpan.FromSeconds(30));
+
+        HttpResponseMessage response;
+
+        try
+        {
+            response = await _httpClient.SendAsync(request, linkedCts.Token);
+        }
+        catch (OperationCanceledException ex) when (!cancellationToken.IsCancellationRequested)
+        {
+            _logger.LogWarning(ex, "Claude request timed out for model {Model}.", model);
+            throw new LlmChatException("Provider request timed out.", LlmProviderErrorCodes.Timeout, StatusCodes.Status504GatewayTimeout, ex);
+        }
+        catch (HttpRequestException ex)
+        {
+            _logger.LogWarning(ex, "Claude request failed for model {Model}.", model);
+            throw new LlmChatException("Provider request failed.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway, ex);
+        }
+
+        using (response)
+        {
+            if (!response.IsSuccessStatusCode)
+                await ThrowForFailureAsync(response, model, linkedCts.Token);
+
+            using var document = JsonDocument.Parse(await response.Content.ReadAsStringAsync(linkedCts.Token));
+            foreach (var item in document.RootElement.GetProperty("content").EnumerateArray())
+            {
+                if (item.TryGetProperty("type", out var typeProperty)
+                    && typeProperty.GetString() == "tool_use"
+                    && item.TryGetProperty("input", out var inputProperty))
+                {
+                    return new LlmProviderChatResult
+                    {
+                        Content = JsonSerializer.Serialize(inputProperty),
+                        Model = model
+                    };
+                }
+            }
+
+            var contentItems = document.RootElement.GetProperty("content");
+            var content = contentItems[0].GetProperty("text").GetString();
+
+            if (string.IsNullOrWhiteSpace(content))
+            {
+                _logger.LogWarning("Claude returned an empty structured response for model {Model}.", model);
+                throw new LlmChatException("Provider returned an empty response.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway);
+            }
+
+            return new LlmProviderChatResult
+            {
+                Content = content.Trim(),
+                Model = model
+            };
+        }
+    }
+
+    private async Task ThrowForFailureAsync(HttpResponseMessage response, string model, CancellationToken cancellationToken)
     {
         var body = await response.Content.ReadAsStringAsync(cancellationToken);
         var code = GetCode(response.StatusCode);
@@ -101,7 +255,7 @@ private async Task ThrowForFailureAsync(HttpResponseMessage response, Cancellati
             "Claude returned failure status {StatusCode} with error code {ErrorCode} for model {Model}.",
             (int)response.StatusCode,
             code,
-            _model);
+            model);
         throw new LlmChatException(
             GetMessage(response.StatusCode),
             code,
@@ -125,6 +279,7 @@ private static int GetStatusCode(HttpStatusCode statusCode)
         {
             HttpStatusCode.Unauthorized or HttpStatusCode.Forbidden => StatusCodes.Status400BadRequest,
             HttpStatusCode.TooManyRequests => StatusCodes.Status429TooManyRequests,
+            HttpStatusCode.ServiceUnavailable => StatusCodes.Status503ServiceUnavailable,
             _ => StatusCodes.Status502BadGateway
         };
     }
@@ -138,4 +293,18 @@ private static string GetMessage(HttpStatusCode statusCode)
             _ => "The provider returned an unexpected error."
         };
     }
+
+    private static string? TryGetString(JsonElement element, string propertyName)
+    {
+        return element.TryGetProperty(propertyName, out var property)
+            ? property.GetString()
+            : null;
+    }
+
+    private string ResolveModel(string? modelOverride)
+    {
+        return string.IsNullOrWhiteSpace(modelOverride)
+            ? _model
+            : modelOverride.Trim();
+    }
 }
diff --git a/backend/Coliee.API/Services/GeminiProviderClient.cs b/backend/Coliee.API/Services/GeminiProviderClient.cs
index 69103ea..32c1a7f 100644
--- a/backend/Coliee.API/Services/GeminiProviderClient.cs
+++ b/backend/Coliee.API/Services/GeminiProviderClient.cs
@@ -1,6 +1,7 @@
 using System.Net;
 using System.Net.Http.Json;
 using System.Text.Json;
+using System.Text.RegularExpressions;
 
 namespace Coliee.API.Services;
 
@@ -26,18 +27,99 @@ public Task TestApiKeyAsync(string apiKey, CancellationToken cancellationToken =
         return SendChatAsync(
             apiKey,
             [new LlmProviderChatMessage { Role = "user", Content = "Reply with OK." }],
-            cancellationToken);
+            cancellationToken: cancellationToken);
+    }
+
+    public async Task<IReadOnlyList<LlmProviderModel>> GetModelsAsync(string apiKey, CancellationToken cancellationToken = default)
+    {
+        using var linkedCts = CancellationTokenSource.CreateLinkedTokenSource(cancellationToken);
+        linkedCts.CancelAfter(TimeSpan.FromSeconds(30));
+
+        var models = new List<LlmProviderModel>();
+        string? pageToken = null;
+
+        do
+        {
+            var url = $"{_baseUrl}/models?pageSize=1000&key={Uri.EscapeDataString(apiKey)}";
+            if (!string.IsNullOrWhiteSpace(pageToken))
+                url += $"&pageToken={Uri.EscapeDataString(pageToken)}";
+
+            using var request = new HttpRequestMessage(HttpMethod.Get, url);
+
+            HttpResponseMessage response;
+
+            try
+            {
+                response = await _httpClient.SendAsync(request, linkedCts.Token);
+            }
+            catch (OperationCanceledException ex) when (!cancellationToken.IsCancellationRequested)
+            {
+                _logger.LogWarning(ex, "Gemini model list request timed out.");
+                throw new LlmChatException("Provider request timed out.", LlmProviderErrorCodes.Timeout, StatusCodes.Status504GatewayTimeout, ex);
+            }
+            catch (HttpRequestException ex)
+            {
+                _logger.LogWarning(ex, "Gemini model list request failed.");
+                throw new LlmChatException("Provider request failed.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway, ex);
+            }
+
+            using (response)
+            {
+                if (!response.IsSuccessStatusCode)
+                    await ThrowForFailureAsync(response, linkedCts.Token);
+
+                using var document = JsonDocument.Parse(await response.Content.ReadAsStringAsync(linkedCts.Token));
+                if (document.RootElement.TryGetProperty("models", out var modelsElement) && modelsElement.ValueKind == JsonValueKind.Array)
+                {
+                    foreach (var modelElement in modelsElement.EnumerateArray())
+                    {
+                        if (!SupportsGenerateContent(modelElement))
+                            continue;
+
+                        var id = GetModelId(modelElement);
+                        if (string.IsNullOrWhiteSpace(id))
+                            continue;
+
+                        models.Add(new LlmProviderModel
+                        {
+                            Id = id,
+                            DisplayName = TryGetString(modelElement, "displayName") ?? id
+                        });
+                    }
+                }
+
+                pageToken = TryGetString(document.RootElement, "nextPageToken");
+            }
+        }
+        while (!string.IsNullOrWhiteSpace(pageToken));
+
+        return models
+            .DistinctBy(item => item.Id, StringComparer.OrdinalIgnoreCase)
+            .OrderBy(item => item.DisplayName ?? item.Id, StringComparer.OrdinalIgnoreCase)
+            .ToList();
     }
 
     public async Task<LlmProviderChatResult> SendChatAsync(
         string apiKey,
         IReadOnlyList<LlmProviderChatMessage> messages,
+        string? modelOverride = null,
+        string? systemPrompt = null,
         CancellationToken cancellationToken = default)
     {
-        var url = $"{_baseUrl}/models/{_model}:generateContent?key={Uri.EscapeDataString(apiKey)}";
+        var model = ResolveModel(modelOverride);
+        var url = $"{_baseUrl}/models/{model}:generateContent?key={Uri.EscapeDataString(apiKey)}";
         using var request = new HttpRequestMessage(HttpMethod.Post, url);
         request.Content = JsonContent.Create(new
         {
+            systemInstruction = string.IsNullOrWhiteSpace(systemPrompt)
+                ? null
+                : new
+                {
+                    parts = new[]
+                    {
+                        new { text = systemPrompt }
+                    }
+                },
             contents = messages.Select(message => new
             {
                 role = message.Role == "assistant" ? "model" : "user",
@@ -59,12 +141,12 @@ public async Task<LlmProviderChatResult> SendChatAsync(
         }
         catch (OperationCanceledException ex) when (!cancellationToken.IsCancellationRequested)
         {
-            _logger.LogWarning(ex, "Gemini request timed out for model {Model}.", _model);
+            _logger.LogWarning(ex, "Gemini request timed out for model {Model}.", model);
             throw new LlmChatException("Provider request timed out.", LlmProviderErrorCodes.Timeout, StatusCodes.Status504GatewayTimeout, ex);
         }
         catch (HttpRequestException ex)
         {
-            _logger.LogWarning(ex, "Gemini request failed for model {Model}.", _model);
+            _logger.LogWarning(ex, "Gemini request failed for model {Model}.", model);
             throw new LlmChatException("Provider request failed.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway, ex);
         }
 
@@ -83,14 +165,96 @@ public async Task<LlmProviderChatResult> SendChatAsync(
 
             if (string.IsNullOrWhiteSpace(content))
             {
-                _logger.LogWarning("Gemini returned an empty response for model {Model}.", _model);
+                _logger.LogWarning("Gemini returned an empty response for model {Model}.", model);
                 throw new LlmChatException("Provider returned an empty response.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway);
             }
 
             return new LlmProviderChatResult
             {
                 Content = content.Trim(),
-                Model = _model
+                Model = model
+            };
+        }
+    }
+
+    public async Task<LlmProviderChatResult> SendStructuredJsonAsync(
+        string apiKey,
+        LlmProviderStructuredRequest structuredRequest,
+        string? modelOverride = null,
+        CancellationToken cancellationToken = default)
+    {
+        using var schemaDocument = JsonDocument.Parse(structuredRequest.SchemaJson);
+        var model = ResolveModel(modelOverride);
+        var url = $"{_baseUrl}/models/{model}:generateContent?key={Uri.EscapeDataString(apiKey)}";
+        using var request = new HttpRequestMessage(HttpMethod.Post, url);
+        request.Content = JsonContent.Create(new
+        {
+            systemInstruction = new
+            {
+                parts = new[]
+                {
+                    new { text = structuredRequest.Instructions }
+                }
+            },
+            contents = structuredRequest.Messages.Select(message => new
+            {
+                role = message.Role == "assistant" ? "model" : "user",
+                parts = new[]
+                {
+                    new { text = message.Content }
+                }
+            }),
+            generationConfig = new
+            {
+                responseMimeType = "application/json",
+                responseJsonSchema = schemaDocument.RootElement.Clone(),
+                maxOutputTokens = structuredRequest.MaxOutputTokens
+            }
+        });
+
+        using var linkedCts = CancellationTokenSource.CreateLinkedTokenSource(cancellationToken);
+        linkedCts.CancelAfter(TimeSpan.FromSeconds(30));
+
+        HttpResponseMessage response;
+
+        try
+        {
+            response = await _httpClient.SendAsync(request, linkedCts.Token);
+        }
+        catch (OperationCanceledException ex) when (!cancellationToken.IsCancellationRequested)
+        {
+            _logger.LogWarning(ex, "Gemini request timed out for model {Model}.", model);
+            throw new LlmChatException("Provider request timed out.", LlmProviderErrorCodes.Timeout, StatusCodes.Status504GatewayTimeout, ex);
+        }
+        catch (HttpRequestException ex)
+        {
+            _logger.LogWarning(ex, "Gemini request failed for model {Model}.", model);
+            throw new LlmChatException("Provider request failed.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway, ex);
+        }
+
+        using (response)
+        {
+            if (!response.IsSuccessStatusCode)
+                await ThrowForFailureAsync(response, linkedCts.Token);
+
+            using var document = JsonDocument.Parse(await response.Content.ReadAsStringAsync(linkedCts.Token));
+            var content = document.RootElement
+                .GetProperty("candidates")[0]
+                .GetProperty("content")
+                .GetProperty("parts")[0]
+                .GetProperty("text")
+                .GetString();
+
+            if (string.IsNullOrWhiteSpace(content))
+            {
+                _logger.LogWarning("Gemini returned an empty structured response for model {Model}.", model);
+                throw new LlmChatException("Provider returned an empty response.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway);
+            }
+
+            return new LlmProviderChatResult
+            {
+                Content = content.Trim(),
+                Model = model
             };
         }
     }
@@ -98,24 +262,27 @@ public async Task<LlmProviderChatResult> SendChatAsync(
     private async Task ThrowForFailureAsync(HttpResponseMessage response, CancellationToken cancellationToken)
     {
         var body = await response.Content.ReadAsStringAsync(cancellationToken);
-        var code = GetCode(response.StatusCode);
+        var details = ParseFailureDetails(body);
+        var code = GetCode(response.StatusCode, details);
         _logger.LogWarning(
-            "Gemini returned failure status {StatusCode} with error code {ErrorCode} for model {Model}.",
+            "Gemini returned failure status {StatusCode} with error code {ErrorCode} for model {Model}. Body: {Body}",
             (int)response.StatusCode,
             code,
-            _model);
+            _model,
+            body);
         throw new LlmChatException(
-            GetMessage(response.StatusCode),
+            GetMessage(response.StatusCode, code, details),
             code,
             GetStatusCode(response.StatusCode),
             new InvalidOperationException(body));
     }
 
-    private static string GetCode(HttpStatusCode statusCode)
+    private static string GetCode(HttpStatusCode statusCode, GeminiFailureDetails details)
     {
         return statusCode switch
         {
-            HttpStatusCode.BadRequest or HttpStatusCode.Unauthorized or HttpStatusCode.Forbidden => LlmProviderErrorCodes.InvalidKey,
+            HttpStatusCode.Unauthorized or HttpStatusCode.Forbidden => LlmProviderErrorCodes.InvalidKey,
+            HttpStatusCode.BadRequest when LooksLikeInvalidKey(details.Message) => LlmProviderErrorCodes.InvalidKey,
             HttpStatusCode.TooManyRequests => LlmProviderErrorCodes.RateLimited,
             _ => LlmProviderErrorCodes.ProviderError
         };
@@ -127,17 +294,105 @@ private static int GetStatusCode(HttpStatusCode statusCode)
         {
             HttpStatusCode.BadRequest or HttpStatusCode.Unauthorized or HttpStatusCode.Forbidden => StatusCodes.Status400BadRequest,
             HttpStatusCode.TooManyRequests => StatusCodes.Status429TooManyRequests,
+            HttpStatusCode.ServiceUnavailable => StatusCodes.Status503ServiceUnavailable,
             _ => StatusCodes.Status502BadGateway
         };
     }
 
-    private static string GetMessage(HttpStatusCode statusCode)
+    private static string GetMessage(HttpStatusCode statusCode, string code, GeminiFailureDetails details)
     {
+        if (code == LlmProviderErrorCodes.InvalidKey)
+            return "The saved API key is invalid.";
+
+        if (code == LlmProviderErrorCodes.RateLimited)
+            return "The provider is rate limiting requests right now.";
+
+        if (!string.IsNullOrWhiteSpace(details.Message))
+            return details.Message;
+
         return statusCode switch
         {
-            HttpStatusCode.BadRequest or HttpStatusCode.Unauthorized or HttpStatusCode.Forbidden => "The saved API key is invalid.",
-            HttpStatusCode.TooManyRequests => "The provider is rate limiting requests right now.",
             _ => "The provider returned an unexpected error."
         };
     }
+
+    private static GeminiFailureDetails ParseFailureDetails(string body)
+    {
+        if (string.IsNullOrWhiteSpace(body))
+            return new GeminiFailureDetails();
+
+        try
+        {
+            using var document = JsonDocument.Parse(body);
+            if (!document.RootElement.TryGetProperty("error", out var errorElement))
+                return new GeminiFailureDetails();
+
+            return new GeminiFailureDetails
+            {
+                Status = errorElement.TryGetProperty("status", out var statusElement) ? statusElement.GetString() : null,
+                Message = errorElement.TryGetProperty("message", out var messageElement) ? messageElement.GetString() : null
+            };
+        }
+        catch (JsonException)
+        {
+            return new GeminiFailureDetails();
+        }
+    }
+
+    private static bool LooksLikeInvalidKey(string? message)
+    {
+        if (string.IsNullOrWhiteSpace(message))
+            return false;
+
+        return Regex.IsMatch(
+            message,
+            "(api key|credential).*(invalid|not valid|missing)|invalid.*(api key|credential)",
+            RegexOptions.IgnoreCase | RegexOptions.CultureInvariant);
+    }
+
+    private static bool SupportsGenerateContent(JsonElement modelElement)
+    {
+        if (!modelElement.TryGetProperty("supportedGenerationMethods", out var methodsElement) || methodsElement.ValueKind != JsonValueKind.Array)
+            return false;
+
+        return methodsElement
+            .EnumerateArray()
+            .Any(item => string.Equals(item.GetString(), "generateContent", StringComparison.Ordinal));
+    }
+
+    private static string? GetModelId(JsonElement modelElement)
+    {
+        var baseModelId = TryGetString(modelElement, "baseModelId");
+        if (!string.IsNullOrWhiteSpace(baseModelId))
+            return baseModelId;
+
+        var name = TryGetString(modelElement, "name");
+        if (string.IsNullOrWhiteSpace(name))
+            return null;
+
+        const string prefix = "models/";
+        return name.StartsWith(prefix, StringComparison.OrdinalIgnoreCase)
+            ? name[prefix.Length..]
+            : name;
+    }
+
+    private static string? TryGetString(JsonElement element, string propertyName)
+    {
+        return element.TryGetProperty(propertyName, out var property)
+            ? property.GetString()
+            : null;
+    }
+
+    private string ResolveModel(string? modelOverride)
+    {
+        return string.IsNullOrWhiteSpace(modelOverride)
+            ? _model
+            : modelOverride.Trim();
+    }
+
+    private sealed class GeminiFailureDetails
+    {
+        public string? Status { get; init; }
+        public string? Message { get; init; }
+    }
 }
diff --git a/backend/Coliee.API/Services/ICanvasCreationService.cs b/backend/Coliee.API/Services/ICanvasCreationService.cs
new file mode 100644
index 0000000..92bb835
--- /dev/null
+++ b/backend/Coliee.API/Services/ICanvasCreationService.cs
@@ -0,0 +1,8 @@
+using Coliee.API.DTOs;
+
+namespace Coliee.API.Services;
+
+public interface ICanvasCreationService
+{
+    Task<CanvasSummaryResponse> CreateCanvasAsync(int userId, string firstPrompt, string? generationMode = null);
+}
diff --git a/backend/Coliee.API/Services/ICanvasGraphService.cs b/backend/Coliee.API/Services/ICanvasGraphService.cs
index 2e58547..bf7f66a 100644
--- a/backend/Coliee.API/Services/ICanvasGraphService.cs
+++ b/backend/Coliee.API/Services/ICanvasGraphService.cs
@@ -5,5 +5,5 @@ namespace Coliee.API.Services;
 public interface ICanvasGraphService
 {
     Task<CanvasGraphResponse> GetCanvasGraphAsync(int userId, int canvasId);
-    Task<CanvasGraphResponse> ExpandCanvasNodeAsync(int userId, int canvasId, int nodeId, string prompt, string? providerOverride);
+    Task<CanvasGraphResponse> ExpandCanvasNodeAsync(int userId, int canvasId, int nodeId, string prompt, string? providerOverride, string? generationMode = null);
 }
diff --git a/backend/Coliee.API/Services/ICanvasProviderResolver.cs b/backend/Coliee.API/Services/ICanvasProviderResolver.cs
new file mode 100644
index 0000000..8d743f6
--- /dev/null
+++ b/backend/Coliee.API/Services/ICanvasProviderResolver.cs
@@ -0,0 +1,6 @@
+namespace Coliee.API.Services;
+
+public interface ICanvasProviderResolver
+{
+    Task<CanvasProviderResolution> ResolveAsync(int userId, string? providerOverride);
+}
diff --git a/backend/Coliee.API/Services/ICanvasService.cs b/backend/Coliee.API/Services/ICanvasService.cs
index 8d0ff9d..8aee3d1 100644
--- a/backend/Coliee.API/Services/ICanvasService.cs
+++ b/backend/Coliee.API/Services/ICanvasService.cs
@@ -4,7 +4,6 @@ namespace Coliee.API.Services;
 
 public interface ICanvasService
 {
-    Task<CanvasSummaryResponse> CreateCanvasAsync(int userId, string firstPrompt);
     Task<IReadOnlyList<CanvasSummaryResponse>> GetCanvasesAsync(int userId);
     Task<CanvasSummaryResponse> RenameCanvasAsync(int userId, int canvasId, string title);
     Task DeleteCanvasAsync(int userId, int canvasId);
diff --git a/backend/Coliee.API/Services/IChatNodeContextCompactionService.cs b/backend/Coliee.API/Services/IChatNodeContextCompactionService.cs
new file mode 100644
index 0000000..0f54922
--- /dev/null
+++ b/backend/Coliee.API/Services/IChatNodeContextCompactionService.cs
@@ -0,0 +1,20 @@
+using Coliee.API.Models;
+
+namespace Coliee.API.Services;
+
+public interface IChatNodeContextCompactionService
+{
+    Task<ChatNodePromptContextResult> BuildPromptContextAsync(
+        int userId,
+        int sessionId,
+        ChatNode node,
+        IReadOnlyList<ChatMessage> history,
+        CanvasConversationMessage nextMessage,
+        ILlmProviderClient providerClient,
+        string apiKey,
+        string? modelOverride,
+        bool includeFormattingInstruction,
+        bool compactAllHistory = false,
+        ChatNodeContextSnapshot? initialSnapshot = null,
+        CancellationToken cancellationToken = default);
+}
diff --git a/backend/Coliee.API/Services/IChatSessionService.cs b/backend/Coliee.API/Services/IChatSessionService.cs
new file mode 100644
index 0000000..e768fc4
--- /dev/null
+++ b/backend/Coliee.API/Services/IChatSessionService.cs
@@ -0,0 +1,25 @@
+using Coliee.API.DTOs;
+
+namespace Coliee.API.Services;
+
+public interface IChatSessionService
+{
+    Task<IReadOnlyList<ChatSessionSummaryResponse>> GetSessionsAsync(int userId);
+    Task<ChatSessionStateResponse> CreateSessionAsync(int userId, string? title, string? content, string? providerOverride, string? modelOverride = null);
+    Task<GuestChatPreviewResponse> PreviewGuestAsync(GuestChatPreviewRequest request);
+    Task<ChatSessionStateResponse> ImportGuestCanvasesAsync(int userId, ImportGuestCanvasesRequest request);
+    Task<ChatSessionSummaryResponse> RenameSessionAsync(int userId, int sessionId, string title);
+    Task DeleteSessionAsync(int userId, int sessionId);
+    Task<ChatSessionGraphResponse> GetSessionAsync(int userId, int sessionId, int? activeNodeId = null);
+    Task<ChatCanvasNodeDetailResponse> GetNodeAsync(int userId, int sessionId, int nodeId);
+    Task<ChatSessionStateResponse> CreateNodeAsync(int userId, int sessionId, DTOs.CreateChatNodeRequest request);
+    Task<ChatSessionStateResponse> UpdateNodeAsync(int userId, int sessionId, int nodeId, DTOs.UpdateChatNodeRequest request);
+    Task<ChatSessionStateResponse> SendNodeMessageAsync(int userId, int sessionId, int nodeId, string content, string? imageUrl, string? providerOverride, string? modelOverride = null);
+    Task<ChatSessionStateResponse> CreateBranchAsync(int userId, int sessionId, int nodeId, int branchFromMessageId, string content, string? providerOverride, string? modelOverride = null);
+    Task<ChatSessionStateResponse> MoveMessagesToBranchAsync(int userId, int sessionId, int nodeId, IReadOnlyList<int> messageIds, string? transferMode = null);
+    Task<ChatSessionStateResponse> UpdateMessageAsync(int userId, int sessionId, int nodeId, int messageId, DTOs.UpdateChatCanvasMessageRequest request);
+    Task<ChatSessionStateResponse> GenerateNoteAsync(int userId, int sessionId, int nodeId, string? providerOverride, string? modelOverride = null);
+    Task<ChatSessionStateResponse> GenerateImageAsync(int userId, int sessionId, int nodeId, string prompt, string? providerOverride, string? modelOverride = null);
+    Task<ChatSessionGraphResponse> DeleteNodeAsync(int userId, int sessionId, int nodeId, int? newActiveNodeId = null);
+    Task<ChatSessionGraphResponse> SaveLayoutAsync(int userId, int sessionId, IReadOnlyList<Models.ChatNodeLayoutUpdateInput> nodes, int? activeNodeId = null);
+}
diff --git a/backend/Coliee.API/Services/ILlmProviderClient.cs b/backend/Coliee.API/Services/ILlmProviderClient.cs
index ce4ea93..5a194c9 100644
--- a/backend/Coliee.API/Services/ILlmProviderClient.cs
+++ b/backend/Coliee.API/Services/ILlmProviderClient.cs
@@ -3,9 +3,17 @@ namespace Coliee.API.Services;
 public interface ILlmProviderClient
 {
     string Provider { get; }
+    Task<IReadOnlyList<LlmProviderModel>> GetModelsAsync(string apiKey, CancellationToken cancellationToken = default);
     Task<LlmProviderChatResult> SendChatAsync(
         string apiKey,
         IReadOnlyList<LlmProviderChatMessage> messages,
+        string? modelOverride = null,
+        string? systemPrompt = null,
+        CancellationToken cancellationToken = default);
+    Task<LlmProviderChatResult> SendStructuredJsonAsync(
+        string apiKey,
+        LlmProviderStructuredRequest request,
+        string? modelOverride = null,
         CancellationToken cancellationToken = default);
 
     Task TestApiKeyAsync(string apiKey, CancellationToken cancellationToken = default);
diff --git a/backend/Coliee.API/Services/ILlmService.cs b/backend/Coliee.API/Services/ILlmService.cs
index c6e2985..6c1d494 100644
--- a/backend/Coliee.API/Services/ILlmService.cs
+++ b/backend/Coliee.API/Services/ILlmService.cs
@@ -5,10 +5,12 @@ namespace Coliee.API.Services;
 public interface ILlmService
 {
     Task<ProviderListResponse> GetProvidersAsync(int userId);
+    Task<ProviderModelsResponse> GetProviderModelsAsync(int userId, string provider);
     Task<ProviderListResponse> UpsertProviderKeyAsync(int userId, string provider, string apiKey);
     Task<ProviderListResponse> DeleteProviderKeyAsync(int userId, string provider);
     Task<ProviderListResponse> SetDefaultProviderAsync(int userId, string provider);
     Task<ProviderListResponse> TestProviderAsync(int userId, string provider);
+    Task<StandaloneChatResponse> SendStandaloneChatMessageAsync(int userId, IReadOnlyList<StandaloneChatMessageRequest> history, string content, string? providerOverride);
     Task<MainNodeChatResponse> GetMainNodeChatAsync(int userId, int canvasId);
     Task<MainNodeChatResponse> SendMainNodeMessageAsync(int userId, int canvasId, string content, string? providerOverride);
 }
diff --git a/backend/Coliee.API/Services/LlmProviderErrorCodes.cs b/backend/Coliee.API/Services/LlmProviderErrorCodes.cs
index 97376fb..4ac09b0 100644
--- a/backend/Coliee.API/Services/LlmProviderErrorCodes.cs
+++ b/backend/Coliee.API/Services/LlmProviderErrorCodes.cs
@@ -6,5 +6,6 @@ public static class LlmProviderErrorCodes
     public const string InvalidKey = "invalid_key";
     public const string RateLimited = "rate_limited";
     public const string Timeout = "timeout";
+    public const string UnsupportedCapability = "unsupported_capability";
     public const string ProviderError = "provider_error";
 }
diff --git a/backend/Coliee.API/Services/LlmProviderModel.cs b/backend/Coliee.API/Services/LlmProviderModel.cs
new file mode 100644
index 0000000..dd22306
--- /dev/null
+++ b/backend/Coliee.API/Services/LlmProviderModel.cs
@@ -0,0 +1,7 @@
+namespace Coliee.API.Services;
+
+public sealed class LlmProviderModel
+{
+    public string Id { get; init; } = string.Empty;
+    public string? DisplayName { get; init; }
+}
diff --git a/backend/Coliee.API/Services/LlmProviderNames.cs b/backend/Coliee.API/Services/LlmProviderNames.cs
index 49fb5dc..5c1d82f 100644
--- a/backend/Coliee.API/Services/LlmProviderNames.cs
+++ b/backend/Coliee.API/Services/LlmProviderNames.cs
@@ -5,8 +5,9 @@ public static class LlmProviderNames
     public const string OpenAi = "openai";
     public const string Claude = "claude";
     public const string Gemini = "gemini";
+    public const string LmStudio = "lmstudio";
 
-    public static readonly IReadOnlyList<string> Ordered = [OpenAi, Claude, Gemini];
+    public static readonly IReadOnlyList<string> Ordered = [OpenAi, Claude, Gemini, LmStudio];
 
     public static string Normalize(string provider) => provider.Trim().ToLowerInvariant();
 
diff --git a/backend/Coliee.API/Services/LlmProviderStructuredRequest.cs b/backend/Coliee.API/Services/LlmProviderStructuredRequest.cs
new file mode 100644
index 0000000..79131d7
--- /dev/null
+++ b/backend/Coliee.API/Services/LlmProviderStructuredRequest.cs
@@ -0,0 +1,10 @@
+namespace Coliee.API.Services;
+
+public class LlmProviderStructuredRequest
+{
+    public string Instructions { get; set; } = string.Empty;
+    public string SchemaName { get; set; } = string.Empty;
+    public string SchemaJson { get; set; } = string.Empty;
+    public IReadOnlyList<LlmProviderChatMessage> Messages { get; set; } = [];
+    public int MaxOutputTokens { get; set; } = 2048;
+}
diff --git a/backend/Coliee.API/Services/LlmService.cs b/backend/Coliee.API/Services/LlmService.cs
index 9e50d97..4cac119 100644
--- a/backend/Coliee.API/Services/LlmService.cs
+++ b/backend/Coliee.API/Services/LlmService.cs
@@ -31,6 +31,33 @@ public LlmService(
 
     public Task<ProviderListResponse> GetProvidersAsync(int userId) => BuildProviderListResponseAsync(userId);
 
+    public async Task<ProviderModelsResponse> GetProviderModelsAsync(int userId, string provider)
+    {
+        var normalizedProvider = NormalizeProvider(provider);
+        var providerRecord = await _llmRepository.GetProviderKeyAsync(userId, normalizedProvider);
+        if (providerRecord == null)
+        {
+            _logger.LogWarning("Rejected provider model lookup for user {UserId}; provider {Provider} is not configured.", userId, normalizedProvider);
+            throw new LlmChatException("Configure that provider before loading models.", LlmProviderErrorCodes.MissingKey, StatusCodes.Status400BadRequest);
+        }
+
+        var client = GetProviderClient(normalizedProvider);
+        var decryptedApiKey = _encryptionService.Decrypt(providerRecord.EncryptedApiKey);
+        var models = await client.GetModelsAsync(decryptedApiKey);
+
+        _logger.LogInformation("Loaded {ModelCount} models for user {UserId} and provider {Provider}.", models.Count, userId, normalizedProvider);
+
+        return new ProviderModelsResponse
+        {
+            Provider = normalizedProvider,
+            Models = models.Select(item => new ProviderModelResponse
+            {
+                Id = item.Id,
+                DisplayName = item.DisplayName
+            }).ToList()
+        };
+    }
+
     public async Task<ProviderListResponse> UpsertProviderKeyAsync(int userId, string provider, string apiKey)
     {
         var normalizedProvider = NormalizeProvider(provider);
@@ -112,6 +139,46 @@ public async Task<ProviderListResponse> TestProviderAsync(int userId, string pro
         return await BuildProviderListResponseAsync(userId);
     }
 
+    public async Task<StandaloneChatResponse> SendStandaloneChatMessageAsync(int userId, IReadOnlyList<StandaloneChatMessageRequest> history, string content, string? providerOverride)
+    {
+        var trimmedContent = NormalizeStandaloneMessageContent(content, "Message content is required.");
+        var providers = await _llmRepository.GetProviderKeysAsync(userId);
+        var selectedProvider = ResolveProvider(providers, providerOverride);
+        var providerRecord = providers.First(item => item.Provider == selectedProvider);
+        var decryptedApiKey = _encryptionService.Decrypt(providerRecord.EncryptedApiKey);
+        var providerClient = GetProviderClient(selectedProvider);
+
+        var providerMessages = history
+            .Select(item => new LlmProviderChatMessage
+            {
+                Role = NormalizeStandaloneMessageRole(item.Role),
+                Content = NormalizeStandaloneMessageContent(item.Content, "Message history cannot contain empty items.")
+            })
+            .Append(new LlmProviderChatMessage
+            {
+                Role = "user",
+                Content = trimmedContent
+            })
+            .ToList();
+
+        var providerReply = await providerClient.SendChatAsync(decryptedApiKey, providerMessages);
+        var availableProviders = providers.Select(item => item.Provider).ToList();
+
+        return new StandaloneChatResponse
+        {
+            DefaultProvider = providers.FirstOrDefault(item => item.IsDefault)?.Provider,
+            AvailableProviders = availableProviders,
+            Message = new StandaloneChatMessageResponse
+            {
+                Role = "assistant",
+                Content = providerReply.Content,
+                Provider = selectedProvider,
+                Model = providerReply.Model,
+                CreatedAt = _timeProvider.GetUtcNow().UtcDateTime
+            }
+        };
+    }
+
     public async Task<MainNodeChatResponse> GetMainNodeChatAsync(int userId, int canvasId)
     {
         await EnsureCanvasExistsAsync(userId, canvasId);
@@ -242,6 +309,24 @@ private ILlmProviderClient GetProviderClient(string provider)
         throw new InvalidOperationException($"No provider client is registered for '{provider}'.");
     }
 
+    private static string NormalizeStandaloneMessageRole(string role)
+    {
+        var normalizedRole = role.Trim().ToLowerInvariant();
+        if (normalizedRole is "user" or "assistant")
+            return normalizedRole;
+
+        throw new LlmChatException("Only user and assistant messages are supported.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status400BadRequest);
+    }
+
+    private static string NormalizeStandaloneMessageContent(string content, string errorMessage)
+    {
+        var trimmedContent = content.Trim();
+        if (string.IsNullOrWhiteSpace(trimmedContent))
+            throw new LlmChatException(errorMessage, LlmProviderErrorCodes.ProviderError, StatusCodes.Status400BadRequest);
+
+        return trimmedContent;
+    }
+
     private string ResolveProvider(IReadOnlyList<LlmProviderKeyRecord> providers, string? providerOverride)
     {
         if (providers.Count == 0)
diff --git a/backend/Coliee.API/Services/LmStudioProviderClient.cs b/backend/Coliee.API/Services/LmStudioProviderClient.cs
new file mode 100644
index 0000000..7c800e5
--- /dev/null
+++ b/backend/Coliee.API/Services/LmStudioProviderClient.cs
@@ -0,0 +1,274 @@
+using System.Net;
+using System.Net.Http.Headers;
+using System.Net.Http.Json;
+using System.Text.Json;
+
+namespace Coliee.API.Services;
+
+public class LmStudioProviderClient : ILlmProviderClient
+{
+    private readonly HttpClient _httpClient;
+    private readonly string _baseUrl;
+    private readonly string _model;
+    private readonly ILogger<LmStudioProviderClient> _logger;
+
+    public LmStudioProviderClient(HttpClient httpClient, IConfiguration configuration, ILogger<LmStudioProviderClient> logger)
+    {
+        _httpClient = httpClient;
+        _baseUrl = (configuration["Llm:Providers:LmStudio:BaseUrl"] ?? "http://localhost:1234/v1").TrimEnd('/');
+        _model = configuration["Llm:Providers:LmStudio:Model"] ?? "local-model";
+        _logger = logger;
+    }
+
+    public string Provider => LlmProviderNames.LmStudio;
+
+    public Task TestApiKeyAsync(string apiKey, CancellationToken cancellationToken = default)
+    {
+        return SendChatAsync(
+            apiKey,
+            [new LlmProviderChatMessage { Role = "user", Content = "Reply with OK." }],
+            cancellationToken: cancellationToken);
+    }
+
+    public async Task<IReadOnlyList<LlmProviderModel>> GetModelsAsync(string apiKey, CancellationToken cancellationToken = default)
+    {
+        using var request = new HttpRequestMessage(HttpMethod.Get, $"{_baseUrl}/models");
+        request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", apiKey);
+
+        using var linkedCts = CancellationTokenSource.CreateLinkedTokenSource(cancellationToken);
+        linkedCts.CancelAfter(TimeSpan.FromSeconds(30));
+
+        HttpResponseMessage response;
+
+        try
+        {
+            response = await _httpClient.SendAsync(request, linkedCts.Token);
+        }
+        catch (OperationCanceledException ex) when (!cancellationToken.IsCancellationRequested)
+        {
+            _logger.LogWarning(ex, "LM Studio model list request timed out.");
+            throw new LlmChatException("Provider request timed out.", LlmProviderErrorCodes.Timeout, StatusCodes.Status504GatewayTimeout, ex);
+        }
+        catch (HttpRequestException ex)
+        {
+            _logger.LogWarning(ex, "LM Studio model list request failed.");
+            throw new LlmChatException("Provider request failed.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway, ex);
+        }
+
+        using (response)
+        {
+            if (!response.IsSuccessStatusCode)
+                await ThrowForFailureAsync(response, _model, linkedCts.Token);
+
+            using var document = JsonDocument.Parse(await response.Content.ReadAsStringAsync(linkedCts.Token));
+            if (!document.RootElement.TryGetProperty("data", out var dataElement) || dataElement.ValueKind != JsonValueKind.Array)
+                return [];
+
+            return dataElement
+                .EnumerateArray()
+                .Select(item => TryGetString(item, "id"))
+                .Where(item => !string.IsNullOrWhiteSpace(item))
+                .Select(item => new LlmProviderModel
+                {
+                    Id = item!,
+                    DisplayName = item
+                })
+                .OrderBy(item => item.DisplayName ?? item.Id, StringComparer.OrdinalIgnoreCase)
+                .ToList();
+        }
+    }
+
+    public async Task<LlmProviderChatResult> SendChatAsync(
+        string apiKey,
+        IReadOnlyList<LlmProviderChatMessage> messages,
+        string? modelOverride = null,
+        string? systemPrompt = null,
+        CancellationToken cancellationToken = default)
+    {
+        var model = ResolveModel(modelOverride);
+        using var request = new HttpRequestMessage(HttpMethod.Post, $"{_baseUrl}/chat/completions");
+        request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", apiKey);
+        request.Content = JsonContent.Create(new
+        {
+            model,
+            messages = BuildChatMessages(messages, systemPrompt)
+        });
+
+        return await SendRequestAsync(request, model, cancellationToken);
+    }
+
+    public async Task<LlmProviderChatResult> SendStructuredJsonAsync(
+        string apiKey,
+        LlmProviderStructuredRequest structuredRequest,
+        string? modelOverride = null,
+        CancellationToken cancellationToken = default)
+    {
+        var model = ResolveModel(modelOverride);
+        using var schemaDocument = JsonDocument.Parse(structuredRequest.SchemaJson);
+        using var request = new HttpRequestMessage(HttpMethod.Post, $"{_baseUrl}/chat/completions");
+        request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", apiKey);
+        request.Content = JsonContent.Create(new
+        {
+            model,
+            max_tokens = structuredRequest.MaxOutputTokens,
+            messages = BuildStructuredMessages(structuredRequest),
+            response_format = new
+            {
+                type = "json_schema",
+                json_schema = new
+                {
+                    name = structuredRequest.SchemaName,
+                    strict = true,
+                    schema = schemaDocument.RootElement.Clone()
+                }
+            }
+        });
+
+        return await SendRequestAsync(request, model, cancellationToken);
+    }
+
+    private IEnumerable<object> BuildChatMessages(IReadOnlyList<LlmProviderChatMessage> messages, string? systemPrompt)
+    {
+        if (!string.IsNullOrWhiteSpace(systemPrompt))
+        {
+            yield return new
+            {
+                role = "system",
+                content = systemPrompt
+            };
+        }
+
+        foreach (var message in messages)
+        {
+            yield return new
+            {
+                role = message.Role,
+                content = message.Content
+            };
+        }
+    }
+
+    private IEnumerable<object> BuildStructuredMessages(LlmProviderStructuredRequest structuredRequest)
+    {
+        yield return new
+        {
+            role = "system",
+            content = structuredRequest.Instructions
+        };
+
+        foreach (var message in structuredRequest.Messages)
+        {
+            yield return new
+            {
+                role = message.Role,
+                content = message.Content
+            };
+        }
+    }
+
+    private async Task<LlmProviderChatResult> SendRequestAsync(HttpRequestMessage request, string model, CancellationToken cancellationToken)
+    {
+        using var linkedCts = CancellationTokenSource.CreateLinkedTokenSource(cancellationToken);
+        linkedCts.CancelAfter(TimeSpan.FromSeconds(30));
+
+        HttpResponseMessage response;
+
+        try
+        {
+            response = await _httpClient.SendAsync(request, linkedCts.Token);
+        }
+        catch (OperationCanceledException ex) when (!cancellationToken.IsCancellationRequested)
+        {
+            _logger.LogWarning(ex, "LM Studio request timed out for model {Model}.", model);
+            throw new LlmChatException("Provider request timed out.", LlmProviderErrorCodes.Timeout, StatusCodes.Status504GatewayTimeout, ex);
+        }
+        catch (HttpRequestException ex)
+        {
+            _logger.LogWarning(ex, "LM Studio request failed for model {Model}.", model);
+            throw new LlmChatException("Provider request failed.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway, ex);
+        }
+
+        using (response)
+        {
+            if (!response.IsSuccessStatusCode)
+                await ThrowForFailureAsync(response, model, linkedCts.Token);
+
+            using var document = JsonDocument.Parse(await response.Content.ReadAsStringAsync(linkedCts.Token));
+            var content = document.RootElement
+                .GetProperty("choices")[0]
+                .GetProperty("message")
+                .GetProperty("content")
+                .GetString();
+
+            if (string.IsNullOrWhiteSpace(content))
+            {
+                _logger.LogWarning("LM Studio returned an empty response for model {Model}.", model);
+                throw new LlmChatException("Provider returned an empty response.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway);
+            }
+
+            return new LlmProviderChatResult
+            {
+                Content = content.Trim(),
+                Model = model
+            };
+        }
+    }
+
+    private async Task ThrowForFailureAsync(HttpResponseMessage response, string model, CancellationToken cancellationToken)
+    {
+        var body = await response.Content.ReadAsStringAsync(cancellationToken);
+        var code = GetCode(response.StatusCode);
+        _logger.LogWarning(
+            "LM Studio returned failure status {StatusCode} with error code {ErrorCode} for model {Model}.",
+            (int)response.StatusCode,
+            code,
+            model);
+        throw new LlmChatException(
+            GetMessage(response.StatusCode),
+            code,
+            GetStatusCode(response.StatusCode),
+            new InvalidOperationException(body));
+    }
+
+    private static string GetCode(HttpStatusCode statusCode)
+    {
+        return statusCode switch
+        {
+            HttpStatusCode.Unauthorized or HttpStatusCode.Forbidden => LlmProviderErrorCodes.InvalidKey,
+            HttpStatusCode.TooManyRequests => LlmProviderErrorCodes.RateLimited,
+            _ => LlmProviderErrorCodes.ProviderError
+        };
+    }
+
+    private static int GetStatusCode(HttpStatusCode statusCode)
+    {
+        return statusCode switch
+        {
+            HttpStatusCode.Unauthorized or HttpStatusCode.Forbidden => StatusCodes.Status400BadRequest,
+            HttpStatusCode.TooManyRequests => StatusCodes.Status429TooManyRequests,
+            _ => StatusCodes.Status502BadGateway
+        };
+    }
+
+    private static string GetMessage(HttpStatusCode statusCode)
+    {
+        return statusCode switch
+        {
+            HttpStatusCode.Unauthorized or HttpStatusCode.Forbidden => "The saved API key is invalid.",
+            HttpStatusCode.TooManyRequests => "The provider is rate limiting requests right now.",
+            _ => "The provider returned an unexpected error."
+        };
+    }
+
+    private static string? TryGetString(JsonElement element, string propertyName)
+    {
+        return element.TryGetProperty(propertyName, out var property)
+            ? property.GetString()
+            : null;
+    }
+
+    private string ResolveModel(string? modelOverride)
+    {
+        return string.IsNullOrWhiteSpace(modelOverride) ? _model : modelOverride.Trim();
+    }
+}
diff --git a/backend/Coliee.API/Services/OpenAiProviderClient.cs b/backend/Coliee.API/Services/OpenAiProviderClient.cs
index c6addf7..bd7a5b4 100644
--- a/backend/Coliee.API/Services/OpenAiProviderClient.cs
+++ b/backend/Coliee.API/Services/OpenAiProviderClient.cs
@@ -27,26 +27,137 @@ public Task TestApiKeyAsync(string apiKey, CancellationToken cancellationToken =
         return SendChatAsync(
             apiKey,
             [new LlmProviderChatMessage { Role = "user", Content = "Reply with OK." }],
-            cancellationToken);
+            cancellationToken: cancellationToken);
+    }
+
+    public async Task<IReadOnlyList<LlmProviderModel>> GetModelsAsync(string apiKey, CancellationToken cancellationToken = default)
+    {
+        using var request = new HttpRequestMessage(HttpMethod.Get, $"{_baseUrl}/models");
+        request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", apiKey);
+
+        using var linkedCts = CancellationTokenSource.CreateLinkedTokenSource(cancellationToken);
+        linkedCts.CancelAfter(TimeSpan.FromSeconds(30));
+
+        HttpResponseMessage response;
+
+        try
+        {
+            response = await _httpClient.SendAsync(request, linkedCts.Token);
+        }
+        catch (OperationCanceledException ex) when (!cancellationToken.IsCancellationRequested)
+        {
+            _logger.LogWarning(ex, "OpenAI model list request timed out.");
+            throw new LlmChatException("Provider request timed out.", LlmProviderErrorCodes.Timeout, StatusCodes.Status504GatewayTimeout, ex);
+        }
+        catch (HttpRequestException ex)
+        {
+            _logger.LogWarning(ex, "OpenAI model list request failed.");
+            throw new LlmChatException("Provider request failed.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway, ex);
+        }
+
+        using (response)
+        {
+            if (!response.IsSuccessStatusCode)
+                await ThrowForFailureAsync(response, _model, linkedCts.Token);
+
+            using var document = JsonDocument.Parse(await response.Content.ReadAsStringAsync(linkedCts.Token));
+            if (!document.RootElement.TryGetProperty("data", out var dataElement) || dataElement.ValueKind != JsonValueKind.Array)
+                return [];
+
+            return dataElement
+                .EnumerateArray()
+                .Select(item => TryGetString(item, "id"))
+                .Where(item => !string.IsNullOrWhiteSpace(item))
+                .Select(item => new LlmProviderModel
+                {
+                    Id = item!,
+                    DisplayName = item
+                })
+                .OrderBy(item => item.DisplayName ?? item.Id, StringComparer.OrdinalIgnoreCase)
+                .ToList();
+        }
     }
 
     public async Task<LlmProviderChatResult> SendChatAsync(
         string apiKey,
         IReadOnlyList<LlmProviderChatMessage> messages,
+        string? modelOverride = null,
+        string? systemPrompt = null,
         CancellationToken cancellationToken = default)
     {
+        var model = ResolveModel(modelOverride);
         using var request = new HttpRequestMessage(HttpMethod.Post, $"{_baseUrl}/chat/completions");
         request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", apiKey);
-        request.Content = JsonContent.Create(new
-        {
-            model = _model,
-            messages = messages.Select(message => new
+        var chatMessages = messages
+            .Select(message => new
             {
                 role = message.Role,
                 content = message.Content
             })
+            .ToList();
+        if (!string.IsNullOrWhiteSpace(systemPrompt))
+        {
+            chatMessages.Insert(0, new { role = "system", content = systemPrompt });
+        }
+        request.Content = JsonContent.Create(new
+        {
+            model,
+            messages = chatMessages
+        });
+
+        return await SendRequestAsync(request, model, cancellationToken);
+    }
+
+    public async Task<LlmProviderChatResult> SendStructuredJsonAsync(
+        string apiKey,
+        LlmProviderStructuredRequest structuredRequest,
+        string? modelOverride = null,
+        CancellationToken cancellationToken = default)
+    {
+        var model = ResolveModel(modelOverride);
+        using var schemaDocument = JsonDocument.Parse(structuredRequest.SchemaJson);
+        using var request = new HttpRequestMessage(HttpMethod.Post, $"{_baseUrl}/chat/completions");
+        request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", apiKey);
+        request.Content = JsonContent.Create(new
+        {
+            model,
+            max_tokens = structuredRequest.MaxOutputTokens,
+            messages = BuildStructuredMessages(structuredRequest),
+            response_format = new
+            {
+                type = "json_schema",
+                json_schema = new
+                {
+                    name = structuredRequest.SchemaName,
+                    strict = true,
+                    schema = schemaDocument.RootElement.Clone()
+                }
+            }
         });
 
+        return await SendRequestAsync(request, model, cancellationToken);
+    }
+
+    private IEnumerable<object> BuildStructuredMessages(LlmProviderStructuredRequest structuredRequest)
+    {
+        yield return new
+        {
+            role = "system",
+            content = structuredRequest.Instructions
+        };
+
+        foreach (var message in structuredRequest.Messages)
+        {
+            yield return new
+            {
+                role = message.Role,
+                content = message.Content
+            };
+        }
+    }
+
+    private async Task<LlmProviderChatResult> SendRequestAsync(HttpRequestMessage request, string model, CancellationToken cancellationToken)
+    {
         using var linkedCts = CancellationTokenSource.CreateLinkedTokenSource(cancellationToken);
         linkedCts.CancelAfter(TimeSpan.FromSeconds(30));
 
@@ -58,19 +169,19 @@ public async Task<LlmProviderChatResult> SendChatAsync(
         }
         catch (OperationCanceledException ex) when (!cancellationToken.IsCancellationRequested)
         {
-            _logger.LogWarning(ex, "OpenAI request timed out for model {Model}.", _model);
+            _logger.LogWarning(ex, "OpenAI request timed out for model {Model}.", model);
             throw new LlmChatException("Provider request timed out.", LlmProviderErrorCodes.Timeout, StatusCodes.Status504GatewayTimeout, ex);
         }
         catch (HttpRequestException ex)
         {
-            _logger.LogWarning(ex, "OpenAI request failed for model {Model}.", _model);
+            _logger.LogWarning(ex, "OpenAI request failed for model {Model}.", model);
             throw new LlmChatException("Provider request failed.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway, ex);
         }
 
         using (response)
         {
             if (!response.IsSuccessStatusCode)
-                await ThrowForFailureAsync(response, linkedCts.Token);
+                await ThrowForFailureAsync(response, model, linkedCts.Token);
 
             using var document = JsonDocument.Parse(await response.Content.ReadAsStringAsync(linkedCts.Token));
             var content = document.RootElement
@@ -81,19 +192,19 @@ public async Task<LlmProviderChatResult> SendChatAsync(
 
             if (string.IsNullOrWhiteSpace(content))
             {
-                _logger.LogWarning("OpenAI returned an empty response for model {Model}.", _model);
+                _logger.LogWarning("OpenAI returned an empty response for model {Model}.", model);
                 throw new LlmChatException("Provider returned an empty response.", LlmProviderErrorCodes.ProviderError, StatusCodes.Status502BadGateway);
             }
 
             return new LlmProviderChatResult
             {
                 Content = content.Trim(),
-                Model = _model
+                Model = model
             };
         }
     }
 
-    private async Task ThrowForFailureAsync(HttpResponseMessage response, CancellationToken cancellationToken)
+    private async Task ThrowForFailureAsync(HttpResponseMessage response, string model, CancellationToken cancellationToken)
     {
         var body = await response.Content.ReadAsStringAsync(cancellationToken);
         var code = GetCode(response.StatusCode);
@@ -101,7 +212,7 @@ private async Task ThrowForFailureAsync(HttpResponseMessage response, Cancellati
             "OpenAI returned failure status {StatusCode} with error code {ErrorCode} for model {Model}.",
             (int)response.StatusCode,
             code,
-            _model);
+            model);
         throw new LlmChatException(
             GetMessage(response.StatusCode),
             code,
@@ -125,6 +236,7 @@ private static int GetStatusCode(HttpStatusCode statusCode)
         {
             HttpStatusCode.Unauthorized or HttpStatusCode.Forbidden => StatusCodes.Status400BadRequest,
             HttpStatusCode.TooManyRequests => StatusCodes.Status429TooManyRequests,
+            HttpStatusCode.ServiceUnavailable => StatusCodes.Status503ServiceUnavailable,
             _ => StatusCodes.Status502BadGateway
         };
     }
@@ -138,4 +250,18 @@ private static string GetMessage(HttpStatusCode statusCode)
             _ => "The provider returned an unexpected error."
         };
     }
+
+    private static string? TryGetString(JsonElement element, string propertyName)
+    {
+        return element.TryGetProperty(propertyName, out var property)
+            ? property.GetString()
+            : null;
+    }
+
+    private string ResolveModel(string? modelOverride)
+    {
+        return string.IsNullOrWhiteSpace(modelOverride)
+            ? _model
+            : modelOverride.Trim();
+    }
 }
diff --git a/backend/Coliee.API/appsettings.json b/backend/Coliee.API/appsettings.json
index c090de5..7e71a73 100644
--- a/backend/Coliee.API/appsettings.json
+++ b/backend/Coliee.API/appsettings.json
@@ -34,6 +34,10 @@
       "Gemini": {
         "BaseUrl": "https://generativelanguage.googleapis.com/v1beta",
         "Model": "gemini-1.5-flash"
+      },
+      "LmStudio": {
+        "BaseUrl": "http://localhost:1234/v1",
+        "Model": "local-model"
       }
     }
   },
diff --git a/backend/test_output.log b/backend/test_output.log
deleted file mode 100644
index 68ca27a..0000000
Binary files a/backend/test_output.log and /dev/null differ
diff --git a/backend/test_output2.log b/backend/test_output2.log
deleted file mode 100644
index 2b5e27a..0000000
--- a/backend/test_output2.log
+++ /dev/null
@@ -1,10 +0,0 @@
-  Determining projects to restore...
-  Restored /app/Coliee.API/Coliee.API.csproj (in 57.55 sec).
-  Restored /app/Coliee.API.Tests/Coliee.API.Tests.csproj (in 57.55 sec).
-  Coliee.API -> /app/Coliee.API/bin/Debug/net8.0/Coliee.API.dll
-/app/Coliee.API.Tests/AuthControllerTests.cs(60,9): error CS7036: There is no argument given that corresponds to the required parameter 'googleAuthService' of 'AuthController.AuthController(IUserRepository, TokenService, IPasswordResetOtpService, IEmailVerificationOtpService, IPasswordPolicyService, IGoogleAuthService)' [/app/Coliee.API.Tests/Coliee.API.Tests.csproj]
-/app/Coliee.API.Tests/Controllers/AuthControllerTests.cs(114,13): warning CS0219: The variable 'callCount' is assigned but its value is never used [/app/Coliee.API.Tests/Coliee.API.Tests.csproj]
-/app/Coliee.API.Tests/PasswordResetOtpServiceTests.cs(23,9): warning xUnit2013: Do not use Assert.Equal() to check for collection size. Use Assert.Single instead. (https://xunit.net/xunit.analyzers/rules/xUnit2013) [/app/Coliee.API.Tests/Coliee.API.Tests.csproj]
-/app/Coliee.API.Tests/PasswordResetOtpServiceTests.cs(45,9): warning xUnit2013: Do not use Assert.Equal() to check for collection size. Use Assert.Single instead. (https://xunit.net/xunit.analyzers/rules/xUnit2013) [/app/Coliee.API.Tests/Coliee.API.Tests.csproj]
-/app/Coliee.API.Tests/PasswordResetOtpServiceTests.cs(65,9): warning xUnit2013: Do not use Assert.Equal() to check for collection size. Use Assert.Single instead. (https://xunit.net/xunit.analyzers/rules/xUnit2013) [/app/Coliee.API.Tests/Coliee.API.Tests.csproj]
-/app/Coliee.API.Tests/PasswordResetOtpServiceTests.cs(66,9): warning xUnit2013: Do not use Assert.Equal() to check for collection size. Use Assert.Single instead. (https://xunit.net/xunit.analyzers/rules/xUnit2013) [/app/Coliee.API.Tests/Coliee.API.Tests.csproj]
diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
index 4e82c22..8d6ca0f 100644
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@@ -41,6 +41,12 @@ services:
       - Llm__Providers__Claude__Version=${CLAUDE_VERSION:-2023-06-01}
       - Llm__Providers__Gemini__Model=${GEMINI_MODEL:-gemini-1.5-flash}
       - Llm__Providers__Gemini__ApiKey=${GEMINI_API_KEY}
+      - Llm__GuestPreview__OpenAI__ApiKey=${Llm__GuestPreview__OpenAI__ApiKey}
+      - Llm__GuestPreview__OpenAI__Model=${Llm__GuestPreview__OpenAI__Model}
+      - Llm__GuestPreview__Claude__ApiKey=${Llm__GuestPreview__Claude__ApiKey}
+      - Llm__GuestPreview__Claude__Model=${Llm__GuestPreview__Claude__Model}
+      - Llm__GuestPreview__Gemini__ApiKey=${Llm__GuestPreview__Gemini__ApiKey}
+      - Llm__GuestPreview__Gemini__Model=${Llm__GuestPreview__Gemini__Model}
 
   frontend:
     image: ${DOCKERHUB_USERNAME}/coliee-frontend:latest
diff --git a/docker-compose.yml b/docker-compose.yml
index e734f8f..d1ca6fe 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -24,6 +24,9 @@ services:
       dockerfile: Dockerfile.dev
     ports:
       - "8080:8080"
+    dns:
+      - 8.8.8.8
+      - 1.1.1.1
     volumes:
       - ./backend/Coliee.API:/app
     depends_on:
@@ -45,6 +48,12 @@ services:
       - Llm__Providers__Claude__Model=${Llm__Providers__Claude__Model}
       - Llm__Providers__Claude__Version=${Llm__Providers__Claude__Version}
       - Llm__Providers__Gemini__Model=${Llm__Providers__Gemini__Model}
+      - Llm__GuestPreview__OpenAI__ApiKey=${Llm__GuestPreview__OpenAI__ApiKey}
+      - Llm__GuestPreview__OpenAI__Model=${Llm__GuestPreview__OpenAI__Model}
+      - Llm__GuestPreview__Claude__ApiKey=${Llm__GuestPreview__Claude__ApiKey}
+      - Llm__GuestPreview__Claude__Model=${Llm__GuestPreview__Claude__Model}
+      - Llm__GuestPreview__Gemini__ApiKey=${Llm__GuestPreview__Gemini__ApiKey}
+      - Llm__GuestPreview__Gemini__Model=${Llm__GuestPreview__Gemini__Model}
 
   frontend:
     build:
@@ -54,7 +63,7 @@ services:
       - "3000:5173"
     volumes:
       - ./frontend:/app
-      - /app/node_modules
+      - frontend-node-modules:/app/node_modules
     environment:
       - CHOKIDAR_USEPOLLING=true
       - API_URL=http://backend:8080
@@ -64,3 +73,4 @@ services:
 
 volumes:
   mysql-data:
+  frontend-node-modules:
diff --git a/frontend/frontend_test_result.txt b/frontend/frontend_test_result.txt
deleted file mode 100644
index 777366d..0000000
Binary files a/frontend/frontend_test_result.txt and /dev/null differ
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 02461de..8de2df2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,11 +11,18 @@
         "@react-oauth/google": "^0.13.4",
         "@xyflow/react": "^12.9.0",
         "axios": "^1.13.5",
+        "jspdf": "^4.2.1",
         "jwt-decode": "^4.0.0",
+        "lucide-react": "^0.542.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-hot-toast": "^2.6.0",
-        "react-router-dom": "^7.13.1"
+        "react-markdown": "^10.1.0",
+        "react-router-dom": "^7.13.1",
+        "rehype-raw": "^7.0.0",
+        "rehype-sanitize": "^6.0.0",
+        "remark-breaks": "^4.0.0",
+        "remark-gfm": "^4.0.1"
       },
       "devDependencies": {
         "@eslint/js": "^9.39.1",
@@ -321,7 +328,6 @@
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
       "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -1834,6 +1840,15 @@
         "@types/d3-selection": "*"
       }
     },
+    "node_modules/@types/debug": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
+      "integrity": "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
     "node_modules/@types/deep-eql": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
@@ -1845,9 +1860,26 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -1928,6 +1960,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "25.3.3",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.3.3.tgz",
@@ -1938,11 +1985,23 @@
         "undici-types": "~7.18.0"
       }
     },
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/react": {
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -1965,6 +2024,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/yargs": {
       "version": "17.0.35",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.35.tgz",
@@ -2277,6 +2349,12 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+      "license": "ISC"
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
@@ -2644,6 +2722,16 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2651,6 +2739,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
@@ -2799,6 +2897,36 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chai": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/chai/-/chai-5.3.3.tgz",
@@ -2833,6 +2961,46 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/check-error": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.3.tgz",
@@ -2935,6 +3103,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2972,6 +3150,18 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.49.0.tgz",
+      "integrity": "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2987,6 +3177,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -3150,7 +3350,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -3171,6 +3370,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz",
+      "integrity": "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/deep-eql": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
@@ -3201,12 +3413,24 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -3229,6 +3453,16 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/dompurify": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.0.tgz",
+      "integrity": "sha512-nolgK9JcaUXMSmW+j1yaSvaEaoXYHwWyGJlkoCTghc97KgGDDSnpoU/PlEnw63Ah+TGKFOyY+X5LnxaWbCSfXg==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -3254,7 +3488,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
       "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -3551,6 +3784,16 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -3599,6 +3842,12 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3650,6 +3899,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
+      }
+    },
     "node_modules/fastq": {
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
@@ -3678,6 +3938,12 @@
         }
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -3966,6 +4232,155 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-from-parse5": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.3.tgz",
+      "integrity": "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "property-information": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-location": "^5.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-raw": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.1.0.tgz",
+      "integrity": "sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "hast-util-to-parse5": "^8.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "parse5": "^7.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-sanitize": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/hast-util-sanitize/-/hast-util-sanitize-5.0.2.tgz",
+      "integrity": "sha512-3yTWghByc50aGS7JlGhk61SPenfE/p1oaFeNwkOOyrscaOkMGrcW9+Cy/QAIOBpZxP1yqDIzFMR0+Np0i0+usg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "unist-util-position": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
+      "integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-js": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.1.tgz",
+      "integrity": "sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.1.tgz",
+      "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hermes-estree": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
@@ -3996,6 +4411,40 @@
         "node": ">=18"
       }
     },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/http-proxy-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -4084,6 +4533,42 @@
         "node": ">=8"
       }
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+      "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+      "license": "MIT"
+    },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+      "license": "MIT"
+    },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -4113,6 +4598,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -4136,6 +4631,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -4146,12 +4651,24 @@
         "node": ">=0.12.0"
       }
     },
-    "node_modules/is-potential-custom-element-name": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
-      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
-      "dev": true,
-      "license": "MIT"
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/isexe": {
       "version": "2.0.0",
@@ -4468,6 +4985,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/jspdf": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-4.2.1.tgz",
+      "integrity": "sha512-YyAXyvnmjTbR4bHQRLzex3CuINCDlQnBqoSYyjJwTP2x9jDLuKDzy7aKUl0hgx3uhcl7xzg32agn5vlie6HIlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "fast-png": "^6.2.0",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.3.1",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/jwt-decode": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
@@ -4544,6 +5078,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/loupe": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.2.1.tgz",
@@ -4561,6 +5105,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.542.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.542.0.tgz",
+      "integrity": "sha512-w3hD8/SQB7+lzU2r4VdFyzzOzKnUjTZIF/MQJGSSvni7Llewni4vuViRppfRAa2guOsY5k4jZyxw/i9DQHv+dw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@@ -4582,6 +5135,16 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/markdown-table": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
+      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -4591,16 +5154,875 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
+      "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mdast-util-from-markdown": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.3.tgz",
+      "integrity": "sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark": "^4.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
+      "integrity": "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-newline-to-break": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-newline-to-break/-/mdast-util-newline-to-break-2.0.0.tgz",
+      "integrity": "sha512-MbgeFca0hLYIEx/2zGsszCSEJJ1JSCdiY5xQxRcLDDGa8EPvlLPupJ4DSajbMPAnC0je8jfb9TiUATnxxrHUog==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-find-and-replace": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
+      "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
       "dev": true,
       "license": "MIT",
-      "engines": {
-        "node": ">= 8"
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromark": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
+      "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz",
+      "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-destination": "^2.0.0",
+        "micromark-factory-label": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-title": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-html-tag-name": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+      "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
+      "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz",
+      "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
+      "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz",
+      "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz",
+      "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-chunked": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz",
+      "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz",
+      "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz",
+      "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz",
+      "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-string": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz",
+      "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
+      "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz",
+      "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-resolve-all": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz",
+      "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-subtokenize": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz",
+      "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
       }
     },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -4676,7 +6098,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/mz": {
@@ -4811,6 +6232,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -4824,11 +6251,35 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
     "node_modules/parse5": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
       "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^6.0.0"
@@ -4881,6 +6332,13 @@
         "node": ">= 14.16"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -5124,6 +6582,16 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -5161,6 +6629,16 @@
       ],
       "license": "MIT"
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/react": {
       "version": "19.2.4",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
@@ -5207,6 +6685,33 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/react-markdown": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
+      "integrity": "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -5305,6 +6810,123 @@
         "node": ">=8"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/rehype-raw": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
+      "integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-raw": "^9.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-sanitize": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-sanitize/-/rehype-sanitize-6.0.0.tgz",
+      "integrity": "sha512-CsnhKNsyI8Tub6L4sm5ZFsme4puGfc6pYylvXo1AeqaGbjOYyzNv3qZPwvs0oMJ39eryyeOdmxwUIo94IpEhqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-sanitize": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-breaks": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/remark-breaks/-/remark-breaks-4.0.0.tgz",
+      "integrity": "sha512-IjEjJOkH4FuJvHZVIW0QCDWxcG96kCq7An/KVH2NfJe6rKZU2AsHeB3OEjPNRxi4QC34Xdx7I2KGYn6IpT7gxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-newline-to-break": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-gfm": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-rehype": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
+      "integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-stringify": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -5347,6 +6969,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.59.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
@@ -5515,6 +7147,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/stack-utils": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
@@ -5545,6 +7187,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/std-env": {
       "version": "3.10.0",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
@@ -5552,6 +7204,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
@@ -5598,6 +7264,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/style-to-js": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
+      "integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.14"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+      "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.7"
+      }
+    },
     "node_modules/sucrase": {
       "version": "3.35.1",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
@@ -5647,6 +7331,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -5702,6 +7396,16 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -5845,6 +7549,26 @@
         "node": ">=18"
       }
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
@@ -5923,6 +7647,93 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/unified": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -5980,6 +7791,58 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-location": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+      "integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vite": {
       "version": "5.4.21",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
@@ -6149,6 +8012,16 @@
         "node": ">=18"
       }
     },
+    "node_modules/web-namespaces": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+      "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -6349,6 +8222,16 @@
           "optional": true
         }
       }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     }
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index 0fc284d..aaa1716 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,11 +14,18 @@
     "@react-oauth/google": "^0.13.4",
     "@xyflow/react": "^12.9.0",
     "axios": "^1.13.5",
+    "jspdf": "^4.2.1",
     "jwt-decode": "^4.0.0",
+    "lucide-react": "^0.542.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-hot-toast": "^2.6.0",
-    "react-router-dom": "^7.13.1"
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^7.13.1",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
diff --git a/frontend/public/pdf-fonts/Arial-Unicode.ttf b/frontend/public/pdf-fonts/Arial-Unicode.ttf
new file mode 100644
index 0000000..1537c5b
Binary files /dev/null and b/frontend/public/pdf-fonts/Arial-Unicode.ttf differ
diff --git a/frontend/public/pdf-fonts/Courier-New.ttf b/frontend/public/pdf-fonts/Courier-New.ttf
new file mode 100644
index 0000000..633899d
Binary files /dev/null and b/frontend/public/pdf-fonts/Courier-New.ttf differ
diff --git a/frontend/public/pdf-fonts/NotoSans-Regular.ttf b/frontend/public/pdf-fonts/NotoSans-Regular.ttf
new file mode 100644
index 0000000..7557504
Binary files /dev/null and b/frontend/public/pdf-fonts/NotoSans-Regular.ttf differ
diff --git a/frontend/public/pdf-fonts/NotoSansMono-Regular.ttf b/frontend/public/pdf-fonts/NotoSansMono-Regular.ttf
new file mode 100644
index 0000000..07ecc66
Binary files /dev/null and b/frontend/public/pdf-fonts/NotoSansMono-Regular.ttf differ
diff --git a/frontend/src/App.css b/frontend/src/App.css
deleted file mode 100644
index 71455d1..0000000
--- a/frontend/src/App.css
+++ /dev/null
@@ -1,218 +0,0 @@
-:root {
-  --primary: #3b82f6;
-  --primary-hover: #2563eb;
-  --bg-color: #0f172a;
-  --card-bg: #1e293b;
-  --text-main: #f8fafc;
-  --text-muted: #94a3b8;
-  --border-color: #334155;
-  --danger: #ef4444;
-  --danger-hover: #dc2626;
-  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-  color-scheme: dark;
-  background-color: var(--bg-color);
-  color: var(--text-main);
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  margin: 0;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-#root {
-  width: 100%;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-.app-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
-  width: 100%;
-}
-
-.header {
-  text-align: center;
-  margin-bottom: 3rem;
-  padding-bottom: 2rem;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.header h1 {
-  font-size: 2.5rem;
-  margin: 0 0 0.5rem 0;
-  background: linear-gradient(135deg, #60a5fa, #3b82f6);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.header p {
-  color: var(--text-muted);
-  margin: 0;
-  font-size: 1.1rem;
-}
-
-.main-content {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  gap: 2rem;
-  align-items: start;
-}
-
-@media (max-width: 768px) {
-  .main-content {
-    grid-template-columns: 1fr;
-  }
-}
-
-.form-card, .list-card {
-  background: var(--card-bg);
-  padding: 2rem;
-  border-radius: 16px;
-  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
-  border: 1px solid var(--border-color);
-}
-
-.form-card h2, .list-card h2 {
-  margin-top: 0;
-  margin-bottom: 1.5rem;
-  font-size: 1.25rem;
-  color: var(--text-main);
-}
-
-.input-group {
-  margin-bottom: 1.5rem;
-}
-
-.input-group label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-size: 0.875rem;
-  color: var(--text-muted);
-  font-weight: 500;
-}
-
-.input-group input {
-  width: 100%;
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
-  border: 1px solid var(--border-color);
-  background: rgba(15, 23, 42, 0.5);
-  color: var(--text-main);
-  font-size: 1rem;
-  transition: all 0.2s;
-}
-
-.input-group input:focus {
-  outline: none;
-  border-color: var(--primary);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
-}
-
-.form-actions {
-  display: flex;
-  gap: 1rem;
-}
-
-button {
-  cursor: pointer;
-  border: none;
-  border-radius: 8px;
-  font-weight: 600;
-  font-size: 0.875rem;
-  transition: all 0.2s;
-  font-family: inherit;
-}
-
-.btn-primary {
-  background: var(--primary);
-  color: white;
-  padding: 0.75rem 1.5rem;
-  flex: 1;
-}
-
-.btn-primary:hover {
-  background: var(--primary-hover);
-  transform: translateY(-1px);
-}
-
-.btn-secondary {
-  background: transparent;
-  color: var(--text-muted);
-  border: 1px solid var(--border-color);
-  padding: 0.75rem 1.5rem;
-}
-
-.btn-secondary:hover {
-  background: var(--border-color);
-  color: var(--text-main);
-}
-
-.table-wrapper {
-  overflow-x: auto;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-th, td {
-  padding: 1rem;
-  text-align: left;
-  border-bottom: 1px solid var(--border-color);
-}
-
-th {
-  color: var(--text-muted);
-  font-weight: 500;
-  font-size: 0.875rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.font-semibold {
-  font-weight: 600;
-}
-
-.actions {
-  display: flex;
-  gap: 0.5rem;
-  justify-content: flex-end;
-}
-
-.btn-icon {
-  background: rgba(255, 255, 255, 0.05);
-  color: var(--text-main);
-  padding: 0.4rem 0.8rem;
-  font-size: 0.75rem;
-}
-
-.btn-icon:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.btn-icon.delete:hover {
-  background: var(--danger);
-  color: white;
-}
-
-.loading, .empty-state {
-  text-align: center;
-  padding: 3rem;
-  color: var(--text-muted);
-}
diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
new file mode 100644
index 0000000..622d988
--- /dev/null
+++ b/frontend/src/App.test.tsx
@@ -0,0 +1,84 @@
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import App from './App'
+
+const authState = vi.hoisted(() => ({
+    isAuthenticated: false,
+}))
+
+vi.mock('./context/AuthContext', () => ({
+    useAuth: () => authState,
+}))
+
+vi.mock('./pages/Index', () => ({
+    default: () => <div data-testid="index-page">Index Page</div>,
+}))
+
+vi.mock('./pages/ForgotPasswordPage', () => ({
+    default: () => <div data-testid="forgot-password-page">Forgot Password</div>,
+}))
+
+vi.mock('./pages/VerifyEmailPage', () => ({
+    default: () => <div data-testid="verify-email-page">Verify Email</div>,
+}))
+
+vi.mock('./pages/VerifyOtpPage', () => ({
+    default: () => <div data-testid="verify-otp-page">Verify OTP</div>,
+}))
+
+vi.mock('./pages/ResetPasswordPage', () => ({
+    default: () => <div data-testid="reset-password-page">Reset Password</div>,
+}))
+
+vi.mock('./pages/SettingsPage', () => ({
+    default: () => <div data-testid="settings-page">Settings</div>,
+}))
+
+describe('App routes', () => {
+    beforeEach(() => {
+        authState.isAuthenticated = false
+    })
+
+    it('redirects legacy chat route to the canonical workspace route', () => {
+        render(
+            <MemoryRouter initialEntries={['/chat']}>
+                <App />
+            </MemoryRouter>,
+        )
+
+        expect(screen.getByTestId('index-page')).toBeInTheDocument()
+    })
+
+    it('redirects legacy mindmap route to the canonical workspace route', () => {
+        render(
+            <MemoryRouter initialEntries={['/mindmap']}>
+                <App />
+            </MemoryRouter>,
+        )
+
+        expect(screen.getByTestId('index-page')).toBeInTheDocument()
+    })
+
+    it('keeps the settings route protected', () => {
+        render(
+            <MemoryRouter initialEntries={['/settings']}>
+                <App />
+            </MemoryRouter>,
+        )
+
+        expect(screen.getByTestId('index-page')).toBeInTheDocument()
+    })
+
+    it('renders settings for authenticated users', () => {
+        authState.isAuthenticated = true
+
+        render(
+            <MemoryRouter initialEntries={['/settings']}>
+                <App />
+            </MemoryRouter>,
+        )
+
+        expect(screen.getByTestId('settings-page')).toBeInTheDocument()
+    })
+})
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index cd07610..ec358f0 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,52 +1,39 @@
-import { Routes, Route, Navigate } from 'react-router-dom'
-import WelcomePage from './pages/WelcomePage'
-import LoginPage from './pages/LoginPage'
-import RegisterPage from './pages/RegisterPage'
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
 import VerifyEmailPage from './pages/VerifyEmailPage'
 import ForgotPasswordPage from './pages/ForgotPasswordPage'
 import VerifyOtpPage from './pages/VerifyOtpPage'
 import ResetPasswordPage from './pages/ResetPasswordPage'
 import SettingsPage from './pages/SettingsPage'
-import HomePage from './pages/HomePage'
-import PublicRoute from './components/PublicRoute'
-import ProtectedRoute from './components/ProtectedRoute'
-import Layout from './components/Layout'
+import IndexPage from './pages/Index'
+import { useAuth } from './context/AuthContext'
 
-function App() {
-     return (
-          <Routes>
-               {/* Public (Only accessible if NOT logged in) */}
-               <Route path="/" element={
-                    <PublicRoute><WelcomePage /></PublicRoute>
-               } />
-               <Route path="/login" element={
-                    <PublicRoute><LoginPage /></PublicRoute>
-               } />
-               <Route path="/register" element={
-                    <PublicRoute><RegisterPage /></PublicRoute>
-               } />
-               <Route path="/forgot-password" element={
-                    <PublicRoute><ForgotPasswordPage /></PublicRoute>
-               } />
-               <Route path="/reset-password" element={
-                    <PublicRoute><ResetPasswordPage /></PublicRoute>
-               } />
+function ProtectedSettingsRoute() {
+    const { isAuthenticated } = useAuth()
+    const location = useLocation()
 
-               {/* OTP and Email Verification can sometimes be accessed publicly if carrying a token, but usually mid-auth flow */}
-               <Route path="/verify-email" element={<VerifyEmailPage />} />
-               <Route path="/verify-otp" element={<VerifyOtpPage />} />
+    if (!isAuthenticated)
+        return <Navigate to="/login" replace state={{ from: location }} />
 
-               {/* Protected (Only accessible IF logged in) - Wrapped in Layout */}
-               <Route element={<ProtectedRoute><Layout /></ProtectedRoute>}>
-                    <Route path="/home" element={<HomePage />} />
-                    <Route path="/settings" element={<SettingsPage />} />
-                    <Route path="/profile" element={<Navigate to="/settings" replace />} />
-               </Route>
+    return <SettingsPage />
+}
 
-               {/* Fallback */}
-               <Route path="*" element={<Navigate to="/" replace />} />
-          </Routes>
-     )
+function App() {
+    return (
+        <Routes>
+            <Route path="/" element={<IndexPage />} />
+            <Route path="/login" element={<IndexPage />} />
+            <Route path="/register" element={<IndexPage />} />
+            <Route path="/chat" element={<Navigate to="/" replace />} />
+            <Route path="/mindmap" element={<Navigate to="/" replace />} />
+            <Route path="/forgot-password" element={<ForgotPasswordPage />} />
+            <Route path="/reset-password" element={<ResetPasswordPage />} />
+            <Route path="/verify-email" element={<VerifyEmailPage />} />
+            <Route path="/verify-otp" element={<VerifyOtpPage />} />
+            <Route path="/settings" element={<ProtectedSettingsRoute />} />
+            <Route path="/profile" element={<Navigate to="/settings" replace />} />
+            <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
+    )
 }
 
 export default App
diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg
deleted file mode 100644
index 6c87de9..0000000
--- a/frontend/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
deleted file mode 100644
index 40fcaa5..0000000
--- a/frontend/src/components/Layout.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Outlet, useLocation, useNavigate } from 'react-router-dom';
-import { useAuth } from '../context/AuthContext';
-
-export default function Layout() {
-    const { user, logout } = useAuth();
-    const location = useLocation();
-    const navigate = useNavigate();
-    const isCanvasWorkspace = location.pathname === '/home';
-
-    const handleLogout = async () => {
-        await logout();
-        navigate('/');
-    };
-
-    return (
-        <div className="app-layout">
-            <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
-                <header className="app-topbar">
-                    <div className="app-brand" style={{ cursor: 'pointer' }} onClick={() => navigate('/home')}>
-                        Coliee AI
-                    </div>
-
-                    <div className="app-actions">
-                        <span style={{ fontSize: '0.95rem', color: 'var(--text-muted)' }} className="hidden sm:inline">
-                            {user?.displayName || user?.email}
-                        </span>
-
-                        <button
-                            onClick={() => navigate('/settings')}
-                            className="btn-pill-outline"
-                            style={{ padding: '0.5rem 1rem', fontSize: '0.85rem' }}
-                        >
-                            Manage Providers
-                        </button>
-
-                        <button
-                            onClick={handleLogout}
-                            className="btn-pill-dark"
-                        >
-                            Log Out
-                        </button>
-                    </div>
-                </header>
-
-                <main className={isCanvasWorkspace ? 'dashboard-main dashboard-main--canvas' : 'dashboard-main'}>
-                    <Outlet />
-                </main>
-            </div>
-        </div>
-    );
-}
diff --git a/frontend/src/components/ProtectedRoute.tsx b/frontend/src/components/ProtectedRoute.tsx
deleted file mode 100644
index b81fd53..0000000
--- a/frontend/src/components/ProtectedRoute.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Navigate, useLocation } from 'react-router-dom';
-import { useAuth } from '../context/AuthContext';
-
-interface ProtectedRouteProps {
-    children: React.ReactNode;
-}
-
-export default function ProtectedRoute({ children }: ProtectedRouteProps) {
-    const { isAuthenticated } = useAuth();
-    const location = useLocation();
-
-    // If not logged in, redirect to login page with the return url
-    return isAuthenticated ? <>{children}</> : <Navigate to="/login" state={{ from: location }} replace />;
-}
diff --git a/frontend/src/components/PublicRoute.tsx b/frontend/src/components/PublicRoute.tsx
deleted file mode 100644
index c566070..0000000
--- a/frontend/src/components/PublicRoute.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Navigate } from 'react-router-dom';
-import { useAuth } from '../context/AuthContext';
-
-interface PublicRouteProps {
-    children: React.ReactNode;
-}
-
-export default function PublicRoute({ children }: PublicRouteProps) {
-    const { isAuthenticated } = useAuth();
-    
-    // If user is already logged in, redirect them away from public pages (like login/register)
-    return isAuthenticated ? <Navigate to="/home" replace /> : <>{children}</>;
-}
diff --git a/frontend/src/components/auth/AuthCard.tsx b/frontend/src/components/auth/AuthCard.tsx
new file mode 100644
index 0000000..85842b5
--- /dev/null
+++ b/frontend/src/components/auth/AuthCard.tsx
@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react'
+
+interface AuthCardProps {
+    children: ReactNode
+    className?: string
+}
+
+export default function AuthCard({ children, className = '' }: AuthCardProps) {
+    return (
+        <div className={`auth-card${className ? ` ${className}` : ''}`}>
+            {children}
+        </div>
+    )
+}
diff --git a/frontend/src/components/auth/AuthIcons.tsx b/frontend/src/components/auth/AuthIcons.tsx
new file mode 100644
index 0000000..1cb40e8
--- /dev/null
+++ b/frontend/src/components/auth/AuthIcons.tsx
@@ -0,0 +1,24 @@
+export function Eye() {
+    return (
+        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" />
+        </svg>
+    )
+}
+
+export function EyeOff() {
+    return (
+        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" />
+            <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" />
+            <line x1="1" y1="1" x2="23" y2="23" />
+            <path d="M14.12 14.12a3 3 0 1 1-4.24-4.24" />
+        </svg>
+    )
+}
+
+export function RabbitSVG() {
+    return (
+        <span className="brand-icon">C</span>
+    )
+}
diff --git a/frontend/src/components/auth/AuthModal.tsx b/frontend/src/components/auth/AuthModal.tsx
new file mode 100644
index 0000000..69bfa1a
--- /dev/null
+++ b/frontend/src/components/auth/AuthModal.tsx
@@ -0,0 +1,77 @@
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import AuthCard from './AuthCard'
+import LoginForm from './LoginForm'
+import RegisterForm from './RegisterForm'
+
+export type AuthModalMode = 'login' | 'register'
+
+interface AuthModalProps {
+    mode: AuthModalMode
+    onClose: () => void
+    onChangeMode: (mode: AuthModalMode) => void
+}
+
+export default function AuthModal({ mode, onClose, onChangeMode }: AuthModalProps) {
+    const navigate = useNavigate()
+    const title = mode === 'login'
+        ? 'Sign in to your canvas workspace'
+        : 'Create a canvas workspace account'
+    const copy = mode === 'login'
+        ? 'Continue in the same workspace used on the main canvas, with your sessions, branches, and saved canvases in one place.'
+        : 'Start with the same workspace design language as the main canvas, then pick up your canvases anywhere.'
+
+    useEffect(() => {
+        function handleKeyDown(event: KeyboardEvent) {
+            if (event.key === 'Escape') onClose()
+        }
+
+        document.body.classList.add('auth-modal-open')
+        window.addEventListener('keydown', handleKeyDown)
+        return () => {
+            document.body.classList.remove('auth-modal-open')
+            window.removeEventListener('keydown', handleKeyDown)
+        }
+    }, [onClose])
+
+    return (
+        <div
+            className="auth-modal-backdrop"
+            role="dialog"
+            aria-modal="true"
+            aria-label={mode === 'login' ? 'Sign in' : 'Sign up'}
+            onClick={onClose}
+        >
+            <AuthCard className="auth-modal-card">
+                <div className="auth-modal-card__content" onClick={event => event.stopPropagation()}>
+                    <div className="auth-modal-card__header">
+                        <div className="auth-modal-card__intro">
+                            <span className="auth-modal-card__eyebrow">Coliee AI</span>
+                            <h2 className="auth-modal-card__title">{title}</h2>
+                            <p className="auth-modal-card__copy">{copy}</p>
+                        </div>
+                        <button type="button" className="auth-modal-close" onClick={onClose} aria-label="Close auth dialog">
+                            ×
+                        </button>
+                    </div>
+
+                    {mode === 'login' ? (
+                        <LoginForm
+                            onSwitchToRegister={() => onChangeMode('register')}
+                            onForgotPassword={() => {
+                                onClose()
+                                navigate('/forgot-password')
+                            }}
+                            onSuccess={onClose}
+                        />
+                    ) : (
+                        <RegisterForm
+                            onSwitchToLogin={() => onChangeMode('login')}
+                            onSuccess={onClose}
+                        />
+                    )}
+                </div>
+            </AuthCard>
+        </div>
+    )
+}
diff --git a/frontend/src/components/auth/AuthNavbar.tsx b/frontend/src/components/auth/AuthNavbar.tsx
new file mode 100644
index 0000000..2360861
--- /dev/null
+++ b/frontend/src/components/auth/AuthNavbar.tsx
@@ -0,0 +1,14 @@
+import { useLocation } from 'react-router-dom'
+import PublicAuthNavbar from './PublicAuthNavbar'
+
+export default function AuthNavbar() {
+    const location = useLocation()
+    const isRegister = location.pathname === '/register'
+
+    return (
+        <PublicAuthNavbar
+            actionLabel={isRegister ? 'Sign In' : 'Sign Up'}
+            actionHref={isRegister ? '/login' : '/register'}
+        />
+    )
+}
diff --git a/frontend/src/components/auth/LoginForm.tsx b/frontend/src/components/auth/LoginForm.tsx
new file mode 100644
index 0000000..aee410c
--- /dev/null
+++ b/frontend/src/components/auth/LoginForm.tsx
@@ -0,0 +1,185 @@
+import { useState, type FormEvent } from 'react'
+import { AxiosError } from 'axios'
+import { GoogleLogin, type CredentialResponse } from '@react-oauth/google'
+import { useNavigate } from 'react-router-dom'
+import { login, loginWithGoogle, getEmailVerificationRequired, getErrorMessage } from '../../services/authService'
+import { useAuth } from '../../context/AuthContext'
+import { Eye, EyeOff } from './AuthIcons'
+
+interface FieldErrors {
+    email?: string
+    password?: string
+}
+
+interface LockoutData {
+    message: string
+    lockedUntil: string
+}
+
+interface LoginFormProps {
+    onSwitchToRegister: () => void
+    onForgotPassword?: () => void
+    onSuccess?: () => void
+}
+
+export default function LoginForm({ onSwitchToRegister, onForgotPassword, onSuccess }: LoginFormProps) {
+    const [email, setEmail] = useState('')
+    const [password, setPassword] = useState('')
+    const [showPw, setShowPw] = useState(false)
+    const [fieldErrors, setFieldErrors] = useState<FieldErrors>({})
+    const [apiError, setApiError] = useState('')
+    const [lockedUntil, setLockedUntil] = useState<string | null>(null)
+    const [loading, setLoading] = useState(false)
+
+    const navigate = useNavigate()
+    const { login: authLogin } = useAuth()
+
+    function validate(): boolean {
+        const errors: FieldErrors = {}
+        if (!email.trim()) errors.email = 'Email is required'
+        else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) errors.email = 'Enter a valid email address'
+        if (!password) errors.password = 'Password is required'
+        setFieldErrors(errors)
+        return !Object.keys(errors).length
+    }
+
+    async function handleGoogleSuccess(credentialResponse: CredentialResponse) {
+        setApiError('')
+        setLockedUntil(null)
+        if (!credentialResponse.credential) return
+
+        setLoading(true)
+        try {
+            const data = await loginWithGoogle(credentialResponse.credential)
+            authLogin(data.token, data.refreshToken)
+            onSuccess?.()
+            navigate('/')
+        } catch (err: unknown) {
+            setApiError(getErrorMessage(err))
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    async function handleSubmit(ev: FormEvent) {
+        ev.preventDefault()
+        setApiError('')
+        setLockedUntil(null)
+        if (!validate()) return
+
+        setLoading(true)
+        try {
+            const data = await login(email.trim(), password)
+            authLogin(data.token, data.refreshToken)
+            onSuccess?.()
+            navigate('/')
+        } catch (err: unknown) {
+            const verificationRequired = getEmailVerificationRequired(err)
+            if (verificationRequired) {
+                navigate('/verify-email', {
+                    state: {
+                        email: verificationRequired.email,
+                        nextResendAt: verificationRequired.nextResendAt,
+                        cooldownSeconds: verificationRequired.cooldownSeconds,
+                        resendAttemptsRemaining: verificationRequired.resendAttemptsRemaining,
+                        cooldownSecondsRemaining: verificationRequired.cooldownSecondsRemaining,
+                        message: verificationRequired.message,
+                    }
+                })
+                return
+            }
+
+            if (err instanceof AxiosError && err.response?.status === 429) {
+                const body = err.response.data as LockoutData
+                setLockedUntil(body.lockedUntil ?? null)
+                setApiError('Account locked due to too many failed attempts.')
+            } else {
+                setApiError(getErrorMessage(err))
+            }
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <>
+            <div className="auth-header">
+                <h2 className="auth-title">Welcome back</h2>
+            </div>
+
+            {apiError && (
+                <div className="auth-alert auth-alert--err">
+                    <span>⚠</span> <span>{apiError}</span>
+                </div>
+            )}
+            {lockedUntil && (
+                <div className="auth-alert auth-alert--err">
+                    <span>🔒</span> <span>Try again after <strong>{new Date(lockedUntil).toLocaleTimeString()}</strong></span>
+                </div>
+            )}
+
+            <div className="auth-social-auth">
+                <GoogleLogin
+                    onSuccess={handleGoogleSuccess}
+                    onError={() => setApiError('Google Sign-In failed or was cancelled.')}
+                />
+            </div>
+            <div className="auth-divider" aria-hidden="true">
+                <span>OR</span>
+            </div>
+
+            <form onSubmit={handleSubmit} noValidate>
+                <div className="auth-input-group">
+                    <input
+                        id="login-email"
+                        type="email"
+                        value={email}
+                        onChange={e => { setEmail(e.target.value); setFieldErrors(p => ({ ...p, email: undefined })) }}
+                        placeholder="Email address"
+                        className={`auth-input${fieldErrors.email ? ' auth-input--error' : ''}`}
+                        autoComplete="email"
+                        disabled={loading}
+                    />
+                    {fieldErrors.email && <p className="field-err">{fieldErrors.email}</p>}
+                </div>
+
+                <div className="auth-input-group pw-wrap">
+                    <input
+                        id="login-password"
+                        type={showPw ? 'text' : 'password'}
+                        value={password}
+                        onChange={e => { setPassword(e.target.value); setFieldErrors(p => ({ ...p, password: undefined })) }}
+                        placeholder="Password"
+                        className={`auth-input${fieldErrors.password ? ' auth-input--error' : ''}`}
+                        autoComplete="current-password"
+                        disabled={loading}
+                    />
+                    <button type="button" className="eye-btn" onClick={() => setShowPw(!showPw)} tabIndex={-1}>
+                        {showPw ? <EyeOff /> : <Eye />}
+                    </button>
+                    {fieldErrors.password && <p className="field-err">{fieldErrors.password}</p>}
+                </div>
+
+                <button id="login-submit" type="submit" className="auth-btn-full" disabled={loading}>
+                    {loading ? <><span className="spin" /> Signing in…</> : 'Sign In'}
+                </button>
+            </form>
+
+            <div className="auth-footer">
+                Don't have an account?{' '}
+                <button type="button" className="auth-link-button" onClick={onSwitchToRegister}>
+                    Sign up
+                </button>
+                <br />
+                <button
+                    type="button"
+                    className="auth-link-button"
+                    onClick={onForgotPassword ?? (() => navigate('/forgot-password'))}
+                    style={{ marginTop: '1rem' }}
+                >
+                    Forgot Password
+                </button>
+            </div>
+        </>
+    )
+}
diff --git a/frontend/src/components/auth/PublicAuthNavbar.tsx b/frontend/src/components/auth/PublicAuthNavbar.tsx
new file mode 100644
index 0000000..4519b7c
--- /dev/null
+++ b/frontend/src/components/auth/PublicAuthNavbar.tsx
@@ -0,0 +1,26 @@
+import { useNavigate } from 'react-router-dom'
+
+interface PublicAuthNavbarProps {
+    actionLabel?: string
+    actionHref?: string
+}
+
+export default function PublicAuthNavbar({ actionLabel, actionHref }: PublicAuthNavbarProps) {
+    const navigate = useNavigate()
+
+    return (
+        <nav className="app-topbar public-topbar">
+            <div className="app-brand" onClick={() => navigate('/')} style={{ cursor: 'pointer' }}>
+                Coliee AI
+            </div>
+
+            <div className="public-topbar__actions">
+                {actionLabel && actionHref && (
+                    <button className="btn-pill-outline" onClick={() => navigate(actionHref)}>
+                        {actionLabel}
+                    </button>
+                )}
+            </div>
+        </nav>
+    )
+}
diff --git a/frontend/src/components/auth/RegisterForm.tsx b/frontend/src/components/auth/RegisterForm.tsx
new file mode 100644
index 0000000..6d026fe
--- /dev/null
+++ b/frontend/src/components/auth/RegisterForm.tsx
@@ -0,0 +1,224 @@
+import { useState, type FormEvent } from 'react'
+import { GoogleLogin, type CredentialResponse } from '@react-oauth/google'
+import { useNavigate } from 'react-router-dom'
+import { register, loginWithGoogle, getErrorMessage } from '../../services/authService'
+import { useAuth } from '../../context/AuthContext'
+import type { EmailVerificationOtpResponse } from '../../types'
+import { Eye, EyeOff } from './AuthIcons'
+
+interface FieldErrors {
+    email?: string
+    password?: string
+    confirmPassword?: string
+}
+
+interface RegisterFormProps {
+    onSwitchToLogin: () => void
+    onSuccess?: () => void
+}
+
+export default function RegisterForm({ onSwitchToLogin, onSuccess }: RegisterFormProps) {
+    const [displayName, setDisplayName] = useState('')
+    const [email, setEmail] = useState('')
+    const [password, setPassword] = useState('')
+    const [confirmPassword, setConfirmPassword] = useState('')
+    const [showPw, setShowPw] = useState(false)
+    const [showCpw, setShowCpw] = useState(false)
+    const [fieldErrors, setFieldErrors] = useState<FieldErrors>({})
+    const [apiError, setApiError] = useState('')
+    const [loading, setLoading] = useState(false)
+    const [success, setSuccess] = useState(false)
+
+    const navigate = useNavigate()
+    const { login: authLogin } = useAuth()
+
+    function validate(): boolean {
+        const errors: FieldErrors = {}
+        if (!email.trim()) {
+            errors.email = 'Email is required'
+        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
+            errors.email = 'Enter a valid email address'
+        }
+
+        if (!password) {
+            errors.password = 'Password is required'
+        } else {
+            if (password.length < 8) errors.password = 'At least 8 characters'
+            else if (!/[A-Z]/.test(password)) errors.password = 'Needs uppercase'
+            else if (!/[a-z]/.test(password)) errors.password = 'Needs lowercase'
+            else if (!/[0-9]/.test(password)) errors.password = 'Needs a number'
+            else if (!/[^A-Za-z0-9]/.test(password)) errors.password = 'Needs a special character'
+        }
+
+        if (!confirmPassword) errors.confirmPassword = 'Please confirm your password'
+        else if (password !== confirmPassword) errors.confirmPassword = 'Passwords do not match'
+
+        setFieldErrors(errors)
+        return !Object.keys(errors).length
+    }
+
+    async function handleSubmit(ev: FormEvent) {
+        ev.preventDefault()
+        setApiError('')
+        if (!validate()) return
+
+        setLoading(true)
+        try {
+            const data: EmailVerificationOtpResponse = await register(email.trim(), password, displayName.trim() || undefined)
+            setSuccess(true)
+            onSuccess?.()
+            setTimeout(() => navigate('/verify-email', {
+                state: {
+                    email: email.trim(),
+                    nextResendAt: data.nextResendAt,
+                    cooldownSeconds: data.cooldownSeconds,
+                    resendAttemptsRemaining: data.resendAttemptsRemaining,
+                    message: data.message,
+                }
+            }), 1400)
+        } catch (err: unknown) {
+            setApiError(getErrorMessage(err))
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    async function handleGoogleSuccess(credentialResponse: CredentialResponse) {
+        setApiError('')
+        if (!credentialResponse.credential) return
+
+        setLoading(true)
+        try {
+            const data = await loginWithGoogle(credentialResponse.credential)
+            authLogin(data.token, data.refreshToken)
+            onSuccess?.()
+            navigate('/')
+        } catch (err: unknown) {
+            setApiError(getErrorMessage(err))
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <>
+            <div className="auth-header">
+                <h2 className="auth-title">Create an account</h2>
+            </div>
+
+            {apiError && (
+                <div className="auth-alert auth-alert--err">
+                    <span>⚠</span> <span>{apiError}</span>
+                </div>
+            )}
+            {success && (
+                <div className="auth-alert auth-alert--ok">
+                    <span>✓</span> <span>Account created! Check your email for a verification code…</span>
+                </div>
+            )}
+
+            <div className="auth-social-auth">
+                <GoogleLogin
+                    onSuccess={handleGoogleSuccess}
+                    onError={() => setApiError('Google Sign-Up failed or was cancelled.')}
+                />
+            </div>
+            <div className="auth-divider" aria-hidden="true">
+                <span>OR</span>
+            </div>
+
+            <form onSubmit={handleSubmit} noValidate>
+                <div className="auth-input-group">
+                    <input
+                        type="text"
+                        value={displayName}
+                        onChange={e => setDisplayName(e.target.value)}
+                        placeholder="Your Name"
+                        className="auth-input"
+                        autoComplete="nickname"
+                        disabled={loading || success}
+                    />
+                </div>
+
+                <div className="auth-input-group">
+                    <input
+                        id="register-email"
+                        type="email"
+                        value={email}
+                        onChange={e => { setEmail(e.target.value); setFieldErrors(p => ({ ...p, email: undefined })) }}
+                        placeholder="Email Address"
+                        className={`auth-input${fieldErrors.email ? ' auth-input--error' : ''}`}
+                        autoComplete="email"
+                        disabled={loading || success}
+                    />
+                    {fieldErrors.email && <p className="field-err">{fieldErrors.email}</p>}
+                </div>
+
+                <div className="auth-input-group pw-wrap">
+                    <input
+                        id="register-password"
+                        type={showPw ? 'text' : 'password'}
+                        value={password}
+                        onChange={e => { setPassword(e.target.value); setFieldErrors(p => ({ ...p, password: undefined })) }}
+                        placeholder="Password"
+                        className={`auth-input${fieldErrors.password ? ' auth-input--error' : ''}`}
+                        autoComplete="new-password"
+                        disabled={loading || success}
+                    />
+                    <button type="button" className="eye-btn" onClick={() => setShowPw(!showPw)} tabIndex={-1}>
+                        {showPw ? <EyeOff /> : <Eye />}
+                    </button>
+                    {fieldErrors.password && <p className="field-err">{fieldErrors.password}</p>}
+
+                    {password.length > 0 && (
+                        <div className="pw-requirements">
+                            <div className={`req-item ${password.length >= 8 ? 'met' : ''}`}>
+                                <span className="req-icon">{password.length >= 8 ? '✓' : '○'}</span> 8+ characters
+                            </div>
+                            <div className={`req-item ${/[A-Z]/.test(password) ? 'met' : ''}`}>
+                                <span className="req-icon">{/[A-Z]/.test(password) ? '✓' : '○'}</span> Uppercase letter
+                            </div>
+                            <div className={`req-item ${/[a-z]/.test(password) ? 'met' : ''}`}>
+                                <span className="req-icon">{/[a-z]/.test(password) ? '✓' : '○'}</span> Lowercase letter
+                            </div>
+                            <div className={`req-item ${/[0-9]/.test(password) ? 'met' : ''}`}>
+                                <span className="req-icon">{/[0-9]/.test(password) ? '✓' : '○'}</span> Number
+                            </div>
+                            <div className={`req-item ${/[^A-Za-z0-9]/.test(password) ? 'met' : ''}`}>
+                                <span className="req-icon">{/[^A-Za-z0-9]/.test(password) ? '✓' : '○'}</span> Special character
+                            </div>
+                        </div>
+                    )}
+                </div>
+
+                <div className="auth-input-group pw-wrap">
+                    <input
+                        id="register-confirm-password"
+                        type={showCpw ? 'text' : 'password'}
+                        value={confirmPassword}
+                        onChange={e => { setConfirmPassword(e.target.value); setFieldErrors(p => ({ ...p, confirmPassword: undefined })) }}
+                        placeholder="Re-enter Password"
+                        className={`auth-input${fieldErrors.confirmPassword ? ' auth-input--error' : ''}`}
+                        autoComplete="new-password"
+                        disabled={loading || success}
+                    />
+                    <button type="button" className="eye-btn" onClick={() => setShowCpw(!showCpw)} tabIndex={-1}>
+                        {showCpw ? <EyeOff /> : <Eye />}
+                    </button>
+                    {fieldErrors.confirmPassword && <p className="field-err">{fieldErrors.confirmPassword}</p>}
+                </div>
+
+                <button id="register-submit" type="submit" className="auth-btn-full" disabled={loading || success}>
+                    {loading ? <><span className="spin" /> Creating account…</> : 'Sign Up'}
+                </button>
+            </form>
+
+            <div className="auth-footer">
+                Already have an account?{' '}
+                <button type="button" className="auth-link-button" onClick={onSwitchToLogin}>
+                    Sign in
+                </button>
+            </div>
+        </>
+    )
+}
diff --git a/frontend/src/components/canvas/CanvasGraphView.tsx b/frontend/src/components/canvas/CanvasGraphView.tsx
deleted file mode 100644
index b8205a0..0000000
--- a/frontend/src/components/canvas/CanvasGraphView.tsx
+++ /dev/null
@@ -1,271 +0,0 @@
-import { Background, Controls, Handle, Position, ReactFlow, ReactFlowProvider, type Edge, type Node, type NodeProps } from '@xyflow/react'
-import type { CanvasGraphNode, CanvasGraphResponse, LlmProviderId } from '../../types'
-
-interface CanvasGraphViewProps {
-    graph: CanvasGraphResponse
-    selectedNodeId: number | null
-    draft: string
-    providerOverride: LlmProviderId | ''
-    sending: boolean
-    noProvidersConfigured: boolean
-    onSelectNode: (nodeId: number) => void
-    onDraftChange: (value: string) => void
-    onProviderOverrideChange: (value: LlmProviderId | '') => void
-    onSubmit: (nodeId: number) => void
-    onOpenSettings: () => void
-}
-
-interface GraphNodeData {
-    node: CanvasGraphNode
-    childCount: number
-    draft: string
-    providerOverride: LlmProviderId | ''
-    sending: boolean
-    selected: boolean
-    noProvidersConfigured: boolean
-    defaultProvider: LlmProviderId | null
-    availableProviders: LlmProviderId[]
-    onDraftChange: (value: string) => void
-    onProviderOverrideChange: (value: LlmProviderId | '') => void
-    onSubmit: () => void
-    onOpenSettings: () => void
-}
-
-function getProviderLabel(provider: LlmProviderId): string {
-    switch (provider) {
-        case 'openai': return 'OpenAI'
-        case 'claude': return 'Claude'
-        case 'gemini': return 'Gemini'
-    }
-
-    return provider
-}
-
-function summarizeContent(content: string): string {
-    const normalized = content.replace(/\s+/g, ' ').trim()
-    if (normalized.length <= 160) return normalized
-    return `${normalized.slice(0, 157).trimEnd()}...`
-}
-
-function GraphNodeCard({ data }: NodeProps<Node<GraphNodeData>>) {
-    const isRoot = data.node.kind === 'main'
-    const isEmptyMainNode = isRoot && !data.node.content.trim() && data.childCount === 0
-    const showComposer = data.selected || isEmptyMainNode
-    const preview = summarizeContent(data.node.content)
-
-    return (
-        <div className={`canvas-node-card${data.selected ? ' canvas-node-card--selected' : ''}${isRoot ? ' canvas-node-card--main' : ''}`}>
-            {!isRoot && <Handle type="target" position={Position.Top} isConnectable={false} />}
-            <Handle type="source" position={Position.Bottom} isConnectable={false} />
-
-            <div className="canvas-node-card__eyebrow">
-                <span>{isRoot ? 'Main Node' : `Node ${data.node.depth}`}</span>
-                {data.childCount > 0 && <span>{data.childCount} branch{data.childCount === 1 ? '' : 'es'}</span>}
-            </div>
-            <h3 className="canvas-node-card__title">{data.node.title}</h3>
-
-            {data.node.content && (
-                <p className="canvas-node-card__content">
-                    {showComposer ? data.node.content : preview}
-                </p>
-            )}
-
-            {!showComposer && (
-                <div className="canvas-node-card__hint">Click to continue from this node.</div>
-            )}
-
-            {showComposer && (
-                <form
-                    className="canvas-node-card__composer nodrag"
-                    onClick={event => event.stopPropagation()}
-                    onSubmit={event => {
-                        event.preventDefault()
-                        data.onSubmit()
-                    }}
-                >
-                    <label className="canvas-node-card__label" htmlFor={`canvas-node-prompt-${data.node.id}`}>
-                        {isEmptyMainNode ? 'Start from the main node' : 'Continue from this node'}
-                    </label>
-                    <textarea
-                        id={`canvas-node-prompt-${data.node.id}`}
-                        className="canvas-node-card__textarea nodrag"
-                        value={data.draft}
-                        onChange={event => data.onDraftChange(event.target.value)}
-                        placeholder={isEmptyMainNode ? 'Ask the main node to break this topic down…' : 'Ask a follow-up from this branch…'}
-                        disabled={data.sending || data.noProvidersConfigured}
-                        rows={isEmptyMainNode ? 5 : 4}
-                    />
-
-                    <div className="canvas-node-card__footer">
-                        <div className="canvas-node-card__provider">
-                            <label htmlFor={`canvas-node-provider-${data.node.id}`}>Provider</label>
-                            <select
-                                id={`canvas-node-provider-${data.node.id}`}
-                                className="auth-input nodrag"
-                                value={data.providerOverride}
-                                onChange={event => data.onProviderOverrideChange(event.target.value as LlmProviderId | '')}
-                                disabled={data.sending || data.noProvidersConfigured}
-                            >
-                                <option value="">
-                                    {data.defaultProvider ? `Use default (${getProviderLabel(data.defaultProvider)})` : 'Use default provider'}
-                                </option>
-                                {data.availableProviders.map(provider => (
-                                    <option key={provider} value={provider}>
-                                        {getProviderLabel(provider)}
-                                    </option>
-                                ))}
-                            </select>
-                        </div>
-
-                        {data.noProvidersConfigured ? (
-                            <div className="canvas-node-card__provider-empty">
-                                <span>Add a provider API key in Settings before expanding this node.</span>
-                                <button
-                                    type="button"
-                                    className="btn-pill-outline nodrag"
-                                    onClick={event => {
-                                        event.stopPropagation()
-                                        data.onOpenSettings()
-                                    }}
-                                >
-                                    Go To Settings
-                                </button>
-                            </div>
-                        ) : (
-                            <button
-                                type="submit"
-                                className="btn-pill-dark nodrag"
-                                disabled={data.sending || !data.draft.trim()}
-                            >
-                                {data.sending ? 'Expanding…' : isEmptyMainNode ? 'Generate Branches' : 'Expand Node'}
-                            </button>
-                        )}
-                    </div>
-                </form>
-            )}
-        </div>
-    )
-}
-
-const nodeTypes = {
-    canvasNode: GraphNodeCard,
-}
-
-function buildFlowState(graph: CanvasGraphResponse, selectedNodeId: number | null, draft: string, providerOverride: LlmProviderId | '', sending: boolean, noProvidersConfigured: boolean, onDraftChange: (value: string) => void, onProviderOverrideChange: (value: LlmProviderId | '') => void, onSubmit: (nodeId: number) => void, onOpenSettings: () => void): { nodes: Node<GraphNodeData>[]; edges: Edge[] } {
-    const sortedNodes = [...graph.nodes].sort((left, right) => {
-        if (left.depth !== right.depth) return left.depth - right.depth
-        if ((left.parentNodeId ?? -1) !== (right.parentNodeId ?? -1)) return (left.parentNodeId ?? -1) - (right.parentNodeId ?? -1)
-        if (left.siblingOrder !== right.siblingOrder) return left.siblingOrder - right.siblingOrder
-        return left.id - right.id
-    })
-
-    const nodesByDepth = new Map<number, CanvasGraphNode[]>()
-    const childCounts = new Map<number, number>()
-    for (const node of sortedNodes) {
-        const levelNodes = nodesByDepth.get(node.depth) ?? []
-        levelNodes.push(node)
-        nodesByDepth.set(node.depth, levelNodes)
-
-        if (node.parentNodeId !== null)
-            childCounts.set(node.parentNodeId, (childCounts.get(node.parentNodeId) ?? 0) + 1)
-    }
-
-    const horizontalGap = 320
-    const verticalGap = 260
-
-    const nodes: Node<GraphNodeData>[] = sortedNodes.map(node => {
-        const levelNodes = nodesByDepth.get(node.depth) ?? [node]
-        const index = levelNodes.findIndex(item => item.id === node.id)
-        const centeredOffset = ((levelNodes.length - 1) * horizontalGap) / 2
-
-        return {
-            id: String(node.id),
-            type: 'canvasNode',
-            position: {
-                x: index * horizontalGap - centeredOffset,
-                y: node.depth * verticalGap,
-            },
-            selected: node.id === selectedNodeId,
-            draggable: false,
-            connectable: false,
-            data: {
-                node,
-                childCount: childCounts.get(node.id) ?? 0,
-                draft: node.id === selectedNodeId ? draft : '',
-                providerOverride: node.id === selectedNodeId ? providerOverride : '',
-                sending: node.id === selectedNodeId && sending,
-                selected: node.id === selectedNodeId,
-                noProvidersConfigured,
-                defaultProvider: graph.defaultProvider,
-                availableProviders: graph.availableProviders,
-                onDraftChange,
-                onProviderOverrideChange,
-                onSubmit: () => onSubmit(node.id),
-                onOpenSettings,
-            },
-        }
-    })
-
-    const edges: Edge[] = sortedNodes
-        .filter(node => node.parentNodeId !== null)
-        .map(node => ({
-            id: `edge-${node.parentNodeId}-${node.id}`,
-            source: String(node.parentNodeId),
-            target: String(node.id),
-            selectable: false,
-            focusable: false,
-        }))
-
-    return { nodes, edges }
-}
-
-export default function CanvasGraphView({
-    graph,
-    selectedNodeId,
-    draft,
-    providerOverride,
-    sending,
-    noProvidersConfigured,
-    onSelectNode,
-    onDraftChange,
-    onProviderOverrideChange,
-    onSubmit,
-    onOpenSettings,
-}: CanvasGraphViewProps) {
-    const { nodes, edges } = buildFlowState(
-        graph,
-        selectedNodeId,
-        draft,
-        providerOverride,
-        sending,
-        noProvidersConfigured,
-        onDraftChange,
-        onProviderOverrideChange,
-        onSubmit,
-        onOpenSettings,
-    )
-
-    return (
-        <div className="canvas-graph-shell">
-            <ReactFlowProvider>
-                <ReactFlow
-                    key={`${graph.canvasId}-${graph.nodes.length}`}
-                    nodes={nodes}
-                    edges={edges}
-                    nodeTypes={nodeTypes}
-                    onNodeClick={(_, node) => onSelectNode(Number(node.id))}
-                    fitView
-                    nodesDraggable={false}
-                    nodesConnectable={false}
-                    elementsSelectable
-                    zoomOnDoubleClick={false}
-                    proOptions={{ hideAttribution: true }}
-                    className="canvas-graph-surface"
-                >
-                    <Background gap={24} color="rgba(17, 17, 17, 0.06)" />
-                    <Controls showInteractive={false} />
-                </ReactFlow>
-            </ReactFlowProvider>
-        </div>
-    )
-}
diff --git a/frontend/src/components/chat-canvas/CanvasSidebar.tsx b/frontend/src/components/chat-canvas/CanvasSidebar.tsx
new file mode 100644
index 0000000..19aacb9
--- /dev/null
+++ b/frontend/src/components/chat-canvas/CanvasSidebar.tsx
@@ -0,0 +1,194 @@
+import { useDeferredValue, useMemo, useState, type ReactNode } from 'react'
+import {
+    MoreHorizontal,
+    PanelLeft,
+    Plus,
+    Search,
+    Trash2,
+} from 'lucide-react'
+
+interface CanvasSidebarProps {
+    sessions: Array<{ id: string; title: string }>
+    activeSessionId: string | null
+    isLoading: boolean
+    isCreating: boolean
+    onSelect: (id: string) => void
+    onAdd: () => void
+    onDelete: (id: string) => void
+    footer?: ReactNode
+}
+
+export default function CanvasSidebar({
+    sessions,
+    activeSessionId,
+    isLoading,
+    isCreating,
+    onSelect,
+    onAdd,
+    onDelete,
+    footer,
+}: CanvasSidebarProps) {
+    const [collapsed, setCollapsed] = useState(false)
+    const [search, setSearch] = useState('')
+    const deferredSearch = useDeferredValue(search)
+
+    const filteredSessions = useMemo(() => {
+        const normalizedSearch = deferredSearch.trim().toLowerCase()
+        if (!normalizedSearch)
+            return sessions
+
+        return sessions.filter(session => session.title.toLowerCase().includes(normalizedSearch))
+    }, [deferredSearch, sessions])
+
+    if (collapsed) {
+        return (
+            <div className="flex h-full w-14 flex-col items-center border-r border-[hsl(var(--sidebar-border))] bg-[hsl(var(--sidebar-background))] py-4 transition-colors duration-700">
+                <button
+                    type="button"
+                    onClick={() => setCollapsed(false)}
+                    className="mb-4 rounded-lg p-2 text-muted-foreground transition-colors hover:bg-foreground/5 hover:text-foreground"
+                >
+                    <PanelLeft size={20} />
+                </button>
+
+                <div className="flex flex-1 flex-col items-center gap-2 overflow-y-auto py-2">
+                    {sessions.slice(0, 8).map(session => (
+                        <button
+                            key={session.id}
+                            type="button"
+                            onClick={() => onSelect(session.id)}
+                            title={session.title}
+                            className={[
+                                'flex h-8 w-8 items-center justify-center rounded-lg text-[10px] font-bold transition-all duration-200',
+                                activeSessionId === session.id
+                                    ? 'bg-foreground/10 text-foreground'
+                                    : 'text-muted-foreground hover:bg-foreground/5 hover:text-foreground',
+                            ].join(' ')}
+                        >
+                            {session.title.charAt(0).toUpperCase()}
+                        </button>
+                    ))}
+                </div>
+
+                <button
+                    type="button"
+                    onClick={onAdd}
+                    disabled={isCreating}
+                    className="mt-auto rounded-lg p-2 text-muted-foreground transition-colors hover:bg-foreground/5 hover:text-foreground disabled:cursor-wait disabled:opacity-50"
+                >
+                    <Plus size={20} />
+                </button>
+            </div>
+        )
+    }
+
+    return (
+        <div className="flex h-full w-[260px] flex-col border-r border-[hsl(var(--sidebar-border))] bg-[hsl(var(--sidebar-background))] transition-colors duration-700">
+            <div className="flex items-center justify-between p-4">
+                <span className="text-[15px] font-semibold tracking-tight text-foreground/90">Coliee AI</span>
+                <button
+                    type="button"
+                    onClick={() => setCollapsed(true)}
+                    className="rounded-lg p-1.5 text-muted-foreground transition-all duration-300 hover:bg-foreground/5 hover:text-foreground"
+                    title="Close sidebar"
+                >
+                    <PanelLeft size={18} strokeWidth={2} />
+                </button>
+            </div>
+
+            <div className="mb-2 px-3">
+                <button
+                    type="button"
+                    onClick={onAdd}
+                    disabled={isCreating}
+                    className="group flex h-11 w-full items-center gap-3 rounded-xl border border-foreground/[0.03] bg-foreground/[0.03] px-3 transition-all duration-300 hover:bg-foreground/[0.07] disabled:cursor-wait disabled:opacity-60"
+                >
+                    <div className="flex h-5 w-5 items-center justify-center">
+                        <Plus size={18} className="text-foreground/70 transition-colors group-hover:text-foreground" />
+                    </div>
+                    <span className="text-[14px] font-medium text-foreground/80 transition-colors group-hover:text-foreground">
+                        {isCreating ? 'Creating Canvas...' : 'New Canvas'}
+                    </span>
+                </button>
+            </div>
+
+            <div className="mb-6 px-3">
+                <div className="group relative">
+                    <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground/40 transition-colors group-focus-within:text-foreground/70" />
+                    <input
+                        type="text"
+                        placeholder="Search..."
+                        value={search}
+                        onChange={event => setSearch(event.target.value)}
+                        className="h-11 w-full rounded-xl border border-foreground/[0.02] bg-foreground/[0.02] pl-9 pr-3 text-[13px] text-foreground outline-none transition-all placeholder:text-muted-foreground/30 hover:bg-foreground/[0.04] focus:ring-1 focus:ring-foreground/10"
+                    />
+                </div>
+            </div>
+
+            <div className="custom-scrollbar flex-1 overflow-y-auto px-2">
+                <div className="mb-6">
+                    <p className="mb-2 px-3 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
+                        Canvases
+                    </p>
+
+                    <div className="space-y-0.5">
+                        {filteredSessions.map(session => {
+                            const isActive = activeSessionId === session.id
+
+                            return (
+                                <div key={session.id} className="group relative px-1">
+                                    <div
+                                        className={[
+                                            'flex items-center rounded-lg transition-all duration-200',
+                                            isActive
+                                                ? 'bg-foreground/10 text-foreground'
+                                                : 'text-muted-foreground hover:bg-foreground/5 hover:text-foreground',
+                                        ].join(' ')}
+                                    >
+                                        <button
+                                            type="button"
+                                            onClick={() => onSelect(session.id)}
+                                            className="min-w-0 flex-1 px-3 py-2 text-left text-[14px]"
+                                        >
+                                            <span className="block truncate pr-20 leading-relaxed tracking-tight">
+                                                {session.title}
+                                            </span>
+                                        </button>
+
+                                        <div className="absolute right-2 flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+                                            {sessions.length > 1 ? (
+                                                <button
+                                                    type="button"
+                                                    onClick={() => onDelete(session.id)}
+                                                    className="rounded-md p-1 text-muted-foreground transition-colors hover:text-destructive"
+                                                    title="Delete canvas"
+                                                >
+                                                    <Trash2 size={14} />
+                                                </button>
+                                            ) : null}
+                                            <MoreHorizontal size={14} className="text-muted-foreground" />
+                                        </div>
+                                    </div>
+                                </div>
+                            )
+                        })}
+                    </div>
+
+                    {!isLoading && filteredSessions.length === 0 ? (
+                        <div className="px-4 py-6 text-sm text-muted-foreground/70">
+                            {sessions.length === 0 ? 'No canvases yet.' : 'No canvases match that search.'}
+                        </div>
+                    ) : null}
+
+                    {isLoading ? (
+                        <div className="px-4 py-6 text-sm text-muted-foreground/70">Loading canvases...</div>
+                    ) : null}
+                </div>
+            </div>
+
+            <div className="border-t border-foreground/5 p-3 transition-colors duration-700">
+                {footer}
+            </div>
+        </div>
+    )
+}
diff --git a/frontend/src/components/chat-canvas/CanvasToolbar.tsx b/frontend/src/components/chat-canvas/CanvasToolbar.tsx
new file mode 100644
index 0000000..8da86c2
--- /dev/null
+++ b/frontend/src/components/chat-canvas/CanvasToolbar.tsx
@@ -0,0 +1,123 @@
+import { useEffect, useState } from 'react'
+import { MousePointer2, Pencil } from 'lucide-react'
+import type { ChatCanvasTheme } from './types'
+
+interface CanvasToolbarProps {
+    canvasName: string
+    onRename: (name: string) => void
+    theme: ChatCanvasTheme
+    setTheme: (theme: ChatCanvasTheme) => void
+}
+
+const THEME_OPTIONS: Array<{ id: ChatCanvasTheme; label: string; colorClassName: string; ringClassName: string }> = [
+    { id: 'midnight', label: 'Midnight', colorClassName: 'bg-[#080808]', ringClassName: 'ring-white/20' },
+    { id: 'monochrome', label: 'Monochrome', colorClassName: 'bg-white', ringClassName: 'ring-black/20' },
+    { id: 'slate', label: 'Slate', colorClassName: 'bg-[#1e293b]', ringClassName: 'ring-blue-400/20' },
+]
+
+export default function CanvasToolbar({ canvasName, onRename, theme, setTheme }: CanvasToolbarProps) {
+    const [editing, setEditing] = useState(false)
+    const [name, setName] = useState(canvasName)
+
+    useEffect(() => {
+        setName(canvasName)
+    }, [canvasName])
+
+    function save() {
+        const nextName = name.trim()
+        if (nextName)
+            onRename(nextName)
+
+        setEditing(false)
+        setName(nextName || canvasName)
+    }
+
+    return (
+        <div className="absolute left-0 right-0 top-0 z-10 flex h-16 items-center justify-between border-b border-foreground/5 bg-background/55 px-5 backdrop-blur-xl">
+            <div className="flex min-w-0 items-center gap-3">
+                {editing ? (
+                    <input
+                        autoFocus
+                        value={name}
+                        onChange={event => setName(event.target.value)}
+                        onKeyDown={event => {
+                            if (event.key === 'Enter')
+                                save()
+                            if (event.key === 'Escape') {
+                                setEditing(false)
+                                setName(canvasName)
+                            }
+                        }}
+                        onBlur={save}
+                        className="w-64 rounded-xl border border-foreground/15 bg-foreground/5 px-3 py-2 text-[15px] font-semibold text-foreground outline-none focus:ring-1 focus:ring-foreground/25"
+                    />
+                ) : (
+                    <button
+                        type="button"
+                        onClick={() => {
+                            setEditing(true)
+                            setName(canvasName)
+                        }}
+                        className="group flex min-w-0 items-center gap-3 rounded-xl px-3 py-2 transition-all hover:bg-foreground/5"
+                    >
+                        <div className="min-w-0 text-left">
+                            <p className="text-[10px] font-medium uppercase tracking-[0.28em] text-muted-foreground/70">
+                                Canvas
+                            </p>
+                            <div className="mt-0.5 flex items-center gap-2">
+                                <h2 className="truncate text-[16px] font-semibold tracking-tight text-foreground/95">
+                                    {canvasName}
+                                </h2>
+                                <Pencil size={12} className="shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
+                            </div>
+                        </div>
+                    </button>
+                )}
+            </div>
+
+            <div className="flex items-center gap-3">
+                <div className="flex items-center gap-2 rounded-full border border-foreground/10 bg-foreground/5 px-3 py-2">
+                    <span className="mr-1 text-[10px] font-medium uppercase tracking-[0.28em] text-muted-foreground/70">
+                        Theme
+                    </span>
+                    {THEME_OPTIONS.map(option => (
+                        <button
+                            key={option.id}
+                            type="button"
+                            onClick={() => setTheme(option.id)}
+                            title={option.label}
+                        className={[
+                            'flex items-center gap-2 rounded-full border px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.22em] transition-all duration-500 hover:scale-[1.02]',
+                            theme === option.id ? 'bg-foreground/10 border-foreground/15' : 'border-foreground/5 bg-transparent',
+                            theme === option.id
+                                ? `text-foreground ring-2 ring-offset-2 ring-offset-background ${option.ringClassName}`
+                                : 'text-foreground/55 opacity-70 hover:opacity-100',
+                        ].join(' ')}
+                    >
+                        <span
+                            aria-hidden="true"
+                            className={[
+                                'h-2.5 w-2.5 rounded-full ring-1 ring-inset',
+                                option.colorClassName,
+                                option.ringClassName,
+                            ].join(' ')}
+                        />
+                        <span>{option.label}</span>
+                    </button>
+                    ))}
+                </div>
+
+                <div className="h-7 w-px bg-foreground/10" />
+
+                <button
+                    type="button"
+                    title="Selection Mode"
+                    className="flex items-center gap-2 rounded-full border border-foreground/10 bg-foreground/10 px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.22em] text-foreground transition-all hover:bg-foreground/15"
+                >
+                    <MousePointer2 size={16} />
+                    <span>Select</span>
+                </button>
+            </div>
+        </div>
+    )
+}
diff --git a/frontend/src/components/chat-canvas/CanvasWorkspace.tsx b/frontend/src/components/chat-canvas/CanvasWorkspace.tsx
new file mode 100644
index 0000000..6f7228b
--- /dev/null
+++ b/frontend/src/components/chat-canvas/CanvasWorkspace.tsx
@@ -0,0 +1,284 @@
+import { useEffect, useMemo, useState } from 'react'
+import toast from 'react-hot-toast'
+import {
+    Background,
+    BackgroundVariant,
+    Controls,
+    MiniMap,
+    ReactFlow,
+    ReactFlowProvider,
+    useEdgesState,
+    useNodesState,
+    useReactFlow,
+    type NodeMouseHandler,
+    type OnNodeDrag,
+} from '@xyflow/react'
+import IdeaNode from './IdeaNode'
+import CanvasToolbar from './CanvasToolbar'
+import { exportSelectedNodesAsPdf } from './pdfExport'
+import type { ChatCanvasFlowEdge, ChatCanvasFlowNode, ChatCanvasTheme } from './types'
+
+interface CanvasWorkspaceProps {
+    canvasId: string | null
+    nodes: ChatCanvasFlowNode[]
+    edges: ChatCanvasFlowEdge[]
+    canvasName: string
+    theme: ChatCanvasTheme
+    setTheme: (theme: ChatCanvasTheme) => void
+    onRenameCanvas: (name: string) => void
+    onSelectNode: (nodeId: string) => void
+    onSaveNodePosition: (nodeId: string, positionX: number, positionY: number) => void
+}
+
+const NODE_TYPES = { ideaNode: IdeaNode }
+
+function CanvasFlow({
+    canvasId,
+    nodes,
+    edges,
+    canvasName,
+    theme,
+    setTheme,
+    onRenameCanvas,
+    onSelectNode,
+    onSaveNodePosition,
+}: CanvasWorkspaceProps) {
+    const [localNodes, setLocalNodes, onNodesChange] = useNodesState<ChatCanvasFlowNode>(nodes)
+    const [localEdges, setLocalEdges, onEdgesChange] = useEdgesState<ChatCanvasFlowEdge>(edges)
+    const [isPdfSelectionMode, setIsPdfSelectionMode] = useState(false)
+    const [selectedNodeIdsForExport, setSelectedNodeIdsForExport] = useState<Record<string, boolean>>({})
+    const [selectedSummariesForExport, setSelectedSummariesForExport] = useState<Record<string, boolean>>({})
+    const { fitView } = useReactFlow<ChatCanvasFlowNode, ChatCanvasFlowEdge>()
+
+    const canExportNodes = useMemo(
+        () => localNodes.filter(node => node.data.nodeType !== 'note'),
+        [localNodes],
+    )
+
+    useEffect(() => {
+        setLocalNodes(nodes)
+    }, [nodes, setLocalNodes])
+
+    useEffect(() => {
+        if (nodes.length > 0) {
+            // Use a slight delay to ensure the layout is ready
+            // We fit view when the canvas ID or name changes to ensure we focus on the content
+            const timer = setTimeout(() => {
+                void fitView({ duration: 800, padding: 0.2 })
+            }, 100)
+            return () => clearTimeout(timer)
+        }
+    }, [canvasId, fitView, nodes.length])
+
+    useEffect(() => {
+        setLocalEdges(edges)
+    }, [edges, setLocalEdges])
+
+    const handleNodeClick: NodeMouseHandler<ChatCanvasFlowNode> = (_, node) => {
+        onSelectNode(node.id.replace('chat-node-', ''))
+    }
+
+    const handleNodeDragStop: OnNodeDrag<ChatCanvasFlowNode> = (_, node) => {
+        onSaveNodePosition(
+            node.id.replace('chat-node-', ''),
+            node.position.x,
+            node.position.y,
+        )
+    }
+
+    function exitPdfSelectionMode() {
+        setIsPdfSelectionMode(false)
+        setSelectedNodeIdsForExport({})
+        setSelectedSummariesForExport({})
+    }
+
+    function startPdfSelectionMode(clickedNodeId: string, hasSummary: boolean) {
+        setIsPdfSelectionMode(true)
+        setSelectedNodeIdsForExport({ [clickedNodeId]: true })
+        setSelectedSummariesForExport(hasSummary ? { [clickedNodeId]: true } : {})
+    }
+
+    async function handleExportPdf() {
+        const orderedSelectedNodes = canExportNodes.filter(node => selectedNodeIdsForExport[node.id])
+        if (orderedSelectedNodes.length === 0)
+            return
+
+        try {
+            await exportSelectedNodesAsPdf({
+                canvasName,
+                nodes: orderedSelectedNodes,
+                selectedNodeIds: selectedNodeIdsForExport,
+                selectedSummaries: selectedSummariesForExport,
+            })
+            exitPdfSelectionMode()
+        } catch (error) {
+            console.error('PDF export failed', error)
+            toast.error('Unable to export PDF. Please try again.')
+        }
+    }
+
+    const nodesWithExportControls = useMemo(
+        () => localNodes.map(node => {
+            if (node.data.nodeType === 'note')
+                return node
+
+            const hasSummary = Boolean(node.data.exportSummaryContent?.trim())
+            return {
+                ...node,
+                data: {
+                    ...node.data,
+                    isExportSelectionMode: isPdfSelectionMode,
+                    isExportNodeSelected: Boolean(selectedNodeIdsForExport[node.id]),
+                    isExportSummaryIncluded: Boolean(selectedSummariesForExport[node.id]),
+                    onStartPdfExportSelection: () => startPdfSelectionMode(node.id, hasSummary),
+                    onToggleExportNodeSelected: (checked: boolean) => {
+                        setSelectedNodeIdsForExport(current => {
+                            if (checked)
+                                return { ...current, [node.id]: true }
+
+                            const next = { ...current }
+                            delete next[node.id]
+                            return next
+                        })
+                        if (!checked) {
+                            setSelectedSummariesForExport(current => {
+                                const next = { ...current }
+                                delete next[node.id]
+                                return next
+                            })
+                        }
+                    },
+                    onToggleExportSummaryIncluded: (checked: boolean) => {
+                        setSelectedSummariesForExport(current => {
+                            if (!hasSummary)
+                                return current
+                            if (checked)
+                                return { ...current, [node.id]: true }
+                            const next = { ...current }
+                            delete next[node.id]
+                            return next
+                        })
+                    },
+                    onExportAsText: () => {
+                        // placeholder for upcoming text export wiring
+                    },
+                },
+            }
+        }),
+        [isPdfSelectionMode, localNodes, selectedNodeIdsForExport, selectedSummariesForExport],
+    )
+
+    return (
+        <div className="relative h-full flex-1">
+            <CanvasToolbar
+                canvasName={canvasName}
+                onRename={onRenameCanvas}
+                theme={theme}
+                setTheme={setTheme}
+            />
+
+            <div
+                className="pointer-events-none absolute inset-0 z-0 opacity-40"
+                style={{ background: 'var(--gradient-glow)' }}
+            />
+
+            <ReactFlow<ChatCanvasFlowNode, ChatCanvasFlowEdge>
+                nodes={nodesWithExportControls}
+                edges={localEdges}
+                onNodesChange={onNodesChange}
+                onEdgesChange={onEdgesChange}
+                onNodeClick={handleNodeClick}
+                onNodeDragStop={handleNodeDragStop}
+                nodeTypes={NODE_TYPES}
+                fitView
+                fitViewOptions={{ padding: 0.2 }}
+                nodesConnectable={false}
+                noWheelClassName="nowheel"
+                minZoom={0.15}
+                maxZoom={2.5}
+                defaultEdgeOptions={{
+                    type: 'smoothstep',
+                    animated: true,
+                    style: { strokeWidth: 2, stroke: 'hsl(0 0% 40% / 0.5)' },
+                }}
+                proOptions={{ hideAttribution: true }}
+                className="bg-canvas-bg"
+            >
+                <Background
+                    variant={BackgroundVariant.Dots}
+                    gap={24}
+                    size={1}
+                    color="hsl(var(--canvas-dot))"
+                />
+                <Controls showInteractive={false} />
+                <MiniMap
+                    nodeColor={node => {
+                        if (node.data?.nodeType === 'note')
+                            return 'hsl(var(--warning) / 0.92)'
+
+                        if (node.data?.nodeType === 'response')
+                            return 'hsl(var(--accent) / 0.78)'
+
+                        return 'hsl(var(--foreground) / 0.78)'
+                    }}
+                    nodeStrokeColor={node => {
+                        if (node.data?.nodeType === 'note')
+                            return 'hsl(0 0% 8% / 0.65)'
+
+                        if (node.data?.nodeType === 'response')
+                            return 'hsl(var(--foreground) / 0.25)'
+
+                        return 'hsl(var(--foreground) / 0.35)'
+                    }}
+                    maskColor="hsl(var(--background) / 0.72)"
+                    nodeBorderRadius={8}
+                    pannable
+                    zoomable
+                    style={{ width: 220, height: 160, borderRadius: 18 }}
+                />
+            </ReactFlow>
+
+            {isPdfSelectionMode ? (
+                <div className="pointer-events-auto absolute inset-x-0 bottom-0 z-50 border-t border-foreground/10 bg-background/95 px-6 py-4 backdrop-blur-xl">
+                    <div className="mx-auto flex max-w-4xl items-center justify-between gap-4">
+                        <p className="text-sm font-medium text-foreground/80">
+                            Select nodes to export
+                        </p>
+                        <div className="flex items-center gap-3">
+                            <button
+                                type="button"
+                                className="rounded-full border border-foreground/15 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-foreground/70 transition-all hover:bg-foreground/5"
+                                onClick={exitPdfSelectionMode}
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                type="button"
+                                disabled={!Object.values(selectedNodeIdsForExport).some(Boolean)}
+                                className={[
+                                    'rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] transition-all',
+                                    Object.values(selectedNodeIdsForExport).some(Boolean)
+                                        ? 'bg-foreground text-background hover:scale-[1.01]'
+                                        : 'cursor-not-allowed bg-foreground/20 text-foreground/40',
+                                ].join(' ')}
+                                onClick={() => {
+                                    void handleExportPdf()
+                                }}
+                            >
+                                Export PDF
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            ) : null}
+        </div>
+    )
+}
+
+export default function CanvasWorkspace(props: CanvasWorkspaceProps) {
+    return (
+        <ReactFlowProvider>
+            <CanvasFlow {...props} />
+        </ReactFlowProvider>
+    )
+}
diff --git a/frontend/src/components/chat-canvas/IdeaNode.test.tsx b/frontend/src/components/chat-canvas/IdeaNode.test.tsx
new file mode 100644
index 0000000..5207427
--- /dev/null
+++ b/frontend/src/components/chat-canvas/IdeaNode.test.tsx
@@ -0,0 +1,119 @@
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import type { NodeProps } from '@xyflow/react'
+import IdeaNode from './IdeaNode'
+import type { ChatCanvasFlowNode } from './types'
+import type { CanvasModelOption } from '@/types'
+
+vi.mock('@xyflow/react', () => ({
+    Handle: () => null,
+    NodeResizer: () => null,
+    Position: {
+        Top: 'top',
+        Bottom: 'bottom',
+    },
+}))
+
+function renderNode(modelOptions: CanvasModelOption[]) {
+    const onProviderModelChange = vi.fn()
+    const data: ChatCanvasFlowNode['data'] = {
+        nodeId: 'node-1',
+        title: 'Launch plan',
+        nodeType: 'question',
+        content: '',
+        isCollapsed: false,
+        expandedWidth: 600,
+        expandedHeight: 520,
+        loading: false,
+        noteGenerating: false,
+        messages: [],
+        preferredProvider: 'gemini',
+        preferredModel: 'gemini-3.1-flash-lite-preview',
+        modelOptions,
+        canDelete: true,
+        showFloatingLabel: true,
+        onCreateChild: vi.fn(),
+        onDelete: vi.fn(),
+        onUpdateTitle: vi.fn(),
+        onUpdateContent: vi.fn(),
+        onSendMessage: vi.fn().mockResolvedValue(true),
+        onSendImagePrompt: vi.fn().mockResolvedValue(true),
+        onGenerateNote: vi.fn(),
+        onToggleCollapse: vi.fn(),
+        onProviderModelChange,
+        onEditMessage: vi.fn().mockResolvedValue(true),
+        onMoveMessagesToBranch: vi.fn().mockResolvedValue(true),
+        onResize: vi.fn(),
+    }
+
+    const nodeProps = {
+        id: 'chat-node-1',
+        selected: true,
+        data,
+        position: { x: 0, y: 0 },
+        dragging: false,
+        zIndex: 0,
+        isConnectable: false,
+        targetPosition: 'top',
+        sourcePosition: 'bottom',
+        width: 600,
+        height: 520,
+    } as unknown as NodeProps<ChatCanvasFlowNode>
+
+    return {
+        ...render(<IdeaNode {...nodeProps} />),
+        onProviderModelChange,
+    }
+}
+
+describe('IdeaNode', () => {
+    it('opens the model picker popup and selects a model', async () => {
+        const user = userEvent.setup()
+
+        const { onProviderModelChange } = renderNode([
+            { provider: 'openai', modelId: 'gpt-5.2', label: 'GPT-5.2', hint: 'Flagship reasoning and agentic work', badge: 'OPENAI' },
+            { provider: 'claude', modelId: 'claude-sonnet-4-20250514', label: 'Claude Sonnet 4', hint: 'Strong general-purpose reasoning', badge: 'CLAUDE' },
+            { provider: 'gemini', modelId: 'gemini-2.5-flash', label: 'Gemini 2.5 Flash', hint: 'Next-gen speed and reasoning', badge: 'GEMINI' },
+            { provider: 'gemini', modelId: 'gemini-3.1-flash-lite-preview', label: 'Gemini 3.1 Flash-Lite Preview', hint: 'Low-latency and lightweight', badge: 'GEMINI' },
+        ])
+
+        await user.click(screen.getByTitle('Select AI Model'))
+
+        expect(screen.getByRole('dialog', { name: /select ai model/i })).toBeInTheDocument()
+        const dialog = screen.getByRole('dialog', { name: /select ai model/i })
+
+        expect(within(dialog).getByText('OpenAI')).toBeInTheDocument()
+        expect(within(dialog).getByText('Claude')).toBeInTheDocument()
+        expect(within(dialog).getByText('Gemini', { selector: '.canvas-model-picker-dialog__group-label' })).toBeInTheDocument()
+        expect(within(dialog).getByText('GPT-5.2')).toBeInTheDocument()
+        expect(within(dialog).getByText('Claude Sonnet 4')).toBeInTheDocument()
+        expect(within(dialog).getByText('Gemini 3.1 Flash-Lite Preview', { selector: '.canvas-model-picker-dialog__summary-title' })).toBeInTheDocument()
+        expect(within(dialog).getByRole('button', { name: /Gemini 3.1 Flash-Lite Preview/ })).toBeInTheDocument()
+
+        await user.click(screen.getByRole('button', { name: /Claude Sonnet 4/ }))
+
+        expect(onProviderModelChange).toHaveBeenCalledWith('claude', 'claude-sonnet-4-20250514')
+        expect(screen.queryByRole('dialog', { name: /select ai model/i })).not.toBeInTheDocument()
+    })
+
+    it('closes the popup on escape and backdrop click', async () => {
+        const user = userEvent.setup()
+
+        renderNode([
+            { provider: 'openai', modelId: 'gpt-5.2', label: 'GPT-5.2', hint: 'Flagship reasoning and agentic work', badge: 'OPENAI' },
+        ])
+
+        await user.click(screen.getByTitle('Select AI Model'))
+        expect(screen.getByRole('dialog', { name: /select ai model/i })).toBeInTheDocument()
+
+        await user.keyboard('{Escape}')
+        expect(screen.queryByRole('dialog', { name: /select ai model/i })).not.toBeInTheDocument()
+
+        await user.click(screen.getByTitle('Select AI Model'))
+        expect(screen.getByRole('dialog', { name: /select ai model/i })).toBeInTheDocument()
+
+        await user.click(screen.getByRole('dialog', { name: /select ai model/i }).parentElement as HTMLElement)
+        expect(screen.queryByRole('dialog', { name: /select ai model/i })).not.toBeInTheDocument()
+    })
+})
diff --git a/frontend/src/components/chat-canvas/IdeaNode.tsx b/frontend/src/components/chat-canvas/IdeaNode.tsx
new file mode 100644
index 0000000..79e4ef0
--- /dev/null
+++ b/frontend/src/components/chat-canvas/IdeaNode.tsx
@@ -0,0 +1,1370 @@
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import { Handle, NodeResizer, Position, type NodeProps } from '@xyflow/react'
+import { createPortal } from 'react-dom'
+import {
+    ArrowUpRight,
+    AlertCircle,
+    Brain,
+    Camera,
+    ChevronDown,
+    ChevronUp,
+    Check,
+    CheckSquare,
+    Ellipsis,
+    GitBranch,
+    Image as ImageIcon,
+    ListChecks,
+    MessageCircle,
+    MoveRight,
+    Plus,
+    Pencil,
+    RefreshCcw,
+    Search,
+    Sparkles,
+    StickyNote,
+    Trash2,
+    X,
+    Zap,
+} from 'lucide-react'
+import type { ChatCanvasFlowNode } from './types'
+import { getCurrentModelOption, PROVIDER_LABELS, PROVIDER_ORDER } from '@/lib/modelCatalog'
+
+const TYPE_LABELS = {
+    question: 'Main Node',
+    response: 'Sub Node',
+    note: 'Note',
+} as const
+
+function getProviderIcon(provider: string) {
+    switch (provider) {
+        case 'claude':
+            return <Brain size={18} className="text-orange-400" />
+        case 'openai':
+            return <MessageCircle size={18} className="text-emerald-400" />
+        case 'lmstudio':
+            return <Sparkles size={18} className="text-sky-400" />
+        default:
+            return <Zap size={18} className="text-sky-400" />
+    }
+}
+
+function IdeaNode({ id, data, selected }: NodeProps<ChatCanvasFlowNode>) {
+    const [editingLabel, setEditingLabel] = useState(false)
+    const [draftLabel, setDraftLabel] = useState(data.title)
+    const [chatInput, setChatInput] = useState('')
+    const [selectedImage, setSelectedImage] = useState<string | null>(null)
+    const [showAttachmentMenu, setShowAttachmentMenu] = useState(false)
+    const [showModelSelector, setShowModelSelector] = useState(false)
+    const [isImageMode, setIsImageMode] = useState(false)
+    const [isFocused, setIsFocused] = useState(false)
+    const [sendError, setSendError] = useState<string | null>(null)
+    const [isRetryingPrompt, setIsRetryingPrompt] = useState(false)
+    const [isSavingEditedMessage, setIsSavingEditedMessage] = useState(false)
+    const [editingMessageId, setEditingMessageId] = useState<number | string | null>(null)
+    const [editingMessageDraft, setEditingMessageDraft] = useState('')
+    const [editingMessageError, setEditingMessageError] = useState<string | null>(null)
+    const [isSelectionMode, setIsSelectionMode] = useState(false)
+    const [selectedMessageIds, setSelectedMessageIds] = useState<Array<number | string>>([])
+    const [selectionError, setSelectionError] = useState<string | null>(null)
+    const [movingSelection, setMovingSelection] = useState(false)
+    const [showTransferChooser, setShowTransferChooser] = useState(false)
+    const [showExportMenu, setShowExportMenu] = useState(false)
+    const fileInputRef = useRef<HTMLInputElement | null>(null)
+    const attachmentMenuRef = useRef<HTMLDivElement | null>(null)
+    const scrollRef = useRef<HTMLDivElement | null>(null)
+    const modelSearchInputRef = useRef<HTMLInputElement | null>(null)
+    const chatInputRef = useRef<HTMLTextAreaElement | null>(null)
+    const exportMenuRef = useRef<HTMLDivElement | null>(null)
+
+    useEffect(() => {
+        if (selected && !data.loading && data.nodeType !== 'note') {
+            const timer = setTimeout(() => {
+                chatInputRef.current?.focus()
+            }, 50)
+            return () => clearTimeout(timer)
+        }
+    }, [selected, data.loading, data.nodeType])
+
+    useEffect(() => {
+        if (scrollRef.current && data.nodeType !== 'note')
+            scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }, [data.loading, data.messages, data.showAssistantTyping, data.nodeType])
+
+    useEffect(() => {
+        setSelectedMessageIds(current => current.filter(messageId => data.messages.some(message => message.id === messageId)))
+    }, [data.messages])
+
+    useEffect(() => {
+        function handlePointerDown(event: MouseEvent) {
+            const target = event.target as Node
+
+            if (attachmentMenuRef.current && !attachmentMenuRef.current.contains(target))
+                setShowAttachmentMenu(false)
+            if (exportMenuRef.current && !exportMenuRef.current.contains(target))
+                setShowExportMenu(false)
+        }
+
+        document.addEventListener('mousedown', handlePointerDown)
+        return () => document.removeEventListener('mousedown', handlePointerDown)
+    }, [])
+
+    useEffect(() => {
+        if (!showModelSelector || typeof document === 'undefined')
+            return
+
+        function handleKeyDown(event: KeyboardEvent) {
+            if (event.key === 'Escape')
+                setShowModelSelector(false)
+        }
+
+        document.body.classList.add('canvas-model-picker-open')
+        window.addEventListener('keydown', handleKeyDown)
+
+        const timer = setTimeout(() => {
+            modelSearchInputRef.current?.focus()
+        }, 10)
+
+        return () => {
+            clearTimeout(timer)
+            document.body.classList.remove('canvas-model-picker-open')
+            window.removeEventListener('keydown', handleKeyDown)
+        }
+    }, [showModelSelector])
+
+    const [modelSearchQuery, setModelSearchQuery] = useState('')
+
+    const closeModelSelector = useCallback(() => {
+        setShowModelSelector(false)
+        setModelSearchQuery('')
+    }, [])
+
+    const currentModelOption = getCurrentModelOption(data.preferredProvider, data.preferredModel, data.modelOptions)
+    const groupedModelOptions = useMemo(() => {
+        const query = modelSearchQuery.trim().toLowerCase()
+        return PROVIDER_ORDER
+            .map(provider => ({
+                provider,
+                label: PROVIDER_LABELS[provider],
+                options: data.modelOptions.filter(option => {
+                    if (option.provider !== provider) return false
+                    if (!query) return true
+                    return (
+                        option.label.toLowerCase().includes(query) ||
+                        option.hint.toLowerCase().includes(query) ||
+                        option.modelId.toLowerCase().includes(query)
+                    )
+                }),
+            }))
+            .filter(group => group.options.length > 0)
+    }, [data.modelOptions, modelSearchQuery])
+    const placeholder = useMemo(() => {
+        if (data.loading)
+            return 'Intelligence Thinking...'
+
+        if (data.title && data.title !== TYPE_LABELS[data.nodeType])
+            return `Developing ${data.title}...`
+
+        const prompts = [
+            'Where does this path lead?',
+            'Refine this thought...',
+            'Deepening the perspective...',
+            'What’s the missing piece?',
+            'Exploring new angles...',
+            'Evolving the idea...',
+        ]
+
+        const index = id.split('').reduce((sum, char) => sum + char.charCodeAt(0), 0) % prompts.length
+        return prompts[index]
+    }, [data.loading, data.nodeType, data.title, id])
+
+    const latestUserMessageId = useMemo(() => {
+        for (let index = data.messages.length - 1; index >= 0; index -= 1) {
+            const message = data.messages[index]
+            if (message.role === 'user')
+                return message.id
+        }
+
+        return null
+    }, [data.messages])
+    const hasSelectedMessages = selectedMessageIds.length > 0
+
+    const handleSaveLabel = useCallback(() => {
+        const nextLabel = draftLabel.trim()
+        if (nextLabel && nextLabel !== data.title)
+            data.onUpdateTitle(nextLabel)
+
+        setEditingLabel(false)
+        setDraftLabel(nextLabel || data.title)
+    }, [data, draftLabel])
+
+    async function handleSendChat() {
+        if (data.loading || isRetryingPrompt)
+            return
+
+        if (isImageMode) {
+            const prompt = chatInput.trim()
+            if (!prompt)
+                return
+
+            const draftPrompt = prompt
+            setChatInput('')
+            setSendError(null)
+            const succeeded = await data.onSendImagePrompt(prompt)
+            if (succeeded) {
+                setIsImageMode(false)
+                return
+            }
+
+            setChatInput(draftPrompt)
+            setSendError('The request failed. You can retry with the same draft or change the model first.')
+            return
+        }
+
+        if (!chatInput.trim() && !selectedImage)
+            return
+
+        const draftText = chatInput.trim()
+        const draftImage = selectedImage
+        setChatInput('')
+        setSelectedImage(null)
+        setIsImageMode(false)
+        setSendError(null)
+
+        const succeeded = await data.onSendMessage(draftText, draftImage ?? undefined)
+        if (succeeded)
+            return
+
+        setChatInput(draftText)
+        setSelectedImage(draftImage)
+        setSendError('The request failed. You can retry with the same draft or change the model first.')
+    }
+
+    async function handleRetryPrompt(messageContent: string, imageUrl?: string | null) {
+        if (data.loading || isRetryingPrompt)
+            return
+
+        setIsRetryingPrompt(true)
+        try {
+            const succeeded = await data.onSendMessage(messageContent, imageUrl ?? undefined)
+            if (succeeded) {
+                setSendError(null)
+                return
+            }
+
+            setSendError('The request failed. You can retry with the same draft or change the model first.')
+        } finally {
+            setIsRetryingPrompt(false)
+        }
+    }
+
+    async function handleSaveEditedMessage() {
+        if (editingMessageId === null || isSavingEditedMessage)
+            return
+
+        const nextContent = editingMessageDraft.trim()
+        if (!nextContent) {
+            setEditingMessageError('Message content is required.')
+            return
+        }
+
+        setIsSavingEditedMessage(true)
+        try {
+            const succeeded = await data.onEditMessage(editingMessageId, nextContent)
+            if (succeeded) {
+                setEditingMessageId(null)
+                setEditingMessageDraft('')
+                setEditingMessageError(null)
+                return
+            }
+
+            setEditingMessageError('Unable to save this response right now.')
+        } finally {
+            setIsSavingEditedMessage(false)
+        }
+    }
+
+    function startEditingMessage(messageId: number | string, content: string) {
+        setEditingMessageId(messageId)
+        setEditingMessageDraft(content)
+        setEditingMessageError(null)
+    }
+
+    function toggleMessageSelection(messageId: number | string) {
+        setSelectionError(null)
+        setSelectedMessageIds(current => (
+            current.includes(messageId)
+                ? current.filter(id => id !== messageId)
+                : [...current, messageId]
+        ))
+    }
+
+    async function handleMoveSelectionToBranch(transferMode: 'move' | 'copy') {
+        if (selectedMessageIds.length === 0 || movingSelection)
+            return
+
+        setMovingSelection(true)
+        setSelectionError(null)
+        try {
+            const succeeded = await data.onMoveMessagesToBranch(selectedMessageIds, transferMode)
+            if (succeeded) {
+                setSelectedMessageIds([])
+                setIsSelectionMode(false)
+                setShowTransferChooser(false)
+                return
+            }
+
+            setSelectionError('Unable to transfer these messages right now.')
+        } finally {
+            setMovingSelection(false)
+        }
+    }
+
+    function handleImageSelection(event: React.ChangeEvent<HTMLInputElement>) {
+        const file = event.target.files?.[0]
+        if (!file)
+            return
+
+        const reader = new FileReader()
+        reader.onloadend = () => {
+            setSelectedImage(typeof reader.result === 'string' ? reader.result : null)
+        }
+        reader.readAsDataURL(file)
+    }
+
+    const nodeShellClassName = data.nodeType === 'note'
+        ? 'bg-[#d4a34d] text-slate-900 border-yellow-600/30 hover:border-yellow-600/40'
+        : 'border-[hsl(var(--node-border))]/50 text-foreground hover:border-[hsl(var(--node-border))]'
+
+    const modelPickerDialog = showModelSelector && typeof document !== 'undefined'
+        ? createPortal(
+                <div
+                    className="canvas-model-picker-backdrop"
+                    onClick={closeModelSelector}
+                >
+                <div
+                    className="canvas-model-picker-dialog"
+                    role="dialog"
+                    aria-modal="true"
+                    aria-labelledby="canvas-model-picker-title"
+                    onClick={event => event.stopPropagation()}
+                >
+                    <div className="canvas-model-picker-dialog__header">
+                        <div className="canvas-model-picker-dialog__heading">
+                            <p className="canvas-model-picker-dialog__eyebrow">Model</p>
+                            <h2 id="canvas-model-picker-title" className="canvas-model-picker-dialog__title">Select AI model</h2>
+                            <p className="canvas-model-picker-dialog__copy">
+                                Choose the model that shapes this node’s writing, reasoning, and branching.
+                            </p>
+                        </div>
+
+                        <div className="canvas-model-picker-dialog__header-actions">
+                            <div className="canvas-model-picker-dialog__search">
+                                <Search size={16} className="canvas-model-picker-dialog__search-icon" />
+                                <input
+                                    ref={modelSearchInputRef}
+                                    type="text"
+                                    className="canvas-model-picker-dialog__search-input"
+                                    placeholder="Search models..."
+                                    value={modelSearchQuery}
+                                    onChange={event => setModelSearchQuery(event.target.value)}
+                                    onClick={event => event.stopPropagation()}
+                                />
+                                {modelSearchQuery ? (
+                                    <button
+                                        type="button"
+                                        className="canvas-model-picker-dialog__search-clear"
+                                        onClick={() => setModelSearchQuery('')}
+                                    >
+                                        <X size={12} />
+                                    </button>
+                                ) : null}
+                            </div>
+
+                        <button
+                            type="button"
+                            className="canvas-model-picker-dialog__close"
+                            onClick={closeModelSelector}
+                            aria-label="Close model picker"
+                        >
+                                <X size={18} />
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className="canvas-model-picker-dialog__body">
+                        <aside className="canvas-model-picker-dialog__summary">
+                            <div className="canvas-model-picker-dialog__summary-frame">
+                                <div className="canvas-model-picker-dialog__summary-top">
+                                    <span className="canvas-model-picker-dialog__summary-label">Current selection</span>
+                                    <span className="canvas-model-picker-dialog__summary-badge">
+                                        {currentModelOption.badge}
+                                    </span>
+                                </div>
+
+                                <div className="canvas-model-picker-dialog__summary-icon">
+                                    {getProviderIcon(currentModelOption.provider)}
+                                </div>
+
+                                <div className="canvas-model-picker-dialog__summary-title">
+                                    {currentModelOption.label}
+                                </div>
+                                <div className="canvas-model-picker-dialog__summary-hint">
+                                    {currentModelOption.hint}
+                                </div>
+                                <div className="canvas-model-picker-dialog__summary-meta">
+                                    <span>{PROVIDER_LABELS[currentModelOption.provider]}</span>
+                                    <span>{currentModelOption.modelId}</span>
+                                </div>
+                            </div>
+
+                            <p className="canvas-model-picker-dialog__summary-note">
+                                This selection is applied immediately to new prompts, branches, and node generation.
+                            </p>
+                        </aside>
+
+                        <div className="canvas-model-picker-dialog__list nowheel custom-scrollbar">
+                            {groupedModelOptions.map(group => (
+                                <section key={group.provider} className="canvas-model-picker-dialog__group">
+                                    <div className="canvas-model-picker-dialog__group-header">
+                                        <div className="canvas-model-picker-dialog__group-label">
+                                            {group.label}
+                                        </div>
+                                        <div className="canvas-model-picker-dialog__group-count">
+                                            {group.options.length} model{group.options.length === 1 ? '' : 's'}
+                                        </div>
+                                    </div>
+
+                                    <div className="canvas-model-picker-dialog__options">
+                                        {group.options.map(option => {
+                                            const isSelected = currentModelOption.provider === option.provider && currentModelOption.modelId === option.modelId
+
+                                            return (
+                                                <button
+                                                    key={`${option.provider}:${option.modelId}`}
+                                                    type="button"
+                                                    onClick={() => {
+                                                        data.onProviderModelChange(option.provider, option.modelId)
+                                                        closeModelSelector()
+                                                    }}
+                                                    className={[
+                                                        'canvas-model-picker-dialog__option',
+                                                        isSelected ? 'canvas-model-picker-dialog__option--selected' : '',
+                                                    ].join(' ')}
+                                                >
+                                                    <span className="canvas-model-picker-dialog__icon">
+                                                        {getProviderIcon(option.provider)}
+                                                    </span>
+                                                    <span className="min-w-0 flex-1 text-left">
+                                                        <span className="flex items-center gap-2">
+                                                            <span className="block truncate text-[14px] font-medium text-foreground">
+                                                                {option.label}
+                                                            </span>
+                                                            {isSelected ? (
+                                                                <span className="canvas-model-picker-dialog__selected-chip">
+                                                                    Active
+                                                                </span>
+                                                            ) : null}
+                                                        </span>
+                                                        <span className="block truncate text-[11px] text-foreground/45">
+                                                            {option.hint}
+                                                        </span>
+                                                    </span>
+                                                </button>
+                                            )
+                                        })}
+                                    </div>
+                                </section>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>,
+            document.body,
+        )
+        : null
+
+    return (
+        <div className="group relative h-full w-full">
+            <NodeResizer
+                minWidth={data.nodeType === 'note' ? 320 : 420}
+                minHeight={data.nodeType === 'note' ? 280 : 320}
+                isVisible={data.nodeType !== 'note' || !data.isCollapsed}
+                color="transparent"
+                onResizeEnd={(_, params) => data.onResize(params.width, params.height)}
+                handleStyle={{
+                    width: 32,
+                    height: 32,
+                    bottom: -4,
+                    right: -4,
+                    borderRadius: '50%',
+                    backgroundColor: 'transparent',
+                    border: 'none',
+                    boxShadow: 'none',
+                    cursor: 'nwse-resize',
+                    zIndex: 50,
+                }}
+                lineStyle={{ borderWidth: 0, borderColor: 'transparent' }}
+            />
+
+            <div className={[
+                'pointer-events-none absolute -bottom-[12px] -right-[12px] z-10 p-2 transition-all duration-700',
+                selected ? 'scale-100 opacity-80 text-foreground' : 'text-foreground/60 opacity-20 group-hover:opacity-40',
+            ].join(' ')}>
+                <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M64 12 A 52 52 0 0 1 12 64"
+                        stroke="currentColor"
+                        strokeWidth="1.2"
+                        strokeLinecap="round"
+                    />
+                </svg>
+            </div>
+
+            {data.showFloatingLabel && !(data.nodeType === 'note' && data.isCollapsed) ? (
+                <div className="pointer-events-auto absolute -top-10 left-0 flex select-none items-center gap-3">
+                    <div className="opacity-[0.4] transition-opacity duration-700 group-hover:opacity-[0.8]">
+                        {data.loading ? <Sparkles size={16} className="animate-spin text-foreground/40" /> : null}
+                    </div>
+
+                    {editingLabel ? (
+                        <input
+                            autoFocus
+                            className="nodrag w-[180px] rounded border-none bg-transparent text-[13px] font-medium uppercase tracking-[0.25em] text-foreground/80 outline-none"
+                            value={draftLabel}
+                            onChange={event => setDraftLabel(event.target.value)}
+                            onKeyDown={event => {
+                                if (event.key === 'Enter')
+                                    handleSaveLabel()
+                                if (event.key === 'Escape') {
+                                    setEditingLabel(false)
+                                    setDraftLabel(data.title)
+                                }
+                            }}
+                            onBlur={handleSaveLabel}
+                        />
+                    ) : (
+                        <span
+                            className="cursor-pointer text-[13px] font-medium uppercase tracking-[0.25em] text-foreground/40 transition-all duration-500 hover:text-foreground/80"
+                            onDoubleClick={() => {
+                                setDraftLabel(data.title)
+                                setEditingLabel(true)
+                            }}
+                        >
+                            {data.title || TYPE_LABELS[data.nodeType]}
+                        </span>
+                    )}
+                </div>
+            ) : null}
+
+            <div
+                className={[
+                    'node-appear relative flex h-full w-full flex-col overflow-hidden rounded-[3rem] border backdrop-blur-3xl transition-all duration-1000',
+                    nodeShellClassName,
+                    selected ? 'chat-canvas-node--selected' : 'shadow-2xl shadow-background/90',
+                    data.nodeType === 'note' && data.isCollapsed ? 'chat-canvas-node-note--collapsed' : '',
+                ].join(' ')}
+                style={data.nodeType === 'note' ? (data.isCollapsed ? { borderRadius: '50%', backgroundColor: '#d4a34d' } : undefined) : { backgroundColor: 'hsl(var(--node-bg) / 0.95)' }}
+            >
+                {data.nodeType !== 'note' ? (
+                    <div ref={exportMenuRef} className="nodrag absolute right-6 top-6 z-30">
+                        <button
+                            type="button"
+                            className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-foreground/10 bg-[hsl(var(--node-bg))]/90 text-foreground/70 shadow-xl transition-all hover:border-foreground/30 hover:text-foreground"
+                            title="Node export options"
+                            onClick={event => {
+                                event.preventDefault()
+                                event.stopPropagation()
+                                setShowExportMenu(current => !current)
+                            }}
+                            onMouseDown={event => event.preventDefault()}
+                            onPointerDown={event => event.preventDefault()}
+                        >
+                            <Ellipsis size={16} />
+                        </button>
+
+                        {showExportMenu ? (
+                            <div className="absolute right-0 top-11 w-48 overflow-hidden rounded-2xl border border-foreground/10 bg-[hsl(var(--node-bg))]/95 p-1.5 shadow-2xl backdrop-blur-xl">
+                                <button
+                                    type="button"
+                                    className="flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm text-foreground/85 transition-all hover:bg-foreground/5"
+                                    onClick={() => {
+                                        setShowExportMenu(false)
+                                        data.onStartPdfExportSelection?.()
+                                    }}
+                                >
+                                    <span aria-hidden>📄</span>
+                                    <span>Export as PDF</span>
+                                </button>
+                                <button
+                                    type="button"
+                                    className="flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm text-foreground/85 transition-all hover:bg-foreground/5"
+                                    onClick={() => {
+                                        setShowExportMenu(false)
+                                        data.onExportAsText?.()
+                                    }}
+                                >
+                                    <span aria-hidden>📝</span>
+                                    <span>Export as Text</span>
+                                </button>
+                            </div>
+                        ) : null}
+                    </div>
+                ) : null}
+
+                {data.nodeType !== 'note' && data.isExportSelectionMode ? (
+                    <div className="nodrag absolute left-6 top-6 z-30 rounded-2xl border border-foreground/10 bg-[hsl(var(--node-bg))]/90 px-3 py-2 shadow-xl backdrop-blur-md">
+                        <label className="flex cursor-pointer items-center gap-2 text-xs font-semibold uppercase tracking-[0.12em] text-foreground/75">
+                            <input
+                                type="checkbox"
+                                checked={Boolean(data.isExportNodeSelected)}
+                                onChange={event => data.onToggleExportNodeSelected?.(event.target.checked)}
+                            />
+                            <span>Select node</span>
+                        </label>
+                        {data.exportSummaryContent?.trim() ? (
+                            <label className="mt-2 flex cursor-pointer items-center gap-2 pl-2 text-[10px] font-medium uppercase tracking-[0.1em] text-amber-200/90">
+                                <input
+                                    type="checkbox"
+                                    checked={Boolean(data.isExportSummaryIncluded)}
+                                    disabled={!data.isExportNodeSelected}
+                                    onChange={event => data.onToggleExportSummaryIncluded?.(event.target.checked)}
+                                />
+                                <span>Include AI Summary</span>
+                            </label>
+                        ) : null}
+                    </div>
+                ) : null}
+
+                <Handle
+                    type="target"
+                    position={Position.Top}
+                    className="!-top-[3px] !h-1.5 !w-1.5 !border-none !bg-foreground/5 !transition-colors hover:!bg-foreground/20"
+                />
+
+                <div className={`flex min-h-0 flex-1 flex-col ${data.nodeType === 'note' && data.isCollapsed ? 'pt-0' : 'pt-12'}`}>
+                    <div
+                        ref={scrollRef}
+                        className={`nowheel custom-scrollbar flex-1 overflow-y-auto ${data.nodeType === 'note' ? 'p-0' : 'space-y-12 px-12 py-10'}`}
+                    >
+                        {data.nodeType === 'note' ? (
+                            <div
+                                className={[
+                                    'group/note-body relative flex h-full min-h-0 flex-1 cursor-text flex-col overflow-hidden',
+                                    data.isCollapsed ? 'px-8 py-8' : 'px-10 py-10',
+                                ].join(' ')}
+                            >
+                                <div
+                                    className="pointer-events-none absolute inset-x-0 top-0 h-full opacity-[0.05] transition-opacity duration-700 group-hover/note-body:opacity-[0.08]"
+                                    style={{
+                                        backgroundImage: 'repeating-linear-gradient(transparent, transparent 37px, #000 37px, #000 38px)',
+                                        backgroundSize: '100% 37.8px',
+                                    }}
+                                />
+
+                                <div className="relative z-10 flex min-h-0 flex-1 flex-col">
+                                    <div className="flex items-start justify-between gap-4">
+                                        <div className="min-w-0">
+                                            <p className="text-[11px] font-semibold uppercase tracking-[0.3em] text-slate-900/30">
+                                                {data.isCollapsed ? 'Collapsed note' : 'Working note'}
+                                            </p>
+                                            <h3 className="mt-2 truncate text-[24px] font-medium leading-tight text-slate-900">
+                                                {data.title}
+                                            </h3>
+                                        </div>
+
+                                        <button
+                                            type="button"
+                                            className="nodrag inline-flex items-center gap-2 rounded-full border border-slate-900/10 bg-white/60 px-4 py-2 text-[12px] font-semibold uppercase tracking-[0.22em] text-slate-900/60 shadow-[0_12px_30px_rgba(0,0,0,0.08)] backdrop-blur-sm transition-all duration-500 hover:border-slate-900/20 hover:bg-white/80 hover:text-slate-900"
+                                            onClick={event => {
+                                                event.preventDefault()
+                                                event.stopPropagation()
+                                                data.onToggleCollapse()
+                                            }}
+                                            onMouseDown={event => event.preventDefault()}
+                                            onPointerDown={event => event.preventDefault()}
+                                            title={data.isCollapsed ? 'Expand note' : 'Collapse note'}
+                                        >
+                                            {data.isCollapsed ? <ChevronDown size={16} /> : <ChevronUp size={16} />}
+                                            <span>{data.isCollapsed ? 'Expand' : 'Collapse'}</span>
+                                        </button>
+                                    </div>
+
+                                    {data.noteGenerating ? (
+                                        <div className="flex min-h-0 flex-1 items-center justify-center px-6 py-10">
+                                            <div className="flex flex-col items-center gap-5 rounded-[2rem] border border-slate-900/10 bg-slate-50/60 px-8 py-7 text-center shadow-[0_20px_60px_rgba(0,0,0,0.08)] backdrop-blur-sm">
+                                                <div className="flex items-center gap-2">
+                                                    <div className="h-2.5 w-2.5 animate-bounce rounded-full bg-slate-900/25 [animation-delay:-0.2s]" />
+                                                    <div className="h-2.5 w-2.5 animate-bounce rounded-full bg-slate-900/25 [animation-delay:-0.1s]" />
+                                                    <div className="h-2.5 w-2.5 animate-bounce rounded-full bg-slate-900/25" />
+                                                </div>
+                                                <p className="text-[13px] font-medium uppercase tracking-[0.24em] text-slate-900/45">
+                                                    Generating note
+                                                </p>
+                                            </div>
+                                        </div>
+                                    ) : data.isCollapsed ? (
+                                        <div 
+                                            className="absolute inset-0 flex items-end justify-end p-4"
+                                            onClick={event => {
+                                                event.preventDefault()
+                                                event.stopPropagation()
+                                                data.onToggleCollapse()
+                                            }}
+                                        >
+                                            <div className="group/note-toggle relative flex h-16 items-stretch overflow-hidden rounded-[1.35rem] border border-amber-950/10 bg-[#d4a34d]/96 shadow-[0_18px_42px_rgba(212,163,77,0.34)] ring-1 ring-white/20 backdrop-blur-md transition-all duration-500 hover:-translate-y-0.5 hover:border-amber-950/15 hover:shadow-[0_24px_56px_rgba(212,163,77,0.44)]">
+                                                <div className="flex min-w-[4.75rem] items-center justify-center px-4">
+                                                    <div className="flex h-9 w-9 items-center justify-center rounded-[0.95rem] border border-slate-900/10 bg-[#f6e4b7] shadow-[inset_0_1px_0_rgba(255,255,255,0.35)]">
+                                                        <span className="h-4 w-4 rounded-[0.3rem] border border-slate-900/18 bg-slate-900/6" />
+                                                    </div>
+                                                </div>
+                                                <div className="flex h-full w-16 items-center justify-center rounded-full border-l border-amber-950/10 bg-[#f5e5bd] shadow-[inset_0_1px_0_rgba(255,255,255,0.35)]">
+                                                    <ArrowUpRight size={21} className="rotate-45 text-slate-900 transition-transform duration-500 group-hover/note-toggle:scale-110" />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <textarea
+                                            className="nowheel custom-scrollbar-dark nodrag mt-8 min-h-0 flex-1 resize-none border-none bg-transparent px-6 py-2 text-[22px] font-normal leading-[1.8] tracking-wide text-slate-900 outline-none placeholder:text-slate-900/25"
+                                            placeholder="Type your note here..."
+                                            value={data.content}
+                                            onChange={event => data.onUpdateContent(event.target.value)}
+                                        />
+                                    )}
+                                </div>
+                            </div>
+                        ) : (
+                            <>
+                                {isSelectionMode ? (
+                                    <div className="sticky top-0 z-20 mb-4 flex flex-col gap-2 rounded-3xl border border-foreground/10 bg-[hsl(var(--node-bg))]/90 px-5 py-4 shadow-2xl backdrop-blur-xl">
+                                        <div className="flex items-center justify-between gap-4">
+                                            <div className="flex items-center gap-3 text-[12px] uppercase tracking-[0.2em] text-foreground/70">
+                                                <ListChecks size={16} className="text-foreground/70" />
+                                                <span>{selectedMessageIds.length} selected</span>
+                                            </div>
+                                            <div className="flex items-center gap-2">
+                                                <button
+                                                    type="button"
+                                                    className="rounded-full border border-foreground/10 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.2em] text-foreground/70 transition-all hover:bg-foreground/[0.05]"
+                                                    onClick={() => {
+                                                        setSelectedMessageIds([])
+                                                        setSelectionError(null)
+                                                        setShowTransferChooser(false)
+                                                    }}
+                                                >
+                                                    Clear
+                                                </button>
+                                                <button
+                                                    type="button"
+                                                    className="rounded-full border border-foreground/10 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.2em] text-foreground/70 transition-all hover:bg-foreground/[0.05]"
+                                                    onClick={() => {
+                                                        setIsSelectionMode(false)
+                                                        setSelectedMessageIds([])
+                                                        setSelectionError(null)
+                                                        setShowTransferChooser(false)
+                                                    }}
+                                                >
+                                                    Close
+                                                </button>
+                                            </div>
+                                        </div>
+
+                                        {!showTransferChooser ? (
+                                            <button
+                                                type="button"
+                                                disabled={!hasSelectedMessages || movingSelection || data.loading}
+                                                className={[
+                                                    'inline-flex items-center justify-center gap-2 rounded-full px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.2em] transition-all',
+                                                    !hasSelectedMessages || movingSelection || data.loading
+                                                        ? 'cursor-not-allowed border border-foreground/10 bg-foreground/[0.03] text-foreground/40'
+                                                        : 'border border-emerald-300/40 bg-emerald-400/15 text-emerald-200 hover:scale-[1.01]',
+                                                ].join(' ')}
+                                                onClick={() => {
+                                                    setShowTransferChooser(true)
+                                                    setSelectionError(null)
+                                                }}
+                                            >
+                                                <MoveRight size={15} />
+                                                Add To New Node
+                                            </button>
+                                        ) : (
+                                            <div className="rounded-2xl border border-foreground/10 bg-foreground/[0.03] p-3">
+                                                <p className="text-[10px] font-semibold uppercase tracking-[0.2em] text-foreground/55">
+                                                    Choose transfer mode
+                                                </p>
+                                                <div className="mt-2 grid grid-cols-2 gap-2">
+                                                    <button
+                                                        type="button"
+                                                        disabled={!hasSelectedMessages || movingSelection || data.loading}
+                                                        className={[
+                                                            'rounded-xl border px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.18em] transition-all',
+                                                            !hasSelectedMessages || movingSelection || data.loading
+                                                                ? 'cursor-not-allowed border-foreground/10 text-foreground/40'
+                                                                : 'border-red-300/40 bg-red-400/10 text-red-200 hover:border-red-300/60',
+                                                        ].join(' ')}
+                                                        onClick={() => {
+                                                            void handleMoveSelectionToBranch('move')
+                                                        }}
+                                                    >
+                                                        Move
+                                                    </button>
+                                                    <button
+                                                        type="button"
+                                                        disabled={!hasSelectedMessages || movingSelection || data.loading}
+                                                        className={[
+                                                            'rounded-xl border px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.18em] transition-all',
+                                                            !hasSelectedMessages || movingSelection || data.loading
+                                                                ? 'cursor-not-allowed border-foreground/10 text-foreground/40'
+                                                                : 'border-emerald-300/40 bg-emerald-400/10 text-emerald-200 hover:border-emerald-300/60',
+                                                        ].join(' ')}
+                                                        onClick={() => {
+                                                            void handleMoveSelectionToBranch('copy')
+                                                        }}
+                                                    >
+                                                        Copy
+                                                    </button>
+                                                </div>
+                                                <button
+                                                    type="button"
+                                                    className="mt-2 w-full rounded-xl border border-foreground/10 px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-foreground/65 transition-all hover:bg-foreground/[0.05]"
+                                                    onClick={() => setShowTransferChooser(false)}
+                                                >
+                                                    Cancel
+                                                </button>
+                                            </div>
+                                        )}
+
+                                        {selectionError ? (
+                                            <div className="rounded-2xl border border-red-500/25 bg-red-500/10 px-3 py-2 text-[11px] text-red-100">
+                                                {selectionError}
+                                            </div>
+                                        ) : null}
+                                    </div>
+                                ) : null}
+
+                                {data.messages.length > 0 ? (
+                            data.messages.map(message => {
+                                const isLatestUserMessage = message.role === 'user' && latestUserMessageId === message.id
+                                const isEditingMessage = editingMessageId === message.id
+                                const isSelectedMessage = selectedMessageIds.includes(message.id)
+
+                                return (
+                                    <div
+                                        key={message.id}
+                                        className={`group/msg animate-chat-entry flex flex-col ${message.role === 'user' ? 'items-end' : 'items-start'}`}
+                                    >
+                                        <div
+                                            className={[
+                                                'relative max-w-[95%] rounded-[2.5rem] py-8 text-[21px] font-normal leading-[1.8] tracking-wide transition-all',
+                                                message.role === 'user'
+                                                    ? 'rounded-tr-none border border-foreground/[0.08] bg-foreground/[0.04] px-10 text-foreground'
+                                                    : 'rounded-tl-none border border-transparent bg-transparent px-0 text-foreground',
+                                                isSelectedMessage ? 'ring-2 ring-emerald-300/50' : '',
+                                            ].join(' ')}
+                                        >
+                                            {isSelectionMode ? (
+                                                <button
+                                                    type="button"
+                                                    className={[
+                                                        'absolute -left-5 -top-5 z-20 inline-flex h-10 w-10 items-center justify-center rounded-full border bg-[hsl(var(--node-bg))] shadow-2xl transition-all',
+                                                        isSelectedMessage
+                                                            ? 'border-emerald-300/40 text-emerald-200'
+                                                            : 'border-foreground/[0.12] text-foreground/60 hover:border-foreground/30 hover:text-foreground',
+                                                    ].join(' ')}
+                                                    onClick={() => toggleMessageSelection(message.id)}
+                                                    onMouseDown={event => event.preventDefault()}
+                                                    onPointerDown={event => event.preventDefault()}
+                                                    title={isSelectedMessage ? 'Remove from selection' : 'Select message'}
+                                                >
+                                                    {isSelectedMessage ? <CheckSquare size={18} /> : <Check size={18} />}
+                                                </button>
+                                            ) : null}
+
+                                            {message.imageUrl ? (
+                                                <div className="group/image relative mb-6 mt-4 w-full">
+                                                    <div className="relative aspect-square w-full overflow-hidden rounded-[2.5rem] border border-foreground/[0.08] bg-foreground/[0.02] shadow-2xl">
+                                                        <div className="absolute inset-0 flex animate-pulse items-center justify-center bg-gradient-to-br from-foreground/[0.02] to-foreground/[0.05]">
+                                                            <Sparkles className="text-foreground/10" size={48} />
+                                                        </div>
+
+                                                        <img
+                                                            src={message.imageUrl}
+                                                            alt={message.role === 'user' ? 'User upload' : 'AI image'}
+                                                            className="absolute inset-0 h-full w-full object-cover opacity-0 transition-all duration-1000 data-[loaded=true]:opacity-100"
+                                                            onLoad={event => {
+                                                                event.currentTarget.dataset.loaded = 'true'
+                                                            }}
+                                                            onClick={event => {
+                                                                event.stopPropagation()
+
+                                                                if (!message.imageUrl)
+                                                                    return
+
+                                                                if (message.imageUrl.startsWith('blob:')) {
+                                                                    setSelectedImage(message.imageUrl)
+                                                                    return
+                                                                }
+
+                                                                window.open(message.imageUrl, '_blank', 'noopener,noreferrer')
+                                                            }}
+                                                            referrerPolicy="no-referrer"
+                                                        />
+
+                                                        <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 transition-opacity duration-500 group-hover/image:opacity-100">
+                                                            <div className="flex flex-col items-center gap-2">
+                                                                <span className="text-[12px] font-medium uppercase tracking-widest text-white">
+                                                                    Click to Expand
+                                                                </span>
+                                                                <div className="h-[1px] w-8 bg-white/40" />
+                                                                <span className="text-[10px] font-light uppercase tracking-widest text-white/60">
+                                                                    {message.role === 'user' ? 'Direct Asset' : 'Vision Synthesis'}
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            ) : null}
+
+                                            {message.role === 'user' && isEditingMessage ? (
+                                                <div className="space-y-4">
+                                                    <textarea
+                                                        autoFocus
+                                                        className="custom-scrollbar-dark nodrag min-h-[260px] w-full resize-y rounded-[2rem] border border-foreground/10 bg-foreground/[0.03] px-6 py-5 text-[18px] leading-[1.7] tracking-wide text-foreground outline-none transition-all placeholder:text-foreground/25 focus:border-foreground/25 focus:bg-foreground/[0.05]"
+                                                        value={editingMessageDraft}
+                                                        onChange={event => {
+                                                            setEditingMessageDraft(event.target.value)
+                                                            setEditingMessageError(null)
+                                                        }}
+                                                    />
+
+                                                    {editingMessageError ? (
+                                                        <div className="flex items-center gap-2 rounded-2xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-[12px] text-red-100">
+                                                            <AlertCircle size={16} />
+                                                            <span>{editingMessageError}</span>
+                                                        </div>
+                                                    ) : null}
+
+                                                    <div className="flex items-center gap-3">
+                                                    <button
+                                                        type="button"
+                                                        onClick={() => {
+                                                            void handleSaveEditedMessage()
+                                                        }}
+                                                        disabled={isSavingEditedMessage}
+                                                        className={[
+                                                            'inline-flex items-center gap-2 rounded-full bg-foreground px-4 py-2 text-[12px] font-semibold uppercase tracking-[0.2em] text-background transition-all',
+                                                            isSavingEditedMessage ? 'cursor-not-allowed opacity-50' : 'hover:scale-[1.01]',
+                                                        ].join(' ')}
+                                                    >
+                                                        <Check size={15} />
+                                                        Save
+                                                    </button>
+                                                        <button
+                                                            type="button"
+                                                            onClick={() => {
+                                                                setEditingMessageId(null)
+                                                                setEditingMessageDraft('')
+                                                                setEditingMessageError(null)
+                                                            }}
+                                                            disabled={isSavingEditedMessage}
+                                                            className={[
+                                                                'inline-flex items-center gap-2 rounded-full border border-foreground/10 bg-foreground/[0.03] px-4 py-2 text-[12px] font-semibold uppercase tracking-[0.2em] text-foreground/70 transition-all',
+                                                                isSavingEditedMessage ? 'cursor-not-allowed opacity-40' : 'hover:bg-foreground/[0.06]',
+                                                            ].join(' ')}
+                                                        >
+                                                            <X size={15} />
+                                                            Cancel
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            ) : (
+                                                <div className="chat-canvas-markdown max-w-none">
+                                                    <ReactMarkdown>{message.content}</ReactMarkdown>
+                                                </div>
+                                            )}
+
+                                            {message.role === 'assistant' && message.canBranch && !isSelectionMode ? (
+                                                <button
+                                                    type="button"
+                                                    onClick={() => data.onCreateChild('response', message.content)}
+                                                    onMouseDown={event => event.preventDefault()}
+                                                    onPointerDown={event => event.preventDefault()}
+                                                    onPointerEnter={event => event.preventDefault()}
+                                                    onPointerLeave={event => event.preventDefault()}
+                                                    className="absolute -right-6 -top-6 z-10 rounded-full border border-foreground/[0.1] bg-[hsl(var(--node-bg))] p-4 opacity-0 shadow-2xl transition-all duration-500 hover:scale-110 hover:border-foreground/40 group-hover/msg:opacity-100"
+                                                    title="Branch"
+                                                >
+                                                    <GitBranch size={20} className="text-foreground" />
+                                                </button>
+                                            ) : null}
+
+                                            {message.role === 'user' && isLatestUserMessage && !isEditingMessage && !isSelectionMode ? (
+                                                <>
+                                                    <button
+                                                        type="button"
+                                                        onClick={() => startEditingMessage(message.id, message.content)}
+                                                        onMouseDown={event => event.preventDefault()}
+                                                        onPointerDown={event => event.preventDefault()}
+                                                        disabled={data.loading || isRetryingPrompt || isSavingEditedMessage}
+                                                        className={[
+                                                            'absolute -left-6 -top-7 z-10 inline-flex items-center gap-2 rounded-full border border-foreground/[0.1] bg-[hsl(var(--node-bg))] px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.18em] opacity-0 shadow-2xl transition-all duration-500 group-hover/msg:opacity-100',
+                                                            data.loading || isRetryingPrompt || isSavingEditedMessage
+                                                                ? 'cursor-not-allowed opacity-40'
+                                                                : 'hover:scale-105 hover:border-foreground/40',
+                                                        ].join(' ')}
+                                                        title="Edit prompt"
+                                                    >
+                                                        <Pencil size={18} className="text-foreground" />
+                                                        <span>Edit</span>
+                                                    </button>
+                                                    <button
+                                                        type="button"
+                                                        onClick={() => {
+                                                            void handleRetryPrompt(message.content, message.imageUrl)
+                                                        }}
+                                                        onMouseDown={event => event.preventDefault()}
+                                                        onPointerDown={event => event.preventDefault()}
+                                                        disabled={data.loading || isRetryingPrompt}
+                                                        className={[
+                                                            'absolute -right-6 -top-7 z-10 inline-flex items-center gap-2 rounded-full border border-foreground/[0.1] bg-[hsl(var(--node-bg))] px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.18em] opacity-0 shadow-2xl transition-all duration-500 group-hover/msg:opacity-100',
+                                                            data.loading || isRetryingPrompt
+                                                                ? 'cursor-not-allowed opacity-40'
+                                                                : 'hover:scale-105 hover:border-foreground/40',
+                                                        ].join(' ')}
+                                                        title="Retry prompt"
+                                                    >
+                                                        <RefreshCcw size={18} className="text-foreground" />
+                                                        <span>Retry</span>
+                                                    </button>
+                                                </>
+                                            ) : null}
+                                        </div>
+                                    </div>
+                                )
+                            })
+                        ) : (
+                            <div className="animate-fade-in flex flex-1 flex-col items-center justify-center py-24 text-center">
+                                <h2 className={`px-16 text-[32px] font-extralight leading-[1.3] tracking-[-0.04em] text-foreground/60 transition-all duration-700 ${data.loading ? 'scale-95 opacity-40 blur-sm' : ''}`}>
+                                    {placeholder}
+                                </h2>
+                            </div>
+                        )}
+                            </>
+                        )}
+
+                        {data.showAssistantTyping ? (
+                            <div
+                                className="animate-chat-entry flex justify-start"
+                                role="status"
+                                aria-label="Assistant is replying"
+                            >
+                                <div className="relative max-w-[95%] rounded-[2.5rem] rounded-tl-none border border-transparent bg-transparent px-0 py-8 text-foreground">
+                                    <div className="rounded-3xl border border-foreground/[0.08] bg-foreground/[0.03] px-8 py-6 shadow-inner">
+                                        <div className="flex gap-2">
+                                            <div className="h-2 w-2 animate-bounce rounded-full bg-foreground/25 [animation-delay:-0.3s]" />
+                                            <div className="h-2 w-2 animate-bounce rounded-full bg-foreground/25 [animation-delay:-0.15s]" />
+                                            <div className="h-2 w-2 animate-bounce rounded-full bg-foreground/25" />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        ) : null}
+                    </div>
+
+                    {data.nodeType !== 'note' ? (
+                        <div
+                            className={[
+                                'transform px-12 pb-4 pt-4 transition-all duration-700',
+                                chatInput || isFocused || selectedImage || !data.showFloatingLabel
+                                    ? 'translate-y-0 opacity-100'
+                                    : 'translate-y-1 opacity-0 group-hover:translate-y-0 group-hover:opacity-100',
+                            ].join(' ')}
+                        >
+                            {sendError ? (
+                                <div className="mb-4 flex items-center justify-between gap-4 rounded-2xl border border-foreground/10 bg-foreground/[0.03] px-4 py-3 text-[13px] text-foreground/70">
+                                    <div className="flex items-center gap-2">
+                                        <AlertCircle size={16} className="text-amber-400" />
+                                        <span>{sendError}</span>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <button
+                                            type="button"
+                                            onClick={() => {
+                                                void handleSendChat()
+                                            }}
+                                            disabled={isRetryingPrompt}
+                                            className="inline-flex items-center gap-2 rounded-full bg-foreground px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-background transition-all hover:scale-[1.01]"
+                                        >
+                                            <RefreshCcw size={14} />
+                                            Retry
+                                        </button>
+                                        <button
+                                            type="button"
+                                            onClick={() => setShowModelSelector(true)}
+                                            className="inline-flex items-center gap-2 rounded-full border border-foreground/10 bg-foreground/[0.03] px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-foreground/70 transition-all hover:bg-foreground/[0.06]"
+                                        >
+                                            Model
+                                        </button>
+                                    </div>
+                                </div>
+                            ) : null}
+
+                            {selectedImage ? (
+                                <div className="group/preview animate-fade-in mb-4 px-4">
+                                    <div className="relative inline-block">
+                                        <div className="h-24 w-24 overflow-hidden rounded-2xl border-2 border-[hsl(var(--accent))/30] shadow-2xl backdrop-blur-xl">
+                                            <img src={selectedImage} alt="Preview" className="h-full w-full object-cover" />
+                                        </div>
+                                        <button
+                                            type="button"
+                                            onClick={() => setSelectedImage(null)}
+                                            className="absolute -right-2 -top-2 rounded-full border border-white/20 bg-red-500/80 p-1.5 text-white shadow-lg transition-all hover:bg-red-500"
+                                        >
+                                            <X size={12} />
+                                        </button>
+                                    </div>
+                                </div>
+                            ) : null}
+
+                            <div className="nodrag group/input relative flex items-center rounded-[2rem] border border-[hsl(var(--node-border))]/30 bg-foreground/[0.02] px-2 py-1 transition-all duration-700 hover:bg-foreground/[0.04] focus-within:border-[hsl(var(--node-border))]/60 focus-within:bg-foreground/[0.05]">
+                                <input
+                                    ref={fileInputRef}
+                                    type="file"
+                                    className="hidden"
+                                    accept="image/*"
+                                    onChange={event => {
+                                        handleImageSelection(event)
+                                        setShowAttachmentMenu(false)
+                                    }}
+                                />
+
+                                <div ref={attachmentMenuRef} className="relative">
+                                    <button
+                                        type="button"
+                                        onClick={() => setShowAttachmentMenu(current => !current)}
+                                        className={[
+                                            'rounded-full p-4 transition-all duration-700',
+                                            showAttachmentMenu
+                                                ? 'scale-110 bg-foreground/10 text-foreground'
+                                                : 'text-foreground/40 hover:bg-foreground/5 hover:text-foreground/80',
+                                        ].join(' ')}
+                                        title="Attachments"
+                                    >
+                                        <Plus size={22} className={showAttachmentMenu ? 'rotate-45 transition-transform duration-500' : 'transition-transform duration-500'} />
+                                    </button>
+
+                                    {showAttachmentMenu ? (
+                                        <div
+                                            className="animate-chat-entry absolute bottom-full left-0 z-50 mb-4 w-64 rounded-[2rem] border border-[hsl(var(--node-border))]/60 p-2 shadow-2xl backdrop-blur-3xl"
+                                            style={{ backgroundColor: 'hsl(var(--node-bg) / 0.95)' }}
+                                        >
+                                            <div className="space-y-1">
+                                                <button
+                                                    type="button"
+                                                    onClick={() => fileInputRef.current?.click()}
+                                                    className="flex w-full items-center gap-3 rounded-2xl p-3 transition-all duration-300 hover:bg-foreground/5"
+                                                >
+                                                    <ImageIcon size={18} className="text-sky-400" />
+                                                    <span className="text-[14px] text-foreground/90">Add photos &amp; files</span>
+                                                </button>
+                                                <button
+                                                    type="button"
+                                                    onClick={() => {
+                                                        setIsImageMode(true)
+                                                        setShowAttachmentMenu(false)
+                                                    }}
+                                                    className={[
+                                                        'flex w-full items-center gap-3 rounded-2xl p-3 transition-all duration-300',
+                                                        isImageMode ? 'bg-foreground/10 text-amber-400' : 'hover:bg-foreground/5',
+                                                    ].join(' ')}
+                                                >
+                                                    <Sparkles size={18} className="text-amber-400" />
+                                                    <span className="text-[14px] text-foreground/90">Create image</span>
+                                                </button>
+                                                <div className="flex w-full cursor-not-allowed items-center gap-3 rounded-2xl p-3 opacity-40">
+                                                    <Camera size={18} />
+                                                    <span className="text-[14px]">Take photo</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    ) : null}
+                                </div>
+
+                                <textarea
+                                    ref={chatInputRef}
+                                    rows={1}
+                                    placeholder={isImageMode ? 'Paint your vision...' : 'Continue your thought...'}
+                                    className={`custom-scrollbar flex-1 resize-none bg-transparent px-3 py-5 text-[17px] font-light text-foreground/90 outline-none transition-all duration-700 placeholder:text-foreground/[0.1] ${isImageMode ? 'text-amber-200/90' : ''}`}
+                                    value={chatInput}
+                                    onFocus={() => setIsFocused(true)}
+                                    onBlur={() => setIsFocused(false)}
+                                    onChange={event => {
+                                        setChatInput(event.target.value)
+                                        setSendError(null)
+                                    }}
+                                    onKeyDown={event => {
+                                        if (event.key === 'Enter' && !event.shiftKey) {
+                                            event.preventDefault()
+                                            void handleSendChat()
+                                        }
+                                    }}
+                                />
+
+                                <button
+                                    type="button"
+                                    onClick={() => {
+                                        void handleSendChat()
+                                    }}
+                                    onMouseDown={event => event.preventDefault()}
+                                    onPointerDown={event => event.preventDefault()}
+                                    disabled={(!chatInput.trim() && !selectedImage) || data.loading}
+                                    className={[
+                                        'rounded-full p-4 transition-all duration-700',
+                                        (chatInput.trim() || selectedImage) && !data.loading
+                                            ? isImageMode
+                                                ? 'scale-110 bg-amber-500/10 text-amber-300'
+                                                : 'bg-foreground/10 text-foreground hover:scale-105 active:scale-95'
+                                                : 'text-foreground/30',
+                                    ].join(' ')}
+                                >
+                                    {sendError ? (
+                                        <RefreshCcw size={24} />
+                                    ) : isImageMode ? (
+                                        <Sparkles size={24} />
+                                    ) : (
+                                        <ArrowUpRight size={28} strokeWidth={2} />
+                                    )}
+                                </button>
+                            </div>
+                        </div>
+                    ) : null}
+                </div>
+
+                {!(data.nodeType === 'note' && data.isCollapsed) ? (
+                    <>
+                        <div
+                            className={[
+                                'relative flex items-center gap-5 border-t bg-transparent px-12 pb-10 pt-0 transition-all duration-700',
+                                data.nodeType === 'note' ? 'border-slate-900/5' : 'border-[hsl(var(--node-border))]/10',
+                                !data.showFloatingLabel || chatInput || isFocused || data.nodeType === 'note'
+                                    ? 'translate-y-0 opacity-100'
+                                    : 'translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100',
+                            ].join(' ')}
+                        >
+                            {data.nodeType !== 'note' ? (
+                                <>
+                                    <div className="relative">
+                                        <ActionButton
+                                            icon={
+                                                <div className="flex items-center gap-2">
+                                                    <ChevronDown
+                                                        size={22}
+                                                        strokeWidth={2}
+                                                        className={showModelSelector ? 'rotate-180 transition-transform duration-500' : 'transition-transform duration-500'}
+                                                    />
+                                                    <span className="max-w-[120px] truncate text-[10px] font-bold uppercase opacity-60">
+                                                        {currentModelOption.badge}
+                                                    </span>
+                                                </div>
+                                            }
+                                            tooltip="Select AI Model"
+                                            onClick={() => setShowModelSelector(current => !current)}
+                                            active={showModelSelector}
+                                        />
+                                    </div>
+
+                                    <ActionButton
+                                        icon={<GitBranch size={24} strokeWidth={2} />}
+                                        tooltip="Add question node"
+                                        onClick={() => data.onCreateChild('question')}
+                                    />
+
+                                    <ActionButton
+                                        icon={<ListChecks size={24} strokeWidth={2} />}
+                                        tooltip={isSelectionMode ? 'Close message selection' : 'Select messages'}
+                                        onClick={() => {
+                                            setSelectionError(null)
+                                            setIsSelectionMode(current => !current)
+                                            if (isSelectionMode) {
+                                                setSelectedMessageIds([])
+                                                setShowTransferChooser(false)
+                                            }
+                                        }}
+                                        active={isSelectionMode}
+                                        hoverClass={isSelectionMode ? 'hover:text-emerald-300' : 'hover:text-foreground'}
+                                    />
+
+                                    <ActionButton
+                                        icon={
+                                            <div className="relative">
+                                                <StickyNote size={24} strokeWidth={2} />
+                                                <div className="absolute -right-1 -top-1">
+                                                    <Sparkles size={12} className="fill-amber-400 text-amber-400" />
+                                                </div>
+                                            </div>
+                                        }
+                                        tooltip="Auto-generate note"
+                                        onClick={data.onGenerateNote}
+                                        hoverClass="hover:text-amber-400"
+                                    />
+
+                                    <ActionButton
+                                        icon={<StickyNote size={24} strokeWidth={2} />}
+                                        tooltip="Add note node"
+                                        onClick={() => data.onCreateChild('note')}
+                                        hoverClass="hover:text-orange-500"
+                                    />
+                                </>
+                            ) : null}
+
+                            <div className="flex-1" />
+
+                            {data.canDelete ? (
+                                <ActionButton
+                                    icon={<Trash2 size={24} strokeWidth={2} />}
+                                    tooltip="Delete"
+                                    onClick={data.onDelete}
+                                    hoverClass={data.nodeType === 'note' ? 'hover:text-slate-900' : 'hover:text-red-300'}
+                                />
+                            ) : null}
+                        </div>
+
+                        <Handle
+                            type="source"
+                            position={Position.Bottom}
+                            className="!-bottom-[3px] !h-1.5 !w-1.5 !border-none !bg-foreground/5 !transition-colors hover:!bg-foreground/20"
+                        />
+                    </>
+                ) : null}
+            </div>
+            {modelPickerDialog}
+        </div>
+    )
+}
+
+function ActionButton({
+    icon,
+    tooltip,
+    onClick,
+    hoverClass = 'hover:text-foreground',
+    active = false,
+}: {
+    icon: React.ReactNode
+    tooltip: string
+    onClick: () => void
+    hoverClass?: string
+    active?: boolean
+}) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            title={tooltip}
+            className={`rounded-xl p-2.5 text-foreground/30 transition-all duration-500 ${hoverClass} ${active ? 'bg-foreground/10 text-foreground' : 'hover:bg-foreground/5'}`}
+        >
+            {icon}
+        </button>
+    )
+}
+
+export default memo(IdeaNode)
diff --git a/frontend/src/components/chat-canvas/chat-canvas.css b/frontend/src/components/chat-canvas/chat-canvas.css
new file mode 100644
index 0000000..4d1c3fe
--- /dev/null
+++ b/frontend/src/components/chat-canvas/chat-canvas.css
@@ -0,0 +1,865 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
+
+.chat-canvas-app {
+  --background: 0 0% 3%;
+  --foreground: 0 0% 93%;
+  --card: 0 0% 7%;
+  --card-foreground: 0 0% 93%;
+  --popover: 0 0% 9%;
+  --popover-foreground: 0 0% 93%;
+  --primary: 0 0% 100%;
+  --primary-foreground: 0 0% 0%;
+  --secondary: 0 0% 12%;
+  --secondary-foreground: 0 0% 75%;
+  --muted: 0 0% 10%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 0 0% 85%;
+  --accent-foreground: 0 0% 0%;
+  --destructive: 0 62% 50%;
+  --destructive-foreground: 0 0% 100%;
+  --success: 0 0% 70%;
+  --success-foreground: 0 0% 0%;
+  --warning: 0 0% 60%;
+  --warning-foreground: 0 0% 0%;
+  --border: 0 0% 14%;
+  --input: 0 0% 11%;
+  --ring: 0 0% 100%;
+  --canvas-bg: 0 0% 4%;
+  --canvas-dot: 0 0% 10%;
+  --node-bg: 0 0% 8%;
+  --node-border: 0 0% 16%;
+  --sidebar-background: 0 0% 5%;
+  --sidebar-border: 0 0% 12%;
+  --gradient-primary: linear-gradient(135deg, hsl(0 0% 100%), hsl(0 0% 80%));
+  --gradient-surface: linear-gradient(180deg, hsl(0 0% 10%), hsl(0 0% 7%));
+  --gradient-glow: radial-gradient(ellipse at center, hsl(0 0% 100% / 0.02), transparent 70%);
+  --font-sans: 'Plus Jakarta Sans', 'Inter Tight', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+  min-height: 100%;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: var(--font-sans);
+}
+
+.chat-canvas-app.theme-midnight {
+  --background: 0 0% 3%;
+  --foreground: 0 0% 93%;
+  --canvas-bg: 0 0% 4%;
+  --canvas-dot: 0 0% 10%;
+  --node-bg: 0 0% 8%;
+  --node-border: 0 0% 15%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 0 0% 100%;
+  --card: 0 0% 7%;
+  --border: 0 0% 14%;
+  --sidebar-background: 0 0% 5%;
+  --sidebar-border: 0 0% 12%;
+}
+
+.chat-canvas-app.theme-monochrome {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 5%;
+  --canvas-bg: 0 0% 98%;
+  --canvas-dot: 0 0% 90%;
+  --node-bg: 0 0% 100%;
+  --node-border: 0 0% 92%;
+  --muted-foreground: 0 0% 40%;
+  --accent: 0 0% 0%;
+  --card: 0 0% 99%;
+  --border: 0 0% 94%;
+  --sidebar-background: 0 0% 98%;
+  --sidebar-border: 0 0% 90%;
+}
+
+.chat-canvas-app.theme-slate {
+  --background: 220 15% 15%;
+  --foreground: 220 10% 92%;
+  --canvas-bg: 220 15% 16%;
+  --canvas-dot: 220 15% 25%;
+  --node-bg: 220 15% 18%;
+  --node-border: 220 15% 26%;
+  --muted-foreground: 220 10% 50%;
+  --accent: 220 10% 100%;
+  --card: 220 15% 20%;
+  --border: 220 15% 25%;
+  --sidebar-background: 220 15% 12%;
+  --sidebar-border: 220 15% 20%;
+}
+
+.chat-canvas-app .chat-canvas-node--selected {
+  box-shadow: 0 0 48px -18px hsl(var(--accent) / 0.16);
+  outline: 1px solid hsl(var(--accent) / 0.08);
+}
+
+.chat-canvas-app .react-flow__background {
+  background-color: hsl(var(--canvas-bg)) !important;
+}
+
+.chat-canvas-app .react-flow__minimap {
+  background:
+    radial-gradient(circle at top left, hsl(var(--foreground) / 0.05), transparent 42%),
+    linear-gradient(180deg, hsl(var(--background) / 0.92), hsl(var(--background) / 0.76)) !important;
+  backdrop-filter: blur(18px) saturate(140%) !important;
+  border: 1px solid hsl(var(--foreground) / 0.09) !important;
+  border-radius: 18px !important;
+  overflow: hidden !important;
+  box-shadow:
+    0 16px 40px hsl(0 0% 0% / 0.28),
+    inset 0 1px 0 hsl(0 0% 100% / 0.04) !important;
+}
+
+.chat-canvas-app .react-flow__minimap svg {
+  filter: saturate(110%);
+}
+
+.chat-canvas-app .react-flow__minimap path {
+  stroke-width: 1.3 !important;
+}
+
+.chat-canvas-app .react-flow__controls {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.chat-canvas-app .react-flow__controls-button {
+  background-color: hsl(var(--node-bg) / 0.7) !important;
+  backdrop-filter: blur(20px) saturate(160%) !important;
+  border: 1px solid hsl(var(--foreground) / 0.08) !important;
+  color: hsl(var(--foreground) / 0.8) !important;
+  border-radius: 12px !important;
+  width: 38px !important;
+  height: 38px !important;
+  margin: 6px 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  box-shadow: 
+    0 4px 6px -1px rgb(0 0 0 / 0.1), 
+    0 2px 4px -1px rgb(0 0 0 / 0.06),
+    inset 0 1px 0 hsl(var(--foreground) / 0.05) !important;
+}
+
+.chat-canvas-app .react-flow__controls-button:hover {
+  background-color: hsl(var(--node-bg) / 0.9) !important;
+  border-color: hsl(var(--foreground) / 0.15) !important;
+  color: hsl(var(--foreground)) !important;
+  transform: translateY(-1px);
+  box-shadow: 
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 
+    0 4px 6px -2px rgb(0 0 0 / 0.05),
+    0 0 0 1px hsl(var(--foreground) / 0.05) !important;
+}
+
+.chat-canvas-app .react-flow__controls-button svg {
+  fill: currentColor !important;
+  width: 14px !important;
+  height: 14px !important;
+  transition: transform 0.2s ease !important;
+}
+
+.chat-canvas-app .react-flow__controls-button:hover svg {
+  transform: scale(1.1);
+}
+
+.chat-canvas-app .react-flow__controls-button:active {
+  transform: translateY(0) scale(0.95);
+}
+
+.canvas-model-picker-open {
+  overflow: hidden;
+}
+
+.canvas-model-picker-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 70;
+  display: grid;
+  place-items: center;
+  padding: 1.25rem;
+  background:
+    radial-gradient(circle at top, hsl(var(--foreground) / 0.08), transparent 30%),
+    rgb(0 0 0 / 0.75);
+  backdrop-filter: blur(24px) saturate(140%);
+}
+
+.canvas-model-picker-dialog {
+  position: relative;
+  width: min(1120px, calc(100% - 4rem));
+  max-height: min(92vh, 920px);
+  overflow: hidden;
+  border-radius: 28px;
+  border: 1px solid hsl(var(--foreground) / 0.25);
+  background:
+    radial-gradient(circle at top right, hsl(var(--foreground) / 0.15), transparent 40%),
+    linear-gradient(180deg, hsl(var(--node-bg) / 0.95), hsl(var(--card) / 0.95));
+  backdrop-filter: blur(32px) saturate(150%);
+  box-shadow:
+    0 0 0 1px hsl(0 0% 0% / 0.8),
+    0 40px 100px rgb(0 0 0 / 0.95),
+    0 10px 40px rgb(0 0 0 / 0.6),
+    inset 0 1px 1px hsl(var(--foreground) / 0.15);
+}
+
+.canvas-model-picker-dialog::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  background:
+    linear-gradient(120deg, hsl(var(--foreground) / 0.08), transparent 32%),
+    radial-gradient(circle at bottom left, hsl(var(--foreground) / 0.04), transparent 38%);
+  opacity: 0.85;
+}
+
+.canvas-model-picker-dialog > * {
+  position: relative;
+  z-index: 1;
+}
+
+.canvas-model-picker-dialog__header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 2rem;
+  align-items: center;
+  padding: 1.6rem 1.4rem;
+  border-bottom: 1px solid hsl(var(--foreground) / 0.08);
+}
+
+.canvas-model-picker-dialog__heading {
+  display: grid;
+  gap: 0.45rem;
+  min-width: 0;
+}
+
+.canvas-model-picker-dialog__eyebrow {
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: hsl(var(--foreground) / 0.45);
+}
+
+.canvas-model-picker-dialog__title {
+  margin: 0;
+  max-width: 9ch;
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 700;
+  line-height: 0.95;
+  letter-spacing: -0.08em;
+  color: hsl(var(--foreground));
+}
+
+.canvas-model-picker-dialog__copy {
+  max-width: 52ch;
+  font-size: 0.97rem;
+  line-height: 1.55;
+  color: hsl(var(--foreground) / 0.62);
+}
+
+.canvas-model-picker-dialog__header-actions {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+}
+
+.canvas-model-picker-dialog__search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-width: 280px;
+}
+
+.canvas-model-picker-dialog__search-icon {
+  position: absolute;
+  left: 1rem;
+  color: hsl(var(--foreground) / 0.4);
+  pointer-events: none;
+}
+
+.canvas-model-picker-dialog__search-input {
+  width: 100%;
+  height: 2.5rem;
+  padding: 0 2.6rem 0 2.5rem;
+  border-radius: 999px;
+  border: 1px solid hsl(var(--foreground) / 0.12);
+  background: hsl(var(--foreground) / 0.05);
+  color: hsl(var(--foreground));
+  font-size: 0.9rem;
+  outline: none;
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.canvas-model-picker-dialog__search-input:focus {
+  background: hsl(var(--foreground) / 0.08);
+  border-color: hsl(var(--foreground) / 0.22);
+  box-shadow: 0 0 0 4px hsl(var(--foreground) / 0.04);
+  width: 320px;
+}
+
+.canvas-model-picker-dialog__search-clear {
+  position: absolute;
+  right: 0.8rem;
+  width: 1.4rem;
+  height: 1.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: hsl(var(--foreground) / 0.12);
+  color: hsl(var(--foreground) / 0.6);
+  transition: all 0.2s ease;
+}
+
+.canvas-model-picker-dialog__search-clear:hover {
+  background: hsl(var(--foreground) / 0.25);
+  color: hsl(var(--foreground));
+}
+
+.canvas-model-picker-dialog__close {
+  width: 2.25rem;
+  height: 2.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid hsl(var(--foreground) / 0.08);
+  background: hsl(var(--foreground) / 0.04);
+  color: hsl(var(--foreground) / 0.72);
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+
+.canvas-model-picker-dialog__close:hover {
+  color: hsl(var(--foreground));
+  background: hsl(var(--foreground) / 0.08);
+  border-color: hsl(var(--foreground) / 0.16);
+}
+
+.canvas-model-picker-dialog__body {
+  max-height: min(72vh, 720px);
+  overflow: auto;
+  display: grid;
+  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
+  gap: 1rem;
+  padding: 1rem 1.4rem 1.4rem;
+}
+
+.canvas-model-picker-dialog__summary {
+  display: grid;
+  align-content: start;
+  gap: 0.75rem;
+}
+
+.canvas-model-picker-dialog__summary-frame {
+  display: grid;
+  gap: 0.95rem;
+  padding: 1.2rem;
+  border-radius: 28px;
+  border: 1px solid hsl(var(--foreground) / 0.08);
+  background:
+    radial-gradient(circle at top, hsl(var(--foreground) / 0.06), transparent 35%),
+    linear-gradient(180deg, hsl(var(--foreground) / 0.05), hsl(var(--foreground) / 0.02));
+  box-shadow:
+    inset 0 1px 0 hsl(var(--foreground) / 0.06),
+    0 20px 50px rgb(0 0 0 / 0.16);
+}
+
+.canvas-model-picker-dialog__summary-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.canvas-model-picker-dialog__summary-label {
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: hsl(var(--foreground) / 0.48);
+}
+
+.canvas-model-picker-dialog__summary-badge {
+  padding: 0.35rem 0.6rem;
+  border-radius: 999px;
+  border: 1px solid hsl(var(--foreground) / 0.09);
+  background: hsl(var(--foreground) / 0.05);
+  color: hsl(var(--foreground) / 0.8);
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.canvas-model-picker-dialog__summary-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 18px;
+  background:
+    radial-gradient(circle at 30% 30%, hsl(var(--foreground) / 0.08), transparent 58%),
+    hsl(var(--foreground) / 0.05);
+  color: hsl(var(--foreground));
+}
+
+.canvas-model-picker-dialog__summary-title {
+  font-size: 1.4rem;
+  font-weight: 650;
+  letter-spacing: -0.04em;
+  line-height: 1.05;
+  color: hsl(var(--foreground));
+}
+
+.canvas-model-picker-dialog__summary-hint {
+  font-size: 0.95rem;
+  line-height: 1.45;
+  color: hsl(var(--foreground) / 0.68);
+}
+
+.canvas-model-picker-dialog__summary-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  font-size: 0.7rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: hsl(var(--foreground) / 0.45);
+}
+
+.canvas-model-picker-dialog__summary-meta span {
+  padding: 0.4rem 0.55rem;
+  border-radius: 999px;
+  border: 1px solid hsl(var(--foreground) / 0.08);
+  background: hsl(var(--foreground) / 0.03);
+}
+
+.canvas-model-picker-dialog__summary-note {
+  margin: 0;
+  padding: 0 0.25rem;
+  font-size: 0.9rem;
+  line-height: 1.55;
+  color: hsl(var(--foreground) / 0.55);
+}
+
+.canvas-model-picker-dialog__list {
+  max-height: min(72vh, 720px);
+  overflow: auto;
+  display: grid;
+  gap: 1rem;
+  padding-right: 0.15rem;
+}
+
+.canvas-model-picker-dialog__group {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.canvas-model-picker-dialog__group-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.canvas-model-picker-dialog__group-label {
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: hsl(var(--foreground) / 0.46);
+}
+
+.canvas-model-picker-dialog__group-count {
+  padding: 0.3rem 0.55rem;
+  border-radius: 999px;
+  border: 1px solid hsl(var(--foreground) / 0.08);
+  background: hsl(var(--foreground) / 0.03);
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.11em;
+  text-transform: uppercase;
+  color: hsl(var(--foreground) / 0.5);
+}
+
+.canvas-model-picker-dialog__options {
+  display: grid;
+  gap: 0.72rem;
+}
+
+.canvas-model-picker-dialog__option {
+  display: flex;
+  align-items: center;
+  gap: 0.95rem;
+  width: 100%;
+  padding: 1rem 1.05rem;
+  border-radius: 24px;
+  border: 1px solid hsl(var(--foreground) / 0.07);
+  background:
+    linear-gradient(180deg, hsl(var(--foreground) / 0.04), hsl(var(--foreground) / 0.02));
+  text-align: left;
+  transition:
+    transform 0.2s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    color 0.2s ease;
+}
+
+.canvas-model-picker-dialog__option:hover {
+  transform: translateY(-1px);
+  background:
+    linear-gradient(180deg, hsl(var(--foreground) / 0.06), hsl(var(--foreground) / 0.03));
+  border-color: hsl(var(--foreground) / 0.14);
+  box-shadow: 0 12px 26px rgb(0 0 0 / 0.16);
+}
+
+.canvas-model-picker-dialog__option--selected {
+  background:
+    linear-gradient(180deg, hsl(var(--foreground) / 0.12), hsl(var(--foreground) / 0.06));
+  border-color: hsl(var(--foreground) / 0.2);
+  box-shadow:
+    0 0 0 1px hsl(var(--foreground) / 0.06) inset,
+    0 18px 36px rgb(0 0 0 / 0.18);
+}
+
+.canvas-model-picker-dialog__icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 999px;
+  background: hsl(var(--foreground) / 0.07);
+}
+
+.canvas-model-picker-dialog__selected-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.22rem 0.48rem;
+  border-radius: 999px;
+  border: 1px solid hsl(var(--foreground) / 0.1);
+  background: hsl(var(--foreground) / 0.07);
+  color: hsl(var(--foreground) / 0.78);
+  font-size: 0.64rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.chat-canvas-app .react-flow__edge-path {
+  stroke: hsl(0 0% 40% / 0.5) !important;
+  stroke-width: 2 !important;
+}
+
+.chat-canvas-app .react-flow__node-resizer__handle {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.chat-canvas-app .react-flow__node-resizer__handle::after {
+  display: none !important;
+}
+
+.chat-canvas-app .chat-canvas-markdown {
+  font-size: 17px;
+  line-height: 1.85;
+  color: hsl(var(--foreground));
+  letter-spacing: -0.01em;
+  text-wrap: pretty;
+}
+
+.chat-canvas-app .chat-canvas-markdown p,
+.chat-canvas-app .chat-canvas-markdown li,
+.chat-canvas-app .chat-canvas-markdown strong,
+.chat-canvas-app .chat-canvas-markdown em,
+.chat-canvas-app .chat-canvas-markdown code,
+.chat-canvas-app .chat-canvas-markdown blockquote {
+  color: inherit;
+}
+
+.chat-canvas-app .chat-canvas-markdown p {
+  margin-top: 0.65rem;
+  margin-bottom: 0.65rem;
+}
+
+.chat-canvas-app .chat-canvas-markdown p:first-child {
+  margin-top: 0;
+}
+
+.chat-canvas-app .chat-canvas-markdown p:last-child {
+  margin-bottom: 0;
+}
+
+.chat-canvas-app .chat-canvas-markdown ul,
+.chat-canvas-app .chat-canvas-markdown ol {
+  margin: 0.75rem 0;
+  padding-left: 1.5rem;
+}
+
+.chat-canvas-app .chat-canvas-markdown li {
+  margin: 0.35rem 0;
+}
+
+.chat-canvas-app .chat-canvas-markdown h1,
+.chat-canvas-app .chat-canvas-markdown h2,
+.chat-canvas-app .chat-canvas-markdown h3,
+.chat-canvas-app .chat-canvas-markdown h4 {
+  margin: 1.4rem 0 0.7rem;
+  font-weight: 700;
+  line-height: 1.15;
+  letter-spacing: -0.04em;
+}
+
+.chat-canvas-app .chat-canvas-markdown h1 {
+  font-size: 1.65rem;
+}
+
+.chat-canvas-app .chat-canvas-markdown h2 {
+  font-size: 1.35rem;
+}
+
+.chat-canvas-app .chat-canvas-markdown h3 {
+  font-size: 1.1rem;
+}
+
+.chat-canvas-app .chat-canvas-markdown h4 {
+  font-size: 1rem;
+}
+
+.chat-canvas-app .chat-canvas-markdown hr {
+  margin: 1.8rem 0;
+  border: 0;
+  border-top: 1px solid hsl(0 0% 100% / 0.12);
+}
+
+.chat-canvas-app .chat-canvas-markdown a {
+  color: hsl(var(--foreground));
+  text-decoration: underline;
+  text-decoration-color: hsl(var(--foreground) / 0.22);
+  text-underline-offset: 0.18em;
+  transition: text-decoration-color 0.2s ease, opacity 0.2s ease;
+}
+
+.chat-canvas-app .chat-canvas-markdown a:hover {
+  text-decoration-color: hsl(var(--foreground) / 0.45);
+}
+
+.chat-canvas-app .chat-canvas-markdown code {
+  padding: 0.14rem 0.36rem;
+  border-radius: 0.5rem;
+  background: hsl(0 0% 100% / 0.06);
+  border: 1px solid hsl(0 0% 100% / 0.08);
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+}
+
+.chat-canvas-app .chat-canvas-markdown pre {
+  margin: 1rem 0;
+  padding: 1rem 1.1rem;
+  overflow-x: auto;
+  border-radius: 1.25rem;
+  background: hsl(0 0% 100% / 0.04);
+  border: 1px solid hsl(0 0% 100% / 0.08);
+  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.04);
+}
+
+.chat-canvas-app .chat-canvas-markdown pre code {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font-size: 0.92em;
+  line-height: 1.7;
+}
+
+.chat-canvas-app .chat-canvas-markdown blockquote {
+  margin: 1rem 0;
+  padding: 0.75rem 1rem;
+  border-left: 2px solid hsl(var(--foreground) / 0.18);
+  border-radius: 0 1rem 1rem 0;
+  background: hsl(0 0% 100% / 0.03);
+  color: hsl(var(--foreground) / 0.82);
+}
+
+.chat-canvas-app .chat-canvas-markdown blockquote p {
+  margin: 0.45rem 0;
+}
+
+.chat-canvas-app .chat-canvas-markdown table {
+  width: 100%;
+  margin: 1rem 0;
+  border-collapse: collapse;
+  overflow: hidden;
+  border-radius: 1rem;
+  border: 1px solid hsl(0 0% 100% / 0.08);
+}
+
+.chat-canvas-app .chat-canvas-markdown th,
+.chat-canvas-app .chat-canvas-markdown td {
+  padding: 0.7rem 0.85rem;
+  border-bottom: 1px solid hsl(0 0% 100% / 0.06);
+  vertical-align: top;
+}
+
+.chat-canvas-app .chat-canvas-markdown th {
+  background: hsl(0 0% 100% / 0.05);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.chat-canvas-app .chat-canvas-markdown tr:last-child td {
+  border-bottom: 0;
+}
+
+.chat-canvas-app .custom-scrollbar::-webkit-scrollbar,
+.chat-canvas-app .custom-scrollbar-dark::-webkit-scrollbar {
+  width: 4px;
+}
+
+.chat-canvas-app .custom-scrollbar::-webkit-scrollbar-track,
+.chat-canvas-app .custom-scrollbar-dark::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-canvas-app .custom-scrollbar::-webkit-scrollbar-thumb {
+  background: hsl(0 0% 100% / 0.1);
+  border-radius: 20px;
+}
+
+.chat-canvas-app .custom-scrollbar:hover::-webkit-scrollbar-thumb {
+  background: hsl(0 0% 100% / 0.2);
+}
+
+.chat-canvas-app .custom-scrollbar-dark::-webkit-scrollbar-thumb {
+  background: hsl(0 0% 0% / 0.18);
+  border-radius: 20px;
+}
+
+.chat-canvas-app .custom-scrollbar-dark:hover::-webkit-scrollbar-thumb {
+  background: hsl(0 0% 0% / 0.28);
+}
+
+@keyframes node-appear {
+  0% {
+    opacity: 0;
+    transform: scale(0.9) translateY(8px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(12px) skewX(-1deg);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) skewX(0);
+  }
+}
+
+.chat-canvas-app .node-appear {
+  animation: node-appear 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.chat-canvas-app .animate-fade-in {
+  animation: fade-in 0.2s ease-out;
+}
+
+.chat-canvas-app .animate-chat-entry {
+  animation: slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@media (max-width: 920px) {
+  .canvas-model-picker-dialog {
+    width: min(100%, 760px);
+    border-radius: 28px;
+  }
+
+  .canvas-model-picker-dialog__body {
+    grid-template-columns: 1fr;
+  }
+
+  .canvas-model-picker-dialog__summary {
+    order: 2;
+  }
+
+  .canvas-model-picker-dialog__list {
+    order: 1;
+    max-height: 52vh;
+  }
+}
+
+@media (max-width: 640px) {
+  .canvas-model-picker-backdrop {
+    padding: 0.75rem;
+  }
+
+  .canvas-model-picker-dialog {
+    max-height: 96vh;
+    border-radius: 24px;
+  }
+
+  .canvas-model-picker-dialog__header,
+  .canvas-model-picker-dialog__body {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .canvas-model-picker-dialog__title {
+    max-width: none;
+    font-size: clamp(1.65rem, 8vw, 2.2rem);
+  }
+
+  .canvas-model-picker-dialog__copy {
+    max-width: none;
+    font-size: 0.92rem;
+  }
+
+  .canvas-model-picker-dialog__summary-frame {
+    padding: 1rem;
+    border-radius: 24px;
+  }
+
+  .canvas-model-picker-dialog__option {
+    padding: 0.9rem;
+    border-radius: 20px;
+  }
+}
+
+.chat-canvas-node-note--collapsed {
+  border-radius: 50% !important;
+  border-width: 3px !important;
+  background: #d4a34d !important;
+  box-shadow: 0 12px 40px rgba(212, 163, 77, 0.4) !important;
+  overflow: visible !important;
+}
+
+.chat-canvas-node-note--collapsed .react-flow__handle {
+  display: none !important;
+}
diff --git a/frontend/src/components/chat-canvas/pdfExport.test.ts b/frontend/src/components/chat-canvas/pdfExport.test.ts
new file mode 100644
index 0000000..644535a
--- /dev/null
+++ b/frontend/src/components/chat-canvas/pdfExport.test.ts
@@ -0,0 +1,239 @@
+import { describe, expect, it, vi } from 'vitest'
+import type { ChatCanvasFlowNode } from './types'
+import { parseMarkdownBlocks, renderSelectedNodesPdf } from './pdfExport'
+
+function makeNode(
+    id: string,
+    title: string,
+    content: string,
+    overrides: Partial<ChatCanvasFlowNode['data']> = {},
+    role: 'user' | 'assistant' = 'assistant',
+): ChatCanvasFlowNode {
+    return {
+        id,
+        type: 'ideaNode',
+        position: { x: 0, y: 0 },
+        data: {
+            nodeId: id,
+            title,
+            nodeType: 'response',
+            content: '',
+            isCollapsed: false,
+            expandedWidth: null,
+            expandedHeight: null,
+            loading: false,
+            noteGenerating: false,
+            messages: [
+                {
+                    id: `${id}-m1`,
+                    role,
+                    content,
+                    imageUrl: null,
+                    provider: null,
+                    model: null,
+                    createdAt: '2026-04-19T00:00:00.000Z',
+                    updatedAt: '2026-04-19T00:00:00.000Z',
+                    canBranch: false,
+                },
+            ],
+            preferredProvider: null,
+            preferredModel: null,
+            modelOptions: [],
+            canDelete: true,
+            showFloatingLabel: false,
+            onCreateChild: vi.fn(),
+            onDelete: vi.fn(),
+            onUpdateTitle: vi.fn(),
+            onUpdateContent: vi.fn(),
+            onSendMessage: vi.fn(async () => true),
+            onSendImagePrompt: vi.fn(async () => true),
+            onGenerateNote: vi.fn(),
+            onToggleCollapse: vi.fn(),
+            onProviderModelChange: vi.fn(),
+            onEditMessage: vi.fn(async () => true),
+            onMoveMessagesToBranch: vi.fn(async () => true),
+            onResize: vi.fn(),
+            exportSummaryContent: null,
+            ...overrides,
+        },
+    }
+}
+
+function createFakePdf() {
+    const calls: Array<{ type: string; text?: string; x?: number; page: number }> = []
+    const imageCalls: Array<{ dataUrl: string; page: number }> = []
+    let currentPage = 1
+    const pageSize = { getWidth: () => 210, getHeight: () => 297 }
+
+    const pdf = {
+        addPage: () => {
+            currentPage += 1
+        },
+        setPage: (pageNumber: number) => {
+            currentPage = pageNumber
+        },
+        getNumberOfPages: () => currentPage,
+        getPageWidth: () => pageSize.getWidth(),
+        getPageHeight: () => pageSize.getHeight(),
+        setFont: vi.fn(),
+        setFontSize: vi.fn(),
+        setTextColor: vi.fn(),
+        setFillColor: vi.fn(),
+        setDrawColor: vi.fn(),
+        setLineWidth: vi.fn(),
+        text: (text: string, x: number) => {
+            calls.push({ type: 'text', text, x, page: currentPage })
+        },
+        splitTextToSize: (text: string, maxWidth: number) => {
+            const maxChars = Math.max(12, Math.floor(maxWidth / 2.2))
+            const words = text.split(/\s+/)
+            const lines: string[] = []
+            let line = ''
+            for (const word of words) {
+                const candidate = line ? `${line} ${word}` : word
+                if (candidate.length > maxChars && line) {
+                    lines.push(line)
+                    line = word
+                } else {
+                    line = candidate
+                }
+            }
+            if (line)
+                lines.push(line)
+            return lines.length > 0 ? lines : ['']
+        },
+        getTextWidth: (text: string) => text.length * 2.2,
+        rect: vi.fn(),
+        roundedRect: vi.fn(),
+        line: vi.fn(),
+        addImage: (dataUrl: string) => {
+            imageCalls.push({ dataUrl, page: currentPage })
+        },
+        save: vi.fn(),
+        internal: { pageSize },
+    }
+
+    return { pdf, calls, imageCalls }
+}
+
+describe('parseMarkdownBlocks', () => {
+    it('parses the supported markdown blocks and preserves unicode text', () => {
+        const blocks = parseMarkdownBlocks(`# Title
+
+Paragraph with **bold**, [link](https://example.com), and unicode • symbols.
+
+- First item
+  - Nested item
+1. Second item
+
+> A quoted line
+
+\`\`\`ts
+const n = 1
+console.log(n)
+\`\`\`
+
+| Col A | Col B |
+| --- | --- |
+| One | Two |
+
+![Chart](data:image/png;base64,aaa)
+`)
+
+        expect(blocks.map(block => block.type)).toEqual([
+            'heading',
+            'paragraph',
+            'list',
+            'list',
+            'blockquote',
+            'code',
+            'table',
+            'image',
+        ])
+        expect(blocks[0]).toMatchObject({ type: 'heading', level: 1, text: 'Title' })
+        expect(blocks[1]).toMatchObject({
+            type: 'paragraph',
+            text: 'Paragraph with bold, link (https://example.com), and unicode • symbols.',
+        })
+        expect(blocks[2]).toMatchObject({
+            type: 'list',
+            ordered: false,
+            items: [
+                { level: 0, text: 'First item' },
+                { level: 1, text: 'Nested item' },
+            ],
+        })
+        expect(blocks[3]).toMatchObject({
+            type: 'list',
+            ordered: true,
+            items: [{ level: 0, number: 1, text: 'Second item' }],
+        })
+        expect(blocks[5]).toMatchObject({
+            type: 'code',
+            language: 'ts',
+            text: 'const n = 1\nconsole.log(n)',
+        })
+        expect(blocks[6]).toMatchObject({
+            type: 'table',
+            headers: ['Col A', 'Col B'],
+            rows: [['One', 'Two']],
+        })
+    })
+})
+
+describe('renderSelectedNodesPdf', () => {
+    it('renders selected nodes in source order and accepts images', async () => {
+        const { pdf, calls, imageCalls } = createFakePdf()
+        const nodeA = makeNode('node-a', 'Alpha Node', 'First node content with • glyph.', {}, 'user')
+        const nodeB = makeNode(
+            'node-b',
+            'Beta Node',
+            '## Heading\n\n- One\n- Two',
+            {
+                exportSummaryContent: 'Summary with **markdown**.',
+                messages: [
+                    {
+                        id: 'node-b-m1',
+                        role: 'assistant',
+                        content: 'Image attachment below.',
+                        imageUrl: 'https://example.com/image.png',
+                        provider: null,
+                        model: null,
+                        createdAt: '2026-04-19T00:00:00.000Z',
+                        updatedAt: '2026-04-19T00:00:00.000Z',
+                        canBranch: false,
+                    },
+                ],
+            },
+        )
+
+        await renderSelectedNodesPdf(pdf, {
+            canvasName: 'Chat Export',
+            nodes: [nodeB, nodeA],
+            selectedNodeIds: {
+                'node-a': true,
+                'node-b': true,
+            },
+            selectedSummaries: {
+                'node-b': true,
+            },
+            imageLoader: async () => ({
+                dataUrl: 'data:image/png;base64,aaaa',
+                width: 400,
+                height: 200,
+                format: 'PNG',
+            }),
+        })
+
+        const renderedTitles = calls
+            .filter(call => call.type === 'text')
+            .map(call => call.text ?? '')
+            .filter(text => text === 'Beta Node' || text === 'Alpha Node')
+
+        expect(renderedTitles).toEqual(['Beta Node', 'Alpha Node'])
+        expect(calls.some(call => call.text === 'User' && (call.x ?? 0) > 50)).toBe(true)
+        expect(calls.some(call => call.text === 'Assistant' && (call.x ?? 0) < 60)).toBe(true)
+        expect(imageCalls).toHaveLength(1)
+        expect(imageCalls[0]?.dataUrl).toBe('data:image/png;base64,aaaa')
+    })
+})
diff --git a/frontend/src/components/chat-canvas/pdfExport.ts b/frontend/src/components/chat-canvas/pdfExport.ts
new file mode 100644
index 0000000..f90fa1c
--- /dev/null
+++ b/frontend/src/components/chat-canvas/pdfExport.ts
@@ -0,0 +1,947 @@
+import type { ChatCanvasFlowNode, ChatCanvasMessageLike } from './types'
+
+export interface PdfImageAsset {
+    dataUrl: string
+    width: number
+    height: number
+    format: 'PNG' | 'JPEG'
+}
+
+export interface PdfDocumentAdapter {
+    addPage(): void
+    setPage(pageNumber: number): void
+    getNumberOfPages(): number
+    getPageWidth(): number
+    getPageHeight(): number
+    setFont(fontName: string, fontStyle?: string): void
+    setFontSize(size: number): void
+    setTextColor(color: string): void
+    setFillColor(color: string): void
+    setDrawColor(color: string): void
+    setLineWidth(width: number): void
+    text(text: string, x: number, y: number, options?: { align?: 'left' | 'center' | 'right' }): void
+    splitTextToSize(text: string, maxWidth: number): string[]
+    getTextWidth(text: string): number
+    rect(x: number, y: number, width: number, height: number, style?: 'F' | 'S' | 'FD' | 'DF'): void
+    roundedRect(x: number, y: number, width: number, height: number, rx: number, ry: number, style?: 'F' | 'S' | 'FD' | 'DF'): void
+    line(x1: number, y1: number, x2: number, y2: number): void
+    addImage(dataUrl: string, format: 'PNG' | 'JPEG', x: number, y: number, width: number, height: number): void
+    save(fileName: string): void
+    internal?: {
+        pageSize: {
+            getWidth(): number
+            getHeight(): number
+        }
+    }
+}
+
+export interface PdfExportOptions {
+    canvasName: string
+    nodes: ChatCanvasFlowNode[]
+    selectedNodeIds: Record<string, boolean>
+    selectedSummaries: Record<string, boolean>
+    imageLoader?: PdfImageLoader
+}
+
+export type PdfImageLoader = (src: string) => Promise<PdfImageAsset | null>
+
+export type MarkdownBlock =
+    | { type: 'heading'; level: 1 | 2 | 3 | 4 | 5 | 6; text: string }
+    | { type: 'paragraph'; text: string }
+    | { type: 'list'; ordered: boolean; items: Array<{ level: number; number?: number; text: string }> }
+    | { type: 'blockquote'; text: string }
+    | { type: 'code'; language: string | null; text: string }
+    | { type: 'table'; headers: string[]; rows: string[][] }
+    | { type: 'image'; src: string; alt: string }
+    | { type: 'rule' }
+
+const FONT_REGULAR_URL = '/pdf-fonts/Arial-Unicode.ttf'
+const FONT_MONO_URL = '/pdf-fonts/Courier-New.ttf'
+const FONT_REGULAR_NAME = 'ArialUnicode'
+const FONT_MONO_NAME = 'CourierNew'
+
+type FontAssetBundle = {
+    regular: string
+    mono: string
+}
+
+let fontAssetsCache: FontAssetBundle | null = null
+let fontAssetPromise: Promise<FontAssetBundle> | null = null
+
+export function sanitizePdfText(value: string): string {
+    return value
+        .replace(/\r\n/g, '\n')
+        .replace(/\r/g, '\n')
+        .replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f]/g, '')
+}
+
+function stripInlineMarkdown(text: string): string {
+    return sanitizePdfText(text)
+        .replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '$1')
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '$1 ($2)')
+        .replace(/`([^`]+)`/g, '$1')
+        .replace(/\*\*([^*]+)\*\*/g, '$1')
+        .replace(/__([^_]+)__/g, '$1')
+        .replace(/\*([^*]+)\*/g, '$1')
+        .replace(/_([^_]+)_/g, '$1')
+        .replace(/~~([^~]+)~~/g, '$1')
+}
+
+function normalizeWhitespace(text: string): string {
+    return stripInlineMarkdown(text).replace(/[ \t]+/g, ' ').trim()
+}
+
+function isListLine(line: string): boolean {
+    return /^(\s*)(?:[-*+]|(\d+)\.)\s+/.test(line)
+}
+
+function isHeadingLine(line: string): boolean {
+    return /^\s*#{1,6}\s+/.test(line)
+}
+
+function isRuleLine(line: string): boolean {
+    return /^\s*(?:---+|\*\*\*+|___+)\s*$/.test(line)
+}
+
+function isFenceLine(line: string): boolean {
+    return /^\s*```/.test(line)
+}
+
+function isImageLine(line: string): boolean {
+    return /^\s*!\[[^\]]*]\([^)]+\)\s*$/.test(line)
+}
+
+function isTableSeparatorRow(line: string): boolean {
+    const trimmed = line.trim()
+    if (!trimmed.includes('|'))
+        return false
+
+    const cells = splitTableRow(trimmed)
+    return cells.length > 0 && cells.every(cell => /^:?-{3,}:?$/.test(cell.replace(/\s+/g, '')))
+}
+
+function isTableStart(lines: string[], index: number): boolean {
+    return (
+        index + 1 < lines.length
+        && lines[index].includes('|')
+        && isTableSeparatorRow(lines[index + 1])
+    )
+}
+
+function splitTableRow(row: string): string[] {
+    return row
+        .trim()
+        .replace(/^\|/, '')
+        .replace(/\|$/, '')
+        .split('|')
+        .map(cell => normalizeWhitespace(cell))
+}
+
+function startsBlock(line: string): boolean {
+    return isHeadingLine(line)
+        || isListLine(line)
+        || isFenceLine(line)
+        || isRuleLine(line)
+        || isImageLine(line)
+        || /^\s*>/.test(line)
+}
+
+export function parseMarkdownBlocks(rawInput: string): MarkdownBlock[] {
+    const text = sanitizePdfText(rawInput)
+    const lines = text.split('\n')
+    const blocks: MarkdownBlock[] = []
+    let index = 0
+
+    while (index < lines.length) {
+        const line = lines[index]
+        const trimmed = line.trim()
+
+        if (!trimmed) {
+            index += 1
+            continue
+        }
+
+        const imageMatch = trimmed.match(/^!\[([^\]]*)]\(([^)]+)\)\s*$/)
+        if (imageMatch) {
+            blocks.push({ type: 'image', alt: imageMatch[1], src: imageMatch[2] })
+            index += 1
+            continue
+        }
+
+        const headingMatch = trimmed.match(/^(#{1,6})\s+(.+)$/)
+        if (headingMatch) {
+            blocks.push({
+                type: 'heading',
+                level: headingMatch[1].length as 1 | 2 | 3 | 4 | 5 | 6,
+                text: normalizeWhitespace(headingMatch[2]),
+            })
+            index += 1
+            continue
+        }
+
+        if (isRuleLine(trimmed)) {
+            blocks.push({ type: 'rule' })
+            index += 1
+            continue
+        }
+
+        const fenceMatch = trimmed.match(/^```(\w+)?\s*$/)
+        if (fenceMatch) {
+            const codeLines: string[] = []
+            index += 1
+            while (index < lines.length && !/^\s*```\s*$/.test(lines[index])) {
+                codeLines.push(lines[index])
+                index += 1
+            }
+            if (index < lines.length)
+                index += 1
+
+            blocks.push({
+                type: 'code',
+                language: fenceMatch[1] ?? null,
+                text: codeLines.join('\n'),
+            })
+            continue
+        }
+
+        if (/^\s*>/.test(trimmed)) {
+            const quoteLines: string[] = []
+            while (index < lines.length) {
+                const quoteLine = lines[index]
+                if (!quoteLine.trim() || !/^\s*>/.test(quoteLine))
+                    break
+
+                quoteLines.push(quoteLine.replace(/^\s*>\s?/, ''))
+                index += 1
+            }
+            blocks.push({ type: 'blockquote', text: quoteLines.map(normalizeWhitespace).join(' ') })
+            continue
+        }
+
+        if (isTableStart(lines, index)) {
+            const rows: string[][] = []
+            const headers = splitTableRow(lines[index])
+            index += 2
+
+            while (index < lines.length) {
+                const tableLine = lines[index]
+                if (!tableLine.trim() || !tableLine.includes('|'))
+                    break
+
+                rows.push(splitTableRow(tableLine))
+                index += 1
+            }
+
+            blocks.push({
+                type: 'table',
+                headers,
+                rows,
+            })
+            continue
+        }
+
+        if (isListLine(trimmed)) {
+            const items: Array<{ level: number; number?: number; text: string }> = []
+            const firstMatch = line.match(/^(\s*)(?:([-*+])|(\d+)\.)\s+(.+)$/)
+            const listIsOrdered = Boolean(firstMatch?.[3])
+            while (index < lines.length) {
+                const currentLine = lines[index]
+                const match = currentLine.match(/^(\s*)(?:([-*+])|(\d+)\.)\s+(.+)$/)
+                if (!match || Boolean(match[3]) !== listIsOrdered)
+                    break
+
+                const indent = match[1].length
+                const level = Math.floor(indent / 2)
+                const itemTextParts = [match[4]]
+                index += 1
+
+                while (index < lines.length) {
+                    const continuation = lines[index]
+                    if (!continuation.trim()) {
+                        index += 1
+                        break
+                    }
+
+                    if (startsBlock(continuation) || isListLine(continuation))
+                        break
+
+                    const continuationIndent = continuation.match(/^(\s*)/)?.[1].length ?? 0
+                    if (continuationIndent <= indent)
+                        break
+
+                    itemTextParts.push(continuation.trim())
+                    index += 1
+                }
+
+                items.push({
+                    level,
+                    number: match[3] ? Number(match[3]) : undefined,
+                    text: normalizeWhitespace(itemTextParts.join(' ')),
+                })
+
+                while (index < lines.length && !lines[index].trim())
+                    index += 1
+            }
+
+            blocks.push({ type: 'list', ordered: listIsOrdered, items })
+            continue
+        }
+
+        const paragraphLines: string[] = []
+        while (index < lines.length) {
+            const currentLine = lines[index]
+            if (!currentLine.trim()) {
+                index += 1
+                break
+            }
+
+            if (paragraphLines.length > 0 && (startsBlock(currentLine) || isTableStart(lines, index) || isListLine(currentLine.trim())))
+                break
+
+            paragraphLines.push(currentLine.trim())
+            index += 1
+        }
+
+        const paragraphText = normalizeWhitespace(paragraphLines.join(' '))
+        if (paragraphText)
+            blocks.push({ type: 'paragraph', text: paragraphText })
+    }
+
+    return blocks
+}
+
+export function parseMessageBlocks(message: ChatCanvasMessageLike): MarkdownBlock[] {
+    const blocks: MarkdownBlock[] = []
+    if (message.imageUrl?.trim()) {
+        blocks.push({
+            type: 'image',
+            src: message.imageUrl,
+            alt: message.role === 'user' ? 'User upload' : 'AI image',
+        })
+    }
+
+    blocks.push(...parseMarkdownBlocks(message.content))
+    return blocks
+}
+
+async function fetchFontAsBase64(url: string): Promise<string> {
+    const response = await fetch(url)
+    if (!response.ok)
+        throw new Error(`Unable to load font asset: ${url}`)
+
+    const buffer = await response.arrayBuffer()
+    let binary = ''
+    const bytes = new Uint8Array(buffer)
+    const chunkSize = 0x8000
+
+    for (let index = 0; index < bytes.length; index += chunkSize) {
+        const chunk = bytes.subarray(index, index + chunkSize)
+        binary += String.fromCharCode(...chunk)
+    }
+
+    return btoa(binary)
+}
+
+function getPageWidth(pdf: PdfDocumentAdapter): number {
+    if (typeof pdf.getPageWidth === 'function')
+        return pdf.getPageWidth()
+
+    return pdf.internal?.pageSize.getWidth?.() ?? 0
+}
+
+function getPageHeight(pdf: PdfDocumentAdapter): number {
+    if (typeof pdf.getPageHeight === 'function')
+        return pdf.getPageHeight()
+
+    return pdf.internal?.pageSize.getHeight?.() ?? 0
+}
+
+function lineHeightFor(fontSize: number): number {
+    return Math.max(4.5, fontSize * 0.45)
+}
+
+function splitText(pdf: PdfDocumentAdapter, text: string, maxWidth: number): string[] {
+    const lines = pdf.splitTextToSize(text, maxWidth)
+    return lines.length > 0 ? lines : ['']
+}
+
+function ensureSpace(
+    pdf: PdfDocumentAdapter,
+    cursorY: number,
+    requiredHeight: number,
+    margin: number,
+): number {
+    const pageHeight = getPageHeight(pdf)
+    if (cursorY + requiredHeight <= pageHeight - margin)
+        return cursorY
+
+    pdf.addPage()
+    return margin
+}
+
+function renderHeading(
+    pdf: PdfDocumentAdapter,
+    cursorY: number,
+    text: string,
+    level: 1 | 2 | 3 | 4 | 5 | 6,
+    margin: number,
+    contentWidth: number,
+): number {
+    const fontSizeMap: Record<number, number> = {
+        1: 18,
+        2: 15,
+        3: 13,
+        4: 12,
+        5: 11,
+        6: 10.5,
+    }
+    const fontSize = fontSizeMap[level]
+    const lines = splitText(pdf, text, contentWidth)
+    cursorY = ensureSpace(pdf, cursorY, lines.length * lineHeightFor(fontSize) + 4, margin)
+    cursorY += 2
+    pdf.setFont(FONT_REGULAR_NAME, 'normal')
+    pdf.setFontSize(fontSize)
+    pdf.setTextColor('#111827')
+    for (const line of lines) {
+        pdf.text(line, margin, cursorY)
+        cursorY += lineHeightFor(fontSize)
+    }
+    return cursorY + 2
+}
+
+function renderParagraph(
+    pdf: PdfDocumentAdapter,
+    cursorY: number,
+    text: string,
+    margin: number,
+    contentWidth: number,
+    fontSize = 10.5,
+    color = '#374151',
+): number {
+    const lines = splitText(pdf, text, contentWidth)
+    cursorY = ensureSpace(pdf, cursorY, lines.length * lineHeightFor(fontSize) + 2, margin)
+    pdf.setFont(FONT_REGULAR_NAME, 'normal')
+    pdf.setFontSize(fontSize)
+    pdf.setTextColor(color)
+    for (const line of lines) {
+        cursorY = ensureSpace(pdf, cursorY, lineHeightFor(fontSize), margin)
+        pdf.text(line, margin, cursorY)
+        cursorY += lineHeightFor(fontSize)
+    }
+    return cursorY + 1.5
+}
+
+function renderRule(pdf: PdfDocumentAdapter, cursorY: number, margin: number, contentWidth: number): number {
+    cursorY = ensureSpace(pdf, cursorY, 4, margin)
+    pdf.setDrawColor('#e5e7eb')
+    pdf.setLineWidth(0.3)
+    pdf.line(margin, cursorY + 1.5, margin + contentWidth, cursorY + 1.5)
+    return cursorY + 6
+}
+
+function renderQuote(
+    pdf: PdfDocumentAdapter,
+    cursorY: number,
+    text: string,
+    margin: number,
+    contentWidth: number,
+): number {
+    const lines = splitText(pdf, text, contentWidth - 6)
+    const blockHeight = lines.length * lineHeightFor(10.2) + 4
+    cursorY = ensureSpace(pdf, cursorY, blockHeight, margin)
+    pdf.setDrawColor('#d6b35b')
+    pdf.setLineWidth(0.5)
+    pdf.line(margin, cursorY, margin, cursorY + blockHeight - 1)
+    pdf.setTextColor('#52525b')
+    pdf.setFont(FONT_REGULAR_NAME, 'normal')
+    pdf.setFontSize(10.2)
+    let lineY = cursorY + 2
+    for (const line of lines) {
+        pdf.text(line, margin + 4, lineY)
+        lineY += lineHeightFor(10.2)
+    }
+    return cursorY + blockHeight + 1.5
+}
+
+function renderList(
+    pdf: PdfDocumentAdapter,
+    cursorY: number,
+    items: Array<{ level: number; number?: number; text: string }>,
+    ordered: boolean,
+    margin: number,
+    contentWidth: number,
+): number {
+    const baseIndent = 4
+    const itemGap = 1.5
+    for (const [index, item] of items.entries()) {
+        const indent = baseIndent + item.level * 5
+        const bullet = ordered ? `${item.number ?? index + 1}.` : '•'
+        const bulletWidth = pdf.getTextWidth(bullet) + 2
+        const textWidth = contentWidth - indent - bulletWidth
+        const lines = splitText(pdf, item.text, textWidth)
+        cursorY = ensureSpace(pdf, cursorY, lines.length * lineHeightFor(10.2) + itemGap, margin)
+
+        pdf.setFont(FONT_REGULAR_NAME, 'normal')
+        pdf.setFontSize(10.2)
+        pdf.setTextColor('#374151')
+        pdf.text(bullet, margin + indent, cursorY)
+
+        let lineY = cursorY
+        for (const line of lines) {
+            pdf.text(line, margin + indent + bulletWidth, lineY)
+            lineY += lineHeightFor(10.2)
+        }
+        cursorY = lineY + itemGap
+    }
+
+    return cursorY + 1.5
+}
+
+function renderCode(
+    pdf: PdfDocumentAdapter,
+    cursorY: number,
+    text: string,
+    margin: number,
+    contentWidth: number,
+): number {
+    const paddingX = 4
+    const paddingY = 3
+    const fontSize = 9
+    const lineHeight = lineHeightFor(fontSize)
+    const lines = text.split('\n').map(line => line.replace(/\t/g, '    '))
+    const wrappedLines = lines.flatMap(line => splitText(pdf, line, contentWidth - paddingX * 2))
+    const blockHeight = wrappedLines.length * lineHeight + paddingY * 2
+    cursorY = ensureSpace(pdf, cursorY, blockHeight, margin)
+
+    pdf.setFillColor('#f8fafc')
+    pdf.setDrawColor('#e2e8f0')
+    pdf.setLineWidth(0.25)
+    pdf.roundedRect(margin, cursorY, contentWidth, blockHeight, 2.5, 2.5, 'FD')
+    pdf.setFont(FONT_MONO_NAME, 'normal')
+    pdf.setFontSize(fontSize)
+    pdf.setTextColor('#0f172a')
+
+    let lineY = cursorY + paddingY + fontSize * 0.25
+    for (const line of wrappedLines) {
+        pdf.text(line, margin + paddingX, lineY)
+        lineY += lineHeight
+    }
+
+    return cursorY + blockHeight + 1.5
+}
+
+async function renderImage(
+    pdf: PdfDocumentAdapter,
+    cursorY: number,
+    image: PdfImageAsset | null,
+    alt: string,
+    margin: number,
+    contentWidth: number,
+): Promise<number> {
+    if (!image) {
+        return renderParagraph(pdf, cursorY, `[Image unavailable: ${alt || 'attachment'}]`, margin, contentWidth, 10.2, '#6b7280')
+    }
+
+    const maxImageWidth = contentWidth
+    const scale = Math.min(1, maxImageWidth / image.width)
+    const width = Math.max(28, image.width * scale)
+    const height = Math.max(20, image.height * scale)
+    cursorY = ensureSpace(pdf, cursorY, height + 4, margin)
+    pdf.addImage(image.dataUrl, image.format, margin, cursorY, width, height)
+    return cursorY + height + 2
+}
+
+function renderTable(
+    pdf: PdfDocumentAdapter,
+    cursorY: number,
+    headers: string[],
+    rows: string[][],
+    margin: number,
+    contentWidth: number,
+): number {
+    const fontSize = 9.5
+    const paddingX = 2.5
+    const paddingY = 2
+    const rowGap = 0
+    const columnCount = Math.max(headers.length, ...rows.map(row => row.length))
+    const normalizedHeaders = Array.from({ length: columnCount }, (_, index) => headers[index] ?? '')
+    const normalizedRows = rows.map(row => Array.from({ length: columnCount }, (_, index) => row[index] ?? ''))
+    const allRows = [normalizedHeaders, ...normalizedRows]
+
+    const naturalWidths = Array.from({ length: columnCount }, (_, columnIndex) => {
+        const longest = allRows.reduce((width, row) => Math.max(width, pdf.getTextWidth(normalizeWhitespace(row[columnIndex] ?? ''))), 0)
+        return Math.max(16, longest + paddingX * 2)
+    })
+    const totalNaturalWidth = naturalWidths.reduce((sum, width) => sum + width, 0)
+    const scale = totalNaturalWidth > contentWidth ? contentWidth / totalNaturalWidth : 1
+    const columnWidths = naturalWidths.map(width => width * scale)
+
+    const rowHeights = allRows.map(row => {
+        const cellHeights = row.map((cell, index) => {
+            const wrapped = splitText(pdf, normalizeWhitespace(cell), Math.max(12, columnWidths[index] - paddingX * 2))
+            return wrapped.length * lineHeightFor(fontSize) + paddingY * 2
+        })
+        return Math.max(8, ...cellHeights)
+    })
+
+    const tableHeight = rowHeights.reduce((sum, height) => sum + height, 0) + rowGap * (allRows.length - 1)
+    cursorY = ensureSpace(pdf, cursorY, tableHeight + 2, margin)
+
+    let currentY = cursorY
+    allRows.forEach((row, rowIndex) => {
+        const rowHeight = rowHeights[rowIndex]
+        let currentX = margin
+        row.forEach((cell, columnIndex) => {
+            const columnWidth = columnWidths[columnIndex]
+            const wrapped = splitText(pdf, normalizeWhitespace(cell), Math.max(12, columnWidth - paddingX * 2))
+            pdf.setFillColor(rowIndex === 0 ? '#e2e8f0' : '#ffffff')
+            pdf.setDrawColor('#cbd5e1')
+            pdf.setLineWidth(0.2)
+            pdf.rect(currentX, currentY, columnWidth, rowHeight, 'FD')
+            pdf.setFont(FONT_REGULAR_NAME, 'normal')
+            pdf.setFontSize(fontSize)
+            pdf.setTextColor('#0f172a')
+            let cellY = currentY + paddingY + fontSize * 0.25
+            wrapped.forEach(line => {
+                pdf.text(line, currentX + paddingX, cellY)
+                cellY += lineHeightFor(fontSize)
+            })
+            currentX += columnWidth
+        })
+        currentY += rowHeight
+    })
+
+    return currentY + 1.5
+}
+
+async function loadImageAsset(loader: PdfImageLoader | undefined, src: string): Promise<PdfImageAsset | null> {
+    if (loader)
+        return loader(src)
+
+    const response = await fetch(src)
+    if (!response.ok)
+        return null
+
+    const blob = await response.blob()
+    const dataUrl = await new Promise<string>((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onerror = () => reject(reader.error ?? new Error('Unable to read image blob'))
+        reader.onload = () => resolve(String(reader.result))
+        reader.readAsDataURL(blob)
+    })
+
+    const dimensions = await new Promise<{ width: number; height: number } | null>(resolve => {
+        const image = new Image()
+        image.onload = () => resolve({ width: image.naturalWidth, height: image.naturalHeight })
+        image.onerror = () => resolve(null)
+        image.src = dataUrl
+    })
+
+    if (!dimensions)
+        return null
+
+    return {
+        dataUrl,
+        width: dimensions.width,
+        height: dimensions.height,
+        format: blob.type.includes('png') ? 'PNG' : 'JPEG',
+    }
+}
+
+function getSelectedNodes(nodes: ChatCanvasFlowNode[], selectedNodeIds: Record<string, boolean>): ChatCanvasFlowNode[] {
+    return nodes.filter(node => selectedNodeIds[node.id])
+}
+
+function renderNodeHeader(
+    pdf: PdfDocumentAdapter,
+    cursorY: number,
+    nodeTitle: string,
+    margin: number,
+    contentWidth: number,
+    exportLabel: string,
+): number {
+    const titleFontSize = 16.5
+    const metaFontSize = 8.5
+
+    cursorY = ensureSpace(pdf, cursorY, 18, margin)
+
+    pdf.setFont(FONT_REGULAR_NAME, 'normal')
+    pdf.setFontSize(titleFontSize)
+    pdf.setTextColor('#111827')
+    const titleLines = splitText(pdf, nodeTitle || 'Untitled Node', contentWidth)
+    const titleLineHeight = lineHeightFor(titleFontSize)
+    for (const line of titleLines) {
+        pdf.text(line, margin, cursorY)
+        cursorY += titleLineHeight
+    }
+
+    cursorY += 0.5
+    const exportText = `Exported ${exportLabel}`
+    pdf.setFontSize(metaFontSize)
+    pdf.setTextColor('#6b7280')
+    pdf.text(exportText, margin, cursorY)
+
+    return cursorY + 7
+}
+
+function renderDocumentBanner(
+    pdf: PdfDocumentAdapter,
+    cursorY: number,
+    canvasName: string,
+    totalNodes: number,
+    margin: number,
+    contentWidth: number,
+    exportLabel: string,
+): number {
+    const bannerHeight = 16
+    cursorY = ensureSpace(pdf, cursorY, bannerHeight + 3, margin)
+
+    pdf.setFillColor('#0f172a')
+    pdf.roundedRect(margin, cursorY, contentWidth, bannerHeight, 5, 5, 'F')
+
+    pdf.setFont(FONT_REGULAR_NAME, 'normal')
+    pdf.setFontSize(15)
+    pdf.setTextColor('#ffffff')
+    pdf.text(canvasName || 'Chat Export', margin + 5, cursorY + 7.5)
+
+    pdf.setFontSize(8.5)
+    pdf.setTextColor('#cbd5e1')
+    pdf.text(`Selected nodes: ${totalNodes} • Exported ${exportLabel}`, margin + 5, cursorY + 14)
+
+    return cursorY + bannerHeight + 3
+}
+
+function renderRolePill(
+    pdf: PdfDocumentAdapter,
+    cursorY: number,
+    role: 'user' | 'assistant',
+    x: number,
+): number {
+    const label = role === 'user' ? 'User' : 'Assistant'
+    const pillWidth = pdf.getTextWidth(label) + 12
+    const pillColor = role === 'user' ? '#0f172a' : '#0f766e'
+    pdf.setFillColor(pillColor)
+    pdf.roundedRect(x, cursorY, pillWidth, 8, 4, 4, 'F')
+    pdf.setFont(FONT_REGULAR_NAME, 'normal')
+    pdf.setFontSize(9)
+    pdf.setTextColor('#ffffff')
+    pdf.text(label, x + 6, cursorY + 5.5)
+    return cursorY + 12
+}
+
+async function renderBlock(
+    pdf: PdfDocumentAdapter,
+    cursorY: number,
+    block: MarkdownBlock,
+    margin: number,
+    contentWidth: number,
+    imageLoader: PdfImageLoader | undefined,
+): Promise<number> {
+    switch (block.type) {
+        case 'heading':
+            return renderHeading(pdf, cursorY, block.text, block.level, margin, contentWidth)
+        case 'paragraph':
+            return renderParagraph(pdf, cursorY, block.text, margin, contentWidth)
+        case 'list':
+            return renderList(pdf, cursorY, block.items, block.ordered, margin, contentWidth)
+        case 'blockquote':
+            return renderQuote(pdf, cursorY, block.text, margin, contentWidth)
+        case 'code':
+            return renderCode(pdf, cursorY, block.text, margin, contentWidth)
+        case 'table':
+            return renderTable(pdf, cursorY, block.headers, block.rows, margin, contentWidth)
+        case 'image':
+            return renderImage(pdf, cursorY, await loadImageAsset(imageLoader, block.src), block.alt, margin, contentWidth)
+        case 'rule':
+            return renderRule(pdf, cursorY, margin, contentWidth)
+        default:
+            return cursorY
+    }
+}
+
+async function renderMessage(
+    pdf: PdfDocumentAdapter,
+    cursorY: number,
+    message: ChatCanvasMessageLike,
+    margin: number,
+    contentWidth: number,
+    imageLoader: PdfImageLoader | undefined,
+    pageWidth: number,
+): Promise<number> {
+    const bubbleWidth = message.role === 'user'
+        ? Math.min(contentWidth * 0.72, 138)
+        : contentWidth
+    const x = message.role === 'user' ? pageWidth - margin - bubbleWidth : margin
+    const blocks = parseMessageBlocks(message)
+    const innerWidth = bubbleWidth - 8
+    cursorY = ensureSpace(pdf, cursorY, 14, margin)
+
+    const pillX = message.role === 'user' ? x + bubbleWidth - 58 : x + 8
+    renderRolePill(pdf, cursorY, message.role, pillX)
+
+    if (blocks.length === 0) {
+        return renderParagraph(pdf, cursorY + 9, 'No message content.', x + 8, innerWidth, 10.5, '#374151')
+    }
+
+    let blockY = cursorY + 10
+    for (const block of blocks) {
+        blockY = await renderBlock(pdf, blockY, block, x, bubbleWidth, imageLoader)
+    }
+
+    return blockY + 2
+}
+
+async function renderSummarySection(
+    pdf: PdfDocumentAdapter,
+    cursorY: number,
+    summary: string,
+    margin: number,
+    contentWidth: number,
+    imageLoader: PdfImageLoader | undefined,
+): Promise<number> {
+    const blocks = parseMarkdownBlocks(summary)
+    cursorY = ensureSpace(pdf, cursorY, 18, margin)
+
+    pdf.setFont(FONT_REGULAR_NAME, 'normal')
+    pdf.setFontSize(10)
+    pdf.setTextColor('#92400e')
+    pdf.text('AI Summary', margin, cursorY + 4)
+
+    pdf.setDrawColor('#f59e0b')
+    pdf.setLineWidth(0.3)
+    pdf.line(margin, cursorY + 7, margin + contentWidth, cursorY + 7)
+
+    cursorY += 12
+    for (const block of blocks) {
+        cursorY = await renderBlock(pdf, cursorY, block, margin, contentWidth, imageLoader)
+    }
+
+    return cursorY + 4
+}
+
+function addPageFooters(pdf: PdfDocumentAdapter, canvasName: string, exportLabel: string): void {
+    const totalPages = pdf.getNumberOfPages()
+    for (let page = 1; page <= totalPages; page += 1) {
+        pdf.setPage(page)
+        const pageWidth = pdf.getPageWidth()
+        const pageHeight = pdf.getPageHeight()
+        pdf.setFont(FONT_REGULAR_NAME, 'normal')
+        pdf.setFontSize(8.5)
+        pdf.setTextColor('#6b7280')
+        pdf.text(`${canvasName || 'Canvas'} • ${exportLabel}`, 16, pageHeight - 10)
+        pdf.text(`Page ${page} of ${totalPages}`, pageWidth - 16 - pdf.getTextWidth(`Page ${page} of ${totalPages}`), pageHeight - 10)
+    }
+}
+
+export async function renderSelectedNodesPdf(
+    pdf: PdfDocumentAdapter,
+    options: PdfExportOptions,
+): Promise<void> {
+    const exportLabel = new Date().toLocaleString(undefined, {
+        dateStyle: 'medium',
+        timeStyle: 'short',
+    })
+    const margin = 16
+    const pageWidth = getPageWidth(pdf)
+    const contentWidth = pageWidth - margin * 2
+    const selectedNodes = getSelectedNodes(options.nodes, options.selectedNodeIds)
+
+    if (selectedNodes.length === 0)
+        return
+
+    let cursorY = margin
+    cursorY = renderDocumentBanner(pdf, cursorY, options.canvasName || 'Chat Export', selectedNodes.length, margin, contentWidth, exportLabel)
+
+    for (const [index, node] of selectedNodes.entries()) {
+        if (index > 0) {
+            pdf.addPage()
+            cursorY = margin
+        }
+
+        cursorY = renderNodeHeader(
+            pdf,
+            cursorY,
+            node.data.title || 'Untitled Node',
+            margin,
+            contentWidth,
+            exportLabel,
+        )
+
+        if (node.data.messages.length === 0) {
+            cursorY = renderParagraph(pdf, cursorY, 'No messages captured for this node.', margin, contentWidth, 10.2, '#6b7280')
+        } else {
+            for (const message of node.data.messages) {
+                cursorY = await renderMessage(pdf, cursorY, message, margin, contentWidth, options.imageLoader, pageWidth)
+            }
+        }
+
+        if (options.selectedSummaries[node.id] && node.data.exportSummaryContent?.trim()) {
+            cursorY = await renderSummarySection(pdf, cursorY, node.data.exportSummaryContent, margin, contentWidth, options.imageLoader)
+        }
+    }
+
+    addPageFooters(pdf, options.canvasName, exportLabel)
+}
+
+export async function exportSelectedNodesAsPdf(options: PdfExportOptions): Promise<void> {
+    const { jsPDF } = await import('jspdf')
+    const pdf = new jsPDF({ unit: 'mm', format: 'a4', orientation: 'portrait' })
+
+    const adapter = {
+        addPage: () => pdf.addPage(),
+        setPage: (pageNumber: number) => pdf.setPage(pageNumber),
+        getNumberOfPages: () => pdf.getNumberOfPages(),
+        getPageWidth: () => pdf.internal.pageSize.getWidth(),
+        getPageHeight: () => pdf.internal.pageSize.getHeight(),
+        setFont: (fontName: string, fontStyle?: string) => pdf.setFont(fontName, fontStyle),
+        setFontSize: (size: number) => pdf.setFontSize(size),
+        setTextColor: (color: string) => pdf.setTextColor(color),
+        setFillColor: (color: string) => pdf.setFillColor(color),
+        setDrawColor: (color: string) => pdf.setDrawColor(color),
+        setLineWidth: (width: number) => pdf.setLineWidth(width),
+        text: (text: string, x: number, y: number, options?: { align?: 'left' | 'center' | 'right' }) => pdf.text(text, x, y, options),
+        splitTextToSize: (text: string, maxWidth: number) => pdf.splitTextToSize(text, maxWidth),
+        getTextWidth: (text: string) => pdf.getTextWidth(text),
+        rect: (x: number, y: number, width: number, height: number, style?: 'F' | 'S' | 'FD' | 'DF') => pdf.rect(x, y, width, height, style),
+        roundedRect: (x: number, y: number, width: number, height: number, rx: number, ry: number, style?: 'F' | 'S' | 'FD' | 'DF') => pdf.roundedRect(x, y, width, height, rx, ry, style),
+        line: (x1: number, y1: number, x2: number, y2: number) => pdf.line(x1, y1, x2, y2),
+        addImage: (dataUrl: string, format: 'PNG' | 'JPEG', x: number, y: number, width: number, height: number) => pdf.addImage(dataUrl, format, x, y, width, height),
+        save: (fileName: string) => pdf.save(fileName),
+        internal: pdf.internal,
+        addFileToVFS: (fileName: string, data: string) => pdf.addFileToVFS(fileName, data),
+        addFont: (fileName: string, fontName: string, fontStyle: string) => pdf.addFont(fileName, fontName, fontStyle),
+    } satisfies PdfDocumentAdapter & {
+        addFileToVFS?: (fileName: string, data: string) => void
+        addFont?: (fileName: string, fontName: string, fontStyle: string) => void
+    }
+
+    if (!fontAssetsCache) {
+        if (!fontAssetPromise) {
+            fontAssetPromise = Promise.all([
+                fetchFontAsBase64(FONT_REGULAR_URL),
+                fetchFontAsBase64(FONT_MONO_URL),
+            ])
+                .then(([regular, mono]) => {
+                    fontAssetsCache = { regular, mono }
+                    return fontAssetsCache
+                })
+                .finally(() => {
+                    fontAssetPromise = null
+                })
+        }
+
+        fontAssetsCache = await fontAssetPromise
+    }
+
+    const fontAssets = fontAssetsCache
+    if (!fontAssets)
+        throw new Error('Unable to load PDF font assets')
+
+    adapter.addFileToVFS('NotoSans-Regular.ttf', fontAssets.regular)
+    adapter.addFileToVFS('NotoSansMono-Regular.ttf', fontAssets.mono)
+    adapter.addFont('NotoSans-Regular.ttf', FONT_REGULAR_NAME, 'normal')
+    adapter.addFont('NotoSansMono-Regular.ttf', FONT_MONO_NAME, 'normal')
+
+    await renderSelectedNodesPdf(adapter, options)
+    adapter.save(`collee-export-${new Date().toISOString().slice(0, 10)}.pdf`)
+}
diff --git a/frontend/src/components/chat-canvas/types.ts b/frontend/src/components/chat-canvas/types.ts
new file mode 100644
index 0000000..c796f1f
--- /dev/null
+++ b/frontend/src/components/chat-canvas/types.ts
@@ -0,0 +1,59 @@
+import type { Edge, Node } from '@xyflow/react'
+import type { CanvasModelOption, ChatNodeType, LlmProviderId } from '@/types'
+
+export type ChatCanvasTheme = 'midnight' | 'monochrome' | 'slate'
+
+export interface ChatCanvasMessageLike {
+    id: number | string
+    role: 'user' | 'assistant'
+    content: string
+    imageUrl: string | null
+    provider: LlmProviderId | null
+    model: string | null
+    createdAt: string
+    updatedAt: string
+    canBranch: boolean
+}
+
+export interface ChatCanvasIdeaNodeData extends Record<string, unknown> {
+    nodeId: string
+    title: string
+    nodeType: ChatNodeType
+    content: string
+    isCollapsed: boolean
+    expandedWidth: number | null
+    expandedHeight: number | null
+    loading: boolean
+    /** True while waiting for an assistant reply after the user sent a chat message (not other node operations). */
+    showAssistantTyping?: boolean
+    noteGenerating: boolean
+    messages: ChatCanvasMessageLike[]
+    preferredProvider: LlmProviderId | null
+    preferredModel: string | null
+    modelOptions: CanvasModelOption[]
+    canDelete: boolean
+    showFloatingLabel: boolean
+    onCreateChild: (type: ChatNodeType, seedContent?: string) => void
+    onDelete: () => void
+    onUpdateTitle: (title: string) => void
+    onUpdateContent: (content: string) => void
+    onSendMessage: (text: string, imageUrl?: string) => Promise<boolean>
+    onSendImagePrompt: (prompt: string) => Promise<boolean>
+    onGenerateNote: () => void
+    onToggleCollapse: () => void
+    onProviderModelChange: (provider: LlmProviderId, model: string) => void
+    onEditMessage: (messageId: number | string, content: string) => Promise<boolean>
+    onMoveMessagesToBranch: (messageIds: Array<number | string>, transferMode: 'move' | 'copy') => Promise<boolean>
+    onResize: (width: number, height: number) => void
+    exportSummaryContent?: string | null
+    isExportSelectionMode?: boolean
+    isExportNodeSelected?: boolean
+    isExportSummaryIncluded?: boolean
+    onStartPdfExportSelection?: () => void
+    onToggleExportNodeSelected?: (checked: boolean) => void
+    onToggleExportSummaryIncluded?: (checked: boolean) => void
+    onExportAsText?: () => void
+}
+
+export type ChatCanvasFlowNode = Node<ChatCanvasIdeaNodeData, 'ideaNode'>
+export type ChatCanvasFlowEdge = Edge
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index e453008..3f7c09b 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -2,5 +2,5 @@
 // Examples:
 //   - Button.tsx
 //   - Input.tsx
-//   - ProtectedRoute.tsx (for route guards, needed for SCRUM-46/47)
+//   - Dialog.tsx
 export { }
diff --git a/frontend/src/context/AppThemeContext.tsx b/frontend/src/context/AppThemeContext.tsx
new file mode 100644
index 0000000..3223c19
--- /dev/null
+++ b/frontend/src/context/AppThemeContext.tsx
@@ -0,0 +1,85 @@
+import { createContext, useContext, useEffect, useLayoutEffect, useState, type ReactNode } from 'react'
+import type { ChatCanvasTheme } from '@/components/chat-canvas/types'
+
+const THEME_STORAGE_KEY = 'coliee-chat-canvas-theme'
+
+export interface AppThemeContextType {
+    theme: ChatCanvasTheme
+    setTheme: (theme: ChatCanvasTheme) => void
+}
+
+const AppThemeContext = createContext<AppThemeContextType | undefined>(undefined)
+
+function isChatCanvasTheme(value: string | null): value is ChatCanvasTheme {
+    return value === 'midnight' || value === 'monochrome' || value === 'slate'
+}
+
+export function readStoredTheme(): ChatCanvasTheme {
+    if (typeof window === 'undefined')
+        return 'midnight'
+
+    const storage = window.localStorage
+    if (!storage || typeof storage.getItem !== 'function')
+        return 'midnight'
+
+    const storedTheme = storage.getItem(THEME_STORAGE_KEY)
+    return isChatCanvasTheme(storedTheme) ? storedTheme : 'midnight'
+}
+
+function applyTheme(theme: ChatCanvasTheme) {
+    if (typeof document === 'undefined')
+        return
+
+    const { documentElement, body } = document
+    documentElement.dataset.appTheme = theme
+    documentElement.classList.remove('theme-midnight', 'theme-monochrome', 'theme-slate')
+    documentElement.classList.add(`theme-${theme}`)
+
+    if (body) {
+        body.dataset.appTheme = theme
+        body.classList.remove('theme-midnight', 'theme-monochrome', 'theme-slate')
+        body.classList.add(`theme-${theme}`)
+    }
+}
+
+export function AppThemeProvider({ children }: { children: ReactNode }) {
+    const [theme, setTheme] = useState<ChatCanvasTheme>(readStoredTheme)
+
+    useLayoutEffect(() => {
+        applyTheme(theme)
+    }, [theme])
+
+    useEffect(() => {
+        const storage = window.localStorage
+        if (!storage || typeof storage.setItem !== 'function')
+            return
+
+        storage.setItem(THEME_STORAGE_KEY, theme)
+    }, [theme])
+
+    useEffect(() => {
+        function handleStorage(event: StorageEvent) {
+            if (event.key !== THEME_STORAGE_KEY || !isChatCanvasTheme(event.newValue))
+                return
+
+            setTheme(event.newValue)
+        }
+
+        window.addEventListener('storage', handleStorage)
+        return () => window.removeEventListener('storage', handleStorage)
+    }, [])
+
+    return (
+        <AppThemeContext.Provider value={{ theme, setTheme }}>
+            {children}
+        </AppThemeContext.Provider>
+    )
+}
+
+export function useAppTheme(): AppThemeContextType {
+    const context = useContext(AppThemeContext)
+    if (!context)
+        throw new Error('useAppTheme must be used within an AppThemeProvider')
+
+    return context
+}
diff --git a/frontend/src/context/AuthContext.tsx b/frontend/src/context/AuthContext.tsx
index 30327d9..20aae75 100644
--- a/frontend/src/context/AuthContext.tsx
+++ b/frontend/src/context/AuthContext.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, ReactNode, useContext, createContext } from 'react'
 import { jwtDecode } from 'jwt-decode'
-import { AuthPayload, User } from '../types/types_index'
-import { logoutService } from '../services/authService'
+import { AuthPayload, User } from '../types'
+import { logoutService, getProfile } from '../services/authService'
 
 export interface AuthState {
     token: string | null
@@ -14,6 +14,7 @@ export interface AuthContextType extends AuthState {
     login: (token: string, refreshToken: string, isEmailVerified?: boolean, displayName?: string | null) => void
     logout: () => Promise<void>
     setEmailVerified: () => void
+    refreshProfile: () => Promise<void>
 }
 
 export const AuthContext = createContext<AuthContextType | undefined>(undefined)
@@ -56,6 +57,29 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         }
     }, [])
 
+    const refreshProfile = async () => {
+        if (!authState.token) return
+        try {
+            const profile = await getProfile()
+            if (profile.displayName) {
+                sessionStorage.setItem('displayName', profile.displayName)
+                setAuthState(prev => ({
+                    ...prev,
+                    user: prev.user ? { ...prev.user, displayName: profile.displayName } : null
+                }))
+            }
+        } catch (err) {
+            console.error('Failed to fetch profile', err)
+        }
+    }
+
+    // Automatically fetch profile if missing displayName
+    useEffect(() => {
+        if (authState.isAuthenticated && authState.user && !authState.user.displayName) {
+            void refreshProfile()
+        }
+    }, [authState.isAuthenticated, authState.user?.displayName])
+
     const login = (
         token: string,
         refreshToken: string,
@@ -114,7 +138,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }
 
     return (
-        <AuthContext.Provider value={{ ...authState, login, logout, setEmailVerified }}>
+        <AuthContext.Provider value={{ ...authState, login, logout, setEmailVerified, refreshProfile }}>
             {children}
         </AuthContext.Provider>
     )
diff --git a/frontend/src/index.css b/frontend/src/index.css
index cc08d54..d0eeaa0 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -28,6 +28,77 @@
 
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
   --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
+
+  --theme-surface-rgb: 255 255 255;
+  --theme-text-rgb: 17 17 17;
+  --theme-text-muted-rgb: 102 102 102;
+  --theme-border-rgb: 230 230 230;
+  --theme-accent-rgb: 17 17 17;
+  --theme-backdrop-rgb: 255 255 255;
+  --theme-surface-overlay-rgb: 255 255 255;
+}
+
+:root[data-app-theme='midnight'] {
+  --bg-light: #090a0b;
+  --bg-card: rgba(16, 17, 19, 0.9);
+  --bg-element: rgba(255, 255, 255, 0.05);
+  --bg-element-hov: rgba(255, 255, 255, 0.09);
+  --text-dark: #f5f5f5;
+  --text-muted: rgba(255, 255, 255, 0.58);
+  --border-light: rgba(255, 255, 255, 0.09);
+  --accent: #ffffff;
+  --shadow-sm: 0 18px 40px rgba(0, 0, 0, 0.22);
+  --shadow-md: 0 28px 64px rgba(0, 0, 0, 0.28);
+
+  --theme-surface-rgb: 16 17 19;
+  --theme-text-rgb: 245 245 245;
+  --theme-text-muted-rgb: 161 161 170;
+  --theme-border-rgb: 255 255 255;
+  --theme-accent-rgb: 255 255 255;
+  --theme-backdrop-rgb: 5 6 8;
+  --theme-surface-overlay-rgb: 255 255 255;
+}
+
+:root[data-app-theme='monochrome'] {
+  --bg-light: #f7f7f7;
+  --bg-card: #ffffff;
+  --bg-element: #f2f2f2;
+  --bg-element-hov: #e8e8e8;
+  --text-dark: #111111;
+  --text-muted: #666666;
+  --border-light: #e6e6e6;
+  --accent: #111111;
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
+
+  --theme-surface-rgb: 255 255 255;
+  --theme-text-rgb: 17 17 17;
+  --theme-text-muted-rgb: 102 102 102;
+  --theme-border-rgb: 230 230 230;
+  --theme-accent-rgb: 17 17 17;
+  --theme-backdrop-rgb: 255 255 255;
+  --theme-surface-overlay-rgb: 255 255 255;
+}
+
+:root[data-app-theme='slate'] {
+  --bg-light: #121721;
+  --bg-card: rgba(23, 29, 40, 0.92);
+  --bg-element: rgba(255, 255, 255, 0.05);
+  --bg-element-hov: rgba(255, 255, 255, 0.09);
+  --text-dark: #f5f7fb;
+  --text-muted: rgba(226, 232, 240, 0.6);
+  --border-light: rgba(148, 163, 184, 0.16);
+  --accent: #ffffff;
+  --shadow-sm: 0 18px 40px rgba(2, 6, 23, 0.2);
+  --shadow-md: 0 28px 64px rgba(2, 6, 23, 0.28);
+
+  --theme-surface-rgb: 23 29 40;
+  --theme-text-rgb: 245 247 251;
+  --theme-text-muted-rgb: 148 163 184;
+  --theme-border-rgb: 148 163 184;
+  --theme-accent-rgb: 255 255 255;
+  --theme-backdrop-rgb: 12 16 22;
+  --theme-surface-overlay-rgb: 255 255 255;
 }
 
 *,
@@ -55,6 +126,15 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+:root[data-app-theme='midnight'],
+:root[data-app-theme='slate'] {
+  color-scheme: dark;
+}
+
+:root[data-app-theme='monochrome'] {
+  color-scheme: light;
+}
+
 #root {
   min-height: 100vh;
   display: flex;
@@ -156,6 +236,117 @@ h4 {
   color: var(--text-light);
 }
 
+.public-landing {
+  background: var(--bg-light);
+}
+
+.public-topbar {
+  padding: 1.25rem 2.5rem;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border-light);
+}
+
+.public-topbar__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.public-landing__main {
+  width: 100%;
+  padding: 1.25rem 2.5rem 3rem;
+}
+
+.public-workspace {
+  width: 100%;
+}
+
+.public-workspace-shell {
+  border: 1px solid var(--border-light);
+  border-radius: 28px;
+  background: var(--bg-card);
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+}
+
+.public-workspace-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+  justify-content: stretch;
+  gap: 1rem;
+  padding: 1.75rem 1.5rem 1.5rem;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.public-workspace-header__meta {
+  display: grid;
+  gap: 0.7rem;
+  min-width: 0;
+  max-width: 72rem;
+}
+
+.public-workspace-kicker {
+  font-size: 0.78rem;
+  line-height: 1;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.public-workspace-title {
+  max-width: 18ch;
+  font-size: clamp(2rem, 4.8vw, 3.2rem);
+  font-weight: 450;
+  letter-spacing: -0.045em;
+  line-height: 0.96;
+}
+
+.public-workspace-subtitle {
+  max-width: 48ch;
+  font-size: 0.98rem;
+  line-height: 1.45;
+  color: var(--text-muted);
+}
+.public-workspace-grid {
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr);
+  align-items: stretch;
+  min-height: 780px;
+}
+
+.public-workspace-sidebar {
+  border-right: 1px solid var(--border-light);
+  background: var(--bg-light);
+}
+
+.public-workspace-sidebar__panel {
+  min-height: 100%;
+  background: var(--bg-light);
+}
+
+.canvas-sidebar-canvas--static {
+  cursor: default;
+}
+
+.public-workspace-panel {
+  display: grid;
+  align-content: start;
+  gap: 1.25rem;
+  padding: 1.35rem 1.25rem 1.25rem;
+  min-width: 0;
+  background: var(--bg-card);
+}
+
+.public-workspace-panel__title {
+  font-size: 1.1rem;
+  font-weight: 550;
+  letter-spacing: -0.03em;
+}
+
 /* ── Buttons ── */
 .btn-pill-light {
   background-color: var(--bg-card);
@@ -207,10 +398,25 @@ h4 {
    ════════════════════════════════════════════════════════════════ */
 .app-layout {
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;
   background-color: var(--bg-light);
   color: var(--text-dark);
 }
 
+.app-layout--chat {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.app-layout__content {
+  min-height: 0;
+}
+
+.app-layout__content--chat {
+  overflow: hidden;
+}
+
 .app-topbar {
   display: flex;
   justify-content: space-between;
@@ -218,6 +424,12 @@ h4 {
   padding: 1.25rem 2.5rem;
 }
 
+.app-topbar--chat {
+  border-bottom: 1px solid var(--border-light);
+  background: rgb(var(--theme-surface-rgb) / 0.92);
+  backdrop-filter: blur(18px);
+}
+
 .app-brand {
   display: flex;
   align-items: center;
@@ -231,6 +443,37 @@ h4 {
   display: flex;
   align-items: center;
   gap: 1.5rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.app-feature-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.3rem;
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-pill);
+  background: var(--bg-card);
+}
+
+.app-feature-switch__button {
+  padding: 0.55rem 0.95rem;
+  border-radius: var(--radius-pill);
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  font-weight: 550;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.app-feature-switch__button:hover {
+  background: var(--bg-element);
+  color: var(--text-dark);
+}
+
+.app-feature-switch__button--active {
+  background: var(--accent);
+  color: var(--text-light);
 }
 
 .dashboard-main {
@@ -239,888 +482,4487 @@ h4 {
   padding: 1rem 2.5rem 4rem;
 }
 
-.dashboard-main--canvas {
+.dashboard-main--chat {
   max-width: none;
   width: 100%;
   margin: 0;
-  padding: 1rem 0 4rem;
-}
-
-.canvas-shell {
-  display: grid;
-  gap: 1rem;
-  margin: -1rem 0 -4rem;
-  min-height: calc(100vh - 88px);
-  position: relative;
+  padding: 0;
+  flex: 1;
+  display: flex;
+  min-height: 0;
 }
 
-.canvas-home-grid {
+.chat-shell {
+  flex: 1;
   display: grid;
-  gap: 0;
-  grid-template-columns: 280px minmax(0, 1fr);
-  align-items: stretch;
-  min-height: calc(100vh - 88px);
-  background: #fff;
-  border-top: 1px solid var(--border-light);
-  transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.canvas-home-grid--collapsed {
-  grid-template-columns: 64px minmax(0, 1fr);
+  grid-template-columns: 292px minmax(0, 1fr);
+  height: 100%;
+  min-height: 0;
+  background:
+    radial-gradient(circle at top left, rgb(var(--theme-text-rgb) / 0.04), transparent 22%),
+    linear-gradient(180deg, var(--bg-light) 0%, color-mix(in srgb, var(--bg-light) 96%, #000 4%) 100%);
 }
 
-.canvas-sidebar {
-  position: relative;
-  z-index: 10;
-  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  min-width: 0;
+.chat-shell--sidebar-collapsed {
+  grid-template-columns: 88px minmax(0, 1fr);
 }
 
-.canvas-sidebar-panel {
+.chat-shell__sidebar {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
-  align-content: start;
-  gap: 0.75rem;
-  padding: 0.875rem 0.75rem 0.75rem;
-  border: none;
+  min-width: 0;
   border-right: 1px solid var(--border-light);
-  border-radius: 0;
-  background: #fafafa;
-  color: var(--text-dark);
-  min-height: calc(100vh - 88px);
-  overflow: hidden;
-  transition: padding 0.3s ease;
-}
-
-.canvas-sidebar-panel--collapsed {
-  padding: 0.875rem 0.5rem 0.75rem;
-}
-
-.canvas-sidebar-header {
-  display: grid;
-  gap: 0.625rem;
-  align-content: start;
+  background: rgb(var(--theme-surface-rgb) / 0.84);
+  backdrop-filter: blur(18px);
 }
 
-.canvas-sidebar-brand {
+.chat-shell__sidebar-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
+  gap: 0.9rem;
+  padding: 1rem;
+  border-bottom: 1px solid rgb(var(--theme-text-rgb) / 0.05);
 }
 
-.canvas-sidebar-brand--actions {
-  justify-content: flex-end;
+.chat-shell__sidebar-toggle {
+  width: 38px;
+  height: 38px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid var(--border-light);
+  background: var(--bg-card);
+  color: var(--text-muted);
+  transition: background-color 0.2s ease, color 0.2s ease;
 }
 
-.canvas-sidebar-topbar {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.75rem;
+.chat-shell__sidebar-toggle:hover {
+  background: var(--bg-element);
+  color: var(--text-dark);
 }
 
-.canvas-sidebar-title-group {
+.chat-shell__sidebar-meta {
   display: grid;
-  gap: 0.12rem;
+  gap: 0.1rem;
   min-width: 0;
 }
 
-.canvas-sidebar-subtitle {
-  font-size: 0.78rem;
-  line-height: 1.35;
+.chat-shell__sidebar-kicker,
+.chat-empty-state__kicker,
+.chat-transcript__kicker {
+  font-size: 0.74rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 700;
   color: var(--text-muted);
 }
 
-.canvas-sidebar-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-shrink: 0;
+.chat-shell__sidebar-title {
+  font-size: 1rem;
+  font-weight: 650;
+  letter-spacing: -0.03em;
 }
 
-.canvas-sidebar-count {
-  min-width: 1.9rem;
-  height: 1.9rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: #f0f0f0;
-  color: var(--text-muted);
-  font-size: 0.82rem;
-  font-weight: 600;
+.chat-shell__sidebar-body {
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 0.65rem;
+  padding: 1rem 0.9rem 1rem;
 }
 
-.canvas-sidebar-divider {
-  height: 1px;
-  background: var(--border-light);
+.chat-shell__nav-item,
+.chat-shell__history-item {
+  width: 100%;
+  display: grid;
+  gap: 0.2rem;
+  text-align: left;
+  padding: 0.85rem 0.95rem;
+  border-radius: 18px;
+  color: var(--text-dark);
+  transition: background-color 0.2s ease, border-color 0.2s ease;
 }
 
-.canvas-sidebar-icon-button {
-  width: 34px;
-  height: 34px;
-  display: inline-flex;
+.chat-shell__nav-item {
+  grid-template-columns: 1.35rem minmax(0, 1fr);
   align-items: center;
-  justify-content: center;
-  border-radius: 999px;
   border: 1px solid transparent;
-  background: transparent;
-  color: var(--text-muted);
-  font-size: 1.2rem;
-  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
 }
 
-.canvas-sidebar-icon-button:hover {
-  background: #efefef;
-  border-color: rgba(17, 17, 17, 0.08);
-  color: var(--text-dark);
+.chat-shell__nav-item:hover,
+.chat-shell__history-item:hover {
+  background: var(--bg-element);
 }
 
-.canvas-sidebar-section-title {
-  margin: 0;
-  font-size: 1rem;
-  color: var(--text-dark);
-  font-weight: 650;
-  letter-spacing: -0.02em;
+.chat-shell__nav-item--active,
+.chat-shell__history-item--active {
+  background: var(--bg-card);
+  border-color: var(--border-light);
+  box-shadow: var(--shadow-sm);
 }
 
-.canvas-list-scroll {
-  min-height: 0;
-  overflow-y: auto;
-  padding-right: 0.15rem;
-  align-content: start;
+.chat-shell__nav-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  color: var(--text-muted);
 }
 
-.canvas-list-scroll--expanded {
-  display: grid;
-  gap: 0.75rem;
+.chat-shell__nav-label {
+  font-weight: 600;
 }
 
-.canvas-sidebar-list {
+.chat-shell__history {
+  min-height: 0;
   display: grid;
-  gap: 0.3rem;
-  list-style: none;
-  margin: 0;
-  padding: 0;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 0.65rem;
 }
 
-.canvas-sidebar-list--collapsed {
-  justify-items: center;
+.chat-shell__history-label {
+  padding: 0 0.25rem;
+  font-size: 0.76rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 700;
+  color: var(--text-muted);
 }
 
-.canvas-sidebar-empty {
+.chat-shell__history-list {
+  min-height: 0;
   display: grid;
-  gap: 0.75rem;
-  align-content: start;
+  gap: 0.5rem;
+  overflow-y: auto;
+  padding-right: 0.15rem;
 }
 
-.canvas-sidebar-empty--collapsed {
+.chat-shell__history-item {
+  border: 1px solid transparent;
+  background: transparent;
+}
+
+.chat-shell__history-title {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.chat-shell__history-meta,
+.chat-transcript__meta,
+.chat-bubble__meta,
+.chat-dock__hint {
+  font-size: 0.82rem;
+  color: var(--text-muted);
+}
+
+.chat-shell--sidebar-collapsed .chat-shell__sidebar-meta,
+.chat-shell--sidebar-collapsed .chat-shell__nav-label,
+.chat-shell--sidebar-collapsed .chat-shell__history-label,
+.chat-shell--sidebar-collapsed .chat-shell__history-meta {
+  display: none;
+}
+
+.chat-shell--sidebar-collapsed .chat-shell__nav-item {
+  grid-template-columns: 1fr;
   justify-items: center;
+  padding-inline: 0.5rem;
 }
 
-.canvas-sidebar-placeholder {
-  padding: 0.95rem 1rem;
-  font-size: 0.88rem;
-  background: #f3f3f3;
+.chat-shell--sidebar-collapsed .chat-shell__history-item {
+  padding-inline: 0.55rem;
 }
 
-.canvas-sidebar-primary-action {
-  width: 100%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 2.75rem;
-  padding: 0.75rem 0.9rem;
-  border-radius: 14px;
-  background: #111;
-  color: #fff;
-  font-size: 0.94rem;
-  font-weight: 600;
+.chat-shell--sidebar-collapsed .chat-shell__history-title {
+  font-size: 0.78rem;
   text-align: center;
-  transition: opacity 0.2s ease, transform 0.2s ease;
+  white-space: normal;
+  line-height: 1.2;
 }
 
-.canvas-sidebar-primary-action:hover {
-  opacity: 0.92;
+.chat-shell__placeholder {
+  padding: 1rem;
+  border-radius: 16px;
+  background: var(--bg-element);
+  color: var(--text-muted);
+  font-size: 0.92rem;
 }
 
-.canvas-sidebar-canvas {
-  width: 100%;
-  text-align: left;
-  border-radius: 14px;
-  padding: 0.75rem 0.85rem;
-  border: 1px solid transparent;
-  background: transparent;
-  color: var(--text-dark);
+.chat-shell__main {
+  min-width: 0;
+  min-height: 0;
   display: grid;
-  gap: 0.1rem;
-  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
 }
 
-.canvas-sidebar-canvas:hover {
-  background: #f1f1f1;
+.chat-shell__alerts {
+  display: grid;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem 0;
 }
 
-.canvas-sidebar-canvas--selected {
-  background: #f0f0f0;
-  border-color: rgba(17, 17, 17, 0.08);
-  box-shadow: inset 3px 0 0 #111;
+.chat-empty-state {
+  min-height: 100%;
+  display: grid;
+  place-items: center;
+  padding: 2.5rem 1.5rem;
 }
 
-.canvas-sidebar-canvas-title {
-  font-weight: 600;
-  line-height: 1.35;
-  font-size: 0.94rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.chat-empty-state__hero {
+  display: grid;
+  gap: 0.65rem;
+  justify-items: center;
+  text-align: center;
+  margin-bottom: 1.5rem;
 }
 
-.canvas-sidebar-canvas-meta {
-  font-size: 0.78rem;
-  line-height: 1.35;
+.chat-empty-state__title {
+  font-size: clamp(2.2rem, 4vw, 3.4rem);
+  line-height: 0.96;
+  letter-spacing: -0.05em;
+  max-width: 12ch;
+}
+
+.chat-empty-state__subtitle {
+  max-width: 44rem;
   color: var(--text-muted);
+  font-size: 1rem;
 }
 
-.canvas-sidebar-canvas--collapsed {
-  width: 40px;
-  min-height: 40px;
-  padding: 0;
-  justify-items: center;
-  align-items: center;
-  border-radius: 12px;
+.chat-composer-card,
+.chat-dock {
+  border: 1px solid var(--border-light);
+  border-radius: 28px;
+  background: var(--bg-card);
+  box-shadow: var(--shadow-md);
 }
 
-.canvas-sidebar-canvas-initial {
-  font-weight: 700;
-  font-size: 0.92rem;
+.chat-composer-card {
+  width: min(760px, 100%);
+  display: grid;
+  gap: 0.85rem;
+  padding: 1rem;
 }
 
-/* Sidebar Toggle Desktop */
-.canvas-sidebar-toggle {
-  position: absolute;
-  right: -12px;
-  top: 72px;
-  width: 24px;
-  height: 24px;
-  background: #fff;
-  border: 1px solid var(--border-light);
-  border-radius: 50%;
+.chat-composer-card__textarea,
+.chat-dock__textarea {
+  min-height: 120px;
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  resize: none;
+}
+
+.chat-composer-card__textarea:focus,
+.chat-dock__textarea:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.chat-composer-card__footer,
+.chat-dock__footer {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  font-size: 1.2rem;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-  z-index: 20;
-  transition: transform 0.2s ease, opacity 0.2s ease;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding-top: 0.25rem;
 }
 
-.canvas-sidebar-toggle:hover {
-  background: var(--bg-element);
+.chat-composer-card__controls,
+.chat-dock__controls {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.85rem;
 }
 
-/* Mobile Toggle and Drawer */
-.canvas-panel-header {
-  display: none;
-  margin-bottom: 1rem;
-  justify-content: flex-start;
+.chat-composer-card__field {
+  min-width: 0;
+  display: grid;
+  gap: 0.35rem;
 }
 
-.mobile-sidebar-toggle {
-  width: 40px;
-  height: 40px;
+.chat-composer-card__label {
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.chat-composer-card__select {
+  min-width: 0;
+  width: 100%;
+}
+
+.chat-composer-card__actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.chat-transcript {
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  overflow: hidden;
+}
+
+.chat-transcript__header {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.chat-transcript__toolbar {
   display: flex;
   align-items: center;
+  gap: 0.85rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.chat-toolbar-icon-button {
+  position: relative;
+  width: 2.75rem;
+  height: 2.75rem;
+  display: inline-flex;
+  align-items: center;
   justify-content: center;
-  font-size: 1.5rem;
+  border-radius: 999px;
   border: 1px solid var(--border-light);
-  border-radius: 8px;
-  background: #fff;
+  background: rgb(var(--theme-surface-rgb) / 0.92);
+  color: var(--text-muted);
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
 }
 
-.mobile-drawer-backdrop {
-  position: fixed;
-  top: 88px;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: 100;
-  backdrop-filter: blur(2px);
+.chat-toolbar-icon-button:hover,
+.chat-toolbar-icon-button:focus-visible {
+  background: var(--bg-element);
+  color: var(--text-dark);
+  border-color: var(--border-light);
+  transform: translateY(-1px);
 }
 
-.mobile-drawer {
-  position: fixed;
-  top: 88px;
-  left: 0;
-  bottom: 0;
-  width: min(296px, calc(100vw - 1.25rem));
-  background: #f8f8f8;
-  z-index: 101;
-  transform: translateX(-100%);
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
+.chat-toolbar-icon-button:focus-visible {
+  outline: none;
+}
+
+.chat-toolbar-icon-button__icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.chat-toolbar-icon-button::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: calc(100% + 0.55rem);
+  left: 50%;
+  transform: translate(-50%, -0.2rem);
+  padding: 0.45rem 0.65rem;
+  border-radius: 999px;
+  background: rgba(17, 17, 17, 0.92);
+  color: var(--text-light);
+  font-size: 0.76rem;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  box-shadow: 0 12px 24px rgb(var(--theme-text-rgb) / 0.18);
+  transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s ease;
+}
+
+.chat-toolbar-icon-button:hover::after,
+.chat-toolbar-icon-button:focus-visible::after {
+  opacity: 1;
+  visibility: visible;
+  transform: translate(-50%, 0);
+}
+
+.chat-transcript__heading {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.chat-transcript__heading-row {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  gap: 0.55rem;
+  flex-wrap: wrap;
 }
 
-.mobile-drawer--open {
-  transform: translateX(0);
+.chat-transcript__title {
+  font-size: 1.9rem;
+  line-height: 0.98;
+  letter-spacing: -0.04em;
 }
 
-.mobile-drawer-header {
+.chat-transcript__subtitle {
+  max-width: 54rem;
+  color: var(--text-muted);
+  font-size: 0.98rem;
+  line-height: 1.55;
+}
+
+.chat-thread-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.3rem 0.65rem;
+  border-radius: 999px;
+  background: var(--bg-element);
+  color: var(--text-muted);
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.chat-thread-badge--root {
+  background: rgba(17, 17, 17, 0.09);
+  color: var(--text-dark);
+}
+
+.chat-context-banner {
   display: flex;
-  justify-content: flex-end;
-  padding: 0.6rem 0.75rem 0;
-  background: #f8f8f8;
+  align-items: center;
+  gap: 0.85rem;
+  flex-wrap: wrap;
+  padding: 0.85rem 1rem;
+  border-radius: 18px;
+  border: 1px solid var(--border-light);
+  background:
+    linear-gradient(135deg, rgb(var(--theme-text-rgb) / 0.04), rgb(var(--theme-text-rgb) / 0.015));
+  color: var(--text-muted);
+  font-size: 0.92rem;
+}
+
+.chat-context-banner__label {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.28rem 0.65rem;
+  border-radius: 999px;
+  background: var(--bg-card);
+  color: var(--text-dark);
+  font-size: 0.74rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.chat-transcript__body {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  overflow: hidden;
+}
+
+.chat-transcript__messages {
+  min-height: 0;
+  display: grid;
+  align-content: start;
+  gap: 0.95rem;
+  overflow-y: auto;
+  padding-right: 0.25rem;
+  padding-bottom: 0.35rem;
+}
+
+.chat-transcript__empty {
+  min-height: 18rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 2rem;
+  border: 1px dashed var(--border-light);
+  border-radius: 24px;
+  color: var(--text-muted);
+  background: var(--bg-card);
+}
+
+.chat-message-row--branchable {
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 7.5rem;
+  gap: 0.9rem;
+  align-items: start;
+}
+
+.chat-message-row__rail {
+  min-height: 100%;
+  position: relative;
+}
+
+.chat-message-row__rail-sticky {
+  position: sticky;
+  top: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 0.35rem;
+}
+
+.chat-bubble {
+  display: grid;
+  gap: 0.65rem;
+  max-width: min(820px, 100%);
+  padding: 1rem 1.1rem;
+  border-radius: 22px;
+  border: 1px solid var(--border-light);
+  background: var(--bg-card);
+}
+
+.chat-bubble--user {
+  justify-self: end;
+  background: var(--bg-element);
+}
+
+.chat-bubble--assistant {
+  background:
+    linear-gradient(180deg, var(--bg-card), color-mix(in srgb, var(--bg-card) 94%, var(--bg-light)));
+  border-color: color-mix(in srgb, var(--border-light) 80%, var(--text-dark));
+}
+
+.chat-bubble--branch-rail {
+  width: 100%;
+  max-width: none;
+}
+
+.chat-bubble__meta {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.chat-bubble__role {
+  font-weight: 700;
+  color: var(--text-dark);
+}
+
+.chat-bubble__meta-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.2rem 0.55rem;
+  border-radius: 999px;
+  background: var(--bg-element);
+  color: var(--text-muted);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.chat-bubble__branch {
+  padding: 0.35rem 0.7rem;
+  border-radius: 999px;
+  border: 1px solid var(--border-light);
+  background: var(--bg-element);
+  color: var(--text-dark);
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.chat-bubble__branch:hover {
+  background: var(--bg-element-hov);
+}
+
+.chat-bubble__branch-popover-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.chat-bubble__branch-popover-wrap--rail {
+  justify-content: center;
+}
+
+.chat-dock {
+  display: grid;
+  gap: 0.75rem;
+  padding: 1rem;
+  position: sticky;
+  bottom: 0;
+  z-index: 5;
+  margin-top: 1rem;
+  background: rgb(var(--theme-surface-rgb) / 0.96);
+  backdrop-filter: blur(16px);
+}
+
+.chat-branch-card {
+  display: grid;
+  gap: 0.75rem;
+  padding: 0.9rem;
+  border-radius: 18px;
+  border: 1px solid var(--border-light);
+  background: rgb(var(--theme-surface-rgb) / 0.98);
+}
+
+.chat-bubble__branch--rail {
+  min-width: 6.4rem;
+  height: 2.7rem;
+  padding: 0 0.95rem;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.88rem;
+  line-height: 1;
+  box-shadow: 0 10px 20px rgb(var(--theme-text-rgb) / 0.08);
+}
+
+.chat-branch-popover {
+  position: absolute;
+  top: calc(100% + 0.7rem);
+  left: 0;
+  right: auto;
+  z-index: 15;
+  width: min(430px, calc(100vw - 4rem));
+  display: grid;
+  gap: 0.75rem;
+  padding: 0.95rem;
+  border-radius: 20px;
+  border: 1px solid var(--border-light);
+  background: rgb(var(--theme-surface-rgb) / 0.98);
+  box-shadow: 0 18px 38px rgb(var(--theme-text-rgb) / 0.12);
+}
+
+.chat-branch-popover--rail {
+  top: 0;
+  right: calc(100% + 0.85rem);
+  left: auto;
+  width: min(430px, calc(100vw - 8rem));
+}
+
+.chat-branch-popover__arrow {
+  position: absolute;
+  top: -0.45rem;
+  left: 1.45rem;
+  right: auto;
+  width: 0.9rem;
+  height: 0.9rem;
+  background: rgb(var(--theme-surface-rgb) / 0.98);
+  border-top: 1px solid var(--border-light);
+  border-left: 1px solid var(--border-light);
+  transform: rotate(45deg);
+}
+
+.chat-branch-popover__arrow--rail {
+  top: 1rem;
+  right: -0.45rem;
+  left: auto;
+  border-top: 1px solid rgba(17, 17, 17, 0.1);
+  border-right: 1px solid rgba(17, 17, 17, 0.1);
+  border-left: none;
+}
+
+.chat-branch-card__intro {
+  display: grid;
+  gap: 0.3rem;
+}
+
+.chat-branch-card__copy {
+  color: var(--text-muted);
+  font-size: 0.88rem;
+  line-height: 1.5;
+}
+
+.chat-branch-card__textarea {
+  min-height: 92px;
+  resize: vertical;
+}
+
+.chat-branch-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.chat-branch-card__actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.chat-history-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.3rem;
+  border-radius: 999px;
+  border: 1px solid var(--border-light);
+  background: rgb(var(--theme-surface-rgb) / 0.9);
+}
+
+.chat-history-toggle__button {
+  padding: 0.45rem 0.85rem;
+  border-radius: 999px;
+  color: var(--text-muted);
+  font-size: 0.82rem;
+  font-weight: 600;
+}
+
+.chat-history-toggle__button--active {
+  background: var(--accent);
+  color: var(--text-light);
+}
+
+.chat-canvas-panel {
+  height: 100%;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+.chat-canvas-panel__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.chat-canvas-panel__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.chat-canvas-info {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.chat-canvas-info__trigger {
+  width: 2.5rem;
+  height: 2.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid var(--border-light);
+  background: rgb(var(--theme-surface-rgb) / 0.95);
+  color: var(--text-muted);
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+
+.chat-canvas-info__trigger:hover,
+.chat-canvas-info:focus-within .chat-canvas-info__trigger {
+  background: var(--bg-element);
+  color: var(--text-dark);
+  border-color: var(--border-light);
+}
+
+.chat-canvas-info__popover {
+  position: absolute;
+  top: calc(100% + 0.8rem);
+  right: 0;
+  z-index: 20;
+  width: min(320px, calc(100vw - 3rem));
+  display: grid;
+  gap: 0.8rem;
+  padding: 1rem;
+  border-radius: 24px;
+  border: 1px solid var(--border-light);
+  background: rgb(var(--theme-surface-rgb) / 0.96);
+  box-shadow: 0 18px 38px rgb(var(--theme-text-rgb) / 0.12);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(-0.35rem);
+  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
+}
+
+.chat-canvas-info:hover .chat-canvas-info__popover,
+.chat-canvas-info:focus-within .chat-canvas-info__popover {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.chat-canvas-panel__hint {
+  color: var(--text-muted);
+  font-size: 0.95rem;
+}
+
+.chat-canvas-workspace {
+  height: calc(100vh - 220px);
+  min-height: calc(100vh - 220px);
+  display: flex;
+}
+
+.chat-canvas-inspector__label {
+  font-size: 0.76rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 700;
+  color: var(--text-muted);
+}
+
+.chat-canvas-inspector__title {
+  font-size: 1.2rem;
+  line-height: 1.05;
+  letter-spacing: -0.04em;
+}
+
+.chat-canvas-inspector__copy {
+  color: var(--text-muted);
+  font-size: 0.94rem;
+  line-height: 1.55;
+}
+
+.chat-canvas-inspector__stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.chat-canvas-inspector__stat {
+  display: grid;
+  gap: 0.15rem;
+  padding: 0.85rem;
+  border-radius: 18px;
+  background: var(--bg-element);
+}
+
+.chat-canvas-inspector__stat-value {
+  font-size: 1.35rem;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+}
+
+.chat-canvas-inspector__stat-label {
+  color: var(--text-muted);
+  font-size: 0.82rem;
+}
+
+.chat-canvas {
+  flex: 1;
+  height: 100%;
+  min-height: 100%;
+  display: flex;
+  border-radius: 28px;
+  border: 1px solid var(--border-light);
+  background: var(--bg-card);
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+}
+
+.chat-canvas__surface {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  flex: 1;
+  background:
+    radial-gradient(circle at top left, rgb(var(--theme-text-rgb) / 0.03), transparent 22%),
+    linear-gradient(180deg, var(--bg-card) 0%, var(--bg-light) 100%);
+}
+
+.chat-canvas-node {
+  width: 260px;
+  display: grid;
+  gap: 0.55rem;
+  padding: 0.95rem;
+  border-radius: 20px;
+  border: 1px solid var(--border-light);
+  background: rgb(var(--theme-surface-rgb) / 0.98);
+  box-shadow: 0 16px 35px rgb(var(--theme-text-rgb) / 0.08);
+}
+
+.chat-canvas-node--active {
+  border-color: color-mix(in srgb, var(--border-light) 68%, var(--text-dark));
+  box-shadow: 0 18px 38px rgb(var(--theme-text-rgb) / 0.12);
+}
+
+.chat-canvas-node__eyebrow {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  flex-wrap: wrap;
+}
+
+.chat-canvas-node__badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.22rem 0.52rem;
+  border-radius: 999px;
+  background: var(--bg-element);
+  color: var(--text-muted);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.chat-canvas-node__badge--root {
+  background: var(--bg-element-hov);
+  color: var(--text-dark);
+}
+
+.chat-canvas-node__meta {
+  color: var(--text-muted);
+  font-size: 0.74rem;
+  font-weight: 600;
+}
+
+.chat-canvas-node__title {
+  font-size: 0.98rem;
+  font-weight: 650;
+  letter-spacing: -0.03em;
+}
+
+.chat-canvas-node__preview {
+  color: var(--text-muted);
+  font-size: 0.88rem;
+  line-height: 1.45;
+}
+
+.dashboard-main--canvas {
+  max-width: none;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  width: 100%;
+  margin: 0;
+  padding: 1rem 0 4rem;
+}
+
+.canvas-shell {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 1rem;
+  margin: -1rem 0 -4rem;
+  min-height: calc(100vh - 88px);
+  position: relative;
+}
+
+.canvas-home-grid {
+  display: grid;
+  flex: 1;
+  gap: 0;
+  grid-template-columns: 280px minmax(0, 1fr);
+  align-items: stretch;
+  min-height: 0;
+  background: var(--bg-card);
+  border-top: 1px solid var(--border-light);
+  transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.canvas-home-grid--collapsed {
+  grid-template-columns: 64px minmax(0, 1fr);
+}
+
+.canvas-sidebar {
+  position: relative;
+  z-index: 10;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  min-width: 0;
+}
+
+.canvas-sidebar-panel {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  align-content: start;
+  gap: 0.75rem;
+  padding: 0.875rem 0.75rem 0.75rem;
+  border: none;
+  border-right: 1px solid var(--border-light);
+  border-radius: 0;
+  background: var(--bg-light);
+  color: var(--text-dark);
+  min-height: calc(100vh - 88px);
+  overflow: hidden;
+  transition: padding 0.3s ease;
+}
+
+.canvas-sidebar-panel--collapsed {
+  padding: 0.875rem 0.5rem 0.75rem;
+}
+
+.canvas-sidebar-header {
+  display: grid;
+  gap: 0.625rem;
+  align-content: start;
+}
+
+.canvas-sidebar-brand {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.canvas-sidebar-brand--actions {
+  justify-content: flex-end;
+}
+
+.canvas-sidebar-topbar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.canvas-sidebar-title-group {
+  display: grid;
+  gap: 0.12rem;
+  min-width: 0;
+}
+
+.canvas-sidebar-subtitle {
+  font-size: 0.78rem;
+  line-height: 1.35;
+  color: var(--text-muted);
+}
+
+.canvas-sidebar-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.canvas-sidebar-count {
+  min-width: 1.9rem;
+  height: 1.9rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: #f0f0f0;
+  color: var(--text-muted);
+  font-size: 0.82rem;
+  font-weight: 600;
+}
+
+.canvas-sidebar-divider {
+  height: 1px;
+  background: var(--border-light);
+}
+
+.canvas-sidebar-icon-button {
+  width: 34px;
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 1.2rem;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+
+.canvas-sidebar-icon-button:hover {
+  background: var(--bg-element-hov);
+  border-color: var(--border-light);
+  color: var(--text-dark);
+}
+
+.canvas-sidebar-section-title {
+  margin: 0;
+  font-size: 1rem;
+  color: var(--text-dark);
+  font-weight: 650;
+  letter-spacing: -0.02em;
+}
+
+.canvas-list-scroll {
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 0.15rem;
+  align-content: start;
+}
+
+.canvas-list-scroll--expanded {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.canvas-sidebar-list {
+  display: grid;
+  gap: 0.3rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.canvas-sidebar-list--collapsed {
+  justify-items: center;
+}
+
+.canvas-sidebar-empty {
+  display: grid;
+  gap: 0.75rem;
+  align-content: start;
+}
+
+.canvas-sidebar-empty--collapsed {
+  justify-items: center;
+}
+
+.canvas-sidebar-placeholder {
+  padding: 0.95rem 1rem;
+  font-size: 0.88rem;
+  background: #f3f3f3;
+}
+
+.canvas-sidebar-primary-action {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.75rem;
+  padding: 0.75rem 0.9rem;
+  border-radius: 14px;
+  background: var(--text-dark);
+  color: var(--bg-card);
+  font-size: 0.94rem;
+  font-weight: 600;
+  text-align: center;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.canvas-sidebar-primary-action:hover {
+  opacity: 0.92;
+}
+
+.canvas-sidebar-canvas {
+  width: 100%;
+  text-align: left;
+  border-radius: 14px;
+  padding: 0.75rem 0.85rem;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--text-dark);
+  display: grid;
+  gap: 0.1rem;
+  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
+}
+
+.canvas-sidebar-canvas:hover {
+  background: #f1f1f1;
+}
+
+.canvas-sidebar-canvas--selected {
+  background: var(--bg-element);
+  border-color: var(--border-light);
+  box-shadow: inset 3px 0 0 var(--text-dark);
+}
+
+.canvas-sidebar-canvas-title {
+  font-weight: 600;
+  line-height: 1.35;
+  font-size: 0.94rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.canvas-sidebar-canvas-meta {
+  font-size: 0.78rem;
+  line-height: 1.35;
+  color: var(--text-muted);
+}
+
+.canvas-sidebar-canvas--collapsed {
+  width: 40px;
+  min-height: 40px;
+  padding: 0;
+  justify-items: center;
+  align-items: center;
+  border-radius: 12px;
+}
+
+.canvas-sidebar-canvas-initial {
+  font-weight: 700;
+  font-size: 0.92rem;
+}
+
+/* Sidebar Toggle Desktop */
+.canvas-sidebar-toggle {
+  position: absolute;
+  right: -12px;
+  top: 72px;
+  width: 24px;
+  height: 24px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-light);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+  z-index: 20;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.canvas-sidebar-toggle:hover {
+  background: var(--bg-element);
+}
+
+/* Mobile Toggle and Drawer */
+.canvas-panel-header {
+  display: none;
+  margin-bottom: 1rem;
+  justify-content: flex-start;
+}
+
+.mobile-sidebar-toggle {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  border: 1px solid var(--border-light);
+  border-radius: 8px;
+  background: var(--bg-card);
+}
+
+.mobile-drawer-backdrop {
+  position: fixed;
+  top: 88px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgb(0 0 0 / 0.4);
+  z-index: 100;
+  backdrop-filter: blur(2px);
+}
+
+.mobile-drawer {
+  position: fixed;
+  top: 88px;
+  left: 0;
+  bottom: 0;
+  width: min(296px, calc(100vw - 1.25rem));
+  background: var(--bg-light);
+  z-index: 101;
+  transform: translateX(-100%);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+}
+
+.mobile-drawer--open {
+  transform: translateX(0);
+}
+
+.mobile-drawer-header {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.6rem 0.75rem 0;
+  background: var(--bg-light);
+}
+
+.mobile-drawer .canvas-sidebar-panel {
+  min-height: calc(100vh - 88px);
+  border-right: none;
+  flex: 1;
+}
+
+.canvas-chat-panel {
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem;
+  min-height: 0;
+  width: 100%;
+  background: var(--bg-card);
+  overflow-y: auto;
+  align-items: stretch;
+}
+
+.canvas-chat-panel > * {
+  width: 100%;
+}
+
+.canvas-chat-panel:hover,
+.canvas-sidebar-panel:hover {
+  background-color: inherit;
+  box-shadow: none;
+}
+
+.canvas-workspace {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 1rem;
+  min-height: 0;
+  width: 100%;
+}
+
+.canvas-workspace__header {
+  flex-shrink: 0;
+}
+
+.canvas-workspace__graph {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.canvas-graph-shell {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  border: 1px solid var(--border-light);
+  border-radius: 24px;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at top, rgb(var(--theme-text-rgb) / 0.03), transparent 45%),
+    linear-gradient(180deg, var(--bg-card) 0%, var(--bg-light) 100%);
+}
+
+.canvas-graph-surface {
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+}
+
+.canvas-graph-shell--preview {
+  min-height: 680px;
+}
+
+.canvas-graph-shell--preview .canvas-graph-surface {
+  height: 680px;
+}
+
+.canvas-node-card {
+  width: 300px;
+  border-radius: 24px;
+  padding: 1rem;
+  border: 1px solid var(--border-light);
+  background: rgb(var(--theme-surface-rgb) / 0.97);
+  box-shadow: 0 18px 40px rgb(var(--theme-text-rgb) / 0.08);
+  display: grid;
+  gap: 0.8rem;
+}
+
+.canvas-node-card--main {
+  width: 330px;
+}
+
+.canvas-node-card--selected {
+  border-color: rgba(17, 17, 17, 0.32);
+  box-shadow: 0 24px 50px rgba(17, 17, 17, 0.14);
+}
+
+.canvas-node-card__eyebrow {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.canvas-node-card__title {
+  margin: 0;
+  font-size: 1rem;
+  color: var(--text-dark);
+}
+
+.canvas-node-card__content {
+  margin: 0;
+  white-space: pre-wrap;
+  line-height: 1.5;
+  color: var(--text-dark);
+  font-size: 0.92rem;
+}
+
+.canvas-markdown > :first-child {
+  margin-top: 0;
+}
+
+.canvas-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.canvas-markdown p,
+.canvas-markdown ul,
+.canvas-markdown ol,
+.canvas-markdown pre,
+.canvas-markdown blockquote,
+.canvas-markdown table,
+.canvas-markdown hr,
+.canvas-markdown section[data-footnotes] {
+  margin: 0 0 0.75rem;
+}
+
+.canvas-markdown ul,
+.canvas-markdown ol {
+  padding-left: 1.25rem;
+}
+
+.canvas-markdown li + li {
+  margin-top: 0.25rem;
+}
+
+.canvas-markdown strong {
+  font-weight: 700;
+}
+
+.canvas-markdown h1,
+.canvas-markdown h2,
+.canvas-markdown h3,
+.canvas-markdown h4,
+.canvas-markdown h5,
+.canvas-markdown h6 {
+  margin: 0 0 0.7rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--text-dark);
+}
+
+.canvas-markdown h1 {
+  font-size: 1.55rem;
+}
+
+.canvas-markdown h2 {
+  font-size: 1.35rem;
+}
+
+.canvas-markdown h3 {
+  font-size: 1.15rem;
+}
+
+.canvas-markdown a {
+  color: var(--accent-dark);
+  text-decoration: underline;
+  text-underline-offset: 0.18rem;
+  word-break: break-word;
+}
+
+.canvas-markdown code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.92em;
+  padding: 0.1rem 0.32rem;
+  border-radius: 0.4rem;
+  background: var(--bg-element);
+}
+
+.canvas-markdown pre {
+  overflow-x: auto;
+  padding: 0.85rem 1rem;
+  border-radius: 1rem;
+  background: var(--bg-element);
+}
+
+.canvas-markdown pre code {
+  padding: 0;
+  background: transparent;
+}
+
+.canvas-markdown blockquote {
+  padding-left: 0.85rem;
+  border-left: 3px solid var(--border-light);
+  color: var(--text-muted);
+}
+
+.canvas-markdown hr {
+  border: 0;
+  border-top: 1px solid var(--border-light);
+}
+
+.canvas-markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  overflow: hidden;
+  border-radius: 1rem;
+  border: 1px solid var(--border-light);
+  background: rgb(var(--theme-surface-rgb) / 0.9);
+}
+
+.canvas-markdown thead {
+  background: var(--bg-element);
+}
+
+.canvas-markdown th,
+.canvas-markdown td {
+  padding: 0.72rem 0.85rem;
+  border-bottom: 1px solid var(--border-light);
+  vertical-align: top;
+  text-align: left;
+}
+
+.canvas-markdown tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.canvas-markdown input[type='checkbox'] {
+  width: 0.95rem;
+  height: 0.95rem;
+  margin-right: 0.55rem;
+  accent-color: var(--accent-dark);
+}
+
+.canvas-markdown .contains-task-list {
+  padding-left: 0;
+  list-style: none;
+}
+
+.canvas-markdown .task-list-item {
+  display: flex;
+  align-items: flex-start;
+}
+
+.canvas-markdown section[data-footnotes] {
+  padding-top: 0.1rem;
+  border-top: 1px solid var(--border-light);
+}
+
+.canvas-markdown img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.9rem;
+}
+
+.canvas-markdown--inline {
+  display: inline;
+}
+
+.canvas-node-card__hint {
+  font-size: 0.88rem;
+  color: var(--text-muted);
+}
+
+.canvas-node-card__label {
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: var(--text-dark);
+}
+
+.canvas-node-card__textarea {
+  width: 100%;
+  border-radius: 16px;
+  border: 1px solid var(--border-light);
+  padding: 0.95rem 1rem;
+  resize: vertical;
+  font: inherit;
+  background: var(--bg-card);
+  color: var(--text-dark);
+}
+
+.canvas-node-card__textarea:disabled {
+  background: var(--bg-element);
+  color: var(--text-muted);
+}
+
+.canvas-node-card__footer {
+  display: grid;
+  gap: 0.9rem;
+}
+
+.canvas-node-card__provider {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.canvas-node-card__provider label {
+  font-size: 0.88rem;
+  color: var(--text-muted);
+}
+
+.canvas-node-card__provider-empty {
+  display: grid;
+  gap: 0.75rem;
+  font-size: 0.92rem;
+  color: var(--text-muted);
+}
+
+.canvas-node-popup-layer {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: grid;
+  place-items: center;
+  padding: 1.5rem;
+  background: rgba(17, 17, 17, 0.22);
+  backdrop-filter: blur(6px);
+}
+
+.canvas-node-popup {
+  width: min(1080px, 100%);
+  max-height: min(100%, 720px);
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
+  border-radius: 28px;
+  border: 1px solid var(--border-light);
+  background:
+    linear-gradient(180deg, rgb(var(--theme-surface-rgb) / 0.98) 0%, rgb(var(--theme-surface-rgb) / 0.96) 100%);
+  box-shadow: 0 28px 60px rgb(var(--theme-text-rgb) / 0.18);
+}
+
+.canvas-node-popup__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.4rem 1.4rem 0;
+}
+
+.canvas-node-popup__heading {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.canvas-node-popup__eyebrow {
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.canvas-node-popup__title {
+  margin: 0;
+  font-size: 1.35rem;
+  color: var(--text-dark);
+}
+
+.canvas-node-popup__close {
+  width: 2.25rem;
+  height: 2.25rem;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--bg-element);
+  color: var(--text-muted);
+  font-size: 1.3rem;
+  line-height: 1;
+}
+
+.canvas-node-popup__body {
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 340px;
+  gap: 1.25rem;
+  padding: 1rem 1.4rem 1.4rem;
+}
+
+.canvas-node-popup__content-pane {
+  min-height: 0;
+  overflow: auto;
+  display: grid;
+  align-content: start;
+  gap: 1rem;
+  padding-right: 0.35rem;
+}
+
+.canvas-node-popup__content {
+  margin: 0;
+  white-space: pre-wrap;
+  line-height: 1.65;
+  color: var(--text-dark);
+}
+
+.canvas-node-popup__source {
+  display: grid;
+  gap: 0.45rem;
+  padding: 0.95rem 1rem;
+  border-radius: 18px;
+  background: var(--bg-element);
+}
+
+.canvas-node-popup__source-label {
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.canvas-node-popup__source .canvas-markdown {
+  white-space: pre-wrap;
+  line-height: 1.55;
+  color: var(--text-dark);
+}
+
+.canvas-node-popup__composer {
+  display: grid;
+  gap: 0.9rem;
+}
+
+.canvas-node-popup__composer-panel {
+  min-height: 0;
+  display: grid;
+  align-content: start;
+  padding-left: 1.25rem;
+  border-left: 1px solid var(--border-light);
+}
+
+.canvas-node-card--preview {
+  box-shadow: 0 16px 36px rgb(var(--theme-text-rgb) / 0.06);
+}
+
+.canvas-node-card--preview:not(.canvas-node-card--main) {
+  width: 250px;
+  gap: 0.55rem;
+  box-shadow: 0 14px 32px rgb(var(--theme-text-rgb) / 0.04);
+}
+
+.canvas-node-card--preview:not(.canvas-node-card--main) .canvas-node-card__title {
+  font-size: 0.92rem;
+}
+
+.canvas-node-card--preview:not(.canvas-node-card--main) .canvas-node-card__content {
+  font-size: 0.8rem;
+  line-height: 1.45;
+  color: var(--text-muted);
+}
+
+@media (max-width: 900px) {
+  .public-topbar {
+    padding: 1rem;
+  }
+
+  .public-landing__main {
+    padding: 1rem 1rem 2rem;
+  }
+
+  .public-workspace-header {
+    padding: 1.1rem;
+    grid-template-columns: 1fr;
+  }
+
+  .public-workspace-title {
+    max-width: none;
+    font-size: clamp(1.85rem, 8vw, 2.55rem);
+  }
+
+  .public-workspace-grid {
+    grid-template-columns: 1fr;
+    min-height: auto;
+  }
+
+  .public-workspace-sidebar {
+    border-right: none;
+    border-bottom: 1px solid var(--border-light);
+  }
+
+  .public-workspace-sidebar__panel {
+    min-height: 0;
+  }
+
+  .public-workspace-panel {
+    padding: 1rem;
+  }
+
+  .canvas-sidebar {
+    display: none;
+  }
+
+  .canvas-panel-header {
+    display: flex;
+  }
+
+  .canvas-shell {
+    margin: 0;
+    min-height: auto;
+  }
+
+  .canvas-home-grid {
+    grid-template-columns: 1fr !important;
+    min-height: auto;
+    border-top: none;
+    background: transparent;
+  }
+
+  .canvas-chat-panel {
+    min-height: auto;
+    border-radius: var(--radius-card);
+    border: 1px solid var(--border-light);
+  }
+
+  .canvas-workspace__graph {
+    min-height: 520px;
+  }
+
+  .canvas-graph-shell,
+  .canvas-graph-surface {
+    min-height: 520px;
+  }
+
+  .canvas-graph-shell--preview,
+  .canvas-graph-shell--preview .canvas-graph-surface {
+    min-height: 560px;
+    height: 560px;
+  }
+
+  .canvas-node-card,
+  .canvas-node-card--main {
+    width: 280px;
+  }
+
+  .canvas-node-popup-layer {
+    padding: 1rem;
+  }
+
+  .canvas-node-popup {
+    max-height: 100%;
+    border-radius: 24px;
+  }
+
+  .canvas-node-popup__header {
+    padding: 1.15rem 1.15rem 0;
+  }
+
+  .canvas-node-popup__body {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    padding: 0.9rem 1.15rem 1.15rem;
+  }
+
+  .canvas-node-popup__content-pane {
+    overflow: visible;
+    padding-right: 0;
+  }
+
+  .canvas-node-popup__composer-panel {
+    padding-left: 0;
+    padding-top: 1rem;
+    border-left: none;
+    border-top: 1px solid var(--border-light);
+  }
+}
+
+@media (max-width: 720px) {
+  .chat-composer-card__controls,
+  .chat-dock__controls {
+    grid-template-columns: 1fr;
+  }
+}
+
+.dash-promo {
+  text-align: center;
+  margin: 2rem 0 4rem;
+}
+
+.dash-promo-badge {
+  display: inline-block;
+  background-color: var(--bg-element);
+  color: #db7835;
+  padding: 0.4rem 1rem;
+  border-radius: var(--radius-pill);
+  font-size: 0.8rem;
+  font-weight: 600;
+  margin-bottom: 1.5rem;
+}
+
+.dash-promo h2 {
+  font-size: 2.5rem;
+  font-weight: 400;
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.dash-promo p {
+  color: var(--text-muted);
+  font-size: 1.1rem;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.section-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.section-link {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.project-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.5rem;
+}
+
+.project-card {
+  background-color: var(--bg-card);
+  border-radius: var(--radius-card);
+  height: 220px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.2s, box-shadow 0.2s;
+  border: 1px solid var(--border-light);
+  color: var(--text-muted);
+}
+
+.project-card:hover {
+  background-color: var(--bg-light);
+  box-shadow: var(--shadow-sm);
+}
+
+.project-card-full {
+  justify-content: flex-end;
+  align-items: flex-start;
+  padding: 1.5rem;
+}
+
+/* ════════════════════════════════════════════════════════════════
+   AUTH PAGES
+   ════════════════════════════════════════════════════════════════ */
+.auth-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-light);
+}
+
+.auth-card-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.auth-card {
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-md);
+  width: 100%;
+  max-width: 440px;
+  padding: 2.5rem 2rem;
+}
+
+.auth-link-button {
+  color: var(--text-dark);
+  font-weight: 500;
+  text-decoration: underline;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.auth-modal-open {
+  overflow: hidden;
+}
+
+.auth-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: grid;
+  place-items: center;
+  padding: 1.25rem;
+  background:
+    radial-gradient(circle at top, rgb(var(--theme-surface-rgb) / 0.08), transparent 28%),
+    rgb(var(--theme-backdrop-rgb) / 0.72);
+  backdrop-filter: blur(18px) saturate(140%);
+}
+
+.auth-modal-card {
+  position: relative;
+  width: min(760px, 100%);
+  max-height: min(92vh, 920px);
+  overflow: hidden;
+  border: 1px solid var(--border-light);
+  border-radius: 28px;
+  background:
+    radial-gradient(circle at top right, rgb(var(--theme-surface-rgb) / 0.08), transparent 28%),
+    linear-gradient(180deg, var(--bg-card), var(--bg-light));
+  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
+}
+
+.auth-modal-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  background:
+    linear-gradient(120deg, rgb(var(--theme-surface-rgb) / 0.08), transparent 30%),
+    radial-gradient(circle at bottom left, rgb(var(--theme-surface-rgb) / 0.04), transparent 35%);
+  opacity: 0.8;
+}
+
+.auth-modal-card > * {
+  position: relative;
+  z-index: 1;
+}
+
+.auth-modal-card__content {
+  display: grid;
+  gap: 1.25rem;
+  padding: 1.5rem;
+  color: var(--text-light);
+  max-height: min(92vh, 920px);
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.auth-modal-card__content::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.auth-modal-card__header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: start;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.auth-modal-card__intro {
+  display: grid;
+  gap: 0.55rem;
+  min-width: 0;
+}
+
+.auth-modal-card__eyebrow {
+  font-size: 0.78rem;
+  line-height: 1;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.auth-modal-card__title {
+  font-size: clamp(1.7rem, 3vw, 2.35rem);
+  font-weight: 550;
+  line-height: 1;
+  letter-spacing: -0.05em;
+  color: var(--text-light);
+}
+
+.auth-modal-card__copy {
+  max-width: 54ch;
+  font-size: 0.98rem;
+  line-height: 1.55;
+  color: var(--text-muted);
+}
+
+.auth-modal-close {
+  width: 2rem;
+  height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  color: var(--text-muted);
+  background: var(--bg-element);
+  border: 1px solid var(--border-light);
+  font-size: 1.25rem;
+  line-height: 1;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+
+.auth-modal-close:hover {
+  color: var(--text-dark);
+  background: var(--bg-element-hov);
+  border-color: var(--border-light);
+}
+
+.auth-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.auth-title {
+  font-size: 1.75rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.auth-modal-card .auth-header {
+  text-align: left;
+  margin-bottom: 1.25rem;
+}
+
+.auth-modal-card .auth-title {
+  margin-bottom: 0.25rem;
+  font-size: 1.95rem;
+  color: var(--text-dark);
+}
+
+.auth-input-group {
+  margin-bottom: 1rem;
+}
+
+.auth-input {
+  width: 100%;
+  padding: 1rem;
+  background-color: var(--bg-element);
+  border: 1px solid transparent;
+  border-radius: var(--radius-input);
+  font-family: 'Inter Tight', sans-serif;
+  font-size: 0.95rem;
+  color: var(--text-dark);
+  transition: background-color 0.2s, border-color 0.2s;
+}
+
+.auth-input::placeholder {
+  color: var(--text-muted);
+}
+
+.auth-input:focus {
+  background-color: var(--bg-card);
+  border-color: var(--text-dark);
+  outline: none;
+}
+
+.auth-modal-card .auth-input {
+  background: var(--bg-element);
+  border-color: var(--border-light);
+  color: var(--text-dark);
+  box-shadow: inset 0 1px 0 rgb(var(--theme-surface-rgb) / 0.02);
+}
+
+.auth-modal-card .auth-input::placeholder {
+  color: var(--text-muted);
+}
+
+.auth-modal-card .auth-input:focus {
+  background: var(--bg-card);
+  border-color: var(--text-dark);
+  box-shadow: 0 0 0 3px rgb(var(--theme-surface-rgb) / 0.05);
+}
+
+.auth-input--error {
+  border-color: #ef4444;
+}
+
+.auth-btn-full {
+  width: 100%;
+  padding: 1rem;
+  background-color: var(--text-dark);
+  color: var(--text-light);
+  border-radius: var(--radius-input);
+  font-weight: 500;
+  font-size: 1rem;
+  margin-top: 1rem;
+  transition: background-color 0.2s;
+}
+
+.auth-btn-full:hover {
+  background-color: #333;
+}
+
+.auth-modal-card .auth-btn-full {
+  background: linear-gradient(135deg, var(--bg-card), var(--bg-element-hov));
+  color: var(--text-dark);
+  box-shadow: 0 10px 30px rgb(var(--theme-surface-rgb) / 0.08);
+}
+
+.auth-modal-card .auth-btn-full:hover {
+  background: linear-gradient(135deg, var(--bg-card), var(--bg-element));
+}
+
+.auth-footer {
+  text-align: center;
+  margin-top: 1.5rem;
+  font-size: 0.9rem;
+  color: var(--text-muted);
+}
+
+.auth-footer a {
+  color: var(--text-dark);
+  font-weight: 500;
+  text-decoration: underline;
+}
+
+.auth-modal-card .auth-footer {
+  color: var(--text-muted);
+  text-align: left;
+  margin-top: 0.25rem;
+}
+
+.auth-modal-card .auth-link-button {
+  color: var(--text-dark);
+}
+
+.auth-social-auth {
+  margin-bottom: 1.25rem;
+  display: flex;
+  justify-content: center;
+}
+
+.auth-divider {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin: 1.25rem 0;
+  color: var(--text-muted);
+}
+
+.auth-divider::before,
+.auth-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--border-light);
+}
+
+.auth-divider span {
+  font-size: 0.8rem;
+  font-weight: 650;
+  letter-spacing: 0.08em;
+}
+
+.pw-wrap {
+  position: relative;
+}
+
+.pw-wrap .auth-input {
+  padding-right: 3.2rem;
+}
+
+.eye-btn {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  color: var(--text-muted);
+  padding: 0;
+  line-height: 1;
+}
+
+.auth-modal-card .eye-btn {
+  color: var(--text-muted);
+}
+
+.field-err {
+  font-size: 0.8rem;
+  color: #ef4444;
+  margin-top: 0.4rem;
+  margin-left: 0.2rem;
+}
+
+.auth-modal-card .field-err {
+  color: #fda4af;
+}
+
+.pw-requirements {
+  margin-top: 0.6rem;
+  font-size: 0.8rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding-left: 0.2rem;
+}
+
+.req-item {
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  transition: color 0.2s ease;
+}
+
+.auth-modal-card .req-item {
+  color: var(--text-muted);
+}
+
+.req-item.met {
+  color: #16a34a;
+}
+
+.auth-modal-card .req-item.met {
+  color: #22c55e;
+}
+
+.req-icon {
+  font-size: 0.85rem;
+  font-weight: 600;
+  display: inline-block;
+  width: 14px;
+}
+
+.auth-alert {
+  padding: 1rem;
+  border-radius: var(--radius-input);
+  margin-bottom: 1.5rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.auth-alert--err {
+  background-color: #fef2f2;
+  color: #ef4444;
+}
+
+.auth-alert--ok {
+  background-color: #f0fdf4;
+  color: #16a34a;
+}
+
+.auth-modal-card .auth-alert {
+  border: 1px solid var(--border-light);
+  backdrop-filter: blur(12px);
+}
+
+.auth-modal-card .auth-alert--err {
+  background: rgb(239 68 68 / 0.12);
+  color: #b91c1c;
+}
+
+.auth-modal-card .auth-alert--ok {
+  background: rgb(34 197 94 / 0.12);
+  color: #15803d;
+}
+
+.otp-input {
+  width: 100%;
+  padding: 1.5rem;
+  font-size: 2rem;
+  letter-spacing: 0.5em;
+  text-align: center;
+  background-color: var(--bg-element);
+  border: 1px solid transparent;
+  border-radius: var(--radius-input);
+  font-family: monospace;
+  margin-bottom: 1.5rem;
+}
+
+.otp-input:focus {
+  background-color: var(--bg-card);
+  border-color: var(--text-dark);
+  outline: none;
+}
+
+/* Spinner */
+.spin {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgb(var(--theme-surface-rgb) / 0.3);
+  border-radius: 50%;
+  border-top-color: var(--text-dark);
+  animation: spin 0.8s linear infinite;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+
+.auth-modal-card .spin {
+  border-color: rgb(var(--theme-surface-rgb) / 0.18);
+  border-top-color: var(--text-dark);
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Shared Brand Icon */
+.brand-icon {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background-color: var(--text-dark);
+  color: var(--bg-card);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+/* ════════════════════════════════════════════════════════════════
+   SETTINGS PAGE
+   ════════════════════════════════════════════════════════════════ */
+.settings-page {
+  min-height: 100vh;
+  width: 100%;
+  padding: 1rem;
+  overflow-x: hidden;
+  background:
+    radial-gradient(circle at top left, rgb(var(--theme-surface-rgb) / 0.045), transparent 24%),
+    radial-gradient(circle at 85% 8%, rgb(var(--theme-surface-rgb) / 0.03), transparent 20%),
+    linear-gradient(180deg, var(--bg-light) 0%, color-mix(in srgb, var(--bg-light) 94%, #000 6%) 100%);
+  color: var(--text-dark);
+  font-family: 'Plus Jakarta Sans', 'Inter Tight', system-ui, sans-serif;
+}
+
+.settings-shell {
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  display: grid;
+  gap: 1rem;
+}
+
+.settings-hero {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  gap: 1rem;
+  padding: 1.75rem;
+  border: 1px solid var(--border-light);
+  border-radius: 28px;
+  background: var(--bg-card);
+  backdrop-filter: blur(18px);
+  box-shadow: var(--shadow-md);
+}
+
+.settings-hero__copy {
+  display: grid;
+  gap: 0.9rem;
+  min-width: 0;
+}
+
+.settings-hero__eyebrow {
+  font-size: 0.78rem;
+  line-height: 1;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.settings-hero__identity {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.settings-avatar {
+  width: 56px;
+  height: 56px;
+  border-radius: 18px;
+  background: linear-gradient(135deg, var(--bg-card), var(--bg-element));
+  color: var(--text-dark);
+  border: 1px solid var(--border-light);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  font-weight: 700;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.settings-avatar--hero {
+  width: 68px;
+  height: 68px;
+  border-radius: 22px;
+  font-size: 1.45rem;
+}
+
+.settings-hero__text {
+  display: grid;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.settings-hero__title {
+  margin: 0;
+  font-size: clamp(2rem, 4vw, 2.8rem);
+  font-weight: 550;
+  letter-spacing: -0.05em;
+  line-height: 0.95;
+}
+
+.settings-hero__subtitle {
+  max-width: 48ch;
+  font-size: 0.98rem;
+  color: var(--text-muted);
+}
+
+.settings-hero__actions {
+  min-width: 280px;
+  display: grid;
+  justify-items: end;
+  align-content: space-between;
+  gap: 1rem;
+}
+
+.settings-hero__stats {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.settings-stat-card {
+  padding: 1rem;
+  border-radius: 20px;
+  background: var(--bg-element);
+  border: 1px solid var(--border-light);
+  display: grid;
+  gap: 0.25rem;
+}
+
+.settings-stat-card__label {
+  font-size: 0.76rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+}
+
+.settings-stat-card__value {
+  font-size: 1rem;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+}
+
+.settings-layout-grid {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+  gap: 1rem;
+  align-items: start;
+}
+
+.settings-sidebar {
+  position: sticky;
+  top: 1rem;
+}
+
+.settings-sidebar-card {
+  display: grid;
+  gap: 1rem;
+  padding: 1.25rem;
+  border: 1px solid var(--border-light);
+  border-radius: 26px;
+  background: var(--bg-card);
+  backdrop-filter: blur(18px);
+  box-shadow: var(--shadow-md);
+}
+
+.settings-sidebar-card__header {
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+}
+
+.settings-sidebar-card__identity {
+  min-width: 0;
+  display: grid;
+  gap: 0.18rem;
+}
+
+.settings-sidebar-card__name {
+  font-size: 1rem;
+  font-weight: 650;
+  color: var(--text-dark);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.settings-sidebar-card__email {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.settings-sidebar-card__badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.settings-sidebar-nav {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.settings-sidebar-nav__item {
+  width: 100%;
+  padding: 0.9rem 1rem;
+  border-radius: 16px;
+  background: var(--bg-element);
+  border: 1px solid transparent;
+  font-size: 0.95rem;
+  font-weight: 550;
+  color: var(--text-dark);
+  text-align: left;
+  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
+}
+
+.settings-sidebar-nav__item:hover {
+  background: var(--bg-element-hov);
+  border-color: var(--border-light);
+}
+
+.settings-content {
+  display: grid;
+  gap: 1rem;
+}
+
+.settings-scroll-target {
+  scroll-margin-top: 1rem;
+}
+
+.settings-panel {
+  display: grid;
+  gap: 1.25rem;
+  padding: 1.4rem;
+  border: 1px solid var(--border-light);
+  border-radius: 26px;
+  background: var(--bg-card);
+  backdrop-filter: blur(18px);
+  box-shadow: var(--shadow-md);
+  outline: none;
+}
+
+.settings-panel:focus-visible {
+  border-color: rgba(255, 255, 255, 0.22);
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
+}
+
+.settings-panel__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.settings-panel__header--split {
+  flex-wrap: wrap;
+}
+
+.settings-panel__title {
+  margin: 0.1rem 0 0;
+  font-size: 1.55rem;
+  font-weight: 550;
+  letter-spacing: -0.04em;
+}
+
+.settings-panel__description {
+  margin-top: 0.35rem;
+  max-width: 54ch;
+  color: var(--text-muted);
+  font-size: 0.95rem;
+}
+
+.settings-panel__pill-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+.settings-section-title {
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  margin-bottom: 0;
+  font-weight: 650;
+}
+
+.settings-profile-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.settings-center-section {
+  display: grid;
+  gap: 1.5rem;
+  padding: 2rem 2.25rem;
+  border: 1px solid var(--border-light);
+  border-radius: 28px;
+  background: var(--bg-card);
+  box-shadow: var(--shadow-md);
+  outline: none;
+}
+
+.settings-surface-card {
+  display: grid;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-radius: 20px;
+  background: var(--bg-element);
+  border: 1px solid var(--border-light);
+}
+
+.settings-label {
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  font-weight: 650;
+}
+
+.settings-value-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.settings-email-value {
+  font-size: 1rem;
+  font-weight: 650;
+  color: var(--text-dark);
+}
+
+.settings-inline-form {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.settings-inline-form .auth-input {
+  flex: 1;
+}
+
+.settings-helper-text {
+  font-size: 0.78rem;
+  color: var(--text-muted);
+}
+
+.settings-password-form {
+  display: grid;
+  gap: 1rem;
+}
+
+.settings-password-grid {
+  display: grid;
+  gap: 0.9rem;
+}
+
+.settings-password-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.settings-password-actions .btn-pill-dark {
+  min-width: 190px;
+}
+
+.settings-alert-inline {
+  margin-bottom: 0;
+}
+
+.settings-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 1.8rem;
+  padding: 0.2rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.76rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}
+
+.settings-badge--ok {
+  background: rgb(34 197 94 / 0.14);
+  color: #15803d;
+}
+
+.settings-badge--warn {
+  background: rgb(239 68 68 / 0.14);
+  color: #b91c1c;
+}
+
+.settings-badge--soft {
+  background: var(--bg-element);
+  color: var(--text-muted);
+}
+
+.settings-badge--dark {
+  background: var(--text-dark);
+  color: var(--bg-light);
+}
+
+.settings-provider-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.settings-provider-card {
+  display: grid;
+  gap: 1rem;
+  padding: 1.15rem;
+  border-radius: 22px;
+  border: 1px solid var(--border-light);
+  background:
+    radial-gradient(circle at top right, rgb(var(--theme-surface-rgb) / 0.045), transparent 28%),
+    linear-gradient(180deg, var(--bg-card) 0%, var(--bg-light) 100%);
+  backdrop-filter: blur(18px);
+}
+
+.settings-provider-card--default {
+  border-color: color-mix(in srgb, var(--border-light) 70%, var(--text-dark));
+  box-shadow: var(--shadow-md);
+}
+
+.settings-provider-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.settings-provider-card__heading {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.settings-provider-card__title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.settings-provider-card__title {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 650;
+  letter-spacing: -0.03em;
+}
+
+.settings-provider-card__helper {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+}
+
+.settings-default-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  color: var(--text-dark);
+  font-size: 0.86rem;
+  white-space: nowrap;
+}
+
+.settings-default-toggle input {
+  accent-color: var(--text-dark);
+}
+
+.settings-default-toggle--disabled {
+  color: var(--text-muted);
+}
+
+.settings-provider-card__stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.settings-provider-stat {
+  display: grid;
+  gap: 0.2rem;
+  padding: 0.9rem 1rem;
+  border-radius: 16px;
+  background: var(--bg-element);
+  border: 1px solid var(--border-light);
+}
+
+.settings-provider-stat__label {
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  font-weight: 650;
+}
+
+.settings-provider-stat__value {
+  font-size: 0.92rem;
+  font-weight: 600;
+  color: var(--text-dark);
+  word-break: break-word;
+}
+
+.settings-provider-form {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  align-items: start;
+}
+
+.settings-provider-form .auth-input {
+  min-width: 0;
+}
+
+.settings-provider-form__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.settings-provider-remove {
+  color: #fda4af;
+  border-color: rgba(253, 164, 175, 0.18);
+}
+
+.settings-provider-remove:hover {
+  background: rgba(253, 164, 175, 0.1);
+}
+
+.settings-placeholder {
+  padding: 1.25rem;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 0.95rem;
+  background: var(--bg-element);
+  border-radius: 18px;
+  border: 1px solid var(--border-light);
+}
+
+.settings-page .btn-pill-dark {
+  background: linear-gradient(135deg, var(--bg-card), var(--bg-element-hov));
+  color: var(--text-dark);
+  box-shadow: 0 10px 28px rgb(var(--theme-surface-rgb) / 0.08);
+}
+
+.settings-page .btn-pill-dark:hover {
+  background: linear-gradient(135deg, var(--bg-card), var(--bg-element));
+}
+
+.settings-page .btn-pill-outline {
+  border: 1px solid var(--border-light);
+  background: var(--bg-element);
+  color: var(--text-dark);
+}
+
+.settings-page .btn-pill-outline:hover {
+  background: var(--bg-element-hov);
+}
+
+.settings-page .auth-input {
+  background-color: var(--bg-element);
+  color: var(--text-dark);
+  border-color: var(--border-light);
+}
+
+.settings-page .auth-input::placeholder {
+  color: var(--text-muted);
+}
+
+.settings-page .auth-input:focus {
+  background-color: var(--bg-card);
+  border-color: var(--text-dark);
+  box-shadow: 0 0 0 3px rgb(var(--theme-surface-rgb) / 0.05);
+}
+
+.settings-page .eye-btn {
+  color: var(--text-muted);
+}
+
+.settings-page .auth-alert {
+  border: 1px solid var(--border-light);
+  backdrop-filter: blur(12px);
+  background: var(--bg-element);
+  color: var(--text-dark);
+}
+
+.settings-page .auth-alert--err {
+  background: rgb(239 68 68 / 0.14);
+  color: #b91c1c;
+}
+
+.settings-page .auth-alert--ok {
+  background: rgb(34 197 94 / 0.12);
+  color: #15803d;
+}
+
+.settings-workspace {
+  width: 100%;
+  max-width: 1600px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 300px minmax(0, 1fr);
+  gap: 1rem;
+  align-items: start;
+}
+
+.settings-rail {
+  position: sticky;
+  top: 1rem;
+  display: grid;
+  gap: 1rem;
+  padding: 1.25rem;
+  border: 1px solid var(--border-light);
+  border-radius: 28px;
+  background: var(--bg-card);
+  backdrop-filter: blur(18px);
+  box-shadow: var(--shadow-md);
+}
+
+.settings-rail__brand {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.settings-rail__eyebrow,
+.settings-stage__eyebrow,
+.settings-section__eyebrow {
+  font-size: 0.74rem;
+  line-height: 1;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.settings-rail__title,
+.settings-stage__title {
+  font-size: clamp(2rem, 3vw, 3rem);
+  line-height: 0.96;
+  letter-spacing: -0.05em;
+  font-weight: 550;
+}
+
+.settings-rail__description,
+.settings-stage__description,
+.settings-section__description {
+  color: var(--text-muted);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.settings-rail__identity {
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+  padding: 0.95rem;
+  border-radius: 22px;
+  background: var(--bg-element);
+  border: 1px solid var(--border-light);
+}
+
+.settings-avatar--rail {
+  width: 52px;
+  height: 52px;
+  border-radius: 18px;
+  font-size: 1rem;
+}
+
+.settings-rail__identity-copy {
+  min-width: 0;
+  display: grid;
+  gap: 0.2rem;
+}
+
+.settings-rail__name {
+  font-size: 1rem;
+  font-weight: 650;
+  color: var(--text-dark);
+}
+
+.settings-rail__email {
+  color: var(--text-muted);
+  font-size: 0.88rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.settings-rail__badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.settings-rail__nav {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.settings-rail__nav-item {
+  width: 100%;
+  display: grid;
+  gap: 0.15rem;
+  text-align: left;
+  padding: 0.9rem 1rem;
+  border-radius: 18px;
+  background: var(--bg-element);
+  border: 1px solid transparent;
+  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
+}
+
+.settings-rail__nav-item:hover {
+  background: var(--bg-element-hov);
+  border-color: var(--border-light);
+}
+
+.settings-rail__nav-item--active {
+  background: var(--bg-card);
+  border-color: color-mix(in srgb, var(--border-light) 75%, var(--text-dark));
+  box-shadow: var(--shadow-sm);
+}
+
+.settings-rail__nav-label {
+  color: var(--text-dark);
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+.settings-rail__nav-meta {
+  color: var(--text-muted);
+  font-size: 0.82rem;
+}
+
+.settings-rail__stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.settings-rail__stat {
+  display: grid;
+  gap: 0.3rem;
+  padding: 0.9rem 1rem;
+  border-radius: 18px;
+  background: var(--bg-element);
+  border: 1px solid var(--border-light);
+}
+
+.settings-rail__stat-label {
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.72rem;
+  font-weight: 650;
+}
+
+.settings-rail__stat-value {
+  color: var(--text-dark);
+  font-size: 0.92rem;
+  font-weight: 650;
+}
+
+.settings-rail__footer {
+  padding-top: 0.25rem;
+}
+
+.settings-rail__primary-action {
+  width: 100%;
+  justify-content: center;
+}
+
+.settings-stage {
+  display: grid;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.settings-stage__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1.25rem;
+  border: 1px solid var(--border-light);
+  border-radius: 28px;
+  background:
+    radial-gradient(circle at top right, rgb(var(--theme-surface-rgb) / 0.04), transparent 28%),
+    linear-gradient(180deg, var(--bg-card) 0%, var(--bg-light) 100%);
+  backdrop-filter: blur(18px);
+  box-shadow: var(--shadow-md);
+}
+
+.settings-stage__copy {
+  display: grid;
+  gap: 0.45rem;
+  min-width: 0;
+}
+
+.settings-stage__chips,
+.settings-section__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+.settings-section {
+  display: grid;
+  gap: 1rem;
+  padding: 1.25rem;
+  border: 1px solid var(--border-light);
+  border-radius: 28px;
+  background:
+    radial-gradient(circle at top right, rgb(var(--theme-surface-rgb) / 0.03), transparent 26%),
+    linear-gradient(180deg, var(--bg-card) 0%, var(--bg-light) 100%);
+  backdrop-filter: blur(18px);
+  box-shadow: var(--shadow-md);
+  outline: none;
+}
+
+.settings-section:focus-visible {
+  border-color: color-mix(in srgb, var(--border-light) 65%, var(--text-dark));
+  box-shadow: 0 0 0 3px rgb(var(--theme-surface-rgb) / 0.08);
+}
+
+.settings-section__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.settings-section__header--split {
+  flex-wrap: wrap;
+}
+
+.settings-section__heading {
+  display: grid;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.settings-section__title {
+  margin: 0;
+  font-size: 1.55rem;
+  line-height: 1;
+  letter-spacing: -0.04em;
+  font-weight: 550;
+}
+
+.settings-section__grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.settings-section__grid--two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.settings-surface-card--summary,
+.settings-surface-card--editor,
+.settings-surface-card--form {
+  background: var(--bg-element);
+  border: 1px solid var(--border-light);
+}
+
+.settings-surface-card--summary {
+  min-width: 0;
+}
+
+.settings-surface-card--editor {
+  min-width: 0;
+}
+
+.settings-surface-card--form {
+  padding: 1.1rem;
+}
+
+.settings-provider-card__title {
+  margin: 0;
+  font-size: 1.02rem;
+  font-weight: 650;
+  letter-spacing: -0.03em;
+}
+
+.settings-provider-card__helper {
+  color: var(--text-muted);
+}
+
+.settings-provider-grid {
+  gap: 0.9rem;
+}
+
+.settings-provider-card {
+  padding: 1.1rem;
+}
+
+.settings-provider-card__stats {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.settings-provider-form {
+  align-items: stretch;
+}
+
+.settings-provider-form__actions {
+  align-items: stretch;
+}
+
+.settings-provider-form__actions .btn-pill-dark,
+.settings-provider-form__actions .btn-pill-outline {
+  min-height: 48px;
+}
+
+.settings-placeholder {
+  text-align: left;
+}
+
+@media (max-width: 1024px) {
+  .settings-workspace {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .settings-rail {
+    position: static;
+  }
+
+  .settings-stage__header,
+  .settings-section__header {
+    flex-direction: column;
+  }
+
+  .settings-stage__chips,
+  .settings-section__chips {
+    justify-content: flex-start;
+  }
+
+  .settings-section__grid--two {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .settings-provider-card__stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .settings-provider-form {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .settings-provider-form__actions {
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 640px) {
+  .landing-nav {
+    padding: 1.5rem;
+  }
+
+  .landing-links {
+    display: none;
+  }
+
+  .app-topbar {
+    padding: 1.25rem 1.5rem;
+  }
+
+  .app-actions {
+    gap: 0.85rem;
+  }
+
+  .chat-shell {
+    grid-template-columns: minmax(0, 1fr);
+    min-height: auto;
+  }
+
+  .chat-shell__sidebar {
+    border-right: none;
+    border-bottom: 1px solid var(--border-light);
+  }
+
+  .chat-shell__sidebar-body {
+    grid-template-rows: auto auto auto;
+  }
+
+  .chat-shell__history-list {
+    max-height: 16rem;
+  }
+
+  .chat-empty-state,
+  .chat-transcript {
+    padding: 1.25rem 1rem;
+  }
+
+  .chat-message-row--branchable {
+    width: 100%;
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .chat-message-row__rail {
+    display: none;
+  }
+
+  .chat-composer-card,
+  .chat-dock {
+    border-radius: 24px;
+  }
+
+  .chat-composer-card__footer,
+  .chat-dock__footer,
+  .chat-transcript__header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .chat-canvas-panel {
+    padding: 1.25rem 1rem;
+  }
+
+  .chat-canvas-panel__header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .chat-canvas-panel__actions {
+    justify-content: flex-start;
+  }
+
+  .chat-canvas-info {
+    align-self: flex-end;
+  }
+
+  .chat-canvas-info__popover {
+    width: min(320px, calc(100vw - 2rem));
+  }
+
+  .chat-canvas-workspace {
+    height: calc(100vh - 250px);
+    min-height: calc(100vh - 250px);
+  }
+
+  .chat-branch-popover {
+    left: 0;
+    right: auto;
+    width: min(430px, calc(100vw - 2rem));
+  }
+
+  .chat-branch-popover__arrow {
+    left: 1.45rem;
+    right: auto;
+  }
+
+  .dashboard-main {
+    padding: 1rem 1.5rem 4rem;
+  }
+
+  .dashboard-main--chat {
+    padding: 0;
+  }
+
+  .dashboard-main--canvas {
+    padding: 1rem 0 4rem;
+  }
+
+  .mobile-drawer {
+    top: 74px;
+  }
+
+  .mobile-drawer-backdrop {
+    top: 74px;
+  }
+
+  .mobile-drawer .canvas-sidebar-panel {
+    min-height: calc(100vh - 74px);
+  }
+
+  .auth-card-wrapper {
+    padding: 1rem;
+  }
+
+  .auth-card {
+    padding: 2rem 1.5rem;
+  }
+
+  .auth-modal-backdrop {
+    padding: 0.75rem;
+  }
+
+  .auth-modal-card {
+    max-height: calc(100vh - 1.5rem);
+    border-radius: 24px;
+  }
+
+  .auth-modal-card__content {
+    padding: 1.25rem;
+    gap: 1rem;
+    max-height: calc(100vh - 1.5rem);
+  }
+
+  .auth-modal-card__header {
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 0.75rem;
+    padding-bottom: 0.85rem;
+  }
+
+  .auth-modal-card__title {
+    font-size: 1.45rem;
+  }
+
+  .auth-modal-card__copy {
+    font-size: 0.92rem;
+  }
+
+  .settings-workspace,
+  .settings-stage,
+  .settings-rail {
+    padding: 1rem;
+  }
+
+  .settings-stage__header,
+  .settings-section,
+  .settings-rail {
+    border-radius: 22px;
+  }
+
+  .settings-stage__title {
+    font-size: 2rem;
+  }
+
+  .settings-rail__identity {
+    align-items: flex-start;
+  }
+
+  .settings-rail__stats {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .settings-inline-form {
+    flex-direction: column;
+  }
+
+  .settings-inline-form .btn-pill-dark,
+  .settings-password-actions .btn-pill-dark,
+  .settings-provider-form__actions .btn-pill-dark,
+  .settings-provider-form__actions .btn-pill-outline {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .settings-provider-card__header {
+    flex-direction: column;
+  }
+
+  .settings-stage__chips,
+  .settings-section__chips {
+    justify-content: flex-start;
+  }
+}
+
+.chat-canvas-node-tooltip {
+  pointer-events: none;
+  animation: tooltip-fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.chat-canvas-node-tooltip__content {
+  background: rgb(var(--theme-surface-rgb) / 0.95);
+  backdrop-filter: blur(8px);
+  color: var(--text-dark);
+  padding: 0.75rem 0.9rem;
+  border-radius: 12px;
+  font-size: 0.88rem;
+  line-height: 1.45;
+  max-width: 240px;
+  box-shadow: 0 12px 28px rgb(var(--theme-text-rgb) / 0.18);
+  border: 1px solid var(--border-light);
+}
+
+.chat-canvas-node-tooltip__text {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.chat-canvas-node-tooltip__loading {
+  opacity: 0.7;
+  font-style: italic;
+  font-size: 0.82rem;
+}
+
+.chat-canvas-node-tooltip__arrow {
+  position: absolute;
+  bottom: -4px;
+  left: 50%;
+  width: 10px;
+  height: 10px;
+  background: rgb(var(--theme-surface-rgb) / 0.95);
+  transform: translateX(-50%) rotate(45deg);
+  z-index: -1;
+}
+
+@keyframes tooltip-fade-in {
+  from { opacity: 0; transform: translateY(5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ════════════════════════════════════════════════════════════════
+   SETTINGS CONTROL CENTER
+   ════════════════════════════════════════════════════════════════ */
+.settings-center-page {
+  width: 100%;
+  min-height: 100vh;
+  padding: 1rem;
+  color: var(--text-dark);
+  background:
+    radial-gradient(circle at 15% 0%, rgb(var(--theme-surface-rgb) / 0.08), transparent 28%),
+    radial-gradient(circle at 90% 10%, rgb(var(--theme-surface-rgb) / 0.045), transparent 22%),
+    linear-gradient(180deg, color-mix(in srgb, var(--bg-light) 94%, #000 6%) 0%, var(--bg-light) 100%);
+}
+
+.settings-center-shell {
+  width: 100%;
+  max-width: 1700px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 320px minmax(0, 1fr);
+  gap: 1rem;
+  align-items: start;
+}
+
+.settings-center-rail,
+.settings-center-hero,
+.settings-center-section,
+.settings-card,
+.settings-provider-card {
+  border: 1px solid var(--border-light);
+  border-radius: 28px;
+  background:
+    radial-gradient(circle at top right, rgb(var(--theme-surface-rgb) / 0.04), transparent 28%),
+    linear-gradient(180deg, rgb(var(--theme-surface-rgb) / 0.82), rgb(var(--theme-surface-rgb) / 0.68));
+  backdrop-filter: blur(18px);
+  box-shadow: var(--shadow-md);
+}
+
+.settings-center-rail {
+  position: sticky;
+  top: 1rem;
+  display: grid;
+  gap: 1rem;
+  padding: 1.2rem;
+}
+
+.settings-center-rail__brand,
+.settings-center-hero__copy,
+.settings-center-section__copy {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.settings-center-kicker {
+  font-size: 0.74rem;
+  line-height: 1;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.settings-center-rail__title,
+.settings-center-hero__title,
+.settings-center-section__title {
+  font-size: clamp(2rem, 3vw, 3rem);
+  line-height: 0.96;
+  letter-spacing: -0.05em;
+  font-weight: 550;
+}
+
+.settings-center-rail__description,
+.settings-center-hero__description,
+.settings-center-section__description {
+  color: var(--text-muted);
+  font-size: 0.95rem;
+  line-height: 1.5;
+  max-width: 58ch;
+}
+
+.settings-center-summary {
+  display: flex;
+  gap: 0.85rem;
+  align-items: center;
+  padding: 0.95rem;
+  border-radius: 22px;
+  background: rgb(var(--theme-surface-overlay-rgb) / 0.12);
+  border: 1px solid rgb(var(--theme-surface-overlay-rgb) / 0.08);
+}
+
+.settings-center-avatar {
+  width: 56px;
+  height: 56px;
+  flex-shrink: 0;
+  border-radius: 18px;
+  object-fit: cover;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.15rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, rgb(var(--theme-surface-rgb) / 0.92), rgb(var(--theme-surface-rgb) / 0.68));
+  border: 1px solid rgb(var(--theme-surface-overlay-rgb) / 0.1);
+}
+
+.settings-center-avatar--fallback {
+  color: var(--text-dark);
+}
+
+.settings-center-summary__copy {
+  min-width: 0;
+}
+
+.settings-center-summary__name {
+  display: block;
+  font-size: 1rem;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+}
+
+.settings-center-summary__email,
+.settings-center-summary__meta {
+  display: block;
+  color: var(--text-muted);
+  font-size: 0.88rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.settings-center-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.settings-center-metric {
+  display: grid;
+  gap: 0.22rem;
+  padding: 0.9rem 1rem;
+  border-radius: 18px;
+  background: rgb(var(--theme-surface-overlay-rgb) / 0.1);
+  border: 1px solid rgb(var(--theme-surface-overlay-rgb) / 0.08);
+}
+
+.settings-center-metric__label {
+  color: var(--text-muted);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 700;
+}
+
+.settings-center-metric__value {
+  color: var(--text-dark);
+  font-size: 0.92rem;
+  font-weight: 650;
+}
+
+.settings-center-nav {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.settings-center-nav__item {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1.1rem minmax(0, 1fr);
+  gap: 0.85rem;
+  align-items: center;
+  text-align: left;
+  padding: 0.9rem 1rem;
+  border-radius: 18px;
+  background: rgb(var(--theme-surface-overlay-rgb) / 0.08);
+  border: 1px solid transparent;
+  color: var(--text-dark);
+  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
+}
+
+.settings-center-nav__item:hover {
+  background: rgb(var(--theme-surface-overlay-rgb) / 0.12);
+  border-color: rgb(var(--theme-surface-overlay-rgb) / 0.08);
+}
+
+.settings-center-nav__item--active {
+  background: rgb(var(--theme-surface-rgb) / 0.9);
+  border-color: color-mix(in srgb, var(--border-light) 70%, var(--text-dark));
+  box-shadow: var(--shadow-sm);
+}
+
+.settings-center-nav__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+
+.settings-center-nav__copy {
+  display: grid;
+  gap: 0.2rem;
+}
+
+.settings-center-nav__label {
+  font-size: 0.94rem;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+}
+
+.settings-center-nav__description {
+  color: var(--text-muted);
+  font-size: 0.82rem;
+}
+
+.settings-center-rail__actions {
+  display: grid;
+}
+
+.settings-center-main {
+  display: grid;
+  gap: 2rem;
+  min-width: 0;
+}
+
+.settings-center-hero {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 2.5rem 3rem;
+  border: 1px solid var(--border-light);
+  border-radius: 28px;
+  background: var(--bg-card);
+  backdrop-filter: blur(18px);
+  box-shadow: var(--shadow-md);
+}
+
+.settings-center-hero__chips,
+.settings-center-section__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  align-content: flex-start;
+}
+
+.settings-center-section {
+  display: grid;
+  gap: 2rem;
+  padding: 2.5rem 3rem;
+  border: 1px solid var(--border-light);
+  border-radius: 28px;
+  background: var(--bg-card);
+  backdrop-filter: blur(18px);
+  box-shadow: var(--shadow-md);
+  outline: none;
+  scroll-margin-top: 2rem;
 }
 
-.mobile-drawer .canvas-sidebar-panel {
-  min-height: calc(100vh - 88px);
-  border-right: none;
-  flex: 1;
+.settings-center-section:focus-visible {
+  box-shadow: 0 0 0 3px rgb(var(--theme-surface-rgb) / 0.08), var(--shadow-md);
 }
 
-.canvas-chat-panel {
+.settings-center-section__header {
   display: flex;
-  flex-direction: column;
-  padding: 1.5rem;
-  min-height: calc(100vh - 88px);
-  width: 100%;
-  background: #fff;
-  overflow-y: auto;
-  align-items: stretch;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
 }
 
-.canvas-chat-panel > * {
-  width: 100%;
+.settings-grid {
+  display: grid;
+  gap: 1rem;
 }
 
-.canvas-chat-panel:hover,
-.canvas-sidebar-panel:hover {
-  background-color: inherit;
-  box-shadow: none;
+.settings-grid--two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.canvas-graph-shell {
-  width: 100%;
-  min-height: 620px;
-  border: 1px solid rgba(17, 17, 17, 0.08);
-  border-radius: 24px;
-  overflow: hidden;
-  background:
-    radial-gradient(circle at top, rgba(17, 17, 17, 0.03), transparent 45%),
-    linear-gradient(180deg, #fcfcfb 0%, #f5f5f2 100%);
+.settings-card {
+  padding: 1.25rem;
+  display: grid;
+  gap: 0.85rem;
+  border: 1px solid var(--border-light);
+  border-radius: 28px;
+  background: var(--bg-card);
+  box-shadow: var(--shadow-md);
+  backdrop-filter: blur(18px);
 }
 
-.canvas-graph-surface {
-  width: 100%;
-  height: 620px;
+.settings-card--stacked {
+  gap: 0.45rem;
 }
 
-.canvas-node-card {
-  width: 300px;
-  border-radius: 24px;
-  padding: 1rem;
-  border: 1px solid rgba(17, 17, 17, 0.12);
-  background: rgba(255, 255, 255, 0.97);
-  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.08);
-  display: grid;
-  gap: 0.8rem;
+.settings-card--summary-danger {
+  border-color: rgb(239 68 68 / 0.2);
 }
 
-.canvas-node-card--main {
-  width: 360px;
+.settings-card__label {
+  color: var(--text-muted);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 700;
 }
 
-.canvas-node-card--selected {
-  border-color: rgba(17, 17, 17, 0.32);
-  box-shadow: 0 24px 50px rgba(17, 17, 17, 0.14);
+.settings-card__value {
+  color: var(--text-dark);
+  font-size: 1.02rem;
+  font-weight: 650;
+  letter-spacing: -0.02em;
 }
 
-.canvas-node-card__eyebrow {
-  display: flex;
-  justify-content: space-between;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-  font-size: 0.75rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+.settings-card__helper {
   color: var(--text-muted);
+  font-size: 0.92rem;
+  line-height: 1.5;
 }
 
-.canvas-node-card__title {
-  margin: 0;
-  font-size: 1.05rem;
-  color: var(--text-dark);
+.settings-card__actions,
+.settings-stack {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+  align-items: center;
 }
 
-.canvas-node-card__content {
-  margin: 0;
-  white-space: pre-wrap;
-  line-height: 1.55;
-  color: var(--text-dark);
+.settings-card__footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
-.canvas-node-card__hint {
-  font-size: 0.88rem;
+.settings-empty-state {
+  padding: 1rem 1.1rem;
+  border-radius: 18px;
+  border: 1px dashed var(--border-light);
+  background: rgb(var(--theme-surface-overlay-rgb) / 0.06);
   color: var(--text-muted);
 }
 
-.canvas-node-card__composer {
+.settings-form {
   display: grid;
-  gap: 0.75rem;
+  gap: 0.85rem;
 }
 
-.canvas-node-card__label {
-  font-size: 0.9rem;
-  color: var(--text-dark);
-  font-weight: 500;
+.settings-password-field {
+  position: relative;
 }
 
-.canvas-node-card__textarea {
+.settings-input {
   width: 100%;
-  border-radius: 18px;
-  border: 1px solid rgba(17, 17, 17, 0.12);
-  padding: 0.9rem 1rem;
-  resize: vertical;
-  font: inherit;
-  background: #fff;
+  min-height: 50px;
+  padding: 0.88rem 1rem;
+  border-radius: 16px;
+  border: 1px solid var(--border-light);
+  background: rgb(var(--theme-surface-overlay-rgb) / 0.1);
   color: var(--text-dark);
-}
-
-.canvas-node-card__textarea:focus {
   outline: none;
-  border-color: rgba(17, 17, 17, 0.34);
+  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
 }
 
-.canvas-node-card__footer {
-  display: grid;
-  gap: 0.75rem;
+.settings-input::placeholder {
+  color: var(--text-muted);
 }
 
-.canvas-node-card__provider {
-  display: grid;
-  gap: 0.45rem;
+.settings-input:focus {
+  background: rgb(var(--theme-surface-rgb) / 0.95);
+  border-color: color-mix(in srgb, var(--border-light) 55%, var(--text-dark));
+  box-shadow: 0 0 0 3px rgb(var(--theme-surface-rgb) / 0.08);
 }
 
-.canvas-node-card__provider label {
-  font-size: 0.85rem;
-  color: var(--text-muted);
+.settings-password-field .settings-input {
+  padding-right: 3rem;
 }
 
-.canvas-node-card__provider-empty {
-  display: grid;
-  gap: 0.6rem;
-  font-size: 0.85rem;
+.settings-icon-button {
+  position: absolute;
+  top: 50%;
+  right: 0.75rem;
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
   color: var(--text-muted);
+  transform: translateY(-50%);
+  transition: background-color 0.2s ease, color 0.2s ease;
 }
 
-@media (max-width: 900px) {
-  .canvas-sidebar {
-    display: none;
-  }
+.settings-icon-button:hover {
+  color: var(--text-dark);
+  background: rgb(var(--theme-surface-overlay-rgb) / 0.12);
+}
 
-  .canvas-panel-header {
-    display: flex;
-  }
+.settings-button {
+  min-height: 48px;
+  padding: 0.78rem 1.2rem;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font-size: 0.94rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
+}
 
-  .canvas-shell {
-    margin: 0;
-    min-height: auto;
-  }
+.settings-button:hover {
+  transform: translateY(-1px);
+}
 
-  .canvas-home-grid {
-    grid-template-columns: 1fr !important;
-    min-height: auto;
-    border-top: none;
-    background: transparent;
-  }
+.settings-button:disabled {
+  opacity: 0.55;
+  transform: none;
+  cursor: not-allowed;
+}
 
-  .canvas-chat-panel {
-    min-height: auto;
-    border-radius: var(--radius-card);
-    border: 1px solid var(--border-light);
-  }
+.settings-button--primary {
+  background: linear-gradient(135deg, rgb(var(--theme-surface-rgb) / 0.95), rgb(var(--theme-surface-rgb) / 0.82));
+  color: var(--text-dark);
+  border-color: rgb(var(--theme-surface-overlay-rgb) / 0.08);
+}
 
-  .canvas-graph-shell,
-  .canvas-graph-surface {
-    min-height: 520px;
-    height: 520px;
-  }
+.settings-button--secondary {
+  background: rgb(var(--theme-surface-overlay-rgb) / 0.08);
+  color: var(--text-dark);
+  border-color: rgb(var(--theme-surface-overlay-rgb) / 0.08);
+}
 
-  .canvas-node-card,
-  .canvas-node-card--main {
-    width: 280px;
-  }
+.settings-button--ghost {
+  background: transparent;
+  color: var(--text-dark);
+  border-color: var(--border-light);
 }
 
-.dash-promo {
-  text-align: center;
-  margin: 2rem 0 4rem;
+.settings-button--danger {
+  background: rgb(239 68 68 / 0.12);
+  color: #ef4444;
+  border-color: rgb(239 68 68 / 0.16);
 }
 
-.dash-promo-badge {
-  display: inline-block;
-  background-color: #fff4e6;
-  color: #db7835;
-  padding: 0.4rem 1rem;
-  border-radius: var(--radius-pill);
-  font-size: 0.8rem;
-  font-weight: 600;
-  margin-bottom: 1.5rem;
+.settings-button--danger:hover {
+  background: rgb(239 68 68 / 0.16);
 }
 
-.dash-promo h2 {
-  font-size: 2.5rem;
-  font-weight: 400;
-  margin-bottom: 0.5rem;
+.settings-toggle-row {
   display: flex;
+  gap: 1rem;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
+  padding: 0.95rem 1rem;
+  border-radius: 18px;
+  background: rgb(var(--theme-surface-overlay-rgb) / 0.08);
+  border: 1px solid rgb(var(--theme-surface-overlay-rgb) / 0.08);
 }
 
-.dash-promo p {
+.settings-toggle-row__copy {
+  display: grid;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+.settings-toggle-row__label {
+  font-size: 0.96rem;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+}
+
+.settings-toggle-row__description {
   color: var(--text-muted);
-  font-size: 1.1rem;
+  font-size: 0.84rem;
+  line-height: 1.45;
 }
 
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.5rem;
+.settings-toggle-row__control {
+  position: relative;
+  width: 48px;
+  height: 28px;
+  flex-shrink: 0;
 }
 
-.section-title {
-  font-size: 1.1rem;
-  font-weight: 600;
+.settings-toggle-row__control input {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  opacity: 0;
+  cursor: pointer;
 }
 
-.section-link {
-  font-size: 0.9rem;
-  color: var(--text-muted);
-  font-weight: 500;
+.settings-toggle-row__track {
+  position: absolute;
+  inset: 0;
+  border-radius: 999px;
+  background: rgb(var(--theme-surface-overlay-rgb) / 0.16);
+  border: 1px solid rgb(var(--theme-surface-overlay-rgb) / 0.08);
+  transition: background-color 0.2s ease, border-color 0.2s ease;
 }
 
-.project-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 1.5rem;
+.settings-toggle-row__thumb {
+  position: absolute;
+  top: 50%;
+  left: 4px;
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  background: var(--bg-card);
+  transform: translateY(-50%);
+  box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
+  transition: transform 0.2s ease, background-color 0.2s ease;
 }
 
-.project-card {
-  background-color: var(--bg-card);
-  border-radius: var(--radius-card);
-  height: 220px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+.settings-toggle-row__control input:checked + .settings-toggle-row__track {
+  background: rgb(var(--theme-surface-rgb) / 0.9);
+}
+
+.settings-toggle-row__control input:checked + .settings-toggle-row__track .settings-toggle-row__thumb {
+  transform: translate(20px, -50%);
+}
+
+.settings-badge {
+  display: inline-flex;
   align-items: center;
-  cursor: pointer;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  border: 1px solid var(--border-light);
-  color: var(--text-muted);
+  gap: 0.35rem;
+  min-height: 1.8rem;
+  padding: 0.18rem 0.65rem;
+  border-radius: 999px;
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  background: rgb(var(--theme-surface-overlay-rgb) / 0.1);
+  color: var(--text-dark);
+  border: 1px solid rgb(var(--theme-surface-overlay-rgb) / 0.08);
 }
 
-.project-card:hover {
-  background-color: var(--bg-light);
-  box-shadow: var(--shadow-sm);
+.settings-badge--success {
+  background: rgb(34 197 94 / 0.14);
+  color: #22c55e;
+  border-color: rgb(34 197 94 / 0.18);
 }
 
-.project-card-full {
-  justify-content: flex-end;
-  align-items: flex-start;
-  padding: 1.5rem;
+.settings-badge--warning {
+  background: rgb(245 158 11 / 0.16);
+  color: #f59e0b;
+  border-color: rgb(245 158 11 / 0.18);
 }
 
-/* ════════════════════════════════════════════════════════════════
-   AUTH PAGES
-   ════════════════════════════════════════════════════════════════ */
-.auth-layout {
-  min-height: 100vh;
+.settings-badge--danger {
+  background: rgb(239 68 68 / 0.14);
+  color: #ef4444;
+  border-color: rgb(239 68 68 / 0.18);
+}
+
+.settings-banner {
   display: flex;
-  flex-direction: column;
-  background-color: var(--bg-light);
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.85rem 1rem;
+  border-radius: 18px;
+  border: 1px solid var(--border-light);
+  background: rgb(var(--theme-surface-overlay-rgb) / 0.08);
+  font-size: 0.92rem;
+}
+
+.settings-banner--success {
+  color: #22c55e;
+  background: rgb(34 197 94 / 0.12);
+  border-color: rgb(34 197 94 / 0.18);
 }
 
-.auth-card-wrapper {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
+.settings-banner--error {
+  color: #ef4444;
+  background: rgb(239 68 68 / 0.12);
+  border-color: rgb(239 68 68 / 0.18);
 }
 
-.auth-card {
-  background-color: var(--bg-card);
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-card);
-  box-shadow: var(--shadow-md);
-  width: 100%;
-  max-width: 440px;
-  padding: 2.5rem 2rem;
+.settings-banner--info {
+  color: var(--text-dark);
 }
 
-.auth-header {
-  text-align: center;
-  margin-bottom: 2rem;
+.settings-theme-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.85rem;
 }
 
-.auth-title {
-  font-size: 1.75rem;
-  font-weight: 500;
-  margin-bottom: 0.5rem;
+.settings-theme-card {
+  display: grid;
+  gap: 0.8rem;
+  justify-items: start;
+  padding: 1rem;
+  border-radius: 22px;
+  border: 1px solid var(--border-light);
+  background: rgb(var(--theme-surface-overlay-rgb) / 0.08);
+  text-align: left;
+  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
 }
 
-.auth-input-group {
-  margin-bottom: 1rem;
+.settings-theme-card:hover {
+  transform: translateY(-1px);
+  background: rgb(var(--theme-surface-overlay-rgb) / 0.12);
 }
 
-.auth-input {
+.settings-theme-card--active {
+  border-color: color-mix(in srgb, var(--border-light) 65%, var(--text-dark));
+  box-shadow: var(--shadow-sm);
+}
+
+.settings-theme-card__swatch {
   width: 100%;
-  padding: 1rem;
-  background-color: var(--bg-element);
-  border: 1px solid transparent;
-  border-radius: var(--radius-input);
-  font-family: 'Inter Tight', sans-serif;
-  font-size: 0.95rem;
-  color: var(--text-dark);
-  transition: background-color 0.2s, border-color 0.2s;
+  height: 76px;
+  border-radius: 18px;
+  border: 1px solid rgb(var(--theme-surface-overlay-rgb) / 0.08);
 }
 
-.auth-input::placeholder {
-  color: var(--text-muted);
+.settings-theme-card__swatch[data-theme='midnight'] {
+  background:
+    radial-gradient(circle at 30% 25%, rgb(255 255 255 / 0.24), transparent 28%),
+    linear-gradient(135deg, #0a0b0d 0%, #14161a 100%);
 }
 
-.auth-input:focus {
-  background-color: var(--bg-card);
-  border-color: var(--text-dark);
-  outline: none;
+.settings-theme-card__swatch[data-theme='monochrome'] {
+  background:
+    radial-gradient(circle at 30% 25%, rgb(17 17 17 / 0.08), transparent 28%),
+    linear-gradient(135deg, #ffffff 0%, #ececec 100%);
 }
 
-.auth-input--error {
-  border-color: #ef4444;
+.settings-theme-card__swatch[data-theme='slate'] {
+  background:
+    radial-gradient(circle at 30% 25%, rgb(148 163 184 / 0.24), transparent 28%),
+    linear-gradient(135deg, #17202d 0%, #243041 100%);
 }
 
-.auth-btn-full {
-  width: 100%;
-  padding: 1rem;
-  background-color: var(--text-dark);
-  color: var(--text-light);
-  border-radius: var(--radius-input);
-  font-weight: 500;
-  font-size: 1rem;
-  margin-top: 1rem;
-  transition: background-color 0.2s;
+.settings-theme-card__copy {
+  display: grid;
+  gap: 0.25rem;
 }
 
-.auth-btn-full:hover {
-  background-color: #333;
+.settings-theme-card__label {
+  font-size: 0.98rem;
+  font-weight: 650;
 }
 
-.auth-footer {
-  text-align: center;
-  margin-top: 1.5rem;
-  font-size: 0.9rem;
+.settings-theme-card__description {
   color: var(--text-muted);
+  font-size: 0.86rem;
+  line-height: 1.45;
 }
 
-.auth-footer a {
+.settings-theme-card__active {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
   color: var(--text-dark);
-  font-weight: 500;
-  text-decoration: underline;
+  font-size: 0.8rem;
+  font-weight: 700;
 }
 
-.pw-wrap {
-  position: relative;
+.settings-card-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
 }
 
-.pw-wrap .auth-input {
-  padding-right: 3.2rem;
+.settings-provider-list {
+  display: grid;
+  gap: 0.9rem;
 }
 
-.eye-btn {
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-  color: var(--text-muted);
-  padding: 0;
-  line-height: 1;
+.settings-provider-card {
+  padding: 1.1rem;
+  display: grid;
+  gap: 0.95rem;
 }
 
-.field-err {
-  font-size: 0.8rem;
-  color: #ef4444;
-  margin-top: 0.4rem;
-  margin-left: 0.2rem;
+.settings-provider-card--default {
+  border-color: color-mix(in srgb, var(--border-light) 70%, var(--text-dark));
 }
 
-.pw-requirements {
-  margin-top: 0.6rem;
-  font-size: 0.8rem;
+.settings-provider-card__header {
   display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding-left: 0.2rem;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
 }
 
-.req-item {
-  color: var(--text-muted);
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  transition: color 0.2s ease;
+.settings-provider-card__heading {
+  display: grid;
+  gap: 0.35rem;
+  min-width: 0;
 }
 
-.req-item.met {
-  color: #16a34a;
+.settings-provider-card__title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
 }
 
-.req-icon {
-  font-size: 0.85rem;
-  font-weight: 600;
-  display: inline-block;
-  width: 14px;
+.settings-provider-card__title {
+  font-size: 1.04rem;
+  font-weight: 650;
+  letter-spacing: -0.03em;
 }
 
-.auth-alert {
-  padding: 1rem;
-  border-radius: var(--radius-input);
-  margin-bottom: 1.5rem;
+.settings-provider-card__helper,
+.settings-provider-card__hint {
+  color: var(--text-muted);
   font-size: 0.9rem;
-  font-weight: 500;
+  line-height: 1.45;
 }
 
-.auth-alert--err {
-  background-color: #fef2f2;
-  color: #ef4444;
+.settings-default-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  white-space: nowrap;
+  color: var(--text-dark);
+  font-size: 0.86rem;
 }
 
-.auth-alert--ok {
-  background-color: #f0fdf4;
-  color: #16a34a;
+.settings-default-toggle input {
+  accent-color: var(--text-dark);
 }
 
-.otp-input {
-  width: 100%;
-  padding: 1.5rem;
-  font-size: 2rem;
-  letter-spacing: 0.5em;
-  text-align: center;
-  background-color: var(--bg-element);
-  border: 1px solid transparent;
-  border-radius: var(--radius-input);
-  font-family: monospace;
-  margin-bottom: 1.5rem;
+.settings-default-toggle--disabled {
+  color: var(--text-muted);
 }
 
-.otp-input:focus {
-  background-color: var(--bg-card);
-  border-color: var(--text-dark);
-  outline: none;
+.settings-provider-card__stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.75rem;
 }
 
-/* Spinner */
-.spin {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-radius: 50%;
-  border-top-color: #fff;
-  animation: spin 0.8s linear infinite;
-  margin-right: 8px;
-  vertical-align: middle;
+.settings-provider-stat {
+  display: grid;
+  gap: 0.2rem;
+  padding: 0.9rem 1rem;
+  border-radius: 18px;
+  background: rgb(var(--theme-surface-overlay-rgb) / 0.08);
+  border: 1px solid rgb(var(--theme-surface-overlay-rgb) / 0.08);
 }
 
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+.settings-provider-stat__label {
+  color: var(--text-muted);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 700;
 }
 
-/* Shared Brand Icon */
-.brand-icon {
-  width: 26px;
-  height: 26px;
-  border-radius: 50%;
-  background-color: #111;
-  color: #fff;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 13px;
-  font-weight: 600;
-  flex-shrink: 0;
+.settings-provider-stat__value {
+  color: var(--text-dark);
+  font-size: 0.92rem;
+  font-weight: 650;
+  word-break: break-word;
 }
 
-/* ════════════════════════════════════════════════════════════════
-   SETTINGS PAGE
-   ════════════════════════════════════════════════════════════════ */
-.settings-section-title {
-  font-size: 0.85rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-muted);
-  margin-bottom: 0.5rem;
+.settings-provider-form {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  align-items: start;
 }
 
-.settings-divider {
-  height: 1px;
-  background: var(--border-light);
-  margin: 1.5rem 0;
+.settings-provider-form__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
 }
 
-.settings-placeholder {
-  padding: 1.5rem;
-  text-align: center;
-  color: var(--text-muted);
-  font-size: 0.95rem;
-  background: var(--bg-element);
-  border-radius: var(--radius-input);
-}
+@media (max-width: 1180px) {
+  .settings-center-shell {
+    grid-template-columns: minmax(0, 1fr);
+  }
 
-@media (max-width: 640px) {
-  .landing-nav {
-    padding: 1.5rem;
+  .settings-center-rail {
+    position: static;
   }
 
-  .landing-links {
-    display: none;
+  .settings-theme-grid {
+    grid-template-columns: minmax(0, 1fr);
   }
 
-  .app-topbar {
-    padding: 1.25rem 1.5rem;
+  .settings-card-grid,
+  .settings-grid--two,
+  .settings-provider-card__stats {
+    grid-template-columns: minmax(0, 1fr);
   }
 
-  .dashboard-main {
-    padding: 1rem 1.5rem 4rem;
+  .settings-center-hero,
+  .settings-center-section__header,
+  .settings-provider-card__header {
+    flex-direction: column;
   }
 
-  .dashboard-main--canvas {
-    padding: 1rem 0 4rem;
+  .settings-center-hero__chips,
+  .settings-center-section__chips {
+    justify-content: flex-start;
   }
 
-  .mobile-drawer {
-    top: 74px;
+  .settings-provider-form {
+    grid-template-columns: minmax(0, 1fr);
   }
 
-  .mobile-drawer-backdrop {
-    top: 74px;
+  .settings-provider-form__actions {
+    justify-content: flex-start;
   }
+}
 
-  .mobile-drawer .canvas-sidebar-panel {
-    min-height: calc(100vh - 74px);
+@media (max-width: 720px) {
+  .settings-center-page {
+    padding: 0.75rem;
   }
 
-  .auth-card-wrapper {
+  .settings-center-rail,
+  .settings-center-hero,
+  .settings-center-section {
+    border-radius: 22px;
     padding: 1rem;
   }
 
-  .auth-card {
-    padding: 2rem 1.5rem;
+  .settings-center-metrics {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .settings-card__footer,
+  .settings-card__actions,
+  .settings-stack {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .settings-button {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .settings-toggle-row {
+    align-items: flex-start;
+  }
+
+  .settings-toggle-row__control {
+    margin-top: 0.2rem;
   }
 }
diff --git a/frontend/src/jspdf.d.ts b/frontend/src/jspdf.d.ts
new file mode 100644
index 0000000..d78a54c
--- /dev/null
+++ b/frontend/src/jspdf.d.ts
@@ -0,0 +1,34 @@
+declare module 'jspdf' {
+    export class jsPDF {
+        constructor(options?: {
+            unit?: string
+            format?: string | [number, number]
+            orientation?: 'portrait' | 'landscape'
+        })
+        addPage(): void
+        setPage(pageNumber: number): void
+        getNumberOfPages(): number
+        setFont(fontName: string, fontStyle?: string): void
+        setFontSize(size: number): void
+        setTextColor(color: string): void
+        setFillColor(color: string): void
+        setDrawColor(color: string): void
+        setLineWidth(width: number): void
+        text(text: string, x: number, y: number, options?: { align?: 'left' | 'center' | 'right' }): void
+        splitTextToSize(text: string, maxWidth: number): string[]
+        getTextWidth(text: string): number
+        rect(x: number, y: number, width: number, height: number, style?: 'F' | 'S' | 'FD' | 'DF'): void
+        roundedRect(x: number, y: number, width: number, height: number, rx: number, ry: number, style?: 'F' | 'S' | 'FD' | 'DF'): void
+        line(x1: number, y1: number, x2: number, y2: number): void
+        addImage(dataUrl: string, format: 'PNG' | 'JPEG', x: number, y: number, width: number, height: number): void
+        save(fileName: string): void
+        addFileToVFS(fileName: string, data: string): void
+        addFont(fileName: string, fontName: string, fontStyle: string): void
+        internal: {
+            pageSize: {
+                getWidth(): number
+                getHeight(): number
+            }
+        }
+    }
+}
diff --git a/frontend/src/lib/modelCatalog.test.ts b/frontend/src/lib/modelCatalog.test.ts
new file mode 100644
index 0000000..0f5f1e9
--- /dev/null
+++ b/frontend/src/lib/modelCatalog.test.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest'
+import {
+    buildCanvasModelOptions,
+    DEFAULT_CANVAS_MODEL_SELECTION,
+    getCurrentModelOption,
+    getCuratedCanvasModelOptions,
+    inferProviderFromModel,
+} from './modelCatalog'
+
+describe('modelCatalog', () => {
+    it('keeps the curated canvas defaults aligned with current provider families', () => {
+        const curated = getCuratedCanvasModelOptions()
+
+        expect(curated.map(option => option.modelId)).toEqual(
+            expect.arrayContaining([
+                'gpt-5.2',
+                'claude-sonnet-4-20250514',
+                'gemini-2.5-flash',
+                'gemini-3.1-flash-lite-preview',
+            ]),
+        )
+        expect(DEFAULT_CANVAS_MODEL_SELECTION).toEqual({
+            provider: 'gemini',
+            model: 'gemini-3.1-flash-lite-preview',
+        })
+    })
+
+    it('maps live provider models into menu options with provider labels intact', () => {
+        const liveOptions = buildCanvasModelOptions(
+            {
+                openai: [
+                    { id: 'gpt-5.2', displayName: 'GPT-5.2' },
+                    { id: 'gpt-5.1', displayName: 'GPT-5.1' },
+                ],
+                claude: [
+                    { id: 'claude-sonnet-4-20250514', displayName: 'Claude Sonnet 4' },
+                ],
+                lmstudio: [
+                    { id: 'local-model', displayName: 'Local Model' },
+                ],
+            },
+            ['openai', 'claude', 'lmstudio'],
+            false,
+        )
+
+        expect(liveOptions).toEqual([
+            expect.objectContaining({ provider: 'openai', modelId: 'gpt-5.2', label: 'GPT-5.2' }),
+            expect.objectContaining({ provider: 'openai', modelId: 'gpt-5.1', label: 'GPT-5.1' }),
+            expect.objectContaining({ provider: 'claude', modelId: 'claude-sonnet-4-20250514', label: 'Claude Sonnet 4' }),
+            expect.objectContaining({ provider: 'lmstudio', modelId: 'local-model', label: 'Local Model' }),
+        ])
+    })
+
+    it('keeps selected models stable even when the saved model is legacy', () => {
+        const current = getCurrentModelOption('openai', 'gpt-4o', [])
+
+        expect(current.provider).toBe('openai')
+        expect(current.modelId).toBe('gpt-4o')
+        expect(inferProviderFromModel('claude-sonnet-4-20250514')).toBe('claude')
+        expect(inferProviderFromModel('local-model')).toBe('lmstudio')
+    })
+})
diff --git a/frontend/src/lib/modelCatalog.ts b/frontend/src/lib/modelCatalog.ts
new file mode 100644
index 0000000..5e25a8f
--- /dev/null
+++ b/frontend/src/lib/modelCatalog.ts
@@ -0,0 +1,196 @@
+import type { CanvasModelOption, LlmProviderId } from '@/types'
+
+export const PROVIDER_ORDER: LlmProviderId[] = ['openai', 'claude', 'gemini', 'lmstudio']
+export const PROVIDER_LABELS: Record<LlmProviderId, string> = {
+    openai: 'OpenAI',
+    claude: 'Claude',
+    gemini: 'Gemini',
+    lmstudio: 'LM Studio',
+}
+
+export const DEFAULT_CANVAS_MODEL_SELECTION = {
+    provider: 'gemini' as LlmProviderId,
+    model: 'gemini-3.1-flash-lite-preview',
+}
+
+const CURATED_MODEL_OPTIONS: Record<LlmProviderId, CanvasModelOption[]> = {
+    openai: [
+        {
+            provider: 'openai',
+            modelId: 'gpt-5.2',
+            label: 'GPT-5.2',
+            hint: 'Flagship reasoning and agentic work',
+            badge: 'OPENAI',
+        },
+        {
+            provider: 'openai',
+            modelId: 'gpt-5.1',
+            label: 'GPT-5.1',
+            hint: 'Balanced flagship performance',
+            badge: 'OPENAI',
+        },
+        {
+            provider: 'openai',
+            modelId: 'gpt-4.1-mini',
+            label: 'GPT-4.1 Mini',
+            hint: 'Fast and efficient for lighter tasks',
+            badge: 'OPENAI',
+            isBasic: true,
+        },
+    ],
+    claude: [
+        {
+            provider: 'claude',
+            modelId: 'claude-opus-4-1-20250805',
+            label: 'Claude Opus 4.1',
+            hint: 'Deep reasoning and complex tasks',
+            badge: 'CLAUDE',
+        },
+        {
+            provider: 'claude',
+            modelId: 'claude-sonnet-4-20250514',
+            label: 'Claude Sonnet 4',
+            hint: 'Strong general-purpose reasoning',
+            badge: 'CLAUDE',
+        },
+        {
+            provider: 'claude',
+            modelId: 'claude-3-5-haiku-20241022',
+            label: 'Claude 3.5 Haiku',
+            hint: 'Lean, responsive, and efficient',
+            badge: 'CLAUDE',
+            isBasic: true,
+        },
+    ],
+    gemini: [
+        {
+            provider: 'gemini',
+            modelId: 'gemini-2.5-pro',
+            label: 'Gemini 2.5 Pro',
+            hint: 'Complex multimodal reasoning',
+            badge: 'GEMINI',
+        },
+        {
+            provider: 'gemini',
+            modelId: 'gemini-2.5-flash',
+            label: 'Gemini 2.5 Flash',
+            hint: 'Next-gen speed and reasoning',
+            badge: 'GEMINI',
+            isBasic: true,
+        },
+        {
+            provider: 'gemini',
+            modelId: 'gemini-3.1-flash-lite-preview',
+            label: 'Gemini 3.1 Flash-Lite Preview',
+            hint: 'Low-latency and lightweight',
+            badge: 'GEMINI',
+            isBasic: true,
+        },
+    ],
+    lmstudio: [],
+}
+
+export function humanizeModelId(modelId: string): string {
+    return modelId
+        .replaceAll(/[-_]+/g, ' ')
+        .replaceAll(/\b(gpt|claude|gemini)\b/gi, match => match.toUpperCase())
+        .replaceAll(/\bmini\b/gi, 'Mini')
+        .replaceAll(/\bpro\b/gi, 'Pro')
+        .replaceAll(/\bflash\b/gi, 'Flash')
+        .replaceAll(/\bopus\b/gi, 'Opus')
+        .replaceAll(/\bsonnet\b/gi, 'Sonnet')
+        .replaceAll(/\bhaiku\b/gi, 'Haiku')
+        .replaceAll(/\blite\b/gi, 'Lite')
+        .trim()
+}
+
+export function inferProviderFromModel(model: string): LlmProviderId {
+    const normalized = model.trim().toLowerCase()
+
+    if (normalized === 'local-model' || normalized.startsWith('lmstudio'))
+        return 'lmstudio'
+
+    if (normalized.startsWith('claude') || normalized.includes('claude'))
+        return 'claude'
+
+    if (
+        normalized.startsWith('gpt')
+        || normalized.startsWith('o1')
+        || normalized.startsWith('o3')
+        || normalized.includes('gpt-')
+    )
+        return 'openai'
+
+    return 'gemini'
+}
+
+export function defaultModelForProvider(provider: LlmProviderId): string {
+    switch (provider) {
+        case 'openai':
+            return 'gpt-5.2'
+        case 'claude':
+            return 'claude-sonnet-4-20250514'
+        case 'gemini':
+            return DEFAULT_CANVAS_MODEL_SELECTION.model
+        case 'lmstudio':
+            return 'local-model'
+    }
+}
+
+function buildFallbackOption(provider: LlmProviderId, modelId: string): CanvasModelOption {
+    const inferredProvider = inferProviderFromModel(modelId)
+    const providerId = inferredProvider === provider ? provider : inferredProvider
+    const label = humanizeModelId(modelId)
+
+    return {
+        provider: providerId,
+        modelId,
+        label,
+        hint: 'Saved selection',
+        badge: providerId.toUpperCase(),
+    }
+}
+
+function mapLiveModelOption(provider: LlmProviderId, modelId: string, displayName?: string | null): CanvasModelOption {
+    return {
+        provider,
+        modelId,
+        label: displayName?.trim() || humanizeModelId(modelId),
+        hint: 'Available in your saved provider key',
+        badge: provider.toUpperCase(),
+    }
+}
+
+export function buildCanvasModelOptions(
+    providerModelsByProvider: Partial<Record<LlmProviderId, Array<{ id: string; displayName: string | null }>>>,
+    availableProviders: LlmProviderId[] = PROVIDER_ORDER,
+    useCuratedFallback = false,
+): CanvasModelOption[] {
+    const providers = availableProviders.length > 0 ? availableProviders : PROVIDER_ORDER
+
+    return providers.flatMap(provider => {
+        const liveModels = providerModelsByProvider[provider]
+        if (liveModels && liveModels.length > 0) {
+            return liveModels.map(model => mapLiveModelOption(provider, model.id, model.displayName))
+        }
+
+        return useCuratedFallback ? CURATED_MODEL_OPTIONS[provider] : []
+    })
+}
+
+export function getCurrentModelOption(
+    preferredProvider: LlmProviderId | null,
+    preferredModel: string | null,
+    modelOptions: CanvasModelOption[],
+): CanvasModelOption {
+    const modelId = preferredModel ?? defaultModelForProvider(preferredProvider ?? DEFAULT_CANVAS_MODEL_SELECTION.provider)
+    const provider = preferredProvider ?? inferProviderFromModel(modelId)
+
+    return modelOptions.find(option => option.provider === provider && option.modelId === modelId)
+        ?? modelOptions.find(option => option.modelId === modelId)
+        ?? buildFallbackOption(provider, modelId)
+}
+
+export function getCuratedCanvasModelOptions(): CanvasModelOption[] {
+    return PROVIDER_ORDER.flatMap(provider => CURATED_MODEL_OPTIONS[provider])
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index b95c61d..d387168 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -9,19 +9,30 @@ import { AuthProvider } from './context/AuthContext'
 import { Toaster } from 'react-hot-toast'
 import AxiosInterceptorSetup from './components/AxiosInterceptorSetup'
 import { GoogleOAuthProvider } from '@react-oauth/google'
+import { AppThemeProvider, readStoredTheme } from './context/AppThemeContext'
 
 const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID || 'UNSET_GOOGLE_CLIENT_ID'
 
+if (typeof document !== 'undefined') {
+    const theme = readStoredTheme()
+    document.documentElement.dataset.appTheme = theme
+    document.documentElement.classList.add(`theme-${theme}`)
+    document.body.dataset.appTheme = theme
+    document.body.classList.add(`theme-${theme}`)
+}
+
 createRoot(document.getElementById('root')!).render(
     <StrictMode>
         <BrowserRouter>
             <GoogleOAuthProvider clientId={clientId}>
-                <AuthProvider>
-                    <AxiosInterceptorSetup>
-                        <Toaster position="top-right" />
-                        <App />
-                    </AxiosInterceptorSetup>
-                </AuthProvider>
+                <AppThemeProvider>
+                    <AuthProvider>
+                        <AxiosInterceptorSetup>
+                            <Toaster position="top-right" />
+                            <App />
+                        </AxiosInterceptorSetup>
+                    </AuthProvider>
+                </AppThemeProvider>
             </GoogleOAuthProvider>
         </BrowserRouter>
     </StrictMode>,
diff --git a/frontend/src/pages/ForgotPasswordPage.tsx b/frontend/src/pages/ForgotPasswordPage.tsx
index b1d3276..a8463d9 100644
--- a/frontend/src/pages/ForgotPasswordPage.tsx
+++ b/frontend/src/pages/ForgotPasswordPage.tsx
@@ -1,7 +1,7 @@
 import { useState, FormEvent } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { forgotPassword, getErrorMessage } from '../services/authService'
-import { Navbar } from './LoginPage'
+import AuthNavbar from '../components/auth/AuthNavbar'
 import type { PasswordResetOtpResponse } from '../types'
 
 export default function ForgotPasswordPage() {
@@ -36,7 +36,7 @@ export default function ForgotPasswordPage() {
 
     return (
         <div className="auth-layout">
-            <Navbar />
+            <AuthNavbar />
             <div className="auth-card-wrapper">
                 <div className="auth-card">
                     <div className="auth-header">
diff --git a/frontend/src/pages/HomePage.test.tsx b/frontend/src/pages/HomePage.test.tsx
deleted file mode 100644
index 3c3c774..0000000
--- a/frontend/src/pages/HomePage.test.tsx
+++ /dev/null
@@ -1,1002 +0,0 @@
-import { render, screen, waitFor, within, fireEvent } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import type { ComponentType, ReactNode } from 'react'
-import { MemoryRouter, useLocation } from 'react-router-dom'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import HomePage from './HomePage'
-import * as canvasService from '../services/canvasService'
-import * as canvasGraphService from '../services/canvasGraphService'
-import * as llmService from '../services/llmService'
-import type { CanvasGraphResponse, CanvasSummary, MainNodeChatResponse } from '../types'
-
-vi.mock('../services/canvasService', () => ({
-    getCanvases: vi.fn(),
-    createCanvas: vi.fn(),
-    renameCanvas: vi.fn(),
-    deleteCanvas: vi.fn(),
-    getCanvasError: vi.fn((err: unknown) => {
-        if (err && typeof err === 'object' && 'response' in err) {
-            const resp = (err as { response: { data: { message: string } } }).response
-            return resp?.data || { message: 'Something went wrong. Please try again.' }
-        }
-        return { message: 'Something went wrong. Please try again.' }
-    }),
-}))
-
-vi.mock('../services/llmService', () => ({
-    getMainNodeChat: vi.fn(),
-    sendMainNodeMessage: vi.fn(),
-    getLlmError: vi.fn((err: unknown) => {
-        if (err && typeof err === 'object' && 'response' in err) {
-            const resp = (err as { response: { data: { message: string, code?: string } } }).response
-            return resp?.data || { message: 'Something went wrong. Please try again.' }
-        }
-        return { message: 'Something went wrong. Please try again.' }
-    }),
-}))
-
-vi.mock('../services/canvasGraphService', () => ({
-    getCanvasGraph: vi.fn(),
-    expandCanvasNode: vi.fn(),
-}))
-
-vi.mock('@xyflow/react', async () => {
-    const React = await import('react')
-
-    return {
-        ReactFlowProvider: ({ children }: { children: ReactNode }) => <div data-testid="react-flow-provider">{children}</div>,
-        ReactFlow: ({
-            nodes,
-            nodeTypes,
-            onNodeClick,
-            children,
-        }: {
-            nodes: Array<{ id: string; type?: string; data: unknown }>
-            nodeTypes?: Record<string, ComponentType<{ data: unknown }>>
-            onNodeClick?: (event: unknown, node: { id: string }) => void
-            children?: ReactNode
-        }) => (
-            <div data-testid="react-flow">
-                {nodes.map(node => {
-                    const NodeComponent = nodeTypes?.[node.type ?? '']
-                    return (
-                        <div key={node.id} data-testid={`react-flow-node-${node.id}`} onClick={() => onNodeClick?.({}, { id: node.id })}>
-                            {NodeComponent ? <NodeComponent data={node.data} /> : null}
-                        </div>
-                    )
-                })}
-                {children}
-            </div>
-        ),
-        Background: () => <div data-testid="react-flow-background" />,
-        Controls: () => <div data-testid="react-flow-controls" />,
-        Handle: () => <span data-testid="react-flow-handle" />,
-        Position: { Top: 'top', Bottom: 'bottom' },
-    }
-})
-
-function createCanvasSummary(
-    id: number,
-    title: string,
-    updatedAt: string,
-): CanvasSummary {
-    return {
-        id,
-        title,
-        createdAt: updatedAt,
-        updatedAt,
-    }
-}
-
-function createChatResponse(
-    canvasId: number,
-    overrides: Partial<MainNodeChatResponse> = {},
-): MainNodeChatResponse {
-    return {
-        canvasId,
-        conversationId: 44,
-        defaultProvider: null,
-        availableProviders: [],
-        messages: [],
-        ...overrides,
-    }
-}
-
-function createGraphResponse(
-    canvasId: number,
-    overrides: Partial<CanvasGraphResponse> = {},
-): CanvasGraphResponse {
-    return {
-        canvasId,
-        mode: 'legacy',
-        defaultProvider: null,
-        availableProviders: [],
-        rootNodeId: null,
-        nodes: [],
-        ...overrides,
-    }
-}
-
-function createDeferredPromise<T>() {
-    let resolve!: (value: T) => void
-    let reject!: (reason?: unknown) => void
-
-    const promise = new Promise<T>((innerResolve, innerReject) => {
-        resolve = innerResolve
-        reject = innerReject
-    })
-
-    return { promise, resolve, reject }
-}
-
-function LocationDisplay() {
-    const location = useLocation()
-
-    return (
-        <div data-testid="location-display">
-            {location.pathname}
-            {location.search}
-        </div>
-    )
-}
-
-function renderHomePage(initialEntry = '/home') {
-    return render(
-        <MemoryRouter initialEntries={[initialEntry]}>
-            <HomePage />
-            <LocationDisplay />
-        </MemoryRouter>
-    )
-}
-
-describe('HomePage', () => {
-    beforeEach(() => {
-        vi.clearAllMocks()
-        vi.mocked(canvasGraphService.getCanvasGraph).mockImplementation(async canvasId => createGraphResponse(canvasId))
-    })
-
-    afterEach(() => {
-        vi.useRealTimers()
-    })
-
-    it('HomePage_LoadingCanvases_ShowsPlaceholderWithoutFetchingChat', async () => {
-        const deferred = createDeferredPromise<CanvasSummary[]>()
-        vi.mocked(canvasService.getCanvases).mockReturnValue(deferred.promise)
-
-        renderHomePage()
-
-        const sidebar = screen.getByTestId('desktop-sidebar')
-        expect(within(sidebar).getByText(/loading canvases/i)).toBeInTheDocument()
-        expect(llmService.getMainNodeChat).not.toHaveBeenCalled()
-
-        deferred.resolve([])
-
-        await waitFor(() => {
-            expect(within(sidebar).getByText(/create your first canvas/i)).toBeInTheDocument()
-        })
-    })
-
-    it('HomePage_NoCanvases_ShowsCreateCtaAndClearsStaleCanvasQuery', async () => {
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([])
-
-        renderHomePage('/home?canvasId=99')
-
-        await waitFor(() => {
-            const sidebar = screen.getByTestId('desktop-sidebar')
-            expect(within(sidebar).getByText(/create your first canvas/i)).toBeInTheDocument()
-        })
-
-        const sidebar = screen.getByTestId('desktop-sidebar')
-        expect(within(sidebar).getByRole('button', { name: /create your first canvas/i })).toBeInTheDocument()
-        expect(llmService.getMainNodeChat).not.toHaveBeenCalled()
-        expect(screen.getByTestId('location-display')).toHaveTextContent('/home')
-    })
-
-    it('HomePage_AutoSelectsFirstCanvasAndSyncsCanvasIdQuery', async () => {
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-            createCanvasSummary(8, 'Research canvas', new Date().toISOString()),
-        ])
-        vi.mocked(llmService.getMainNodeChat).mockImplementation(async canvasId => createChatResponse(canvasId))
-
-        renderHomePage()
-
-        await waitFor(() => {
-            expect(llmService.getMainNodeChat).toHaveBeenCalledWith(12)
-        })
-
-        await waitFor(() => {
-            expect(screen.getByTestId('location-display')).toHaveTextContent('/home?canvasId=12')
-        })
-        const sidebar = screen.getByTestId('desktop-sidebar')
-        expect(within(sidebar).getByRole('button', { name: /weekly sync prep\. updated/i })).toHaveAttribute('aria-current', 'true')
-    })
-
-    it('HomePage_ValidCanvasQuery_SelectsRequestedCanvas', async () => {
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-            createCanvasSummary(8, 'Research canvas', new Date().toISOString()),
-        ])
-        vi.mocked(llmService.getMainNodeChat).mockImplementation(async canvasId => createChatResponse(canvasId))
-
-        renderHomePage('/home?canvasId=8')
-
-        await waitFor(() => {
-            expect(llmService.getMainNodeChat).toHaveBeenCalledWith(8)
-        })
-
-        expect(screen.getByTestId('location-display')).toHaveTextContent('/home?canvasId=8')
-        const sidebar = screen.getByTestId('desktop-sidebar')
-        expect(within(sidebar).getByRole('button', { name: /research canvas\. updated/i })).toHaveAttribute('aria-current', 'true')
-    })
-
-    it('HomePage_InvalidCanvasQuery_FallsBackToFirstCanvasAndCleansUrl', async () => {
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-            createCanvasSummary(8, 'Research canvas', new Date().toISOString()),
-        ])
-        vi.mocked(llmService.getMainNodeChat).mockImplementation(async canvasId => createChatResponse(canvasId))
-
-        renderHomePage('/home?canvasId=999')
-
-        await waitFor(() => {
-            expect(llmService.getMainNodeChat).toHaveBeenCalledWith(12)
-        })
-
-        await waitFor(() => {
-            expect(screen.getByTestId('location-display')).toHaveTextContent('/home?canvasId=12')
-        })
-        const sidebar = screen.getByTestId('desktop-sidebar')
-        expect(within(sidebar).getByRole('button', { name: /weekly sync prep\. updated/i })).toHaveAttribute('aria-current', 'true')
-    })
-
-    it('HomePage_LoadingChat_ShowsChatPlaceholderForSelectedCanvas', async () => {
-        const deferredChat = createDeferredPromise<MainNodeChatResponse>()
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-        ])
-        vi.mocked(llmService.getMainNodeChat).mockReturnValue(deferredChat.promise)
-
-        renderHomePage()
-
-        await waitFor(() => {
-            expect(screen.getByText(/loading canvas chat/i)).toBeInTheDocument()
-        })
-
-        deferredChat.resolve(createChatResponse(12))
-
-        await waitFor(() => {
-            expect(screen.getByText(/this canvas is ready/i)).toBeInTheDocument()
-        })
-    })
-
-    it('HomePage_CanvasFetchError_ShowsRecoverableAlertAndRetries', async () => {
-        vi.mocked(canvasService.getCanvases)
-            .mockRejectedValueOnce({ response: { data: { message: 'Canvas list failed.' } } })
-            .mockResolvedValueOnce([
-                createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-            ])
-        vi.mocked(llmService.getMainNodeChat).mockResolvedValue(createChatResponse(12))
-
-        const user = userEvent.setup()
-        renderHomePage()
-
-        await waitFor(() => {
-            expect(screen.getByRole('alert')).toHaveTextContent(/canvas list failed/i)
-        })
-
-        await user.click(screen.getByRole('button', { name: /retry loading canvases/i }))
-
-        await waitFor(() => {
-            expect(llmService.getMainNodeChat).toHaveBeenCalledWith(12)
-        })
-    })
-
-    it('HomePage_ChatLoadError_ShowsRetryAndReloadsSelectedCanvas', async () => {
-        const user = userEvent.setup()
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-        ])
-        vi.mocked(llmService.getMainNodeChat)
-            .mockRejectedValueOnce({ response: { data: { message: 'Chat load failed.' } } })
-            .mockResolvedValueOnce(createChatResponse(12))
-
-        renderHomePage()
-
-        await waitFor(() => {
-            expect(screen.getByRole('alert')).toHaveTextContent(/chat load failed/i)
-        })
-
-        await user.click(screen.getByRole('button', { name: /retry loading chat/i }))
-
-        await waitFor(() => {
-            expect(llmService.getMainNodeChat).toHaveBeenCalledTimes(2)
-        })
-        await waitFor(() => {
-            expect(screen.getByText(/this canvas is ready/i)).toBeInTheDocument()
-        })
-    })
-
-    it('HomePage_DesktopSidebar_CollapsesAndExpands', async () => {
-        const user = userEvent.setup()
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-            createCanvasSummary(8, 'Research canvas', new Date().toISOString()),
-        ])
-        vi.mocked(llmService.getMainNodeChat).mockImplementation(async canvasId => createChatResponse(canvasId))
-
-        renderHomePage()
-
-        const collapseButton = await screen.findByRole('button', { name: /collapse canvas sidebar/i })
-        const sidebar = screen.getByTestId('desktop-sidebar')
-        expect(within(sidebar).getByRole('button', { name: /create a new canvas/i })).toBeInTheDocument()
-
-        await user.click(collapseButton)
-
-        expect(sidebar.className).toMatch(/canvas-sidebar--collapsed/)
-        expect(screen.getByRole('button', { name: /expand canvas sidebar/i })).toBeInTheDocument()
-        expect(within(sidebar).getByRole('button', { name: /create a new canvas/i })).toBeInTheDocument()
-
-        await user.click(screen.getByRole('button', { name: /expand canvas sidebar/i }))
-
-        expect(within(sidebar).getByRole('button', { name: /create a new canvas/i })).toBeInTheDocument()
-    })
-
-    it('HomePage_CreateCanvas_ValidatesCreatesAndUpdatesCanvasQuery', async () => {
-        const user = userEvent.setup()
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([])
-        vi.mocked(canvasService.createCanvas).mockResolvedValue(
-            createCanvasSummary(10, 'Plan launch checklist', new Date().toISOString()),
-        )
-        vi.mocked(llmService.getMainNodeChat).mockResolvedValue(createChatResponse(10))
-
-        renderHomePage()
-
-        await waitFor(() => {
-            const sidebar = screen.getByTestId('desktop-sidebar')
-            expect(within(sidebar).getByRole('button', { name: /create a new canvas/i })).toBeInTheDocument()
-        })
-
-        const sidebar = screen.getByTestId('desktop-sidebar')
-        await user.click(within(sidebar).getByRole('button', { name: /create a new canvas/i }))
-        const dialog = await screen.findByRole('dialog', { name: /create canvas/i })
-        await user.click(within(dialog).getByRole('button', { name: /^create canvas$/i }))
-
-        await waitFor(() => {
-            expect(screen.getByText(/add the first prompt to create a canvas/i)).toBeInTheDocument()
-        })
-
-        await user.type(screen.getByPlaceholderText(/describe what this canvas should help you with/i), 'Plan launch checklist')
-        await user.click(within(dialog).getByRole('button', { name: /^create canvas$/i }))
-
-        await waitFor(() => {
-            expect(canvasService.createCanvas).toHaveBeenCalledWith('Plan launch checklist')
-        })
-        await waitFor(() => {
-            expect(llmService.getMainNodeChat).toHaveBeenCalledWith(10)
-        })
-
-        expect(screen.getAllByText('Plan launch checklist').length).toBeGreaterThan(0)
-        await waitFor(() => {
-            expect(screen.getByTestId('location-display')).toHaveTextContent('/home?canvasId=10')
-        })
-    })
-
-    it('HomePage_MobileDrawer_OpensSelectsCanvasAndCloses', async () => {
-        const user = userEvent.setup()
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-            createCanvasSummary(8, 'Research canvas', new Date().toISOString()),
-        ])
-        vi.mocked(llmService.getMainNodeChat).mockImplementation(async canvasId => createChatResponse(canvasId))
-
-        renderHomePage()
-
-        await waitFor(() => {
-            expect(llmService.getMainNodeChat).toHaveBeenCalledWith(12)
-        })
-
-        await user.click(screen.getByRole('button', { name: /open canvas sidebar/i }))
-
-        const drawer = await screen.findByRole('dialog', { name: /canvas sidebar/i })
-        await user.click(within(drawer).getByRole('button', { name: /research canvas\. updated/i }))
-
-        await waitFor(() => {
-            expect(screen.queryByRole('dialog', { name: /canvas sidebar/i })).not.toBeInTheDocument()
-        })
-        await waitFor(() => {
-            expect(screen.getByTestId('location-display')).toHaveTextContent('/home?canvasId=8')
-        })
-    })
-
-    it('HomePage_SelectedCanvas_SendMessage_UsesCanvasIdAndKeepsSelectionAfterRefresh', async () => {
-        const user = userEvent.setup()
-        vi.mocked(canvasService.getCanvases)
-            .mockResolvedValueOnce([
-                createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-                createCanvasSummary(8, 'Research canvas', new Date().toISOString()),
-            ])
-            .mockResolvedValueOnce([
-                createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-                createCanvasSummary(8, 'Research canvas', new Date().toISOString()),
-            ])
-        vi.mocked(llmService.getMainNodeChat).mockResolvedValue(createChatResponse(12, {
-            defaultProvider: 'openai',
-            availableProviders: ['openai', 'gemini'],
-        }))
-        vi.mocked(llmService.sendMainNodeMessage).mockResolvedValue(createChatResponse(12, {
-            defaultProvider: 'openai',
-            availableProviders: ['openai', 'gemini'],
-            messages: [
-                {
-                    id: 1,
-                    role: 'user',
-                    content: 'Summarize blockers',
-                    provider: null,
-                    model: null,
-                    createdAt: new Date().toISOString(),
-                },
-                {
-                    id: 2,
-                    role: 'assistant',
-                    content: 'Here are the blockers',
-                    provider: 'gemini',
-                    model: 'gemini-1.5-flash',
-                    createdAt: new Date().toISOString(),
-                },
-            ],
-        }))
-
-        renderHomePage()
-
-        await waitFor(() => {
-            expect(screen.getByRole('button', { name: /send message/i })).toBeInTheDocument()
-        })
-
-        await user.selectOptions(screen.getByLabelText(/provider override/i), 'gemini')
-        await user.type(screen.getByPlaceholderText(/type your message here/i), 'Summarize blockers')
-        await user.click(screen.getByRole('button', { name: /send message/i }))
-
-        await waitFor(() => {
-            expect(llmService.sendMainNodeMessage).toHaveBeenCalledWith(12, 'Summarize blockers', 'gemini')
-        })
-
-        expect(screen.getByText('Here are the blockers')).toBeInTheDocument()
-        expect(screen.getAllByText('Gemini').length).toBeGreaterThan(0)
-        const sidebar = screen.getByTestId('desktop-sidebar')
-        expect(within(sidebar).getByRole('button', { name: /weekly sync prep\. updated/i })).toHaveAttribute('aria-current', 'true')
-        await waitFor(() => {
-            expect(screen.getByTestId('location-display')).toHaveTextContent('/home?canvasId=12')
-        })
-    })
-
-    it('HomePage_GraphCanvas_ShowsMainNodeComposerInsideCanvas', async () => {
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(12, 'Graph canvas', new Date().toISOString()),
-        ])
-        vi.mocked(canvasGraphService.getCanvasGraph).mockResolvedValue(createGraphResponse(12, {
-            mode: 'graph',
-            defaultProvider: 'openai',
-            availableProviders: ['openai'],
-            rootNodeId: 91,
-            nodes: [
-                {
-                    id: 91,
-                    parentNodeId: null,
-                    kind: 'main',
-                    title: 'Main Node',
-                    content: '',
-                    sourcePrompt: null,
-                    depth: 0,
-                    siblingOrder: 0,
-                    createdAt: new Date().toISOString(),
-                    updatedAt: new Date().toISOString(),
-                },
-            ],
-        }))
-
-        renderHomePage()
-
-        await waitFor(() => {
-            expect(screen.getByTestId('react-flow')).toBeInTheDocument()
-        })
-
-        expect(screen.getByPlaceholderText(/ask the main node to break this topic down/i)).toBeInTheDocument()
-        expect(screen.queryByPlaceholderText(/type your message here/i)).not.toBeInTheDocument()
-    })
-
-    it('HomePage_GraphCanvas_FirstPrompt_ExpandsRootNodeIntoChildren', async () => {
-        const user = userEvent.setup()
-        vi.mocked(canvasService.getCanvases)
-            .mockResolvedValueOnce([
-                createCanvasSummary(12, 'Graph canvas', new Date().toISOString()),
-            ])
-            .mockResolvedValueOnce([
-                createCanvasSummary(12, 'Graph canvas', new Date().toISOString()),
-            ])
-        vi.mocked(canvasGraphService.getCanvasGraph).mockResolvedValue(createGraphResponse(12, {
-            mode: 'graph',
-            defaultProvider: 'openai',
-            availableProviders: ['openai'],
-            rootNodeId: 91,
-            nodes: [
-                {
-                    id: 91,
-                    parentNodeId: null,
-                    kind: 'main',
-                    title: 'Main Node',
-                    content: '',
-                    sourcePrompt: null,
-                    depth: 0,
-                    siblingOrder: 0,
-                    createdAt: new Date().toISOString(),
-                    updatedAt: new Date().toISOString(),
-                },
-            ],
-        }))
-        vi.mocked(canvasGraphService.expandCanvasNode).mockResolvedValue(createGraphResponse(12, {
-            mode: 'graph',
-            defaultProvider: 'openai',
-            availableProviders: ['openai'],
-            rootNodeId: 91,
-            nodes: [
-                {
-                    id: 91,
-                    parentNodeId: null,
-                    kind: 'main',
-                    title: 'Main Node',
-                    content: '',
-                    sourcePrompt: null,
-                    depth: 0,
-                    siblingOrder: 0,
-                    createdAt: new Date().toISOString(),
-                    updatedAt: new Date().toISOString(),
-                },
-                {
-                    id: 92,
-                    parentNodeId: 91,
-                    kind: 'response',
-                    title: 'First branch',
-                    content: 'First child content',
-                    sourcePrompt: 'Break it down',
-                    depth: 1,
-                    siblingOrder: 0,
-                    createdAt: new Date().toISOString(),
-                    updatedAt: new Date().toISOString(),
-                },
-                {
-                    id: 93,
-                    parentNodeId: 91,
-                    kind: 'response',
-                    title: 'Second branch',
-                    content: 'Second child content',
-                    sourcePrompt: 'Break it down',
-                    depth: 1,
-                    siblingOrder: 1,
-                    createdAt: new Date().toISOString(),
-                    updatedAt: new Date().toISOString(),
-                },
-            ],
-        }))
-
-        renderHomePage()
-
-        await user.type(await screen.findByPlaceholderText(/ask the main node to break this topic down/i), 'Break it down')
-        await user.click(screen.getByRole('button', { name: /generate branches/i }))
-
-        await waitFor(() => {
-            expect(canvasGraphService.expandCanvasNode).toHaveBeenCalledWith(12, 91, 'Break it down', undefined)
-        })
-        expect(screen.getByText('First child content')).toBeInTheDocument()
-        expect(screen.getByText('Second child content')).toBeInTheDocument()
-    })
-
-    it('HomePage_GraphCanvas_SelectingNode_MovesInlineComposerToThatNode', async () => {
-        const user = userEvent.setup()
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(12, 'Graph canvas', new Date().toISOString()),
-        ])
-        vi.mocked(canvasGraphService.getCanvasGraph).mockResolvedValue(createGraphResponse(12, {
-            mode: 'graph',
-            defaultProvider: 'openai',
-            availableProviders: ['openai'],
-            rootNodeId: 91,
-            nodes: [
-                {
-                    id: 91,
-                    parentNodeId: null,
-                    kind: 'main',
-                    title: 'Main Node',
-                    content: '',
-                    sourcePrompt: null,
-                    depth: 0,
-                    siblingOrder: 0,
-                    createdAt: new Date().toISOString(),
-                    updatedAt: new Date().toISOString(),
-                },
-                {
-                    id: 92,
-                    parentNodeId: 91,
-                    kind: 'response',
-                    title: 'First branch',
-                    content: 'First child content',
-                    sourcePrompt: 'Break it down',
-                    depth: 1,
-                    siblingOrder: 0,
-                    createdAt: new Date().toISOString(),
-                    updatedAt: new Date().toISOString(),
-                },
-            ],
-        }))
-
-        renderHomePage()
-
-        await waitFor(() => {
-            expect(screen.getByText('First child content')).toBeInTheDocument()
-        })
-
-        expect(screen.queryByPlaceholderText(/ask the main node to break this topic down/i)).not.toBeInTheDocument()
-
-        await user.click(screen.getByTestId('react-flow-node-92'))
-
-        await waitFor(() => {
-            expect(screen.getByPlaceholderText(/ask a follow-up from this branch/i)).toBeInTheDocument()
-        })
-    })
-
-    it('HomePage_SendMessageFailure_PreservesDraftAndSupportsExplicitRetry', async () => {
-        const user = userEvent.setup()
-        vi.mocked(canvasService.getCanvases)
-            .mockResolvedValueOnce([
-                createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-            ])
-            .mockResolvedValueOnce([
-                createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-            ])
-        vi.mocked(llmService.getMainNodeChat).mockResolvedValue(createChatResponse(12, {
-            defaultProvider: 'openai',
-            availableProviders: ['openai'],
-        }))
-        vi.mocked(llmService.sendMainNodeMessage)
-            .mockRejectedValueOnce({ response: { data: { message: 'Provider timed out.' } } })
-            .mockResolvedValueOnce(createChatResponse(12, {
-                defaultProvider: 'openai',
-                availableProviders: ['openai'],
-                messages: [
-                    {
-                        id: 1,
-                        role: 'user',
-                        content: 'Summarize blockers',
-                        provider: null,
-                        model: null,
-                        createdAt: new Date().toISOString(),
-                    },
-                    {
-                        id: 2,
-                        role: 'assistant',
-                        content: 'Recovered reply',
-                        provider: 'openai',
-                        model: 'gpt-4.1-mini',
-                        createdAt: new Date().toISOString(),
-                    },
-                ],
-            }))
-
-        renderHomePage()
-
-        await waitFor(() => {
-            expect(screen.getByRole('button', { name: /send message/i })).toBeInTheDocument()
-        })
-
-        const textarea = screen.getByPlaceholderText(/type your message here/i)
-        await user.type(textarea, 'Summarize blockers')
-        await user.click(screen.getByRole('button', { name: /send message/i }))
-
-        await waitFor(() => {
-            expect(screen.getByRole('alert')).toHaveTextContent(/provider timed out/i)
-        })
-        expect(textarea).toHaveValue('Summarize blockers')
-
-        await user.click(screen.getByRole('button', { name: /retry sending message/i }))
-
-        await waitFor(() => {
-            expect(llmService.sendMainNodeMessage).toHaveBeenCalledTimes(2)
-        })
-        await waitFor(() => {
-            expect(screen.getByText('Recovered reply')).toBeInTheDocument()
-        })
-        expect(textarea).toHaveValue('')
-    })
-
-    it('HomePage_RendersRelativeTimestampAndSupportsKeyboardCanvasSelection', async () => {
-        // We use real timers and dynamic offsets to avoid flaky fake timers
-        const now = new Date()
-        const twoHoursAgo = new Date(now.getTime() - 2 * 60 * 60 * 1000).toISOString()
-        const thirtyMinsAgo = new Date(now.getTime() - 30 * 60 * 1000).toISOString()
-
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(12, 'Weekly sync prep', twoHoursAgo),
-            createCanvasSummary(8, 'Research canvas', thirtyMinsAgo),
-        ])
-        vi.mocked(llmService.getMainNodeChat).mockImplementation(async canvasId => createChatResponse(canvasId))
-
-        renderHomePage()
-
-        await waitFor(() => {
-            const sidebar = screen.getByTestId('desktop-sidebar')
-            expect(within(sidebar).getByText(/updated 2 hours ago/i)).toBeInTheDocument()
-        })
-
-        const sidebar = screen.getByTestId('desktop-sidebar')
-        const firstCanvasButton = within(sidebar).getByRole('button', { name: /weekly sync prep\. updated/i })
-        firstCanvasButton.focus()
-        fireEvent.keyDown(firstCanvasButton, { key: 'ArrowDown' })
-
-        await waitFor(() => {
-            const btn = within(sidebar).getByRole('button', { name: /research canvas\. updated/i })
-            expect(btn).toHaveAttribute('aria-current', 'true')
-        })
-
-        await waitFor(() => {
-            expect(screen.getByTestId('location-display')).toHaveTextContent(/canvasId=8/)
-        })
-    })
-
-    it('HomePage_NoProviders_ShowsSettingsCtaForSelectedCanvas', async () => {
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(8, 'Research canvas', new Date().toISOString()),
-        ])
-        vi.mocked(llmService.getMainNodeChat).mockResolvedValue(createChatResponse(8, {
-            conversationId: 21,
-            availableProviders: []
-        }))
-
-        renderHomePage()
-
-        await waitFor(() => {
-            expect(screen.getByText(/add a provider api key in settings/i)).toBeInTheDocument()
-        })
-
-        await waitFor(() => {
-            expect(screen.getByRole('button', { name: /go to settings/i })).toBeInTheDocument()
-        })
-    })
-
-    it('HomePage_RenameSelectedCanvas_UpdatesSidebarAndHeader', async () => {
-        const user = userEvent.setup()
-        const updatedAt = new Date().toISOString()
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(12, 'Weekly sync prep', updatedAt),
-            createCanvasSummary(8, 'Research canvas', new Date(Date.now() - 60_000).toISOString()),
-        ])
-        vi.mocked(canvasService.renameCanvas).mockResolvedValue(
-            createCanvasSummary(12, 'Renamed canvas', new Date(Date.now() + 60_000).toISOString()),
-        )
-        vi.mocked(llmService.getMainNodeChat).mockImplementation(async canvasId => createChatResponse(canvasId))
-
-        renderHomePage()
-
-        await waitFor(() => {
-            expect(screen.getByRole('heading', { name: /weekly sync prep/i })).toBeInTheDocument()
-        })
-
-        await user.click(screen.getByRole('button', { name: /rename weekly sync prep/i }))
-        const input = screen.getByLabelText(/rename weekly sync prep/i)
-        await user.clear(input)
-        await user.type(input, 'Renamed canvas')
-        await user.click(screen.getByRole('button', { name: /^save$/i }))
-
-        await waitFor(() => {
-            expect(canvasService.renameCanvas).toHaveBeenCalledWith(12, 'Renamed canvas')
-        })
-        expect(screen.getByRole('heading', { name: /renamed canvas/i })).toBeInTheDocument()
-        const sidebar = screen.getByTestId('desktop-sidebar')
-        expect(within(sidebar).getByRole('button', { name: /renamed canvas\. updated/i })).toHaveAttribute('aria-current', 'true')
-    })
-
-    it('HomePage_RenameNonSelectedCanvas_UpdatesItemAndKeepsSelection', async () => {
-        const user = userEvent.setup()
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-            createCanvasSummary(8, 'Research canvas', new Date(Date.now() - 60_000).toISOString()),
-        ])
-        vi.mocked(canvasService.renameCanvas).mockResolvedValue(
-            createCanvasSummary(8, 'Ideas canvas', new Date(Date.now() + 60_000).toISOString()),
-        )
-        vi.mocked(llmService.getMainNodeChat).mockImplementation(async canvasId => createChatResponse(canvasId))
-
-        renderHomePage()
-
-        await waitFor(() => {
-            expect(screen.getByRole('heading', { name: /weekly sync prep/i })).toBeInTheDocument()
-        })
-
-        await user.click(screen.getByRole('button', { name: /rename research canvas/i }))
-        const input = screen.getByLabelText(/rename research canvas/i)
-        await user.clear(input)
-        await user.type(input, 'Ideas canvas')
-        await user.click(screen.getByRole('button', { name: /^save$/i }))
-
-        await waitFor(() => {
-            expect(canvasService.renameCanvas).toHaveBeenCalledWith(8, 'Ideas canvas')
-        })
-        expect(screen.getByRole('heading', { name: /weekly sync prep/i })).toBeInTheDocument()
-        const sidebar = screen.getByTestId('desktop-sidebar')
-        expect(within(sidebar).getByRole('button', { name: /weekly sync prep\. updated/i })).toHaveAttribute('aria-current', 'true')
-        expect(within(sidebar).getByRole('button', { name: /ideas canvas\. updated/i })).toBeInTheDocument()
-    })
-
-    it('HomePage_RenameCanvas_BlankTitleShowsValidationAndSkipsApi', async () => {
-        const user = userEvent.setup()
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-        ])
-        vi.mocked(llmService.getMainNodeChat).mockResolvedValue(createChatResponse(12))
-
-        renderHomePage()
-
-        await waitFor(() => {
-            expect(screen.getByRole('heading', { name: /weekly sync prep/i })).toBeInTheDocument()
-        })
-
-        await user.click(screen.getByRole('button', { name: /rename weekly sync prep/i }))
-        const input = screen.getByLabelText(/rename weekly sync prep/i)
-        await user.clear(input)
-        await user.click(screen.getByRole('button', { name: /^save$/i }))
-
-        expect(screen.getByText(/add a canvas title before saving/i)).toBeInTheDocument()
-        expect(canvasService.renameCanvas).not.toHaveBeenCalled()
-    })
-
-    it('HomePage_RenameCanvas_ApiFailureShowsErrorAndKeepsEditMode', async () => {
-        const user = userEvent.setup()
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-        ])
-        vi.mocked(canvasService.renameCanvas).mockRejectedValue({ response: { data: { message: 'Rename failed.' } } })
-        vi.mocked(llmService.getMainNodeChat).mockResolvedValue(createChatResponse(12))
-
-        renderHomePage()
-
-        await waitFor(() => {
-            expect(screen.getByRole('heading', { name: /weekly sync prep/i })).toBeInTheDocument()
-        })
-
-        await user.click(screen.getByRole('button', { name: /rename weekly sync prep/i }))
-        const input = screen.getByLabelText(/rename weekly sync prep/i)
-        await user.clear(input)
-        await user.type(input, 'Broken rename')
-        await user.click(screen.getByRole('button', { name: /^save$/i }))
-
-        await waitFor(() => {
-            expect(screen.getByText(/rename failed/i)).toBeInTheDocument()
-        })
-        expect(screen.getByLabelText(/rename weekly sync prep/i)).toBeInTheDocument()
-    })
-
-    it('HomePage_DeleteSelectedCanvas_FallsBackToFirstRemainingCanvas', async () => {
-        const user = userEvent.setup()
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-            createCanvasSummary(8, 'Research canvas', new Date(Date.now() - 60_000).toISOString()),
-        ])
-        vi.mocked(canvasService.deleteCanvas).mockResolvedValue(undefined)
-        vi.mocked(llmService.getMainNodeChat).mockImplementation(async canvasId => createChatResponse(canvasId))
-
-        renderHomePage('/home?canvasId=8')
-
-        await waitFor(() => {
-            expect(screen.getByRole('heading', { name: /research canvas/i })).toBeInTheDocument()
-        })
-
-        await user.click(screen.getByRole('button', { name: /delete research canvas/i }))
-        const dialog = await screen.findByRole('dialog', { name: /delete canvas/i })
-        await user.click(within(dialog).getByRole('button', { name: /delete canvas/i }))
-
-        await waitFor(() => {
-            expect(canvasService.deleteCanvas).toHaveBeenCalledWith(8)
-        })
-        await waitFor(() => {
-            expect(screen.getByRole('heading', { name: /weekly sync prep/i })).toBeInTheDocument()
-        })
-        await waitFor(() => {
-            expect(screen.getByTestId('location-display')).toHaveTextContent('/home?canvasId=12')
-        })
-    })
-
-    it('HomePage_DeleteLastCanvas_ClearsSelectionAndQuery', async () => {
-        const user = userEvent.setup()
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(8, 'Research canvas', new Date().toISOString()),
-        ])
-        vi.mocked(canvasService.deleteCanvas).mockResolvedValue(undefined)
-        vi.mocked(llmService.getMainNodeChat).mockResolvedValue(createChatResponse(8))
-
-        renderHomePage('/home?canvasId=8')
-
-        await waitFor(() => {
-            expect(screen.getByRole('heading', { name: /research canvas/i })).toBeInTheDocument()
-        })
-
-        await user.click(screen.getByRole('button', { name: /delete research canvas/i }))
-        const dialog = await screen.findByRole('dialog', { name: /delete canvas/i })
-        await user.click(within(dialog).getByRole('button', { name: /delete canvas/i }))
-
-        await waitFor(() => {
-            expect(screen.getByText(/select a canvas to view its main-node conversation/i)).toBeInTheDocument()
-        })
-        expect(screen.getByTestId('location-display')).toHaveTextContent('/home')
-    })
-
-    it('HomePage_DeleteNonSelectedCanvas_PreservesSelection', async () => {
-        const user = userEvent.setup()
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-            createCanvasSummary(8, 'Research canvas', new Date(Date.now() - 60_000).toISOString()),
-        ])
-        vi.mocked(canvasService.deleteCanvas).mockResolvedValue(undefined)
-        vi.mocked(llmService.getMainNodeChat).mockImplementation(async canvasId => createChatResponse(canvasId))
-
-        renderHomePage('/home?canvasId=12')
-
-        await waitFor(() => {
-            expect(screen.getByRole('heading', { name: /weekly sync prep/i })).toBeInTheDocument()
-        })
-
-        await user.click(screen.getByRole('button', { name: /delete research canvas/i }))
-        const dialog = await screen.findByRole('dialog', { name: /delete canvas/i })
-        await user.click(within(dialog).getByRole('button', { name: /delete canvas/i }))
-
-        await waitFor(() => {
-            expect(canvasService.deleteCanvas).toHaveBeenCalledWith(8)
-        })
-        expect(screen.getByRole('heading', { name: /weekly sync prep/i })).toBeInTheDocument()
-        const sidebar = screen.getByTestId('desktop-sidebar')
-        expect(within(sidebar).queryByRole('button', { name: /research canvas/i })).not.toBeInTheDocument()
-    })
-
-    it('HomePage_DeleteCanvas_ApiFailureShowsErrorAndKeepsDialogOpen', async () => {
-        const user = userEvent.setup()
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-        ])
-        vi.mocked(canvasService.deleteCanvas).mockRejectedValue({ response: { data: { message: 'Delete failed.' } } })
-        vi.mocked(llmService.getMainNodeChat).mockResolvedValue(createChatResponse(12))
-
-        renderHomePage()
-
-        await waitFor(() => {
-            expect(screen.getByRole('heading', { name: /weekly sync prep/i })).toBeInTheDocument()
-        })
-
-        await user.click(screen.getByRole('button', { name: /delete weekly sync prep/i }))
-        const dialog = await screen.findByRole('dialog', { name: /delete canvas/i })
-        await user.click(within(dialog).getByRole('button', { name: /delete canvas/i }))
-
-        await waitFor(() => {
-            expect(screen.getByText(/delete failed/i)).toBeInTheDocument()
-        })
-        expect(screen.getByRole('dialog', { name: /delete canvas/i })).toBeInTheDocument()
-    })
-
-    it('HomePage_RenameCanvas_EscapeCancelsEditMode', async () => {
-        const user = userEvent.setup()
-        vi.mocked(canvasService.getCanvases).mockResolvedValue([
-            createCanvasSummary(12, 'Weekly sync prep', new Date().toISOString()),
-        ])
-        vi.mocked(llmService.getMainNodeChat).mockResolvedValue(createChatResponse(12))
-
-        renderHomePage()
-
-        await waitFor(() => {
-            expect(screen.getByRole('heading', { name: /weekly sync prep/i })).toBeInTheDocument()
-        })
-
-        await user.click(screen.getByRole('button', { name: /rename weekly sync prep/i }))
-        const input = screen.getByLabelText(/rename weekly sync prep/i)
-        await user.type(input, '{Escape}')
-
-        expect(screen.queryByDisplayValue(/weekly sync prep/i)).not.toBeInTheDocument()
-        expect(screen.getByRole('button', { name: /rename weekly sync prep/i })).toBeInTheDocument()
-    })
-})
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
deleted file mode 100644
index 337d9f5..0000000
--- a/frontend/src/pages/HomePage.tsx
+++ /dev/null
@@ -1,1263 +0,0 @@
-import { useEffect, useRef, useState, type FormEvent, type KeyboardEvent as ReactKeyboardEvent, type RefObject } from 'react'
-import { useNavigate, useSearchParams } from 'react-router-dom'
-import CanvasGraphView from '../components/canvas/CanvasGraphView'
-import { createCanvas, deleteCanvas, getCanvasError, getCanvases, renameCanvas } from '../services/canvasService'
-import { expandCanvasNode, getCanvasGraph } from '../services/canvasGraphService'
-import { getLlmError, getMainNodeChat, sendMainNodeMessage } from '../services/llmService'
-import type { CanvasGraphResponse, CanvasSummary, LlmProviderId, MainNodeChatResponse } from '../types'
-
-const MOBILE_SIDEBAR_BREAKPOINT = 900
-
-function getProviderLabel(provider: LlmProviderId): string {
-    switch (provider) {
-        case 'openai': return 'OpenAI'
-        case 'claude': return 'Claude'
-        case 'gemini': return 'Gemini'
-    }
-
-    return provider
-}
-
-function parseCanvasId(rawValue: string | null): number | null {
-    if (!rawValue) return null
-
-    const parsed = Number(rawValue)
-    return Number.isInteger(parsed) && parsed > 0 ? parsed : null
-}
-
-function formatExactTimestamp(updatedAt: string): string {
-    return new Date(updatedAt).toLocaleString()
-}
-
-function formatRelativeTimestamp(updatedAt: string): string {
-    const now = Date.now()
-    const target = new Date(updatedAt).getTime()
-    const diffMs = target - now
-    const absMs = Math.abs(diffMs)
-    const minute = 60_000
-    const hour = 60 * minute
-    const day = 24 * hour
-    const week = 7 * day
-    const month = 30 * day
-    const year = 365 * day
-    const formatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
-
-    if (absMs < minute)
-        return 'just now'
-
-    if (absMs < hour)
-        return formatter.format(Math.round(diffMs / minute), 'minute')
-
-    if (absMs < day)
-        return formatter.format(Math.round(diffMs / hour), 'hour')
-
-    if (absMs < week)
-        return formatter.format(Math.round(diffMs / day), 'day')
-
-    if (absMs < month)
-        return formatter.format(Math.round(diffMs / week), 'week')
-
-    if (absMs < year)
-        return formatter.format(Math.round(diffMs / month), 'month')
-
-    return formatter.format(Math.round(diffMs / year), 'year')
-}
-
-function isMobileViewport(): boolean {
-    return typeof window !== 'undefined' && window.innerWidth <= MOBILE_SIDEBAR_BREAKPOINT
-}
-
-const visuallyHiddenStyle = {
-    position: 'absolute',
-    width: '1px',
-    height: '1px',
-    padding: 0,
-    margin: '-1px',
-    overflow: 'hidden',
-    clip: 'rect(0, 0, 0, 0)',
-    whiteSpace: 'nowrap',
-    border: 0,
-} as const
-
-interface SidebarContentProps {
-    canvases: CanvasSummary[]
-    loadingCanvases: boolean
-    selectedCanvasId: number | null
-    canvasButtonRefs: RefObject<Array<HTMLButtonElement | null>>
-    editingCanvasId: number | null
-    renamingCanvas: boolean
-    renameTitle: string
-    renameError: string
-    isCollapsed?: boolean
-    onSelect?: () => void
-    openCreateModal: () => void
-    setCanvasSelection: (id: number | null) => void
-    handleCanvasListKeyDown: (event: ReactKeyboardEvent<HTMLButtonElement>, index: number) => void
-    handleRenameInputChange: (value: string) => void
-    handleRenameSubmit: (canvasId: number) => void
-    handleRenameKeyDown: (event: ReactKeyboardEvent<HTMLInputElement>) => void
-    startRenameCanvas: (canvas: CanvasSummary) => void
-    cancelRenameCanvas: () => void
-    openDeleteModal: (canvas: CanvasSummary) => void
-}
-
-function SidebarContent({
-    canvases,
-    loadingCanvases,
-    selectedCanvasId,
-    canvasButtonRefs,
-    editingCanvasId,
-    renamingCanvas,
-    renameTitle,
-    renameError,
-    isCollapsed = false,
-    onSelect = () => {},
-    openCreateModal,
-    setCanvasSelection,
-    handleCanvasListKeyDown,
-    handleRenameInputChange,
-    handleRenameSubmit,
-    handleRenameKeyDown,
-    startRenameCanvas,
-    cancelRenameCanvas,
-    openDeleteModal
-}: SidebarContentProps) {
-    return (
-        <div className={`canvas-sidebar-panel ${isCollapsed ? 'canvas-sidebar-panel--collapsed' : ''}`}>
-            <div className="canvas-sidebar-header">
-                {isCollapsed ? (
-                    <div className="canvas-sidebar-brand canvas-sidebar-brand--actions">
-                        <button
-                            type="button"
-                            className="canvas-sidebar-icon-button"
-                            onClick={openCreateModal}
-                            aria-label="Create a new canvas"
-                            title="New canvas"
-                        >
-                            +
-                        </button>
-                    </div>
-                ) : (
-                    <div className="canvas-sidebar-topbar">
-                        <div className="canvas-sidebar-title-group">
-                            <h3 className="canvas-sidebar-section-title">Canvases</h3>
-                            <span className="canvas-sidebar-subtitle">Switch between your active workspaces</span>
-                        </div>
-                        <div className="canvas-sidebar-header-actions">
-                            <span className="canvas-sidebar-count" aria-label={`${canvases.length} canvases`}>
-                                {canvases.length}
-                            </span>
-                            <button
-                                type="button"
-                                className="canvas-sidebar-icon-button"
-                                onClick={openCreateModal}
-                                aria-label="Create a new canvas"
-                                title="New canvas"
-                            >
-                                +
-                            </button>
-                        </div>
-                    </div>
-                )}
-                {!isCollapsed && <div className="canvas-sidebar-divider" aria-hidden="true" />}
-            </div>
-
-            <div className={`canvas-list-scroll${!isCollapsed ? ' canvas-list-scroll--expanded' : ''}`}>
-            {loadingCanvases ? (
-                <div className={`settings-placeholder${!isCollapsed ? ' canvas-sidebar-placeholder' : ''}`} style={{ textAlign: 'left' }} role="status" aria-live="polite">
-                    {!isCollapsed ? 'Loading canvases…' : '…'}
-                </div>
-            ) : canvases.length === 0 ? (
-                <div className={`canvas-sidebar-empty${isCollapsed ? ' canvas-sidebar-empty--collapsed' : ''}`}>
-                    {!isCollapsed ? (
-                        <>
-                            <div className="settings-placeholder canvas-sidebar-placeholder" style={{ textAlign: 'left' }} role="status" aria-live="polite">
-                                Create your first canvas to start a new main-node conversation.
-                            </div>
-                            <button
-                                type="button"
-                                className="canvas-sidebar-primary-action"
-                                onClick={openCreateModal}
-                                aria-label="Create your first canvas"
-                            >
-                                New canvas
-                            </button>
-                        </>
-                    ) : (
-                        <button
-                            type="button"
-                            className="canvas-sidebar-icon-button"
-                            onClick={openCreateModal}
-                            aria-label="Create your first canvas"
-                            title="Create first canvas"
-                        >
-                            +
-                        </button>
-                    )}
-                </div>
-            ) : (
-                <nav aria-label="Canvas navigation">
-                    <ul className={`canvas-sidebar-list${isCollapsed ? ' canvas-sidebar-list--collapsed' : ''}`}>
-                    {canvases.map((canvas, index) => {
-                        const isSelected = canvas.id === selectedCanvasId
-                        const isEditing = canvas.id === editingCanvasId
-                        const relativeUpdatedAt = formatRelativeTimestamp(canvas.updatedAt)
-                        const exactUpdatedAt = formatExactTimestamp(canvas.updatedAt)
-                        return (
-                            <li key={canvas.id}>
-                                {isEditing && !isCollapsed ? (
-                                    <form
-                                        onSubmit={event => {
-                                            event.preventDefault()
-                                            handleRenameSubmit(canvas.id)
-                                        }}
-                                        style={{ display: 'grid', gap: '0.5rem' }}
-                                    >
-                                        <label htmlFor={`rename-canvas-${canvas.id}`} style={visuallyHiddenStyle}>
-                                            Rename {canvas.title}
-                                        </label>
-                                        <input
-                                            id={`rename-canvas-${canvas.id}`}
-                                            value={renameTitle}
-                                            onChange={event => handleRenameInputChange(event.target.value)}
-                                            onKeyDown={handleRenameKeyDown}
-                                            className="auth-input"
-                                            disabled={renamingCanvas}
-                                            autoFocus
-                                        />
-                                        {renameError && (
-                                            <div className="field-err" role="alert">{renameError}</div>
-                                        )}
-                                        <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end', flexWrap: 'wrap' }}>
-                                            <button
-                                                type="button"
-                                                className="btn-pill-outline"
-                                                onClick={cancelRenameCanvas}
-                                                disabled={renamingCanvas}
-                                                style={{ padding: '0.4rem 0.7rem' }}
-                                            >
-                                                Cancel
-                                            </button>
-                                            <button
-                                                type="submit"
-                                                className="btn-pill-dark"
-                                                disabled={renamingCanvas}
-                                                style={{ padding: '0.4rem 0.7rem' }}
-                                            >
-                                                {renamingCanvas ? 'Saving…' : 'Save'}
-                                            </button>
-                                        </div>
-                                    </form>
-                                ) : (
-                                    <div style={{ display: 'grid', gap: '0.5rem' }}>
-                                        <button
-                                            ref={node => {
-                                                if (canvasButtonRefs.current) {
-                                                    canvasButtonRefs.current[index] = node
-                                                }
-                                            }}
-                                            type="button"
-                                            aria-current={isSelected ? 'true' : undefined}
-                                            aria-label={isCollapsed ? canvas.title : `${canvas.title}. Updated ${relativeUpdatedAt}. Exact time ${exactUpdatedAt}.`}
-                                            onClick={() => {
-                                                setCanvasSelection(canvas.id)
-                                                onSelect()
-                                            }}
-                                            onKeyDown={event => handleCanvasListKeyDown(event, index)}
-                                            title={isCollapsed ? canvas.title : `Updated ${exactUpdatedAt}`}
-                                            className={`canvas-sidebar-canvas${isSelected ? ' canvas-sidebar-canvas--selected' : ''} ${isCollapsed ? 'canvas-sidebar-canvas--collapsed' : ''}`}
-                                        >
-                                            {!isCollapsed ? (
-                                                <>
-                                                    <span className="canvas-sidebar-canvas-title">{canvas.title}</span>
-                                                    <span className="canvas-sidebar-canvas-meta">
-                                                        Updated {relativeUpdatedAt}
-                                                    </span>
-                                                </>
-                                            ) : (
-                                                <span className="canvas-sidebar-canvas-initial">{canvas.title[0]}</span>
-                                            )}
-                                        </button>
-                                        {!isCollapsed && (
-                                            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem', flexWrap: 'wrap' }}>
-                                                <button
-                                                    type="button"
-                                                    className="btn-pill-outline"
-                                                    onClick={() => startRenameCanvas(canvas)}
-                                                    style={{ padding: '0.4rem 0.7rem' }}
-                                                    aria-label={`Rename ${canvas.title}`}
-                                                >
-                                                    Rename
-                                                </button>
-                                                <button
-                                                    type="button"
-                                                    className="btn-pill-outline"
-                                                    onClick={() => openDeleteModal(canvas)}
-                                                    style={{ padding: '0.4rem 0.7rem' }}
-                                                    aria-label={`Delete ${canvas.title}`}
-                                                >
-                                                    Delete
-                                                </button>
-                                            </div>
-                                        )}
-                                    </div>
-                                )}
-                            </li>
-                        )
-                    })}
-                    </ul>
-                </nav>
-            )}
-            </div>
-        </div>
-    )
-}
-
-type ChatFailureAction = 'load' | 'send'
-
-export default function HomePage() {
-    const navigate = useNavigate()
-    const [searchParams, setSearchParams] = useSearchParams()
-    const [canvases, setCanvases] = useState<CanvasSummary[]>([])
-    const [selectedCanvasId, setSelectedCanvasId] = useState<number | null>(null)
-    const [chat, setChat] = useState<MainNodeChatResponse | null>(null)
-    const [canvasGraph, setCanvasGraph] = useState<CanvasGraphResponse | null>(null)
-    const [loadingCanvases, setLoadingCanvases] = useState(true)
-    const [loadingChat, setLoadingChat] = useState(false)
-    const [sending, setSending] = useState(false)
-    const [creatingCanvas, setCreatingCanvas] = useState(false)
-    const [message, setMessage] = useState('')
-    const [graphPrompt, setGraphPrompt] = useState('')
-    const [firstPrompt, setFirstPrompt] = useState('')
-    const [providerOverride, setProviderOverride] = useState<LlmProviderId | ''>('')
-    const [graphProviderOverride, setGraphProviderOverride] = useState<LlmProviderId | ''>('')
-    const [selectedGraphNodeId, setSelectedGraphNodeId] = useState<number | null>(null)
-    const [canvasError, setCanvasError] = useState('')
-    const [chatError, setChatError] = useState('')
-    const [chatFailureAction, setChatFailureAction] = useState<ChatFailureAction | null>(null)
-    const [createCanvasError, setCreateCanvasError] = useState('')
-    const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
-    const [editingCanvasId, setEditingCanvasId] = useState<number | null>(null)
-    const [renameTitle, setRenameTitle] = useState('')
-    const [renameError, setRenameError] = useState('')
-    const [renamingCanvas, setRenamingCanvas] = useState(false)
-    const [deleteTargetCanvas, setDeleteTargetCanvas] = useState<CanvasSummary | null>(null)
-    const [deleteError, setDeleteError] = useState('')
-    const [deletingCanvas, setDeletingCanvas] = useState(false)
-    const canvasButtonRefs = useRef<Array<HTMLButtonElement | null>>([])
-    const mobileDrawerRef = useRef<HTMLDivElement | null>(null)
-    const chatRequestIdRef = useRef(0)
-    const [isSidebarOpen, setIsSidebarOpen] = useState(true)
-    const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false)
-    const prevRequestedIdRef = useRef<number | null>(null)
-    const requestedCanvasId = parseCanvasId(searchParams.get('canvasId'))
-
-    function sortCanvases(items: CanvasSummary[]) {
-        return [...items].sort((left, right) => {
-            const updatedDiff = new Date(right.updatedAt).getTime() - new Date(left.updatedAt).getTime()
-            if (updatedDiff !== 0) return updatedDiff
-            return right.id - left.id
-        })
-    }
-
-    function syncCanvasIdInSearchParams(canvasId: number | null, replace = false) {
-        const nextSearchParams = new URLSearchParams(searchParams)
-
-        if (canvasId === null)
-            nextSearchParams.delete('canvasId')
-        else
-            nextSearchParams.set('canvasId', String(canvasId))
-
-        setSearchParams(nextSearchParams, { replace })
-    }
-
-    async function refreshCanvasesList() {
-        const items = await getCanvases()
-        setCanvases(items)
-        setCanvasError('')
-    }
-
-    async function loadCanvasExperience(canvasId: number) {
-        const requestId = ++chatRequestIdRef.current
-
-        setLoadingChat(true)
-        setChat(null)
-        setCanvasGraph(null)
-        setSelectedGraphNodeId(null)
-        setGraphPrompt('')
-        setGraphProviderOverride('')
-        setChatError('')
-        setChatFailureAction(null)
-
-        try {
-            const graphResponse = await getCanvasGraph(canvasId)
-            if (chatRequestIdRef.current !== requestId) return
-
-            setCanvasGraph(graphResponse)
-
-            if (graphResponse.mode === 'graph') {
-                setSelectedGraphNodeId(graphResponse.rootNodeId)
-                return
-            }
-
-            const response = await getMainNodeChat(canvasId)
-            if (chatRequestIdRef.current !== requestId) return
-
-            setChat(response)
-        } catch (err) {
-            if (chatRequestIdRef.current !== requestId) return
-
-            setChat(null)
-            setCanvasGraph(null)
-            setChatError(getLlmError(err).message)
-            setChatFailureAction('load')
-        } finally {
-            if (chatRequestIdRef.current === requestId)
-                setLoadingChat(false)
-        }
-    }
-
-    async function submitLegacyMessage() {
-        if (!selectedCanvasId || !message.trim() || noProvidersConfigured) return
-
-        setSending(true)
-        setChatError('')
-        setChatFailureAction(null)
-
-        try {
-            const response = await sendMainNodeMessage(
-                selectedCanvasId,
-                message.trim(),
-                providerOverride || undefined
-            )
-            setChat(response)
-            setMessage('')
-
-            try {
-                await refreshCanvasesList()
-            } catch (err) {
-                setCanvasError(getCanvasError(err).message)
-            }
-        } catch (err) {
-            setChatError(getLlmError(err).message)
-            setChatFailureAction('send')
-        } finally {
-            setSending(false)
-        }
-    }
-
-    async function handleRetryChat() {
-        if (chatFailureAction === 'load' && selectedCanvasId) {
-            await loadCanvasExperience(selectedCanvasId)
-            return
-        }
-
-        if (chatFailureAction === 'send') {
-            if (canvasGraph?.mode === 'graph' && selectedGraphNodeId) {
-                await submitGraphNode(selectedGraphNodeId)
-                return
-            }
-
-            await submitLegacyMessage()
-        }
-    }
-
-    useEffect(() => {
-        let active = true
-
-        getCanvases()
-            .then(items => {
-                if (!active) return
-                setCanvases(items)
-                setCanvasError('')
-            })
-            .catch(err => {
-                if (!active) return
-                setCanvasError(getCanvasError(err).message)
-            })
-            .finally(() => {
-                if (active) setLoadingCanvases(false)
-            })
-
-        return () => {
-            active = false
-        }
-    }, [])
-
-    useEffect(() => {
-        if (loadingCanvases) return
-
-        const urlChangedExternally = requestedCanvasId !== prevRequestedIdRef.current
-        prevRequestedIdRef.current = requestedCanvasId
-
-        const requestedSelectionExists =
-            requestedCanvasId !== null && canvases.some(item => item.id === requestedCanvasId)
-        const currentSelectionExists =
-            selectedCanvasId !== null && canvases.some(item => item.id === selectedCanvasId)
-
-        // Priority 1: If the URL changed externally (back/forward), follow the URL
-        // Priority 2: If we have a valid internal selection, keep it (and sync URL to it)
-        // Priority 3: Fallback to URL if it's valid but state was empty
-        // Priority 4: Selection fallback to first canvas
-        const nextSelectedCanvasId =
-            (urlChangedExternally && requestedSelectionExists)
-                ? requestedCanvasId
-                : currentSelectionExists
-                    ? selectedCanvasId
-                    : requestedSelectionExists
-                        ? requestedCanvasId
-                        : canvases[0]?.id ?? null
-
-        if (nextSelectedCanvasId !== selectedCanvasId) {
-            setSelectedCanvasId(nextSelectedCanvasId)
-        }
-
-        const canonicalCanvasId = nextSelectedCanvasId ? String(nextSelectedCanvasId) : null
-        const currentParam = searchParams.get('canvasId')
-        if (currentParam !== canonicalCanvasId) {
-            const nextSearchParams = new URLSearchParams(searchParams)
-
-            if (nextSelectedCanvasId === null)
-                nextSearchParams.delete('canvasId')
-            else
-                nextSearchParams.set('canvasId', String(nextSelectedCanvasId))
-
-            setSearchParams(nextSearchParams, { replace: true })
-        }
-    }, [canvases, loadingCanvases, requestedCanvasId, searchParams, selectedCanvasId, setSearchParams])
-
-    useEffect(() => {
-        if (!isMobileSidebarOpen) return
-
-        mobileDrawerRef.current?.focus()
-        const originalOverflow = document.body.style.overflow
-        document.body.style.overflow = 'hidden'
-
-        function handleEsc(event: globalThis.KeyboardEvent) {
-            if (event.key === 'Escape')
-                setIsMobileSidebarOpen(false)
-        }
-
-        window.addEventListener('keydown', handleEsc)
-
-        return () => {
-            document.body.style.overflow = originalOverflow
-            window.removeEventListener('keydown', handleEsc)
-        }
-    }, [isMobileSidebarOpen])
-
-    useEffect(() => {
-        function handleResize() {
-            if (!isMobileViewport())
-                setIsMobileSidebarOpen(false)
-        }
-
-        window.addEventListener('resize', handleResize)
-        return () => window.removeEventListener('resize', handleResize)
-    }, [])
-
-    useEffect(() => {
-        if (loadingCanvases) return
-
-        if (!selectedCanvasId) {
-            chatRequestIdRef.current += 1
-            setChat(null)
-            setCanvasGraph(null)
-            setProviderOverride('')
-            setGraphProviderOverride('')
-            setSelectedGraphNodeId(null)
-            setGraphPrompt('')
-            setChatError('')
-            setChatFailureAction(null)
-            setLoadingChat(false)
-            return
-        }
-
-        setProviderOverride('')
-        setGraphProviderOverride('')
-        setSelectedGraphNodeId(null)
-        setGraphPrompt('')
-        void loadCanvasExperience(selectedCanvasId)
-    }, [loadingCanvases, selectedCanvasId])
-
-    function setCanvasSelection(canvasId: number | null, replace = false) {
-        setSelectedCanvasId(canvasId)
-        syncCanvasIdInSearchParams(canvasId, replace)
-    }
-
-    function handleCanvasListKeyDown(event: ReactKeyboardEvent<HTMLButtonElement>, index: number) {
-        if (!canvases.length) return
-
-        let targetIndex = index
-        switch (event.key) {
-            case 'ArrowDown':
-            case 'ArrowRight':
-                targetIndex = Math.min(index + 1, canvases.length - 1)
-                break
-            case 'ArrowUp':
-            case 'ArrowLeft':
-                targetIndex = Math.max(index - 1, 0)
-                break
-            case 'Home':
-                targetIndex = 0
-                break
-            case 'End':
-                targetIndex = canvases.length - 1
-                break
-            default:
-                return
-        }
-
-        event.preventDefault()
-        const targetCanvas = canvases[targetIndex]
-        if (!targetCanvas) return
-
-        setCanvasSelection(targetCanvas.id)
-        canvasButtonRefs.current[targetIndex]?.focus()
-    }
-
-    function handleCanvasSelection(canvasId: number | null) {
-        setCanvasSelection(canvasId)
-
-        if (isMobileViewport())
-            setIsMobileSidebarOpen(false)
-    }
-
-    async function handleRetryCanvases() {
-        setLoadingCanvases(true)
-
-        try {
-            await refreshCanvasesList()
-        } catch (err) {
-            setCanvasError(getCanvasError(err).message)
-        } finally {
-            setLoadingCanvases(false)
-        }
-    }
-
-    function handleRenameInputChange(value: string) {
-        setRenameTitle(value)
-        if (renameError) setRenameError('')
-    }
-
-    function startRenameCanvas(canvas: CanvasSummary) {
-        setEditingCanvasId(canvas.id)
-        setRenameTitle(canvas.title)
-        setRenameError('')
-        setDeleteError('')
-    }
-
-    function cancelRenameCanvas() {
-        if (renamingCanvas) return
-        setEditingCanvasId(null)
-        setRenameTitle('')
-        setRenameError('')
-    }
-
-    async function handleRenameSubmit(canvasId: number) {
-        const trimmedTitle = renameTitle.trim()
-        if (!trimmedTitle) {
-            setRenameError('Add a canvas title before saving.')
-            return
-        }
-
-        setRenamingCanvas(true)
-        setRenameError('')
-
-        try {
-            const updatedCanvas = await renameCanvas(canvasId, trimmedTitle)
-            setCanvases(current => sortCanvases(current.map(item => item.id === updatedCanvas.id ? updatedCanvas : item)))
-            setEditingCanvasId(null)
-            setRenameTitle('')
-            setCanvasError('')
-        } catch (err) {
-            setRenameError(getCanvasError(err).message)
-        } finally {
-            setRenamingCanvas(false)
-        }
-    }
-
-    function handleRenameKeyDown(event: ReactKeyboardEvent<HTMLInputElement>) {
-        if (event.key === 'Escape') {
-            event.preventDefault()
-            cancelRenameCanvas()
-        }
-    }
-
-    function openDeleteModal(canvas: CanvasSummary) {
-        setDeleteTargetCanvas(canvas)
-        setDeleteError('')
-        setEditingCanvasId(null)
-        setRenameTitle('')
-        setRenameError('')
-    }
-
-    function closeDeleteModal() {
-        if (deletingCanvas) return
-        setDeleteTargetCanvas(null)
-        setDeleteError('')
-    }
-
-    async function handleDeleteCanvas() {
-        if (!deleteTargetCanvas) return
-
-        setDeletingCanvas(true)
-        setDeleteError('')
-
-        try {
-            const deletedCanvasId = deleteTargetCanvas.id
-            await deleteCanvas(deletedCanvasId)
-            const nextCanvases = canvases.filter(item => item.id !== deletedCanvasId)
-            setCanvases(nextCanvases)
-            if (selectedCanvasId === deletedCanvasId) {
-                setCanvasSelection(nextCanvases[0]?.id ?? null, true)
-                setChat(null)
-                setCanvasGraph(null)
-                setProviderOverride('')
-                setGraphProviderOverride('')
-                setSelectedGraphNodeId(null)
-                setGraphPrompt('')
-            }
-            setDeleteTargetCanvas(null)
-            setCanvasError('')
-        } catch (err) {
-            setDeleteError(getCanvasError(err).message)
-        } finally {
-            setDeletingCanvas(false)
-        }
-    }
-
-    const selectedCanvas = canvases.find(item => item.id === selectedCanvasId) ?? null
-    const isGraphMode = canvasGraph?.mode === 'graph'
-    const availableProviders = isGraphMode
-        ? (canvasGraph?.availableProviders ?? [])
-        : (chat?.availableProviders ?? [])
-    const defaultProvider = isGraphMode
-        ? (canvasGraph?.defaultProvider ?? null)
-        : (chat?.defaultProvider ?? null)
-    const noProvidersConfigured = availableProviders.length === 0
-
-    async function submitGraphNode(nodeId: number) {
-        if (!selectedCanvasId || !graphPrompt.trim() || noProvidersConfigured) return
-
-        setSending(true)
-        setChatError('')
-        setChatFailureAction(null)
-
-        try {
-            const response = await expandCanvasNode(
-                selectedCanvasId,
-                nodeId,
-                graphPrompt.trim(),
-                graphProviderOverride || undefined,
-            )
-            setCanvasGraph(response)
-            setGraphPrompt('')
-
-            try {
-                await refreshCanvasesList()
-            } catch (err) {
-                setCanvasError(getCanvasError(err).message)
-            }
-        } catch (err) {
-            setChatError(getLlmError(err).message)
-            setChatFailureAction('send')
-        } finally {
-            setSending(false)
-        }
-    }
-
-    async function handleSubmit(ev: FormEvent) {
-        ev.preventDefault()
-        await submitLegacyMessage()
-    }
-
-    async function handleCreateCanvas(ev: FormEvent) {
-        ev.preventDefault()
-
-        const trimmedPrompt = firstPrompt.trim()
-        if (!trimmedPrompt) {
-            setCreateCanvasError('Add the first prompt to create a canvas.')
-            return
-        }
-
-        setCreatingCanvas(true)
-        setCreateCanvasError('')
-
-        try {
-            const createdCanvas = await createCanvas(trimmedPrompt)
-            setCanvases(current => [createdCanvas, ...current.filter(item => item.id !== createdCanvas.id)])
-            setCanvasSelection(createdCanvas.id)
-            setFirstPrompt('')
-            setMessage('')
-            setChat(null)
-            setCanvasGraph(null)
-            setSelectedGraphNodeId(null)
-            setGraphPrompt('')
-            setGraphProviderOverride('')
-            setIsCreateModalOpen(false)
-            setCanvasError('')
-        } catch (err) {
-            setCreateCanvasError(getCanvasError(err).message)
-        } finally {
-            setCreatingCanvas(false)
-        }
-    }
-
-    function openCreateModal() {
-        setCreateCanvasError('')
-        setFirstPrompt('')
-        setIsMobileSidebarOpen(false)
-        setIsCreateModalOpen(true)
-    }
-
-    function closeCreateModal() {
-        if (creatingCanvas) return
-        setIsCreateModalOpen(false)
-        setCreateCanvasError('')
-    }
-
-    return (
-        <div className="canvas-shell">
-            {canvasError && (
-                <div className="auth-alert auth-alert--err" role="alert" style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
-                    <span><span aria-hidden="true">⚠</span><span> {canvasError}</span></span>
-                    <button
-                        type="button"
-                        className="btn-pill-outline"
-                        onClick={handleRetryCanvases}
-                        style={{ padding: '0.45rem 0.9rem' }}
-                    >
-                        Retry Loading Canvases
-                    </button>
-                </div>
-            )}
-
-            {chatError && (
-                <div className="auth-alert auth-alert--err" role="alert" style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
-                    <span><span aria-hidden="true">⚠</span><span> {chatError}</span></span>
-                    {chatFailureAction && (
-                        <button
-                            type="button"
-                            className="btn-pill-outline"
-                            onClick={() => void handleRetryChat()}
-                            disabled={
-                                sending
-                                || (chatFailureAction === 'load' && !selectedCanvasId)
-                                || (chatFailureAction === 'send' && (!selectedCanvasId || !message.trim() || noProvidersConfigured))
-                            }
-                            style={{ padding: '0.45rem 0.9rem' }}
-                        >
-                            {chatFailureAction === 'load' ? 'Retry Loading Chat' : 'Retry Sending Message'}
-                        </button>
-                    )}
-                </div>
-            )}
-
-            <div className={`canvas-home-grid ${!isSidebarOpen ? 'canvas-home-grid--collapsed' : ''}`}>
-                {/* Desktop Sidebar */}
-                <aside
-                    className={`canvas-sidebar ${!isSidebarOpen ? 'canvas-sidebar--collapsed' : ''}`}
-                    data-testid="desktop-sidebar"
-                >
-                            <SidebarContent
-                                canvases={canvases}
-                                loadingCanvases={loadingCanvases}
-                                selectedCanvasId={selectedCanvasId}
-                                canvasButtonRefs={canvasButtonRefs}
-                                editingCanvasId={editingCanvasId}
-                                renamingCanvas={renamingCanvas}
-                                renameTitle={renameTitle}
-                                renameError={renameError}
-                                isCollapsed={!isSidebarOpen}
-                                openCreateModal={openCreateModal}
-                                setCanvasSelection={handleCanvasSelection}
-                                handleCanvasListKeyDown={handleCanvasListKeyDown}
-                                handleRenameInputChange={handleRenameInputChange}
-                                handleRenameSubmit={handleRenameSubmit}
-                                handleRenameKeyDown={handleRenameKeyDown}
-                                startRenameCanvas={startRenameCanvas}
-                                cancelRenameCanvas={cancelRenameCanvas}
-                                openDeleteModal={openDeleteModal}
-                            />
-                    <button
-                        type="button"
-                        className="canvas-sidebar-toggle"
-                        onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-                        aria-label={isSidebarOpen ? "Collapse canvas sidebar" : "Expand canvas sidebar"}
-                        title={isSidebarOpen ? "Collapse" : "Expand"}
-                    >
-                        {isSidebarOpen ? '‹' : '›'}
-                    </button>
-                </aside>
-
-                {/* Mobile Drawer */}
-                {isMobileSidebarOpen && (
-                    <div
-                        className="mobile-drawer-backdrop"
-                        data-testid="mobile-drawer-backdrop"
-                        onClick={() => setIsMobileSidebarOpen(false)}
-                    />
-                )}
-                <div
-                    ref={mobileDrawerRef}
-                    className={`mobile-drawer ${isMobileSidebarOpen ? 'mobile-drawer--open' : ''}`}
-                    role={isMobileSidebarOpen ? 'dialog' : undefined}
-                    aria-label={isMobileSidebarOpen ? 'Canvas sidebar' : undefined}
-                    aria-modal={isMobileSidebarOpen ? 'true' : undefined}
-                    aria-hidden={!isMobileSidebarOpen}
-                    tabIndex={-1}
-                    data-testid="mobile-drawer"
-                >
-                    {isMobileSidebarOpen && (
-                        <>
-                            <div className="mobile-drawer-header">
-                                <button
-                                    type="button"
-                                    className="canvas-sidebar-icon-button"
-                                    onClick={() => setIsMobileSidebarOpen(false)}
-                                    aria-label="Close canvas sidebar"
-                                    title="Close sidebar"
-                                >
-                                    ×
-                                </button>
-                            </div>
-                            <SidebarContent
-                                canvases={canvases}
-                                loadingCanvases={loadingCanvases}
-                                selectedCanvasId={selectedCanvasId}
-                                canvasButtonRefs={canvasButtonRefs}
-                                editingCanvasId={editingCanvasId}
-                                renamingCanvas={renamingCanvas}
-                                renameTitle={renameTitle}
-                                renameError={renameError}
-                                onSelect={() => setIsMobileSidebarOpen(false)}
-                                openCreateModal={openCreateModal}
-                                setCanvasSelection={handleCanvasSelection}
-                                handleCanvasListKeyDown={handleCanvasListKeyDown}
-                                handleRenameInputChange={handleRenameInputChange}
-                                handleRenameSubmit={handleRenameSubmit}
-                                handleRenameKeyDown={handleRenameKeyDown}
-                                startRenameCanvas={startRenameCanvas}
-                                cancelRenameCanvas={cancelRenameCanvas}
-                                openDeleteModal={openDeleteModal}
-                            />
-                        </>
-                    )}
-                </div>
-
-                <div className="canvas-chat-panel" style={{ cursor: 'default' }}>
-                    <div className="canvas-panel-header">
-                        <button
-                            type="button"
-                            className="mobile-sidebar-toggle"
-                            onClick={() => setIsMobileSidebarOpen(true)}
-                            aria-label="Open canvas sidebar"
-                        >
-                            ☰
-                        </button>
-                    </div>
-                    {!selectedCanvas ? (
-                        <div style={{ display: 'grid', gap: '0.75rem' }}>
-                            <div className="settings-placeholder" style={{ textAlign: 'left' }} role="status" aria-live="polite">
-                                Select a canvas to view its main-node conversation, or create a new one to get started.
-                            </div>
-                            <button
-                                type="button"
-                                className="btn-pill-dark"
-                                onClick={openCreateModal}
-                                style={{ width: 'fit-content', padding: '0.65rem 1rem' }}
-                            >
-                                New Canvas
-                            </button>
-                        </div>
-                    ) : loadingChat ? (
-                        <div className="settings-placeholder" role="status" aria-live="polite">Loading canvas chat…</div>
-                    ) : (
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', flex: 1, width: '100%' }}>
-                            <div style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem', alignItems: 'flex-start', flexWrap: 'wrap' }}>
-                                <div style={{ display: 'grid', gap: '0.4rem' }}>
-                                    <h2 style={{ margin: 0, color: 'var(--text-dark)' }}>{selectedCanvas.title}</h2>
-                                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem', fontSize: '0.9rem', color: 'var(--text-muted)' }}>
-                                        <span>Default provider: {defaultProvider ? getProviderLabel(defaultProvider) : 'None'}</span>
-                                        <span>{isGraphMode ? 'Canvas mode: Node graph' : 'Canvas mode: Legacy chat'}</span>
-                                    </div>
-                                </div>
-                                <button
-                                    type="button"
-                                    className="btn-pill-outline"
-                                    onClick={openCreateModal}
-                                    style={{ padding: '0.55rem 1rem' }}
-                                >
-                                    New Canvas
-                                </button>
-                            </div>
-
-                            {isGraphMode && canvasGraph ? (
-                                <CanvasGraphView
-                                    graph={canvasGraph}
-                                    selectedNodeId={selectedGraphNodeId}
-                                    draft={graphPrompt}
-                                    providerOverride={graphProviderOverride}
-                                    sending={sending}
-                                    noProvidersConfigured={noProvidersConfigured}
-                                    onSelectNode={nodeId => {
-                                        setSelectedGraphNodeId(nodeId)
-                                        setChatError('')
-                                        setChatFailureAction(null)
-                                    }}
-                                    onDraftChange={setGraphPrompt}
-                                    onProviderOverrideChange={setGraphProviderOverride}
-                                    onSubmit={nodeId => void submitGraphNode(nodeId)}
-                                    onOpenSettings={() => navigate('/settings')}
-                                />
-                            ) : (
-                                <>
-                                    <div className="auth-alert" style={{ marginBottom: 0, background: 'var(--bg-element)', color: 'var(--text-muted)' }}>
-                                        This canvas still uses the legacy chat view. New canvases open in node canvas mode.
-                                    </div>
-
-                                    <div style={{
-                                        display: 'grid',
-                                        gap: '0.9rem',
-                                        minHeight: '280px',
-                                        maxHeight: '520px',
-                                        overflowY: 'auto',
-                                        padding: '0.25rem'
-                                    }}>
-                                        {chat?.messages.length ? chat.messages.map(item => (
-                                            <div
-                                                key={item.id}
-                                                style={{
-                                                    alignSelf: item.role === 'user' ? 'end' : 'start',
-                                                    maxWidth: '80%',
-                                                    background: item.role === 'user' ? '#111' : '#f7f7f7',
-                                                    color: item.role === 'user' ? '#fff' : 'var(--text-dark)',
-                                                    borderRadius: '16px',
-                                                    padding: '0.9rem 1rem',
-                                                    border: item.role === 'assistant' ? '1px solid rgba(17, 17, 17, 0.08)' : 'none'
-                                                }}
-                                            >
-                                                <div style={{ fontSize: '0.78rem', opacity: 0.8, marginBottom: '0.4rem', display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
-                                                    <span>{item.role === 'user' ? 'You' : 'Assistant'}</span>
-                                                    {item.provider && <span>{getProviderLabel(item.provider)}</span>}
-                                                    {item.model && <span>{item.model}</span>}
-                                                </div>
-                                                <div style={{ whiteSpace: 'pre-wrap', lineHeight: 1.5 }}>{item.content}</div>
-                                            </div>
-                                        )) : (
-                                            <div className="settings-placeholder" style={{ textAlign: 'left' }} role="status" aria-live="polite">
-                                                This canvas is ready. Send the first main-node message when you are ready to start.
-                                            </div>
-                                        )}
-                                    </div>
-
-                                    {noProvidersConfigured ? (
-                                        <div style={{ display: 'grid', gap: '0.75rem' }}>
-                                            <div className="settings-placeholder" style={{ textAlign: 'left' }} role="status" aria-live="polite">
-                                                Add a provider API key in Settings before sending messages from this canvas.
-                                            </div>
-                                            <button
-                                                type="button"
-                                                className="btn-pill-dark"
-                                                onClick={() => navigate('/settings')}
-                                                style={{ width: 'fit-content', padding: '0.65rem 1rem' }}
-                                            >
-                                                Go To Settings
-                                            </button>
-                                        </div>
-                                    ) : (
-                                        <form onSubmit={handleSubmit} style={{ display: 'grid', gap: '0.85rem' }}>
-                                            <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'center' }}>
-                                                <label htmlFor="home-provider-override" style={{ fontSize: '0.9rem', color: 'var(--text-muted)' }}>
-                                                    Provider override
-                                                </label>
-                                                <select
-                                                    id="home-provider-override"
-                                                    value={providerOverride}
-                                                    onChange={e => setProviderOverride(e.target.value as LlmProviderId | '')}
-                                                    className="auth-input"
-                                                    disabled={sending}
-                                                    style={{ width: '220px', paddingRight: '2rem' }}
-                                                >
-                                                    <option value="">
-                                                        {defaultProvider ? `Use default (${getProviderLabel(defaultProvider)})` : 'Use default provider'}
-                                                    </option>
-                                                    {availableProviders.map(provider => (
-                                                        <option key={provider} value={provider}>
-                                                            {getProviderLabel(provider)}
-                                                        </option>
-                                                    ))}
-                                                </select>
-                                            </div>
-
-                                            <textarea
-                                                value={message}
-                                                onChange={e => setMessage(e.target.value)}
-                                                placeholder="Type your message here…"
-                                                disabled={sending}
-                                                rows={5}
-                                                style={{
-                                                    width: '100%',
-                                                    borderRadius: '14px',
-                                                    border: '1px solid rgba(17, 17, 17, 0.12)',
-                                                    padding: '1rem',
-                                                    resize: 'vertical',
-                                                    font: 'inherit',
-                                                    background: '#fff',
-                                                    color: 'var(--text-dark)'
-                                                }}
-                                            />
-
-                                            <div style={{ display: 'flex', justifyContent: 'space-between', gap: '0.75rem', alignItems: 'center', flexWrap: 'wrap' }}>
-                                                <span style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>
-                                                    Messages stay attached to the selected canvas and reorder your list by most recent activity.
-                                                </span>
-                                                <button
-                                                    type="submit"
-                                                    className="btn-pill-dark"
-                                                    disabled={sending || !message.trim()}
-                                                    style={{ padding: '0.75rem 1.2rem' }}
-                                                >
-                                                    {sending ? 'Sending…' : 'Send Message'}
-                                                </button>
-                                            </div>
-                                        </form>
-                                    )}
-                                </>
-                            )}
-                        </div>
-                    )}
-                </div>
-            </div>
-
-            {isCreateModalOpen && (
-                <div
-                    role="dialog"
-                    aria-modal="true"
-                    aria-label="Create canvas"
-                    style={{
-                        position: 'fixed',
-                        inset: 0,
-                        background: 'rgba(17, 17, 17, 0.48)',
-                        display: 'grid',
-                        placeItems: 'center',
-                        padding: '1.5rem',
-                        zIndex: 30
-                    }}
-                >
-                    <div className="project-card" style={{ width: 'min(640px, 100%)', padding: '1.5rem', cursor: 'default', height: 'auto' }}>
-                        <form onSubmit={handleCreateCanvas} style={{ display: 'grid', gap: '1rem' }}>
-                            <div style={{ display: 'grid', gap: '0.45rem' }}>
-                                <h2 style={{ margin: 0 }}>Create New Canvas</h2>
-                                <p style={{ color: 'var(--text-muted)' }}>
-                                    Add the first prompt for this canvas. We’ll use it to generate the initial canvas title.
-                                </p>
-                            </div>
-
-                            {createCanvasError && (
-                                <div className="auth-alert auth-alert--err" role="alert">
-                                    <span>⚠</span><span> {createCanvasError}</span>
-                                </div>
-                            )}
-
-                            <textarea
-                                value={firstPrompt}
-                                onChange={e => setFirstPrompt(e.target.value)}
-                                placeholder="Describe what this canvas should help you with…"
-                                rows={6}
-                                disabled={creatingCanvas}
-                                style={{
-                                    width: '100%',
-                                    borderRadius: '14px',
-                                    border: '1px solid rgba(17, 17, 17, 0.12)',
-                                    padding: '1rem',
-                                    resize: 'vertical',
-                                    font: 'inherit',
-                                    background: '#fff',
-                                    color: 'var(--text-dark)'
-                                }}
-                            />
-
-                            <div style={{ display: 'flex', justifyContent: 'space-between', gap: '0.75rem', alignItems: 'center', flexWrap: 'wrap' }}>
-                                <span style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>
-                                    The first prompt names the canvas only. It won’t send an AI request yet.
-                                </span>
-                                <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
-                                    <button
-                                        type="button"
-                                        className="btn-pill-outline"
-                                        onClick={closeCreateModal}
-                                        disabled={creatingCanvas}
-                                    >
-                                        Cancel
-                                    </button>
-                                    <button
-                                        type="submit"
-                                        className="btn-pill-dark"
-                                        disabled={creatingCanvas}
-                                    >
-                                        {creatingCanvas ? 'Creating…' : 'Create Canvas'}
-                                    </button>
-                                </div>
-                            </div>
-                        </form>
-                    </div>
-                </div>
-            )}
-
-            {deleteTargetCanvas && (
-                <div
-                    role="dialog"
-                    aria-modal="true"
-                    aria-label="Delete canvas"
-                    style={{
-                        position: 'fixed',
-                        inset: 0,
-                        background: 'rgba(17, 17, 17, 0.48)',
-                        display: 'grid',
-                        placeItems: 'center',
-                        padding: '1.5rem',
-                        zIndex: 31
-                    }}
-                >
-                    <div className="project-card" style={{ width: 'min(560px, 100%)', padding: '1.5rem', cursor: 'default', height: 'auto' }}>
-                        <div style={{ display: 'grid', gap: '1rem' }}>
-                            <div style={{ display: 'grid', gap: '0.45rem' }}>
-                                <h2 style={{ margin: 0 }}>Delete Canvas</h2>
-                                <p style={{ color: 'var(--text-muted)', margin: 0 }}>
-                                    Permanently delete "{deleteTargetCanvas.title}"? This action cannot be undone.
-                                </p>
-                            </div>
-
-                            {deleteError && (
-                                <div className="auth-alert auth-alert--err" role="alert">
-                                    <span>⚠</span><span> {deleteError}</span>
-                                </div>
-                            )}
-
-                            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.75rem', flexWrap: 'wrap' }}>
-                                <button
-                                    type="button"
-                                    className="btn-pill-outline"
-                                    onClick={closeDeleteModal}
-                                    disabled={deletingCanvas}
-                                >
-                                    Cancel
-                                </button>
-                                <button
-                                    type="button"
-                                    className="btn-pill-dark"
-                                    onClick={handleDeleteCanvas}
-                                    disabled={deletingCanvas}
-                                >
-                                    {deletingCanvas ? 'Deleting…' : 'Delete Canvas'}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            )}
-        </div>
-    )
-}
diff --git a/frontend/src/pages/Index.test.tsx b/frontend/src/pages/Index.test.tsx
new file mode 100644
index 0000000..d9efe94
--- /dev/null
+++ b/frontend/src/pages/Index.test.tsx
@@ -0,0 +1,423 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { MemoryRouter } from 'react-router-dom'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import IndexPage from './Index'
+import type { ChatCanvasFlowEdge, ChatCanvasFlowNode } from '@/components/chat-canvas/types'
+import type {
+    ChatCanvasNodeDetail,
+    ChatCanvasNodeSummary,
+    ChatSessionGraph,
+    ChatSessionState,
+    ChatSessionSummary,
+    LlmProviderId,
+} from '@/types'
+import * as chatSessionService from '@/services/chatSessionService'
+import * as llmService from '@/services/llmService'
+
+const workspaceMock = vi.hoisted(() => ({
+    latestProps: null as null | {
+        nodes: ChatCanvasFlowNode[]
+        edges: ChatCanvasFlowEdge[]
+        canvasName: string
+        theme: string
+        setTheme: (theme: string) => void
+        onRenameCanvas: (name: string) => void
+        onSelectNode: (nodeId: string) => void
+        onSaveNodePosition: (nodeId: string, positionX: number, positionY: number) => void
+        onEditMessage: (nodeId: string, messageId: number | string, content: string) => Promise<boolean>
+    },
+}))
+
+const mockUseLocation = vi.fn()
+const mockNavigate = vi.fn()
+const mockLogout = vi.fn()
+const mockSetTheme = vi.fn()
+
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual<typeof import('react-router-dom')>('react-router-dom')
+    return {
+        ...actual,
+        useLocation: () => mockUseLocation(),
+        useNavigate: () => mockNavigate,
+    }
+})
+
+vi.mock('@/context/AuthContext', async () => {
+    const actual = await vi.importActual<typeof import('@/context/AuthContext')>('@/context/AuthContext')
+    return {
+        ...actual,
+        useAuth: () => ({
+            user: { id: 1, email: 'tester@example.com', isEmailVerified: true, displayName: 'Tester' },
+            logout: mockLogout,
+            isAuthenticated: true,
+        }),
+    }
+})
+
+vi.mock('@/context/AppThemeContext', async () => {
+    const actual = await vi.importActual<typeof import('@/context/AppThemeContext')>('@/context/AppThemeContext')
+    return {
+        ...actual,
+        useAppTheme: () => ({
+            theme: 'midnight',
+            setTheme: mockSetTheme,
+        }),
+    }
+})
+
+vi.mock('@/components/chat-canvas/CanvasWorkspace', () => ({
+    default: (props: {
+        nodes: ChatCanvasFlowNode[]
+        edges: ChatCanvasFlowEdge[]
+        canvasName: string
+        theme: string
+        setTheme: (theme: string) => void
+        onRenameCanvas: (name: string) => void
+        onSelectNode: (nodeId: string) => void
+        onSaveNodePosition: (nodeId: string, positionX: number, positionY: number) => void
+        onEditMessage: (nodeId: string, messageId: number | string, content: string) => Promise<boolean>
+    }) => {
+        workspaceMock.latestProps = props
+        return (
+            <div data-testid="canvas-workspace">
+                <button
+                    type="button"
+                    data-testid="send-root-message"
+                    onClick={() => {
+                        void props.nodes[0]?.data.onSendMessage('Build the first idea')
+                    }}
+                >
+                    Send
+                </button>
+                <span>{props.canvasName}</span>
+            </div>
+        )
+    },
+}))
+
+vi.mock('@/components/chat-canvas/CanvasSidebar', () => ({
+    default: (props: { onAdd: () => void }) => (
+        <div data-testid="canvas-sidebar">
+            <button type="button" data-testid="new-canvas" onClick={props.onAdd}>
+                New Canvas
+            </button>
+        </div>
+    ),
+}))
+
+vi.mock('@/components/auth/AuthModal', () => ({
+    default: () => null,
+}))
+
+vi.mock('@/services/llmService', () => ({
+    getLlmError: vi.fn((error: unknown) => {
+        if (error instanceof Error)
+            return { message: error.message }
+        return { message: 'Something went wrong. Please try again.' }
+    }),
+    getProviders: vi.fn(async () => ({
+        defaultProvider: 'gemini',
+        providers: [
+            { provider: 'openai', configured: true, maskedLast4: '1234', isDefault: false, lastTestedAt: null, updatedAt: null },
+            { provider: 'claude', configured: true, maskedLast4: '5678', isDefault: false, lastTestedAt: null, updatedAt: null },
+            { provider: 'gemini', configured: true, maskedLast4: '9012', isDefault: true, lastTestedAt: null, updatedAt: null },
+        ],
+    })),
+    getProviderModels: vi.fn(async () => ({ provider: 'openai', models: [] })),
+}))
+
+vi.mock('@/services/chatSessionService', () => ({
+    createChatSession: vi.fn(),
+    createChatNode: vi.fn(),
+    createChatBranch: vi.fn(),
+    deleteChatNode: vi.fn(),
+    deleteChatSession: vi.fn(),
+    generateChatNodeImage: vi.fn(),
+    generateChatNodeNote: vi.fn(),
+    getChatNode: vi.fn(),
+    getChatSession: vi.fn(),
+    getChatSessions: vi.fn(),
+    importGuestCanvases: vi.fn(),
+    previewGuestChatAction: vi.fn(),
+    renameChatSession: vi.fn(),
+    saveChatLayout: vi.fn(),
+    sendChatNodeMessage: vi.fn(),
+    updateChatNode: vi.fn(),
+}))
+
+function createGraph(session: ChatSessionSummary, nodeId: number, provider: LlmProviderId = 'openai'): ChatSessionGraph {
+    const summaryNode: ChatCanvasNodeSummary = {
+        id: nodeId,
+        parentNodeId: null,
+        branchFromMessageId: null,
+        nodeType: 'question',
+        title: 'Main Node',
+        preview: '',
+        content: '',
+        positionX: 400,
+        positionY: 300,
+        width: 600,
+        height: 520,
+        isCollapsed: false,
+        expandedWidth: 600,
+        expandedHeight: 520,
+        preferredProvider: provider,
+        preferredModel: 'gpt-4.1-mini',
+        createdAt: '2026-04-13T00:00:00.000Z',
+        updatedAt: '2026-04-13T00:00:00.000Z',
+    }
+
+    return {
+        session,
+        defaultProvider: provider,
+        availableProviders: [provider],
+        rootNodeId: nodeId,
+        activeNodeId: nodeId,
+        nodes: [summaryNode],
+    }
+}
+
+function createNodeDetail(sessionId: number, nodeId: number, provider: LlmProviderId = 'openai'): ChatCanvasNodeDetail {
+    return {
+        sessionId,
+        nodeId,
+        parentNodeId: null,
+        branchFromMessageId: null,
+        nodeType: 'question',
+        title: 'Main Node',
+        preview: '',
+        content: '',
+        positionX: 400,
+        positionY: 300,
+        width: 600,
+        height: 520,
+        isCollapsed: false,
+        expandedWidth: 600,
+        expandedHeight: 520,
+        preferredProvider: provider,
+        preferredModel: 'gpt-4.1-mini',
+        createdAt: '2026-04-13T00:00:00.000Z',
+        updatedAt: '2026-04-13T00:00:00.000Z',
+        localMessages: [],
+        resolvedMessages: [],
+    }
+}
+
+function createState(sessionId: number, nodeId: number, provider: LlmProviderId = 'openai'): ChatSessionState {
+    return {
+        graph: createGraph(
+            {
+                id: sessionId,
+                title: 'Untitled Canvas',
+                createdAt: '2026-04-13T00:00:00.000Z',
+                updatedAt: '2026-04-13T00:00:00.000Z',
+            },
+            nodeId,
+            provider,
+        ),
+        node: createNodeDetail(sessionId, nodeId, provider),
+    }
+}
+
+describe('IndexPage authenticated canvas bootstrap', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+        mockUseLocation.mockReturnValue({ pathname: '/', state: null })
+        vi.mocked(chatSessionService.getChatSessions).mockResolvedValue([])
+        vi.mocked(llmService.getProviders).mockResolvedValue({
+            defaultProvider: 'gemini',
+            providers: [
+                { provider: 'openai', configured: true, maskedLast4: '1234', isDefault: false, lastTestedAt: null, updatedAt: null },
+                { provider: 'claude', configured: true, maskedLast4: '5678', isDefault: false, lastTestedAt: null, updatedAt: null },
+                { provider: 'gemini', configured: true, maskedLast4: '9012', isDefault: true, lastTestedAt: null, updatedAt: null },
+            ],
+        })
+        vi.mocked(llmService.getProviderModels).mockResolvedValue({ provider: 'openai', models: [] })
+    })
+
+    it('creates a real session when the empty authenticated canvas receives the first message', async () => {
+        const user = userEvent.setup()
+        const nextState = createState(101, 201)
+        vi.mocked(chatSessionService.createChatSession).mockResolvedValue(nextState)
+
+        render(
+            <MemoryRouter initialEntries={['/']}>
+                <IndexPage />
+            </MemoryRouter>,
+        )
+
+        await screen.findByTestId('canvas-workspace')
+        await user.click(screen.getByTestId('send-root-message'))
+
+        await waitFor(() => {
+            expect(chatSessionService.createChatSession).toHaveBeenCalledWith({
+                content: 'Build the first idea',
+                providerOverride: 'gemini',
+                modelOverride: 'gemini-3.1-flash-lite-preview',
+            })
+        })
+        expect(chatSessionService.sendChatNodeMessage).not.toHaveBeenCalled()
+    })
+
+    it('boots a blank authenticated canvas and names it from the first prompt', async () => {
+        const user = userEvent.setup()
+        const session = {
+            id: 301,
+            title: 'Existing session',
+            createdAt: '2026-04-13T00:00:00.000Z',
+            updatedAt: '2026-04-13T00:00:00.000Z',
+        } satisfies ChatSessionSummary
+        const graph = createGraph(session, 401)
+        const nodeDetail = createNodeDetail(301, 401)
+        const initialState: ChatSessionState = {
+            graph,
+            node: nodeDetail,
+        }
+        const blankState = createState(101, 201)
+
+        vi.mocked(chatSessionService.getChatSessions).mockResolvedValue([session])
+        vi.mocked(chatSessionService.getChatSession).mockResolvedValue(graph)
+        vi.mocked(chatSessionService.getChatNode).mockResolvedValue(nodeDetail)
+        vi.mocked(chatSessionService.createChatSession).mockResolvedValue(blankState)
+        vi.mocked(chatSessionService.sendChatNodeMessage).mockResolvedValue(initialState)
+
+        render(
+            <MemoryRouter initialEntries={['/']}>
+                <IndexPage />
+            </MemoryRouter>,
+        )
+
+        await screen.findByTestId('canvas-workspace')
+        await waitFor(() => {
+            expect(chatSessionService.getChatSession).toHaveBeenCalledWith(301)
+        })
+
+        await user.click(screen.getByTestId('new-canvas'))
+
+        await waitFor(() => {
+            expect(screen.getByText('Untitled Canvas')).toBeInTheDocument()
+        })
+        expect(chatSessionService.createChatSession).not.toHaveBeenCalled()
+
+        await user.click(screen.getByTestId('send-root-message'))
+
+        await waitFor(() => {
+            expect(chatSessionService.createChatSession).toHaveBeenCalledWith({
+                content: 'Build the first idea',
+                providerOverride: 'gemini',
+                modelOverride: 'gemini-3.1-flash-lite-preview',
+            })
+        })
+        expect(chatSessionService.sendChatNodeMessage).not.toHaveBeenCalled()
+    })
+
+    it('keeps the normal send path for an existing authenticated session', async () => {
+        const user = userEvent.setup()
+        const session = {
+            id: 301,
+            title: 'Existing session',
+            createdAt: '2026-04-13T00:00:00.000Z',
+            updatedAt: '2026-04-13T00:00:00.000Z',
+        } satisfies ChatSessionSummary
+        const graph = createGraph(session, 401)
+        const nodeDetail = createNodeDetail(301, 401)
+        const initialState: ChatSessionState = {
+            graph,
+            node: nodeDetail,
+        }
+
+        vi.mocked(chatSessionService.getChatSessions).mockResolvedValue([session])
+        vi.mocked(chatSessionService.getChatSession).mockResolvedValue(graph)
+        vi.mocked(chatSessionService.getChatNode).mockResolvedValue(nodeDetail)
+        vi.mocked(chatSessionService.sendChatNodeMessage).mockResolvedValue(initialState)
+
+        render(
+            <MemoryRouter initialEntries={['/']}>
+                <IndexPage />
+            </MemoryRouter>,
+        )
+
+        await screen.findByTestId('canvas-workspace')
+        await waitFor(() => {
+            expect(chatSessionService.getChatSession).toHaveBeenCalledWith(301)
+        })
+
+        await user.click(screen.getByTestId('send-root-message'))
+
+        await waitFor(() => {
+            expect(chatSessionService.sendChatNodeMessage).toHaveBeenCalledWith(
+                301,
+                401,
+                'Build the first idea',
+                undefined,
+                'openai',
+                'gpt-4.1-mini',
+            )
+        })
+        expect(chatSessionService.createChatSession).not.toHaveBeenCalled()
+    })
+
+    it('loads model options from all configured providers even when the current graph uses one provider', async () => {
+        const user = userEvent.setup()
+        const session = {
+            id: 301,
+            title: 'Existing session',
+            createdAt: '2026-04-13T00:00:00.000Z',
+            updatedAt: '2026-04-13T00:00:00.000Z',
+        } satisfies ChatSessionSummary
+        const graph = createGraph(session, 401, 'openai')
+        const nodeDetail = createNodeDetail(301, 401, 'openai')
+        const initialState: ChatSessionState = {
+            graph,
+            node: nodeDetail,
+        }
+
+        vi.mocked(chatSessionService.getChatSessions).mockResolvedValue([session])
+        vi.mocked(chatSessionService.getChatSession).mockResolvedValue(graph)
+        vi.mocked(chatSessionService.getChatNode).mockResolvedValue(nodeDetail)
+        vi.mocked(llmService.getProviderModels).mockImplementation(async provider => ({
+            provider,
+            models: provider === 'openai'
+                ? [{ id: 'gpt-5.2', displayName: 'GPT-5.2' }]
+                : provider === 'claude'
+                    ? [{ id: 'claude-sonnet-4-20250514', displayName: 'Claude Sonnet 4' }]
+                    : [],
+        }))
+        vi.mocked(chatSessionService.sendChatNodeMessage).mockResolvedValue(initialState)
+
+        render(
+            <MemoryRouter initialEntries={['/']}>
+                <IndexPage />
+            </MemoryRouter>,
+        )
+
+        await screen.findByTestId('canvas-workspace')
+
+        await waitFor(() => {
+            expect(llmService.getProviderModels).toHaveBeenCalledWith('openai')
+            expect(llmService.getProviderModels).toHaveBeenCalledWith('claude')
+            expect(llmService.getProviderModels).toHaveBeenCalledWith('gemini')
+        })
+
+        expect(workspaceMock.latestProps?.nodes[0]?.data.modelOptions.map(option => option.modelId)).toEqual([
+            'gpt-5.2',
+            'claude-sonnet-4-20250514',
+            'gemini-2.5-pro',
+            'gemini-2.5-flash',
+            'gemini-3.1-flash-lite-preview',
+        ])
+
+        await user.click(screen.getByTestId('send-root-message'))
+        await waitFor(() => {
+            expect(chatSessionService.sendChatNodeMessage).toHaveBeenCalledWith(
+                301,
+                401,
+                'Build the first idea',
+                undefined,
+                'openai',
+                'gpt-4.1-mini',
+            )
+        })
+    })
+})
diff --git a/frontend/src/pages/Index.tsx b/frontend/src/pages/Index.tsx
new file mode 100644
index 0000000..0eda0b3
--- /dev/null
+++ b/frontend/src/pages/Index.tsx
@@ -0,0 +1,2566 @@
+import { startTransition, useEffect, useMemo, useRef, useState } from 'react'
+import { LogOut, Settings2 } from 'lucide-react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import toast from 'react-hot-toast'
+import type { LlmApiErrorResponse } from '@/services/llmService'
+import CanvasSidebar from '@/components/chat-canvas/CanvasSidebar'
+import CanvasWorkspace from '@/components/chat-canvas/CanvasWorkspace'
+import '@/components/chat-canvas/chat-canvas.css'
+import AuthModal, { type AuthModalMode } from '@/components/auth/AuthModal'
+import type {
+    ChatCanvasMessage,
+    ChatCanvasNodeDetail,
+    ChatCanvasNodeSummary,
+    ChatNodeType,
+    ChatSessionGraph,
+    ChatSessionState,
+    ChatSessionSummary,
+    LlmProviderId,
+    UpdateChatNodeInput,
+} from '@/types'
+import type {
+    ChatCanvasFlowEdge,
+    ChatCanvasFlowNode,
+    ChatCanvasMessageLike,
+} from '@/components/chat-canvas/types'
+import { useAppTheme } from '@/context/AppThemeContext'
+import { useAuth } from '@/context/AuthContext'
+import {
+    buildCanvasModelOptions,
+    DEFAULT_CANVAS_MODEL_SELECTION,
+    defaultModelForProvider,
+    inferProviderFromModel,
+} from '@/lib/modelCatalog'
+import {
+    createChatNode,
+    createChatSession,
+    deleteChatNode,
+    deleteChatSession,
+    generateChatNodeImage,
+    generateChatNodeNote,
+    getChatNode,
+    getChatSession,
+    getChatSessions,
+    importGuestCanvases,
+    moveChatNodeMessagesToBranch,
+    previewGuestChatAction,
+    renameChatSession,
+    saveChatLayout,
+    sendChatNodeMessage,
+    updateChatNodeMessage,
+    updateChatNode,
+    type ImportGuestCanvasInput,
+} from '@/services/chatSessionService'
+import { getLlmError, getProviderModels, getProviders } from '@/services/llmService'
+
+const GUEST_STORAGE_KEY = 'coliee-guest-state-v2'
+const LEGACY_GUEST_STORAGE_KEYS = ['coliee-frontned2-guest-state-v1']
+const DEFAULT_SESSION_TITLE = 'Untitled Canvas'
+const NEW_SESSION_TITLE = 'New Canvas'
+const ROOT_NODE_TITLE = 'Main Node'
+const EMPTY_AUTH_SESSION_ID = -1
+const EMPTY_AUTH_ROOT_NODE_ID = -1
+const NOTE_EXPANDED_WIDTH = 400
+const NOTE_EXPANDED_HEIGHT = 400
+const NOTE_COLLAPSED_WIDTH = 96
+const NOTE_COLLAPSED_HEIGHT = 96
+
+interface GuestCanvasMessage extends ChatCanvasMessageLike {
+    id: string
+}
+
+interface GuestCanvasNode {
+    id: string
+    parentNodeId: string | null
+    nodeType: ChatNodeType
+    title: string
+    preview: string
+    content: string
+    positionX: number
+    positionY: number
+    width: number
+    height: number
+    isCollapsed: boolean
+    expandedWidth: number | null
+    expandedHeight: number | null
+    preferredProvider: LlmProviderId | null
+    preferredModel: string | null
+    createdAt: string
+    updatedAt: string
+    messages: GuestCanvasMessage[]
+}
+
+interface GuestCanvas {
+    id: string
+    title: string
+    createdAt: string
+    updatedAt: string
+    rootNodeId: string
+    activeNodeId: string
+    nodes: GuestCanvasNode[]
+}
+
+interface StoredGuestState {
+    canvases: GuestCanvas[]
+    activeCanvasId: string
+    guestPreviewUsed: boolean
+}
+
+function createId(prefix: string): string {
+    if (typeof crypto !== 'undefined' && 'randomUUID' in crypto)
+        return `${prefix}-${crypto.randomUUID()}`
+
+    return `${prefix}-${Math.random().toString(36).slice(2, 10)}`
+}
+
+function sortSessions(items: ChatSessionSummary[]): ChatSessionSummary[] {
+    return [...items].sort((left, right) => (
+        new Date(right.updatedAt).getTime() - new Date(left.updatedAt).getTime()
+    ))
+}
+
+function upsertSession(items: ChatSessionSummary[], session: ChatSessionSummary): ChatSessionSummary[] {
+    return sortSessions([session, ...items.filter(item => item.id !== session.id)])
+}
+
+function flowNodeId(nodeId: string): string {
+    return `chat-node-${nodeId}`
+}
+
+function buildPreview(content: string): string {
+    const normalized = content.replace(/\s+/g, ' ').trim()
+    if (!normalized)
+        return ''
+
+    return normalized.length <= 180
+        ? normalized
+        : `${normalized.slice(0, 177).trimEnd()}...`
+}
+
+function resolveCollapsedNoteSize(width: number, height: number): { width: number; height: number } {
+    return {
+        width: Math.min(width, NOTE_COLLAPSED_WIDTH),
+        height: Math.min(height, NOTE_COLLAPSED_HEIGHT),
+    }
+}
+
+function normalizeGuestNode(node: GuestCanvasNode): GuestCanvasNode {
+    const expandedWidth = node.expandedWidth ?? node.width
+    const expandedHeight = node.expandedHeight ?? node.height
+
+    return {
+        ...node,
+        isCollapsed: node.isCollapsed ?? false,
+        expandedWidth,
+        expandedHeight,
+        width: node.isCollapsed ? (node.width > 0 ? node.width : resolveCollapsedNoteSize(expandedWidth, expandedHeight).width) : expandedWidth,
+        height: node.isCollapsed ? (node.height > 0 ? node.height : resolveCollapsedNoteSize(expandedWidth, expandedHeight).height) : expandedHeight,
+        messages: node.messages.map(normalizeGuestMessage),
+    }
+}
+
+function defaultNodeTitle(nodeType: ChatNodeType): string {
+    switch (nodeType) {
+        case 'response':
+            return 'AI response...'
+        case 'note':
+            return 'Note...'
+        default:
+            return 'New question...'
+    }
+}
+
+function deriveChildTitle(nodeType: ChatNodeType, seedContent?: string): string {
+    const normalizedSeed = seedContent?.replace(/\s+/g, ' ').trim()
+    if (!normalizedSeed)
+        return defaultNodeTitle(nodeType)
+
+    const maxLength = nodeType === 'note' ? 52 : 64
+    return normalizedSeed.length <= maxLength
+        ? normalizedSeed
+        : `${normalizedSeed.slice(0, maxLength - 3).trimEnd()}...`
+}
+
+function mergeSummaryIntoDetail(detail: ChatCanvasNodeDetail, summary: ChatCanvasNodeSummary): ChatCanvasNodeDetail {
+    return {
+        ...detail,
+        nodeId: summary.id,
+        parentNodeId: summary.parentNodeId,
+        branchFromMessageId: summary.branchFromMessageId,
+        nodeType: summary.nodeType,
+        title: summary.title,
+        preview: summary.preview,
+        content: summary.content,
+        positionX: summary.positionX,
+        positionY: summary.positionY,
+        width: summary.width,
+        height: summary.height,
+        isCollapsed: summary.isCollapsed,
+        expandedWidth: summary.expandedWidth,
+        expandedHeight: summary.expandedHeight,
+        preferredProvider: summary.preferredProvider,
+        preferredModel: summary.preferredModel,
+        createdAt: summary.createdAt,
+        updatedAt: summary.updatedAt,
+    }
+}
+
+function syncNodeDetails(
+    graph: ChatSessionGraph,
+    current: Record<number, ChatCanvasNodeDetail>,
+): Record<number, ChatCanvasNodeDetail> {
+    const next: Record<number, ChatCanvasNodeDetail> = {}
+
+    for (const summary of graph.nodes) {
+        const existing = current[summary.id]
+        if (existing)
+            next[summary.id] = mergeSummaryIntoDetail(existing, summary)
+    }
+
+    return next
+}
+
+function buildNodeDetailMap(graph: ChatSessionGraph, details: ChatCanvasNodeDetail[]): Record<number, ChatCanvasNodeDetail> {
+    const next: Record<number, ChatCanvasNodeDetail> = {}
+    for (const detail of details)
+        next[detail.nodeId] = detail
+
+    return syncNodeDetails(graph, next)
+}
+
+function resolveNodeSelection(node: { preferredProvider: LlmProviderId | null; preferredModel: string | null }): { provider: LlmProviderId; model: string } {
+    if (node.preferredProvider && node.preferredModel)
+        return { provider: node.preferredProvider, model: node.preferredModel }
+
+    if (node.preferredModel) {
+        const provider = inferProviderFromModel(node.preferredModel)
+        return { provider, model: node.preferredModel }
+    }
+
+    if (node.preferredProvider) {
+        return {
+            provider: node.preferredProvider,
+            model: defaultModelForProvider(node.preferredProvider),
+        }
+    }
+
+    return DEFAULT_CANVAS_MODEL_SELECTION
+}
+
+function createGuestMessage(
+    role: 'user' | 'assistant',
+    content: string,
+    imageUrl?: string | null,
+    provider?: LlmProviderId | null,
+    model?: string | null,
+): GuestCanvasMessage {
+    const now = new Date().toISOString()
+    return {
+        id: createId('guest-message'),
+        role,
+        content,
+        imageUrl: imageUrl ?? null,
+        provider: provider ?? null,
+        model: model ?? null,
+        createdAt: now,
+        updatedAt: now,
+        canBranch: role === 'assistant',
+    }
+}
+
+function normalizeGuestMessage(message: Partial<GuestCanvasMessage> & Pick<GuestCanvasMessage, 'id' | 'role' | 'content' | 'createdAt'>): GuestCanvasMessage {
+    const createdAt = message.createdAt ?? new Date().toISOString()
+    return {
+        id: message.id,
+        role: message.role,
+        content: message.content,
+        imageUrl: message.imageUrl ?? null,
+        provider: message.provider ?? null,
+        model: message.model ?? null,
+        createdAt,
+        updatedAt: message.updatedAt ?? createdAt,
+        canBranch: message.canBranch ?? message.role === 'assistant',
+    }
+}
+
+function createGuestRootNode(): GuestCanvasNode {
+    const now = new Date().toISOString()
+    return {
+        id: createId('guest-node'),
+        parentNodeId: null,
+        nodeType: 'question',
+        title: ROOT_NODE_TITLE,
+        preview: '',
+        content: '',
+        positionX: 400,
+        positionY: 300,
+        width: 600,
+        height: 520,
+        isCollapsed: false,
+        expandedWidth: 600,
+        expandedHeight: 520,
+        preferredProvider: DEFAULT_CANVAS_MODEL_SELECTION.provider,
+        preferredModel: DEFAULT_CANVAS_MODEL_SELECTION.model,
+        createdAt: now,
+        updatedAt: now,
+        messages: [],
+    }
+}
+
+function createGuestCanvas(title: string): GuestCanvas {
+    const rootNode = createGuestRootNode()
+    const now = new Date().toISOString()
+    return {
+        id: createId('guest-canvas'),
+        title,
+        createdAt: now,
+        updatedAt: now,
+        rootNodeId: rootNode.id,
+        activeNodeId: rootNode.id,
+        nodes: [rootNode],
+    }
+}
+
+function createEmptyAuthenticatedGraph(): ChatSessionGraph {
+    const now = new Date().toISOString()
+
+    return {
+        session: {
+            id: EMPTY_AUTH_SESSION_ID,
+            title: DEFAULT_SESSION_TITLE,
+            createdAt: now,
+            updatedAt: now,
+        },
+        defaultProvider: null,
+        availableProviders: [],
+        rootNodeId: EMPTY_AUTH_ROOT_NODE_ID,
+        activeNodeId: EMPTY_AUTH_ROOT_NODE_ID,
+        nodes: [
+            {
+                id: EMPTY_AUTH_ROOT_NODE_ID,
+                parentNodeId: null,
+                branchFromMessageId: null,
+                nodeType: 'question',
+                title: ROOT_NODE_TITLE,
+                preview: '',
+                content: '',
+                positionX: 400,
+                positionY: 300,
+                width: 600,
+                height: 520,
+                isCollapsed: false,
+                expandedWidth: 600,
+                expandedHeight: 520,
+                preferredProvider: DEFAULT_CANVAS_MODEL_SELECTION.provider,
+                preferredModel: DEFAULT_CANVAS_MODEL_SELECTION.model,
+                createdAt: now,
+                updatedAt: now,
+            },
+        ],
+    }
+}
+
+function createEmptyAuthenticatedNodeDetail(): ChatCanvasNodeDetail {
+    const now = new Date().toISOString()
+
+    return {
+        sessionId: EMPTY_AUTH_SESSION_ID,
+        nodeId: EMPTY_AUTH_ROOT_NODE_ID,
+        parentNodeId: null,
+        branchFromMessageId: null,
+        nodeType: 'question',
+        title: ROOT_NODE_TITLE,
+        preview: '',
+        content: '',
+        positionX: 400,
+        positionY: 300,
+        width: 600,
+        height: 520,
+        isCollapsed: false,
+        expandedWidth: 600,
+        expandedHeight: 520,
+        preferredProvider: DEFAULT_CANVAS_MODEL_SELECTION.provider,
+        preferredModel: DEFAULT_CANVAS_MODEL_SELECTION.model,
+        createdAt: now,
+        updatedAt: now,
+        localMessages: [],
+        resolvedMessages: [],
+    }
+}
+
+function readStoredGuestState(): StoredGuestState {
+    if (typeof window === 'undefined')
+        return {
+            canvases: [createGuestCanvas(DEFAULT_SESSION_TITLE)],
+            activeCanvasId: '',
+            guestPreviewUsed: false,
+        }
+
+    try {
+        const storage = window.localStorage
+        if (!storage || typeof storage.getItem !== 'function')
+            throw new Error('missing storage')
+
+        const raw = storage.getItem(GUEST_STORAGE_KEY)
+            ?? LEGACY_GUEST_STORAGE_KEYS
+                .map(key => storage.getItem(key))
+                .find(Boolean)
+        if (!raw)
+            throw new Error('missing guest state')
+
+        const parsed = JSON.parse(raw) as StoredGuestState
+        if (!Array.isArray(parsed.canvases) || parsed.canvases.length === 0)
+            throw new Error('invalid guest state')
+
+        const activeCanvasId = parsed.canvases.some(canvas => canvas.id === parsed.activeCanvasId)
+            ? parsed.activeCanvasId
+            : parsed.canvases[0].id
+
+        return {
+            canvases: parsed.canvases.map(canvas => ({
+                ...canvas,
+                nodes: canvas.nodes.map(normalizeGuestNode),
+            })),
+            activeCanvasId,
+            guestPreviewUsed: Boolean(parsed.guestPreviewUsed),
+        }
+    } catch {
+        const canvas = createGuestCanvas(DEFAULT_SESSION_TITLE)
+        return {
+            canvases: [canvas],
+            activeCanvasId: canvas.id,
+            guestPreviewUsed: false,
+        }
+    }
+}
+
+function persistGuestState(state: StoredGuestState) {
+    if (typeof window === 'undefined')
+        return
+
+    const storage = window.localStorage
+    if (!storage || typeof storage.setItem !== 'function')
+        return
+
+    storage.setItem(GUEST_STORAGE_KEY, JSON.stringify(state))
+}
+
+function clearGuestState() {
+    if (typeof window === 'undefined')
+        return
+
+    const storage = window.localStorage
+    if (!storage || typeof storage.removeItem !== 'function')
+        return
+
+    storage.removeItem(GUEST_STORAGE_KEY)
+    for (const legacyKey of LEGACY_GUEST_STORAGE_KEYS)
+        storage.removeItem(legacyKey)
+}
+
+function hasMeaningfulGuestState(canvases: GuestCanvas[]): boolean {
+    if (canvases.length > 1)
+        return true
+
+    const [firstCanvas] = canvases
+    if (!firstCanvas)
+        return false
+
+    if (firstCanvas.title !== DEFAULT_SESSION_TITLE)
+        return true
+
+    if (firstCanvas.nodes.length > 1)
+        return true
+
+    const [rootNode] = firstCanvas.nodes
+    return Boolean(
+        rootNode
+        && (
+            rootNode.content.trim()
+            || rootNode.messages.length > 0
+            || rootNode.title !== ROOT_NODE_TITLE
+        ),
+    )
+}
+
+function collectGuestDescendantIds(nodes: GuestCanvasNode[], nodeId: string): Set<string> {
+    const descendantIds = new Set<string>([nodeId])
+    let changed = true
+
+    while (changed) {
+        changed = false
+        for (const node of nodes) {
+            if (node.parentNodeId && descendantIds.has(node.parentNodeId) && !descendantIds.has(node.id)) {
+                descendantIds.add(node.id)
+                changed = true
+            }
+        }
+    }
+
+    return descendantIds
+}
+
+function calculateGeneratedNoteHeight(content: string): number {
+    const lines = Math.max(4, Math.ceil(content.length / 70))
+    return lines * 37.8 + 160
+}
+
+function calculateLoadingNoteHeight(): number {
+    return 400
+}
+
+function resolveGuestNodePosition(parentNode: GuestCanvasNode, nodeType: ChatNodeType, existingNodes: GuestCanvasNode[]): { x: number; y: number } {
+    const collisionWidth = 600
+    const collisionHeight = 520
+    const isColliding = (candidateX: number, candidateY: number) => existingNodes.some(node => (
+        !(candidateX + collisionWidth < node.positionX
+            || candidateX > node.positionX + node.width + 60
+            || candidateY + collisionHeight < node.positionY
+            || candidateY > node.positionY + node.height + 60)
+    ))
+
+    if (nodeType === 'note') {
+        const candidateX = parentNode.positionX + parentNode.width + 40
+        const candidateY = parentNode.positionY
+        if (!isColliding(candidateX, candidateY))
+            return { x: candidateX, y: candidateY }
+
+        return { x: candidateX, y: candidateY + 100 }
+    }
+
+    const nextX = parentNode.positionX + 20
+    let nextY = parentNode.positionY + 450
+    let tier = 0
+    while (isColliding(nextX, nextY) && tier < 10) {
+        for (const offset of [-1, 1]) {
+            const candidateX = nextX + (offset * collisionWidth)
+            if (!isColliding(candidateX, nextY))
+                return { x: candidateX, y: nextY }
+        }
+
+        nextY += collisionHeight - 100
+        tier++
+    }
+
+    return { x: nextX, y: nextY }
+}
+
+function mapGuestCanvasForImport(canvas: GuestCanvas): ImportGuestCanvasInput {
+    return {
+        tempId: canvas.id,
+        name: canvas.title,
+        nodes: canvas.nodes.map(node => ({
+            tempId: node.id,
+            parentTempId: node.parentNodeId,
+            nodeType: node.nodeType,
+            title: node.title,
+            content: node.content,
+            positionX: node.positionX,
+            positionY: node.positionY,
+            width: node.width,
+            height: node.height,
+            isCollapsed: node.isCollapsed,
+            expandedWidth: node.expandedWidth,
+            expandedHeight: node.expandedHeight,
+            preferredProvider: node.preferredProvider,
+            preferredModel: node.preferredModel,
+            messages: node.messages.map(message => ({
+                role: message.role,
+                content: message.content,
+                imageUrl: message.imageUrl,
+                provider: message.provider,
+                model: message.model,
+            })),
+        })),
+    }
+}
+
+function extractNumericId(id: string | null | undefined): number | null {
+    if (!id)
+        return null
+
+    const parsed = Number(id)
+    return Number.isFinite(parsed) ? parsed : null
+}
+
+function createLoadingNoteNode(
+    id: number,
+    parentNodeId: number,
+    positionX: number,
+    positionY: number,
+    preferredProvider: LlmProviderId,
+    preferredModel: string,
+): ChatCanvasNodeSummary {
+    const now = new Date().toISOString()
+
+    return {
+        id,
+        parentNodeId,
+        branchFromMessageId: null,
+        nodeType: 'note',
+        title: 'AI Summary',
+        preview: '',
+        content: '',
+        positionX,
+        positionY,
+        width: 600,
+        height: calculateLoadingNoteHeight(),
+        isCollapsed: false,
+        expandedWidth: 600,
+        expandedHeight: calculateLoadingNoteHeight(),
+        preferredProvider,
+        preferredModel,
+        createdAt: now,
+        updatedAt: now,
+    }
+}
+
+export default function IndexPage() {
+    const navigate = useNavigate()
+    const location = useLocation()
+    const { user, logout, isAuthenticated } = useAuth()
+    const { theme, setTheme } = useAppTheme()
+    const initialGuestStateRef = useRef<StoredGuestState | null>(null)
+    if (!initialGuestStateRef.current)
+        initialGuestStateRef.current = readStoredGuestState()
+
+    const [guestCanvases, setGuestCanvases] = useState<GuestCanvas[]>(initialGuestStateRef.current.canvases)
+    const [guestActiveCanvasId, setGuestActiveCanvasId] = useState<string>(initialGuestStateRef.current.activeCanvasId)
+    const [guestPreviewUsed, setGuestPreviewUsed] = useState<boolean>(initialGuestStateRef.current.guestPreviewUsed)
+
+    const [sessions, setSessions] = useState<ChatSessionSummary[]>([])
+    const [activeSessionId, setActiveSessionId] = useState<number | null>(null)
+    const [graph, setGraph] = useState<ChatSessionGraph | null>(null)
+    const [nodeDetails, setNodeDetails] = useState<Record<number, ChatCanvasNodeDetail>>({})
+    const [configuredProviders, setConfiguredProviders] = useState<LlmProviderId[]>([])
+    const [providerModelsByProvider, setProviderModelsByProvider] = useState<Record<LlmProviderId, Array<{ id: string; displayName: string | null }>>>({
+        openai: [],
+        claude: [],
+        gemini: [],
+        lmstudio: [],
+    })
+    const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null)
+    const [loadingInitial, setLoadingInitial] = useState(true)
+    const [loadingCanvas, setLoadingCanvas] = useState(false)
+    const [creatingSession, setCreatingSession] = useState(false)
+    const [importingGuest, setImportingGuest] = useState(false)
+    const [pageError, setPageError] = useState('')
+    const [pendingNodeIds, setPendingNodeIds] = useState<string[]>([])
+    const [chatReplyPendingNodeIds, setChatReplyPendingNodeIds] = useState<string[]>([])
+    const notePatchTimersRef = useRef<Record<number, number>>({})
+    const notePatchPayloadsRef = useRef<Record<number, UpdateChatNodeInput>>({})
+    const nextTemporaryNodeIdRef = useRef(-1)
+    const optimisticAuthMessageIdRef = useRef(-500_000_000)
+    const guestImportAttemptedRef = useRef(false)
+
+    const pendingNodeSet = useMemo(() => new Set(pendingNodeIds), [pendingNodeIds])
+    const chatReplyPendingSet = useMemo(() => new Set(chatReplyPendingNodeIds), [chatReplyPendingNodeIds])
+    const modalMode = useMemo<AuthModalMode | null>(() => {
+        if (location.pathname === '/login')
+            return 'login'
+        if (location.pathname === '/register')
+            return 'register'
+        return null
+    }, [location.pathname])
+
+    const activeGuestCanvas = useMemo(
+        () => guestCanvases.find(canvas => canvas.id === guestActiveCanvasId) ?? guestCanvases[0] ?? null,
+        [guestActiveCanvasId, guestCanvases],
+    )
+
+    useEffect(() => {
+        if (isAuthenticated)
+            return
+
+        if (guestCanvases.length === 0) {
+            const blankCanvas = createGuestCanvas(DEFAULT_SESSION_TITLE)
+            setGuestCanvases([blankCanvas])
+            setGuestActiveCanvasId(blankCanvas.id)
+            return
+        }
+
+        persistGuestState({
+            canvases: guestCanvases,
+            activeCanvasId: activeGuestCanvas?.id ?? guestCanvases[0].id,
+            guestPreviewUsed,
+        })
+    }, [activeGuestCanvas, guestCanvases, guestPreviewUsed, isAuthenticated])
+
+    useEffect(() => {
+        if (!isAuthenticated) {
+            guestImportAttemptedRef.current = false
+            setSessions([])
+            setActiveSessionId(null)
+            setGraph(null)
+            setNodeDetails({})
+            setConfiguredProviders([])
+            setSelectedNodeId(activeGuestCanvas?.activeNodeId ?? null)
+            setLoadingInitial(false)
+            setLoadingCanvas(false)
+            setCreatingSession(false)
+            setImportingGuest(false)
+            return
+        }
+
+        if (modalMode)
+            navigate('/', { replace: true })
+    }, [activeGuestCanvas?.activeNodeId, isAuthenticated, modalMode, navigate])
+
+    useEffect(() => {
+        if (!isAuthenticated) {
+            setConfiguredProviders([])
+            setProviderModelsByProvider({
+                openai: [],
+                claude: [],
+                gemini: [],
+                lmstudio: [],
+            })
+            return
+        }
+
+        let active = true
+
+        void (async () => {
+            try {
+                const providerList = await getProviders()
+                if (!active)
+                    return
+
+                setConfiguredProviders(providerList.providers.filter(item => item.configured).map(item => item.provider))
+            } catch {
+                if (!active)
+                    return
+
+                setConfiguredProviders([])
+            }
+        })()
+
+        return () => {
+            active = false
+        }
+    }, [isAuthenticated])
+
+    useEffect(() => {
+        if (!isAuthenticated)
+            return
+
+        const providersToLoad = configuredProviders.length > 0
+            ? configuredProviders
+            : graph?.availableProviders ?? []
+
+        if (providersToLoad.length === 0)
+            return
+
+        let active = true
+
+        void (async () => {
+            const entries = await Promise.all(
+                providersToLoad.map(async provider => {
+                    try {
+                        const response = await getProviderModels(provider)
+                        return [provider, response.models] as const
+                    } catch {
+                        return [provider, []] as const
+                    }
+                }),
+            )
+
+            if (!active)
+                return
+
+            setProviderModelsByProvider(current => ({
+                ...current,
+                ...Object.fromEntries(entries),
+            }))
+        })()
+
+        return () => {
+            active = false
+        }
+    }, [configuredProviders, graph, isAuthenticated])
+
+    useEffect(() => () => {
+        for (const timer of Object.values(notePatchTimersRef.current))
+            window.clearTimeout(timer)
+    }, [])
+
+    function markNodePending(nodeId: string, isPending: boolean) {
+        setPendingNodeIds(current => {
+            if (isPending)
+                return current.includes(nodeId) ? current : [...current, nodeId]
+
+            return current.filter(item => item !== nodeId)
+        })
+    }
+
+    function pushChatReplyPending(nodeId: string) {
+        setChatReplyPendingNodeIds(current => (
+            current.includes(nodeId) ? current : [...current, nodeId]
+        ))
+    }
+
+    function popChatReplyPending(nodeId: string) {
+        setChatReplyPendingNodeIds(current => current.filter(id => id !== nodeId))
+    }
+
+    function appendOptimisticAuthUserMessage(numericNodeId: number, text: string, imageUrl?: string | null) {
+        optimisticAuthMessageIdRef.current -= 1
+        const tempId = optimisticAuthMessageIdRef.current
+        const now = new Date().toISOString()
+        const msg: ChatCanvasMessage = {
+            id: tempId,
+            nodeId: numericNodeId,
+            role: 'user',
+            content: text,
+            imageUrl: imageUrl ?? null,
+            provider: null,
+            model: null,
+            createdAt: now,
+            updatedAt: now,
+            canBranch: false,
+        }
+
+        setNodeDetails(current => {
+            const existing = current[numericNodeId]
+            if (!existing)
+                return current
+
+            return {
+                ...current,
+                [numericNodeId]: {
+                    ...existing,
+                    localMessages: [...existing.localMessages, msg],
+                    resolvedMessages: [...existing.resolvedMessages, msg],
+                    updatedAt: now,
+                },
+            }
+        })
+    }
+
+    function stripOptimisticAuthMessagesForNode(numericNodeId: number) {
+        setNodeDetails(current => {
+            const existing = current[numericNodeId]
+            if (!existing)
+                return current
+
+            const keep = (m: ChatCanvasMessage) => typeof m.id !== 'number' || m.id >= 0
+
+            return {
+                ...current,
+                [numericNodeId]: {
+                    ...existing,
+                    localMessages: existing.localMessages.filter(keep),
+                    resolvedMessages: existing.resolvedMessages.filter(keep),
+                },
+            }
+        })
+    }
+
+    function allocateTemporaryNodeId() {
+        const next = nextTemporaryNodeIdRef.current
+        nextTemporaryNodeIdRef.current -= 1
+        return next
+    }
+
+    function applyGraphOnly(nextGraph: ChatSessionGraph) {
+        setGraph(nextGraph)
+        setSessions(current => upsertSession(current, nextGraph.session))
+        setNodeDetails(current => syncNodeDetails(nextGraph, current))
+        setSelectedNodeId(current => (
+            current !== null && nextGraph.nodes.some(node => String(node.id) === current)
+                ? current
+                : String(nextGraph.activeNodeId)
+        ))
+        setActiveSessionId(nextGraph.session.id)
+        setPageError('')
+    }
+
+    function applyStateResponse(response: ChatSessionState) {
+        setGraph(response.graph)
+        setSessions(current => upsertSession(current, response.graph.session))
+        setNodeDetails(current => {
+            const next = syncNodeDetails(response.graph, current)
+            next[response.node.nodeId] = response.node
+            return next
+        })
+        setSelectedNodeId(String(response.node.nodeId))
+        setActiveSessionId(response.graph.session.id)
+        setPageError('')
+    }
+
+    function updateNodeLocally(nodeId: number, patch: Partial<ChatCanvasNodeDetail>) {
+        const now = new Date().toISOString()
+
+        setNodeDetails(current => {
+            const existing = current[nodeId]
+            if (!existing)
+                return current
+
+            return {
+                ...current,
+                [nodeId]: {
+                    ...existing,
+                    ...patch,
+                    preview: typeof patch.content === 'string' ? buildPreview(patch.content) : existing.preview,
+                    updatedAt: now,
+                },
+            }
+        })
+
+        setGraph(current => {
+            if (!current)
+                return current
+
+            return {
+                ...current,
+                session: { ...current.session, updatedAt: now },
+                nodes: current.nodes.map(node => (
+                    node.id === nodeId
+                        ? {
+                            ...node,
+                            ...('title' in patch ? { title: patch.title ?? node.title } : {}),
+                            ...('content' in patch ? { content: patch.content ?? node.content, preview: buildPreview(patch.content ?? '') } : {}),
+                            ...('positionX' in patch ? { positionX: patch.positionX ?? node.positionX } : {}),
+                            ...('positionY' in patch ? { positionY: patch.positionY ?? node.positionY } : {}),
+                            ...('width' in patch ? { width: patch.width ?? node.width } : {}),
+                            ...('height' in patch ? { height: patch.height ?? node.height } : {}),
+                            ...('isCollapsed' in patch ? { isCollapsed: patch.isCollapsed ?? node.isCollapsed } : {}),
+                            ...('expandedWidth' in patch ? { expandedWidth: patch.expandedWidth ?? node.expandedWidth } : {}),
+                            ...('expandedHeight' in patch ? { expandedHeight: patch.expandedHeight ?? node.expandedHeight } : {}),
+                            ...('preferredProvider' in patch ? { preferredProvider: patch.preferredProvider ?? node.preferredProvider } : {}),
+                            ...('preferredModel' in patch ? { preferredModel: patch.preferredModel ?? node.preferredModel } : {}),
+                            updatedAt: now,
+                        }
+                        : node
+                )),
+            }
+        })
+    }
+
+    function updateGuestCanvas(canvasId: string, updater: (canvas: GuestCanvas) => GuestCanvas) {
+        setGuestCanvases(current => current.map(canvas => (
+            canvas.id === canvasId
+                ? updater(canvas)
+                : canvas
+        )))
+    }
+
+    function updateGuestNode(nodeId: string, updater: (node: GuestCanvasNode) => GuestCanvasNode) {
+        if (!activeGuestCanvas)
+            return
+
+        updateGuestCanvas(activeGuestCanvas.id, canvas => ({
+            ...canvas,
+            updatedAt: new Date().toISOString(),
+            nodes: canvas.nodes.map(node => (
+                node.id === nodeId
+                    ? updater(node)
+                    : node
+            )),
+        }))
+    }
+
+    function scheduleNotePatch(sessionId: number, nodeId: number, patch: UpdateChatNodeInput) {
+        notePatchPayloadsRef.current[nodeId] = {
+            ...notePatchPayloadsRef.current[nodeId],
+            ...patch,
+        }
+
+        const currentTimer = notePatchTimersRef.current[nodeId]
+        if (currentTimer)
+            window.clearTimeout(currentTimer)
+
+        notePatchTimersRef.current[nodeId] = window.setTimeout(async () => {
+            const payload = notePatchPayloadsRef.current[nodeId]
+            delete notePatchPayloadsRef.current[nodeId]
+            delete notePatchTimersRef.current[nodeId]
+
+            try {
+                const response = await updateChatNode(sessionId, nodeId, payload)
+                applyStateResponse(response)
+            } catch (error) {
+                toast.error(getLlmError(error).message)
+            }
+        }, 500)
+    }
+
+    async function runNodeAction(nodeId: string, action: () => Promise<void>) {
+        markNodePending(nodeId, true)
+        try {
+            await action()
+        } finally {
+            markNodePending(nodeId, false)
+        }
+    }
+
+    function createBlankAuthenticatedCanvas() {
+        const blankGraph = createEmptyAuthenticatedGraph()
+        const blankNode = createEmptyAuthenticatedNodeDetail()
+
+        startTransition(() => {
+            setGraph(blankGraph)
+            setNodeDetails({ [blankNode.nodeId]: blankNode })
+            setSelectedNodeId(String(blankNode.nodeId))
+            setActiveSessionId(null)
+            setPageError('')
+        })
+    }
+
+    async function bootstrapEmptyAuthenticatedSession(nodeId: string, text: string): Promise<boolean> {
+        if (!graph || graph.session.id !== EMPTY_AUTH_SESSION_ID || !text.trim())
+            return false
+
+        const numericNodeId = extractNumericId(nodeId)
+        if (!numericNodeId)
+            return false
+
+        const nodeSource = nodeDetails[numericNodeId] ?? graph.nodes.find(node => node.id === numericNodeId)
+        if (!nodeSource)
+            return false
+
+        const selection = resolveNodeSelection(nodeSource)
+        let succeeded = false
+
+        appendOptimisticAuthUserMessage(numericNodeId, text.trim(), null)
+        try {
+            pushChatReplyPending(nodeId)
+            await runNodeAction(nodeId, async () => {
+                try {
+                    const response = await createChatSession({
+                        content: text,
+                        providerOverride: selection.provider,
+                        modelOverride: selection.model,
+                    })
+                    applyStateResponse(response)
+                    succeeded = true
+                } catch (error) {
+                    toast.error(getLlmError(error).message)
+                    stripOptimisticAuthMessagesForNode(numericNodeId)
+                }
+            })
+        } finally {
+            popChatReplyPending(nodeId)
+        }
+
+        return succeeded
+    }
+
+    useEffect(() => {
+        if (!isAuthenticated || guestImportAttemptedRef.current)
+            return
+
+        if (!hasMeaningfulGuestState(guestCanvases))
+            return
+
+        let active = true
+        guestImportAttemptedRef.current = true
+        setImportingGuest(true)
+
+        void (async () => {
+            try {
+                const response = await importGuestCanvases({
+                    activeCanvasId: guestActiveCanvasId,
+                    canvases: guestCanvases.map(mapGuestCanvasForImport),
+                })
+                if (!active)
+                    return
+
+                const sessionsResponse = await getChatSessions()
+                if (!active)
+                    return
+
+                applyStateResponse(response)
+                setSessions(sortSessions(sessionsResponse))
+                const blankCanvas = createGuestCanvas(DEFAULT_SESSION_TITLE)
+                setGuestCanvases([blankCanvas])
+                setGuestActiveCanvasId(blankCanvas.id)
+                setGuestPreviewUsed(false)
+                clearGuestState()
+                toast.success('Guest canvas imported into your account.')
+            } catch (error) {
+                guestImportAttemptedRef.current = false
+                if (!active)
+                    return
+
+                const llmError = getLlmError(error)
+                setPageError(llmError.message)
+                toast.error(llmError.message)
+            } finally {
+                if (active)
+                    setImportingGuest(false)
+            }
+        })()
+
+        return () => {
+            active = false
+        }
+    }, [guestActiveCanvasId, guestCanvases, isAuthenticated])
+
+    useEffect(() => {
+        if (!isAuthenticated || importingGuest)
+            return
+
+        if (graph?.session.id === EMPTY_AUTH_SESSION_ID && activeSessionId === null && sessions.length > 0)
+            return
+
+        let isActive = true
+
+        async function loadInitialData() {
+            setLoadingInitial(true)
+            setPageError('')
+
+            try {
+                const sessionsResponse = await getChatSessions()
+                if (!isActive)
+                    return
+
+                const sortedSessions = sortSessions(sessionsResponse)
+                setSessions(sortedSessions)
+
+                if (sortedSessions.length === 0) {
+                    const emptyGraph = createEmptyAuthenticatedGraph()
+                    const emptyNode = createEmptyAuthenticatedNodeDetail()
+                    setGraph(emptyGraph)
+                    setNodeDetails({ [EMPTY_AUTH_ROOT_NODE_ID]: emptyNode })
+                    setSelectedNodeId(String(EMPTY_AUTH_ROOT_NODE_ID))
+                    setActiveSessionId(null)
+                } else if (
+                    (!activeSessionId || !sortedSessions.some(session => session.id === activeSessionId))
+                    && graph?.session.id !== EMPTY_AUTH_SESSION_ID
+                ) {
+                    setActiveSessionId(sortedSessions[0].id)
+                }
+            } catch (error) {
+                if (!isActive)
+                    return
+
+                setPageError(getLlmError(error).message)
+            } finally {
+                if (isActive)
+                    setLoadingInitial(false)
+            }
+        }
+
+        void loadInitialData()
+
+        return () => {
+            isActive = false
+        }
+    }, [activeSessionId, graph?.session.id, importingGuest, isAuthenticated, sessions.length])
+
+    useEffect(() => {
+        if (!isAuthenticated || !activeSessionId)
+            return
+
+        if (graph?.session.id === activeSessionId && Object.keys(nodeDetails).length > 0)
+            return
+
+        let isActive = true
+
+        async function loadSession(sessionId: number) {
+            setLoadingCanvas(true)
+            setPageError('')
+
+            try {
+                const graphResponse = await getChatSession(sessionId)
+                if (!isActive)
+                    return
+
+                const detailResponses = await Promise.all(
+                    graphResponse.nodes.map(node => getChatNode(sessionId, node.id)),
+                )
+                if (!isActive)
+                    return
+
+                setGraph(graphResponse)
+                setNodeDetails(buildNodeDetailMap(graphResponse, detailResponses))
+                setSelectedNodeId(String(graphResponse.activeNodeId))
+                setSessions(current => upsertSession(current, graphResponse.session))
+            } catch (error) {
+                if (!isActive)
+                    return
+
+                const message = getLlmError(error).message
+                setPageError(message)
+
+                const remaining = sessions.filter(session => session.id !== sessionId)
+                if (message.toLowerCase().includes('not found')) {
+                    setSessions(remaining)
+                    if (remaining.length > 0) {
+                        startTransition(() => {
+                            setGraph(null)
+                            setNodeDetails({})
+                            setSelectedNodeId(null)
+                            setActiveSessionId(remaining[0].id)
+                        })
+                    }
+                }
+            } finally {
+                if (isActive)
+                    setLoadingCanvas(false)
+            }
+        }
+
+        void loadSession(activeSessionId)
+
+        return () => {
+            isActive = false
+        }
+    }, [activeSessionId, graph?.session.id, isAuthenticated, nodeDetails, sessions])
+
+    function openAuthModal(mode: AuthModalMode) {
+        navigate(mode === 'login' ? '/login' : '/register')
+    }
+
+    function closeAuthModal() {
+        navigate('/')
+    }
+
+    function requireAuthentication() {
+        toast.error('Sign in to continue with AI actions.')
+        navigate('/login')
+    }
+
+    async function runGuestPreviewAction(
+        request: Parameters<typeof previewGuestChatAction>[0],
+    ) {
+        if (guestPreviewUsed) {
+            requireAuthentication()
+            return null
+        }
+
+        try {
+            const response = await previewGuestChatAction(request)
+            setGuestPreviewUsed(true)
+            return response
+        } catch (error) {
+            const llmError: LlmApiErrorResponse = getLlmError(error)
+            if (llmError.code === 'auth_required') {
+                setGuestPreviewUsed(true)
+                requireAuthentication()
+                return null
+            }
+
+            toast.error(llmError.message)
+            return null
+        }
+    }
+
+    async function handleCreateCanvas() {
+        if (isAuthenticated) {
+            createBlankAuthenticatedCanvas()
+            return
+        }
+
+        const canvas = createGuestCanvas(NEW_SESSION_TITLE)
+        setGuestCanvases(current => [...current, canvas])
+        setGuestActiveCanvasId(canvas.id)
+    }
+
+    async function handleRenameCanvas(canvasId: string, title: string) {
+        if (isAuthenticated) {
+            const sessionId = extractNumericId(canvasId)
+            if (!sessionId)
+                return
+
+            try {
+                const response = await renameChatSession(sessionId, title)
+                setSessions(current => upsertSession(current, response))
+                setGraph(current => current && current.session.id === sessionId
+                    ? { ...current, session: response }
+                    : current)
+            } catch (error) {
+                toast.error(getLlmError(error).message)
+            }
+            return
+        }
+
+        updateGuestCanvas(canvasId, canvas => ({
+            ...canvas,
+            title,
+            updatedAt: new Date().toISOString(),
+        }))
+    }
+
+    async function handleDeleteCanvas(canvasId: string) {
+        if (isAuthenticated) {
+            if (sessions.length <= 1)
+                return
+
+            const sessionId = extractNumericId(canvasId)
+            if (!sessionId)
+                return
+
+            try {
+                await deleteChatSession(sessionId)
+                const remaining = sessions.filter(item => item.id !== sessionId)
+                setSessions(remaining)
+
+                if (activeSessionId === sessionId) {
+                    startTransition(() => {
+                        setGraph(null)
+                        setNodeDetails({})
+                        setSelectedNodeId(null)
+                        setActiveSessionId(remaining[0]?.id ?? null)
+                    })
+                }
+            } catch (error) {
+                toast.error(getLlmError(error).message)
+            }
+            return
+        }
+
+        if (guestCanvases.length <= 1)
+            return
+
+        const remaining = guestCanvases.filter(canvas => canvas.id !== canvasId)
+        setGuestCanvases(remaining)
+        if (guestActiveCanvasId === canvasId)
+            setGuestActiveCanvasId(remaining[0]?.id ?? '')
+    }
+
+    async function handleCreateChildNode(parentNodeId: string, nodeType: ChatNodeType, seedContent?: string) {
+        if (isAuthenticated) {
+            if (!activeSessionId || !graph)
+                return
+
+            const numericParentId = extractNumericId(parentNodeId)
+            if (!numericParentId)
+                return
+
+            const parentSource = nodeDetails[numericParentId] ?? graph.nodes.find(node => node.id === numericParentId)
+            if (!parentSource)
+                return
+
+            const modelSelection = resolveNodeSelection(parentSource)
+
+            await runNodeAction(parentNodeId, async () => {
+                try {
+                    const response = await createChatNode(activeSessionId, {
+                        parentNodeId: numericParentId,
+                        nodeType,
+                        title: deriveChildTitle(nodeType, seedContent),
+                        content: nodeType === 'note' ? seedContent ?? '' : '',
+                        preferredProvider: modelSelection.provider,
+                        preferredModel: modelSelection.model,
+                    })
+                    applyStateResponse(response)
+                } catch (error) {
+                    toast.error(getLlmError(error).message)
+                }
+            })
+            return
+        }
+
+        if (!activeGuestCanvas)
+            return
+
+        const parentNode = activeGuestCanvas.nodes.find(node => node.id === parentNodeId)
+        if (!parentNode)
+            return
+
+        const now = new Date().toISOString()
+        const selection = resolveNodeSelection(parentNode)
+        const position = resolveGuestNodePosition(parentNode, nodeType, activeGuestCanvas.nodes)
+        const content = nodeType === 'note' ? seedContent ?? '' : ''
+        const width = nodeType === 'note' ? NOTE_EXPANDED_WIDTH : 600
+        const height = nodeType === 'note' ? NOTE_EXPANDED_HEIGHT : 520
+
+        const newNode: GuestCanvasNode = {
+            id: createId('guest-node'),
+            parentNodeId,
+            nodeType,
+            title: deriveChildTitle(nodeType, seedContent),
+            preview: buildPreview(content),
+            content,
+            positionX: position.x,
+            positionY: position.y,
+            width,
+            height,
+            isCollapsed: false,
+            expandedWidth: nodeType === 'note' ? width : null,
+            expandedHeight: nodeType === 'note' ? height : null,
+            preferredProvider: selection.provider,
+            preferredModel: selection.model,
+            createdAt: now,
+            updatedAt: now,
+            messages: [],
+        }
+
+        updateGuestCanvas(activeGuestCanvas.id, canvas => ({
+            ...canvas,
+            updatedAt: now,
+            activeNodeId: newNode.id,
+            nodes: [...canvas.nodes, newNode],
+        }))
+        setSelectedNodeId(newNode.id)
+    }
+
+    async function handleRenameNode(nodeId: string, title: string) {
+        if (isAuthenticated) {
+            if (!activeSessionId)
+                return
+
+            const numericNodeId = extractNumericId(nodeId)
+            if (!numericNodeId)
+                return
+
+            updateNodeLocally(numericNodeId, { title })
+
+            try {
+                const response = await updateChatNode(activeSessionId, numericNodeId, { title })
+                applyStateResponse(response)
+            } catch (error) {
+                toast.error(getLlmError(error).message)
+            }
+            return
+        }
+
+        updateGuestNode(nodeId, node => ({
+            ...node,
+            title,
+            updatedAt: new Date().toISOString(),
+        }))
+    }
+
+    function handleUpdateNodeContent(nodeId: string, content: string) {
+        if (isAuthenticated) {
+            if (!activeSessionId)
+                return
+
+            const numericNodeId = extractNumericId(nodeId)
+            if (!numericNodeId)
+                return
+
+            updateNodeLocally(numericNodeId, { content })
+            scheduleNotePatch(activeSessionId, numericNodeId, { content })
+            return
+        }
+
+        updateGuestNode(nodeId, node => ({
+            ...node,
+            content,
+            preview: buildPreview(content),
+            updatedAt: new Date().toISOString(),
+        }))
+    }
+
+    async function handleProviderModelChange(nodeId: string, provider: LlmProviderId, model: string) {
+        if (isAuthenticated) {
+            if (!activeSessionId)
+                return
+
+            const numericNodeId = extractNumericId(nodeId)
+            if (!numericNodeId)
+                return
+
+            updateNodeLocally(numericNodeId, {
+                preferredProvider: provider,
+                preferredModel: model,
+            })
+
+            try {
+                const response = await updateChatNode(activeSessionId, numericNodeId, {
+                    preferredProvider: provider,
+                    preferredModel: model,
+                })
+                applyStateResponse(response)
+            } catch (error) {
+                toast.error(getLlmError(error).message)
+            }
+            return
+        }
+
+        updateGuestNode(nodeId, node => ({
+            ...node,
+            preferredProvider: provider,
+            preferredModel: model,
+            updatedAt: new Date().toISOString(),
+        }))
+    }
+
+    async function handleResizeNode(nodeId: string, width: number, height: number) {
+        if (isAuthenticated) {
+            if (!activeSessionId)
+                return
+
+            const numericNodeId = extractNumericId(nodeId)
+            if (!numericNodeId)
+                return
+
+            const nodeSource = nodeDetails[numericNodeId] ?? graph?.nodes.find(node => node.id === numericNodeId)
+            const nextPatch: UpdateChatNodeInput = { width, height }
+            if (nodeSource?.nodeType === 'note') {
+                nextPatch.expandedWidth = width
+                nextPatch.expandedHeight = height
+            }
+
+            updateNodeLocally(numericNodeId, nextPatch)
+
+            try {
+                const response = await updateChatNode(activeSessionId, numericNodeId, nextPatch)
+                applyStateResponse(response)
+            } catch (error) {
+                toast.error(getLlmError(error).message)
+            }
+            return
+        }
+
+        updateGuestNode(nodeId, node => ({
+            ...node,
+            width,
+            height,
+            expandedWidth: node.nodeType === 'note' ? width : node.expandedWidth,
+            expandedHeight: node.nodeType === 'note' ? height : node.expandedHeight,
+            updatedAt: new Date().toISOString(),
+        }))
+    }
+
+    async function handleToggleNodeCollapse(nodeId: string) {
+        if (isAuthenticated) {
+            if (!activeSessionId)
+                return
+
+            const numericNodeId = extractNumericId(nodeId)
+            if (!numericNodeId)
+                return
+
+            const nodeSource = nodeDetails[numericNodeId] ?? graph?.nodes.find(node => node.id === numericNodeId)
+            if (!nodeSource || nodeSource.nodeType !== 'note')
+                return
+
+            const nextCollapsed = !nodeSource.isCollapsed
+            const expandedWidth = nodeSource.expandedWidth ?? nodeSource.width
+            const expandedHeight = nodeSource.expandedHeight ?? nodeSource.height
+            const collapsedSize = resolveCollapsedNoteSize(expandedWidth, expandedHeight)
+            const nextWidth = nextCollapsed ? collapsedSize.width : expandedWidth
+            const nextHeight = nextCollapsed ? collapsedSize.height : expandedHeight
+
+            const nextPatch: UpdateChatNodeInput = {
+                isCollapsed: nextCollapsed,
+                width: nextWidth,
+                height: nextHeight,
+                expandedWidth,
+                expandedHeight,
+            }
+
+            updateNodeLocally(numericNodeId, nextPatch)
+
+            try {
+                const response = await updateChatNode(activeSessionId, numericNodeId, nextPatch)
+                applyStateResponse(response)
+            } catch (error) {
+                toast.error(getLlmError(error).message)
+            }
+            return
+        }
+
+        updateGuestNode(nodeId, node => {
+            const nextCollapsed = !node.isCollapsed
+            const expandedWidth = node.expandedWidth ?? node.width
+            const expandedHeight = node.expandedHeight ?? node.height
+            const collapsedSize = resolveCollapsedNoteSize(expandedWidth, expandedHeight)
+
+            return {
+                ...node,
+                isCollapsed: nextCollapsed,
+                width: nextCollapsed ? collapsedSize.width : expandedWidth,
+                height: nextCollapsed ? collapsedSize.height : expandedHeight,
+                expandedWidth,
+                expandedHeight,
+                updatedAt: new Date().toISOString(),
+            }
+        })
+    }
+
+    async function handleSaveNodePosition(nodeId: string, positionX: number, positionY: number) {
+        if (isAuthenticated) {
+            if (!activeSessionId || !graph)
+                return
+
+            const numericNodeId = extractNumericId(nodeId)
+            if (!numericNodeId)
+                return
+
+            updateNodeLocally(numericNodeId, { positionX, positionY })
+
+            try {
+                const response = await saveChatLayout(
+                    activeSessionId,
+                    [{ nodeId: numericNodeId, positionX, positionY }],
+                    extractNumericId(selectedNodeId) ?? graph.activeNodeId,
+                )
+                applyGraphOnly(response)
+            } catch (error) {
+                toast.error(getLlmError(error).message)
+            }
+            return
+        }
+
+        updateGuestNode(nodeId, node => ({
+            ...node,
+            positionX,
+            positionY,
+            updatedAt: new Date().toISOString(),
+        }))
+    }
+
+    async function handleSendNodeMessage(nodeId: string, text: string, imageUrl?: string): Promise<boolean> {
+        if (isAuthenticated) {
+            if (!activeSessionId)
+                return await bootstrapEmptyAuthenticatedSession(nodeId, text)
+
+            if (!graph)
+                return false
+
+            const numericNodeId = extractNumericId(nodeId)
+            if (!numericNodeId)
+                return false
+
+            const nodeSource = nodeDetails[numericNodeId] ?? graph.nodes.find(node => node.id === numericNodeId)
+            if (!nodeSource)
+                return false
+
+            const selection = resolveNodeSelection(nodeSource)
+            let succeeded = false
+
+            appendOptimisticAuthUserMessage(numericNodeId, text.trim(), imageUrl ?? null)
+            try {
+                pushChatReplyPending(nodeId)
+                await runNodeAction(nodeId, async () => {
+                    try {
+                        const response = await sendChatNodeMessage(
+                            activeSessionId,
+                            numericNodeId,
+                            text,
+                            imageUrl,
+                            selection.provider,
+                            selection.model,
+                        )
+                        applyStateResponse(response)
+                        succeeded = true
+                    } catch (error) {
+                        toast.error(getLlmError(error).message)
+                        stripOptimisticAuthMessagesForNode(numericNodeId)
+                    }
+                })
+            } finally {
+                popChatReplyPending(nodeId)
+            }
+
+            return succeeded
+        }
+
+        if (!activeGuestCanvas)
+            return false
+
+        const guestNode = activeGuestCanvas.nodes.find(node => node.id === nodeId)
+        if (!guestNode)
+            return false
+
+        const selection = resolveNodeSelection(guestNode)
+        const existingMessages = guestNode.messages
+        const userMessage = createGuestMessage('user', text, imageUrl, null, null)
+        updateGuestNode(nodeId, node => ({
+            ...node,
+            messages: [...node.messages, userMessage],
+            updatedAt: new Date().toISOString(),
+        }))
+
+        let succeeded = false
+        try {
+            pushChatReplyPending(nodeId)
+            await runNodeAction(nodeId, async () => {
+                const preview = await runGuestPreviewAction({
+                    actionType: 'chat',
+                    prompt: text,
+                    imageUrl,
+                    modelId: selection.model,
+                    messages: existingMessages.map(message => ({
+                        role: message.role,
+                        content: message.content,
+                        imageUrl: message.imageUrl ?? undefined,
+                    })),
+                })
+
+                if (!preview?.message)
+                    return
+
+                const assistantMessage = createGuestMessage(
+                    'assistant',
+                    preview.message,
+                    preview.imageUrl,
+                    (preview.provider as LlmProviderId | null | undefined) ?? selection.provider,
+                    preview.model ?? selection.model,
+                )
+
+                updateGuestNode(nodeId, node => ({
+                    ...node,
+                    preview: buildPreview(preview.message ?? node.preview),
+                    messages: [...node.messages, assistantMessage],
+                    updatedAt: new Date().toISOString(),
+                }))
+                succeeded = true
+            })
+        } finally {
+            popChatReplyPending(nodeId)
+        }
+
+        return succeeded
+    }
+
+    async function handleGenerateNodeImage(nodeId: string, prompt: string): Promise<boolean> {
+        if (isAuthenticated) {
+            if (!activeSessionId || !graph)
+                return false
+
+            const numericNodeId = extractNumericId(nodeId)
+            if (!numericNodeId)
+                return false
+
+            const nodeSource = nodeDetails[numericNodeId] ?? graph.nodes.find(node => node.id === numericNodeId)
+            if (!nodeSource)
+                return false
+
+            const selection = resolveNodeSelection(nodeSource)
+            let succeeded = false
+
+            await runNodeAction(nodeId, async () => {
+                try {
+                    const response = await generateChatNodeImage(
+                        activeSessionId,
+                        numericNodeId,
+                        prompt,
+                        selection.provider,
+                        selection.model,
+                    )
+                    applyStateResponse(response)
+                    succeeded = true
+                } catch (error) {
+                    toast.error(getLlmError(error).message)
+                }
+            })
+            return succeeded
+        }
+
+        if (!activeGuestCanvas)
+            return false
+
+        const userPromptMessage = createGuestMessage('user', `[GENERATE IMAGE]: ${prompt}`)
+        updateGuestNode(nodeId, node => ({
+            ...node,
+            messages: [...node.messages, userPromptMessage],
+            updatedAt: new Date().toISOString(),
+        }))
+
+        let succeeded = false
+        await runNodeAction(nodeId, async () => {
+            const preview = await runGuestPreviewAction({
+                actionType: 'image',
+                prompt,
+                modelId: DEFAULT_CANVAS_MODEL_SELECTION.model,
+            })
+
+            if (!preview?.imageUrl)
+                return
+
+            const assistantMessage = createGuestMessage(
+                'assistant',
+                preview.message ?? `Here is the visual manifestation for: **${prompt}**`,
+                preview.imageUrl,
+                (preview.provider as LlmProviderId | null | undefined) ?? DEFAULT_CANVAS_MODEL_SELECTION.provider,
+                preview.model ?? DEFAULT_CANVAS_MODEL_SELECTION.model,
+            )
+
+            updateGuestNode(nodeId, node => ({
+                ...node,
+                preview: buildPreview(assistantMessage.content),
+                messages: [...node.messages, assistantMessage],
+                updatedAt: new Date().toISOString(),
+            }))
+            succeeded = true
+        })
+
+        return succeeded
+    }
+
+    async function handleEditNodeMessage(nodeId: string, messageId: number | string, content: string): Promise<boolean> {
+        if (isAuthenticated) {
+            if (!activeSessionId || !graph)
+                return false
+
+            const numericNodeId = extractNumericId(nodeId)
+            const numericMessageId = typeof messageId === 'number' ? messageId : Number(messageId)
+            if (!numericNodeId || !Number.isFinite(numericMessageId))
+                return false
+
+            const nodeSource = nodeDetails[numericNodeId] ?? graph.nodes.find(node => node.id === numericNodeId)
+            if (!nodeSource)
+                return false
+
+            const latestAssistantMessage = (nodeDetails[numericNodeId]?.localMessages ?? [])
+                .slice()
+                .reverse()
+                .find(message => message.role === 'assistant')
+            if (!latestAssistantMessage || latestAssistantMessage.id !== numericMessageId)
+                return false
+
+            try {
+                const response = await updateChatNodeMessage(activeSessionId, numericNodeId, numericMessageId, content)
+                applyStateResponse(response)
+                return true
+            } catch (error) {
+                toast.error(getLlmError(error).message)
+                return false
+            }
+        }
+
+        if (!activeGuestCanvas)
+            return false
+
+        const guestNode = activeGuestCanvas.nodes.find(node => node.id === nodeId)
+        if (!guestNode)
+            return false
+
+        const latestAssistantMessage = [...guestNode.messages].reverse().find(message => message.role === 'assistant')
+        if (!latestAssistantMessage || latestAssistantMessage.id !== messageId)
+            return false
+
+        const now = new Date().toISOString()
+        updateGuestNode(nodeId, node => ({
+            ...node,
+            preview: buildPreview(content),
+            messages: node.messages.map(message => (
+                message.id === messageId
+                    ? { ...message, content, updatedAt: now }
+                    : message
+            )),
+            updatedAt: now,
+        }))
+
+        return true
+    }
+
+    async function handleMoveMessagesToBranch(
+        nodeId: string,
+        messageIds: Array<number | string>,
+        transferMode: 'move' | 'copy',
+    ): Promise<boolean> {
+        if (isAuthenticated) {
+            if (!activeSessionId)
+                return false
+
+            const numericNodeId = extractNumericId(nodeId)
+            if (!numericNodeId)
+                return false
+
+            const normalizedMessageIds = messageIds
+                .map(messageId => (typeof messageId === 'number' ? messageId : Number(messageId)))
+                .filter(messageId => Number.isInteger(messageId) && messageId > 0)
+
+            if (normalizedMessageIds.length === 0)
+                return false
+
+            let succeeded = false
+            await runNodeAction(nodeId, async () => {
+                try {
+                    const response = await moveChatNodeMessagesToBranch(activeSessionId, numericNodeId, normalizedMessageIds, transferMode)
+                    applyStateResponse(response)
+                    if (transferMode === 'move') {
+                        const selectedIds = new Set(normalizedMessageIds)
+                        setNodeDetails(current => {
+                            const sourceNode = current[numericNodeId]
+                            if (!sourceNode)
+                                return current
+
+                            return {
+                                ...current,
+                                [numericNodeId]: {
+                                    ...sourceNode,
+                                    localMessages: sourceNode.localMessages.filter(message => !selectedIds.has(message.id)),
+                                    resolvedMessages: sourceNode.resolvedMessages.filter(message => !selectedIds.has(message.id)),
+                                },
+                            }
+                        })
+                    }
+                    succeeded = true
+                } catch (error) {
+                    toast.error(getLlmError(error).message)
+                }
+            })
+
+            return succeeded
+        }
+
+        requireAuthentication()
+        return false
+    }
+
+    async function handleGenerateNodeNote(nodeId: string) {
+        if (isAuthenticated) {
+            if (!activeSessionId || !graph)
+                return
+
+            const numericNodeId = extractNumericId(nodeId)
+            if (!numericNodeId)
+                return
+
+            const nodeSource = nodeDetails[numericNodeId] ?? graph.nodes.find(node => node.id === numericNodeId)
+            if (!nodeSource)
+                return
+
+            const selection = resolveNodeSelection(nodeSource)
+            const tempNodeId = allocateTemporaryNodeId()
+            const position = resolveGuestNodePosition(
+                {
+                    id: String(nodeSource.nodeId),
+                    parentNodeId: nodeSource.parentNodeId === null ? null : String(nodeSource.parentNodeId),
+                    nodeType: nodeSource.nodeType,
+                    title: nodeSource.title,
+                    preview: nodeSource.preview,
+                    content: nodeSource.content,
+                    positionX: nodeSource.positionX,
+                    positionY: nodeSource.positionY,
+                    width: nodeSource.width,
+                    height: nodeSource.height,
+                    isCollapsed: nodeSource.isCollapsed,
+                    expandedWidth: nodeSource.expandedWidth,
+                    expandedHeight: nodeSource.expandedHeight,
+                    preferredProvider: nodeSource.preferredProvider,
+                    preferredModel: nodeSource.preferredModel,
+                    createdAt: nodeSource.createdAt,
+                    updatedAt: nodeSource.updatedAt,
+                    messages: [],
+                },
+                'note',
+                graph.nodes.map(summary => ({
+                    id: String(summary.id),
+                    parentNodeId: summary.parentNodeId === null ? null : String(summary.parentNodeId),
+                    nodeType: summary.nodeType,
+                    title: summary.title,
+                    preview: summary.preview,
+                    content: summary.content,
+                    positionX: summary.positionX,
+                    positionY: summary.positionY,
+                    width: summary.width,
+                    height: summary.height,
+                    isCollapsed: summary.isCollapsed,
+                    expandedWidth: summary.expandedWidth,
+                    expandedHeight: summary.expandedHeight,
+                    preferredProvider: summary.preferredProvider,
+                    preferredModel: summary.preferredModel,
+                    createdAt: summary.createdAt,
+                    updatedAt: summary.updatedAt,
+                    messages: [],
+                })),
+            )
+
+            setGraph(current => {
+                if (!current)
+                    return current
+
+                const now = new Date().toISOString()
+                return {
+                    ...current,
+                    session: { ...current.session, updatedAt: now },
+                    activeNodeId: tempNodeId,
+                    nodes: [
+                        ...current.nodes,
+                        createLoadingNoteNode(tempNodeId, numericNodeId, position.x, position.y, selection.provider, selection.model),
+                    ],
+                }
+            })
+            setNodeDetails(current => ({
+                ...current,
+                [tempNodeId]: {
+                    sessionId: activeSessionId,
+                    nodeId: tempNodeId,
+                    parentNodeId: numericNodeId,
+                    branchFromMessageId: null,
+                    nodeType: 'note',
+                    title: 'AI Summary',
+                    preview: '',
+                    content: '',
+                    positionX: position.x,
+                    positionY: position.y,
+                    width: NOTE_EXPANDED_WIDTH,
+                    height: calculateLoadingNoteHeight(),
+                    isCollapsed: false,
+                    expandedWidth: NOTE_EXPANDED_WIDTH,
+                    expandedHeight: calculateLoadingNoteHeight(),
+                    preferredProvider: selection.provider,
+                    preferredModel: selection.model,
+                    createdAt: new Date().toISOString(),
+                    updatedAt: new Date().toISOString(),
+                    localMessages: [],
+                    resolvedMessages: [],
+                },
+            }))
+            setSelectedNodeId(String(tempNodeId))
+
+            try {
+                const response = await generateChatNodeNote(
+                    activeSessionId,
+                    numericNodeId,
+                    selection.provider,
+                    selection.model,
+                )
+                applyStateResponse(response)
+            } catch (error) {
+                toast.error(getLlmError(error).message)
+            }
+            return
+        }
+
+        if (!activeGuestCanvas)
+            return
+
+        const sourceNode = activeGuestCanvas.nodes.find(node => node.id === nodeId)
+        if (!sourceNode)
+            return
+
+        const selection = resolveNodeSelection(sourceNode)
+        const tempNodeId = createId('guest-node')
+        const position = resolveGuestNodePosition(sourceNode, 'note', activeGuestCanvas.nodes)
+        const now = new Date().toISOString()
+
+        updateGuestCanvas(activeGuestCanvas.id, canvas => ({
+            ...canvas,
+            updatedAt: now,
+            activeNodeId: tempNodeId,
+            nodes: [
+                ...canvas.nodes,
+                {
+                    id: tempNodeId,
+                    parentNodeId: sourceNode.id,
+                    nodeType: 'note',
+                    title: 'AI Summary',
+                    preview: '',
+                    content: '',
+                    positionX: position.x,
+                    positionY: position.y,
+                    width: NOTE_EXPANDED_WIDTH,
+                    height: calculateLoadingNoteHeight(),
+                    isCollapsed: false,
+                    expandedWidth: NOTE_EXPANDED_WIDTH,
+                    expandedHeight: calculateLoadingNoteHeight(),
+                    preferredProvider: selection.provider,
+                    preferredModel: selection.model,
+                    createdAt: now,
+                    updatedAt: now,
+                    messages: [],
+                },
+            ],
+        }))
+        setSelectedNodeId(tempNodeId)
+
+        try {
+            const preview = await runGuestPreviewAction({
+                actionType: 'note',
+                content: sourceNode.content,
+                modelId: selection.model,
+                messages: sourceNode.messages.map(message => ({
+                    role: message.role,
+                    content: message.content,
+                    imageUrl: message.imageUrl ?? undefined,
+                })),
+            })
+
+            if (!preview?.noteContent)
+                return
+
+            const height = calculateGeneratedNoteHeight(preview.noteContent)
+            const now = new Date().toISOString()
+
+            updateGuestCanvas(activeGuestCanvas.id, canvas => ({
+                ...canvas,
+                updatedAt: now,
+                activeNodeId: tempNodeId,
+                nodes: canvas.nodes.map(node => (
+                    node.id === tempNodeId
+                        ? {
+                            ...node,
+                            title: preview.noteTitle ?? 'AI Summary',
+                            preview: buildPreview(preview.noteContent ?? ''),
+                            content: preview.noteContent ?? '',
+                            height,
+                            expandedHeight: height,
+                            updatedAt: now,
+                        }
+                        : node
+                )),
+            }))
+            setSelectedNodeId(tempNodeId)
+        } catch (error) {
+            toast.error(getLlmError(error).message)
+        }
+    }
+
+    async function handleDeleteNode(nodeId: string) {
+        if (isAuthenticated) {
+            if (!activeSessionId || !graph)
+                return
+
+            const numericNodeId = extractNumericId(nodeId)
+            if (!numericNodeId)
+                return
+
+            await runNodeAction(nodeId, async () => {
+                try {
+                    const fallbackNodeId = nodeDetails[numericNodeId]?.parentNodeId ?? graph.rootNodeId
+                    const response = await deleteChatNode(activeSessionId, numericNodeId, fallbackNodeId === numericNodeId ? undefined : fallbackNodeId)
+                    applyGraphOnly(response)
+                } catch (error) {
+                    toast.error(getLlmError(error).message)
+                }
+            })
+            return
+        }
+
+        if (!activeGuestCanvas)
+            return
+
+        const guestNode = activeGuestCanvas.nodes.find(node => node.id === nodeId)
+        if (!guestNode || guestNode.parentNodeId === null)
+            return
+
+        const descendantIds = collectGuestDescendantIds(activeGuestCanvas.nodes, nodeId)
+        updateGuestCanvas(activeGuestCanvas.id, canvas => {
+            const remainingNodes = canvas.nodes.filter(node => !descendantIds.has(node.id))
+            const nextActiveNodeId = remainingNodes.some(node => node.id === canvas.activeNodeId)
+                ? canvas.activeNodeId
+                : remainingNodes[0]?.id ?? canvas.rootNodeId
+
+            return {
+                ...canvas,
+                updatedAt: new Date().toISOString(),
+                activeNodeId: nextActiveNodeId,
+                nodes: remainingNodes,
+            }
+        })
+    }
+
+    async function handleLogout() {
+        await logout()
+        navigate('/')
+    }
+
+    const flowEdges = useMemo<ChatCanvasFlowEdge[]>(() => {
+        if (isAuthenticated) {
+            if (!graph)
+                return []
+
+            return graph.nodes
+                .filter(node => node.parentNodeId !== null && node.nodeType !== 'note')
+                .map(node => ({
+                    id: `edge-${node.parentNodeId}-${node.id}`,
+                    source: flowNodeId(String(node.parentNodeId)),
+                    target: flowNodeId(String(node.id)),
+                    type: 'smoothstep',
+                    animated: true,
+                }))
+        }
+
+        if (!activeGuestCanvas)
+            return []
+
+        return activeGuestCanvas.nodes
+            .filter(node => node.parentNodeId !== null && node.nodeType !== 'note')
+            .map(node => ({
+                id: `edge-${node.parentNodeId}-${node.id}`,
+                source: flowNodeId(node.parentNodeId!),
+                target: flowNodeId(node.id),
+                type: 'smoothstep',
+                animated: true,
+            }))
+    }, [activeGuestCanvas, graph, isAuthenticated])
+
+    const canvasModelOptions = useMemo(() => {
+        const options = buildCanvasModelOptions(
+            providerModelsByProvider,
+            isAuthenticated
+                ? (configuredProviders.length > 0 ? configuredProviders : graph?.availableProviders ?? [])
+                : undefined,
+            true,
+        )
+
+        const hasAnyApiKey = isAuthenticated && (configuredProviders.length > 0 || (graph?.availableProviders?.length ?? 0) > 0)
+        
+        // If guest or logged in without any API keys, limit to basic/low-cost models
+        if (!hasAnyApiKey) {
+            return options.filter(opt => opt.isBasic)
+        }
+
+        return options
+    }, [graph?.availableProviders, isAuthenticated, providerModelsByProvider])
+
+    const flowNodes = useMemo<ChatCanvasFlowNode[]>(() => {
+        if (isAuthenticated) {
+            if (!graph)
+                return []
+
+            return graph.nodes.map(summary => {
+                const detail = nodeDetails[summary.id]
+                const source = detail ? mergeSummaryIntoDetail(detail, summary) : summary
+                const rawNodeId = String(summary.id)
+                const summaryNote = graph.nodes.find(node => (
+                    node.parentNodeId === summary.id
+                    && node.nodeType === 'note'
+                    && node.title === 'AI Summary'
+                    && node.content.trim().length > 0
+                ))
+
+                return {
+                    id: flowNodeId(rawNodeId),
+                    type: 'ideaNode',
+                    position: { x: source.positionX, y: source.positionY },
+                    selected: rawNodeId === selectedNodeId,
+                    draggable: true,
+                    data: {
+                        nodeId: rawNodeId,
+                        title: source.title,
+                        nodeType: source.nodeType,
+                        content: source.content,
+                        isCollapsed: source.isCollapsed,
+                        expandedWidth: source.expandedWidth,
+                        expandedHeight: source.expandedHeight,
+                        loading: pendingNodeSet.has(rawNodeId),
+                        showAssistantTyping: chatReplyPendingSet.has(rawNodeId) && pendingNodeSet.has(rawNodeId),
+                        messages: detail?.localMessages ?? [],
+                        preferredProvider: source.preferredProvider,
+                        preferredModel: source.preferredModel,
+                        modelOptions: canvasModelOptions,
+                        canDelete: summary.parentNodeId !== null,
+                        showFloatingLabel: graph.nodes.length > 1,
+                        noteGenerating: source.nodeType === 'note' && !source.content && source.title === 'AI Summary',
+                        exportSummaryContent: summaryNote?.content ?? null,
+                        onCreateChild: (nodeType, seedContent) => {
+                            void handleCreateChildNode(rawNodeId, nodeType, seedContent)
+                        },
+                        onDelete: () => {
+                            void handleDeleteNode(rawNodeId)
+                        },
+                        onUpdateTitle: title => {
+                            void handleRenameNode(rawNodeId, title)
+                        },
+                        onUpdateContent: content => {
+                            handleUpdateNodeContent(rawNodeId, content)
+                        },
+                        onSendMessage: (text, image) => handleSendNodeMessage(rawNodeId, text, image),
+                        onSendImagePrompt: prompt => handleGenerateNodeImage(rawNodeId, prompt),
+                        onGenerateNote: () => {
+                            void handleGenerateNodeNote(rawNodeId)
+                        },
+                        onToggleCollapse: () => {
+                            void handleToggleNodeCollapse(rawNodeId)
+                        },
+                        onProviderModelChange: (provider, model) => {
+                            void handleProviderModelChange(rawNodeId, provider, model)
+                        },
+                        onEditMessage: (messageId, content) => handleEditNodeMessage(rawNodeId, messageId, content),
+                        onMoveMessagesToBranch: (messageIds, transferMode) => handleMoveMessagesToBranch(rawNodeId, messageIds, transferMode),
+                        onResize: (width, height) => {
+                            void handleResizeNode(rawNodeId, width, height)
+                        },
+                    },
+                    style: {
+                        width: source.width,
+                        height: source.height,
+                    },
+                }
+            })
+        }
+
+        if (!activeGuestCanvas)
+            return []
+
+        return activeGuestCanvas.nodes.map(node => {
+            const summaryNote = activeGuestCanvas.nodes.find(candidate => (
+                candidate.parentNodeId === node.id
+                && candidate.nodeType === 'note'
+                && candidate.title === 'AI Summary'
+                && candidate.content.trim().length > 0
+            ))
+
+            return {
+                id: flowNodeId(node.id),
+                type: 'ideaNode',
+                position: { x: node.positionX, y: node.positionY },
+                selected: node.id === selectedNodeId,
+                draggable: true,
+                data: {
+                    nodeId: node.id,
+                    title: node.title,
+                    nodeType: node.nodeType,
+                    content: node.content,
+                    isCollapsed: node.isCollapsed,
+                    expandedWidth: node.expandedWidth,
+                    expandedHeight: node.expandedHeight,
+                    loading: pendingNodeSet.has(node.id),
+                    showAssistantTyping: chatReplyPendingSet.has(node.id) && pendingNodeSet.has(node.id),
+                    messages: node.messages,
+                    preferredProvider: node.preferredProvider,
+                    preferredModel: node.preferredModel,
+                    modelOptions: canvasModelOptions,
+                    canDelete: node.parentNodeId !== null,
+                    showFloatingLabel: activeGuestCanvas.nodes.length > 1,
+                    noteGenerating: node.nodeType === 'note' && !node.content && node.title === 'AI Summary',
+                    exportSummaryContent: summaryNote?.content ?? null,
+                    onCreateChild: (nodeType, seedContent) => {
+                        void handleCreateChildNode(node.id, nodeType, seedContent)
+                    },
+                    onDelete: () => {
+                        void handleDeleteNode(node.id)
+                    },
+                    onUpdateTitle: title => {
+                        void handleRenameNode(node.id, title)
+                    },
+                    onUpdateContent: content => {
+                        handleUpdateNodeContent(node.id, content)
+                    },
+                    onSendMessage: (text, image) => handleSendNodeMessage(node.id, text, image),
+                    onSendImagePrompt: prompt => handleGenerateNodeImage(node.id, prompt),
+                    onGenerateNote: () => {
+                        void handleGenerateNodeNote(node.id)
+                    },
+                    onToggleCollapse: () => {
+                        void handleToggleNodeCollapse(node.id)
+                    },
+                    onProviderModelChange: (provider, model) => {
+                        void handleProviderModelChange(node.id, provider, model)
+                    },
+                    onEditMessage: (messageId, content) => handleEditNodeMessage(node.id, messageId, content),
+                    onMoveMessagesToBranch: (messageIds, transferMode) => handleMoveMessagesToBranch(node.id, messageIds, transferMode),
+                    onResize: (width, height) => {
+                        void handleResizeNode(node.id, width, height)
+                    },
+                },
+                style: {
+                    width: node.width,
+                    height: node.height,
+                },
+            }
+        })
+    }, [
+        activeGuestCanvas,
+        canvasModelOptions,
+        graph,
+        handleCreateChildNode,
+        handleDeleteNode,
+        handleGenerateNodeImage,
+        handleGenerateNodeNote,
+        handleProviderModelChange,
+        handleRenameNode,
+        handleResizeNode,
+        handleSendNodeMessage,
+        handleToggleNodeCollapse,
+        handleUpdateNodeContent,
+        handleEditNodeMessage,
+        handleMoveMessagesToBranch,
+        isAuthenticated,
+        nodeDetails,
+        chatReplyPendingSet,
+        pendingNodeSet,
+        selectedNodeId,
+    ])
+
+    const sidebarSessions = useMemo(() => (
+        isAuthenticated
+            ? sessions.map(session => ({ id: String(session.id), title: session.title }))
+            : guestCanvases.map(canvas => ({ id: canvas.id, title: canvas.title }))
+    ), [guestCanvases, isAuthenticated, sessions])
+
+    const workspaceName = isAuthenticated
+        ? graph?.session.title ?? DEFAULT_SESSION_TITLE
+        : activeGuestCanvas?.title ?? DEFAULT_SESSION_TITLE
+
+    const currentCanvasId = isAuthenticated
+        ? (activeSessionId !== null ? String(activeSessionId) : 'current-draft-canvas')
+        : (activeGuestCanvas?.id ?? null)
+
+    const showWorkspace = isAuthenticated ? Boolean(graph) : Boolean(activeGuestCanvas)
+    const showLoadingState = importingGuest || loadingInitial || loadingCanvas || creatingSession
+
+    return (
+        <div className={`chat-canvas-app ${theme === 'midnight' ? 'theme-midnight' : theme === 'monochrome' ? 'theme-monochrome' : 'theme-slate'} flex h-screen w-screen overflow-hidden bg-background`}>
+            <CanvasSidebar
+                sessions={sidebarSessions}
+                activeSessionId={currentCanvasId}
+                isLoading={isAuthenticated && loadingInitial}
+                isCreating={isAuthenticated && creatingSession}
+                onSelect={canvasId => {
+                    if (isAuthenticated) {
+                        const nextSessionId = extractNumericId(canvasId)
+                        if (!nextSessionId || nextSessionId === activeSessionId)
+                            return
+
+                        startTransition(() => {
+                            setGraph(null)
+                            setNodeDetails({})
+                            setSelectedNodeId(null)
+                            setActiveSessionId(nextSessionId)
+                        })
+                        return
+                    }
+
+                    setGuestActiveCanvasId(canvasId)
+                    const nextCanvas = guestCanvases.find(canvas => canvas.id === canvasId)
+                    setSelectedNodeId(nextCanvas?.activeNodeId ?? null)
+                }}
+                onAdd={() => {
+                    void handleCreateCanvas()
+                }}
+                onDelete={canvasId => {
+                    void handleDeleteCanvas(canvasId)
+                }}
+                footer={(
+                    <SidebarFooter
+                        isAuthenticated={isAuthenticated}
+                        userName={(() => {
+                            if (user?.displayName) return user.displayName;
+                            if (user?.email) {
+                                return user.email.split('@')[0]
+                                    .split(/[._-]/)
+                                    .map(p => p.charAt(0).toUpperCase() + p.slice(1))
+                                    .join(' ');
+                            }
+                            return 'Guest user';
+                        })()}
+                        userSecondary={isAuthenticated ? (user?.email || 'Authenticated workspace') : 'Guest canvas'}
+                        onOpenLogin={() => openAuthModal('login')}
+                        onOpenRegister={() => openAuthModal('register')}
+                        onOpenSettings={() => navigate('/settings')}
+                        onLogout={() => {
+                            void handleLogout()
+                        }}
+                    />
+                )}
+            />
+
+            <div className="relative flex min-h-0 flex-1 flex-col bg-background">
+                {pageError ? (
+                    <div className="absolute left-6 right-6 top-6 z-20 rounded-2xl border border-red-500/25 bg-red-500/10 px-4 py-3 text-sm text-red-100 backdrop-blur-md">
+                        {pageError}
+                    </div>
+                ) : null}
+
+                {showWorkspace ? (
+                    <CanvasWorkspace
+                        canvasId={currentCanvasId}
+                        nodes={flowNodes}
+                        edges={flowEdges}
+                        canvasName={workspaceName}
+                        theme={theme}
+                        setTheme={setTheme}
+                        onRenameCanvas={name => {
+                            if (currentCanvasId)
+                                void handleRenameCanvas(currentCanvasId, name)
+                        }}
+                        onSelectNode={nodeId => setSelectedNodeId(nodeId)}
+                        onSaveNodePosition={(nodeId, positionX, positionY) => {
+                            void handleSaveNodePosition(nodeId, positionX, positionY)
+                        }}
+                    />
+                ) : (
+                    <div className="flex flex-1 items-center justify-center">
+                        <div className="flex items-center gap-3 rounded-full border border-white/10 bg-white/5 px-5 py-3 text-sm text-foreground/80 backdrop-blur-xl">
+                            <span>{showLoadingState ? 'Loading canvas workspace...' : 'Preparing canvas workspace...'}</span>
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            {!isAuthenticated && modalMode ? (
+                <AuthModal
+                    mode={modalMode}
+                    onClose={closeAuthModal}
+                    onChangeMode={openAuthModal}
+                />
+            ) : null}
+        </div>
+    )
+}
+
+function SidebarFooter({
+    isAuthenticated,
+    userName,
+    userSecondary,
+    onOpenLogin,
+    onOpenRegister,
+    onOpenSettings,
+    onLogout,
+}: {
+    isAuthenticated: boolean
+    userName: string
+    userSecondary: string
+    onOpenLogin: () => void
+    onOpenRegister: () => void
+    onOpenSettings: () => void
+    onLogout: () => void
+}) {
+    const [menuOpen, setMenuOpen] = useState(false)
+
+    const initials = userName
+        .split(/\s+/)
+        .filter(Boolean)
+        .slice(0, 2)
+        .map(part => part[0]?.toUpperCase() ?? '')
+        .join('') || 'CI'
+
+    return (
+        <div className="relative">
+            <button
+                type="button"
+                onClick={() => setMenuOpen(open => !open)}
+                className="w-full rounded-xl transition-colors hover:bg-foreground/5"
+            >
+                <div className="flex items-center gap-3 px-3 py-2.5">
+                    <div className="flex h-8 w-8 items-center justify-center rounded-full border border-foreground/5 bg-gradient-to-tr from-accent/20 to-accent/10 text-[11px] font-bold text-accent">
+                        {initials}
+                    </div>
+                    <div className="min-w-0 text-left">
+                        <p className="truncate text-[13px] font-medium text-foreground/90">{userName}</p>
+                        <p className="truncate text-[11px] font-medium text-muted-foreground">{userSecondary}</p>
+                    </div>
+                </div>
+            </button>
+
+            {menuOpen ? (
+                <div className="absolute bottom-full left-0 right-0 z-20 mb-2 rounded-2xl border border-foreground/10 bg-[hsl(var(--sidebar-background))] p-2 shadow-2xl backdrop-blur-xl">
+                    {isAuthenticated ? (
+                        <>
+                            <FooterMenuButton icon={<Settings2 size={14} />} label="Settings" onClick={onOpenSettings} />
+                            <FooterMenuButton icon={<LogOut size={14} />} label="Log Out" onClick={onLogout} />
+                        </>
+                    ) : (
+                        <>
+                            <FooterMenuButton label="Sign In" onClick={onOpenLogin} />
+                            <FooterMenuButton label="Create Account" onClick={onOpenRegister} />
+                        </>
+                    )}
+                </div>
+            ) : null}
+        </div>
+    )
+}
+
+function FooterMenuButton({
+    icon,
+    label,
+    onClick,
+}: {
+    icon?: React.ReactNode
+    label: string
+    onClick: () => void
+}) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            className="flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm text-foreground/80 transition-colors hover:bg-foreground/5 hover:text-foreground"
+        >
+            {icon}
+            <span>{label}</span>
+        </button>
+    )
+}
diff --git a/frontend/src/pages/LoginPage.test.tsx b/frontend/src/pages/LoginPage.test.tsx
deleted file mode 100644
index a49a91a..0000000
--- a/frontend/src/pages/LoginPage.test.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { MemoryRouter } from 'react-router-dom'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import LoginPage from './LoginPage'
-import * as authService from '../services/authService'
-import { GoogleOAuthProvider } from '@react-oauth/google'
- 
-let triggerGoogleError = () => {}
-
-vi.mock('../services/authService', () => ({
-    login: vi.fn(),
-    loginWithGoogle: vi.fn(),
-    getEmailVerificationRequired: vi.fn(() => null),
-    getErrorMessage: vi.fn((err: unknown) => {
-        if (err && typeof err === 'object' && 'response' in err) {
-            const resp = (err as any).response
-            return resp?.data?.message || 'Something went wrong. Please try again.'
-        }
-        return 'Something went wrong. Please try again.'
-    }),
-}))
-
-vi.mock('@react-oauth/google', () => ({
-    GoogleLogin: vi.fn(({ onSuccess, onError }: any) => {
-        triggerGoogleError = () => onError?.()
-        return (
-            <>
-                <button data-testid="google-login-button" onClick={() => onSuccess({ credential: 'mock-id-token' })}>
-                    Mock Google Login
-                </button>
-                <button data-testid="google-login-error-button" onClick={() => onError?.()}>
-                    Mock Google Login Error
-                </button>
-            </>
-        )
-    }),
-    GoogleOAuthProvider: ({ children }: any) => <>{children}</>,
-}))
- 
-const mockNavigate = vi.fn()
-vi.mock('react-router-dom', async () => {
-    const actual = await vi.importActual('react-router-dom')
-    return { ...actual, useNavigate: () => mockNavigate }
-})
- 
-const mockAuthLogin = vi.fn()
-vi.mock('../context/AuthContext', async () => {
-    const actual = await vi.importActual('../context/AuthContext')
-    return {
-        ...actual,
-        useAuth: () => ({ login: mockAuthLogin }),
-    }
-})
- 
-function renderLoginPage() {
-    return render(
-        <MemoryRouter initialEntries={['/login']}>
-            <GoogleOAuthProvider clientId="test-client-id">
-                <LoginPage />
-            </GoogleOAuthProvider>
-        </MemoryRouter>
-    )
-}
- 
-describe('LoginPage', () => {
- 
-    beforeEach(() => {
-        vi.clearAllMocks()
-        triggerGoogleError = () => {}
-    })
- 
-    it('Login_PageRenders', () => {
-        renderLoginPage()
-        expect(screen.getByPlaceholderText(/email address/i)).toBeInTheDocument()
-        expect(screen.getByPlaceholderText('Password')).toBeInTheDocument()
-        expect(screen.getByRole('button', { name: /sign in/i })).toBeInTheDocument()
-        expect(screen.getByTestId('google-login-button')).toBeInTheDocument()
-        expect(screen.getByText(/^or$/i)).toBeInTheDocument()
-    })
-
-    it('GoogleLogin_Success_CallsAuthServiceAndNavigates', async () => {
-        const user = userEvent.setup()
-        vi.mocked(authService.loginWithGoogle).mockResolvedValue({
-            token: 'fake-jwt-token',
-            refreshToken: 'refresh-token',
-            email: 'google-user@example.com',
-            expiry: new Date().toISOString(),
-        })
-
-        renderLoginPage()
-        await user.click(screen.getByTestId('google-login-button'))
-
-        await waitFor(() => {
-            expect(authService.loginWithGoogle).toHaveBeenCalledWith('mock-id-token')
-            expect(mockAuthLogin).toHaveBeenCalledWith('fake-jwt-token', 'refresh-token')
-            expect(mockNavigate).toHaveBeenCalledWith('/')
-        })
-    })
-
-    it('GoogleLogin_Error_ShowsRetryableMessage', async () => {
-        const user = userEvent.setup()
-
-        renderLoginPage()
-        await user.click(screen.getByTestId('google-login-error-button'))
-
-        expect(screen.getByText(/google sign-in failed or was cancelled\./i)).toBeInTheDocument()
-        expect(authService.loginWithGoogle).not.toHaveBeenCalled()
-        expect(mockNavigate).not.toHaveBeenCalled()
-    })
-
-    it('GoogleLogin_BackendFailure_ShowsApiErrorAndStaysOnLogin', async () => {
-        const user = userEvent.setup()
-        const apiError = { response: { data: { message: 'Google login rejected by backend' } } }
-        vi.mocked(authService.loginWithGoogle).mockRejectedValue(apiError)
-        vi.mocked(authService.getErrorMessage).mockReturnValue('Google login rejected by backend')
-
-        renderLoginPage()
-        await user.click(screen.getByTestId('google-login-button'))
-
-        await waitFor(() => {
-            expect(screen.getByText(/google login rejected by backend/i)).toBeInTheDocument()
-            expect(mockAuthLogin).not.toHaveBeenCalled()
-            expect(mockNavigate).not.toHaveBeenCalled()
-        })
-    })
-
-    it('GoogleLogin_LoadingState_ClearsAfterFailure', async () => {
-        const user = userEvent.setup()
-        let rejectLogin!: (reason?: unknown) => void
-        const pending = new Promise<never>((_, reject) => {
-            rejectLogin = reject
-        })
-        vi.mocked(authService.loginWithGoogle).mockReturnValue(pending)
-        vi.mocked(authService.getErrorMessage).mockReturnValue('Google sign-in failed. Please try again.')
-
-        renderLoginPage()
-        await user.click(screen.getByTestId('google-login-button'))
-
-        expect(screen.getByRole('button', { name: /signing in/i })).toBeDisabled()
-
-        rejectLogin({ response: { data: { message: 'Google sign-in failed. Please try again.' } } })
-
-        await waitFor(() => {
-            expect(screen.getByRole('button', { name: /sign in/i })).toBeEnabled()
-            expect(screen.getByText(/google sign-in failed\. please try again\./i)).toBeInTheDocument()
-        })
-    })
- 
-    it('Login_EmptySubmit_ShowsValidationError', async () => {
-        const user = userEvent.setup()
-        renderLoginPage()
-        await user.click(screen.getByRole('button', { name: /sign in/i }))
-        expect(screen.getByText(/email is required/i)).toBeInTheDocument()
-        expect(screen.getByText(/password is required/i)).toBeInTheDocument()
-        expect(authService.login).not.toHaveBeenCalled()
-    })
- 
-    it('Login_ValidInput_CallsAuthEndpoint', async () => {
-        const user = userEvent.setup()
-        vi.mocked(authService.login).mockResolvedValue({
-            token: 'fake-jwt-token',
-            refreshToken: 'refresh-token',
-            email: 'test@example.com',
-            expiry: new Date().toISOString(),
-        })
-        renderLoginPage()
-        await user.type(screen.getByPlaceholderText(/email address/i), 'test@example.com')
-        await user.type(screen.getByPlaceholderText('Password'), 'password123')
-        await user.click(screen.getByRole('button', { name: /sign in/i }))
-        await waitFor(() => {
-            expect(authService.login).toHaveBeenCalledTimes(1)
-            expect(authService.login).toHaveBeenCalledWith('test@example.com', 'password123')
-        })
-    })
- 
-    it('Login_InvalidCredentials_ShowsErrorMessage', async () => {
-        const user = userEvent.setup()
-        const apiError = { response: { data: { message: 'Invalid credentials' } } }
-        vi.mocked(authService.login).mockRejectedValue(apiError)
-        vi.mocked(authService.getErrorMessage).mockReturnValue('Invalid credentials')
-        renderLoginPage()
-        await user.type(screen.getByPlaceholderText(/email address/i), 'wrong@example.com')
-        await user.type(screen.getByPlaceholderText('Password'), 'wrongpassword')
-        await user.click(screen.getByRole('button', { name: /sign in/i }))
-        await waitFor(() => {
-            expect(screen.getByText(/invalid credentials/i)).toBeInTheDocument()
-        })
-    })
-
-    it('Login_UnverifiedEmail_ShowsVerificationMessage', async () => {
-        const user = userEvent.setup()
-        const apiError = {
-            response: {
-                status: 403,
-                data: {
-                    message: 'Your email is not verified. We sent you a new code.',
-                    requiresEmailVerification: true,
-                    email: 'user@example.com',
-                    cooldownSeconds: 30,
-                    cooldownSecondsRemaining: 0,
-                    nextResendAt: '2026-03-14T12:00:30.000Z',
-                    resendAttemptsRemaining: 2,
-                }
-            }
-        }
-        vi.mocked(authService.login).mockRejectedValue(apiError)
-        vi.mocked(authService.getEmailVerificationRequired).mockReturnValue(apiError.response.data)
-
-        renderLoginPage()
-        await user.type(screen.getByPlaceholderText(/email address/i), 'user@example.com')
-        await user.type(screen.getByPlaceholderText('Password'), 'password123')
-        await user.click(screen.getByRole('button', { name: /sign in/i }))
-
-        await waitFor(() => {
-            expect(mockNavigate).toHaveBeenCalledWith('/verify-email', {
-                state: {
-                    email: 'user@example.com',
-                    nextResendAt: '2026-03-14T12:00:30.000Z',
-                    cooldownSeconds: 30,
-                    resendAttemptsRemaining: 2,
-                    cooldownSecondsRemaining: 0,
-                    message: 'Your email is not verified. We sent you a new code.',
-                }
-            })
-        })
-    })
- 
-})
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
deleted file mode 100644
index 59b1a4d..0000000
--- a/frontend/src/pages/LoginPage.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import { useState, FormEvent } from 'react'
-import { Link, useNavigate, useLocation } from 'react-router-dom'
-import { AxiosError } from 'axios'
-import { login, loginWithGoogle, getEmailVerificationRequired, getErrorMessage } from '../services/authService'
-import { useAuth } from '../context/AuthContext'
-import { GoogleLogin, CredentialResponse } from '@react-oauth/google'
-
-interface FieldErrors { email?: string; password?: string }
-interface LockoutData { message: string; lockedUntil: string }
-
-export default function LoginPage() {
-    const [email,        setEmail]        = useState('')
-    const [password,     setPassword]     = useState('')
-    const [showPw,       setShowPw]       = useState(false)
-    const [fieldErrors,  setFieldErrors]  = useState<FieldErrors>({})
-    const [apiError,     setApiError]     = useState('')
-    const [lockedUntil,  setLockedUntil]  = useState<string | null>(null)
-    const [loading,      setLoading]      = useState(false)
-
-    const navigate = useNavigate()
-    const { login: authLogin } = useAuth()
-
-    function validate(): boolean {
-        const e: FieldErrors = {}
-        if (!email.trim())
-            e.email = 'Email is required'
-        else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim()))
-            e.email = 'Enter a valid email address'
-        if (!password) e.password = 'Password is required'
-        setFieldErrors(e)
-        return !Object.keys(e).length
-    }
-
-    async function handleGoogleSuccess(credentialResponse: CredentialResponse) {
-        setApiError('')
-        setLockedUntil(null)
-        if (!credentialResponse.credential) return
-        setLoading(true)
-        try {
-            const data = await loginWithGoogle(credentialResponse.credential)
-            authLogin(data.token, data.refreshToken)
-            navigate('/')
-        } catch (err: unknown) {
-            setApiError(getErrorMessage(err))
-        } finally {
-            setLoading(false)
-        }
-    }
-
-    async function handleSubmit(ev: FormEvent) {
-        ev.preventDefault()
-        setApiError('')
-        setLockedUntil(null)
-        if (!validate()) return
-        setLoading(true)
-        try {
-            const data = await login(email.trim(), password)
-            authLogin(data.token, data.refreshToken)
-            navigate('/')
-        } catch (err: unknown) {
-            const verificationRequired = getEmailVerificationRequired(err)
-            if (verificationRequired) {
-                navigate('/verify-email', {
-                    state: {
-                        email: verificationRequired.email,
-                        nextResendAt: verificationRequired.nextResendAt,
-                        cooldownSeconds: verificationRequired.cooldownSeconds,
-                        resendAttemptsRemaining: verificationRequired.resendAttemptsRemaining,
-                        cooldownSecondsRemaining: verificationRequired.cooldownSecondsRemaining,
-                        message: verificationRequired.message,
-                    }
-                })
-                return
-            }
-            if (err instanceof AxiosError && err.response?.status === 429) {
-                const body = err.response.data as LockoutData
-                setLockedUntil(body.lockedUntil ?? null)
-                setApiError('Account locked due to too many failed attempts.')
-            } else {
-                setApiError(getErrorMessage(err))
-            }
-        } finally { setLoading(false) }
-    }
-
-    return (
-        <div className="auth-layout">
-            <Navbar />
-            <div className="auth-card-wrapper">
-                <div className="auth-card">
-                    <div className="auth-header">
-                        <h2 className="auth-title">Welcome back</h2>
-                    </div>
-
-                    {apiError && (
-                        <div className="auth-alert auth-alert--err">
-                            <span>⚠</span> <span>{apiError}</span>
-                        </div>
-                    )}
-                    {lockedUntil && (
-                        <div className="auth-alert auth-alert--err">
-                            <span>🔒</span> <span>Try again after <strong>{new Date(lockedUntil).toLocaleTimeString()}</strong></span>
-                        </div>
-                    )}
-
-                    <div style={{ marginBottom: '1.5rem', display: 'flex', justifyContent: 'center' }}>
-                        <GoogleLogin
-                            onSuccess={handleGoogleSuccess}
-                            onError={() => setApiError('Google Sign-In failed or was cancelled.')}
-                            useOneTap
-                        />
-                    </div>
-                    <div style={{ display: 'flex', alignItems: 'center', margin: '1.5rem 0', color: '#64748b' }}>
-                        <div style={{ flex: 1, height: '1px', backgroundColor: '#e2e8f0' }}></div>
-                        <span style={{ padding: '0 1rem', fontSize: '0.875rem', fontWeight: 500 }}>OR</span>
-                        <div style={{ flex: 1, height: '1px', backgroundColor: '#e2e8f0' }}></div>
-                    </div>
-
-                    <form onSubmit={handleSubmit} noValidate>
-                        <div className="auth-input-group">
-                            <input
-                                id="login-email"
-                                type="email"
-                                value={email}
-                                onChange={e => { setEmail(e.target.value); setFieldErrors(p => ({ ...p, email: undefined })) }}
-                                placeholder="Email address"
-                                className={`auth-input${fieldErrors.email ? ' auth-input--error' : ''}`}
-                                autoComplete="email"
-                                disabled={loading}
-                            />
-                            {fieldErrors.email && <p className="field-err">{fieldErrors.email}</p>}
-                        </div>
-
-                        <div className="auth-input-group pw-wrap">
-                            <input
-                                id="login-password"
-                                type={showPw ? 'text' : 'password'}
-                                value={password}
-                                onChange={e => { setPassword(e.target.value); setFieldErrors(p => ({ ...p, password: undefined })) }}
-                                placeholder="Password"
-                                className={`auth-input${fieldErrors.password ? ' auth-input--error' : ''}`}
-                                autoComplete="current-password"
-                                disabled={loading}
-                            />
-                            <button type="button" className="eye-btn" onClick={() => setShowPw(!showPw)} tabIndex={-1}>
-                                {showPw ? <EyeOff /> : <Eye />}
-                            </button>
-                            {fieldErrors.password && <p className="field-err">{fieldErrors.password}</p>}
-                        </div>
-
-                        <button id="login-submit" type="submit" className="auth-btn-full" disabled={loading}>
-                            {loading ? <><span className="spin" /> Signing in…</> : 'Sign In'}
-                        </button>
-                    </form>
-
-                    <div className="auth-footer">
-                        Don't have an account? <Link to="/register">Sign up</Link><br/>
-                        <Link to="/forgot-password" style={{ display: 'inline-block', marginTop: '1rem' }}>Forgot Password</Link>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export function Navbar() {
-    const navigate = useNavigate()
-    const location = useLocation()
-    const isRegister = location.pathname === '/register'
-    return (
-        <nav className="landing-nav">
-            <div className="landing-brand" onClick={() => navigate('/')} style={{ cursor: 'pointer' }}>
-                Coliee AI
-            </div>
-            
-            <div>
-                {isRegister ? (
-                    <button className="btn-pill-outline" onClick={() => navigate('/login')}>Sign In</button>
-                ) : (
-                    <button className="btn-pill-outline" onClick={() => navigate('/register')}>Sign Up</button>
-                )}
-            </div>
-        </nav>
-    )
-}
-
-export function RabbitSVG() {
-    // Left empty or re-implemented since the class brand-icon replaces it in the UI,
-    // but exported here so Layout doesn't break if it referenced it.
-    return (
-        <span className="brand-icon">C</span>
-    );
-}
-
-export function Eye() {
-    return (
-        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" />
-        </svg>
-    )
-}
-
-export function EyeOff() {
-    return (
-        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" />
-            <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" />
-            <line x1="1" y1="1" x2="23" y2="23" />
-            <path d="M14.12 14.12a3 3 0 1 1-4.24-4.24" />
-        </svg>
-    )
-}
diff --git a/frontend/src/pages/RegisterPage.test.tsx b/frontend/src/pages/RegisterPage.test.tsx
deleted file mode 100644
index 2eb288b..0000000
--- a/frontend/src/pages/RegisterPage.test.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { MemoryRouter } from 'react-router-dom'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import RegisterPage from './RegisterPage'
-import * as authService from '../services/authService'
- 
-vi.mock('../services/authService', () => ({
-    register: vi.fn(),
-    getErrorMessage: vi.fn((err: unknown) => {
-        if (err && typeof err === 'object' && 'response' in err) {
-            const resp = (err as { response: { data: { message: string } } }).response
-            return resp?.data?.message || 'Something went wrong. Please try again.'
-        }
-        return 'Something went wrong. Please try again.'
-    }),
-}))
- 
-const mockNavigate = vi.fn()
-vi.mock('react-router-dom', async () => {
-    const actual = await vi.importActual('react-router-dom')
-    return { ...actual, useNavigate: () => mockNavigate }
-})
- 
-function renderRegisterPage() {
-    return render(
-        <MemoryRouter initialEntries={['/register']}>
-            <RegisterPage />
-        </MemoryRouter>
-    )
-}
- 
-describe('RegisterPage', () => {
- 
-    beforeEach(() => { vi.clearAllMocks() })
- 
-    // TEST 1
-    it('Register_PageRenders', () => {
-        renderRegisterPage()
-        expect(screen.getByPlaceholderText(/email address/i)).toBeInTheDocument()
-        expect(screen.getByPlaceholderText(/^password$/i)).toBeInTheDocument()
-        expect(screen.getByPlaceholderText(/re-enter password/i)).toBeInTheDocument()
-        expect(screen.getByRole('button', { name: /sign up/i })).toBeInTheDocument()
-    })
- 
-    // TEST 2
-    it('Register_EmptySubmit_ShowsValidationError', async () => {
-        const user = userEvent.setup()
-        renderRegisterPage()
-        await user.click(screen.getByRole('button', { name: /sign up/i }))
-        expect(screen.getByText(/email is required/i)).toBeInTheDocument()
-        expect(screen.getByText(/password is required/i)).toBeInTheDocument()
-        expect(screen.getByText(/please confirm your password/i)).toBeInTheDocument()
-        expect(authService.register).not.toHaveBeenCalled()
-    })
- 
-    // TEST 3
-    it('Register_PasswordMismatch_ShowsValidationError', async () => {
-        const user = userEvent.setup()
-        renderRegisterPage()
-        await user.type(screen.getByPlaceholderText(/email address/i), 'test@example.com')
-        await user.type(screen.getByPlaceholderText(/^password$/i), 'password123')
-        await user.type(screen.getByPlaceholderText(/re-enter password/i), 'differentpassword')
-        await user.click(screen.getByRole('button', { name: /sign up/i }))
-        expect(screen.getByText(/passwords do not match/i)).toBeInTheDocument()
-        expect(authService.register).not.toHaveBeenCalled()
-    })
- 
-    // TEST 4
-    it('Register_DuplicateEmail_ShowsErrorMessage', async () => {
-        const user = userEvent.setup()
-        const apiError = { response: { data: { message: 'Email is already registered' } } }
-        vi.mocked(authService.register).mockRejectedValue(apiError)
-        vi.mocked(authService.getErrorMessage).mockReturnValue('Email is already registered')
-        renderRegisterPage()
-        await user.type(screen.getByPlaceholderText(/email address/i), 'duplicate@example.com')
-        await user.type(screen.getByPlaceholderText(/^password$/i), 'Password123!')
-        await user.type(screen.getByPlaceholderText(/re-enter password/i), 'Password123!')
-        await user.click(screen.getByRole('button', { name: /sign up/i }))
-        await waitFor(() => {
-            expect(screen.getByText(/email is already registered/i)).toBeInTheDocument()
-        })
-    })
-
-    it('Register_PassesVerificationMetadataToVerifyEmailPage', async () => {
-        const user = userEvent.setup()
-        vi.mocked(authService.register).mockResolvedValue({
-            message: 'If that email exists, a verification code has been sent',
-            cooldownSeconds: 30,
-            nextResendAt: '2026-03-14T12:00:30.000Z',
-            resendAttemptsRemaining: 2,
-        })
-
-        renderRegisterPage()
-        await user.type(screen.getByPlaceholderText(/email address/i), 'test@example.com')
-        await user.type(screen.getByPlaceholderText(/^password$/i), 'Password123!')
-        await user.type(screen.getByPlaceholderText(/re-enter password/i), 'Password123!')
-        await user.click(screen.getByRole('button', { name: /sign up/i }))
-
-        await waitFor(() => {
-            expect(mockNavigate).toHaveBeenCalledWith('/verify-email', {
-                state: {
-                    email: 'test@example.com',
-                    nextResendAt: '2026-03-14T12:00:30.000Z',
-                    cooldownSeconds: 30,
-                    resendAttemptsRemaining: 2,
-                    message: 'If that email exists, a verification code has been sent',
-                }
-            })
-        }, { timeout: 2500 })
-    }, 7000)
- 
-})
diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx
deleted file mode 100644
index 86c1cf3..0000000
--- a/frontend/src/pages/RegisterPage.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import { useState, FormEvent } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
-import { register, getErrorMessage } from '../services/authService'
-import { Navbar, Eye, EyeOff } from './LoginPage'
-import type { EmailVerificationOtpResponse } from '../types'
-
-interface FieldErrors {
-    email?: string; password?: string; confirmPassword?: string
-}
-
-export default function RegisterPage() {
-    const [displayName, setDisplayName] = useState('')
-    const [email, setEmail] = useState('')
-    const [password, setPassword] = useState('')
-    const [confirmPassword, setConfirmPassword] = useState('')
-    const [showPw, setShowPw] = useState(false)
-    const [showCpw, setShowCpw] = useState(false)
-    const [fieldErrors, setFieldErrors] = useState<FieldErrors>({})
-    const [apiError, setApiError] = useState('')
-    const [loading, setLoading] = useState(false)
-    const [success, setSuccess] = useState(false)
-
-    const navigate = useNavigate()
-
-    function validate(): boolean {
-        const e: FieldErrors = {}
-        if (!email.trim())
-            e.email = 'Email is required'
-        else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim()))
-            e.email = 'Enter a valid email address'
-        if (!password) {
-            e.password = 'Password is required'
-        } else {
-            if (password.length < 8) e.password = 'At least 8 characters'
-            else if (!/[A-Z]/.test(password)) e.password = 'Needs uppercase'
-            else if (!/[a-z]/.test(password)) e.password = 'Needs lowercase'
-            else if (!/[0-9]/.test(password)) e.password = 'Needs a number'
-            else if (!/[^A-Za-z0-9]/.test(password)) e.password = 'Needs a special character'
-        }
-        if (!confirmPassword) e.confirmPassword = 'Please confirm your password'
-        else if (password !== confirmPassword) e.confirmPassword = 'Passwords do not match'
-        setFieldErrors(e)
-        return !Object.keys(e).length
-    }
-
-    async function handleSubmit(ev: FormEvent) {
-        ev.preventDefault()
-        setApiError('')
-        if (!validate()) return
-        setLoading(true)
-        try {
-            const data: EmailVerificationOtpResponse = await register(email.trim(), password, displayName.trim() || undefined)
-            setSuccess(true)
-            setTimeout(() => navigate('/verify-email', {
-                state: {
-                    email: email.trim(),
-                    nextResendAt: data.nextResendAt,
-                    cooldownSeconds: data.cooldownSeconds,
-                    resendAttemptsRemaining: data.resendAttemptsRemaining,
-                    message: data.message,
-                }
-            }), 1400)
-        } catch (err: unknown) {
-            setApiError(getErrorMessage(err))
-        } finally { setLoading(false) }
-    }
-
-    return (
-        <div className="auth-layout">
-            <Navbar />
-
-            <div className="auth-card-wrapper">
-                <div className="auth-card">
-                    <div className="auth-header">
-                        <h2 className="auth-title">Create an account</h2>
-                    </div>
-
-                    {apiError && (
-                        <div className="auth-alert auth-alert--err">
-                            <span>⚠</span> <span>{apiError}</span>
-                        </div>
-                    )}
-                    {success && (
-                        <div className="auth-alert auth-alert--ok">
-                            <span>✓</span> <span>Account created! Check your email for a verification code…</span>
-                        </div>
-                    )}
-
-                    <form onSubmit={handleSubmit} noValidate>
-                        <div className="auth-input-group">
-                            <input
-                                type="text"
-                                value={displayName}
-                                onChange={e => setDisplayName(e.target.value)}
-                                placeholder="Your Name"
-                                className="auth-input"
-                                autoComplete="nickname"
-                                disabled={loading || success}
-                            />
-                        </div>
-
-                        <div className="auth-input-group">
-                            <input
-                                id="register-email"
-                                type="email"
-                                value={email}
-                                onChange={e => { setEmail(e.target.value); setFieldErrors(p => ({ ...p, email: undefined })) }}
-                                placeholder="Email Address"
-                                className={`auth-input${fieldErrors.email ? ' auth-input--error' : ''}`}
-                                autoComplete="email"
-                                disabled={loading || success}
-                            />
-                            {fieldErrors.email && <p className="field-err">{fieldErrors.email}</p>}
-                        </div>
-
-                        <div className="auth-input-group pw-wrap">
-                            <input
-                                id="register-password"
-                                type={showPw ? 'text' : 'password'}
-                                value={password}
-                                onChange={e => { setPassword(e.target.value); setFieldErrors(p => ({ ...p, password: undefined })) }}
-                                placeholder="Password"
-                                className={`auth-input${fieldErrors.password ? ' auth-input--error' : ''}`}
-                                autoComplete="new-password"
-                                disabled={loading || success}
-                            />
-                            <button type="button" className="eye-btn" onClick={() => setShowPw(!showPw)} tabIndex={-1}>
-                                {showPw ? <EyeOff /> : <Eye />}
-                            </button>
-                            {fieldErrors.password && <p className="field-err">{fieldErrors.password}</p>}
-
-                            {password.length > 0 && (
-                                <div className="pw-requirements">
-                                    <div className={`req-item ${password.length >= 8 ? 'met' : ''}`}>
-                                        <span className="req-icon">{password.length >= 8 ? '✓' : '○'}</span> 8+ characters
-                                    </div>
-                                    <div className={`req-item ${/[A-Z]/.test(password) ? 'met' : ''}`}>
-                                        <span className="req-icon">{/[A-Z]/.test(password) ? '✓' : '○'}</span> Uppercase letter
-                                    </div>
-                                    <div className={`req-item ${/[a-z]/.test(password) ? 'met' : ''}`}>
-                                        <span className="req-icon">{/[a-z]/.test(password) ? '✓' : '○'}</span> Lowercase letter
-                                    </div>
-                                    <div className={`req-item ${/[0-9]/.test(password) ? 'met' : ''}`}>
-                                        <span className="req-icon">{/[0-9]/.test(password) ? '✓' : '○'}</span> Number
-                                    </div>
-                                    <div className={`req-item ${/[^A-Za-z0-9]/.test(password) ? 'met' : ''}`}>
-                                        <span className="req-icon">{/[^A-Za-z0-9]/.test(password) ? '✓' : '○'}</span> Special character
-                                    </div>
-                                </div>
-                            )}
-                        </div>
-
-                        <div className="auth-input-group pw-wrap">
-                            <input
-                                id="register-confirm-password"
-                                type={showCpw ? 'text' : 'password'}
-                                value={confirmPassword}
-                                onChange={e => { setConfirmPassword(e.target.value); setFieldErrors(p => ({ ...p, confirmPassword: undefined })) }}
-                                placeholder="Re-enter Password"
-                                className={`auth-input${fieldErrors.confirmPassword ? ' auth-input--error' : ''}`}
-                                autoComplete="new-password"
-                                disabled={loading || success}
-                            />
-                            <button type="button" className="eye-btn" onClick={() => setShowCpw(!showCpw)} tabIndex={-1}>
-                                {showCpw ? <EyeOff /> : <Eye />}
-                            </button>
-                            {fieldErrors.confirmPassword && <p className="field-err">{fieldErrors.confirmPassword}</p>}
-                        </div>
-
-                        <button id="register-submit" type="submit" className="auth-btn-full" disabled={loading || success}>
-                            {loading ? <><span className="spin" /> Creating account…</> : 'Sign Up'}
-                        </button>
-                    </form>
-
-                    <div className="auth-footer">
-                        Already have an account? <Link to="/login">Sign in</Link>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
diff --git a/frontend/src/pages/ResetPasswordPage.tsx b/frontend/src/pages/ResetPasswordPage.tsx
index 603f72f..f975d2e 100644
--- a/frontend/src/pages/ResetPasswordPage.tsx
+++ b/frontend/src/pages/ResetPasswordPage.tsx
@@ -1,7 +1,8 @@
 import { useState, FormEvent } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
 import { resetPassword, getErrorMessage } from '../services/authService'
-import { Navbar, Eye, EyeOff } from './LoginPage'
+import AuthNavbar from '../components/auth/AuthNavbar'
+import { Eye, EyeOff } from '../components/auth/AuthIcons'
 
 export default function ResetPasswordPage() {
     const navigate   = useNavigate()
@@ -26,7 +27,7 @@ export default function ResetPasswordPage() {
         try {
             await resetPassword(resetToken, newPw)
             setSuccess(true)
-            setTimeout(() => navigate('/login'), 2200)
+            setTimeout(() => navigate('/'), 2200)
         } catch (err) {
             setError(getErrorMessage(err))
         } finally { setLoading(false) }
@@ -34,7 +35,7 @@ export default function ResetPasswordPage() {
 
     return (
         <div className="auth-layout">
-            <Navbar />
+            <AuthNavbar />
             <div className="auth-card-wrapper">
                 <div className="auth-card">
                     <div className="auth-header">
diff --git a/frontend/src/pages/SettingsPage.test.tsx b/frontend/src/pages/SettingsPage.test.tsx
index 7f478ba..db1f698 100644
--- a/frontend/src/pages/SettingsPage.test.tsx
+++ b/frontend/src/pages/SettingsPage.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { MemoryRouter } from 'react-router-dom'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
@@ -6,11 +6,14 @@ import SettingsPage from './SettingsPage'
 import * as authService from '../services/authService'
 import * as llmService from '../services/llmService'
 import type { ProviderListResponse } from '../types'
+import { AppThemeProvider } from '../context/AppThemeContext'
 
 vi.mock('../services/authService', () => ({
     getProfile: vi.fn(),
     updateProfile: vi.fn(),
     changePassword: vi.fn(),
+    forgotPassword: vi.fn(),
+    resendEmailVerificationOtp: vi.fn(),
     getErrorMessage: vi.fn((err: unknown) => {
         if (err && typeof err === 'object' && 'response' in err) {
             const resp = (err as { response: { data: { message: string } } }).response
@@ -22,6 +25,7 @@ vi.mock('../services/authService', () => ({
 
 vi.mock('../services/llmService', () => ({
     getProviders: vi.fn(),
+    getProviderModels: vi.fn(),
     upsertProviderKey: vi.fn(),
     deleteProviderKey: vi.fn(),
     testProviderKey: vi.fn(),
@@ -53,6 +57,32 @@ vi.mock('../context/AuthContext', async () => {
     }
 })
 
+let scrollIntoViewMock: ReturnType<typeof vi.fn>
+let storageState: Map<string, string>
+
+function createStorageMock(): Storage {
+    return {
+        get length() {
+            return storageState.size
+        },
+        clear() {
+            storageState.clear()
+        },
+        getItem(key: string) {
+            return storageState.has(key) ? storageState.get(key)! : null
+        },
+        key(index: number) {
+            return Array.from(storageState.keys())[index] ?? null
+        },
+        removeItem(key: string) {
+            storageState.delete(key)
+        },
+        setItem(key: string, value: string) {
+            storageState.set(key, value)
+        },
+    } as Storage
+}
+
 function makeProviders(overrides?: Partial<ProviderListResponse>): ProviderListResponse {
     return {
         defaultProvider: 'openai',
@@ -81,22 +111,42 @@ function makeProviders(overrides?: Partial<ProviderListResponse>): ProviderListR
                 lastTestedAt: null,
                 updatedAt: null,
             },
+            {
+                provider: 'lmstudio',
+                configured: false,
+                maskedLast4: null,
+                isDefault: false,
+                lastTestedAt: null,
+                updatedAt: null,
+            },
         ],
         ...overrides,
     }
 }
 
-function renderSettingsPage() {
+function renderSettingsPage(initialEntries = ['/settings']) {
     return render(
-        <MemoryRouter initialEntries={['/settings']}>
-            <SettingsPage />
-        </MemoryRouter>
+        <MemoryRouter initialEntries={initialEntries}>
+            <AppThemeProvider>
+                <SettingsPage />
+            </AppThemeProvider>
+        </MemoryRouter>,
     )
 }
 
 describe('SettingsPage', () => {
     beforeEach(() => {
         vi.clearAllMocks()
+        storageState = new Map()
+        Object.defineProperty(window, 'localStorage', {
+            configurable: true,
+            value: createStorageMock(),
+        })
+        scrollIntoViewMock = vi.fn()
+        Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
+            configurable: true,
+            value: scrollIntoViewMock,
+        })
         vi.mocked(authService.getProfile).mockResolvedValue({
             id: 1,
             email: 'test@example.com',
@@ -107,55 +157,130 @@ describe('SettingsPage', () => {
             createdAt: '2026-01-01T00:00:00Z',
         })
         vi.mocked(llmService.getProviders).mockResolvedValue(makeProviders())
+        vi.mocked(llmService.getProviderModels).mockImplementation(async provider => {
+            switch (provider) {
+                case 'openai':
+                    return {
+                        provider,
+                        models: [
+                            { id: 'gpt-4.1-mini', displayName: 'GPT-4.1 Mini' },
+                            { id: 'gpt-4.1', displayName: 'GPT-4.1' },
+                        ],
+                    }
+                case 'claude':
+                    return {
+                        provider,
+                        models: [
+                            { id: 'claude-sonnet-4-5', displayName: 'Claude Sonnet 4.5' },
+                        ],
+                    }
+                case 'lmstudio':
+                    return {
+                        provider,
+                        models: [
+                            { id: 'local-model', displayName: 'Local Model' },
+                        ],
+                    }
+                default:
+                    return {
+                        provider,
+                        models: [],
+                    }
+            }
+        })
     })
 
-    it('Settings_PageRenders_ShowsSections', async () => {
+    it('renders the new workspace shell and all major sections', async () => {
         renderSettingsPage()
+
+        expect(await screen.findByRole('heading', { name: 'Profile & identity' })).toBeInTheDocument()
+
+        expect(screen.getByRole('navigation', { name: /settings sections/i })).toBeInTheDocument()
+        expect(screen.getByRole('button', { name: /profile & identity/i })).toBeInTheDocument()
+        expect(screen.getByRole('button', { name: /security & recovery/i })).toBeInTheDocument()
+        expect(screen.getByRole('button', { name: /appearance/i })).toBeInTheDocument()
+        expect(screen.getByRole('button', { name: /workspace preferences/i })).toBeInTheDocument()
+        expect(screen.getByRole('button', { name: /notifications/i })).toBeInTheDocument()
+        expect(screen.getByRole('button', { name: /provider \/ api/i })).toBeInTheDocument()
+        expect(screen.getByRole('button', { name: /data & sessions/i })).toBeInTheDocument()
+        expect(screen.getByRole('button', { name: /account lifecycle/i })).toBeInTheDocument()
+
+        expect(screen.getByRole('heading', { name: 'Security & recovery' })).toBeInTheDocument()
+        expect(screen.getByRole('heading', { name: 'Appearance' })).toBeInTheDocument()
+        expect(screen.getByRole('heading', { name: 'Workspace preferences' })).toBeInTheDocument()
+        expect(screen.getByRole('heading', { name: 'Notifications' })).toBeInTheDocument()
+        expect(screen.getByRole('heading', { name: 'Provider / API configuration' })).toBeInTheDocument()
+        expect(screen.getByRole('heading', { name: 'Data export & session cleanup' })).toBeInTheDocument()
+        expect(screen.getByRole('heading', { name: 'Account deletion or archive state' })).toBeInTheDocument()
+        expect(screen.getByText('Verified')).toBeInTheDocument()
+        expect(screen.getByText('OpenAI')).toBeInTheDocument()
+        expect(screen.getByText('LM Studio')).toBeInTheDocument()
+
         await waitFor(() => {
-            expect(screen.getByText('Account Settings')).toBeInTheDocument()
+            expect(llmService.getProviderModels).toHaveBeenCalledWith('openai')
         })
-        expect(screen.getByText('Profile')).toBeInTheDocument()
-        expect(screen.getByText('Security')).toBeInTheDocument()
-        expect(screen.getByText('Providers (BYOK)')).toBeInTheDocument()
-        expect(screen.getByText('Verified')).toBeInTheDocument()
-        expect(screen.getByText('Saved key: ****1234')).toBeInTheDocument()
+        expect(llmService.getProviderModels).toHaveBeenCalledWith('claude')
+        expect(llmService.getProviderModels).not.toHaveBeenCalledWith('lmstudio')
+        expect(llmService.getProviderModels).not.toHaveBeenCalledWith('gemini')
+    })
+
+    it('keeps the app theme in sync with the stored theme selection', async () => {
+        window.localStorage.setItem('coliee-chat-canvas-theme', 'slate')
+
+        renderSettingsPage()
+
+        await waitFor(() => {
+            expect(document.documentElement.dataset.appTheme).toBe('slate')
+        })
+        expect(screen.getAllByText(/theme: slate/i)[0]).toBeInTheDocument()
     })
 
-    it('Settings_Profile_SaveNameSuccess', async () => {
+    it('scrolls to a section when the rail navigation is used', async () => {
         const user = userEvent.setup()
-        const updatedProfile = {
-            id: 1, email: 'test@example.com', displayName: 'New Name',
-            isEmailVerified: true, authProvider: 'local', profilePictureUrl: null, createdAt: ''
-        }
-        vi.mocked(authService.updateProfile).mockResolvedValue(updatedProfile)
+        renderSettingsPage()
+
+        await waitFor(() => {
+            expect(screen.getByRole('button', { name: /provider \/ api/i })).toBeInTheDocument()
+        })
+
+        await user.click(screen.getByRole('button', { name: /provider \/ api/i }))
+
+        expect(scrollIntoViewMock).toHaveBeenCalledWith({ block: 'start', behavior: 'smooth' })
+    })
+
+    it('updates the profile name from the identity section', async () => {
+        const user = userEvent.setup()
+        vi.mocked(authService.updateProfile).mockResolvedValue({
+            id: 1,
+            email: 'test@example.com',
+            displayName: 'New Name',
+            isEmailVerified: true,
+            authProvider: 'local',
+            profilePictureUrl: null,
+            createdAt: '2026-01-01T00:00:00Z',
+        })
+
         renderSettingsPage()
 
         await waitFor(() => {
             expect(screen.getByDisplayValue('Test User')).toBeInTheDocument()
         })
+
         const input = screen.getByPlaceholderText('Your display name')
         await user.clear(input)
         await user.type(input, 'New Name')
-        await user.click(screen.getByRole('button', { name: /^save$/i }))
+        await user.click(screen.getByRole('button', { name: /save profile/i }))
 
         await waitFor(() => {
             expect(authService.updateProfile).toHaveBeenCalledWith('New Name')
         })
-        await waitFor(() => {
-            expect(screen.getByText(/display name updated/i)).toBeInTheDocument()
-        })
+        expect(screen.getByText(/display name updated/i)).toBeInTheDocument()
     })
 
-    it('Settings_Profile_ShowsInitial', async () => {
-        renderSettingsPage()
-        await waitFor(() => {
-            expect(screen.getByText('T')).toBeInTheDocument()
-        })
-    })
-
-    it('Settings_ChangePassword_Success', async () => {
+    it('changes the password and triggers a sign-out flow', async () => {
         const user = userEvent.setup()
         vi.mocked(authService.changePassword).mockResolvedValue({ message: 'Password changed successfully. Please log in again.' })
+
         renderSettingsPage()
 
         await user.type(screen.getByPlaceholderText('Current password'), 'OldP@ssw0rd')
@@ -166,12 +291,10 @@ describe('SettingsPage', () => {
         await waitFor(() => {
             expect(authService.changePassword).toHaveBeenCalledWith('OldP@ssw0rd', 'NewP@ssw0rd!')
         })
-        await waitFor(() => {
-            expect(screen.getByText(/password changed/i)).toBeInTheDocument()
-        })
+        expect(screen.getByText(/password changed/i)).toBeInTheDocument()
     })
 
-    it('Settings_Providers_SaveKeySuccess', async () => {
+    it('saves provider keys, tests them, and updates the default provider', async () => {
         const user = userEvent.setup()
         vi.mocked(llmService.upsertProviderKey).mockResolvedValue(
             makeProviders({
@@ -200,8 +323,16 @@ describe('SettingsPage', () => {
                         lastTestedAt: null,
                         updatedAt: '2026-03-20T12:00:00Z',
                     },
-                ]
-            })
+                    {
+                        provider: 'lmstudio',
+                        configured: true,
+                        maskedLast4: '****udio',
+                        isDefault: false,
+                        lastTestedAt: null,
+                        updatedAt: '2026-03-20T13:00:00Z',
+                    },
+                ],
+            }),
         )
 
         renderSettingsPage()
@@ -210,18 +341,17 @@ describe('SettingsPage', () => {
             expect(screen.getByText('Gemini')).toBeInTheDocument()
         })
 
+        const geminiCard = screen.getByPlaceholderText('AIza...').closest('.settings-provider-card')
+        expect(geminiCard).not.toBeNull()
+
         await user.type(screen.getByPlaceholderText('AIza...'), 'AIza-test-key')
-        await user.click(screen.getByRole('button', { name: 'Save Key' }))
+        await user.click(within(geminiCard as HTMLElement).getByRole('button', { name: /save key/i }))
 
         await waitFor(() => {
             expect(llmService.upsertProviderKey).toHaveBeenCalledWith('gemini', 'AIza-test-key')
         })
         expect(screen.getByText(/gemini key saved/i)).toBeInTheDocument()
-        expect(screen.getByText('Saved key: ****9999')).toBeInTheDocument()
-    })
 
-    it('Settings_Providers_SetDefaultProvider', async () => {
-        const user = userEvent.setup()
         vi.mocked(llmService.setDefaultProvider).mockResolvedValue(
             makeProviders({
                 defaultProvider: 'claude',
@@ -244,49 +374,41 @@ describe('SettingsPage', () => {
                     },
                     {
                         provider: 'gemini',
-                        configured: false,
-                        maskedLast4: null,
+                        configured: true,
+                        maskedLast4: '****9999',
                         isDefault: false,
                         lastTestedAt: null,
-                        updatedAt: null,
+                        updatedAt: '2026-03-20T12:00:00Z',
                     },
-                ]
-            })
+                    {
+                        provider: 'lmstudio',
+                        configured: true,
+                        maskedLast4: '****udio',
+                        isDefault: false,
+                        lastTestedAt: null,
+                        updatedAt: '2026-03-20T13:00:00Z',
+                    },
+                ],
+            }),
         )
 
-        renderSettingsPage()
-
-        await waitFor(() => {
-            expect(screen.getByText('Claude')).toBeInTheDocument()
-        })
-
         await user.click(screen.getAllByLabelText(/use as default/i)[1])
 
         await waitFor(() => {
             expect(llmService.setDefaultProvider).toHaveBeenCalledWith('claude')
         })
         expect(screen.getByText(/claude is now your default provider/i)).toBeInTheDocument()
-    })
 
-    it('Settings_Providers_TestKeyFailure_ShowsError', async () => {
-        const user = userEvent.setup()
         vi.mocked(llmService.testProviderKey).mockRejectedValue({
             response: {
                 data: {
                     message: 'The saved API key is invalid.',
                     code: 'invalid_key',
-                }
-            }
-        })
-
-        renderSettingsPage()
-
-        await waitFor(() => {
-            expect(screen.getByText('OpenAI')).toBeInTheDocument()
+                },
+            },
         })
 
-        const buttons = screen.getAllByRole('button', { name: 'Test Key' })
-        await user.click(buttons[0])
+        await user.click(screen.getAllByRole('button', { name: /test key/i })[0])
 
         await waitFor(() => {
             expect(screen.getByText(/saved api key is invalid/i)).toBeInTheDocument()
diff --git a/frontend/src/pages/SettingsPage.tsx b/frontend/src/pages/SettingsPage.tsx
index 57e5beb..c100cd9 100644
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -1,13 +1,56 @@
-import { useState, useEffect, FormEvent } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useEffect, useMemo, useRef, useState, type FormEvent, type ReactNode, type RefObject } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import {
+    AlertTriangle,
+    Bell,
+    CircleCheckBig,
+    Download,
+    Eye,
+    EyeOff,
+    KeyRound,
+    Palette,
+    Shield,
+    Sparkles,
+    SlidersHorizontal,
+    Trash2,
+    UserRound,
+    Settings2,
+    type LucideIcon,
+} from 'lucide-react'
 import { useAuth } from '../context/AuthContext'
-import { getProfile, updateProfile, changePassword, getErrorMessage, ProfileResponse } from '../services/authService'
-import { deleteProviderKey, getLlmError, getProviders, setDefaultProvider, testProviderKey, upsertProviderKey } from '../services/llmService'
-import type { LlmProviderId, ProviderListResponse, ProviderSummary } from '../types'
-import { Eye, EyeOff } from './LoginPage'
+import {
+    changePassword,
+    getErrorMessage,
+    getProfile,
+    forgotPassword,
+    resendEmailVerificationOtp,
+    updateProfile,
+    type ProfileResponse,
+} from '../services/authService'
+import {
+    deleteProviderKey,
+    getLlmError,
+    getProviderModels,
+    getProviders,
+    setDefaultProvider,
+    testProviderKey,
+    upsertProviderKey,
+} from '../services/llmService'
+import { useAppTheme } from '../context/AppThemeContext'
+import type { ChatCanvasTheme, LlmProviderId, ProviderListResponse, ProviderModel, ProviderSummary } from '../types'
 
 const MAX_NAME_LENGTH = 100
 
+const THEME_OPTIONS: Array<{
+    id: ChatCanvasTheme
+    label: string
+    description: string
+}> = [
+    { id: 'midnight', label: 'Midnight', description: 'Dark canvas with high-contrast surfaces.' },
+    { id: 'monochrome', label: 'Monochrome', description: 'Minimal black-and-white workspace.' },
+    { id: 'slate', label: 'Slate', description: 'Cool-toned shell with soft blue depth.' },
+]
+
 const PROVIDERS: Array<{
     id: LlmProviderId
     label: string
@@ -17,43 +60,303 @@ const PROVIDERS: Array<{
     { id: 'openai', label: 'OpenAI', helper: 'GPT models via OpenAI API', placeholder: 'sk-...' },
     { id: 'claude', label: 'Claude', helper: 'Anthropic Claude models', placeholder: 'sk-ant-...' },
     { id: 'gemini', label: 'Gemini', helper: 'Google Gemini models', placeholder: 'AIza...' },
+    { id: 'lmstudio', label: 'LM Studio', helper: 'Local OpenAI-compatible server at http://localhost:1234/v1', placeholder: 'lmstudio' },
 ]
 
+const WORKSPACE_PREFS_STORAGE_KEY = 'coliee-settings-workspace-prefs'
+const NOTIFICATION_PREFS_STORAGE_KEY = 'coliee-settings-notification-prefs'
+const ACCOUNT_LIFECYCLE_STORAGE_KEY = 'coliee-settings-account-lifecycle'
+const GUEST_STORAGE_KEY = 'coliee-guest-state-v2'
+const LEGACY_GUEST_STORAGE_KEYS = ['coliee-frontned2-guest-state-v1']
+
 type ProviderInputs = Record<LlmProviderId, string>
 type ProviderActions = Record<LlmProviderId, '' | 'save' | 'remove' | 'test'>
+type ProviderModelStatus = 'idle' | 'loading' | 'loaded' | 'error'
+type ProviderModelsByProvider = Record<LlmProviderId, ProviderModel[]>
+type ProviderModelStatusByProvider = Record<LlmProviderId, ProviderModelStatus>
+type SettingsSectionId =
+    | 'profile'
+    | 'security'
+    | 'appearance'
+    | 'workspace'
+    | 'notifications'
+    | 'providers'
+    | 'data'
+    | 'account'
+
+interface WorkspacePreferences {
+    compactDensity: boolean
+    autoOpenLatestCanvas: boolean
+    preserveDrafts: boolean
+    showProviderMetadata: boolean
+}
+
+interface NotificationPreferences {
+    emailDigest: boolean
+    inAppActivity: boolean
+    providerAlerts: boolean
+    mentionReminders: boolean
+    weeklySummary: boolean
+}
+
+type AccountLifecycleState = 'active' | 'deletion-requested' | 'archived-local'
+
+interface LocalStatus {
+    kind: 'error' | 'success' | 'info'
+    message: string
+}
 
 const EMPTY_PROVIDER_INPUTS: ProviderInputs = {
     openai: '',
     claude: '',
     gemini: '',
+    lmstudio: '',
 }
 
 const EMPTY_PROVIDER_ACTIONS: ProviderActions = {
     openai: '',
     claude: '',
     gemini: '',
+    lmstudio: '',
+}
+
+const EMPTY_PROVIDER_MODELS: ProviderModelsByProvider = {
+    openai: [],
+    claude: [],
+    gemini: [],
+    lmstudio: [],
+}
+
+const EMPTY_PROVIDER_MODEL_STATUS: ProviderModelStatusByProvider = {
+    openai: 'idle',
+    claude: 'idle',
+    gemini: 'idle',
+    lmstudio: 'idle',
+}
+
+const DEFAULT_WORKSPACE_PREFERENCES: WorkspacePreferences = {
+    compactDensity: true,
+    autoOpenLatestCanvas: true,
+    preserveDrafts: true,
+    showProviderMetadata: true,
+}
+
+const DEFAULT_NOTIFICATION_PREFERENCES: NotificationPreferences = {
+    emailDigest: false,
+    inAppActivity: true,
+    providerAlerts: true,
+    mentionReminders: true,
+    weeklySummary: false,
+}
+
+function readStoredJson<T>(storageKey: string, fallback: T): T {
+    if (typeof window === 'undefined')
+        return fallback
+
+    const storage = window.localStorage
+    if (!storage || typeof storage.getItem !== 'function')
+        return fallback
+
+    const raw = storage.getItem(storageKey)
+    if (!raw)
+        return fallback
+
+    try {
+        return JSON.parse(raw) as T
+    } catch {
+        return fallback
+    }
+}
+
+function writeStoredJson(storageKey: string, value: unknown) {
+    if (typeof window === 'undefined')
+        return
+
+    const storage = window.localStorage
+    if (!storage || typeof storage.setItem !== 'function')
+        return
+
+    storage.setItem(storageKey, JSON.stringify(value))
+}
+
+function removeStoredKeys(keys: string[]) {
+    if (typeof window === 'undefined')
+        return
+
+    const storage = window.localStorage
+    if (!storage || typeof storage.removeItem !== 'function')
+        return
+
+    keys.forEach(key => storage.removeItem(key))
+}
+
+function formatTimestamp(value: string | null): string {
+    if (!value)
+        return 'Not tested yet'
+
+    return new Date(value).toLocaleString()
+}
+
+function formatDateLabel(value: string | null): string {
+    if (!value)
+        return 'Unknown'
+
+    return new Date(value).toLocaleDateString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+    })
+}
+
+function formatThemeLabel(theme: ChatCanvasTheme): string {
+    return THEME_OPTIONS.find(option => option.id === theme)?.label ?? theme
+}
+
+function formatAuthMethod(authProvider?: string | null): string {
+    if (!authProvider)
+        return 'Unknown'
+
+    if (authProvider === 'google')
+        return 'Google'
+
+    if (authProvider === 'local')
+        return 'Email + password'
+
+    return authProvider
+}
+
+function downloadJson(filename: string, data: unknown) {
+    if (typeof window === 'undefined')
+        return
+
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const anchor = document.createElement('a')
+    anchor.href = url
+    anchor.download = filename
+    anchor.rel = 'noreferrer'
+    document.body.appendChild(anchor)
+    anchor.click()
+    anchor.remove()
+    URL.revokeObjectURL(url)
+}
+
+function buildAccountRequestMessage(email: string, displayName: string, state: AccountLifecycleState): string {
+    const stateLabel = state === 'archived-local' ? 'archive request' : 'deletion request'
+    return [
+        `Account ${stateLabel} request`,
+        `Email: ${email}`,
+        `Display name: ${displayName}`,
+        `Submitted from Coliee settings`,
+    ].join('\n')
+}
+
+function SectionShell({
+    refProp,
+    eyebrow,
+    title,
+    description,
+    chips,
+    children,
+}: {
+    refProp: RefObject<HTMLDivElement | null>
+    eyebrow: string
+    title: string
+    description: string
+    chips?: ReactNode
+    children: ReactNode
+}) {
+    return (
+        <section ref={refProp} tabIndex={-1} className="settings-center-section">
+            <div className="settings-center-section__header">
+                <div className="settings-center-section__copy">
+                    <p className="settings-center-kicker">{eyebrow}</p>
+                    <h3 className="settings-center-section__title">{title}</h3>
+                    <p className="settings-center-section__description">{description}</p>
+                </div>
+                {chips ? <div className="settings-center-section__chips">{chips}</div> : null}
+            </div>
+            {children}
+        </section>
+    )
+}
+
+function ToggleRow({
+    label,
+    description,
+    checked,
+    onChange,
+}: {
+    label: string
+    description: string
+    checked: boolean
+    onChange: (checked: boolean) => void
+}) {
+    return (
+        <label className="settings-toggle-row">
+            <div className="settings-toggle-row__copy">
+                <span className="settings-toggle-row__label">{label}</span>
+                <span className="settings-toggle-row__description">{description}</span>
+            </div>
+            <span className="settings-toggle-row__control">
+                <input
+                    type="checkbox"
+                    checked={checked}
+                    onChange={event => onChange(event.target.checked)}
+                />
+                <span aria-hidden="true" className="settings-toggle-row__track">
+                    <span className="settings-toggle-row__thumb" />
+                </span>
+            </span>
+        </label>
+    )
+}
+
+function StateBadge({
+    kind,
+    children,
+}: {
+    kind: 'neutral' | 'success' | 'warning' | 'danger'
+    children: ReactNode
+}) {
+    return <span className={`settings-badge settings-badge--${kind}`}>{children}</span>
+}
+
+function NoticeIcon({ kind }: { kind: LocalStatus['kind'] }) {
+    return kind === 'error' ? <AlertTriangle size={16} /> : <CircleCheckBig size={16} />
 }
 
 export default function SettingsPage() {
+    const location = useLocation()
     const navigate = useNavigate()
     const { user, logout } = useAuth()
+    const { theme, setTheme } = useAppTheme()
+
+    const profileSectionRef = useRef<HTMLDivElement | null>(null)
+    const securitySectionRef = useRef<HTMLDivElement | null>(null)
+    const appearanceSectionRef = useRef<HTMLDivElement | null>(null)
+    const workspaceSectionRef = useRef<HTMLDivElement | null>(null)
+    const notificationsSectionRef = useRef<HTMLDivElement | null>(null)
+    const providersSectionRef = useRef<HTMLDivElement | null>(null)
+    const dataSectionRef = useRef<HTMLDivElement | null>(null)
+    const accountSectionRef = useRef<HTMLDivElement | null>(null)
+    const [activeSection, setActiveSection] = useState<SettingsSectionId>('profile')
 
     const [profile, setProfile] = useState<ProfileResponse | null>(null)
     const [providerList, setProviderList] = useState<ProviderListResponse | null>(null)
     const [providersLoading, setProvidersLoading] = useState(true)
     const [providerInputs, setProviderInputs] = useState<ProviderInputs>(EMPTY_PROVIDER_INPUTS)
     const [providerActions, setProviderActions] = useState<ProviderActions>(EMPTY_PROVIDER_ACTIONS)
+    const [providerModels, setProviderModels] = useState<ProviderModelsByProvider>(EMPTY_PROVIDER_MODELS)
+    const [providerModelStatus, setProviderModelStatus] = useState<ProviderModelStatusByProvider>(EMPTY_PROVIDER_MODEL_STATUS)
     const [defaultProviderLoading, setDefaultProviderLoading] = useState(false)
-    const [providerOk, setProviderOk] = useState('')
-    const [providerErr, setProviderErr] = useState('')
+    const [providerNotice, setProviderNotice] = useState<LocalStatus | null>(null)
 
-    // Profile state
     const [dispName, setDispName] = useState('')
     const [nameLoading, setNameLoading] = useState(false)
-    const [nameOk, setNameOk] = useState(false)
-    const [nameErr, setNameErr] = useState('')
+    const [nameNotice, setNameNotice] = useState<LocalStatus | null>(null)
+    const [verificationNotice, setVerificationNotice] = useState<LocalStatus | null>(null)
 
-    // Change password state
     const [curPw, setCurPw] = useState('')
     const [newPw, setNewPw] = useState('')
     const [confPw, setConfPw] = useState('')
@@ -61,8 +364,16 @@ export default function SettingsPage() {
     const [showNew, setShowNew] = useState(false)
     const [showConf, setShowConf] = useState(false)
     const [pwLoading, setPwLoading] = useState(false)
-    const [pwOk, setPwOk] = useState(false)
-    const [pwErr, setPwErr] = useState('')
+    const [pwNotice, setPwNotice] = useState<LocalStatus | null>(null)
+    const [recoveryLoading, setRecoveryLoading] = useState(false)
+    const [recoveryNotice, setRecoveryNotice] = useState<LocalStatus | null>(null)
+
+    const [workspacePrefs, setWorkspacePrefs] = useState<WorkspacePreferences>(() => readStoredJson(WORKSPACE_PREFS_STORAGE_KEY, DEFAULT_WORKSPACE_PREFERENCES))
+    const [workspaceLastSavedAt, setWorkspaceLastSavedAt] = useState(() => new Date().toISOString())
+    const [notificationPrefs, setNotificationPrefs] = useState<NotificationPreferences>(() => readStoredJson(NOTIFICATION_PREFS_STORAGE_KEY, DEFAULT_NOTIFICATION_PREFERENCES))
+    const [notificationLastSavedAt, setNotificationLastSavedAt] = useState(() => new Date().toISOString())
+    const [accountLifecycle, setAccountLifecycle] = useState<AccountLifecycleState>(() => readStoredJson(ACCOUNT_LIFECYCLE_STORAGE_KEY, 'active' as AccountLifecycleState))
+    const [dataNotice, setDataNotice] = useState<LocalStatus | null>(null)
 
     useEffect(() => {
         let isActive = true
@@ -75,17 +386,26 @@ export default function SettingsPage() {
                 getProviders(),
             ])
 
-            if (!isActive) return
+            if (!isActive)
+                return
 
             if (profileResult.status === 'fulfilled') {
                 setProfile(profileResult.value)
                 setDispName(profileResult.value.displayName ?? '')
+            } else {
+                setNameNotice({
+                    kind: 'error',
+                    message: getErrorMessage(profileResult.reason),
+                })
             }
 
             if (providerResult.status === 'fulfilled') {
                 setProviderList(providerResult.value)
             } else {
-                setProviderErr(getLlmError(providerResult.reason).message)
+                setProviderNotice({
+                    kind: 'error',
+                    message: getLlmError(providerResult.reason).message,
+                })
             }
 
             setProvidersLoading(false)
@@ -98,9 +418,151 @@ export default function SettingsPage() {
         }
     }, [])
 
+    useEffect(() => {
+        if (typeof IntersectionObserver === 'undefined')
+            return
+
+        const sections: Array<{ id: SettingsSectionId; element: HTMLDivElement | null }> = [
+            { id: 'profile', element: profileSectionRef.current },
+            { id: 'security', element: securitySectionRef.current },
+            { id: 'appearance', element: appearanceSectionRef.current },
+            { id: 'workspace', element: workspaceSectionRef.current },
+            { id: 'notifications', element: notificationsSectionRef.current },
+            { id: 'providers', element: providersSectionRef.current },
+            { id: 'data', element: dataSectionRef.current },
+            { id: 'account', element: accountSectionRef.current },
+        ]
+
+        const targets = sections.filter(item => item.element)
+        if (targets.length === 0)
+            return
+
+        const observer = new IntersectionObserver(entries => {
+            const visibleEntries = entries
+                .filter(entry => entry.isIntersecting)
+                .sort((a, b) => b.intersectionRatio - a.intersectionRatio)
+
+            const next = visibleEntries[0]
+            if (!next)
+                return
+
+            const nextSection = next.target.getAttribute('data-settings-section') as SettingsSectionId | null
+            if (nextSection)
+                setActiveSection(nextSection)
+        }, {
+            threshold: [0.18, 0.35, 0.5, 0.72],
+            rootMargin: '-18% 0px -45% 0px',
+        })
+
+        targets.forEach(item => {
+            if (item.element)
+                observer.observe(item.element)
+        })
+
+        return () => observer.disconnect()
+    }, [providersLoading])
+
+    useEffect(() => {
+        if (!providerList)
+            return
+
+        const configuredProviders = new Set(
+            providerList.providers
+                .filter(item => item.configured)
+                .map(item => item.provider),
+        )
+
+        setProviderModels(current => {
+            const next = { ...current }
+            let changed = false
+
+            for (const provider of PROVIDERS.map(item => item.id)) {
+                if (!configuredProviders.has(provider) && current[provider].length > 0) {
+                    next[provider] = []
+                    changed = true
+                }
+            }
+
+            return changed ? next : current
+        })
+
+        setProviderModelStatus(current => {
+            const next = { ...current }
+            let changed = false
+
+            for (const provider of PROVIDERS.map(item => item.id)) {
+                if (!configuredProviders.has(provider) && current[provider] !== 'idle') {
+                    next[provider] = 'idle'
+                    changed = true
+                }
+            }
+
+            return changed ? next : current
+        })
+
+        for (const provider of configuredProviders) {
+            if (providerModelStatus[provider] === 'idle')
+                void loadProviderModels(provider)
+        }
+    }, [providerList, providerModelStatus])
+
+    useEffect(() => {
+        const section = new URLSearchParams(location.search).get('section') as SettingsSectionId | null
+        if (!section)
+            return
+
+        const map: Record<SettingsSectionId, RefObject<HTMLDivElement | null>> = {
+            profile: profileSectionRef,
+            security: securitySectionRef,
+            appearance: appearanceSectionRef,
+            workspace: workspaceSectionRef,
+            notifications: notificationsSectionRef,
+            providers: providersSectionRef,
+            data: dataSectionRef,
+            account: accountSectionRef,
+        }
+
+        const sectionElement = map[section]?.current
+        if (!sectionElement)
+            return
+
+        const frameId = window.requestAnimationFrame(() => {
+            focusSection(sectionElement, section)
+        })
+
+        return () => window.cancelAnimationFrame(frameId)
+    }, [location.search, providersLoading])
+
+    useEffect(() => {
+        writeStoredJson(WORKSPACE_PREFS_STORAGE_KEY, workspacePrefs)
+        setWorkspaceLastSavedAt(new Date().toISOString())
+    }, [workspacePrefs])
+
+    useEffect(() => {
+        writeStoredJson(NOTIFICATION_PREFS_STORAGE_KEY, notificationPrefs)
+        setNotificationLastSavedAt(new Date().toISOString())
+    }, [notificationPrefs])
+
+    useEffect(() => {
+        writeStoredJson(ACCOUNT_LIFECYCLE_STORAGE_KEY, accountLifecycle)
+    }, [accountLifecycle])
+
+    function focusSection(sectionElement: HTMLDivElement | null, sectionId?: SettingsSectionId) {
+        if (!sectionElement)
+            return
+
+        if (sectionId)
+            setActiveSection(sectionId)
+
+        sectionElement.scrollIntoView?.({ block: 'start', behavior: 'smooth' })
+        sectionElement.focus()
+    }
+
     function getInitial(): string {
-        if (profile?.displayName) return profile.displayName.charAt(0).toUpperCase()
-        if (profile?.email) return profile.email.charAt(0).toUpperCase()
+        if (profile?.displayName)
+            return profile.displayName.charAt(0).toUpperCase()
+        if (profile?.email)
+            return profile.email.charAt(0).toUpperCase()
         return '?'
     }
 
@@ -117,30 +579,45 @@ export default function SettingsPage() {
     }
 
     function showProviderMessage(message: string, isError = false) {
-        if (isError) {
-            setProviderErr(message)
-            setProviderOk('')
-            return
-        }
+        setProviderNotice({
+            kind: isError ? 'error' : 'success',
+            message,
+        })
+    }
 
-        setProviderOk(message)
-        setProviderErr('')
+    function resetProviderModels(provider: LlmProviderId) {
+        setProviderModels(prev => ({ ...prev, [provider]: [] }))
+        setProviderModelStatus(prev => ({ ...prev, [provider]: 'idle' }))
     }
 
-    function formatTimestamp(value: string | null): string {
-        if (!value) return 'Not tested yet'
+    async function loadProviderModels(provider: LlmProviderId) {
+        setProviderModelStatus(prev => {
+            if (prev[provider] === 'loading')
+                return prev
 
-        return new Date(value).toLocaleString()
+            return { ...prev, [provider]: 'loading' }
+        })
+
+        try {
+            const response = await getProviderModels(provider)
+            setProviderModels(prev => ({ ...prev, [provider]: response.models }))
+            setProviderModelStatus(prev => ({ ...prev, [provider]: 'loaded' }))
+        } catch {
+            setProviderModels(prev => ({ ...prev, [provider]: [] }))
+            setProviderModelStatus(prev => ({ ...prev, [provider]: 'error' }))
+        }
     }
 
     async function handleNameSave(ev: FormEvent) {
         ev.preventDefault()
-        setNameErr('')
-        setNameOk(false)
-        const trimmed = dispName.trim()
+        setNameNotice(null)
 
+        const trimmed = dispName.trim()
         if (trimmed.length > MAX_NAME_LENGTH) {
-            setNameErr(`Display name must be ${MAX_NAME_LENGTH} characters or fewer`)
+            setNameNotice({
+                kind: 'error',
+                message: `Display name must be ${MAX_NAME_LENGTH} characters or fewer.`,
+            })
             return
         }
 
@@ -149,43 +626,226 @@ export default function SettingsPage() {
             const updated = await updateProfile(trimmed || null)
             setProfile(updated)
             setDispName(updated.displayName ?? '')
-            setNameOk(true)
-            setTimeout(() => setNameOk(false), 3000)
-        } catch (err) {
-            setNameErr(getErrorMessage(err))
+            setNameNotice({
+                kind: 'success',
+                message: 'Display name updated.',
+            })
+        } catch (error) {
+            setNameNotice({
+                kind: 'error',
+                message: getErrorMessage(error),
+            })
         } finally {
             setNameLoading(false)
         }
     }
 
     const isGoogleUser = profile?.authProvider === 'google'
+    const accountEmail = profile?.email ?? user?.email ?? '—'
+    const accountDisplayName = profile?.displayName ?? user?.displayName ?? 'Account'
+    const verifiedLabel = profile?.isEmailVerified ? 'Verified' : 'Unverified'
+    const joinedDateLabel = formatDateLabel(profile?.createdAt ?? null)
+    const configuredProvidersCount = providerList?.providers.filter(item => item.configured).length ?? 0
+    const defaultProviderLabel = providerList?.defaultProvider
+        ? (PROVIDERS.find(item => item.id === providerList.defaultProvider)?.label ?? providerList.defaultProvider)
+        : 'None selected'
+    const activeThemeLabel = formatThemeLabel(theme)
+    const authMethodLabel = formatAuthMethod(profile?.authProvider)
+    const currentAccountStateLabel = accountLifecycle === 'active'
+        ? 'Active'
+        : accountLifecycle === 'deletion-requested'
+            ? 'Deletion requested'
+            : 'Archived locally'
+
+    const sectionNavItems: Array<{
+        id: SettingsSectionId
+        label: string
+        description: string
+        icon: LucideIcon
+        ref: RefObject<HTMLDivElement | null>
+    }> = [
+        {
+            id: 'profile',
+            label: 'Profile & identity',
+            description: 'Name, email, and verification',
+            icon: UserRound,
+            ref: profileSectionRef,
+        },
+        {
+            id: 'security',
+            label: 'Security & recovery',
+            description: 'Passwords and recovery email',
+            icon: Shield,
+            ref: securitySectionRef,
+        },
+        {
+            id: 'appearance',
+            label: 'Appearance',
+            description: 'Theme and surface style',
+            icon: Palette,
+            ref: appearanceSectionRef,
+        },
+        {
+            id: 'workspace',
+            label: 'Workspace preferences',
+            description: 'Canvas behavior and density',
+            icon: SlidersHorizontal,
+            ref: workspaceSectionRef,
+        },
+        {
+            id: 'notifications',
+            label: 'Notifications',
+            description: 'Email and in-app alerts',
+            icon: Bell,
+            ref: notificationsSectionRef,
+        },
+        {
+            id: 'providers',
+            label: 'Provider / API',
+            description: 'BYOK and defaults',
+            icon: KeyRound,
+            ref: providersSectionRef,
+        },
+        {
+            id: 'data',
+            label: 'Data & sessions',
+            description: 'Export and cleanup',
+            icon: Download,
+            ref: dataSectionRef,
+        },
+        {
+            id: 'account',
+            label: 'Account lifecycle',
+            description: 'Archive and deletion staging',
+            icon: Trash2,
+            ref: accountSectionRef,
+        },
+    ]
+
+    const exportPayload = useMemo(() => ({
+        exportedAt: new Date().toISOString(),
+        theme,
+        profile: profile ? {
+            id: profile.id,
+            email: profile.email,
+            displayName: profile.displayName,
+            isEmailVerified: profile.isEmailVerified,
+            authProvider: profile.authProvider,
+            createdAt: profile.createdAt,
+        } : null,
+        providers: providerList?.providers.map(provider => ({
+            provider: provider.provider,
+            configured: provider.configured,
+            maskedLast4: provider.maskedLast4,
+            isDefault: provider.isDefault,
+            lastTestedAt: provider.lastTestedAt,
+            updatedAt: provider.updatedAt,
+        })) ?? [],
+        workspacePreferences: workspacePrefs,
+        notificationPreferences: notificationPrefs,
+        accountLifecycle,
+    }), [accountLifecycle, notificationPrefs, profile, providerList, theme, workspacePrefs])
 
     async function handlePasswordChange(ev: FormEvent) {
         ev.preventDefault()
-        setPwErr('')
-        setPwOk(false)
-        if (!curPw) { setPwErr('Current password is required'); return }
-        if (newPw.length < 8) { setPwErr('New password must be at least 8 characters'); return }
-        if (!/[A-Z]/.test(newPw)) { setPwErr('Password must contain at least one uppercase letter'); return }
-        if (!/[a-z]/.test(newPw)) { setPwErr('Password must contain at least one lowercase letter'); return }
-        if (!/\d/.test(newPw)) { setPwErr('Password must contain at least one number'); return }
-        if (!/[^a-zA-Z0-9]/.test(newPw)) { setPwErr('Password must contain at least one special character'); return }
-        if (newPw !== confPw) { setPwErr('Passwords do not match'); return }
+        setPwNotice(null)
+
+        if (!curPw) {
+            setPwNotice({ kind: 'error', message: 'Current password is required.' })
+            return
+        }
+        if (newPw.length < 8) {
+            setPwNotice({ kind: 'error', message: 'New password must be at least 8 characters.' })
+            return
+        }
+        if (!/[A-Z]/.test(newPw)) {
+            setPwNotice({ kind: 'error', message: 'Password must contain at least one uppercase letter.' })
+            return
+        }
+        if (!/[a-z]/.test(newPw)) {
+            setPwNotice({ kind: 'error', message: 'Password must contain at least one lowercase letter.' })
+            return
+        }
+        if (!/\d/.test(newPw)) {
+            setPwNotice({ kind: 'error', message: 'Password must contain at least one number.' })
+            return
+        }
+        if (!/[^a-zA-Z0-9]/.test(newPw)) {
+            setPwNotice({ kind: 'error', message: 'Password must contain at least one special character.' })
+            return
+        }
+        if (newPw !== confPw) {
+            setPwNotice({ kind: 'error', message: 'Passwords do not match.' })
+            return
+        }
+
         setPwLoading(true)
         try {
             await changePassword(curPw, newPw)
-            setPwOk(true)
+            setPwNotice({
+                kind: 'success',
+                message: 'Password changed. You will be signed out shortly.',
+            })
             setCurPw('')
             setNewPw('')
             setConfPw('')
             setTimeout(() => logout().then(() => navigate('/login')), 2200)
-        } catch (err) {
-            setPwErr(getErrorMessage(err))
+        } catch (error) {
+            setPwNotice({
+                kind: 'error',
+                message: getErrorMessage(error),
+            })
         } finally {
             setPwLoading(false)
         }
     }
 
+    async function handleSendRecoveryEmail() {
+        if (!accountEmail || accountEmail === '—')
+            return
+
+        setRecoveryLoading(true)
+        setRecoveryNotice(null)
+
+        try {
+            const response = await forgotPassword(accountEmail)
+            setRecoveryNotice({
+                kind: 'success',
+                message: response.message,
+            })
+        } catch (error) {
+            setRecoveryNotice({
+                kind: 'error',
+                message: getErrorMessage(error),
+            })
+        } finally {
+            setRecoveryLoading(false)
+        }
+    }
+
+    async function handleResendVerification() {
+        if (!accountEmail || accountEmail === '—')
+            return
+
+        setRecoveryLoading(true)
+        setVerificationNotice(null)
+
+        try {
+            const response = await resendEmailVerificationOtp(accountEmail)
+            setVerificationNotice({
+                kind: 'success',
+                message: response.message,
+            })
+        } catch (error) {
+            setVerificationNotice({
+                kind: 'error',
+                message: getErrorMessage(error),
+            })
+        } finally {
+            setRecoveryLoading(false)
+        }
+    }
+
     async function handleProviderSave(provider: LlmProviderId) {
         const apiKey = providerInputs[provider].trim()
         if (!apiKey) {
@@ -197,10 +857,11 @@ export default function SettingsPage() {
         try {
             const nextProviderList = await upsertProviderKey(provider, apiKey)
             setProviderList(nextProviderList)
+            resetProviderModels(provider)
             setProviderInputs(prev => ({ ...prev, [provider]: '' }))
             showProviderMessage(`${PROVIDERS.find(item => item.id === provider)?.label} key saved.`)
-        } catch (err) {
-            showProviderMessage(getLlmError(err).message, true)
+        } catch (error) {
+            showProviderMessage(getLlmError(error).message, true)
         } finally {
             setProviderAction(provider, '')
         }
@@ -211,9 +872,10 @@ export default function SettingsPage() {
         try {
             const nextProviderList = await deleteProviderKey(provider)
             setProviderList(nextProviderList)
+            resetProviderModels(provider)
             showProviderMessage(`${PROVIDERS.find(item => item.id === provider)?.label} key removed.`)
-        } catch (err) {
-            showProviderMessage(getLlmError(err).message, true)
+        } catch (error) {
+            showProviderMessage(getLlmError(error).message, true)
         } finally {
             setProviderAction(provider, '')
         }
@@ -224,9 +886,10 @@ export default function SettingsPage() {
         try {
             const nextProviderList = await testProviderKey(provider)
             setProviderList(nextProviderList)
+            resetProviderModels(provider)
             showProviderMessage(`${PROVIDERS.find(item => item.id === provider)?.label} key is valid.`)
-        } catch (err) {
-            showProviderMessage(getLlmError(err).message, true)
+        } catch (error) {
+            showProviderMessage(getLlmError(error).message, true)
         } finally {
             setProviderAction(provider, '')
         }
@@ -238,307 +901,767 @@ export default function SettingsPage() {
             const nextProviderList = await setDefaultProvider(provider)
             setProviderList(nextProviderList)
             showProviderMessage(`${PROVIDERS.find(item => item.id === provider)?.label} is now your default provider.`)
-        } catch (err) {
-            showProviderMessage(getLlmError(err).message, true)
+        } catch (error) {
+            showProviderMessage(getLlmError(error).message, true)
         } finally {
             setDefaultProviderLoading(false)
         }
     }
 
+    function handleThemeChange(nextTheme: ChatCanvasTheme) {
+        setTheme(nextTheme)
+    }
+
+    function handleExportSettings() {
+        downloadJson('coliee-settings-snapshot.json', exportPayload)
+        setDataNotice({
+            kind: 'success',
+            message: 'Downloaded a settings snapshot without provider secrets.',
+        })
+    }
+
+    function handleResetLocalCache() {
+        removeStoredKeys([
+            WORKSPACE_PREFS_STORAGE_KEY,
+            NOTIFICATION_PREFS_STORAGE_KEY,
+            ACCOUNT_LIFECYCLE_STORAGE_KEY,
+            GUEST_STORAGE_KEY,
+            ...LEGACY_GUEST_STORAGE_KEYS,
+        ])
+        setWorkspacePrefs(DEFAULT_WORKSPACE_PREFERENCES)
+        setNotificationPrefs(DEFAULT_NOTIFICATION_PREFERENCES)
+        setAccountLifecycle('active')
+        setDataNotice({
+            kind: 'info',
+            message: 'Local workspace cache cleared.',
+        })
+    }
+
+    function handleRequestLifecycleState(nextState: AccountLifecycleState) {
+        setAccountLifecycle(nextState)
+        setDataNotice({
+            kind: 'success',
+            message: nextState === 'active'
+                ? 'Account lifecycle state reset.'
+                : nextState === 'deletion-requested'
+                    ? 'Deletion request staged locally.'
+                    : 'Archive state staged locally.',
+        })
+    }
+
+    async function handleCopyAccountRequest() {
+        const requestText = buildAccountRequestMessage(accountEmail, accountDisplayName, accountLifecycle)
+
+        try {
+            await navigator.clipboard.writeText(requestText)
+            setDataNotice({
+                kind: 'success',
+                message: 'Copied the account request text to your clipboard.',
+            })
+        } catch {
+            setDataNotice({
+                kind: 'error',
+                message: 'Clipboard access was blocked by the browser.',
+            })
+        }
+    }
+
     return (
-        <div style={{ maxWidth: '760px', margin: '0 auto', paddingTop: '2rem' }}>
-            <div className="project-card" style={{ padding: '2rem', display: 'flex', flexDirection: 'column', cursor: 'default', height: 'auto' }}>
-                <div style={{ marginBottom: '1.5rem' }}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.8rem', marginBottom: '0.5rem' }}>
-                        {profile?.profilePictureUrl ? (
-                            <img
-                                src={profile.profilePictureUrl}
-                                alt="Avatar"
-                                style={{ width: 40, height: 40, borderRadius: '50%', objectFit: 'cover' }}
-                            />
-                        ) : (
-                            <span style={{ width: 40, height: 40, borderRadius: '50%', background: '#111', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, fontWeight: 600, flexShrink: 0 }}>
-                                {getInitial()}
-                            </span>
-                        )}
-                        <div>
-                            <h2 style={{ fontSize: '1.5rem', fontWeight: 600, color: 'var(--text-dark)', margin: 0 }}>
-                                Account Settings
-                            </h2>
-                            <span style={{ fontSize: '0.95rem', color: 'var(--text-muted)' }}>
-                                Manage your profile, security, and LLM provider keys
-                            </span>
-                        </div>
-                    </div>
+        <div className="app-layout app-layout--chat">
+            <header className="app-topbar app-topbar--chat">
+                <div className="app-brand">
+                    <Settings2 className="app-brand__logo" size={20} />
+                    <span>Settings</span>
                 </div>
+                <div className="app-actions">
+                    <button
+                        type="button"
+                        className="btn-pill-outline"
+                        onClick={() => navigate('/')}
+                    >
+                        Return to Canvas
+                    </button>
+                    <button
+                        type="button"
+                        className="btn-pill-dark"
+                        onClick={() => logout().then(() => navigate('/'))}
+                    >
+                        Sign out
+                    </button>
+                </div>
+            </header>
+            <main className="app-layout__content app-layout__content--chat">
+                <div className="chat-shell">
+                    <aside className="chat-shell__sidebar">
+                        <div className="chat-shell__sidebar-header">
+                            {profile?.profilePictureUrl ? (
+                                <img
+                                    src={profile.profilePictureUrl}
+                                    alt="Avatar"
+                                    className="settings-center-avatar"
+                                    style={{ width: 40, height: 40, borderRadius: 12 }}
+                                />
+                            ) : (
+                                <span className="settings-center-avatar settings-center-avatar--fallback" style={{ width: 40, height: 40, borderRadius: 12 }}>
+                                    {getInitial()}
+                                </span>
+                            )}
+                            <div className="chat-shell__sidebar-meta">
+                                <strong className="chat-shell__sidebar-title">{accountDisplayName}</strong>
+                                <span className="chat-shell__history-meta">{accountEmail}</span>
+                            </div>
+                        </div>
 
-                <div style={{ marginBottom: '1.5rem' }}>
-                    <p className="settings-section-title">Profile</p>
-
-                    <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginBottom: '0.4rem' }}>Email Address</p>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '1rem' }}>
-                        <span style={{ fontSize: '1rem', fontWeight: 600, color: 'var(--text-dark)' }}>
-                            {profile?.email ?? user?.email ?? '—'}
-                        </span>
-                        <span style={{
-                            fontSize: '0.75rem', padding: '0.1rem 0.4rem', borderRadius: '4px',
-                            background: profile?.isEmailVerified ? '#e6ffe6' : '#ffe6e6',
-                            color: profile?.isEmailVerified ? '#006600' : '#cc0000'
-                        }}>
-                            {profile?.isEmailVerified ? 'Verified' : 'Unverified'}
-                        </span>
-                    </div>
+                        <div className="chat-shell__sidebar-body">
+                            <nav className="chat-shell__history-list" aria-label="Settings sections">
+                                {sectionNavItems.map(item => {
+                                    const Icon = item.icon
 
-                    <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginBottom: '0.4rem' }}>Display Name</p>
-                    {nameErr && <div className="auth-alert auth-alert--err" style={{ marginBottom: '10px' }}><span>⚠</span><span> {nameErr}</span></div>}
-                    {nameOk && <div className="auth-alert auth-alert--ok" style={{ marginBottom: '10px' }}><span>✓</span><span> Display name updated!</span></div>}
-                    <form onSubmit={handleNameSave} style={{ display: 'flex', gap: '8px' }}>
-                        <input
-                            id="settings-display-name"
-                            type="text"
-                            value={dispName}
-                            onChange={e => setDispName(e.target.value)}
-                            placeholder="Your display name"
-                            className="auth-input"
-                            style={{ flex: 1 }}
-                            disabled={nameLoading}
-                            maxLength={MAX_NAME_LENGTH}
-                        />
-                        <button
-                            id="settings-save-name-btn"
-                            type="submit"
-                            className="btn-pill-dark"
-                            disabled={nameLoading}
-                            style={{ flexShrink: 0, padding: '0.5rem 1.2rem', borderRadius: '4px' }}
-                        >
-                            {nameLoading ? <span className="spin" /> : 'Save'}
-                        </button>
-                    </form>
-                    <p style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginTop: '0.4rem' }}>
-                        {dispName.length}/{MAX_NAME_LENGTH}
-                    </p>
-                </div>
+                                    return (
+                                        <button
+                                            key={item.id}
+                                            type="button"
+                                            className={`chat-shell__nav-item${activeSection === item.id ? ' chat-shell__nav-item--active' : ''}`}
+                                            onClick={() => focusSection(item.ref.current, item.id)}
+                                        >
+                                            <span className="chat-shell__nav-icon">
+                                                <Icon />
+                                            </span>
+                                            <span className="chat-shell__nav-label">{item.label}</span>
+                                        </button>
+                                    )
+                                })}
+                            </nav>
+                        </div>
+                    </aside>
 
-                <div className="settings-divider" />
+                    <div className="chat-shell__main" style={{ overflowY: 'auto' }}>
+                        <div className="settings-center-main" style={{ padding: '2rem 3rem', maxWidth: 900, margin: '0 auto', paddingBottom: '6rem' }}>
 
-                <div style={{ marginBottom: '1.5rem' }}>
-                    <p className="settings-section-title">Security</p>
 
-                    {isGoogleUser ? (
-                        <div className="settings-placeholder">
-                            Google accounts use Google Sign-In to manage passwords.
-                        </div>
-                    ) : (
-                        <>
-                            <p style={{ fontSize: '0.95rem', color: 'var(--text-muted)', marginBottom: '1rem' }}>
-                                Change your password
-                            </p>
-
-                            {pwErr && (
-                                <div className="auth-alert auth-alert--err" style={{ marginBottom: '10px' }}>
-                                    <span>⚠</span><span> {pwErr}</span>
+                    <SectionShell
+                        refProp={profileSectionRef}
+                        eyebrow="Identity"
+                        title="Profile & identity"
+                        description="Keep the workspace identity aligned with the account signed into this browser."
+                        chips={(
+                            <>
+                                <StateBadge kind={profile?.isEmailVerified ? 'success' : 'warning'}>
+                                    {verifiedLabel}
+                                </StateBadge>
+                                <StateBadge kind="neutral">Signed in as {authMethodLabel}</StateBadge>
+                            </>
+                        )}
+                    >
+                        <div className="settings-grid settings-grid--two">
+                            <div className="settings-card settings-card--summary">
+                                <span className="settings-card__label">Email address</span>
+                                <strong className="settings-card__value">{accountEmail}</strong>
+                                <p className="settings-card__helper">
+                                    This email is used for sign-in, recovery, and verification.
+                                </p>
+                                {!profile?.isEmailVerified && (
+                                    <div className="settings-card__actions">
+                                        <button
+                                            type="button"
+                                            className="settings-button settings-button--secondary"
+                                            onClick={handleResendVerification}
+                                            disabled={recoveryLoading}
+                                        >
+                                            {recoveryLoading ? 'Sending…' : 'Resend verification'}
+                                        </button>
+                                    </div>
+                                )}
+                                {verificationNotice && (
+                                    <div className={`settings-banner settings-banner--${verificationNotice.kind}`}>
+                                        <NoticeIcon kind={verificationNotice.kind} />
+                                        <span>{verificationNotice.message}</span>
+                                    </div>
+                                )}
+                            </div>
+
+                            <form className="settings-card settings-card--form" onSubmit={handleNameSave}>
+                                <span className="settings-card__label">Display name</span>
+                                <input
+                                    id="settings-display-name"
+                                    type="text"
+                                    value={dispName}
+                                    onChange={event => setDispName(event.target.value)}
+                                    placeholder="Your display name"
+                                    className="settings-input"
+                                    disabled={nameLoading}
+                                    maxLength={MAX_NAME_LENGTH}
+                                />
+                                <div className="settings-card__footer">
+                                    <p className="settings-card__helper">
+                                        {dispName.length}/{MAX_NAME_LENGTH}
+                                    </p>
+                                    <button
+                                        id="settings-save-name-btn"
+                                        type="submit"
+                                        className="settings-button settings-button--primary"
+                                        disabled={nameLoading}
+                                    >
+                                        {nameLoading ? 'Saving…' : 'Save profile'}
+                                    </button>
                                 </div>
-                            )}
-                            {pwOk && (
-                                <div className="auth-alert auth-alert--ok" style={{ marginBottom: '10px' }}>
-                                    <span>✓</span><span> Password changed — logging you out…</span>
+                                {nameNotice && (
+                                    <div className={`settings-banner settings-banner--${nameNotice.kind}`}>
+                                        <NoticeIcon kind={nameNotice.kind} />
+                                        <span>{nameNotice.message}</span>
+                                    </div>
+                                )}
+                            </form>
+                        </div>
+                    </SectionShell>
+
+                    <SectionShell
+                        refProp={securitySectionRef}
+                        eyebrow="Access"
+                        title="Security & recovery"
+                        description="Change your password and stage a recovery flow without leaving settings."
+                        chips={(
+                            <>
+                                <StateBadge kind={isGoogleUser ? 'neutral' : 'success'}>
+                                    {isGoogleUser ? 'Google sign-in' : 'Password sign-in'}
+                                </StateBadge>
+                                <StateBadge kind="neutral">Recovery email ready</StateBadge>
+                            </>
+                        )}
+                    >
+                        <div className="settings-grid settings-grid--two">
+                            <div className="settings-card settings-card--form">
+                                <div className="settings-card__heading">
+                                    <span className="settings-card__label">Password change</span>
+                                    <p className="settings-card__helper">
+                                        Password changes sign you out automatically after the update completes.
+                                    </p>
                                 </div>
-                            )}
 
-                            <form onSubmit={handlePasswordChange}>
-                                <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '1.5rem' }}>
-                                    <div className="auth-input-group pw-wrap">
-                                        <input
-                                            id="settings-current-password"
-                                            type={showCur ? 'text' : 'password'} value={curPw}
-                                            onChange={e => setCurPw(e.target.value)}
-                                            placeholder="Current password" className="auth-input"
-                                            autoComplete="current-password" disabled={pwLoading}
-                                        />
-                                        <button type="button" className="eye-btn" onClick={() => setShowCur(!showCur)} tabIndex={-1}>
-                                            {showCur ? <EyeOff /> : <Eye />}
-                                        </button>
-                                    </div>
-                                    <div className="auth-input-group pw-wrap">
-                                        <input
-                                            id="settings-new-password"
-                                            type={showNew ? 'text' : 'password'} value={newPw}
-                                            onChange={e => setNewPw(e.target.value)}
-                                            placeholder="New password" className="auth-input"
-                                            autoComplete="new-password" disabled={pwLoading}
-                                        />
-                                        <button type="button" className="eye-btn" onClick={() => setShowNew(!showNew)} tabIndex={-1}>
-                                            {showNew ? <EyeOff /> : <Eye />}
-                                        </button>
+                                {isGoogleUser ? (
+                                    <div className="settings-empty-state">
+                                        Google accounts use Google Sign-In for password management.
                                     </div>
-                                    <div className="auth-input-group pw-wrap">
-                                        <input
-                                            id="settings-confirm-password"
-                                            type={showConf ? 'text' : 'password'} value={confPw}
-                                            onChange={e => setConfPw(e.target.value)}
-                                            placeholder="Confirm new password" className="auth-input"
-                                            autoComplete="new-password" disabled={pwLoading}
-                                        />
-                                        <button type="button" className="eye-btn" onClick={() => setShowConf(!showConf)} tabIndex={-1}>
-                                            {showConf ? <EyeOff /> : <Eye />}
-                                        </button>
+                                ) : (
+                                    <form className="settings-form" onSubmit={handlePasswordChange}>
+                                        <div className="settings-password-field">
+                                            <input
+                                                id="settings-current-password"
+                                                type={showCur ? 'text' : 'password'}
+                                                value={curPw}
+                                                onChange={event => setCurPw(event.target.value)}
+                                                placeholder="Current password"
+                                                className="settings-input"
+                                                autoComplete="current-password"
+                                                disabled={pwLoading}
+                                            />
+                                            <button
+                                                type="button"
+                                                className="settings-icon-button"
+                                                onClick={() => setShowCur(!showCur)}
+                                                aria-label={showCur ? 'Hide current password' : 'Show current password'}
+                                            >
+                                                {showCur ? <EyeOff size={16} /> : <Eye size={16} />}
+                                            </button>
+                                        </div>
+
+                                        <div className="settings-password-field">
+                                            <input
+                                                id="settings-new-password"
+                                                type={showNew ? 'text' : 'password'}
+                                                value={newPw}
+                                                onChange={event => setNewPw(event.target.value)}
+                                                placeholder="New password"
+                                                className="settings-input"
+                                                autoComplete="new-password"
+                                                disabled={pwLoading}
+                                            />
+                                            <button
+                                                type="button"
+                                                className="settings-icon-button"
+                                                onClick={() => setShowNew(!showNew)}
+                                                aria-label={showNew ? 'Hide new password' : 'Show new password'}
+                                            >
+                                                {showNew ? <EyeOff size={16} /> : <Eye size={16} />}
+                                            </button>
+                                        </div>
+
+                                        <div className="settings-password-field">
+                                            <input
+                                                id="settings-confirm-password"
+                                                type={showConf ? 'text' : 'password'}
+                                                value={confPw}
+                                                onChange={event => setConfPw(event.target.value)}
+                                                placeholder="Confirm new password"
+                                                className="settings-input"
+                                                autoComplete="new-password"
+                                                disabled={pwLoading}
+                                            />
+                                            <button
+                                                type="button"
+                                                className="settings-icon-button"
+                                                onClick={() => setShowConf(!showConf)}
+                                                aria-label={showConf ? 'Hide confirmation password' : 'Show confirmation password'}
+                                            >
+                                                {showConf ? <EyeOff size={16} /> : <Eye size={16} />}
+                                            </button>
+                                        </div>
+
+                                        <div className="settings-card__actions">
+                                            <button
+                                                id="settings-change-password-btn"
+                                                type="submit"
+                                                className="settings-button settings-button--primary"
+                                                disabled={pwLoading}
+                                            >
+                                                {pwLoading ? 'Changing…' : 'Change password'}
+                                            </button>
+                                        </div>
+                                    </form>
+                                )}
+
+                                {pwNotice && (
+                                    <div className={`settings-banner settings-banner--${pwNotice.kind}`}>
+                                        <NoticeIcon kind={pwNotice.kind} />
+                                        <span>{pwNotice.message}</span>
                                     </div>
+                                )}
+                            </div>
+
+                            <div className="settings-card settings-card--summary">
+                                <span className="settings-card__label">Recovery</span>
+                                <strong className="settings-card__value">Reset and verification routes</strong>
+                                <p className="settings-card__helper">
+                                    These actions use the existing auth backend and can be triggered from settings.
+                                </p>
+                                <div className="settings-stack">
+                                    <button
+                                        type="button"
+                                        className="settings-button settings-button--secondary"
+                                        onClick={handleSendRecoveryEmail}
+                                        disabled={recoveryLoading || !accountEmail || accountEmail === '—'}
+                                    >
+                                        {recoveryLoading ? 'Sending…' : 'Send recovery email'}
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="settings-button settings-button--ghost"
+                                        onClick={handleResendVerification}
+                                        disabled={recoveryLoading || profile?.isEmailVerified}
+                                    >
+                                        {profile?.isEmailVerified ? 'Email already verified' : 'Resend verification code'}
+                                    </button>
                                 </div>
+                                {recoveryNotice && (
+                                    <div className={`settings-banner settings-banner--${recoveryNotice.kind}`}>
+                                        <NoticeIcon kind={recoveryNotice.kind} />
+                                        <span>{recoveryNotice.message}</span>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </SectionShell>
+
+                    <SectionShell
+                        refProp={appearanceSectionRef}
+                        eyebrow="Surface"
+                        title="Appearance"
+                        description="The selected theme now drives the full app, including this settings control surface."
+                        chips={(
+                            <>
+                                <StateBadge kind="neutral">Active theme: {activeThemeLabel}</StateBadge>
+                                <StateBadge kind="neutral">Synced via shared theme provider</StateBadge>
+                            </>
+                        )}
+                    >
+                        <div className="settings-theme-grid">
+                            {THEME_OPTIONS.map(option => (
                                 <button
-                                    id="settings-change-password-btn"
-                                    type="submit" className="btn-pill-dark" disabled={pwLoading}
-                                    style={{ width: '100%', padding: '0.8rem', borderRadius: '4px' }}
+                                    key={option.id}
+                                    type="button"
+                                    className={`settings-theme-card${theme === option.id ? ' settings-theme-card--active' : ''}`}
+                                    onClick={() => handleThemeChange(option.id)}
+                                    aria-pressed={theme === option.id}
                                 >
-                                    {pwLoading ? <><span className="spin" /> Saving…</> : 'Change Password'}
+                                    <span className="settings-theme-card__swatch settings-theme-card__swatch--midnight" data-theme={option.id} />
+                                    <span className="settings-theme-card__copy">
+                                        <strong className="settings-theme-card__label">{option.label}</strong>
+                                        <span className="settings-theme-card__description">{option.description}</span>
+                                    </span>
+                                    {theme === option.id ? (
+                                        <span className="settings-theme-card__active">
+                                            <Sparkles size={14} />
+                                            Active
+                                        </span>
+                                    ) : null}
                                 </button>
-                            </form>
-                        </>
-                    )}
-                </div>
+                            ))}
+                        </div>
+                    </SectionShell>
 
-                <div className="settings-divider" />
+                    <SectionShell
+                        refProp={workspaceSectionRef}
+                        eyebrow="Behavior"
+                        title="Workspace preferences"
+                        description="These preferences are stored locally in this browser and shape how the workspace feels."
+                        chips={(
+                            <>
+                                <StateBadge kind="neutral">Saved locally</StateBadge>
+                                <StateBadge kind="neutral">{workspaceLastSavedAt ? new Date(workspaceLastSavedAt).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) : 'Just now'}</StateBadge>
+                            </>
+                        )}
+                    >
+                        <div className="settings-card-grid">
+                            <div className="settings-card settings-card--stacked">
+                                <ToggleRow
+                                    label="Compact density"
+                                    description="Tighten section spacing so the page reads like a control surface."
+                                    checked={workspacePrefs.compactDensity}
+                                    onChange={checked => setWorkspacePrefs(prev => ({ ...prev, compactDensity: checked }))}
+                                />
+                                <ToggleRow
+                                    label="Auto-open latest canvas"
+                                    description="Return to the most recently updated canvas after sign-in."
+                                    checked={workspacePrefs.autoOpenLatestCanvas}
+                                    onChange={checked => setWorkspacePrefs(prev => ({ ...prev, autoOpenLatestCanvas: checked }))}
+                                />
+                            </div>
 
-                <div>
-                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem', alignItems: 'flex-start', marginBottom: '1rem' }}>
-                        <div>
-                            <p className="settings-section-title">Providers (BYOK)</p>
-                            <p style={{ fontSize: '0.95rem', color: 'var(--text-muted)', margin: 0 }}>
-                                Save one or more provider keys, test them, and choose which provider `/home` should use by default.
-                            </p>
+                            <div className="settings-card settings-card--stacked">
+                                <ToggleRow
+                                    label="Preserve drafts"
+                                    description="Keep unsent workspace state in this browser until you manually clear it."
+                                    checked={workspacePrefs.preserveDrafts}
+                                    onChange={checked => setWorkspacePrefs(prev => ({ ...prev, preserveDrafts: checked }))}
+                                />
+                                <ToggleRow
+                                    label="Show provider metadata"
+                                    description="Display provider badges and saved-key summaries in the workspace."
+                                    checked={workspacePrefs.showProviderMetadata}
+                                    onChange={checked => setWorkspacePrefs(prev => ({ ...prev, showProviderMetadata: checked }))}
+                                />
+                            </div>
                         </div>
-                        <button
-                            type="button"
-                            className="btn-pill-outline"
-                            onClick={() => navigate('/home')}
-                            style={{ flexShrink: 0, padding: '0.5rem 1rem' }}
-                        >
-                            Open Chat
-                        </button>
-                    </div>
+                    </SectionShell>
 
-                    {providerErr && (
-                        <div className="auth-alert auth-alert--err" style={{ marginBottom: '10px' }}>
-                            <span>⚠</span><span> {providerErr}</span>
-                        </div>
-                    )}
-                    {providerOk && (
-                        <div className="auth-alert auth-alert--ok" style={{ marginBottom: '10px' }}>
-                            <span>✓</span><span> {providerOk}</span>
+                    <SectionShell
+                        refProp={notificationsSectionRef}
+                        eyebrow="Signals"
+                        title="Notifications"
+                        description="Notification settings persist locally for now, giving the page a first-class control plane even without backend persistence."
+                        chips={(
+                            <>
+                                <StateBadge kind="neutral">Stored on this device</StateBadge>
+                                <StateBadge kind="neutral">{notificationLastSavedAt ? new Date(notificationLastSavedAt).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) : 'Just now'}</StateBadge>
+                            </>
+                        )}
+                    >
+                        <div className="settings-card-grid">
+                            <div className="settings-card settings-card--stacked">
+                                <ToggleRow
+                                    label="In-app activity"
+                                    description="Notify about important workspace events and changes."
+                                    checked={notificationPrefs.inAppActivity}
+                                    onChange={checked => setNotificationPrefs(prev => ({ ...prev, inAppActivity: checked }))}
+                                />
+                                <ToggleRow
+                                    label="Provider alerts"
+                                    description="Warn when BYOK keys expire, fail tests, or stop responding."
+                                    checked={notificationPrefs.providerAlerts}
+                                    onChange={checked => setNotificationPrefs(prev => ({ ...prev, providerAlerts: checked }))}
+                                />
+                                <ToggleRow
+                                    label="Mention reminders"
+                                    description="Surface follow-up alerts for tagged or referenced activity."
+                                    checked={notificationPrefs.mentionReminders}
+                                    onChange={checked => setNotificationPrefs(prev => ({ ...prev, mentionReminders: checked }))}
+                                />
+                            </div>
+
+                            <div className="settings-card settings-card--stacked">
+                                <ToggleRow
+                                    label="Email digest"
+                                    description="Send a compact digest instead of individual mail for routine updates."
+                                    checked={notificationPrefs.emailDigest}
+                                    onChange={checked => setNotificationPrefs(prev => ({ ...prev, emailDigest: checked }))}
+                                />
+                                <ToggleRow
+                                    label="Weekly summary"
+                                    description="Bundle workspace activity into a weekly recap."
+                                    checked={notificationPrefs.weeklySummary}
+                                    onChange={checked => setNotificationPrefs(prev => ({ ...prev, weeklySummary: checked }))}
+                                />
+                            </div>
                         </div>
-                    )}
-
-                    {providersLoading ? (
-                        <div className="settings-placeholder">Loading provider settings…</div>
-                    ) : (
-                        <div style={{ display: 'grid', gap: '1rem' }}>
-                            {PROVIDERS.map(provider => {
-                                const summary = getProviderSummary(provider.id)
-                                const isConfigured = !!summary?.configured
-                                const isBusy = providerActions[provider.id] !== '' || defaultProviderLoading
-
-                                return (
-                                    <div
-                                        key={provider.id}
-                                        style={{
-                                            border: '1px solid rgba(17, 17, 17, 0.08)',
-                                            borderRadius: '14px',
-                                            padding: '1rem',
-                                            background: '#fafafa'
-                                        }}
-                                    >
-                                        <div style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem', alignItems: 'flex-start', marginBottom: '0.75rem' }}>
-                                            <div>
-                                                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.25rem' }}>
-                                                    <h3 style={{ margin: 0, fontSize: '1.05rem', color: 'var(--text-dark)' }}>{provider.label}</h3>
-                                                    <span style={{
-                                                        fontSize: '0.75rem',
-                                                        padding: '0.2rem 0.45rem',
-                                                        borderRadius: '999px',
-                                                        background: isConfigured ? '#e6ffe6' : '#f0f0f0',
-                                                        color: isConfigured ? '#006600' : '#666'
-                                                    }}>
-                                                        {isConfigured ? 'Configured' : 'Not configured'}
-                                                    </span>
-                                                    {summary?.isDefault && (
-                                                        <span style={{
-                                                            fontSize: '0.75rem',
-                                                            padding: '0.2rem 0.45rem',
-                                                            borderRadius: '999px',
-                                                            background: '#111',
-                                                            color: '#fff'
-                                                        }}>
-                                                            Default
-                                                        </span>
-                                                    )}
+                    </SectionShell>
+
+                    <SectionShell
+                        refProp={providersSectionRef}
+                        eyebrow="Integrations"
+                        title="Provider / API configuration"
+                        description="Save keys, test them, and select the default provider that the app should prefer."
+                        chips={(
+                            <>
+                                <StateBadge kind="neutral">{configuredProvidersCount} configured</StateBadge>
+                                <StateBadge kind="neutral">Default: {defaultProviderLabel}</StateBadge>
+                            </>
+                        )}
+                    >
+                        {providerNotice && (
+                            <div className={`settings-banner settings-banner--${providerNotice.kind}`}>
+                                <NoticeIcon kind={providerNotice.kind} />
+                                <span>{providerNotice.message}</span>
+                            </div>
+                        )}
+
+                        {providersLoading ? (
+                            <div className="settings-empty-state">Loading provider settings…</div>
+                        ) : (
+                            <div className="settings-provider-list">
+                                {PROVIDERS.map(provider => {
+                                    const summary = getProviderSummary(provider.id)
+                                    const isConfigured = !!summary?.configured
+                                    const isBusy = providerActions[provider.id] !== '' || defaultProviderLoading
+                                    const models = providerModels[provider.id]
+                                    const modelStatus = providerModelStatus[provider.id]
+                                    const modelPreview = models
+                                        .slice(0, 4)
+                                        .map(item => item.displayName || item.id)
+                                        .join(', ')
+
+                                    return (
+                                        <div
+                                            key={provider.id}
+                                            className={`settings-provider-card${summary?.isDefault ? ' settings-provider-card--default' : ''}`}
+                                        >
+                                            <div className="settings-provider-card__header">
+                                                <div className="settings-provider-card__heading">
+                                                    <div className="settings-provider-card__title-row">
+                                                        <h4 className="settings-provider-card__title">{provider.label}</h4>
+                                                        <StateBadge kind={isConfigured ? 'success' : 'neutral'}>
+                                                            {isConfigured ? 'Configured' : 'Not configured'}
+                                                        </StateBadge>
+                                                        {summary?.isDefault && <StateBadge kind="warning">Default</StateBadge>}
+                                                    </div>
+                                                    <p className="settings-provider-card__helper">{provider.helper}</p>
                                                 </div>
-                                                <p style={{ fontSize: '0.9rem', color: 'var(--text-muted)', margin: 0 }}>{provider.helper}</p>
-                                            </div>
 
-                                            <label style={{ display: 'flex', alignItems: 'center', gap: '0.45rem', fontSize: '0.85rem', color: isConfigured ? 'var(--text-dark)' : 'var(--text-muted)' }}>
-                                                <input
-                                                    type="radio"
-                                                    name="default-provider"
-                                                    checked={summary?.isDefault ?? false}
-                                                    disabled={!isConfigured || isBusy}
-                                                    onChange={() => handleSetDefault(provider.id)}
-                                                />
-                                                Use as default
-                                            </label>
-                                        </div>
+                                                <label className={`settings-default-toggle${!isConfigured ? ' settings-default-toggle--disabled' : ''}`}>
+                                                    <input
+                                                        type="radio"
+                                                        name="default-provider"
+                                                        checked={summary?.isDefault ?? false}
+                                                        disabled={!isConfigured || isBusy}
+                                                        onChange={() => handleSetDefault(provider.id)}
+                                                    />
+                                                    <span>Use as default</span>
+                                                </label>
+                                            </div>
 
-                                        <div style={{ display: 'grid', gap: '0.6rem' }}>
-                                            <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', fontSize: '0.85rem', color: 'var(--text-muted)' }}>
-                                                <span>Saved key: {summary?.maskedLast4 ?? 'None'}</span>
-                                                <span>Last tested: {formatTimestamp(summary?.lastTestedAt ?? null)}</span>
+                                            <div className="settings-provider-card__stats">
+                                                <div className="settings-provider-stat">
+                                                    <span className="settings-provider-stat__label">Saved key</span>
+                                                    <strong className="settings-provider-stat__value">{summary?.maskedLast4 ?? 'None'}</strong>
+                                                </div>
+                                                <div className="settings-provider-stat">
+                                                    <span className="settings-provider-stat__label">Last tested</span>
+                                                    <strong className="settings-provider-stat__value">{formatTimestamp(summary?.lastTestedAt ?? null)}</strong>
+                                                </div>
+                                                <div className="settings-provider-stat">
+                                                    <span className="settings-provider-stat__label">Models</span>
+                                                    <strong className="settings-provider-stat__value">
+                                                        {!isConfigured
+                                                            ? 'Save a key to load'
+                                                            : modelStatus === 'loading'
+                                                                ? 'Loading…'
+                                                                : modelStatus === 'error'
+                                                                    ? 'Unavailable'
+                                                                    : modelStatus === 'loaded'
+                                                                        ? `${models.length} found`
+                                                                        : 'Pending'}
+                                                    </strong>
+                                                </div>
                                             </div>
 
-                                            <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
+                                            {isConfigured && modelStatus === 'loaded' && models.length > 0 && (
+                                                <p className="settings-provider-card__hint">
+                                                    Available models: {modelPreview}{models.length > 4 ? `, +${models.length - 4} more` : ''}
+                                                </p>
+                                            )}
+                                            {isConfigured && modelStatus === 'error' && (
+                                                <p className="settings-provider-card__hint">
+                                                    Unable to load models with the saved key right now.
+                                                </p>
+                                            )}
+
+                                            <div className="settings-provider-form">
                                                 <input
                                                     type="password"
                                                     value={providerInputs[provider.id]}
-                                                    onChange={e => setProviderInput(provider.id, e.target.value)}
+                                                    onChange={event => setProviderInput(provider.id, event.target.value)}
                                                     placeholder={provider.placeholder}
-                                                    className="auth-input"
-                                                    style={{ flex: 1, minWidth: '220px' }}
+                                                    className="settings-input"
                                                     autoComplete="off"
                                                     disabled={isBusy}
                                                 />
-                                                <button
-                                                    type="button"
-                                                    className="btn-pill-dark"
-                                                    onClick={() => handleProviderSave(provider.id)}
-                                                    disabled={isBusy}
-                                                    style={{ padding: '0.65rem 1rem' }}
-                                                >
-                                                    {providerActions[provider.id] === 'save' ? 'Saving…' : (isConfigured ? 'Update Key' : 'Save Key')}
-                                                </button>
-                                                <button
-                                                    type="button"
-                                                    className="btn-pill-outline"
-                                                    onClick={() => handleProviderTest(provider.id)}
-                                                    disabled={!isConfigured || isBusy}
-                                                    style={{ padding: '0.65rem 1rem' }}
-                                                >
-                                                    {providerActions[provider.id] === 'test' ? 'Testing…' : 'Test Key'}
-                                                </button>
-                                                <button
-                                                    type="button"
-                                                    className="btn-pill-outline"
-                                                    onClick={() => handleProviderRemove(provider.id)}
-                                                    disabled={!isConfigured || isBusy}
-                                                    style={{ padding: '0.65rem 1rem', color: '#b42318', borderColor: 'rgba(180, 35, 24, 0.2)' }}
-                                                >
-                                                    {providerActions[provider.id] === 'remove' ? 'Removing…' : 'Remove'}
-                                                </button>
+                                                <div className="settings-provider-form__actions">
+                                                    <button
+                                                        type="button"
+                                                        className="settings-button settings-button--primary"
+                                                        onClick={() => handleProviderSave(provider.id)}
+                                                        disabled={isBusy}
+                                                    >
+                                                        {providerActions[provider.id] === 'save' ? 'Saving…' : (isConfigured ? 'Update key' : 'Save key')}
+                                                    </button>
+                                                    <button
+                                                        type="button"
+                                                        className="settings-button settings-button--ghost"
+                                                        onClick={() => handleProviderTest(provider.id)}
+                                                        disabled={!isConfigured || isBusy}
+                                                    >
+                                                        {providerActions[provider.id] === 'test' ? 'Testing…' : 'Test key'}
+                                                    </button>
+                                                    <button
+                                                        type="button"
+                                                        className="settings-button settings-button--danger"
+                                                        onClick={() => handleProviderRemove(provider.id)}
+                                                        disabled={!isConfigured || isBusy}
+                                                    >
+                                                        {providerActions[provider.id] === 'remove' ? 'Removing…' : 'Remove'}
+                                                    </button>
+                                                </div>
                                             </div>
                                         </div>
-                                    </div>
-                                )
-                            })}
+                                    )
+                                })}
+                            </div>
+                        )}
+                    </SectionShell>
+
+                    <SectionShell
+                        refProp={dataSectionRef}
+                        eyebrow="Maintenance"
+                        title="Data export & session cleanup"
+                        description="Export a local snapshot, then clear browser-held workspace state without touching auth tokens."
+                        chips={(
+                            <>
+                                <StateBadge kind="neutral">Safe export</StateBadge>
+                                <StateBadge kind="neutral">Local cleanup only</StateBadge>
+                            </>
+                        )}
+                    >
+                        {dataNotice && (
+                            <div className={`settings-banner settings-banner--${dataNotice.kind}`}>
+                                <NoticeIcon kind={dataNotice.kind} />
+                                <span>{dataNotice.message}</span>
+                            </div>
+                        )}
+
+                        <div className="settings-grid settings-grid--two">
+                            <div className="settings-card settings-card--summary">
+                                <span className="settings-card__label">Export snapshot</span>
+                                <strong className="settings-card__value">Download the current settings state</strong>
+                                <p className="settings-card__helper">
+                                    Includes theme, profile metadata, provider summaries, and local preferences. Provider secrets are excluded.
+                                </p>
+                                <div className="settings-card__actions">
+                                    <button
+                                        type="button"
+                                        className="settings-button settings-button--primary"
+                                        onClick={handleExportSettings}
+                                    >
+                                        Export JSON
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div className="settings-card settings-card--summary">
+                                <span className="settings-card__label">Session cleanup</span>
+                                <strong className="settings-card__value">Clear local canvas and settings cache</strong>
+                                <p className="settings-card__helper">
+                                    This clears guest canvas cache and settings preferences stored in this browser. Sign-in tokens remain untouched.
+                                </p>
+                                <div className="settings-card__actions">
+                                    <button
+                                        type="button"
+                                        className="settings-button settings-button--ghost"
+                                        onClick={handleResetLocalCache}
+                                    >
+                                        Clear local cache
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </SectionShell>
+
+                    <SectionShell
+                        refProp={accountSectionRef}
+                        eyebrow="Lifecycle"
+                        title="Account deletion or archive state"
+                        description="This build does not have a backend lifecycle endpoint, so the section stages requests locally and keeps the UI explicit."
+                        chips={(
+                            <>
+                                <StateBadge kind={accountLifecycle === 'active' ? 'success' : 'warning'}>
+                                    {currentAccountStateLabel}
+                                </StateBadge>
+                                <StateBadge kind="neutral">Backend endpoint pending</StateBadge>
+                            </>
+                        )}
+                    >
+                        <div className="settings-grid settings-grid--two">
+                            <div className="settings-card settings-card--summary settings-card--summary-danger">
+                                <span className="settings-card__label">Deletion request</span>
+                                <strong className="settings-card__value">Stage a local deletion request</strong>
+                                <p className="settings-card__helper">
+                                    No destructive backend operation is wired here yet. Use this to stage the request state and document intent.
+                                </p>
+                                <div className="settings-card__actions">
+                                    <button
+                                        type="button"
+                                        className="settings-button settings-button--danger"
+                                        onClick={() => handleRequestLifecycleState('deletion-requested')}
+                                    >
+                                        Stage deletion request
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="settings-button settings-button--ghost"
+                                        onClick={handleCopyAccountRequest}
+                                    >
+                                        Copy request text
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div className="settings-card settings-card--summary">
+                                <span className="settings-card__label">Archive state</span>
+                                <strong className="settings-card__value">Archive the local browser state</strong>
+                                <p className="settings-card__helper">
+                                    This marks the account state locally and leaves the backend untouched. Restore to return to active mode.
+                                </p>
+                                <div className="settings-stack">
+                                    <button
+                                        type="button"
+                                        className="settings-button settings-button--secondary"
+                                        onClick={() => handleRequestLifecycleState('archived-local')}
+                                    >
+                                        Archive locally
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="settings-button settings-button--ghost"
+                                        onClick={() => handleRequestLifecycleState('active')}
+                                    >
+                                        Restore active state
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </SectionShell>
                         </div>
-                    )}
+                    </div>
                 </div>
-            </div>
+            </main>
         </div>
     )
 }
diff --git a/frontend/src/pages/VerifyEmailPage.test.tsx b/frontend/src/pages/VerifyEmailPage.test.tsx
index a43de90..a0b7031 100644
--- a/frontend/src/pages/VerifyEmailPage.test.tsx
+++ b/frontend/src/pages/VerifyEmailPage.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { MemoryRouter } from 'react-router-dom'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -133,4 +133,32 @@ describe('VerifyEmailPage', () => {
             expect(screen.getByText(/please wait 14s before requesting another code/i)).toBeInTheDocument()
         })
     }, 4000)
+
+    it('verifies email and redirects to chat', async () => {
+        mockUseLocation.mockReturnValue({
+            state: {
+                email: 'user@example.com',
+            }
+        })
+        vi.mocked(authService.verifyEmail).mockResolvedValue({
+            token: 'verified-token',
+            refreshToken: 'verified-refresh',
+            email: 'user@example.com',
+            expiry: new Date().toISOString(),
+        })
+
+        renderVerifyEmailPage()
+        fireEvent.change(screen.getByPlaceholderText('123456'), { target: { value: '123456' } })
+        fireEvent.click(screen.getByRole('button', { name: /verify email/i }))
+
+        await waitFor(() => {
+            expect(authService.verifyEmail).toHaveBeenCalledWith('user@example.com', '123456')
+            expect(mockSetEmailVerified).toHaveBeenCalled()
+            expect(mockAuthLogin).toHaveBeenCalledWith('verified-token', 'verified-refresh', true)
+        })
+
+        await waitFor(() => {
+            expect(mockNavigate).toHaveBeenCalledWith('/')
+        }, { timeout: 2500 })
+    }, 4000)
 })
diff --git a/frontend/src/pages/VerifyEmailPage.tsx b/frontend/src/pages/VerifyEmailPage.tsx
index 884d1d3..464ae98 100644
--- a/frontend/src/pages/VerifyEmailPage.tsx
+++ b/frontend/src/pages/VerifyEmailPage.tsx
@@ -7,7 +7,7 @@ import {
     verifyEmail,
 } from '../services/authService'
 import { useAuth } from '../context/AuthContext'
-import { Navbar } from './LoginPage'
+import AuthNavbar from '../components/auth/AuthNavbar'
 
 export default function VerifyEmailPage() {
     const navigate             = useNavigate()
@@ -69,7 +69,7 @@ export default function VerifyEmailPage() {
             login(data.token, data.refreshToken, true)
             
             // Redirect straight to their dashboard
-            setTimeout(() => navigate('/home'), 1500)
+            setTimeout(() => navigate('/'), 1500)
         } catch (err) {
             setError(getErrorMessage(err))
         } finally { setLoading(false) }
@@ -105,7 +105,7 @@ export default function VerifyEmailPage() {
 
     return (
         <div className="auth-layout">
-            <Navbar />
+            <AuthNavbar />
             
             <div className="auth-card-wrapper">
                 <div className="auth-card">
diff --git a/frontend/src/pages/VerifyOtpPage.tsx b/frontend/src/pages/VerifyOtpPage.tsx
index 47dd5b9..105447e 100644
--- a/frontend/src/pages/VerifyOtpPage.tsx
+++ b/frontend/src/pages/VerifyOtpPage.tsx
@@ -6,7 +6,7 @@ import {
     getPasswordResetRateLimit,
     resendPasswordResetOtp,
 } from '../services/authService'
-import { Navbar } from './LoginPage'
+import AuthNavbar from '../components/auth/AuthNavbar'
 
 export default function VerifyOtpPage() {
     const navigate = useNavigate()
@@ -96,7 +96,7 @@ export default function VerifyOtpPage() {
 
     return (
         <div className="auth-layout">
-            <Navbar />
+            <AuthNavbar />
             
             <div className="auth-card-wrapper">
                 <div className="auth-card">
diff --git a/frontend/src/pages/WelcomePage.tsx b/frontend/src/pages/WelcomePage.tsx
deleted file mode 100644
index 3d072f4..0000000
--- a/frontend/src/pages/WelcomePage.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useNavigate } from 'react-router-dom'
-
-export default function WelcomePage() {
-    const navigate = useNavigate()
-
-    return (
-        <div className="landing-body">
-            {/* ── Navbar ── */}
-            <nav className="landing-nav">
-                <div className="landing-brand" onClick={() => navigate('/')} style={{ cursor: 'pointer' }}>
-                    Coliee AI
-                </div>
-
-                <ul className="landing-links" style={{ listStyle: 'none' }}>
-                    <li><a href="#">Home</a></li>
-                    <li><a href="#">Pricing</a></li>
-                    <li><a href="#">News</a></li>
-                </ul>
-
-                <div>
-                    <button className="btn-pill-light" onClick={() => navigate('/login')}>
-                        Get started
-                    </button>
-                </div>
-            </nav>
-
-            {/* ── Hero ── */}
-            <main className="landing-hero">
-               
-                <h1 className="landing-title">
-                    Design a <span style={{ textDecoration: 'underline', textUnderlineOffset: '8px' }}>Canvas Flow</span><br />
-                    for a Next-Gen Idea Space
-                </h1>
-                <p style={{ opacity: 0.7, fontSize: '0.9rem', marginTop: '0.5rem' }}>
-                    🚀 Auto-deployed via CI/CD Pipeline
-                </p>
-                
-                <button
-                    className="btn-pill-light"
-                    style={{ padding: '1rem 2.5rem', fontSize: '1.05rem', margin: '1rem 0 3rem' }}
-                    onClick={() => navigate('/register')}
-                >
-                    Design now
-                </button>
-            </main>
-        </div>
-    )
-}
diff --git a/frontend/src/services/api.test.ts b/frontend/src/services/api.test.ts
new file mode 100644
index 0000000..62453d2
--- /dev/null
+++ b/frontend/src/services/api.test.ts
@@ -0,0 +1,120 @@
+import { describe, expect, it, beforeEach, vi } from 'vitest'
+
+type MockedApiInstance = {
+    defaults: {
+        headers: {
+            common: Record<string, string>
+        }
+    }
+    interceptors: {
+        request: {
+            use: ReturnType<typeof vi.fn>
+        }
+        response: {
+            use: ReturnType<typeof vi.fn>
+        }
+    }
+    post: ReturnType<typeof vi.fn>
+} & ((...args: unknown[]) => Promise<unknown>)
+
+let createConfig: { baseURL?: string } | null = null
+let mockedApiInstance: MockedApiInstance | null = null
+let responseErrorHandler: ((error: any) => Promise<unknown>) | null = null
+
+vi.mock('axios', async () => {
+    const actual = await vi.importActual<typeof import('axios')>('axios')
+
+    const create = vi.fn((config?: { baseURL?: string }) => {
+        createConfig = config ?? null
+
+        const instance = Object.assign(
+            vi.fn(async () => ({ data: {} })),
+            {
+                defaults: {
+                    headers: {
+                        common: {},
+                    },
+                },
+                interceptors: {
+                    request: {
+                        use: vi.fn(),
+                    },
+                    response: {
+                        use: vi.fn((onFulfilled: unknown, onRejected: (error: any) => Promise<unknown>) => {
+                            responseErrorHandler = onRejected
+                            return [onFulfilled, onRejected]
+                        }),
+                    },
+                },
+                post: vi.fn(),
+            },
+        ) as MockedApiInstance
+
+        mockedApiInstance = instance
+        return instance
+    })
+
+    const axiosMock = Object.assign(vi.fn(), {
+        create,
+        post: vi.fn(),
+    })
+
+    return {
+        ...actual,
+        default: axiosMock,
+    }
+})
+
+describe('api service', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+        vi.resetModules()
+        vi.unstubAllEnvs()
+        sessionStorage.clear()
+        createConfig = null
+        mockedApiInstance = null
+        responseErrorHandler = null
+    })
+
+    it('normalizes the configured API base URL', async () => {
+        const { resolveApiBaseUrl } = await import('./api')
+
+        expect(resolveApiBaseUrl()).toBe('/api')
+        expect(resolveApiBaseUrl('http://localhost:5000')).toBe('http://localhost:5000/api')
+        expect(resolveApiBaseUrl('http://localhost:5000/')).toBe('http://localhost:5000/api')
+        expect(resolveApiBaseUrl('http://localhost:5000/api')).toBe('http://localhost:5000/api')
+        expect(resolveApiBaseUrl('http://localhost:5000/api/')).toBe('http://localhost:5000/api')
+    })
+
+    it('uses the same resolved base URL for refresh requests', async () => {
+        vi.stubEnv('VITE_API_URL', 'http://localhost:5000')
+
+        await import('./api')
+
+        expect(createConfig?.baseURL).toBe('http://localhost:5000/api')
+        expect(mockedApiInstance).not.toBeNull()
+        expect(responseErrorHandler).not.toBeNull()
+
+        mockedApiInstance!.post.mockResolvedValue({
+            data: {
+                token: 'new-token',
+                refreshToken: 'new-refresh-token',
+            },
+        })
+
+        sessionStorage.setItem('refreshToken', 'refresh-token')
+
+        await responseErrorHandler!({
+            response: {
+                status: 401,
+            },
+            config: {
+                url: '/chat-sessions',
+                headers: {},
+            },
+        })
+
+        expect(mockedApiInstance!.post).toHaveBeenCalledWith('/auth/refresh', { refreshToken: 'refresh-token' })
+        expect(mockedApiInstance!.post).not.toHaveBeenCalledWith('/api/auth/refresh', expect.anything())
+    })
+})
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 1ef1d1d..e2fb8b1 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -5,8 +5,25 @@ export interface CustomAxiosInstance extends AxiosInstance {
     onSessionExpired?: () => void;
 }
 
+export function resolveApiBaseUrl(rawBaseUrl: string | undefined = import.meta.env.VITE_API_URL): string {
+    const fallbackBaseUrl = '/api'
+
+    if (!rawBaseUrl)
+        return fallbackBaseUrl
+
+    const normalizedBaseUrl = rawBaseUrl.trim().replace(/\/+$/, '')
+    if (!normalizedBaseUrl)
+        return fallbackBaseUrl
+
+    return normalizedBaseUrl.endsWith('/api')
+        ? normalizedBaseUrl
+        : `${normalizedBaseUrl}/api`
+}
+
+const apiBaseUrl = resolveApiBaseUrl()
+
 const api: CustomAxiosInstance = axios.create({
-    baseURL: '/api',
+    baseURL: apiBaseUrl,
     headers: { 'Content-Type': 'application/json' },
 })
 
@@ -60,7 +77,7 @@ api.interceptors.response.use(
         }
 
         try {
-            const { data } = await axios.post('/api/auth/refresh', { refreshToken })
+            const { data } = await api.post('/auth/refresh', { refreshToken })
             sessionStorage.setItem('token',        data.token)
             sessionStorage.setItem('refreshToken', data.refreshToken)
             api.defaults.headers.common['Authorization'] = `Bearer ${data.token}`
@@ -82,4 +99,4 @@ api.interceptors.response.use(
     }
 )
 
-export default api
\ No newline at end of file
+export default api
diff --git a/frontend/src/services/canvasGraphService.ts b/frontend/src/services/canvasGraphService.ts
deleted file mode 100644
index 3002031..0000000
--- a/frontend/src/services/canvasGraphService.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import api from './api'
-import type { CanvasGraphResponse, LlmProviderId } from '../types'
-
-export async function getCanvasGraph(canvasId: number): Promise<CanvasGraphResponse> {
-    const res = await api.get<CanvasGraphResponse>(`/canvases/${canvasId}/graph`)
-    return res.data
-}
-
-export async function expandCanvasNode(canvasId: number, nodeId: number, prompt: string, providerOverride?: LlmProviderId): Promise<CanvasGraphResponse> {
-    const res = await api.post<CanvasGraphResponse>(`/canvases/${canvasId}/nodes/${nodeId}/expand`, {
-        prompt,
-        providerOverride: providerOverride ?? undefined,
-    })
-    return res.data
-}
diff --git a/frontend/src/services/canvasService.ts b/frontend/src/services/canvasService.ts
deleted file mode 100644
index bbe3b1c..0000000
--- a/frontend/src/services/canvasService.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { AxiosError } from 'axios'
-import api from './api'
-import type { CanvasSummary } from '../types'
-
-export interface CanvasApiErrorResponse {
-    message: string
-}
-
-export function getCanvasError(error: unknown): CanvasApiErrorResponse {
-    if (error instanceof AxiosError && error.response?.data) {
-        return error.response.data as CanvasApiErrorResponse
-    }
-
-    return { message: 'Something went wrong. Please try again.' }
-}
-
-export async function getCanvases(): Promise<CanvasSummary[]> {
-    const res = await api.get<CanvasSummary[]>('/canvases')
-    return res.data
-}
-
-export async function createCanvas(firstPrompt: string): Promise<CanvasSummary> {
-    const res = await api.post<CanvasSummary>('/canvases', { firstPrompt })
-    return res.data
-}
-
-export async function renameCanvas(canvasId: number, title: string): Promise<CanvasSummary> {
-    const res = await api.patch<CanvasSummary>(`/canvases/${canvasId}`, { title })
-    return res.data
-}
-
-export async function deleteCanvas(canvasId: number): Promise<void> {
-    await api.delete(`/canvases/${canvasId}`)
-}
diff --git a/frontend/src/services/chatSessionService.test.ts b/frontend/src/services/chatSessionService.test.ts
new file mode 100644
index 0000000..0093e3e
--- /dev/null
+++ b/frontend/src/services/chatSessionService.test.ts
@@ -0,0 +1,91 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const getMock = vi.fn()
+const postMock = vi.fn()
+const patchMock = vi.fn()
+const deleteMock = vi.fn()
+
+vi.mock('./api', () => ({
+  default: {
+    get: getMock,
+    post: postMock,
+    patch: patchMock,
+    delete: deleteMock,
+  },
+}))
+
+describe('chatSessionService', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('creates chat sessions using current payload contract', async () => {
+    postMock.mockResolvedValueOnce({ data: { graph: { session: { id: 10 } }, node: { nodeId: 20 } } })
+    const { createChatSession } = await import('./chatSessionService')
+
+    const response = await createChatSession({
+      title: 'Sprint 4',
+      providerOverride: 'openai',
+      modelOverride: 'gpt-4o-mini',
+    })
+
+    expect(postMock).toHaveBeenCalledWith('/chat-sessions', {
+      title: 'Sprint 4',
+      providerOverride: 'openai',
+      modelOverride: 'gpt-4o-mini',
+    })
+    expect(response.graph.session.id).toBe(10)
+  })
+
+  it('adds content only when provided for session bootstrap', async () => {
+    postMock.mockResolvedValueOnce({ data: { graph: { session: { id: 15 } }, node: { nodeId: 40 } } })
+    const { createChatSession } = await import('./chatSessionService')
+
+    await createChatSession({ title: 'With content', content: 'Hello node' })
+
+    expect(postMock).toHaveBeenCalledWith('/chat-sessions', {
+      title: 'With content',
+      providerOverride: undefined,
+      modelOverride: undefined,
+      content: 'Hello node',
+    })
+  })
+
+  it('uses notes endpoint for generated notes', async () => {
+    postMock.mockResolvedValueOnce({ data: { graph: { session: { id: 4 } }, node: { nodeId: 9 } } })
+    const { generateChatNodeNote } = await import('./chatSessionService')
+
+    await generateChatNodeNote(4, 9, 'gemini', 'gemini-1.5-flash')
+
+    expect(postMock).toHaveBeenCalledWith('/chat-sessions/4/nodes/9/notes', {
+      providerOverride: 'gemini',
+      modelOverride: 'gemini-1.5-flash',
+    })
+  })
+
+  it('uses move transfer mode by default when creating message-selection branch', async () => {
+    postMock.mockResolvedValueOnce({ data: { graph: { session: { id: 4 } }, node: { nodeId: 9 } } })
+    const { moveChatNodeMessagesToBranch } = await import('./chatSessionService')
+
+    await moveChatNodeMessagesToBranch(4, 9, [100, 101])
+
+    expect(postMock).toHaveBeenCalledWith('/chat-sessions/4/nodes/9/message-selections/branches', {
+      messageIds: [100, 101],
+      transferMode: 'move',
+    })
+  })
+
+  it('uses branch endpoint with required payload', async () => {
+    postMock.mockResolvedValueOnce({ data: { graph: { session: { id: 8 } }, node: { nodeId: 18 } } })
+    const { createChatBranch } = await import('./chatSessionService')
+
+    await createChatBranch(8, 18, 501, 'Branch from assistant reply', 'openai', 'gpt-4o-mini')
+
+    expect(postMock).toHaveBeenCalledWith('/chat-sessions/8/nodes/18/branches', {
+      branchFromMessageId: 501,
+      content: 'Branch from assistant reply',
+      providerOverride: 'openai',
+      modelOverride: 'gpt-4o-mini',
+    })
+  })
+})
diff --git a/frontend/src/services/chatSessionService.ts b/frontend/src/services/chatSessionService.ts
new file mode 100644
index 0000000..f8490f1
--- /dev/null
+++ b/frontend/src/services/chatSessionService.ts
@@ -0,0 +1,270 @@
+import api from './api'
+import type {
+    ChatCanvasNodeDetail,
+    ChatSessionGraph,
+    ChatSessionState,
+    ChatSessionSummary,
+    CreateChatNodeInput,
+    LlmProviderId,
+    UpdateChatNodeInput,
+} from '../types'
+
+export interface GuestChatPreviewMessageInput {
+    role: 'user' | 'assistant'
+    content: string
+    imageUrl?: string
+}
+
+export interface GuestChatPreviewRequest {
+    actionType: 'chat' | 'response' | 'note' | 'image'
+    prompt?: string
+    content?: string
+    imageUrl?: string
+    modelId?: string
+    messages?: GuestChatPreviewMessageInput[]
+}
+
+export interface GuestChatPreviewResponse {
+    actionType: 'chat' | 'note' | 'image'
+    message?: string
+    imageUrl?: string
+    noteTitle?: string
+    noteContent?: string
+    provider?: string | null
+    model?: string | null
+}
+
+export interface ImportGuestCanvasMessageInput {
+    role: 'user' | 'assistant'
+    content: string
+    imageUrl?: string | null
+    provider?: string | null
+    model?: string | null
+}
+
+export interface UpdateChatCanvasMessageRequest {
+    content: string
+}
+
+export interface MoveChatNodeMessagesRequest {
+    messageIds: number[]
+    transferMode?: 'move' | 'copy'
+}
+
+export interface ImportGuestCanvasNodeInput {
+    tempId: string
+    parentTempId?: string | null
+    nodeType: 'question' | 'response' | 'note'
+    title?: string
+    content?: string
+    positionX: number
+    positionY: number
+    width: number
+    height: number
+    isCollapsed?: boolean
+    expandedWidth?: number | null
+    expandedHeight?: number | null
+    preferredProvider?: LlmProviderId | null
+    preferredModel?: string | null
+    messages: ImportGuestCanvasMessageInput[]
+}
+
+export interface ImportGuestCanvasInput {
+    tempId: string
+    name: string
+    nodes: ImportGuestCanvasNodeInput[]
+}
+
+export interface ImportGuestCanvasesInput {
+    activeCanvasId?: string
+    canvases: ImportGuestCanvasInput[]
+}
+
+interface CreateChatSessionOptions {
+    title?: string
+    content?: string
+    providerOverride?: LlmProviderId
+    modelOverride?: string
+}
+
+export async function getChatSessions(): Promise<ChatSessionSummary[]> {
+    const res = await api.get<ChatSessionSummary[]>('/chat-sessions')
+    return res.data
+}
+
+export async function createChatSession(options: CreateChatSessionOptions = {}): Promise<ChatSessionState> {
+    const payload: Record<string, string | undefined> = {
+        title: options.title ?? undefined,
+        providerOverride: options.providerOverride ?? undefined,
+        modelOverride: options.modelOverride ?? undefined,
+    }
+
+    if (options.content !== undefined)
+        payload.content = options.content
+
+    const res = await api.post<ChatSessionState>('/chat-sessions', payload)
+    return res.data
+}
+
+export async function renameChatSession(sessionId: number, title: string): Promise<ChatSessionSummary> {
+    const res = await api.patch<ChatSessionSummary>(`/chat-sessions/${sessionId}`, { title })
+    return res.data
+}
+
+export async function deleteChatSession(sessionId: number): Promise<void> {
+    await api.delete(`/chat-sessions/${sessionId}`)
+}
+
+export async function getChatSession(sessionId: number, activeNodeId?: number): Promise<ChatSessionGraph> {
+    const res = await api.get<ChatSessionGraph>(`/chat-sessions/${sessionId}`, {
+        params: activeNodeId ? { activeNodeId } : undefined,
+    })
+    return res.data
+}
+
+export async function getChatNode(sessionId: number, nodeId: number): Promise<ChatCanvasNodeDetail> {
+    const res = await api.get<ChatCanvasNodeDetail>(`/chat-sessions/${sessionId}/nodes/${nodeId}`)
+    return res.data
+}
+
+export async function sendChatNodeMessage(
+    sessionId: number,
+    nodeId: number,
+    content: string,
+    imageUrl?: string,
+    providerOverride?: LlmProviderId,
+    modelOverride?: string,
+): Promise<ChatSessionState> {
+    const res = await api.post<ChatSessionState>(`/chat-sessions/${sessionId}/nodes/${nodeId}/messages`, {
+        content,
+        imageUrl: imageUrl ?? undefined,
+        providerOverride: providerOverride ?? undefined,
+        modelOverride: modelOverride ?? undefined,
+    })
+    return res.data
+}
+
+export async function updateChatNodeMessage(
+    sessionId: number,
+    nodeId: number,
+    messageId: number,
+    content: string,
+): Promise<ChatSessionState> {
+    const res = await api.patch<ChatSessionState>(`/chat-sessions/${sessionId}/nodes/${nodeId}/messages/${messageId}`, {
+        content,
+    } satisfies UpdateChatCanvasMessageRequest)
+    return res.data
+}
+
+export async function createChatNode(
+    sessionId: number,
+    payload: CreateChatNodeInput,
+): Promise<ChatSessionState> {
+    const res = await api.post<ChatSessionState>(`/chat-sessions/${sessionId}/nodes`, payload)
+    return res.data
+}
+
+export async function updateChatNode(
+    sessionId: number,
+    nodeId: number,
+    payload: UpdateChatNodeInput,
+): Promise<ChatSessionState> {
+    const res = await api.patch<ChatSessionState>(`/chat-sessions/${sessionId}/nodes/${nodeId}`, payload)
+    return res.data
+}
+
+export async function generateChatNodeNote(
+    sessionId: number,
+    nodeId: number,
+    providerOverride?: LlmProviderId,
+    modelOverride?: string,
+): Promise<ChatSessionState> {
+    const res = await api.post<ChatSessionState>(`/chat-sessions/${sessionId}/nodes/${nodeId}/notes`, {
+        providerOverride: providerOverride ?? undefined,
+        modelOverride: modelOverride ?? undefined,
+    })
+    return res.data
+}
+
+export async function generateChatNodeImage(
+    sessionId: number,
+    nodeId: number,
+    prompt: string,
+    providerOverride?: LlmProviderId,
+    modelOverride?: string,
+): Promise<ChatSessionState> {
+    const res = await api.post<ChatSessionState>(`/chat-sessions/${sessionId}/nodes/${nodeId}/image-prompts`, {
+        prompt,
+        providerOverride: providerOverride ?? undefined,
+        modelOverride: modelOverride ?? undefined,
+    })
+    return res.data
+}
+
+export async function createChatBranch(
+    sessionId: number,
+    nodeId: number,
+    branchFromMessageId: number,
+    content: string,
+    providerOverride?: LlmProviderId,
+    modelOverride?: string,
+): Promise<ChatSessionState> {
+    const res = await api.post<ChatSessionState>(`/chat-sessions/${sessionId}/nodes/${nodeId}/branches`, {
+        branchFromMessageId,
+        content,
+        providerOverride: providerOverride ?? undefined,
+        modelOverride: modelOverride ?? undefined,
+    })
+    return res.data
+}
+
+export async function moveChatNodeMessagesToBranch(
+    sessionId: number,
+    nodeId: number,
+    messageIds: number[],
+    transferMode: 'move' | 'copy' = 'move',
+): Promise<ChatSessionState> {
+    const payload: MoveChatNodeMessagesRequest = { messageIds, transferMode }
+    const res = await api.post<ChatSessionState>(`/chat-sessions/${sessionId}/nodes/${nodeId}/message-selections/branches`, payload)
+    return res.data
+}
+
+export async function saveChatLayout(
+    sessionId: number,
+    nodes: Array<{ nodeId: number; positionX: number; positionY: number }>,
+    activeNodeId?: number,
+): Promise<ChatSessionGraph> {
+    const res = await api.patch<ChatSessionGraph>(
+        `/chat-sessions/${sessionId}/layout`,
+        { nodes },
+        { params: activeNodeId ? { activeNodeId } : undefined },
+    )
+    return res.data
+}
+
+
+export async function deleteChatNode(
+    sessionId: number,
+    nodeId: number,
+    newActiveNodeId?: number,
+): Promise<ChatSessionGraph> {
+    const res = await api.delete<ChatSessionGraph>(
+        `/chat-sessions/${sessionId}/nodes/${nodeId}`,
+        { params: newActiveNodeId ? { newActiveNodeId } : undefined },
+    )
+    return res.data
+}
+
+export async function previewGuestChatAction(
+    payload: GuestChatPreviewRequest,
+): Promise<GuestChatPreviewResponse> {
+    const res = await api.post<GuestChatPreviewResponse>('/chat/guest-preview', payload)
+    return res.data
+}
+
+export async function importGuestCanvases(
+    payload: ImportGuestCanvasesInput,
+): Promise<ChatSessionState> {
+    const res = await api.post<ChatSessionState>('/chat/import-guest', payload)
+    return res.data
+}
diff --git a/frontend/src/services/llmService.ts b/frontend/src/services/llmService.ts
index 19fc172..2202a78 100644
--- a/frontend/src/services/llmService.ts
+++ b/frontend/src/services/llmService.ts
@@ -1,6 +1,6 @@
 import { AxiosError } from 'axios'
 import api from './api'
-import type { LlmProviderId, MainNodeChatResponse, ProviderListResponse } from '../types'
+import type { LlmProviderId, MainNodeChatResponse, ProviderListResponse, ProviderModelsResponse, StandaloneChatRequestMessage, StandaloneChatResponse } from '../types'
 
 export interface LlmApiErrorResponse {
     message: string
@@ -20,6 +20,11 @@ export async function getProviders(): Promise<ProviderListResponse> {
     return res.data
 }
 
+export async function getProviderModels(provider: LlmProviderId): Promise<ProviderModelsResponse> {
+    const res = await api.get<ProviderModelsResponse>(`/llm/providers/${provider}/models`)
+    return res.data
+}
+
 export async function upsertProviderKey(provider: LlmProviderId, apiKey: string): Promise<ProviderListResponse> {
     const res = await api.put<ProviderListResponse>(`/llm/providers/${provider}`, { apiKey })
     return res.data
@@ -55,3 +60,16 @@ export async function sendMainNodeMessage(canvasId: number, content: string, pro
     })
     return res.data
 }
+
+export async function sendStandaloneChatMessage(
+    history: StandaloneChatRequestMessage[],
+    content: string,
+    providerOverride?: LlmProviderId,
+): Promise<StandaloneChatResponse> {
+    const res = await api.post<StandaloneChatResponse>('/llm/chat/session/messages', {
+        history,
+        content,
+        providerOverride: providerOverride ?? undefined,
+    })
+    return res.data
+}
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index b1bfc0a..bd6d73c 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -52,7 +52,18 @@ export interface EmailVerificationRequiredResponse extends EmailVerificationOtpR
     email: string
 }
 
-export type LlmProviderId = 'openai' | 'claude' | 'gemini'
+export type LlmProviderId = 'openai' | 'claude' | 'gemini' | 'lmstudio'
+export type CanvasGenerationMode = 'compact' | 'rich'
+export type ChatNodeType = 'question' | 'response' | 'note'
+
+export interface CanvasModelOption {
+    provider: LlmProviderId
+    modelId: string
+    label: string
+    hint: string
+    badge: string
+    isBasic?: boolean
+}
 
 export interface ProviderSummary {
     provider: LlmProviderId
@@ -68,6 +79,16 @@ export interface ProviderListResponse {
     providers: ProviderSummary[]
 }
 
+export interface ProviderModel {
+    id: string
+    displayName: string | null
+}
+
+export interface ProviderModelsResponse {
+    provider: LlmProviderId
+    models: ProviderModel[]
+}
+
 export interface CanvasSummary {
     id: number
     title: string
@@ -92,21 +113,179 @@ export interface MainNodeChatResponse {
     messages: MainNodeMessage[]
 }
 
+export interface StandaloneChatRequestMessage {
+    role: 'user' | 'assistant'
+    content: string
+}
+
+export interface StandaloneChatMessage {
+    role: 'user' | 'assistant'
+    content: string
+    provider: LlmProviderId | null
+    model: string | null
+    createdAt: string
+}
+
+export interface StandaloneChatResponse {
+    defaultProvider: LlmProviderId | null
+    availableProviders: LlmProviderId[]
+    message: StandaloneChatMessage
+}
+
+export interface ChatSessionMessage extends StandaloneChatMessage {
+    id: string
+}
+
+export interface ChatSession {
+    id: string
+    title: string
+    createdAt: string
+    updatedAt: string
+    messages: ChatSessionMessage[]
+}
+
+export interface ChatSessionSummary {
+    id: number
+    title: string
+    createdAt: string
+    updatedAt: string
+}
+
+export interface ChatCanvasNodeSummary {
+    id: number
+    parentNodeId: number | null
+    branchFromMessageId: number | null
+    nodeType: ChatNodeType
+    title: string
+    preview: string
+    content: string
+    positionX: number
+    positionY: number
+    width: number
+    height: number
+    isCollapsed: boolean
+    expandedWidth: number | null
+    expandedHeight: number | null
+    preferredProvider: LlmProviderId | null
+    preferredModel: string | null
+    createdAt: string
+    updatedAt: string
+}
+
+export interface ChatCanvasMessage {
+    id: number
+    nodeId: number
+    role: 'user' | 'assistant'
+    content: string
+    imageUrl: string | null
+    provider: LlmProviderId | null
+    model: string | null
+    createdAt: string
+    updatedAt: string
+    canBranch: boolean
+}
+
+export interface ChatCanvasNodeDetail {
+    sessionId: number
+    nodeId: number
+    parentNodeId: number | null
+    branchFromMessageId: number | null
+    nodeType: ChatNodeType
+    title: string
+    preview: string
+    content: string
+    positionX: number
+    positionY: number
+    width: number
+    height: number
+    isCollapsed: boolean
+    expandedWidth: number | null
+    expandedHeight: number | null
+    preferredProvider: LlmProviderId | null
+    preferredModel: string | null
+    createdAt: string
+    updatedAt: string
+    localMessages: ChatCanvasMessage[]
+    resolvedMessages: ChatCanvasMessage[]
+}
+
+export interface ChatSessionGraph {
+    session: ChatSessionSummary
+    defaultProvider: LlmProviderId | null
+    availableProviders: LlmProviderId[]
+    rootNodeId: number
+    activeNodeId: number
+    nodes: ChatCanvasNodeSummary[]
+}
+
+export interface ChatSessionState {
+    graph: ChatSessionGraph
+    node: ChatCanvasNodeDetail
+}
+
+export interface CreateChatNodeInput {
+    parentNodeId: number
+    nodeType: ChatNodeType
+    title?: string
+    content?: string
+    positionX?: number
+    positionY?: number
+    width?: number
+    height?: number
+    isCollapsed?: boolean
+    expandedWidth?: number | null
+    expandedHeight?: number | null
+    preferredProvider?: LlmProviderId | null
+    preferredModel?: string | null
+}
+
+export interface UpdateChatNodeInput {
+    title?: string
+    content?: string
+    positionX?: number
+    positionY?: number
+    width?: number
+    height?: number
+    isCollapsed?: boolean
+    expandedWidth?: number | null
+    expandedHeight?: number | null
+    preferredProvider?: LlmProviderId | null
+    preferredModel?: string | null
+}
+
 export interface CanvasGraphNode {
     id: number
     parentNodeId: number | null
     kind: 'main' | 'response'
     title: string
+    generationMode?: CanvasGenerationMode
+    summary?: string | null
+    category?: string | null
     content: string
     sourcePrompt: string | null
+    continuationPrompt?: string | null
+    blocks?: CanvasGraphNodeBlock[]
+    sources?: CanvasGraphNodeSource[]
     depth: number
     siblingOrder: number
     createdAt: string
     updatedAt: string
 }
 
+export interface CanvasGraphNodeBlock {
+    type: string
+    text: string
+    options: string[]
+}
+
+export interface CanvasGraphNodeSource {
+    label: string
+    url: string
+}
+
 export interface CanvasGraphResponse {
     canvasId: number
+    canvasTitle?: string | null
     mode: 'graph' | 'legacy'
     defaultProvider: LlmProviderId | null
     availableProviders: LlmProviderId[]
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 93fb538..1f7f0c0 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -4,8 +4,43 @@ export default {
         './index.html',
         './src/**/*.{js,ts,jsx,tsx}',
     ],
+    corePlugins: {
+        preflight: false,
+    },
     theme: {
-        extend: {},
+        extend: {
+            colors: {
+                background: 'hsl(var(--background) / <alpha-value>)',
+                foreground: 'hsl(var(--foreground) / <alpha-value>)',
+                border: 'hsl(var(--border) / <alpha-value>)',
+                input: 'hsl(var(--input) / <alpha-value>)',
+                accent: {
+                    DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
+                    foreground: 'hsl(var(--accent-foreground) / <alpha-value>)',
+                },
+                muted: {
+                    DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
+                    foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
+                },
+                destructive: {
+                    DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
+                    foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
+                },
+                success: {
+                    DEFAULT: 'hsl(var(--success) / <alpha-value>)',
+                    foreground: 'hsl(var(--success-foreground) / <alpha-value>)',
+                },
+                warning: {
+                    DEFAULT: 'hsl(var(--warning) / <alpha-value>)',
+                    foreground: 'hsl(var(--warning-foreground) / <alpha-value>)',
+                },
+                'canvas-bg': 'hsl(var(--canvas-bg) / <alpha-value>)',
+            },
+            fontFamily: {
+                sans: ['var(--font-sans)'],
+                mono: ['var(--font-mono)'],
+            },
+        },
     },
     plugins: [],
 }
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index d3f7cef..12f7c4a 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -10,6 +10,12 @@
         "module": "ESNext",
         "skipLibCheck": true,
         "moduleResolution": "bundler",
+        "baseUrl": ".",
+        "paths": {
+            "@/*": [
+                "src/*"
+            ]
+        },
         "allowImportingTsExtensions": true,
         "isolatedModules": true,
         "moduleDetection": "force",
@@ -28,4 +34,4 @@
             "path": "./tsconfig.node.json"
         }
     ]
-}
\ No newline at end of file
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 32252bb..685e841 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,10 +1,16 @@
 import { defineConfig as defineViteConfig, mergeConfig } from 'vite'
 import { defineConfig as defineVitestConfig } from 'vitest/config'
 import react from '@vitejs/plugin-react'
+import { fileURLToPath, URL } from 'node:url'
 
 export default mergeConfig(
     defineViteConfig({
         plugins: [react()],
+        resolve: {
+            alias: {
+                '@': fileURLToPath(new URL('./src', import.meta.url)),
+            },
+        },
         server: {
             host: true, // Allow network access for Docker
             watch: {
diff --git a/init.sql b/init.sql
index 7d884c2..8e69893 100644
--- a/init.sql
+++ b/init.sql
@@ -89,3 +89,25 @@ CREATE TABLE IF NOT EXISTS main_node_messages (
     FOREIGN KEY (conversation_id) REFERENCES main_node_conversations(id) ON DELETE CASCADE,
     INDEX idx_main_node_messages_conversation_id (conversation_id, id)
 );
+
+CREATE TABLE IF NOT EXISTS canvas_nodes (
+    id                  INT AUTO_INCREMENT PRIMARY KEY,
+    canvas_id           INT           NOT NULL,
+    parent_node_id      INT           NULL,
+    kind                VARCHAR(32)   NOT NULL,
+    title               VARCHAR(160)  NOT NULL,
+    generation_mode     VARCHAR(16)   NOT NULL DEFAULT 'compact',
+    summary             MEDIUMTEXT    NULL,
+    category            VARCHAR(80)   NULL,
+    content             MEDIUMTEXT    NOT NULL,
+    source_prompt       TEXT          NULL,
+    continuation_prompt TEXT          NULL,
+    details_json        JSON          NULL,
+    depth               INT           NOT NULL,
+    sibling_order       INT           NOT NULL,
+    created_at          TIMESTAMP     NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at          TIMESTAMP     NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (canvas_id) REFERENCES canvases(id) ON DELETE CASCADE,
+    FOREIGN KEY (parent_node_id) REFERENCES canvas_nodes(id) ON DELETE CASCADE,
+    INDEX idx_canvas_nodes_canvas_parent (canvas_id, parent_node_id, sibling_order, id)
+);
diff --git a/tests/playwright/.env.example b/tests/playwright/.env.example
new file mode 100644
index 0000000..ccdd02a
--- /dev/null
+++ b/tests/playwright/.env.example
@@ -0,0 +1,9 @@
+BASE_API_URL=http://localhost:8080/api
+BASE_UI_URL=http://localhost:3000
+
+TEST_USER_EMAIL=your-user@example.com
+TEST_USER_PASSWORD=YourPassword123!
+
+# Optional second user. If omitted, cross-user tests are skipped.
+TEST_USER2_EMAIL=
+TEST_USER2_PASSWORD=
diff --git a/tests/playwright/README.md b/tests/playwright/README.md
index 15226ba..d99fad9 100644
--- a/tests/playwright/README.md
+++ b/tests/playwright/README.md
@@ -1,83 +1,53 @@
-# Coliee Sprint 2 — Test Suite
+# Coliee Playwright Suite (Current Implementation)
 
-Playwright-based API + UI tests for Sprint 2 canvas features.
+Playwright API and UI suites for the chat-session architecture used in Sprint 4 flows (branching, notes, export-related UI paths).
 
 ## Setup
 
 ```bash
-cd coliee-tests
+cd tests/playwright
 npm install
-npx playwright install chromium
+npx playwright install
 ```
 
-## Required environment variables
+## Environment
 
-Create a `.env` file or export these before running:
+Create `tests/playwright/.env`:
 
 ```bash
-# Backend API base URL
-BASE_API_URL=http://localhost:5000/api
+BASE_API_URL=http://localhost:8080/api
+BASE_UI_URL=http://localhost:3000
 
-# Frontend URL
-BASE_UI_URL=http://localhost:5173
-
-# Primary test user (registered + email verified)
-TEST_USER_EMAIL=testuser1@example.com
+TEST_USER_EMAIL=your-user@example.com
 TEST_USER_PASSWORD=YourPassword123!
 
-# Second test user (for cross-user isolation tests)
-TEST_USER2_EMAIL=testuser2@example.com
+# Optional second user. If missing, cross-user specs are skipped.
+TEST_USER2_EMAIL=second-user@example.com
 TEST_USER2_PASSWORD=YourPassword123!
-
-# Optional: real OpenAI key for live LLM tests
-# Without this, LLM-calling tests are skipped automatically
-TEST_OPENAI_KEY=sk-...
 ```
 
-## Running tests
+## Run
 
 ```bash
-# Run all API tests (no browser, fast)
 npm run test:api
-
-# Run all UI tests (browser)
 npm run test:ui
-
-# Run everything
 npm test
-
-# Run in headed mode to watch the browser
-npm run test:headed
-
-# View HTML report after run
-npm run report
 ```
 
-## Test structure
+## Watch In Browser
 
-```
-tests/
-  api/
-    canvas-crud.spec.ts     — CRUD for canvases (create, list, rename, delete)
-    canvas-graph.spec.ts    — Graph fetching and node expansion
-    llm.spec.ts             — Provider management + main-node chat
-  ui/
-    homepage.spec.ts        — Full UI flows: create, rename, delete, graph view, mobile
-    settings.spec.ts        — Provider key save/remove/test via Settings UI
-  helpers/
-    api.ts                  — Typed API client used by all tests
-MANUAL_TEST_CHECKLIST.md    — Exploratory testing checklist (run after automated tests)
-```
+```bash
+# Normal headed run
+npx playwright test tests/ui/sprint4-flows.spec.ts --headed --project=ui-chrome
 
-## Notes for QA
+# Slow visual run (500ms delay per action)
+npm run test:ui:slow -- tests/ui/sprint4-flows.spec.ts
+```
 
-- Tests run **sequentially** (workers: 1) because they share a database. Don't change this to parallel.
-- API tests are faster and should pass before running UI tests.
-- Tests marked with `test.skip(!OPENAI_KEY, ...)` are automatically skipped unless you provide a real key.
-- Each test cleans up canvases it creates via the API `deleteCanvas` call in teardown.
-- If a test fails mid-way and leaves orphaned canvases, run `GET /api/canvases` as the test user and delete them manually.
+`--slow-mo` may not be supported as a CLI flag in some Playwright versions, so slow mode is configured via the `ui-chrome-slow` project in `playwright.config.ts`.
 
-## Adding new tests
+## Notes
 
-For API tests: add to `tests/api/` and import helpers from `tests/helpers/api.ts`.
-For UI tests: add to `tests/ui/` and follow the pattern of logging in via `loginViaUI()`.
+- The global setup logs in user 1 and user 2 once and stores tokens in `.auth-cache.json`.
+- If second-user credentials are not configured, only two-user isolation checks are skipped.
+- Tests are local-first and target `localhost` by default.
diff --git a/tests/playwright/package.json b/tests/playwright/package.json
index c284a6e..973ae99 100644
--- a/tests/playwright/package.json
+++ b/tests/playwright/package.json
@@ -7,6 +7,7 @@
     "test:api": "playwright test tests/api/",
     "test:ui": "playwright test tests/ui/",
     "test:headed": "playwright test --headed",
+    "test:ui:slow": "playwright test tests/ui/ --headed --project=ui-chrome-slow",
     "report": "playwright show-report"
   },
   "devDependencies": {
diff --git a/tests/playwright/playwright-report/index.html b/tests/playwright/playwright-report/index.html
index c3d6add..78099d6 100644
--- a/tests/playwright/playwright-report/index.html
+++ b/tests/playwright/playwright-report/index.html
@@ -82,4 +82,4 @@
     <div id='root'></div>
   </body>
 </html>
-<script id="playwrightReportBase64" type="application/zip">data:application/zip;base64,UEsDBBQAAAgIAPugdlzC0aMo5SgAAO/OAgAZAAAAYThlMThhOGUyMzQ5OTI2YzkzZjcuanNvbu2d/3LbuJbnX4Wj6qo4tTZC/CBBeDa7lc5NT/dOT9/eJD1Tte2e25QE25xIooakk871umr+2gfY2mfYB7tPMgVKsqnD3yQkUTLyVxLJMAieAxwAn+8596PrYCZ/mI4uR74nsed7klAmBHEngl7z0Xn6+U/+XI4uR3fBq9twLpf+jUTxUk5QEo/OR4mMk3h0+et9+rfSpi6m04lte54/tcXEJ5KNiXOtfjxIZqrxt5H0E2lN/MVnP7bm4dSfWX/7j/9nyfky+Woto3C+TKz4NvwSW8FiFiykJaMojM6tRZhYC5l8CaNP1sSfzUbno2UU/pucJI/dvpjcRuFcjs5Hs3DiJ0G4GF3ep09W+lTqN4wuXX4+moSzu/lidOk8nI+md9H6xwl3nfORv1iESfo/agR+Ox8l/s36b+FdMgnT3y//WMpJIqeqY35yu/o4kvHdbD1usNU48aPkY5D+MLGJe2HTC0I+YnZJ3UvmIew4/2ukmkiir6NLW/2AXK5fwXo0v5XXYSSt78Pwk3qa2hZdrFp86ogneFGz47TZN7OZdRuGn7o0TDLd/e185CeJP7mdy0Wy/o+WL0g1t3lB7oP6+90iGV3i81H8KVgu5XR0ee3PYnk+ihfq38nocmRd3dk2Hv8q7LllYWH97/W/qZhfLbY+JHb2Q0vZ9+afdI6ePnkclrOzl9bTN17/t8wP34O2LWur7c1f8Xz9N7z6zr+u/0nIPNPN1d/sXH/xVpvWY6vufBIunjov5tbEn9zKbF8L+kLn/+PDn3/K/drtZ1/6USzPruPCDyPpT78LZvLD18Xk7OkbH//8j+9++svbN2+/f1fU+nlBX8j8xV1yfeG9ePrs5cvRw/mTbX4X/JHcRdK6Go2j8Esso6tREwP12LaBOtwpsvwf/bvF5NZaN92oYQ82jKtNv8x2H1p9uXBEJuEikX8kjUaEuxS4bOFUsJmvVy03apeDdg83HmouaTYYwgaddr2K0VDtNmqVwFbdfYxF14H7yf8c3KjnS0LravRqFt4EiwbDJ5DtggfFts30LgCZFRqzLisAcQsnYnfux18Xk8JPru8WE9XHzIfBQkUcb+6S2zeL6T+EZ6mFPc5ol4Wz68+Z75TNf6qdn/3ktritOImCxU3NNE7mL9Lxy06dueWI8NKlw//iBwnoUuFsfxMm4dnTb/39m/tffvjLL+9/fFhZzO+Z399tMdz8abcoev2fTH72Z3d+Is+2Vpx36/+tcwTHRjac/HDN5NfWDbzebnBQA9D6kvZpXAL027LO7q0k/CQXT33M+nMkryMZ335U37AeyqPFUcX8q6ygfvpVVsfFttW5QqvVUbev1VEHjB80DOru0izVkx1oWqIa/E1977sw+jH0px+S1PKfpvz1ljiYzrYm/i27+hc/SKzrMLJmoT+1YtWEdTXK/GQjK8MOWOSF5jWe9l7jD2pFB3rT+7Tl8tk7uM58cLaJZjLT3t+9bh6zbBnv21kw+WSlphRGZy/Gd0kSLn71o8C/mPljOXt9tYnKfWshv6xPlq5Gv714WWvUGNkug5FrTYje0qi53deo3aqjC273N7qJGuGspbUY48MYIi8/AIFPvTqVOyt3d5l8+/V9ONtytWngz8KbF7mOgEX+3lr485rwn8xfbB15Zhq1Hl6+LOxTEn4r/zmIg/FMnm3P5O/Sp7GuRpmvXI2sp4fYdP183blLC/x666GJW2Du7jSOVWckj+d5ootXDNfwn5Nx9vP5jn/aTRUk26UGK0vydSlfX43iu/E8SK5Gv13e+vGFOvs6e7SFt2sreNloicEeiM6F5hWG9l1htscIDiDdnaO1GusDLTWs1H4yk/HbcJH4weJjevianY79mYySRmZCPDDl6t3DqePujZUw3MlKWJWVwA2e5klvNY4ZEyibnDJvIvvzb6ZTK7mV1nUQxcn6mlGfRWmbrJrvX45+6ThIXEMEOJ/Tu4Plbu+w5rT86DkZ9BHEQtsnFA/bPvjmOpFRM5TAwYja8G6L0qIbs7aXcUVNd71A7HdHmvYE3pESt/BacBbGje9IHYwYBdeNomaxP8C94G/no5S8WX9PnRrexaPL0dKP4xRyyUExoG3VQvhpdJlEd6tXUYkNsSmj/sSbjjGbUmkzPMV2KTakgKHP/iyYboChSfpxvPncX0ytWM7kJImtINFJCnFRRgpR27b1k0KrVuvsyaGuTlIobRHe4jNW7d5t/Mph5bFuV/QgbRZ0mu/Dq3qQB6rPK8irfoppTh6krcLXR2oinWMkDxyMuOfAzXXNSzfggQEPtJ4QDAA8IIg7MFIx4MHOXpIBDzZWx8Hs6zlarc6AB90t51TAA4I8SBd6TLOZGfDAgAd7BQ8o4jbgxj29catH+tq0hyvO+z2yu1uh4XIHXvO7sKM/zjzA+TxFXLitdvBtnYL2PZ8frt0/J9sc/lG7V35t/F0wm1lXow/LKFgk1nLmLxZqj63CpP9JLWITp9CzXqLHpUgdh/mR9BstNJ4NXMrVe+flZS6WnW4LTdXFstf8QqynPRfb3WbQMz/5OPx1P3sdzGbZH6x45Xu5i+5hzhriW90QyP5ZHoo8DnSuXK/O1eu94TX+MkRb3WeMyktXnscoTmnpdxzJCQYvcR292JuXOZHktJOr8Kp1p/mB4TGGU4uwWOKeDbPurSSYy/Auqf71zhzbT//9F9u2rYfDRGjtfQWernZ/yQXz3q9TP/Ev1LV3MH19NZrK+FMSLi/iYCrHfgSi+ZYcTsOpsRmv+Lhs1ve43vUZwjagGzDVexnhZS7hXaeT6xvv1ujdJ+9Ge5/NWs1iorkUIjP8ZSP1vf9Z/vL+x7MnA3i1Mrwfpq+vrqb/5VWD6WXdRoPTfYYIBTeXes/2RUZ/RUinueKZWffhzEmPm7XznW2xTg8kUlkyEHpQXJhjpjUlVNB0zbZzV0gkQ4SBxZ3axXljWiGRDFGoLsaiZiI4fSbSpYyOsZCuIwnj/Joxj1UykatdqhXE1jSI/fFMTq0vt8FMrvjIYHGjE4UUtAyFJI4gO0ialrZaZ0eOw7SikKpFF7J0hRbfzZ8ceLmtA4VUzYJV1duHM/VBIRlyOETKs6rTbiikajVHRnWdPIeMQjLEYYozUZeJzKCQBoWsi6qODYV0EIfss14hpSEhDQlZYHQw8ZdXs+AaEtKQkC1JSAd5cGrzqN5LFUNCGhJyvySki1wBtyp6oS/Re+oUTsVFodjhdfNwSUjR3NOO8QLl0CSki7gHSRO9TsH7kpDDtfvnZJvDJyGFhv3GUIAkFRSoQ4BV/KYOb/PvDWarT2HP0h/UiHqqOQPcEmg+ABJeX9TzGbvms/ODAWKsYusMYf8AqYs8FygmNcvVse30jHaxXYFjY1sDXnq8cCW29eUzKvDH1TjkHjtY3PztP/4/eOj6Cagx4EOf/nfN9zSJeIGrVPS6iV8IynYZ7qZZfR/j3S4YyBFY/nOxzv3GvO3mB33xzc7ewJ/WaEDVxnbzHf1+zsBhT91lbGtH570d/Tl60ZFZ7pCngO04vwdR5iKRy+piF5alag1bFDR9IKJM9YTBhyzGPloRZTxfi6fuSu70gbIpd8c+H1PhcOJPXOxNPJIByt5LtS3OAmXrEpzXYTS3/OVS+lF8bsX+Zxlbd8upn8iptfphjVwZxqQMLKMuozvIsZe2WmdO6xKX2sAy1WJb727uVqp1mHZcA1jGEeb2kYFlqs9gKLBXVeuwEVjGEfagzMXbS3W/wrGI5L/fqbKlTYaDwomxMLPjejDWDbewEOqCzCZkcNNuZgh//vOHj4r08JfBGkyXcbNR5DCBS3td/a2cLWUUq1++PQNmdquky+0Mxtu71ZfV8SGd/xyF8yAuROT+69N/3lurFaq4tcXdfCyjp8/+PvPZOJx+revDaov74W4+96Ov2RDq6SsVlXYxLo/bYVXcSMY1IF8+6t14WFFwugzjZBtY+PbNh3cPjwb1e9G4npc/S8+AtlW8imHgb1m30p/KqOQt32dGTjGYYRT81d8mNKtfNJn//q30IxlZ39yn+NZDZniyLzszQFWMVlNCliMGiz1xRzMbaAhZQ8hW3kAMgJD1ECGsVQxnCNnu78gQshujgyf8Qu8RvyFku1vOqRCyHqJQTexRU6T08G/61AnZgknxvz/KnCkhDWxX5E9s6s4T2ppuJm0GdjuZ7p7GFr7S/MKm02e+ud9090Hf/NvSahkU3R/tHCwQgSoFrrniIbN7G/IQLOpg73y/lg3LoT7sOykRv7RtZOeu0mqOJVvfWmQvnrskJao6wILWUL3BPy94m2T+O1iWvrlf/RUF0worzZ8PlfdqYOlP1tdZ8wKCs3isjirhWbtDvq2Fuwp8nAUvXqLrYJbI6OzeuvXjy2Lhz+QuiuQieX01UlePqRdaDxlwefVdNE4WF8tgNrsI7xLlKBm0/19fX21uHBXytAiTs62mf6slSlaOzcFqg5ne1QbjTNxEu53Gbw0/fDfN8wtF6XB9mw7td2H0IS1xJqcVCXhWxNmurLOVDRK71AbrEMNgsbxLfg2mymRWY3CxcumLptN/7shLM19IMnfWpEs2SkzKy4bD64t0OErOWdtMvtXDWr4kkOZJ0NdLQvqb9idnaWeXrROn1zzNd+HkLq7m69Zf0WzjlJTe62qxcdrbxvdkODt8pwex0Npk8j/JL7Ov6+Vh+iQt0mpcu61XgklWuNApfiZVwgXSHN9OB6vQEqAOpmjYNW602hmJjmPFIn3RKpLTpan64H+WtW3JP/xJTRDuztO48+mDh8oAqCDkzeju1o+Ykeym3TxfdeTSUr+qVrabugklsICJ5mCUuH23mQPwBGOsh4jWdcXxDRLM7/gwh8G63Fj3aU72Drujm1Vkl8ctrpgHdqhS4+hl7naqByukXFH6p3c/vvv4DrKFrxrcBqU27hBYwrl9YuQyvpDhzIlGJ+sGZ9ea+MKn/9xmCbOfVCGAubPmJ7faNQL49FNTOZNJ5kmrwMBXm0PYH7bOYEu8aAeu0MrYGdy+DR4VbCy3Wblc7o7ArQHyG2LXxa1TnYqbJjD8uhv88MKf4p6QbImYTsKftF1OYErdmjQYpy/8mVDpOVN36nOfCnxNnWtnUin8Gc/8xaeVtseKb8Mv8UYKlPZaq9yHluaRZq4C4XXLfVat1hmRRzTKfdYt5jKc65H7rFuHare+cp91s+DY53ASl8YznEcdKMyhFYNRL/dZt+rCVvcibOkj9+GXNkY2Ltfj9JP7rJuH4qrBTbY95T6rxyQgH5urLxw3ch8j9zFyH51yn5XLeh4kzvXeiBm5j5H7VHrbweU+/NImyIY6c6z3sNTofYzep8DqIJdFdOcqN4KfzqZzEoKf1Mwohps9G5uc+Id/1c9c8UMbGC9FFBbTw65mtZqR/BjJz85nYYoc24VH7jW3G0byYyQ/O6VEGGIkV6pULyRCe0t+WkQGe5T8tAgZBkanfJteW63olDQv+TNGU+ipan4YYrBYMGGaWXfaW/NDqzQ/ucWo3MOOWvPDyjU/a3JdPbtGUJ0hV0A9mOb9IGYZrU83Ur0Fp3RorU+O+alaoZrSwpZlHQqTZ82VIc+QPN4PJs+Qh2HOX1fvfgEz2jc227/lG+M8YiyelYu0Sjc8Gd/yZzJKGixwDrJh3lm92dswywixGO7kOVVCLNZcftKpBNRqIDM+1nIL8WY6tfwNCrcC4MYr0Cv2PweLG527ak2W55ZaXimD3uR80kG2gOeTHSqKGQi9NLgzEHoHaz9pCN1BxMWQM9QGoavWIYR6AAhddWMA1SeKe7KFdXaF0B1EIY+bJggaGBi5bwodCz72ibB9X0hvjKdjm1dS6O/iib+U1if5Vf3vRM7i9XGIVgDdydwtAACdcbEDAD1ttc6AGBNaAXSn4NSMFNaE6OZIzHH0A+iqWffIAHQHsVxhD1wsbGkBoDv57OUE1xx6DgJAd5ALy2/oBNAd5ObqcAxunu0PoKvHBEbltKf4DIBuAPQdRPEGQC92WZ6TDGHbEOiPU4Ah0J8Hge4ij8E9rd7TfkOgGwK9wOrgjsRUnDAAumb0saB8qdDN8Br+3PDnbflz1sB2ORJQGo41Z+o3/Lnhz3c/CXsIY7jTsjUnXjQAugHQ2wHoAmGRyyelF9VwWF/IyWlOHO0RQHdY414NDEBf31itbqueO4HubG1vTohAF4hAbQmx25Mx1b6d2V12I9C3hx++m+Z7gqMm0J3ybLVrAv1DOJfJrTpIXMgvOll0gVguE53mNLVONr7utgCUx9dDQ9Gd5qKJ5kDu1ts/FJTuwqisy5MtIxnH+bWoNPL+WX3fuhqtvqbX8J1cPE41U6qu3dvyD2hOe3vje7ViXDrVPkbcizCxdlTkRyAXHvhqLlHhZov88C42tz1EcPx0VkdZhMU2s4tyO+0tpXV5lqOI70sL/ux0l+lC2qh9YsJqq++tpDm0YZ+svQ17++eWK2JKdQlNzq2VyQOijLe/TzayhNJA38gS2hv7acsSBOIMwsN2IZPcBREtav0AsgTVDTYIWYLqCUxrJgqHu50sQSAP1qfCtuj4jCcjS6C2lNhj0ibSHrOpnE48kZEl/Cmds7KyhEm4uA6iuTUPp/7MWs1p8eYL/mJqRXIefpaxdR2Fc2sWxIlWvQIv1StQrrYouvUKq1brLEusXFibXkG1CK9PbG0J8wUSDjjBLdRCtNQrqGZxqz3o4fUKqs8whXux5KyNXkEgkReyHU670XgxwjbCDEi3qqoHtNQrpM2X5+MfyATcW6+gHhOqjai+GN3oFYxewegV9OoVlMt6sIaMq/dS08gVjFyh0tsGIFfAGNkMxkOa3cDIFYxcIW91uXjZ1quSMXqF7qZzInoFjBF2oU6/7gTI6BX28KafuV7BaWS7gue0NkauMBi23MgVms3BqjYOhlygSZdv1AqbpzyAWgETJASDV056QRLeO10+H2S6fH5c6fJTuyoeitOVIvCBJsNfXy52liJgimxYAauu3Hlrv+2dC59X5cLnzTnc1VXrkSoRvPJc+JkpPovGZtIDTwN/Ft5kU29vXUu/aJB2G1OEYZkezYCsl2Gn3E6Wsj1IcATLESYtqYPXg5x7ld2yZG+/oMx3Hkqn6d2guTuaUr3WVGfPt9GSnfz9avTNfephD1ej7PLdOjf3uieNPAwmttdcl8TLIOiMdPKwZ+tEx2uxu5sM2nk8rQmiCnwGVdaPWL/et60WMSzgLaVmH8uoqr1OCfC3BwqOYnNxc1/za/6zegtEbL/WLa89QJS2q/WvXN1cIXfSHtMRGNNh3WXuvMy9Eaed/KFKiew139Qf44K0byHWLi2+5KBD2PNXr6w3cSyjxBp/te4Wwb/fyXXxDAXM3tz5kb9IpJxai9AKk1sZbXDZ+NZXtFFyG8RbL6Dao3Z4EEYRpTB1u+7qcp7Xe5+011cB7aD5/f9hDrzKfe4UD8La+/H2icvDy666EEwR88BVBmG6dCFp66SVtnEXgHTaDW8IupCinhDCi4a7lS4EU+TaED7ZT3L5IetCpD8e+0wS3ybymk+nnPJxpS7k7UqluYqlrYl6BfFaJPIlSG7Du2R1ghksbrQKQkTm2A0IQpizC0EIc+oEIZgiTrBOQUjaYk4QoquAhWqdltdV6yoISZs9MkFI2mcIQJaoz5oLQlSrDBZq8PaiPespCKFIQMvQWMCipvmBzLz9BSHqMftnwzOCECMIKXqWnlG2EYSUuGweSfb0Hi4ZRYhRhFS62xAUIQ6yYX4CzWVcjCDECEIKjA6eQ1LNuLMRhHQ2nVMRhDgIewBZ8HSbmRGEGEFIW0GI28B2XWTDNMye3jSjRhBiBCG7n4NdhO1cQju9WRyNIMQIQtrdg6uqfQ68a9J7DS6cvoIQ0Zyl2qMgRMCouLxXQxCEZNr+U2gpwGLF2Vtba0zxWB3VRXmrYz6xFXOekGLERZ4LLpE1p3nBIhPxd1OMbI8+fDXNI/KjVowIfZzNEMm4LQLuAHoYN3/zplkPI3pzXvs39WdldcNntYSoWYZaM/crSuXFuSX/8CfJpaUWo6buAtYNR/NlkJ3ZpXidCixsD9f2WBK7edGNYyXv1y+3rrX01Vc35s7TKCXrUAdYL3fpW8Q+bSlUI/L8QLoFFwlPtEI7W88lGSiuk2rBTBd7my6MJx6LBoTY+jSUwznbOEDhHjUDip2WqyI26Xm8Ztwy55Ynav+DPoojdrnuuLSQUJP7Q45sm0CplykkZAoJaXYFU0go63K50qDcKcLpu6D6Ba0foJBQ2o1hCMYKeoJdVjTc7QRjHNmQGhI15MXp68WY9KWL+RRPHV/awqOSX+f1YvH6XDYrHFvIP5LNv4NFWjFIbbhjy79LwovNT+jUjBE7c0UDNGMOZzvQjKWt1lkVFlqLCKUtAjsluLCcSzfvIjnZZJU0qLl3kVxc0nUC2eOkRzDVrhpTrcK0lEehGuOI2aDjOssIqeZhhbjBzb/9VWPqMcExIWt/59BWNUaMaqw8/DeqsU5h/bNRjXHkwISkHtF8tm9EY0Y0VuVtQxCNeYiyXE4Noxrb1UsyqrGN1TkwCrc1ayKMaqyz6ZyKasxDzAVm5rmaq1UZ1ZhRjbVVjXkNbFcgSnJ1Lo1qbDAaH6MaazYHC8TgRsuoxgotyqjG9kW1EFX3G+569JYRSs/v+2EtuDnDoUk1RqoVYwTTxj0aGlWywUnSu6rnqxcjeEuKeDp6MeXSHMhkHL07SoIzQtBOejEw+vDVNNdjHrNejFQczZ8KsNyxssBBalUQGxECbq+o7sUwcxjTqVbFAZzD2Om+Z5FdLXm8dMnLRJvf+5/lL+9/rN/RKH+BKw12dDtM5tCcdCmgBJ4aDkkn8WRZzLUeurOnRhbyS4FB0Pl7efPuj+XTR9ndUjYQxblAdKBhWjtDLBdJlgLCvJFBMpi92QDCBhA2gHB2QSscpq6AsHI5BhBeSmuyvDemsgpb3z8gnHZDDAEQVj1xwJJLs3m5OwLCxEauC7k9PLy85nsmhMfEtn3OhO8y7qgP5NjNEMKbSUgxwL+8/zE9HI6tSRhFKpZa88HhIg2K0w+1EsEkswkHRDCleAdEcNpqnRlxz9FJBKctgtufVCqshQhWrQtA7mqoIpE2C65ba26sDs4DExt5dq7eQ7H0oDkPnLYKIzKv6xS+Rx6Y2Eh4zs544LR5qKsZ3GzbmwdWjynA66ftVbOmioThgXcQyxseuMhlMbJhli2hmbcwPLDhgSu9bQA8MCHIxiDw1EzFGxzY4MB5o4M187CtmdM0OHBn0zkRHJgQhCFSKVy9yaINDmxw4NY4sGhguxTZcEvpaTZdgwMbHHjnczBFmIMTd870Cs4MDnySOHA2zecjXHhLAKSowM9L68XmXsJK0uPJ5jAURSKX+UfzMQDNpg+2u7AdpCp9MG2eD7QDpHtLarkl+DqevlRCIRW+rMxXm+TIPjwK0v1PK4iEbjlMM4ikWYCRq3zcQQhsIJJHZzMQSW9jP3GIhCIBaxdtZQ3qd5VX0PoBssyl3eCDgEgKeoJ58b13K4iE5ev7Ybvm0PT0IRLheByPHSlc25lMphwLn2Qgkh8Wn/1ZsEkv9wSTXPuzWWyN/ckntVm+DqIYppzTSpPQcprEUa6oP7/cysGr7QlTppUmUS3ChJOkEHLo4lcMYWaXYh+daZLqZodJk6g+57Cdwhm9DU2iWvVgq3vJY9mTJmGIOnx3NIlqHqYNHdy0258mYYi64OivQ0UbQ5MYmmQHQb2hSYpdluWyjJK65KgGJzE4SZ33HRtO4iCXwAzcBifZ1TsyOMnG6Cg0Or1WZ2iS7pZzKjSJgziFiY2E3tpIhiYxNElLmkRs/jSwYBc5uSsfr71w2EAlBio57FTsIo6BUJVzvVOxgUqeD1SiI8McR0zAk2DNebWzJtktwxyt4khyplJuKIdK9nak+Ecr3oO15z2o3WDOVAUQhOE9Cj4xvIfhPRofELfhPThyYJ4eYtdcwza/bCtovettWJ8rUJ7fVByI9yjoCRYaeA+O3FxRK7KXq+kh8x7EHduES+nIMbaFP8ZE4gzv8ZP8suE44tvwS2zdRP7y1pqHU2n98oP1JUhurbkfLKyF+p+JH+nNGsLK6whiJfPVznnglXi42o7WB0jaOA/VYjP8oJs/cQhkVKENzd2Jwwo0h2MbGk9yHOYjwqIKbWjEeahWc1mp95KNqCfnwZFgdHech2oeZmka3HTbn/NQjwkxn/YiWMN5GM5jB8G84TxKXBaq2YQwVQQfZwCDeTwPzMNDgsPIRTPtZDgPw3nkrc7LpQ3RLIo3oEdn0zkV0EMgG+bi9LCpInj4N/2sQQ9KcSPbFTARqae5zqohPAzhsYc5WAhw4Map3jnYEB7Ph/BQx46vV2dD6RXEpfWTunZI7yTq4Q5qI57LV6cZa3dIBu7oVADG2RoiQBU4zWsLdoA7Koc3YzKnxHW0gjqcnRZSRKsg4UJdpV2oq7R2Y/6ylSvlf1kj/6m4L9DiPpnqm06ngmPPz0MGbpV7cOd2Psz2OloXF+p6fK+evP6Vzfy5Xb2a1v7MMv7MO/nzERn3UdjW3pbXdl65ddzWDJdssJFOTRziku0vegwu+WjHBpfsbeynjUsql3MhZ8cLIakOzEph6/vHJdNuuEPAJYt6gt3CklOtcElqIw9yqeLZ05LXTPhcUGE7dGIzMSbEnmRpydBaRuHnQLmy9bf/83/XtGTKRq7wyVgmSbC4ia23H99oJSWdzHkuICWJsHdASqat1pmQWOWv0kVKpi3CXHBZ1K6vK+V4OF7oSK1IyaJmh54RS/U5R0ryvvXV0lYhb8CPoL4axQjDfBhVg9GSlEybLy/fNpCptjQkn83mrx6nvVfhUi78oNmY5hYYXZF5mmetV2RObL6LyHy32OTP67fwYxAn72W8DBfZDjWkJ4ldfrE3rOh/2/C+ud/8ffhbAGLn75wGvgWo8vnJzL+bNllWMMKMGJ83Pm98/th9/kbOg0XDdd5xjM8bnzc+fww+300FpbzchRrG9jmJjArKqKB24LhGBVXisgKcSwnH1E5+nAGMCupZqKAoQTh31qk555NRQRkVVN7q3FwWR815SI0KqrPpnIgKihJEHXDi5lHNyUKNCsqooNqqoEgD26UI5xR8euNTo4IyKqjdz8EUkVzxZKpXeGJUUCevgrqRybdf34czefZifJck4eLFuXVvLfy5vLRe/ENofQytD2u6qEnJZMqQjYFVEr3xJ3Ez+x7eqWSyu7U4g8NVt/m2pA63fhrcjK2shzn3QuFZVfoSnj4rKZcMXlHmS6dZKLnVObm7Nfs047+bhBAM2ZC96pADwPDfj441rJshw3/nnvTg/DdDtgOBZK8wf2sXEk+1DgnQA/DfqhveIPjvgp5gXlzItRX/zRAmBJ6KDi9/454BcNtngk5tyaeTazqRY+xPs+lyP6zy4FuTcDbzl7G0ViGEdRtMZWyl34otfzFd0+DBIkgCfxZrJcF5aW1kZjtYPwm+arXOmAjTmjM3bRHWRsa6aiOr1nOnZhpIcNVsOWA+TBKcIQLL2GJRVSi6EQmuWoWzS10GxkGQ4AyxHdZGTps//drI6jHh63dMzlxDixhaZLC0CEMOhoG3XacINLiIwUXqvO/YcBEHufDcVG9qPkOLGFqkwOhg6jLP1EY2sIjei0oHcQz3p6Y28gDe9DOHRWgD23WRg2HKXL0lHQwsYmCR3c/BLnJgBVru6DVkA4ucPCyisygy5YjCY2uiuUwIz8yt3Yoi8+a7jurt/XnBuyTz38GitLlwRsG0wkYJh45S3itTjbnVn1Z4ibc1VWw50NtZMPn05C+rC7tf/SjwL2b+WM5eX43ebm7zNpUwWzoPhP80xyXEwz1jajA+cPDKaZDGs+xEjXKerWo8zgeJhYlHSs1Gw7yLcilc159erP+5vh5+8RJdB1GcnDUxNubCfPuabS2T0ZV3mqi98oyu8KJhPR4lR6I7mymhFbTO6rpptmHnal5/tmdFLa6NY0i5X/tO1/AkaU8jnjp3v/FehMV3XA3yOy/CxNrhbLJ6uHZzibfbc+4MqcI7ZYc+Vdc8eQ844EzUdi5y+4SO7/5YKtyrW+DIOPA/5mnOz+71PY0FwwPHTsNpaaPIsXSYDxQ3thYmDMZ7u9chOMwaJXIYmW7pflbDQju5yHC94GQs9WDrSbt5oYPKpcndh6pn7UAY1qhcjMpFs0sYlUvW5QSsnZOtLNKPMlatw0ugA6hcPGTbbBAqF9UTmCHb1lDlwEM4V4uaDC/39p5VLnwyGdNr4uEJx7475uL6WmZULv8UjoOZvLRu/fn4LrqRkaWSfsfWNPK/yOjcGvuTT9MoXFpp1GJN1BuJrSDRKnMRpTIXSri3i4IH3Ku3JrpiELTJXFSLIMAlpNDuu3kVJeXHxZ1lLqpZgGIMvuCB6rMH7ziLJ5gWMhfVqoCtdp1C9ylz8ZADO65T5uIhh8KUa4ObdDND+EEm1udAflmGUWLFwV+bvHmHgqVTc9olIvoSm0RsnzKqRSG7d+s6z9dmTMgEzQDLP7u3ym/jN1ZWgdqCDZfQwArGMvnn9av/EPxV3ZJ/CaZlDP/mr86cCrtuGG5lcHNbe9nuMZYNY/d5jiV46X61o/DLQ44LJ0Rt2cCN8MsIv4zwS7fwy0OuDcFaT/NNoNF9Gd1XlbcNQfclEBM7ZmuM7svovvJGB/MBaGZvjfCru+mcivBLIBeDsNzTbWZG+GWEX22FX6zedpmNGIPrsuYE10b4ZYRfu56DmY0cDG4UOdabX8MIv05U+PUmNQw51az8YhgRCvkqvVv/9Ba3l/KL2tAcyo1hf8ovajdXzRxO+bWxm9OVflG7XMPTgN/981IuutC7ynNypc61uw7tGVKDwYEjVy7U0cstlgzyQcJgareWFPTw23l6w3axulBr6LXf+5+V30bB+G570YrCrdWqbl57MQ38WXhTGtNkFpitX1mxxuQep4mfUA6id83Bu51RrLldAN7hOsKzNtY9LzvtJhGn6aJTNcYXmwv25q4EGLkOSTWrfSlzVuh2W3GcqhVHwwlPSzveGuOsdZU78d4Dnnam1/yg6hBTQrk6bO/r2kpvudO1jUGISnMyLTtzqOp2UVAep8sZIz/8eth+YvJK18RS8UuT81+MGIWJaYkRvxjxi2ZnMOKXrMsxsLBhR5f4pbD1/YtfVDfgCc5hxC9FPcGsuB5FG/GLalfAdu2aM6rTF7+MpXt9La/Z1OM+nV5zj7jTAvHLu3jiL6X1SX7dgM/JrVyj0TqFLlQtZiVCF052UM9l1Wqd5bgrYZguoUvaIqznQkn1lNLGg1yYHFQU+k8roUvaLGkV4B9c6KL6DMU5BFdpO5oIXdJWoU6pLgobgtCFYeRRKCzUJ3RJm4fF0AY3wfYRuqgnhPgF0XzPgXvfc+DtcKxM6FI1pw9G1EKxhuPo5ytqoZiV7kO7iVqUC0BRC9OXfsGIWoyoxYha9IpaGEYCRm54a09lVC1G1fIMVC2MIhuWd9SdndioWoyqJW908Mhec942o2rpbjonomphFGEOVS1Yc9Uso2oxqpa2qhange0yZEPVNa7LHGNkLUbWMrhJmCFsw5pyjl5DNrIWI2tpBecz5DkwOZPmuRVntj3dZC25s5hyY9ijrAW3ThhsZC0N/7Q7xS5PJbxLWQtDngeuy7CrGdgndu/rnq3BASNHmsvFTkjWQvYpRxuYUuAAshYH2Q5McKh5hSFZ4WQnXctgPeFZW+uQdS2kXEz5cyTj2Loare7QG2wMHGTD2g1cs1yFZMAB0s1FqgSSRMNF/Cf5dRz60bTww6Ua06x1rQZ3B9bSzgqGrTp7ThITB2EIv2uWmJCsfLKTxGR4bmIs+PDrTvtZp1xTWaofaXLS6iDMIHnaPlQz+pFHDzL6kd7GfuL6EQdhF1KxXJt+RLUOb5cPoB9R3RCD0I8U9AS7hcPdTj/iIJKDqMheoO8D6kd+e/hPUEsDBBQAAAgIAPugdlzR9POs0g8AAMvOAAAZAAAAOWVmNjM3ODhhMjYzMDRmNDFmYzkuanNvbu1d63LbuBV+FQ4nM5ZTmyYAXrWbdhzH6bpxE0/stNNG2wQWIYs1LyoJOXG1mulD9An7JB1QkkVCpERSkGw59C+ZFI+Ag/PhcvB94EjuuR45c+S2bJOegUzLwtBAqtbTQK9rywfJ/ffYJ3JbHrpHMaHUDW5iJR6QrkJj+UCmJKax3P48Sj4VmjqEwAEEGsixr4lFzB7WNMIed6nHjF9OLUv/+89/Jew40ocBCY7PpFtyL8X98Fss+Ti+JY7k4ZhKmoR7lERSjO+YkUEU/pN06UM5D7v9KPTZHS/sYuqGgdweJVUprIbnBkRum8aB3A29oR/IbX18IDvDaPo4RFA9kHEQhDS5wqr864FM8c30Uzik3TD5ffJ9QLqUOKxgmPYntyMSD72po3irMcURvXKTh6EKjUMVHUJ4BbQ2MtuariAd/l1mJmh0L7eTB8hg6vOp+16TXhgR6ZcwvGW1WW1RYxZTBYF2ntnrxOyx50n9MLwtZVjnDKeK++uBjCnF3b5PAjq9ULGBIJg3kDFmn4cBldvgQI5v3cGAOHK7h72YHMhxwP6ncluWOkNVBdefbdWXJKhKv03/R7bfCbI3QfqmxAJ69i/ylfmdB7e0WvvS/Buvfp96eMTZlqSM7dlH4E8/gcl3/jH9F0I/VczJJ3WhvDBjU3qwavjdMJgX3valLu72SbqsOWVB/p8uP7xf+Nls3Qc4ikmrF+fejAh23roeubwPuq35N64+vDt9/+Xk+OSX0zzrBzllgf7ekPYOrb35vf19eXwwj8237nc6jIjUkbthQMl32pHLBKgFsgGaG/cnEcGUSFPDdcxay8O+KG7Hlb6c640BviHlXGGr2TIDa5kzmN1SViFv1Xw0X0TkX0MG4jLu0E07W3BtiTOmhitEiG5x3obb8EpdF745PT+9OpU68hEeuEee5x8NovDOdUgUH4UDEmC3nE8trRBtJUeDPvEG7FfxwM0MBKo1HwmQXmMogKqZ6T335x1SO7dzvIhC341JXg/28/ziSIoppsM431ow9K9JNL/3U+redejclyhD0grnbkw/kngQBukCSeP5N5eMRVC1So8bEYlXjBqGj79hN/vMBHV5I8T8KYd4hKYK35p3/V9fjF4fX56OucB7MZp9Hn9dNY7UHH6X/lUZm6Fqcz6WpD7BrB75bTxKufl4SPth5P47wUJeTfOCA/pfXxMckUh6MaLhLQnSTkpHRspNmQH1Pb5zb1jnRkMGfC+8cYNyKLcNDuVsHi1y1pfCOtBqTfvM3OY3fBzfB93cO71h0M36X3IDtsxgrXMcOH8MZ2uWVjLkrkJu6ju2v78QoLAYkzy+sj+XAtdNSMMsjD6dffn08Xw8acxUPOyvB49qs1QeCTVqRu6wN8SUtDIRezq9ujJGDUU30boj0dIItdeO0Edtf6FttMXYQupCL9saSUn3lz8uRKQXkbh/xb4hjYtXb8t6xn7ol5lhG4pucUFniV0No7X7RWQuWQ6jjYYk8+Ij9UhIQLSz770No08fzx+qp/tHnU5Sr1an84cuDu5wfOa86nSc3+3/4WjljEWirk/CYWrelDeS6D7Q55e/qKoqjbML479il0q9MJK8EDvJbJQthdg/pYLWMLgUjuCYXbunfNSwfHahs0XYaXxnXey7SQ61VejCJOjCKNWEe58dTPEhy9m5zquO7JD4loaDw9h1yDWOOvKvmVRSrlUaviZ/cWP32iMtYXA8TaoideSU9Y4szWpQotz7pVBr8BldXShuNTWVea2z3n720PlhwnsDS2txC29JyyTxy0DxhtDX9x9Dj7T2roeUhsHegTSSAuyTtrT3ZxzgGyLNEi/xHsP3ajxaNjf1AyoQi0c0xyM06+BRK7974CdOeE2D9Hy51Dj74NpUKE+dvBqarAmWxyf0Fxso9bVFjKKqGH2oukhMqZvEVDW0aKUd8uCJXEd0Pbd728oOfSfs2kbgZdsL+4xiU06alpqm2rXgtSOhJjoCBERytQjWNzKtgP7Xly8f4mN1vnmNBhG3ejMVqHI7LoJHHX3d1duGw233o2GbCzIjY3tccbLE9jPc4CbdnR93k4CQZqnxUt05i1ozG7UrtoyrRm0q52CiWlFridg/mAbWzDnnIXaII2T3QCu/tlq19sidss2aWtCcbSFMMnO2nZlpbXAVo6tLoPnW9TypI8e3yXrwltwDiLR0TsFx7/b2lZ7rURK1RlIfx1fkO21LexNWHUNl5m57/qgbDIb088DDXdIPPYdEr5IfUhQlSUWwJxkFr7WvcI/Q+wF5xegncfwtjJxyiQtTgcDKQl8XO5GzUuskzaqDfasKyypyipZI0xnuCY54yBfwn6ZtlYI9FyNW+RkmK1guqnIyDYXNmS5Jnq2e63lpQ9n4XFIR4RisBDWr/Iyk0I2bXufq/tElviPSO3L/26eBwyaF78h9KrvFOrYls6ScZdl2O4tli8DcqpWcOJhc72GJ3de1UstAo1aW5dmA9EeAySPMDap1VXrV3OYjoJzZbe29fPnyZRJRZWCMDI57CZDgWUCK2K/VWrdmXc+3i1F1+r0cIokLUxB5cGYKnrs7S64W8mZhyAshqZqKrvJbZ9V3vBuWasNSbViqXE03wlI9ToRf5YROpqJDk1cj6Hm0/jqSAWbdEsPpX0fIYSo64oUcIotRXl3DSsLJYICJclUUXhiXl9eYisF30fZW9DVVv0yiKIym35v0r3I7mZwnYsAF8SBnm1kIb+U2jYaTpliqpwTIgIQg1XJ60Ol1TUPrWUV6SuIP6H1KSpmU80ByQhJLQUiFyyjtlEqPk1GqTA0kXEapTjRGy4PIBGJllMwit8mvQbC8d6kCJhOqhZqy2lI1ZpbD6IqZ9uNL1ViZeW2WmtuNV5GqmYrJ95uaqj25bmV9gYalAMRnSYxGoFF1i6URaGxQoGErKj/Er4BiI9Co30aNQGMWdIBXg4vtFxuBRs2oeW5UYXEUH1sBqtUINArD8tmFTiPQmF/eWYGGrQDALTb0FSmMRp/R6DMafcZm9Bm2AhZ2HAXzxxt5RiPPEACWXZRn2AqwuG0XKPhEkEae0cgzdk+eYSuawcsCG3nGbkXDjyfPYFHLiYo0wWHb6DMWRptGn7G7+oxnQ7C2F8lx9gqOS1WqQIqYWY9gbRcPKY8rz7DLk0IbwvSGYGoXs0eXDaATCvNpwKhmOJCOLyYHkU/OfWZ0GTe4UUql/XTbrsS2qAofa234LNtgsstn8ksNWzyveZWHU+ASOOg8gYxZ1TDOTh+4NUkVSqStGOrC0Qm5xz5XpunYizS9FTtTmyIi5pQEqjCXMFSJiGgrxsKZ2eCHZyJqaldDuGd2MbI1YGjA1npFTMSI+OEdeRhtE8xPrj284MFx44GH70XyEZOzd4re66CiTbzXQUWrg8kCmlBCIrPIYxvkhn09UFk8c1DE2fnMLHdi/OOdF1+6p7MWKNf22oREZpWnT9vo0XxRmgivq4oK+bgTd3Z+Yt4QQ3DfigsvPl2tp0lKasxNG5FYkgdgw+FDprDOxBGoiy9LSU/tanb7K1c1xamd1kgqXrjNgm4Joyw75wJq8f5bFSnRYEgXNUNfji/OeN3QJDq2IBmqMvMEKr9NsnWBENjOOfYMdAY/vgnmaDQ06YYmvQ5NWgeKyotCmnPsN9ZGDU16FnT8bNcUe7ZwQ5OuGTXPjbEnbKtdBwrgU0Bi9ywbmvTTCp2GJj2/vKs06QS1nLgBCD7RqeFJr4LODxPeDU96NR6hzeHREPxaiYYn3fCkBYBlB3nSOlAQ/64lYIil1zQ86YYnvXM8aR0oOr//IXb7o+FJNzxp0TxpFrX8/q1g0UtDk14YbBqa9O7SpHf3yNoE67yAFIp9aQUAKdJSrTNrASheyT8qNRoAUBXnzXm5JTfsASxMGzw1WcLex4QCUnJwNQw+EyE2oQ9AKhWh18MbLN6FAkDAQfBbyENM2yQzklWYuG5oHKoGAa1q5uzRhpz3YUBKDTfmAjUQis0UAJBaE2lqrfDXloV/+RVNrS4/8eTOd/fV4pxb99RWBehAsXROmAytXEJyHX4os64V8kO3xdpNivEk9AlJSfgDEox8MnUVfYIOFJunsIFV+frnr08A+rV9revQMnvA0RyEr1WtSJ8QEyo5pIeHHp2zVe9cLEXYcUNpMtQKlSaAFPeFkyZA1sULlybAycCxLI6gAhASKU1ILPKKHKQt72DK4wkqQNOESxMSs/puSRNYmRf6WpB7KHUFaUJidUFQtWJf/klIE6CCjOJzZdeWJjDzfEf+5LpbodIEqCCTP/Rc7Em9AKSZVbWkCSCb5lwqTSjV4z8dVQIonyF9xqoEuEiXfeqqhELodT08dMp17Rrgc46CU44QrQs9yLMx+LUSgOXzIEIieOLfJxfB/P7h04/gmroaqGiIfwmPisQmLxphTSOsWUtYgxTN5BW9gkO0UdY0yprFqLO4yfQqwXejrNlO1Dw3jrc4chZSdP6ly42y5jmHTqOsmV/eWWUNUnSL2xrQBTP5G2HNCuT8MNHdCGtWw9FYWBSLxmOjrGmUNQLQsovKGqSYNs9nQIJ1pI2yplHW7JyyRlNUpG1y8dYoaxpljXBlDYtao1HWFMdJo6x5mjOtDa5ihLyA4CTZG63BasYBzWM2c4/R+wF51ZETJkW5NIWmqDzlyhJ88iVKnXypgzp73KhYvbIgq0kcfCJSXDNtsxTYua1lVP7gynnxchGVk2XIb9h0YTY78xOJIYBQ1UzA9iGVEgu8mdCUSsEI8EfmCiZpodTyR6uz/OGcz7dM+UngTC2wPJRzNQMzh6bCd8eHlmrhrxeG/5vT89Or0zW5gpoCEHe0N6i+CO8Tb8B+Fg/czH66mtraRHXyzVDNcj72lzco8i+i0HdjsuBYhPyf5xdH0oTQnm8tGPrXJJrf+yl17zp07kuUIWmGczemH0k8CIN0gdI0niUsQqgWb5DxI1hE4oKhqxiSy3hb86cc4hGaKvwinYuncr0YzT6Pt8DnWg9dUOVn3FtneFUleC0DfWmWopZHQG9A34C+Af2TBH0VmaCmAJM/VNVe8fKg8loNZp3bE6v79ot1FDSaAiz1ScgEWUl4OZ9l5bm7mkxQU6DO221eY6Sa+LpnWrBHTKDZlgNts/A1RszSXC0y2bSS4n74LZbYsi25T5xkoRBT7A+EKgbTG7vmmIvTrE9GMlupy+3EtazBSdyN3MHk2/LV6eXVlw8Xp++Pz768O/2bFISUyWHyi/Sm3elcnp+dXXU6MWHVItEXvdM5ubzodC4mdet0TkLPJaTTYfWPOx32Qo9vkXvTpw+Xhi57vrBqqSNPrPG4QO04i5MHsaN8lWmPby7tSxHBHnvPiFyohFRX4wSZ+ioZZLX+Ey30n/VhlwuOuW+eWyQUgHvqjvH/AVBLAwQUAAAICAD7oHZcJCpp7yIGAAC3HQAACwAAAHJlcG9ydC5qc29uzZjbbuS4EYZfheB1z4QniWLfDbxzYWQzO1h7ESzSxqBEltxK6wSSba9hGNirPECQJ9wnWejQdnun5SQLYdB3IimR4sdi/VX1SGuM4CACXT9SsHEP1d9bv0Mf6Jo/rWiI4ON1WSNdc60VN0ywhBuzom7vIZZtQ9epyXjyPslWtCgrDHT9j8fh6dLRNYUMeQYZCqmMEak1stB0fPMT9NPSffmXbVtjB7f4PnRo38dAVzRiiONU/dPsVO+cs4xlGThmLAhUuUiK/vMyVv3kFx4hIrHQ3EEgdeugIr/9+h+CdRcfSOfbuoskbNv7QMqmKhsk6H3rV6RpI2kw3rd+RyxUFV3Rzrf/RBuff/ud3fq2RrqiVWsnFuPOZ3fVr0DXqV5R21b7uqHr5OkYpdBpsqLQNG0cenoCNysa4XZ6avfRtsP6+EuHNqLrfwzidhre0XX0e1xRj2FfTQQhRrDbGpuhffN087T6b1iVUxJs5nKunESmuONsFmsP9A6q0h2A2mE4HMahcSRghTYGUsYlSWozR1Iyxs6CZCqVzLnBNEGhtC6UytSbJPN9jG1DykBcGSCv0JH7bVnhSLVsbpcEaOSsKSZGnAVAp9McdC5NogXYlGc2E0cAf8QG6lcAp4tctL4m0HUIPqxIgDsMZN85iOjI+PGCHDkXs5aYKnkWIK3ELHGpAw3S8EImRWLfBJlX0OxGVid85KL45KwdqpSn54GPG52DMAzAYJZzlzP9Jr6PwUKHZIcPfa/FKhA/vLQouYTNklO9ezwDcpIh8kwhE8hy5dDZzByR+w4rfO0CbdsUpa8nvXbD+Cs18Vi3/X0ufFuTqgyLigrXs0ilTs/DKSLkOSgUwAQW2jktdf4m0ovBAg/iYqs24CEeui/jtt3HkfPC+sINn2WpkvNgqRAw5dpxlwAyk0nUxdcsxwAG3THUBn+Jh3bZDIZIbjEGAvvYvjt8sSRPwWZjR5lodRY8c8EYaGUgVTrpBzBPj3iOvC5dT+ynH78nVQsuENt6j/aZZtuQfv/D4KL8RDLLT0p+FvxMkmmeJ2hSlljrNDdwHPBcNmOs/UeOBVRVIDnYHYktKUof/mibi4KU8yCT7Dx0R6Q5ExoxwZwzAzkXyI9AfsL7A6Axurn10G17p4jkp8vBLZIayoY0fY8Fv6wlqvmbzLPzCHkKZUAbaVgiLVMmF4IdR4yf2j7huysd+kB++9e/J4ADrpFowNgrSiAX1x8WhZfMJ37CnEfix0AZ6RhqZwtpMefgjq3vqnSYgye2rSroAh6keVs6DGPQPWXOU+RdxhKqsChFPXuHFUvOwxlqa3NZiIxbzSHNtSkKPKL4tzYvK1yTLdT53t+iJ22HTSDOwz361eAOnW87YqvS7g5xz7JFCGHmXaHQ2VlgzDEtCiyUyzRIV+hMpO4ExuOUZUQVtzjBXBKZfCNd1uKbWN7NUNzsm480thEquu4Tzec5h9a+eWmzFS0q2D0MT2FXdt3Ue1jxqT+G58KnwSKVOstApJKpQvHCmq8Knwf/+Hbh89RU7wR3HEUqnckxQ12AUscX4+rgefs4FZwjP3TYfLgcjnb0KDWEHTpSQYhEESgi+qFK8ifO+cQ2pvpcOltekuKbu+mTHLlMBaJkmSuEK6xOVZHNcRyrxi8Ip1qxazEMBeOl8c0nT4Jl+izwKWaVhEJbkEbxVHGjijl8Y9b+HDMMIA+Z/GSNrgxdBQ9LQuRsnqJk37w0d9oIk9zkSSIyXXCnnIScqTmKAftUvYB9FV9Q3pVAPLiyncKIRQHybBagEN88hz8JkGnIe1UrUHNlMieMnjXDfqYXclPYNV7owRn240ONuMYQoe4WZamOCp36Fcuv3OEjjQ9dP2EvNnRFHQbry258m15/vLr+8sPnj58+XH7568efR/+D8fQvfbfebK6+v7y83mwC9ttC/yXZbC6uPm82n8e9bTYXbVUibjaDAm02/T289+XtNj537cv++9mtHd2z7Olpxg4OyvlsBvT61XkMaZdHqHr3QCcbKaAKf0bRk2NBV/+LnvNjPb95dfL9Okdnf2K5PnJ5WaAXuP9vwRUdFOXArJss4fFpRWuw27LBca+/A1BLAQI/AxQAAAgIAPugdlzC0aMo5SgAAO/OAgAZAAAAAAAAAAAAAAC0gQAAAABhOGUxOGE4ZTIzNDk5MjZjOTNmNy5qc29uUEsBAj8DFAAACAgA+6B2XNH086zSDwAAy84AABkAAAAAAAAAAAAAALSBHCkAADllZjYzNzg4YTI2MzA0ZjQxZmM5Lmpzb25QSwECPwMUAAAICAD7oHZcJCpp7yIGAAC3HQAACwAAAAAAAAAAAAAAtIElOQAAcmVwb3J0Lmpzb25QSwUGAAAAAAMAAwDHAAAAcD8AAAAA</script>
\ No newline at end of file
+<script id="playwrightReportBase64" type="application/zip">data:application/zip;base64,UEsDBBQAAAgIAPN5lFy3E6ryJAwAAPqbAAAZAAAANjBjYmQxNjMyZjY0ZjQ4OTM0ZjAuanNvbu1da2/bOBb9K4S+JAEclaSol4FZoM12sF3MZotpZgfYOrugJNrWRBa9Et00yOS/Lyg7sUzLtl5+JFW/NH5dkZfnklf3HFKP2jCM2KdA62sW9L0AWQYeWmRIHNcgQ6j1ss+v6YRpfW0WvkunSRgLcjmM+H2qp1Pm6yLVeppgqUi1/tfH7K+N9i49TAPsDC3LRIYduMzzh1T+PBRRdoWUJcCnMeBTFoN7ntylU+ozQOMA+AmjggEKYnYvv/ONygtPE/4H88VLCy/9ccInTOtpEfepCHms9R+zTmzvQBTGTOu7Pc3n0WwSa337qacFs2RhgkDT7Gk0jrnI3pF9ve1pgo4Wf/GZ8HnWBvZ9ynzBAtk4KsZa/6v2JbsoIOC3T+APPkti9pBqtz0tYeksWvhNvVYqaCJuwswkhti6hOQSwxvo9onZx1DHhvtvTZoQyYPWh/IHbLoYgoU3P7AhTxj4G+d3sos7LRJDWlw2BCFkF9n1MrsfqT8GY87vSpkmiml3afi2p1EhqD+esFgs3qgzeOZy8Jwn+fcsFlof9bT0LpxOWaD1hzRKWU9LY/laaH0NDGYQIu+rCycAEPDn4qXhToDE8fNLY6IvPwlY6iehx86f38KTs6IBPlv+ZGmnl7vC+QVYfvDTX3KfPA7ilZaZKy0Dm9u2HJmX1lkTmj7Efv66jyBM/8G9MGLgqXQbwEobnv9Ez31D2VcAAP9ZvIHxZM0BcKIYtZSObemaHMTz53YXOzQ3IIvuzQEDJF6Az7+xhI4YCFPgz5KExSJ6AFE4CQUL9NxoXWhPvSXYfw6/i1nCwEDzEn6fsmSglQG8Za0C3sZuUSj9QmexPwYL02UM21g1bGwPpU1x8FTpy4Ue8Xks2HdRyiOu66w2HOMih1zNZ/mF5Z12kQ4hUqYW52j+mNIRK+EMpEOsNNowCuGx8Ia0W8qqoVq1D+GLuo67pt/Ckeyf4GCgvYv4KIxLuc+wTGXMTaP6gjJm0ZQl6btZeElnYpxfSqzlUoJInbVEnbGXs7HP4+UM506AvHR+Ds59lDAavJ+J8RX1x+z8YsfcmZvw72mYv0QGy6I5dcQFzy9j8yHIT4U1F4EaS4HdvDvsG41mVLDz80cg+B2Li5eJhA0Tlo5v5De2LYAry8DHhe2d6MS6CxV07gjCatC0m0LzGLg5vcE9HLCdtRwnZWka8viL4Mmm3qZMfBJskndy1umdSWX2rdUMRplmS8ywWHeRmrBD3CaKkdkQxogobn1SMIc2T8HVcC4//UzF+HBzIWohROX3fubJL5wGX4QMmxySYibkrXUYRGxj2vs7DQUY8gREnAYglSbAQMv9sgSMDB0iJelDNm51NkRNV+p9w+RIY3k4rK5O7U+ri2ZWCgEDTfAP7F9hGnoSN2DExIeHG/ZdnJ9d8ShkDLz/dHahD8MkFecXO2FFdJu4SqKL2i8nILyElmnWgRbKu0ZxG15bFTYDY15ROt+Mvxd/5oCx9GweFkU/X/i9+MPcyK1loNVQVfpfJfgZW/yoptoxu7/K6oYfZkLwOJ8blApz6eZfebQSf15mauey/AhiOsmZ7Rc4zpy8u2b3YN7EP7NbvzAeLV6/ywfZRekoy5r73Mjeohl9sO1C0nyJEHTUYuGOMkStECTLEDRqheCPCQ8lRtRUqcRco/jiKHNDpXlAXca39VHpXGHf/Cj0785XA+1KvrfvuHLt1bgi+4irXPaN7Tay7wNAal9D3B5w6+f4x5/PHYKaFi12wy5Xu3BqJevWloxKrTE0zqhOYy4/mbSsvblarYgo+cz7oWBJSdZSAlflFVAhsVC5Sk90x4SrpmHNanpD8qSgJRiiQr4g4ml58oTorqEW0uUN9YkxBrc9jSUJTxbfk7WIWar1tSlN04xmX6PlFdvSAr/T+iKZzcdiq0TBxNiB1GcBcshwODQdAvMSBS+hkrGTioSYSz2Cn10Y0IQB+o2GEfUiBsIYxDxgSwlD61IFDDdpFQzLsg6lVZhfazvMTB1asFWtgrSo0KCYtCJVkJaVG5sddGKnVMi3rFMqnIJSofzSYupQFRTkV4DavLy0qxYIzFPn5U0dOq4qUiicrarw8qYOXXX13iV/epW8vKkbSNVimMaOfKLj5YtuPzpevnVe3tIdlTUgHS9/coPb8fLbMWwqvLzT0fIdLV+Nlrd017DVnG+XirSj5dsYy5Om5bMh5sn52dfsiz8NtPdBAP43Y6kc+KyeMdBuKxD1jm6qN9P70P1L6L5UQlANsGG8uayMtzGIVcvKzx7OAWW7r/PQKTJYmrp/BCKcMD7L3bEW16WRCSHMI+dI1eUqYMc12Kh6YzQT/HLEYpbIeVeW/1odpFK0fkGUFraqUpiqZP4eOEec4/JtXCdKu0h8m6g/En1VaYZR05EGlJUMN0stkxTu/qhcwCowfSTKSrZEzTHN4lJaJcrK0S2V73NOr5Z2YMaKEuZZkFgGMQmjPqKBH+QYK/Z9yhMB+HROVIWxH80CBj7/9eeMxVr4vWV2yt7ITtnEORg7lV1rF6JsYrbKTjnr+lRsFJqtyk45uq0SwdVrWB079TKLd+xUoUNzA3JcdkrifW0fSgvslLRrVmJ5j09OObptEZVGMrc4oxQ5Ja1aqtWDbCg+MDnl6K6zRk6Z1bcNdORUR061Tk4ZUDeNxrfgHTm178HtyKkdGFYPvWiV/O/IqbdPThlQt5DKGVio1XW6I6feBDl1LfW1q7WNSnVvA+sYq/Ln6hPWzttpuTf1ZRObUQNuBqywiW3ukJskHI1YUnUL27Yq8AZ35/FTZHIxGKsAMFD10vVKx14V4VUlNIyK+4KXLin0yOZdbPuJJ6JoSZ0d5eda8ZTbl43rbAp9TejbDx7aQnglZK/Qd003vJ19nAOVprKOfVZij5uBdUM9HwvtA56koRph1VGKE9vk/Pa9yQ1PlFFawfnJEoOVQF1lT+pJjYc8LqLygLQYtdn1S4atWhrZR5JmNlQn/MiR+YNFwSvQKxjqHWR9vUIWgK56m9SKXqHI9HH0CsWdJIXsShW9goF1oh71uUux/fb1CtjzKWOuZ1pBgL3Ahb7h5/QK02D4fB/CYpE8AMFHo4il8x21KYtYtuU2G4OER+2fAm44G8ULplSbHEi8YM6VLdvhZUKnTfGCtIjU3WpGIc1YUbxQZHnHjsBOvJBvWSdeeFXihQzvqs6vBfFCkd2DKOAaiBdkm/GazKDpideZVVu1ehAhx2HFCwbWbaKqKQ2r21m78SajEy8cULxAdKSeFtyJF05vcDvxwg4MK7pyu9Xt4Z14YRsh/EbEC0RHrqpXtWAnXjjAWP5o4gVTt101o97Drj2CG4oXyDay9VWKF0iNo7t/DPECqbhD85TEC6buYLU6tQd2mBgNxQuvCX37wcMxxAukCrt3GtTWGq1XMcZaVl+YumMr8WXv4WRFklNfWLXWqwNg9q2j6bAEaaU4Xkl+Kz6r5EvGPGUsVKWFxW1+7thu3OduC8w6J7qvekbx2nqFfueaU+1hJXnXlkzKToior4RAtTDUgJk3dddcO2Sz8BjcygV7aZqcBDNf0BKU37dXl5m31h9O5Zze0zIPzMz7LrQDCxLku0ODuMxAQ6vdx3NPMk6u7cdzG6ojHjXxMJU2pT/lIGd87XT+ba0yMVjc3qv+YHD98ff/fv71n3//eHXzZTD47frTYDB/8tJgkD0TfTCYRvThPglHY/Hy1iwcDLb3NF/lgU9PGzQGz2CpLTHYFSSODuczTGv6Auf5MPDiJwfVlxcUGd7DU8EUfUEWnDJ7kP/3wQ1LhUTQYmD6oA7SOs3Cc2rRaRaqahaKYH5IjNZNZRwd2urJpvUX48IlczlZvvWlYkMKsBygrTmAR33XtKA7tOjQNWzT94xgP8+/aJQLbH7+BXr7I7yPZACViFEHt50MOGSjJLBRLqDa3f85SV0q0KUCXSrQSiqgPoWjSwWOkwq4hFLf84fIQ4aFPNc1Ldz8YMFmy/7GgwXh2x/NfSz7sEQ8zp9J2uay7zr7WfZVu92y3y373bL/OpZ9BI1K24O6ZX9Py/7Q8qDvUNP0rAB6OHCtFRagjf15jXKAzfvzuhxgXzkAanmfobS4mRZvkgNss9vlAF0O0OUAp5wDqIf/Ndja2OUAm3OA26f/A1BLAwQUAAAICADzeZRcKo1fgxgDAACDDwAACwAAAHJlcG9ydC5qc29u7ZdNb9w2EIb/CjFn2dUn9XF1E8AF6gZNghwioxiRw11muaRAUbYXi/3vhbR2vCm6aYHdBD74RgrDmXkfvOBQW1hTQIkBodkCijCi+eT8ivwATbKLYAjowwe9JmiSsuS8rLKk5DGPQI4eg3YWmjQuyvQyy8oIlDY0QPN5O6+uJTTAY9HJhGep4rnKqzrLVQz7yBuc8sKofxl6r23IL5Rx98Pl0JO4DANEEGgI+3zT6mi+iy5FmVaK8yLJSllTJxROx3Uwc4WBPBNomevJsnvnV0OPghhayYQnDMSQWbqfYu5wKtx794VE+NrhhVh6tyaIwDjxqHsv8vsCjLYETR2BcGZcW2jK3SG6PC6KCNBaF+Yvk9bbCAIuHlduDMLNPdBDTyKQnJrDsITmM7yfi7KcfbxmX9zoLW0GmA6toAl+pAg8DaN5JIghoFiuyc77293tLvovrEWaVjEKkkmVK6WKKo8PsXYerVjOFK2bGIpZA0NPDO9QG+wMMW2ZdZKesZ8dbxof45txzl8wX8yp43HOs7zICUWCUsgDvvTQOx+Y6/dYtRVmlMTe/fp2Zh7oIZyfZXmUZZlXL5hl2gkkqruCS5l2so5FJg5Y9lKxR55kg9+w4BYLQ8PemwMZms3LhLPBO3P+OyCrjoItqvoFgxV1XEoe54moVZbXlCWKn/duXbtugnjmuzX7J9MthE0/5RxWuocIJA3C634fDb/PTbB9MTbVYsLdkccFMT0wMXpPNpgNM3qtA8nLf+/3qmnbmzef/nr35x+/vbn68L5tP95ct+2VM5qobeeB1ra9wc2914tl+Ppp1G37faX8WWkS73ZHLDKJ6/+3QxSa4XSLdCjqgse14qjqrCxEl8kfMydOssrxOZG8euVneaXOEUUnVNIlGU+6ui54evrMO80XR2de/OqLn+ULxbtYVFgUHZdxl8qafzNmzjG/TzLJ8fn9apJzmeR2/uGctlsILqCBpoqeHz1NHsFon7dxBMrgajOvntqZgp7ePnPvBzaY6nzzkHs2xdlLR0DeO/+ErX80x3YXwRrFUlvaq/4bUEsBAj8DFAAACAgA83mUXLcTqvIkDAAA+psAABkAAAAAAAAAAAAAALSBAAAAADYwY2JkMTYzMmY2NGY0ODkzNGYwLmpzb25QSwECPwMUAAAICADzeZRcKo1fgxgDAACDDwAACwAAAAAAAAAAAAAAtIFbDAAAcmVwb3J0Lmpzb25QSwUGAAAAAAIAAgCAAAAAnA8AAAAA</script>
\ No newline at end of file
diff --git a/tests/playwright/playwright.config.ts b/tests/playwright/playwright.config.ts
index 81229d2..a945155 100644
--- a/tests/playwright/playwright.config.ts
+++ b/tests/playwright/playwright.config.ts
@@ -16,6 +16,7 @@ export default defineConfig({
 
   use: {
     baseURL: process.env.BASE_UI_URL ?? 'http://localhost:3000',
+    channel: 'chrome',
     trace: 'on-first-retry',
     screenshot: 'only-on-failure',
     video: 'retain-on-failure',
@@ -32,6 +33,16 @@ export default defineConfig({
       testMatch: 'tests/ui/**/*.spec.ts',
       use: { ...devices['Desktop Chrome'] },
     },
+    {
+      name: 'ui-chrome-slow',
+      testMatch: 'tests/ui/**/*.spec.ts',
+      use: {
+        ...devices['Desktop Chrome'],
+        launchOptions: {
+          slowMo: 500,
+        },
+      },
+    },
     {
       name: 'ui-mobile',
       testMatch: 'tests/ui/**/*.spec.ts',
diff --git a/tests/playwright/tests/api/branching.spec.ts b/tests/playwright/tests/api/branching.spec.ts
new file mode 100644
index 0000000..acbd456
--- /dev/null
+++ b/tests/playwright/tests/api/branching.spec.ts
@@ -0,0 +1,34 @@
+import { expect, test } from '@playwright/test'
+import { createBranch, createChatSession, unauthenticatedPost } from '../helpers/api'
+import { readAuthCache } from '../helpers/auth-cache'
+
+test.describe('Branch API contracts', () => {
+  test('requires auth for branch creation route', async ({ request }) => {
+    const response = await unauthenticatedPost(request, '/chat-sessions/1/nodes/1/branches', {
+      branchFromMessageId: 1,
+      content: 'unauthorized branch attempt',
+    })
+    expect(response.status).toBe(401)
+  })
+
+  test('returns 4xx when branch message does not exist', async ({ request }) => {
+    const auth = readAuthCache()
+    const created = await createChatSession(request, auth.token1, {
+      title: `Branch contract ${Date.now()}`,
+    })
+    expect(created.status).toBe(201)
+
+    const sessionId = created.body!.graph.session.id
+    const rootNodeId = created.body!.graph.rootNodeId
+    const branchResponse = await createBranch(
+      request,
+      auth.token1,
+      sessionId,
+      rootNodeId,
+      999_999_999,
+      'Create branch from non-existing message',
+    )
+
+    expect([400, 404]).toContain(branchResponse.status)
+  })
+})
diff --git a/tests/playwright/tests/api/canvas-crud.spec.ts b/tests/playwright/tests/api/canvas-crud.spec.ts
deleted file mode 100644
index 22c7cb2..0000000
--- a/tests/playwright/tests/api/canvas-crud.spec.ts
+++ /dev/null
@@ -1,196 +0,0 @@
-/**
- * tests/api/canvas-crud.spec.ts
- * API-level tests for Canvas CRUD — no browser needed.
- */
-
-import { test, expect } from '@playwright/test'
-import * as fs from 'fs'
-import * as path from 'path'
-import * as dotenv from 'dotenv'
-import {
-  createCanvas,
-  getCanvases,
-  renameCanvas,
-  deleteCanvas,
-  unauthenticatedGet,
-  unauthenticatedPost,
-} from '../helpers/api'
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env') })
-
-const TOKEN_CACHE = path.resolve(__dirname, '../../.auth-cache.json')
-const BASE_API = process.env.BASE_API_URL ?? 'http://localhost:8080/api'
-
-let token1: string
-let token2: string
-
-test.beforeAll(() => {
-  const cache = JSON.parse(fs.readFileSync(TOKEN_CACHE, 'utf-8'))
-  token1 = cache.token1
-  token2 = cache.token2
-})
-
-// ─── Auth boundary ───────────────────────────────────────────────────────────
-
-test('GET /canvases without token → 401', async ({ request }) => {
-  const status = await unauthenticatedGet(request, '/canvases')
-  expect(status).toBe(401)
-})
-
-test('POST /canvases without token → 401', async ({ request }) => {
-  const status = await unauthenticatedPost(request, '/canvases', { firstPrompt: 'test' })
-  expect(status).toBe(401)
-})
-
-// ─── Create canvas ───────────────────────────────────────────────────────────
-
-test('POST /canvases with valid prompt → 201 with derived title', async ({ request }) => {
-  const { status, body } = await createCanvas(request, token1, 'Plan the Q2 product launch strategy')
-  expect(status).toBe(201)
-  expect(body.id).toBeGreaterThan(0)
-  expect(body.title).toBe('Plan the Q2 product launch strategy')
-  await deleteCanvas(request, token1, body.id)
-})
-
-test('POST /canvases prompt trimmed and whitespace normalized', async ({ request }) => {
-  const { status, body } = await createCanvas(request, token1, '  Hello   world  ')
-  expect(status).toBe(201)
-  expect(body.title).toBe('Hello world')
-  await deleteCanvas(request, token1, body.id)
-})
-
-test('POST /canvases prompt exactly 80 chars → title not truncated', async ({ request }) => {
-  const prompt = 'A'.repeat(80)
-  const { status, body } = await createCanvas(request, token1, prompt)
-  expect(status).toBe(201)
-  expect(body.title).toBe(prompt)
-  await deleteCanvas(request, token1, body.id)
-})
-
-test('POST /canvases prompt over 80 chars → title truncated with ...', async ({ request }) => {
-  const prompt = 'The quick brown fox jumps over the lazy dog and then some more words are added here'
-  const { status, body } = await createCanvas(request, token1, prompt)
-  expect(status).toBe(201)
-  expect(body.title.length).toBeLessThanOrEqual(83)
-  expect(body.title.endsWith('...')).toBeTruthy()
-  await deleteCanvas(request, token1, body.id)
-})
-
-test('POST /canvases whitespace-only prompt → 400', async ({ request }) => {
-  const { status } = await createCanvas(request, token1, '   ')
-  expect(status).toBe(400)
-})
-
-test('POST /canvases empty string prompt → 400', async ({ request }) => {
-  const { status } = await createCanvas(request, token1, '')
-  expect(status).toBe(400)
-})
-
-// ─── List canvases ────────────────────────────────────────────────────────────
-
-test('GET /canvases returns canvases ordered by most recent updatedAt', async ({ request }) => {
-  const { body: c1 } = await createCanvas(request, token1, 'First canvas')
-  await new Promise(r => setTimeout(r, 50))
-  const { body: c2 } = await createCanvas(request, token1, 'Second canvas')
-
-  const canvases = await getCanvases(request, token1)
-  const ids = canvases.map(c => c.id)
-  expect(ids.indexOf(c2.id)).toBeLessThan(ids.indexOf(c1.id))
-
-  await deleteCanvas(request, token1, c1.id)
-  await deleteCanvas(request, token1, c2.id)
-})
-
-test('GET /canvases does not return another users canvases', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'User1 private canvas')
-  const canvasesUser2 = await getCanvases(request, token2)
-  const ids = canvasesUser2.map(c => c.id)
-  expect(ids).not.toContain(canvas.id)
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-// ─── Rename canvas ────────────────────────────────────────────────────────────
-
-test('PATCH /canvases/:id with valid title → 200 updated title', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Original title')
-  const { status, body } = await renameCanvas(request, token1, canvas.id, 'Renamed title')
-  expect(status).toBe(200)
-  expect(body.title).toBe('Renamed title')
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('PATCH /canvases/:id normalizes whitespace in title', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Temp canvas')
-  const { body } = await renameCanvas(request, token1, canvas.id, '  Two   spaces  ')
-  expect(body.title).toBe('Two spaces')
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('PATCH /canvases/:id blank title → 400', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Temp canvas')
-  const { status } = await renameCanvas(request, token1, canvas.id, '   ')
-  expect(status).toBe(400)
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('PATCH /canvases/:id title over 80 chars → 400', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Temp canvas')
-  const { status } = await renameCanvas(request, token1, canvas.id, 'A'.repeat(81))
-  expect(status).toBe(400)
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('PATCH /canvases/:id title exactly 80 chars → 200', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Temp canvas')
-  const { status, body } = await renameCanvas(request, token1, canvas.id, 'A'.repeat(80))
-  expect(status).toBe(200)
-  expect(body.title).toBe('A'.repeat(80))
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('PATCH /canvases/:id on another users canvas → 403', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'User1 canvas')
-  const { status } = await renameCanvas(request, token2, canvas.id, 'Stolen title')
-  expect(status).toBe(403)
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('PATCH /canvases/:id on nonexistent canvas → 404', async ({ request }) => {
-  const { status } = await renameCanvas(request, token1, 999999999, 'Ghost')
-  expect(status).toBe(404)
-})
-
-test('PATCH /canvases/:id without token → 401 [BUG: returns 404]', async ({ request }) => {
-  const res = await request.patch(`${BASE_API}/canvases/1`, { data: { title: 'x' } })
-  // BUG logged: should be 401 (auth before resource lookup), currently returns 404
-  // Tracking as: auth check happens after canvas existence check in RenameCanvas
-  expect([401, 404]).toContain(res.status())
-})
-
-// ─── Delete canvas ────────────────────────────────────────────────────────────
-
-test('DELETE /canvases/:id owned canvas → 204', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'To be deleted')
-  const status = await deleteCanvas(request, token1, canvas.id)
-  expect(status).toBe(204)
-  const remaining = await getCanvases(request, token1)
-  expect(remaining.map(c => c.id)).not.toContain(canvas.id)
-})
-
-test('DELETE /canvases/:id another users canvas → 403', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Protected canvas')
-  const status = await deleteCanvas(request, token2, canvas.id)
-  expect(status).toBe(403)
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('DELETE /canvases/:id nonexistent canvas → 404', async ({ request }) => {
-  const status = await deleteCanvas(request, token1, 999999999)
-  expect(status).toBe(404)
-})
-
-test('DELETE /canvases/:id without token → 401 [BUG: returns 404]', async ({ request }) => {
-  const res = await request.delete(`${BASE_API}/canvases/1`)
-  // BUG logged: should be 401 (auth before resource lookup), currently returns 404
-  expect([401, 404]).toContain(res.status())
-})
diff --git a/tests/playwright/tests/api/canvas-graph.spec.ts b/tests/playwright/tests/api/canvas-graph.spec.ts
deleted file mode 100644
index 01107a3..0000000
--- a/tests/playwright/tests/api/canvas-graph.spec.ts
+++ /dev/null
@@ -1,199 +0,0 @@
-/**
- * tests/api/canvas-graph.spec.ts
- * API-level tests for canvas graph — GetGraph and ExpandNode.
- */
-
-import { test, expect } from '@playwright/test'
-import * as fs from 'fs'
-import * as path from 'path'
-import * as dotenv from 'dotenv'
-import {
-  createCanvas,
-  deleteCanvas,
-  getCanvasGraph,
-  expandCanvasNode,
-  upsertProvider,
-  deleteProvider,
-} from '../helpers/api'
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env') })
-
-const TOKEN_CACHE = path.resolve(__dirname, '../../.auth-cache.json')
-const OPENAI_KEY = process.env.TEST_OPENAI_KEY
-
-let token1: string
-let token2: string
-
-test.beforeAll(() => {
-  const cache = JSON.parse(fs.readFileSync(TOKEN_CACHE, 'utf-8'))
-  token1 = cache.token1
-  token2 = cache.token2
-})
-
-// ─── GetCanvasGraph ───────────────────────────────────────────────────────────
-
-test('GET graph on new canvas → mode=graph, rootNodeId set, one main node', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Graph test canvas')
-  const { status, body } = await getCanvasGraph(request, token1, canvas.id)
-
-  expect(status).toBe(200)
-  expect(body.mode).toBe('graph')
-  expect(body.rootNodeId).not.toBeNull()
-  expect(body.nodes.length).toBeGreaterThanOrEqual(1)
-  expect(body.nodes.some((n: any) => n.kind === 'main' && n.parentNodeId === null)).toBeTruthy()
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('GET graph on another users canvas → 404', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Private graph canvas')
-  const { status } = await getCanvasGraph(request, token2, canvas.id)
-  expect(status).toBe(404)
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('GET graph on nonexistent canvas → 404', async ({ request }) => {
-  const { status } = await getCanvasGraph(request, token1, 999999999)
-  expect(status).toBe(404)
-})
-
-test('GET graph without token → 401', async ({ request }) => {
-  const BASE_API = process.env.BASE_API_URL ?? 'http://localhost:8080/api'
-  const res = await request.get(`${BASE_API}/canvases/1/graph`)
-  expect(res.status()).toBe(401)
-})
-
-// ─── ExpandCanvasNode — error paths ──────────────────────────────────────────
-
-test('POST expand with no providers configured → 400 with code=missing_key', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Expand error test')
-  const { body: graph } = await getCanvasGraph(request, token1, canvas.id)
-  const rootNodeId = graph.rootNodeId!
-
-  await deleteProvider(request, token1, 'openai')
-  await deleteProvider(request, token1, 'claude')
-  await deleteProvider(request, token1, 'gemini')
-
-  const { status, body } = await expandCanvasNode(request, token1, canvas.id, rootNodeId, 'Tell me about AI')
-  expect(status).toBe(400)
-  expect(body.code).toBe('missing_key')
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('POST expand with empty prompt → 400', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Empty prompt test')
-  const { body: graph } = await getCanvasGraph(request, token1, canvas.id)
-  const rootNodeId = graph.rootNodeId!
-
-  const { status } = await expandCanvasNode(request, token1, canvas.id, rootNodeId, '   ')
-  expect(status).toBe(400)
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('POST expand with whitespace-only prompt → 400', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'WS prompt test')
-  const { body: graph } = await getCanvasGraph(request, token1, canvas.id)
-  const rootNodeId = graph.rootNodeId!
-
-  const { status } = await expandCanvasNode(request, token1, canvas.id, rootNodeId, '\n\t  \n')
-  expect(status).toBe(400)
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('POST expand nonexistent node → 404', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Bad node test')
-  if (OPENAI_KEY) await upsertProvider(request, token1, 'openai', OPENAI_KEY)
-
-  const { status } = await expandCanvasNode(request, token1, canvas.id, 999999999, 'Hello')
-// BUG logged: returns 400 instead of 404 when node does not exist
-  expect([400, 404]).toContain(status)
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('POST expand on another users canvas → 404', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Cross-user expand test')
-  const { body: graph } = await getCanvasGraph(request, token1, canvas.id)
-  const rootNodeId = graph.rootNodeId!
-
-  const { status } = await expandCanvasNode(request, token2, canvas.id, rootNodeId, 'Hello')
-  expect(status).toBe(404)
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('POST expand with unsupported providerOverride → 400', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Bad provider test')
-  const { body: graph } = await getCanvasGraph(request, token1, canvas.id)
-  const rootNodeId = graph.rootNodeId!
-
-  if (OPENAI_KEY) await upsertProvider(request, token1, 'openai', OPENAI_KEY)
-
-  const { status } = await expandCanvasNode(request, token1, canvas.id, rootNodeId, 'Hello', 'mistral')
-  expect(status).toBe(400)
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('POST expand with configured providerOverride not in user keys → 400 missing_key', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Override test')
-  const { body: graph } = await getCanvasGraph(request, token1, canvas.id)
-  const rootNodeId = graph.rootNodeId!
-
-  await deleteProvider(request, token1, 'claude')
-  await deleteProvider(request, token1, 'gemini')
-  if (OPENAI_KEY) await upsertProvider(request, token1, 'openai', OPENAI_KEY)
-
-  const { status, body } = await expandCanvasNode(request, token1, canvas.id, rootNodeId, 'Hello', 'gemini')
-  expect(status).toBe(400)
-  expect(body.code).toBe('missing_key')
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('POST expand without token → 401', async ({ request }) => {
-  const BASE_API = process.env.BASE_API_URL ?? 'http://localhost:8080/api'
-  const res = await request.post(`${BASE_API}/canvases/1/nodes/1/expand`, { data: { prompt: 'Hello' } })
-  expect(res.status()).toBe(401)
-})
-
-// ─── ExpandCanvasNode — happy path (requires real LLM key) ───────────────────
-
-test.describe('Expand with real LLM key', () => {
-  test.skip(!OPENAI_KEY, 'TEST_OPENAI_KEY not set — skipping live LLM tests')
-
-  test('POST expand root node → child nodes created with sourcePrompt set', async ({ request }) => {
-    await upsertProvider(request, token1, 'openai', OPENAI_KEY!)
-    const { body: canvas } = await createCanvas(request, token1, 'Live expand test')
-    const { body: graph } = await getCanvasGraph(request, token1, canvas.id)
-    const rootNodeId = graph.rootNodeId!
-
-    const { status, body } = await expandCanvasNode(request, token1, canvas.id, rootNodeId, 'List three benefits of sleep')
-    expect(status).toBe(200)
-    expect(body.mode).toBe('graph')
-    const children = body.nodes.filter((n: any) => n.parentNodeId === rootNodeId)
-    expect(children.length).toBeGreaterThanOrEqual(1)
-    expect(children.every((n: any) => n.sourcePrompt === 'List three benefits of sleep')).toBeTruthy()
-
-    await deleteCanvas(request, token1, canvas.id)
-  })
-
-  test('POST expand child node → grandchildren created at depth 2', async ({ request }) => {
-    await upsertProvider(request, token1, 'openai', OPENAI_KEY!)
-    const { body: canvas } = await createCanvas(request, token1, 'Depth test')
-    const { body: graph1 } = await getCanvasGraph(request, token1, canvas.id)
-    const rootNodeId = graph1.rootNodeId!
-
-    await expandCanvasNode(request, token1, canvas.id, rootNodeId, 'List two programming languages')
-    const { body: graph2 } = await getCanvasGraph(request, token1, canvas.id)
-    const firstChild = graph2.nodes.find((n: any) => n.depth === 1)!
-
-    const { body: graph3 } = await expandCanvasNode(request, token1, canvas.id, firstChild.id, 'Give me one use case') as any
-    const depth2Nodes = graph3.nodes.filter((n: any) => n.depth === 2)
-    expect(depth2Nodes.length).toBeGreaterThanOrEqual(1)
-
-    await deleteCanvas(request, token1, canvas.id)
-  })
-})
diff --git a/tests/playwright/tests/api/chat-sessions.spec.ts b/tests/playwright/tests/api/chat-sessions.spec.ts
new file mode 100644
index 0000000..b9ea680
--- /dev/null
+++ b/tests/playwright/tests/api/chat-sessions.spec.ts
@@ -0,0 +1,66 @@
+import { expect, test } from '@playwright/test'
+import {
+  createChatSession,
+  createNode,
+  getChatNode,
+  getChatSession,
+  getChatSessions,
+  unauthenticatedGet,
+} from '../helpers/api'
+import { readAuthCache } from '../helpers/auth-cache'
+
+test.describe('Chat session API contracts', () => {
+  test('requires auth for session list', async ({ request }) => {
+    const response = await unauthenticatedGet(request, '/chat-sessions')
+    expect(response.status).toBe(401)
+  })
+
+  test('creates a session and fetches graph/node shape', async ({ request }) => {
+    const auth = readAuthCache()
+    const created = await createChatSession(request, auth.token1, {
+      title: `QA session ${Date.now()}`,
+    })
+
+    expect(created.status).toBe(201)
+    expect(created.body?.graph.session.id).toBeGreaterThan(0)
+    expect(created.body?.node.nodeId).toBeGreaterThan(0)
+
+    const sessionId = created.body!.graph.session.id
+    const nodeId = created.body!.node.nodeId
+
+    const listResponse = await getChatSessions(request, auth.token1)
+    expect(listResponse.status).toBe(200)
+    expect(listResponse.body?.some(item => item.id === sessionId)).toBeTruthy()
+
+    const sessionResponse = await getChatSession(request, auth.token1, sessionId)
+    expect(sessionResponse.status).toBe(200)
+    expect(sessionResponse.body?.session.id).toBe(sessionId)
+    expect(sessionResponse.body?.nodes.length).toBeGreaterThan(0)
+
+    const nodeResponse = await getChatNode(request, auth.token1, sessionId, nodeId)
+    expect(nodeResponse.status).toBe(200)
+    expect(nodeResponse.body?.nodeId).toBe(nodeId)
+  })
+
+  test('creates a child question node from root node', async ({ request }) => {
+    const auth = readAuthCache()
+    const created = await createChatSession(request, auth.token1, {
+      title: `QA child-node session ${Date.now()}`,
+    })
+    expect(created.status).toBe(201)
+
+    const sessionId = created.body!.graph.session.id
+    const rootNodeId = created.body!.graph.rootNodeId
+    const nodeCreate = await createNode(request, auth.token1, sessionId, {
+      parentNodeId: rootNodeId,
+      nodeType: 'question',
+      title: 'Follow-up question',
+      content: '',
+    })
+
+    expect(nodeCreate.status).toBe(200)
+    expect(nodeCreate.body?.graph.session.id).toBe(sessionId)
+    expect(nodeCreate.body?.node.nodeId).toBeGreaterThan(0)
+    expect(nodeCreate.body?.node.nodeType).toBe('question')
+  })
+})
diff --git a/tests/playwright/tests/api/llm.spec.ts b/tests/playwright/tests/api/llm.spec.ts
deleted file mode 100644
index 93d91d0..0000000
--- a/tests/playwright/tests/api/llm.spec.ts
+++ /dev/null
@@ -1,258 +0,0 @@
-/**
- * tests/api/llm.spec.ts
- * API-level tests for LLM provider management and main-node chat.
- */
-
-import { test, expect } from '@playwright/test'
-import * as fs from 'fs'
-import * as path from 'path'
-import * as dotenv from 'dotenv'
-import {
-  createCanvas,
-  deleteCanvas,
-  getProviders,
-  upsertProvider,
-  deleteProvider,
-  setDefaultProvider,
-  testProvider,
-  getMainNodeChat,
-  sendMainNodeMessage,
-  unauthenticatedGet,
-  unauthenticatedPost,
-} from '../helpers/api'
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env') })
-
-const TOKEN_CACHE = path.resolve(__dirname, '../../.auth-cache.json')
-const BASE_API = process.env.BASE_API_URL ?? 'http://localhost:8080/api'
-const OPENAI_KEY = process.env.TEST_OPENAI_KEY
-
-let token1: string
-let token2: string
-
-test.beforeAll(() => {
-  const cache = JSON.parse(fs.readFileSync(TOKEN_CACHE, 'utf-8'))
-  token1 = cache.token1
-  token2 = cache.token2
-})
-
-// ─── Auth boundary ────────────────────────────────────────────────────────────
-
-test('GET /llm/providers without token → 401', async ({ request }) => {
-  const status = await unauthenticatedGet(request, '/llm/providers')
-  expect(status).toBe(401)
-})
-
-test('PUT /llm/providers/openai without token → 401', async ({ request }) => {
-  const res = await request.put(`${BASE_API}/llm/providers/openai`, { data: { apiKey: 'test' } })
-  expect(res.status()).toBe(401)
-})
-
-test('GET /llm/chat/main-node without token → 401', async ({ request }) => {
-  const status = await unauthenticatedGet(request, '/llm/chat/main-node?canvasId=1')
-  expect(status).toBe(401)
-})
-
-test('POST /llm/chat/main-node/messages without token → 401', async ({ request }) => {
-  const status = await unauthenticatedPost(request, '/llm/chat/main-node/messages', { canvasId: 1, content: 'hello' })
-  expect(status).toBe(401)
-})
-
-// ─── Provider management ──────────────────────────────────────────────────────
-
-test('GET /llm/providers returns all 3 providers in response', async ({ request }) => {
-  const { status, body } = await getProviders(request, token1)
-  expect(status).toBe(200)
-  expect(body.providers.length).toBe(3)
-  const names = body.providers.map((p: any) => p.provider)
-  expect(names).toContain('openai')
-  expect(names).toContain('claude')
-  expect(names).toContain('gemini')
-})
-
-test('PUT /llm/providers/:provider saves key and returns masked last 4', async ({ request }) => {
-  const { status, body } = await upsertProvider(request, token1, 'openai', 'sk-testkey1234')
-  expect(status).toBe(200)
-  const openai = body.providers.find((p: any) => p.provider === 'openai')
-  expect(openai.configured).toBe(true)
-  expect(openai.maskedLast4).toBe('****1234')
-})
-
-test('PUT /llm/providers/:provider first key → automatically becomes default', async ({ request }) => {
-  await deleteProvider(request, token1, 'openai')
-  await deleteProvider(request, token1, 'claude')
-  await deleteProvider(request, token1, 'gemini')
-
-  const { body } = await upsertProvider(request, token1, 'claude', 'sk-ant-testkey5678')
-  expect(body.defaultProvider).toBe('claude')
-})
-
-test('PUT /llm/providers/:provider empty apiKey → 400', async ({ request }) => {
-  const { status } = await upsertProvider(request, token1, 'openai', '   ')
-  expect(status).toBe(400)
-})
-
-test('PUT /llm/providers/unsupported → 400', async ({ request }) => {
-  const { status } = await upsertProvider(request, token1, 'mistral', 'somekey')
-  expect(status).toBe(400)
-})
-
-test('PUT /llm/providers/ provider name is case-insensitive', async ({ request }) => {
-  const { status, body } = await upsertProvider(request, token1, 'OpenAI', 'sk-testkey9999')
-  expect(status).toBe(200)
-  const openai = body.providers.find((p: any) => p.provider === 'openai')
-  expect(openai.configured).toBe(true)
-})
-
-test('DELETE /llm/providers/:provider removes key', async ({ request }) => {
-  await upsertProvider(request, token1, 'openai', 'sk-testkey')
-  const { body } = await deleteProvider(request, token1, 'openai')
-  const openai = body.providers.find((p: any) => p.provider === 'openai')
-  expect(openai.configured).toBe(false)
-  expect(openai.maskedLast4).toBeNull()
-})
-
-test('DELETE /llm/providers/:provider deleting default → next provider in priority becomes default', async ({ request }) => {
-  await deleteProvider(request, token1, 'openai')
-  await deleteProvider(request, token1, 'claude')
-  await deleteProvider(request, token1, 'gemini')
-
-  await upsertProvider(request, token1, 'openai', 'sk-test1')
-  await upsertProvider(request, token1, 'claude', 'sk-ant-test2')
-  await setDefaultProvider(request, token1, 'openai')
-
-  const { body } = await deleteProvider(request, token1, 'openai')
-  expect(body.defaultProvider).toBe('claude')
-})
-
-test('DELETE /llm/providers/:provider deleting only provider → no default', async ({ request }) => {
-  await deleteProvider(request, token1, 'openai')
-  await deleteProvider(request, token1, 'claude')
-  await deleteProvider(request, token1, 'gemini')
-
-  await upsertProvider(request, token1, 'gemini', 'AIza-testkey')
-  const { body } = await deleteProvider(request, token1, 'gemini')
-  expect(body.defaultProvider).toBeNull()
-})
-
-test('DELETE /llm/providers/:provider on unconfigured provider → 200 (idempotent)', async ({ request }) => {
-  const { status } = await deleteProvider(request, token1, 'gemini')
-  expect(status).toBe(200)
-})
-
-test('PUT /llm/providers/default to configured provider → 200', async ({ request }) => {
-  await upsertProvider(request, token1, 'openai', 'sk-test')
-  await upsertProvider(request, token1, 'claude', 'sk-ant-test')
-
-  const { status, body } = await setDefaultProvider(request, token1, 'claude')
-  expect(status).toBe(200)
-  expect(body.defaultProvider).toBe('claude')
-})
-
-test('PUT /llm/providers/default to unconfigured provider → 400', async ({ request }) => {
-  await deleteProvider(request, token1, 'gemini')
-  const { status } = await setDefaultProvider(request, token1, 'gemini')
-  expect(status).toBe(400)
-})
-
-test('POST /llm/providers/:provider/test unconfigured provider → 400', async ({ request }) => {
-  await deleteProvider(request, token1, 'gemini')
-  const { status } = await testProvider(request, token1, 'gemini')
-  expect(status).toBe(400)
-})
-
-test.describe('Test provider with real key', () => {
-  test.skip(!OPENAI_KEY, 'TEST_OPENAI_KEY not set')
-
-  test('POST /llm/providers/openai/test with valid key → 200 with lastTestedAt set', async ({ request }) => {
-    await upsertProvider(request, token1, 'openai', OPENAI_KEY!)
-    const { status, body } = await testProvider(request, token1, 'openai')
-    expect(status).toBe(200)
-    const openai = body.providers.find((p: any) => p.provider === 'openai')
-    expect(openai.lastTestedAt).not.toBeNull()
-  })
-})
-
-// ─── Main-node chat ───────────────────────────────────────────────────────────
-
-test('GET /llm/chat/main-node on new canvas → empty messages', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Chat test canvas')
-  const { status, body } = await getMainNodeChat(request, token1, canvas.id)
-
-  expect(status).toBe(200)
-  expect(body.canvasId).toBe(canvas.id)
-  expect(body.messages).toEqual([])
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('GET /llm/chat/main-node on another users canvas → 404', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Private chat canvas')
-  const { status } = await getMainNodeChat(request, token2, canvas.id)
-  expect(status).toBe(404)
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('GET /llm/chat/main-node nonexistent canvas → 404', async ({ request }) => {
-  const { status } = await getMainNodeChat(request, token1, 999999999)
-  expect(status).toBe(404)
-})
-
-test('POST /llm/chat/main-node/messages empty content → 400', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Empty msg test')
-  const { status } = await sendMainNodeMessage(request, token1, canvas.id, '   ')
-  expect(status).toBe(400)
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('POST /llm/chat/main-node/messages no providers → 400 missing_key', async ({ request }) => {
-  await deleteProvider(request, token1, 'openai')
-  await deleteProvider(request, token1, 'claude')
-  await deleteProvider(request, token1, 'gemini')
-
-  const { body: canvas } = await createCanvas(request, token1, 'No provider msg test')
-  const { status, body } = await sendMainNodeMessage(request, token1, canvas.id, 'Hello there')
-  expect(status).toBe(400)
-  expect(body.code).toBe('missing_key')
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('POST /llm/chat/main-node/messages on another users canvas → 404', async ({ request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Cross-user msg test')
-  const { status } = await sendMainNodeMessage(request, token2, canvas.id, 'Hello')
-  expect(status).toBe(404)
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('POST /llm/chat/main-node/messages with unconfigured providerOverride → 400', async ({ request }) => {
-  await deleteProvider(request, token1, 'gemini')
-  if (OPENAI_KEY) await upsertProvider(request, token1, 'openai', OPENAI_KEY)
-
-  const { body: canvas } = await createCanvas(request, token1, 'Override test canvas')
-  const { status, body } = await sendMainNodeMessage(request, token1, canvas.id, 'Hello', 'gemini')
-  expect(status).toBe(400)
-  expect(body.code).toBe('missing_key')
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test.describe('Main-node chat with real LLM', () => {
-  test.skip(!OPENAI_KEY, 'TEST_OPENAI_KEY not set')
-
-  test('POST message → persists user+assistant messages, history grows on second send', async ({ request }) => {
-    await upsertProvider(request, token1, 'openai', OPENAI_KEY!)
-    const { body: canvas } = await createCanvas(request, token1, 'Full chat test')
-
-    const { status: s1, body: r1 } = await sendMainNodeMessage(request, token1, canvas.id, 'What is 2+2?')
-    expect(s1).toBe(200)
-    expect(r1.messages.length).toBe(2)
-    expect(r1.messages[0].role).toBe('user')
-    expect(r1.messages[1].role).toBe('assistant')
-
-    const { body: r2 } = await sendMainNodeMessage(request, token1, canvas.id, 'What did I just ask?')
-    expect(r2.messages.length).toBe(4)
-
-    await deleteCanvas(request, token1, canvas.id)
-  })
-})
diff --git a/tests/playwright/tests/api/notes.spec.ts b/tests/playwright/tests/api/notes.spec.ts
new file mode 100644
index 0000000..a0eb9ba
--- /dev/null
+++ b/tests/playwright/tests/api/notes.spec.ts
@@ -0,0 +1,45 @@
+import { expect, test } from '@playwright/test'
+import { createChatSession, createNode, generateNote } from '../helpers/api'
+import { readAuthCache } from '../helpers/auth-cache'
+
+test.describe('Note generation API contracts', () => {
+  test('creates a note node explicitly via node creation route', async ({ request }) => {
+    const auth = readAuthCache()
+    const created = await createChatSession(request, auth.token1, {
+      title: `Note create ${Date.now()}`,
+    })
+    expect(created.status).toBe(201)
+
+    const sessionId = created.body!.graph.session.id
+    const rootNodeId = created.body!.graph.rootNodeId
+    const noteNodeResponse = await createNode(request, auth.token1, sessionId, {
+      parentNodeId: rootNodeId,
+      nodeType: 'note',
+      title: 'Manual note node',
+      content: 'Initial note content',
+    })
+
+    expect(noteNodeResponse.status).toBe(200)
+    expect(noteNodeResponse.body?.node.nodeType).toBe('note')
+  })
+
+  test('returns either generated state or typed LLM/config error', async ({ request }) => {
+    const auth = readAuthCache()
+    const created = await createChatSession(request, auth.token1, {
+      title: `Note contract ${Date.now()}`,
+    })
+    expect(created.status).toBe(201)
+
+    const sessionId = created.body!.graph.session.id
+    const rootNodeId = created.body!.graph.rootNodeId
+
+    const noteResponse = await generateNote(request, auth.token1, sessionId, rootNodeId)
+    expect([200, 400, 422]).toContain(noteResponse.status)
+
+    if (noteResponse.status === 200)
+      expect(noteResponse.body?.graph.session.id).toBe(sessionId)
+
+    if (noteResponse.status !== 200)
+      expect(noteResponse.text.length).toBeGreaterThan(0)
+  })
+})
diff --git a/tests/playwright/tests/api/providers.spec.ts b/tests/playwright/tests/api/providers.spec.ts
new file mode 100644
index 0000000..26696ee
--- /dev/null
+++ b/tests/playwright/tests/api/providers.spec.ts
@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test'
+import { clearProviderKeys, getProviders, upsertProvider } from '../helpers/api'
+import { readAuthCache } from '../helpers/auth-cache'
+
+test.describe('Provider API contracts', () => {
+  test('lists providers for authenticated user', async ({ request }) => {
+    const auth = readAuthCache()
+    const response = await getProviders(request, auth.token1)
+    expect(response.status).toBe(200)
+    expect(Array.isArray(response.body?.providers)).toBeTruthy()
+  })
+
+  test('upserts provider key and reflects configured status', async ({ request }) => {
+    const auth = readAuthCache()
+    await clearProviderKeys(request, auth.token1)
+
+    const upsert = await upsertProvider(request, auth.token1, 'openai', 'sk-test-contract-1234')
+    expect(upsert.status).toBe(200)
+    expect(upsert.body?.providers.some(item => item.provider === 'openai')).toBeTruthy()
+  })
+})
diff --git a/tests/playwright/tests/helpers/api.ts b/tests/playwright/tests/helpers/api.ts
index f71f72c..6ef36c6 100644
--- a/tests/playwright/tests/helpers/api.ts
+++ b/tests/playwright/tests/helpers/api.ts
@@ -1,12 +1,6 @@
-/**
- * tests/helpers/api.ts
- * Thin typed wrapper around the Coliee REST API for use in both API tests
- * and UI test setup (seeding data, teardown, etc.)
- */
-
 import * as dotenv from 'dotenv'
 import * as path from 'path'
-import type { APIRequestContext } from '@playwright/test'
+import type { APIRequestContext, APIResponse } from '@playwright/test'
 
 dotenv.config({ path: path.resolve(__dirname, '../../.env') })
 
@@ -17,270 +11,180 @@ export interface AuthTokens {
   refreshToken: string
 }
 
-export interface CanvasSummary {
-  id: number
-  title: string
-  createdAt: string
-  updatedAt: string
-}
-
-export interface CanvasGraphResponse {
-  canvasId: number
-  mode: 'graph' | 'legacy'
-  defaultProvider: string | null
-  availableProviders: string[]
-  rootNodeId: number | null
-  nodes: CanvasGraphNode[]
-}
-
-export interface CanvasGraphNode {
-  id: number
-  parentNodeId: number | null
-  kind: string
-  title: string
-  content: string
-  sourcePrompt: string | null
-  depth: number
-  siblingOrder: number
+export interface AuthCache {
+  token1: string
+  refreshToken1: string
+  token2: string
+  refreshToken2: string
+  hasDistinctSecondUser: boolean
 }
 
 export interface ProviderListResponse {
   defaultProvider: string | null
-  providers: ProviderSummary[]
+  providers: Array<{
+    provider: string
+    configured: boolean
+    maskedLast4: string | null
+    isDefault: boolean
+    lastTestedAt: string | null
+    updatedAt: string | null
+  }>
+}
+
+export interface ApiResult<T = unknown> {
+  status: number
+  ok: boolean
+  body: T | null
+  text: string
+}
+
+async function parseApiResponse<T>(res: APIResponse): Promise<ApiResult<T>> {
+  const status = res.status()
+  const ok = res.ok()
+  const text = await res.text()
+  if (!text.trim())
+    return { status, ok, body: null, text: '' }
+
+  try {
+    return { status, ok, body: JSON.parse(text) as T, text }
+  } catch {
+    return { status, ok, body: null, text }
+  }
 }
 
-export interface ProviderSummary {
-  provider: string
-  configured: boolean
-  maskedLast4: string | null
-  isDefault: boolean
-  lastTestedAt: string | null
-  updatedAt: string | null
+function authHeaders(token: string): Record<string, string> {
+  return { Authorization: `Bearer ${token}` }
 }
 
-export interface MainNodeChatResponse {
-  canvasId: number
-  conversationId: number | null
-  defaultProvider: string | null
-  availableProviders: string[]
-  messages: MainNodeMessage[]
+export async function login(request: APIRequestContext, email: string, password: string): Promise<AuthTokens> {
+  const res = await request.post(`${BASE}/auth/login`, { data: { email, password } })
+  const parsed = await parseApiResponse<AuthTokens>(res)
+  if (!parsed.ok || !parsed.body?.token)
+    throw new Error(`Login failed (${parsed.status}): ${parsed.text}`)
+  return parsed.body
 }
 
-export interface MainNodeMessage {
-  id: number
-  role: 'user' | 'assistant'
-  content: string
-  provider: string | null
-  model: string | null
-  createdAt: string
+export async function unauthenticatedGet(request: APIRequestContext, routePath: string): Promise<ApiResult> {
+  const res = await request.get(`${BASE}${routePath}`)
+  return parseApiResponse(res)
 }
 
-// ---------------------------------------------------------------------------
-// Auth
-// ---------------------------------------------------------------------------
-
-export async function login(
+export async function unauthenticatedPost(
   request: APIRequestContext,
-  email: string,
-  password: string,
-): Promise<AuthTokens> {
-  const res = await request.post(`${BASE}/auth/login`, {
-    data: { email, password },
-  })
-  if (!res.ok()) {
-    const body = await res.text()
-    throw new Error(`Login failed (${res.status()}): ${body}`)
-  }
-  return res.json()
+  routePath: string,
+  data?: Record<string, unknown>,
+): Promise<ApiResult> {
+  const res = await request.post(`${BASE}${routePath}`, { data })
+  return parseApiResponse(res)
 }
 
-// ---------------------------------------------------------------------------
-// Canvas CRUD
-// ---------------------------------------------------------------------------
-
-export async function getCanvases(
-  request: APIRequestContext,
-  token: string,
-): Promise<CanvasSummary[]> {
-  const res = await request.get(`${BASE}/canvases`, {
-    headers: { Authorization: `Bearer ${token}` },
-  })
-  return res.json()
+export async function getProviders(request: APIRequestContext, token: string): Promise<ApiResult<ProviderListResponse>> {
+  const res = await request.get(`${BASE}/llm/providers`, { headers: authHeaders(token) })
+  return parseApiResponse<ProviderListResponse>(res)
 }
 
-export async function createCanvas(
+export async function upsertProvider(
   request: APIRequestContext,
   token: string,
-  firstPrompt: string,
-): Promise<{ status: number; body: CanvasSummary }> {
-  const res = await request.post(`${BASE}/canvases`, {
-    headers: { Authorization: `Bearer ${token}` },
-    data: { firstPrompt },
+  provider: string,
+  apiKey: string,
+): Promise<ApiResult<ProviderListResponse>> {
+  const res = await request.put(`${BASE}/llm/providers/${provider}`, {
+    headers: authHeaders(token),
+    data: { apiKey },
   })
-  return { status: res.status(), body: await res.json() }
+  return parseApiResponse<ProviderListResponse>(res)
 }
 
-export async function renameCanvas(
-  request: APIRequestContext,
-  token: string,
-  canvasId: number,
-  title: string,
-): Promise<{ status: number; body: CanvasSummary }> {
-  const res = await request.patch(`${BASE}/canvases/${canvasId}`, {
-    headers: { Authorization: `Bearer ${token}` },
-    data: { title },
-  })
-  return { status: res.status(), body: await res.json() }
+export async function clearProviderKeys(request: APIRequestContext, token: string): Promise<void> {
+  for (const provider of ['openai', 'claude', 'gemini', 'lmstudio']) {
+    await request.delete(`${BASE}/llm/providers/${provider}`, { headers: authHeaders(token) })
+  }
 }
 
-export async function deleteCanvas(
+export async function createChatSession(
   request: APIRequestContext,
   token: string,
-  canvasId: number,
-): Promise<number> {
-  const res = await request.delete(`${BASE}/canvases/${canvasId}`, {
-    headers: { Authorization: `Bearer ${token}` },
+  payload: { title?: string; content?: string; providerOverride?: string; modelOverride?: string } = {},
+): Promise<ApiResult<{ graph: { session: { id: number; title: string }; rootNodeId: number; activeNodeId: number }; node: { nodeId: number } }>> {
+  const res = await request.post(`${BASE}/chat-sessions`, {
+    headers: authHeaders(token),
+    data: payload,
   })
-  return res.status()
+  return parseApiResponse(res)
 }
 
-export async function getCanvasGraph(
-  request: APIRequestContext,
-  token: string,
-  canvasId: number,
-): Promise<{ status: number; body: CanvasGraphResponse }> {
-  const res = await request.get(`${BASE}/canvases/${canvasId}/graph`, {
-    headers: { Authorization: `Bearer ${token}` },
-  })
-  return { status: res.status(), body: await res.json() }
+export async function getChatSessions(request: APIRequestContext, token: string): Promise<ApiResult<Array<{ id: number; title: string }>>> {
+  const res = await request.get(`${BASE}/chat-sessions`, { headers: authHeaders(token) })
+  return parseApiResponse(res)
 }
 
-export async function expandCanvasNode(
-  request: APIRequestContext,
-  token: string,
-  canvasId: number,
-  nodeId: number,
-  prompt: string,
-  providerOverride?: string,
-): Promise<{ status: number; body: any }> {
-  const res = await request.post(
-    `${BASE}/canvases/${canvasId}/nodes/${nodeId}/expand`,
-    {
-      headers: { Authorization: `Bearer ${token}` },
-      data: { prompt, providerOverride },
-    },
-  )
-  return { status: res.status(), body: await res.json() }
+export async function getChatSession(request: APIRequestContext, token: string, sessionId: number): Promise<ApiResult<{ session: { id: number }; activeNodeId: number; nodes: Array<{ id: number }> }>> {
+  const res = await request.get(`${BASE}/chat-sessions/${sessionId}`, { headers: authHeaders(token) })
+  return parseApiResponse(res)
 }
 
-// ---------------------------------------------------------------------------
-// LLM providers
-// ---------------------------------------------------------------------------
-
-export async function getProviders(
+export async function getChatNode(
   request: APIRequestContext,
   token: string,
-): Promise<{ status: number; body: ProviderListResponse }> {
-  const res = await request.get(`${BASE}/llm/providers`, {
-    headers: { Authorization: `Bearer ${token}` },
-  })
-  return { status: res.status(), body: await res.json() }
-}
-
-export async function upsertProvider(
-  request: APIRequestContext,
-  token: string,
-  provider: string,
-  apiKey: string,
-): Promise<{ status: number; body: ProviderListResponse }> {
-  const res = await request.put(`${BASE}/llm/providers/${provider}`, {
-    headers: { Authorization: `Bearer ${token}` },
-    data: { apiKey },
-  })
-  return { status: res.status(), body: await res.json() }
-}
-
-export async function deleteProvider(
-  request: APIRequestContext,
-  token: string,
-  provider: string,
-): Promise<{ status: number; body: ProviderListResponse }> {
-  const res = await request.delete(`${BASE}/llm/providers/${provider}`, {
-    headers: { Authorization: `Bearer ${token}` },
-  })
-  return { status: res.status(), body: await res.json() }
+  sessionId: number,
+  nodeId: number,
+): Promise<ApiResult<{ nodeId: number }>> {
+  const res = await request.get(`${BASE}/chat-sessions/${sessionId}/nodes/${nodeId}`, { headers: authHeaders(token) })
+  return parseApiResponse(res)
 }
 
-export async function setDefaultProvider(
+export async function createNode(
   request: APIRequestContext,
   token: string,
-  provider: string,
-): Promise<{ status: number; body: any }> {
-  const res = await request.put(`${BASE}/llm/providers/default`, {
-    headers: { Authorization: `Bearer ${token}` },
-    data: { provider },
+  sessionId: number,
+  payload: { parentNodeId: number; nodeType: 'question' | 'response' | 'note'; title?: string; content?: string },
+): Promise<ApiResult<{ graph: { session: { id: number } }; node: { nodeId: number; nodeType: string } }>> {
+  const res = await request.post(`${BASE}/chat-sessions/${sessionId}/nodes`, {
+    headers: authHeaders(token),
+    data: payload,
   })
-  return { status: res.status(), body: await res.json() }
+  return parseApiResponse(res)
 }
 
-export async function testProvider(
+export async function sendNodeMessage(
   request: APIRequestContext,
   token: string,
-  provider: string,
-): Promise<{ status: number; body: any }> {
-  const res = await request.post(`${BASE}/llm/providers/${provider}/test`, {
-    headers: { Authorization: `Bearer ${token}` },
+  sessionId: number,
+  nodeId: number,
+  content: string,
+): Promise<ApiResult<{ graph: { session: { id: number } } }>> {
+  const res = await request.post(`${BASE}/chat-sessions/${sessionId}/nodes/${nodeId}/messages`, {
+    headers: authHeaders(token),
+    data: { content },
   })
-  return { status: res.status(), body: await res.json() }
+  return parseApiResponse(res)
 }
 
-// ---------------------------------------------------------------------------
-// Main-node chat
-// ---------------------------------------------------------------------------
-
-export async function getMainNodeChat(
+export async function createBranch(
   request: APIRequestContext,
   token: string,
-  canvasId: number,
-): Promise<{ status: number; body: MainNodeChatResponse }> {
-  const res = await request.get(`${BASE}/llm/chat/main-node`, {
-    headers: { Authorization: `Bearer ${token}` },
-    params: { canvasId: String(canvasId) },
+  sessionId: number,
+  nodeId: number,
+  branchFromMessageId: number,
+  content: string,
+): Promise<ApiResult<{ graph: { session: { id: number } } }>> {
+  const res = await request.post(`${BASE}/chat-sessions/${sessionId}/nodes/${nodeId}/branches`, {
+    headers: authHeaders(token),
+    data: { branchFromMessageId, content },
   })
-  return { status: res.status(), body: await res.json() }
+  return parseApiResponse(res)
 }
 
-export async function sendMainNodeMessage(
+export async function generateNote(
   request: APIRequestContext,
   token: string,
-  canvasId: number,
-  content: string,
-  providerOverride?: string,
-): Promise<{ status: number; body: MainNodeChatResponse }> {
-  const res = await request.post(`${BASE}/llm/chat/main-node/messages`, {
-    headers: { Authorization: `Bearer ${token}` },
-    data: { canvasId, content, providerOverride },
+  sessionId: number,
+  nodeId: number,
+): Promise<ApiResult<{ graph: { session: { id: number } } }>> {
+  const res = await request.post(`${BASE}/chat-sessions/${sessionId}/nodes/${nodeId}/notes`, {
+    headers: authHeaders(token),
+    data: {},
   })
-  return { status: res.status(), body: await res.json() }
-}
-
-// ---------------------------------------------------------------------------
-// Utility: unauthenticated request helper
-// ---------------------------------------------------------------------------
-
-export async function unauthenticatedGet(
-  request: APIRequestContext,
-  path: string,
-): Promise<number> {
-  const res = await request.get(`${BASE}${path}`)
-  return res.status()
-}
-
-export async function unauthenticatedPost(
-  request: APIRequestContext,
-  path: string,
-  data?: Record<string, unknown>,
-): Promise<number> {
-  const res = await request.post(`${BASE}${path}`, { data })
-  return res.status()
+  return parseApiResponse(res)
 }
diff --git a/tests/playwright/tests/helpers/auth-cache.ts b/tests/playwright/tests/helpers/auth-cache.ts
new file mode 100644
index 0000000..19f6611
--- /dev/null
+++ b/tests/playwright/tests/helpers/auth-cache.ts
@@ -0,0 +1,9 @@
+import * as fs from 'fs'
+import * as path from 'path'
+import type { AuthCache } from './api'
+
+const TOKEN_CACHE = path.resolve(__dirname, '../../.auth-cache.json')
+
+export function readAuthCache(): AuthCache {
+  return JSON.parse(fs.readFileSync(TOKEN_CACHE, 'utf-8')) as AuthCache
+}
diff --git a/tests/playwright/tests/helpers/global-setup.ts b/tests/playwright/tests/helpers/global-setup.ts
index 0466c13..ed15124 100644
--- a/tests/playwright/tests/helpers/global-setup.ts
+++ b/tests/playwright/tests/helpers/global-setup.ts
@@ -1,56 +1,45 @@
-/**
- * tests/helpers/global-setup.ts
- * Logs in both test users once before the entire test suite runs
- * and caches tokens to a temp file — avoids hammering the login
- * rate limit by logging in 3 times in rapid beforeAll blocks.
- */
-
 import * as dotenv from 'dotenv'
 import * as path from 'path'
 import * as fs from 'fs'
 import { request as playwrightRequest } from '@playwright/test'
+import { type AuthCache, login } from './api'
 
 dotenv.config({ path: path.resolve(__dirname, '../../.env') })
 
-const BASE = process.env.BASE_API_URL ?? 'http://localhost:8080/api'
 const TOKEN_CACHE = path.resolve(__dirname, '../../.auth-cache.json')
 
 export default async function globalSetup() {
   const context = await playwrightRequest.newContext()
 
-  const email1 = process.env.TEST_USER_EMAIL!
-  const password1 = process.env.TEST_USER_PASSWORD!
-  const email2 = process.env.TEST_USER2_EMAIL!
-  const password2 = process.env.TEST_USER2_PASSWORD!
+  const email1 = process.env.TEST_USER_EMAIL
+  const password1 = process.env.TEST_USER_PASSWORD
+  if (!email1 || !password1)
+    throw new Error('Global setup: TEST_USER_EMAIL and TEST_USER_PASSWORD are required.')
 
-  console.log('\n🔐 Global setup: logging in test users...')
+  const email2 = process.env.TEST_USER2_EMAIL
+  const password2 = process.env.TEST_USER2_PASSWORD
+  const hasSecondUser = Boolean(email2 && password2)
 
-  const res1 = await context.post(`${BASE}/auth/login`, {
-    data: { email: email1, password: password1 },
-  })
-  if (!res1.ok()) {
-    const body = await res1.text()
-    throw new Error(`Global setup: login failed for user1 (${res1.status()}): ${body}`)
-  }
-  const auth1 = await res1.json()
+  console.log('\nGlobal setup: authenticating test users...')
 
-  // Small delay to avoid rate limit
-  await new Promise(r => setTimeout(r, 1000))
+  const auth1 = await login(context, email1, password1)
 
-  const res2 = await context.post(`${BASE}/auth/login`, {
-    data: { email: email2, password: password2 },
-  })
-  if (!res2.ok()) {
-    const body = await res2.text()
-    throw new Error(`Global setup: login failed for user2 (${res2.status()}): ${body}`)
+  let auth2 = auth1
+  if (hasSecondUser) {
+    // Small delay to avoid backend auth throttling.
+    await new Promise(r => setTimeout(r, 500))
+    auth2 = await login(context, email2!, password2!)
   }
-  const auth2 = await res2.json()
 
-  fs.writeFileSync(TOKEN_CACHE, JSON.stringify({
+  const cache: AuthCache = {
     token1: auth1.token,
+    refreshToken1: auth1.refreshToken,
     token2: auth2.token,
-  }))
+    refreshToken2: auth2.refreshToken,
+    hasDistinctSecondUser: hasSecondUser,
+  }
 
-  console.log('✅ Both users authenticated, tokens cached.\n')
+  fs.writeFileSync(TOKEN_CACHE, JSON.stringify(cache, null, 2))
+  console.log(`Global setup: tokens cached. second user configured=${hasSecondUser}`)
   await context.dispose()
 }
diff --git a/tests/playwright/tests/helpers/ui-auth.ts b/tests/playwright/tests/helpers/ui-auth.ts
new file mode 100644
index 0000000..5307a4e
--- /dev/null
+++ b/tests/playwright/tests/helpers/ui-auth.ts
@@ -0,0 +1,17 @@
+import type { Page } from '@playwright/test'
+import { readAuthCache } from './auth-cache'
+
+export async function loginViaSessionStorage(page: Page, pagePath = '/'): Promise<void> {
+  const auth = readAuthCache()
+  await page.goto('/login')
+  await page.evaluate(({ token, refreshToken }) => {
+    sessionStorage.setItem('token', token)
+    sessionStorage.setItem('refreshToken', refreshToken)
+    sessionStorage.setItem('isEmailVerified', 'true')
+  }, {
+    token: auth.token1,
+    refreshToken: auth.refreshToken1,
+  })
+  await page.goto(pagePath)
+  await page.waitForLoadState('networkidle')
+}
diff --git a/tests/playwright/tests/ui/homepage.spec.ts b/tests/playwright/tests/ui/homepage.spec.ts
deleted file mode 100644
index 9da1580..0000000
--- a/tests/playwright/tests/ui/homepage.spec.ts
+++ /dev/null
@@ -1,327 +0,0 @@
-/**
- * tests/ui/homepage.spec.ts
- */
-
-import { test, expect, type Page } from '@playwright/test'
-import * as fs from 'fs'
-import * as path from 'path'
-import * as dotenv from 'dotenv'
-import { createCanvas, deleteCanvas, deleteProvider } from '../helpers/api'
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env') })
-
-const UI_URL = process.env.BASE_UI_URL ?? 'http://localhost:3000'
-const BASE_API = process.env.BASE_API_URL ?? 'http://localhost:8080/api'
-const TOKEN_CACHE = path.resolve(__dirname, '../../.auth-cache.json')
-
-let token1: string
-let refreshToken1: string
-
-test.beforeAll(() => {
-  const cache = JSON.parse(fs.readFileSync(TOKEN_CACHE, 'utf-8'))
-  token1 = cache.token1
-  refreshToken1 = cache.refreshToken1
-})
-
-async function injectAuthAndGo(page: Page, pagePath: string = '/home') {
-  await page.goto(`${UI_URL}/login`)
-  await page.evaluate(
-    ({ token, refreshToken }) => {
-      sessionStorage.setItem('token', token)
-      sessionStorage.setItem('refreshToken', refreshToken)
-      sessionStorage.setItem('isEmailVerified', 'true')
-    },
-    { token: token1, refreshToken: refreshToken1 }
-  )
-  await page.goto(`${UI_URL}/home`)
-  await page.waitForLoadState('networkidle')
-  if (pagePath !== '/home') {
-    await page.goto(`${UI_URL}${pagePath}`)
-    await page.waitForLoadState('networkidle')
-  }
-}
-
-// FIX: Use :not([aria-current]) to exclude the canvas button itself.
-// Previously, /^Rename / and /^Delete / matched both the canvas button
-// (aria-label="Rename me canvas. Updated just now...") and the action
-// button (aria-label="Rename Rename me canvas"), causing a strict mode
-// violation. Scoping to button.btn-pill-outline:not([aria-current])
-// targets only the dedicated action button.
-
-function renameButtonForSelected(page: Page) {
-  return page
-    .locator('li')
-    .filter({ has: page.locator('button[aria-current="true"]') })
-    .locator('button.btn-pill-outline[aria-label^="Rename "]:not([aria-current])')
-}
-
-function deleteButtonForSelected(page: Page) {
-  return page
-    .locator('li')
-    .filter({ has: page.locator('button[aria-current="true"]') })
-    .locator('button.btn-pill-outline[aria-label^="Delete "]:not([aria-current])')
-}
-
-// ─── Canvas creation ──────────────────────────────────────────────────────────
-
-test('Create canvas modal — empty prompt shows inline error, not network call', async ({ page }) => {
-  await injectAuthAndGo(page)
-
-  await page.click('button[aria-label="Create a new canvas"]')
-  await expect(page.getByRole('dialog', { name: 'Create canvas' })).toBeVisible()
-
-  await page.click('button[type="submit"]:has-text("Create Canvas")')
-
-  await expect(page.getByRole('alert')).toContainText('Add the first prompt')
-  await expect(page.getByRole('dialog', { name: 'Create canvas' })).toBeVisible()
-})
-
-test('Create canvas — valid prompt creates canvas and selects it', async ({ page }) => {
-  await injectAuthAndGo(page)
-
-  await page.click('button[aria-label="Create a new canvas"]')
-  await expect(page.getByRole('dialog', { name: 'Create canvas' })).toBeVisible()
-
-  await page.getByRole('dialog').locator('textarea').fill('Sprint planning for Q3 2025')
-  await page.click('button[type="submit"]:has-text("Create Canvas")')
-
-  await expect(page.getByRole('dialog', { name: 'Create canvas' })).not.toBeVisible({ timeout: 10_000 })
-  await expect(page.locator('[data-testid="desktop-sidebar"]')).toContainText('Sprint planning for Q3 2025')
-  await expect(page).toHaveURL(/canvasId=\d+/)
-})
-
-test('Create canvas — button is disabled while creating', async ({ page }) => {
-  await injectAuthAndGo(page)
-
-  await page.click('button[aria-label="Create a new canvas"]')
-  await expect(page.getByRole('dialog', { name: 'Create canvas' })).toBeVisible()
-  await page.getByRole('dialog').locator('textarea').fill('Loading state test canvas')
-
-  await page.route(`${BASE_API}/canvases`, async route => {
-    await new Promise(r => setTimeout(r, 1000))
-    await route.continue()
-  })
-
-  await page.click('button[type="submit"]:has-text("Create Canvas")')
-  await expect(page.locator('button:has-text("Creating…")')).toBeVisible({ timeout: 3_000 })
-  await expect(page.locator('button:has-text("Creating…")')).toBeDisabled()
-})
-
-// ─── Canvas rename ────────────────────────────────────────────────────────────
-
-test('Rename canvas — inline form appears, saves updated title', async ({ page, request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Rename me canvas')
-
-  // Navigate directly to this canvas — it becomes aria-current="true" in the sidebar
-  await injectAuthAndGo(page, `/home?canvasId=${canvas.id}`)
-  await expect(page.locator('[data-testid="desktop-sidebar"]')).toContainText('Rename me canvas', { timeout: 10_000 })
-
-  await renameButtonForSelected(page).click()
-
-  const input = page.locator('input[id^="rename-canvas-"]')
-  await expect(input).toBeVisible()
-  await expect(input).toBeFocused()
-
-  await input.fill('Newly renamed canvas')
-  await page.getByRole('button', { name: 'Save', exact: true }).click()
-
-  await expect(page.locator('[data-testid="desktop-sidebar"]')).toContainText('Newly renamed canvas', { timeout: 10_000 })
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('Rename canvas — blank title shows inline error', async ({ page, request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Blank rename test')
-
-  await injectAuthAndGo(page, `/home?canvasId=${canvas.id}`)
-  await expect(page.locator('[data-testid="desktop-sidebar"]')).toContainText('Blank rename test', { timeout: 10_000 })
-
-  await renameButtonForSelected(page).click()
-
-  const input = page.locator('input[id^="rename-canvas-"]')
-  await input.fill('   ')
-  await page.getByRole('button', { name: 'Save', exact: true }).click()
-
-  await expect(page.getByRole('alert')).toContainText('Add a canvas title before saving')
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('Rename canvas — Escape key cancels rename', async ({ page, request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Escape cancel test')
-
-  await injectAuthAndGo(page, `/home?canvasId=${canvas.id}`)
-  await expect(page.locator('[data-testid="desktop-sidebar"]')).toContainText('Escape cancel test', { timeout: 10_000 })
-
-  await renameButtonForSelected(page).click()
-
-  const input = page.locator('input[id^="rename-canvas-"]')
-  await input.fill('Something new')
-  await input.press('Escape')
-
-  await expect(input).not.toBeVisible()
-  await expect(page.locator('[data-testid="desktop-sidebar"]')).toContainText('Escape cancel test')
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-// ─── Canvas delete ────────────────────────────────────────────────────────────
-
-test('Delete canvas — confirm modal deletes canvas and removes from list', async ({ page, request }) => {
-  // FIX: Use a timestamp-unique title so not.toContainText doesn't false-fail
-  // due to leftover canvases with the same name from previous test runs.
-  const title = `Delete this canvas ${Date.now()}`
-  const { body: canvas } = await createCanvas(request, token1, title)
-
-  await injectAuthAndGo(page, `/home?canvasId=${canvas.id}`)
-  await expect(page.locator('[data-testid="desktop-sidebar"]')).toContainText(title, { timeout: 10_000 })
-
-  await deleteButtonForSelected(page).click()
-
-  await expect(page.getByRole('dialog', { name: 'Delete canvas' })).toBeVisible()
-  await expect(page.getByRole('dialog')).toContainText(`"${title}"`)
-
-  await page.getByRole('dialog').getByRole('button', { name: 'Delete Canvas' }).click()
-
-  await expect(page.getByRole('dialog', { name: 'Delete canvas' })).not.toBeVisible()
-  // Assert by unique title — guaranteed no other canvas shares this name
-  await expect(page.locator('[data-testid="desktop-sidebar"]')).not.toContainText(title, { timeout: 10_000 })
-})
-
-test('Delete canvas — Cancel button closes modal without deleting', async ({ page, request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Do not delete me')
-
-  await injectAuthAndGo(page, `/home?canvasId=${canvas.id}`)
-  await expect(page.locator('[data-testid="desktop-sidebar"]')).toContainText('Do not delete me', { timeout: 10_000 })
-
-  await deleteButtonForSelected(page).click()
-  await expect(page.getByRole('dialog', { name: 'Delete canvas' })).toBeVisible()
-
-  await page.getByRole('dialog').getByRole('button', { name: 'Cancel', exact: true }).click()
-  await expect(page.getByRole('dialog', { name: 'Delete canvas' })).not.toBeVisible()
-  await expect(page.locator('[data-testid="desktop-sidebar"]')).toContainText('Do not delete me')
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('Delete selected canvas — next canvas in list gets auto-selected', async ({ page, request }) => {
-  const { body: c1 } = await createCanvas(request, token1, 'Keep me auto')
-  await new Promise(r => setTimeout(r, 50))
-  const { body: c2 } = await createCanvas(request, token1, 'Delete me auto')
-
-  await injectAuthAndGo(page, `/home?canvasId=${c2.id}`)
-  await expect(page.locator('[data-testid="desktop-sidebar"]')).toContainText('Delete me auto', { timeout: 10_000 })
-
-  await deleteButtonForSelected(page).click()
-  await page.getByRole('dialog').getByRole('button', { name: 'Delete Canvas' }).click()
-
-  await expect(page).toHaveURL(new RegExp(`canvasId=${c1.id}`), { timeout: 10_000 })
-
-  await deleteCanvas(request, token1, c1.id)
-})
-
-// ─── Canvas selection and URL sync ────────────────────────────────────────────
-
-test('canvasId in URL loads correct canvas on page load', async ({ page, request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'URL load test canvas')
-
-  await injectAuthAndGo(page, `/home?canvasId=${canvas.id}`)
-
-  await expect(page.locator('h2').filter({ hasText: 'URL load test canvas' })).toBeVisible({ timeout: 10_000 })
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('Invalid canvasId in URL falls back to first canvas in list', async ({ page, request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Fallback canvas')
-
-  await injectAuthAndGo(page, '/home?canvasId=999999999')
-
-  await expect(page.locator('[data-testid="desktop-sidebar"]')).toBeVisible({ timeout: 10_000 })
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-// ─── Graph mode ────────────────────────────────────────────────────────────────
-
-test('New canvas shows graph mode UI with main node card', async ({ page, request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Graph UI test')
-
-  await injectAuthAndGo(page, `/home?canvasId=${canvas.id}`)
-
-  await expect(page.locator('text=Canvas mode: Node graph')).toBeVisible({ timeout: 10_000 })
-  await expect(page.locator('.canvas-node-card')).toBeVisible()
-  await expect(page.locator('.canvas-node-card--main')).toBeVisible()
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('No providers → graph node shows settings CTA', async ({ page, request }) => {
-  await deleteProvider(request, token1, 'openai')
-  await deleteProvider(request, token1, 'claude')
-  await deleteProvider(request, token1, 'gemini')
-
-  const { body: canvas } = await createCanvas(request, token1, 'No provider graph test')
-
-  await injectAuthAndGo(page, `/home?canvasId=${canvas.id}`)
-
-  await expect(page.getByRole('button', { name: 'Go To Settings' })).toBeVisible({ timeout: 10_000 })
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-// ─── Sidebar collapse / expand ────────────────────────────────────────────────
-
-test('Sidebar collapse button hides titles and shows initials', async ({ page, request }) => {
-  const { body: canvas } = await createCanvas(request, token1, 'Sidebar collapse test')
-
-  await injectAuthAndGo(page, `/home?canvasId=${canvas.id}`)
-  await expect(page.locator('[data-testid="desktop-sidebar"]')).toBeVisible({ timeout: 10_000 })
-
-  await page.click('button[aria-label="Collapse canvas sidebar"]')
-
-  const sidebar = page.locator('[data-testid="desktop-sidebar"]')
-  await expect(sidebar.locator('.canvas-sidebar-canvas-initial').first()).toBeVisible()
-  await expect(sidebar.locator('.canvas-sidebar-canvas-title').first()).not.toBeVisible()
-
-  await page.click('button[aria-label="Expand canvas sidebar"]')
-  await expect(sidebar.locator('.canvas-sidebar-canvas-title').first()).toBeVisible()
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-// ─── Mobile drawer ────────────────────────────────────────────────────────────
-
-test('Mobile: hamburger opens drawer, backdrop click closes it', async ({ page, request }) => {
-  await page.setViewportSize({ width: 390, height: 844 })
-
-  const { body: canvas } = await createCanvas(request, token1, 'Mobile drawer test')
-
-  await injectAuthAndGo(page, `/home?canvasId=${canvas.id}`)
-  await expect(page.locator('[data-testid="desktop-sidebar"]')).toBeAttached({ timeout: 10_000 })
-
-  await page.click('button[aria-label="Open canvas sidebar"]')
-  await expect(page.locator('[data-testid="mobile-drawer"]')).toHaveAttribute('role', 'dialog')
-
-  await page.locator('[data-testid="mobile-drawer-backdrop"]').click()
-  await expect(page.locator('[data-testid="mobile-drawer"]')).not.toHaveAttribute('role', 'dialog')
-
-  await deleteCanvas(request, token1, canvas.id)
-})
-
-test('Mobile: Escape key closes the drawer', async ({ page, request }) => {
-  await page.setViewportSize({ width: 390, height: 844 })
-
-  const { body: canvas } = await createCanvas(request, token1, 'Escape drawer test')
-
-  await injectAuthAndGo(page, `/home?canvasId=${canvas.id}`)
-  await expect(page.locator('[data-testid="desktop-sidebar"]')).toBeAttached({ timeout: 10_000 })
-
-  await page.click('button[aria-label="Open canvas sidebar"]')
-  await expect(page.locator('[data-testid="mobile-drawer"]')).toHaveAttribute('role', 'dialog')
-
-  await page.keyboard.press('Escape')
-  await expect(page.locator('[data-testid="mobile-drawer"]')).not.toHaveAttribute('role', 'dialog')
-
-  await deleteCanvas(request, token1, canvas.id)
-})
diff --git a/tests/playwright/tests/ui/settings.spec.ts b/tests/playwright/tests/ui/settings.spec.ts
deleted file mode 100644
index 321a587..0000000
--- a/tests/playwright/tests/ui/settings.spec.ts
+++ /dev/null
@@ -1,159 +0,0 @@
-/**
- * tests/ui/settings.spec.ts
- */
-
-import { test, expect, type Page } from '@playwright/test'
-import * as fs from 'fs'
-import * as path from 'path'
-import * as dotenv from 'dotenv'
-import { deleteProvider } from '../helpers/api'
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env') })
-
-const UI_URL = process.env.BASE_UI_URL ?? 'http://localhost:3000'
-const BASE_API = process.env.BASE_API_URL ?? 'http://localhost:8080/api'
-const TOKEN_CACHE = path.resolve(__dirname, '../../.auth-cache.json')
-const OPENAI_KEY = process.env.TEST_OPENAI_KEY
-
-let token1: string
-let refreshToken1: string
-
-test.beforeAll(() => {
-  const cache = JSON.parse(fs.readFileSync(TOKEN_CACHE, 'utf-8'))
-  token1 = cache.token1
-  refreshToken1 = cache.refreshToken1
-})
-
-async function injectAuthAndGoSettings(page: Page) {
-  await page.goto(`${UI_URL}/login`)
-  await page.evaluate(
-    ({ token, refreshToken }) => {
-      sessionStorage.setItem('token', token)
-      sessionStorage.setItem('refreshToken', refreshToken)
-      sessionStorage.setItem('isEmailVerified', 'true')
-    },
-    { token: token1, refreshToken: refreshToken1 }
-  )
-
-  await page.goto(`${UI_URL}/home`)
-  await page.waitForURL(/\/home(\?canvasId=\d+)?/, { timeout: 15_000 })
-  await expect(page.locator('[data-testid="desktop-sidebar"]')).toBeVisible({ timeout: 15_000 })
-
-  const manageBtn = page.getByRole('button', { name: 'Manage Providers' })
-  await expect(manageBtn).toBeVisible({ timeout: 10_000 })
-  await manageBtn.click()
-  await page.waitForURL(`**/settings`, { timeout: 10_000 })
-}
-
-async function waitForSettingsLoaded(page: Page) {
-  await expect(page.getByRole('heading', { name: 'Account Settings' })).toBeVisible({ timeout: 10_000 })
-}
-
-// FIX: Scope each provider card by its unique API key input placeholder.
-// The previous div.filter() matched the entire page (all 3 cards share the
-// same buttons/inputs), causing strict mode violations on every interaction.
-// Each provider has a distinct placeholder: sk-... / sk-ant-... / AIza...
-// so we find the input first, then walk up to its containing card via locator.
-const PROVIDER_PLACEHOLDER: Record<string, string> = {
-  OpenAI: 'sk-...',
-  Claude: 'sk-ant-...',
-  Gemini: 'AIza...',
-}
-
-function providerCard(page: Page, providerLabel: string) {
-  const placeholder = PROVIDER_PLACEHOLDER[providerLabel]
-  // Find the password input with this provider's placeholder, then scope to
-  // the nearest ancestor div that also contains the provider name text.
-  // This gives us a tight single-card container.
-  return page.locator('div').filter({
-    has: page.locator(`input[placeholder="${placeholder}"]`),
-    hasText: providerLabel,
-  }).last()
-}
-
-// ─── Provider key save ────────────────────────────────────────────────────────
-
-test('Settings — add OpenAI key shows masked last 4 after save', async ({ page, request }) => {
-  await deleteProvider(request, token1, 'openai')
-
-  await injectAuthAndGoSettings(page)
-  await waitForSettingsLoaded(page)
-
-  const card = providerCard(page, 'OpenAI')
-  await card.locator('input[type="password"]').fill('sk-testkey1234')
-  await card.getByRole('button', { name: /Save Key|Update Key/ }).click()
-
-  await expect(card.getByText('****1234')).toBeVisible({ timeout: 10_000 })
-
-  await deleteProvider(request, token1, 'openai')
-})
-
-test('Settings — empty key shows error, does not save', async ({ page }) => {
-  await injectAuthAndGoSettings(page)
-  await waitForSettingsLoaded(page)
-
-  const card = providerCard(page, 'OpenAI')
-  await card.getByRole('button', { name: /Save Key|Update Key/ }).click()
-
-  await expect(page.getByText('Enter an API key before saving.')).toBeVisible({ timeout: 5_000 })
-})
-
-test('Settings — remove provider key removes masked display', async ({ page, request }) => {
-  await request.put(`${BASE_API}/llm/providers/openai`, {
-    headers: { Authorization: `Bearer ${token1}` },
-    data: { apiKey: 'sk-testremoveme1234' },
-  })
-
-  await injectAuthAndGoSettings(page)
-  await waitForSettingsLoaded(page)
-
-  const card = providerCard(page, 'OpenAI')
-  await expect(card.getByText('****1234')).toBeVisible({ timeout: 10_000 })
-
-  await card.getByRole('button', { name: 'Remove' }).click()
-
-  await expect(card.getByText('None')).toBeVisible({ timeout: 10_000 })
-})
-
-test('Settings — set default provider via radio button', async ({ page, request }) => {
-  await request.put(`${BASE_API}/llm/providers/openai`, {
-    headers: { Authorization: `Bearer ${token1}` },
-    data: { apiKey: 'sk-test1' },
-  })
-  await request.put(`${BASE_API}/llm/providers/claude`, {
-    headers: { Authorization: `Bearer ${token1}` },
-    data: { apiKey: 'sk-ant-test2' },
-  })
-
-  await injectAuthAndGoSettings(page)
-  await waitForSettingsLoaded(page)
-
-  const claudeCard = providerCard(page, 'Claude')
-  await claudeCard.locator('input[type="radio"]').click()
-
-  await expect(claudeCard.getByText('Default')).toBeVisible({ timeout: 10_000 })
-
-  await deleteProvider(request, token1, 'openai')
-  await deleteProvider(request, token1, 'claude')
-})
-
-test.describe('Test provider with real key', () => {
-  test.skip(!OPENAI_KEY, 'TEST_OPENAI_KEY not set')
-
-  test('Settings — test provider button shows last tested timestamp', async ({ page, request }) => {
-    await request.put(`${BASE_API}/llm/providers/openai`, {
-      headers: { Authorization: `Bearer ${token1}` },
-      data: { apiKey: OPENAI_KEY },
-    })
-
-    await injectAuthAndGoSettings(page)
-    await waitForSettingsLoaded(page)
-
-    const card = providerCard(page, 'OpenAI')
-    await card.getByRole('button', { name: 'Test Key' }).click()
-
-    await expect(card.getByText(/Last tested:(?!.*Not tested)/)).toBeVisible({ timeout: 15_000 })
-
-    await deleteProvider(request, token1, 'openai')
-  })
-})
diff --git a/tests/playwright/tests/ui/sprint4-flows.spec.ts b/tests/playwright/tests/ui/sprint4-flows.spec.ts
new file mode 100644
index 0000000..7e978d3
--- /dev/null
+++ b/tests/playwright/tests/ui/sprint4-flows.spec.ts
@@ -0,0 +1,72 @@
+import { expect, test } from '@playwright/test'
+import { loginViaSessionStorage } from '../helpers/ui-auth'
+
+test.describe('Sprint 4 UI journeys', () => {
+  test.beforeEach(async ({ isMobile }) => {
+    test.skip(isMobile, 'Mobile sprint flow coverage is currently limited.')
+  })
+
+  test('user can open workspace and create a new canvas', async ({ page }) => {
+    await loginViaSessionStorage(page, '/')
+
+    await expect(page.getByText('Coliee AI').first()).toBeVisible()
+    const newCanvasButton = page.getByRole('button', { name: /New Canvas|Creating Canvas/ })
+    await expect(newCanvasButton).toBeVisible()
+    await newCanvasButton.click()
+
+    await expect(page.getByRole('button', { name: /New Canvas|Creating Canvas/ })).toBeVisible()
+  })
+
+  test('branch and note actions are available in node workspace', async ({ page }) => {
+    await loginViaSessionStorage(page, '/')
+
+    await expect(page.locator('[title="Add question node"]').first()).toBeVisible({ timeout: 15000 })
+    await expect(page.locator('[title="Auto-generate note"]').first()).toBeVisible()
+  })
+
+  test('export options include PDF and text', async ({ page }) => {
+    await loginViaSessionStorage(page, '/')
+
+    const exportTrigger = page.locator('[title="Node export options"]').first()
+    await expect(exportTrigger).toBeVisible({ timeout: 15000 })
+    await exportTrigger.click({ force: true })
+
+    await expect(page.getByRole('button', { name: 'Export as PDF' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Export as Text' })).toBeVisible()
+  })
+
+  test('pdf export entry toggles node selection controls', async ({ page }) => {
+    await loginViaSessionStorage(page, '/')
+
+    const exportTrigger = page.locator('[title="Node export options"]').first()
+    await expect(exportTrigger).toBeVisible({ timeout: 15000 })
+    await exportTrigger.click({ force: true })
+    await page.getByRole('button', { name: 'Export as PDF' }).click()
+
+    await expect(page.getByText('Select node').first()).toBeVisible()
+  })
+
+  test('branching and note creation interaction preview', async ({ page }) => {
+    await loginViaSessionStorage(page, '/')
+
+    const chatInput = page.getByPlaceholder('Continue your thought...').first()
+    await expect(chatInput).toBeVisible({ timeout: 15000 })
+    await chatInput.fill('Create a short idea so I can branch from it.')
+    await page.keyboard.press('Enter')
+
+    // Give headed preview runs enough time to visually show response activity.
+    await page.waitForTimeout(2500)
+
+    const branchButton = page.locator('[title="Branch"]').first()
+    if (await branchButton.count())
+      await branchButton.click({ force: true })
+    else
+      await page.locator('[title="Add question node"]').first().click({ force: true })
+
+    await page.waitForTimeout(1200)
+
+    const createNoteButton = page.locator('[title="Add note node"]').first()
+    await expect(createNoteButton).toBeVisible()
+    await createNoteButton.click({ force: true })
+  })
+})