diff --git a/tools/server/public/index.html.gz b/tools/server/public/index.html.gz
index 05dfd9f17ac..bb01f2b1bce 100644
Binary files a/tools/server/public/index.html.gz and b/tools/server/public/index.html.gz differ
diff --git a/tools/server/server-models.cpp b/tools/server/server-models.cpp
index 57655476afa..f99819ba8c1 100644
--- a/tools/server/server-models.cpp
+++ b/tools/server/server-models.cpp
@@ -1000,11 +1000,20 @@ server_http_proxy::server_http_proxy(
         int32_t timeout_write
         ) {
     // shared between reader and writer threads
-    auto cli  = std::make_shared<httplib::Client>(host, port);
+    auto cli  = std::make_shared<httplib::ClientImpl>(host, port);
     auto pipe = std::make_shared<pipe_t<msg_t>>();
 
+    if (port == 443) {
+#ifdef CPPHTTPLIB_OPENSSL_SUPPORT
+        cli.reset(new httplib::SSLClient(host, port));
+#else
+        throw std::runtime_error("HTTPS requested but CPPHTTPLIB_OPENSSL_SUPPORT is not defined");
+#endif
+    }
+
     // setup Client
-    cli->set_connection_timeout(0, 200000); // 200 milliseconds
+    cli->set_follow_location(true);
+    cli->set_connection_timeout(5, 0); // 5 seconds
     cli->set_write_timeout(timeout_read, 0); // reversed for cli (client) vs srv (server)
     cli->set_read_timeout(timeout_write, 0);
     this->status = 500; // to be overwritten upon response
@@ -1053,7 +1062,15 @@ server_http_proxy::server_http_proxy(
         req.method = method;
         req.path = path;
         for (const auto & [key, value] : headers) {
-            req.set_header(key, value);
+            if (key == "Accept-Encoding") {
+                // disable Accept-Encoding to avoid compressed responses
+                continue;
+            }
+            if (key == "Host" || key == "host") {
+                req.set_header(key, host);
+            } else {
+                req.set_header(key, value);
+            }
         }
         req.body = body;
         req.response_handler = response_handler;
diff --git a/tools/server/server-models.h b/tools/server/server-models.h
index a397abda4a8..7ffd6bef5c3 100644
--- a/tools/server/server-models.h
+++ b/tools/server/server-models.h
@@ -2,6 +2,7 @@
 
 #include "common.h"
 #include "preset.h"
+#include "http.h"
 #include "server-common.h"
 #include "server-http.h"
 
@@ -184,8 +185,8 @@ struct server_http_proxy : server_http_res {
                       const std::map<std::string, std::string> & headers,
                       const std::string & body,
                       const std::function<bool()> should_stop,
-                      int32_t timeout_read,
-                      int32_t timeout_write
+                      int32_t timeout_read = 600,
+                      int32_t timeout_write = 600
                       );
     ~server_http_proxy() {
         if (cleanup) {
@@ -201,3 +202,48 @@ struct server_http_proxy : server_http_res {
         std::string content_type;
     };
 };
+
+// BELOW IS DEMO CODE FOR PROXY HANDLERS
+// DO NOT MERGE IT AS-IS
+
+static server_http_res_ptr proxy_request(const server_http_req & req, std::string method) {
+    std::string target_url = req.get_param("url");
+    common_http_url parsed_url = common_http_parse_url(target_url);
+
+    if (parsed_url.host.empty()) {
+        throw std::runtime_error("invalid target URL: missing host");
+    }
+
+    if (parsed_url.path.empty()) {
+        parsed_url.path = "/";
+    }
+
+    if (!parsed_url.password.empty()) {
+        throw std::runtime_error("authentication in target URL is not supported");
+    }
+
+    if (parsed_url.scheme != "http" && parsed_url.scheme != "https") {
+        throw std::runtime_error("unsupported URL scheme in target URL: " + parsed_url.scheme);
+    }
+
+    SRV_INF("proxying %s request to %s://%s%s\n", method.c_str(), parsed_url.scheme.c_str(), parsed_url.host.c_str(), parsed_url.path.c_str());
+
+    auto proxy = std::make_unique<server_http_proxy>(
+            method,
+            parsed_url.host,
+            parsed_url.scheme == "http" ? 80 : 443,
+            parsed_url.path,
+            req.headers,
+            req.body,
+            req.should_stop);
+
+    return proxy;
+}
+
+static server_http_context::handler_t proxy_handler_post = [](const server_http_req & req) -> server_http_res_ptr {
+    return proxy_request(req, "POST");
+};
+
+static server_http_context::handler_t proxy_handler_get = [](const server_http_req & req) -> server_http_res_ptr {
+    return proxy_request(req, "GET");
+};
diff --git a/tools/server/server.cpp b/tools/server/server.cpp
index d3d4316026a..44ffe75e054 100644
--- a/tools/server/server.cpp
+++ b/tools/server/server.cpp
@@ -197,6 +197,9 @@ int main(int argc, char ** argv) {
     // Save & load slots
     ctx_http.get ("/slots",               ex_wrapper(routes.get_slots));
     ctx_http.post("/slots/:id_slot",      ex_wrapper(routes.post_slots));
+    // CORS proxy
+    ctx_http.get ("/cors-proxy",          ex_wrapper(proxy_handler_get));
+    ctx_http.post("/cors-proxy",          ex_wrapper(proxy_handler_post));
 
     //
     // Start the server
diff --git a/tools/server/webui/docs/architecture/high-level-architecture-simplified.md b/tools/server/webui/docs/architecture/high-level-architecture-simplified.md
index a6cb1e9c394..500f477c9a4 100644
--- a/tools/server/webui/docs/architecture/high-level-architecture-simplified.md
+++ b/tools/server/webui/docs/architecture/high-level-architecture-simplified.md
@@ -12,9 +12,13 @@ flowchart TB
         C_Form["ChatForm"]
         C_Messages["ChatMessages"]
         C_Message["ChatMessage"]
+        C_ChatMessageAgenticContent["ChatMessageAgenticContent"]
         C_MessageEditForm["ChatMessageEditForm"]
         C_ModelsSelector["ModelsSelector"]
         C_Settings["ChatSettings"]
+        C_McpSettings["McpServersSettings"]
+        C_McpResourceBrowser["McpResourceBrowser"]
+        C_McpServersSelector["McpServersSelector"]
     end
 
     subgraph Hooks["🪝 Hooks"]
@@ -24,10 +28,13 @@ flowchart TB
 
     subgraph Stores["🗄️ Stores"]
         S1["chatStore<br/><i>Chat interactions & streaming</i>"]
-        S2["conversationsStore<br/><i>Conversation data & messages</i>"]
+        SA["agenticStore<br/><i>Multi-turn agentic loop orchestration</i>"]
+        S2["conversationsStore<br/><i>Conversation data, messages & MCP overrides</i>"]
         S3["modelsStore<br/><i>Model selection & loading</i>"]
         S4["serverStore<br/><i>Server props & role detection</i>"]
-        S5["settingsStore<br/><i>User configuration</i>"]
+        S5["settingsStore<br/><i>User configuration incl. MCP</i>"]
+        S6["mcpStore<br/><i>MCP servers, tools, prompts</i>"]
+        S7["mcpResourceStore<br/><i>MCP resources & attachments</i>"]
     end
 
     subgraph Services["⚙️ Services"]
@@ -36,11 +43,12 @@ flowchart TB
         SV3["PropsService"]
         SV4["DatabaseService"]
         SV5["ParameterSyncService"]
+        SV6["MCPService<br/><i>protocol operations</i>"]
     end
 
     subgraph Storage["💾 Storage"]
         ST1["IndexedDB<br/><i>conversations, messages</i>"]
-        ST2["LocalStorage<br/><i>config, userOverrides</i>"]
+        ST2["LocalStorage<br/><i>config, userOverrides, mcpServers</i>"]
     end
 
     subgraph APIs["🌐 llama-server API"]
@@ -50,15 +58,27 @@ flowchart TB
         API4["/v1/models"]
     end
 
+    subgraph ExternalMCP["🔌 External MCP Servers"]
+        EXT1["MCP Server 1<br/><i>WebSocket/HTTP/SSE</i>"]
+        EXT2["MCP Server N"]
+    end
+
     %% Routes → Components
     R1 & R2 --> C_Screen
     RL --> C_Sidebar
 
+    %% Layout runs MCP health checks
+    RL --> S6
+
     %% Component hierarchy
     C_Screen --> C_Form & C_Messages & C_Settings
     C_Messages --> C_Message
+    C_Message --> C_ChatMessageAgenticContent
     C_Message --> C_MessageEditForm
     C_Form & C_MessageEditForm --> C_ModelsSelector
+    C_Form --> C_McpServersSelector
+    C_Settings --> C_McpSettings
+    C_McpSettings --> C_McpResourceBrowser
 
     %% Components → Hooks → Stores
     C_Form & C_Messages --> H1 & H2
@@ -70,6 +90,15 @@ flowchart TB
     C_Sidebar --> S2
     C_ModelsSelector --> S3 & S4
     C_Settings --> S5
+    C_McpSettings --> S6
+    C_McpResourceBrowser --> S6 & S7
+    C_McpServersSelector --> S6
+    C_Form --> S6
+
+    %% chatStore → agenticStore → mcpStore (agentic loop)
+    S1 --> SA
+    SA --> SV1
+    SA --> S6
 
     %% Stores → Services
     S1 --> SV1 & SV4
@@ -77,6 +106,8 @@ flowchart TB
     S3 --> SV2 & SV3
     S4 --> SV3
     S5 --> SV5
+    S6 --> SV6
+    S7 --> SV6
 
     %% Services → Storage
     SV4 --> ST1
@@ -87,6 +118,9 @@ flowchart TB
     SV2 --> API3 & API4
     SV3 --> API2
 
+    %% MCP → External Servers
+    SV6 --> EXT1 & EXT2
+
     %% Styling
     classDef routeStyle fill:#e1f5fe,stroke:#01579b,stroke-width:2px
     classDef componentStyle fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
@@ -95,12 +129,17 @@ flowchart TB
     classDef serviceStyle fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px
     classDef storageStyle fill:#fce4ec,stroke:#c2185b,stroke-width:2px
     classDef apiStyle fill:#e3f2fd,stroke:#1565c0,stroke-width:2px
+    classDef mcpStyle fill:#e0f2f1,stroke:#00695c,stroke-width:2px
+    classDef agenticStyle fill:#e8eaf6,stroke:#283593,stroke-width:2px
+    classDef externalStyle fill:#f3e5f5,stroke:#6a1b9a,stroke-width:2px,stroke-dasharray: 5 5
 
     class R1,R2,RL routeStyle
-    class C_Sidebar,C_Screen,C_Form,C_Messages,C_Message,C_MessageEditForm,C_ModelsSelector,C_Settings componentStyle
+    class C_Sidebar,C_Screen,C_Form,C_Messages,C_Message,C_ChatMessageAgenticContent,C_MessageEditForm,C_ModelsSelector,C_Settings componentStyle
+    class C_McpSettings,C_McpResourceBrowser,C_McpServersSelector componentStyle
     class H1,H2 hookStyle
-    class S1,S2,S3,S4,S5 storeStyle
-    class SV1,SV2,SV3,SV4,SV5 serviceStyle
+    class S1,S2,S3,S4,S5,SA,S6,S7 storeStyle
+    class SV1,SV2,SV3,SV4,SV5,SV6 serviceStyle
     class ST1,ST2 storageStyle
     class API1,API2,API3,API4 apiStyle
+    class EXT1,EXT2 externalStyle
 ```
diff --git a/tools/server/webui/docs/architecture/high-level-architecture.md b/tools/server/webui/docs/architecture/high-level-architecture.md
index c5ec4d69095..42ddb3f4f5b 100644
--- a/tools/server/webui/docs/architecture/high-level-architecture.md
+++ b/tools/server/webui/docs/architecture/high-level-architecture.md
@@ -22,6 +22,13 @@ end
             C_ModelsSelector["ModelsSelector"]
             C_Settings["ChatSettings"]
         end
+        subgraph MCPComponents["MCP UI"]
+            C_McpSettings["McpServersSettings"]
+            C_McpServerCard["McpServerCard"]
+            C_McpResourceBrowser["McpResourceBrowser"]
+            C_McpResourcePreview["McpResourcePreview"]
+            C_McpServersSelector["McpServersSelector"]
+        end
     end
 
     subgraph Hooks["🪝 Hooks"]
@@ -43,14 +50,20 @@ end
             S1Edit["<b>Editing:</b><br/>editAssistantMessage()<br/>editUserMessagePreserveResponses()<br/>editMessageWithBranching()<br/>clearEditMode()<br/>isEditModeActive()<br/>getAddFilesHandler()<br/>setEditModeActive()"]
             S1Utils["<b>Utilities:</b><br/>getApiOptions()<br/>parseTimingData()<br/>getOrCreateAbortController()<br/>getConversationModel()"]
         end
+        subgraph SA["agenticStore"]
+            SAState["<b>State:</b><br/>sessions (Map)<br/>isAnyRunning"]
+            SASession["<b>Session Management:</b><br/>getSession()<br/>updateSession()<br/>clearSession()<br/>getActiveSessions()<br/>isRunning()<br/>currentTurn()<br/>totalToolCalls()<br/>lastError()<br/>streamingToolCall()"]
+            SAConfig["<b>Configuration:</b><br/>getConfig()<br/>maxTurns, maxToolPreviewLines"]
+            SAFlow["<b>Agentic Loop:</b><br/>runAgenticFlow()<br/>executeAgenticLoop()<br/>normalizeToolCalls()<br/>emitToolCallResult()<br/>extractBase64Attachments()"]
+        end
         subgraph S2["conversationsStore"]
-            S2State["<b>State:</b><br/>conversations<br/>activeConversation<br/>activeMessages<br/>usedModalities<br/>isInitialized<br/>titleUpdateConfirmationCallback"]
-            S2Modal["<b>Modalities:</b><br/>getModalitiesUpToMessage()<br/>calculateModalitiesFromMessages()"]
+            S2State["<b>State:</b><br/>conversations<br/>activeConversation<br/>activeMessages<br/>isInitialized<br/>pendingMcpServerOverrides<br/>titleUpdateConfirmationCallback"]
             S2Lifecycle["<b>Lifecycle:</b><br/>initialize()<br/>loadConversations()<br/>clearActiveConversation()"]
-            S2ConvCRUD["<b>Conversation CRUD:</b><br/>createConversation()<br/>loadConversation()<br/>deleteConversation()<br/>updateConversationName()<br/>updateConversationTitleWithConfirmation()"]
+            S2ConvCRUD["<b>Conversation CRUD:</b><br/>createConversation()<br/>loadConversation()<br/>deleteConversation()<br/>deleteAll()<br/>updateConversationName()<br/>updateConversationTitleWithConfirmation()"]
             S2MsgMgmt["<b>Message Management:</b><br/>refreshActiveMessages()<br/>addMessageToActive()<br/>updateMessageAtIndex()<br/>findMessageIndex()<br/>sliceActiveMessages()<br/>removeMessageAtIndex()<br/>getConversationMessages()"]
             S2Nav["<b>Navigation:</b><br/>navigateToSibling()<br/>updateCurrentNode()<br/>updateConversationTimestamp()"]
-            S2Export["<b>Import/Export:</b><br/>downloadConversation()<br/>exportAllConversations()<br/>importConversations()<br/>triggerDownload()"]
+            S2McpOverrides["<b>MCP Per-Chat Overrides:</b><br/>getMcpServerOverride()<br/>getAllMcpServerOverrides()<br/>setMcpServerOverride()<br/>toggleMcpServerForChat()<br/>removeMcpServerOverride()<br/>isMcpServerEnabledForChat()<br/>clearPendingMcpServerOverrides()"]
+            S2Export["<b>Import/Export:</b><br/>downloadConversation()<br/>exportAllConversations()<br/>importConversations()<br/>importConversationsData()<br/>triggerDownload()"]
             S2Utils["<b>Utilities:</b><br/>setTitleUpdateConfirmationCallback()"]
         end
         subgraph S3["modelsStore"]
@@ -77,6 +90,21 @@ end
             S5Sync["<b>Server Sync:</b><br/>syncWithServerDefaults()<br/>forceSyncWithServerDefaults()"]
             S5Utils["<b>Utilities:</b><br/>getConfig()<br/>getAllConfig()<br/>getParameterInfo()<br/>getParameterDiff()<br/>getServerDefaults()<br/>clearAllUserOverrides()"]
         end
+        subgraph S6["mcpStore"]
+            S6State["<b>State:</b><br/>isInitializing, error<br/>toolCount, connectedServers<br/>healthChecks (Map)<br/>connections (Map)<br/>toolsIndex (Map)"]
+            S6Lifecycle["<b>Lifecycle:</b><br/>ensureInitialized()<br/>initialize()<br/>shutdown()<br/>acquireConnection()<br/>releaseConnection()"]
+            S6Health["<b>Health Checks:</b><br/>runHealthCheck()<br/>runHealthChecksForServers()<br/>updateHealthCheck()<br/>getHealthCheckState()<br/>clearHealthCheck()"]
+            S6Servers["<b>Server Management:</b><br/>getServers()<br/>addServer()<br/>updateServer()<br/>removeServer()<br/>getServerById()<br/>getServerDisplayName()"]
+            S6Tools["<b>Tool Operations:</b><br/>getToolDefinitionsForLLM()<br/>getToolNames()<br/>hasTool()<br/>getToolServer()<br/>executeTool()<br/>executeToolByName()"]
+            S6Prompts["<b>Prompt Operations:</b><br/>getAllPrompts()<br/>getPrompt()<br/>hasPromptsCapability()<br/>getPromptCompletions()"]
+        end
+        subgraph S7["mcpResourceStore"]
+            S7State["<b>State:</b><br/>serverResources (Map)<br/>cachedResources (Map)<br/>subscriptions (Map)<br/>attachments[]<br/>isLoading"]
+            S7Resources["<b>Resource Discovery:</b><br/>setServerResources()<br/>getServerResources()<br/>getAllResourceInfos()<br/>getAllTemplateInfos()<br/>clearServerResources()"]
+            S7Cache["<b>Caching:</b><br/>cacheResourceContent()<br/>getCachedContent()<br/>invalidateCache()<br/>clearCache()"]
+            S7Subs["<b>Subscriptions:</b><br/>addSubscription()<br/>removeSubscription()<br/>isSubscribed()<br/>handleResourceUpdate()"]
+            S7Attach["<b>Attachments:</b><br/>addAttachment()<br/>updateAttachmentContent()<br/>removeAttachment()<br/>clearAttachments()<br/>toMessageExtras()"]
+        end
 
         subgraph ReactiveExports["⚡ Reactive Exports"]
             direction LR
@@ -95,12 +123,19 @@ end
                 RE9c["setEditModeActive()"]
                 RE9d["clearEditMode()"]
             end
+            subgraph AgenticExports["agenticStore"]
+                REA1["agenticIsRunning()"]
+                REA2["agenticCurrentTurn()"]
+                REA3["agenticTotalToolCalls()"]
+                REA4["agenticLastError()"]
+                REA5["agenticStreamingToolCall()"]
+                REA6["agenticIsAnyRunning()"]
+            end
             subgraph ConvExports["conversationsStore"]
                 RE10["conversations()"]
                 RE11["activeConversation()"]
                 RE12["activeMessages()"]
                 RE13["isConversationsInitialized()"]
-                RE14["usedModalities()"]
             end
             subgraph ModelsExports["modelsStore"]
                 RE15["modelOptions()"]
@@ -131,6 +166,13 @@ end
                 RE36["theme()"]
                 RE37["isInitialized()"]
             end
+            subgraph MCPExports["mcpStore / mcpResourceStore"]
+                RE38["mcpResources()"]
+                RE39["mcpResourceAttachments()"]
+                RE40["mcpHasResourceAttachments()"]
+                RE41["mcpTotalResourceCount()"]
+                RE42["mcpResourcesLoading()"]
+            end
         end
     end
 
@@ -138,9 +180,9 @@ end
         direction TB
         subgraph SV1["ChatService"]
             SV1Msg["<b>Messaging:</b><br/>sendMessage()"]
-            SV1Stream["<b>Streaming:</b><br/>handleStreamResponse()<br/>parseSSEChunk()"]
-            SV1Convert["<b>Conversion:</b><br/>convertMessageToChatData()<br/>convertExtraToApiFormat()"]
-            SV1Utils["<b>Utilities:</b><br/>extractReasoningContent()<br/>getServerProps()<br/>getModels()"]
+            SV1Stream["<b>Streaming:</b><br/>handleStreamResponse()<br/>handleNonStreamResponse()"]
+            SV1Convert["<b>Conversion:</b><br/>convertDbMessageToApiChatMessageData()<br/>mergeToolCallDeltas()"]
+            SV1Utils["<b>Utilities:</b><br/>stripReasoningContent()<br/>extractModelName()<br/>parseErrorResponse()"]
         end
         subgraph SV2["ModelsService"]
             SV2List["<b>Listing:</b><br/>list()<br/>listRouter()"]
@@ -152,7 +194,7 @@ end
         end
         subgraph SV4["DatabaseService"]
             SV4Conv["<b>Conversations:</b><br/>createConversation()<br/>getConversation()<br/>getAllConversations()<br/>updateConversation()<br/>deleteConversation()"]
-            SV4Msg["<b>Messages:</b><br/>createMessageBranch()<br/>createRootMessage()<br/>getConversationMessages()<br/>updateMessage()<br/>deleteMessage()<br/>deleteMessageCascading()"]
+            SV4Msg["<b>Messages:</b><br/>createMessageBranch()<br/>createRootMessage()<br/>createSystemMessage()<br/>getConversationMessages()<br/>updateMessage()<br/>deleteMessage()<br/>deleteMessageCascading()"]
             SV4Node["<b>Navigation:</b><br/>updateCurrentNode()"]
             SV4Import["<b>Import:</b><br/>importConversations()"]
         end
@@ -162,6 +204,19 @@ end
             SV5Info["<b>Info:</b><br/>getParameterInfo()<br/>canSyncParameter()<br/>getSyncableParameterKeys()<br/>validateServerParameter()"]
             SV5Diff["<b>Diff:</b><br/>createParameterDiff()"]
         end
+        subgraph SV6["MCPService"]
+            SV6Transport["<b>Transport:</b><br/>createTransport()<br/>WebSocket / StreamableHTTP / SSE"]
+            SV6Conn["<b>Connection:</b><br/>connect()<br/>disconnect()"]
+            SV6Tools["<b>Tools:</b><br/>listTools()<br/>callTool()"]
+            SV6Prompts["<b>Prompts:</b><br/>listPrompts()<br/>getPrompt()"]
+            SV6Resources["<b>Resources:</b><br/>listResources()<br/>listResourceTemplates()<br/>readResource()<br/>subscribeResource()<br/>unsubscribeResource()"]
+            SV6Complete["<b>Completions:</b><br/>complete()"]
+        end
+    end
+
+    subgraph ExternalMCP["🔌 External MCP Servers"]
+        EXT1["MCP Server 1<br/>(WebSocket/StreamableHTTP/SSE)"]
+        EXT2["MCP Server N"]
     end
 
     subgraph Storage["💾 Storage"]
@@ -171,6 +226,7 @@ end
         ST5["LocalStorage"]
         ST6["config"]
         ST7["userOverrides"]
+        ST8["mcpServers"]
     end
 
     subgraph APIs["🌐 llama-server API"]
@@ -185,6 +241,9 @@ end
     R2 --> C_Screen
     RL --> C_Sidebar
 
+    %% Layout runs MCP health checks on startup
+    RL --> S6
+
     %% Component hierarchy
     C_Screen --> C_Form & C_Messages & C_Settings
     C_Messages --> C_Message
@@ -194,8 +253,15 @@ end
     C_MessageEditForm --> C_Attach
     C_Form --> C_ModelsSelector
     C_Form --> C_Attach
+    C_Form --> C_McpServersSelector
     C_Message --> C_Attach
 
+    %% MCP Components hierarchy
+    C_Settings --> C_McpSettings
+    C_McpSettings --> C_McpServerCard
+    C_McpServerCard --> C_McpResourceBrowser
+    C_McpResourceBrowser --> C_McpResourcePreview
+
     %% Components use Hooks
     C_Form --> H1
     C_Message --> H1 & H2
@@ -210,17 +276,29 @@ end
     C_Screen --> S1 & S2
     C_Messages --> S2
     C_Message --> S1 & S2 & S3
-    C_Form --> S1 & S3
+    C_Form --> S1 & S3 & S6
     C_Sidebar --> S2
     C_ModelsSelector --> S3 & S4
     C_Settings --> S5
+    C_McpSettings --> S6
+    C_McpServerCard --> S6
+    C_McpResourceBrowser --> S6 & S7
+    C_McpServersSelector --> S6
 
     %% Stores export Reactive State
     S1 -. exports .-> ChatExports
+    SA -. exports .-> AgenticExports
     S2 -. exports .-> ConvExports
     S3 -. exports .-> ModelsExports
     S4 -. exports .-> ServerExports
     S5 -. exports .-> SettingsExports
+    S6 -. exports .-> MCPExports
+    S7 -. exports .-> MCPExports
+
+    %% chatStore → agenticStore (agentic loop orchestration)
+    S1 --> SA
+    SA --> SV1
+    SA --> S6
 
     %% Stores use Services
     S1 --> SV1 & SV4
@@ -228,28 +306,35 @@ end
     S3 --> SV2 & SV3
     S4 --> SV3
     S5 --> SV5
+    S6 --> SV6
+    S7 --> SV6
 
     %% Services to Storage
     SV4 --> ST1
     ST1 --> ST2 & ST3
     SV5 --> ST5
-    ST5 --> ST6 & ST7
+    ST5 --> ST6 & ST7 & ST8
 
     %% Services to APIs
     SV1 --> API1
     SV2 --> API3 & API4
     SV3 --> API2
 
+    %% MCP → External Servers
+    SV6 --> EXT1 & EXT2
+
     %% Styling
     classDef routeStyle fill:#e1f5fe,stroke:#01579b,stroke-width:2px
     classDef componentStyle fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
     classDef componentGroupStyle fill:#e1bee7,stroke:#7b1fa2,stroke-width:1px
+    classDef hookStyle fill:#fff8e1,stroke:#ff8f00,stroke-width:2px
     classDef storeStyle fill:#fff3e0,stroke:#e65100,stroke-width:2px
     classDef stateStyle fill:#ffe0b2,stroke:#e65100,stroke-width:1px
     classDef methodStyle fill:#ffecb3,stroke:#e65100,stroke-width:1px
     classDef reactiveStyle fill:#fffde7,stroke:#f9a825,stroke-width:1px
     classDef serviceStyle fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px
     classDef serviceMStyle fill:#c8e6c9,stroke:#2e7d32,stroke-width:1px
+    classDef externalStyle fill:#f3e5f5,stroke:#6a1b9a,stroke-width:2px,stroke-dasharray: 5 5
     classDef storageStyle fill:#fce4ec,stroke:#c2185b,stroke-width:2px
     classDef apiStyle fill:#e3f2fd,stroke:#1565c0,stroke-width:2px
 
@@ -257,23 +342,32 @@ end
     class C_Sidebar,C_Screen,C_Form,C_Messages,C_Message,C_MessageUser,C_MessageEditForm componentStyle
     class C_ModelsSelector,C_Settings componentStyle
     class C_Attach componentStyle
-    class H1,H2,H3 methodStyle
-    class LayoutComponents,ChatUIComponents componentGroupStyle
-    class Hooks storeStyle
-    class S1,S2,S3,S4,S5 storeStyle
-    class S1State,S2State,S3State,S4State,S5State stateStyle
+    class C_McpSettings,C_McpServerCard,C_McpResourceBrowser,C_McpResourcePreview,C_McpServersSelector componentStyle
+    class H1,H2,H3 hookStyle
+    class LayoutComponents,ChatUIComponents,MCPComponents componentGroupStyle
+    class Hooks hookStyle
+    classDef agenticStyle fill:#e8eaf6,stroke:#283593,stroke-width:2px
+    classDef agenticMethodStyle fill:#c5cae9,stroke:#283593,stroke-width:1px
+
+    class S1,S2,S3,S4,S5,SA,S6,S7 storeStyle
+    class S1State,S2State,S3State,S4State,S5State,SAState,S6State,S7State stateStyle
     class S1Msg,S1Regen,S1Edit,S1Stream,S1LoadState,S1ProcState,S1Error,S1Utils methodStyle
-    class S2Lifecycle,S2ConvCRUD,S2MsgMgmt,S2Nav,S2Modal,S2Export,S2Utils methodStyle
+    class SASession,SAConfig,SAFlow methodStyle
+    class S2Lifecycle,S2ConvCRUD,S2MsgMgmt,S2Nav,S2McpOverrides,S2Export,S2Utils methodStyle
     class S3Getters,S3Modal,S3Status,S3Fetch,S3Select,S3LoadUnload,S3Utils methodStyle
     class S4Getters,S4Data,S4Utils methodStyle
     class S5Lifecycle,S5Update,S5Reset,S5Sync,S5Utils methodStyle
-    class ChatExports,ConvExports,ModelsExports,ServerExports,SettingsExports reactiveStyle
-    class SV1,SV2,SV3,SV4,SV5 serviceStyle
+    class S6Lifecycle,S6Health,S6Servers,S6Tools,S6Prompts methodStyle
+    class S7Resources,S7Cache,S7Subs,S7Attach methodStyle
+    class ChatExports,AgenticExports,ConvExports,ModelsExports,ServerExports,SettingsExports,MCPExports reactiveStyle
+    class SV1,SV2,SV3,SV4,SV5,SV6 serviceStyle
+    class SV6Transport,SV6Conn,SV6Tools,SV6Prompts,SV6Resources,SV6Complete serviceMStyle
+    class EXT1,EXT2 externalStyle
     class SV1Msg,SV1Stream,SV1Convert,SV1Utils serviceMStyle
     class SV2List,SV2LoadUnload,SV2Status serviceMStyle
     class SV3Fetch serviceMStyle
     class SV4Conv,SV4Msg,SV4Node,SV4Import serviceMStyle
     class SV5Extract,SV5Merge,SV5Info,SV5Diff serviceMStyle
-    class ST1,ST2,ST3,ST5,ST6,ST7 storageStyle
+    class ST1,ST2,ST3,ST5,ST6,ST7,ST8 storageStyle
     class API1,API2,API3,API4 apiStyle
 ```
diff --git a/tools/server/webui/docs/flows/chat-flow.md b/tools/server/webui/docs/flows/chat-flow.md
index 05e1df385a7..296693c6a54 100644
--- a/tools/server/webui/docs/flows/chat-flow.md
+++ b/tools/server/webui/docs/flows/chat-flow.md
@@ -2,8 +2,10 @@
 sequenceDiagram
     participant UI as 🧩 ChatForm / ChatMessage
     participant chatStore as 🗄️ chatStore
+    participant agenticStore as 🗄️ agenticStore
     participant convStore as 🗄️ conversationsStore
     participant settingsStore as 🗄️ settingsStore
+    participant mcpStore as 🗄️ mcpStore
     participant ChatSvc as ⚙️ ChatService
     participant DbSvc as ⚙️ DatabaseService
     participant API as 🌐 /v1/chat/completions
@@ -25,6 +27,9 @@ sequenceDiagram
         Note over convStore: → see conversations-flow.mmd
     end
 
+    chatStore->>mcpStore: consumeResourceAttachmentsAsExtras()
+    Note right of mcpStore: Converts pending MCP resource<br/>attachments into message extras
+
     chatStore->>chatStore: addMessage("user", content, extras)
     chatStore->>DbSvc: createMessageBranch(userMsg, parentId)
     chatStore->>convStore: addMessageToActive(userMsg)
@@ -38,7 +43,7 @@ sequenceDiagram
     deactivate chatStore
 
     %% ═══════════════════════════════════════════════════════════════════════════
-    Note over UI,API: 🌊 STREAMING
+    Note over UI,API: 🌊 STREAMING (with agentic flow detection)
     %% ═══════════════════════════════════════════════════════════════════════════
 
     activate chatStore
@@ -52,10 +57,17 @@ sequenceDiagram
     chatStore->>chatStore: getApiOptions()
     Note right of chatStore: Merge from settingsStore.config:<br/>temperature, max_tokens, top_p, etc.
 
-    chatStore->>ChatSvc: sendMessage(messages, options, signal)
+    alt agenticConfig.enabled && mcpStore has connected servers
+        chatStore->>agenticStore: runAgenticFlow(convId, messages, assistantMsg, options, signal)
+        Note over agenticStore: Multi-turn agentic loop:<br/>1. Call ChatService.sendMessage()<br/>2. If response has tool_calls → execute via mcpStore<br/>3. Append tool results as messages<br/>4. Loop until no more tool_calls or maxTurns<br/>→ see agentic flow details below
+        agenticStore-->>chatStore: final response with timings
+    else standard (non-agentic) flow
+        chatStore->>ChatSvc: sendMessage(messages, options, signal)
+    end
+
     activate ChatSvc
 
-    ChatSvc->>ChatSvc: convertMessageToChatData(messages)
+    ChatSvc->>ChatSvc: convertDbMessageToApiChatMessageData(messages)
     Note right of ChatSvc: DatabaseMessage[] → ApiChatMessageData[]<br/>Process attachments (images, PDFs, audio)
 
     ChatSvc->>API: POST /v1/chat/completions
@@ -63,7 +75,7 @@ sequenceDiagram
 
     loop SSE chunks
         API-->>ChatSvc: data: {"choices":[{"delta":{...}}]}
-        ChatSvc->>ChatSvc: parseSSEChunk(line)
+        ChatSvc->>ChatSvc: handleStreamResponse(response)
 
         alt content chunk
             ChatSvc-->>chatStore: onChunk(content)
@@ -154,12 +166,15 @@ sequenceDiagram
     Note over UI,API: ✏️ EDIT USER MESSAGE
     %% ═══════════════════════════════════════════════════════════════════════════
 
-    UI->>chatStore: editUserMessagePreserveResponses(msgId, newContent)
+    UI->>chatStore: editMessageWithBranching(msgId, newContent, extras)
     activate chatStore
     chatStore->>chatStore: Get parent of target message
     chatStore->>DbSvc: createMessageBranch(editedMsg, parentId)
     chatStore->>convStore: refreshActiveMessages()
     Note right of chatStore: Creates new branch, original preserved
+    chatStore->>chatStore: createAssistantMessage(editedMsg.id)
+    chatStore->>chatStore: streamChatCompletion(...)
+    Note right of chatStore: Automatically regenerates response
     deactivate chatStore
 
     %% ═══════════════════════════════════════════════════════════════════════════
@@ -171,4 +186,43 @@ sequenceDiagram
     Note right of chatStore: errorDialogState = {type: 'timeout'|'server', message}
     chatStore->>convStore: removeMessageAtIndex(failedMsgIdx)
     chatStore->>DbSvc: deleteMessage(failedMsgId)
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,API: 🤖 AGENTIC LOOP (when agenticConfig.enabled)
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    Note over agenticStore: agenticStore.runAgenticFlow(convId, messages, assistantMsg, options, signal)
+    activate agenticStore
+    agenticStore->>agenticStore: getSession(convId) or create new
+    agenticStore->>agenticStore: updateSession(turn: 0, running: true)
+
+    loop executeAgenticLoop (until no tool_calls or maxTurns)
+        agenticStore->>agenticStore: turn++
+        agenticStore->>ChatSvc: sendMessage(messages, options, signal)
+        ChatSvc->>API: POST /v1/chat/completions
+        API-->>ChatSvc: response with potential tool_calls
+        ChatSvc-->>agenticStore: onComplete(content, reasoning, timings, toolCalls)
+
+        alt response has tool_calls
+            agenticStore->>agenticStore: normalizeToolCalls(toolCalls)
+            loop for each tool_call
+                agenticStore->>agenticStore: updateSession(streamingToolCall)
+                agenticStore->>mcpStore: executeTool(mcpCall, signal)
+                mcpStore-->>agenticStore: tool result
+                agenticStore->>agenticStore: extractBase64Attachments(result)
+                agenticStore->>agenticStore: emitToolCallResult(convId, ...)
+                agenticStore->>convStore: addMessageToActive(toolResultMsg)
+                agenticStore->>DbSvc: createMessageBranch(toolResultMsg)
+            end
+            agenticStore->>agenticStore: Create new assistantMsg for next turn
+            Note right of agenticStore: Continue loop with updated messages
+        else no tool_calls (final response)
+            agenticStore->>agenticStore: buildFinalTimings(allTurns)
+            Note right of agenticStore: Break loop, return final response
+        end
+    end
+
+    agenticStore->>agenticStore: updateSession(running: false)
+    agenticStore-->>chatStore: final content, timings, model
+    deactivate agenticStore
 ```
diff --git a/tools/server/webui/docs/flows/conversations-flow.md b/tools/server/webui/docs/flows/conversations-flow.md
index 185ed16e0cd..bd2309bc03e 100644
--- a/tools/server/webui/docs/flows/conversations-flow.md
+++ b/tools/server/webui/docs/flows/conversations-flow.md
@@ -6,7 +6,7 @@ sequenceDiagram
     participant DbSvc as ⚙️ DatabaseService
     participant IDB as 💾 IndexedDB
 
-    Note over convStore: State:<br/>conversations: DatabaseConversation[]<br/>activeConversation: DatabaseConversation | null<br/>activeMessages: DatabaseMessage[]<br/>isInitialized: boolean<br/>usedModalities: $derived({vision, audio})
+    Note over convStore: State:<br/>conversations: DatabaseConversation[]<br/>activeConversation: DatabaseConversation | null<br/>activeMessages: DatabaseMessage[]<br/>isInitialized: boolean<br/>pendingMcpServerOverrides: Map&lt;string, McpServerOverride&gt;
 
     %% ═══════════════════════════════════════════════════════════════════════════
     Note over UI,IDB: 🚀 INITIALIZATION
@@ -37,6 +37,13 @@ sequenceDiagram
     convStore->>convStore: conversations.unshift(conversation)
     convStore->>convStore: activeConversation = $state(conversation)
     convStore->>convStore: activeMessages = $state([])
+
+    alt pendingMcpServerOverrides has entries
+        loop each pending override
+            convStore->>DbSvc: Store MCP server override for new conversation
+        end
+        convStore->>convStore: clearPendingMcpServerOverrides()
+    end
     deactivate convStore
 
     %% ═══════════════════════════════════════════════════════════════════════════
@@ -58,8 +65,7 @@ sequenceDiagram
     Note right of convStore: Filter to show only current branch path
     convStore->>convStore: activeMessages = $state(filtered)
 
-    convStore->>chatStore: syncLoadingStateForChat(convId)
-    Note right of chatStore: Sync isLoading/currentResponse if streaming
+    Note right of convStore: Route (+page.svelte) then calls:<br/>chatStore.syncLoadingStateForChat(convId)
     deactivate convStore
 
     %% ═══════════════════════════════════════════════════════════════════════════
@@ -121,16 +127,36 @@ sequenceDiagram
     end
     deactivate convStore
 
+    UI->>convStore: deleteAll()
+    activate convStore
+    convStore->>DbSvc: Delete all conversations and messages
+    convStore->>convStore: conversations = []
+    convStore->>convStore: clearActiveConversation()
+    deactivate convStore
+
     %% ═══════════════════════════════════════════════════════════════════════════
-    Note over UI,IDB: 📊 MODALITY TRACKING
+    Note over UI,IDB: � MCP SERVER PER-CHAT OVERRIDES
     %% ═══════════════════════════════════════════════════════════════════════════
 
-    Note over convStore: usedModalities = $derived.by(() => {<br/>  calculateModalitiesFromMessages(activeMessages)<br/>})
+    Note over convStore: Conversations can override which MCP servers are enabled.
+    Note over convStore: Uses pendingMcpServerOverrides before conversation<br/>is created, then persists to conversation metadata.
+
+    UI->>convStore: setMcpServerOverride(convId, serverName, override)
+    Note right of convStore: override = {enabled: boolean}
+
+    UI->>convStore: toggleMcpServerForChat(convId, serverName, enabled)
+    activate convStore
+    convStore->>convStore: setMcpServerOverride(convId, serverName, {enabled})
+    deactivate convStore
+
+    UI->>convStore: isMcpServerEnabledForChat(convId, serverName)
+    Note right of convStore: Check override → fall back to global MCP config
 
-    Note over convStore: Scans activeMessages for attachments:<br/>- IMAGE → vision: true<br/>- PDF (processedAsImages) → vision: true<br/>- AUDIO → audio: true
+    UI->>convStore: getAllMcpServerOverrides(convId)
+    Note right of convStore: Returns all overrides for a conversation
 
-    UI->>convStore: getModalitiesUpToMessage(msgId)
-    Note right of convStore: Used for regeneration validation<br/>Only checks messages BEFORE target
+    UI->>convStore: removeMcpServerOverride(convId, serverName)
+    UI->>convStore: getMcpServerOverride(convId, serverName)
 
     %% ═══════════════════════════════════════════════════════════════════════════
     Note over UI,IDB: 📤 EXPORT / 📥 IMPORT
@@ -148,8 +174,10 @@ sequenceDiagram
     UI->>convStore: importConversations(file)
     activate convStore
     convStore->>convStore: Parse JSON file
+    convStore->>convStore: importConversationsData(parsed)
     convStore->>DbSvc: importConversations(parsed)
-    DbSvc->>IDB: Bulk INSERT conversations + messages
+    Note right of DbSvc: Skips duplicate conversations<br/>(checks existing by ID)
+    DbSvc->>IDB: INSERT conversations + messages (skip existing)
     convStore->>convStore: loadConversations()
     deactivate convStore
 ```
diff --git a/tools/server/webui/docs/flows/database-flow.md b/tools/server/webui/docs/flows/database-flow.md
index 50f8284e3c3..38cd6941cf7 100644
--- a/tools/server/webui/docs/flows/database-flow.md
+++ b/tools/server/webui/docs/flows/database-flow.md
@@ -66,6 +66,14 @@ sequenceDiagram
     DbSvc-->>Store: rootMessageId
     deactivate DbSvc
 
+    Store->>DbSvc: createSystemMessage(convId, content, parentId)
+    activate DbSvc
+    DbSvc->>DbSvc: Create message {role: "system", parent: parentId}
+    DbSvc->>Dexie: db.messages.add(systemMsg)
+    Dexie->>IDB: INSERT
+    DbSvc-->>Store: DatabaseMessage
+    deactivate DbSvc
+
     Store->>DbSvc: createMessageBranch(message, parentId)
     activate DbSvc
     DbSvc->>DbSvc: Generate UUID for new message
@@ -116,6 +124,13 @@ sequenceDiagram
     end
     DbSvc->>Dexie: db.messages.delete(msgId)
     Dexie->>IDB: DELETE target message
+
+    alt target message has a parent
+        DbSvc->>Dexie: db.messages.get(parentId)
+        DbSvc->>DbSvc: parent.children.filter(id !== msgId)
+        DbSvc->>Dexie: db.messages.update(parentId, {children})
+        Note right of DbSvc: Remove deleted message from parent's children[]
+    end
     deactivate DbSvc
 
     %% ═══════════════════════════════════════════════════════════════════════════
@@ -125,12 +140,16 @@ sequenceDiagram
     Store->>DbSvc: importConversations(data)
     activate DbSvc
     loop each conversation in data
-        DbSvc->>DbSvc: Generate new UUIDs (avoid conflicts)
-        DbSvc->>Dexie: db.conversations.add(conversation)
-        Dexie->>IDB: INSERT conversation
-        loop each message
-            DbSvc->>Dexie: db.messages.add(message)
-            Dexie->>IDB: INSERT message
+        DbSvc->>Dexie: db.conversations.get(conv.id)
+        alt conversation already exists
+            Note right of DbSvc: Skip duplicate (keep existing)
+        else conversation is new
+            DbSvc->>Dexie: db.conversations.add(conversation)
+            Dexie->>IDB: INSERT conversation
+            loop each message
+                DbSvc->>Dexie: db.messages.add(message)
+                Dexie->>IDB: INSERT message
+            end
         end
     end
     deactivate DbSvc
diff --git a/tools/server/webui/docs/flows/mcp-flow.md b/tools/server/webui/docs/flows/mcp-flow.md
new file mode 100644
index 00000000000..c8aa6665993
--- /dev/null
+++ b/tools/server/webui/docs/flows/mcp-flow.md
@@ -0,0 +1,226 @@
+```mermaid
+sequenceDiagram
+    participant UI as 🧩 McpServersSettings / ChatForm
+    participant chatStore as 🗄️ chatStore
+    participant mcpStore as 🗄️ mcpStore
+    participant mcpResStore as 🗄️ mcpResourceStore
+    participant convStore as 🗄️ conversationsStore
+    participant MCPSvc as ⚙️ MCPService
+    participant LS as 💾 LocalStorage
+    participant ExtMCP as 🔌 External MCP Server
+
+    Note over mcpStore: State:<br/>isInitializing, error<br/>toolCount, connectedServers<br/>healthChecks (Map)<br/>connections (Map)<br/>toolsIndex (Map)<br/>serverConfigs (Map)
+
+    Note over mcpResStore: State:<br/>serverResources (Map)<br/>cachedResources (Map)<br/>subscriptions (Map)<br/>attachments[]
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,ExtMCP: 🚀 INITIALIZATION (App Startup)
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>mcpStore: ensureInitialized()
+    activate mcpStore
+
+    mcpStore->>LS: get(MCP_SERVERS_LOCALSTORAGE_KEY)
+    LS-->>mcpStore: MCPServerSettingsEntry[]
+
+    mcpStore->>mcpStore: parseServerSettings(servers)
+    Note right of mcpStore: Filter enabled servers<br/>Build MCPServerConfig objects<br/>Per-chat overrides checked via convStore
+
+    loop For each enabled server
+        mcpStore->>mcpStore: runHealthCheck(serverId)
+        mcpStore->>mcpStore: updateHealthCheck(id, CONNECTING)
+
+        mcpStore->>MCPSvc: connect(serverName, config, clientInfo, capabilities, onPhase)
+        activate MCPSvc
+
+        MCPSvc->>MCPSvc: createTransport(config)
+        Note right of MCPSvc: WebSocket / StreamableHTTP / SSE<br/>with optional CORS proxy
+
+        MCPSvc->>ExtMCP: Transport handshake
+        ExtMCP-->>MCPSvc: Connection established
+
+        MCPSvc->>ExtMCP: Initialize request
+        Note right of ExtMCP: Exchange capabilities<br/>Server info, protocol version
+
+        ExtMCP-->>MCPSvc: InitializeResult (serverInfo, capabilities)
+
+        MCPSvc->>ExtMCP: listTools()
+        ExtMCP-->>MCPSvc: Tool[]
+
+        MCPSvc-->>mcpStore: MCPConnection
+        deactivate MCPSvc
+
+        mcpStore->>mcpStore: connections.set(serverName, connection)
+        mcpStore->>mcpStore: indexTools(connection.tools, serverName)
+        Note right of mcpStore: toolsIndex.set(toolName, serverName)<br/>Handle name conflicts with prefixes
+
+        mcpStore->>mcpStore: updateHealthCheck(id, SUCCESS)
+        mcpStore->>mcpStore: _connectedServers.push(serverName)
+
+        alt Server supports resources
+            mcpStore->>MCPSvc: listAllResources(connection)
+            MCPSvc->>ExtMCP: listResources()
+            ExtMCP-->>MCPSvc: MCPResource[]
+            MCPSvc-->>mcpStore: resources
+
+            mcpStore->>MCPSvc: listAllResourceTemplates(connection)
+            MCPSvc->>ExtMCP: listResourceTemplates()
+            ExtMCP-->>MCPSvc: MCPResourceTemplate[]
+            MCPSvc-->>mcpStore: templates
+
+            mcpStore->>mcpResStore: setServerResources(serverName, resources, templates)
+        end
+    end
+
+    mcpStore->>mcpStore: _isInitializing = false
+    deactivate mcpStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,ExtMCP: 🔧 TOOL EXECUTION (Chat with Tools)
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>mcpStore: executeTool(mcpCall: MCPToolCall, signal?)
+    activate mcpStore
+
+    mcpStore->>mcpStore: toolsIndex.get(mcpCall.function.name)
+    Note right of mcpStore: Resolve serverName from toolsIndex<br/>MCPToolCall = {id, type, function: {name, arguments}}
+
+    mcpStore->>mcpStore: acquireConnection()
+    Note right of mcpStore: activeFlowCount++<br/>Prevent shutdown during execution
+
+    mcpStore->>mcpStore: connection = connections.get(serverName)
+
+    mcpStore->>MCPSvc: callTool(connection, {name, arguments}, signal)
+    activate MCPSvc
+
+    MCPSvc->>MCPSvc: throwIfAborted(signal)
+    MCPSvc->>ExtMCP: callTool(name, arguments)
+
+    alt Tool execution success
+        ExtMCP-->>MCPSvc: ToolCallResult (content, isError)
+        MCPSvc->>MCPSvc: formatToolResult(result)
+        Note right of MCPSvc: Handle text, image (base64),<br/>embedded resource content
+        MCPSvc-->>mcpStore: ToolExecutionResult
+    else Tool execution error
+        ExtMCP-->>MCPSvc: Error
+        MCPSvc-->>mcpStore: throw Error
+    else Aborted
+        MCPSvc-->>mcpStore: throw AbortError
+    end
+
+    deactivate MCPSvc
+
+    mcpStore->>mcpStore: releaseConnection()
+    Note right of mcpStore: activeFlowCount--
+
+    mcpStore-->>UI: ToolExecutionResult
+    deactivate mcpStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,ExtMCP: � RESOURCE ATTACHMENT CONSUMPTION
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    chatStore->>mcpStore: consumeResourceAttachmentsAsExtras()
+    activate mcpStore
+    mcpStore->>mcpResStore: getAttachments()
+    mcpResStore-->>mcpStore: MCPResourceAttachment[]
+    mcpStore->>mcpStore: Convert attachments to message extras
+    mcpStore->>mcpResStore: clearAttachments()
+    mcpStore-->>chatStore: MessageExtra[] (for user message)
+    deactivate mcpStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,ExtMCP: �📝 PROMPT OPERATIONS
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>mcpStore: getAllPrompts()
+    activate mcpStore
+
+    loop For each connected server with prompts capability
+        mcpStore->>MCPSvc: listPrompts(connection)
+        MCPSvc->>ExtMCP: listPrompts()
+        ExtMCP-->>MCPSvc: Prompt[]
+        MCPSvc-->>mcpStore: prompts
+    end
+
+    mcpStore-->>UI: MCPPromptInfo[] (with serverName)
+    deactivate mcpStore
+
+    UI->>mcpStore: getPrompt(serverName, promptName, args?)
+    activate mcpStore
+
+    mcpStore->>MCPSvc: getPrompt(connection, name, args)
+    MCPSvc->>ExtMCP: getPrompt({name, arguments})
+    ExtMCP-->>MCPSvc: GetPromptResult (messages)
+    MCPSvc-->>mcpStore: GetPromptResult
+
+    mcpStore-->>UI: GetPromptResult
+    deactivate mcpStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,ExtMCP: 📁 RESOURCE OPERATIONS
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>mcpResStore: addAttachment(resourceInfo)
+    activate mcpResStore
+    mcpResStore->>mcpResStore: Create MCPResourceAttachment (loading: true)
+    mcpResStore-->>UI: attachment
+
+    UI->>mcpStore: readResource(serverName, uri)
+    activate mcpStore
+
+    mcpStore->>MCPSvc: readResource(connection, uri)
+    MCPSvc->>ExtMCP: readResource({uri})
+    ExtMCP-->>MCPSvc: MCPReadResourceResult (contents)
+    MCPSvc-->>mcpStore: contents
+
+    mcpStore-->>UI: MCPResourceContent[]
+    deactivate mcpStore
+
+    UI->>mcpResStore: updateAttachmentContent(attachmentId, content)
+    mcpResStore->>mcpResStore: cacheResourceContent(resource, content)
+    deactivate mcpResStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,ExtMCP: 🔄 AUTO-RECONNECTION
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    Note over mcpStore: On WebSocket close or connection error:
+    mcpStore->>mcpStore: autoReconnect(serverName, attempt)
+    activate mcpStore
+
+    mcpStore->>mcpStore: Calculate backoff delay
+    Note right of mcpStore: delay = min(30s, 1s * 2^attempt)
+
+    mcpStore->>mcpStore: Wait for delay
+    mcpStore->>mcpStore: reconnectServer(serverName)
+
+    alt Reconnection success
+        mcpStore->>mcpStore: updateHealthCheck(id, SUCCESS)
+    else Max attempts reached
+        mcpStore->>mcpStore: updateHealthCheck(id, ERROR)
+    end
+    deactivate mcpStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,ExtMCP: 🛑 SHUTDOWN
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>mcpStore: shutdown()
+    activate mcpStore
+
+    mcpStore->>mcpStore: Wait for activeFlowCount == 0
+
+    loop For each connection
+        mcpStore->>MCPSvc: disconnect(connection)
+        MCPSvc->>MCPSvc: transport.onclose = undefined
+        MCPSvc->>ExtMCP: close()
+    end
+
+    mcpStore->>mcpStore: connections.clear()
+    mcpStore->>mcpStore: toolsIndex.clear()
+    mcpStore->>mcpStore: _connectedServers = []
+
+    mcpStore->>mcpResStore: clear()
+    deactivate mcpStore
+```
diff --git a/tools/server/webui/package-lock.json b/tools/server/webui/package-lock.json
index 68344168247..f19d4ff8ecf 100644
--- a/tools/server/webui/package-lock.json
+++ b/tools/server/webui/package-lock.json
@@ -8,6 +8,7 @@
 			"name": "webui",
 			"version": "1.0.0",
 			"dependencies": {
+				"@modelcontextprotocol/sdk": "^1.25.1",
 				"highlight.js": "^11.11.1",
 				"mode-watcher": "^1.1.0",
 				"pdfjs-dist": "^5.4.54",
@@ -19,34 +20,36 @@
 				"remark-html": "^16.0.1",
 				"remark-rehype": "^11.1.2",
 				"svelte-sonner": "^1.0.5",
-				"unist-util-visit": "^5.0.0"
+				"unist-util-visit": "^5.0.0",
+				"zod": "^4.2.1"
 			},
 			"devDependencies": {
-				"@chromatic-com/storybook": "^4.1.2",
+				"@chromatic-com/storybook": "^5.0.0",
 				"@eslint/compat": "^1.2.5",
 				"@eslint/js": "^9.18.0",
 				"@internationalized/date": "^3.10.1",
 				"@lucide/svelte": "^0.515.0",
 				"@playwright/test": "^1.49.1",
-				"@storybook/addon-a11y": "^10.0.7",
-				"@storybook/addon-docs": "^10.0.7",
+				"@storybook/addon-a11y": "^10.2.4",
+				"@storybook/addon-docs": "^10.2.4",
 				"@storybook/addon-svelte-csf": "^5.0.10",
-				"@storybook/addon-vitest": "^10.0.7",
-				"@storybook/sveltekit": "^10.0.7",
+				"@storybook/addon-vitest": "^10.2.4",
+				"@storybook/sveltekit": "^10.2.4",
 				"@sveltejs/adapter-static": "^3.0.10",
 				"@sveltejs/kit": "^2.48.4",
 				"@sveltejs/vite-plugin-svelte": "^6.2.1",
 				"@tailwindcss/forms": "^0.5.9",
 				"@tailwindcss/typography": "^0.5.15",
 				"@tailwindcss/vite": "^4.0.0",
-				"@types/node": "^22",
+				"@types/node": "^24",
 				"@vitest/browser": "^3.2.3",
+				"@vitest/coverage-v8": "^3.2.3",
 				"bits-ui": "^2.14.4",
 				"clsx": "^2.1.1",
 				"dexie": "^4.0.11",
 				"eslint": "^9.18.0",
 				"eslint-config-prettier": "^10.0.1",
-				"eslint-plugin-storybook": "^10.0.7",
+				"eslint-plugin-storybook": "^10.2.4",
 				"eslint-plugin-svelte": "^3.0.0",
 				"fflate": "^0.8.2",
 				"globals": "^16.0.0",
@@ -60,7 +63,7 @@
 				"rehype-katex": "^7.0.1",
 				"remark-math": "^6.0.0",
 				"sass": "^1.93.3",
-				"storybook": "^10.0.7",
+				"storybook": "^10.2.4",
 				"svelte": "^5.38.2",
 				"svelte-check": "^4.0.0",
 				"tailwind-merge": "^3.3.1",
@@ -113,16 +116,42 @@
 				"node": ">=6.9.0"
 			}
 		},
-		"node_modules/@babel/helper-validator-identifier": {
+		"node_modules/@babel/helper-string-parser": {
 			"version": "7.27.1",
-			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
-			"integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+			"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+			"integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-validator-identifier": {
+			"version": "7.28.5",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+			"integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@babel/parser": {
+			"version": "7.29.0",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
+			"integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/types": "^7.29.0"
+			},
+			"bin": {
+				"parser": "bin/babel-parser.js"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
 		"node_modules/@babel/runtime": {
 			"version": "7.27.6",
 			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
@@ -133,15 +162,39 @@
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@babel/types": {
+			"version": "7.29.0",
+			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+			"integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-string-parser": "^7.27.1",
+				"@babel/helper-validator-identifier": "^7.28.5"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@bcoe/v8-coverage": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-1.0.2.tgz",
+			"integrity": "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/@chromatic-com/storybook": {
-			"version": "4.1.2",
-			"resolved": "https://registry.npmjs.org/@chromatic-com/storybook/-/storybook-4.1.2.tgz",
-			"integrity": "sha512-QAWGtHwib0qsP5CcO64aJCF75zpFgpKK3jNpxILzQiPK3sVo4EmnVGJVdwcZWpWrGdH8E4YkncGoitw4EXzKMg==",
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/@chromatic-com/storybook/-/storybook-5.0.0.tgz",
+			"integrity": "sha512-8wUsqL8kg6R5ue8XNE7Jv/iD1SuE4+6EXMIGIuE+T2loBITEACLfC3V8W44NJviCLusZRMWbzICddz0nU0bFaw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@neoconfetti/react": "^1.0.0",
-				"chromatic": "^12.0.0",
+				"chromatic": "^13.3.4",
 				"filesize": "^10.0.12",
 				"jsonfile": "^6.1.0",
 				"strip-ansi": "^7.1.0"
@@ -151,7 +204,7 @@
 				"yarn": ">=1.22.18"
 			},
 			"peerDependencies": {
-				"storybook": "^0.0.0-0 || ^9.0.0 || ^9.1.0-0 || ^9.2.0-0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0"
+				"storybook": "^0.0.0-0 || ^10.1.0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0"
 			}
 		},
 		"node_modules/@esbuild/aix-ppc64": {
@@ -597,9 +650,9 @@
 			}
 		},
 		"node_modules/@eslint-community/eslint-utils": {
-			"version": "4.7.0",
-			"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
-			"integrity": "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==",
+			"version": "4.9.1",
+			"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+			"integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -796,6 +849,18 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@hono/node-server": {
+			"version": "1.19.9",
+			"resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.9.tgz",
+			"integrity": "sha512-vHL6w3ecZsky+8P5MD+eFfaGTyCeOHUIFYMGpQGbrBTSmNNoxv0if69rEZ5giu36weC5saFuznL411gRX7bJDw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18.14.1"
+			},
+			"peerDependencies": {
+				"hono": "^4"
+			}
+		},
 		"node_modules/@humanfs/core": {
 			"version": "0.19.1",
 			"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -873,6 +938,24 @@
 				"@swc/helpers": "^0.5.0"
 			}
 		},
+		"node_modules/@isaacs/cliui": {
+			"version": "8.0.2",
+			"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+			"integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"string-width": "^5.1.2",
+				"string-width-cjs": "npm:string-width@^4.2.0",
+				"strip-ansi": "^7.0.1",
+				"strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+				"wrap-ansi": "^8.1.0",
+				"wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/@isaacs/fs-minipass": {
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
@@ -886,6 +969,16 @@
 				"node": ">=18.0.0"
 			}
 		},
+		"node_modules/@istanbuljs/schema": {
+			"version": "0.1.3",
+			"resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+			"integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/@jridgewell/gen-mapping": {
 			"version": "0.3.12",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
@@ -922,9 +1015,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@jridgewell/trace-mapping": {
-			"version": "0.3.29",
-			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.29.tgz",
-			"integrity": "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==",
+			"version": "0.3.31",
+			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+			"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
@@ -959,6 +1052,68 @@
 				"react": ">=16"
 			}
 		},
+		"node_modules/@modelcontextprotocol/sdk": {
+			"version": "1.26.0",
+			"resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.26.0.tgz",
+			"integrity": "sha512-Y5RmPncpiDtTXDbLKswIJzTqu2hyBKxTNsgKqKclDbhIgg1wgtf1fRuvxgTnRfcnxtvvgbIEcqUOzZrJ6iSReg==",
+			"license": "MIT",
+			"dependencies": {
+				"@hono/node-server": "^1.19.9",
+				"ajv": "^8.17.1",
+				"ajv-formats": "^3.0.1",
+				"content-type": "^1.0.5",
+				"cors": "^2.8.5",
+				"cross-spawn": "^7.0.5",
+				"eventsource": "^3.0.2",
+				"eventsource-parser": "^3.0.0",
+				"express": "^5.2.1",
+				"express-rate-limit": "^8.2.1",
+				"hono": "^4.11.4",
+				"jose": "^6.1.3",
+				"json-schema-typed": "^8.0.2",
+				"pkce-challenge": "^5.0.0",
+				"raw-body": "^3.0.0",
+				"zod": "^3.25 || ^4.0",
+				"zod-to-json-schema": "^3.25.1"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"@cfworker/json-schema": "^4.1.1",
+				"zod": "^3.25 || ^4.0"
+			},
+			"peerDependenciesMeta": {
+				"@cfworker/json-schema": {
+					"optional": true
+				},
+				"zod": {
+					"optional": false
+				}
+			}
+		},
+		"node_modules/@modelcontextprotocol/sdk/node_modules/ajv": {
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+			"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+			"license": "MIT",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3",
+				"fast-uri": "^3.0.1",
+				"json-schema-traverse": "^1.0.0",
+				"require-from-string": "^2.0.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/@modelcontextprotocol/sdk/node_modules/json-schema-traverse": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+			"license": "MIT"
+		},
 		"node_modules/@napi-rs/canvas": {
 			"version": "0.1.76",
 			"resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.76.tgz",
@@ -1513,6 +1668,17 @@
 				"node": ">=0.10"
 			}
 		},
+		"node_modules/@pkgjs/parseargs": {
+			"version": "0.11.0",
+			"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+			"integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"engines": {
+				"node": ">=14"
+			}
+		},
 		"node_modules/@playwright/test": {
 			"version": "1.56.1",
 			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.1.tgz",
@@ -1824,9 +1990,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@storybook/addon-a11y": {
-			"version": "10.0.7",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-10.0.7.tgz",
-			"integrity": "sha512-JsYPpZ/n67/2bI1XJeyrAWHHQkHemPkPHjCA0tAUnMz1Shlo/LV2q1Ahgpxoihx4strbHwZz71bcS4MqkHBduA==",
+			"version": "10.2.4",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-10.2.4.tgz",
+			"integrity": "sha512-VGhdZ+iP2l/CSulIKV2kt3SMWVHntOigqWqGkNYf6YNYofynUYEKdsNqBvHx4ySuNEl/eXJ8LRO8FKYnU7LxZQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -1838,20 +2004,20 @@
 				"url": "https://opencollective.com/storybook"
 			},
 			"peerDependencies": {
-				"storybook": "^10.0.7"
+				"storybook": "^10.2.4"
 			}
 		},
 		"node_modules/@storybook/addon-docs": {
-			"version": "10.0.7",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-10.0.7.tgz",
-			"integrity": "sha512-qQQMoeYZC4W+/8ubfOZiTrE8nYC/f4wWP1uq4peRyDy1N2nIN9SwhyxwMn0m3VpeGmRBga5dLvJY9ko6SnJekg==",
+			"version": "10.2.4",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-10.2.4.tgz",
+			"integrity": "sha512-FzscAmdBiOGnGrxiEM+8eTg43kjqgjLfObg+lbJVRR/a0DmZ3xfAPNB0+VKYQbN0FacNcWLM9LZ/7U0hRBPBnQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@mdx-js/react": "^3.0.0",
-				"@storybook/csf-plugin": "10.0.7",
-				"@storybook/icons": "^1.6.0",
-				"@storybook/react-dom-shim": "10.0.7",
+				"@storybook/csf-plugin": "10.2.4",
+				"@storybook/icons": "^2.0.1",
+				"@storybook/react-dom-shim": "10.2.4",
 				"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
 				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
 				"ts-dedent": "^2.0.0"
@@ -1861,7 +2027,7 @@
 				"url": "https://opencollective.com/storybook"
 			},
 			"peerDependencies": {
-				"storybook": "^10.0.7"
+				"storybook": "^10.2.4"
 			}
 		},
 		"node_modules/@storybook/addon-svelte-csf": {
@@ -1888,16 +2054,14 @@
 			}
 		},
 		"node_modules/@storybook/addon-vitest": {
-			"version": "10.0.7",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-vitest/-/addon-vitest-10.0.7.tgz",
-			"integrity": "sha512-i6v/mAl+elrUxb+1f4NdnM17t/fg+KGJWL1U9quflXTd3KiLY0xJB4LwNP6yYo7Imc5NIO2fRkJbGvNqLBRe2Q==",
+			"version": "10.2.4",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-vitest/-/addon-vitest-10.2.4.tgz",
+			"integrity": "sha512-BT1iP89U4wcbpzTURU8WYTAeUcdNh4WIt0BqsnATmMwR/jKNJW6QgXCVqGQTSpRjWj40hX5e2JkQYCNXdjKsPw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@storybook/global": "^5.0.0",
-				"@storybook/icons": "^1.6.0",
-				"prompts": "^2.4.0",
-				"ts-dedent": "^2.2.0"
+				"@storybook/icons": "^2.0.1"
 			},
 			"funding": {
 				"type": "opencollective",
@@ -1907,7 +2071,7 @@
 				"@vitest/browser": "^3.0.0 || ^4.0.0",
 				"@vitest/browser-playwright": "^4.0.0",
 				"@vitest/runner": "^3.0.0 || ^4.0.0",
-				"storybook": "^10.0.7",
+				"storybook": "^10.2.4",
 				"vitest": "^3.0.0 || ^4.0.0"
 			},
 			"peerDependenciesMeta": {
@@ -1926,13 +2090,13 @@
 			}
 		},
 		"node_modules/@storybook/builder-vite": {
-			"version": "10.0.7",
-			"resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-10.0.7.tgz",
-			"integrity": "sha512-wk2TAoUY5+9t78GWVBndu9rEo9lo6Ec3SRrLT4VpIlcS2GPK+5f26UC2uvIBwOF/N7JrUUKq/zWDZ3m+do9QDg==",
+			"version": "10.2.4",
+			"resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-10.2.4.tgz",
+			"integrity": "sha512-/hcT1xj3CL5GkJ5v5/EguZdttDwNE6weNXK7vKzp034tnGcLycOossDsTiUQkBowSL+Ylc8aKj+ZgvddPNfOig==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@storybook/csf-plugin": "10.0.7",
+				"@storybook/csf-plugin": "10.2.4",
 				"ts-dedent": "^2.0.0"
 			},
 			"funding": {
@@ -1940,7 +2104,7 @@
 				"url": "https://opencollective.com/storybook"
 			},
 			"peerDependencies": {
-				"storybook": "^10.0.7",
+				"storybook": "^10.2.4",
 				"vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
 			}
 		},
@@ -1955,9 +2119,9 @@
 			}
 		},
 		"node_modules/@storybook/csf-plugin": {
-			"version": "10.0.7",
-			"resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-10.0.7.tgz",
-			"integrity": "sha512-YaYYlCyJBwxaMk7yREOdz+9MDSgxIYGdeJ9EIq/bUndmkoj9SRo1P9/0lC5dseWQoiGy4T3PbZiWruD8uM5m3g==",
+			"version": "10.2.4",
+			"resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-10.2.4.tgz",
+			"integrity": "sha512-kupPQEV+4N9mzsZHYaokvhO/KHBjYdWda9PNmPQwy0TR7r2mzthgaNH72TjmgN1L6DIbsuyOG1wtczcPJn4+Jg==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -1970,7 +2134,7 @@
 			"peerDependencies": {
 				"esbuild": "*",
 				"rollup": "*",
-				"storybook": "^10.0.7",
+				"storybook": "^10.2.4",
 				"vite": "*",
 				"webpack": "*"
 			},
@@ -1997,23 +2161,20 @@
 			"license": "MIT"
 		},
 		"node_modules/@storybook/icons": {
-			"version": "1.6.0",
-			"resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.6.0.tgz",
-			"integrity": "sha512-hcFZIjW8yQz8O8//2WTIXylm5Xsgc+lW9ISLgUk1xGmptIJQRdlhVIXCpSyLrQaaRiyhQRaVg7l3BD9S216BHw==",
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-2.0.1.tgz",
+			"integrity": "sha512-/smVjw88yK3CKsiuR71vNgWQ9+NuY2L+e8X7IMrFjexjm6ZR8ULrV2DRkTA61aV6ryefslzHEGDInGpnNeIocg==",
 			"dev": true,
 			"license": "MIT",
-			"engines": {
-				"node": ">=14.0.0"
-			},
 			"peerDependencies": {
-				"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
 			}
 		},
 		"node_modules/@storybook/react-dom-shim": {
-			"version": "10.0.7",
-			"resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-10.0.7.tgz",
-			"integrity": "sha512-bp4OnMtZGwPJQDqNRi4K5iibLbZ2TZZMkWW7oSw5jjPFpGSreSjCe8LH9yj/lDnK8Ox9bGMCBFE5RV5XuML29w==",
+			"version": "10.2.4",
+			"resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-10.2.4.tgz",
+			"integrity": "sha512-i22OtrZ7GeZPt/odLf0vqyDhRSKyaLsHkkKSBcANQfzRRnBZmiz2FchOtWm9uvoDWybQsTruZq7kTdtpEhwyGw==",
 			"dev": true,
 			"license": "MIT",
 			"funding": {
@@ -2023,13 +2184,13 @@
 			"peerDependencies": {
 				"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
 				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-				"storybook": "^10.0.7"
+				"storybook": "^10.2.4"
 			}
 		},
 		"node_modules/@storybook/svelte": {
-			"version": "10.0.7",
-			"resolved": "https://registry.npmjs.org/@storybook/svelte/-/svelte-10.0.7.tgz",
-			"integrity": "sha512-rO+YQhHucy47Vh67z318pALmd6x+K1Kj30Fb4a6oOEw4xn4zCo9KTmkMWs24c4oduEXD/eJu3badlRmsVXzyfA==",
+			"version": "10.2.4",
+			"resolved": "https://registry.npmjs.org/@storybook/svelte/-/svelte-10.2.4.tgz",
+			"integrity": "sha512-W9R51zUCd2iHOQBg/D93+bdpYv6kbtFx+kft5X8lPKQl6yEu0aKs9i5N5GyCASOhIApgx/tkqZIJ7vgM4cqrHA==",
 			"dev": true,
 			"license": "MIT",
 			"peer": true,
@@ -2042,19 +2203,19 @@
 				"url": "https://opencollective.com/storybook"
 			},
 			"peerDependencies": {
-				"storybook": "^10.0.7",
+				"storybook": "^10.2.4",
 				"svelte": "^5.0.0"
 			}
 		},
 		"node_modules/@storybook/svelte-vite": {
-			"version": "10.0.7",
-			"resolved": "https://registry.npmjs.org/@storybook/svelte-vite/-/svelte-vite-10.0.7.tgz",
-			"integrity": "sha512-q9/RtrhX1CnznO6AO9MDEy1bsccbGeRxW28FLpgUrztV4IGZ/dFUrFIFurKRyuA3/nFsbtzp1F5jFt3RExmmTw==",
+			"version": "10.2.4",
+			"resolved": "https://registry.npmjs.org/@storybook/svelte-vite/-/svelte-vite-10.2.4.tgz",
+			"integrity": "sha512-FMgKMRdoZFDwPD6eIDMldcgp6d6NtIGuXyUJjb29qLias/gE5TI6hg+cWmmWXQRTrXwdyepeMBmIfRcZbB6REQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@storybook/builder-vite": "10.0.7",
-				"@storybook/svelte": "10.0.7",
+				"@storybook/builder-vite": "10.2.4",
+				"@storybook/svelte": "10.2.4",
 				"magic-string": "^0.30.0",
 				"svelte2tsx": "^0.7.44",
 				"typescript": "^4.9.4 || ^5.0.0"
@@ -2065,28 +2226,28 @@
 			},
 			"peerDependencies": {
 				"@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0",
-				"storybook": "^10.0.7",
+				"storybook": "^10.2.4",
 				"svelte": "^5.0.0",
 				"vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
 			}
 		},
 		"node_modules/@storybook/sveltekit": {
-			"version": "10.0.7",
-			"resolved": "https://registry.npmjs.org/@storybook/sveltekit/-/sveltekit-10.0.7.tgz",
-			"integrity": "sha512-ujTW7PfWvgBrzd7jzaZe9JgjUeM5YvBKm+xru6t7Dr4bdfmkKqlZHPRdXn/sy+fQNyfg6JL2WKy2KIIeA+RvSg==",
+			"version": "10.2.4",
+			"resolved": "https://registry.npmjs.org/@storybook/sveltekit/-/sveltekit-10.2.4.tgz",
+			"integrity": "sha512-1qDX35iSJHWo1AOd7HMzJtCHBfgahXqTWNiyZa/JMEKJ3qC1otaU8XMmTjsZ6fCRF99piNdgqtWM8+s1TJOldg==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@storybook/builder-vite": "10.0.7",
-				"@storybook/svelte": "10.0.7",
-				"@storybook/svelte-vite": "10.0.7"
+				"@storybook/builder-vite": "10.2.4",
+				"@storybook/svelte": "10.2.4",
+				"@storybook/svelte-vite": "10.2.4"
 			},
 			"funding": {
 				"type": "opencollective",
 				"url": "https://opencollective.com/storybook"
 			},
 			"peerDependencies": {
-				"storybook": "^10.0.7",
+				"storybook": "^10.2.4",
 				"svelte": "^5.0.0",
 				"vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
 			}
@@ -2111,9 +2272,9 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.49.2",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.49.2.tgz",
-			"integrity": "sha512-Vp3zX/qlwerQmHMP6x0Ry1oY7eKKRcOWGc2P59srOp4zcqyn+etJyQpELgOi4+ZSUgteX8Y387NuwruLgGXLUQ==",
+			"version": "2.50.2",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.50.2.tgz",
+			"integrity": "sha512-875hTUkEbz+MyJIxWbQjfMaekqdmEKUUfR7JyKcpfMRZqcGyrO9Gd+iS1D/Dx8LpE5FEtutWGOtlAh4ReSAiOA==",
 			"dev": true,
 			"license": "MIT",
 			"peer": true,
@@ -2123,13 +2284,13 @@
 				"@types/cookie": "^0.6.0",
 				"acorn": "^8.14.1",
 				"cookie": "^0.6.0",
-				"devalue": "^5.3.2",
+				"devalue": "^5.6.2",
 				"esm-env": "^1.2.2",
 				"kleur": "^4.1.5",
 				"magic-string": "^0.30.5",
 				"mrmime": "^2.0.0",
 				"sade": "^1.8.1",
-				"set-cookie-parser": "^2.6.0",
+				"set-cookie-parser": "^3.0.0",
 				"sirv": "^3.0.0"
 			},
 			"bin": {
@@ -2142,11 +2303,15 @@
 				"@opentelemetry/api": "^1.0.0",
 				"@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0",
 				"svelte": "^4.0.0 || ^5.0.0-next.0",
+				"typescript": "^5.3.3",
 				"vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0"
 			},
 			"peerDependenciesMeta": {
 				"@opentelemetry/api": {
 					"optional": true
+				},
+				"typescript": {
+					"optional": true
 				}
 			}
 		},
@@ -2735,14 +2900,14 @@
 			"license": "MIT"
 		},
 		"node_modules/@types/node": {
-			"version": "22.16.5",
-			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.16.5.tgz",
-			"integrity": "sha512-bJFoMATwIGaxxx8VJPeM8TonI8t579oRvgAuT8zFugJsJZgzqv0Fu8Mhp68iecjzG7cnN3mO2dJQ5uUM2EFrgQ==",
+			"version": "24.10.10",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.10.tgz",
+			"integrity": "sha512-+0/4J266CBGPUq/ELg7QUHhN25WYjE0wYTPSQJn1xeu8DOlIOPxXxrNGiLmfAWl7HMMgWFWXpt9IDjMWrF5Iow==",
 			"dev": true,
 			"license": "MIT",
 			"peer": true,
 			"dependencies": {
-				"undici-types": "~6.21.0"
+				"undici-types": "~7.16.0"
 			}
 		},
 		"node_modules/@types/react": {
@@ -3064,6 +3229,40 @@
 				}
 			}
 		},
+		"node_modules/@vitest/coverage-v8": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-3.2.4.tgz",
+			"integrity": "sha512-EyF9SXU6kS5Ku/U82E259WSnvg6c8KTjppUncuNdm5QHpe17mwREHnjDzozC8x9MZ0xfBUFSaLkRv4TMA75ALQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@ampproject/remapping": "^2.3.0",
+				"@bcoe/v8-coverage": "^1.0.2",
+				"ast-v8-to-istanbul": "^0.3.3",
+				"debug": "^4.4.1",
+				"istanbul-lib-coverage": "^3.2.2",
+				"istanbul-lib-report": "^3.0.1",
+				"istanbul-lib-source-maps": "^5.0.6",
+				"istanbul-reports": "^3.1.7",
+				"magic-string": "^0.30.17",
+				"magicast": "^0.3.5",
+				"std-env": "^3.9.0",
+				"test-exclude": "^7.0.1",
+				"tinyrainbow": "^2.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			},
+			"peerDependencies": {
+				"@vitest/browser": "3.2.4",
+				"vitest": "3.2.4"
+			},
+			"peerDependenciesMeta": {
+				"@vitest/browser": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@vitest/expect": {
 			"version": "3.2.4",
 			"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.4.tgz",
@@ -3108,16 +3307,6 @@
 				}
 			}
 		},
-		"node_modules/@vitest/mocker/node_modules/estree-walker": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@types/estree": "^1.0.0"
-			}
-		},
 		"node_modules/@vitest/pretty-format": {
 			"version": "3.2.4",
 			"resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.4.tgz",
@@ -3190,6 +3379,19 @@
 				"url": "https://opencollective.com/vitest"
 			}
 		},
+		"node_modules/accepts": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+			"integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+			"license": "MIT",
+			"dependencies": {
+				"mime-types": "^3.0.0",
+				"negotiator": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/acorn": {
 			"version": "8.15.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -3230,6 +3432,45 @@
 				"url": "https://github.com/sponsors/epoberezkin"
 			}
 		},
+		"node_modules/ajv-formats": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
+			"integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
+			"license": "MIT",
+			"dependencies": {
+				"ajv": "^8.0.0"
+			},
+			"peerDependencies": {
+				"ajv": "^8.0.0"
+			},
+			"peerDependenciesMeta": {
+				"ajv": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/ajv-formats/node_modules/ajv": {
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+			"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+			"license": "MIT",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3",
+				"fast-uri": "^3.0.1",
+				"json-schema-traverse": "^1.0.0",
+				"require-from-string": "^2.0.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/ajv-formats/node_modules/json-schema-traverse": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+			"license": "MIT"
+		},
 		"node_modules/ansi-regex": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -3296,6 +3537,25 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/ast-v8-to-istanbul": {
+			"version": "0.3.11",
+			"resolved": "https://registry.npmjs.org/ast-v8-to-istanbul/-/ast-v8-to-istanbul-0.3.11.tgz",
+			"integrity": "sha512-Qya9fkoofMjCBNVdWINMjB5KZvkYfaO9/anwkWnjxibpWUxo5iHl2sOdP7/uAqaRuUYuoo8rDwnbaaKVFxoUvw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/trace-mapping": "^0.3.31",
+				"estree-walker": "^3.0.3",
+				"js-tokens": "^10.0.0"
+			}
+		},
+		"node_modules/ast-v8-to-istanbul/node_modules/js-tokens": {
+			"version": "10.0.0",
+			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-10.0.0.tgz",
+			"integrity": "sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/async": {
 			"version": "3.2.6",
 			"resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
@@ -3353,9 +3613,9 @@
 			}
 		},
 		"node_modules/bits-ui": {
-			"version": "2.14.4",
-			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-2.14.4.tgz",
-			"integrity": "sha512-W6kenhnbd/YVvur+DKkaVJ6GldE53eLewur5AhUCqslYQ0vjZr8eWlOfwZnMiPB+PF5HMVqf61vXBvmyrAmPWg==",
+			"version": "2.15.5",
+			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-2.15.5.tgz",
+			"integrity": "sha512-WhS+P+E//ClLfKU6KqjKC17nGDRLnz+vkwoP6ClFUPd5m1fFVDxTElPX8QVsduLj5V1KFDxlnv6sW2G5Lqk+vw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -3423,6 +3683,46 @@
 				"svelte": "^5.30.2"
 			}
 		},
+		"node_modules/body-parser": {
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
+			"integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
+			"license": "MIT",
+			"dependencies": {
+				"bytes": "^3.1.2",
+				"content-type": "^1.0.5",
+				"debug": "^4.4.3",
+				"http-errors": "^2.0.0",
+				"iconv-lite": "^0.7.0",
+				"on-finished": "^2.4.1",
+				"qs": "^6.14.1",
+				"raw-body": "^3.0.1",
+				"type-is": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
+		"node_modules/body-parser/node_modules/iconv-lite": {
+			"version": "0.7.2",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+			"integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+			"license": "MIT",
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
 		"node_modules/brace-expansion": {
 			"version": "1.1.12",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -3447,6 +3747,31 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/bundle-name": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
+			"integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"run-applescript": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/bytes": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+			"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/cac": {
 			"version": "6.7.14",
 			"resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
@@ -3461,7 +3786,6 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
 			"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"es-errors": "^1.3.0",
@@ -3475,7 +3799,6 @@
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
 			"integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"call-bind-apply-helpers": "^1.0.2",
@@ -3609,9 +3932,9 @@
 			}
 		},
 		"node_modules/chromatic": {
-			"version": "12.2.0",
-			"resolved": "https://registry.npmjs.org/chromatic/-/chromatic-12.2.0.tgz",
-			"integrity": "sha512-GswmBW9ZptAoTns1BMyjbm55Z7EsIJnUvYKdQqXIBZIKbGErmpA+p4c0BYA+nzw5B0M+rb3Iqp1IaH8TFwIQew==",
+			"version": "13.3.5",
+			"resolved": "https://registry.npmjs.org/chromatic/-/chromatic-13.3.5.tgz",
+			"integrity": "sha512-MzPhxpl838qJUo0A55osCF2ifwPbjcIPeElr1d4SHcjnHoIcg7l1syJDrAYK/a+PcCBrOGi06jPNpQAln5hWgw==",
 			"dev": true,
 			"license": "MIT",
 			"bin": {
@@ -3688,6 +4011,28 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/content-disposition": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz",
+			"integrity": "sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
+		"node_modules/content-type": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+			"integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
@@ -3698,6 +4043,28 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/cookie-signature": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+			"integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.6.0"
+			}
+		},
+		"node_modules/cors": {
+			"version": "2.8.5",
+			"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+			"integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+			"license": "MIT",
+			"dependencies": {
+				"object-assign": "^4",
+				"vary": "^1"
+			},
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
 		"node_modules/corser": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
@@ -3712,7 +4079,6 @@
 			"version": "7.0.6",
 			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
 			"integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"path-key": "^3.1.0",
@@ -3751,9 +4117,9 @@
 			"license": "MIT"
 		},
 		"node_modules/debug": {
-			"version": "4.4.1",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-			"integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+			"version": "4.4.3",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+			"integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
 			"license": "MIT",
 			"dependencies": {
 				"ms": "^2.1.3"
@@ -3829,18 +4195,70 @@
 				"node": ">=0.10.0"
 			}
 		},
-		"node_modules/dequal": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
-			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+		"node_modules/default-browser": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.5.0.tgz",
+			"integrity": "sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==",
+			"dev": true,
 			"license": "MIT",
+			"dependencies": {
+				"bundle-name": "^4.1.0",
+				"default-browser-id": "^5.0.0"
+			},
 			"engines": {
-				"node": ">=6"
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/detect-libc": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+		"node_modules/default-browser-id": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.1.tgz",
+			"integrity": "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/define-lazy-prop": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
+			"integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/depd": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+			"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/dequal": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/detect-libc": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
 			"integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
 			"dev": true,
 			"license": "Apache-2.0",
@@ -3885,7 +4303,6 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
 			"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"call-bind-apply-helpers": "^1.0.1",
@@ -3896,6 +4313,35 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/eastasianwidth": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+			"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/ee-first": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+			"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+			"license": "MIT"
+		},
+		"node_modules/emoji-regex": {
+			"version": "9.2.2",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+			"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/encodeurl": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+			"integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/enhanced-resolve": {
 			"version": "5.18.2",
 			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz",
@@ -3927,7 +4373,6 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
 			"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">= 0.4"
@@ -3937,7 +4382,6 @@
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
 			"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">= 0.4"
@@ -3954,7 +4398,6 @@
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
 			"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"es-errors": "^1.3.0"
@@ -4017,6 +4460,12 @@
 				"@esbuild/win32-x64": "0.25.8"
 			}
 		},
+		"node_modules/escape-html": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+			"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+			"license": "MIT"
+		},
 		"node_modules/escape-string-regexp": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -4109,17 +4558,184 @@
 			}
 		},
 		"node_modules/eslint-plugin-storybook": {
-			"version": "10.0.7",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-10.0.7.tgz",
-			"integrity": "sha512-qOQq9KdT1jsBgT3qsxUH2n67aj1WR8D1XCoER8Q6yuVlS5TimNwk1mZeWkXVf/o4RQQT6flT2y5cG2gPLZPvJA==",
+			"version": "10.2.4",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-10.2.4.tgz",
+			"integrity": "sha512-D8a6Y+iun2MSOpgps0Vd/t8y9Y5ZZ7O2VeKqw2PCv2+b7yInqogOS2VBMSRZVfP8TTGQgDpbUK67k7KZEUC7Ng==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@typescript-eslint/utils": "^8.8.1"
+				"@typescript-eslint/utils": "^8.48.0"
 			},
 			"peerDependencies": {
 				"eslint": ">=8",
-				"storybook": "^10.0.7"
+				"storybook": "^10.2.4"
+			}
+		},
+		"node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/project-service": {
+			"version": "8.54.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.54.0.tgz",
+			"integrity": "sha512-YPf+rvJ1s7MyiWM4uTRhE4DvBXrEV+d8oC3P9Y2eT7S+HBS0clybdMIPnhiATi9vZOYDc7OQ1L/i6ga6NFYK/g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/tsconfig-utils": "^8.54.0",
+				"@typescript-eslint/types": "^8.54.0",
+				"debug": "^4.4.3"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.8.4 <6.0.0"
+			}
+		},
+		"node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/scope-manager": {
+			"version": "8.54.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.54.0.tgz",
+			"integrity": "sha512-27rYVQku26j/PbHYcVfRPonmOlVI6gihHtXFbTdB5sb6qA0wdAQAbyXFVarQ5t4HRojIz64IV90YtsjQSSGlQg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/types": "8.54.0",
+				"@typescript-eslint/visitor-keys": "8.54.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/tsconfig-utils": {
+			"version": "8.54.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.54.0.tgz",
+			"integrity": "sha512-dRgOyT2hPk/JwxNMZDsIXDgyl9axdJI3ogZ2XWhBPsnZUv+hPesa5iuhdYt2gzwA9t8RE5ytOJ6xB0moV0Ujvw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.8.4 <6.0.0"
+			}
+		},
+		"node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/types": {
+			"version": "8.54.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.54.0.tgz",
+			"integrity": "sha512-PDUI9R1BVjqu7AUDsRBbKMtwmjWcn4J3le+5LpcFgWULN3LvHC5rkc9gCVxbrsrGmO1jfPybN5s6h4Jy+OnkAA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/typescript-estree": {
+			"version": "8.54.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.54.0.tgz",
+			"integrity": "sha512-BUwcskRaPvTk6fzVWgDPdUndLjB87KYDrN5EYGetnktoeAvPtO4ONHlAZDnj5VFnUANg0Sjm7j4usBlnoVMHwA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/project-service": "8.54.0",
+				"@typescript-eslint/tsconfig-utils": "8.54.0",
+				"@typescript-eslint/types": "8.54.0",
+				"@typescript-eslint/visitor-keys": "8.54.0",
+				"debug": "^4.4.3",
+				"minimatch": "^9.0.5",
+				"semver": "^7.7.3",
+				"tinyglobby": "^0.2.15",
+				"ts-api-utils": "^2.4.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.8.4 <6.0.0"
+			}
+		},
+		"node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/utils": {
+			"version": "8.54.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.54.0.tgz",
+			"integrity": "sha512-9Cnda8GS57AQakvRyG0PTejJNlA2xhvyNtEVIMlDWOOeEyBkYWhGPnfrIAnqxLMTSTo6q8g12XVjjev5l1NvMA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@eslint-community/eslint-utils": "^4.9.1",
+				"@typescript-eslint/scope-manager": "8.54.0",
+				"@typescript-eslint/types": "8.54.0",
+				"@typescript-eslint/typescript-estree": "8.54.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"eslint": "^8.57.0 || ^9.0.0",
+				"typescript": ">=4.8.4 <6.0.0"
+			}
+		},
+		"node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/visitor-keys": {
+			"version": "8.54.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.54.0.tgz",
+			"integrity": "sha512-VFlhGSl4opC0bprJiItPQ1RfUhGDIBokcPwaFH4yiBCaNPeld/9VeXbiPO1cLyorQi1G1vL+ecBk1x8o1axORA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/types": "8.54.0",
+				"eslint-visitor-keys": "^4.2.1"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/eslint-plugin-storybook/node_modules/brace-expansion": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+			"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/eslint-plugin-storybook/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
 		"node_modules/eslint-plugin-svelte": {
@@ -4270,6 +4886,16 @@
 				"node": ">=4.0"
 			}
 		},
+		"node_modules/estree-walker": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree": "^1.0.0"
+			}
+		},
 		"node_modules/esutils": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -4280,6 +4906,15 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/etag": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+			"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/eventemitter3": {
 			"version": "4.0.7",
 			"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -4287,6 +4922,27 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/eventsource": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz",
+			"integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==",
+			"license": "MIT",
+			"dependencies": {
+				"eventsource-parser": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/eventsource-parser": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.6.tgz",
+			"integrity": "sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
 		"node_modules/expect-type": {
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.2.2.tgz",
@@ -4297,6 +4953,76 @@
 				"node": ">=12.0.0"
 			}
 		},
+		"node_modules/express": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
+			"integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
+			"license": "MIT",
+			"dependencies": {
+				"accepts": "^2.0.0",
+				"body-parser": "^2.2.1",
+				"content-disposition": "^1.0.0",
+				"content-type": "^1.0.5",
+				"cookie": "^0.7.1",
+				"cookie-signature": "^1.2.1",
+				"debug": "^4.4.0",
+				"depd": "^2.0.0",
+				"encodeurl": "^2.0.0",
+				"escape-html": "^1.0.3",
+				"etag": "^1.8.1",
+				"finalhandler": "^2.1.0",
+				"fresh": "^2.0.0",
+				"http-errors": "^2.0.0",
+				"merge-descriptors": "^2.0.0",
+				"mime-types": "^3.0.0",
+				"on-finished": "^2.4.1",
+				"once": "^1.4.0",
+				"parseurl": "^1.3.3",
+				"proxy-addr": "^2.0.7",
+				"qs": "^6.14.0",
+				"range-parser": "^1.2.1",
+				"router": "^2.2.0",
+				"send": "^1.1.0",
+				"serve-static": "^2.2.0",
+				"statuses": "^2.0.1",
+				"type-is": "^2.0.1",
+				"vary": "^1.1.2"
+			},
+			"engines": {
+				"node": ">= 18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
+		"node_modules/express-rate-limit": {
+			"version": "8.2.1",
+			"resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.2.1.tgz",
+			"integrity": "sha512-PCZEIEIxqwhzw4KF0n7QF4QqruVTcF73O5kFKUnGOyjbCCgizBBiFaYpd/fnBLUMPw/BWw9OsiN7GgrNYr7j6g==",
+			"license": "MIT",
+			"dependencies": {
+				"ip-address": "10.0.1"
+			},
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/express-rate-limit"
+			},
+			"peerDependencies": {
+				"express": ">= 4.11"
+			}
+		},
+		"node_modules/express/node_modules/cookie": {
+			"version": "0.7.2",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+			"integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/extend": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -4307,7 +5033,6 @@
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
 			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/fast-glob": {
@@ -4354,6 +5079,22 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/fast-uri": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
+			"integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fastify"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/fastify"
+				}
+			],
+			"license": "BSD-3-Clause"
+		},
 		"node_modules/fastq": {
 			"version": "1.19.1",
 			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
@@ -4425,6 +5166,27 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/finalhandler": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
+			"integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
+			"license": "MIT",
+			"dependencies": {
+				"debug": "^4.4.0",
+				"encodeurl": "^2.0.0",
+				"escape-html": "^1.0.3",
+				"on-finished": "^2.4.1",
+				"parseurl": "^1.3.3",
+				"statuses": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 18.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
 		"node_modules/find-up": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -4484,6 +5246,41 @@
 				}
 			}
 		},
+		"node_modules/foreground-child": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+			"integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"cross-spawn": "^7.0.6",
+				"signal-exit": "^4.0.1"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/forwarded": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+			"integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/fresh": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+			"integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/fsevents": {
 			"version": "2.3.2",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -4503,7 +5300,6 @@
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
 			"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-			"dev": true,
 			"license": "MIT",
 			"funding": {
 				"url": "https://github.com/sponsors/ljharb"
@@ -4513,7 +5309,6 @@
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
 			"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"call-bind-apply-helpers": "^1.0.2",
@@ -4538,7 +5333,6 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
 			"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"dunder-proto": "^1.0.1",
@@ -4548,6 +5342,27 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/glob": {
+			"version": "10.5.0",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+			"integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"foreground-child": "^3.1.0",
+				"jackspeak": "^3.1.2",
+				"minimatch": "^9.0.4",
+				"minipass": "^7.1.2",
+				"package-json-from-dist": "^1.0.0",
+				"path-scurry": "^1.11.1"
+			},
+			"bin": {
+				"glob": "dist/esm/bin.mjs"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
 		"node_modules/glob-parent": {
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -4561,6 +5376,32 @@
 				"node": ">=10.13.0"
 			}
 		},
+		"node_modules/glob/node_modules/brace-expansion": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+			"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/glob/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
 		"node_modules/globals": {
 			"version": "16.3.0",
 			"resolved": "https://registry.npmjs.org/globals/-/globals-16.3.0.tgz",
@@ -4578,7 +5419,6 @@
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
 			"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">= 0.4"
@@ -4615,7 +5455,6 @@
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
 			"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">= 0.4"
@@ -4628,7 +5467,6 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
 			"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"function-bind": "^1.1.2"
@@ -4896,6 +5734,16 @@
 				"node": ">=12.0.0"
 			}
 		},
+		"node_modules/hono": {
+			"version": "4.11.7",
+			"resolved": "https://registry.npmjs.org/hono/-/hono-4.11.7.tgz",
+			"integrity": "sha512-l7qMiNee7t82bH3SeyUCt9UF15EVmaBvsppY2zQtrbIhl/yzBTny+YUxsVjSjQ6gaqaeVtZmGocom8TzBlA4Yw==",
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": ">=16.9.0"
+			}
+		},
 		"node_modules/html-encoding-sniffer": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -4909,6 +5757,13 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/html-escaper": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+			"integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/html-void-elements": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
@@ -4919,6 +5774,26 @@
 				"url": "https://github.com/sponsors/wooorm"
 			}
 		},
+		"node_modules/http-errors": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+			"integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+			"license": "MIT",
+			"dependencies": {
+				"depd": "~2.0.0",
+				"inherits": "~2.0.4",
+				"setprototypeof": "~1.2.0",
+				"statuses": "~2.0.2",
+				"toidentifier": "~1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
 		"node_modules/http-proxy": {
 			"version": "1.18.1",
 			"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
@@ -5029,12 +5904,52 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/inherits": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+			"license": "ISC"
+		},
 		"node_modules/inline-style-parser": {
 			"version": "0.2.4",
 			"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
 			"integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==",
 			"license": "MIT"
 		},
+		"node_modules/ip-address": {
+			"version": "10.0.1",
+			"resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.0.1.tgz",
+			"integrity": "sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/ipaddr.js": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+			"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
+		"node_modules/is-docker": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
+			"integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"is-docker": "cli.js"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/is-extglob": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -5045,6 +5960,16 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/is-fullwidth-code-point": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+			"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/is-glob": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -5058,6 +5983,25 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/is-inside-container": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
+			"integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-docker": "^3.0.0"
+			},
+			"bin": {
+				"is-inside-container": "cli.js"
+			},
+			"engines": {
+				"node": ">=14.16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/is-number": {
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -5080,13 +6024,104 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/is-promise": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+			"integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+			"license": "MIT"
+		},
+		"node_modules/is-wsl": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.0.tgz",
+			"integrity": "sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-inside-container": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/isexe": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
 			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/istanbul-lib-coverage": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
+			"integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/istanbul-lib-report": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
+			"integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"istanbul-lib-coverage": "^3.0.0",
+				"make-dir": "^4.0.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/istanbul-lib-source-maps": {
+			"version": "5.0.6",
+			"resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-5.0.6.tgz",
+			"integrity": "sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"@jridgewell/trace-mapping": "^0.3.23",
+				"debug": "^4.1.1",
+				"istanbul-lib-coverage": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/istanbul-reports": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz",
+			"integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"html-escaper": "^2.0.0",
+				"istanbul-lib-report": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/jackspeak": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+			"integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"dependencies": {
+				"@isaacs/cliui": "^8.0.2"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			},
+			"optionalDependencies": {
+				"@pkgjs/parseargs": "^0.11.0"
+			}
+		},
 		"node_modules/jiti": {
 			"version": "2.4.2",
 			"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
@@ -5097,6 +6132,15 @@
 				"jiti": "lib/jiti-cli.mjs"
 			}
 		},
+		"node_modules/jose": {
+			"version": "6.1.3",
+			"resolved": "https://registry.npmjs.org/jose/-/jose-6.1.3.tgz",
+			"integrity": "sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/panva"
+			}
+		},
 		"node_modules/js-tokens": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5131,6 +6175,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/json-schema-typed": {
+			"version": "8.0.2",
+			"resolved": "https://registry.npmjs.org/json-schema-typed/-/json-schema-typed-8.0.2.tgz",
+			"integrity": "sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==",
+			"license": "BSD-2-Clause"
+		},
 		"node_modules/json-stable-stringify-without-jsonify": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -5481,9 +6531,9 @@
 			}
 		},
 		"node_modules/lodash": {
-			"version": "4.17.21",
-			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+			"version": "4.17.23",
+			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+			"integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
 			"dev": true,
 			"license": "MIT"
 		},
@@ -5540,6 +6590,13 @@
 				"url": "https://github.com/sponsors/wooorm"
 			}
 		},
+		"node_modules/lru-cache": {
+			"version": "10.4.3",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+			"integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+			"dev": true,
+			"license": "ISC"
+		},
 		"node_modules/lz-string": {
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@@ -5559,6 +6616,34 @@
 				"@jridgewell/sourcemap-codec": "^1.5.0"
 			}
 		},
+		"node_modules/magicast": {
+			"version": "0.3.5",
+			"resolved": "https://registry.npmjs.org/magicast/-/magicast-0.3.5.tgz",
+			"integrity": "sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/parser": "^7.25.4",
+				"@babel/types": "^7.25.4",
+				"source-map-js": "^1.2.0"
+			}
+		},
+		"node_modules/make-dir": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
+			"integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"semver": "^7.5.3"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/markdown-table": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
@@ -5573,7 +6658,6 @@
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
 			"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">= 0.4"
@@ -5927,6 +7011,27 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/media-typer": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+			"integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/merge-descriptors": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+			"integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/merge2": {
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -6560,6 +7665,31 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/mime-db": {
+			"version": "1.54.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+			"integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/mime-types": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+			"integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+			"license": "MIT",
+			"dependencies": {
+				"mime-db": "^1.54.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
 		"node_modules/min-indent": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -6614,9 +7744,9 @@
 			}
 		},
 		"node_modules/minizlib": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
-			"integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+			"integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -6626,22 +7756,6 @@
 				"node": ">= 18"
 			}
 		},
-		"node_modules/mkdirp": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
-			"integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
-			"dev": true,
-			"license": "MIT",
-			"bin": {
-				"mkdirp": "dist/cjs/src/bin.js"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
 		"node_modules/mode-watcher": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/mode-watcher/-/mode-watcher-1.1.0.tgz",
@@ -6707,6 +7821,15 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/negotiator": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+			"integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/node-addon-api": {
 			"version": "7.1.1",
 			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
@@ -6715,11 +7838,19 @@
 			"license": "MIT",
 			"optional": true
 		},
+		"node_modules/object-assign": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+			"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/object-inspect": {
 			"version": "1.13.4",
 			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
 			"integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">= 0.4"
@@ -6728,6 +7859,46 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/on-finished": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+			"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+			"license": "MIT",
+			"dependencies": {
+				"ee-first": "1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/once": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+			"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+			"license": "ISC",
+			"dependencies": {
+				"wrappy": "1"
+			}
+		},
+		"node_modules/open": {
+			"version": "10.2.0",
+			"resolved": "https://registry.npmjs.org/open/-/open-10.2.0.tgz",
+			"integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"default-browser": "^5.2.1",
+				"define-lazy-prop": "^3.0.0",
+				"is-inside-container": "^1.0.0",
+				"wsl-utils": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/opener": {
 			"version": "1.5.2",
 			"resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
@@ -6788,6 +7959,13 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/package-json-from-dist": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+			"integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+			"dev": true,
+			"license": "BlueOak-1.0.0"
+		},
 		"node_modules/parent-module": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -6814,6 +7992,15 @@
 				"url": "https://github.com/inikulin/parse5?sponsor=1"
 			}
 		},
+		"node_modules/parseurl": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+			"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/path-exists": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -6828,12 +8015,38 @@
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
 			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=8"
 			}
 		},
+		"node_modules/path-scurry": {
+			"version": "1.11.1",
+			"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+			"integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"dependencies": {
+				"lru-cache": "^10.2.0",
+				"minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/path-to-regexp": {
+			"version": "8.3.0",
+			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
+			"integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
 		"node_modules/pathe": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -6883,6 +8096,15 @@
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
+		"node_modules/pkce-challenge": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.1.tgz",
+			"integrity": "sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=16.20.0"
+			}
+		},
 		"node_modules/playwright": {
 			"version": "1.56.1",
 			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.1.tgz",
@@ -7238,30 +8460,6 @@
 				"node": ">=6"
 			}
 		},
-		"node_modules/prompts": {
-			"version": "2.4.2",
-			"resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
-			"integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"kleur": "^3.0.3",
-				"sisteransi": "^1.0.5"
-			},
-			"engines": {
-				"node": ">= 6"
-			}
-		},
-		"node_modules/prompts/node_modules/kleur": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
-			"integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
-			"dev": true,
-			"license": "MIT",
-			"engines": {
-				"node": ">=6"
-			}
-		},
 		"node_modules/property-information": {
 			"version": "7.1.0",
 			"resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
@@ -7272,6 +8470,19 @@
 				"url": "https://github.com/sponsors/wooorm"
 			}
 		},
+		"node_modules/proxy-addr": {
+			"version": "2.0.7",
+			"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+			"integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+			"license": "MIT",
+			"dependencies": {
+				"forwarded": "0.2.0",
+				"ipaddr.js": "1.9.1"
+			},
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
 		"node_modules/punycode": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -7283,10 +8494,9 @@
 			}
 		},
 		"node_modules/qs": {
-			"version": "6.14.0",
-			"resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
-			"integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
-			"dev": true,
+			"version": "6.14.1",
+			"resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
+			"integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
 			"license": "BSD-3-Clause",
 			"dependencies": {
 				"side-channel": "^1.1.0"
@@ -7319,6 +8529,46 @@
 			],
 			"license": "MIT"
 		},
+		"node_modules/range-parser": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+			"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/raw-body": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+			"integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+			"license": "MIT",
+			"dependencies": {
+				"bytes": "~3.1.2",
+				"http-errors": "~2.0.1",
+				"iconv-lite": "~0.7.0",
+				"unpipe": "~1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
+		"node_modules/raw-body/node_modules/iconv-lite": {
+			"version": "0.7.2",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+			"integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+			"license": "MIT",
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
 		"node_modules/react": {
 			"version": "19.1.0",
 			"resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
@@ -7579,6 +8829,15 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/require-from-string": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+			"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/requires-port": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -7648,6 +8907,35 @@
 				"fsevents": "~2.3.2"
 			}
 		},
+		"node_modules/router": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+			"integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+			"license": "MIT",
+			"dependencies": {
+				"debug": "^4.4.0",
+				"depd": "^2.0.0",
+				"is-promise": "^4.0.0",
+				"parseurl": "^1.3.3",
+				"path-to-regexp": "^8.0.0"
+			},
+			"engines": {
+				"node": ">= 18"
+			}
+		},
+		"node_modules/run-applescript": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz",
+			"integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/run-parallel": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -7711,7 +8999,6 @@
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
 			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/sass": {
@@ -7758,9 +9045,9 @@
 			"license": "MIT"
 		},
 		"node_modules/semver": {
-			"version": "7.7.2",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-			"integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+			"version": "7.7.3",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+			"integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
 			"dev": true,
 			"license": "ISC",
 			"bin": {
@@ -7770,18 +9057,68 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/send": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+			"integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+			"license": "MIT",
+			"dependencies": {
+				"debug": "^4.4.3",
+				"encodeurl": "^2.0.0",
+				"escape-html": "^1.0.3",
+				"etag": "^1.8.1",
+				"fresh": "^2.0.0",
+				"http-errors": "^2.0.1",
+				"mime-types": "^3.0.2",
+				"ms": "^2.1.3",
+				"on-finished": "^2.4.1",
+				"range-parser": "^1.2.1",
+				"statuses": "^2.0.2"
+			},
+			"engines": {
+				"node": ">= 18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
+		"node_modules/serve-static": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+			"integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+			"license": "MIT",
+			"dependencies": {
+				"encodeurl": "^2.0.0",
+				"escape-html": "^1.0.3",
+				"parseurl": "^1.3.3",
+				"send": "^1.2.0"
+			},
+			"engines": {
+				"node": ">= 18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
 		"node_modules/set-cookie-parser": {
-			"version": "2.7.1",
-			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
-			"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-3.0.1.tgz",
+			"integrity": "sha512-n7Z7dXZhJbwuAHhNzkTti6Aw9QDDjZtm3JTpTGATIdNzdQz5GuFs22w90BcvF4INfnrL5xrX3oGsuqO5Dx3A1Q==",
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/setprototypeof": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+			"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+			"license": "ISC"
+		},
 		"node_modules/shebang-command": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
 			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"shebang-regex": "^3.0.0"
@@ -7794,7 +9131,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
 			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=8"
@@ -7804,7 +9140,6 @@
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
 			"integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"es-errors": "^1.3.0",
@@ -7824,7 +9159,6 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
 			"integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"es-errors": "^1.3.0",
@@ -7841,7 +9175,6 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
 			"integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"call-bound": "^1.0.2",
@@ -7860,7 +9193,6 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
 			"integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"call-bound": "^1.0.2",
@@ -7883,6 +9215,19 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/signal-exit": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+			"integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
 		"node_modules/sirv": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.1.tgz",
@@ -7898,13 +9243,6 @@
 				"node": ">=18"
 			}
 		},
-		"node_modules/sisteransi": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
-			"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
-			"dev": true,
-			"license": "MIT"
-		},
 		"node_modules/source-map": {
 			"version": "0.6.1",
 			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -7942,6 +9280,15 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/statuses": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+			"integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/std-env": {
 			"version": "3.9.0",
 			"resolved": "https://registry.npmjs.org/std-env/-/std-env-3.9.0.tgz",
@@ -7950,23 +9297,24 @@
 			"license": "MIT"
 		},
 		"node_modules/storybook": {
-			"version": "10.0.7",
-			"resolved": "https://registry.npmjs.org/storybook/-/storybook-10.0.7.tgz",
-			"integrity": "sha512-7smAu0o+kdm378Q2uIddk32pn0UdIbrtTVU+rXRVtTVTCrK/P2cCui2y4JH+Bl3NgEq1bbBQpCAF/HKrDjk2Qw==",
+			"version": "10.2.4",
+			"resolved": "https://registry.npmjs.org/storybook/-/storybook-10.2.4.tgz",
+			"integrity": "sha512-LwF0VZsT4qkgx66Ad/q0QgZZrU2a5WftaADDEcJ3bGq3O2fHvwWPlSZjM1HiXD4vqP9U5JiMqQkV1gkyH0XJkw==",
 			"dev": true,
 			"license": "MIT",
 			"peer": true,
 			"dependencies": {
 				"@storybook/global": "^5.0.0",
-				"@storybook/icons": "^1.6.0",
+				"@storybook/icons": "^2.0.1",
 				"@testing-library/jest-dom": "^6.6.3",
 				"@testing-library/user-event": "^14.6.1",
 				"@vitest/expect": "3.2.4",
-				"@vitest/mocker": "3.2.4",
 				"@vitest/spy": "3.2.4",
-				"esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0",
+				"esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0",
+				"open": "^10.2.0",
 				"recast": "^0.23.5",
-				"semver": "^7.6.2",
+				"semver": "^7.7.3",
+				"use-sync-external-store": "^1.5.0",
 				"ws": "^8.18.0"
 			},
 			"bin": {
@@ -7985,6 +9333,60 @@
 				}
 			}
 		},
+		"node_modules/string-width": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+			"integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"eastasianwidth": "^0.2.0",
+				"emoji-regex": "^9.2.2",
+				"strip-ansi": "^7.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/string-width-cjs": {
+			"name": "string-width",
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/string-width-cjs/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/string-width-cjs/node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/stringify-entities": {
 			"version": "4.0.4",
 			"resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
@@ -8015,6 +9417,20 @@
 				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
 			}
 		},
+		"node_modules/strip-ansi-cjs": {
+			"name": "strip-ansi",
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/strip-ansi/node_modules/ansi-regex": {
 			"version": "6.1.0",
 			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
@@ -8319,9 +9735,9 @@
 			}
 		},
 		"node_modules/svelte2tsx": {
-			"version": "0.7.45",
-			"resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.7.45.tgz",
-			"integrity": "sha512-cSci+mYGygYBHIZLHlm/jYlEc1acjAHqaQaDFHdEBpUueM9kSTnPpvPtSl5VkJOU1qSJ7h1K+6F/LIUYiqC8VA==",
+			"version": "0.7.47",
+			"resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.7.47.tgz",
+			"integrity": "sha512-1aw/MFKVPM96OBevJdC12do2an9t5Zwr3Va9amLgTLpJje36ibD1iIHpuqCYWUrdR9vw6g6btKGQPmsqE8ZYCw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -8391,23 +9807,63 @@
 			}
 		},
 		"node_modules/tar": {
-			"version": "7.4.3",
-			"resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
-			"integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+			"version": "7.5.7",
+			"resolved": "https://registry.npmjs.org/tar/-/tar-7.5.7.tgz",
+			"integrity": "sha512-fov56fJiRuThVFXD6o6/Q354S7pnWMJIVlDBYijsTNx6jKSE4pvrDTs6lUnmGvNyfJwFQQwWy3owKz1ucIhveQ==",
 			"dev": true,
-			"license": "ISC",
+			"license": "BlueOak-1.0.0",
 			"dependencies": {
 				"@isaacs/fs-minipass": "^4.0.0",
 				"chownr": "^3.0.0",
 				"minipass": "^7.1.2",
-				"minizlib": "^3.0.1",
-				"mkdirp": "^3.0.1",
+				"minizlib": "^3.1.0",
 				"yallist": "^5.0.0"
 			},
 			"engines": {
 				"node": ">=18"
 			}
 		},
+		"node_modules/test-exclude": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-7.0.1.tgz",
+			"integrity": "sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"@istanbuljs/schema": "^0.1.2",
+				"glob": "^10.4.1",
+				"minimatch": "^9.0.4"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/test-exclude/node_modules/brace-expansion": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+			"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/test-exclude/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
 		"node_modules/tiny-invariant": {
 			"version": "1.3.3",
 			"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -8489,6 +9945,15 @@
 				"node": ">=8.0"
 			}
 		},
+		"node_modules/toidentifier": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+			"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.6"
+			}
+		},
 		"node_modules/totalist": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
@@ -8520,9 +9985,9 @@
 			}
 		},
 		"node_modules/ts-api-utils": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
-			"integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+			"version": "2.4.0",
+			"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
+			"integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
@@ -8585,6 +10050,20 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/type-is": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
+			"integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+			"license": "MIT",
+			"dependencies": {
+				"content-type": "^1.0.5",
+				"media-typer": "^1.1.0",
+				"mime-types": "^3.0.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/typescript": {
 			"version": "5.8.3",
 			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
@@ -8625,9 +10104,9 @@
 			}
 		},
 		"node_modules/undici-types": {
-			"version": "6.21.0",
-			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
-			"integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+			"version": "7.16.0",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+			"integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
 			"dev": true,
 			"license": "MIT"
 		},
@@ -8813,10 +10292,19 @@
 				"node": ">= 10.0.0"
 			}
 		},
+		"node_modules/unpipe": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+			"integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/unplugin": {
-			"version": "2.3.10",
-			"resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.10.tgz",
-			"integrity": "sha512-6NCPkv1ClwH+/BGE9QeoTIl09nuiAt0gS28nn1PvYXsGKRwM2TCbFA2QiilmehPDTXIe684k4rZI1yl3A1PCUw==",
+			"version": "2.3.11",
+			"resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.11.tgz",
+			"integrity": "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -8846,6 +10334,16 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/use-sync-external-store": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+			"integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+			}
+		},
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -8867,6 +10365,15 @@
 				"uuid": "dist-node/bin/uuid"
 			}
 		},
+		"node_modules/vary": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+			"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/vfile": {
 			"version": "6.0.3",
 			"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
@@ -9239,7 +10746,6 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
 			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-			"dev": true,
 			"license": "ISC",
 			"dependencies": {
 				"isexe": "^2.0.0"
@@ -9278,6 +10784,97 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/wrap-ansi": {
+			"version": "8.1.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+			"integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^6.1.0",
+				"string-width": "^5.0.1",
+				"strip-ansi": "^7.0.1"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
+		},
+		"node_modules/wrap-ansi-cjs": {
+			"name": "wrap-ansi",
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+			"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+			}
+		},
+		"node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/wrap-ansi-cjs/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/wrap-ansi/node_modules/ansi-styles": {
+			"version": "6.2.3",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+			"integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
+		"node_modules/wrappy": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+			"license": "ISC"
+		},
 		"node_modules/ws": {
 			"version": "8.18.3",
 			"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
@@ -9300,6 +10897,22 @@
 				}
 			}
 		},
+		"node_modules/wsl-utils": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
+			"integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-wsl": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/yallist": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
@@ -9329,6 +10942,25 @@
 			"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
 			"license": "MIT"
 		},
+		"node_modules/zod": {
+			"version": "4.2.1",
+			"resolved": "https://registry.npmjs.org/zod/-/zod-4.2.1.tgz",
+			"integrity": "sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==",
+			"license": "MIT",
+			"peer": true,
+			"funding": {
+				"url": "https://github.com/sponsors/colinhacks"
+			}
+		},
+		"node_modules/zod-to-json-schema": {
+			"version": "3.25.1",
+			"resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.25.1.tgz",
+			"integrity": "sha512-pM/SU9d3YAggzi6MtR4h7ruuQlqKtad8e9S0fmxcMi+ueAK5Korys/aWcV9LIIHTVbj01NdzxcnXSN+O74ZIVA==",
+			"license": "ISC",
+			"peerDependencies": {
+				"zod": "^3.25 || ^4"
+			}
+		},
 		"node_modules/zwitch": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/tools/server/webui/package.json b/tools/server/webui/package.json
index a361ce76e38..f5cdc9e47f0 100644
--- a/tools/server/webui/package.json
+++ b/tools/server/webui/package.json
@@ -23,31 +23,32 @@
 		"cleanup": "rm -rf .svelte-kit build node_modules test-results"
 	},
 	"devDependencies": {
-		"@chromatic-com/storybook": "^4.1.2",
+		"@chromatic-com/storybook": "^5.0.0",
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
 		"@internationalized/date": "^3.10.1",
 		"@lucide/svelte": "^0.515.0",
 		"@playwright/test": "^1.49.1",
-		"@storybook/addon-a11y": "^10.0.7",
-		"@storybook/addon-docs": "^10.0.7",
+		"@storybook/addon-a11y": "^10.2.4",
+		"@storybook/addon-docs": "^10.2.4",
 		"@storybook/addon-svelte-csf": "^5.0.10",
-		"@storybook/addon-vitest": "^10.0.7",
-		"@storybook/sveltekit": "^10.0.7",
+		"@storybook/addon-vitest": "^10.2.4",
+		"@storybook/sveltekit": "^10.2.4",
 		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.48.4",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
 		"@tailwindcss/forms": "^0.5.9",
 		"@tailwindcss/typography": "^0.5.15",
 		"@tailwindcss/vite": "^4.0.0",
-		"@types/node": "^22",
+		"@types/node": "^24",
 		"@vitest/browser": "^3.2.3",
+		"@vitest/coverage-v8": "^3.2.3",
 		"bits-ui": "^2.14.4",
 		"clsx": "^2.1.1",
 		"dexie": "^4.0.11",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-storybook": "^10.0.7",
+		"eslint-plugin-storybook": "^10.2.4",
 		"eslint-plugin-svelte": "^3.0.0",
 		"fflate": "^0.8.2",
 		"globals": "^16.0.0",
@@ -61,7 +62,7 @@
 		"rehype-katex": "^7.0.1",
 		"remark-math": "^6.0.0",
 		"sass": "^1.93.3",
-		"storybook": "^10.0.7",
+		"storybook": "^10.2.4",
 		"svelte": "^5.38.2",
 		"svelte-check": "^4.0.0",
 		"tailwind-merge": "^3.3.1",
@@ -78,6 +79,7 @@
 		"vitest-browser-svelte": "^0.1.0"
 	},
 	"dependencies": {
+		"@modelcontextprotocol/sdk": "^1.25.1",
 		"highlight.js": "^11.11.1",
 		"mode-watcher": "^1.1.0",
 		"pdfjs-dist": "^5.4.54",
@@ -89,6 +91,7 @@
 		"remark-html": "^16.0.1",
 		"remark-rehype": "^11.1.2",
 		"svelte-sonner": "^1.0.5",
-		"unist-util-visit": "^5.0.0"
+		"unist-util-visit": "^5.0.0",
+		"zod": "^4.2.1"
 	}
 }
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpPrompt.svelte b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpPrompt.svelte
new file mode 100644
index 00000000000..5fba2b3d19e
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpPrompt.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { ChatMessageMcpPromptContent, ActionIconRemove } from '$lib/components/app';
+	import type { DatabaseMessageExtraMcpPrompt } from '$lib/types';
+	import { McpPromptVariant } from '$lib/enums';
+
+	interface Props {
+		class?: string;
+		prompt: DatabaseMessageExtraMcpPrompt;
+		readonly?: boolean;
+		isLoading?: boolean;
+		loadError?: string;
+		onRemove?: () => void;
+	}
+
+	let {
+		class: className = '',
+		prompt,
+		readonly = false,
+		isLoading = false,
+		loadError,
+		onRemove
+	}: Props = $props();
+</script>
+
+<div class="group relative {className}">
+	<ChatMessageMcpPromptContent
+		{prompt}
+		variant={McpPromptVariant.ATTACHMENT}
+		{isLoading}
+		{loadError}
+	/>
+
+	{#if !readonly && onRemove}
+		<div
+			class="absolute top-10 right-2 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100"
+		>
+			<ActionIconRemove id={prompt.name} onRemove={() => onRemove?.()} />
+		</div>
+	{/if}
+</div>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpResource.svelte b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpResource.svelte
new file mode 100644
index 00000000000..05e5481cb55
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpResource.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { Loader2, AlertCircle } from '@lucide/svelte';
+	import { cn } from '$lib/components/ui/utils';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import type { MCPResourceAttachment } from '$lib/types';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { ActionIconRemove } from '$lib/components/app';
+	import { getResourceIcon } from '$lib/utils';
+
+	interface Props {
+		attachment: MCPResourceAttachment;
+		onRemove?: (attachmentId: string) => void;
+		onClick?: () => void;
+		class?: string;
+	}
+
+	let { attachment, onRemove, onClick, class: className }: Props = $props();
+
+	function getStatusClass(attachment: MCPResourceAttachment): string {
+		if (attachment.error) return 'border-red-500/50 bg-red-500/10';
+		if (attachment.loading) return 'border-border/50 bg-muted/30';
+		return 'border-border/50 bg-muted/30';
+	}
+
+	const ResourceIcon = $derived(
+		getResourceIcon(attachment.resource.mimeType, attachment.resource.uri)
+	);
+	const serverName = $derived(mcpStore.getServerDisplayName(attachment.resource.serverName));
+	const favicon = $derived(mcpStore.getServerFavicon(attachment.resource.serverName));
+</script>
+
+<Tooltip.Root>
+	<Tooltip.Trigger>
+		<button
+			type="button"
+			class={cn(
+				'flex flex-shrink-0 items-center gap-1.5 rounded-md border px-2 py-0.75 text-sm transition-colors',
+				getStatusClass(attachment),
+				onClick && 'cursor-pointer hover:bg-muted/50',
+				className
+			)}
+			onclick={onClick}
+			disabled={!onClick}
+		>
+			{#if attachment.loading}
+				<Loader2 class="h-3 w-3 animate-spin text-muted-foreground" />
+			{:else if attachment.error}
+				<AlertCircle class="h-3 w-3 text-red-500" />
+			{:else}
+				<ResourceIcon class="h-3 w-3 text-muted-foreground" />
+			{/if}
+
+			<span class="max-w-[150px] truncate text-xs">
+				{attachment.resource.title || attachment.resource.name}
+			</span>
+
+			{#if onRemove}
+				<ActionIconRemove class="-mr-2 bg-transparent" id={attachment.id} {onRemove} />
+			{/if}
+		</button>
+	</Tooltip.Trigger>
+
+	<Tooltip.Content>
+		<div class="flex items-center gap-1 text-xs">
+			{#if favicon}
+				<img
+					src={favicon}
+					alt=""
+					class="h-3 w-3 shrink-0 rounded-sm"
+					onerror={(e) => {
+						(e.currentTarget as HTMLImageElement).style.display = 'none';
+					}}
+				/>
+			{/if}
+
+			<span class="truncate">
+				{serverName}
+			</span>
+		</div>
+	</Tooltip.Content>
+</Tooltip.Root>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpResources.svelte b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpResources.svelte
new file mode 100644
index 00000000000..341bf32c058
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentMcpResources.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import {
+		mcpResourceAttachments,
+		mcpHasResourceAttachments
+	} from '$lib/stores/mcp-resources.svelte';
+	import { ChatAttachmentMcpResource, HorizontalScrollCarousel } from '$lib/components/app';
+
+	interface Props {
+		class?: string;
+		onResourceClick?: (uri: string) => void;
+	}
+
+	let { class: className, onResourceClick }: Props = $props();
+
+	const attachments = $derived(mcpResourceAttachments());
+	const hasAttachments = $derived(mcpHasResourceAttachments());
+
+	function handleRemove(attachmentId: string) {
+		mcpStore.removeResourceAttachment(attachmentId);
+	}
+
+	function handleResourceClick(uri: string) {
+		onResourceClick?.(uri);
+	}
+</script>
+
+{#if hasAttachments}
+	<div class={className}>
+		<HorizontalScrollCarousel gapSize="2">
+			{#each attachments as attachment, i (attachment.id)}
+				<ChatAttachmentMcpResource
+					class={i === 0 ? 'ml-3' : ''}
+					{attachment}
+					onRemove={handleRemove}
+					onClick={() => handleResourceClick(attachment.resource.uri)}
+				/>
+			{/each}
+		</HorizontalScrollCarousel>
+	</div>
+{/if}
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentPreview.svelte b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentPreview.svelte
index 0b0bf52ad98..f05bdd8a03a 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentPreview.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentPreview.svelte
@@ -8,7 +8,8 @@
 		isImageFile,
 		isPdfFile,
 		isAudioFile,
-		getLanguageFromFilename
+		getLanguageFromFilename,
+		createBase64DataUrl
 	} from '$lib/utils';
 	import { convertPDFToImage } from '$lib/utils/browser-only';
 	import { modelsStore } from '$lib/stores/models.svelte';
@@ -255,7 +256,7 @@
 						<audio
 							controls
 							class="mb-4 w-full"
-							src={`data:${attachment.mimeType};base64,${attachment.base64Data}`}
+							src={createBase64DataUrl(attachment.mimeType, attachment.base64Data)}
 						>
 							Your browser does not support the audio element.
 						</audio>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList.svelte b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList.svelte
index a1f5af54e8c..a3d37b42a3b 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList.svelte
@@ -1,8 +1,21 @@
 <script lang="ts">
-	import { ChatAttachmentThumbnailImage, ChatAttachmentThumbnailFile } from '$lib/components/app';
+	import {
+		ChatAttachmentMcpPrompt,
+		ChatAttachmentMcpResource,
+		ChatAttachmentThumbnailImage,
+		ChatAttachmentThumbnailFile,
+		HorizontalScrollCarousel,
+		DialogChatAttachmentPreview,
+		DialogChatAttachmentsViewAll,
+		DialogMcpResourcePreview
+	} from '$lib/components/app';
 	import { Button } from '$lib/components/ui/button';
-	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
-	import { DialogChatAttachmentPreview, DialogChatAttachmentsViewAll } from '$lib/components/app';
+	import { AttachmentType } from '$lib/enums';
+	import type {
+		DatabaseMessageExtraMcpPrompt,
+		DatabaseMessageExtraMcpResource,
+		MCPResourceAttachment
+	} from '$lib/types';
 	import { getAttachmentDisplayItems } from '$lib/utils';
 
 	interface Props {
@@ -41,12 +54,12 @@
 
 	let displayItems = $derived(getAttachmentDisplayItems({ uploadedFiles, attachments }));
 
-	let canScrollLeft = $state(false);
-	let canScrollRight = $state(false);
+	let carouselRef: HorizontalScrollCarousel | undefined = $state();
 	let isScrollable = $state(false);
 	let previewDialogOpen = $state(false);
 	let previewItem = $state<ChatAttachmentPreviewItem | null>(null);
-	let scrollContainer: HTMLDivElement | undefined = $state();
+	let mcpResourcePreviewOpen = $state(false);
+	let mcpResourcePreviewExtra = $state<DatabaseMessageExtraMcpResource | null>(null);
 	let showViewAll = $derived(limitToSingleRow && displayItems.length > 0 && isScrollable);
 	let viewAllDialogOpen = $state(false);
 
@@ -65,41 +78,29 @@
 		previewDialogOpen = true;
 	}
 
-	function scrollLeft(event?: MouseEvent) {
-		event?.stopPropagation();
-		event?.preventDefault();
-
-		if (!scrollContainer) return;
-
-		scrollContainer.scrollBy({ left: scrollContainer.clientWidth * -0.67, behavior: 'smooth' });
-	}
-
-	function scrollRight(event?: MouseEvent) {
-		event?.stopPropagation();
-		event?.preventDefault();
-
-		if (!scrollContainer) return;
-
-		scrollContainer.scrollBy({ left: scrollContainer.clientWidth * 0.67, behavior: 'smooth' });
+	function openMcpResourcePreview(extra: DatabaseMessageExtraMcpResource) {
+		mcpResourcePreviewExtra = extra;
+		mcpResourcePreviewOpen = true;
 	}
 
-	function updateScrollButtons() {
-		if (!scrollContainer) return;
-
-		const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;
-
-		canScrollLeft = scrollLeft > 0;
-		canScrollRight = scrollLeft < scrollWidth - clientWidth - 1;
-		isScrollable = scrollWidth > clientWidth;
+	function toMcpResourceAttachment(
+		extra: DatabaseMessageExtraMcpResource,
+		id: string
+	): MCPResourceAttachment {
+		return {
+			id,
+			resource: {
+				uri: extra.uri,
+				name: extra.name,
+				title: extra.name,
+				serverName: extra.serverName
+			}
+		};
 	}
 
 	$effect(() => {
-		if (scrollContainer && displayItems.length) {
-			scrollContainer.scrollLeft = 0;
-
-			setTimeout(() => {
-				updateScrollButtons();
-			}, 0);
+		if (carouselRef && displayItems.length) {
+			carouselRef.resetScroll();
 		}
 	});
 </script>
@@ -107,67 +108,74 @@
 {#if displayItems.length > 0}
 	<div class={className} {style}>
 		{#if limitToSingleRow}
-			<div class="relative">
-				<button
-					class="absolute top-1/2 left-4 z-10 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full bg-foreground/15 shadow-md backdrop-blur-xs transition-opacity hover:bg-foreground/35 {canScrollLeft
-						? 'opacity-100'
-						: 'pointer-events-none opacity-0'}"
-					onclick={scrollLeft}
-					aria-label="Scroll left"
-				>
-					<ChevronLeft class="h-4 w-4" />
-				</button>
-
-				<div
-					class="scrollbar-hide flex items-start gap-3 overflow-x-auto"
-					bind:this={scrollContainer}
-					onscroll={updateScrollButtons}
-				>
-					{#each displayItems as item (item.id)}
-						{#if item.isImage && item.preview}
-							<ChatAttachmentThumbnailImage
-								class="flex-shrink-0 cursor-pointer {limitToSingleRow
-									? 'first:ml-4 last:mr-4'
-									: ''}"
-								id={item.id}
-								name={item.name}
-								preview={item.preview}
-								{readonly}
-								onRemove={onFileRemove}
-								height={imageHeight}
-								width={imageWidth}
-								{imageClass}
-								onClick={(event) => openPreview(item, event)}
-							/>
-						{:else}
-							<ChatAttachmentThumbnailFile
-								class="flex-shrink-0 cursor-pointer {limitToSingleRow
+			<HorizontalScrollCarousel
+				bind:this={carouselRef}
+				onScrollableChange={(scrollable) => (isScrollable = scrollable)}
+			>
+				{#each displayItems as item (item.id)}
+					{#if item.isMcpPrompt}
+						{@const mcpPrompt =
+							item.attachment?.type === AttachmentType.MCP_PROMPT
+								? (item.attachment as DatabaseMessageExtraMcpPrompt)
+								: item.uploadedFile?.mcpPrompt
+									? {
+											type: AttachmentType.MCP_PROMPT as const,
+											name: item.name,
+											serverName: item.uploadedFile.mcpPrompt.serverName,
+											promptName: item.uploadedFile.mcpPrompt.promptName,
+											content: item.textContent ?? '',
+											arguments: item.uploadedFile.mcpPrompt.arguments
+										}
+									: null}
+						{#if mcpPrompt}
+							<ChatAttachmentMcpPrompt
+								class="max-w-[300px] min-w-[200px] flex-shrink-0 {limitToSingleRow
 									? 'first:ml-4 last:mr-4'
 									: ''}"
-								id={item.id}
-								name={item.name}
-								size={item.size}
+								prompt={mcpPrompt}
 								{readonly}
-								onRemove={onFileRemove}
-								textContent={item.textContent}
-								attachment={item.attachment}
-								uploadedFile={item.uploadedFile}
-								onClick={(event) => openPreview(item, event)}
+								isLoading={item.isLoading}
+								loadError={item.loadError}
+								onRemove={onFileRemove ? () => onFileRemove(item.id) : undefined}
 							/>
 						{/if}
-					{/each}
-				</div>
+					{:else if item.isMcpResource && item.attachment?.type === AttachmentType.MCP_RESOURCE}
+						{@const mcpResource = item.attachment as DatabaseMessageExtraMcpResource}
 
-				<button
-					class="absolute top-1/2 right-4 z-10 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full bg-foreground/15 shadow-md backdrop-blur-xs transition-opacity hover:bg-foreground/35 {canScrollRight
-						? 'opacity-100'
-						: 'pointer-events-none opacity-0'}"
-					onclick={scrollRight}
-					aria-label="Scroll right"
-				>
-					<ChevronRight class="h-4 w-4" />
-				</button>
-			</div>
+						<ChatAttachmentMcpResource
+							class="flex-shrink-0 {limitToSingleRow ? 'first:ml-4 last:mr-4' : ''}"
+							attachment={toMcpResourceAttachment(mcpResource, item.id)}
+							onClick={() => openMcpResourcePreview(mcpResource)}
+						/>
+					{:else if item.isImage && item.preview}
+						<ChatAttachmentThumbnailImage
+							class="flex-shrink-0 cursor-pointer {limitToSingleRow ? 'first:ml-4 last:mr-4' : ''}"
+							id={item.id}
+							name={item.name}
+							preview={item.preview}
+							{readonly}
+							onRemove={onFileRemove}
+							height={imageHeight}
+							width={imageWidth}
+							{imageClass}
+							onClick={(event) => openPreview(item, event)}
+						/>
+					{:else}
+						<ChatAttachmentThumbnailFile
+							class="flex-shrink-0 cursor-pointer {limitToSingleRow ? 'first:ml-4 last:mr-4' : ''}"
+							id={item.id}
+							name={item.name}
+							size={item.size}
+							{readonly}
+							onRemove={onFileRemove}
+							textContent={item.textContent}
+							attachment={item.attachment}
+							uploadedFile={item.uploadedFile}
+							onClick={(event) => openPreview(item, event)}
+						/>
+					{/if}
+				{/each}
+			</HorizontalScrollCarousel>
 
 			{#if showViewAll}
 				<div class="mt-2 -mr-2 flex justify-end px-4">
@@ -185,7 +193,39 @@
 		{:else}
 			<div class="flex flex-wrap items-start justify-end gap-3">
 				{#each displayItems as item (item.id)}
-					{#if item.isImage && item.preview}
+					{#if item.isMcpPrompt}
+						{@const mcpPrompt =
+							item.attachment?.type === AttachmentType.MCP_PROMPT
+								? (item.attachment as DatabaseMessageExtraMcpPrompt)
+								: item.uploadedFile?.mcpPrompt
+									? {
+											type: AttachmentType.MCP_PROMPT as const,
+											name: item.name,
+											serverName: item.uploadedFile.mcpPrompt.serverName,
+											promptName: item.uploadedFile.mcpPrompt.promptName,
+											content: item.textContent ?? '',
+											arguments: item.uploadedFile.mcpPrompt.arguments
+										}
+									: null}
+
+						{#if mcpPrompt}
+							<ChatAttachmentMcpPrompt
+								class="max-w-[300px] min-w-[200px]"
+								prompt={mcpPrompt}
+								{readonly}
+								isLoading={item.isLoading}
+								loadError={item.loadError}
+								onRemove={onFileRemove ? () => onFileRemove(item.id) : undefined}
+							/>
+						{/if}
+					{:else if item.isMcpResource && item.attachment?.type === AttachmentType.MCP_RESOURCE}
+						{@const mcpResource = item.attachment as DatabaseMessageExtraMcpResource}
+
+						<ChatAttachmentMcpResource
+							attachment={toMcpResourceAttachment(mcpResource, item.id)}
+							onClick={() => openMcpResourcePreview(mcpResource)}
+						/>
+					{:else if item.isImage && item.preview}
 						<ChatAttachmentThumbnailImage
 							class="cursor-pointer"
 							id={item.id}
@@ -241,3 +281,7 @@
 	{imageClass}
 	{activeModelId}
 />
+
+{#if mcpResourcePreviewExtra}
+	<DialogMcpResourcePreview bind:open={mcpResourcePreviewOpen} extra={mcpResourcePreviewExtra} />
+{/if}
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
index e335f6c546d..fda3124a2e4 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
@@ -1,20 +1,29 @@
 <script lang="ts">
-	import { afterNavigate } from '$app/navigation';
 	import {
 		ChatAttachmentsList,
+		ChatAttachmentMcpResources,
 		ChatFormActions,
 		ChatFormFileInputInvisible,
-		ChatFormHelperText,
+		ChatFormPromptPicker,
 		ChatFormTextarea
 	} from '$lib/components/app';
-	import { INPUT_CLASSES } from '$lib/constants/input-classes';
+	import { DialogMcpResources } from '$lib/components/app/dialogs';
+	import { INPUT_CLASSES } from '$lib/constants/css-classes';
 	import { SETTING_CONFIG_DEFAULT } from '$lib/constants/settings-config';
+	import {
+		CLIPBOARD_CONTENT_QUOTE_PREFIX,
+		INITIAL_FILE_SIZE,
+		PROMPT_CONTENT_SEPARATOR
+	} from '$lib/constants/chat-form';
+	import { ContentPartType, KeyboardKey, MimeTypeText, SpecialFileType } from '$lib/enums';
 	import { config } from '$lib/stores/settings.svelte';
 	import { modelOptions, selectedModelId } from '$lib/stores/models.svelte';
 	import { isRouterMode } from '$lib/stores/server.svelte';
 	import { chatStore } from '$lib/stores/chat.svelte';
-	import { activeMessages } from '$lib/stores/conversations.svelte';
-	import { MimeTypeText } from '$lib/enums';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { mcpHasResourceAttachments } from '$lib/stores/mcp-resources.svelte';
+	import { conversationsStore, activeMessages } from '$lib/stores/conversations.svelte';
+	import type { GetPromptResult, MCPPromptInfo, PromptMessage } from '$lib/types';
 	import { isIMEComposing, parseClipboardContent } from '$lib/utils';
 	import {
 		AudioRecorder,
@@ -25,68 +34,95 @@
 	import { onMount } from 'svelte';
 
 	interface Props {
+		// Data
+		attachments?: DatabaseMessageExtra[];
+		uploadedFiles?: ChatUploadedFile[];
+		value?: string;
+
+		// UI State
 		class?: string;
 		disabled?: boolean;
-		initialMessage?: string;
 		isLoading?: boolean;
-		onFileRemove?: (fileId: string) => void;
-		onFileUpload?: (files: File[]) => void;
-		onSend?: (message: string, files?: ChatUploadedFile[]) => Promise<boolean>;
+		placeholder?: string;
+		showMcpPromptButton?: boolean;
+
+		// Event Handlers
+		onAttachmentRemove?: (index: number) => void;
+		onFilesAdd?: (files: File[]) => void;
 		onStop?: () => void;
-		onSystemPromptAdd?: (draft: { message: string; files: ChatUploadedFile[] }) => void;
-		showHelperText?: boolean;
-		uploadedFiles?: ChatUploadedFile[];
+		onSubmit?: () => void;
+		onSystemPromptClick?: (draft: { message: string; files: ChatUploadedFile[] }) => void;
+		onUploadedFileRemove?: (fileId: string) => void;
+		onUploadedFilesChange?: (files: ChatUploadedFile[]) => void;
+		onValueChange?: (value: string) => void;
 	}
 
 	let {
-		class: className,
+		attachments = [],
+		class: className = '',
 		disabled = false,
-		initialMessage = '',
 		isLoading = false,
-		onFileRemove,
-		onFileUpload,
-		onSend,
+		placeholder = 'Type a message...',
+		showMcpPromptButton = false,
+		uploadedFiles = $bindable([]),
+		value = $bindable(''),
+		onAttachmentRemove,
+		onFilesAdd,
 		onStop,
-		onSystemPromptAdd,
-		showHelperText = true,
-		uploadedFiles = $bindable([])
+		onSubmit,
+		onSystemPromptClick,
+		onUploadedFileRemove,
+		onUploadedFilesChange,
+		onValueChange
 	}: Props = $props();
 
+	/**
+	 *
+	 *
+	 * STATE
+	 *
+	 *
+	 */
+
+	// Component References
 	let audioRecorder: AudioRecorder | undefined;
 	let chatFormActionsRef: ChatFormActions | undefined = $state(undefined);
-	let currentConfig = $derived(config());
 	let fileInputRef: ChatFormFileInputInvisible | undefined = $state(undefined);
+	let promptPickerRef: ChatFormPromptPicker | undefined = $state(undefined);
+	let textareaRef: ChatFormTextarea | undefined = $state(undefined);
+
+	// Audio Recording State
 	let isRecording = $state(false);
-	let message = $derived(initialMessage);
+	let recordingSupported = $state(false);
+
+	// Prompt Picker State
+	let isPromptPickerOpen = $state(false);
+	let promptSearchQuery = $state('');
+
+	// Resource Picker State
+	let isResourcePickerOpen = $state(false);
+	let preSelectedResourceUri = $state<string | undefined>(undefined);
+
+	/**
+	 *
+	 *
+	 * DERIVED STATE
+	 *
+	 *
+	 */
+
+	// Configuration
+	let currentConfig = $derived(config());
 	let pasteLongTextToFileLength = $derived.by(() => {
 		const n = Number(currentConfig.pasteLongTextToFileLen);
 		return Number.isNaN(n) ? Number(SETTING_CONFIG_DEFAULT.pasteLongTextToFileLen) : n;
 	});
-	let previousIsLoading = $derived(isLoading);
-	let previousInitialMessage = $derived(initialMessage);
-	let recordingSupported = $state(false);
-	let textareaRef: ChatFormTextarea | undefined = $state(undefined);
-
-	// Sync message when initialMessage prop changes (e.g., after draft restoration)
-	$effect(() => {
-		if (initialMessage !== previousInitialMessage) {
-			message = initialMessage;
-			previousInitialMessage = initialMessage;
-		}
-	});
 
-	function handleSystemPromptClick() {
-		onSystemPromptAdd?.({ message, files: uploadedFiles });
-	}
-
-	// Check if model is selected (in ROUTER mode)
+	// Model Selection Logic
+	let isRouter = $derived(isRouterMode());
 	let conversationModel = $derived(
 		chatStore.getConversationModel(activeMessages() as DatabaseMessage[])
 	);
-	let isRouter = $derived(isRouterMode());
-	let hasModelSelected = $derived(!isRouter || !!conversationModel || !!selectedModelId());
-
-	// Get active model ID for capability detection
 	let activeModelId = $derived.by(() => {
 		const options = modelOptions();
 
@@ -94,14 +130,12 @@
 			return options.length > 0 ? options[0].model : null;
 		}
 
-		// First try user-selected model
 		const selectedId = selectedModelId();
 		if (selectedId) {
 			const model = options.find((m) => m.id === selectedId);
 			if (model) return model.model;
 		}
 
-		// Fallback to conversation model
 		if (conversationModel) {
 			const model = options.find((m) => m.model === conversationModel);
 			if (model) return model.model;
@@ -110,46 +144,132 @@
 		return null;
 	});
 
-	function checkModelSelected(): boolean {
+	// Form Validation State
+	let hasModelSelected = $derived(!isRouter || !!conversationModel || !!selectedModelId());
+	let hasLoadingAttachments = $derived(uploadedFiles.some((f) => f.isLoading));
+	let hasAttachments = $derived(
+		(attachments && attachments.length > 0) || (uploadedFiles && uploadedFiles.length > 0)
+	);
+	let canSubmit = $derived(value.trim().length > 0 || hasAttachments);
+
+	/**
+	 *
+	 *
+	 * LIFECYCLE
+	 *
+	 *
+	 */
+
+	onMount(() => {
+		recordingSupported = isAudioRecordingSupported();
+		audioRecorder = new AudioRecorder();
+	});
+
+	/**
+	 *
+	 *
+	 * PUBLIC API
+	 *
+	 *
+	 */
+
+	export function focus() {
+		textareaRef?.focus();
+	}
+
+	export function resetTextareaHeight() {
+		textareaRef?.resetHeight();
+	}
+
+	export function openModelSelector() {
+		chatFormActionsRef?.openModelSelector();
+	}
+
+	/**
+	 * Check if a model is selected, open selector if not
+	 * @returns true if model is selected, false otherwise
+	 */
+	export function checkModelSelected(): boolean {
 		if (!hasModelSelected) {
-			// Open the model selector
 			chatFormActionsRef?.openModelSelector();
 			return false;
 		}
-
 		return true;
 	}
 
+	/**
+	 *
+	 *
+	 * EVENT HANDLERS - File Management
+	 *
+	 *
+	 */
+
+	/**
+	 *
+	 *
+	 * EVENT HANDLERS - File Management
+	 *
+	 *
+	 */
+
 	function handleFileSelect(files: File[]) {
-		onFileUpload?.(files);
+		onFilesAdd?.(files);
 	}
 
 	function handleFileUpload() {
 		fileInputRef?.click();
 	}
 
-	async function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Enter' && !event.shiftKey && !isIMEComposing(event)) {
-			event.preventDefault();
-
-			if ((!message.trim() && uploadedFiles.length === 0) || disabled || isLoading) return;
+	function handleFileRemove(fileId: string) {
+		if (fileId.startsWith('attachment-')) {
+			const index = parseInt(fileId.replace('attachment-', ''), 10);
+			if (!isNaN(index) && index >= 0 && index < attachments.length) {
+				onAttachmentRemove?.(index);
+			}
+		} else {
+			onUploadedFileRemove?.(fileId);
+		}
+	}
 
-			if (!checkModelSelected()) return;
+	/**
+	 *
+	 *
+	 * EVENT HANDLERS - Input & Keyboard
+	 *
+	 *
+	 */
+
+	function handleInput() {
+		const perChatOverrides = conversationsStore.getAllMcpServerOverrides();
+		const hasServers = mcpStore.hasEnabledServers(perChatOverrides);
+
+		if (value.startsWith('/') && hasServers) {
+			isPromptPickerOpen = true;
+			promptSearchQuery = value.slice(1);
+		} else {
+			isPromptPickerOpen = false;
+			promptSearchQuery = '';
+		}
+	}
 
-			const messageToSend = message.trim();
-			const filesToSend = [...uploadedFiles];
+	function handleKeydown(event: KeyboardEvent) {
+		if (isPromptPickerOpen && promptPickerRef?.handleKeydown(event)) {
+			return;
+		}
 
-			message = '';
-			uploadedFiles = [];
+		if (event.key === KeyboardKey.ESCAPE && isPromptPickerOpen) {
+			isPromptPickerOpen = false;
+			promptSearchQuery = '';
+			return;
+		}
 
-			textareaRef?.resetHeight();
+		if (event.key === KeyboardKey.ENTER && !event.shiftKey && !isIMEComposing(event)) {
+			event.preventDefault();
 
-			const success = await onSend?.(messageToSend, filesToSend);
+			if (!canSubmit || disabled || isLoading || hasLoadingAttachments) return;
 
-			if (!success) {
-				message = messageToSend;
-				uploadedFiles = filesToSend;
-			}
+			onSubmit?.();
 		}
 	}
 
@@ -163,29 +283,51 @@
 
 		if (files.length > 0) {
 			event.preventDefault();
-			onFileUpload?.(files);
-
+			onFilesAdd?.(files);
 			return;
 		}
 
 		const text = event.clipboardData.getData(MimeTypeText.PLAIN);
 
-		if (text.startsWith('"')) {
+		if (text.startsWith(CLIPBOARD_CONTENT_QUOTE_PREFIX)) {
 			const parsed = parseClipboardContent(text);
 
-			if (parsed.textAttachments.length > 0) {
+			if (parsed.textAttachments.length > 0 || parsed.mcpPromptAttachments.length > 0) {
 				event.preventDefault();
-
-				message = parsed.message;
-
-				const attachmentFiles = parsed.textAttachments.map(
-					(att) =>
-						new File([att.content], att.name, {
-							type: MimeTypeText.PLAIN
-						})
-				);
-
-				onFileUpload?.(attachmentFiles);
+				value = parsed.message;
+				onValueChange?.(parsed.message);
+
+				// Handle text attachments as files
+				if (parsed.textAttachments.length > 0) {
+					const attachmentFiles = parsed.textAttachments.map(
+						(att) =>
+							new File([att.content], att.name, {
+								type: MimeTypeText.PLAIN
+							})
+					);
+					onFilesAdd?.(attachmentFiles);
+				}
+
+				// Handle MCP prompt attachments as ChatUploadedFile with mcpPrompt data
+				if (parsed.mcpPromptAttachments.length > 0) {
+					const mcpPromptFiles: ChatUploadedFile[] = parsed.mcpPromptAttachments.map((att) => ({
+						id: crypto.randomUUID(),
+						name: att.name,
+						size: att.content.length,
+						type: SpecialFileType.MCP_PROMPT,
+						file: new File([att.content], `${att.name}.txt`, { type: MimeTypeText.PLAIN }),
+						isLoading: false,
+						textContent: att.content,
+						mcpPrompt: {
+							serverName: att.serverName,
+							promptName: att.promptName,
+							arguments: att.arguments
+						}
+					}));
+
+					uploadedFiles = [...uploadedFiles, ...mcpPromptFiles];
+					onUploadedFilesChange?.(uploadedFiles);
+				}
 
 				setTimeout(() => {
 					textareaRef?.focus();
@@ -206,14 +348,103 @@
 				type: MimeTypeText.PLAIN
 			});
 
-			onFileUpload?.([textFile]);
+			onFilesAdd?.([textFile]);
 		}
 	}
 
+	/**
+	 *
+	 *
+	 * EVENT HANDLERS - Prompt Picker
+	 *
+	 *
+	 */
+
+	function handlePromptLoadStart(
+		placeholderId: string,
+		promptInfo: MCPPromptInfo,
+		args?: Record<string, string>
+	) {
+		// Only clear the value if the prompt was triggered by typing '/'
+		if (value.startsWith('/')) {
+			value = '';
+			onValueChange?.('');
+		}
+		isPromptPickerOpen = false;
+		promptSearchQuery = '';
+
+		const promptName = promptInfo.title || promptInfo.name;
+		const placeholder: ChatUploadedFile = {
+			id: placeholderId,
+			name: promptName,
+			size: INITIAL_FILE_SIZE,
+			type: SpecialFileType.MCP_PROMPT,
+			file: new File([], 'loading'),
+			isLoading: true,
+			mcpPrompt: {
+				serverName: promptInfo.serverName,
+				promptName: promptInfo.name,
+				arguments: args ? { ...args } : undefined
+			}
+		};
+
+		uploadedFiles = [...uploadedFiles, placeholder];
+		onUploadedFilesChange?.(uploadedFiles);
+		textareaRef?.focus();
+	}
+
+	function handlePromptLoadComplete(placeholderId: string, result: GetPromptResult) {
+		const promptText = result.messages
+			?.map((msg: PromptMessage) => {
+				if (typeof msg.content === 'string') {
+					return msg.content;
+				}
+				if (msg.content.type === ContentPartType.TEXT) {
+					return msg.content.text;
+				}
+				return '';
+			})
+			.filter(Boolean)
+			.join(PROMPT_CONTENT_SEPARATOR);
+
+		uploadedFiles = uploadedFiles.map((f) =>
+			f.id === placeholderId
+				? {
+						...f,
+						isLoading: false,
+						textContent: promptText,
+						size: promptText.length,
+						file: new File([promptText], `${f.name}.txt`, { type: MimeTypeText.PLAIN })
+					}
+				: f
+		);
+		onUploadedFilesChange?.(uploadedFiles);
+	}
+
+	function handlePromptLoadError(placeholderId: string, error: string) {
+		uploadedFiles = uploadedFiles.map((f) =>
+			f.id === placeholderId ? { ...f, isLoading: false, loadError: error } : f
+		);
+		onUploadedFilesChange?.(uploadedFiles);
+	}
+
+	function handlePromptPickerClose() {
+		isPromptPickerOpen = false;
+		promptSearchQuery = '';
+		textareaRef?.focus();
+	}
+
+	/**
+	 *
+	 *
+	 * EVENT HANDLERS - Audio Recording
+	 *
+	 *
+	 */
+
 	async function handleMicClick() {
 		if (!audioRecorder || !recordingSupported) {
 			console.warn('Audio recording not supported');
-
 			return;
 		}
 
@@ -223,7 +454,7 @@
 				const wavBlob = await convertToWav(audioBlob);
 				const audioFile = createAudioFile(wavBlob);
 
-				onFileUpload?.([audioFile]);
+				onFilesAdd?.([audioFile]);
 				isRecording = false;
 			} catch (error) {
 				console.error('Failed to stop recording:', error);
@@ -238,98 +469,100 @@
 			}
 		}
 	}
-
-	function handleStop() {
-		onStop?.();
-	}
-
-	async function handleSubmit(event: SubmitEvent) {
-		event.preventDefault();
-		if ((!message.trim() && uploadedFiles.length === 0) || disabled || isLoading) return;
-
-		// Check if model is selected first
-		if (!checkModelSelected()) return;
-
-		const messageToSend = message.trim();
-		const filesToSend = [...uploadedFiles];
-
-		message = '';
-		uploadedFiles = [];
-
-		textareaRef?.resetHeight();
-
-		const success = await onSend?.(messageToSend, filesToSend);
-
-		if (!success) {
-			message = messageToSend;
-			uploadedFiles = filesToSend;
-		}
-	}
-
-	onMount(() => {
-		setTimeout(() => textareaRef?.focus(), 10);
-		recordingSupported = isAudioRecordingSupported();
-		audioRecorder = new AudioRecorder();
-	});
-
-	afterNavigate(() => {
-		setTimeout(() => textareaRef?.focus(), 10);
-	});
-
-	$effect(() => {
-		if (previousIsLoading && !isLoading) {
-			setTimeout(() => textareaRef?.focus(), 10);
-		}
-
-		previousIsLoading = isLoading;
-	});
 </script>
 
 <ChatFormFileInputInvisible bind:this={fileInputRef} onFileSelect={handleFileSelect} />
 
 <form
-	onsubmit={handleSubmit}
-	class="relative {INPUT_CLASSES} border-radius-bottom-none mx-auto max-w-[48rem] overflow-hidden rounded-3xl backdrop-blur-md {disabled
-		? 'cursor-not-allowed opacity-60'
-		: ''} {className}"
-	data-slot="chat-form"
+	class="relative {className}"
+	onsubmit={(e) => {
+		e.preventDefault();
+		if (!canSubmit || disabled || isLoading || hasLoadingAttachments) return;
+		onSubmit?.();
+	}}
 >
-	<ChatAttachmentsList
-		bind:uploadedFiles
-		{onFileRemove}
-		limitToSingleRow
-		class="py-5"
-		style="scroll-padding: 1rem;"
-		activeModelId={activeModelId ?? undefined}
+	<ChatFormPromptPicker
+		bind:this={promptPickerRef}
+		isOpen={isPromptPickerOpen}
+		searchQuery={promptSearchQuery}
+		onClose={handlePromptPickerClose}
+		onPromptLoadStart={handlePromptLoadStart}
+		onPromptLoadComplete={handlePromptLoadComplete}
+		onPromptLoadError={handlePromptLoadError}
 	/>
 
 	<div
-		class="flex-column relative min-h-[48px] items-center rounded-3xl py-2 pb-2.25 shadow-sm transition-all focus-within:shadow-md md:!py-3"
-		onpaste={handlePaste}
+		class="{INPUT_CLASSES} overflow-hidden rounded-3xl backdrop-blur-md {disabled
+			? 'cursor-not-allowed opacity-60'
+			: ''}"
+		data-slot="input-area"
 	>
-		<ChatFormTextarea
-			class="px-5 py-1.5 md:pt-0"
-			bind:this={textareaRef}
-			bind:value={message}
-			onKeydown={handleKeydown}
-			{disabled}
+		<ChatAttachmentsList
+			{attachments}
+			bind:uploadedFiles
+			onFileRemove={handleFileRemove}
+			limitToSingleRow
+			class="py-5"
+			style="scroll-padding: 1rem;"
+			activeModelId={activeModelId ?? undefined}
 		/>
 
-		<ChatFormActions
-			class="px-3"
-			bind:this={chatFormActionsRef}
-			canSend={message.trim().length > 0 || uploadedFiles.length > 0}
-			hasText={message.trim().length > 0}
-			{disabled}
-			{isLoading}
-			{isRecording}
-			{uploadedFiles}
-			onFileUpload={handleFileUpload}
-			onMicClick={handleMicClick}
-			onStop={handleStop}
-			onSystemPromptClick={handleSystemPromptClick}
-		/>
+		<div
+			class="flex-column relative min-h-[48px] items-center rounded-3xl py-2 pb-2.25 shadow-sm transition-all focus-within:shadow-md md:!py-3"
+			onpaste={handlePaste}
+		>
+			<ChatFormTextarea
+				class="px-5 py-1.5 md:pt-0"
+				bind:this={textareaRef}
+				bind:value
+				onKeydown={handleKeydown}
+				onInput={() => {
+					handleInput();
+					onValueChange?.(value);
+				}}
+				{disabled}
+				{placeholder}
+			/>
+
+			{#if mcpHasResourceAttachments()}
+				<ChatAttachmentMcpResources
+					class="mb-3"
+					onResourceClick={(uri) => {
+						preSelectedResourceUri = uri;
+						isResourcePickerOpen = true;
+					}}
+				/>
+			{/if}
+
+			<ChatFormActions
+				class="px-3"
+				bind:this={chatFormActionsRef}
+				canSend={canSubmit}
+				hasText={value.trim().length > 0}
+				{disabled}
+				{isLoading}
+				{isRecording}
+				{uploadedFiles}
+				onFileUpload={handleFileUpload}
+				onMicClick={handleMicClick}
+				{onStop}
+				onSystemPromptClick={() => onSystemPromptClick?.({ message: value, files: uploadedFiles })}
+				onMcpPromptClick={showMcpPromptButton ? () => (isPromptPickerOpen = true) : undefined}
+				onMcpResourcesClick={() => (isResourcePickerOpen = true)}
+			/>
+		</div>
 	</div>
 </form>
 
-<ChatFormHelperText show={showHelperText} />
+<DialogMcpResources
+	bind:open={isResourcePickerOpen}
+	preSelectedUri={preSelectedResourceUri}
+	onAttach={(resource) => {
+		mcpStore.attachResource(resource.uri);
+	}}
+	onOpenChange={(newOpen: boolean) => {
+		if (!newOpen) {
+			preSelectedResourceUri = undefined;
+		}
+	}}
+/>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAttachmentsDropdown.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAttachmentsDropdown.svelte
index f8c1b23b061..87d56d3ba3e 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAttachmentsDropdown.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAttachmentsDropdown.svelte
@@ -1,29 +1,31 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import { MessageSquare, Plus } from '@lucide/svelte';
+	import { Plus, MessageSquare, Settings, Zap, FolderOpen } from '@lucide/svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { Switch } from '$lib/components/ui/switch';
 	import { FILE_TYPE_ICONS } from '$lib/constants/icons';
+	import { McpLogo, DropdownMenuSearchable } from '$lib/components/app';
 	import { TOOLTIP_DELAY_DURATION } from '$lib/constants/tooltip-config';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { getFaviconUrl } from '$lib/utils';
+	import { HealthCheckStatus } from '$lib/enums';
+	import type { MCPServerSettingsEntry } from '$lib/types';
 
 	interface Props {
 		class?: string;
 		disabled?: boolean;
 		hasAudioModality?: boolean;
 		hasVisionModality?: boolean;
+		hasMcpPromptsSupport?: boolean;
+		hasMcpResourcesSupport?: boolean;
 		onFileUpload?: () => void;
 		onSystemPromptClick?: () => void;
-	}
-
-	type AttachmentActionId = 'images' | 'audio' | 'text' | 'pdf' | 'system';
-
-	interface AttachmentAction {
-		id: AttachmentActionId;
-		label: string;
-		disabled?: boolean;
-		disabledReason?: string;
-		tooltip?: string;
+		onMcpPromptClick?: () => void;
+		onMcpSettingsClick?: () => void;
+		onMcpResourcesClick?: () => void;
 	}
 
 	let {
@@ -31,67 +33,77 @@
 		disabled = false,
 		hasAudioModality = false,
 		hasVisionModality = false,
+		hasMcpPromptsSupport = false,
+		hasMcpResourcesSupport = false,
 		onFileUpload,
-		onSystemPromptClick
+		onSystemPromptClick,
+		onMcpPromptClick,
+		onMcpSettingsClick,
+		onMcpResourcesClick
 	}: Props = $props();
 
 	let isNewChat = $derived(!page.params.id);
+
 	let systemMessageTooltip = $derived(
 		isNewChat
 			? 'Add custom system message for a new conversation'
 			: 'Inject custom system message at the beginning of the conversation'
 	);
 
-	let actions = $derived.by<AttachmentAction[]>(() => [
-		{
-			id: 'images',
-			label: 'Images',
-			disabled: !hasVisionModality,
-			disabledReason: !hasVisionModality
-				? 'Images require vision models to be processed'
-				: undefined
-		},
-		{
-			id: 'audio',
-			label: 'Audio Files',
-			disabled: !hasAudioModality,
-			disabledReason: !hasAudioModality
-				? 'Audio files require audio models to be processed'
-				: undefined
-		},
-		{
-			id: 'text',
-			label: 'Text Files'
-		},
-		{
-			id: 'pdf',
-			label: 'PDF Files',
-			tooltip: !hasVisionModality
-				? 'PDFs will be converted to text. Image-based PDFs may not work properly.'
-				: undefined
-		},
-		{
-			id: 'system',
-			label: 'System Message',
-			tooltip: systemMessageTooltip
-		}
-	]);
+	let dropdownOpen = $state(false);
+
+	let mcpServers = $derived(mcpStore.getServersSorted().filter((s) => s.enabled));
+	let hasMcpServers = $derived(mcpServers.length > 0);
+	let mcpSearchQuery = $state('');
+	let filteredMcpServers = $derived.by(() => {
+		const query = mcpSearchQuery.toLowerCase().trim();
+		if (!query) return mcpServers;
+		return mcpServers.filter((s) => {
+			const name = getServerLabel(s).toLowerCase();
+			const url = s.url.toLowerCase();
+			return name.includes(query) || url.includes(query);
+		});
+	});
 
-	function handleActionClick(id: AttachmentActionId) {
-		if (id === 'system') {
-			onSystemPromptClick?.();
-			return;
+	function getServerLabel(server: MCPServerSettingsEntry): string {
+		return mcpStore.getServerLabel(server);
+	}
+
+	function isServerEnabledForChat(serverId: string): boolean {
+		return conversationsStore.isMcpServerEnabledForChat(serverId);
+	}
+
+	async function toggleServerForChat(serverId: string) {
+		await conversationsStore.toggleMcpServerForChat(serverId);
+	}
+
+	function handleMcpSubMenuOpen(open: boolean) {
+		if (open) {
+			mcpSearchQuery = '';
+			mcpStore.runHealthChecksForServers(mcpServers);
 		}
+	}
 
-		onFileUpload?.();
+	function handleMcpPromptClick() {
+		dropdownOpen = false;
+		onMcpPromptClick?.();
 	}
 
-	const triggerTooltipText = 'Add files or system message';
-	const itemClass = 'flex cursor-pointer items-center gap-2';
+	function handleMcpSettingsClick() {
+		dropdownOpen = false;
+		onMcpSettingsClick?.();
+	}
+
+	function handleMcpResourcesClick() {
+		dropdownOpen = false;
+		onMcpResourcesClick?.();
+	}
+
+	const fileUploadTooltipText = 'Add files, system prompt or MCP Servers';
 </script>
 
 <div class="flex items-center gap-1 {className}">
-	<DropdownMenu.Root>
+	<DropdownMenu.Root bind:open={dropdownOpen}>
 		<DropdownMenu.Trigger name="Attach files" {disabled}>
 			<Tooltip.Root>
 				<Tooltip.Trigger class="w-full">
@@ -101,89 +113,222 @@
 						variant="secondary"
 						type="button"
 					>
-						<span class="sr-only">{triggerTooltipText}</span>
+						<span class="sr-only">{fileUploadTooltipText}</span>
 
 						<Plus class="h-4 w-4" />
 					</Button>
 				</Tooltip.Trigger>
 
 				<Tooltip.Content>
-					<p>{triggerTooltipText}</p>
+					<p>{fileUploadTooltipText}</p>
 				</Tooltip.Content>
 			</Tooltip.Root>
 		</DropdownMenu.Trigger>
 
-		<DropdownMenu.Content align="start" class="w-56">
-			{#each actions as item (item.id)}
-				{@const hasDisabledTooltip = !!item.disabled && !!item.disabledReason}
-				{@const hasEnabledTooltip = !item.disabled && !!item.tooltip}
-
-				{#if hasDisabledTooltip}
-					<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
-						<Tooltip.Trigger class="w-full">
-							<DropdownMenu.Item class={itemClass} disabled>
-								{#if item.id === 'images'}
-									<FILE_TYPE_ICONS.image class="h-4 w-4" />
-								{:else if item.id === 'audio'}
-									<FILE_TYPE_ICONS.audio class="h-4 w-4" />
-								{:else if item.id === 'text'}
-									<FILE_TYPE_ICONS.text class="h-4 w-4" />
-								{:else if item.id === 'pdf'}
-									<FILE_TYPE_ICONS.pdf class="h-4 w-4" />
-								{:else}
-									<MessageSquare class="h-4 w-4" />
-								{/if}
-
-								<span>{item.label}</span>
-							</DropdownMenu.Item>
-						</Tooltip.Trigger>
-
-						<Tooltip.Content side="right">
-							<p>{item.disabledReason}</p>
-						</Tooltip.Content>
-					</Tooltip.Root>
-				{:else if hasEnabledTooltip}
-					<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
-						<Tooltip.Trigger class="w-full">
-							<DropdownMenu.Item class={itemClass} onclick={() => handleActionClick(item.id)}>
-								{#if item.id === 'images'}
-									<FILE_TYPE_ICONS.image class="h-4 w-4" />
-								{:else if item.id === 'audio'}
-									<FILE_TYPE_ICONS.audio class="h-4 w-4" />
-								{:else if item.id === 'text'}
-									<FILE_TYPE_ICONS.text class="h-4 w-4" />
-								{:else if item.id === 'pdf'}
-									<FILE_TYPE_ICONS.pdf class="h-4 w-4" />
-								{:else}
-									<MessageSquare class="h-4 w-4" />
-								{/if}
-
-								<span>{item.label}</span>
-							</DropdownMenu.Item>
-						</Tooltip.Trigger>
-
-						<Tooltip.Content side="right">
-							<p>{item.tooltip}</p>
-						</Tooltip.Content>
-					</Tooltip.Root>
-				{:else}
-					<DropdownMenu.Item class={itemClass} onclick={() => handleActionClick(item.id)}>
-						{#if item.id === 'images'}
+		<DropdownMenu.Content align="start" class="w-48">
+			{#if hasVisionModality}
+				<DropdownMenu.Item
+					class="images-button flex cursor-pointer items-center gap-2"
+					onclick={() => onFileUpload?.()}
+				>
+					<FILE_TYPE_ICONS.image class="h-4 w-4" />
+
+					<span>Images</span>
+				</DropdownMenu.Item>
+			{:else}
+				<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+					<Tooltip.Trigger class="w-full">
+						<DropdownMenu.Item
+							class="images-button flex cursor-pointer items-center gap-2"
+							disabled
+						>
 							<FILE_TYPE_ICONS.image class="h-4 w-4" />
-						{:else if item.id === 'audio'}
+
+							<span>Images</span>
+						</DropdownMenu.Item>
+					</Tooltip.Trigger>
+
+					<Tooltip.Content side="right">
+						<p>Images require vision models to be processed</p>
+					</Tooltip.Content>
+				</Tooltip.Root>
+			{/if}
+
+			{#if hasAudioModality}
+				<DropdownMenu.Item
+					class="audio-button flex cursor-pointer items-center gap-2"
+					onclick={() => onFileUpload?.()}
+				>
+					<FILE_TYPE_ICONS.audio class="h-4 w-4" />
+
+					<span>Audio Files</span>
+				</DropdownMenu.Item>
+			{:else}
+				<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+					<Tooltip.Trigger class="w-full">
+						<DropdownMenu.Item class="audio-button flex cursor-pointer items-center gap-2" disabled>
 							<FILE_TYPE_ICONS.audio class="h-4 w-4" />
-						{:else if item.id === 'text'}
-							<FILE_TYPE_ICONS.text class="h-4 w-4" />
-						{:else if item.id === 'pdf'}
+
+							<span>Audio Files</span>
+						</DropdownMenu.Item>
+					</Tooltip.Trigger>
+
+					<Tooltip.Content side="right">
+						<p>Audio files require audio models to be processed</p>
+					</Tooltip.Content>
+				</Tooltip.Root>
+			{/if}
+
+			<DropdownMenu.Item
+				class="flex cursor-pointer items-center gap-2"
+				onclick={() => onFileUpload?.()}
+			>
+				<FILE_TYPE_ICONS.text class="h-4 w-4" />
+
+				<span>Text Files</span>
+			</DropdownMenu.Item>
+
+			{#if hasVisionModality}
+				<DropdownMenu.Item
+					class="flex cursor-pointer items-center gap-2"
+					onclick={() => onFileUpload?.()}
+				>
+					<FILE_TYPE_ICONS.pdf class="h-4 w-4" />
+
+					<span>PDF Files</span>
+				</DropdownMenu.Item>
+			{:else}
+				<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+					<Tooltip.Trigger class="w-full">
+						<DropdownMenu.Item
+							class="flex cursor-pointer items-center gap-2"
+							onclick={() => onFileUpload?.()}
+						>
 							<FILE_TYPE_ICONS.pdf class="h-4 w-4" />
-						{:else}
-							<MessageSquare class="h-4 w-4" />
-						{/if}
 
-						<span>{item.label}</span>
+							<span>PDF Files</span>
+						</DropdownMenu.Item>
+					</Tooltip.Trigger>
+
+					<Tooltip.Content side="right">
+						<p>PDFs will be converted to text. Image-based PDFs may not work properly.</p>
+					</Tooltip.Content>
+				</Tooltip.Root>
+			{/if}
+
+			<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+				<Tooltip.Trigger class="w-full">
+					<DropdownMenu.Item
+						class="flex cursor-pointer items-center gap-2"
+						onclick={() => onSystemPromptClick?.()}
+					>
+						<MessageSquare class="h-4 w-4" />
+
+						<span>System Message</span>
 					</DropdownMenu.Item>
-				{/if}
-			{/each}
+				</Tooltip.Trigger>
+
+				<Tooltip.Content side="right">
+					<p>{systemMessageTooltip}</p>
+				</Tooltip.Content>
+			</Tooltip.Root>
+
+			<DropdownMenu.Separator />
+
+			<DropdownMenu.Sub onOpenChange={handleMcpSubMenuOpen}>
+				<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
+					<McpLogo class="h-4 w-4" />
+
+					<span>MCP Servers</span>
+				</DropdownMenu.SubTrigger>
+
+				<DropdownMenu.SubContent class="w-72 pt-0">
+					<DropdownMenuSearchable
+						placeholder="Search servers..."
+						bind:searchValue={mcpSearchQuery}
+						emptyMessage={hasMcpServers ? 'No servers found' : 'No MCP servers configured'}
+						isEmpty={filteredMcpServers.length === 0}
+					>
+						<div class="max-h-64 overflow-y-auto">
+							{#each filteredMcpServers as server (server.id)}
+								{@const healthState = mcpStore.getHealthCheckState(server.id)}
+								{@const hasError = healthState.status === HealthCheckStatus.ERROR}
+								{@const isEnabledForChat = isServerEnabledForChat(server.id)}
+
+								<button
+									type="button"
+									class="flex w-full items-center justify-between gap-2 rounded-sm px-2 py-2 text-left transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+									onclick={() => !hasError && toggleServerForChat(server.id)}
+									disabled={hasError}
+								>
+									<div class="flex min-w-0 flex-1 items-center gap-2">
+										{#if getFaviconUrl(server.url)}
+											<img
+												src={getFaviconUrl(server.url)}
+												alt=""
+												class="h-4 w-4 shrink-0 rounded-sm"
+												onerror={(e) => {
+													(e.currentTarget as HTMLImageElement).style.display = 'none';
+												}}
+											/>
+										{/if}
+
+										<span class="truncate text-sm">{getServerLabel(server)}</span>
+
+										{#if hasError}
+											<span
+												class="shrink-0 rounded bg-destructive/15 px-1.5 py-0.5 text-xs text-destructive"
+											>
+												Error
+											</span>
+										{/if}
+									</div>
+
+									<Switch
+										checked={isEnabledForChat}
+										disabled={hasError}
+										onclick={(e: MouseEvent) => e.stopPropagation()}
+										onCheckedChange={() => toggleServerForChat(server.id)}
+									/>
+								</button>
+							{/each}
+						</div>
+
+						{#snippet footer()}
+							<DropdownMenu.Item
+								class="flex cursor-pointer items-center gap-2"
+								onclick={handleMcpSettingsClick}
+							>
+								<Settings class="h-4 w-4" />
+
+								<span>Manage MCP Servers</span>
+							</DropdownMenu.Item>
+						{/snippet}
+					</DropdownMenuSearchable>
+				</DropdownMenu.SubContent>
+			</DropdownMenu.Sub>
+
+			{#if hasMcpPromptsSupport}
+				<DropdownMenu.Item
+					class="flex cursor-pointer items-center gap-2"
+					onclick={handleMcpPromptClick}
+				>
+					<Zap class="h-4 w-4" />
+
+					<span>MCP Prompt</span>
+				</DropdownMenu.Item>
+			{/if}
+
+			{#if hasMcpResourcesSupport}
+				<DropdownMenu.Item
+					class="flex cursor-pointer items-center gap-2"
+					onclick={handleMcpResourcesClick}
+				>
+					<FolderOpen class="h-4 w-4" />
+
+					<span>MCP Resources</span>
+				</DropdownMenu.Item>
+			{/if}
 		</DropdownMenu.Content>
 	</DropdownMenu.Root>
 </div>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionFileAttachments.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionFileAttachments.svelte
deleted file mode 100644
index 3545b4aebf8..00000000000
--- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionFileAttachments.svelte
+++ /dev/null
@@ -1,143 +0,0 @@
-<script lang="ts">
-	import { Paperclip } from '@lucide/svelte';
-	import { MessageSquare } from '@lucide/svelte';
-	import { Button } from '$lib/components/ui/button';
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
-	import * as Tooltip from '$lib/components/ui/tooltip';
-	import { FILE_TYPE_ICONS } from '$lib/constants/icons';
-
-	interface Props {
-		class?: string;
-		disabled?: boolean;
-		hasAudioModality?: boolean;
-		hasVisionModality?: boolean;
-		onFileUpload?: () => void;
-		onSystemPromptClick?: () => void;
-	}
-
-	let {
-		class: className = '',
-		disabled = false,
-		hasAudioModality = false,
-		hasVisionModality = false,
-		onFileUpload,
-		onSystemPromptClick
-	}: Props = $props();
-
-	const fileUploadTooltipText = $derived.by(() => {
-		return !hasVisionModality
-			? 'Text files and PDFs supported. Images, audio, and video require vision models.'
-			: 'Attach files';
-	});
-</script>
-
-<div class="flex items-center gap-1 {className}">
-	<DropdownMenu.Root>
-		<DropdownMenu.Trigger name="Attach files" {disabled}>
-			<Tooltip.Root>
-				<Tooltip.Trigger>
-					<Button
-						class="file-upload-button h-8 w-8 rounded-full bg-transparent p-0 text-muted-foreground hover:bg-foreground/10 hover:text-foreground"
-						{disabled}
-						type="button"
-					>
-						<span class="sr-only">Attach files</span>
-
-						<Paperclip class="h-4 w-4" />
-					</Button>
-				</Tooltip.Trigger>
-
-				<Tooltip.Content>
-					<p>{fileUploadTooltipText}</p>
-				</Tooltip.Content>
-			</Tooltip.Root>
-		</DropdownMenu.Trigger>
-
-		<DropdownMenu.Content align="start" class="w-48">
-			<Tooltip.Root>
-				<Tooltip.Trigger class="w-full">
-					<DropdownMenu.Item
-						class="images-button flex cursor-pointer items-center gap-2"
-						disabled={!hasVisionModality}
-						onclick={() => onFileUpload?.()}
-					>
-						<FILE_TYPE_ICONS.image class="h-4 w-4" />
-
-						<span>Images</span>
-					</DropdownMenu.Item>
-				</Tooltip.Trigger>
-
-				{#if !hasVisionModality}
-					<Tooltip.Content>
-						<p>Images require vision models to be processed</p>
-					</Tooltip.Content>
-				{/if}
-			</Tooltip.Root>
-
-			<Tooltip.Root>
-				<Tooltip.Trigger class="w-full">
-					<DropdownMenu.Item
-						class="audio-button flex cursor-pointer items-center gap-2"
-						disabled={!hasAudioModality}
-						onclick={() => onFileUpload?.()}
-					>
-						<FILE_TYPE_ICONS.audio class="h-4 w-4" />
-
-						<span>Audio Files</span>
-					</DropdownMenu.Item>
-				</Tooltip.Trigger>
-
-				{#if !hasAudioModality}
-					<Tooltip.Content>
-						<p>Audio files require audio models to be processed</p>
-					</Tooltip.Content>
-				{/if}
-			</Tooltip.Root>
-
-			<DropdownMenu.Item
-				class="flex cursor-pointer items-center gap-2"
-				onclick={() => onFileUpload?.()}
-			>
-				<FILE_TYPE_ICONS.text class="h-4 w-4" />
-
-				<span>Text Files</span>
-			</DropdownMenu.Item>
-
-			<Tooltip.Root>
-				<Tooltip.Trigger class="w-full">
-					<DropdownMenu.Item
-						class="flex cursor-pointer items-center gap-2"
-						onclick={() => onFileUpload?.()}
-					>
-						<FILE_TYPE_ICONS.pdf class="h-4 w-4" />
-
-						<span>PDF Files</span>
-					</DropdownMenu.Item>
-				</Tooltip.Trigger>
-
-				{#if !hasVisionModality}
-					<Tooltip.Content>
-						<p>PDFs will be converted to text. Image-based PDFs may not work properly.</p>
-					</Tooltip.Content>
-				{/if}
-			</Tooltip.Root>
-			<DropdownMenu.Separator />
-			<Tooltip.Root>
-				<Tooltip.Trigger class="w-full">
-					<DropdownMenu.Item
-						class="flex cursor-pointer items-center gap-2"
-						onclick={() => onSystemPromptClick?.()}
-					>
-						<MessageSquare class="h-4 w-4" />
-
-						<span>System Prompt</span>
-					</DropdownMenu.Item>
-				</Tooltip.Trigger>
-
-				<Tooltip.Content>
-					<p>Add a custom system message for this conversation</p>
-				</Tooltip.Content>
-			</Tooltip.Root>
-		</DropdownMenu.Content>
-	</DropdownMenu.Root>
-</div>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
index cf5aca42a1f..1197a8e3476 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
@@ -5,16 +5,19 @@
 		ChatFormActionAttachmentsDropdown,
 		ChatFormActionRecord,
 		ChatFormActionSubmit,
+		McpServersSelector,
 		ModelsSelector
 	} from '$lib/components/app';
+	import { DialogChatSettings } from '$lib/components/app/dialogs';
+	import { SETTINGS_SECTION_TITLES } from '$lib/constants/settings-sections';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
 	import { FileTypeCategory } from '$lib/enums';
 	import { getFileTypeCategory } from '$lib/utils';
 	import { config } from '$lib/stores/settings.svelte';
 	import { modelsStore, modelOptions, selectedModelId } from '$lib/stores/models.svelte';
 	import { isRouterMode } from '$lib/stores/server.svelte';
 	import { chatStore } from '$lib/stores/chat.svelte';
-	import { activeMessages, usedModalities } from '$lib/stores/conversations.svelte';
-	import { useModelChangeValidation } from '$lib/hooks/use-model-change-validation.svelte';
+	import { activeMessages, conversationsStore } from '$lib/stores/conversations.svelte';
 
 	interface Props {
 		canSend?: boolean;
@@ -28,6 +31,8 @@
 		onMicClick?: () => void;
 		onStop?: () => void;
 		onSystemPromptClick?: () => void;
+		onMcpPromptClick?: () => void;
+		onMcpResourcesClick?: () => void;
 	}
 
 	let {
@@ -41,7 +46,9 @@
 		onFileUpload,
 		onMicClick,
 		onStop,
-		onSystemPromptClick
+		onSystemPromptClick,
+		onMcpPromptClick,
+		onMcpResourcesClick
 	}: Props = $props();
 
 	let currentConfig = $derived(config());
@@ -155,13 +162,18 @@
 		selectorModelRef?.open();
 	}
 
-	const { handleModelChange } = useModelChangeValidation({
-		getRequiredModalities: () => usedModalities(),
-		onValidationFailure: async (previousModelId: string | null) => {
-			if (previousModelId) {
-				await modelsStore.selectModelById(previousModelId);
-			}
-		}
+	let showChatSettingsDialogWithMcpSection = $state(false);
+
+	let hasMcpPromptsSupport = $derived.by(() => {
+		const perChatOverrides = conversationsStore.getAllMcpServerOverrides();
+
+		return mcpStore.hasPromptsCapability(perChatOverrides);
+	});
+
+	let hasMcpResourcesSupport = $derived.by(() => {
+		const perChatOverrides = conversationsStore.getAllMcpServerOverrides();
+
+		return mcpStore.hasResourcesCapability(perChatOverrides);
 	});
 </script>
 
@@ -171,8 +183,18 @@
 			{disabled}
 			{hasAudioModality}
 			{hasVisionModality}
+			{hasMcpPromptsSupport}
+			{hasMcpResourcesSupport}
 			{onFileUpload}
 			{onSystemPromptClick}
+			{onMcpPromptClick}
+			{onMcpResourcesClick}
+			onMcpSettingsClick={() => (showChatSettingsDialogWithMcpSection = true)}
+		/>
+
+		<McpServersSelector
+			{disabled}
+			onSettingsClick={() => (showChatSettingsDialogWithMcpSection = true)}
 		/>
 	</div>
 
@@ -183,7 +205,6 @@
 			currentModel={conversationModel}
 			forceForegroundText={true}
 			useGlobalSelection={true}
-			onModelChange={handleModelChange}
 		/>
 	</div>
 
@@ -212,3 +233,9 @@
 		/>
 	{/if}
 </div>
+
+<DialogChatSettings
+	open={showChatSettingsDialogWithMcpSection}
+	onOpenChange={(open) => (showChatSettingsDialogWithMcpSection = open)}
+	initialSection={SETTINGS_SECTION_TITLES.MCP}
+/>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPicker.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPicker.svelte
new file mode 100644
index 00000000000..1eb99aa1612
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPicker.svelte
@@ -0,0 +1,402 @@
+<script lang="ts">
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { debounce } from '$lib/utils';
+	import { KeyboardKey } from '$lib/enums';
+	import type { MCPPromptInfo, GetPromptResult, MCPServerSettingsEntry } from '$lib/types';
+	import { SvelteMap } from 'svelte/reactivity';
+	import {
+		ChatFormPromptPickerList,
+		ChatFormPromptPickerHeader,
+		ChatFormPromptPickerArgumentForm
+	} from '$lib/components/app/chat';
+	import * as Popover from '$lib/components/ui/popover';
+
+	interface Props {
+		class?: string;
+		isOpen?: boolean;
+		searchQuery?: string;
+		onClose?: () => void;
+		onPromptLoadStart?: (
+			placeholderId: string,
+			promptInfo: MCPPromptInfo,
+			args?: Record<string, string>
+		) => void;
+		onPromptLoadComplete?: (placeholderId: string, result: GetPromptResult) => void;
+		onPromptLoadError?: (placeholderId: string, error: string) => void;
+	}
+
+	let {
+		class: className = '',
+		isOpen = false,
+		searchQuery = '',
+		onClose,
+		onPromptLoadStart,
+		onPromptLoadComplete,
+		onPromptLoadError
+	}: Props = $props();
+
+	let prompts = $state<MCPPromptInfo[]>([]);
+	let isLoading = $state(false);
+	let selectedPrompt = $state<MCPPromptInfo | null>(null);
+	let promptArgs = $state<Record<string, string>>({});
+	let selectedIndex = $state(0);
+	let internalSearchQuery = $state('');
+	let promptError = $state<string | null>(null);
+	let selectedIndexBeforeArgumentForm = $state<number | null>(null);
+
+	let suggestions = $state<Record<string, string[]>>({});
+	let loadingSuggestions = $state<Record<string, boolean>>({});
+	let activeAutocomplete = $state<string | null>(null);
+	let autocompleteIndex = $state(0);
+
+	let serverSettingsMap = $derived.by(() => {
+		const servers = mcpStore.getServers();
+		const map = new SvelteMap<string, MCPServerSettingsEntry>();
+
+		for (const server of servers) {
+			map.set(server.id, server);
+		}
+
+		return map;
+	});
+
+	$effect(() => {
+		if (isOpen) {
+			loadPrompts();
+			selectedIndex = 0;
+		} else {
+			selectedPrompt = null;
+			promptArgs = {};
+			promptError = null;
+		}
+	});
+
+	$effect(() => {
+		if (filteredPrompts.length > 0 && selectedIndex >= filteredPrompts.length) {
+			selectedIndex = 0;
+		}
+	});
+
+	async function loadPrompts() {
+		isLoading = true;
+
+		try {
+			const perChatOverrides = conversationsStore.getAllMcpServerOverrides();
+
+			const initialized = await mcpStore.ensureInitialized(perChatOverrides);
+
+			if (!initialized) {
+				prompts = [];
+
+				return;
+			}
+
+			prompts = await mcpStore.getAllPrompts();
+		} catch (error) {
+			console.error('[ChatFormPromptPicker] Failed to load prompts:', error);
+			prompts = [];
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function handlePromptClick(prompt: MCPPromptInfo) {
+		const args = prompt.arguments ?? [];
+
+		if (args.length > 0) {
+			selectedIndexBeforeArgumentForm = selectedIndex;
+			selectedPrompt = prompt;
+			promptArgs = {};
+			promptError = null;
+
+			requestAnimationFrame(() => {
+				const firstInput = document.querySelector(`#arg-${args[0].name}`) as HTMLInputElement;
+				if (firstInput) {
+					firstInput.focus();
+				}
+			});
+		} else {
+			executePrompt(prompt, {});
+		}
+	}
+
+	async function executePrompt(prompt: MCPPromptInfo, args: Record<string, string>) {
+		promptError = null;
+
+		const placeholderId = crypto.randomUUID();
+
+		const nonEmptyArgs = Object.fromEntries(
+			Object.entries(args).filter(([, value]) => value.trim() !== '')
+		);
+		const argsToPass = Object.keys(nonEmptyArgs).length > 0 ? nonEmptyArgs : undefined;
+
+		onPromptLoadStart?.(placeholderId, prompt, argsToPass);
+		onClose?.();
+
+		try {
+			const result = await mcpStore.getPrompt(prompt.serverName, prompt.name, args);
+			onPromptLoadComplete?.(placeholderId, result);
+		} catch (error) {
+			const errorMessage =
+				error instanceof Error ? error.message : 'Unknown error executing prompt';
+			onPromptLoadError?.(placeholderId, errorMessage);
+		}
+	}
+
+	function handleArgumentSubmit(event: SubmitEvent) {
+		event.preventDefault();
+
+		if (selectedPrompt) {
+			executePrompt(selectedPrompt, promptArgs);
+		}
+	}
+
+	const fetchCompletions = debounce(async (argName: string, value: string) => {
+		if (!selectedPrompt || value.length < 1) {
+			suggestions[argName] = [];
+
+			return;
+		}
+
+		if (import.meta.env.DEV) {
+			console.log('[ChatFormPromptPicker] Fetching completions for:', {
+				serverName: selectedPrompt.serverName,
+				promptName: selectedPrompt.name,
+				argName,
+				value
+			});
+		}
+
+		loadingSuggestions[argName] = true;
+
+		try {
+			const result = await mcpStore.getPromptCompletions(
+				selectedPrompt.serverName,
+				selectedPrompt.name,
+				argName,
+				value
+			);
+
+			if (import.meta.env.DEV) {
+				console.log('[ChatFormPromptPicker] Autocomplete result:', {
+					argName,
+					value,
+					result,
+					suggestionsCount: result?.values.length ?? 0
+				});
+			}
+
+			if (result && result.values.length > 0) {
+				// Filter out empty strings from suggestions
+				const filteredValues = result.values.filter((v) => v.trim() !== '');
+
+				if (filteredValues.length > 0) {
+					suggestions[argName] = filteredValues;
+					activeAutocomplete = argName;
+					autocompleteIndex = 0;
+				} else {
+					suggestions[argName] = [];
+				}
+			} else {
+				suggestions[argName] = [];
+			}
+		} catch (error) {
+			console.error('[ChatFormPromptPicker] Failed to fetch completions:', error);
+			suggestions[argName] = [];
+		} finally {
+			loadingSuggestions[argName] = false;
+		}
+	}, 200);
+
+	function handleArgInput(argName: string, value: string) {
+		promptArgs[argName] = value;
+		fetchCompletions(argName, value);
+	}
+
+	function selectSuggestion(argName: string, value: string) {
+		promptArgs[argName] = value;
+		suggestions[argName] = [];
+		activeAutocomplete = null;
+	}
+
+	function handleArgKeydown(event: KeyboardEvent, argName: string) {
+		const argSuggestions = suggestions[argName] ?? [];
+
+		// Handle Escape - return to prompt selection list
+		if (event.key === KeyboardKey.ESCAPE) {
+			event.preventDefault();
+			event.stopPropagation();
+			handleCancelArgumentForm();
+			return;
+		}
+
+		if (argSuggestions.length === 0 || activeAutocomplete !== argName) return;
+
+		if (event.key === KeyboardKey.ARROW_DOWN) {
+			event.preventDefault();
+			autocompleteIndex = Math.min(autocompleteIndex + 1, argSuggestions.length - 1);
+		} else if (event.key === KeyboardKey.ARROW_UP) {
+			event.preventDefault();
+			autocompleteIndex = Math.max(autocompleteIndex - 1, 0);
+		} else if (event.key === KeyboardKey.ENTER && argSuggestions[autocompleteIndex]) {
+			event.preventDefault();
+			event.stopPropagation();
+			selectSuggestion(argName, argSuggestions[autocompleteIndex]);
+		}
+	}
+
+	function handleArgBlur(argName: string) {
+		// Delay to allow click on suggestion
+		setTimeout(() => {
+			if (activeAutocomplete === argName) {
+				suggestions[argName] = [];
+				activeAutocomplete = null;
+			}
+		}, 150);
+	}
+
+	function handleArgFocus(argName: string) {
+		if ((suggestions[argName]?.length ?? 0) > 0) {
+			activeAutocomplete = argName;
+		}
+	}
+
+	function handleCancelArgumentForm() {
+		// Restore the previously selected prompt index
+		if (selectedIndexBeforeArgumentForm !== null) {
+			selectedIndex = selectedIndexBeforeArgumentForm;
+			selectedIndexBeforeArgumentForm = null;
+		}
+		selectedPrompt = null;
+		promptArgs = {};
+		promptError = null;
+	}
+
+	export function handleKeydown(event: KeyboardEvent): boolean {
+		if (!isOpen) return false;
+
+		if (event.key === KeyboardKey.ESCAPE) {
+			event.preventDefault();
+			if (selectedPrompt) {
+				// Return to prompt selection list, keeping the selected prompt active
+				handleCancelArgumentForm();
+			} else {
+				onClose?.();
+			}
+
+			return true;
+		}
+
+		if (event.key === KeyboardKey.ARROW_DOWN) {
+			event.preventDefault();
+			if (filteredPrompts.length > 0) {
+				selectedIndex = (selectedIndex + 1) % filteredPrompts.length;
+			}
+
+			return true;
+		}
+
+		if (event.key === KeyboardKey.ARROW_UP) {
+			event.preventDefault();
+			if (filteredPrompts.length > 0) {
+				selectedIndex = selectedIndex === 0 ? filteredPrompts.length - 1 : selectedIndex - 1;
+			}
+
+			return true;
+		}
+
+		if (event.key === KeyboardKey.ENTER && !selectedPrompt) {
+			event.preventDefault();
+			if (filteredPrompts[selectedIndex]) {
+				handlePromptClick(filteredPrompts[selectedIndex]);
+			}
+
+			return true;
+		}
+
+		return false;
+	}
+
+	let filteredPrompts = $derived.by(() => {
+		const sortedServers = mcpStore.getServersSorted();
+		const serverOrderMap = new Map(sortedServers.map((server, index) => [server.id, index]));
+
+		const sortedPrompts = [...prompts].sort((a, b) => {
+			const orderA = serverOrderMap.get(a.serverName) ?? Number.MAX_SAFE_INTEGER;
+			const orderB = serverOrderMap.get(b.serverName) ?? Number.MAX_SAFE_INTEGER;
+			return orderA - orderB;
+		});
+
+		const query = (searchQuery || internalSearchQuery).toLowerCase();
+		if (!query) return sortedPrompts;
+
+		return sortedPrompts.filter(
+			(prompt) =>
+				prompt.name.toLowerCase().includes(query) ||
+				prompt.title?.toLowerCase().includes(query) ||
+				prompt.description?.toLowerCase().includes(query)
+		);
+	});
+
+	let showSearchInput = $derived(prompts.length > 3);
+</script>
+
+<Popover.Root
+	bind:open={isOpen}
+	onOpenChange={(open) => {
+		if (!open) {
+			onClose?.();
+		}
+	}}
+>
+	<Popover.Trigger class="pointer-events-none absolute inset-0 opacity-0">
+		<span class="sr-only">Open prompt picker</span>
+	</Popover.Trigger>
+
+	<Popover.Content
+		side="top"
+		align="start"
+		sideOffset={12}
+		class="w-[var(--bits-popover-anchor-width)] max-w-none rounded-xl border-border/50 p-0 shadow-xl {className}"
+		onkeydown={handleKeydown}
+		onOpenAutoFocus={(e) => e.preventDefault()}
+	>
+		{#if selectedPrompt}
+			{@const server = serverSettingsMap.get(selectedPrompt.serverName)}
+			{@const serverLabel = server ? mcpStore.getServerLabel(server) : selectedPrompt.serverName}
+
+			<div class="p-4">
+				<ChatFormPromptPickerHeader prompt={selectedPrompt} {server} {serverLabel} />
+
+				<ChatFormPromptPickerArgumentForm
+					prompt={selectedPrompt}
+					{promptArgs}
+					{suggestions}
+					{loadingSuggestions}
+					{activeAutocomplete}
+					{autocompleteIndex}
+					{promptError}
+					onArgInput={handleArgInput}
+					onArgKeydown={handleArgKeydown}
+					onArgBlur={handleArgBlur}
+					onArgFocus={handleArgFocus}
+					onSelectSuggestion={selectSuggestion}
+					onSubmit={handleArgumentSubmit}
+					onCancel={handleCancelArgumentForm}
+				/>
+			</div>
+		{:else}
+			<ChatFormPromptPickerList
+				prompts={filteredPrompts}
+				{isLoading}
+				{selectedIndex}
+				bind:searchQuery={internalSearchQuery}
+				{showSearchInput}
+				{serverSettingsMap}
+				getServerLabel={(server) => mcpStore.getServerLabel(server)}
+				onPromptClick={handlePromptClick}
+			/>
+		{/if}
+	</Popover.Content>
+</Popover.Root>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerArgumentForm.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerArgumentForm.svelte
new file mode 100644
index 00000000000..92572b89522
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerArgumentForm.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { MCPPromptInfo } from '$lib/types';
+	import ChatFormPromptPickerArgumentInput from './ChatFormPromptPickerArgumentInput.svelte';
+	import { Button } from '$lib/components/ui/button';
+
+	interface Props {
+		prompt: MCPPromptInfo;
+		promptArgs: Record<string, string>;
+		suggestions: Record<string, string[]>;
+		loadingSuggestions: Record<string, boolean>;
+		activeAutocomplete: string | null;
+		autocompleteIndex: number;
+		promptError: string | null;
+		onArgInput: (argName: string, value: string) => void;
+		onArgKeydown: (event: KeyboardEvent, argName: string) => void;
+		onArgBlur: (argName: string) => void;
+		onArgFocus: (argName: string) => void;
+		onSelectSuggestion: (argName: string, value: string) => void;
+		onSubmit: (event: SubmitEvent) => void;
+		onCancel: () => void;
+	}
+
+	let {
+		prompt,
+		promptArgs,
+		suggestions,
+		loadingSuggestions,
+		activeAutocomplete,
+		autocompleteIndex,
+		promptError,
+		onArgInput,
+		onArgKeydown,
+		onArgBlur,
+		onArgFocus,
+		onSelectSuggestion,
+		onSubmit,
+		onCancel
+	}: Props = $props();
+</script>
+
+<form onsubmit={onSubmit} class="space-y-3 pt-4">
+	{#each prompt.arguments ?? [] as arg (arg.name)}
+		<ChatFormPromptPickerArgumentInput
+			argument={arg}
+			value={promptArgs[arg.name] ?? ''}
+			suggestions={suggestions[arg.name] ?? []}
+			isLoadingSuggestions={loadingSuggestions[arg.name] ?? false}
+			isAutocompleteActive={activeAutocomplete === arg.name}
+			autocompleteIndex={activeAutocomplete === arg.name ? autocompleteIndex : 0}
+			onInput={(value) => onArgInput(arg.name, value)}
+			onKeydown={(e) => onArgKeydown(e, arg.name)}
+			onBlur={() => onArgBlur(arg.name)}
+			onFocus={() => onArgFocus(arg.name)}
+			onSelectSuggestion={(value) => onSelectSuggestion(arg.name, value)}
+		/>
+	{/each}
+
+	{#if promptError}
+		<div
+			class="flex items-start gap-2 rounded-lg border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm text-destructive"
+			role="alert"
+		>
+			<span class="shrink-0">⚠</span>
+
+			<span>{promptError}</span>
+		</div>
+	{/if}
+
+	<div class="mt-8 flex justify-end gap-2">
+		<Button type="button" size="sm" onclick={onCancel} variant="secondary">Cancel</Button>
+
+		<Button size="sm" type="submit">Use Prompt</Button>
+	</div>
+</form>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerArgumentInput.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerArgumentInput.svelte
new file mode 100644
index 00000000000..638d10eeff8
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerArgumentInput.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+	import type { MCPPromptInfo } from '$lib/types';
+	import { fly } from 'svelte/transition';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+
+	type PromptArgument = NonNullable<MCPPromptInfo['arguments']>[number];
+
+	interface Props {
+		argument: PromptArgument;
+		value: string;
+		suggestions?: string[];
+		isLoadingSuggestions?: boolean;
+		isAutocompleteActive?: boolean;
+		autocompleteIndex?: number;
+		onInput: (value: string) => void;
+		onKeydown: (event: KeyboardEvent) => void;
+		onBlur: () => void;
+		onFocus: () => void;
+		onSelectSuggestion: (value: string) => void;
+	}
+
+	let {
+		argument,
+		value = '',
+		suggestions = [],
+		isLoadingSuggestions = false,
+		isAutocompleteActive = false,
+		autocompleteIndex = 0,
+		onInput,
+		onKeydown,
+		onBlur,
+		onFocus,
+		onSelectSuggestion
+	}: Props = $props();
+</script>
+
+<div class="relative grid gap-1">
+	<Label for="arg-{argument.name}" class="mb-1 text-muted-foreground">
+		<span>
+			{argument.name}
+
+			{#if argument.required}
+				<span class="text-destructive">*</span>
+			{/if}
+		</span>
+
+		{#if isLoadingSuggestions}
+			<span class="text-xs text-muted-foreground/50">...</span>
+		{/if}
+	</Label>
+
+	<Input
+		id="arg-{argument.name}"
+		type="text"
+		{value}
+		oninput={(e) => onInput(e.currentTarget.value)}
+		onkeydown={onKeydown}
+		onblur={onBlur}
+		onfocus={onFocus}
+		placeholder={argument.description || argument.name}
+		required={argument.required}
+		autocomplete="off"
+	/>
+
+	{#if isAutocompleteActive && suggestions.length > 0}
+		<div
+			class="absolute top-full right-0 left-0 z-10 mt-1 max-h-32 overflow-y-auto rounded-lg border border-border/50 bg-background shadow-lg"
+			transition:fly={{ y: -5, duration: 100 }}
+		>
+			{#each suggestions as suggestion, i (suggestion)}
+				<button
+					type="button"
+					onmousedown={() => onSelectSuggestion(suggestion)}
+					class="w-full px-3 py-1.5 text-left text-sm hover:bg-accent {i === autocompleteIndex
+						? 'bg-accent'
+						: ''}"
+				>
+					{suggestion}
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerHeader.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerHeader.svelte
new file mode 100644
index 00000000000..18fc1ba9988
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerHeader.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import Badge from '$lib/components/ui/badge/badge.svelte';
+	import type { MCPPromptInfo, MCPServerSettingsEntry } from '$lib/types';
+	import { getFaviconUrl } from '$lib/utils';
+
+	interface Props {
+		prompt: MCPPromptInfo;
+		server: MCPServerSettingsEntry | undefined;
+		serverLabel: string;
+	}
+
+	let { prompt, server, serverLabel }: Props = $props();
+
+	let faviconUrl = $derived(server ? getFaviconUrl(server.url) : null);
+</script>
+
+<div class="flex items-start gap-3">
+	<div class="min-w-0 flex-1">
+		<div class="mb-0.5 flex items-center gap-1.5 text-xs text-muted-foreground">
+			{#if faviconUrl}
+				<img
+					src={faviconUrl}
+					alt=""
+					class="h-3 w-3 shrink-0 rounded-sm"
+					onerror={(e) => {
+						(e.currentTarget as HTMLImageElement).style.display = 'none';
+					}}
+				/>
+			{/if}
+
+			<span>{serverLabel}</span>
+		</div>
+		<div class="flex items-center gap-2">
+			<span class="font-medium">
+				{prompt.title || prompt.name}
+			</span>
+
+			{#if prompt.arguments?.length}
+				<Badge variant="secondary">
+					{prompt.arguments.length} arg{prompt.arguments.length > 1 ? 's' : ''}
+				</Badge>
+			{/if}
+		</div>
+
+		{#if prompt.description}
+			<p class="mt-1 text-sm text-muted-foreground">
+				{prompt.description}
+			</p>
+		{/if}
+	</div>
+</div>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerList.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerList.svelte
new file mode 100644
index 00000000000..755904c29a6
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerList.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import type { MCPPromptInfo, MCPServerSettingsEntry } from '$lib/types';
+	import { SearchInput } from '$lib/components/app';
+	import ChatFormPromptPickerListItem from './ChatFormPromptPickerListItem.svelte';
+	import ChatFormPromptPickerListItemSkeleton from './ChatFormPromptPickerListItemSkeleton.svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import ScrollArea from '$lib/components/ui/scroll-area/scroll-area.svelte';
+
+	interface Props {
+		prompts: MCPPromptInfo[];
+		isLoading: boolean;
+		selectedIndex: number;
+		searchQuery: string;
+		showSearchInput: boolean;
+		serverSettingsMap: SvelteMap<string, MCPServerSettingsEntry>;
+		getServerLabel: (server: MCPServerSettingsEntry) => string;
+		onPromptClick: (prompt: MCPPromptInfo) => void;
+	}
+
+	let {
+		prompts,
+		isLoading,
+		selectedIndex,
+		searchQuery = $bindable(),
+		showSearchInput,
+		serverSettingsMap,
+		getServerLabel,
+		onPromptClick
+	}: Props = $props();
+
+	let listContainer = $state<HTMLDivElement | null>(null);
+
+	$effect(() => {
+		if (listContainer && selectedIndex >= 0 && selectedIndex < prompts.length) {
+			const selectedElement = listContainer.querySelector(
+				`[data-prompt-index="${selectedIndex}"]`
+			) as HTMLElement;
+
+			if (selectedElement) {
+				selectedElement.scrollIntoView({
+					behavior: 'smooth',
+					block: 'center',
+					inline: 'nearest'
+				});
+			}
+		}
+	});
+</script>
+
+<ScrollArea>
+	{#if showSearchInput}
+		<div class="absolute top-0 right-0 left-0 z-10 p-2 pb-0">
+			<SearchInput placeholder="Search prompts..." bind:value={searchQuery} />
+		</div>
+	{/if}
+
+	<div bind:this={listContainer} class="max-h-64 p-2" class:pt-13={showSearchInput}>
+		{#if isLoading}
+			<ChatFormPromptPickerListItemSkeleton />
+		{:else if prompts.length === 0}
+			<div class="py-6 text-center text-sm text-muted-foreground">
+				{prompts.length === 0 ? 'No MCP prompts available' : 'No prompts found'}
+			</div>
+		{:else}
+			{#each prompts as prompt, index (prompt.serverName + ':' + prompt.name)}
+				{@const server = serverSettingsMap.get(prompt.serverName)}
+				{@const serverLabel = server ? getServerLabel(server) : prompt.serverName}
+
+				<ChatFormPromptPickerListItem
+					data-prompt-index={index}
+					{prompt}
+					{server}
+					{serverLabel}
+					isSelected={index === selectedIndex}
+					onClick={() => onPromptClick(prompt)}
+				/>
+			{/each}
+		{/if}
+	</div>
+</ScrollArea>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerListItem.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerListItem.svelte
new file mode 100644
index 00000000000..afa7384468c
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerListItem.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { MCPPromptInfo, MCPServerSettingsEntry } from '$lib/types';
+	import ChatFormPromptPickerHeader from './ChatFormPromptPickerHeader.svelte';
+
+	interface Props {
+		prompt: MCPPromptInfo;
+		server: MCPServerSettingsEntry | undefined;
+		serverLabel: string;
+		isSelected?: boolean;
+		onClick: () => void;
+		'data-prompt-index'?: number;
+	}
+
+	let {
+		prompt,
+		server,
+		serverLabel,
+		isSelected = false,
+		onClick,
+		'data-prompt-index': dataPromptIndex
+	}: Props = $props();
+</script>
+
+<button
+	type="button"
+	data-prompt-index={dataPromptIndex}
+	onclick={onClick}
+	class="flex w-full cursor-pointer items-start gap-3 rounded-lg px-3 py-2 text-left hover:bg-accent/50 {isSelected
+		? 'bg-accent/50'
+		: ''}"
+>
+	<ChatFormPromptPickerHeader {prompt} {server} {serverLabel} />
+</button>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerListItemSkeleton.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerListItemSkeleton.svelte
new file mode 100644
index 00000000000..da9ebdc0a1c
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerListItemSkeleton.svelte
@@ -0,0 +1,18 @@
+<div class="flex w-full items-start gap-3 rounded-lg px-3 py-2">
+	<div class="min-w-0 flex-1 space-y-2">
+		<!-- Server label skeleton -->
+		<div class="mb-2 flex items-center gap-1.5">
+			<div class="h-3 w-3 shrink-0 animate-pulse rounded-sm bg-muted"></div>
+			<div class="h-3 w-24 animate-pulse rounded bg-muted"></div>
+		</div>
+
+		<!-- Title skeleton -->
+		<div class="flex items-center gap-2">
+			<div class="h-4 w-32 animate-pulse rounded bg-muted"></div>
+			<div class="h-4 w-12 animate-pulse rounded-full bg-muted"></div>
+		</div>
+
+		<!-- Description skeleton -->
+		<div class="h-3 w-full animate-pulse rounded bg-muted"></div>
+	</div>
+</div>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte
index 25895c83b7f..29c326cf307 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte
@@ -1,61 +1,37 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { base } from '$app/paths';
-	import {
-		chatStore,
-		pendingEditMessageId,
-		clearPendingEditMessageId,
-		removeSystemPromptPlaceholder
-	} from '$lib/stores/chat.svelte';
+	import { getChatActionsContext, setMessageEditContext } from '$lib/contexts';
+	import { chatStore, pendingEditMessageId } from '$lib/stores/chat.svelte';
 	import { conversationsStore } from '$lib/stores/conversations.svelte';
 	import { DatabaseService } from '$lib/services';
-	import { config } from '$lib/stores/settings.svelte';
 	import { SYSTEM_MESSAGE_PLACEHOLDER } from '$lib/constants/ui';
-	import { copyToClipboard, isIMEComposing, formatMessageForClipboard } from '$lib/utils';
-	import ChatMessageAssistant from './ChatMessageAssistant.svelte';
-	import ChatMessageUser from './ChatMessageUser.svelte';
-	import ChatMessageSystem from './ChatMessageSystem.svelte';
+	import { MessageRole, AttachmentType } from '$lib/enums';
+	import {
+		ChatMessageAssistant,
+		ChatMessageUser,
+		ChatMessageSystem,
+		ChatMessageMcpPrompt
+	} from '$lib/components/app/chat';
+	import { parseFilesToMessageExtras } from '$lib/utils/browser-only';
+	import type { DatabaseMessageExtraMcpPrompt } from '$lib/types';
 
 	interface Props {
 		class?: string;
 		message: DatabaseMessage;
-		onCopy?: (message: DatabaseMessage) => void;
-		onContinueAssistantMessage?: (message: DatabaseMessage) => void;
-		onDelete?: (message: DatabaseMessage) => void;
-		onEditWithBranching?: (
-			message: DatabaseMessage,
-			newContent: string,
-			newExtras?: DatabaseMessageExtra[]
-		) => void;
-		onEditWithReplacement?: (
-			message: DatabaseMessage,
-			newContent: string,
-			shouldBranch: boolean
-		) => void;
-		onEditUserMessagePreserveResponses?: (
-			message: DatabaseMessage,
-			newContent: string,
-			newExtras?: DatabaseMessageExtra[]
-		) => void;
-		onNavigateToSibling?: (siblingId: string) => void;
-		onRegenerateWithBranching?: (message: DatabaseMessage, modelOverride?: string) => void;
+		isLastAssistantMessage?: boolean;
 		siblingInfo?: ChatMessageSiblingInfo | null;
 	}
 
 	let {
 		class: className = '',
 		message,
-		onCopy,
-		onContinueAssistantMessage,
-		onDelete,
-		onEditWithBranching,
-		onEditWithReplacement,
-		onEditUserMessagePreserveResponses,
-		onNavigateToSibling,
-		onRegenerateWithBranching,
+		isLastAssistantMessage = false,
 		siblingInfo = null
 	}: Props = $props();
 
+	const chatActions = getChatActionsContext();
+
 	let deletionInfo = $state<{
 		totalCount: number;
 		userMessages: number;
@@ -70,45 +46,65 @@
 	let shouldBranchAfterEdit = $state(false);
 	let textareaElement: HTMLTextAreaElement | undefined = $state();
 
-	let thinkingContent = $derived.by(() => {
-		if (message.role === 'assistant') {
-			const trimmedThinking = message.thinking?.trim();
+	let showSaveOnlyOption = $derived(message.role === MessageRole.USER);
 
-			return trimmedThinking ? trimmedThinking : null;
-		}
-		return null;
+	setMessageEditContext({
+		get isEditing() {
+			return isEditing;
+		},
+		get editedContent() {
+			return editedContent;
+		},
+		get editedExtras() {
+			return editedExtras;
+		},
+		get editedUploadedFiles() {
+			return editedUploadedFiles;
+		},
+		get originalContent() {
+			return message.content;
+		},
+		get originalExtras() {
+			return message.extra || [];
+		},
+		get showSaveOnlyOption() {
+			return showSaveOnlyOption;
+		},
+		setContent: (content: string) => {
+			editedContent = content;
+		},
+		setExtras: (extras: DatabaseMessageExtra[]) => {
+			editedExtras = extras;
+		},
+		setUploadedFiles: (files: ChatUploadedFile[]) => {
+			editedUploadedFiles = files;
+		},
+		save: handleSaveEdit,
+		saveOnly: handleSaveEditOnly,
+		cancel: handleCancelEdit,
+		startEdit: handleEdit
 	});
 
-	let toolCallContent = $derived.by((): ApiChatCompletionToolCall[] | string | null => {
-		if (message.role === 'assistant') {
-			const trimmedToolCalls = message.toolCalls?.trim();
-
-			if (!trimmedToolCalls) {
-				return null;
-			}
-
-			try {
-				const parsed = JSON.parse(trimmedToolCalls);
+	let mcpPromptExtra = $derived.by(() => {
+		if (message.role !== MessageRole.USER) return null;
+		if (message.content.trim()) return null;
+		if (!message.extra || message.extra.length !== 1) return null;
 
-				if (Array.isArray(parsed)) {
-					return parsed as ApiChatCompletionToolCall[];
-				}
-			} catch {
-				// Harmony-only path: fall back to the raw string so issues surface visibly.
-			}
+		const extra = message.extra[0];
 
-			return trimmedToolCalls;
+		if (extra.type === AttachmentType.MCP_PROMPT) {
+			return extra as DatabaseMessageExtraMcpPrompt;
 		}
+
 		return null;
 	});
 
-	// Auto-start edit mode if this message is the pending edit target
 	$effect(() => {
 		const pendingId = pendingEditMessageId();
 
 		if (pendingId && pendingId === message.id && !isEditing) {
 			handleEdit();
-			clearPendingEditMessageId();
+			chatStore.clearPendingEditMessageId();
 		}
 	});
 
@@ -116,8 +112,8 @@
 		isEditing = false;
 
 		// If canceling a new system message with placeholder content, remove it without deleting children
-		if (message.role === 'system') {
-			const conversationDeleted = await removeSystemPromptPlaceholder(message.id);
+		if (message.role === MessageRole.SYSTEM) {
+			const conversationDeleted = await chatStore.removeSystemPromptPlaceholder(message.id);
 
 			if (conversationDeleted) {
 				goto(`${base}/`);
@@ -131,30 +127,19 @@
 		editedUploadedFiles = [];
 	}
 
-	function handleEditedExtrasChange(extras: DatabaseMessageExtra[]) {
-		editedExtras = extras;
-	}
-
-	function handleEditedUploadedFilesChange(files: ChatUploadedFile[]) {
-		editedUploadedFiles = files;
-	}
-
-	async function handleCopy() {
-		const asPlainText = Boolean(config().copyTextAttachmentsAsPlainText);
-		const clipboardContent = formatMessageForClipboard(message.content, message.extra, asPlainText);
-		await copyToClipboard(clipboardContent, 'Message copied to clipboard');
-		onCopy?.(message);
+	function handleCopy() {
+		chatActions.copy(message);
 	}
 
 	async function handleConfirmDelete() {
-		if (message.role === 'system') {
-			const conversationDeleted = await removeSystemPromptPlaceholder(message.id);
+		if (message.role === MessageRole.SYSTEM) {
+			const conversationDeleted = await chatStore.removeSystemPromptPlaceholder(message.id);
 
 			if (conversationDeleted) {
-				goto('/');
+				goto(`${base}/`);
 			}
 		} else {
-			onDelete?.(message);
+			chatActions.delete(message);
 		}
 
 		showDeleteDialog = false;
@@ -167,9 +152,9 @@
 
 	function handleEdit() {
 		isEditing = true;
-		// Clear placeholder content for system messages
+		// Clear temporary placeholder content for system messages
 		editedContent =
-			message.role === 'system' && message.content === SYSTEM_MESSAGE_PLACEHOLDER
+			message.role === MessageRole.SYSTEM && message.content === SYSTEM_MESSAGE_PLACEHOLDER
 				? ''
 				: message.content;
 		textareaElement?.focus();
@@ -187,38 +172,26 @@
 		}, 0);
 	}
 
-	function handleEditedContentChange(content: string) {
-		editedContent = content;
-	}
-
-	function handleEditKeydown(event: KeyboardEvent) {
-		// Check for IME composition using isComposing property and keyCode 229 (specifically for IME composition on Safari)
-		// This prevents saving edit when confirming IME word selection (e.g., Japanese/Chinese input)
-		if (event.key === 'Enter' && !event.shiftKey && !isIMEComposing(event)) {
-			event.preventDefault();
-			handleSaveEdit();
-		} else if (event.key === 'Escape') {
-			event.preventDefault();
-			handleCancelEdit();
-		}
-	}
-
 	function handleRegenerate(modelOverride?: string) {
-		onRegenerateWithBranching?.(message, modelOverride);
+		chatActions.regenerateWithBranching(message, modelOverride);
 	}
 
 	function handleContinue() {
-		onContinueAssistantMessage?.(message);
+		chatActions.continueAssistantMessage(message);
+	}
+
+	function handleNavigateToSibling(siblingId: string) {
+		chatActions.navigateToSibling(siblingId);
 	}
 
 	async function handleSaveEdit() {
-		if (message.role === 'system') {
+		if (message.role === MessageRole.SYSTEM) {
 			// System messages: update in place without branching
 			const newContent = editedContent.trim();
 
-			// If content is empty or still the placeholder, remove without deleting children
+			// If content is empty, remove without deleting children
 			if (!newContent) {
-				const conversationDeleted = await removeSystemPromptPlaceholder(message.id);
+				const conversationDeleted = await chatStore.removeSystemPromptPlaceholder(message.id);
 				isEditing = false;
 				if (conversationDeleted) {
 					goto(`${base}/`);
@@ -231,13 +204,13 @@
 			if (index !== -1) {
 				conversationsStore.updateMessageAtIndex(index, { content: newContent });
 			}
-		} else if (message.role === 'user') {
+		} else if (message.role === MessageRole.USER) {
 			const finalExtras = await getMergedExtras();
-			onEditWithBranching?.(message, editedContent.trim(), finalExtras);
+			chatActions.editWithBranching(message, editedContent.trim(), finalExtras);
 		} else {
 			// For assistant messages, preserve exact content including trailing whitespace
 			// This is important for the Continue feature to work properly
-			onEditWithReplacement?.(message, editedContent, shouldBranchAfterEdit);
+			chatActions.editWithReplacement(message, editedContent, shouldBranchAfterEdit);
 		}
 
 		isEditing = false;
@@ -246,10 +219,10 @@
 	}
 
 	async function handleSaveEditOnly() {
-		if (message.role === 'user') {
+		if (message.role === MessageRole.USER) {
 			// For user messages, trim to avoid accidental whitespace
 			const finalExtras = await getMergedExtras();
-			onEditUserMessagePreserveResponses?.(message, editedContent.trim(), finalExtras);
+			chatActions.editUserMessagePreserveResponses(message, editedContent.trim(), finalExtras);
 		}
 
 		isEditing = false;
@@ -261,8 +234,8 @@
 			return editedExtras;
 		}
 
-		const { parseFilesToMessageExtras } = await import('$lib/utils/browser-only');
-		const result = await parseFilesToMessageExtras(editedUploadedFiles);
+		const plainFiles = $state.snapshot(editedUploadedFiles);
+		const result = await parseFilesToMessageExtras(plainFiles);
 		const newExtras = result?.extras || [];
 
 		return [...editedExtras, ...newExtras];
@@ -273,49 +246,46 @@
 	}
 </script>
 
-{#if message.role === 'system'}
+{#if message.role === MessageRole.SYSTEM}
 	<ChatMessageSystem
 		bind:textareaElement
 		class={className}
 		{deletionInfo}
-		{editedContent}
-		{isEditing}
 		{message}
-		onCancelEdit={handleCancelEdit}
 		onConfirmDelete={handleConfirmDelete}
 		onCopy={handleCopy}
 		onDelete={handleDelete}
 		onEdit={handleEdit}
-		onEditKeydown={handleEditKeydown}
-		onEditedContentChange={handleEditedContentChange}
-		{onNavigateToSibling}
-		onSaveEdit={handleSaveEdit}
+		onNavigateToSibling={handleNavigateToSibling}
+		onShowDeleteDialogChange={handleShowDeleteDialogChange}
+		{showDeleteDialog}
+		{siblingInfo}
+	/>
+{:else if mcpPromptExtra}
+	<ChatMessageMcpPrompt
+		class={className}
+		{deletionInfo}
+		{message}
+		mcpPrompt={mcpPromptExtra}
+		onConfirmDelete={handleConfirmDelete}
+		onCopy={handleCopy}
+		onDelete={handleDelete}
+		onEdit={handleEdit}
+		onNavigateToSibling={handleNavigateToSibling}
 		onShowDeleteDialogChange={handleShowDeleteDialogChange}
 		{showDeleteDialog}
 		{siblingInfo}
 	/>
-{:else if message.role === 'user'}
+{:else if message.role === MessageRole.USER}
 	<ChatMessageUser
-		bind:textareaElement
 		class={className}
 		{deletionInfo}
-		{editedContent}
-		{editedExtras}
-		{editedUploadedFiles}
-		{isEditing}
 		{message}
-		onCancelEdit={handleCancelEdit}
 		onConfirmDelete={handleConfirmDelete}
 		onCopy={handleCopy}
 		onDelete={handleDelete}
 		onEdit={handleEdit}
-		onEditKeydown={handleEditKeydown}
-		onEditedContentChange={handleEditedContentChange}
-		onEditedExtrasChange={handleEditedExtrasChange}
-		onEditedUploadedFilesChange={handleEditedUploadedFilesChange}
-		{onNavigateToSibling}
-		onSaveEdit={handleSaveEdit}
-		onSaveEditOnly={handleSaveEditOnly}
+		onNavigateToSibling={handleNavigateToSibling}
 		onShowDeleteDialogChange={handleShowDeleteDialogChange}
 		{showDeleteDialog}
 		{siblingInfo}
@@ -325,27 +295,18 @@
 		bind:textareaElement
 		class={className}
 		{deletionInfo}
-		{editedContent}
-		{isEditing}
+		{isLastAssistantMessage}
 		{message}
 		messageContent={message.content}
-		onCancelEdit={handleCancelEdit}
 		onConfirmDelete={handleConfirmDelete}
 		onContinue={handleContinue}
 		onCopy={handleCopy}
 		onDelete={handleDelete}
 		onEdit={handleEdit}
-		onEditKeydown={handleEditKeydown}
-		onEditedContentChange={handleEditedContentChange}
-		{onNavigateToSibling}
+		onNavigateToSibling={handleNavigateToSibling}
 		onRegenerate={handleRegenerate}
-		onSaveEdit={handleSaveEdit}
 		onShowDeleteDialogChange={handleShowDeleteDialogChange}
-		{shouldBranchAfterEdit}
-		onShouldBranchAfterEditChange={(value) => (shouldBranchAfterEdit = value)}
 		{showDeleteDialog}
 		{siblingInfo}
-		{thinkingContent}
-		{toolCallContent}
 	/>
 {/if}
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageActions.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageActions.svelte
index dbd9b982285..97b34e92cc9 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageActions.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageActions.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { Edit, Copy, RefreshCw, Trash2, ArrowRight } from '@lucide/svelte';
 	import {
-		ActionButton,
+		ActionIcon,
 		ChatMessageBranchingControls,
 		DialogConfirmation
 	} from '$lib/components/app';
 	import { Switch } from '$lib/components/ui/switch';
+	import { MessageRole } from '$lib/enums';
 
 	interface Props {
-		role: 'user' | 'assistant';
+		role: MessageRole.USER | MessageRole.ASSISTANT;
 		justify: 'start' | 'end';
 		actionsPosition: 'left' | 'right';
 		siblingInfo?: ChatMessageSiblingInfo | null;
@@ -71,21 +72,21 @@
 		<div
 			class="pointer-events-auto inset-0 flex items-center gap-1 opacity-100 transition-all duration-150"
 		>
-			<ActionButton icon={Copy} tooltip="Copy" onclick={onCopy} />
+			<ActionIcon icon={Copy} tooltip="Copy" onclick={onCopy} />
 
 			{#if onEdit}
-				<ActionButton icon={Edit} tooltip="Edit" onclick={onEdit} />
+				<ActionIcon icon={Edit} tooltip="Edit" onclick={onEdit} />
 			{/if}
 
-			{#if role === 'assistant' && onRegenerate}
-				<ActionButton icon={RefreshCw} tooltip="Regenerate" onclick={() => onRegenerate()} />
+			{#if role === MessageRole.ASSISTANT && onRegenerate}
+				<ActionIcon icon={RefreshCw} tooltip="Regenerate" onclick={() => onRegenerate()} />
 			{/if}
 
-			{#if role === 'assistant' && onContinue}
-				<ActionButton icon={ArrowRight} tooltip="Continue" onclick={onContinue} />
+			{#if role === MessageRole.ASSISTANT && onContinue}
+				<ActionIcon icon={ArrowRight} tooltip="Continue" onclick={onContinue} />
 			{/if}
 
-			<ActionButton icon={Trash2} tooltip="Delete" onclick={onDelete} />
+			<ActionIcon icon={Trash2} tooltip="Delete" onclick={onDelete} />
 		</div>
 	</div>
 
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAgenticContent.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAgenticContent.svelte
new file mode 100644
index 00000000000..5aeb4e6b1f1
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAgenticContent.svelte
@@ -0,0 +1,354 @@
+<script lang="ts">
+	import {
+		ChatMessageStatistics,
+		CollapsibleContentBlock,
+		MarkdownContent,
+		SyntaxHighlightedCode
+	} from '$lib/components/app';
+	import { config } from '$lib/stores/settings.svelte';
+	import { Wrench, Loader2, AlertTriangle, Brain } from '@lucide/svelte';
+	import { AgenticSectionType, AttachmentType, FileTypeText } from '$lib/enums';
+	import { formatJsonPretty } from '$lib/utils';
+	import { ATTACHMENT_SAVED_REGEX, NEWLINE_SEPARATOR } from '$lib/constants/agentic';
+	import { parseAgenticContent, type AgenticSection } from '$lib/utils/agentic';
+	import type { DatabaseMessage, DatabaseMessageExtraImageFile } from '$lib/types/database';
+	import type { ChatMessageAgenticTimings, ChatMessageAgenticTurnStats } from '$lib/types/chat';
+	import { ChatMessageStatsView } from '$lib/enums';
+
+	interface Props {
+		message?: DatabaseMessage;
+		content: string;
+		isStreaming?: boolean;
+		highlightTurns?: boolean;
+	}
+
+	type ToolResultLine = {
+		text: string;
+		image?: DatabaseMessageExtraImageFile;
+	};
+
+	let { content, message, isStreaming = false, highlightTurns = false }: Props = $props();
+
+	let expandedStates: Record<number, boolean> = $state({});
+
+	const sections = $derived(parseAgenticContent(content));
+	const showToolCallInProgress = $derived(config().showToolCallInProgress as boolean);
+	const showThoughtInProgress = $derived(config().showThoughtInProgress as boolean);
+
+	// Parse toolResults with images only when sections or message.extra change
+	const sectionsParsed = $derived(
+		sections.map((section) => ({
+			...section,
+			parsedLines: section.toolResult
+				? parseToolResultWithImages(section.toolResult, message?.extra)
+				: []
+		}))
+	);
+
+	// Group flat sections into agentic turns
+	// A new turn starts when a non-tool section follows a tool section
+	const turnGroups = $derived.by(() => {
+		const turns: { sections: (typeof sectionsParsed)[number][]; flatIndices: number[] }[] = [];
+		let currentTurn: (typeof sectionsParsed)[number][] = [];
+		let currentIndices: number[] = [];
+		let prevWasTool = false;
+
+		for (let i = 0; i < sectionsParsed.length; i++) {
+			const section = sectionsParsed[i];
+			const isTool =
+				section.type === AgenticSectionType.TOOL_CALL ||
+				section.type === AgenticSectionType.TOOL_CALL_PENDING ||
+				section.type === AgenticSectionType.TOOL_CALL_STREAMING;
+
+			if (!isTool && prevWasTool && currentTurn.length > 0) {
+				turns.push({ sections: currentTurn, flatIndices: currentIndices });
+				currentTurn = [];
+				currentIndices = [];
+			}
+
+			currentTurn.push(section);
+			currentIndices.push(i);
+			prevWasTool = isTool;
+		}
+
+		if (currentTurn.length > 0) {
+			turns.push({ sections: currentTurn, flatIndices: currentIndices });
+		}
+
+		return turns;
+	});
+
+	function getDefaultExpanded(section: AgenticSection): boolean {
+		if (
+			section.type === AgenticSectionType.TOOL_CALL_PENDING ||
+			section.type === AgenticSectionType.TOOL_CALL_STREAMING
+		) {
+			return showToolCallInProgress;
+		}
+
+		if (section.type === AgenticSectionType.REASONING_PENDING) {
+			return showThoughtInProgress;
+		}
+
+		return false;
+	}
+
+	function isExpanded(index: number, section: AgenticSection): boolean {
+		if (expandedStates[index] !== undefined) {
+			return expandedStates[index];
+		}
+
+		return getDefaultExpanded(section);
+	}
+
+	function toggleExpanded(index: number, section: AgenticSection) {
+		const currentState = isExpanded(index, section);
+
+		expandedStates[index] = !currentState;
+	}
+
+	function parseToolResultWithImages(
+		toolResult: string,
+		extras?: DatabaseMessage['extra']
+	): ToolResultLine[] {
+		const lines = toolResult.split(NEWLINE_SEPARATOR);
+
+		return lines.map((line) => {
+			const match = line.match(ATTACHMENT_SAVED_REGEX);
+			if (!match || !extras) return { text: line };
+
+			const attachmentName = match[1];
+			const image = extras.find(
+				(e): e is DatabaseMessageExtraImageFile =>
+					e.type === AttachmentType.IMAGE && e.name === attachmentName
+			);
+
+			return { text: line, image };
+		});
+	}
+
+	function buildTurnAgenticTimings(stats: ChatMessageAgenticTurnStats): ChatMessageAgenticTimings {
+		return {
+			turns: 1,
+			toolCallsCount: stats.toolCalls.length,
+			toolsMs: stats.toolsMs,
+			toolCalls: stats.toolCalls,
+			llm: stats.llm
+		};
+	}
+</script>
+
+{#snippet renderSection(section: (typeof sectionsParsed)[number], index: number)}
+	{#if section.type === AgenticSectionType.TEXT}
+		<div class="agentic-text">
+			<MarkdownContent content={section.content} attachments={message?.extra} />
+		</div>
+	{:else if section.type === AgenticSectionType.TOOL_CALL_STREAMING}
+		{@const streamingIcon = isStreaming ? Loader2 : AlertTriangle}
+		{@const streamingIconClass = isStreaming ? 'h-4 w-4 animate-spin' : 'h-4 w-4 text-yellow-500'}
+		{@const streamingSubtitle = isStreaming ? '' : 'incomplete'}
+
+		<CollapsibleContentBlock
+			open={isExpanded(index, section)}
+			class="my-2"
+			icon={streamingIcon}
+			iconClass={streamingIconClass}
+			title={section.toolName || 'Tool call'}
+			subtitle={streamingSubtitle}
+			{isStreaming}
+			onToggle={() => toggleExpanded(index, section)}
+		>
+			<div class="pt-3">
+				<div class="my-3 flex items-center gap-2 text-xs text-muted-foreground">
+					<span>Arguments:</span>
+
+					{#if isStreaming}
+						<Loader2 class="h-3 w-3 animate-spin" />
+					{/if}
+				</div>
+				{#if section.toolArgs}
+					<SyntaxHighlightedCode
+						code={formatJsonPretty(section.toolArgs)}
+						language={FileTypeText.JSON}
+						maxHeight="20rem"
+						class="text-xs"
+					/>
+				{:else if isStreaming}
+					<div class="rounded bg-muted/30 p-2 text-xs text-muted-foreground italic">
+						Receiving arguments...
+					</div>
+				{:else}
+					<div
+						class="rounded bg-yellow-500/10 p-2 text-xs text-yellow-600 italic dark:text-yellow-400"
+					>
+						Response was truncated
+					</div>
+				{/if}
+			</div>
+		</CollapsibleContentBlock>
+	{:else if section.type === AgenticSectionType.TOOL_CALL || section.type === AgenticSectionType.TOOL_CALL_PENDING}
+		{@const isPending = section.type === AgenticSectionType.TOOL_CALL_PENDING}
+		{@const toolIcon = isPending ? Loader2 : Wrench}
+		{@const toolIconClass = isPending ? 'h-4 w-4 animate-spin' : 'h-4 w-4'}
+
+		<CollapsibleContentBlock
+			open={isExpanded(index, section)}
+			class="my-2"
+			icon={toolIcon}
+			iconClass={toolIconClass}
+			title={section.toolName || ''}
+			subtitle={isPending ? 'executing...' : undefined}
+			isStreaming={isPending}
+			onToggle={() => toggleExpanded(index, section)}
+		>
+			{#if section.toolArgs && section.toolArgs !== '{}'}
+				<div class="pt-3">
+					<div class="my-3 text-xs text-muted-foreground">Arguments:</div>
+
+					<SyntaxHighlightedCode
+						code={formatJsonPretty(section.toolArgs)}
+						language={FileTypeText.JSON}
+						maxHeight="20rem"
+						class="text-xs"
+					/>
+				</div>
+			{/if}
+
+			<div class="pt-3">
+				<div class="my-3 flex items-center gap-2 text-xs text-muted-foreground">
+					<span>Result:</span>
+
+					{#if isPending}
+						<Loader2 class="h-3 w-3 animate-spin" />
+					{/if}
+				</div>
+				{#if section.toolResult}
+					<div class="overflow-auto rounded-lg border border-border bg-muted p-4">
+						{#each section.parsedLines as line, i (i)}
+							<div class="font-mono text-xs leading-relaxed whitespace-pre-wrap">{line.text}</div>
+							{#if line.image}
+								<img
+									src={line.image.base64Url}
+									alt={line.image.name}
+									class="mt-2 mb-2 h-auto max-w-full rounded-lg"
+									loading="lazy"
+								/>
+							{/if}
+						{/each}
+					</div>
+				{:else if isPending}
+					<div class="rounded bg-muted/30 p-2 text-xs text-muted-foreground italic">
+						Waiting for result...
+					</div>
+				{/if}
+			</div>
+		</CollapsibleContentBlock>
+	{:else if section.type === AgenticSectionType.REASONING}
+		<CollapsibleContentBlock
+			open={isExpanded(index, section)}
+			class="my-2"
+			icon={Brain}
+			title="Reasoning"
+			onToggle={() => toggleExpanded(index, section)}
+		>
+			<div class="pt-3">
+				<div class="text-xs leading-relaxed break-words whitespace-pre-wrap">
+					{section.content}
+				</div>
+			</div>
+		</CollapsibleContentBlock>
+	{:else if section.type === AgenticSectionType.REASONING_PENDING}
+		{@const reasoningTitle = isStreaming ? 'Reasoning...' : 'Reasoning'}
+		{@const reasoningSubtitle = isStreaming ? '' : 'incomplete'}
+
+		<CollapsibleContentBlock
+			open={isExpanded(index, section)}
+			class="my-2"
+			icon={Brain}
+			title={reasoningTitle}
+			subtitle={reasoningSubtitle}
+			{isStreaming}
+			onToggle={() => toggleExpanded(index, section)}
+		>
+			<div class="pt-3">
+				<div class="text-xs leading-relaxed break-words whitespace-pre-wrap">
+					{section.content}
+				</div>
+			</div>
+		</CollapsibleContentBlock>
+	{/if}
+{/snippet}
+
+<div class="agentic-content">
+	{#if highlightTurns && turnGroups.length > 1}
+		{#each turnGroups as turn, turnIndex (turnIndex)}
+			{@const turnStats = message?.timings?.agentic?.perTurn?.[turnIndex]}
+			<div class="agentic-turn my-2 hover:bg-muted/80 dark:hover:bg-muted/30">
+				<span class="agentic-turn-label">Turn {turnIndex + 1}</span>
+				{#each turn.sections as section, sIdx (turn.flatIndices[sIdx])}
+					{@render renderSection(section, turn.flatIndices[sIdx])}
+				{/each}
+				{#if turnStats}
+					<div class="turn-stats">
+						<ChatMessageStatistics
+							promptTokens={turnStats.llm.prompt_n}
+							promptMs={turnStats.llm.prompt_ms}
+							predictedTokens={turnStats.llm.predicted_n}
+							predictedMs={turnStats.llm.predicted_ms}
+							agenticTimings={turnStats.toolCalls.length > 0
+								? buildTurnAgenticTimings(turnStats)
+								: undefined}
+							initialView={ChatMessageStatsView.GENERATION}
+							hideSummary
+						/>
+					</div>
+				{/if}
+			</div>
+		{/each}
+	{:else}
+		{#each sectionsParsed as section, index (index)}
+			{@render renderSection(section, index)}
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.agentic-content {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		width: 100%;
+		max-width: 48rem;
+	}
+
+	.agentic-text {
+		width: 100%;
+	}
+
+	.agentic-turn {
+		position: relative;
+		border: 1.5px dashed var(--muted-foreground);
+		border-radius: 0.75rem;
+		padding: 1rem;
+		transition: background 0.1s;
+	}
+
+	.agentic-turn-label {
+		position: absolute;
+		top: -1rem;
+		left: 0.75rem;
+		padding: 0 0.375rem;
+		background: var(--background);
+		font-size: 0.7rem;
+		font-weight: 500;
+		color: var(--muted-foreground);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	.turn-stats {
+		margin-top: 0.75rem;
+		padding-top: 0.5rem;
+		border-top: 1px solid hsl(var(--muted) / 0.5);
+	}
+</style>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte
index 867def5fc3c..b0c1dba7b25 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageAssistant.svelte
@@ -1,26 +1,30 @@
 <script lang="ts">
 	import {
-		ModelBadge,
+		ChatMessageAgenticContent,
 		ChatMessageActions,
 		ChatMessageStatistics,
-		ChatMessageThinkingBlock,
-		CopyToClipboardIcon,
 		MarkdownContent,
+		ModelBadge,
 		ModelsSelector
 	} from '$lib/components/app';
+	import { getMessageEditContext } from '$lib/contexts';
 	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
-	import { useModelChangeValidation } from '$lib/hooks/use-model-change-validation.svelte';
-	import { isLoading } from '$lib/stores/chat.svelte';
-	import { autoResizeTextarea, copyToClipboard } from '$lib/utils';
+	import { isLoading, isChatStreaming } from '$lib/stores/chat.svelte';
+	import { agenticStreamingToolCall } from '$lib/stores/agentic.svelte';
+	import { autoResizeTextarea, copyToClipboard, isIMEComposing } from '$lib/utils';
+	import { tick } from 'svelte';
 	import { fade } from 'svelte/transition';
-	import { Check, X, Wrench } from '@lucide/svelte';
+	import { Check, X } from '@lucide/svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Checkbox } from '$lib/components/ui/checkbox';
-	import { INPUT_CLASSES } from '$lib/constants/input-classes';
+	import { INPUT_CLASSES } from '$lib/constants/css-classes';
+	import { MessageRole, KeyboardKey, ChatMessageStatsView } from '$lib/enums';
 	import Label from '$lib/components/ui/label/label.svelte';
 	import { config } from '$lib/stores/settings.svelte';
-	import { conversationsStore } from '$lib/stores/conversations.svelte';
 	import { isRouterMode } from '$lib/stores/server.svelte';
+	import { modelsStore } from '$lib/stores/models.svelte';
+	import { ServerModelStatus } from '$lib/enums';
+	import { AGENTIC_TAGS, REASONING_TAGS } from '$lib/constants/agentic';
 
 	interface Props {
 		class?: string;
@@ -30,153 +34,164 @@
 			assistantMessages: number;
 			messageTypes: string[];
 		} | null;
-		editedContent?: string;
-		isEditing?: boolean;
+		isLastAssistantMessage?: boolean;
 		message: DatabaseMessage;
 		messageContent: string | undefined;
-		onCancelEdit?: () => void;
 		onCopy: () => void;
 		onConfirmDelete: () => void;
 		onContinue?: () => void;
 		onDelete: () => void;
 		onEdit?: () => void;
-		onEditKeydown?: (event: KeyboardEvent) => void;
-		onEditedContentChange?: (content: string) => void;
 		onNavigateToSibling?: (siblingId: string) => void;
 		onRegenerate: (modelOverride?: string) => void;
-		onSaveEdit?: () => void;
 		onShowDeleteDialogChange: (show: boolean) => void;
-		onShouldBranchAfterEditChange?: (value: boolean) => void;
 		showDeleteDialog: boolean;
-		shouldBranchAfterEdit?: boolean;
 		siblingInfo?: ChatMessageSiblingInfo | null;
 		textareaElement?: HTMLTextAreaElement;
-		thinkingContent: string | null;
-		toolCallContent: ApiChatCompletionToolCall[] | string | null;
 	}
 
 	let {
 		class: className = '',
 		deletionInfo,
-		editedContent = '',
-		isEditing = false,
+		isLastAssistantMessage = false,
 		message,
 		messageContent,
-		onCancelEdit,
 		onConfirmDelete,
 		onContinue,
 		onCopy,
 		onDelete,
 		onEdit,
-		onEditKeydown,
-		onEditedContentChange,
 		onNavigateToSibling,
 		onRegenerate,
-		onSaveEdit,
 		onShowDeleteDialogChange,
-		onShouldBranchAfterEditChange,
 		showDeleteDialog,
-		shouldBranchAfterEdit = false,
 		siblingInfo = null,
-		textareaElement = $bindable(),
-		thinkingContent,
-		toolCallContent = null
+		textareaElement = $bindable()
 	}: Props = $props();
 
-	const toolCalls = $derived(
-		Array.isArray(toolCallContent) ? (toolCallContent as ApiChatCompletionToolCall[]) : null
-	);
-	const fallbackToolCalls = $derived(typeof toolCallContent === 'string' ? toolCallContent : null);
+	// Get edit context
+	const editCtx = getMessageEditContext();
 
-	const processingState = useProcessingState();
+	// Local state for assistant-specific editing
+	let shouldBranchAfterEdit = $state(false);
 
-	// Local state for raw output toggle (per message)
-	let showRawOutput = $state(false);
+	function handleEditKeydown(event: KeyboardEvent) {
+		if (event.key === KeyboardKey.ENTER && !event.shiftKey && !isIMEComposing(event)) {
+			event.preventDefault();
+			editCtx.save();
+		} else if (event.key === KeyboardKey.ESCAPE) {
+			event.preventDefault();
+			editCtx.cancel();
+		}
+	}
+
+	const hasAgenticMarkers = $derived(
+		messageContent?.includes(AGENTIC_TAGS.TOOL_CALL_START) ?? false
+	);
+	const hasStreamingToolCall = $derived(
+		isChatStreaming() && agenticStreamingToolCall(message.convId) !== null
+	);
+	const hasReasoningMarkers = $derived(messageContent?.includes(REASONING_TAGS.START) ?? false);
+	const isStructuredContent = $derived(
+		hasAgenticMarkers || hasReasoningMarkers || hasStreamingToolCall
+	);
+	const processingState = useProcessingState();
 
 	let currentConfig = $derived(config());
 	let isRouter = $derived(isRouterMode());
-	let displayedModel = $derived((): string | null => {
-		if (message.model) {
-			return message.model;
+	let showRawOutput = $state(false);
+	let activeStatsView = $state<ChatMessageStatsView>(ChatMessageStatsView.GENERATION);
+	let statsContainerEl: HTMLDivElement | undefined = $state();
+
+	function getScrollParent(el: HTMLElement): HTMLElement | null {
+		let parent = el.parentElement;
+		while (parent) {
+			const style = getComputedStyle(parent);
+			if (/(auto|scroll)/.test(style.overflowY)) {
+				return parent;
+			}
+			parent = parent.parentElement;
 		}
-
 		return null;
-	});
-
-	const { handleModelChange } = useModelChangeValidation({
-		getRequiredModalities: () => conversationsStore.getModalitiesUpToMessage(message.id),
-		onSuccess: (modelName: string) => onRegenerate(modelName)
-	});
-
-	function handleCopyModel() {
-		const model = displayedModel();
-
-		void copyToClipboard(model ?? '');
 	}
 
-	$effect(() => {
-		if (isEditing && textareaElement) {
-			autoResizeTextarea(textareaElement);
+	async function handleStatsViewChange(view: ChatMessageStatsView) {
+		const el = statsContainerEl;
+		if (!el) {
+			activeStatsView = view;
+
+			return;
 		}
-	});
 
-	$effect(() => {
-		if (isLoading() && !message?.content?.trim()) {
-			processingState.startMonitoring();
+		const scrollParent = getScrollParent(el);
+		if (!scrollParent) {
+			activeStatsView = view;
+
+			return;
 		}
-	});
 
-	function formatToolCallBadge(toolCall: ApiChatCompletionToolCall, index: number) {
-		const callNumber = index + 1;
-		const functionName = toolCall.function?.name?.trim();
-		const label = functionName || `Call #${callNumber}`;
+		const yBefore = el.getBoundingClientRect().top;
 
-		const payload: Record<string, unknown> = {};
+		activeStatsView = view;
 
-		const id = toolCall.id?.trim();
-		if (id) {
-			payload.id = id;
-		}
+		await tick();
 
-		const type = toolCall.type?.trim();
-		if (type) {
-			payload.type = type;
+		const delta = el.getBoundingClientRect().top - yBefore;
+		if (delta !== 0) {
+			scrollParent.scrollTop += delta;
 		}
 
-		if (toolCall.function) {
-			const fnPayload: Record<string, unknown> = {};
+		// Correct any drift after browser paint
+		requestAnimationFrame(() => {
+			const drift = el.getBoundingClientRect().top - yBefore;
 
-			const name = toolCall.function.name?.trim();
-			if (name) {
-				fnPayload.name = name;
+			if (Math.abs(drift) > 1) {
+				scrollParent.scrollTop += drift;
 			}
+		});
+	}
 
-			const rawArguments = toolCall.function.arguments?.trim();
-			if (rawArguments) {
-				try {
-					fnPayload.arguments = JSON.parse(rawArguments);
-				} catch {
-					fnPayload.arguments = rawArguments;
-				}
-			}
+	let highlightAgenticTurns = $derived(
+		hasAgenticMarkers &&
+			(currentConfig.alwaysShowAgenticTurns || activeStatsView === ChatMessageStatsView.SUMMARY)
+	);
 
-			if (Object.keys(fnPayload).length > 0) {
-				payload.function = fnPayload;
-			}
-		}
+	let displayedModel = $derived(message.model ?? null);
 
-		const formattedPayload = JSON.stringify(payload, null, 2);
+	let isCurrentlyLoading = $derived(isLoading());
+	let isStreaming = $derived(isChatStreaming());
+	let hasNoContent = $derived(!message?.content?.trim());
+	let isActivelyProcessing = $derived(isCurrentlyLoading || isStreaming);
 
-		return {
-			label,
-			tooltip: formattedPayload,
-			copyValue: formattedPayload
-		};
-	}
+	let showProcessingInfoTop = $derived(
+		message?.role === MessageRole.ASSISTANT &&
+			isActivelyProcessing &&
+			hasNoContent &&
+			isLastAssistantMessage
+	);
+
+	let showProcessingInfoBottom = $derived(
+		message?.role === MessageRole.ASSISTANT &&
+			isActivelyProcessing &&
+			!hasNoContent &&
+			isLastAssistantMessage
+	);
 
-	function handleCopyToolCall(payload: string) {
-		void copyToClipboard(payload, 'Tool call copied to clipboard');
+	function handleCopyModel() {
+		void copyToClipboard(displayedModel ?? '');
 	}
+
+	$effect(() => {
+		if (editCtx.isEditing && textareaElement) {
+			autoResizeTextarea(textareaElement);
+		}
+	});
+
+	$effect(() => {
+		if (showProcessingInfoTop || showProcessingInfoBottom) {
+			processingState.startMonitoring();
+		}
+	});
 </script>
 
 <div
@@ -184,34 +199,28 @@
 	role="group"
 	aria-label="Assistant message with actions"
 >
-	{#if thinkingContent}
-		<ChatMessageThinkingBlock
-			reasoningContent={thinkingContent}
-			isStreaming={!message.timestamp}
-			hasRegularContent={!!messageContent?.trim()}
-		/>
-	{/if}
-
-	{#if message?.role === 'assistant' && isLoading() && !message?.content?.trim()}
+	{#if showProcessingInfoTop}
 		<div class="mt-6 w-full max-w-[48rem]" in:fade>
 			<div class="processing-container">
 				<span class="processing-text">
-					{processingState.getPromptProgressText() ?? processingState.getProcessingMessage()}
+					{processingState.getPromptProgressText() ??
+						processingState.getProcessingMessage() ??
+						'Processing...'}
 				</span>
 			</div>
 		</div>
 	{/if}
 
-	{#if isEditing}
+	{#if editCtx.isEditing}
 		<div class="w-full">
 			<textarea
 				bind:this={textareaElement}
-				bind:value={editedContent}
+				value={editCtx.editedContent}
 				class="min-h-[50vh] w-full resize-y rounded-2xl px-3 py-2 text-sm {INPUT_CLASSES}"
-				onkeydown={onEditKeydown}
+				onkeydown={handleEditKeydown}
 				oninput={(e) => {
 					autoResizeTextarea(e.currentTarget);
-					onEditedContentChange?.(e.currentTarget.value);
+					editCtx.setContent(e.currentTarget.value);
 				}}
 				placeholder="Edit assistant message..."
 			></textarea>
@@ -221,30 +230,42 @@
 					<Checkbox
 						id="branch-after-edit"
 						bind:checked={shouldBranchAfterEdit}
-						onCheckedChange={(checked) => onShouldBranchAfterEditChange?.(checked === true)}
+						onCheckedChange={(checked) => (shouldBranchAfterEdit = checked === true)}
 					/>
 					<Label for="branch-after-edit" class="cursor-pointer text-sm text-muted-foreground">
 						Branch conversation after edit
 					</Label>
 				</div>
 				<div class="flex gap-2">
-					<Button class="h-8 px-3" onclick={onCancelEdit} size="sm" variant="outline">
+					<Button class="h-8 px-3" onclick={editCtx.cancel} size="sm" variant="outline">
 						<X class="mr-1 h-3 w-3" />
 						Cancel
 					</Button>
 
-					<Button class="h-8 px-3" onclick={onSaveEdit} disabled={!editedContent?.trim()} size="sm">
+					<Button
+						class="h-8 px-3"
+						onclick={editCtx.save}
+						disabled={!editCtx.editedContent?.trim()}
+						size="sm"
+					>
 						<Check class="mr-1 h-3 w-3" />
 						Save
 					</Button>
 				</div>
 			</div>
 		</div>
-	{:else if message.role === 'assistant'}
+	{:else if message.role === MessageRole.ASSISTANT}
 		{#if showRawOutput}
 			<pre class="raw-output">{messageContent || ''}</pre>
+		{:else if isStructuredContent}
+			<ChatMessageAgenticContent
+				content={messageContent || ''}
+				isStreaming={isChatStreaming()}
+				highlightTurns={highlightAgenticTurns}
+				{message}
+			/>
 		{:else}
-			<MarkdownContent content={messageContent || ''} />
+			<MarkdownContent content={messageContent || ''} attachments={message.extra} />
 		{/if}
 	{:else}
 		<div class="text-sm whitespace-pre-wrap">
@@ -252,26 +273,52 @@
 		</div>
 	{/if}
 
+	{#if showProcessingInfoBottom}
+		<div class="mt-4 w-full max-w-[48rem]" in:fade>
+			<div class="processing-container">
+				<span class="processing-text">
+					{processingState.getPromptProgressText() ??
+						processingState.getProcessingMessage() ??
+						'Processing...'}
+				</span>
+			</div>
+		</div>
+	{/if}
+
 	<div class="info my-6 grid gap-4 tabular-nums">
-		{#if displayedModel()}
-			<div class="inline-flex flex-wrap items-start gap-2 text-xs text-muted-foreground">
+		{#if displayedModel}
+			<div
+				bind:this={statsContainerEl}
+				class="inline-flex flex-wrap items-start gap-2 text-xs text-muted-foreground"
+			>
 				{#if isRouter}
 					<ModelsSelector
-						currentModel={displayedModel()}
-						onModelChange={handleModelChange}
+						currentModel={displayedModel}
 						disabled={isLoading()}
-						upToMessageId={message.id}
+						onModelChange={async (modelId, modelName) => {
+							const status = modelsStore.getModelStatus(modelId);
+
+							if (status !== ServerModelStatus.LOADED) {
+								await modelsStore.loadModel(modelId);
+							}
+
+							onRegenerate(modelName);
+							return true;
+						}}
 					/>
 				{:else}
-					<ModelBadge model={displayedModel() || undefined} onclick={handleCopyModel} />
+					<ModelBadge model={displayedModel || undefined} onclick={handleCopyModel} />
 				{/if}
 
 				{#if currentConfig.showMessageStats && message.timings && message.timings.predicted_n && message.timings.predicted_ms}
+					{@const agentic = message.timings.agentic}
 					<ChatMessageStatistics
-						promptTokens={message.timings.prompt_n}
-						promptMs={message.timings.prompt_ms}
-						predictedTokens={message.timings.predicted_n}
-						predictedMs={message.timings.predicted_ms}
+						promptTokens={agentic ? agentic.llm.prompt_n : message.timings.prompt_n}
+						promptMs={agentic ? agentic.llm.prompt_ms : message.timings.prompt_ms}
+						predictedTokens={agentic ? agentic.llm.predicted_n : message.timings.predicted_n}
+						predictedMs={agentic ? agentic.llm.predicted_ms : message.timings.predicted_ms}
+						agenticTimings={agentic}
+						onActiveViewChange={handleStatsViewChange}
 					/>
 				{:else if isLoading() && currentConfig.showMessageStats}
 					{@const liveStats = processingState.getLiveProcessingStats()}
@@ -293,53 +340,11 @@
 				{/if}
 			</div>
 		{/if}
-
-		{#if config().showToolCalls}
-			{#if (toolCalls && toolCalls.length > 0) || fallbackToolCalls}
-				<span class="inline-flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-					<span class="inline-flex items-center gap-1">
-						<Wrench class="h-3.5 w-3.5" />
-
-						<span>Tool calls:</span>
-					</span>
-
-					{#if toolCalls && toolCalls.length > 0}
-						{#each toolCalls as toolCall, index (toolCall.id ?? `${index}`)}
-							{@const badge = formatToolCallBadge(toolCall, index)}
-							<button
-								type="button"
-								class="tool-call-badge inline-flex cursor-pointer items-center gap-1 rounded-sm bg-muted-foreground/15 px-1.5 py-0.75"
-								title={badge.tooltip}
-								aria-label={`Copy tool call ${badge.label}`}
-								onclick={() => handleCopyToolCall(badge.copyValue)}
-							>
-								{badge.label}
-								<CopyToClipboardIcon
-									text={badge.copyValue}
-									ariaLabel={`Copy tool call ${badge.label}`}
-								/>
-							</button>
-						{/each}
-					{:else if fallbackToolCalls}
-						<button
-							type="button"
-							class="tool-call-badge tool-call-badge--fallback inline-flex cursor-pointer items-center gap-1 rounded-sm bg-muted-foreground/15 px-1.5 py-0.75"
-							title={fallbackToolCalls}
-							aria-label="Copy tool call payload"
-							onclick={() => handleCopyToolCall(fallbackToolCalls)}
-						>
-							{fallbackToolCalls}
-							<CopyToClipboardIcon text={fallbackToolCalls} ariaLabel="Copy tool call payload" />
-						</button>
-					{/if}
-				</span>
-			{/if}
-		{/if}
 	</div>
 
-	{#if message.timestamp && !isEditing}
+	{#if message.timestamp && !editCtx.isEditing}
 		<ChatMessageActions
-			role="assistant"
+			role={MessageRole.ASSISTANT}
 			justify="start"
 			actionsPosition="left"
 			{siblingInfo}
@@ -348,7 +353,7 @@
 			{onCopy}
 			{onEdit}
 			{onRegenerate}
-			onContinue={currentConfig.enableContinueGeneration && !thinkingContent
+			onContinue={currentConfig.enableContinueGeneration && !hasReasoningMarkers
 				? onContinue
 				: undefined}
 			{onDelete}
@@ -408,17 +413,4 @@
 		white-space: pre-wrap;
 		word-break: break-word;
 	}
-
-	.tool-call-badge {
-		max-width: 12rem;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.tool-call-badge--fallback {
-		max-width: 20rem;
-		white-space: normal;
-		word-break: break-word;
-	}
 </style>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageEditForm.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageEditForm.svelte
index c216ea690b1..0f0e53b81b6 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageEditForm.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageEditForm.svelte
@@ -1,79 +1,26 @@
 <script lang="ts">
-	import { X, ArrowUp, Paperclip, AlertTriangle } from '@lucide/svelte';
+	import { X, AlertTriangle } from '@lucide/svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { Switch } from '$lib/components/ui/switch';
-	import { ChatAttachmentsList, DialogConfirmation, ModelsSelector } from '$lib/components/app';
-	import { INPUT_CLASSES } from '$lib/constants/input-classes';
-	import { SETTING_CONFIG_DEFAULT } from '$lib/constants/settings-config';
-	import { AttachmentType, FileTypeCategory, MimeTypeText } from '$lib/enums';
-	import { config } from '$lib/stores/settings.svelte';
-	import { useModelChangeValidation } from '$lib/hooks/use-model-change-validation.svelte';
-	import { setEditModeActive, clearEditMode } from '$lib/stores/chat.svelte';
-	import { conversationsStore } from '$lib/stores/conversations.svelte';
-	import { modelsStore } from '$lib/stores/models.svelte';
-	import { isRouterMode } from '$lib/stores/server.svelte';
-	import {
-		autoResizeTextarea,
-		getFileTypeCategory,
-		getFileTypeCategoryByExtension,
-		parseClipboardContent
-	} from '$lib/utils';
+	import { ChatForm, DialogConfirmation } from '$lib/components/app';
+	import { getMessageEditContext } from '$lib/contexts';
+	import { KeyboardKey } from '$lib/enums';
+	import { chatStore } from '$lib/stores/chat.svelte';
+	import { processFilesToChatUploaded } from '$lib/utils/browser-only';
 
-	interface Props {
-		messageId: string;
-		editedContent: string;
-		editedExtras?: DatabaseMessageExtra[];
-		editedUploadedFiles?: ChatUploadedFile[];
-		originalContent: string;
-		originalExtras?: DatabaseMessageExtra[];
-		showSaveOnlyOption?: boolean;
-		onCancelEdit: () => void;
-		onSaveEdit: () => void;
-		onSaveEditOnly?: () => void;
-		onEditKeydown: (event: KeyboardEvent) => void;
-		onEditedContentChange: (content: string) => void;
-		onEditedExtrasChange?: (extras: DatabaseMessageExtra[]) => void;
-		onEditedUploadedFilesChange?: (files: ChatUploadedFile[]) => void;
-		textareaElement?: HTMLTextAreaElement;
-	}
-
-	let {
-		messageId,
-		editedContent,
-		editedExtras = [],
-		editedUploadedFiles = [],
-		originalContent,
-		originalExtras = [],
-		showSaveOnlyOption = false,
-		onCancelEdit,
-		onSaveEdit,
-		onSaveEditOnly,
-		onEditKeydown,
-		onEditedContentChange,
-		onEditedExtrasChange,
-		onEditedUploadedFilesChange,
-		textareaElement = $bindable()
-	}: Props = $props();
+	const editCtx = getMessageEditContext();
 
-	let fileInputElement: HTMLInputElement | undefined = $state();
+	let inputAreaRef: ChatForm | undefined = $state(undefined);
 	let saveWithoutRegenerate = $state(false);
 	let showDiscardDialog = $state(false);
-	let isRouter = $derived(isRouterMode());
-	let currentConfig = $derived(config());
-
-	let pasteLongTextToFileLength = $derived.by(() => {
-		const n = Number(currentConfig.pasteLongTextToFileLen);
-
-		return Number.isNaN(n) ? Number(SETTING_CONFIG_DEFAULT.pasteLongTextToFileLen) : n;
-	});
 
 	let hasUnsavedChanges = $derived.by(() => {
-		if (editedContent !== originalContent) return true;
-		if (editedUploadedFiles.length > 0) return true;
+		if (editCtx.editedContent !== editCtx.originalContent) return true;
+		if (editCtx.editedUploadedFiles.length > 0) return true;
 
 		const extrasChanged =
-			editedExtras.length !== originalExtras.length ||
-			editedExtras.some((extra, i) => extra !== originalExtras[i]);
+			editCtx.editedExtras.length !== editCtx.originalExtras.length ||
+			editCtx.editedExtras.some((extra, i) => extra !== editCtx.originalExtras[i]);
 
 		if (extrasChanged) return true;
 
@@ -81,77 +28,14 @@
 	});
 
 	let hasAttachments = $derived(
-		(editedExtras && editedExtras.length > 0) ||
-			(editedUploadedFiles && editedUploadedFiles.length > 0)
+		(editCtx.editedExtras && editCtx.editedExtras.length > 0) ||
+			(editCtx.editedUploadedFiles && editCtx.editedUploadedFiles.length > 0)
 	);
 
-	let canSubmit = $derived(editedContent.trim().length > 0 || hasAttachments);
-
-	function getEditedAttachmentsModalities(): ModelModalities {
-		const modalities: ModelModalities = { vision: false, audio: false };
-
-		for (const extra of editedExtras) {
-			if (extra.type === AttachmentType.IMAGE) {
-				modalities.vision = true;
-			}
-
-			if (
-				extra.type === AttachmentType.PDF &&
-				'processedAsImages' in extra &&
-				extra.processedAsImages
-			) {
-				modalities.vision = true;
-			}
-
-			if (extra.type === AttachmentType.AUDIO) {
-				modalities.audio = true;
-			}
-		}
-
-		for (const file of editedUploadedFiles) {
-			const category = getFileTypeCategory(file.type) || getFileTypeCategoryByExtension(file.name);
-			if (category === FileTypeCategory.IMAGE) {
-				modalities.vision = true;
-			}
-			if (category === FileTypeCategory.AUDIO) {
-				modalities.audio = true;
-			}
-		}
-
-		return modalities;
-	}
-
-	function getRequiredModalities(): ModelModalities {
-		const beforeModalities = conversationsStore.getModalitiesUpToMessage(messageId);
-		const editedModalities = getEditedAttachmentsModalities();
-
-		return {
-			vision: beforeModalities.vision || editedModalities.vision,
-			audio: beforeModalities.audio || editedModalities.audio
-		};
-	}
-
-	const { handleModelChange } = useModelChangeValidation({
-		getRequiredModalities,
-		onValidationFailure: async (previousModelId: string | null) => {
-			if (previousModelId) {
-				await modelsStore.selectModelById(previousModelId);
-			}
-		}
-	});
-
-	function handleFileInputChange(event: Event) {
-		const input = event.target as HTMLInputElement;
-		if (!input.files || input.files.length === 0) return;
-
-		const files = Array.from(input.files);
-
-		processNewFiles(files);
-		input.value = '';
-	}
+	let canSubmit = $derived(editCtx.editedContent.trim().length > 0 || hasAttachments);
 
 	function handleGlobalKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
+		if (event.key === KeyboardKey.ESCAPE) {
 			event.preventDefault();
 			attemptCancel();
 		}
@@ -161,205 +45,72 @@
 		if (hasUnsavedChanges) {
 			showDiscardDialog = true;
 		} else {
-			onCancelEdit();
+			editCtx.cancel();
 		}
 	}
 
-	function handleRemoveExistingAttachment(index: number) {
-		if (!onEditedExtrasChange) return;
-
-		const newExtras = [...editedExtras];
-
-		newExtras.splice(index, 1);
-		onEditedExtrasChange(newExtras);
-	}
-
-	function handleRemoveUploadedFile(fileId: string) {
-		if (!onEditedUploadedFilesChange) return;
-
-		const newFiles = editedUploadedFiles.filter((f) => f.id !== fileId);
-
-		onEditedUploadedFilesChange(newFiles);
-	}
-
 	function handleSubmit() {
 		if (!canSubmit) return;
 
-		if (saveWithoutRegenerate && onSaveEditOnly) {
-			onSaveEditOnly();
+		if (saveWithoutRegenerate && editCtx.showSaveOnlyOption) {
+			editCtx.saveOnly();
 		} else {
-			onSaveEdit();
+			editCtx.save();
 		}
 
 		saveWithoutRegenerate = false;
 	}
 
-	async function processNewFiles(files: File[]) {
-		if (!onEditedUploadedFilesChange) return;
-
-		const { processFilesToChatUploaded } = await import('$lib/utils/browser-only');
-		const processed = await processFilesToChatUploaded(files);
-
-		onEditedUploadedFilesChange([...editedUploadedFiles, ...processed]);
+	function handleAttachmentRemove(index: number) {
+		const newExtras = [...editCtx.editedExtras];
+		newExtras.splice(index, 1);
+		editCtx.setExtras(newExtras);
 	}
 
-	function handlePaste(event: ClipboardEvent) {
-		if (!event.clipboardData) return;
-
-		const files = Array.from(event.clipboardData.items)
-			.filter((item) => item.kind === 'file')
-			.map((item) => item.getAsFile())
-			.filter((file): file is File => file !== null);
-
-		if (files.length > 0) {
-			event.preventDefault();
-			processNewFiles(files);
-
-			return;
-		}
-
-		const text = event.clipboardData.getData(MimeTypeText.PLAIN);
-
-		if (text.startsWith('"')) {
-			const parsed = parseClipboardContent(text);
-
-			if (parsed.textAttachments.length > 0) {
-				event.preventDefault();
-				onEditedContentChange(parsed.message);
-
-				const attachmentFiles = parsed.textAttachments.map(
-					(att) =>
-						new File([att.content], att.name, {
-							type: MimeTypeText.PLAIN
-						})
-				);
-
-				processNewFiles(attachmentFiles);
-
-				setTimeout(() => {
-					textareaElement?.focus();
-				}, 10);
-
-				return;
-			}
-		}
-
-		if (
-			text.length > 0 &&
-			pasteLongTextToFileLength > 0 &&
-			text.length > pasteLongTextToFileLength
-		) {
-			event.preventDefault();
-
-			const textFile = new File([text], 'Pasted', {
-				type: MimeTypeText.PLAIN
-			});
+	function handleUploadedFileRemove(fileId: string) {
+		const newFiles = editCtx.editedUploadedFiles.filter((f) => f.id !== fileId);
+		editCtx.setUploadedFiles(newFiles);
+	}
 
-			processNewFiles([textFile]);
-		}
+	async function handleFilesAdd(files: File[]) {
+		const processed = await processFilesToChatUploaded(files);
+		editCtx.setUploadedFiles([...editCtx.editedUploadedFiles, ...processed]);
 	}
 
-	$effect(() => {
-		if (textareaElement) {
-			autoResizeTextarea(textareaElement);
-		}
-	});
+	function handleUploadedFilesChange(files: ChatUploadedFile[]) {
+		editCtx.setUploadedFiles(files);
+	}
 
 	$effect(() => {
-		setEditModeActive(processNewFiles);
+		chatStore.setEditModeActive(handleFilesAdd);
 
 		return () => {
-			clearEditMode();
+			chatStore.clearEditMode();
 		};
 	});
 </script>
 
 <svelte:window onkeydown={handleGlobalKeydown} />
 
-<input
-	bind:this={fileInputElement}
-	type="file"
-	multiple
-	class="hidden"
-	onchange={handleFileInputChange}
-/>
-
-<div
-	class="{INPUT_CLASSES} w-full max-w-[80%] overflow-hidden rounded-3xl backdrop-blur-md"
-	data-slot="edit-form"
->
-	<ChatAttachmentsList
-		attachments={editedExtras}
-		uploadedFiles={editedUploadedFiles}
-		readonly={false}
-		onFileRemove={(fileId) => {
-			if (fileId.startsWith('attachment-')) {
-				const index = parseInt(fileId.replace('attachment-', ''), 10);
-				if (!isNaN(index) && index >= 0 && index < editedExtras.length) {
-					handleRemoveExistingAttachment(index);
-				}
-			} else {
-				handleRemoveUploadedFile(fileId);
-			}
-		}}
-		limitToSingleRow
-		class="py-5"
-		style="scroll-padding: 1rem;"
+<div class="relative w-full max-w-[80%]">
+	<ChatForm
+		bind:this={inputAreaRef}
+		value={editCtx.editedContent}
+		attachments={editCtx.editedExtras}
+		uploadedFiles={editCtx.editedUploadedFiles}
+		placeholder="Edit your message..."
+		showMcpPromptButton={true}
+		onValueChange={editCtx.setContent}
+		onAttachmentRemove={handleAttachmentRemove}
+		onUploadedFileRemove={handleUploadedFileRemove}
+		onUploadedFilesChange={handleUploadedFilesChange}
+		onFilesAdd={handleFilesAdd}
+		onSubmit={handleSubmit}
 	/>
-
-	<div class="relative min-h-[48px] px-5 py-3">
-		<textarea
-			bind:this={textareaElement}
-			bind:value={editedContent}
-			class="field-sizing-content max-h-80 min-h-10 w-full resize-none bg-transparent text-sm outline-none"
-			onkeydown={onEditKeydown}
-			oninput={(e) => {
-				autoResizeTextarea(e.currentTarget);
-				onEditedContentChange(e.currentTarget.value);
-			}}
-			onpaste={handlePaste}
-			placeholder="Edit your message..."
-		></textarea>
-
-		<div class="flex w-full items-center gap-3" style="container-type: inline-size">
-			<Button
-				class="h-8 w-8 shrink-0 rounded-full bg-transparent p-0 text-muted-foreground hover:bg-foreground/10 hover:text-foreground"
-				onclick={() => fileInputElement?.click()}
-				type="button"
-				title="Add attachment"
-			>
-				<span class="sr-only">Attach files</span>
-
-				<Paperclip class="h-4 w-4" />
-			</Button>
-
-			<div class="flex-1"></div>
-
-			{#if isRouter}
-				<ModelsSelector
-					forceForegroundText={true}
-					useGlobalSelection={true}
-					onModelChange={handleModelChange}
-				/>
-			{/if}
-
-			<Button
-				class="h-8 w-8 shrink-0 rounded-full p-0"
-				onclick={handleSubmit}
-				disabled={!canSubmit}
-				type="button"
-				title={saveWithoutRegenerate ? 'Save changes' : 'Send and regenerate'}
-			>
-				<span class="sr-only">{saveWithoutRegenerate ? 'Save' : 'Send'}</span>
-
-				<ArrowUp class="h-5 w-5" />
-			</Button>
-		</div>
-	</div>
 </div>
 
 <div class="mt-2 flex w-full max-w-[80%] items-center justify-between">
-	{#if showSaveOnlyOption && onSaveEditOnly}
+	{#if editCtx.showSaveOnlyOption}
 		<div class="flex items-center gap-2">
 			<Switch id="save-only-switch" bind:checked={saveWithoutRegenerate} class="scale-75" />
 
@@ -386,6 +137,6 @@
 	cancelText="Keep editing"
 	variant="destructive"
 	icon={AlertTriangle}
-	onConfirm={onCancelEdit}
+	onConfirm={editCtx.cancel}
 	onCancel={() => (showDiscardDialog = false)}
 />
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageMcpPrompt.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageMcpPrompt.svelte
new file mode 100644
index 00000000000..72ece2b8e22
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageMcpPrompt.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+	import {
+		ChatMessageActions,
+		ChatMessageEditForm,
+		ChatMessageMcpPromptContent
+	} from '$lib/components/app';
+	import { getMessageEditContext } from '$lib/contexts';
+	import { MessageRole, McpPromptVariant } from '$lib/enums';
+	import type { DatabaseMessageExtraMcpPrompt } from '$lib/types';
+
+	interface Props {
+		class?: string;
+		message: DatabaseMessage;
+		mcpPrompt: DatabaseMessageExtraMcpPrompt;
+		siblingInfo?: ChatMessageSiblingInfo | null;
+		showDeleteDialog: boolean;
+		deletionInfo: {
+			totalCount: number;
+			userMessages: number;
+			assistantMessages: number;
+			messageTypes: string[];
+		} | null;
+		onCopy: () => void;
+		onEdit: () => void;
+		onDelete: () => void;
+		onConfirmDelete: () => void;
+		onNavigateToSibling?: (siblingId: string) => void;
+		onShowDeleteDialogChange: (show: boolean) => void;
+	}
+
+	let {
+		class: className = '',
+		message,
+		mcpPrompt,
+		siblingInfo = null,
+		showDeleteDialog,
+		deletionInfo,
+		onCopy,
+		onEdit,
+		onDelete,
+		onConfirmDelete,
+		onNavigateToSibling,
+		onShowDeleteDialogChange
+	}: Props = $props();
+
+	// Get edit context
+	const editCtx = getMessageEditContext();
+</script>
+
+<div
+	aria-label="MCP Prompt message with actions"
+	class="group flex flex-col items-end gap-3 md:gap-2 {className}"
+	role="group"
+>
+	{#if editCtx.isEditing}
+		<ChatMessageEditForm />
+	{:else}
+		<ChatMessageMcpPromptContent
+			prompt={mcpPrompt}
+			variant={McpPromptVariant.MESSAGE}
+			class="w-full max-w-[80%]"
+		/>
+
+		{#if message.timestamp}
+			<div class="max-w-[80%]">
+				<ChatMessageActions
+					actionsPosition="right"
+					{deletionInfo}
+					justify="end"
+					{onConfirmDelete}
+					{onCopy}
+					{onDelete}
+					{onEdit}
+					{onNavigateToSibling}
+					{onShowDeleteDialogChange}
+					{siblingInfo}
+					{showDeleteDialog}
+					role={MessageRole.USER}
+				/>
+			</div>
+		{/if}
+	{/if}
+</div>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageMcpPromptContent.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageMcpPromptContent.svelte
new file mode 100644
index 00000000000..3d5dec3b6ac
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageMcpPromptContent.svelte
@@ -0,0 +1,197 @@
+<script lang="ts">
+	import { Card } from '$lib/components/ui/card';
+	import type { DatabaseMessageExtraMcpPrompt } from '$lib/types';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import { McpPromptVariant } from '$lib/enums';
+	import { TruncatedText } from '$lib/components/app/misc';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+
+	interface ContentPart {
+		text: string;
+		argKey: string | null;
+	}
+
+	interface Props {
+		class?: string;
+		prompt: DatabaseMessageExtraMcpPrompt;
+		variant?: McpPromptVariant;
+		isLoading?: boolean;
+		loadError?: string;
+	}
+
+	let {
+		class: className = '',
+		prompt,
+		variant = McpPromptVariant.MESSAGE,
+		isLoading = false,
+		loadError
+	}: Props = $props();
+
+	let hoveredArgKey = $state<string | null>(null);
+	let argumentEntries = $derived(Object.entries(prompt.arguments ?? {}));
+	let hasArguments = $derived(prompt.arguments && Object.keys(prompt.arguments).length > 0);
+	let hasContent = $derived(prompt.content && prompt.content.trim().length > 0);
+
+	let contentParts = $derived.by((): ContentPart[] => {
+		if (!prompt.content || !hasArguments) {
+			return [{ text: prompt.content || '', argKey: null }];
+		}
+
+		const parts: ContentPart[] = [];
+		let remaining = prompt.content;
+
+		const valueToKey = new SvelteMap<string, string>();
+		for (const [key, value] of argumentEntries) {
+			if (value && value.trim()) {
+				valueToKey.set(value, key);
+			}
+		}
+
+		const sortedValues = [...valueToKey.keys()].sort((a, b) => b.length - a.length);
+
+		while (remaining.length > 0) {
+			let earliestMatch: { index: number; value: string; key: string } | null = null;
+
+			for (const value of sortedValues) {
+				const index = remaining.indexOf(value);
+				if (index !== -1 && (earliestMatch === null || index < earliestMatch.index)) {
+					earliestMatch = { index, value, key: valueToKey.get(value)! };
+				}
+			}
+
+			if (earliestMatch) {
+				if (earliestMatch.index > 0) {
+					parts.push({ text: remaining.slice(0, earliestMatch.index), argKey: null });
+				}
+
+				parts.push({ text: earliestMatch.value, argKey: earliestMatch.key });
+				remaining = remaining.slice(earliestMatch.index + earliestMatch.value.length);
+			} else {
+				parts.push({ text: remaining, argKey: null });
+
+				break;
+			}
+		}
+
+		return parts;
+	});
+
+	let showArgBadges = $derived(hasArguments && !isLoading && !loadError);
+	let isAttachment = $derived(variant === McpPromptVariant.ATTACHMENT);
+	let textSizeClass = $derived(isAttachment ? 'text-xs' : 'text-md');
+	let paddingClass = $derived(isAttachment ? 'px-3 py-2' : 'px-3.75 py-2.5');
+	let maxHeightStyle = $derived(
+		isAttachment ? 'max-height: 6rem;' : 'max-height: var(--max-message-height);'
+	);
+
+	const serverFavicon = $derived(mcpStore.getServerFavicon(prompt.serverName));
+	const serverDisplayName = $derived(mcpStore.getServerDisplayName(prompt.serverName));
+</script>
+
+<div class="flex flex-col gap-2 {className}">
+	<div class="flex items-center justify-between gap-2">
+		<div class="inline-flex flex-wrap items-center gap-1.25 text-xs text-muted-foreground">
+			<Tooltip.Root>
+				<Tooltip.Trigger>
+					{#if serverFavicon}
+						<img
+							src={serverFavicon}
+							alt=""
+							class="h-3.5 w-3.5 shrink-0 rounded-sm"
+							onerror={(e) => {
+								(e.currentTarget as HTMLImageElement).style.display = 'none';
+							}}
+						/>
+					{/if}
+				</Tooltip.Trigger>
+
+				<Tooltip.Content>
+					<span>{serverDisplayName}</span>
+				</Tooltip.Content>
+			</Tooltip.Root>
+
+			<TruncatedText text={prompt.name} />
+		</div>
+
+		{#if showArgBadges}
+			<div class="flex flex-wrap justify-end gap-1">
+				{#each argumentEntries as [key, value] (key)}
+					<Tooltip.Root>
+						<Tooltip.Trigger>
+							<!-- svelte-ignore a11y_no_static_element_interactions -->
+							<span
+								class="rounded-sm bg-purple-200/60 px-1.5 py-0.5 text-[10px] leading-none text-purple-700 transition-opacity dark:bg-purple-800/40 dark:text-purple-300 {hoveredArgKey &&
+								hoveredArgKey !== key
+									? 'opacity-30'
+									: ''}"
+								onmouseenter={() => (hoveredArgKey = key)}
+								onmouseleave={() => (hoveredArgKey = null)}
+							>
+								{key}
+							</span>
+						</Tooltip.Trigger>
+
+						<Tooltip.Content>
+							<span class="max-w-xs break-all">{value}</span>
+						</Tooltip.Content>
+					</Tooltip.Root>
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	{#if loadError}
+		<Card
+			class="relative overflow-hidden rounded-[1.125rem] border border-destructive/50 bg-destructive/10 backdrop-blur-md"
+		>
+			<div
+				class="overflow-y-auto {paddingClass}"
+				style="{maxHeightStyle} overflow-wrap: anywhere; word-break: break-word;"
+			>
+				<span class="{textSizeClass} text-destructive">{loadError}</span>
+			</div>
+		</Card>
+	{:else if isLoading}
+		<Card
+			class="relative overflow-hidden rounded-[1.125rem] border border-purple-200 bg-purple-500/10 px-1 py-2 backdrop-blur-md dark:border-purple-800 dark:bg-purple-500/20"
+		>
+			<div
+				class="overflow-y-auto {paddingClass}"
+				style="{maxHeightStyle} overflow-wrap: anywhere; word-break: break-word;"
+			>
+				<div class="space-y-2">
+					<div class="h-3 w-3/4 animate-pulse rounded bg-foreground/20"></div>
+
+					<div class="h-3 w-full animate-pulse rounded bg-foreground/20"></div>
+
+					<div class="h-3 w-5/6 animate-pulse rounded bg-foreground/20"></div>
+				</div>
+			</div>
+		</Card>
+	{:else if hasContent}
+		<Card
+			class="relative overflow-hidden rounded-[1.125rem] border border-purple-200 bg-purple-500/10 py-0 text-foreground backdrop-blur-md dark:border-purple-800 dark:bg-purple-500/20"
+		>
+			<div
+				class="overflow-y-auto {paddingClass}"
+				style="{maxHeightStyle} overflow-wrap: anywhere; word-break: break-word;"
+			>
+				<span class="{textSizeClass} whitespace-pre-wrap">
+					<!-- This formatting is needed to keep the text in proper shape -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					{#each contentParts as part, i (i)}{#if part.argKey}<span
+								class="rounded-sm bg-purple-300/50 px-0.5 text-purple-900 transition-opacity dark:bg-purple-700/50 dark:text-purple-100 {hoveredArgKey &&
+								hoveredArgKey !== part.argKey
+									? 'opacity-30'
+									: ''}"
+								onmouseenter={() => (hoveredArgKey = part.argKey)}
+								onmouseleave={() => (hoveredArgKey = null)}>{part.text}</span
+							>{:else}<span class="transition-opacity {hoveredArgKey ? 'opacity-30' : ''}"
+								>{part.text}</span
+							>{/if}{/each}</span
+				>
+			</div>
+		</Card>
+	{/if}
+</div>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics.svelte
index b53e82aaf9c..4bde1567a1d 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics.svelte
@@ -1,21 +1,23 @@
 <script lang="ts">
-	import { Clock, Gauge, WholeWord, BookOpenText, Sparkles } from '@lucide/svelte';
+	import { Clock, Gauge, WholeWord, BookOpenText, Sparkles, Wrench, Layers } from '@lucide/svelte';
 	import { BadgeChatStatistic } from '$lib/components/app';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { ChatMessageStatsView } from '$lib/enums';
-	import { formatPerformanceTime } from '$lib/utils/formatters';
+	import type { ChatMessageAgenticTimings } from '$lib/types/chat';
+	import { formatPerformanceTime } from '$lib/utils';
+	import { MS_PER_SECOND, DEFAULT_PERFORMANCE_TIME } from '$lib/constants/formatters';
 
 	interface Props {
 		predictedTokens?: number;
 		predictedMs?: number;
 		promptTokens?: number;
 		promptMs?: number;
-		// Live mode: when true, shows stats during streaming
 		isLive?: boolean;
-		// Whether prompt processing is still in progress
 		isProcessingPrompt?: boolean;
-		// Initial view to show (defaults to READING in live mode)
 		initialView?: ChatMessageStatsView;
+		agenticTimings?: ChatMessageAgenticTimings;
+		onActiveViewChange?: (view: ChatMessageStatsView) => void;
+		hideSummary?: boolean;
 	}
 
 	let {
@@ -25,12 +27,19 @@
 		promptMs,
 		isLive = false,
 		isProcessingPrompt = false,
-		initialView = ChatMessageStatsView.GENERATION
+		initialView = ChatMessageStatsView.GENERATION,
+		agenticTimings,
+		onActiveViewChange,
+		hideSummary = false
 	}: Props = $props();
 
 	let activeView: ChatMessageStatsView = $derived(initialView);
 	let hasAutoSwitchedToGeneration = $state(false);
 
+	$effect(() => {
+		onActiveViewChange?.(activeView);
+	});
+
 	// In live mode: auto-switch to GENERATION tab when prompt processing completes
 	$effect(() => {
 		if (isLive) {
@@ -57,14 +66,16 @@
 			predictedMs > 0
 	);
 
-	let tokensPerSecond = $derived(hasGenerationStats ? (predictedTokens! / predictedMs!) * 1000 : 0);
+	let tokensPerSecond = $derived(
+		hasGenerationStats ? (predictedTokens! / predictedMs!) * MS_PER_SECOND : 0
+	);
 	let formattedTime = $derived(
-		predictedMs !== undefined ? formatPerformanceTime(predictedMs) : '0s'
+		predictedMs !== undefined ? formatPerformanceTime(predictedMs) : DEFAULT_PERFORMANCE_TIME
 	);
 
 	let promptTokensPerSecond = $derived(
 		promptTokens !== undefined && promptMs !== undefined && promptMs > 0
-			? (promptTokens / promptMs) * 1000
+			? (promptTokens / promptMs) * MS_PER_SECOND
 			: undefined
 	);
 
@@ -81,6 +92,26 @@
 
 	// In live mode, generation tab is disabled until we have generation stats
 	let isGenerationDisabled = $derived(isLive && !hasGenerationStats);
+
+	let hasAgenticStats = $derived(agenticTimings !== undefined && agenticTimings.toolCallsCount > 0);
+
+	let agenticToolsPerSecond = $derived(
+		hasAgenticStats && agenticTimings!.toolsMs > 0
+			? (agenticTimings!.toolCallsCount / agenticTimings!.toolsMs) * MS_PER_SECOND
+			: 0
+	);
+
+	let formattedAgenticToolsTime = $derived(
+		hasAgenticStats ? formatPerformanceTime(agenticTimings!.toolsMs) : DEFAULT_PERFORMANCE_TIME
+	);
+
+	let agenticTotalTimeMs = $derived(
+		hasAgenticStats
+			? agenticTimings!.toolsMs + agenticTimings!.llm.predicted_ms + agenticTimings!.llm.prompt_ms
+			: 0
+	);
+
+	let formattedAgenticTotalTime = $derived(formatPerformanceTime(agenticTotalTimeMs));
 </script>
 
 <div class="inline-flex items-center text-xs text-muted-foreground">
@@ -97,9 +128,11 @@
 						onclick={() => (activeView = ChatMessageStatsView.READING)}
 					>
 						<BookOpenText class="h-3 w-3" />
+
 						<span class="sr-only">Reading</span>
 					</button>
 				</Tooltip.Trigger>
+
 				<Tooltip.Content>
 					<p>Reading (prompt processing)</p>
 				</Tooltip.Content>
@@ -119,9 +152,11 @@
 					disabled={isGenerationDisabled}
 				>
 					<Sparkles class="h-3 w-3" />
+
 					<span class="sr-only">Generation</span>
 				</button>
 			</Tooltip.Trigger>
+
 			<Tooltip.Content>
 				<p>
 					{isGenerationDisabled
@@ -130,6 +165,52 @@
 				</p>
 			</Tooltip.Content>
 		</Tooltip.Root>
+
+		{#if hasAgenticStats}
+			<Tooltip.Root>
+				<Tooltip.Trigger>
+					<button
+						type="button"
+						class="inline-flex h-5 w-5 items-center justify-center rounded-sm transition-colors {activeView ===
+						ChatMessageStatsView.TOOLS
+							? 'bg-background text-foreground shadow-sm'
+							: 'hover:text-foreground'}"
+						onclick={() => (activeView = ChatMessageStatsView.TOOLS)}
+					>
+						<Wrench class="h-3 w-3" />
+
+						<span class="sr-only">Tools</span>
+					</button>
+				</Tooltip.Trigger>
+
+				<Tooltip.Content>
+					<p>Tool calls</p>
+				</Tooltip.Content>
+			</Tooltip.Root>
+
+			{#if !hideSummary}
+				<Tooltip.Root>
+					<Tooltip.Trigger>
+						<button
+							type="button"
+							class="inline-flex h-5 w-5 items-center justify-center rounded-sm transition-colors {activeView ===
+							ChatMessageStatsView.SUMMARY
+								? 'bg-background text-foreground shadow-sm'
+								: 'hover:text-foreground'}"
+							onclick={() => (activeView = ChatMessageStatsView.SUMMARY)}
+						>
+							<Layers class="h-3 w-3" />
+
+							<span class="sr-only">Summary</span>
+						</button>
+					</Tooltip.Trigger>
+
+					<Tooltip.Content>
+						<p>Agentic summary</p>
+					</Tooltip.Content>
+				</Tooltip.Root>
+			{/if}
+		{/if}
 	</div>
 
 	<div class="flex items-center gap-1 px-2">
@@ -140,18 +221,62 @@
 				value="{predictedTokens?.toLocaleString()} tokens"
 				tooltipLabel="Generated tokens"
 			/>
+
 			<BadgeChatStatistic
 				class="bg-transparent"
 				icon={Clock}
 				value={formattedTime}
 				tooltipLabel="Generation time"
 			/>
+
 			<BadgeChatStatistic
 				class="bg-transparent"
 				icon={Gauge}
-				value="{tokensPerSecond.toFixed(2)} tokens/s"
+				value="{tokensPerSecond.toFixed(2)} t/s"
 				tooltipLabel="Generation speed"
 			/>
+		{:else if activeView === ChatMessageStatsView.TOOLS && hasAgenticStats}
+			<BadgeChatStatistic
+				class="bg-transparent"
+				icon={Wrench}
+				value="{agenticTimings!.toolCallsCount} calls"
+				tooltipLabel="Tool calls executed"
+			/>
+
+			<BadgeChatStatistic
+				class="bg-transparent"
+				icon={Clock}
+				value={formattedAgenticToolsTime}
+				tooltipLabel="Tool execution time"
+			/>
+
+			<BadgeChatStatistic
+				class="bg-transparent"
+				icon={Gauge}
+				value="{agenticToolsPerSecond.toFixed(2)} calls/s"
+				tooltipLabel="Tool execution rate"
+			/>
+		{:else if activeView === ChatMessageStatsView.SUMMARY && hasAgenticStats}
+			<BadgeChatStatistic
+				class="bg-transparent"
+				icon={Layers}
+				value="{agenticTimings!.turns} turns"
+				tooltipLabel="Agentic turns (LLM calls)"
+			/>
+
+			<BadgeChatStatistic
+				class="bg-transparent"
+				icon={WholeWord}
+				value="{agenticTimings!.llm.predicted_n.toLocaleString()} tokens"
+				tooltipLabel="Total tokens generated"
+			/>
+
+			<BadgeChatStatistic
+				class="bg-transparent"
+				icon={Clock}
+				value={formattedAgenticTotalTime}
+				tooltipLabel="Total time (LLM + tools)"
+			/>
 		{:else if hasPromptStats}
 			<BadgeChatStatistic
 				class="bg-transparent"
@@ -159,12 +284,14 @@
 				value="{promptTokens} tokens"
 				tooltipLabel="Prompt tokens"
 			/>
+
 			<BadgeChatStatistic
 				class="bg-transparent"
 				icon={Clock}
 				value={formattedPromptTime ?? '0s'}
 				tooltipLabel="Prompt processing time"
 			/>
+
 			<BadgeChatStatistic
 				class="bg-transparent"
 				icon={Gauge}
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageSystem.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageSystem.svelte
index 887df5b7716..aec2d90c028 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageSystem.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageSystem.svelte
@@ -3,15 +3,16 @@
 	import { Card } from '$lib/components/ui/card';
 	import { Button } from '$lib/components/ui/button';
 	import { MarkdownContent } from '$lib/components/app';
-	import { INPUT_CLASSES } from '$lib/constants/input-classes';
+	import { getMessageEditContext } from '$lib/contexts';
+	import { INPUT_CLASSES } from '$lib/constants/css-classes';
 	import { config } from '$lib/stores/settings.svelte';
+	import { isIMEComposing } from '$lib/utils';
 	import ChatMessageActions from './ChatMessageActions.svelte';
+	import { KeyboardKey, MessageRole } from '$lib/enums';
 
 	interface Props {
 		class?: string;
 		message: DatabaseMessage;
-		isEditing: boolean;
-		editedContent: string;
 		siblingInfo?: ChatMessageSiblingInfo | null;
 		showDeleteDialog: boolean;
 		deletionInfo: {
@@ -20,10 +21,6 @@
 			assistantMessages: number;
 			messageTypes: string[];
 		} | null;
-		onCancelEdit: () => void;
-		onSaveEdit: () => void;
-		onEditKeydown: (event: KeyboardEvent) => void;
-		onEditedContentChange: (content: string) => void;
 		onCopy: () => void;
 		onEdit: () => void;
 		onDelete: () => void;
@@ -36,15 +33,9 @@
 	let {
 		class: className = '',
 		message,
-		isEditing,
-		editedContent,
 		siblingInfo = null,
 		showDeleteDialog,
 		deletionInfo,
-		onCancelEdit,
-		onSaveEdit,
-		onEditKeydown,
-		onEditedContentChange,
 		onCopy,
 		onEdit,
 		onDelete,
@@ -54,10 +45,25 @@
 		textareaElement = $bindable()
 	}: Props = $props();
 
+	const editCtx = getMessageEditContext();
+
+	function handleEditKeydown(event: KeyboardEvent) {
+		if (event.key === KeyboardKey.ENTER && !event.shiftKey && !isIMEComposing(event)) {
+			event.preventDefault();
+
+			editCtx.save();
+		} else if (event.key === KeyboardKey.ESCAPE) {
+			event.preventDefault();
+
+			editCtx.cancel();
+		}
+	}
+
 	let isMultiline = $state(false);
 	let messageElement: HTMLElement | undefined = $state();
 	let isExpanded = $state(false);
 	let contentHeight = $state(0);
+
 	const MAX_HEIGHT = 200; // pixels
 	const currentConfig = config();
 
@@ -97,25 +103,32 @@
 	class="group flex flex-col items-end gap-3 md:gap-2 {className}"
 	role="group"
 >
-	{#if isEditing}
+	{#if editCtx.isEditing}
 		<div class="w-full max-w-[80%]">
 			<textarea
 				bind:this={textareaElement}
-				bind:value={editedContent}
+				value={editCtx.editedContent}
 				class="min-h-[60px] w-full resize-none rounded-2xl px-3 py-2 text-sm {INPUT_CLASSES}"
-				onkeydown={onEditKeydown}
-				oninput={(e) => onEditedContentChange(e.currentTarget.value)}
+				onkeydown={handleEditKeydown}
+				oninput={(e) => editCtx.setContent(e.currentTarget.value)}
 				placeholder="Edit system message..."
 			></textarea>
 
 			<div class="mt-2 flex justify-end gap-2">
-				<Button class="h-8 px-3" onclick={onCancelEdit} size="sm" variant="outline">
+				<Button class="h-8 px-3" onclick={editCtx.cancel} size="sm" variant="outline">
 					<X class="mr-1 h-3 w-3" />
+
 					Cancel
 				</Button>
 
-				<Button class="h-8 px-3" onclick={onSaveEdit} disabled={!editedContent.trim()} size="sm">
+				<Button
+					class="h-8 px-3"
+					onclick={editCtx.save}
+					disabled={!editCtx.editedContent.trim()}
+					size="sm"
+				>
 					<Check class="mr-1 h-3 w-3" />
+
 					Save
 				</Button>
 			</div>
@@ -131,12 +144,12 @@
 					type="button"
 				>
 					<Card
-						class="rounded-[1.125rem] !border-2 !border-dashed !border-border/50 bg-muted px-3.75 py-1.5 data-[multiline]:py-2.5"
+						class="overflow-y-auto rounded-[1.125rem] !border-2 !border-dashed !border-border/50 bg-muted px-3.75 py-1.5 data-[multiline]:py-2.5"
 						data-multiline={isMultiline ? '' : undefined}
-						style="border: 2px dashed hsl(var(--border));"
+						style="border: 2px dashed hsl(var(--border)); max-height: var(--max-message-height);"
 					>
 						<div
-							class="relative overflow-hidden transition-all duration-300 {isExpanded
+							class="relative transition-all duration-300 {isExpanded
 								? 'cursor-text select-text'
 								: 'select-none'}"
 							style={!isExpanded && showExpandButton
@@ -145,7 +158,10 @@
 						>
 							{#if currentConfig.renderUserContentAsMarkdown}
 								<div bind:this={messageElement} class="text-md {isExpanded ? 'cursor-text' : ''}">
-									<MarkdownContent class="markdown-system-content" content={message.content} />
+									<MarkdownContent
+										class="markdown-system-content overflow-auto"
+										content={message.content}
+									/>
 								</div>
 							{:else}
 								<span
@@ -160,6 +176,7 @@
 								<div
 									class="pointer-events-none absolute right-0 bottom-0 left-0 h-48 bg-gradient-to-t from-muted to-transparent"
 								></div>
+
 								<div
 									class="pointer-events-none absolute right-0 bottom-4 left-0 flex justify-center opacity-0 transition-opacity group-hover/expand:opacity-100"
 								>
@@ -208,7 +225,7 @@
 					{onShowDeleteDialogChange}
 					{siblingInfo}
 					{showDeleteDialog}
-					role="user"
+					role={MessageRole.USER}
 				/>
 			</div>
 		{/if}
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageThinkingBlock.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageThinkingBlock.svelte
deleted file mode 100644
index 9245ad51533..00000000000
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageThinkingBlock.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-	import { Brain } from '@lucide/svelte';
-	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
-	import * as Collapsible from '$lib/components/ui/collapsible/index.js';
-	import { buttonVariants } from '$lib/components/ui/button/index.js';
-	import { Card } from '$lib/components/ui/card';
-	import { config } from '$lib/stores/settings.svelte';
-
-	interface Props {
-		class?: string;
-		hasRegularContent?: boolean;
-		isStreaming?: boolean;
-		reasoningContent: string | null;
-	}
-
-	let {
-		class: className = '',
-		hasRegularContent = false,
-		isStreaming = false,
-		reasoningContent
-	}: Props = $props();
-
-	const currentConfig = config();
-
-	let isExpanded = $state(currentConfig.showThoughtInProgress);
-
-	$effect(() => {
-		if (hasRegularContent && reasoningContent && currentConfig.showThoughtInProgress) {
-			isExpanded = false;
-		}
-	});
-</script>
-
-<Collapsible.Root bind:open={isExpanded} class="mb-6 {className}">
-	<Card class="gap-0 border-muted bg-muted/30 py-0">
-		<Collapsible.Trigger class="flex cursor-pointer items-center justify-between p-3">
-			<div class="flex items-center gap-2 text-muted-foreground">
-				<Brain class="h-4 w-4" />
-
-				<span class="text-sm font-medium">
-					{isStreaming ? 'Reasoning...' : 'Reasoning'}
-				</span>
-			</div>
-
-			<div
-				class={buttonVariants({
-					variant: 'ghost',
-					size: 'sm',
-					class: 'h-6 w-6 p-0 text-muted-foreground hover:text-foreground'
-				})}
-			>
-				<ChevronsUpDownIcon class="h-4 w-4" />
-
-				<span class="sr-only">Toggle reasoning content</span>
-			</div>
-		</Collapsible.Trigger>
-
-		<Collapsible.Content>
-			<div class="border-t border-muted px-3 pb-3">
-				<div class="pt-3">
-					<div class="text-xs leading-relaxed break-words whitespace-pre-wrap">
-						{reasoningContent ?? ''}
-					</div>
-				</div>
-			</div>
-		</Collapsible.Content>
-	</Card>
-</Collapsible.Root>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte
index 041c6bd2513..05a02e27281 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessageUser.svelte
@@ -1,67 +1,48 @@
 <script lang="ts">
 	import { Card } from '$lib/components/ui/card';
 	import { ChatAttachmentsList, MarkdownContent } from '$lib/components/app';
+	import { getMessageEditContext } from '$lib/contexts';
 	import { config } from '$lib/stores/settings.svelte';
 	import ChatMessageActions from './ChatMessageActions.svelte';
 	import ChatMessageEditForm from './ChatMessageEditForm.svelte';
+	import { MessageRole } from '$lib/enums';
 
 	interface Props {
 		class?: string;
 		message: DatabaseMessage;
-		isEditing: boolean;
-		editedContent: string;
-		editedExtras?: DatabaseMessageExtra[];
-		editedUploadedFiles?: ChatUploadedFile[];
 		siblingInfo?: ChatMessageSiblingInfo | null;
-		showDeleteDialog: boolean;
 		deletionInfo: {
 			totalCount: number;
 			userMessages: number;
 			assistantMessages: number;
 			messageTypes: string[];
 		} | null;
-		onCancelEdit: () => void;
-		onSaveEdit: () => void;
-		onSaveEditOnly?: () => void;
-		onEditKeydown: (event: KeyboardEvent) => void;
-		onEditedContentChange: (content: string) => void;
-		onEditedExtrasChange?: (extras: DatabaseMessageExtra[]) => void;
-		onEditedUploadedFilesChange?: (files: ChatUploadedFile[]) => void;
-		onCopy: () => void;
+		showDeleteDialog: boolean;
 		onEdit: () => void;
 		onDelete: () => void;
 		onConfirmDelete: () => void;
-		onNavigateToSibling?: (siblingId: string) => void;
 		onShowDeleteDialogChange: (show: boolean) => void;
-		textareaElement?: HTMLTextAreaElement;
+		onNavigateToSibling?: (siblingId: string) => void;
+		onCopy: () => void;
 	}
 
 	let {
 		class: className = '',
 		message,
-		isEditing,
-		editedContent,
-		editedExtras = [],
-		editedUploadedFiles = [],
 		siblingInfo = null,
-		showDeleteDialog,
 		deletionInfo,
-		onCancelEdit,
-		onSaveEdit,
-		onSaveEditOnly,
-		onEditKeydown,
-		onEditedContentChange,
-		onEditedExtrasChange,
-		onEditedUploadedFilesChange,
-		onCopy,
+		showDeleteDialog,
 		onEdit,
 		onDelete,
 		onConfirmDelete,
-		onNavigateToSibling,
 		onShowDeleteDialogChange,
-		textareaElement = $bindable()
+		onNavigateToSibling,
+		onCopy
 	}: Props = $props();
 
+	// Get contexts
+	const editCtx = getMessageEditContext();
+
 	let isMultiline = $state(false);
 	let messageElement: HTMLElement | undefined = $state();
 	const currentConfig = config();
@@ -96,24 +77,8 @@
 	class="group flex flex-col items-end gap-3 md:gap-2 {className}"
 	role="group"
 >
-	{#if isEditing}
-		<ChatMessageEditForm
-			bind:textareaElement
-			messageId={message.id}
-			{editedContent}
-			{editedExtras}
-			{editedUploadedFiles}
-			originalContent={message.content}
-			originalExtras={message.extra}
-			showSaveOnlyOption={!!onSaveEditOnly}
-			{onCancelEdit}
-			{onSaveEdit}
-			{onSaveEditOnly}
-			{onEditKeydown}
-			{onEditedContentChange}
-			{onEditedExtrasChange}
-			{onEditedUploadedFilesChange}
-		/>
+	{#if editCtx.isEditing}
+		<ChatMessageEditForm />
 	{:else}
 		{#if message.extra && message.extra.length > 0}
 			<div class="mb-2 max-w-[80%]">
@@ -123,15 +88,13 @@
 
 		{#if message.content.trim()}
 			<Card
-				class="max-w-[80%] rounded-[1.125rem] border-none bg-primary px-3.75 py-1.5 text-primary-foreground data-[multiline]:py-2.5"
+				class="max-w-[80%] overflow-y-auto rounded-[1.125rem] border-none bg-primary/5 px-3.75 py-1.5 text-foreground backdrop-blur-md data-[multiline]:py-2.5 dark:bg-primary/15"
 				data-multiline={isMultiline ? '' : undefined}
+				style="max-height: var(--max-message-height); overflow-wrap: anywhere; word-break: break-word;"
 			>
 				{#if currentConfig.renderUserContentAsMarkdown}
-					<div bind:this={messageElement} class="text-md">
-						<MarkdownContent
-							class="markdown-user-content text-primary-foreground"
-							content={message.content}
-						/>
+					<div bind:this={messageElement}>
+						<MarkdownContent class="markdown-user-content -my-4" content={message.content} />
 					</div>
 				{:else}
 					<span bind:this={messageElement} class="text-md whitespace-pre-wrap">
@@ -155,7 +118,7 @@
 					{onShowDeleteDialogChange}
 					{siblingInfo}
 					{showDeleteDialog}
-					role="user"
+					role={MessageRole.USER}
 				/>
 			</div>
 		{/if}
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte
index c203f10098d..23143c955ca 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { ChatMessage } from '$lib/components/app';
+	import { setChatActionsContext } from '$lib/contexts';
+	import { MessageRole } from '$lib/enums';
 	import { chatStore } from '$lib/stores/chat.svelte';
 	import { conversationsStore, activeConversation } from '$lib/stores/conversations.svelte';
 	import { config } from '$lib/stores/settings.svelte';
-	import { getMessageSiblings } from '$lib/utils';
+	import { copyToClipboard, formatMessageForClipboard, getMessageSiblings } from '$lib/utils';
 
 	interface Props {
 		class?: string;
@@ -16,6 +18,69 @@
 	let allConversationMessages = $state<DatabaseMessage[]>([]);
 	const currentConfig = config();
 
+	setChatActionsContext({
+		copy: async (message: DatabaseMessage) => {
+			const asPlainText = Boolean(currentConfig.copyTextAttachmentsAsPlainText);
+			const clipboardContent = formatMessageForClipboard(
+				message.content,
+				message.extra,
+				asPlainText
+			);
+			await copyToClipboard(clipboardContent, 'Message copied to clipboard');
+		},
+
+		delete: async (message: DatabaseMessage) => {
+			await chatStore.deleteMessage(message.id);
+			refreshAllMessages();
+		},
+
+		navigateToSibling: async (siblingId: string) => {
+			await conversationsStore.navigateToSibling(siblingId);
+		},
+
+		editWithBranching: async (
+			message: DatabaseMessage,
+			newContent: string,
+			newExtras?: DatabaseMessageExtra[]
+		) => {
+			onUserAction?.();
+			await chatStore.editMessageWithBranching(message.id, newContent, newExtras);
+			refreshAllMessages();
+		},
+
+		editWithReplacement: async (
+			message: DatabaseMessage,
+			newContent: string,
+			shouldBranch: boolean
+		) => {
+			onUserAction?.();
+			await chatStore.editAssistantMessage(message.id, newContent, shouldBranch);
+			refreshAllMessages();
+		},
+
+		editUserMessagePreserveResponses: async (
+			message: DatabaseMessage,
+			newContent: string,
+			newExtras?: DatabaseMessageExtra[]
+		) => {
+			onUserAction?.();
+			await chatStore.editUserMessagePreserveResponses(message.id, newContent, newExtras);
+			refreshAllMessages();
+		},
+
+		regenerateWithBranching: async (message: DatabaseMessage, modelOverride?: string) => {
+			onUserAction?.();
+			await chatStore.regenerateMessageWithBranching(message.id, modelOverride);
+			refreshAllMessages();
+		},
+
+		continueAssistantMessage: async (message: DatabaseMessage) => {
+			onUserAction?.();
+			await chatStore.continueAssistantMessage(message.id);
+			refreshAllMessages();
+		}
+	});
+
 	function refreshAllMessages() {
 		const conversation = activeConversation();
 
@@ -42,16 +107,28 @@
 			return [];
 		}
 
-		// Filter out system messages if showSystemMessage is false
 		const filteredMessages = currentConfig.showSystemMessage
 			? messages
-			: messages.filter((msg) => msg.type !== 'system');
+			: messages.filter((msg) => msg.type !== MessageRole.SYSTEM);
+
+		let lastAssistantIndex = -1;
+
+		for (let i = filteredMessages.length - 1; i >= 0; i--) {
+			if (filteredMessages[i].role === MessageRole.ASSISTANT) {
+				lastAssistantIndex = i;
+
+				break;
+			}
+		}
 
-		return filteredMessages.map((message) => {
+		return filteredMessages.map((message, index) => {
 			const siblingInfo = getMessageSiblings(allConversationMessages, message.id);
+			const isLastAssistantMessage =
+				message.role === MessageRole.ASSISTANT && index === lastAssistantIndex;
 
 			return {
 				message,
+				isLastAssistantMessage,
 				siblingInfo: siblingInfo || {
 					message,
 					siblingIds: [message.id],
@@ -61,83 +138,15 @@
 			};
 		});
 	});
-
-	async function handleNavigateToSibling(siblingId: string) {
-		await conversationsStore.navigateToSibling(siblingId);
-	}
-
-	async function handleEditWithBranching(
-		message: DatabaseMessage,
-		newContent: string,
-		newExtras?: DatabaseMessageExtra[]
-	) {
-		onUserAction?.();
-
-		await chatStore.editMessageWithBranching(message.id, newContent, newExtras);
-
-		refreshAllMessages();
-	}
-
-	async function handleEditWithReplacement(
-		message: DatabaseMessage,
-		newContent: string,
-		shouldBranch: boolean
-	) {
-		onUserAction?.();
-
-		await chatStore.editAssistantMessage(message.id, newContent, shouldBranch);
-
-		refreshAllMessages();
-	}
-
-	async function handleRegenerateWithBranching(message: DatabaseMessage, modelOverride?: string) {
-		onUserAction?.();
-
-		await chatStore.regenerateMessageWithBranching(message.id, modelOverride);
-
-		refreshAllMessages();
-	}
-
-	async function handleContinueAssistantMessage(message: DatabaseMessage) {
-		onUserAction?.();
-
-		await chatStore.continueAssistantMessage(message.id);
-
-		refreshAllMessages();
-	}
-
-	async function handleEditUserMessagePreserveResponses(
-		message: DatabaseMessage,
-		newContent: string,
-		newExtras?: DatabaseMessageExtra[]
-	) {
-		onUserAction?.();
-
-		await chatStore.editUserMessagePreserveResponses(message.id, newContent, newExtras);
-
-		refreshAllMessages();
-	}
-
-	async function handleDeleteMessage(message: DatabaseMessage) {
-		await chatStore.deleteMessage(message.id);
-
-		refreshAllMessages();
-	}
 </script>
 
-<div class="flex h-full flex-col space-y-10 pt-16 md:pt-24 {className}" style="height: auto; ">
-	{#each displayMessages as { message, siblingInfo } (message.id)}
+<div class="flex h-full flex-col space-y-10 pt-24 {className}" style="height: auto; ">
+	{#each displayMessages as { message, isLastAssistantMessage, siblingInfo } (message.id)}
 		<ChatMessage
 			class="mx-auto w-full max-w-[48rem]"
 			{message}
+			{isLastAssistantMessage}
 			{siblingInfo}
-			onDelete={handleDeleteMessage}
-			onNavigateToSibling={handleNavigateToSibling}
-			onEditWithBranching={handleEditWithBranching}
-			onEditWithReplacement={handleEditWithReplacement}
-			onEditUserMessagePreserveResponses={handleEditUserMessagePreserveResponses}
-			onRegenerateWithBranching={handleRegenerateWithBranching}
-			onContinueAssistantMessage={handleContinueAssistantMessage}
 		/>
 	{/each}
 </div>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
index 3d432e26bc7..ceecf03e54d 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation';
 	import {
-		ChatForm,
+		ChatScreenForm,
 		ChatScreenHeader,
 		ChatMessages,
 		ChatScreenProcessingInfo,
@@ -12,11 +12,9 @@
 	} from '$lib/components/app';
 	import * as Alert from '$lib/components/ui/alert';
 	import * as AlertDialog from '$lib/components/ui/alert-dialog';
-	import {
-		AUTO_SCROLL_AT_BOTTOM_THRESHOLD,
-		AUTO_SCROLL_INTERVAL,
-		INITIAL_SCROLL_DELAY
-	} from '$lib/constants/auto-scroll';
+	import { INITIAL_SCROLL_DELAY } from '$lib/constants/auto-scroll';
+	import { KeyboardKey } from '$lib/enums';
+	import { createAutoScrollController } from '$lib/hooks/use-auto-scroll.svelte';
 	import {
 		chatStore,
 		errorDialog,
@@ -44,16 +42,13 @@
 	let { showCenteredEmpty = false } = $props();
 
 	let disableAutoScroll = $derived(Boolean(config().disableAutoScroll));
-	let autoScrollEnabled = $state(true);
 	let chatScrollContainer: HTMLDivElement | undefined = $state();
 	let dragCounter = $state(0);
 	let isDragOver = $state(false);
-	let lastScrollTop = $state(0);
-	let scrollInterval: ReturnType<typeof setInterval> | undefined;
-	let scrollTimeout: ReturnType<typeof setTimeout> | undefined;
 	let showFileErrorDialog = $state(false);
 	let uploadedFiles = $state<ChatUploadedFile[]>([]);
-	let userScrolledUp = $state(false);
+
+	const autoScroll = createAutoScrollController();
 
 	let fileErrorData = $state<{
 		generallyUnsupported: File[];
@@ -217,7 +212,11 @@
 	function handleKeydown(event: KeyboardEvent) {
 		const isCtrlOrCmd = event.ctrlKey || event.metaKey;
 
-		if (isCtrlOrCmd && event.shiftKey && (event.key === 'd' || event.key === 'D')) {
+		if (
+			isCtrlOrCmd &&
+			event.shiftKey &&
+			(event.key === KeyboardKey.D_LOWER || event.key === KeyboardKey.D_UPPER)
+		) {
 			event.preventDefault();
 			if (activeConversation()) {
 				showDeleteDialog = true;
@@ -234,37 +233,13 @@
 	}
 
 	function handleScroll() {
-		if (disableAutoScroll || !chatScrollContainer) return;
-
-		const { scrollTop, scrollHeight, clientHeight } = chatScrollContainer;
-		const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-		const isAtBottom = distanceFromBottom < AUTO_SCROLL_AT_BOTTOM_THRESHOLD;
-
-		if (scrollTop < lastScrollTop && !isAtBottom) {
-			userScrolledUp = true;
-			autoScrollEnabled = false;
-		} else if (isAtBottom && userScrolledUp) {
-			userScrolledUp = false;
-			autoScrollEnabled = true;
-		}
-
-		if (scrollTimeout) {
-			clearTimeout(scrollTimeout);
-		}
-
-		scrollTimeout = setTimeout(() => {
-			if (isAtBottom) {
-				userScrolledUp = false;
-				autoScrollEnabled = true;
-			}
-		}, AUTO_SCROLL_INTERVAL);
-
-		lastScrollTop = scrollTop;
+		autoScroll.handleScroll();
 	}
 
 	async function handleSendMessage(message: string, files?: ChatUploadedFile[]): Promise<boolean> {
-		const result = files
-			? await parseFilesToMessageExtras(files, activeModelId ?? undefined)
+		const plainFiles = files ? $state.snapshot(files) : undefined;
+		const result = plainFiles
+			? await parseFilesToMessageExtras(plainFiles, activeModelId ?? undefined)
 			: undefined;
 
 		if (result?.emptyFiles && result.emptyFiles.length > 0) {
@@ -281,12 +256,9 @@
 		const extras = result?.extras;
 
 		// Enable autoscroll for user-initiated message sending
-		if (!disableAutoScroll) {
-			userScrolledUp = false;
-			autoScrollEnabled = true;
-		}
+		autoScroll.enable();
 		await chatStore.sendMessage(message, extras);
-		scrollChatToBottom();
+		autoScroll.scrollToBottom();
 
 		return true;
 	}
@@ -336,24 +308,15 @@
 		}
 	}
 
-	function scrollChatToBottom(behavior: ScrollBehavior = 'smooth') {
-		if (disableAutoScroll) return;
-
-		chatScrollContainer?.scrollTo({
-			top: chatScrollContainer?.scrollHeight,
-			behavior
-		});
-	}
-
 	afterNavigate(() => {
 		if (!disableAutoScroll) {
-			setTimeout(() => scrollChatToBottom('instant'), INITIAL_SCROLL_DELAY);
+			setTimeout(() => autoScroll.scrollToBottom('instant'), INITIAL_SCROLL_DELAY);
 		}
 	});
 
 	onMount(() => {
 		if (!disableAutoScroll) {
-			setTimeout(() => scrollChatToBottom('instant'), INITIAL_SCROLL_DELAY);
+			setTimeout(() => autoScroll.scrollToBottom('instant'), INITIAL_SCROLL_DELAY);
 		}
 
 		const pendingDraft = chatStore.consumePendingDraft();
@@ -364,21 +327,15 @@
 	});
 
 	$effect(() => {
-		if (disableAutoScroll) {
-			autoScrollEnabled = false;
-			if (scrollInterval) {
-				clearInterval(scrollInterval);
-				scrollInterval = undefined;
-			}
-			return;
-		}
+		autoScroll.setContainer(chatScrollContainer);
+	});
 
-		if (isCurrentConversationLoading && autoScrollEnabled) {
-			scrollInterval = setInterval(scrollChatToBottom, AUTO_SCROLL_INTERVAL);
-		} else if (scrollInterval) {
-			clearInterval(scrollInterval);
-			scrollInterval = undefined;
-		}
+	$effect(() => {
+		autoScroll.setDisabled(disableAutoScroll);
+	});
+
+	$effect(() => {
+		autoScroll.updateInterval(isCurrentConversationLoading);
 	});
 </script>
 
@@ -406,11 +363,8 @@
 			class="mb-16 md:mb-24"
 			messages={activeMessages()}
 			onUserAction={() => {
-				if (!disableAutoScroll) {
-					userScrolledUp = false;
-					autoScrollEnabled = true;
-					scrollChatToBottom();
-				}
+				autoScroll.enable();
+				autoScroll.scrollToBottom();
 			}}
 		/>
 
@@ -444,7 +398,7 @@
 			{/if}
 
 			<div class="conversation-chat-form pointer-events-auto rounded-t-3xl pb-4">
-				<ChatForm
+				<ChatScreenForm
 					disabled={hasPropsError || isEditing()}
 					{initialMessage}
 					isLoading={isCurrentConversationLoading}
@@ -474,7 +428,7 @@
 	>
 		<div class="w-full max-w-[48rem] px-4">
 			<div class="mb-10 text-center" in:fade={{ duration: 300 }}>
-				<h1 class="mb-4 text-3xl font-semibold tracking-tight">llama.cpp</h1>
+				<h1 class="mb-2 text-3xl font-semibold tracking-tight">llama.cpp</h1>
 
 				<p class="text-lg text-muted-foreground">
 					{serverStore.props?.modalities?.audio
@@ -504,7 +458,7 @@
 			{/if}
 
 			<div in:fly={{ y: 10, duration: 250, delay: hasPropsError ? 0 : 300 }}>
-				<ChatForm
+				<ChatScreenForm
 					disabled={hasPropsError}
 					{initialMessage}
 					isLoading={isCurrentConversationLoading}
@@ -617,7 +571,7 @@
 	contextInfo={activeErrorDialog?.contextInfo}
 	onOpenChange={handleErrorDialogOpenChange}
 	open={Boolean(activeErrorDialog)}
-	type={(activeErrorDialog?.type as ErrorDialogType) ?? ErrorDialogType.SERVER}
+	type={activeErrorDialog?.type ?? ErrorDialogType.SERVER}
 />
 
 <style>
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenForm.svelte b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenForm.svelte
index 6a0c91346f2..eb6f0d0f04d 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenForm.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreenForm.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-	import ChatForm from '$lib/components/app/chat/ChatForm/ChatForm.svelte';
+	import { afterNavigate } from '$app/navigation';
+	import { ChatFormHelperText, ChatForm } from '$lib/components/app';
+	import { onMount } from 'svelte';
 
 	interface Props {
 		class?: string;
@@ -28,20 +30,93 @@
 		showHelperText = true,
 		uploadedFiles = $bindable([])
 	}: Props = $props();
+
+	let chatFormRef: ChatForm | undefined = $state(undefined);
+	let message = $derived(initialMessage);
+	let previousIsLoading = $derived(isLoading);
+	let previousInitialMessage = $derived(initialMessage);
+
+	// Sync message when initialMessage prop changes (e.g., after draft restoration)
+	$effect(() => {
+		if (initialMessage !== previousInitialMessage) {
+			message = initialMessage;
+			previousInitialMessage = initialMessage;
+		}
+	});
+
+	function handleSystemPromptClick() {
+		onSystemPromptAdd?.({ message, files: uploadedFiles });
+	}
+
+	let hasLoadingAttachments = $derived(uploadedFiles.some((f) => f.isLoading));
+
+	async function handleSubmit() {
+		if (
+			(!message.trim() && uploadedFiles.length === 0) ||
+			disabled ||
+			isLoading ||
+			hasLoadingAttachments
+		)
+			return;
+
+		if (!chatFormRef?.checkModelSelected()) return;
+
+		const messageToSend = message.trim();
+		const filesToSend = [...uploadedFiles];
+
+		message = '';
+		uploadedFiles = [];
+
+		chatFormRef?.resetTextareaHeight();
+
+		const success = await onSend?.(messageToSend, filesToSend);
+
+		if (!success) {
+			message = messageToSend;
+			uploadedFiles = filesToSend;
+		}
+	}
+
+	function handleFilesAdd(files: File[]) {
+		onFileUpload?.(files);
+	}
+
+	function handleUploadedFileRemove(fileId: string) {
+		onFileRemove?.(fileId);
+	}
+
+	onMount(() => {
+		setTimeout(() => chatFormRef?.focus(), 10);
+	});
+
+	afterNavigate(() => {
+		setTimeout(() => chatFormRef?.focus(), 10);
+	});
+
+	$effect(() => {
+		if (previousIsLoading && !isLoading) {
+			setTimeout(() => chatFormRef?.focus(), 10);
+		}
+
+		previousIsLoading = isLoading;
+	});
 </script>
 
 <div class="relative mx-auto max-w-[48rem]">
 	<ChatForm
+		bind:this={chatFormRef}
+		bind:value={message}
+		bind:uploadedFiles
 		class={className}
 		{disabled}
-		{initialMessage}
 		{isLoading}
-		{onFileRemove}
-		{onFileUpload}
-		{onSend}
+		showMcpPromptButton={true}
+		onFilesAdd={handleFilesAdd}
 		{onStop}
-		{onSystemPromptAdd}
-		{showHelperText}
-		bind:uploadedFiles
+		onSubmit={handleSubmit}
+		onSystemPromptClick={handleSystemPromptClick}
+		onUploadedFileRemove={handleUploadedFileRemove}
 	/>
 </div>
+
+<ChatFormHelperText show={showHelperText} />
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettings.svelte b/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettings.svelte
index 16940c16f50..f5e6a5ec1b7 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettings.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettings.svelte
@@ -5,8 +5,6 @@
 		AlertTriangle,
 		Code,
 		Monitor,
-		Sun,
-		Moon,
 		ChevronLeft,
 		ChevronRight,
 		Database
@@ -14,7 +12,9 @@
 	import {
 		ChatSettingsFooter,
 		ChatSettingsImportExportTab,
-		ChatSettingsFields
+		ChatSettingsFields,
+		McpLogo,
+		McpServersSettings
 	} from '$lib/components/app';
 	import { ScrollArea } from '$lib/components/ui/scroll-area';
 	import { config, settingsStore } from '$lib/stores/settings.svelte';
@@ -23,7 +23,14 @@
 		type SettingsSectionTitle
 	} from '$lib/constants/settings-sections';
 	import { setMode } from 'mode-watcher';
+	import { ColorMode } from '$lib/enums/ui';
+	import { SettingsFieldType } from '$lib/enums/settings';
 	import type { Component } from 'svelte';
+	import { NUMERIC_FIELDS, POSITIVE_INTEGER_FIELDS } from '$lib/constants/settings-fields';
+	import { SETTINGS_COLOR_MODES_CONFIG } from '$lib/constants/settings-config';
+	import { SETTINGS_SECTION_TITLES } from '$lib/constants/settings-sections';
+	import { SETTINGS_KEYS } from '$lib/constants/settings-keys';
+	import type { SettingsSectionTitle } from '$lib/constants/settings-sections';
 
 	interface Props {
 		onSave?: () => void;
@@ -38,240 +45,257 @@
 		title: SettingsSectionTitle;
 	}> = [
 		{
-			title: 'General',
+			title: SETTINGS_SECTION_TITLES.GENERAL,
 			icon: Settings,
 			fields: [
 				{
-					key: 'theme',
+					key: SETTINGS_KEYS.THEME,
 					label: 'Theme',
-					type: 'select',
-					options: [
-						{ value: 'system', label: 'System', icon: Monitor },
-						{ value: 'light', label: 'Light', icon: Sun },
-						{ value: 'dark', label: 'Dark', icon: Moon }
-					]
+					type: SettingsFieldType.SELECT,
+					options: SETTINGS_COLOR_MODES_CONFIG
 				},
-				{ key: 'apiKey', label: 'API Key', type: 'input' },
+				{ key: SETTINGS_KEYS.API_KEY, label: 'API Key', type: SettingsFieldType.INPUT },
 				{
-					key: 'systemMessage',
+					key: SETTINGS_KEYS.SYSTEM_MESSAGE,
 					label: 'System Message',
-					type: 'textarea'
+					type: SettingsFieldType.TEXTAREA
 				},
 				{
-					key: 'pasteLongTextToFileLen',
+					key: SETTINGS_KEYS.PASTE_LONG_TEXT_TO_FILE_LEN,
 					label: 'Paste long text to file length',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'copyTextAttachmentsAsPlainText',
+					key: SETTINGS_KEYS.COPY_TEXT_ATTACHMENTS_AS_PLAIN_TEXT,
 					label: 'Copy text attachments as plain text',
-					type: 'checkbox'
+					type: SettingsFieldType.CHECKBOX
 				},
 				{
-					key: 'enableContinueGeneration',
+					key: SETTINGS_KEYS.ENABLE_CONTINUE_GENERATION,
 					label: 'Enable "Continue" button',
-					type: 'checkbox',
+					type: SettingsFieldType.CHECKBOX,
 					isExperimental: true
 				},
 				{
-					key: 'pdfAsImage',
+					key: SETTINGS_KEYS.PDF_AS_IMAGE,
 					label: 'Parse PDF as image',
-					type: 'checkbox'
+					type: SettingsFieldType.CHECKBOX
 				},
 				{
-					key: 'askForTitleConfirmation',
+					key: SETTINGS_KEYS.ASK_FOR_TITLE_CONFIRMATION,
 					label: 'Ask for confirmation before changing conversation title',
-					type: 'checkbox'
+					type: SettingsFieldType.CHECKBOX
 				}
 			]
 		},
 		{
-			title: 'Display',
+			title: SETTINGS_SECTION_TITLES.DISPLAY,
 			icon: Monitor,
 			fields: [
 				{
-					key: 'showMessageStats',
+					key: SETTINGS_KEYS.SHOW_MESSAGE_STATS,
 					label: 'Show message generation statistics',
-					type: 'checkbox'
+					type: SettingsFieldType.CHECKBOX
 				},
 				{
-					key: 'showThoughtInProgress',
+					key: SETTINGS_KEYS.SHOW_THOUGHT_IN_PROGRESS,
 					label: 'Show thought in progress',
-					type: 'checkbox'
+					type: SettingsFieldType.CHECKBOX
 				},
 				{
-					key: 'keepStatsVisible',
+					key: SETTINGS_KEYS.KEEP_STATS_VISIBLE,
 					label: 'Keep stats visible after generation',
-					type: 'checkbox'
+					type: SettingsFieldType.CHECKBOX
 				},
 				{
-					key: 'autoMicOnEmpty',
+					key: SETTINGS_KEYS.AUTO_MIC_ON_EMPTY,
 					label: 'Show microphone on empty input',
-					type: 'checkbox',
+					type: SettingsFieldType.CHECKBOX,
 					isExperimental: true
 				},
 				{
-					key: 'renderUserContentAsMarkdown',
+					key: SETTINGS_KEYS.RENDER_USER_CONTENT_AS_MARKDOWN,
 					label: 'Render user content as Markdown',
-					type: 'checkbox'
+					type: SettingsFieldType.CHECKBOX
 				},
 				{
-					key: 'disableAutoScroll',
+					key: SETTINGS_KEYS.DISABLE_AUTO_SCROLL,
 					label: 'Disable automatic scroll',
-					type: 'checkbox'
+					type: SettingsFieldType.CHECKBOX
 				},
 				{
-					key: 'alwaysShowSidebarOnDesktop',
+					key: SETTINGS_KEYS.ALWAYS_SHOW_SIDEBAR_ON_DESKTOP,
 					label: 'Always show sidebar on desktop',
-					type: 'checkbox'
+					type: SettingsFieldType.CHECKBOX
 				},
 				{
-					key: 'autoShowSidebarOnNewChat',
+					key: SETTINGS_KEYS.AUTO_SHOW_SIDEBAR_ON_NEW_CHAT,
 					label: 'Auto-show sidebar on new chat',
-					type: 'checkbox'
+					type: SettingsFieldType.CHECKBOX
 				}
 			]
 		},
 		{
-			title: 'Sampling',
+			title: SETTINGS_SECTION_TITLES.SAMPLING,
 			icon: Funnel,
 			fields: [
 				{
-					key: 'temperature',
+					key: SETTINGS_KEYS.TEMPERATURE,
 					label: 'Temperature',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'dynatemp_range',
+					key: SETTINGS_KEYS.DYNATEMP_RANGE,
 					label: 'Dynamic temperature range',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'dynatemp_exponent',
+					key: SETTINGS_KEYS.DYNATEMP_EXPONENT,
 					label: 'Dynamic temperature exponent',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'top_k',
+					key: SETTINGS_KEYS.TOP_K,
 					label: 'Top K',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'top_p',
+					key: SETTINGS_KEYS.TOP_P,
 					label: 'Top P',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'min_p',
+					key: SETTINGS_KEYS.MIN_P,
 					label: 'Min P',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'xtc_probability',
+					key: SETTINGS_KEYS.XTC_PROBABILITY,
 					label: 'XTC probability',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'xtc_threshold',
+					key: SETTINGS_KEYS.XTC_THRESHOLD,
 					label: 'XTC threshold',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'typ_p',
+					key: SETTINGS_KEYS.TYP_P,
 					label: 'Typical P',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'max_tokens',
+					key: SETTINGS_KEYS.MAX_TOKENS,
 					label: 'Max tokens',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'samplers',
+					key: SETTINGS_KEYS.SAMPLERS,
 					label: 'Samplers',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'backend_sampling',
+					key: SETTINGS_KEYS.BACKEND_SAMPLING,
 					label: 'Backend sampling',
-					type: 'checkbox'
+					type: SettingsFieldType.CHECKBOX
 				}
 			]
 		},
 		{
-			title: 'Penalties',
+			title: SETTINGS_SECTION_TITLES.PENALTIES,
 			icon: AlertTriangle,
 			fields: [
 				{
-					key: 'repeat_last_n',
+					key: SETTINGS_KEYS.REPEAT_LAST_N,
 					label: 'Repeat last N',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'repeat_penalty',
+					key: SETTINGS_KEYS.REPEAT_PENALTY,
 					label: 'Repeat penalty',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'presence_penalty',
+					key: SETTINGS_KEYS.PRESENCE_PENALTY,
 					label: 'Presence penalty',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'frequency_penalty',
+					key: SETTINGS_KEYS.FREQUENCY_PENALTY,
 					label: 'Frequency penalty',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'dry_multiplier',
+					key: SETTINGS_KEYS.DRY_MULTIPLIER,
 					label: 'DRY multiplier',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'dry_base',
+					key: SETTINGS_KEYS.DRY_BASE,
 					label: 'DRY base',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'dry_allowed_length',
+					key: SETTINGS_KEYS.DRY_ALLOWED_LENGTH,
 					label: 'DRY allowed length',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				},
 				{
-					key: 'dry_penalty_last_n',
+					key: SETTINGS_KEYS.DRY_PENALTY_LAST_N,
 					label: 'DRY penalty last N',
-					type: 'input'
+					type: SettingsFieldType.INPUT
 				}
 			]
 		},
 		{
-			title: 'Import/Export',
+			title: SETTINGS_SECTION_TITLES.IMPORT_EXPORT,
 			icon: Database,
 			fields: []
 		},
 		{
-			title: 'Developer',
-			icon: Code,
+			title: SETTINGS_SECTION_TITLES.MCP,
+			icon: McpLogo,
 			fields: [
 				{
-					key: 'showToolCalls',
-					label: 'Show tool call labels',
-					type: 'checkbox'
+					key: SETTINGS_KEYS.AGENTIC_MAX_TURNS,
+					label: 'Agentic loop max turns',
+					type: SettingsFieldType.INPUT
+				},
+				{
+					key: SETTINGS_KEYS.ALWAYS_SHOW_AGENTIC_TURNS,
+					label: 'Always show agentic turns in conversation',
+					type: SettingsFieldType.CHECKBOX
 				},
 				{
-					key: 'disableReasoningParsing',
+					key: SETTINGS_KEYS.AGENTIC_MAX_TOOL_PREVIEW_LINES,
+					label: 'Max lines per tool preview',
+					type: SettingsFieldType.INPUT
+				},
+				{
+					key: SETTINGS_KEYS.SHOW_TOOL_CALL_IN_PROGRESS,
+					label: 'Show tool call in progress',
+					type: SettingsFieldType.CHECKBOX
+				}
+			]
+		},
+		{
+			title: SETTINGS_SECTION_TITLES.DEVELOPER,
+			icon: Code,
+			fields: [
+				{
+					key: SETTINGS_KEYS.DISABLE_REASONING_PARSING,
 					label: 'Disable reasoning content parsing',
-					type: 'checkbox'
+					type: SettingsFieldType.CHECKBOX
 				},
 				{
-					key: 'showRawOutputSwitch',
+					key: SETTINGS_KEYS.SHOW_RAW_OUTPUT_SWITCH,
 					label: 'Enable raw output toggle',
-					type: 'checkbox'
+					type: SettingsFieldType.CHECKBOX
 				},
 				{
-					key: 'custom',
+					key: SETTINGS_KEYS.CUSTOM,
 					label: 'Custom JSON',
-					type: 'textarea'
+					type: SettingsFieldType.TEXTAREA
 				}
 			]
 		}
@@ -303,11 +327,7 @@
 	let scrollContainer: HTMLDivElement | undefined = $state();
 
 	$effect(() => {
-		if (!initialSection) {
-			return;
-		}
-
-		if (settingSections.some((section) => section.title === initialSection)) {
+		if (initialSection) {
 			activeSection = initialSection;
 		}
 	});
@@ -315,7 +335,7 @@
 	function handleThemeChange(newTheme: string) {
 		localConfig.theme = newTheme;
 
-		setMode(newTheme as 'light' | 'dark' | 'system');
+		setMode(newTheme as ColorMode);
 	}
 
 	function handleConfigChange(key: string, value: string | boolean) {
@@ -325,7 +345,7 @@
 	function handleReset() {
 		localConfig = { ...config() };
 
-		setMode(localConfig.theme as 'light' | 'dark' | 'system');
+		setMode(localConfig.theme as ColorMode);
 	}
 
 	function handleSave() {
@@ -341,33 +361,16 @@
 
 		// Convert numeric strings to numbers for numeric fields
 		const processedConfig = { ...localConfig };
-		const numericFields = [
-			'temperature',
-			'top_k',
-			'top_p',
-			'min_p',
-			'max_tokens',
-			'pasteLongTextToFileLen',
-			'dynatemp_range',
-			'dynatemp_exponent',
-			'typ_p',
-			'xtc_probability',
-			'xtc_threshold',
-			'repeat_last_n',
-			'repeat_penalty',
-			'presence_penalty',
-			'frequency_penalty',
-			'dry_multiplier',
-			'dry_base',
-			'dry_allowed_length',
-			'dry_penalty_last_n'
-		];
-
-		for (const field of numericFields) {
+
+		for (const field of NUMERIC_FIELDS) {
 			if (processedConfig[field] !== undefined && processedConfig[field] !== '') {
 				const numValue = Number(processedConfig[field]);
 				if (!isNaN(numValue)) {
-					processedConfig[field] = numValue;
+					if ((POSITIVE_INTEGER_FIELDS as readonly string[]).includes(field)) {
+						processedConfig[field] = Math.max(1, Math.round(numValue));
+					} else {
+						processedConfig[field] = numValue;
+					}
 				} else {
 					alert(`Invalid numeric value for ${field}. Please enter a valid number.`);
 					return;
@@ -506,8 +509,21 @@
 					<h3 class="text-lg font-semibold">{currentSection.title}</h3>
 				</div>
 
-				{#if currentSection.title === 'Import/Export'}
+				{#if currentSection.title === SETTINGS_SECTION_TITLES.IMPORT_EXPORT}
 					<ChatSettingsImportExportTab />
+				{:else if currentSection.title === SETTINGS_SECTION_TITLES.MCP}
+					<div class="space-y-6">
+						<ChatSettingsFields
+							fields={currentSection.fields}
+							{localConfig}
+							onConfigChange={handleConfigChange}
+							onThemeChange={handleThemeChange}
+						/>
+
+						<div class="border-t border-border/30 pt-6">
+							<McpServersSettings />
+						</div>
+					</div>
 				{:else}
 					<div class="space-y-6">
 						<ChatSettingsFields
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsFields.svelte b/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsFields.svelte
index a6f51f47d6e..07749944118 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsFields.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatSettings/ChatSettingsFields.svelte
@@ -6,6 +6,8 @@
 	import * as Select from '$lib/components/ui/select';
 	import { Textarea } from '$lib/components/ui/textarea';
 	import { SETTING_CONFIG_DEFAULT, SETTING_CONFIG_INFO } from '$lib/constants/settings-config';
+	import { SETTINGS_KEYS } from '$lib/constants/settings-keys';
+	import { SettingsFieldType } from '$lib/enums/settings';
 	import { settingsStore } from '$lib/stores/settings.svelte';
 	import { ChatSettingsParameterSourceIndicator } from '$lib/components/app';
 	import type { Component } from 'svelte';
@@ -31,7 +33,7 @@
 
 {#each fields as field (field.key)}
 	<div class="space-y-2">
-		{#if field.type === 'input'}
+		{#if field.type === SettingsFieldType.INPUT}
 			{@const paramInfo = getParameterSourceInfo(field.key)}
 			{@const currentValue = String(localConfig[field.key] ?? '')}
 			{@const propsDefault = paramInfo?.serverDefault}
@@ -98,7 +100,7 @@
 					{@html field.help || SETTING_CONFIG_INFO[field.key]}
 				</p>
 			{/if}
-		{:else if field.type === 'textarea'}
+		{:else if field.type === SettingsFieldType.TEXTAREA}
 			<Label for={field.key} class="block flex items-center gap-1.5 text-sm font-medium">
 				{field.label}
 
@@ -121,7 +123,7 @@
 				</p>
 			{/if}
 
-			{#if field.key === 'systemMessage'}
+			{#if field.key === SETTINGS_KEYS.SYSTEM_MESSAGE}
 				<div class="mt-3 flex items-center gap-2">
 					<Checkbox
 						id="showSystemMessage"
@@ -134,7 +136,7 @@
 					</Label>
 				</div>
 			{/if}
-		{:else if field.type === 'select'}
+		{:else if field.type === SettingsFieldType.SELECT}
 			{@const selectedOption = field.options?.find(
 				(opt: { value: string; label: string; icon?: Component }) =>
 					opt.value === localConfig[field.key]
@@ -166,7 +168,7 @@
 				type="single"
 				value={currentValue}
 				onValueChange={(value) => {
-					if (field.key === 'theme' && value && onThemeChange) {
+					if (field.key === SETTINGS_KEYS.THEME && value && onThemeChange) {
 						onThemeChange(value);
 					} else {
 						onConfigChange(field.key, value);
@@ -222,7 +224,7 @@
 					{field.help || SETTING_CONFIG_INFO[field.key]}
 				</p>
 			{/if}
-		{:else if field.type === 'checkbox'}
+		{:else if field.type === SettingsFieldType.CHECKBOX}
 			<div class="flex items-start space-x-3">
 				<Checkbox
 					id={field.key}
diff --git a/tools/server/webui/src/lib/components/app/chat/index.ts b/tools/server/webui/src/lib/components/app/chat/index.ts
new file mode 100644
index 00000000000..1a2aeaa7bec
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/chat/index.ts
@@ -0,0 +1,766 @@
+/**
+ *
+ * ATTACHMENTS
+ *
+ * Components for displaying and managing different attachment types in chat messages.
+ * Supports two operational modes:
+ * - **Readonly mode**: For displaying stored attachments in sent messages (DatabaseMessageExtra[])
+ * - **Editable mode**: For managing pending uploads in the input form (ChatUploadedFile[])
+ *
+ * The attachment system uses `getAttachmentDisplayItems()` utility to normalize both
+ * data sources into a unified display format, enabling consistent rendering regardless
+ * of the attachment origin.
+ *
+ */
+
+/**
+ * **ChatAttachmentsList** - Unified display for file attachments in chat
+ *
+ * Central component for rendering file attachments in both ChatMessage (readonly)
+ * and ChatForm (editable) contexts.
+ *
+ * **Architecture:**
+ * - Delegates rendering to specialized thumbnail components based on attachment type
+ * - Manages scroll state and navigation arrows for horizontal overflow
+ * - Integrates with DialogChatAttachmentPreview for full-size viewing
+ * - Validates vision modality support via `activeModelId` prop
+ *
+ * **Features:**
+ * - Horizontal scroll with smooth navigation arrows
+ * - Image thumbnails with lazy loading and error fallback
+ * - File type icons for non-image files (PDF, text, audio, etc.)
+ * - MCP prompt attachments with expandable content preview
+ * - Click-to-preview with full-size dialog and download option
+ * - "View All" button when `limitToSingleRow` is enabled and content overflows
+ * - Vision modality validation to warn about unsupported image uploads
+ * - Customizable thumbnail dimensions via `imageHeight`/`imageWidth` props
+ *
+ * @example
+ * ```svelte
+ * <!-- Readonly mode (in ChatMessage) -->
+ * <ChatAttachmentsList attachments={message.extra} readonly />
+ *
+ * <!-- Editable mode (in ChatForm) -->
+ * <ChatAttachmentsList
+ *   bind:uploadedFiles
+ *   onFileRemove={(id) => removeFile(id)}
+ *   limitToSingleRow
+ *   activeModelId={selectedModel}
+ * />
+ * ```
+ */
+export { default as ChatAttachmentsList } from './ChatAttachments/ChatAttachmentsList.svelte';
+
+/**
+ * Displays MCP Prompt attachment with expandable content preview.
+ * Shows server name, prompt name, and allows expanding to view full prompt arguments
+ * and content. Used when user selects a prompt from ChatFormPromptPicker.
+ */
+export { default as ChatAttachmentMcpPrompt } from './ChatAttachments/ChatAttachmentMcpPrompt.svelte';
+
+/**
+ * Displays a single MCP Resource attachment with icon, name, and server info.
+ * Shows loading/error states and supports remove action.
+ * Used within ChatAttachmentMcpResources for individual resource display.
+ */
+export { default as ChatAttachmentMcpResource } from './ChatAttachments/ChatAttachmentMcpResource.svelte';
+
+/**
+ * Full-size attachment preview component for dialog display. Handles different file types:
+ * images (full-size display), text files (syntax highlighted), PDFs (text extraction or image preview),
+ * audio (placeholder with download), and generic files (download option).
+ */
+export { default as ChatAttachmentPreview } from './ChatAttachments/ChatAttachmentPreview.svelte';
+
+/**
+ * Displays MCP Resource attachments as a horizontal carousel.
+ * Shows resource name, URI, and allows clicking to view resource content.
+ */
+export { default as ChatAttachmentMcpResources } from './ChatAttachments/ChatAttachmentMcpResources.svelte';
+
+/**
+ * Thumbnail for non-image file attachments. Displays file type icon based on extension,
+ * file name (truncated), and file size.
+ * Handles text files, PDFs, audio, and other document types.
+ */
+export { default as ChatAttachmentThumbnailFile } from './ChatAttachments/ChatAttachmentThumbnailFile.svelte';
+
+/**
+ * Thumbnail for image attachments with lazy loading and error fallback.
+ * Displays image preview with configurable dimensions. Falls back to placeholder
+ * on load error.
+ */
+export { default as ChatAttachmentThumbnailImage } from './ChatAttachments/ChatAttachmentThumbnailImage.svelte';
+
+/**
+ * Grid view of all attachments for "View All" dialog. Displays all attachments
+ * in a responsive grid layout when there are too many to show inline.
+ * Triggered by "+X more" button in ChatAttachmentsList.
+ */
+export { default as ChatAttachmentsViewAll } from './ChatAttachments/ChatAttachmentsViewAll.svelte';
+
+/**
+ *
+ * FORM
+ *
+ * Components for the chat input area. The form handles user input, file attachments,
+ * audio recording, and MCP prompts & resources selection. It integrates with multiple stores:
+ * - `chatStore` for message submission and generation control
+ * - `modelsStore` for model selection and validation
+ * - `mcpStore` for MCP prompt browsing and loading
+ *
+ * The form exposes a public API for programmatic control from parent components
+ * (focus, height reset, model selector, validation).
+ *
+ */
+
+/**
+ * **ChatForm** - Main chat input component with rich features
+ *
+ * The primary input interface for composing and sending chat messages.
+ * Orchestrates text input, file attachments, audio recording, and MCP prompts.
+ * Used by ChatScreenForm and ChatMessageEditForm for both new conversations and message editing.
+ *
+ * **Architecture:**
+ * - Composes ChatFormTextarea, ChatFormActions, and ChatFormPromptPicker
+ * - Manages file upload state via `uploadedFiles` bindable prop
+ * - Integrates with ModelsSelector for model selection in router mode
+ * - Communicates with parent via callbacks (onSubmit, onFilesAdd, onStop, etc.)
+ *
+ * **Input Handling:**
+ * - IME-safe Enter key handling (waits for composition end)
+ * - Shift+Enter for newline, Enter for submit
+ * - Paste handler for files and long text (> {pasteLongTextToFileLen} chars → file conversion)
+ * - Keyboard shortcut `/` triggers MCP prompt picker
+ *
+ * **Features:**
+ * - Auto-resizing textarea with placeholder
+ * - File upload via button dropdown (images/text/PDF), drag-drop, or paste
+ * - Audio recording with WAV conversion (when model supports audio)
+ * - MCP prompt picker with search and argument forms
+ * - MCP reource picker with component to list attached resources at the bottom of Chat Form
+ * - Model selector integration (router mode)
+ * - Loading state with stop button, disabled state for errors
+ *
+ * **Exported API:**
+ * - `focus()` - Focus the textarea programmatically
+ * - `resetTextareaHeight()` - Reset textarea to default height after submit
+ * - `openModelSelector()` - Open model selection dropdown
+ * - `checkModelSelected(): boolean` - Validate model selection, show error if none
+ *
+ * @example
+ * ```svelte
+ * <ChatForm
+ *   bind:this={chatFormRef}
+ *   bind:value={message}
+ *   bind:uploadedFiles
+ *   {isLoading}
+ *   onSubmit={handleSubmit}
+ *   onFilesAdd={processFiles}
+ *   onStop={handleStop}
+ * />
+ * ```
+ */
+export { default as ChatForm } from './ChatForm/ChatForm.svelte';
+
+/**
+ * Dropdown button for file attachment selection. Opens a menu with options for
+ * Images, Text Files, and PDF Files. Each option filters the file picker to
+ * appropriate types. Images option is disabled when model lacks vision modality.
+ */
+export { default as ChatFormActionAttachmentsDropdown } from './ChatForm/ChatFormActions/ChatFormActionAttachmentsDropdown.svelte';
+
+/**
+ * Audio recording button with real-time recording indicator. Records audio
+ * and converts to WAV format for upload. Only visible when the active model
+ * supports audio modality and setting for automatic audio input is enabled. Shows recording duration while active.
+ */
+export { default as ChatFormActionRecord } from './ChatForm/ChatFormActions/ChatFormActionRecord.svelte';
+
+/**
+ * Container for chat form action buttons. Arranges file attachment, audio record,
+ * and submit/stop buttons in a horizontal layout. Handles conditional visibility
+ * based on model capabilities and loading state.
+ */
+export { default as ChatFormActions } from './ChatForm/ChatFormActions/ChatFormActions.svelte';
+
+/**
+ * Submit/stop button with loading state. Shows send icon normally, transforms
+ * to stop icon during generation. Disabled when input is empty or form is disabled.
+ * Triggers onSubmit or onStop callbacks based on current state.
+ */
+export { default as ChatFormActionSubmit } from './ChatForm/ChatFormActions/ChatFormActionSubmit.svelte';
+
+/**
+ * Hidden file input element for programmatic file selection.
+ */
+export { default as ChatFormFileInputInvisible } from './ChatForm/ChatFormFileInputInvisible.svelte';
+
+/**
+ * Helper text display below chat.
+ */
+export { default as ChatFormHelperText } from './ChatForm/ChatFormHelperText.svelte';
+
+/**
+ * Auto-resizing textarea with IME composition support. Automatically adjusts
+ * height based on content. Handles IME input correctly (waits for composition
+ * end before processing Enter key). Exposes focus() and resetHeight() methods.
+ */
+export { default as ChatFormTextarea } from './ChatForm/ChatFormTextarea.svelte';
+
+/**
+ * **ChatFormPromptPicker** - MCP prompt selection interface
+ *
+ * Floating picker for browsing and selecting MCP Server Prompts.
+ * Triggered by typing `/` in the chat input or choosing `MCP Prompt` option in ChatFormActionAttachmentsDropdown.
+ * Loads prompts from connected MCP servers and allows users to select and configure them.
+ *
+ * **Architecture:**
+ * - Fetches available prompts from mcpStore
+ * - Manages selection state and keyboard navigation internally
+ * - Delegates argument input to ChatFormPromptPickerArgumentForm
+ * - Communicates prompt loading lifecycle via callbacks
+ *
+ * **Prompt Loading Flow:**
+ * 1. User selects prompt → `onPromptLoadStart` called with placeholder ID
+ * 2. Prompt content fetched from MCP server asynchronously
+ * 3. On success → `onPromptLoadComplete` with full prompt data
+ * 4. On failure → `onPromptLoadError` with error details
+ *
+ * **Features:**
+ * - Search/filter prompts by name across all connected servers
+ * - Keyboard navigation (↑/↓ to navigate, Enter to select, Esc to close)
+ * - Argument input forms for prompts with required parameters
+ * - Autocomplete suggestions for argument values
+ * - Loading states with skeleton placeholders
+ * - Server information header per prompt for visual identification
+ *
+ * **Exported API:**
+ * - `handleKeydown(event): boolean` - Process keyboard events, returns true if handled
+ *
+ * @example
+ * ```svelte
+ * <ChatFormPromptPicker
+ *   bind:this={pickerRef}
+ *   isOpen={showPicker}
+ *   searchQuery={promptQuery}
+ *   onClose={() => showPicker = false}
+ *   onPromptLoadStart={(id, info) => addPlaceholder(id, info)}
+ *   onPromptLoadComplete={(id, result) => replacePlaceholder(id, result)}
+ *   onPromptLoadError={(id, error) => handleError(id, error)}
+ * />
+ * ```
+ */
+export { default as ChatFormPromptPicker } from './ChatForm/ChatFormPromptPicker/ChatFormPromptPicker.svelte';
+
+/**
+ * Form for entering MCP prompt arguments. Displays input fields for each
+ * required argument defined by the prompt. Validates input and submits
+ * when all required fields are filled. Shows argument descriptions as hints.
+ */
+export { default as ChatFormPromptPickerArgumentForm } from './ChatForm/ChatFormPromptPicker/ChatFormPromptPickerArgumentForm.svelte';
+
+/**
+ * Single argument input field with autocomplete suggestions. Fetches suggestions
+ * from MCP server based on argument type. Supports keyboard navigation through
+ * suggestions list. Used within ChatFormPromptPickerArgumentForm.
+ */
+export { default as ChatFormPromptPickerArgumentInput } from './ChatForm/ChatFormPromptPicker/ChatFormPromptPickerArgumentInput.svelte';
+
+/**
+ * Header for prompt picker with search input and close button. Contains the
+ * search field for filtering prompts and X button to dismiss the picker.
+ * Search input is auto-focused when picker opens.
+ */
+export { default as ChatFormPromptPickerHeader } from './ChatForm/ChatFormPromptPicker/ChatFormPromptPickerHeader.svelte';
+
+/**
+ * Scrollable list of available MCP prompts. Renders ChatFormPromptPickerListItem
+ * for each prompt, grouped by server. Handles empty state when no prompts match
+ * search query. Manages scroll position for keyboard navigation.
+ */
+export { default as ChatFormPromptPickerList } from './ChatForm/ChatFormPromptPicker/ChatFormPromptPickerList.svelte';
+
+/**
+ * Single prompt item in the picker list. Displays server avatar, prompt name,
+ * and description. Highlights on hover/keyboard focus. Triggers selection
+ * callback on click or Enter key.
+ */
+export { default as ChatFormPromptPickerListItem } from './ChatForm/ChatFormPromptPicker/ChatFormPromptPickerListItem.svelte';
+
+/**
+ * Skeleton loading placeholder for prompt picker items. Displays animated
+ * placeholder while prompts are being fetched from MCP servers.
+ * Matches dimensions of ChatFormPromptPickerListItem.
+ */
+export { default as ChatFormPromptPickerListItemSkeleton } from './ChatForm/ChatFormPromptPicker/ChatFormPromptPickerListItemSkeleton.svelte';
+
+/**
+ *
+ * MESSAGES
+ *
+ * Components for displaying chat messages. The message system supports:
+ * - **Conversation branching**: Messages can have siblings (alternative versions)
+ *   created by editing or regenerating. Users can navigate between branches.
+ * - **Role-based rendering**: Different layouts for user, assistant, and system messages
+ * - **Streaming support**: Real-time display of assistant responses as they generate
+ * - **Agentic workflows**: Special rendering for tool calls and reasoning blocks
+ *
+ * The branching system uses `getMessageSiblings()` utility to compute sibling info
+ * for each message based on the full conversation tree stored in the database.
+ *
+ */
+
+/**
+ * **ChatMessages** - Message list container with branching support
+ *
+ * Container component that renders the list of messages in a conversation.
+ * Computes sibling information for each message to enable branch navigation.
+ * Integrates with conversationsStore for message operations.
+ *
+ * **Architecture:**
+ * - Fetches all conversation messages to compute sibling relationships
+ * - Filters system messages based on user config (`showSystemMessage`)
+ * - Delegates rendering to ChatMessage for each message
+ * - Propagates all message operations to chatStore via callbacks
+ *
+ * **Branching Logic:**
+ * - Uses `getMessageSiblings()` to find all messages with same parent
+ * - Computes `siblingInfo: { currentIndex, totalSiblings, siblingIds }`
+ * - Enables navigation between alternative message versions
+ *
+ * **Message Operations (delegated to chatStore):**
+ * - Edit with branching: Creates new message branch, preserves original
+ * - Edit with replacement: Modifies message in place
+ * - Regenerate: Creates new assistant response as sibling
+ * - Delete: Removes message and all descendants (cascade)
+ * - Continue: Appends to incomplete assistant message
+ *
+ * @example
+ * ```svelte
+ * <ChatMessages
+ *   messages={activeMessages()}
+ *   onUserAction={resetAutoScroll}
+ * />
+ * ```
+ */
+export { default as ChatMessages } from './ChatMessages/ChatMessages.svelte';
+
+/**
+ * **ChatMessage** - Single message display with actions
+ *
+ * Renders a single chat message with role-specific styling and full action
+ * support. Delegates to specialized components based on message role:
+ * ChatMessageUser, ChatMessageAssistant, or ChatMessageSystem.
+ *
+ * **Architecture:**
+ * - Routes to role-specific component based on `message.type`
+ * - Manages edit mode state and inline editing UI
+ * - Handles action callbacks (copy, edit, delete, regenerate)
+ * - Displays branching controls when message has siblings
+ *
+ * **User Messages:**
+ * - Shows attachments via ChatAttachmentsList
+ * - Displays MCP prompts if present
+ * - Edit creates new branch or preserves responses
+ *
+ * **Assistant Messages:**
+ * - Renders content via MarkdownContent or ChatMessageAgenticContent
+ * - Shows model info badge (when enabled)
+ * - Regenerate creates sibling with optional model override
+ * - Continue action for incomplete responses
+ *
+ * **Features:**
+ * - Inline editing with file attachments support
+ * - Copy formatted content to clipboard
+ * - Delete with confirmation (shows cascade delete count)
+ * - Branching controls for sibling navigation
+ * - Statistics display (tokens, timing)
+ *
+ * @example
+ * ```svelte
+ * <ChatMessage
+ *   {message}
+ *   {siblingInfo}
+ *   onEditWithBranching={handleEdit}
+ *   onRegenerateWithBranching={handleRegenerate}
+ *   onNavigateToSibling={handleNavigate}
+ * />
+ * ```
+ */
+export { default as ChatMessage } from './ChatMessages/ChatMessage.svelte';
+
+/**
+ * **ChatMessageAgenticContent** - Agentic workflow output display
+ *
+ * Specialized renderer for assistant messages containing agentic workflow markers.
+ * Parses structured content and displays tool calls and reasoning blocks as
+ * interactive collapsible sections with real-time streaming support.
+ *
+ * **Architecture:**
+ * - Uses `parseAgenticContent()` from `$lib/utils/agentic` to parse markers
+ * - Renders sections as CollapsibleContentBlock components
+ * - Handles streaming state for progressive content display
+ * - Falls back to MarkdownContent for plain text sections
+ *
+ * **Marker Format:**
+ * - Tool calls: in constants/agentic.ts (AGENTIC_TAGS)
+ * - Reasoning: in constants/agentic.ts (REASONING_TAGS)
+ * - Partial markers handled gracefully during streaming
+ *
+ * **Execution States:**
+ * - **Streaming**: Animated spinner, block expanded, auto-scroll enabled
+ * - **Pending**: Waiting indicator for queued tool calls
+ * - **Completed**: Static display, block collapsed by default
+ *
+ * **Features:**
+ * - JSON arguments syntax highlighting via SyntaxHighlightedCode
+ * - Tool results display with formatting
+ * - Plain text sections between markers rendered as markdown
+ * - Smart collapse defaults (expanded while streaming, collapsed when done)
+ *
+ * @example
+ * ```svelte
+ * <ChatMessageAgenticContent
+ *   content={message.content}
+ *   {message}
+ *   isStreaming={isGenerating}
+ * />
+ * ```
+ */
+export { default as ChatMessageAgenticContent } from './ChatMessages/ChatMessageAgenticContent.svelte';
+
+/**
+ * Action buttons toolbar for messages. Displays copy, edit, delete, and regenerate
+ * buttons based on message role. Includes branching controls when message has siblings.
+ * Shows delete confirmation dialog with cascade delete count. Handles raw output toggle
+ * for assistant messages.
+ */
+export { default as ChatMessageActions } from './ChatMessages/ChatMessageActions.svelte';
+
+/**
+ * Navigation controls for message siblings (conversation branches). Displays
+ * prev/next arrows with current position counter (e.g., "2/5"). Enables users
+ * to navigate between alternative versions of a message created by editing
+ * or regenerating. Uses `conversationsStore.navigateToSibling()` for navigation.
+ */
+export { default as ChatMessageBranchingControls } from './ChatMessages/ChatMessageBranchingControls.svelte';
+
+/**
+ * Statistics display for assistant messages. Shows token counts (prompt/completion),
+ * generation timing, tokens per second, and model name (when enabled in settings).
+ * Data sourced from message.timings stored during generation.
+ */
+export { default as ChatMessageStatistics } from './ChatMessages/ChatMessageStatistics.svelte';
+
+/**
+ * MCP prompt display in user messages. Shows when user selected an MCP prompt
+ * via ChatFormPromptPicker. Displays server name, prompt name, and expandable
+ * content preview. Stored in message.extra as DatabaseMessageExtraMcpPrompt.
+ */
+export { default as ChatMessageMcpPrompt } from './ChatMessages/ChatMessageMcpPrompt.svelte';
+
+/**
+ * Formatted content display for MCP prompt messages. Renders the full prompt
+ * content with arguments in a readable format. Used within ChatMessageMcpPrompt
+ * for the expanded view.
+ */
+export { default as ChatMessageMcpPromptContent } from './ChatMessages/ChatMessageMcpPromptContent.svelte';
+
+/**
+ * System message display component. Renders system messages with distinct styling.
+ * Visibility controlled by `showSystemMessage` config setting.
+ */
+export { default as ChatMessageSystem } from './ChatMessages/ChatMessageSystem.svelte';
+
+/**
+ * User message display component. Renders user messages with right-aligned bubble styling.
+ * Shows message content, attachments via ChatAttachmentsList, and MCP prompts if present.
+ * Supports inline editing mode with ChatMessageEditForm integration.
+ */
+export { default as ChatMessageUser } from './ChatMessages/ChatMessageUser.svelte';
+
+/**
+ * Assistant message display component. Renders assistant responses with left-aligned styling.
+ * Supports both plain markdown content (via MarkdownContent) and agentic content with tool calls
+ * (via ChatMessageAgenticContent). Shows model info badge, statistics, and action buttons.
+ * Handles streaming state with real-time content updates.
+ */
+export { default as ChatMessageAssistant } from './ChatMessages/ChatMessageAssistant.svelte';
+
+/**
+ * Inline message editing form. Provides textarea for editing message content with
+ * attachment management. Shows save/cancel buttons and optional "Save only" button
+ * for editing without regenerating responses. Used within ChatMessage components
+ * when user enters edit mode.
+ */
+export { default as ChatMessageEditForm } from './ChatMessages/ChatMessageEditForm.svelte';
+
+/**
+ *
+ * SCREEN
+ *
+ * Top-level chat interface components. ChatScreen is the main container that
+ * orchestrates all chat functionality. It integrates with multiple stores:
+ * - `chatStore` for message operations and generation control
+ * - `conversationsStore` for conversation management
+ * - `serverStore` for server connection state
+ * - `modelsStore` for model capabilities (vision, audio modalities)
+ *
+ * The screen handles the complete chat lifecycle from empty state to active
+ * conversation with streaming responses.
+ *
+ */
+
+/**
+ * **ChatScreen** - Main chat interface container
+ *
+ * Top-level component that orchestrates the entire chat interface. Manages
+ * messages display, input form, file handling, auto-scroll, error dialogs,
+ * and server state. Used as the main content area in chat routes.
+ *
+ * **Architecture:**
+ * - Composes ChatMessages, ChatScreenForm, ChatScreenHeader, and dialogs
+ * - Manages auto-scroll via `createAutoScrollController()` hook
+ * - Handles file upload pipeline (validation → processing → state update)
+ * - Integrates with serverStore for loading/error/warning states
+ * - Tracks active model for modality validation (vision, audio)
+ *
+ * **File Upload Pipeline:**
+ * 1. Files received via drag-drop, paste, or file picker
+ * 2. Validated against supported types (`isFileTypeSupported()`)
+ * 3. Filtered by model modalities (`filterFilesByModalities()`)
+ * 4. Empty files detected and reported via DialogEmptyFileAlert
+ * 5. Valid files processed to ChatUploadedFile[] format
+ * 6. Unsupported files shown in error dialog with reasons
+ *
+ * **State Management:**
+ * - `isEmpty`: Shows centered welcome UI when no conversation active
+ * - `isCurrentConversationLoading`: Tracks generation state for current chat
+ * - `activeModelId`: Determines available modalities for file validation
+ * - `uploadedFiles`: Pending file attachments for next message
+ *
+ * **Features:**
+ * - Messages display with smart auto-scroll (pauses on user scroll up)
+ * - File drag-drop with visual overlay indicator
+ * - File validation with detailed error messages
+ * - Error dialog management (chat errors, model unavailable)
+ * - Server loading/error/warning states with appropriate UI
+ * - Conversation deletion with confirmation dialog
+ * - Processing info display (tokens/sec, timing) during generation
+ * - Keyboard shortcuts (Ctrl+Shift+Backspace to delete conversation)
+ *
+ * @example
+ * ```svelte
+ * <!-- In chat route -->
+ * <ChatScreen showCenteredEmpty={true} />
+ *
+ * <!-- In conversation route -->
+ * <ChatScreen showCenteredEmpty={false} />
+ * ```
+ */
+export { default as ChatScreen } from './ChatScreen/ChatScreen.svelte';
+
+/**
+ * Visual overlay displayed when user drags files over the chat screen.
+ * Shows drop zone indicator to guide users where to release files.
+ * Integrated with ChatScreen's drag-drop file upload handling.
+ */
+export { default as ChatScreenDragOverlay } from './ChatScreen/ChatScreenDragOverlay.svelte';
+
+/**
+ * Chat form wrapper within ChatScreen. Positions the ChatForm component at the
+ * bottom of the screen with proper padding and max-width constraints. Handles
+ * the visual container styling for the input area.
+ */
+export { default as ChatScreenForm } from './ChatScreen/ChatScreenForm.svelte';
+
+/**
+ * Header bar for chat screen. Displays conversation title (or "New Chat"),
+ * model selector (in router mode), and action buttons (delete conversation).
+ * Sticky positioned at the top of the chat area.
+ */
+export { default as ChatScreenHeader } from './ChatScreen/ChatScreenHeader.svelte';
+
+/**
+ * Processing info display during generation. Shows real-time statistics:
+ * tokens per second, prompt/completion token counts, and elapsed time.
+ * Data sourced from slotsService polling during active generation.
+ * Only visible when `isCurrentConversationLoading` is true.
+ */
+export { default as ChatScreenProcessingInfo } from './ChatScreen/ChatScreenProcessingInfo.svelte';
+
+/**
+ *
+ * SETTINGS
+ *
+ * Application settings components. Settings are persisted to localStorage via
+ * the config store and synchronized with server `/props` endpoint for sampling
+ * parameters. The settings panel uses a tabbed interface with mobile-responsive
+ * horizontal scrolling tabs.
+ *
+ * **Parameter Sync System:**
+ * Sampling parameters (temperature, top_p, etc.) can come from three sources:
+ * 1. **Server Props**: Default values from `/props` endpoint
+ * 2. **User Custom**: Values explicitly set by user (overrides server)
+ * 3. **App Default**: Fallback when server props unavailable
+ *
+ * The `ChatSettingsParameterSourceIndicator` badge shows which source is active.
+ *
+ */
+
+/**
+ * **ChatSettings** - Application settings panel
+ *
+ * Comprehensive settings interface with categorized sections. Manages all
+ * user preferences and sampling parameters. Integrates with config store
+ * for persistence and ParameterSyncService for server synchronization.
+ *
+ * **Architecture:**
+ * - Uses tabbed navigation with category sections
+ * - Maintains local form state, commits on save
+ * - Tracks user overrides vs server defaults for sampling params
+ * - Exposes reset() method for dialog close without save
+ *
+ * **Categories:**
+ * - **General**: API key, system message, show system messages toggle
+ * - **Display**: Theme selection, message actions visibility, model info badge
+ * - **Sampling**: Temperature, top_p, top_k, min_p, repeat_penalty, etc.
+ * - **Penalties**: Frequency penalty, presence penalty, repeat last N
+ * - **Import/Export**: Conversation backup and restore
+ * - **MCP**: MCP server management (opens DialogChatSettings with MCP tab)
+ * - **Developer**: Debug options, disable auto-scroll
+ *
+ * **Parameter Sync:**
+ * - Fetches defaults from server `/props` endpoint
+ * - Shows source indicator badge (Custom/Server Props/Default)
+ * - Real-time badge updates as user types
+ * - Tracks which parameters user has explicitly overridden
+ *
+ * **Features:**
+ * - Mobile-responsive layout with horizontal scrolling tabs
+ * - Form validation with error messages
+ * - Secure API key storage (masked input)
+ * - Import/export conversations as JSON
+ * - Reset to defaults option per parameter
+ *
+ * **Exported API:**
+ * - `reset()` - Reset form fields to currently saved values (for cancel action)
+ *
+ * @example
+ * ```svelte
+ * <ChatSettings
+ *   bind:this={settingsRef}
+ *   onSave={() => dialogOpen = false}
+ *   onCancel={() => { settingsRef.reset(); dialogOpen = false; }}
+ * />
+ * ```
+ */
+export { default as ChatSettings } from './ChatSettings/ChatSettings.svelte';
+
+/**
+ * Footer with save/cancel buttons for settings panel. Positioned at bottom
+ * of settings dialog. Save button commits form state to config store,
+ * cancel button triggers reset and close.
+ */
+export { default as ChatSettingsFooter } from './ChatSettings/ChatSettingsFooter.svelte';
+
+/**
+ * Form fields renderer for individual settings. Generates appropriate input
+ * components based on field type (text, number, select, checkbox, textarea).
+ * Handles validation, help text display, and parameter source indicators.
+ */
+export { default as ChatSettingsFields } from './ChatSettings/ChatSettingsFields.svelte';
+
+/**
+ * Import/export tab content for conversation data management. Provides buttons
+ * to export all conversations as JSON file and import from JSON file.
+ * Handles file download/upload and data validation.
+ */
+export { default as ChatSettingsImportExportTab } from './ChatSettings/ChatSettingsImportExportTab.svelte';
+
+/**
+ * Badge indicating parameter source for sampling settings. Shows one of:
+ * - **Custom**: User has explicitly set this value (orange badge)
+ * - **Server Props**: Using default from `/props` endpoint (blue badge)
+ * - **Default**: Using app default, server props unavailable (gray badge)
+ * Updates in real-time as user types to show immediate feedback.
+ */
+export { default as ChatSettingsParameterSourceIndicator } from './ChatSettings/ChatSettingsParameterSourceIndicator.svelte';
+
+/**
+ *
+ * SIDEBAR
+ *
+ * The sidebar integrates with ShadCN's sidebar component system
+ * for consistent styling and mobile responsiveness.
+ * Conversations are loaded from conversationsStore and displayed in reverse
+ * chronological order (most recent first).
+ *
+ */
+
+/**
+ * **ChatSidebar** - Chat Sidebar with actions menu and conversation list
+ *
+ * Collapsible sidebar displaying conversation history with search and
+ * management actions. Integrates with ShadCN sidebar component for
+ * consistent styling and mobile responsiveness.
+ *
+ * **Architecture:**
+ * - Uses ShadCN Sidebar.* components for structure
+ * - Fetches conversations from conversationsStore
+ * - Manages search state and filtered results locally
+ * - Handles conversation CRUD operations via conversationsStore
+ *
+ * **Navigation:**
+ * - Click conversation to navigate to `/chat/[id]`
+ * - New chat button navigates to `/` (root)
+ * - Active conversation highlighted based on route params
+ *
+ * **Conversation Management:**
+ * - Right-click or menu button for context menu
+ * - Rename: Opens inline edit dialog
+ * - Delete: Shows confirmation with conversation preview
+ * - Delete All: Removes all conversations with confirmation
+ *
+ * **Features:**
+ * - Search/filter conversations by title
+ * - Conversation list with message previews (first message truncated)
+ * - Active conversation highlighting
+ * - Mobile-responsive collapse/expand via ShadCN sidebar
+ * - New chat button in header
+ * - Settings button opens DialogChatSettings
+ *
+ * **Exported API:**
+ * - `handleMobileSidebarItemClick()` - Close sidebar on mobile after item selection
+ * - `activateSearchMode()` - Focus search input programmatically
+ * - `editActiveConversation()` - Open rename dialog for current conversation
+ *
+ * @example
+ * ```svelte
+ * <ChatSidebar bind:this={sidebarRef} />
+ * ```
+ */
+export { default as ChatSidebar } from './ChatSidebar/ChatSidebar.svelte';
+
+/**
+ * Action buttons for sidebar header. Contains new chat button, settings button,
+ * and delete all conversations button. Manages dialog states for settings and
+ * delete confirmation.
+ */
+export { default as ChatSidebarActions } from './ChatSidebar/ChatSidebarActions.svelte';
+
+/**
+ * Single conversation item in sidebar. Displays conversation title (truncated),
+ * last message preview, and timestamp. Shows context menu on right-click with
+ * rename and delete options. Highlights when active (matches current route).
+ * Handles click to navigate and keyboard accessibility.
+ */
+export { default as ChatSidebarConversationItem } from './ChatSidebar/ChatSidebarConversationItem.svelte';
+
+/**
+ * Search input for filtering conversations in sidebar. Filters conversation
+ * list by title as user types. Shows clear button when query is not empty.
+ * Integrated into sidebar header with proper styling.
+ */
+export { default as ChatSidebarSearch } from './ChatSidebar/ChatSidebarSearch.svelte';
diff --git a/tools/server/webui/src/lib/components/app/dialogs/DialogMcpResourcePreview.svelte b/tools/server/webui/src/lib/components/app/dialogs/DialogMcpResourcePreview.svelte
new file mode 100644
index 00000000000..37ddac74f3c
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/dialogs/DialogMcpResourcePreview.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Download } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { SyntaxHighlightedCode, ActionIconCopyToClipboard } from '$lib/components/app';
+	import {
+		getLanguageFromFilename,
+		isCodeResource,
+		isImageResource,
+		downloadResourceContent
+	} from '$lib/utils';
+	import { MimeTypeIncludes, MimeTypeText } from '$lib/enums';
+	import type { DatabaseMessageExtraMcpResource } from '$lib/types';
+
+	interface Props {
+		open: boolean;
+		onOpenChange?: (open: boolean) => void;
+		extra: DatabaseMessageExtraMcpResource;
+	}
+
+	let { open = $bindable(), onOpenChange, extra }: Props = $props();
+
+	const serverName = $derived(mcpStore.getServerDisplayName(extra.serverName));
+	const favicon = $derived(mcpStore.getServerFavicon(extra.serverName));
+
+	function getLanguage(): string {
+		if (extra.mimeType?.includes(MimeTypeIncludes.JSON)) return 'json';
+		if (extra.mimeType?.includes(MimeTypeIncludes.JAVASCRIPT)) return 'javascript';
+		if (extra.mimeType?.includes(MimeTypeIncludes.TYPESCRIPT)) return 'typescript';
+
+		const name = extra.name || extra.uri || '';
+		return getLanguageFromFilename(name) || 'plaintext';
+	}
+
+	function handleDownload() {
+		if (!extra.content) return;
+		downloadResourceContent(
+			extra.content,
+			extra.mimeType || MimeTypeText.PLAIN,
+			extra.name || 'resource.txt'
+		);
+	}
+</script>
+
+<Dialog.Root bind:open {onOpenChange}>
+	<Dialog.Content class="grid max-h-[90vh] max-w-5xl overflow-hidden sm:w-auto sm:max-w-6xl">
+		<Dialog.Header>
+			<Dialog.Title class="pr-8">{extra.name}</Dialog.Title>
+			<Dialog.Description>
+				<div class="flex items-center gap-2">
+					<span class="text-xs text-muted-foreground">{extra.uri}</span>
+
+					{#if serverName}
+						<span class="flex items-center gap-1 text-xs text-muted-foreground">
+							·
+							{#if favicon}
+								<img
+									src={favicon}
+									alt=""
+									class="h-3 w-3 shrink-0 rounded-sm"
+									onerror={(e) => {
+										(e.currentTarget as HTMLImageElement).style.display = 'none';
+									}}
+								/>
+							{/if}
+							{serverName}
+						</span>
+					{/if}
+
+					{#if extra.mimeType}
+						<span class="rounded bg-muted px-1.5 py-0.5 text-xs">{extra.mimeType}</span>
+					{/if}
+				</div>
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="flex items-center justify-end gap-1">
+			<ActionIconCopyToClipboard
+				text={extra.content}
+				canCopy={!!extra.content}
+				ariaLabel="Copy content"
+			/>
+
+			<Button
+				variant="ghost"
+				size="sm"
+				class="h-7 w-7 p-0"
+				onclick={handleDownload}
+				disabled={!extra.content}
+				title="Download content"
+			>
+				<Download class="h-3.5 w-3.5" />
+			</Button>
+		</div>
+
+		<div class="overflow-auto">
+			{#if isImageResource(extra.mimeType, extra.uri) && extra.content}
+				<div class="flex items-center justify-center">
+					<img
+						src={extra.content.startsWith('data:')
+							? extra.content
+							: `data:${extra.mimeType || 'image/png'};base64,${extra.content}`}
+						alt={extra.name}
+						class="max-h-[70vh] max-w-full rounded object-contain"
+					/>
+				</div>
+			{:else if isCodeResource(extra.mimeType, extra.uri) && extra.content}
+				<SyntaxHighlightedCode code={extra.content} language={getLanguage()} maxHeight="70vh" />
+			{:else if extra.content}
+				<pre
+					class="max-h-[70vh] overflow-auto rounded-md border bg-muted/30 p-4 font-mono text-sm break-words whitespace-pre-wrap">{extra.content}</pre>
+			{:else}
+				<div class="py-8 text-center text-sm text-muted-foreground">No content available</div>
+			{/if}
+		</div>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/tools/server/webui/src/lib/components/app/dialogs/DialogMcpResources.svelte b/tools/server/webui/src/lib/components/app/dialogs/DialogMcpResources.svelte
new file mode 100644
index 00000000000..a543b883e58
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/dialogs/DialogMcpResources.svelte
@@ -0,0 +1,200 @@
+<script lang="ts">
+	import { FolderOpen, Plus, Loader2 } from '@lucide/svelte';
+	import { toast } from 'svelte-sonner';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Button } from '$lib/components/ui/button';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpResources, mcpTotalResourceCount } from '$lib/stores/mcp-resources.svelte';
+	import { McpResourceBrowser, McpResourcePreview } from '$lib/components/app';
+	import { getResourceDisplayName } from '$lib/utils';
+	import type { MCPResourceInfo } from '$lib/types';
+	import { SvelteSet } from 'svelte/reactivity';
+
+	interface Props {
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+		onAttach?: (resource: MCPResourceInfo) => void;
+		preSelectedUri?: string;
+	}
+
+	let { open = $bindable(false), onOpenChange, onAttach, preSelectedUri }: Props = $props();
+
+	let selectedResources = new SvelteSet<string>();
+	let lastSelectedUri = $state<string | null>(null);
+	let isAttaching = $state(false);
+
+	const totalCount = $derived(mcpTotalResourceCount());
+
+	$effect(() => {
+		if (open) {
+			loadResources();
+
+			if (preSelectedUri) {
+				selectedResources.clear();
+				selectedResources.add(preSelectedUri);
+				lastSelectedUri = preSelectedUri;
+			}
+		}
+	});
+
+	async function loadResources() {
+		const perChatOverrides = conversationsStore.getAllMcpServerOverrides();
+		const initialized = await mcpStore.ensureInitialized(perChatOverrides);
+
+		if (initialized) {
+			await mcpStore.fetchAllResources();
+		}
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+		onOpenChange?.(newOpen);
+
+		if (!newOpen) {
+			selectedResources.clear();
+			lastSelectedUri = null;
+		}
+	}
+
+	function handleResourceSelect(resource: MCPResourceInfo, shiftKey: boolean = false) {
+		if (shiftKey && lastSelectedUri) {
+			// Get all resources in tree order (matching the display order in McpResourceBrowser)
+			const allResources = getAllResourcesFlatInTreeOrder();
+			const lastIndex = allResources.findIndex((r) => r.uri === lastSelectedUri);
+			const currentIndex = allResources.findIndex((r) => r.uri === resource.uri);
+
+			if (lastIndex !== -1 && currentIndex !== -1) {
+				const start = Math.min(lastIndex, currentIndex);
+				const end = Math.max(lastIndex, currentIndex);
+
+				for (let i = start; i <= end; i++) {
+					selectedResources.add(allResources[i].uri);
+				}
+			}
+		} else {
+			selectedResources.clear();
+			selectedResources.add(resource.uri);
+			lastSelectedUri = resource.uri;
+		}
+	}
+
+	function handleResourceToggle(resource: MCPResourceInfo, checked: boolean) {
+		if (checked) {
+			selectedResources.add(resource.uri);
+		} else {
+			selectedResources.delete(resource.uri);
+		}
+
+		lastSelectedUri = resource.uri;
+	}
+
+	function getAllResourcesFlatInTreeOrder(): MCPResourceInfo[] {
+		const allResources: MCPResourceInfo[] = [];
+		const resourcesMap = mcpResources();
+
+		for (const [serverName, serverRes] of resourcesMap.entries()) {
+			for (const resource of serverRes.resources) {
+				allResources.push({ ...resource, serverName });
+			}
+		}
+
+		return allResources.sort((a, b) => {
+			const aName = getResourceDisplayName(a);
+			const bName = getResourceDisplayName(b);
+			return aName.localeCompare(bName);
+		});
+	}
+
+	async function handleAttach() {
+		if (selectedResources.size === 0) return;
+
+		isAttaching = true;
+
+		try {
+			const allResources = getAllResourcesFlatInTreeOrder();
+			const resourcesToAttach = allResources.filter((r) => selectedResources.has(r.uri));
+
+			for (const resource of resourcesToAttach) {
+				await mcpStore.attachResource(resource.uri);
+				onAttach?.(resource);
+			}
+
+			const count = resourcesToAttach.length;
+
+			toast.success(
+				count === 1
+					? `Resource attached: ${resourcesToAttach[0].name}`
+					: `${count} resources attached`
+			);
+
+			handleOpenChange(false);
+		} catch (error) {
+			console.error('Failed to attach resources:', error);
+		} finally {
+			isAttaching = false;
+		}
+	}
+</script>
+
+<Dialog.Root {open} onOpenChange={handleOpenChange}>
+	<Dialog.Content class="max-h-[80vh] !max-w-4xl overflow-hidden p-0">
+		<Dialog.Header class="border-b border-border/30 px-6 py-4">
+			<Dialog.Title class="flex items-center gap-2">
+				<FolderOpen class="h-5 w-5" />
+
+				<span>MCP Resources</span>
+
+				{#if totalCount > 0}
+					<span class="text-sm font-normal text-muted-foreground">({totalCount})</span>
+				{/if}
+			</Dialog.Title>
+
+			<Dialog.Description>
+				Browse and attach resources from connected MCP servers to your chat context.
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="flex h-[500px] min-w-0">
+			<div class="w-72 shrink-0 overflow-y-auto border-r border-border/30 p-4">
+				<McpResourceBrowser
+					onSelect={handleResourceSelect}
+					onToggle={handleResourceToggle}
+					selectedUris={selectedResources}
+					expandToUri={preSelectedUri}
+				/>
+			</div>
+
+			<div class="min-w-0 flex-1 overflow-auto p-4">
+				{#if selectedResources.size === 1}
+					{@const allResources = getAllResourcesFlatInTreeOrder()}
+					{@const selectedResource = allResources.find((r) => selectedResources.has(r.uri))}
+
+					<McpResourcePreview resource={selectedResource ?? null} />
+				{:else if selectedResources.size > 1}
+					<div class="flex h-full items-center justify-center text-sm text-muted-foreground">
+						{selectedResources.size} resources selected
+					</div>
+				{:else}
+					<div class="flex h-full items-center justify-center text-sm text-muted-foreground">
+						Select a resource to preview
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		<Dialog.Footer class="border-t border-border/30 px-6 py-4">
+			<Button variant="outline" onclick={() => handleOpenChange(false)}>Cancel</Button>
+
+			<Button onclick={handleAttach} disabled={selectedResources.size === 0 || isAttaching}>
+				{#if isAttaching}
+					<Loader2 class="mr-2 h-4 w-4 animate-spin" />
+				{:else}
+					<Plus class="mr-2 h-4 w-4" />
+				{/if}
+
+				Attach {selectedResources.size > 0 ? `(${selectedResources.size})` : 'Resource'}
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/tools/server/webui/src/lib/components/app/dialogs/DialogMcpServersSettings.svelte b/tools/server/webui/src/lib/components/app/dialogs/DialogMcpServersSettings.svelte
new file mode 100644
index 00000000000..f0cd325d498
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/dialogs/DialogMcpServersSettings.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { McpLogo, McpServersSettings } from '$lib/components/app';
+
+	interface Props {
+		onOpenChange?: (open: boolean) => void;
+		open?: boolean;
+	}
+
+	let { onOpenChange, open = $bindable(false) }: Props = $props();
+
+	function handleClose() {
+		onOpenChange?.(false);
+	}
+</script>
+
+<Dialog.Root {open} onOpenChange={handleClose}>
+	<Dialog.Content
+		class="z-999999 flex h-[100dvh] max-h-[100dvh] min-h-[100dvh] flex-col gap-0 rounded-none p-0
+			md:h-[80dvh] md:h-auto md:max-h-[80dvh] md:min-h-0 md:rounded-lg"
+		style="max-width: 56rem;"
+	>
+		<div class="grid gap-2 border-b border-border/30 p-4 md:p-6">
+			<Dialog.Title class="inline-flex items-center text-lg font-semibold">
+				<McpLogo class="mr-2 inline h-4 w-4" />
+
+				MCP Servers
+			</Dialog.Title>
+
+			<Dialog.Description class="text-sm text-muted-foreground">
+				Add and configure MCP servers to enable agentic tool execution capabilities.
+			</Dialog.Description>
+		</div>
+
+		<div class="flex-1 overflow-y-auto px-4 py-6">
+			<McpServersSettings />
+		</div>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/tools/server/webui/src/lib/components/app/dialogs/index.ts b/tools/server/webui/src/lib/components/app/dialogs/index.ts
new file mode 100644
index 00000000000..216eae6843e
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/dialogs/index.ts
@@ -0,0 +1,470 @@
+/**
+ *
+ * DIALOGS
+ *
+ * Modal dialog components for the chat application.
+ *
+ * All dialogs use ShadCN Dialog or AlertDialog components for consistent
+ * styling, accessibility, and animation. They integrate with application
+ * stores for state management and data access.
+ *
+ */
+
+/**
+ *
+ * SETTINGS DIALOGS
+ *
+ * Dialogs for application and server configuration.
+ *
+ */
+
+/**
+ * **DialogChatSettings** - Settings dialog wrapper
+ *
+ * Modal dialog containing ChatSettings component with proper
+ * open/close state management and automatic form reset on open.
+ *
+ * **Architecture:**
+ * - Wraps ChatSettings component in ShadCN Dialog
+ * - Manages open/close state via bindable `open` prop
+ * - Resets form state when dialog opens to discard unsaved changes
+ *
+ * @example
+ * ```svelte
+ * <DialogChatSettings bind:open={showSettings} />
+ * ```
+ */
+export { default as DialogChatSettings } from './DialogChatSettings.svelte';
+
+/**
+ *
+ * CONFIRMATION DIALOGS
+ *
+ * Dialogs for user action confirmations. Use AlertDialog for blocking
+ * confirmations that require explicit user decision before proceeding.
+ *
+ */
+
+/**
+ * **DialogConfirmation** - Generic confirmation dialog
+ *
+ * Reusable confirmation dialog with customizable title, description,
+ * and action buttons. Supports destructive action styling and custom icons.
+ * Used for delete confirmations, irreversible actions, and important decisions.
+ *
+ * **Architecture:**
+ * - Uses ShadCN AlertDialog
+ * - Supports variant styling (default, destructive)
+ * - Customizable button labels and callbacks
+ *
+ * **Features:**
+ * - Customizable title and description text
+ * - Destructive variant with red styling for dangerous actions
+ * - Custom icon support in header
+ * - Cancel and confirm button callbacks
+ * - Keyboard accessible (Escape to cancel, Enter to confirm)
+ *
+ * @example
+ * ```svelte
+ * <DialogConfirmation
+ *   bind:open={showDelete}
+ *   title="Delete conversation?"
+ *   description="This action cannot be undone."
+ *   variant="destructive"
+ *   onConfirm={handleDelete}
+ *   onCancel={() => showDelete = false}
+ * />
+ * ```
+ */
+export { default as DialogConfirmation } from './DialogConfirmation.svelte';
+
+/**
+ * **DialogConversationTitleUpdate** - Conversation rename confirmation
+ *
+ * Confirmation dialog shown when editing the first user message in a conversation.
+ * Asks user whether to update the conversation title to match the new message content.
+ *
+ * **Architecture:**
+ * - Uses ShadCN AlertDialog
+ * - Shows current vs proposed title comparison
+ * - Triggered by ChatMessages when first message is edited
+ *
+ * **Features:**
+ * - Side-by-side display of current and new title
+ * - "Keep Current Title" and "Update Title" action buttons
+ * - Styled title previews in muted background boxes
+ *
+ * @example
+ * ```svelte
+ * <DialogConversationTitleUpdate
+ *   bind:open={showTitleUpdate}
+ *   currentTitle={conversation.name}
+ *   newTitle={truncatedMessageContent}
+ *   onConfirm={updateTitle}
+ *   onCancel={() => showTitleUpdate = false}
+ * />
+ * ```
+ */
+export { default as DialogConversationTitleUpdate } from './DialogConversationTitleUpdate.svelte';
+
+/**
+ *
+ * CONTENT PREVIEW DIALOGS
+ *
+ * Dialogs for previewing and displaying content in full-screen or modal views.
+ *
+ */
+
+/**
+ * **DialogCodePreview** - Full-screen code/HTML preview
+ *
+ * Full-screen dialog for previewing HTML or code in an isolated iframe.
+ * Used by MarkdownContent component for previewing rendered HTML blocks
+ * from code blocks in chat messages.
+ *
+ * **Architecture:**
+ * - Uses ShadCN Dialog with full viewport layout
+ * - Sandboxed iframe execution (allow-scripts only)
+ * - Clears content when closed for security
+ *
+ * **Features:**
+ * - Full viewport iframe preview
+ * - Sandboxed execution environment
+ * - Close button with mix-blend-difference for visibility over any content
+ * - Automatic content cleanup on close
+ * - Supports HTML preview with proper isolation
+ *
+ * @example
+ * ```svelte
+ * <DialogCodePreview
+ *   bind:open={showPreview}
+ *   code={htmlContent}
+ *   language="html"
+ * />
+ * ```
+ */
+export { default as DialogCodePreview } from './DialogCodePreview.svelte';
+
+/**
+ *
+ * ATTACHMENT DIALOGS
+ *
+ * Dialogs for viewing and managing file attachments. Support both
+ * uploaded files (pending) and stored attachments (in messages).
+ *
+ */
+
+/**
+ * **DialogChatAttachmentPreview** - Full-size attachment preview
+ *
+ * Modal dialog for viewing file attachments at full size. Supports different
+ * file types with appropriate preview modes: images, text files, PDFs, and audio.
+ *
+ * **Architecture:**
+ * - Wraps ChatAttachmentPreview component in ShadCN Dialog
+ * - Accepts either uploaded file or stored attachment as data source
+ * - Resets preview state when dialog opens
+ *
+ * **Features:**
+ * - Full-size image display with proper scaling
+ * - Text file content with syntax highlighting
+ * - PDF preview with text/image view toggle
+ * - Audio file placeholder with download option
+ * - File name and size display in header
+ * - Download button for all file types
+ * - Vision modality check for image attachments
+ *
+ * @example
+ * ```svelte
+ * <!-- Preview uploaded file -->
+ * <DialogChatAttachmentPreview
+ *   bind:open={showPreview}
+ *   uploadedFile={selectedFile}
+ *   activeModelId={currentModel}
+ * />
+ *
+ * <!-- Preview stored attachment -->
+ * <DialogChatAttachmentPreview
+ *   bind:open={showPreview}
+ *   attachment={selectedAttachment}
+ * />
+ * ```
+ */
+export { default as DialogChatAttachmentPreview } from './DialogChatAttachmentPreview.svelte';
+
+/**
+ * **DialogChatAttachmentsViewAll** - Grid view of all attachments
+ *
+ * Dialog showing all attachments in a responsive grid layout. Triggered by
+ * "+X more" button in ChatAttachmentsList when there are too many attachments
+ * to display inline.
+ *
+ * **Architecture:**
+ * - Wraps ChatAttachmentsViewAll component in ShadCN Dialog
+ * - Supports both readonly (message view) and editable (form) modes
+ * - Displays total attachment count in header
+ *
+ * **Features:**
+ * - Responsive grid layout for all attachments
+ * - Thumbnail previews with click-to-expand
+ * - Remove button in editable mode
+ * - Configurable thumbnail dimensions
+ * - Vision modality validation for images
+ *
+ * @example
+ * ```svelte
+ * <DialogChatAttachmentsViewAll
+ *   bind:open={showAllAttachments}
+ *   attachments={message.extra}
+ *   readonly
+ * />
+ * ```
+ */
+export { default as DialogChatAttachmentsViewAll } from './DialogChatAttachmentsViewAll.svelte';
+
+/**
+ *
+ * ERROR & ALERT DIALOGS
+ *
+ * Dialogs for displaying errors, warnings, and alerts to users.
+ * Provide context about what went wrong and recovery options.
+ *
+ */
+
+/**
+ * **DialogChatError** - Chat/generation error display
+ *
+ * Alert dialog for displaying chat and generation errors with context
+ * information. Supports different error types with appropriate styling
+ * and messaging.
+ *
+ * **Architecture:**
+ * - Uses ShadCN AlertDialog for modal display
+ * - Differentiates between timeout and server errors
+ * - Shows context info when available (token counts)
+ *
+ * **Error Types:**
+ * - **timeout**: TCP timeout with timer icon, red destructive styling
+ * - **server**: Server error with warning icon, amber warning styling
+ *
+ * **Features:**
+ * - Type-specific icons (TimerOff for timeout, AlertTriangle for server)
+ * - Error message display in styled badge
+ * - Context info showing prompt tokens and context size
+ * - Close button to dismiss
+ *
+ * @example
+ * ```svelte
+ * <DialogChatError
+ *   bind:open={showError}
+ *   type="server"
+ *   message={errorMessage}
+ *   contextInfo={{ n_prompt_tokens: 1024, n_ctx: 4096 }}
+ * />
+ * ```
+ */
+export { default as DialogChatError } from './DialogChatError.svelte';
+
+/**
+ * **DialogEmptyFileAlert** - Empty file upload warning
+ *
+ * Alert dialog shown when user attempts to upload empty files. Lists the
+ * empty files that were detected and removed from attachments, with
+ * explanation of why empty files cannot be processed.
+ *
+ * **Architecture:**
+ * - Uses ShadCN AlertDialog for modal display
+ * - Receives list of empty file names from ChatScreen
+ * - Triggered during file upload validation
+ *
+ * **Features:**
+ * - FileX icon indicating file error
+ * - List of empty file names in monospace font
+ * - Explanation of what happened and why
+ * - Single "Got it" dismiss button
+ *
+ * @example
+ * ```svelte
+ * <DialogEmptyFileAlert
+ *   bind:open={showEmptyAlert}
+ *   emptyFiles={['empty.txt', 'blank.md']}
+ * />
+ * ```
+ */
+export { default as DialogEmptyFileAlert } from './DialogEmptyFileAlert.svelte';
+
+/**
+ * **DialogModelNotAvailable** - Model unavailable error
+ *
+ * Alert dialog shown when the requested model (from URL params or selection)
+ * is not available on the server. Displays the requested model name and
+ * offers selection from available models.
+ *
+ * **Architecture:**
+ * - Uses ShadCN AlertDialog for modal display
+ * - Integrates with SvelteKit navigation for model switching
+ * - Receives available models list from modelsStore
+ *
+ * **Features:**
+ * - Warning icon with amber styling
+ * - Requested model name display in styled badge
+ * - Scrollable list of available models
+ * - Click model to navigate with updated URL params
+ * - Cancel button to dismiss without selection
+ *
+ * @example
+ * ```svelte
+ * <DialogModelNotAvailable
+ *   bind:open={showModelError}
+ *   modelName={requestedModel}
+ *   availableModels={modelsList}
+ * />
+ * ```
+ */
+export { default as DialogModelNotAvailable } from './DialogModelNotAvailable.svelte';
+
+/**
+ *
+ * DATA MANAGEMENT DIALOGS
+ *
+ * Dialogs for managing conversation data, including import/export
+ * and selection operations.
+ *
+ */
+
+/**
+ * **DialogConversationSelection** - Conversation picker for import/export
+ *
+ * Dialog for selecting conversations during import or export operations.
+ * Displays list of conversations with checkboxes for multi-selection.
+ * Used by ChatSettingsImportExportTab for data management.
+ *
+ * **Architecture:**
+ * - Wraps ConversationSelection component in ShadCN Dialog
+ * - Supports export mode (select from local) and import mode (select from file)
+ * - Resets selection state when dialog opens
+ * - High z-index to appear above settings dialog
+ *
+ * **Features:**
+ * - Multi-select with checkboxes
+ * - Conversation title and message count display
+ * - Select all / deselect all controls
+ * - Mode-specific descriptions (export vs import)
+ * - Cancel and confirm callbacks with selected conversations
+ *
+ * @example
+ * ```svelte
+ * <DialogConversationSelection
+ *   bind:open={showExportSelection}
+ *   conversations={allConversations}
+ *   messageCountMap={messageCounts}
+ *   mode="export"
+ *   onConfirm={handleExport}
+ *   onCancel={() => showExportSelection = false}
+ * />
+ * ```
+ */
+export { default as DialogConversationSelection } from './DialogConversationSelection.svelte';
+
+/**
+ *
+ * MODEL INFORMATION DIALOGS
+ *
+ * Dialogs for displaying model and server information.
+ *
+ */
+
+/**
+ * **DialogModelInformation** - Model details display
+ *
+ * Dialog showing comprehensive information about the currently loaded model
+ * and server configuration. Displays model metadata, capabilities, and
+ * server settings in a structured table format.
+ *
+ * **Architecture:**
+ * - Uses ShadCN Dialog with wide layout for table display
+ * - Fetches data from serverStore (props) and modelsStore (metadata)
+ * - Auto-fetches models when dialog opens if not loaded
+ *
+ * **Information Displayed:**
+ * - **Model**: Name with copy button
+ * - **File Path**: Full path to model file with copy button
+ * - **Context Size**: Current context window size
+ * - **Training Context**: Original training context (if available)
+ * - **Model Size**: File size in human-readable format
+ * - **Parameters**: Parameter count (e.g., "7B", "70B")
+ * - **Embedding Size**: Embedding dimension
+ * - **Vocabulary Size**: Token vocabulary size
+ * - **Vocabulary Type**: Tokenizer type (BPE, etc.)
+ * - **Parallel Slots**: Number of concurrent request slots
+ * - **Modalities**: Supported input types (text, vision, audio)
+ * - **Build Info**: Server build information
+ * - **Chat Template**: Full Jinja template in scrollable code block
+ *
+ * **Features:**
+ * - Copy buttons for model name and path
+ * - Modality badges with icons
+ * - Responsive table layout with container queries
+ * - Loading state while fetching model info
+ * - Scrollable chat template display
+ *
+ * @example
+ * ```svelte
+ * <DialogModelInformation bind:open={showModelInfo} />
+ * ```
+ */
+export { default as DialogModelInformation } from './DialogModelInformation.svelte';
+
+/**
+ * **DialogMcpResources** - MCP resources browser dialog
+ *
+ * Dialog for browsing and attaching MCP resources to chat context.
+ * Displays resources from connected MCP servers in a tree structure
+ * with preview panel and multi-select support.
+ *
+ * **Architecture:**
+ * - Uses ShadCN Dialog with two-panel layout
+ * - Left panel: McpResourceBrowser with tree navigation
+ * - Right panel: McpResourcePreview for selected resource
+ * - Integrates with mcpStore for resource fetching and attachment
+ *
+ * **Features:**
+ * - Tree-based resource navigation by server and path
+ * - Single and multi-select with shift+click
+ * - Resource preview with content display
+ * - Quick attach button per resource
+ * - Batch attach for multiple selections
+ *
+ * @example
+ * ```svelte
+ * <DialogMcpResources
+ *   bind:open={showResources}
+ *   onAttach={handleResourceAttach}
+ * />
+ * ```
+ */
+export { default as DialogMcpResources } from './DialogMcpResources.svelte';
+
+/**
+ * **DialogMcpResourcePreview** - MCP resource content preview
+ *
+ * Dialog for previewing the content of a stored MCP resource attachment.
+ * Displays the resource content with syntax highlighting for code,
+ * image rendering for images, and plain text for other content.
+ *
+ * **Features:**
+ * - Syntax highlighted code preview
+ * - Image rendering for image resources
+ * - Copy to clipboard and download actions
+ * - Server name and favicon display
+ * - MIME type badge
+ *
+ * @example
+ * ```svelte
+ * <DialogMcpResourcePreview
+ *   bind:open={previewOpen}
+ *   extra={mcpResourceExtra}
+ * />
+ * ```
+ */
+export { default as DialogMcpResourcePreview } from './DialogMcpResourcePreview.svelte';
diff --git a/tools/server/webui/src/lib/components/app/index.ts b/tools/server/webui/src/lib/components/app/index.ts
index 142622ef0a2..56bd8a48520 100644
--- a/tools/server/webui/src/lib/components/app/index.ts
+++ b/tools/server/webui/src/lib/components/app/index.ts
@@ -1,68 +1,11 @@
 export * from './actions';
 export * from './badges';
+export * from './chat';
 export * from './content';
+export * from './dialogs';
 export * from './forms';
+export * from './mcp';
 export * from './misc';
 export * from './models';
 export * from './navigation';
 export * from './server';
-
-// Chat
-export { default as ChatAttachmentPreview } from './chat/ChatAttachments/ChatAttachmentPreview.svelte';
-export { default as ChatAttachmentThumbnailFile } from './chat/ChatAttachments/ChatAttachmentThumbnailFile.svelte';
-export { default as ChatAttachmentThumbnailImage } from './chat/ChatAttachments/ChatAttachmentThumbnailImage.svelte';
-export { default as ChatAttachmentsList } from './chat/ChatAttachments/ChatAttachmentsList.svelte';
-export { default as ChatAttachmentsViewAll } from './chat/ChatAttachments/ChatAttachmentsViewAll.svelte';
-export { default as ChatForm } from './chat/ChatForm/ChatForm.svelte';
-export { default as ChatFormActionAttachmentsDropdown } from './chat/ChatForm/ChatFormActions/ChatFormActionAttachmentsDropdown.svelte';
-export { default as ChatFormActionFileAttachments } from './chat/ChatForm/ChatFormActions/ChatFormActionFileAttachments.svelte';
-export { default as ChatFormActionRecord } from './chat/ChatForm/ChatFormActions/ChatFormActionRecord.svelte';
-export { default as ChatFormActions } from './chat/ChatForm/ChatFormActions/ChatFormActions.svelte';
-export { default as ChatFormActionSubmit } from './chat/ChatForm/ChatFormActions/ChatFormActionSubmit.svelte';
-export { default as ChatFormFileInputInvisible } from './chat/ChatForm/ChatFormFileInputInvisible.svelte';
-export { default as ChatFormHelperText } from './chat/ChatForm/ChatFormHelperText.svelte';
-export { default as ChatFormTextarea } from './chat/ChatForm/ChatFormTextarea.svelte';
-export { default as ChatMessage } from './chat/ChatMessages/ChatMessage.svelte';
-export { default as ChatMessageActions } from './chat/ChatMessages/ChatMessageActions.svelte';
-export { default as ChatMessageAssistant } from './chat/ChatMessages/ChatMessageAssistant.svelte';
-export { default as ChatMessageBranchingControls } from './chat/ChatMessages/ChatMessageBranchingControls.svelte';
-export { default as ChatMessageEditForm } from './chat/ChatMessages/ChatMessageEditForm.svelte';
-export { default as ChatMessageStatistics } from './chat/ChatMessages/ChatMessageStatistics.svelte';
-export { default as ChatMessageSystem } from './chat/ChatMessages/ChatMessageSystem.svelte';
-export { default as ChatMessageThinkingBlock } from './chat/ChatMessages/ChatMessageThinkingBlock.svelte';
-export { default as ChatMessageUser } from './chat/ChatMessages/ChatMessageUser.svelte';
-export { default as ChatMessages } from './chat/ChatMessages/ChatMessages.svelte';
-export { default as MessageBranchingControls } from './chat/ChatMessages/ChatMessageBranchingControls.svelte';
-export { default as ChatScreen } from './chat/ChatScreen/ChatScreen.svelte';
-export { default as ChatScreenDragOverlay } from './chat/ChatScreen/ChatScreenDragOverlay.svelte';
-export { default as ChatScreenForm } from './chat/ChatScreen/ChatScreenForm.svelte';
-export { default as ChatScreenHeader } from './chat/ChatScreen/ChatScreenHeader.svelte';
-export { default as ChatScreenProcessingInfo } from './chat/ChatScreen/ChatScreenProcessingInfo.svelte';
-export { default as ChatSettings } from './chat/ChatSettings/ChatSettings.svelte';
-export { default as ChatSettingsFooter } from './chat/ChatSettings/ChatSettingsFooter.svelte';
-export { default as ChatSettingsFields } from './chat/ChatSettings/ChatSettingsFields.svelte';
-export { default as ChatSettingsImportExportTab } from './chat/ChatSettings/ChatSettingsImportExportTab.svelte';
-export { default as ChatSettingsParameterSourceIndicator } from './chat/ChatSettings/ChatSettingsParameterSourceIndicator.svelte';
-export { default as ChatSidebar } from './chat/ChatSidebar/ChatSidebar.svelte';
-export { default as ChatSidebarActions } from './chat/ChatSidebar/ChatSidebarActions.svelte';
-export { default as ChatSidebarConversationItem } from './chat/ChatSidebar/ChatSidebarConversationItem.svelte';
-export { default as ChatSidebarSearch } from './chat/ChatSidebar/ChatSidebarSearch.svelte';
-
-// Dialogs
-export { default as DialogChatAttachmentPreview } from './dialogs/DialogChatAttachmentPreview.svelte';
-export { default as DialogChatAttachmentsViewAll } from './dialogs/DialogChatAttachmentsViewAll.svelte';
-export { default as DialogChatError } from './dialogs/DialogChatError.svelte';
-export { default as DialogChatSettings } from './dialogs/DialogChatSettings.svelte';
-export { default as DialogCodePreview } from './dialogs/DialogCodePreview.svelte';
-export { default as DialogConfirmation } from './dialogs/DialogConfirmation.svelte';
-export { default as DialogConversationSelection } from './dialogs/DialogConversationSelection.svelte';
-export { default as DialogConversationTitleUpdate } from './dialogs/DialogConversationTitleUpdate.svelte';
-export { default as DialogEmptyFileAlert } from './dialogs/DialogEmptyFileAlert.svelte';
-export { default as DialogModelInformation } from './dialogs/DialogModelInformation.svelte';
-export { default as DialogModelNotAvailable } from './dialogs/DialogModelNotAvailable.svelte';
-
-// Compatibility aliases
-export { default as ActionButton } from './actions/ActionIcon.svelte';
-export { default as ActionDropdown } from './navigation/DropdownMenuActions.svelte';
-export { default as CopyToClipboardIcon } from './actions/ActionIconCopyToClipboard.svelte';
-export { default as RemoveButton } from './actions/ActionIconRemove.svelte';
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpActiveServersAvatars.svelte b/tools/server/webui/src/lib/components/app/mcp/McpActiveServersAvatars.svelte
new file mode 100644
index 00000000000..433237ac005
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpActiveServersAvatars.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { cn } from '$lib/components/ui/utils';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { getFaviconUrl } from '$lib/utils';
+	import { HealthCheckStatus } from '$lib/enums';
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+
+	let mcpServers = $derived(mcpStore.getServersSorted().filter((s) => s.enabled));
+	let enabledMcpServersForChat = $derived(
+		mcpServers.filter((s) => conversationsStore.isMcpServerEnabledForChat(s.id) && s.url.trim())
+	);
+	let healthyEnabledMcpServers = $derived(
+		enabledMcpServersForChat.filter((s) => {
+			const healthState = mcpStore.getHealthCheckState(s.id);
+			return healthState.status !== HealthCheckStatus.ERROR;
+		})
+	);
+	let hasEnabledMcpServers = $derived(enabledMcpServersForChat.length > 0);
+	let extraServersCount = $derived(Math.max(0, healthyEnabledMcpServers.length - 3));
+	let mcpFavicons = $derived(
+		healthyEnabledMcpServers
+			.slice(0, 3)
+			.map((s) => ({ id: s.id, url: getFaviconUrl(s.url) }))
+			.filter((f) => f.url !== null)
+	);
+</script>
+
+{#if hasEnabledMcpServers && mcpFavicons.length > 0}
+	<div class={cn('inline-flex items-center gap-1.5', className)}>
+		<div class="flex -space-x-1">
+			{#each mcpFavicons as favicon (favicon.id)}
+				<div class="box-shadow-lg overflow-hidden rounded-full bg-muted ring-1 ring-muted">
+					<img
+						src={favicon.url}
+						alt=""
+						class="h-4 w-4"
+						onerror={(e) => {
+							(e.currentTarget as HTMLImageElement).style.display = 'none';
+						}}
+					/>
+				</div>
+			{/each}
+		</div>
+
+		{#if extraServersCount > 0}
+			<span class="text-xs text-muted-foreground">+{extraServersCount}</span>
+		{/if}
+	</div>
+{/if}
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpCapabilitiesBadges.svelte b/tools/server/webui/src/lib/components/app/mcp/McpCapabilitiesBadges.svelte
new file mode 100644
index 00000000000..d17b24ebb04
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpCapabilitiesBadges.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { Wrench, Database, MessageSquare, FileText, Sparkles, ListChecks } from '@lucide/svelte';
+	import type { MCPCapabilitiesInfo } from '$lib/types';
+	import { Badge } from '$lib/components/ui/badge';
+
+	interface Props {
+		capabilities?: MCPCapabilitiesInfo;
+	}
+
+	let { capabilities }: Props = $props();
+</script>
+
+{#if capabilities}
+	{#if capabilities.server.tools}
+		<Badge variant="outline" class="h-5 gap-1 bg-green-50 px-1.5 text-[10px] dark:bg-green-950">
+			<Wrench class="h-3 w-3 text-green-600 dark:text-green-400" />
+
+			Tools
+		</Badge>
+	{/if}
+
+	{#if capabilities.server.resources}
+		<Badge variant="outline" class="h-5 gap-1 bg-blue-50 px-1.5 text-[10px] dark:bg-blue-950">
+			<Database class="h-3 w-3 text-blue-600 dark:text-blue-400" />
+
+			Resources
+		</Badge>
+	{/if}
+
+	{#if capabilities.server.prompts}
+		<Badge variant="outline" class="h-5 gap-1 bg-purple-50 px-1.5 text-[10px] dark:bg-purple-950">
+			<MessageSquare class="h-3 w-3 text-purple-600 dark:text-purple-400" />
+
+			Prompts
+		</Badge>
+	{/if}
+
+	{#if capabilities.server.logging}
+		<Badge variant="outline" class="h-5 gap-1 bg-orange-50 px-1.5 text-[10px] dark:bg-orange-950">
+			<FileText class="h-3 w-3 text-orange-600 dark:text-orange-400" />
+
+			Logging
+		</Badge>
+	{/if}
+
+	{#if capabilities.server.completions}
+		<Badge variant="outline" class="h-5 gap-1 bg-cyan-50 px-1.5 text-[10px] dark:bg-cyan-950">
+			<Sparkles class="h-3 w-3 text-cyan-600 dark:text-cyan-400" />
+
+			Completions
+		</Badge>
+	{/if}
+
+	{#if capabilities.server.tasks}
+		<Badge variant="outline" class="h-5 gap-1 bg-pink-50 px-1.5 text-[10px] dark:bg-pink-950">
+			<ListChecks class="h-3 w-3 text-pink-600 dark:text-pink-400" />
+
+			Tasks
+		</Badge>
+	{/if}
+{/if}
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpConnectionLogs.svelte b/tools/server/webui/src/lib/components/app/mcp/McpConnectionLogs.svelte
new file mode 100644
index 00000000000..6e24ce6422a
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpConnectionLogs.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { ChevronDown, ChevronRight } from '@lucide/svelte';
+	import * as Collapsible from '$lib/components/ui/collapsible';
+	import { cn } from '$lib/components/ui/utils';
+	import type { MCPConnectionLog } from '$lib/types';
+	import { formatTime, getMcpLogLevelIcon, getMcpLogLevelClass } from '$lib/utils';
+
+	interface Props {
+		logs: MCPConnectionLog[];
+		connectionTimeMs?: number;
+		defaultExpanded?: boolean;
+		class?: string;
+	}
+
+	let { logs, connectionTimeMs, defaultExpanded = false, class: className }: Props = $props();
+
+	let isExpanded = $derived(defaultExpanded);
+</script>
+
+{#if logs.length > 0}
+	<Collapsible.Root bind:open={isExpanded} class={className}>
+		<div class="space-y-2">
+			<Collapsible.Trigger
+				class="flex w-full items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+			>
+				{#if isExpanded}
+					<ChevronDown class="h-3.5 w-3.5" />
+				{:else}
+					<ChevronRight class="h-3.5 w-3.5" />
+				{/if}
+
+				<span>Connection Log ({logs.length})</span>
+
+				{#if connectionTimeMs !== undefined}
+					<span class="ml-1">· Connected in {connectionTimeMs}ms</span>
+				{/if}
+			</Collapsible.Trigger>
+		</div>
+
+		<Collapsible.Content class="mt-2">
+			<div
+				class="max-h-64 space-y-0.5 overflow-y-auto rounded bg-muted/50 p-2 font-mono text-[10px]"
+			>
+				{#each logs as log (log.timestamp.getTime() + log.message)}
+					{@const Icon = getMcpLogLevelIcon(log.level)}
+
+					<div class={cn('flex items-start gap-1.5', getMcpLogLevelClass(log.level))}>
+						<span class="shrink-0 text-muted-foreground">
+							{formatTime(log.timestamp)}
+						</span>
+
+						<Icon class="mt-0.5 h-3 w-3 shrink-0" />
+
+						<span class="break-all">{log.message}</span>
+					</div>
+				{/each}
+			</div>
+		</Collapsible.Content>
+	</Collapsible.Root>
+{/if}
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpLogo.svelte b/tools/server/webui/src/lib/components/app/mcp/McpLogo.svelte
new file mode 100644
index 00000000000..9f73db84d61
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpLogo.svelte
@@ -0,0 +1,111 @@
+<script>
+	let { class: className = '', style = '' } = $props();
+</script>
+
+<svg
+	class={className}
+	{style}
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 174 174"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	fill="none"
+	version="1.1"
+	><g id="shape-320b5b95-d08d-8089-8007-585a8e498184"
+		><defs
+			><clipPath
+				id="frame-clip-320b5b95-d08d-8089-8007-585a8e498184-render-1"
+				class="frame-clip frame-clip-def"
+				><rect
+					rx="0"
+					ry="0"
+					x="0"
+					y="0"
+					width="174.00000000000045"
+					height="174"
+					transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
+				/></clipPath
+			></defs
+		><g class="frame-container-wrapper"
+			><g class="frame-container-blur"
+				><g class="frame-container-shadows"
+					><g clip-path="url(#frame-clip-320b5b95-d08d-8089-8007-585a8e498184-render-1)" fill="none"
+						><g class="fills" id="fills-320b5b95-d08d-8089-8007-585a8e498184"
+							><rect
+								rx="0"
+								ry="0"
+								x="0"
+								y="0"
+								width="174.00000000000045"
+								height="174"
+								transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"
+								class="frame-background"
+							/></g
+						><g class="frame-children"
+							><g id="shape-320b5b95-d08d-8089-8007-585a974337b1"
+								><g class="fills" id="fills-320b5b95-d08d-8089-8007-585a974337b1"
+									><path
+										d="M15.5587158203125,81.5927734375L83.44091796875,13.7105712890625C92.813720703125,4.3380126953125,108.0096435546875,4.3380126953125,117.3817138671875,13.7105712890625L117.3817138671875,13.7105712890625C126.7547607421875,23.08306884765625,126.7547607421875,38.27911376953125,117.3817138671875,47.65167236328125L66.1168212890625,98.9169921875"
+										fill="none"
+										stroke-linecap="round"
+										style="fill: none;"
+									/></g
+								><g
+									fill="none"
+									stroke-linecap="round"
+									id="strokes-b954dcef-3e3e-8015-8007-585acd4382b6-320b5b95-d08d-8089-8007-585a974337b1"
+									class="strokes"
+									><g class="stroke-shape"
+										><path
+											d="M15.5587158203125,81.5927734375L83.44091796875,13.7105712890625C92.813720703125,4.3380126953125,108.0096435546875,4.3380126953125,117.3817138671875,13.7105712890625L117.3817138671875,13.7105712890625C126.7547607421875,23.08306884765625,126.7547607421875,38.27911376953125,117.3817138671875,47.65167236328125L66.1168212890625,98.9169921875"
+											style="fill: none; stroke-width: 12; stroke: currentColor; stroke-opacity: 1;"
+										/></g
+									></g
+								></g
+							><g id="shape-320b5b95-d08d-8089-8007-585a974337b2"
+								><g class="fills" id="fills-320b5b95-d08d-8089-8007-585a974337b2"
+									><path
+										d="M66.5587158203125,98.26885986328125L117.1165771484375,47.7105712890625C126.489501953125,38.3380126953125,141.6854248046875,38.3380126953125,151.0584716796875,47.7105712890625L151.4114990234375,48.0640869140625C160.7845458984375,57.43670654296875,160.7845458984375,72.6326904296875,151.4114990234375,82.00518798828125L90.018310546875,143.39886474609375C86.8941650390625,146.52288818359375,86.8941650390625,151.587890625,90.018310546875,154.71185302734375L102.62451171875,167.31890869140625"
+										fill="none"
+										stroke-linecap="round"
+										style="fill: none;"
+									/></g
+								><g
+									fill="none"
+									stroke-linecap="round"
+									id="strokes-b954dcef-3e3e-8015-8007-585acd447743-320b5b95-d08d-8089-8007-585a974337b2"
+									class="strokes"
+									><g class="stroke-shape"
+										><path
+											d="M66.5587158203125,98.26885986328125L117.1165771484375,47.7105712890625C126.489501953125,38.3380126953125,141.6854248046875,38.3380126953125,151.0584716796875,47.7105712890625L151.4114990234375,48.0640869140625C160.7845458984375,57.43670654296875,160.7845458984375,72.6326904296875,151.4114990234375,82.00518798828125L90.018310546875,143.39886474609375C86.8941650390625,146.52288818359375,86.8941650390625,151.587890625,90.018310546875,154.71185302734375L102.62451171875,167.31890869140625"
+											style="fill: none; stroke-width: 12; stroke: currentColor; stroke-opacity: 1;"
+										/></g
+									></g
+								></g
+							><g id="shape-320b5b95-d08d-8089-8007-585a974337b3"
+								><g class="fills" id="fills-320b5b95-d08d-8089-8007-585a974337b3"
+									><path
+										d="M99.79296875,30.68115234375L49.588134765625,80.8857421875C40.215576171875,90.258056640625,40.215576171875,105.45404052734375,49.588134765625,114.82708740234375L49.588134765625,114.82708740234375C58.9608154296875,124.19903564453125,74.1566162109375,124.19903564453125,83.529296875,114.82708740234375L133.7340087890625,64.62225341796875"
+										fill="none"
+										stroke-linecap="round"
+										style="fill: none;"
+									/></g
+								><g
+									fill="none"
+									stroke-linecap="round"
+									id="strokes-b954dcef-3e3e-8015-8007-585acd44c5c9-320b5b95-d08d-8089-8007-585a974337b3"
+									class="strokes"
+									><g class="stroke-shape"
+										><path
+											d="M99.79296875,30.68115234375L49.588134765625,80.8857421875C40.215576171875,90.258056640625,40.215576171875,105.45404052734375,49.588134765625,114.82708740234375L49.588134765625,114.82708740234375C58.9608154296875,124.19903564453125,74.1566162109375,124.19903564453125,83.529296875,114.82708740234375L133.7340087890625,64.62225341796875"
+											style="fill: none; stroke-width: 12; stroke: currentColor; stroke-opacity: 1;"
+										/></g
+									></g
+								></g
+							></g
+						></g
+					></g
+				></g
+			></g
+		></g
+	></svg
+>
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpResourceBrowser/McpResourceBrowser.svelte b/tools/server/webui/src/lib/components/app/mcp/McpResourceBrowser/McpResourceBrowser.svelte
new file mode 100644
index 00000000000..3e14ef8c60d
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpResourceBrowser/McpResourceBrowser.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+	import { cn } from '$lib/components/ui/utils';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { mcpResources, mcpResourcesLoading } from '$lib/stores/mcp-resources.svelte';
+	import type { MCPServerResources, MCPResourceInfo } from '$lib/types';
+	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+	import { parseResourcePath } from '$lib/utils';
+	import McpResourceBrowserHeader from './McpResourceBrowserHeader.svelte';
+	import McpResourceBrowserEmptyState from './McpResourceBrowserEmptyState.svelte';
+	import McpResourceBrowserServerItem from './McpResourceBrowserServerItem.svelte';
+
+	interface Props {
+		onSelect?: (resource: MCPResourceInfo, shiftKey?: boolean) => void;
+		onToggle?: (resource: MCPResourceInfo, checked: boolean) => void;
+		selectedUris?: Set<string>;
+		expandToUri?: string;
+		class?: string;
+	}
+
+	let {
+		onSelect,
+		onToggle,
+		selectedUris = new Set(),
+		expandToUri,
+		class: className
+	}: Props = $props();
+
+	let expandedServers = new SvelteSet<string>();
+	let expandedFolders = new SvelteSet<string>();
+	let searchQuery = $state('');
+
+	const resources = $derived(mcpResources());
+	const isLoading = $derived(mcpResourcesLoading());
+
+	const filteredResources = $derived.by(() => {
+		if (!searchQuery.trim()) {
+			return resources;
+		}
+
+		const query = searchQuery.toLowerCase();
+		const filtered = new SvelteMap();
+
+		for (const [serverName, serverRes] of resources.entries()) {
+			const filteredResources = serverRes.resources.filter((r) => {
+				return (
+					r.title?.toLowerCase().includes(query) ||
+					r.uri.toLowerCase().includes(query) ||
+					serverName.toLowerCase().includes(query)
+				);
+			});
+
+			if (filteredResources.length > 0 || query.trim()) {
+				filtered.set(serverName, {
+					...serverRes,
+					resources: filteredResources
+				});
+			}
+		}
+
+		return filtered;
+	});
+
+	$effect(() => {
+		if (expandToUri && resources.size > 0) {
+			autoExpandToResource(expandToUri);
+		}
+	});
+
+	function autoExpandToResource(uri: string) {
+		for (const [serverName, serverRes] of resources.entries()) {
+			const resource = serverRes.resources.find((r) => r.uri === uri);
+			if (resource) {
+				expandedServers.add(serverName);
+
+				const pathParts = parseResourcePath(uri);
+				if (pathParts.length > 1) {
+					let currentPath = '';
+					for (let i = 0; i < pathParts.length - 1; i++) {
+						currentPath = `${currentPath}/${pathParts[i]}`;
+						const folderId = `${serverName}:${currentPath}`;
+						expandedFolders.add(folderId);
+					}
+				}
+				break;
+			}
+		}
+	}
+
+	function toggleServer(serverName: string) {
+		if (expandedServers.has(serverName)) {
+			expandedServers.delete(serverName);
+		} else {
+			expandedServers.add(serverName);
+		}
+	}
+
+	function toggleFolder(folderId: string) {
+		if (expandedFolders.has(folderId)) {
+			expandedFolders.delete(folderId);
+		} else {
+			expandedFolders.add(folderId);
+		}
+	}
+
+	function handleRefresh() {
+		mcpStore.fetchAllResources();
+	}
+</script>
+
+<div class={cn('flex flex-col gap-2', className)}>
+	<McpResourceBrowserHeader
+		{isLoading}
+		onRefresh={handleRefresh}
+		onSearch={(q) => (searchQuery = q)}
+		{searchQuery}
+	/>
+
+	<div class="flex flex-col gap-1">
+		{#if filteredResources.size === 0}
+			<McpResourceBrowserEmptyState {isLoading} />
+		{:else}
+			{#each [...filteredResources.entries()] as [serverName, serverRes] (serverName)}
+				<McpResourceBrowserServerItem
+					serverName={serverName as string}
+					serverRes={serverRes as MCPServerResources}
+					isExpanded={expandedServers.has(serverName as string)}
+					{selectedUris}
+					{expandedFolders}
+					onToggleServer={() => toggleServer(serverName as string)}
+					onToggleFolder={toggleFolder}
+					{onSelect}
+					{onToggle}
+					{searchQuery}
+				/>
+			{/each}
+		{/if}
+	</div>
+</div>
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpResourceBrowser/McpResourceBrowserEmptyState.svelte b/tools/server/webui/src/lib/components/app/mcp/McpResourceBrowser/McpResourceBrowserEmptyState.svelte
new file mode 100644
index 00000000000..4fb0c1e24f7
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpResourceBrowser/McpResourceBrowserEmptyState.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	interface Props {
+		isLoading: boolean;
+	}
+
+	let { isLoading }: Props = $props();
+</script>
+
+<div class="py-4 text-center text-sm text-muted-foreground">
+	{#if isLoading}
+		Loading resources...
+	{:else}
+		No resources available
+	{/if}
+</div>
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpResourceBrowser/McpResourceBrowserHeader.svelte b/tools/server/webui/src/lib/components/app/mcp/McpResourceBrowser/McpResourceBrowserHeader.svelte
new file mode 100644
index 00000000000..419654c13ca
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpResourceBrowser/McpResourceBrowserHeader.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { RefreshCw, Loader2 } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { SearchInput } from '$lib/components/app/forms';
+
+	interface Props {
+		isLoading: boolean;
+		onRefresh: () => void;
+		onSearch?: (query: string) => void;
+		searchQuery?: string;
+	}
+
+	let { isLoading, onRefresh, onSearch, searchQuery = '' }: Props = $props();
+</script>
+
+<div class="flex flex-col gap-2">
+	<div class="mb-2 flex items-center gap-4">
+		<SearchInput
+			placeholder="Search resources..."
+			value={searchQuery}
+			onInput={(value) => onSearch?.(value)}
+		/>
+
+		<Button
+			variant="ghost"
+			size="sm"
+			class="h-8 w-8 p-0"
+			onclick={onRefresh}
+			disabled={isLoading}
+			title="Refresh resources"
+		>
+			{#if isLoading}
+				<Loader2 class="h-4 w-4 animate-spin" />
+			{:else}
+				<RefreshCw class="h-4 w-4" />
+			{/if}
+		</Button>
+	</div>
+
+	<h3 class="text-sm font-medium">Available resources</h3>
+</div>
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpResourceBrowser/McpResourceBrowserServerItem.svelte b/tools/server/webui/src/lib/components/app/mcp/McpResourceBrowser/McpResourceBrowserServerItem.svelte
new file mode 100644
index 00000000000..c11e0966a91
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpResourceBrowser/McpResourceBrowserServerItem.svelte
@@ -0,0 +1,175 @@
+<script lang="ts">
+	import { FolderOpen, ChevronDown, ChevronRight, Loader2 } from '@lucide/svelte';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import * as Collapsible from '$lib/components/ui/collapsible';
+	import { cn } from '$lib/components/ui/utils';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import type { MCPResourceInfo, MCPServerResources } from '$lib/types';
+	import { SvelteSet } from 'svelte/reactivity';
+	import {
+		type ResourceTreeNode,
+		buildResourceTree,
+		countTreeResources,
+		sortTreeChildren
+	} from './mcp-resource-browser';
+	import { getDisplayName, getResourceIcon } from '$lib/utils';
+
+	interface Props {
+		serverName: string;
+		serverRes: MCPServerResources;
+		isExpanded: boolean;
+		selectedUris: Set<string>;
+		expandedFolders: SvelteSet<string>;
+		onToggleServer: () => void;
+		onToggleFolder: (folderId: string) => void;
+		onSelect?: (resource: MCPResourceInfo, shiftKey?: boolean) => void;
+		onToggle?: (resource: MCPResourceInfo, checked: boolean) => void;
+		searchQuery?: string;
+	}
+
+	let {
+		serverName,
+		serverRes,
+		isExpanded,
+		selectedUris,
+		expandedFolders,
+		onToggleServer,
+		onToggleFolder,
+		onSelect,
+		onToggle,
+		searchQuery = ''
+	}: Props = $props();
+
+	const hasResources = $derived(serverRes.resources.length > 0);
+	const displayName = $derived(mcpStore.getServerDisplayName(serverName));
+	const favicon = $derived(mcpStore.getServerFavicon(serverName));
+	const resourceTree = $derived(buildResourceTree(serverRes.resources, serverName, searchQuery));
+
+	function handleResourceClick(resource: MCPResourceInfo, event: MouseEvent) {
+		onSelect?.(resource, event.shiftKey);
+	}
+
+	function handleCheckboxChange(resource: MCPResourceInfo, checked: boolean) {
+		onToggle?.(resource, checked);
+	}
+
+	function isResourceSelected(resource: MCPResourceInfo): boolean {
+		return selectedUris.has(resource.uri);
+	}
+</script>
+
+{#snippet renderTreeNode(node: ResourceTreeNode, depth: number, parentPath: string)}
+	{@const isFolder = !node.resource && node.children.size > 0}
+	{@const folderId = `${serverName}:${parentPath}/${node.name}`}
+	{@const isFolderExpanded = expandedFolders.has(folderId)}
+
+	{#if isFolder}
+		{@const folderCount = countTreeResources(node)}
+		<Collapsible.Root open={isFolderExpanded} onOpenChange={() => onToggleFolder(folderId)}>
+			<Collapsible.Trigger
+				class="flex w-full items-center gap-2 rounded px-2 py-1 text-sm hover:bg-muted/50"
+			>
+				{#if isFolderExpanded}
+					<ChevronDown class="h-3 w-3" />
+				{:else}
+					<ChevronRight class="h-3 w-3" />
+				{/if}
+
+				<FolderOpen class="h-3.5 w-3.5 text-muted-foreground" />
+
+				<span class="font-medium">{node.name}</span>
+
+				<span class="text-xs text-muted-foreground">({folderCount})</span>
+			</Collapsible.Trigger>
+
+			<Collapsible.Content>
+				<div class="ml-4 flex flex-col gap-0.5 border-l border-border/50 pl-2">
+					{#each sortTreeChildren( [...node.children.values()] ) as child (child.resource?.uri || `${serverName}:${parentPath}/${node.name}/${child.name}`)}
+						{@render renderTreeNode(child, depth + 1, `${parentPath}/${node.name}`)}
+					{/each}
+				</div>
+			</Collapsible.Content>
+		</Collapsible.Root>
+	{:else if node.resource}
+		{@const resource = node.resource}
+		{@const ResourceIcon = getResourceIcon(resource.mimeType, resource.uri)}
+		{@const isSelected = isResourceSelected(resource)}
+		{@const resourceDisplayName = resource.title || getDisplayName(node.name)}
+
+		<div class="group flex w-full items-center gap-2">
+			{#if onToggle}
+				<Checkbox
+					checked={isSelected}
+					onCheckedChange={(checked: boolean | 'indeterminate') =>
+						handleCheckboxChange(resource, checked === true)}
+					class="h-4 w-4"
+				/>
+			{/if}
+
+			<button
+				class={cn(
+					'flex flex-1 items-center gap-2 rounded px-2 py-1 text-left text-sm transition-colors',
+					'hover:bg-muted/50',
+					isSelected && 'bg-muted'
+				)}
+				onclick={(e: MouseEvent) => handleResourceClick(resource, e)}
+				title={resourceDisplayName}
+			>
+				<ResourceIcon class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+
+				<span class="min-w-0 flex-1 truncate text-left">
+					{resourceDisplayName}
+				</span>
+			</button>
+		</div>
+	{/if}
+{/snippet}
+
+<Collapsible.Root open={isExpanded} onOpenChange={onToggleServer}>
+	<Collapsible.Trigger
+		class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-muted/50"
+	>
+		{#if isExpanded}
+			<ChevronDown class="h-3.5 w-3.5" />
+		{:else}
+			<ChevronRight class="h-3.5 w-3.5" />
+		{/if}
+
+		{#if favicon}
+			<img
+				src={favicon}
+				alt=""
+				class="h-4 w-4 shrink-0 rounded-sm"
+				onerror={(e) => {
+					(e.currentTarget as HTMLImageElement).style.display = 'none';
+				}}
+			/>
+		{/if}
+
+		<span class="font-medium">{displayName}</span>
+
+		<span class="text-xs text-muted-foreground">
+			({serverRes.resources.length})
+		</span>
+
+		{#if serverRes.loading}
+			<Loader2 class="ml-auto h-3 w-3 animate-spin text-muted-foreground" />
+		{/if}
+	</Collapsible.Trigger>
+
+	<Collapsible.Content>
+		<div class="ml-4 flex flex-col gap-0.5 border-l border-border/50 pl-2">
+			{#if serverRes.error}
+				<div class="py-1 text-xs text-red-500">
+					Error: {serverRes.error}
+				</div>
+			{:else if !hasResources}
+				<div class="py-1 text-xs text-muted-foreground">No resources</div>
+			{:else}
+				{#each sortTreeChildren( [...resourceTree.children.values()] ) as child (child.resource?.uri || `${serverName}:${child.name}`)}
+					{@render renderTreeNode(child, 1, '')}
+				{/each}
+			{/if}
+		</div>
+	</Collapsible.Content>
+</Collapsible.Root>
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpResourceBrowser/mcp-resource-browser.ts b/tools/server/webui/src/lib/components/app/mcp/McpResourceBrowser/mcp-resource-browser.ts
new file mode 100644
index 00000000000..804fa7fe2fc
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpResourceBrowser/mcp-resource-browser.ts
@@ -0,0 +1,118 @@
+import type { MCPResource, MCPResourceInfo } from '$lib/types';
+import { parseResourcePath } from '$lib/utils';
+
+export interface ResourceTreeNode {
+	name: string;
+	resource?: MCPResourceInfo;
+	children: Map<string, ResourceTreeNode>;
+	isFiltered?: boolean;
+}
+
+function resourceMatchesSearch(resource: MCPResource, query: string): boolean {
+	return (
+		resource.title?.toLowerCase().includes(query) || resource.uri.toLowerCase().includes(query)
+	);
+}
+
+export function buildResourceTree(
+	resourceList: MCPResource[],
+	serverName: string,
+	searchQuery?: string
+): ResourceTreeNode {
+	const root: ResourceTreeNode = { name: 'root', children: new Map() };
+
+	if (!searchQuery || !searchQuery.trim()) {
+		for (const resource of resourceList) {
+			const pathParts = parseResourcePath(resource.uri);
+			let current = root;
+
+			for (let i = 0; i < pathParts.length - 1; i++) {
+				const part = pathParts[i];
+				if (!current.children.has(part)) {
+					current.children.set(part, { name: part, children: new Map() });
+				}
+				current = current.children.get(part)!;
+			}
+
+			const fileName = pathParts[pathParts.length - 1] || resource.name;
+			current.children.set(resource.uri, {
+				name: fileName,
+				resource: { ...resource, serverName },
+				children: new Map()
+			});
+		}
+
+		return root;
+	}
+
+	const query = searchQuery.toLowerCase();
+
+	// Build tree with filtering
+	for (const resource of resourceList) {
+		if (!resourceMatchesSearch(resource, query)) continue;
+
+		const pathParts = parseResourcePath(resource.uri);
+		let current = root;
+
+		for (let i = 0; i < pathParts.length - 1; i++) {
+			const part = pathParts[i];
+			if (!current.children.has(part)) {
+				current.children.set(part, { name: part, children: new Map(), isFiltered: true });
+			}
+			current = current.children.get(part)!;
+		}
+
+		const fileName = pathParts[pathParts.length - 1] || resource.name;
+
+		current.children.set(resource.uri, {
+			name: fileName,
+			resource: { ...resource, serverName },
+			children: new Map(),
+			isFiltered: true
+		});
+	}
+
+	function cleanupEmptyFolders(node: ResourceTreeNode): boolean {
+		if (node.resource) return true;
+
+		const toDelete: string[] = [];
+		for (const [name, child] of node.children.entries()) {
+			if (!cleanupEmptyFolders(child)) {
+				toDelete.push(name);
+			}
+		}
+
+		for (const name of toDelete) {
+			node.children.delete(name);
+		}
+
+		return node.children.size > 0;
+	}
+
+	cleanupEmptyFolders(root);
+
+	return root;
+}
+
+export function countTreeResources(node: ResourceTreeNode): number {
+	if (node.resource) return 1;
+	let count = 0;
+
+	for (const child of node.children.values()) {
+		count += countTreeResources(child);
+	}
+
+	return count;
+}
+
+export function sortTreeChildren(children: ResourceTreeNode[]): ResourceTreeNode[] {
+	return children.sort((a, b) => {
+		const aIsFolder = !a.resource && a.children.size > 0;
+		const bIsFolder = !b.resource && b.children.size > 0;
+
+		if (aIsFolder && !bIsFolder) return -1;
+		if (!aIsFolder && bIsFolder) return 1;
+
+		return a.name.localeCompare(b.name);
+	});
+}
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpResourcePreview.svelte b/tools/server/webui/src/lib/components/app/mcp/McpResourcePreview.svelte
new file mode 100644
index 00000000000..660ec473aed
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpResourcePreview.svelte
@@ -0,0 +1,167 @@
+<script lang="ts">
+	import { FileText, Loader2, AlertCircle, Download } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { cn } from '$lib/components/ui/utils';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import {
+		isImageMimeType,
+		createBase64DataUrl,
+		getResourceTextContent,
+		getResourceBlobContent,
+		downloadResourceContent
+	} from '$lib/utils';
+	import { MimeTypeApplication, MimeTypeText } from '$lib/enums';
+	import { ActionIconCopyToClipboard } from '$lib/components/app';
+	import type { MCPResourceInfo, MCPResourceContent } from '$lib/types';
+
+	interface Props {
+		resource: MCPResourceInfo | null;
+		class?: string;
+	}
+
+	let { resource, class: className }: Props = $props();
+
+	let content = $state<MCPResourceContent[] | null>(null);
+	let isLoading = $state(false);
+	let error = $state<string | null>(null);
+
+	$effect(() => {
+		if (resource) {
+			loadContent(resource.uri);
+		} else {
+			content = null;
+			error = null;
+		}
+	});
+
+	async function loadContent(uri: string) {
+		isLoading = true;
+		error = null;
+
+		try {
+			const result = await mcpStore.readResource(uri);
+			if (result) {
+				content = result;
+			} else {
+				error = 'Failed to load resource content';
+			}
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Unknown error';
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function handleDownload() {
+		const text = getResourceTextContent(content);
+		if (!text || !resource) return;
+		downloadResourceContent(
+			text,
+			resource.mimeType || MimeTypeText.PLAIN,
+			resource.name || 'resource.txt'
+		);
+	}
+</script>
+
+<div class={cn('flex flex-col gap-3', className)}>
+	{#if !resource}
+		<div class="flex flex-col items-center justify-center gap-2 py-8 text-muted-foreground">
+			<FileText class="h-8 w-8 opacity-50" />
+
+			<span class="text-sm">Select a resource to preview</span>
+		</div>
+	{:else}
+		<div class="flex items-start justify-between gap-2">
+			<div class="min-w-0 flex-1">
+				<h3 class="truncate font-medium">{resource.title || resource.name}</h3>
+
+				<p class="truncate text-xs text-muted-foreground">{resource.uri}</p>
+
+				{#if resource.description}
+					<p class="mt-1 text-sm text-muted-foreground">{resource.description}</p>
+				{/if}
+			</div>
+
+			<div class="flex items-center gap-1">
+				<ActionIconCopyToClipboard
+					text={getResourceTextContent(content)}
+					canCopy={!isLoading && !!getResourceTextContent(content)}
+					ariaLabel="Copy content"
+				/>
+
+				<Button
+					variant="ghost"
+					size="sm"
+					class="h-7 w-7 p-0"
+					onclick={handleDownload}
+					disabled={isLoading || !getResourceTextContent(content)}
+					title="Download content"
+				>
+					<Download class="h-3.5 w-3.5" />
+				</Button>
+			</div>
+		</div>
+
+		<div class="min-h-[200px] overflow-auto rounded-md border bg-muted/30 p-3 break-all">
+			{#if isLoading}
+				<div class="flex items-center justify-center py-8">
+					<Loader2 class="h-6 w-6 animate-spin text-muted-foreground" />
+				</div>
+			{:else if error}
+				<div class="flex flex-col items-center justify-center gap-2 py-8 text-red-500">
+					<AlertCircle class="h-6 w-6" />
+
+					<span class="text-sm">{error}</span>
+				</div>
+			{:else if content}
+				{@const textContent = getResourceTextContent(content)}
+				{@const blobContent = getResourceBlobContent(content)}
+
+				{#if textContent}
+					<pre class="font-mono text-xs break-words whitespace-pre-wrap">{textContent}</pre>
+				{/if}
+
+				{#each blobContent as blob (blob.uri)}
+					{#if isImageMimeType(blob.mimeType ?? MimeTypeApplication.OCTET_STREAM)}
+						<img
+							src={createBase64DataUrl(
+								blob.mimeType ?? MimeTypeApplication.OCTET_STREAM,
+								blob.blob
+							)}
+							alt="Resource content"
+							class="max-w-full rounded"
+						/>
+					{:else}
+						<div class="flex items-center gap-2 rounded bg-muted p-2 text-sm text-muted-foreground">
+							<FileText class="h-4 w-4" />
+
+							<span>Binary content ({blob.mimeType || 'unknown type'})</span>
+						</div>
+					{/if}
+				{/each}
+
+				{#if !textContent && blobContent.length === 0}
+					<div class="py-4 text-center text-sm text-muted-foreground">No content available</div>
+				{/if}
+			{/if}
+		</div>
+
+		{#if resource.mimeType || resource.annotations}
+			<div class="flex flex-wrap gap-2 text-xs text-muted-foreground">
+				{#if resource.mimeType}
+					<span class="rounded bg-muted px-1.5 py-0.5">{resource.mimeType}</span>
+				{/if}
+
+				{#if resource.annotations?.priority !== undefined}
+					<span class="rounded bg-muted px-1.5 py-0.5">
+						Priority: {resource.annotations.priority}
+					</span>
+				{/if}
+
+				<span class="rounded bg-muted px-1.5 py-0.5">
+					Server: {resource.serverName}
+				</span>
+			</div>
+		{/if}
+	{/if}
+</div>
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte
new file mode 100644
index 00000000000..6a7b56370e7
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte
@@ -0,0 +1,192 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import * as Card from '$lib/components/ui/card';
+	import { Skeleton } from '$lib/components/ui/skeleton';
+	import type { MCPServerSettingsEntry, HealthCheckState } from '$lib/types';
+	import { HealthCheckStatus } from '$lib/enums';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import {
+		McpServerCardActions,
+		McpServerCardDeleteDialog,
+		McpServerCardEditForm,
+		McpServerCardHeader,
+		McpServerCardToolsList,
+		McpConnectionLogs,
+		McpServerInfo
+	} from '$lib/components/app/mcp';
+
+	interface Props {
+		server: MCPServerSettingsEntry;
+		faviconUrl: string | null;
+		enabled?: boolean;
+		onToggle: (enabled: boolean) => void;
+		onUpdate: (updates: Partial<MCPServerSettingsEntry>) => void;
+		onDelete: () => void;
+	}
+
+	let { server, faviconUrl, enabled, onToggle, onUpdate, onDelete }: Props = $props();
+
+	let healthState = $derived<HealthCheckState>(mcpStore.getHealthCheckState(server.id));
+	let displayName = $derived(mcpStore.getServerLabel(server));
+	let isIdle = $derived(healthState.status === HealthCheckStatus.IDLE);
+	let isHealthChecking = $derived(healthState.status === HealthCheckStatus.CONNECTING);
+	let isConnected = $derived(healthState.status === HealthCheckStatus.SUCCESS);
+	let isError = $derived(healthState.status === HealthCheckStatus.ERROR);
+	let showSkeleton = $derived(isIdle || isHealthChecking);
+	let errorMessage = $derived(
+		healthState.status === HealthCheckStatus.ERROR ? healthState.message : undefined
+	);
+	let tools = $derived(healthState.status === HealthCheckStatus.SUCCESS ? healthState.tools : []);
+
+	let connectionLogs = $derived(
+		healthState.status === HealthCheckStatus.CONNECTING ||
+			healthState.status === HealthCheckStatus.SUCCESS ||
+			healthState.status === HealthCheckStatus.ERROR
+			? healthState.logs
+			: []
+	);
+
+	let successState = $derived(
+		healthState.status === HealthCheckStatus.SUCCESS ? healthState : null
+	);
+	let serverInfo = $derived(successState?.serverInfo);
+	let capabilities = $derived(successState?.capabilities);
+	let transportType = $derived(successState?.transportType);
+	let protocolVersion = $derived(successState?.protocolVersion);
+	let connectionTimeMs = $derived(successState?.connectionTimeMs);
+	let instructions = $derived(successState?.instructions);
+
+	let isEditing = $derived(!server.url.trim());
+	let showDeleteDialog = $state(false);
+	let editFormRef: McpServerCardEditForm | null = $state(null);
+
+	function handleHealthCheck() {
+		mcpStore.runHealthCheck(server);
+	}
+
+	async function startEditing() {
+		isEditing = true;
+		await tick();
+		editFormRef?.setInitialValues(server.url, server.headers || '', server.useProxy || false);
+	}
+
+	function cancelEditing() {
+		if (server.url.trim()) {
+			isEditing = false;
+		} else {
+			onDelete();
+		}
+	}
+
+	function saveEditing(url: string, headers: string, useProxy: boolean) {
+		onUpdate({
+			url: url,
+			headers: headers || undefined,
+			useProxy: useProxy
+		});
+		isEditing = false;
+
+		if (server.enabled && url) {
+			setTimeout(() => mcpStore.runHealthCheck({ ...server, url, useProxy }), 100);
+		}
+	}
+
+	function handleDeleteClick() {
+		showDeleteDialog = true;
+	}
+</script>
+
+<Card.Root class="!gap-3 bg-muted/30 p-4">
+	{#if isEditing}
+		<McpServerCardEditForm
+			bind:this={editFormRef}
+			serverId={server.id}
+			serverUrl={server.url}
+			serverUseProxy={server.useProxy}
+			onSave={saveEditing}
+			onCancel={cancelEditing}
+		/>
+	{:else}
+		<McpServerCardHeader
+			{displayName}
+			{faviconUrl}
+			enabled={enabled ?? server.enabled}
+			disabled={isError}
+			{onToggle}
+			{serverInfo}
+			{capabilities}
+			{transportType}
+		/>
+
+		{#if isError && errorMessage}
+			<p class="text-xs text-destructive">{errorMessage}</p>
+		{/if}
+
+		{#if isConnected && serverInfo?.description}
+			<p class="line-clamp-2 text-xs text-muted-foreground">
+				{serverInfo.description}
+			</p>
+		{/if}
+
+		<div class="grid gap-3">
+			{#if showSkeleton}
+				<div class="space-y-2">
+					<div class="flex items-center gap-2">
+						<Skeleton class="h-4 w-4 rounded" />
+						<Skeleton class="h-3 w-24" />
+					</div>
+					<div class="flex flex-wrap gap-1.5">
+						<Skeleton class="h-5 w-16 rounded-full" />
+						<Skeleton class="h-5 w-20 rounded-full" />
+						<Skeleton class="h-5 w-14 rounded-full" />
+					</div>
+				</div>
+
+				<div class="space-y-1.5">
+					<div class="flex items-center gap-2">
+						<Skeleton class="h-4 w-4 rounded" />
+						<Skeleton class="h-3 w-32" />
+					</div>
+				</div>
+			{:else}
+				{#if isConnected && instructions}
+					<McpServerInfo {instructions} />
+				{/if}
+
+				{#if tools.length > 0}
+					<McpServerCardToolsList {tools} />
+				{/if}
+
+				{#if connectionLogs.length > 0}
+					<McpConnectionLogs logs={connectionLogs} {connectionTimeMs} />
+				{/if}
+			{/if}
+		</div>
+
+		<div class="flex justify-between gap-4">
+			{#if showSkeleton}
+				<Skeleton class="h-3 w-28" />
+			{:else if protocolVersion}
+				<div class="flex flex-wrap items-center gap-1">
+					<span class="text-[10px] text-muted-foreground">
+						Protocol version: {protocolVersion}
+					</span>
+				</div>
+			{/if}
+
+			<McpServerCardActions
+				{isHealthChecking}
+				onEdit={startEditing}
+				onRefresh={handleHealthCheck}
+				onDelete={handleDeleteClick}
+			/>
+		</div>
+	{/if}
+</Card.Root>
+
+<McpServerCardDeleteDialog
+	bind:open={showDeleteDialog}
+	{displayName}
+	onOpenChange={(open) => (showDeleteDialog = open)}
+	onConfirm={onDelete}
+/>
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardActions.svelte b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardActions.svelte
new file mode 100644
index 00000000000..6f137fa21b7
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardActions.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Trash2, RefreshCw, Pencil } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+
+	interface Props {
+		isHealthChecking: boolean;
+		onEdit: () => void;
+		onRefresh: () => void;
+		onDelete: () => void;
+	}
+
+	let { isHealthChecking, onEdit, onRefresh, onDelete }: Props = $props();
+</script>
+
+<div class="flex shrink-0 items-center gap-1">
+	<Button variant="ghost" size="icon" class="h-7 w-7" onclick={onEdit} aria-label="Edit">
+		<Pencil class="h-3.5 w-3.5" />
+	</Button>
+
+	<Button
+		variant="ghost"
+		size="icon"
+		class="h-7 w-7"
+		onclick={onRefresh}
+		disabled={isHealthChecking}
+		aria-label="Refresh"
+	>
+		<RefreshCw class="h-3.5 w-3.5" />
+	</Button>
+
+	<Button
+		variant="ghost"
+		size="icon"
+		class="hover:text-destructive-foreground h-7 w-7 text-destructive hover:bg-destructive/10"
+		onclick={onDelete}
+		aria-label="Delete"
+	>
+		<Trash2 class="h-3.5 w-3.5" />
+	</Button>
+</div>
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardDeleteDialog.svelte b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardDeleteDialog.svelte
new file mode 100644
index 00000000000..8f650148a2f
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardDeleteDialog.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+
+	interface Props {
+		open: boolean;
+		displayName: string;
+		onOpenChange: (open: boolean) => void;
+		onConfirm: () => void;
+	}
+
+	let { open = $bindable(), displayName, onOpenChange, onConfirm }: Props = $props();
+</script>
+
+<AlertDialog.Root bind:open {onOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Delete Server</AlertDialog.Title>
+
+			<AlertDialog.Description>
+				Are you sure you want to delete <strong>{displayName}</strong>? This action cannot be
+				undone.
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+
+			<AlertDialog.Action
+				class="text-destructive-foreground bg-destructive hover:bg-destructive/90"
+				onclick={onConfirm}
+			>
+				Delete
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardEditForm.svelte b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardEditForm.svelte
new file mode 100644
index 00000000000..6727a90006b
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardEditForm.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { McpServerForm } from '$lib/components/app/mcp';
+
+	interface Props {
+		serverId: string;
+		serverUrl: string;
+		serverUseProxy?: boolean;
+		onSave: (url: string, headers: string, useProxy: boolean) => void;
+		onCancel: () => void;
+	}
+
+	let { serverId, serverUrl, serverUseProxy = false, onSave, onCancel }: Props = $props();
+
+	let editUrl = $derived(serverUrl);
+	let editHeaders = $state('');
+	let editUseProxy = $derived(serverUseProxy);
+
+	let urlError = $derived.by(() => {
+		if (!editUrl.trim()) return 'URL is required';
+		try {
+			new URL(editUrl);
+			return null;
+		} catch {
+			return 'Invalid URL format';
+		}
+	});
+
+	let canSave = $derived(!urlError);
+
+	function handleSave() {
+		if (!canSave) return;
+		onSave(editUrl.trim(), editHeaders.trim(), editUseProxy);
+	}
+
+	export function setInitialValues(url: string, headers: string, useProxy: boolean) {
+		editUrl = url;
+		editHeaders = headers;
+		editUseProxy = useProxy;
+	}
+</script>
+
+<div class="space-y-4">
+	<p class="font-medium">Configure Server</p>
+
+	<McpServerForm
+		url={editUrl}
+		headers={editHeaders}
+		useProxy={editUseProxy}
+		onUrlChange={(v) => (editUrl = v)}
+		onHeadersChange={(v) => (editHeaders = v)}
+		onUseProxyChange={(v) => (editUseProxy = v)}
+		urlError={editUrl ? urlError : null}
+		id={serverId}
+	/>
+
+	<div class="flex items-center justify-end gap-2">
+		<Button variant="secondary" size="sm" onclick={onCancel}>Cancel</Button>
+
+		<Button size="sm" onclick={handleSave} disabled={!canSave}>
+			{serverUrl.trim() ? 'Update' : 'Add'}
+		</Button>
+	</div>
+</div>
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardHeader.svelte b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardHeader.svelte
new file mode 100644
index 00000000000..509bba5c45c
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardHeader.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { Cable, ExternalLink } from '@lucide/svelte';
+	import { Switch } from '$lib/components/ui/switch';
+	import type { MCPServerInfo, MCPCapabilitiesInfo } from '$lib/types';
+	import { MCPTransportType } from '$lib/enums';
+	import { MCP_TRANSPORT_LABELS, MCP_TRANSPORT_ICONS } from '$lib/constants/mcp';
+	import { Badge } from '$lib/components/ui/badge';
+	import { McpCapabilitiesBadges } from '$lib/components/app/mcp';
+
+	interface Props {
+		displayName: string;
+		faviconUrl: string | null;
+		enabled: boolean;
+		disabled?: boolean;
+		onToggle: (enabled: boolean) => void;
+		serverInfo?: MCPServerInfo;
+		capabilities?: MCPCapabilitiesInfo;
+		transportType?: MCPTransportType;
+	}
+
+	let {
+		displayName,
+		faviconUrl,
+		enabled,
+		disabled = false,
+		onToggle,
+		serverInfo,
+		capabilities,
+		transportType
+	}: Props = $props();
+</script>
+
+<div class="space-y-3">
+	<div class="flex items-start justify-between gap-3">
+		<div class="grid min-w-0 gap-3">
+			<div class="flex items-center gap-2 overflow-hidden">
+				{#if faviconUrl}
+					<img
+						src={faviconUrl}
+						alt=""
+						class="h-5 w-5 shrink-0 rounded"
+						onerror={(e) => {
+							(e.currentTarget as HTMLImageElement).style.display = 'none';
+						}}
+					/>
+				{:else}
+					<div class="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-muted">
+						<Cable class="h-3 w-3 text-muted-foreground" />
+					</div>
+				{/if}
+
+				<p class="min-w-0 shrink-0 truncate leading-none font-medium">{displayName}</p>
+
+				{#if serverInfo?.version}
+					<Badge variant="secondary" class="h-4 min-w-0 truncate px-1 text-[10px]">
+						v{serverInfo.version}
+					</Badge>
+				{/if}
+
+				{#if serverInfo?.websiteUrl}
+					<a
+						href={serverInfo.websiteUrl}
+						target="_blank"
+						rel="noopener noreferrer"
+						class="shrink-0 text-muted-foreground hover:text-foreground"
+						aria-label="Open website"
+					>
+						<ExternalLink class="h-3 w-3" />
+					</a>
+				{/if}
+			</div>
+
+			{#if capabilities || transportType}
+				<div class="flex flex-wrap items-center gap-1">
+					{#if transportType}
+						{@const TransportIcon = MCP_TRANSPORT_ICONS[transportType]}
+						<Badge variant="outline" class="h-5 gap-1 px-1.5 text-[10px]">
+							{#if TransportIcon}
+								<TransportIcon class="h-3 w-3" />
+							{/if}
+
+							{MCP_TRANSPORT_LABELS[transportType] || transportType}
+						</Badge>
+					{/if}
+
+					{#if capabilities}
+						<McpCapabilitiesBadges {capabilities} />
+					{/if}
+				</div>
+			{/if}
+		</div>
+
+		<div class="flex shrink-0 items-center pl-2">
+			<Switch checked={enabled} {disabled} onCheckedChange={onToggle} />
+		</div>
+	</div>
+</div>
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardToolsList.svelte b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardToolsList.svelte
new file mode 100644
index 00000000000..d0397c17a98
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpServerCard/McpServerCardToolsList.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { ChevronDown, ChevronRight } from '@lucide/svelte';
+	import * as Collapsible from '$lib/components/ui/collapsible';
+	import { Badge } from '$lib/components/ui/badge';
+
+	interface Tool {
+		name: string;
+		description?: string;
+	}
+
+	interface Props {
+		tools: Tool[];
+	}
+
+	let { tools }: Props = $props();
+
+	let isExpanded = $state(false);
+	let toolsCount = $derived(tools.length);
+</script>
+
+<Collapsible.Root bind:open={isExpanded}>
+	<Collapsible.Trigger
+		class="flex w-full items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+	>
+		{#if isExpanded}
+			<ChevronDown class="h-3.5 w-3.5" />
+		{:else}
+			<ChevronRight class="h-3.5 w-3.5" />
+		{/if}
+
+		<span>{toolsCount} tools available · Show details</span>
+	</Collapsible.Trigger>
+
+	<Collapsible.Content class="mt-2">
+		<div class="max-h-64 space-y-3 overflow-y-auto">
+			{#each tools as tool (tool.name)}
+				<div>
+					<Badge variant="secondary">{tool.name}</Badge>
+
+					{#if tool.description}
+						<p class="mt-1 text-xs text-muted-foreground">{tool.description}</p>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</Collapsible.Content>
+</Collapsible.Root>
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpServerCardSkeleton.svelte b/tools/server/webui/src/lib/components/app/mcp/McpServerCardSkeleton.svelte
new file mode 100644
index 00000000000..39a1372806a
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpServerCardSkeleton.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import { Skeleton } from '$lib/components/ui/skeleton';
+</script>
+
+<Card.Root class="grid gap-3 p-4">
+	<div class="flex items-center justify-between gap-4">
+		<div class="flex items-center gap-2">
+			<Skeleton class="h-5 w-5 rounded" />
+			<Skeleton class="h-5 w-28" />
+			<Skeleton class="h-5 w-12 rounded-full" />
+		</div>
+		<Skeleton class="h-6 w-11 rounded-full" />
+	</div>
+
+	<div class="flex flex-wrap gap-1.5">
+		<Skeleton class="h-5 w-14 rounded-full" />
+		<Skeleton class="h-5 w-12 rounded-full" />
+		<Skeleton class="h-5 w-16 rounded-full" />
+	</div>
+
+	<div class="space-y-1.5">
+		<Skeleton class="h-4 w-40" />
+		<Skeleton class="h-4 w-52" />
+	</div>
+
+	<Skeleton class="h-3.5 w-36" />
+
+	<div class="flex justify-end gap-2">
+		<Skeleton class="h-8 w-8 rounded" />
+		<Skeleton class="h-8 w-8 rounded" />
+		<Skeleton class="h-8 w-8 rounded" />
+	</div>
+</Card.Root>
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpServerForm.svelte b/tools/server/webui/src/lib/components/app/mcp/McpServerForm.svelte
new file mode 100644
index 00000000000..7bc547c05a3
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpServerForm.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { Input } from '$lib/components/ui/input';
+	import { Switch } from '$lib/components/ui/switch';
+	import { KeyValuePairs } from '$lib/components/app';
+	import type { KeyValuePair } from '$lib/types';
+	import { parseHeadersToArray, serializeHeaders } from '$lib/utils';
+	import { UrlPrefix } from '$lib/enums';
+	import { MCP_SERVER_URL_PLACEHOLDER } from '$lib/constants/mcp-form';
+
+	interface Props {
+		url: string;
+		headers: string;
+		useProxy?: boolean;
+		onUrlChange: (url: string) => void;
+		onHeadersChange: (headers: string) => void;
+		onUseProxyChange?: (useProxy: boolean) => void;
+		urlError?: string | null;
+		id?: string;
+	}
+
+	let {
+		url,
+		headers,
+		useProxy = false,
+		onUrlChange,
+		onHeadersChange,
+		onUseProxyChange,
+		urlError = null,
+		id = 'server'
+	}: Props = $props();
+
+	let isWebSocket = $derived(
+		url.toLowerCase().startsWith(UrlPrefix.WEBSOCKET) ||
+			url.toLowerCase().startsWith(UrlPrefix.WEBSOCKET_SECURE)
+	);
+
+	let headerPairs = $derived<KeyValuePair[]>(parseHeadersToArray(headers));
+
+	function updateHeaderPairs(newPairs: KeyValuePair[]) {
+		headerPairs = newPairs;
+		onHeadersChange(serializeHeaders(newPairs));
+	}
+</script>
+
+<div class="grid gap-3">
+	<div>
+		<label for="server-url-{id}" class="mb-2 block text-xs font-medium">
+			Server URL <span class="text-destructive">*</span>
+		</label>
+
+		<Input
+			id="server-url-{id}"
+			type="url"
+			placeholder={MCP_SERVER_URL_PLACEHOLDER}
+			value={url}
+			oninput={(e) => onUrlChange(e.currentTarget.value)}
+			class={urlError ? 'border-destructive' : ''}
+		/>
+
+		{#if urlError}
+			<p class="mt-1.5 text-xs text-destructive">{urlError}</p>
+		{/if}
+
+		{#if !isWebSocket && onUseProxyChange}
+			<label class="mt-3 flex cursor-pointer items-center gap-2">
+				<Switch
+					id="use-proxy-{id}"
+					checked={useProxy}
+					onCheckedChange={(checked) => onUseProxyChange?.(checked)}
+				/>
+
+				<span class="text-xs text-muted-foreground">Use llama-server proxy</span>
+			</label>
+		{/if}
+	</div>
+
+	<KeyValuePairs
+		class="mt-2"
+		pairs={headerPairs}
+		onPairsChange={updateHeaderPairs}
+		keyPlaceholder="Header name"
+		valuePlaceholder="Value"
+		addButtonLabel="Add"
+		emptyMessage="No custom headers configured."
+		sectionLabel="Custom Headers"
+		sectionLabelOptional={true}
+	/>
+</div>
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpServerInfo.svelte b/tools/server/webui/src/lib/components/app/mcp/McpServerInfo.svelte
new file mode 100644
index 00000000000..aecae6e57b0
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpServerInfo.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { ChevronDown, ChevronRight } from '@lucide/svelte';
+	import * as Collapsible from '$lib/components/ui/collapsible';
+
+	interface Props {
+		instructions?: string;
+		class?: string;
+	}
+
+	let { instructions, class: className }: Props = $props();
+
+	let isExpanded = $state(false);
+</script>
+
+{#if instructions}
+	<Collapsible.Root bind:open={isExpanded} class={className}>
+		<Collapsible.Trigger
+			class="flex w-full items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+		>
+			{#if isExpanded}
+				<ChevronDown class="h-3.5 w-3.5" />
+			{:else}
+				<ChevronRight class="h-3.5 w-3.5" />
+			{/if}
+
+			<span>Server instructions</span>
+		</Collapsible.Trigger>
+
+		<Collapsible.Content class="mt-2">
+			<p class="rounded bg-muted/50 p-2 text-xs text-muted-foreground">
+				{instructions}
+			</p>
+		</Collapsible.Content>
+	</Collapsible.Root>
+{/if}
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpServersSelector.svelte b/tools/server/webui/src/lib/components/app/mcp/McpServersSelector.svelte
new file mode 100644
index 00000000000..991ce1b8c66
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpServersSelector.svelte
@@ -0,0 +1,161 @@
+<script lang="ts">
+	import { Settings } from '@lucide/svelte';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import { Switch } from '$lib/components/ui/switch';
+	import { DropdownMenuSearchable, McpActiveServersAvatars } from '$lib/components/app';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { getFaviconUrl } from '$lib/utils';
+	import { HealthCheckStatus } from '$lib/enums';
+	import type { MCPServerSettingsEntry } from '$lib/types';
+
+	interface Props {
+		class?: string;
+		disabled?: boolean;
+		onSettingsClick?: () => void;
+	}
+
+	let { class: className = '', disabled = false, onSettingsClick }: Props = $props();
+
+	let searchQuery = $state('');
+	let mcpServers = $derived(mcpStore.getServersSorted().filter((s) => s.enabled));
+	let hasMcpServers = $derived(mcpServers.length > 0);
+	let enabledMcpServersForChat = $derived(
+		mcpServers.filter((s) => conversationsStore.isMcpServerEnabledForChat(s.id) && s.url.trim())
+	);
+	let healthyEnabledMcpServers = $derived(
+		enabledMcpServersForChat.filter((s) => {
+			const healthState = mcpStore.getHealthCheckState(s.id);
+			return healthState.status !== HealthCheckStatus.ERROR;
+		})
+	);
+	let hasEnabledMcpServers = $derived(enabledMcpServersForChat.length > 0);
+	let mcpFavicons = $derived(
+		healthyEnabledMcpServers
+			.slice(0, 3)
+			.map((s) => ({ id: s.id, url: getFaviconUrl(s.url) }))
+			.filter((f) => f.url !== null)
+	);
+	let filteredMcpServers = $derived.by(() => {
+		const query = searchQuery.toLowerCase().trim();
+		if (query) {
+			return mcpServers.filter((s) => {
+				const name = getServerLabel(s).toLowerCase();
+				const url = s.url.toLowerCase();
+				return name.includes(query) || url.includes(query);
+			});
+		}
+		return mcpServers;
+	});
+
+	function getServerLabel(server: MCPServerSettingsEntry): string {
+		return mcpStore.getServerLabel(server);
+	}
+
+	function handleDropdownOpen(open: boolean) {
+		if (open) {
+			mcpStore.runHealthChecksForServers(mcpServers);
+		}
+	}
+
+	function isServerEnabledForChat(serverId: string): boolean {
+		return conversationsStore.isMcpServerEnabledForChat(serverId);
+	}
+
+	async function toggleServerForChat(serverId: string) {
+		await conversationsStore.toggleMcpServerForChat(serverId);
+	}
+</script>
+
+{#if hasMcpServers && hasEnabledMcpServers && mcpFavicons.length > 0}
+	<DropdownMenu.Root
+		onOpenChange={(open) => {
+			if (!open) {
+				searchQuery = '';
+			}
+			handleDropdownOpen(open);
+		}}
+	>
+		<DropdownMenu.Trigger
+			{disabled}
+			onclick={(e) => {
+				e.preventDefault();
+				e.stopPropagation();
+			}}
+		>
+			<button
+				type="button"
+				class="inline-flex cursor-pointer items-center rounded-sm py-1 disabled:cursor-not-allowed disabled:opacity-60"
+				{disabled}
+				aria-label="MCP Servers"
+			>
+				<McpActiveServersAvatars class={className} />
+			</button>
+		</DropdownMenu.Trigger>
+
+		<DropdownMenu.Content align="start" class="w-72 pt-0">
+			<DropdownMenuSearchable
+				bind:searchValue={searchQuery}
+				placeholder="Search servers..."
+				emptyMessage="No servers found"
+				isEmpty={filteredMcpServers.length === 0}
+			>
+				<div class="max-h-64 overflow-y-auto">
+					{#each filteredMcpServers as server (server.id)}
+						{@const healthState = mcpStore.getHealthCheckState(server.id)}
+						{@const hasError = healthState.status === HealthCheckStatus.ERROR}
+						{@const isEnabledForChat = isServerEnabledForChat(server.id)}
+
+						<button
+							type="button"
+							class="flex w-full items-center justify-between gap-2 px-2 py-2 text-left transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+							onclick={() => !hasError && toggleServerForChat(server.id)}
+							disabled={hasError}
+						>
+							<div class="flex min-w-0 flex-1 items-center gap-2">
+								{#if getFaviconUrl(server.url)}
+									<img
+										src={getFaviconUrl(server.url)}
+										alt=""
+										class="h-4 w-4 shrink-0 rounded-sm"
+										onerror={(e) => {
+											(e.currentTarget as HTMLImageElement).style.display = 'none';
+										}}
+									/>
+								{/if}
+
+								<span class="truncate text-sm">{getServerLabel(server)}</span>
+
+								{#if hasError}
+									<span
+										class="shrink-0 rounded bg-destructive/15 px-1.5 py-0.5 text-xs text-destructive"
+									>
+										Error
+									</span>
+								{/if}
+							</div>
+
+							<Switch
+								checked={isEnabledForChat}
+								disabled={hasError}
+								onclick={(e: MouseEvent) => e.stopPropagation()}
+								onCheckedChange={() => toggleServerForChat(server.id)}
+							/>
+						</button>
+					{/each}
+				</div>
+
+				{#snippet footer()}
+					<DropdownMenu.Item
+						class="flex cursor-pointer items-center gap-2"
+						onclick={onSettingsClick}
+					>
+						<Settings class="h-4 w-4" />
+
+						<span>Manage MCP Servers</span>
+					</DropdownMenu.Item>
+				{/snippet}
+			</DropdownMenuSearchable>
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+{/if}
diff --git a/tools/server/webui/src/lib/components/app/mcp/McpServersSettings.svelte b/tools/server/webui/src/lib/components/app/mcp/McpServersSettings.svelte
new file mode 100644
index 00000000000..79bdfc9bf92
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/McpServersSettings.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+	import { Plus } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Card from '$lib/components/ui/card';
+	import { getFaviconUrl } from '$lib/utils';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { McpServerCard, McpServerCardSkeleton, McpServerForm } from '$lib/components/app/mcp';
+	import { MCP_SERVER_ID_PREFIX } from '$lib/constants/mcp';
+
+	let servers = $derived(mcpStore.getServersSorted());
+
+	let initialLoadComplete = $state(false);
+
+	$effect(() => {
+		if (initialLoadComplete) return;
+
+		const allChecked =
+			servers.length > 0 &&
+			servers.every((server) => {
+				const state = mcpStore.getHealthCheckState(server.id);
+
+				return state.status === 'success' || state.status === 'error';
+			});
+
+		if (allChecked) {
+			initialLoadComplete = true;
+		}
+	});
+
+	let isAddingServer = $state(false);
+	let newServerUrl = $state('');
+	let newServerHeaders = $state('');
+	let newServerUrlError = $derived.by(() => {
+		if (!newServerUrl.trim()) return 'URL is required';
+		try {
+			new URL(newServerUrl);
+
+			return null;
+		} catch {
+			return 'Invalid URL format';
+		}
+	});
+
+	function showAddServerForm() {
+		isAddingServer = true;
+		newServerUrl = '';
+		newServerHeaders = '';
+	}
+
+	function cancelAddServer() {
+		isAddingServer = false;
+		newServerUrl = '';
+		newServerHeaders = '';
+	}
+
+	function saveNewServer() {
+		if (newServerUrlError) return;
+
+		const newServerId = crypto.randomUUID
+			? crypto.randomUUID()
+			: `${MCP_SERVER_ID_PREFIX}-${Date.now()}`;
+
+		mcpStore.addServer({
+			id: newServerId,
+			enabled: true,
+			url: newServerUrl.trim(),
+			headers: newServerHeaders.trim() || undefined
+		});
+
+		conversationsStore.setMcpServerOverride(newServerId, true);
+
+		isAddingServer = false;
+		newServerUrl = '';
+		newServerHeaders = '';
+	}
+</script>
+
+<div class="space-y-4">
+	<div class="flex items-start justify-between gap-4">
+		<div>
+			<h4 class="text-base font-semibold">Manage Servers</h4>
+		</div>
+
+		{#if !isAddingServer}
+			<Button variant="outline" size="sm" class="shrink-0" onclick={showAddServerForm}>
+				<Plus class="h-4 w-4" />
+
+				Add New Server
+			</Button>
+		{/if}
+	</div>
+
+	{#if isAddingServer}
+		<Card.Root class="bg-muted/30 p-4">
+			<div class="space-y-4">
+				<p class="font-medium">Add New Server</p>
+
+				<McpServerForm
+					url={newServerUrl}
+					headers={newServerHeaders}
+					onUrlChange={(v) => (newServerUrl = v)}
+					onHeadersChange={(v) => (newServerHeaders = v)}
+					urlError={newServerUrl ? newServerUrlError : null}
+					id="new-server"
+				/>
+
+				<div class="flex items-center justify-end gap-2">
+					<Button variant="secondary" size="sm" onclick={cancelAddServer}>Cancel</Button>
+
+					<Button
+						variant="default"
+						size="sm"
+						onclick={saveNewServer}
+						disabled={!!newServerUrlError}
+						aria-label="Save"
+					>
+						Add
+					</Button>
+				</div>
+			</div>
+		</Card.Root>
+	{/if}
+
+	{#if servers.length === 0 && !isAddingServer}
+		<div class="rounded-md border border-dashed p-4 text-sm text-muted-foreground">
+			No MCP Servers configured yet. Add one to enable agentic features.
+		</div>
+	{/if}
+
+	{#if servers.length > 0}
+		<div class="space-y-3">
+			{#each servers as server (server.id)}
+				{#if !initialLoadComplete}
+					<McpServerCardSkeleton />
+				{:else}
+					<McpServerCard
+						{server}
+						faviconUrl={getFaviconUrl(server.url)}
+						enabled={conversationsStore.isMcpServerEnabledForChat(server.id)}
+						onToggle={async () => await conversationsStore.toggleMcpServerForChat(server.id)}
+						onUpdate={(updates) => mcpStore.updateServer(server.id, updates)}
+						onDelete={() => mcpStore.removeServer(server.id)}
+					/>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+</div>
diff --git a/tools/server/webui/src/lib/components/app/mcp/index.ts b/tools/server/webui/src/lib/components/app/mcp/index.ts
new file mode 100644
index 00000000000..0fd8c5813e6
--- /dev/null
+++ b/tools/server/webui/src/lib/components/app/mcp/index.ts
@@ -0,0 +1,248 @@
+/**
+ *
+ * MCP (Model Context Protocol)
+ *
+ * Components for managing MCP server connections and displaying server status.
+ * MCP enables agentic workflows by connecting to external tool servers.
+ *
+ * The MCP system integrates with:
+ * - `mcpStore` for server CRUD operations and health checks
+ * - `conversationsStore` for per-conversation server enable/disable
+ *
+ */
+
+/**
+ * **McpServersSettings** - MCP servers configuration section
+ *
+ * Settings section for configuring MCP server connections.
+ * Displays server cards with status, tools, and management actions.
+ * Used within the MCP tab of ChatSettings.
+ *
+ * **Architecture:**
+ * - Manages add server form state locally
+ * - Delegates server display to McpServerCard components
+ * - Integrates with mcpStore for server operations
+ * - Shows skeleton loading states during health checks
+ *
+ * **Features:**
+ * - Add new MCP servers by URL with validation
+ * - Server cards with connection status indicators
+ * - Health check status (connected/disconnected/error)
+ * - Tools list per server showing available capabilities
+ * - Enable/disable toggle per conversation
+ * - Edit/delete server actions
+ * - Skeleton loading states during connection
+ * - Empty state with helpful message
+ *
+ * @example
+ * ```svelte
+ * <McpServersSettings />
+ * ```
+ */
+export { default as McpServersSettings } from './McpServersSettings.svelte';
+
+/**
+ * **McpActiveServersAvatars** - Active MCP servers indicator
+ *
+ * Compact avatar row showing favicons of active MCP servers.
+ * Displays up to 3 server icons with "+N" counter for additional servers.
+ * Clickable to open MCP settings dialog.
+ *
+ * **Architecture:**
+ * - Filters servers by enabled status and health check
+ * - Fetches favicons from server URLs
+ * - Integrates with conversationsStore for per-chat server state
+ *
+ * **Features:**
+ * - Overlapping favicon avatars (max 3 visible)
+ * - "+N" counter for additional servers
+ * - Click handler for settings navigation
+ * - Disabled state support
+ * - Only shows healthy, enabled servers
+ *
+ * @example
+ * ```svelte
+ * <McpActiveServersAvatars
+ *   onSettingsClick={() => showMcpSettings = true}
+ * />
+ * ```
+ */
+export { default as McpActiveServersAvatars } from './McpActiveServersAvatars.svelte';
+
+/**
+ * **McpServersSelector** - Quick MCP server toggle dropdown
+ *
+ * Compact dropdown for quickly enabling/disabling MCP servers for the current chat.
+ * Uses McpActiveServersAvatars as trigger and shows searchable server list with switches.
+ *
+ * **Architecture:**
+ * - Uses DropdownMenuSearchable for searchable dropdown UI
+ * - McpActiveServersAvatars as the trigger element
+ * - Integrates with conversationsStore for per-chat toggle
+ * - Runs health checks on dropdown open
+ *
+ * **Features:**
+ * - Searchable server list by name/URL
+ * - Switch toggles matching McpServersSettings behavior
+ * - Error state display for unhealthy servers
+ * - Footer link to full MCP settings dialog
+ *
+ * @example
+ * ```svelte
+ * <McpServersSelector
+ *   onSettingsClick={() => showMcpSettings = true}
+ * />
+ * ```
+ */
+export { default as McpServersSelector } from './McpServersSelector.svelte';
+
+/**
+ * **McpCapabilitiesBadges** - Server capabilities display
+ *
+ * Displays MCP server capabilities as colored badges.
+ * Shows which features the server supports (tools, resources, prompts, etc.).
+ *
+ * **Features:**
+ * - Tools badge (green) - server provides callable tools
+ * - Resources badge (blue) - server provides data resources
+ * - Prompts badge (purple) - server provides prompt templates
+ * - Logging badge (orange) - server supports logging
+ * - Completions badge (cyan) - server provides completions
+ * - Tasks badge (pink) - server supports task management
+ */
+export { default as McpCapabilitiesBadges } from './McpCapabilitiesBadges.svelte';
+
+/**
+ * **McpConnectionLogs** - Connection log viewer
+ *
+ * Collapsible panel showing MCP server connection logs.
+ * Displays timestamped log entries with level-based styling.
+ *
+ * **Features:**
+ * - Collapsible log list with entry count
+ * - Connection time display in milliseconds
+ * - Log level icons and color coding
+ * - Scrollable log container with max height
+ * - Monospace font for log readability
+ */
+export { default as McpConnectionLogs } from './McpConnectionLogs.svelte';
+
+/**
+ * **McpServerForm** - Server URL and headers input form
+ *
+ * Reusable form for entering MCP server connection details.
+ * Used in both add new server and edit server flows.
+ *
+ * **Features:**
+ * - URL input with validation error display
+ * - Custom headers key-value pairs editor
+ * - Controlled component with change callbacks
+ *
+ * @example
+ * ```svelte
+ * <McpServerForm
+ *   url={serverUrl}
+ *   headers={serverHeaders}
+ *   onUrlChange={(v) => serverUrl = v}
+ *   onHeadersChange={(v) => serverHeaders = v}
+ *   urlError={validationError}
+ * />
+ * ```
+ */
+export { default as McpServerForm } from './McpServerForm.svelte';
+
+/**
+ * MCP protocol logo SVG component. Renders the official MCP icon
+ * with customizable size via class and style props.
+ */
+export { default as McpLogo } from './McpLogo.svelte';
+
+/**
+ *
+ * SERVER CARD
+ *
+ * Components for displaying individual MCP server status and controls.
+ * McpServerCard is the main component, with sub-components for specific sections.
+ *
+ */
+
+/**
+ * **McpServerCard** - Individual server display card
+ *
+ * Main component for displaying a single MCP server with all its details.
+ * Manages edit mode, delete confirmation, and health check actions.
+ *
+ * **Architecture:**
+ * - Composes header, tools list, logs, and actions sub-components
+ * - Manages local edit/delete state
+ * - Reads health state from mcpStore
+ * - Triggers health checks via mcpStore
+ *
+ * **Features:**
+ * - Server header with favicon, name, version, and toggle
+ * - Capabilities badges display
+ * - Tools list with descriptions
+ * - Connection logs viewer
+ * - Edit form for URL and headers
+ * - Delete confirmation dialog
+ * - Skeleton loading states
+ */
+export { default as McpServerCard } from './McpServerCard/McpServerCard.svelte';
+
+/** Server card header with favicon, name, version badge, and enable toggle. */
+export { default as McpServerCardHeader } from './McpServerCard/McpServerCardHeader.svelte';
+
+/** Action buttons row: edit, refresh, delete. */
+export { default as McpServerCardActions } from './McpServerCard/McpServerCardActions.svelte';
+
+/** Collapsible tools list showing available server tools with descriptions. */
+export { default as McpServerCardToolsList } from './McpServerCard/McpServerCardToolsList.svelte';
+
+/** Inline edit form for server URL and custom headers. */
+export { default as McpServerCardEditForm } from './McpServerCard/McpServerCardEditForm.svelte';
+
+/** Delete confirmation dialog with server name display. */
+export { default as McpServerCardDeleteDialog } from './McpServerCard/McpServerCardDeleteDialog.svelte';
+
+/** Skeleton loading state for server card during health checks. */
+export { default as McpServerCardSkeleton } from './McpServerCardSkeleton.svelte';
+
+/**
+ * **McpServerInfo** - Server instructions display
+ *
+ * Collapsible panel showing server-provided instructions.
+ * Displays guidance text from the MCP server for users.
+ */
+export { default as McpServerInfo } from './McpServerInfo.svelte';
+
+/**
+ * **McpResourceBrowser** - MCP resources tree browser
+ *
+ * Tree view component showing resources grouped by server.
+ * Supports resource selection and quick attach actions.
+ *
+ * **Features:**
+ * - Collapsible server sections
+ * - Resource icons based on MIME type
+ * - Resource selection highlighting
+ * - Quick attach button per resource
+ * - Refresh all resources action
+ * - Loading states per server
+ */
+export { default as McpResourceBrowser } from './McpResourceBrowser/McpResourceBrowser.svelte';
+
+/**
+ * **McpResourcePreview** - MCP resource content preview
+ *
+ * Preview panel showing resource content with metadata.
+ * Supports text and binary content display.
+ *
+ * **Features:**
+ * - Text content display with monospace formatting
+ * - Image preview for image MIME types
+ * - Copy to clipboard action
+ * - Download content action
+ * - Resource metadata display (MIME type, priority, server)
+ * - Loading and error states
+ */
+export { default as McpResourcePreview } from './McpResourcePreview.svelte';
diff --git a/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte b/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte
index ec27293078e..f6b16408ca1 100644
--- a/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte
+++ b/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte
@@ -31,8 +31,6 @@
 		forceForegroundText?: boolean;
 		/** When true, user's global selection takes priority over currentModel (for form selector) */
 		useGlobalSelection?: boolean;
-		/** Optional compatibility prop for context-aware selectors. */
-		upToMessageId?: string;
 	}
 
 	let {
@@ -41,9 +39,7 @@
 		onModelChange,
 		disabled = false,
 		forceForegroundText = false,
-		useGlobalSelection = false,
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		upToMessageId: _upToMessageId = undefined
+		useGlobalSelection = false
 	}: Props = $props();
 
 	let options = $derived(modelOptions());
diff --git a/tools/server/webui/src/lib/constants/agentic.ts b/tools/server/webui/src/lib/constants/agentic.ts
new file mode 100644
index 00000000000..a917b8d6262
--- /dev/null
+++ b/tools/server/webui/src/lib/constants/agentic.ts
@@ -0,0 +1,57 @@
+import type { AgenticConfig } from '$lib/types/agentic';
+
+export const ATTACHMENT_SAVED_REGEX = /\[Attachment saved: ([^\]]+)\]/;
+
+export const NEWLINE_SEPARATOR = '\n';
+
+export const TURN_LIMIT_MESSAGE = '\n\n```\nTurn limit reached\n```\n';
+
+export const LLM_ERROR_BLOCK_START = '\n\n```\nUpstream LLM error:\n';
+export const LLM_ERROR_BLOCK_END = '\n```\n';
+
+export const DEFAULT_AGENTIC_CONFIG: AgenticConfig = {
+	enabled: true,
+	maxTurns: 100,
+	maxToolPreviewLines: 25
+} as const;
+
+// Agentic tool call tag markers
+export const AGENTIC_TAGS = {
+	TOOL_CALL_START: '<<<AGENTIC_TOOL_CALL_START>>>',
+	TOOL_CALL_END: '<<<AGENTIC_TOOL_CALL_END>>>',
+	TOOL_NAME_PREFIX: '<<<TOOL_NAME:',
+	TOOL_ARGS_START: '<<<TOOL_ARGS_START>>>',
+	TOOL_ARGS_END: '<<<TOOL_ARGS_END>>>',
+	TAG_SUFFIX: '>>>'
+} as const;
+
+export const REASONING_TAGS = {
+	START: '<<<reasoning_content_start>>>',
+	END: '<<<reasoning_content_end>>>'
+} as const;
+
+// Regex for trimming leading/trailing newlines
+export const TRIM_NEWLINES_REGEX = /^\n+|\n+$/g;
+
+// Regex patterns for parsing agentic content
+export const AGENTIC_REGEX = {
+	// Matches completed tool calls (with END marker)
+	COMPLETED_TOOL_CALL:
+		/<<<AGENTIC_TOOL_CALL_START>>>\n<<<TOOL_NAME:(.+?)>>>\n<<<TOOL_ARGS_START>>>([\s\S]*?)<<<TOOL_ARGS_END>>>([\s\S]*?)<<<AGENTIC_TOOL_CALL_END>>>/g,
+	// Matches pending tool call (has NAME and ARGS but no END)
+	PENDING_TOOL_CALL:
+		/<<<AGENTIC_TOOL_CALL_START>>>\n<<<TOOL_NAME:(.+?)>>>\n<<<TOOL_ARGS_START>>>([\s\S]*?)<<<TOOL_ARGS_END>>>([\s\S]*)$/,
+	// Matches partial tool call (has START and NAME, ARGS still streaming)
+	PARTIAL_WITH_NAME:
+		/<<<AGENTIC_TOOL_CALL_START>>>\n<<<TOOL_NAME:(.+?)>>>\n<<<TOOL_ARGS_START>>>([\s\S]*)$/,
+	// Matches early tool call (just START marker)
+	EARLY_MATCH: /<<<AGENTIC_TOOL_CALL_START>>>([\s\S]*)$/,
+	// Matches partial marker at end of content
+	PARTIAL_MARKER: /<<<[A-Za-z_]*$/,
+	// Matches reasoning content blocks (including tags)
+	REASONING_BLOCK: /<<<reasoning_content_start>>>[\s\S]*?<<<reasoning_content_end>>>/g,
+	// Matches an opening reasoning tag and any remaining content (unterminated)
+	REASONING_OPEN: /<<<reasoning_content_start>>>[\s\S]*$/,
+	// Matches tool name inside content
+	TOOL_NAME_EXTRACT: /<<<TOOL_NAME:([^>]+)>>>/
+} as const;
diff --git a/tools/server/webui/src/lib/constants/attachment-labels.ts b/tools/server/webui/src/lib/constants/attachment-labels.ts
new file mode 100644
index 00000000000..be9999c0f9e
--- /dev/null
+++ b/tools/server/webui/src/lib/constants/attachment-labels.ts
@@ -0,0 +1,4 @@
+export const ATTACHMENT_LABEL_FILE = 'File';
+export const ATTACHMENT_LABEL_PDF_FILE = 'PDF File';
+export const ATTACHMENT_LABEL_MCP_PROMPT = 'MCP Prompt';
+export const ATTACHMENT_LABEL_MCP_RESOURCE = 'MCP Resource';
diff --git a/tools/server/webui/src/lib/constants/cache.ts b/tools/server/webui/src/lib/constants/cache.ts
index acdb7a64309..07fe8683414 100644
--- a/tools/server/webui/src/lib/constants/cache.ts
+++ b/tools/server/webui/src/lib/constants/cache.ts
@@ -3,31 +3,52 @@
  */
 
 /**
- * Default TTL (Time-To-Live) for cache entries in milliseconds.
+ * Default TTL (Time-To-Live) for cache entries in milliseconds
+ * @default 5 minutes
  */
 export const DEFAULT_CACHE_TTL_MS = 5 * 60 * 1000;
 
 /**
- * Default maximum number of entries in a cache.
+ * Default maximum number of entries in a cache
+ * @default 100
  */
 export const DEFAULT_CACHE_MAX_ENTRIES = 100;
 
 /**
- * TTL for model props cache in milliseconds.
+ * TTL for model props cache in milliseconds
+ * Props don't change frequently, so we can cache them longer
+ * @default 10 minutes
  */
 export const MODEL_PROPS_CACHE_TTL_MS = 10 * 60 * 1000;
 
 /**
- * Maximum number of model props to cache.
+ * Maximum number of model props to cache
+ * @default 50
  */
 export const MODEL_PROPS_CACHE_MAX_ENTRIES = 50;
 
 /**
- * Maximum number of inactive conversation states to keep in memory.
+ * Maximum number of MCP resources to cache
+ * @default 50
+ */
+export const MCP_RESOURCE_CACHE_MAX_ENTRIES = 50;
+
+/**
+ * TTL for MCP resource cache entries in milliseconds
+ * @default 5 minutes
+ */
+export const MCP_RESOURCE_CACHE_TTL_MS = 5 * 60 * 1000;
+
+/**
+ * Maximum number of inactive conversation states to keep in memory
+ * States for conversations beyond this limit will be cleaned up
+ * @default 10
  */
 export const MAX_INACTIVE_CONVERSATION_STATES = 10;
 
 /**
- * Maximum age (in ms) for inactive conversation states before cleanup.
+ * Maximum age (in ms) for inactive conversation states before cleanup
+ * States older than this will be removed during cleanup
+ * @default 30 minutes
  */
 export const INACTIVE_CONVERSATION_STATE_MAX_AGE_MS = 30 * 60 * 1000;
diff --git a/tools/server/webui/src/lib/constants/default-context.ts b/tools/server/webui/src/lib/constants/default-context.ts
deleted file mode 100644
index 78f31116e36..00000000000
--- a/tools/server/webui/src/lib/constants/default-context.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const DEFAULT_CONTEXT = 4096;
diff --git a/tools/server/webui/src/lib/constants/favicon.ts b/tools/server/webui/src/lib/constants/favicon.ts
new file mode 100644
index 00000000000..f0281f935c7
--- /dev/null
+++ b/tools/server/webui/src/lib/constants/favicon.ts
@@ -0,0 +1,2 @@
+export const GOOGLE_FAVICON_BASE_URL = 'https://www.google.com/s2/favicons';
+export const DEFAULT_FAVICON_SIZE = 32;
diff --git a/tools/server/webui/src/lib/constants/input-classes.ts b/tools/server/webui/src/lib/constants/input-classes.ts
deleted file mode 100644
index 2781fdbd72c..00000000000
--- a/tools/server/webui/src/lib/constants/input-classes.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { INPUT_CLASSES } from './css-classes';
diff --git a/tools/server/webui/src/lib/constants/mcp-form.ts b/tools/server/webui/src/lib/constants/mcp-form.ts
new file mode 100644
index 00000000000..5a3e8f1dca5
--- /dev/null
+++ b/tools/server/webui/src/lib/constants/mcp-form.ts
@@ -0,0 +1 @@
+export const MCP_SERVER_URL_PLACEHOLDER = 'https://mcp.example.com/sse';
diff --git a/tools/server/webui/src/lib/constants/mcp-resource.ts b/tools/server/webui/src/lib/constants/mcp-resource.ts
new file mode 100644
index 00000000000..6ef7fe6b38f
--- /dev/null
+++ b/tools/server/webui/src/lib/constants/mcp-resource.ts
@@ -0,0 +1,40 @@
+import { MimeTypeImage } from '$lib/enums';
+
+// File extension patterns for resource type detection
+export const IMAGE_FILE_EXTENSION_REGEX = /\.(png|jpg|jpeg|gif|svg|webp)$/i;
+export const CODE_FILE_EXTENSION_REGEX =
+	/\.(js|ts|json|yaml|yml|xml|html|css|py|rs|go|java|cpp|c|h|rb|sh|toml)$/i;
+export const TEXT_FILE_EXTENSION_REGEX = /\.(txt|md|log)$/i;
+
+// URI protocol prefix pattern
+export const PROTOCOL_PREFIX_REGEX = /^[a-z]+:\/\//;
+
+// File extension regex for display name extraction
+export const FILE_EXTENSION_REGEX = /\.[^.]+$/;
+
+// Separator regex for splitting display names (kebab-case/snake_case)
+export const DISPLAY_NAME_SEPARATOR_REGEX = /[-_]/;
+
+// Regex for matching base64-encoded data URIs
+export const DATA_URI_BASE64_REGEX = /^data:([^;]+);base64,([A-Za-z0-9+/]+=*)$/;
+
+// Prefix for MCP attachment filenames
+export const MCP_ATTACHMENT_NAME_PREFIX = 'mcp-attachment';
+
+// Prefix for MCP resource attachment IDs
+export const MCP_RESOURCE_ATTACHMENT_ID_PREFIX = 'res';
+
+// Default file extension for unknown image types
+export const DEFAULT_IMAGE_EXTENSION = 'img';
+
+/**
+ * Mapping from image MIME types to file extensions.
+ * Used for generating attachment filenames from MIME types.
+ */
+export const IMAGE_MIME_TO_EXTENSION: Record<string, string> = {
+	[MimeTypeImage.JPEG]: 'jpg',
+	[MimeTypeImage.JPG]: 'jpg',
+	[MimeTypeImage.PNG]: 'png',
+	[MimeTypeImage.GIF]: 'gif',
+	[MimeTypeImage.WEBP]: 'webp'
+} as const;
diff --git a/tools/server/webui/src/lib/constants/mcp.ts b/tools/server/webui/src/lib/constants/mcp.ts
new file mode 100644
index 00000000000..d211a0ab711
--- /dev/null
+++ b/tools/server/webui/src/lib/constants/mcp.ts
@@ -0,0 +1,34 @@
+import { Zap, Globe, Radio } from '@lucide/svelte';
+import { MCPTransportType } from '$lib/enums';
+import type { ClientCapabilities, Implementation } from '$lib/types';
+import type { Component } from 'svelte';
+
+export const DEFAULT_MCP_CONFIG = {
+	protocolVersion: '2025-06-18',
+	capabilities: { tools: { listChanged: true } } as ClientCapabilities,
+	clientInfo: { name: 'llama-webui-mcp', version: 'dev' } as Implementation,
+	requestTimeoutSeconds: 300, // 5 minutes for long-running tools
+	connectionTimeoutMs: 10_000 // 10 seconds for connection establishment
+} as const;
+
+export const MCP_SERVER_ID_PREFIX = 'LlamaCpp-WebUI-MCP-Server';
+export const DEFAULT_CLIENT_VERSION = '1.0.0';
+export const DEFAULT_IMAGE_MIME_TYPE = 'image/png';
+
+export const MCP_RECONNECT_INITIAL_DELAY = 1000;
+export const MCP_RECONNECT_BACKOFF_MULTIPLIER = 2;
+export const MCP_RECONNECT_MAX_DELAY = 30000;
+
+/** Human-readable labels for MCP transport types */
+export const MCP_TRANSPORT_LABELS: Record<MCPTransportType, string> = {
+	[MCPTransportType.WEBSOCKET]: 'WebSocket',
+	[MCPTransportType.STREAMABLE_HTTP]: 'HTTP',
+	[MCPTransportType.SSE]: 'SSE'
+};
+
+/** Icon components for MCP transport types */
+export const MCP_TRANSPORT_ICONS: Record<MCPTransportType, Component> = {
+	[MCPTransportType.WEBSOCKET]: Zap,
+	[MCPTransportType.STREAMABLE_HTTP]: Globe,
+	[MCPTransportType.SSE]: Radio
+};
diff --git a/tools/server/webui/src/lib/constants/settings-config.ts b/tools/server/webui/src/lib/constants/settings-config.ts
index 1b959f3b69f..a7e412d3cde 100644
--- a/tools/server/webui/src/lib/constants/settings-config.ts
+++ b/tools/server/webui/src/lib/constants/settings-config.ts
@@ -1,12 +1,14 @@
+import { ColorMode } from '$lib/enums/ui';
+import { Monitor, Moon, Sun } from '@lucide/svelte';
+
 export const SETTING_CONFIG_DEFAULT: Record<string, string | number | boolean> = {
 	// Note: in order not to introduce breaking changes, please keep the same data type (number, string, etc) if you want to change the default value. Do not use null or undefined for default value.
 	// Do not use nested objects, keep it single level. Prefix the key if you need to group them.
 	apiKey: '',
 	systemMessage: '',
 	showSystemMessage: true,
-	theme: 'system',
+	theme: ColorMode.SYSTEM,
 	showThoughtInProgress: false,
-	showToolCalls: false,
 	disableReasoningParsing: false,
 	showRawOutputSwitch: false,
 	keepStatsVisible: false,
@@ -20,6 +22,12 @@ export const SETTING_CONFIG_DEFAULT: Record<string, string | number | boolean> =
 	alwaysShowSidebarOnDesktop: false,
 	autoShowSidebarOnNewChat: true,
 	autoMicOnEmpty: false,
+	mcpServers: '[]',
+	mcpServerUsageStats: '{}', // JSON object: { [serverId]: usageCount }
+	agenticMaxTurns: 10,
+	agenticMaxToolPreviewLines: 25,
+	showToolCallInProgress: false,
+	alwaysShowAgenticTurns: false,
 	// make sure these default values are in sync with `common.h`
 	samplers: 'top_k;typ_p;top_p;min_p;temperature',
 	backend_sampling: false,
@@ -91,8 +99,6 @@ export const SETTING_CONFIG_INFO: Record<string, string> = {
 	max_tokens: 'The maximum number of token per output. Use -1 for infinite (no limit).',
 	custom: 'Custom JSON parameters to send to the API. Must be valid JSON format.',
 	showThoughtInProgress: 'Expand thought process by default when generating messages.',
-	showToolCalls:
-		'Display tool call labels and payloads from Harmony-compatible delta.tool_calls data below assistant messages.',
 	disableReasoningParsing:
 		'Send reasoning_format=none to prevent server-side extraction of reasoning tokens into separate field',
 	showRawOutputSwitch:
@@ -113,8 +119,24 @@ export const SETTING_CONFIG_INFO: Record<string, string> = {
 		'Automatically show sidebar when starting a new chat. Disable to keep the sidebar hidden until you click on it.',
 	autoMicOnEmpty:
 		'Automatically show microphone button instead of send button when textarea is empty for models with audio modality support.',
+	mcpServers:
+		'Configure MCP servers as a JSON list. Use the form in the MCP Client settings section to edit.',
+	mcpServerUsageStats:
+		'Usage statistics for MCP servers. Tracks how many times tools from each server have been used.',
+	agenticMaxTurns:
+		'Maximum number of tool execution cycles before stopping (prevents infinite loops).',
+	agenticMaxToolPreviewLines:
+		'Number of lines shown in tool output previews (last N lines). Only these previews and the final LLM response persist after the agentic loop completes.',
+	showToolCallInProgress:
+		'Automatically expand tool call details while executing and keep them expanded after completion.',
 	pyInterpreterEnabled:
 		'Enable Python interpreter using Pyodide. Allows running Python code in markdown code blocks.',
 	enableContinueGeneration:
 		'Enable "Continue" button for assistant messages. Currently works only with non-reasoning models.'
 };
+
+export const SETTINGS_COLOR_MODES_CONFIG = [
+	{ value: ColorMode.SYSTEM, label: 'System', icon: Monitor },
+	{ value: ColorMode.LIGHT, label: 'Light', icon: Sun },
+	{ value: ColorMode.DARK, label: 'Dark', icon: Moon }
+];
diff --git a/tools/server/webui/src/lib/constants/settings-keys.ts b/tools/server/webui/src/lib/constants/settings-keys.ts
new file mode 100644
index 00000000000..1cfc2b6e9e4
--- /dev/null
+++ b/tools/server/webui/src/lib/constants/settings-keys.ts
@@ -0,0 +1,57 @@
+/**
+ * Settings key constants for ChatSettings configuration.
+ *
+ * These keys correspond to properties in SettingsConfigType and are used
+ * in settings field configurations to ensure consistency.
+ */
+export const SETTINGS_KEYS = {
+	// General
+	THEME: 'theme',
+	API_KEY: 'apiKey',
+	SYSTEM_MESSAGE: 'systemMessage',
+	PASTE_LONG_TEXT_TO_FILE_LEN: 'pasteLongTextToFileLen',
+	COPY_TEXT_ATTACHMENTS_AS_PLAIN_TEXT: 'copyTextAttachmentsAsPlainText',
+	ENABLE_CONTINUE_GENERATION: 'enableContinueGeneration',
+	PDF_AS_IMAGE: 'pdfAsImage',
+	ASK_FOR_TITLE_CONFIRMATION: 'askForTitleConfirmation',
+	// Display
+	SHOW_MESSAGE_STATS: 'showMessageStats',
+	SHOW_THOUGHT_IN_PROGRESS: 'showThoughtInProgress',
+	KEEP_STATS_VISIBLE: 'keepStatsVisible',
+	AUTO_MIC_ON_EMPTY: 'autoMicOnEmpty',
+	RENDER_USER_CONTENT_AS_MARKDOWN: 'renderUserContentAsMarkdown',
+	DISABLE_AUTO_SCROLL: 'disableAutoScroll',
+	ALWAYS_SHOW_SIDEBAR_ON_DESKTOP: 'alwaysShowSidebarOnDesktop',
+	AUTO_SHOW_SIDEBAR_ON_NEW_CHAT: 'autoShowSidebarOnNewChat',
+	// Sampling
+	TEMPERATURE: 'temperature',
+	DYNATEMP_RANGE: 'dynatemp_range',
+	DYNATEMP_EXPONENT: 'dynatemp_exponent',
+	TOP_K: 'top_k',
+	TOP_P: 'top_p',
+	MIN_P: 'min_p',
+	XTC_PROBABILITY: 'xtc_probability',
+	XTC_THRESHOLD: 'xtc_threshold',
+	TYP_P: 'typ_p',
+	MAX_TOKENS: 'max_tokens',
+	SAMPLERS: 'samplers',
+	BACKEND_SAMPLING: 'backend_sampling',
+	// Penalties
+	REPEAT_LAST_N: 'repeat_last_n',
+	REPEAT_PENALTY: 'repeat_penalty',
+	PRESENCE_PENALTY: 'presence_penalty',
+	FREQUENCY_PENALTY: 'frequency_penalty',
+	DRY_MULTIPLIER: 'dry_multiplier',
+	DRY_BASE: 'dry_base',
+	DRY_ALLOWED_LENGTH: 'dry_allowed_length',
+	DRY_PENALTY_LAST_N: 'dry_penalty_last_n',
+	// MCP
+	AGENTIC_MAX_TURNS: 'agenticMaxTurns',
+	ALWAYS_SHOW_AGENTIC_TURNS: 'alwaysShowAgenticTurns',
+	AGENTIC_MAX_TOOL_PREVIEW_LINES: 'agenticMaxToolPreviewLines',
+	SHOW_TOOL_CALL_IN_PROGRESS: 'showToolCallInProgress',
+	// Developer
+	DISABLE_REASONING_PARSING: 'disableReasoningParsing',
+	SHOW_RAW_OUTPUT_SWITCH: 'showRawOutputSwitch',
+	CUSTOM: 'custom'
+} as const;
diff --git a/tools/server/webui/src/lib/constants/settings-sections.ts b/tools/server/webui/src/lib/constants/settings-sections.ts
index 9d8a4dba4d3..a2d960d4040 100644
--- a/tools/server/webui/src/lib/constants/settings-sections.ts
+++ b/tools/server/webui/src/lib/constants/settings-sections.ts
@@ -1,5 +1,8 @@
 /**
  * Settings section titles constants for ChatSettings component.
+ *
+ * These titles define the navigation sections in the settings dialog.
+ * Used for both sidebar navigation and mobile horizontal scroll menu.
  */
 export const SETTINGS_SECTION_TITLES = {
 	GENERAL: 'General',
@@ -7,8 +10,10 @@ export const SETTINGS_SECTION_TITLES = {
 	SAMPLING: 'Sampling',
 	PENALTIES: 'Penalties',
 	IMPORT_EXPORT: 'Import/Export',
+	MCP: 'MCP',
 	DEVELOPER: 'Developer'
 } as const;
 
+/** Type for settings section titles */
 export type SettingsSectionTitle =
 	(typeof SETTINGS_SECTION_TITLES)[keyof typeof SETTINGS_SECTION_TITLES];
diff --git a/tools/server/webui/src/lib/enums/agentic.ts b/tools/server/webui/src/lib/enums/agentic.ts
new file mode 100644
index 00000000000..5c61880b7b4
--- /dev/null
+++ b/tools/server/webui/src/lib/enums/agentic.ts
@@ -0,0 +1,11 @@
+/**
+ * Types of sections in agentic content display.
+ */
+export enum AgenticSectionType {
+	TEXT = 'text',
+	TOOL_CALL = 'tool_call',
+	TOOL_CALL_PENDING = 'tool_call_pending',
+	TOOL_CALL_STREAMING = 'tool_call_streaming',
+	REASONING = 'reasoning',
+	REASONING_PENDING = 'reasoning_pending'
+}
diff --git a/tools/server/webui/src/lib/enums/attachment.ts b/tools/server/webui/src/lib/enums/attachment.ts
index 7c7d0da9946..28863d7efc6 100644
--- a/tools/server/webui/src/lib/enums/attachment.ts
+++ b/tools/server/webui/src/lib/enums/attachment.ts
@@ -4,6 +4,8 @@
 export enum AttachmentType {
 	AUDIO = 'AUDIO',
 	IMAGE = 'IMAGE',
+	MCP_PROMPT = 'MCP_PROMPT',
+	MCP_RESOURCE = 'MCP_RESOURCE',
 	PDF = 'PDF',
 	TEXT = 'TEXT',
 	LEGACY_CONTEXT = 'context' // Legacy attachment type for backward compatibility
diff --git a/tools/server/webui/src/lib/enums/files.ts b/tools/server/webui/src/lib/enums/files.ts
index a4f079d405f..7efe0c706b4 100644
--- a/tools/server/webui/src/lib/enums/files.ts
+++ b/tools/server/webui/src/lib/enums/files.ts
@@ -11,6 +11,13 @@ export enum FileTypeCategory {
 	TEXT = 'text'
 }
 
+/**
+ * Special file types for internal use (not MIME types)
+ */
+export enum SpecialFileType {
+	MCP_PROMPT = 'mcp-prompt'
+}
+
 // Specific file type enums for each category
 export enum FileTypeImage {
 	JPEG = 'jpeg',
@@ -136,9 +143,28 @@ export enum FileExtensionText {
 	CS = '.cs'
 }
 
+// MIME type prefixes and includes for content detection
+export enum MimeTypePrefix {
+	IMAGE = 'image/',
+	TEXT = 'text'
+}
+
+export enum MimeTypeIncludes {
+	JSON = 'json',
+	JAVASCRIPT = 'javascript',
+	TYPESCRIPT = 'typescript'
+}
+
+// URI patterns for content detection
+export enum UriPattern {
+	DATABASE_KEYWORD = 'database',
+	DATABASE_SCHEME = 'db://'
+}
+
 // MIME type enums
 export enum MimeTypeApplication {
-	PDF = 'application/pdf'
+	PDF = 'application/pdf',
+	OCTET_STREAM = 'application/octet-stream'
 }
 
 export enum MimeTypeAudio {
@@ -152,6 +178,7 @@ export enum MimeTypeAudio {
 
 export enum MimeTypeImage {
 	JPEG = 'image/jpeg',
+	JPG = 'image/jpg',
 	PNG = 'image/png',
 	GIF = 'image/gif',
 	WEBP = 'image/webp',
diff --git a/tools/server/webui/src/lib/enums/index.ts b/tools/server/webui/src/lib/enums/index.ts
index 5b39eebbb15..541854cd87c 100644
--- a/tools/server/webui/src/lib/enums/index.ts
+++ b/tools/server/webui/src/lib/enums/index.ts
@@ -1,12 +1,14 @@
 export { AttachmentType } from './attachment';
 
+export { AgenticSectionType } from './agentic';
+
 export {
 	ChatMessageStatsView,
-	ReasoningFormat,
+	ContentPartType,
+	ErrorDialogType,
 	MessageRole,
 	MessageType,
-	ContentPartType,
-	ErrorDialogType
+	ReasoningFormat
 } from './chat';
 
 export {
@@ -19,18 +21,31 @@ export {
 	FileExtensionAudio,
 	FileExtensionPdf,
 	FileExtensionText,
+	MimeTypePrefix,
+	MimeTypeIncludes,
+	UriPattern,
 	MimeTypeApplication,
 	MimeTypeAudio,
 	MimeTypeImage,
-	MimeTypeText
+	MimeTypeText,
+	SpecialFileType
 } from './files';
 
+export {
+	MCPConnectionPhase,
+	MCPLogLevel,
+	MCPTransportType,
+	HealthCheckStatus,
+	MCPContentType,
+	MCPRefType
+} from './mcp';
+
 export { ModelModality } from './model';
 
 export { ServerRole, ServerModelStatus } from './server';
 
 export { ParameterSource, SyncableParameterType, SettingsFieldType } from './settings';
 
-export { KeyboardKey } from './keyboard';
+export { ColorMode, McpPromptVariant, UrlPrefix } from './ui';
 
-export { UrlPrefix } from './ui';
+export { KeyboardKey } from './keyboard';
diff --git a/tools/server/webui/src/lib/enums/mcp.ts b/tools/server/webui/src/lib/enums/mcp.ts
new file mode 100644
index 00000000000..3b05a073b4b
--- /dev/null
+++ b/tools/server/webui/src/lib/enums/mcp.ts
@@ -0,0 +1,59 @@
+/**
+ * Connection lifecycle phases for MCP protocol
+ */
+export enum MCPConnectionPhase {
+	IDLE = 'idle',
+	TRANSPORT_CREATING = 'transport_creating',
+	TRANSPORT_READY = 'transport_ready',
+	INITIALIZING = 'initializing',
+	CAPABILITIES_EXCHANGED = 'capabilities_exchanged',
+	LISTING_TOOLS = 'listing_tools',
+	CONNECTED = 'connected',
+	ERROR = 'error',
+	DISCONNECTED = 'disconnected'
+}
+
+/**
+ * Log level for connection events
+ */
+export enum MCPLogLevel {
+	INFO = 'info',
+	WARN = 'warn',
+	ERROR = 'error'
+}
+
+/**
+ * Transport types for MCP connections
+ */
+export enum MCPTransportType {
+	WEBSOCKET = 'websocket',
+	STREAMABLE_HTTP = 'streamable_http',
+	SSE = 'sse'
+}
+
+/**
+ * Health check status for MCP servers
+ */
+export enum HealthCheckStatus {
+	IDLE = 'idle',
+	CONNECTING = 'connecting',
+	SUCCESS = 'success',
+	ERROR = 'error'
+}
+
+/**
+ * Content types for MCP tool results
+ */
+export enum MCPContentType {
+	TEXT = 'text',
+	IMAGE = 'image',
+	RESOURCE = 'resource'
+}
+
+/**
+ * Reference types for MCP completions
+ */
+export enum MCPRefType {
+	PROMPT = 'ref/prompt',
+	RESOURCE = 'ref/resource'
+}
diff --git a/tools/server/webui/src/lib/enums/ui.ts b/tools/server/webui/src/lib/enums/ui.ts
index 72a58482636..827c3e6d1f9 100644
--- a/tools/server/webui/src/lib/enums/ui.ts
+++ b/tools/server/webui/src/lib/enums/ui.ts
@@ -1,5 +1,19 @@
+export enum ColorMode {
+	LIGHT = 'light',
+	DARK = 'dark',
+	SYSTEM = 'system'
+}
+
+/**
+ * MCP prompt display variant
+ */
+export enum McpPromptVariant {
+	MESSAGE = 'message',
+	ATTACHMENT = 'attachment'
+}
+
 /**
- * URL prefixes for protocol detection.
+ * URL prefixes for protocol detection
  */
 export enum UrlPrefix {
 	DATA = 'data:',
diff --git a/tools/server/webui/src/lib/hooks/use-model-change-validation.svelte.ts b/tools/server/webui/src/lib/hooks/use-model-change-validation.svelte.ts
deleted file mode 100644
index f52d8dc8170..00000000000
--- a/tools/server/webui/src/lib/hooks/use-model-change-validation.svelte.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { modelsStore } from '$lib/stores/models.svelte';
-import { isRouterMode } from '$lib/stores/server.svelte';
-import { toast } from 'svelte-sonner';
-import type { ModelModalities } from '$lib/types';
-
-interface UseModelChangeValidationOptions {
-	/**
-	 * Function to get required modalities for validation.
-	 */
-	getRequiredModalities: () => ModelModalities;
-
-	/**
-	 * Optional callback to execute after successful validation.
-	 */
-	onSuccess?: (modelName: string) => void;
-
-	/**
-	 * Optional callback for rollback on validation failure.
-	 */
-	onValidationFailure?: (previousModelId: string | null) => Promise<void>;
-}
-
-export function useModelChangeValidation(options: UseModelChangeValidationOptions) {
-	const { getRequiredModalities, onSuccess, onValidationFailure } = options;
-
-	let previousSelectedModelId: string | null = null;
-	const isRouter = $derived(isRouterMode());
-
-	async function handleModelChange(modelId: string, modelName: string): Promise<boolean> {
-		try {
-			if (onValidationFailure) {
-				previousSelectedModelId = modelsStore.selectedModelId;
-			}
-
-			let hasLoadedModel = false;
-			const isModelLoadedBefore = modelsStore.isModelLoaded(modelName);
-
-			if (isRouter && !isModelLoadedBefore) {
-				try {
-					await modelsStore.loadModel(modelName);
-					hasLoadedModel = true;
-				} catch {
-					toast.error(`Failed to load model "${modelName}"`);
-					return false;
-				}
-			}
-
-			const props = await modelsStore.fetchModelProps(modelName);
-
-			if (props?.modalities) {
-				const requiredModalities = getRequiredModalities();
-
-				const missingModalities: string[] = [];
-				if (requiredModalities.vision && !props.modalities.vision) {
-					missingModalities.push('vision');
-				}
-				if (requiredModalities.audio && !props.modalities.audio) {
-					missingModalities.push('audio');
-				}
-
-				if (missingModalities.length > 0) {
-					toast.error(
-						`Model "${modelName}" doesn't support required modalities: ${missingModalities.join(', ')}. Please select a different model.`
-					);
-
-					if (isRouter && hasLoadedModel) {
-						try {
-							await modelsStore.unloadModel(modelName);
-						} catch (error) {
-							console.error('Failed to unload incompatible model:', error);
-						}
-					}
-
-					if (onValidationFailure && previousSelectedModelId) {
-						await onValidationFailure(previousSelectedModelId);
-					}
-
-					return false;
-				}
-			}
-
-			await modelsStore.selectModelById(modelId);
-
-			if (onSuccess) {
-				onSuccess(modelName);
-			}
-
-			return true;
-		} catch (error) {
-			console.error('Failed to change model:', error);
-			toast.error('Failed to validate model capabilities');
-
-			if (onValidationFailure && previousSelectedModelId) {
-				await onValidationFailure(previousSelectedModelId);
-			}
-
-			return false;
-		}
-	}
-
-	return {
-		handleModelChange
-	};
-}
diff --git a/tools/server/webui/src/lib/markdown/resolve-attachment-images.ts b/tools/server/webui/src/lib/markdown/resolve-attachment-images.ts
index bc67ef9869b..87c00d883da 100644
--- a/tools/server/webui/src/lib/markdown/resolve-attachment-images.ts
+++ b/tools/server/webui/src/lib/markdown/resolve-attachment-images.ts
@@ -5,7 +5,7 @@ import { AttachmentType, UrlPrefix } from '$lib/enums';
 
 /**
  * Rehype plugin to resolve attachment image sources.
- * Converts attachment names to base64 data URLs.
+ * Converts attachment names (e.g., "mcp-attachment-xxx.png") to base64 data URLs.
  */
 export function rehypeResolveAttachmentImages(options: { attachments?: DatabaseMessageExtra[] }) {
 	return (tree: HastRoot) => {
@@ -13,15 +13,18 @@ export function rehypeResolveAttachmentImages(options: { attachments?: DatabaseM
 			if (node.tagName === 'img' && node.properties?.src) {
 				const src = String(node.properties.src);
 
+				// Skip data URLs and external URLs
 				if (src.startsWith(UrlPrefix.DATA) || src.startsWith(UrlPrefix.HTTP)) {
 					return;
 				}
 
+				// Find matching attachment
 				const attachment = options.attachments?.find(
 					(a): a is DatabaseMessageExtraImageFile =>
 						a.type === AttachmentType.IMAGE && a.name === src
 				);
 
+				// Replace with base64 URL if found
 				if (attachment?.base64Url) {
 					node.properties.src = attachment.base64Url;
 				}
diff --git a/tools/server/webui/src/lib/services/chat.ts b/tools/server/webui/src/lib/services/chat.service.ts
similarity index 79%
rename from tools/server/webui/src/lib/services/chat.ts
rename to tools/server/webui/src/lib/services/chat.service.ts
index 55af0ce8160..389939901a5 100644
--- a/tools/server/webui/src/lib/services/chat.ts
+++ b/tools/server/webui/src/lib/services/chat.service.ts
@@ -1,42 +1,57 @@
-import { getJsonHeaders } from '$lib/utils';
-import { AttachmentType } from '$lib/enums';
-
-/**
- * ChatService - Low-level API communication layer for Chat Completions
- *
- * **Terminology - Chat vs Conversation:**
- * - **Chat**: The active interaction space with the Chat Completions API. This service
- *   handles the real-time communication with the AI backend - sending messages, receiving
- *   streaming responses, and managing request lifecycles. "Chat" is ephemeral and runtime-focused.
- * - **Conversation**: The persistent database entity storing all messages and metadata.
- *   Managed by ConversationsService/Store, conversations persist across sessions.
- *
- * This service handles direct communication with the llama-server's Chat Completions API.
- * It provides the network layer abstraction for AI model interactions while remaining
- * stateless and focused purely on API communication.
- *
- * **Architecture & Relationships:**
- * - **ChatService** (this class): Stateless API communication layer
- *   - Handles HTTP requests/responses with the llama-server
- *   - Manages streaming and non-streaming response parsing
- *   - Provides per-conversation request abortion capabilities
- *   - Converts database messages to API format
- *   - Handles error translation for server responses
- *
- * - **chatStore**: Uses ChatService for all AI model communication
- * - **conversationsStore**: Provides message context for API requests
- *
- * **Key Responsibilities:**
- * - Message format conversion (DatabaseMessage → API format)
- * - Streaming response handling with real-time callbacks
- * - Reasoning content extraction and processing
- * - File attachment processing (images, PDFs, audio, text)
- * - Request lifecycle management (abort via AbortSignal)
- */
+import { getJsonHeaders, formatAttachmentText, isAbortError } from '$lib/utils';
+import { AGENTIC_REGEX } from '$lib/constants/agentic';
+import {
+	ATTACHMENT_LABEL_PDF_FILE,
+	ATTACHMENT_LABEL_MCP_PROMPT,
+	ATTACHMENT_LABEL_MCP_RESOURCE
+} from '$lib/constants/attachment-labels';
+import {
+	AttachmentType,
+	ContentPartType,
+	MessageRole,
+	ReasoningFormat,
+	UrlPrefix
+} from '$lib/enums';
+import type { ApiChatMessageContentPart, ApiChatCompletionToolCall } from '$lib/types/api';
+import type { DatabaseMessageExtraMcpPrompt, DatabaseMessageExtraMcpResource } from '$lib/types';
+import { modelsStore } from '$lib/stores/models.svelte';
+
 export class ChatService {
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Messaging
-	// ─────────────────────────────────────────────────────────────────────────────
+	private static stripReasoningContent(
+		content: ApiChatMessageData['content'] | null | undefined
+	): ApiChatMessageData['content'] | null | undefined {
+		if (!content) {
+			return content;
+		}
+
+		if (typeof content === 'string') {
+			return content
+				.replace(AGENTIC_REGEX.REASONING_BLOCK, '')
+				.replace(AGENTIC_REGEX.REASONING_OPEN, '');
+		}
+
+		if (!Array.isArray(content)) {
+			return content;
+		}
+
+		return content.map((part: ApiChatMessageContentPart) => {
+			if (part.type !== ContentPartType.TEXT || !part.text) return part;
+			return {
+				...part,
+				text: part.text
+					.replace(AGENTIC_REGEX.REASONING_BLOCK, '')
+					.replace(AGENTIC_REGEX.REASONING_OPEN, '')
+			};
+		});
+	}
+
+	/**
+	 *
+	 *
+	 * Messaging
+	 *
+	 *
+	 */
 
 	/**
 	 * Sends a chat completion request to the llama.cpp server.
@@ -63,6 +78,8 @@ export class ChatService {
 			onToolCallChunk,
 			onModel,
 			onTimings,
+			// Tools for function calling
+			tools,
 			// Generation parameters
 			temperature,
 			max_tokens,
@@ -97,6 +114,7 @@ export class ChatService {
 			.map((msg) => {
 				if ('id' in msg && 'convId' in msg && 'timestamp' in msg) {
 					const dbMsg = msg as DatabaseMessage & { extra?: DatabaseMessageExtra[] };
+
 					return ChatService.convertDbMessageToApiChatMessageData(dbMsg);
 				} else {
 					return msg as ApiChatMessageData;
@@ -104,7 +122,7 @@ export class ChatService {
 			})
 			.filter((msg) => {
 				// Filter out empty system messages
-				if (msg.role === 'system') {
+				if (msg.role === MessageRole.SYSTEM) {
 					const content = typeof msg.content === 'string' ? msg.content : '';
 
 					return content.trim().length > 0;
@@ -113,13 +131,41 @@ export class ChatService {
 				return true;
 			});
 
+		// Filter out image attachments if the model doesn't support vision
+		if (options.model && !modelsStore.modelSupportsVision(options.model)) {
+			normalizedMessages.forEach((msg) => {
+				if (Array.isArray(msg.content)) {
+					msg.content = msg.content.filter((part: ApiChatMessageContentPart) => {
+						if (part.type === ContentPartType.IMAGE_URL) {
+							console.info(
+								`[ChatService] Skipping image attachment in message history (model "${options.model}" does not support vision)`
+							);
+
+							return false;
+						}
+
+						return true;
+					});
+					// If only text remains and it's a single part, simplify to string
+					if (msg.content.length === 1 && msg.content[0].type === ContentPartType.TEXT) {
+						msg.content = msg.content[0].text;
+					}
+				}
+			});
+		}
+
 		const requestBody: ApiChatCompletionRequest = {
 			messages: normalizedMessages.map((msg: ApiChatMessageData) => ({
 				role: msg.role,
-				content: msg.content
+				// Strip reasoning tags/content from the prompt to avoid polluting KV cache.
+				// TODO: investigate backend expectations for reasoning tags and add a toggle if needed.
+				content: ChatService.stripReasoningContent(msg.content),
+				tool_calls: msg.tool_calls,
+				tool_call_id: msg.tool_call_id
 			})),
 			stream,
-			return_progress: stream ? true : undefined
+			return_progress: stream ? true : undefined,
+			tools: tools && tools.length > 0 ? tools : undefined
 		};
 
 		// Include model in request if provided (required in ROUTER mode)
@@ -127,7 +173,9 @@ export class ChatService {
 			requestBody.model = options.model;
 		}
 
-		requestBody.reasoning_format = disableReasoningParsing ? 'none' : 'auto';
+		requestBody.reasoning_format = disableReasoningParsing
+			? ReasoningFormat.NONE
+			: ReasoningFormat.AUTO;
 
 		if (temperature !== undefined) requestBody.temperature = temperature;
 		if (max_tokens !== undefined) {
@@ -183,9 +231,11 @@ export class ChatService {
 
 			if (!response.ok) {
 				const error = await ChatService.parseErrorResponse(response);
+
 				if (onError) {
 					onError(error);
 				}
+
 				throw error;
 			}
 
@@ -202,6 +252,7 @@ export class ChatService {
 					conversationId,
 					signal
 				);
+
 				return;
 			} else {
 				return ChatService.handleNonStreamResponse(
@@ -213,7 +264,7 @@ export class ChatService {
 				);
 			}
 		} catch (error) {
-			if (error instanceof Error && error.name === 'AbortError') {
+			if (isAbortError(error)) {
 				console.log('Chat completion request was aborted');
 				return;
 			}
@@ -240,16 +291,22 @@ export class ChatService {
 			}
 
 			console.error('Error in sendMessage:', error);
+
 			if (onError) {
 				onError(userFriendlyError);
 			}
+
 			throw userFriendlyError;
 		}
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Streaming
-	// ─────────────────────────────────────────────────────────────────────────────
+	/**
+	 *
+	 *
+	 * Streaming
+	 *
+	 *
+	 */
 
 	/**
 	 * Handles streaming response from the chat completion API
@@ -323,6 +380,10 @@ export class ChatService {
 
 			const serializedToolCalls = JSON.stringify(aggregatedToolCalls);
 
+			if (import.meta.env.DEV) {
+				console.log('[ChatService] Aggregated tool calls:', serializedToolCalls);
+			}
+
 			if (!serializedToolCalls) {
 				return;
 			}
@@ -349,10 +410,11 @@ export class ChatService {
 				for (const line of lines) {
 					if (abortSignal?.aborted) break;
 
-					if (line.startsWith('data: ')) {
+					if (line.startsWith(UrlPrefix.DATA)) {
 						const data = line.slice(6);
 						if (data === '[DONE]') {
 							streamFinished = true;
+
 							continue;
 						}
 
@@ -458,6 +520,7 @@ export class ChatService {
 
 			if (!responseText.trim()) {
 				const noResponseError = new Error('No response received from server. Please try again.');
+
 				throw noResponseError;
 			}
 
@@ -472,10 +535,6 @@ export class ChatService {
 			const reasoningContent = data.choices[0]?.message?.reasoning_content;
 			const toolCalls = data.choices[0]?.message?.tool_calls;
 
-			if (reasoningContent) {
-				console.log('Full reasoning content:', reasoningContent);
-			}
-
 			let serializedToolCalls: string | undefined;
 
 			if (toolCalls && toolCalls.length > 0) {
@@ -491,6 +550,7 @@ export class ChatService {
 
 			if (!content.trim() && !serializedToolCalls) {
 				const noResponseError = new Error('No response received from server. Please try again.');
+
 				throw noResponseError;
 			}
 
@@ -563,9 +623,13 @@ export class ChatService {
 		return result;
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Conversion
-	// ─────────────────────────────────────────────────────────────────────────────
+	/**
+	 *
+	 *
+	 * Conversion
+	 *
+	 *
+	 */
 
 	/**
 	 * Converts a database message with attachments to API chat message format.
@@ -582,22 +646,48 @@ export class ChatService {
 	static convertDbMessageToApiChatMessageData(
 		message: DatabaseMessage & { extra?: DatabaseMessageExtra[] }
 	): ApiChatMessageData {
-		if (!message.extra || message.extra.length === 0) {
+		// Handle tool result messages (role: 'tool')
+		if (message.role === MessageRole.TOOL && message.toolCallId) {
 			return {
-				role: message.role as 'user' | 'assistant' | 'system',
+				role: MessageRole.TOOL,
+				content: message.content,
+				tool_call_id: message.toolCallId
+			};
+		}
+
+		// Parse tool calls for assistant messages
+		let toolCalls: ApiChatCompletionToolCall[] | undefined;
+		if (message.toolCalls) {
+			try {
+				toolCalls = JSON.parse(message.toolCalls);
+			} catch {
+				// Ignore parse errors for malformed tool calls
+			}
+		}
+
+		if (!message.extra || message.extra.length === 0) {
+			const result: ApiChatMessageData = {
+				role: message.role as MessageRole,
 				content: message.content
 			};
+
+			if (toolCalls && toolCalls.length > 0) {
+				result.tool_calls = toolCalls;
+			}
+
+			return result;
 		}
 
 		const contentParts: ApiChatMessageContentPart[] = [];
 
 		if (message.content) {
 			contentParts.push({
-				type: 'text',
+				type: ContentPartType.TEXT,
 				text: message.content
 			});
 		}
 
+		// Include images from all messages
 		const imageFiles = message.extra.filter(
 			(extra: DatabaseMessageExtra): extra is DatabaseMessageExtraImageFile =>
 				extra.type === AttachmentType.IMAGE
@@ -605,7 +695,7 @@ export class ChatService {
 
 		for (const image of imageFiles) {
 			contentParts.push({
-				type: 'image_url',
+				type: ContentPartType.IMAGE_URL,
 				image_url: { url: image.base64Url }
 			});
 		}
@@ -617,8 +707,8 @@ export class ChatService {
 
 		for (const textFile of textFiles) {
 			contentParts.push({
-				type: 'text',
-				text: `\n\n--- File: ${textFile.name} ---\n${textFile.content}`
+				type: ContentPartType.TEXT,
+				text: formatAttachmentText('File', textFile.name, textFile.content)
 			});
 		}
 
@@ -630,8 +720,8 @@ export class ChatService {
 
 		for (const legacyContextFile of legacyContextFiles) {
 			contentParts.push({
-				type: 'text',
-				text: `\n\n--- File: ${legacyContextFile.name} ---\n${legacyContextFile.content}`
+				type: ContentPartType.TEXT,
+				text: formatAttachmentText('File', legacyContextFile.name, legacyContextFile.content)
 			});
 		}
 
@@ -642,7 +732,7 @@ export class ChatService {
 
 		for (const audio of audioFiles) {
 			contentParts.push({
-				type: 'input_audio',
+				type: ContentPartType.INPUT_AUDIO,
 				input_audio: {
 					data: audio.base64Data,
 					format: audio.mimeType.includes('wav') ? 'wav' : 'mp3'
@@ -659,27 +749,69 @@ export class ChatService {
 			if (pdfFile.processedAsImages && pdfFile.images) {
 				for (let i = 0; i < pdfFile.images.length; i++) {
 					contentParts.push({
-						type: 'image_url',
+						type: ContentPartType.IMAGE_URL,
 						image_url: { url: pdfFile.images[i] }
 					});
 				}
 			} else {
 				contentParts.push({
-					type: 'text',
-					text: `\n\n--- PDF File: ${pdfFile.name} ---\n${pdfFile.content}`
+					type: ContentPartType.TEXT,
+					text: formatAttachmentText(ATTACHMENT_LABEL_PDF_FILE, pdfFile.name, pdfFile.content)
 				});
 			}
 		}
 
-		return {
-			role: message.role as 'user' | 'assistant' | 'system',
+		const mcpPrompts = message.extra.filter(
+			(extra: DatabaseMessageExtra): extra is DatabaseMessageExtraMcpPrompt =>
+				extra.type === AttachmentType.MCP_PROMPT
+		);
+
+		for (const mcpPrompt of mcpPrompts) {
+			contentParts.push({
+				type: ContentPartType.TEXT,
+				text: formatAttachmentText(
+					ATTACHMENT_LABEL_MCP_PROMPT,
+					mcpPrompt.name,
+					mcpPrompt.content,
+					mcpPrompt.serverName
+				)
+			});
+		}
+
+		const mcpResources = message.extra.filter(
+			(extra: DatabaseMessageExtra): extra is DatabaseMessageExtraMcpResource =>
+				extra.type === AttachmentType.MCP_RESOURCE
+		);
+
+		for (const mcpResource of mcpResources) {
+			contentParts.push({
+				type: ContentPartType.TEXT,
+				text: formatAttachmentText(
+					ATTACHMENT_LABEL_MCP_RESOURCE,
+					mcpResource.name,
+					mcpResource.content,
+					mcpResource.serverName
+				)
+			});
+		}
+
+		const result: ApiChatMessageData = {
+			role: message.role as MessageRole,
 			content: contentParts
 		};
+		if (toolCalls && toolCalls.length > 0) {
+			result.tool_calls = toolCalls;
+		}
+		return result;
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Utilities
-	// ─────────────────────────────────────────────────────────────────────────────
+	/**
+	 *
+	 *
+	 * Utilities
+	 *
+	 *
+	 */
 
 	/**
 	 * Parses error response and creates appropriate error with context information
@@ -714,6 +846,7 @@ export class ChatService {
 				contextInfo?: { n_prompt_tokens: number; n_ctx: number };
 			};
 			fallback.name = 'HttpError';
+
 			return fallback;
 		}
 	}
@@ -745,18 +878,26 @@ export class ChatService {
 
 		// 1) root (some implementations provide `model` at the top level)
 		const rootModel = getTrimmedString(root.model);
-		if (rootModel) return rootModel;
+		if (rootModel) {
+			return rootModel;
+		}
 
 		// 2) streaming choice (delta) or final response (message)
 		const firstChoice = Array.isArray(root.choices) ? asRecord(root.choices[0]) : undefined;
-		if (!firstChoice) return undefined;
+		if (!firstChoice) {
+			return undefined;
+		}
 
 		// priority: delta.model (first chunk) else message.model (final response)
 		const deltaModel = getTrimmedString(asRecord(firstChoice.delta)?.model);
-		if (deltaModel) return deltaModel;
+		if (deltaModel) {
+			return deltaModel;
+		}
 
 		const messageModel = getTrimmedString(asRecord(firstChoice.message)?.model);
-		if (messageModel) return messageModel;
+		if (messageModel) {
+			return messageModel;
+		}
 
 		// avoid guessing from non-standard locations (metadata, etc.)
 		return undefined;
diff --git a/tools/server/webui/src/lib/services/index.ts b/tools/server/webui/src/lib/services/index.ts
index b59d7cec34d..7c98383d1f2 100644
--- a/tools/server/webui/src/lib/services/index.ts
+++ b/tools/server/webui/src/lib/services/index.ts
@@ -1,5 +1,262 @@
-export { ChatService } from './chat';
+/**
+ *
+ * SERVICES
+ *
+ * Stateless service layer for API communication and data operations.
+ * Services handle protocol-level concerns (HTTP, WebSocket, MCP, IndexedDB)
+ * without managing reactive state — that responsibility belongs to stores.
+ *
+ * **Design Principles:**
+ * - All methods are static — no instance state
+ * - Pure I/O operations (network requests, database queries)
+ * - No Svelte runes or reactive primitives
+ * - Error handling at the protocol level; business-level error handling in stores
+ *
+ * **Architecture (bottom to top):**
+ * - **Services** (this layer): Stateless protocol communication
+ * - **Stores**: Reactive state management consuming services
+ * - **Components**: UI consuming stores
+ *
+ */
+
+/**
+ * **ChatService** - Chat Completions API communication layer
+ *
+ * Handles direct communication with the llama-server's `/v1/chat/completions` endpoint.
+ * Provides streaming and non-streaming response parsing, message format conversion
+ * (DatabaseMessage → API format), and request lifecycle management.
+ *
+ * **Terminology - Chat vs Conversation:**
+ * - **Chat**: The active interaction space with the Chat Completions API. Ephemeral and
+ *   runtime-focused — sending messages, receiving streaming responses, managing request lifecycles.
+ * - **Conversation**: The persistent database entity storing all messages and metadata.
+ *   Managed by conversationsStore, conversations persist across sessions.
+ *
+ * **Architecture & Relationships:**
+ * - **ChatService** (this class): Stateless API communication layer
+ *   - Handles HTTP requests/responses with the llama-server
+ *   - Manages streaming and non-streaming response parsing
+ *   - Converts database messages to API format (multimodal, tool calls)
+ *   - Handles error translation with user-friendly messages
+ *
+ * - **chatStore**: Primary consumer — uses ChatService for all AI model communication
+ * - **agenticStore**: Uses ChatService for multi-turn agentic loop streaming
+ * - **conversationsStore**: Provides message context for API requests
+ *
+ * **Key Responsibilities:**
+ * - Streaming response handling with real-time content/reasoning/tool-call callbacks
+ * - Non-streaming response parsing with complete response extraction
+ * - Database message to API format conversion (attachments, tool calls, multimodal)
+ * - Tool call delta merging for incremental streaming aggregation
+ * - Request parameter assembly (sampling, penalties, custom params)
+ * - File attachment processing (images, PDFs, audio, text, MCP prompts/resources)
+ * - Reasoning content stripping from prompt history to avoid KV cache pollution
+ * - Error translation (network, timeout, server errors → user-friendly messages)
+ *
+ * @see chatStore in stores/chat.svelte.ts — primary consumer for chat state management
+ * @see agenticStore in stores/agentic.svelte.ts — uses ChatService for agentic loop streaming
+ * @see conversationsStore in stores/conversations.svelte.ts — provides message context
+ */
+export { ChatService } from './chat.service';
+
+/**
+ * **DatabaseService** - IndexedDB persistence layer via Dexie ORM
+ *
+ * Provides stateless data access for conversations and messages using IndexedDB.
+ * Handles all low-level storage operations including branching tree structures,
+ * cascade deletions, and transaction safety for multi-table operations.
+ *
+ * **Architecture & Relationships (bottom to top):**
+ * - **DatabaseService** (this class): Stateless IndexedDB operations
+ *   - Lowest layer — direct Dexie/IndexedDB communication
+ *   - Pure CRUD operations without business logic
+ *   - Handles branching tree structure (parent-child relationships)
+ *   - Provides transaction safety for multi-table operations
+ *
+ * - **conversationsStore**: Reactive state management layer
+ *   - Uses DatabaseService for all persistence operations
+ *   - Manages conversation list, active conversation, and messages in memory
+ *
+ * - **chatStore**: Active AI interaction management
+ *   - Uses conversationsStore for conversation context
+ *   - Directly uses DatabaseService for message CRUD during streaming
+ *
+ * **Key Responsibilities:**
+ * - Conversation CRUD (create, read, update, delete)
+ * - Message CRUD with branching support (parent-child relationships)
+ * - Root message and system prompt creation
+ * - Cascade deletion of message branches (descendants)
+ * - Transaction-safe multi-table operations
+ * - Conversation import with duplicate detection
+ *
+ * **Database Schema:**
+ * - `conversations`: id, lastModified, currNode, name
+ * - `messages`: id, convId, type, role, timestamp, parent, children
+ *
+ * **Branching Model:**
+ * Messages form a tree structure where each message can have multiple children,
+ * enabling conversation branching and alternative response paths. The conversation's
+ * `currNode` tracks the currently active branch endpoint.
+ *
+ * @see conversationsStore in stores/conversations.svelte.ts — reactive layer on top of DatabaseService
+ * @see chatStore in stores/chat.svelte.ts — uses DatabaseService directly for message CRUD during streaming
+ */
 export { DatabaseService } from './database.service';
+
+/**
+ * **ModelsService** - Model management API communication
+ *
+ * Handles communication with model-related endpoints for both MODEL (single model)
+ * and ROUTER (multi-model) server modes. Provides model listing, loading/unloading,
+ * and status checking without managing any model state.
+ *
+ * **Architecture & Relationships:**
+ * - **ModelsService** (this class): Stateless HTTP communication
+ *   - Sends requests to model endpoints
+ *   - Parses and returns typed API responses
+ *   - Provides model status utility methods
+ *
+ * - **modelsStore**: Primary consumer — manages reactive model state
+ *   - Calls ModelsService for all model API operations
+ *   - Handles polling, caching, and state updates
+ *
+ * **Key Responsibilities:**
+ * - List available models via OpenAI-compatible `/v1/models` endpoint
+ * - Load/unload models via `/models/load` and `/models/unload` (ROUTER mode)
+ * - Model status queries (loaded, loading)
+ *
+ * **Server Mode Behavior:**
+ * - **MODEL mode**: Only `list()` is relevant — single model always loaded
+ * - **ROUTER mode**: Full lifecycle — `list()`, `listRouter()`, `load()`, `unload()`
+ *
+ * **Endpoints:**
+ * - `GET /v1/models` — OpenAI-compatible model list (both modes)
+ * - `POST /models/load` — Load a model (ROUTER mode only)
+ * - `POST /models/unload` — Unload a model (ROUTER mode only)
+ *
+ * @see modelsStore in stores/models.svelte.ts — primary consumer for reactive model state
+ */
 export { ModelsService } from './models.service';
+
+/**
+ * **PropsService** - Server properties and capabilities retrieval
+ *
+ * Fetches server configuration, model information, and capabilities from the `/props`
+ * endpoint. Supports both global server props and per-model props (ROUTER mode).
+ *
+ * **Architecture & Relationships:**
+ * - **PropsService** (this class): Stateless HTTP communication
+ *   - Fetches server properties from `/props` endpoint
+ *   - Handles authentication and request parameters
+ *   - Returns typed `ApiLlamaCppServerProps` responses
+ *
+ * - **serverStore**: Consumes global server properties (role detection, connection state)
+ * - **modelsStore**: Consumes per-model properties (modalities, context size)
+ * - **settingsStore**: Syncs default generation parameters from props response
+ *
+ * **Key Responsibilities:**
+ * - Fetch global server properties (default generation settings, modalities)
+ * - Fetch per-model properties in ROUTER mode via `?model=<id>` parameter
+ * - Handle autoload control to prevent unintended model loading
+ *
+ * **API Behavior:**
+ * - `GET /props` → Global server props (MODEL mode: includes modalities)
+ * - `GET /props?model=<id>` → Per-model props (ROUTER mode: model-specific modalities)
+ * - `&autoload=false` → Prevents model auto-loading when querying props
+ *
+ * @see serverStore in stores/server.svelte.ts — consumes global server props
+ * @see modelsStore in stores/models.svelte.ts — consumes per-model props for modalities
+ * @see settingsStore in stores/settings.svelte.ts — syncs default generation params from props
+ */
 export { PropsService } from './props.service';
-export { ParameterSyncService, SYNCABLE_PARAMETERS } from './parameter-sync.service';
+
+/**
+ * **ParameterSyncService** - Server defaults and user settings synchronization
+ *
+ * Manages the complex logic of merging server-provided default parameters with
+ * user-configured overrides. Ensures the UI reflects the actual server state
+ * while preserving user customizations. Tracks parameter sources (server default
+ * vs user override) for display in the settings UI.
+ *
+ * **Architecture & Relationships:**
+ * - **ParameterSyncService** (this class): Stateless sync logic
+ *   - Pure functions for parameter extraction, merging, and diffing
+ *   - No side effects — receives data in, returns data out
+ *   - Handles floating-point precision normalization
+ *
+ * - **settingsStore**: Primary consumer — calls sync methods during:
+ *   - Initial load (`syncWithServerDefaults`)
+ *   - Settings reset (`forceSyncWithServerDefaults`)
+ *   - Parameter info queries (`getParameterInfo`)
+ *
+ * - **PropsService**: Provides raw server props that feed into extraction
+ *
+ * **Key Responsibilities:**
+ * - Extract syncable parameters from server `/props` response
+ * - Merge server defaults with user overrides (user wins)
+ * - Track parameter source (Custom vs Default) for UI badges
+ * - Validate server parameter values by type (number, string, boolean)
+ * - Create diffs between current settings and server defaults
+ * - Floating-point precision normalization for consistent comparisons
+ *
+ * **Parameter Source Priority:**
+ * 1. **User Override** (Custom badge) — explicitly set by user in settings
+ * 2. **Server Default** (Default badge) — from `/props` endpoint
+ * 3. **App Default** — hardcoded fallback when server props unavailable
+ *
+ * **Exports:**
+ * - `ParameterSyncService` class — static methods for sync logic
+ * - `SYNCABLE_PARAMETERS` — mapping of webui setting keys to server parameter keys
+ *
+ * @see settingsStore in stores/settings.svelte.ts — primary consumer for settings sync
+ * @see ChatSettingsParameterSourceIndicator — displays parameter source badges in UI
+ */
+export { ParameterSyncService } from './parameter-sync.service';
+
+/**
+ * **MCPService** - Low-level MCP protocol communication layer
+ *
+ * Implements the client-side MCP (Model Context Protocol) SDK operations for connecting
+ * to MCP servers, discovering capabilities, and executing protocol operations.
+ * Supports multiple transport types: WebSocket, StreamableHTTP, and SSE (legacy fallback).
+ *
+ * **Architecture & Relationships:**
+ * - **MCPService** (this class): Stateless protocol communication
+ *   - Creates and manages transport connections (WebSocket, StreamableHTTP, SSE)
+ *   - Wraps MCP SDK client operations with error handling
+ *   - Formats tool results and extracts server info
+ *   - Provides abort signal support for cancellable operations
+ *
+ * - **mcpStore**: Reactive business logic facade
+ *   - Uses MCPService for all protocol-level operations
+ *   - Manages connection lifecycle, health checks, reconnection
+ *   - Handles tool name conflict resolution and server coordination
+ *
+ * - **mcpResourceStore**: Reactive resource state
+ *   - Receives resource data fetched via MCPService
+ *   - Manages resource caching, subscriptions, and attachments
+ *
+ * - **agenticStore**: Agentic loop orchestration
+ *   - Executes tool calls via mcpStore → MCPService chain
+ *
+ * **Key Responsibilities:**
+ * - Transport creation with automatic fallback (StreamableHTTP → SSE)
+ * - Server connection with detailed phase tracking and progress callbacks
+ * - Tool discovery (`listTools`) and execution (`callTool`) with abort support
+ * - Prompt listing (`listPrompts`) and retrieval (`getPrompt`) with arguments
+ * - Resource operations: list, read, subscribe/unsubscribe, template support
+ * - Completion suggestions for prompt arguments and resource URI templates
+ * - CORS proxy routing via llama-server for cross-origin MCP servers
+ * - Tool result formatting (text, images, embedded resources)
+ *
+ * **Transport Hierarchy:**
+ * 1. **WebSocket** — bidirectional, no CORS proxy support
+ * 2. **StreamableHTTP** — modern HTTP-based, supports CORS proxy
+ * 3. **SSE** — legacy fallback, supports CORS proxy
+ *
+ * @see mcpStore in stores/mcp.svelte.ts — reactive business logic facade on top of MCPService
+ * @see mcpResourceStore in stores/mcp-resources.svelte.ts — reactive resource state management
+ * @see agenticStore in stores/agentic.svelte.ts — uses MCPService (via mcpStore) for tool execution
+ * @see MCP Protocol Specification: https://modelcontextprotocol.io/specification/2025-06-18
+ */
+export { MCPService } from './mcp.service';
diff --git a/tools/server/webui/src/lib/services/mcp.service.ts b/tools/server/webui/src/lib/services/mcp.service.ts
new file mode 100644
index 00000000000..14141b20f0a
--- /dev/null
+++ b/tools/server/webui/src/lib/services/mcp.service.ts
@@ -0,0 +1,732 @@
+import { Client } from '@modelcontextprotocol/sdk/client';
+import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
+import { SSEClientTransport } from '@modelcontextprotocol/sdk/client/sse.js';
+import { WebSocketClientTransport } from '@modelcontextprotocol/sdk/client/websocket.js';
+import type {
+	Tool,
+	Prompt,
+	GetPromptResult,
+	ListChangedHandlers
+} from '@modelcontextprotocol/sdk/types.js';
+import type { Transport } from '@modelcontextprotocol/sdk/shared/transport.js';
+import type {
+	MCPServerConfig,
+	ToolCallParams,
+	ToolExecutionResult,
+	Implementation,
+	ClientCapabilities,
+	MCPConnection,
+	MCPPhaseCallback,
+	MCPConnectionLog,
+	MCPServerInfo,
+	MCPResource,
+	MCPResourceTemplate,
+	MCPResourceContent,
+	MCPReadResourceResult
+} from '$lib/types';
+import {
+	MCPConnectionPhase,
+	MCPLogLevel,
+	MCPTransportType,
+	MCPContentType,
+	MCPRefType
+} from '$lib/enums';
+import {
+	DEFAULT_MCP_CONFIG,
+	DEFAULT_CLIENT_VERSION,
+	DEFAULT_IMAGE_MIME_TYPE
+} from '$lib/constants/mcp';
+import { throwIfAborted, isAbortError, createBase64DataUrl } from '$lib/utils';
+import { buildProxiedUrl } from '$lib/utils/cors-proxy';
+
+interface ToolResultContentItem {
+	type: string;
+	text?: string;
+	data?: string;
+	mimeType?: string;
+	resource?: { text?: string; blob?: string; uri?: string };
+}
+
+interface ToolCallResult {
+	content?: ToolResultContentItem[];
+	isError?: boolean;
+	_meta?: Record<string, unknown>;
+}
+
+export class MCPService {
+	/**
+	 * Create a connection log entry for phase tracking.
+	 *
+	 * @param phase - The connection phase this log belongs to
+	 * @param message - Human-readable log message
+	 * @param level - Log severity level (default: INFO)
+	 * @param details - Optional structured details for debugging
+	 * @returns Formatted connection log entry
+	 */
+	private static createLog(
+		phase: MCPConnectionPhase,
+		message: string,
+		level: MCPLogLevel = MCPLogLevel.INFO,
+		details?: unknown
+	): MCPConnectionLog {
+		return {
+			timestamp: new Date(),
+			phase,
+			message,
+			level,
+			details
+		};
+	}
+
+	/**
+	 * Create transport based on server configuration.
+	 * Supports WebSocket, StreamableHTTP (modern), and SSE (legacy) transports.
+	 * When `useProxy` is enabled, routes HTTP requests through llama-server's CORS proxy.
+	 *
+	 * **Fallback Order:**
+	 * 1. WebSocket — if explicitly configured (no CORS proxy support)
+	 * 2. StreamableHTTP — default for HTTP connections
+	 * 3. SSE — automatic fallback if StreamableHTTP fails
+	 *
+	 * @param config - Server configuration with url, transport type, proxy, and auth settings
+	 * @returns Object containing the created transport and the transport type used
+	 * @throws {Error} If url is missing, WebSocket + proxy combination, or all transports fail
+	 */
+	static createTransport(config: MCPServerConfig): {
+		transport: Transport;
+		type: MCPTransportType;
+	} {
+		if (!config.url) {
+			throw new Error('MCP server configuration is missing url');
+		}
+
+		const useProxy = config.useProxy ?? false;
+		const requestInit: RequestInit = {};
+
+		if (config.headers) {
+			requestInit.headers = config.headers;
+		}
+
+		if (config.credentials) {
+			requestInit.credentials = config.credentials;
+		}
+
+		if (config.transport === MCPTransportType.WEBSOCKET) {
+			if (useProxy) {
+				throw new Error(
+					'WebSocket transport is not supported when using CORS proxy. Use HTTP transport instead.'
+				);
+			}
+
+			const url = new URL(config.url);
+
+			if (import.meta.env.DEV) {
+				console.log(`[MCPService] Creating WebSocket transport for ${url.href}`);
+			}
+
+			return {
+				transport: new WebSocketClientTransport(url),
+				type: MCPTransportType.WEBSOCKET
+			};
+		}
+
+		const url = useProxy ? buildProxiedUrl(config.url) : new URL(config.url);
+
+		if (useProxy && import.meta.env.DEV) {
+			console.log(`[MCPService] Using CORS proxy for ${config.url} -> ${url.href}`);
+		}
+
+		try {
+			if (import.meta.env.DEV) {
+				console.log(`[MCPService] Creating StreamableHTTP transport for ${url.href}`);
+			}
+
+			return {
+				transport: new StreamableHTTPClientTransport(url, {
+					requestInit
+				}),
+				type: MCPTransportType.STREAMABLE_HTTP
+			};
+		} catch (httpError) {
+			console.warn(`[MCPService] StreamableHTTP failed, trying SSE transport...`, httpError);
+
+			try {
+				return {
+					transport: new SSEClientTransport(url, { requestInit }),
+					type: MCPTransportType.SSE
+				};
+			} catch (sseError) {
+				const httpMsg = httpError instanceof Error ? httpError.message : String(httpError);
+				const sseMsg = sseError instanceof Error ? sseError.message : String(sseError);
+
+				throw new Error(`Failed to create transport. StreamableHTTP: ${httpMsg}; SSE: ${sseMsg}`);
+			}
+		}
+	}
+
+	/**
+	 * Extract server info from SDK Implementation type.
+	 * Normalizes the SDK's server version response into our MCPServerInfo type.
+	 *
+	 * @param impl - Raw Implementation object from MCP SDK
+	 * @returns Normalized server info or undefined if input is empty
+	 */
+	private static extractServerInfo(impl: Implementation | undefined): MCPServerInfo | undefined {
+		if (!impl) {
+			return undefined;
+		}
+
+		return {
+			name: impl.name,
+			version: impl.version,
+			title: impl.title,
+			description: impl.description,
+			websiteUrl: impl.websiteUrl,
+			icons: impl.icons?.map((icon: { src: string; mimeType?: string; sizes?: string }) => ({
+				src: icon.src,
+				mimeType: icon.mimeType,
+				sizes: icon.sizes
+			}))
+		};
+	}
+
+	/**
+	 * Connect to a single MCP server with detailed phase tracking.
+	 *
+	 * Performs the full MCP connection lifecycle:
+	 * 1. Transport creation (with automatic fallback)
+	 * 2. Client initialization and capability exchange
+	 * 3. Tool discovery via `listTools`
+	 *
+	 * Reports progress via `onPhase` callback at each step, enabling
+	 * UI progress indicators during connection.
+	 *
+	 * @param serverName - Display name for the server (used in logging)
+	 * @param serverConfig - Server URL, transport type, proxy, and auth configuration
+	 * @param clientInfo - Optional client identification (defaults to app info)
+	 * @param capabilities - Optional client capability declaration
+	 * @param onPhase - Optional callback for connection phase progress updates
+	 * @param listChangedHandlers - Optional handlers for server-initiated list change notifications
+	 * @returns Full connection object with client, transport, tools, server info, and timing
+	 * @throws {Error} If transport creation or connection fails
+	 */
+	static async connect(
+		serverName: string,
+		serverConfig: MCPServerConfig,
+		clientInfo?: Implementation,
+		capabilities?: ClientCapabilities,
+		onPhase?: MCPPhaseCallback,
+		listChangedHandlers?: ListChangedHandlers
+	): Promise<MCPConnection> {
+		const startTime = performance.now();
+		const effectiveClientInfo = clientInfo ?? DEFAULT_MCP_CONFIG.clientInfo;
+		const effectiveCapabilities = capabilities ?? DEFAULT_MCP_CONFIG.capabilities;
+
+		// Phase: Creating transport
+		onPhase?.(
+			MCPConnectionPhase.TRANSPORT_CREATING,
+			this.createLog(
+				MCPConnectionPhase.TRANSPORT_CREATING,
+				`Creating transport for ${serverConfig.url}`
+			)
+		);
+
+		if (import.meta.env.DEV) {
+			console.log(`[MCPService][${serverName}] Creating transport...`);
+		}
+
+		const { transport, type: transportType } = this.createTransport(serverConfig);
+
+		// Setup WebSocket reconnection handler
+		if (transportType === MCPTransportType.WEBSOCKET) {
+			transport.onclose = () => {
+				console.log(`[MCPService][${serverName}] WebSocket closed, notifying for reconnection`);
+				onPhase?.(
+					MCPConnectionPhase.DISCONNECTED,
+					this.createLog(MCPConnectionPhase.DISCONNECTED, 'WebSocket connection closed')
+				);
+			};
+		}
+
+		// Phase: Transport ready
+		onPhase?.(
+			MCPConnectionPhase.TRANSPORT_READY,
+			this.createLog(MCPConnectionPhase.TRANSPORT_READY, `Transport ready (${transportType})`),
+			{ transportType }
+		);
+
+		const client = new Client(
+			{
+				name: effectiveClientInfo.name,
+				version: effectiveClientInfo.version ?? DEFAULT_CLIENT_VERSION
+			},
+			{
+				capabilities: effectiveCapabilities,
+				listChanged: listChangedHandlers
+			}
+		);
+
+		// Phase: Initializing
+		onPhase?.(
+			MCPConnectionPhase.INITIALIZING,
+			this.createLog(MCPConnectionPhase.INITIALIZING, 'Sending initialize request...')
+		);
+
+		console.log(`[MCPService][${serverName}] Connecting to server...`);
+		await client.connect(transport);
+
+		const serverVersion = client.getServerVersion();
+		const serverCapabilities = client.getServerCapabilities();
+		const instructions = client.getInstructions();
+		const serverInfo = this.extractServerInfo(serverVersion);
+
+		// Phase: Capabilities exchanged
+		onPhase?.(
+			MCPConnectionPhase.CAPABILITIES_EXCHANGED,
+			this.createLog(
+				MCPConnectionPhase.CAPABILITIES_EXCHANGED,
+				'Capabilities exchanged successfully',
+				MCPLogLevel.INFO,
+				{
+					serverCapabilities,
+					serverInfo
+				}
+			),
+			{
+				serverInfo,
+				serverCapabilities,
+				clientCapabilities: effectiveCapabilities,
+				instructions
+			}
+		);
+
+		// Phase: Listing tools
+		onPhase?.(
+			MCPConnectionPhase.LISTING_TOOLS,
+			this.createLog(MCPConnectionPhase.LISTING_TOOLS, 'Listing available tools...')
+		);
+
+		console.log(`[MCPService][${serverName}] Connected, listing tools...`);
+		const tools = await this.listTools({
+			client,
+			transport,
+			tools: [],
+			serverName,
+			transportType,
+			connectionTimeMs: 0
+		});
+
+		const connectionTimeMs = Math.round(performance.now() - startTime);
+
+		// Phase: Connected
+		onPhase?.(
+			MCPConnectionPhase.CONNECTED,
+			this.createLog(
+				MCPConnectionPhase.CONNECTED,
+				`Connection established with ${tools.length} tools (${connectionTimeMs}ms)`
+			)
+		);
+
+		console.log(
+			`[MCPService][${serverName}] Initialization complete with ${tools.length} tools in ${connectionTimeMs}ms`
+		);
+
+		return {
+			client,
+			transport,
+			tools,
+			serverName,
+			transportType,
+			serverInfo,
+			serverCapabilities,
+			clientCapabilities: effectiveCapabilities,
+			protocolVersion: DEFAULT_MCP_CONFIG.protocolVersion,
+			instructions,
+			connectionTimeMs
+		};
+	}
+
+	/**
+	 * Disconnect from a server.
+	 * Clears the `onclose` handler to prevent reconnection attempts on voluntary disconnect.
+	 *
+	 * @param connection - The active MCP connection to close
+	 */
+	static async disconnect(connection: MCPConnection): Promise<void> {
+		console.log(`[MCPService][${connection.serverName}] Disconnecting...`);
+		try {
+			// Prevent reconnection on voluntary disconnect
+			if (connection.transport.onclose) {
+				connection.transport.onclose = undefined;
+			}
+
+			await connection.client.close();
+		} catch (error) {
+			console.warn(`[MCPService][${connection.serverName}] Error during disconnect:`, error);
+		}
+	}
+
+	/**
+	 * List tools from a connection.
+	 * Silently returns empty array on failure (logged as warning).
+	 *
+	 * @param connection - The MCP connection to query
+	 * @returns Array of available tools, or empty array on error
+	 */
+	static async listTools(connection: MCPConnection): Promise<Tool[]> {
+		try {
+			const result = await connection.client.listTools();
+
+			return result.tools ?? [];
+		} catch (error) {
+			console.warn(`[MCPService][${connection.serverName}] Failed to list tools:`, error);
+
+			return [];
+		}
+	}
+
+	/**
+	 * List prompts from a connection.
+	 * Silently returns empty array on failure (logged as warning).
+	 *
+	 * @param connection - The MCP connection to query
+	 * @returns Array of available prompts, or empty array on error
+	 */
+	static async listPrompts(connection: MCPConnection): Promise<Prompt[]> {
+		try {
+			const result = await connection.client.listPrompts();
+
+			return result.prompts ?? [];
+		} catch (error) {
+			console.warn(`[MCPService][${connection.serverName}] Failed to list prompts:`, error);
+
+			return [];
+		}
+	}
+
+	/**
+	 * Get a specific prompt with arguments.
+	 * Unlike list operations, this throws on failure since the caller explicitly
+	 * requested a specific prompt and needs to handle the error.
+	 *
+	 * @param connection - The MCP connection to use
+	 * @param name - The prompt name to retrieve
+	 * @param args - Optional key-value arguments to pass to the prompt
+	 * @returns The prompt result with messages and metadata
+	 * @throws {Error} If the prompt retrieval fails
+	 */
+	static async getPrompt(
+		connection: MCPConnection,
+		name: string,
+		args?: Record<string, string>
+	): Promise<GetPromptResult> {
+		try {
+			return await connection.client.getPrompt({ name, arguments: args });
+		} catch (error) {
+			console.error(`[MCPService][${connection.serverName}] Failed to get prompt:`, error);
+
+			throw error;
+		}
+	}
+
+	/**
+	 * Execute a tool call on a connection.
+	 * Supports abort signal for cancellable operations (e.g., when user stops generation).
+	 * Formats the raw tool result into a string representation.
+	 *
+	 * @param connection - The MCP connection to execute against
+	 * @param params - Tool name and arguments to execute
+	 * @param signal - Optional AbortSignal for cancellation support
+	 * @returns Formatted tool execution result with content string and error flag
+	 * @throws {Error} If tool execution fails or is aborted
+	 */
+	static async callTool(
+		connection: MCPConnection,
+		params: ToolCallParams,
+		signal?: AbortSignal
+	): Promise<ToolExecutionResult> {
+		throwIfAborted(signal);
+
+		try {
+			const result = await connection.client.callTool(
+				{ name: params.name, arguments: params.arguments },
+				undefined,
+				{ signal }
+			);
+
+			return {
+				content: this.formatToolResult(result as ToolCallResult),
+				isError: (result as ToolCallResult).isError ?? false
+			};
+		} catch (error) {
+			if (isAbortError(error)) {
+				throw error;
+			}
+
+			const message = error instanceof Error ? error.message : String(error);
+
+			throw new Error(`Tool execution failed: ${message}`);
+		}
+	}
+
+	/**
+	 * Format tool result content items to a single string.
+	 * Handles text, image (base64 data URL), and embedded resource content types.
+	 *
+	 * @param result - Raw tool call result from MCP SDK
+	 * @returns Concatenated string representation of all content items
+	 */
+	private static formatToolResult(result: ToolCallResult): string {
+		const content = result.content;
+		if (!Array.isArray(content)) return '';
+
+		return content
+			.map((item) => this.formatSingleContent(item))
+			.filter(Boolean)
+			.join('\n');
+	}
+
+	private static formatSingleContent(content: ToolResultContentItem): string {
+		if (content.type === MCPContentType.TEXT && content.text) {
+			return content.text;
+		}
+
+		if (content.type === MCPContentType.IMAGE && content.data) {
+			return createBase64DataUrl(content.mimeType ?? DEFAULT_IMAGE_MIME_TYPE, content.data);
+		}
+
+		if (content.type === MCPContentType.RESOURCE && content.resource) {
+			const resource = content.resource;
+
+			if (resource.text) return resource.text;
+			if (resource.blob) return resource.blob;
+
+			return JSON.stringify(resource);
+		}
+
+		if (content.data && content.mimeType) {
+			return createBase64DataUrl(content.mimeType, content.data);
+		}
+
+		return JSON.stringify(content);
+	}
+
+	/**
+	 *
+	 *
+	 * Completions Operations
+	 *
+	 *
+	 */
+
+	/**
+	 * Request completion suggestions from a server.
+	 * Used for autocompleting prompt arguments or resource URI templates.
+	 *
+	 * @param connection - The MCP connection to use
+	 * @param ref - Reference to the prompt or resource template
+	 * @param argument - The argument being completed (name and current value)
+	 * @returns Completion result with suggested values
+	 */
+	static async complete(
+		connection: MCPConnection,
+		ref: { type: MCPRefType.PROMPT; name: string } | { type: MCPRefType.RESOURCE; uri: string },
+		argument: { name: string; value: string }
+	): Promise<{ values: string[]; total?: number; hasMore?: boolean } | null> {
+		try {
+			const result = await connection.client.complete({
+				ref,
+				argument
+			});
+
+			return result.completion;
+		} catch (error) {
+			console.error(`[MCPService] Failed to get completions:`, error);
+
+			return null;
+		}
+	}
+
+	/**
+	 *
+	 *
+	 * Resources Operations
+	 *
+	 *
+	 */
+
+	/**
+	 * List resources from a connection.
+	 * @param connection - The MCP connection to use
+	 * @param cursor - Optional pagination cursor
+	 * @returns Array of available resources and optional next cursor
+	 */
+	static async listResources(
+		connection: MCPConnection,
+		cursor?: string
+	): Promise<{ resources: MCPResource[]; nextCursor?: string }> {
+		try {
+			const result = await connection.client.listResources(cursor ? { cursor } : undefined);
+
+			return {
+				resources: (result.resources ?? []) as MCPResource[],
+				nextCursor: result.nextCursor
+			};
+		} catch (error) {
+			console.warn(`[MCPService][${connection.serverName}] Failed to list resources:`, error);
+
+			return { resources: [] };
+		}
+	}
+
+	/**
+	 * List all resources from a connection (handles pagination automatically).
+	 * @param connection - The MCP connection to use
+	 * @returns Array of all available resources
+	 */
+	static async listAllResources(connection: MCPConnection): Promise<MCPResource[]> {
+		const allResources: MCPResource[] = [];
+		let cursor: string | undefined;
+
+		do {
+			const result = await this.listResources(connection, cursor);
+			allResources.push(...result.resources);
+			cursor = result.nextCursor;
+		} while (cursor);
+
+		return allResources;
+	}
+
+	/**
+	 * List resource templates from a connection.
+	 * @param connection - The MCP connection to use
+	 * @param cursor - Optional pagination cursor
+	 * @returns Array of available resource templates and optional next cursor
+	 */
+	static async listResourceTemplates(
+		connection: MCPConnection,
+		cursor?: string
+	): Promise<{ resourceTemplates: MCPResourceTemplate[]; nextCursor?: string }> {
+		try {
+			const result = await connection.client.listResourceTemplates(cursor ? { cursor } : undefined);
+
+			return {
+				resourceTemplates: (result.resourceTemplates ?? []) as MCPResourceTemplate[],
+				nextCursor: result.nextCursor
+			};
+		} catch (error) {
+			console.warn(
+				`[MCPService][${connection.serverName}] Failed to list resource templates:`,
+				error
+			);
+
+			return { resourceTemplates: [] };
+		}
+	}
+
+	/**
+	 * List all resource templates from a connection (handles pagination automatically).
+	 * @param connection - The MCP connection to use
+	 * @returns Array of all available resource templates
+	 */
+	static async listAllResourceTemplates(connection: MCPConnection): Promise<MCPResourceTemplate[]> {
+		const allTemplates: MCPResourceTemplate[] = [];
+		let cursor: string | undefined;
+
+		do {
+			const result = await this.listResourceTemplates(connection, cursor);
+			allTemplates.push(...result.resourceTemplates);
+			cursor = result.nextCursor;
+		} while (cursor);
+
+		return allTemplates;
+	}
+
+	/**
+	 * Read the contents of a resource.
+	 * @param connection - The MCP connection to use
+	 * @param uri - The URI of the resource to read
+	 * @returns The resource contents
+	 */
+	static async readResource(
+		connection: MCPConnection,
+		uri: string
+	): Promise<MCPReadResourceResult> {
+		try {
+			const result = await connection.client.readResource({ uri });
+
+			return {
+				contents: (result.contents ?? []) as MCPResourceContent[],
+				_meta: result._meta
+			};
+		} catch (error) {
+			console.error(`[MCPService][${connection.serverName}] Failed to read resource:`, error);
+
+			throw error;
+		}
+	}
+
+	/**
+	 * Subscribe to updates for a resource.
+	 * The server will send notifications/resources/updated when the resource changes.
+	 * @param connection - The MCP connection to use
+	 * @param uri - The URI of the resource to subscribe to
+	 */
+	static async subscribeResource(connection: MCPConnection, uri: string): Promise<void> {
+		try {
+			await connection.client.subscribeResource({ uri });
+
+			console.log(`[MCPService][${connection.serverName}] Subscribed to resource: ${uri}`);
+		} catch (error) {
+			console.error(
+				`[MCPService][${connection.serverName}] Failed to subscribe to resource:`,
+				error
+			);
+
+			throw error;
+		}
+	}
+
+	/**
+	 * Unsubscribe from updates for a resource.
+	 * @param connection - The MCP connection to use
+	 * @param uri - The URI of the resource to unsubscribe from
+	 */
+	static async unsubscribeResource(connection: MCPConnection, uri: string): Promise<void> {
+		try {
+			await connection.client.unsubscribeResource({ uri });
+
+			console.log(`[MCPService][${connection.serverName}] Unsubscribed from resource: ${uri}`);
+		} catch (error) {
+			console.error(
+				`[MCPService][${connection.serverName}] Failed to unsubscribe from resource:`,
+				error
+			);
+
+			throw error;
+		}
+	}
+
+	/**
+	 * Check if a connection supports resources.
+	 * Per MCP spec: presence of the `resources` key (even as empty object `{}`) indicates support.
+	 * Empty object means resources are supported but no sub-features (subscribe, listChanged).
+	 *
+	 * @param connection - The MCP connection to check
+	 * @returns Whether the server declares the resources capability
+	 */
+	static supportsResources(connection: MCPConnection): boolean {
+		// Per MCP spec: "Servers that support resources MUST declare the resources capability"
+		// The presence of the key indicates support, even if it's an empty object
+		return connection.serverCapabilities?.resources !== undefined;
+	}
+
+	/**
+	 * Check if a connection supports resource subscriptions.
+	 * @param connection - The MCP connection to check
+	 * @returns Whether the server supports resource subscriptions
+	 */
+	static supportsResourceSubscriptions(connection: MCPConnection): boolean {
+		return !!connection.serverCapabilities?.resources?.subscribe;
+	}
+}
diff --git a/tools/server/webui/src/lib/stores/agentic.svelte.ts b/tools/server/webui/src/lib/stores/agentic.svelte.ts
new file mode 100644
index 00000000000..17ce18d10a0
--- /dev/null
+++ b/tools/server/webui/src/lib/stores/agentic.svelte.ts
@@ -0,0 +1,706 @@
+/**
+ * agenticStore - Reactive State Store for Agentic Loop Orchestration
+ *
+ * Manages multi-turn agentic loop with MCP tools:
+ * - LLM streaming with tool call detection
+ * - Tool execution via mcpStore
+ * - Session state management
+ * - Turn limit enforcement
+ *
+ * **Architecture & Relationships:**
+ * - **ChatService**: Stateless API layer (sendMessage, streaming)
+ * - **mcpStore**: MCP connection management and tool execution
+ * - **agenticStore** (this): Reactive state + business logic
+ *
+ * @see ChatService in services/chat.service.ts for API operations
+ * @see mcpStore in stores/mcp.svelte.ts for MCP operations
+ */
+
+import { SvelteMap } from 'svelte/reactivity';
+import { ChatService } from '$lib/services';
+import { config } from '$lib/stores/settings.svelte';
+import { mcpStore } from '$lib/stores/mcp.svelte';
+import { modelsStore } from '$lib/stores/models.svelte';
+import { isAbortError } from '$lib/utils';
+import {
+	DEFAULT_AGENTIC_CONFIG,
+	AGENTIC_TAGS,
+	NEWLINE_SEPARATOR,
+	TURN_LIMIT_MESSAGE,
+	LLM_ERROR_BLOCK_START,
+	LLM_ERROR_BLOCK_END
+} from '$lib/constants/agentic';
+import {
+	IMAGE_MIME_TO_EXTENSION,
+	DATA_URI_BASE64_REGEX,
+	MCP_ATTACHMENT_NAME_PREFIX,
+	DEFAULT_IMAGE_EXTENSION
+} from '$lib/constants/mcp-resource';
+import { AttachmentType, ContentPartType, MessageRole, MimeTypePrefix } from '$lib/enums';
+import type {
+	AgenticFlowParams,
+	AgenticFlowResult,
+	AgenticSession,
+	AgenticConfig,
+	SettingsConfigType,
+	McpServerOverride,
+	MCPToolCall
+} from '$lib/types';
+import type {
+	AgenticMessage,
+	AgenticToolCallList,
+	AgenticFlowCallbacks,
+	AgenticFlowOptions
+} from '$lib/types/agentic';
+import type {
+	ApiChatCompletionToolCall,
+	ApiChatMessageData,
+	ApiChatMessageContentPart
+} from '$lib/types/api';
+import type {
+	ChatMessagePromptProgress,
+	ChatMessageTimings,
+	ChatMessageAgenticTimings,
+	ChatMessageToolCallTiming,
+	ChatMessageAgenticTurnStats
+} from '$lib/types/chat';
+import type {
+	DatabaseMessage,
+	DatabaseMessageExtra,
+	DatabaseMessageExtraImageFile
+} from '$lib/types/database';
+
+function createDefaultSession(): AgenticSession {
+	return {
+		isRunning: false,
+		currentTurn: 0,
+		totalToolCalls: 0,
+		lastError: null,
+		streamingToolCall: null
+	};
+}
+
+function toAgenticMessages(messages: ApiChatMessageData[]): AgenticMessage[] {
+	return messages.map((message) => {
+		if (
+			message.role === MessageRole.ASSISTANT &&
+			message.tool_calls &&
+			message.tool_calls.length > 0
+		) {
+			return {
+				role: MessageRole.ASSISTANT,
+				content: message.content,
+				tool_calls: message.tool_calls.map((call, index) => ({
+					id: call.id ?? `call_${index}`,
+					type: (call.type as 'function') ?? 'function',
+					function: { name: call.function?.name ?? '', arguments: call.function?.arguments ?? '' }
+				}))
+			} satisfies AgenticMessage;
+		}
+		if (message.role === MessageRole.TOOL && message.tool_call_id) {
+			return {
+				role: MessageRole.TOOL,
+				tool_call_id: message.tool_call_id,
+				content: typeof message.content === 'string' ? message.content : ''
+			} satisfies AgenticMessage;
+		}
+		return {
+			role: message.role as MessageRole.SYSTEM | MessageRole.USER,
+			content: message.content
+		} satisfies AgenticMessage;
+	});
+}
+
+class AgenticStore {
+	private _sessions = $state<Map<string, AgenticSession>>(new Map());
+
+	get isReady(): boolean {
+		return true;
+	}
+	get isAnyRunning(): boolean {
+		for (const session of this._sessions.values()) {
+			if (session.isRunning) return true;
+		}
+		return false;
+	}
+
+	getSession(conversationId: string): AgenticSession {
+		let session = this._sessions.get(conversationId);
+		if (!session) {
+			session = createDefaultSession();
+			this._sessions.set(conversationId, session);
+		}
+		return session;
+	}
+
+	private updateSession(conversationId: string, update: Partial<AgenticSession>): void {
+		const session = this.getSession(conversationId);
+		this._sessions.set(conversationId, { ...session, ...update });
+	}
+
+	clearSession(conversationId: string): void {
+		this._sessions.delete(conversationId);
+	}
+
+	getActiveSessions(): Array<{ conversationId: string; session: AgenticSession }> {
+		const active: Array<{ conversationId: string; session: AgenticSession }> = [];
+		for (const [conversationId, session] of this._sessions.entries()) {
+			if (session.isRunning) active.push({ conversationId, session });
+		}
+		return active;
+	}
+
+	isRunning(conversationId: string): boolean {
+		return this.getSession(conversationId).isRunning;
+	}
+
+	currentTurn(conversationId: string): number {
+		return this.getSession(conversationId).currentTurn;
+	}
+
+	totalToolCalls(conversationId: string): number {
+		return this.getSession(conversationId).totalToolCalls;
+	}
+
+	lastError(conversationId: string): Error | null {
+		return this.getSession(conversationId).lastError;
+	}
+
+	streamingToolCall(conversationId: string): { name: string; arguments: string } | null {
+		return this.getSession(conversationId).streamingToolCall;
+	}
+
+	clearError(conversationId: string): void {
+		this.updateSession(conversationId, { lastError: null });
+	}
+
+	getConfig(settings: SettingsConfigType, perChatOverrides?: McpServerOverride[]): AgenticConfig {
+		const maxTurns = Number(settings.agenticMaxTurns) || DEFAULT_AGENTIC_CONFIG.maxTurns;
+		const maxToolPreviewLines =
+			Number(settings.agenticMaxToolPreviewLines) || DEFAULT_AGENTIC_CONFIG.maxToolPreviewLines;
+		return {
+			enabled: mcpStore.hasEnabledServers(perChatOverrides) && DEFAULT_AGENTIC_CONFIG.enabled,
+			maxTurns,
+			maxToolPreviewLines
+		};
+	}
+
+	async runAgenticFlow(params: AgenticFlowParams): Promise<AgenticFlowResult> {
+		const { conversationId, messages, options = {}, callbacks, signal, perChatOverrides } = params;
+		const {
+			onChunk,
+			onReasoningChunk,
+			onToolCallChunk,
+			onAttachments,
+			onModel,
+			onComplete,
+			onError,
+			onTimings
+		} = callbacks;
+
+		const agenticConfig = this.getConfig(config(), perChatOverrides);
+		if (!agenticConfig.enabled) return { handled: false };
+
+		const initialized = await mcpStore.ensureInitialized(perChatOverrides);
+		if (!initialized) {
+			console.log('[AgenticStore] MCP not initialized, falling back to standard chat');
+			return { handled: false };
+		}
+
+		const tools = mcpStore.getToolDefinitionsForLLM();
+		if (tools.length === 0) {
+			console.log('[AgenticStore] No tools available, falling back to standard chat');
+			return { handled: false };
+		}
+
+		console.log(`[AgenticStore] Starting agentic flow with ${tools.length} tools`);
+
+		const normalizedMessages: ApiChatMessageData[] = messages
+			.map((msg) => {
+				if ('id' in msg && 'convId' in msg && 'timestamp' in msg)
+					return ChatService.convertDbMessageToApiChatMessageData(
+						msg as DatabaseMessage & { extra?: DatabaseMessageExtra[] }
+					);
+				return msg as ApiChatMessageData;
+			})
+			.filter((msg) => {
+				if (msg.role === MessageRole.SYSTEM) {
+					const content = typeof msg.content === 'string' ? msg.content : '';
+					return content.trim().length > 0;
+				}
+				return true;
+			});
+
+		this.updateSession(conversationId, {
+			isRunning: true,
+			currentTurn: 0,
+			totalToolCalls: 0,
+			lastError: null
+		});
+		mcpStore.acquireConnection();
+
+		try {
+			await this.executeAgenticLoop({
+				conversationId,
+				messages: normalizedMessages,
+				options,
+				tools,
+				agenticConfig,
+				callbacks: {
+					onChunk,
+					onReasoningChunk,
+					onToolCallChunk,
+					onAttachments,
+					onModel,
+					onComplete,
+					onError,
+					onTimings
+				},
+				signal
+			});
+			return { handled: true };
+		} catch (error) {
+			const normalizedError = error instanceof Error ? error : new Error(String(error));
+			this.updateSession(conversationId, { lastError: normalizedError });
+			onError?.(normalizedError);
+			return { handled: true, error: normalizedError };
+		} finally {
+			this.updateSession(conversationId, { isRunning: false });
+			await mcpStore
+				.releaseConnection()
+				.catch((err: unknown) =>
+					console.warn('[AgenticStore] Failed to release MCP connection:', err)
+				);
+		}
+	}
+
+	private async executeAgenticLoop(params: {
+		conversationId: string;
+		messages: ApiChatMessageData[];
+		options: AgenticFlowOptions;
+		tools: ReturnType<typeof mcpStore.getToolDefinitionsForLLM>;
+		agenticConfig: AgenticConfig;
+		callbacks: AgenticFlowCallbacks;
+		signal?: AbortSignal;
+	}): Promise<void> {
+		const { conversationId, messages, options, tools, agenticConfig, callbacks, signal } = params;
+		const {
+			onChunk,
+			onReasoningChunk,
+			onToolCallChunk,
+			onAttachments,
+			onModel,
+			onComplete,
+			onTimings
+		} = callbacks;
+
+		const sessionMessages: AgenticMessage[] = toAgenticMessages(messages);
+		const allToolCalls: ApiChatCompletionToolCall[] = [];
+		let capturedTimings: ChatMessageTimings | undefined;
+
+		const agenticTimings: ChatMessageAgenticTimings = {
+			turns: 0,
+			toolCallsCount: 0,
+			toolsMs: 0,
+			toolCalls: [],
+			perTurn: [],
+			llm: { predicted_n: 0, predicted_ms: 0, prompt_n: 0, prompt_ms: 0 }
+		};
+		const maxTurns = agenticConfig.maxTurns;
+		const maxToolPreviewLines = agenticConfig.maxToolPreviewLines;
+
+		for (let turn = 0; turn < maxTurns; turn++) {
+			this.updateSession(conversationId, { currentTurn: turn + 1 });
+			agenticTimings.turns = turn + 1;
+
+			if (signal?.aborted) {
+				onComplete?.(
+					'',
+					undefined,
+					this.buildFinalTimings(capturedTimings, agenticTimings),
+					undefined
+				);
+				return;
+			}
+
+			let turnContent = '';
+			let turnToolCalls: ApiChatCompletionToolCall[] = [];
+			let lastStreamingToolCallName = '';
+			let lastStreamingToolCallArgsLength = 0;
+			const emittedToolCallStates = new SvelteMap<
+				number,
+				{ emittedOnce: boolean; lastArgs: string }
+			>();
+			let turnTimings: ChatMessageTimings | undefined;
+
+			const turnStats: ChatMessageAgenticTurnStats = {
+				turn: turn + 1,
+				llm: { predicted_n: 0, predicted_ms: 0, prompt_n: 0, prompt_ms: 0 },
+				toolCalls: [],
+				toolsMs: 0
+			};
+
+			try {
+				await ChatService.sendMessage(
+					sessionMessages as ApiChatMessageData[],
+					{
+						...options,
+						stream: true,
+						tools: tools.length > 0 ? tools : undefined,
+						onChunk: (chunk: string) => {
+							turnContent += chunk;
+							onChunk?.(chunk);
+						},
+						onReasoningChunk,
+						onToolCallChunk: (serialized: string) => {
+							try {
+								turnToolCalls = JSON.parse(serialized) as ApiChatCompletionToolCall[];
+								for (let i = 0; i < turnToolCalls.length; i++) {
+									const toolCall = turnToolCalls[i];
+									const toolName = toolCall.function?.name ?? '';
+									const toolArgs = toolCall.function?.arguments ?? '';
+									const state = emittedToolCallStates.get(i) || {
+										emittedOnce: false,
+										lastArgs: ''
+									};
+									if (!state.emittedOnce) {
+										const output = `\n\n${AGENTIC_TAGS.TOOL_CALL_START}\n${AGENTIC_TAGS.TOOL_NAME_PREFIX}${toolName}${AGENTIC_TAGS.TAG_SUFFIX}\n${AGENTIC_TAGS.TOOL_ARGS_START}\n${toolArgs}`;
+										onChunk?.(output);
+										state.emittedOnce = true;
+										state.lastArgs = toolArgs;
+										emittedToolCallStates.set(i, state);
+									} else if (toolArgs.length > state.lastArgs.length) {
+										onChunk?.(toolArgs.slice(state.lastArgs.length));
+										state.lastArgs = toolArgs;
+										emittedToolCallStates.set(i, state);
+									}
+								}
+								if (turnToolCalls.length > 0 && turnToolCalls[0]?.function) {
+									const name = turnToolCalls[0].function.name || '';
+									const args = turnToolCalls[0].function.arguments || '';
+									const argsLengthBucket = Math.floor(args.length / 100);
+									if (
+										name !== lastStreamingToolCallName ||
+										argsLengthBucket !== lastStreamingToolCallArgsLength
+									) {
+										lastStreamingToolCallName = name;
+										lastStreamingToolCallArgsLength = argsLengthBucket;
+										this.updateSession(conversationId, {
+											streamingToolCall: { name, arguments: args }
+										});
+									}
+								}
+							} catch {
+								/* Ignore parse errors during streaming */
+							}
+						},
+						onModel,
+						onTimings: (timings?: ChatMessageTimings, progress?: ChatMessagePromptProgress) => {
+							onTimings?.(timings, progress);
+							if (timings) {
+								capturedTimings = timings;
+								turnTimings = timings;
+							}
+						},
+						onComplete: () => {
+							/* Completion handled after sendMessage resolves */
+						},
+						onError: (error: Error) => {
+							throw error;
+						}
+					},
+					undefined,
+					signal
+				);
+
+				this.updateSession(conversationId, { streamingToolCall: null });
+
+				if (turnTimings) {
+					agenticTimings.llm.predicted_n += turnTimings.predicted_n || 0;
+					agenticTimings.llm.predicted_ms += turnTimings.predicted_ms || 0;
+					agenticTimings.llm.prompt_n += turnTimings.prompt_n || 0;
+					agenticTimings.llm.prompt_ms += turnTimings.prompt_ms || 0;
+					turnStats.llm.predicted_n = turnTimings.predicted_n || 0;
+					turnStats.llm.predicted_ms = turnTimings.predicted_ms || 0;
+					turnStats.llm.prompt_n = turnTimings.prompt_n || 0;
+					turnStats.llm.prompt_ms = turnTimings.prompt_ms || 0;
+				}
+			} catch (error) {
+				if (signal?.aborted) {
+					onComplete?.(
+						'',
+						undefined,
+						this.buildFinalTimings(capturedTimings, agenticTimings),
+						undefined
+					);
+
+					return;
+				}
+				const normalizedError = error instanceof Error ? error : new Error('LLM stream error');
+				onChunk?.(`${LLM_ERROR_BLOCK_START}${normalizedError.message}${LLM_ERROR_BLOCK_END}`);
+				onComplete?.(
+					'',
+					undefined,
+					this.buildFinalTimings(capturedTimings, agenticTimings),
+					undefined
+				);
+
+				throw normalizedError;
+			}
+
+			if (turnToolCalls.length === 0) {
+				agenticTimings.perTurn!.push(turnStats);
+
+				onComplete?.(
+					'',
+					undefined,
+					this.buildFinalTimings(capturedTimings, agenticTimings),
+					undefined
+				);
+
+				return;
+			}
+
+			const normalizedCalls = this.normalizeToolCalls(turnToolCalls);
+			if (normalizedCalls.length === 0) {
+				onComplete?.(
+					'',
+					undefined,
+					this.buildFinalTimings(capturedTimings, agenticTimings),
+					undefined
+				);
+				return;
+			}
+
+			for (const call of normalizedCalls) {
+				allToolCalls.push({
+					id: call.id,
+					type: call.type,
+					function: call.function ? { ...call.function } : undefined
+				});
+			}
+
+			this.updateSession(conversationId, { totalToolCalls: allToolCalls.length });
+			onToolCallChunk?.(JSON.stringify(allToolCalls));
+
+			sessionMessages.push({
+				role: MessageRole.ASSISTANT,
+				content: turnContent || undefined,
+				tool_calls: normalizedCalls
+			});
+
+			for (const toolCall of normalizedCalls) {
+				if (signal?.aborted) {
+					onComplete?.(
+						'',
+						undefined,
+						this.buildFinalTimings(capturedTimings, agenticTimings),
+						undefined
+					);
+
+					return;
+				}
+
+				const toolStartTime = performance.now();
+				const mcpCall: MCPToolCall = {
+					id: toolCall.id,
+					function: { name: toolCall.function.name, arguments: toolCall.function.arguments }
+				};
+
+				let result: string;
+				let toolSuccess = true;
+
+				try {
+					const executionResult = await mcpStore.executeTool(mcpCall, signal);
+					result = executionResult.content;
+				} catch (error) {
+					if (isAbortError(error)) {
+						onComplete?.(
+							'',
+							undefined,
+							this.buildFinalTimings(capturedTimings, agenticTimings),
+							undefined
+						);
+
+						return;
+					}
+					result = `Error: ${error instanceof Error ? error.message : String(error)}`;
+					toolSuccess = false;
+				}
+
+				const toolDurationMs = performance.now() - toolStartTime;
+				const toolTiming: ChatMessageToolCallTiming = {
+					name: toolCall.function.name,
+					duration_ms: Math.round(toolDurationMs),
+					success: toolSuccess
+				};
+
+				agenticTimings.toolCalls!.push(toolTiming);
+				agenticTimings.toolCallsCount++;
+				agenticTimings.toolsMs += Math.round(toolDurationMs);
+				turnStats.toolCalls.push(toolTiming);
+				turnStats.toolsMs += Math.round(toolDurationMs);
+
+				if (signal?.aborted) {
+					onComplete?.(
+						'',
+						undefined,
+						this.buildFinalTimings(capturedTimings, agenticTimings),
+						undefined
+					);
+
+					return;
+				}
+
+				const { cleanedResult, attachments } = this.extractBase64Attachments(result);
+				if (attachments.length > 0) onAttachments?.(attachments);
+
+				this.emitToolCallResult(cleanedResult, maxToolPreviewLines, onChunk);
+
+				const contentParts: ApiChatMessageContentPart[] = [
+					{ type: ContentPartType.TEXT, text: cleanedResult }
+				];
+				for (const attachment of attachments) {
+					if (attachment.type === AttachmentType.IMAGE) {
+						if (modelsStore.modelSupportsVision(options.model ?? '')) {
+							contentParts.push({
+								type: ContentPartType.IMAGE_URL,
+								image_url: { url: (attachment as DatabaseMessageExtraImageFile).base64Url }
+							});
+						} else {
+							console.info(
+								`[AgenticStore] Skipping image attachment (model "${options.model}" does not support vision)`
+							);
+						}
+					}
+				}
+
+				sessionMessages.push({
+					role: MessageRole.TOOL,
+					tool_call_id: toolCall.id,
+					content: contentParts.length === 1 ? cleanedResult : contentParts
+				});
+			}
+
+			if (turnStats.toolCalls.length > 0) agenticTimings.perTurn!.push(turnStats);
+		}
+
+		onChunk?.(TURN_LIMIT_MESSAGE);
+		onComplete?.('', undefined, this.buildFinalTimings(capturedTimings, agenticTimings), undefined);
+	}
+
+	private buildFinalTimings(
+		capturedTimings: ChatMessageTimings | undefined,
+		agenticTimings: ChatMessageAgenticTimings
+	): ChatMessageTimings | undefined {
+		if (agenticTimings.toolCallsCount === 0) return capturedTimings;
+		return {
+			predicted_n: capturedTimings?.predicted_n,
+			predicted_ms: capturedTimings?.predicted_ms,
+			prompt_n: capturedTimings?.prompt_n,
+			prompt_ms: capturedTimings?.prompt_ms,
+			cache_n: capturedTimings?.cache_n,
+			agentic: agenticTimings
+		};
+	}
+
+	private normalizeToolCalls(toolCalls: ApiChatCompletionToolCall[]): AgenticToolCallList {
+		if (!toolCalls) return [];
+		return toolCalls.map((call, index) => ({
+			id: call?.id ?? `tool_${index}`,
+			type: (call?.type as 'function') ?? 'function',
+			function: { name: call?.function?.name ?? '', arguments: call?.function?.arguments ?? '' }
+		}));
+	}
+
+	private emitToolCallResult(
+		result: string,
+		maxLines: number,
+		emit?: (chunk: string) => void
+	): void {
+		if (!emit) {
+			return;
+		}
+
+		let output = `\n${AGENTIC_TAGS.TOOL_ARGS_END}`;
+		const lines = result.split(NEWLINE_SEPARATOR);
+		const trimmedLines = lines.length > maxLines ? lines.slice(-maxLines) : lines;
+
+		output += `\n${trimmedLines.join('\n')}\n${AGENTIC_TAGS.TOOL_CALL_END}\n`;
+		emit(output);
+	}
+
+	private extractBase64Attachments(result: string): {
+		cleanedResult: string;
+		attachments: DatabaseMessageExtra[];
+	} {
+		if (!result.trim()) {
+			return { cleanedResult: result, attachments: [] };
+		}
+
+		const lines = result.split(NEWLINE_SEPARATOR);
+		const attachments: DatabaseMessageExtra[] = [];
+		let attachmentIndex = 0;
+
+		const cleanedLines = lines.map((line) => {
+			const trimmedLine = line.trim();
+
+			const match = trimmedLine.match(DATA_URI_BASE64_REGEX);
+			if (!match) {
+				return line;
+			}
+
+			const mimeType = match[1].toLowerCase();
+			const base64Data = match[2];
+
+			if (!base64Data) {
+				return line;
+			}
+
+			attachmentIndex += 1;
+			const name = this.buildAttachmentName(mimeType, attachmentIndex);
+
+			if (mimeType.startsWith(MimeTypePrefix.IMAGE)) {
+				attachments.push({ type: AttachmentType.IMAGE, name, base64Url: trimmedLine });
+
+				return `[Attachment saved: ${name}]`;
+			}
+
+			return line;
+		});
+
+		return { cleanedResult: cleanedLines.join(NEWLINE_SEPARATOR), attachments };
+	}
+
+	private buildAttachmentName(mimeType: string, index: number): string {
+		const extension = IMAGE_MIME_TO_EXTENSION[mimeType] ?? DEFAULT_IMAGE_EXTENSION;
+
+		return `${MCP_ATTACHMENT_NAME_PREFIX}-${Date.now()}-${index}.${extension}`;
+	}
+}
+
+export const agenticStore = new AgenticStore();
+
+export function agenticIsRunning(conversationId: string) {
+	return agenticStore.isRunning(conversationId);
+}
+
+export function agenticCurrentTurn(conversationId: string) {
+	return agenticStore.currentTurn(conversationId);
+}
+
+export function agenticTotalToolCalls(conversationId: string) {
+	return agenticStore.totalToolCalls(conversationId);
+}
+
+export function agenticLastError(conversationId: string) {
+	return agenticStore.lastError(conversationId);
+}
+
+export function agenticStreamingToolCall(conversationId: string) {
+	return agenticStore.streamingToolCall(conversationId);
+}
+
+export function agenticIsAnyRunning() {
+	return agenticStore.isAnyRunning;
+}
diff --git a/tools/server/webui/src/lib/stores/chat.svelte.ts b/tools/server/webui/src/lib/stores/chat.svelte.ts
index 362e6d44b31..5cb9d3a4b1e 100644
--- a/tools/server/webui/src/lib/stores/chat.svelte.ts
+++ b/tools/server/webui/src/lib/stores/chat.svelte.ts
@@ -1,6 +1,22 @@
+/**
+ * chatStore - Reactive State Store for Chat Operations
+ *
+ * Manages chat lifecycle, streaming, message operations, and processing state.
+ *
+ * **Architecture & Relationships:**
+ * - **ChatService**: Stateless API layer (sendMessage, streaming)
+ * - **chatStore** (this): Reactive state + business logic
+ * - **conversationsStore**: Conversation persistence and navigation
+ *
+ * @see ChatService in services/chat.service.ts for API operations
+ */
+
+import { SvelteMap } from 'svelte/reactivity';
 import { DatabaseService, ChatService } from '$lib/services';
 import { conversationsStore } from '$lib/stores/conversations.svelte';
 import { config } from '$lib/stores/settings.svelte';
+import { agenticStore } from '$lib/stores/agentic.svelte';
+import { mcpStore } from '$lib/stores/mcp.svelte';
 import { contextSize, isRouterMode } from '$lib/stores/server.svelte';
 import {
 	selectedModelName,
@@ -11,618 +27,418 @@ import {
 	normalizeModelName,
 	filterByLeafNodeId,
 	findDescendantMessages,
-	findLeafNode
+	findLeafNode,
+	isAbortError
 } from '$lib/utils';
-import { SvelteMap } from 'svelte/reactivity';
-import { DEFAULT_CONTEXT } from '$lib/constants/default-context';
 import { SYSTEM_MESSAGE_PLACEHOLDER } from '$lib/constants/ui';
+import { REASONING_TAGS } from '$lib/constants/agentic';
+import {
+	MAX_INACTIVE_CONVERSATION_STATES,
+	INACTIVE_CONVERSATION_STATE_MAX_AGE_MS
+} from '$lib/constants/cache';
+import type {
+	ChatMessageTimings,
+	ChatMessagePromptProgress,
+	ChatStreamCallbacks,
+	ErrorDialogState
+} from '$lib/types/chat';
+import type { ApiProcessingState, DatabaseMessage, DatabaseMessageExtra } from '$lib/types';
+import { ErrorDialogType, MessageRole, MessageType } from '$lib/enums';
+
+interface ConversationStateEntry {
+	lastAccessed: number;
+}
 
-/**
- * chatStore - Active AI interaction and streaming state management
- *
- * **Terminology - Chat vs Conversation:**
- * - **Chat**: The active interaction space with the Chat Completions API. Represents the
- *   real-time streaming session, loading states, and UI visualization of AI communication.
- *   A "chat" is ephemeral - it exists only while the user is actively interacting with the AI.
- * - **Conversation**: The persistent database entity storing all messages and metadata.
- *   Managed by conversationsStore, conversations persist across sessions and page reloads.
- *
- * This store manages all active AI interactions including real-time streaming, response
- * generation, and per-chat loading states. It handles the runtime layer between UI and
- * AI backend, supporting concurrent streaming across multiple conversations.
- *
- * **Architecture & Relationships:**
- * - **chatStore** (this class): Active AI session and streaming management
- *   - Manages real-time AI response streaming via ChatService
- *   - Tracks per-chat loading and streaming states for concurrent sessions
- *   - Handles message operations (send, edit, regenerate, branch)
- *   - Coordinates with conversationsStore for persistence
- *
- * - **conversationsStore**: Provides conversation data and message arrays for chat context
- * - **ChatService**: Low-level API communication with llama.cpp server
- * - **DatabaseService**: Message persistence and retrieval
- *
- * **Key Features:**
- * - **AI Streaming**: Real-time token streaming with abort support
- * - **Concurrent Chats**: Independent loading/streaming states per conversation
- * - **Message Branching**: Edit, regenerate, and branch conversation trees
- * - **Error Handling**: Timeout and server error recovery with user feedback
- * - **Graceful Stop**: Save partial responses when stopping generation
- *
- * **State Management:**
- * - Global `isLoading` and `currentResponse` for active chat UI
- * - `chatLoadingStates` Map for per-conversation streaming tracking
- * - `chatStreamingStates` Map for per-conversation streaming content
- * - `processingStates` Map for per-conversation processing state (timing/context info)
- * - Automatic state sync when switching between conversations
- */
-class ChatStore {
-	// ─────────────────────────────────────────────────────────────────────────────
-	// State
-	// ─────────────────────────────────────────────────────────────────────────────
+const countOccurrences = (source: string, token: string): number =>
+	source ? source.split(token).length - 1 : 0;
+const hasUnclosedReasoningTag = (content: string): boolean =>
+	countOccurrences(content, REASONING_TAGS.START) > countOccurrences(content, REASONING_TAGS.END);
+const wrapReasoningContent = (content: string, reasoningContent?: string): string => {
+	if (!reasoningContent) return content;
+	return `${REASONING_TAGS.START}${reasoningContent}${REASONING_TAGS.END}${content}`;
+};
 
+class ChatStore {
 	activeProcessingState = $state<ApiProcessingState | null>(null);
 	currentResponse = $state('');
-	errorDialogState = $state<{
-		type: 'timeout' | 'server';
-		message: string;
-		contextInfo?: { n_prompt_tokens: number; n_ctx: number };
-	} | null>(null);
+	errorDialogState = $state<ErrorDialogState | null>(null);
 	isLoading = $state(false);
 	chatLoadingStates = new SvelteMap<string, boolean>();
 	chatStreamingStates = new SvelteMap<string, { response: string; messageId: string }>();
 	private abortControllers = new SvelteMap<string, AbortController>();
 	private processingStates = new SvelteMap<string, ApiProcessingState | null>();
+	private conversationStateTimestamps = new SvelteMap<string, ConversationStateEntry>();
 	private activeConversationId = $state<string | null>(null);
 	private isStreamingActive = $state(false);
 	private isEditModeActive = $state(false);
 	private addFilesHandler: ((files: File[]) => void) | null = $state(null);
 	pendingEditMessageId = $state<string | null>(null);
-	// Draft preservation for navigation (e.g., when adding system prompt from welcome page)
+	private messageUpdateCallback:
+		| ((messageId: string, updates: Partial<DatabaseMessage>) => void)
+		| null = null;
 	private _pendingDraftMessage = $state<string>('');
 	private _pendingDraftFiles = $state<ChatUploadedFile[]>([]);
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Loading State
-	// ─────────────────────────────────────────────────────────────────────────────
-
 	private setChatLoading(convId: string, loading: boolean): void {
+		this.touchConversationState(convId);
 		if (loading) {
 			this.chatLoadingStates.set(convId, true);
-			if (conversationsStore.activeConversation?.id === convId) this.isLoading = true;
+			if (convId === conversationsStore.activeConversation?.id) this.isLoading = true;
 		} else {
 			this.chatLoadingStates.delete(convId);
-			if (conversationsStore.activeConversation?.id === convId) this.isLoading = false;
+			if (convId === conversationsStore.activeConversation?.id) this.isLoading = false;
 		}
 	}
-
-	private isChatLoading(convId: string): boolean {
-		return this.chatLoadingStates.get(convId) || false;
-	}
-
 	private setChatStreaming(convId: string, response: string, messageId: string): void {
+		this.touchConversationState(convId);
 		this.chatStreamingStates.set(convId, { response, messageId });
-		if (conversationsStore.activeConversation?.id === convId) this.currentResponse = response;
+		if (convId === conversationsStore.activeConversation?.id) this.currentResponse = response;
 	}
-
 	private clearChatStreaming(convId: string): void {
 		this.chatStreamingStates.delete(convId);
-		if (conversationsStore.activeConversation?.id === convId) this.currentResponse = '';
+		if (convId === conversationsStore.activeConversation?.id) this.currentResponse = '';
 	}
-
 	private getChatStreaming(convId: string): { response: string; messageId: string } | undefined {
 		return this.chatStreamingStates.get(convId);
 	}
-
 	syncLoadingStateForChat(convId: string): void {
-		this.isLoading = this.isChatLoading(convId);
-		const streamingState = this.getChatStreaming(convId);
-		this.currentResponse = streamingState?.response || '';
-		this.isStreamingActive = streamingState !== undefined;
+		this.isLoading = this.chatLoadingStates.get(convId) || false;
+		const s = this.chatStreamingStates.get(convId);
+		this.currentResponse = s?.response || '';
+		this.isStreamingActive = s !== undefined;
 		this.setActiveProcessingConversation(convId);
-
 		// Sync streaming content to activeMessages so UI displays current content
-		if (streamingState?.response && streamingState?.messageId) {
-			const idx = conversationsStore.findMessageIndex(streamingState.messageId);
+		if (s?.response && s?.messageId) {
+			const idx = conversationsStore.findMessageIndex(s.messageId);
 			if (idx !== -1) {
-				conversationsStore.updateMessageAtIndex(idx, { content: streamingState.response });
+				conversationsStore.updateMessageAtIndex(idx, { content: s.response });
 			}
 		}
 	}
 
-	/**
-	 * Clears global UI state without affecting background streaming.
-	 * Used when navigating to empty/new chat while other chats stream in background.
-	 */
 	clearUIState(): void {
 		this.isLoading = false;
 		this.currentResponse = '';
 		this.isStreamingActive = false;
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Processing State
-	// ─────────────────────────────────────────────────────────────────────────────
-
-	/**
-	 * Set the active conversation for statistics display
-	 */
 	setActiveProcessingConversation(conversationId: string | null): void {
 		this.activeConversationId = conversationId;
-
-		if (conversationId) {
-			this.activeProcessingState = this.processingStates.get(conversationId) || null;
-		} else {
-			this.activeProcessingState = null;
-		}
+		this.activeProcessingState = conversationId
+			? this.processingStates.get(conversationId) || null
+			: null;
 	}
 
-	/**
-	 * Get processing state for a specific conversation
-	 */
 	getProcessingState(conversationId: string): ApiProcessingState | null {
 		return this.processingStates.get(conversationId) || null;
 	}
 
-	/**
-	 * Clear processing state for a specific conversation
-	 */
+	private setProcessingState(conversationId: string, state: ApiProcessingState | null): void {
+		if (state === null) this.processingStates.delete(conversationId);
+		else this.processingStates.set(conversationId, state);
+		if (conversationId === this.activeConversationId) this.activeProcessingState = state;
+	}
+
 	clearProcessingState(conversationId: string): void {
 		this.processingStates.delete(conversationId);
-
-		if (conversationId === this.activeConversationId) {
-			this.activeProcessingState = null;
-		}
+		if (conversationId === this.activeConversationId) this.activeProcessingState = null;
 	}
 
-	/**
-	 * Get the current processing state for the active conversation (reactive)
-	 * Returns the direct reactive state for UI binding
-	 */
 	getActiveProcessingState(): ApiProcessingState | null {
 		return this.activeProcessingState;
 	}
 
-	/**
-	 * Updates processing state with timing data from streaming response
-	 */
-	updateProcessingStateFromTimings(
-		timingData: {
-			prompt_n: number;
-			prompt_ms?: number;
-			predicted_n: number;
-			predicted_per_second: number;
-			cache_n: number;
-			prompt_progress?: ChatMessagePromptProgress;
-		},
-		conversationId?: string
-	): void {
-		const processingState = this.parseTimingData(timingData);
-
-		if (processingState === null) {
-			console.warn('Failed to parse timing data - skipping update');
-			return;
-		}
-
-		const targetId = conversationId || this.activeConversationId;
-		if (targetId) {
-			this.processingStates.set(targetId, processingState);
-
-			if (targetId === this.activeConversationId) {
-				this.activeProcessingState = processingState;
-			}
-		}
-	}
-
-	/**
-	 * Get current processing state (sync version for reactive access)
-	 */
 	getCurrentProcessingStateSync(): ApiProcessingState | null {
 		return this.activeProcessingState;
 	}
 
-	/**
-	 * Restore processing state from last assistant message timings
-	 * Call this when keepStatsVisible is enabled and we need to show last known stats
-	 */
-	restoreProcessingStateFromMessages(messages: DatabaseMessage[], conversationId: string): void {
-		for (let i = messages.length - 1; i >= 0; i--) {
-			const message = messages[i];
-			if (message.role === 'assistant' && message.timings) {
-				const restoredState = this.parseTimingData({
-					prompt_n: message.timings.prompt_n || 0,
-					prompt_ms: message.timings.prompt_ms,
-					predicted_n: message.timings.predicted_n || 0,
-					predicted_per_second:
-						message.timings.predicted_n && message.timings.predicted_ms
-							? (message.timings.predicted_n / message.timings.predicted_ms) * 1000
-							: 0,
-					cache_n: message.timings.cache_n || 0
-				});
+	private setStreamingActive(active: boolean): void {
+		this.isStreamingActive = active;
+	}
 
-				if (restoredState) {
-					this.processingStates.set(conversationId, restoredState);
+	isStreaming(): boolean {
+		return this.isStreamingActive;
+	}
 
-					if (conversationId === this.activeConversationId) {
-						this.activeProcessingState = restoredState;
-					}
+	private getOrCreateAbortController(convId: string): AbortController {
+		let c = this.abortControllers.get(convId);
+		if (!c || c.signal.aborted) {
+			c = new AbortController();
+			this.abortControllers.set(convId, c);
+		}
+		return c;
+	}
 
-					return;
-				}
+	private abortRequest(convId?: string): void {
+		if (convId) {
+			const c = this.abortControllers.get(convId);
+			if (c) {
+				c.abort();
+				this.abortControllers.delete(convId);
 			}
+		} else {
+			for (const c of this.abortControllers.values()) c.abort();
+			this.abortControllers.clear();
 		}
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Streaming
-	// ─────────────────────────────────────────────────────────────────────────────
-
-	/**
-	 * Start streaming session tracking
-	 */
-	startStreaming(): void {
-		this.isStreamingActive = true;
+	private showErrorDialog(state: ErrorDialogState | null): void {
+		this.errorDialogState = state;
 	}
 
-	/**
-	 * Stop streaming session tracking
-	 */
-	stopStreaming(): void {
-		this.isStreamingActive = false;
+	dismissErrorDialog(): void {
+		this.errorDialogState = null;
 	}
 
-	/**
-	 * Check if currently in a streaming session
-	 */
-	isStreaming(): boolean {
-		return this.isStreamingActive;
+	clearEditMode(): void {
+		this.isEditModeActive = false;
+		this.addFilesHandler = null;
 	}
 
-	private getContextTotal(): number {
-		const activeState = this.getActiveProcessingState();
-
-		if (activeState && activeState.contextTotal > 0) {
-			return activeState.contextTotal;
-		}
-
-		if (isRouterMode()) {
-			const modelContextSize = selectedModelContextSize();
-			if (modelContextSize && modelContextSize > 0) {
-				return modelContextSize;
-			}
-		}
+	isEditing(): boolean {
+		return this.isEditModeActive;
+	}
 
-		const propsContextSize = contextSize();
-		if (propsContextSize && propsContextSize > 0) {
-			return propsContextSize;
-		}
+	setEditModeActive(handler: (files: File[]) => void): void {
+		this.isEditModeActive = true;
+		this.addFilesHandler = handler;
+	}
 
-		return DEFAULT_CONTEXT;
+	getAddFilesHandler(): ((files: File[]) => void) | null {
+		return this.addFilesHandler;
 	}
 
-	private parseTimingData(timingData: Record<string, unknown>): ApiProcessingState | null {
-		const promptTokens = (timingData.prompt_n as number) || 0;
-		const promptMs = (timingData.prompt_ms as number) || undefined;
-		const predictedTokens = (timingData.predicted_n as number) || 0;
-		const tokensPerSecond = (timingData.predicted_per_second as number) || 0;
-		const cacheTokens = (timingData.cache_n as number) || 0;
-		const promptProgress = timingData.prompt_progress as
-			| {
-					total: number;
-					cache: number;
-					processed: number;
-					time_ms: number;
-			  }
-			| undefined;
+	clearPendingEditMessageId(): void {
+		this.pendingEditMessageId = null;
+	}
 
-		const contextTotal = this.getContextTotal();
-		const currentConfig = config();
-		const outputTokensMax = currentConfig.max_tokens || -1;
+	savePendingDraft(message: string, files: ChatUploadedFile[]): void {
+		this._pendingDraftMessage = message;
+		this._pendingDraftFiles = [...files];
+	}
 
-		// Note: for timings data, the n_prompt does NOT include cache tokens
-		const contextUsed = promptTokens + cacheTokens + predictedTokens;
-		const outputTokensUsed = predictedTokens;
+	consumePendingDraft(): { message: string; files: ChatUploadedFile[] } | null {
+		if (!this._pendingDraftMessage && this._pendingDraftFiles.length === 0) return null;
+		const d = { message: this._pendingDraftMessage, files: [...this._pendingDraftFiles] };
+		this._pendingDraftMessage = '';
+		this._pendingDraftFiles = [];
+		return d;
+	}
 
-		// Note: for prompt progress, the "processed" DOES include cache tokens
-		// we need to exclude them to get the real prompt tokens processed count
-		const progressCache = promptProgress?.cache || 0;
-		const progressActualDone = (promptProgress?.processed ?? 0) - progressCache;
-		const progressActualTotal = (promptProgress?.total ?? 0) - progressCache;
-		const progressPercent = promptProgress
-			? Math.round((progressActualDone / progressActualTotal) * 100)
-			: undefined;
+	hasPendingDraft(): boolean {
+		return Boolean(this._pendingDraftMessage) || this._pendingDraftFiles.length > 0;
+	}
 
-		return {
-			status: predictedTokens > 0 ? 'generating' : promptProgress ? 'preparing' : 'idle',
-			tokensDecoded: predictedTokens,
-			tokensRemaining: outputTokensMax - predictedTokens,
-			contextUsed,
-			contextTotal,
-			outputTokensUsed,
-			outputTokensMax,
-			hasNextToken: predictedTokens > 0,
-			tokensPerSecond,
-			temperature: currentConfig.temperature ?? 0.8,
-			topP: currentConfig.top_p ?? 0.95,
-			speculative: false,
-			progressPercent,
-			promptProgress,
-			promptTokens,
-			promptMs,
-			cacheTokens
-		};
+	getAllLoadingChats(): string[] {
+		return Array.from(this.chatLoadingStates.keys());
 	}
 
-	/**
-	 * Gets the model used in a conversation based on the latest assistant message.
-	 * Returns the model from the most recent assistant message that has a model field set.
-	 *
-	 * @param messages - Array of messages to search through
-	 * @returns The model name or null if no model found
-	 */
-	getConversationModel(messages: DatabaseMessage[]): string | null {
-		// Search backwards through messages to find most recent assistant message with model
-		for (let i = messages.length - 1; i >= 0; i--) {
-			const message = messages[i];
-			if (message.role === 'assistant' && message.model) {
-				return message.model;
-			}
-		}
-		return null;
+	getAllStreamingChats(): string[] {
+		return Array.from(this.chatStreamingStates.keys());
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Error Handling
-	// ─────────────────────────────────────────────────────────────────────────────
+	getChatStreamingPublic(convId: string): { response: string; messageId: string } | undefined {
+		return this.getChatStreaming(convId);
+	}
 
-	private isAbortError(error: unknown): boolean {
-		return error instanceof Error && (error.name === 'AbortError' || error instanceof DOMException);
+	isChatLoadingPublic(convId: string): boolean {
+		return this.chatLoadingStates.get(convId) || false;
 	}
 
-	private showErrorDialog(
-		type: 'timeout' | 'server',
-		message: string,
-		contextInfo?: { n_prompt_tokens: number; n_ctx: number }
-	): void {
-		this.errorDialogState = { type, message, contextInfo };
+	private isChatLoadingInternal(convId: string): boolean {
+		return this.chatStreamingStates.has(convId);
 	}
 
-	dismissErrorDialog(): void {
-		this.errorDialogState = null;
+	private touchConversationState(convId: string): void {
+		this.conversationStateTimestamps.set(convId, { lastAccessed: Date.now() });
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Message Operations
-	// ─────────────────────────────────────────────────────────────────────────────
+	cleanupOldConversationStates(activeConversationIds?: string[]): number {
+		const now = Date.now();
+		const activeIdsList = activeConversationIds ?? [];
+		const preserveIds = this.activeConversationId
+			? [...activeIdsList, this.activeConversationId]
+			: activeIdsList;
+		const allConvIds = [
+			...new Set([
+				...this.chatLoadingStates.keys(),
+				...this.chatStreamingStates.keys(),
+				...this.abortControllers.keys(),
+				...this.processingStates.keys(),
+				...this.conversationStateTimestamps.keys()
+			])
+		];
+		const cleanupCandidates: Array<{ convId: string; lastAccessed: number }> = [];
+		for (const convId of allConvIds) {
+			if (preserveIds.includes(convId)) continue;
+			if (this.chatLoadingStates.get(convId)) continue;
+			if (this.chatStreamingStates.has(convId)) continue;
+			const ts = this.conversationStateTimestamps.get(convId);
+			cleanupCandidates.push({ convId, lastAccessed: ts?.lastAccessed ?? 0 });
+		}
+		cleanupCandidates.sort((a, b) => a.lastAccessed - b.lastAccessed);
+		let cleanedUp = 0;
+		for (const { convId, lastAccessed } of cleanupCandidates) {
+			if (
+				cleanupCandidates.length - cleanedUp > MAX_INACTIVE_CONVERSATION_STATES ||
+				now - lastAccessed > INACTIVE_CONVERSATION_STATE_MAX_AGE_MS
+			) {
+				this.cleanupConversationState(convId);
+				cleanedUp++;
+			}
+		}
+		return cleanedUp;
+	}
+	private cleanupConversationState(convId: string): void {
+		const c = this.abortControllers.get(convId);
+		if (c && !c.signal.aborted) c.abort();
+		this.chatLoadingStates.delete(convId);
+		this.chatStreamingStates.delete(convId);
+		this.abortControllers.delete(convId);
+		this.processingStates.delete(convId);
+		this.conversationStateTimestamps.delete(convId);
+	}
+	getTrackedConversationCount(): number {
+		return new Set([
+			...this.chatLoadingStates.keys(),
+			...this.chatStreamingStates.keys(),
+			...this.abortControllers.keys(),
+			...this.processingStates.keys()
+		]).size;
+	}
 
-	/**
-	 * Finds a message by ID and optionally validates its role.
-	 * Returns message and index, or null if not found or role doesn't match.
-	 */
 	private getMessageByIdWithRole(
 		messageId: string,
-		expectedRole?: ChatRole
+		expectedRole?: MessageRole
 	): { message: DatabaseMessage; index: number } | null {
 		const index = conversationsStore.findMessageIndex(messageId);
 		if (index === -1) return null;
-
 		const message = conversationsStore.activeMessages[index];
 		if (expectedRole && message.role !== expectedRole) return null;
-
 		return { message, index };
 	}
 
 	async addMessage(
-		role: ChatRole,
+		role: MessageRole,
 		content: string,
-		type: ChatMessageType = 'text',
+		type: MessageType = MessageType.TEXT,
 		parent: string = '-1',
 		extras?: DatabaseMessageExtra[]
-	): Promise<DatabaseMessage | null> {
+	): Promise<DatabaseMessage> {
 		const activeConv = conversationsStore.activeConversation;
-		if (!activeConv) {
-			console.error('No active conversation when trying to add message');
-			return null;
-		}
-
-		try {
-			let parentId: string | null = null;
-
-			if (parent === '-1') {
-				const activeMessages = conversationsStore.activeMessages;
-				if (activeMessages.length > 0) {
-					parentId = activeMessages[activeMessages.length - 1].id;
-				} else {
-					const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
-					const rootMessage = allMessages.find((m) => m.parent === null && m.type === 'root');
-					if (!rootMessage) {
-						parentId = await DatabaseService.createRootMessage(activeConv.id);
-					} else {
-						parentId = rootMessage.id;
-					}
-				}
-			} else {
-				parentId = parent;
+		if (!activeConv) throw new Error('No active conversation');
+		let parentId: string | null = null;
+		if (parent === '-1') {
+			const am = conversationsStore.activeMessages;
+			if (am.length > 0) parentId = am[am.length - 1].id;
+			else {
+				const all = await conversationsStore.getConversationMessages(activeConv.id);
+				const r = all.find((m) => m.parent === null && m.type === 'root');
+				parentId = r ? r.id : await DatabaseService.createRootMessage(activeConv.id);
 			}
-
-			const message = await DatabaseService.createMessageBranch(
-				{
-					convId: activeConv.id,
-					role,
-					content,
-					type,
-					timestamp: Date.now(),
-					thinking: '',
-					toolCalls: '',
-					children: [],
-					extra: extras
-				},
-				parentId
-			);
-
-			conversationsStore.addMessageToActive(message);
-			await conversationsStore.updateCurrentNode(message.id);
-			conversationsStore.updateConversationTimestamp();
-
-			return message;
-		} catch (error) {
-			console.error('Failed to add message:', error);
-			return null;
-		}
+		} else parentId = parent;
+		const message = await DatabaseService.createMessageBranch(
+			{
+				convId: activeConv.id,
+				role,
+				content,
+				type,
+				timestamp: Date.now(),
+				toolCalls: '',
+				children: [],
+				extra: extras
+			},
+			parentId
+		);
+		conversationsStore.addMessageToActive(message);
+		await conversationsStore.updateCurrentNode(message.id);
+		conversationsStore.updateConversationTimestamp();
+		return message;
 	}
 
-	/**
-	 * Adds a system message at the top of a conversation and triggers edit mode.
-	 * The system message is inserted between root and the first message of the active branch.
-	 * Creates a new conversation if one doesn't exist.
-	 */
 	async addSystemPrompt(): Promise<void> {
 		let activeConv = conversationsStore.activeConversation;
-
-		// Create conversation if needed
 		if (!activeConv) {
 			await conversationsStore.createConversation();
 			activeConv = conversationsStore.activeConversation;
 		}
 		if (!activeConv) return;
-
 		try {
-			// Get all messages to find the root
 			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
 			const rootMessage = allMessages.find((m) => m.type === 'root' && m.parent === null);
-			let rootId: string;
-
-			// Create root message if it doesn't exist
-			if (!rootMessage) {
-				rootId = await DatabaseService.createRootMessage(activeConv.id);
-			} else {
-				rootId = rootMessage.id;
-			}
-
-			// Check if there's already a system message as root's child
+			const rootId = rootMessage
+				? rootMessage.id
+				: await DatabaseService.createRootMessage(activeConv.id);
 			const existingSystemMessage = allMessages.find(
-				(m) => m.role === 'system' && m.parent === rootId
+				(m) => m.role === MessageRole.SYSTEM && m.parent === rootId
 			);
-
 			if (existingSystemMessage) {
-				// If system message exists, just trigger edit mode on it
 				this.pendingEditMessageId = existingSystemMessage.id;
-
-				// Make sure it's in active messages at the beginning
-				if (!conversationsStore.activeMessages.some((m) => m.id === existingSystemMessage.id)) {
+				if (!conversationsStore.activeMessages.some((m) => m.id === existingSystemMessage.id))
 					conversationsStore.activeMessages.unshift(existingSystemMessage);
-				}
 				return;
 			}
-
-			// Find the first message of the active branch (child of root that's in activeMessages)
-			const activeMessages = conversationsStore.activeMessages;
-			const firstActiveMessage = activeMessages.find((m) => m.parent === rootId);
-
-			// Create new system message with placeholder content (will be edited by user)
+			const am = conversationsStore.activeMessages;
+			const firstActiveMessage = am.find((m) => m.parent === rootId);
 			const systemMessage = await DatabaseService.createSystemMessage(
 				activeConv.id,
 				SYSTEM_MESSAGE_PLACEHOLDER,
 				rootId
 			);
-
-			// If there's a first message in the active branch, re-parent it to the system message
 			if (firstActiveMessage) {
-				// Update the first message's parent to be the system message
-				await DatabaseService.updateMessage(firstActiveMessage.id, {
-					parent: systemMessage.id
-				});
-
-				// Update the system message's children to include the first message
+				await DatabaseService.updateMessage(firstActiveMessage.id, { parent: systemMessage.id });
 				await DatabaseService.updateMessage(systemMessage.id, {
 					children: [firstActiveMessage.id]
 				});
-
-				// Remove first message from root's children
 				const updatedRootChildren = rootMessage
 					? rootMessage.children.filter((id: string) => id !== firstActiveMessage.id)
 					: [];
-				// Note: system message was already added to root's children by createSystemMessage
 				await DatabaseService.updateMessage(rootId, {
 					children: [
 						...updatedRootChildren.filter((id: string) => id !== systemMessage.id),
 						systemMessage.id
 					]
 				});
-
-				// Update local state
 				const firstMsgIndex = conversationsStore.findMessageIndex(firstActiveMessage.id);
-				if (firstMsgIndex !== -1) {
+				if (firstMsgIndex !== -1)
 					conversationsStore.updateMessageAtIndex(firstMsgIndex, { parent: systemMessage.id });
-				}
 			}
-
-			// Add system message to active messages at the beginning
 			conversationsStore.activeMessages.unshift(systemMessage);
-
-			// Set pending edit message ID to trigger edit mode
 			this.pendingEditMessageId = systemMessage.id;
-
 			conversationsStore.updateConversationTimestamp();
 		} catch (error) {
 			console.error('Failed to add system prompt:', error);
 		}
 	}
 
-	/**
-	 * Removes a system message placeholder without deleting its children.
-	 * Re-parents children back to the root message.
-	 * If this is a new empty conversation (only root + system placeholder), deletes the entire conversation.
-	 * @returns true if the entire conversation was deleted, false otherwise
-	 */
 	async removeSystemPromptPlaceholder(messageId: string): Promise<boolean> {
 		const activeConv = conversationsStore.activeConversation;
 		if (!activeConv) return false;
-
 		try {
 			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
 			const systemMessage = allMessages.find((m) => m.id === messageId);
-			if (!systemMessage || systemMessage.role !== 'system') return false;
-
+			if (!systemMessage || systemMessage.role !== MessageRole.SYSTEM) return false;
 			const rootMessage = allMessages.find((m) => m.type === 'root' && m.parent === null);
 			if (!rootMessage) return false;
-
-			// Check if this is a new empty conversation (only root + system placeholder)
-			const isEmptyConversation = allMessages.length === 2 && systemMessage.children.length === 0;
-
-			if (isEmptyConversation) {
-				// Delete the entire conversation
+			if (allMessages.length === 2 && systemMessage.children.length === 0) {
 				await conversationsStore.deleteConversation(activeConv.id);
 				return true;
 			}
-
-			// Re-parent system message's children to root
 			for (const childId of systemMessage.children) {
 				await DatabaseService.updateMessage(childId, { parent: rootMessage.id });
-
-				// Update local state
 				const childIndex = conversationsStore.findMessageIndex(childId);
-				if (childIndex !== -1) {
+				if (childIndex !== -1)
 					conversationsStore.updateMessageAtIndex(childIndex, { parent: rootMessage.id });
-				}
 			}
-
-			// Update root's children: remove system message, add system's children
-			const newRootChildren = [
-				...rootMessage.children.filter((id: string) => id !== messageId),
-				...systemMessage.children
-			];
-			await DatabaseService.updateMessage(rootMessage.id, { children: newRootChildren });
-
-			// Delete the system message (without cascade)
+			await DatabaseService.updateMessage(rootMessage.id, {
+				children: [
+					...rootMessage.children.filter((id: string) => id !== messageId),
+					...systemMessage.children
+				]
+			});
 			await DatabaseService.deleteMessage(messageId);
-
-			// Remove from active messages
 			const systemIndex = conversationsStore.findMessageIndex(messageId);
-			if (systemIndex !== -1) {
-				conversationsStore.activeMessages.splice(systemIndex, 1);
-			}
-
+			if (systemIndex !== -1) conversationsStore.activeMessages.splice(systemIndex, 1);
 			conversationsStore.updateConversationTimestamp();
 			return false;
 		} catch (error) {
@@ -631,18 +447,16 @@ class ChatStore {
 		}
 	}
 
-	private async createAssistantMessage(parentId?: string): Promise<DatabaseMessage | null> {
+	private async createAssistantMessage(parentId?: string): Promise<DatabaseMessage> {
 		const activeConv = conversationsStore.activeConversation;
-		if (!activeConv) return null;
-
+		if (!activeConv) throw new Error('No active conversation');
 		return await DatabaseService.createMessageBranch(
 			{
 				convId: activeConv.id,
-				type: 'text',
-				role: 'assistant',
+				type: MessageType.TEXT,
+				role: MessageRole.ASSISTANT,
 				content: '',
 				timestamp: Date.now(),
-				thinking: '',
 				toolCalls: '',
 				children: [],
 				model: null
@@ -651,174 +465,14 @@ class ChatStore {
 		);
 	}
 
-	private async streamChatCompletion(
-		allMessages: DatabaseMessage[],
-		assistantMessage: DatabaseMessage,
-		onComplete?: (content: string) => Promise<void>,
-		onError?: (error: Error) => void,
-		modelOverride?: string | null
-	): Promise<void> {
-		// Ensure model props are cached before streaming (for correct n_ctx in processing info)
-		if (isRouterMode()) {
-			const modelName = modelOverride || selectedModelName();
-			if (modelName && !modelsStore.getModelProps(modelName)) {
-				await modelsStore.fetchModelProps(modelName);
-			}
-		}
-
-		let streamedContent = '';
-		let streamedReasoningContent = '';
-		let streamedToolCallContent = '';
-		let resolvedModel: string | null = null;
-		let modelPersisted = false;
-
-		const recordModel = (modelName: string | null | undefined, persistImmediately = true): void => {
-			if (!modelName) return;
-			const normalizedModel = normalizeModelName(modelName);
-			if (!normalizedModel || normalizedModel === resolvedModel) return;
-			resolvedModel = normalizedModel;
-			const messageIndex = conversationsStore.findMessageIndex(assistantMessage.id);
-			conversationsStore.updateMessageAtIndex(messageIndex, { model: normalizedModel });
-			if (persistImmediately && !modelPersisted) {
-				modelPersisted = true;
-				DatabaseService.updateMessage(assistantMessage.id, { model: normalizedModel }).catch(() => {
-					modelPersisted = false;
-					resolvedModel = null;
-				});
-			}
-		};
-
-		this.startStreaming();
-		this.setActiveProcessingConversation(assistantMessage.convId);
-
-		const abortController = this.getOrCreateAbortController(assistantMessage.convId);
-
-		await ChatService.sendMessage(
-			allMessages,
-			{
-				...this.getApiOptions(),
-				...(modelOverride ? { model: modelOverride } : {}),
-				onChunk: (chunk: string) => {
-					streamedContent += chunk;
-					this.setChatStreaming(assistantMessage.convId, streamedContent, assistantMessage.id);
-					const idx = conversationsStore.findMessageIndex(assistantMessage.id);
-					conversationsStore.updateMessageAtIndex(idx, { content: streamedContent });
-				},
-				onReasoningChunk: (reasoningChunk: string) => {
-					streamedReasoningContent += reasoningChunk;
-					const idx = conversationsStore.findMessageIndex(assistantMessage.id);
-					conversationsStore.updateMessageAtIndex(idx, { thinking: streamedReasoningContent });
-				},
-				onToolCallChunk: (toolCallChunk: string) => {
-					const chunk = toolCallChunk.trim();
-					if (!chunk) return;
-					streamedToolCallContent = chunk;
-					const idx = conversationsStore.findMessageIndex(assistantMessage.id);
-					conversationsStore.updateMessageAtIndex(idx, { toolCalls: streamedToolCallContent });
-				},
-				onModel: (modelName: string) => recordModel(modelName),
-				onTimings: (timings?: ChatMessageTimings, promptProgress?: ChatMessagePromptProgress) => {
-					const tokensPerSecond =
-						timings?.predicted_ms && timings?.predicted_n
-							? (timings.predicted_n / timings.predicted_ms) * 1000
-							: 0;
-					this.updateProcessingStateFromTimings(
-						{
-							prompt_n: timings?.prompt_n || 0,
-							prompt_ms: timings?.prompt_ms,
-							predicted_n: timings?.predicted_n || 0,
-							predicted_per_second: tokensPerSecond,
-							cache_n: timings?.cache_n || 0,
-							prompt_progress: promptProgress
-						},
-						assistantMessage.convId
-					);
-				},
-				onComplete: async (
-					finalContent?: string,
-					reasoningContent?: string,
-					timings?: ChatMessageTimings,
-					toolCallContent?: string
-				) => {
-					this.stopStreaming();
-
-					const updateData: Record<string, unknown> = {
-						content: finalContent || streamedContent,
-						thinking: reasoningContent || streamedReasoningContent,
-						toolCalls: toolCallContent || streamedToolCallContent,
-						timings
-					};
-					if (resolvedModel && !modelPersisted) {
-						updateData.model = resolvedModel;
-					}
-					await DatabaseService.updateMessage(assistantMessage.id, updateData);
-
-					const idx = conversationsStore.findMessageIndex(assistantMessage.id);
-					const uiUpdate: Partial<DatabaseMessage> = {
-						content: updateData.content as string,
-						toolCalls: updateData.toolCalls as string
-					};
-					if (timings) uiUpdate.timings = timings;
-					if (resolvedModel) uiUpdate.model = resolvedModel;
-
-					conversationsStore.updateMessageAtIndex(idx, uiUpdate);
-					await conversationsStore.updateCurrentNode(assistantMessage.id);
-
-					if (onComplete) await onComplete(streamedContent);
-					this.setChatLoading(assistantMessage.convId, false);
-					this.clearChatStreaming(assistantMessage.convId);
-					this.clearProcessingState(assistantMessage.convId);
-
-					if (isRouterMode()) {
-						modelsStore.fetchRouterModels().catch(console.error);
-					}
-				},
-				onError: (error: Error) => {
-					this.stopStreaming();
-
-					if (this.isAbortError(error)) {
-						this.setChatLoading(assistantMessage.convId, false);
-						this.clearChatStreaming(assistantMessage.convId);
-						this.clearProcessingState(assistantMessage.convId);
-
-						return;
-					}
-
-					console.error('Streaming error:', error);
-
-					this.setChatLoading(assistantMessage.convId, false);
-					this.clearChatStreaming(assistantMessage.convId);
-					this.clearProcessingState(assistantMessage.convId);
-
-					const idx = conversationsStore.findMessageIndex(assistantMessage.id);
-
-					if (idx !== -1) {
-						const failedMessage = conversationsStore.removeMessageAtIndex(idx);
-						if (failedMessage) DatabaseService.deleteMessage(failedMessage.id).catch(console.error);
-					}
-
-					const contextInfo = (
-						error as Error & { contextInfo?: { n_prompt_tokens: number; n_ctx: number } }
-					).contextInfo;
-
-					this.showErrorDialog(
-						error.name === 'TimeoutError' ? 'timeout' : 'server',
-						error.message,
-						contextInfo
-					);
-
-					if (onError) onError(error);
-				}
-			},
-			assistantMessage.convId,
-			abortController.signal
-		);
-	}
-
 	async sendMessage(content: string, extras?: DatabaseMessageExtra[]): Promise<void> {
 		if (!content.trim() && (!extras || extras.length === 0)) return;
 		const activeConv = conversationsStore.activeConversation;
-		if (activeConv && this.isChatLoading(activeConv.id)) return;
+		if (activeConv && this.isChatLoadingInternal(activeConv.id)) return;
+
+		// Consume MCP resource attachments - converts them to extras and clears the live store
+		const resourceExtras = mcpStore.consumeResourceAttachmentsAsExtras();
+		const allExtras = resourceExtras.length > 0 ? [...(extras || []), ...resourceExtras] : extras;
 
 		let isNewConversation = false;
 		if (!activeConv) {
@@ -827,137 +481,295 @@ class ChatStore {
 		}
 		const currentConv = conversationsStore.activeConversation;
 		if (!currentConv) return;
-
-		this.errorDialogState = null;
+		this.showErrorDialog(null);
 		this.setChatLoading(currentConv.id, true);
 		this.clearChatStreaming(currentConv.id);
-
 		try {
+			let parentIdForUserMessage: string | undefined;
 			if (isNewConversation) {
 				const rootId = await DatabaseService.createRootMessage(currentConv.id);
 				const currentConfig = config();
 				const systemPrompt = currentConfig.systemMessage?.toString().trim();
-
 				if (systemPrompt) {
 					const systemMessage = await DatabaseService.createSystemMessage(
 						currentConv.id,
 						systemPrompt,
 						rootId
 					);
-
 					conversationsStore.addMessageToActive(systemMessage);
-				}
+					parentIdForUserMessage = systemMessage.id;
+				} else parentIdForUserMessage = rootId;
 			}
-
-			const userMessage = await this.addMessage('user', content, 'text', '-1', extras);
-			if (!userMessage) throw new Error('Failed to add user message');
+			const userMessage = await this.addMessage(
+				MessageRole.USER,
+				content,
+				MessageType.TEXT,
+				parentIdForUserMessage ?? '-1',
+				allExtras
+			);
 			if (isNewConversation && content)
 				await conversationsStore.updateConversationName(currentConv.id, content.trim());
-
 			const assistantMessage = await this.createAssistantMessage(userMessage.id);
-
-			if (!assistantMessage) throw new Error('Failed to create assistant message');
-
 			conversationsStore.addMessageToActive(assistantMessage);
 			await this.streamChatCompletion(
 				conversationsStore.activeMessages.slice(0, -1),
 				assistantMessage
 			);
 		} catch (error) {
-			if (this.isAbortError(error)) {
+			if (isAbortError(error)) {
 				this.setChatLoading(currentConv.id, false);
 				return;
 			}
 			console.error('Failed to send message:', error);
 			this.setChatLoading(currentConv.id, false);
-			if (!this.errorDialogState) {
-				const dialogType =
-					error instanceof Error && error.name === 'TimeoutError' ? 'timeout' : 'server';
+			const dialogType =
+				error instanceof Error && error.name === 'TimeoutError'
+					? ErrorDialogType.TIMEOUT
+					: ErrorDialogType.SERVER;
+			const contextInfo = (
+				error as Error & { contextInfo?: { n_prompt_tokens: number; n_ctx: number } }
+			).contextInfo;
+			this.showErrorDialog({
+				type: dialogType,
+				message: error instanceof Error ? error.message : 'Unknown error',
+				contextInfo
+			});
+		}
+	}
+
+	private async streamChatCompletion(
+		allMessages: DatabaseMessage[],
+		assistantMessage: DatabaseMessage,
+		onComplete?: (content: string) => Promise<void>,
+		onError?: (error: Error) => void,
+		modelOverride?: string | null
+	): Promise<void> {
+		let effectiveModel = modelOverride;
+
+		if (isRouterMode() && !effectiveModel) {
+			const conversationModel = this.getConversationModel(allMessages);
+			effectiveModel = selectedModelName() || conversationModel;
+		}
+
+		if (isRouterMode() && effectiveModel) {
+			if (!modelsStore.getModelProps(effectiveModel))
+				await modelsStore.fetchModelProps(effectiveModel);
+		}
+
+		let streamedContent = '',
+			streamedToolCallContent = '',
+			isReasoningOpen = false,
+			hasStreamedChunks = false,
+			resolvedModel: string | null = null,
+			modelPersisted = false;
+		let streamedExtras: DatabaseMessageExtra[] = assistantMessage.extra
+			? JSON.parse(JSON.stringify(assistantMessage.extra))
+			: [];
+		const recordModel = (modelName: string | null | undefined, persistImmediately = true): void => {
+			if (!modelName) return;
+			const n = normalizeModelName(modelName);
+			if (!n || n === resolvedModel) return;
+			resolvedModel = n;
+			const idx = conversationsStore.findMessageIndex(assistantMessage.id);
+			conversationsStore.updateMessageAtIndex(idx, { model: n });
+			if (persistImmediately && !modelPersisted) {
+				modelPersisted = true;
+				DatabaseService.updateMessage(assistantMessage.id, { model: n }).catch(() => {
+					modelPersisted = false;
+					resolvedModel = null;
+				});
+			}
+		};
+		const updateStreamingContent = () => {
+			this.setChatStreaming(assistantMessage.convId, streamedContent, assistantMessage.id);
+			const idx = conversationsStore.findMessageIndex(assistantMessage.id);
+			conversationsStore.updateMessageAtIndex(idx, { content: streamedContent });
+		};
+		const appendContentChunk = (chunk: string) => {
+			if (isReasoningOpen) {
+				streamedContent += REASONING_TAGS.END;
+				isReasoningOpen = false;
+			}
+			streamedContent += chunk;
+			hasStreamedChunks = true;
+			updateStreamingContent();
+		};
+		const appendReasoningChunk = (chunk: string) => {
+			if (!isReasoningOpen) {
+				streamedContent += REASONING_TAGS.START;
+				isReasoningOpen = true;
+			}
+			streamedContent += chunk;
+			hasStreamedChunks = true;
+			updateStreamingContent();
+		};
+		const finalizeReasoning = () => {
+			if (isReasoningOpen) {
+				streamedContent += REASONING_TAGS.END;
+				isReasoningOpen = false;
+			}
+		};
+		this.setStreamingActive(true);
+		this.setActiveProcessingConversation(assistantMessage.convId);
+		const abortController = this.getOrCreateAbortController(assistantMessage.convId);
+		const streamCallbacks: ChatStreamCallbacks = {
+			onChunk: (chunk: string) => appendContentChunk(chunk),
+			onReasoningChunk: (chunk: string) => appendReasoningChunk(chunk),
+			onToolCallChunk: (chunk: string) => {
+				const c = chunk.trim();
+				if (!c) return;
+				streamedToolCallContent = c;
+				const idx = conversationsStore.findMessageIndex(assistantMessage.id);
+				conversationsStore.updateMessageAtIndex(idx, { toolCalls: streamedToolCallContent });
+			},
+			onAttachments: (extras: DatabaseMessageExtra[]) => {
+				if (!extras.length) return;
+				streamedExtras = [...streamedExtras, ...extras];
+				const idx = conversationsStore.findMessageIndex(assistantMessage.id);
+				conversationsStore.updateMessageAtIndex(idx, { extra: streamedExtras });
+				DatabaseService.updateMessage(assistantMessage.id, { extra: streamedExtras }).catch(
+					console.error
+				);
+			},
+			onModel: (modelName: string) => recordModel(modelName),
+			onTimings: (timings?: ChatMessageTimings, promptProgress?: ChatMessagePromptProgress) => {
+				const tokensPerSecond =
+					timings?.predicted_ms && timings?.predicted_n
+						? (timings.predicted_n / timings.predicted_ms) * 1000
+						: 0;
+				this.updateProcessingStateFromTimings(
+					{
+						prompt_n: timings?.prompt_n || 0,
+						prompt_ms: timings?.prompt_ms,
+						predicted_n: timings?.predicted_n || 0,
+						predicted_per_second: tokensPerSecond,
+						cache_n: timings?.cache_n || 0,
+						prompt_progress: promptProgress
+					},
+					assistantMessage.convId
+				);
+			},
+			onComplete: async (
+				finalContent?: string,
+				reasoningContent?: string,
+				timings?: ChatMessageTimings,
+				toolCallContent?: string
+			) => {
+				this.setStreamingActive(false);
+				finalizeReasoning();
+				const combinedContent = hasStreamedChunks
+					? streamedContent
+					: wrapReasoningContent(finalContent || '', reasoningContent);
+				const updateData: Record<string, unknown> = {
+					content: combinedContent,
+					toolCalls: toolCallContent || streamedToolCallContent,
+					timings
+				};
+				if (streamedExtras.length > 0) updateData.extra = streamedExtras;
+				if (resolvedModel && !modelPersisted) updateData.model = resolvedModel;
+				await DatabaseService.updateMessage(assistantMessage.id, updateData);
+				const idx = conversationsStore.findMessageIndex(assistantMessage.id);
+				const uiUpdate: Partial<DatabaseMessage> = {
+					content: combinedContent,
+					toolCalls: updateData.toolCalls as string
+				};
+				if (streamedExtras.length > 0) uiUpdate.extra = streamedExtras;
+				if (timings) uiUpdate.timings = timings;
+				if (resolvedModel) uiUpdate.model = resolvedModel;
+				conversationsStore.updateMessageAtIndex(idx, uiUpdate);
+				await conversationsStore.updateCurrentNode(assistantMessage.id);
+				if (onComplete) await onComplete(combinedContent);
+				this.setChatLoading(assistantMessage.convId, false);
+				this.clearChatStreaming(assistantMessage.convId);
+				this.setProcessingState(assistantMessage.convId, null);
+				if (isRouterMode()) modelsStore.fetchRouterModels().catch(console.error);
+			},
+			onError: (error: Error) => {
+				this.setStreamingActive(false);
+				if (isAbortError(error)) {
+					this.setChatLoading(assistantMessage.convId, false);
+					this.clearChatStreaming(assistantMessage.convId);
+					this.setProcessingState(assistantMessage.convId, null);
+					return;
+				}
+				console.error('Streaming error:', error);
+				this.setChatLoading(assistantMessage.convId, false);
+				this.clearChatStreaming(assistantMessage.convId);
+				this.setProcessingState(assistantMessage.convId, null);
+				const idx = conversationsStore.findMessageIndex(assistantMessage.id);
+				if (idx !== -1) {
+					const failedMessage = conversationsStore.removeMessageAtIndex(idx);
+					if (failedMessage) DatabaseService.deleteMessage(failedMessage.id).catch(console.error);
+				}
 				const contextInfo = (
 					error as Error & { contextInfo?: { n_prompt_tokens: number; n_ctx: number } }
 				).contextInfo;
-
-				this.showErrorDialog(
-					dialogType,
-					error instanceof Error ? error.message : 'Unknown error',
+				this.showErrorDialog({
+					type: error.name === 'TimeoutError' ? ErrorDialogType.TIMEOUT : ErrorDialogType.SERVER,
+					message: error.message,
 					contextInfo
-				);
+				});
+				if (onError) onError(error);
 			}
+		};
+		const perChatOverrides = conversationsStore.activeConversation?.mcpServerOverrides;
+
+		const agenticConfig = agenticStore.getConfig(config(), perChatOverrides);
+		if (agenticConfig.enabled) {
+			const agenticResult = await agenticStore.runAgenticFlow({
+				conversationId: assistantMessage.convId,
+				messages: allMessages,
+				options: { ...this.getApiOptions(), ...(effectiveModel ? { model: effectiveModel } : {}) },
+				callbacks: streamCallbacks,
+				signal: abortController.signal,
+				perChatOverrides
+			});
+			if (agenticResult.handled) return;
 		}
+
+		const completionOptions = {
+			...this.getApiOptions(),
+			...(effectiveModel ? { model: effectiveModel } : {}),
+			...streamCallbacks
+		};
+
+		await ChatService.sendMessage(
+			allMessages,
+			completionOptions,
+			assistantMessage.convId,
+			abortController.signal
+		);
 	}
 
 	async stopGeneration(): Promise<void> {
 		const activeConv = conversationsStore.activeConversation;
-
 		if (!activeConv) return;
-
 		await this.stopGenerationForChat(activeConv.id);
 	}
-
 	async stopGenerationForChat(convId: string): Promise<void> {
 		await this.savePartialResponseIfNeeded(convId);
-
-		this.stopStreaming();
+		this.setStreamingActive(false);
 		this.abortRequest(convId);
 		this.setChatLoading(convId, false);
 		this.clearChatStreaming(convId);
-		this.clearProcessingState(convId);
-	}
-
-	/**
-	 * Gets or creates an AbortController for a conversation
-	 */
-	private getOrCreateAbortController(convId: string): AbortController {
-		let controller = this.abortControllers.get(convId);
-		if (!controller || controller.signal.aborted) {
-			controller = new AbortController();
-			this.abortControllers.set(convId, controller);
-		}
-		return controller;
+		this.setProcessingState(convId, null);
 	}
-
-	/**
-	 * Aborts any ongoing request for a conversation
-	 */
-	private abortRequest(convId?: string): void {
-		if (convId) {
-			const controller = this.abortControllers.get(convId);
-			if (controller) {
-				controller.abort();
-				this.abortControllers.delete(convId);
-			}
-		} else {
-			for (const controller of this.abortControllers.values()) {
-				controller.abort();
-			}
-			this.abortControllers.clear();
-		}
-	}
-
 	private async savePartialResponseIfNeeded(convId?: string): Promise<void> {
 		const conversationId = convId || conversationsStore.activeConversation?.id;
-
 		if (!conversationId) return;
-
-		const streamingState = this.chatStreamingStates.get(conversationId);
-
+		const streamingState = this.getChatStreaming(conversationId);
 		if (!streamingState || !streamingState.response.trim()) return;
-
 		const messages =
 			conversationId === conversationsStore.activeConversation?.id
 				? conversationsStore.activeMessages
 				: await conversationsStore.getConversationMessages(conversationId);
-
 		if (!messages.length) return;
-
 		const lastMessage = messages[messages.length - 1];
-
-		if (lastMessage?.role === 'assistant') {
+		if (lastMessage?.role === MessageRole.ASSISTANT) {
 			try {
-				const updateData: { content: string; thinking?: string; timings?: ChatMessageTimings } = {
+				const updateData: { content: string; timings?: ChatMessageTimings } = {
 					content: streamingState.response
 				};
-				if (lastMessage.thinking?.trim()) updateData.thinking = lastMessage.thinking;
 				const lastKnownState = this.getProcessingState(conversationId);
 				if (lastKnownState) {
 					updateData.timings = {
@@ -971,16 +783,11 @@ class ChatStore {
 								: undefined
 					};
 				}
-
 				await DatabaseService.updateMessage(lastMessage.id, updateData);
-
-				lastMessage.content = this.currentResponse;
-
-				if (updateData.thinking) lastMessage.thinking = updateData.thinking;
-
+				lastMessage.content = streamingState.response;
 				if (updateData.timings) lastMessage.timings = updateData.timings;
 			} catch (error) {
-				lastMessage.content = this.currentResponse;
+				lastMessage.content = streamingState.response;
 				console.error('Failed to save partial response:', error);
 			}
 		}
@@ -989,45 +796,30 @@ class ChatStore {
 	async updateMessage(messageId: string, newContent: string): Promise<void> {
 		const activeConv = conversationsStore.activeConversation;
 		if (!activeConv) return;
-		if (this.isLoading) this.stopGeneration();
-
-		const result = this.getMessageByIdWithRole(messageId, 'user');
+		if (this.isChatLoadingInternal(activeConv.id)) await this.stopGeneration();
+		const result = this.getMessageByIdWithRole(messageId, MessageRole.USER);
 		if (!result) return;
 		const { message: messageToUpdate, index: messageIndex } = result;
 		const originalContent = messageToUpdate.content;
-
 		try {
 			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
 			const rootMessage = allMessages.find((m) => m.type === 'root' && m.parent === null);
 			const isFirstUserMessage = rootMessage && messageToUpdate.parent === rootMessage.id;
-
 			conversationsStore.updateMessageAtIndex(messageIndex, { content: newContent });
 			await DatabaseService.updateMessage(messageId, { content: newContent });
-
-			if (isFirstUserMessage && newContent.trim()) {
+			if (isFirstUserMessage && newContent.trim())
 				await conversationsStore.updateConversationTitleWithConfirmation(
 					activeConv.id,
-					newContent.trim(),
-					conversationsStore.titleUpdateConfirmationCallback
+					newContent.trim()
 				);
-			}
-
 			const messagesToRemove = conversationsStore.activeMessages.slice(messageIndex + 1);
-
 			for (const message of messagesToRemove) await DatabaseService.deleteMessage(message.id);
-
 			conversationsStore.sliceActiveMessages(messageIndex + 1);
 			conversationsStore.updateConversationTimestamp();
-
 			this.setChatLoading(activeConv.id, true);
 			this.clearChatStreaming(activeConv.id);
-
 			const assistantMessage = await this.createAssistantMessage();
-
-			if (!assistantMessage) throw new Error('Failed to create assistant message');
-
 			conversationsStore.addMessageToActive(assistantMessage);
-
 			await conversationsStore.updateCurrentNode(assistantMessage.id);
 			await this.streamChatCompletion(
 				conversationsStore.activeMessages.slice(0, -1),
@@ -1040,44 +832,84 @@ class ChatStore {
 				}
 			);
 		} catch (error) {
-			if (!this.isAbortError(error)) console.error('Failed to update message:', error);
+			if (!isAbortError(error)) console.error('Failed to update message:', error);
 		}
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Regeneration
-	// ─────────────────────────────────────────────────────────────────────────────
-
 	async regenerateMessage(messageId: string): Promise<void> {
 		const activeConv = conversationsStore.activeConversation;
-		if (!activeConv || this.isLoading) return;
-
-		const result = this.getMessageByIdWithRole(messageId, 'assistant');
+		if (!activeConv || this.isChatLoadingInternal(activeConv.id)) return;
+		const result = this.getMessageByIdWithRole(messageId, MessageRole.ASSISTANT);
 		if (!result) return;
 		const { index: messageIndex } = result;
-
 		try {
 			const messagesToRemove = conversationsStore.activeMessages.slice(messageIndex);
 			for (const message of messagesToRemove) await DatabaseService.deleteMessage(message.id);
 			conversationsStore.sliceActiveMessages(messageIndex);
 			conversationsStore.updateConversationTimestamp();
-
 			this.setChatLoading(activeConv.id, true);
 			this.clearChatStreaming(activeConv.id);
-
 			const parentMessageId =
 				conversationsStore.activeMessages.length > 0
 					? conversationsStore.activeMessages[conversationsStore.activeMessages.length - 1].id
 					: undefined;
 			const assistantMessage = await this.createAssistantMessage(parentMessageId);
-			if (!assistantMessage) throw new Error('Failed to create assistant message');
 			conversationsStore.addMessageToActive(assistantMessage);
 			await this.streamChatCompletion(
 				conversationsStore.activeMessages.slice(0, -1),
 				assistantMessage
 			);
 		} catch (error) {
-			if (!this.isAbortError(error)) console.error('Failed to regenerate message:', error);
+			if (!isAbortError(error)) console.error('Failed to regenerate message:', error);
+			this.setChatLoading(activeConv?.id || '', false);
+		}
+	}
+
+	async regenerateMessageWithBranching(messageId: string, modelOverride?: string): Promise<void> {
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv || this.isChatLoadingInternal(activeConv.id)) return;
+		try {
+			const idx = conversationsStore.findMessageIndex(messageId);
+			if (idx === -1) return;
+			const msg = conversationsStore.activeMessages[idx];
+			if (msg.role !== MessageRole.ASSISTANT) return;
+			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
+			const parentMessage = allMessages.find((m) => m.id === msg.parent);
+			if (!parentMessage) return;
+			this.setChatLoading(activeConv.id, true);
+			this.clearChatStreaming(activeConv.id);
+			const newAssistantMessage = await DatabaseService.createMessageBranch(
+				{
+					convId: msg.convId,
+					type: msg.type,
+					timestamp: Date.now(),
+					role: msg.role,
+					content: '',
+					toolCalls: '',
+					children: [],
+					model: null
+				},
+				parentMessage.id
+			);
+			await conversationsStore.updateCurrentNode(newAssistantMessage.id);
+			conversationsStore.updateConversationTimestamp();
+			await conversationsStore.refreshActiveMessages();
+			const conversationPath = filterByLeafNodeId(
+				allMessages,
+				parentMessage.id,
+				false
+			) as DatabaseMessage[];
+			const modelToUse = modelOverride || msg.model || undefined;
+			await this.streamChatCompletion(
+				conversationPath,
+				newAssistantMessage,
+				undefined,
+				undefined,
+				modelToUse
+			);
+		} catch (error) {
+			if (!isAbortError(error))
+				console.error('Failed to regenerate message with branching:', error);
 			this.setChatLoading(activeConv?.id || '', false);
 		}
 	}
@@ -1095,17 +927,17 @@ class ChatStore {
 		const messageToDelete = allMessages.find((m) => m.id === messageId);
 
 		// For system messages, don't count descendants as they will be preserved (reparented to root)
-		if (messageToDelete?.role === 'system') {
+		if (messageToDelete?.role === MessageRole.SYSTEM) {
 			const messagesToDelete = allMessages.filter((m) => m.id === messageId);
 			let userMessages = 0,
 				assistantMessages = 0;
 			const messageTypes: string[] = [];
 
 			for (const msg of messagesToDelete) {
-				if (msg.role === 'user') {
+				if (msg.role === MessageRole.USER) {
 					userMessages++;
 					if (!messageTypes.includes('user message')) messageTypes.push('user message');
-				} else if (msg.role === 'assistant') {
+				} else if (msg.role === MessageRole.ASSISTANT) {
 					assistantMessages++;
 					if (!messageTypes.includes('assistant response')) messageTypes.push('assistant response');
 				}
@@ -1120,15 +952,17 @@ class ChatStore {
 		let userMessages = 0,
 			assistantMessages = 0;
 		const messageTypes: string[] = [];
+
 		for (const msg of messagesToDelete) {
-			if (msg.role === 'user') {
+			if (msg.role === MessageRole.USER) {
 				userMessages++;
 				if (!messageTypes.includes('user message')) messageTypes.push('user message');
-			} else if (msg.role === 'assistant') {
+			} else if (msg.role === MessageRole.ASSISTANT) {
 				assistantMessages++;
 				if (!messageTypes.includes('assistant response')) messageTypes.push('assistant response');
 			}
 		}
+
 		return { totalCount: allToDelete.length, userMessages, assistantMessages, messageTypes };
 	}
 
@@ -1138,6 +972,7 @@ class ChatStore {
 		try {
 			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
 			const messageToDelete = allMessages.find((m) => m.id === messageId);
+
 			if (!messageToDelete) return;
 
 			const currentPath = filterByLeafNodeId(allMessages, activeConv.currNode || '', false);
@@ -1152,6 +987,7 @@ class ChatStore {
 					const latestSibling = siblings.reduce((latest, sibling) =>
 						sibling.timestamp > latest.timestamp ? sibling : latest
 					);
+
 					await conversationsStore.updateCurrentNode(findLeafNode(allMessages, latestSibling.id));
 				} else if (messageToDelete.parent) {
 					await conversationsStore.updateCurrentNode(
@@ -1159,6 +995,7 @@ class ChatStore {
 					);
 				}
 			}
+
 			await DatabaseService.deleteMessageCascading(activeConv.id, messageId);
 			await conversationsStore.refreshActiveMessages();
 
@@ -1168,27 +1005,17 @@ class ChatStore {
 		}
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Editing
-	// ─────────────────────────────────────────────────────────────────────────────
-
-	clearEditMode(): void {
-		this.isEditModeActive = false;
-		this.addFilesHandler = null;
-	}
-
 	async continueAssistantMessage(messageId: string): Promise<void> {
 		const activeConv = conversationsStore.activeConversation;
-		if (!activeConv || this.isLoading) return;
+		if (!activeConv || this.isChatLoadingInternal(activeConv.id)) return;
+		const result = this.getMessageByIdWithRole(messageId, MessageRole.ASSISTANT);
 
-		const result = this.getMessageByIdWithRole(messageId, 'assistant');
 		if (!result) return;
-		const { message: msg, index: idx } = result;
 
-		if (this.isChatLoading(activeConv.id)) return;
+		const { message: msg, index: idx } = result;
 
 		try {
-			this.errorDialogState = null;
+			this.showErrorDialog(null);
 			this.setChatLoading(activeConv.id, true);
 			this.clearChatStreaming(activeConv.id);
 
@@ -1197,22 +1024,51 @@ class ChatStore {
 
 			if (!dbMessage) {
 				this.setChatLoading(activeConv.id, false);
-
 				return;
 			}
 
 			const originalContent = dbMessage.content;
-			const originalThinking = dbMessage.thinking || '';
-
 			const conversationContext = conversationsStore.activeMessages.slice(0, idx);
 			const contextWithContinue = [
 				...conversationContext,
-				{ role: 'assistant' as const, content: originalContent }
+				{ role: MessageRole.ASSISTANT as const, content: originalContent }
 			];
 
 			let appendedContent = '',
-				appendedThinking = '',
-				hasReceivedContent = false;
+				hasReceivedContent = false,
+				isReasoningOpen = hasUnclosedReasoningTag(originalContent);
+
+			const updateStreamingContent = (fullContent: string) => {
+				this.setChatStreaming(msg.convId, fullContent, msg.id);
+				conversationsStore.updateMessageAtIndex(idx, { content: fullContent });
+			};
+
+			const appendContentChunk = (chunk: string) => {
+				if (isReasoningOpen) {
+					appendedContent += REASONING_TAGS.END;
+					isReasoningOpen = false;
+				}
+				appendedContent += chunk;
+				hasReceivedContent = true;
+				updateStreamingContent(originalContent + appendedContent);
+			};
+
+			const appendReasoningChunk = (chunk: string) => {
+				if (!isReasoningOpen) {
+					appendedContent += REASONING_TAGS.START;
+					isReasoningOpen = true;
+				}
+				appendedContent += chunk;
+				hasReceivedContent = true;
+				updateStreamingContent(originalContent + appendedContent);
+			};
+
+			const finalizeReasoning = () => {
+				if (isReasoningOpen) {
+					appendedContent += REASONING_TAGS.END;
+					isReasoningOpen = false;
+				}
+			};
 
 			const abortController = this.getOrCreateAbortController(msg.convId);
 
@@ -1220,23 +1076,8 @@ class ChatStore {
 				contextWithContinue,
 				{
 					...this.getApiOptions(),
-
-					onChunk: (chunk: string) => {
-						hasReceivedContent = true;
-						appendedContent += chunk;
-						const fullContent = originalContent + appendedContent;
-						this.setChatStreaming(msg.convId, fullContent, msg.id);
-						conversationsStore.updateMessageAtIndex(idx, { content: fullContent });
-					},
-
-					onReasoningChunk: (reasoningChunk: string) => {
-						hasReceivedContent = true;
-						appendedThinking += reasoningChunk;
-						conversationsStore.updateMessageAtIndex(idx, {
-							thinking: originalThinking + appendedThinking
-						});
-					},
-
+					onChunk: (chunk: string) => appendContentChunk(chunk),
+					onReasoningChunk: (chunk: string) => appendReasoningChunk(chunk),
 					onTimings: (timings?: ChatMessageTimings, promptProgress?: ChatMessagePromptProgress) => {
 						const tokensPerSecond =
 							timings?.predicted_ms && timings?.predicted_n
@@ -1254,74 +1095,78 @@ class ChatStore {
 							msg.convId
 						);
 					},
-
 					onComplete: async (
 						finalContent?: string,
 						reasoningContent?: string,
 						timings?: ChatMessageTimings
 					) => {
-						const fullContent = originalContent + (finalContent || appendedContent);
-						const fullThinking = originalThinking + (reasoningContent || appendedThinking);
+						finalizeReasoning();
+
+						const appendedFromCompletion = hasReceivedContent
+							? appendedContent
+							: wrapReasoningContent(finalContent || '', reasoningContent);
+						const fullContent = originalContent + appendedFromCompletion;
+
 						await DatabaseService.updateMessage(msg.id, {
 							content: fullContent,
-							thinking: fullThinking,
 							timestamp: Date.now(),
 							timings
 						});
+
 						conversationsStore.updateMessageAtIndex(idx, {
 							content: fullContent,
-							thinking: fullThinking,
 							timestamp: Date.now(),
 							timings
 						});
+
 						conversationsStore.updateConversationTimestamp();
+
 						this.setChatLoading(msg.convId, false);
 						this.clearChatStreaming(msg.convId);
-						this.clearProcessingState(msg.convId);
+						this.setProcessingState(msg.convId, null);
 					},
-
 					onError: async (error: Error) => {
-						if (this.isAbortError(error)) {
+						if (isAbortError(error)) {
 							if (hasReceivedContent && appendedContent) {
 								await DatabaseService.updateMessage(msg.id, {
 									content: originalContent + appendedContent,
-									thinking: originalThinking + appendedThinking,
 									timestamp: Date.now()
 								});
+
 								conversationsStore.updateMessageAtIndex(idx, {
 									content: originalContent + appendedContent,
-									thinking: originalThinking + appendedThinking,
 									timestamp: Date.now()
 								});
 							}
+
 							this.setChatLoading(msg.convId, false);
 							this.clearChatStreaming(msg.convId);
-							this.clearProcessingState(msg.convId);
+							this.setProcessingState(msg.convId, null);
+
 							return;
 						}
+
 						console.error('Continue generation error:', error);
-						conversationsStore.updateMessageAtIndex(idx, {
-							content: originalContent,
-							thinking: originalThinking
-						});
-						await DatabaseService.updateMessage(msg.id, {
-							content: originalContent,
-							thinking: originalThinking
-						});
+						conversationsStore.updateMessageAtIndex(idx, { content: originalContent });
+
+						await DatabaseService.updateMessage(msg.id, { content: originalContent });
+
 						this.setChatLoading(msg.convId, false);
 						this.clearChatStreaming(msg.convId);
-						this.clearProcessingState(msg.convId);
-						this.showErrorDialog(
-							error.name === 'TimeoutError' ? 'timeout' : 'server',
-							error.message
-						);
+						this.setProcessingState(msg.convId, null);
+						this.showErrorDialog({
+							type:
+								error.name === 'TimeoutError' ? ErrorDialogType.TIMEOUT : ErrorDialogType.SERVER,
+							message: error.message
+						});
 					}
 				},
+
 				msg.convId,
 				abortController.signal
 			);
 		} catch (error) {
-			if (!this.isAbortError(error)) console.error('Failed to continue message:', error);
+			if (!isAbortError(error)) console.error('Failed to continue message:', error);
 			if (activeConv) this.setChatLoading(activeConv.id, false);
 		}
 	}
@@ -1332,10 +1177,11 @@ class ChatStore {
 		shouldBranch: boolean
 	): Promise<void> {
 		const activeConv = conversationsStore.activeConversation;
-		if (!activeConv || this.isLoading) return;
+		if (!activeConv || this.isChatLoadingInternal(activeConv.id)) return;
 
-		const result = this.getMessageByIdWithRole(messageId, 'assistant');
+		const result = this.getMessageByIdWithRole(messageId, MessageRole.ASSISTANT);
 		if (!result) return;
+
 		const { message: msg, index: idx } = result;
 
 		try {
@@ -1347,22 +1193,22 @@ class ChatStore {
 						timestamp: Date.now(),
 						role: msg.role,
 						content: newContent,
-						thinking: msg.thinking || '',
 						toolCalls: msg.toolCalls || '',
 						children: [],
 						model: msg.model
 					},
 					msg.parent!
 				);
+
 				await conversationsStore.updateCurrentNode(newMessage.id);
 			} else {
 				await DatabaseService.updateMessage(msg.id, { content: newContent });
 				await conversationsStore.updateCurrentNode(msg.id);
-				conversationsStore.updateMessageAtIndex(idx, {
-					content: newContent
-				});
+				conversationsStore.updateMessageAtIndex(idx, { content: newContent });
 			}
+
 			conversationsStore.updateConversationTimestamp();
+
 			await conversationsStore.refreshActiveMessages();
 		} catch (error) {
 			console.error('Failed to edit assistant message:', error);
@@ -1377,22 +1223,17 @@ class ChatStore {
 		const activeConv = conversationsStore.activeConversation;
 		if (!activeConv) return;
 
-		const result = this.getMessageByIdWithRole(messageId, 'user');
+		const result = this.getMessageByIdWithRole(messageId, MessageRole.USER);
 		if (!result) return;
-		const { message: msg, index: idx } = result;
 
+		const { message: msg, index: idx } = result;
 		try {
-			const updateData: Partial<DatabaseMessage> = {
-				content: newContent
-			};
+			const updateData: Partial<DatabaseMessage> = { content: newContent };
 
-			// Update extras if provided (including empty array to clear attachments)
-			// Deep clone to avoid Proxy objects from Svelte reactivity
-			if (newExtras !== undefined) {
-				updateData.extra = JSON.parse(JSON.stringify(newExtras));
-			}
+			if (newExtras !== undefined) updateData.extra = JSON.parse(JSON.stringify(newExtras));
 
 			await DatabaseService.updateMessage(messageId, updateData);
+
 			conversationsStore.updateMessageAtIndex(idx, updateData);
 
 			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
@@ -1401,10 +1242,10 @@ class ChatStore {
 			if (rootMessage && msg.parent === rootMessage.id && newContent.trim()) {
 				await conversationsStore.updateConversationTitleWithConfirmation(
 					activeConv.id,
-					newContent.trim(),
-					conversationsStore.titleUpdateConfirmationCallback
+					newContent.trim()
 				);
 			}
+
 			conversationsStore.updateConversationTimestamp();
 		} catch (error) {
 			console.error('Failed to edit user message:', error);
@@ -1417,35 +1258,24 @@ class ChatStore {
 		newExtras?: DatabaseMessageExtra[]
 	): Promise<void> {
 		const activeConv = conversationsStore.activeConversation;
-		if (!activeConv || this.isLoading) return;
-
-		let result = this.getMessageByIdWithRole(messageId, 'user');
-
-		if (!result) {
-			result = this.getMessageByIdWithRole(messageId, 'system');
-		}
-
+		if (!activeConv || this.isChatLoadingInternal(activeConv.id)) return;
+		let result = this.getMessageByIdWithRole(messageId, MessageRole.USER);
+		if (!result) result = this.getMessageByIdWithRole(messageId, MessageRole.SYSTEM);
 		if (!result) return;
 		const { message: msg } = result;
-
 		try {
 			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
 			const rootMessage = allMessages.find((m) => m.type === 'root' && m.parent === null);
 			const isFirstUserMessage =
-				msg.role === 'user' && rootMessage && msg.parent === rootMessage.id;
-
+				msg.role === MessageRole.USER && rootMessage && msg.parent === rootMessage.id;
 			const parentId = msg.parent || rootMessage?.id;
 			if (!parentId) return;
-
-			// Use newExtras if provided, otherwise copy existing extras
-			// Deep clone to avoid Proxy objects from Svelte reactivity
 			const extrasToUse =
 				newExtras !== undefined
 					? JSON.parse(JSON.stringify(newExtras))
 					: msg.extra
 						? JSON.parse(JSON.stringify(msg.extra))
 						: undefined;
-
 			const newMessage = await DatabaseService.createMessageBranch(
 				{
 					convId: msg.convId,
@@ -1453,7 +1283,6 @@ class ChatStore {
 					timestamp: Date.now(),
 					role: msg.role,
 					content: newContent,
-					thinking: msg.thinking || '',
 					toolCalls: msg.toolCalls || '',
 					children: [],
 					extra: extrasToUse,
@@ -1463,86 +1292,23 @@ class ChatStore {
 			);
 			await conversationsStore.updateCurrentNode(newMessage.id);
 			conversationsStore.updateConversationTimestamp();
-
-			if (isFirstUserMessage && newContent.trim()) {
+			if (isFirstUserMessage && newContent.trim())
 				await conversationsStore.updateConversationTitleWithConfirmation(
 					activeConv.id,
-					newContent.trim(),
-					conversationsStore.titleUpdateConfirmationCallback
+					newContent.trim()
 				);
-			}
 			await conversationsStore.refreshActiveMessages();
-
-			if (msg.role === 'user') {
-				await this.generateResponseForMessage(newMessage.id);
-			}
+			if (msg.role === MessageRole.USER) await this.generateResponseForMessage(newMessage.id);
 		} catch (error) {
 			console.error('Failed to edit message with branching:', error);
 		}
 	}
 
-	async regenerateMessageWithBranching(messageId: string, modelOverride?: string): Promise<void> {
-		const activeConv = conversationsStore.activeConversation;
-		if (!activeConv || this.isLoading) return;
-		try {
-			const idx = conversationsStore.findMessageIndex(messageId);
-			if (idx === -1) return;
-			const msg = conversationsStore.activeMessages[idx];
-			if (msg.role !== 'assistant') return;
-
-			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
-			const parentMessage = allMessages.find((m) => m.id === msg.parent);
-			if (!parentMessage) return;
-
-			this.setChatLoading(activeConv.id, true);
-			this.clearChatStreaming(activeConv.id);
-
-			const newAssistantMessage = await DatabaseService.createMessageBranch(
-				{
-					convId: activeConv.id,
-					type: 'text',
-					timestamp: Date.now(),
-					role: 'assistant',
-					content: '',
-					thinking: '',
-					toolCalls: '',
-					children: [],
-					model: null
-				},
-				parentMessage.id
-			);
-			await conversationsStore.updateCurrentNode(newAssistantMessage.id);
-			conversationsStore.updateConversationTimestamp();
-			await conversationsStore.refreshActiveMessages();
-
-			const conversationPath = filterByLeafNodeId(
-				allMessages,
-				parentMessage.id,
-				false
-			) as DatabaseMessage[];
-			// Use modelOverride if provided, otherwise use the original message's model
-			// If neither is available, don't pass model (will use global selection)
-			const modelToUse = modelOverride || msg.model || undefined;
-			await this.streamChatCompletion(
-				conversationPath,
-				newAssistantMessage,
-				undefined,
-				undefined,
-				modelToUse
-			);
-		} catch (error) {
-			if (!this.isAbortError(error))
-				console.error('Failed to regenerate message with branching:', error);
-			this.setChatLoading(activeConv?.id || '', false);
-		}
-	}
-
 	private async generateResponseForMessage(userMessageId: string): Promise<void> {
 		const activeConv = conversationsStore.activeConversation;
-
 		if (!activeConv) return;
 
-		this.errorDialogState = null;
+		this.showErrorDialog(null);
 		this.setChatLoading(activeConv.id, true);
 		this.clearChatStreaming(activeConv.id);
 
@@ -1556,18 +1322,19 @@ class ChatStore {
 			const assistantMessage = await DatabaseService.createMessageBranch(
 				{
 					convId: activeConv.id,
-					type: 'text',
+					type: MessageType.TEXT,
 					timestamp: Date.now(),
-					role: 'assistant',
+					role: MessageRole.ASSISTANT,
 					content: '',
-					thinking: '',
 					toolCalls: '',
 					children: [],
 					model: null
 				},
 				userMessageId
 			);
+
 			conversationsStore.addMessageToActive(assistantMessage);
+
 			await this.streamChatCompletion(conversationPath, assistantMessage);
 		} catch (error) {
 			console.error('Failed to generate response:', error);
@@ -1575,117 +1342,194 @@ class ChatStore {
 		}
 	}
 
-	getAddFilesHandler(): ((files: File[]) => void) | null {
-		return this.addFilesHandler;
-	}
-
-	savePendingDraft(message: string, files: ChatUploadedFile[]): void {
-		this._pendingDraftMessage = message;
-		this._pendingDraftFiles = [...files];
-	}
+	private getContextTotal(): number | null {
+		const activeConvId = this.activeConversationId;
+		const activeState = activeConvId ? this.getProcessingState(activeConvId) : null;
 
-	consumePendingDraft(): { message: string; files: ChatUploadedFile[] } | null {
-		if (!this._pendingDraftMessage && this._pendingDraftFiles.length === 0) {
-			return null;
-		}
+		if (activeState && typeof activeState.contextTotal === 'number' && activeState.contextTotal > 0)
+			return activeState.contextTotal;
 
-		const draft = {
-			message: this._pendingDraftMessage,
-			files: [...this._pendingDraftFiles]
-		};
+		if (isRouterMode()) {
+			const modelContextSize = selectedModelContextSize();
 
-		this._pendingDraftMessage = '';
-		this._pendingDraftFiles = [];
+			if (typeof modelContextSize === 'number' && modelContextSize > 0) {
+				return modelContextSize;
+			}
+		} else {
+			const propsContextSize = contextSize();
 
-		return draft;
-	}
+			if (typeof propsContextSize === 'number' && propsContextSize > 0) {
+				return propsContextSize;
+			}
+		}
 
-	hasPendingDraft(): boolean {
-		return Boolean(this._pendingDraftMessage) || this._pendingDraftFiles.length > 0;
+		return null;
 	}
 
-	public getAllLoadingChats(): string[] {
-		return Array.from(this.chatLoadingStates.keys());
-	}
+	updateProcessingStateFromTimings(
+		timingData: {
+			prompt_n: number;
+			prompt_ms?: number;
+			predicted_n: number;
+			predicted_per_second: number;
+			cache_n: number;
+			prompt_progress?: ChatMessagePromptProgress;
+		},
+		conversationId?: string
+	): void {
+		const processingState = this.parseTimingData(timingData);
 
-	public getAllStreamingChats(): string[] {
-		return Array.from(this.chatStreamingStates.keys());
-	}
+		if (processingState === null) {
+			console.warn('Failed to parse timing data - skipping update');
+			return;
+		}
 
-	public getChatStreamingPublic(
-		convId: string
-	): { response: string; messageId: string } | undefined {
-		return this.getChatStreaming(convId);
+		const targetId = conversationId || this.activeConversationId;
+		if (targetId) {
+			this.setProcessingState(targetId, processingState);
+		}
 	}
 
-	public isChatLoadingPublic(convId: string): boolean {
-		return this.isChatLoading(convId);
+	private parseTimingData(timingData: Record<string, unknown>): ApiProcessingState | null {
+		const promptTokens = (timingData.prompt_n as number) || 0,
+			promptMs = (timingData.prompt_ms as number) || undefined,
+			predictedTokens = (timingData.predicted_n as number) || 0,
+			tokensPerSecond = (timingData.predicted_per_second as number) || 0,
+			cacheTokens = (timingData.cache_n as number) || 0;
+		const promptProgress = timingData.prompt_progress as
+			| { total: number; cache: number; processed: number; time_ms: number }
+			| undefined;
+		const contextTotal = this.getContextTotal();
+		const currentConfig = config();
+		const outputTokensMax = currentConfig.max_tokens || -1;
+		const contextUsed = promptTokens + cacheTokens + predictedTokens,
+			outputTokensUsed = predictedTokens;
+		const progressCache = promptProgress?.cache || 0,
+			progressActualDone = (promptProgress?.processed ?? 0) - progressCache,
+			progressActualTotal = (promptProgress?.total ?? 0) - progressCache;
+		const progressPercent = promptProgress
+			? Math.round((progressActualDone / progressActualTotal) * 100)
+			: undefined;
+		return {
+			status: predictedTokens > 0 ? 'generating' : promptProgress ? 'preparing' : 'idle',
+			tokensDecoded: predictedTokens,
+			tokensRemaining: outputTokensMax - predictedTokens,
+			contextUsed,
+			contextTotal,
+			outputTokensUsed,
+			outputTokensMax,
+			hasNextToken: predictedTokens > 0,
+			tokensPerSecond,
+			temperature: currentConfig.temperature ?? 0.8,
+			topP: currentConfig.top_p ?? 0.95,
+			speculative: false,
+			progressPercent,
+			promptProgress,
+			promptTokens,
+			promptMs,
+			cacheTokens
+		};
 	}
 
-	isEditing(): boolean {
-		return this.isEditModeActive;
+	restoreProcessingStateFromMessages(messages: DatabaseMessage[], conversationId: string): void {
+		for (let i = messages.length - 1; i >= 0; i--) {
+			const message = messages[i];
+			if (message.role === MessageRole.ASSISTANT && message.timings) {
+				const restoredState = this.parseTimingData({
+					prompt_n: message.timings.prompt_n || 0,
+					prompt_ms: message.timings.prompt_ms,
+					predicted_n: message.timings.predicted_n || 0,
+					predicted_per_second:
+						message.timings.predicted_n && message.timings.predicted_ms
+							? (message.timings.predicted_n / message.timings.predicted_ms) * 1000
+							: 0,
+					cache_n: message.timings.cache_n || 0
+				});
+				if (restoredState) {
+					this.setProcessingState(conversationId, restoredState);
+					return;
+				}
+			}
+		}
 	}
 
-	setEditModeActive(handler: (files: File[]) => void): void {
-		this.isEditModeActive = true;
-		this.addFilesHandler = handler;
+	getConversationModel(messages: DatabaseMessage[]): string | null {
+		for (let i = messages.length - 1; i >= 0; i--) {
+			const message = messages[i];
+			if (message.role === MessageRole.ASSISTANT && message.model) return message.model;
+		}
+		return null;
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Utilities
-	// ─────────────────────────────────────────────────────────────────────────────
-
 	private getApiOptions(): Record<string, unknown> {
 		const currentConfig = config();
 		const hasValue = (value: unknown): boolean =>
 			value !== undefined && value !== null && value !== '';
-
 		const apiOptions: Record<string, unknown> = { stream: true, timings_per_token: true };
 
-		// Model selection (required in ROUTER mode)
 		if (isRouterMode()) {
 			const modelName = selectedModelName();
 			if (modelName) apiOptions.model = modelName;
 		}
 
-		// Config options needed by ChatService
 		if (currentConfig.systemMessage) apiOptions.systemMessage = currentConfig.systemMessage;
+
 		if (currentConfig.disableReasoningParsing) apiOptions.disableReasoningParsing = true;
 
 		if (hasValue(currentConfig.temperature))
 			apiOptions.temperature = Number(currentConfig.temperature);
+
 		if (hasValue(currentConfig.max_tokens))
 			apiOptions.max_tokens = Number(currentConfig.max_tokens);
+
 		if (hasValue(currentConfig.dynatemp_range))
 			apiOptions.dynatemp_range = Number(currentConfig.dynatemp_range);
+
 		if (hasValue(currentConfig.dynatemp_exponent))
 			apiOptions.dynatemp_exponent = Number(currentConfig.dynatemp_exponent);
+
 		if (hasValue(currentConfig.top_k)) apiOptions.top_k = Number(currentConfig.top_k);
+
 		if (hasValue(currentConfig.top_p)) apiOptions.top_p = Number(currentConfig.top_p);
+
 		if (hasValue(currentConfig.min_p)) apiOptions.min_p = Number(currentConfig.min_p);
+
 		if (hasValue(currentConfig.xtc_probability))
 			apiOptions.xtc_probability = Number(currentConfig.xtc_probability);
+
 		if (hasValue(currentConfig.xtc_threshold))
 			apiOptions.xtc_threshold = Number(currentConfig.xtc_threshold);
+
 		if (hasValue(currentConfig.typ_p)) apiOptions.typ_p = Number(currentConfig.typ_p);
+
 		if (hasValue(currentConfig.repeat_last_n))
 			apiOptions.repeat_last_n = Number(currentConfig.repeat_last_n);
+
 		if (hasValue(currentConfig.repeat_penalty))
 			apiOptions.repeat_penalty = Number(currentConfig.repeat_penalty);
+
 		if (hasValue(currentConfig.presence_penalty))
 			apiOptions.presence_penalty = Number(currentConfig.presence_penalty);
+
 		if (hasValue(currentConfig.frequency_penalty))
 			apiOptions.frequency_penalty = Number(currentConfig.frequency_penalty);
+
 		if (hasValue(currentConfig.dry_multiplier))
 			apiOptions.dry_multiplier = Number(currentConfig.dry_multiplier);
+
 		if (hasValue(currentConfig.dry_base)) apiOptions.dry_base = Number(currentConfig.dry_base);
+
 		if (hasValue(currentConfig.dry_allowed_length))
 			apiOptions.dry_allowed_length = Number(currentConfig.dry_allowed_length);
+
 		if (hasValue(currentConfig.dry_penalty_last_n))
 			apiOptions.dry_penalty_last_n = Number(currentConfig.dry_penalty_last_n);
+
 		if (currentConfig.samplers) apiOptions.samplers = currentConfig.samplers;
+
 		if (currentConfig.backend_sampling)
 			apiOptions.backend_sampling = currentConfig.backend_sampling;
+
 		if (currentConfig.custom) apiOptions.custom = currentConfig.custom;
 
 		return apiOptions;
@@ -1695,7 +1539,6 @@ class ChatStore {
 export const chatStore = new ChatStore();
 
 export const activeProcessingState = () => chatStore.activeProcessingState;
-export const clearEditMode = () => chatStore.clearEditMode();
 export const currentResponse = () => chatStore.currentResponse;
 export const errorDialog = () => chatStore.errorDialogState;
 export const getAddFilesHandler = () => chatStore.getAddFilesHandler();
@@ -1706,9 +1549,4 @@ export const isChatLoading = (convId: string) => chatStore.isChatLoadingPublic(c
 export const isChatStreaming = () => chatStore.isStreaming();
 export const isEditing = () => chatStore.isEditing();
 export const isLoading = () => chatStore.isLoading;
-export const setEditModeActive = (handler: (files: File[]) => void) =>
-	chatStore.setEditModeActive(handler);
 export const pendingEditMessageId = () => chatStore.pendingEditMessageId;
-export const clearPendingEditMessageId = () => (chatStore.pendingEditMessageId = null);
-export const removeSystemPromptPlaceholder = (messageId: string) =>
-	chatStore.removeSystemPromptPlaceholder(messageId);
diff --git a/tools/server/webui/src/lib/stores/conversations.svelte.ts b/tools/server/webui/src/lib/stores/conversations.svelte.ts
index 1d1c6f16a1c..ec1daa90d96 100644
--- a/tools/server/webui/src/lib/stores/conversations.svelte.ts
+++ b/tools/server/webui/src/lib/stores/conversations.svelte.ts
@@ -1,54 +1,40 @@
-import { browser } from '$app/environment';
-import { goto } from '$app/navigation';
-import { toast } from 'svelte-sonner';
-import { DatabaseService } from '$lib/services/database.service';
-import { config } from '$lib/stores/settings.svelte';
-import { filterByLeafNodeId, findLeafNode } from '$lib/utils';
-import { AttachmentType } from '$lib/enums';
-
 /**
- * conversationsStore - Persistent conversation data and lifecycle management
- *
- * **Terminology - Chat vs Conversation:**
- * - **Chat**: The active interaction space with the Chat Completions API. Represents the
- *   real-time streaming session, loading states, and UI visualization of AI communication.
- *   Managed by chatStore, a "chat" is ephemeral and exists during active AI interactions.
- * - **Conversation**: The persistent database entity storing all messages and metadata.
- *   A "conversation" survives across sessions, page reloads, and browser restarts.
- *   It contains the complete message history, branching structure, and conversation metadata.
+ * conversationsStore - Reactive State Store for Conversations
  *
- * This store manages all conversation-level data and operations including creation, loading,
- * deletion, and navigation. It maintains the list of conversations and the currently active
- * conversation with its message history, providing reactive state for UI components.
+ * Manages conversation lifecycle, persistence, navigation, and MCP server overrides.
  *
  * **Architecture & Relationships:**
- * - **conversationsStore** (this class): Persistent conversation data management
- *   - Manages conversation list and active conversation state
- *   - Handles conversation CRUD operations via DatabaseService
- *   - Maintains active message array for current conversation
- *   - Coordinates branching navigation (currNode tracking)
+ * - **DatabaseService**: Stateless IndexedDB layer
+ * - **conversationsStore** (this): Reactive state + business logic
+ * - **chatStore**: Chat-specific state (streaming, loading)
  *
- * - **chatStore**: Uses conversation data as context for active AI streaming
- * - **DatabaseService**: Low-level IndexedDB storage for conversations and messages
+ * **Key Responsibilities:**
+ * - Conversation CRUD (create, load, delete)
+ * - Message management and tree navigation
+ * - MCP server per-chat overrides
+ * - Import/Export functionality
+ * - Title management with confirmation
  *
- * **Key Features:**
- * - **Conversation Lifecycle**: Create, load, update, delete conversations
- * - **Message Management**: Active message array with branching support
- * - **Import/Export**: JSON-based conversation backup and restore
- * - **Branch Navigation**: Navigate between message tree branches
- * - **Title Management**: Auto-update titles with confirmation dialogs
- * - **Reactive State**: Svelte 5 runes for automatic UI updates
- *
- * **State Properties:**
- * - `conversations`: All conversations sorted by last modified
- * - `activeConversation`: Currently viewed conversation
- * - `activeMessages`: Messages in current conversation path
- * - `isInitialized`: Store initialization status
+ * @see DatabaseService in services/database.ts for IndexedDB operations
  */
+
+import { goto } from '$app/navigation';
+import { browser } from '$app/environment';
+import { toast } from 'svelte-sonner';
+import { DatabaseService } from '$lib/services/database.service';
+import { config } from '$lib/stores/settings.svelte';
+import { filterByLeafNodeId, findLeafNode } from '$lib/utils';
+import type { McpServerOverride } from '$lib/types/database';
+import { MessageRole } from '$lib/enums';
+
 class ConversationsStore {
-	// ─────────────────────────────────────────────────────────────────────────────
-	// State
-	// ─────────────────────────────────────────────────────────────────────────────
+	/**
+	 *
+	 *
+	 * State
+	 *
+	 *
+	 */
 
 	/** List of all conversations */
 	conversations = $state<DatabaseConversation[]>([]);
@@ -62,105 +48,134 @@ class ConversationsStore {
 	/** Whether the store has been initialized */
 	isInitialized = $state(false);
 
+	/** Pending MCP server overrides for new conversations (before first message) */
+	pendingMcpServerOverrides = $state<McpServerOverride[]>([]);
+
 	/** Callback for title update confirmation dialog */
 	titleUpdateConfirmationCallback?: (currentTitle: string, newTitle: string) => Promise<boolean>;
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Modalities
-	// ─────────────────────────────────────────────────────────────────────────────
+	/**
+	 * Callback for updating message content in chatStore.
+	 * Registered by chatStore to enable cross-store updates without circular dependency.
+	 */
+	private messageUpdateCallback:
+		| ((messageId: string, updates: Partial<DatabaseMessage>) => void)
+		| null = null;
 
 	/**
-	 * Modalities used in the active conversation.
-	 * Computed from attachments in activeMessages.
-	 * Used to filter available models - models must support all used modalities.
+	 *
+	 *
+	 * Lifecycle
+	 *
+	 *
 	 */
-	usedModalities: ModelModalities = $derived.by(() => {
-		return this.calculateModalitiesFromMessages(this.activeMessages);
-	});
 
 	/**
-	 * Calculate modalities from a list of messages.
-	 * Helper method used by both usedModalities and getModalitiesUpToMessage.
+	 * Initialize the store by loading conversations from database.
+	 * Must be called once after app startup.
 	 */
-	private calculateModalitiesFromMessages(messages: DatabaseMessage[]): ModelModalities {
-		const modalities: ModelModalities = { vision: false, audio: false };
+	async init(): Promise<void> {
+		if (!browser) return;
+		if (this.isInitialized) return;
 
-		for (const message of messages) {
-			if (!message.extra) continue;
+		try {
+			await this.loadConversations();
+			this.isInitialized = true;
+		} catch (error) {
+			console.error('Failed to initialize conversations:', error);
+		}
+	}
 
-			for (const extra of message.extra) {
-				if (extra.type === AttachmentType.IMAGE) {
-					modalities.vision = true;
-				}
+	/**
+	 * Alias for init() for backward compatibility.
+	 */
+	async initialize(): Promise<void> {
+		return this.init();
+	}
 
-				// PDF only requires vision if processed as images
-				if (extra.type === AttachmentType.PDF) {
-					const pdfExtra = extra as DatabaseMessageExtraPdfFile;
+	/**
+	 * Register a callback for message updates from other stores.
+	 * Called by chatStore during initialization.
+	 */
+	registerMessageUpdateCallback(
+		callback: (messageId: string, updates: Partial<DatabaseMessage>) => void
+	): void {
+		this.messageUpdateCallback = callback;
+	}
 
-					if (pdfExtra.processedAsImages) {
-						modalities.vision = true;
-					}
-				}
+	/**
+	 *
+	 *
+	 * Message Array Operations
+	 *
+	 *
+	 */
 
-				if (extra.type === AttachmentType.AUDIO) {
-					modalities.audio = true;
-				}
-			}
+	/**
+	 * Adds a message to the active messages array
+	 */
+	addMessageToActive(message: DatabaseMessage): void {
+		this.activeMessages.push(message);
+	}
 
-			if (modalities.vision && modalities.audio) break;
+	/**
+	 * Updates a message at a specific index in active messages
+	 */
+	updateMessageAtIndex(index: number, updates: Partial<DatabaseMessage>): void {
+		if (index !== -1 && this.activeMessages[index]) {
+			this.activeMessages[index] = { ...this.activeMessages[index], ...updates };
 		}
-
-		return modalities;
 	}
 
 	/**
-	 * Get modalities used in messages BEFORE the specified message.
-	 * Used for regeneration - only consider context that was available when generating this message.
+	 * Finds the index of a message in active messages
 	 */
-	getModalitiesUpToMessage(messageId: string): ModelModalities {
-		const messageIndex = this.activeMessages.findIndex((m) => m.id === messageId);
-
-		if (messageIndex === -1) {
-			return this.usedModalities;
-		}
+	findMessageIndex(messageId: string): number {
+		return this.activeMessages.findIndex((m) => m.id === messageId);
+	}
 
-		const messagesBefore = this.activeMessages.slice(0, messageIndex);
-		return this.calculateModalitiesFromMessages(messagesBefore);
+	/**
+	 * Removes messages from active messages starting at an index
+	 */
+	sliceActiveMessages(startIndex: number): void {
+		this.activeMessages = this.activeMessages.slice(0, startIndex);
 	}
 
-	constructor() {
-		if (browser) {
-			this.initialize();
+	/**
+	 * Removes a message from active messages by index
+	 */
+	removeMessageAtIndex(index: number): DatabaseMessage | undefined {
+		if (index !== -1) {
+			return this.activeMessages.splice(index, 1)[0];
 		}
+		return undefined;
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Lifecycle
-	// ─────────────────────────────────────────────────────────────────────────────
-
 	/**
-	 * Initializes the conversations store by loading conversations from the database
+	 * Sets the callback function for title update confirmations
 	 */
-	async initialize(): Promise<void> {
-		try {
-			await this.loadConversations();
-			this.isInitialized = true;
-		} catch (error) {
-			console.error('Failed to initialize conversations store:', error);
-		}
+	setTitleUpdateConfirmationCallback(
+		callback: (currentTitle: string, newTitle: string) => Promise<boolean>
+	): void {
+		this.titleUpdateConfirmationCallback = callback;
 	}
 
+	/**
+	 *
+	 *
+	 * Conversation CRUD
+	 *
+	 *
+	 */
+
 	/**
 	 * Loads all conversations from the database
 	 */
 	async loadConversations(): Promise<void> {
-		this.conversations = await DatabaseService.getAllConversations();
+		const conversations = await DatabaseService.getAllConversations();
+		this.conversations = conversations;
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Conversation CRUD
-	// ─────────────────────────────────────────────────────────────────────────────
-
 	/**
 	 * Creates a new conversation and navigates to it
 	 * @param name - Optional name for the conversation
@@ -170,7 +185,20 @@ class ConversationsStore {
 		const conversationName = name || `Chat ${new Date().toLocaleString()}`;
 		const conversation = await DatabaseService.createConversation(conversationName);
 
-		this.conversations.unshift(conversation);
+		if (this.pendingMcpServerOverrides.length > 0) {
+			// Deep clone to plain objects (Svelte 5 $state uses Proxies which can't be cloned to IndexedDB)
+			const plainOverrides = this.pendingMcpServerOverrides.map((o) => ({
+				serverId: o.serverId,
+				enabled: o.enabled
+			}));
+			conversation.mcpServerOverrides = plainOverrides;
+			await DatabaseService.updateConversation(conversation.id, {
+				mcpServerOverrides: plainOverrides
+			});
+			this.pendingMcpServerOverrides = [];
+		}
+
+		this.conversations = [conversation, ...this.conversations];
 		this.activeConversation = conversation;
 		this.activeMessages = [];
 
@@ -192,17 +220,20 @@ class ConversationsStore {
 				return false;
 			}
 
+			this.pendingMcpServerOverrides = [];
 			this.activeConversation = conversation;
 
 			if (conversation.currNode) {
 				const allMessages = await DatabaseService.getConversationMessages(convId);
-				this.activeMessages = filterByLeafNodeId(
+				const filteredMessages = filterByLeafNodeId(
 					allMessages,
 					conversation.currNode,
 					false
 				) as DatabaseMessage[];
+				this.activeMessages = filteredMessages;
 			} else {
-				this.activeMessages = await DatabaseService.getConversationMessages(convId);
+				const messages = await DatabaseService.getConversationMessages(convId);
+				this.activeMessages = messages;
 			}
 
 			return true;
@@ -213,21 +244,65 @@ class ConversationsStore {
 	}
 
 	/**
-	 * Clears the active conversation and messages
-	 * Used when navigating away from chat or starting fresh
+	 * Clears the active conversation and messages.
 	 */
 	clearActiveConversation(): void {
 		this.activeConversation = null;
 		this.activeMessages = [];
-		// Active processing conversation is now managed by chatStore
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Message Management
-	// ─────────────────────────────────────────────────────────────────────────────
+	/**
+	 * Deletes a conversation and all its messages
+	 * @param convId - The conversation ID to delete
+	 */
+	async deleteConversation(convId: string): Promise<void> {
+		try {
+			await DatabaseService.deleteConversation(convId);
+
+			this.conversations = this.conversations.filter((c) => c.id !== convId);
+
+			if (this.activeConversation?.id === convId) {
+				this.clearActiveConversation();
+				await goto(`?new_chat=true#/`);
+			}
+		} catch (error) {
+			console.error('Failed to delete conversation:', error);
+		}
+	}
+
+	/**
+	 * Deletes all conversations and their messages
+	 */
+	async deleteAll(): Promise<void> {
+		try {
+			const allConversations = await DatabaseService.getAllConversations();
+
+			for (const conv of allConversations) {
+				await DatabaseService.deleteConversation(conv.id);
+			}
+
+			this.clearActiveConversation();
+			this.conversations = [];
+
+			toast.success('All conversations deleted');
+
+			await goto(`?new_chat=true#/`);
+		} catch (error) {
+			console.error('Failed to delete all conversations:', error);
+			toast.error('Failed to delete conversations');
+		}
+	}
+
+	/**
+	 *
+	 *
+	 * Message Management
+	 *
+	 *
+	 */
 
 	/**
-	 * Refreshes active messages based on currNode after branch navigation
+	 * Refreshes active messages based on currNode after branch navigation.
 	 */
 	async refreshActiveMessages(): Promise<void> {
 		if (!this.activeConversation) return;
@@ -241,18 +316,32 @@ class ConversationsStore {
 
 		const leafNodeId =
 			this.activeConversation.currNode ||
-			allMessages.reduce((latest: DatabaseMessage, msg: DatabaseMessage) =>
-				msg.timestamp > latest.timestamp ? msg : latest
-			).id;
+			allMessages.reduce((latest, msg) => (msg.timestamp > latest.timestamp ? msg : latest)).id;
 
 		const currentPath = filterByLeafNodeId(allMessages, leafNodeId, false) as DatabaseMessage[];
 
-		this.activeMessages.length = 0;
-		this.activeMessages.push(...currentPath);
+		this.activeMessages = currentPath;
 	}
 
 	/**
-	 * Updates the name of a conversation
+	 * Gets all messages for a specific conversation
+	 * @param convId - The conversation ID
+	 * @returns Array of messages
+	 */
+	async getConversationMessages(convId: string): Promise<DatabaseMessage[]> {
+		return await DatabaseService.getConversationMessages(convId);
+	}
+
+	/**
+	 *
+	 *
+	 * Title Management
+	 *
+	 *
+	 */
+
+	/**
+	 * Updates the name of a conversation.
 	 * @param convId - The conversation ID to update
 	 * @param name - The new name for the conversation
 	 */
@@ -264,10 +353,11 @@ class ConversationsStore {
 
 			if (convIndex !== -1) {
 				this.conversations[convIndex].name = name;
+				this.conversations = [...this.conversations];
 			}
 
 			if (this.activeConversation?.id === convId) {
-				this.activeConversation.name = name;
+				this.activeConversation = { ...this.activeConversation, name };
 			}
 		} catch (error) {
 			console.error('Failed to update conversation name:', error);
@@ -278,22 +368,23 @@ class ConversationsStore {
 	 * Updates conversation title with optional confirmation dialog based on settings
 	 * @param convId - The conversation ID to update
 	 * @param newTitle - The new title content
-	 * @param onConfirmationNeeded - Callback when user confirmation is needed
 	 * @returns True if title was updated, false if cancelled
 	 */
 	async updateConversationTitleWithConfirmation(
 		convId: string,
-		newTitle: string,
-		onConfirmationNeeded?: (currentTitle: string, newTitle: string) => Promise<boolean>
+		newTitle: string
 	): Promise<boolean> {
 		try {
 			const currentConfig = config();
 
-			if (currentConfig.askForTitleConfirmation && onConfirmationNeeded) {
+			if (currentConfig.askForTitleConfirmation && this.titleUpdateConfirmationCallback) {
 				const conversation = await DatabaseService.getConversation(convId);
 				if (!conversation) return false;
 
-				const shouldUpdate = await onConfirmationNeeded(conversation.name, newTitle);
+				const shouldUpdate = await this.titleUpdateConfirmationCallback(
+					conversation.name,
+					newTitle
+				);
 				if (!shouldUpdate) return false;
 			}
 
@@ -305,21 +396,6 @@ class ConversationsStore {
 		}
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Navigation
-	// ─────────────────────────────────────────────────────────────────────────────
-
-	/**
-	 * Updates the current node of the active conversation
-	 * @param nodeId - The new current node ID
-	 */
-	async updateCurrentNode(nodeId: string): Promise<void> {
-		if (!this.activeConversation) return;
-
-		await DatabaseService.updateCurrentNode(this.activeConversation.id, nodeId);
-		this.activeConversation.currNode = nodeId;
-	}
-
 	/**
 	 * Updates conversation lastModified timestamp and moves it to top of list
 	 */
@@ -331,35 +407,51 @@ class ConversationsStore {
 		if (chatIndex !== -1) {
 			this.conversations[chatIndex].lastModified = Date.now();
 			const updatedConv = this.conversations.splice(chatIndex, 1)[0];
-			this.conversations.unshift(updatedConv);
+			this.conversations = [updatedConv, ...this.conversations];
 		}
 	}
 
 	/**
-	 * Navigates to a specific sibling branch by updating currNode and refreshing messages
+	 * Updates the current node of the active conversation
+	 * @param nodeId - The new current node ID
+	 */
+	async updateCurrentNode(nodeId: string): Promise<void> {
+		if (!this.activeConversation) return;
+
+		await DatabaseService.updateCurrentNode(this.activeConversation.id, nodeId);
+		this.activeConversation = { ...this.activeConversation, currNode: nodeId };
+	}
+
+	/**
+	 *
+	 *
+	 * Branch Navigation
+	 *
+	 *
+	 */
+
+	/**
+	 * Navigates to a specific sibling branch by updating currNode and refreshing messages.
 	 * @param siblingId - The sibling message ID to navigate to
 	 */
 	async navigateToSibling(siblingId: string): Promise<void> {
 		if (!this.activeConversation) return;
 
 		const allMessages = await DatabaseService.getConversationMessages(this.activeConversation.id);
-		const rootMessage = allMessages.find(
-			(m: DatabaseMessage) => m.type === 'root' && m.parent === null
-		);
+		const rootMessage = allMessages.find((m) => m.type === 'root' && m.parent === null);
 		const currentFirstUserMessage = this.activeMessages.find(
-			(m: DatabaseMessage) => m.role === 'user' && m.parent === rootMessage?.id
+			(m) => m.role === MessageRole.USER && m.parent === rootMessage?.id
 		);
 
 		const currentLeafNodeId = findLeafNode(allMessages, siblingId);
 
 		await DatabaseService.updateCurrentNode(this.activeConversation.id, currentLeafNodeId);
-		this.activeConversation.currNode = currentLeafNodeId;
+		this.activeConversation = { ...this.activeConversation, currNode: currentLeafNodeId };
 		await this.refreshActiveMessages();
 
-		// Only show title dialog if we're navigating between different first user message siblings
 		if (rootMessage && this.activeMessages.length > 0) {
 			const newFirstUserMessage = this.activeMessages.find(
-				(m: DatabaseMessage) => m.role === 'user' && m.parent === rootMessage.id
+				(m) => m.role === MessageRole.USER && m.parent === rootMessage.id
 			);
 
 			if (
@@ -371,61 +463,164 @@ class ConversationsStore {
 			) {
 				await this.updateConversationTitleWithConfirmation(
 					this.activeConversation.id,
-					newFirstUserMessage.content.trim(),
-					this.titleUpdateConfirmationCallback
+					newFirstUserMessage.content.trim()
 				);
 			}
 		}
 	}
 
 	/**
-	 * Deletes a conversation and all its messages
-	 * @param convId - The conversation ID to delete
+	 *
+	 *
+	 * MCP Server Overrides
+	 *
+	 *
 	 */
-	async deleteConversation(convId: string): Promise<void> {
-		try {
-			await DatabaseService.deleteConversation(convId);
 
-			this.conversations = this.conversations.filter((c) => c.id !== convId);
+	/**
+	 * Gets MCP server override for a specific server in the active conversation.
+	 * Falls back to pending overrides if no active conversation exists.
+	 * @param serverId - The server ID to check
+	 * @returns The override if set, undefined if using global setting
+	 */
+	getMcpServerOverride(serverId: string): McpServerOverride | undefined {
+		if (this.activeConversation) {
+			return this.activeConversation.mcpServerOverrides?.find(
+				(o: McpServerOverride) => o.serverId === serverId
+			);
+		}
+		return this.pendingMcpServerOverrides.find((o) => o.serverId === serverId);
+	}
 
-			if (this.activeConversation?.id === convId) {
-				this.clearActiveConversation();
-				await goto(`?new_chat=true#/`);
-			}
-		} catch (error) {
-			console.error('Failed to delete conversation:', error);
+	/**
+	 * Get all MCP server overrides for the current conversation.
+	 * Returns pending overrides if no active conversation.
+	 */
+	getAllMcpServerOverrides(): McpServerOverride[] {
+		if (this.activeConversation?.mcpServerOverrides) {
+			return this.activeConversation.mcpServerOverrides;
 		}
+		return this.pendingMcpServerOverrides;
 	}
 
 	/**
-	 * Deletes all conversations and their messages
+	 * Checks if an MCP server is enabled for the active conversation.
+	 * @param serverId - The server ID to check
+	 * @returns True if server is enabled for this conversation
 	 */
-	async deleteAll(): Promise<void> {
-		try {
-			const allConversations = await DatabaseService.getAllConversations();
+	isMcpServerEnabledForChat(serverId: string): boolean {
+		const override = this.getMcpServerOverride(serverId);
+		return override?.enabled ?? false;
+	}
 
-			for (const conv of allConversations) {
-				await DatabaseService.deleteConversation(conv.id);
+	/**
+	 * Sets or removes MCP server override for the active conversation.
+	 * If no conversation exists, stores as pending override.
+	 * @param serverId - The server ID to override
+	 * @param enabled - The enabled state, or undefined to remove override
+	 */
+	async setMcpServerOverride(serverId: string, enabled: boolean | undefined): Promise<void> {
+		if (!this.activeConversation) {
+			this.setPendingMcpServerOverride(serverId, enabled);
+			return;
+		}
+
+		// Clone to plain objects to avoid Proxy serialization issues with IndexedDB
+		const currentOverrides = (this.activeConversation.mcpServerOverrides || []).map(
+			(o: McpServerOverride) => ({
+				serverId: o.serverId,
+				enabled: o.enabled
+			})
+		);
+		let newOverrides: McpServerOverride[];
+
+		if (enabled === undefined) {
+			newOverrides = currentOverrides.filter((o: McpServerOverride) => o.serverId !== serverId);
+		} else {
+			const existingIndex = currentOverrides.findIndex(
+				(o: McpServerOverride) => o.serverId === serverId
+			);
+			if (existingIndex >= 0) {
+				newOverrides = [...currentOverrides];
+				newOverrides[existingIndex] = { serverId, enabled };
+			} else {
+				newOverrides = [...currentOverrides, { serverId, enabled }];
 			}
+		}
 
-			this.clearActiveConversation();
-			this.conversations = [];
+		await DatabaseService.updateConversation(this.activeConversation.id, {
+			mcpServerOverrides: newOverrides.length > 0 ? newOverrides : undefined
+		});
 
-			toast.success('All conversations deleted');
+		this.activeConversation = {
+			...this.activeConversation,
+			mcpServerOverrides: newOverrides.length > 0 ? newOverrides : undefined
+		};
 
-			await goto(`?new_chat=true#/`);
-		} catch (error) {
-			console.error('Failed to delete all conversations:', error);
-			toast.error('Failed to delete conversations');
+		const convIndex = this.conversations.findIndex((c) => c.id === this.activeConversation!.id);
+		if (convIndex !== -1) {
+			this.conversations[convIndex].mcpServerOverrides =
+				newOverrides.length > 0 ? newOverrides : undefined;
+			this.conversations = [...this.conversations];
+		}
+	}
+
+	/**
+	 * Sets or removes a pending MCP server override (for new conversations).
+	 */
+	private setPendingMcpServerOverride(serverId: string, enabled: boolean | undefined): void {
+		if (enabled === undefined) {
+			this.pendingMcpServerOverrides = this.pendingMcpServerOverrides.filter(
+				(o) => o.serverId !== serverId
+			);
+		} else {
+			const existingIndex = this.pendingMcpServerOverrides.findIndex(
+				(o) => o.serverId === serverId
+			);
+			if (existingIndex >= 0) {
+				const newOverrides = [...this.pendingMcpServerOverrides];
+				newOverrides[existingIndex] = { serverId, enabled };
+				this.pendingMcpServerOverrides = newOverrides;
+			} else {
+				this.pendingMcpServerOverrides = [...this.pendingMcpServerOverrides, { serverId, enabled }];
+			}
 		}
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Import/Export
-	// ─────────────────────────────────────────────────────────────────────────────
+	/**
+	 * Toggles MCP server enabled state for the active conversation.
+	 * @param serverId - The server ID to toggle
+	 */
+	async toggleMcpServerForChat(serverId: string): Promise<void> {
+		const currentEnabled = this.isMcpServerEnabledForChat(serverId);
+		await this.setMcpServerOverride(serverId, !currentEnabled);
+	}
+
+	/**
+	 * Removes MCP server override for the active conversation.
+	 * @param serverId - The server ID to remove override for
+	 */
+	async removeMcpServerOverride(serverId: string): Promise<void> {
+		await this.setMcpServerOverride(serverId, undefined);
+	}
 
 	/**
-	 * Downloads a conversation as JSON file
+	 * Clears all pending MCP server overrides.
+	 */
+	clearPendingMcpServerOverrides(): void {
+		this.pendingMcpServerOverrides = [];
+	}
+
+	/**
+	 *
+	 *
+	 * Import & Export
+	 *
+	 *
+	 */
+
+	/**
+	 * Downloads a conversation as JSON file.
 	 * @param convId - The conversation ID to download
 	 */
 	async downloadConversation(convId: string): Promise<void> {
@@ -456,7 +651,7 @@ class ConversationsStore {
 		}
 
 		const allData = await Promise.all(
-			allConversations.map(async (conv: DatabaseConversation) => {
+			allConversations.map(async (conv) => {
 				const messages = await DatabaseService.getConversationMessages(conv.id);
 				return { conv, messages };
 			})
@@ -536,15 +731,6 @@ class ConversationsStore {
 		});
 	}
 
-	/**
-	 * Gets all messages for a specific conversation
-	 * @param convId - The conversation ID
-	 * @returns Array of messages
-	 */
-	async getConversationMessages(convId: string): Promise<DatabaseMessage[]> {
-		return await DatabaseService.getConversationMessages(convId);
-	}
-
 	/**
 	 * Imports conversations from provided data (without file picker)
 	 * @param data - Array of conversation data with messages
@@ -558,61 +744,8 @@ class ConversationsStore {
 		return result;
 	}
 
-	/**
-	 * Adds a message to the active messages array
-	 * Used by chatStore when creating new messages
-	 * @param message - The message to add
-	 */
-	addMessageToActive(message: DatabaseMessage): void {
-		this.activeMessages.push(message);
-	}
-
-	/**
-	 * Updates a message at a specific index in active messages
-	 * Creates a new object to trigger Svelte 5 reactivity
-	 * @param index - The index of the message to update
-	 * @param updates - Partial message data to update
-	 */
-	updateMessageAtIndex(index: number, updates: Partial<DatabaseMessage>): void {
-		if (index !== -1 && this.activeMessages[index]) {
-			// Create new object to trigger Svelte 5 reactivity
-			this.activeMessages[index] = { ...this.activeMessages[index], ...updates };
-		}
-	}
-
-	/**
-	 * Finds the index of a message in active messages
-	 * @param messageId - The message ID to find
-	 * @returns The index of the message, or -1 if not found
-	 */
-	findMessageIndex(messageId: string): number {
-		return this.activeMessages.findIndex((m) => m.id === messageId);
-	}
-
-	/**
-	 * Removes messages from active messages starting at an index
-	 * @param startIndex - The index to start removing from
-	 */
-	sliceActiveMessages(startIndex: number): void {
-		this.activeMessages = this.activeMessages.slice(0, startIndex);
-	}
-
-	/**
-	 * Removes a message from active messages by index
-	 * @param index - The index to remove
-	 * @returns The removed message or undefined
-	 */
-	removeMessageAtIndex(index: number): DatabaseMessage | undefined {
-		if (index !== -1) {
-			return this.activeMessages.splice(index, 1)[0];
-		}
-		return undefined;
-	}
-
 	/**
 	 * Triggers file download in browser
-	 * @param data - The data to download
-	 * @param filename - Optional filename for the download
 	 */
 	private triggerDownload(data: ExportedConversations, filename?: string): void {
 		const conversation =
@@ -641,26 +774,16 @@ class ConversationsStore {
 		document.body.removeChild(a);
 		URL.revokeObjectURL(url);
 	}
-
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Utilities
-	// ─────────────────────────────────────────────────────────────────────────────
-
-	/**
-	 * Sets the callback function for title update confirmations
-	 * @param callback - Function to call when confirmation is needed
-	 */
-	setTitleUpdateConfirmationCallback(
-		callback: (currentTitle: string, newTitle: string) => Promise<boolean>
-	): void {
-		this.titleUpdateConfirmationCallback = callback;
-	}
 }
 
 export const conversationsStore = new ConversationsStore();
 
+// Auto-initialize in browser
+if (browser) {
+	conversationsStore.init();
+}
+
 export const conversations = () => conversationsStore.conversations;
 export const activeConversation = () => conversationsStore.activeConversation;
 export const activeMessages = () => conversationsStore.activeMessages;
 export const isConversationsInitialized = () => conversationsStore.isInitialized;
-export const usedModalities = () => conversationsStore.usedModalities;
diff --git a/tools/server/webui/src/lib/stores/mcp-resources.svelte.ts b/tools/server/webui/src/lib/stores/mcp-resources.svelte.ts
new file mode 100644
index 00000000000..974feefbd5c
--- /dev/null
+++ b/tools/server/webui/src/lib/stores/mcp-resources.svelte.ts
@@ -0,0 +1,589 @@
+/**
+ * mcpResourceStore - Reactive State Store for MCP Resources
+ *
+ * Manages MCP protocol resources:
+ * - Resource discovery and listing per server
+ * - Resource content caching
+ * - Resource subscriptions
+ * - Resource attachments for chat context
+ *
+ * @see MCP Protocol Specification: https://modelcontextprotocol.io/specification/2025-06-18/server/resources
+ */
+
+import { SvelteMap } from 'svelte/reactivity';
+import { AttachmentType } from '$lib/enums';
+import { MCP_RESOURCE_CACHE_MAX_ENTRIES, MCP_RESOURCE_CACHE_TTL_MS } from '$lib/constants/cache';
+import { MCP_RESOURCE_ATTACHMENT_ID_PREFIX } from '$lib/constants/mcp-resource';
+import type {
+	MCPResource,
+	MCPResourceTemplate,
+	MCPResourceContent,
+	MCPResourceInfo,
+	MCPResourceTemplateInfo,
+	MCPCachedResource,
+	MCPResourceAttachment,
+	MCPResourceSubscription,
+	MCPServerResources
+} from '$lib/types';
+
+function generateAttachmentId(): string {
+	return `${MCP_RESOURCE_ATTACHMENT_ID_PREFIX}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+
+class MCPResourceStore {
+	private _serverResources = $state<SvelteMap<string, MCPServerResources>>(new SvelteMap());
+	private _cachedResources = $state<SvelteMap<string, MCPCachedResource>>(new SvelteMap());
+	private _subscriptions = $state<SvelteMap<string, MCPResourceSubscription>>(new SvelteMap());
+	private _attachments = $state<MCPResourceAttachment[]>([]);
+	private _isLoading = $state(false);
+
+	get serverResources(): Map<string, MCPServerResources> {
+		return this._serverResources;
+	}
+
+	get cachedResources(): Map<string, MCPCachedResource> {
+		return this._cachedResources;
+	}
+
+	get subscriptions(): Map<string, MCPResourceSubscription> {
+		return this._subscriptions;
+	}
+
+	get attachments(): MCPResourceAttachment[] {
+		return this._attachments;
+	}
+
+	get isLoading(): boolean {
+		return this._isLoading;
+	}
+
+	get totalResourceCount(): number {
+		let count = 0;
+		for (const serverRes of this._serverResources.values()) {
+			count += serverRes.resources.length;
+		}
+
+		return count;
+	}
+
+	get totalTemplateCount(): number {
+		let count = 0;
+		for (const serverRes of this._serverResources.values()) {
+			count += serverRes.templates.length;
+		}
+
+		return count;
+	}
+
+	get attachmentCount(): number {
+		return this._attachments.length;
+	}
+
+	get hasAttachments(): boolean {
+		return this._attachments.length > 0;
+	}
+
+	/**
+	 *
+	 *
+	 * Server Resources Management
+	 *
+	 *
+	 */
+
+	/**
+	 * Set resources for a server (called after listResources)
+	 */
+	setServerResources(
+		serverName: string,
+		resources: MCPResource[],
+		templates: MCPResourceTemplate[]
+	): void {
+		this._serverResources.set(serverName, {
+			serverName,
+			resources,
+			templates,
+			lastFetched: new Date(),
+			loading: false,
+			error: undefined
+		});
+		console.log(
+			`[MCPResources][${serverName}] Set ${resources.length} resources, ${templates.length} templates`
+		);
+	}
+
+	/**
+	 * Set loading state for a server's resources
+	 */
+	setServerLoading(serverName: string, loading: boolean): void {
+		const existing = this._serverResources.get(serverName);
+		if (existing) {
+			this._serverResources.set(serverName, { ...existing, loading });
+		} else {
+			this._serverResources.set(serverName, {
+				serverName,
+				resources: [],
+				templates: [],
+				loading,
+				error: undefined
+			});
+		}
+	}
+
+	/**
+	 * Set error state for a server's resources
+	 */
+	setServerError(serverName: string, error: string): void {
+		const existing = this._serverResources.get(serverName);
+
+		if (existing) {
+			this._serverResources.set(serverName, { ...existing, loading: false, error });
+		} else {
+			this._serverResources.set(serverName, {
+				serverName,
+				resources: [],
+				templates: [],
+				loading: false,
+				error
+			});
+		}
+	}
+
+	/**
+	 * Get resources for a specific server
+	 */
+	getServerResources(serverName: string): MCPServerResources | undefined {
+		return this._serverResources.get(serverName);
+	}
+
+	/**
+	 * Get all resources as MCPResourceInfo array (flattened with server names)
+	 */
+	getAllResourceInfos(): MCPResourceInfo[] {
+		const result: MCPResourceInfo[] = [];
+
+		for (const [serverName, serverRes] of this._serverResources) {
+			for (const resource of serverRes.resources) {
+				result.push({
+					uri: resource.uri,
+					name: resource.name,
+					title: resource.title,
+					description: resource.description,
+					mimeType: resource.mimeType,
+					serverName,
+					annotations: resource.annotations,
+					icons: resource.icons
+				});
+			}
+		}
+
+		return result;
+	}
+
+	/**
+	 * Get all templates as MCPResourceTemplateInfo array (flattened with server names)
+	 */
+	getAllTemplateInfos(): MCPResourceTemplateInfo[] {
+		const result: MCPResourceTemplateInfo[] = [];
+
+		for (const [serverName, serverRes] of this._serverResources) {
+			for (const template of serverRes.templates) {
+				result.push({
+					uriTemplate: template.uriTemplate,
+					name: template.name,
+					title: template.title,
+					description: template.description,
+					mimeType: template.mimeType,
+					serverName,
+					annotations: template.annotations,
+					icons: template.icons
+				});
+			}
+		}
+
+		return result;
+	}
+
+	/**
+	 * Clear resources for a server (e.g., when disconnected)
+	 */
+	clearServerResources(serverName: string): void {
+		this._serverResources.delete(serverName);
+
+		// Also clear cached content for this server's resources
+		for (const [uri, cached] of this._cachedResources) {
+			if (cached.resource.serverName === serverName) {
+				this._cachedResources.delete(uri);
+			}
+		}
+
+		// Clear subscriptions for this server
+		for (const [uri, sub] of this._subscriptions) {
+			if (sub.serverName === serverName) {
+				this._subscriptions.delete(uri);
+			}
+		}
+
+		console.log(`[MCPResources][${serverName}] Cleared all resources`);
+	}
+
+	/**
+	 *
+	 *
+	 * Resource Content Caching
+	 *
+	 *
+	 */
+
+	/**
+	 * Cache resource content after reading
+	 */
+	cacheResourceContent(resource: MCPResourceInfo, content: MCPResourceContent[]): void {
+		// Enforce cache size limit
+		if (this._cachedResources.size >= MCP_RESOURCE_CACHE_MAX_ENTRIES) {
+			// Remove oldest entry
+			const oldestKey = this._cachedResources.keys().next().value;
+
+			if (oldestKey) {
+				this._cachedResources.delete(oldestKey);
+			}
+		}
+
+		this._cachedResources.set(resource.uri, {
+			resource,
+			content,
+			fetchedAt: new Date(),
+			subscribed: this._subscriptions.has(resource.uri)
+		});
+		console.log(`[MCPResources] Cached content for: ${resource.uri}`);
+	}
+
+	/**
+	 * Get cached content for a resource
+	 */
+	getCachedContent(uri: string): MCPCachedResource | undefined {
+		const cached = this._cachedResources.get(uri);
+		if (!cached) return undefined;
+
+		// Check if cache is still valid
+		const age = Date.now() - cached.fetchedAt.getTime();
+
+		if (age > MCP_RESOURCE_CACHE_TTL_MS && !cached.subscribed) {
+			// Cache expired and not subscribed, remove it
+			this._cachedResources.delete(uri);
+
+			return undefined;
+		}
+
+		return cached;
+	}
+
+	/**
+	 * Invalidate cached content for a resource (e.g., on update notification)
+	 */
+	invalidateCache(uri: string): void {
+		this._cachedResources.delete(uri);
+		console.log(`[MCPResources] Invalidated cache for: ${uri}`);
+	}
+
+	/**
+	 * Clear all cached content
+	 */
+	clearCache(): void {
+		this._cachedResources.clear();
+		console.log(`[MCPResources] Cleared all cached content`);
+	}
+
+	/**
+	 *
+	 *
+	 * Subscriptions
+	 *
+	 *
+	 */
+
+	/**
+	 * Register a subscription for a resource
+	 */
+	addSubscription(uri: string, serverName: string): void {
+		this._subscriptions.set(uri, {
+			uri,
+			serverName,
+			subscribedAt: new Date()
+		});
+
+		// Update cached resource if exists
+		const cached = this._cachedResources.get(uri);
+		if (cached) {
+			this._cachedResources.set(uri, { ...cached, subscribed: true });
+		}
+
+		console.log(`[MCPResources] Added subscription: ${uri}`);
+	}
+
+	/**
+	 * Remove a subscription for a resource
+	 */
+	removeSubscription(uri: string): void {
+		this._subscriptions.delete(uri);
+
+		// Update cached resource if exists
+		const cached = this._cachedResources.get(uri);
+		if (cached) {
+			this._cachedResources.set(uri, { ...cached, subscribed: false });
+		}
+
+		console.log(`[MCPResources] Removed subscription: ${uri}`);
+	}
+
+	/**
+	 * Check if a resource is subscribed
+	 */
+	isSubscribed(uri: string): boolean {
+		return this._subscriptions.has(uri);
+	}
+
+	/**
+	 * Handle resource update notification
+	 */
+	handleResourceUpdate(uri: string): void {
+		// Invalidate cache so next read gets fresh content
+		this.invalidateCache(uri);
+
+		// Update subscription last update time
+		const sub = this._subscriptions.get(uri);
+		if (sub) {
+			this._subscriptions.set(uri, { ...sub, lastUpdate: new Date() });
+		}
+
+		console.log(`[MCPResources] Resource updated: ${uri}`);
+	}
+
+	/**
+	 * Handle resources list changed notification
+	 */
+	handleResourcesListChanged(serverName: string): void {
+		// Mark server resources as needing refresh
+		const existing = this._serverResources.get(serverName);
+		if (existing) {
+			this._serverResources.set(serverName, {
+				...existing,
+				lastFetched: undefined // Mark as stale
+			});
+		}
+		console.log(`[MCPResources][${serverName}] Resources list changed, needs refresh`);
+	}
+
+	/**
+	 *
+	 *
+	 * Attachments (for chat context)
+	 *
+	 *
+	 */
+
+	/**
+	 * Add a resource attachment to the current chat context
+	 */
+	addAttachment(resource: MCPResourceInfo): MCPResourceAttachment {
+		const attachment: MCPResourceAttachment = {
+			id: generateAttachmentId(),
+			resource,
+			loading: true
+		};
+
+		this._attachments = [...this._attachments, attachment];
+		console.log(`[MCPResources] Added attachment: ${resource.uri}`);
+
+		return attachment;
+	}
+
+	/**
+	 * Update attachment with fetched content
+	 */
+	updateAttachmentContent(attachmentId: string, content: MCPResourceContent[]): void {
+		this._attachments = this._attachments.map((att) =>
+			att.id === attachmentId ? { ...att, content, loading: false, error: undefined } : att
+		);
+	}
+
+	/**
+	 * Update attachment with error
+	 */
+	updateAttachmentError(attachmentId: string, error: string): void {
+		this._attachments = this._attachments.map((att) =>
+			att.id === attachmentId ? { ...att, loading: false, error } : att
+		);
+	}
+
+	/**
+	 * Remove an attachment
+	 */
+	removeAttachment(attachmentId: string): void {
+		this._attachments = this._attachments.filter((att) => att.id !== attachmentId);
+		console.log(`[MCPResources] Removed attachment: ${attachmentId}`);
+	}
+
+	/**
+	 * Clear all attachments
+	 */
+	clearAttachments(): void {
+		this._attachments = [];
+		console.log(`[MCPResources] Cleared all attachments`);
+	}
+
+	/**
+	 * Get attachment by ID
+	 */
+	getAttachment(attachmentId: string): MCPResourceAttachment | undefined {
+		return this._attachments.find((att) => att.id === attachmentId);
+	}
+
+	/**
+	 * Check if a resource is already attached
+	 */
+	isAttached(uri: string): boolean {
+		return this._attachments.some((att) => att.resource.uri === uri);
+	}
+
+	/**
+	 *
+	 *
+	 * Utility Methods
+	 *
+	 *
+	 */
+
+	/**
+	 * Set global loading state
+	 */
+	setLoading(loading: boolean): void {
+		this._isLoading = loading;
+	}
+
+	/**
+	 * Find resource info by URI across all servers
+	 */
+	findResourceByUri(uri: string): MCPResourceInfo | undefined {
+		for (const [serverName, serverRes] of this._serverResources) {
+			const resource = serverRes.resources.find((r) => r.uri === uri);
+			if (resource) {
+				return {
+					uri: resource.uri,
+					name: resource.name,
+					title: resource.title,
+					description: resource.description,
+					mimeType: resource.mimeType,
+					serverName,
+					annotations: resource.annotations,
+					icons: resource.icons
+				};
+			}
+		}
+
+		return undefined;
+	}
+
+	/**
+	 * Find server name for a resource URI
+	 */
+	findServerForUri(uri: string): string | undefined {
+		for (const [serverName, serverRes] of this._serverResources) {
+			if (serverRes.resources.some((r) => r.uri === uri)) {
+				return serverName;
+			}
+		}
+
+		return undefined;
+	}
+
+	/**
+	 * Clear all state (e.g., on full reset)
+	 */
+	clear(): void {
+		this._serverResources.clear();
+		this._cachedResources.clear();
+		this._subscriptions.clear();
+		this._attachments = [];
+		this._isLoading = false;
+		console.log(`[MCPResources] Cleared all state`);
+	}
+
+	/**
+	 * Get resource content as text for chat context
+	 * Formats content for inclusion in LLM prompts
+	 */
+	formatAttachmentsForContext(): string {
+		if (this._attachments.length === 0) return '';
+
+		const parts: string[] = [];
+
+		for (const attachment of this._attachments) {
+			if (attachment.error) continue;
+			if (!attachment.content || attachment.content.length === 0) continue;
+
+			const resourceName = attachment.resource.title || attachment.resource.name;
+			const serverName = attachment.resource.serverName;
+
+			for (const content of attachment.content) {
+				if ('text' in content && content.text) {
+					parts.push(`\n\n--- Resource: ${resourceName} (from ${serverName}) ---\n${content.text}`);
+				} else if ('blob' in content && content.blob) {
+					// For binary content, just note it exists
+					parts.push(
+						`\n\n--- Resource: ${resourceName} (from ${serverName}) ---\n[Binary content: ${content.mimeType || 'unknown type'}]`
+					);
+				}
+			}
+		}
+
+		return parts.join('');
+	}
+
+	/**
+	 * Convert current resource attachments to DatabaseMessageExtra[] for persisting with a message.
+	 * Each attachment becomes a DatabaseMessageExtraMcpResource stored on the user message.
+	 */
+	toMessageExtras(): import('$lib/types').DatabaseMessageExtraMcpResource[] {
+		const extras: import('$lib/types').DatabaseMessageExtraMcpResource[] = [];
+
+		for (const attachment of this._attachments) {
+			if (attachment.error) continue;
+			if (!attachment.content || attachment.content.length === 0) continue;
+
+			const resourceName = attachment.resource.title || attachment.resource.name;
+			const contentParts: string[] = [];
+
+			for (const content of attachment.content) {
+				if ('text' in content && content.text) {
+					contentParts.push(content.text);
+				} else if ('blob' in content && content.blob) {
+					contentParts.push(`[Binary content: ${content.mimeType || 'unknown type'}]`);
+				}
+			}
+
+			if (contentParts.length > 0) {
+				extras.push({
+					type: AttachmentType.MCP_RESOURCE,
+					name: resourceName,
+					uri: attachment.resource.uri,
+					serverName: attachment.resource.serverName,
+					content: contentParts.join('\n'),
+					mimeType: attachment.resource.mimeType
+				});
+			}
+		}
+
+		return extras;
+	}
+}
+
+export const mcpResourceStore = new MCPResourceStore();
+
+// Export convenience functions
+export const mcpResources = () => mcpResourceStore.serverResources;
+export const mcpResourceAttachments = () => mcpResourceStore.attachments;
+export const mcpResourceAttachmentCount = () => mcpResourceStore.attachmentCount;
+export const mcpHasResourceAttachments = () => mcpResourceStore.hasAttachments;
+export const mcpTotalResourceCount = () => mcpResourceStore.totalResourceCount;
+export const mcpResourcesLoading = () => mcpResourceStore.isLoading;
diff --git a/tools/server/webui/src/lib/stores/mcp.svelte.ts b/tools/server/webui/src/lib/stores/mcp.svelte.ts
new file mode 100644
index 00000000000..a81f2ee675a
--- /dev/null
+++ b/tools/server/webui/src/lib/stores/mcp.svelte.ts
@@ -0,0 +1,1646 @@
+/**
+ * mcpStore - Reactive State Store for MCP Operations
+ *
+ * Implements the "Host" role in MCP architecture, coordinating multiple server
+ * connections and providing a unified interface for tool operations.
+ *
+ * **Architecture & Relationships:**
+ * - **MCPService**: Stateless protocol layer (transport, connect, callTool)
+ * - **mcpStore** (this): Reactive state + business logic
+ *
+ * **Key Responsibilities:**
+ * - Lifecycle management (initialize, shutdown)
+ * - Multi-server coordination
+ * - Tool name conflict detection and resolution
+ * - OpenAI-compatible tool definition generation
+ * - Automatic tool-to-server routing
+ * - Health checks
+ *
+ * @see MCPService in services/mcp.service.ts for protocol operations
+ */
+
+import { browser } from '$app/environment';
+import { MCPService } from '$lib/services/mcp.service';
+import { config, settingsStore } from '$lib/stores/settings.svelte';
+import { mcpResourceStore } from '$lib/stores/mcp-resources.svelte';
+import { parseMcpServerSettings, detectMcpTransportFromUrl, getFaviconUrl } from '$lib/utils';
+import { MCPConnectionPhase, MCPLogLevel, HealthCheckStatus, MCPRefType } from '$lib/enums';
+import {
+	DEFAULT_MCP_CONFIG,
+	MCP_SERVER_ID_PREFIX,
+	MCP_RECONNECT_INITIAL_DELAY,
+	MCP_RECONNECT_BACKOFF_MULTIPLIER,
+	MCP_RECONNECT_MAX_DELAY
+} from '$lib/constants/mcp';
+import type {
+	MCPToolCall,
+	OpenAIToolDefinition,
+	ServerStatus,
+	ToolExecutionResult,
+	MCPClientConfig,
+	MCPConnection,
+	HealthCheckParams,
+	ServerCapabilities,
+	ClientCapabilities,
+	MCPCapabilitiesInfo,
+	MCPConnectionLog,
+	MCPPromptInfo,
+	GetPromptResult,
+	Tool,
+	HealthCheckState,
+	MCPServerSettingsEntry,
+	MCPServerConfig
+} from '$lib/types';
+import type { ListChangedHandlers } from '@modelcontextprotocol/sdk/types.js';
+import type { McpServerOverride } from '$lib/types/database';
+import type { SettingsConfigType } from '$lib/types/settings';
+
+function generateMcpServerId(id: unknown, index: number): string {
+	if (typeof id === 'string' && id.trim()) {
+		return id.trim();
+	}
+
+	return `${MCP_SERVER_ID_PREFIX}-${index + 1}`;
+}
+
+function parseServerSettings(rawServers: unknown): MCPServerSettingsEntry[] {
+	if (!rawServers) {
+		return [];
+	}
+
+	let parsed: unknown;
+	if (typeof rawServers === 'string') {
+		const trimmed = rawServers.trim();
+		if (!trimmed) {
+			return [];
+		}
+
+		try {
+			parsed = JSON.parse(trimmed);
+		} catch (error) {
+			console.warn('[MCP] Failed to parse mcpServers JSON:', error);
+
+			return [];
+		}
+	} else {
+		parsed = rawServers;
+	}
+	if (!Array.isArray(parsed)) {
+		return [];
+	}
+
+	return parsed.map((entry, index) => {
+		const url = typeof entry?.url === 'string' ? entry.url.trim() : '';
+		const headers = typeof entry?.headers === 'string' ? entry.headers.trim() : undefined;
+
+		return {
+			id: generateMcpServerId((entry as { id?: unknown })?.id, index),
+			enabled: Boolean((entry as { enabled?: unknown })?.enabled),
+			url,
+			name: (entry as { name?: string })?.name,
+			requestTimeoutSeconds: DEFAULT_MCP_CONFIG.requestTimeoutSeconds,
+			headers: headers || undefined,
+			useProxy: Boolean((entry as { useProxy?: unknown })?.useProxy)
+		} satisfies MCPServerSettingsEntry;
+	});
+}
+
+function buildServerConfig(
+	entry: MCPServerSettingsEntry,
+	connectionTimeoutMs = DEFAULT_MCP_CONFIG.connectionTimeoutMs
+): MCPServerConfig | undefined {
+	if (!entry?.url) {
+		return undefined;
+	}
+
+	let headers: Record<string, string> | undefined;
+	if (entry.headers) {
+		try {
+			const parsed = JSON.parse(entry.headers);
+			if (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed))
+				headers = parsed as Record<string, string>;
+		} catch {
+			console.warn('[MCP] Failed to parse custom headers JSON:', entry.headers);
+		}
+	}
+
+	return {
+		url: entry.url,
+		transport: detectMcpTransportFromUrl(entry.url),
+		handshakeTimeoutMs: connectionTimeoutMs,
+		requestTimeoutMs: Math.round(entry.requestTimeoutSeconds * 1000),
+		headers,
+		useProxy: entry.useProxy
+	};
+}
+
+function checkServerEnabled(
+	server: MCPServerSettingsEntry,
+	perChatOverrides?: McpServerOverride[]
+): boolean {
+	if (!server.enabled) {
+		return false;
+	}
+
+	if (perChatOverrides) {
+		const override = perChatOverrides.find((o) => o.serverId === server.id);
+
+		return override?.enabled ?? false;
+	}
+
+	return false;
+}
+
+function buildMcpClientConfigInternal(
+	cfg: SettingsConfigType,
+	perChatOverrides?: McpServerOverride[]
+): MCPClientConfig | undefined {
+	const rawServers = parseServerSettings(cfg.mcpServers);
+	if (!rawServers.length) {
+		return undefined;
+	}
+
+	const servers: Record<string, MCPServerConfig> = {};
+
+	for (const [index, entry] of rawServers.entries()) {
+		if (!checkServerEnabled(entry, perChatOverrides)) continue;
+		const normalized = buildServerConfig(entry);
+		if (normalized) servers[generateMcpServerId(entry.id, index)] = normalized;
+	}
+
+	if (Object.keys(servers).length === 0) {
+		return undefined;
+	}
+
+	return {
+		protocolVersion: DEFAULT_MCP_CONFIG.protocolVersion,
+		capabilities: DEFAULT_MCP_CONFIG.capabilities,
+		clientInfo: DEFAULT_MCP_CONFIG.clientInfo,
+		requestTimeoutMs: Math.round(DEFAULT_MCP_CONFIG.requestTimeoutSeconds * 1000),
+		servers
+	};
+}
+
+function buildCapabilitiesInfo(
+	serverCaps?: ServerCapabilities,
+	clientCaps?: ClientCapabilities
+): MCPCapabilitiesInfo {
+	return {
+		server: {
+			tools: serverCaps?.tools ? { listChanged: serverCaps.tools.listChanged } : undefined,
+			prompts: serverCaps?.prompts ? { listChanged: serverCaps.prompts.listChanged } : undefined,
+			resources: serverCaps?.resources
+				? {
+						subscribe: serverCaps.resources.subscribe,
+						listChanged: serverCaps.resources.listChanged
+					}
+				: undefined,
+			logging: !!serverCaps?.logging,
+			completions: !!serverCaps?.completions,
+			tasks: !!serverCaps?.tasks
+		},
+		client: {
+			roots: clientCaps?.roots ? { listChanged: clientCaps.roots.listChanged } : undefined,
+			sampling: !!clientCaps?.sampling,
+			elicitation: clientCaps?.elicitation
+				? { form: !!clientCaps.elicitation.form, url: !!clientCaps.elicitation.url }
+				: undefined,
+			tasks: !!clientCaps?.tasks
+		}
+	};
+}
+
+export function buildMcpClientConfig(
+	cfg: SettingsConfigType,
+	perChatOverrides?: McpServerOverride[]
+): MCPClientConfig | undefined {
+	return buildMcpClientConfigInternal(cfg, perChatOverrides);
+}
+
+class MCPStore {
+	private _isInitializing = $state(false);
+	private _error = $state<string | null>(null);
+	private _toolCount = $state(0);
+	private _connectedServers = $state<string[]>([]);
+	private _healthChecks = $state<Record<string, HealthCheckState>>({});
+
+	private connections = new Map<string, MCPConnection>();
+	private toolsIndex = new Map<string, string>();
+	private serverConfigs = new Map<string, MCPServerConfig>(); // Store configs for reconnection
+	private reconnectingServers = new Set<string>(); // Guard against concurrent reconnections
+	private configSignature: string | null = null;
+	private initPromise: Promise<boolean> | null = null;
+	private activeFlowCount = 0;
+
+	get isInitializing(): boolean {
+		return this._isInitializing;
+	}
+
+	get isInitialized(): boolean {
+		return this.connections.size > 0;
+	}
+
+	get error(): string | null {
+		return this._error;
+	}
+
+	get toolCount(): number {
+		return this._toolCount;
+	}
+
+	get connectedServerCount(): number {
+		return this._connectedServers.length;
+	}
+
+	get connectedServerNames(): string[] {
+		return this._connectedServers;
+	}
+
+	get isEnabled(): boolean {
+		const mcpConfig = buildMcpClientConfigInternal(config());
+		return (
+			mcpConfig !== null && mcpConfig !== undefined && Object.keys(mcpConfig.servers).length > 0
+		);
+	}
+
+	get availableTools(): string[] {
+		return Array.from(this.toolsIndex.keys());
+	}
+
+	private updateState(state: {
+		isInitializing?: boolean;
+		error?: string | null;
+		toolCount?: number;
+		connectedServers?: string[];
+	}): void {
+		if (state.isInitializing !== undefined) {
+			this._isInitializing = state.isInitializing;
+		}
+
+		if (state.error !== undefined) {
+			this._error = state.error;
+		}
+
+		if (state.toolCount !== undefined) {
+			this._toolCount = state.toolCount;
+		}
+
+		if (state.connectedServers !== undefined) {
+			this._connectedServers = state.connectedServers;
+		}
+	}
+
+	updateHealthCheck(serverId: string, state: HealthCheckState): void {
+		this._healthChecks = { ...this._healthChecks, [serverId]: state };
+	}
+
+	getHealthCheckState(serverId: string): HealthCheckState {
+		return this._healthChecks[serverId] ?? { status: 'idle' };
+	}
+
+	hasHealthCheck(serverId: string): boolean {
+		return serverId in this._healthChecks && this._healthChecks[serverId].status !== 'idle';
+	}
+
+	clearHealthCheck(serverId: string): void {
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		const { [serverId]: _removed, ...rest } = this._healthChecks;
+		this._healthChecks = rest;
+	}
+
+	clearAllHealthChecks(): void {
+		this._healthChecks = {};
+	}
+
+	clearError(): void {
+		this._error = null;
+	}
+
+	getServers(): MCPServerSettingsEntry[] {
+		return parseMcpServerSettings(config().mcpServers);
+	}
+
+	/**
+	 * Get all active MCP connections.
+	 * @returns Map of server names to connections
+	 */
+	getConnections(): Map<string, MCPConnection> {
+		return this.connections;
+	}
+
+	getServerLabel(server: MCPServerSettingsEntry): string {
+		const healthState = this.getHealthCheckState(server.id);
+		if (healthState?.status === HealthCheckStatus.SUCCESS)
+			return (
+				healthState.serverInfo?.title || healthState.serverInfo?.name || server.name || server.url
+			);
+		return server.url;
+	}
+
+	getServerById(serverId: string): MCPServerSettingsEntry | undefined {
+		return this.getServers().find((s) => s.id === serverId);
+	}
+
+	/**
+	 * Get display name for an MCP server by its ID.
+	 * Falls back to the server ID if server is not found.
+	 */
+	getServerDisplayName(serverId: string): string {
+		const server = this.getServerById(serverId);
+		return server ? this.getServerLabel(server) : serverId;
+	}
+
+	/**
+	 * Get favicon URL for an MCP server by its ID.
+	 * Uses Google's favicon service for consistent display.
+	 * Returns null if server is not found.
+	 */
+	getServerFavicon(serverId: string): string | null {
+		const server = this.getServerById(serverId);
+		if (!server) {
+			return null;
+		}
+
+		return getFaviconUrl(server.url);
+	}
+
+	isAnyServerLoading(): boolean {
+		return this.getServers().some((s) => {
+			const state = this.getHealthCheckState(s.id);
+
+			return (
+				state.status === HealthCheckStatus.IDLE || state.status === HealthCheckStatus.CONNECTING
+			);
+		});
+	}
+
+	getServersSorted(): MCPServerSettingsEntry[] {
+		const servers = this.getServers();
+		if (this.isAnyServerLoading()) {
+			return servers;
+		}
+
+		return [...servers].sort((a, b) =>
+			this.getServerLabel(a).localeCompare(this.getServerLabel(b))
+		);
+	}
+
+	addServer(
+		serverData: Omit<MCPServerSettingsEntry, 'id' | 'requestTimeoutSeconds'> & { id?: string }
+	): void {
+		const servers = this.getServers();
+		const newServer: MCPServerSettingsEntry = {
+			id: serverData.id || (crypto.randomUUID ? crypto.randomUUID() : `server-${Date.now()}`),
+			enabled: serverData.enabled,
+			url: serverData.url.trim(),
+			name: serverData.name,
+			headers: serverData.headers?.trim() || undefined,
+			requestTimeoutSeconds: DEFAULT_MCP_CONFIG.requestTimeoutSeconds,
+			useProxy: serverData.useProxy
+		};
+		settingsStore.updateConfig('mcpServers', JSON.stringify([...servers, newServer]));
+	}
+
+	updateServer(id: string, updates: Partial<MCPServerSettingsEntry>): void {
+		const servers = this.getServers();
+		settingsStore.updateConfig(
+			'mcpServers',
+			JSON.stringify(
+				servers.map((server) => (server.id === id ? { ...server, ...updates } : server))
+			)
+		);
+	}
+
+	removeServer(id: string): void {
+		const servers = this.getServers();
+		settingsStore.updateConfig('mcpServers', JSON.stringify(servers.filter((s) => s.id !== id)));
+		this.clearHealthCheck(id);
+	}
+
+	hasAvailableServers(): boolean {
+		return parseMcpServerSettings(config().mcpServers).some((s) => s.enabled && s.url.trim());
+	}
+	hasEnabledServers(perChatOverrides?: McpServerOverride[]): boolean {
+		return Boolean(buildMcpClientConfigInternal(config(), perChatOverrides));
+	}
+
+	getEnabledServersForConversation(
+		perChatOverrides?: McpServerOverride[]
+	): MCPServerSettingsEntry[] {
+		if (!perChatOverrides?.length) {
+			return [];
+		}
+
+		return this.getServers().filter((server) => {
+			if (!server.enabled) {
+				return false;
+			}
+
+			const override = perChatOverrides.find((o) => o.serverId === server.id);
+
+			return override?.enabled ?? false;
+		});
+	}
+
+	async ensureInitialized(perChatOverrides?: McpServerOverride[]): Promise<boolean> {
+		if (!browser) {
+			return false;
+		}
+
+		const mcpConfig = buildMcpClientConfigInternal(config(), perChatOverrides);
+		const signature = mcpConfig ? JSON.stringify(mcpConfig) : null;
+		if (!signature) {
+			await this.shutdown();
+
+			return false;
+		}
+		if (this.isInitialized && this.configSignature === signature) {
+			return true;
+		}
+
+		if (this.initPromise && this.configSignature === signature) {
+			return this.initPromise;
+		}
+
+		if (this.connections.size > 0 || this.initPromise) await this.shutdown();
+		return this.initialize(signature, mcpConfig!);
+	}
+
+	private async initialize(signature: string, mcpConfig: MCPClientConfig): Promise<boolean> {
+		this.updateState({ isInitializing: true, error: null });
+		this.configSignature = signature;
+
+		const serverEntries = Object.entries(mcpConfig.servers);
+
+		if (serverEntries.length === 0) {
+			this.updateState({ isInitializing: false, toolCount: 0, connectedServers: [] });
+
+			return false;
+		}
+		this.initPromise = this.doInitialize(signature, mcpConfig, serverEntries);
+
+		return this.initPromise;
+	}
+
+	private async doInitialize(
+		signature: string,
+		mcpConfig: MCPClientConfig,
+		serverEntries: [string, MCPClientConfig['servers'][string]][]
+	): Promise<boolean> {
+		const clientInfo = mcpConfig.clientInfo ?? DEFAULT_MCP_CONFIG.clientInfo;
+		const capabilities = mcpConfig.capabilities ?? DEFAULT_MCP_CONFIG.capabilities;
+		const results = await Promise.allSettled(
+			serverEntries.map(async ([name, serverConfig]) => {
+				// Store config for reconnection
+				this.serverConfigs.set(name, serverConfig);
+
+				const listChangedHandlers = this.createListChangedHandlers(name);
+				const connection = await MCPService.connect(
+					name,
+					serverConfig,
+					clientInfo,
+					capabilities,
+					(phase) => {
+						// Handle WebSocket disconnection
+						if (phase === MCPConnectionPhase.DISCONNECTED) {
+							console.log(`[MCPStore][${name}] Connection lost, starting auto-reconnect`);
+							this.autoReconnect(name);
+						}
+					},
+					listChangedHandlers
+				);
+
+				return { name, connection };
+			})
+		);
+		if (this.configSignature !== signature) {
+			for (const result of results) {
+				if (result.status === 'fulfilled')
+					await MCPService.disconnect(result.value.connection).catch(console.warn);
+			}
+
+			return false;
+		}
+		for (const result of results) {
+			if (result.status === 'fulfilled') {
+				const { name, connection } = result.value;
+
+				this.connections.set(name, connection);
+
+				for (const tool of connection.tools) {
+					if (this.toolsIndex.has(tool.name))
+						console.warn(
+							`[MCPStore] Tool name conflict: "${tool.name}" exists in "${this.toolsIndex.get(tool.name)}" and "${name}". Using tool from "${name}".`
+						);
+					this.toolsIndex.set(tool.name, name);
+				}
+			} else {
+				console.error(`[MCPStore] Failed to connect:`, result.reason);
+			}
+		}
+
+		const successCount = this.connections.size;
+		if (successCount === 0 && serverEntries.length > 0) {
+			this.updateState({
+				isInitializing: false,
+				error: 'All MCP server connections failed',
+				toolCount: 0,
+				connectedServers: []
+			});
+			this.initPromise = null;
+
+			return false;
+		}
+
+		this.updateState({
+			isInitializing: false,
+			error: null,
+			toolCount: this.toolsIndex.size,
+			connectedServers: Array.from(this.connections.keys())
+		});
+		this.initPromise = null;
+
+		return true;
+	}
+
+	private createListChangedHandlers(serverName: string): ListChangedHandlers {
+		return {
+			tools: {
+				onChanged: (error: Error | null, tools: Tool[] | null) => {
+					if (error) {
+						console.warn(`[MCPStore][${serverName}] Tools list changed error:`, error);
+						return;
+					}
+					this.handleToolsListChanged(serverName, tools ?? []);
+				}
+			},
+			prompts: {
+				onChanged: (error: Error | null) => {
+					if (error) {
+						console.warn(`[MCPStore][${serverName}] Prompts list changed error:`, error);
+						return;
+					}
+				}
+			}
+		};
+	}
+
+	private handleToolsListChanged(serverName: string, tools: Tool[]): void {
+		const connection = this.connections.get(serverName);
+		if (!connection) {
+			return;
+		}
+
+		for (const [toolName, ownerServer] of this.toolsIndex.entries()) {
+			if (ownerServer === serverName) this.toolsIndex.delete(toolName);
+		}
+
+		connection.tools = tools;
+
+		for (const tool of tools) {
+			if (this.toolsIndex.has(tool.name))
+				console.warn(
+					`[MCPStore] Tool name conflict after list change: "${tool.name}" exists in "${this.toolsIndex.get(tool.name)}" and "${serverName}". Using tool from "${serverName}".`
+				);
+			this.toolsIndex.set(tool.name, serverName);
+		}
+		this.updateState({ toolCount: this.toolsIndex.size });
+	}
+
+	acquireConnection(): void {
+		this.activeFlowCount++;
+	}
+
+	/**
+	 * Release a connection reference.
+	 * By default, keeps connections alive for reuse (shutdownIfUnused=false).
+	 * MCP spec encourages long-lived sessions to avoid reconnection overhead.
+	 */
+	async releaseConnection(shutdownIfUnused = false): Promise<void> {
+		this.activeFlowCount = Math.max(0, this.activeFlowCount - 1);
+		if (shutdownIfUnused && this.activeFlowCount === 0) {
+			await this.shutdown();
+		}
+	}
+
+	getActiveFlowCount(): number {
+		return this.activeFlowCount;
+	}
+
+	async shutdown(): Promise<void> {
+		if (this.initPromise) {
+			await this.initPromise.catch(() => {});
+			this.initPromise = null;
+		}
+
+		if (this.connections.size === 0) {
+			return;
+		}
+
+		await Promise.all(
+			Array.from(this.connections.values()).map((conn) =>
+				MCPService.disconnect(conn).catch((error) =>
+					console.warn(`[MCPStore] Error disconnecting ${conn.serverName}:`, error)
+				)
+			)
+		);
+
+		this.connections.clear();
+		this.toolsIndex.clear();
+		this.serverConfigs.clear();
+		this.configSignature = null;
+		this.updateState({ isInitializing: false, error: null, toolCount: 0, connectedServers: [] });
+	}
+
+	/**
+	 * Auto-reconnect to a server with exponential backoff.
+	 * Continues indefinitely until successful.
+	 */
+	private async autoReconnect(serverName: string): Promise<void> {
+		// Guard against concurrent reconnections
+		if (this.reconnectingServers.has(serverName)) {
+			console.log(`[MCPStore][${serverName}] Reconnection already in progress, skipping`);
+
+			return;
+		}
+
+		const serverConfig = this.serverConfigs.get(serverName);
+		if (!serverConfig) {
+			console.error(`[MCPStore] No config found for ${serverName}, cannot reconnect`);
+
+			return;
+		}
+
+		this.reconnectingServers.add(serverName);
+		let backoff = MCP_RECONNECT_INITIAL_DELAY;
+
+		try {
+			while (true) {
+				await new Promise((resolve) => setTimeout(resolve, backoff));
+
+				console.log(`[MCPStore][${serverName}] Auto-reconnecting...`);
+
+				try {
+					const listChangedHandlers = this.createListChangedHandlers(serverName);
+					const connection = await MCPService.connect(
+						serverName,
+						serverConfig,
+						DEFAULT_MCP_CONFIG.clientInfo,
+						DEFAULT_MCP_CONFIG.capabilities,
+						(phase) => {
+							if (phase === MCPConnectionPhase.DISCONNECTED) {
+								console.log(`[MCPStore][${serverName}] Connection lost, restarting auto-reconnect`);
+								this.autoReconnect(serverName);
+							}
+						},
+						listChangedHandlers
+					);
+
+					// Replace old connection with new one
+					this.connections.set(serverName, connection);
+
+					// Rebuild tool index for this server
+					for (const tool of connection.tools) {
+						this.toolsIndex.set(tool.name, serverName);
+					}
+
+					console.log(`[MCPStore][${serverName}] Reconnected successfully`);
+					break;
+				} catch (error) {
+					console.warn(`[MCPStore][${serverName}] Reconnection failed:`, error);
+					backoff = Math.min(backoff * MCP_RECONNECT_BACKOFF_MULTIPLIER, MCP_RECONNECT_MAX_DELAY);
+				}
+			}
+		} finally {
+			this.reconnectingServers.delete(serverName);
+		}
+	}
+
+	getToolDefinitionsForLLM(): OpenAIToolDefinition[] {
+		const tools: OpenAIToolDefinition[] = [];
+
+		for (const connection of this.connections.values()) {
+			for (const tool of connection.tools) {
+				const rawSchema = (tool.inputSchema as Record<string, unknown>) ?? {
+					type: 'object',
+					properties: {},
+					required: []
+				};
+
+				tools.push({
+					type: 'function' as const,
+					function: {
+						name: tool.name,
+						description: tool.description,
+						parameters: this.normalizeSchemaProperties(rawSchema)
+					}
+				});
+			}
+		}
+
+		return tools;
+	}
+
+	private normalizeSchemaProperties(schema: Record<string, unknown>): Record<string, unknown> {
+		if (!schema || typeof schema !== 'object') {
+			return schema;
+		}
+
+		const normalized = { ...schema };
+		if (normalized.properties && typeof normalized.properties === 'object') {
+			const props = normalized.properties as Record<string, Record<string, unknown>>;
+			const normalizedProps: Record<string, Record<string, unknown>> = {};
+			for (const [key, prop] of Object.entries(props)) {
+				if (!prop || typeof prop !== 'object') {
+					normalizedProps[key] = prop;
+					continue;
+				}
+				const normalizedProp = { ...prop };
+				if (!normalizedProp.type && normalizedProp.default !== undefined) {
+					const defaultVal = normalizedProp.default;
+					if (typeof defaultVal === 'string') normalizedProp.type = 'string';
+					else if (typeof defaultVal === 'number')
+						normalizedProp.type = Number.isInteger(defaultVal) ? 'integer' : 'number';
+					else if (typeof defaultVal === 'boolean') normalizedProp.type = 'boolean';
+					else if (Array.isArray(defaultVal)) normalizedProp.type = 'array';
+					else if (typeof defaultVal === 'object' && defaultVal !== null)
+						normalizedProp.type = 'object';
+				}
+				if (normalizedProp.properties)
+					Object.assign(
+						normalizedProp,
+						this.normalizeSchemaProperties(normalizedProp as Record<string, unknown>)
+					);
+				if (normalizedProp.items && typeof normalizedProp.items === 'object')
+					normalizedProp.items = this.normalizeSchemaProperties(
+						normalizedProp.items as Record<string, unknown>
+					);
+				normalizedProps[key] = normalizedProp;
+			}
+			normalized.properties = normalizedProps;
+		}
+
+		return normalized;
+	}
+
+	getToolNames(): string[] {
+		return Array.from(this.toolsIndex.keys());
+	}
+
+	hasTool(toolName: string): boolean {
+		return this.toolsIndex.has(toolName);
+	}
+
+	getToolServer(toolName: string): string | undefined {
+		return this.toolsIndex.get(toolName);
+	}
+
+	hasPromptsSupport(): boolean {
+		for (const connection of this.connections.values()) {
+			if (connection.serverCapabilities?.prompts) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Check if any enabled server with successful health check supports prompts.
+	 * Uses health check state since servers may not have active connections until
+	 * the user actually sends a message or uses prompts.
+	 * @param perChatOverrides - Per-chat server overrides to filter by enabled servers.
+	 *                          If provided (even empty array), only checks enabled servers.
+	 *                          If undefined, checks all servers with successful health checks.
+	 */
+	hasPromptsCapability(perChatOverrides?: McpServerOverride[]): boolean {
+		// If perChatOverrides is provided (even empty array), filter by enabled servers
+		if (perChatOverrides !== undefined) {
+			const enabledServerIds = new Set(
+				perChatOverrides.filter((o) => o.enabled).map((o) => o.serverId)
+			);
+
+			// No enabled servers = no capability
+			if (enabledServerIds.size === 0) {
+				return false;
+			}
+
+			// Check health check states for enabled servers with prompts capability
+			for (const [serverId, state] of Object.entries(this._healthChecks)) {
+				if (!enabledServerIds.has(serverId)) continue;
+				if (
+					state.status === HealthCheckStatus.SUCCESS &&
+					state.capabilities?.server?.prompts !== undefined
+				) {
+					return true;
+				}
+			}
+
+			// Also check active connections as fallback
+			for (const [serverName, connection] of this.connections) {
+				if (!enabledServerIds.has(serverName)) continue;
+				if (connection.serverCapabilities?.prompts) {
+					return true;
+				}
+			}
+
+			return false;
+		}
+
+		// No overrides provided - check all servers (global mode)
+		for (const state of Object.values(this._healthChecks)) {
+			if (
+				state.status === HealthCheckStatus.SUCCESS &&
+				state.capabilities?.server?.prompts !== undefined
+			) {
+				return true;
+			}
+		}
+
+		for (const connection of this.connections.values()) {
+			if (connection.serverCapabilities?.prompts) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	async getAllPrompts(): Promise<MCPPromptInfo[]> {
+		const results: MCPPromptInfo[] = [];
+
+		for (const [serverName, connection] of this.connections) {
+			if (!connection.serverCapabilities?.prompts) continue;
+
+			const prompts = await MCPService.listPrompts(connection);
+
+			for (const prompt of prompts) {
+				results.push({
+					name: prompt.name,
+					description: prompt.description,
+					title: prompt.title,
+					serverName,
+					arguments: prompt.arguments?.map((arg) => ({
+						name: arg.name,
+						description: arg.description,
+						required: arg.required
+					}))
+				});
+			}
+		}
+
+		return results;
+	}
+
+	async getPrompt(
+		serverName: string,
+		promptName: string,
+		args?: Record<string, string>
+	): Promise<GetPromptResult> {
+		const connection = this.connections.get(serverName);
+		if (!connection) throw new Error(`Server "${serverName}" not found for prompt "${promptName}"`);
+
+		return MCPService.getPrompt(connection, promptName, args);
+	}
+
+	async executeTool(toolCall: MCPToolCall, signal?: AbortSignal): Promise<ToolExecutionResult> {
+		const toolName = toolCall.function.name;
+
+		const serverName = this.toolsIndex.get(toolName);
+		if (!serverName) throw new Error(`Unknown tool: ${toolName}`);
+
+		const connection = this.connections.get(serverName);
+		if (!connection) throw new Error(`Server "${serverName}" is not connected`);
+
+		const args = this.parseToolArguments(toolCall.function.arguments);
+
+		return MCPService.callTool(connection, { name: toolName, arguments: args }, signal);
+	}
+
+	async executeToolByName(
+		toolName: string,
+		args: Record<string, unknown>,
+		signal?: AbortSignal
+	): Promise<ToolExecutionResult> {
+		const serverName = this.toolsIndex.get(toolName);
+		if (!serverName) throw new Error(`Unknown tool: ${toolName}`);
+		const connection = this.connections.get(serverName);
+		if (!connection) throw new Error(`Server "${serverName}" is not connected`);
+
+		return MCPService.callTool(connection, { name: toolName, arguments: args }, signal);
+	}
+
+	private parseToolArguments(args: string | Record<string, unknown>): Record<string, unknown> {
+		if (typeof args === 'string') {
+			const trimmed = args.trim();
+			if (trimmed === '') {
+				return {};
+			}
+
+			try {
+				const parsed = JSON.parse(trimmed);
+				if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed))
+					throw new Error(
+						`Tool arguments must be an object, got ${Array.isArray(parsed) ? 'array' : typeof parsed}`
+					);
+
+				return parsed as Record<string, unknown>;
+			} catch (error) {
+				throw new Error(`Failed to parse tool arguments as JSON: ${(error as Error).message}`);
+			}
+		}
+
+		if (typeof args === 'object' && args !== null && !Array.isArray(args)) {
+			return args;
+		}
+
+		throw new Error(`Invalid tool arguments type: ${typeof args}`);
+	}
+
+	async getPromptCompletions(
+		serverName: string,
+		promptName: string,
+		argumentName: string,
+		argumentValue: string
+	): Promise<{ values: string[]; total?: number; hasMore?: boolean } | null> {
+		const connection = this.connections.get(serverName);
+		if (!connection) {
+			console.warn(`[MCPStore] Server "${serverName}" is not connected`);
+			return null;
+		}
+		if (!connection.serverCapabilities?.completions) {
+			return null;
+		}
+
+		return MCPService.complete(
+			connection,
+			{ type: MCPRefType.PROMPT, name: promptName },
+			{ name: argumentName, value: argumentValue }
+		);
+	}
+
+	private parseHeaders(headersJson?: string): Record<string, string> | undefined {
+		if (!headersJson?.trim()) {
+			return undefined;
+		}
+
+		try {
+			const parsed = JSON.parse(headersJson);
+			if (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed))
+				return parsed as Record<string, string>;
+		} catch {
+			console.warn('[MCPStore] Failed to parse custom headers JSON:', headersJson);
+		}
+
+		return undefined;
+	}
+
+	async runHealthChecksForServers(
+		servers: {
+			id: string;
+			enabled: boolean;
+			url: string;
+			requestTimeoutSeconds: number;
+			headers?: string;
+		}[],
+		skipIfChecked = true,
+		promoteToActive = false
+	): Promise<void> {
+		const serversToCheck = skipIfChecked
+			? servers.filter((s) => !this.hasHealthCheck(s.id) && s.url.trim())
+			: servers.filter((s) => s.url.trim());
+
+		if (serversToCheck.length === 0) {
+			return;
+		}
+
+		const BATCH_SIZE = 5;
+		for (let i = 0; i < serversToCheck.length; i += BATCH_SIZE) {
+			const batch = serversToCheck.slice(i, i + BATCH_SIZE);
+			await Promise.allSettled(batch.map((server) => this.runHealthCheck(server, promoteToActive)));
+		}
+	}
+
+	/**
+	 * Check if a server already has an active connection that can be reused.
+	 * Returns the existing connection if available.
+	 */
+	getExistingConnection(serverId: string): MCPConnection | undefined {
+		return this.connections.get(serverId);
+	}
+
+	/**
+	 * Run a health check for a server.
+	 * If the server already has an active connection, reuses it instead of creating a new one.
+	 * If promoteToActive is true and server is enabled, the connection will be kept
+	 * and promoted to an active connection instead of being disconnected.
+	 */
+	async runHealthCheck(server: HealthCheckParams, promoteToActive = false): Promise<void> {
+		// Check if we already have an active connection for this server
+		const existingConnection = this.connections.get(server.id);
+		if (existingConnection) {
+			// Reuse existing connection - just refresh tools list
+			try {
+				const tools = await MCPService.listTools(existingConnection);
+				const capabilities = buildCapabilitiesInfo(
+					existingConnection.serverCapabilities,
+					existingConnection.clientCapabilities
+				);
+				this.updateHealthCheck(server.id, {
+					status: HealthCheckStatus.SUCCESS,
+					tools: tools.map((tool) => ({
+						name: tool.name,
+						description: tool.description,
+						title: tool.title
+					})),
+					serverInfo: existingConnection.serverInfo,
+					capabilities,
+					transportType: existingConnection.transportType,
+					protocolVersion: existingConnection.protocolVersion,
+					instructions: existingConnection.instructions,
+					connectionTimeMs: existingConnection.connectionTimeMs,
+					logs: []
+				});
+				return;
+			} catch (error) {
+				console.warn(
+					`[MCPStore] Failed to reuse connection for ${server.id}, creating new one:`,
+					error
+				);
+				// Connection may be stale, remove it and create new one
+				this.connections.delete(server.id);
+			}
+		}
+
+		const trimmedUrl = server.url.trim();
+		const logs: MCPConnectionLog[] = [];
+		let currentPhase: MCPConnectionPhase = MCPConnectionPhase.IDLE;
+
+		if (!trimmedUrl) {
+			this.updateHealthCheck(server.id, {
+				status: HealthCheckStatus.ERROR,
+				message: 'Please enter a server URL first.',
+				logs: []
+			});
+			return;
+		}
+
+		this.updateHealthCheck(server.id, {
+			status: HealthCheckStatus.CONNECTING,
+			phase: MCPConnectionPhase.TRANSPORT_CREATING,
+			logs: []
+		});
+
+		const timeoutMs = Math.round(server.requestTimeoutSeconds * 1000);
+		const headers = this.parseHeaders(server.headers);
+
+		try {
+			const serverConfig: MCPServerConfig = {
+				url: trimmedUrl,
+				transport: detectMcpTransportFromUrl(trimmedUrl),
+				handshakeTimeoutMs: DEFAULT_MCP_CONFIG.connectionTimeoutMs,
+				requestTimeoutMs: timeoutMs,
+				headers,
+				useProxy: server.useProxy
+			};
+
+			// Store config for reconnection
+			this.serverConfigs.set(server.id, serverConfig);
+
+			const connection = await MCPService.connect(
+				server.id,
+				serverConfig,
+				DEFAULT_MCP_CONFIG.clientInfo,
+				DEFAULT_MCP_CONFIG.capabilities,
+				(phase, log) => {
+					currentPhase = phase;
+					logs.push(log);
+					this.updateHealthCheck(server.id, {
+						status: HealthCheckStatus.CONNECTING,
+						phase,
+						logs: [...logs]
+					});
+
+					// Handle WebSocket disconnection
+					if (phase === MCPConnectionPhase.DISCONNECTED && promoteToActive) {
+						console.log(
+							`[MCPStore][${server.id}] Connection lost during health check, starting auto-reconnect`
+						);
+						this.autoReconnect(server.id);
+					}
+				}
+			);
+
+			const tools = connection.tools.map((tool) => ({
+				name: tool.name,
+				description: tool.description,
+				title: tool.title
+			}));
+
+			const capabilities = buildCapabilitiesInfo(
+				connection.serverCapabilities,
+				connection.clientCapabilities
+			);
+
+			this.updateHealthCheck(server.id, {
+				status: HealthCheckStatus.SUCCESS,
+				tools,
+				serverInfo: connection.serverInfo,
+				capabilities,
+				transportType: connection.transportType,
+				protocolVersion: connection.protocolVersion,
+				instructions: connection.instructions,
+				connectionTimeMs: connection.connectionTimeMs,
+				logs
+			});
+
+			// Promote to active connection or disconnect
+			if (promoteToActive && server.enabled) {
+				this.promoteHealthCheckToConnection(server.id, connection);
+			} else {
+				await MCPService.disconnect(connection);
+			}
+		} catch (error) {
+			const message = error instanceof Error ? error.message : 'Unknown error occurred';
+
+			logs.push({
+				timestamp: new Date(),
+				phase: MCPConnectionPhase.ERROR,
+				message: `Connection failed: ${message}`,
+				level: MCPLogLevel.ERROR
+			});
+
+			this.updateHealthCheck(server.id, {
+				status: HealthCheckStatus.ERROR,
+				message,
+				phase: currentPhase,
+				logs
+			});
+		}
+	}
+
+	/**
+	 * Promote a health check connection to an active connection.
+	 * This avoids the need to reconnect when the server is needed for agentic flows.
+	 */
+	private promoteHealthCheckToConnection(serverId: string, connection: MCPConnection): void {
+		// Register tools from the connection
+		for (const tool of connection.tools) {
+			if (this.toolsIndex.has(tool.name)) {
+				console.warn(
+					`[MCPStore] Tool name conflict during promotion: "${tool.name}" exists in "${this.toolsIndex.get(tool.name)}" and "${serverId}". Using tool from "${serverId}".`
+				);
+			}
+			this.toolsIndex.set(tool.name, serverId);
+		}
+
+		// Add to active connections
+		this.connections.set(serverId, connection);
+
+		// Update state
+		this.updateState({
+			toolCount: this.toolsIndex.size,
+			connectedServers: Array.from(this.connections.keys())
+		});
+	}
+
+	getServersStatus(): ServerStatus[] {
+		const statuses: ServerStatus[] = [];
+
+		for (const [name, connection] of this.connections) {
+			statuses.push({
+				name,
+				isConnected: true,
+				toolCount: connection.tools.length,
+				error: undefined
+			});
+		}
+
+		return statuses;
+	}
+
+	/**
+	 * Get aggregated server instructions from all connected servers.
+	 * Returns an array of { serverName, serverTitle, instructions } objects.
+	 */
+	getServerInstructions(): Array<{
+		serverName: string;
+		serverTitle?: string;
+		instructions: string;
+	}> {
+		const results: Array<{ serverName: string; serverTitle?: string; instructions: string }> = [];
+
+		for (const [serverName, connection] of this.connections) {
+			if (connection.instructions) {
+				results.push({
+					serverName,
+					serverTitle: connection.serverInfo?.title || connection.serverInfo?.name,
+					instructions: connection.instructions
+				});
+			}
+		}
+
+		return results;
+	}
+
+	/**
+	 * Get server instructions from health check results (for display before active connection).
+	 * Useful for showing instructions in settings UI.
+	 */
+	getHealthCheckInstructions(): Array<{
+		serverId: string;
+		serverTitle?: string;
+		instructions: string;
+	}> {
+		const results: Array<{ serverId: string; serverTitle?: string; instructions: string }> = [];
+
+		for (const [serverId, state] of Object.entries(this._healthChecks)) {
+			if (state.status === HealthCheckStatus.SUCCESS && state.instructions) {
+				results.push({
+					serverId,
+					serverTitle: state.serverInfo?.title || state.serverInfo?.name,
+					instructions: state.instructions
+				});
+			}
+		}
+
+		return results;
+	}
+
+	/**
+	 * Check if any connected server has instructions.
+	 */
+	hasServerInstructions(): boolean {
+		for (const connection of this.connections.values()) {
+			if (connection.instructions) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 *
+	 *
+	 * Resources Operations
+	 *
+	 *
+	 */
+
+	/**
+	 * Check if any enabled server with successful health check supports resources.
+	 * Uses health check state since servers may not have active connections until
+	 * the user actually sends a message or uses prompts.
+	 * @param perChatOverrides - Per-chat server overrides to filter by enabled servers.
+	 *                          If provided (even empty array), only checks enabled servers.
+	 *                          If undefined, checks all servers with successful health checks.
+	 */
+	hasResourcesCapability(perChatOverrides?: McpServerOverride[]): boolean {
+		// If perChatOverrides is provided (even empty array), filter by enabled servers
+		if (perChatOverrides !== undefined) {
+			const enabledServerIds = new Set(
+				perChatOverrides.filter((o) => o.enabled).map((o) => o.serverId)
+			);
+			// No enabled servers = no capability
+			if (enabledServerIds.size === 0) {
+				return false;
+			}
+
+			// Check health check states for enabled servers with resources capability
+			for (const [serverId, state] of Object.entries(this._healthChecks)) {
+				if (!enabledServerIds.has(serverId)) continue;
+				if (
+					state.status === HealthCheckStatus.SUCCESS &&
+					state.capabilities?.server?.resources !== undefined
+				) {
+					return true;
+				}
+			}
+
+			// Also check active connections as fallback
+			for (const [serverName, connection] of this.connections) {
+				if (!enabledServerIds.has(serverName)) continue;
+				if (MCPService.supportsResources(connection)) {
+					return true;
+				}
+			}
+
+			return false;
+		}
+
+		// No overrides provided - check all servers (global mode)
+		for (const state of Object.values(this._healthChecks)) {
+			if (
+				state.status === HealthCheckStatus.SUCCESS &&
+				state.capabilities?.server?.resources !== undefined
+			) {
+				return true;
+			}
+		}
+
+		for (const connection of this.connections.values()) {
+			if (MCPService.supportsResources(connection)) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	/**
+	 * Get list of servers that support resources.
+	 * Checks active connections first, then health check state as fallback.
+	 */
+	getServersWithResources(): string[] {
+		const servers: string[] = [];
+
+		// Check active connections
+		for (const [name, connection] of this.connections) {
+			if (MCPService.supportsResources(connection) && !servers.includes(name)) {
+				servers.push(name);
+			}
+		}
+
+		// Also check health check states for servers not yet connected
+		for (const [serverId, state] of Object.entries(this._healthChecks)) {
+			if (
+				!servers.includes(serverId) &&
+				state.status === HealthCheckStatus.SUCCESS &&
+				state.capabilities?.server?.resources !== undefined
+			) {
+				servers.push(serverId);
+			}
+		}
+
+		return servers;
+	}
+
+	/**
+	 * Fetch resources from all connected servers that support them.
+	 * Updates mcpResourceStore with the results.
+	 * @param forceRefresh - If true, bypass cache and fetch fresh data
+	 */
+	async fetchAllResources(forceRefresh: boolean = false): Promise<void> {
+		const serversWithResources = this.getServersWithResources();
+		if (serversWithResources.length === 0) {
+			return;
+		}
+
+		// Check if we have cached resources and they're recent (unless force refresh)
+		if (!forceRefresh) {
+			const allServersCached = serversWithResources.every((serverName) => {
+				const serverRes = mcpResourceStore.getServerResources(serverName);
+				if (!serverRes || !serverRes.lastFetched) {
+					return false;
+				}
+
+				// Cache is valid for 5 minutes
+				const age = Date.now() - serverRes.lastFetched.getTime();
+
+				return age < 5 * 60 * 1000;
+			});
+
+			if (allServersCached) {
+				console.log('[MCPStore] Using cached resources');
+
+				return;
+			}
+		}
+
+		mcpResourceStore.setLoading(true);
+
+		try {
+			await Promise.all(
+				serversWithResources.map((serverName) => this.fetchServerResources(serverName))
+			);
+		} finally {
+			mcpResourceStore.setLoading(false);
+		}
+	}
+
+	/**
+	 * Fetch resources from a specific server.
+	 * Updates mcpResourceStore with the results.
+	 */
+	async fetchServerResources(serverName: string): Promise<void> {
+		const connection = this.connections.get(serverName);
+		if (!connection) {
+			console.warn(`[MCPStore] No connection found for server: ${serverName}`);
+			return;
+		}
+
+		if (!MCPService.supportsResources(connection)) {
+			return;
+		}
+
+		mcpResourceStore.setServerLoading(serverName, true);
+
+		try {
+			const [resources, templates] = await Promise.all([
+				MCPService.listAllResources(connection),
+				MCPService.listAllResourceTemplates(connection)
+			]);
+
+			mcpResourceStore.setServerResources(serverName, resources, templates);
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			mcpResourceStore.setServerError(serverName, message);
+			console.error(`[MCPStore][${serverName}] Failed to fetch resources:`, error);
+		}
+	}
+
+	/**
+	 * Read resource content from a server.
+	 * Caches the result in mcpResourceStore.
+	 */
+	async readResource(uri: string): Promise<import('$lib/types').MCPResourceContent[] | null> {
+		// Check cache first
+		const cached = mcpResourceStore.getCachedContent(uri);
+		if (cached) {
+			return cached.content;
+		}
+
+		// Find which server has this resource
+		const serverName = mcpResourceStore.findServerForUri(uri);
+		if (!serverName) {
+			console.error(`[MCPStore] No server found for resource URI: ${uri}`);
+
+			return null;
+		}
+
+		const connection = this.connections.get(serverName);
+		if (!connection) {
+			console.error(`[MCPStore] No connection found for server: ${serverName}`);
+
+			return null;
+		}
+
+		try {
+			const result = await MCPService.readResource(connection, uri);
+			const resourceInfo = mcpResourceStore.findResourceByUri(uri);
+
+			if (resourceInfo) {
+				mcpResourceStore.cacheResourceContent(resourceInfo, result.contents);
+			}
+
+			return result.contents;
+		} catch (error) {
+			console.error(`[MCPStore] Failed to read resource ${uri}:`, error);
+
+			return null;
+		}
+	}
+
+	/**
+	 * Subscribe to resource updates.
+	 */
+	async subscribeToResource(uri: string): Promise<boolean> {
+		const serverName = mcpResourceStore.findServerForUri(uri);
+		if (!serverName) {
+			console.error(`[MCPStore] No server found for resource URI: ${uri}`);
+
+			return false;
+		}
+
+		const connection = this.connections.get(serverName);
+		if (!connection) {
+			console.error(`[MCPStore] No connection found for server: ${serverName}`);
+
+			return false;
+		}
+
+		if (!MCPService.supportsResourceSubscriptions(connection)) {
+			return false;
+		}
+
+		try {
+			await MCPService.subscribeResource(connection, uri);
+			mcpResourceStore.addSubscription(uri, serverName);
+
+			return true;
+		} catch (error) {
+			console.error(`[MCPStore] Failed to subscribe to resource ${uri}:`, error);
+
+			return false;
+		}
+	}
+
+	/**
+	 * Unsubscribe from resource updates.
+	 */
+	async unsubscribeFromResource(uri: string): Promise<boolean> {
+		const serverName = mcpResourceStore.findServerForUri(uri);
+		if (!serverName) {
+			console.error(`[MCPStore] No server found for resource URI: ${uri}`);
+
+			return false;
+		}
+
+		const connection = this.connections.get(serverName);
+		if (!connection) {
+			console.error(`[MCPStore] No connection found for server: ${serverName}`);
+
+			return false;
+		}
+
+		try {
+			await MCPService.unsubscribeResource(connection, uri);
+			mcpResourceStore.removeSubscription(uri);
+
+			return true;
+		} catch (error) {
+			console.error(`[MCPStore] Failed to unsubscribe from resource ${uri}:`, error);
+
+			return false;
+		}
+	}
+
+	/**
+	 * Add a resource as attachment to chat context.
+	 * Automatically fetches content if not cached.
+	 */
+	async attachResource(uri: string): Promise<import('$lib/types').MCPResourceAttachment | null> {
+		const resourceInfo = mcpResourceStore.findResourceByUri(uri);
+		if (!resourceInfo) {
+			console.error(`[MCPStore] Resource not found: ${uri}`);
+
+			return null;
+		}
+
+		// Check if already attached
+		if (mcpResourceStore.isAttached(uri)) {
+			return null;
+		}
+
+		// Add attachment (initially loading)
+		const attachment = mcpResourceStore.addAttachment(resourceInfo);
+
+		// Fetch content
+		try {
+			const content = await this.readResource(uri);
+
+			if (content) {
+				mcpResourceStore.updateAttachmentContent(attachment.id, content);
+			} else {
+				mcpResourceStore.updateAttachmentError(attachment.id, 'Failed to read resource');
+			}
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			mcpResourceStore.updateAttachmentError(attachment.id, message);
+		}
+
+		return mcpResourceStore.getAttachment(attachment.id) ?? null;
+	}
+
+	/**
+	 * Remove a resource attachment from chat context.
+	 */
+	removeResourceAttachment(attachmentId: string): void {
+		mcpResourceStore.removeAttachment(attachmentId);
+	}
+
+	/**
+	 * Clear all resource attachments.
+	 */
+	clearResourceAttachments(): void {
+		mcpResourceStore.clearAttachments();
+	}
+
+	/**
+	 * Get formatted resource context for chat.
+	 */
+	getResourceContextForChat(): string {
+		return mcpResourceStore.formatAttachmentsForContext();
+	}
+
+	/**
+	 * Convert current resource attachments to DatabaseMessageExtra[] and clear them.
+	 * Called during message send to persist resources with the user message.
+	 */
+	consumeResourceAttachmentsAsExtras(): import('$lib/types').DatabaseMessageExtraMcpResource[] {
+		const extras = mcpResourceStore.toMessageExtras();
+		if (extras.length > 0) {
+			mcpResourceStore.clearAttachments();
+		}
+		return extras;
+	}
+}
+
+export const mcpStore = new MCPStore();
+
+export const mcpIsInitializing = () => mcpStore.isInitializing;
+export const mcpIsInitialized = () => mcpStore.isInitialized;
+export const mcpError = () => mcpStore.error;
+export const mcpIsEnabled = () => mcpStore.isEnabled;
+export const mcpAvailableTools = () => mcpStore.availableTools;
+export const mcpConnectedServerCount = () => mcpStore.connectedServerCount;
+export const mcpConnectedServerNames = () => mcpStore.connectedServerNames;
+export const mcpToolCount = () => mcpStore.toolCount;
+export const mcpServerInstructions = () => mcpStore.getServerInstructions();
+export const mcpHasServerInstructions = () => mcpStore.hasServerInstructions();
+
+// Resources exports
+export const mcpHasResourcesCapability = () => mcpStore.hasResourcesCapability();
+export const mcpServersWithResources = () => mcpStore.getServersWithResources();
+export const mcpResourceContext = () => mcpStore.getResourceContextForChat();
diff --git a/tools/server/webui/src/lib/stores/models.svelte.ts b/tools/server/webui/src/lib/stores/models.svelte.ts
index 0a35cd44ac7..4cb61672203 100644
--- a/tools/server/webui/src/lib/stores/models.svelte.ts
+++ b/tools/server/webui/src/lib/stores/models.svelte.ts
@@ -1,8 +1,9 @@
 import { SvelteSet } from 'svelte/reactivity';
-import { ModelsService } from '$lib/services/models.service';
-import { PropsService } from '$lib/services/props.service';
 import { ServerModelStatus, ModelModality } from '$lib/enums';
+import { ModelsService, PropsService } from '$lib/services';
 import { serverStore } from '$lib/stores/server.svelte';
+import { TTLCache } from '$lib/utils';
+import { MODEL_PROPS_CACHE_TTL_MS, MODEL_PROPS_CACHE_MAX_ENTRIES } from '$lib/constants/cache';
 
 /**
  * modelsStore - Reactive store for model management in both MODEL and ROUTER modes
@@ -32,9 +33,13 @@ import { serverStore } from '$lib/stores/server.svelte';
  * - **Lazy loading**: ensureModelLoaded() loads models on demand
  */
 class ModelsStore {
-	// ─────────────────────────────────────────────────────────────────────────────
-	// State
-	// ─────────────────────────────────────────────────────────────────────────────
+	/**
+	 *
+	 *
+	 * State
+	 *
+	 *
+	 */
 
 	models = $state<ModelOption[]>([]);
 	routerModels = $state<ApiModelDataEntry[]>([]);
@@ -48,10 +53,14 @@ class ModelsStore {
 	private modelLoadingStates = $state<Map<string, boolean>>(new Map());
 
 	/**
-	 * Model-specific props cache
+	 * Model-specific props cache with TTL
 	 * Key: modelId, Value: props data including modalities
+	 * TTL: 10 minutes - props don't change frequently
 	 */
-	private modelPropsCache = $state<Map<string, ApiLlamaCppServerProps>>(new Map());
+	private modelPropsCache = new TTLCache<string, ApiLlamaCppServerProps>({
+		ttlMs: MODEL_PROPS_CACHE_TTL_MS,
+		maxEntries: MODEL_PROPS_CACHE_MAX_ENTRIES
+	});
 	private modelPropsFetching = $state<Set<string>>(new Set());
 
 	/**
@@ -59,9 +68,13 @@ class ModelsStore {
 	 */
 	propsCacheVersion = $state(0);
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Computed Getters
-	// ─────────────────────────────────────────────────────────────────────────────
+	/**
+	 *
+	 *
+	 * Computed Getters
+	 *
+	 *
+	 */
 
 	get selectedModel(): ModelOption | null {
 		if (!this.selectedModelId) return null;
@@ -95,22 +108,24 @@ class ModelsStore {
 		return props.model_path.split(/(\\|\/)/).pop() || null;
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Modalities
-	// ─────────────────────────────────────────────────────────────────────────────
+	/**
+	 *
+	 *
+	 * Modalities
+	 *
+	 *
+	 */
 
 	/**
 	 * Get modalities for a specific model
 	 * Returns cached modalities from model props
 	 */
 	getModelModalities(modelId: string): ModelModalities | null {
-		// First check if modalities are stored in the model option
 		const model = this.models.find((m) => m.model === modelId || m.id === modelId);
 		if (model?.modalities) {
 			return model.modalities;
 		}
 
-		// Fall back to props cache
 		const props = this.modelPropsCache.get(modelId);
 		if (props?.modalities) {
 			return {
@@ -155,15 +170,17 @@ class ModelsStore {
 	 * Get props for a specific model (from cache)
 	 */
 	getModelProps(modelId: string): ApiLlamaCppServerProps | null {
-		return this.modelPropsCache.get(modelId) ?? null;
+		return this.modelPropsCache.get(modelId);
 	}
 
 	/**
 	 * Get context size (n_ctx) for a specific model from cached props
 	 */
 	getModelContextSize(modelId: string): number | null {
-		const props = this.modelPropsCache.get(modelId);
-		return props?.default_generation_settings?.n_ctx ?? null;
+		const props = this.getModelProps(modelId);
+		const nCtx = props?.default_generation_settings?.n_ctx;
+
+		return typeof nCtx === 'number' ? nCtx : null;
 	}
 
 	/**
@@ -181,9 +198,13 @@ class ModelsStore {
 		return this.modelPropsFetching.has(modelId);
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Status Queries
-	// ─────────────────────────────────────────────────────────────────────────────
+	/**
+	 *
+	 *
+	 * Status Queries
+	 *
+	 *
+	 */
 
 	isModelLoaded(modelId: string): boolean {
 		const model = this.routerModels.find((m) => m.id === modelId);
@@ -208,9 +229,13 @@ class ModelsStore {
 		return usage !== undefined && usage.size > 0;
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Data Fetching
-	// ─────────────────────────────────────────────────────────────────────────────
+	/**
+	 *
+	 *
+	 * Data Fetching
+	 *
+	 *
+	 */
 
 	/**
 	 * Fetch list of models from server and detect server role
@@ -224,7 +249,6 @@ class ModelsStore {
 		this.error = null;
 
 		try {
-			// Ensure server props are loaded (for role detection and MODEL mode modalities)
 			if (!serverStore.props) {
 				await serverStore.fetch();
 			}
@@ -251,7 +275,6 @@ class ModelsStore {
 
 			this.models = models;
 
-			// In MODEL mode, populate modalities from serverStore.props (single model)
 			// WORKAROUND: In MODEL mode, /props returns modalities for the single model,
 			// but /v1/models doesn't include modalities. We bridge this gap here.
 			const serverProps = serverStore.props;
@@ -260,9 +283,7 @@ class ModelsStore {
 					vision: serverProps.modalities.vision ?? false,
 					audio: serverProps.modalities.audio ?? false
 				};
-				// Cache props for the single model
 				this.modelPropsCache.set(this.models[0].model, serverProps);
-				// Update model with modalities
 				this.models = this.models.map((model, index) =>
 					index === 0 ? { ...model, modalities } : model
 				);
@@ -302,7 +323,6 @@ class ModelsStore {
 	 * @returns Props data or null if fetch failed or model not loaded
 	 */
 	async fetchModelProps(modelId: string): Promise<ApiLlamaCppServerProps | null> {
-		// Return cached props if available
 		const cached = this.modelPropsCache.get(modelId);
 		if (cached) return cached;
 
@@ -310,7 +330,6 @@ class ModelsStore {
 			return null;
 		}
 
-		// Avoid duplicate fetches
 		if (this.modelPropsFetching.has(modelId)) return null;
 
 		this.modelPropsFetching.add(modelId);
@@ -335,7 +354,6 @@ class ModelsStore {
 		const loadedModelIds = this.loadedModelIds;
 		if (loadedModelIds.length === 0) return;
 
-		// Fetch props for each loaded model in parallel
 		const propsPromises = loadedModelIds.map((modelId) => this.fetchModelProps(modelId));
 
 		try {
@@ -357,7 +375,6 @@ class ModelsStore {
 				return { ...model, modalities };
 			});
 
-			// Increment version to trigger reactivity
 			this.propsCacheVersion++;
 		} catch (error) {
 			console.warn('Failed to fetch modalities for loaded models:', error);
@@ -382,16 +399,19 @@ class ModelsStore {
 				model.model === modelId ? { ...model, modalities } : model
 			);
 
-			// Increment version to trigger reactivity
 			this.propsCacheVersion++;
 		} catch (error) {
 			console.warn(`Failed to update modalities for model ${modelId}:`, error);
 		}
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Model Selection
-	// ─────────────────────────────────────────────────────────────────────────────
+	/**
+	 *
+	 *
+	 * Model Selection
+	 *
+	 *
+	 */
 
 	/**
 	 * Select a model for new conversations
@@ -443,9 +463,13 @@ class ModelsStore {
 		return this.models.some((model) => model.model === modelName);
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Loading/Unloading Models
-	// ─────────────────────────────────────────────────────────────────────────────
+	/**
+	 *
+	 *
+	 * Loading/Unloading Models
+	 *
+	 *
+	 */
 
 	/**
 	 * WORKAROUND: Polling for model status after load/unload operations.
@@ -486,7 +510,6 @@ class ModelsStore {
 				return;
 			}
 
-			// Wait before next poll
 			await new Promise((resolve) => setTimeout(resolve, ModelsStore.STATUS_POLL_INTERVAL));
 		}
 
@@ -511,8 +534,6 @@ class ModelsStore {
 
 		try {
 			await ModelsService.load(modelId);
-
-			// Poll until model is loaded
 			await this.pollForModelStatus(modelId, ServerModelStatus.LOADED);
 
 			await this.updateModelModalities(modelId);
@@ -562,9 +583,13 @@ class ModelsStore {
 		await this.loadModel(modelId);
 	}
 
-	// ─────────────────────────────────────────────────────────────────────────────
-	// Utilities
-	// ─────────────────────────────────────────────────────────────────────────────
+	/**
+	 *
+	 *
+	 * Utilities
+	 *
+	 *
+	 */
 
 	private toDisplayName(id: string): string {
 		const segments = id.split(/\\|\//);
@@ -586,6 +611,14 @@ class ModelsStore {
 		this.modelPropsCache.clear();
 		this.modelPropsFetching.clear();
 	}
+
+	/**
+	 * Prune expired entries from caches.
+	 * Call periodically for proactive memory cleanup.
+	 */
+	pruneExpiredCache(): number {
+		return this.modelPropsCache.prune();
+	}
 }
 
 export const modelsStore = new ModelsStore();
diff --git a/tools/server/webui/src/lib/types/agentic.d.ts b/tools/server/webui/src/lib/types/agentic.d.ts
new file mode 100644
index 00000000000..4217852debe
--- /dev/null
+++ b/tools/server/webui/src/lib/types/agentic.d.ts
@@ -0,0 +1,119 @@
+import type { MessageRole } from '$lib/enums';
+import type {
+	ApiChatCompletionRequest,
+	ApiChatMessageContentPart,
+	ApiChatMessageData
+} from './api';
+import type { ChatMessageTimings, ChatMessagePromptProgress } from './chat';
+import type { DatabaseMessage, DatabaseMessageExtra, McpServerOverride } from './database';
+
+/**
+ * Agentic orchestration configuration.
+ */
+export interface AgenticConfig {
+	enabled: boolean;
+	maxTurns: number;
+	maxToolPreviewLines: number;
+}
+
+/**
+ * Tool call payload for agentic messages.
+ */
+export type AgenticToolCallPayload = {
+	id: string;
+	type: 'function';
+	function: {
+		name: string;
+		arguments: string;
+	};
+};
+
+/**
+ * Agentic message types for different roles.
+ */
+export type AgenticMessage =
+	| {
+			role: MessageRole.SYSTEM | MessageRole.USER;
+			content: string | ApiChatMessageContentPart[];
+	  }
+	| {
+			role: MessageRole.ASSISTANT;
+			content?: string | ApiChatMessageContentPart[];
+			tool_calls?: AgenticToolCallPayload[];
+	  }
+	| {
+			role: MessageRole.TOOL;
+			tool_call_id: string;
+			content: string | ApiChatMessageContentPart[];
+	  };
+
+export type AgenticAssistantMessage = Extract<AgenticMessage, { role: MessageRole.ASSISTANT }>;
+export type AgenticToolCallList = NonNullable<AgenticAssistantMessage['tool_calls']>;
+
+export type AgenticChatCompletionRequest = Omit<ApiChatCompletionRequest, 'messages'> & {
+	messages: AgenticMessage[];
+	stream: true;
+	tools?: ApiChatCompletionRequest['tools'];
+};
+
+/**
+ * Per-conversation agentic session state.
+ * Enables parallel agentic flows across multiple chats.
+ */
+export interface AgenticSession {
+	isRunning: boolean;
+	currentTurn: number;
+	totalToolCalls: number;
+	lastError: Error | null;
+	streamingToolCall: { name: string; arguments: string } | null;
+}
+
+/**
+ * Callbacks for agentic flow execution
+ */
+export interface AgenticFlowCallbacks {
+	onChunk?: (chunk: string) => void;
+	onReasoningChunk?: (chunk: string) => void;
+	onToolCallChunk?: (serializedToolCalls: string) => void;
+	onAttachments?: (extras: DatabaseMessageExtra[]) => void;
+	onModel?: (model: string) => void;
+	onComplete?: (
+		content: string,
+		reasoningContent?: string,
+		timings?: ChatMessageTimings,
+		toolCalls?: string
+	) => void;
+	onError?: (error: Error) => void;
+	onTimings?: (timings?: ChatMessageTimings, promptProgress?: ChatMessagePromptProgress) => void;
+}
+
+/**
+ * Options for agentic flow execution
+ */
+export interface AgenticFlowOptions {
+	stream?: boolean;
+	model?: string;
+	temperature?: number;
+	max_tokens?: number;
+	[key: string]: unknown;
+}
+
+/**
+ * Parameters for starting an agentic flow
+ */
+export interface AgenticFlowParams {
+	conversationId: string;
+	messages: (ApiChatMessageData | (DatabaseMessage & { extra?: DatabaseMessageExtra[] }))[];
+	options?: AgenticFlowOptions;
+	callbacks: AgenticFlowCallbacks;
+	signal?: AbortSignal;
+	perChatOverrides?: McpServerOverride[];
+}
+
+/**
+ * Result of an agentic flow execution
+ */
+export interface AgenticFlowResult {
+	handled: boolean;
+	error?: Error;
+}
diff --git a/tools/server/webui/src/lib/types/chat.d.ts b/tools/server/webui/src/lib/types/chat.d.ts
index 8d4661960a6..86e98c8b6ba 100644
--- a/tools/server/webui/src/lib/types/chat.d.ts
+++ b/tools/server/webui/src/lib/types/chat.d.ts
@@ -1,8 +1,5 @@
 import type { ErrorDialogType } from '$lib/enums';
-import type { DatabaseMessage, DatabaseMessageExtra } from './database';
-
-export type ChatMessageType = 'root' | 'text' | 'think' | 'system';
-export type ChatRole = 'user' | 'assistant' | 'system';
+import type { DatabaseMessageExtra } from './database';
 
 export interface ChatUploadedFile {
 	id: string;
@@ -12,6 +9,11 @@ export interface ChatUploadedFile {
 	file: File;
 	preview?: string;
 	textContent?: string;
+	mcpPrompt?: {
+		serverName: string;
+		promptName: string;
+		arguments?: Record<string, string>;
+	};
 	isLoading?: boolean;
 	loadError?: string;
 }
@@ -22,6 +24,8 @@ export interface ChatAttachmentDisplayItem {
 	size?: number;
 	preview?: string;
 	isImage: boolean;
+	isMcpPrompt?: boolean;
+	isMcpResource?: boolean;
 	isLoading?: boolean;
 	loadError?: string;
 	uploadedFile?: ChatUploadedFile;
@@ -59,8 +63,44 @@ export interface ChatMessageTimings {
 	predicted_n?: number;
 	prompt_ms?: number;
 	prompt_n?: number;
+	agentic?: ChatMessageAgenticTimings;
+}
+
+export interface ChatMessageAgenticTimings {
+	turns: number;
+	toolCallsCount: number;
+	toolsMs: number;
+	toolCalls?: ChatMessageToolCallTiming[];
+	perTurn?: ChatMessageAgenticTurnStats[];
+	llm: {
+		predicted_n: number;
+		predicted_ms: number;
+		prompt_n: number;
+		prompt_ms: number;
+	};
+}
+
+export interface ChatMessageAgenticTurnStats {
+	turn: number;
+	llm: {
+		predicted_n: number;
+		predicted_ms: number;
+		prompt_n: number;
+		prompt_ms: number;
+	};
+	toolCalls: ChatMessageToolCallTiming[];
+	toolsMs: number;
+}
+
+export interface ChatMessageToolCallTiming {
+	name: string;
+	duration_ms: number;
+	success: boolean;
 }
 
+/**
+ * Callbacks for streaming chat responses
+ */
 export interface ChatStreamCallbacks {
 	onChunk?: (chunk: string) => void;
 	onReasoningChunk?: (chunk: string) => void;
@@ -77,12 +117,18 @@ export interface ChatStreamCallbacks {
 	onError?: (error: Error) => void;
 }
 
+/**
+ * Error dialog state for displaying server/timeout errors
+ */
 export interface ErrorDialogState {
 	type: ErrorDialogType;
 	message: string;
 	contextInfo?: { n_prompt_tokens: number; n_ctx: number };
 }
 
+/**
+ * Live processing stats during prompt evaluation
+ */
 export interface LiveProcessingStats {
 	tokensProcessed: number;
 	totalTokens: number;
@@ -91,17 +137,26 @@ export interface LiveProcessingStats {
 	etaSecs?: number;
 }
 
+/**
+ * Live generation stats during token generation
+ */
 export interface LiveGenerationStats {
 	tokensGenerated: number;
 	timeMs: number;
 	tokensPerSecond: number;
 }
 
+/**
+ * Options for getting attachment display items
+ */
 export interface AttachmentDisplayItemsOptions {
 	uploadedFiles?: ChatUploadedFile[];
 	attachments?: DatabaseMessageExtra[];
 }
 
+/**
+ * Result of file processing operation
+ */
 export interface FileProcessingResult {
 	extras: DatabaseMessageExtra[];
 	emptyFiles: string[];
diff --git a/tools/server/webui/src/lib/types/common.d.ts b/tools/server/webui/src/lib/types/common.d.ts
index a4ae12fb869..a9bd34722eb 100644
--- a/tools/server/webui/src/lib/types/common.d.ts
+++ b/tools/server/webui/src/lib/types/common.d.ts
@@ -1,7 +1,12 @@
 import type { AttachmentType } from '$lib/enums';
 
+/**
+ * Common utility types used across the application
+ */
+
 /**
  * Represents a key-value pair.
+ * Used for headers, environment variables, query parameters, etc.
  */
 export interface KeyValuePair {
 	key: string;
@@ -9,16 +14,19 @@ export interface KeyValuePair {
 }
 
 /**
- * Binary detection configuration options.
+ * Binary detection configuration options
  */
 export interface BinaryDetectionOptions {
+	/** Number of characters to check from the beginning of the file */
 	prefixLength: number;
+	/** Maximum ratio of suspicious characters allowed (0.0 to 1.0) */
 	suspiciousCharThresholdRatio: number;
+	/** Maximum absolute number of null bytes allowed */
 	maxAbsoluteNullBytes: number;
 }
 
 /**
- * Format for text attachments when copied to clipboard.
+ * Format for text attachments when copied to clipboard
  */
 export interface ClipboardTextAttachment {
 	type: typeof AttachmentType.TEXT;
@@ -27,9 +35,29 @@ export interface ClipboardTextAttachment {
 }
 
 /**
- * Parsed result from clipboard content.
+ * Format for MCP prompt attachments when copied to clipboard
+ */
+export interface ClipboardMcpPromptAttachment {
+	type: typeof AttachmentType.MCP_PROMPT;
+	name: string;
+	serverName: string;
+	promptName: string;
+	content: string;
+	arguments?: Record<string, string>;
+}
+
+/**
+ * Union type for all clipboard attachment types
+ */
+export type ClipboardAttachment = ClipboardTextAttachment | ClipboardMcpPromptAttachment;
+
+/**
+ * Parsed result from clipboard content
  */
 export interface ParsedClipboardContent {
 	message: string;
 	textAttachments: ClipboardTextAttachment[];
+	mcpPromptAttachments: ClipboardMcpPromptAttachment[];
 }
+
+export type MimeTypeUnion = MimeTypeAudio | MimeTypeImage | MimeTypeApplication | MimeTypeText;
diff --git a/tools/server/webui/src/lib/types/database.d.ts b/tools/server/webui/src/lib/types/database.d.ts
index 1a336e059cf..50f51ecf5dc 100644
--- a/tools/server/webui/src/lib/types/database.d.ts
+++ b/tools/server/webui/src/lib/types/database.d.ts
@@ -1,11 +1,17 @@
 import type { ChatMessageTimings, ChatRole, ChatMessageType } from '$lib/types/chat';
 import { AttachmentType } from '$lib/enums';
 
+export interface McpServerOverride {
+	serverId: string;
+	enabled: boolean;
+}
+
 export interface DatabaseConversation {
 	currNode: string | null;
 	id: string;
 	lastModified: number;
 	name: string;
+	mcpServerOverrides?: McpServerOverride[];
 }
 
 export interface DatabaseMessageExtraAudioFile {
@@ -35,9 +41,9 @@ export interface DatabaseMessageExtraPdfFile {
 	type: AttachmentType.PDF;
 	base64Data: string;
 	name: string;
-	content: string; // Text content extracted from PDF
-	images?: string[]; // Optional: PDF pages as base64 images
-	processedAsImages: boolean; // Whether PDF was processed as images
+	content: string;
+	images?: string[];
+	processedAsImages: boolean;
 }
 
 export interface DatabaseMessageExtraTextFile {
@@ -46,11 +52,31 @@ export interface DatabaseMessageExtraTextFile {
 	content: string;
 }
 
+export interface DatabaseMessageExtraMcpPrompt {
+	type: AttachmentType.MCP_PROMPT;
+	name: string;
+	serverName: string;
+	promptName: string;
+	content: string;
+	arguments?: Record<string, string>;
+}
+
+export interface DatabaseMessageExtraMcpResource {
+	type: AttachmentType.MCP_RESOURCE;
+	name: string;
+	uri: string;
+	serverName: string;
+	content: string;
+	mimeType?: string;
+}
+
 export type DatabaseMessageExtra =
 	| DatabaseMessageExtraImageFile
 	| DatabaseMessageExtraTextFile
 	| DatabaseMessageExtraAudioFile
 	| DatabaseMessageExtraPdfFile
+	| DatabaseMessageExtraMcpPrompt
+	| DatabaseMessageExtraMcpResource
 	| DatabaseMessageExtraLegacyContext;
 
 export interface DatabaseMessage {
@@ -60,26 +86,24 @@ export interface DatabaseMessage {
 	timestamp: number;
 	role: ChatRole;
 	content: string;
-	parent: string;
-	thinking: string;
+	parent: string | null;
+	/**
+	 * @deprecated - left for backward compatibility
+	 */
+	thinking?: string;
+	/** Serialized JSON array of tool calls made by assistant messages */
 	toolCalls?: string;
+	/** Tool call ID for tool result messages (role: 'tool') */
+	toolCallId?: string;
 	children: string[];
 	extra?: DatabaseMessageExtra[];
 	timings?: ChatMessageTimings;
 	model?: string;
 }
 
-/**
- * Represents a single conversation with its associated messages,
- * typically used for import/export operations.
- */
 export type ExportedConversation = {
 	conv: DatabaseConversation;
 	messages: DatabaseMessage[];
 };
 
-/**
- * Type representing one or more exported conversations.
- * Can be a single conversation object or an array of them.
- */
 export type ExportedConversations = ExportedConversation | ExportedConversation[];
diff --git a/tools/server/webui/src/lib/types/index.ts b/tools/server/webui/src/lib/types/index.ts
index 7b1bba717d7..93a39f03dae 100644
--- a/tools/server/webui/src/lib/types/index.ts
+++ b/tools/server/webui/src/lib/types/index.ts
@@ -34,28 +34,32 @@ export type {
 
 // Chat types
 export type {
-	ChatMessageType,
-	ChatRole,
 	ChatUploadedFile,
 	ChatAttachmentDisplayItem,
 	ChatAttachmentPreviewItem,
 	ChatMessageSiblingInfo,
 	ChatMessagePromptProgress,
 	ChatMessageTimings,
+	ChatMessageAgenticTimings,
+	ChatMessageAgenticTurnStats,
+	ChatMessageToolCallTiming,
 	ChatStreamCallbacks,
 	ErrorDialogState,
 	LiveProcessingStats,
 	LiveGenerationStats,
 	AttachmentDisplayItemsOptions,
 	FileProcessingResult
-} from './chat';
+} from './chat.d';
 
 // Database types
 export type {
+	McpServerOverride,
 	DatabaseConversation,
 	DatabaseMessageExtraAudioFile,
 	DatabaseMessageExtraImageFile,
 	DatabaseMessageExtraLegacyContext,
+	DatabaseMessageExtraMcpPrompt,
+	DatabaseMessageExtraMcpResource,
 	DatabaseMessageExtraPdfFile,
 	DatabaseMessageExtraTextFile,
 	DatabaseMessageExtra,
@@ -84,5 +88,66 @@ export type {
 	KeyValuePair,
 	BinaryDetectionOptions,
 	ClipboardTextAttachment,
+	ClipboardMcpPromptAttachment,
+	ClipboardAttachment,
 	ParsedClipboardContent
 } from './common';
+
+// MCP types
+export type {
+	ClientCapabilities,
+	ServerCapabilities,
+	Implementation,
+	MCPConnectionLog,
+	MCPServerInfo,
+	MCPCapabilitiesInfo,
+	MCPToolInfo,
+	MCPPromptInfo,
+	MCPConnectionDetails,
+	MCPPhaseCallback,
+	MCPConnection,
+	HealthCheckState,
+	HealthCheckParams,
+	MCPServerConfig,
+	MCPClientConfig,
+	MCPServerSettingsEntry,
+	MCPToolCall,
+	OpenAIToolDefinition,
+	ServerStatus,
+	ToolCallParams,
+	ToolExecutionResult,
+	Tool,
+	Prompt,
+	GetPromptResult,
+	PromptMessage,
+	MCPProgressState,
+	MCPResourceAnnotations,
+	MCPResourceIcon,
+	MCPResource,
+	MCPResourceTemplate,
+	MCPTextResourceContent,
+	MCPBlobResourceContent,
+	MCPResourceContent,
+	MCPReadResourceResult,
+	MCPResourceInfo,
+	MCPResourceTemplateInfo,
+	MCPCachedResource,
+	MCPResourceAttachment,
+	MCPResourceSubscription,
+	MCPServerResources
+} from './mcp';
+
+// Agentic types
+export type {
+	AgenticConfig,
+	AgenticToolCallPayload,
+	AgenticMessage,
+	AgenticAssistantMessage,
+	AgenticToolCallList,
+	AgenticChatCompletionRequest,
+	AgenticSession,
+	AgenticFlowCallbacks,
+	AgenticFlowOptions,
+	AgenticFlowParams,
+	AgenticFlowResult
+} from './agentic';
diff --git a/tools/server/webui/src/lib/types/mcp.d.ts b/tools/server/webui/src/lib/types/mcp.d.ts
new file mode 100644
index 00000000000..39d7d924392
--- /dev/null
+++ b/tools/server/webui/src/lib/types/mcp.d.ts
@@ -0,0 +1,420 @@
+import type { MCPConnectionPhase, MCPLogLevel } from '$lib/enums/mcp';
+import type {
+	Client,
+	ClientCapabilities as SDKClientCapabilities,
+	ServerCapabilities as SDKServerCapabilities,
+	Implementation as SDKImplementation,
+	Tool,
+	CallToolResult,
+	Prompt,
+	GetPromptResult,
+	PromptMessage,
+	Transport
+} from '@modelcontextprotocol/sdk';
+import type { MimeTypeUnion } from './common';
+
+export type { Tool, CallToolResult, Prompt, GetPromptResult, PromptMessage };
+export type ClientCapabilities = SDKClientCapabilities;
+export type ServerCapabilities = SDKServerCapabilities;
+export type Implementation = SDKImplementation;
+
+/**
+ * Log entry for connection events
+ */
+export interface MCPConnectionLog {
+	timestamp: Date;
+	phase: MCPConnectionPhase;
+	message: string;
+	details?: unknown;
+	level: MCPLogLevel;
+}
+
+/**
+ * Server information returned after initialization
+ */
+export interface MCPServerInfo {
+	name: string;
+	version: string;
+	title?: string;
+	description?: string;
+	websiteUrl?: string;
+	icons?: Array<{ src: string; mimeType?: MimeTypeUnion; sizes?: string[] }>;
+}
+
+/**
+ * Detailed capabilities information
+ */
+export interface MCPCapabilitiesInfo {
+	server: {
+		tools?: { listChanged?: boolean };
+		prompts?: { listChanged?: boolean };
+		resources?: { subscribe?: boolean; listChanged?: boolean };
+		logging?: boolean;
+		completions?: boolean;
+		tasks?: boolean;
+	};
+	client: {
+		roots?: { listChanged?: boolean };
+		sampling?: boolean;
+		elicitation?: { form?: boolean; url?: boolean };
+		tasks?: boolean;
+	};
+}
+
+/**
+ * Tool information for display
+ */
+export interface MCPToolInfo {
+	name: string;
+	description?: string;
+	title?: string;
+}
+
+/**
+ * Prompt information for display
+ */
+export interface MCPPromptInfo {
+	name: string;
+	description?: string;
+	title?: string;
+	serverName: string;
+	arguments?: Array<{
+		name: string;
+		description?: string;
+		required?: boolean;
+	}>;
+}
+
+/**
+ * Full connection details for visualization
+ */
+export interface MCPConnectionDetails {
+	phase: MCPConnectionPhase;
+	transportType?: MCPTransportType;
+	protocolVersion?: string;
+	serverInfo?: MCPServerInfo;
+	capabilities?: MCPCapabilitiesInfo;
+	instructions?: string;
+	tools: MCPToolInfo[];
+	connectionTimeMs?: number;
+	error?: string;
+	logs: MCPConnectionLog[];
+}
+
+/**
+ * Callback for connection phase changes
+ */
+export type MCPPhaseCallback = (
+	phase: MCPConnectionPhase,
+	log: MCPConnectionLog,
+	details?: {
+		transportType?: MCPTransportType;
+		serverInfo?: MCPServerInfo;
+		serverCapabilities?: ServerCapabilities;
+		clientCapabilities?: ClientCapabilities;
+		protocolVersion?: string;
+		instructions?: string;
+	}
+) => void;
+
+/**
+ * Represents an active MCP server connection.
+ * Returned by MCPService.connect() and used for subsequent operations.
+ */
+export interface MCPConnection {
+	client: Client;
+	transport: Transport;
+	tools: Tool[];
+	serverName: string;
+	transportType: MCPTransportType;
+	serverInfo?: MCPServerInfo;
+	serverCapabilities?: ServerCapabilities;
+	clientCapabilities?: ClientCapabilities;
+	protocolVersion?: string;
+	instructions?: string;
+	connectionTimeMs: number;
+}
+
+/**
+ * Extended health check state with detailed connection info
+ */
+export type HealthCheckState =
+	| { status: import('$lib/enums/mcp').HealthCheckStatus.IDLE }
+	| {
+			status: import('$lib/enums/mcp').HealthCheckStatus.CONNECTING;
+			phase: MCPConnectionPhase;
+			logs: MCPConnectionLog[];
+	  }
+	| {
+			status: import('$lib/enums/mcp').HealthCheckStatus.ERROR;
+			message: string;
+			phase?: MCPConnectionPhase;
+			logs: MCPConnectionLog[];
+	  }
+	| {
+			status: import('$lib/enums/mcp').HealthCheckStatus.SUCCESS;
+			tools: MCPToolInfo[];
+			serverInfo?: MCPServerInfo;
+			capabilities?: MCPCapabilitiesInfo;
+			transportType?: MCPTransportType;
+			protocolVersion?: string;
+			instructions?: string;
+			connectionTimeMs?: number;
+			logs: MCPConnectionLog[];
+	  };
+
+/**
+ * Health check parameters
+ */
+export interface HealthCheckParams {
+	id: string;
+	enabled: boolean;
+	url: string;
+	requestTimeoutSeconds: number;
+	headers?: string;
+	useProxy?: boolean;
+}
+
+export type MCPServerConfig = {
+	transport?: MCPTransportType;
+	url: string;
+	protocols?: string | string[];
+	headers?: Record<string, string>;
+	credentials?: RequestCredentials;
+	handshakeTimeoutMs?: number;
+	requestTimeoutMs?: number;
+	capabilities?: ClientCapabilities;
+	useProxy?: boolean;
+};
+
+export type MCPClientConfig = {
+	servers: Record<string, MCPServerConfig>;
+	protocolVersion?: string;
+	capabilities?: ClientCapabilities;
+	clientInfo?: Implementation;
+	requestTimeoutMs?: number;
+};
+
+export type MCPToolCallArguments = Record<string, unknown>;
+
+export type MCPToolCall = {
+	id: string;
+	function: {
+		name: string;
+		arguments: string | MCPToolCallArguments;
+	};
+};
+
+export type MCPServerSettingsEntry = {
+	id: string;
+	enabled: boolean;
+	url: string;
+	requestTimeoutSeconds: number;
+	headers?: string;
+	name?: string;
+	iconUrl?: string;
+	useProxy?: boolean;
+};
+
+export interface MCPHostManagerConfig {
+	servers: MCPClientConfig['servers'];
+	clientInfo?: Implementation;
+	capabilities?: ClientCapabilities;
+}
+
+export interface OpenAIToolDefinition {
+	type: 'function';
+	function: {
+		name: string;
+		description?: string;
+		parameters: Record<string, unknown>;
+	};
+}
+
+export interface ServerStatus {
+	name: string;
+	isConnected: boolean;
+	toolCount: number;
+	error?: string;
+}
+
+export interface MCPServerConnectionConfig {
+	name: string;
+	server: MCPServerConfig;
+	clientInfo?: Implementation;
+	capabilities?: ClientCapabilities;
+}
+
+export interface ToolCallParams {
+	name: string;
+	arguments: Record<string, unknown>;
+}
+
+export interface ToolExecutionResult {
+	content: string;
+	isError: boolean;
+}
+
+/**
+ * Progress tracking state for a specific operation
+ */
+export interface MCPProgressState {
+	progressToken: string | number;
+	serverName: string;
+	progress: number;
+	total?: number;
+	message?: string;
+	startTime: Date;
+	lastUpdate: Date;
+}
+
+/**
+ * Resource annotations for audience and priority hints
+ */
+export interface MCPResourceAnnotations {
+	audience?: ('user' | 'assistant')[];
+	priority?: number;
+	lastModified?: string;
+}
+
+/**
+ * Icon definition for resources
+ */
+export interface MCPResourceIcon {
+	src: string;
+	mimeType?: MimeTypeUnion;
+	sizes?: string[];
+	theme?: 'light' | 'dark';
+}
+
+/**
+ * A known resource that the server is capable of reading
+ */
+export interface MCPResource {
+	uri: string;
+	name: string;
+	title?: string;
+	description?: string;
+	mimeType?: MimeTypeUnion;
+	annotations?: MCPResourceAnnotations;
+	icons?: MCPResourceIcon[];
+	_meta?: Record<string, unknown>;
+}
+
+/**
+ * A template for dynamically generating resource URIs
+ */
+export interface MCPResourceTemplate {
+	uriTemplate: string;
+	name: string;
+	title?: string;
+	description?: string;
+	mimeType?: MimeTypeUnion;
+	annotations?: MCPResourceAnnotations;
+	icons?: MCPResourceIcon[];
+	_meta?: Record<string, unknown>;
+}
+
+/**
+ * Text content from a resource
+ */
+export interface MCPTextResourceContent {
+	uri: string;
+	mimeType?: MimeTypeUnion;
+	text: string;
+}
+
+/**
+ * Binary (blob) content from a resource
+ */
+export interface MCPBlobResourceContent {
+	uri: string;
+	mimeType?: MimeTypeUnion;
+	/** Base64-encoded binary data */
+	blob: string;
+}
+
+/**
+ * Union type for resource content
+ */
+export type MCPResourceContent = MCPTextResourceContent | MCPBlobResourceContent;
+
+/**
+ * Result from reading a resource
+ */
+export interface MCPReadResourceResult {
+	contents: MCPResourceContent[];
+	_meta?: Record<string, unknown>;
+}
+
+/**
+ * Resource information for display in UI
+ */
+export interface MCPResourceInfo {
+	uri: string;
+	name: string;
+	title?: string;
+	description?: string;
+	mimeType?: MimeTypeUnion;
+	serverName: string;
+	annotations?: MCPResourceAnnotations;
+	icons?: MCPResourceIcon[];
+}
+
+/**
+ * Resource template information for display in UI
+ */
+export interface MCPResourceTemplateInfo {
+	uriTemplate: string;
+	name: string;
+	title?: string;
+	description?: string;
+	mimeType?: MimeTypeUnion;
+	serverName: string;
+	annotations?: MCPResourceAnnotations;
+	icons?: MCPResourceIcon[];
+}
+
+/**
+ * Cached resource content with metadata
+ */
+export interface MCPCachedResource {
+	resource: MCPResourceInfo;
+	content: MCPResourceContent[];
+	fetchedAt: Date;
+	/** Whether this resource has an active subscription */
+	subscribed?: boolean;
+}
+
+/**
+ * Resource attachment for chat context
+ */
+export interface MCPResourceAttachment {
+	id: string;
+	resource: MCPResourceInfo;
+	content?: MCPResourceContent[];
+	loading?: boolean;
+	error?: string;
+}
+
+/**
+ * State for resource subscriptions
+ */
+export interface MCPResourceSubscription {
+	uri: string;
+	serverName: string;
+	subscribedAt: Date;
+	lastUpdate?: Date;
+}
+
+/**
+ * Aggregated resources state per server
+ */
+export interface MCPServerResources {
+	serverName: string;
+	resources: MCPResource[];
+	templates: MCPResourceTemplate[];
+	lastFetched?: Date;
+	loading: boolean;
+	error?: string;
+}
diff --git a/tools/server/webui/src/lib/types/settings.d.ts b/tools/server/webui/src/lib/types/settings.d.ts
index eca6d8c4dab..82fd034f904 100644
--- a/tools/server/webui/src/lib/types/settings.d.ts
+++ b/tools/server/webui/src/lib/types/settings.d.ts
@@ -1,7 +1,8 @@
 import type { SETTING_CONFIG_DEFAULT } from '$lib/constants/settings-config';
 import type { ChatMessagePromptProgress, ChatMessageTimings } from './chat';
-import type { ParameterSource, SyncableParameterType, SettingsFieldType } from '$lib/enums';
+import type { OpenAIToolDefinition } from './mcp';
 import type { DatabaseMessageExtra } from './database';
+import type { ParameterSource, SyncableParameterType, SettingsFieldType } from '$lib/enums';
 
 export type SettingsConfigValue = string | number | boolean;
 
@@ -22,6 +23,7 @@ export interface SettingsChatServiceOptions {
 	systemMessage?: string;
 	// Disable reasoning parsing (use 'none' instead of 'auto')
 	disableReasoningParsing?: boolean;
+	tools?: OpenAIToolDefinition[];
 	// Generation parameters
 	temperature?: number;
 	max_tokens?: number;
@@ -69,14 +71,18 @@ export type SettingsConfigType = typeof SETTING_CONFIG_DEFAULT & {
 	[key: string]: SettingsConfigValue;
 };
 
+/**
+ * Parameter synchronization types for server defaults and user overrides
+ * Note: ParameterSource and SyncableParameterType enums are imported from '$lib/enums'
+ */
 export type ParameterValue = string | number | boolean;
 export type ParameterRecord = Record<string, ParameterValue>;
 
 export interface ParameterInfo {
-	value: ParameterValue;
+	value: string | number | boolean;
 	source: ParameterSource;
-	serverDefault?: ParameterValue;
-	userOverride?: ParameterValue;
+	serverDefault?: string | number | boolean;
+	userOverride?: string | number | boolean;
 }
 
 export interface SyncableParameter {
diff --git a/tools/server/webui/src/lib/utils/agentic.ts b/tools/server/webui/src/lib/utils/agentic.ts
new file mode 100644
index 00000000000..a4fd7e02ec0
--- /dev/null
+++ b/tools/server/webui/src/lib/utils/agentic.ts
@@ -0,0 +1,276 @@
+import { AgenticSectionType } from '$lib/enums';
+import {
+	AGENTIC_TAGS,
+	AGENTIC_REGEX,
+	REASONING_TAGS,
+	TRIM_NEWLINES_REGEX
+} from '$lib/constants/agentic';
+
+/**
+ * Represents a parsed section of agentic content
+ */
+export interface AgenticSection {
+	type: AgenticSectionType;
+	content: string;
+	toolName?: string;
+	toolArgs?: string;
+	toolResult?: string;
+}
+
+/**
+ * Represents a segment of content that may contain reasoning blocks
+ */
+type ReasoningSegment = {
+	type:
+		| AgenticSectionType.TEXT
+		| AgenticSectionType.REASONING
+		| AgenticSectionType.REASONING_PENDING;
+	content: string;
+};
+
+/**
+ * Parses agentic content into structured sections
+ *
+ * Main parsing function that processes content containing:
+ * - Tool calls (completed, pending, or streaming)
+ * - Reasoning blocks (completed or streaming)
+ * - Regular text content
+ *
+ * The parser handles chronological display of agentic flow output, maintaining
+ * the order of operations and properly identifying different states of tool calls
+ * and reasoning blocks during streaming.
+ *
+ * @param rawContent - The raw content string to parse
+ * @returns Array of structured agentic sections ready for display
+ *
+ * @example
+ * ```typescript
+ * const content = "Some text <<<AGENTIC_TOOL_CALL>>>tool_name...";
+ * const sections = parseAgenticContent(content);
+ * // Returns: [{ type: 'text', content: 'Some text' }, { type: 'tool_call_streaming', ... }]
+ * ```
+ */
+export function parseAgenticContent(rawContent: string): AgenticSection[] {
+	if (!rawContent) return [];
+
+	const segments = splitReasoningSegments(rawContent);
+	const sections: AgenticSection[] = [];
+
+	for (const segment of segments) {
+		if (segment.type === AgenticSectionType.TEXT) {
+			sections.push(...parseToolCallContent(segment.content));
+			continue;
+		}
+
+		if (segment.type === AgenticSectionType.REASONING) {
+			if (segment.content.trim()) {
+				sections.push({ type: AgenticSectionType.REASONING, content: segment.content });
+			}
+			continue;
+		}
+
+		sections.push({
+			type: AgenticSectionType.REASONING_PENDING,
+			content: segment.content
+		});
+	}
+
+	return sections;
+}
+
+/**
+ * Parses content containing tool call markers
+ *
+ * Identifies and extracts tool calls from content, handling:
+ * - Completed tool calls with name, arguments, and results
+ * - Pending tool calls (execution in progress)
+ * - Streaming tool calls (arguments being received)
+ * - Early-stage tool calls (just started)
+ *
+ * @param rawContent - The raw content string to parse
+ * @returns Array of agentic sections representing tool calls and text
+ */
+function parseToolCallContent(rawContent: string): AgenticSection[] {
+	if (!rawContent) return [];
+
+	const sections: AgenticSection[] = [];
+
+	const completedToolCallRegex = new RegExp(AGENTIC_REGEX.COMPLETED_TOOL_CALL.source, 'g');
+
+	let lastIndex = 0;
+	let match;
+
+	while ((match = completedToolCallRegex.exec(rawContent)) !== null) {
+		if (match.index > lastIndex) {
+			const textBefore = rawContent.slice(lastIndex, match.index).trim();
+			if (textBefore) {
+				sections.push({ type: AgenticSectionType.TEXT, content: textBefore });
+			}
+		}
+
+		const toolName = match[1];
+		const toolArgs = match[2];
+		const toolResult = match[3].replace(TRIM_NEWLINES_REGEX, '');
+
+		sections.push({
+			type: AgenticSectionType.TOOL_CALL,
+			content: toolResult,
+			toolName,
+			toolArgs,
+			toolResult
+		});
+
+		lastIndex = match.index + match[0].length;
+	}
+
+	const remainingContent = rawContent.slice(lastIndex);
+
+	const pendingMatch = remainingContent.match(AGENTIC_REGEX.PENDING_TOOL_CALL);
+	const partialWithNameMatch = remainingContent.match(AGENTIC_REGEX.PARTIAL_WITH_NAME);
+	const earlyMatch = remainingContent.match(AGENTIC_REGEX.EARLY_MATCH);
+
+	if (pendingMatch) {
+		const pendingIndex = remainingContent.indexOf(AGENTIC_TAGS.TOOL_CALL_START);
+		if (pendingIndex > 0) {
+			const textBefore = remainingContent.slice(0, pendingIndex).trim();
+			if (textBefore) {
+				sections.push({ type: AgenticSectionType.TEXT, content: textBefore });
+			}
+		}
+
+		const toolName = pendingMatch[1];
+		const toolArgs = pendingMatch[2];
+		const streamingResult = (pendingMatch[3] || '').replace(TRIM_NEWLINES_REGEX, '');
+
+		sections.push({
+			type: AgenticSectionType.TOOL_CALL_PENDING,
+			content: streamingResult,
+			toolName,
+			toolArgs,
+			toolResult: streamingResult || undefined
+		});
+	} else if (partialWithNameMatch) {
+		const pendingIndex = remainingContent.indexOf(AGENTIC_TAGS.TOOL_CALL_START);
+		if (pendingIndex > 0) {
+			const textBefore = remainingContent.slice(0, pendingIndex).trim();
+			if (textBefore) {
+				sections.push({ type: AgenticSectionType.TEXT, content: textBefore });
+			}
+		}
+
+		const partialArgs = partialWithNameMatch[2] || '';
+
+		sections.push({
+			type: AgenticSectionType.TOOL_CALL_STREAMING,
+			content: '',
+			toolName: partialWithNameMatch[1],
+			toolArgs: partialArgs || undefined,
+			toolResult: undefined
+		});
+	} else if (earlyMatch) {
+		const pendingIndex = remainingContent.indexOf(AGENTIC_TAGS.TOOL_CALL_START);
+		if (pendingIndex > 0) {
+			const textBefore = remainingContent.slice(0, pendingIndex).trim();
+			if (textBefore) {
+				sections.push({ type: AgenticSectionType.TEXT, content: textBefore });
+			}
+		}
+
+		const nameMatch = earlyMatch[1]?.match(AGENTIC_REGEX.TOOL_NAME_EXTRACT);
+
+		sections.push({
+			type: AgenticSectionType.TOOL_CALL_STREAMING,
+			content: '',
+			toolName: nameMatch?.[1],
+			toolArgs: undefined,
+			toolResult: undefined
+		});
+	} else if (lastIndex < rawContent.length) {
+		let remainingText = rawContent.slice(lastIndex).trim();
+
+		const partialMarkerMatch = remainingText.match(AGENTIC_REGEX.PARTIAL_MARKER);
+		if (partialMarkerMatch) {
+			remainingText = remainingText.slice(0, partialMarkerMatch.index).trim();
+		}
+
+		if (remainingText) {
+			sections.push({ type: AgenticSectionType.TEXT, content: remainingText });
+		}
+	}
+
+	if (sections.length === 0 && rawContent.trim()) {
+		sections.push({ type: AgenticSectionType.TEXT, content: rawContent });
+	}
+
+	return sections;
+}
+
+/**
+ * Strips partial marker from text content
+ *
+ * Removes incomplete agentic markers (e.g., "<<<", "<<<AGENTIC") that may appear
+ * at the end of streaming content.
+ *
+ * @param text - The text content to process
+ * @returns Text with partial markers removed
+ */
+function stripPartialMarker(text: string): string {
+	const partialMarkerMatch = text.match(AGENTIC_REGEX.PARTIAL_MARKER);
+	if (partialMarkerMatch) {
+		return text.slice(0, partialMarkerMatch.index).trim();
+	}
+	return text;
+}
+
+/**
+ * Splits raw content into segments based on reasoning blocks
+ *
+ * Identifies and extracts reasoning content wrapped in REASONING_TAGS.START/END markers,
+ * separating it from regular text content. Handles both complete and incomplete
+ * (streaming) reasoning blocks.
+ *
+ * @param rawContent - The raw content string to parse
+ * @returns Array of reasoning segments with their types and content
+ */
+function splitReasoningSegments(rawContent: string): ReasoningSegment[] {
+	if (!rawContent) return [];
+
+	const segments: ReasoningSegment[] = [];
+	let cursor = 0;
+
+	while (cursor < rawContent.length) {
+		const startIndex = rawContent.indexOf(REASONING_TAGS.START, cursor);
+		if (startIndex === -1) {
+			const remainingText = rawContent.slice(cursor);
+			if (remainingText) {
+				segments.push({ type: AgenticSectionType.TEXT, content: remainingText });
+			}
+			break;
+		}
+
+		if (startIndex > cursor) {
+			const textBefore = rawContent.slice(cursor, startIndex);
+			if (textBefore) {
+				segments.push({ type: AgenticSectionType.TEXT, content: textBefore });
+			}
+		}
+
+		const contentStart = startIndex + REASONING_TAGS.START.length;
+		const endIndex = rawContent.indexOf(REASONING_TAGS.END, contentStart);
+
+		if (endIndex === -1) {
+			const pendingContent = rawContent.slice(contentStart);
+			segments.push({
+				type: AgenticSectionType.REASONING_PENDING,
+				content: stripPartialMarker(pendingContent)
+			});
+			break;
+		}
+
+		const reasoningContent = rawContent.slice(contentStart, endIndex);
+		segments.push({ type: AgenticSectionType.REASONING, content: reasoningContent });
+		cursor = endIndex + REASONING_TAGS.END.length;
+	}
+
+	return segments;
+}
diff --git a/tools/server/webui/src/lib/utils/attachment-display.ts b/tools/server/webui/src/lib/utils/attachment-display.ts
index 750aaa38d73..396ed6671df 100644
--- a/tools/server/webui/src/lib/utils/attachment-display.ts
+++ b/tools/server/webui/src/lib/utils/attachment-display.ts
@@ -1,9 +1,30 @@
-import { FileTypeCategory } from '$lib/enums';
+import { AttachmentType, FileTypeCategory, SpecialFileType } from '$lib/enums';
 import { getFileTypeCategory, getFileTypeCategoryByExtension, isImageFile } from '$lib/utils';
+import type {
+	AttachmentDisplayItemsOptions,
+	ChatUploadedFile,
+	DatabaseMessageExtra
+} from '$lib/types';
 
-export interface AttachmentDisplayItemsOptions {
-	uploadedFiles?: ChatUploadedFile[];
-	attachments?: DatabaseMessageExtra[];
+/**
+ * Check if an uploaded file is an MCP prompt
+ */
+function isMcpPromptUpload(file: ChatUploadedFile): boolean {
+	return file.type === SpecialFileType.MCP_PROMPT && !!file.mcpPrompt;
+}
+
+/**
+ * Check if an attachment is an MCP prompt
+ */
+function isMcpPromptAttachment(attachment: DatabaseMessageExtra): boolean {
+	return attachment.type === AttachmentType.MCP_PROMPT;
+}
+
+/**
+ * Check if an attachment is an MCP resource
+ */
+function isMcpResourceAttachment(attachment: DatabaseMessageExtra): boolean {
+	return attachment.type === AttachmentType.MCP_RESOURCE;
 }
 
 /**
@@ -37,6 +58,9 @@ export function getAttachmentDisplayItems(
 			size: file.size,
 			preview: file.preview,
 			isImage: getUploadedFileCategory(file) === FileTypeCategory.IMAGE,
+			isMcpPrompt: isMcpPromptUpload(file),
+			isLoading: file.isLoading,
+			loadError: file.loadError,
 			uploadedFile: file,
 			textContent: file.textContent
 		});
@@ -45,12 +69,16 @@ export function getAttachmentDisplayItems(
 	// Add stored attachments (ChatMessage)
 	for (const [index, attachment] of attachments.entries()) {
 		const isImage = isImageFile(attachment);
+		const isMcpPrompt = isMcpPromptAttachment(attachment);
+		const isMcpResource = isMcpResourceAttachment(attachment);
 
 		items.push({
 			id: `attachment-${index}`,
 			name: attachment.name,
 			preview: isImage && 'base64Url' in attachment ? attachment.base64Url : undefined,
 			isImage,
+			isMcpPrompt,
+			isMcpResource,
 			attachment,
 			attachmentIndex: index,
 			textContent: 'content' in attachment ? attachment.content : undefined
diff --git a/tools/server/webui/src/lib/utils/clipboard.ts b/tools/server/webui/src/lib/utils/clipboard.ts
index 940e64c8ff0..8fcb554b1a9 100644
--- a/tools/server/webui/src/lib/utils/clipboard.ts
+++ b/tools/server/webui/src/lib/utils/clipboard.ts
@@ -3,8 +3,14 @@ import { AttachmentType } from '$lib/enums';
 import type {
 	DatabaseMessageExtra,
 	DatabaseMessageExtraTextFile,
-	DatabaseMessageExtraLegacyContext
-} from '$lib/types/database';
+	DatabaseMessageExtraLegacyContext,
+	DatabaseMessageExtraMcpPrompt,
+	DatabaseMessageExtraMcpResource,
+	ClipboardTextAttachment,
+	ClipboardMcpPromptAttachment,
+	ClipboardAttachment,
+	ParsedClipboardContent
+} from '$lib/types';
 
 /**
  * Copy text to clipboard with toast notification
@@ -68,23 +74,6 @@ export async function copyCodeToClipboard(
 	return copyToClipboard(rawCode, successMessage, errorMessage);
 }
 
-/**
- * Format for text attachments when copied to clipboard
- */
-export interface ClipboardTextAttachment {
-	type: typeof AttachmentType.TEXT;
-	name: string;
-	content: string;
-}
-
-/**
- * Parsed result from clipboard content
- */
-export interface ParsedClipboardContent {
-	message: string;
-	textAttachments: ClipboardTextAttachment[];
-}
-
 /**
  * Formats a message with text attachments for clipboard copying.
  *
@@ -116,11 +105,20 @@ export function formatMessageForClipboard(
 	extras?: DatabaseMessageExtra[],
 	asPlainText: boolean = false
 ): string {
-	// Filter only text attachments (TEXT type and legacy CONTEXT type)
+	// Filter text-like attachments (TEXT, LEGACY_CONTEXT, MCP_PROMPT, and MCP_RESOURCE types)
 	const textAttachments =
 		extras?.filter(
-			(extra): extra is DatabaseMessageExtraTextFile | DatabaseMessageExtraLegacyContext =>
-				extra.type === AttachmentType.TEXT || extra.type === AttachmentType.LEGACY_CONTEXT
+			(
+				extra
+			): extra is
+				| DatabaseMessageExtraTextFile
+				| DatabaseMessageExtraLegacyContext
+				| DatabaseMessageExtraMcpPrompt
+				| DatabaseMessageExtraMcpResource =>
+				extra.type === AttachmentType.TEXT ||
+				extra.type === AttachmentType.LEGACY_CONTEXT ||
+				extra.type === AttachmentType.MCP_PROMPT ||
+				extra.type === AttachmentType.MCP_RESOURCE
 		) ?? [];
 
 	if (textAttachments.length === 0) {
@@ -135,11 +133,24 @@ export function formatMessageForClipboard(
 		return parts.join('\n\n');
 	}
 
-	const clipboardAttachments: ClipboardTextAttachment[] = textAttachments.map((att) => ({
-		type: AttachmentType.TEXT,
-		name: att.name,
-		content: att.content
-	}));
+	const clipboardAttachments: ClipboardAttachment[] = textAttachments.map((att) => {
+		if (att.type === AttachmentType.MCP_PROMPT) {
+			const mcpAtt = att as DatabaseMessageExtraMcpPrompt;
+			return {
+				type: AttachmentType.MCP_PROMPT,
+				name: mcpAtt.name,
+				serverName: mcpAtt.serverName,
+				promptName: mcpAtt.promptName,
+				content: mcpAtt.content,
+				arguments: mcpAtt.arguments
+			} as ClipboardMcpPromptAttachment;
+		}
+		return {
+			type: AttachmentType.TEXT,
+			name: att.name,
+			content: att.content
+		} as ClipboardTextAttachment;
+	});
 
 	return `${JSON.stringify(content)}\n${JSON.stringify(clipboardAttachments, null, 2)}`;
 }
@@ -154,7 +165,8 @@ export function formatMessageForClipboard(
 export function parseClipboardContent(clipboardText: string): ParsedClipboardContent {
 	const defaultResult: ParsedClipboardContent = {
 		message: clipboardText,
-		textAttachments: []
+		textAttachments: [],
+		mcpPromptAttachments: []
 	};
 
 	if (!clipboardText.startsWith('"')) {
@@ -196,17 +208,28 @@ export function parseClipboardContent(clipboardText: string): ParsedClipboardCon
 		if (!remainingPart || !remainingPart.startsWith('[')) {
 			return {
 				message,
-				textAttachments: []
+				textAttachments: [],
+				mcpPromptAttachments: []
 			};
 		}
 
 		const attachments = JSON.parse(remainingPart) as unknown[];
 
-		const validAttachments: ClipboardTextAttachment[] = [];
+		const validTextAttachments: ClipboardTextAttachment[] = [];
+		const validMcpPromptAttachments: ClipboardMcpPromptAttachment[] = [];
 
 		for (const att of attachments) {
-			if (isValidTextAttachment(att)) {
-				validAttachments.push({
+			if (isValidMcpPromptAttachment(att)) {
+				validMcpPromptAttachments.push({
+					type: AttachmentType.MCP_PROMPT,
+					name: att.name,
+					serverName: att.serverName,
+					promptName: att.promptName,
+					content: att.content,
+					arguments: att.arguments
+				});
+			} else if (isValidTextAttachment(att)) {
+				validTextAttachments.push({
 					type: AttachmentType.TEXT,
 					name: att.name,
 					content: att.content
@@ -216,13 +239,42 @@ export function parseClipboardContent(clipboardText: string): ParsedClipboardCon
 
 		return {
 			message,
-			textAttachments: validAttachments
+			textAttachments: validTextAttachments,
+			mcpPromptAttachments: validMcpPromptAttachments
 		};
 	} catch {
 		return defaultResult;
 	}
 }
 
+/**
+ * Type guard to validate an MCP prompt attachment object
+ * @param obj The object to validate
+ * @returns true if the object is a valid MCP prompt attachment
+ */
+function isValidMcpPromptAttachment(obj: unknown): obj is {
+	type: string;
+	name: string;
+	serverName: string;
+	promptName: string;
+	content: string;
+	arguments?: Record<string, string>;
+} {
+	if (typeof obj !== 'object' || obj === null) {
+		return false;
+	}
+
+	const record = obj as Record<string, unknown>;
+
+	return (
+		(record.type === AttachmentType.MCP_PROMPT || record.type === 'MCP_PROMPT') &&
+		typeof record.name === 'string' &&
+		typeof record.serverName === 'string' &&
+		typeof record.promptName === 'string' &&
+		typeof record.content === 'string'
+	);
+}
+
 /**
  * Type guard to validate a text attachment object
  * @param obj The object to validate
@@ -255,5 +307,5 @@ export function hasClipboardAttachments(clipboardText: string): boolean {
 	}
 
 	const parsed = parseClipboardContent(clipboardText);
-	return parsed.textAttachments.length > 0;
+	return parsed.textAttachments.length > 0 || parsed.mcpPromptAttachments.length > 0;
 }
diff --git a/tools/server/webui/src/lib/utils/convert-files-to-extra.ts b/tools/server/webui/src/lib/utils/convert-files-to-extra.ts
index 6eb50f6dce4..15074e919a2 100644
--- a/tools/server/webui/src/lib/utils/convert-files-to-extra.ts
+++ b/tools/server/webui/src/lib/utils/convert-files-to-extra.ts
@@ -1,12 +1,13 @@
 import { convertPDFToImage, convertPDFToText } from './pdf-processing';
 import { isSvgMimeType, svgBase64UrlToPngDataURL } from './svg-to-png';
 import { isWebpMimeType, webpBase64UrlToPngDataURL } from './webp-to-png';
-import { FileTypeCategory, AttachmentType } from '$lib/enums';
+import { FileTypeCategory, AttachmentType, SpecialFileType } from '$lib/enums';
 import { config, settingsStore } from '$lib/stores/settings.svelte';
 import { modelsStore } from '$lib/stores/models.svelte';
 import { getFileTypeCategory } from '$lib/utils';
 import { readFileAsText, isLikelyTextFile } from './text-files';
 import { toast } from 'svelte-sonner';
+import type { FileProcessingResult, ChatUploadedFile, DatabaseMessageExtra } from '$lib/types';
 
 function readFileAsBase64(file: File): Promise<string> {
 	return new Promise((resolve, reject) => {
@@ -25,11 +26,6 @@ function readFileAsBase64(file: File): Promise<string> {
 	});
 }
 
-export interface FileProcessingResult {
-	extras: DatabaseMessageExtra[];
-	emptyFiles: string[];
-}
-
 export async function parseFilesToMessageExtras(
 	files: ChatUploadedFile[],
 	activeModelId?: string
@@ -38,6 +34,18 @@ export async function parseFilesToMessageExtras(
 	const emptyFiles: string[] = [];
 
 	for (const file of files) {
+		if (file.type === SpecialFileType.MCP_PROMPT && file.mcpPrompt) {
+			extras.push({
+				type: AttachmentType.MCP_PROMPT,
+				name: file.name,
+				serverName: file.mcpPrompt.serverName,
+				promptName: file.mcpPrompt.promptName,
+				content: file.textContent ?? '',
+				arguments: file.mcpPrompt.arguments
+			});
+			continue;
+		}
+
 		if (getFileTypeCategory(file.type) === FileTypeCategory.IMAGE) {
 			if (file.preview) {
 				let base64Url = file.preview;
diff --git a/tools/server/webui/src/lib/utils/cors-proxy.ts b/tools/server/webui/src/lib/utils/cors-proxy.ts
new file mode 100644
index 00000000000..e09d31d0fff
--- /dev/null
+++ b/tools/server/webui/src/lib/utils/cors-proxy.ts
@@ -0,0 +1,28 @@
+/**
+ * CORS Proxy utility for routing requests through llama-server's CORS proxy.
+ */
+
+import { base } from '$app/paths';
+
+/**
+ * Build a proxied URL that routes through llama-server's CORS proxy.
+ * @param targetUrl - The original URL to proxy
+ * @returns URL pointing to the CORS proxy with target encoded
+ */
+export function buildProxiedUrl(targetUrl: string): URL {
+	const proxyPath = `${base}/cors-proxy`;
+	const proxyUrl = new URL(proxyPath, window.location.origin);
+
+	proxyUrl.searchParams.set('url', targetUrl);
+
+	return proxyUrl;
+}
+
+/**
+ * Get a proxied URL string for use in fetch requests.
+ * @param targetUrl - The original URL to proxy
+ * @returns Proxied URL as string
+ */
+export function getProxiedUrlString(targetUrl: string): string {
+	return buildProxiedUrl(targetUrl).href;
+}
diff --git a/tools/server/webui/src/lib/utils/favicon.ts b/tools/server/webui/src/lib/utils/favicon.ts
new file mode 100644
index 00000000000..3b4cd48b4db
--- /dev/null
+++ b/tools/server/webui/src/lib/utils/favicon.ts
@@ -0,0 +1,26 @@
+/**
+ * Favicon utility functions for extracting favicons from URLs.
+ */
+
+import { getProxiedUrlString } from './cors-proxy';
+import { GOOGLE_FAVICON_BASE_URL, DEFAULT_FAVICON_SIZE } from '$lib/constants/favicon';
+
+/**
+ * Gets a favicon URL for a given URL using Google's favicon service.
+ * Returns null if the URL is invalid.
+ *
+ * @param urlString - The URL to get the favicon for
+ * @returns The favicon URL or null if invalid
+ */
+export function getFaviconUrl(urlString: string): string | null {
+	try {
+		const url = new URL(urlString);
+		const hostnameParts = url.hostname.split('.');
+		const rootDomain = hostnameParts.length >= 2 ? hostnameParts.slice(-2).join('.') : url.hostname;
+
+		const googleFaviconUrl = `${GOOGLE_FAVICON_BASE_URL}?domain=${rootDomain}&sz=${DEFAULT_FAVICON_SIZE}`;
+		return getProxiedUrlString(googleFaviconUrl);
+	} catch {
+		return null;
+	}
+}
diff --git a/tools/server/webui/src/lib/utils/formatters.ts b/tools/server/webui/src/lib/utils/formatters.ts
index bdf2ca26fd5..37a8a3358cf 100644
--- a/tools/server/webui/src/lib/utils/formatters.ts
+++ b/tools/server/webui/src/lib/utils/formatters.ts
@@ -1,3 +1,11 @@
+import {
+	MS_PER_SECOND,
+	SECONDS_PER_MINUTE,
+	SECONDS_PER_HOUR,
+	SHORT_DURATION_THRESHOLD,
+	MEDIUM_DURATION_THRESHOLD
+} from '$lib/constants/formatters';
+
 /**
  * Formats file size in bytes to human readable format
  * Supports Bytes, KB, MB, and GB
@@ -93,19 +101,19 @@ export function formatTime(date: Date): string {
 export function formatPerformanceTime(ms: number): string {
 	if (ms < 0) return '0s';
 
-	const totalSeconds = ms / 1000;
+	const totalSeconds = ms / MS_PER_SECOND;
 
-	if (totalSeconds < 1) {
+	if (totalSeconds < SHORT_DURATION_THRESHOLD) {
 		return `${totalSeconds.toFixed(1)}s`;
 	}
 
-	if (totalSeconds < 10) {
+	if (totalSeconds < MEDIUM_DURATION_THRESHOLD) {
 		return `${totalSeconds.toFixed(1)}s`;
 	}
 
-	const hours = Math.floor(totalSeconds / 3600);
-	const minutes = Math.floor((totalSeconds % 3600) / 60);
-	const seconds = Math.floor(totalSeconds % 60);
+	const hours = Math.floor(totalSeconds / SECONDS_PER_HOUR);
+	const minutes = Math.floor((totalSeconds % SECONDS_PER_HOUR) / SECONDS_PER_MINUTE);
+	const seconds = Math.floor(totalSeconds % SECONDS_PER_MINUTE);
 
 	const parts: string[] = [];
 
@@ -123,3 +131,23 @@ export function formatPerformanceTime(ms: number): string {
 
 	return parts.join(' ');
 }
+
+/**
+ * Formats attachment content for API requests with consistent header style.
+ * Used when converting message attachments to text content parts.
+ *
+ * @param label - Type label (e.g., 'File', 'PDF File', 'MCP Prompt')
+ * @param name - File or attachment name
+ * @param content - The actual content to include
+ * @param extra - Optional extra info to append to name (e.g., server name for MCP)
+ * @returns Formatted string with header and content
+ */
+export function formatAttachmentText(
+	label: string,
+	name: string,
+	content: string,
+	extra?: string
+): string {
+	const header = extra ? `${name} (${extra})` : name;
+	return `\n\n--- ${label}: ${header} ---\n${content}`;
+}
diff --git a/tools/server/webui/src/lib/utils/headers.ts b/tools/server/webui/src/lib/utils/headers.ts
new file mode 100644
index 00000000000..0b907b83003
--- /dev/null
+++ b/tools/server/webui/src/lib/utils/headers.ts
@@ -0,0 +1,44 @@
+/**
+ * Header utilities for parsing and serializing HTTP headers.
+ * Generic utilities not specific to MCP.
+ */
+
+/**
+ * Parses a JSON string of headers into an array of key-value pairs.
+ * Returns empty array if the JSON is invalid or empty.
+ */
+export function parseHeadersToArray(headersJson: string): { key: string; value: string }[] {
+	if (!headersJson?.trim()) return [];
+
+	try {
+		const parsed = JSON.parse(headersJson);
+		if (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)) {
+			return Object.entries(parsed).map(([key, value]) => ({
+				key,
+				value: String(value)
+			}));
+		}
+	} catch {
+		return [];
+	}
+
+	return [];
+}
+
+/**
+ * Serializes an array of header key-value pairs to a JSON string.
+ * Filters out pairs with empty keys and returns empty string if no valid pairs.
+ */
+export function serializeHeaders(pairs: { key: string; value: string }[]): string {
+	const validPairs = pairs.filter((p) => p.key.trim());
+
+	if (validPairs.length === 0) return '';
+
+	const obj: Record<string, string> = {};
+
+	for (const pair of validPairs) {
+		obj[pair.key.trim()] = pair.value;
+	}
+
+	return JSON.stringify(obj);
+}
diff --git a/tools/server/webui/src/lib/utils/index.ts b/tools/server/webui/src/lib/utils/index.ts
index 5eb2bbaea1e..19eddf3ee79 100644
--- a/tools/server/webui/src/lib/utils/index.ts
+++ b/tools/server/webui/src/lib/utils/index.ts
@@ -13,10 +13,7 @@ export { apiFetch, apiFetchWithParams, apiPost, type ApiFetchOptions } from './a
 export { validateApiKey } from './api-key-validation';
 
 // Attachment utilities
-export {
-	getAttachmentDisplayItems,
-	type AttachmentDisplayItemsOptions
-} from './attachment-display';
+export { getAttachmentDisplayItems } from './attachment-display';
 export { isTextFile, isImageFile, isPdfFile, isAudioFile } from './attachment-type';
 
 // Textarea utilities
@@ -46,9 +43,7 @@ export {
 	copyCodeToClipboard,
 	formatMessageForClipboard,
 	parseClipboardContent,
-	hasClipboardAttachments,
-	type ClipboardTextAttachment,
-	type ParsedClipboardContent
+	hasClipboardAttachments
 } from './clipboard';
 
 // File preview utilities
@@ -64,7 +59,15 @@ export {
 } from './file-type';
 
 // Formatting utilities
-export { formatFileSize, formatParameters, formatNumber } from './formatters';
+export {
+	formatFileSize,
+	formatParameters,
+	formatNumber,
+	formatJsonPretty,
+	formatTime,
+	formatPerformanceTime,
+	formatAttachmentText
+} from './formatters';
 
 // IME utilities
 export { isIMEComposing } from './is-ime-composing';
@@ -94,5 +97,50 @@ export { getLanguageFromFilename } from './syntax-highlight-language';
 // Text file utilities
 export { isTextFileByName, readFileAsText, isLikelyTextFile } from './text-files';
 
+// Debounce utilities
+export { debounce } from './debounce';
+
 // Image error fallback utilities
 export { getImageErrorFallbackHtml } from './image-error-fallback';
+
+// MCP utilities
+export {
+	detectMcpTransportFromUrl,
+	parseMcpServerSettings,
+	getMcpLogLevelIcon,
+	getMcpLogLevelClass,
+	isImageMimeType,
+	parseResourcePath,
+	getDisplayName,
+	getResourceDisplayName,
+	isCodeResource,
+	isImageResource,
+	getResourceIcon,
+	getResourceTextContent,
+	getResourceBlobContent,
+	downloadResourceContent
+} from './mcp';
+
+// Data URL utilities
+export { createBase64DataUrl } from './data-url';
+
+// Header utilities
+export { parseHeadersToArray, serializeHeaders } from './headers';
+
+// Favicon utilities
+export { getFaviconUrl } from './favicon';
+
+// Agentic content parsing utilities
+export { parseAgenticContent, type AgenticSection } from './agentic';
+
+// Cache utilities
+export { TTLCache, ReactiveTTLMap, type TTLCacheOptions } from './cache-ttl';
+
+// Abort signal utilities
+export {
+	throwIfAborted,
+	isAbortError,
+	createLinkedController,
+	createTimeoutSignal,
+	withAbortSignal
+} from './abort';
diff --git a/tools/server/webui/src/lib/utils/mcp.ts b/tools/server/webui/src/lib/utils/mcp.ts
new file mode 100644
index 00000000000..a1d049c19a1
--- /dev/null
+++ b/tools/server/webui/src/lib/utils/mcp.ts
@@ -0,0 +1,300 @@
+import type { MCPServerSettingsEntry, MCPResourceContent, MCPResourceInfo } from '$lib/types';
+import {
+	MCPTransportType,
+	MCPLogLevel,
+	UrlPrefix,
+	MimeTypePrefix,
+	MimeTypeIncludes,
+	UriPattern,
+	MimeTypeText
+} from '$lib/enums';
+import { DEFAULT_MCP_CONFIG, MCP_SERVER_ID_PREFIX } from '$lib/constants/mcp';
+import {
+	IMAGE_FILE_EXTENSION_REGEX,
+	CODE_FILE_EXTENSION_REGEX,
+	TEXT_FILE_EXTENSION_REGEX,
+	PROTOCOL_PREFIX_REGEX,
+	FILE_EXTENSION_REGEX,
+	DISPLAY_NAME_SEPARATOR_REGEX
+} from '$lib/constants/mcp-resource';
+import {
+	Database,
+	File,
+	FileText,
+	Image,
+	Code,
+	Info,
+	AlertTriangle,
+	XCircle
+} from '@lucide/svelte';
+import type { Component } from 'svelte';
+import type { MimeTypeUnion } from '$lib/types/common';
+
+/**
+ * Detects the MCP transport type from a URL.
+ * WebSocket URLs (ws:// or wss://) use 'websocket', others use 'streamable_http'.
+ */
+export function detectMcpTransportFromUrl(url: string): MCPTransportType {
+	const normalized = url.trim().toLowerCase();
+
+	return normalized.startsWith(UrlPrefix.WEBSOCKET) ||
+		normalized.startsWith(UrlPrefix.WEBSOCKET_SECURE)
+		? MCPTransportType.WEBSOCKET
+		: MCPTransportType.STREAMABLE_HTTP;
+}
+
+/**
+ * Parses MCP server settings from a JSON string or array.
+ * requestTimeoutSeconds is not user-configurable in the UI, so we always use the default value.
+ * @param rawServers - The raw servers to parse
+ * @returns An empty array if the input is invalid.
+ */
+export function parseMcpServerSettings(rawServers: unknown): MCPServerSettingsEntry[] {
+	if (!rawServers) return [];
+
+	let parsed: unknown;
+
+	if (typeof rawServers === 'string') {
+		const trimmed = rawServers.trim();
+		if (!trimmed) return [];
+
+		try {
+			parsed = JSON.parse(trimmed);
+		} catch (error) {
+			console.warn('[MCP] Failed to parse mcpServers JSON, ignoring value:', error);
+
+			return [];
+		}
+	} else {
+		parsed = rawServers;
+	}
+
+	if (!Array.isArray(parsed)) return [];
+
+	return parsed.map((entry, index) => {
+		const url = typeof entry?.url === 'string' ? entry.url.trim() : '';
+		const headers = typeof entry?.headers === 'string' ? entry.headers.trim() : undefined;
+		const id =
+			typeof (entry as { id?: unknown })?.id === 'string' && (entry as { id?: string }).id?.trim()
+				? (entry as { id: string }).id.trim()
+				: `${MCP_SERVER_ID_PREFIX}-${index + 1}`;
+
+		return {
+			id,
+			enabled: Boolean((entry as { enabled?: unknown })?.enabled),
+			url,
+			name: (entry as { name?: string })?.name,
+			requestTimeoutSeconds: DEFAULT_MCP_CONFIG.requestTimeoutSeconds,
+			headers: headers || undefined,
+			useProxy: Boolean((entry as { useProxy?: unknown })?.useProxy)
+		} satisfies MCPServerSettingsEntry;
+	});
+}
+
+/**
+ * Get the appropriate icon component for a log level
+ *
+ * @param level - MCP log level
+ * @returns Lucide icon component
+ */
+export function getMcpLogLevelIcon(level: MCPLogLevel): Component {
+	switch (level) {
+		case MCPLogLevel.ERROR:
+			return XCircle;
+		case MCPLogLevel.WARN:
+			return AlertTriangle;
+		default:
+			return Info;
+	}
+}
+
+/**
+ * Get the appropriate CSS class for a log level
+ *
+ * @param level - MCP log level
+ * @returns Tailwind CSS class string
+ */
+export function getMcpLogLevelClass(level: MCPLogLevel): string {
+	switch (level) {
+		case MCPLogLevel.ERROR:
+			return 'text-destructive';
+		case MCPLogLevel.WARN:
+			return 'text-yellow-600 dark:text-yellow-500';
+		default:
+			return 'text-muted-foreground';
+	}
+}
+
+/**
+ * Check if a MIME type represents an image.
+ *
+ * @param mimeType - The MIME type to check
+ * @returns True if the MIME type starts with 'image/'
+ */
+export function isImageMimeType(mimeType?: MimeTypeUnion): boolean {
+	return mimeType?.startsWith(MimeTypePrefix.IMAGE) ?? false;
+}
+
+/**
+ * Parse a resource URI into path segments, stripping the protocol prefix.
+ *
+ * @param uri - The resource URI to parse
+ * @returns Array of non-empty path segments
+ */
+export function parseResourcePath(uri: string): string[] {
+	try {
+		const withoutProtocol = uri.replace(PROTOCOL_PREFIX_REGEX, '');
+		return withoutProtocol.split('/').filter((p) => p.length > 0);
+	} catch {
+		return [uri];
+	}
+}
+
+/**
+ * Convert a path part into a human-readable display name.
+ * Strips file extensions and converts kebab-case/snake_case to Title Case.
+ *
+ * @param pathPart - The path segment to convert
+ * @returns Human-readable display name
+ */
+export function getDisplayName(pathPart: string): string {
+	const withoutExt = pathPart.replace(FILE_EXTENSION_REGEX, '');
+	return withoutExt
+		.split(DISPLAY_NAME_SEPARATOR_REGEX)
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+		.join(' ');
+}
+
+/**
+ * Get the display name from a resource, extracting the last path segment from the URI.
+ *
+ * @param resource - The MCP resource info
+ * @returns Display name string
+ */
+export function getResourceDisplayName(resource: MCPResourceInfo): string {
+	try {
+		const parts = parseResourcePath(resource.uri);
+		return parts[parts.length - 1] || resource.name || resource.uri;
+	} catch {
+		return resource.name || resource.uri;
+	}
+}
+
+/**
+ * Determine if a MIME type and/or URI represents code content.
+ *
+ * @param mimeType - Optional MIME type string
+ * @param uri - Optional URI string
+ * @returns True if the content is code
+ */
+export function isCodeResource(mimeType?: MimeTypeUnion, uri?: string): boolean {
+	const mime = mimeType?.toLowerCase() || '';
+	const u = uri?.toLowerCase() || '';
+	return (
+		mime.includes(MimeTypeIncludes.JSON) ||
+		mime.includes(MimeTypeIncludes.JAVASCRIPT) ||
+		mime.includes(MimeTypeIncludes.TYPESCRIPT) ||
+		CODE_FILE_EXTENSION_REGEX.test(u)
+	);
+}
+
+/**
+ * Determine if a MIME type and/or URI represents image content.
+ *
+ * @param mimeType - Optional MIME type string
+ * @param uri - Optional URI string
+ * @returns True if the content is an image
+ */
+export function isImageResource(mimeType?: MimeTypeUnion, uri?: string): boolean {
+	const mime = mimeType?.toLowerCase() || '';
+	const u = uri?.toLowerCase() || '';
+	return mime.startsWith(MimeTypePrefix.IMAGE) || IMAGE_FILE_EXTENSION_REGEX.test(u);
+}
+
+/**
+ * Get the appropriate Lucide icon component for an MCP resource based on its MIME type and URI.
+ *
+ * @param mimeType - Optional MIME type of the resource
+ * @param uri - Optional URI of the resource
+ * @returns Lucide icon component
+ */
+export function getResourceIcon(mimeType?: MimeTypeUnion, uri?: string): Component {
+	const mime = mimeType?.toLowerCase() || '';
+	const u = uri?.toLowerCase() || '';
+
+	if (mime.startsWith(MimeTypePrefix.IMAGE) || IMAGE_FILE_EXTENSION_REGEX.test(u)) {
+		return Image;
+	}
+
+	if (
+		mime.includes(MimeTypeIncludes.JSON) ||
+		mime.includes(MimeTypeIncludes.JAVASCRIPT) ||
+		mime.includes(MimeTypeIncludes.TYPESCRIPT) ||
+		CODE_FILE_EXTENSION_REGEX.test(u)
+	) {
+		return Code;
+	}
+
+	if (mime.includes(MimeTypePrefix.TEXT) || TEXT_FILE_EXTENSION_REGEX.test(u)) {
+		return FileText;
+	}
+
+	if (u.includes(UriPattern.DATABASE_KEYWORD) || u.includes(UriPattern.DATABASE_SCHEME)) {
+		return Database;
+	}
+
+	return File;
+}
+
+/**
+ * Extract text content from MCP resource content array.
+ *
+ * @param content - Array of MCP resource content items
+ * @returns Joined text content string
+ */
+export function getResourceTextContent(content: MCPResourceContent[] | null | undefined): string {
+	if (!content) return '';
+	return content
+		.filter((c): c is { uri: string; mimeType?: MimeTypeUnion; text: string } => 'text' in c)
+		.map((c) => c.text)
+		.join('\n\n');
+}
+
+/**
+ * Extract blob content from MCP resource content array.
+ *
+ * @param content - Array of MCP resource content items
+ * @returns Array of blob content items
+ */
+export function getResourceBlobContent(
+	content: MCPResourceContent[] | null | undefined
+): Array<{ uri: string; mimeType?: MimeTypeUnion; blob: string }> {
+	if (!content) return [];
+
+	return content.filter(
+		(c): c is { uri: string; mimeType?: MimeTypeUnion; blob: string } => 'blob' in c
+	);
+}
+
+/**
+ * Trigger a file download from text content.
+ *
+ * @param text - The text content to download
+ * @param mimeType - MIME type for the blob
+ * @param filename - Suggested filename
+ */
+export function downloadResourceContent(
+	text: string,
+	mimeType: MimeTypeUnion = MimeTypeText.PLAIN,
+	filename: string = 'resource.txt'
+): void {
+	const blob = new Blob([text], { type: mimeType });
+	const url = URL.createObjectURL(blob);
+	const a = document.createElement('a');
+	a.href = url;
+	a.download = filename;
+	document.body.appendChild(a);
+	a.click();
+	document.body.removeChild(a);
+	URL.revokeObjectURL(url);
+}
diff --git a/tools/server/webui/src/routes/+layout.svelte b/tools/server/webui/src/routes/+layout.svelte
index 095827b9ca5..161a9b6f2ee 100644
--- a/tools/server/webui/src/routes/+layout.svelte
+++ b/tools/server/webui/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import '../app.css';
 	import { base } from '$app/paths';
+	import { browser } from '$app/environment';
 	import { page } from '$app/state';
 	import { untrack } from 'svelte';
 	import { ChatSidebar, DialogConversationTitleUpdate } from '$lib/components/app';
@@ -14,7 +15,9 @@
 	import { Toaster } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
 	import { modelsStore } from '$lib/stores/models.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
 	import { TOOLTIP_DELAY_DURATION } from '$lib/constants/tooltip-config';
+	import { KeyboardKey } from '$lib/enums';
 	import { IsMobile } from '$lib/hooks/is-mobile.svelte';
 
 	let { children } = $props();
@@ -43,7 +46,7 @@
 	function handleKeydown(event: KeyboardEvent) {
 		const isCtrlOrCmd = event.ctrlKey || event.metaKey;
 
-		if (isCtrlOrCmd && event.key === 'k') {
+		if (isCtrlOrCmd && event.key === KeyboardKey.K_LOWER) {
 			event.preventDefault();
 			if (chatSidebar?.activateSearchMode) {
 				chatSidebar.activateSearchMode();
@@ -51,12 +54,12 @@
 			}
 		}
 
-		if (isCtrlOrCmd && event.shiftKey && event.key === 'O') {
+		if (isCtrlOrCmd && event.shiftKey && event.key === KeyboardKey.O_UPPER) {
 			event.preventDefault();
 			goto('?new_chat=true#/');
 		}
 
-		if (event.shiftKey && isCtrlOrCmd && event.key === 'E') {
+		if (event.shiftKey && isCtrlOrCmd && event.key === KeyboardKey.E_UPPER) {
 			event.preventDefault();
 
 			if (chatSidebar?.editActiveConversation) {
@@ -141,6 +144,26 @@
 		}
 	});
 
+	// Background MCP server health checks on app load
+	// Fetch enabled servers from settings and run health checks in background
+	$effect(() => {
+		if (!browser) return;
+
+		const mcpServers = mcpStore.getServers();
+
+		// Only run health checks if we have enabled servers with URLs
+		const enabledServers = mcpServers.filter((s) => s.enabled && s.url.trim());
+
+		if (enabledServers.length > 0) {
+			untrack(() => {
+				// Run health checks in background (don't await)
+				mcpStore.runHealthChecksForServers(enabledServers, false).catch((error) => {
+					console.warn('[layout] MCP health checks failed:', error);
+				});
+			});
+		}
+	});
+
 	// Monitor API key changes and redirect to error page if removed or changed when required
 	$effect(() => {
 		const apiKey = config().apiKey;