diff --git a/.gitattributes b/.gitattributes
index 69665dd51836e13b11953282858eb84c7accaf23..e75642f1fffc0a1b72df20d223ad14cd21388898 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -65,3 +65,5 @@ backend/llama.cpp/tools/mtmd/test-1.jpeg filter=lfs diff=lfs merge=lfs -text
 backend/llama.cpp/tools/mtmd/test-2.mp3 filter=lfs diff=lfs merge=lfs -text
 backend/llama.cpp/tools/mtmd/test-3.mp4 filter=lfs diff=lfs merge=lfs -text
 backend/llama.cpp/tools/mtmd/tests/test-1-positive.png filter=lfs diff=lfs merge=lfs -text
+backend/llama.cpp/tools/ui/tests/stories/fixtures/assets/beautiful-flowers-lotus.webp filter=lfs diff=lfs merge=lfs -text
+backend/llama.cpp/tools/ui/tests/stories/fixtures/assets/example.pdf filter=lfs diff=lfs merge=lfs -text
diff --git a/backend/llama.cpp/tools/ui/README.md b/backend/llama.cpp/tools/ui/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..1b99ebbfe80631d8374f8003c4e4ef11dd804403
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/README.md
@@ -0,0 +1,688 @@
+# llama-ui
+
+A modern, feature-rich web interface for llama-server built with SvelteKit. This UI provides an intuitive chat interface with advanced file handling, conversation management, and comprehensive model interaction capabilities.
+
+Llama UI supports two server operation modes:
+
+- **MODEL mode** - Single model operation (standard llama-server)
+- **ROUTER mode** - Multi-model operation with dynamic model loading/unloading
+
+---
+
+## Table of Contents
+
+- [Features](#features)
+- [Getting Started](#getting-started)
+- [Tech Stack](#tech-stack)
+- [Build Pipeline](#build-pipeline)
+- [Architecture](#architecture)
+- [Data Flows](#data-flows)
+- [Architectural Patterns](#architectural-patterns)
+- [Testing](#testing)
+
+---
+
+## Features
+
+### Chat Interface
+
+- **Streaming responses** with real-time updates
+- **Reasoning content** - Support for models with thinking/reasoning blocks
+- **Dark/light theme** with system preference detection
+- **Responsive design** for desktop and mobile
+
+### File Attachments
+
+- **Images** - JPEG, PNG, GIF, WebP, SVG (with PNG conversion)
+- **Documents** - PDF (text extraction or image conversion for vision models)
+- **Audio** - MP3, WAV for audio-capable models
+- **Text files** - Source code, markdown, and other text formats
+- **Drag-and-drop** and paste support with rich previews
+
+### Conversation Management
+
+- **Branching** - Branch messages conversations at any point by editing messages or regenerating responses, navigate between branches
+- **Regeneration** - Regenerate responses with optional model switching (ROUTER mode)
+- **Import/Export** - JSON format for backup and sharing
+- **Search** - Find conversations by title or content
+
+### Advanced Rendering
+
+- **Syntax highlighting** - Code blocks with language detection
+- **Math formulas** - KaTeX rendering for LaTeX expressions
+- **Markdown** - Full GFM support with tables, lists, and more
+
+### Multi-Model Support (ROUTER mode)
+
+- **Model selector** with Loaded/Available groups
+- **Automatic loading** - Models load on selection
+- **Modality validation** - Prevents sending images to non-vision models
+- **LRU unloading** - Server auto-manages model cache
+
+### Keyboard Shortcuts
+
+| Shortcut           | Action               |
+| ------------------ | -------------------- |
+| `Shift+Ctrl/Cmd+O` | New chat             |
+| `Shift+Ctrl/Cmd+E` | Edit conversation    |
+| `Shift+Ctrl/Cmd+D` | Delete conversation  |
+| `Ctrl/Cmd+K`       | Search conversations |
+| `Ctrl/Cmd+B`       | Toggle sidebar       |
+
+### Developer Experience
+
+- **Request tracking** - Monitor token generation with `/slots` endpoint
+- **Storybook** - Component library with visual testing
+- **Hot reload** - Instant updates during development
+
+---
+
+## Getting Started
+
+### Prerequisites
+
+- **Node.js** 18+ (20+ recommended)
+- **npm** 9+
+- **llama-server** running locally (for API access)
+
+### 1. Install Dependencies
+
+```bash
+cd tools/ui
+npm install
+```
+
+### 2. Start llama-server
+
+In a separate terminal, start the backend server:
+
+```bash
+# Single model (MODEL mode)
+./llama-server -m model.gguf
+
+# Multi-model (ROUTER mode)
+./llama-server --models-dir /path/to/models
+```
+
+### 3. Start Development Servers
+
+```bash
+npm run dev
+```
+
+This starts:
+
+- **Vite dev server** at `http://localhost:5173` - The main UI frontend app
+- **Storybook** at `http://localhost:6006` - Component documentation
+
+The Vite dev server proxies API requests to `SERVER_ORIGIN` (with fallback to default llama-server `8080` port):
+
+```typescript
+// vite.config.ts proxy configuration
+proxy: {
+	'/v1': SERVER_ORIGIN,
+	'/props': SERVER_ORIGIN,
+	'/models': SERVER_ORIGIN,
+	'/tools': SERVER_ORIGIN,
+	'/slots': SERVER_ORIGIN,
+	'/cors-proxy': SERVER_ORIGIN
+},
+```
+
+### Development Workflow
+
+1. Open `http://localhost:5173` in your browser
+2. Make changes to `.svelte`, `.ts`, or `.css` files
+3. Changes hot-reload instantly
+4. Use Storybook at `http://localhost:6006` for isolated component development
+
+---
+
+## Tech Stack
+
+| Layer             | Technology                      | Purpose                                                  |
+| ----------------- | ------------------------------- | -------------------------------------------------------- |
+| **Framework**     | SvelteKit + Svelte 5            | Reactive UI with runes (`$state`, `$derived`, `$effect`) |
+| **UI Components** | shadcn-svelte + bits-ui         | Accessible, customizable component library               |
+| **Styling**       | TailwindCSS 4                   | Utility-first CSS with design tokens                     |
+| **Database**      | IndexedDB (Dexie)               | Client-side storage for conversations and messages       |
+| **Build**         | Vite                            | Fast bundling with static adapter                        |
+| **Testing**       | Playwright + Vitest + Storybook | E2E, unit, and visual testing                            |
+| **Markdown**      | remark + rehype                 | Markdown processing with KaTeX and syntax highlighting   |
+
+### Key Dependencies
+
+```json
+{
+	"svelte": "^5.0.0",
+	"bits-ui": "^2.8.11",
+	"dexie": "^4.0.11",
+	"pdfjs-dist": "^5.4.54",
+	"highlight.js": "^11.11.1",
+	"rehype-katex": "^7.0.1"
+}
+```
+
+---
+
+## Build Pipeline
+
+### Development Build
+
+```bash
+npm run dev
+```
+
+Runs Vite in development mode with:
+
+- Hot Module Replacement (HMR)
+- Source maps
+- Proxy to llama-server
+
+### Production Build
+
+```bash
+npm run build
+```
+
+The build process:
+
+1. **Vite Build** - Bundles all TypeScript, Svelte, and CSS
+2. **Static Adapter** - Outputs to `../../build/tools/ui/dist` (llama-server's static file directory)
+3. **Post-Build Script** - Cleans up intermediate files
+4. **Custom Plugin** - Creates `index.html` with:
+   - Inlined favicon as base64
+   - GZIP compression (level 9)
+   - Deterministic output (zeroed timestamps)
+
+```text
+tools/ui/        →  build  →  build/tools/ui/dist/
+├── src/                                 ├── index.html  (served by llama-server)
+├── static/                              └── (favicon inlined)
+└── ...
+```
+
+### SvelteKit Configuration
+
+```javascript
+// svelte.config.js
+adapter: adapter({
+  pages: '../../build/tools/ui/dist',      // Output directory
+  assets: '../../build/tools/ui/dist',     // Static assets
+  fallback: 'index.html',  // SPA fallback
+  strict: true
+}),
+output: {
+  bundleStrategy: 'inline' // Single-file bundle
+}
+```
+
+### Integration with llama-server
+
+llama-ui is embedded directly into the llama-server binary:
+
+1. `npm run build` outputs `index.html` to `build/tools/ui/dist/`
+2. llama-server compiles this into the binary at build time
+3. When accessing `/`, llama-server serves the bundled HTML
+
+This results in a **single portable binary** with the full Llama UI included.
+
+---
+
+## Architecture
+
+Llama UI follows a layered architecture with unidirectional data flow:
+
+```text
+Routes → Components → Hooks → Stores → Services → Storage/API
+```
+
+### High-Level Architecture
+
+See: [`docs/architecture/high-level-architecture-simplified.md`](docs/architecture/high-level-architecture-simplified.md)
+
+```mermaid
+flowchart TB
+    subgraph Routes["📍 Routes"]
+        R1["/ (Welcome)"]
+        R2["/chat/[id]"]
+        RL["+layout.svelte"]
+    end
+
+    subgraph Components["🧩 Components"]
+        C_Sidebar["ChatSidebar"]
+        C_Screen["ChatScreen"]
+        C_Form["ChatForm"]
+        C_Messages["ChatMessages"]
+        C_ModelsSelector["ModelsSelector"]
+        C_Settings["ChatSettings"]
+    end
+
+    subgraph Stores["🗄️ Stores"]
+        S1["chatStore"]
+        S2["conversationsStore"]
+        S3["modelsStore"]
+        S4["serverStore"]
+        S5["settingsStore"]
+    end
+
+    subgraph Services["⚙️ Services"]
+        SV1["ChatService"]
+        SV2["ModelsService"]
+        SV3["PropsService"]
+        SV4["DatabaseService"]
+    end
+
+    subgraph Storage["💾 Storage"]
+        ST1["IndexedDB"]
+        ST2["LocalStorage"]
+    end
+
+    subgraph APIs["🌐 llama-server"]
+        API1["/v1/chat/completions"]
+        API2["/props"]
+        API3["/models/*"]
+    end
+
+    R1 & R2 --> C_Screen
+    RL --> C_Sidebar
+    C_Screen --> C_Form & C_Messages & C_Settings
+    C_Screen --> S1 & S2
+    C_ModelsSelector --> S3 & S4
+    S1 --> SV1 & SV4
+    S3 --> SV2 & SV3
+    SV4 --> ST1
+    SV1 --> API1
+    SV2 --> API3
+    SV3 --> API2
+```
+
+### Layer Breakdown
+
+#### Routes (`src/routes/`)
+
+- **`/`** - Welcome screen, creates new conversation
+- **`/chat/[id]`** - Active chat interface
+- **`+layout.svelte`** - Sidebar, navigation, global initialization
+
+#### Components (`src/lib/components/`)
+
+Components are organized in `app/` (application-specific) and `ui/` (shadcn-svelte primitives).
+
+**Chat Components** (`app/chat/`):
+
+| Component          | Responsibility                                                              |
+| ------------------ | --------------------------------------------------------------------------- |
+| `ChatScreen/`      | Main chat container, coordinates message list, input form, and attachments  |
+| `ChatForm/`        | Message input textarea with file upload, paste handling, keyboard shortcuts |
+| `ChatMessages/`    | Message list with branch navigation, regenerate/continue/edit actions       |
+| `ChatAttachments/` | File attachment previews, drag-and-drop, PDF/image/audio handling           |
+| `ChatSettings/`    | Parameter sliders (temperature, top-p, etc.) with server default sync       |
+| `ChatSidebar/`     | Conversation list, search, import/export, navigation                        |
+
+**Dialog Components** (`app/dialogs/`):
+
+| Component                       | Responsibility                                           |
+| ------------------------------- | -------------------------------------------------------- |
+| `DialogChatSettings`            | Full-screen settings configuration                       |
+| `DialogModelInformation`        | Model details (context size, modalities, parallel slots) |
+| `DialogChatAttachmentPreview`   | Full preview for images, PDFs (text or page view), code  |
+| `DialogConfirmation`            | Generic confirmation for destructive actions             |
+| `DialogConversationTitleUpdate` | Edit conversation title                                  |
+
+**Server/Model Components** (`app/server/`, `app/models/`):
+
+| Component           | Responsibility                                            |
+| ------------------- | --------------------------------------------------------- |
+| `ServerErrorSplash` | Error display when server is unreachable                  |
+| `ModelsSelector`    | Model dropdown with Loaded/Available groups (ROUTER mode) |
+
+**Shared UI Components** (`app/misc/`):
+
+| Component                        | Responsibility                                                   |
+| -------------------------------- | ---------------------------------------------------------------- |
+| `MarkdownContent`                | Markdown rendering with KaTeX, syntax highlighting, copy buttons |
+| `SyntaxHighlightedCode`          | Code blocks with language detection and highlighting             |
+| `ActionButton`, `ActionDropdown` | Reusable action buttons and menus                                |
+| `BadgeModality`, `BadgeInfo`     | Status and capability badges                                     |
+
+#### Hooks (`src/lib/hooks/`)
+
+- **`useModelChangeValidation`** - Validates model switch against conversation modalities
+- **`useProcessingState`** - Tracks streaming progress and token generation
+
+#### Stores (`src/lib/stores/`)
+
+| Store                | Responsibility                                            |
+| -------------------- | --------------------------------------------------------- |
+| `chatStore`          | Message sending, streaming, abort control, error handling |
+| `conversationsStore` | CRUD for conversations, message branching, navigation     |
+| `modelsStore`        | Model list, selection, loading/unloading (ROUTER)         |
+| `serverStore`        | Server properties, role detection, modalities             |
+| `settingsStore`      | User preferences, parameter sync with server defaults     |
+
+#### Services (`src/lib/services/`)
+
+| Service                | Responsibility                                  |
+| ---------------------- | ----------------------------------------------- |
+| `ChatService`          | API calls to`/v1/chat/completions`, SSE parsing |
+| `ModelsService`        | `/models`, `/models/load`, `/models/unload`     |
+| `PropsService`         | `/props`, `/props?model=`                       |
+| `DatabaseService`      | IndexedDB operations via Dexie                  |
+| `ParameterSyncService` | Syncs settings with server defaults             |
+
+---
+
+## Data Flows
+
+### MODEL Mode (Single Model)
+
+See: [`docs/flows/data-flow-simplified-model-mode.md`](docs/flows/data-flow-simplified-model-mode.md)
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant UI
+    participant Stores
+    participant DB as IndexedDB
+    participant API as llama-server
+
+    Note over User,API: Initialization
+    UI->>Stores: initialize()
+    Stores->>DB: load conversations
+    Stores->>API: GET /props
+    API-->>Stores: server config
+    Stores->>API: GET /v1/models
+    API-->>Stores: single model (auto-selected)
+
+    Note over User,API: Chat Flow
+    User->>UI: send message
+    Stores->>DB: save user message
+    Stores->>API: POST /v1/chat/completions (stream)
+    loop streaming
+        API-->>Stores: SSE chunks
+        Stores-->>UI: reactive update
+    end
+    Stores->>DB: save assistant message
+```
+
+### ROUTER Mode (Multi-Model)
+
+See: [`docs/flows/data-flow-simplified-router-mode.md`](docs/flows/data-flow-simplified-router-mode.md)
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant UI
+    participant Stores
+    participant API as llama-server
+
+    Note over User,API: Initialization
+    Stores->>API: GET /props
+    API-->>Stores: {role: "router"}
+    Stores->>API: GET /models
+    API-->>Stores: models[] with status
+
+    Note over User,API: Model Selection
+    User->>UI: select model
+    alt model not loaded
+        Stores->>API: POST /models/load
+        loop poll status
+            Stores->>API: GET /models
+        end
+        Stores->>API: GET /props?model=X
+    end
+    Stores->>Stores: validate modalities
+
+    Note over User,API: Chat Flow
+    Stores->>API: POST /v1/chat/completions {model: X}
+    loop streaming
+        API-->>Stores: SSE chunks + model info
+    end
+```
+
+### Detailed Flow Diagrams
+
+| Flow          | Description                                | File                                                        |
+| ------------- | ------------------------------------------ | ----------------------------------------------------------- |
+| Chat          | Message lifecycle, streaming, regeneration | [`chat-flow.md`](docs/flows/chat-flow.md)                   |
+| Models        | Loading, unloading, modality caching       | [`models-flow.md`](docs/flows/models-flow.md)               |
+| Server        | Props fetching, role detection             | [`server-flow.md`](docs/flows/server-flow.md)               |
+| Conversations | CRUD, branching, import/export             | [`conversations-flow.md`](docs/flows/conversations-flow.md) |
+| Database      | IndexedDB schema, operations               | [`database-flow.md`](docs/flows/database-flow.md)           |
+| Settings      | Parameter sync, user overrides             | [`settings-flow.md`](docs/flows/settings-flow.md)           |
+
+---
+
+## Architectural Patterns
+
+### 1. Reactive State with Svelte 5 Runes
+
+All stores use Svelte 5's fine-grained reactivity:
+
+```typescript
+// Store with reactive state
+class ChatStore {
+	#isLoading = $state(false);
+	#currentResponse = $state('');
+
+	// Derived values auto-update
+	get isStreaming() {
+		return $derived(this.#isLoading && this.#currentResponse.length > 0);
+	}
+}
+
+// Exported reactive accessors
+export const isLoading = () => chatStore.isLoading;
+export const currentResponse = () => chatStore.currentResponse;
+```
+
+### 2. Unidirectional Data Flow
+
+Data flows in one direction, making state predictable:
+
+```mermaid
+flowchart LR
+    subgraph UI["UI Layer"]
+        A[User Action] --> B[Component]
+    end
+
+    subgraph State["State Layer"]
+        B --> C[Store Method]
+        C --> D[State Update]
+    end
+
+    subgraph IO["I/O Layer"]
+        C --> E[Service]
+        E --> F[API / IndexedDB]
+        F -.->|Response| D
+    end
+
+    D -->|Reactive| B
+```
+
+Components dispatch actions to stores, stores coordinate with services for I/O, and state updates reactively propagate back to the UI.
+
+### 3. Per-Conversation State
+
+Enables concurrent streaming across multiple conversations:
+
+```typescript
+class ChatStore {
+	chatLoadingStates = new Map<string, boolean>();
+	chatStreamingStates = new Map<string, { response: string; messageId: string }>();
+	abortControllers = new Map<string, AbortController>();
+}
+```
+
+### 4. Message Branching with Tree Structure
+
+Conversations are stored as a tree, not a linear list:
+
+```typescript
+interface DatabaseMessage {
+	id: string;
+	parent: string | null; // Points to parent message
+	children: string[]; // List of child message IDs
+	// ...
+}
+
+interface DatabaseConversation {
+	currentNode: string; // Currently viewed branch tip
+	// ...
+}
+```
+
+Navigation between branches updates `currentNode` without losing history.
+
+### 5. Layered Service Architecture
+
+Stores handle state; services handle I/O:
+
+```text
+┌─────────────────┐
+│     Stores      │  Business logic, state management
+├─────────────────┤
+│    Services     │  API calls, database operations
+├─────────────────┤
+│   Storage/API   │  IndexedDB, LocalStorage, HTTP
+└─────────────────┘
+```
+
+### 6. Server Role Abstraction
+
+Single codebase handles both MODEL and ROUTER modes:
+
+```typescript
+// serverStore.ts
+get isRouterMode() {
+  return this.role === ServerRole.ROUTER;
+}
+
+// Components conditionally render based on mode
+{#if isRouterMode()}
+  <ModelsSelector />
+{/if}
+```
+
+### 7. Modality Validation
+
+Prevents sending attachments to incompatible models:
+
+```typescript
+// useModelChangeValidation hook
+const validate = (modelId: string) => {
+	const modelModalities = modelsStore.getModelModalities(modelId);
+	const conversationModalities = conversationsStore.usedModalities;
+
+	// Check if model supports all used modalities
+	if (conversationModalities.hasImages && !modelModalities.vision) {
+		return { valid: false, reason: 'Model does not support images' };
+	}
+	// ...
+};
+```
+
+### 8. Persistent Storage Strategy
+
+Data is persisted across sessions using two storage mechanisms:
+
+```mermaid
+flowchart TB
+    subgraph Browser["Browser Storage"]
+        subgraph IDB["IndexedDB (Dexie)"]
+            C[Conversations]
+            M[Messages]
+        end
+        subgraph LS["LocalStorage"]
+            S[Settings Config]
+            O[User Overrides]
+            T[Theme Preference]
+        end
+    end
+
+    subgraph Stores["Svelte Stores"]
+        CS[conversationsStore] --> C
+        CS --> M
+        SS[settingsStore] --> S
+        SS --> O
+        SS --> T
+    end
+```
+
+- **IndexedDB**: Conversations and messages (large, structured data)
+- **LocalStorage**: Settings, user parameter overrides, theme (small key-value data)
+- **Memory only**: Server props, model list (fetched fresh on each session)
+
+---
+
+## Testing
+
+### Test Types
+
+| Type          | Tool               | Location         | Command             |
+| ------------- | ------------------ | ---------------- | ------------------- |
+| **Unit**      | Vitest             | `tests/unit/`    | `npm run test:unit` |
+| **UI/Visual** | Storybook + Vitest | `tests/stories/` | `npm run test:ui`   |
+| **E2E**       | Playwright         | `tests/e2e/`     | `npm run test:e2e`  |
+| **Client**    | Vitest             | `tests/client/`. | `npm run test:unit` |
+
+### Running Tests
+
+```bash
+# All tests
+npm run test
+
+# Individual test suites
+npm run test:e2e      # End-to-end (requires llama-server)
+npm run test:client   # Client-side unit tests
+npm run test:server   # Server-side unit tests
+npm run test:ui       # Storybook visual tests
+```
+
+### Storybook Development
+
+```bash
+npm run storybook     # Start Storybook dev server on :6006
+npm run build-storybook  # Build static Storybook
+```
+
+### Linting and Formatting
+
+```bash
+npm run lint          # Check code style
+npm run format        # Auto-format with Prettier
+npm run check         # TypeScript type checking
+```
+
+---
+
+## Project Structure
+
+```text
+tools/ui/
+├── src/
+│   ├── lib/
+│   │   ├── components/   # UI components (app/, ui/)
+│   │   ├── hooks/        # Svelte hooks
+│   │   ├── stores/       # State management
+│   │   ├── services/     # API and database services
+│   │   ├── types/        # TypeScript interfaces
+│   │   └── utils/        # Utility functions
+│   ├── routes/           # SvelteKit routes
+│   └── styles/           # Global styles
+├── static/               # Static assets
+├── tests/                # Test files
+├── docs/                 # Architecture diagrams
+│   ├── architecture/     # High-level architecture
+│   └── flows/            # Feature-specific flows
+└── .storybook/           # Storybook configuration
+```
+
+---
+
+## Related Documentation
+
+- [llama.cpp Server README](../server/README.md) - Full server documentation
+- [Multimodal Documentation](../../docs/multimodal.md) - Image and audio support
+- [Function Calling](../../docs/function-calling.md) - Tool use capabilities
diff --git a/backend/llama.cpp/tools/ui/docs/architecture/high-level-architecture.md b/backend/llama.cpp/tools/ui/docs/architecture/high-level-architecture.md
new file mode 100644
index 0000000000000000000000000000000000000000..42ddb3f4f5ba57be9373a9141fe50154bcb92de6
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/docs/architecture/high-level-architecture.md
@@ -0,0 +1,373 @@
+```mermaid
+flowchart TB
+subgraph Routes["📍 Routes"]
+R1["/ (+page.svelte)"]
+R2["/chat/[id]"]
+RL["+layout.svelte"]
+end
+
+    subgraph Components["🧩 Components"]
+        direction TB
+        subgraph LayoutComponents["Layout"]
+            C_Sidebar["ChatSidebar"]
+            C_Screen["ChatScreen"]
+        end
+        subgraph ChatUIComponents["Chat UI"]
+            C_Form["ChatForm"]
+            C_Messages["ChatMessages"]
+            C_Message["ChatMessage"]
+            C_MessageUser["ChatMessageUser"]
+            C_MessageEditForm["ChatMessageEditForm"]
+            C_Attach["ChatAttachments"]
+            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"]
+        H1["useModelChangeValidation"]
+        H2["useProcessingState"]
+        H3["isMobile"]
+    end
+
+    subgraph Stores["🗄️ Stores"]
+        direction TB
+        subgraph S1["chatStore"]
+            S1State["<b>State:</b><br/>isLoading, currentResponse<br/>errorDialogState<br/>activeProcessingState<br/>chatLoadingStates<br/>chatStreamingStates<br/>abortControllers<br/>processingStates<br/>activeConversationId<br/>isStreamingActive"]
+            S1LoadState["<b>Loading State:</b><br/>setChatLoading()<br/>isChatLoading()<br/>syncLoadingStateForChat()<br/>clearUIState()<br/>isChatLoadingPublic()<br/>getAllLoadingChats()<br/>getAllStreamingChats()"]
+            S1ProcState["<b>Processing State:</b><br/>setActiveProcessingConversation()<br/>getProcessingState()<br/>clearProcessingState()<br/>getActiveProcessingState()<br/>updateProcessingStateFromTimings()<br/>getCurrentProcessingStateSync()<br/>restoreProcessingStateFromMessages()"]
+            S1Stream["<b>Streaming:</b><br/>streamChatCompletion()<br/>startStreaming()<br/>stopStreaming()<br/>stopGeneration()<br/>isStreaming()"]
+            S1Error["<b>Error Handling:</b><br/>showErrorDialog()<br/>dismissErrorDialog()<br/>isAbortError()"]
+            S1Msg["<b>Message Operations:</b><br/>addMessage()<br/>sendMessage()<br/>updateMessage()<br/>deleteMessage()<br/>getDeletionInfo()"]
+            S1Regen["<b>Regeneration:</b><br/>regenerateMessage()<br/>regenerateMessageWithBranching()<br/>continueAssistantMessage()"]
+            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/>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/>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()"]
+            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"]
+            S3State["<b>State:</b><br/>models, routerModels<br/>selectedModelId<br/>selectedModelName<br/>loading, updating, error<br/>modelLoadingStates<br/>modelPropsCache<br/>modelPropsFetching<br/>propsCacheVersion"]
+            S3Getters["<b>Computed Getters:</b><br/>selectedModel<br/>loadedModelIds<br/>loadingModelIds<br/>singleModelName"]
+            S3Modal["<b>Modalities:</b><br/>getModelModalities()<br/>modelSupportsVision()<br/>modelSupportsAudio()<br/>getModelModalitiesArray()<br/>getModelProps()<br/>updateModelModalities()"]
+            S3Status["<b>Status Queries:</b><br/>isModelLoaded()<br/>isModelOperationInProgress()<br/>getModelStatus()<br/>isModelPropsFetching()"]
+            S3Fetch["<b>Data Fetching:</b><br/>fetch()<br/>fetchRouterModels()<br/>fetchModelProps()<br/>fetchModalitiesForLoadedModels()"]
+            S3Select["<b>Model Selection:</b><br/>selectModelById()<br/>selectModelByName()<br/>clearSelection()<br/>findModelByName()<br/>findModelById()<br/>hasModel()"]
+            S3LoadUnload["<b>Loading/Unloading Models:</b><br/>loadModel()<br/>unloadModel()<br/>ensureModelLoaded()<br/>waitForModelStatus()<br/>pollForModelStatus()"]
+            S3Utils["<b>Utilities:</b><br/>toDisplayName()<br/>clear()"]
+        end
+        subgraph S4["serverStore"]
+            S4State["<b>State:</b><br/>props<br/>loading, error<br/>role<br/>fetchPromise"]
+            S4Getters["<b>Getters:</b><br/>defaultParams<br/>contextSize<br/>isRouterMode<br/>isModelMode"]
+            S4Data["<b>Data Handling:</b><br/>fetch()<br/>getErrorMessage()<br/>clear()"]
+            S4Utils["<b>Utilities:</b><br/>detectRole()"]
+        end
+        subgraph S5["settingsStore"]
+            S5State["<b>State:</b><br/>config<br/>theme<br/>isInitialized<br/>userOverrides"]
+            S5Lifecycle["<b>Lifecycle:</b><br/>initialize()<br/>loadConfig()<br/>saveConfig()<br/>loadTheme()<br/>saveTheme()"]
+            S5Update["<b>Config Updates:</b><br/>updateConfig()<br/>updateMultipleConfig()<br/>updateTheme()"]
+            S5Reset["<b>Reset:</b><br/>resetConfig()<br/>resetTheme()<br/>resetAll()<br/>resetParameterToServerDefault()"]
+            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
+            subgraph ChatExports["chatStore"]
+                RE1["isLoading()"]
+                RE2["currentResponse()"]
+                RE3["errorDialog()"]
+                RE4["activeProcessingState()"]
+                RE5["isChatStreaming()"]
+                RE6["isChatLoading()"]
+                RE7["getChatStreaming()"]
+                RE8["getAllLoadingChats()"]
+                RE9["getAllStreamingChats()"]
+                RE9a["isEditModeActive()"]
+                RE9b["getAddFilesHandler()"]
+                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()"]
+            end
+            subgraph ModelsExports["modelsStore"]
+                RE15["modelOptions()"]
+                RE16["routerModels()"]
+                RE17["modelsLoading()"]
+                RE18["modelsUpdating()"]
+                RE19["modelsError()"]
+                RE20["selectedModelId()"]
+                RE21["selectedModelName()"]
+                RE22["selectedModelOption()"]
+                RE23["loadedModelIds()"]
+                RE24["loadingModelIds()"]
+                RE25["propsCacheVersion()"]
+                RE26["singleModelName()"]
+            end
+            subgraph ServerExports["serverStore"]
+                RE27["serverProps()"]
+                RE28["serverLoading()"]
+                RE29["serverError()"]
+                RE30["serverRole()"]
+                RE31["defaultParams()"]
+                RE32["contextSize()"]
+                RE33["isRouterMode()"]
+                RE34["isModelMode()"]
+            end
+            subgraph SettingsExports["settingsStore"]
+                RE35["config()"]
+                RE36["theme()"]
+                RE37["isInitialized()"]
+            end
+            subgraph MCPExports["mcpStore / mcpResourceStore"]
+                RE38["mcpResources()"]
+                RE39["mcpResourceAttachments()"]
+                RE40["mcpHasResourceAttachments()"]
+                RE41["mcpTotalResourceCount()"]
+                RE42["mcpResourcesLoading()"]
+            end
+        end
+    end
+
+    subgraph Services["⚙️ Services"]
+        direction TB
+        subgraph SV1["ChatService"]
+            SV1Msg["<b>Messaging:</b><br/>sendMessage()"]
+            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()"]
+            SV2LoadUnload["<b>Load/Unload:</b><br/>load()<br/>unload()"]
+            SV2Status["<b>Status:</b><br/>isModelLoaded()<br/>isModelLoading()"]
+        end
+        subgraph SV3["PropsService"]
+            SV3Fetch["<b>Fetching:</b><br/>fetch()<br/>fetchForModel()"]
+        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/>createSystemMessage()<br/>getConversationMessages()<br/>updateMessage()<br/>deleteMessage()<br/>deleteMessageCascading()"]
+            SV4Node["<b>Navigation:</b><br/>updateCurrentNode()"]
+            SV4Import["<b>Import:</b><br/>importConversations()"]
+        end
+        subgraph SV5["ParameterSyncService"]
+            SV5Extract["<b>Extraction:</b><br/>extractServerDefaults()"]
+            SV5Merge["<b>Merging:</b><br/>mergeWithServerDefaults()"]
+            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"]
+        ST1["IndexedDB"]
+        ST2["conversations"]
+        ST3["messages"]
+        ST5["LocalStorage"]
+        ST6["config"]
+        ST7["userOverrides"]
+        ST8["mcpServers"]
+    end
+
+    subgraph APIs["🌐 llama-server API"]
+        API1["/v1/chat/completions"]
+        API2["/props<br/>/props?model="]
+        API3["/models<br/>/models/load<br/>/models/unload"]
+        API4["/v1/models"]
+    end
+
+    %% Routes render Components
+    R1 --> C_Screen
+    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
+    C_Message --> C_MessageUser
+    C_MessageUser --> C_MessageEditForm
+    C_MessageEditForm --> C_ModelsSelector
+    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
+    C_MessageEditForm --> H1
+    C_Screen --> H2
+
+    %% Hooks use Stores
+    H1 --> S3 & S4
+    H2 --> S1 & S5
+
+    %% Components use Stores
+    C_Screen --> S1 & S2
+    C_Messages --> S2
+    C_Message --> S1 & S2 & 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
+    S2 --> SV4
+    S3 --> SV2 & SV3
+    S4 --> SV3
+    S5 --> SV5
+    S6 --> SV6
+    S7 --> SV6
+
+    %% Services to Storage
+    SV4 --> ST1
+    ST1 --> ST2 & ST3
+    SV5 --> ST5
+    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
+
+    class R1,R2,RL routeStyle
+    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 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 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 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,ST8 storageStyle
+    class API1,API2,API3,API4 apiStyle
+```
diff --git a/backend/llama.cpp/tools/ui/docs/flows/chat-flow.md b/backend/llama.cpp/tools/ui/docs/flows/chat-flow.md
new file mode 100644
index 0000000000000000000000000000000000000000..296693c6a541ed01c616db493f03e7dc5b238efd
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/docs/flows/chat-flow.md
@@ -0,0 +1,228 @@
+```mermaid
+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
+
+    Note over chatStore: State:<br/>isLoading, currentResponse<br/>errorDialogState, activeProcessingState<br/>chatLoadingStates (Map)<br/>chatStreamingStates (Map)<br/>abortControllers (Map)<br/>processingStates (Map)
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,API: 💬 SEND MESSAGE
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>chatStore: sendMessage(content, extras)
+    activate chatStore
+
+    chatStore->>chatStore: setChatLoading(convId, true)
+    chatStore->>chatStore: clearChatStreaming(convId)
+
+    alt no active conversation
+        chatStore->>convStore: createConversation()
+        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)
+    chatStore->>convStore: updateCurrentNode(userMsg.id)
+
+    chatStore->>chatStore: createAssistantMessage(userMsg.id)
+    chatStore->>DbSvc: createMessageBranch(assistantMsg, userMsg.id)
+    chatStore->>convStore: addMessageToActive(assistantMsg)
+
+    chatStore->>chatStore: streamChatCompletion(messages, assistantMsg)
+    deactivate chatStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,API: 🌊 STREAMING (with agentic flow detection)
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    activate chatStore
+    chatStore->>chatStore: startStreaming()
+    Note right of chatStore: isStreamingActive = true
+
+    chatStore->>chatStore: setActiveProcessingConversation(convId)
+    chatStore->>chatStore: getOrCreateAbortController(convId)
+    Note right of chatStore: abortControllers.set(convId, new AbortController())
+
+    chatStore->>chatStore: getApiOptions()
+    Note right of chatStore: Merge from settingsStore.config:<br/>temperature, max_tokens, top_p, etc.
+
+    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: convertDbMessageToApiChatMessageData(messages)
+    Note right of ChatSvc: DatabaseMessage[] → ApiChatMessageData[]<br/>Process attachments (images, PDFs, audio)
+
+    ChatSvc->>API: POST /v1/chat/completions
+    Note right of API: {messages, model?, stream: true, ...params}
+
+    loop SSE chunks
+        API-->>ChatSvc: data: {"choices":[{"delta":{...}}]}
+        ChatSvc->>ChatSvc: handleStreamResponse(response)
+
+        alt content chunk
+            ChatSvc-->>chatStore: onChunk(content)
+            chatStore->>chatStore: setChatStreaming(convId, response, msgId)
+            Note right of chatStore: currentResponse = $state(accumulated)
+            chatStore->>convStore: updateMessageAtIndex(idx, {content})
+        end
+
+        alt reasoning chunk
+            ChatSvc-->>chatStore: onReasoningChunk(reasoning)
+            chatStore->>convStore: updateMessageAtIndex(idx, {thinking})
+        end
+
+        alt tool_calls chunk
+            ChatSvc-->>chatStore: onToolCallChunk(toolCalls)
+            chatStore->>convStore: updateMessageAtIndex(idx, {toolCalls})
+        end
+
+        alt model info
+            ChatSvc-->>chatStore: onModel(modelName)
+            chatStore->>chatStore: recordModel(modelName)
+            chatStore->>DbSvc: updateMessage(msgId, {model})
+        end
+
+        alt timings (during stream)
+            ChatSvc-->>chatStore: onTimings(timings, promptProgress)
+            chatStore->>chatStore: updateProcessingStateFromTimings()
+        end
+
+        chatStore-->>UI: reactive $state update
+    end
+
+    API-->>ChatSvc: data: [DONE]
+    ChatSvc-->>chatStore: onComplete(content, reasoning, timings, toolCalls)
+    deactivate ChatSvc
+
+    chatStore->>chatStore: stopStreaming()
+    chatStore->>DbSvc: updateMessage(msgId, {content, timings, model})
+    chatStore->>convStore: updateCurrentNode(msgId)
+    chatStore->>chatStore: setChatLoading(convId, false)
+    chatStore->>chatStore: clearChatStreaming(convId)
+    chatStore->>chatStore: clearProcessingState(convId)
+    deactivate chatStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,API: ⏹️ STOP GENERATION
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>chatStore: stopGeneration()
+    activate chatStore
+    chatStore->>chatStore: savePartialResponseIfNeeded(convId)
+    Note right of chatStore: Save currentResponse to DB if non-empty
+    chatStore->>chatStore: abortControllers.get(convId).abort()
+    Note right of chatStore: fetch throws AbortError → caught by isAbortError()
+    chatStore->>chatStore: stopStreaming()
+    chatStore->>chatStore: setChatLoading(convId, false)
+    chatStore->>chatStore: clearChatStreaming(convId)
+    chatStore->>chatStore: clearProcessingState(convId)
+    deactivate chatStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,API: 🔁 REGENERATE
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>chatStore: regenerateMessageWithBranching(msgId, model?)
+    activate chatStore
+    chatStore->>convStore: findMessageIndex(msgId)
+    chatStore->>chatStore: Get parent of target message
+    chatStore->>chatStore: createAssistantMessage(parentId)
+    chatStore->>DbSvc: createMessageBranch(newAssistantMsg, parentId)
+    chatStore->>convStore: refreshActiveMessages()
+    Note right of chatStore: Same streaming flow
+    chatStore->>chatStore: streamChatCompletion(...)
+    deactivate chatStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,API: ➡️ CONTINUE
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>chatStore: continueAssistantMessage(msgId)
+    activate chatStore
+    chatStore->>chatStore: Get existing content from message
+    chatStore->>chatStore: streamChatCompletion(..., existingContent)
+    Note right of chatStore: Appends to existing message content
+    deactivate chatStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,API: ✏️ EDIT USER MESSAGE
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    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
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,API: ❌ ERROR HANDLING
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    Note over chatStore: On stream error (non-abort):
+    chatStore->>chatStore: showErrorDialog(type, message)
+    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/backend/llama.cpp/tools/ui/docs/flows/conversations-flow.md b/backend/llama.cpp/tools/ui/docs/flows/conversations-flow.md
new file mode 100644
index 0000000000000000000000000000000000000000..bd2309bc03eb46547f30ac10f489402a2d97723b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/docs/flows/conversations-flow.md
@@ -0,0 +1,183 @@
+```mermaid
+sequenceDiagram
+    participant UI as 🧩 ChatSidebar / ChatScreen
+    participant convStore as 🗄️ conversationsStore
+    participant chatStore as 🗄️ chatStore
+    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/>pendingMcpServerOverrides: Map&lt;string, McpServerOverride&gt;
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,IDB: 🚀 INITIALIZATION
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    Note over convStore: Auto-initialized in constructor (browser only)
+    convStore->>convStore: initialize()
+    activate convStore
+    convStore->>convStore: loadConversations()
+    convStore->>DbSvc: getAllConversations()
+    DbSvc->>IDB: SELECT * FROM conversations ORDER BY lastModified DESC
+    IDB-->>DbSvc: Conversation[]
+    DbSvc-->>convStore: conversations
+    convStore->>convStore: conversations = $state(data)
+    convStore->>convStore: isInitialized = true
+    deactivate convStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,IDB: ➕ CREATE CONVERSATION
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>convStore: createConversation(name?)
+    activate convStore
+    convStore->>DbSvc: createConversation(name || "New Chat")
+    DbSvc->>IDB: INSERT INTO conversations
+    IDB-->>DbSvc: conversation {id, name, lastModified, currNode: ""}
+    DbSvc-->>convStore: conversation
+    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
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,IDB: 📂 LOAD CONVERSATION
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>convStore: loadConversation(convId)
+    activate convStore
+    convStore->>DbSvc: getConversation(convId)
+    DbSvc->>IDB: SELECT * FROM conversations WHERE id = ?
+    IDB-->>DbSvc: conversation
+    convStore->>convStore: activeConversation = $state(conversation)
+
+    convStore->>convStore: refreshActiveMessages()
+    convStore->>DbSvc: getConversationMessages(convId)
+    DbSvc->>IDB: SELECT * FROM messages WHERE convId = ?
+    IDB-->>DbSvc: allMessages[]
+    convStore->>convStore: filterByLeafNodeId(allMessages, currNode)
+    Note right of convStore: Filter to show only current branch path
+    convStore->>convStore: activeMessages = $state(filtered)
+
+    Note right of convStore: Route (+page.svelte) then calls:<br/>chatStore.syncLoadingStateForChat(convId)
+    deactivate convStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,IDB: 🌳 MESSAGE BRANCHING MODEL
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    Note over IDB: Message Tree Structure:<br/>- Each message has parent (null for root)<br/>- Each message has children[] array<br/>- Conversation.currNode points to active leaf<br/>- filterByLeafNodeId() traverses from root to currNode
+
+    rect rgb(240, 240, 255)
+        Note over convStore: Example Branch Structure:
+        Note over convStore: root → user1 → assistant1 → user2 → assistant2a (currNode)<br/>                                    ↘ assistant2b (alt branch)
+    end
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,IDB: ↔️ BRANCH NAVIGATION
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>convStore: navigateToSibling(msgId, direction)
+    activate convStore
+    convStore->>convStore: Find message in activeMessages
+    convStore->>convStore: Get parent message
+    convStore->>convStore: Find sibling in parent.children[]
+    convStore->>convStore: findLeafNode(siblingId, allMessages)
+    Note right of convStore: Navigate to leaf of sibling branch
+    convStore->>convStore: updateCurrentNode(leafId)
+    convStore->>DbSvc: updateCurrentNode(convId, leafId)
+    DbSvc->>IDB: UPDATE conversations SET currNode = ?
+    convStore->>convStore: refreshActiveMessages()
+    deactivate convStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,IDB: 📝 UPDATE CONVERSATION
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>convStore: updateConversationName(convId, newName)
+    activate convStore
+    convStore->>DbSvc: updateConversation(convId, {name: newName})
+    DbSvc->>IDB: UPDATE conversations SET name = ?
+    convStore->>convStore: Update in conversations array
+    deactivate convStore
+
+    Note over convStore: Auto-title update (after first response):
+    convStore->>convStore: updateConversationTitleWithConfirmation()
+    convStore->>convStore: titleUpdateConfirmationCallback?()
+    Note right of convStore: Shows dialog if title would change
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,IDB: 🗑️ DELETE CONVERSATION
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>convStore: deleteConversation(convId)
+    activate convStore
+    convStore->>DbSvc: deleteConversation(convId)
+    DbSvc->>IDB: DELETE FROM conversations WHERE id = ?
+    DbSvc->>IDB: DELETE FROM messages WHERE convId = ?
+    convStore->>convStore: conversations.filter(c => c.id !== convId)
+    alt deleted active conversation
+        convStore->>convStore: clearActiveConversation()
+    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: � MCP SERVER PER-CHAT OVERRIDES
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    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
+
+    UI->>convStore: getAllMcpServerOverrides(convId)
+    Note right of convStore: Returns all overrides for a conversation
+
+    UI->>convStore: removeMcpServerOverride(convId, serverName)
+    UI->>convStore: getMcpServerOverride(convId, serverName)
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,IDB: 📤 EXPORT / 📥 IMPORT
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>convStore: exportAllConversations()
+    activate convStore
+    convStore->>DbSvc: getAllConversations()
+    loop each conversation
+        convStore->>DbSvc: getConversationMessages(convId)
+    end
+    convStore->>convStore: triggerDownload(JSON blob)
+    deactivate convStore
+
+    UI->>convStore: importConversations(file)
+    activate convStore
+    convStore->>convStore: Parse JSON file
+    convStore->>convStore: importConversationsData(parsed)
+    convStore->>DbSvc: importConversations(parsed)
+    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/backend/llama.cpp/tools/ui/docs/flows/data-flow-simplified-model-mode.md b/backend/llama.cpp/tools/ui/docs/flows/data-flow-simplified-model-mode.md
new file mode 100644
index 0000000000000000000000000000000000000000..07b362147facca19f1ec306dee4007f2cc961d4b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/docs/flows/data-flow-simplified-model-mode.md
@@ -0,0 +1,45 @@
+```mermaid
+%% MODEL Mode Data Flow (single model)
+%% Detailed flows: ./flows/server-flow.mmd, ./flows/models-flow.mmd, ./flows/chat-flow.mmd
+
+sequenceDiagram
+    participant User as 👤 User
+    participant UI as 🧩 UI
+    participant Stores as 🗄️ Stores
+    participant DB as 💾 IndexedDB
+    participant API as 🌐 llama-server
+
+    Note over User,API: 🚀 Initialization (see: server-flow.mmd, models-flow.mmd)
+
+    UI->>Stores: initialize()
+    Stores->>DB: load conversations
+    Stores->>API: GET /props
+    API-->>Stores: server config + modalities
+    Stores->>API: GET /v1/models
+    API-->>Stores: single model (auto-selected)
+
+    Note over User,API: 💬 Chat Flow (see: chat-flow.mmd)
+
+    User->>UI: send message
+    UI->>Stores: sendMessage()
+    Stores->>DB: save user message
+    Stores->>API: POST /v1/chat/completions (stream)
+    loop streaming
+        API-->>Stores: SSE chunks
+        Stores-->>UI: reactive update
+    end
+    API-->>Stores: done + timings
+    Stores->>DB: save assistant message
+
+    Note over User,API: 🔁 Regenerate
+
+    User->>UI: regenerate
+    Stores->>DB: create message branch
+    Note right of Stores: same streaming flow
+
+    Note over User,API: ⏹️ Stop
+
+    User->>UI: stop
+    Stores->>Stores: abort stream
+    Stores->>DB: save partial response
+```
diff --git a/backend/llama.cpp/tools/ui/docs/flows/data-flow-simplified-router-mode.md b/backend/llama.cpp/tools/ui/docs/flows/data-flow-simplified-router-mode.md
new file mode 100644
index 0000000000000000000000000000000000000000..bccacf568412df8d7c1d998819e874b41a87775e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/docs/flows/data-flow-simplified-router-mode.md
@@ -0,0 +1,77 @@
+```mermaid
+%% ROUTER Mode Data Flow (multi-model)
+%% Detailed flows: ./flows/server-flow.mmd, ./flows/models-flow.mmd, ./flows/chat-flow.mmd
+
+sequenceDiagram
+    participant User as 👤 User
+    participant UI as 🧩 UI
+    participant Stores as 🗄️ Stores
+    participant DB as 💾 IndexedDB
+    participant API as 🌐 llama-server
+
+    Note over User,API: 🚀 Initialization (see: server-flow.mmd, models-flow.mmd)
+
+    UI->>Stores: initialize()
+    Stores->>DB: load conversations
+    Stores->>API: GET /props
+    API-->>Stores: {role: "router"}
+    Stores->>API: GET /v1/models
+    API-->>Stores: models[] with status (loaded/available)
+    loop each loaded model
+        Stores->>API: GET /props?model=X
+        API-->>Stores: modalities (vision/audio)
+    end
+
+    Note over User,API: 🔄 Model Selection (see: models-flow.mmd)
+
+    User->>UI: select model
+    alt model not loaded
+        Stores->>API: POST /models/load
+        loop poll status
+            Stores->>API: GET /v1/models
+            API-->>Stores: check if loaded
+        end
+        Stores->>API: GET /props?model=X
+        API-->>Stores: cache modalities
+    end
+    Stores->>Stores: validate modalities vs conversation
+    alt valid
+        Stores->>Stores: select model
+    else invalid
+        Stores->>API: POST /models/unload
+        UI->>User: show error toast
+    end
+
+    Note over User,API: 💬 Chat Flow (see: chat-flow.mmd)
+
+    User->>UI: send message
+    UI->>Stores: sendMessage()
+    Stores->>DB: save user message
+    Stores->>API: POST /v1/chat/completions {model: X}
+    Note right of API: router forwards to model
+    loop streaming
+        API-->>Stores: SSE chunks + model info
+        Stores-->>UI: reactive update
+    end
+    API-->>Stores: done + timings
+    Stores->>DB: save assistant message + model used
+
+    Note over User,API: 🔁 Regenerate (optional: different model)
+
+    User->>UI: regenerate
+    Stores->>Stores: validate modalities up to this message
+    Stores->>DB: create message branch
+    Note right of Stores: same streaming flow
+
+    Note over User,API: ⏹️ Stop
+
+    User->>UI: stop
+    Stores->>Stores: abort stream
+    Stores->>DB: save partial response
+
+    Note over User,API: 🗑️ LRU Unloading
+
+    Note right of API: Server auto-unloads LRU models<br/>when cache full
+    User->>UI: select unloaded model
+    Note right of Stores: triggers load flow again
+```
diff --git a/backend/llama.cpp/tools/ui/docs/flows/database-flow.md b/backend/llama.cpp/tools/ui/docs/flows/database-flow.md
new file mode 100644
index 0000000000000000000000000000000000000000..38cd6941cf78ca3e0d2e3619fcf6d8a9d289bfb4
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/docs/flows/database-flow.md
@@ -0,0 +1,174 @@
+```mermaid
+sequenceDiagram
+    participant Store as 🗄️ Stores
+    participant DbSvc as ⚙️ DatabaseService
+    participant Dexie as 📦 Dexie ORM
+    participant IDB as 💾 IndexedDB
+
+    Note over DbSvc: Stateless service - all methods static<br/>Database: "LlamacppWebui"
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over Store,IDB: 📊 SCHEMA
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    rect rgb(240, 248, 255)
+        Note over IDB: conversations table:<br/>id (PK), lastModified, currNode, name
+    end
+
+    rect rgb(255, 248, 240)
+        Note over IDB: messages table:<br/>id (PK), convId (FK), type, role, timestamp,<br/>parent, children[], content, thinking,<br/>toolCalls, extra[], model, timings
+    end
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over Store,IDB: 💬 CONVERSATIONS CRUD
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    Store->>DbSvc: createConversation(name)
+    activate DbSvc
+    DbSvc->>DbSvc: Generate UUID
+    DbSvc->>Dexie: db.conversations.add({id, name, lastModified, currNode: ""})
+    Dexie->>IDB: INSERT
+    IDB-->>Dexie: success
+    DbSvc-->>Store: DatabaseConversation
+    deactivate DbSvc
+
+    Store->>DbSvc: getConversation(convId)
+    DbSvc->>Dexie: db.conversations.get(convId)
+    Dexie->>IDB: SELECT WHERE id = ?
+    IDB-->>DbSvc: DatabaseConversation
+
+    Store->>DbSvc: getAllConversations()
+    DbSvc->>Dexie: db.conversations.orderBy('lastModified').reverse().toArray()
+    Dexie->>IDB: SELECT ORDER BY lastModified DESC
+    IDB-->>DbSvc: DatabaseConversation[]
+
+    Store->>DbSvc: updateConversation(convId, updates)
+    DbSvc->>Dexie: db.conversations.update(convId, {...updates, lastModified})
+    Dexie->>IDB: UPDATE
+
+    Store->>DbSvc: deleteConversation(convId)
+    activate DbSvc
+    DbSvc->>Dexie: db.conversations.delete(convId)
+    Dexie->>IDB: DELETE FROM conversations
+    DbSvc->>Dexie: db.messages.where('convId').equals(convId).delete()
+    Dexie->>IDB: DELETE FROM messages WHERE convId = ?
+    deactivate DbSvc
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over Store,IDB: 📝 MESSAGES CRUD
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    Store->>DbSvc: createRootMessage(convId)
+    activate DbSvc
+    DbSvc->>DbSvc: Create root message {type: "root", parent: null}
+    DbSvc->>Dexie: db.messages.add(rootMsg)
+    Dexie->>IDB: INSERT
+    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
+    DbSvc->>Dexie: db.messages.add({...message, id, parent: parentId})
+    Dexie->>IDB: INSERT message
+
+    alt parentId exists
+        DbSvc->>Dexie: db.messages.get(parentId)
+        Dexie->>IDB: SELECT parent
+        DbSvc->>DbSvc: parent.children.push(newId)
+        DbSvc->>Dexie: db.messages.update(parentId, {children})
+        Dexie->>IDB: UPDATE parent.children
+    end
+
+    DbSvc->>Dexie: db.conversations.update(convId, {currNode: newId})
+    Dexie->>IDB: UPDATE conversation.currNode
+    DbSvc-->>Store: DatabaseMessage
+    deactivate DbSvc
+
+    Store->>DbSvc: getConversationMessages(convId)
+    DbSvc->>Dexie: db.messages.where('convId').equals(convId).toArray()
+    Dexie->>IDB: SELECT WHERE convId = ?
+    IDB-->>DbSvc: DatabaseMessage[]
+
+    Store->>DbSvc: updateMessage(msgId, updates)
+    DbSvc->>Dexie: db.messages.update(msgId, updates)
+    Dexie->>IDB: UPDATE
+
+    Store->>DbSvc: deleteMessage(msgId)
+    DbSvc->>Dexie: db.messages.delete(msgId)
+    Dexie->>IDB: DELETE
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over Store,IDB: 🌳 BRANCHING OPERATIONS
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    Store->>DbSvc: updateCurrentNode(convId, nodeId)
+    DbSvc->>Dexie: db.conversations.update(convId, {currNode: nodeId, lastModified})
+    Dexie->>IDB: UPDATE
+
+    Store->>DbSvc: deleteMessageCascading(msgId)
+    activate DbSvc
+    DbSvc->>DbSvc: findDescendantMessages(msgId, allMessages)
+    Note right of DbSvc: Recursively find all children
+    loop each descendant
+        DbSvc->>Dexie: db.messages.delete(descendantId)
+        Dexie->>IDB: DELETE
+    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
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over Store,IDB: 📥 IMPORT
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    Store->>DbSvc: importConversations(data)
+    activate DbSvc
+    loop each conversation in data
+        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
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over Store,IDB: 🔗 MESSAGE TREE UTILITIES
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    Note over DbSvc: Used by stores (imported from utils):
+
+    rect rgb(240, 255, 240)
+        Note over DbSvc: filterByLeafNodeId(messages, leafId)<br/>→ Returns path from root to leaf<br/>→ Used to display current branch
+    end
+
+    rect rgb(240, 255, 240)
+        Note over DbSvc: findLeafNode(startId, messages)<br/>→ Traverse to deepest child<br/>→ Used for branch navigation
+    end
+
+    rect rgb(240, 255, 240)
+        Note over DbSvc: findDescendantMessages(msgId, messages)<br/>→ Find all children recursively<br/>→ Used for cascading deletes
+    end
+```
diff --git a/backend/llama.cpp/tools/ui/docs/flows/mcp-flow.md b/backend/llama.cpp/tools/ui/docs/flows/mcp-flow.md
new file mode 100644
index 0000000000000000000000000000000000000000..c8aa6665993ff2d649b3e8a6a8ca48ab388410ff
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/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/backend/llama.cpp/tools/ui/docs/flows/models-flow.md b/backend/llama.cpp/tools/ui/docs/flows/models-flow.md
new file mode 100644
index 0000000000000000000000000000000000000000..c3031b7292355b0e04cb743f302ae85a06cd9542
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/docs/flows/models-flow.md
@@ -0,0 +1,181 @@
+```mermaid
+sequenceDiagram
+    participant UI as 🧩 ModelsSelector
+    participant Hooks as 🪝 useModelChangeValidation
+    participant modelsStore as 🗄️ modelsStore
+    participant serverStore as 🗄️ serverStore
+    participant convStore as 🗄️ conversationsStore
+    participant ModelsSvc as ⚙️ ModelsService
+    participant PropsSvc as ⚙️ PropsService
+    participant API as 🌐 llama-server
+
+    Note over modelsStore: State:<br/>models: ModelOption[]<br/>routerModels: ApiModelDataEntry[]<br/>selectedModelId, selectedModelName<br/>loading, updating, error<br/>modelLoadingStates (Map)<br/>modelPropsCache (Map)<br/>propsCacheVersion
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,API: 🚀 INITIALIZATION (MODEL mode)
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>modelsStore: fetch()
+    activate modelsStore
+    modelsStore->>modelsStore: loading = true
+
+    alt serverStore.props not loaded
+        modelsStore->>serverStore: fetch()
+        Note over serverStore: → see server-flow.mmd
+    end
+
+    modelsStore->>ModelsSvc: list()
+    ModelsSvc->>API: GET /v1/models
+    API-->>ModelsSvc: ApiModelListResponse {data: [model]}
+
+    modelsStore->>modelsStore: models = $state(mapped)
+    Note right of modelsStore: Map to ModelOption[]:<br/>{id, name, model, description, capabilities}
+
+    Note over modelsStore: MODEL mode: Get modalities from serverStore.props
+    modelsStore->>modelsStore: modelPropsCache.set(model.id, serverStore.props)
+    modelsStore->>modelsStore: models[0].modalities = props.modalities
+
+    modelsStore->>modelsStore: Auto-select single model
+    Note right of modelsStore: selectedModelId = models[0].id
+    modelsStore->>modelsStore: loading = false
+    deactivate modelsStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,API: 🚀 INITIALIZATION (ROUTER mode)
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>modelsStore: fetch()
+    activate modelsStore
+    modelsStore->>ModelsSvc: list()
+    ModelsSvc->>API: GET /v1/models
+    API-->>ModelsSvc: ApiModelListResponse
+    modelsStore->>modelsStore: models = $state(mapped)
+    deactivate modelsStore
+
+    Note over UI: After models loaded, layout triggers:
+    UI->>modelsStore: fetchRouterModels()
+    activate modelsStore
+    modelsStore->>ModelsSvc: listRouter()
+    ModelsSvc->>API: GET /v1/models
+    API-->>ModelsSvc: ApiRouterModelsListResponse
+    Note right of API: {data: [{id, status, path, in_cache}]}
+    modelsStore->>modelsStore: routerModels = $state(data)
+
+    modelsStore->>modelsStore: fetchModalitiesForLoadedModels()
+    loop each model where status === "loaded"
+        modelsStore->>PropsSvc: fetchForModel(modelId)
+        PropsSvc->>API: GET /props?model={modelId}
+        API-->>PropsSvc: ApiLlamaCppServerProps
+        modelsStore->>modelsStore: modelPropsCache.set(modelId, props)
+    end
+    modelsStore->>modelsStore: propsCacheVersion++
+    deactivate modelsStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,API: 🔄 MODEL SELECTION (ROUTER mode)
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>Hooks: useModelChangeValidation({getRequiredModalities, onSuccess?, onValidationFailure?})
+    Note over Hooks: Hook configured per-component:<br/>ChatForm: getRequiredModalities = usedModalities<br/>ChatMessage: getRequiredModalities = getModalitiesUpToMessage(msgId)
+
+    UI->>Hooks: handleModelChange(modelId, modelName)
+    activate Hooks
+    Hooks->>Hooks: previousSelectedModelId = modelsStore.selectedModelId
+    Hooks->>modelsStore: isModelLoaded(modelName)?
+
+    alt model NOT loaded
+        Hooks->>modelsStore: loadModel(modelName)
+        Note over modelsStore: → see LOAD MODEL section below
+    end
+
+    Note over Hooks: Always fetch props (from cache or API)
+    Hooks->>modelsStore: fetchModelProps(modelName)
+    modelsStore-->>Hooks: props
+
+    Hooks->>convStore: getRequiredModalities()
+    convStore-->>Hooks: {vision, audio}
+
+    Hooks->>Hooks: Validate: model.modalities ⊇ required?
+
+    alt validation PASSED
+        Hooks->>modelsStore: selectModelById(modelId)
+        Hooks-->>UI: return true
+    else validation FAILED
+        Hooks->>UI: toast.error("Model doesn't support required modalities")
+        alt model was just loaded
+            Hooks->>modelsStore: unloadModel(modelName)
+        end
+        alt onValidationFailure provided
+            Hooks->>modelsStore: selectModelById(previousSelectedModelId)
+        end
+        Hooks-->>UI: return false
+    end
+    deactivate Hooks
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,API: ⬆️ LOAD MODEL (ROUTER mode)
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    modelsStore->>modelsStore: loadModel(modelId)
+    activate modelsStore
+
+    alt already loaded
+        modelsStore-->>modelsStore: return (no-op)
+    end
+
+    modelsStore->>modelsStore: modelLoadingStates.set(modelId, true)
+    modelsStore->>ModelsSvc: load(modelId)
+    ModelsSvc->>API: POST /models/load {model: modelId}
+    API-->>ModelsSvc: {status: "loading"}
+
+    modelsStore->>modelsStore: pollForModelStatus(modelId, LOADED)
+    loop poll every 500ms (max 60 attempts)
+        modelsStore->>modelsStore: fetchRouterModels()
+        modelsStore->>ModelsSvc: listRouter()
+        ModelsSvc->>API: GET /v1/models
+        API-->>ModelsSvc: models[]
+        modelsStore->>modelsStore: getModelStatus(modelId)
+        alt status === LOADED
+            Note right of modelsStore: break loop
+        else status === LOADING
+            Note right of modelsStore: wait 500ms, continue
+        end
+    end
+
+    modelsStore->>modelsStore: updateModelModalities(modelId)
+    modelsStore->>PropsSvc: fetchForModel(modelId)
+    PropsSvc->>API: GET /props?model={modelId}
+    API-->>PropsSvc: props with modalities
+    modelsStore->>modelsStore: modelPropsCache.set(modelId, props)
+    modelsStore->>modelsStore: propsCacheVersion++
+
+    modelsStore->>modelsStore: modelLoadingStates.set(modelId, false)
+    deactivate modelsStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,API: ⬇️ UNLOAD MODEL (ROUTER mode)
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    modelsStore->>modelsStore: unloadModel(modelId)
+    activate modelsStore
+    modelsStore->>modelsStore: modelLoadingStates.set(modelId, true)
+    modelsStore->>ModelsSvc: unload(modelId)
+    ModelsSvc->>API: POST /models/unload {model: modelId}
+
+    modelsStore->>modelsStore: pollForModelStatus(modelId, UNLOADED)
+    loop poll until unloaded
+        modelsStore->>ModelsSvc: listRouter()
+        ModelsSvc->>API: GET /v1/models
+    end
+
+    modelsStore->>modelsStore: modelLoadingStates.set(modelId, false)
+    deactivate modelsStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,API: 📊 COMPUTED GETTERS
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    Note over modelsStore: Getters:<br/>- selectedModel: ModelOption | null<br/>- loadedModelIds: string[] (from routerModels)<br/>- loadingModelIds: string[] (from modelLoadingStates)<br/>- singleModelName: string | null (MODEL mode only)
+
+    Note over modelsStore: Modality helpers:<br/>- getModelModalities(modelId): {vision, audio}<br/>- modelSupportsVision(modelId): boolean<br/>- modelSupportsAudio(modelId): boolean
+```
diff --git a/backend/llama.cpp/tools/ui/docs/flows/server-flow.md b/backend/llama.cpp/tools/ui/docs/flows/server-flow.md
new file mode 100644
index 0000000000000000000000000000000000000000..d6a1611f6f48044b97e760bb8bc6e5b015f0321e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/docs/flows/server-flow.md
@@ -0,0 +1,76 @@
+```mermaid
+sequenceDiagram
+    participant UI as 🧩 +layout.svelte
+    participant serverStore as 🗄️ serverStore
+    participant PropsSvc as ⚙️ PropsService
+    participant API as 🌐 llama-server
+
+    Note over serverStore: State:<br/>props: ApiLlamaCppServerProps | null<br/>loading, error<br/>role: ServerRole | null (MODEL | ROUTER)<br/>fetchPromise (deduplication)
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,API: 🚀 INITIALIZATION
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>serverStore: fetch()
+    activate serverStore
+
+    alt fetchPromise exists (already fetching)
+        serverStore-->>UI: return fetchPromise
+        Note right of serverStore: Deduplicate concurrent calls
+    end
+
+    serverStore->>serverStore: loading = true
+    serverStore->>serverStore: fetchPromise = new Promise()
+
+    serverStore->>PropsSvc: fetch()
+    PropsSvc->>API: GET /props
+    API-->>PropsSvc: ApiLlamaCppServerProps
+    Note right of API: {role, model_path, model_alias,<br/>modalities, default_generation_settings, ...}
+
+    PropsSvc-->>serverStore: props
+    serverStore->>serverStore: props = $state(data)
+
+    serverStore->>serverStore: detectRole(props)
+    Note right of serverStore: role = props.role === "router"<br/>  ? ServerRole.ROUTER<br/>  : ServerRole.MODEL
+
+    serverStore->>serverStore: loading = false
+    serverStore->>serverStore: fetchPromise = null
+    deactivate serverStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,API: 📊 COMPUTED GETTERS
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    Note over serverStore: Getters from props:
+
+    rect rgb(240, 255, 240)
+        Note over serverStore: defaultParams<br/>→ props.default_generation_settings.params<br/>(temperature, top_p, top_k, etc.)
+    end
+
+    rect rgb(240, 255, 240)
+        Note over serverStore: contextSize<br/>→ props.default_generation_settings.n_ctx
+    end
+
+    rect rgb(255, 240, 240)
+        Note over serverStore: isRouterMode<br/>→ role === ServerRole.ROUTER
+    end
+
+    rect rgb(255, 240, 240)
+        Note over serverStore: isModelMode<br/>→ role === ServerRole.MODEL
+    end
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,API: 🔗 RELATIONSHIPS
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    Note over serverStore: Used by:
+    Note right of serverStore: - modelsStore: role detection, MODEL mode modalities<br/>- settingsStore: syncWithServerDefaults (defaultParams)<br/>- chatStore: contextSize for processing state<br/>- UI components: isRouterMode for conditional rendering
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,API: ❌ ERROR HANDLING
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    Note over serverStore: getErrorMessage(): string | null<br/>Returns formatted error for UI display
+
+    Note over serverStore: clear(): void<br/>Resets all state (props, error, loading, role)
+```
diff --git a/backend/llama.cpp/tools/ui/docs/flows/settings-flow.md b/backend/llama.cpp/tools/ui/docs/flows/settings-flow.md
new file mode 100644
index 0000000000000000000000000000000000000000..260713a17b8d7f3b3e6219b32abba99a6c775f43
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/docs/flows/settings-flow.md
@@ -0,0 +1,156 @@
+```mermaid
+sequenceDiagram
+    participant UI as 🧩 ChatSettings
+    participant settingsStore as 🗄️ settingsStore
+    participant serverStore as 🗄️ serverStore
+    participant ParamSvc as ⚙️ ParameterSyncService
+    participant LS as 💾 LocalStorage
+
+    Note over settingsStore: State:<br/>config: SettingsConfigType<br/>theme: string ("auto" | "light" | "dark")<br/>isInitialized: boolean<br/>userOverrides: Set&lt;string&gt;
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,LS: 🚀 INITIALIZATION
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    Note over settingsStore: Auto-initialized in constructor (browser only)
+    settingsStore->>settingsStore: initialize()
+    activate settingsStore
+
+    settingsStore->>settingsStore: loadConfig()
+    settingsStore->>LS: get("llama-config")
+    LS-->>settingsStore: StoredConfig | null
+
+    alt config exists
+        settingsStore->>settingsStore: Merge with SETTING_CONFIG_DEFAULT
+        Note right of settingsStore: Fill missing keys with defaults
+    else no config
+        settingsStore->>settingsStore: config = SETTING_CONFIG_DEFAULT
+    end
+
+    settingsStore->>LS: get("llama-userOverrides")
+    LS-->>settingsStore: string[] | null
+    settingsStore->>settingsStore: userOverrides = new Set(data)
+
+    settingsStore->>settingsStore: loadTheme()
+    settingsStore->>LS: get("llama-theme")
+    LS-->>settingsStore: theme | "auto"
+
+    settingsStore->>settingsStore: isInitialized = true
+    deactivate settingsStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,LS: 🔄 SYNC WITH SERVER DEFAULTS
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    Note over UI: Triggered from +layout.svelte when serverStore.props loaded
+    UI->>settingsStore: syncWithServerDefaults()
+    activate settingsStore
+
+    settingsStore->>serverStore: defaultParams
+    serverStore-->>settingsStore: {temperature, top_p, top_k, ...}
+
+    loop each SYNCABLE_PARAMETER
+        alt key NOT in userOverrides
+            settingsStore->>settingsStore: config[key] = serverDefault[key]
+            Note right of settingsStore: Non-overridden params adopt server default
+        else key in userOverrides
+            Note right of settingsStore: Keep user value, skip server default
+        end
+    end
+
+    alt serverStore.props has uiSettings
+        settingsStore->>settingsStore: Apply uiSettings from server
+        Note right of settingsStore: Server-provided UI settings<br/>(e.g. showRawOutputSwitch)
+    end
+
+    settingsStore->>settingsStore: saveConfig()
+    deactivate settingsStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,LS: ⚙️ UPDATE CONFIG
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>settingsStore: updateConfig(key, value)
+    activate settingsStore
+    settingsStore->>settingsStore: config[key] = value
+
+    alt value matches server default for key
+        settingsStore->>settingsStore: userOverrides.delete(key)
+        Note right of settingsStore: Matches server default, remove override
+    else value differs from server default
+        settingsStore->>settingsStore: userOverrides.add(key)
+        Note right of settingsStore: Mark as user-modified (won't be overwritten)
+    end
+
+    settingsStore->>settingsStore: saveConfig()
+    settingsStore->>LS: set(CONFIG_LOCALSTORAGE_KEY, config)
+    settingsStore->>LS: set(USER_OVERRIDES_LOCALSTORAGE_KEY, [...userOverrides])
+    deactivate settingsStore
+
+    UI->>settingsStore: updateMultipleConfig({key1: val1, key2: val2})
+    activate settingsStore
+    Note right of settingsStore: Batch update, single save
+    settingsStore->>settingsStore: For each key: config[key] = value
+    settingsStore->>settingsStore: For each key: userOverrides.add(key)
+    settingsStore->>settingsStore: saveConfig()
+    deactivate settingsStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,LS: 🔄 RESET
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>settingsStore: resetConfig()
+    activate settingsStore
+    settingsStore->>settingsStore: config = {...SETTING_CONFIG_DEFAULT}
+    settingsStore->>settingsStore: userOverrides.clear()
+    Note right of settingsStore: All params reset to defaults<br/>Next syncWithServerDefaults will adopt server values
+    settingsStore->>settingsStore: saveConfig()
+    deactivate settingsStore
+
+    UI->>settingsStore: resetParameterToServerDefault(key)
+    activate settingsStore
+    settingsStore->>settingsStore: userOverrides.delete(key)
+    settingsStore->>serverStore: defaultParams[key]
+    settingsStore->>settingsStore: config[key] = serverDefault
+    settingsStore->>settingsStore: saveConfig()
+    deactivate settingsStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,LS: 🎨 THEME
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>settingsStore: updateTheme(newTheme)
+    activate settingsStore
+    settingsStore->>settingsStore: theme = newTheme
+    settingsStore->>settingsStore: saveTheme()
+    settingsStore->>LS: set("llama-theme", theme)
+    deactivate settingsStore
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,LS: 📊 PARAMETER INFO
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    UI->>settingsStore: getParameterInfo(key)
+    settingsStore->>ParamSvc: getParameterInfo(key, config, serverDefaults, userOverrides)
+    ParamSvc-->>settingsStore: ParameterInfo
+    Note right of ParamSvc: {<br/>  currentValue,<br/>  serverDefault,<br/>  isUserOverride: boolean,<br/>  canSync: boolean,<br/>  isDifferentFromServer: boolean<br/>}
+
+    UI->>settingsStore: getParameterDiff()
+    settingsStore->>ParamSvc: createParameterDiff(config, serverDefaults, userOverrides)
+    ParamSvc-->>settingsStore: ParameterDiff[]
+    Note right of ParamSvc: Array of parameters where user != server
+
+    %% ═══════════════════════════════════════════════════════════════════════════
+    Note over UI,LS: 📋 CONFIG CATEGORIES
+    %% ═══════════════════════════════════════════════════════════════════════════
+
+    Note over settingsStore: Syncable with server (from /props):
+    rect rgb(240, 255, 240)
+        Note over settingsStore: temperature, top_p, top_k, min_p<br/>repeat_penalty, presence_penalty, frequency_penalty<br/>dynatemp_range, dynatemp_exponent<br/>typ_p, xtc_probability, xtc_threshold<br/>dry_multiplier, dry_base, dry_allowed_length, dry_penalty_last_n
+    end
+
+    Note over settingsStore: UI-only (not synced):
+    rect rgb(255, 240, 240)
+        Note over settingsStore: systemMessage, custom (JSON)<br/>showStatistics, enableContinueGeneration<br/>autoMicOnEmpty, disableAutoScroll<br/>apiKey, pdfAsImage, disableReasoningParsing, showRawOutputSwitch
+    end
+```
diff --git a/backend/llama.cpp/tools/ui/embed.cpp b/backend/llama.cpp/tools/ui/embed.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..914d51fa1d8c2add618b5d2f1ab5e0b86e1e020c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/embed.cpp
@@ -0,0 +1,306 @@
+// llama-ui-embed: generate ui.cpp / ui.h that embed UI assets as C arrays.
+//
+// Usage:
+//   llama-ui-embed <out_cpp> <out_h> [<asset_dir>]
+//
+// Recursively embeds every regular file under <asset_dir>.
+// Asset names are relative paths from <asset_dir> (e.g. "_app/immutable/bundle.HASH.js").
+// Without <asset_dir>, emits an empty asset table.
+
+#include <inttypes.h>
+#include <stdarg.h>
+#include <stdint.h>
+#include <stdio.h>
+#include <string.h>
+
+#include <algorithm>
+#include <filesystem>
+#include <fstream>
+#include <functional>
+#include <string>
+#include <vector>
+
+
+static const char * mime_from_ext(const std::string & name) {
+    auto ext = name.rfind('.');
+    if (ext == std::string::npos) return "application/octet-stream";
+    std::string e = name.substr(ext + 1);
+    if (e == "html")        return "text/html; charset=utf-8";
+    if (e == "css")         return "text/css";
+    if (e == "js")          return "application/javascript";
+    if (e == "json")        return "application/json";
+    if (e == "webmanifest") return "application/manifest+json";
+    if (e == "svg")         return "image/svg+xml";
+    if (e == "png")         return "image/png";
+    if (e == "jpg" ||
+        e == "jpeg")        return "image/jpeg";
+    if (e == "ico")         return "image/x-icon";
+    if (e == "woff")        return "font/woff";
+    if (e == "woff2")       return "font/woff2";
+    return "application/octet-stream";
+}
+
+// Computes FNV-1a hash of the data
+static uint64_t fnv_hash(const uint8_t * data, size_t len) {
+    const uint64_t fnv_prime = 0x100000001b3ULL;
+    uint64_t hash = 0xcbf29ce484222325ULL;
+
+    for (size_t i = 0; i < len; ++i) {
+        hash ^= data[i];
+        hash *= fnv_prime;
+    }
+    return hash;
+}
+
+static bool read_file(const std::filesystem::path & path, std::vector<unsigned char> & out) {
+    std::ifstream f(path, std::ios::binary | std::ios::ate);
+    if (!f) {
+        fprintf(stderr, "embed: cannot open %s\n", path.string().c_str());
+        return false;
+    }
+    const auto sz = f.tellg();
+    if (sz < 0) {
+        return false;
+    }
+    f.seekg(0);
+    out.resize(static_cast<size_t>(sz));
+    if (sz > 0 && !f.read(reinterpret_cast<char *>(out.data()), sz)) {
+        return false;
+    }
+    return true;
+}
+
+static void append_bytes_hex(std::string & out, const std::vector<unsigned char> & bytes) {
+    static const char hex[] = "0123456789abcdef";
+    out.reserve(out.size() + bytes.size() * 5);
+    for (unsigned char b : bytes) {
+        out += '0';
+        out += 'x';
+        out += hex[b >> 4];
+        out += hex[b & 0xf];
+        out += ',';
+    }
+}
+
+static bool write_if_different(const std::string & path, const std::string & content) {
+    std::ifstream f(path, std::ios::binary | std::ios::ate);
+    if (f) {
+        const auto sz = f.tellg();
+        if (sz >= 0 && static_cast<size_t>(sz) == content.size()) {
+            std::string existing(static_cast<size_t>(sz), '\0');
+            f.seekg(0);
+            if (sz == 0 || f.read(existing.data(), sz)) {
+                if (existing == content) {
+                    return true;
+                }
+            }
+        }
+    }
+
+    std::ofstream out(path, std::ios::binary | std::ios::trunc);
+    if (!out) {
+        fprintf(stderr, "embed: cannot write %s\n", path.c_str());
+        return false;
+    }
+    if (!content.empty()) {
+        out.write(content.data(), static_cast<std::streamsize>(content.size()));
+    }
+    bool ok = out.good();
+    if (ok) {
+        printf("embed: write output file %s\n", path.c_str());
+    }
+    return ok;
+}
+
+static std::string path_basename(const std::string & name) {
+    const size_t p = name.rfind('/');
+    return p == std::string::npos ? name : name.substr(p + 1);
+}
+static bool str_starts_with(const std::string & s, const char * prefix) {
+    const size_t n = strlen(prefix);
+    return s.size() >= n && s.compare(0, n, prefix) == 0;
+}
+static bool str_ends_with(const std::string & s, const char * suffix) {
+    const size_t n = strlen(suffix);
+    return s.size() >= n && s.compare(s.size() - n, n, suffix) == 0;
+}
+
+static std::string fmt(const char * pattern, ...) {
+    char tmp[512];
+    va_list ap;
+    va_start(ap, pattern);
+    const int n = vsnprintf(tmp, sizeof(tmp), pattern, ap);
+    va_end(ap);
+    return (n > 0) ? std::string(tmp, static_cast<size_t>(n)) : std::string();
+}
+
+struct asset_entry {
+    std::string           name;
+    std::filesystem::path path;
+};
+
+int main(int argc, char ** argv) {
+    if (argc < 3 || argc > 4) {
+        fprintf(stderr, "usage: %s <out_cpp> <out_h> [<asset_dir>]\n", argv[0]);
+        return 1;
+    }
+
+    const std::string out_cpp   = argv[1];
+    const std::string out_h     = argv[2];
+    const std::string asset_dir = (argc >= 4) ? argv[3] : std::string();
+
+    const bool        use_gzip = !asset_dir.empty() && std::filesystem::exists(asset_dir + "/_gzip");
+    const std::string in_dir   = use_gzip ? (asset_dir + "/_gzip") : asset_dir;
+
+    std::vector<asset_entry> assets;
+    if (!in_dir.empty()) {
+        const std::filesystem::path dir = in_dir;
+
+        std::error_code ec;
+        std::filesystem::recursive_directory_iterator it(dir, ec);
+        if (ec) {
+            fprintf(stderr, "embed: cannot iterate %s: %s\n", argv[3], ec.message().c_str());
+            return 1;
+        }
+        for (const auto & entry : it) {
+            if (!entry.is_regular_file()) {
+                continue;
+            }
+            // name is the relative path from dir, with forward slashes
+            const std::string name = entry.path().lexically_relative(dir).generic_string();
+            assets.push_back({ name, entry.path() });
+        }
+
+        // directory iteration order is unspecified; sort for reproducible output
+        std::sort(assets.begin(), assets.end(),
+                  [](const asset_entry & a, const asset_entry & b) { return a.name < b.name; });
+    }
+
+    const int n_assets = static_cast<int>(assets.size());
+
+    if (n_assets > 0) {
+        using match_fn = std::function<bool(const std::string &)>;
+        auto exact = [](const char * name) -> match_fn {
+            return [name](const std::string & base) { return base == name; };
+        };
+
+        struct required_check { const char * label; match_fn match; bool found; };
+        required_check checks[] = {
+            { "index.html",           exact("index.html"),           false },
+            { "manifest.webmanifest", exact("manifest.webmanifest"), false },
+            { "sw.js",                exact("sw.js"),                false },
+            { "build.json",           exact("build.json"),           false },
+            { "version.json",         exact("version.json"),         false },
+            { "bundle[hash].js",      [](const std::string & b) {
+                return str_starts_with(b, "bundle")  && str_ends_with(b, ".js");
+            }, false },
+            { "bundle[hash].css",     [](const std::string & b) {
+                return str_starts_with(b, "bundle")  && str_ends_with(b, ".css");
+            }, false },
+            { "workbox[hash].js",     [](const std::string & b) {
+                return str_starts_with(b, "workbox") && str_ends_with(b, ".js");
+            }, false },
+        };
+
+        for (const auto & a : assets) {
+            const std::string base = path_basename(a.name);
+            for (auto & c : checks) {
+                if (!c.found) { c.found = c.match(base); }
+            }
+        }
+
+        std::vector<const char *> missing;
+        for (const auto & c : checks) {
+            if (!c.found) { missing.push_back(c.label); }
+        }
+        if (!missing.empty()) {
+            fprintf(stderr, "\ncurrent asset files:\n");
+            for (const auto & a : assets) {
+                fprintf(stderr, "    %s\n", a.name.c_str());
+            }
+            fprintf(stderr, "missing required asset(s):\n");
+            for (const char * m : missing) {
+                fprintf(stderr, "    %s\n", m);
+            }
+            fprintf(stderr, "hint: try cleaning your build directory: %s\n", in_dir.c_str());
+            return 1;
+        }
+    }
+
+    std::string h;
+    h += "#pragma once\n\n#include <array>\n#include <string>\n\n";
+    if (n_assets > 0) {
+        h += "#define LLAMA_UI_HAS_ASSETS 1\n\n";
+    }
+    h +=
+        "struct llama_ui_asset {\n"
+        "    std::string           name;\n"
+        "    const unsigned char * data;\n"
+        "    std::size_t           size;\n"
+        "    std::string           etag;\n"
+        "    std::string           type;\n"
+        "};\n\n"
+        "const llama_ui_asset * llama_ui_find_asset(const std::string & name);\n"
+        "bool llama_ui_use_gzip();\n";
+    h += fmt("const std::array<llama_ui_asset, %d> & llama_ui_get_assets();\n", n_assets);
+
+    std::string cpp;
+    cpp += "#include \"ui.h\"\n\n";
+
+    if (n_assets > 0) {
+        for (int i = 0; i < n_assets; i++) {
+            std::vector<unsigned char> bytes;
+            if (!read_file(assets[i].path, bytes)) {
+                return 1;
+            }
+            if (bytes.empty()) {
+                fprintf(stderr, "embed: empty file: %s\n", assets[i].path.generic_string().c_str());
+                return 1;
+            }
+            cpp += fmt("static const unsigned char asset_%d_data[] = {", i);
+            append_bytes_hex(cpp, bytes);
+            const auto hash = fnv_hash(bytes.data(), bytes.size());
+
+            cpp += fmt("};\nstatic const std::size_t   asset_%d_size = %zu;\n",
+                       i, bytes.size());
+            cpp += fmt("static const char          asset_%d_etag[] = \"\\\"0x%016" PRIx64 "\\\"\";\n\n",
+                       i, hash);
+        }
+
+        cpp += fmt("static const std::array<llama_ui_asset, %d> g_assets = {{\n", n_assets);
+        for (int i = 0; i < n_assets; i++) {
+            const std::string & name = assets[i].name;
+            cpp += fmt("    { \"%s\", asset_%d_data, asset_%d_size, asset_%d_etag, \"%s\" },\n",
+                       name.c_str(), i, i, i, mime_from_ext(name));
+        }
+        cpp += "}};\n\n";
+
+        cpp +=
+            "const llama_ui_asset * llama_ui_find_asset(const std::string & name) {\n"
+            "    for (const auto & a : g_assets) {\n"
+            "        if (a.name == name) {\n"
+            "            return &a;\n"
+            "        }\n"
+            "    }\n"
+            "    return nullptr;\n"
+            "}\n";
+        cpp += fmt("const std::array<llama_ui_asset, %d> & llama_ui_get_assets() {\n", n_assets);
+        cpp +=     "    return g_assets;\n"
+                   "}\n";
+    } else {
+        cpp +=
+            "const llama_ui_asset * llama_ui_find_asset(const std::string &) {\n"
+            "    return nullptr;\n"
+            "}\n"
+            "const std::array<llama_ui_asset, 0> & llama_ui_get_assets() {\n"
+            "    static const std::array<llama_ui_asset, 0> empty{};\n"
+            "    return empty;\n"
+            "}\n";
+    }
+    cpp += fmt("bool llama_ui_use_gzip() { return %s; }\n", use_gzip ? "true" : "false");
+
+    bool ok = true;
+    ok = write_if_different(out_h,   h)   && ok;
+    ok = write_if_different(out_cpp, cpp) && ok;
+    return ok ? 0 : 1;
+}
diff --git a/backend/llama.cpp/tools/ui/eslint.config.js b/backend/llama.cpp/tools/ui/eslint.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..b90376b6c156163724d81ec433172ea8789f0a71
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/eslint.config.js
@@ -0,0 +1,59 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from 'eslint-plugin-storybook';
+
+import prettier from 'eslint-config-prettier';
+import { includeIgnoreFile } from '@eslint/compat';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript-eslint';
+import svelteConfig from './svelte.config.js';
+
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default ts.config(
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: { globals: { ...globals.browser, ...globals.node } },
+		rules: {
+			// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
+			// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+			'no-undef': 'off',
+			'svelte/no-at-html-tags': 'off',
+			// This app uses hash-based routing (#/) where resolve() from $app/paths does not apply
+			'svelte/no-navigation-without-resolve': 'off',
+
+			// Enforce empty line at end of file
+			'eol-last': 'error'
+		}
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				extraFileExtensions: ['.svelte'],
+				parser: ts.parser,
+				svelteConfig
+			}
+		}
+	},
+	{
+		// Exclude generated build output and Storybook files from ESLint
+		ignores: [
+			'dist/**',
+			'build/**',
+			'.svelte-kit/**',
+			'test-results/**',
+			'.storybook/**/*',
+			'src/lib/services/sandbox-worker.js'
+		]
+	},
+	storybook.configs['flat/recommended']
+);
diff --git a/backend/llama.cpp/tools/ui/package-lock.json b/backend/llama.cpp/tools/ui/package-lock.json
new file mode 100644
index 0000000000000000000000000000000000000000..7216de682340876a48c0bc06647159cb1f25ba21
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/package-lock.json
@@ -0,0 +1,17523 @@
+{
+	"name": "llama-ui",
+	"version": "1.0.0",
+	"lockfileVersion": 3,
+	"requires": true,
+	"packages": {
+		"": {
+			"name": "llama-ui",
+			"version": "1.0.0",
+			"devDependencies": {
+				"@chromatic-com/storybook": "5.0.0",
+				"@eslint/compat": "1.4.1",
+				"@eslint/js": "9.39.2",
+				"@internationalized/date": "3.12.2",
+				"@lucide/svelte": "0.515.0",
+				"@modelcontextprotocol/sdk": "1.26.0",
+				"@playwright/test": "1.56.1",
+				"@storybook/addon-a11y": "10.2.4",
+				"@storybook/addon-docs": "10.2.4",
+				"@storybook/addon-svelte-csf": "5.0.10",
+				"@storybook/addon-vitest": "10.2.4",
+				"@storybook/sveltekit": "10.2.4",
+				"@sveltejs/adapter-static": "3.0.10",
+				"@sveltejs/kit": "2.60.1",
+				"@sveltejs/vite-plugin-svelte": "6.2.1",
+				"@tailwindcss/forms": "0.5.10",
+				"@tailwindcss/typography": "0.5.16",
+				"@tailwindcss/vite": "4.1.11",
+				"@types/node": "24.13.0",
+				"@vite-pwa/assets-generator": "1.0.2",
+				"@vite-pwa/sveltekit": "1.1.0",
+				"@vitest/browser": "4.1.8",
+				"@vitest/browser-playwright": "4.1.8",
+				"@vitest/coverage-v8": "4.1.8",
+				"bits-ui": "2.18.1",
+				"clsx": "2.1.1",
+				"dexie": "4.4.3",
+				"dompurify": "3.4.11",
+				"eslint": "9.39.4",
+				"eslint-config-prettier": "10.1.8",
+				"eslint-plugin-storybook": "10.4.2",
+				"eslint-plugin-svelte": "3.19.0",
+				"fflate": "0.8.3",
+				"globals": "16.5.0",
+				"highlight.js": "11.11.1",
+				"http-server": "14.1.1",
+				"mdast": "3.0.0",
+				"mdsvex": "0.12.7",
+				"mermaid": "11.15.0",
+				"mode-watcher": "1.1.0",
+				"pdfjs-dist": "5.4.54",
+				"playwright": "1.56.1",
+				"prettier": "3.8.3",
+				"prettier-plugin-svelte": "4.1.0",
+				"prettier-plugin-tailwindcss": "0.8.0",
+				"rehype-highlight": "7.0.2",
+				"rehype-katex": "7.0.1",
+				"rehype-stringify": "10.0.1",
+				"remark": "15.0.1",
+				"remark-breaks": "4.0.0",
+				"remark-gfm": "4.0.1",
+				"remark-html": "16.0.1",
+				"remark-math": "6.0.0",
+				"remark-rehype": "11.1.2",
+				"sass": "1.100.0",
+				"storybook": "10.4.2",
+				"svelte": "5.56.1",
+				"svelte-check": "4.6.0",
+				"svelte-sonner": "1.1.1",
+				"tailwind-merge": "3.6.0",
+				"tailwind-variants": "3.2.2",
+				"tailwindcss": "4.3.0",
+				"tw-animate-css": "1.4.0",
+				"typescript": "5.9.3",
+				"typescript-eslint": "8.60.1",
+				"unified": "11.0.5",
+				"unist-util-visit": "5.1.0",
+				"uuid": "13.0.2",
+				"vite": "7.3.5",
+				"vite-plugin-devtools-json": "0.2.1",
+				"vitest": "4.1.8",
+				"vitest-browser-svelte": "2.1.1",
+				"workbox-window": "7.4.1"
+			}
+		},
+		"node_modules/@adobe/css-tools": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.5.0.tgz",
+			"integrity": "sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@ampproject/remapping": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+			"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@jridgewell/gen-mapping": "^0.3.5",
+				"@jridgewell/trace-mapping": "^0.3.24"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@antfu/install-pkg": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
+			"integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"package-manager-detector": "^1.3.0",
+				"tinyexec": "^1.0.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			}
+		},
+		"node_modules/@apideck/better-ajv-errors": {
+			"version": "0.3.7",
+			"resolved": "https://registry.npmjs.org/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.7.tgz",
+			"integrity": "sha512-TajUJwGWbDwkCx/CZi7tRE8PVB7simCvKJfHUsSdvps+aTM/PDPP4gkLmKnc+x3CE//y9i/nj74GqdL/hwk7Iw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"jsonpointer": "^5.0.1",
+				"leven": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"peerDependencies": {
+				"ajv": ">=8"
+			}
+		},
+		"node_modules/@babel/code-frame": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+			"integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-validator-identifier": "^7.29.7",
+				"js-tokens": "^4.0.0",
+				"picocolors": "^1.1.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/compat-data": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+			"integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/core": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+			"integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.29.7",
+				"@babel/generator": "^7.29.7",
+				"@babel/helper-compilation-targets": "^7.29.7",
+				"@babel/helper-module-transforms": "^7.29.7",
+				"@babel/helpers": "^7.29.7",
+				"@babel/parser": "^7.29.7",
+				"@babel/template": "^7.29.7",
+				"@babel/traverse": "^7.29.7",
+				"@babel/types": "^7.29.7",
+				"@jridgewell/remapping": "^2.3.5",
+				"convert-source-map": "^2.0.0",
+				"debug": "^4.1.0",
+				"gensync": "^1.0.0-beta.2",
+				"json5": "^2.2.3",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/babel"
+			}
+		},
+		"node_modules/@babel/core/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"dev": true,
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/@babel/generator": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz",
+			"integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/parser": "^7.29.7",
+				"@babel/types": "^7.29.7",
+				"@jridgewell/gen-mapping": "^0.3.12",
+				"@jridgewell/trace-mapping": "^0.3.28",
+				"jsesc": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-annotate-as-pure": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.29.7.tgz",
+			"integrity": "sha512-OoK6239jHPuSQOoS0kfTVKn0b/rVTk0seKq4Gd2UMLtmOVLjDC0ki3e+c90Trqv2gMfvJFqkiljrr568+qddiw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/types": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-compilation-targets": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+			"integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/compat-data": "^7.29.7",
+				"@babel/helper-validator-option": "^7.29.7",
+				"browserslist": "^4.24.0",
+				"lru-cache": "^5.1.1",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+			"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"yallist": "^3.0.2"
+			}
+		},
+		"node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"dev": true,
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/@babel/helper-create-class-features-plugin": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.29.7.tgz",
+			"integrity": "sha512-IY3ZD9Tmooqr3TUhc3DUWxiuo8xx1DWLhd5M7hQ+ZWJamqM2BbalrBJb2MisSLoYorOj75U03qULCxQTY9r3hg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.29.7",
+				"@babel/helper-member-expression-to-functions": "^7.29.7",
+				"@babel/helper-optimise-call-expression": "^7.29.7",
+				"@babel/helper-replace-supers": "^7.29.7",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.29.7",
+				"@babel/traverse": "^7.29.7",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"dev": true,
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/@babel/helper-create-regexp-features-plugin": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.29.7.tgz",
+			"integrity": "sha512-907Uymvqgg1dwUA+7IGwFAOSYzQOuzPXKNJ1yxzwPffzkYFg2q2eHi1fIOs6sXkG9NbIUMunnUlkYsfRFNvomg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.29.7",
+				"regexpu-core": "^6.3.1",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/helper-create-regexp-features-plugin/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"dev": true,
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/@babel/helper-define-polyfill-provider": {
+			"version": "0.6.8",
+			"resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.8.tgz",
+			"integrity": "sha512-47UwBLPpQi1NoWzLuHNjRoHlYXMwIJoBf7MFou6viC/sIHWYygpvr0B6IAyh5sBdA2nr2LPIRww8lfaUVQINBA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-compilation-targets": "^7.28.6",
+				"@babel/helper-plugin-utils": "^7.28.6",
+				"debug": "^4.4.3",
+				"lodash.debounce": "^4.0.8",
+				"resolve": "^1.22.11"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+			}
+		},
+		"node_modules/@babel/helper-globals": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+			"integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-member-expression-to-functions": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.29.7.tgz",
+			"integrity": "sha512-j+7JYmk1JYDtACIGj0QJqqWZjoUpMoEikQGADMaHgCMCSDqd2+P32rfcibUNrGOMWrlzK1WJBdxrB3JJQZwWtg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/traverse": "^7.29.7",
+				"@babel/types": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-module-imports": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+			"integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/traverse": "^7.29.7",
+				"@babel/types": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-module-transforms": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+			"integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-imports": "^7.29.7",
+				"@babel/helper-validator-identifier": "^7.29.7",
+				"@babel/traverse": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/helper-optimise-call-expression": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.29.7.tgz",
+			"integrity": "sha512-+kmGVjcT9RGYzoDwdwEqEvGgKe3BYq+O1iGzjFubaNgZHwYHP6lsF2Yghf4kEuv9BV7tYDZ913aBW9am6YKong==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/types": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-plugin-utils": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz",
+			"integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-remap-async-to-generator": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.29.7.tgz",
+			"integrity": "sha512-16AMiW26DbXWBbr3B8wNozKM0ydMLB892vaOaJW/fPJdnT8vJk5sdkQcU/isqUxyCE0cEoa8wZOcbgDuC4b6Og==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.29.7",
+				"@babel/helper-wrap-function": "^7.29.7",
+				"@babel/traverse": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/helper-replace-supers": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.29.7.tgz",
+			"integrity": "sha512-atfGXWSeCiF4DnKZIfmJfQRkSw9b9gNNXR1kqKjbhG4pGYCOnkp8OcTB8E3NXjBu8NpheSnOeNKz8KT7UNFTmQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-member-expression-to-functions": "^7.29.7",
+				"@babel/helper-optimise-call-expression": "^7.29.7",
+				"@babel/traverse": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.29.7.tgz",
+			"integrity": "sha512-brcMGQaVzIeUb+6/bs1Av0f8YuNNjKY2JyvfRCsFuFsdKccEQ5Ges2y74D74NZ1Rz8lKJ9ksJkfqwQFJ/iNEyQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/traverse": "^7.29.7",
+				"@babel/types": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-string-parser": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+			"integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-validator-identifier": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+			"integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-validator-option": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+			"integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helper-wrap-function": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.29.7.tgz",
+			"integrity": "sha512-iES0Skag9ERIF68aXadpO6dbXa03mNWK3sEqJaMnLNs/eC3l0lkImdfoy6Y09/SfkpawdAB4RjQ7PVA7TcVGdw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/template": "^7.29.7",
+				"@babel/traverse": "^7.29.7",
+				"@babel/types": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/helpers": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+			"integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/template": "^7.29.7",
+				"@babel/types": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/parser": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
+			"integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/types": "^7.29.7"
+			},
+			"bin": {
+				"parser": "bin/babel-parser.js"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.29.7.tgz",
+			"integrity": "sha512-j8SrR0zLZrRsC09DlszEx8FpMiwukKffYXMK0d5LmOglO7vGG6sz/BR/20yHqWH+Lnn31JTt2PE3hIWNgM2J6w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7",
+				"@babel/traverse": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/plugin-bugfix-safari-class-field-initializer-scope": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.29.7.tgz",
+			"integrity": "sha512-r8j8escF+U2FUHo0KOhPUdMzUO+jp9fInva6+ACVAF3Y97Ev+5iNZwiqTghmzNeWwDkOPlYuTcfb1vDaoZKmAQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.29.7.tgz",
+			"integrity": "sha512-GE1TFSiuFeGsCxmYXZl8HwoPrVlwe4rHPFE8weieGKZqnDORK+Ar3vgWMgW+AOxQ6/2TgLSKx9p6W7O4rC6qgQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/plugin-bugfix-safari-rest-destructuring-rhs-array": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-rest-destructuring-rhs-array/-/plugin-bugfix-safari-rest-destructuring-rhs-array-7.29.7.tgz",
+			"integrity": "sha512-oBNVCvnO5tND+xSopWvV8WNGfpTfgP4Zr/YXXSj8zfmcPktp5Ku/aZlsIowgSD4fjmgHn6sGmB9APVsU5zOdhA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.29.7.tgz",
+			"integrity": "sha512-QQt9qKHZ2sg/kivaLr7lnQr8HVrQDdBNSfCsTjiDxRuX/K5ORyKq+Bu8Xr0cDE3Dfkv0cw28Ve0EKyKMvulkOw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.29.7",
+				"@babel/plugin-transform-optional-chaining": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.13.0"
+			}
+		},
+		"node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.29.7.tgz",
+			"integrity": "sha512-pn6QacGLgvCcwc+syUhKE/qSjV2D1IHDB84RNxWYSt1mW3K/SCtjinZ2p0cETJxAWBjPy3K/1lHwG5BjjPxNlw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7",
+				"@babel/traverse": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/plugin-proposal-private-property-in-object": {
+			"version": "7.21.0-placeholder-for-preset-env.2",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+			"integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-import-assertions": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.29.7.tgz",
+			"integrity": "sha512-/An1OCBN93thpBAGyfsK2pcf0jvju1SAtKkL2Ny++B5Sy6sqgzXDQH1cZxWbF96Wuk+bn41MDA9bLd4VVAw6rw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-import-attributes": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.29.7.tgz",
+			"integrity": "sha512-zGYcYfq/WmZ4V+kBIXQon9dSSc8ircGZqw9ZaNhhGj9nZkeBu1jHLBDQqYYi5WA9uawvA2sIMbry2nCFhf5Djg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-syntax-unicode-sets-regex": {
+			"version": "7.18.6",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+			"integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.18.6",
+				"@babel/helper-plugin-utils": "^7.18.6"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-arrow-functions": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.29.7.tgz",
+			"integrity": "sha512-N7zArUXWzAMzm+/N0uPBeVB3Fam5lMxtUwMmDK5f/IBBS7a7p1qeUoxd/6CckXoxUdgsntq1Dh8xNW06maZbDQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-async-generator-functions": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.29.7.tgz",
+			"integrity": "sha512-d98gXZkgswvkyohMBABkhm3GeXhYj8psWfwQ2C7gtfrKGTykQa/iOIi+JJhwMjPlZ6Vm2XN+DCf3Es1EoG4ZLA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7",
+				"@babel/helper-remap-async-to-generator": "^7.29.7",
+				"@babel/traverse": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-async-to-generator": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.29.7.tgz",
+			"integrity": "sha512-pcUb2SS+RMo9TWVBwKGI5ShtoG7R+zBsFmCKDa6fe8c+hPr3XJlZgoE5j6i8W7gDjhyvy+85vmYexanvXh3d1w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-imports": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7",
+				"@babel/helper-remap-async-to-generator": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-block-scoped-functions": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.29.7.tgz",
+			"integrity": "sha512-cUSmjh72N+rN4PrkFlN1dJwNCwjVp5d38/CQrEsFggkD10UiFlBFgdH3tv5dNsLuHY+3S8db2xCHjhZcv5WgvA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-block-scoping": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.29.7.tgz",
+			"integrity": "sha512-ONyr4+AZhKh8yKWInVxU9AXA9EbsyeLcL6V0dJy6M2/62vuvpGm29zzuymbTpdc451GEpDIdAyPLP3r+P61yKQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-class-properties": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.29.7.tgz",
+			"integrity": "sha512-GtcpjFvanPfzNQi3eTitsCqtRRmmqzpy/A+yhTR1HaZo1Ly3EA8ZXxlPyHdR8/IuRMYc3E4wdGBewB2QKQjAaA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-class-features-plugin": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-class-static-block": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.29.7.tgz",
+			"integrity": "sha512-kibJgmEdX2iMwsHY2tSZNDgj8PwIlCQz7FK9KuGKO8zsuoUwSEhoNnNVp/emKWrbY4HeO6kkXfdMqRKKKXBm2A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-class-features-plugin": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.12.0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-classes": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.29.7.tgz",
+			"integrity": "sha512-qV0OGGBVacduzQHE649JyCneOFI/maT+YKsO+K4Yi3xv2wTPNjM/W2o2gdzMwEAZz7fXNTHAe0NcSg30bIN69g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.29.7",
+				"@babel/helper-compilation-targets": "^7.29.7",
+				"@babel/helper-globals": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7",
+				"@babel/helper-replace-supers": "^7.29.7",
+				"@babel/traverse": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-computed-properties": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.29.7.tgz",
+			"integrity": "sha512-RK7/IyU5phpuCdBAuig5VkzG/EnbDaui5SQGdU9BFrHdV+mV4cUjLMQ9lJDjLNtWHsqtiefpGZUXQP2BiTYMsA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7",
+				"@babel/template": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-destructuring": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.29.7.tgz",
+			"integrity": "sha512-iPX8aD6H9zV5s7ZsqTdNocPN/MGQ5sSMnElKrktxjJRMnB2jN/1p2+R7GkfD6CAYoVFqy5A4XnSIUeGgJzIWpg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7",
+				"@babel/traverse": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-dotall-regex": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.29.7.tgz",
+			"integrity": "sha512-3qc18hsD2RdZiyJNDNc7HQpv6xbncwh8FYtxNFFzclSyh/trPD9KkVR9BDECUjDLvb7yJVF15GfYUuC+LMkkiQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-duplicate-keys": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.29.7.tgz",
+			"integrity": "sha512-6IvRRriEMqnBwD6chtxdLpMYCHWEzN+oL5cyQtjykya19UgzbmKhxmhZgKC/LHxS2nYr9Q/qYPZ5Lr6jOL9+yQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-duplicate-named-capturing-groups-regex": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.29.7.tgz",
+			"integrity": "sha512-2wiIyo2BjtgU7HufSeDnL9L2O7zr8jmhFKuSr65VpRkUiRKRNpb0mdlk56+XPPKoIrfHqzbMuglDvZun0RISsA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-dynamic-import": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.29.7.tgz",
+			"integrity": "sha512-giOlEm/EFjfjr+te9NsdjkUo2v4f8rS/SXPumRVHAtbNcyNlvtREkU1dZzaIDclNpnaVhlCqRdFKhJBjBikzLg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-explicit-resource-management": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-explicit-resource-management/-/plugin-transform-explicit-resource-management-7.29.7.tgz",
+			"integrity": "sha512-Rstj7coNz8sE+7Ju7ihpHLI564lsK5pUpNNlvptCIC/16E/S5hbl6n3kESPKdNRmqEWlpn5xpS5Q2dvXBsySLw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7",
+				"@babel/plugin-transform-destructuring": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-exponentiation-operator": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.29.7.tgz",
+			"integrity": "sha512-zFpMOTLZBdW5LfObqcSbL6kefg4R4eLdmvS0wbN9M6D5Mym/sKm9toOoWyVOa+xDjvCnuWcHls2YonXwHvH3CQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-export-namespace-from": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.29.7.tgz",
+			"integrity": "sha512-24B2nOy2TeJSMheqwPD4DDQOV/elLSIlKxjZt4i05H5AgdPdWR3n18HnNrcJ+j76WJd9gbwb9jPjNYUy6RautA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-for-of": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.29.7.tgz",
+			"integrity": "sha512-zeSIHh0+E1Um1WJRXCFlHQYu2ieJNdivLLjlBEp+dIBu3S51n+SZZmIXjxnItw6pz56Cn+KvK68BIBVsxq2JiQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-function-name": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.29.7.tgz",
+			"integrity": "sha512-otRWaHXE6fbAGkePvaj/kvs3HsqXfPhlnzwSOlnFgbqCPMd975dW+4wZ00WFBt+/YlBGcJwNrARQTOJOb4ZrIg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-compilation-targets": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7",
+				"@babel/traverse": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-json-strings": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.29.7.tgz",
+			"integrity": "sha512-RRnE2+eon1rJAq8MnoF1b5kTpY1vU88twHcvcKMrsqP/jxIRqDVs9iJB5fqPuqyeFAW0wJo4MlUIPpQCq/aRsg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-literals": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.29.7.tgz",
+			"integrity": "sha512-DZ/oLP21ZuWx1vKqnoNv6/tvEK48AQOBRai40CX9dTjGluvT/YZCyY3rryDtyUqCEoyNroy5KKPwX2iQCiRvyw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-logical-assignment-operators": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.29.7.tgz",
+			"integrity": "sha512-A0H91hh6W8MFRkp5TqJmMr39jzGD1A1E1Ysiv2O06Sfbhkapm+XyIzxWCEh5kqwOZ1/8QZ0dY3SeQ7XBqfJd5Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-member-expression-literals": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.29.7.tgz",
+			"integrity": "sha512-hl1kwFZCCiDyfH25Xmco9jTrkPgnS9pmOzSG7W5I4SaGbLeqKv417hcU2RKmaxoPEgsoJh7ZPOrnPGq99bHoUg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-modules-amd": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.29.7.tgz",
+			"integrity": "sha512-fxtQoH3m5ywUSIfaH0FGCzWu4McsYon5bD3K4XnskC7f+OyQMj7rsOMi4NvvmJ83WwBAg4UCe+ov4VZlqEvyew==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-transforms": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-modules-commonjs": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.29.7.tgz",
+			"integrity": "sha512-j0vCldybPC5b5dwCQOJ21uKtHzt7hxLygJTg9eF1ScfaikEDNfzn94XoW5Fi+seBR0nCyL23xaBFFkq7dTM8XQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-transforms": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-modules-systemjs": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.29.7.tgz",
+			"integrity": "sha512-TM2ZcQLoG2/y4HODiStCo10DibYhWhGWAwVv+EQKmG/7GFl0N+AAmUiXOMKM+aiJ9XBJ9AHVZBvTzMnJ2sM3cQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-transforms": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7",
+				"@babel/helper-validator-identifier": "^7.29.7",
+				"@babel/traverse": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-modules-umd": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.29.7.tgz",
+			"integrity": "sha512-B4UkaTK3QpgCwJnrxKfMPKdo92CN7OKXAlpAAnM3UPu0Q0lCCk57ylA9AJbRy2v8dDKOPAAWcoR6CMyeoHwRCA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-transforms": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.29.7.tgz",
+			"integrity": "sha512-vuFoLwr4qnv2xbZ16SQd6uPcH5FNrLHhk/Jzo++0XJFcaDsr4gjJVg6j398oMHiC+83k/GiBzviwF5KBJkPUtQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-new-target": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.29.7.tgz",
+			"integrity": "sha512-fEo41GmsOUhOBlw8ioo6zvjX5Xc2Lqkzlyfqbpsk3eB6TReV18uhxZ0esfEokVbY2+PVJAQHNKxER6lGrzNd3A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.29.7.tgz",
+			"integrity": "sha512-idmp1dFaekP9GbcMvG24Kvw2BfhFZjHnNJCkV4WuIY4PskJzwI3f1N5OdgYke38T7rftO6ERulFRn2cFeZwRkg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-numeric-separator": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.29.7.tgz",
+			"integrity": "sha512-zR7fv/z14OjgHl4AgRtkDBvBMhIzCxqV/qN/2BCRC7LjFwvuzjYe7gDWxC4Wl/SNsLM6SE1IWvRPYMgSJaUvNw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-object-rest-spread": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.29.7.tgz",
+			"integrity": "sha512-Ld98jn4c0smUywL57m7SgsHq3OpThOa6LqZJif3G6jYOovPleoFhVrBJ1WegRApSFB2wu4+RelAj9AC9G08Z4A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-compilation-targets": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7",
+				"@babel/plugin-transform-destructuring": "^7.29.7",
+				"@babel/plugin-transform-parameters": "^7.29.7",
+				"@babel/traverse": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-object-super": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.29.7.tgz",
+			"integrity": "sha512-Ea/diGcw0twB5IlZPO5sgET6fJsLJqPABqTuFWIR+iMPGPZJkATEIWx0wa+aEQ5UY1CBQyP/gkAiLEqn1vBiQA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7",
+				"@babel/helper-replace-supers": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-optional-catch-binding": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.29.7.tgz",
+			"integrity": "sha512-sLsyndxK2VwX6yNUOakMb7Sh553ZTe/vVM1XJ+9Z5aW1ytsc8xOIwmyk05NNjN60vkc5/KqoTH6hB4V41LJhng==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-optional-chaining": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.29.7.tgz",
+			"integrity": "sha512-6GM1dhvK3gNODkXcEcMCOLEDCLSoZ/sBbro2Ax8HURyasQ4NshagQixkRFdh5niI6E4gmA/jYI/4aT7rRos3ZQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-parameters": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.29.7.tgz",
+			"integrity": "sha512-ZDOBqV/qLYJI0YElr8DcENEyARsFQeESqWXH6gZlghYXuPPjvweuDhP4VyEi4BlUBlLRFZVjxoZDMjxhLW766g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-private-methods": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.29.7.tgz",
+			"integrity": "sha512-/6Rz4DK1ETDEM/bWHsPHcaEe7ZaT1EqSXjtSP/L0DijOYuaUhiRiOKcwpZ8P7zR4xXEHc2ITdiCgBm9Tpyv9ug==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-class-features-plugin": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-private-property-in-object": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.29.7.tgz",
+			"integrity": "sha512-+BNo06dnrzdNNqCm1X6YUaVv0DKk8Q+JYcoZfOkLhYWNCXzlwTSRq8zGWayT1csjcpNXV9CQTBRRbmTLZac5cA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-annotate-as-pure": "^7.29.7",
+				"@babel/helper-create-class-features-plugin": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-property-literals": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.29.7.tgz",
+			"integrity": "sha512-bOMRLQuI0A5ZqHq3OWJ89/rXpJ/NJrbVhXiP4zwPGMs6kpcVsuTUNjwoE30K0Qm3mf48a/TnRYYD6vPNqcg6jA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-regenerator": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.29.7.tgz",
+			"integrity": "sha512-rNNFV0DBAJp988xW2DOntfDoYn1eR8GGF5AT5vYc+rjyfaQkM242c9tZUHHPe7KYaiJizXPWhQTzzdbXySyhBw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-regexp-modifiers": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.29.7.tgz",
+			"integrity": "sha512-mB5Fs0VWrJ42ZCmc8114v60qetdaUVNkj9PmSZRmanCZM3S9hm0CFRLjRmYIsuXav14l2jvZ+4T8iiCGnhj3nQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-reserved-words": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.29.7.tgz",
+			"integrity": "sha512-5+YhdpVgmfSmwZyLMftfaiffLRMHjzIRHFHHLdibcSyJm2pasMrKHrO3Ptrt2DRshjvpgjEJJ1zVW14WPq/6QA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-shorthand-properties": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.29.7.tgz",
+			"integrity": "sha512-I+WYbGBAiCn7nA6xBrlgPH+MB7HWb4u8pv5S0Pv7OtwNvIFvCCb24YlttKEeUFVurfBCEaOTnuhlqsb7f0Z5Dg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-spread": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.29.7.tgz",
+			"integrity": "sha512-/u5K1QWada7tbYNqTjMh96718g9NTwh9tfPJMsSmVsQwGT447FskV+KcfeXkXq2GWki4EM/MuTdmBec+hOuVTQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7",
+				"@babel/helper-skip-transparent-expression-wrappers": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-sticky-regex": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.29.7.tgz",
+			"integrity": "sha512-BCHzNYJGe9l7EpwwDBN/ztlL2NYFFq8hp9ddjtUEM9f2O7S7kKV/lL6Fwo7IF7NSkYhPK2vO+86nIGltA90MsA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-template-literals": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.29.7.tgz",
+			"integrity": "sha512-NCSEJ4sLFU2gqAub45HYh4fus2yQ36rr6ei6vpU7NdoJqCpxvEG8E6eJpscGyXP3VHD2Ny+fSXr04k1hoUrFqA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-typeof-symbol": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.29.7.tgz",
+			"integrity": "sha512-223mNGoTkBiTEWFoK+Q6Go3tueMRclO8vxxxxquNCYuNI4jWOofFKJRRDu6SDrB8Sgo1UEGW9T4GAQ8ZyRso1A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-unicode-escapes": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.29.7.tgz",
+			"integrity": "sha512-jCfXxSjf94lf4E0hKE0AByxF6F3/pVFqRdUUNkDJhsY0m1ZKjnN6ZYyMeHNpzflxb/0q5b7t3p+BE+SLF1WOtA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-unicode-property-regex": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.29.7.tgz",
+			"integrity": "sha512-OgZ+zoAJgZLUCunsTRQ5LAjOywDv5zzZ2/hQ5aMw1pGXyY2rtE8/chXYUmu3AlVHKpm10KEdG9aMwbI/K76ZGw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-unicode-regex": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.29.7.tgz",
+			"integrity": "sha512-7D/x/23/d/3VqZ0QA+LGbZMlGwZjztBygSWWWsfTPoQ1oQ6Q1P6Mr3d0kk42XabyUVw+fha3LqdRsFqeKqvCyA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/plugin-transform-unicode-sets-regex": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.29.7.tgz",
+			"integrity": "sha512-BLOhLht9DOJwIxlmp91wHvkXv1lguuHS3/FwUO8HL1H0u8s4hR1gASVFyilu9iGtcTRYqjTZmlsFFeQletntEg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-create-regexp-features-plugin": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0"
+			}
+		},
+		"node_modules/@babel/preset-env": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.29.7.tgz",
+			"integrity": "sha512-GYzX36n1nsciIb0uyH0GHwxwtNwPQIcpxSeiVLDtG/B7jB5xXgchnmL1f/jCX5o+pwnaDBtO60ONSJhEBJfxYA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/compat-data": "^7.29.7",
+				"@babel/helper-compilation-targets": "^7.29.7",
+				"@babel/helper-plugin-utils": "^7.29.7",
+				"@babel/helper-validator-option": "^7.29.7",
+				"@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.29.7",
+				"@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.29.7",
+				"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.29.7",
+				"@babel/plugin-bugfix-safari-rest-destructuring-rhs-array": "^7.29.7",
+				"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.29.7",
+				"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.29.7",
+				"@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
+				"@babel/plugin-syntax-import-assertions": "^7.29.7",
+				"@babel/plugin-syntax-import-attributes": "^7.29.7",
+				"@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+				"@babel/plugin-transform-arrow-functions": "^7.29.7",
+				"@babel/plugin-transform-async-generator-functions": "^7.29.7",
+				"@babel/plugin-transform-async-to-generator": "^7.29.7",
+				"@babel/plugin-transform-block-scoped-functions": "^7.29.7",
+				"@babel/plugin-transform-block-scoping": "^7.29.7",
+				"@babel/plugin-transform-class-properties": "^7.29.7",
+				"@babel/plugin-transform-class-static-block": "^7.29.7",
+				"@babel/plugin-transform-classes": "^7.29.7",
+				"@babel/plugin-transform-computed-properties": "^7.29.7",
+				"@babel/plugin-transform-destructuring": "^7.29.7",
+				"@babel/plugin-transform-dotall-regex": "^7.29.7",
+				"@babel/plugin-transform-duplicate-keys": "^7.29.7",
+				"@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.29.7",
+				"@babel/plugin-transform-dynamic-import": "^7.29.7",
+				"@babel/plugin-transform-explicit-resource-management": "^7.29.7",
+				"@babel/plugin-transform-exponentiation-operator": "^7.29.7",
+				"@babel/plugin-transform-export-namespace-from": "^7.29.7",
+				"@babel/plugin-transform-for-of": "^7.29.7",
+				"@babel/plugin-transform-function-name": "^7.29.7",
+				"@babel/plugin-transform-json-strings": "^7.29.7",
+				"@babel/plugin-transform-literals": "^7.29.7",
+				"@babel/plugin-transform-logical-assignment-operators": "^7.29.7",
+				"@babel/plugin-transform-member-expression-literals": "^7.29.7",
+				"@babel/plugin-transform-modules-amd": "^7.29.7",
+				"@babel/plugin-transform-modules-commonjs": "^7.29.7",
+				"@babel/plugin-transform-modules-systemjs": "^7.29.7",
+				"@babel/plugin-transform-modules-umd": "^7.29.7",
+				"@babel/plugin-transform-named-capturing-groups-regex": "^7.29.7",
+				"@babel/plugin-transform-new-target": "^7.29.7",
+				"@babel/plugin-transform-nullish-coalescing-operator": "^7.29.7",
+				"@babel/plugin-transform-numeric-separator": "^7.29.7",
+				"@babel/plugin-transform-object-rest-spread": "^7.29.7",
+				"@babel/plugin-transform-object-super": "^7.29.7",
+				"@babel/plugin-transform-optional-catch-binding": "^7.29.7",
+				"@babel/plugin-transform-optional-chaining": "^7.29.7",
+				"@babel/plugin-transform-parameters": "^7.29.7",
+				"@babel/plugin-transform-private-methods": "^7.29.7",
+				"@babel/plugin-transform-private-property-in-object": "^7.29.7",
+				"@babel/plugin-transform-property-literals": "^7.29.7",
+				"@babel/plugin-transform-regenerator": "^7.29.7",
+				"@babel/plugin-transform-regexp-modifiers": "^7.29.7",
+				"@babel/plugin-transform-reserved-words": "^7.29.7",
+				"@babel/plugin-transform-shorthand-properties": "^7.29.7",
+				"@babel/plugin-transform-spread": "^7.29.7",
+				"@babel/plugin-transform-sticky-regex": "^7.29.7",
+				"@babel/plugin-transform-template-literals": "^7.29.7",
+				"@babel/plugin-transform-typeof-symbol": "^7.29.7",
+				"@babel/plugin-transform-unicode-escapes": "^7.29.7",
+				"@babel/plugin-transform-unicode-property-regex": "^7.29.7",
+				"@babel/plugin-transform-unicode-regex": "^7.29.7",
+				"@babel/plugin-transform-unicode-sets-regex": "^7.29.7",
+				"@babel/preset-modules": "0.1.6-no-external-plugins",
+				"babel-plugin-polyfill-corejs2": "^0.4.15",
+				"babel-plugin-polyfill-corejs3": "^0.14.0",
+				"babel-plugin-polyfill-regenerator": "^0.6.6",
+				"core-js-compat": "^3.48.0",
+				"semver": "^6.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0"
+			}
+		},
+		"node_modules/@babel/preset-env/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"dev": true,
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/@babel/preset-modules": {
+			"version": "0.1.6-no-external-plugins",
+			"resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
+			"integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-plugin-utils": "^7.0.0",
+				"@babel/types": "^7.4.4",
+				"esutils": "^2.0.2"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
+			}
+		},
+		"node_modules/@babel/runtime": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+			"integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/template": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+			"integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.29.7",
+				"@babel/parser": "^7.29.7",
+				"@babel/types": "^7.29.7"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/traverse": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz",
+			"integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/code-frame": "^7.29.7",
+				"@babel/generator": "^7.29.7",
+				"@babel/helper-globals": "^7.29.7",
+				"@babel/parser": "^7.29.7",
+				"@babel/template": "^7.29.7",
+				"@babel/types": "^7.29.7",
+				"debug": "^4.3.1"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/@babel/types": {
+			"version": "7.29.7",
+			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
+			"integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-string-parser": "^7.29.7",
+				"@babel/helper-validator-identifier": "^7.29.7"
+			},
+			"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/@blazediff/core": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/@blazediff/core/-/core-1.9.1.tgz",
+			"integrity": "sha512-ehg3jIkYKulZh+8om/O25vkvSsXXwC+skXmyA87FFx6A/45eqOkZsBltMw/TVteb0mloiGT8oGRTcjRAz66zaA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@braintree/sanitize-url": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-7.1.2.tgz",
+			"integrity": "sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@canvas/image-data": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@canvas/image-data/-/image-data-1.1.0.tgz",
+			"integrity": "sha512-QdObRRjRbcXGmM1tmJ+MrHcaz1MftF2+W7YI+MsphnsCrmtyfS0d5qJbk0MeSbUeyM/jCb0hmnkXPsy026L7dA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@chevrotain/types": {
+			"version": "11.1.2",
+			"resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-11.1.2.tgz",
+			"integrity": "sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw==",
+			"dev": true,
+			"license": "Apache-2.0"
+		},
+		"node_modules/@chromatic-com/storybook": {
+			"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": "^13.3.4",
+				"filesize": "^10.0.12",
+				"jsonfile": "^6.1.0",
+				"strip-ansi": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=20.0.0",
+				"yarn": ">=1.22.18"
+			},
+			"peerDependencies": {
+				"storybook": "^0.0.0-0 || ^10.1.0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0"
+			}
+		},
+		"node_modules/@emnapi/core": {
+			"version": "1.9.2",
+			"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
+			"integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@emnapi/wasi-threads": "1.2.1",
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@emnapi/runtime": {
+			"version": "1.10.0",
+			"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+			"integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@emnapi/wasi-threads": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+			"integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@esbuild/aix-ppc64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.7.tgz",
+			"integrity": "sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"aix"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/android-arm": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.7.tgz",
+			"integrity": "sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/android-arm64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.7.tgz",
+			"integrity": "sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/android-x64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.7.tgz",
+			"integrity": "sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/darwin-arm64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.7.tgz",
+			"integrity": "sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/darwin-x64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.7.tgz",
+			"integrity": "sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/freebsd-arm64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.7.tgz",
+			"integrity": "sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/freebsd-x64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.7.tgz",
+			"integrity": "sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-arm": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.7.tgz",
+			"integrity": "sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-arm64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.7.tgz",
+			"integrity": "sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-ia32": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.7.tgz",
+			"integrity": "sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-loong64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.7.tgz",
+			"integrity": "sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==",
+			"cpu": [
+				"loong64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-mips64el": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.7.tgz",
+			"integrity": "sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==",
+			"cpu": [
+				"mips64el"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-ppc64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.7.tgz",
+			"integrity": "sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-riscv64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.7.tgz",
+			"integrity": "sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-s390x": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.7.tgz",
+			"integrity": "sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==",
+			"cpu": [
+				"s390x"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-x64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.7.tgz",
+			"integrity": "sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/netbsd-arm64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.7.tgz",
+			"integrity": "sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/netbsd-x64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.7.tgz",
+			"integrity": "sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openbsd-arm64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.7.tgz",
+			"integrity": "sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openbsd-x64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.7.tgz",
+			"integrity": "sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openharmony-arm64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.7.tgz",
+			"integrity": "sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openharmony"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/sunos-x64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.7.tgz",
+			"integrity": "sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"sunos"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/win32-arm64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.7.tgz",
+			"integrity": "sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/win32-ia32": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.7.tgz",
+			"integrity": "sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/win32-x64": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.7.tgz",
+			"integrity": "sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@eslint-community/eslint-utils": {
+			"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": {
+				"eslint-visitor-keys": "^3.4.3"
+			},
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			},
+			"peerDependencies": {
+				"eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+			}
+		},
+		"node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+			"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/@eslint-community/regexpp": {
+			"version": "4.12.2",
+			"resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+			"integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+			}
+		},
+		"node_modules/@eslint/compat": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-1.4.1.tgz",
+			"integrity": "sha512-cfO82V9zxxGBxcQDr1lfaYB7wykTa0b00mGa36FrJl7iTFd0Z2cHfEYuxcBRP/iNijCsWsEkA+jzT8hGYmv33w==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@eslint/core": "^0.17.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"peerDependencies": {
+				"eslint": "^8.40 || 9"
+			},
+			"peerDependenciesMeta": {
+				"eslint": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@eslint/config-array": {
+			"version": "0.21.2",
+			"resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.2.tgz",
+			"integrity": "sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@eslint/object-schema": "^2.1.7",
+				"debug": "^4.3.1",
+				"minimatch": "^3.1.5"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			}
+		},
+		"node_modules/@eslint/config-helpers": {
+			"version": "0.4.2",
+			"resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+			"integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@eslint/core": "^0.17.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			}
+		},
+		"node_modules/@eslint/core": {
+			"version": "0.17.0",
+			"resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+			"integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@types/json-schema": "^7.0.15"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			}
+		},
+		"node_modules/@eslint/eslintrc": {
+			"version": "3.3.5",
+			"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.5.tgz",
+			"integrity": "sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ajv": "^6.14.0",
+				"debug": "^4.3.2",
+				"espree": "^10.0.1",
+				"globals": "^14.0.0",
+				"ignore": "^5.2.0",
+				"import-fresh": "^3.2.1",
+				"js-yaml": "^4.1.1",
+				"minimatch": "^3.1.5",
+				"strip-json-comments": "^3.1.1"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/@eslint/eslintrc/node_modules/ajv": {
+			"version": "6.15.0",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
+			"integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/@eslint/eslintrc/node_modules/globals": {
+			"version": "14.0.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+			"integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+			"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@eslint/js": {
+			"version": "9.39.2",
+			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
+			"integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"url": "https://eslint.org/donate"
+			}
+		},
+		"node_modules/@eslint/object-schema": {
+			"version": "2.1.7",
+			"resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+			"integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			}
+		},
+		"node_modules/@eslint/plugin-kit": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+			"integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@eslint/core": "^0.17.0",
+				"levn": "^0.4.1"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			}
+		},
+		"node_modules/@floating-ui/core": {
+			"version": "1.7.5",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+			"integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/utils": "^0.2.11"
+			}
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "1.7.6",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+			"integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/core": "^1.7.5",
+				"@floating-ui/utils": "^0.2.11"
+			}
+		},
+		"node_modules/@floating-ui/utils": {
+			"version": "0.2.11",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+			"integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@hono/node-server": {
+			"version": "1.19.14",
+			"resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.14.tgz",
+			"integrity": "sha512-GwtvgtXxnWsucXvbQXkRgqksiH2Qed37H9xHZocE5sA3N8O8O8/8FA3uclQXxXVzc9XBZuEOMK7+r02FmSpHtw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18.14.1"
+			},
+			"peerDependencies": {
+				"hono": "^4"
+			}
+		},
+		"node_modules/@humanfs/core": {
+			"version": "0.19.2",
+			"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
+			"integrity": "sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@humanfs/types": "^0.15.0"
+			},
+			"engines": {
+				"node": ">=18.18.0"
+			}
+		},
+		"node_modules/@humanfs/node": {
+			"version": "0.16.8",
+			"resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.8.tgz",
+			"integrity": "sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@humanfs/core": "^0.19.2",
+				"@humanfs/types": "^0.15.0",
+				"@humanwhocodes/retry": "^0.4.0"
+			},
+			"engines": {
+				"node": ">=18.18.0"
+			}
+		},
+		"node_modules/@humanfs/types": {
+			"version": "0.15.0",
+			"resolved": "https://registry.npmjs.org/@humanfs/types/-/types-0.15.0.tgz",
+			"integrity": "sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=18.18.0"
+			}
+		},
+		"node_modules/@humanwhocodes/module-importer": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+			"integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=12.22"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/nzakas"
+			}
+		},
+		"node_modules/@humanwhocodes/retry": {
+			"version": "0.4.3",
+			"resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+			"integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=18.18"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/nzakas"
+			}
+		},
+		"node_modules/@iconify/types": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+			"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@iconify/utils": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.1.3.tgz",
+			"integrity": "sha512-LPKOXPn/zV+zis1oOfGWogaXVpqUybF3ZS6SCZIsz8vg0ivVp9+fVqyYB7xq0aiST/VhUQYGO1qo6uoYSiEJqw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@antfu/install-pkg": "^1.1.0",
+				"@iconify/types": "^2.0.0",
+				"import-meta-resolve": "^4.2.0"
+			}
+		},
+		"node_modules/@img/sharp-darwin-arm64": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
+			"integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "Apache-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			},
+			"optionalDependencies": {
+				"@img/sharp-libvips-darwin-arm64": "1.0.4"
+			}
+		},
+		"node_modules/@img/sharp-darwin-x64": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
+			"integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "Apache-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			},
+			"optionalDependencies": {
+				"@img/sharp-libvips-darwin-x64": "1.0.4"
+			}
+		},
+		"node_modules/@img/sharp-libvips-darwin-arm64": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
+			"integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "LGPL-3.0-or-later",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/@img/sharp-libvips-darwin-x64": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
+			"integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "LGPL-3.0-or-later",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/@img/sharp-libvips-linux-arm": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
+			"integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "LGPL-3.0-or-later",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/@img/sharp-libvips-linux-arm64": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
+			"integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "LGPL-3.0-or-later",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/@img/sharp-libvips-linux-s390x": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz",
+			"integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==",
+			"cpu": [
+				"s390x"
+			],
+			"dev": true,
+			"license": "LGPL-3.0-or-later",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/@img/sharp-libvips-linux-x64": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
+			"integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "LGPL-3.0-or-later",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
+			"integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "LGPL-3.0-or-later",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/@img/sharp-libvips-linuxmusl-x64": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
+			"integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "LGPL-3.0-or-later",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/@img/sharp-linux-arm": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
+			"integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			},
+			"optionalDependencies": {
+				"@img/sharp-libvips-linux-arm": "1.0.5"
+			}
+		},
+		"node_modules/@img/sharp-linux-arm64": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
+			"integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			},
+			"optionalDependencies": {
+				"@img/sharp-libvips-linux-arm64": "1.0.4"
+			}
+		},
+		"node_modules/@img/sharp-linux-s390x": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz",
+			"integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==",
+			"cpu": [
+				"s390x"
+			],
+			"dev": true,
+			"license": "Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			},
+			"optionalDependencies": {
+				"@img/sharp-libvips-linux-s390x": "1.0.4"
+			}
+		},
+		"node_modules/@img/sharp-linux-x64": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
+			"integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			},
+			"optionalDependencies": {
+				"@img/sharp-libvips-linux-x64": "1.0.4"
+			}
+		},
+		"node_modules/@img/sharp-linuxmusl-arm64": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
+			"integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			},
+			"optionalDependencies": {
+				"@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
+			}
+		},
+		"node_modules/@img/sharp-linuxmusl-x64": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
+			"integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "Apache-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			},
+			"optionalDependencies": {
+				"@img/sharp-libvips-linuxmusl-x64": "1.0.4"
+			}
+		},
+		"node_modules/@img/sharp-wasm32": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz",
+			"integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==",
+			"cpu": [
+				"wasm32"
+			],
+			"dev": true,
+			"license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+			"optional": true,
+			"dependencies": {
+				"@emnapi/runtime": "^1.2.0"
+			},
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/@img/sharp-win32-ia32": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz",
+			"integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "Apache-2.0 AND LGPL-3.0-or-later",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/@img/sharp-win32-x64": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
+			"integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "Apache-2.0 AND LGPL-3.0-or-later",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			}
+		},
+		"node_modules/@internationalized/date": {
+			"version": "3.12.2",
+			"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.2.tgz",
+			"integrity": "sha512-FY1Y+H64NDs+HAF6omlnWxm3mEpfgaCSWtL5l551ZZfImA+kGjPFgrnJrGjH6lfmLL0g8Z/mBu1R3kufeCp6Jw==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@swc/helpers": "^0.5.0"
+			}
+		},
+		"node_modules/@isaacs/fs-minipass": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+			"integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"minipass": "^7.0.4"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/@jridgewell/gen-mapping": {
+			"version": "0.3.13",
+			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+			"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.5.0",
+				"@jridgewell/trace-mapping": "^0.3.24"
+			}
+		},
+		"node_modules/@jridgewell/remapping": {
+			"version": "2.3.5",
+			"resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+			"integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/gen-mapping": "^0.3.5",
+				"@jridgewell/trace-mapping": "^0.3.24"
+			}
+		},
+		"node_modules/@jridgewell/resolve-uri": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@jridgewell/source-map": {
+			"version": "0.3.11",
+			"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
+			"integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/gen-mapping": "^0.3.5",
+				"@jridgewell/trace-mapping": "^0.3.25"
+			}
+		},
+		"node_modules/@jridgewell/sourcemap-codec": {
+			"version": "1.5.5",
+			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+			"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@jridgewell/trace-mapping": {
+			"version": "0.3.31",
+			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+			"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/resolve-uri": "^3.1.0",
+				"@jridgewell/sourcemap-codec": "^1.4.14"
+			}
+		},
+		"node_modules/@lucide/svelte": {
+			"version": "0.515.0",
+			"resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-0.515.0.tgz",
+			"integrity": "sha512-CEAyqcZmNBfYzVgaRmK2RFJP5tnbXxekRyDk0XX/eZQRfsJmkDvmQwXNX8C869BgNeryzmrRyjHhUL6g9ZOHNA==",
+			"dev": true,
+			"license": "ISC",
+			"peerDependencies": {
+				"svelte": "^5"
+			}
+		},
+		"node_modules/@mdx-js/react": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz",
+			"integrity": "sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdx": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			},
+			"peerDependencies": {
+				"@types/react": ">=16",
+				"react": ">=16"
+			}
+		},
+		"node_modules/@mermaid-js/parser": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@mermaid-js/parser/-/parser-1.1.1.tgz",
+			"integrity": "sha512-VuHdsYMK1bT6X2JbcAaWAhugTRvRBRyuZgd+c22swUeI9g/ntaxF7CY7dYarhZovofCbUNO0G7JesfmNtjYOCw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@chevrotain/types": "~11.1.1"
+			}
+		},
+		"node_modules/@modelcontextprotocol/sdk": {
+			"version": "1.26.0",
+			"resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.26.0.tgz",
+			"integrity": "sha512-Y5RmPncpiDtTXDbLKswIJzTqu2hyBKxTNsgKqKclDbhIgg1wgtf1fRuvxgTnRfcnxtvvgbIEcqUOzZrJ6iSReg==",
+			"dev": true,
+			"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/@napi-rs/canvas": {
+			"version": "0.1.100",
+			"resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.100.tgz",
+			"integrity": "sha512-xglYA6q3XO5P3BNJYxVZ1IV7DLVjp1Py6nwag88YntrS+3vKHyYcMqXVS4ZztJmwz2uGvz1FWhI/4LgbR5uQDA==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"workspaces": [
+				"e2e/*"
+			],
+			"engines": {
+				"node": ">= 10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/Brooooooklyn"
+			},
+			"optionalDependencies": {
+				"@napi-rs/canvas-android-arm64": "0.1.100",
+				"@napi-rs/canvas-darwin-arm64": "0.1.100",
+				"@napi-rs/canvas-darwin-x64": "0.1.100",
+				"@napi-rs/canvas-linux-arm-gnueabihf": "0.1.100",
+				"@napi-rs/canvas-linux-arm64-gnu": "0.1.100",
+				"@napi-rs/canvas-linux-arm64-musl": "0.1.100",
+				"@napi-rs/canvas-linux-riscv64-gnu": "0.1.100",
+				"@napi-rs/canvas-linux-x64-gnu": "0.1.100",
+				"@napi-rs/canvas-linux-x64-musl": "0.1.100",
+				"@napi-rs/canvas-win32-arm64-msvc": "0.1.100",
+				"@napi-rs/canvas-win32-x64-msvc": "0.1.100"
+			}
+		},
+		"node_modules/@napi-rs/canvas-android-arm64": {
+			"version": "0.1.100",
+			"resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.100.tgz",
+			"integrity": "sha512-hjhCKhntPv9+t4ckHymdx0phYNcVW+GKQR6Lzw2zE+pOVjOplSmtx9nNNknTjbEDLcuLZqA1y8ufKg1XfgftzQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">= 10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/Brooooooklyn"
+			}
+		},
+		"node_modules/@napi-rs/canvas-darwin-arm64": {
+			"version": "0.1.100",
+			"resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.100.tgz",
+			"integrity": "sha512-2PcswRaC7Ly645DGt88///zuFDhJxJYdKAs1uU3mfk1atYkXufgcgLfBpk6Tm12nCQBaNt1wpybuPZ4qOhTo8A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/Brooooooklyn"
+			}
+		},
+		"node_modules/@napi-rs/canvas-darwin-x64": {
+			"version": "0.1.100",
+			"resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.100.tgz",
+			"integrity": "sha512-ePNZtj7pNIva/siZMg+HmbeozkIjqUIYdoymH8HaA3qK7LfzFN4WMBM8G6HQ9ZC+H3+Dnn5pqtiXpgLykaPOhw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/Brooooooklyn"
+			}
+		},
+		"node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
+			"version": "0.1.100",
+			"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.100.tgz",
+			"integrity": "sha512-d5cDB48oWFGU8/XPhUOFAlySgb/VAu7D+s8fi55K1Pcfg8aPplHWqMgibhVLU8ky7Pyg/fuiVLz4Nf3JrSTuUA==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/Brooooooklyn"
+			}
+		},
+		"node_modules/@napi-rs/canvas-linux-arm64-gnu": {
+			"version": "0.1.100",
+			"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.100.tgz",
+			"integrity": "sha512-rDxgxRu69RvDlX/bh9o22DxLsGr8EqsNgotL9+RwQE1S0b0cqeatqsw6aW45mukm0B42DIAaAacKaYQ8cqS1nw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/Brooooooklyn"
+			}
+		},
+		"node_modules/@napi-rs/canvas-linux-arm64-musl": {
+			"version": "0.1.100",
+			"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.100.tgz",
+			"integrity": "sha512-K3mDW66N+xT2/V439u1alFANiBUjdEx2gLiNYnCmUsva5jZMxWTjafBYwTzYK+EMFMHrUoabuU+T1BIP5CgbYQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/Brooooooklyn"
+			}
+		},
+		"node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
+			"version": "0.1.100",
+			"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.100.tgz",
+			"integrity": "sha512-mooqUBTIsccZpnoQC4NgrC1v6C1vof39etLNMnBwCY+p0gajWJvAHLGQ6g/gGyS5YrpDW+GefSN4+Cvcr08UWw==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/Brooooooklyn"
+			}
+		},
+		"node_modules/@napi-rs/canvas-linux-x64-gnu": {
+			"version": "0.1.100",
+			"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.100.tgz",
+			"integrity": "sha512-1eCvkDCazm7FFhsT7DfGOdSaHgZVK3bt/dSBl5EWHOWmnz+I7j8tPseJqqD81NF+MH21jKUK4wQSDjN0mdhnTg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/Brooooooklyn"
+			}
+		},
+		"node_modules/@napi-rs/canvas-linux-x64-musl": {
+			"version": "0.1.100",
+			"resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.100.tgz",
+			"integrity": "sha512-20arT6lnI19S68qNlii73TSEDbECNgzMz2EpldC1V3mZFuRkeujXkcebRk0LRJe9SEUAooYiLokfMViY8IX7yA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/Brooooooklyn"
+			}
+		},
+		"node_modules/@napi-rs/canvas-win32-arm64-msvc": {
+			"version": "0.1.100",
+			"resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-arm64-msvc/-/canvas-win32-arm64-msvc-0.1.100.tgz",
+			"integrity": "sha512-DZFFT1wIAg37LJw37yhMRFfjATd3vTQzjZ1Yki8u2vhO6Hi5VE6BVaGQ1aaDu7xb4iMErz+9EOwjpS7xcxFeBw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/Brooooooklyn"
+			}
+		},
+		"node_modules/@napi-rs/canvas-win32-x64-msvc": {
+			"version": "0.1.100",
+			"resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.100.tgz",
+			"integrity": "sha512-MyT1j3mHC2+Lu4pBi9mKyMJhtP6U7k7EldY7sj/uS5gJA65gTXt8MefJQXLJo5d/vZbuWmfxzkEUNc/urV3pHA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/Brooooooklyn"
+			}
+		},
+		"node_modules/@napi-rs/wasm-runtime": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
+			"integrity": "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@tybys/wasm-util": "^0.10.1"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/Brooooooklyn"
+			},
+			"peerDependencies": {
+				"@emnapi/core": "^1.7.1",
+				"@emnapi/runtime": "^1.7.1"
+			}
+		},
+		"node_modules/@neoconfetti/react": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@neoconfetti/react/-/react-1.0.0.tgz",
+			"integrity": "sha512-klcSooChXXOzIm+SE5IISIAn3bYzYfPjbX7D7HoqZL84oAfgREeSg5vSIaSFH+DaGzzvImTyWe1OyrJ67vik4A==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@oxc-parser/binding-android-arm-eabi": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-android-arm-eabi/-/binding-android-arm-eabi-0.127.0.tgz",
+			"integrity": "sha512-0LC7ye4hvqbIKxAzThzvswgHLFu2AURKzYLeSVvLdu2TBOYWQDmHnTqPLeA597BcUCxiLqLsS4CJ5uoI5WYWCQ==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-android-arm64": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-android-arm64/-/binding-android-arm64-0.127.0.tgz",
+			"integrity": "sha512-b5jtVTH6AU5CJXHNdj7Jj9IEiR9yVjjnwHzPJhGyHGPdcsZSzBCkS9GBbV33niRMvKthDwQRFRJfI4a+k4PvYg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-darwin-arm64": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-darwin-arm64/-/binding-darwin-arm64-0.127.0.tgz",
+			"integrity": "sha512-obCE8B7ISKkJidjlhv9xRGJPOSDG2Yu6PRga9Ruaz35uintHxbp1Ki/Yc71wx4rj3Edrm0a1kzG1TAwit0wFpg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-darwin-x64": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-darwin-x64/-/binding-darwin-x64-0.127.0.tgz",
+			"integrity": "sha512-JL6Xb5IwPQT8rUzlpsX7E+AgfcdNklXNPFp8pjCQQ5MQOQo5rtEB2ui+3Hgg9Sn7Y9Egj6YOLLiHhLpdAe12Aw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-freebsd-x64": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-freebsd-x64/-/binding-freebsd-x64-0.127.0.tgz",
+			"integrity": "sha512-SDQ/3MQFw58fqQz3Z1PhSKFF3JoCF4gmlNjziDm8X02tTahCw0qJbd7FGPDKw1i4VTBZene9JPyC3mHtSvi+wA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-linux-arm-gnueabihf": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.127.0.tgz",
+			"integrity": "sha512-Av+D1MIqzV0YMGPT9we2SIZaMKD7Cxs4CvXSx/yxaWHewZjYEjScpOf5igc8IILASViw4WTnjlwUdI1KzVtDHQ==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-linux-arm-musleabihf": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.127.0.tgz",
+			"integrity": "sha512-Cs2fdJ8cPpFdeebj6p4dag8A4+56hPvZ0AhQQzlaLswGz1tz7bXt1nETLeorrM9+AMcWFFkqxcXwDGfTVidY8g==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-linux-arm64-gnu": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.127.0.tgz",
+			"integrity": "sha512-qdOfTcT6SY8gsJrrV92uyEUyjqMGPpIB5JZUG6QN5dukYd+7/j0kX6MwK1DgQj39jtUYixxPiaRUiEN1+0CXgQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-linux-arm64-musl": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.127.0.tgz",
+			"integrity": "sha512-EoTCZneNFU/P2qrpEM+RHmQwt+CvDkyGESG6qhr7KaegXLZwePfbrkCDfAk8/rhxbDUVGsZILX+2tqPzFtoFWA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-linux-ppc64-gnu": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-0.127.0.tgz",
+			"integrity": "sha512-zALjmZYgxFLHjXeudcDF0xFGNydTAtkAeXAr2EuC17ywCyFxcmQra4w0BMde0Yi/re4Bi4iwEoEXtYN7l6eBLQ==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-linux-riscv64-gnu": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.127.0.tgz",
+			"integrity": "sha512-fPP8M6zQLS7Jz7o9d5ArUSuAuSK3e+WCYVrCpdzeCOejidtZExJ9tjhDrAd3HEPqARBCPmdpqxESPFqy44vkBQ==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-linux-riscv64-musl": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-0.127.0.tgz",
+			"integrity": "sha512-7IcC4Ao02oGpfnjt+X/oF4U2mllo2qoSkw5xxiXNKL9MCTsTiAC6616beOuehdxGcnz1bRoPC1RQ2f1GQDdN+g==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-linux-s390x-gnu": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.127.0.tgz",
+			"integrity": "sha512-pbXIhiNFHoqWeqDNLiJ9JkpHz1IM9k4DXa66x+1GTWMG7iLxtkXgE53iiuKSXwmk3zIYmaPVfBvgcAhS583K4Q==",
+			"cpu": [
+				"s390x"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-linux-x64-gnu": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.127.0.tgz",
+			"integrity": "sha512-MYCguB9RvBvlSd6gbuNI7QwiLoCCAlGnlRJFPrzLI6U1/9wkC/WK6LtBAUln55H1Ctqw45PWmqrobKoMhsYQzQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-linux-x64-musl": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-x64-musl/-/binding-linux-x64-musl-0.127.0.tgz",
+			"integrity": "sha512-5eY0B/bxf1xIUxb4NOTvOI3KWtBQfPWYyKAzgcrCt0mDibSZygVpO1Pz8bkeiSZ5Jj9+M09dkggG3H8I5d0Uyg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-openharmony-arm64": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-openharmony-arm64/-/binding-openharmony-arm64-0.127.0.tgz",
+			"integrity": "sha512-Gld0ajrFTUXNtdw20fVBuTQx66FA75nIVg+//pPfR3sXkuABB4mTBhl3r9JNzrJpgW//qiwxf0nWXUWGJSL3UQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openharmony"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-wasm32-wasi": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-wasm32-wasi/-/binding-wasm32-wasi-0.127.0.tgz",
+			"integrity": "sha512-T6KVD7rhLzFlwGRXMnxUFfkCZD8FHnb968wVXW1mXzgRFc5RNXOBY2mPPDZ77x5Ln76ltLMgtPg0cOkU1NSrEQ==",
+			"cpu": [
+				"wasm32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@emnapi/core": "1.9.2",
+				"@emnapi/runtime": "1.9.2",
+				"@napi-rs/wasm-runtime": "^1.1.4"
+			},
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-wasm32-wasi/node_modules/@emnapi/runtime": {
+			"version": "1.9.2",
+			"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.2.tgz",
+			"integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-win32-arm64-msvc": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.127.0.tgz",
+			"integrity": "sha512-Ujvw4X+LD1CCGULcsQcvb4YNVoBGqt+JHgNNzGGaCImELiZLk477ifUH53gIbE7EKd933NdTi25JWEr9K2HwXw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-win32-ia32-msvc": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-0.127.0.tgz",
+			"integrity": "sha512-0cwxKO7KHQQQfo4Uf4B2SQrhgm+cJaP9OvFFhx52Tkg4bezsacu83GB2/In5bC415Ueeym+kXdnge/57rbSfTw==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-parser/binding-win32-x64-msvc": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-parser/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.127.0.tgz",
+			"integrity": "sha512-rOrnSQSCbhI2kowr9XxE7m9a8oQXnBHjnS6j95LxxAnEZ0+Fz20WlRXG4ondQb+ejjt2KOsa65sE6++L6kUd+w==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			}
+		},
+		"node_modules/@oxc-project/types": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.127.0.tgz",
+			"integrity": "sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/Boshen"
+			}
+		},
+		"node_modules/@oxc-resolver/binding-android-arm-eabi": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-android-arm-eabi/-/binding-android-arm-eabi-11.20.0.tgz",
+			"integrity": "sha512-IjfWOXRgJFNdORDl+Uf1aibNgZY2guOD3zmOhx1BGVb/MIiqlFTdmjpQNplSN58lhWehnX4UNqC3QwpUo8pjJg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			]
+		},
+		"node_modules/@oxc-resolver/binding-android-arm64": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-android-arm64/-/binding-android-arm64-11.20.0.tgz",
+			"integrity": "sha512-QqslZAuFQG8Q9xm7JuIn8JUbvywhSBMVhuQHtYW+auirZJloS41oxUUaBXk7uUhZJgp44c5zQLeVvmFaDQB+2Q==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			]
+		},
+		"node_modules/@oxc-resolver/binding-darwin-arm64": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-darwin-arm64/-/binding-darwin-arm64-11.20.0.tgz",
+			"integrity": "sha512-MUcavykj2ewlR+kc5arpg4tC2RvzJkUxWtNv74pf7lcNk00GpIpN43vXMj+j6r4eMmfZhlb8hueKoIb8e9kAGQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			]
+		},
+		"node_modules/@oxc-resolver/binding-darwin-x64": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-darwin-x64/-/binding-darwin-x64-11.20.0.tgz",
+			"integrity": "sha512-BGB16nRUK5Etiv//ihPyzj8Lj1px0mhh4YIfe0FDf045ywknfSm0GEbiRESpr6Q4K82AvnyaRIhhluHByvS4bg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			]
+		},
+		"node_modules/@oxc-resolver/binding-freebsd-x64": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-freebsd-x64/-/binding-freebsd-x64-11.20.0.tgz",
+			"integrity": "sha512-JZgtePaqj3qmD5XFHJaSLWzHRxQu0LaPkdoM1KJXYADvAaa83ijXHclV3ej3CueeW0wxfIAbGCZVP45J0CA7uQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			]
+		},
+		"node_modules/@oxc-resolver/binding-linux-arm-gnueabihf": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-11.20.0.tgz",
+			"integrity": "sha512-hOQ/p3ry3v3SchUBXicrrnszaI/UmYzM4wtS4RGfwgVUX7a+HbyQSzJ5aOzu+o6XZkFkS3ZXN4PZAzhOb77OSg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@oxc-resolver/binding-linux-arm-musleabihf": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-11.20.0.tgz",
+			"integrity": "sha512-2ArPksaw0AqeuGBfoS715VF+JvJQAhD2niWgjE5hVO+L+nAfikVQopvngCMX9x4BD8itWoQ3dnikrQyl5Ho5Jg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@oxc-resolver/binding-linux-arm64-gnu": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-11.20.0.tgz",
+			"integrity": "sha512-0bJnmYFp62JdZ4nVMDUZ/C58BCZOCcqgKtnUlp7L9Ojf/czIN+3j72YlLPeWLkzlr6SlYvIQA4SGV/HyO0d+qg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@oxc-resolver/binding-linux-arm64-musl": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-arm64-musl/-/binding-linux-arm64-musl-11.20.0.tgz",
+			"integrity": "sha512-wKHHzPKZo7Ufhv/Bt6yxT7FOgnIgW4gwXcJUipkShGp68W3wGVqvr1Sr0fY65lN0Oy6y41+g2kIDvkgZaMMUkw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@oxc-resolver/binding-linux-ppc64-gnu": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-11.20.0.tgz",
+			"integrity": "sha512-RN8goF7Ie0B79L4i4G6OeBocTgSC56vJbQ65VJje+oXnldVpLnOU7j/AQ/dP94TcCS+Yh6WG8u3Qt4ETteXFNQ==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@oxc-resolver/binding-linux-riscv64-gnu": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-11.20.0.tgz",
+			"integrity": "sha512-5l1yU6/xQEqLZRzxqmMxJfWPslpwCmBsdDGaBvABPehxquCXDC7dd7oraNdKSJUMDXSM7VvVj8H2D2FTjU7oWw==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@oxc-resolver/binding-linux-riscv64-musl": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-11.20.0.tgz",
+			"integrity": "sha512-xHEvkbgz6UC+A3JOyDQy76LkUaxsNSfIr3/GV8slwZsnuooJiIB34gzJfsyvR4JdCYNUUPsRJc/w/oWkODu+hg==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@oxc-resolver/binding-linux-s390x-gnu": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-11.20.0.tgz",
+			"integrity": "sha512-aWPDUUmSeyHvlW+SoEUd+JIJsQhVhu6a5tBpDRMu058naPAchTgAVGCFy35zjbnFlt0i8hLWziff6HX0D3LU4g==",
+			"cpu": [
+				"s390x"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@oxc-resolver/binding-linux-x64-gnu": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-x64-gnu/-/binding-linux-x64-gnu-11.20.0.tgz",
+			"integrity": "sha512-x2YeSimvhJjKLVD8KSu8f/rqU1potcdEMkApIPJqjZWN7c2Fpt4g2X32WDg1p+XDAmyT7nuQGe0vnhvXeLbH+g==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@oxc-resolver/binding-linux-x64-musl": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-x64-musl/-/binding-linux-x64-musl-11.20.0.tgz",
+			"integrity": "sha512-kcRLEIxpZefeYfLChjpgFf3ilBzRDZ+yobMrpRsQlSrxuFGtm3U6PMU7AaEpMqo3NfDGVyJJseAjnRLzMFHjwQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@oxc-resolver/binding-openharmony-arm64": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-openharmony-arm64/-/binding-openharmony-arm64-11.20.0.tgz",
+			"integrity": "sha512-HHcfnApSZGtKhTiHqe8OZruOZe5XuFQH5/E0Yhj3u8fnFvzkM4/k6WjacUf4SvA0SPEAbfbgYmVPuo0VX/fIBQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openharmony"
+			]
+		},
+		"node_modules/@oxc-resolver/binding-wasm32-wasi": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-wasm32-wasi/-/binding-wasm32-wasi-11.20.0.tgz",
+			"integrity": "sha512-Tn0y1XOFYHNfK1wp1Z5QK8Rcld/bsOwRISQXfqAZ5IBpv8Gz1IvV39fUWNprqNdRizgcvFhOzWwFun2zkJsyBg==",
+			"cpu": [
+				"wasm32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@emnapi/core": "1.10.0",
+				"@emnapi/runtime": "1.10.0",
+				"@napi-rs/wasm-runtime": "^1.1.4"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/@oxc-resolver/binding-wasm32-wasi/node_modules/@emnapi/core": {
+			"version": "1.10.0",
+			"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+			"integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@emnapi/wasi-threads": "1.2.1",
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@oxc-resolver/binding-win32-arm64-msvc": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-11.20.0.tgz",
+			"integrity": "sha512-qPi25YNPe4YenS8MgsQU2+bIFHxxpLx1LVna2444cEHqNPhNjvWf9zqj4aWE43H9LpAsTmkkAlA3eL5ElBU3mA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@oxc-resolver/binding-win32-x64-msvc": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/@oxc-resolver/binding-win32-x64-msvc/-/binding-win32-x64-msvc-11.20.0.tgz",
+			"integrity": "sha512-Wb14jWEW8huH6It9F6sXd9vrYmIS7pMrgkU6sxpLxkP+9z+wRgs71hUEhRpcn8FOXAFa27FVWfY2tRpbfTzfLw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@parcel/watcher": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
+			"integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"detect-libc": "^2.0.3",
+				"is-glob": "^4.0.3",
+				"node-addon-api": "^7.0.0",
+				"picomatch": "^4.0.3"
+			},
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			},
+			"optionalDependencies": {
+				"@parcel/watcher-android-arm64": "2.5.6",
+				"@parcel/watcher-darwin-arm64": "2.5.6",
+				"@parcel/watcher-darwin-x64": "2.5.6",
+				"@parcel/watcher-freebsd-x64": "2.5.6",
+				"@parcel/watcher-linux-arm-glibc": "2.5.6",
+				"@parcel/watcher-linux-arm-musl": "2.5.6",
+				"@parcel/watcher-linux-arm64-glibc": "2.5.6",
+				"@parcel/watcher-linux-arm64-musl": "2.5.6",
+				"@parcel/watcher-linux-x64-glibc": "2.5.6",
+				"@parcel/watcher-linux-x64-musl": "2.5.6",
+				"@parcel/watcher-win32-arm64": "2.5.6",
+				"@parcel/watcher-win32-ia32": "2.5.6",
+				"@parcel/watcher-win32-x64": "2.5.6"
+			}
+		},
+		"node_modules/@parcel/watcher-android-arm64": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz",
+			"integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-darwin-arm64": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz",
+			"integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-darwin-x64": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz",
+			"integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-freebsd-x64": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz",
+			"integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-linux-arm-glibc": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz",
+			"integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-linux-arm-musl": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz",
+			"integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-linux-arm64-glibc": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz",
+			"integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-linux-arm64-musl": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz",
+			"integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-linux-x64-glibc": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz",
+			"integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-linux-x64-musl": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz",
+			"integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-win32-arm64": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz",
+			"integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-win32-ia32": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz",
+			"integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-win32-x64": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz",
+			"integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@playwright/test": {
+			"version": "1.56.1",
+			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.1.tgz",
+			"integrity": "sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"playwright": "1.56.1"
+			},
+			"bin": {
+				"playwright": "cli.js"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@polka/url": {
+			"version": "1.0.0-next.29",
+			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+			"integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@quansync/fs": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@quansync/fs/-/fs-1.0.0.tgz",
+			"integrity": "sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"quansync": "^1.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sxzz"
+			}
+		},
+		"node_modules/@rollup/plugin-babel": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-6.1.0.tgz",
+			"integrity": "sha512-dFZNuFD2YRcoomP4oYf+DvQNSUA9ih+A3vUqopQx5EdtPGo3WBnQcI/S8pwpz91UsGfL0HsMSOlaMld8HrbubA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-module-imports": "^7.18.6",
+				"@rollup/pluginutils": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.0.0",
+				"@types/babel__core": "^7.1.9",
+				"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/babel__core": {
+					"optional": true
+				},
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/plugin-node-resolve": {
+			"version": "16.0.3",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-16.0.3.tgz",
+			"integrity": "sha512-lUYM3UBGuM93CnMPG1YocWu7X802BrNF3jW2zny5gQyLQgRFJhV1Sq0Zi74+dh/6NBx1DxFC4b4GXg9wUCG5Qg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@rollup/pluginutils": "^5.0.1",
+				"@types/resolve": "1.20.2",
+				"deepmerge": "^4.2.2",
+				"is-module": "^1.0.0",
+				"resolve": "^1.22.1"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^2.78.0||^3.0.0||^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/plugin-replace": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-6.0.3.tgz",
+			"integrity": "sha512-J4RZarRvQAm5IF0/LwUUg+obsm+xZhYnbMXmXROyoSE1ATJe3oXSb9L5MMppdxP2ylNSjv6zFBwKYjcKMucVfA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@rollup/pluginutils": "^5.0.1",
+				"magic-string": "^0.30.3"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/plugin-terser": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-1.0.0.tgz",
+			"integrity": "sha512-FnCxhTBx6bMOYQrar6C8h3scPt8/JwIzw3+AJ2K++6guogH5fYaIFia+zZuhqv0eo1RN7W1Pz630SyvLbDjhtQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"serialize-javascript": "^7.0.3",
+				"smob": "^1.0.0",
+				"terser": "^5.17.4"
+			},
+			"engines": {
+				"node": ">=20.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^2.0.0||^3.0.0||^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/pluginutils": {
+			"version": "5.4.0",
+			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.4.0.tgz",
+			"integrity": "sha512-MfPp06CjRLfXQ3wY0R8vJDYBy/MvVcc9OulEfR0B8Iv9ko+GCNaRZ+EpJYFl27LhKsZK0o420sYCRHCjfCgeUg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree": "^1.0.0",
+				"estree-walker": "^2.0.2",
+				"picomatch": "^4.0.2"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			},
+			"peerDependencies": {
+				"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"rollup": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@rollup/pluginutils/node_modules/estree-walker": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@rollup/rollup-android-arm-eabi": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.61.1.tgz",
+			"integrity": "sha512-JnBB8MdXj45cajvTuO5FmPlvFVJRQgvrz1uSEl3NwqFnReAPGwb8EanbGi4z2nRaqLzjJSv5/JmycoTKlRZxHA==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			]
+		},
+		"node_modules/@rollup/rollup-android-arm64": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.61.1.tgz",
+			"integrity": "sha512-Jx2g7iSjw4AOT0HDPHM9RV3GNjRXwybWtSFZiZAYUTjUwjVrYIwq3kBf+LnhqJlzXFAqTAh2F7IGI+O568exPw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			]
+		},
+		"node_modules/@rollup/rollup-darwin-arm64": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.61.1.tgz",
+			"integrity": "sha512-0F1L/Z3Eqv8mT2n3dCpeO8GcTvHvVqkP5/t6DMsn0KzhYVcg+s7Ncl5DS8qjKYEeio6Az0Gt6nyBORay5qIlCA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			]
+		},
+		"node_modules/@rollup/rollup-darwin-x64": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.61.1.tgz",
+			"integrity": "sha512-qLttcH871ujY4YcVfUSShhOw+CsoTatYz8gRbHO7Bb92QH059/P0y5do1KMs41fY0BpD2x4AJH/gID0zFiqVKQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			]
+		},
+		"node_modules/@rollup/rollup-freebsd-arm64": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.61.1.tgz",
+			"integrity": "sha512-fUI4RapGE0Oh3mb8mgfvC1O2nU1RpDZUKnDQm3xB1Ipg7C2wTs5Kstz7G2uWK99a8S2yTMq8/P4uycwNa0nJyw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			]
+		},
+		"node_modules/@rollup/rollup-freebsd-x64": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.61.1.tgz",
+			"integrity": "sha512-H5YrdvJaDtI/U9/emrD4b++xkvp3y/JvOe4rizHbxvkyMfRS/CiRYdji+Pl8D0brEaNFWUh1drQxgAGIl6Xudw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.61.1.tgz",
+			"integrity": "sha512-Q8CBCCQtDFrYtXoeUXSrnFXKOnyUhx6bz+SkL6A0E7V8kAiCJ5pamq1WtbfpVGhR5TSpXY6ak3avmDc5fHTyJA==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm-musleabihf": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.61.1.tgz",
+			"integrity": "sha512-nwnhk1581l0FBVellGcVCAT0Oi06onEA3WB53sf01VO3I0UPBkMH9sXONYME2K0ovXcNayJfNtHfm6mpJElatQ==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm64-gnu": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.61.1.tgz",
+			"integrity": "sha512-x5Xr49hwt3hdW75UOZm3395YwwzPyauktslv29KpWL/T+vVAzoT3azLcTWv0eMciBNrx+DYjH4paehHoLpPvpg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm64-musl": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.61.1.tgz",
+			"integrity": "sha512-unMS3H73DpaoPyyEVPjGKleM/s0mkmsauTENpw4INQY8y4+IuLNjkueQ5QCtC0D3N38Y38yhAU8OoZ20S2Tm6w==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-loong64-gnu": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.61.1.tgz",
+			"integrity": "sha512-zNZzGRnAhwjFEYmvphJRV5XaQGjs62cCmeYYHUT//NbvEnHauw+I85nGG+SiVg5ld4GX8D1IbKIX+ozITQnhMQ==",
+			"cpu": [
+				"loong64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-loong64-musl": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.61.1.tgz",
+			"integrity": "sha512-LdpWGL8X209B2SIvWjqlc8VZgM6PKfontSerGepuldQmHYrAOtnMCXeJkxXGbC+PPZVOuu5czJo7fNV6aeW8rQ==",
+			"cpu": [
+				"loong64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-ppc64-gnu": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.61.1.tgz",
+			"integrity": "sha512-EC5kTtNaNGOmbMGqar8dvJy6y/hg99GAwjfBz++pxZhQATXGcRjd6c5en5wcbru0vkRmiMGsQKdMJOOf6sza4g==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-ppc64-musl": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.61.1.tgz",
+			"integrity": "sha512-8hiwp6D4acEcNK78I4rP0/XtS1sknWIAMJBPdR4l6zUtyTm5KiTDr5bXmWt4foY7nAN7AThDHgkLIEZOWKbzWw==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-riscv64-gnu": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.61.1.tgz",
+			"integrity": "sha512-10dh/h/BqA7DuMPWSxkR8uks18FRwnwOEqr5zOTEl+NOwP/OMzKX8OFR/Of9xxDA7D5qef1Nzar5WDD2kCCr1g==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-riscv64-musl": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.61.1.tgz",
+			"integrity": "sha512-YKJ5lg35DP17gcAOggnihe+APw9HLyj1Xn7gsmGumBJAUDa6NGXNixJzmkWLhcK9TOuuyQjdamzvJefkO7qHZQ==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-s390x-gnu": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.61.1.tgz",
+			"integrity": "sha512-Mlil5G2Jj6a7B3LWGctg+XPL9vdXYuzCtNXfxOQ0nPjc2m6ueUktocPGH9bnAM0bNRKb/bAWTujUU7IJQdQA+g==",
+			"cpu": [
+				"s390x"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-x64-gnu": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.61.1.tgz",
+			"integrity": "sha512-bVWIOIk6pV01p4CdUbPP7CJ/434z+OooYjDuFcR+44N35YvKUC66G8MGnvcWx5mWKW3g61J+t74l3Kj15Kwn2Q==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-x64-musl": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.61.1.tgz",
+			"integrity": "sha512-qy5pBvZbqNFheBz61R1rzsezjm0J7O2oNGoWtGoY89SZYLUfxAJTBAqDChqAIdB4rCiIbi9nF7yZ83GnNiLwSw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-openbsd-x64": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.61.1.tgz",
+			"integrity": "sha512-E83TXjI4zm0+5f2qO+UOudaCYIhYwpJ5jq6YCZNIZ+6CbfhKrkAGezeiASBL9ElxAxFsRS9ZhESv8mfnj6TKeg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			]
+		},
+		"node_modules/@rollup/rollup-openharmony-arm64": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.61.1.tgz",
+			"integrity": "sha512-fbWnKqVkjrJN38vNe3ahkbk6iejS/3b0Nt7EEtPpE6RBacZcGXNKbzfHN3GUUlXOPghUg0j6XUGrtjX9z1sIvA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openharmony"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-arm64-msvc": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.61.1.tgz",
+			"integrity": "sha512-ArMl38iVAbk0New1ogihQNY6iphLi4ZaRsa037gUzv5yeKPY8TD3Dmy4x2RNC1VztU/uqm+G+/RwFrSka3Oy2g==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-ia32-msvc": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.61.1.tgz",
+			"integrity": "sha512-0mYtjHS9ucAbcATycCNK9IGBk/cCe/ma7EmSLGZdsxnOA8cjRIyU04wDpVAD9NiOfLUR9KTxdiO53uOkherqjQ==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-x64-gnu": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.61.1.tgz",
+			"integrity": "sha512-gK1iCEPfpoSG9wfBihXxvBMi8ZfcWffYkEsC/Eih+iFENTaewvNcrEQ69lIOWYO5pePHKLHHO7nq5AILGO/HQQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-x64-msvc": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.61.1.tgz",
+			"integrity": "sha512-X+zaP2x+j4RXGfbp/seSoRHWnPxzApilDszisZxbYH5C/jTxFhCtDNdPGZb9lJyYPs24wGxruPF7Y+sIXt9Gzw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@standard-schema/spec": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+			"integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@storybook/addon-a11y": {
+			"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": {
+				"@storybook/global": "^5.0.0",
+				"axe-core": "^4.2.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"storybook": "^10.2.4"
+			}
+		},
+		"node_modules/@storybook/addon-docs": {
+			"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.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"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"storybook": "^10.2.4"
+			}
+		},
+		"node_modules/@storybook/addon-svelte-csf": {
+			"version": "5.0.10",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-svelte-csf/-/addon-svelte-csf-5.0.10.tgz",
+			"integrity": "sha512-poSvTS7VdaQ42ZoqW5e4+2Hv1iLO0mekH9fwn/QuBNse48R4WlTyR8XFbHRTfatl9gdc9ZYC4uWzazrmV6zGIA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@storybook/csf": "^0.1.13",
+				"dedent": "^1.5.3",
+				"es-toolkit": "^1.26.1",
+				"esrap": "^1.2.2",
+				"magic-string": "^0.30.12",
+				"svelte-ast-print": "^0.4.0",
+				"zimmerframe": "^1.1.2"
+			},
+			"peerDependencies": {
+				"@storybook/svelte": "^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0 || ^10.0.0-0",
+				"@sveltejs/vite-plugin-svelte": "^4.0.0 || ^5.0.0 || ^6.0.0",
+				"storybook": "^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0 || ^10.0.0-0",
+				"svelte": "^5.0.0",
+				"vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
+			}
+		},
+		"node_modules/@storybook/addon-vitest": {
+			"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": "^2.0.1"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"@vitest/browser": "^3.0.0 || ^4.0.0",
+				"@vitest/browser-playwright": "^4.0.0",
+				"@vitest/runner": "^3.0.0 || ^4.0.0",
+				"storybook": "^10.2.4",
+				"vitest": "^3.0.0 || ^4.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@vitest/browser": {
+					"optional": true
+				},
+				"@vitest/browser-playwright": {
+					"optional": true
+				},
+				"@vitest/runner": {
+					"optional": true
+				},
+				"vitest": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@storybook/builder-vite": {
+			"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.2.4",
+				"ts-dedent": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"storybook": "^10.2.4",
+				"vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
+			}
+		},
+		"node_modules/@storybook/csf": {
+			"version": "0.1.13",
+			"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.13.tgz",
+			"integrity": "sha512-7xOOwCLGB3ebM87eemep89MYRFTko+D8qE7EdAAq74lgdqRR5cOUtYWJLjO2dLtP94nqoOdHJo6MdLLKzg412Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"type-fest": "^2.19.0"
+			}
+		},
+		"node_modules/@storybook/csf-plugin": {
+			"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": {
+				"unplugin": "^2.3.5"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"esbuild": "*",
+				"rollup": "*",
+				"storybook": "^10.2.4",
+				"vite": "*",
+				"webpack": "*"
+			},
+			"peerDependenciesMeta": {
+				"esbuild": {
+					"optional": true
+				},
+				"rollup": {
+					"optional": true
+				},
+				"vite": {
+					"optional": true
+				},
+				"webpack": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@storybook/global": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz",
+			"integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@storybook/icons": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-2.0.2.tgz",
+			"integrity": "sha512-KZBCpXsshAIjczYNXR/rlxEtCUX/eAbpFNwKi8bcOomrLA4t/SyPz5RF+lVPO2oZBUE4sAkt43mfJUevQDSEEw==",
+			"dev": true,
+			"license": "MIT",
+			"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"
+			}
+		},
+		"node_modules/@storybook/react-dom-shim": {
+			"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": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"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.2.4"
+			}
+		},
+		"node_modules/@storybook/svelte": {
+			"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",
+			"dependencies": {
+				"ts-dedent": "^2.0.0",
+				"type-fest": "~2.19"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"storybook": "^10.2.4",
+				"svelte": "^5.0.0"
+			}
+		},
+		"node_modules/@storybook/svelte-vite": {
+			"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.2.4",
+				"@storybook/svelte": "10.2.4",
+				"magic-string": "^0.30.0",
+				"svelte2tsx": "^0.7.44",
+				"typescript": "^4.9.4 || ^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0",
+				"storybook": "^10.2.4",
+				"svelte": "^5.0.0",
+				"vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
+			}
+		},
+		"node_modules/@storybook/sveltekit": {
+			"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.2.4",
+				"@storybook/svelte": "10.2.4",
+				"@storybook/svelte-vite": "10.2.4"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"storybook": "^10.2.4",
+				"svelte": "^5.0.0",
+				"vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
+			}
+		},
+		"node_modules/@sveltejs/acorn-typescript": {
+			"version": "1.0.10",
+			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.10.tgz",
+			"integrity": "sha512-4WfKk68eTih+MiJD4fSbxN7E8kVBmTMPWHUPYjvl2N0rMs53YLTT8/YjKU5Dtnz5LqDjl7LEw4U7lXR2W3J5WA==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"acorn": "^8.9.0"
+			}
+		},
+		"node_modules/@sveltejs/adapter-static": {
+			"version": "3.0.10",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-3.0.10.tgz",
+			"integrity": "sha512-7D9lYFWJmB7zxZyTE/qxjksvMqzMuYrrsyh1f4AlZqeZeACPRySjbC3aFiY55wb1tWUaKOQG9PVbm74JcN2Iew==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"@sveltejs/kit": "^2.0.0"
+			}
+		},
+		"node_modules/@sveltejs/kit": {
+			"version": "2.60.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.60.1.tgz",
+			"integrity": "sha512-mQjlkNo+rJvpln7V2IGY2j99BqhcFbS4UN0AQNKNYfhBAFZTuCDAdW3a1sgf330mvtNvsBXn3HpAhcmvdJTcIQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@standard-schema/spec": "^1.0.0",
+				"@sveltejs/acorn-typescript": "^1.0.5",
+				"@types/cookie": "^0.6.0",
+				"acorn": "^8.14.1",
+				"cookie": "^0.6.0",
+				"devalue": "^5.8.1",
+				"esm-env": "^1.2.2",
+				"kleur": "^4.1.5",
+				"magic-string": "^0.30.5",
+				"mrmime": "^2.0.0",
+				"set-cookie-parser": "^3.0.0",
+				"sirv": "^3.0.0"
+			},
+			"bin": {
+				"svelte-kit": "svelte-kit.js"
+			},
+			"engines": {
+				"node": ">=18.13"
+			},
+			"peerDependencies": {
+				"@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 || ^7.0.0",
+				"svelte": "^4.0.0 || ^5.0.0-next.0",
+				"typescript": "^5.3.3 || ^6.0.0",
+				"vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0 || ^8.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@opentelemetry/api": {
+					"optional": true
+				},
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@sveltejs/load-config": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/load-config/-/load-config-0.1.1.tgz",
+			"integrity": "sha512-BXXm+VOH/9X4N7Dd1iZ2MqA1h7M+9i2noI8QYuLDY8QcN2WHYn7D/VK/+IJNfcAmRw7ACNJ538UT9GXIhnBTiA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 18.0.0"
+			}
+		},
+		"node_modules/@sveltejs/vite-plugin-svelte": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-6.2.1.tgz",
+			"integrity": "sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
+				"debug": "^4.4.1",
+				"deepmerge": "^4.3.1",
+				"magic-string": "^0.30.17",
+				"vitefu": "^1.1.1"
+			},
+			"engines": {
+				"node": "^20.19 || ^22.12 || >=24"
+			},
+			"peerDependencies": {
+				"svelte": "^5.0.0",
+				"vite": "^6.3.0 || ^7.0.0"
+			}
+		},
+		"node_modules/@sveltejs/vite-plugin-svelte-inspector": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-5.0.2.tgz",
+			"integrity": "sha512-TZzRTcEtZffICSAoZGkPSl6Etsj2torOVrx6Uw0KpXxrec9Gg6jFWQ60Q3+LmNGfZSxHRCZL7vXVZIWmuV50Ig==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"obug": "^2.1.0"
+			},
+			"engines": {
+				"node": "^20.19 || ^22.12 || >=24"
+			},
+			"peerDependencies": {
+				"@sveltejs/vite-plugin-svelte": "^6.0.0-next.0",
+				"svelte": "^5.0.0",
+				"vite": "^6.3.0 || ^7.0.0"
+			}
+		},
+		"node_modules/@swc/helpers": {
+			"version": "0.5.23",
+			"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
+			"integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"tslib": "^2.8.0"
+			}
+		},
+		"node_modules/@tailwindcss/forms": {
+			"version": "0.5.10",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.10.tgz",
+			"integrity": "sha512-utI1ONF6uf/pPNO68kmN1b8rEwNXv3czukalo8VtJH8ksIkZXr3Q3VYudZLkCsDd4Wku120uF02hYK25XGPorw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"mini-svg-data-uri": "^1.2.3"
+			},
+			"peerDependencies": {
+				"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
+			}
+		},
+		"node_modules/@tailwindcss/node": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.11.tgz",
+			"integrity": "sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@ampproject/remapping": "^2.3.0",
+				"enhanced-resolve": "^5.18.1",
+				"jiti": "^2.4.2",
+				"lightningcss": "1.30.1",
+				"magic-string": "^0.30.17",
+				"source-map-js": "^1.2.1",
+				"tailwindcss": "4.1.11"
+			}
+		},
+		"node_modules/@tailwindcss/node/node_modules/tailwindcss": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
+			"integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@tailwindcss/oxide": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.11.tgz",
+			"integrity": "sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "MIT",
+			"dependencies": {
+				"detect-libc": "^2.0.4",
+				"tar": "^7.4.3"
+			},
+			"engines": {
+				"node": ">= 10"
+			},
+			"optionalDependencies": {
+				"@tailwindcss/oxide-android-arm64": "4.1.11",
+				"@tailwindcss/oxide-darwin-arm64": "4.1.11",
+				"@tailwindcss/oxide-darwin-x64": "4.1.11",
+				"@tailwindcss/oxide-freebsd-x64": "4.1.11",
+				"@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.11",
+				"@tailwindcss/oxide-linux-arm64-gnu": "4.1.11",
+				"@tailwindcss/oxide-linux-arm64-musl": "4.1.11",
+				"@tailwindcss/oxide-linux-x64-gnu": "4.1.11",
+				"@tailwindcss/oxide-linux-x64-musl": "4.1.11",
+				"@tailwindcss/oxide-wasm32-wasi": "4.1.11",
+				"@tailwindcss/oxide-win32-arm64-msvc": "4.1.11",
+				"@tailwindcss/oxide-win32-x64-msvc": "4.1.11"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-android-arm64": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.11.tgz",
+			"integrity": "sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-darwin-arm64": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.11.tgz",
+			"integrity": "sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-darwin-x64": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.11.tgz",
+			"integrity": "sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-freebsd-x64": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.11.tgz",
+			"integrity": "sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.11.tgz",
+			"integrity": "sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.11.tgz",
+			"integrity": "sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.11.tgz",
+			"integrity": "sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.11.tgz",
+			"integrity": "sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-x64-musl": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.11.tgz",
+			"integrity": "sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.11.tgz",
+			"integrity": "sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==",
+			"bundleDependencies": [
+				"@napi-rs/wasm-runtime",
+				"@emnapi/core",
+				"@emnapi/runtime",
+				"@tybys/wasm-util",
+				"@emnapi/wasi-threads",
+				"tslib"
+			],
+			"cpu": [
+				"wasm32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@emnapi/core": "^1.4.3",
+				"@emnapi/runtime": "^1.4.3",
+				"@emnapi/wasi-threads": "^1.0.2",
+				"@napi-rs/wasm-runtime": "^0.2.11",
+				"@tybys/wasm-util": "^0.9.0",
+				"tslib": "^2.8.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.11.tgz",
+			"integrity": "sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.11.tgz",
+			"integrity": "sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/typography": {
+			"version": "0.5.16",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
+			"integrity": "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"lodash.castarray": "^4.4.0",
+				"lodash.isplainobject": "^4.0.6",
+				"lodash.merge": "^4.6.2",
+				"postcss-selector-parser": "6.0.10"
+			},
+			"peerDependencies": {
+				"tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+			}
+		},
+		"node_modules/@tailwindcss/vite": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.11.tgz",
+			"integrity": "sha512-RHYhrR3hku0MJFRV+fN2gNbDNEh3dwKvY8XJvTxCSXeMOsCRSr+uKvDWQcbizrHgjML6ZmTE5OwMrl5wKcujCw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@tailwindcss/node": "4.1.11",
+				"@tailwindcss/oxide": "4.1.11",
+				"tailwindcss": "4.1.11"
+			},
+			"peerDependencies": {
+				"vite": "^5.2.0 || ^6 || ^7"
+			}
+		},
+		"node_modules/@tailwindcss/vite/node_modules/tailwindcss": {
+			"version": "4.1.11",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
+			"integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@testing-library/dom": {
+			"version": "10.4.1",
+			"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+			"integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@babel/code-frame": "^7.10.4",
+				"@babel/runtime": "^7.12.5",
+				"@types/aria-query": "^5.0.1",
+				"aria-query": "5.3.0",
+				"dom-accessibility-api": "^0.5.9",
+				"lz-string": "^1.5.0",
+				"picocolors": "1.1.1",
+				"pretty-format": "^27.0.2"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@testing-library/jest-dom": {
+			"version": "6.9.1",
+			"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+			"integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@adobe/css-tools": "^4.4.0",
+				"aria-query": "^5.0.0",
+				"css.escape": "^1.5.1",
+				"dom-accessibility-api": "^0.6.3",
+				"picocolors": "^1.1.1",
+				"redent": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=14",
+				"npm": ">=6",
+				"yarn": ">=1"
+			}
+		},
+		"node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+			"integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@testing-library/svelte-core": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@testing-library/svelte-core/-/svelte-core-1.0.0.tgz",
+			"integrity": "sha512-VkUePoLV6oOYwSUvX6ShA8KLnJqZiYMIbP2JW2t0GLWLkJxKGvuH5qrrZBV/X7cXFnLGuFQEC7RheYiZOW68KQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"svelte": "^3 || ^4 || ^5 || ^5.0.0-next.0"
+			}
+		},
+		"node_modules/@testing-library/user-event": {
+			"version": "14.6.1",
+			"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
+			"integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12",
+				"npm": ">=6"
+			},
+			"peerDependencies": {
+				"@testing-library/dom": ">=7.21.4"
+			}
+		},
+		"node_modules/@trickfilm400/rollup-plugin-off-main-thread": {
+			"version": "3.0.0-pre1",
+			"resolved": "https://registry.npmjs.org/@trickfilm400/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-3.0.0-pre1.tgz",
+			"integrity": "sha512-/67zpWDBLV+oYAEL682s1ktXL0HgqX76f6gaVGkGnVZlBbm1zd0v4Bz8MFF2GGhoX9rvfq3KSQHubFHwa6w6/Q==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"ejs": "^3.1.10",
+				"json5": "^2.2.3",
+				"magic-string": "^0.30.21",
+				"string.prototype.matchall": "^4.0.12"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@tybys/wasm-util": {
+			"version": "0.10.2",
+			"resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
+			"integrity": "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"tslib": "^2.4.0"
+			}
+		},
+		"node_modules/@types/aria-query": {
+			"version": "5.0.4",
+			"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+			"integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true
+		},
+		"node_modules/@types/chai": {
+			"version": "5.2.3",
+			"resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+			"integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/deep-eql": "*",
+				"assertion-error": "^2.0.1"
+			}
+		},
+		"node_modules/@types/cookie": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+			"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3": {
+			"version": "7.4.3",
+			"resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+			"integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/d3-array": "*",
+				"@types/d3-axis": "*",
+				"@types/d3-brush": "*",
+				"@types/d3-chord": "*",
+				"@types/d3-color": "*",
+				"@types/d3-contour": "*",
+				"@types/d3-delaunay": "*",
+				"@types/d3-dispatch": "*",
+				"@types/d3-drag": "*",
+				"@types/d3-dsv": "*",
+				"@types/d3-ease": "*",
+				"@types/d3-fetch": "*",
+				"@types/d3-force": "*",
+				"@types/d3-format": "*",
+				"@types/d3-geo": "*",
+				"@types/d3-hierarchy": "*",
+				"@types/d3-interpolate": "*",
+				"@types/d3-path": "*",
+				"@types/d3-polygon": "*",
+				"@types/d3-quadtree": "*",
+				"@types/d3-random": "*",
+				"@types/d3-scale": "*",
+				"@types/d3-scale-chromatic": "*",
+				"@types/d3-selection": "*",
+				"@types/d3-shape": "*",
+				"@types/d3-time": "*",
+				"@types/d3-time-format": "*",
+				"@types/d3-timer": "*",
+				"@types/d3-transition": "*",
+				"@types/d3-zoom": "*"
+			}
+		},
+		"node_modules/@types/d3-array": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+			"integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-axis": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+			"integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/d3-selection": "*"
+			}
+		},
+		"node_modules/@types/d3-brush": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+			"integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/d3-selection": "*"
+			}
+		},
+		"node_modules/@types/d3-chord": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+			"integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-color": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+			"integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-contour": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+			"integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/d3-array": "*",
+				"@types/geojson": "*"
+			}
+		},
+		"node_modules/@types/d3-delaunay": {
+			"version": "6.0.4",
+			"resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+			"integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-dispatch": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz",
+			"integrity": "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-drag": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+			"integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/d3-selection": "*"
+			}
+		},
+		"node_modules/@types/d3-dsv": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+			"integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-ease": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+			"integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-fetch": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+			"integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/d3-dsv": "*"
+			}
+		},
+		"node_modules/@types/d3-force": {
+			"version": "3.0.10",
+			"resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+			"integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-format": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+			"integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-geo": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+			"integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/geojson": "*"
+			}
+		},
+		"node_modules/@types/d3-hierarchy": {
+			"version": "3.1.7",
+			"resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+			"integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-interpolate": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+			"integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/d3-color": "*"
+			}
+		},
+		"node_modules/@types/d3-path": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+			"integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-polygon": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+			"integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-quadtree": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+			"integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-random": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+			"integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-scale": {
+			"version": "4.0.9",
+			"resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+			"integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/d3-time": "*"
+			}
+		},
+		"node_modules/@types/d3-scale-chromatic": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+			"integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-selection": {
+			"version": "3.0.11",
+			"resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+			"integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-shape": {
+			"version": "3.1.8",
+			"resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+			"integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/d3-path": "*"
+			}
+		},
+		"node_modules/@types/d3-time": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+			"integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-time-format": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+			"integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-timer": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+			"integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/d3-transition": {
+			"version": "3.0.9",
+			"resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+			"integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/d3-selection": "*"
+			}
+		},
+		"node_modules/@types/d3-zoom": {
+			"version": "3.0.8",
+			"resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+			"integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/d3-interpolate": "*",
+				"@types/d3-selection": "*"
+			}
+		},
+		"node_modules/@types/debug": {
+			"version": "4.1.13",
+			"resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
+			"integrity": "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/ms": "*"
+			}
+		},
+		"node_modules/@types/deep-eql": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+			"integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/estree": {
+			"version": "1.0.9",
+			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+			"integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/geojson": {
+			"version": "7946.0.16",
+			"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+			"integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/hast": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+			"integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "*"
+			}
+		},
+		"node_modules/@types/json-schema": {
+			"version": "7.0.15",
+			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/katex": {
+			"version": "0.16.8",
+			"resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.8.tgz",
+			"integrity": "sha512-trgaNyfU+Xh2Tc+ABIb44a5AYUpicB3uwirOioeOkNPPbmgRNtcWyDeeFRzjPZENO9Vq8gvVqfhaaXWLlevVwg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/mdast": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+			"integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "*"
+			}
+		},
+		"node_modules/@types/mdx": {
+			"version": "2.0.13",
+			"resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz",
+			"integrity": "sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/ms": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+			"integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/node": {
+			"version": "24.13.0",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.13.0.tgz",
+			"integrity": "sha512-5vtOqGQr4NJKeEzV441FcOi2MeG9UTWq9LqVLGneDdu4vlX17H8kQ2PA2UmNwCUGPVDj4oBjNhS7ReVEIWJJrg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"undici-types": "~7.18.0"
+			}
+		},
+		"node_modules/@types/react": {
+			"version": "19.2.17",
+			"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
+			"integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"csstype": "^3.2.2"
+			}
+		},
+		"node_modules/@types/resolve": {
+			"version": "1.20.2",
+			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
+			"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/trusted-types": {
+			"version": "2.0.7",
+			"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+			"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/unist": {
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@typescript-eslint/eslint-plugin": {
+			"version": "8.60.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.60.1.tgz",
+			"integrity": "sha512-JQ4S5GB0tfjO8BuJ4fcX+HodkzJjYBV+7OJ+wLygaX7OGQ7FudyHL4NSCA6ob+w3Yn+5MkKIozOwQhXeM7opVg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@eslint-community/regexpp": "^4.12.2",
+				"@typescript-eslint/scope-manager": "8.60.1",
+				"@typescript-eslint/type-utils": "8.60.1",
+				"@typescript-eslint/utils": "8.60.1",
+				"@typescript-eslint/visitor-keys": "8.60.1",
+				"ignore": "^7.0.5",
+				"natural-compare": "^1.4.0",
+				"ts-api-utils": "^2.5.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"@typescript-eslint/parser": "^8.60.1",
+				"eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+				"typescript": ">=4.8.4 <6.1.0"
+			}
+		},
+		"node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+			"version": "7.0.5",
+			"resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+			"integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 4"
+			}
+		},
+		"node_modules/@typescript-eslint/parser": {
+			"version": "8.60.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.60.1.tgz",
+			"integrity": "sha512-A0M6ua6H252bVjPvvtSgl2QA4+ET9S5Mtkb2GDyTxIhH/C4qDItT7RQNO5PhMC6NXGYXOR9dIalcDDgBKT7oFA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/scope-manager": "8.60.1",
+				"@typescript-eslint/types": "8.60.1",
+				"@typescript-eslint/typescript-estree": "8.60.1",
+				"@typescript-eslint/visitor-keys": "8.60.1",
+				"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": {
+				"eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+				"typescript": ">=4.8.4 <6.1.0"
+			}
+		},
+		"node_modules/@typescript-eslint/project-service": {
+			"version": "8.60.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.60.1.tgz",
+			"integrity": "sha512-eXkTH2bxmXlqD1RnOPmLZ9ZM9D3VwSx04JOwBnP9RQ+yUA5a2Mu7SfW8uaV2Aon53NJzZlZYuX7tn91Izf+xaw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/tsconfig-utils": "^8.60.1",
+				"@typescript-eslint/types": "^8.60.1",
+				"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.1.0"
+			}
+		},
+		"node_modules/@typescript-eslint/scope-manager": {
+			"version": "8.60.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.60.1.tgz",
+			"integrity": "sha512-gvI5OQoptnxQnchOirukCuQ55svJSTuD/4k5+pC267xyBtYry748R9/c3tYUzb/iE6RZfllRz2lVulLCHkTm4w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/types": "8.60.1",
+				"@typescript-eslint/visitor-keys": "8.60.1"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/tsconfig-utils": {
+			"version": "8.60.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.60.1.tgz",
+			"integrity": "sha512-nh8w4qAteiKuZu3pSSzG/yGKpw0OlkrKnzFmbVRenKaD4qc+7i1GrmZaLVkr8rk4uipiPGMOW4YsM6WmKZ5CvA==",
+			"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.1.0"
+			}
+		},
+		"node_modules/@typescript-eslint/type-utils": {
+			"version": "8.60.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.60.1.tgz",
+			"integrity": "sha512-sdwTrpjosW7ANQYJ39ZBF1ZyEMEGVB2UsikrserVM/30a/F1dTLnu9bGxEdosugyu5caigjLrR2qiD11asjI1A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/types": "8.60.1",
+				"@typescript-eslint/typescript-estree": "8.60.1",
+				"@typescript-eslint/utils": "8.60.1",
+				"debug": "^4.4.3",
+				"ts-api-utils": "^2.5.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 || ^10.0.0",
+				"typescript": ">=4.8.4 <6.1.0"
+			}
+		},
+		"node_modules/@typescript-eslint/types": {
+			"version": "8.60.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.60.1.tgz",
+			"integrity": "sha512-4h0tY8ppCkdCzcrl2YM5M3my0xsE1Tf8om3owEu5oPWmXwkKRmk0j0LGDzYBGUcAlesEbxBhazqu/K4cu3Ug7w==",
+			"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/@typescript-eslint/typescript-estree": {
+			"version": "8.60.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.60.1.tgz",
+			"integrity": "sha512-alpRkfG8hlVE5kdJW2GkfgDgXxold3e8e4l6EnmhRmRLbekgAPCCGDVD++sABy9FcgPFroq+uFcCSM1vR57Cew==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/project-service": "8.60.1",
+				"@typescript-eslint/tsconfig-utils": "8.60.1",
+				"@typescript-eslint/types": "8.60.1",
+				"@typescript-eslint/visitor-keys": "8.60.1",
+				"debug": "^4.4.3",
+				"minimatch": "^10.2.2",
+				"semver": "^7.7.3",
+				"tinyglobby": "^0.2.15",
+				"ts-api-utils": "^2.5.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.1.0"
+			}
+		},
+		"node_modules/@typescript-eslint/typescript-estree/node_modules/balanced-match": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+			"integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "18 || 20 || >=22"
+			}
+		},
+		"node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+			"version": "5.0.6",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
+			"integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"balanced-match": "^4.0.2"
+			},
+			"engines": {
+				"node": "18 || 20 || >=22"
+			}
+		},
+		"node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+			"version": "10.2.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+			"integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"dependencies": {
+				"brace-expansion": "^5.0.5"
+			},
+			"engines": {
+				"node": "18 || 20 || >=22"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/@typescript-eslint/utils": {
+			"version": "8.60.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.60.1.tgz",
+			"integrity": "sha512-h2MPBLoNtjc3qZWfY3Tl51yPorQ2McHn8pJfcMNTcIvrrZrr90Ykffit0yjrPFWQcRcUxzH20+6OcVdW4yHtUg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@eslint-community/eslint-utils": "^4.9.1",
+				"@typescript-eslint/scope-manager": "8.60.1",
+				"@typescript-eslint/types": "8.60.1",
+				"@typescript-eslint/typescript-estree": "8.60.1"
+			},
+			"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 || ^10.0.0",
+				"typescript": ">=4.8.4 <6.1.0"
+			}
+		},
+		"node_modules/@typescript-eslint/visitor-keys": {
+			"version": "8.60.1",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.60.1.tgz",
+			"integrity": "sha512-EbGRQg4FhrmwLodl+t3JNAnXHWVr9Vp+Zl1QBZVPY4ByfkzIT8cX3K6QWODHtkIZqqJVEWvhHSx3v5PDHsaQag==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/types": "8.60.1",
+				"eslint-visitor-keys": "^5.0.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+			"integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": "^20.19.0 || ^22.13.0 || >=24"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/@ungap/structured-clone": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.1.tgz",
+			"integrity": "sha512-mUFwbeTqrVgDQxFveS+df2yfap6iuP20NAKAsBt5jDEoOTDew+zwLAOilHCeQJOVSvmgCX4ogqIrA0mnyr08yQ==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/@upsetjs/venn.js": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@upsetjs/venn.js/-/venn.js-2.0.0.tgz",
+			"integrity": "sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw==",
+			"dev": true,
+			"license": "MIT",
+			"optionalDependencies": {
+				"d3-selection": "^3.0.0",
+				"d3-transition": "^3.0.1"
+			}
+		},
+		"node_modules/@vite-pwa/assets-generator": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@vite-pwa/assets-generator/-/assets-generator-1.0.2.tgz",
+			"integrity": "sha512-MCbrb508JZHqe7bUibmZj/lyojdhLRnfkmyXnkrCM2zVrjTgL89U8UEfInpKTvPeTnxsw2hmyZxnhsdNR6yhwg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"cac": "^6.7.14",
+				"colorette": "^2.0.20",
+				"consola": "^3.4.2",
+				"sharp": "^0.33.5",
+				"sharp-ico": "^0.1.5",
+				"unconfig": "^7.3.1"
+			},
+			"bin": {
+				"pwa-assets-generator": "bin/pwa-assets-generator.mjs"
+			},
+			"engines": {
+				"node": ">=16.14.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			}
+		},
+		"node_modules/@vite-pwa/sveltekit": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@vite-pwa/sveltekit/-/sveltekit-1.1.0.tgz",
+			"integrity": "sha512-mMIf2tY+7Hg8jecpu/WY+Ki2ikoXy3hVmt3tOxi0K+lYYnKQrDYthuHireI0S+26Mg9BXzL7qQF1xeB5VYlYlg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"kolorist": "^1.8.0",
+				"tinyglobby": "^0.2.9",
+				"vite-plugin-pwa": "^1.2.0"
+			},
+			"engines": {
+				"node": ">=18.13"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			},
+			"peerDependencies": {
+				"@sveltejs/kit": "^1.3.1 || ^2.0.1",
+				"@vite-pwa/assets-generator": "^1.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@vite-pwa/assets-generator": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@vitest/browser": {
+			"version": "4.1.8",
+			"resolved": "https://registry.npmjs.org/@vitest/browser/-/browser-4.1.8.tgz",
+			"integrity": "sha512-u21VzX07HzlJYpFgkxmjEXar/tG2UqWGgyGG/46SrrPc7rSdCTPw5vuowopO9CIqF8UCUQzDFdbVnNpw6N0BfQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@blazediff/core": "1.9.1",
+				"@vitest/mocker": "4.1.8",
+				"@vitest/utils": "4.1.8",
+				"magic-string": "^0.30.21",
+				"pngjs": "^7.0.0",
+				"sirv": "^3.0.2",
+				"tinyrainbow": "^3.1.0",
+				"ws": "^8.19.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			},
+			"peerDependencies": {
+				"vitest": "4.1.8"
+			}
+		},
+		"node_modules/@vitest/browser-playwright": {
+			"version": "4.1.8",
+			"resolved": "https://registry.npmjs.org/@vitest/browser-playwright/-/browser-playwright-4.1.8.tgz",
+			"integrity": "sha512-SR7FqgegaexEg73xvf3ArtygXegagMdXnL0EZMpxrWvvhQxvicD/E8p0ib0J91riPRtQUViyh67Xjw3NqvyhVg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@vitest/browser": "4.1.8",
+				"@vitest/mocker": "4.1.8",
+				"tinyrainbow": "^3.1.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			},
+			"peerDependencies": {
+				"playwright": "*",
+				"vitest": "4.1.8"
+			},
+			"peerDependenciesMeta": {
+				"playwright": {
+					"optional": false
+				}
+			}
+		},
+		"node_modules/@vitest/browser-playwright/node_modules/tinyrainbow": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+			"integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/@vitest/browser/node_modules/tinyrainbow": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+			"integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/@vitest/coverage-v8": {
+			"version": "4.1.8",
+			"resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.1.8.tgz",
+			"integrity": "sha512-lt3kovsyHwYe00wq4D1ti0Z974fWj4NLp6siqiyEufUpyFwK9Yhi7rBhac9JL5aA0zoMrJqc4vYPZRUnI7l7nw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@bcoe/v8-coverage": "^1.0.2",
+				"@vitest/utils": "4.1.8",
+				"ast-v8-to-istanbul": "^1.0.0",
+				"istanbul-lib-coverage": "^3.2.2",
+				"istanbul-lib-report": "^3.0.1",
+				"istanbul-reports": "^3.2.0",
+				"magicast": "^0.5.2",
+				"obug": "^2.1.1",
+				"std-env": "^4.0.0-rc.1",
+				"tinyrainbow": "^3.1.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			},
+			"peerDependencies": {
+				"@vitest/browser": "4.1.8",
+				"vitest": "4.1.8"
+			},
+			"peerDependenciesMeta": {
+				"@vitest/browser": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@vitest/coverage-v8/node_modules/tinyrainbow": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+			"integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/@vitest/expect": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.4.tgz",
+			"integrity": "sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/chai": "^5.2.2",
+				"@vitest/spy": "3.2.4",
+				"@vitest/utils": "3.2.4",
+				"chai": "^5.2.0",
+				"tinyrainbow": "^2.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/@vitest/expect/node_modules/@vitest/pretty-format": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.4.tgz",
+			"integrity": "sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tinyrainbow": "^2.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/@vitest/expect/node_modules/@vitest/spy": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.2.4.tgz",
+			"integrity": "sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tinyspy": "^4.0.3"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/@vitest/expect/node_modules/@vitest/utils": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.2.4.tgz",
+			"integrity": "sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@vitest/pretty-format": "3.2.4",
+				"loupe": "^3.1.4",
+				"tinyrainbow": "^2.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/@vitest/mocker": {
+			"version": "4.1.8",
+			"resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.8.tgz",
+			"integrity": "sha512-LEiN/xe4OSIbKe9HQIp5OC24agGD9J5CnmMgsLohVVoOPWL9a2sBoR6VBx43jQZb7Kr1l4RCuyCJzcAa0+dojw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@vitest/spy": "4.1.8",
+				"estree-walker": "^3.0.3",
+				"magic-string": "^0.30.21"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			},
+			"peerDependencies": {
+				"msw": "^2.4.9",
+				"vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+			},
+			"peerDependenciesMeta": {
+				"msw": {
+					"optional": true
+				},
+				"vite": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@vitest/pretty-format": {
+			"version": "4.1.8",
+			"resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.8.tgz",
+			"integrity": "sha512-9GasEBxpZ1VYIpqHf/0+YGg121uSNwCKOJqIrTwWP/TB7DmFCiaBpNl3aPZzoLWfWkuqhbH8vJIVobZkvdo2cA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tinyrainbow": "^3.1.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/@vitest/pretty-format/node_modules/tinyrainbow": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+			"integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/@vitest/runner": {
+			"version": "4.1.8",
+			"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.8.tgz",
+			"integrity": "sha512-EmVxeBAfMJvycdjd6Hm+RbFBbA9fKvo0Kx37hNpBYoYeavH3RNsBXWDooR1mgD52dCrxIIuP7UotpfiwOikvcg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@vitest/utils": "4.1.8",
+				"pathe": "^2.0.3"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/@vitest/snapshot": {
+			"version": "4.1.8",
+			"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.8.tgz",
+			"integrity": "sha512-acfZboRmAIf05DEKcBQy33VXojFJjtUdLyo7oOmV9kebb2xdU01UknNiPuPZoJZQyO7DF0gZdTGTpeAzET9QPQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@vitest/pretty-format": "4.1.8",
+				"@vitest/utils": "4.1.8",
+				"magic-string": "^0.30.21",
+				"pathe": "^2.0.3"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/@vitest/spy": {
+			"version": "4.1.8",
+			"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.8.tgz",
+			"integrity": "sha512-6EevtBp6OZOPF7bmz36HrGMeP3txgVSrgebWxHOafDXGkhIzfXK14f8KF6MuFfgXXUeHxmpD3BQxkV00/3s5mA==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/@vitest/utils": {
+			"version": "4.1.8",
+			"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.8.tgz",
+			"integrity": "sha512-uOJamYALNhfJ6iolExyQM40yIQwDqYnkKtQ5VCiSe17E33H0aQ/u+1GlRuz4LZBk6Mm3sg90G9hEbmEt37C1Zg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@vitest/pretty-format": "4.1.8",
+				"convert-source-map": "^2.0.0",
+				"tinyrainbow": "^3.1.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/@vitest/utils/node_modules/tinyrainbow": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+			"integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/@webcontainer/env": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@webcontainer/env/-/env-1.1.1.tgz",
+			"integrity": "sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"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==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"mime-types": "^3.0.0",
+				"negotiator": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/acorn": {
+			"version": "8.16.0",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+			"integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"acorn": "bin/acorn"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/acorn-jsx": {
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+			"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+			}
+		},
+		"node_modules/ajv": {
+			"version": "8.20.0",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.20.0.tgz",
+			"integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
+			"dev": true,
+			"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": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
+			"integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ajv": "^8.0.0"
+			},
+			"peerDependencies": {
+				"ajv": "^8.0.0"
+			},
+			"peerDependenciesMeta": {
+				"ajv": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/ansi-styles": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"color-convert": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
+		"node_modules/argparse": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+			"dev": true,
+			"license": "Python-2.0"
+		},
+		"node_modules/aria-query": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+			"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"dequal": "^2.0.3"
+			}
+		},
+		"node_modules/array-buffer-byte-length": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+			"integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.3",
+				"is-array-buffer": "^3.0.5"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/arraybuffer.prototype.slice": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+			"integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"array-buffer-byte-length": "^1.0.1",
+				"call-bind": "^1.0.8",
+				"define-properties": "^1.2.1",
+				"es-abstract": "^1.23.5",
+				"es-errors": "^1.3.0",
+				"get-intrinsic": "^1.2.6",
+				"is-array-buffer": "^3.0.4"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/assertion-error": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+			"integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/ast-types": {
+			"version": "0.16.1",
+			"resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
+			"integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/ast-v8-to-istanbul": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/ast-v8-to-istanbul/-/ast-v8-to-istanbul-1.0.3.tgz",
+			"integrity": "sha512-jCMQ6ZylLPudp0CDfBmQBZUsrh1/8psbmu9ibeVWKuHWD0YrH9YABwlKu5kVEFoT0GCQQW9Z/SxfuEbbkGQCRg==",
+			"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",
+			"integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/async-function": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+			"integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/at-least-node": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+			"integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">= 4.0.0"
+			}
+		},
+		"node_modules/available-typed-arrays": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+			"integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"possible-typed-array-names": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/axe-core": {
+			"version": "4.12.0",
+			"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.12.0.tgz",
+			"integrity": "sha512-FTavr/7Ba0IptwGOPxnQvdyW2tAsdLBMTBXz7rKH6xJ2skpyxpBxyHkDdBs4lf69yRqYpkqCdfhnwS8YULGOmg==",
+			"dev": true,
+			"license": "MPL-2.0",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/axobject-query": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+			"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/babel-plugin-polyfill-corejs2": {
+			"version": "0.4.17",
+			"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.17.tgz",
+			"integrity": "sha512-aTyf30K/rqAsNwN76zYrdtx8obu0E4KoUME29B1xj+B3WxgvWkp943vYQ+z8Mv3lw9xHXMHpvSPOBxzAkIa94w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/compat-data": "^7.28.6",
+				"@babel/helper-define-polyfill-provider": "^0.6.8",
+				"semver": "^6.3.1"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+			}
+		},
+		"node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"dev": true,
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
+		"node_modules/babel-plugin-polyfill-corejs3": {
+			"version": "0.14.2",
+			"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.14.2.tgz",
+			"integrity": "sha512-coWpDLJ410R781Npmn/SIBZEsAetR4xVi0SxLMXPaMO4lSf1MwnkGYMtkFxew0Dn8B3/CpbpYxN0JCgg8mn67g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-define-polyfill-provider": "^0.6.8",
+				"core-js-compat": "^3.48.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+			}
+		},
+		"node_modules/babel-plugin-polyfill-regenerator": {
+			"version": "0.6.8",
+			"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.8.tgz",
+			"integrity": "sha512-M762rNHfSF1EV3SLtnCJXFoQbbIIz0OyRwnCmV0KPC7qosSfCO0QLTSuJX3ayAebubhE6oYBAYPrBA5ljowaZg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/helper-define-polyfill-provider": "^0.6.8"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+			}
+		},
+		"node_modules/bail": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+			"integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/balanced-match": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/baseline-browser-mapping": {
+			"version": "2.10.33",
+			"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.33.tgz",
+			"integrity": "sha512-bA6+tcSLpz2tIEdDXZPpPTIuxBcC4+w6SieaYyfigIa4h8GlFxbA17v22Vx3JUtuZQj9SgOsnbK+aTBzyDyEuw==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"bin": {
+				"baseline-browser-mapping": "dist/cli.cjs"
+			},
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/basic-auth": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+			"integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"safe-buffer": "5.1.2"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/bits-ui": {
+			"version": "2.18.1",
+			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-2.18.1.tgz",
+			"integrity": "sha512-KkemzKFH4T3gt3H+P86JcnAWExjByv/6vlwjm/BoCwTPHu03yiCdxbghdJLvFReQTe0acCAiRcKfmixxD6XvlA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/core": "^1.7.1",
+				"@floating-ui/dom": "^1.7.1",
+				"esm-env": "^1.1.2",
+				"runed": "^0.35.1",
+				"svelte-toolbelt": "^0.10.6",
+				"tabbable": "^6.2.0"
+			},
+			"engines": {
+				"node": ">=20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/huntabyte"
+			},
+			"peerDependencies": {
+				"@internationalized/date": "^3.8.1",
+				"svelte": "^5.33.0"
+			}
+		},
+		"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==",
+			"dev": true,
+			"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/brace-expansion": {
+			"version": "1.1.15",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.15.tgz",
+			"integrity": "sha512-EwOCDEex4quD37XhqM3omwtMoJjr//isUZz1JopUNWms+4Z2ViyM/k1YIRePpoVNnQhENnxtFjLaxNHrT7xIUg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"balanced-match": "^1.0.0",
+				"concat-map": "0.0.1"
+			}
+		},
+		"node_modules/browserslist": {
+			"version": "4.28.2",
+			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+			"integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/browserslist"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/browserslist"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"baseline-browser-mapping": "^2.10.12",
+				"caniuse-lite": "^1.0.30001782",
+				"electron-to-chromium": "^1.5.328",
+				"node-releases": "^2.0.36",
+				"update-browserslist-db": "^1.2.3"
+			},
+			"bin": {
+				"browserslist": "cli.js"
+			},
+			"engines": {
+				"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+			}
+		},
+		"node_modules/buffer-from": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+			"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"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==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/cac": {
+			"version": "6.7.14",
+			"resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+			"integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/call-bind": {
+			"version": "1.0.9",
+			"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.9.tgz",
+			"integrity": "sha512-a/hy+pNsFUTR+Iz8TCJvXudKVLAnz/DyeSUo10I5yvFDQJBFU2s9uqQpoSrJlroHUKoKqzg+epxyP9lqFdzfBQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bind-apply-helpers": "^1.0.2",
+				"es-define-property": "^1.0.1",
+				"get-intrinsic": "^1.3.0",
+				"set-function-length": "^1.2.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/call-bind-apply-helpers": {
+			"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",
+				"function-bind": "^1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/call-bound": {
+			"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",
+				"get-intrinsic": "^1.3.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/callsites": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+			"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/caniuse-lite": {
+			"version": "1.0.30001793",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001793.tgz",
+			"integrity": "sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/browserslist"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "CC-BY-4.0"
+		},
+		"node_modules/ccount": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+			"integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/chai": {
+			"version": "5.3.3",
+			"resolved": "https://registry.npmjs.org/chai/-/chai-5.3.3.tgz",
+			"integrity": "sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"assertion-error": "^2.0.1",
+				"check-error": "^2.1.1",
+				"deep-eql": "^5.0.1",
+				"loupe": "^3.1.0",
+				"pathval": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/chalk": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-styles": "^4.1.0",
+				"supports-color": "^7.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/character-entities": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+			"integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/character-entities-html4": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+			"integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/character-entities-legacy": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+			"integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/check-error": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.3.tgz",
+			"integrity": "sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 16"
+			}
+		},
+		"node_modules/chokidar": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+			"integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"readdirp": "^5.0.0"
+			},
+			"engines": {
+				"node": ">= 20.19.0"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/chownr": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+			"integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/chromatic": {
+			"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": {
+				"chroma": "dist/bin.js",
+				"chromatic": "dist/bin.js",
+				"chromatic-cli": "dist/bin.js"
+			},
+			"peerDependencies": {
+				"@chromatic-com/cypress": "^0.*.* || ^1.0.0",
+				"@chromatic-com/playwright": "^0.*.* || ^1.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@chromatic-com/cypress": {
+					"optional": true
+				},
+				"@chromatic-com/playwright": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/clsx": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/color": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+			"integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"color-convert": "^2.0.1",
+				"color-string": "^1.9.0"
+			},
+			"engines": {
+				"node": ">=12.5.0"
+			}
+		},
+		"node_modules/color-convert": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"color-name": "~1.1.4"
+			},
+			"engines": {
+				"node": ">=7.0.0"
+			}
+		},
+		"node_modules/color-name": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/color-string": {
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+			"integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"color-name": "^1.0.0",
+				"simple-swizzle": "^0.2.2"
+			}
+		},
+		"node_modules/colorette": {
+			"version": "2.0.20",
+			"resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+			"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/comma-separated-tokens": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+			"integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/commander": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+			"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/common-tags": {
+			"version": "1.8.2",
+			"resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
+			"integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=4.0.0"
+			}
+		},
+		"node_modules/concat-map": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/consola": {
+			"version": "3.4.2",
+			"resolved": "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz",
+			"integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^14.18.0 || >=16.10.0"
+			}
+		},
+		"node_modules/content-disposition": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.1.0.tgz",
+			"integrity": "sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==",
+			"dev": true,
+			"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==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/convert-source-map": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+			"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/cookie": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+			"integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
+		"node_modules/cookie-signature": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+			"integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.6.0"
+			}
+		},
+		"node_modules/core-js-compat": {
+			"version": "3.49.0",
+			"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.49.0.tgz",
+			"integrity": "sha512-VQXt1jr9cBz03b331DFDCCP90b3fanciLkgiOoy8SBHy06gNf+vQ1A3WFLqG7I8TipYIKeYK9wxd0tUrvHcOZA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"browserslist": "^4.28.1"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/core-js"
+			}
+		},
+		"node_modules/cors": {
+			"version": "2.8.6",
+			"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
+			"integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"object-assign": "^4",
+				"vary": "^1"
+			},
+			"engines": {
+				"node": ">= 0.10"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
+		"node_modules/corser": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
+			"integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4.0"
+			}
+		},
+		"node_modules/cose-base": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/cose-base/-/cose-base-1.0.3.tgz",
+			"integrity": "sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"layout-base": "^1.0.0"
+			}
+		},
+		"node_modules/cross-spawn": {
+			"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",
+				"shebang-command": "^2.0.0",
+				"which": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/crypto-random-string": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+			"integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/css.escape": {
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+			"integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/cssesc": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"cssesc": "bin/cssesc"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/csstype": {
+			"version": "3.2.3",
+			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+			"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true
+		},
+		"node_modules/cytoscape": {
+			"version": "3.34.0",
+			"resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.34.0.tgz",
+			"integrity": "sha512-62rNSrioXw93uliKFBwjukeQyeWwH2PqDrTac31r2P6464u3AUvTk0xS4LVvT251g7IgkFunrI48ZEZGjywSOg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10"
+			}
+		},
+		"node_modules/cytoscape-cose-bilkent": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.1.0.tgz",
+			"integrity": "sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"cose-base": "^1.0.0"
+			},
+			"peerDependencies": {
+				"cytoscape": "^3.2.0"
+			}
+		},
+		"node_modules/cytoscape-fcose": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz",
+			"integrity": "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"cose-base": "^2.2.0"
+			},
+			"peerDependencies": {
+				"cytoscape": "^3.2.0"
+			}
+		},
+		"node_modules/cytoscape-fcose/node_modules/cose-base": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz",
+			"integrity": "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"layout-base": "^2.0.0"
+			}
+		},
+		"node_modules/cytoscape-fcose/node_modules/layout-base": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz",
+			"integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/d3": {
+			"version": "7.9.0",
+			"resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+			"integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"d3-array": "3",
+				"d3-axis": "3",
+				"d3-brush": "3",
+				"d3-chord": "3",
+				"d3-color": "3",
+				"d3-contour": "4",
+				"d3-delaunay": "6",
+				"d3-dispatch": "3",
+				"d3-drag": "3",
+				"d3-dsv": "3",
+				"d3-ease": "3",
+				"d3-fetch": "3",
+				"d3-force": "3",
+				"d3-format": "3",
+				"d3-geo": "3",
+				"d3-hierarchy": "3",
+				"d3-interpolate": "3",
+				"d3-path": "3",
+				"d3-polygon": "3",
+				"d3-quadtree": "3",
+				"d3-random": "3",
+				"d3-scale": "4",
+				"d3-scale-chromatic": "3",
+				"d3-selection": "3",
+				"d3-shape": "3",
+				"d3-time": "3",
+				"d3-time-format": "4",
+				"d3-timer": "3",
+				"d3-transition": "3",
+				"d3-zoom": "3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-array": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+			"integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"internmap": "1 - 2"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-axis": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+			"integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-brush": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+			"integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"d3-dispatch": "1 - 3",
+				"d3-drag": "2 - 3",
+				"d3-interpolate": "1 - 3",
+				"d3-selection": "3",
+				"d3-transition": "3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-chord": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+			"integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"d3-path": "1 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-color": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+			"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-contour": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+			"integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"d3-array": "^3.2.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-delaunay": {
+			"version": "6.0.4",
+			"resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+			"integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"delaunator": "5"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-dispatch": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+			"integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-drag": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+			"integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"d3-dispatch": "1 - 3",
+				"d3-selection": "3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-dsv": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+			"integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"commander": "7",
+				"iconv-lite": "0.6",
+				"rw": "1"
+			},
+			"bin": {
+				"csv2json": "bin/dsv2json.js",
+				"csv2tsv": "bin/dsv2dsv.js",
+				"dsv2dsv": "bin/dsv2dsv.js",
+				"dsv2json": "bin/dsv2json.js",
+				"json2csv": "bin/json2dsv.js",
+				"json2dsv": "bin/json2dsv.js",
+				"json2tsv": "bin/json2dsv.js",
+				"tsv2csv": "bin/dsv2dsv.js",
+				"tsv2json": "bin/dsv2json.js"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-dsv/node_modules/iconv-lite": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+			"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/d3-ease": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+			"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-fetch": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+			"integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"d3-dsv": "1 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-force": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+			"integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"d3-dispatch": "1 - 3",
+				"d3-quadtree": "1 - 3",
+				"d3-timer": "1 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-format": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+			"integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-geo": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+			"integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"d3-array": "2.5.0 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-hierarchy": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+			"integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-interpolate": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+			"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"d3-color": "1 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-path": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+			"integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-polygon": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+			"integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-quadtree": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+			"integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-random": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+			"integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-sankey": {
+			"version": "0.12.3",
+			"resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+			"integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"d3-array": "1 - 2",
+				"d3-shape": "^1.2.0"
+			}
+		},
+		"node_modules/d3-sankey/node_modules/d3-array": {
+			"version": "2.12.1",
+			"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+			"integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"internmap": "^1.0.0"
+			}
+		},
+		"node_modules/d3-sankey/node_modules/d3-path": {
+			"version": "1.0.9",
+			"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+			"integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+			"dev": true,
+			"license": "BSD-3-Clause"
+		},
+		"node_modules/d3-sankey/node_modules/d3-shape": {
+			"version": "1.3.7",
+			"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+			"integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"d3-path": "1"
+			}
+		},
+		"node_modules/d3-sankey/node_modules/internmap": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+			"integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/d3-scale": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+			"integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"d3-array": "2.10.0 - 3",
+				"d3-format": "1 - 3",
+				"d3-interpolate": "1.2.0 - 3",
+				"d3-time": "2.1.1 - 3",
+				"d3-time-format": "2 - 4"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-scale-chromatic": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+			"integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"d3-color": "1 - 3",
+				"d3-interpolate": "1 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-selection": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+			"integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-shape": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+			"integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"d3-path": "^3.1.0"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-time": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+			"integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"d3-array": "2 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-time-format": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+			"integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"d3-time": "1 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-timer": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+			"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/d3-transition": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+			"integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"d3-color": "1 - 3",
+				"d3-dispatch": "1 - 3",
+				"d3-ease": "1 - 3",
+				"d3-interpolate": "1 - 3",
+				"d3-timer": "1 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"peerDependencies": {
+				"d3-selection": "2 - 3"
+			}
+		},
+		"node_modules/d3-zoom": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+			"integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"d3-dispatch": "1 - 3",
+				"d3-drag": "2 - 3",
+				"d3-interpolate": "1 - 3",
+				"d3-selection": "2 - 3",
+				"d3-transition": "2 - 3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/dagre-d3-es": {
+			"version": "7.0.14",
+			"resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.14.tgz",
+			"integrity": "sha512-P4rFMVq9ESWqmOgK+dlXvOtLwYg0i7u0HBGJER0LZDJT2VHIPAMZ/riPxqJceWMStH5+E61QxFra9kIS3AqdMg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"d3": "^7.9.0",
+				"lodash-es": "^4.17.21"
+			}
+		},
+		"node_modules/data-view-buffer": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+			"integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.3",
+				"es-errors": "^1.3.0",
+				"is-data-view": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/data-view-byte-length": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+			"integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.3",
+				"es-errors": "^1.3.0",
+				"is-data-view": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/inspect-js"
+			}
+		},
+		"node_modules/data-view-byte-offset": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+			"integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.2",
+				"es-errors": "^1.3.0",
+				"is-data-view": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/dayjs": {
+			"version": "1.11.21",
+			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.21.tgz",
+			"integrity": "sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/debug": {
+			"version": "4.4.3",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+			"integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/decode-bmp": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/decode-bmp/-/decode-bmp-0.2.1.tgz",
+			"integrity": "sha512-NiOaGe+GN0KJqi2STf24hfMkFitDUaIoUU3eKvP/wAbLe8o6FuW5n/x7MHPR0HKvBokp6MQY/j7w8lewEeVCIA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@canvas/image-data": "^1.0.0",
+				"to-data-view": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=8.6.0"
+			}
+		},
+		"node_modules/decode-ico": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/decode-ico/-/decode-ico-0.4.1.tgz",
+			"integrity": "sha512-69NZfbKIzux1vBOd31al3XnMnH+2mqDhEgLdpygErm4d60N+UwA5Sq5WFjmEDQzumgB9fElojGwWG0vybVfFmA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@canvas/image-data": "^1.0.0",
+				"decode-bmp": "^0.2.0",
+				"to-data-view": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=8.6"
+			}
+		},
+		"node_modules/decode-named-character-reference": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.3.0.tgz",
+			"integrity": "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"character-entities": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/dedent": {
+			"version": "1.7.2",
+			"resolved": "https://registry.npmjs.org/dedent/-/dedent-1.7.2.tgz",
+			"integrity": "sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"babel-plugin-macros": "^3.1.0"
+			},
+			"peerDependenciesMeta": {
+				"babel-plugin-macros": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/dedent-js": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz",
+			"integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/deep-eql": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+			"integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/deep-is": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+			"integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/deepmerge": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+			"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"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": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"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-data-property": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+			"integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"es-define-property": "^1.0.0",
+				"es-errors": "^1.3.0",
+				"gopd": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"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/define-properties": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+			"integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"define-data-property": "^1.0.1",
+				"has-property-descriptors": "^1.0.0",
+				"object-keys": "^1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/defu": {
+			"version": "6.1.7",
+			"resolved": "https://registry.npmjs.org/defu/-/defu-6.1.7.tgz",
+			"integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/delaunator": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.1.0.tgz",
+			"integrity": "sha512-AGrQ4QSgssa1NGmWmLPqN5NY2KajF5MqxetNEO+o0n3ZwZZeTmt7bBnvzHWrmkZFxGgr4HdyFgelzgi06otLuQ==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"robust-predicates": "^3.0.2"
+			}
+		},
+		"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==",
+			"dev": true,
+			"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==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/detect-libc": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+			"integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/devalue": {
+			"version": "5.8.1",
+			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.8.1.tgz",
+			"integrity": "sha512-4CXDYRBGqN+57wVJkuXBYmpAVUSg3L6JAQa/DFqm238G73E1wuyc/JhGQJzN7vUf/CMphYau2zXbfWzDR5aTEw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/devlop": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+			"integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"dequal": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/dexie": {
+			"version": "4.4.3",
+			"resolved": "https://registry.npmjs.org/dexie/-/dexie-4.4.3.tgz",
+			"integrity": "sha512-N+3IGQ3HPlyO2YAkntGAwitm42BpBGV86MttzUMiRzWLa4NGh0pltVRcUVF4ybL/OnXjCrr9k7SDPIKkFYP2Lg==",
+			"dev": true,
+			"license": "Apache-2.0"
+		},
+		"node_modules/dom-accessibility-api": {
+			"version": "0.5.16",
+			"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+			"integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true
+		},
+		"node_modules/dompurify": {
+			"version": "3.4.11",
+			"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.11.tgz",
+			"integrity": "sha512-zhlUV12GsaRzMsf9q5M254YhA4+VuF0fG+QFqu6aYpoGlKtz+w8//jBcGVYBgQkR5GHjUomejY84AV+/uPbWdw==",
+			"dev": true,
+			"license": "(MPL-2.0 OR Apache-2.0)",
+			"optionalDependencies": {
+				"@types/trusted-types": "^2.0.7"
+			}
+		},
+		"node_modules/dunder-proto": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+			"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bind-apply-helpers": "^1.0.1",
+				"es-errors": "^1.3.0",
+				"gopd": "^1.2.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"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==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/ejs": {
+			"version": "3.1.10",
+			"resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+			"integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"jake": "^10.8.5"
+			},
+			"bin": {
+				"ejs": "bin/cli.js"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/electron-to-chromium": {
+			"version": "1.5.367",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.367.tgz",
+			"integrity": "sha512-4Mk/mrynCNQ+atY40D3UpmhLWB6AHMbYMlIrPhHcMF6x0L7O0b052FCAsxw1LlaR++UFuNg3D/A6XCuGDa0guQ==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/encodeurl": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+			"integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/enhanced-resolve": {
+			"version": "5.23.0",
+			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.23.0.tgz",
+			"integrity": "sha512-yJN/BOOLxcOW2aQgeif9mSnaUB8KtvmMMp56oA1kx1CRfBKbhZm2pJ+NBY+3eOboHxix8lfjWpHE0Ei5U8RbSA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"graceful-fs": "^4.2.4",
+				"tapable": "^2.3.3"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/entities": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+			"integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"engines": {
+				"node": ">=0.12"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
+		"node_modules/es-abstract": {
+			"version": "1.24.2",
+			"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.2.tgz",
+			"integrity": "sha512-2FpH9Q5i2RRwyEP1AylXe6nYLR5OhaJTZwmlcP0dL/+JCbgg7yyEo/sEK6HeGZRf3dFpWwThaRHVApXSkW3xeg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"array-buffer-byte-length": "^1.0.2",
+				"arraybuffer.prototype.slice": "^1.0.4",
+				"available-typed-arrays": "^1.0.7",
+				"call-bind": "^1.0.8",
+				"call-bound": "^1.0.4",
+				"data-view-buffer": "^1.0.2",
+				"data-view-byte-length": "^1.0.2",
+				"data-view-byte-offset": "^1.0.1",
+				"es-define-property": "^1.0.1",
+				"es-errors": "^1.3.0",
+				"es-object-atoms": "^1.1.1",
+				"es-set-tostringtag": "^2.1.0",
+				"es-to-primitive": "^1.3.0",
+				"function.prototype.name": "^1.1.8",
+				"get-intrinsic": "^1.3.0",
+				"get-proto": "^1.0.1",
+				"get-symbol-description": "^1.1.0",
+				"globalthis": "^1.0.4",
+				"gopd": "^1.2.0",
+				"has-property-descriptors": "^1.0.2",
+				"has-proto": "^1.2.0",
+				"has-symbols": "^1.1.0",
+				"hasown": "^2.0.2",
+				"internal-slot": "^1.1.0",
+				"is-array-buffer": "^3.0.5",
+				"is-callable": "^1.2.7",
+				"is-data-view": "^1.0.2",
+				"is-negative-zero": "^2.0.3",
+				"is-regex": "^1.2.1",
+				"is-set": "^2.0.3",
+				"is-shared-array-buffer": "^1.0.4",
+				"is-string": "^1.1.1",
+				"is-typed-array": "^1.1.15",
+				"is-weakref": "^1.1.1",
+				"math-intrinsics": "^1.1.0",
+				"object-inspect": "^1.13.4",
+				"object-keys": "^1.1.1",
+				"object.assign": "^4.1.7",
+				"own-keys": "^1.0.1",
+				"regexp.prototype.flags": "^1.5.4",
+				"safe-array-concat": "^1.1.3",
+				"safe-push-apply": "^1.0.0",
+				"safe-regex-test": "^1.1.0",
+				"set-proto": "^1.0.0",
+				"stop-iteration-iterator": "^1.1.0",
+				"string.prototype.trim": "^1.2.10",
+				"string.prototype.trimend": "^1.0.9",
+				"string.prototype.trimstart": "^1.0.8",
+				"typed-array-buffer": "^1.0.3",
+				"typed-array-byte-length": "^1.0.3",
+				"typed-array-byte-offset": "^1.0.4",
+				"typed-array-length": "^1.0.7",
+				"unbox-primitive": "^1.1.0",
+				"which-typed-array": "^1.1.19"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/es-define-property": {
+			"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"
+			}
+		},
+		"node_modules/es-errors": {
+			"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"
+			}
+		},
+		"node_modules/es-module-lexer": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.1.0.tgz",
+			"integrity": "sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/es-object-atoms": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+			"integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-set-tostringtag": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+			"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"get-intrinsic": "^1.2.6",
+				"has-tostringtag": "^1.0.2",
+				"hasown": "^2.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-to-primitive": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+			"integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-callable": "^1.2.7",
+				"is-date-object": "^1.0.5",
+				"is-symbol": "^1.0.4"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/es-toolkit": {
+			"version": "1.47.0",
+			"resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.47.0.tgz",
+			"integrity": "sha512-n1GuoD0WEQZMBk5tttoZSqwgyLx01oqa5XsBmCHwPyNe1S9jPBEmtR2pSgp2kJuWE3ciFZ6yRHmY4pM4C3OOkw==",
+			"dev": true,
+			"license": "MIT",
+			"workspaces": [
+				"docs",
+				"benchmarks"
+			]
+		},
+		"node_modules/esbuild": {
+			"version": "0.27.7",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.7.tgz",
+			"integrity": "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "MIT",
+			"bin": {
+				"esbuild": "bin/esbuild"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"optionalDependencies": {
+				"@esbuild/aix-ppc64": "0.27.7",
+				"@esbuild/android-arm": "0.27.7",
+				"@esbuild/android-arm64": "0.27.7",
+				"@esbuild/android-x64": "0.27.7",
+				"@esbuild/darwin-arm64": "0.27.7",
+				"@esbuild/darwin-x64": "0.27.7",
+				"@esbuild/freebsd-arm64": "0.27.7",
+				"@esbuild/freebsd-x64": "0.27.7",
+				"@esbuild/linux-arm": "0.27.7",
+				"@esbuild/linux-arm64": "0.27.7",
+				"@esbuild/linux-ia32": "0.27.7",
+				"@esbuild/linux-loong64": "0.27.7",
+				"@esbuild/linux-mips64el": "0.27.7",
+				"@esbuild/linux-ppc64": "0.27.7",
+				"@esbuild/linux-riscv64": "0.27.7",
+				"@esbuild/linux-s390x": "0.27.7",
+				"@esbuild/linux-x64": "0.27.7",
+				"@esbuild/netbsd-arm64": "0.27.7",
+				"@esbuild/netbsd-x64": "0.27.7",
+				"@esbuild/openbsd-arm64": "0.27.7",
+				"@esbuild/openbsd-x64": "0.27.7",
+				"@esbuild/openharmony-arm64": "0.27.7",
+				"@esbuild/sunos-x64": "0.27.7",
+				"@esbuild/win32-arm64": "0.27.7",
+				"@esbuild/win32-ia32": "0.27.7",
+				"@esbuild/win32-x64": "0.27.7"
+			}
+		},
+		"node_modules/escalade": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+			"integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"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==",
+			"dev": true,
+			"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",
+			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/eslint": {
+			"version": "9.39.4",
+			"resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.4.tgz",
+			"integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@eslint-community/eslint-utils": "^4.8.0",
+				"@eslint-community/regexpp": "^4.12.1",
+				"@eslint/config-array": "^0.21.2",
+				"@eslint/config-helpers": "^0.4.2",
+				"@eslint/core": "^0.17.0",
+				"@eslint/eslintrc": "^3.3.5",
+				"@eslint/js": "9.39.4",
+				"@eslint/plugin-kit": "^0.4.1",
+				"@humanfs/node": "^0.16.6",
+				"@humanwhocodes/module-importer": "^1.0.1",
+				"@humanwhocodes/retry": "^0.4.2",
+				"@types/estree": "^1.0.6",
+				"ajv": "^6.14.0",
+				"chalk": "^4.0.0",
+				"cross-spawn": "^7.0.6",
+				"debug": "^4.3.2",
+				"escape-string-regexp": "^4.0.0",
+				"eslint-scope": "^8.4.0",
+				"eslint-visitor-keys": "^4.2.1",
+				"espree": "^10.4.0",
+				"esquery": "^1.5.0",
+				"esutils": "^2.0.2",
+				"fast-deep-equal": "^3.1.3",
+				"file-entry-cache": "^8.0.0",
+				"find-up": "^5.0.0",
+				"glob-parent": "^6.0.2",
+				"ignore": "^5.2.0",
+				"imurmurhash": "^0.1.4",
+				"is-glob": "^4.0.0",
+				"json-stable-stringify-without-jsonify": "^1.0.1",
+				"lodash.merge": "^4.6.2",
+				"minimatch": "^3.1.5",
+				"natural-compare": "^1.4.0",
+				"optionator": "^0.9.3"
+			},
+			"bin": {
+				"eslint": "bin/eslint.js"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"url": "https://eslint.org/donate"
+			},
+			"peerDependencies": {
+				"jiti": "*"
+			},
+			"peerDependenciesMeta": {
+				"jiti": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/eslint-config-prettier": {
+			"version": "10.1.8",
+			"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
+			"integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"eslint-config-prettier": "bin/cli.js"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint-config-prettier"
+			},
+			"peerDependencies": {
+				"eslint": ">=7.0.0"
+			}
+		},
+		"node_modules/eslint-plugin-storybook": {
+			"version": "10.4.2",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-10.4.2.tgz",
+			"integrity": "sha512-l3/vzLRmb8VSi3X1Bo6/Pa+64naw1jFsZE5jPPA4izvVdNhH1rF4rGuOC3kDTU926qKVBQtKua8D24XWQtvcGg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/utils": "^8.48.0"
+			},
+			"peerDependencies": {
+				"eslint": ">=8",
+				"storybook": "^10.4.2"
+			}
+		},
+		"node_modules/eslint-plugin-svelte": {
+			"version": "3.19.0",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-3.19.0.tgz",
+			"integrity": "sha512-t3rNaZeXz4d2gG4uJyMEYfJCFKf22+SWbSizIIXIWKu4wM+XPLiMWuSSr/C5821JmFeN9ogK+eExbG+z+twyxw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@eslint-community/eslint-utils": "^4.6.1",
+				"@jridgewell/sourcemap-codec": "^1.5.0",
+				"esutils": "^2.0.3",
+				"globals": "^16.0.0",
+				"known-css-properties": "^0.37.0",
+				"postcss": "^8.4.49",
+				"postcss-load-config": "^3.1.4",
+				"postcss-safe-parser": "^7.0.0",
+				"semver": "^7.6.3",
+				"svelte-eslint-parser": "^1.7.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ota-meshi"
+			},
+			"peerDependencies": {
+				"eslint": "^8.57.1 || ^9.0.0 || ^10.0.0",
+				"svelte": "^3.37.0 || ^4.0.0 || ^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"svelte": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/eslint-scope": {
+			"version": "8.4.0",
+			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+			"integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"esrecurse": "^4.3.0",
+				"estraverse": "^5.2.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/eslint-visitor-keys": {
+			"version": "4.2.1",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+			"integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/eslint/node_modules/@eslint/js": {
+			"version": "9.39.4",
+			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.4.tgz",
+			"integrity": "sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"url": "https://eslint.org/donate"
+			}
+		},
+		"node_modules/eslint/node_modules/ajv": {
+			"version": "6.15.0",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
+			"integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.1",
+				"fast-json-stable-stringify": "^2.0.0",
+				"json-schema-traverse": "^0.4.1",
+				"uri-js": "^4.2.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/eslint/node_modules/json-schema-traverse": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+			"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/esm-env": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
+			"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/espree": {
+			"version": "10.4.0",
+			"resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+			"integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"acorn": "^8.15.0",
+				"acorn-jsx": "^5.3.2",
+				"eslint-visitor-keys": "^4.2.1"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/esprima": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+			"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"bin": {
+				"esparse": "bin/esparse.js",
+				"esvalidate": "bin/esvalidate.js"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/esquery": {
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+			"integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"estraverse": "^5.1.0"
+			},
+			"engines": {
+				"node": ">=0.10"
+			}
+		},
+		"node_modules/esrap": {
+			"version": "1.4.9",
+			"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.9.tgz",
+			"integrity": "sha512-3OMlcd0a03UGuZpPeUC1HxR3nA23l+HEyCiZw3b3FumJIN9KphoGzDJKMXI1S72jVS1dsenDyQC0kJlO1U9E1g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.4.15"
+			}
+		},
+		"node_modules/esrecurse": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+			"integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"estraverse": "^5.2.0"
+			},
+			"engines": {
+				"node": ">=4.0"
+			}
+		},
+		"node_modules/estraverse": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+			"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"engines": {
+				"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",
+			"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/eta": {
+			"version": "4.6.0",
+			"resolved": "https://registry.npmjs.org/eta/-/eta-4.6.0.tgz",
+			"integrity": "sha512-lW6is4T1NFOYnmqGZIfvixqj7A7sSvScF+DN8EK6K58xI5MZ5UvYe0GjopxOXQtZvUn4eDdVuZ8XSoYWTMEKwA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=20"
+			},
+			"funding": {
+				"url": "https://github.com/bgub/eta?sponsor=1"
+			}
+		},
+		"node_modules/etag": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+			"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/eventemitter3": {
+			"version": "4.0.7",
+			"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+			"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+			"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==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"eventsource-parser": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/eventsource-parser": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.1.0.tgz",
+			"integrity": "sha512-kJezFj9YFAMLeORyi7aCLxLbD5/qWMQnoMVlVPyHIll7lgRJCc3JVln9Vgl9nwQi0YkMnhdGTMNn7CkRRAptMg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/expect-type": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+			"integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"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==",
+			"dev": true,
+			"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.5.2",
+			"resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.5.2.tgz",
+			"integrity": "sha512-5Kb34ipNX694DH48vN9irak1Qx30nb0PLYHXfJgw4YEjiC3ZEmZJhwOp+VfiCYwFzvFTdB9QkArYS5kXa2cx2A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ip-address": "^10.2.0"
+			},
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/express-rate-limit"
+			},
+			"peerDependencies": {
+				"express": ">= 4.11"
+			}
+		},
+		"node_modules/extend": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+			"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/fast-deep-equal": {
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/fast-json-stable-stringify": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+			"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/fast-levenshtein": {
+			"version": "2.0.6",
+			"resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+			"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/fast-uri": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.2.tgz",
+			"integrity": "sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fastify"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/fastify"
+				}
+			],
+			"license": "BSD-3-Clause"
+		},
+		"node_modules/fdir": {
+			"version": "6.5.0",
+			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+			"integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"peerDependencies": {
+				"picomatch": "^3 || ^4"
+			},
+			"peerDependenciesMeta": {
+				"picomatch": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/fflate": {
+			"version": "0.8.3",
+			"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz",
+			"integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/file-entry-cache": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+			"integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"flat-cache": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			}
+		},
+		"node_modules/filelist": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.6.tgz",
+			"integrity": "sha512-5giy2PkLYY1cP39p17Ech+2xlpTRL9HLspOfEgm0L6CwBXBTgsK5ou0JtzYuepxkaQ/tvhCFIJ5uXo0OrM2DxA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"minimatch": "^5.0.1"
+			}
+		},
+		"node_modules/filelist/node_modules/brace-expansion": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.1.tgz",
+			"integrity": "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/filelist/node_modules/minimatch": {
+			"version": "5.1.9",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.9.tgz",
+			"integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/filesize": {
+			"version": "10.1.6",
+			"resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.6.tgz",
+			"integrity": "sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">= 10.4.0"
+			}
+		},
+		"node_modules/finalhandler": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
+			"integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
+			"dev": true,
+			"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",
+			"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"locate-path": "^6.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/flat-cache": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+			"integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"flatted": "^3.2.9",
+				"keyv": "^4.5.4"
+			},
+			"engines": {
+				"node": ">=16"
+			}
+		},
+		"node_modules/flatted": {
+			"version": "3.4.2",
+			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+			"integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/follow-redirects": {
+			"version": "1.16.0",
+			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+			"integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://github.com/sponsors/RubenVerborgh"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=4.0"
+			},
+			"peerDependenciesMeta": {
+				"debug": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/for-each": {
+			"version": "0.3.5",
+			"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+			"integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-callable": "^1.2.7"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"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==",
+			"dev": true,
+			"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==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/fs-extra": {
+			"version": "9.1.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+			"integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"at-least-node": "^1.0.0",
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/fsevents": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+			"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+			}
+		},
+		"node_modules/function-bind": {
+			"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"
+			}
+		},
+		"node_modules/function.prototype.name": {
+			"version": "1.1.8",
+			"resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+			"integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bind": "^1.0.8",
+				"call-bound": "^1.0.3",
+				"define-properties": "^1.2.1",
+				"functions-have-names": "^1.2.3",
+				"hasown": "^2.0.2",
+				"is-callable": "^1.2.7"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/functions-have-names": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+			"integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/generator-function": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+			"integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/gensync": {
+			"version": "1.0.0-beta.2",
+			"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+			"integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
+		"node_modules/get-intrinsic": {
+			"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",
+				"es-define-property": "^1.0.1",
+				"es-errors": "^1.3.0",
+				"es-object-atoms": "^1.1.1",
+				"function-bind": "^1.1.2",
+				"get-proto": "^1.0.1",
+				"gopd": "^1.2.0",
+				"has-symbols": "^1.1.0",
+				"hasown": "^2.0.2",
+				"math-intrinsics": "^1.1.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/get-own-enumerable-property-symbols": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+			"integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/get-proto": {
+			"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",
+				"es-object-atoms": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/get-symbol-description": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+			"integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.3",
+				"es-errors": "^1.3.0",
+				"get-intrinsic": "^1.2.6"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/glob-parent": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+			"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"is-glob": "^4.0.3"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/globals": {
+			"version": "16.5.0",
+			"resolved": "https://registry.npmjs.org/globals/-/globals-16.5.0.tgz",
+			"integrity": "sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/globalthis": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+			"integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"define-properties": "^1.2.1",
+				"gopd": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/gopd": {
+			"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"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/graceful-fs": {
+			"version": "4.2.11",
+			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/hachure-fill": {
+			"version": "0.5.2",
+			"resolved": "https://registry.npmjs.org/hachure-fill/-/hachure-fill-0.5.2.tgz",
+			"integrity": "sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/has-bigints": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+			"integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-flag": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/has-property-descriptors": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+			"integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"es-define-property": "^1.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-proto": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+			"integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"dunder-proto": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-symbols": {
+			"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"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-tostringtag": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+			"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"has-symbols": "^1.0.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/hasown": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+			"integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"function-bind": "^1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/hast-util-from-dom": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/hast-util-from-dom/-/hast-util-from-dom-5.0.1.tgz",
+			"integrity": "sha512-N+LqofjR2zuzTjCPzyDUdSshy4Ma6li7p/c3pA78uTwzFgENbgbUrm2ugwsOdcjI1muO+o6Dgzp9p8WHtn/39Q==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"hastscript": "^9.0.0",
+				"web-namespaces": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-from-html": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/hast-util-from-html/-/hast-util-from-html-2.0.3.tgz",
+			"integrity": "sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"devlop": "^1.1.0",
+				"hast-util-from-parse5": "^8.0.0",
+				"parse5": "^7.0.0",
+				"vfile": "^6.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-from-html-isomorphic": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-from-html-isomorphic/-/hast-util-from-html-isomorphic-2.0.0.tgz",
+			"integrity": "sha512-zJfpXq44yff2hmE0XmwEOzdWin5xwH+QIhMLOScpX91e/NSGPsAzNCvLQDIEPyO2TXi+lBmU6hjLIhV8MwP2kw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"hast-util-from-dom": "^5.0.0",
+				"hast-util-from-html": "^2.0.0",
+				"unist-util-remove-position": "^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-from-html/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/hast-util-from-html/node_modules/vfile-message": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+			"integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-stringify-position": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-from-parse5": {
+			"version": "8.0.3",
+			"resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.3.tgz",
+			"integrity": "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"devlop": "^1.0.0",
+				"hastscript": "^9.0.0",
+				"property-information": "^7.0.0",
+				"vfile": "^6.0.0",
+				"vfile-location": "^5.0.0",
+				"web-namespaces": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-from-parse5/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/hast-util-is-element": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
+			"integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-parse-selector": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+			"integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-sanitize": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/hast-util-sanitize/-/hast-util-sanitize-5.0.2.tgz",
+			"integrity": "sha512-3yTWghByc50aGS7JlGhk61SPenfE/p1oaFeNwkOOyrscaOkMGrcW9+Cy/QAIOBpZxP1yqDIzFMR0+Np0i0+usg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@ungap/structured-clone": "^1.0.0",
+				"unist-util-position": "^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-html": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz",
+			"integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"ccount": "^2.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"hast-util-whitespace": "^3.0.0",
+				"html-void-elements": "^3.0.0",
+				"mdast-util-to-hast": "^13.0.0",
+				"property-information": "^7.0.0",
+				"space-separated-tokens": "^2.0.0",
+				"stringify-entities": "^4.0.0",
+				"zwitch": "^2.0.4"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-html/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/hast-util-to-text": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
+			"integrity": "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"hast-util-is-element": "^3.0.0",
+				"unist-util-find-after": "^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-text/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/hast-util-whitespace": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+			"integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hastscript": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.1.tgz",
+			"integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"hast-util-parse-selector": "^4.0.0",
+				"property-information": "^7.0.0",
+				"space-separated-tokens": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/he": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+			"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"he": "bin/he"
+			}
+		},
+		"node_modules/highlight.js": {
+			"version": "11.11.1",
+			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+			"integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
+		"node_modules/hono": {
+			"version": "4.12.26",
+			"resolved": "https://registry.npmjs.org/hono/-/hono-4.12.26.tgz",
+			"integrity": "sha512-uyZtpnYxM9CmQ7QsQknM4zN8EftNqhON1qYeIKM0Se67CCEe2c44xyGURwB0axX2fBDu1dqHrHAc1hmNT8ITkw==",
+			"dev": true,
+			"license": "MIT",
+			"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",
+			"integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"whatwg-encoding": "^2.0.0"
+			},
+			"engines": {
+				"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",
+			"integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"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==",
+			"dev": true,
+			"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",
+			"integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"eventemitter3": "^4.0.0",
+				"follow-redirects": "^1.0.0",
+				"requires-port": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
+		"node_modules/http-server": {
+			"version": "14.1.1",
+			"resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz",
+			"integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"basic-auth": "^2.0.1",
+				"chalk": "^4.1.2",
+				"corser": "^2.0.1",
+				"he": "^1.2.0",
+				"html-encoding-sniffer": "^3.0.0",
+				"http-proxy": "^1.18.1",
+				"mime": "^1.6.0",
+				"minimist": "^1.2.6",
+				"opener": "^1.5.1",
+				"portfinder": "^1.0.28",
+				"secure-compare": "3.0.1",
+				"union": "~0.5.0",
+				"url-join": "^4.0.1"
+			},
+			"bin": {
+				"http-server": "bin/http-server"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/ico-endec": {
+			"version": "0.1.6",
+			"resolved": "https://registry.npmjs.org/ico-endec/-/ico-endec-0.1.6.tgz",
+			"integrity": "sha512-ZdLU38ZoED3g1j3iEyzcQj+wAkY2xfWNkymszfJPoxucIUhK7NayQ+/C4Kv0nDFMIsbtbEHldv3V8PU494/ueQ==",
+			"dev": true,
+			"license": "MPL-2.0"
+		},
+		"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==",
+			"dev": true,
+			"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/idb": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+			"integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/ignore": {
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+			"integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 4"
+			}
+		},
+		"node_modules/immutable": {
+			"version": "5.1.6",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.6.tgz",
+			"integrity": "sha512-q1swsS8K7L8usSHuOqF2TAoCCkonYz0SG38wLAggaa4Wml70zixIvt2ql4coQ2C2B3hTjltJry4r6bULwgAXLQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/import-fresh": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+			"integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"parent-module": "^1.0.0",
+				"resolve-from": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/import-meta-resolve": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz",
+			"integrity": "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/imurmurhash": {
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+			"integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.8.19"
+			}
+		},
+		"node_modules/indent-string": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+			"integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"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==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/inline-style-parser": {
+			"version": "0.2.7",
+			"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+			"integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/internal-slot": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+			"integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"hasown": "^2.0.2",
+				"side-channel": "^1.1.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/internmap": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+			"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/ip-address": {
+			"version": "10.2.0",
+			"resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.2.0.tgz",
+			"integrity": "sha512-/+S6j4E9AHvW9SWMSEY9Xfy66O5PWvVEJ08O0y5JGyEKQpojb0K0GKpz/v5HJ/G0vi3D2sjGK78119oXZeE0qA==",
+			"dev": true,
+			"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==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
+		"node_modules/is-array-buffer": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+			"integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bind": "^1.0.8",
+				"call-bound": "^1.0.3",
+				"get-intrinsic": "^1.2.6"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-arrayish": {
+			"version": "0.3.4",
+			"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz",
+			"integrity": "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/is-async-function": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+			"integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"async-function": "^1.0.0",
+				"call-bound": "^1.0.3",
+				"get-proto": "^1.0.1",
+				"has-tostringtag": "^1.0.2",
+				"safe-regex-test": "^1.1.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-bigint": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+			"integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"has-bigints": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-boolean-object": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+			"integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.3",
+				"has-tostringtag": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-callable": {
+			"version": "1.2.7",
+			"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+			"integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-core-module": {
+			"version": "2.16.2",
+			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
+			"integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"hasown": "^2.0.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-data-view": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+			"integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.2",
+				"get-intrinsic": "^1.2.6",
+				"is-typed-array": "^1.1.13"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-date-object": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+			"integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.2",
+				"has-tostringtag": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"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",
+			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-finalizationregistry": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+			"integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-generator-function": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+			"integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.4",
+				"generator-function": "^2.0.0",
+				"get-proto": "^1.0.1",
+				"has-tostringtag": "^1.0.2",
+				"safe-regex-test": "^1.1.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-glob": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-extglob": "^2.1.1"
+			},
+			"engines": {
+				"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-map": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+			"integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-module": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+			"integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/is-negative-zero": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+			"integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-number-object": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+			"integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.3",
+				"has-tostringtag": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-obj": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+			"integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-plain-obj": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+			"integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"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==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/is-reference": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
+			"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree": "^1.0.6"
+			}
+		},
+		"node_modules/is-regex": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+			"integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.2",
+				"gopd": "^1.2.0",
+				"has-tostringtag": "^1.0.2",
+				"hasown": "^2.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-regexp": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+			"integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-set": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+			"integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-shared-array-buffer": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+			"integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-stream": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+			"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/is-string": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+			"integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.3",
+				"has-tostringtag": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-symbol": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+			"integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.2",
+				"has-symbols": "^1.1.0",
+				"safe-regex-test": "^1.1.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-typed-array": {
+			"version": "1.1.15",
+			"resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+			"integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"which-typed-array": "^1.1.16"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-weakmap": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+			"integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-weakref": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+			"integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-weakset": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+			"integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.3",
+				"get-intrinsic": "^1.2.6"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/is-wsl": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.1.tgz",
+			"integrity": "sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-inside-container": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/isarray": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+			"integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"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-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/jake": {
+			"version": "10.9.4",
+			"resolved": "https://registry.npmjs.org/jake/-/jake-10.9.4.tgz",
+			"integrity": "sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"async": "^3.2.6",
+				"filelist": "^1.0.4",
+				"picocolors": "^1.1.1"
+			},
+			"bin": {
+				"jake": "bin/cli.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/jiti": {
+			"version": "2.7.0",
+			"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+			"integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"jiti": "lib/jiti-cli.mjs"
+			}
+		},
+		"node_modules/jose": {
+			"version": "6.2.3",
+			"resolved": "https://registry.npmjs.org/jose/-/jose-6.2.3.tgz",
+			"integrity": "sha512-YYVDInQKFJfR/xa3ojUTl8c2KoTwiL1R5Wg9YCydwH0x0B9grbzlg5HC7mMjCtUJjbQ/YnGEZIhI5tCgfTb4Hw==",
+			"dev": true,
+			"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",
+			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/js-yaml": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.2.0.tgz",
+			"integrity": "sha512-ePWsvanv0DWuDRsW8dnt+R4jQ31SCRCQ7hhNcPXZPsoBZiemuZNYGf7adZdqX2D86j6rvKp3RpCxVTSb8WQlOw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/puzrin"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/nodeca"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"argparse": "^2.0.1"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
+		"node_modules/jsesc": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+			"integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"jsesc": "bin/jsesc"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/json-buffer": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+			"integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"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==",
+			"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==",
+			"dev": true,
+			"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",
+			"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/json5": {
+			"version": "2.2.3",
+			"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+			"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"json5": "lib/cli.js"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/jsonfile": {
+			"version": "6.2.1",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.1.tgz",
+			"integrity": "sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
+			"optionalDependencies": {
+				"graceful-fs": "^4.1.6"
+			}
+		},
+		"node_modules/jsonpointer": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
+			"integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/katex": {
+			"version": "0.16.47",
+			"resolved": "https://registry.npmjs.org/katex/-/katex-0.16.47.tgz",
+			"integrity": "sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==",
+			"dev": true,
+			"funding": [
+				"https://opencollective.com/katex",
+				"https://github.com/sponsors/katex"
+			],
+			"license": "MIT",
+			"dependencies": {
+				"commander": "^8.3.0"
+			},
+			"bin": {
+				"katex": "cli.js"
+			}
+		},
+		"node_modules/katex/node_modules/commander": {
+			"version": "8.3.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+			"integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/keyv": {
+			"version": "4.5.4",
+			"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+			"integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"json-buffer": "3.0.1"
+			}
+		},
+		"node_modules/khroma": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/khroma/-/khroma-2.1.0.tgz",
+			"integrity": "sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==",
+			"dev": true
+		},
+		"node_modules/kleur": {
+			"version": "4.1.5",
+			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+			"integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/known-css-properties": {
+			"version": "0.37.0",
+			"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.37.0.tgz",
+			"integrity": "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/kolorist": {
+			"version": "1.8.0",
+			"resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+			"integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/layout-base": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz",
+			"integrity": "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/leven": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
+			"integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/levn": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+			"integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"prelude-ls": "^1.2.1",
+				"type-check": "~0.4.0"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/lightningcss": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
+			"integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+			"dev": true,
+			"license": "MPL-2.0",
+			"dependencies": {
+				"detect-libc": "^2.0.3"
+			},
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			},
+			"optionalDependencies": {
+				"lightningcss-darwin-arm64": "1.30.1",
+				"lightningcss-darwin-x64": "1.30.1",
+				"lightningcss-freebsd-x64": "1.30.1",
+				"lightningcss-linux-arm-gnueabihf": "1.30.1",
+				"lightningcss-linux-arm64-gnu": "1.30.1",
+				"lightningcss-linux-arm64-musl": "1.30.1",
+				"lightningcss-linux-x64-gnu": "1.30.1",
+				"lightningcss-linux-x64-musl": "1.30.1",
+				"lightningcss-win32-arm64-msvc": "1.30.1",
+				"lightningcss-win32-x64-msvc": "1.30.1"
+			}
+		},
+		"node_modules/lightningcss-darwin-arm64": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+			"integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-darwin-x64": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+			"integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-freebsd-x64": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+			"integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-arm-gnueabihf": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+			"integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-arm64-gnu": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+			"integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-arm64-musl": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+			"integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-x64-gnu": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+			"integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-x64-musl": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+			"integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-win32-arm64-msvc": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+			"integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-win32-x64-msvc": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+			"integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lilconfig": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+			"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/locate-character": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/locate-path": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+			"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"p-locate": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/lodash-es": {
+			"version": "4.18.1",
+			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+			"integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/lodash.castarray": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+			"integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/lodash.debounce": {
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+			"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/lodash.isplainobject": {
+			"version": "4.0.6",
+			"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+			"integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/lodash.merge": {
+			"version": "4.6.2",
+			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+			"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/lodash.sortby": {
+			"version": "4.7.0",
+			"resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+			"integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/longest-streak": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+			"integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/loupe": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/loupe/-/loupe-3.2.1.tgz",
+			"integrity": "sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/lowlight": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/lowlight/-/lowlight-3.3.0.tgz",
+			"integrity": "sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"devlop": "^1.0.0",
+				"highlight.js": "~11.11.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/lz-string": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+			"integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"lz-string": "bin/bin.js"
+			}
+		},
+		"node_modules/magic-string": {
+			"version": "0.30.21",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+			"integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.5.5"
+			}
+		},
+		"node_modules/magicast": {
+			"version": "0.5.3",
+			"resolved": "https://registry.npmjs.org/magicast/-/magicast-0.5.3.tgz",
+			"integrity": "sha512-pVKE4UdSQ7DvHzivsCIFx2BJn1mHG6KsyrFcaxFx6tONdneEuThrDx0Cj3AMg58KyN4pzYT+LHOotxDQDjNvkw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@babel/parser": "^7.29.3",
+				"@babel/types": "^7.29.0",
+				"source-map-js": "^1.2.1"
+			}
+		},
+		"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",
+			"integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/marked": {
+			"version": "16.4.2",
+			"resolved": "https://registry.npmjs.org/marked/-/marked-16.4.2.tgz",
+			"integrity": "sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"marked": "bin/marked.js"
+			},
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/math-intrinsics": {
+			"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"
+			}
+		},
+		"node_modules/mdast": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/mdast/-/mdast-3.0.0.tgz",
+			"integrity": "sha512-xySmf8g4fPKMeC07jXGz971EkLbWAJ83s4US2Tj9lEdnZ142UP5grN73H1Xd3HzrdbU5o9GYYP/y8F9ZSwLE9g==",
+			"deprecated": "`mdast` was renamed to `remark`",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/mdast-util-find-and-replace": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
+			"integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"escape-string-regexp": "^5.0.0",
+				"unist-util-is": "^6.0.0",
+				"unist-util-visit-parents": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+			"integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/mdast-util-from-markdown": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.3.tgz",
+			"integrity": "sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"@types/unist": "^3.0.0",
+				"decode-named-character-reference": "^1.0.0",
+				"devlop": "^1.0.0",
+				"mdast-util-to-string": "^4.0.0",
+				"micromark": "^4.0.0",
+				"micromark-util-decode-numeric-character-reference": "^2.0.0",
+				"micromark-util-decode-string": "^2.0.0",
+				"micromark-util-normalize-identifier": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0",
+				"unist-util-stringify-position": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-from-markdown/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/mdast-util-gfm": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+			"integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-gfm-autolink-literal": "^2.0.0",
+				"mdast-util-gfm-footnote": "^2.0.0",
+				"mdast-util-gfm-strikethrough": "^2.0.0",
+				"mdast-util-gfm-table": "^2.0.0",
+				"mdast-util-gfm-task-list-item": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-gfm-autolink-literal": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+			"integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"ccount": "^2.0.0",
+				"devlop": "^1.0.0",
+				"mdast-util-find-and-replace": "^3.0.0",
+				"micromark-util-character": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-gfm-footnote": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+			"integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"devlop": "^1.1.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0",
+				"micromark-util-normalize-identifier": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-gfm-strikethrough": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+			"integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-gfm-table": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+			"integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"devlop": "^1.0.0",
+				"markdown-table": "^3.0.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-gfm-task-list-item": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+			"integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"devlop": "^1.0.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-to-markdown": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-math": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-math/-/mdast-util-math-3.0.0.tgz",
+			"integrity": "sha512-Tl9GBNeG/AhJnQM221bJR2HPvLOSnLE/T9cJI9tlc6zwQk2nPk/4f0cHkOdEixQPC/j8UtKDdITswvLAy1OZ1w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"devlop": "^1.0.0",
+				"longest-streak": "^3.0.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"mdast-util-to-markdown": "^2.1.0",
+				"unist-util-remove-position": "^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-newline-to-break": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-newline-to-break/-/mdast-util-newline-to-break-2.0.0.tgz",
+			"integrity": "sha512-MbgeFca0hLYIEx/2zGsszCSEJJ1JSCdiY5xQxRcLDDGa8EPvlLPupJ4DSajbMPAnC0je8jfb9TiUATnxxrHUog==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"mdast-util-find-and-replace": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-phrasing": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+			"integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"unist-util-is": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-to-hast": {
+			"version": "13.2.1",
+			"resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+			"integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"@ungap/structured-clone": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-util-sanitize-uri": "^2.0.0",
+				"trim-lines": "^3.0.0",
+				"unist-util-position": "^5.0.0",
+				"unist-util-visit": "^5.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-to-markdown": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
+			"integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"@types/unist": "^3.0.0",
+				"longest-streak": "^3.0.0",
+				"mdast-util-phrasing": "^4.0.0",
+				"mdast-util-to-string": "^4.0.0",
+				"micromark-util-classify-character": "^2.0.0",
+				"micromark-util-decode-string": "^2.0.0",
+				"unist-util-visit": "^5.0.0",
+				"zwitch": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdast-util-to-markdown/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/mdast-util-to-string": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+			"integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdsvex": {
+			"version": "0.12.7",
+			"resolved": "https://registry.npmjs.org/mdsvex/-/mdsvex-0.12.7.tgz",
+			"integrity": "sha512-gx4bReLCUvq+MPErHXYeyX+TEq1hsS2KfiZtEOMNTcbibSouFy8AHc5h04KbGCl+g5tLuo4/lbgRVYRnc7bJZw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.4",
+				"@types/unist": "^2.0.3",
+				"prism-svelte": "^0.4.7",
+				"prismjs": "^1.17.1",
+				"unist-util-visit": "^2.0.1",
+				"vfile-message": "^2.0.4"
+			},
+			"peerDependencies": {
+				"svelte": "^3.56.0 || ^4.0.0 || ^5.0.0-next.120"
+			}
+		},
+		"node_modules/mdsvex/node_modules/unist-util-is": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
+			"integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdsvex/node_modules/unist-util-visit": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
+			"integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"unist-util-is": "^4.0.0",
+				"unist-util-visit-parents": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/mdsvex/node_modules/unist-util-visit-parents": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
+			"integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"unist-util-is": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"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==",
+			"dev": true,
+			"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==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/mermaid": {
+			"version": "11.15.0",
+			"resolved": "https://registry.npmjs.org/mermaid/-/mermaid-11.15.0.tgz",
+			"integrity": "sha512-pTMbcf3rWdtLiYGpmoTjHEpeY8seiy6sR+9nD7LOs8KfUbHE4lOUAprTRqRAcWSQ6MQpdX+YEsxShtGsINtPtw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@braintree/sanitize-url": "^7.1.1",
+				"@iconify/utils": "^3.0.2",
+				"@mermaid-js/parser": "^1.1.1",
+				"@types/d3": "^7.4.3",
+				"@upsetjs/venn.js": "^2.0.0",
+				"cytoscape": "^3.33.1",
+				"cytoscape-cose-bilkent": "^4.1.0",
+				"cytoscape-fcose": "^2.2.0",
+				"d3": "^7.9.0",
+				"d3-sankey": "^0.12.3",
+				"dagre-d3-es": "7.0.14",
+				"dayjs": "^1.11.19",
+				"dompurify": "^3.3.1",
+				"es-toolkit": "^1.45.1",
+				"katex": "^0.16.25",
+				"khroma": "^2.1.0",
+				"marked": "^16.3.0",
+				"roughjs": "^4.6.6",
+				"stylis": "^4.3.6",
+				"ts-dedent": "^2.2.0",
+				"uuid": "^11.1.0 || ^12 || ^13 || ^14.0.0"
+			}
+		},
+		"node_modules/micromark": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
+			"integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"@types/debug": "^4.0.0",
+				"debug": "^4.0.0",
+				"decode-named-character-reference": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-core-commonmark": "^2.0.0",
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-chunked": "^2.0.0",
+				"micromark-util-combine-extensions": "^2.0.0",
+				"micromark-util-decode-numeric-character-reference": "^2.0.0",
+				"micromark-util-encode": "^2.0.0",
+				"micromark-util-normalize-identifier": "^2.0.0",
+				"micromark-util-resolve-all": "^2.0.0",
+				"micromark-util-sanitize-uri": "^2.0.0",
+				"micromark-util-subtokenize": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-core-commonmark": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz",
+			"integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"decode-named-character-reference": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-factory-destination": "^2.0.0",
+				"micromark-factory-label": "^2.0.0",
+				"micromark-factory-space": "^2.0.0",
+				"micromark-factory-title": "^2.0.0",
+				"micromark-factory-whitespace": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-chunked": "^2.0.0",
+				"micromark-util-classify-character": "^2.0.0",
+				"micromark-util-html-tag-name": "^2.0.0",
+				"micromark-util-normalize-identifier": "^2.0.0",
+				"micromark-util-resolve-all": "^2.0.0",
+				"micromark-util-subtokenize": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-extension-gfm": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+			"integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"micromark-extension-gfm-autolink-literal": "^2.0.0",
+				"micromark-extension-gfm-footnote": "^2.0.0",
+				"micromark-extension-gfm-strikethrough": "^2.0.0",
+				"micromark-extension-gfm-table": "^2.0.0",
+				"micromark-extension-gfm-tagfilter": "^2.0.0",
+				"micromark-extension-gfm-task-list-item": "^2.0.0",
+				"micromark-util-combine-extensions": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-autolink-literal": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+			"integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-sanitize-uri": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-footnote": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+			"integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"devlop": "^1.0.0",
+				"micromark-core-commonmark": "^2.0.0",
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-normalize-identifier": "^2.0.0",
+				"micromark-util-sanitize-uri": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-strikethrough": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+			"integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"devlop": "^1.0.0",
+				"micromark-util-chunked": "^2.0.0",
+				"micromark-util-classify-character": "^2.0.0",
+				"micromark-util-resolve-all": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-table": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+			"integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"devlop": "^1.0.0",
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-tagfilter": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+			"integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-types": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-gfm-task-list-item": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+			"integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"devlop": "^1.0.0",
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-extension-math": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-extension-math/-/micromark-extension-math-3.1.0.tgz",
+			"integrity": "sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/katex": "^0.16.0",
+				"devlop": "^1.0.0",
+				"katex": "^0.16.0",
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/micromark-factory-destination": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
+			"integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-label": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz",
+			"integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"devlop": "^1.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-space": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
+			"integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-title": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz",
+			"integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-factory-whitespace": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz",
+			"integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-factory-space": "^2.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-character": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+			"integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-chunked": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz",
+			"integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-classify-character": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz",
+			"integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-combine-extensions": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz",
+			"integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-chunked": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-decode-numeric-character-reference": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz",
+			"integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-decode-string": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz",
+			"integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"decode-named-character-reference": "^1.0.0",
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-decode-numeric-character-reference": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-encode": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+			"integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/micromark-util-html-tag-name": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
+			"integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/micromark-util-normalize-identifier": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz",
+			"integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-resolve-all": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz",
+			"integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-sanitize-uri": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+			"integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-encode": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-subtokenize": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz",
+			"integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"devlop": "^1.0.0",
+				"micromark-util-chunked": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-symbol": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+			"integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/micromark-util-types": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+			"integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"license": "MIT"
+		},
+		"node_modules/mime": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+			"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"mime": "cli.js"
+			},
+			"engines": {
+				"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==",
+			"dev": true,
+			"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==",
+			"dev": true,
+			"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",
+			"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/mini-svg-data-uri": {
+			"version": "1.4.4",
+			"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+			"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"mini-svg-data-uri": "cli.js"
+			}
+		},
+		"node_modules/minimatch": {
+			"version": "3.1.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+			"integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^1.1.7"
+			},
+			"engines": {
+				"node": "*"
+			}
+		},
+		"node_modules/minimist": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+			"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/minipass": {
+			"version": "7.1.3",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
+			"integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			}
+		},
+		"node_modules/minizlib": {
+			"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": {
+				"minipass": "^7.1.2"
+			},
+			"engines": {
+				"node": ">= 18"
+			}
+		},
+		"node_modules/mode-watcher": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/mode-watcher/-/mode-watcher-1.1.0.tgz",
+			"integrity": "sha512-mUT9RRGPDYenk59qJauN1rhsIMKBmWA3xMF+uRwE8MW/tjhaDSCCARqkSuDTq8vr4/2KcAxIGVjACxTjdk5C3g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"runed": "^0.25.0",
+				"svelte-toolbelt": "^0.7.1"
+			},
+			"peerDependencies": {
+				"svelte": "^5.27.0"
+			}
+		},
+		"node_modules/mode-watcher/node_modules/runed": {
+			"version": "0.25.0",
+			"resolved": "https://registry.npmjs.org/runed/-/runed-0.25.0.tgz",
+			"integrity": "sha512-7+ma4AG9FT2sWQEA0Egf6mb7PBT2vHyuHail1ie8ropfSjvZGtEAx8YTmUjv/APCsdRRxEVvArNjALk9zFSOrg==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/huntabyte",
+				"https://github.com/sponsors/tglide"
+			],
+			"dependencies": {
+				"esm-env": "^1.0.0"
+			},
+			"peerDependencies": {
+				"svelte": "^5.7.0"
+			}
+		},
+		"node_modules/mode-watcher/node_modules/svelte-toolbelt": {
+			"version": "0.7.1",
+			"resolved": "https://registry.npmjs.org/svelte-toolbelt/-/svelte-toolbelt-0.7.1.tgz",
+			"integrity": "sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/huntabyte"
+			],
+			"dependencies": {
+				"clsx": "^2.1.1",
+				"runed": "^0.23.2",
+				"style-to-object": "^1.0.8"
+			},
+			"engines": {
+				"node": ">=18",
+				"pnpm": ">=8.7.0"
+			},
+			"peerDependencies": {
+				"svelte": "^5.0.0"
+			}
+		},
+		"node_modules/mode-watcher/node_modules/svelte-toolbelt/node_modules/runed": {
+			"version": "0.23.4",
+			"resolved": "https://registry.npmjs.org/runed/-/runed-0.23.4.tgz",
+			"integrity": "sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/huntabyte",
+				"https://github.com/sponsors/tglide"
+			],
+			"dependencies": {
+				"esm-env": "^1.0.0"
+			},
+			"peerDependencies": {
+				"svelte": "^5.7.0"
+			}
+		},
+		"node_modules/mri": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+			"integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/mrmime": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+			"integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/nanoid": {
+			"version": "3.3.12",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
+			"integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"bin": {
+				"nanoid": "bin/nanoid.cjs"
+			},
+			"engines": {
+				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+			}
+		},
+		"node_modules/natural-compare": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+			"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+			"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==",
+			"dev": true,
+			"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",
+			"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+			"dev": true,
+			"license": "MIT",
+			"optional": true
+		},
+		"node_modules/node-releases": {
+			"version": "2.0.47",
+			"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.47.tgz",
+			"integrity": "sha512-Uzmd6LXpouKo8EUK68IjH4+E01w/hXyV3R3g/geCJo+rXLNfh1xucB+LOzYEOQPSiUK3h/xZf0cQGcSsmyL2Og==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"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==",
+			"dev": true,
+			"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"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/object-keys": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+			"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/object.assign": {
+			"version": "4.1.7",
+			"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+			"integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bind": "^1.0.8",
+				"call-bound": "^1.0.3",
+				"define-properties": "^1.2.1",
+				"es-object-atoms": "^1.0.0",
+				"has-symbols": "^1.1.0",
+				"object-keys": "^1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/obug": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/obug/-/obug-2.1.2.tgz",
+			"integrity": "sha512-AWGB9WFcRXOQs48Z/udjI5ZcZMHXwX8XPByNpOydgcGsDLIzjGizhoMWJyKAWze7AVW/2W1i+/gPX4YtKe5cyg==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/sxzz",
+				"https://opencollective.com/debug"
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
+		"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==",
+			"dev": true,
+			"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==",
+			"dev": true,
+			"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",
+			"integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+			"dev": true,
+			"license": "(WTFPL OR MIT)",
+			"bin": {
+				"opener": "bin/opener-bin.js"
+			}
+		},
+		"node_modules/optionator": {
+			"version": "0.9.4",
+			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+			"integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"deep-is": "^0.1.3",
+				"fast-levenshtein": "^2.0.6",
+				"levn": "^0.4.1",
+				"prelude-ls": "^1.2.1",
+				"type-check": "^0.4.0",
+				"word-wrap": "^1.2.5"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/own-keys": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+			"integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"get-intrinsic": "^1.2.6",
+				"object-keys": "^1.1.1",
+				"safe-push-apply": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/oxc-parser": {
+			"version": "0.127.0",
+			"resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.127.0.tgz",
+			"integrity": "sha512-bkgD4qHlN7WxLdX8bLXdaU54TtQtAIg/ZBAfm0aje/mo3MRDo3P0hZSgr4U7O3xfX+fQmR5AP04JS/TGcZLcFA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@oxc-project/types": "^0.127.0"
+			},
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/Boshen"
+			},
+			"optionalDependencies": {
+				"@oxc-parser/binding-android-arm-eabi": "0.127.0",
+				"@oxc-parser/binding-android-arm64": "0.127.0",
+				"@oxc-parser/binding-darwin-arm64": "0.127.0",
+				"@oxc-parser/binding-darwin-x64": "0.127.0",
+				"@oxc-parser/binding-freebsd-x64": "0.127.0",
+				"@oxc-parser/binding-linux-arm-gnueabihf": "0.127.0",
+				"@oxc-parser/binding-linux-arm-musleabihf": "0.127.0",
+				"@oxc-parser/binding-linux-arm64-gnu": "0.127.0",
+				"@oxc-parser/binding-linux-arm64-musl": "0.127.0",
+				"@oxc-parser/binding-linux-ppc64-gnu": "0.127.0",
+				"@oxc-parser/binding-linux-riscv64-gnu": "0.127.0",
+				"@oxc-parser/binding-linux-riscv64-musl": "0.127.0",
+				"@oxc-parser/binding-linux-s390x-gnu": "0.127.0",
+				"@oxc-parser/binding-linux-x64-gnu": "0.127.0",
+				"@oxc-parser/binding-linux-x64-musl": "0.127.0",
+				"@oxc-parser/binding-openharmony-arm64": "0.127.0",
+				"@oxc-parser/binding-wasm32-wasi": "0.127.0",
+				"@oxc-parser/binding-win32-arm64-msvc": "0.127.0",
+				"@oxc-parser/binding-win32-ia32-msvc": "0.127.0",
+				"@oxc-parser/binding-win32-x64-msvc": "0.127.0"
+			}
+		},
+		"node_modules/oxc-resolver": {
+			"version": "11.20.0",
+			"resolved": "https://registry.npmjs.org/oxc-resolver/-/oxc-resolver-11.20.0.tgz",
+			"integrity": "sha512-CblytBiV/a/ZXY34dsVU2NxhIOxMXst8CvDCtyBelVITgd7PLrKzbEbA6oKLdPjvDKDzCiW48qzmzZ+mYaqn+g==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/Boshen"
+			},
+			"optionalDependencies": {
+				"@oxc-resolver/binding-android-arm-eabi": "11.20.0",
+				"@oxc-resolver/binding-android-arm64": "11.20.0",
+				"@oxc-resolver/binding-darwin-arm64": "11.20.0",
+				"@oxc-resolver/binding-darwin-x64": "11.20.0",
+				"@oxc-resolver/binding-freebsd-x64": "11.20.0",
+				"@oxc-resolver/binding-linux-arm-gnueabihf": "11.20.0",
+				"@oxc-resolver/binding-linux-arm-musleabihf": "11.20.0",
+				"@oxc-resolver/binding-linux-arm64-gnu": "11.20.0",
+				"@oxc-resolver/binding-linux-arm64-musl": "11.20.0",
+				"@oxc-resolver/binding-linux-ppc64-gnu": "11.20.0",
+				"@oxc-resolver/binding-linux-riscv64-gnu": "11.20.0",
+				"@oxc-resolver/binding-linux-riscv64-musl": "11.20.0",
+				"@oxc-resolver/binding-linux-s390x-gnu": "11.20.0",
+				"@oxc-resolver/binding-linux-x64-gnu": "11.20.0",
+				"@oxc-resolver/binding-linux-x64-musl": "11.20.0",
+				"@oxc-resolver/binding-openharmony-arm64": "11.20.0",
+				"@oxc-resolver/binding-wasm32-wasi": "11.20.0",
+				"@oxc-resolver/binding-win32-arm64-msvc": "11.20.0",
+				"@oxc-resolver/binding-win32-x64-msvc": "11.20.0"
+			}
+		},
+		"node_modules/p-limit": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+			"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"yocto-queue": "^0.1.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/p-locate": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+			"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"p-limit": "^3.0.2"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"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/package-manager-detector": {
+			"version": "1.6.0",
+			"resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.6.0.tgz",
+			"integrity": "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/parent-module": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+			"integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"callsites": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/parse5": {
+			"version": "7.3.0",
+			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+			"integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"entities": "^6.0.0"
+			},
+			"funding": {
+				"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==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/path-data-parser": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/path-data-parser/-/path-data-parser-0.1.0.tgz",
+			"integrity": "sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/path-key": {
+			"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-parse": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/path-to-regexp": {
+			"version": "8.4.2",
+			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.2.tgz",
+			"integrity": "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==",
+			"dev": true,
+			"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",
+			"integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/pathval": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.1.tgz",
+			"integrity": "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 14.16"
+			}
+		},
+		"node_modules/pdfjs-dist": {
+			"version": "5.4.54",
+			"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.4.54.tgz",
+			"integrity": "sha512-TBAiTfQw89gU/Z4LW98Vahzd2/LoCFprVGvGbTgFt+QCB1F+woyOPmNNVgLa6djX9Z9GGTnj7qE1UzpOVJiINw==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=20.16.0 || >=22.3.0"
+			},
+			"optionalDependencies": {
+				"@napi-rs/canvas": "^0.1.74"
+			}
+		},
+		"node_modules/picocolors": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/picomatch": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+			"integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"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==",
+			"dev": true,
+			"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",
+			"integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"playwright-core": "1.56.1"
+			},
+			"bin": {
+				"playwright": "cli.js"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"optionalDependencies": {
+				"fsevents": "2.3.2"
+			}
+		},
+		"node_modules/playwright-core": {
+			"version": "1.56.1",
+			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.1.tgz",
+			"integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"bin": {
+				"playwright-core": "cli.js"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/pngjs": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-7.0.0.tgz",
+			"integrity": "sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=14.19.0"
+			}
+		},
+		"node_modules/points-on-curve": {
+			"version": "0.2.0",
+			"resolved": "https://registry.npmjs.org/points-on-curve/-/points-on-curve-0.2.0.tgz",
+			"integrity": "sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/points-on-path": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/points-on-path/-/points-on-path-0.2.1.tgz",
+			"integrity": "sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"path-data-parser": "0.1.0",
+				"points-on-curve": "0.2.0"
+			}
+		},
+		"node_modules/portfinder": {
+			"version": "1.0.38",
+			"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.38.tgz",
+			"integrity": "sha512-rEwq/ZHlJIKw++XtLAO8PPuOQA/zaPJOZJ37BVuN97nLpMJeuDVLVGRwbFoBgLudgdTMP2hdRJP++H+8QOA3vg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"async": "^3.2.6",
+				"debug": "^4.3.6"
+			},
+			"engines": {
+				"node": ">= 10.12"
+			}
+		},
+		"node_modules/possible-typed-array-names": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+			"integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/postcss": {
+			"version": "8.5.15",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+			"integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"nanoid": "^3.3.12",
+				"picocolors": "^1.1.1",
+				"source-map-js": "^1.2.1"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14"
+			}
+		},
+		"node_modules/postcss-load-config": {
+			"version": "3.1.4",
+			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+			"integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"lilconfig": "^2.0.5",
+				"yaml": "^1.10.2"
+			},
+			"engines": {
+				"node": ">= 10"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/postcss/"
+			},
+			"peerDependencies": {
+				"postcss": ">=8.0.9",
+				"ts-node": ">=9.0.0"
+			},
+			"peerDependenciesMeta": {
+				"postcss": {
+					"optional": true
+				},
+				"ts-node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/postcss-load-config/node_modules/yaml": {
+			"version": "1.10.3",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
+			"integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/postcss-safe-parser": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
+			"integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=18.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.4.31"
+			}
+		},
+		"node_modules/postcss-scss": {
+			"version": "4.0.9",
+			"resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz",
+			"integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss-scss"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.4.29"
+			}
+		},
+		"node_modules/postcss-selector-parser": {
+			"version": "6.0.10",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+			"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"cssesc": "^3.0.0",
+				"util-deprecate": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/prelude-ls": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+			"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/prettier": {
+			"version": "3.8.3",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.3.tgz",
+			"integrity": "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"prettier": "bin/prettier.cjs"
+			},
+			"engines": {
+				"node": ">=14"
+			},
+			"funding": {
+				"url": "https://github.com/prettier/prettier?sponsor=1"
+			}
+		},
+		"node_modules/prettier-plugin-svelte": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-4.1.0.tgz",
+			"integrity": "sha512-YZkhA2Q9oOerFFG9tq+2f98WYT7Z2JgrybJrAyrB78jpsH9i/DdgplXemehuFPgsldetFNCcR/yCcYlDjPy94Q==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=20"
+			},
+			"peerDependencies": {
+				"prettier": "^3.0.0",
+				"svelte": "^5.0.0"
+			}
+		},
+		"node_modules/prettier-plugin-tailwindcss": {
+			"version": "0.8.0",
+			"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.8.0.tgz",
+			"integrity": "sha512-V8ITGH87yuBDF6JpEZTOVlUz/saAwqb8f3HRgUj8Lh+tGCcrmorhsLpYqzygwFwK0PE2Ib6Mv3M7T/uE2tZV1g==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=20.19"
+			},
+			"peerDependencies": {
+				"@ianvs/prettier-plugin-sort-imports": "*",
+				"@prettier/plugin-hermes": "*",
+				"@prettier/plugin-oxc": "*",
+				"@prettier/plugin-pug": "*",
+				"@shopify/prettier-plugin-liquid": "*",
+				"@trivago/prettier-plugin-sort-imports": "*",
+				"@zackad/prettier-plugin-twig": "*",
+				"prettier": "^3.0",
+				"prettier-plugin-astro": "*",
+				"prettier-plugin-css-order": "*",
+				"prettier-plugin-jsdoc": "*",
+				"prettier-plugin-marko": "*",
+				"prettier-plugin-multiline-arrays": "*",
+				"prettier-plugin-organize-attributes": "*",
+				"prettier-plugin-organize-imports": "*",
+				"prettier-plugin-sort-imports": "*",
+				"prettier-plugin-svelte": "*"
+			},
+			"peerDependenciesMeta": {
+				"@ianvs/prettier-plugin-sort-imports": {
+					"optional": true
+				},
+				"@prettier/plugin-hermes": {
+					"optional": true
+				},
+				"@prettier/plugin-oxc": {
+					"optional": true
+				},
+				"@prettier/plugin-pug": {
+					"optional": true
+				},
+				"@shopify/prettier-plugin-liquid": {
+					"optional": true
+				},
+				"@trivago/prettier-plugin-sort-imports": {
+					"optional": true
+				},
+				"@zackad/prettier-plugin-twig": {
+					"optional": true
+				},
+				"prettier-plugin-astro": {
+					"optional": true
+				},
+				"prettier-plugin-css-order": {
+					"optional": true
+				},
+				"prettier-plugin-jsdoc": {
+					"optional": true
+				},
+				"prettier-plugin-marko": {
+					"optional": true
+				},
+				"prettier-plugin-multiline-arrays": {
+					"optional": true
+				},
+				"prettier-plugin-organize-attributes": {
+					"optional": true
+				},
+				"prettier-plugin-organize-imports": {
+					"optional": true
+				},
+				"prettier-plugin-sort-imports": {
+					"optional": true
+				},
+				"prettier-plugin-svelte": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/pretty-bytes": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
+			"integrity": "sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/pretty-format": {
+			"version": "27.5.1",
+			"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+			"integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"ansi-regex": "^5.0.1",
+				"ansi-styles": "^5.0.0",
+				"react-is": "^17.0.1"
+			},
+			"engines": {
+				"node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+			}
+		},
+		"node_modules/pretty-format/node_modules/ansi-styles": {
+			"version": "5.2.0",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+			"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
+		"node_modules/prism-svelte": {
+			"version": "0.4.7",
+			"resolved": "https://registry.npmjs.org/prism-svelte/-/prism-svelte-0.4.7.tgz",
+			"integrity": "sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/prismjs": {
+			"version": "1.30.0",
+			"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+			"integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/property-information": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/property-information/-/property-information-7.2.0.tgz",
+			"integrity": "sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"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==",
+			"dev": true,
+			"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",
+			"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/qs": {
+			"version": "6.15.2",
+			"resolved": "https://registry.npmjs.org/qs/-/qs-6.15.2.tgz",
+			"integrity": "sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"side-channel": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=0.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/quansync": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/quansync/-/quansync-1.0.0.tgz",
+			"integrity": "sha512-5xZacEEufv3HSTPQuchrvV6soaiACMFnq1H8wkVioctoH3TRha9Sz66lOxRwPK/qZj7HPiSveih9yAyh98gvqA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://github.com/sponsors/antfu"
+				},
+				{
+					"type": "individual",
+					"url": "https://github.com/sponsors/sxzz"
+				}
+			],
+			"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==",
+			"dev": true,
+			"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==",
+			"dev": true,
+			"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/react": {
+			"version": "19.2.7",
+			"resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz",
+			"integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/react-dom": {
+			"version": "19.2.7",
+			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz",
+			"integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"scheduler": "^0.27.0"
+			},
+			"peerDependencies": {
+				"react": "^19.2.7"
+			}
+		},
+		"node_modules/react-is": {
+			"version": "17.0.2",
+			"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+			"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true
+		},
+		"node_modules/readdirp": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
+			"integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 20.19.0"
+			},
+			"funding": {
+				"type": "individual",
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/recast": {
+			"version": "0.23.11",
+			"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz",
+			"integrity": "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ast-types": "^0.16.1",
+				"esprima": "~4.0.0",
+				"source-map": "~0.6.1",
+				"tiny-invariant": "^1.3.3",
+				"tslib": "^2.0.1"
+			},
+			"engines": {
+				"node": ">= 4"
+			}
+		},
+		"node_modules/redent": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+			"integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"indent-string": "^4.0.0",
+				"strip-indent": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/reflect.getprototypeof": {
+			"version": "1.0.10",
+			"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+			"integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bind": "^1.0.8",
+				"define-properties": "^1.2.1",
+				"es-abstract": "^1.23.9",
+				"es-errors": "^1.3.0",
+				"es-object-atoms": "^1.0.0",
+				"get-intrinsic": "^1.2.7",
+				"get-proto": "^1.0.1",
+				"which-builtin-type": "^1.2.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/regenerate": {
+			"version": "1.4.2",
+			"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+			"integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/regenerate-unicode-properties": {
+			"version": "10.2.2",
+			"resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.2.tgz",
+			"integrity": "sha512-m03P+zhBeQd1RGnYxrGyDAPpWX/epKirLrp8e3qevZdVkKtnCrjjWczIbYc8+xd6vcTStVlqfycTx1KR4LOr0g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"regenerate": "^1.4.2"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/regexp.prototype.flags": {
+			"version": "1.5.4",
+			"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+			"integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bind": "^1.0.8",
+				"define-properties": "^1.2.1",
+				"es-errors": "^1.3.0",
+				"get-proto": "^1.0.1",
+				"gopd": "^1.2.0",
+				"set-function-name": "^2.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/regexpu-core": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.4.0.tgz",
+			"integrity": "sha512-0ghuzq67LI9bLXpOX/ISfve/Mq33a4aFRzoQYhnnok1JOFpmE/A2TBGkNVenOGEeSBCjIiWcc6MVOG5HEQv0sA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"regenerate": "^1.4.2",
+				"regenerate-unicode-properties": "^10.2.2",
+				"regjsgen": "^0.8.0",
+				"regjsparser": "^0.13.0",
+				"unicode-match-property-ecmascript": "^2.0.0",
+				"unicode-match-property-value-ecmascript": "^2.2.1"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/regjsgen": {
+			"version": "0.8.0",
+			"resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.8.0.tgz",
+			"integrity": "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/regjsparser": {
+			"version": "0.13.1",
+			"resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.13.1.tgz",
+			"integrity": "sha512-dLsljMd9sqwRkby8zhO1gSg3PnJIBFid8f4CQj/sXx+7cKx+E7u0PKhZ+U4wmhx7EfmtvnA318oVaIkAB1lRJw==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"jsesc": "~3.1.0"
+			},
+			"bin": {
+				"regjsparser": "bin/parser"
+			}
+		},
+		"node_modules/rehype-highlight": {
+			"version": "7.0.2",
+			"resolved": "https://registry.npmjs.org/rehype-highlight/-/rehype-highlight-7.0.2.tgz",
+			"integrity": "sha512-k158pK7wdC2qL3M5NcZROZ2tR/l7zOzjxXd5VGdcfIyoijjQqpHd3JKtYSBDpDZ38UI2WJWuFAtkMDxmx5kstA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"hast-util-to-text": "^4.0.0",
+				"lowlight": "^3.0.0",
+				"unist-util-visit": "^5.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/rehype-katex": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/rehype-katex/-/rehype-katex-7.0.1.tgz",
+			"integrity": "sha512-OiM2wrZ/wuhKkigASodFoo8wimG3H12LWQaH8qSPVJn9apWKFSH3YOCtbKpBorTVw/eI7cuT21XBbvwEswbIOA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/katex": "^0.16.0",
+				"hast-util-from-html-isomorphic": "^2.0.0",
+				"hast-util-to-text": "^4.0.0",
+				"katex": "^0.16.0",
+				"unist-util-visit-parents": "^6.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/rehype-stringify": {
+			"version": "10.0.1",
+			"resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-10.0.1.tgz",
+			"integrity": "sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"hast-util-to-html": "^9.0.0",
+				"unified": "^11.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/remark": {
+			"version": "15.0.1",
+			"resolved": "https://registry.npmjs.org/remark/-/remark-15.0.1.tgz",
+			"integrity": "sha512-Eht5w30ruCXgFmxVUSlNWQ9iiimq07URKeFS3hNc8cUWy1llX4KDWfyEDZRycMc+znsN9Ux5/tJ/BFdgdOwA3A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"remark-parse": "^11.0.0",
+				"remark-stringify": "^11.0.0",
+				"unified": "^11.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/remark-breaks": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/remark-breaks/-/remark-breaks-4.0.0.tgz",
+			"integrity": "sha512-IjEjJOkH4FuJvHZVIW0QCDWxcG96kCq7An/KVH2NfJe6rKZU2AsHeB3OEjPNRxi4QC34Xdx7I2KGYn6IpT7gxQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"mdast-util-newline-to-break": "^2.0.0",
+				"unified": "^11.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/remark-gfm": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+			"integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"mdast-util-gfm": "^3.0.0",
+				"micromark-extension-gfm": "^3.0.0",
+				"remark-parse": "^11.0.0",
+				"remark-stringify": "^11.0.0",
+				"unified": "^11.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/remark-html": {
+			"version": "16.0.1",
+			"resolved": "https://registry.npmjs.org/remark-html/-/remark-html-16.0.1.tgz",
+			"integrity": "sha512-B9JqA5i0qZe0Nsf49q3OXyGvyXuZFDzAP2iOFLEumymuYJITVpiH1IgsTEwTpdptDmZlMDMWeDmSawdaJIGCXQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"hast-util-sanitize": "^5.0.0",
+				"hast-util-to-html": "^9.0.0",
+				"mdast-util-to-hast": "^13.0.0",
+				"unified": "^11.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/remark-math": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/remark-math/-/remark-math-6.0.0.tgz",
+			"integrity": "sha512-MMqgnP74Igy+S3WwnhQ7kqGlEerTETXMvJhrUzDikVZ2/uogJCb+WHUg97hK9/jcfc0dkD73s3LN8zU49cTEtA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"mdast-util-math": "^3.0.0",
+				"micromark-extension-math": "^3.0.0",
+				"unified": "^11.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/remark-parse": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+			"integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"mdast-util-from-markdown": "^2.0.0",
+				"micromark-util-types": "^2.0.0",
+				"unified": "^11.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/remark-rehype": {
+			"version": "11.1.2",
+			"resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
+			"integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"mdast-util-to-hast": "^13.0.0",
+				"unified": "^11.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/remark-stringify": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+			"integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.0",
+				"mdast-util-to-markdown": "^2.0.0",
+				"unified": "^11.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/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==",
+			"dev": true,
+			"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",
+			"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/resolve": {
+			"version": "1.22.12",
+			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+			"integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"is-core-module": "^2.16.1",
+				"path-parse": "^1.0.7",
+				"supports-preserve-symlinks-flag": "^1.0.0"
+			},
+			"bin": {
+				"resolve": "bin/resolve"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/resolve-from": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+			"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/robust-predicates": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.3.tgz",
+			"integrity": "sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==",
+			"dev": true,
+			"license": "Unlicense"
+		},
+		"node_modules/rollup": {
+			"version": "4.61.1",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.61.1.tgz",
+			"integrity": "sha512-I4KW6iuRpuu2uHBLraZ1wNZe0DP7lnRha+VJ9tNaYVaVgKhW0aI3h4RYnoRPeql0flHm/Co55b7snEDcOfOJrA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree": "1.0.9"
+			},
+			"bin": {
+				"rollup": "dist/bin/rollup"
+			},
+			"engines": {
+				"node": ">=18.0.0",
+				"npm": ">=8.0.0"
+			},
+			"optionalDependencies": {
+				"@rollup/rollup-android-arm-eabi": "4.61.1",
+				"@rollup/rollup-android-arm64": "4.61.1",
+				"@rollup/rollup-darwin-arm64": "4.61.1",
+				"@rollup/rollup-darwin-x64": "4.61.1",
+				"@rollup/rollup-freebsd-arm64": "4.61.1",
+				"@rollup/rollup-freebsd-x64": "4.61.1",
+				"@rollup/rollup-linux-arm-gnueabihf": "4.61.1",
+				"@rollup/rollup-linux-arm-musleabihf": "4.61.1",
+				"@rollup/rollup-linux-arm64-gnu": "4.61.1",
+				"@rollup/rollup-linux-arm64-musl": "4.61.1",
+				"@rollup/rollup-linux-loong64-gnu": "4.61.1",
+				"@rollup/rollup-linux-loong64-musl": "4.61.1",
+				"@rollup/rollup-linux-ppc64-gnu": "4.61.1",
+				"@rollup/rollup-linux-ppc64-musl": "4.61.1",
+				"@rollup/rollup-linux-riscv64-gnu": "4.61.1",
+				"@rollup/rollup-linux-riscv64-musl": "4.61.1",
+				"@rollup/rollup-linux-s390x-gnu": "4.61.1",
+				"@rollup/rollup-linux-x64-gnu": "4.61.1",
+				"@rollup/rollup-linux-x64-musl": "4.61.1",
+				"@rollup/rollup-openbsd-x64": "4.61.1",
+				"@rollup/rollup-openharmony-arm64": "4.61.1",
+				"@rollup/rollup-win32-arm64-msvc": "4.61.1",
+				"@rollup/rollup-win32-ia32-msvc": "4.61.1",
+				"@rollup/rollup-win32-x64-gnu": "4.61.1",
+				"@rollup/rollup-win32-x64-msvc": "4.61.1",
+				"fsevents": "~2.3.2"
+			}
+		},
+		"node_modules/roughjs": {
+			"version": "4.6.6",
+			"resolved": "https://registry.npmjs.org/roughjs/-/roughjs-4.6.6.tgz",
+			"integrity": "sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"hachure-fill": "^0.5.2",
+				"path-data-parser": "^0.1.0",
+				"points-on-curve": "^0.2.0",
+				"points-on-path": "^0.2.1"
+			}
+		},
+		"node_modules/router": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+			"integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+			"dev": true,
+			"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/runed": {
+			"version": "0.35.1",
+			"resolved": "https://registry.npmjs.org/runed/-/runed-0.35.1.tgz",
+			"integrity": "sha512-2F4Q/FZzbeJTFdIS/PuOoPRSm92sA2LhzTnv6FXhCoENb3huf5+fDuNOg1LNvGOouy3u/225qxmuJvcV3IZK5Q==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/huntabyte",
+				"https://github.com/sponsors/tglide"
+			],
+			"license": "MIT",
+			"dependencies": {
+				"dequal": "^2.0.3",
+				"esm-env": "^1.0.0",
+				"lz-string": "^1.5.0"
+			},
+			"peerDependencies": {
+				"@sveltejs/kit": "^2.21.0",
+				"svelte": "^5.7.0"
+			},
+			"peerDependenciesMeta": {
+				"@sveltejs/kit": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/rw": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+			"integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+			"dev": true,
+			"license": "BSD-3-Clause"
+		},
+		"node_modules/sade": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+			"integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"mri": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/safe-array-concat": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.4.tgz",
+			"integrity": "sha512-wtZlHyOje6OZTGqAoaDKxFkgRtkF9CnHAVnCHKfuj200wAgL+bSJhdsCD2l0Qx/2ekEXjPWcyKkfGb5CPboslg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bind": "^1.0.9",
+				"call-bound": "^1.0.4",
+				"get-intrinsic": "^1.3.0",
+				"has-symbols": "^1.1.0",
+				"isarray": "^2.0.5"
+			},
+			"engines": {
+				"node": ">=0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/safe-buffer": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+			"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/safe-push-apply": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+			"integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"isarray": "^2.0.5"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/safe-regex-test": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+			"integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.2",
+				"es-errors": "^1.3.0",
+				"is-regex": "^1.2.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/safer-buffer": {
+			"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": {
+			"version": "1.100.0",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.100.0.tgz",
+			"integrity": "sha512-B5j0rYMlinhhOo9tjQebMVVn0TfyXAF+wB3b2ggZUuJ/is/Y+7+JGjirAMxHZ9Z3hIP98NPfamlAkBHa1lAaXQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"chokidar": "^5.0.0",
+				"immutable": "^5.1.5",
+				"source-map-js": ">=0.6.2 <2.0.0"
+			},
+			"bin": {
+				"sass": "sass.js"
+			},
+			"engines": {
+				"node": ">=20.19.0"
+			},
+			"optionalDependencies": {
+				"@parcel/watcher": "^2.4.1"
+			}
+		},
+		"node_modules/scheduler": {
+			"version": "0.27.0",
+			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+			"integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/scule": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
+			"integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/secure-compare": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
+			"integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/semver": {
+			"version": "7.8.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.8.1.tgz",
+			"integrity": "sha512-rkVq3IXh+4FDGch+KwzX3aV9W3kO54GyEgpvBzSyctDA6Xtd7RJQV1xmXbeQp5v7+VzLOfVqiutSE6GICgPFvg==",
+			"dev": true,
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/send": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+			"integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+			"dev": true,
+			"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/serialize-javascript": {
+			"version": "7.0.5",
+			"resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-7.0.5.tgz",
+			"integrity": "sha512-F4LcB0UqUl1zErq+1nYEEzSHJnIwb3AF2XWB94b+afhrekOUijwooAYqFyRbjYkm2PAKBabx6oYv/xDxNi8IBw==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=20.0.0"
+			}
+		},
+		"node_modules/serve-static": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+			"integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+			"dev": true,
+			"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": "3.1.0",
+			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-3.1.0.tgz",
+			"integrity": "sha512-kjnC1DXBHcxaOaOXBHBeRtltsDG2nUiUni+jP92M9gYdW12rsmx92UsfpH7o5tDRs7I1ZZPSQJQGv3UaRfCiuw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/set-function-length": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+			"integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"define-data-property": "^1.1.4",
+				"es-errors": "^1.3.0",
+				"function-bind": "^1.1.2",
+				"get-intrinsic": "^1.2.4",
+				"gopd": "^1.0.1",
+				"has-property-descriptors": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/set-function-name": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+			"integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"define-data-property": "^1.1.4",
+				"es-errors": "^1.3.0",
+				"functions-have-names": "^1.2.3",
+				"has-property-descriptors": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/set-proto": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+			"integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"dunder-proto": "^1.0.1",
+				"es-errors": "^1.3.0",
+				"es-object-atoms": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/setprototypeof": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+			"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/sharp": {
+			"version": "0.33.5",
+			"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz",
+			"integrity": "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"color": "^4.2.3",
+				"detect-libc": "^2.0.3",
+				"semver": "^7.6.3"
+			},
+			"engines": {
+				"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/libvips"
+			},
+			"optionalDependencies": {
+				"@img/sharp-darwin-arm64": "0.33.5",
+				"@img/sharp-darwin-x64": "0.33.5",
+				"@img/sharp-libvips-darwin-arm64": "1.0.4",
+				"@img/sharp-libvips-darwin-x64": "1.0.4",
+				"@img/sharp-libvips-linux-arm": "1.0.5",
+				"@img/sharp-libvips-linux-arm64": "1.0.4",
+				"@img/sharp-libvips-linux-s390x": "1.0.4",
+				"@img/sharp-libvips-linux-x64": "1.0.4",
+				"@img/sharp-libvips-linuxmusl-arm64": "1.0.4",
+				"@img/sharp-libvips-linuxmusl-x64": "1.0.4",
+				"@img/sharp-linux-arm": "0.33.5",
+				"@img/sharp-linux-arm64": "0.33.5",
+				"@img/sharp-linux-s390x": "0.33.5",
+				"@img/sharp-linux-x64": "0.33.5",
+				"@img/sharp-linuxmusl-arm64": "0.33.5",
+				"@img/sharp-linuxmusl-x64": "0.33.5",
+				"@img/sharp-wasm32": "0.33.5",
+				"@img/sharp-win32-ia32": "0.33.5",
+				"@img/sharp-win32-x64": "0.33.5"
+			}
+		},
+		"node_modules/sharp-ico": {
+			"version": "0.1.5",
+			"resolved": "https://registry.npmjs.org/sharp-ico/-/sharp-ico-0.1.5.tgz",
+			"integrity": "sha512-a3jODQl82NPp1d5OYb0wY+oFaPk7AvyxipIowCHk7pBsZCWgbe0yAkU2OOXdoH0ENyANhyOQbs9xkAiRHcF02Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"decode-ico": "*",
+				"ico-endec": "*",
+				"sharp": "*"
+			}
+		},
+		"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"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/shebang-regex": {
+			"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"
+			}
+		},
+		"node_modules/side-channel": {
+			"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",
+				"object-inspect": "^1.13.3",
+				"side-channel-list": "^1.0.0",
+				"side-channel-map": "^1.0.1",
+				"side-channel-weakmap": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/side-channel-list": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+			"integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"object-inspect": "^1.13.4"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/side-channel-map": {
+			"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",
+				"es-errors": "^1.3.0",
+				"get-intrinsic": "^1.2.5",
+				"object-inspect": "^1.13.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/side-channel-weakmap": {
+			"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",
+				"es-errors": "^1.3.0",
+				"get-intrinsic": "^1.2.5",
+				"object-inspect": "^1.13.3",
+				"side-channel-map": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/siginfo": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+			"integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+			"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/simple-swizzle": {
+			"version": "0.2.4",
+			"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.4.tgz",
+			"integrity": "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-arrayish": "^0.3.1"
+			}
+		},
+		"node_modules/sirv": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
+			"integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@polka/url": "^1.0.0-next.24",
+				"mrmime": "^2.0.0",
+				"totalist": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/smob": {
+			"version": "1.6.2",
+			"resolved": "https://registry.npmjs.org/smob/-/smob-1.6.2.tgz",
+			"integrity": "sha512-RQsvleCbF8cVHEv+xuDGaA4pOizFqJ0GgjtMSRo6oP8pnN7WsigHgVGey6aILRBKv4W2YOMHLqbKdnB6hpB9fw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=20.0.0"
+			}
+		},
+		"node_modules/source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/source-map-js": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/source-map-support": {
+			"version": "0.5.21",
+			"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+			"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"buffer-from": "^1.0.0",
+				"source-map": "^0.6.0"
+			}
+		},
+		"node_modules/space-separated-tokens": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+			"integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/stackback": {
+			"version": "0.0.2",
+			"resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+			"integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+			"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==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/std-env": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/std-env/-/std-env-4.1.0.tgz",
+			"integrity": "sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/stop-iteration-iterator": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+			"integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"internal-slot": "^1.1.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/storybook": {
+			"version": "10.4.2",
+			"resolved": "https://registry.npmjs.org/storybook/-/storybook-10.4.2.tgz",
+			"integrity": "sha512-5Ax5vbHxFgMBGGhQDm75Rrumm/HZC4ICFhMcJaM0UlqnC/4FKj/IaZtImZFupknyiiyUEcWHPQFA2kX3/VSv1A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@storybook/global": "^5.0.0",
+				"@storybook/icons": "^2.0.2",
+				"@testing-library/jest-dom": "^6.9.1",
+				"@testing-library/user-event": "^14.6.1",
+				"@vitest/expect": "3.2.4",
+				"@vitest/spy": "3.2.4",
+				"@webcontainer/env": "^1.1.1",
+				"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",
+				"oxc-parser": "^0.127.0",
+				"oxc-resolver": "^11.19.1",
+				"recast": "^0.23.5",
+				"semver": "^7.7.3",
+				"use-sync-external-store": "^1.5.0",
+				"ws": "^8.18.0"
+			},
+			"bin": {
+				"storybook": "dist/bin/dispatcher.js"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/storybook"
+			},
+			"peerDependencies": {
+				"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+				"prettier": "^2 || ^3",
+				"vite-plus": "^0.1.15"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"prettier": {
+					"optional": true
+				},
+				"vite-plus": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/storybook/node_modules/@vitest/spy": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.2.4.tgz",
+			"integrity": "sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tinyspy": "^4.0.3"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/string.prototype.matchall": {
+			"version": "4.0.12",
+			"resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+			"integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bind": "^1.0.8",
+				"call-bound": "^1.0.3",
+				"define-properties": "^1.2.1",
+				"es-abstract": "^1.23.6",
+				"es-errors": "^1.3.0",
+				"es-object-atoms": "^1.0.0",
+				"get-intrinsic": "^1.2.6",
+				"gopd": "^1.2.0",
+				"has-symbols": "^1.1.0",
+				"internal-slot": "^1.1.0",
+				"regexp.prototype.flags": "^1.5.3",
+				"set-function-name": "^2.0.2",
+				"side-channel": "^1.1.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/string.prototype.trim": {
+			"version": "1.2.10",
+			"resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+			"integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bind": "^1.0.8",
+				"call-bound": "^1.0.2",
+				"define-data-property": "^1.1.4",
+				"define-properties": "^1.2.1",
+				"es-abstract": "^1.23.5",
+				"es-object-atoms": "^1.0.0",
+				"has-property-descriptors": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/string.prototype.trimend": {
+			"version": "1.0.9",
+			"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+			"integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bind": "^1.0.8",
+				"call-bound": "^1.0.2",
+				"define-properties": "^1.2.1",
+				"es-object-atoms": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/string.prototype.trimstart": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+			"integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bind": "^1.0.7",
+				"define-properties": "^1.2.1",
+				"es-object-atoms": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/stringify-entities": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+			"integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"character-entities-html4": "^2.0.0",
+				"character-entities-legacy": "^3.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/stringify-object": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+			"integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"get-own-enumerable-property-symbols": "^3.0.0",
+				"is-obj": "^1.0.1",
+				"is-regexp": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/strip-ansi": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+			"integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ansi-regex": "^6.2.2"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/strip-ansi?sponsor=1"
+			}
+		},
+		"node_modules/strip-ansi/node_modules/ansi-regex": {
+			"version": "6.2.2",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+			"integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-regex?sponsor=1"
+			}
+		},
+		"node_modules/strip-comments": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-2.0.1.tgz",
+			"integrity": "sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/strip-indent": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+			"integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"min-indent": "^1.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/strip-json-comments": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/style-to-object": {
+			"version": "1.0.14",
+			"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+			"integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"inline-style-parser": "0.2.7"
+			}
+		},
+		"node_modules/stylis": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.4.0.tgz",
+			"integrity": "sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/supports-color": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"has-flag": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/supports-preserve-symlinks-flag": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+			"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/svelte": {
+			"version": "5.56.1",
+			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.56.1.tgz",
+			"integrity": "sha512-eArsJmvl3xZVuTYD852PzIEdg2wgDdIZ1NEsIPbzAukHwi284B18No4nK2rCO9AwsWUDza4Cjvmoa4HaojTl5g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/remapping": "^2.3.4",
+				"@jridgewell/sourcemap-codec": "^1.5.0",
+				"@sveltejs/acorn-typescript": "^1.0.10",
+				"@types/estree": "^1.0.5",
+				"@types/trusted-types": "^2.0.7",
+				"acorn": "^8.12.1",
+				"aria-query": "5.3.1",
+				"axobject-query": "^4.1.0",
+				"clsx": "^2.1.1",
+				"devalue": "^5.8.1",
+				"esm-env": "^1.2.1",
+				"esrap": "^2.2.9",
+				"is-reference": "^3.0.3",
+				"locate-character": "^3.0.0",
+				"magic-string": "^0.30.11",
+				"zimmerframe": "^1.1.2"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/svelte-ast-print": {
+			"version": "0.4.2",
+			"resolved": "https://registry.npmjs.org/svelte-ast-print/-/svelte-ast-print-0.4.2.tgz",
+			"integrity": "sha512-hRHHufbJoArFmDYQKCpCvc0xUuIEfwYksvyLYEQyH+1xb5LD5sM/IthfooCdXZQtOIqXz6xm7NmaqdfwG4kh6w==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/xeho91"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/xeho91"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"esrap": "1.2.2",
+				"zimmerframe": "1.1.2"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"peerDependencies": {
+				"svelte": "^5.0.0"
+			}
+		},
+		"node_modules/svelte-ast-print/node_modules/esrap": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.2.tgz",
+			"integrity": "sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.4.15",
+				"@types/estree": "^1.0.1"
+			}
+		},
+		"node_modules/svelte-ast-print/node_modules/zimmerframe": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
+			"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/svelte-check": {
+			"version": "4.6.0",
+			"resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-4.6.0.tgz",
+			"integrity": "sha512-KhVnDFDSid57mmZtHz8gfW8AAGylOZ0vPnOIzVmAL+urzwK8sBYXRss953gD8T0OdgAQ11mdWhE6uadmtOz8TQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/trace-mapping": "^0.3.25",
+				"@sveltejs/load-config": "0.1.1",
+				"chokidar": "^4.0.1",
+				"fdir": "^6.2.0",
+				"picocolors": "^1.0.0",
+				"sade": "^1.7.4"
+			},
+			"bin": {
+				"svelte-check": "bin/svelte-check"
+			},
+			"engines": {
+				"node": ">= 18.0.0"
+			},
+			"peerDependencies": {
+				"svelte": "^4.0.0 || ^5.0.0-next.0",
+				"typescript": ">=5.0.0"
+			}
+		},
+		"node_modules/svelte-check/node_modules/chokidar": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+			"integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"readdirp": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 14.16.0"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/svelte-check/node_modules/readdirp": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+			"integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 14.18.0"
+			},
+			"funding": {
+				"type": "individual",
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/svelte-eslint-parser": {
+			"version": "1.8.0",
+			"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-1.8.0.tgz",
+			"integrity": "sha512-mikR1qwIVy3t5WthUoAXkMwxkXvabZP9FJgdx35Ei7EbGWmctva1Pih16Koeor/bdNNq8NXHlwKGS6NkYTawLg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"eslint-scope": "^8.2.0",
+				"eslint-visitor-keys": "^4.0.0",
+				"espree": "^10.0.0",
+				"postcss": "^8.4.49",
+				"postcss-scss": "^4.0.9",
+				"postcss-selector-parser": "^7.0.0",
+				"semver": "^7.7.2"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0",
+				"pnpm": "10.34.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ota-meshi"
+			},
+			"peerDependencies": {
+				"svelte": "^3.37.0 || ^4.0.0 || ^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"svelte": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/svelte-eslint-parser/node_modules/postcss-selector-parser": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
+			"integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"cssesc": "^3.0.0",
+				"util-deprecate": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/svelte-sonner": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-1.1.1.tgz",
+			"integrity": "sha512-5cd3p7wa4cq0NsqslMwdlPb7x1JglEZ/GKrLePWNr5bCxR1nagAVrY01FRFrXfUGs41miLt3C327+8XJo5BzZw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"runed": "^0.28.0"
+			},
+			"peerDependencies": {
+				"svelte": "^5.0.0"
+			}
+		},
+		"node_modules/svelte-sonner/node_modules/runed": {
+			"version": "0.28.0",
+			"resolved": "https://registry.npmjs.org/runed/-/runed-0.28.0.tgz",
+			"integrity": "sha512-k2xx7RuO9hWcdd9f+8JoBeqWtYrm5CALfgpkg2YDB80ds/QE4w0qqu34A7fqiAwiBBSBQOid7TLxwxVC27ymWQ==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/huntabyte",
+				"https://github.com/sponsors/tglide"
+			],
+			"license": "MIT",
+			"dependencies": {
+				"esm-env": "^1.0.0"
+			},
+			"peerDependencies": {
+				"svelte": "^5.7.0"
+			}
+		},
+		"node_modules/svelte-toolbelt": {
+			"version": "0.10.6",
+			"resolved": "https://registry.npmjs.org/svelte-toolbelt/-/svelte-toolbelt-0.10.6.tgz",
+			"integrity": "sha512-YWuX+RE+CnWYx09yseAe4ZVMM7e7GRFZM6OYWpBKOb++s+SQ8RBIMMe+Bs/CznBMc0QPLjr+vDBxTAkozXsFXQ==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/huntabyte"
+			],
+			"dependencies": {
+				"clsx": "^2.1.1",
+				"runed": "^0.35.1",
+				"style-to-object": "^1.0.8"
+			},
+			"engines": {
+				"node": ">=18",
+				"pnpm": ">=8.7.0"
+			},
+			"peerDependencies": {
+				"svelte": "^5.30.2"
+			}
+		},
+		"node_modules/svelte/node_modules/aria-query": {
+			"version": "5.3.1",
+			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.1.tgz",
+			"integrity": "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/svelte/node_modules/esrap": {
+			"version": "2.2.11",
+			"resolved": "https://registry.npmjs.org/esrap/-/esrap-2.2.11.tgz",
+			"integrity": "sha512-gPdx+I+BjYEinNMQaBXFjbaJVyoPMU4ZODg5mE+M4DqVG9VusAVHHjcBX+zqyITlI0DIARwDMMzZwAWj36dRoQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.4.15"
+			},
+			"peerDependencies": {
+				"@typescript-eslint/types": "^8.2.0"
+			},
+			"peerDependenciesMeta": {
+				"@typescript-eslint/types": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/svelte2tsx": {
+			"version": "0.7.56",
+			"resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.7.56.tgz",
+			"integrity": "sha512-NTvqqL+goYlW8gWNajk81L07+uu7jw5V2m1Az5MZbYm3GEydcHXh+uTrLHM9SuGuaqCtF90vlMXkOVBotfH94g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"dedent-js": "^1.0.1",
+				"scule": "^1.3.0"
+			},
+			"peerDependencies": {
+				"svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0",
+				"typescript": "^4.9.4 || ^5.0.0 || ^6.0.0"
+			}
+		},
+		"node_modules/tabbable": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.4.0.tgz",
+			"integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/tailwind-merge": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.6.0.tgz",
+			"integrity": "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/dcastil"
+			}
+		},
+		"node_modules/tailwind-variants": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-3.2.2.tgz",
+			"integrity": "sha512-Mi4kHeMTLvKlM98XPnK+7HoBPmf4gygdFmqQPaDivc3DpYS6aIY6KiG/PgThrGvii5YZJqRsPz0aPyhoFzmZgg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=16.x",
+				"pnpm": ">=7.x"
+			},
+			"peerDependencies": {
+				"tailwind-merge": ">=3.0.0",
+				"tailwindcss": "*"
+			},
+			"peerDependenciesMeta": {
+				"tailwind-merge": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/tailwindcss": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz",
+			"integrity": "sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/tapable": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+			"integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
+		},
+		"node_modules/tar": {
+			"version": "7.5.16",
+			"resolved": "https://registry.npmjs.org/tar/-/tar-7.5.16.tgz",
+			"integrity": "sha512-56adEpPMouktRlBLXiaYFFzZ/3+JXa8P9n7WbR+ibIjtviN55mEaOkiysCnPnWm+7kkui1Dn8J9l+g6zV8731w==",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"dependencies": {
+				"@isaacs/fs-minipass": "^4.0.0",
+				"chownr": "^3.0.0",
+				"minipass": "^7.1.2",
+				"minizlib": "^3.1.0",
+				"yallist": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/tar/node_modules/yallist": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+			"integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/temp-dir": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
+			"integrity": "sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/tempy": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/tempy/-/tempy-0.6.0.tgz",
+			"integrity": "sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-stream": "^2.0.0",
+				"temp-dir": "^2.0.0",
+				"type-fest": "^0.16.0",
+				"unique-string": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/tempy/node_modules/type-fest": {
+			"version": "0.16.0",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.16.0.tgz",
+			"integrity": "sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==",
+			"dev": true,
+			"license": "(MIT OR CC0-1.0)",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/terser": {
+			"version": "5.48.0",
+			"resolved": "https://registry.npmjs.org/terser/-/terser-5.48.0.tgz",
+			"integrity": "sha512-J/9An6vs9Us6wKRriSFXBWdRZapREHqFzdNUKk0pmu804EMR6dr6winwo7e5JDxN4xahxQsuysyYFwlwj4XN/Q==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"@jridgewell/source-map": "^0.3.3",
+				"acorn": "^8.15.0",
+				"commander": "^2.20.0",
+				"source-map-support": "~0.5.20"
+			},
+			"bin": {
+				"terser": "bin/terser"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/terser/node_modules/commander": {
+			"version": "2.20.3",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+			"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/tiny-invariant": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+			"integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/tinybench": {
+			"version": "2.9.0",
+			"resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+			"integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/tinyexec": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.2.4.tgz",
+			"integrity": "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/tinyglobby": {
+			"version": "0.2.17",
+			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+			"integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"fdir": "^6.5.0",
+				"picomatch": "^4.0.4"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/SuperchupuDev"
+			}
+		},
+		"node_modules/tinyrainbow": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-2.0.0.tgz",
+			"integrity": "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/tinyspy": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-4.0.4.tgz",
+			"integrity": "sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/to-data-view": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/to-data-view/-/to-data-view-1.1.0.tgz",
+			"integrity": "sha512-1eAdufMg6mwgmlojAx3QeMnzB/BTVp7Tbndi3U7ftcT2zCZadjxkkmLmd97zmaxWi+sgGcgWrokmpEoy0Dn0vQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"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==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.6"
+			}
+		},
+		"node_modules/totalist": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+			"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/tr46": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
+			"integrity": "sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"punycode": "^2.1.0"
+			}
+		},
+		"node_modules/trim-lines": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+			"integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/trough": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+			"integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/ts-api-utils": {
+			"version": "2.5.0",
+			"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
+			"integrity": "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18.12"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.8.4"
+			}
+		},
+		"node_modules/ts-dedent": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
+			"integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.10"
+			}
+		},
+		"node_modules/tslib": {
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+			"dev": true,
+			"license": "0BSD"
+		},
+		"node_modules/tw-animate-css": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
+			"integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/Wombosvideo"
+			}
+		},
+		"node_modules/type-check": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+			"integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"prelude-ls": "^1.2.1"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/type-fest": {
+			"version": "2.19.0",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+			"integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+			"dev": true,
+			"license": "(MIT OR CC0-1.0)",
+			"engines": {
+				"node": ">=12.20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/type-is": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/type-is/-/type-is-2.1.0.tgz",
+			"integrity": "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"content-type": "^2.0.0",
+				"media-typer": "^1.1.0",
+				"mime-types": "^3.0.0"
+			},
+			"engines": {
+				"node": ">= 18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
+		"node_modules/type-is/node_modules/content-type": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/content-type/-/content-type-2.0.0.tgz",
+			"integrity": "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
+			}
+		},
+		"node_modules/typed-array-buffer": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+			"integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.3",
+				"es-errors": "^1.3.0",
+				"is-typed-array": "^1.1.14"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/typed-array-byte-length": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+			"integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bind": "^1.0.8",
+				"for-each": "^0.3.3",
+				"gopd": "^1.2.0",
+				"has-proto": "^1.2.0",
+				"is-typed-array": "^1.1.14"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/typed-array-byte-offset": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+			"integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"available-typed-arrays": "^1.0.7",
+				"call-bind": "^1.0.8",
+				"for-each": "^0.3.3",
+				"gopd": "^1.2.0",
+				"has-proto": "^1.2.0",
+				"is-typed-array": "^1.1.15",
+				"reflect.getprototypeof": "^1.0.9"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/typed-array-length": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.8.tgz",
+			"integrity": "sha512-phPGCwqr2+Qo0fwniCE8e4pKnGu/yFb5nD5Y8bf0EEeiI5GklnACYA9GFy/DrAeRrKHXvHn+1SUsOWgJp6RO+g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bind": "^1.0.9",
+				"for-each": "^0.3.5",
+				"gopd": "^1.2.0",
+				"is-typed-array": "^1.1.15",
+				"possible-typed-array-names": "^1.1.0",
+				"reflect.getprototypeof": "^1.0.10"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/typescript": {
+			"version": "5.9.3",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+			"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"bin": {
+				"tsc": "bin/tsc",
+				"tsserver": "bin/tsserver"
+			},
+			"engines": {
+				"node": ">=14.17"
+			}
+		},
+		"node_modules/typescript-eslint": {
+			"version": "8.60.1",
+			"resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.60.1.tgz",
+			"integrity": "sha512-6m5hkkRAp8lKvhVpcprAIn5KkehQEh+47oHH2VGnExEh7dhNxXlg6GPAOIu6TxbVQxhebrJDvjl3020ooiWCMA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/eslint-plugin": "8.60.1",
+				"@typescript-eslint/parser": "8.60.1",
+				"@typescript-eslint/typescript-estree": "8.60.1",
+				"@typescript-eslint/utils": "8.60.1"
+			},
+			"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 || ^10.0.0",
+				"typescript": ">=4.8.4 <6.1.0"
+			}
+		},
+		"node_modules/unbox-primitive": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+			"integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.3",
+				"has-bigints": "^1.0.2",
+				"has-symbols": "^1.1.0",
+				"which-boxed-primitive": "^1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/unconfig": {
+			"version": "7.5.0",
+			"resolved": "https://registry.npmjs.org/unconfig/-/unconfig-7.5.0.tgz",
+			"integrity": "sha512-oi8Qy2JV4D3UQ0PsopR28CzdQ3S/5A1zwsUwp/rosSbfhJ5z7b90bIyTwi/F7hCLD4SGcZVjDzd4XoUQcEanvA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@quansync/fs": "^1.0.0",
+				"defu": "^6.1.4",
+				"jiti": "^2.6.1",
+				"quansync": "^1.0.0",
+				"unconfig-core": "7.5.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			}
+		},
+		"node_modules/unconfig-core": {
+			"version": "7.5.0",
+			"resolved": "https://registry.npmjs.org/unconfig-core/-/unconfig-core-7.5.0.tgz",
+			"integrity": "sha512-Su3FauozOGP44ZmKdHy2oE6LPjk51M/TRRjHv2HNCWiDvfvCoxC2lno6jevMA91MYAdCdwP05QnWdWpSbncX/w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@quansync/fs": "^1.0.0",
+				"quansync": "^1.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			}
+		},
+		"node_modules/undici-types": {
+			"version": "7.18.2",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+			"integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/unicode-canonical-property-names-ecmascript": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
+			"integrity": "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/unicode-match-property-ecmascript": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+			"integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"unicode-canonical-property-names-ecmascript": "^2.0.0",
+				"unicode-property-aliases-ecmascript": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/unicode-match-property-value-ecmascript": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.1.tgz",
+			"integrity": "sha512-JQ84qTuMg4nVkx8ga4A16a1epI9H6uTXAknqxkGF/aFfRLw1xC/Bp24HNLaZhHSkWd3+84t8iXnp1J0kYcZHhg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/unicode-property-aliases-ecmascript": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.2.0.tgz",
+			"integrity": "sha512-hpbDzxUY9BFwX+UeBnxv3Sh1q7HFxj48DTmXchNgRa46lO8uj3/1iEn3MiNUYTg1g9ctIqXCCERn8gYZhHC5lQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/unified": {
+			"version": "11.0.5",
+			"resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+			"integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"bail": "^2.0.0",
+				"devlop": "^1.0.0",
+				"extend": "^3.0.0",
+				"is-plain-obj": "^4.0.0",
+				"trough": "^2.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unified/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/union": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
+			"integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
+			"dev": true,
+			"dependencies": {
+				"qs": "^6.4.0"
+			},
+			"engines": {
+				"node": ">= 0.8.0"
+			}
+		},
+		"node_modules/unique-string": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
+			"integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"crypto-random-string": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/unist-util-find-after": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-5.0.0.tgz",
+			"integrity": "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-is": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-find-after/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/unist-util-is": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+			"integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-is/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/unist-util-position": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+			"integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-position/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/unist-util-remove-position": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-5.0.0.tgz",
+			"integrity": "sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-visit": "^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-remove-position/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/unist-util-stringify-position": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+			"integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-stringify-position/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/unist-util-visit": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+			"integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-is": "^6.0.0",
+				"unist-util-visit-parents": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-visit-parents": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+			"integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-is": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-visit-parents/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/unist-util-visit/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/universalify": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"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==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/unplugin": {
+			"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": {
+				"@jridgewell/remapping": "^2.3.5",
+				"acorn": "^8.15.0",
+				"picomatch": "^4.0.3",
+				"webpack-virtual-modules": "^0.6.2"
+			},
+			"engines": {
+				"node": ">=18.12.0"
+			}
+		},
+		"node_modules/upath": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
+			"integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=4",
+				"yarn": "*"
+			}
+		},
+		"node_modules/update-browserslist-db": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+			"integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/browserslist"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/browserslist"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"escalade": "^3.2.0",
+				"picocolors": "^1.1.1"
+			},
+			"bin": {
+				"update-browserslist-db": "cli.js"
+			},
+			"peerDependencies": {
+				"browserslist": ">= 4.21.0"
+			}
+		},
+		"node_modules/uri-js": {
+			"version": "4.4.1",
+			"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+			"integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"punycode": "^2.1.0"
+			}
+		},
+		"node_modules/url-join": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+			"integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
+			"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",
+			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/uuid": {
+			"version": "13.0.2",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-13.0.2.tgz",
+			"integrity": "sha512-vzi9uRZ926x4XV73S/4qQaTwPXM2JBj6/6lI/byHH1jOpCzb0zDbfytgA9LcN/hzb2l7WQSQnxITOVx5un/wGw==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"license": "MIT",
+			"bin": {
+				"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==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/vfile": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+			"integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vfile-location": {
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+			"integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vfile-location/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/vfile-message": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+			"integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"unist-util-stringify-position": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vfile-message/node_modules/unist-util-stringify-position": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+			"integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^2.0.2"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vfile/node_modules/@types/unist": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/vfile/node_modules/vfile-message": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+			"integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-stringify-position": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vite": {
+			"version": "7.3.5",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.5.tgz",
+			"integrity": "sha512-KuOaNhcnGFN2zIPGA7wRmzF+lJA1sea7rHq17aiJ++9lzY1WWG6Jpwqwe1KNbRVPIqHmr8GLYx7jbrQcN/7/ww==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"esbuild": "^0.27.0",
+				"fdir": "^6.5.0",
+				"picomatch": "^4.0.3",
+				"postcss": "^8.5.6",
+				"rollup": "^4.43.0",
+				"tinyglobby": "^0.2.15"
+			},
+			"bin": {
+				"vite": "bin/vite.js"
+			},
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			},
+			"funding": {
+				"url": "https://github.com/vitejs/vite?sponsor=1"
+			},
+			"optionalDependencies": {
+				"fsevents": "~2.3.3"
+			},
+			"peerDependencies": {
+				"@types/node": "^20.19.0 || >=22.12.0",
+				"jiti": ">=1.21.0",
+				"less": "^4.0.0",
+				"lightningcss": "^1.21.0",
+				"sass": "^1.70.0",
+				"sass-embedded": "^1.70.0",
+				"stylus": ">=0.54.8",
+				"sugarss": "^5.0.0",
+				"terser": "^5.16.0",
+				"tsx": "^4.8.1",
+				"yaml": "^2.4.2"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				},
+				"jiti": {
+					"optional": true
+				},
+				"less": {
+					"optional": true
+				},
+				"lightningcss": {
+					"optional": true
+				},
+				"sass": {
+					"optional": true
+				},
+				"sass-embedded": {
+					"optional": true
+				},
+				"stylus": {
+					"optional": true
+				},
+				"sugarss": {
+					"optional": true
+				},
+				"terser": {
+					"optional": true
+				},
+				"tsx": {
+					"optional": true
+				},
+				"yaml": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/vite-plugin-devtools-json": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/vite-plugin-devtools-json/-/vite-plugin-devtools-json-0.2.1.tgz",
+			"integrity": "sha512-5aiNvf/iLTuLR1dUqoI5CLLGgeK2hd6u+tA+RIp7GUZDyAcM6ECaUEWOOtGpidbcxbkKq++KtmSqA3jhMbPwMA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"uuid": "^11.1.0"
+			},
+			"peerDependencies": {
+				"vite": "^2.7.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+			}
+		},
+		"node_modules/vite-plugin-devtools-json/node_modules/uuid": {
+			"version": "11.1.1",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.1.tgz",
+			"integrity": "sha512-vIYxrBCC/N/K+Js3qSN88go7kIfNPssr/hHCesKCQNAjmgvYS2oqr69kIufEG+O4+PfezOH4EbIeHCfFov8ZgQ==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"license": "MIT",
+			"bin": {
+				"uuid": "dist/esm/bin/uuid"
+			}
+		},
+		"node_modules/vite-plugin-pwa": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-1.3.0.tgz",
+			"integrity": "sha512-c5kMgN+ITrOtHXp8PAtk2uOIEea6XjP/unCGxOWWBzQ6qa65qj/awHg0wf+QF9E/2u9vh86LqxPwzEPNbM2r5A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"debug": "^4.3.6",
+				"pretty-bytes": "^6.1.1",
+				"tinyglobby": "^0.2.10",
+				"workbox-build": "^7.4.1",
+				"workbox-window": "^7.4.1"
+			},
+			"engines": {
+				"node": ">=16.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			},
+			"peerDependencies": {
+				"@vite-pwa/assets-generator": "^1.0.0",
+				"vite": "^3.1.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+				"workbox-build": "^7.4.1",
+				"workbox-window": "^7.4.1"
+			},
+			"peerDependenciesMeta": {
+				"@vite-pwa/assets-generator": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/vite/node_modules/fsevents": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+			}
+		},
+		"node_modules/vitefu": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.1.3.tgz",
+			"integrity": "sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg==",
+			"dev": true,
+			"license": "MIT",
+			"workspaces": [
+				"tests/deps/*",
+				"tests/projects/*",
+				"tests/projects/workspace/packages/*"
+			],
+			"peerDependencies": {
+				"vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+			},
+			"peerDependenciesMeta": {
+				"vite": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/vitest": {
+			"version": "4.1.8",
+			"resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.8.tgz",
+			"integrity": "sha512-flY6ScbCIt9HThs+C5HS7jvGOB560DJtk/Z15IQROTA6zEy49Nh8T/dofWTQL+n3vswqn87sbJNiuqw1SDp5Ig==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@vitest/expect": "4.1.8",
+				"@vitest/mocker": "4.1.8",
+				"@vitest/pretty-format": "4.1.8",
+				"@vitest/runner": "4.1.8",
+				"@vitest/snapshot": "4.1.8",
+				"@vitest/spy": "4.1.8",
+				"@vitest/utils": "4.1.8",
+				"es-module-lexer": "^2.0.0",
+				"expect-type": "^1.3.0",
+				"magic-string": "^0.30.21",
+				"obug": "^2.1.1",
+				"pathe": "^2.0.3",
+				"picomatch": "^4.0.3",
+				"std-env": "^4.0.0-rc.1",
+				"tinybench": "^2.9.0",
+				"tinyexec": "^1.0.2",
+				"tinyglobby": "^0.2.15",
+				"tinyrainbow": "^3.1.0",
+				"vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+				"why-is-node-running": "^2.3.0"
+			},
+			"bin": {
+				"vitest": "vitest.mjs"
+			},
+			"engines": {
+				"node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			},
+			"peerDependencies": {
+				"@edge-runtime/vm": "*",
+				"@opentelemetry/api": "^1.9.0",
+				"@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+				"@vitest/browser-playwright": "4.1.8",
+				"@vitest/browser-preview": "4.1.8",
+				"@vitest/browser-webdriverio": "4.1.8",
+				"@vitest/coverage-istanbul": "4.1.8",
+				"@vitest/coverage-v8": "4.1.8",
+				"@vitest/ui": "4.1.8",
+				"happy-dom": "*",
+				"jsdom": "*",
+				"vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@edge-runtime/vm": {
+					"optional": true
+				},
+				"@opentelemetry/api": {
+					"optional": true
+				},
+				"@types/node": {
+					"optional": true
+				},
+				"@vitest/browser-playwright": {
+					"optional": true
+				},
+				"@vitest/browser-preview": {
+					"optional": true
+				},
+				"@vitest/browser-webdriverio": {
+					"optional": true
+				},
+				"@vitest/coverage-istanbul": {
+					"optional": true
+				},
+				"@vitest/coverage-v8": {
+					"optional": true
+				},
+				"@vitest/ui": {
+					"optional": true
+				},
+				"happy-dom": {
+					"optional": true
+				},
+				"jsdom": {
+					"optional": true
+				},
+				"vite": {
+					"optional": false
+				}
+			}
+		},
+		"node_modules/vitest-browser-svelte": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/vitest-browser-svelte/-/vitest-browser-svelte-2.1.1.tgz",
+			"integrity": "sha512-qbunYRSm+N92r9bfTkdDTpBZESLmp4QFz2SluV3n/x8U7ysosfeXYJZ4vXbJ0Y0LzoqqDnV5LHprmFgn4Eo+Ug==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@testing-library/svelte-core": "^1.0.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			},
+			"peerDependencies": {
+				"svelte": "^3 || ^4 || ^5 || ^5.0.0-next.0",
+				"vitest": "^4.0.0"
+			}
+		},
+		"node_modules/vitest/node_modules/@vitest/expect": {
+			"version": "4.1.8",
+			"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.8.tgz",
+			"integrity": "sha512-h3nDO677RDLEGlBxyQ5CW8RlMThSKSRLUePLOx09gNIWRL40edgA1GCZSZgf1W55MFAG6/Sw14KeaAnqv0NKdQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@standard-schema/spec": "^1.1.0",
+				"@types/chai": "^5.2.2",
+				"@vitest/spy": "4.1.8",
+				"@vitest/utils": "4.1.8",
+				"chai": "^6.2.2",
+				"tinyrainbow": "^3.1.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/vitest"
+			}
+		},
+		"node_modules/vitest/node_modules/chai": {
+			"version": "6.2.2",
+			"resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+			"integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/vitest/node_modules/tinyrainbow": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+			"integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/web-namespaces": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+			"integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/webidl-conversions": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
+			"integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
+			"dev": true,
+			"license": "BSD-2-Clause"
+		},
+		"node_modules/webpack-virtual-modules": {
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+			"integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/whatwg-encoding": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+			"integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+			"deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"iconv-lite": "0.6.3"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/whatwg-encoding/node_modules/iconv-lite": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+			"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"safer-buffer": ">= 2.1.2 < 3.0.0"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/whatwg-url": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
+			"integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"lodash.sortby": "^4.7.0",
+				"tr46": "^1.0.1",
+				"webidl-conversions": "^4.0.2"
+			}
+		},
+		"node_modules/which": {
+			"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"
+			},
+			"bin": {
+				"node-which": "bin/node-which"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/which-boxed-primitive": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+			"integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-bigint": "^1.1.0",
+				"is-boolean-object": "^1.2.1",
+				"is-number-object": "^1.1.1",
+				"is-string": "^1.1.1",
+				"is-symbol": "^1.1.1"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/which-builtin-type": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+			"integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"call-bound": "^1.0.2",
+				"function.prototype.name": "^1.1.6",
+				"has-tostringtag": "^1.0.2",
+				"is-async-function": "^2.0.0",
+				"is-date-object": "^1.1.0",
+				"is-finalizationregistry": "^1.1.0",
+				"is-generator-function": "^1.0.10",
+				"is-regex": "^1.2.1",
+				"is-weakref": "^1.0.2",
+				"isarray": "^2.0.5",
+				"which-boxed-primitive": "^1.1.0",
+				"which-collection": "^1.0.2",
+				"which-typed-array": "^1.1.16"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/which-collection": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+			"integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"is-map": "^2.0.3",
+				"is-set": "^2.0.3",
+				"is-weakmap": "^2.0.2",
+				"is-weakset": "^2.0.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/which-typed-array": {
+			"version": "1.1.21",
+			"resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.21.tgz",
+			"integrity": "sha512-zbRA8cVm6io/d5W8uIe2hblzN76/Wm3v/yiythQvr+dpBWeqhPSWIDNj4zOyHi4zKbMK6DN34Xsr9jPHJERAEw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"available-typed-arrays": "^1.0.7",
+				"call-bind": "^1.0.9",
+				"call-bound": "^1.0.4",
+				"for-each": "^0.3.5",
+				"get-proto": "^1.0.1",
+				"gopd": "^1.2.0",
+				"has-tostringtag": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/why-is-node-running": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+			"integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"siginfo": "^2.0.0",
+				"stackback": "0.0.2"
+			},
+			"bin": {
+				"why-is-node-running": "cli.js"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/word-wrap": {
+			"version": "1.2.5",
+			"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+			"integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/workbox-background-sync": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-7.4.1.tgz",
+			"integrity": "sha512-HhT7KE8tOWDm02wRNshXUnUPofMlhenF2DBdUnDPOubhizzPeItkYTmAB6td1Z2cjYPa98vzEiPLEuzn5hN66g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"idb": "^7.0.1",
+				"workbox-core": "7.4.1"
+			}
+		},
+		"node_modules/workbox-broadcast-update": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-7.4.1.tgz",
+			"integrity": "sha512-uAlgslKLvbQY+suirIdnBCSYrcgBhjp81Nj4l1lj/Jmj0MJO2CJERnCJjT0GFVwmReV0N+zs78K6gqd5gr9/+A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"workbox-core": "7.4.1"
+			}
+		},
+		"node_modules/workbox-build": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-7.4.1.tgz",
+			"integrity": "sha512-SDhxIvEAde9Gy/5w4Yo1Jh/M49Z0qE3q0oteyE8zGq0DScxFqVBcCtIXFuLtmtxRQZCMbf0prco4VyEu3KBQuw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@apideck/better-ajv-errors": "^0.3.1",
+				"@babel/core": "^7.24.4",
+				"@babel/preset-env": "^7.11.0",
+				"@babel/runtime": "^7.11.2",
+				"@rollup/plugin-babel": "^6.1.0",
+				"@rollup/plugin-node-resolve": "^16.0.3",
+				"@rollup/plugin-replace": "^6.0.3",
+				"@rollup/plugin-terser": "^1.0.0",
+				"@trickfilm400/rollup-plugin-off-main-thread": "^3.0.0-pre1",
+				"ajv": "^8.6.0",
+				"common-tags": "^1.8.0",
+				"eta": "^4.5.1",
+				"fast-json-stable-stringify": "^2.1.0",
+				"fs-extra": "^9.0.1",
+				"glob": "^11.0.1",
+				"pretty-bytes": "^5.3.0",
+				"rollup": "^4.53.3",
+				"source-map": "^0.8.0-beta.0",
+				"stringify-object": "^3.3.0",
+				"strip-comments": "^2.0.1",
+				"tempy": "^0.6.0",
+				"upath": "^1.2.0",
+				"workbox-background-sync": "7.4.1",
+				"workbox-broadcast-update": "7.4.1",
+				"workbox-cacheable-response": "7.4.1",
+				"workbox-core": "7.4.1",
+				"workbox-expiration": "7.4.1",
+				"workbox-google-analytics": "7.4.1",
+				"workbox-navigation-preload": "7.4.1",
+				"workbox-precaching": "7.4.1",
+				"workbox-range-requests": "7.4.1",
+				"workbox-recipes": "7.4.1",
+				"workbox-routing": "7.4.1",
+				"workbox-strategies": "7.4.1",
+				"workbox-streams": "7.4.1",
+				"workbox-sw": "7.4.1",
+				"workbox-window": "7.4.1"
+			},
+			"engines": {
+				"node": ">=20.0.0"
+			}
+		},
+		"node_modules/workbox-build/node_modules/@isaacs/cliui": {
+			"version": "9.0.0",
+			"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-9.0.0.tgz",
+			"integrity": "sha512-AokJm4tuBHillT+FpMtxQ60n8ObyXBatq7jD2/JA9dxbDDokKQm8KMht5ibGzLVU9IJDIKK4TPKgMHEYMn3lMg==",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/workbox-build/node_modules/balanced-match": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+			"integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "18 || 20 || >=22"
+			}
+		},
+		"node_modules/workbox-build/node_modules/brace-expansion": {
+			"version": "5.0.6",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
+			"integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"balanced-match": "^4.0.2"
+			},
+			"engines": {
+				"node": "18 || 20 || >=22"
+			}
+		},
+		"node_modules/workbox-build/node_modules/glob": {
+			"version": "11.1.0",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-11.1.0.tgz",
+			"integrity": "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==",
+			"deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"dependencies": {
+				"foreground-child": "^3.3.1",
+				"jackspeak": "^4.1.1",
+				"minimatch": "^10.1.1",
+				"minipass": "^7.1.2",
+				"package-json-from-dist": "^1.0.0",
+				"path-scurry": "^2.0.0"
+			},
+			"bin": {
+				"glob": "dist/esm/bin.mjs"
+			},
+			"engines": {
+				"node": "20 || >=22"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/workbox-build/node_modules/jackspeak": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.2.3.tgz",
+			"integrity": "sha512-ykkVRwrYvFm1nb2AJfKKYPr0emF6IiXDYUaFx4Zn9ZuIH7MrzEZ3sD5RlqGXNRpHtvUHJyOnCEFxOlNDtGo7wg==",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"dependencies": {
+				"@isaacs/cliui": "^9.0.0"
+			},
+			"engines": {
+				"node": "20 || >=22"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/workbox-build/node_modules/lru-cache": {
+			"version": "11.5.1",
+			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.1.tgz",
+			"integrity": "sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"engines": {
+				"node": "20 || >=22"
+			}
+		},
+		"node_modules/workbox-build/node_modules/minimatch": {
+			"version": "10.2.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
+			"integrity": "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"dependencies": {
+				"brace-expansion": "^5.0.5"
+			},
+			"engines": {
+				"node": "18 || 20 || >=22"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/workbox-build/node_modules/path-scurry": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.2.tgz",
+			"integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==",
+			"dev": true,
+			"license": "BlueOak-1.0.0",
+			"dependencies": {
+				"lru-cache": "^11.0.0",
+				"minipass": "^7.1.2"
+			},
+			"engines": {
+				"node": "18 || 20 || >=22"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/workbox-build/node_modules/pretty-bytes": {
+			"version": "5.6.0",
+			"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
+			"integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/workbox-build/node_modules/source-map": {
+			"version": "0.8.0-beta.0",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
+			"integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==",
+			"deprecated": "The work that was done in this beta branch won't be included in future versions",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"whatwg-url": "^7.0.0"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/workbox-cacheable-response": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-7.4.1.tgz",
+			"integrity": "sha512-8xaFoJdDc2OjrlbbL3gEeBO1WKcMwRqwLRupgqahYXu75yXajPLuwrbXMrIGZuWYXrQwk0xDjOxZ/ujCy/oJYw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"workbox-core": "7.4.1"
+			}
+		},
+		"node_modules/workbox-core": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-7.4.1.tgz",
+			"integrity": "sha512-DT+vu46eh/2vRsSHTY4Xmc32Z1rr9PRlQUXr1Dx30ZuXRWwOsvZgGgcwxcasubQLQmbTNYZjv44LkBAQ4tT5tQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/workbox-expiration": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-7.4.1.tgz",
+			"integrity": "sha512-lRKUF7b+OGbeXkQk1s6MHXOa3d7Xxf7Of31W6c6hCfipfIyrtdWZ89stq21AHZMaoG7VNFoHply4Ox+rU31TWg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"idb": "^7.0.1",
+				"workbox-core": "7.4.1"
+			}
+		},
+		"node_modules/workbox-google-analytics": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-7.4.1.tgz",
+			"integrity": "sha512-Mks1JwLEt++ZAkF6sS1OpSh9RtAMIsiDgRpK+codiHGIPXeaUOgi4cPc3GFadUl8V5QPeypEk8Oxgl3HlwVzHw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"workbox-background-sync": "7.4.1",
+				"workbox-core": "7.4.1",
+				"workbox-routing": "7.4.1",
+				"workbox-strategies": "7.4.1"
+			}
+		},
+		"node_modules/workbox-navigation-preload": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-7.4.1.tgz",
+			"integrity": "sha512-C4KVsjPcYKJOhr631AxR9XoG2rLF3QiTk5aMv36MXOjtWvm8axwNFAtKUPGsWUwLXXAMgYM1En7fsvndaXeXRQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"workbox-core": "7.4.1"
+			}
+		},
+		"node_modules/workbox-precaching": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-7.4.1.tgz",
+			"integrity": "sha512-cdr/9qByww7yzEp7zg/qI4ukUrrNjQLgN+ONQRpjy/VqGQXwkgHwr00KksGJK8v0VifwDXBb8a4cWNZH71jn3Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"workbox-core": "7.4.1",
+				"workbox-routing": "7.4.1",
+				"workbox-strategies": "7.4.1"
+			}
+		},
+		"node_modules/workbox-range-requests": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-7.4.1.tgz",
+			"integrity": "sha512-7i2oxAUE82gHdAJBCAQ04JzNOdRPqzuOzGfoUyJpFSmeqBNYGPrAH8GPoPjUQTfp+NycwrD2H68VtuF8qxv0vQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"workbox-core": "7.4.1"
+			}
+		},
+		"node_modules/workbox-recipes": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/workbox-recipes/-/workbox-recipes-7.4.1.tgz",
+			"integrity": "sha512-gnbVfmV4/TtmQaM4x9AtuXhcdstJsep3XMVeztOrQVPT+R6+6DeBjGTCQ7fFCXm+4GEHUA5VEBTyi5+4gWGeog==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"workbox-cacheable-response": "7.4.1",
+				"workbox-core": "7.4.1",
+				"workbox-expiration": "7.4.1",
+				"workbox-precaching": "7.4.1",
+				"workbox-routing": "7.4.1",
+				"workbox-strategies": "7.4.1"
+			}
+		},
+		"node_modules/workbox-routing": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-7.4.1.tgz",
+			"integrity": "sha512-yubJGErZOusuidAenaL5ypfhQOa7urxP/f8E0ws7FPb4039RiWXUWBAyUkmUoOL/BcQGen3h0J8872d51IYxtA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"workbox-core": "7.4.1"
+			}
+		},
+		"node_modules/workbox-strategies": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-7.4.1.tgz",
+			"integrity": "sha512-GZxpaw9NbmOelj7667uZ2kpk5BFpOGbO4X0qjwh5ls8XQ8C+Lha5LQchTiUzsTFSS+NlUpftYAyOVXvQUrcqOQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"workbox-core": "7.4.1"
+			}
+		},
+		"node_modules/workbox-streams": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-7.4.1.tgz",
+			"integrity": "sha512-HWWtraKUbJknd9kgqGcpQ3G114HOPYvqs8HaJMDs2ebLNAimDkVDaWfAXE6Ybl+m8U6KsCE6pWyLYuigWmnAXw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"workbox-core": "7.4.1",
+				"workbox-routing": "7.4.1"
+			}
+		},
+		"node_modules/workbox-sw": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-7.4.1.tgz",
+			"integrity": "sha512-fez5f2DUlDJWTFYkCWQpY10N8gtztd849NswCbVFk0QlcSM4HT5A8x4g4ii650yem4I8tHY0R7JZahwp3ltIPw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/workbox-window": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-7.4.1.tgz",
+			"integrity": "sha512-notZDH2u8VXaqyuD7xaqIfEFi6SRM4SUSd7ewe9PDsVqADuepxX2ZMY3uvuZGxzY5ZOsGC/vD3A/3smFtJt4/A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/trusted-types": "^2.0.2",
+				"workbox-core": "7.4.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==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/ws": {
+			"version": "8.21.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.21.0.tgz",
+			"integrity": "sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
+		"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": "3.1.1",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+			"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/yocto-queue": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+			"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/zimmerframe": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
+			"integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/zod": {
+			"version": "4.4.3",
+			"resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
+			"integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/colinhacks"
+			}
+		},
+		"node_modules/zod-to-json-schema": {
+			"version": "3.25.2",
+			"resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.25.2.tgz",
+			"integrity": "sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA==",
+			"dev": true,
+			"license": "ISC",
+			"peerDependencies": {
+				"zod": "^3.25.28 || ^4"
+			}
+		},
+		"node_modules/zwitch": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+			"integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		}
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/package.json b/backend/llama.cpp/tools/ui/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..8b3516a02cf262e7d9a48b031c1ebb8d761a4344
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/package.json
@@ -0,0 +1,107 @@
+{
+	"name": "llama-ui",
+	"private": true,
+	"version": "1.0.0",
+	"type": "module",
+	"scripts": {
+		"build": "npm run build-pwa-assets && vite build",
+		"build-pwa-assets": "npx @vite-pwa/assets-generator --root . --config pwa-assets.config.ts && npx @vite-pwa/assets-generator --root . --config pwa-assets-dark.config.ts && node scripts/make-icons-circular.js",
+		"dev": "bash scripts/dev.sh",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"reset": "rm -rf .svelte-kit node_modules",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"test": "npm run test:ui -- --run && npm run test:client -- --run && npm run test:unit -- --run && npm run test:e2e",
+		"test:e2e": "playwright test",
+		"test:e2e:pwa": "playwright test tests/e2e/pwa.e2e.ts",
+		"test:client": "vitest --project=client",
+		"test:unit": "vitest --project=unit",
+		"test:unit:pwa": "vitest --project=unit --run tests/unit/pwa.spec.ts",
+		"test:pwa": "npm run test:unit:pwa && npm run test:e2e:pwa",
+		"test:ui": "vitest --project=ui",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"cleanup": "rm -rf .svelte-kit build node_modules test-results dist dev-dist debug-storybook.log static/pwa-*.png static/maskable-icon-*.png static/apple-touch-icon-*.png static/apple-splash-*.png static/favicon*.ico"
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "5.0.0",
+		"@eslint/compat": "1.4.1",
+		"@eslint/js": "9.39.2",
+		"@internationalized/date": "3.12.2",
+		"@lucide/svelte": "0.515.0",
+		"@modelcontextprotocol/sdk": "1.26.0",
+		"@playwright/test": "1.56.1",
+		"@storybook/addon-a11y": "10.2.4",
+		"@storybook/addon-docs": "10.2.4",
+		"@storybook/addon-svelte-csf": "5.0.10",
+		"@storybook/addon-vitest": "10.2.4",
+		"@storybook/sveltekit": "10.2.4",
+		"@sveltejs/adapter-static": "3.0.10",
+		"@sveltejs/kit": "2.60.1",
+		"@sveltejs/vite-plugin-svelte": "6.2.1",
+		"@tailwindcss/forms": "0.5.10",
+		"@tailwindcss/typography": "0.5.16",
+		"@tailwindcss/vite": "4.1.11",
+		"@types/node": "24.13.0",
+		"@vite-pwa/assets-generator": "1.0.2",
+		"@vite-pwa/sveltekit": "1.1.0",
+		"@vitest/browser": "4.1.8",
+		"@vitest/browser-playwright": "4.1.8",
+		"@vitest/coverage-v8": "4.1.8",
+		"bits-ui": "2.18.1",
+		"clsx": "2.1.1",
+		"dexie": "4.4.3",
+		"dompurify": "3.4.11",
+		"eslint": "9.39.4",
+		"eslint-config-prettier": "10.1.8",
+		"eslint-plugin-storybook": "10.4.2",
+		"eslint-plugin-svelte": "3.19.0",
+		"fflate": "0.8.3",
+		"globals": "16.5.0",
+		"highlight.js": "11.11.1",
+		"http-server": "14.1.1",
+		"mdast": "3.0.0",
+		"mdsvex": "0.12.7",
+		"mermaid": "11.15.0",
+		"mode-watcher": "1.1.0",
+		"pdfjs-dist": "5.4.54",
+		"playwright": "1.56.1",
+		"prettier": "3.8.3",
+		"prettier-plugin-svelte": "4.1.0",
+		"prettier-plugin-tailwindcss": "0.8.0",
+		"rehype-highlight": "7.0.2",
+		"rehype-katex": "7.0.1",
+		"rehype-stringify": "10.0.1",
+		"remark": "15.0.1",
+		"remark-breaks": "4.0.0",
+		"remark-gfm": "4.0.1",
+		"remark-html": "16.0.1",
+		"remark-math": "6.0.0",
+		"remark-rehype": "11.1.2",
+		"sass": "1.100.0",
+		"storybook": "10.4.2",
+		"svelte": "5.56.1",
+		"svelte-check": "4.6.0",
+		"svelte-sonner": "1.1.1",
+		"tailwind-merge": "3.6.0",
+		"tailwind-variants": "3.2.2",
+		"tailwindcss": "4.3.0",
+		"tw-animate-css": "1.4.0",
+		"typescript": "5.9.3",
+		"typescript-eslint": "8.60.1",
+		"unified": "11.0.5",
+		"unist-util-visit": "5.1.0",
+		"uuid": "13.0.2",
+		"vite": "7.3.5",
+		"vite-plugin-devtools-json": "0.2.1",
+		"vitest": "4.1.8",
+		"vitest-browser-svelte": "2.1.1",
+		"workbox-window": "7.4.1"
+	},
+	"overrides": {
+		"cookie": "1.1.1"
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/playwright.config.ts b/backend/llama.cpp/tools/ui/playwright.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..55bf3851404725cf694eb4076d6426f978e79cdf
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/playwright.config.ts
@@ -0,0 +1,31 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+	testDir: 'tests/e2e',
+	testMatch: ['**/*.e2e.ts'],
+	timeout: 30000,
+	expect: {
+		timeout: 5000
+	},
+	fullyParallel: true,
+	forbidOnly: !!process.env.CI,
+	retries: process.env.CI ? 2 : 0,
+	workers: process.env.CI ? 1 : undefined,
+	reporter: 'line',
+	use: {
+		baseURL: 'http://localhost:8181',
+		trace: 'on-first-retry'
+	},
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] }
+		}
+	],
+	webServer: {
+		command: 'npm run build && npx http-server ./dist -p 8181',
+		port: 8181,
+		timeout: 120000,
+		reuseExistingServer: !process.env.CI
+	}
+});
diff --git a/backend/llama.cpp/tools/ui/pwa-assets-dark.config.ts b/backend/llama.cpp/tools/ui/pwa-assets-dark.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..358c0ebc074ef4fbb32837f7cc3e767d6099d815
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/pwa-assets-dark.config.ts
@@ -0,0 +1,27 @@
+import { defineConfig } from '@vite-pwa/assets-generator/config';
+import { FAVICON_COLORS, PWA_ASSET_GENERATOR } from './src/lib/constants/pwa';
+import { writeThemeFavicons } from './scripts/favicon-colorize';
+
+writeThemeFavicons(FAVICON_COLORS.LIGHT, FAVICON_COLORS.DARK, {
+	padding: PWA_ASSET_GENERATOR.FAVICON_PADDING
+});
+
+export default defineConfig({
+	headLinkOptions: {
+		preset: '2023'
+	},
+	preset: {
+		transparent: {
+			sizes: [],
+			favicons: [[48, 'favicon-dark.ico']],
+			padding: PWA_ASSET_GENERATOR.FAVICON_PADDING
+		},
+		maskable: {
+			sizes: []
+		},
+		apple: {
+			sizes: []
+		}
+	},
+	images: ['static/favicon-dark.svg']
+});
diff --git a/backend/llama.cpp/tools/ui/pwa-assets.config.ts b/backend/llama.cpp/tools/ui/pwa-assets.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b69884d94a9edcb70b4bc8dede79db71bf61eb38
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/pwa-assets.config.ts
@@ -0,0 +1,68 @@
+import {
+	combinePresetAndAppleSplashScreens,
+	defineConfig,
+	minimal2023Preset
+} from '@vite-pwa/assets-generator/config';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import {
+	THEME_COLORS,
+	PWA_GENERATOR_DEVICES,
+	PWA_ASSET_GENERATOR,
+	FAVICON_COLORS
+} from './src/lib/constants/pwa';
+import { SplashOrientation } from './src/lib/enums/splash.enums';
+import { writeThemeFavicons } from './scripts/favicon-colorize';
+
+writeThemeFavicons(FAVICON_COLORS.LIGHT, FAVICON_COLORS.DARK, {
+	padding: PWA_ASSET_GENERATOR.FAVICON_PADDING
+});
+
+export default defineConfig({
+	headLinkOptions: {
+		preset: PWA_ASSET_GENERATOR.LINK_PRESET
+	},
+	preset: combinePresetAndAppleSplashScreens(
+		{
+			...minimal2023Preset,
+			// tiny margin so favicon.ico / pwa-*.png breathe inside the canvas
+			transparent: {
+				...minimal2023Preset.transparent,
+				padding: PWA_ASSET_GENERATOR.FAVICON_PADDING
+			}
+		},
+		{
+			padding: PWA_ASSET_GENERATOR.SPLASH_PADDING,
+			resizeOptions: {
+				background: THEME_COLORS.BACKGROUND_LIGHT,
+				fit: PWA_ASSET_GENERATOR.FIT_MODE
+			},
+			darkResizeOptions: {
+				background: THEME_COLORS.BACKGROUND_DARK,
+				fit: PWA_ASSET_GENERATOR.FIT_MODE
+			},
+			darkImageResolver: async (imageName: string) => {
+				if (imageName.endsWith('favicon.svg')) {
+					return readFileSync(resolve('static/favicon-dark.svg'));
+				}
+			},
+			linkMediaOptions: {
+				log: true,
+				addMediaScreen: PWA_ASSET_GENERATOR.ADD_MEDIA_SCREEN,
+				basePath: PWA_ASSET_GENERATOR.BASE_PATH,
+				xhtml: PWA_ASSET_GENERATOR.XHTML
+			},
+			png: {
+				compressionLevel: PWA_ASSET_GENERATOR.PNG_COMPRESSION_LEVEL,
+				quality: PWA_ASSET_GENERATOR.PNG_QUALITY
+			},
+			name: (landscape, size, dark) => {
+				const orientation = landscape ? SplashOrientation.LANDSCAPE : SplashOrientation.PORTRAIT;
+				const darkPrefix = dark ? PWA_ASSET_GENERATOR.DARK_PREFIX : '';
+				return `apple-splash-${orientation}-${darkPrefix}${size.width}x${size.height}.png`;
+			}
+		},
+		PWA_GENERATOR_DEVICES
+	),
+	images: ['static/favicon.svg']
+});
diff --git a/backend/llama.cpp/tools/ui/scripts/dev.sh b/backend/llama.cpp/tools/ui/scripts/dev.sh
new file mode 100644
index 0000000000000000000000000000000000000000..7e1d3c15e5bbfc2190a38a50ad44dea9c2a736f7
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/scripts/dev.sh
@@ -0,0 +1,61 @@
+#!/bin/bash
+
+# Development script for llama-ui
+#
+# This script starts the llama-ui development servers (Storybook and Vite).
+# Note: You need to start llama-server separately.
+#
+# Usage:
+#   bash scripts/dev.sh
+#   npm run dev
+
+cd ../../
+
+# Ensure node_modules are installed
+if [ ! -d "tools/ui/node_modules" ]; then
+    echo "📦 Installing npm dependencies..."
+    cd tools/ui && npm install && cd ../../
+fi
+
+# Check and install git hooks if missing
+check_and_install_hooks() {
+    local hooks_missing=false
+
+    # Check for required hooks
+    if [ ! -f ".git/hooks/pre-commit" ] || [ ! -f ".git/hooks/pre-push" ]; then
+        hooks_missing=true
+    fi
+
+    if [ "$hooks_missing" = true ]; then
+        echo "🔧 Git hooks missing, installing them..."
+        if bash "$(dirname "$0")/git-hooks/install.sh"; then
+            echo "✅ Git hooks installed successfully"
+        else
+            echo "⚠️  Failed to install git hooks, continuing anyway..."
+        fi
+    else
+        echo "✅ Git hooks already installed"
+    fi
+}
+
+# Install git hooks if needed
+check_and_install_hooks
+
+# Cleanup function
+cleanup() {
+    echo "🧹 Cleaning up..."
+    exit
+}
+
+# Set up signal handlers
+trap cleanup SIGINT SIGTERM
+
+echo "🚀 Starting development servers..."
+echo "📝 Note: Make sure to start llama-server separately if needed"
+cd tools/ui
+# Use --insecure-http-parser to handle malformed HTTP responses from llama-server
+# (some responses have both Content-Length and Transfer-Encoding headers)
+storybook dev -p 6006 --ci & NODE_OPTIONS="--insecure-http-parser" vite dev --host 0.0.0.0 &
+
+# Wait for all background processes
+wait
diff --git a/backend/llama.cpp/tools/ui/scripts/favicon-colorize.ts b/backend/llama.cpp/tools/ui/scripts/favicon-colorize.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e1872b7774f7fe5289744529581e1862a247f2d3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/scripts/favicon-colorize.ts
@@ -0,0 +1,107 @@
+import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const PROJECT_ROOT = resolve(HERE, '..');
+
+const DEFAULT_LOGO = resolve(PROJECT_ROOT, 'src/lib/assets/logo.svg');
+const DEFAULT_OUT_DIR = resolve(PROJECT_ROOT, 'static');
+const DEFAULT_OUT_LIGHT = resolve(DEFAULT_OUT_DIR, 'favicon.svg');
+const DEFAULT_OUT_DARK = resolve(DEFAULT_OUT_DIR, 'favicon-dark.svg');
+
+const CURRENT_COLOR = 'currentColor';
+
+export interface ColorizedFavicon {
+	light: string;
+	dark: string;
+}
+
+export interface WriteThemeFaviconsOptions {
+	sourcePath?: string;
+	lightOutPath?: string;
+	darkOutPath?: string;
+	/**
+	 * Fraction of the icon (0..1) to leave as an even margin on each side.
+	 * Applied by wrapping the inner content in a `<g transform="...">` so the
+	 * source `src/lib/assets/logo.svg` is not modified. Pass 0 to disable.
+	 */
+	padding?: number;
+}
+
+/**
+ * Replace every `currentColor` occurrence in the SVG with the given color.
+ * Pure: no filesystem access, so it is straightforward to unit-test.
+ */
+export function colorizeFaviconSvg(
+	svg: string,
+	lightColor: string,
+	darkColor: string
+): ColorizedFavicon {
+	return {
+		light: svg.replaceAll(CURRENT_COLOR, lightColor),
+		dark: svg.replaceAll(CURRENT_COLOR, darkColor)
+	};
+}
+
+/**
+ * Shrink the inner SVG content uniformly and re-center it so `padding` (a
+ * 0..1 fraction) is reserved as equal margin on each side. Returns the input
+ * unchanged for non-positive padding, missing/invalid `viewBox`, or unexpected
+ * markup so the caller always gets a renderable SVG.
+ */
+export function padFaviconSvg(svg: string, padding: number): string {
+	if (!(padding > 0) || padding >= 1) return svg;
+
+	const viewBoxMatch = svg.match(/viewBox\s*=\s*["']([^"']+)["']/i);
+	if (!viewBoxMatch) return svg;
+
+	const parts = viewBoxMatch[1]
+		.trim()
+		.split(/[\s,]+/)
+		.map(Number);
+	if (parts.length !== 4 || parts.some((n) => !Number.isFinite(n))) return svg;
+
+	const [, , width, height] = parts;
+	if (width <= 0 || height <= 0) return svg;
+
+	const scale = 1 - padding;
+	const translateX = (padding * width) / 2;
+	const translateY = (padding * height) / 2;
+
+	const openTagStart = svg.search(/<svg\b/i);
+	if (openTagStart === -1) return svg;
+	const openTagEnd = svg.indexOf('>', openTagStart);
+	if (openTagEnd === -1) return svg;
+	const closeStart = svg.lastIndexOf('</svg');
+	if (closeStart === -1 || closeStart <= openTagEnd) return svg;
+
+	const openTag = svg.slice(0, openTagEnd + 1);
+	const inner = svg.slice(openTagEnd + 1, closeStart);
+	const closeTag = svg.slice(closeStart);
+
+	const group = `<g transform="translate(${translateX} ${translateY}) scale(${scale})">`;
+	return `${openTag}${group}${inner}</g>${closeTag}`;
+}
+
+/**
+ * Read `src/lib/assets/logo.svg`, colorize it for both themes, and write
+ * the results to the static directory so the PWA asset generator can consume
+ * them. Paths can be overridden for tests.
+ */
+export function writeThemeFavicons(
+	lightColor: string,
+	darkColor: string,
+	{
+		sourcePath = DEFAULT_LOGO,
+		lightOutPath = DEFAULT_OUT_LIGHT,
+		darkOutPath = DEFAULT_OUT_DARK,
+		padding = 0
+	}: WriteThemeFaviconsOptions = {}
+): void {
+	const source = readFileSync(sourcePath, 'utf-8');
+	const { light, dark } = colorizeFaviconSvg(source, lightColor, darkColor);
+	mkdirSync(dirname(lightOutPath), { recursive: true });
+	writeFileSync(lightOutPath, padFaviconSvg(light, padding));
+	writeFileSync(darkOutPath, padFaviconSvg(dark, padding));
+}
diff --git a/backend/llama.cpp/tools/ui/scripts/git-hooks/install.sh b/backend/llama.cpp/tools/ui/scripts/git-hooks/install.sh
new file mode 100644
index 0000000000000000000000000000000000000000..1a17dcad6d3deff4921190121c9e3b297807f9e0
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/scripts/git-hooks/install.sh
@@ -0,0 +1,35 @@
+#!/usr/bin/env bash
+#
+# Install git hooks for llama-ui
+# Copies pre-commit and pre-push hooks into the repo's .git/hooks directory.
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+REPO_ROOT="$(cd "$SCRIPT_DIR/../../../.." && pwd)"
+HOOKS_DIR="$REPO_ROOT/$(cd "$REPO_ROOT" && git rev-parse --git-path hooks)"
+
+# Verify package.json exists
+if [ ! -f "$REPO_ROOT/tools/ui/package.json" ]; then
+    echo "❌ package.json not found in tools/ui"
+    exit 1
+fi
+
+echo "Installing git hooks for llama-ui..."
+
+for hook in pre-commit pre-push; do
+    src="$SCRIPT_DIR/${hook}.sh"
+    dst="$HOOKS_DIR/$hook"
+
+    if cp "$src" "$dst" && chmod +x "$dst"; then
+        echo "  ✅ $hook"
+    else
+        echo "  ❌ Failed to install $hook"
+        exit 1
+    fi
+done
+
+echo ""
+echo "Pre-commit:  format (staged) + type-check"
+echo "Pre-push:    lint + test"
+echo ""
+echo "Hooks stash unstaged changes temporarily and restore them after."
+echo "Skip with:  git commit --no-verify / git push --no-verify"
diff --git a/backend/llama.cpp/tools/ui/scripts/git-hooks/pre-commit.sh b/backend/llama.cpp/tools/ui/scripts/git-hooks/pre-commit.sh
new file mode 100644
index 0000000000000000000000000000000000000000..208ef56fcd53f76b8c23da23d2efa3b08fb9a67b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/scripts/git-hooks/pre-commit.sh
@@ -0,0 +1,57 @@
+#!/usr/bin/env bash
+#
+# Pre-commit hook for llama-ui
+# Runs: format (staged files only) + type-check
+# Stashes unstaged changes temporarily and restores them after.
+
+# Only run when there are staged changes in tools/ui/
+if ! git diff --cached --name-only | grep -q "^tools/ui/"; then
+    exit 0
+fi
+
+REPO_ROOT=$(git rev-parse --show-toplevel)
+cd "$REPO_ROOT/tools/ui"
+
+# Check that node_modules exists
+if [ ! -d "node_modules" ]; then
+    echo "❌ node_modules not found. Run 'npm install' first."
+    exit 1
+fi
+
+# Stash unstaged changes in tools/ui/ so they don't interfere
+stash_name="pi-ui-precommit"
+git stash push --keep-index -u -m "$stash_name" -- tools/ui/ 2>/dev/null || true
+
+echo "Running pre-commit checks for llama-ui..."
+
+# Format only staged files
+staged_ui=$(git diff --cached --name-only -- tools/ui/)
+if [ -n "$staged_ui" ]; then
+    echo "$staged_ui" | xargs npm run format
+    format_ok=$?
+    # Re-stage formatted files
+    git add tools/ui/
+else
+    format_ok=0
+fi
+
+# Type-check the clean tree
+npm run check
+check_ok=$?
+
+# Restore stashed changes
+if git stash list | grep -q "$stash_name"; then
+    git stash pop 2>/dev/null || true
+fi
+
+if [ $format_ok -ne 0 ]; then
+    echo "❌ Format failed"
+    exit 1
+fi
+if [ $check_ok -ne 0 ]; then
+    echo "❌ Type check failed"
+    exit 1
+fi
+
+echo "✅ Pre-commit checks passed"
+exit 0
diff --git a/backend/llama.cpp/tools/ui/scripts/git-hooks/pre-push.sh b/backend/llama.cpp/tools/ui/scripts/git-hooks/pre-push.sh
new file mode 100644
index 0000000000000000000000000000000000000000..66d79b950a36f506750ea2ee96ea0bc806d86f94
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/scripts/git-hooks/pre-push.sh
@@ -0,0 +1,67 @@
+#!/usr/bin/env bash
+#
+# Pre-push hook for llama-ui
+# Runs: lint + test
+# Ignores unstaged changes (stashes them temporarily and restores after).
+
+needs_check=false
+
+# Read refs from stdin: local_ref local_sha remote_ref remote_sha
+while read local_ref local_sha remote_ref remote_sha; do
+    # New branch or force-push — always check
+    if [ "$local_sha" = "0000000000000000000000000000000000000000" ] || \
+       [ "$remote_sha" = "0000000000000000000000000000000000000000" ]; then
+        needs_check=true
+        continue
+    fi
+
+    # Check for changes in tools/ui/ between remote and local
+    if git diff --name-only "$remote_sha...$local_sha" -- tools/ui/ | grep -q .; then
+        needs_check=true
+    fi
+done
+
+if [ "$needs_check" = false ]; then
+    exit 0
+fi
+
+REPO_ROOT=$(git rev-parse --show-toplevel)
+cd "$REPO_ROOT/tools/ui"
+
+# Check that node_modules exists
+if [ ! -d "node_modules" ]; then
+    echo "❌ node_modules not found. Run 'npm install' first."
+    exit 1
+fi
+
+# Stash unstaged changes so they don't interfere with checks
+stash_name="pi-ui-prepush"
+git stash push -u -m "$stash_name" -- tools/ui/ 2>/dev/null || true
+
+echo "Running pre-push checks for llama-ui..."
+
+# Lint
+npm run lint
+lint_ok=$?
+
+# Test
+npm test
+test_ok=$?
+
+# Restore stashed changes
+if git stash list | grep -q "$stash_name"; then
+    git stash pop 2>/dev/null || true
+fi
+
+if [ $lint_ok -ne 0 ]; then
+    echo "❌ Lint failed"
+    exit 1
+fi
+
+if [ $test_ok -ne 0 ]; then
+    echo "❌ Tests failed"
+    exit 1
+fi
+
+echo "✅ Pre-push checks passed"
+exit 0
diff --git a/backend/llama.cpp/tools/ui/scripts/make-icons-circular.js b/backend/llama.cpp/tools/ui/scripts/make-icons-circular.js
new file mode 100644
index 0000000000000000000000000000000000000000..7dfd6521e5761702ccba22da85b65ee16bda84c3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/scripts/make-icons-circular.js
@@ -0,0 +1,137 @@
+#!/usr/bin/env node
+
+/**
+ * Apply circular mask to pwa-*.png icons.
+ * Uses the maskable icon as source (white bg, full logo) to avoid
+ * the small-colormap pwa icons looking bad when cropped to a circle.
+ *
+ * Usage: node scripts/make-icons-circular.js [--padding-pct <0-50>] [--scale-pct <50-100>]
+ *
+ * - padding-pct: percentage of icon size kept as padding around the circle (default: 25)
+ * - scale-pct: scale down the source image before cropping (default: 85)
+ *
+ * maskable-icon and apple-touch-icon are left untouched.
+ */
+
+import sharp from 'sharp';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const STATIC_DIR = path.resolve(__dirname, '..', 'static');
+
+const paddingPct = process.argv.reduce((acc, arg, i, args) => {
+	if (arg === '--padding-pct' && args[i + 1]) return parseFloat(args[i + 1]);
+	return acc;
+}, 0);
+
+// Scale down the source image before cropping to circle
+const scalePct = process.argv.reduce((acc, arg, i, args) => {
+	if (arg === '--scale-pct' && args[i + 1]) return parseFloat(args[i + 1]);
+	return acc;
+}, 85); // default 85% - icon fills 85% of the circular area
+
+// Source for circular icons: the maskable icon (white bg, full logo)
+const sourceIcon = 'maskable-icon-512x512.png';
+const targetIcons = ['pwa-64x64.png', 'pwa-192x192.png', 'pwa-512x512.png'];
+
+// maskable-icon and apple-touch-icon stay square
+const untouchedIcons = ['maskable-icon-512x512.png', 'apple-touch-icon-180x180.png'];
+
+async function makeCircle(targetFilename) {
+	const targetPath = path.join(STATIC_DIR, targetFilename);
+	const sourcePath = path.join(STATIC_DIR, sourceIcon);
+
+	if (!fs.existsSync(sourcePath)) {
+		console.log(`⏭️  ${sourceIcon} not found, skipping`);
+		return;
+	}
+	if (!fs.existsSync(targetPath)) {
+		console.log(`⏭️  ${targetFilename} not found, skipping`);
+		return;
+	}
+
+	const metadata = await sharp(targetPath).metadata();
+	const size = Math.max(metadata.width, metadata.height);
+	const radius = Math.floor((size * (1 - paddingPct / 100)) / 2);
+	const center = Math.floor(size / 2);
+
+	// Build circular mask as RGBA buffer: white opaque circle on transparent bg
+	const maskBuf = Buffer.alloc(size * size * 4, 0);
+	for (let y = 0; y < size; y++) {
+		for (let x = 0; x < size; x++) {
+			const dx = x - center;
+			const dy = y - center;
+			const dist = Math.sqrt(dx * dx + dy * dy);
+			if (dist < radius) {
+				const i = (y * size + x) * 4;
+				maskBuf[i] = 255;
+				maskBuf[i + 1] = 255;
+				maskBuf[i + 2] = 255;
+				maskBuf[i + 3] = 255;
+			}
+		}
+	}
+
+	const tmpMask = path.join(STATIC_DIR, '.mask-tmp.png');
+	await sharp(maskBuf, {
+		raw: { width: size, height: size, channels: 4 }
+	})
+		.png()
+		.toFile(tmpMask);
+
+	// Step 1: Scale source relative to circle diameter (not full icon), composite centered onto white canvas of full size
+	const circleDiameter = Math.floor(size * (1 - paddingPct / 100));
+	const scaledSize = Math.floor((circleDiameter * scalePct) / 100);
+	const offset = Math.floor((size - scaledSize) / 2);
+
+	const scaledBuf = await sharp(sourcePath)
+		.resize(scaledSize, scaledSize, {
+			fit: 'cover',
+			background: { r: 255, g: 255, b: 255, alpha: 1 }
+		})
+		.ensureAlpha()
+		.png()
+		.toBuffer();
+
+	// Step 2: Composite scaled image onto white background, then apply circular mask
+	const output = await sharp({
+		create: {
+			width: size,
+			height: size,
+			channels: 4,
+			background: { r: 255, g: 255, b: 255, alpha: 1 }
+		}
+	})
+		.composite([
+			{ input: scaledBuf, top: offset, left: offset },
+			{ input: tmpMask, top: 0, left: 0, blend: 'dest-in' }
+		])
+		.png()
+		.toBuffer();
+
+	fs.writeFileSync(targetPath, output);
+	fs.unlinkSync(tmpMask);
+
+	console.log(
+		`✓ ${targetFilename} → circle from ${sourceIcon}, ${paddingPct}% padding (size=${size}, r=${radius}, scale=${scalePct}%, circleDiameter=${circleDiameter})`
+	);
+}
+
+async function main() {
+	console.log(`Circular mask: ${paddingPct}% padding, ${scalePct}% scale, source=${sourceIcon}\n`);
+	for (const icon of targetIcons) {
+		await makeCircle(icon);
+	}
+
+	console.log('\nUnchanged:');
+	for (const icon of untouchedIcons) {
+		const fp = path.join(STATIC_DIR, icon);
+		console.log(`  ${icon} (${fs.existsSync(fp) ? fs.statSync(fp).size + ' bytes' : 'missing'})`);
+	}
+}
+
+main();
diff --git a/backend/llama.cpp/tools/ui/scripts/vite-plugin-build-info.ts b/backend/llama.cpp/tools/ui/scripts/vite-plugin-build-info.ts
new file mode 100644
index 0000000000000000000000000000000000000000..972ba3b664c85586a1617191ee9bc9cdfd954a13
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/scripts/vite-plugin-build-info.ts
@@ -0,0 +1,41 @@
+import { writeFileSync, existsSync } from 'node:fs';
+import { resolve } from 'path';
+import type { Plugin } from 'vite';
+import { BUILD_CONFIG } from '../src/lib/constants/pwa';
+
+let processed = false;
+
+const OUTPUT_DIR = process.env.LLAMA_UI_OUT_DIR ?? BUILD_CONFIG.OUTPUT_DIR;
+
+/**
+ * Write build.json with the llama.cpp release build number.
+ *
+ * LLAMA_BUILD_NUMBER is passed from CMake -> npm -> vite via env var.
+ * Used for display of the current llama-server release (e.g. "b1234").
+ */
+export function buildInfoPlugin(): Plugin {
+	return {
+		name: 'llamacpp:build-info',
+		apply: 'build',
+		closeBundle() {
+			setTimeout(() => {
+				try {
+					if (processed) return;
+					processed = true;
+
+					const buildNumber = process.env.LLAMA_BUILD_NUMBER || 'b0000';
+
+					const outDir = resolve(OUTPUT_DIR);
+					const indexPath = resolve(outDir, 'index.html');
+					if (!existsSync(indexPath)) return;
+
+					const buildJsonPath = resolve(outDir, 'build.json');
+					writeFileSync(buildJsonPath, JSON.stringify({ version: buildNumber }), 'utf-8');
+					console.log(`Created build.json (version: ${buildNumber})`);
+				} catch (error) {
+					console.error('Failed to write build.json:', error);
+				}
+			}, 100);
+		}
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/scripts/vite-plugin-relativize-base.ts b/backend/llama.cpp/tools/ui/scripts/vite-plugin-relativize-base.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ce2f1b6e9fabe1fbb3a806b906307d8fd71e563c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/scripts/vite-plugin-relativize-base.ts
@@ -0,0 +1,61 @@
+import { readFileSync, writeFileSync, existsSync } from 'node:fs';
+import { resolve } from 'path';
+import type { Plugin } from 'vite';
+import { BUILD_CONFIG } from '../src/lib/constants/pwa';
+
+let processed = false;
+
+const OUTPUT_DIR = process.env.LLAMA_UI_OUT_DIR ?? BUILD_CONFIG.OUTPUT_DIR;
+
+function rewrite(path: string, pairs: [string, string][]): void {
+	if (!existsSync(path)) {
+		return;
+	}
+	const text = readFileSync(path, 'utf-8');
+	let out = text;
+	for (const [from, to] of pairs) {
+		out = out.split(from).join(to);
+	}
+	if (out !== text) {
+		writeFileSync(path, out, 'utf-8');
+	}
+}
+
+/**
+ * Relativize SvelteKit absolute base refs so the build is relocatable under any subpath.
+ *
+ * SvelteKit bakes root absolute /_app/ paths into the SPA fallback because paths.relative
+ * does not apply to a depth agnostic fallback page. Rewriting to ./_app/ lets a plain
+ * recursive copy of the output into /any/subdir/ resolve assets against the document URL.
+ * Runs after adapter-static writes index.html and the PWA plugin writes sw.js, deferred the
+ * same way as buildInfoPlugin so the emitted files exist.
+ */
+export function relativizeBasePlugin(): Plugin {
+	return {
+		name: 'llamacpp:relativize-base',
+		apply: 'build',
+		closeBundle() {
+			setTimeout(() => {
+				try {
+					if (processed) return;
+					processed = true;
+
+					const outDir = resolve(OUTPUT_DIR);
+
+					// index.html: modulepreload, stylesheet and bootstrap import reference "/_app/
+					rewrite(resolve(outDir, 'index.html'), [['"/_app/', '"./_app/']]);
+
+					// sw.js: the only absolute entries are the navigate fallback precache key and handler
+					rewrite(resolve(outDir, 'sw.js'), [
+						['{url:"/"', '{url:"./"'],
+						['createHandlerBoundToURL("/"', 'createHandlerBoundToURL("./"']
+					]);
+
+					console.log('Relativized base refs in index.html and sw.js');
+				} catch (error) {
+					console.error('Failed to relativize base refs:', error);
+				}
+			}, 100);
+		}
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/scripts/vite-plugin-splash-screen.ts b/backend/llama.cpp/tools/ui/scripts/vite-plugin-splash-screen.ts
new file mode 100644
index 0000000000000000000000000000000000000000..059ce4920bc5f46232561881a0d7eea5dd484885
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/scripts/vite-plugin-splash-screen.ts
@@ -0,0 +1,115 @@
+import { readdirSync, readFileSync, writeFileSync, existsSync } from 'node:fs';
+import { resolve } from 'path';
+import type { Plugin } from 'vite';
+import { TAB, NEWLINE } from '../src/lib/constants/code';
+import { APPLE_DEVICES, BUILD_CONFIG, REGEX_PATTERNS, SPLASH_LINK } from '../src/lib/constants/pwa';
+import type { SplashDimensions } from '../src/lib/types';
+import { SplashOrientation } from '../src/lib/enums/splash.enums';
+
+let processed = false;
+
+const OUTPUT_DIR = process.env.LLAMA_UI_OUT_DIR ?? BUILD_CONFIG.OUTPUT_DIR;
+
+/**
+ * Generate iOS splash screen <link> tags from generated apple-splash-*.png files.
+ * Returns an array of HTML link strings to be injected into the page head.
+ */
+export function generateSplashScreenLinks(outDir: string): string[] {
+	const files = readdirSync(outDir).filter((f) => f.match(REGEX_PATTERNS.SPLASH_FILE));
+	if (files.length === 0) return [];
+
+	const dimMap = new Map<string, SplashDimensions>();
+	for (const [dims, spec] of Object.entries(APPLE_DEVICES)) {
+		const [w, h] = dims.split('x').map(Number);
+		// logical-point dimensions
+		dimMap.set(`${w}x${h}`, { deviceW: spec.width, deviceH: spec.height, dpr: spec.dpr });
+		dimMap.set(`${h}x${w}`, { deviceW: spec.width, deviceH: spec.height, dpr: spec.dpr });
+		// pixel dimensions (used by actual generated splash files)
+		dimMap.set(`${w * spec.dpr}x${h * spec.dpr}`, {
+			deviceW: spec.width,
+			deviceH: spec.height,
+			dpr: spec.dpr
+		});
+		dimMap.set(`${h * spec.dpr}x${w * spec.dpr}`, {
+			deviceW: spec.width,
+			deviceH: spec.height,
+			dpr: spec.dpr
+		});
+	}
+
+	const lightLinks: string[] = [];
+	const darkLinks: string[] = [];
+
+	for (const file of files) {
+		const match = file.match(REGEX_PATTERNS.SPLASH_FILE);
+		if (!match) continue;
+		const orientation = match[1] as SplashOrientation;
+		const isDark = !!match[2];
+		const pixelW = parseInt(match[3]);
+		const pixelH = parseInt(match[4]);
+
+		const key = `${pixelW}x${pixelH}`;
+		const spec = dimMap.get(key);
+		if (!spec) {
+			console.warn(`Unknown splash screen dimensions: ${key} (${file})`);
+			continue;
+		}
+
+		const { deviceW, deviceH, dpr } = spec;
+		const media = `screen and (device-width: ${deviceW}px) and (device-height: ${deviceH}px) and (-webkit-device-pixel-ratio: ${dpr}) and (orientation: ${orientation})`;
+		const href = `./${file}`;
+
+		if (isDark) {
+			darkLinks.push(
+				`${SPLASH_LINK.HTML} media="${media}${SPLASH_LINK.DARK_MEDIA_SUFFIX}" href="${href}">`
+			);
+		} else {
+			lightLinks.push(`${SPLASH_LINK.HTML} media="${media}" href="${href}">`);
+		}
+	}
+
+	return [...lightLinks, ...darkLinks];
+}
+
+export function splashScreenPlugin(): Plugin {
+	return {
+		name: 'llamacpp:splash-screen',
+		apply: 'build',
+		closeBundle() {
+			setTimeout(() => {
+				try {
+					if (processed) return;
+					processed = true;
+
+					const outDir = resolve(OUTPUT_DIR);
+					const indexPath = resolve(outDir, 'index.html');
+					if (!existsSync(indexPath)) return;
+
+					let content = readFileSync(indexPath, 'utf-8');
+
+					// Inject iOS splash screen <link> tags into <head>.
+					// The @vite-pwa/assets-generator generates apple-splash-*.png files;
+					// this scans them and creates the <link> tags SvelteKit needs.
+					const splashLinks = generateSplashScreenLinks(outDir);
+					if (splashLinks.length > 0) {
+						console.log(`Generated ${splashLinks.length} apple-splash link tags`);
+						const splashHtml = splashLinks.map((l) => TAB + TAB + l).join(NEWLINE);
+						content = content.replace(
+							REGEX_PATTERNS.HEAD_CLOSE,
+							splashHtml + NEWLINE + TAB + TAB + '</head>'
+						);
+					}
+
+					// Remove trailing \r from Windows line endings
+					content = content.replace(/\r/g, '');
+					content = BUILD_CONFIG.GUIDE_COMMENT + NEWLINE + content;
+
+					writeFileSync(indexPath, content, 'utf-8');
+					console.log('Updated index.html');
+				} catch (error) {
+					console.error('Failed to process build output:', error);
+				}
+			}, 100);
+		}
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/sources.cmake b/backend/llama.cpp/tools/ui/sources.cmake
new file mode 100644
index 0000000000000000000000000000000000000000..cfc5ea9c9e518d700a1812fb2e0a7beafca15065
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/sources.cmake
@@ -0,0 +1,16 @@
+# Inputs used to decide whether the npm build output is up-to-date.
+
+set(UI_SOURCE_GLOBS
+    src/*
+    static/*
+)
+
+set(UI_SOURCE_FILES
+    package.json
+    package-lock.json
+    src/.gitignore
+    vite.config.ts
+    svelte.config.js
+    tsconfig.json
+    scripts/vite-plugin-llama-cpp-build.ts
+)
diff --git a/backend/llama.cpp/tools/ui/src/.gitignore b/backend/llama.cpp/tools/ui/src/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..f9be8dfe090862e4ab26e294f310002228e3414c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/.gitignore
@@ -0,0 +1 @@
+!*
diff --git a/backend/llama.cpp/tools/ui/src/app.css b/backend/llama.cpp/tools/ui/src/app.css
new file mode 100644
index 0000000000000000000000000000000000000000..8c4056477dbf3fa070e3a09102d2f226e738469a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/app.css
@@ -0,0 +1,200 @@
+@import 'tailwindcss';
+@source '.';
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.95 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.95 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.875 0 0);
+	--input: oklch(0.92 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+	--code-background: oklch(0.985 0 0);
+	--code-foreground: oklch(0.145 0 0);
+	--font-mono:
+		ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
+		'Liberation Mono', Menlo, monospace;
+	--layer-popover: 1000000;
+
+	--chat-form-area-height: 8rem;
+	--chat-form-area-offset: 2rem;
+	--chat-form-padding-top: 6rem;
+	--max-message-height: max(24rem, min(80dvh, calc(100dvh - var(--chat-form-area-height) - 12rem)));
+}
+
+@media (min-width: 640px) {
+	:root {
+		--chat-form-area-height: 24rem;
+		--chat-form-area-offset: 12rem;
+		--chat-form-padding-top: 6rem;
+	}
+}
+
+.dark {
+	--background: oklch(0.16 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.29 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 30%);
+	--input: oklch(1 0 0 / 30%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.2 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+	--code-background: oklch(0.225 0 0);
+	--code-foreground: oklch(0.875 0 0);
+}
+
+@theme inline {
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+
+	body {
+		@apply bg-background text-foreground;
+		scrollbar-width: thin;
+		scrollbar-gutter: stable;
+	}
+
+	/* Global scrollbar styling - visible only on hover */
+	* {
+		scrollbar-width: thin;
+		scrollbar-color: transparent transparent;
+	}
+
+	*:hover {
+		scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+	}
+
+	*::-webkit-scrollbar {
+		width: 6px;
+		height: 6px;
+	}
+
+	*::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	*::-webkit-scrollbar-thumb {
+		background: transparent;
+		border-radius: 3px;
+		transition: background 0.2s ease;
+	}
+
+	*:hover::-webkit-scrollbar-thumb {
+		background: hsl(var(--muted-foreground) / 0.3);
+	}
+
+	*::-webkit-scrollbar-thumb:hover {
+		background: hsl(var(--muted-foreground) / 0.5);
+	}
+
+	:where(code, pre, kbd, samp) {
+		font-family: var(--font-mono);
+	}
+}
+
+@layer utilities {
+	.scrollbar-hide {
+		/* Hide scrollbar for Chrome, Safari and Opera */
+		&::-webkit-scrollbar {
+			display: none;
+		}
+		/* Hide scrollbar for IE, Edge and Firefox */
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+}
+
+.mermaidTooltip {
+	display: none !important;
+}
diff --git a/backend/llama.cpp/tools/ui/src/app.d.ts b/backend/llama.cpp/tools/ui/src/app.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5264e5cc4d72b8e00f83fc221b73a1e78a1a1656
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/app.d.ts
@@ -0,0 +1,146 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+
+import 'vite-plugin-pwa/pwa-assets';
+import 'vite-plugin-pwa/svelte';
+
+// Import chat types from dedicated module
+
+import type {
+	// API types
+	ApiChatCompletionRequest,
+	ApiChatCompletionResponse,
+	ApiChatCompletionStreamChunk,
+	ApiChatCompletionToolCall,
+	ApiChatCompletionToolCallDelta,
+	ApiChatMessageData,
+	ApiChatMessageContentPart,
+	ApiContextSizeError,
+	ApiErrorResponse,
+	ApiLlamaCppServerProps,
+	ApiModelDataEntry,
+	ApiModelLoadStage,
+	ApiModelsSseProgress,
+	ApiModelsSseData,
+	ApiModelsSseEvent,
+	ApiModelListResponse,
+	ApiProcessingState,
+	ApiRouterModelMeta,
+	ApiRouterModelsLoadRequest,
+	ApiRouterModelsLoadResponse,
+	ApiRouterModelsStatusRequest,
+	ApiRouterModelsStatusResponse,
+	ApiRouterModelsListResponse,
+	ApiRouterModelsUnloadRequest,
+	ApiRouterModelsUnloadResponse,
+	// Chat types
+	ChatAttachmentDisplayItem,
+	ChatMessageType,
+	ChatRole,
+	ChatUploadedFile,
+	ChatMessageSiblingInfo,
+	ChatMessagePromptProgress,
+	ChatMessageTimings,
+	// Database types
+	DatabaseConversation,
+	DatabaseMessage,
+	DatabaseMessageExtra,
+	DatabaseMessageExtraAudioFile,
+	DatabaseMessageExtraVideoFile,
+	DatabaseMessageExtraImageFile,
+	DatabaseMessageExtraTextFile,
+	DatabaseMessageExtraPdfFile,
+	DatabaseMessageExtraLegacyContext,
+	ExportedConversation,
+	ExportedConversations,
+	// Model types
+	ModelModalities,
+	ModelOption,
+	ModelLoadProgress,
+	// Settings types
+	SettingsChatServiceOptions,
+	SettingsConfigValue,
+	SettingsFieldConfig,
+	SettingsConfigType
+} from '$lib/types';
+
+import { ServerRole, ServerModelStatus, ModelModality } from '$lib/enums';
+
+declare global {
+	// namespace App {
+	// interface Error {}
+	// interface Locals {}
+	// interface PageData {}
+	// interface PageState {}
+	// interface Platform {}
+	// }
+
+	export {
+		// API types
+		ApiChatCompletionRequest,
+		ApiChatCompletionResponse,
+		ApiChatCompletionStreamChunk,
+		ApiChatCompletionToolCall,
+		ApiChatCompletionToolCallDelta,
+		ApiChatMessageData,
+		ApiChatMessageContentPart,
+		ApiContextSizeError,
+		ApiErrorResponse,
+		ApiLlamaCppServerProps,
+		ApiModelDataEntry,
+		ApiModelLoadStage,
+		ApiModelsSseProgress,
+		ApiModelsSseData,
+		ApiModelsSseEvent,
+		ApiModelListResponse,
+		ApiProcessingState,
+		ApiRouterModelMeta,
+		ApiRouterModelsLoadRequest,
+		ApiRouterModelsLoadResponse,
+		ApiRouterModelsStatusRequest,
+		ApiRouterModelsStatusResponse,
+		ApiRouterModelsListResponse,
+		ApiRouterModelsUnloadRequest,
+		ApiRouterModelsUnloadResponse,
+		// Chat types
+		ChatAttachmentDisplayItem,
+		ChatMessagePromptProgress,
+		ChatMessageSiblingInfo,
+		ChatMessageTimings,
+		ChatMessageType,
+		ChatRole,
+		ChatUploadedFile,
+		// Database types
+		DatabaseConversation,
+		DatabaseMessage,
+		DatabaseMessageExtra,
+		DatabaseMessageExtraAudioFile,
+		DatabaseMessageExtraVideoFile,
+		DatabaseMessageExtraImageFile,
+		DatabaseMessageExtraTextFile,
+		DatabaseMessageExtraPdfFile,
+		DatabaseMessageExtraLegacyContext,
+		ExportedConversation,
+		ExportedConversations,
+		// Enum types
+		ModelModality,
+		ServerRole,
+		ServerModelStatus,
+		// Model types
+		ModelModalities,
+		ModelOption,
+		ModelLoadProgress,
+		// Settings types
+		SettingsChatServiceOptions,
+		SettingsConfigValue,
+		SettingsFieldConfig,
+		SettingsConfigType
+	};
+}
+
+declare global {
+	interface Window {
+		idxThemeStyle?: number;
+		idxCodeBlock?: number;
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/src/app.html b/backend/llama.cpp/tools/ui/src/app.html
new file mode 100644
index 0000000000000000000000000000000000000000..e1de226dcb81aeda17bfa00dd525693cbe66f5a5
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/app.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="favicon.ico" sizes="48x48" />
+		<link rel="icon" href="favicon.svg" sizes="any" type="image/svg+xml" />
+
+		<link rel="apple-touch-icon" href="apple-touch-icon-180x180.png" />
+
+		<link rel="manifest" href="./manifest.webmanifest" />
+
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, interactive-widget=resizes-content"
+		/>
+		%sveltekit.head%
+	</head>
+
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/backend/llama.cpp/tools/ui/src/lib/actions/fade-in-view.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/actions/fade-in-view.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9a5918131aa90305239b005c72e3263bb73eeaf1
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/actions/fade-in-view.svelte.ts
@@ -0,0 +1,49 @@
+import { isElementInViewport } from '$lib/utils/viewport';
+
+/**
+ * Svelte action that fades in an element when it enters the viewport.
+ * Uses IntersectionObserver for efficient viewport detection.
+ *
+ * If skipIfVisible is set and the element is already visible in the viewport
+ * when the action attaches (e.g. a markdown block promoted from unstable
+ * during streaming), the fade is skipped entirely to avoid a flash.
+ */
+export function fadeInView(
+	node: HTMLElement,
+	options: { duration?: number; y?: number; delay?: number; skipIfVisible?: boolean } = {}
+) {
+	const { duration = 300, y = 0, delay = 0, skipIfVisible = false } = options;
+
+	if (skipIfVisible && isElementInViewport(node)) {
+		return;
+	}
+
+	node.style.opacity = '0';
+	node.style.transform = `translateY(${y}px)`;
+	node.style.transition = `opacity ${duration}ms ease-out, transform ${duration}ms ease-out`;
+
+	$effect(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (entry.isIntersecting) {
+						setTimeout(() => {
+							requestAnimationFrame(() => {
+								node.style.opacity = '1';
+								node.style.transform = 'translateY(0)';
+							});
+						}, delay);
+						observer.disconnect();
+					}
+				}
+			},
+			{ threshold: 0.05 }
+		);
+
+		observer.observe(node);
+
+		return () => {
+			observer.disconnect();
+		};
+	});
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/assets/logo.svg b/backend/llama.cpp/tools/ui/src/lib/assets/logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..05424790afea78bd2cafd36e4bde5e52748b839d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/assets/logo.svg
@@ -0,0 +1,7 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M244.95 8C215.233 8 187.774 23.8591 172.923 49.5999L95.6009 183.625C60.2162 244.959 104.481 321.6 175.29 321.6H208L316.977 132.708C348.959 77.2719 308.95 8 244.95 8ZM208 321.6H351.947C415.982 321.6 456.013 390.91 424.013 446.377C409.155 472.132 381.681 488 351.947 488H271.29C200.481 488 156.216 411.359 191.601 350.026L208 321.6Z" fill="currentColor"/>
+    <path d="M208 321.6H16L106.462 164.8L208 321.6Z" fill="currentColor"/>
+    <path d="M388.923 8L208 321.6L253.6 8H388.923Z" fill="currentColor"/>
+    <path d="M304 488H112L202.462 331.2L304 488Z" fill="currentColor"/>
+    <path d="M496 321.6H208L419.399 454.4L496 321.6Z" fill="currentColor"/>
+</svg>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/SKILL.md b/backend/llama.cpp/tools/ui/src/lib/components/app/SKILL.md
new file mode 100644
index 0000000000000000000000000000000000000000..7453954abb18f7fb098d9001cc25e0c97e0979c6
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/SKILL.md
@@ -0,0 +1,11 @@
+---
+name: app
+description: Opinionated app components building on top of ./ui primitives
+---
+
+- Can include business logic and state management
+- Can include data fetching and caching logic
+- Should use original spelling for HTML-native events and `camelCase` for custom events
+- Props and markup attributes should be listed alphabetically
+- Use JS Objects and Arrays for CSS classes and styles when they are dynamic
+- Whenever there can be repetition in the component's markup, if it's too small to be decoupled as a separate component — use Svelte 5's `{#snippet}` + `{@render}`
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/actions/ActionIcon.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/actions/ActionIcon.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..8a86557bb98d35d796af90ecc2b48c8b57776893
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/actions/ActionIcon.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { Button, type ButtonVariant, type ButtonSize } from '$lib/components/ui/button';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import type { Component } from 'svelte';
+	import { TooltipSide } from '$lib/enums';
+
+	interface Props {
+		ariaLabel?: string;
+		class?: string;
+		disabled?: boolean;
+		href?: string;
+		icon: Component;
+		iconSize?: string;
+		onclick?: (e?: MouseEvent) => void;
+		size?: ButtonSize;
+		stopPropagationOnClick?: boolean;
+		tooltip?: string;
+		variant?: ButtonVariant;
+		tooltipSide?: TooltipSide;
+	}
+
+	let {
+		icon,
+		tooltip,
+		variant = 'ghost',
+		href = '',
+		size = 'sm',
+		class: className = '',
+		disabled = false,
+		iconSize = 'h-3 w-3',
+		tooltipSide = TooltipSide.TOP,
+		stopPropagationOnClick = false,
+		onclick,
+		ariaLabel
+	}: Props = $props();
+
+	let innerWidth = $state(0);
+	const showTooltip = $derived(!!tooltip && innerWidth > 768);
+</script>
+
+{#snippet button(props = {})}
+	<Button
+		{...props}
+		{href}
+		{variant}
+		{size}
+		{disabled}
+		onclick={(e: MouseEvent) => {
+			if (stopPropagationOnClick) e.stopPropagation();
+
+			onclick?.(e);
+		}}
+		class="h-6 w-6 p-0 {className} flex hover:bg-transparent data-[state=open]:bg-transparent!"
+		aria-label={ariaLabel || tooltip}
+	>
+		{#if icon}
+			{@const IconComponent = icon}
+
+			<IconComponent class={iconSize} />
+		{/if}
+	</Button>
+{/snippet}
+
+{#if showTooltip}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<!-- prevent another nested button element -->
+			{#snippet child({ props })}
+				{@render button(props)}
+			{/snippet}
+		</Tooltip.Trigger>
+
+		<Tooltip.Content side={tooltipSide}>
+			<p>{tooltip}</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+{:else}
+	{@render button({ href })}
+{/if}
+
+<svelte:window bind:innerWidth />
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/actions/ActionIconCopyToClipboard.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/actions/ActionIconCopyToClipboard.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..999f0cba9e785067df3ecc0c12b5f184f936592a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/actions/ActionIconCopyToClipboard.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Copy } from '@lucide/svelte';
+	import { copyToClipboard } from '$lib/utils';
+	import ActionIcon from './ActionIcon.svelte';
+
+	export let ariaLabel: string = 'Copy to clipboard';
+	export let canCopy: boolean = true;
+	export let text: string;
+</script>
+
+<ActionIcon
+	icon={Copy}
+	tooltip={ariaLabel}
+	iconSize="h-4 w-4"
+	disabled={!canCopy}
+	onclick={() => canCopy && copyToClipboard(text)}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/actions/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/actions/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4bb2a58d66728a9bb831725fff7a78a55542cfaa
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/actions/index.ts
@@ -0,0 +1,13 @@
+/**
+ *
+ * ACTIONS
+ *
+ * Small interactive components for user actions.
+ *
+ */
+
+/** Styled icon button for action triggers with tooltip. */
+export { default as ActionIcon } from './ActionIcon.svelte';
+
+/** Copy-to-clipboard icon button with clipboard logic. */
+export { default as ActionIconCopyToClipboard } from './ActionIconCopyToClipboard.svelte';
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/badges/BadgeInfo.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/badges/BadgeInfo.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..c87c94bc4770012ea414be65c503dd37ca678575
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/badges/BadgeInfo.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLButtonAttributes {
+		children: Snippet;
+		class?: string;
+		icon?: Snippet;
+	}
+
+	let { children, class: className = '', icon, ...rest }: Props = $props();
+</script>
+
+<button
+	{...rest}
+	class={[
+		'inline-flex cursor-pointer items-center gap-1 rounded-sm bg-muted-foreground/15 px-1.5 py-0.75',
+		className
+	]}
+>
+	{#if icon}
+		{@render icon()}
+	{/if}
+
+	{@render children()}
+</button>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/badges/BadgesModality.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/badges/BadgesModality.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..d87184ea9bc8cef5ef9d4b359408604e720af5a9
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/badges/BadgesModality.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Eye, Mic, Video } from '@lucide/svelte';
+	import { ModelModality } from '$lib/enums';
+
+	interface Props {
+		modalities: ModelModality[];
+		class?: string;
+	}
+
+	let { modalities, class: className = '' }: Props = $props();
+</script>
+
+{#each modalities as modality (modality)}
+	{#if modality === ModelModality.VISION || modality === ModelModality.AUDIO || modality === ModelModality.VIDEO}
+		<span
+			class={[
+				'inline-flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs font-medium',
+				className
+			]}
+		>
+			{#if modality === ModelModality.VISION}
+				<Eye class="h-3 w-3" />
+
+				Vision (Image)
+			{:else if modality === ModelModality.VIDEO}
+				<Video class="h-3 w-3" />
+
+				Vision (Video)
+			{:else}
+				<Mic class="h-3 w-3" />
+
+				Audio
+			{/if}
+		</span>
+	{/if}
+{/each}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/badges/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/badges/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f8098056f287e9597749fa59aaea94e0aba1b8f6
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/badges/index.ts
@@ -0,0 +1,13 @@
+/**
+ *
+ * BADGES & INDICATORS
+ *
+ * Small visual indicators for status and metadata.
+ *
+ */
+
+/** Generic info badge with optional tooltip and click handler. */
+export { default as BadgeInfo } from './BadgeInfo.svelte';
+
+/** Badge indicating model modality (vision, audio, tools). */
+export { default as BadgesModality } from './BadgesModality.svelte';
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsList.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsList.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..e74bd8456a5484b83af6ad7e95389c71a6605bc6
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsList.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+	import {
+		ChatAttachmentsListItem,
+		DialogChatAttachmentsPreview,
+		DialogMcpResourcePreview,
+		HorizontalScrollCarousel
+	} from '$lib/components/app';
+	import type { DatabaseMessageExtraMcpResource } from '$lib/types';
+	import { getAttachmentDisplayItems, isMcpPrompt, isMcpResource } from '$lib/utils';
+
+	interface Props {
+		class?: string;
+		style?: string;
+		// For ChatMessage - stored attachments
+		attachments?: DatabaseMessageExtra[];
+		readonly?: boolean;
+		// For ChatForm - pending uploads
+		onFileRemove?: (fileId: string) => void;
+		uploadedFiles?: ChatUploadedFile[];
+		// Image size customization
+		imageClass?: string;
+		imageHeight?: string;
+		imageWidth?: string;
+		// Limit display to single row with "+ X more" button
+		limitToSingleRow?: boolean;
+		// For vision modality check
+		activeModelId?: string;
+	}
+
+	let {
+		class: className = '',
+		style = '',
+		attachments = [],
+		readonly = false,
+		onFileRemove,
+		uploadedFiles = $bindable([]),
+		// Default to small size for form previews
+		imageClass = '',
+		imageHeight = 'h-24',
+		imageWidth = 'w-auto',
+		limitToSingleRow = false,
+		activeModelId
+	}: Props = $props();
+
+	let carouselRef: HorizontalScrollCarousel | undefined = $state();
+	let mcpResourcePreviewOpen = $state(false);
+	let mcpResourcePreviewExtra = $state<DatabaseMessageExtraMcpResource | null>(null);
+	let previewFocusIndex = $state(0);
+	let viewAllDialogOpen = $state(false);
+
+	let displayItems = $derived(getAttachmentDisplayItems({ uploadedFiles, attachments }));
+
+	function openPreview(item: ChatAttachmentDisplayItem, event?: MouseEvent) {
+		event?.stopPropagation();
+		event?.preventDefault();
+
+		// Find the index of the clicked item among non-MCP attachments
+		const nonMcpItems = displayItems.filter((i) => !isMcpPrompt(i) && !isMcpResource(i));
+		const index = nonMcpItems.findIndex((i) => i.id === item.id);
+
+		previewFocusIndex = index >= 0 ? index : 0;
+		viewAllDialogOpen = true;
+	}
+
+	function openMcpResourcePreview(extra: DatabaseMessageExtraMcpResource) {
+		mcpResourcePreviewExtra = extra;
+		mcpResourcePreviewOpen = true;
+	}
+
+	$effect(() => {
+		if (carouselRef && displayItems.length) {
+			carouselRef.resetScroll();
+		}
+	});
+</script>
+
+{#snippet attachmentitem(item: ChatAttachmentDisplayItem)}
+	<ChatAttachmentsListItem
+		{imageClass}
+		{imageHeight}
+		{imageWidth}
+		{item}
+		{limitToSingleRow}
+		{onFileRemove}
+		onMcpResourcePreview={openMcpResourcePreview}
+		onPreview={(i: ChatAttachmentDisplayItem, event?: MouseEvent) => openPreview(i, event)}
+		{readonly}
+	/>
+{/snippet}
+
+{#if displayItems.length > 0}
+	<div class={className} {style}>
+		{#if limitToSingleRow}
+			<HorizontalScrollCarousel bind:this={carouselRef}>
+				{#each displayItems as item (item.id)}
+					{@render attachmentitem(item)}
+				{/each}
+			</HorizontalScrollCarousel>
+		{:else}
+			<div class="flex flex-wrap items-start justify-end gap-3">
+				{#each displayItems as item (item.id)}
+					{@render attachmentitem(item)}
+				{/each}
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<DialogChatAttachmentsPreview
+	{activeModelId}
+	{attachments}
+	bind:open={viewAllDialogOpen}
+	{previewFocusIndex}
+	{uploadedFiles}
+/>
+
+{#if mcpResourcePreviewExtra}
+	<DialogMcpResourcePreview extra={mcpResourcePreviewExtra} bind:open={mcpResourcePreviewOpen} />
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItem.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItem.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..143621cd9daaa5f9526cc73970bded52e5959431
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItem.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+	import {
+		ChatAttachmentsListItemMcpPrompt,
+		ChatAttachmentsListItemMcpResource,
+		ChatAttachmentsListItemThumbnailImage,
+		ChatAttachmentsListItemThumbnailFile
+	} from '$lib/components/app';
+	import { AttachmentType } from '$lib/enums';
+	import type {
+		ChatAttachmentDisplayItem,
+		DatabaseMessageExtraMcpPrompt,
+		DatabaseMessageExtraMcpResource,
+		MCPResourceAttachment
+	} from '$lib/types';
+	import { isMcpPrompt, isMcpResource, isPdfFile } from '$lib/utils';
+
+	interface Props {
+		class?: string;
+		imageClass?: string;
+		imageHeight?: string;
+		imageWidth?: string;
+		item: ChatAttachmentDisplayItem;
+		limitToSingleRow?: boolean;
+		onFileRemove?: (fileId: string) => void;
+		onMcpResourcePreview?: (extra: DatabaseMessageExtraMcpResource) => void;
+		onPreview?: (item: ChatAttachmentDisplayItem) => void;
+		readonly?: boolean;
+	}
+
+	let {
+		class: className = '',
+		imageClass = '',
+		imageHeight = 'h-24',
+		imageWidth = 'w-auto',
+		item,
+		limitToSingleRow = false,
+		onFileRemove,
+		onMcpResourcePreview,
+		onPreview,
+		readonly = false
+	}: Props = $props();
+
+	const scrollClasses = $derived(limitToSingleRow ? 'first:ml-4 last:mr-4' : '');
+
+	function toMcpResourceAttachment(
+		extra: DatabaseMessageExtraMcpResource,
+		id: string
+	): MCPResourceAttachment {
+		return {
+			id,
+			resource: {
+				uri: extra.uri,
+				name: extra.name,
+				title: extra.name,
+				serverName: extra.serverName
+			}
+		};
+	}
+</script>
+
+{#if isMcpPrompt(item)}
+	{@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}
+		<ChatAttachmentsListItemMcpPrompt
+			class="max-w-[300px] min-w-[200px] flex-shrink-0 {className} {scrollClasses}"
+			prompt={mcpPrompt}
+			{readonly}
+			isLoading={item.isLoading}
+			loadError={item.loadError}
+			onRemove={onFileRemove ? () => onFileRemove(item.id) : undefined}
+		/>
+	{/if}
+{:else if isMcpResource(item)}
+	{@const mcpResource = item.attachment as DatabaseMessageExtraMcpResource}
+
+	<ChatAttachmentsListItemMcpResource
+		class="flex-shrink-0 {className} {scrollClasses}"
+		attachment={toMcpResourceAttachment(mcpResource, item.id)}
+		onclick={() => onMcpResourcePreview?.(mcpResource)}
+	/>
+{:else if item.isImage && item.preview}
+	<ChatAttachmentsListItemThumbnailImage
+		class="flex-shrink-0 cursor-pointer {className} {scrollClasses}"
+		id={item.id}
+		name={item.name}
+		preview={item.preview}
+		{readonly}
+		onRemove={onFileRemove}
+		height={imageHeight}
+		width={imageWidth}
+		{imageClass}
+		onclick={() => onPreview?.(item)}
+	/>
+{:else if isPdfFile(item.attachment, item.uploadedFile)}
+	<ChatAttachmentsListItemThumbnailFile
+		class="flex-shrink-0 cursor-pointer {className} {scrollClasses}"
+		id={item.id}
+		name={item.name}
+		size={item.size}
+		{readonly}
+		onRemove={onFileRemove}
+		textContent={item.textContent}
+		attachment={item.attachment}
+		uploadedFile={item.uploadedFile}
+		onclick={() => onPreview?.(item)}
+	/>
+{:else}
+	<ChatAttachmentsListItemThumbnailFile
+		class="flex-shrink-0 cursor-pointer {className} {scrollClasses}"
+		id={item.id}
+		name={item.name}
+		size={item.size}
+		{readonly}
+		onRemove={onFileRemove}
+		textContent={item.textContent}
+		attachment={item.attachment}
+		uploadedFile={item.uploadedFile}
+		onclick={() => onPreview?.(item)}
+	/>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemMcpPrompt.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemMcpPrompt.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..636e93f221111a1fab2b2f2e5c490248c1cb50d4
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemMcpPrompt.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { ChatMessageMcpPromptContent, ActionIcon } from '$lib/components/app';
+	import { X } from '@lucide/svelte';
+	import type { DatabaseMessageExtraMcpPrompt } from '$lib/types';
+	import { McpPromptVariant } from '$lib/enums';
+
+	interface Props {
+		class?: string;
+		isLoading?: boolean;
+		loadError?: string;
+		onRemove?: () => void;
+		prompt: DatabaseMessageExtraMcpPrompt;
+		readonly?: boolean;
+	}
+
+	let {
+		class: className = '',
+		isLoading = false,
+		loadError,
+		onRemove,
+		prompt,
+		readonly = false
+	}: Props = $props();
+</script>
+
+<div class="group relative {className}">
+	<ChatMessageMcpPromptContent
+		{isLoading}
+		{loadError}
+		{prompt}
+		variant={McpPromptVariant.ATTACHMENT}
+	/>
+
+	{#if !readonly && onRemove}
+		<div
+			class="absolute top-10 right-2 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100"
+		>
+			<ActionIcon icon={X} tooltip="Remove" stopPropagationOnClick onclick={() => onRemove?.()} />
+		</div>
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemMcpResource.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemMcpResource.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..6e1f639fa2d3decc9c2cf308b310daee89ae8e68
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemMcpResource.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { Loader2, AlertCircle } from '@lucide/svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import type { MCPResourceAttachment } from '$lib/types';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { ActionIcon } from '$lib/components/app';
+	import { X } from '@lucide/svelte';
+	import { getResourceIcon, getResourceDisplayName } from '$lib/utils';
+
+	interface Props {
+		attachment: MCPResourceAttachment;
+		class?: string;
+		onclick?: () => void;
+		onRemove?: (attachmentId: string) => void;
+	}
+
+	let { attachment, class: className, onclick, onRemove }: Props = $props();
+
+	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));
+
+	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';
+	}
+</script>
+
+<Tooltip.Root>
+	<Tooltip.Trigger>
+		<button
+			class={[
+				'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
+			]}
+			disabled={!onclick}
+			{onclick}
+			type="button"
+		>
+			{#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">
+				{getResourceDisplayName(attachment.resource)}
+			</span>
+
+			{#if onRemove}
+				<ActionIcon
+					class="-my-2 -mr-1.5 bg-transparent"
+					icon={X}
+					iconSize="h-2 w-2"
+					onclick={() => onRemove?.(attachment.id)}
+					stopPropagationOnClick
+					tooltip="Remove"
+				/>
+			{/if}
+		</button>
+	</Tooltip.Trigger>
+
+	<Tooltip.Content>
+		<div class="flex items-center gap-1 text-xs">
+			{#if favicon}
+				<img
+					alt={attachment.resource.serverName}
+					class="h-3 w-3 shrink-0 rounded-sm"
+					onerror={(e) => {
+						(e.currentTarget as HTMLImageElement).style.display = 'none';
+					}}
+					src={favicon}
+				/>
+			{/if}
+
+			<span class="truncate">
+				{serverName}
+			</span>
+		</div>
+	</Tooltip.Content>
+</Tooltip.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemThumbnailFile.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemThumbnailFile.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..2e824ebd4164703e1b8d6c45da08b88954c13708
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemThumbnailFile.svelte
@@ -0,0 +1,186 @@
+<script lang="ts">
+	import { X, Music, Video } from '@lucide/svelte';
+	import {
+		formatFileSize,
+		getFileTypeLabel,
+		getPreviewText,
+		isPdfFile,
+		isAudioFile,
+		isVideoFile,
+		isTextFile
+	} from '$lib/utils';
+	import { ActionIcon } from '$lib/components/app';
+	import { AttachmentType } from '$lib/enums';
+
+	interface Props {
+		attachment?: DatabaseMessageExtra;
+		class?: string;
+		id: string;
+		onclick?: (event: MouseEvent) => void;
+		onRemove?: (id: string) => void;
+		name: string;
+		readonly?: boolean;
+		size?: number;
+		textContent?: string;
+		// Either uploaded file or stored attachment
+		uploadedFile?: ChatUploadedFile;
+	}
+
+	let {
+		attachment,
+		class: className = '',
+		id,
+		onclick,
+		onRemove,
+		name,
+		readonly = false,
+		size,
+		textContent,
+		uploadedFile
+	}: Props = $props();
+
+	let isPdf = $derived(isPdfFile(attachment, uploadedFile));
+	let isAudio = $derived(isAudioFile(attachment, uploadedFile));
+	let isVideo = $derived(isVideoFile(attachment, uploadedFile));
+	let isPdfWithContent = $derived(isPdf && !!textContent);
+
+	let isText = $derived(isTextFile(attachment, uploadedFile));
+	let isTextWithContent = $derived(isText && !!textContent);
+
+	let fileTypeLabel = $derived.by(() => {
+		if (uploadedFile?.type) {
+			return getFileTypeLabel(uploadedFile.type);
+		}
+
+		if (attachment) {
+			if ('mimeType' in attachment && attachment.mimeType) {
+				return getFileTypeLabel(attachment.mimeType);
+			}
+
+			if (attachment.type) {
+				return getFileTypeLabel(attachment.type);
+			}
+		}
+
+		return getFileTypeLabel(name);
+	});
+
+	let pdfProcessingMode = $derived.by(() => {
+		if (attachment?.type === AttachmentType.PDF) {
+			const pdfAttachment = attachment as DatabaseMessageExtraPdfFile;
+
+			return pdfAttachment.processedAsImages ? 'Sent as Image' : 'Sent as Text';
+		}
+
+		return null;
+	});
+</script>
+
+{#snippet textPreview(content: string)}
+	<div class="relative">
+		<div
+			class="font-mono text-xs leading-relaxed break-words whitespace-pre-wrap text-muted-foreground {!readonly
+				? 'max-h-3rem line-height-1.2'
+				: ''}"
+		>
+			{getPreviewText(content)}
+		</div>
+
+		{#if content.length > 150}
+			<div
+				class="pointer-events-none absolute right-0 bottom-0 left-0 h-4 bg-gradient-to-t from-muted to-transparent {readonly
+					? 'h-6'
+					: ''}"
+			></div>
+		{/if}
+	</div>
+{/snippet}
+
+{#snippet removeButton()}
+	<div
+		class="absolute top-2 right-2 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100"
+	>
+		<ActionIcon icon={X} tooltip="Remove" stopPropagationOnClick onclick={() => onRemove?.(id)} />
+	</div>
+{/snippet}
+
+{#snippet fileIcon()}
+	<div
+		class="flex h-8 w-8 items-center justify-center rounded bg-primary/10 text-xs font-medium text-primary"
+	>
+		{#if isAudio}
+			<Music class="h-4 w-4 text-white/70" />
+		{:else if isVideo}
+			<Video class="h-4 w-4 text-white/70" />
+		{:else}
+			{fileTypeLabel}
+		{/if}
+	</div>
+{/snippet}
+
+{#snippet info(text: string | undefined)}
+	{#if text}
+		<span class="text-xs text-muted-foreground">{text}</span>
+	{/if}
+{/snippet}
+
+{#if isTextWithContent || isPdfWithContent}
+	<button
+		aria-label={readonly ? `Preview ${name}` : undefined}
+		class="rounded-lg border border-border bg-muted p-3 {className} cursor-pointer {readonly
+			? 'w-full max-w-2xl transition-shadow hover:shadow-md'
+			: `group relative text-left ${textContent ? 'max-h-24 max-w-72' : 'max-w-36'}`} overflow-hidden"
+		{onclick}
+		type="button"
+	>
+		{#if !readonly}
+			{@render removeButton()}
+		{/if}
+
+		<div class={[!readonly && 'pr-8', 'overflow-hidden']}>
+			{#if readonly}
+				<div class="flex items-start gap-3">
+					<div class="flex min-w-0 flex-1 flex-col items-start text-left">
+						<span class="w-full truncate text-sm font-medium text-foreground">{name}</span>
+
+						{@render info(pdfProcessingMode || (size ? formatFileSize(size) : undefined))}
+
+						{#if textContent}
+							{@render textPreview(textContent)}
+						{/if}
+					</div>
+				</div>
+			{:else}
+				<span class="mb-3 block truncate text-sm font-medium text-foreground">{name}</span>
+
+				{#if textContent}
+					{@render textPreview(textContent)}
+				{/if}
+			{/if}
+		</div>
+	</button>
+{:else}
+	<button
+		class="group flex items-center gap-3 rounded-lg border border-border bg-muted p-3 {className} relative"
+		{onclick}
+		type="button"
+	>
+		{@render fileIcon()}
+
+		<div class="flex flex-col items-start gap-0.5">
+			<span
+				class="max-w-24 truncate text-sm font-medium text-foreground {readonly
+					? ''
+					: 'group-hover:pr-6'} md:max-w-32"
+			>
+				{name}
+			</span>
+
+			{@render info(pdfProcessingMode || (size ? formatFileSize(size) : undefined))}
+		</div>
+
+		{#if !readonly}
+			{@render removeButton()}
+		{/if}
+	</button>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemThumbnailImage.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemThumbnailImage.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..de080f5b779120242f11b0b21bad4b7908305881
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemThumbnailImage.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { ActionIcon } from '$lib/components/app';
+	import { X } from '@lucide/svelte';
+
+	interface Props {
+		class?: string;
+		height?: string;
+		id: string;
+		imageClass?: string;
+		onclick?: (event?: MouseEvent) => void;
+		onRemove?: (id: string) => void;
+		name: string;
+		preview: string;
+		readonly?: boolean;
+		width?: string;
+	}
+
+	let {
+		class: className = '',
+		height = 'h-16',
+		id,
+		imageClass = '',
+		onclick,
+		onRemove,
+		name,
+		preview,
+		readonly = false,
+		width = 'w-auto'
+	}: Props = $props();
+</script>
+
+{#snippet image()}
+	<img src={preview} alt={name} class="{height} {width} cursor-pointer object-cover {imageClass}" />
+{/snippet}
+
+<div
+	class="group relative overflow-hidden rounded-lg bg-muted shadow-lg dark:border dark:border-muted {className}"
+>
+	{#if onclick}
+		<button
+			aria-label="Preview {name}"
+			class="block h-full w-full rounded-lg focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none"
+			{onclick}
+			type="button"
+		>
+			{@render image()}
+		</button>
+	{:else}
+		{@render image()}
+	{/if}
+
+	{#if !readonly}
+		<div
+			class="absolute top-1 right-1 flex items-center justify-center opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100"
+		>
+			<ActionIcon
+				class="text-white"
+				icon={X}
+				onclick={() => onRemove?.(id)}
+				stopPropagationOnClick
+				tooltip="Remove"
+			/>
+		</div>
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..cba323f2c370b1e593d570682479e4d8e12b822d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview.svelte
@@ -0,0 +1,212 @@
+<script lang="ts">
+	import {
+		ChatAttachmentsPreviewCurrentItem,
+		ChatAttachmentsPreviewFileInfo,
+		ChatAttachmentsPreviewNavButtons,
+		ChatAttachmentsPreviewThumbnailStrip
+	} from '$lib/components/app';
+	import { modelsStore } from '$lib/stores/models.svelte';
+	import {
+		createBase64DataUrl,
+		formatFileSize,
+		getAttachmentDisplayItems,
+		getLanguageFromFilename,
+		isAudioFile,
+		isVideoFile,
+		isImageFile,
+		isMcpPrompt,
+		isMcpResource,
+		isPdfFile,
+		isTextFile
+	} from '$lib/utils';
+
+	interface PreviewItem {
+		id: string;
+		name: string;
+		size?: number;
+		preview?: string;
+		uploadedFile?: ChatUploadedFile;
+		attachment?: DatabaseMessageExtra;
+		textContent?: string;
+		isImage: boolean;
+		isAudio: boolean;
+		isVideo: boolean;
+	}
+
+	interface Props {
+		uploadedFiles?: ChatUploadedFile[];
+		attachments?: DatabaseMessageExtra[];
+		activeModelId?: string;
+		class?: string;
+		previewFocusIndex?: number;
+	}
+
+	let {
+		uploadedFiles = [],
+		attachments = [],
+		activeModelId,
+		class: className = '',
+		previewFocusIndex = 0
+	}: Props = $props();
+
+	let allItems = $derived(
+		getAttachmentDisplayItems({ uploadedFiles, attachments })
+			.filter((item) => !isMcpPrompt(item) && !isMcpResource(item))
+			.map(
+				(item): PreviewItem => ({
+					...item,
+					isImage: isImageFile(item.attachment, item.uploadedFile),
+					isAudio: isAudioFile(item.attachment, item.uploadedFile),
+					isVideo: isVideoFile(item.attachment, item.uploadedFile)
+				})
+			)
+	);
+
+	let currentIndex = $state(0);
+
+	$effect(() => {
+		if (previewFocusIndex >= 0 && previewFocusIndex < allItems.length) {
+			currentIndex = previewFocusIndex;
+		}
+	});
+
+	$effect(() => {
+		const handler = (e: Event) => {
+			const delta = (e as CustomEvent).detail;
+
+			if (delta < 0) {
+				currentIndex = currentIndex > 0 ? currentIndex - 1 : allItems.length - 1;
+			} else {
+				currentIndex = currentIndex < allItems.length - 1 ? currentIndex + 1 : 0;
+			}
+		};
+
+		document.addEventListener('chat-attachments-nav', handler);
+
+		return () => document.removeEventListener('chat-attachments-nav', handler);
+	});
+
+	$effect(() => {
+		const index = currentIndex;
+		setTimeout(() => {
+			const thumbnail = document.querySelector(`[data-thumbnail-index="${index}"]`);
+
+			thumbnail?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+		}, 0);
+	});
+
+	let currentItem = $derived(allItems[currentIndex] ?? null);
+	let displayName = $derived(
+		currentItem?.name ||
+			currentItem?.uploadedFile?.name ||
+			currentItem?.attachment?.name ||
+			'Unknown File'
+	);
+	let isAudio = $derived(
+		currentItem ? isAudioFile(currentItem.attachment, currentItem.uploadedFile) : false
+	);
+	let isVideo = $derived(
+		currentItem ? isVideoFile(currentItem.attachment, currentItem.uploadedFile) : false
+	);
+	let isImage = $derived(
+		currentItem ? isImageFile(currentItem.attachment, currentItem.uploadedFile) : false
+	);
+	let isPdf = $derived(
+		currentItem ? isPdfFile(currentItem.attachment, currentItem.uploadedFile) : false
+	);
+	let isText = $derived(
+		currentItem ? isTextFile(currentItem.attachment, currentItem.uploadedFile) : false
+	);
+
+	let displayPreview = $derived(
+		currentItem?.uploadedFile?.preview ||
+			(isImage && currentItem?.attachment && 'base64Url' in currentItem.attachment
+				? currentItem.attachment.base64Url
+				: currentItem?.preview)
+	);
+
+	let displayTextContent = $derived(
+		currentItem?.uploadedFile?.textContent ||
+			(currentItem?.attachment && 'content' in currentItem.attachment
+				? currentItem.attachment.content
+				: currentItem?.textContent)
+	);
+
+	let language = $derived(getLanguageFromFilename(displayName));
+
+	let fileSize = $derived(currentItem?.size ? formatFileSize(currentItem.size) : '');
+
+	let hasVisionModality = $derived(
+		currentItem && activeModelId ? modelsStore.modelSupportsVision(activeModelId) : false
+	);
+
+	let audioSrc = $derived(
+		isAudio && currentItem
+			? (currentItem.uploadedFile?.preview ??
+					(currentItem.attachment &&
+					'mimeType' in currentItem.attachment &&
+					'base64Data' in currentItem.attachment
+						? createBase64DataUrl(
+								currentItem.attachment.mimeType,
+								currentItem.attachment.base64Data
+							)
+						: null))
+			: null
+	);
+
+	let videoSrc = $derived(
+		isVideo && currentItem
+			? (currentItem.uploadedFile?.preview ??
+					(currentItem.attachment &&
+					'mimeType' in currentItem.attachment &&
+					'base64Data' in currentItem.attachment
+						? createBase64DataUrl(
+								currentItem.attachment.mimeType,
+								currentItem.attachment.base64Data
+							)
+						: null))
+			: null
+	);
+
+	export function prev() {
+		currentIndex = currentIndex > 0 ? currentIndex - 1 : allItems.length - 1;
+	}
+
+	export function next() {
+		currentIndex = currentIndex < allItems.length - 1 ? currentIndex + 1 : 0;
+	}
+
+	function onNavigate(index: number) {
+		currentIndex = index;
+	}
+</script>
+
+<div class="{className} flex flex-col text-white">
+	<div class="relative flex min-h-0 flex-1 items-center justify-center overflow-hidden">
+		<ChatAttachmentsPreviewNavButtons onPrev={prev} onNext={next} show={allItems.length > 1} />
+
+		<div class="flex h-full w-full flex-col items-center justify-start overflow-auto py-4">
+			{#if currentItem}
+				<ChatAttachmentsPreviewFileInfo {displayName} {fileSize} />
+
+				<ChatAttachmentsPreviewCurrentItem
+					{currentItem}
+					{isImage}
+					{isAudio}
+					{isVideo}
+					{isPdf}
+					{isText}
+					{displayPreview}
+					{displayTextContent}
+					{audioSrc}
+					{videoSrc}
+					{language}
+					{hasVisionModality}
+					{activeModelId}
+				/>
+			{/if}
+
+			<ChatAttachmentsPreviewThumbnailStrip items={allItems} {currentIndex} {onNavigate} />
+		</div>
+	</div>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItem.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItem.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..30e84812aaa2b97c583c0aec890fdce003a5ffd0
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItem.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { ChatAttachmentDisplayItem } from '$lib/types';
+	import { Image, Music, Video, FileText, FileIcon } from '@lucide/svelte';
+	import ChatAttachmentsPreviewCurrentItemPdf from './ChatAttachmentsPreviewCurrentItemPdf.svelte';
+	import ChatAttachmentsPreviewCurrentItemImage from './ChatAttachmentsPreviewCurrentItemImage.svelte';
+	import ChatAttachmentsPreviewCurrentItemAudio from './ChatAttachmentsPreviewCurrentItemAudio.svelte';
+	import ChatAttachmentsPreviewCurrentItemVideo from './ChatAttachmentsPreviewCurrentItemVideo.svelte';
+	import ChatAttachmentsPreviewCurrentItemText from './ChatAttachmentsPreviewCurrentItemText.svelte';
+	import ChatAttachmentsPreviewCurrentItemUnavailable from './ChatAttachmentsPreviewCurrentItemUnavailable.svelte';
+
+	interface Props {
+		currentItem: ChatAttachmentDisplayItem | null;
+		isImage: boolean;
+		isAudio: boolean;
+		isVideo: boolean;
+		isPdf: boolean;
+		isText: boolean;
+		displayPreview: string | undefined;
+		displayTextContent: string | undefined;
+		audioSrc: string | null;
+		videoSrc: string | null;
+		language: string;
+		hasVisionModality: boolean;
+		activeModelId?: string;
+	}
+
+	let {
+		currentItem,
+		isImage,
+		isAudio,
+		isVideo,
+		isPdf,
+		isText,
+		displayPreview,
+		displayTextContent,
+		audioSrc,
+		videoSrc,
+		language,
+		hasVisionModality,
+		activeModelId
+	}: Props = $props();
+
+	let IconComponent = $derived(
+		isImage ? Image : isText || isPdf ? FileText : isAudio ? Music : isVideo ? Video : FileIcon
+	);
+
+	let isUnavailable = $derived(
+		!isPdf && !isImage && !(isText && displayTextContent) && !isAudio && !isVideo
+	);
+</script>
+
+{#if currentItem}
+	{#key currentItem.id}
+		{#if isPdf}
+			<ChatAttachmentsPreviewCurrentItemPdf
+				{currentItem}
+				displayName={currentItem.name}
+				{displayTextContent}
+				{hasVisionModality}
+				{activeModelId}
+			/>
+		{:else if isImage}
+			<ChatAttachmentsPreviewCurrentItemImage {currentItem} {displayPreview} />
+		{:else if isText && displayTextContent}
+			<ChatAttachmentsPreviewCurrentItemText {displayTextContent} {language} />
+		{:else if isAudio}
+			<ChatAttachmentsPreviewCurrentItemAudio {currentItem} {audioSrc} />
+		{:else if isVideo}
+			<ChatAttachmentsPreviewCurrentItemVideo {currentItem} {videoSrc} />
+		{:else if isUnavailable}
+			<ChatAttachmentsPreviewCurrentItemUnavailable {IconComponent} />
+		{/if}
+	{/key}
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemAudio.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemAudio.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..06e1f5928c5826276ad6a91570c6a21ee7d513b7
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemAudio.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Music } from '@lucide/svelte';
+
+	interface Props {
+		currentItem: { name?: string } | null;
+		audioSrc: string | null;
+	}
+
+	let { currentItem, audioSrc }: Props = $props();
+</script>
+
+<div class="flex flex-1 items-center justify-center p-8">
+	<div class="w-full max-w-md text-center">
+		<Music class="mx-auto mb-4 h-16 w-16 text-white/50" />
+
+		{#if audioSrc}
+			<audio controls class="mb-4 w-full" src={audioSrc}>
+				Your browser does not support the audio element.
+			</audio>
+		{:else}
+			<p class="mb-4 text-white/70">Audio preview not available</p>
+		{/if}
+
+		<p class="text-sm text-white/50">{currentItem?.name || 'Audio'}</p>
+	</div>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemImage.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemImage.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..070ff823011bca47265d301c87a32e93d316763c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemImage.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	interface Props {
+		currentItem: { name?: string } | null;
+		displayPreview: string | undefined;
+	}
+
+	let { currentItem, displayPreview }: Props = $props();
+</script>
+
+{#if displayPreview}
+	<div class="flex flex-1 items-center justify-center">
+		<img
+			src={displayPreview}
+			alt={currentItem?.name || 'preview'}
+			class="max-h-[80vh] max-w-[80vw] rounded-lg object-contain shadow-lg"
+		/>
+	</div>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemPdf.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemPdf.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..750532a6266019719ba8e74c0fd166d0be95233c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemPdf.svelte
@@ -0,0 +1,174 @@
+<script lang="ts">
+	import type { ChatAttachmentDisplayItem } from '$lib/types';
+	import { FileText, Eye, Info } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Alert from '$lib/components/ui/alert';
+	import { SyntaxHighlightedCode } from '$lib/components/app';
+	import { getLanguageFromFilename } from '$lib/utils';
+	import { convertPDFToImage } from '$lib/utils/browser-only';
+	import { PdfViewMode } from '$lib/enums';
+
+	interface Props {
+		currentItem: ChatAttachmentDisplayItem | null;
+		displayName: string;
+		displayTextContent: string | undefined;
+		hasVisionModality: boolean;
+		activeModelId?: string;
+	}
+
+	let { currentItem, displayName, displayTextContent, hasVisionModality, activeModelId }: Props =
+		$props();
+
+	let pdfViewMode = $state<PdfViewMode>(PdfViewMode.PAGES);
+	let pdfImages = $state<string[]>([]);
+	let pdfImagesLoading = $state(false);
+	let pdfImagesError = $state<string | null>(null);
+
+	let language = $derived(getLanguageFromFilename(displayName));
+
+	async function loadPdfImages() {
+		if (pdfImages.length > 0 || pdfImagesLoading || !currentItem) return;
+
+		pdfImagesLoading = true;
+		pdfImagesError = null;
+
+		try {
+			let file: File | null = null;
+
+			if (currentItem.uploadedFile?.file) {
+				file = currentItem.uploadedFile.file;
+			} else if (currentItem.attachment) {
+				// Check if we have pre-processed images
+				if (
+					'images' in currentItem.attachment &&
+					currentItem.attachment.images &&
+					Array.isArray(currentItem.attachment.images) &&
+					currentItem.attachment.images.length > 0
+				) {
+					pdfImages = currentItem.attachment.images;
+					return;
+				}
+
+				// Convert base64 back to File for processing
+				if ('base64Data' in currentItem.attachment && currentItem.attachment.base64Data) {
+					const base64Data = currentItem.attachment.base64Data;
+					const byteCharacters = atob(base64Data);
+					const byteNumbers = new Array(byteCharacters.length);
+					for (let i = 0; i < byteCharacters.length; i++) {
+						byteNumbers[i] = byteCharacters.charCodeAt(i);
+					}
+					const byteArray = new Uint8Array(byteNumbers);
+					file = new File([byteArray], displayName, { type: 'application/pdf' });
+				}
+			}
+
+			if (file) {
+				pdfImages = await convertPDFToImage(file);
+			} else {
+				throw new Error('No PDF file available for conversion');
+			}
+		} catch (error) {
+			pdfImagesError = error instanceof Error ? error.message : 'Failed to load PDF images';
+		} finally {
+			pdfImagesLoading = false;
+		}
+	}
+
+	$effect(() => {
+		if (pdfViewMode === PdfViewMode.PAGES) {
+			loadPdfImages();
+		}
+	});
+</script>
+
+<div class="mb-4 flex items-center justify-end gap-2">
+	<Button
+		variant={pdfViewMode === PdfViewMode.TEXT ? 'default' : 'outline'}
+		size="sm"
+		onclick={() => (pdfViewMode = PdfViewMode.TEXT)}
+		disabled={pdfImagesLoading}
+	>
+		<FileText class="mr-1 h-4 w-4" />
+		Text
+	</Button>
+
+	<Button
+		variant={pdfViewMode === PdfViewMode.PAGES ? 'default' : 'outline'}
+		size="sm"
+		onclick={() => (pdfViewMode = PdfViewMode.PAGES)}
+		disabled={pdfImagesLoading}
+	>
+		{#if pdfImagesLoading}
+			<div
+				class="mr-1 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+			></div>
+		{:else}
+			<Eye class="mr-1 h-4 w-4" />
+		{/if}
+		Pages
+	</Button>
+</div>
+
+{#if !hasVisionModality && activeModelId && currentItem}
+	<Alert.Root class="mb-4 max-w-4xl">
+		<Info class="h-4 w-4" />
+		<Alert.Title>Preview only</Alert.Title>
+		<Alert.Description>
+			<span class="inline-flex">
+				The selected model does not support vision. Only the extracted
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<span
+					class="mx-1 cursor-pointer underline"
+					onclick={() => (pdfViewMode = PdfViewMode.TEXT)}
+				>
+					text
+				</span>
+				will be sent to the model.
+			</span>
+		</Alert.Description>
+	</Alert.Root>
+{/if}
+
+{#if pdfImagesLoading}
+	<div class="flex flex-1 items-center justify-center p-8">
+		<div class="text-center">
+			<div
+				class="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-4 border-white border-t-transparent"
+			></div>
+			<p class="text-white/70">Converting PDF to images...</p>
+		</div>
+	</div>
+{:else if pdfImagesError}
+	<div class="flex flex-1 items-center justify-center p-8">
+		<div class="text-center">
+			<FileText class="mx-auto mb-4 h-16 w-16 text-white/50" />
+			<p class="mb-4 text-white/70">Failed to load PDF images</p>
+			<p class="text-sm text-white/50">{pdfImagesError}</p>
+		</div>
+	</div>
+{:else if pdfImages.length > 0}
+	{#each pdfImages as image, index (image)}
+		<p class="mb-2 text-sm text-white/50">Page {index + 1}</p>
+		<img src={image} alt="PDF Page {index + 1}" class="mx-auto max-w-[85vw] rounded-lg shadow-lg" />
+		<div class="h-4"></div>
+	{/each}
+{:else}
+	<div class="flex flex-1 items-center justify-center p-8">
+		<div class="text-center">
+			<FileText class="mx-auto mb-4 h-16 w-16 text-white/50" />
+			<p class="text-white/70">No PDF pages available</p>
+		</div>
+	</div>
+{/if}
+
+{#if pdfViewMode === PdfViewMode.TEXT && displayTextContent}
+	<div class="px-4 pb-4">
+		<SyntaxHighlightedCode
+			class="max-w-4xl"
+			code={displayTextContent}
+			{language}
+			maxHeight="none"
+		/>
+	</div>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemText.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemText.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..5977523acc04110f690c59a6eda11653c278079c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemText.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { SyntaxHighlightedCode } from '$lib/components/app';
+
+	interface Props {
+		displayTextContent: string | undefined;
+		language: string;
+	}
+
+	let { displayTextContent, language }: Props = $props();
+</script>
+
+{#if displayTextContent}
+	<div class="px-4 pb-4">
+		<SyntaxHighlightedCode
+			class="max-w-4xl"
+			code={displayTextContent}
+			{language}
+			maxHeight="none"
+		/>
+	</div>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemUnavailable.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemUnavailable.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..d3002a939163dedeb86781c5cfd091fe872bbefa
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemUnavailable.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+
+	interface Props {
+		IconComponent: Component;
+	}
+
+	let { IconComponent }: Props = $props();
+</script>
+
+<div class="flex flex-1 items-center justify-center p-8">
+	<div class="text-center">
+		<IconComponent class="mx-auto mb-4 h-16 w-16 text-white/50" />
+
+		<p class="text-white/70">Preview not available for this file type</p>
+	</div>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemVideo.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemVideo.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..62040b36f9d9d3fab28556c72185c6384dc69bfc
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItemVideo.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Video } from '@lucide/svelte';
+
+	interface Props {
+		currentItem: { name?: string } | null;
+		videoSrc: string | null;
+	}
+
+	let { currentItem, videoSrc }: Props = $props();
+</script>
+
+<div class="flex flex-1 items-center justify-center p-8">
+	<div class="w-full max-w-md text-center">
+		<Video class="mx-auto mb-4 h-16 w-16 text-white/50" />
+
+		{#if videoSrc}
+			<video controls class="mb-4 w-full" src={videoSrc}>
+				<track kind="captions" src="" />
+				Your browser does not support the video element.
+			</video>
+		{:else}
+			<p class="mb-4 text-white/70">Video preview not available</p>
+		{/if}
+
+		<p class="text-sm text-white/50">{currentItem?.name || 'Video'}</p>
+	</div>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewFileInfo.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewFileInfo.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..d27d54a4bae22d54c3c5f4dc334180176b989d3b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewFileInfo.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	interface Props {
+		displayName: string;
+		fileSize: string;
+	}
+
+	let { displayName, fileSize }: Props = $props();
+</script>
+
+<div class="sticky top-0 z-[20] mb-4 rounded-lg bg-black/5 px-4 py-2 text-center backdrop-blur-md">
+	<p class="font-medium text-white">{displayName}</p>
+
+	{#if fileSize}
+		<p class="text-xs text-white/60">{fileSize}</p>
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewNavButtons.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewNavButtons.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..a57e3145a9d67fbbcae82caa43bc886124232798
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewNavButtons.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+
+	interface Props {
+		onPrev: () => void;
+		onNext: () => void;
+		show: boolean;
+	}
+
+	let { onPrev, onNext, show }: Props = $props();
+</script>
+
+{#if show}
+	<Button
+		variant="secondary"
+		size="icon"
+		class="absolute top-1/2 left-4 z-10 h-8 w-8 -translate-y-1/2 rounded-full bg-background/5 p-0 text-white!"
+		onclick={onPrev}
+		aria-label="Previous"
+	>
+		<ChevronLeft class="size-4" />
+	</Button>
+
+	<Button
+		variant="secondary"
+		size="icon"
+		class="absolute top-1/2 right-4 z-10 h-8 w-8 -translate-y-1/2 rounded-full bg-background/5 p-0 text-white!"
+		onclick={onNext}
+		aria-label="Next"
+	>
+		<ChevronRight class="size-4" />
+	</Button>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewThumbnailStrip.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewThumbnailStrip.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..3f19ee39c108bd91074fbc9c76e5489281f2873e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewThumbnailStrip.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { Music, Video, FileText } from '@lucide/svelte';
+	import { HorizontalScrollCarousel } from '$lib/components/app/misc';
+
+	interface PreviewItem {
+		id: string;
+		name: string;
+		isImage: boolean;
+		isAudio: boolean;
+		isVideo: boolean;
+		preview?: string;
+	}
+
+	interface Props {
+		items: PreviewItem[];
+		currentIndex: number;
+		onNavigate: (index: number) => void;
+	}
+
+	let { items, currentIndex, onNavigate }: Props = $props();
+
+	function getFileExtension(name: string): string {
+		const parts = name.split('.');
+		if (parts.length > 1) {
+			return parts.pop()?.toUpperCase() ?? '';
+		}
+		return '';
+	}
+</script>
+
+{#if items.length > 1}
+	<div class="sticky bottom-0 z-10 mt-4 flex-shrink-0">
+		<HorizontalScrollCarousel class="max-w-full">
+			{#each items as item, index (item.id)}
+				<button
+					data-thumbnail-index={index}
+					class={[
+						'relative flex-shrink-0 cursor-pointer overflow-hidden rounded border-2 bg-black/80 backdrop-blur-sm transition-all hover:opacity-90',
+						index === currentIndex ? 'border-white' : 'border-transparent opacity-60',
+						'[&:not(:first-child)]:last:mr-4 [&:not(:last-child)]:first:ml-4'
+					]}
+					onclick={() => onNavigate(index)}
+					aria-label={`Go to ${item.name}`}
+				>
+					{#if item.isImage && item.preview}
+						<img src={item.preview} alt={item.name} class="h-12 w-12 object-cover" />
+					{:else}
+						<div
+							class="bg-foreground-muted/50 flex h-12 w-12 flex-col items-center justify-center gap-0.5 py-1"
+						>
+							{#if item.isAudio}
+								<Music class="h-4 w-4 text-white/70" />
+							{:else if item.isVideo}
+								<Video class="h-4 w-4 text-white/70" />
+							{:else}
+								<FileText class="h-4 w-4 text-white/70" />
+							{/if}
+
+							<span class="font-mono text-[9px] text-white/60">{getFileExtension(item.name)}</span>
+						</div>
+					{/if}
+				</button>
+			{/each}
+		</HorizontalScrollCarousel>
+	</div>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatForm.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..9b2077b8dcbd897a344227b8886a5125726af117
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
@@ -0,0 +1,572 @@
+<script lang="ts">
+	import {
+		ChatAttachmentsList,
+		ChatFormActions,
+		ChatFormFileInputInvisible,
+		ChatFormMcpResourcesList,
+		ChatFormPickers,
+		ChatFormTextarea,
+		DialogMcpResourcesBrowser
+	} from '$lib/components/app';
+	import {
+		CLIPBOARD_CONTENT_QUOTE_PREFIX,
+		INPUT_CLASSES,
+		SETTING_CONFIG_DEFAULT,
+		INITIAL_FILE_SIZE,
+		PROMPT_CONTENT_SEPARATOR,
+		PROMPT_TRIGGER_PREFIX,
+		RESOURCE_TRIGGER_PREFIX
+	} from '$lib/constants';
+	import {
+		ContentPartType,
+		FileExtensionText,
+		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 { 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, MCPResourceInfo, PromptMessage } from '$lib/types';
+	import { isIMEComposing, parseClipboardContent, uuid } from '$lib/utils';
+	import {
+		AudioRecorder,
+		convertToWav,
+		createAudioFile,
+		isAudioRecordingSupported
+	} from '$lib/utils/browser-only';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		// Data
+		attachments?: DatabaseMessageExtra[];
+		uploadedFiles?: ChatUploadedFile[];
+		value?: string;
+
+		// UI State
+		class?: string;
+		disabled?: boolean;
+		isLoading?: boolean;
+		placeholder?: string;
+		showMcpPromptButton?: boolean;
+		showAddButton?: boolean;
+		showModelSelector?: boolean;
+
+		// Event Handlers
+		onAttachmentRemove?: (index: number) => void;
+		onFilesAdd?: (files: File[]) => void;
+		onStop?: () => void;
+		onSubmit?: () => void;
+		onSystemPromptClick?: (draft: { message: string; files: ChatUploadedFile[] }) => void;
+		onUploadedFileRemove?: (fileId: string) => void;
+		onUploadedFilesChange?: (files: ChatUploadedFile[]) => void;
+		onValueChange?: (value: string) => void;
+	}
+
+	let {
+		attachments = [],
+		class: className = '',
+		disabled = false,
+		isLoading = false,
+		placeholder = 'Type a message...',
+		showMcpPromptButton = false,
+		showAddButton = true,
+		showModelSelector = true,
+		uploadedFiles = $bindable([]),
+		value = $bindable(''),
+		onAttachmentRemove,
+		onFilesAdd,
+		onStop,
+		onSubmit,
+		onSystemPromptClick,
+		onUploadedFileRemove,
+		onUploadedFilesChange,
+		onValueChange
+	}: Props = $props();
+
+	// Component References
+	let audioRecorder: AudioRecorder | undefined;
+	let chatFormActionsRef: ChatFormActions | undefined = $state(undefined);
+	let fileInputRef: ChatFormFileInputInvisible | undefined = $state(undefined);
+	let pickersRef: { handleKeydown: (event: KeyboardEvent) => boolean } | undefined =
+		$state(undefined);
+	let textareaRef: ChatFormTextarea | undefined = $state(undefined);
+
+	// Audio Recording State
+	let isRecording = $state(false);
+	let recordingSupported = $state(false);
+
+	// Picker State
+	let isPromptPickerOpen = $state(false);
+	let promptSearchQuery = $state('');
+	let isInlineResourcePickerOpen = $state(false);
+	let resourceSearchQuery = $state('');
+
+	// Resource Dialog State
+	let isResourceDialogOpen = $state(false);
+	let preSelectedResourceUri = $state<string | undefined>(undefined);
+
+	let currentConfig = $derived(config());
+
+	let pasteLongTextToFileLength = $derived.by(() => {
+		const n = Number(currentConfig.pasteLongTextToFileLen);
+		return Number.isNaN(n) ? Number(SETTING_CONFIG_DEFAULT.pasteLongTextToFileLen) : n;
+	});
+
+	let isRouter = $derived(isRouterMode());
+	let conversationModel = $derived(
+		chatStore.getConversationModel(activeMessages() as DatabaseMessage[])
+	);
+	let activeModelId = $derived.by(() => {
+		const options = modelOptions();
+
+		if (!isRouter) {
+			return options.length > 0 ? options[0].model : null;
+		}
+
+		const selectedId = selectedModelId();
+		if (selectedId) {
+			const model = options.find((m) => m.id === selectedId);
+			if (model) return model.model;
+		}
+
+		if (conversationModel) {
+			const model = options.find((m) => m.model === conversationModel);
+			if (model) return model.model;
+		}
+
+		return null;
+	});
+
+	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);
+
+	onMount(() => {
+		recordingSupported = isAudioRecordingSupported();
+		audioRecorder = new AudioRecorder();
+	});
+
+	export function focus() {
+		textareaRef?.focus();
+	}
+
+	export function resetTextareaHeight() {
+		textareaRef?.resetHeight();
+	}
+
+	export function openModelSelector() {
+		chatFormActionsRef?.openModelSelector();
+	}
+
+	export function checkModelSelected(): boolean {
+		if (!hasModelSelected) {
+			chatFormActionsRef?.openModelSelector();
+			return false;
+		}
+		return true;
+	}
+
+	function handleFileSelect(files: File[]) {
+		onFilesAdd?.(files);
+	}
+
+	function handleFileUpload() {
+		fileInputRef?.click();
+	}
+
+	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);
+		}
+	}
+
+	function handleInput() {
+		const perChatOverrides = conversationsStore.getAllMcpServerOverrides();
+		const hasServers = mcpStore.hasEnabledServers(perChatOverrides);
+
+		if (value.startsWith(PROMPT_TRIGGER_PREFIX) && hasServers) {
+			isPromptPickerOpen = true;
+			promptSearchQuery = value.slice(1);
+			isInlineResourcePickerOpen = false;
+			resourceSearchQuery = '';
+		} else if (
+			value.startsWith(RESOURCE_TRIGGER_PREFIX) &&
+			hasServers &&
+			mcpStore.hasResourcesCapability(perChatOverrides)
+		) {
+			isInlineResourcePickerOpen = true;
+			resourceSearchQuery = value.slice(1);
+			isPromptPickerOpen = false;
+			promptSearchQuery = '';
+		} else {
+			isPromptPickerOpen = false;
+			promptSearchQuery = '';
+			isInlineResourcePickerOpen = false;
+			resourceSearchQuery = '';
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (pickersRef?.handleKeydown(event)) {
+			return;
+		}
+
+		if (event.key === KeyboardKey.ESCAPE && isPromptPickerOpen) {
+			isPromptPickerOpen = false;
+			promptSearchQuery = '';
+			return;
+		}
+
+		if (event.key === KeyboardKey.ESCAPE && isInlineResourcePickerOpen) {
+			isInlineResourcePickerOpen = false;
+			resourceSearchQuery = '';
+			return;
+		}
+
+		if (event.key === KeyboardKey.ENTER && !event.shiftKey && !isIMEComposing(event)) {
+			const isModifier = event.ctrlKey || event.metaKey;
+			const sendOnEnter = currentConfig.sendOnEnter !== false;
+
+			if (sendOnEnter || isModifier) {
+				event.preventDefault();
+
+				if (!canSubmit || disabled || hasLoadingAttachments) return;
+
+				onSubmit?.();
+			}
+		}
+	}
+
+	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();
+			onFilesAdd?.(files);
+			return;
+		}
+
+		const text = event.clipboardData.getData(MimeTypeText.PLAIN);
+
+		if (text.startsWith(CLIPBOARD_CONTENT_QUOTE_PREFIX)) {
+			const parsed = parseClipboardContent(text);
+
+			if (parsed.textAttachments.length > 0 || parsed.mcpPromptAttachments.length > 0) {
+				event.preventDefault();
+				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: uuid(),
+						name: att.name,
+						size: att.content.length,
+						type: SpecialFileType.MCP_PROMPT,
+						file: new File([att.content], `${att.name}${FileExtensionText.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();
+				}, 10);
+
+				return;
+			}
+		}
+
+		if (
+			text.length > 0 &&
+			pasteLongTextToFileLength > 0 &&
+			text.length > pasteLongTextToFileLength
+		) {
+			event.preventDefault();
+
+			const textFile = new File([text], 'Pasted', {
+				type: MimeTypeText.PLAIN
+			});
+
+			onFilesAdd?.([textFile]);
+		}
+	}
+
+	function handlePromptLoadStart(
+		placeholderId: string,
+		promptInfo: MCPPromptInfo,
+		args?: Record<string, string>
+	) {
+		// Only clear the value if the prompt was triggered by typing '/'
+		if (value.startsWith(PROMPT_TRIGGER_PREFIX)) {
+			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}${FileExtensionText.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();
+	}
+
+	function handleInlineResourcePickerClose() {
+		isInlineResourcePickerOpen = false;
+		resourceSearchQuery = '';
+		textareaRef?.focus();
+	}
+
+	function handleInlineResourceSelect() {
+		if (value.startsWith(RESOURCE_TRIGGER_PREFIX)) {
+			value = '';
+			onValueChange?.('');
+		}
+
+		isInlineResourcePickerOpen = false;
+		resourceSearchQuery = '';
+		textareaRef?.focus();
+	}
+
+	function handleBrowseResources() {
+		isInlineResourcePickerOpen = false;
+		resourceSearchQuery = '';
+
+		if (value.startsWith(RESOURCE_TRIGGER_PREFIX)) {
+			value = '';
+			onValueChange?.('');
+		}
+
+		isResourceDialogOpen = true;
+	}
+
+	async function handleMicClick() {
+		if (!audioRecorder || !recordingSupported) {
+			console.warn('Audio recording not supported');
+			return;
+		}
+
+		if (isRecording) {
+			isRecording = false;
+			try {
+				const audioBlob = await audioRecorder.stopRecording();
+				const wavBlob = await convertToWav(audioBlob);
+				const audioFile = createAudioFile(wavBlob);
+
+				onFilesAdd?.([audioFile]);
+			} catch (error) {
+				console.error('Failed to stop recording:', error);
+			}
+		} else {
+			try {
+				await audioRecorder.startRecording();
+				isRecording = true;
+			} catch (error) {
+				console.error('Failed to start recording:', error);
+			}
+		}
+	}
+</script>
+
+<ChatFormFileInputInvisible bind:this={fileInputRef} onFileSelect={handleFileSelect} />
+
+<form
+	class="relative {className}"
+	onsubmit={(event) => {
+		event.preventDefault();
+
+		if (!canSubmit || disabled || hasLoadingAttachments) return;
+
+		onSubmit?.();
+	}}
+>
+	<ChatFormPickers
+		bind:this={pickersRef}
+		{isPromptPickerOpen}
+		{promptSearchQuery}
+		{isInlineResourcePickerOpen}
+		{resourceSearchQuery}
+		onPromptPickerClose={handlePromptPickerClose}
+		onInlineResourcePickerClose={handleInlineResourcePickerClose}
+		onInlineResourceSelect={handleInlineResourceSelect}
+		onPromptLoadStart={handlePromptLoadStart}
+		onPromptLoadComplete={handlePromptLoadComplete}
+		onPromptLoadError={handlePromptLoadError}
+		onInlineResourceBrowse={handleBrowseResources}
+	/>
+
+	<div
+		class="{INPUT_CLASSES} overflow-hidden rounded-4xl md:rounded-3xl backdrop-blur-md {disabled
+			? 'cursor-not-allowed opacity-60'
+			: ''}"
+		data-slot="input-area"
+	>
+		<ChatAttachmentsList
+			{attachments}
+			bind:uploadedFiles
+			onFileRemove={handleFileRemove}
+			limitToSingleRow
+			class="py-5"
+			style="scroll-padding: 1rem;"
+			activeModelId={activeModelId ?? undefined}
+		/>
+
+		<div
+			class="flex-column relative min-h-12 items-center rounded-4xl md: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()}
+				<ChatFormMcpResourcesList
+					class="mb-3"
+					onResourceClick={(uri) => {
+						preSelectedResourceUri = uri;
+						isResourceDialogOpen = true;
+					}}
+				/>
+			{/if}
+
+			<ChatFormActions
+				class="px-3"
+				bind:this={chatFormActionsRef}
+				canSend={canSubmit}
+				{disabled}
+				{isLoading}
+				isReasoning={chatStore.isReasoning}
+				{isRecording}
+				{showAddButton}
+				{showModelSelector}
+				{uploadedFiles}
+				onFileUpload={handleFileUpload}
+				onMicClick={handleMicClick}
+				{onStop}
+				onSystemPromptClick={() => onSystemPromptClick?.({ message: value, files: uploadedFiles })}
+				onMcpPromptClick={showMcpPromptButton ? () => (isPromptPickerOpen = true) : undefined}
+				onMcpResourcesClick={() => (isResourceDialogOpen = true)}
+			/>
+		</div>
+	</div>
+</form>
+
+<DialogMcpResourcesBrowser
+	bind:open={isResourceDialogOpen}
+	preSelectedUri={preSelectedResourceUri}
+	onAttach={(resource: MCPResourceInfo) => {
+		mcpStore.attachResource(resource.uri);
+	}}
+	onOpenChange={(newOpen: boolean) => {
+		if (!newOpen) {
+			preSelectedResourceUri = undefined;
+		}
+	}}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddButton.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddButton.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..ad2a0def9ec24e22b695846ef86fa0f035fc9805
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddButton.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Plus } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { ATTACHMENT_TOOLTIP_TEXT } from '$lib/constants';
+
+	interface Props {
+		disabled?: boolean;
+		onclick?: (e: MouseEvent) => void;
+	}
+
+	let { disabled = false, onclick }: Props = $props();
+</script>
+
+<Tooltip.Root>
+	<Tooltip.Trigger class="w-full">
+		<Button
+			class="file-upload-button md:h-8 md:w-8 h-9 w-9 rounded-full p-0"
+			{disabled}
+			{onclick}
+			variant="secondary"
+			type="button"
+		>
+			<span class="sr-only">{ATTACHMENT_TOOLTIP_TEXT}</span>
+
+			<Plus class="h-4 w-4" />
+		</Button>
+	</Tooltip.Trigger>
+
+	<Tooltip.Content>
+		<p>{ATTACHMENT_TOOLTIP_TEXT}</p>
+	</Tooltip.Content>
+</Tooltip.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..433a3662df2ea60f5b0cde1a289bcb5e958d2648
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte
@@ -0,0 +1,184 @@
+<script lang="ts">
+	import { Plus, File, MessageSquare, Zap, FolderOpen } from '@lucide/svelte';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { buttonVariants } from '$lib/components/ui/button';
+	import { cn } from '$lib/components/ui/utils';
+	import {
+		ATTACHMENT_FILE_ITEMS,
+		ATTACHMENT_TOOLTIP_TEXT,
+		TOOLTIP_DELAY_DURATION
+	} from '$lib/constants';
+	import {
+		ChatFormActionAddToolsSubmenu,
+		ChatFormActionAddMcpServersSubmenu,
+		ChatFormActionAddReasoningSubmenu
+	} from '$lib/components/app';
+	import { useAttachmentMenu } from '$lib/hooks/use-attachment-menu.svelte';
+
+	interface Props {
+		class?: string;
+		disabled?: boolean;
+		hasAudioModality?: boolean;
+		hasVideoModality?: boolean;
+		hasVisionModality?: boolean;
+		hasMcpPromptsSupport?: boolean;
+		hasMcpResourcesSupport?: boolean;
+		onFileUpload?: () => void;
+		onSystemPromptClick?: () => void;
+		onMcpPromptClick?: () => void;
+		onMcpSettingsClick?: () => void;
+		onMcpResourcesClick?: () => void;
+	}
+
+	let {
+		class: className = '',
+		disabled = false,
+		hasAudioModality = false,
+		hasVideoModality = false,
+		hasVisionModality = false,
+		hasMcpPromptsSupport = false,
+		hasMcpResourcesSupport = false,
+		onFileUpload,
+		onSystemPromptClick,
+		onMcpPromptClick,
+		onMcpSettingsClick,
+		onMcpResourcesClick
+	}: Props = $props();
+
+	let dropdownOpen = $state(false);
+
+	function handleMcpSettingsClick() {
+		dropdownOpen = false;
+		onMcpSettingsClick?.();
+	}
+
+	const attachmentMenu = useAttachmentMenu(
+		() => ({
+			hasVisionModality,
+			hasAudioModality,
+			hasVideoModality,
+			hasMcpPromptsSupport,
+			hasMcpResourcesSupport
+		}),
+		() => ({ onFileUpload, onSystemPromptClick, onMcpPromptClick, onMcpResourcesClick }),
+		() => {
+			dropdownOpen = false;
+		}
+	);
+</script>
+
+<div class="flex items-center gap-1 {className}">
+	<DropdownMenu.Root bind:open={dropdownOpen}>
+		<Tooltip.Root>
+			<Tooltip.Trigger>
+				{#snippet child({ props })}
+					<DropdownMenu.Trigger
+						{...props}
+						class={cn(
+							buttonVariants({ variant: 'secondary' }),
+							'file-upload-button h-8 w-8 cursor-pointer rounded-full p-0'
+						)}
+						{disabled}
+					>
+						<span class="sr-only">{ATTACHMENT_TOOLTIP_TEXT}</span>
+
+						<Plus class="h-4 w-4" />
+					</DropdownMenu.Trigger>
+				{/snippet}
+			</Tooltip.Trigger>
+
+			<Tooltip.Content>
+				<p>{ATTACHMENT_TOOLTIP_TEXT}</p>
+			</Tooltip.Content>
+		</Tooltip.Root>
+
+		<DropdownMenu.Content align="start" class="w-52">
+			<ChatFormActionAddReasoningSubmenu />
+
+			<DropdownMenu.Separator />
+
+			<DropdownMenu.Sub>
+				<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
+					<File class="h-4 w-4" />
+
+					<span>Add files</span>
+				</DropdownMenu.SubTrigger>
+
+				<DropdownMenu.SubContent class="w-48">
+					{#each ATTACHMENT_FILE_ITEMS as item (item.id)}
+						{@const enabled = attachmentMenu.isItemEnabled(item.enabledWhen)}
+						{#if enabled}
+							<DropdownMenu.Item
+								class="{item.class ?? ''} flex cursor-pointer items-center gap-2"
+								onclick={() => attachmentMenu.callbacks[item.action]()}
+							>
+								<item.icon class="h-4 w-4" />
+
+								<span>{item.label}</span>
+							</DropdownMenu.Item>
+						{:else if item.disabledTooltip}
+							<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+								<Tooltip.Trigger tabindex={-1}>
+									{#snippet child({ props })}
+										<div {...props} class="cursor-default">
+											<DropdownMenu.Item
+												class="{item.class ?? ''} flex items-center gap-2"
+												disabled
+											>
+												<item.icon class="h-4 w-4" />
+
+												<span>{item.label}</span>
+											</DropdownMenu.Item>
+										</div>
+									{/snippet}
+								</Tooltip.Trigger>
+
+								<Tooltip.Content side="right">
+									<p>{item.disabledTooltip}</p>
+								</Tooltip.Content>
+							</Tooltip.Root>
+						{/if}
+					{/each}
+				</DropdownMenu.SubContent>
+			</DropdownMenu.Sub>
+
+			<DropdownMenu.Item
+				class="flex cursor-pointer items-center gap-2"
+				onclick={onSystemPromptClick}
+			>
+				<MessageSquare class="h-4 w-4" />
+
+				<span>System Message</span>
+			</DropdownMenu.Item>
+
+			<ChatFormActionAddToolsSubmenu />
+
+			<ChatFormActionAddMcpServersSubmenu onMcpSettingsClick={handleMcpSettingsClick} />
+
+			{#if hasMcpPromptsSupport}
+				<DropdownMenu.Separator />
+
+				<DropdownMenu.Item
+					class="flex cursor-pointer items-center gap-2"
+					onclick={onMcpPromptClick}
+				>
+					<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={onMcpResourcesClick}
+				>
+					<FolderOpen class="h-4 w-4" />
+
+					<span>MCP Resources</span>
+				</DropdownMenu.Item>
+			{/if}
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpServersSubmenu.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpServersSubmenu.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..f86222823d44c3021833206bbb071b017b5744d1
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpServersSubmenu.svelte
@@ -0,0 +1,150 @@
+<script lang="ts">
+	import { Settings, Plus } from '@lucide/svelte';
+	import { Switch } from '$lib/components/ui/switch';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import { McpLogo, DropdownMenuSearchable, McpServerIdentity } from '$lib/components/app';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { HealthCheckStatus } from '$lib/enums';
+	import type { MCPServerSettingsEntry } from '$lib/types';
+	import { goto } from '$app/navigation';
+	import { ROUTES } from '$lib/constants/routes';
+
+	interface Props {
+		onMcpSettingsClick?: () => void;
+	}
+
+	let { onMcpSettingsClick }: Props = $props();
+
+	let mcpSearchQuery = $state('');
+	let allMcpServers = $derived(mcpStore.getServers());
+	let mcpServers = $derived(mcpStore.visibleMcpServers);
+	let hasMcpServers = $derived(mcpServers.length > 0);
+	// let hasAnyMcpServers = $derived(allMcpServers.length > 0);
+	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 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(allMcpServers);
+		}
+	}
+
+	function handleMcpSettingsClick() {
+		onMcpSettingsClick?.();
+
+		goto(`${hasMcpServers ? '' : '?add'}${ROUTES.MCP_SERVERS}`);
+	}
+</script>
+
+<DropdownMenu.Root>
+	<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">
+			{#if hasMcpServers}
+				<DropdownMenuSearchable
+					placeholder="Search servers..."
+					bind:searchValue={mcpSearchQuery}
+					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)}
+							{@const displayName = getServerLabel(server)}
+							{@const faviconUrl = mcpStore.getServerFavicon(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">
+									<div class="min-w-0 flex-1">
+										<McpServerIdentity
+											{displayName}
+											{faviconUrl}
+											iconClass="h-4 w-4"
+											iconRounded="rounded-sm"
+											showVersion={false}
+											nameClass="text-sm"
+										/>
+									</div>
+
+									{#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) => 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>
+			{:else}
+				<div class="px-2 py-3 text-center text-sm text-muted-foreground">
+					No MCP servers configured
+				</div>
+
+				<DropdownMenu.Separator />
+
+				<DropdownMenu.Item
+					class="flex cursor-pointer items-center gap-2"
+					onclick={handleMcpSettingsClick}
+				>
+					<Plus class="h-4 w-4" />
+
+					<span>Add MCP Servers</span>
+				</DropdownMenu.Item>
+			{/if}
+		</DropdownMenu.SubContent>
+	</DropdownMenu.Sub>
+</DropdownMenu.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddReasoningSubmenu.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddReasoningSubmenu.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..070fd3ac66746590b90b2aa9b08b8f109f4f492e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddReasoningSubmenu.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+	import { Lightbulb, LightbulbOff, Check, Info } from '@lucide/svelte';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { ReasoningEffort } from '$lib/enums';
+	import { REASONING_EFFORT_TOKENS } from '$lib/constants/reasoning-effort-tokens';
+	import { REASONING_EFFORT_LEVELS } from '$lib/constants/reasoning-effort';
+	import type { ReasoningEffortLevel } from '$lib/types';
+	import {
+		modelsStore,
+		checkModelSupportsThinking,
+		supportsThinking,
+		propsCacheVersion,
+		loadedModelIds
+	} from '$lib/stores/models.svelte';
+	import { chatStore } from '$lib/stores/chat.svelte';
+	import { conversationsStore, activeMessages } from '$lib/stores/conversations.svelte';
+	import { isRouterMode } from '$lib/stores/server.svelte';
+	import type { DatabaseMessage } from '$lib/types/database';
+
+	let subOpen = $state(false);
+
+	let conversationModel = $derived(
+		chatStore.getConversationModel(activeMessages() as DatabaseMessage[])
+	);
+
+	let modelSupportsThinkingFromMessages = $derived.by(() => {
+		const modelId = isRouterMode() ? modelsStore.selectedModelName || conversationModel : null;
+		if (!modelId) return false;
+
+		const messages = conversationsStore.activeMessages;
+
+		return messages.some(
+			(m) => m.role === 'assistant' && m.model === modelId && !!m.reasoningContent
+		);
+	});
+
+	let modelSupportsThinking = $derived.by(() => {
+		loadedModelIds();
+		propsCacheVersion();
+
+		if (isRouterMode()) {
+			const modelId = modelsStore.selectedModelName || conversationModel;
+			return checkModelSupportsThinking(modelId ?? '') || modelSupportsThinkingFromMessages;
+		}
+
+		return supportsThinking() || modelSupportsThinkingFromMessages;
+	});
+
+	let thinkingEnabled = $derived(conversationsStore.getThinkingEnabled());
+	let currentEffort = $derived(conversationsStore.getReasoningEffort());
+	let isOff = $derived(!thinkingEnabled);
+
+	function isSelected(item: ReasoningEffortLevel): boolean {
+		if (item.isOff) return isOff;
+		return thinkingEnabled && currentEffort === item.value;
+	}
+
+	function handleSelection(item: ReasoningEffortLevel) {
+		if (item.isOff) {
+			conversationsStore.setThinkingEnabled(false);
+		} else {
+			conversationsStore.setThinkingEnabled(true);
+			conversationsStore.setReasoningEffort(item.value as ReasoningEffort);
+		}
+		subOpen = false;
+	}
+</script>
+
+{#if modelSupportsThinking}
+	<DropdownMenu.Sub bind:open={subOpen}>
+		<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
+			{#if thinkingEnabled}
+				<Lightbulb class="h-4 w-4 shrink-0 text-amber-400" />
+			{:else}
+				<LightbulbOff class="h-4 w-4 shrink-0 text-muted-foreground" />
+			{/if}
+
+			<span class="text-sm inline-flex gap-2 {!thinkingEnabled ? 'text-muted-foreground' : ''}">
+				Reasoning
+
+				<span class="capitalize text-muted-foreground">
+					{thinkingEnabled ? currentEffort : 'off'}
+				</span>
+			</span>
+		</DropdownMenu.SubTrigger>
+
+		<DropdownMenu.SubContent
+			class="w-60 bg-popover p-1.5 text-popover-foreground shadow-md outline-none"
+		>
+			{#each REASONING_EFFORT_LEVELS as level (level.value)}
+				<button
+					type="button"
+					class="flex w-full cursor-pointer items-center gap-3 rounded-md px-2 py-1.75 text-left text-sm transition-colors hover:bg-accent"
+					class:bg-accent={isSelected(level)}
+					onclick={() => handleSelection(level)}
+				>
+					{#if isSelected(level)}
+						<Check class="h-4 w-4 shrink-0 text-foreground" />
+					{:else}
+						<div class="h-4 w-4 shrink-0"></div>
+					{/if}
+
+					<span class="flex-1">{level.label}</span>
+
+					{#if !level.isOff}
+						<span class="text-[11px] text-muted-foreground opacity-60">
+							{REASONING_EFFORT_TOKENS[level.value] === -1
+								? 'Unlimited'
+								: `Max ${REASONING_EFFORT_TOKENS[level.value].toLocaleString()} tokens`}
+						</span>
+					{/if}
+
+					{#if level.hasInfo}
+						<Tooltip.Root>
+							<Tooltip.Trigger>
+								<Info class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+							</Tooltip.Trigger>
+							<Tooltip.Content side="left">
+								<p>Maximum reasoning effort with extended context usage</p>
+							</Tooltip.Content>
+						</Tooltip.Root>
+					{/if}
+				</button>
+			{/each}
+		</DropdownMenu.SubContent>
+	</DropdownMenu.Sub>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..b67fb267b3192f8fd3877157e295e815bba74639
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte
@@ -0,0 +1,308 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import * as Sheet from '$lib/components/ui/sheet';
+	import * as Collapsible from '$lib/components/ui/collapsible';
+	import { File, MessageSquare, Zap, FolderOpen } from '@lucide/svelte';
+	import { Switch } from '$lib/components/ui/switch';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import { TOOLTIP_DELAY_DURATION } from '$lib/constants';
+	import { ATTACHMENT_FILE_ITEMS } from '$lib/constants/attachment-menu';
+	import { useAttachmentMenu } from '$lib/hooks/use-attachment-menu.svelte';
+	import { useToolsPanel } from '$lib/hooks/use-tools-panel.svelte';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { McpLogo } from '$lib/components/app';
+	import { PencilRuler, ChevronDown, ChevronRight } from '@lucide/svelte';
+	import { HealthCheckStatus } from '$lib/enums';
+	import { AttachmentAction } from '$lib/enums/attachment.enums';
+
+	interface Props {
+		class?: string;
+		disabled?: boolean;
+		hasAudioModality?: boolean;
+		hasVideoModality?: boolean;
+		hasVisionModality?: boolean;
+		hasMcpPromptsSupport?: boolean;
+		hasMcpResourcesSupport?: boolean;
+		onFileUpload?: () => void;
+		onSystemPromptClick?: () => void;
+		onMcpPromptClick?: () => void;
+		onMcpResourcesClick?: () => void;
+		trigger: Snippet<[{ disabled: boolean; onclick?: () => void }]>;
+	}
+
+	let {
+		class: className = '',
+		disabled = false,
+		hasAudioModality = false,
+		hasVisionModality = false,
+		hasVideoModality = false,
+		hasMcpPromptsSupport = false,
+		hasMcpResourcesSupport = false,
+		onFileUpload,
+		onSystemPromptClick,
+		onMcpPromptClick,
+		onMcpResourcesClick,
+		trigger
+	}: Props = $props();
+
+	let sheetOpen = $state(false);
+	let filesExpanded = $state(true);
+	let toolsExpanded = $state(false);
+	let mcpExpanded = $state(false);
+
+	const attachmentMenu = useAttachmentMenu(
+		() => ({
+			hasVisionModality,
+			hasAudioModality,
+			hasVideoModality,
+			hasMcpPromptsSupport,
+			hasMcpResourcesSupport
+		}),
+		() => ({ onFileUpload, onSystemPromptClick, onMcpPromptClick, onMcpResourcesClick }),
+		() => {
+			sheetOpen = false;
+		}
+	);
+
+	const toolsPanel = useToolsPanel();
+
+	const sheetItemClass =
+		'flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left text-sm transition-colors hover:bg-accent active:bg-accent disabled:cursor-not-allowed disabled:opacity-50';
+
+	const sheetItemRowClass =
+		'flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-accent';
+
+	let visibleMcpServers = $derived(mcpStore.visibleMcpServers);
+</script>
+
+<div class="flex items-center gap-1 {className}">
+	<Sheet.Root bind:open={sheetOpen}>
+		{@render trigger({ disabled, onclick: () => (sheetOpen = true) })}
+
+		<Sheet.Content side="bottom" class="max-h-[85vh] gap-0 overflow-y-auto">
+			<Sheet.Header>
+				<Sheet.Title>Add to chat</Sheet.Title>
+
+				<Sheet.Description class="sr-only">
+					Add files, system prompt or configure MCP servers
+				</Sheet.Description>
+			</Sheet.Header>
+
+			<div class="flex flex-col gap-1 px-1.5 pb-2">
+				<Collapsible.Root open={filesExpanded} onOpenChange={(open) => (filesExpanded = open)}>
+					<Collapsible.Trigger class={sheetItemClass}>
+						{#if filesExpanded}
+							<ChevronDown class="h-4 w-4 shrink-0" />
+						{:else}
+							<ChevronRight class="h-4 w-4 shrink-0" />
+						{/if}
+
+						<File class="h-4 w-4 shrink-0" />
+
+						<span class="flex-1">Add files</span>
+					</Collapsible.Trigger>
+
+					<Collapsible.Content>
+						<div class="flex flex-col gap-0.5 pl-4">
+							{#each ATTACHMENT_FILE_ITEMS as item (item.id)}
+								{@const enabled = attachmentMenu.isItemEnabled(item.enabledWhen)}
+								{#if enabled}
+									<button
+										type="button"
+										class={sheetItemClass}
+										onclick={() => attachmentMenu.callbacks[item.action]()}
+									>
+										<item.icon class="h-4 w-4 shrink-0" />
+
+										<span>{item.label}</span>
+									</button>
+								{:else if item.disabledTooltip}
+									<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+										<Tooltip.Trigger>
+											<button type="button" class={sheetItemClass} disabled>
+												<item.icon class="h-4 w-4 shrink-0" />
+
+												<span>{item.label}</span>
+											</button>
+										</Tooltip.Trigger>
+
+										<Tooltip.Content side="right">
+											<p>{item.disabledTooltip}</p>
+										</Tooltip.Content>
+									</Tooltip.Root>
+								{/if}
+							{/each}
+						</div>
+					</Collapsible.Content>
+				</Collapsible.Root>
+
+				<Collapsible.Root open={mcpExpanded} onOpenChange={(open) => (mcpExpanded = open)}>
+					<Collapsible.Trigger class={sheetItemClass}>
+						{#if mcpExpanded}
+							<ChevronDown class="h-4 w-4 shrink-0" />
+						{:else}
+							<ChevronRight class="h-4 w-4 shrink-0" />
+						{/if}
+
+						<McpLogo class="inline h-4 w-4 shrink-0" />
+
+						<span class="flex-1">MCP Servers</span>
+
+						<span class="text-xs text-muted-foreground">
+							{visibleMcpServers.length} server{visibleMcpServers.length !== 1 ? 's' : ''}
+						</span>
+					</Collapsible.Trigger>
+
+					<Collapsible.Content>
+						<div class="flex flex-col gap-0.5 pl-4">
+							{#each visibleMcpServers as server (server.id)}
+								{@const healthState = mcpStore.getHealthCheckState(server.id)}
+								{@const hasError = healthState.status === HealthCheckStatus.ERROR}
+								{@const displayName = mcpStore.getServerLabel(server)}
+								{@const faviconUrl = mcpStore.getServerFavicon(server.id)}
+								{@const isEnabled = conversationsStore.isMcpServerEnabledForChat(server.id)}
+
+								<button
+									type="button"
+									class={sheetItemRowClass}
+									onclick={() => !hasError && conversationsStore.toggleMcpServerForChat(server.id)}
+									disabled={hasError}
+								>
+									<div class="flex min-w-0 flex-1 items-center gap-2">
+										{#if faviconUrl}
+											<img
+												src={faviconUrl}
+												alt=""
+												class="h-4 w-4 shrink-0 rounded-sm"
+												onerror={(e) => {
+													(e.currentTarget as HTMLImageElement).style.display = 'none';
+												}}
+											/>
+										{/if}
+
+										<span class="min-w-0 truncate text-sm">{displayName}</span>
+									</div>
+
+									{#if hasError}
+										<span
+											class="shrink-0 rounded bg-destructive/15 px-1.5 py-0.5 text-xs text-destructive"
+										>
+											Error
+										</span>
+									{:else}
+										<Switch
+											checked={isEnabled}
+											onCheckedChange={() => conversationsStore.toggleMcpServerForChat(server.id)}
+										/>
+									{/if}
+								</button>
+							{/each}
+
+							{#if visibleMcpServers.length === 0}
+								<div class="px-3 py-2 text-center text-sm text-muted-foreground">
+									No MCP servers configured
+								</div>
+							{/if}
+						</div>
+					</Collapsible.Content>
+				</Collapsible.Root>
+
+				{#if toolsPanel.totalToolCount > 0}
+					<Collapsible.Root open={toolsExpanded} onOpenChange={(open) => (toolsExpanded = open)}>
+						<Collapsible.Trigger class={sheetItemClass}>
+							{#if toolsExpanded}
+								<ChevronDown class="h-4 w-4 shrink-0" />
+							{:else}
+								<ChevronRight class="h-4 w-4 shrink-0" />
+							{/if}
+
+							<PencilRuler class="inline h-4 w-4 shrink-0" />
+
+							<span class="flex-1">Tools</span>
+
+							<span class="text-xs text-muted-foreground">
+								{toolsPanel.totalToolCount} tool{toolsPanel.totalToolCount !== 1 ? 's' : ''}
+							</span>
+						</Collapsible.Trigger>
+
+						<Collapsible.Content>
+							<div class="flex flex-col gap-0.5 pl-4">
+								{#each toolsPanel.activeGroups as group (group.label)}
+									{@const checked = toolsPanel.isGroupChecked(group)}
+									{@const enabledCount = toolsPanel.getEnabledToolCount(group)}
+									{@const favicon = toolsPanel.getFavicon(group)}
+
+									<button
+										type="button"
+										class={sheetItemRowClass}
+										onclick={() => toolsPanel.toggleGroupByLabel(group.label)}
+									>
+										{#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="min-w-0 flex-1 truncate text-sm font-medium">{group.label}</span>
+
+										<span class="shrink-0 text-xs text-muted-foreground">
+											{enabledCount}/{group.tools.length}
+										</span>
+
+										<Checkbox
+											{checked}
+											class="h-4 w-4 shrink-0"
+											onclick={(e) => e.stopPropagation()}
+											onCheckedChange={() => toolsPanel.toggleGroupByLabel(group.label)}
+										/>
+									</button>
+								{/each}
+							</div>
+						</Collapsible.Content>
+					</Collapsible.Root>
+				{/if}
+
+				<button
+					type="button"
+					class={sheetItemClass}
+					onclick={() => attachmentMenu.callbacks[AttachmentAction.SYSTEM_PROMPT_CLICK]()}
+				>
+					<MessageSquare class="h-4 w-4 shrink-0" />
+
+					<span>System Message</span>
+				</button>
+
+				{#if hasMcpPromptsSupport}
+					<button
+						type="button"
+						class={sheetItemClass}
+						onclick={() => attachmentMenu.callbacks[AttachmentAction.MCP_PROMPT_CLICK]()}
+					>
+						<Zap class="h-4 w-4 shrink-0" />
+
+						<span>MCP Prompt</span>
+					</button>
+				{/if}
+
+				{#if hasMcpResourcesSupport}
+					<button
+						type="button"
+						class={sheetItemClass}
+						onclick={() => attachmentMenu.callbacks[AttachmentAction.MCP_RESOURCES_CLICK]()}
+					>
+						<FolderOpen class="h-4 w-4 shrink-0" />
+
+						<span>MCP Resources</span>
+					</button>
+				{/if}
+			</div>
+		</Sheet.Content>
+	</Sheet.Root>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddToolsSubmenu.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddToolsSubmenu.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..ece3e26530b0a0fa63dfa0c1bc62ae940f7ea780
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddToolsSubmenu.svelte
@@ -0,0 +1,157 @@
+<script lang="ts">
+	import { PencilRuler, ChevronDown, ChevronRight, Loader2, Info, Check } from '@lucide/svelte';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import * as Collapsible from '$lib/components/ui/collapsible';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { toolsStore } from '$lib/stores/tools.svelte';
+	import { CLI_FLAGS } from '$lib/constants';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { useToolsPanel } from '$lib/hooks/use-tools-panel.svelte';
+
+	const toolsPanel = useToolsPanel();
+	const hasMcpServersAvailable = $derived(mcpStore.getServers().length > 0);
+</script>
+
+<DropdownMenu.Sub onOpenChange={(open) => open && toolsPanel.handleOpen()}>
+	<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
+		<PencilRuler class="h-4 w-4" />
+
+		<span>Tools</span>
+	</DropdownMenu.SubTrigger>
+
+	<DropdownMenu.SubContent class="w-72 p-0">
+		{#if toolsPanel.totalToolCount === 0}
+			{#if toolsStore.loading}
+				<div class="px-3 py-4 text-center text-sm text-muted-foreground">
+					<Loader2 class="mx-auto mb-1 h-4 w-4 animate-spin" />
+
+					Loading tools...
+				</div>
+			{:else if toolsStore.isToolsEndpointUnreachable}
+				<div class="grid gap-2.5 px-3 py-4 text-sm text-muted-foreground">
+					<span class="flex gap-2">
+						<Info class="mt-0.5 h-4 w-4 shrink-0" />
+
+						<span>
+							Run llama-server with <code>{CLI_FLAGS.TOOLS}</code> flag to enable
+
+							<strong>Built-in Tools</strong>.
+						</span>
+					</span>
+
+					<span class="flex gap-2">
+						<Info class="mt-0.5 h-4 w-4 shrink-0" />
+
+						<span>
+							{hasMcpServersAvailable ? 'Enable' : 'Add'} MCP Server(s) to access
+
+							<strong>MCP Tools</strong>.
+						</span>
+					</span>
+				</div>
+			{:else if toolsStore.error}
+				<div class="px-3 py-4 text-center text-sm text-muted-foreground">Failed to load tools</div>
+			{:else if toolsPanel.noToolsInfoMessage}
+				<div class="flex gap-2 px-3 py-4 text-sm text-muted-foreground">
+					<Info class="mt-0.5 h-4 w-4 shrink-0" />
+
+					<span>{toolsPanel.noToolsInfoMessage}</span>
+				</div>
+			{:else}
+				<div class="px-3 py-4 text-center text-sm text-muted-foreground">No tools available</div>
+			{/if}
+		{:else}
+			<div class="max-h-80 overflow-y-auto p-2 pr-1">
+				{#each toolsPanel.activeGroups as group (group.label)}
+					{@const isExpanded = toolsPanel.expandedGroups.has(group.label)}
+					{@const checked = toolsPanel.isGroupChecked(group)}
+					{@const favicon = toolsPanel.getFavicon(group)}
+
+					<Collapsible.Root
+						open={isExpanded}
+						onOpenChange={() => toolsPanel.toggleGroupExpanded(group.label)}
+					>
+						<div class="flex items-center gap-1">
+							<Collapsible.Trigger
+								class="flex min-w-0 flex-1 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 shrink-0" />
+								{:else}
+									<ChevronRight class="h-3.5 w-3.5 shrink-0" />
+								{/if}
+
+								<span class="inline-flex min-w-0 items-center gap-1.5 font-medium">
+									{#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="truncate">{group.label}</span>
+								</span>
+
+								<span class="ml-auto shrink-0 text-xs text-muted-foreground">
+									{toolsPanel.getEnabledToolCount(group)}/{group.tools.length}
+								</span>
+							</Collapsible.Trigger>
+
+							<Tooltip.Root>
+								<Tooltip.Trigger>
+									{#snippet child({ props })}
+										<Checkbox
+											{...props}
+											{checked}
+											onCheckedChange={() => toolsPanel.toggleGroupByLabel(group.label)}
+											class="mr-2 h-4 w-4 shrink-0"
+										/>
+									{/snippet}
+								</Tooltip.Trigger>
+
+								<Tooltip.Content side="right">
+									<p>
+										{checked ? 'Disable' : 'Enable'}
+										{group.tools.length} tool{group.tools.length !== 1 ? 's' : ''}
+									</p>
+								</Tooltip.Content>
+							</Tooltip.Root>
+						</div>
+
+						<Collapsible.Content>
+							<div class="ml-4 flex flex-col gap-0.5 border-l border-border/50 pl-2">
+								{#each group.tools as entry (entry.key)}
+									{@const enabled = toolsStore.isToolEnabled(entry.key)}
+									<button
+										type="button"
+										class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm transition-colors hover:bg-muted/50"
+										onclick={() => toolsStore.toggleTool(entry.key)}
+									>
+										<span
+											data-slot="checkbox"
+											data-state={enabled ? 'checked' : 'unchecked'}
+											class="flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+										>
+											{#if enabled}
+												<Check class="size-3.5" />
+											{/if}
+										</span>
+
+										<span class="min-w-0 flex-1 truncate font-mono text-[12px]">
+											{entry.definition.function.name}
+										</span>
+									</button>
+								{/each}
+							</div>
+						</Collapsible.Content>
+					</Collapsible.Root>
+				{/each}
+			</div>
+		{/if}
+	</DropdownMenu.SubContent>
+</DropdownMenu.Sub>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionsAdd.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionsAdd.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..08d691c1438f1caf15fd4e4d1edd29e18ef93219
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionsAdd.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { isMobile } from '$lib/stores/viewport.svelte';
+	import ChatFormActionAddDropdown from './ChatFormActionAddDropdown.svelte';
+	import ChatFormActionAddSheet from './ChatFormActionAddSheet.svelte';
+	import ChatFormActionAddButton from './ChatFormActionAddButton.svelte';
+
+	interface Props {
+		disabled?: boolean;
+		hasAudioModality?: boolean;
+		hasVideoModality?: boolean;
+		hasMcpPromptsSupport?: boolean;
+		hasMcpResourcesSupport?: boolean;
+		hasVisionModality?: boolean;
+		onFileUpload?: () => void;
+		onMcpPromptClick?: () => void;
+		onMcpResourcesClick?: () => void;
+		onMcpSettingsClick?: () => void;
+		onSystemPromptClick?: () => void;
+	}
+
+	let {
+		disabled = false,
+		hasAudioModality = false,
+		hasVideoModality = false,
+		hasMcpPromptsSupport = false,
+		hasMcpResourcesSupport = false,
+		hasVisionModality = false,
+		onFileUpload,
+		onMcpPromptClick,
+		onMcpResourcesClick,
+		onMcpSettingsClick,
+		onSystemPromptClick
+	}: Props = $props();
+</script>
+
+{#if isMobile.current}
+	<ChatFormActionAddSheet
+		{disabled}
+		{hasAudioModality}
+		{hasVideoModality}
+		{hasVisionModality}
+		{hasMcpPromptsSupport}
+		{hasMcpResourcesSupport}
+		{onFileUpload}
+		{onSystemPromptClick}
+		{onMcpPromptClick}
+		{onMcpResourcesClick}
+	>
+		{#snippet trigger({ disabled, onclick })}
+			<ChatFormActionAddButton {disabled} {onclick} />
+		{/snippet}
+	</ChatFormActionAddSheet>
+{:else}
+	<ChatFormActionAddDropdown
+		{disabled}
+		{hasAudioModality}
+		{hasVideoModality}
+		{hasVisionModality}
+		{hasMcpPromptsSupport}
+		{hasMcpResourcesSupport}
+		{onFileUpload}
+		{onMcpPromptClick}
+		{onMcpResourcesClick}
+		{onMcpSettingsClick}
+		{onSystemPromptClick}
+	/>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionModels.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionModels.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..712326cba60868aa49e54207f14c246795af328a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionModels.svelte
@@ -0,0 +1,193 @@
+<script lang="ts">
+	import { chatStore } from '$lib/stores/chat.svelte';
+	import {
+		modelsStore,
+		modelOptions,
+		selectedModelId,
+		selectedModelName
+	} from '$lib/stores/models.svelte';
+	import { isRouterMode, serverError } from '$lib/stores/server.svelte';
+	import { ModelsSelectorDropdown, ModelsSelectorSheet } from '$lib/components/app';
+	import { isMobile } from '$lib/stores/viewport.svelte';
+	import { activeMessages } from '$lib/stores/conversations.svelte';
+
+	interface Props {
+		disabled?: boolean;
+		forceForegroundText?: boolean;
+		hasAudioModality?: boolean;
+		hasVideoModality?: boolean;
+		hasVisionModality?: boolean;
+		hasModelSelected?: boolean;
+		isSelectedModelInCache?: boolean;
+		submitTooltip?: string;
+		useGlobalSelection?: boolean;
+	}
+
+	let {
+		disabled = false,
+		forceForegroundText = false,
+		hasAudioModality = $bindable(false),
+		hasVideoModality = $bindable(false),
+		hasVisionModality = $bindable(false),
+		hasModelSelected = $bindable(false),
+		isSelectedModelInCache = $bindable(true),
+		submitTooltip = $bindable(''),
+		useGlobalSelection = false
+	}: Props = $props();
+
+	let isRouter = $derived(isRouterMode());
+	let isOffline = $derived(!!serverError());
+
+	let conversationModel = $derived(
+		chatStore.getConversationModel(activeMessages() as DatabaseMessage[])
+	);
+
+	let lastSyncedConversationModel: string | null = null;
+
+	let selectorModel = $derived.by(() => {
+		const storeModel = selectedModelName();
+		if (storeModel && storeModel !== conversationModel) {
+			return storeModel;
+		}
+
+		if (conversationModel) {
+			return conversationModel;
+		}
+
+		return null;
+	});
+
+	$effect(() => {
+		if (conversationModel && conversationModel !== lastSyncedConversationModel) {
+			if (modelOptions().some((m) => m.model === conversationModel)) {
+				modelsStore.selectedModelName = conversationModel;
+				modelsStore.selectModelByName(conversationModel);
+			} else {
+				modelsStore.selectedModelName = null;
+				modelsStore.clearSelection();
+			}
+			lastSyncedConversationModel = conversationModel;
+		} else if (
+			isRouter &&
+			!modelsStore.selectedModelId &&
+			modelsStore.loadedModelIds.length > 0 &&
+			activeMessages().length > 0 &&
+			!conversationModel
+		) {
+			lastSyncedConversationModel = null;
+			const first = modelOptions().find((m) => modelsStore.loadedModelIds.includes(m.model));
+			if (first) modelsStore.selectModelById(first.id);
+		}
+	});
+
+	let activeModelId = $derived.by(() => {
+		const options = modelOptions();
+
+		if (!isRouter) {
+			return options.length > 0 ? options[0].model : null;
+		}
+
+		const selectedId = selectedModelId();
+
+		if (selectedId) {
+			const model = options.find((m) => m.id === selectedId);
+
+			if (model) return model.model;
+		}
+
+		if (conversationModel) {
+			const model = options.find((m) => m.model === conversationModel);
+
+			if (model) return model.model;
+		}
+
+		return null;
+	});
+
+	let modelPropsVersion = $state(0); // Used to trigger reactivity after fetch
+
+	$effect(() => {
+		if (activeModelId) {
+			const cached = modelsStore.getModelProps(activeModelId);
+
+			if (!cached) {
+				modelsStore.fetchModelProps(activeModelId).then(() => {
+					modelPropsVersion++;
+				});
+			}
+		}
+	});
+
+	$effect(() => {
+		void modelPropsVersion;
+
+		hasAudioModality = activeModelId ? modelsStore.modelSupportsAudio(activeModelId) : false;
+	});
+
+	$effect(() => {
+		void modelPropsVersion;
+
+		hasVideoModality = activeModelId ? modelsStore.modelSupportsVideo(activeModelId) : false;
+	});
+
+	$effect(() => {
+		void modelPropsVersion;
+
+		hasVisionModality = activeModelId ? modelsStore.modelSupportsVision(activeModelId) : false;
+	});
+
+	$effect(() => {
+		hasModelSelected = !isRouter || !!conversationModel || !!selectedModelId();
+	});
+
+	$effect(() => {
+		if (!isRouter) {
+			isSelectedModelInCache = true;
+		} else if (conversationModel) {
+			isSelectedModelInCache = modelOptions().some((option) => option.model === conversationModel);
+		} else {
+			const currentModelId = selectedModelId();
+
+			if (!currentModelId) {
+				isSelectedModelInCache = false;
+			} else {
+				isSelectedModelInCache = modelOptions().some((option) => option.id === currentModelId);
+			}
+		}
+	});
+
+	$effect(() => {
+		if (!hasModelSelected) {
+			submitTooltip = 'Please select a model first';
+		} else if (!isSelectedModelInCache) {
+			submitTooltip = 'Selected model is not available, please select another';
+		} else {
+			submitTooltip = '';
+		}
+	});
+
+	let selectorModelRef: ModelsSelectorDropdown | ModelsSelectorSheet | undefined =
+		$state(undefined);
+
+	export function open() {
+		selectorModelRef?.open();
+	}
+</script>
+
+{#if isMobile.current}
+	<ModelsSelectorSheet
+		disabled={disabled || isOffline}
+		bind:this={selectorModelRef}
+		currentModel={selectorModel}
+		{forceForegroundText}
+		{useGlobalSelection}
+	/>
+{:else}
+	<ModelsSelectorDropdown
+		disabled={disabled || isOffline}
+		bind:this={selectorModelRef}
+		currentModel={selectorModel}
+		{forceForegroundText}
+		{useGlobalSelection}
+	/>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionRecord.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionRecord.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..f1b084906d173d6c7f1f226208d0a7bcdeb58e3b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionRecord.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Mic, Square } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+
+	interface Props {
+		class?: string;
+		disabled?: boolean;
+		hasAudioModality?: boolean;
+		isLoading?: boolean;
+		isRecording?: boolean;
+		onMicClick?: () => void;
+	}
+
+	let {
+		class: className = '',
+		disabled = false,
+		hasAudioModality = false,
+		isLoading = false,
+		isRecording = false,
+		onMicClick
+	}: Props = $props();
+</script>
+
+<div class="flex items-center gap-1 {className}">
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Button
+				class="h-8 w-8 rounded-full p-0 {isRecording
+					? 'animate-pulse bg-red-500 text-white hover:bg-red-600'
+					: ''}"
+				disabled={disabled || isLoading || !hasAudioModality}
+				onclick={onMicClick}
+				type="button"
+			>
+				<span class="sr-only">{isRecording ? 'Stop recording' : 'Start recording'}</span>
+
+				{#if isRecording}
+					<Square class="h-4 w-4 animate-pulse fill-white" />
+				{:else}
+					<Mic class="h-4 w-4" />
+				{/if}
+			</Button>
+		</Tooltip.Trigger>
+
+		{#if !hasAudioModality}
+			<Tooltip.Content>
+				<p>Current model does not support audio</p>
+			</Tooltip.Content>
+		{/if}
+	</Tooltip.Root>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionSubmit.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionSubmit.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..eff0364fa06568379f99b78971c132b4ae699f31
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionSubmit.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { ArrowUp } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+
+	interface Props {
+		canSend?: boolean;
+		disabled?: boolean;
+		showErrorState?: boolean;
+		tooltipLabel?: string;
+	}
+
+	let { canSend = false, disabled = false, showErrorState = false, tooltipLabel }: Props = $props();
+
+	let isDisabled = $derived(!canSend || disabled);
+</script>
+
+{#snippet submitButton(props = {})}
+	<Button
+		type="submit"
+		disabled={isDisabled}
+		class={[
+			'md:h-8 md:w-8 h-9 w-9 rounded-full p-0',
+			showErrorState &&
+				'bg-red-400/10 text-red-400 hover:bg-red-400/20 hover:text-red-400 disabled:opacity-100'
+		]}
+		{...props}
+	>
+		<span class="sr-only">Send</span>
+		<ArrowUp class="h-12 w-12" />
+	</Button>
+{/snippet}
+
+{#if tooltipLabel}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			{@render submitButton()}
+		</Tooltip.Trigger>
+
+		<Tooltip.Content>
+			<p>{tooltipLabel}</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+{:else}
+	{@render submitButton()}
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..7be356f2a8daefc23b0227e68fe44062bda3e34c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
@@ -0,0 +1,215 @@
+<script lang="ts">
+	import { Square, SkipForward } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { ChatService } from '$lib/services';
+	import {
+		ChatFormActionsAdd,
+		ChatFormActionModels,
+		ChatFormActionRecord,
+		ChatFormActionSubmit,
+		ChatFormContextGauge
+	} from '$lib/components/app';
+	import { FileTypeCategory, MessageRole } from '$lib/enums';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { config } from '$lib/stores/settings.svelte';
+	import { activeMessages, conversationsStore } from '$lib/stores/conversations.svelte';
+	import {
+		activeProcessingState,
+		isChatStreaming,
+		isLoading as chatIsLoading
+	} from '$lib/stores/chat.svelte';
+	import { getFileTypeCategory } from '$lib/utils';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { ROUTES } from '$lib/constants/routes';
+
+	interface Props {
+		canSend?: boolean;
+		canSubmit?: boolean;
+		class?: string;
+		disabled?: boolean;
+		isLoading?: boolean;
+		isReasoning?: boolean;
+		isRecording?: boolean;
+		showAddButton?: boolean;
+		showModelSelector?: boolean;
+		uploadedFiles?: ChatUploadedFile[];
+		onFileUpload?: () => void;
+		onMicClick?: () => void;
+		onStop?: () => void;
+		onSystemPromptClick?: () => void;
+		onMcpPromptClick?: () => void;
+		onMcpResourcesClick?: () => void;
+	}
+
+	let {
+		canSend = false,
+		canSubmit = false,
+		class: className = '',
+		disabled = false,
+		isLoading = false,
+		isReasoning = false,
+		isRecording = false,
+		showAddButton = true,
+		showModelSelector = true,
+		uploadedFiles = [],
+		onFileUpload,
+		onMicClick,
+		onStop,
+		onSystemPromptClick,
+		onMcpPromptClick,
+		onMcpResourcesClick
+	}: Props = $props();
+
+	let currentConfig = $derived(config());
+
+	let hasMcpPromptsSupport = $derived.by(() => {
+		const perChatOverrides = conversationsStore.getAllMcpServerOverrides();
+
+		return mcpStore.hasPromptsCapability(perChatOverrides);
+	});
+
+	let hasMcpResourcesSupport = $derived.by(() => {
+		const perChatOverrides = conversationsStore.getAllMcpServerOverrides();
+
+		return mcpStore.hasResourcesCapability(perChatOverrides);
+	});
+
+	let hasAudioModality = $state(false);
+	let hasVideoModality = $state(false);
+	let hasVisionModality = $state(false);
+	let hasModelSelected = $state(false);
+	let isSelectedModelInCache = $state(true);
+	let submitTooltip = $state('');
+
+	let hasAudioAttachments = $derived(
+		uploadedFiles.some((file) => getFileTypeCategory(file.type) === FileTypeCategory.AUDIO)
+	);
+	let shouldShowRecordButton = $derived(
+		hasAudioModality && !canSubmit && !hasAudioAttachments && currentConfig.autoMicOnEmpty
+	);
+
+	let selectorModelRef: ChatFormActionModels | undefined = $state(undefined);
+
+	export function openModelSelector() {
+		selectorModelRef?.open();
+	}
+	// the streaming assistant message carries both the completion id and the model that
+	// produced it, targeting reasoning control from the same source keeps them consistent
+	let activeMessage = $derived(
+		conversationsStore.activeMessages[conversationsStore.activeMessages.length - 1]
+	);
+
+	let hasProcessedTokens = $derived.by(() => {
+		if (!page.params.id) return false;
+
+		const messages = activeMessages() as DatabaseMessage[];
+		let totalHistoricalTokens = 0;
+		for (const m of messages) {
+			if (m.role !== MessageRole.ASSISTANT) continue;
+			const timings = m.timings;
+			if (!timings) continue;
+			const agenticLlm = timings.agentic?.llm;
+			if (agenticLlm?.prompt_n != null || agenticLlm?.predicted_n != null) {
+				totalHistoricalTokens += (agenticLlm?.prompt_n ?? 0) + (agenticLlm?.predicted_n ?? 0);
+			} else {
+				totalHistoricalTokens += (timings.prompt_n ?? 0) + (timings.predicted_n ?? 0);
+			}
+		}
+		if (totalHistoricalTokens > 0) return true;
+
+		if (!chatIsLoading() && !isChatStreaming()) return false;
+
+		const processingState = activeProcessingState();
+		if (!processingState) return false;
+		const livePromptTokens = Math.max(
+			processingState.promptTokens ?? 0,
+			processingState.promptProgress?.processed ?? 0
+		);
+		const liveOutputTokens = processingState.outputTokensUsed ?? 0;
+		return livePromptTokens > 0 || liveOutputTokens > 0;
+	});
+</script>
+
+<div
+	class="flex w-full items-center gap-3 {className} {showAddButton ? '' : 'justify-end'}"
+	style="container-type: inline-size"
+>
+	{#if showAddButton}
+		<div class="mr-auto flex items-center gap-2">
+			<ChatFormActionsAdd
+				{disabled}
+				{hasAudioModality}
+				{hasVideoModality}
+				{hasVisionModality}
+				{hasMcpPromptsSupport}
+				{hasMcpResourcesSupport}
+				{onFileUpload}
+				{onSystemPromptClick}
+				{onMcpPromptClick}
+				{onMcpResourcesClick}
+				onMcpSettingsClick={() => goto(ROUTES.MCP_SERVERS)}
+			/>
+		</div>
+	{/if}
+
+	<div class="flex items-center gap-1.5">
+		{#if hasProcessedTokens}
+			<ChatFormContextGauge />
+		{/if}
+
+		{#if showModelSelector}
+			<ChatFormActionModels
+				{disabled}
+				bind:this={selectorModelRef}
+				bind:hasAudioModality
+				bind:hasVideoModality
+				bind:hasVisionModality
+				bind:hasModelSelected
+				bind:isSelectedModelInCache
+				bind:submitTooltip
+				forceForegroundText
+				useGlobalSelection
+			/>
+		{/if}
+	</div>
+
+	{#if isReasoning}
+		<Button
+			type="button"
+			variant="secondary"
+			onclick={() =>
+				ChatService.stopReasoning(activeMessage?.completionId ?? '', activeMessage?.model)}
+			class="group h-8 w-8 rounded-full p-0"
+			title="Skip reasoning"
+		>
+			<span class="sr-only">Skip reasoning</span>
+
+			<SkipForward class="h-4 w-4 stroke-muted-foreground group-hover:stroke-foreground" />
+		</Button>
+	{/if}
+
+	{#if isLoading && !canSubmit}
+		<Button
+			type="button"
+			variant="secondary"
+			onclick={onStop}
+			class="group h-8 w-8 rounded-full p-0 hover:bg-destructive/10!"
+		>
+			<span class="sr-only">Stop</span>
+
+			<Square
+				class="h-8 w-8 fill-muted-foreground stroke-muted-foreground group-hover:fill-destructive group-hover:stroke-destructive hover:fill-destructive hover:stroke-destructive"
+			/>
+		</Button>
+	{:else if shouldShowRecordButton}
+		<ChatFormActionRecord {disabled} {hasAudioModality} {isLoading} {isRecording} {onMicClick} />
+	{:else}
+		<ChatFormActionSubmit
+			canSend={canSend && (showModelSelector ? hasModelSelected && isSelectedModelInCache : true)}
+			{disabled}
+			tooltipLabel={submitTooltip}
+			showErrorState={showModelSelector && hasModelSelected && !isSelectedModelInCache}
+		/>
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormReasoningEffortSubmenu.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormReasoningEffortSubmenu.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..cfb01537c9401d6adf0d13e5e5819c3eed0ed9ff
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormReasoningEffortSubmenu.svelte
@@ -0,0 +1,127 @@
+<script lang="ts">
+	import { Check, Info, Lightbulb, LightbulbOff } from '@lucide/svelte';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { ReasoningEffort, MessageRole } from '$lib/enums';
+	import { REASONING_EFFORT_TOKENS } from '$lib/constants/reasoning-effort-tokens';
+	import { REASONING_EFFORT_LEVELS } from '$lib/constants/reasoning-effort';
+	import type { ReasoningEffortLevel } from '$lib/types';
+	import { DIALOG_SUBMENU_CONTENT } from '$lib/constants/css-classes';
+	import {
+		modelsStore,
+		checkModelSupportsThinking,
+		supportsThinking,
+		propsCacheVersion,
+		loadedModelIds
+	} from '$lib/stores/models.svelte';
+	import { chatStore } from '$lib/stores/chat.svelte';
+	import { conversationsStore, activeMessages } from '$lib/stores/conversations.svelte';
+	import { isRouterMode } from '$lib/stores/server.svelte';
+	import type { DatabaseMessage } from '$lib/types/database';
+
+	let thinkingEnabled = $derived(conversationsStore.getThinkingEnabled());
+	let currentEffort = $derived(conversationsStore.getReasoningEffort());
+	let isOff = $derived(!thinkingEnabled);
+	let subOpen = $state(false);
+
+	// Get conversation model from message history
+	let conversationModel = $derived(
+		chatStore.getConversationModel(activeMessages() as DatabaseMessage[])
+	);
+
+	let modelSupportsThinkingFromMessages = $derived.by(() => {
+		const modelId = isRouterMode() ? modelsStore.selectedModelName || conversationModel : null;
+		if (!modelId) return false;
+
+		const messages = conversationsStore.activeMessages;
+
+		return messages.some(
+			(m: DatabaseMessage) =>
+				m.role === MessageRole.ASSISTANT && m.model === modelId && !!m.reasoningContent
+		);
+	});
+
+	let modelSupportsThinking = $derived.by(() => {
+		loadedModelIds();
+		propsCacheVersion();
+
+		if (isRouterMode()) {
+			const modelId = modelsStore.selectedModelName || conversationModel;
+			return checkModelSupportsThinking(modelId ?? '') || modelSupportsThinkingFromMessages;
+		}
+
+		return supportsThinking() || modelSupportsThinkingFromMessages;
+	});
+
+	function isSelected(item: ReasoningEffortLevel): boolean {
+		if (item.isOff) return isOff;
+
+		return thinkingEnabled && currentEffort === item.value;
+	}
+
+	function handleSelection(item: ReasoningEffortLevel) {
+		if (item.isOff) {
+			conversationsStore.setThinkingEnabled(false);
+		} else {
+			conversationsStore.setThinkingEnabled(true);
+			conversationsStore.setReasoningEffort(item.value as ReasoningEffort);
+		}
+		subOpen = false;
+	}
+</script>
+
+{#if modelSupportsThinking}
+	<DropdownMenu.Sub bind:open={subOpen}>
+		<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
+			{#if thinkingEnabled}
+				<Lightbulb class="h-4 w-4 shrink-0 text-amber-400" />
+			{:else}
+				<LightbulbOff class="h-4 w-4 shrink-0 text-muted-foreground" />
+			{/if}
+
+			<span class="flex-1">Thinking</span>
+
+			{#if thinkingEnabled}
+				<span class="text-xs text-muted-foreground">{currentEffort}</span>
+			{:else}
+				<span class="text-xs text-muted-foreground">off</span>
+			{/if}
+		</DropdownMenu.SubTrigger>
+
+		<DropdownMenu.SubContent class={DIALOG_SUBMENU_CONTENT}>
+			{#each REASONING_EFFORT_LEVELS as level (level.value)}
+				<button
+					type="button"
+					class="flex w-full cursor-pointer items-center gap-2"
+					class:bg-accent={isSelected(level)}
+					onclick={() => handleSelection(level)}
+				>
+					<span class="flex-1 text-left">{level.label}</span>
+
+					{#if !level.isOff}
+						<span class="text-[11px] text-muted-foreground opacity-60">
+							{REASONING_EFFORT_TOKENS[level.value] === -1
+								? 'Unlimited'
+								: `Max ${REASONING_EFFORT_TOKENS[level.value].toLocaleString()} tokens`}
+						</span>
+					{/if}
+
+					{#if level.hasInfo}
+						<Tooltip.Root>
+							<Tooltip.Trigger>
+								<Info class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+							</Tooltip.Trigger>
+							<Tooltip.Content side="left">
+								<p>Maximum thinking effort with extended context usage</p>
+							</Tooltip.Content>
+						</Tooltip.Root>
+					{/if}
+
+					{#if isSelected(level)}
+						<Check class="h-4 w-4 shrink-0 text-foreground" />
+					{/if}
+				</button>
+			{/each}
+		</DropdownMenu.SubContent>
+	</DropdownMenu.Sub>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ChatFormContextGauge.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ChatFormContextGauge.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..855cf6ce783dcb3a1ea1be6fb37535a70b8431b5
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ChatFormContextGauge.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import * as HoverCard from '$lib/components/ui/hover-card';
+	import { activeConversation, activeMessages } from '$lib/stores/conversations.svelte';
+	import { chatStore, isChatStreaming, isLoading } from '$lib/stores/chat.svelte';
+	import { formatParameters } from '$lib/utils/formatters';
+	import { useContextGauge } from '$lib/hooks/use-context-gauge.svelte';
+	import ContextGaugeDial from './ContextGaugeDial.svelte';
+	import ContextGaugeDetails from './ContextGaugeDetails.svelte';
+	import ContextGaugeLoadModel from './ContextGaugeLoadModel.svelte';
+	import { colorLevelBgClass, colorLevelTextClass } from './context-gauge';
+
+	const gauge = useContextGauge();
+
+	$effect(() => {
+		const conv = activeConversation();
+		untrack(() => chatStore.setActiveProcessingConversation(conv?.id ?? null));
+	});
+
+	$effect(() => {
+		const conv = activeConversation();
+		const messages = activeMessages() as DatabaseMessage[];
+		if (!conv) return;
+		if (isLoading() || isChatStreaming()) return;
+
+		if (messages.length === 0) {
+			untrack(() => chatStore.clearProcessingState(conv.id));
+			return;
+		}
+
+		untrack(() => chatStore.restoreProcessingStateFromMessages(messages, conv.id));
+	});
+
+	$effect(() => {
+		gauge.startMonitoring();
+	});
+
+	const showProgressBar = $derived(
+		gauge.contextTotal !== null &&
+			gauge.contextTotal > 0 &&
+			(gauge.activeModelId !== null || gauge.isActiveModelLoaded)
+	);
+</script>
+
+<HoverCard.Root>
+	<HoverCard.Trigger class="flex h-5 w-5 cursor-default items-center justify-center">
+		<ContextGaugeDial percent={gauge.contextPercent} level={gauge.colorLevel} />
+	</HoverCard.Trigger>
+
+	<HoverCard.Content
+		side="bottom"
+		class="z-50 w-64 rounded-lg border border-border/50 bg-popover p-3 text-popover-foreground shadow-lg"
+	>
+		<div class="flex flex-col gap-2">
+			<div class="flex items-center gap-2">
+				<span class="font-medium">Context</span>
+				<span class="text-muted-foreground">·</span>
+				<span class="font-mono text-muted-foreground">
+					{formatParameters(gauge.contextUsed)}
+					/ {gauge.contextTotal !== null ? formatParameters(gauge.contextTotal) : '-'}
+				</span>
+			</div>
+
+			{#if gauge.activeModelId !== null && !gauge.isActiveModelLoaded}
+				<ContextGaugeLoadModel
+					modelId={gauge.activeModelId}
+					isLoading={gauge.isActiveModelLoading}
+					onLoad={gauge.loadModel}
+				/>
+			{:else if showProgressBar}
+				<div class="h-1.5 w-full overflow-hidden rounded-full bg-muted">
+					<div
+						class="h-full rounded-full transition-all duration-300 {colorLevelBgClass(
+							gauge.colorLevel
+						)}"
+						style="width: {gauge.contextPercent}%"
+					></div>
+				</div>
+
+				<div class="flex justify-between text-xs text-muted-foreground">
+					<span>
+						<span class={colorLevelTextClass(gauge.colorLevel)}>{gauge.contextPercent}%</span> used
+					</span>
+					<span>
+						{formatParameters((gauge.contextTotal ?? 0) - gauge.contextUsed)} remaining
+					</span>
+				</div>
+			{:else}
+				<div class="text-xs text-muted-foreground">No context info available</div>
+			{/if}
+
+			{#if gauge.hasAnyUsage}
+				<ContextGaugeDetails
+					currentRead={gauge.currentRead}
+					currentFresh={gauge.currentFresh}
+					currentCache={gauge.currentCache}
+					currentOutput={gauge.currentOutput}
+					kvTotal={gauge.kvTotal}
+					cumulativeRead={gauge.cumulativeRead}
+					cumulativeOutput={gauge.cumulativeOutput}
+					cumulativeCacheTotal={gauge.cumulativeCacheTotal}
+					averageTokensPerSecond={gauge.averageTokensPerSecond}
+					transientDetails={gauge.transientDetails}
+				/>
+			{/if}
+		</div>
+	</HoverCard.Content>
+</HoverCard.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeDetailRow.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeDetailRow.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..71c6a33cb1e2542528cb19f090099e05b22c31b1
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeDetailRow.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	interface Props {
+		label: string;
+		value: string;
+		subtitle?: string;
+	}
+
+	let { label, value, subtitle }: Props = $props();
+</script>
+
+<div class="grid gap-1.5">
+	<div class="flex items-baseline justify-between">
+		<span class="text-muted-foreground">{label}</span>
+		<span class="font-mono text-muted-foreground">{value}</span>
+	</div>
+
+	{#if subtitle}
+		<div class="text-[10px] leading-tight text-muted-foreground/70">{subtitle}</div>
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeDetails.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeDetails.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..fdec5aca5a9b981762e4c073fbd9f96e76f2fed5
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeDetails.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+	import { ChevronDown } from '@lucide/svelte';
+	import * as Collapsible from '$lib/components/ui/collapsible';
+	import { STATS_UNITS } from '$lib/constants';
+	import ContextGaugeDetailRow from './ContextGaugeDetailRow.svelte';
+
+	interface Props {
+		currentRead: number;
+		currentFresh: number;
+		currentCache: number;
+		currentOutput: number;
+		kvTotal: number;
+		cumulativeRead: number;
+		cumulativeOutput: number;
+		cumulativeCacheTotal: number;
+		averageTokensPerSecond: number | null;
+		transientDetails: string[];
+	}
+
+	let {
+		currentRead,
+		currentFresh,
+		currentCache,
+		currentOutput,
+		kvTotal,
+		cumulativeRead,
+		cumulativeOutput,
+		cumulativeCacheTotal,
+		averageTokensPerSecond,
+		transientDetails
+	}: Props = $props();
+
+	let open = $state(false);
+
+	const hasCumulative = $derived(cumulativeRead > 0 || cumulativeOutput > 0);
+	const hasCurrent = $derived(currentRead > 0 || currentOutput > 0);
+</script>
+
+<Collapsible.Root bind:open class="mt-3 border-t border-border/50 pt-4">
+	<Collapsible.Trigger
+		class="flex w-full cursor-pointer items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+	>
+		<span>Token usage details</span>
+
+		<ChevronDown class={'ml-auto h-3 w-3 transition-transform' + (open ? ' rotate-180' : '')} />
+	</Collapsible.Trigger>
+
+	<Collapsible.Content class="flex flex-col gap-4 text-xs pt-4">
+		{#if hasCumulative}
+			<div>
+				<h3 class="text-[11px] font-medium uppercase tracking-wide text-muted-foreground/70 mb-2">
+					Across all turns
+				</h3>
+
+				<div class="flex flex-col gap-2">
+					{#if cumulativeRead > 0}
+						<ContextGaugeDetailRow
+							label="Prompt tokens evaluated"
+							value={`${cumulativeRead.toLocaleString()} tok`}
+							subtitle={cumulativeCacheTotal > 0
+								? `${cumulativeCacheTotal.toLocaleString()} reused from KV cache`
+								: undefined}
+						/>
+					{/if}
+					{#if cumulativeOutput > 0}
+						<ContextGaugeDetailRow
+							label="Tokens generated"
+							value={`${cumulativeOutput.toLocaleString()} tok`}
+						/>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
+		{#if hasCurrent}
+			<div>
+				<h3 class="text-[11px] font-medium uppercase tracking-wide text-muted-foreground/70 mb-2">
+					This turn · KV cache
+				</h3>
+
+				<div class="flex flex-col gap-2">
+					{#if currentRead > 0}
+						<ContextGaugeDetailRow
+							label="Prompt"
+							value={`${currentRead.toLocaleString()} tok`}
+							subtitle={currentCache > 0
+								? `${currentFresh.toLocaleString()} fresh + ${currentCache.toLocaleString()} cached`
+								: undefined}
+						/>
+					{/if}
+
+					{#if currentOutput > 0}
+						<ContextGaugeDetailRow
+							label="Generated"
+							value={`${currentOutput.toLocaleString()} tok`}
+						/>
+					{/if}
+
+					<div class="pt-1 mt-0.5 border-t border-border/30">
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">KV cache total</span>
+							<span class="font-mono font-medium">{kvTotal.toLocaleString()} tok</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		{#if averageTokensPerSecond !== null}
+			<div class="pt-1.5 mt-1 border-t border-border/30">
+				<ContextGaugeDetailRow
+					label="Avg speed"
+					value={`${averageTokensPerSecond.toFixed(1)}${STATS_UNITS.TOKENS_PER_SECOND}`}
+				/>
+			</div>
+		{/if}
+
+		{#each transientDetails as detail (detail)}
+			<div class="font-mono text-muted-foreground">{detail}</div>
+		{/each}
+	</Collapsible.Content>
+</Collapsible.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeDial.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeDial.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..6e2616d363da96a78eba8e951e10afa3a231950c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeDial.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { ColorLevel } from './context-gauge';
+	import { colorLevelTextClass } from './context-gauge';
+
+	interface Props {
+		percent: number | null;
+		level: ColorLevel;
+		size?: 'sm' | 'md';
+	}
+
+	let { percent, level, size = 'sm' }: Props = $props();
+
+	const RADIUS = 11;
+	const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+	const strokeLevelClass = $derived(colorLevelTextClass(level));
+	const dimensions = $derived(size === 'md' ? 'h-6 w-6' : 'h-5 w-5');
+	const strokeWidth = $derived(size === 'md' ? 4 : 3);
+</script>
+
+<svg viewBox="0 0 32 32" fill="none" class={dimensions}>
+	<circle
+		cx="16"
+		cy="16"
+		r={RADIUS}
+		stroke="currentColor"
+		stroke-opacity="0.1"
+		stroke-width={strokeWidth}
+	/>
+
+	<circle
+		cx="16"
+		cy="16"
+		r={RADIUS}
+		class="transition-colors duration-300 {strokeLevelClass}"
+		stroke="currentColor"
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-dasharray={CIRCUMFERENCE}
+		stroke-dashoffset={percent !== null ? CIRCUMFERENCE * (1 - percent / 100) : CIRCUMFERENCE}
+		transform="rotate(-90 16 16)"
+	/>
+</svg>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeLoadModel.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeLoadModel.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..24a67cfdfd6be774c7b802c7dd1ce7c6acadcfb8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/ContextGaugeLoadModel.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Loader2 } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+
+	interface Props {
+		modelId: string | null;
+		isLoading: boolean;
+		onLoad: () => void;
+	}
+
+	let { modelId, isLoading, onLoad }: Props = $props();
+</script>
+
+{#if modelId !== null && !isLoading}
+	<div class="flex flex-col gap-2 border-t border-border/50 pt-2 text-xs text-muted-foreground">
+		<span>Available context size is only visible once the model is loaded.</span>
+		<Button size="sm" variant="secondary" class="self-start" onclick={onLoad}>Load model</Button>
+	</div>
+{:else if isLoading}
+	<div class="flex items-center gap-2 border-t border-border/50 pt-2 text-xs text-muted-foreground">
+		<Loader2 class="h-3.5 w-3.5 animate-spin" />
+		<span>Loading model...</span>
+	</div>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/context-gauge.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/context-gauge.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5b001001564c1bf0cc264a15ce08ecc68ab79e24
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormContextGauge/context-gauge.ts
@@ -0,0 +1,37 @@
+export type ColorLevel = 'ok' | 'warning' | 'critical' | 'neutral';
+
+const WARNING_THRESHOLD = 80;
+const CRITICAL_THRESHOLD = 95;
+
+export function colorLevelFromPercent(percent: number | null): ColorLevel {
+	if (percent === null) return 'neutral';
+	if (percent >= CRITICAL_THRESHOLD) return 'critical';
+	if (percent >= WARNING_THRESHOLD) return 'warning';
+	return 'ok';
+}
+
+export function colorLevelTextClass(level: ColorLevel): string {
+	switch (level) {
+		case 'critical':
+			return 'text-red-400';
+		case 'warning':
+			return 'text-amber-400';
+		case 'ok':
+			return 'text-muted-foreground';
+		default:
+			return 'text-muted-foreground';
+	}
+}
+
+export function colorLevelBgClass(level: ColorLevel): string {
+	switch (level) {
+		case 'critical':
+			return 'bg-red-500';
+		case 'warning':
+			return 'bg-amber-500';
+		case 'ok':
+			return 'bg-green-500';
+		default:
+			return 'bg-muted';
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormFileInputInvisible.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormFileInputInvisible.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..395ecb2011083fd1f7b737c7d19545bd5d0258dc
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormFileInputInvisible.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+		multiple?: boolean;
+		onFileSelect?: (files: File[]) => void;
+	}
+
+	let { class: className = '', multiple = true, onFileSelect }: Props = $props();
+
+	let fileInputElement: HTMLInputElement | undefined;
+
+	export function click() {
+		fileInputElement?.click();
+	}
+
+	function handleFileSelect(event: Event) {
+		const input = event.target as HTMLInputElement;
+
+		if (input.files) {
+			onFileSelect?.(Array.from(input.files));
+		}
+	}
+</script>
+
+<input
+	bind:this={fileInputElement}
+	type="file"
+	{multiple}
+	onchange={handleFileSelect}
+	class="hidden {className}"
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormMcpResourcesList.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormMcpResourcesList.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..36c82224a67c5731264e63d4b1f935a466d70afc
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormMcpResourcesList.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import {
+		mcpResourceAttachments,
+		mcpHasResourceAttachments
+	} from '$lib/stores/mcp-resources.svelte';
+	import {
+		ChatAttachmentsListItemMcpResource,
+		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)}
+				<ChatAttachmentsListItemMcpResource
+					class={i === 0 ? 'ml-3' : ''}
+					{attachment}
+					onRemove={handleRemove}
+					onclick={() => handleResourceClick(attachment.resource.uri)}
+				/>
+			{/each}
+		</HorizontalScrollCarousel>
+	</div>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerItemHeader.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerItemHeader.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..11ca52049b04f7371ed30dc0ac1fca5272660132
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerItemHeader.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { MCPServerSettingsEntry } from '$lib/types';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+
+	interface Props {
+		server: MCPServerSettingsEntry | undefined;
+		serverLabel: string;
+		title: string;
+		description?: string;
+		titleExtra?: Snippet;
+		subtitle?: Snippet;
+	}
+
+	let { server, serverLabel, title, description, titleExtra, subtitle }: Props = $props();
+
+	let faviconUrl = $derived(server ? mcpStore.getServerFavicon(server.id) : null);
+</script>
+
+<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">
+			{title}
+		</span>
+
+		{#if titleExtra}
+			{@render titleExtra()}
+		{/if}
+	</div>
+
+	{#if description}
+		<p class="mt-0.5 truncate text-sm text-muted-foreground">
+			{description}
+		</p>
+	{/if}
+
+	{#if subtitle}
+		{@render subtitle()}
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerList.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerList.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..6647928b2bf51f576ff1392f7739a1df3e7b966a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerList.svelte
@@ -0,0 +1,81 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+	import { SearchInput } from '$lib/components/app';
+	import ScrollArea from '$lib/components/ui/scroll-area/scroll-area.svelte';
+	import { CHAT_FORM_POPOVER_MAX_HEIGHT } from '$lib/constants';
+
+	interface Props {
+		items: T[];
+		isLoading: boolean;
+		selectedIndex: number;
+		searchQuery: string;
+		showSearchInput: boolean;
+		searchPlaceholder?: string;
+		emptyMessage?: string;
+		itemKey: (item: T, index: number) => string;
+		item: Snippet<[T, number, boolean]>;
+		skeleton?: Snippet;
+		footer?: Snippet;
+	}
+
+	let {
+		items,
+		isLoading,
+		selectedIndex,
+		searchQuery = $bindable(),
+		showSearchInput,
+		searchPlaceholder = 'Search...',
+		emptyMessage = 'No items available',
+		itemKey,
+		item,
+		skeleton,
+		footer
+	}: Props = $props();
+
+	let listContainer = $state<HTMLDivElement | null>(null);
+
+	$effect(() => {
+		if (listContainer && selectedIndex >= 0 && selectedIndex < items.length) {
+			const selectedElement = listContainer.querySelector(
+				`[data-picker-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={searchPlaceholder} bind:value={searchQuery} />
+		</div>
+	{/if}
+
+	<div
+		bind:this={listContainer}
+		class={[`${CHAT_FORM_POPOVER_MAX_HEIGHT} p-2`, showSearchInput && 'pt-13']}
+	>
+		{#if isLoading}
+			{#if skeleton}
+				{@render skeleton()}
+			{/if}
+		{:else if items.length === 0}
+			<div class="py-6 text-center text-sm text-muted-foreground">{emptyMessage}</div>
+		{:else}
+			{#each items as itemData, index (itemKey(itemData, index))}
+				{@render item(itemData, index, index === selectedIndex)}
+			{/each}
+		{/if}
+	</div>
+
+	{#if footer}
+		{@render footer()}
+	{/if}
+</ScrollArea>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerListItem.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerListItem.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..4d82c6b5849ce82755c05392e34cc8befd4d4beb
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerListItem.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		isSelected?: boolean;
+		onclick: () => void;
+		dataIndex?: number;
+		children: Snippet;
+	}
+
+	let { isSelected = false, onclick, dataIndex, children }: Props = $props();
+</script>
+
+<button
+	type="button"
+	data-picker-index={dataIndex}
+	{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'
+		: ''}"
+>
+	{@render children()}
+</button>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerListItemSkeleton.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerListItemSkeleton.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..5a2ab26fc266488d1a07a1aae3dc87834fae5d82
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerListItemSkeleton.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	interface Props {
+		titleWidth?: string;
+		showBadge?: boolean;
+	}
+
+	let { titleWidth = 'w-48', showBadge = false }: Props = $props();
+</script>
+
+<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 {titleWidth} animate-pulse rounded bg-muted"></div>
+
+			{#if showBadge}
+				<div class="h-4 w-12 animate-pulse rounded-full bg-muted"></div>
+			{/if}
+		</div>
+
+		<!-- Description skeleton -->
+		<div class="h-3 w-full animate-pulse rounded bg-muted"></div>
+	</div>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerPopover.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerPopover.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..c43a002e695375132b7adbcc86558e22077e18df
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerPopover.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import * as Popover from '$lib/components/ui/popover';
+
+	interface Props {
+		class?: string;
+		isOpen?: boolean;
+		srLabel?: string;
+		onClose?: () => void;
+		onKeydown?: (event: KeyboardEvent) => void;
+		children: Snippet;
+	}
+
+	let {
+		class: className = '',
+		isOpen = $bindable(false),
+		srLabel = 'Open picker',
+		onClose,
+		onKeydown,
+		children
+	}: Props = $props();
+</script>
+
+<Popover.Root
+	bind:open={isOpen}
+	onOpenChange={(open) => {
+		if (!open) {
+			onClose?.();
+		}
+	}}
+>
+	<Popover.Trigger
+		class="pointer-events-none absolute inset-0 opacity-0"
+		tabindex={-1}
+		aria-hidden="true"
+	>
+		<span class="sr-only">{srLabel}</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={onKeydown}
+		onOpenAutoFocus={(event) => event.preventDefault()}
+	>
+		{@render children()}
+	</Popover.Content>
+</Popover.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPickerMcpPrompts.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPickerMcpPrompts.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..f35d816de92928037e7241a3b1d273631d149317
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPickerMcpPrompts.svelte
@@ -0,0 +1,435 @@
+<script lang="ts">
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { debounce, uuid } from '$lib/utils';
+	import { KeyboardKey } from '$lib/enums';
+	import type { MCPPromptInfo, GetPromptResult, MCPServerSettingsEntry } from '$lib/types';
+	import { SvelteMap } from 'svelte/reactivity';
+	import {
+		ChatFormPickerPopover,
+		ChatFormPickerList,
+		ChatFormPickerListItem,
+		ChatFormPickerItemHeader,
+		ChatFormPickerListItemSkeleton,
+		ChatFormPromptPickerArgumentForm
+	} from '$lib/components/app/chat';
+	import Badge from '$lib/components/ui/badge/badge.svelte';
+
+	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('[ChatFormPickerMcpPrompts] 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 = uuid();
+
+		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 && import.meta.env.VITE_DEBUG) {
+			console.log('[ChatFormPickerMcpPrompts] 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 && import.meta.env.VITE_DEBUG) {
+				console.log('[ChatFormPickerMcpPrompts] 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('[ChatFormPickerMcpPrompts] 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.getServers();
+		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>
+
+<ChatFormPickerPopover
+	bind:isOpen
+	class={className}
+	srLabel="Open prompt picker"
+	{onClose}
+	onKeydown={handleKeydown}
+>
+	{#if selectedPrompt}
+		{@const prompt = selectedPrompt}
+		{@const server = serverSettingsMap.get(prompt.serverName)}
+		{@const serverLabel = server ? mcpStore.getServerLabel(server) : prompt.serverName}
+
+		<div class="p-4">
+			<ChatFormPickerItemHeader
+				{server}
+				{serverLabel}
+				title={prompt.title || prompt.name}
+				description={prompt.description}
+			>
+				{#snippet titleExtra()}
+					{#if prompt.arguments?.length}
+						<Badge variant="secondary">
+							{prompt.arguments.length} arg{prompt.arguments.length > 1 ? 's' : ''}
+						</Badge>
+					{/if}
+				{/snippet}
+			</ChatFormPickerItemHeader>
+
+			<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}
+		<ChatFormPickerList
+			items={filteredPrompts}
+			{isLoading}
+			{selectedIndex}
+			bind:searchQuery={internalSearchQuery}
+			{showSearchInput}
+			searchPlaceholder="Search prompts..."
+			emptyMessage="No MCP prompts available"
+			itemKey={(prompt) => prompt.serverName + ':' + prompt.name}
+		>
+			{#snippet item(prompt, index, isSelected)}
+				{@const server = serverSettingsMap.get(prompt.serverName)}
+				{@const serverLabel = server ? mcpStore.getServerLabel(server) : prompt.serverName}
+
+				<ChatFormPickerListItem
+					dataIndex={index}
+					{isSelected}
+					onclick={() => handlePromptClick(prompt)}
+				>
+					<ChatFormPickerItemHeader
+						{server}
+						{serverLabel}
+						title={prompt.title || prompt.name}
+						description={prompt.description}
+					>
+						{#snippet titleExtra()}
+							{#if prompt.arguments?.length}
+								<Badge variant="secondary">
+									{prompt.arguments.length} arg{prompt.arguments.length > 1 ? 's' : ''}
+								</Badge>
+							{/if}
+						{/snippet}
+					</ChatFormPickerItemHeader>
+				</ChatFormPickerListItem>
+			{/snippet}
+
+			{#snippet skeleton()}
+				<ChatFormPickerListItemSkeleton titleWidth="w-32" showBadge />
+			{/snippet}
+		</ChatFormPickerList>
+	{/if}
+</ChatFormPickerPopover>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPromptPickerArgumentForm.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPromptPickerArgumentForm.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..92572b89522cc7766552c4e84af5c8e365351996
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/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/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPromptPickerArgumentInput.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPromptPickerArgumentInput.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..638d10eeff88eda533e5f3dcbf9d73b9d0e2c2f1
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/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/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpResources.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpResources.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..ed97e1fc7e5eb983f90d5ffe9d3a1007f7d625f4
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickerMcpResources.svelte
@@ -0,0 +1,237 @@
+<script lang="ts">
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { mcpResourceStore } from '$lib/stores/mcp-resources.svelte';
+	import { KeyboardKey } from '$lib/enums';
+	import type { MCPResourceInfo, MCPServerSettingsEntry } from '$lib/types';
+	import { SvelteMap } from 'svelte/reactivity';
+	import { FolderOpen } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import {
+		ChatFormPickerPopover,
+		ChatFormPickerList,
+		ChatFormPickerListItem,
+		ChatFormPickerItemHeader,
+		ChatFormPickerListItemSkeleton
+	} from '$lib/components/app/chat';
+
+	interface Props {
+		class?: string;
+		isOpen?: boolean;
+		searchQuery?: string;
+		onClose?: () => void;
+		onResourceSelect?: (resource: MCPResourceInfo) => void;
+		onBrowse?: () => void;
+	}
+
+	let {
+		class: className = '',
+		isOpen = false,
+		searchQuery = '',
+		onClose,
+		onResourceSelect,
+		onBrowse
+	}: Props = $props();
+
+	let resources = $state<MCPResourceInfo[]>([]);
+	let isLoading = $state(false);
+	let selectedIndex = $state(0);
+	let internalSearchQuery = $state('');
+
+	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) {
+			loadResources();
+			selectedIndex = 0;
+		}
+	});
+
+	$effect(() => {
+		if (filteredResources.length > 0 && selectedIndex >= filteredResources.length) {
+			selectedIndex = 0;
+		}
+	});
+
+	async function loadResources() {
+		isLoading = true;
+
+		try {
+			const perChatOverrides = conversationsStore.getAllMcpServerOverrides();
+			const initialized = await mcpStore.ensureInitialized(perChatOverrides);
+
+			if (!initialized) {
+				resources = [];
+
+				return;
+			}
+
+			await mcpStore.fetchAllResources();
+			resources = mcpResourceStore.getAllResourceInfos();
+		} catch (error) {
+			console.error('[ChatFormPickerMcpResources] Failed to load resources:', error);
+			resources = [];
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function handleResourceClick(resource: MCPResourceInfo) {
+		mcpStore.attachResource(resource.uri);
+
+		onResourceSelect?.(resource);
+		onClose?.();
+	}
+
+	function isResourceAttached(uri: string): boolean {
+		return mcpResourceStore.isAttached(uri);
+	}
+
+	export function handleKeydown(event: KeyboardEvent): boolean {
+		if (!isOpen) return false;
+
+		if (event.key === KeyboardKey.ESCAPE) {
+			event.preventDefault();
+			onClose?.();
+
+			return true;
+		}
+
+		if (event.key === KeyboardKey.ARROW_DOWN) {
+			event.preventDefault();
+
+			if (filteredResources.length > 0) {
+				selectedIndex = (selectedIndex + 1) % filteredResources.length;
+			}
+
+			return true;
+		}
+
+		if (event.key === KeyboardKey.ARROW_UP) {
+			event.preventDefault();
+			if (filteredResources.length > 0) {
+				selectedIndex = selectedIndex === 0 ? filteredResources.length - 1 : selectedIndex - 1;
+			}
+
+			return true;
+		}
+
+		if (event.key === KeyboardKey.ENTER) {
+			event.preventDefault();
+			if (filteredResources[selectedIndex]) {
+				handleResourceClick(filteredResources[selectedIndex]);
+			}
+
+			return true;
+		}
+
+		return false;
+	}
+
+	let filteredResources = $derived.by(() => {
+		const sortedServers = mcpStore.getServers();
+		const serverOrderMap = new Map(sortedServers.map((server, index) => [server.id, index]));
+
+		const sortedResources = [...resources].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 sortedResources;
+
+		return sortedResources.filter(
+			(resource) =>
+				resource.name.toLowerCase().includes(query) ||
+				resource.title?.toLowerCase().includes(query) ||
+				resource.description?.toLowerCase().includes(query) ||
+				resource.uri.toLowerCase().includes(query)
+		);
+	});
+
+	let showSearchInput = $derived(resources.length > 3);
+</script>
+
+<ChatFormPickerPopover
+	bind:isOpen
+	class={className}
+	srLabel="Open resource picker"
+	{onClose}
+	onKeydown={handleKeydown}
+>
+	<ChatFormPickerList
+		items={filteredResources}
+		{isLoading}
+		{selectedIndex}
+		bind:searchQuery={internalSearchQuery}
+		{showSearchInput}
+		searchPlaceholder="Search resources..."
+		emptyMessage="No MCP resources available"
+		itemKey={(resource) => resource.serverName + ':' + resource.uri}
+	>
+		{#snippet item(resource, index, isSelected)}
+			{@const server = serverSettingsMap.get(resource.serverName)}
+			{@const serverLabel = server ? mcpStore.getServerLabel(server) : resource.serverName}
+
+			<ChatFormPickerListItem
+				dataIndex={index}
+				{isSelected}
+				onclick={() => handleResourceClick(resource)}
+			>
+				<ChatFormPickerItemHeader
+					{server}
+					{serverLabel}
+					title={resource.title || resource.name}
+					description={resource.description}
+				>
+					{#snippet titleExtra()}
+						{#if isResourceAttached(resource.uri)}
+							<span
+								class="inline-flex items-center rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary"
+							>
+								attached
+							</span>
+						{/if}
+					{/snippet}
+
+					{#snippet subtitle()}
+						<p class="mt-0.5 truncate text-xs text-muted-foreground/60">
+							{resource.uri}
+						</p>
+					{/snippet}
+				</ChatFormPickerItemHeader>
+			</ChatFormPickerListItem>
+		{/snippet}
+
+		{#snippet skeleton()}
+			<ChatFormPickerListItemSkeleton />
+		{/snippet}
+
+		{#snippet footer()}
+			{#if onBrowse && resources.length > 3}
+				<Button
+					class="fixed right-3 bottom-3"
+					type="button"
+					onclick={onBrowse}
+					variant="secondary"
+					size="sm"
+				>
+					<FolderOpen class="h-3 w-3" />
+
+					Browse all
+				</Button>
+			{/if}
+		{/snippet}
+	</ChatFormPickerList>
+</ChatFormPickerPopover>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickers.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickers.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..7c5dc85b2a095813432e5cd1a87f5477e83c9b9d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormPickers/ChatFormPickers.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import ChatFormPickerMcpPrompts from './ChatFormPickerMcpPrompts/ChatFormPickerMcpPrompts.svelte';
+	import ChatFormPickerMcpResources from './ChatFormPickerMcpResources.svelte';
+	import type { GetPromptResult, MCPPromptInfo } from '$lib/types';
+
+	interface Props {
+		isPromptPickerOpen?: boolean;
+		promptSearchQuery?: string;
+		isInlineResourcePickerOpen?: boolean;
+		resourceSearchQuery?: string;
+		onPromptPickerClose?: () => void;
+		onInlineResourcePickerClose?: () => void;
+		onInlineResourceSelect?: () => void;
+		onPromptLoadStart?: (
+			placeholderId: string,
+			promptInfo: MCPPromptInfo,
+			args?: Record<string, string>
+		) => void;
+		onPromptLoadComplete?: (placeholderId: string, result: GetPromptResult) => void;
+		onPromptLoadError?: (placeholderId: string, error: string) => void;
+		onInlineResourceBrowse?: () => void;
+	}
+
+	let {
+		isPromptPickerOpen,
+		promptSearchQuery,
+		isInlineResourcePickerOpen,
+		resourceSearchQuery,
+		onPromptPickerClose,
+		onInlineResourcePickerClose,
+		onInlineResourceSelect,
+		onPromptLoadStart,
+		onPromptLoadComplete,
+		onPromptLoadError,
+		onInlineResourceBrowse
+	}: Props = $props();
+
+	let promptPickerRef: ChatFormPickerMcpPrompts | undefined = $state(undefined);
+	let resourcePickerRef: ChatFormPickerMcpResources | undefined = $state(undefined);
+
+	/**
+	 * Delegates keyboard events to the active picker child.
+	 * Returns true if the event was handled.
+	 */
+	export function handleKeydown(event: KeyboardEvent): boolean {
+		if (isPromptPickerOpen && promptPickerRef?.handleKeydown(event)) {
+			return true;
+		}
+
+		if (isInlineResourcePickerOpen && resourcePickerRef?.handleKeydown(event)) {
+			return true;
+		}
+
+		return false;
+	}
+</script>
+
+<ChatFormPickerMcpPrompts
+	bind:this={promptPickerRef}
+	isOpen={isPromptPickerOpen}
+	searchQuery={promptSearchQuery}
+	onClose={onPromptPickerClose}
+	{onPromptLoadStart}
+	{onPromptLoadComplete}
+	{onPromptLoadError}
+/>
+
+<ChatFormPickerMcpResources
+	bind:this={resourcePickerRef}
+	isOpen={isInlineResourcePickerOpen}
+	searchQuery={resourceSearchQuery}
+	onClose={onInlineResourcePickerClose}
+	onResourceSelect={onInlineResourceSelect}
+	onBrowse={onInlineResourceBrowse}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormTextarea.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormTextarea.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..3e683389f18bb93047da5eda47675657ebd8eee8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormTextarea.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { isMobile } from '$lib/stores/viewport.svelte';
+	import { autoResizeTextarea } from '$lib/utils';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		class?: string;
+		disabled?: boolean;
+		onInput?: () => void;
+		onKeydown?: (event: KeyboardEvent) => void;
+		onPaste?: (event: ClipboardEvent) => void;
+		placeholder?: string;
+		value?: string;
+	}
+
+	let {
+		class: className = '',
+		disabled = false,
+		onInput,
+		onKeydown,
+		onPaste,
+		placeholder = 'Ask anything...',
+		value = $bindable('')
+	}: Props = $props();
+
+	let textareaElement: HTMLTextAreaElement | undefined;
+
+	onMount(() => {
+		if (textareaElement) {
+			autoResizeTextarea(textareaElement);
+			textareaElement.focus();
+		}
+	});
+
+	// Expose the textarea element for external access
+	export function getElement() {
+		return textareaElement;
+	}
+
+	export function focus() {
+		if (isMobile.current) return;
+
+		textareaElement?.focus({ preventScroll: true });
+	}
+
+	export function resetHeight() {
+		if (textareaElement) {
+			textareaElement.style.height = '1rem';
+		}
+	}
+</script>
+
+<div class="flex-1 {className}">
+	<textarea
+		bind:this={textareaElement}
+		bind:value
+		class={[
+			'text-md min-h-12 w-full resize-none border-0 bg-transparent p-0 leading-6 outline-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0',
+			disabled && 'cursor-not-allowed'
+		]}
+		style="max-height: var(--max-message-height);"
+		{disabled}
+		onkeydown={onKeydown}
+		oninput={(event) => {
+			autoResizeTextarea(event.currentTarget);
+			onInput?.();
+		}}
+		onpaste={onPaste}
+		{placeholder}
+	></textarea>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessage.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessage.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..2b4a3f9d393c13ed9cf414f44a02a9aaa4fce5af
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessage.svelte
@@ -0,0 +1,401 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	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/database.service';
+	import { SYSTEM_MESSAGE_PLACEHOLDER } from '$lib/constants';
+	import { REASONING_TAGS } from '$lib/constants/agentic';
+	import { MessageRole, AttachmentType, AgenticSectionType } from '$lib/enums';
+	import { fadeInView } from '$lib/actions/fade-in-view.svelte';
+	import {
+		ChatMessageAssistant,
+		ChatMessageUser,
+		ChatMessageSystem,
+		ChatMessageMcpPrompt
+	} from '$lib/components/app/chat';
+	import { parseFilesToMessageExtras } from '$lib/utils/browser-only';
+	import { deriveAgenticSections } from '$lib/utils';
+	import type { DatabaseMessageExtraMcpPrompt } from '$lib/types';
+	import { ROUTES } from '$lib/constants/routes';
+
+	interface Props {
+		class?: string;
+		message: DatabaseMessage;
+		toolMessages?: DatabaseMessage[];
+		isLastAssistantMessage?: boolean;
+		isLastUserMessage?: boolean;
+		nextAssistantMessage?: DatabaseMessage | null;
+		siblingInfo?: ChatMessageSiblingInfo | null;
+	}
+
+	let {
+		class: className = '',
+		message,
+		toolMessages = [],
+		isLastAssistantMessage = false,
+		isLastUserMessage = false,
+		nextAssistantMessage = null,
+		siblingInfo = null
+	}: Props = $props();
+
+	const chatActions = getChatActionsContext();
+
+	let deletionInfo = $state<{
+		totalCount: number;
+		userMessages: number;
+		assistantMessages: number;
+		messageTypes: string[];
+	} | null>(null);
+	let editedContent = $derived(message.content);
+
+	let rawEditContent = $derived.by(() => {
+		if (message.role !== MessageRole.ASSISTANT) return undefined;
+
+		const sections = deriveAgenticSections(message, toolMessages, [], false);
+		const parts: string[] = [];
+
+		for (const section of sections) {
+			switch (section.type) {
+				case AgenticSectionType.REASONING:
+				case AgenticSectionType.REASONING_PENDING:
+					parts.push(`${REASONING_TAGS.START}\n${section.content}\n${REASONING_TAGS.END}`);
+					break;
+
+				case AgenticSectionType.TEXT:
+					parts.push(section.content);
+					break;
+
+				case AgenticSectionType.TOOL_CALL:
+				case AgenticSectionType.TOOL_CALL_PENDING:
+				case AgenticSectionType.TOOL_CALL_STREAMING: {
+					const callObj: Record<string, unknown> = { name: section.toolName };
+
+					if (section.toolArgs) {
+						try {
+							callObj.arguments = JSON.parse(section.toolArgs);
+						} catch {
+							callObj.arguments = section.toolArgs;
+						}
+					}
+
+					parts.push(JSON.stringify(callObj, null, 2));
+
+					if (section.toolResult) {
+						parts.push(`[Tool Result]\n${section.toolResult}`);
+					}
+
+					break;
+				}
+			}
+		}
+
+		return parts.join('\n\n\n');
+	});
+	let editedExtras = $derived<DatabaseMessageExtra[]>(message.extra ? [...message.extra] : []);
+	let editedUploadedFiles = $state<ChatUploadedFile[]>([]);
+	let isEditing = $state(false);
+	let showDeleteDialog = $state(false);
+	let shouldBranchAfterEdit = $state(false);
+	let textareaElement: HTMLTextAreaElement | undefined = $state();
+
+	let showSaveOnlyOption = $derived(message.role === MessageRole.USER);
+	let showBranchAfterEditOption = $derived(message.role === MessageRole.ASSISTANT);
+
+	setMessageEditContext({
+		get isEditing() {
+			return isEditing;
+		},
+		get editedContent() {
+			return editedContent;
+		},
+		get editedExtras() {
+			return editedExtras;
+		},
+		get editedUploadedFiles() {
+			return editedUploadedFiles;
+		},
+		get originalContent() {
+			return message.role === MessageRole.ASSISTANT
+				? (rawEditContent ?? message.content)
+				: message.content;
+		},
+		get originalExtras() {
+			return message.extra || [];
+		},
+		get showSaveOnlyOption() {
+			return showSaveOnlyOption;
+		},
+		get showBranchAfterEditOption() {
+			return showBranchAfterEditOption;
+		},
+		get shouldBranchAfterEdit() {
+			return shouldBranchAfterEdit;
+		},
+		get messageRole() {
+			return message.role;
+		},
+		get rawEditContent() {
+			return rawEditContent;
+		},
+		setContent: (content: string) => {
+			editedContent = content;
+		},
+		setExtras: (extras: DatabaseMessageExtra[]) => {
+			editedExtras = extras;
+		},
+		setUploadedFiles: (files: ChatUploadedFile[]) => {
+			editedUploadedFiles = files;
+		},
+		setShouldBranchAfterEdit: (value: boolean) => {
+			shouldBranchAfterEdit = value;
+		},
+		save: handleSaveEdit,
+		saveOnly: handleSaveEditOnly,
+		cancel: handleCancelEdit,
+		startEdit: handleEdit
+	});
+
+	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;
+
+		const extra = message.extra[0];
+
+		if (extra.type === AttachmentType.MCP_PROMPT) {
+			return extra as DatabaseMessageExtraMcpPrompt;
+		}
+
+		return null;
+	});
+
+	$effect(() => {
+		const pendingId = pendingEditMessageId();
+
+		if (pendingId && pendingId === message.id && !isEditing) {
+			handleEdit();
+			chatStore.clearPendingEditMessageId();
+		}
+	});
+
+	async function handleCancelEdit() {
+		isEditing = false;
+
+		// If canceling a new system message with placeholder content, remove it without deleting children
+		if (message.role === MessageRole.SYSTEM && message.content === SYSTEM_MESSAGE_PLACEHOLDER) {
+			const conversationDeleted = await chatStore.removeSystemPromptPlaceholder(message.id);
+
+			if (conversationDeleted) {
+				goto(ROUTES.START);
+			}
+
+			return;
+		}
+
+		editedContent =
+			message.role === MessageRole.ASSISTANT
+				? rawEditContent || message.content || ''
+				: message.content;
+		editedExtras = message.extra ? [...message.extra] : [];
+		editedUploadedFiles = [];
+	}
+
+	function handleCopy() {
+		chatActions.copy(message);
+	}
+
+	async function handleConfirmDelete() {
+		if (message.role === MessageRole.SYSTEM) {
+			const conversationDeleted = await chatStore.removeSystemPromptPlaceholder(message.id);
+
+			if (conversationDeleted) {
+				goto(ROUTES.START);
+			}
+		} else {
+			chatActions.delete(message);
+		}
+
+		showDeleteDialog = false;
+	}
+
+	async function handleDelete() {
+		deletionInfo = await chatStore.getDeletionInfo(message.id);
+		showDeleteDialog = true;
+	}
+
+	function handleEdit() {
+		isEditing = true;
+		// Clear temporary placeholder content for system messages
+		if (message.role === MessageRole.SYSTEM && message.content === SYSTEM_MESSAGE_PLACEHOLDER) {
+			editedContent = '';
+		} else if (message.role === MessageRole.ASSISTANT) {
+			editedContent = rawEditContent || message.content || '';
+		} else {
+			editedContent = message.content;
+		}
+
+		textareaElement?.focus({ preventScroll: true });
+		editedExtras = message.extra ? [...message.extra] : [];
+		editedUploadedFiles = [];
+
+		setTimeout(() => {
+			if (textareaElement) {
+				textareaElement.focus();
+				textareaElement.setSelectionRange(
+					textareaElement.value.length,
+					textareaElement.value.length
+				);
+			}
+		}, 0);
+	}
+
+	function handleRegenerate(modelOverride?: string) {
+		chatActions.regenerateWithBranching(message, modelOverride);
+	}
+
+	function handleContinue() {
+		chatActions.continueAssistantMessage(message);
+	}
+
+	function handleForkConversation(options: { name: string; includeAttachments: boolean }) {
+		chatActions.forkConversation(message, options);
+	}
+
+	function handleNavigateToSibling(siblingId: string) {
+		chatActions.navigateToSibling(siblingId);
+	}
+
+	async function handleSaveEdit() {
+		if (message.role === MessageRole.SYSTEM) {
+			// System messages: update in place without branching
+			const newContent = editedContent.trim();
+
+			// If content is empty, remove without deleting children
+			if (!newContent) {
+				const conversationDeleted = await chatStore.removeSystemPromptPlaceholder(message.id);
+				isEditing = false;
+				if (conversationDeleted) {
+					goto(ROUTES.START);
+				}
+				return;
+			}
+
+			await DatabaseService.updateMessage(message.id, { content: newContent });
+			const index = conversationsStore.findMessageIndex(message.id);
+			if (index !== -1) {
+				conversationsStore.updateMessageAtIndex(index, { content: newContent });
+			}
+		} else if (message.role === MessageRole.USER) {
+			const finalExtras = await getMergedExtras();
+			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
+			chatActions.editWithReplacement(message, editedContent, shouldBranchAfterEdit);
+		}
+
+		isEditing = false;
+		shouldBranchAfterEdit = false;
+		editedUploadedFiles = [];
+	}
+
+	async function handleSaveEditOnly() {
+		if (message.role === MessageRole.USER) {
+			// For user messages, trim to avoid accidental whitespace
+			const finalExtras = await getMergedExtras();
+			chatActions.editUserMessagePreserveResponses(message, editedContent.trim(), finalExtras);
+		}
+
+		isEditing = false;
+		editedUploadedFiles = [];
+	}
+
+	async function getMergedExtras(): Promise<DatabaseMessageExtra[]> {
+		if (editedUploadedFiles.length === 0) {
+			return editedExtras;
+		}
+
+		const plainFiles = $state.snapshot(editedUploadedFiles);
+		const result = await parseFilesToMessageExtras(plainFiles);
+		const newExtras = result?.extras || [];
+
+		return [...editedExtras, ...newExtras];
+	}
+
+	function handleShowDeleteDialogChange(show: boolean) {
+		showDeleteDialog = show;
+	}
+</script>
+
+<div use:fadeInView class="chat-message">
+	{#if message.role === MessageRole.SYSTEM}
+		<ChatMessageSystem
+			bind:textareaElement
+			class={className}
+			{deletionInfo}
+			{message}
+			onConfirmDelete={handleConfirmDelete}
+			onCopy={handleCopy}
+			onDelete={handleDelete}
+			onEdit={handleEdit}
+			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 === MessageRole.USER}
+		<ChatMessageUser
+			class={className}
+			{deletionInfo}
+			{isLastUserMessage}
+			{message}
+			{nextAssistantMessage}
+			onConfirmDelete={handleConfirmDelete}
+			onCopy={handleCopy}
+			onDelete={handleDelete}
+			onEdit={handleEdit}
+			onForkConversation={handleForkConversation}
+			onNavigateToSibling={handleNavigateToSibling}
+			onShowDeleteDialogChange={handleShowDeleteDialogChange}
+			{showDeleteDialog}
+			{siblingInfo}
+		/>
+	{:else}
+		<ChatMessageAssistant
+			bind:textareaElement
+			class={className}
+			{deletionInfo}
+			{isLastAssistantMessage}
+			{message}
+			{toolMessages}
+			messageContent={message.content}
+			onConfirmDelete={handleConfirmDelete}
+			onContinue={handleContinue}
+			onCopy={handleCopy}
+			onDelete={handleDelete}
+			onEdit={handleEdit}
+			onForkConversation={handleForkConversation}
+			onNavigateToSibling={handleNavigateToSibling}
+			onRegenerate={handleRegenerate}
+			onShowDeleteDialogChange={handleShowDeleteDialogChange}
+			{showDeleteDialog}
+			{siblingInfo}
+		/>
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistant.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistant.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..6670d9302dc9553e3206027cd6e7920402078d45
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageAssistant/ChatMessageAssistant.svelte
@@ -0,0 +1,399 @@
+<script lang="ts">
+	import {
+		ChatMessageAgenticContent,
+		ChatMessageActionIcons,
+		ChatMessageEditForm,
+		ChatMessageStatistics,
+		ModelBadge,
+		ModelsSelectorDropdown
+	} from '$lib/components/app';
+	import { getMessageEditContext } from '$lib/contexts';
+	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
+	import { isLoading, isChatStreaming } from '$lib/stores/chat.svelte';
+	import { copyToClipboard, deriveAgenticSections, modelLoadProgressText } from '$lib/utils';
+	import { AgenticSectionType, ChatMessageStatisticsMode } from '$lib/enums';
+	import { REASONING_TAGS } from '$lib/constants/agentic';
+	import { fade } from 'svelte/transition';
+	import { MessageRole } from '$lib/enums';
+	import { config } from '$lib/stores/settings.svelte';
+	import { isRouterMode } from '$lib/stores/server.svelte';
+	import { modelsStore } from '$lib/stores/models.svelte';
+	import { ServerModelStatus } from '$lib/enums';
+
+	import { hasAgenticContent } from '$lib/utils';
+
+	interface Props {
+		class?: string;
+		deletionInfo: {
+			totalCount: number;
+			userMessages: number;
+			assistantMessages: number;
+			messageTypes: string[];
+		} | null;
+		isLastAssistantMessage?: boolean;
+		message: DatabaseMessage;
+		toolMessages?: DatabaseMessage[];
+		messageContent: string | undefined;
+		onCopy: () => void;
+		onConfirmDelete: () => void;
+		onContinue?: () => void;
+		onDelete: () => void;
+		onEdit?: () => void;
+		onForkConversation?: (options: { name: string; includeAttachments: boolean }) => void;
+		onNavigateToSibling?: (siblingId: string) => void;
+		onRegenerate: (modelOverride?: string) => void;
+		onShowDeleteDialogChange: (show: boolean) => void;
+		showDeleteDialog: boolean;
+		siblingInfo?: ChatMessageSiblingInfo | null;
+		textareaElement?: HTMLTextAreaElement;
+	}
+
+	let {
+		class: className = '',
+		deletionInfo,
+		isLastAssistantMessage = false,
+		message,
+		toolMessages = [],
+		messageContent,
+		onConfirmDelete,
+		onContinue,
+		onCopy,
+		onDelete,
+		onEdit,
+		onForkConversation,
+		onNavigateToSibling,
+		onRegenerate,
+		onShowDeleteDialogChange,
+		showDeleteDialog,
+		siblingInfo = null,
+		textareaElement = $bindable()
+	}: Props = $props();
+
+	// Get edit context
+	const editCtx = getMessageEditContext();
+
+	const isAgentic = $derived(hasAgenticContent(message, toolMessages));
+	const processingState = useProcessingState();
+
+	let currentConfig = $derived(config());
+	let isRouter = $derived(isRouterMode());
+	let showRawOutput = $state(false);
+
+	let rawOutputContent = $derived.by(() => {
+		const sections = deriveAgenticSections(message, toolMessages, [], false);
+		const parts: string[] = [];
+
+		for (const section of sections) {
+			switch (section.type) {
+				case AgenticSectionType.REASONING:
+				case AgenticSectionType.REASONING_PENDING:
+					parts.push(`${REASONING_TAGS.START}\n${section.content}\n${REASONING_TAGS.END}`);
+					break;
+
+				case AgenticSectionType.TEXT:
+					parts.push(section.content);
+					break;
+
+				case AgenticSectionType.TOOL_CALL:
+				case AgenticSectionType.TOOL_CALL_PENDING:
+				case AgenticSectionType.TOOL_CALL_STREAMING: {
+					const callObj: Record<string, unknown> = { name: section.toolName };
+
+					if (section.toolArgs) {
+						try {
+							callObj.arguments = JSON.parse(section.toolArgs);
+						} catch {
+							callObj.arguments = section.toolArgs;
+						}
+					}
+
+					parts.push(JSON.stringify(callObj, null, 2));
+
+					if (section.toolResult) {
+						parts.push(`[Tool Result]\n${section.toolResult}`);
+					}
+
+					break;
+				}
+			}
+		}
+
+		return parts.join('\n\n\n');
+	});
+
+	let displayedModel = $derived(message.model ?? null);
+
+	// model being switched to while it loads, so the selector bar tracks it
+	let pendingModel = $state<string | null>(null);
+
+	let isCurrentlyLoading = $derived(isLoading());
+	let isStreaming = $derived(isChatStreaming());
+	let hasNoContent = $derived(!message?.content?.trim());
+	let isActivelyProcessing = $derived(isCurrentlyLoading || isStreaming);
+
+	// during a router auto-load the message has no model yet, so target the selected one
+	let loadTargetModel = $derived(message.model ?? modelsStore.selectedModelName);
+	let modelLoadProgress = $derived(
+		isRouter && loadTargetModel ? modelsStore.getLoadProgress(loadTargetModel) : null
+	);
+	let modelLoadingText = $derived(modelLoadProgressText(modelLoadProgress));
+
+	let showProcessingInfoTop = $derived(
+		message?.role === MessageRole.ASSISTANT &&
+			isActivelyProcessing &&
+			hasNoContent &&
+			!isAgentic &&
+			isLastAssistantMessage
+	);
+
+	let showProcessingInfoBottom = $derived(
+		message?.role === MessageRole.ASSISTANT &&
+			isActivelyProcessing &&
+			(!hasNoContent || isAgentic) &&
+			isLastAssistantMessage
+	);
+
+	let assistantEl: HTMLDivElement | undefined = $state();
+	let lastUserMessageHeight = $state(0);
+	let assistantMarginTop = $state(0);
+
+	$effect(() => {
+		if (!assistantEl) return;
+
+		assistantMarginTop = Math.round(parseFloat(getComputedStyle(assistantEl).marginTop));
+
+		const chatMessageEl = assistantEl.closest('.chat-message');
+		const previousChatMessage = chatMessageEl?.previousElementSibling;
+		const userMessageEl = previousChatMessage?.querySelector(
+			'.chat-message-user'
+		) as HTMLElement | null;
+
+		if (!userMessageEl) {
+			lastUserMessageHeight = 0;
+			return;
+		}
+
+		const updateHeight = () => {
+			const rect = userMessageEl.getBoundingClientRect();
+			const marginTop = Math.round(parseFloat(getComputedStyle(userMessageEl).marginTop));
+			lastUserMessageHeight = Math.round(rect.height + marginTop);
+		};
+
+		updateHeight();
+
+		const resizeObserver = new ResizeObserver(updateHeight);
+		resizeObserver.observe(userMessageEl);
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	});
+
+	function handleCopyModel() {
+		void copyToClipboard(displayedModel ?? '');
+	}
+
+	$effect(() => {
+		if (showProcessingInfoTop || showProcessingInfoBottom) {
+			processingState.startMonitoring();
+		}
+	});
+</script>
+
+<div
+	bind:this={assistantEl}
+	class="chat-message-assistant text-md group w-full leading-7.5 {className}"
+	style:--last-user-message-height={lastUserMessageHeight > 0
+		? `${lastUserMessageHeight}px`
+		: undefined}
+	style:--assistant-margin-top={assistantMarginTop > 0 ? `${assistantMarginTop}px` : undefined}
+	role="group"
+	aria-label="Assistant message with actions"
+>
+	{#if showProcessingInfoTop}
+		<div class="mt-6 w-full max-w-3xl" in:fade>
+			<div class="processing-container">
+				<span class="processing-text">
+					{modelLoadingText ??
+						processingState.getPromptProgressText() ??
+						processingState.getProcessingMessage() ??
+						'Processing...'}
+				</span>
+			</div>
+		</div>
+	{/if}
+
+	{#if editCtx.isEditing}
+		<ChatMessageEditForm />
+	{:else if message.role === MessageRole.ASSISTANT}
+		{#if showRawOutput}
+			<pre class="raw-output">{rawOutputContent || ''}</pre>
+		{:else}
+			<ChatMessageAgenticContent
+				{message}
+				{toolMessages}
+				isStreaming={isChatStreaming()}
+				{isLastAssistantMessage}
+			/>
+		{/if}
+	{:else}
+		<div class="text-sm whitespace-pre-wrap">
+			{messageContent}
+		</div>
+	{/if}
+
+	{#if showProcessingInfoBottom}
+		<div class="mt-4 w-full max-w-3xl" in:fade>
+			<div class="processing-container">
+				<span class="processing-text">
+					{modelLoadingText ??
+						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 isRouter}
+					<ModelsSelectorDropdown
+						currentModel={pendingModel ?? displayedModel}
+						disabled={isLoading()}
+						onModelChange={async (modelId: string, modelName: string) => {
+							const status = modelsStore.getModelStatus(modelId);
+
+							if (status !== ServerModelStatus.LOADED) {
+								pendingModel = modelId;
+
+								try {
+									await modelsStore.loadModel(modelId);
+								} finally {
+									pendingModel = null;
+								}
+							}
+
+							onRegenerate(modelName);
+							return true;
+						}}
+					/>
+				{:else}
+					<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
+						mode={ChatMessageStatisticsMode.GENERATION}
+						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}
+					/>
+				{:else if isLoading() && currentConfig.showMessageStats}
+					{@const liveStats = processingState.getLiveProcessingStats()}
+					{@const genStats = processingState.getLiveGenerationStats()}
+
+					{#if genStats}
+						<ChatMessageStatistics
+							mode={ChatMessageStatisticsMode.GENERATION}
+							isLive
+							promptTokens={liveStats?.tokensProcessed}
+							promptMs={liveStats?.timeMs}
+							predictedTokens={genStats.tokensGenerated}
+							predictedMs={genStats.timeMs}
+						/>
+					{/if}
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	{#if message.timestamp && !editCtx.isEditing}
+		<ChatMessageActionIcons
+			role={MessageRole.ASSISTANT}
+			justify="start"
+			actionsPosition="left"
+			{siblingInfo}
+			{showDeleteDialog}
+			{deletionInfo}
+			{onCopy}
+			{onEdit}
+			{onRegenerate}
+			onContinue={currentConfig.enableContinueGeneration ? onContinue : undefined}
+			{onForkConversation}
+			{onDelete}
+			{onConfirmDelete}
+			{onNavigateToSibling}
+			{onShowDeleteDialogChange}
+			showRawOutputSwitch={currentConfig.showRawOutputSwitch}
+			rawOutputEnabled={showRawOutput}
+			onRawOutputToggle={(enabled) => (showRawOutput = enabled)}
+		/>
+	{/if}
+</div>
+
+<style>
+	:global(.chat-message):last-child .chat-message-assistant {
+		--assistant-min-height-offset: calc(
+			var(--last-user-message-height, 19rem) + var(--chat-form-height, 6rem) +
+				var(--chat-form-bottom-position, 0.5rem) + var(--chat-form-padding-top, 6rem) +
+				var(--assistant-margin-top, 3rem)
+		);
+		min-height: calc(100dvh - var(--assistant-min-height-offset));
+
+		@media (width > 768px) {
+			--assistant-min-height-offset: calc(
+				var(--last-user-message-height, 18rem) + var(--chat-form-height, 6rem) +
+					var(--chat-form-bottom-position, 1rem) + var(--chat-form-padding-top, 6rem) +
+					var(--assistant-margin-top, 3rem)
+			);
+		}
+	}
+
+	.processing-container {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.5rem;
+	}
+
+	.processing-text {
+		background: linear-gradient(
+			90deg,
+			var(--muted-foreground),
+			var(--foreground),
+			var(--muted-foreground)
+		);
+		background-size: 200% 100%;
+		background-clip: text;
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		animation: shine 1s linear infinite;
+		font-weight: 500;
+		font-size: 0.875rem;
+	}
+
+	@keyframes shine {
+		to {
+			background-position: -200% 0;
+		}
+	}
+
+	.raw-output {
+		width: 100%;
+		max-width: 48rem;
+		margin-top: 1.5rem;
+		padding: 1rem 1.25rem;
+		border-radius: 1rem;
+		background: hsl(var(--muted) / 0.3);
+		color: var(--foreground);
+		font-size: 0.875rem;
+		line-height: 1.6;
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+</style>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageMcpPrompt/ChatMessageMcpPrompt.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageMcpPrompt/ChatMessageMcpPrompt.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..2dcb36baf6800b8119afdd69724b0f98c24bfc06
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageMcpPrompt/ChatMessageMcpPrompt.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+	import {
+		ChatMessageActionIcons,
+		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%]">
+				<ChatMessageActionIcons
+					actionsPosition="right"
+					{deletionInfo}
+					justify="end"
+					{onConfirmDelete}
+					{onCopy}
+					{onDelete}
+					{onEdit}
+					{onNavigateToSibling}
+					{onShowDeleteDialogChange}
+					{siblingInfo}
+					{showDeleteDialog}
+					role={MessageRole.USER}
+				/>
+			</div>
+		{/if}
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageMcpPrompt/ChatMessageMcpPromptContent.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageMcpPrompt/ChatMessageMcpPromptContent.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..3d5dec3b6ac956e8cb3387d85178699088b07389
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageMcpPrompt/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/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageSystem/ChatMessageSystem.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageSystem/ChatMessageSystem.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..9d3d07a2730b1e2491e3bb1dc6a9c89015e21bef
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageSystem/ChatMessageSystem.svelte
@@ -0,0 +1,232 @@
+<script lang="ts">
+	import { Check, X } from '@lucide/svelte';
+	import { ChatMessageActionIcons, MarkdownContent } from '$lib/components/app';
+	import { Button } from '$lib/components/ui/button';
+	import { Card } from '$lib/components/ui/card';
+	import { INPUT_CLASSES } from '$lib/constants';
+	import { getMessageEditContext } from '$lib/contexts';
+	import { KeyboardKey, MessageRole } from '$lib/enums';
+	import { config } from '$lib/stores/settings.svelte';
+	import { isIMEComposing } from '$lib/utils';
+
+	interface Props {
+		class?: string;
+		message: DatabaseMessage;
+		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;
+		textareaElement?: HTMLTextAreaElement;
+	}
+
+	let {
+		class: className = '',
+		message,
+		siblingInfo = null,
+		showDeleteDialog,
+		deletionInfo,
+		onCopy,
+		onEdit,
+		onDelete,
+		onConfirmDelete,
+		onNavigateToSibling,
+		onShowDeleteDialogChange,
+		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();
+
+	let showExpandButton = $derived(contentHeight > MAX_HEIGHT);
+
+	$effect(() => {
+		if (!messageElement || !message.content.trim()) return;
+
+		if (message.content.includes('\n')) {
+			isMultiline = true;
+		}
+
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const element = entry.target as HTMLElement;
+				const estimatedSingleLineHeight = 24;
+
+				isMultiline = element.offsetHeight > estimatedSingleLineHeight * 1.5;
+				contentHeight = element.scrollHeight;
+			}
+		});
+
+		resizeObserver.observe(messageElement);
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	});
+
+	function toggleExpand() {
+		isExpanded = !isExpanded;
+	}
+</script>
+
+<div
+	aria-label="System message with actions"
+	class="group flex flex-col items-end gap-3 md:gap-2 {className}"
+	role="group"
+>
+	{#if editCtx.isEditing}
+		<div class="w-full max-w-[80%]">
+			<textarea
+				bind:this={textareaElement}
+				value={editCtx.editedContent}
+				class="min-h-[60px] w-full resize-none rounded-2xl px-3 py-2 text-sm {INPUT_CLASSES}"
+				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={editCtx.cancel} size="sm" variant="outline">
+					<X class="mr-1 h-3 w-3" />
+
+					Cancel
+				</Button>
+
+				<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>
+	{:else}
+		{#if message.content.trim()}
+			<div class="relative max-w-[80%]">
+				<button
+					class="group/expand w-full text-left {!isExpanded && showExpandButton
+						? 'cursor-pointer'
+						: 'cursor-auto'}"
+					onclick={showExpandButton && !isExpanded ? toggleExpand : undefined}
+					type="button"
+				>
+					<Card
+						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)); max-height: var(--max-message-height); overflow-wrap: anywhere; word-break: break-word;"
+					>
+						<div
+							class="relative transition-all duration-300 {isExpanded
+								? 'cursor-text select-text'
+								: 'select-none'}"
+							style={!isExpanded && showExpandButton
+								? `max-height: ${MAX_HEIGHT}px;`
+								: 'max-height: none;'}
+						>
+							{#if currentConfig.renderUserContentAsMarkdown}
+								<div bind:this={messageElement} class={isExpanded ? 'cursor-text' : ''}>
+									<MarkdownContent
+										class="markdown-system-content -my-4"
+										content={message.content}
+									/>
+								</div>
+							{:else}
+								<span
+									bind:this={messageElement}
+									class="text-md whitespace-pre-wrap {isExpanded ? 'cursor-text' : ''}"
+								>
+									{message.content}
+								</span>
+							{/if}
+
+							{#if !isExpanded && showExpandButton}
+								<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"
+								>
+									<Button
+										class="rounded-full px-4 py-1.5 text-xs shadow-md"
+										size="sm"
+										variant="outline"
+									>
+										Show full system message
+									</Button>
+								</div>
+							{/if}
+						</div>
+
+						{#if isExpanded && showExpandButton}
+							<div class="mb-2 flex justify-center">
+								<Button
+									class="rounded-full px-4 py-1.5 text-xs"
+									onclick={(e) => {
+										e.stopPropagation();
+										toggleExpand();
+									}}
+									size="sm"
+									variant="outline"
+								>
+									Collapse System Message
+								</Button>
+							</div>
+						{/if}
+					</Card>
+				</button>
+			</div>
+		{/if}
+
+		{#if message.timestamp}
+			<div class="max-w-[80%]">
+				<ChatMessageActionIcons
+					actionsPosition="right"
+					{deletionInfo}
+					justify="end"
+					{onConfirmDelete}
+					{onCopy}
+					{onDelete}
+					{onEdit}
+					{onNavigateToSibling}
+					{onShowDeleteDialogChange}
+					{siblingInfo}
+					{showDeleteDialog}
+					role={MessageRole.USER}
+				/>
+			</div>
+		{/if}
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUser.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUser.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..f7590c3a3158ee397063938a933907f83fc7a4be
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUser.svelte
@@ -0,0 +1,153 @@
+<script lang="ts">
+	import {
+		ChatMessageActionIcons,
+		ChatMessageEditForm,
+		ChatMessageStatistics,
+		ChatMessageUserBubble
+	} from '$lib/components/app/chat';
+	import { getMessageEditContext } from '$lib/contexts';
+	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
+	import { isLoading } from '$lib/stores/chat.svelte';
+	import { MessageRole, ChatMessageStatisticsMode } from '$lib/enums';
+	import { config } from '$lib/stores/settings.svelte';
+
+	interface Props {
+		class?: string;
+		message: DatabaseMessage;
+		siblingInfo?: ChatMessageSiblingInfo | null;
+		deletionInfo: {
+			totalCount: number;
+			userMessages: number;
+			assistantMessages: number;
+			messageTypes: string[];
+		} | null;
+		isLastUserMessage?: boolean;
+		nextAssistantMessage?: DatabaseMessage | null;
+		showDeleteDialog: boolean;
+		onEdit: () => void;
+		onDelete: () => void;
+		onConfirmDelete: () => void;
+		onForkConversation?: (options: { name: string; includeAttachments: boolean }) => void;
+		onShowDeleteDialogChange: (show: boolean) => void;
+		onNavigateToSibling?: (siblingId: string) => void;
+		onCopy: () => void;
+	}
+
+	let {
+		class: className = '',
+		message,
+		siblingInfo = null,
+		deletionInfo,
+		isLastUserMessage = false,
+		nextAssistantMessage = null,
+		showDeleteDialog,
+		onEdit,
+		onDelete,
+		onConfirmDelete,
+		onForkConversation,
+		onShowDeleteDialogChange,
+		onNavigateToSibling,
+		onCopy
+	}: Props = $props();
+
+	// Get contexts
+	const editCtx = getMessageEditContext();
+	const processingState = useProcessingState();
+
+	const currentConfig = $derived(config());
+	const isActivelyProcessing = $derived(isLastUserMessage && isLoading());
+
+	// For agentic turns, prefer the cumulative agentic.llm totals over per-call timings.
+	let storedReadingStats = $derived.by(() => {
+		const timings = nextAssistantMessage?.timings;
+		if (!timings?.prompt_n || !timings?.prompt_ms) return null;
+
+		const agentic = timings.agentic;
+
+		return {
+			promptTokens: agentic ? agentic.llm.prompt_n : timings.prompt_n,
+			promptMs: agentic ? agentic.llm.prompt_ms : timings.prompt_ms
+		};
+	});
+
+	let showStoredReadingStats = $derived(
+		Boolean(currentConfig.showMessageStats) && storedReadingStats !== null
+	);
+
+	let showLiveReadingStats = $derived(
+		Boolean(currentConfig.showMessageStats) && isActivelyProcessing && storedReadingStats === null
+	);
+
+	$effect(() => {
+		if (showLiveReadingStats) {
+			processingState.startMonitoring();
+		}
+	});
+</script>
+
+<div
+	aria-label="User message with actions"
+	class="chat-message-user group flex flex-col items-end gap-3 md:gap-2 {className}"
+	role="group"
+>
+	{#if editCtx.isEditing}
+		<ChatMessageEditForm />
+	{:else}
+		<ChatMessageUserBubble
+			content={message.content}
+			attachments={message.extra}
+			renderMarkdown={true}
+		/>
+
+		{#if showStoredReadingStats}
+			<!-- Reading stats sourced from the assistant message that followed this turn -->
+			<div class="info my-2 grid w-full justify-items-end gap-4 tabular-nums">
+				<div
+					class="inline-flex flex-wrap items-start justify-end gap-2 text-xs text-muted-foreground"
+				>
+					<ChatMessageStatistics
+						mode={ChatMessageStatisticsMode.READING}
+						promptTokens={storedReadingStats!.promptTokens}
+						promptMs={storedReadingStats!.promptMs}
+					/>
+				</div>
+			</div>
+		{:else if showLiveReadingStats}
+			{@const liveStats = processingState.getLiveProcessingStats()}
+			{#if liveStats}
+				<div class="info my-2 grid w-full justify-items-end gap-4 tabular-nums">
+					<div
+						class="inline-flex flex-wrap items-start justify-end gap-2 text-xs text-muted-foreground"
+					>
+						<ChatMessageStatistics
+							mode={ChatMessageStatisticsMode.READING}
+							isLive
+							promptTokens={liveStats.tokensProcessed}
+							promptMs={liveStats.timeMs}
+						/>
+					</div>
+				</div>
+			{/if}
+		{/if}
+
+		{#if message.timestamp}
+			<div class="max-w-[80%]">
+				<ChatMessageActionIcons
+					actionsPosition="right"
+					{deletionInfo}
+					justify="end"
+					{onConfirmDelete}
+					{onCopy}
+					{onDelete}
+					{onEdit}
+					{onForkConversation}
+					{onNavigateToSibling}
+					{onShowDeleteDialogChange}
+					{siblingInfo}
+					{showDeleteDialog}
+					role={MessageRole.USER}
+				/>
+			</div>
+		{/if}
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUserBubble.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUserBubble.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..01fc9d3655050cfad9224eca8e4c07a84f07e1a2
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUserBubble.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { Card } from '$lib/components/ui/card';
+	import { ChatAttachmentsList, MarkdownContent } from '$lib/components/app';
+	import { config } from '$lib/stores/settings.svelte';
+	import type { DatabaseMessageExtra } from '$lib/types/database';
+
+	interface Props {
+		content: string;
+		attachments?: DatabaseMessageExtra[];
+		renderMarkdown?: boolean;
+		textColorClass?: string;
+		cardBgClass?: string;
+		maxHeightStyle?: string;
+	}
+
+	let {
+		content,
+		attachments = [],
+		renderMarkdown = false,
+		textColorClass = 'text-foreground',
+		cardBgClass = 'dark:bg-primary/15',
+		maxHeightStyle = ''
+	}: Props = $props();
+
+	let isMultiline = $state(false);
+	let messageElement: HTMLElement | undefined = $state();
+	const currentConfig = config();
+
+	$effect(() => {
+		if (!messageElement || !content.trim()) return;
+
+		if (content.includes('\n')) {
+			isMultiline = true;
+			return;
+		}
+
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const element = entry.target as HTMLElement;
+				const estimatedSingleLineHeight = 24; // Typical line height for text-md
+
+				isMultiline = element.offsetHeight > estimatedSingleLineHeight * 1.5;
+			}
+		});
+
+		resizeObserver.observe(messageElement);
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	});
+</script>
+
+{#if attachments && attachments.length > 0}
+	<div class="mb-2 max-w-[80%]">
+		<ChatAttachmentsList {attachments} readonly imageHeight="h-40" />
+	</div>
+{/if}
+
+{#if content.trim()}
+	<Card
+		class="chat-message-user-bubble max-w-[80%] overflow-y-auto rounded-[1.125rem] border-none bg-primary/5 px-3.75 py-1.5 {textColorClass} backdrop-blur-md data-multiline:py-2.5 {cardBgClass}"
+		data-multiline={isMultiline ? '' : undefined}
+		style="{maxHeightStyle} overflow-wrap: anywhere; word-break: break-word;"
+	>
+		{#if renderMarkdown && currentConfig.renderUserContentAsMarkdown}
+			<div bind:this={messageElement}>
+				<MarkdownContent class="markdown-user-content -my-4" {content} />
+			</div>
+		{:else}
+			<span bind:this={messageElement} class="text-md whitespace-pre-wrap">
+				{content}
+			</span>
+		{/if}
+	</Card>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUserPending.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUserPending.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..58b3a42e07ac072de0a4a49fed5321d4e7afb481
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUserPending.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { ActionIcon, ChatMessageEditForm, ChatMessageUserBubble } from '$lib/components/app';
+	import { fadeInView } from '$lib/actions/fade-in-view.svelte';
+	import { ArrowUp, Edit, Trash2 } from '@lucide/svelte';
+	import { useMessageEditContext } from '$lib/hooks/use-message-edit-context.svelte';
+
+	interface Props {
+		class?: string;
+		content: string;
+		extras?: DatabaseMessageExtra[];
+		onSendImmediately: () => void;
+		onEdit: (newContent: string, extras?: DatabaseMessageExtra[]) => void;
+		onDelete: () => void;
+	}
+
+	let {
+		class: className = '',
+		content,
+		extras = [],
+		onSendImmediately,
+		onEdit,
+		onDelete
+	}: Props = $props();
+
+	const editCtx = useMessageEditContext({
+		getContent: () => content,
+		getExtras: () => extras,
+		onSave: (content, extras) => onEdit(content, extras)
+	});
+</script>
+
+<div
+	use:fadeInView
+	aria-label="Pending user message"
+	class="group flex flex-col items-end gap-3 transition-opacity hover:opacity-80 md:gap-2 {className} sticky bottom-32"
+	role="group"
+>
+	{#if editCtx.isEditing}
+		<ChatMessageEditForm />
+	{:else}
+		<ChatMessageUserBubble
+			{content}
+			attachments={extras}
+			textColorClass="text-muted-foreground"
+			cardBgClass="dark:bg-primary/8"
+			maxHeightStyle="overflow-wrap: anywhere; word-break: break-word;"
+		/>
+
+		<div class="max-w-[80%]">
+			<div class="relative flex h-6 items-center justify-between">
+				<div class="right-0 flex items-center gap-2 opacity-100 transition-opacity">
+					<div
+						class="pointer-events-auto inset-0 flex items-center gap-1 opacity-0 transition-all duration-150 group-hover:opacity-100"
+					>
+						<ActionIcon icon={Edit} tooltip="Edit" onclick={editCtx.handleEdit} />
+						<ActionIcon icon={Trash2} tooltip="Delete" onclick={onDelete} />
+						<ActionIcon icon={ArrowUp} tooltip="Send immediately" onclick={onSendImmediately} />
+					</div>
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCard.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCard.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..254031979d44922dd12f8cc82340cefce737c19f
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCard.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet, Component } from 'svelte';
+
+	interface Props {
+		icon: Component<{ class?: string }>;
+		message: Snippet;
+		actions: Snippet;
+	}
+
+	let { icon: IconComponent, message, actions }: Props = $props();
+</script>
+
+<div class="my-2 rounded-lg border border-border bg-card p-3">
+	<div class="mb-3 flex items-center gap-2 text-sm">
+		<IconComponent class="h-4 w-4 shrink-0 text-muted-foreground" />
+		<span>
+			{@render message()}
+		</span>
+	</div>
+	<div class="flex flex-wrap items-center gap-2">
+		{@render actions()}
+	</div>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCardContinueRequest.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCardContinueRequest.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..bbb1f0ac2bd6b576608899e7b5ad2a3617859a46
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCardContinueRequest.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { RotateCw } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import ChatMessageActionCard from './ChatMessageActionCard.svelte';
+
+	interface Props {
+		onDecision: (shouldContinue: boolean) => void;
+	}
+
+	let { onDecision }: Props = $props();
+</script>
+
+<ChatMessageActionCard icon={RotateCw}>
+	{#snippet message()}
+		Agentic turn limit reached. Continue?
+	{/snippet}
+
+	{#snippet actions()}
+		<Button size="sm" onclick={() => onDecision(true)}>Continue</Button>
+
+		<Button
+			variant="destructive"
+			size="sm"
+			class="text-destructive hover:text-destructive"
+			onclick={() => onDecision(false)}
+		>
+			Stop
+		</Button>
+	{/snippet}
+</ChatMessageActionCard>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCardPermissionRequest.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCardPermissionRequest.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..4337bb6a1e782a52a09146c9af36dec0196c0066
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCardPermissionRequest.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { ChevronDown, ShieldQuestion } from '@lucide/svelte';
+	import { ChatMessageActionCard } from '$lib/components/app';
+	import { Button, buttonVariants } from '$lib/components/ui/button';
+	import * as ButtonGroup from '$lib/components/ui/button-group';
+	import { cn } from '$lib/components/ui/utils';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import { ToolSource, ToolPermissionDecision } from '$lib/enums';
+	import { TOOL_SERVER_LABELS } from '$lib/constants';
+	import { toolsStore } from '$lib/stores/tools.svelte';
+
+	interface Props {
+		toolName: string;
+		serverLabel: string;
+		onDecision: (decision: ToolPermissionDecision) => void;
+	}
+
+	let { toolName, serverLabel, onDecision }: Props = $props();
+</script>
+
+<ChatMessageActionCard icon={ShieldQuestion}>
+	{#snippet message()}
+		Allow use of <span class="font-semibold">{toolName}</span>{#if serverLabel}
+			from <span class="font-semibold">{serverLabel}</span>{/if}?
+	{/snippet}
+
+	{#snippet actions()}
+		<DropdownMenu.Root>
+			<ButtonGroup.Root class="overflow-hidden rounded-md shadow-sm">
+				<Button
+					variant="secondary"
+					size="sm"
+					class="!rounded-r-none !shadow-none"
+					onclick={() => onDecision(ToolPermissionDecision.ONCE)}
+				>
+					Allow once
+				</Button>
+
+				<ButtonGroup.Separator />
+
+				<DropdownMenu.Trigger
+					class={cn(
+						buttonVariants({ variant: 'secondary', size: 'sm' }),
+						'inline-flex cursor-pointer items-center !rounded-l-none !shadow-none !px-2'
+					)}
+					aria-label="More allow options"
+				>
+					<ChevronDown class="h-3.5 w-3.5" />
+				</DropdownMenu.Trigger>
+			</ButtonGroup.Root>
+
+			<DropdownMenu.Content align="start" class="min-w-[8rem]">
+				<DropdownMenu.Item onclick={() => onDecision(ToolPermissionDecision.ALWAYS)}>
+					Always allow <pre>{toolName}</pre>
+					tool
+				</DropdownMenu.Item>
+				{#if serverLabel}
+					<DropdownMenu.Item onclick={() => onDecision(ToolPermissionDecision.ALWAYS_SERVER)}>
+						Always allow all tools from {serverLabel}
+					</DropdownMenu.Item>
+				{:else}
+					{@const source = toolsStore.getToolSource(toolName)}
+					{@const providerName =
+						source === ToolSource.BUILTIN
+							? TOOL_SERVER_LABELS[ToolSource.BUILTIN]
+							: source === ToolSource.CUSTOM
+								? TOOL_SERVER_LABELS[ToolSource.CUSTOM]
+								: 'MCP Tools'}
+					<DropdownMenu.Item onclick={() => onDecision(ToolPermissionDecision.ALWAYS_SERVER)}>
+						Approve all tools from {providerName}
+					</DropdownMenu.Item>
+				{/if}
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+
+		<Button variant="destructive" size="sm" onclick={() => onDecision(ToolPermissionDecision.DENY)}>
+			Deny
+		</Button>
+	{/snippet}
+</ChatMessageActionCard>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionIcons/ChatMessageActionIcons.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionIcons/ChatMessageActionIcons.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..503a2d086b1a287e6f2a77929074bcb001cf06f5
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionIcons/ChatMessageActionIcons.svelte
@@ -0,0 +1,184 @@
+<script lang="ts">
+	import { Edit, Copy, RefreshCw, Trash2, ArrowRight, GitBranch } from '@lucide/svelte';
+	import {
+		ActionIcon,
+		ChatMessageActionIconsBranchingControls,
+		DialogConfirmation
+	} from '$lib/components/app';
+	import { Switch } from '$lib/components/ui/switch';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import Input from '$lib/components/ui/input/input.svelte';
+	import Label from '$lib/components/ui/label/label.svelte';
+	import { MessageRole } from '$lib/enums';
+	import { activeConversation } from '$lib/stores/conversations.svelte';
+
+	interface Props {
+		role: MessageRole.USER | MessageRole.ASSISTANT;
+		justify: 'start' | 'end';
+		actionsPosition: 'left' | 'right';
+		siblingInfo?: ChatMessageSiblingInfo | null;
+		showDeleteDialog: boolean;
+		deletionInfo: {
+			totalCount: number;
+			userMessages: number;
+			assistantMessages: number;
+			messageTypes: string[];
+		} | null;
+		onCopy: () => void;
+		onEdit?: () => void;
+		onRegenerate?: () => void;
+		onContinue?: () => void;
+		onForkConversation?: (options: { name: string; includeAttachments: boolean }) => void;
+		onDelete: () => void;
+		onConfirmDelete: () => void;
+		onNavigateToSibling?: (siblingId: string) => void;
+		onShowDeleteDialogChange: (show: boolean) => void;
+		showRawOutputSwitch?: boolean;
+		rawOutputEnabled?: boolean;
+		onRawOutputToggle?: (enabled: boolean) => void;
+	}
+
+	let {
+		actionsPosition,
+		deletionInfo,
+		justify,
+		onCopy,
+		onEdit,
+		onConfirmDelete,
+		onContinue,
+		onDelete,
+		onForkConversation,
+		onNavigateToSibling,
+		onShowDeleteDialogChange,
+		onRegenerate,
+		role,
+		siblingInfo = null,
+		showDeleteDialog,
+		showRawOutputSwitch = false,
+		rawOutputEnabled = false,
+		onRawOutputToggle
+	}: Props = $props();
+
+	let showForkDialog = $state(false);
+	let forkName = $state('');
+	let forkIncludeAttachments = $state(true);
+
+	function handleConfirmDelete() {
+		onConfirmDelete();
+		onShowDeleteDialogChange(false);
+	}
+
+	function handleOpenForkDialog() {
+		const conv = activeConversation();
+
+		forkName = `Fork of ${conv?.name ?? 'Conversation'}`;
+		forkIncludeAttachments = true;
+		showForkDialog = true;
+	}
+
+	function handleConfirmFork() {
+		onForkConversation?.({ name: forkName.trim(), includeAttachments: forkIncludeAttachments });
+		showForkDialog = false;
+	}
+</script>
+
+<div class="relative {justify === 'start' ? 'mt-2' : ''} flex h-6 items-center justify-between">
+	<div
+		class="{actionsPosition === 'left'
+			? 'left-0'
+			: 'right-0'} flex items-center gap-2 opacity-100 transition-opacity"
+	>
+		{#if siblingInfo && siblingInfo.totalSiblings > 1}
+			<ChatMessageActionIconsBranchingControls {siblingInfo} {onNavigateToSibling} />
+		{/if}
+
+		<div
+			class="pointer-events-auto inset-0 flex items-center gap-1 opacity-100 transition-all duration-150"
+		>
+			<ActionIcon icon={Copy} tooltip="Copy" onclick={onCopy} />
+
+			{#if onEdit}
+				<ActionIcon icon={Edit} tooltip="Edit" onclick={onEdit} />
+			{/if}
+
+			{#if role === MessageRole.ASSISTANT && onRegenerate}
+				<ActionIcon icon={RefreshCw} tooltip="Regenerate" onclick={() => onRegenerate()} />
+			{/if}
+
+			{#if role === MessageRole.ASSISTANT && onContinue}
+				<ActionIcon icon={ArrowRight} tooltip="Continue" onclick={onContinue} />
+			{/if}
+
+			{#if onForkConversation}
+				<ActionIcon icon={GitBranch} tooltip="Fork conversation" onclick={handleOpenForkDialog} />
+			{/if}
+
+			<ActionIcon icon={Trash2} tooltip="Delete" onclick={onDelete} />
+		</div>
+	</div>
+
+	{#if showRawOutputSwitch}
+		<div class="flex items-center gap-2">
+			<span class="text-xs text-muted-foreground">Show raw output</span>
+			<Switch
+				checked={rawOutputEnabled}
+				onCheckedChange={(checked) => onRawOutputToggle?.(checked)}
+			/>
+		</div>
+	{/if}
+</div>
+
+<DialogConfirmation
+	bind:open={showDeleteDialog}
+	title="Delete Message"
+	description={deletionInfo && deletionInfo.totalCount > 1
+		? `This will delete ${deletionInfo.totalCount} messages including: ${deletionInfo.userMessages} user message${deletionInfo.userMessages > 1 ? 's' : ''} and ${deletionInfo.assistantMessages} assistant response${deletionInfo.assistantMessages > 1 ? 's' : ''}. All messages in this branch and their responses will be permanently removed. This action cannot be undone.`
+		: 'Are you sure you want to delete this message? This action cannot be undone.'}
+	confirmText={deletionInfo && deletionInfo.totalCount > 1
+		? `Delete ${deletionInfo.totalCount} Messages`
+		: 'Delete'}
+	cancelText="Cancel"
+	variant="destructive"
+	icon={Trash2}
+	onConfirm={handleConfirmDelete}
+	onCancel={() => onShowDeleteDialogChange(false)}
+/>
+
+<DialogConfirmation
+	bind:open={showForkDialog}
+	title="Fork Conversation"
+	description="Create a new conversation branching from this message."
+	confirmText="Fork"
+	cancelText="Cancel"
+	icon={GitBranch}
+	onConfirm={handleConfirmFork}
+	onCancel={() => (showForkDialog = false)}
+>
+	<div class="flex flex-col gap-4 py-2">
+		<div class="flex flex-col gap-2">
+			<Label for="fork-name">Title</Label>
+
+			<Input
+				id="fork-name"
+				class="text-foreground"
+				placeholder="Enter fork name"
+				type="text"
+				bind:value={forkName}
+			/>
+		</div>
+
+		<div class="flex items-center gap-2">
+			<Checkbox
+				id="fork-attachments"
+				checked={forkIncludeAttachments}
+				onCheckedChange={(checked) => {
+					forkIncludeAttachments = checked === true;
+				}}
+			/>
+
+			<Label for="fork-attachments" class="cursor-pointer text-sm font-normal">
+				Include all attachments
+			</Label>
+		</div>
+	</div>
+</DialogConfirmation>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionIcons/ChatMessageActionIconsBranchingControls.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionIcons/ChatMessageActionIconsBranchingControls.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..465dcab73bfd0beb785e5a8f28813abb815fa00e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageActions/ChatMessageActionIcons/ChatMessageActionIconsBranchingControls.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
+	import { ActionIcon } from '$lib/components/app';
+
+	interface Props {
+		class?: string;
+		siblingInfo: ChatMessageSiblingInfo | null;
+		onNavigateToSibling?: (siblingId: string) => void;
+	}
+
+	let { class: className = '', siblingInfo, onNavigateToSibling }: Props = $props();
+
+	let hasPrevious = $derived(siblingInfo && siblingInfo.currentIndex > 0);
+	let hasNext = $derived(siblingInfo && siblingInfo.currentIndex < siblingInfo.totalSiblings - 1);
+	let nextSiblingId = $derived(
+		hasNext ? siblingInfo!.siblingIds[siblingInfo!.currentIndex + 1] : null
+	);
+	let previousSiblingId = $derived(
+		hasPrevious ? siblingInfo!.siblingIds[siblingInfo!.currentIndex - 1] : null
+	);
+</script>
+
+{#if siblingInfo && siblingInfo.totalSiblings > 1}
+	<div
+		aria-label="Message version {siblingInfo.currentIndex + 1} of {siblingInfo.totalSiblings}"
+		class="flex items-center gap-1 text-xs text-muted-foreground {className}"
+		role="navigation"
+	>
+		<ActionIcon
+			icon={ChevronLeft}
+			tooltip="Previous version"
+			disabled={!hasPrevious}
+			class="h-5 w-5 p-0 {!hasPrevious ? '!cursor-not-allowed opacity-30' : ''}"
+			onclick={() => onNavigateToSibling?.(previousSiblingId!)}
+		/>
+
+		<span class="px-1 font-mono text-xs">
+			{siblingInfo.currentIndex + 1}/{siblingInfo.totalSiblings}
+		</span>
+
+		<ActionIcon
+			icon={ChevronRight}
+			tooltip="Next version"
+			disabled={!hasNext}
+			class="h-5 w-5 p-0 {!hasNext ? 'opacity-30' : ''}"
+			onclick={() => onNavigateToSibling?.(nextSiblingId!)}
+		/>
+	</div>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageAgenticContent.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageAgenticContent.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..f0d03f547862d5586573f1aae732a42f33b270c3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageAgenticContent.svelte
@@ -0,0 +1,422 @@
+<script lang="ts">
+	import { Wrench, Loader2, Brain } from '@lucide/svelte';
+	import {
+		ChatMessageStatistics,
+		CollapsibleContentBlock,
+		MarkdownContent,
+		SyntaxHighlightedCode,
+		ChatMessageActionCardPermissionRequest,
+		ChatMessageActionCardContinueRequest
+	} from '$lib/components/app';
+
+	import {
+		AgenticSectionType,
+		ChatMessageStatsView,
+		FileTypeText,
+		ToolPermissionDecision
+	} from '$lib/enums';
+	import type {
+		ChatMessageAgenticTimings,
+		ChatMessageAgenticTurnStats,
+		DatabaseMessage
+	} from '$lib/types';
+	import {
+		deriveAgenticSections,
+		formatJsonPretty,
+		parseToolResultWithImages,
+		type AgenticSection,
+		type ToolResultLine
+	} from '$lib/utils';
+	import {
+		agenticPendingPermissionRequest,
+		agenticResolvePermission,
+		agenticPendingContinueRequest,
+		agenticResolveContinue,
+		agenticLastError
+	} from '$lib/stores/agentic.svelte';
+	import { config } from '$lib/stores/settings.svelte';
+
+	interface Props {
+		message: DatabaseMessage;
+		toolMessages?: DatabaseMessage[];
+		isStreaming?: boolean;
+		isLastAssistantMessage?: boolean;
+	}
+
+	let {
+		message,
+		toolMessages = [],
+		isStreaming = false,
+		isLastAssistantMessage = false
+	}: Props = $props();
+
+	let expandedStates: Record<number, boolean> = $state({});
+
+	const showToolCallInProgress = $derived(config().showToolCallInProgress as boolean);
+	const showThoughtInProgress = $derived(config().showThoughtInProgress as boolean);
+	const renderThinkingAsMarkdown = $derived(config().renderThinkingAsMarkdown as boolean);
+	const showMessageStats = $derived(config().showMessageStats as boolean);
+
+	const hasReasoningError = $derived(
+		isLastAssistantMessage ? !!agenticLastError(message.convId) : false
+	);
+
+	let permissionDismissed = $state(false);
+
+	const pendingPermission = $derived(
+		isStreaming && isLastAssistantMessage ? agenticPendingPermissionRequest(message.convId) : null
+	);
+
+	// Reset dismissed when pendingPermission changes (new request or cleared)
+	let prevPendingRef: typeof pendingPermission = null;
+	$effect(() => {
+		if (pendingPermission !== prevPendingRef) {
+			prevPendingRef = pendingPermission;
+			if (pendingPermission) {
+				permissionDismissed = false;
+			}
+		}
+	});
+
+	function handlePermission(decision: ToolPermissionDecision) {
+		permissionDismissed = true;
+		agenticResolvePermission(message.convId, decision);
+	}
+
+	let continueDismissed = $state(false);
+
+	const pendingContinue = $derived(
+		isStreaming && isLastAssistantMessage ? agenticPendingContinueRequest(message.convId) : false
+	);
+
+	let prevContinueRef = false;
+	$effect(() => {
+		if (pendingContinue !== prevContinueRef) {
+			prevContinueRef = pendingContinue;
+			if (pendingContinue) {
+				continueDismissed = false;
+			}
+		}
+	});
+
+	function handleContinue(shouldContinue: boolean) {
+		continueDismissed = true;
+		agenticResolveContinue(message.convId, shouldContinue);
+	}
+
+	const sections = $derived(deriveAgenticSections(message, toolMessages, [], isStreaming));
+
+	// Parse tool results with images
+	const sectionsParsed = $derived(
+		sections.map((section) => ({
+			...section,
+			parsedLines: section.toolResult
+				? parseToolResultWithImages(section.toolResult, section.toolResultExtras || message?.extra)
+				: ([] as ToolResultLine[])
+		}))
+	);
+
+	// 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 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 : Loader2}
+		{@const streamingIconClass = isStreaming ? 'h-4 w-4 animate-spin' : 'h-4 w-4'}
+
+		<CollapsibleContentBlock
+			open={isExpanded(index, section)}
+			class="my-2"
+			icon={streamingIcon}
+			iconClass={streamingIconClass}
+			title={section.toolName || 'Tool call'}
+			subtitle={isStreaming ? '' : 'incomplete'}
+			{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 isPending}
+					<div class="rounded bg-muted/30 p-2 text-xs text-muted-foreground italic">
+						Waiting for result...
+					</div>
+				{:else 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}
+					<div class="rounded bg-muted/30 p-2 text-xs text-muted-foreground italic">No output</div>
+				{/if}
+			</div>
+		</CollapsibleContentBlock>
+	{:else if section.type === AgenticSectionType.REASONING}
+		{@const reasoningSubtitle = section.wasInterrupted
+			? hasReasoningError
+				? 'Error'
+				: 'Cancelled'
+			: isStreaming
+				? ''
+				: undefined}
+
+		<CollapsibleContentBlock
+			open={isExpanded(index, section)}
+			class="my-2"
+			icon={Brain}
+			title="Reasoning"
+			subtitle={reasoningSubtitle}
+			rawContent={section.content}
+			onToggle={() => toggleExpanded(index, section)}
+		>
+			<div class="pt-3">
+				{#if renderThinkingAsMarkdown}
+					<MarkdownContent content={section.content} attachments={message?.extra} />
+				{:else}
+					<div class="text-xs leading-relaxed break-words whitespace-pre-wrap">
+						{section.content}
+					</div>
+				{/if}
+			</div>
+		</CollapsibleContentBlock>
+	{:else if section.type === AgenticSectionType.REASONING_PENDING}
+		{@const reasoningTitle = isStreaming ? 'Reasoning...' : 'Reasoning'}
+		{@const reasoningSubtitle = isStreaming ? '' : hasReasoningError ? 'Error' : 'Cancelled'}
+
+		<CollapsibleContentBlock
+			open={isExpanded(index, section)}
+			class="my-2"
+			icon={Brain}
+			title={reasoningTitle}
+			subtitle={reasoningSubtitle}
+			rawContent={section.content}
+			{isStreaming}
+			onToggle={() => toggleExpanded(index, section)}
+		>
+			<div class="pt-3">
+				{#if renderThinkingAsMarkdown}
+					<MarkdownContent content={section.content} attachments={message?.extra} />
+				{:else}
+					<div class="text-xs leading-relaxed break-words whitespace-pre-wrap">
+						{section.content}
+					</div>
+				{/if}
+			</div>
+		</CollapsibleContentBlock>
+	{/if}
+{/snippet}
+
+<div class="agentic-content">
+	{#if turnGroups.length > 1}
+		{#each turnGroups as turn, turnIndex (turnIndex)}
+			{@const turnStats = message?.timings?.agentic?.perTurn?.[turnIndex]}
+
+			<div class="agentic-turn group/turn grid gap-3 mb-4">
+				{#each turn.sections as section, sIdx (turn.flatIndices[sIdx])}
+					{@render renderSection(section, turn.flatIndices[sIdx])}
+				{/each}
+
+				{#if turnStats && showMessageStats}
+					<div class="turn-stats transition-opacity duration-150">
+						<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}
+
+	{#if pendingPermission && !permissionDismissed}
+		<ChatMessageActionCardPermissionRequest
+			toolName={pendingPermission.toolName}
+			serverLabel={pendingPermission.serverLabel}
+			onDecision={handlePermission}
+		/>
+	{/if}
+
+	{#if pendingContinue && !continueDismissed}
+		<ChatMessageActionCardContinueRequest onDecision={handleContinue} />
+	{/if}
+</div>
+
+<style>
+	.agentic-content {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		max-width: 48rem;
+		gap: 1rem;
+	}
+
+	.agentic-content > :global(*),
+	.agentic-turn > :global(*) {
+		min-width: 0;
+	}
+
+	.agentic-text {
+		width: 100%;
+	}
+
+	.turn-stats {
+		border-top: 1px solid hsl(var(--muted) / 0.5);
+	}
+</style>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageEditForm.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageEditForm.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..962f2a28538c9c7f6dba1d94c902a8b89ca4c757
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageEditForm.svelte
@@ -0,0 +1,154 @@
+<script lang="ts">
+	import { X, AlertTriangle } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { Switch } from '$lib/components/ui/switch';
+	import { ChatForm, DialogConfirmation } from '$lib/components/app';
+	import { getMessageEditContext } from '$lib/contexts';
+	import { KeyboardKey, MessageRole } from '$lib/enums';
+	import { chatStore } from '$lib/stores/chat.svelte';
+	import { processFilesToChatUploaded } from '$lib/utils/browser-only';
+
+	const editCtx = getMessageEditContext();
+
+	let saveWithoutRegenerate = $state(false);
+	let showDiscardDialog = $state(false);
+	let branchAfterEdit = $state(false);
+
+	let isUserMessage = $derived(editCtx.messageRole === MessageRole.USER);
+	let isAssistantMessage = $derived(editCtx.messageRole === MessageRole.ASSISTANT);
+
+	let hasUnsavedChanges = $derived.by(() => {
+		if (editCtx.editedContent !== editCtx.originalContent) return true;
+		if (editCtx.editedUploadedFiles.length > 0) return true;
+
+		const extrasChanged =
+			editCtx.editedExtras.length !== editCtx.originalExtras.length ||
+			editCtx.editedExtras.some((extra, i) => extra !== editCtx.originalExtras[i]);
+
+		if (extrasChanged) return true;
+
+		return false;
+	});
+
+	let hasAttachments = $derived(
+		(editCtx.editedExtras && editCtx.editedExtras.length > 0) ||
+			(editCtx.editedUploadedFiles && editCtx.editedUploadedFiles.length > 0)
+	);
+
+	let canSubmit = $derived(editCtx.editedContent.trim().length > 0 || hasAttachments);
+
+	function handleGlobalKeydown(event: KeyboardEvent) {
+		if (event.key === KeyboardKey.ESCAPE) {
+			event.preventDefault();
+			attemptCancel();
+		}
+	}
+
+	function attemptCancel() {
+		if (hasUnsavedChanges) {
+			showDiscardDialog = true;
+		} else {
+			editCtx.cancel();
+		}
+	}
+
+	function handleSubmit() {
+		if (!canSubmit) return;
+
+		if (isUserMessage && saveWithoutRegenerate && editCtx.showSaveOnlyOption) {
+			editCtx.saveOnly();
+		} else {
+			if (isAssistantMessage && editCtx.setShouldBranchAfterEdit) {
+				editCtx.setShouldBranchAfterEdit(branchAfterEdit);
+			}
+
+			editCtx.save();
+		}
+
+		saveWithoutRegenerate = false;
+		branchAfterEdit = false;
+	}
+
+	function handleAttachmentRemove(index: number) {
+		const newExtras = [...editCtx.editedExtras];
+		newExtras.splice(index, 1);
+		editCtx.setExtras(newExtras);
+	}
+
+	function handleUploadedFileRemove(fileId: string) {
+		const newFiles = editCtx.editedUploadedFiles.filter((f) => f.id !== fileId);
+		editCtx.setUploadedFiles(newFiles);
+	}
+
+	async function handleFilesAdd(files: File[]) {
+		const processed = await processFilesToChatUploaded(files);
+		editCtx.setUploadedFiles([...editCtx.editedUploadedFiles, ...processed]);
+	}
+
+	$effect(() => {
+		chatStore.setEditModeActive(handleFilesAdd);
+
+		return () => {
+			chatStore.clearEditMode();
+		};
+	});
+</script>
+
+<svelte:window onkeydown={handleGlobalKeydown} />
+
+<div class="relative w-full max-w-[80%]">
+	<ChatForm
+		value={editCtx.editedContent}
+		attachments={editCtx.editedExtras}
+		bind:uploadedFiles={editCtx.editedUploadedFiles}
+		placeholder="Edit your message..."
+		showMcpPromptButton
+		showAddButton={editCtx.messageRole === MessageRole.USER}
+		showModelSelector={editCtx.messageRole === MessageRole.USER}
+		onValueChange={editCtx.setContent}
+		onAttachmentRemove={handleAttachmentRemove}
+		onUploadedFileRemove={handleUploadedFileRemove}
+		onFilesAdd={handleFilesAdd}
+		onSubmit={handleSubmit}
+	/>
+</div>
+
+<div class="mt-2 flex w-full max-w-[80%] items-center justify-between">
+	{#if isUserMessage && editCtx.showSaveOnlyOption}
+		<div class="flex items-center gap-2">
+			<Switch id="save-only-switch" bind:checked={saveWithoutRegenerate} class="scale-75" />
+
+			<label for="save-only-switch" class="cursor-pointer text-xs text-muted-foreground">
+				Update without re-sending
+			</label>
+		</div>
+	{:else if isAssistantMessage}
+		<div class="flex items-center gap-2">
+			<Switch id="branch-after-edit" bind:checked={branchAfterEdit} class="scale-75" />
+
+			<label for="branch-after-edit" class="cursor-pointer text-xs text-muted-foreground">
+				Branch conversation after edit
+			</label>
+		</div>
+	{:else}
+		<div></div>
+	{/if}
+
+	<Button class="h-7 px-3 text-xs" onclick={attemptCancel} size="sm" variant="ghost">
+		<X class="mr-1 h-3 w-3" />
+
+		Cancel
+	</Button>
+</div>
+
+<DialogConfirmation
+	bind:open={showDiscardDialog}
+	title="Discard changes?"
+	description="You have unsaved changes. Are you sure you want to discard them?"
+	confirmText="Discard"
+	cancelText="Keep editing"
+	variant="destructive"
+	icon={AlertTriangle}
+	onConfirm={editCtx.cancel}
+	onCancel={() => (showDiscardDialog = false)}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics/ChatMessageStatistics.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics/ChatMessageStatistics.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..7ef73a49945bd1c64611ed8ae0c65b19933b1a29
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics/ChatMessageStatistics.svelte
@@ -0,0 +1,293 @@
+<script lang="ts">
+	import { Clock, Gauge, WholeWord, BookOpenText, Sparkles, Wrench, Layers } from '@lucide/svelte';
+	import { ChatMessageStatisticsBadge } from '$lib/components/app';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { ChatMessageStatsView, ChatMessageStatisticsMode } from '$lib/enums';
+	import type { ChatMessageAgenticTimings } from '$lib/types/chat';
+	import { formatPerformanceTime } from '$lib/utils';
+	import { MS_PER_SECOND, DEFAULT_PERFORMANCE_TIME } from '$lib/constants';
+	import type { Component } from 'svelte';
+
+	interface Props {
+		predictedTokens?: number;
+		predictedMs?: number;
+		promptTokens?: number;
+		promptMs?: number;
+		isLive?: boolean;
+		isProcessingPrompt?: boolean;
+		initialView?: ChatMessageStatsView;
+		agenticTimings?: ChatMessageAgenticTimings;
+		onActiveViewChange?: (view: ChatMessageStatsView) => void;
+		hideSummary?: boolean;
+		mode?: ChatMessageStatisticsMode;
+	}
+
+	let {
+		predictedTokens,
+		predictedMs,
+		promptTokens,
+		promptMs,
+		isLive = false,
+		isProcessingPrompt = false,
+		initialView = ChatMessageStatsView.GENERATION,
+		agenticTimings,
+		onActiveViewChange,
+		hideSummary = false,
+		mode = ChatMessageStatisticsMode.SWITCHABLE
+	}: Props = $props();
+
+	let isSwitchable = $derived(mode === ChatMessageStatisticsMode.SWITCHABLE);
+
+	let activeView: ChatMessageStatsView = $derived(
+		mode === ChatMessageStatisticsMode.READING
+			? ChatMessageStatsView.READING
+			: mode === ChatMessageStatisticsMode.GENERATION
+				? ChatMessageStatsView.GENERATION
+				: initialView
+	);
+	let hasAutoSwitchedToGeneration = $state(false);
+
+	$effect(() => {
+		if (isSwitchable) {
+			onActiveViewChange?.(activeView);
+		}
+	});
+
+	// In live mode: auto-switch to GENERATION tab when prompt processing completes
+	$effect(() => {
+		if (isLive && isSwitchable) {
+			// Auto-switch to generation tab only when prompt processing is done (once)
+			if (
+				!hasAutoSwitchedToGeneration &&
+				!isProcessingPrompt &&
+				predictedTokens &&
+				predictedTokens > 0
+			) {
+				activeView = ChatMessageStatsView.GENERATION;
+				hasAutoSwitchedToGeneration = true;
+			} else if (!hasAutoSwitchedToGeneration) {
+				// Stay on READING while prompt is still being processed
+				activeView = ChatMessageStatsView.READING;
+			}
+		}
+	});
+
+	let hasGenerationStats = $derived(
+		predictedTokens !== undefined &&
+			predictedTokens > 0 &&
+			predictedMs !== undefined &&
+			predictedMs > 0
+	);
+
+	let tokensPerSecond = $derived(
+		hasGenerationStats ? (predictedTokens! / predictedMs!) * MS_PER_SECOND : 0
+	);
+	let formattedTime = $derived(
+		predictedMs !== undefined ? formatPerformanceTime(predictedMs) : DEFAULT_PERFORMANCE_TIME
+	);
+
+	let promptTokensPerSecond = $derived(
+		promptTokens !== undefined && promptMs !== undefined && promptMs > 0
+			? (promptTokens / promptMs) * MS_PER_SECOND
+			: undefined
+	);
+
+	let formattedPromptTime = $derived(
+		promptMs !== undefined ? formatPerformanceTime(promptMs) : undefined
+	);
+
+	let hasPromptStats = $derived(
+		promptTokens !== undefined &&
+			promptMs !== undefined &&
+			promptTokensPerSecond !== undefined &&
+			formattedPromptTime !== undefined
+	);
+
+	let isGenerationDisabled = $derived(isLive && isSwitchable && !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>
+
+{#snippet viewButton(opts: {
+	view: ChatMessageStatsView;
+	icon: Component;
+	label: string;
+	tooltipText: string;
+	disabled?: boolean;
+})}
+	{@const IconComponent = opts.icon}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<!-- prevent another nested button element -->
+			{#snippet child({ props })}
+				<button
+					{...props}
+					type="button"
+					class="inline-flex h-5 w-5 items-center justify-center rounded-sm transition-colors {activeView ===
+					opts.view
+						? 'bg-background text-foreground shadow-sm'
+						: opts.disabled
+							? 'cursor-not-allowed opacity-40'
+							: 'hover:text-foreground'}"
+					onclick={() => !opts.disabled && (activeView = opts.view)}
+					disabled={opts.disabled}
+				>
+					<IconComponent class="h-3 w-3" />
+
+					<span class="sr-only">{opts.label}</span>
+				</button>
+			{/snippet}
+		</Tooltip.Trigger>
+
+		<Tooltip.Content>
+			<p>{opts.tooltipText}</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+{/snippet}
+
+<div class="inline-flex items-center text-xs text-muted-foreground">
+	{#if isSwitchable}
+		<div class="inline-flex items-center rounded-sm bg-muted-foreground/15 p-0.5">
+			{#if hasPromptStats || isLive}
+				{@render viewButton({
+					view: ChatMessageStatsView.READING,
+					icon: BookOpenText,
+					label: 'Reading',
+					tooltipText: 'Processing'
+				})}
+			{/if}
+
+			{@render viewButton({
+				view: ChatMessageStatsView.GENERATION,
+				icon: Sparkles,
+				label: 'Generation',
+				tooltipText: isGenerationDisabled ? 'Waiting for tokens...' : 'Generation',
+				disabled: isGenerationDisabled
+			})}
+
+			{#if hasAgenticStats}
+				{@render viewButton({
+					view: ChatMessageStatsView.TOOLS,
+					icon: Wrench,
+					label: 'Tools',
+					tooltipText: 'Tool calls'
+				})}
+
+				{#if !hideSummary}
+					{@render viewButton({
+						view: ChatMessageStatsView.SUMMARY,
+						icon: Layers,
+						label: 'Summary',
+						tooltipText: 'Agentic summary'
+					})}
+				{/if}
+			{/if}
+		</div>
+	{/if}
+
+	<div class="flex items-center gap-1 px-2">
+		{#if activeView === ChatMessageStatsView.GENERATION && hasGenerationStats}
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={WholeWord}
+				value="{predictedTokens?.toLocaleString()} tokens"
+				tooltipLabel="Generated tokens"
+			/>
+
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={Clock}
+				value={formattedTime}
+				tooltipLabel="Generation time"
+			/>
+
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={Gauge}
+				value="{tokensPerSecond.toFixed(2)} t/s"
+				tooltipLabel="Generation speed"
+			/>
+		{:else if activeView === ChatMessageStatsView.TOOLS && hasAgenticStats}
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={Wrench}
+				value="{agenticTimings!.toolCallsCount} calls"
+				tooltipLabel="Tool calls executed"
+			/>
+
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={Clock}
+				value={formattedAgenticToolsTime}
+				tooltipLabel="Tool execution time"
+			/>
+
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={Gauge}
+				value="{agenticToolsPerSecond.toFixed(2)} calls/s"
+				tooltipLabel="Tool execution rate"
+			/>
+		{:else if activeView === ChatMessageStatsView.SUMMARY && hasAgenticStats}
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={Layers}
+				value="{agenticTimings!.turns} turns"
+				tooltipLabel="Agentic turns (LLM calls)"
+			/>
+
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={WholeWord}
+				value="{agenticTimings!.llm.predicted_n.toLocaleString()} tokens"
+				tooltipLabel="Total tokens generated"
+			/>
+
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={Clock}
+				value={formattedAgenticTotalTime}
+				tooltipLabel="Total time (LLM + tools)"
+			/>
+		{:else if hasPromptStats && (mode === ChatMessageStatisticsMode.READING || isSwitchable)}
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={WholeWord}
+				value="{promptTokens} tokens"
+				tooltipLabel="Prompt tokens"
+			/>
+
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={Clock}
+				value={formattedPromptTime ?? '0s'}
+				tooltipLabel="Prompt processing time"
+			/>
+
+			<ChatMessageStatisticsBadge
+				class="bg-transparent"
+				icon={Gauge}
+				value="{promptTokensPerSecond!.toFixed(2)} tokens/s"
+				tooltipLabel="Prompt processing speed"
+			/>
+		{/if}
+	</div>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics/ChatMessageStatisticsBadge.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics/ChatMessageStatisticsBadge.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..db7d01690a56993bb6cf9d4c49b25cc0885deb17
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessageStatistics/ChatMessageStatisticsBadge.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { BadgeInfo } from '$lib/components/app';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { copyToClipboard } from '$lib/utils';
+	import type { Component } from 'svelte';
+
+	interface Props {
+		class?: string;
+		icon: Component;
+		value: string | number;
+		tooltipLabel?: string;
+	}
+
+	let { class: className = '', icon: IconComponent, value, tooltipLabel }: Props = $props();
+
+	function handleClick() {
+		void copyToClipboard(String(value));
+	}
+</script>
+
+{#if tooltipLabel}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<!-- prevent another nested button element -->
+			{#snippet child({ props })}
+				<BadgeInfo {...props} class={className} onclick={handleClick}>
+					{#snippet icon()}
+						<IconComponent class="h-3 w-3" />
+					{/snippet}
+
+					{value}
+				</BadgeInfo>
+			{/snippet}
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>{tooltipLabel}</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+{:else}
+	<BadgeInfo class={className} onclick={handleClick}>
+		{#snippet icon()}
+			<IconComponent class="h-3 w-3" />
+		{/snippet}
+
+		{value}
+	</BadgeInfo>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..dce0edd03138a81fe803c7ab597900328012897a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatMessages/ChatMessages.svelte
@@ -0,0 +1,321 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { beforeNavigate, afterNavigate } from '$app/navigation';
+	import { ChatMessage, ChatMessageUserPending } from '$lib/components/app';
+	import { setChatActionsContext } from '$lib/contexts';
+	import { MessageRole } from '$lib/enums';
+	import { chatStore } from '$lib/stores/chat.svelte';
+	import {
+		chatPendingMessageContent,
+		chatPendingMessageExtras,
+		chatClearPendingMessage,
+		chatInjectPendingMessage
+	} from '$lib/stores/chat.svelte';
+	import { conversationsStore, activeConversation } from '$lib/stores/conversations.svelte';
+	import { config } from '$lib/stores/settings.svelte';
+	import {
+		agenticPendingSteeringMessageContent,
+		agenticPendingSteeringMessageExtras,
+		agenticClearSteeringMessage,
+		agenticInjectSteeringMessage
+	} from '$lib/stores/agentic.svelte';
+	import {
+		buildSiblingInfoMap,
+		copyToClipboard,
+		formatMessageForClipboard,
+		hasAgenticContent
+	} from '$lib/utils';
+
+	interface Props {
+		messages?: DatabaseMessage[];
+		onUserAction?: () => void;
+		onMessagesReady?: (messageCount: number) => void;
+	}
+
+	let { messages = [], onUserAction, onMessagesReady }: Props = $props();
+
+	let allConversationMessages = $state<DatabaseMessage[]>([]);
+	let isVisible = $state(false);
+	let previousConversationId = $state<string | null>(null);
+	let previousRouteId = $state<string | null>(null);
+
+	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();
+		},
+
+		forkConversation: async (
+			message: DatabaseMessage,
+			options: { name: string; includeAttachments: boolean }
+		) => {
+			await conversationsStore.forkConversation(message.id, options);
+		}
+	});
+
+	function refreshAllMessages() {
+		const conversation = activeConversation();
+
+		if (conversation) {
+			conversationsStore.getConversationMessages(conversation.id).then((messages) => {
+				allConversationMessages = messages;
+			});
+		} else {
+			allConversationMessages = [];
+		}
+	}
+
+	// Track conversation changes to trigger transition even on same route
+	$effect(() => {
+		const conversation = activeConversation();
+		const currentId = conversation?.id ?? null;
+
+		if (currentId !== previousConversationId && previousConversationId !== null) {
+			// Conversation changed - trigger fade out/in
+			isVisible = false;
+			requestAnimationFrame(() => {
+				refreshAllMessages();
+				previousConversationId = currentId;
+				requestAnimationFrame(() => {
+					isVisible = true;
+				});
+			});
+		} else {
+			previousConversationId = currentId;
+			if (conversation) {
+				refreshAllMessages();
+			}
+		}
+	});
+
+	$effect(() => {
+		void allConversationMessages;
+
+		onMessagesReady?.(displayMessages.length);
+	});
+
+	onMount(() => {
+		requestAnimationFrame(() => {
+			isVisible = true;
+		});
+	});
+
+	beforeNavigate((navigation) => {
+		isVisible = false;
+		previousRouteId = navigation.from?.route.id ?? null;
+	});
+
+	afterNavigate(() => {
+		requestAnimationFrame(() => {
+			isVisible = true;
+		});
+	});
+
+	let siblingInfoByMessageId = $derived(buildSiblingInfoMap(allConversationMessages));
+
+	let displayMessages = $derived.by(() => {
+		if (!messages.length) {
+			return [];
+		}
+
+		const filteredMessages = currentConfig.showSystemMessage
+			? messages
+			: messages.filter((msg) => msg.type !== MessageRole.SYSTEM);
+
+		// Build display entries, grouping agentic sessions into single entries.
+		// An agentic session = assistant(with tool_calls) → tool → assistant → tool → ... → assistant(final)
+		const result: Array<{
+			message: DatabaseMessage;
+			toolMessages: DatabaseMessage[];
+			isLastAssistantMessage: boolean;
+			isLastUserMessage: boolean;
+			nextAssistantMessage: DatabaseMessage | null;
+			siblingInfo: ChatMessageSiblingInfo;
+		}> = [];
+
+		for (let i = 0; i < filteredMessages.length; i++) {
+			const msg = filteredMessages[i];
+
+			// Skip tool messages - they're grouped with preceding assistant
+			if (msg.role === MessageRole.TOOL) continue;
+
+			const toolMessages: DatabaseMessage[] = [];
+			if (msg.role === MessageRole.ASSISTANT && hasAgenticContent(msg)) {
+				let j = i + 1;
+
+				while (j < filteredMessages.length) {
+					const next = filteredMessages[j];
+
+					if (next.role === MessageRole.TOOL) {
+						toolMessages.push(next);
+
+						j++;
+					} else if (next.role === MessageRole.ASSISTANT) {
+						toolMessages.push(next);
+
+						j++;
+					} else {
+						break;
+					}
+				}
+
+				i = j - 1;
+			} else if (msg.role === MessageRole.ASSISTANT) {
+				let j = i + 1;
+
+				while (j < filteredMessages.length && filteredMessages[j].role === MessageRole.TOOL) {
+					toolMessages.push(filteredMessages[j]);
+					j++;
+				}
+			}
+
+			const siblingInfo = siblingInfoByMessageId.get(msg.id) ?? {
+				message: msg,
+				siblingIds: [msg.id],
+				currentIndex: 0,
+				totalSiblings: 1
+			};
+
+			result.push({
+				message: msg,
+				toolMessages,
+				isLastAssistantMessage: false,
+				isLastUserMessage: false,
+				nextAssistantMessage: null,
+				siblingInfo
+			});
+		}
+
+		let lastAssistantIdx = -1;
+		for (let i = result.length - 1; i >= 0; i--) {
+			if (result[i].message.role === MessageRole.ASSISTANT) {
+				result[i].isLastAssistantMessage = true;
+				lastAssistantIdx = i;
+				break;
+			}
+		}
+
+		if (lastAssistantIdx > 0 && result[lastAssistantIdx - 1].message.role === MessageRole.USER) {
+			result[lastAssistantIdx - 1].isLastUserMessage = true;
+		}
+
+		for (let i = 0; i < result.length; i++) {
+			if (result[i].message.role !== MessageRole.USER) continue;
+
+			for (let j = i + 1; j < result.length; j++) {
+				if (result[j].message.role === MessageRole.ASSISTANT) {
+					result[i].nextAssistantMessage = result[j].message;
+					break;
+				}
+			}
+		}
+
+		return result;
+	});
+</script>
+
+<div
+	class="transition-opacity duration-500 ease-out
+		{isVisible ? 'opacity-100' : 'opacity-0'}
+		{previousRouteId === '/(chat)/chat/[id]' ? '' : 'delay-300'}"
+>
+	{#each displayMessages as { message, toolMessages, isLastAssistantMessage, isLastUserMessage, nextAssistantMessage, siblingInfo } (message.id)}
+		<ChatMessage
+			class="mx-auto mt-12 w-full max-w-3xl"
+			{message}
+			{toolMessages}
+			{isLastAssistantMessage}
+			{isLastUserMessage}
+			{nextAssistantMessage}
+			{siblingInfo}
+		/>
+	{/each}
+
+	{#if activeConversation() && agenticPendingSteeringMessageContent(activeConversation()!.id)}
+		{@const convId = activeConversation()!.id}
+		{@const pendingContent = agenticPendingSteeringMessageContent(convId)}
+
+		{#if pendingContent}
+			<ChatMessageUserPending
+				class="mx-auto mt-12 w-full max-w-[48rem]"
+				content={pendingContent}
+				extras={agenticPendingSteeringMessageExtras(convId)}
+				onSendImmediately={() => chatStore.abortCurrentFlow(convId)}
+				onEdit={(newContent, extras) => agenticInjectSteeringMessage(convId, newContent, extras)}
+				onDelete={() => agenticClearSteeringMessage(convId)}
+			/>
+		{/if}
+	{:else if activeConversation() && chatPendingMessageContent(activeConversation()!.id)}
+		{@const convId = activeConversation()!.id}
+		{@const pendingContent = chatPendingMessageContent(convId)}
+
+		{#if pendingContent}
+			<ChatMessageUserPending
+				class="mx-auto mt-12 w-full max-w-[48rem]"
+				content={pendingContent}
+				extras={chatPendingMessageExtras(convId)}
+				onSendImmediately={() => chatStore.abortCurrentFlow(convId)}
+				onEdit={(newContent, extras) => chatInjectPendingMessage(convId, newContent, extras)}
+				onDelete={() => chatClearPendingMessage(convId)}
+			/>
+		{/if}
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..a0d66c6421780ecb8d1d0dd083cb81240216ead9
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte
@@ -0,0 +1,313 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import {
+		ChatScreenForm,
+		ChatMessages,
+		ChatScreenDragOverlay,
+		ChatScreenStreamResumeStatus,
+		ServerLoadingSplash,
+		ChatScreenServerError
+	} from '$lib/components/app';
+	import { createAutoScrollController } from '$lib/hooks/use-auto-scroll.svelte';
+	import { useChatScreenActiveModel } from '$lib/hooks/use-chat-screen-active-model.svelte';
+	import { useChatScreenDragAndDrop } from '$lib/hooks/use-chat-screen-drag-and-drop.svelte';
+	import { useChatScreenFileUpload } from '$lib/hooks/use-chat-screen-file-upload.svelte';
+	import { useChatScreenScroll } from '$lib/hooks/use-chat-screen-scroll.svelte';
+	import { useKeyboardShortcuts } from '$lib/hooks/use-keyboard-shortcuts.svelte';
+	import { device } from '$lib/stores/device.svelte';
+	import { isMobile } from '$lib/stores/viewport.svelte';
+	import {
+		chatStore,
+		errorDialog,
+		isLoading,
+		isChatStreaming,
+		isEditing
+	} from '$lib/stores/chat.svelte';
+	import {
+		conversationsStore,
+		activeMessages,
+		activeConversation
+	} from '$lib/stores/conversations.svelte';
+	import { config } from '$lib/stores/settings.svelte';
+	import { serverLoading, serverError } from '$lib/stores/server.svelte';
+	import { parseFilesToMessageExtras } from '$lib/utils/browser-only';
+	import { onDestroy, onMount } from 'svelte';
+	import ChatScreenGreeting from './ChatScreenGreeting.svelte';
+	import ChatScreenActionScrollDown from './ChatScreenActionScrollDown.svelte';
+	import ChatScreenDialogsAndAlerts from './ChatScreenDialogsAndAlerts.svelte';
+	import { ROUTES } from '$lib/constants';
+
+	let { showCenteredEmpty = false } = $props();
+
+	let disableAutoScroll = $derived(Boolean(config().disableAutoScroll) || isMobile.current);
+	let isMobileUserScrolledUp = $state(false);
+	let mobileScrollDownHint = $state(false);
+	let mobileScrollDownHintLockedUntil = $state(0);
+	let emptyFileNames = $state<string[]>([]);
+	let initialMessage = $state('');
+	let showDeleteDialog = $state(false);
+	let showEmptyFileDialog = $state(false);
+	let isEmpty = $derived(
+		showCenteredEmpty && !activeConversation() && activeMessages().length === 0 && !isLoading()
+	);
+	let activeErrorDialog = $derived(errorDialog());
+	let isServerLoading = $derived(serverLoading());
+	let hasPropsError = $derived(!!serverError());
+	let isCurrentConversationLoading = $derived(isLoading() || isChatStreaming());
+	let chatFormBottomPosition = $derived.by(() => {
+		if (!isMobile.current) return '1rem';
+		if (device.isStandalone) return '1.5rem';
+		if (device.isIOSSafari) return '0.25rem';
+		return '0.5rem';
+	});
+
+	const autoScroll = createAutoScrollController();
+	const scroll = useChatScreenScroll(autoScroll);
+	const activeModel = useChatScreenActiveModel();
+	const fileUpload = useChatScreenFileUpload({
+		capabilities: () => ({
+			hasVision: activeModel.hasVisionModality,
+			hasAudio: activeModel.hasAudioModality,
+			hasVideo: activeModel.hasVideoModality
+		}),
+		activeModelId: () => activeModel.activeModelId
+	});
+	const dragAndDrop = useChatScreenDragAndDrop({
+		onDrop: fileUpload.handleFileUpload
+	});
+	const { handleKeydown } = useKeyboardShortcuts({
+		deleteActiveConversation: () => {
+			if (activeConversation()) {
+				showDeleteDialog = true;
+			}
+		}
+	});
+
+	function handleMobileScroll() {
+		if (!isMobile.current) return;
+
+		const container = scroll.chatScrollContainer;
+		if (!container) return;
+
+		const distanceFromBottom =
+			container.scrollHeight - container.clientHeight - container.scrollTop;
+		isMobileUserScrolledUp = distanceFromBottom > 300;
+	}
+
+	async function handleDeleteConfirm() {
+		const conversation = activeConversation();
+
+		if (conversation) {
+			await conversationsStore.deleteConversation(conversation.id);
+		}
+
+		showDeleteDialog = false;
+	}
+
+	async function handleSendMessage(message: string, files?: ChatUploadedFile[]): Promise<boolean> {
+		const plainFiles = files ? $state.snapshot(files) : undefined;
+		const result = plainFiles
+			? await parseFilesToMessageExtras(plainFiles, activeModel.activeModelId ?? undefined)
+			: undefined;
+
+		if (result?.emptyFiles && result.emptyFiles.length > 0) {
+			emptyFileNames = result.emptyFiles;
+			showEmptyFileDialog = true;
+			if (files) {
+				const emptyFileNamesSet = new Set(result.emptyFiles);
+				fileUpload.uploadedFiles = fileUpload.uploadedFiles.filter(
+					(file) => !emptyFileNamesSet.has(file.name)
+				);
+			}
+			return false;
+		}
+
+		handleSendLikeScroll();
+
+		await chatStore.sendMessage(message, result?.extras);
+		return true;
+	}
+
+	function handleSendLikeScroll() {
+		if (!isMobile.current) {
+			autoScroll.enable();
+		}
+
+		setTimeout(() => {
+			const container = scroll.chatScrollContainer;
+			if (!container) return;
+
+			const lastUserBubble = container.querySelector(
+				'.chat-message:nth-last-child(2) .chat-message-user .chat-message-user-bubble'
+			) as HTMLElement | null;
+
+			if (isMobile.current) {
+				// Keep the last user message bubble just above the input on mobile
+				const bubbleHeight = lastUserBubble?.scrollHeight ?? 0;
+				const baseHeight = container.scrollHeight - innerHeight;
+
+				container.scrollTo({
+					top: bubbleHeight > 0 ? baseHeight - bubbleHeight : baseHeight,
+					behavior: 'smooth'
+				});
+			} else if (lastUserBubble) {
+				// On desktop, place the last user message near the top of the viewport
+				const topPadding = 24;
+				const bubbleRect = lastUserBubble.getBoundingClientRect();
+				container.scrollTo({
+					top: Math.max(0, container.scrollTop + bubbleRect.top - topPadding),
+					behavior: 'smooth'
+				});
+			} else {
+				autoScroll.scrollToBottom();
+			}
+		}, 100);
+
+		if (isMobile.current) {
+			autoScroll.setDisabled(disableAutoScroll);
+			mobileScrollDownHint = true;
+			mobileScrollDownHintLockedUntil = Date.now() + 500;
+		}
+	}
+
+	function handleErrorDialogOpenChange(open: boolean) {
+		if (!open) {
+			chatStore.dismissErrorDialog();
+		}
+	}
+
+	async function handleSystemPromptAdd(draft: { message: string; files: ChatUploadedFile[] }) {
+		if (draft.message || draft.files.length > 0) {
+			chatStore.savePendingDraft(draft.message, draft.files);
+		}
+		await chatStore.addSystemPrompt();
+	}
+
+	$effect(() => {
+		const shouldDisableAutoScroll =
+			config().disableAutoScroll || (isMobile.current && isCurrentConversationLoading);
+		autoScroll.setDisabled(shouldDisableAutoScroll);
+		if (!shouldDisableAutoScroll) {
+			autoScroll.enable();
+		}
+	});
+
+	onMount(() => {
+		const pendingDraft = chatStore.consumePendingDraft();
+		if (pendingDraft) {
+			initialMessage = pendingDraft.message;
+			fileUpload.uploadedFiles = pendingDraft.files;
+		}
+
+		autoScroll.startObserving();
+
+		if (!disableAutoScroll) {
+			autoScroll.enable();
+		}
+
+		if (isMobile.current && isCurrentConversationLoading) {
+			mobileScrollDownHint = true;
+			mobileScrollDownHintLockedUntil = Date.now() + 500;
+		}
+
+		handleMobileScroll();
+	});
+
+	onDestroy(() => autoScroll.destroy());
+</script>
+
+{#if dragAndDrop.isDragOver}
+	<ChatScreenDragOverlay />
+{/if}
+
+<svelte:window
+	onkeydown={handleKeydown}
+	onscroll={(e) => {
+		scroll.handleScroll(e);
+		handleMobileScroll();
+		if (e.isTrusted && Date.now() > mobileScrollDownHintLockedUntil) {
+			mobileScrollDownHint = false;
+		}
+	}}
+/>
+
+{#if isServerLoading}
+	<ServerLoadingSplash />
+{:else}
+	<div
+		class="chat-screen flex grow flex-col min-h-[calc(100dvh-1rem)] md:min-h-full px-4 md:py-0 pt-12 pb-48 md:pb-4"
+		style:--chat-form-bottom-position={chatFormBottomPosition}
+		ondragenter={dragAndDrop.dragHandlers.dragenter}
+		ondragleave={dragAndDrop.dragHandlers.dragleave}
+		ondragover={dragAndDrop.dragHandlers.dragover}
+		ondrop={dragAndDrop.dragHandlers.drop}
+		role="main"
+	>
+		{#if !isEmpty}
+			<ChatMessages
+				messages={activeMessages()}
+				onUserAction={() => {
+					handleSendLikeScroll();
+				}}
+			/>
+		{/if}
+
+		<div
+			class={[
+				'pointer-events-none md:sticky fixed  mt-auto transition-all duration-200',
+				device.isStandalone
+					? 'bottom-6 right-4 left-4'
+					: device.isIOSSafari
+						? 'bottom-1 left-2 right-2'
+						: 'bottom-2 right-2 left-2',
+				isEmpty ? 'md:bottom-[calc(50dvh-7rem)] 2xl:bottom-[calc(50dvh-4rem)]' : 'md:bottom-4'
+			]}
+			style:padding-top={!isEmpty ? 'var(--chat-form-padding-top)' : undefined}
+		>
+			<ChatScreenGreeting {isEmpty} />
+
+			<ChatScreenServerError />
+
+			{#if page.params.id}
+				<ChatScreenStreamResumeStatus />
+			{/if}
+
+			<div class="pointer-events-none flex flex-col gap-6 items-center w-full">
+				{#if (isMobile.current ? mobileScrollDownHint || isMobileUserScrolledUp : autoScroll.userScrolledUp) && page.url.hash.includes(ROUTES.CHAT) && page.params.id}
+					<ChatScreenActionScrollDown
+						onclick={() => {
+							mobileScrollDownHint = false;
+							scroll.chatScrollContainer?.scrollTo({
+								top: scroll.chatScrollContainer.scrollHeight,
+								behavior: 'smooth'
+							});
+						}}
+					/>
+				{/if}
+			</div>
+
+			<ChatScreenForm
+				class="pointer-events-auto conversation-chat-form"
+				disabled={hasPropsError || isEditing()}
+				{initialMessage}
+				isLoading={isCurrentConversationLoading}
+				onFileRemove={fileUpload.handleFileRemove}
+				onFileUpload={fileUpload.handleFileUpload}
+				onSend={handleSendMessage}
+				onStop={() => chatStore.stopGeneration()}
+				onSystemPromptAdd={handleSystemPromptAdd}
+				bind:uploadedFiles={fileUpload.uploadedFiles}
+			/>
+		</div>
+	</div>
+{/if}
+
+<ChatScreenDialogsAndAlerts
+	{showDeleteDialog}
+	{handleDeleteConfirm}
+	{showEmptyFileDialog}
+	{emptyFileNames}
+	{activeErrorDialog}
+	{handleErrorDialogOpenChange}
+	{fileUpload}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenActionScrollDown.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenActionScrollDown.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..c470ac729690ceb93f95a963b00284fd79fb589c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenActionScrollDown.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { ArrowDown } from '@lucide/svelte';
+	import ActionIcon from '$lib/components/app/actions/ActionIcon.svelte';
+
+	let { onclick }: { onclick: (e?: MouseEvent) => void } = $props();
+</script>
+
+<div class="pointer-events-auto flex justify-center relative h-0">
+	<ActionIcon
+		icon={ArrowDown}
+		{onclick}
+		ariaLabel="Scroll to bottom"
+		tooltip="Scroll to bottom"
+		size="lg"
+		iconSize="h-4 w-4"
+		class="h-9 w-9 rounded-full bg-accent text-accent-foreground absolute bottom-4 shadow-md"
+	/>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenDialogsAndAlerts.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenDialogsAndAlerts.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..6305a74380155b7b95cd249077a542c993b8bcce
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenDialogsAndAlerts.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { Trash2 } from '@lucide/svelte';
+	import { ErrorDialogType } from '$lib/enums';
+	import {
+		DialogChatError,
+		DialogConfirmation,
+		DialogEmptyFileAlert,
+		DialogFileUploadError
+	} from '$lib/components/app';
+
+	let {
+		showDeleteDialog,
+		handleDeleteConfirm,
+		showEmptyFileDialog,
+		emptyFileNames,
+		activeErrorDialog,
+		handleErrorDialogOpenChange,
+		fileUpload
+	} = $props();
+</script>
+
+<DialogFileUploadError
+	bind:open={fileUpload.showFileErrorDialog}
+	fileErrorData={fileUpload.fileErrorData}
+/>
+
+<DialogConfirmation
+	bind:open={showDeleteDialog}
+	title="Delete Conversation"
+	description="Are you sure you want to delete this conversation? This action cannot be undone and will permanently remove all messages in this conversation."
+	confirmText="Delete"
+	cancelText="Cancel"
+	variant="destructive"
+	icon={Trash2}
+	onConfirm={handleDeleteConfirm}
+	onCancel={() => (showDeleteDialog = false)}
+/>
+
+<DialogEmptyFileAlert
+	bind:open={showEmptyFileDialog}
+	emptyFiles={emptyFileNames}
+	onOpenChange={(open) => {
+		if (!open) {
+			emptyFileNames = [];
+		}
+	}}
+/>
+
+<DialogChatError
+	message={activeErrorDialog?.message ?? ''}
+	contextInfo={activeErrorDialog?.contextInfo}
+	onOpenChange={handleErrorDialogOpenChange}
+	open={Boolean(activeErrorDialog)}
+	type={activeErrorDialog?.type ?? ErrorDialogType.SERVER}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenDragOverlay.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenDragOverlay.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..ab4adb2c2922308a7451da609c20e559607f886c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenDragOverlay.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { Upload } from '@lucide/svelte';
+</script>
+
+<div
+	class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+>
+	<div
+		class="flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-border bg-background p-12 shadow-lg"
+	>
+		<Upload class="mb-4 h-12 w-12 text-muted-foreground" />
+
+		<p class="text-lg font-medium text-foreground">Attach a file</p>
+
+		<p class="text-sm text-muted-foreground">Drop your files here to upload</p>
+	</div>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenForm.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenForm.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..600180742a42dadf90e6ce9c32f8daad7d38b9fd
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenForm.svelte
@@ -0,0 +1,152 @@
+<script lang="ts">
+	import { afterNavigate } from '$app/navigation';
+	import { page } from '$app/state';
+	import { ChatForm } from '$lib/components/app';
+	import { isMobile } from '$lib/stores/viewport.svelte';
+	import { onMount } from 'svelte';
+	import { useDraftMessages } from '$lib/hooks/use-draft-messages.svelte';
+
+	interface Props {
+		class?: string;
+		disabled?: boolean;
+		initialMessage?: string;
+		isLoading?: boolean;
+		onFileRemove?: (fileId: string) => void;
+		onFileUpload?: (files: File[]) => void;
+		onSend?: (message: string, files?: ChatUploadedFile[]) => Promise<boolean>;
+		onStop?: () => void;
+		onSystemPromptAdd?: (draft: { message: string; files: ChatUploadedFile[] }) => void;
+		uploadedFiles?: ChatUploadedFile[];
+	}
+
+	let {
+		class: className,
+		disabled = false,
+		initialMessage = '',
+		isLoading = false,
+		onFileRemove,
+		onFileUpload,
+		onSend,
+		onStop,
+		onSystemPromptAdd,
+		uploadedFiles = $bindable([])
+	}: Props = $props();
+
+	let chatFormRef: ChatForm | undefined = $state(undefined);
+	let formWrapperEl: HTMLDivElement | undefined = $state();
+	let chatId = $derived(page.params.id as string | undefined);
+
+	$effect(() => {
+		if (!formWrapperEl) return;
+
+		const formEl = formWrapperEl.querySelector('form') as HTMLElement | null;
+		if (!formEl) return;
+
+		const updateHeight = () => {
+			const height = Math.round(formEl.getBoundingClientRect().height);
+			document.documentElement.style.setProperty('--chat-form-height', `${height}px`);
+		};
+
+		updateHeight();
+
+		const resizeObserver = new ResizeObserver(updateHeight);
+		resizeObserver.observe(formEl);
+
+		return () => {
+			resizeObserver.disconnect();
+			document.documentElement.style.removeProperty('--chat-form-height');
+		};
+	});
+	let hasLoadingAttachments = $derived(uploadedFiles.some((f) => f.isLoading));
+	let message = $derived(initialMessage);
+	let previousIsLoading = $derived(isLoading);
+	let previousInitialMessage = $derived(initialMessage);
+
+	const { clearDraft } = useDraftMessages({
+		getChatId: () => chatId,
+		getMessage: () => message,
+		getFiles: () => uploadedFiles,
+		setMessage: (m) => (message = m),
+		setFiles: (f) => (uploadedFiles = f),
+		getInitialMessage: () => initialMessage
+	});
+
+	function handleFilesAdd(files: File[]) {
+		onFileUpload?.(files);
+	}
+
+	async function handleSubmit() {
+		if ((!message.trim() && uploadedFiles.length === 0) || disabled || hasLoadingAttachments)
+			return;
+
+		if (!chatFormRef?.checkModelSelected()) return;
+
+		const messageToSend = message.trim();
+		const filesToSend = [...uploadedFiles];
+
+		message = '';
+		uploadedFiles = [];
+		clearDraft();
+
+		chatFormRef?.resetTextareaHeight();
+
+		const success = await onSend?.(messageToSend, filesToSend);
+
+		if (!success) {
+			message = messageToSend;
+			uploadedFiles = filesToSend;
+		}
+	}
+
+	function handleSystemPromptClick() {
+		onSystemPromptAdd?.({ message, files: uploadedFiles });
+	}
+
+	function handleUploadedFileRemove(fileId: string) {
+		onFileRemove?.(fileId);
+	}
+
+	onMount(() => {
+		if (!isMobile.current) {
+			setTimeout(() => chatFormRef?.focus(), 100);
+		}
+	});
+
+	afterNavigate((navigation) => {
+		if (navigation?.from != null && !isMobile.current) {
+			setTimeout(() => chatFormRef?.focus(), 100);
+		}
+	});
+
+	$effect(() => {
+		if (initialMessage !== previousInitialMessage) {
+			message = initialMessage;
+			previousInitialMessage = initialMessage;
+		}
+	});
+
+	$effect(() => {
+		if (previousIsLoading && !isLoading) {
+			setTimeout(() => chatFormRef?.focus(), 10);
+		}
+
+		previousIsLoading = isLoading;
+	});
+</script>
+
+<div class="chat-screen-form-wrapper" bind:this={formWrapperEl}>
+	<ChatForm
+		class="mx-auto max-w-3xl {className}"
+		bind:this={chatFormRef}
+		bind:value={message}
+		bind:uploadedFiles
+		{disabled}
+		{isLoading}
+		showMcpPromptButton
+		onFilesAdd={handleFilesAdd}
+		{onStop}
+		onSubmit={handleSubmit}
+		onSystemPromptClick={handleSystemPromptClick}
+		onUploadedFileRemove={handleUploadedFileRemove}
+	/>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenGreeting.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenGreeting.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..018949aff87a96203e1278c70ca6116fdaaf3873
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenGreeting.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { serverStore } from '$lib/stores/server.svelte';
+
+	interface Props {
+		isEmpty: boolean;
+	}
+
+	let { isEmpty = false }: Props = $props();
+</script>
+
+<div
+	class={[
+		'pointer-events-none mb-4 hidden px-4 text-center text-balance',
+		isEmpty && 'mb-[calc(50dvh-8rem)] md:mb-6 pointer-events-auto block!'
+	]}
+>
+	<h1 class="mb-2 text-2xl font-semibold tracking-tight md:text-3xl">Hello there</h1>
+
+	<p class="text-muted-foreground md:text-lg">
+		{serverStore.props?.modalities?.audio ? 'Record audio, type a message ' : 'Type a message'} or upload
+		files to get started
+	</p>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenServerError.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenServerError.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..5345f19a57be7b654a5e3116e769597e0444fcdc
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenServerError.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { AlertTriangle, Loader2, RefreshCw } from '@lucide/svelte';
+	import { fadeInView } from '$lib/actions/fade-in-view.svelte';
+	import * as Alert from '$lib/components/ui/alert';
+	import { serverError, serverLoading, serverStatus, serverStore } from '$lib/stores/server.svelte';
+
+	let hasError = $derived(!!serverError());
+	let isLoadingModel = $derived(serverStatus() === 503);
+</script>
+
+{#if hasError}
+	<div
+		class="pointer-events-auto mx-auto mb-4 max-w-[48rem] px-1"
+		use:fadeInView={{ y: 10, duration: 250 }}
+	>
+		<Alert.Root variant={isLoadingModel ? 'default' : 'destructive'}>
+			{#if isLoadingModel}
+				<Loader2 class="h-4 w-4 animate-spin" />
+			{:else}
+				<AlertTriangle class="h-4 w-4" />
+			{/if}
+
+			<Alert.Title class="flex items-center justify-between">
+				<span>{isLoadingModel ? 'Loading model' : 'Server unavailable'}</span>
+
+				{#if !isLoadingModel}
+					<button
+						onclick={() => serverStore.fetch()}
+						disabled={serverLoading()}
+						class="flex items-center gap-1.5 rounded-lg bg-destructive/20 px-2 py-1 text-xs font-medium hover:bg-destructive/30 disabled:opacity-50"
+					>
+						<RefreshCw class="h-3 w-3 {serverLoading() ? 'animate-spin' : ''}" />
+						{serverLoading() ? 'Retrying...' : 'Retry'}
+					</button>
+				{/if}
+			</Alert.Title>
+
+			{#if !isLoadingModel}
+				<Alert.Description>{serverError()}</Alert.Description>
+			{/if}
+		</Alert.Root>
+	</div>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenStreamResumeStatus.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenStreamResumeStatus.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..b3abe4c660801541b34a518961d9c2799c03f08d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/ChatScreen/ChatScreenStreamResumeStatus.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { chatStore } from '$lib/stores/chat.svelte';
+	import { StreamConnectionState } from '$lib/enums';
+	import { Loader2 } from '@lucide/svelte';
+
+	let state = $derived(chatStore.streamConnectionState);
+</script>
+
+{#if state === StreamConnectionState.RESUMING}
+	<div
+		class="pointer-events-auto mx-auto mt-2 mb-2 flex max-w-[48rem] items-center gap-2 rounded-md border border-blue-400/40 bg-blue-50/60 px-3 py-1.5 text-sm text-blue-700 dark:bg-blue-950/40 dark:text-blue-200"
+		role="status"
+		aria-live="polite"
+	>
+		<Loader2 class="h-3.5 w-3.5 animate-spin" />
+		<span>Reconnecting to the stream...</span>
+	</div>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/chat/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4f826841e4b79aadb78dcc091d8515fbef2448cb
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/chat/index.ts
@@ -0,0 +1,690 @@
+/**
+ *
+ * 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 DialogChatAttachmentsPreview for full-size gallery/single 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/ChatAttachmentsList.svelte';
+
+/**
+ * Renders a single attachment item based on its type (image, file, MCP prompt, or MCP resource).
+ * Delegates to specialized sub-components: ChatAttachmentsListItemThumbnailImage, ChatAttachmentsListItemThumbnailFile,
+ * ChatAttachmentsListItemMcpPrompt, or ChatAttachmentsListItemMcpResource.
+ */
+export { default as ChatAttachmentsListItem } from './ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItem.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 ChatFormPickerMcpPrompts.
+ */
+export { default as ChatAttachmentsListItemMcpPrompt } from './ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemMcpPrompt.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 ChatAttachmentsListItemMcpResource } from './ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemMcpResource.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 ChatAttachmentsListItemThumbnailFile } from './ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemThumbnailFile.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 ChatAttachmentsListItemThumbnailImage } from './ChatAttachments/ChatAttachmentsList/ChatAttachmentsListItem/ChatAttachmentsListItemThumbnailImage.svelte';
+
+/**
+ * Unified attachment preview component for dialog display. Shows a single file
+ * preview without carousel, or a gallery/carousel view when multiple items exist.
+ * Uses ChatAttachmentPreviewSingle internally for each item's content.
+ */
+export { default as ChatAttachmentsPreview } from './ChatAttachments/ChatAttachmentsPreview.svelte';
+export { default as ChatAttachmentsPreviewNavButtons } from './ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewNavButtons.svelte';
+export { default as ChatAttachmentsPreviewFileInfo } from './ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewFileInfo.svelte';
+export { default as ChatAttachmentsPreviewThumbnailStrip } from './ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewThumbnailStrip.svelte';
+export { default as ChatAttachmentsPreviewCurrentItem } from './ChatAttachments/ChatAttachmentsPreview/ChatAttachmentsPreviewCurrentItem/ChatAttachmentsPreviewCurrentItem.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 ChatFormPickerMcpPrompts
+ * - Manages file upload state via `uploadedFiles` bindable prop
+ * - Integrates with ModelsSelectorDropdown 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';
+
+/**
+ * Wrapper component for the "add to chat" button (Plus icon).
+ * Exposes a `button` snippet that can be used inside DropdownMenu.Trigger (desktop)
+ * or Sheet.Root (mobile) to maintain consistent styling while allowing
+ * platform-specific trigger wrappers.
+ */
+export { default as ChatFormActionsAdd } from './ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionsAdd.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';
+
+/**
+ * Model selector component for the chat form action bar. Renders either a dropdown
+ * (desktop) or bottom sheet (mobile) for selecting the conversation model in router mode.
+ * Exposes an `open` method for programmatically opening the selector.
+ */
+export { default as ChatFormActionModels } from './ChatForm/ChatFormActions/ChatFormActionModels.svelte';
+
+/**
+ * Dropdown submenu for managing tool permissions in the chat form.
+ *
+ * Displays a collapsible list of available tools organized by group (Built-in / JSON Schema).
+ * Each group can be expanded to show individual tools with checkboxes for enabling/disabling.
+ * Provides bulk enable/disable controls per group and shows enabled/total tool counts.
+ * Opens the tools panel on the server when the menu opens.
+ *
+ * Features:
+ * - Grouped tools with collapsible sections
+ * - Group favicon display (MCP server icons)
+ * - Per-group and per-tool toggle checkboxes
+ * - Loading/error states for tool discovery
+ * - Integration with toolsPanel for state management
+ *
+ * @example
+ * ```svelte
+ * <ChatFormActionAddToolsSubmenu />
+ * ```
+ */
+export { default as ChatFormActionAddToolsSubmenu } from './ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddToolsSubmenu.svelte';
+
+/**
+ * Dropdown submenu for managing MCP servers in the chat form.
+ *
+ * Displays a searchable list of enabled MCP servers with toggle switches
+ * to enable/disable each server for chat. Shows server favicon, health status,
+ * and a "Manage MCP Servers" settings link.
+ *
+ * Features:
+ * - Search/filter servers by name or URL
+ * - Per-server toggle to enable/disable for chat
+ * - Health check indicator (shows "Error" badge for failed servers)
+ * - Server favicon display
+ * - Settings link to manage MCP server configuration
+ *
+ * @example
+ * ```svelte
+ * <ChatFormActionAddMcpServersSubmenu onMcpSettingsClick={handleMcpSettingsClick} />
+ * ```
+ */
+export { default as ChatFormActionAddMcpServersSubmenu } from './ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddMcpServersSubmenu.svelte';
+
+/**
+ * Dropdown submenu for selecting reasoning effort level.
+ *
+ * Shows a "Reasoning" sub-menu item with a lightbulb icon indicating
+ * thinking status, and a nested list of effort levels.
+ * Only visible when the current model supports thinking.
+ */
+export { default as ChatFormActionAddReasoningSubmenu } from './ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddReasoningSubmenu.svelte';
+
+/**
+ * Compact context-usage gauge with per-turn and cumulative breakdown in the tooltip.
+ */
+export { default as ChatFormContextGauge } from './ChatForm/ChatFormContextGauge/ChatFormContextGauge.svelte';
+
+/**
+ * Hidden file input element for programmatic file selection.
+ */
+export { default as ChatFormFileInputInvisible } from './ChatForm/ChatFormFileInputInvisible.svelte';
+
+/**
+ * Displays MCP Resource attachments as a horizontal carousel.
+ * Shows resource name, URI, and allows clicking to view resource content.
+ */
+export { default as ChatFormMcpResourcesList } from './ChatForm/ChatFormMcpResourcesList.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';
+
+/**
+ * **ChatFormPickerMcpPrompts** - 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 ChatFormActionAddDropdown.
+ * 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
+ * <ChatFormPickerMcpPrompts
+ *   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 ChatFormPickerMcpPrompts } from './ChatForm/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPickerMcpPrompts.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/ChatFormPickers/ChatFormPickerMcpPrompts/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/ChatFormPickers/ChatFormPickerMcpPrompts/ChatFormPromptPickerArgumentInput.svelte';
+
+/**
+ * Shared popover wrapper for inline picker popovers (prompts, resources).
+ * Provides consistent positioning, styling, and open/close behavior.
+ */
+export { default as ChatFormPickerPopover } from './ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerPopover.svelte';
+
+/**
+ * Generic scrollable list for picker popovers. Provides search input,
+ * scroll-into-view for keyboard navigation, loading skeletons, empty state,
+ * and optional footer. Uses Svelte 5 snippets for item/skeleton/footer rendering.
+ * Shared by ChatFormPickerMcpPrompts and ChatFormPickerMcpResources.
+ */
+export { default as ChatFormPickerList } from './ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerList.svelte';
+
+/**
+ * Generic button wrapper for picker list items. Provides consistent styling,
+ * hover/selected states, and data-picker-index attribute for scroll-into-view.
+ * Shared by ChatFormPickerMcpPrompts and ChatFormPickerMcpResources.
+ */
+export { default as ChatFormPickerListItem } from './ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerListItem.svelte';
+
+/**
+ * Generic header for picker items displaying server favicon, label, item title,
+ * and optional description. Accepts `titleExtra` and `subtitle` snippets for
+ * custom content like badges or URIs. Shared by both pickers.
+ */
+export { default as ChatFormPickerItemHeader } from './ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerItemHeader.svelte';
+
+/**
+ * Generic skeleton loading placeholder for picker list items. Configurable
+ * title width and optional badge skeleton. Shared by both pickers.
+ */
+export { default as ChatFormPickerListItemSkeleton } from './ChatForm/ChatFormPickers/ChatFormPicker/ChatFormPickerListItemSkeleton.svelte';
+
+/**
+ * **ChatFormPickerMcpResources** - MCP resource selection interface
+ *
+ * Floating picker for browsing and attaching MCP Server Resources.
+ * Triggered by typing `@` in the chat input.
+ * Loads resources from connected MCP servers and allows users to attach them to the chat context.
+ *
+ * **Features:**
+ * - Search/filter resources by name, title, description, or URI across all connected servers
+ * - Keyboard navigation (↑/↓ to navigate, Enter to select, Esc to close)
+ * - Shows attached state for already-attached resources
+ * - Loading states with skeleton placeholders
+ * - Server information header per resource for visual identification
+ *
+ * **Exported API:**
+ * - `handleKeydown(event): boolean` - Process keyboard events, returns true if handled
+ */
+export { default as ChatFormPickerMcpResources } from './ChatForm/ChatFormPickers/ChatFormPickerMcpResources.svelte';
+
+/**
+ * **ChatFormPickers** - Chat input picker container
+ *
+ * Container component that hosts both MCP prompt and MCP resource pickers.
+ * Manages shared state, keyboard navigation, and coordination between the two
+ * picker interfaces. Used within ChatForm for `@`-triggered pickers.
+ */
+export { default as ChatFormPickers } from './ChatForm/ChatFormPickers/ChatFormPickers.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 ChatAttachments
+ * - 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/ChatMessage.svelte';
+
+/**
+ * **ChatMessageAgenticContent** - Agentic workflow output display
+ *
+ * Specialized renderer for assistant messages with tool calls and reasoning.
+ * Derives display sections from structured message data (toolCalls, reasoningContent,
+ * and child tool result messages) and renders them as interactive collapsible sections.
+ *
+ * **Architecture:**
+ * - Uses `deriveAgenticSections()` from `$lib/utils` to build sections from structured data
+ * - Renders sections as CollapsibleContentBlock components
+ * - Handles streaming state for progressive content display
+ * - Falls back to MarkdownContent for plain text sections
+ *
+ * **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';
+export { default as ChatMessageActionCardPermissionRequest } from './ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCardPermissionRequest.svelte';
+export { default as ChatMessageActionCard } from './ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCard.svelte';
+export { default as ChatMessageActionCardContinueRequest } from './ChatMessages/ChatMessageActions/ChatMessageActionCard/ChatMessageActionCardContinueRequest.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 ChatMessageActionIcons } from './ChatMessages/ChatMessageActions/ChatMessageActionIcons/ChatMessageActionIcons.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 ChatMessageActionIconsBranchingControls } from './ChatMessages/ChatMessageActions/ChatMessageActionIcons/ChatMessageActionIconsBranchingControls.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/ChatMessageStatistics.svelte';
+export { default as ChatMessageStatisticsBadge } from './ChatMessages/ChatMessageStatistics/ChatMessageStatisticsBadge.svelte';
+
+/**
+ * MCP prompt display in user messages. Shows when user selected an MCP prompt
+ * via ChatFormPickerMcpPrompts. Displays server name, prompt name, and expandable
+ * content preview. Stored in message.extra as DatabaseMessageExtraMcpPrompt.
+ */
+export { default as ChatMessageMcpPrompt } from './ChatMessages/ChatMessage/ChatMessageMcpPrompt/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/ChatMessage/ChatMessageMcpPrompt/ChatMessageMcpPromptContent.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/ChatMessage/ChatMessageAssistant/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';
+
+/**
+ * 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/ChatMessage/ChatMessageUser/ChatMessageUser.svelte';
+export { default as ChatMessageUserBubble } from './ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUserBubble.svelte';
+export { default as ChatMessageUserPending } from './ChatMessages/ChatMessage/ChatMessageUser/ChatMessageUserPending.svelte';
+
+/**
+ * System message display component. Renders system messages with distinct styling.
+ * Visibility controlled by `showSystemMessage` config setting.
+ */
+export { default as ChatMessageSystem } from './ChatMessages/ChatMessage/ChatMessageSystem/ChatMessageSystem.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, 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 />
+ *
+ * <!-- 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';
+
+/**
+ * Server error alert displayed when the server is unreachable.
+ * Shows the error message with a retry button.
+ * Rendered inside ChatScreen when `serverError` store has a value.
+ */
+export { default as ChatScreenServerError } from './ChatScreen/ChatScreenServerError.svelte';
+
+/**
+ * Stream resume status indicator. Shows a small "Reconnecting to the stream..."
+ * banner with a spinner while `chatStore.streamConnectionState` is `resuming`,
+ * i.e. after a dropped connection is reattaching to the live SSE replay buffer.
+ * Renders nothing otherwise. Shown inside ChatScreen only on an active conversation route.
+ */
+export { default as ChatScreenStreamResumeStatus } from './ChatScreen/ChatScreenStreamResumeStatus.svelte';
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/CollapsibleContentBlock.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/content/CollapsibleContentBlock.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..3875b449a186147731a8c200b678ba75cc2302d8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/CollapsibleContentBlock.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+	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 { createAutoScrollController } from '$lib/hooks/use-auto-scroll.svelte';
+	import { useThrottle } from '$lib/hooks/use-throttle.svelte';
+	import { formatReasoningPreview } from '$lib/utils';
+	import { config } from '$lib/stores/settings.svelte';
+	import type { Snippet } from 'svelte';
+	import type { Component } from 'svelte';
+
+	interface Props {
+		open?: boolean;
+		class?: string;
+		icon?: Component;
+		iconClass?: string;
+		title: string;
+		subtitle?: string;
+		preview?: string;
+		rawContent?: string;
+		isStreaming?: boolean;
+		onToggle?: () => void;
+		children: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		class: className = '',
+		icon: IconComponent,
+		iconClass = 'h-4 w-4',
+		title,
+		subtitle,
+		preview,
+		rawContent,
+		isStreaming = false,
+		onToggle,
+		children
+	}: Props = $props();
+
+	let contentContainer: HTMLDivElement | undefined = $state();
+
+	const showThoughtInProgress = $derived(config().showThoughtInProgress as boolean);
+
+	let previewKey = useThrottle(() => rawContent ?? preview ?? '', 500);
+	let displayedPreview = $state('');
+	let displayedOverflow = $state(0);
+
+	$effect(() => {
+		void previewKey.key;
+		const content = rawContent ?? preview ?? '';
+		const result = formatReasoningPreview(content);
+		displayedPreview = result.preview;
+		displayedOverflow = result.overflow;
+	});
+
+	const autoScroll = createAutoScrollController();
+
+	$effect(() => {
+		autoScroll.setContainer(contentContainer);
+	});
+
+	$effect(() => {
+		// Only auto-scroll when open and streaming
+		autoScroll.updateInterval(open && isStreaming);
+	});
+
+	function handleScroll() {
+		autoScroll.handleScroll();
+	}
+</script>
+
+<Collapsible.Root
+	{open}
+	onOpenChange={(value) => {
+		open = value;
+		onToggle?.();
+	}}
+	class="{className} my-0!"
+>
+	<Card class="gap-0 border-muted bg-muted/30 py-0">
+		<Collapsible.Trigger class="flex w-full cursor-pointer items-start justify-between gap-2 p-3">
+			<div class="flex min-w-0 items-center gap-2">
+				<div class="flex items-center gap-2 text-muted-foreground">
+					{#if IconComponent}
+						<IconComponent class={iconClass} />
+					{/if}
+
+					<span class="font-mono text-sm font-medium">{title}</span>
+
+					{#if subtitle}
+						<span class="text-xs italic">{subtitle}</span>
+					{/if}
+				</div>
+
+				{#if displayedPreview && !showThoughtInProgress}
+					<div class="flex min-w-0 items-baseline justify-between gap-2">
+						<div class="w-3/4 truncate text-xs text-muted-foreground/80">
+							{displayedPreview}
+						</div>
+						{#if displayedOverflow > 0}
+							<span class="shrink-0 text-xs text-muted-foreground/60"
+								>{displayedOverflow}+ chars</span
+							>
+						{/if}
+					</div>
+				{/if}
+			</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 content</span>
+			</div>
+		</Collapsible.Trigger>
+
+		<Collapsible.Content>
+			<div
+				bind:this={contentContainer}
+				class="overflow-y-auto border-t border-muted px-3 pb-3"
+				onscroll={handleScroll}
+				style="min-height: var(--min-message-height); max-height: var(--max-message-height);"
+			>
+				{@render children()}
+			</div>
+		</Collapsible.Content>
+	</Card>
+</Collapsible.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/MarkdownContent.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/MarkdownContent.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..8ac7f94483a207208be5fa890e7a927557a9032b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/MarkdownContent.svelte
@@ -0,0 +1,933 @@
+<script lang="ts">
+	import { remark } from 'remark';
+	import remarkBreaks from 'remark-breaks';
+	import remarkGfm from 'remark-gfm';
+	import remarkMath from 'remark-math';
+	import rehypeHighlight from 'rehype-highlight';
+	import { all as lowlightAll } from 'lowlight';
+	import remarkRehype from 'remark-rehype';
+	import rehypeKatex from 'rehype-katex';
+	import rehypeStringify from 'rehype-stringify';
+	import type { Root as HastRoot, RootContent as HastRootContent } from 'hast';
+	import type { Root as MdastRoot } from 'mdast';
+	import { browser } from '$app/environment';
+	import { onDestroy, tick } from 'svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import { rehypeRestoreTableHtml } from './plugins/rehype/table-html-restorer';
+	import { rehypeEnhanceLinks } from './plugins/rehype/enhance-links';
+	import { rehypeEnhanceCodeBlocks } from './plugins/rehype/enhance-code-blocks';
+	import { rehypeEnhanceMermaidBlocks } from './plugins/rehype/enhance-mermaid-blocks';
+	import { rehypeMermaidPre } from './plugins/rehype/mermaid-pre';
+	import { rehypeSvgPre } from './plugins/rehype/svg-pre';
+	import { rehypeEnhanceSvgBlocks } from './plugins/rehype/enhance-svg-blocks';
+	import { rehypeResolveAttachmentImages } from './plugins/rehype/resolve-attachment-images';
+	import { rehypeRtlSupport } from './plugins/rehype/rehype-rtl-support';
+	import { remarkLiteralHtml } from './plugins/remark/literal-html';
+	import {
+		getHastNodeId,
+		getMdastNodeHash,
+		isAppendMode,
+		getCodeInfoFromTarget
+	} from './markdown-utils';
+	import {
+		preprocessLaTeX,
+		getImageErrorFallbackHtml,
+		copyCodeToClipboard,
+		copyToClipboard
+	} from '$lib/utils';
+	import {
+		IMAGE_NOT_ERROR_BOUND_SELECTOR,
+		DATA_ERROR_BOUND_ATTR,
+		DATA_ERROR_HANDLED_ATTR,
+		BOOL_TRUE_STRING,
+		SETTINGS_KEYS,
+		CODE_BLOCK_HEADER_CLASS,
+		MERMAID_WRAPPER_CLASS,
+		MERMAID_BLOCK_CLASS,
+		MERMAID_LANGUAGE,
+		MERMAID_SYNTAX_ATTR,
+		MERMAID_RENDERED_ATTR,
+		SVG_WRAPPER_CLASS,
+		SVG_BLOCK_CLASS,
+		SVG_LANGUAGE,
+		XML_LANGUAGE,
+		SVG_TAG_PREFIX,
+		SVG_SOURCE_ATTR,
+		SVG_RENDERED_ATTR,
+		SVG_INLINE_SHADOW_STYLE,
+		TOGGLE_SOURCE_BTN_CLASS,
+		DIAGRAM_VIEW_MODE_ATTR,
+		DIAGRAM_VIEW_RENDERED,
+		DIAGRAM_VIEW_SOURCE
+	} from '$lib/constants';
+	import { ColorMode, UrlProtocol } from '$lib/enums';
+	import { FileTypeText } from '$lib/enums/files.enums';
+	import { highlightCode, detectIncompleteCodeBlock, type IncompleteCodeBlock } from '$lib/utils';
+	import { sanitizeSvg } from '$lib/utils/sanitize-svg';
+	import { mountSvgShadow } from '$lib/utils/svg-shadow';
+	import '$styles/katex-custom.scss';
+	import githubDarkCss from 'highlight.js/styles/github-dark.css?inline';
+	import githubLightCss from 'highlight.js/styles/github.css?inline';
+	import { mode } from 'mode-watcher';
+	import {
+		CodeBlockActions,
+		DialogCodePreview,
+		DialogMermaidPreview,
+		ActionIconCopyToClipboard
+	} from '$lib/components/app';
+	import { createAutoScrollController } from '$lib/hooks/use-auto-scroll.svelte';
+	import type { DatabaseMessageExtra } from '$lib/types/database';
+	import { config } from '$lib/stores/settings.svelte';
+	import { fadeInView } from '$lib/actions/fade-in-view.svelte';
+
+	interface Props {
+		attachments?: DatabaseMessageExtra[];
+		content: string;
+		class?: string;
+		disableMath?: boolean;
+	}
+
+	interface MarkdownBlock {
+		id: string;
+		html: string;
+		contentHash?: string;
+	}
+
+	let { content, attachments, class: className = '', disableMath = false }: Props = $props();
+
+	let containerRef = $state<HTMLDivElement>();
+	let renderedBlocks = $state<MarkdownBlock[]>([]);
+	let unstableBlockHtml = $state('');
+	let incompleteCodeBlock = $state<IncompleteCodeBlock | null>(null);
+	const streamingSvgCode = $derived.by(() => {
+		const block = incompleteCodeBlock;
+		if (!block) return null;
+		if (block.language === SVG_LANGUAGE) return block.code;
+		if (block.language === XML_LANGUAGE && block.code.trimStart().startsWith(SVG_TAG_PREFIX))
+			return block.code;
+		return null;
+	});
+	const liveSvgHtml = $derived(streamingSvgCode !== null ? sanitizeSvg(streamingSvgCode) : '');
+	let previewDialogOpen = $state(false);
+	let previewCode = $state('');
+	let previewLanguage = $state('text');
+	let mermaidPreviewOpen = $state(false);
+	let mermaidPreviewSvgHtml = $state('');
+	let svgPreviewLive = $state(false);
+	let streamingSvgHost = $state<HTMLDivElement | null>(null);
+
+	// While the zoom dialog is open on a streaming svg, mirror the live render into it
+	$effect(() => {
+		if (svgPreviewLive && liveSvgHtml) mermaidPreviewSvgHtml = liveSvgHtml;
+	});
+
+	// Mount the streaming svg into its shadow host on every chunk so it renders live
+	$effect(() => {
+		if (streamingSvgHost) mountSvgShadow(streamingSvgHost, liveSvgHtml, SVG_INLINE_SHADOW_STYLE);
+	});
+
+	let streamingCodeScrollContainer = $state<HTMLDivElement>();
+
+	// Auto-scroll controller for streaming code block content
+	const streamingAutoScroll = createAutoScrollController();
+
+	let pendingMarkdown: string | null = null;
+	let isProcessing = false;
+
+	// Per-instance transform cache, avoids re-transforming stable blocks during streaming
+	// Garbage collected when component is destroyed (on conversation change)
+	const transformCache = new SvelteMap<string, string>();
+	let previousContent = '';
+
+	const themeStyleId = `highlight-theme-${(window.idxThemeStyle = (window.idxThemeStyle ?? 0) + 1)}`;
+
+	let processor = $derived(() => {
+		void attachments;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		let proc: any = remark().use(remarkGfm); // GitHub Flavored Markdown
+
+		if (!disableMath) {
+			proc = proc.use(remarkMath); // Parse $inline$ and $$block$$ math
+		}
+
+		proc = proc
+			.use(remarkBreaks) // Convert line breaks to <br>
+			.use(remarkLiteralHtml) // Treat raw HTML as literal text with preserved indentation
+			.use(remarkRehype); // Convert Markdown AST to rehype
+
+		if (!disableMath) {
+			proc = proc.use(rehypeKatex); // Render math using KaTeX
+		}
+
+		return proc
+			.use(rehypeHighlight, {
+				languages: lowlightAll,
+				aliases: { [FileTypeText.XML]: [FileTypeText.SVELTE, FileTypeText.VUE] }
+			}) // Add syntax highlighting
+			.use(rehypeRestoreTableHtml) // Restore limited HTML (e.g., <br>, <ul>) inside Markdown tables
+			.use(rehypeEnhanceLinks) // Add target="_blank" to links
+			.use(rehypeMermaidPre) // Convert mermaid blocks to <pre class="mermaid">
+			.use(rehypeSvgPre) // Convert svg blocks to <pre class="svg-block">
+			.use(rehypeEnhanceCodeBlocks) // Wrap code blocks with header and actions
+			.use(rehypeEnhanceMermaidBlocks) // Wrap mermaid blocks with header and actions
+			.use(rehypeEnhanceSvgBlocks) // Wrap svg blocks with header and actions
+			.use(rehypeResolveAttachmentImages, { attachments })
+			.use(rehypeRtlSupport) // Add bidirectional text support
+			.use(rehypeStringify, { allowDangerousHtml: true }); // Convert to HTML string
+	});
+
+	/**
+	 * Removes click event listeners from copy and preview buttons.
+	 * Called on component destroy.
+	 */
+	function cleanupEventListeners() {
+		if (!containerRef) return;
+
+		const copyButtons = containerRef.querySelectorAll<HTMLButtonElement>('.copy-code-btn');
+		const previewButtons = containerRef.querySelectorAll<HTMLButtonElement>('.preview-code-btn');
+
+		for (const button of copyButtons) {
+			button.removeEventListener('click', handleCopyClick);
+		}
+
+		for (const button of previewButtons) {
+			button.removeEventListener('click', handlePreviewClick);
+		}
+	}
+
+	/**
+	 * Removes this component's highlight.js theme style from the document head.
+	 * Called on component destroy to clean up injected styles.
+	 */
+	function cleanupHighlightTheme() {
+		if (!browser) return;
+
+		const existingTheme = document.getElementById(themeStyleId);
+		existingTheme?.remove();
+	}
+
+	/**
+	 * Loads the appropriate highlight.js theme based on dark/light mode.
+	 * Injects a scoped style element into the document head.
+	 * @param isDark - Whether to load the dark theme (true) or light theme (false)
+	 */
+	function loadHighlightTheme(isDark: boolean) {
+		if (!browser) return;
+
+		const existingTheme = document.getElementById(themeStyleId);
+		existingTheme?.remove();
+
+		const style = document.createElement('style');
+		style.id = themeStyleId;
+		style.textContent = isDark ? githubDarkCss : githubLightCss;
+
+		document.head.appendChild(style);
+	}
+
+	/**
+	 * Transforms a single MDAST node to HTML string with caching.
+
+	/**
+	 * Transforms a single MDAST node to HTML string with caching.
+	 * Runs the full remark/rehype plugin pipeline (GFM, math, syntax highlighting, etc.)
+	 * on an isolated single-node tree, then stringifies the resulting HAST to HTML.
+	 * Results are cached by node position hash for streaming performance.
+	 * @param processorInstance - The remark/rehype processor instance
+	 * @param node - The MDAST node to transform
+	 * @param index - Node index for hash fallback
+	 * @returns Object containing the HTML string and cache hash
+	 */
+	async function transformMdastNode(
+		processorInstance: ReturnType<typeof processor>,
+		node: unknown,
+		index: number
+	): Promise<{ html: string; hash: string }> {
+		const hash = getMdastNodeHash(node, index);
+
+		const cached = transformCache.get(hash);
+		if (cached) {
+			return { html: cached, hash };
+		}
+
+		const singleNodeRoot = { type: 'root', children: [node] };
+		const transformedRoot = (await processorInstance.run(singleNodeRoot as MdastRoot)) as HastRoot;
+		const html = processorInstance.stringify(transformedRoot);
+
+		transformCache.set(hash, html);
+
+		return { html, hash };
+	}
+
+	/**
+	 * Handles click events on copy buttons within code blocks.
+	 * Copies the raw code content to the clipboard.
+	 * @param event - The click event from the copy button
+	 */
+	async function handleCopyClick(event: Event) {
+		event.preventDefault();
+		event.stopPropagation();
+
+		const target = event.currentTarget as HTMLButtonElement | null;
+
+		if (!target) {
+			return;
+		}
+
+		const info = getCodeInfoFromTarget(target);
+
+		if (!info) {
+			return;
+		}
+
+		try {
+			await copyCodeToClipboard(info.rawCode);
+		} catch (error) {
+			console.error('Failed to copy code:', error);
+		}
+	}
+
+	/**
+	 * Handles preview dialog open state changes.
+	 * Clears preview content when dialog is closed.
+	 * @param open - Whether the dialog is being opened or closed
+	 */
+	function handlePreviewDialogOpenChange(open: boolean) {
+		previewDialogOpen = open;
+
+		if (!open) {
+			previewCode = '';
+			previewLanguage = 'text';
+		}
+	}
+
+	/**
+	 * Handles click events on preview buttons within HTML code blocks.
+	 * Opens a preview dialog with the rendered HTML content.
+	 * @param event - The click event from the preview button
+	 */
+	function handlePreviewClick(event: Event) {
+		event.preventDefault();
+		event.stopPropagation();
+
+		const target = event.currentTarget as HTMLButtonElement | null;
+
+		if (!target) {
+			return;
+		}
+
+		const info = getCodeInfoFromTarget(target);
+
+		if (!info) {
+			return;
+		}
+
+		previewCode = info.rawCode;
+		previewLanguage = info.language;
+		previewDialogOpen = true;
+	}
+
+	/**
+	 * Processes markdown content into stable and unstable HTML blocks.
+	 * Uses incremental rendering: stable blocks are cached, unstable block is re-rendered.
+	 * Incomplete code blocks are rendered using SyntaxHighlightedCode to maintain interactivity.
+	 * @param markdown - The raw markdown string to process
+	 */
+	async function processMarkdown(markdown: string) {
+		// Early exit if content unchanged (can happen with rapid coalescing)
+		if (markdown === previousContent) {
+			return;
+		}
+
+		if (!markdown) {
+			renderedBlocks = [];
+			unstableBlockHtml = '';
+			incompleteCodeBlock = null;
+			previousContent = '';
+			return;
+		}
+
+		// Check for incomplete code block at the end of content
+		const incompleteBlock = detectIncompleteCodeBlock(markdown);
+
+		if (incompleteBlock) {
+			// Process only the prefix (content before the incomplete code block)
+			const prefixMarkdown = markdown.slice(0, incompleteBlock.openingIndex);
+
+			if (prefixMarkdown.trim()) {
+				const normalizedPrefix = preprocessLaTeX(prefixMarkdown);
+				const processorInstance = processor();
+				const ast = processorInstance.parse(normalizedPrefix) as MdastRoot;
+				const mdastChildren = (ast as { children?: unknown[] }).children ?? [];
+				const nextBlocks: MarkdownBlock[] = [];
+
+				// Check if we're in append mode for cache reuse
+				const appendMode = isAppendMode(prefixMarkdown, previousContent);
+				const previousBlockCount = appendMode ? renderedBlocks.length : 0;
+
+				// All prefix blocks are now stable since code block is separate
+				for (let index = 0; index < mdastChildren.length; index++) {
+					const child = mdastChildren[index];
+
+					// In append mode, reuse previous blocks if unchanged
+					if (appendMode && index < previousBlockCount) {
+						const prevBlock = renderedBlocks[index];
+						const currentHash = getMdastNodeHash(child, index);
+
+						if (prevBlock?.contentHash === currentHash) {
+							nextBlocks.push(prevBlock);
+
+							continue;
+						}
+					}
+
+					// Transform this block (with caching)
+					const { html, hash } = await transformMdastNode(processorInstance, child, index);
+					const id = getHastNodeId(
+						{ position: (child as { position?: unknown }).position } as HastRootContent,
+						index
+					);
+
+					nextBlocks.push({ id, html, contentHash: hash });
+				}
+
+				renderedBlocks = nextBlocks;
+			} else {
+				renderedBlocks = [];
+			}
+
+			previousContent = prefixMarkdown;
+			unstableBlockHtml = '';
+			incompleteCodeBlock = incompleteBlock;
+
+			return;
+		}
+
+		// No incomplete code block - use standard processing
+		incompleteCodeBlock = null;
+
+		const normalized = preprocessLaTeX(markdown);
+		const processorInstance = processor();
+		const ast = processorInstance.parse(normalized) as MdastRoot;
+		const mdastChildren = (ast as { children?: unknown[] }).children ?? [];
+		const stableCount = Math.max(mdastChildren.length - 1, 0);
+		const nextBlocks: MarkdownBlock[] = [];
+
+		// Check if we're in append mode for cache reuse
+		const appendMode = isAppendMode(markdown, previousContent);
+		const previousBlockCount = appendMode ? renderedBlocks.length : 0;
+
+		for (let index = 0; index < stableCount; index++) {
+			const child = mdastChildren[index];
+
+			// In append mode, reuse previous blocks if unchanged
+			if (appendMode && index < previousBlockCount) {
+				const prevBlock = renderedBlocks[index];
+				const currentHash = getMdastNodeHash(child, index);
+				if (prevBlock?.contentHash === currentHash) {
+					nextBlocks.push(prevBlock);
+
+					continue;
+				}
+			}
+
+			// Transform this block (with caching)
+			const { html, hash } = await transformMdastNode(processorInstance, child, index);
+			const id = getHastNodeId(
+				{ position: (child as { position?: unknown }).position } as HastRootContent,
+				index
+			);
+
+			nextBlocks.push({ id, html, contentHash: hash });
+		}
+
+		let unstableHtml = '';
+
+		if (mdastChildren.length > stableCount) {
+			const unstableChild = mdastChildren[stableCount];
+			const singleNodeRoot = { type: 'root', children: [unstableChild] };
+			const transformedRoot = (await processorInstance.run(
+				singleNodeRoot as MdastRoot
+			)) as HastRoot;
+
+			unstableHtml = processorInstance.stringify(transformedRoot);
+		}
+
+		renderedBlocks = nextBlocks;
+		previousContent = markdown;
+		await tick(); // Force DOM sync before updating unstable HTML block
+		unstableBlockHtml = unstableHtml;
+	}
+
+	/**
+	 * Attaches click event listeners to copy and preview buttons in code blocks.
+	 * Uses data-listener-bound attribute to prevent duplicate bindings.
+	 */
+	function setupCodeBlockActions() {
+		if (!containerRef) return;
+
+		const wrappers = containerRef.querySelectorAll<HTMLElement>('.code-block-wrapper');
+
+		for (const wrapper of wrappers) {
+			const copyButton = wrapper.querySelector<HTMLButtonElement>('.copy-code-btn');
+			const previewButton = wrapper.querySelector<HTMLButtonElement>('.preview-code-btn');
+
+			if (copyButton && copyButton.dataset.listenerBound !== 'true') {
+				copyButton.dataset.listenerBound = 'true';
+				copyButton.addEventListener('click', handleCopyClick);
+			}
+
+			if (previewButton && previewButton.dataset.listenerBound !== 'true') {
+				previewButton.dataset.listenerBound = 'true';
+				previewButton.addEventListener('click', handlePreviewClick);
+			}
+		}
+	}
+
+	/**
+	 * Attaches error handlers to images to show fallback UI when loading fails (e.g., CORS).
+	 * Uses data-error-bound attribute to prevent duplicate bindings.
+	 */
+	function setupImageErrorHandlers() {
+		if (!containerRef) return;
+
+		const images = containerRef.querySelectorAll<HTMLImageElement>(IMAGE_NOT_ERROR_BOUND_SELECTOR);
+
+		for (const img of images) {
+			img.dataset[DATA_ERROR_BOUND_ATTR] = BOOL_TRUE_STRING;
+			img.addEventListener('error', handleImageError);
+		}
+	}
+
+	/**
+	 * Opens the mermaid diagram in a full-screen preview dialog with zoom/pan support.
+	 * Also handles copy and preview button clicks for mermaid blocks.
+	 * Uses event delegation: a single handler on the container.
+	 */
+	async function handleMermaidClick(event: MouseEvent) {
+		const target = event.target as HTMLElement;
+
+		// Toggle a diagram block between its rendered view and its source view.
+		// Shared by mermaid and svg, css drives the visibility from the wrapper mode.
+		const toggleBtn = target.closest(`.${TOGGLE_SOURCE_BTN_CLASS}`);
+		if (toggleBtn) {
+			event.preventDefault();
+			event.stopPropagation();
+
+			const wrapper = toggleBtn.closest(`.${MERMAID_WRAPPER_CLASS}, .${SVG_WRAPPER_CLASS}`);
+			if (!wrapper) return;
+
+			const isSource = wrapper.getAttribute(DIAGRAM_VIEW_MODE_ATTR) === DIAGRAM_VIEW_SOURCE;
+			const next = isSource ? DIAGRAM_VIEW_RENDERED : DIAGRAM_VIEW_SOURCE;
+			wrapper.setAttribute(DIAGRAM_VIEW_MODE_ATTR, next);
+			toggleBtn.setAttribute('aria-pressed', String(!isSource));
+			return;
+		}
+
+		// Check if clicking on copy or preview button in mermaid block
+		const copyBtn = target.closest(`.${MERMAID_WRAPPER_CLASS} .copy-code-btn`);
+		const previewBtn = target.closest(`.${MERMAID_WRAPPER_CLASS} .preview-code-btn`);
+
+		if (copyBtn || previewBtn) {
+			const wrapper = target.closest(`.${MERMAID_WRAPPER_CLASS}`);
+			if (!wrapper) return;
+
+			const preElement = wrapper.querySelector<HTMLElement>(
+				`pre.${MERMAID_BLOCK_CLASS}[${MERMAID_SYNTAX_ATTR}]`
+			);
+			if (!preElement) return;
+
+			const mermaidSyntax = preElement.getAttribute(MERMAID_SYNTAX_ATTR) ?? '';
+
+			if (copyBtn) {
+				event.preventDefault();
+				event.stopPropagation();
+				try {
+					await copyToClipboard(mermaidSyntax);
+				} catch (error) {
+					console.error('Failed to copy mermaid syntax:', error);
+				}
+				return;
+			}
+
+			if (previewBtn) {
+				event.preventDefault();
+				event.stopPropagation();
+				const svg = preElement.querySelector('svg');
+				if (!svg) return;
+				mermaidPreviewSvgHtml = svg.outerHTML;
+				svgPreviewLive = false;
+				mermaidPreviewOpen = true;
+				return;
+			}
+		}
+
+		// Check if clicking on copy or preview button in svg block
+		const svgCopyBtn = target.closest(`.${SVG_WRAPPER_CLASS} .copy-code-btn`);
+		const svgPreviewBtn = target.closest(`.${SVG_WRAPPER_CLASS} .preview-code-btn`);
+
+		if (svgCopyBtn || svgPreviewBtn) {
+			const wrapper = target.closest(`.${SVG_WRAPPER_CLASS}`);
+			if (!wrapper) return;
+
+			const preElement = wrapper.querySelector<HTMLElement>(
+				`pre.${SVG_BLOCK_CLASS}[${SVG_SOURCE_ATTR}]`
+			);
+			if (!preElement) return;
+
+			if (svgCopyBtn) {
+				event.preventDefault();
+				event.stopPropagation();
+				try {
+					await copyToClipboard(preElement.getAttribute(SVG_SOURCE_ATTR) ?? '');
+				} catch (error) {
+					console.error('Failed to copy svg source:', error);
+				}
+				return;
+			}
+
+			if (svgPreviewBtn) {
+				event.preventDefault();
+				event.stopPropagation();
+				mermaidPreviewSvgHtml = sanitizeSvg(preElement.getAttribute(SVG_SOURCE_ATTR) ?? '');
+				svgPreviewLive = false;
+				mermaidPreviewOpen = true;
+				return;
+			}
+		}
+
+		// A click on the header chrome targets the action buttons, never the
+		// diagram. Guard so a header click can not fall through to the click to
+		// zoom branches below, whatever the scroll position or stacking.
+		if (target.closest(`.${CODE_BLOCK_HEADER_CLASS}`)) return;
+
+		// Open preview when clicking the svg block itself. A final block carries its
+		// source, a streaming block does not and is mirrored live into the dialog.
+		const svgEl = target.closest(`.${SVG_BLOCK_CLASS}`);
+		if (svgEl) {
+			const source = svgEl.getAttribute(SVG_SOURCE_ATTR);
+			if (source !== null) {
+				mermaidPreviewSvgHtml = sanitizeSvg(source);
+				svgPreviewLive = false;
+			} else {
+				svgPreviewLive = true;
+			}
+			mermaidPreviewOpen = true;
+			return;
+		}
+
+		// Otherwise, open preview when clicking on the mermaid diagram itself
+		const mermaidEl = target.closest(`.${MERMAID_BLOCK_CLASS}`);
+		if (!mermaidEl) return;
+
+		const svg = mermaidEl.querySelector('svg');
+		if (!svg) return;
+
+		mermaidPreviewSvgHtml = svg.outerHTML;
+		svgPreviewLive = false;
+		mermaidPreviewOpen = true;
+	}
+
+	/**
+	 * Handles mermaid preview dialog open state changes.
+	 * Cleans up SVG content when dialog is closed.
+	 */
+	function handleMermaidPreviewOpenChange(open: boolean) {
+		mermaidPreviewOpen = open;
+		if (!open) {
+			mermaidPreviewSvgHtml = '';
+			svgPreviewLive = false;
+		}
+	}
+
+	/**
+	 * Renders mermaid diagrams that haven't been rendered yet.
+	 * Called after each markdown content update.
+	 * Marks nodes immediately to prevent duplicate renders during streaming.
+	 * Reads mode.current before await to ensure reactive tracking.
+	 */
+	async function renderMermaidDiagrams() {
+		if (!containerRef) return;
+
+		const nodes = containerRef.querySelectorAll(
+			`pre.${MERMAID_BLOCK_CLASS}:not([${MERMAID_RENDERED_ATTR}])`
+		);
+		if (nodes.length === 0) return;
+
+		// Mark nodes immediately to prevent duplicate renders if called again during streaming.
+		// This avoids needing a guard that would block node discovery.
+		nodes.forEach((node) => node.setAttribute(MERMAID_RENDERED_ATTR, 'true'));
+
+		// Read mode before await so Svelte tracks it reactively.
+		const isDark = mode.current === ColorMode.DARK;
+
+		// lazy load the mermaid dependecy only when needed to reduce bundle size.
+		const { default: mermaid } = await import('mermaid');
+
+		mermaid.initialize({
+			startOnLoad: false,
+			theme: isDark ? 'dark' : 'default',
+			securityLevel: 'strict',
+			flowchart: {
+				useMaxWidth: false,
+				htmlLabels: true
+			},
+			sequence: {
+				useMaxWidth: false
+			},
+			gantt: {
+				useMaxWidth: false
+			}
+		});
+
+		try {
+			await mermaid.run({
+				nodes: Array.from(nodes) as unknown as NodeListOf<HTMLElement>
+			});
+		} catch (error) {
+			console.error('Failed to render mermaid diagram:', error);
+		}
+	}
+
+	/**
+	 * Renders svg diagrams that haven't been rendered yet.
+	 * Sanitizes the source before injecting and marks each node so it renders once.
+	 * An empty sanitize result keeps the raw source as escaped text.
+	 */
+	function renderSvgDiagrams() {
+		if (!containerRef) return;
+
+		const nodes = containerRef.querySelectorAll<HTMLElement>(
+			`pre.${SVG_BLOCK_CLASS}:not([${SVG_RENDERED_ATTR}])`
+		);
+		if (nodes.length === 0) return;
+
+		nodes.forEach((node) => {
+			node.setAttribute(SVG_RENDERED_ATTR, 'true');
+
+			const source = node.getAttribute(SVG_SOURCE_ATTR) ?? node.textContent ?? '';
+			const clean = sanitizeSvg(source);
+
+			if (clean) {
+				node.textContent = '';
+				const host = document.createElement('div');
+				node.appendChild(host);
+				mountSvgShadow(host, clean, SVG_INLINE_SHADOW_STYLE);
+			}
+		});
+	}
+
+	/**
+	 * Handles image load errors by replacing the image with a fallback UI.
+	 * Shows a placeholder with a link to open the image in a new tab.
+	 */
+	function handleImageError(event: Event) {
+		const img = event.target as HTMLImageElement;
+		if (!img || !img.src) return;
+
+		// Don't handle data URLs or already-handled images
+		if (
+			img.src.startsWith(UrlProtocol.DATA) ||
+			img.dataset[DATA_ERROR_HANDLED_ATTR] === BOOL_TRUE_STRING
+		)
+			return;
+		img.dataset[DATA_ERROR_HANDLED_ATTR] = BOOL_TRUE_STRING;
+
+		const src = img.src;
+		// Create fallback element
+		const fallback = document.createElement('div');
+		fallback.className = 'image-load-error';
+		fallback.innerHTML = getImageErrorFallbackHtml(src);
+
+		// Replace image with fallback
+		img.parentNode?.replaceChild(fallback, img);
+	}
+
+	/**
+	 * Queues markdown for processing with coalescing support.
+	 * Only processes the latest markdown when multiple updates arrive quickly.
+	 * Uses requestAnimationFrame to yield to browser paint between batches.
+	 * @param markdown - The markdown content to render
+	 */
+	async function updateRenderedBlocks(markdown: string) {
+		pendingMarkdown = markdown;
+
+		if (isProcessing) {
+			return;
+		}
+
+		isProcessing = true;
+
+		try {
+			while (pendingMarkdown !== null) {
+				const nextMarkdown = pendingMarkdown;
+				pendingMarkdown = null;
+
+				await processMarkdown(nextMarkdown);
+
+				// Yield to browser for paint. During this, new chunks coalesce
+				// into pendingMarkdown, so we always render the latest state.
+				if (pendingMarkdown !== null) {
+					await new Promise((resolve) => requestAnimationFrame(resolve));
+				}
+			}
+		} catch (error) {
+			console.error('Failed to process markdown:', error);
+			renderedBlocks = [];
+			unstableBlockHtml = markdown.replace(/\n/g, '<br>');
+		} finally {
+			isProcessing = false;
+		}
+	}
+
+	$effect(() => {
+		const currentMode = mode.current;
+		const isDark = currentMode === ColorMode.DARK;
+
+		loadHighlightTheme(isDark);
+	});
+
+	$effect(() => {
+		updateRenderedBlocks(content);
+	});
+
+	$effect(() => {
+		const hasRenderedBlocks = renderedBlocks.length > 0;
+		const hasUnstableBlock = Boolean(unstableBlockHtml);
+
+		if ((hasRenderedBlocks || hasUnstableBlock) && containerRef) {
+			setupCodeBlockActions();
+			setupImageErrorHandlers();
+			renderMermaidDiagrams();
+			renderSvgDiagrams();
+		}
+	});
+
+	// Auto-scroll for streaming code block
+	$effect(() => {
+		streamingAutoScroll.setContainer(streamingCodeScrollContainer);
+	});
+
+	$effect(() => {
+		streamingAutoScroll.updateInterval(incompleteCodeBlock !== null);
+	});
+
+	onDestroy(() => {
+		cleanupEventListeners();
+		cleanupHighlightTheme();
+		streamingAutoScroll.destroy();
+	});
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	bind:this={containerRef}
+	onclick={handleMermaidClick}
+	class="markdown-content {className}{config()[SETTINGS_KEYS.FULL_HEIGHT_CODE_BLOCKS]
+		? ' full-height-code-blocks'
+		: ''}"
+>
+	{#each renderedBlocks as block (block.id)}
+		<div class="markdown-block" data-block-id={block.id} use:fadeInView={{ skipIfVisible: true }}>
+			{@html block.html}
+		</div>
+	{/each}
+
+	{#if unstableBlockHtml}
+		<div class="markdown-block markdown-block--unstable" data-block-id="unstable">
+			<!-- eslint-disable-next-line no-at-html-tags -->
+			{@html unstableBlockHtml}
+		</div>
+	{/if}
+
+	{#if incompleteCodeBlock}
+		{#if incompleteCodeBlock.language === MERMAID_LANGUAGE}
+			<div class="mermaid-block-wrapper streaming-mermaid-block">
+				<div class="code-block-header">
+					<span class="code-language">mermaid</span>
+					<div class="code-block-actions">
+						<ActionIconCopyToClipboard
+							text={incompleteCodeBlock.code}
+							canCopy={false}
+							ariaLabel="Diagram incomplete"
+						/>
+					</div>
+				</div>
+				<div class="mermaid-loading-placeholder">
+					<span class="mermaid-loading-text">Generating diagram...</span>
+				</div>
+			</div>
+		{:else if streamingSvgCode !== null}
+			<div class="svg-block-wrapper streaming-svg-block">
+				<div class="code-block-header">
+					<span class="code-language">svg</span>
+					<div class="code-block-actions">
+						<ActionIconCopyToClipboard
+							text={incompleteCodeBlock.code}
+							canCopy={false}
+							ariaLabel="Diagram incomplete"
+						/>
+					</div>
+				</div>
+				{#if liveSvgHtml}
+					<div class="svg-scroll-container">
+						<div class={SVG_BLOCK_CLASS}>
+							<div bind:this={streamingSvgHost}></div>
+						</div>
+					</div>
+				{:else}
+					<div class="mermaid-loading-placeholder">
+						<span class="mermaid-loading-text">Rendering svg...</span>
+					</div>
+				{/if}
+			</div>
+		{:else}
+			<div class="code-block-wrapper streaming-code-block relative">
+				<div class="code-block-header">
+					<span class="code-language">{incompleteCodeBlock.language || 'text'}</span>
+					<CodeBlockActions
+						code={incompleteCodeBlock.code}
+						language={incompleteCodeBlock.language || 'text'}
+						disabled
+						onPreview={(code, lang) => {
+							previewCode = code;
+							previewLanguage = lang;
+							previewDialogOpen = true;
+						}}
+					/>
+				</div>
+
+				<div
+					bind:this={streamingCodeScrollContainer}
+					class="streaming-code-scroll-container"
+					onscroll={() => streamingAutoScroll.handleScroll()}
+				>
+					<pre class="streaming-code-pre"><code
+							class="hljs language-{incompleteCodeBlock.language || 'text'}"
+							>{@html highlightCode(
+								incompleteCodeBlock.code,
+								incompleteCodeBlock.language || 'text'
+							)}</code
+						></pre>
+				</div>
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<DialogCodePreview
+	open={previewDialogOpen}
+	code={previewCode}
+	language={previewLanguage}
+	onOpenChange={handlePreviewDialogOpenChange}
+/>
+
+<DialogMermaidPreview
+	open={mermaidPreviewOpen}
+	svgHtml={mermaidPreviewSvgHtml}
+	onOpenChange={handleMermaidPreviewOpenChange}
+/>
+
+<style>
+	@import './markdown-content.css';
+</style>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/markdown-content.css b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/markdown-content.css
new file mode 100644
index 0000000000000000000000000000000000000000..b0e04ca6209a2af72f279588823677479d39a54b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/markdown-content.css
@@ -0,0 +1,741 @@
+.markdown-block--unstable {
+	display: contents;
+}
+
+/* Streaming code block uses .code-block-wrapper styles */
+.streaming-code-block .streaming-code-pre {
+	background: transparent;
+	padding: 0.5rem;
+	margin: 0;
+	overflow-x: visible;
+	border-radius: 0;
+	border: none;
+	font-size: 0.875rem;
+}
+
+/* Base typography styles */
+.markdown-content :global(p) {
+	margin-block: 1rem;
+	line-height: 1.75;
+}
+
+.markdown-content :global(:is(h1, h2, h3, h4, h5, h6):first-child) {
+	margin-top: 0;
+}
+
+/* Headers with consistent spacing */
+.markdown-content :global(h1) {
+	font-size: 1.875rem;
+	font-weight: 700;
+	line-height: 1.2;
+	margin: 1.5rem 0 0.75rem 0;
+}
+
+.markdown-content :global(h2) {
+	font-size: 1.5rem;
+	font-weight: 600;
+	line-height: 1.3;
+	margin: 1.25rem 0 0.5rem 0;
+}
+
+.markdown-content :global(h3) {
+	font-size: 1.25rem;
+	font-weight: 600;
+	margin: 1.5rem 0 0.5rem 0;
+	line-height: 1.4;
+}
+
+.markdown-content :global(h4) {
+	font-size: 1.125rem;
+	font-weight: 600;
+	margin: 0.75rem 0 0.25rem 0;
+}
+
+.markdown-content :global(h5) {
+	font-size: 1rem;
+	font-weight: 600;
+	margin: 0.5rem 0 0.25rem 0;
+}
+
+.markdown-content :global(h6) {
+	font-size: 0.875rem;
+	font-weight: 600;
+	margin: 0.5rem 0 0.25rem 0;
+}
+
+/* Text formatting */
+.markdown-content :global(strong) {
+	font-weight: 600;
+}
+
+.markdown-content :global(em) {
+	font-style: italic;
+}
+
+.markdown-content :global(del) {
+	text-decoration: line-through;
+	opacity: 0.7;
+}
+
+/* Inline code */
+.markdown-content :global(code:not(pre code)) {
+	background: var(--muted);
+	color: var(--muted-foreground);
+	padding: 0.125rem 0.375rem;
+	border-radius: 0.375rem;
+	font-size: 0.875rem;
+}
+
+.markdown-content :global(pre) {
+	display: inline;
+	margin: 0 !important;
+	overflow: hidden !important;
+	background: var(--muted);
+	overflow-x: auto;
+	border-radius: 1rem;
+	border: none;
+	line-height: 1 !important;
+}
+
+.markdown-content :global(pre code) {
+	padding: 0 !important;
+	display: inline !important;
+}
+
+.markdown-content :global(code) {
+	background: transparent;
+	color: var(--code-foreground);
+}
+
+/* Links */
+.markdown-content :global(a) {
+	color: var(--primary);
+	text-decoration: underline;
+	text-underline-offset: 2px;
+	transition: color 0.2s ease;
+	overflow-wrap: anywhere;
+	word-break: break-all;
+}
+
+.markdown-content :global(a:hover) {
+	color: var(--primary);
+}
+
+/* Lists */
+.markdown-content :global(ul) {
+	list-style-type: disc;
+	margin-inline-start: 1.5rem;
+	margin-bottom: 1rem;
+}
+
+.markdown-content :global(ol) {
+	list-style-type: decimal;
+	margin-inline-start: 1.5rem;
+	margin-bottom: 1rem;
+}
+
+.markdown-content :global(li) {
+	margin-bottom: 0.25rem;
+	padding-inline-start: 0.5rem;
+}
+
+.markdown-content :global(li::marker) {
+	color: var(--muted-foreground);
+}
+
+/* Nested lists */
+.markdown-content :global(ul ul) {
+	list-style-type: circle;
+	margin-top: 0.25rem;
+	margin-bottom: 0.25rem;
+}
+
+.markdown-content :global(ol ol) {
+	list-style-type: lower-alpha;
+	margin-top: 0.25rem;
+	margin-bottom: 0.25rem;
+}
+
+/* Task lists */
+.markdown-content :global(.task-list-item) {
+	list-style: none;
+	margin-inline-start: 0;
+	padding-inline-start: 0;
+}
+
+.markdown-content :global(.task-list-item-checkbox) {
+	margin-right: 0.5rem;
+	margin-top: 0.125rem;
+}
+
+/* Blockquotes */
+.markdown-content :global(blockquote) {
+	border-left: 4px solid var(--border);
+	padding: 0.5rem 1rem;
+	margin: 1.5rem 0;
+	font-style: italic;
+	color: var(--muted-foreground);
+	background: var(--muted);
+	border-radius: 0 0.375rem 0.375rem 0;
+}
+
+/* Tables */
+.markdown-content :global(table) {
+	width: 100%;
+	margin: 1.5rem 0;
+	border-collapse: collapse;
+	border: 1px solid var(--border);
+	border-radius: 0.375rem;
+	overflow: hidden;
+}
+
+.markdown-content :global(th) {
+	background: hsl(var(--muted) / 0.3);
+	border: 1px solid var(--border);
+	padding: 0.5rem 0.75rem;
+	text-align: left;
+	font-weight: 600;
+}
+
+.markdown-content :global(td) {
+	border: 1px solid var(--border);
+	padding: 0.5rem 0.75rem;
+}
+
+.markdown-content :global(tr:nth-child(even)) {
+	background: hsl(var(--muted) / 0.1);
+}
+
+/* User message markdown should keep table borders visible on light primary backgrounds */
+div.markdown-user-content :global(table),
+div.markdown-user-content :global(th),
+div.markdown-user-content :global(td),
+div.markdown-user-content :global(.table-wrapper) {
+	border-color: currentColor;
+}
+
+/* Horizontal rules */
+.markdown-content :global(hr) {
+	border: none;
+	border-top: 1px solid var(--border);
+	margin: 1.5rem 0;
+}
+
+/* Images */
+.markdown-content :global(img) {
+	border-radius: 0.5rem;
+	box-shadow:
+		0 1px 3px 0 rgb(0 0 0 / 0.1),
+		0 1px 2px -1px rgb(0 0 0 / 0.1);
+	margin: 1.5rem 0;
+	max-width: 100%;
+	height: auto;
+}
+
+/* Code blocks */
+
+.markdown-content :global(.code-block-wrapper) {
+	margin: 1.5rem 0;
+	border-radius: 0.75rem;
+	overflow: hidden;
+	border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
+	background: var(--code-background);
+	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	min-height: var(--min-message-height);
+	max-height: var(--max-message-height);
+}
+
+.markdown-content:global(.dark) :global(.code-block-wrapper) {
+	border-color: color-mix(in oklch, var(--border) 20%, transparent);
+}
+
+/* Scroll container for code blocks (both streaming and completed) */
+.markdown-content :global(.code-block-scroll-container),
+.streaming-code-scroll-container {
+	min-height: var(--min-message-height);
+	max-height: var(--max-message-height);
+	overflow-y: auto;
+	overflow-x: auto;
+	padding: 3rem 1rem 1rem;
+	line-height: 1.3;
+}
+
+.full-height-code-blocks :global(.code-block-wrapper) {
+	max-height: none;
+}
+
+.full-height-code-blocks :global(.code-block-scroll-container),
+.full-height-code-blocks .streaming-code-scroll-container {
+	max-height: none;
+	overflow-y: visible;
+}
+
+.markdown-content :global(.code-block-header) {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0.5rem 1rem 0;
+	font-size: 0.875rem;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+}
+
+.markdown-content :global(.code-language) {
+	color: var(--color-foreground);
+	font-weight: 500;
+	font-family:
+		ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
+		'Liberation Mono', Menlo, monospace;
+	text-transform: uppercase;
+	font-size: 0.75rem;
+	letter-spacing: 0.05em;
+}
+
+.markdown-content :global(.code-block-actions) {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.markdown-content :global(.copy-code-btn),
+.markdown-content :global(.preview-code-btn),
+.markdown-content :global(.toggle-source-btn) {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0;
+	background: transparent;
+	color: var(--code-foreground);
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.markdown-content :global(.copy-code-btn:hover),
+.markdown-content :global(.preview-code-btn:hover),
+.markdown-content :global(.toggle-source-btn:hover) {
+	transform: scale(1.05);
+}
+
+.markdown-content :global(.copy-code-btn:active),
+.markdown-content :global(.preview-code-btn:active),
+.markdown-content :global(.toggle-source-btn:active) {
+	transform: scale(0.95);
+}
+
+/* Pressed state marks the source view as active */
+.markdown-content :global(.toggle-source-btn[aria-pressed='true']) {
+	color: var(--primary);
+}
+
+.markdown-content :global(.code-block-wrapper pre) {
+	background: transparent;
+	margin: 0;
+	border-radius: 0;
+	border: none;
+	font-size: 0.875rem;
+}
+
+/* Mentions and hashtags */
+.markdown-content :global(.mention) {
+	color: hsl(var(--primary));
+	font-weight: 500;
+	text-decoration: none;
+}
+
+.markdown-content :global(.mention:hover) {
+	text-decoration: underline;
+}
+
+.markdown-content :global(.hashtag) {
+	color: hsl(var(--primary));
+	font-weight: 500;
+	text-decoration: none;
+}
+
+.markdown-content :global(.hashtag:hover) {
+	text-decoration: underline;
+}
+
+/* Advanced table enhancements */
+.markdown-content :global(table) {
+	transition: all 0.2s ease;
+}
+
+.markdown-content :global(table:hover) {
+	box-shadow:
+		0 4px 6px -1px rgb(0 0 0 / 0.1),
+		0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+.markdown-content :global(th:hover),
+.markdown-content :global(td:hover) {
+	background: var(--muted);
+}
+
+/* Disable hover effects when rendering user messages */
+.markdown-user-content :global(a),
+.markdown-user-content :global(a:hover) {
+	color: inherit;
+}
+
+.markdown-user-content :global(table:hover) {
+	box-shadow: none;
+}
+
+.markdown-user-content :global(th:hover),
+.markdown-user-content :global(td:hover) {
+	background: inherit;
+}
+
+/* Enhanced blockquotes */
+.markdown-content :global(blockquote) {
+	transition: all 0.2s ease;
+	position: relative;
+}
+
+.markdown-content :global(blockquote:hover) {
+	border-left-width: 6px;
+	background: var(--muted);
+	transform: translateX(2px);
+}
+
+.markdown-content :global(blockquote::before) {
+	content: '"';
+	position: absolute;
+	top: -0.5rem;
+	left: 0.5rem;
+	font-size: 3rem;
+	color: var(--muted-foreground);
+	font-family: serif;
+	line-height: 1;
+}
+
+/* Enhanced images */
+.markdown-content :global(img) {
+	transition: all 0.3s ease;
+	cursor: pointer;
+}
+
+.markdown-content :global(img:hover) {
+	transform: scale(1.02);
+	box-shadow:
+		0 10px 15px -3px rgb(0 0 0 / 0.1),
+		0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+/* Image zoom overlay */
+.markdown-content :global(.image-zoom-overlay) {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.8);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 1000;
+	cursor: pointer;
+}
+
+.markdown-content :global(.image-zoom-overlay img) {
+	max-width: 90vw;
+	max-height: 90vh;
+	border-radius: 0.5rem;
+	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+}
+
+/* Enhanced horizontal rules */
+.markdown-content :global(hr) {
+	border: none;
+	height: 2px;
+	background: linear-gradient(to right, transparent, var(--border), transparent);
+	margin: 2rem 0;
+	position: relative;
+}
+
+.markdown-content :global(hr::after) {
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 1rem;
+	height: 1rem;
+	background: var(--border);
+	border-radius: 50%;
+}
+
+/* Scrollable tables */
+.markdown-content :global(.table-wrapper) {
+	overflow-x: auto;
+	margin: 1.5rem 0;
+	border-radius: 0.5rem;
+	border: 1px solid var(--border);
+}
+
+.markdown-content :global(.table-wrapper table) {
+	margin: 0;
+	border: none;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+	.markdown-content :global(h1) {
+		font-size: 1.5rem;
+	}
+
+	.markdown-content :global(h2) {
+		font-size: 1.25rem;
+	}
+
+	.markdown-content :global(h3) {
+		font-size: 1.125rem;
+	}
+
+	.markdown-content :global(table) {
+		font-size: 0.875rem;
+	}
+
+	.markdown-content :global(th),
+	.markdown-content :global(td) {
+		padding: 0.375rem 0.5rem;
+	}
+
+	.markdown-content :global(.table-wrapper) {
+		margin: 0.5rem -1rem;
+		border-radius: 0;
+		border-left: none;
+		border-right: none;
+	}
+}
+
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+	.markdown-content :global(blockquote:hover) {
+		background: var(--muted);
+	}
+}
+
+/* Image load error fallback */
+.markdown-content :global(.image-load-error) {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin: 1.5rem 0;
+	padding: 1.5rem;
+	border-radius: 0.5rem;
+	background: var(--muted);
+	border: 1px dashed var(--border);
+}
+
+.markdown-content :global(.image-error-content) {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 0.75rem;
+	color: var(--muted-foreground);
+	text-align: center;
+}
+
+.markdown-content :global(.image-error-content svg) {
+	opacity: 0.5;
+}
+
+.markdown-content :global(.image-error-text) {
+	font-size: 0.875rem;
+}
+
+.markdown-content :global(.image-error-link) {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.375rem;
+	padding: 0.5rem 1rem;
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: var(--primary);
+	background: var(--background);
+	border: 1px solid var(--border);
+	border-radius: 0.375rem;
+	text-decoration: none;
+	transition: all 0.2s ease;
+}
+
+.markdown-content :global(.image-error-link:hover) {
+	background: var(--muted);
+	border-color: var(--primary);
+}
+
+/* Mermaid and svg blocks share the same block styling */
+.markdown-content :global(pre.mermaid),
+.markdown-content :global(.svg-block) {
+	background: transparent;
+	border: none;
+	padding: 0;
+	text-align: center;
+	font-family: inherit;
+	cursor: pointer;
+	transition: opacity 0.15s ease;
+	position: relative;
+}
+
+/* The svg block fills its flex container so the shadow host has a definite width to render into */
+.markdown-content :global(.svg-block) {
+	width: 100%;
+}
+
+/* Hide mermaid code text until rendered - prevents flash */
+.markdown-content :global(pre.mermaid:not([data-mermaid-rendered])),
+.markdown-content :global(pre.mermaid[data-mermaid-rendered]:not(:has(svg))) {
+	display: none;
+}
+
+/* Hide svg source until rendered - prevents flash. A rendered-but-unsanitized
+   block (oversized source) keeps its raw text visible as a safe fallback. */
+.markdown-content :global(pre.svg-block:not([data-svg-rendered])) {
+	display: none;
+}
+
+.markdown-content :global(pre.mermaid:hover),
+.markdown-content :global(.svg-block:hover) {
+	opacity: 0.85;
+}
+
+.markdown-content :global(pre.mermaid svg) {
+	max-width: 90%;
+	margin: 0 auto;
+	height: auto;
+	display: block;
+	padding: 3rem 1rem;
+}
+
+/* Diagram block wrapper - matches code block styling */
+.markdown-content :global(.mermaid-block-wrapper),
+.markdown-content :global(.svg-block-wrapper) {
+	margin: 1.5rem 0;
+	border-radius: 0.75rem;
+	overflow: hidden;
+	border: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
+	background: var(--code-background);
+	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	position: relative;
+	min-height: var(--min-message-height);
+	max-height: var(--max-message-height);
+}
+
+.markdown-content:global(.dark) :global(.mermaid-block-wrapper),
+.markdown-content:global(.dark) :global(.svg-block-wrapper) {
+	border-color: color-mix(in oklch, var(--border) 20%, transparent);
+}
+
+.markdown-content :global(.mermaid-scroll-container),
+.markdown-content :global(.svg-scroll-container) {
+	min-height: 350px;
+	max-height: var(--max-message-height);
+	overflow-y: auto;
+	overflow-x: auto;
+	display: flex;
+	align-items: safe center;
+	justify-content: safe center;
+	padding: 3rem 1rem 1rem;
+}
+
+.full-height-code-blocks :global(.mermaid-block-wrapper),
+.full-height-code-blocks :global(.svg-block-wrapper) {
+	max-height: none;
+}
+
+.full-height-code-blocks :global(.mermaid-scroll-container),
+.full-height-code-blocks :global(.svg-scroll-container) {
+	max-height: none;
+	overflow-y: visible;
+}
+
+/* Diagram block uses same header styling as code blocks. The header floats over
+   scrollable diagram content and stays transparent, so the overflow shows up to
+   the box edge. It keeps a z-index so it stays the click target above content. */
+.markdown-content :global(.mermaid-block-wrapper .code-block-header),
+.markdown-content :global(.svg-block-wrapper .code-block-header) {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0.5rem 1rem 0;
+	font-size: 0.875rem;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 2;
+}
+
+.markdown-content :global(.mermaid-block-wrapper .code-block-actions),
+.markdown-content :global(.svg-block-wrapper .code-block-actions) {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+/* Diagram pre element - remove default margins */
+.markdown-content :global(.mermaid-block-wrapper pre.mermaid),
+.markdown-content :global(.svg-block-wrapper pre.svg-block) {
+	background: transparent;
+	border: none;
+	padding: 0;
+	margin: 0;
+	text-align: center;
+}
+
+.markdown-content :global(.mermaid-block-wrapper pre.mermaid svg) {
+	width: unset !important;
+	height: auto;
+	display: block;
+	padding: 3rem 1rem;
+}
+
+/* Source view stays hidden while the block renders, css swaps the two views
+   from the wrapper mode so the click handler only flips one attribute. The view
+   reuses the code block scroll container, so it matches the app code blocks. */
+.markdown-content :global(.diagram-source) {
+	display: none;
+	text-align: left;
+}
+
+.markdown-content :global(.diagram-source pre) {
+	background: transparent;
+	margin: 0;
+	border-radius: 0;
+	border: none;
+	font-size: 0.875rem;
+}
+
+.markdown-content :global([data-view-mode='source'] .mermaid-scroll-container),
+.markdown-content :global([data-view-mode='source'] .svg-scroll-container) {
+	display: none;
+}
+
+.markdown-content :global([data-view-mode='source'] .diagram-source) {
+	display: block;
+}
+
+/* Streaming mermaid block - empty preview box */
+.mermaid-streaming-block {
+	min-height: 300px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.mermaid-loading-placeholder {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 3rem;
+	color: var(--muted-foreground);
+}
+
+.mermaid-loading-text {
+	font-size: 0.875rem;
+	font-style: italic;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/markdown-handlers.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/markdown-handlers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..80052945f0c5c74c2f99e6d6df84d31f34780406
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/markdown-handlers.ts
@@ -0,0 +1,267 @@
+/**
+ * Event handler factories for markdown content components.
+ * Uses dependency injection pattern to avoid direct component state access.
+ */
+
+import { copyCodeToClipboard, copyToClipboard } from '$lib/utils';
+import { MERMAID_WRAPPER_CLASS, MERMAID_BLOCK_CLASS, MERMAID_SYNTAX_ATTR } from '$lib/constants';
+
+export interface PreviewState {
+	previewDialogOpen: boolean;
+	previewCode: string;
+	previewLanguage: string;
+	setPreviewDialogOpen: (open: boolean) => void;
+	setPreviewCode: (code: string) => void;
+	setPreviewLanguage: (lang: string) => void;
+}
+
+export interface MermaidPreviewState {
+	mermaidPreviewOpen: boolean;
+	mermaidPreviewSvgHtml: string;
+	setMermaidPreviewOpen: (open: boolean) => void;
+	setMermaidPreviewSvgHtml: (html: string) => void;
+}
+
+export interface RenderedBlocksState {
+	renderedBlocks: Array<{ id: string; html: string; contentHash?: string }>;
+	setRenderedBlocks: (blocks: Array<{ id: string; html: string; contentHash?: string }>) => void;
+}
+
+/**
+ * Creates a click handler for copy buttons in code blocks.
+ * Copies the code content to clipboard.
+ */
+export function createHandleCopyClick() {
+	return async function handleCopyClick(event: Event) {
+		event.preventDefault();
+		event.stopPropagation();
+
+		const target = event.currentTarget as HTMLButtonElement | null;
+		if (!target) return;
+
+		const wrapper = target.closest('.code-block-wrapper');
+		if (!wrapper) return;
+
+		const codeElement = wrapper.querySelector<HTMLElement>('code[data-code-id]');
+		if (!codeElement) return;
+
+		const rawCode = codeElement.textContent ?? '';
+
+		try {
+			await copyCodeToClipboard(rawCode);
+		} catch (error) {
+			console.error('Failed to copy code:', error);
+		}
+	};
+}
+
+/**
+ * Creates a handler for preview dialog open state changes.
+ * Clears preview content when dialog is closed.
+ */
+export function createHandlePreviewDialogOpenChange(previewState: PreviewState) {
+	return function handlePreviewDialogOpenChange(open: boolean) {
+		previewState.setPreviewDialogOpen(open);
+
+		if (!open) {
+			previewState.setPreviewCode('');
+			previewState.setPreviewLanguage('text');
+		}
+	};
+}
+
+/**
+ * Creates a click handler for preview buttons within HTML code blocks.
+ * Opens a preview dialog with the rendered HTML content.
+ */
+export function createHandlePreviewClick(previewState: PreviewState) {
+	return async function handlePreviewClick(event: Event) {
+		event.preventDefault();
+		event.stopPropagation();
+
+		const target = event.currentTarget as HTMLButtonElement | null;
+		if (!target) return;
+
+		const wrapper = target.closest('.code-block-wrapper');
+		if (!wrapper) return;
+
+		const codeElement = wrapper.querySelector<HTMLElement>('code[data-code-id]');
+		if (!codeElement) return;
+
+		const rawCode = codeElement.textContent ?? '';
+		const languageLabel = wrapper.querySelector<HTMLElement>('.code-language');
+		const language = languageLabel?.textContent?.trim() || 'text';
+
+		previewState.setPreviewCode(rawCode);
+		previewState.setPreviewLanguage(language);
+		previewState.setPreviewDialogOpen(true);
+	};
+}
+
+/**
+ * Creates a click handler for mermaid block interactions.
+ * Handles copy, preview, and diagram click events via event delegation.
+ */
+export function createHandleMermaidClick(mermaidState: MermaidPreviewState) {
+	return async function handleMermaidClick(event: MouseEvent) {
+		const target = event.target as HTMLElement;
+
+		// Check if clicking on copy or preview button in mermaid block
+		const copyBtn = target.closest(`.${MERMAID_WRAPPER_CLASS} .copy-code-btn`);
+		const previewBtn = target.closest(`.${MERMAID_WRAPPER_CLASS} .preview-code-btn`);
+
+		if (copyBtn || previewBtn) {
+			const wrapper = target.closest(`.${MERMAID_WRAPPER_CLASS}`);
+			if (!wrapper) return;
+
+			const preElement = wrapper.querySelector<HTMLElement>(
+				`pre.${MERMAID_BLOCK_CLASS}[${MERMAID_SYNTAX_ATTR}]`
+			);
+			if (!preElement) return;
+
+			const mermaidSyntax = preElement.getAttribute(MERMAID_SYNTAX_ATTR) ?? '';
+
+			if (copyBtn) {
+				event.preventDefault();
+				event.stopPropagation();
+				try {
+					await copyToClipboard(mermaidSyntax);
+				} catch (error) {
+					console.error('Failed to copy mermaid syntax:', error);
+				}
+				return;
+			}
+
+			if (previewBtn) {
+				event.preventDefault();
+				event.stopPropagation();
+				const svg = preElement.querySelector('svg');
+				if (!svg) return;
+				mermaidState.setMermaidPreviewSvgHtml(svg.outerHTML);
+				mermaidState.setMermaidPreviewOpen(true);
+				return;
+			}
+		}
+
+		// Otherwise, open preview when clicking on the mermaid diagram itself
+		const mermaidEl = target.closest(`.${MERMAID_BLOCK_CLASS}`);
+		if (!mermaidEl) return;
+
+		const svg = mermaidEl.querySelector('svg');
+		if (!svg) return;
+
+		mermaidState.setMermaidPreviewSvgHtml(svg.outerHTML);
+		mermaidState.setMermaidPreviewOpen(true);
+	};
+}
+
+/**
+ * Creates a handler for mermaid preview dialog open state changes.
+ * Cleans up SVG content when dialog is closed.
+ */
+export function createHandleMermaidPreviewOpenChange(mermaidState: MermaidPreviewState) {
+	return function handleMermaidPreviewOpenChange(open: boolean) {
+		mermaidState.setMermaidPreviewOpen(open);
+		if (!open) {
+			mermaidState.setMermaidPreviewSvgHtml('');
+		}
+	};
+}
+
+/**
+ * Creates an error handler for images that fail to load (e.g., CORS issues).
+ * Shows fallback UI for broken images.
+ */
+export function createHandleImageError(
+	renderedBlocksState: RenderedBlocksState,
+	IMAGE_NOT_ERROR_BOUND_SELECTOR: string,
+	DATA_ERROR_BOUND_ATTR: string,
+	BOOL_TRUE_STRING: string
+) {
+	return async function handleImageError(event: Event) {
+		const img = event.target as HTMLImageElement;
+		if (!img) return;
+
+		const blockId = img.closest('[data-block-id]')?.getAttribute('data-block-id');
+		if (!blockId) return;
+
+		const block = renderedBlocksState.renderedBlocks.find((b) => b.id === blockId);
+		if (!block) return;
+
+		// Skip if already handled
+		if (img.dataset[DATA_ERROR_BOUND_ATTR] === BOOL_TRUE_STRING) return;
+		img.dataset[DATA_ERROR_BOUND_ATTR] = BOOL_TRUE_STRING;
+
+		// Get the fallback HTML and replace the image
+		const fallbackHtml = `<div class="image-error-placeholder" data-original-src="${img.src}">
+			<span class="image-error-icon">⚠️</span>
+			<span class="image-error-text">Failed to load image</span>
+		</div>`;
+
+		// Replace the img element with fallback in the block's HTML
+		const newHtml = block.html.replace(/img[^>]*src=["']([^"']*)[^>]*>/g, (match, src) => {
+			if (src === img.src) {
+				return fallbackHtml.replace('data-original-src=""', `data-original-src="${src}"`);
+			}
+			return match;
+		});
+
+		// Update the block
+		const newBlocks = renderedBlocksState.renderedBlocks.map((b) =>
+			b.id === blockId ? { ...b, html: newHtml } : b
+		);
+		renderedBlocksState.setRenderedBlocks(newBlocks);
+	};
+}
+
+/**
+ * Creates a function to set up code block action event listeners.
+ * Binds click handlers to copy and preview buttons within code blocks.
+ */
+export function createSetupCodeBlockActions(
+	handleCopyClick: (event: Event) => void,
+	handlePreviewClick: (event: Event) => void
+) {
+	return function setupCodeBlockActions(containerRef: HTMLElement | null) {
+		if (!containerRef) return;
+
+		const wrappers = containerRef.querySelectorAll<HTMLElement>('.code-block-wrapper');
+
+		for (const wrapper of wrappers) {
+			const copyButton = wrapper.querySelector<HTMLButtonElement>('.copy-code-btn');
+			const previewButton = wrapper.querySelector<HTMLButtonElement>('.preview-code-btn');
+
+			if (copyButton && copyButton.dataset.listenerBound !== 'true') {
+				copyButton.dataset.listenerBound = 'true';
+				copyButton.addEventListener('click', handleCopyClick);
+			}
+
+			if (previewButton && previewButton.dataset.listenerBound !== 'true') {
+				previewButton.dataset.listenerBound = 'true';
+				previewButton.addEventListener('click', handlePreviewClick);
+			}
+		}
+	};
+}
+
+/**
+ * Creates a function to set up image error handlers.
+ * Attaches error handlers to images to show fallback UI when loading fails.
+ */
+export function createSetupImageErrorHandlers(
+	handleImageError: (event: Event) => void,
+	IMAGE_NOT_ERROR_BOUND_SELECTOR: string,
+	DATA_ERROR_BOUND_ATTR: string,
+	BOOL_TRUE_STRING: string
+) {
+	return function setupImageErrorHandlers(containerRef: HTMLElement | null) {
+		if (!containerRef) return;
+
+		const images = containerRef.querySelectorAll<HTMLImageElement>(IMAGE_NOT_ERROR_BOUND_SELECTOR);
+
+		for (const img of images) {
+			img.dataset[DATA_ERROR_BOUND_ATTR] = BOOL_TRUE_STRING;
+			img.addEventListener('error', handleImageError);
+		}
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/markdown-utils.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/markdown-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dfb56d53caca7249d25409923087b054b644e702
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/markdown-utils.ts
@@ -0,0 +1,84 @@
+/**
+ * Utility functions for markdown processing in MarkdownContent component.
+ */
+
+import type { RootContent as HastRootContent } from 'hast';
+
+/**
+ * Generates a unique identifier for a HAST node based on its position.
+ * Used for stable block identification during incremental rendering.
+ * @param node - The HAST root content node
+ * @param indexFallback - Fallback index if position is unavailable
+ * @returns Unique string identifier for the node
+ */
+export function getHastNodeId(node: HastRootContent, indexFallback: number): string {
+	const position = node.position;
+
+	if (position?.start?.offset != null && position?.end?.offset != null) {
+		return `hast-${position.start.offset}-${position.end.offset}`;
+	}
+
+	return `${node.type}-${indexFallback}`;
+}
+
+/**
+ * Generates a hash for MDAST node based on its position.
+ * Used for cache lookup during incremental rendering.
+ */
+export function getMdastNodeHash(node: unknown, index: number): string {
+	const n = node as {
+		type?: string;
+		position?: { start?: { offset?: number }; end?: { offset?: number } };
+	};
+
+	if (n.position?.start?.offset != null && n.position?.end?.offset != null) {
+		return `${n.type}-${n.position.start.offset}-${n.position.end.offset}`;
+	}
+
+	return `${n.type}-idx${index}`;
+}
+
+/**
+ * Determines if the new content is an append (new content added to existing blocks).
+ * This is used to optimize cache reuse during streaming updates.
+ *
+ * @param newContent - The new markdown content
+ * @param previousContent - The previous markdown content to check against
+ * @returns true if the content appears to be an append operation
+ */
+export function isAppendMode(newContent: string, previousContent: string): boolean {
+	return previousContent.length > 0 && newContent.startsWith(previousContent);
+}
+
+export interface CodeInfo {
+	rawCode: string;
+	language: string;
+}
+
+/**
+ * Extracts code information from a button click target within a code block.
+ * @param target - The clicked button element
+ * @returns Object with rawCode and language, or null if extraction fails
+ */
+export function getCodeInfoFromTarget(target: HTMLElement): CodeInfo | null {
+	const wrapper = target.closest('.code-block-wrapper');
+
+	if (!wrapper) {
+		console.error('No wrapper found');
+		return null;
+	}
+
+	const codeElement = wrapper.querySelector<HTMLElement>('code[data-code-id]');
+
+	if (!codeElement) {
+		console.error('No code element found in wrapper');
+		return null;
+	}
+
+	const rawCode = codeElement.textContent ?? '';
+
+	const languageLabel = wrapper.querySelector<HTMLElement>('.code-language');
+	const language = languageLabel?.textContent?.trim() || 'text';
+
+	return { rawCode, language };
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/code-block-utils.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/code-block-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f1dd867e817bd882527e7863f1488f62c673a66a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/code-block-utils.ts
@@ -0,0 +1,207 @@
+/**
+ * Shared utilities for enhanced code blocks and mermaid diagram blocks.
+ * Contains common HAST element creation functions to avoid code duplication.
+ */
+
+import type { Element, ElementContent } from 'hast';
+import {
+	CODE_BLOCK_HEADER_CLASS,
+	CODE_BLOCK_ACTIONS_CLASS,
+	CODE_BLOCK_SCROLL_CONTAINER_CLASS,
+	CODE_LANGUAGE_CLASS,
+	COPY_CODE_BTN_CLASS,
+	PREVIEW_CODE_BTN_CLASS,
+	TOGGLE_SOURCE_BTN_CLASS,
+	DIAGRAM_SOURCE_CLASS,
+	RELATIVE_CLASS,
+	COPY_ICON_SVG,
+	PREVIEW_ICON_SVG,
+	CODE_ICON_SVG
+} from '$lib/constants';
+
+export interface BlockIdGenerator {
+	(id: number): string;
+}
+
+/**
+ * Creates an icon element with the given SVG content.
+ */
+export function createIconElement(svg: string): Element {
+	return {
+		type: 'element',
+		tagName: 'span',
+		properties: {},
+		children: [{ type: 'raw', value: svg } as unknown as ElementContent]
+	};
+}
+
+/**
+ * Creates a button element with icon. Extra properties merge onto the button,
+ * which lets a stateful button carry attributes like aria-pressed.
+ */
+export function createButton(
+	className: string,
+	title: string,
+	iconSvg: string,
+	id: string,
+	idAttribute: string,
+	extraProperties: Record<string, string> = {}
+): Element {
+	return {
+		type: 'element',
+		tagName: 'button',
+		properties: {
+			className: [className],
+			[idAttribute]: id,
+			title,
+			type: 'button',
+			...extraProperties
+		},
+		children: [createIconElement(iconSvg)]
+	};
+}
+
+/**
+ * Creates a copy button element.
+ */
+export function createCopyButton(id: string, idAttribute: string, title: string = 'Copy'): Element {
+	return createButton(COPY_CODE_BTN_CLASS, title, COPY_ICON_SVG, id, idAttribute);
+}
+
+/**
+ * Creates a preview button element.
+ */
+export function createPreviewButton(
+	id: string,
+	idAttribute: string,
+	title: string = 'Preview'
+): Element {
+	return createButton(PREVIEW_CODE_BTN_CLASS, title, PREVIEW_ICON_SVG, id, idAttribute);
+}
+
+/**
+ * Creates a button that toggles a diagram block between its rendered view and
+ * its source view. aria-pressed starts false, the rendered view is the default.
+ */
+export function createToggleSourceButton(
+	id: string,
+	idAttribute: string,
+	title: string = 'Toggle source'
+): Element {
+	return createButton(TOGGLE_SOURCE_BTN_CLASS, title, CODE_ICON_SVG, id, idAttribute, {
+		'aria-pressed': 'false'
+	});
+}
+
+/**
+ * Creates a source view for a diagram block. It reuses the code block scroll
+ * container so it matches the app code blocks, and wraps the highlighted code
+ * element captured at transform time. A missing code element falls back to a
+ * plain code node built from the raw source.
+ */
+export function createSourceView(
+	codeElement: Element | undefined,
+	source: string,
+	language: string
+): Element {
+	const code: Element = codeElement ?? {
+		type: 'element',
+		tagName: 'code',
+		properties: { className: ['hljs', `language-${language}`] },
+		children: [{ type: 'text', value: source }]
+	};
+	return {
+		type: 'element',
+		tagName: 'div',
+		properties: { className: [DIAGRAM_SOURCE_CLASS, CODE_BLOCK_SCROLL_CONTAINER_CLASS] },
+		children: [
+			{
+				type: 'element',
+				tagName: 'pre',
+				properties: {},
+				children: [code]
+			}
+		]
+	};
+}
+
+/**
+ * Creates a block header with language label and action buttons.
+ */
+export function createBlockHeader(
+	language: string,
+	id: string,
+	idAttribute: string,
+	actions: Element[],
+	languageClassName: string = CODE_LANGUAGE_CLASS
+): Element {
+	return {
+		type: 'element',
+		tagName: 'div',
+		properties: { className: [CODE_BLOCK_HEADER_CLASS] },
+		children: [
+			{
+				type: 'element',
+				tagName: 'span',
+				properties: { className: [languageClassName] },
+				children: [{ type: 'text', value: language }]
+			},
+			{
+				type: 'element',
+				tagName: 'div',
+				properties: { className: [CODE_BLOCK_ACTIONS_CLASS] },
+				children: actions
+			}
+		]
+	};
+}
+
+/**
+ * Creates a scroll container element.
+ */
+export function createScrollContainer(preElement: Element, scrollContainerClass: string): Element {
+	return {
+		type: 'element',
+		tagName: 'div',
+		properties: { className: [scrollContainerClass] },
+		children: [preElement]
+	};
+}
+
+/**
+ * Creates a wrapper element with header and scroll container. Extra children
+ * append after the scroll container, which lets a block carry a source view
+ * alongside its rendered output.
+ */
+export function createWrapper(
+	header: Element,
+	preElement: Element,
+	wrapperClass: string,
+	scrollContainerClass: string,
+	additionalAttributes?: Record<string, string>,
+	extraChildren: Element[] = []
+): Element {
+	return {
+		type: 'element',
+		tagName: 'div',
+		properties: {
+			className: [wrapperClass, RELATIVE_CLASS],
+			...additionalAttributes
+		} as Element['properties'],
+		children: [header, createScrollContainer(preElement, scrollContainerClass), ...extraChildren]
+	};
+}
+
+/**
+ * Generates a unique block ID using a global counter.
+ */
+export function generateBlockId(prefix: string, windowKey: keyof Window): string {
+	if (typeof window !== 'undefined') {
+		const idx = window[windowKey] as number | undefined;
+		const next = (idx ?? 0) + 1;
+		(window as unknown as Record<string, number>)[windowKey] = next;
+		return `${prefix}-${next}`;
+	}
+	// Fallback for SSR - use timestamp + random
+	return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/enhance-code-blocks.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/enhance-code-blocks.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b72e806b6db80ff00e0105d93ab7328450b25e8c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/enhance-code-blocks.ts
@@ -0,0 +1,88 @@
+/**
+ * Rehype plugin to enhance code blocks with wrapper, header, and action buttons.
+ *
+ * Wraps <pre><code> elements with a container that includes:
+ * - Language label
+ * - Copy button
+ * - Preview button (for HTML code blocks)
+ *
+ * This operates directly on the HAST tree for better performance,
+ * avoiding the need to stringify and re-parse HTML.
+ */
+
+import type { Plugin } from 'unified';
+import type { Root, Element, ElementContent } from 'hast';
+import { visit } from 'unist-util-visit';
+import { CODE_BLOCK_SCROLL_CONTAINER_CLASS, CODE_BLOCK_WRAPPER_CLASS } from '$lib/constants';
+import {
+	createBlockHeader,
+	createCopyButton,
+	createPreviewButton,
+	createWrapper,
+	generateBlockId
+} from './code-block-utils';
+
+declare global {
+	interface Window {
+		idxCodeBlock?: number;
+	}
+}
+
+function extractLanguage(codeElement: Element): string {
+	const className = codeElement.properties?.className;
+	if (!Array.isArray(className)) return 'text';
+
+	for (const cls of className) {
+		if (typeof cls === 'string' && cls.startsWith('language-')) {
+			return cls.replace('language-', '');
+		}
+	}
+
+	return 'text';
+}
+
+/**
+ * Rehype plugin to enhance code blocks with wrapper, header, and action buttons.
+ * This plugin wraps <pre><code> elements with a container that includes:
+ * - Language label
+ * - Copy button
+ * - Preview button (for HTML code blocks)
+ */
+export const rehypeEnhanceCodeBlocks: Plugin<[], Root> = () => {
+	return (tree: Root) => {
+		visit(tree, 'element', (node: Element, index, parent) => {
+			if (node.tagName !== 'pre' || !parent || index === undefined) return;
+
+			const codeElement = node.children.find(
+				(child): child is Element => child.type === 'element' && child.tagName === 'code'
+			);
+
+			if (!codeElement) return;
+
+			const language = extractLanguage(codeElement);
+			const codeId = generateBlockId('code', 'idxCodeBlock');
+
+			codeElement.properties = {
+				...codeElement.properties,
+				'data-code-id': codeId
+			};
+
+			const actions: Element[] = [createCopyButton(codeId, 'data-code-id', 'Copy code')];
+
+			if (language.toLowerCase() === 'html') {
+				actions.push(createPreviewButton(codeId, 'data-code-id', 'Preview code'));
+			}
+
+			const header = createBlockHeader(language, codeId, 'data-code-id', actions);
+			const wrapper = createWrapper(
+				header,
+				node,
+				CODE_BLOCK_WRAPPER_CLASS,
+				CODE_BLOCK_SCROLL_CONTAINER_CLASS
+			);
+
+			// Replace pre with wrapper in parent
+			(parent.children as ElementContent[])[index] = wrapper;
+		});
+	};
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/enhance-links.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/enhance-links.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b5fbcbdaae73a2ccaa40b13f01cc7ae5992592b4
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/enhance-links.ts
@@ -0,0 +1,33 @@
+/**
+ * Rehype plugin to enhance links with security attributes.
+ *
+ * Adds target="_blank" and rel="noopener noreferrer" to all anchor elements,
+ * ensuring external links open in new tabs safely.
+ */
+
+import type { Plugin } from 'unified';
+import type { Root, Element } from 'hast';
+import { visit } from 'unist-util-visit';
+
+/**
+ * Rehype plugin that adds security attributes to all links.
+ * This plugin ensures external links open in new tabs safely by adding:
+ * - target="_blank"
+ * - rel="noopener noreferrer"
+ */
+export const rehypeEnhanceLinks: Plugin<[], Root> = () => {
+	return (tree: Root) => {
+		visit(tree, 'element', (node: Element) => {
+			if (node.tagName !== 'a') return;
+
+			const props = node.properties ?? {};
+
+			// Only modify if href exists
+			if (!props.href) return;
+
+			props.target = '_blank';
+			props.rel = 'noopener noreferrer';
+			node.properties = props;
+		});
+	};
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/enhance-mermaid-blocks.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/enhance-mermaid-blocks.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4007c20a19d76ffca05c91cba4c2120723c0dcfe
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/enhance-mermaid-blocks.ts
@@ -0,0 +1,106 @@
+/**
+ * Rehype plugin to enhance mermaid diagram blocks with wrapper, header, and action buttons.
+ *
+ * Wraps <pre class="mermaid"> elements with a container that includes:
+ * - Language label ("mermaid")
+ * - Copy button (copies mermaid syntax to clipboard)
+ * - Preview button (opens fullscreen preview dialog)
+ *
+ * This operates directly on the HAST tree for better performance,
+ * avoiding the need to stringify and re-parse HTML.
+ */
+
+import type { Plugin } from 'unified';
+import type { Root, Element, ElementContent } from 'hast';
+import { visit } from 'unist-util-visit';
+import {
+	MERMAID_WRAPPER_CLASS,
+	MERMAID_SCROLL_CONTAINER_CLASS,
+	MERMAID_BLOCK_CLASS,
+	MERMAID_LANGUAGE,
+	MERMAID_SYNTAX_ATTR,
+	MERMAID_ID_ATTR,
+	DIAGRAM_VIEW_MODE_ATTR,
+	DIAGRAM_VIEW_RENDERED
+} from '$lib/constants';
+import type { DiagramPreData } from './pre-transform';
+import {
+	createBlockHeader,
+	createCopyButton,
+	createPreviewButton,
+	createToggleSourceButton,
+	createSourceView,
+	createWrapper,
+	generateBlockId
+} from './code-block-utils';
+
+declare global {
+	interface Window {
+		idxMermaidBlock?: number;
+	}
+}
+
+/**
+ * Rehype plugin to enhance mermaid diagram blocks with wrapper, header, and action buttons.
+ * This plugin wraps <pre class="mermaid"> elements with a container that includes:
+ * - Language label ("mermaid")
+ * - Copy button
+ * - Preview button
+ */
+export const rehypeEnhanceMermaidBlocks: Plugin<[], Root> = () => {
+	return (tree: Root) => {
+		visit(tree, 'element', (node: Element, index, parent) => {
+			if (node.tagName !== 'pre' || !parent || index === undefined) return;
+
+			const className = node.properties?.className;
+			if (!Array.isArray(className)) return;
+
+			const isMermaid = className.some(
+				(cls) => typeof cls === 'string' && cls === MERMAID_BLOCK_CLASS
+			);
+
+			if (!isMermaid) return;
+
+			const mermaidId = generateBlockId(MERMAID_LANGUAGE, 'idxMermaidBlock');
+
+			// Extract the mermaid syntax (text content of the pre element)
+			const diagramText = node.children
+				.map((child) => {
+					if (child.type === 'text') return child.value;
+					return '';
+				})
+				.join('');
+
+			// Store the mermaid syntax in data attribute for copy functionality
+			node.properties = {
+				...node.properties,
+				[MERMAID_SYNTAX_ATTR]: diagramText,
+				[MERMAID_ID_ATTR]: mermaidId
+			};
+
+			const actions = [
+				createCopyButton(mermaidId, MERMAID_ID_ATTR, 'Copy mermaid syntax'),
+				createToggleSourceButton(mermaidId, MERMAID_ID_ATTR, 'Toggle mermaid source'),
+				createPreviewButton(mermaidId, MERMAID_ID_ATTR, 'Preview diagram')
+			];
+
+			const header = createBlockHeader(MERMAID_LANGUAGE, mermaidId, MERMAID_ID_ATTR, actions);
+			const preservedCode = (node.data as DiagramPreData | undefined)?.sourceCode;
+			const sourceView = createSourceView(preservedCode, diagramText, MERMAID_LANGUAGE);
+			const wrapper = createWrapper(
+				header,
+				node,
+				MERMAID_WRAPPER_CLASS,
+				MERMAID_SCROLL_CONTAINER_CLASS,
+				{
+					[MERMAID_ID_ATTR]: mermaidId,
+					[DIAGRAM_VIEW_MODE_ATTR]: DIAGRAM_VIEW_RENDERED
+				},
+				[sourceView]
+			);
+
+			// Replace pre with wrapper in parent
+			(parent.children as ElementContent[])[index] = wrapper;
+		});
+	};
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/enhance-svg-blocks.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/enhance-svg-blocks.ts
new file mode 100644
index 0000000000000000000000000000000000000000..55bcb6065fda13d0fd3fad23f905b28eace4b5e4
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/enhance-svg-blocks.ts
@@ -0,0 +1,96 @@
+/**
+ * Rehype plugin to enhance svg blocks with wrapper, header, and action buttons.
+ *
+ * Wraps <pre class="svg-block"> elements with a container that includes:
+ * - Language label ("svg")
+ * - Copy button (copies svg source to clipboard)
+ * - Preview button (opens fullscreen preview dialog)
+ *
+ * Operates directly on the HAST tree and reuses the shared code-block builders.
+ */
+
+import type { Plugin } from 'unified';
+import type { Root, Element, ElementContent } from 'hast';
+import { visit } from 'unist-util-visit';
+import {
+	SVG_WRAPPER_CLASS,
+	SVG_SCROLL_CONTAINER_CLASS,
+	SVG_BLOCK_CLASS,
+	SVG_LANGUAGE,
+	SVG_SOURCE_ATTR,
+	SVG_ID_ATTR,
+	DIAGRAM_VIEW_MODE_ATTR,
+	DIAGRAM_VIEW_RENDERED
+} from '$lib/constants';
+import type { DiagramPreData } from './pre-transform';
+import {
+	createBlockHeader,
+	createCopyButton,
+	createPreviewButton,
+	createToggleSourceButton,
+	createSourceView,
+	createWrapper,
+	generateBlockId
+} from './code-block-utils';
+
+declare global {
+	interface Window {
+		idxSvgBlock?: number;
+	}
+}
+
+export const rehypeEnhanceSvgBlocks: Plugin<[], Root> = () => {
+	return (tree: Root) => {
+		visit(tree, 'element', (node: Element, index, parent) => {
+			if (node.tagName !== 'pre' || !parent || index === undefined) return;
+
+			const className = node.properties?.className;
+			if (!Array.isArray(className)) return;
+
+			const isSvg = className.some((cls) => typeof cls === 'string' && cls === SVG_BLOCK_CLASS);
+
+			if (!isSvg) return;
+
+			const svgId = generateBlockId(SVG_LANGUAGE, 'idxSvgBlock');
+
+			// Extract the svg source (text content of the pre element)
+			const svgSource = node.children
+				.map((child) => {
+					if (child.type === 'text') return child.value;
+					return '';
+				})
+				.join('');
+
+			// Store the svg source in data attribute for copy and render
+			node.properties = {
+				...node.properties,
+				[SVG_SOURCE_ATTR]: svgSource,
+				[SVG_ID_ATTR]: svgId
+			};
+
+			const actions = [
+				createCopyButton(svgId, SVG_ID_ATTR, 'Copy svg source'),
+				createToggleSourceButton(svgId, SVG_ID_ATTR, 'Toggle svg source'),
+				createPreviewButton(svgId, SVG_ID_ATTR, 'Preview svg')
+			];
+
+			const header = createBlockHeader(SVG_LANGUAGE, svgId, SVG_ID_ATTR, actions);
+			const preservedCode = (node.data as DiagramPreData | undefined)?.sourceCode;
+			const sourceView = createSourceView(preservedCode, svgSource, SVG_LANGUAGE);
+			const wrapper = createWrapper(
+				header,
+				node,
+				SVG_WRAPPER_CLASS,
+				SVG_SCROLL_CONTAINER_CLASS,
+				{
+					[SVG_ID_ATTR]: svgId,
+					[DIAGRAM_VIEW_MODE_ATTR]: DIAGRAM_VIEW_RENDERED
+				},
+				[sourceView]
+			);
+
+			// Replace pre with wrapper in parent
+			(parent.children as ElementContent[])[index] = wrapper;
+		});
+	};
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/mermaid-pre.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/mermaid-pre.ts
new file mode 100644
index 0000000000000000000000000000000000000000..61322f045cf128fcc245bf6a4fe86553fa653d9e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/mermaid-pre.ts
@@ -0,0 +1,7 @@
+import { createPreTransform } from './pre-transform';
+import { MERMAID_BLOCK_CLASS, MERMAID_LANGUAGE } from '$lib/constants';
+
+/**
+ * Converts mermaid code blocks to <pre class="mermaid"> for client-side rendering.
+ */
+export const rehypeMermaidPre = createPreTransform(MERMAID_LANGUAGE, MERMAID_BLOCK_CLASS);
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/pre-transform.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/pre-transform.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7aa967bb81daa98e29688b024abe780dcc43d26a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/pre-transform.ts
@@ -0,0 +1,91 @@
+import type { Plugin } from 'unified';
+import type { Root, Element, ElementContent, Text } from 'hast';
+import { visit } from 'unist-util-visit';
+
+/**
+ * Metadata a diagram pre carries on its unist data field. The source code holds
+ * the highlighted code element captured before the pre became a render target,
+ * which the enhancer reuses to build a matching source view.
+ */
+export interface DiagramPreData {
+	sourceCode: Element;
+}
+
+/**
+ * Recursively extracts all text content from a HAST node.
+ * Handles nested elements (e.g., span wrappers from syntax highlighting).
+ */
+function extractText(node: ElementContent): string {
+	if (node.type === 'text') return node.value;
+	if (node.type === 'element') {
+		return (node.children ?? []).map(extractText).join('');
+	}
+	return '';
+}
+
+/**
+ * Builds a rehype plugin that converts <pre><code class="language-{language}">
+ * blocks into <pre class="{targetClass}"> elements carrying the raw text.
+ *
+ * Accepts one or more source languages, and an optional contentGuard that
+ * receives the trimmed text and decides whether the block qualifies. The guard
+ * lets a shared fence language be claimed only when its content matches, e.g.
+ * an xml block is converted to svg only when it starts with <svg.
+ *
+ * The result has no <code> child, so rehypeEnhanceCodeBlocks skips it. Rendering
+ * happens client-side, so no markup is injected at this stage. Must run BEFORE
+ * rehypeEnhanceCodeBlocks.
+ */
+export function createPreTransform(
+	languages: string | string[],
+	targetClass: string,
+	contentGuard?: (text: string) => boolean
+): Plugin<[], Root> {
+	const codeClasses = (Array.isArray(languages) ? languages : [languages]).map(
+		(language) => `language-${language}`
+	);
+
+	return () => {
+		return (tree: Root) => {
+			visit(tree, 'element', (node: Element, index, parent) => {
+				if (node.tagName !== 'pre' || !parent || index === undefined) return;
+
+				const codeElement = node.children.find(
+					(child): child is Element => child.type === 'element' && child.tagName === 'code'
+				);
+
+				if (!codeElement) return;
+
+				const className = codeElement.properties?.className;
+				if (!Array.isArray(className)) return;
+
+				const matches = className.some(
+					(cls) => typeof cls === 'string' && codeClasses.includes(cls)
+				);
+
+				if (!matches) return;
+
+				// Recursively extract text to handle nested spans from syntax highlighting
+				const text = codeElement.children.map(extractText).join('').trim();
+
+				if (!text) return;
+
+				if (contentGuard && !contentGuard(text)) return;
+
+				const pre: Element = {
+					type: 'element',
+					tagName: 'pre',
+					properties: {
+						className: [targetClass]
+					},
+					children: [{ type: 'text', value: text } as Text],
+					// Keep the highlighted code element so the block can offer a source
+					// view that matches the app code blocks without re highlighting.
+					data: { sourceCode: codeElement } satisfies DiagramPreData
+				};
+
+				(parent.children as ElementContent[])[index] = pre;
+			});
+		};
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/rehype-rtl-support.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/rehype-rtl-support.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0a8b93ad547207d6ed71e840feee0391f7792f86
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/rehype-rtl-support.ts
@@ -0,0 +1,28 @@
+/**
+ * Rehype plugin to provide comprehensive RTL support by adding dir="auto"
+ * to all text-containing elements.
+ *
+ * This operates directly on the HAST tree, ensuring that all elements
+ * (including those not in a predefined list) receive the attribute.
+ */
+
+import type { Plugin } from 'unified';
+import type { Root, Element } from 'hast';
+import { visit } from 'unist-util-visit';
+
+/**
+ * Rehype plugin to add dir="auto" to all elements that have children.
+ * This provides bidirectional text support for mixed RTL/LTR content.
+ */
+export const rehypeRtlSupport: Plugin<[], Root> = () => {
+	return (tree: Root) => {
+		visit(tree, 'element', (node: Element) => {
+			if (node.children && node.children.length > 0) {
+				node.properties = {
+					...node.properties,
+					dir: 'auto'
+				};
+			}
+		});
+	};
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/resolve-attachment-images.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/resolve-attachment-images.ts
new file mode 100644
index 0000000000000000000000000000000000000000..36e7a3192bc1ac6ffed6ad81a96a14d80b26bf47
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/resolve-attachment-images.ts
@@ -0,0 +1,34 @@
+import type { Root as HastRoot } from 'hast';
+import { visit } from 'unist-util-visit';
+import type { DatabaseMessageExtra, DatabaseMessageExtraImageFile } from '$lib/types/database';
+import { AttachmentType, UrlProtocol } from '$lib/enums';
+
+/**
+ * Rehype plugin to resolve attachment image sources.
+ * Converts attachment names (e.g., "mcp-attachment-xxx.png") to base64 data URLs.
+ */
+export function rehypeResolveAttachmentImages(options: { attachments?: DatabaseMessageExtra[] }) {
+	return (tree: HastRoot) => {
+		visit(tree, 'element', (node) => {
+			if (node.tagName === 'img' && node.properties?.src) {
+				const src = String(node.properties.src);
+
+				// Skip data URLs and external URLs
+				if (src.startsWith(UrlProtocol.DATA) || src.startsWith(UrlProtocol.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/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/svg-pre.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/svg-pre.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eb0e2c699bf5d5fcfe4623563b73e17eb6a41c20
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/svg-pre.ts
@@ -0,0 +1,13 @@
+import { createPreTransform } from './pre-transform';
+import { SVG_BLOCK_CLASS, SVG_LANGUAGE, XML_LANGUAGE, SVG_TAG_PREFIX } from '$lib/constants';
+
+/**
+ * Converts svg code blocks to <pre class="svg-block"> for client-side rendering.
+ * Also claims xml blocks whose content starts with <svg, since models often emit
+ * svg inside an xml fence.
+ */
+export const rehypeSvgPre = createPreTransform(
+	[SVG_LANGUAGE, XML_LANGUAGE],
+	SVG_BLOCK_CLASS,
+	(text) => text.startsWith(SVG_TAG_PREFIX)
+);
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/table-html-restorer.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/table-html-restorer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bc5d034653f20586a61878991242e833fb4258d4
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/rehype/table-html-restorer.ts
@@ -0,0 +1,181 @@
+/**
+ * Rehype plugin to restore limited HTML elements inside Markdown table cells.
+ *
+ * ## Problem
+ * The remark/rehype pipeline neutralizes inline HTML as literal text
+ * (remarkLiteralHtml) so that XML/HTML snippets in LLM responses display
+ * as-is instead of being rendered. This causes <br> and <ul> markup in
+ * table cells to show as plain text.
+ *
+ * ## Solution
+ * This plugin traverses the HAST post-conversion, parses whitelisted HTML
+ * patterns from text nodes, and replaces them with actual HAST element nodes
+ * that will be rendered as real HTML.
+ *
+ * ## Supported HTML
+ * - `<br>` / `<br/>` / `<br />` - Line breaks (inline)
+ * - `<ul><li>...</li></ul>` - Unordered lists (block)
+ *
+ * ## Key Implementation Details
+ *
+ * ### 1. Sibling Combination (Critical)
+ * The Markdown pipeline may fragment content across multiple text nodes and `<br>`
+ * elements. For example, `<ul><li>a</li></ul>` might arrive as:
+ *   - Text: `"<ul>"`
+ *   - Element: `<br>`
+ *   - Text: `"<li>a</li></ul>"`
+ *
+ * We must combine consecutive text nodes and `<br>` elements into a single string
+ * before attempting to parse list markup. Without this, list detection fails.
+ *
+ * ### 2. visitParents for Deep Traversal
+ * Table cell content may be wrapped in intermediate elements (e.g., `<p>` tags).
+ * Using `visitParents` instead of direct child iteration ensures we find text
+ * nodes at any depth within the cell.
+ *
+ * ### 3. Reference Comparison for No-Op Detection
+ * When checking if `<br>` expansion changed anything, we compare:
+ *   `expanded.length !== 1 || expanded[0] !== textNode`
+ *
+ * This catches both cases:
+ * - Multiple nodes created (text was split)
+ * - Single NEW node created (original had only `<br>`, now it's an element)
+ *
+ * A simple `length > 1` check would miss the single `<br>` case.
+ *
+ * ### 4. Strict List Validation
+ * `parseList()` rejects malformed markup by checking for garbage text between
+ * `<li>` elements. This prevents creating broken DOM from partial matches like
+ * `<ul>garbage<li>a</li></ul>`.
+ *
+ * ### 5. Newline Substitution for `<br>` in Combined String
+ * When combining siblings, existing `<br>` elements become `\n` in the combined
+ * string. This allows list content to span visual lines while still being parsed
+ * as a single unit.
+ *
+ * @example
+ * // Input Markdown:
+ * // | Feature | Notes |
+ * // |---------|-------|
+ * // | Multi-line | First<br>Second |
+ * // | List | <ul><li>A</li><li>B</li></ul> |
+ * //
+ * // Without this plugin: <br> and <ul> render as literal text
+ * // With this plugin: <br> becomes line break, <ul> becomes actual list
+ */
+
+import type { Plugin } from 'unified';
+import type { Element, ElementContent, Root, Text } from 'hast';
+import { visit } from 'unist-util-visit';
+import { visitParents } from 'unist-util-visit-parents';
+import { BR_PATTERN, LIST_PATTERN, LI_PATTERN } from '$lib/constants';
+
+/**
+ * Expands text containing `<br>` tags into an array of text nodes and br elements.
+ */
+function expandBrTags(value: string): ElementContent[] {
+	const matches = [...value.matchAll(BR_PATTERN)];
+	if (!matches.length) return [{ type: 'text', value } as Text];
+
+	const result: ElementContent[] = [];
+	let cursor = 0;
+
+	for (const m of matches) {
+		if (m.index! > cursor) {
+			result.push({ type: 'text', value: value.slice(cursor, m.index) } as Text);
+		}
+		result.push({ type: 'element', tagName: 'br', properties: {}, children: [] } as Element);
+		cursor = m.index! + m[0].length;
+	}
+
+	if (cursor < value.length) {
+		result.push({ type: 'text', value: value.slice(cursor) } as Text);
+	}
+
+	return result;
+}
+
+/**
+ * Parses a `<ul><li>...</li></ul>` string into a HAST element.
+ * Returns null if the markup is malformed or contains unexpected content.
+ */
+function parseList(value: string): Element | null {
+	const match = value.trim().match(LIST_PATTERN);
+	if (!match) return null;
+
+	const body = match[1];
+	const items: ElementContent[] = [];
+	let cursor = 0;
+
+	for (const liMatch of body.matchAll(LI_PATTERN)) {
+		// Reject if there's non-whitespace between list items
+		if (body.slice(cursor, liMatch.index!).trim()) return null;
+
+		items.push({
+			type: 'element',
+			tagName: 'li',
+			properties: {},
+			children: expandBrTags(liMatch[1] ?? '')
+		} as Element);
+
+		cursor = liMatch.index! + liMatch[0].length;
+	}
+
+	// Reject if no items found or trailing garbage exists
+	if (!items.length || body.slice(cursor).trim()) return null;
+
+	return { type: 'element', tagName: 'ul', properties: {}, children: items } as Element;
+}
+
+/**
+ * Processes a single table cell, restoring HTML elements from text content.
+ */
+function processCell(cell: Element) {
+	visitParents(cell, 'text', (textNode: Text, ancestors) => {
+		const parent = ancestors[ancestors.length - 1];
+		if (!parent || parent.type !== 'element') return;
+
+		const parentEl = parent as Element;
+		const siblings = parentEl.children as ElementContent[];
+		const startIndex = siblings.indexOf(textNode as ElementContent);
+		if (startIndex === -1) return;
+
+		// Combine consecutive text nodes and <br> elements into one string
+		let combined = '';
+		let endIndex = startIndex;
+
+		for (let i = startIndex; i < siblings.length; i++) {
+			const sib = siblings[i];
+			if (sib.type === 'text') {
+				combined += (sib as Text).value;
+				endIndex = i;
+			} else if (sib.type === 'element' && (sib as Element).tagName === 'br') {
+				combined += '\n';
+				endIndex = i;
+			} else {
+				break;
+			}
+		}
+
+		// Try parsing as list first (replaces entire combined range)
+		const list = parseList(combined);
+		if (list) {
+			siblings.splice(startIndex, endIndex - startIndex + 1, list);
+			return;
+		}
+
+		// Otherwise, just expand <br> tags in this text node
+		const expanded = expandBrTags(textNode.value);
+		if (expanded.length !== 1 || expanded[0] !== textNode) {
+			siblings.splice(startIndex, 1, ...expanded);
+		}
+	});
+}
+
+export const rehypeRestoreTableHtml: Plugin<[], Root> = () => (tree) => {
+	visit(tree, 'element', (node: Element) => {
+		if (node.tagName === 'td' || node.tagName === 'th') {
+			processCell(node);
+		}
+	});
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/remark/literal-html.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/remark/literal-html.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c974d8b1893ed5bfa44568e3791c0ef9a73177b2
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MarkdownContent/plugins/remark/literal-html.ts
@@ -0,0 +1,121 @@
+import type { Plugin } from 'unified';
+import { visit } from 'unist-util-visit';
+import type { Break, Content, Paragraph, PhrasingContent, Root, Text } from 'mdast';
+import { LINE_BREAK, NBSP, PHRASE_PARENTS, TAB_AS_SPACES } from '$lib/constants';
+
+/**
+ * remark plugin that rewrites raw HTML nodes into plain-text equivalents.
+ *
+ * remark parses inline HTML into `html` nodes even when we do not want to render
+ * them. We turn each of those nodes into regular text (plus `<br>` break markers)
+ * so the downstream rehype pipeline escapes the characters instead of executing
+ * them. Leading spaces and tab characters are converted to non‑breaking spaces to
+ * keep indentation identical to the original author input.
+ */
+
+function preserveIndent(line: string): string {
+	let index = 0;
+	let output = '';
+
+	while (index < line.length) {
+		const char = line[index];
+
+		if (char === ' ') {
+			output += NBSP;
+			index += 1;
+			continue;
+		}
+
+		if (char === '\t') {
+			output += TAB_AS_SPACES;
+			index += 1;
+			continue;
+		}
+
+		break;
+	}
+
+	return output + line.slice(index);
+}
+
+function createLiteralChildren(value: string): PhrasingContent[] {
+	const lines = value.split(LINE_BREAK);
+	const nodes: PhrasingContent[] = [];
+
+	for (const [lineIndex, rawLine] of lines.entries()) {
+		if (lineIndex > 0) {
+			nodes.push({ type: 'break' } as Break as unknown as PhrasingContent);
+		}
+
+		nodes.push({
+			type: 'text',
+			value: preserveIndent(rawLine)
+		} as Text as unknown as PhrasingContent);
+	}
+
+	if (!nodes.length) {
+		nodes.push({ type: 'text', value: '' } as Text as unknown as PhrasingContent);
+	}
+
+	return nodes;
+}
+
+export const remarkLiteralHtml: Plugin<[], Root> = () => {
+	return (tree) => {
+		visit(tree, 'html', (node, index, parent) => {
+			if (!parent || typeof index !== 'number') {
+				return;
+			}
+
+			const replacement = createLiteralChildren(node.value);
+
+			if (!PHRASE_PARENTS.has(parent.type as string)) {
+				const paragraph: Paragraph = {
+					type: 'paragraph',
+					children: replacement as Paragraph['children'],
+					data: { literalHtml: true }
+				};
+
+				const siblings = parent.children as unknown as Content[];
+				siblings.splice(index, 1, paragraph as unknown as Content);
+
+				if (index > 0) {
+					const previous = siblings[index - 1] as Paragraph | undefined;
+
+					if (
+						previous?.type === 'paragraph' &&
+						(previous.data as { literalHtml?: boolean } | undefined)?.literalHtml
+					) {
+						const prevChildren = previous.children as unknown as PhrasingContent[];
+
+						if (prevChildren.length) {
+							const lastChild = prevChildren[prevChildren.length - 1];
+
+							if (lastChild.type !== 'break') {
+								prevChildren.push({
+									type: 'break'
+								} as Break as unknown as PhrasingContent);
+							}
+						}
+
+						prevChildren.push(...(paragraph.children as unknown as PhrasingContent[]));
+
+						siblings.splice(index, 1);
+
+						return index;
+					}
+				}
+
+				return index + 1;
+			}
+
+			(parent.children as unknown as PhrasingContent[]).splice(
+				index,
+				1,
+				...(replacement as unknown as PhrasingContent[])
+			);
+
+			return index + replacement.length;
+		});
+	};
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/MermaidPreview.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MermaidPreview.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..a30f585b93cb7c2df273246a30642592c13ca8f4
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MermaidPreview.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+	import MermaidPreviewControls from './MermaidPreviewControls.svelte';
+	import { mountSvgShadow } from '$lib/utils/svg-shadow';
+	import { SVG_DIALOG_SHADOW_STYLE } from '$lib/constants';
+
+	interface Props {
+		svgHtml: string;
+	}
+
+	let { svgHtml }: Props = $props();
+
+	let svgHost = $state<HTMLDivElement | null>(null);
+
+	// Re-mount on every svgHtml change so a live streaming svg keeps rendering while zoomed
+	$effect(() => {
+		if (svgHost) mountSvgShadow(svgHost, svgHtml, SVG_DIALOG_SHADOW_STYLE);
+	});
+
+	// Zoom and pan state
+	let scale = $state(1);
+	let translateX = $state(0);
+	let translateY = $state(0);
+	let isDragging = $state(false);
+	const containerRef = { current: null as HTMLDivElement | null };
+
+	// Drag start position
+	let dragStartX = 0;
+	let dragStartY = 0;
+	let dragStartTranslateX = 0;
+	let dragStartTranslateY = 0;
+
+	const MIN_SCALE = 0.1;
+	const MAX_SCALE = 10;
+	const ZOOM_STEP = 0.15;
+
+	function resetView() {
+		scale = 1;
+		translateX = 0;
+		translateY = 0;
+	}
+
+	function zoomIn() {
+		scale = Math.min(scale + ZOOM_STEP, MAX_SCALE);
+	}
+
+	function zoomOut() {
+		scale = Math.max(scale - ZOOM_STEP, MIN_SCALE);
+	}
+
+	function handleWheel(event: WheelEvent) {
+		event.preventDefault();
+
+		const delta = event.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
+		scale = Math.min(Math.max(scale + delta, MIN_SCALE), MAX_SCALE);
+	}
+
+	// Imperatively attach a non-passive wheel listener so preventDefault() actually works
+	// (Svelte 5 wheel listeners are passive by default, making preventDefault() a no-op)
+	$effect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+
+		function onWheel(e: WheelEvent) {
+			handleWheel(e);
+		}
+
+		el.addEventListener('wheel', onWheel, { passive: false });
+		return () => el.removeEventListener('wheel', onWheel);
+	});
+
+	function handlePointerDown(event: PointerEvent) {
+		if (event.button !== 0 && event.pointerType === 'mouse') return;
+
+		isDragging = true;
+		dragStartX = event.clientX;
+		dragStartY = event.clientY;
+		dragStartTranslateX = translateX;
+		dragStartTranslateY = translateY;
+
+		(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+	}
+
+	function handlePointerMove(event: PointerEvent) {
+		if (!isDragging) return;
+
+		translateX = dragStartTranslateX + (event.clientX - dragStartX);
+		translateY = dragStartTranslateY + (event.clientY - dragStartY);
+	}
+
+	function handlePointerUp() {
+		isDragging = false;
+	}
+</script>
+
+<div
+	bind:this={containerRef.current}
+	class="mermaid-preview relative flex items-center justify-center overflow-hidden bg-muted/20"
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="mermaid-preview-diagram transform-origin-center inline-block min-h-fit min-w-fit will-change-transform {isDragging &&
+			'select-none'}"
+		style="transform: translate({translateX}px, {translateY}px) scale({scale}); cursor: {isDragging
+			? 'grabbing'
+			: 'grab'};"
+		onpointerdown={handlePointerDown}
+		onpointermove={handlePointerMove}
+		onpointerup={handlePointerUp}
+		onpointerleave={handlePointerUp}
+	>
+		<div bind:this={svgHost}></div>
+	</div>
+
+	<MermaidPreviewControls
+		{scale}
+		{svgHtml}
+		onZoomIn={zoomIn}
+		onZoomOut={zoomOut}
+		onResetView={resetView}
+	/>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/MermaidPreviewControls.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MermaidPreviewControls.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..bb3185f40edac7ce13ac44172db415137e3df019
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/MermaidPreviewControls.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { Download } from '@lucide/svelte';
+	import ZoomInIcon from '@lucide/svelte/icons/zoom-in';
+	import ZoomOutIcon from '@lucide/svelte/icons/zoom-out';
+	import RotateCcwIcon from '@lucide/svelte/icons/rotate-ccw';
+
+	interface Props {
+		scale: number;
+		svgHtml: string;
+		onZoomIn: () => void;
+		onZoomOut: () => void;
+		onResetView: () => void;
+	}
+
+	let { scale, svgHtml, onZoomIn, onZoomOut, onResetView }: Props = $props();
+
+	function downloadSvg() {
+		if (!svgHtml) return;
+		const blob = new Blob([svgHtml], { type: 'image/svg+xml' });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = 'diagram.svg';
+		a.click();
+		URL.revokeObjectURL(url);
+	}
+</script>
+
+<div
+	class="mermaid-preview-controls absolute bottom-8 flex shrink-0 items-center justify-center p-3"
+>
+	<div class="mermaid-preview-controls-inner flex items-center gap-1 rounded-lg bg-muted p-1">
+		<button
+			class="mermaid-preview-btn flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-foreground transition-colors hover:bg-muted-foreground/15 active:bg-muted-foreground/25"
+			onclick={onZoomOut}
+			title="Zoom out"
+			aria-label="Zoom out"
+		>
+			<ZoomOutIcon class="mermaid-preview-btn-icon h-4 w-4" />
+		</button>
+		<span
+			class="mermaid-preview-zoom-label min-w-[3.5rem] px-0.5 text-center text-xs font-medium text-muted-foreground tabular-nums select-none"
+			>{Math.round(scale * 100)}%</span
+		>
+		<button
+			class="mermaid-preview-btn flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-foreground transition-colors hover:bg-muted-foreground/15 active:bg-muted-foreground/25"
+			onclick={onZoomIn}
+			title="Zoom in"
+			aria-label="Zoom in"
+		>
+			<ZoomInIcon class="mermaid-preview-btn-icon h-4 w-4" />
+		</button>
+		<div class="mermaid-preview-controls-separator mx-1 h-5 w-px bg-border/50"></div>
+
+		<button
+			class="mermaid-preview-btn flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-foreground transition-colors hover:bg-muted-foreground/15 active:bg-muted-foreground/25"
+			onclick={onResetView}
+			title="Reset view"
+			aria-label="Reset view"
+		>
+			<RotateCcwIcon class="mermaid-preview-btn-icon h-4 w-4" />
+		</button>
+		<div class="mermaid-preview-controls-separator mx-1 h-5 w-px bg-border/50"></div>
+
+		<button
+			class="mermaid-preview-btn flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-foreground transition-colors hover:bg-muted-foreground/15 active:bg-muted-foreground/25"
+			onclick={downloadSvg}
+			title="Download SVG"
+			aria-label="Download SVG"
+		>
+			<Download class="mermaid-preview-btn-icon h-4 w-4" />
+		</button>
+	</div>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/SyntaxHighlightedCode.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/content/SyntaxHighlightedCode.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..d8dfe0ad9c3627c540c229d6175d6c670b68fe10
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/SyntaxHighlightedCode.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+	import hljs from 'highlight.js';
+	import { browser } from '$app/environment';
+	import { mode } from 'mode-watcher';
+
+	import githubDarkCss from 'highlight.js/styles/github-dark.css?inline';
+	import githubLightCss from 'highlight.js/styles/github.css?inline';
+	import { ColorMode } from '$lib/enums';
+
+	interface Props {
+		code: string;
+		language?: string;
+		class?: string;
+		maxHeight?: string;
+		maxWidth?: string;
+	}
+
+	let {
+		code,
+		language = 'text',
+		class: className = '',
+		maxHeight = '60vh',
+		maxWidth = ''
+	}: Props = $props();
+
+	let highlightedHtml = $state('');
+
+	function loadHighlightTheme(isDark: boolean) {
+		if (!browser) return;
+
+		const existingThemes = document.querySelectorAll('style[data-highlight-theme-preview]');
+		existingThemes.forEach((style) => style.remove());
+
+		const style = document.createElement('style');
+		style.setAttribute('data-highlight-theme-preview', 'true');
+		style.textContent = isDark ? githubDarkCss : githubLightCss;
+
+		document.head.appendChild(style);
+	}
+
+	$effect(() => {
+		const currentMode = mode.current;
+		const isDark = currentMode === ColorMode.DARK;
+
+		loadHighlightTheme(isDark);
+	});
+
+	$effect(() => {
+		if (!code) {
+			highlightedHtml = '';
+			return;
+		}
+
+		try {
+			// Check if the language is supported
+			const lang = language.toLowerCase();
+			const isSupported = hljs.getLanguage(lang);
+
+			if (isSupported) {
+				const result = hljs.highlight(code, { language: lang });
+				highlightedHtml = result.value;
+			} else {
+				// Try auto-detection or fallback to plain text
+				const result = hljs.highlightAuto(code);
+				highlightedHtml = result.value;
+			}
+		} catch {
+			// Fallback to escaped plain text
+			highlightedHtml = code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+		}
+	});
+</script>
+
+<div
+	class="code-preview-wrapper min-w-0 max-w-full overflow-x-auto rounded-lg border border-border bg-muted {className}"
+	style="max-height: {maxHeight}; {maxWidth ? `max-width: ${maxWidth};` : ''}"
+>
+	<!-- Needs to be formatted as single line for proper rendering -->
+	<pre class="m-0"><code class="hljs text-sm leading-relaxed">{@html highlightedHtml}</code></pre>
+</div>
+
+<style>
+	.code-preview-wrapper pre {
+		background: transparent;
+	}
+
+	.code-preview-wrapper code {
+		background: transparent;
+	}
+</style>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/content/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/content/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5d2884bb214c84a60a00c27d9cdab5343687730b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/content/index.ts
@@ -0,0 +1,98 @@
+/**
+ *
+ * CONTENT RENDERING
+ *
+ * Components for rendering rich content: markdown, code, and previews.
+ *
+ */
+
+/**
+ * **MarkdownContent** - Rich markdown renderer
+ *
+ * Renders markdown content with syntax highlighting, LaTeX math,
+ * tables, links, and code blocks. Optimized for streaming with
+ * incremental block-based rendering.
+ *
+ * **Features:**
+ * - GFM (GitHub Flavored Markdown): tables, task lists, strikethrough
+ * - LaTeX math via KaTeX (`$inline$` and `$$block$$`)
+ * - Syntax highlighting (highlight.js) with language detection
+ * - Code copy buttons with click feedback
+ * - External links open in new tab with security attrs
+ * - Image attachment resolution from message extras
+ * - Dark/light theme support (auto-switching)
+ * - Streaming-optimized incremental rendering
+ * - Code preview dialog for large blocks
+ *
+ * @example
+ * ```svelte
+ * <MarkdownContent content={message.content} attachments={message.extra} />
+ * ```
+ */
+export { default as MarkdownContent } from './MarkdownContent/MarkdownContent.svelte';
+
+/**
+ * **SyntaxHighlightedCode** - Code syntax highlighting
+ *
+ * Renders code with syntax highlighting using highlight.js.
+ * Supports theme switching and scrollable containers.
+ *
+ * **Features:**
+ * - Auto language detection with fallback
+ * - Dark/light theme auto-switching
+ * - Scrollable container with configurable max dimensions
+ * - Monospace font styling
+ * - Preserves whitespace and formatting
+ *
+ * @example
+ * ```svelte
+ * <SyntaxHighlightedCode code={jsonString} language="json" />
+ * ```
+ */
+export { default as SyntaxHighlightedCode } from './SyntaxHighlightedCode.svelte';
+
+/**
+ * **CollapsibleContentBlock** - Expandable content card
+ *
+ * Reusable collapsible card with header, icon, and auto-scroll.
+ * Used for tool calls and reasoning blocks in chat messages.
+ *
+ * **Features:**
+ * - Collapsible content with smooth animation
+ * - Custom icon and title display
+ * - Optional subtitle/status text
+ * - Auto-scroll during streaming (pauses on user scroll)
+ * - Configurable max height with overflow scroll
+ *
+ * @example
+ * ```svelte
+ * <CollapsibleContentBlock
+ *   bind:open
+ *   icon={BrainIcon}
+ *   title="Thinking..."
+ *   isStreaming
+ * >
+ *   {reasoningContent}
+ * </CollapsibleContentBlock>
+ * ```
+ */
+export { default as CollapsibleContentBlock } from './CollapsibleContentBlock.svelte';
+
+/**
+ * **MermaidPreview** - Interactive Mermaid diagram viewer
+ *
+ * Renders Mermaid-generated SVG diagrams with zoom, pan, and fit-to-view controls.
+ *
+ * **Features:**
+ * - Mouse wheel zoom in/out
+ * - Click-drag panning with pointer capture
+ * - Fit to view and reset view controls
+ * - Download as SVG
+ * - Responsive scaling with viewBox detection
+ *
+ * @example
+ * ```svelte
+ * <MermaidPreview svgHtml={diagramSvg} />
+ * ```
+ */
+export { default as MermaidPreview } from './MermaidPreview.svelte';
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogChatAttachmentsPreview.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogChatAttachmentsPreview.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..533301dfdad3a76f2404dc6b7a56d3f4de37517f
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogChatAttachmentsPreview.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { Dialog } from 'bits-ui';
+	import { X } from '@lucide/svelte';
+	import * as DialogUI from '$lib/components/ui/dialog';
+	import { ChatAttachmentsPreview } from '$lib/components/app';
+	import { KeyboardKey } from '$lib/enums';
+
+	interface Props {
+		open: boolean;
+		uploadedFiles?: ChatUploadedFile[];
+		attachments?: DatabaseMessageExtra[];
+		activeModelId?: string;
+		previewFocusIndex?: number;
+	}
+
+	let {
+		open = $bindable(false),
+		uploadedFiles = [],
+		attachments = [],
+		activeModelId,
+		previewFocusIndex = 0
+	}: Props = $props();
+
+	function handleClose() {
+		open = false;
+	}
+
+	$effect(() => {
+		if (!open) return;
+
+		function handleKeyDown(event: KeyboardEvent) {
+			const target = event.target as HTMLElement;
+
+			if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return;
+
+			switch (event.key) {
+				case KeyboardKey.ARROW_LEFT:
+					event.preventDefault();
+					event.stopPropagation();
+
+					document.dispatchEvent(new CustomEvent('chat-attachments-nav', { detail: -1 }));
+
+					break;
+				case KeyboardKey.ARROW_RIGHT:
+					event.preventDefault();
+					event.stopPropagation();
+
+					document.dispatchEvent(new CustomEvent('chat-attachments-nav', { detail: 1 }));
+
+					break;
+				case KeyboardKey.SPACE:
+					event.preventDefault();
+					event.stopPropagation();
+
+					document.dispatchEvent(new CustomEvent('chat-attachments-nav', { detail: 1 }));
+
+					break;
+			}
+		}
+
+		document.addEventListener('keydown', handleKeyDown);
+		return () => document.removeEventListener('keydown', handleKeyDown);
+	});
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Portal>
+		<DialogUI.Overlay class="bg-black/85" style="z-index: 1000" />
+
+		<Dialog.Content class="fixed inset-0 z-[1000] flex flex-col bg-transparent outline-none">
+			<Dialog.Close
+				class="absolute top-4 right-4 z-10 cursor-pointer text-white hover:text-gray-400"
+				onclick={handleClose}
+				aria-label="Close"
+			>
+				<X class="size-4" />
+			</Dialog.Close>
+
+			<ChatAttachmentsPreview
+				{uploadedFiles}
+				{attachments}
+				{activeModelId}
+				{previewFocusIndex}
+				class="min-h-0 flex-1"
+			/>
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogChatError.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogChatError.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..ff1005313e5ce742301ad709f865e3bd293637df
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogChatError.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import { AlertTriangle, TimerOff } from '@lucide/svelte';
+	import { ErrorDialogType } from '$lib/enums';
+
+	interface Props {
+		open: boolean;
+		type: ErrorDialogType;
+		message: string;
+		contextInfo?: { n_prompt_tokens: number; n_ctx: number };
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let { open = $bindable(), type, message, contextInfo, onOpenChange }: Props = $props();
+
+	const isTimeout = $derived(type === ErrorDialogType.TIMEOUT);
+	const title = $derived(isTimeout ? 'TCP Timeout' : 'Server Error');
+	const description = $derived(
+		isTimeout
+			? 'The request did not receive a response from the server before timing out.'
+			: 'The server responded with an error message. Review the details below.'
+	);
+	const iconClass = $derived(isTimeout ? 'text-destructive' : 'text-amber-500');
+	const badgeClass = $derived(
+		isTimeout
+			? 'border-destructive/40 bg-destructive/10 text-destructive'
+			: 'border-amber-500/40 bg-amber-500/10 text-amber-600 dark:text-amber-400'
+	);
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+		onOpenChange?.(newOpen);
+	}
+</script>
+
+<AlertDialog.Root {open} onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title class="flex items-center gap-2">
+				{#if isTimeout}
+					<TimerOff class={`h-5 w-5 ${iconClass}`} />
+				{:else}
+					<AlertTriangle class={`h-5 w-5 ${iconClass}`} />
+				{/if}
+
+				{title}
+			</AlertDialog.Title>
+
+			<AlertDialog.Description>
+				{description}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+
+		<div class={`rounded-lg border px-4 py-3 text-sm ${badgeClass}`}>
+			<p class="font-medium">{message}</p>
+
+			{#if contextInfo}
+				<div class="mt-2 space-y-1 text-xs opacity-80">
+					<p>
+						<span class="font-medium">Prompt tokens:</span>
+
+						{contextInfo.n_prompt_tokens.toLocaleString()}
+					</p>
+
+					{#if contextInfo.n_ctx}
+						<p>
+							<span class="font-medium">Context size:</span>
+
+							{contextInfo.n_ctx.toLocaleString()}
+						</p>
+					{/if}
+				</div>
+			{/if}
+		</div>
+
+		<AlertDialog.Footer>
+			<AlertDialog.Action onclick={() => handleOpenChange(false)}>Close</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogCodePreview.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogCodePreview.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..fe5d9b504b88a8c988b2b4fc159e4a9064cf3492
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogCodePreview.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import XIcon from '@lucide/svelte/icons/x';
+
+	interface Props {
+		open: boolean;
+		code: string;
+		language: string;
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let { open = $bindable(), code, language, onOpenChange }: Props = $props();
+
+	let iframeRef = $state<HTMLIFrameElement | null>(null);
+
+	$effect(() => {
+		if (!iframeRef) return;
+
+		if (open) {
+			iframeRef.srcdoc = code;
+		} else {
+			iframeRef.srcdoc = '';
+		}
+	});
+
+	function handleOpenChange(nextOpen: boolean) {
+		open = nextOpen;
+
+		onOpenChange?.(nextOpen);
+	}
+</script>
+
+<DialogPrimitive.Root {open} onOpenChange={handleOpenChange}>
+	<DialogPrimitive.Portal>
+		<DialogPrimitive.Overlay class="code-preview-overlay" />
+
+		<DialogPrimitive.Content class="code-preview-content">
+			<iframe
+				bind:this={iframeRef}
+				title="Preview {language}"
+				sandbox="allow-scripts"
+				class="code-preview-iframe"
+			></iframe>
+
+			<DialogPrimitive.Close
+				class="code-preview-close absolute top-4 right-4 border-none bg-transparent text-white opacity-70 mix-blend-difference transition-opacity hover:opacity-100 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-8"
+				aria-label="Close preview"
+			>
+				<XIcon />
+
+				<span class="sr-only">Close preview</span>
+			</DialogPrimitive.Close>
+		</DialogPrimitive.Content>
+	</DialogPrimitive.Portal>
+</DialogPrimitive.Root>
+
+<style lang="postcss">
+	:global(.code-preview-overlay) {
+		position: fixed;
+		inset: 0;
+		background-color: transparent;
+		z-index: 100000;
+	}
+
+	:global(.code-preview-content) {
+		position: fixed;
+		inset: 0;
+		top: 0 !important;
+		left: 0 !important;
+		width: 100dvw;
+		height: 100dvh;
+		margin: 0;
+		padding: 0;
+		border: none;
+		border-radius: 0;
+		background-color: transparent;
+		box-shadow: none;
+		display: block;
+		overflow: hidden;
+		transform: none !important;
+		z-index: 100001;
+	}
+
+	:global(.code-preview-iframe) {
+		display: block;
+		width: 100dvw;
+		height: 100dvh;
+		border: 0;
+	}
+
+	:global(.code-preview-close) {
+		position: absolute;
+		z-index: 100002;
+	}
+</style>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogConfirmation.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogConfirmation.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..becc658d3c5738ed15fd0ceb185716417bd0d607
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogConfirmation.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import type { Component, Snippet } from 'svelte';
+	import { KeyboardKey } from '$lib/enums';
+
+	interface Props {
+		open: boolean;
+		title: string;
+		description: string;
+		confirmText?: string;
+		cancelText?: string;
+		variant?: 'default' | 'destructive';
+		icon?: Component;
+		onConfirm: () => void;
+		onCancel: () => void;
+		onKeydown?: (event: KeyboardEvent) => void;
+		children?: Snippet;
+	}
+
+	let {
+		open = $bindable(),
+		title,
+		description,
+		confirmText = 'Confirm',
+		cancelText = 'Cancel',
+		variant = 'default',
+		icon,
+		onConfirm,
+		onCancel,
+		onKeydown,
+		children
+	}: Props = $props();
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === KeyboardKey.ENTER) {
+			event.preventDefault();
+
+			onConfirm();
+		}
+		onKeydown?.(event);
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			onCancel();
+		}
+	}
+</script>
+
+<AlertDialog.Root {open} onOpenChange={handleOpenChange}>
+	<AlertDialog.Content onkeydown={handleKeydown}>
+		<AlertDialog.Header>
+			<AlertDialog.Title class="flex items-center gap-2">
+				{#if icon}
+					{@const IconComponent = icon}
+
+					<IconComponent class="h-5 w-5 {variant === 'destructive' ? 'text-destructive' : ''}" />
+				{/if}
+				{title}
+			</AlertDialog.Title>
+
+			<AlertDialog.Description>
+				{description}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+
+		{#if children}
+			{@render children()}
+		{/if}
+
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel onclick={onCancel}>{cancelText}</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={onConfirm}
+				class={variant === 'destructive' ? 'bg-destructive text-white hover:bg-destructive/80' : ''}
+			>
+				{confirmText}
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogConversationSelection.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogConversationSelection.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..7373250850ccf8882c541e18a16cab79e709128b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogConversationSelection.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { ConversationSelection } from '$lib/components/app';
+
+	interface Props {
+		conversations: DatabaseConversation[];
+		messageCountMap?: Map<string, number>;
+		mode: 'export' | 'import';
+		onCancel: () => void;
+		onConfirm: (selectedConversations: DatabaseConversation[]) => void;
+		open?: boolean;
+	}
+
+	let {
+		conversations,
+		messageCountMap = new Map(),
+		mode,
+		onCancel,
+		onConfirm,
+		open = $bindable(false)
+	}: Props = $props();
+
+	let conversationSelectionRef: ConversationSelection | undefined = $state();
+
+	let previousOpen = $state(false);
+
+	$effect(() => {
+		if (open && !previousOpen && conversationSelectionRef) {
+			conversationSelectionRef.reset();
+		} else if (!open && previousOpen) {
+			onCancel();
+		}
+
+		previousOpen = open;
+	});
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Portal>
+		<Dialog.Overlay class="z-[1000000]" />
+
+		<Dialog.Content class="z-[1000001] max-w-2xl">
+			<Dialog.Header>
+				<Dialog.Title>
+					Select Conversations to {mode === 'export' ? 'Export' : 'Import'}
+				</Dialog.Title>
+
+				<Dialog.Description>
+					{#if mode === 'export'}
+						Choose which conversations you want to export. Selected conversations will be downloaded
+						as a JSON file.
+					{:else}
+						Choose which conversations you want to import. Selected conversations will be merged
+						with your existing conversations.
+					{/if}
+				</Dialog.Description>
+			</Dialog.Header>
+
+			<ConversationSelection
+				bind:this={conversationSelectionRef}
+				{conversations}
+				{messageCountMap}
+				{mode}
+				{onCancel}
+				{onConfirm}
+			/>
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogConversationTitleUpdate.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogConversationTitleUpdate.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..4a9eccef789bb5c23abe52bf6b02bc99b7845407
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogConversationTitleUpdate.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import { Button } from '$lib/components/ui/button';
+
+	interface Props {
+		open: boolean;
+		currentTitle: string;
+		newTitle: string;
+		onConfirm: () => void;
+		onCancel: () => void;
+	}
+
+	let { open = $bindable(), currentTitle, newTitle, onConfirm, onCancel }: Props = $props();
+</script>
+
+<AlertDialog.Root bind:open>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Update Conversation Title?</AlertDialog.Title>
+
+			<AlertDialog.Description>
+				Do you want to update the conversation title to match the first message content?
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+
+		<div class="space-y-4 pt-2 pb-6">
+			<div class="space-y-2">
+				<p class="text-sm font-medium text-muted-foreground">Current title:</p>
+
+				<p class="rounded-md bg-muted/50 p-3 text-sm font-medium">{currentTitle}</p>
+			</div>
+
+			<div class="space-y-2">
+				<p class="text-sm font-medium text-muted-foreground">New title would be:</p>
+
+				<p class="rounded-md bg-muted/50 p-3 text-sm font-medium">{newTitle}</p>
+			</div>
+		</div>
+
+		<AlertDialog.Footer>
+			<Button variant="outline" onclick={onCancel}>Keep Current Title</Button>
+
+			<Button onclick={onConfirm}>Update Title</Button>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogEmptyFileAlert.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogEmptyFileAlert.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..f875b0abaeba33eb85ce179a15d16f55d0616e5d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogEmptyFileAlert.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import { FileX } from '@lucide/svelte';
+
+	interface Props {
+		open: boolean;
+		emptyFiles: string[];
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let { open = $bindable(), emptyFiles, onOpenChange }: Props = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+		onOpenChange?.(newOpen);
+	}
+</script>
+
+<AlertDialog.Root {open} onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title class="flex items-center gap-2">
+				<FileX class="h-5 w-5 text-destructive" />
+
+				Empty Files Detected
+			</AlertDialog.Title>
+
+			<AlertDialog.Description>
+				The following files are empty and have been removed from your attachments:
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+
+		<div class="space-y-3 text-sm">
+			<div class="rounded-lg bg-muted p-3">
+				<div class="mb-2 font-medium">Empty Files:</div>
+
+				<ul class="list-inside list-disc space-y-1 text-muted-foreground">
+					{#each emptyFiles as fileName (fileName)}
+						<li class="font-mono text-sm">{fileName}</li>
+					{/each}
+				</ul>
+			</div>
+
+			<div>
+				<div class="mb-2 font-medium">What happened:</div>
+
+				<ul class="list-inside list-disc space-y-1 text-muted-foreground">
+					<li>Empty files cannot be processed or sent to the AI model</li>
+
+					<li>These files have been automatically removed from your attachments</li>
+
+					<li>You can try uploading files with content instead</li>
+				</ul>
+			</div>
+		</div>
+
+		<AlertDialog.Footer>
+			<AlertDialog.Action onclick={() => handleOpenChange(false)}>Got it</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogExportSettings.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogExportSettings.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..c112bde9f6828e3a99157eba16c336ffe149958d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogExportSettings.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import Label from '$lib/components/ui/label/label.svelte';
+	import { Shield, ShieldOff } from '@lucide/svelte';
+
+	let {
+		open = $bindable(),
+		includeSensitiveData = $bindable(false),
+		onCancel,
+		onConfirm
+	}: {
+		open: boolean;
+		includeSensitiveData: boolean;
+		onCancel: () => void;
+		onConfirm: () => void;
+	} = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		if (!newOpen) {
+			onCancel();
+		}
+	}
+</script>
+
+<AlertDialog.Root {open} onOpenChange={handleOpenChange}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title class="flex items-center gap-2">
+				{#if includeSensitiveData}
+					<ShieldOff class="h-5 w-5 text-destructive" />
+				{:else}
+					<Shield class="h-5 w-5 text-destructive" />
+				{/if}
+				Export Settings
+			</AlertDialog.Title>
+
+			<AlertDialog.Description>
+				{#if includeSensitiveData}
+					<p class="text-amber-500">
+						Warning: This export will include sensitive data such as API keys and MCP server custom
+						headers (e.g., authorization tokens). Do not share this file with anyone you don't
+						trust.
+					</p>
+				{:else}
+					<p>
+						Sensitive data (API keys, MCP server custom headers) will not be included in the export
+						to protect your credentials.
+					</p>
+				{/if}
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+
+		<div class="flex items-center gap-2 py-2">
+			<Checkbox id="include-sensitive" bind:checked={includeSensitiveData} />
+
+			<Label
+				for="include-sensitive"
+				class="text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+			>
+				{#if includeSensitiveData}
+					<span class="text-destructive">Include sensitive data (not recommended)</span>
+				{:else}
+					<span>Include sensitive data</span>
+				{/if}
+			</Label>
+		</div>
+
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel onclick={onCancel}>Cancel</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={onConfirm}
+				class="bg-destructive text-white hover:bg-destructive/80"
+			>
+				{#if includeSensitiveData}
+					Export Anyway
+				{:else}
+					Export Without Sensitive Data
+				{/if}
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogFileUploadError.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogFileUploadError.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..3bb2d357f537045e027dec0144d31aa27733b8e9
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogFileUploadError.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+
+	interface Props {
+		open: boolean;
+		fileErrorData: {
+			generallyUnsupported: File[];
+			modalityUnsupported: File[];
+			modalityReasons: Record<string, string>;
+			supportedTypes: string[];
+		};
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let { open = $bindable(), fileErrorData, onOpenChange }: Props = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+
+		onOpenChange?.(newOpen);
+	}
+</script>
+
+<AlertDialog.Root {open} onOpenChange={handleOpenChange}>
+	<AlertDialog.Portal>
+		<AlertDialog.Overlay />
+
+		<AlertDialog.Content class="flex max-w-md flex-col">
+			<AlertDialog.Header>
+				<AlertDialog.Title>File Upload Error</AlertDialog.Title>
+
+				<AlertDialog.Description class="text-sm text-muted-foreground">
+					Some files cannot be uploaded with the current model.
+				</AlertDialog.Description>
+			</AlertDialog.Header>
+
+			<div class="!max-h-[50vh] min-h-0 flex-1 space-y-4 overflow-y-auto">
+				{#if fileErrorData.generallyUnsupported.length > 0}
+					<div class="space-y-2">
+						<h4 class="text-sm font-medium text-destructive">Unsupported File Types</h4>
+
+						<div class="space-y-1">
+							{#each fileErrorData.generallyUnsupported as file (file.name)}
+								<div class="rounded-md bg-destructive/10 px-3 py-2">
+									<p class="font-mono text-sm break-all text-destructive">
+										{file.name}
+									</p>
+
+									<p class="mt-1 text-xs text-muted-foreground">File type not supported</p>
+								</div>
+							{/each}
+						</div>
+					</div>
+				{/if}
+
+				{#if fileErrorData.modalityUnsupported.length > 0}
+					<div class="space-y-2">
+						<div class="space-y-1">
+							{#each fileErrorData.modalityUnsupported as file (file.name)}
+								<div class="rounded-md bg-destructive/10 px-3 py-2">
+									<p class="font-mono text-sm break-all text-destructive">
+										{file.name}
+									</p>
+
+									<p class="mt-1 text-xs text-muted-foreground">
+										{fileErrorData.modalityReasons[file.name] || 'Not supported by current model'}
+									</p>
+								</div>
+							{/each}
+						</div>
+					</div>
+				{/if}
+			</div>
+
+			<div class="rounded-md bg-muted/50 p-3">
+				<h4 class="mb-2 text-sm font-medium">This model supports:</h4>
+
+				<p class="text-sm text-muted-foreground">
+					{fileErrorData.supportedTypes.join(', ')}
+				</p>
+			</div>
+
+			<AlertDialog.Footer>
+				<AlertDialog.Action onclick={() => handleOpenChange(false)}>Got it</AlertDialog.Action>
+			</AlertDialog.Footer>
+		</AlertDialog.Content>
+	</AlertDialog.Portal>
+</AlertDialog.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogMcpResourcePreview.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogMcpResourcePreview.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..7bf284089c97d0a8eba79829e303ede81380215e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogMcpResourcePreview.svelte
@@ -0,0 +1,122 @@
+<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 { DEFAULT_RESOURCE_FILENAME } from '$lib/constants';
+	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 MimeTypeIncludes.JSON;
+		if (extra.mimeType?.includes(MimeTypeIncludes.JAVASCRIPT)) return MimeTypeIncludes.JAVASCRIPT;
+		if (extra.mimeType?.includes(MimeTypeIncludes.TYPESCRIPT)) return MimeTypeIncludes.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 || DEFAULT_RESOURCE_FILENAME
+		);
+	}
+</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/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogMcpResourcesBrowser.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogMcpResourcesBrowser.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..eb162a5572921b9202c0582b2a4babfa83f9de96
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogMcpResourcesBrowser.svelte
@@ -0,0 +1,394 @@
+<script lang="ts">
+	import { FolderOpen, Plus, Loader2, Braces } 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,
+		mcpResourceStore
+	} from '$lib/stores/mcp-resources.svelte';
+	import {
+		McpResourcesBrowser,
+		McpResourcePreview,
+		McpResourceTemplateForm
+	} from '$lib/components/app';
+	import { getResourceDisplayName } from '$lib/utils';
+	import type { MCPResourceInfo, MCPResourceContent, MCPResourceTemplateInfo } 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);
+
+	let selectedTemplate = $state<MCPResourceTemplateInfo | null>(null);
+	let templatePreviewUri = $state<string | null>(null);
+	let templatePreviewContent = $state<MCPResourceContent[] | null>(null);
+	let templatePreviewLoading = $state(false);
+	let templatePreviewError = $state<string | null>(null);
+
+	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;
+			clearTemplateState();
+		}
+	}
+
+	function clearTemplateState() {
+		selectedTemplate = null;
+		templatePreviewUri = null;
+		templatePreviewContent = null;
+		templatePreviewLoading = false;
+		templatePreviewError = null;
+	}
+
+	function handleTemplateSelect(template: MCPResourceTemplateInfo) {
+		selectedResources.clear();
+		lastSelectedUri = null;
+
+		if (
+			selectedTemplate?.uriTemplate === template.uriTemplate &&
+			selectedTemplate?.serverName === template.serverName
+		) {
+			clearTemplateState();
+
+			return;
+		}
+
+		selectedTemplate = template;
+		templatePreviewUri = null;
+		templatePreviewContent = null;
+		templatePreviewLoading = false;
+		templatePreviewError = null;
+	}
+
+	async function handleTemplateResolve(uri: string, serverName: string) {
+		templatePreviewUri = uri;
+		templatePreviewContent = null;
+		templatePreviewLoading = true;
+		templatePreviewError = null;
+
+		try {
+			const content = await mcpStore.readResourceByUri(serverName, uri);
+
+			if (content) {
+				templatePreviewContent = content;
+			} else {
+				templatePreviewError = 'Failed to read resource';
+			}
+		} catch (error) {
+			templatePreviewError = error instanceof Error ? error.message : 'Unknown error';
+		} finally {
+			templatePreviewLoading = false;
+		}
+	}
+
+	function handleTemplateCancelForm() {
+		clearTemplateState();
+	}
+
+	async function handleAttachTemplateResource() {
+		if (!templatePreviewUri || !selectedTemplate || !templatePreviewContent) return;
+
+		isAttaching = true;
+
+		try {
+			const knownResource = mcpResourceStore.findResourceByUri(templatePreviewUri);
+
+			if (knownResource) {
+				if (!mcpResourceStore.isAttached(knownResource.uri)) {
+					await mcpStore.attachResource(knownResource.uri);
+				}
+
+				toast.success(`Resource attached: ${knownResource.title || knownResource.name}`);
+			} else {
+				if (mcpResourceStore.isAttached(templatePreviewUri)) {
+					toast.info('Resource already attached');
+					handleOpenChange(false);
+					return;
+				}
+
+				const resourceInfo: MCPResourceInfo = {
+					uri: templatePreviewUri,
+					name: templatePreviewUri.split('/').pop() || templatePreviewUri,
+					serverName: selectedTemplate.serverName
+				};
+
+				const attachment = mcpResourceStore.addAttachment(resourceInfo);
+				mcpResourceStore.updateAttachmentContent(attachment.id, templatePreviewContent);
+
+				toast.success(`Resource attached: ${resourceInfo.name}`);
+			}
+
+			handleOpenChange(false);
+		} catch (error) {
+			console.error('Failed to attach template resource:', error);
+		} finally {
+			isAttaching = false;
+		}
+	}
+
+	function handleResourceSelect(resource: MCPResourceInfo, shiftKey: boolean = false) {
+		clearTemplateState();
+
+		if (shiftKey && lastSelectedUri) {
+			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) {
+		clearTemplateState();
+
+		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;
+		}
+	}
+
+	const selectedTemplateUri = $derived(selectedTemplate?.uriTemplate ?? null);
+
+	const hasTemplateResult = $derived(
+		!!selectedTemplate && !!templatePreviewContent && !!templatePreviewUri
+	);
+</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">
+				<McpResourcesBrowser
+					onSelect={handleResourceSelect}
+					onToggle={handleResourceToggle}
+					onTemplateSelect={handleTemplateSelect}
+					selectedUris={selectedResources}
+					{selectedTemplateUri}
+					expandToUri={preSelectedUri}
+				/>
+			</div>
+
+			<div class="min-w-0 flex-1 overflow-auto p-4">
+				{#if selectedTemplate && !templatePreviewContent}
+					<div class="flex h-full flex-col">
+						<div class="mb-3 flex items-center gap-2">
+							<Braces class="h-4 w-4 text-muted-foreground" />
+
+							<span class="text-sm font-medium">
+								{selectedTemplate.title || selectedTemplate.name}
+							</span>
+						</div>
+
+						{#if selectedTemplate.description}
+							<p class="mb-4 text-xs text-muted-foreground">
+								{selectedTemplate.description}
+							</p>
+						{/if}
+
+						<div class="mb-4 rounded-md border border-border/50 bg-muted/30 px-3 py-2">
+							<p class="font-mono text-xs break-all text-muted-foreground">
+								{selectedTemplate.uriTemplate}
+							</p>
+						</div>
+
+						{#if templatePreviewLoading}
+							<div class="flex flex-1 items-center justify-center">
+								<Loader2 class="h-6 w-6 animate-spin text-muted-foreground" />
+							</div>
+						{:else if templatePreviewError}
+							<div class="flex flex-1 flex-col items-center justify-center gap-2 text-red-500">
+								<span class="text-sm">{templatePreviewError}</span>
+
+								<Button
+									size="sm"
+									variant="outline"
+									onclick={() => {
+										templatePreviewError = null;
+									}}
+								>
+									Try again
+								</Button>
+							</div>
+						{:else}
+							<McpResourceTemplateForm
+								template={selectedTemplate}
+								onResolve={handleTemplateResolve}
+								onCancel={handleTemplateCancelForm}
+							/>
+						{/if}
+					</div>
+				{:else if hasTemplateResult}
+					<!-- Template resolved: show preview -->
+					<McpResourcePreview
+						resource={{
+							uri: templatePreviewUri ?? '',
+							name: templatePreviewUri?.split('/').pop() || (templatePreviewUri ?? ''),
+							serverName: selectedTemplate?.serverName || ''
+						}}
+						preloadedContent={templatePreviewContent}
+					/>
+				{:else 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 flex-col gap-10">
+						{#each getAllResourcesFlatInTreeOrder() as resource (resource.uri)}
+							{#if selectedResources.has(resource.uri)}
+								<McpResourcePreview {resource} />
+							{/if}
+						{/each}
+					</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>
+
+			{#if hasTemplateResult}
+				<Button onclick={handleAttachTemplateResource} disabled={isAttaching}>
+					{#if isAttaching}
+						<Loader2 class="mr-2 h-4 w-4 animate-spin" />
+					{:else}
+						<Plus class="mr-2 h-4 w-4" />
+					{/if}
+
+					Attach Resource
+				</Button>
+			{:else}
+				<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>
+			{/if}
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogMcpServerAddNew.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogMcpServerAddNew.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..ee99e6b5e33d456949d7cb2e7bd0e65eb8117c9d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogMcpServerAddNew.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { McpServerForm } from '$lib/components/app/mcp';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { parseHeadersToArray, uuid } from '$lib/utils';
+	import { MCP_SERVER_ID_PREFIX } from '$lib/constants';
+
+	interface Props {
+		open: boolean;
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let { open = $bindable(), onOpenChange }: Props = $props();
+
+	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';
+		}
+	});
+	let newServerHeaderPairsValid = $derived(
+		parseHeadersToArray(newServerHeaders).every((p) => p.key.trim() && p.value.trim())
+	);
+	let canSave = $derived(!newServerUrlError && newServerHeaderPairsValid);
+
+	function handleOpenChange(value: boolean) {
+		if (!value) {
+			newServerUrl = '';
+			newServerHeaders = '';
+		}
+		open = value;
+		onOpenChange?.(value);
+	}
+
+	function saveNewServer() {
+		if (!canSave) return;
+
+		const newServerId = uuid() ?? `${MCP_SERVER_ID_PREFIX}-${Date.now()}`;
+
+		mcpStore.addServer({
+			id: newServerId,
+			enabled: true,
+			url: newServerUrl.trim(),
+			headers: newServerHeaders.trim() || undefined
+		});
+
+		conversationsStore.setMcpServerOverride(newServerId, true);
+
+		handleOpenChange(false);
+	}
+
+	function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
+		saveNewServer();
+	}
+</script>
+
+<Dialog.Root {open} onOpenChange={handleOpenChange}>
+	<Dialog.Content class="sm:max-w-md">
+		<Dialog.Header>
+			<Dialog.Title>Add New Server</Dialog.Title>
+		</Dialog.Header>
+
+		<form onsubmit={handleSubmit} class="contents">
+			<div class="space-y-4 py-4">
+				<McpServerForm
+					url={newServerUrl}
+					headers={newServerHeaders}
+					onUrlChange={(v) => (newServerUrl = v)}
+					onHeadersChange={(v) => (newServerHeaders = v)}
+					urlError={newServerUrl ? newServerUrlError : null}
+					id="new-server"
+				/>
+			</div>
+
+			<Dialog.Footer>
+				<Button variant="secondary" size="sm" onclick={() => handleOpenChange(false)}>
+					Cancel
+				</Button>
+
+				<Button variant="default" size="sm" type="submit" disabled={!canSave} aria-label="Save">
+					Add
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogMermaidPreview.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogMermaidPreview.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..9cbeebc36af2d7209cdd63db704e6840df911a24
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogMermaidPreview.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import { MermaidPreview } from '$lib/components/app/content';
+
+	interface Props {
+		open: boolean;
+		svgHtml: string;
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let { open = $bindable(), svgHtml, onOpenChange }: Props = $props();
+</script>
+
+<Dialog.Root bind:open {onOpenChange}>
+	<Dialog.Content
+		class="z-999999 grid max-h-full max-w-full! grid-rows-[1fr_auto] overflow-hidden p-0 md:h-[90vh] md:max-w-[90vw]!"
+	>
+		<MermaidPreview {svgHtml} />
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogModelInformation.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogModelInformation.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..5a10859a080929512ce10ae3cb40661e8831d27d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogModelInformation.svelte
@@ -0,0 +1,270 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+	import * as Table from '$lib/components/ui/table';
+	import { BadgesModality, ActionIconCopyToClipboard } from '$lib/components/app';
+	import { serverStore } from '$lib/stores/server.svelte';
+	import { modelsStore, modelOptions, modelsLoading } from '$lib/stores/models.svelte';
+	import { formatFileSize, formatParameters, formatNumber } from '$lib/utils';
+	import type { ApiLlamaCppServerProps } from '$lib/types';
+
+	interface Props {
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+		// when set, fetch props from the child process (router mode)
+		modelId?: string | null;
+	}
+
+	let { open = $bindable(), onOpenChange, modelId = null }: Props = $props();
+
+	let isRouter = $derived(serverStore.isRouterMode);
+
+	// per-model props fetched from the child process
+	let routerModelProps = $state<ApiLlamaCppServerProps | null>(null);
+	let isLoadingRouterProps = $state(false);
+
+	// in router mode use per-model props, otherwise use global props
+	let serverProps = $derived(isRouter && modelId ? routerModelProps : serverStore.props);
+
+	let modelName = $derived(isRouter && modelId ? modelId : modelsStore.singleModelName);
+	let models = $derived(modelOptions());
+	let isLoadingModels = $derived(modelsLoading());
+
+	// in router mode, find the model option matching modelId
+	// in single mode, use the first model as before
+	let firstModel = $derived.by(() => {
+		if (isRouter && modelId) {
+			return models.find((m) => m.model === modelId) ?? null;
+		}
+		return models[0] ?? null;
+	});
+
+	// Get modalities from modelStore using the model ID from the first model
+	let modalities = $derived.by(() => {
+		if (!firstModel?.id) return [];
+		return modelsStore.getModelModalitiesArray(firstModel.id);
+	});
+
+	// Ensure models are fetched when dialog opens
+	$effect(() => {
+		if (open && models.length === 0) {
+			modelsStore.fetch();
+		}
+	});
+
+	// fetch per-model props from child process when dialog opens in router mode
+	$effect(() => {
+		if (open && isRouter && modelId) {
+			isLoadingRouterProps = true;
+			modelsStore
+				.fetchModelProps(modelId)
+				.then((props) => {
+					routerModelProps = props;
+				})
+				.catch(() => {
+					routerModelProps = null;
+				})
+				.finally(() => {
+					isLoadingRouterProps = false;
+				});
+		}
+		if (!open) {
+			routerModelProps = null;
+		}
+	});
+</script>
+
+<Dialog.Root bind:open {onOpenChange}>
+	<Dialog.Content class="@container z-9999 !max-h-[80dvh] !max-w-[60rem] max-w-full">
+		<style>
+			@container (max-width: 56rem) {
+				.resizable-text-container {
+					max-width: calc(100vw - var(--threshold));
+				}
+			}
+		</style>
+
+		<Dialog.Header>
+			<Dialog.Title>Model Information</Dialog.Title>
+
+			<Dialog.Description>Current model details and capabilities</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="space-y-6 py-4">
+			{#if isLoadingModels || isLoadingRouterProps}
+				<div class="flex items-center justify-center py-8">
+					<div class="text-sm text-muted-foreground">Loading model information...</div>
+				</div>
+			{:else if firstModel}
+				{@const modelMeta = firstModel.meta}
+
+				{#if serverProps}
+					<Table.Root>
+						<Table.Header>
+							<Table.Row>
+								<Table.Head class="w-[10rem]">Model</Table.Head>
+
+								<Table.Head>
+									<div class="inline-flex items-center gap-2">
+										<span
+											class="resizable-text-container min-w-0 flex-1 truncate"
+											style:--threshold="12rem"
+										>
+											{modelName}
+										</span>
+
+										<ActionIconCopyToClipboard
+											text={modelName || ''}
+											canCopy={!!modelName}
+											ariaLabel="Copy model name to clipboard"
+										/>
+									</div>
+								</Table.Head>
+							</Table.Row>
+						</Table.Header>
+						<Table.Body>
+							<!-- Model Path -->
+							<Table.Row>
+								<Table.Cell class="h-10 align-middle font-medium">File Path</Table.Cell>
+
+								<Table.Cell
+									class="inline-flex h-10 items-center gap-2 align-middle font-mono text-xs"
+								>
+									<span
+										class="resizable-text-container min-w-0 flex-1 truncate"
+										style:--threshold="14rem"
+									>
+										{serverProps.model_path}
+									</span>
+
+									<ActionIconCopyToClipboard
+										text={serverProps.model_path}
+										ariaLabel="Copy model path to clipboard"
+									/>
+								</Table.Cell>
+							</Table.Row>
+
+							<!-- Context Size -->
+							{#if serverProps?.default_generation_settings?.n_ctx}
+								<Table.Row>
+									<Table.Cell class="h-10 align-middle font-medium">Context Size</Table.Cell>
+
+									<Table.Cell
+										>{formatNumber(serverProps.default_generation_settings.n_ctx)} tokens</Table.Cell
+									>
+								</Table.Row>
+							{:else}
+								<Table.Row>
+									<Table.Cell class="h-10 align-middle font-medium text-red-500"
+										>Context Size</Table.Cell
+									>
+
+									<Table.Cell class="text-red-500">Not available</Table.Cell>
+								</Table.Row>
+							{/if}
+
+							<!-- Training Context -->
+							{#if modelMeta?.n_ctx_train}
+								<Table.Row>
+									<Table.Cell class="h-10 align-middle font-medium">Training Context</Table.Cell>
+
+									<Table.Cell>{formatNumber(modelMeta.n_ctx_train)} tokens</Table.Cell>
+								</Table.Row>
+							{/if}
+
+							<!-- Model Size -->
+							{#if modelMeta?.size}
+								<Table.Row>
+									<Table.Cell class="h-10 align-middle font-medium">Model Size</Table.Cell>
+
+									<Table.Cell>{formatFileSize(modelMeta.size)}</Table.Cell>
+								</Table.Row>
+							{/if}
+
+							<!-- Parameters -->
+							{#if modelMeta?.n_params}
+								<Table.Row>
+									<Table.Cell class="h-10 align-middle font-medium">Parameters</Table.Cell>
+
+									<Table.Cell>{formatParameters(modelMeta.n_params)}</Table.Cell>
+								</Table.Row>
+							{/if}
+
+							<!-- Embedding Size -->
+							{#if modelMeta?.n_embd}
+								<Table.Row>
+									<Table.Cell class="align-middle font-medium">Embedding Size</Table.Cell>
+
+									<Table.Cell>{formatNumber(modelMeta.n_embd)}</Table.Cell>
+								</Table.Row>
+							{/if}
+
+							<!-- Vocabulary Size -->
+							{#if modelMeta?.n_vocab}
+								<Table.Row>
+									<Table.Cell class="align-middle font-medium">Vocabulary Size</Table.Cell>
+
+									<Table.Cell>{formatNumber(modelMeta.n_vocab)} tokens</Table.Cell>
+								</Table.Row>
+							{/if}
+
+							<!-- Vocabulary Type -->
+							{#if modelMeta?.vocab_type}
+								<Table.Row>
+									<Table.Cell class="align-middle font-medium">Vocabulary Type</Table.Cell>
+									<Table.Cell class="align-middle capitalize">{modelMeta.vocab_type}</Table.Cell>
+								</Table.Row>
+							{/if}
+
+							<!-- Total Slots -->
+							<Table.Row>
+								<Table.Cell class="align-middle font-medium">Parallel Slots</Table.Cell>
+
+								<Table.Cell>{serverProps.total_slots}</Table.Cell>
+							</Table.Row>
+
+							<!-- Modalities -->
+							{#if modalities.length > 0}
+								<Table.Row>
+									<Table.Cell class="align-middle font-medium">Modalities</Table.Cell>
+
+									<Table.Cell>
+										<div class="flex flex-wrap gap-1">
+											<BadgesModality {modalities} />
+										</div>
+									</Table.Cell>
+								</Table.Row>
+							{/if}
+
+							<!-- Build Info -->
+							<Table.Row>
+								<Table.Cell class="align-middle font-medium">Build Info</Table.Cell>
+
+								<Table.Cell class="align-middle font-mono text-xs"
+									>{serverProps.build_info}</Table.Cell
+								>
+							</Table.Row>
+
+							<!-- Chat Template -->
+							{#if serverProps.chat_template}
+								<Table.Row>
+									<Table.Cell class="align-middle font-medium">Chat Template</Table.Cell>
+
+									<Table.Cell class="py-10">
+										<div class="rounded-md bg-muted p-4">
+											<pre
+												class="font-mono text-xs whitespace-pre-wrap">{serverProps.chat_template}</pre>
+										</div>
+									</Table.Cell>
+								</Table.Row>
+							{/if}
+						</Table.Body>
+					</Table.Root>
+				{/if}
+			{:else if !isLoadingModels}
+				<div class="flex items-center justify-center py-8">
+					<div class="text-sm text-muted-foreground">No model information available</div>
+				</div>
+			{/if}
+		</div>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogModelNotAvailable.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogModelNotAvailable.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..a6c20291fa0a6151ad442270b0057520790fa1f1
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/DialogModelNotAvailable.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import { AlertTriangle, ArrowRight } from '@lucide/svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+
+	interface Props {
+		open: boolean;
+		modelName: string;
+		availableModels?: string[];
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let { open = $bindable(), modelName, availableModels = [], onOpenChange }: Props = $props();
+
+	function handleOpenChange(newOpen: boolean) {
+		open = newOpen;
+		onOpenChange?.(newOpen);
+	}
+
+	function handleSelectModel(model: string) {
+		// Build URL with selected model, preserving other params
+		const url = new URL(page.url);
+		url.searchParams.set('model', model);
+
+		handleOpenChange(false);
+		goto(url.toString());
+	}
+</script>
+
+<AlertDialog.Root {open} onOpenChange={handleOpenChange}>
+	<AlertDialog.Content class="max-w-lg">
+		<AlertDialog.Header>
+			<AlertDialog.Title class="flex items-center gap-2">
+				<AlertTriangle class="h-5 w-5 text-amber-500" />
+				Model Not Available
+			</AlertDialog.Title>
+
+			<AlertDialog.Description>
+				The requested model could not be found. Select an available model to continue.
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+
+		<div class="space-y-3">
+			<div class="rounded-lg border border-amber-500/40 bg-amber-500/10 px-4 py-3 text-sm">
+				<p class="font-medium text-amber-600 dark:text-amber-400">
+					Requested: <code class="rounded bg-amber-500/20 px-1.5 py-0.5">{modelName}</code>
+				</p>
+			</div>
+
+			{#if availableModels.length > 0}
+				<div class="text-sm">
+					<p class="mb-2 font-medium text-muted-foreground">Select an available model:</p>
+					<div class="max-h-48 space-y-1 overflow-y-auto rounded-md border p-1">
+						{#each availableModels as model (model)}
+							<button
+								type="button"
+								class="group flex w-full items-center justify-between gap-2 rounded-sm px-3 py-2 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground"
+								onclick={() => handleSelectModel(model)}
+							>
+								<span class="min-w-0 truncate font-mono text-xs">{model}</span>
+								<ArrowRight
+									class="h-4 w-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
+								/>
+							</button>
+						{/each}
+					</div>
+				</div>
+			{/if}
+		</div>
+
+		<AlertDialog.Footer>
+			<AlertDialog.Action onclick={() => handleOpenChange(false)}>Cancel</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..29136308cef50404f26f7412442669cfc408d280
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/dialogs/index.ts
@@ -0,0 +1,508 @@
+/**
+ *
+ * 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.
+ *
+ */
+
+/**
+ * **DialogMcpServerAddNew** - Add new MCP server dialog
+ *
+ * Modal dialog for adding a new MCP server with URL and optional headers.
+ * Validates URL format and integrates with mcpStore and conversationsStore.
+ */
+export { default as DialogMcpServerAddNew } from './DialogMcpServerAddNew.svelte';
+
+/**
+ * **DialogExportSettings** - Settings export dialog with sensitive data warning
+ *
+ * Dialog for exporting settings with an option to include or exclude
+ * sensitive data (API keys, MCP server custom headers). Defaults to excluding
+ * sensitive data for security. User must explicitly opt-in to include them.
+ *
+ * **Architecture:**
+ * - Uses ShadCN AlertDialog
+ * - Checkbox to toggle sensitive data inclusion (defaults to false)
+ * - Warning icon and message when sensitive data is included
+ * - Destructive variant for the action button when exporting with sensitive data
+ *
+ * **Features:**
+ * - Secure default: sensitive data excluded by default
+ * - User must explicitly opt-in to include sensitive data
+ * - Visual warning (ShieldOff icon) when sensitive data is included
+ * - Different action text based on sensitive data state
+ *
+ * @example
+ * ```svelte
+ * <DialogExportSettings
+ *   bind:open={showExportSettings}
+ *   bind:includeSensitiveData
+ *   onConfirm={handleSettingsExport}
+ *   onCancel={() => showExportSettings = false}
+ * />
+ * ```
+ */
+export { default as DialogExportSettings } from './DialogExportSettings.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).
+ *
+ */
+
+/**
+ * **DialogChatAttachmentsPreview** - Unified attachment preview dialog
+ *
+ * Modal dialog for previewing file attachments. Automatically adapts to the
+ * number of items: shows a single file preview without carousel for one item,
+ * or a gallery with carousel navigation for multiple items.
+ *
+ * **Architecture:**
+ * - Wraps ChatAttachmentsPreview component in ShadCN Dialog
+ * - Accepts uploadedFiles and attachments arrays as data sources
+ * - Filters out MCP prompts and MCP resources from display
+ *
+ * **Features:**
+ * - Single item mode: direct preview without navigation controls
+ * - Multi-item mode: gallery with left/right arrows and thumbnail strip
+ * - File type aware preview (images, text, PDFs, audio)
+ * - File name and size/count display in header
+ *
+ * @example
+ * ```svelte
+ * <!-- Gallery with focus on 2nd item -->
+ * <DialogChatAttachmentsPreview
+ *   bind:open={showPreview}
+ *   uploadedFiles={pendingFiles}
+ *   attachments={message.extra}
+ *   activeModelId={currentModel}
+ *   previewFocusIndex={1}
+ * />
+ * ```
+ */
+export { default as DialogChatAttachmentsPreview } from './DialogChatAttachmentsPreview.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';
+
+/**
+ * **DialogFileUploadError** - File upload compatibility error
+ *
+ * Alert dialog shown when files cannot be uploaded due to type incompatibility
+ * or model modality restrictions. Displays a categorized list of problematic
+ * files with explanations and shows which file types the current model supports.
+ *
+ * **Architecture:**
+ * - Uses ShadCN AlertDialog for modal display
+ * - Receives structured file error data from ChatScreen
+ * - Triggered during file upload validation in processFiles()
+ *
+ * **Features:**
+ * - Categorized display: unsupported types vs modality restrictions
+ * - File name in monospace with contextual error messages
+ * - Summary of supported file types for the current model
+ * - Scrollable content area for large error lists
+ * - Single "Got it" dismiss button
+ *
+ * @example
+ * ```svelte
+ * <DialogFileUploadError
+ *   bind:open={showFileError}
+ *   fileErrorData={errorData}
+ * />
+ * ```
+ */
+export { default as DialogFileUploadError } from './DialogFileUploadError.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';
+
+/**
+ * **DialogMcpResourcesBrowser** - 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: McpResourcesBrowser 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
+ * <DialogMcpResourcesBrowser
+ *   bind:open={showResources}
+ *   onAttach={handleResourceAttach}
+ * />
+ * ```
+ */
+export { default as DialogMcpResourcesBrowser } from './DialogMcpResourcesBrowser.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';
+
+/**
+ * **DialogMermaidPreview** - Full-screen Mermaid diagram preview with zoom and pan
+ *
+ * Full-screen dialog for previewing Mermaid diagrams with interactive controls.
+ * Supports mouse wheel zoom, drag-to-pan, and toolbar buttons for zoom in/out,
+ * fit to view, and reset.
+ *
+ * **Architecture:**
+ * - Uses UI dialog components (`Dialog.Root`, `Dialog.Overlay`, `Dialog.Content`)
+ *   for consistent styling, animations, and accessibility
+ * - CSS transform-based zoom and pan (no external dependencies)
+ * - Pointer events for cross-device drag support (mouse + touch)
+ * - Wheel events for zoom-to-cursor functionality
+ *
+ * **Features:**
+ * - Scroll wheel zoom centered on cursor position
+ * - Click and drag to pan the diagram
+ * - Toolbar with zoom in, zoom out, fit to view, reset controls
+ * - Zoom percentage indicator
+ * - Keyboard accessible close button
+ * - Dark/light theme support
+ *
+ * @example
+ * ```svelte
+ * <DialogMermaidPreview
+ *   bind:open={showMermaidPreview}
+ *   svgHtml={mermaidSvgContent}
+ * />
+ * ```
+ */
+export { default as DialogMermaidPreview } from './DialogMermaidPreview.svelte';
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/forms/InputWithSuggestions.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/forms/InputWithSuggestions.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..5d047c59a961182635b8dbda3e930c1989deb65b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/forms/InputWithSuggestions.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+
+	interface Props {
+		name: string;
+		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 {
+		name,
+		value = '',
+		suggestions = [],
+		isLoadingSuggestions = false,
+		isAutocompleteActive = false,
+		autocompleteIndex = 0,
+		onInput,
+		onKeydown,
+		onBlur,
+		onFocus,
+		onSelectSuggestion
+	}: Props = $props();
+</script>
+
+<div class="relative grid gap-1">
+	<Label for="tpl-arg-{name}" class="mb-1 text-muted-foreground">
+		<span>
+			{name}
+
+			<span class="text-destructive">*</span>
+		</span>
+
+		{#if isLoadingSuggestions}
+			<span class="text-xs text-muted-foreground/50">...</span>
+		{/if}
+	</Label>
+
+	<Input
+		id="tpl-arg-{name}"
+		type="text"
+		{value}
+		oninput={(e) => onInput(e.currentTarget.value)}
+		onkeydown={onKeydown}
+		onblur={onBlur}
+		onfocus={onFocus}
+		placeholder="Enter {name}"
+		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/backend/llama.cpp/tools/ui/src/lib/components/app/forms/KeyValuePairs.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/forms/KeyValuePairs.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..fd6e59a5b83066bf6a644d2a9b4c04505147eb24
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/forms/KeyValuePairs.svelte
@@ -0,0 +1,164 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { Plus, Trash2 } from '@lucide/svelte';
+	import { Input } from '$lib/components/ui/input';
+	import {
+		autoResizeTextarea,
+		sanitizeKeyValuePairKey,
+		sanitizeKeyValuePairValue
+	} from '$lib/utils';
+	import { KEY_VALUE_PAIR_KEY_MAX_LENGTH, KEY_VALUE_PAIR_VALUE_MAX_LENGTH } from '$lib/constants';
+	import type { KeyValuePair } from '$lib/types';
+
+	interface Props {
+		class?: string;
+		pairs: KeyValuePair[];
+		onPairsChange: (pairs: KeyValuePair[]) => void;
+		keyPlaceholder?: string;
+		valuePlaceholder?: string;
+		addButtonLabel?: string;
+		emptyMessage?: string;
+		sectionLabel?: string;
+		sectionLabelOptional?: boolean;
+	}
+
+	let {
+		class: className = '',
+		pairs,
+		onPairsChange,
+		keyPlaceholder = 'Key',
+		valuePlaceholder = 'Value',
+		addButtonLabel = 'Add',
+		emptyMessage = 'No items configured.',
+		sectionLabel,
+		sectionLabelOptional = true
+	}: Props = $props();
+
+	// Pre-allocate the ref array so `bind:ref={keyInputRefs[index]}` never reads `undefined`
+	// for in-range indices; the $effect below keeps it in sync when `pairs` grows.
+	// svelte-ignore state_referenced_locally
+	let keyInputRefs: (HTMLInputElement | null)[] = $state(pairs.map(() => null));
+
+	async function addPair() {
+		// Capture the target index before mutating so deletions earlier in the
+		// list can't make keyInputRefs.length drift past the newly-appended row.
+		const newIndex = pairs.length;
+		onPairsChange([...pairs, { key: '', value: '' }]);
+		await tick();
+		keyInputRefs[newIndex]?.focus();
+	}
+
+	function removePair(index: number) {
+		onPairsChange(pairs.filter((_, i) => i !== index));
+	}
+
+	function updatePairKey(index: number, rawKey: string) {
+		const key = sanitizeKeyValuePairKey(rawKey);
+		const newPairs = [...pairs];
+
+		newPairs[index] = { ...newPairs[index], key };
+		onPairsChange(newPairs);
+	}
+
+	function trimPairKey(index: number, key: string) {
+		const trimmed = key.trim();
+		if (trimmed === key) return;
+
+		const newPairs = [...pairs];
+
+		newPairs[index] = { ...newPairs[index], key: trimmed };
+		onPairsChange(newPairs);
+	}
+
+	function updatePairValue(index: number, rawValue: string) {
+		const value = sanitizeKeyValuePairValue(rawValue);
+		const newPairs = [...pairs];
+
+		newPairs[index] = { ...newPairs[index], value };
+		onPairsChange(newPairs);
+	}
+
+	function trimPairValue(index: number, value: string) {
+		const trimmed = value.trim();
+		if (trimmed === value) return;
+
+		const newPairs = [...pairs];
+
+		newPairs[index] = { ...newPairs[index], value: trimmed };
+		onPairsChange(newPairs);
+	}
+
+	// Keep keyInputRefs aligned with pairs length so bind:ref never sees `undefined`.
+	// $effect.pre runs during traversal in tree order, before the {#each} block re-renders,
+	// so newly-appended items always have a defined slot when their binding is set up.
+	$effect.pre(() => {
+		while (keyInputRefs.length < pairs.length) {
+			keyInputRefs.push(null);
+		}
+	});
+</script>
+
+<div class={className}>
+	<div class="mb-2 flex items-center justify-between">
+		{#if sectionLabel}
+			<span class="text-xs font-medium">
+				{sectionLabel}
+				{#if sectionLabelOptional}
+					<span class="text-muted-foreground">(optional)</span>
+				{/if}
+			</span>
+		{/if}
+
+		<button
+			type="button"
+			class="inline-flex cursor-pointer items-center gap-1 rounded-md px-1.5 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
+			onclick={addPair}
+		>
+			<Plus class="h-3 w-3" />
+			{addButtonLabel}
+		</button>
+	</div>
+	{#if pairs.length > 0}
+		<div class="space-y-3">
+			{#each pairs as pair, index (index)}
+				<div class="flex items-start gap-2">
+					<Input
+						bind:ref={keyInputRefs[index]}
+						type="text"
+						placeholder={keyPlaceholder}
+						value={pair.key}
+						maxlength={KEY_VALUE_PAIR_KEY_MAX_LENGTH}
+						oninput={(e) => updatePairKey(index, e.currentTarget.value)}
+						onblur={(e) => trimPairKey(index, e.currentTarget.value)}
+						class="flex-1"
+					/>
+
+					<textarea
+						use:autoResizeTextarea
+						placeholder={valuePlaceholder}
+						value={pair.value}
+						maxlength={KEY_VALUE_PAIR_VALUE_MAX_LENGTH}
+						oninput={(e) => {
+							updatePairValue(index, e.currentTarget.value);
+							autoResizeTextarea(e.currentTarget);
+						}}
+						onblur={(e) => trimPairValue(index, e.currentTarget.value)}
+						class="flex-1 resize-none rounded-md border border-input bg-transparent px-3 py-2 text-sm leading-5 placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
+						rows="1"
+					></textarea>
+
+					<button
+						type="button"
+						class="mt-1.5 shrink-0 cursor-pointer rounded-md p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+						onclick={() => removePair(index)}
+						aria-label="Remove item"
+					>
+						<Trash2 class="h-3.5 w-3.5" />
+					</button>
+				</div>
+			{/each}
+		</div>
+	{:else}
+		<p class="text-xs text-muted-foreground">{emptyMessage}</p>
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/forms/SearchInput.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/forms/SearchInput.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..c4389c52373afcea8896c0a91af1a597d02616c3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/forms/SearchInput.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { Input } from '$lib/components/ui/input';
+	import { Search, X } from '@lucide/svelte';
+
+	interface Props {
+		autofocus?: boolean;
+		value?: string;
+		placeholder?: string;
+		onInput?: (value: string) => void;
+		onClose?: () => void;
+		onKeyDown?: (event: KeyboardEvent) => void;
+		class?: string;
+		id?: string;
+		ref?: HTMLInputElement | null;
+		isCancelAlwaysVisible?: boolean;
+	}
+
+	let {
+		autofocus,
+		value = $bindable(''),
+		placeholder = 'Search...',
+		onInput,
+		onClose,
+		onKeyDown,
+		class: className,
+		id,
+		ref = $bindable(null),
+		isCancelAlwaysVisible = false
+	}: Props = $props();
+
+	let showClearButton = $derived(isCancelAlwaysVisible || !!value || !!onClose);
+
+	function handleInput(event: Event) {
+		const target = event.target as HTMLInputElement;
+
+		value = target.value;
+		onInput?.(target.value);
+	}
+
+	function handleClear() {
+		if (value) {
+			value = '';
+			onInput?.('');
+			ref?.focus({ preventScroll: true });
+		} else {
+			onClose?.();
+		}
+	}
+</script>
+
+<div class="relative {className}">
+	<Search
+		class="absolute top-1/2 left-3 z-10 h-4 w-4 -translate-y-1/2 transform text-muted-foreground"
+	/>
+
+	<Input
+		{autofocus}
+		{id}
+		bind:value
+		bind:ref
+		class="pl-9 {showClearButton ? 'pr-9' : ''}"
+		oninput={handleInput}
+		onkeydown={onKeyDown}
+		{placeholder}
+		type="search"
+	/>
+
+	{#if showClearButton}
+		<button
+			type="button"
+			class="absolute top-1/2 right-3 -translate-y-1/2 transform cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
+			onclick={handleClear}
+			aria-label={value ? 'Clear search' : 'Close'}
+		>
+			<X class="h-4 w-4" />
+		</button>
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/forms/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/forms/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4cf56cdc9d046e0bb6388c44d97bc79bf41357a5
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/forms/index.ts
@@ -0,0 +1,44 @@
+/**
+ *
+ * FORMS & INPUTS
+ *
+ * Form-related utility components.
+ *
+ */
+
+/**
+ * **InputWithSuggestions** - Input field with autocomplete suggestions
+ *
+ * Text input with dropdown suggestions and keyboard navigation.
+ * Supports autocomplete functionality with suggestion loading.
+ *
+ * **Features:**
+ * - Autocomplete dropdown with suggestions
+ * - Keyboard navigation (arrow keys, enter)
+ * - Loading state for suggestions
+ * - Focus and blur handling
+ */
+export { default as InputWithSuggestions } from './InputWithSuggestions.svelte';
+
+/**
+ * **KeyValuePairs** - Editable key-value list
+ *
+ * Dynamic list of key-value pairs with add/remove functionality.
+ * Used for HTTP headers, metadata, and configuration.
+ *
+ * **Features:**
+ * - Add new pairs with button
+ * - Remove individual pairs
+ * - Customizable placeholders and labels
+ * - Empty state message
+ * - Auto-resize value textarea
+ */
+export { default as KeyValuePairs } from './KeyValuePairs.svelte';
+
+/**
+ * **SearchInput** - Search field with clear button
+ *
+ * Input field optimized for search with clear button and keyboard handling.
+ * Supports placeholder, autofocus, and change callbacks.
+ */
+export { default as SearchInput } from './SearchInput.svelte';
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4914c743a50dd909cc29d387a04f33f893b140e4
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/index.ts
@@ -0,0 +1,12 @@
+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 './settings';
+export * from './models';
+export * from './navigation';
+export * from './server';
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpActiveServersAvatars.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpActiveServersAvatars.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..dd239423ee407e1c9584c78a250e2875a30e2def
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpActiveServersAvatars.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { HealthCheckStatus } from '$lib/enums';
+	import { MAX_DISPLAYED_MCP_AVATARS } from '$lib/constants';
+	import McpLogo from './McpLogo.svelte';
+
+	interface Props {
+		class?: string;
+		onclick?: () => void;
+	}
+
+	let { class: className = '', onclick }: Props = $props();
+
+	let mcpServers = $derived(mcpStore.getServers().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 - MAX_DISPLAYED_MCP_AVATARS)
+	);
+	let mcpFavicons = $derived(
+		healthyEnabledMcpServers
+			.slice(0, MAX_DISPLAYED_MCP_AVATARS)
+			.map((s) => ({
+				id: s.id,
+				name: mcpStore.getServerDisplayName(s.id),
+				url: mcpStore.getServerFavicon(s.id)
+			}))
+			.filter((f) => f.url !== null)
+	);
+</script>
+
+{#if !hasEnabledMcpServers}
+	<button
+		class={[
+			'inline-flex cursor-pointer items-center gap-0.75 opacity-70 transition-opacity hover:opacity-100',
+			className,
+			'opacity-50 hover:opacity-100'
+		]}
+		{onclick}
+	>
+		<Tooltip.Root>
+			<Tooltip.Trigger>
+				<McpLogo class="h-4 w-4" />
+			</Tooltip.Trigger>
+
+			<Tooltip.Content>
+				<p>MCP Servers</p>
+			</Tooltip.Content>
+		</Tooltip.Root>
+	</button>
+{:else if mcpFavicons.length > 0}
+	<button class={['inline-flex items-center gap-0.75', className]} {onclick}>
+		<div class="flex -space-x-1">
+			{#each mcpFavicons as favicon (favicon.id)}
+				<Tooltip.Root>
+					<Tooltip.Trigger>
+						<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>
+					</Tooltip.Trigger>
+					<Tooltip.Content>
+						<p>{favicon.name}</p>
+					</Tooltip.Content>
+				</Tooltip.Root>
+			{/each}
+		</div>
+
+		{#if extraServersCount > 0}
+			<span class="text-xs text-muted-foreground">+{extraServersCount}</span>
+		{/if}
+	</button>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpCapabilitiesBadges.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpCapabilitiesBadges.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..d17b24ebb04d906d054affcfede660d9f3e3533f
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/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/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpConnectionLogs.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpConnectionLogs.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..305c9db3aee749c788b2b2e9f7d9b0a2a299bca4
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpConnectionLogs.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { ChevronDown, ChevronRight } from '@lucide/svelte';
+	import * as Collapsible from '$lib/components/ui/collapsible';
+	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);
+
+	function formatLogDetails(details: unknown): string {
+		if (details == null) {
+			return '';
+		}
+
+		try {
+			return JSON.stringify(details, null, 2);
+		} catch {
+			return String(details);
+		}
+	}
+</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 IconComponent = getMcpLogLevelIcon(log.level)}
+
+					<div class={['flex items-start gap-1.5', getMcpLogLevelClass(log.level)]}>
+						<span class="shrink-0 text-muted-foreground">
+							{formatTime(log.timestamp)}
+						</span>
+
+						<IconComponent class="mt-0.5 h-3 w-3 shrink-0" />
+
+						<span class="break-all">{log.message}</span>
+					</div>
+
+					{#if log.details !== undefined}
+						<details class="ml-11">
+							<summary class="cursor-pointer text-[10px] text-muted-foreground"> details </summary>
+
+							<pre
+								class="mt-1 overflow-x-auto rounded bg-background/70 p-2 text-[10px] break-all whitespace-pre-wrap text-foreground/80">
+{formatLogDetails(log.details)}</pre>
+						</details>
+					{/if}
+				{/each}
+			</div>
+		</Collapsible.Content>
+	</Collapsible.Root>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpLogo.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpLogo.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..9f73db84d6107d6532f95a60baad1b2541aa2a04
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/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/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourcePreview.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourcePreview.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..55e1e20a2c7bb222f18a2240285c6b958b0e219f
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourcePreview.svelte
@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { FileText, Loader2, AlertCircle, Download } from '@lucide/svelte';
+	import { Button } from '$lib/components/ui/button';
+	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;
+		/** Pre-loaded content (e.g., from template resolution). Skips store fetch when provided. */
+		preloadedContent?: MCPResourceContent[] | null;
+		class?: string;
+	}
+
+	let { resource, preloadedContent, class: className }: Props = $props();
+
+	let content = $state<MCPResourceContent[] | null>(null);
+	let isLoading = $state(false);
+	let error = $state<string | null>(null);
+
+	$effect(() => {
+		if (resource) {
+			if (preloadedContent) {
+				content = preloadedContent;
+				isLoading = false;
+				error = null;
+			} else {
+				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={['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/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourceTemplateForm.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourceTemplateForm.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..f6263251424cbba242c947bea41b7817df86f94d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourceTemplateForm.svelte
@@ -0,0 +1,171 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { InputWithSuggestions } from '$lib/components/app';
+	import { KeyboardKey } from '$lib/enums';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { MIN_AUTOCOMPLETE_INPUT_LENGTH } from '$lib/constants';
+	import type { MCPResourceTemplateInfo } from '$lib/types';
+	import {
+		debounce,
+		extractTemplateVariables,
+		expandTemplate,
+		isTemplateComplete
+	} from '$lib/utils';
+
+	interface Props {
+		template: MCPResourceTemplateInfo;
+		onResolve: (uri: string, serverName: string) => void;
+		onCancel: () => void;
+	}
+
+	let { template, onResolve, onCancel }: Props = $props();
+
+	const variables = $derived(extractTemplateVariables(template.uriTemplate));
+
+	let values = $state<Record<string, string>>({});
+	let suggestions = $state<Record<string, string[]>>({});
+	let loadingSuggestions = $state<Record<string, boolean>>({});
+	let activeAutocomplete = $state<string | null>(null);
+	let autocompleteIndex = $state(0);
+
+	const expandedUri = $derived(expandTemplate(template.uriTemplate, values));
+	const isComplete = $derived(isTemplateComplete(template.uriTemplate, values));
+
+	const fetchCompletions = debounce(async (argName: string, value: string) => {
+		if (value.length < 1) {
+			suggestions[argName] = [];
+
+			return;
+		}
+
+		loadingSuggestions[argName] = true;
+
+		try {
+			const result = await mcpStore.getResourceCompletions(
+				template.serverName,
+				template.uriTemplate,
+				argName,
+				value
+			);
+
+			if (result && result.values.length > 0) {
+				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('[McpResourceTemplateForm] Failed to fetch completions:', error);
+			suggestions[argName] = [];
+		} finally {
+			loadingSuggestions[argName] = false;
+		}
+	}, 200);
+
+	function handleArgInput(argName: string, value: string) {
+		values[argName] = value;
+		fetchCompletions(argName, value);
+	}
+
+	function selectSuggestion(argName: string, value: string) {
+		values[argName] = value;
+		suggestions[argName] = [];
+		activeAutocomplete = null;
+	}
+
+	function handleArgKeydown(event: KeyboardEvent, argName: string) {
+		const argSuggestions = suggestions[argName] ?? [];
+
+		if (event.key === KeyboardKey.ESCAPE) {
+			event.preventDefault();
+			event.stopPropagation();
+
+			if (argSuggestions.length > 0 && activeAutocomplete === argName) {
+				suggestions[argName] = [];
+				activeAutocomplete = null;
+			} else {
+				onCancel();
+			}
+
+			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) {
+		setTimeout(() => {
+			if (activeAutocomplete === argName) {
+				suggestions[argName] = [];
+				activeAutocomplete = null;
+			}
+		}, 150);
+	}
+
+	function handleArgFocus(argName: string) {
+		const value = values[argName] ?? '';
+
+		if (value.length >= MIN_AUTOCOMPLETE_INPUT_LENGTH) {
+			fetchCompletions(argName, value);
+		}
+	}
+
+	function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
+
+		if (isComplete) {
+			onResolve(expandedUri, template.serverName);
+		}
+	}
+</script>
+
+<form onsubmit={handleSubmit} class="space-y-3">
+	{#each variables as variable (variable.name)}
+		<InputWithSuggestions
+			name={variable.name}
+			value={values[variable.name] ?? ''}
+			suggestions={suggestions[variable.name] ?? []}
+			isLoadingSuggestions={loadingSuggestions[variable.name] ?? false}
+			isAutocompleteActive={activeAutocomplete === variable.name}
+			autocompleteIndex={activeAutocomplete === variable.name ? autocompleteIndex : 0}
+			onInput={(value) => handleArgInput(variable.name, value)}
+			onKeydown={(e) => handleArgKeydown(e, variable.name)}
+			onBlur={() => handleArgBlur(variable.name)}
+			onFocus={() => handleArgFocus(variable.name)}
+			onSelectSuggestion={(value) => selectSuggestion(variable.name, value)}
+		/>
+	{/each}
+
+	{#if isComplete}
+		<div class="rounded-md bg-muted/50 px-3 py-2">
+			<p class="text-xs text-muted-foreground">Resolved URI:</p>
+
+			<p class="mt-0.5 font-mono text-xs break-all">{expandedUri}</p>
+		</div>
+	{/if}
+
+	<div class="flex justify-end gap-2 pt-1">
+		<Button type="button" size="sm" variant="secondary" onclick={onCancel}>Cancel</Button>
+
+		<Button size="sm" type="submit" disabled={!isComplete}>Read Resource</Button>
+	</div>
+</form>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourcesBrowser/McpResourcesBrowser.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourcesBrowser/McpResourcesBrowser.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..24538e8d71b0928b5a85c15f72c19dbbb1b9c8b7
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourcesBrowser/McpResourcesBrowser.svelte
@@ -0,0 +1,153 @@
+<script lang="ts">
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { mcpResources, mcpResourcesLoading } from '$lib/stores/mcp-resources.svelte';
+	import type { MCPServerResources, MCPResourceInfo, MCPResourceTemplateInfo } from '$lib/types';
+	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+	import { parseResourcePath } from '$lib/utils';
+	import McpResourcesBrowserHeader from './McpResourcesBrowserHeader.svelte';
+	import McpResourcesBrowserEmptyState from './McpResourcesBrowserEmptyState.svelte';
+	import McpResourcesBrowserServerItem from './McpResourcesBrowserServerItem.svelte';
+
+	interface Props {
+		onSelect?: (resource: MCPResourceInfo, shiftKey?: boolean) => void;
+		onToggle?: (resource: MCPResourceInfo, checked: boolean) => void;
+		onTemplateSelect?: (template: MCPResourceTemplateInfo) => void;
+		selectedUris?: Set<string>;
+		selectedTemplateUri?: string | null;
+		expandToUri?: string;
+		class?: string;
+	}
+
+	let {
+		onSelect,
+		onToggle,
+		onTemplateSelect,
+		selectedUris = new Set(),
+		selectedTemplateUri,
+		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)
+				);
+			});
+
+			const filteredTemplates = serverRes.templates.filter((t) => {
+				return (
+					t.name?.toLowerCase().includes(query) ||
+					t.title?.toLowerCase().includes(query) ||
+					t.uriTemplate.toLowerCase().includes(query) ||
+					serverName.toLowerCase().includes(query)
+				);
+			});
+
+			if (filteredResources.length > 0 || filteredTemplates.length > 0 || query.trim()) {
+				filtered.set(serverName, {
+					...serverRes,
+					resources: filteredResources,
+					templates: filteredTemplates
+				});
+			}
+		}
+
+		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={['flex flex-col gap-2', className]}>
+	<McpResourcesBrowserHeader
+		{isLoading}
+		onRefresh={handleRefresh}
+		onSearch={(q) => (searchQuery = q)}
+		{searchQuery}
+	/>
+
+	<div class="flex flex-col gap-1">
+		{#if filteredResources.size === 0}
+			<McpResourcesBrowserEmptyState {isLoading} />
+		{:else}
+			{#each [...filteredResources.entries()] as [serverName, serverRes] (serverName)}
+				<McpResourcesBrowserServerItem
+					serverName={serverName as string}
+					serverRes={serverRes as MCPServerResources}
+					isExpanded={expandedServers.has(serverName as string)}
+					{selectedUris}
+					{selectedTemplateUri}
+					{expandedFolders}
+					onToggleServer={() => toggleServer(serverName as string)}
+					onToggleFolder={toggleFolder}
+					{onSelect}
+					{onToggle}
+					{onTemplateSelect}
+					{searchQuery}
+				/>
+			{/each}
+		{/if}
+	</div>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourcesBrowser/McpResourcesBrowserEmptyState.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourcesBrowser/McpResourcesBrowserEmptyState.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..4fb0c1e24f72e239e360a18c954b6adb56f0f539
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourcesBrowser/McpResourcesBrowserEmptyState.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/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourcesBrowser/McpResourcesBrowserHeader.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourcesBrowser/McpResourcesBrowserHeader.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..419654c13ca4708c1f455268a38cdfb32034aba1
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourcesBrowser/McpResourcesBrowserHeader.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/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourcesBrowser/McpResourcesBrowserServerItem.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourcesBrowser/McpResourcesBrowserServerItem.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..9acd101cdfd68b9651eca47e7df99e14a19ea25a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourcesBrowser/McpResourcesBrowserServerItem.svelte
@@ -0,0 +1,230 @@
+<script lang="ts">
+	import { FolderOpen, ChevronDown, ChevronRight, Loader2, Braces } from '@lucide/svelte';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import * as Collapsible from '$lib/components/ui/collapsible';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import type { MCPResourceInfo, MCPResourceTemplateInfo, MCPServerResources } from '$lib/types';
+	import { SvelteSet } from 'svelte/reactivity';
+	import {
+		type ResourceTreeNode,
+		buildResourceTree,
+		countTreeResources,
+		sortTreeChildren
+	} from './mcp-resources-browser';
+	import { getDisplayName, getResourceIcon } from '$lib/utils';
+	import { McpServerIdentity } from '$lib/components/app/mcp';
+
+	interface Props {
+		serverName: string;
+		serverRes: MCPServerResources;
+		isExpanded: boolean;
+		selectedUris: Set<string>;
+		selectedTemplateUri?: string | null;
+		expandedFolders: SvelteSet<string>;
+		onToggleServer: () => void;
+		onToggleFolder: (folderId: string) => void;
+		onSelect?: (resource: MCPResourceInfo, shiftKey?: boolean) => void;
+		onToggle?: (resource: MCPResourceInfo, checked: boolean) => void;
+		onTemplateSelect?: (template: MCPResourceTemplateInfo) => void;
+		searchQuery?: string;
+	}
+
+	let {
+		serverName,
+		serverRes,
+		isExpanded,
+		selectedUris,
+		selectedTemplateUri,
+		expandedFolders,
+		onToggleServer,
+		onToggleFolder,
+		onSelect,
+		onToggle,
+		onTemplateSelect,
+		searchQuery = ''
+	}: Props = $props();
+
+	let serverDisplayName = $derived(mcpStore.getServerDisplayName(serverName));
+	let serverFaviconUrl = $derived(mcpStore.getServerFavicon(serverName));
+
+	const hasResources = $derived(serverRes.resources.length > 0);
+	const hasTemplates = $derived(serverRes.templates.length > 0);
+	const hasContent = $derived(hasResources || hasTemplates);
+	const resourceTree = $derived(buildResourceTree(serverRes.resources, serverName, searchQuery));
+
+	const templateInfos = $derived<MCPResourceTemplateInfo[]>(
+		serverRes.templates.map((t) => ({
+			uriTemplate: t.uriTemplate,
+			name: t.name,
+			title: t.title,
+			description: t.description,
+			mimeType: t.mimeType,
+			serverName,
+			annotations: t.annotations,
+			icons: t.icons
+		}))
+	);
+
+	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={[
+					'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}
+
+		<span class="inline-flex flex-col items-start gap-1 text-left">
+			<div class="inline-flex min-w-0 items-center gap-1.5">
+				<McpServerIdentity
+					displayName={serverDisplayName}
+					faviconUrl={serverFaviconUrl}
+					iconClass="h-4 w-4"
+					showVersion={false}
+				/>
+			</div>
+
+			<span class="text-xs text-muted-foreground">
+				({serverRes.resources.length} resource{serverRes.resources.length !== 1
+					? 's'
+					: ''}{#if hasTemplates}, {serverRes.templates.length} template{serverRes.templates
+						.length !== 1
+						? 's'
+						: ''}{/if})
+			</span>
+		</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 !hasContent}
+				<div class="py-1 text-xs text-muted-foreground">No resources</div>
+			{:else}
+				{#if hasResources}
+					{#each sortTreeChildren( [...resourceTree.children.values()] ) as child (child.resource?.uri || `${serverName}:${child.name}`)}
+						{@render renderTreeNode(child, 1, '')}
+					{/each}
+				{/if}
+
+				{#if hasTemplates && onTemplateSelect}
+					{#if hasResources}
+						<div class="my-1 border-t border-border/30"></div>
+					{/if}
+
+					<div
+						class="py-0.5 text-[11px] font-medium tracking-wide text-muted-foreground/70 uppercase"
+					>
+						Templates
+					</div>
+
+					{#each templateInfos as template (template.uriTemplate)}
+						<button
+							class={[
+								'flex w-full items-center gap-2 rounded px-2 py-1 text-left text-sm transition-colors',
+								'hover:bg-muted/50',
+								selectedTemplateUri === template.uriTemplate && 'bg-muted'
+							]}
+							onclick={() => onTemplateSelect(template)}
+							title={template.uriTemplate}
+						>
+							<Braces class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+
+							<span class="min-w-0 flex-1 truncate text-left">
+								{template.title || template.name}
+							</span>
+						</button>
+					{/each}
+				{/if}
+			{/if}
+		</div>
+	</Collapsible.Content>
+</Collapsible.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourcesBrowser/mcp-resources-browser.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourcesBrowser/mcp-resources-browser.ts
new file mode 100644
index 0000000000000000000000000000000000000000..804fa7fe2fc541fc0f1b8eb364b147208bfee951
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpResourcesBrowser/mcp-resources-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/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCard.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..d238d1ffbad45c3e8dfa775ae6ab63f35c391a52
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/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;
+		enabled?: boolean;
+		onToggle: (enabled: boolean) => void;
+		onUpdate: (updates: Partial<MCPServerSettingsEntry>) => void;
+		onDelete: () => void;
+	}
+
+	let { server, enabled, onToggle, onUpdate, onDelete }: Props = $props();
+
+	let healthState = $derived<HealthCheckState>(mcpStore.getHealthCheckState(server.id));
+	let displayName = $derived(mcpStore.getServerLabel(server));
+	let faviconUrl = $derived(mcpStore.getServerFavicon(server.id));
+	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="mt-auto 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/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCardActions.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCardActions.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..6f137fa21b7b5e1a2543f6a7507e358714bb6140
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/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/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCardDeleteDialog.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCardDeleteDialog.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..8f650148a2f828e9348eee44b1c9127785b11223
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/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/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCardEditForm.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCardEditForm.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..8ed4ee8b802360417c2e0d08046820fdca567780
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCardEditForm.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { McpServerForm } from '$lib/components/app/mcp';
+	import { parseHeadersToArray } from '$lib/utils';
+
+	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 headerPairsValid = $derived(
+		parseHeadersToArray(editHeaders).every((p) => p.key.trim() && p.value.trim())
+	);
+	let canSave = $derived(!urlError && headerPairsValid);
+
+	function handleSave() {
+		if (!canSave) return;
+		onSave(editUrl.trim(), editHeaders.trim(), editUseProxy);
+	}
+
+	function handleSubmit(event: SubmitEvent) {
+		event.preventDefault();
+		handleSave();
+	}
+
+	export function setInitialValues(url: string, headers: string, useProxy: boolean) {
+		editUrl = url;
+		editHeaders = headers;
+		editUseProxy = useProxy;
+	}
+</script>
+
+<form onsubmit={handleSubmit} class="contents">
+	<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" type="submit" disabled={!canSave}>
+				{serverUrl.trim() ? 'Update' : 'Add'}
+			</Button>
+		</div>
+	</div>
+</form>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCardHeader.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCardHeader.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..5544bcec42199bed4f013b598ac60313ee7b1c92
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCardHeader.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { Switch } from '$lib/components/ui/switch';
+	import { Badge } from '$lib/components/ui/badge';
+	import { McpCapabilitiesBadges, McpServerIdentity } from '$lib/components/app/mcp';
+	import { MCP_TRANSPORT_LABELS, MCP_TRANSPORT_ICONS } from '$lib/constants';
+	import { MCPTransportType } from '$lib/enums';
+	import type { MCPServerInfo, MCPCapabilitiesInfo } from '$lib/types';
+
+	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="flex min-w-0 flex-col gap-3">
+			<div class="inline-flex items-center gap-2">
+				<McpServerIdentity
+					{displayName}
+					{faviconUrl}
+					{serverInfo}
+					iconClass="h-5 w-5"
+					iconRounded="rounded"
+					nameClass="leading-6 font-medium"
+				/>
+			</div>
+
+			{#if capabilities || transportType}
+				<div class="flex flex-wrap items-center gap-1.5">
+					{#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/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCardToolsList.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerCard/McpServerCardToolsList.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..d0397c17a980dad230c741cb21aa3dfed14dfebc
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/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/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerCardSkeleton.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerCardSkeleton.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..39a1372806a57f86d337ec4433e6550449dcc9e2
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/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/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerForm.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerForm.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..7f05d5fef31f0f6ccaa2f93d82998f40ab323c3f
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerForm.svelte
@@ -0,0 +1,219 @@
+<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 { UrlProtocol } from '$lib/enums';
+	import { MCP_SERVER_URL_PLACEHOLDER } from '$lib/constants';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { CLI_FLAGS } from '$lib/constants';
+
+	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(UrlProtocol.WEBSOCKET) ||
+			url.toLowerCase().startsWith(UrlProtocol.WEBSOCKET_SECURE)
+	);
+
+	let headerPairs = $derived<KeyValuePair[]>(parseHeadersToArray(headers));
+
+	const AUTHORIZATION_HEADER = 'Authorization';
+	const BEARER_PREFIX = 'Bearer ';
+
+	// Heuristic: this dedicated UI only owns Authorization headers that already
+	// carry a Bearer scheme. Anything else (e.g. Basic, raw tokens) stays in the
+	// KV section so the user can still edit those values verbatim.
+	const matchesAuthorizationKey = (key: string): boolean =>
+		key.trim().toLowerCase() === AUTHORIZATION_HEADER.toLowerCase();
+
+	const isBearerScheme = (value: string): boolean =>
+		value.trim().toLowerCase().startsWith(BEARER_PREFIX.toLowerCase());
+
+	const ownedByBearerUi = (p: KeyValuePair): boolean =>
+		matchesAuthorizationKey(p.key) && isBearerScheme(p.value);
+
+	let hasAuthorization = $derived(headerPairs.some(ownedByBearerUi));
+
+	let wantsAuthorization = $state(false);
+
+	let showAuthorization = $derived(hasAuthorization || wantsAuthorization);
+
+	let urlInput: HTMLInputElement | null = $state(null);
+	let bearerInput: HTMLInputElement | null = $state(null);
+
+	$effect(() => {
+		urlInput?.focus();
+	});
+
+	$effect(() => {
+		if (wantsAuthorization && bearerInput) {
+			bearerInput.focus();
+		}
+	});
+
+	let bearerToken = $derived.by(() => {
+		const auth = headerPairs.find(ownedByBearerUi);
+		if (!auth) return '';
+		return auth.value.trim().slice(BEARER_PREFIX.length).trim();
+	});
+
+	$effect(() => {
+		if (!headers.trim()) {
+			wantsAuthorization = false;
+		}
+	});
+
+	function updateHeaderPairs(newPairs: KeyValuePair[]) {
+		headerPairs = newPairs;
+		onHeadersChange(serializeHeaders(newPairs));
+	}
+
+	// The dedicated UI owns the Authorization slot end-to-end when the user
+	// engages it: any prior Authorization row (Bearer or otherwise) is replaced
+	// by exactly one { Authorization: "Bearer <token>" } entry. JSON's last-key
+	// behavior would otherwise pick one arbitrarily, so we strip first.
+	function updateBearerToken(token: string) {
+		const filtered = headerPairs.filter((p) => !matchesAuthorizationKey(p.key));
+
+		const trimmed = token.trim();
+
+		if (trimmed) {
+			filtered.push({ key: AUTHORIZATION_HEADER, value: `${BEARER_PREFIX}${trimmed}` });
+		}
+
+		updateHeaderPairs(filtered);
+	}
+
+	function setUseAuthorization(checked: boolean) {
+		wantsAuthorization = checked;
+
+		if (!checked) {
+			// Only drop the entry this UI owns; a non-Bearer Authorization row
+			// authored in the KV section must survive a toggle off untouched.
+			const filtered = headerPairs.filter((p) => !ownedByBearerUi(p));
+			updateHeaderPairs(filtered);
+		}
+	}
+</script>
+
+<div class="grid gap-2">
+	<div class="mb-4">
+		<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' : ''}
+			bind:ref={urlInput}
+		/>
+
+		{#if urlError}
+			<p class="mt-1.5 text-xs text-destructive">{urlError}</p>
+		{/if}
+	</div>
+
+	<label class="flex items-center gap-2 cursor-pointer">
+		<Switch
+			id="use-authorization-{id}"
+			checked={showAuthorization}
+			onCheckedChange={setUseAuthorization}
+		/>
+
+		<span class="text-xs text-muted-foreground">Authorization</span>
+	</label>
+
+	{#if showAuthorization}
+		<div class="relative mt-2">
+			<Input
+				id="bearer-token-{id}"
+				type="password"
+				autocomplete="off"
+				placeholder="Paste token here"
+				value={bearerToken}
+				oninput={(e) => updateBearerToken(e.currentTarget.value)}
+				class="pl-16"
+				bind:ref={bearerInput}
+			/>
+
+			<span
+				class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-sm font-medium text-foreground"
+			>
+				Bearer
+			</span>
+		</div>
+	{/if}
+
+	<KeyValuePairs
+		class="mt-3"
+		pairs={headerPairs.filter((p) => !ownedByBearerUi(p))}
+		onPairsChange={(pairs) => {
+			const auth = headerPairs.find(ownedByBearerUi);
+			updateHeaderPairs(auth ? [...pairs, auth] : pairs);
+		}}
+		keyPlaceholder="Header name"
+		valuePlaceholder="Value"
+		addButtonLabel="Add"
+		emptyMessage="No custom headers configured."
+		sectionLabel="Custom Headers"
+		sectionLabelOptional
+	/>
+
+	{#if !isWebSocket && onUseProxyChange}
+		<label
+			class={[
+				'mt-3 flex items-start gap-2',
+				mcpStore.isProxyAvailable && 'cursor-pointer',
+				!mcpStore.isProxyAvailable && 'opacity-80'
+			]}
+		>
+			<Switch
+				class="mt-1"
+				id="use-proxy-{id}"
+				checked={useProxy}
+				disabled={!mcpStore.isProxyAvailable}
+				onCheckedChange={(checked) => onUseProxyChange?.(checked)}
+			/>
+
+			<span>
+				<span class="text-xs text-muted-foreground">Use llama-server proxy</span>
+
+				<br />
+
+				{#if !mcpStore.isProxyAvailable}
+					<span class="inline-flex gap-0.75 text-xs text-muted-foreground/60"
+						>(Run <pre>llama-server</pre>
+						with
+						<pre>{CLI_FLAGS.MCP_PROXY}</pre>
+						flag)</span
+					>
+				{/if}
+			</span>
+		</label>
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerIdentity.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerIdentity.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..3f128e02c967aec3dde0de76b2de1eeb7e6c70e6
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerIdentity.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { ExternalLink } from '@lucide/svelte';
+	import { Badge } from '$lib/components/ui/badge';
+	import { McpLogo } from '$lib/components/app/mcp';
+	import { TruncatedText } from '$lib/components/app/misc';
+	import { sanitizeExternalUrl } from '$lib/utils';
+	import type { MCPServerInfo } from '$lib/types';
+
+	interface Props {
+		displayName?: string;
+		faviconUrl?: string | null;
+		serverInfo?: MCPServerInfo;
+		iconClass?: string;
+		iconRounded?: string;
+		showVersion?: boolean;
+		showWebsite?: boolean;
+		nameClass?: string;
+	}
+
+	let {
+		displayName,
+		faviconUrl = null,
+		serverInfo,
+		iconClass = 'h-5 w-5',
+		iconRounded = 'rounded-sm',
+		showVersion = true,
+		showWebsite = true,
+		nameClass
+	}: Props = $props();
+
+	let safeWebsiteUrl = $derived(
+		serverInfo?.websiteUrl ? sanitizeExternalUrl(serverInfo.websiteUrl) : null
+	);
+</script>
+
+<span class="flex min-w-0 items-center gap-1.5">
+	{#if faviconUrl}
+		<img src={faviconUrl} alt="" class={['shrink-0 text-foreground', iconRounded, iconClass]} />
+	{:else}
+		<McpLogo class={['shrink-0 text-foreground', iconRounded, iconClass].join(' ')} />
+	{/if}
+
+	<TruncatedText text={displayName ?? ''} class={nameClass ?? ''} />
+
+	{#if showVersion && serverInfo?.version}
+		<Badge variant="secondary" class="h-4 max-w-24 min-w-0 shrink px-1 text-[10px]">
+			<TruncatedText text={`v${serverInfo.version}`} />
+		</Badge>
+	{/if}
+
+	{#if showWebsite && safeWebsiteUrl}
+		<a
+			href={safeWebsiteUrl}
+			target="_blank"
+			rel="noopener noreferrer"
+			class="shrink-0 text-muted-foreground hover:text-foreground"
+			aria-label="Open website"
+			onclick={(e) => e.stopPropagation()}
+		>
+			<ExternalLink class="h-3 w-3" />
+		</a>
+	{/if}
+</span>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerInfo.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/McpServerInfo.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..aecae6e57b0a0a7d264e63dfe44c8b235eb82920
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/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/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3d30bb3b4518f4b7f971b1a84f32cdf835647bd9
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/mcp/index.ts
@@ -0,0 +1,254 @@
+/**
+ *
+ * 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 '../settings/SettingsMcpServers.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';
+
+/**
+ * **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';
+
+/**
+ * **McpServerIdentity** - Server identity display (icon, name, version)
+ *
+ * Reusable headless component for displaying server name, favicon/icon, and version badge.
+ * Accepts all data via props with no store dependencies for predictable rendering.
+ *
+ * **Features:**
+ * - Server favicon/icon with fallback
+ * - Truncated display name with max-width
+ * - Optional version badge (v1.2.3)
+ * - Optional external link to server website
+ *
+ * @example
+ * ```svelte
+ * <McpServerIdentity displayName={name} faviconUrl={iconUrl} serverInfo={info} />
+ * ```
+ */
+export { default as McpServerIdentity } from './McpServerIdentity.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';
+
+/**
+ * **McpResourcesBrowser** - 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 McpResourcesBrowser } from './McpResourcesBrowser/McpResourcesBrowser.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';
+
+/**
+ * **McpResourceTemplateForm** - MCP resource template variable form
+ *
+ * Form for filling in resource template variables with auto-completion
+ * via the Completions API. Shows live URI preview as variables are filled.
+ *
+ * **Features:**
+ * - Template variable input fields
+ * - Completions API integration for variable auto-complete
+ * - Live URI preview as variables are filled
+ * - Read resolved resource action
+ */
+export { default as McpResourceTemplateForm } from './McpResourceTemplateForm.svelte';
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/misc/CodeBlockActions.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/misc/CodeBlockActions.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..fa12d1c6249061d5ae569e70b82f0d4ed5d9d8ba
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/misc/CodeBlockActions.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Eye } from '@lucide/svelte';
+	import { ActionIcon, ActionIconCopyToClipboard } from '$lib/components/app';
+	import { FileTypeText } from '$lib/enums';
+
+	interface Props {
+		code: string;
+		language: string;
+		disabled?: boolean;
+		onPreview?: (code: string, language: string) => void;
+	}
+
+	let { code, language, disabled = false, onPreview }: Props = $props();
+
+	const showPreview = $derived(language?.toLowerCase() === FileTypeText.HTML);
+</script>
+
+<div class="code-block-actions">
+	<ActionIconCopyToClipboard
+		text={code}
+		canCopy={!disabled}
+		ariaLabel={disabled ? 'Code incomplete' : 'Copy code'}
+	/>
+
+	{#if showPreview}
+		<ActionIcon
+			icon={Eye}
+			tooltip={disabled ? 'Code incomplete' : 'Preview code'}
+			{disabled}
+			onclick={() => onPreview!(code, language)}
+		/>
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/misc/ConversationSelection.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/misc/ConversationSelection.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..db14fd631e3193db0b04b854b49cb2a9bd11db6d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/misc/ConversationSelection.svelte
@@ -0,0 +1,194 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import SearchInput from '$lib/components/app/forms/SearchInput.svelte';
+	import { ScrollArea } from '$lib/components/ui/scroll-area';
+	import { SvelteSet } from 'svelte/reactivity';
+
+	interface Props {
+		conversations: DatabaseConversation[];
+		messageCountMap?: Map<string, number>;
+		mode: 'export' | 'import';
+		onCancel: () => void;
+		onConfirm: (selectedConversations: DatabaseConversation[]) => void;
+	}
+
+	let { conversations, messageCountMap = new Map(), mode, onCancel, onConfirm }: Props = $props();
+
+	let searchQuery = $state('');
+	let selectedIds = $state.raw<SvelteSet<string>>(getInitialSelectedIds());
+	let lastClickedId = $state<string | null>(null);
+
+	function getInitialSelectedIds(): SvelteSet<string> {
+		return new SvelteSet(conversations.map((c) => c.id));
+	}
+
+	let filteredConversations = $derived(
+		conversations.filter((conv) => {
+			const name = conv.name || 'Untitled conversation';
+			return name.toLowerCase().includes(searchQuery.toLowerCase());
+		})
+	);
+
+	let allSelected = $derived(
+		filteredConversations.length > 0 &&
+			filteredConversations.every((conv) => selectedIds.has(conv.id))
+	);
+
+	let someSelected = $derived(
+		filteredConversations.some((conv) => selectedIds.has(conv.id)) && !allSelected
+	);
+
+	function toggleConversation(id: string, shiftKey: boolean = false) {
+		const newSet = new SvelteSet(selectedIds);
+
+		if (shiftKey && lastClickedId !== null) {
+			const lastIndex = filteredConversations.findIndex((c) => c.id === lastClickedId);
+			const currentIndex = filteredConversations.findIndex((c) => c.id === id);
+
+			if (lastIndex !== -1 && currentIndex !== -1) {
+				const start = Math.min(lastIndex, currentIndex);
+				const end = Math.max(lastIndex, currentIndex);
+
+				const shouldSelect = !newSet.has(id);
+
+				for (let i = start; i <= end; i++) {
+					if (shouldSelect) {
+						newSet.add(filteredConversations[i].id);
+					} else {
+						newSet.delete(filteredConversations[i].id);
+					}
+				}
+
+				selectedIds = newSet;
+				return;
+			}
+		}
+
+		if (newSet.has(id)) {
+			newSet.delete(id);
+		} else {
+			newSet.add(id);
+		}
+
+		selectedIds = newSet;
+		lastClickedId = id;
+	}
+
+	function toggleAll() {
+		if (allSelected) {
+			const newSet = new SvelteSet(selectedIds);
+
+			filteredConversations.forEach((conv) => newSet.delete(conv.id));
+			selectedIds = newSet;
+		} else {
+			const newSet = new SvelteSet(selectedIds);
+
+			filteredConversations.forEach((conv) => newSet.add(conv.id));
+			selectedIds = newSet;
+		}
+	}
+
+	function handleConfirm() {
+		const selected = conversations.filter((conv) => selectedIds.has(conv.id));
+		onConfirm(selected);
+	}
+
+	function handleCancel() {
+		selectedIds = getInitialSelectedIds();
+		searchQuery = '';
+		lastClickedId = null;
+
+		onCancel();
+	}
+
+	export function reset() {
+		selectedIds = getInitialSelectedIds();
+		searchQuery = '';
+		lastClickedId = null;
+	}
+</script>
+
+<div class="space-y-4">
+	<SearchInput bind:value={searchQuery} placeholder="Search conversations..." />
+
+	<div class="flex items-center justify-between text-sm text-muted-foreground">
+		<span>
+			{selectedIds.size} of {conversations.length} selected
+			{#if searchQuery}
+				({filteredConversations.length} shown)
+			{/if}
+		</span>
+	</div>
+
+	<div class="overflow-hidden rounded-md border">
+		<ScrollArea class="h-[400px]">
+			<table class="w-full">
+				<thead class="sticky top-0 z-10 bg-muted">
+					<tr class="border-b">
+						<th class="w-12 p-3 text-left">
+							<Checkbox
+								checked={allSelected}
+								indeterminate={someSelected}
+								onCheckedChange={toggleAll}
+							/>
+						</th>
+
+						<th class="p-3 text-left text-sm font-medium">Conversation Name</th>
+
+						<th class="w-32 p-3 text-left text-sm font-medium">Messages</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#if filteredConversations.length === 0}
+						<tr>
+							<td colspan="3" class="p-8 text-center text-sm text-muted-foreground">
+								{#if searchQuery}
+									No conversations found matching "{searchQuery}"
+								{:else}
+									No conversations available
+								{/if}
+							</td>
+						</tr>
+					{:else}
+						{#each filteredConversations as conv (conv.id)}
+							<tr
+								class="cursor-pointer border-b transition-colors hover:bg-muted/50"
+								onclick={(event) => toggleConversation(conv.id, event.shiftKey)}
+							>
+								<td class="p-3">
+									<Checkbox
+										checked={selectedIds.has(conv.id)}
+										onclick={(event) => {
+											event.preventDefault();
+											event.stopPropagation();
+											toggleConversation(conv.id, event.shiftKey);
+										}}
+									/>
+								</td>
+
+								<td class="p-3 text-sm">
+									<div class="max-w-[17rem] truncate" title={conv.name || 'Untitled conversation'}>
+										{conv.name || 'Untitled conversation'}
+									</div>
+								</td>
+
+								<td class="p-3 text-sm text-muted-foreground">
+									{messageCountMap.get(conv.id) ?? 0}
+								</td>
+							</tr>
+						{/each}
+					{/if}
+				</tbody>
+			</table>
+		</ScrollArea>
+	</div>
+
+	<div class="flex justify-end gap-2">
+		<Button variant="outline" onclick={handleCancel}>Cancel</Button>
+
+		<Button onclick={handleConfirm} disabled={selectedIds.size === 0}>
+			{mode === 'export' ? 'Export' : 'Import'} ({selectedIds.size})
+		</Button>
+	</div>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/misc/HorizontalScrollCarousel.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/misc/HorizontalScrollCarousel.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..a04f3956f8a5f5cea1f626a54121c91198360550
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/misc/HorizontalScrollCarousel.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		children?: Snippet;
+		gapSize?: string;
+		onScrollableChange?: (isScrollable: boolean) => void;
+	}
+
+	let { class: className = '', children, gapSize = '3', onScrollableChange }: Props = $props();
+
+	let canScrollLeft = $state(false);
+	let canScrollRight = $state(false);
+	let scrollContainer: HTMLDivElement | undefined = $state();
+
+	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 updateScrollButtons() {
+		if (!scrollContainer) return;
+
+		const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;
+
+		canScrollLeft = scrollLeft > 0;
+		canScrollRight = scrollLeft < scrollWidth - clientWidth - 1;
+
+		const isScrollable = scrollWidth > clientWidth;
+		onScrollableChange?.(isScrollable);
+	}
+
+	export function resetScroll() {
+		if (scrollContainer) {
+			scrollContainer.scrollLeft = 0;
+			setTimeout(() => {
+				updateScrollButtons();
+			}, 0);
+		}
+	}
+
+	$effect(() => {
+		if (!scrollContainer) return;
+
+		const observer = new ResizeObserver(() => updateScrollButtons());
+		observer.observe(scrollContainer);
+
+		return () => observer.disconnect();
+	});
+</script>
+
+<div class="relative {className}">
+	<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-background/25 shadow-md backdrop-blur-xs transition-opacity hover:bg-background/45 disabled:pointer-events-none disabled:opacity-0"
+		onclick={scrollLeft}
+		disabled={!canScrollLeft}
+		aria-label="Scroll left"
+	>
+		<ChevronLeft class="h-4 w-4" />
+	</button>
+
+	<div
+		class="scrollbar-hide flex items-start gap-{gapSize} overflow-x-auto"
+		bind:this={scrollContainer}
+		onscroll={updateScrollButtons}
+	>
+		{@render children?.()}
+	</div>
+
+	<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-background/25 shadow-md backdrop-blur-xs transition-opacity hover:bg-background/45 disabled:pointer-events-none disabled:opacity-0"
+		onclick={scrollRight}
+		disabled={!canScrollRight}
+		aria-label="Scroll right"
+	>
+		<ChevronRight class="h-4 w-4" />
+	</button>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/misc/KeyboardShortcutInfo.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/misc/KeyboardShortcutInfo.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..da55abda0234fa6ece0e600782e4dab962e5b17a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/misc/KeyboardShortcutInfo.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { ArrowBigUp } from '@lucide/svelte';
+
+	interface Props {
+		keys: string[];
+		variant?: 'default' | 'destructive';
+		class?: string;
+	}
+
+	let { keys, variant = 'default', class: className = '' }: Props = $props();
+
+	let baseClasses =
+		'px-1 pointer-events-none inline-flex select-none items-center gap-0.5 font-sans text-md font-medium opacity-0 transition-opacity -my-1';
+	let variantClasses = $derived(
+		variant === 'destructive' ? 'text-destructive' : 'text-muted-foreground'
+	);
+</script>
+
+<kbd class="{baseClasses} {variantClasses} {className}">
+	{#each keys as key, index (index)}
+		{#if key === 'shift'}
+			<ArrowBigUp class="h-1 w-1 {variant === 'destructive' ? 'text-destructive' : ''} -mr-1" />
+		{:else if key === 'cmd'}
+			<span class={variant === 'destructive' ? 'text-destructive' : ''}>⌘</span>
+		{:else}
+			{key.toUpperCase()}
+		{/if}
+
+		{#if index < keys.length - 1}
+			<span> </span>
+		{/if}
+	{/each}
+</kbd>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/misc/Logo.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/misc/Logo.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..ff2b7f2f0723a8d056557dd2d2570d9546626ff8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/misc/Logo.svelte
@@ -0,0 +1,15 @@
+<script>
+	import logoMark from '$lib/assets/logo.svg?raw';
+	let { class: className = '', style = '' } = $props();
+</script>
+
+<div class={className} {style}>
+	{@html logoMark}
+</div>
+
+<style>
+	div :global(svg) {
+		width: var(--size, 1rem);
+		height: var(--size, 1rem);
+	}
+</style>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/misc/TruncatedText.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/misc/TruncatedText.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..a6b7cb483e5be6a195c85df06fcf0dd6c31fd981
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/misc/TruncatedText.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+	import * as Tooltip from '$lib/components/ui/tooltip';
+
+	interface Props {
+		text: string;
+		class?: string;
+		showTooltip?: boolean;
+	}
+
+	let { text, class: className = '', showTooltip = true }: Props = $props();
+
+	let textElement: HTMLSpanElement | undefined = $state();
+	let isTruncated = $state(false);
+
+	function checkTruncation() {
+		if (textElement) {
+			isTruncated = textElement.scrollWidth > textElement.clientWidth;
+		}
+	}
+
+	$effect(() => {
+		if (textElement) {
+			checkTruncation();
+
+			const observer = new ResizeObserver(checkTruncation);
+			observer.observe(textElement);
+
+			return () => observer.disconnect();
+		}
+	});
+</script>
+
+{#if isTruncated && showTooltip}
+	<Tooltip.Root>
+		<Tooltip.Trigger class="{className} min-w-0">
+			<span bind:this={textElement} class="block truncate">
+				{text}
+			</span>
+		</Tooltip.Trigger>
+
+		<Tooltip.Content class="z-[9999]">
+			<p>{text}</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+{:else}
+	<span bind:this={textElement} class="{className} block min-w-0 truncate">
+		{text}
+	</span>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/misc/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/misc/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b550ae66a53cf90735c31c63b4c5b3d42596cd00
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/misc/index.ts
@@ -0,0 +1,61 @@
+/**
+ *
+ * MISC
+ *
+ * Miscellaneous utility components.
+ *
+ */
+
+/**
+ * **ConversationSelection** - Multi-select conversation picker
+ *
+ * List of conversations with checkboxes for multi-selection.
+ * Used in import/export dialogs for selecting conversations.
+ *
+ * **Features:**
+ * - Search/filter conversations by name
+ * - Select all / deselect all controls
+ * - Shift-click for range selection
+ * - Message count display per conversation
+ * - Mode-specific UI (export vs import)
+ */
+export { default as ConversationSelection } from './ConversationSelection.svelte';
+
+/**
+ * Horizontal scrollable carousel with navigation arrows.
+ * Used for displaying items in a horizontally scrollable container
+ * with left/right navigation buttons that appear on hover.
+ */
+export { default as HorizontalScrollCarousel } from './HorizontalScrollCarousel.svelte';
+
+/**
+ * **TruncatedText** - Text with ellipsis and tooltip
+ *
+ * Displays text with automatic truncation and full content in tooltip.
+ * Useful for long names or paths in constrained spaces.
+ */
+export { default as TruncatedText } from './TruncatedText.svelte';
+
+/**
+ * **KeyboardShortcutInfo** - Keyboard shortcut hint display
+ *
+ * Displays keyboard shortcut hints (e.g., "⌘ + Enter").
+ * Supports special keys like shift, cmd, and custom text.
+ */
+export { default as KeyboardShortcutInfo } from './KeyboardShortcutInfo.svelte';
+
+/**
+ * **CodeBlockActions** - Actions bar for code blocks (copy, preview)
+ *
+ * Displays copy-to-clipboard and preview buttons for code blocks.
+ * Preview button is shown only for HTML code blocks.
+ */
+export { default as CodeBlockActions } from './CodeBlockActions.svelte';
+
+/**
+ * **Logo** - Application brand mark
+ *
+ * Inline SVG of the application logo. Accepts styling via the standard
+ * `class` and `style` props and inherits color via `currentColor`.
+ */
+export { default as Logo } from './Logo.svelte';
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelBadge.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelBadge.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..b840687d4ef059b0c25abc96ebae32c23f2ccd79
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelBadge.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { Package } from '@lucide/svelte';
+	import { BadgeInfo, ActionIconCopyToClipboard } from '$lib/components/app';
+	import ModelId from './ModelId.svelte';
+	import { modelsStore } from '$lib/stores/models.svelte';
+	import { serverStore } from '$lib/stores/server.svelte';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+
+	interface Props {
+		class?: string;
+		model?: string;
+		onclick?: () => void;
+		showCopyIcon?: boolean;
+		showTooltip?: boolean;
+	}
+
+	let {
+		class: className = '',
+		model: modelProp,
+		onclick,
+		showCopyIcon = false,
+		showTooltip = false
+	}: Props = $props();
+
+	let model = $derived(modelProp || modelsStore.singleModelName);
+	let isModelMode = $derived(serverStore.isModelMode);
+	let shouldShow = $derived(model && (modelProp !== undefined || isModelMode));
+</script>
+
+{#snippet badgeContent(triggerProps?: Record<string, unknown>)}
+	<BadgeInfo {...triggerProps ?? {}} class={className} {onclick}>
+		{#snippet icon()}
+			<Package class="h-3 w-3" />
+		{/snippet}
+
+		{#if model}
+			<ModelId modelId={model} />
+		{/if}
+
+		{#if showCopyIcon}
+			<ActionIconCopyToClipboard text={model || ''} ariaLabel="Copy model name" />
+		{/if}
+	</BadgeInfo>
+{/snippet}
+
+{#if shouldShow}
+	{#if showTooltip}
+		<Tooltip.Root>
+			<Tooltip.Trigger>
+				<!-- prevent another nested button element -->
+				{#snippet child({ props })}
+					{@render badgeContent(props)}
+				{/snippet}
+			</Tooltip.Trigger>
+
+			<Tooltip.Content>
+				{onclick ? 'Click for model details' : model}
+			</Tooltip.Content>
+		</Tooltip.Root>
+	{:else}
+		{@render badgeContent()}
+	{/if}
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelId.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelId.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..f566b55ee88b6db7941501fba336adefbfee1679
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelId.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { ModelsService } from '$lib/services/models.service';
+	import { config } from '$lib/stores/settings.svelte';
+	import { TruncatedText } from '$lib/components/app';
+
+	interface Props {
+		modelId: string;
+		hideOrgName?: boolean;
+		showRaw?: boolean;
+		hideQuantization?: boolean;
+		hideTags?: boolean;
+		aliases?: string[];
+		tags?: string[];
+		class?: string;
+	}
+
+	let {
+		modelId,
+		hideOrgName = false,
+		showRaw = undefined,
+		hideQuantization,
+		hideTags,
+		aliases,
+		tags,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	const badgeClass =
+		'inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap rounded-md border border-border/50 px-1 py-0 text-[10px] font-mono bg-foreground/15 dark:bg-foreground/10 text-foreground [a&]:hover:bg-foreground/25';
+	const tagBadgeClass =
+		'inline-flex w-fit shrink-0 items-center justify-center whitespace-nowrap rounded-md border border-border/50 px-1 py-0 text-[10px] font-mono text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground';
+
+	let parsed = $derived(ModelsService.parseModelId(modelId));
+	let resolvedShowRaw = $derived(showRaw ?? (config().showRawModelNames as boolean) ?? false);
+	let resolvedHideQuantization = $derived(hideQuantization ?? !config().showModelQuantization);
+	let resolvedHideTags = $derived(hideTags ?? !config().showModelTags);
+
+	let uniqueAliases = $derived([...new Set(aliases ?? [])]);
+	let uniqueTags = $derived([...new Set([...(parsed.tags ?? []), ...(tags ?? [])])]);
+
+	let primaryAlias = $derived(uniqueAliases.length === 1 ? uniqueAliases[0] : null);
+	let displayName = $derived(primaryAlias ?? parsed.modelName ?? modelId);
+</script>
+
+{#if resolvedShowRaw}
+	<TruncatedText class="font-medium {className}" showTooltip={false} text={modelId} {...rest} />
+{:else}
+	<span class="flex min-w-0 flex-wrap items-center gap-1 {className}" {...rest}>
+		<span class="min-w-0 truncate font-medium">
+			{#if !hideOrgName && parsed.orgName}{parsed.orgName}/{/if}{displayName}
+		</span>
+
+		{#if parsed.params}
+			<span class={badgeClass}>
+				{parsed.params}{parsed.activatedParams ? `-${parsed.activatedParams}` : ''}
+			</span>
+		{/if}
+
+		{#if parsed.quantization && !resolvedHideQuantization}
+			<span class={badgeClass}>
+				{parsed.quantization}
+			</span>
+		{/if}
+
+		{#if primaryAlias}
+			{#if primaryAlias !== parsed.modelName}
+				<span class={badgeClass}>{parsed.modelName ?? modelId}</span>
+			{/if}
+		{:else if uniqueAliases.length > 1}
+			{#each uniqueAliases as alias (alias)}
+				<span class={badgeClass}>{alias}</span>
+			{/each}
+		{/if}
+
+		{#if uniqueTags.length > 0 && !resolvedHideTags}
+			{#each uniqueTags as tag (tag)}
+				<span class={tagBadgeClass}>{tag}</span>
+			{/each}
+		{/if}
+	</span>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelLoadHighlight.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelLoadHighlight.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..fa9a02108a0be12d5c7de44af46a9c010cf8042a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelLoadHighlight.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	let { percent }: { percent: number } = $props();
+</script>
+
+<!-- thin determinate load bar pinned to the bottom edge, pulsing while it fills -->
+<div class="pointer-events-none absolute inset-x-0 bottom-0 h-0.5 overflow-hidden rounded-b-sm">
+	<div
+		class="h-full animate-pulse bg-primary transition-[width] duration-200 ease-out"
+		style="width: {percent}%"
+	></div>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..720963a8db9dc45205a2270ae19e4fe1f8de6dc8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte
@@ -0,0 +1,312 @@
+<script lang="ts">
+	import { ChevronDown, Loader2, Package } from '@lucide/svelte';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { KeyboardKey, ServerModelStatus } from '$lib/enums';
+	import { useModelsSelector } from '$lib/hooks/use-models-selector.svelte';
+	import { modelsStore, routerModels } from '$lib/stores/models.svelte';
+	import { modelLoadFraction } from '$lib/utils';
+	import {
+		DialogModelInformation,
+		DropdownMenuSearchable,
+		ModelId,
+		ModelsSelectorList,
+		ModelsSelectorOption
+	} from '$lib/components/app';
+	import ModelLoadHighlight from './ModelLoadHighlight.svelte';
+	import type { ModelItem } from './utils';
+
+	interface Props {
+		class?: string;
+		currentModel?: string | null;
+		disabled?: boolean;
+		forceForegroundText?: boolean;
+		onModelChange?: (modelId: string, modelName: string) => Promise<boolean> | boolean | void;
+		useGlobalSelection?: boolean;
+	}
+
+	let {
+		class: className = '',
+		currentModel = null,
+		disabled = false,
+		forceForegroundText = false,
+		onModelChange,
+		useGlobalSelection = false
+	}: Props = $props();
+
+	let isOpen = $state(false);
+	let highlightedIndex = $state<number>(-1);
+
+	const ms = useModelsSelector({
+		currentModel: () => currentModel,
+		useGlobalSelection: () => useGlobalSelection,
+		onModelChange: () => onModelChange,
+		onOpenChange: (open) => {
+			isOpen = open;
+			highlightedIndex = -1;
+		}
+	});
+
+	$effect(() => {
+		void ms.searchTerm;
+		highlightedIndex = -1;
+	});
+
+	export function open() {
+		ms.handleOpenChange(true);
+	}
+
+	function handleSearchKeyDown(event: KeyboardEvent) {
+		if (event.isComposing) return;
+
+		if (event.key === KeyboardKey.ARROW_DOWN) {
+			event.preventDefault();
+
+			if (ms.filteredOptions.length === 0) return;
+
+			if (highlightedIndex === -1 || highlightedIndex === ms.filteredOptions.length - 1) {
+				highlightedIndex = 0;
+			} else {
+				highlightedIndex += 1;
+			}
+		} else if (event.key === KeyboardKey.ARROW_UP) {
+			event.preventDefault();
+
+			if (ms.filteredOptions.length === 0) return;
+
+			if (highlightedIndex === -1 || highlightedIndex === 0) {
+				highlightedIndex = ms.filteredOptions.length - 1;
+			} else {
+				highlightedIndex -= 1;
+			}
+		} else if (event.key === KeyboardKey.ENTER) {
+			event.preventDefault();
+
+			if (highlightedIndex >= 0 && highlightedIndex < ms.filteredOptions.length) {
+				const option = ms.filteredOptions[highlightedIndex];
+
+				ms.handleSelect(option.id);
+			} else if (ms.filteredOptions.length > 0) {
+				highlightedIndex = 0;
+			}
+		}
+	}
+</script>
+
+<div class={['relative inline-flex flex-col items-end gap-1', className]}>
+	{#if ms.loading && ms.options.length === 0 && ms.isRouter}
+		<div class="flex items-center gap-2 text-xs text-muted-foreground">
+			<Loader2 class="h-3.5 w-3.5 animate-spin" />
+
+			Loading models…
+		</div>
+	{:else if ms.options.length === 0 && ms.isRouter}
+		{#if currentModel}
+			<span
+				class={[
+					'inline-flex items-center gap-1.5 rounded-sm bg-muted-foreground/10 px-1.5 py-1 text-xs text-muted-foreground',
+					className
+				]}
+				style="max-width: min(calc(100cqw - 10rem), 20rem)"
+			>
+				<Package class="h-3.5 w-3.5 shrink-0" />
+			</span>
+		{:else}
+			<p class="text-xs text-muted-foreground">No models available.</p>
+		{/if}
+	{:else}
+		{@const selectedOption = ms.getDisplayOption()}
+		{@const triggerModel = selectedOption?.model}
+		{@const triggerStatus = triggerModel
+			? routerModels().find((m) => m.id === triggerModel)?.status?.value
+			: undefined}
+		{@const triggerLoading =
+			!!triggerModel &&
+			(triggerStatus === ServerModelStatus.LOADING ||
+				modelsStore.isModelOperationInProgress(triggerModel))}
+		{@const triggerLoadPercent = triggerLoading
+			? Math.round(modelLoadFraction(modelsStore.getLoadProgress(triggerModel)) * 100)
+			: 0}
+
+		{#if ms.isRouter}
+			<DropdownMenu.Root bind:open={isOpen} onOpenChange={ms.handleOpenChange}>
+				<Tooltip.Root>
+					<Tooltip.Trigger>
+						<!-- prevent another nested button element -->
+						{#snippet child({ props })}
+							<DropdownMenu.Trigger
+								{...props}
+								class={[
+									`relative inline-grid cursor-pointer grid-cols-[1fr_auto_1fr] items-center gap-1.5 rounded-sm bg-background px-1.5 py-1 text-xs shadow-sm transition hover:bg-muted-foreground/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-muted-foreground/15 dark:text-secondary-foreground`,
+									!ms.isCurrentModelInCache
+										? 'bg-red-400/10 !text-red-400 hover:bg-red-400/20 hover:text-red-400'
+										: forceForegroundText
+											? 'text-foreground'
+											: ms.isHighlightedCurrentModelActive
+												? 'text-foreground'
+												: 'text-foreground',
+									isOpen && 'text-foreground',
+									'max-w-[min(calc(100vw-4rem) md:max-w-[min(calc(100cqw-9rem),25rem)]'
+								]}
+								disabled={disabled || ms.updating}
+							>
+								<Package class="h-3.5 w-3.5 shrink-0" />
+
+								{#if selectedOption}
+									<ModelId
+										modelId={selectedOption.model}
+										class="min-w-0 overflow-hidden"
+										hideOrgName={false}
+										hideQuantization
+									/>
+								{:else}
+									<span class="min-w-0 font-medium">Select model</span>
+								{/if}
+
+								{#if ms.updating || ms.isLoadingModel}
+									<Loader2 class="h-3 w-3.5 shrink-0 animate-spin" />
+								{:else}
+									<ChevronDown class="h-3 w-3.5 shrink-0" />
+								{/if}
+
+								{#if triggerLoading}
+									<ModelLoadHighlight percent={triggerLoadPercent} />
+								{/if}
+							</DropdownMenu.Trigger>
+						{/snippet}
+					</Tooltip.Trigger>
+
+					{#if selectedOption}
+						<Tooltip.Content>
+							<p class="font-mono">{selectedOption.model}</p>
+						</Tooltip.Content>
+					{/if}
+				</Tooltip.Root>
+
+				<DropdownMenu.Content
+					align="end"
+					class="w-full max-w-[100vw] pt-0 sm:w-max sm:max-w-[calc(100vw-2rem)]"
+				>
+					<DropdownMenuSearchable
+						searchValue={ms.searchTerm}
+						onSearchChange={(v) => ms.setSearchTerm(v)}
+						placeholder="Search models..."
+						onSearchKeyDown={handleSearchKeyDown}
+						emptyMessage="No models found."
+						isEmpty={ms.filteredOptions.length === 0 && ms.isCurrentModelInCache}
+					>
+						<div class="models-list">
+							{#if !ms.isCurrentModelInCache && currentModel}
+								<!-- Show unavailable model as first option (disabled) -->
+								<button
+									type="button"
+									class="flex w-full cursor-not-allowed items-center bg-red-400/10 p-2 text-left text-sm text-red-400"
+									role="option"
+									aria-selected="true"
+									aria-disabled="true"
+									disabled
+								>
+									<ModelId modelId={currentModel} class="flex-1" hideQuantization />
+
+									<span class="ml-2 text-xs whitespace-nowrap opacity-70">(not available)</span>
+								</button>
+							{/if}
+
+							{#if ms.filteredOptions.length === 0}
+								<p class="px-4 py-3 text-sm text-muted-foreground">No models found.</p>
+							{/if}
+
+							{#snippet modelOption(item: ModelItem, hideOrgName: boolean)}
+								{@const { option, flatIndex } = item}
+								{@const isSelected = currentModel === option.model || ms.activeId === option.id}
+								{@const isHighlighted = flatIndex === highlightedIndex}
+								{@const isFav = ms.isFavorite(option.model)}
+
+								<ModelsSelectorOption
+									{option}
+									{isSelected}
+									{isHighlighted}
+									{isFav}
+									{hideOrgName}
+									onSelect={ms.handleSelect}
+									onInfoClick={ms.handleInfoClick}
+									onMouseEnter={() => (highlightedIndex = flatIndex)}
+									onKeyDown={(event) => {
+										if (event.key === KeyboardKey.ENTER || event.key === KeyboardKey.SPACE) {
+											event.preventDefault();
+											ms.handleSelect(option.id);
+										}
+									}}
+								/>
+							{/snippet}
+
+							<ModelsSelectorList
+								groups={ms.groupedFilteredOptions}
+								{currentModel}
+								activeId={ms.activeId}
+								sectionHeaderClass="my-1.5 px-2 py-2 text-[13px] font-semibold text-muted-foreground/70 select-none"
+								onSelect={ms.handleSelect}
+								onInfoClick={ms.handleInfoClick}
+								renderOption={modelOption}
+							/>
+						</div>
+					</DropdownMenuSearchable>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		{:else}
+			<Tooltip.Root>
+				<Tooltip.Trigger>
+					<!-- prevent another nested button element -->
+					{#snippet child({ props })}
+						<button
+							{...props}
+							class={[
+								`inline-flex cursor-pointer items-center gap-1.5 rounded-sm bg-background px-1.5 py-1 text-xs shadow-sm transition hover:bg-muted-foreground/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-muted-foreground/15 dark:text-secondary-foreground`,
+								!ms.isCurrentModelInCache
+									? 'bg-red-400/10 !text-red-400 hover:bg-red-400/20 hover:text-red-400'
+									: forceForegroundText
+										? 'text-foreground'
+										: ms.isHighlightedCurrentModelActive
+											? 'text-foreground'
+											: 'text-foreground',
+								isOpen && 'text-foreground'
+							]}
+							style="max-width: min(calc(100cqw - 6.5rem), 32rem)"
+							onclick={() => ms.handleOpenChange(true)}
+							disabled={disabled || ms.updating}
+						>
+							<Package class="h-3.5 w-3.5 shrink-0" />
+
+							{#if selectedOption}
+								<ModelId
+									modelId={selectedOption.model}
+									class="min-w-0 overflow-hidden"
+									hideOrgName={false}
+									hideQuantization
+								/>
+							{/if}
+
+							{#if ms.updating}
+								<Loader2 class="h-3 w-3.5 shrink-0 animate-spin" />
+							{/if}
+						</button>
+					{/snippet}
+				</Tooltip.Trigger>
+
+				{#if selectedOption}
+					<Tooltip.Content>
+						<p class="font-mono">{selectedOption.model}</p>
+					</Tooltip.Content>
+				{/if}
+			</Tooltip.Root>
+		{/if}
+	{/if}
+</div>
+
+{#if ms.showModelDialog}
+	<DialogModelInformation
+		open={ms.showModelDialog}
+		onOpenChange={(v) => ms.setShowModelDialog(v)}
+		modelId={ms.infoModelId}
+	/>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelsSelectorList.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelsSelectorList.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..61a4cf0f662ece97c6af44bb197ff0f5936f58a9
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelsSelectorList.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { modelsStore } from '$lib/stores/models.svelte';
+	import { ModelsSelectorOption } from '$lib/components/app';
+	import type { GroupedModelOptions, ModelItem } from './utils';
+
+	interface Props {
+		groups: GroupedModelOptions;
+		currentModel: string | null;
+		activeId: string | null;
+		sectionHeaderClass?: string;
+		orgHeaderClass?: string;
+		onSelect: (modelId: string) => void;
+		onInfoClick: (modelName: string) => void;
+		renderOption?: import('svelte').Snippet<[ModelItem, boolean]>;
+	}
+
+	let {
+		groups,
+		currentModel,
+		activeId,
+		sectionHeaderClass = 'my-1 px-2 py-2 text-[13px] font-semibold text-muted-foreground/70 select-none',
+		orgHeaderClass = 'px-2 py-2 text-[11px] font-semibold text-muted-foreground/50 select-none [&:not(:first-child)]:mt-1',
+		onSelect,
+		onInfoClick,
+		renderOption
+	}: Props = $props();
+	let render = $derived(renderOption ?? defaultOption);
+</script>
+
+{#snippet defaultOption(item: ModelItem, hideOrgName: boolean)}
+	{@const { option } = item}
+	{@const isSelected = currentModel === option.model || activeId === option.id}
+	{@const isFav = modelsStore.favoriteModelIds.has(option.model)}
+
+	<ModelsSelectorOption
+		{option}
+		{isSelected}
+		isHighlighted={false}
+		{isFav}
+		{hideOrgName}
+		{onSelect}
+		{onInfoClick}
+		onMouseEnter={() => {}}
+		onKeyDown={() => {}}
+	/>
+{/snippet}
+
+{#if groups.loaded.length > 0}
+	<p class={sectionHeaderClass}>Loaded models</p>
+	{#each groups.loaded as item (`loaded-${item.option.id}`)}
+		{@render render(item, false)}
+	{/each}
+{/if}
+
+{#if groups.favorites.length > 0}
+	<p class={sectionHeaderClass}>Favorite models</p>
+	{#each groups.favorites as item (`fav-${item.option.id}`)}
+		{@render render(item, true)}
+	{/each}
+{/if}
+
+{#if groups.available.length > 0}
+	<p class={sectionHeaderClass}>Available models</p>
+	{#each groups.available as group (group.orgName)}
+		{#if group.orgName}
+			<p class={orgHeaderClass}>{group.orgName}</p>
+		{/if}
+		{#each group.items as item (item.option.id)}
+			{@render render(item, true)}
+		{/each}
+	{/each}
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..981111e20157d600249826653219a16e54d10f0a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
@@ -0,0 +1,202 @@
+<script lang="ts">
+	import {
+		CircleAlert,
+		Heart,
+		HeartOff,
+		Info,
+		Loader2,
+		Power,
+		PowerOff,
+		RotateCw
+	} from '@lucide/svelte';
+	import { ActionIcon, ModelId } from '$lib/components/app';
+	import ModelLoadHighlight from './ModelLoadHighlight.svelte';
+	import type { ModelOption } from '$lib/types/models';
+	import { ServerModelStatus } from '$lib/enums';
+	import { modelsStore, routerModels } from '$lib/stores/models.svelte';
+	import { modelLoadFraction, modelLoadProgressText } from '$lib/utils';
+
+	interface Props {
+		option: ModelOption;
+		isSelected: boolean;
+		isHighlighted: boolean;
+		isFav: boolean;
+		hideOrgName?: boolean;
+		onSelect: (modelId: string) => void;
+		onMouseEnter: () => void;
+		onKeyDown: (e: KeyboardEvent) => void;
+		onInfoClick?: (modelName: string) => void;
+	}
+
+	let {
+		option,
+		isSelected,
+		isHighlighted,
+		isFav,
+		hideOrgName = false,
+		onSelect,
+		onMouseEnter,
+		onKeyDown,
+		onInfoClick
+	}: Props = $props();
+
+	let currentRouterModels = $derived(routerModels());
+	let serverStatus = $derived.by(() => {
+		const model = currentRouterModels.find((m) => m.id === option.model);
+		return (model?.status?.value as ServerModelStatus) ?? null;
+	});
+	let isOperationInProgress = $derived(modelsStore.isModelOperationInProgress(option.model));
+	let isFailed = $derived(serverStatus === ServerModelStatus.FAILED);
+	let isSleeping = $derived(serverStatus === ServerModelStatus.SLEEPING);
+	let isLoaded = $derived(
+		(serverStatus === ServerModelStatus.LOADED || isSleeping) && !isOperationInProgress
+	);
+	let isLoading = $derived(serverStatus === ServerModelStatus.LOADING || isOperationInProgress);
+
+	let loadProgress = $derived(isLoading ? modelsStore.getLoadProgress(option.model) : null);
+	let loadPercent = $derived(Math.round(modelLoadFraction(loadProgress) * 100));
+	let loadTitle = $derived(modelLoadProgressText(loadProgress));
+</script>
+
+<div
+	class={[
+		'group relative flex w-full items-center gap-2 rounded-sm p-2 text-left text-sm transition focus:outline-none',
+		'cursor-pointer hover:bg-muted focus:bg-muted',
+		(isSelected || isHighlighted) && 'bg-accent text-accent-foreground',
+		!(isSelected || isHighlighted) && 'hover:bg-accent hover:text-accent-foreground',
+		isLoaded ? 'text-popover-foreground' : 'text-muted-foreground'
+	]}
+	role="option"
+	aria-selected={isSelected || isHighlighted}
+	title={loadTitle}
+	tabindex="0"
+	onclick={() => onSelect(option.id)}
+	onmouseenter={onMouseEnter}
+	onkeydown={onKeyDown}
+>
+	<ModelId
+		modelId={option.model}
+		{hideOrgName}
+		aliases={option.aliases}
+		tags={option.tags}
+		class="flex-1"
+	/>
+
+	<div class="flex shrink-0 items-center gap-1">
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<div
+			class="pointer-events-none flex items-center justify-center gap-0.75 pl-2 opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 [@media(pointer:coarse)]:pointer-events-auto [@media(pointer:coarse)]:opacity-100"
+			onclick={(e) => e.stopPropagation()}
+		>
+			{#if isFav}
+				<ActionIcon
+					iconSize="h-2.5 w-2.5"
+					icon={HeartOff}
+					tooltip="Remove from favorites"
+					class="h-3 w-3 hover:text-foreground"
+					onclick={() => modelsStore.toggleFavorite(option.model)}
+				/>
+			{:else}
+				<ActionIcon
+					iconSize="h-2.5 w-2.5"
+					icon={Heart}
+					tooltip="Add to favorites"
+					class="h-3 w-3 hover:text-foreground"
+					onclick={() => modelsStore.toggleFavorite(option.model)}
+				/>
+			{/if}
+
+			<!-- info button: only shown when model is loaded and callback is provided -->
+			{#if isLoaded && onInfoClick}
+				<ActionIcon
+					iconSize="h-2.5 w-2.5"
+					icon={Info}
+					tooltip="Model information"
+					class="h-3 w-3 hover:text-foreground"
+					onclick={() => onInfoClick(option.model)}
+				/>
+			{/if}
+		</div>
+
+		{#if isLoading}
+			<div class="flex w-4 items-center justify-center [@media(pointer:coarse)]:w-5">
+				<Loader2 class="h-4 w-4 animate-spin text-muted-foreground" />
+			</div>
+		{:else if isFailed}
+			<div class="flex w-4 items-center justify-center [@media(pointer:coarse)]:w-auto">
+				<CircleAlert
+					class="h-3.5 w-3.5 text-red-500 group-hover:hidden [@media(pointer:coarse)]:hidden"
+				/>
+
+				<div class="hidden group-hover:flex [@media(pointer:coarse)]:flex">
+					<ActionIcon
+						iconSize="h-2.5 w-2.5"
+						icon={RotateCw}
+						tooltip="Retry loading model"
+						class="h-3 w-3 text-red-500 hover:text-foreground"
+						onclick={() => modelsStore.loadModel(option.model)}
+						stopPropagationOnClick
+					/>
+				</div>
+			</div>
+		{:else if isSleeping}
+			<div class="flex w-4 items-center justify-center [@media(pointer:coarse)]:w-auto">
+				<span
+					class="h-2 w-2 rounded-full bg-orange-400 group-hover:hidden [@media(pointer:coarse)]:hidden"
+				></span>
+
+				<div class="hidden group-hover:flex [@media(pointer:coarse)]:flex">
+					<ActionIcon
+						iconSize="h-2.5 w-2.5"
+						icon={PowerOff}
+						tooltip="Unload model"
+						class="h-3 w-3 text-red-500 hover:text-red-600 [@media(pointer:coarse)]:text-amber-500 [@media(pointer:coarse)]:hover:text-amber-600"
+						onclick={(e) => {
+							e?.stopPropagation();
+							modelsStore.unloadModel(option.model);
+						}}
+					/>
+				</div>
+			</div>
+		{:else if isLoaded}
+			<div class="flex w-4 items-center justify-center [@media(pointer:coarse)]:w-auto">
+				<span
+					class="h-2 w-2 rounded-full bg-green-500 group-hover:hidden [@media(pointer:coarse)]:hidden"
+				></span>
+
+				<div class="hidden group-hover:flex [@media(pointer:coarse)]:flex">
+					<ActionIcon
+						iconSize="h-2.5 w-2.5"
+						icon={PowerOff}
+						tooltip="Unload model"
+						class="h-3 w-3 text-red-500 hover:text-red-600 [@media(pointer:coarse)]:text-green-500 [@media(pointer:coarse)]:hover:text-green-600"
+						onclick={() => modelsStore.unloadModel(option.model)}
+						stopPropagationOnClick
+					/>
+				</div>
+			</div>
+		{:else}
+			<div class="flex w-4 items-center justify-center [@media(pointer:coarse)]:w-auto">
+				<span
+					class="h-2 w-2 rounded-full bg-muted-foreground/50 group-hover:hidden [@media(pointer:coarse)]:hidden"
+				></span>
+
+				<div class="hidden group-hover:flex [@media(pointer:coarse)]:flex">
+					<ActionIcon
+						iconSize="h-2.5 w-2.5"
+						icon={Power}
+						tooltip="Load model"
+						class="h-3 w-3 [@media(pointer:coarse)]:text-muted-foreground"
+						onclick={() => modelsStore.loadModel(option.model)}
+						stopPropagationOnClick
+					/>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	{#if isLoading}
+		<ModelLoadHighlight percent={loadPercent} />
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelsSelectorSheet.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelsSelectorSheet.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..a9e9ea1c8d5d52c8ff032b11b859675dbf89d5d4
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/models/ModelsSelectorSheet.svelte
@@ -0,0 +1,208 @@
+<script lang="ts">
+	import { ChevronDown, Loader2, Package } from '@lucide/svelte';
+	import * as Sheet from '$lib/components/ui/sheet';
+	import { useModelsSelector } from '$lib/hooks/use-models-selector.svelte';
+	import {
+		DialogModelInformation,
+		ModelId,
+		ModelsSelectorList,
+		SearchInput
+	} from '$lib/components/app';
+	import ModelLoadHighlight from './ModelLoadHighlight.svelte';
+	import { ServerModelStatus } from '$lib/enums';
+	import { modelsStore, routerModels } from '$lib/stores/models.svelte';
+	import { modelLoadFraction } from '$lib/utils';
+
+	interface Props {
+		class?: string;
+		currentModel?: string | null;
+		/** Callback when model changes. Return false to keep menu open (e.g., for validation failures) */
+		onModelChange?: (modelId: string, modelName: string) => Promise<boolean> | boolean | void;
+		disabled?: boolean;
+		forceForegroundText?: boolean;
+		/** When true, user's global selection takes priority over currentModel (for form selector) */
+		useGlobalSelection?: boolean;
+	}
+
+	let {
+		class: className = '',
+		currentModel = null,
+		onModelChange,
+		disabled = false,
+		forceForegroundText = false,
+		useGlobalSelection = false
+	}: Props = $props();
+
+	let sheetOpen = $state(false);
+
+	const ms = useModelsSelector({
+		currentModel: () => currentModel,
+		useGlobalSelection: () => useGlobalSelection,
+		onModelChange: () => onModelChange,
+		onOpenChange: (open) => {
+			sheetOpen = open;
+		}
+	});
+
+	export function open() {
+		ms.handleOpenChange(true);
+	}
+
+	function handleSheetOpenChange(open: boolean) {
+		if (!open) {
+			ms.handleOpenChange(false);
+		}
+	}
+</script>
+
+<div class={['relative inline-flex flex-col items-end gap-1', className]}>
+	{#if ms.loading && ms.options.length === 0 && ms.isRouter}
+		<div class="flex items-center gap-2 text-xs text-muted-foreground">
+			<Loader2 class="h-3.5 w-3.5 animate-spin" />
+			Loading models…
+		</div>
+	{:else if ms.options.length === 0 && ms.isRouter}
+		<p class="text-xs text-muted-foreground">No models available.</p>
+	{:else}
+		{@const selectedOption = ms.getDisplayOption()}
+		{@const triggerModel = selectedOption?.model}
+		{@const triggerStatus = triggerModel
+			? routerModels().find((m) => m.id === triggerModel)?.status?.value
+			: undefined}
+		{@const triggerLoading =
+			!!triggerModel &&
+			(triggerStatus === ServerModelStatus.LOADING ||
+				modelsStore.isModelOperationInProgress(triggerModel))}
+		{@const triggerLoadPercent = triggerLoading
+			? Math.round(modelLoadFraction(modelsStore.getLoadProgress(triggerModel)) * 100)
+			: 0}
+
+		{#if ms.isRouter}
+			<button
+				type="button"
+				class={[
+					`relative inline-flex cursor-pointer items-center gap-1.5 rounded-sm bg-background px-1.5 py-1 text-xs shadow-sm transition hover:bg-muted-foreground/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 max-sm:px-3 max-sm:py-2 max-sm:text-sm dark:bg-muted-foreground/15 dark:text-secondary-foreground`,
+					!ms.isCurrentModelInCache
+						? 'bg-red-400/10 !text-red-400 hover:bg-red-400/20 hover:text-red-400'
+						: forceForegroundText
+							? 'text-foreground'
+							: ms.isHighlightedCurrentModelActive
+								? 'text-foreground'
+								: 'text-foreground',
+					sheetOpen && 'text-foreground'
+				]}
+				style="max-width: min(calc(100cqw - 9rem), 20rem)"
+				disabled={disabled || ms.updating}
+				onclick={() => ms.handleOpenChange(true)}
+			>
+				<Package class="h-3.5 w-3.5 shrink-0" />
+
+				{#if !selectedOption}
+					<span class="min-w-0 font-medium">Select model</span>
+				{:else}
+					<ModelId
+						class="text-xs"
+						modelId={selectedOption?.model || ''}
+						hideQuantization
+						hideTags
+						hideOrgName
+					/>
+				{/if}
+
+				{#if ms.updating || ms.isLoadingModel}
+					<Loader2 class="h-3 w-3.5 shrink-0 animate-spin" />
+				{:else}
+					<ChevronDown class="h-3 w-3.5 shrink-0" />
+				{/if}
+
+				{#if triggerLoading}
+					<ModelLoadHighlight percent={triggerLoadPercent} />
+				{/if}
+			</button>
+
+			<Sheet.Root bind:open={sheetOpen} onOpenChange={handleSheetOpenChange}>
+				<Sheet.Content side="bottom" class="max-h-[85vh] gap-1">
+					<Sheet.Header>
+						<Sheet.Title>Select Model</Sheet.Title>
+
+						<Sheet.Description class="sr-only">
+							Choose a model to use for the conversation
+						</Sheet.Description>
+					</Sheet.Header>
+
+					<div class="flex flex-col gap-1 pb-4">
+						<div class="mb-3 px-4">
+							<SearchInput
+								placeholder="Search models..."
+								value={ms.searchTerm}
+								onInput={(v) => ms.setSearchTerm(v)}
+							/>
+						</div>
+
+						<div class="max-h-[60vh] overflow-y-auto px-2">
+							{#if !ms.isCurrentModelInCache && currentModel}
+								<button
+									type="button"
+									class="flex w-full cursor-not-allowed items-center rounded-md bg-red-400/10 px-3 py-2.5 text-left text-sm text-red-400"
+									disabled
+								>
+									<span class="min-w-0 flex-1 truncate">
+										{selectedOption?.name || currentModel}
+									</span>
+									<span class="ml-2 text-xs whitespace-nowrap opacity-70">(not available)</span>
+								</button>
+								<div class="my-1 h-px bg-border"></div>
+							{/if}
+
+							{#if ms.filteredOptions.length === 0}
+								<p class="px-3 py-3 text-center text-sm text-muted-foreground">No models found.</p>
+							{/if}
+
+							<ModelsSelectorList
+								groups={ms.groupedFilteredOptions}
+								{currentModel}
+								activeId={ms.activeId}
+								sectionHeaderClass="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none"
+								orgHeaderClass="px-2 py-2 text-xs font-semibold text-muted-foreground/60 select-none [&:not(:first-child)]:mt-2"
+								onSelect={ms.handleSelect}
+								onInfoClick={ms.handleInfoClick}
+							/>
+						</div>
+					</div>
+				</Sheet.Content>
+			</Sheet.Root>
+		{:else}
+			<button
+				class={[
+					`inline-flex cursor-pointer items-center gap-1.5 rounded-sm bg-background px-1.5 py-1 text-xs shadow-sm transition hover:bg-muted-foreground/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-muted-foreground/15 dark:text-secondary-foreground`,
+					!ms.isCurrentModelInCache
+						? 'bg-red-400/10 !text-red-400 hover:bg-red-400/20 hover:text-red-400'
+						: forceForegroundText
+							? 'text-foreground'
+							: ms.isHighlightedCurrentModelActive
+								? 'text-foreground'
+								: 'text-foreground'
+				]}
+				style="max-width: min(calc(100cqw - 6.5rem), 32rem)"
+				onclick={() => ms.handleOpenChange(true)}
+				disabled={disabled || ms.updating}
+			>
+				<Package class="h-3.5 w-3.5 shrink-0" />
+
+				<ModelId modelId={selectedOption?.model || ''} class="font-medium" hideQuantization />
+
+				{#if ms.updating}
+					<Loader2 class="h-3 w-3.5 shrink-0 animate-spin" />
+				{/if}
+			</button>
+		{/if}
+	{/if}
+</div>
+
+{#if ms.showModelDialog}
+	<DialogModelInformation
+		open={ms.showModelDialog}
+		onOpenChange={(v) => ms.setShowModelDialog(v)}
+		modelId={ms.infoModelId}
+	/>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/models/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/models/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3ac6ecb678b257af12e49c2951704a23169219f8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/models/index.ts
@@ -0,0 +1,111 @@
+/**
+ *
+ * MODELS
+ *
+ * Components for model selection and display. Supports two server modes:
+ * - **Single model mode**: Server runs with one model, selector shows model info
+ * - **Router mode**: Server runs with multiple models, selector enables switching
+ *
+ * Integrates with modelsStore for model data and serverStore for mode detection.
+ *
+ */
+
+/**
+ * **ModelsSelectorDropdown** - Model selection dropdown (desktop)
+ *
+ * Dropdown for selecting AI models with status indicators,
+ * search, and model information display. Adapts UI based on server mode.
+ *
+ * **Architecture:**
+ * - Uses DropdownMenuSearchable for model list
+ * - Integrates with modelsStore for model options and selection
+ * - Detects router vs single mode from serverStore
+ * - Opens DialogModelInformation for model details
+ *
+ * **Features:**
+ * - Searchable model list with keyboard navigation
+ * - Model status indicators (loading/ready/error/updating)
+ * - Model capabilities badges (vision, tools, etc.)
+ * - Current/active model highlighting
+ * - Model information dialog on info button click
+ * - Router mode: shows all available models with status
+ * - Single mode: shows current model name only
+ * - Loading/updating skeleton states
+ * - Global selection support for form integration
+ *
+ * @example
+ * ```svelte
+ * <ModelsSelectorDropdown
+ *   currentModel={conversation.modelId}
+ *   onModelChange={(id, name) => updateModel(id)}
+ *   useGlobalSelection
+ * />
+ * ```
+ */
+export { default as ModelsSelectorDropdown } from './ModelsSelectorDropdown.svelte';
+
+/**
+ * **ModelsSelectorList** - Grouped model options list
+ *
+ * Renders grouped model options (loaded, favorites, available) with section
+ * headers and org subgroups. Shared between ModelsSelectorDropdown and ModelsSelectorSheet
+ * to avoid template duplication.
+ *
+ * Accepts an optional `renderOption` snippet to customize how each option is
+ * rendered (e.g., to add keyboard navigation or highlighting).
+ */
+export { default as ModelsSelectorList } from './ModelsSelectorList.svelte';
+
+/**
+ * **ModelsSelectorOption** - Single model option row
+ *
+ * Renders a single model option with selection state, favorite toggle,
+ * load/unload actions, status indicators, and an info button.
+ * Used inside ModelsSelectorList or directly in custom render snippets.
+ */
+export { default as ModelsSelectorOption } from './ModelsSelectorOption.svelte';
+
+/**
+ * **ModelsSelectorSheet** - Mobile model selection sheet
+ *
+ * Bottom sheet variant of ModelsSelectorDropdown optimized for touch interaction
+ * on mobile devices. Same functionality as ModelsSelectorDropdown but uses Sheet UI
+ * instead of DropdownMenu.
+ */
+export { default as ModelsSelectorSheet } from './ModelsSelectorSheet.svelte';
+
+/** * **ModelBadge** - Model name display badge
+ *
+ * Compact badge showing current model name with package icon.
+ * Only visible in single model mode. Supports tooltip and copy functionality.
+ *
+ * **Architecture:**
+ * - Reads model name from modelsStore or prop
+ * - Checks server mode from serverStore
+ * - Uses BadgeInfo for consistent styling
+ *
+ * **Features:**
+ * - Optional copy to clipboard button
+ * - Optional tooltip with model details
+ * - Click handler for model info dialog
+ * - Only renders in model mode (not router)
+ *
+ * @example
+ * ```svelte
+ * <ModelBadge
+ *   onclick={() => showModelInfo = true}
+ *   showTooltip
+ *   showCopyIcon
+ * />
+ * ```
+ */
+export { default as ModelBadge } from './ModelBadge.svelte';
+
+/**
+ * **ModelId** - Parsed model identifier display
+ *
+ * Displays a model ID with optional org name, parameter badges, quantization,
+ * aliases, and tags. Supports raw mode to show the unprocessed model name.
+ * Respects the user's `showRawModelNames` setting.
+ */
+export { default as ModelId } from './ModelId.svelte';
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/models/utils.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/models/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ae1f511e9f667c2ee09b666cd3574c5118126978
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/models/utils.ts
@@ -0,0 +1,75 @@
+import { SvelteMap } from 'svelte/reactivity';
+import type { ModelOption } from '$lib/types/models';
+
+export interface ModelItem {
+	option: ModelOption;
+	flatIndex: number;
+}
+
+export interface OrgGroup {
+	orgName: string | null;
+	items: ModelItem[];
+}
+
+export interface GroupedModelOptions {
+	loaded: ModelItem[];
+	favorites: ModelItem[];
+	available: OrgGroup[];
+}
+
+export function filterModelOptions(options: ModelOption[], searchTerm: string): ModelOption[] {
+	const term = searchTerm.trim().toLowerCase();
+	if (!term) return options;
+
+	return options.filter(
+		(option) =>
+			option.model.toLowerCase().includes(term) ||
+			option.name?.toLowerCase().includes(term) ||
+			option.aliases?.some((alias: string) => alias.toLowerCase().includes(term)) ||
+			option.tags?.some((tag: string) => tag.toLowerCase().includes(term))
+	);
+}
+
+export function groupModelOptions(
+	filteredOptions: ModelOption[],
+	favoriteIds: Set<string>,
+	isModelLoaded: (model: string) => boolean
+): GroupedModelOptions {
+	// Loaded models
+	const loaded: ModelItem[] = [];
+	for (let i = 0; i < filteredOptions.length; i++) {
+		if (isModelLoaded(filteredOptions[i].model)) {
+			loaded.push({ option: filteredOptions[i], flatIndex: i });
+		}
+	}
+
+	// Favorites (excluding loaded)
+	const loadedModelIds = new Set(loaded.map((item) => item.option.model));
+	const favorites: ModelItem[] = [];
+	for (let i = 0; i < filteredOptions.length; i++) {
+		if (
+			favoriteIds.has(filteredOptions[i].model) &&
+			!loadedModelIds.has(filteredOptions[i].model)
+		) {
+			favorites.push({ option: filteredOptions[i], flatIndex: i });
+		}
+	}
+
+	// Available models grouped by org (excluding loaded and favorites)
+	const available: OrgGroup[] = [];
+	const orgGroups = new SvelteMap<string, ModelItem[]>();
+	for (let i = 0; i < filteredOptions.length; i++) {
+		const option = filteredOptions[i];
+		if (loadedModelIds.has(option.model) || favoriteIds.has(option.model)) continue;
+
+		const key = option.parsedId?.orgName ?? '';
+		if (!orgGroups.has(key)) orgGroups.set(key, []);
+		orgGroups.get(key)!.push({ option, flatIndex: i });
+	}
+
+	for (const [orgName, items] of orgGroups) {
+		available.push({ orgName: orgName || null, items });
+	}
+
+	return { loaded, favorites, available };
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/DropdownMenuActions.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/DropdownMenuActions.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..951831149fc9e1c087032b7d6eba07781c9b7962
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/DropdownMenuActions.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { KeyboardShortcutInfo } from '$lib/components/app';
+	import type { Component } from 'svelte';
+
+	interface ActionItem {
+		icon: Component;
+		label: string;
+		onclick: (event: Event) => void;
+		variant?: 'default' | 'destructive';
+		disabled?: boolean;
+		shortcut?: string[];
+		separator?: boolean;
+	}
+
+	interface Props {
+		triggerIcon: Component;
+		triggerTooltip?: string;
+		triggerClass?: string;
+		actions: ActionItem[];
+		align?: 'start' | 'center' | 'end';
+		open?: boolean;
+	}
+
+	let {
+		triggerIcon,
+		triggerTooltip,
+		triggerClass = '',
+		actions,
+		align = 'end',
+		open = $bindable(false)
+	}: Props = $props();
+</script>
+
+<DropdownMenu.Root bind:open>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<!-- prevent another nested button element -->
+			{#snippet child({ props })}
+				<DropdownMenu.Trigger
+					{...props}
+					class="flex h-6 w-6 cursor-pointer items-center justify-center rounded-md p-0 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground {triggerClass}"
+					onclick={(e) => e.stopPropagation()}
+				>
+					{@render iconComponent(triggerIcon, 'h-3 w-3')}
+					{#if triggerTooltip}
+						<span class="sr-only">{triggerTooltip}</span>
+					{/if}
+				</DropdownMenu.Trigger>
+			{/snippet}
+		</Tooltip.Trigger>
+		{#if triggerTooltip}
+			<Tooltip.Content>
+				<p>{triggerTooltip}</p>
+			</Tooltip.Content>
+		{/if}
+	</Tooltip.Root>
+
+	<DropdownMenu.Content {align} class="z-[999999] w-48">
+		{#each actions as action, index (action.label)}
+			{#if action.separator && index > 0}
+				<DropdownMenu.Separator />
+			{/if}
+
+			<DropdownMenu.Item
+				onclick={action.onclick}
+				variant={action.variant}
+				disabled={action.disabled}
+				class="flex items-center justify-between hover:[&>kbd]:opacity-100"
+			>
+				<div class="flex items-center gap-2">
+					{@render iconComponent(
+						action.icon,
+						`h-4 w-4 ${action.variant === 'destructive' ? 'text-destructive' : ''}`
+					)}
+					{action.label}
+				</div>
+
+				{#if action.shortcut}
+					<KeyboardShortcutInfo keys={action.shortcut} variant={action.variant} />
+				{/if}
+			</DropdownMenu.Item>
+		{/each}
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+{#snippet iconComponent(IconComponent: Component, className: string)}
+	<IconComponent class={className} />
+{/snippet}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/DropdownMenuSearchable.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/DropdownMenuSearchable.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..3bd68d3bd6e4c30b3166e8e86214b91484ab3c34
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/DropdownMenuSearchable.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import { SearchInput } from '$lib/components/app';
+
+	interface Props {
+		placeholder?: string;
+		searchValue?: string;
+		onSearchChange?: (value: string) => void;
+		onSearchKeyDown?: (event: KeyboardEvent) => void;
+		emptyMessage?: string;
+		isEmpty?: boolean;
+		children: Snippet;
+		footer?: Snippet;
+	}
+
+	let {
+		placeholder = 'Search...',
+		searchValue = $bindable(''),
+		onSearchChange,
+		onSearchKeyDown,
+		emptyMessage = 'No items found',
+		isEmpty = false,
+		children,
+		footer
+	}: Props = $props();
+</script>
+
+<div class="sticky top-0 z-10 mb-2 bg-popover p-1 pt-2">
+	<SearchInput
+		{placeholder}
+		bind:value={searchValue}
+		onInput={onSearchChange}
+		onKeyDown={onSearchKeyDown}
+	/>
+</div>
+
+<div class="overflow-y-auto">
+	{@render children()}
+
+	{#if isEmpty}
+		<div class="px-2 py-3 text-center text-sm text-muted-foreground">{emptyMessage}</div>
+	{/if}
+</div>
+
+{#if footer}
+	<DropdownMenu.Separator />
+
+	{@render footer()}
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..a23f4682e5818b67f33417fc58188b6c4d2fcf00
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
@@ -0,0 +1,294 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { PanelLeftClose, PanelLeftOpen, X } from '@lucide/svelte';
+	import {
+		ActionIcon,
+		Logo,
+		SidebarNavigationConversationList,
+		SidebarNavigationActions
+	} from '$lib/components/app';
+	import { ROUTES } from '$lib/constants';
+	import { fade } from 'svelte/transition';
+
+	import { useKeyboardShortcuts } from '$lib/hooks/use-keyboard-shortcuts.svelte';
+	import { conversationsStore, conversations } from '$lib/stores/conversations.svelte';
+	import { chatStore } from '$lib/stores/chat.svelte';
+	import { config } from '$lib/stores/settings.svelte';
+	import { RouterService } from '$lib/services/router.service';
+	import { isMobile } from '$lib/stores/viewport.svelte';
+	import { TooltipSide } from '$lib/enums';
+	import { device } from '$lib/stores/device.svelte';
+	import { circIn } from 'svelte/easing';
+
+	interface Props {
+		onSearchClick?: () => void;
+	}
+
+	let { onSearchClick = () => {} }: Props = $props();
+
+	const { handleKeydown } = useKeyboardShortcuts({
+		activateSearchMode: () => onSearchClick(),
+		toggleSidebar: () => toggleExpandedMode()
+	});
+
+	let isExpandedMode = $state(false);
+	let hoveredTooltip = $state<string | null>(null);
+	let logoHovered = $state(false);
+
+	const isStripExpanded = $derived(isExpandedMode || hoveredTooltip !== null);
+	const isOnMobile = $derived(isMobile.current);
+	const alwaysShowOnDesktop = $derived(config().alwaysShowSidebarOnDesktop as boolean);
+
+	// Keep the sidebar expanded on desktop when the user pins it open
+	$effect(() => {
+		if (alwaysShowOnDesktop && !isOnMobile) {
+			isExpandedMode = true;
+		}
+	});
+
+	function toggleExpandedMode() {
+		isExpandedMode = !isExpandedMode;
+		if (!isExpandedMode) {
+			hoveredTooltip = null;
+		}
+	}
+
+	$effect(() => {
+		if (!isExpandedMode) {
+			isSearchModeActive = false;
+			searchQuery = '';
+			cancelMobileCollapse();
+		}
+	});
+
+	// On mobile the dedicated /search route hides the sidebar (see the aside
+	// render guard below). Collapse it as we enter /search so it doesn't
+	// reappear expanded when the user navigates back via the back button.
+	$effect(() => {
+		if (isMobile.current && page.url.hash.includes(ROUTES.SEARCH)) {
+			isExpandedMode = false;
+		}
+	});
+
+	let currentChatId = $derived(page.params.id);
+	let isSearchModeActive = $state(false);
+	let searchQuery = $state('');
+
+	let filteredConversations = $derived.by(() => {
+		if (isSearchModeActive) {
+			if (searchQuery.trim().length > 0) {
+				return conversations().filter((conversation: { name: string }) =>
+					conversation.name.toLowerCase().includes(searchQuery.toLowerCase())
+				);
+			}
+
+			return [];
+		}
+
+		return conversations();
+	});
+
+	async function selectConversation(id: string) {
+		if (isMobile.current) {
+			scheduleMobileCollapse();
+		}
+		await goto(RouterService.chat(id));
+	}
+
+	async function handleEditConversation(id: string) {
+		const conversation = conversations().find((conv) => conv.id === id);
+		if (!conversation) return;
+
+		const newName = window.prompt('Rename conversation', conversation.name);
+		if (newName && newName.trim()) {
+			await conversationsStore.updateConversationName(id, newName.trim());
+		}
+	}
+
+	async function handleDeleteConversation(id: string) {
+		const conversation = conversations().find((conv) => conv.id === id);
+		if (!conversation) return;
+
+		const confirmed = window.confirm(
+			`Delete "${conversation.name}"? This action cannot be undone.`
+		);
+		if (!confirmed) return;
+
+		await conversationsStore.deleteConversation(id, { deleteWithForks: false });
+	}
+
+	function handleStopGeneration(id: string) {
+		chatStore.stopGenerationForChat(id);
+	}
+
+	let innerWidth = $state(0);
+	let pendingCollapse = $state<ReturnType<typeof setTimeout> | null>(null);
+
+	function scheduleMobileCollapse() {
+		if (pendingCollapse) {
+			clearTimeout(pendingCollapse);
+		}
+		pendingCollapse = setTimeout(() => {
+			isExpandedMode = false;
+			pendingCollapse = null;
+		}, 100);
+	}
+
+	function cancelMobileCollapse() {
+		if (pendingCollapse) {
+			clearTimeout(pendingCollapse);
+			pendingCollapse = null;
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} bind:innerWidth />
+
+{#if innerWidth > 768 || (!page.url.hash.includes(ROUTES.SETTINGS) && !page.url.hash.includes(ROUTES.MCP_SERVERS) && !page.url.hash.includes(ROUTES.SEARCH))}
+	<aside
+		class={[
+			// Layout & positioning
+			'fixed md:sticky top-2 left-2 md:left-0 md:ml-2 md:mt-2 pt-2 z-10 w-[calc(100dvw-1rem)]',
+			// Dimensions & overflow
+			'md:h-[calc(100dvh-1.125rem)]',
+			isExpandedMode &&
+				(device.isStandalone
+					? 'h-[calc(100dvh-2rem)]'
+					: device.isIOSDevice
+						? 'h-[calc(100dvh-0.5rem)]'
+						: 'h-[calc(100dvh-1rem)]'),
+			// Shape & depth
+			'rounded-3xl md:rounded-2xl',
+			// Flex layout
+			'flex flex-col justify-between',
+			// Transition
+			'md:transition-[width,padding] duration-200 ease-out',
+			// Expanded state: width, surface, depth
+			isStripExpanded && 'md:w-72 md:bg-muted/60 md:backdrop-blur-xl border-border shadow-md',
+			// Collapsed state
+			!isStripExpanded && 'md:w-12',
+			// Expanded mode flag (for mobile ::before overlay)
+			isExpandedMode && 'is-expanded'
+		]}
+	>
+		<div class="px-2 flex items-center justify-between">
+			<div
+				role="button"
+				tabindex="0"
+				class="relative"
+				onmouseenter={() => (logoHovered = true)}
+				onmouseleave={() => (logoHovered = false)}
+			>
+				<ActionIcon
+					icon={!isExpandedMode && logoHovered && innerWidth > 768 ? PanelLeftOpen : Logo}
+					size="lg"
+					iconSize="h-4.5 w-4.5 md:h-4 md:w-4"
+					class="{isExpandedMode
+						? 'bg-muted! md:bg-foreground/5!'
+						: 'bg-transparent!'} md:h-9 md:w-9 h-10 w-10 rounded-full md:hover:bg-foreground/10! pointer-events-auto"
+					href={isExpandedMode ? ROUTES.START : undefined}
+					onclick={isExpandedMode ? undefined : toggleExpandedMode}
+					tooltip={isExpandedMode ? undefined : 'Open Sidebar'}
+					tooltipSide={TooltipSide.RIGHT}
+					ariaLabel={isExpandedMode ? 'Go to start' : 'Expand navigation'}
+				/>
+			</div>
+
+			{#if isOnMobile || (isExpandedMode && !alwaysShowOnDesktop)}
+				<div
+					class="flex items-center transition-all duration-150 ease-out {isMobile.current &&
+					!isExpandedMode
+						? 'opacity-0 h-0!'
+						: ''}"
+					in:fade={{ duration: 150, easing: circIn, delay: 50 }}
+					out:fade={{ duration: 100 }}
+				>
+					<ActionIcon
+						icon={isMobile.current ? X : PanelLeftClose}
+						size="lg"
+						iconSize="h-4.5 w-4.5 md:h-4 md:w-4"
+						class="backdrop-blur-none md:h-9 md:w-9 h-10 w-10 rounded-full mr-1 hover:bg-accent!"
+						onclick={toggleExpandedMode}
+						tooltip="Close Sidebar"
+						tooltipSide={TooltipSide.LEFT}
+						ariaLabel="Collapse navigation"
+					/>
+				</div>
+			{/if}
+		</div>
+
+		<div class="mt-2 flex min-h-0 flex-1 flex-col gap-4 md:gap-1 overflow-y-auto">
+			<div
+				class="flex min-h-0 flex-1 flex-col gap-4 md:gap-1 {isMobile.current
+					? 'transition-[opacity,height] duration-200 ease-out'
+					: ''} {isMobile.current && !isExpandedMode ? 'opacity-0 !h-0' : ''}"
+				in:fade={{ duration: 200 }}
+				out:fade={{ duration: 200 }}
+			>
+				<SidebarNavigationActions
+					isExpandedMode={innerWidth > 768 ? isExpandedMode : true}
+					class="px-2"
+					bind:isSearchModeActive
+					bind:searchQuery
+					onSearchDeactivated={() => {
+						isSearchModeActive = false;
+						searchQuery = '';
+					}}
+					onSearchClick={() => {
+						isExpandedMode = true;
+						isSearchModeActive = true;
+					}}
+					onNewChat={() => {
+						if (isMobile.current) {
+							scheduleMobileCollapse();
+						}
+					}}
+				/>
+
+				{#if isExpandedMode || isOnMobile}
+					<SidebarNavigationConversationList
+						class="px-2"
+						{filteredConversations}
+						{currentChatId}
+						{isSearchModeActive}
+						{searchQuery}
+						onSelect={selectConversation}
+						onEdit={handleEditConversation}
+						onDelete={handleDeleteConversation}
+						onStop={handleStopGeneration}
+					/>
+				{/if}
+			</div>
+		</div>
+	</aside>
+{/if}
+
+<style>
+	aside {
+		@media (max-width: 768px) {
+			--size: 1.125rem;
+		}
+	}
+
+	@media (max-width: 768px) {
+		aside {
+			&:not(.is-expanded) {
+				pointer-events: none;
+			}
+		}
+
+		aside.is-expanded::before {
+			content: '';
+			position: fixed;
+			top: -0.5rem;
+			bottom: -0.25rem;
+			left: -0.5rem;
+			right: -0.5rem;
+			z-index: -1;
+			background: var(--background);
+			backdrop-filter: blur(1rem);
+			pointer-events: none;
+		}
+	}
+</style>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..f118a68dfc670232d29fe5acf6c1e485296ae3ac
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte
@@ -0,0 +1,196 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { Search } from '@lucide/svelte';
+	import { ActionIcon, KeyboardShortcutInfo, SearchInput } from '$lib/components/app';
+	import { Button } from '$lib/components/ui/button';
+	import {
+		ICON_STRIP_TRANSITION_DURATION,
+		ICON_STRIP_TRANSITION_DELAY_MULTIPLIER,
+		ROUTES,
+		SIDEBAR_ACTIONS_ITEMS
+	} from '$lib/constants';
+	import { isMobile } from '$lib/stores/viewport.svelte';
+	import { TooltipSide } from '$lib/enums';
+	import { fade } from 'svelte/transition';
+	import { circIn } from 'svelte/easing';
+	import { onMount } from 'svelte';
+	import type { Component } from 'svelte';
+
+	interface Props {
+		class: string;
+		isExpandedMode: boolean;
+		isSearchModeActive: boolean;
+		searchQuery: string;
+		onSearchDeactivated?: () => void;
+		onSearchClick?: () => void;
+		onNewChat?: () => void;
+	}
+
+	let {
+		class: className,
+		isExpandedMode = false,
+		isSearchModeActive = $bindable(false),
+		searchQuery = $bindable(''),
+		onSearchDeactivated,
+		onSearchClick,
+		onNewChat
+	}: Props = $props();
+
+	let initialized = $state(false);
+	let showIcons = $state(false);
+	let searchInputRef = $state<HTMLInputElement | null>(null);
+
+	const isOnMobile = $derived(isMobile.current);
+
+	$effect(() => {
+		if (isSearchModeActive && searchInputRef) {
+			searchInputRef.focus();
+		}
+	});
+
+	onMount(() => {
+		showIcons = true;
+
+		setTimeout(() => {
+			initialized = true;
+		}, ICON_STRIP_TRANSITION_DELAY_MULTIPLIER * SIDEBAR_ACTIONS_ITEMS.length);
+	});
+
+	function handleSearchModeDeactivate() {
+		isSearchModeActive = false;
+		searchQuery = '';
+		onSearchDeactivated?.();
+	}
+
+	function isItemActive(item: {
+		activeRouteId?: string;
+		activeRoutePrefix?: string;
+		activeUrlIncludes?: string;
+	}): boolean {
+		if (item.activeRouteId) {
+			return page.route.id === item.activeRouteId;
+		}
+
+		if (item.activeRoutePrefix) {
+			return !!page.route.id?.startsWith(item.activeRoutePrefix);
+		}
+
+		if (item.activeUrlIncludes) {
+			return page.url?.hash?.includes(item.activeUrlIncludes) ?? false;
+		}
+
+		return false;
+	}
+</script>
+
+{#snippet itemIcon(IconComponent: Component)}
+	<IconComponent class="h-4 w-4" />
+{/snippet}
+
+{#if isSearchModeActive}
+	<div class="px-4 my-2">
+		<SearchInput
+			bind:value={searchQuery}
+			bind:ref={searchInputRef}
+			onClose={handleSearchModeDeactivate}
+			onKeyDown={(e) => e.key === 'Escape' && handleSearchModeDeactivate()}
+			placeholder="Search conversations..."
+		/>
+	</div>
+{:else if isExpandedMode || isOnMobile}
+	<div
+		class="{className} flex flex-col gap-5 md:gap-1 mt-2 md:mt-0 {!isExpandedMode && isOnMobile
+			? 'hidden pointer-events-none'
+			: ''}"
+	>
+		{#each SIDEBAR_ACTIONS_ITEMS as item, i (item.tooltip)}
+			{@const isActive = isItemActive(item)}
+			{@const isSearchOnMobile = item.icon === Search && isMobile.current}
+			{@const itemHref = isSearchOnMobile ? ROUTES.SEARCH : item.route}
+			{@const itemOnClick = item.route
+				? () => {
+						onNewChat?.();
+						goto(item.route!);
+					}
+				: isSearchOnMobile
+					? undefined
+					: onSearchClick}
+			{@const itemTransition = {
+				duration: ICON_STRIP_TRANSITION_DURATION,
+				delay: !initialized
+					? ICON_STRIP_TRANSITION_DELAY_MULTIPLIER + i * ICON_STRIP_TRANSITION_DELAY_MULTIPLIER
+					: 0,
+				easing: circIn
+			}}
+
+			{#if showIcons}
+				<div transition:fade={itemTransition}>
+					<Button
+						class="w-full min-w-9 justify-between px-2 backdrop-blur-none! hover:[&>kbd]:opacity-100 {isActive
+							? 'bg-accent text-accent-foreground'
+							: ''}"
+						href={itemHref}
+						onclick={itemOnClick}
+						variant="ghost"
+						size="default"
+					>
+						<span class="flex min-w-0 items-center px-0.5 gap-2">
+							{@render itemIcon(item.icon)}
+
+							{#if showIcons}
+								<span
+									in:fade={{ duration: 150, easing: circIn, delay: 50 }}
+									out:fade={{ duration: 100 }}
+									class="min-w-0 truncate">{item.tooltip}</span
+								>
+							{/if}
+						</span>
+
+						{#if item.keys}
+							<KeyboardShortcutInfo keys={item.keys} />
+						{/if}
+					</Button>
+				</div>
+			{/if}
+		{/each}
+	</div>
+{:else}
+	<div class="{className} flex-col gap-1 hidden md:flex">
+		{#each SIDEBAR_ACTIONS_ITEMS as item, i (item.tooltip)}
+			{@const isActive = isItemActive(item)}
+			{@const isSearchOnMobile = item.icon === Search && isMobile.current}
+			{@const itemOnClick = item.route
+				? () => {
+						onNewChat?.();
+						goto(item.route!);
+					}
+				: isSearchOnMobile
+					? undefined
+					: onSearchClick}
+			{@const itemTransition = {
+				duration: ICON_STRIP_TRANSITION_DURATION,
+				delay: !initialized
+					? ICON_STRIP_TRANSITION_DELAY_MULTIPLIER + i * ICON_STRIP_TRANSITION_DELAY_MULTIPLIER
+					: 0,
+				easing: circIn
+			}}
+
+			{#if showIcons}
+				<div transition:fade={itemTransition}>
+					<ActionIcon
+						icon={item.icon}
+						tooltip={item.tooltip}
+						tooltipSide={TooltipSide.RIGHT}
+						size="lg"
+						iconSize="h-4 w-4"
+						class="h-9 w-9 rounded-full hover:bg-accent! {isActive
+							? 'bg-accent text-accent-foreground'
+							: ''}"
+						onclick={itemOnClick}
+					/>
+				</div>
+			{/if}
+		{/each}
+	</div>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationConversationItem.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationConversationItem.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..b1c2b78f65eaa4ccec0b99630ad5a3bfe6f1fbe7
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationConversationItem.svelte
@@ -0,0 +1,252 @@
+<script lang="ts">
+	import {
+		Trash2,
+		Pencil,
+		MoreHorizontal,
+		Download,
+		Loader2,
+		Square,
+		GitBranch,
+		Pin,
+		PinOff
+	} from '@lucide/svelte';
+	import { DropdownMenuActions } from '$lib/components/app';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { FORK_TREE_DEPTH_PADDING } from '$lib/constants';
+	import { RouterService } from '$lib/services/router.service';
+	import { getAllLoadingChats } from '$lib/stores/chat.svelte';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { TruncatedText } from '$lib/components/app';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		isActive?: boolean;
+		depth?: number;
+		conversation: DatabaseConversation;
+		onDelete?: (id: string) => void;
+		onEdit?: (id: string) => void;
+		onSelect?: (id: string) => void;
+		onStop?: (id: string) => void;
+	}
+
+	let {
+		conversation,
+		onDelete,
+		onEdit,
+		onSelect,
+		onStop,
+		isActive = false,
+		depth = 0
+	}: Props = $props();
+
+	let renderActionsDropdown = $state(false);
+	let dropdownOpen = $state(false);
+
+	let isLoading = $derived(getAllLoadingChats().includes(conversation.id));
+
+	function handleEdit(event: Event) {
+		event.stopPropagation();
+		onEdit?.(conversation.id);
+	}
+
+	function handleDelete(event: Event) {
+		event.stopPropagation();
+		onDelete?.(conversation.id);
+	}
+
+	function handleStop(event: Event) {
+		event.stopPropagation();
+		onStop?.(conversation.id);
+	}
+
+	function handleTogglePin() {
+		conversationsStore.toggleConversationPin(conversation.id);
+	}
+
+	function handleGlobalEditEvent(event: Event) {
+		const customEvent = event as CustomEvent<{ conversationId: string }>;
+
+		if (customEvent.detail.conversationId === conversation.id && isActive) {
+			handleEdit(event);
+		}
+	}
+
+	function handleMouseLeave() {
+		if (!dropdownOpen) {
+			renderActionsDropdown = false;
+		}
+	}
+
+	function handleMouseOver() {
+		renderActionsDropdown = true;
+	}
+
+	function handleSelect() {
+		onSelect?.(conversation.id);
+	}
+
+	$effect(() => {
+		if (!dropdownOpen) {
+			renderActionsDropdown = false;
+		}
+	});
+
+	onMount(() => {
+		document.addEventListener('edit-active-conversation', handleGlobalEditEvent as EventListener);
+
+		return () => {
+			document.removeEventListener(
+				'edit-active-conversation',
+				handleGlobalEditEvent as EventListener
+			);
+		};
+	});
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<button
+	class="group flex min-h-9 w-full cursor-pointer items-center justify-between space-x-3 rounded-lg py-1.5 text-left transition-colors hover:bg-foreground/10 {isActive
+		? 'bg-foreground/5 text-accent-foreground'
+		: ''} px-3"
+	onclick={handleSelect}
+	onmouseover={handleMouseOver}
+	onmouseleave={handleMouseLeave}
+	onfocusin={handleMouseOver}
+	onfocusout={(e) => {
+		if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
+			handleMouseLeave();
+		}
+	}}
+>
+	<div
+		class="flex min-w-0 flex-1 items-center gap-2"
+		style:padding-left="{depth * FORK_TREE_DEPTH_PADDING}px"
+	>
+		{#if depth > 0}
+			<Tooltip.Root>
+				<Tooltip.Trigger>
+					<!-- prevent another nested button element -->
+					{#snippet child({ props })}
+						<a
+							{...props}
+							href={RouterService.chat(conversation.forkedFromConversationId)}
+							class="flex shrink-0 items-center text-muted-foreground transition-colors hover:text-foreground"
+						>
+							<GitBranch class="h-3.5 w-3.5" />
+						</a>
+					{/snippet}
+				</Tooltip.Trigger>
+
+				<Tooltip.Content>
+					<p>See parent conversation</p>
+				</Tooltip.Content>
+			</Tooltip.Root>
+		{/if}
+
+		{#if isLoading}
+			<Tooltip.Root>
+				<Tooltip.Trigger>
+					<div
+						class="stop-button flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground"
+						onclick={handleStop}
+						onkeydown={(e) => e.key === 'Enter' && handleStop(e)}
+						role="button"
+						tabindex="0"
+						aria-label="Stop generation"
+					>
+						<Loader2 class="loading-icon h-3.5 w-3.5 animate-spin" />
+
+						<Square class="stop-icon hidden h-3 w-3 fill-current text-destructive" />
+					</div>
+				</Tooltip.Trigger>
+
+				<Tooltip.Content>
+					<p>Stop generation</p>
+				</Tooltip.Content>
+			</Tooltip.Root>
+		{/if}
+
+		<TruncatedText text={conversation.name} class="text-sm font-medium" showTooltip={false} />
+	</div>
+
+	{#if renderActionsDropdown}
+		<div class="actions flex items-center">
+			<DropdownMenuActions
+				triggerIcon={MoreHorizontal}
+				triggerTooltip="More actions"
+				bind:open={dropdownOpen}
+				actions={[
+					{
+						icon: conversation.pinned ? PinOff : Pin,
+						label: conversation.pinned ? 'Unpin' : 'Pin',
+						onclick: (e: Event) => {
+							e.stopPropagation();
+							handleTogglePin();
+						}
+					},
+					{
+						icon: Pencil,
+						label: 'Edit',
+						onclick: handleEdit,
+						shortcut: ['shift', 'cmd', 'e']
+					},
+					{
+						icon: Download,
+						label: 'Export',
+						onclick: (e: Event) => {
+							e.stopPropagation();
+							conversationsStore.downloadConversation(conversation.id);
+						},
+						shortcut: ['shift', 'cmd', 's']
+					},
+					{
+						icon: Trash2,
+						label: 'Delete',
+						onclick: handleDelete,
+						variant: 'destructive',
+						shortcut: ['shift', 'cmd', 'd'],
+						separator: true
+					}
+				]}
+			/>
+		</div>
+	{/if}
+</button>
+
+<style>
+	button {
+		:global([data-slot='dropdown-menu-trigger']:not([data-state='open'])) {
+			opacity: 0;
+		}
+
+		&:is(:hover) :global([data-slot='dropdown-menu-trigger']),
+		&:focus-within :global([data-slot='dropdown-menu-trigger']) {
+			opacity: 1;
+		}
+		@media (max-width: 768px) {
+			:global([data-slot='dropdown-menu-trigger']) {
+				opacity: 1 !important;
+			}
+		}
+
+		.stop-button {
+			:global(.stop-icon) {
+				display: none;
+			}
+
+			:global(.loading-icon) {
+				display: block;
+			}
+		}
+
+		&:is(:hover) .stop-button {
+			:global(.stop-icon) {
+				display: block;
+			}
+
+			:global(.loading-icon) {
+				display: none;
+			}
+		}
+	}
+</style>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationConversationList.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationConversationList.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..488e96bbcf617285bc1129f5cc9c9e023974727b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationConversationList.svelte
@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { Pin } from '@lucide/svelte';
+	import { buildConversationTree } from '$lib/stores/conversations.svelte';
+	import SidebarNavigationConversationItem from './SidebarNavigationConversationItem.svelte';
+	import SidebarNavigationSearchResults from './SidebarNavigationSearchResults.svelte';
+
+	interface Props {
+		class: string;
+		filteredConversations: DatabaseConversation[];
+		currentChatId: string | undefined;
+		isSearchModeActive: boolean;
+		searchQuery: string;
+		onSelect: (id: string) => void;
+		onEdit: (id: string) => void;
+		onDelete: (id: string) => void;
+		onStop: (id: string) => void;
+	}
+
+	let {
+		class: className,
+		filteredConversations,
+		currentChatId,
+		isSearchModeActive,
+		searchQuery,
+		onSelect,
+		onEdit,
+		onDelete,
+		onStop
+	}: Props = $props();
+
+	let conversationTree = $derived(buildConversationTree(filteredConversations));
+
+	let pinnedConversations = $derived(
+		conversationTree.filter(({ conversation }) => conversation.pinned)
+	);
+
+	let unpinnedConversations = $derived(
+		conversationTree.filter(({ conversation }) => !conversation.pinned)
+	);
+
+	const recentEmptyMessage = $derived(
+		searchQuery.length > 0 ? 'No results found' : 'No conversations yet'
+	);
+</script>
+
+{#if isSearchModeActive}
+	<SidebarNavigationSearchResults
+		class={className}
+		{searchQuery}
+		{filteredConversations}
+		{currentChatId}
+		{onSelect}
+		{onEdit}
+		{onDelete}
+		{onStop}
+	/>
+{:else}
+	{#if pinnedConversations.length > 0}
+		<div class="py-2 flex whitespace-nowrap {className}">
+			<div
+				class="text-muted-foreground inline-flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium gap-1"
+			>
+				<Pin class="h-3.5 w-3.5" />
+
+				<span>Pinned</span>
+			</div>
+		</div>
+
+		<ul class="flex w-full min-w-0 flex-col gap-4 md:gap-1 {className}">
+			{#each pinnedConversations as { conversation, depth } (conversation.id)}
+				<li class="group/item relative mb-1 p-0">
+					<SidebarNavigationConversationItem
+						conversation={{
+							id: conversation.id,
+							name: conversation.name,
+							lastModified: conversation.lastModified,
+							currNode: conversation.currNode,
+							forkedFromConversationId: conversation.forkedFromConversationId,
+							pinned: conversation.pinned
+						}}
+						{depth}
+						isActive={currentChatId === conversation.id}
+						{onSelect}
+						{onEdit}
+						{onDelete}
+						{onStop}
+					/>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	<div class="mt-2 flex min-h-0 flex-1 flex-col gap-4 md:gap-2 whitespace-nowrap {className}">
+		{#if filteredConversations.length > 0}
+			<div
+				class="text-muted-foreground flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium"
+			>
+				Recent conversations
+			</div>
+		{/if}
+
+		<div class="min-h-0 flex-1 md:overflow-y-auto">
+			<ul class="flex w-full min-w-0 flex-col gap-4 md:gap-1">
+				{#each unpinnedConversations as { conversation, depth } (conversation.id)}
+					<li class="group/item relative mb-1 p-0">
+						<SidebarNavigationConversationItem
+							conversation={{
+								id: conversation.id,
+								name: conversation.name,
+								lastModified: conversation.lastModified,
+								currNode: conversation.currNode,
+								forkedFromConversationId: conversation.forkedFromConversationId,
+								pinned: conversation.pinned
+							}}
+							{depth}
+							isActive={currentChatId === conversation.id}
+							{onSelect}
+							{onEdit}
+							{onDelete}
+							{onStop}
+						/>
+					</li>
+				{/each}
+
+				{#if unpinnedConversations.length === 0}
+					<li class="px-2 py-4 text-center">
+						<p class="mb-4 p-4 text-sm text-muted-foreground">
+							{recentEmptyMessage}
+						</p>
+					</li>
+				{/if}
+			</ul>
+		</div>
+	</div>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationSearch.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationSearch.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..491e7c34798357269a8b25f37628f7c4faf94610
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationSearch.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { SearchInput } from '$lib/components/app';
+
+	interface Props {
+		value?: string;
+		placeholder?: string;
+		onInput?: (value: string) => void;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Search conversations...',
+		onInput,
+		class: className
+	}: Props = $props();
+</script>
+
+<div class="mb-4 px-2 {className}">
+	<SearchInput bind:value {placeholder} {onInput} />
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationSearchResults.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationSearchResults.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..92d8fd0bda882f7e5b3121e7151fa46961084d3f
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationSearchResults.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { buildConversationTree } from '$lib/stores/conversations.svelte';
+	import SidebarNavigationConversationItem from './SidebarNavigationConversationItem.svelte';
+
+	interface Props {
+		class?: string;
+		searchQuery: string;
+		filteredConversations: DatabaseConversation[];
+		currentChatId: string | undefined;
+		onSelect: (id: string) => void;
+		onEdit: (id: string) => void;
+		onDelete: (id: string) => void;
+		onStop: (id: string) => void;
+	}
+
+	let {
+		class: className = '',
+		searchQuery,
+		filteredConversations,
+		currentChatId,
+		onSelect,
+		onEdit,
+		onDelete,
+		onStop
+	}: Props = $props();
+
+	let tree = $derived(buildConversationTree(filteredConversations));
+
+	const hasQuery = $derived(searchQuery.trim().length > 0);
+	const showHeader = $derived(hasQuery && filteredConversations.length > 0);
+
+	const emptyMessage = $derived(hasQuery ? 'No results found' : 'Start typing to see results');
+</script>
+
+<div class="flex min-h-0 flex-1 flex-col gap-2 whitespace-nowrap {className}">
+	{#if showHeader}
+		<div
+			class="text-muted-foreground flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium"
+		>
+			Search results
+		</div>
+	{/if}
+
+	<div class="min-h-0 flex-1 overflow-y-auto">
+		<ul class="flex w-full min-w-0 flex-col gap-1">
+			{#each tree as { conversation, depth } (conversation.id)}
+				<li class="group/item relative mb-1 p-0">
+					<SidebarNavigationConversationItem
+						conversation={{
+							id: conversation.id,
+							name: conversation.name,
+							lastModified: conversation.lastModified,
+							currNode: conversation.currNode,
+							forkedFromConversationId: conversation.forkedFromConversationId,
+							pinned: conversation.pinned
+						}}
+						{depth}
+						isActive={currentChatId === conversation.id}
+						{onSelect}
+						{onEdit}
+						{onDelete}
+						{onStop}
+					/>
+				</li>
+			{/each}
+
+			{#if tree.length === 0}
+				<li class="px-2 py-4 text-center">
+					<p class="mb-4 p-4 text-sm text-muted-foreground">
+						{emptyMessage}
+					</p>
+				</li>
+			{/if}
+		</ul>
+	</div>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e07dde6bc9012d6b69ba2bfc391c90c80545223b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/navigation/index.ts
@@ -0,0 +1,174 @@
+/**
+ *
+ * NAVIGATION & MENUS
+ *
+ * Components for dropdown menus and action selection.
+ *
+ */
+
+/**
+ * **DropdownMenuSearchable** - Searchable content for dropdown menus
+ *
+ * Renders a search input with filtered content area, empty state, and optional footer.
+ * Designed to be injected into any dropdown container (DropdownMenu.Content,
+ * DropdownMenu.SubContent, etc.) without providing its own Root.
+ *
+ * **Features:**
+ * - Search/filter input
+ * - Keyboard navigation support
+ * - Custom content and footer via snippets
+ * - Empty state message
+ *
+ * @example
+ * ```svelte
+ * <DropdownMenu.Root>
+ *   <DropdownMenu.Trigger>...</DropdownMenu.Trigger>
+ *   <DropdownMenu.Content class="pt-0">
+ *     <DropdownMenuSearchable
+ *       bind:searchValue
+ *       placeholder="Search..."
+ *       isEmpty={filteredItems.length === 0}
+ *     >
+ *       {#each items as item}<Item {item} />{/each}
+ *     </DropdownMenuSearchable>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ * ```
+ */
+export { default as DropdownMenuSearchable } from './DropdownMenuSearchable.svelte';
+
+/**
+ * **DropdownMenuActions** - Multi-action dropdown menu
+ *
+ * Dropdown menu for multiple action options with icons and shortcuts.
+ * Supports destructive variants and keyboard shortcut hints.
+ *
+ * **Features:**
+ * - Configurable trigger icon with tooltip
+ * - Action items with icons and labels
+ * - Destructive variant styling
+ * - Keyboard shortcut display
+ * - Separator support between groups
+ *
+ * @example
+ * ```svelte
+ * <DropdownMenuActions
+ *   triggerIcon={MoreHorizontal}
+ *   triggerTooltip="More actions"
+ *   actions={[
+ *     { icon: Edit, label: 'Edit', onclick: handleEdit },
+ *     { icon: Trash, label: 'Delete', onclick: handleDelete, variant: 'destructive' }
+ *   ]}
+ * />
+ * ```
+ */
+export { default as DropdownMenuActions } from './DropdownMenuActions.svelte';
+/**
+ * **SidebarNavigation** - 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:**
+ * - `activateSearchMode()` - Focus search input programmatically
+ * - `editActiveConversation()` - Open rename dialog for current conversation
+ *
+ * @example
+ * ```svelte
+ * <SidebarNavigation bind:this={sidebarRef} />
+ * ```
+ */
+export { default as SidebarNavigation } from './SidebarNavigation/SidebarNavigation.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 SidebarNavigationConversationItem } from './SidebarNavigation/SidebarNavigationConversationItem.svelte';
+
+/**
+ * **SidebarNavigationConversationList** - Grouped conversation list
+ *
+ * Pure-presentational list of conversations. Splits items into a Pinned
+ * section (when not in search mode) and a Recent Conversations / Search
+ * Results section with the unpinned items. Item selection, edit, delete,
+ * and stop-generation are delegated to the caller via callbacks.
+ *
+ * @example
+ * ```svelte
+ * <SidebarNavigationConversationList
+ *   {filteredConversations}
+ *   {currentChatId}
+ *   {isSearchModeActive}
+ *   {searchQuery}
+ *   onSelect={...}
+ *   onEdit={...}
+ *   onDelete={...}
+ *   onStop={...}
+ * />
+ * ```
+ */
+export { default as SidebarNavigationConversationList } from './SidebarNavigation/SidebarNavigationConversationList.svelte';
+export { default as SidebarNavigationActions } from './SidebarNavigation/SidebarNavigationActions.svelte';
+
+/**
+ * **SidebarNavigationSearchResults** - Filtered conversation list for search.
+ *
+ * Pure-presentational rendering of the search-mode subtree: "Search results"
+ * header, the matching items rendered through {@link SidebarNavigationConversationItem},
+ * and contextual empty-state messages. Used both inline inside
+ * {@link SidebarNavigationConversationList} (when search mode is active in the
+ * sidebar) and as the body of the mobile `/search` route.
+ *
+ * The caller is expected to provide an already-filtered list via
+ * `filteredConversations` and a `searchQuery` for the empty-state messages.
+ *
+ * @example
+ * ```svelte
+ * <SidebarNavigationSearchResults
+ *   {searchQuery}
+ *   {filteredConversations}
+ *   {currentChatId}
+ *   onSelect={...}
+ *   onEdit={...}
+ *   onDelete={...}
+ *   onStop={...}
+ * />
+ * ```
+ */
+export { default as SidebarNavigationSearchResults } from './SidebarNavigation/SidebarNavigationSearchResults.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 SidebarNavigationSearch } from './SidebarNavigation/SidebarNavigationSearch.svelte';
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/server/ServerErrorSplash.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/server/ServerErrorSplash.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..4da0d1ddfa800c1803dd144faf231647ab6b01c8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/server/ServerErrorSplash.svelte
@@ -0,0 +1,285 @@
+<script lang="ts">
+	import { base } from '$app/paths';
+	import { AlertTriangle, RefreshCw, Key, CheckCircle, XCircle } from '@lucide/svelte';
+	import { goto } from '$app/navigation';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import Label from '$lib/components/ui/label/label.svelte';
+	import { serverStore, serverLoading } from '$lib/stores/server.svelte';
+	import { config, settingsStore } from '$lib/stores/settings.svelte';
+	import { SETTINGS_KEYS } from '$lib/constants';
+	import { ROUTES } from '$lib/constants/routes';
+	import { fade, fly, scale } from 'svelte/transition';
+	import { KeyboardKey } from '$lib/enums';
+
+	interface Props {
+		class?: string;
+		error: string;
+		onRetry?: () => void;
+		showRetry?: boolean;
+		showTroubleshooting?: boolean;
+	}
+
+	let {
+		class: className = '',
+		error,
+		onRetry,
+		showRetry = true,
+		showTroubleshooting = false
+	}: Props = $props();
+
+	let isServerLoading = $derived(serverLoading());
+	let isAccessDeniedError = $derived(
+		error.toLowerCase().includes('access denied') ||
+			error.toLowerCase().includes('invalid api key') ||
+			error.toLowerCase().includes('unauthorized') ||
+			error.toLowerCase().includes('401') ||
+			error.toLowerCase().includes('403')
+	);
+
+	let apiKeyInput = $state('');
+	let showApiKeyInput = $state(false);
+	let apiKeyState = $state<'idle' | 'validating' | 'success' | 'error'>('idle');
+	let apiKeyError = $state('');
+
+	function handleRetryConnection() {
+		if (onRetry) {
+			onRetry();
+		} else {
+			serverStore.fetch();
+		}
+	}
+
+	function handleShowApiKeyInput() {
+		showApiKeyInput = true;
+		// Pre-fill with current API key if it exists
+		const currentConfig = config();
+		apiKeyInput = currentConfig.apiKey?.toString() || '';
+	}
+
+	async function handleSaveApiKey() {
+		if (!apiKeyInput.trim()) return;
+
+		apiKeyState = 'validating';
+		apiKeyError = '';
+
+		try {
+			// Update the API key in settings first
+			settingsStore.updateConfig(SETTINGS_KEYS.API_KEY, apiKeyInput.trim());
+
+			// Test the API key by making a real request to the server
+			const response = await fetch(`${base}/props`, {
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${apiKeyInput.trim()}`
+				}
+			});
+
+			if (response.ok) {
+				// API key is valid - User Story B
+				apiKeyState = 'success';
+
+				// Show success state briefly, then navigate to home
+				setTimeout(() => {
+					goto(ROUTES.START);
+				}, 1000);
+			} else {
+				// API key is invalid - User Story A
+				apiKeyState = 'error';
+
+				if (response.status === 401 || response.status === 403) {
+					apiKeyError = 'Invalid API key - please check and try again';
+				} else {
+					apiKeyError = `Authentication failed (${response.status})`;
+				}
+
+				// Reset to idle state after showing error (don't reload UI)
+				setTimeout(() => {
+					apiKeyState = 'idle';
+				}, 3000);
+			}
+		} catch (error) {
+			// Network or other errors - User Story A
+			apiKeyState = 'error';
+
+			if (error instanceof Error) {
+				if (error.message.includes('fetch')) {
+					apiKeyError = 'Cannot connect to server - check if server is running';
+				} else {
+					apiKeyError = error.message;
+				}
+			} else {
+				apiKeyError = 'Connection error - please try again';
+			}
+
+			// Reset to idle state after showing error (don't reload UI)
+			setTimeout(() => {
+				apiKeyState = 'idle';
+			}, 3000);
+		}
+	}
+
+	function handleApiKeyKeydown(event: KeyboardEvent) {
+		if (event.key === KeyboardKey.ENTER) {
+			handleSaveApiKey();
+		}
+	}
+</script>
+
+<div class="flex h-full items-center justify-center {className}">
+	<div class="w-full max-w-md px-4 text-center">
+		<div class="mb-6" in:fade={{ duration: 300 }}>
+			<div
+				class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10"
+			>
+				<AlertTriangle class="h-8 w-8 text-destructive" />
+			</div>
+
+			<h2 class="mb-2 text-xl font-semibold">Server Connection Error</h2>
+
+			<p class="mb-4 text-sm text-muted-foreground">
+				{error}
+			</p>
+		</div>
+
+		{#if isAccessDeniedError && !showApiKeyInput}
+			<div in:fly={{ y: 10, duration: 300, delay: 200 }} class="mb-4">
+				<Button onclick={handleShowApiKeyInput} variant="outline" class="w-full">
+					<Key class="h-4 w-4" />
+					Enter API Key
+				</Button>
+			</div>
+		{/if}
+
+		{#if showApiKeyInput}
+			<div in:fly={{ y: 10, duration: 300, delay: 200 }} class="mb-4 space-y-3 text-left">
+				<div class="space-y-2">
+					<Label for="api-key-input" class="text-sm font-medium">API Key</Label>
+
+					<div class="relative">
+						<Input
+							id="api-key-input"
+							placeholder="Enter your API key..."
+							bind:value={apiKeyInput}
+							onkeydown={handleApiKeyKeydown}
+							class="w-full pr-10 {apiKeyState === 'error'
+								? 'border-destructive'
+								: apiKeyState === 'success'
+									? 'border-green-500'
+									: ''}"
+							disabled={apiKeyState === 'validating'}
+						/>
+						{#if apiKeyState === 'validating'}
+							<div class="absolute top-1/2 right-3 -translate-y-1/2">
+								<RefreshCw class="h-4 w-4 animate-spin text-muted-foreground" />
+							</div>
+						{:else if apiKeyState === 'success'}
+							<div
+								class="absolute top-1/2 right-3 -translate-y-1/2"
+								in:scale={{ duration: 200, start: 0.8 }}
+							>
+								<CheckCircle class="h-4 w-4 text-green-500" />
+							</div>
+						{:else if apiKeyState === 'error'}
+							<div
+								class="absolute top-1/2 right-3 -translate-y-1/2"
+								in:scale={{ duration: 200, start: 0.8 }}
+							>
+								<XCircle class="h-4 w-4 text-destructive" />
+							</div>
+						{/if}
+					</div>
+					{#if apiKeyError}
+						<p class="text-sm text-destructive" in:fly={{ y: -10, duration: 200 }}>
+							{apiKeyError}
+						</p>
+					{/if}
+					{#if apiKeyState === 'success'}
+						<p class="text-sm text-green-600" in:fly={{ y: -10, duration: 200 }}>
+							✓ API key validated successfully! Connecting...
+						</p>
+					{/if}
+				</div>
+				<div class="flex gap-2">
+					<Button
+						onclick={handleSaveApiKey}
+						disabled={!apiKeyInput.trim() ||
+							apiKeyState === 'validating' ||
+							apiKeyState === 'success'}
+						class="flex-1"
+					>
+						{#if apiKeyState === 'validating'}
+							<RefreshCw class="h-4 w-4 animate-spin" />
+							Validating...
+						{:else if apiKeyState === 'success'}
+							Success!
+						{:else}
+							Save & Retry
+						{/if}
+					</Button>
+					<Button
+						onclick={() => {
+							showApiKeyInput = false;
+							apiKeyState = 'idle';
+							apiKeyError = '';
+						}}
+						variant="outline"
+						class="flex-1"
+						disabled={apiKeyState === 'validating'}
+					>
+						Cancel
+					</Button>
+				</div>
+			</div>
+		{/if}
+
+		{#if showRetry}
+			<div in:fly={{ y: 10, duration: 300, delay: 200 }}>
+				<Button onclick={handleRetryConnection} disabled={isServerLoading} class="w-full">
+					{#if isServerLoading}
+						<RefreshCw class="h-4 w-4 animate-spin" />
+
+						Connecting...
+					{:else}
+						<RefreshCw class="h-4 w-4" />
+
+						Retry Connection
+					{/if}
+				</Button>
+			</div>
+		{/if}
+
+		{#if showTroubleshooting}
+			<div class="mt-4 text-left" in:fly={{ y: 10, duration: 300, delay: 400 }}>
+				<details class="text-sm">
+					<summary class="cursor-pointer text-muted-foreground hover:text-foreground">
+						Troubleshooting
+					</summary>
+
+					<div class="mt-2 space-y-3 text-xs text-muted-foreground">
+						<div class="space-y-2">
+							<p class="mb-4 font-medium">Start the llama-server:</p>
+
+							<div class="rounded bg-muted/50 px-2 py-1 font-mono text-xs">
+								<p>llama-server -hf ggml-org/gemma-3-4b-it-GGUF</p>
+							</div>
+
+							<p>or</p>
+
+							<div class="rounded bg-muted/50 px-2 py-1 font-mono text-xs">
+								<p class="mt-1">llama-server -m locally-stored-model.gguf</p>
+							</div>
+						</div>
+						<ul class="list-disc space-y-1 pl-4">
+							<li>Check that the server is accessible at the correct URL</li>
+
+							<li>Verify your network connection</li>
+
+							<li>Check server logs for any error messages</li>
+						</ul>
+					</div>
+				</details>
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/server/ServerLoadingSplash.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/server/ServerLoadingSplash.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..95fa61e93696a3896aa52fb986e626c637d6c0b6
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/server/ServerLoadingSplash.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Server } from '@lucide/svelte';
+	import { ServerStatus } from '$lib/components/app';
+	import { fade } from 'svelte/transition';
+
+	interface Props {
+		class?: string;
+		message?: string;
+	}
+
+	let { class: className = '', message = 'Initializing connection to server...' }: Props = $props();
+</script>
+
+<div class="flex h-full items-center justify-center {className}">
+	<div class="text-center">
+		<div class="mb-4" in:fade={{ duration: 300 }}>
+			<div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+				<Server class="h-8 w-8 animate-pulse text-muted-foreground" />
+			</div>
+
+			<h2 class="mb-2 text-xl font-semibold">Connecting to Server</h2>
+
+			<p class="text-sm text-muted-foreground">
+				{message}
+			</p>
+		</div>
+
+		<div class="mt-4">
+			<ServerStatus class="justify-center" />
+		</div>
+	</div>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/server/ServerStatus.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/server/ServerStatus.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..86a962de123fa89aaba29a9e3e57a7eff57c911a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/server/ServerStatus.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { AlertTriangle, Server } from '@lucide/svelte';
+	import { Badge } from '$lib/components/ui/badge';
+	import { Button } from '$lib/components/ui/button';
+	import { serverProps, serverLoading, serverError } from '$lib/stores/server.svelte';
+	import { singleModelName } from '$lib/stores/models.svelte';
+
+	interface Props {
+		class?: string;
+		showActions?: boolean;
+	}
+
+	let { class: className = '', showActions = false }: Props = $props();
+
+	let error = $derived(serverError());
+	let loading = $derived(serverLoading());
+	let model = $derived(singleModelName());
+	let serverData = $derived(serverProps());
+
+	function getStatusColor() {
+		if (loading) return 'bg-yellow-500';
+		if (error) return 'bg-red-500';
+		if (serverData) return 'bg-green-500';
+
+		return 'bg-gray-500';
+	}
+
+	function getStatusText() {
+		if (loading) return 'Connecting...';
+		if (error) return 'Connection Error';
+		if (serverData) return 'Connected';
+
+		return 'Unknown';
+	}
+</script>
+
+<div class="flex items-center space-x-3 {className}">
+	<div class="flex items-center space-x-2">
+		<div class="h-2 w-2 rounded-full {getStatusColor()}"></div>
+
+		<span class="text-sm text-muted-foreground">{getStatusText()}</span>
+	</div>
+
+	{#if serverData && !error}
+		<Badge variant="outline" class="text-xs">
+			<Server class="mr-1 h-3 w-3" />
+
+			{model || 'Unknown Model'}
+		</Badge>
+
+		{#if serverData?.default_generation_settings?.n_ctx}
+			<Badge variant="secondary" class="text-xs">
+				ctx: {serverData.default_generation_settings.n_ctx.toLocaleString()}
+			</Badge>
+		{/if}
+	{/if}
+
+	{#if showActions && error}
+		<Button variant="outline" size="sm" class="text-destructive">
+			<AlertTriangle class="h-4 w-4" />
+
+			{error}
+		</Button>
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/server/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/server/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..39ac5b482d235164a932f372ac10b0bfe5247c51
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/server/index.ts
@@ -0,0 +1,80 @@
+/**
+ *
+ * SERVER
+ *
+ * Components for displaying server connection state and handling
+ * connection errors. Integrates with serverStore for state management.
+ *
+ */
+
+/**
+ * **ServerStatus** - Server connection status indicator
+ *
+ * Compact status display showing connection state, model name,
+ * and context size. Used in headers and loading screens.
+ *
+ * **Architecture:**
+ * - Reads state from serverStore (props, loading, error)
+ * - Displays model name from modelsStore
+ *
+ * **Features:**
+ * - Status dot: green (connected), yellow (connecting), red (error), gray (unknown)
+ * - Status text label
+ * - Model name badge with icon
+ * - Context size badge
+ * - Optional error action button
+ *
+ * @example
+ * ```svelte
+ * <ServerStatus showActions />
+ * ```
+ */
+export { default as ServerStatus } from './ServerStatus.svelte';
+
+/**
+ * **ServerErrorSplash** - Full-screen connection error display
+ *
+ * Blocking error screen shown when server connection fails.
+ * Provides retry options and API key input for authentication errors.
+ *
+ * **Architecture:**
+ * - Detects access denied errors for API key flow
+ * - Validates API key against server before saving
+ * - Integrates with settingsStore for API key persistence
+ *
+ * **Features:**
+ * - Error message display with icon
+ * - Retry connection button with loading state
+ * - API key input for authentication errors
+ * - API key validation with success/error feedback
+ * - Troubleshooting section with server start commands
+ * - Animated transitions for UI elements
+ *
+ * @example
+ * ```svelte
+ * <ServerErrorSplash
+ *   error={serverError}
+ *   onRetry={handleRetry}
+ *   showTroubleshooting
+ * />
+ * ```
+ */
+export { default as ServerErrorSplash } from './ServerErrorSplash.svelte';
+
+/**
+ * **ServerLoadingSplash** - Full-screen loading display
+ *
+ * Shown during initial server connection. Displays loading animation
+ * with ServerStatus component for real-time connection state.
+ *
+ * **Features:**
+ * - Animated server icon
+ * - Customizable loading message
+ * - Embedded ServerStatus for live updates
+ *
+ * @example
+ * ```svelte
+ * <ServerLoadingSplash message="Connecting to server..." />
+ * ```
+ */
+export { default as ServerLoadingSplash } from './ServerLoadingSplash.svelte';
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..41105baa5e629b87ee4b5f5babcc153ed9b382e8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte
@@ -0,0 +1,187 @@
+<script lang="ts">
+	import {
+		SettingsChatDesktopSidebar,
+		SettingsChatFields,
+		SettingsChatImportExportTab,
+		SettingsChatMobileHeader,
+		SettingsChatToolsTab,
+		SettingsFooter
+	} from '$lib/components/app/settings';
+	import { config, settingsStore } from '$lib/stores/settings.svelte';
+	import {
+		NUMERIC_FIELDS,
+		POSITIVE_INTEGER_FIELDS,
+		SETTINGS_CHAT_SECTIONS,
+		SETTINGS_SECTION_TITLES,
+		type SettingsSection
+	} from '$lib/constants';
+	import { RouterService } from '$lib/services/router.service';
+	import { setMode } from 'mode-watcher';
+	import { ColorMode } from '$lib/enums/ui.enums';
+	import { fade } from 'svelte/transition';
+	import { goto } from '$app/navigation';
+	import { Button } from '$lib/components/ui/button';
+	import { RefreshCw } from '@lucide/svelte';
+	import { page } from '$app/state';
+	import { setChatSettingsConfigContext } from '$lib/contexts';
+	import { settingsReferrer } from '$lib/stores/settings-referrer.svelte';
+	import { modelsStore } from '$lib/stores/models.svelte';
+	import { isRouterMode } from '$lib/stores/server.svelte';
+	interface Props {
+		initialSection?: string;
+		getSectionHref?: (section: SettingsSection) => string;
+	}
+
+	let { initialSection, getSectionHref }: Props = $props();
+
+	let activeSlug = $derived(
+		initialSection ?? (page.params as Record<string, string | undefined>).section ?? 'general'
+	);
+
+	let currentSection = $derived(
+		SETTINGS_CHAT_SECTIONS.find((section) => section.slug === activeSlug) ||
+			SETTINGS_CHAT_SECTIONS[0]
+	);
+
+	let localConfig: SettingsConfigType = $state({ ...config() });
+
+	let mobileHeader: { updateCarousel: () => void } | undefined;
+
+	let fetchInitiated = false;
+
+	$effect(() => {
+		if (isRouterMode() && currentSection.fields && !fetchInitiated) {
+			fetchInitiated = true;
+
+			void modelsStore
+				.fetch()
+				.then(() => modelsStore.fetchRouterModels())
+				.then(() => modelsStore.fetchModalitiesForLoadedModels())
+				.then(() => modelsStore.ensureFirstModelSelected());
+		}
+	});
+
+	function handleThemeChange(newTheme: string) {
+		localConfig.theme = newTheme;
+		setMode(newTheme as ColorMode);
+	}
+
+	function handleConfigChange(key: string, value: string | boolean) {
+		localConfig[key] = value;
+	}
+
+	function handleReset() {
+		localConfig = { ...config() };
+		setMode(localConfig.theme as ColorMode);
+		mobileHeader?.updateCarousel();
+	}
+
+	function handleSave() {
+		if (
+			localConfig.customJson &&
+			typeof localConfig.customJson === 'string' &&
+			localConfig.customJson.trim()
+		) {
+			try {
+				JSON.parse(localConfig.customJson);
+			} catch (error) {
+				alert('Invalid JSON in custom parameters. Please check the format and try again.');
+				console.error(error);
+				return;
+			}
+		}
+
+		const processedConfig = { ...localConfig };
+
+		for (const field of NUMERIC_FIELDS) {
+			if (processedConfig[field] !== undefined && processedConfig[field] !== '') {
+				const numValue = Number(processedConfig[field]);
+				if (!isNaN(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;
+				}
+			}
+		}
+
+		settingsStore.updateMultipleConfig(processedConfig);
+		goto(settingsReferrer.url);
+	}
+
+	export function reset() {
+		localConfig = { ...config() };
+	}
+
+	setChatSettingsConfigContext({
+		get localConfig() {
+			return localConfig;
+		},
+		handleConfigChange,
+		handleThemeChange
+	});
+</script>
+
+<div class="mx-auto flex h-full w-full flex-col md:pl-8" in:fade={{ duration: 150 }}>
+	<div class="flex flex-1 flex-col gap-4 md:flex-row">
+		<SettingsChatDesktopSidebar
+			sections={SETTINGS_CHAT_SECTIONS}
+			isActive={(section: SettingsSection) => section.slug === activeSlug}
+			getHref={getSectionHref ??
+				((section: SettingsSection) => RouterService.settings(section.slug))}
+		/>
+
+		<SettingsChatMobileHeader
+			sections={SETTINGS_CHAT_SECTIONS}
+			isActive={(section: SettingsSection) => section.slug === activeSlug}
+			getHref={getSectionHref ??
+				((section: SettingsSection) => RouterService.settings(section.slug))}
+			bind:this={mobileHeader}
+		/>
+
+		<div class="mx-auto max-w-3xl flex-1">
+			<div class="space-y-6 p-4 md:p-6 md:pt-28">
+				<div class="grid">
+					<div class="mb-6 flex items-center gap-2 border-b border-border/30 pb-6 md:flex">
+						<currentSection.icon class="h-5 w-5" />
+						<h3 class="text-lg font-semibold">{currentSection.title}</h3>
+					</div>
+
+					{#if currentSection.title === SETTINGS_SECTION_TITLES.TOOLS}
+						<SettingsChatToolsTab />
+					{:else if currentSection.title === SETTINGS_SECTION_TITLES.IMPORT_EXPORT}
+						<SettingsChatImportExportTab />
+					{:else if currentSection.fields}
+						<div class="space-y-6">
+							<SettingsChatFields
+								fields={currentSection.fields}
+								{localConfig}
+								onConfigChange={handleConfigChange}
+								onThemeChange={handleThemeChange}
+							/>
+
+							{#if currentSection.title === SETTINGS_SECTION_TITLES.GENERAL}
+								<div class="flex justify-end">
+									<Button variant="outline" onclick={() => window.location.reload()}>
+										<RefreshCw class="h-3 w-3" />
+										Reload app
+									</Button>
+								</div>
+							{/if}
+						</div>
+					{/if}
+				</div>
+
+				<div class="mt-8 border-t border-border/30 pt-6">
+					<p class="text-xs text-muted-foreground">Settings are saved in browser's localStorage</p>
+				</div>
+			</div>
+
+			<SettingsFooter onReset={handleReset} onSave={handleSave} />
+		</div>
+	</div>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatFields.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatFields.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..7c1c5c8977686ede70254a3e0ec6c51b51c5215c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatFields.svelte
@@ -0,0 +1,267 @@
+<script lang="ts">
+	import { RotateCcw, FlaskConical } from '@lucide/svelte';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import { Input } from '$lib/components/ui/input';
+	import Label from '$lib/components/ui/label/label.svelte';
+	import * as Select from '$lib/components/ui/select';
+	import { Textarea } from '$lib/components/ui/textarea';
+	import { SETTING_CONFIG_INFO, SETTINGS_KEYS } from '$lib/constants';
+	import { SettingsFieldType } from '$lib/enums/settings.enums';
+	import { settingsStore } from '$lib/stores/settings.svelte';
+	import { serverStore } from '$lib/stores/server.svelte';
+	import { modelsStore, selectedModelName, propsCacheVersion } from '$lib/stores/models.svelte';
+	import { normalizeFloatingPoint } from '$lib/utils/precision';
+	import { SettingsChatParameterSourceIndicator } from '$lib/components/app/settings';
+	import type { Component } from 'svelte';
+
+	interface Props {
+		fields: SettingsFieldConfig[];
+		localConfig: SettingsConfigType;
+		onConfigChange: (key: string, value: string | boolean) => void;
+		onThemeChange?: (theme: string) => void;
+	}
+
+	let { fields, localConfig, onConfigChange, onThemeChange }: Props = $props();
+
+	let currentModelParams = $derived.by(() => {
+		propsCacheVersion();
+
+		if (serverStore.isRouterMode) {
+			const currentModelName = selectedModelName();
+
+			if (currentModelName) {
+				const currentModelProps = modelsStore.getModelProps(currentModelName);
+
+				return (currentModelProps?.default_generation_settings?.params ?? {}) as Record<
+					string,
+					unknown
+				>;
+			}
+		}
+		return (serverStore.defaultParams ?? {}) as Record<string, unknown>;
+	});
+</script>
+
+{#each fields as field (field.key)}
+	<div class="space-y-2">
+		{#if field.type === SettingsFieldType.INPUT}
+			{@const currentValue = String(localConfig[field.key] ?? '')}
+			{@const serverDefault = currentModelParams[field.key]}
+			{@const isCustomRealTime = (() => {
+				if (serverDefault == null) return false;
+				if (currentValue === '') return false;
+
+				const numericInput = parseFloat(currentValue);
+				const normalizedInput = !isNaN(numericInput)
+					? Math.round(numericInput * 1000000) / 1000000
+					: currentValue;
+				const normalizedDefault =
+					typeof serverDefault === 'number'
+						? Math.round(serverDefault * 1000000) / 1000000
+						: serverDefault;
+
+				return normalizedInput !== normalizedDefault;
+			})()}
+
+			<div class="flex items-center gap-2">
+				<Label for={field.key} class="flex items-center gap-1.5 text-sm font-medium">
+					{field.label}
+
+					{#if field.isExperimental}
+						<FlaskConical class="h-3.5 w-3.5 text-muted-foreground" />
+					{/if}
+				</Label>
+				{#if isCustomRealTime}
+					<SettingsChatParameterSourceIndicator />
+				{/if}
+			</div>
+
+			<div class="relative w-full">
+				<Input
+					id={field.key}
+					type={field.isPositiveInteger ? 'number' : 'text'}
+					{...field.isPositiveInteger ? { min: '1', step: '1' } : {}}
+					value={currentValue}
+					oninput={(e) => {
+						// Update local config immediately for real-time badge feedback
+						onConfigChange(field.key, e.currentTarget.value);
+					}}
+					placeholder={currentModelParams[field.key] != null
+						? `Default: ${normalizeFloatingPoint(currentModelParams[field.key])}`
+						: ''}
+					class="w-full {isCustomRealTime ? 'pr-8' : ''}"
+				/>
+				{#if isCustomRealTime}
+					<button
+						type="button"
+						onclick={() => {
+							settingsStore.resetParameterToServerDefault(field.key);
+							onConfigChange(field.key, '');
+						}}
+						class="absolute top-1/2 right-2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded transition-colors hover:bg-muted"
+						aria-label="Reset to default"
+						title="Reset to default"
+					>
+						<RotateCcw class="h-3 w-3" />
+					</button>
+				{/if}
+			</div>
+			{#if field.help || SETTING_CONFIG_INFO[field.key]}
+				<p class="mt-1 text-xs text-muted-foreground">
+					{@html field.help || SETTING_CONFIG_INFO[field.key]}
+				</p>
+			{/if}
+		{:else if field.type === SettingsFieldType.TEXTAREA}
+			{#if field.label}
+				<Label for={field.key} class="block flex items-center gap-1.5 text-sm font-medium">
+					{field.label}
+
+					{#if field.isExperimental}
+						<FlaskConical class="h-3.5 w-3.5 text-muted-foreground" />
+					{/if}
+				</Label>
+			{/if}
+
+			<Textarea
+				id={field.key}
+				value={String(localConfig[field.key] ?? '')}
+				onchange={(e) => onConfigChange(field.key, e.currentTarget.value)}
+				placeholder=""
+				class="min-h-[10rem] w-full md:max-w-3xl"
+			/>
+
+			{#if field.help || SETTING_CONFIG_INFO[field.key]}
+				<p class="mt-1 text-xs text-muted-foreground">
+					{field.help || SETTING_CONFIG_INFO[field.key]}
+				</p>
+			{/if}
+
+			{#if field.key === SETTINGS_KEYS.SYSTEM_MESSAGE}
+				<div class="mt-3 flex items-center gap-2">
+					<Checkbox
+						id="showSystemMessage"
+						checked={Boolean(localConfig.showSystemMessage ?? true)}
+						onCheckedChange={(checked) =>
+							onConfigChange(SETTINGS_KEYS.SHOW_SYSTEM_MESSAGE, Boolean(checked))}
+					/>
+
+					<Label for="showSystemMessage" class="cursor-pointer text-sm font-normal">
+						Show system message in conversations
+					</Label>
+				</div>
+			{/if}
+		{:else if field.type === SettingsFieldType.SELECT}
+			{@const selectedOption = field.options?.find(
+				(opt: { value: string; label: string; icon?: Component }) =>
+					opt.value === localConfig[field.key]
+			)}
+			{@const currentValue = localConfig[field.key]}
+			{@const serverDefault = currentModelParams[field.key]}
+			{@const isCustomRealTime = (() => {
+				if (serverDefault == null) return false;
+				if (currentValue === '' || currentValue === undefined) return false;
+				return currentValue !== serverDefault;
+			})()}
+
+			<div class="flex items-center gap-2">
+				<Label for={field.key} class="flex items-center gap-1.5 text-sm font-medium">
+					{field.label}
+
+					{#if field.isExperimental}
+						<FlaskConical class="h-3.5 w-3.5 text-muted-foreground" />
+					{/if}
+				</Label>
+				{#if isCustomRealTime}
+					<SettingsChatParameterSourceIndicator />
+				{/if}
+			</div>
+
+			<Select.Root
+				type="single"
+				value={currentValue}
+				onValueChange={(value) => {
+					if (field.key === SETTINGS_KEYS.THEME && value && onThemeChange) {
+						onThemeChange(value);
+					} else {
+						onConfigChange(field.key, value);
+					}
+				}}
+			>
+				<div class="relative w-full md:w-auto">
+					<Select.Trigger class="w-full">
+						<div class="flex items-center gap-2">
+							{#if selectedOption?.icon}
+								{@const IconComponent = selectedOption.icon}
+								<IconComponent class="h-4 w-4" />
+							{/if}
+
+							{selectedOption?.label || `Select ${field.label.toLowerCase()}`}
+						</div>
+					</Select.Trigger>
+					{#if isCustomRealTime}
+						<button
+							type="button"
+							onclick={() => {
+								settingsStore.resetParameterToServerDefault(field.key);
+								onConfigChange(field.key, '');
+							}}
+							class="absolute top-1/2 right-8 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded transition-colors hover:bg-muted"
+							aria-label="Reset to default"
+							title="Reset to default"
+						>
+							<RotateCcw class="h-3 w-3" />
+						</button>
+					{/if}
+				</div>
+				<Select.Content>
+					{#if field.options}
+						{#each field.options as option (option.value)}
+							<Select.Item value={option.value} label={option.label}>
+								<div class="flex items-center gap-2">
+									{#if option.icon}
+										{@const IconComponent = option.icon}
+										<IconComponent class="h-4 w-4" />
+									{/if}
+									{option.label}
+								</div>
+							</Select.Item>
+						{/each}
+					{/if}
+				</Select.Content>
+			</Select.Root>
+			{#if field.help || SETTING_CONFIG_INFO[field.key]}
+				<p class="mt-1 text-xs text-muted-foreground">
+					{field.help || SETTING_CONFIG_INFO[field.key]}
+				</p>
+			{/if}
+		{:else if field.type === SettingsFieldType.CHECKBOX}
+			<div class="flex items-start space-x-3">
+				<Checkbox
+					id={field.key}
+					checked={Boolean(localConfig[field.key])}
+					onCheckedChange={(checked) => onConfigChange(field.key, checked)}
+					class="mt-1"
+				/>
+
+				<div class="space-y-1">
+					<label
+						for={field.key}
+						class="flex cursor-pointer items-center gap-1.5 pt-1 pb-0.5 text-sm leading-none font-medium"
+					>
+						{field.label}
+
+						{#if field.isExperimental}
+							<FlaskConical class="h-3.5 w-3.5 text-muted-foreground" />
+						{/if}
+					</label>
+
+					{#if field.help || SETTING_CONFIG_INFO[field.key]}
+						<p class="text-xs text-muted-foreground">
+							{field.help || SETTING_CONFIG_INFO[field.key]}
+						</p>
+					{/if}
+				</div>
+			</div>
+		{/if}
+	</div>
+{/each}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatImportExportSection.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatImportExportSection.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..6b36526c333491db5c431223dfe99b72a0e4f59d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatImportExportSection.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import { Button, type ButtonVariant } from '$lib/components/ui/button';
+
+	let {
+		title,
+		description,
+		IconComponent,
+		buttonText,
+		onclick,
+		titleClass,
+		buttonVariant,
+		buttonClass,
+		wrapperClass,
+		summary
+	}: {
+		title: string;
+		description: string;
+		IconComponent: Component;
+		buttonText: string;
+		onclick: () => void;
+		titleClass?: string;
+		buttonVariant?: ButtonVariant;
+		buttonClass?: string;
+		wrapperClass?: string;
+		summary?: { show: boolean; verb: string; items: DatabaseConversation[] };
+	} = $props();
+
+	let sectionButtonClass = $derived(buttonClass ?? 'justify-start justify-self-start md:w-auto');
+	let sectionButtonVariant = $derived(buttonVariant ?? 'outline');
+</script>
+
+<div class="grid gap-1 {wrapperClass ?? ''}">
+	<h4 class="mt-0 mb-2 text-sm font-medium {titleClass ?? ''}">{title}</h4>
+
+	<p class="mb-4 text-sm text-muted-foreground">{description}</p>
+
+	<Button class={sectionButtonClass} {onclick} variant={sectionButtonVariant}>
+		<IconComponent class="mr-2 h-4 w-4" />
+
+		{buttonText}
+	</Button>
+
+	{#if summary && summary.show && summary.items.length > 0}
+		<div class="mt-4 grid overflow-x-auto rounded-lg border border-border/50 bg-muted/30 p-4">
+			<h5 class="mb-2 text-sm font-medium">
+				{summary.verb}
+				{summary.items.length} conversation{summary.items.length === 1 ? '' : 's'}
+			</h5>
+
+			<ul class="space-y-1 text-sm text-muted-foreground">
+				{#each summary.items.slice(0, 10) as conv (conv.id)}
+					<li class="truncate">• {conv.name || 'Untitled conversation'}</li>
+				{/each}
+
+				{#if summary.items.length > 10}
+					<li class="italic">... and {summary.items.length - 10} more</li>
+				{/if}
+			</ul>
+		</div>
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatImportExportTab.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatImportExportTab.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..a86d68584c0162bbaed013f77ea9e9a505abbea2
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatImportExportTab.svelte
@@ -0,0 +1,333 @@
+<script lang="ts">
+	import { Download, Upload, Trash2 } from '@lucide/svelte';
+	import {
+		DialogConversationSelection,
+		DialogConfirmation,
+		DialogExportSettings
+	} from '$lib/components/app';
+	import { createMessageCountMap } from '$lib/utils';
+	import { settingsStore } from '$lib/stores/settings.svelte';
+	import { conversationsStore, conversations } from '$lib/stores/conversations.svelte';
+	import { toast } from 'svelte-sonner';
+	import { fade } from 'svelte/transition';
+	import { ConversationSelectionMode, HtmlInputType, FileExtensionText } from '$lib/enums';
+	import SettingsChatImportExportSection from './SettingsChatImportExportSection.svelte';
+	import SettingsGroup from '$lib/components/app/settings/SettingsGroup.svelte';
+
+	let exportedConversations = $state<DatabaseConversation[]>([]);
+	let importedConversations = $state<DatabaseConversation[]>([]);
+	let showExportSummary = $state(false);
+	let showImportSummary = $state(false);
+
+	let showExportDialog = $state(false);
+	let showImportDialog = $state(false);
+	let availableConversations = $state<DatabaseConversation[]>([]);
+	let messageCountMap = $state<Map<string, number>>(new Map());
+	let fullImportData = $state<Array<{ conv: DatabaseConversation; messages: DatabaseMessage[] }>>(
+		[]
+	);
+
+	// Delete functionality state
+	let showDeleteDialog = $state(false);
+
+	// Settings import/export state
+	let showSettingsExportSummary = $state(false);
+	let showSettingsImportSummary = $state(false);
+	let showSettingsExportDialog = $state(false);
+	let includeSensitiveData = $state(false);
+
+	function handleSettingsExport() {
+		showSettingsExportDialog = true;
+		includeSensitiveData = false;
+	}
+
+	function handleSettingsExportConfirm() {
+		showSettingsExportDialog = false;
+
+		try {
+			const data = settingsStore.exportSettings(includeSensitiveData);
+			const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = `llama_settings_${new Date().toISOString().split('T')[0]}.json`;
+			document.body.appendChild(a);
+			a.click();
+			document.body.removeChild(a);
+			URL.revokeObjectURL(url);
+
+			showSettingsExportSummary = true;
+			showSettingsImportSummary = false;
+			toast.success('Settings exported');
+		} catch (err) {
+			console.error('Failed to export settings:', err);
+			toast.error('Failed to export settings');
+		}
+	}
+
+	function handleSettingsExportCancel() {
+		showSettingsExportDialog = false;
+	}
+
+	function handleSettingsImport() {
+		try {
+			const input = document.createElement('input');
+			input.type = HtmlInputType.FILE;
+			input.accept = FileExtensionText.JSON;
+
+			input.onchange = async (e) => {
+				const file = (e.target as HTMLInputElement)?.files?.[0];
+				if (!file) return;
+
+				try {
+					const text = await file.text();
+					const data = JSON.parse(text);
+
+					if (!data || typeof data !== 'object' || !data.config) {
+						toast.error('Invalid settings file: missing config');
+						return;
+					}
+
+					settingsStore.importSettings(data);
+
+					showSettingsImportSummary = true;
+					showSettingsExportSummary = false;
+					toast.success('Settings imported successfully');
+				} catch (err) {
+					console.error('Failed to import settings:', err);
+					toast.error('Failed to import settings');
+				}
+			};
+
+			input.click();
+		} catch (err) {
+			console.error('Failed to open file picker:', err);
+			toast.error('Failed to open file picker');
+		}
+	}
+
+	async function handleExportClick() {
+		try {
+			const allConversations = conversations();
+			if (allConversations.length === 0) {
+				toast.info('No conversations to export');
+				return;
+			}
+
+			const conversationsWithMessages = await Promise.all(
+				allConversations.map(async (conv: DatabaseConversation) => {
+					const messages = await conversationsStore.getConversationMessages(conv.id);
+					return { conv, messages };
+				})
+			);
+
+			messageCountMap = createMessageCountMap(conversationsWithMessages);
+			availableConversations = allConversations;
+			showExportDialog = true;
+		} catch (err) {
+			console.error('Failed to load conversations:', err);
+			alert('Failed to load conversations');
+		}
+	}
+
+	async function handleExportConfirm(selectedConversations: DatabaseConversation[]) {
+		try {
+			const allData: ExportedConversation[] = await Promise.all(
+				selectedConversations.map(async (conv) => {
+					const messages = await conversationsStore.getConversationMessages(conv.id);
+					return { conv: $state.snapshot(conv), messages: $state.snapshot(messages) };
+				})
+			);
+
+			if (allData.length === 1) {
+				conversationsStore.downloadConversationFile(allData[0]);
+			} else {
+				conversationsStore.downloadConversationsArchive(allData);
+			}
+
+			exportedConversations = selectedConversations;
+			showExportSummary = true;
+			showImportSummary = false;
+			showExportDialog = false;
+		} catch (err) {
+			console.error('Export failed:', err);
+			alert('Failed to export conversations');
+		}
+	}
+
+	async function handleImportClick() {
+		try {
+			const input = document.createElement('input');
+
+			input.type = HtmlInputType.FILE;
+			input.accept = `${FileExtensionText.JSON},${FileExtensionText.JSONL},${FileExtensionText.ZIP}`;
+
+			input.onchange = async (e) => {
+				const file = (e.target as HTMLInputElement)?.files?.[0];
+				if (!file) return;
+
+				try {
+					const importedData = await conversationsStore.parseImportFile(file);
+
+					if (importedData.length === 0) {
+						throw new Error('No conversations found in file');
+					}
+
+					fullImportData = importedData;
+					availableConversations = importedData.map((item) => item.conv);
+					messageCountMap = createMessageCountMap(importedData);
+					showImportDialog = true;
+				} catch (err: unknown) {
+					const message = err instanceof Error ? err.message : 'Unknown error';
+
+					console.error('Failed to parse file:', err);
+					alert(`Failed to parse file: ${message}`);
+				}
+			};
+
+			input.click();
+		} catch (err) {
+			console.error('Import failed:', err);
+			alert('Failed to import conversations');
+		}
+	}
+
+	async function handleImportConfirm(selectedConversations: DatabaseConversation[]) {
+		try {
+			const selectedIds = new Set(selectedConversations.map((c) => c.id));
+			const selectedData = $state
+				.snapshot(fullImportData)
+				.filter((item) => selectedIds.has(item.conv.id));
+
+			await conversationsStore.importConversationsData(selectedData);
+
+			importedConversations = selectedConversations;
+			showImportSummary = true;
+			showExportSummary = false;
+			showImportDialog = false;
+		} catch (err) {
+			console.error('Import failed:', err);
+			alert('Failed to import conversations. Please check the file format.');
+		}
+	}
+
+	async function handleDeleteAllClick() {
+		try {
+			const allConversations = conversations();
+
+			if (allConversations.length === 0) {
+				toast.info('No conversations to delete');
+				return;
+			}
+
+			showDeleteDialog = true;
+		} catch (err) {
+			console.error('Failed to load conversations for deletion:', err);
+			toast.error('Failed to load conversations');
+		}
+	}
+
+	async function handleDeleteAllConfirm() {
+		try {
+			await conversationsStore.deleteAll();
+
+			showDeleteDialog = false;
+		} catch (err) {
+			console.error('Failed to delete conversations:', err);
+		}
+	}
+
+	function handleDeleteAllCancel() {
+		showDeleteDialog = false;
+	}
+</script>
+
+<div class="space-y-12" in:fade={{ duration: 150 }}>
+	<SettingsGroup title="Conversations">
+		<SettingsChatImportExportSection
+			title="Export"
+			description="Download your conversations as a ZIP of JSONL files. This includes all messages, attachments, and conversation history."
+			IconComponent={Download}
+			buttonText="Export conversations"
+			onclick={handleExportClick}
+			summary={{ show: showExportSummary, verb: 'Exported', items: exportedConversations }}
+		/>
+
+		<SettingsChatImportExportSection
+			title="Import"
+			description="Import one or more conversations from a previously exported ZIP or JSONL file. This will merge with your existing conversations."
+			IconComponent={Upload}
+			buttonText="Import conversations"
+			onclick={handleImportClick}
+			summary={{ show: showImportSummary, verb: 'Imported', items: importedConversations }}
+		/>
+
+		<SettingsChatImportExportSection
+			title="Delete All"
+			description="Permanently delete all conversations and their messages. This action cannot be undone. Consider exporting your conversations first if you want to keep a backup."
+			IconComponent={Trash2}
+			buttonText="Delete all conversations"
+			onclick={handleDeleteAllClick}
+			titleClass="text-destructive"
+			buttonVariant="destructive"
+			buttonClass="text-destructive-foreground justify-start justify-self-start bg-destructive hover:bg-destructive/80 md:w-auto"
+		/>
+	</SettingsGroup>
+
+	<SettingsGroup title="Settings">
+		<SettingsChatImportExportSection
+			title="Export"
+			description="Export your chat settings and preferences as a JSON file."
+			IconComponent={Download}
+			buttonText="Export settings"
+			onclick={handleSettingsExport}
+			summary={{ show: showSettingsExportSummary, verb: 'Exported', items: [] }}
+		/>
+
+		<SettingsChatImportExportSection
+			title="Import"
+			description="Import chat settings from a previously exported JSON file. This will merge with your existing settings."
+			IconComponent={Upload}
+			buttonText="Import settings"
+			onclick={handleSettingsImport}
+			summary={{ show: showSettingsImportSummary, verb: 'Imported', items: [] }}
+		/>
+	</SettingsGroup>
+</div>
+
+<DialogExportSettings
+	bind:open={showSettingsExportDialog}
+	bind:includeSensitiveData
+	onConfirm={handleSettingsExportConfirm}
+	onCancel={handleSettingsExportCancel}
+/>
+
+<DialogConversationSelection
+	conversations={availableConversations}
+	{messageCountMap}
+	mode={ConversationSelectionMode.EXPORT}
+	bind:open={showExportDialog}
+	onCancel={() => (showExportDialog = false)}
+	onConfirm={handleExportConfirm}
+/>
+
+<DialogConversationSelection
+	conversations={availableConversations}
+	{messageCountMap}
+	mode={ConversationSelectionMode.IMPORT}
+	bind:open={showImportDialog}
+	onCancel={() => (showImportDialog = false)}
+	onConfirm={handleImportConfirm}
+/>
+
+<DialogConfirmation
+	bind:open={showDeleteDialog}
+	title="Delete all conversations"
+	description="Are you sure you want to delete all conversations? This action cannot be undone and will permanently remove all your conversations and messages."
+	confirmText="Delete All"
+	cancelText="Cancel"
+	variant="destructive"
+	icon={Trash2}
+	onConfirm={handleDeleteAllConfirm}
+	onCancel={handleDeleteAllCancel}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatParameterSourceIndicator.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatParameterSourceIndicator.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..1407eb87ebe8691cd613d494db33e825455f9392
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatParameterSourceIndicator.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Wrench } from '@lucide/svelte';
+	import { Badge } from '$lib/components/ui/badge';
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+</script>
+
+<Badge
+	variant="secondary"
+	class="h-5 bg-orange-100 px-1.5 py-0.5 text-xs text-orange-800 dark:bg-orange-900 dark:text-orange-200 {className}"
+>
+	<Wrench class="mr-1 h-3 w-3" />
+
+	Custom
+</Badge>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatToolsTab.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatToolsTab.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..8bb49a0958cd4ec52b66a7355be55880412d52b5
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatToolsTab.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { ChevronDown, ChevronRight } from '@lucide/svelte';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import * as Collapsible from '$lib/components/ui/collapsible';
+	import { TruncatedText, McpServerIdentity } from '$lib/components/app';
+	import { toolsStore } from '$lib/stores/tools.svelte';
+	import { permissionsStore } from '$lib/stores/permissions.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { SvelteSet } from 'svelte/reactivity';
+
+	let expandedGroups = new SvelteSet<string>();
+	let groups = $derived(toolsStore.toolGroups);
+
+	function toggleExpanded(label: string) {
+		if (expandedGroups.has(label)) {
+			expandedGroups.delete(label);
+		} else {
+			expandedGroups.add(label);
+		}
+	}
+</script>
+
+{#if groups.length === 0}
+	<div class="py-8 text-center text-sm text-muted-foreground">No tools available</div>
+{:else}
+	<div class="space-y-2">
+		{#each groups as group (group.label)}
+			{@const isExpanded = expandedGroups.has(group.label)}
+			<Collapsible.Root open={isExpanded} onOpenChange={() => toggleExpanded(group.label)}>
+				<Collapsible.Trigger
+					class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm hover:bg-muted/50"
+				>
+					{#if isExpanded}
+						<ChevronDown class="h-3.5 w-3.5 shrink-0" />
+					{:else}
+						<ChevronRight class="h-3.5 w-3.5 shrink-0" />
+					{/if}
+
+					{@const faviconUrl = group.serverId ? mcpStore.getServerFavicon(group.serverId) : null}
+
+					<span class="inline-flex min-w-0 items-center gap-1.5 font-medium">
+						{#if group.source === 'mcp'}
+							<McpServerIdentity
+								iconClass="h-4 w-4"
+								iconRounded="rounded-sm"
+								showVersion={false}
+								displayName={group.label}
+								{faviconUrl}
+							/>
+						{:else}
+							<TruncatedText text={group.label} class="font-medium" />
+						{/if}
+					</span>
+
+					<span class="ml-auto shrink-0 text-xs text-muted-foreground">
+						{group.tools.length} tool{group.tools.length !== 1 ? 's' : ''}
+					</span>
+				</Collapsible.Trigger>
+
+				<Collapsible.Content>
+					<div class="ml-4 border-l border-border/50 pl-2">
+						<!-- Header row -->
+						<div class="flex items-center gap-2 px-2 py-1 text-xs text-muted-foreground">
+							<span class="min-w-0 flex-1">Tool</span>
+							<span class="w-16 shrink-0 text-center">Enabled</span>
+							<span class="w-20 shrink-0 text-center">Always allow</span>
+						</div>
+
+						{#each group.tools as entry (entry.key)}
+							{@const toolName = entry.definition.function.name}
+							{@const isEnabled = toolsStore.isToolEnabled(entry.key)}
+							{@const permissionKey = entry.key}
+							{@const isAlwaysAllowed = permissionsStore.hasTool(permissionKey)}
+
+							<div class="flex items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-muted/50">
+								<TruncatedText text={toolName} class="flex-1" showTooltip={true} />
+
+								<div class="flex w-16 shrink-0 justify-center">
+									<Checkbox
+										checked={isEnabled}
+										onCheckedChange={() => toolsStore.toggleTool(entry.key)}
+										class="h-4 w-4"
+									/>
+								</div>
+
+								<div class="flex w-20 shrink-0 justify-center">
+									<Checkbox
+										checked={isAlwaysAllowed}
+										onCheckedChange={() => {
+											if (isAlwaysAllowed) {
+												permissionsStore.revokeTool(permissionKey);
+											} else {
+												permissionsStore.allowTool(permissionKey);
+											}
+										}}
+										class="h-4 w-4"
+									/>
+								</div>
+							</div>
+						{/each}
+					</div>
+				</Collapsible.Content>
+			</Collapsible.Root>
+		{/each}
+	</div>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChatDesktopSidebar.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChatDesktopSidebar.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..8723217b29a90662b05b6978ecbf595884794138
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChatDesktopSidebar.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { Settings } from '@lucide/svelte';
+	import type { SettingsSection, SettingsSectionTitle } from '$lib/constants';
+
+	interface Props {
+		sections: SettingsSection[];
+		isActive: (section: SettingsSection) => boolean;
+		getHref?: (section: SettingsSection) => string;
+		onSectionChange?: (section: SettingsSectionTitle) => void;
+	}
+
+	let { sections, isActive, getHref, onSectionChange }: Props = $props();
+</script>
+
+<div class="sticky top-2 hidden w-64 flex-col self-start bg-background py-4 md:flex gap-6">
+	<div class="flex items-center gap-2 py-2">
+		<Settings class="h-5 w-5 md:h-6 md:w-6" />
+
+		<h1 class="text-xl font-semibold md:text-2xl">Settings</h1>
+	</div>
+
+	<nav class="space-y-1">
+		{#each sections as section (section.title)}
+			{#if getHref}
+				<a
+					class="flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-left text-sm no-underline transition-colors hover:bg-accent {isActive(
+						section
+					)
+						? 'bg-accent text-accent-foreground'
+						: 'text-muted-foreground'}"
+					href={getHref(section)}
+				>
+					<section.icon class="h-4 w-4" />
+					<span class="ml-2">{section.title}</span>
+				</a>
+			{:else}
+				<button
+					class="flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-accent {isActive(
+						section
+					)
+						? 'bg-accent text-accent-foreground'
+						: 'text-muted-foreground'}"
+					onclick={() => onSectionChange?.(section.title)}
+				>
+					<section.icon class="h-4 w-4" />
+					<span class="ml-2">{section.title}</span>
+				</button>
+			{/if}
+		{/each}
+	</nav>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChatMobileHeader.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChatMobileHeader.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..15eedd108b1e9935ad1eede458d5475fb7818cd0
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsChatMobileHeader.svelte
@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { Settings, ChevronLeft, ChevronRight } from '@lucide/svelte';
+	import { onMount, tick } from 'svelte';
+	import type { SettingsSection, SettingsSectionTitle } from '$lib/constants';
+	import { useScrollCarousel } from '$lib/hooks/use-scroll-carousel.svelte';
+
+	interface Props {
+		sections: SettingsSection[];
+		isActive: (section: SettingsSection) => boolean;
+		getHref?: (section: SettingsSection) => string;
+		onSectionChange?: (section: SettingsSectionTitle) => void;
+	}
+
+	let { sections, isActive, getHref, onSectionChange }: Props = $props();
+
+	const carousel = useScrollCarousel();
+
+	onMount(async () => {
+		await tick();
+		if (carousel.scrollContainer) {
+			const activeTab = carousel.scrollContainer.querySelector('[data-active="true"]');
+			if (activeTab instanceof HTMLElement) {
+				carousel.scrollToCenter(activeTab);
+			}
+		}
+	});
+
+	export function updateCarousel() {
+		setTimeout(carousel.updateScrollButtons, 100);
+	}
+</script>
+
+<div class="sticky top-0 z-10 flex flex-col bg-background md:hidden">
+	<div class="flex items-center gap-2 px-4 pt-4 pb-2 md:pt-6">
+		<Settings class="h-5 w-5 md:h-6 md:w-6" />
+
+		<h1 class="text-xl font-semibold md:text-2xl">Settings</h1>
+	</div>
+
+	<div class="border-b border-border/30 py-2">
+		<div class="relative flex items-center" style="scroll-padding: 1rem;">
+			<button
+				class="absolute left-2 z-10 flex h-6 w-6 items-center justify-center rounded-full bg-muted shadow-md backdrop-blur-sm transition-opacity hover:bg-accent {carousel.canScrollLeft
+					? 'opacity-100'
+					: 'pointer-events-none opacity-0'}"
+				onclick={carousel.scrollLeft}
+				aria-label="Scroll left"
+			>
+				<ChevronLeft class="h-4 w-4" />
+			</button>
+
+			<div
+				class="scrollbar-hide overflow-x-auto py-2"
+				bind:this={carousel.scrollContainer}
+				onscroll={carousel.updateScrollButtons}
+			>
+				<div class="flex min-w-max gap-2">
+					{#each sections as section (section.title)}
+						{#if getHref}
+							<a
+								class="flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm whitespace-nowrap no-underline transition-colors first:ml-4 last:mr-4 hover:bg-accent {isActive(
+									section
+								)
+									? 'bg-accent text-accent-foreground'
+									: 'text-muted-foreground'}"
+								data-active={isActive(section)}
+								href={getHref(section)}
+								onclick={(e: MouseEvent) => {
+									carousel.scrollToCenter(e.currentTarget as HTMLElement);
+								}}
+							>
+								<section.icon class="h-4 w-4 flex-shrink-0" />
+								<span>{section.title}</span>
+							</a>
+						{:else}
+							<button
+								class="flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm whitespace-nowrap transition-colors first:ml-4 last:mr-4 hover:bg-accent {isActive(
+									section
+								)
+									? 'bg-accent text-accent-foreground'
+									: 'text-muted-foreground'}"
+								data-active={isActive(section)}
+								onclick={(e: MouseEvent) => {
+									onSectionChange?.(section.title);
+									carousel.scrollToCenter(e.currentTarget as HTMLElement);
+								}}
+							>
+								<section.icon class="h-4 w-4 flex-shrink-0" />
+								<span>{section.title}</span>
+							</button>
+						{/if}
+					{/each}
+				</div>
+			</div>
+
+			<button
+				class="absolute right-2 z-10 flex h-6 w-6 items-center justify-center rounded-full bg-muted shadow-md backdrop-blur-sm transition-opacity hover:bg-accent {carousel.canScrollRight
+					? 'opacity-100'
+					: 'pointer-events-none opacity-0'}"
+				onclick={carousel.scrollRight}
+				aria-label="Scroll right"
+			>
+				<ChevronRight class="h-4 w-4" />
+			</button>
+		</div>
+	</div>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsFooter.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsFooter.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..afc37377d0caac81e9df325dba0635d8719bd065
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsFooter.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog';
+	import { settingsStore } from '$lib/stores/settings.svelte';
+	import { RotateCcw } from '@lucide/svelte';
+
+	interface Props {
+		onReset?: () => void;
+		onSave?: () => void;
+	}
+
+	let { onReset, onSave }: Props = $props();
+
+	let showResetDialog = $state(false);
+
+	function handleResetClick() {
+		showResetDialog = true;
+	}
+
+	function handleConfirmReset() {
+		settingsStore.forceSyncWithServerDefaults();
+		onReset?.();
+
+		showResetDialog = false;
+	}
+
+	function handleSave() {
+		onSave?.();
+	}
+</script>
+
+<div class="sticky bottom-0 mx-auto mt-4 flex w-full justify-between p-6">
+	<div class="flex gap-2">
+		<Button variant="outline" onclick={handleResetClick}>
+			<RotateCcw class="h-3 w-3" />
+
+			Reset to default
+		</Button>
+	</div>
+
+	<Button onclick={handleSave}>Save settings</Button>
+</div>
+
+<AlertDialog.Root bind:open={showResetDialog}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Reset Settings to Default</AlertDialog.Title>
+			<AlertDialog.Description>
+				Are you sure you want to reset all settings to their default values? This will reset all
+				parameters to the values provided by the server's /props endpoint and remove all your custom
+				configurations.
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+			<AlertDialog.Action onclick={handleConfirmReset}>Reset to Default</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsGroup.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsGroup.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..113d32176b873712e0483685274adef0f5995a57
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsGroup.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		title: string;
+		children: Snippet;
+	}
+
+	let { title, children }: Props = $props();
+</script>
+
+<div>
+	<h3 class="mb-6 text-base font-semibold">{title}</h3>
+
+	<div class="space-y-8">
+		{@render children()}
+	</div>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsMcpServers.svelte b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsMcpServers.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..120e7914facf72152fbbae4d632fac89f66af520
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/SettingsMcpServers.svelte
@@ -0,0 +1,154 @@
+<script lang="ts">
+	import { X, Plus } from '@lucide/svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import { toolsStore } from '$lib/stores/tools.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Empty from '$lib/components/ui/empty';
+	import { ActionIcon, McpServerCard, McpServerCardSkeleton } from '$lib/components/app';
+	import { DialogMcpServerAddNew } from '$lib/components/app/dialogs';
+	import { HealthCheckStatus } from '$lib/enums';
+	import { ROUTES } from '$lib/constants';
+	import { fade } from 'svelte/transition';
+	import { onMount } from 'svelte';
+	import McpLogo from '../mcp/McpLogo.svelte';
+	import { browser } from '$app/environment';
+	import { page } from '$app/state';
+	import { goto, replaceState } from '$app/navigation';
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className }: Props = $props();
+
+	let servers = $derived(mcpStore.visibleMcpServers);
+
+	let isAddingServer = $state(false);
+
+	let previousRouteId = $state<string | null>(null);
+
+	$effect(() => {
+		const currentId = page.route.id;
+		return () => {
+			previousRouteId = currentId;
+		};
+	});
+
+	function handleClose() {
+		const prevIsMcpServers = previousRouteId === '/mcp-servers';
+		if (browser && window.history.length > 1 && !prevIsMcpServers) {
+			history.back();
+		} else {
+			goto(ROUTES.START);
+		}
+	}
+
+	onMount(() => {
+		if (page.url.searchParams.has('add')) {
+			isAddingServer = true;
+
+			const newUrl = new URL(page.url);
+			newUrl.searchParams.delete('add');
+
+			replaceState(newUrl, {});
+		}
+	});
+
+	// Each card decides for itself whether to render based on its own
+	// health-check state, so adding a server only flashes the new card
+	// (not every other already-loaded card) until its health check resolves.
+	function isServerPending(serverId: string): boolean {
+		const status = mcpStore.getHealthCheckState(serverId).status;
+		return status === HealthCheckStatus.IDLE || status === HealthCheckStatus.CONNECTING;
+	}
+</script>
+
+<div in:fade={{ duration: 150 }} class="flex min-h-[calc(100dvh-4rem)] flex-col">
+	<div class="fixed top-4.5 right-4 z-50 md:hidden">
+		<ActionIcon icon={X} tooltip="Close" onclick={handleClose} />
+	</div>
+
+	<div
+		class="sticky top-0 z-10 mt-4 mb-2 flex items-start gap-4 md:p-4 p-0 px-4 md:justify-between md:px-8"
+	>
+		<div class="flex items-center gap-2">
+			<McpLogo class="h-5 w-5 md:h-6 md:w-6" />
+
+			<h1 class="text-lg font-semibold md:text-2xl">MCP Servers</h1>
+		</div>
+	</div>
+
+	<DialogMcpServerAddNew bind:open={isAddingServer} />
+
+	{#if servers.length === 0}
+		<div class="flex flex-1 items-center justify-center py-16">
+			<Empty.Root class="max-w-md">
+				<Empty.Header>
+					<Empty.Media variant="icon">
+						<Plus />
+					</Empty.Media>
+
+					<Empty.Title>Add your first MCP server</Empty.Title>
+
+					<Empty.Description>Connect a remote MCP server by URL.</Empty.Description>
+				</Empty.Header>
+
+				<Empty.Content>
+					<Button size="sm" onclick={() => (isAddingServer = true)}>
+						<Plus />
+
+						Add New Server
+					</Button>
+				</Empty.Content>
+			</Empty.Root>
+		</div>
+	{:else}
+		<div
+			class="grid gap-3 {className}"
+			style="grid-template-columns: repeat(auto-fill, minmax(min(32rem, calc(100dvw - 2rem)), 1fr));"
+		>
+			{#each servers as server (server.id)}
+				{#if isServerPending(server.id)}
+					<McpServerCardSkeleton />
+				{:else}
+					<McpServerCard
+						{server}
+						enabled={conversationsStore.isMcpServerEnabledForChat(server.id)}
+						onToggle={async () => {
+							const wasEnabled = conversationsStore.isMcpServerEnabledForChat(server.id);
+							await conversationsStore.toggleMcpServerForChat(server.id);
+							if (!wasEnabled) {
+								toolsStore.enableAllToolsForServer(server.id);
+							}
+						}}
+						onUpdate={(updates) => mcpStore.updateServer(server.id, updates)}
+						onDelete={() => mcpStore.removeServer(server.id)}
+					/>
+				{/if}
+			{/each}
+
+			{#if !isAddingServer}
+				<Empty.Root class="border">
+					<Empty.Header>
+						<Empty.Media variant="icon">
+							<Plus />
+						</Empty.Media>
+
+						<Empty.Title>Add another MCP server</Empty.Title>
+
+						<Empty.Description>Connect a remote MCP server by URL.</Empty.Description>
+					</Empty.Header>
+
+					<Empty.Content>
+						<Button size="sm" onclick={() => (isAddingServer = true)}>
+							<Plus />
+
+							Add New Server
+						</Button>
+					</Empty.Content>
+				</Empty.Root>
+			{/if}
+		</div>
+	{/if}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/app/settings/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..63f9651df62dad97d543ece4d55c95ba18933de3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/app/settings/index.ts
@@ -0,0 +1,76 @@
+/**
+ * Full chat settings page layout with sidebar, mobile header, and content area.
+ * Manages local configuration state, section navigation, and context setup.
+ * Accepts an optional `initialSection` prop to override the URL-based section resolution.
+ */
+export { default as SettingsChat } from './SettingsChat/SettingsChat.svelte';
+
+/**
+ * Desktop sidebar navigation for chat settings.
+ * Displays a list of settings sections with icons and titles.
+ * Supports both hash-link navigation (via `getHref`) and in-app section switching (via `onSectionChange`).
+ */
+export { default as SettingsChatDesktopSidebar } from './SettingsChatDesktopSidebar.svelte';
+
+/**
+ * Mobile header with a horizontally scrollable section picker for chat settings.
+ * Shows chevron buttons for scroll navigation and highlights the active section.
+ * Supports both hash-link navigation (via `getHref`) and in-app section switching (via `onSectionChange`).
+ */
+export { default as SettingsChatMobileHeader } from './SettingsChatMobileHeader.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 SettingsChatParameterSourceIndicator } from './SettingsChat/SettingsChatParameterSourceIndicator.svelte';
+
+/**
+ * Section wrapper for settings panels. Displays a title heading with
+ * child content in a structured layout.
+ */
+export { default as SettingsGroup } from './SettingsGroup.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 SettingsFooter } from './SettingsFooter.svelte';
+
+/**
+ * Settings Import/Export panel.
+ * Provides UI for importing and exporting chat conversations.
+ */
+export { default as SettingsChatImportExportTab } from './SettingsChat/SettingsChatImportExportTab.svelte';
+
+/**
+ * Section wrapper for import/export sections. Displays a title, description,
+ * icon button, and optional summary of recent actions.
+ */
+export { default as SettingsChatImportExportSection } from './SettingsChat/SettingsChatImportExportSection.svelte';
+
+/**
+ * MCP Servers configuration panel.
+ * Provides UI for managing Model Context Protocol (MCP) server connections.
+ */
+export { default as SettingsMcpServers } from './SettingsMcpServers.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 SettingsChatFields } from './SettingsChat/SettingsChatFields.svelte';
+
+/**
+ * **SettingsChatToolsTab** - Tools configuration tab for chat settings
+ *
+ * Displays available tools grouped by source (built-in, MCP, custom) with
+ * toggles to enable/disable individual tools and tool groups. Shows MCP
+ * server favicons and permission management controls.
+ */
+export { default as SettingsChatToolsTab } from './SettingsChat/SettingsChatToolsTab.svelte';
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/pwa/PwaMetaTags.svelte b/backend/llama.cpp/tools/ui/src/lib/components/pwa/PwaMetaTags.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..a3a406f26fafce40306802ca3c6e1d8a8be584f3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/pwa/PwaMetaTags.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { APPLE_META_TAGS, MEDIA_QUERIES, THEME_COLORS } from '$lib/constants/pwa';
+	import { APP_NAME } from '$lib/constants';
+
+	let { appName = APP_NAME } = $props();
+</script>
+
+<svelte:head>
+	<!-- Theme color for light/dark modes -->
+	<meta name="theme-color" content={THEME_COLORS.LIGHT} media={MEDIA_QUERIES.PREFERS_LIGHT} />
+	<meta name="theme-color" content={THEME_COLORS.DARK} media={MEDIA_QUERIES.PREFERS_DARK} />
+
+	<!-- Apple mobile web app meta tags -->
+	<meta
+		name={APPLE_META_TAGS.MOBILE_WEB_APP_CAPABLE.name}
+		content={APPLE_META_TAGS.MOBILE_WEB_APP_CAPABLE.content}
+	/>
+	<meta
+		name={APPLE_META_TAGS.STATUS_BAR_STYLE.name}
+		content={APPLE_META_TAGS.STATUS_BAR_STYLE.content}
+	/>
+	<meta name={APPLE_META_TAGS.MOBILE_WEB_APP_TITLE.name} content={appName} />
+</svelte:head>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/pwa/PwaRefreshAlert.svelte b/backend/llama.cpp/tools/ui/src/lib/components/pwa/PwaRefreshAlert.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..500abdc135617a054f7cc1be57ef7cf6f149b2ed
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/pwa/PwaRefreshAlert.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card';
+	import { Button } from '$lib/components/ui/button';
+
+	let { needRefresh: needRefreshProp, updateServiceWorker, forceReload } = $props();
+	let needRefresh = $derived(needRefreshProp ?? false);
+</script>
+
+{#if needRefresh}
+	<Card.Root class="overflow-hidden gap-1 py-5">
+		<Card.Header class="px-5">
+			<Card.Title class="text-sm font-medium">Update available</Card.Title>
+		</Card.Header>
+
+		<Card.Content class="gap-6 grid px-5">
+			<p class="text-xs text-muted-foreground">A new version is available. Reload to update.</p>
+
+			<Button
+				class="justify-self-end-safe"
+				size="sm"
+				onclick={() => {
+					updateServiceWorker();
+
+					if (forceReload) {
+						window.location.reload();
+					}
+
+					needRefresh = false;
+				}}
+			>
+				Reload
+			</Button>
+		</Card.Content>
+	</Card.Root>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/pwa/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/pwa/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fbaaae2396bb0b0cc5a60a5c638d10a3c8aeee8d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/pwa/index.ts
@@ -0,0 +1,2 @@
+export { default as PwaMetaTags } from './PwaMetaTags.svelte';
+export { default as PwaRefreshAlert } from './PwaRefreshAlert.svelte';
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..162107eb1ef8650b46a28d7fa22d8148248c8e11
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.ActionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants(), className)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..6b3f354a91dcfc7a27bb4b6fad86c64d0951d53a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { buttonVariants } from '$lib/components/ui/button/index.js';
+	import { cn } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.CancelProps = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant: 'outline' }), className)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..c0bb2a34e4f216f1ef9ffaf663753800fbec7fdd
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import AlertDialogOverlay from './alert-dialog-overlay.svelte';
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<AlertDialogPrimitive.PortalProps>;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		data-slot="alert-dialog-content"
+		class={cn(
+			'fixed z-[999999] grid w-full gap-4 border bg-background p-6 shadow-lg duration-200',
+			// Mobile: Bottom sheet behavior
+			'right-0 bottom-0 left-0 max-h-[100dvh] translate-x-0 translate-y-0 overflow-y-auto rounded-t-lg',
+			'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:fill-mode-forwards data-[state=closed]:slide-out-to-bottom-full',
+			'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-full',
+			// Desktop: Centered dialog behavior
+			'sm:top-[50%] sm:right-auto sm:bottom-auto sm:left-[50%] sm:max-h-[100vh] sm:max-w-lg sm:translate-x-[-50%] sm:translate-y-[-50%] sm:rounded-lg',
+			'sm:data-[state=closed]:slide-out-to-bottom-0 sm:data-[state=closed]:zoom-out-95',
+			'sm:data-[state=open]:slide-in-from-bottom-0 sm:data-[state=open]:zoom-in-95',
+			className
+		)}
+		{...restProps}
+	/>
+</AlertDialogPrimitive.Portal>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..84735d870c669b27050f6496305689a29dca4e5b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	data-slot="alert-dialog-description"
+	class={cn('text-sm text-muted-foreground', className)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..da0f7be74b65a78018d4944120c5452556b5bbab
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-footer"
+	class={cn(
+		'mt-6 flex flex-row gap-2 sm:mt-0 sm:justify-end [&>*]:flex-1 sm:[&>*]:flex-none',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..fa6539db2902b32c307d09a4c228a2732063abd0
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-header"
+	class={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..b047dcf6c450f07b506fb0d71c42f293fe3d9ec6
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	data-slot="alert-dialog-overlay"
+	class={cn(
+		'fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:fill-mode-forwards data-[state=open]:animate-in data-[state=open]:fade-in-0',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..4c610aa602336970a6ff3a7e526d95bc42189245
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	data-slot="alert-dialog-title"
+	class={cn('text-lg font-semibold', className)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..51a3da159f60875caa6b45999f10a654f36bea5f
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a4439bc2e16ffc262cb7061c2f92b5d92f461ad0
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert-dialog/index.ts
@@ -0,0 +1,39 @@
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+import Trigger from './alert-dialog-trigger.svelte';
+import Title from './alert-dialog-title.svelte';
+import Action from './alert-dialog-action.svelte';
+import Cancel from './alert-dialog-cancel.svelte';
+import Footer from './alert-dialog-footer.svelte';
+import Header from './alert-dialog-header.svelte';
+import Overlay from './alert-dialog-overlay.svelte';
+import Content from './alert-dialog-content.svelte';
+import Description from './alert-dialog-description.svelte';
+
+const Root = AlertDialogPrimitive.Root;
+const Portal = AlertDialogPrimitive.Portal;
+
+export {
+	Root,
+	Title,
+	Action,
+	Cancel,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	//
+	Root as AlertDialog,
+	Title as AlertDialogTitle,
+	Action as AlertDialogAction,
+	Cancel as AlertDialogCancel,
+	Portal as AlertDialogPortal,
+	Footer as AlertDialogFooter,
+	Header as AlertDialogHeader,
+	Trigger as AlertDialogTrigger,
+	Overlay as AlertDialogOverlay,
+	Content as AlertDialogContent,
+	Description as AlertDialogDescription
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/alert/alert-description.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert/alert-description.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..440d0069d3b1446df4eb204565139607648353f0
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert/alert-description.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-description"
+	class={cn(
+		'col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/alert/alert-title.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert/alert-title.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..0721aebf12a15fa36a51d6bbc8be57fad0bdb62a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert/alert-title.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-title"
+	class={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/alert/alert.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert/alert.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..7d79e4bc0edf4962d1cb59eaba3382be6f72f8b8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert/alert.svelte
@@ -0,0 +1,44 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const alertVariants = tv({
+		base: 'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+		variants: {
+			variant: {
+				default: 'bg-card text-card-foreground',
+				destructive:
+					'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current'
+			}
+		},
+		defaultVariants: {
+			variant: 'default'
+		}
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = 'default',
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert"
+	class={cn(alertVariants({ variant }), className)}
+	{...restProps}
+	role="alert"
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/alert/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5e0f854da6f6184a15f5d70e7872193945ac5729
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/alert/index.ts
@@ -0,0 +1,14 @@
+import Root from './alert.svelte';
+import Description from './alert-description.svelte';
+import Title from './alert-title.svelte';
+export { alertVariants, type AlertVariant } from './alert.svelte';
+
+export {
+	Root,
+	Description,
+	Title,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/badge/badge.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/badge/badge.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..9fbf0b80a592b56bfabf90dc566797200612b8d7
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/badge/badge.svelte
@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const badgeVariants = tv({
+		base: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
+				secondary:
+					'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
+				tertiary:
+					'bg-foreground/15 dark:bg-foreground/10 text-foreground [a&]:hover:bg-foreground/25 border-transparent',
+				destructive:
+					'bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white',
+				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground'
+			}
+		},
+		defaultVariants: {
+			variant: 'default'
+		}
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/components/ui/utils';
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = 'default',
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'span'}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className, 'backdrop-blur-sm')}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/badge/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/badge/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f05fb87facb3830f097521b7643349a790f58425
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/badge/index.ts
@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.svelte';
+export { badgeVariants, type BadgeVariant } from './badge.svelte';
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/button-group/button-group-root.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/button-group/button-group-root.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..4587ec38ec3f44a9ca47d9fd0a5a0d7bb1f1e914
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/button-group/button-group-root.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from '$lib/components/ui/utils';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<div
+	class={cn(
+		'flex items-center [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none',
+		className
+	)}
+	{...restProps}
+>
+	{@render children()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/button-group/button-group-separator.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/button-group/button-group-separator.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..d13c573c8e2f8ceb92d71574ac82412b5f9ad6d2
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/button-group/button-group-separator.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { cn } from '$lib/components/ui/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let { ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div class={cn('shrink-0 self-stretch bg-border', 'w-px')} {...restProps}></div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/button-group/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/button-group/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b0d2e30441b87d19b2151c4f3e9855584524d5a4
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/button-group/index.ts
@@ -0,0 +1,2 @@
+export { default as Root } from './button-group-root.svelte';
+export { default as Separator } from './button-group-separator.svelte';
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/button/button.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/button/button.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..165b9fd6895335faddfa5eb60b30a8890cce00cd
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,90 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from '$lib/components/ui/utils';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
+				destructive:
+					'bg-destructive shadow-sm hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white!',
+				outline:
+					'shadow-sm hover:text-accent-foreground hover:bg-muted-foreground/10 backdrop-blur-sm dark:border-input border',
+				secondary:
+					'bg-background dark:bg-muted-foreground/15 dark:text-secondary-foreground shadow-sm text-foreground hover:bg-muted-foreground/20 dark:hover:bg-muted-foreground/25',
+				ghost: 'hover:text-accent-foreground hover:bg-muted-foreground/10 backdrop-blur-sm',
+				link: 'text-primary underline-offset-4 hover:underline'
+			},
+			size: {
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+				lg: 'h-10 rounded-lg px-6 has-[>svg]:px-4',
+				'icon-lg': 'size-10',
+				icon: 'size-9',
+				'icon-sm': 'size-5 rounded-sm'
+			}
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default'
+		}
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		ref = $bindable(null),
+		href = undefined,
+		type = 'button',
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? 'link' : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
+
+<style>
+	a,
+	button {
+		cursor: pointer;
+	}
+</style>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/button/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/button/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5414d9d34a73454903a9ae1d9826257d42fd8d10
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/button/index.ts
@@ -0,0 +1,17 @@
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants
+} from './button.svelte';
+
+export {
+	Root,
+	type ButtonProps as Props,
+	//
+	Root as Button,
+	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card-action.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card-action.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..0d4e965a67b3d649d34e0d18227bde04532f7c74
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card-action.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card-content.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card-content.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..c68f6136078b11defbce249dc981e3b648f93cac
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/components/ui/utils';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="card-content" class={cn('px-6', className)} {...restProps}>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card-description.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card-description.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..81578dfdf8b8ca1e6e734f35b0d5632b80bbc4e1
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/components/ui/utils';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn('text-sm text-muted-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card-footer.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card-footer.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..0366459f8e6b1991f54090c61bb96cedd127c138
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card-header.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card-header.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..74ab1639bdff163aa0a554907350de0119b9fa7a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card-title.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card-title.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..8dfc062dc38d27014265ea3b07bb191e685dea5f
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/components/ui/utils';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-title"
+	class={cn('leading-none font-semibold', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..d0a57d0c9704da401a68810c11473160b116ac53
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/components/ui/utils';
+	import { BOX_BORDER } from '$lib/constants';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card"
+	class={cn(
+		'flex flex-col gap-6 rounded-xl bg-card py-6 text-card-foreground shadow-sm',
+		BOX_BORDER,
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/card/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/card/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..77d36747788e7a492ecbb236cc6e5c1fa8fe6428
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/card/index.ts
@@ -0,0 +1,25 @@
+import Root from './card.svelte';
+import Content from './card-content.svelte';
+import Description from './card-description.svelte';
+import Footer from './card-footer.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';
+import Action from './card-action.svelte';
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	Action,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+	Action as CardAction
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/checkbox/checkbox.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/checkbox/checkbox.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..aafa071881701a544fad2a45ea959a64b46ee55b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/checkbox/checkbox.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import { cn, type WithoutChildrenOrChild } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	data-slot="checkbox"
+	class={cn(
+		'peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
+		className
+	)}
+	bind:checked
+	bind:indeterminate
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<div data-slot="checkbox-indicator" class="text-current transition-none">
+			{#if checked}
+				<CheckIcon class="size-3.5" />
+			{:else if indeterminate}
+				<MinusIcon class="size-3.5" />
+			{/if}
+		</div>
+	{/snippet}
+</CheckboxPrimitive.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/checkbox/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/checkbox/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5c276719befc1a25da540e07f2dcd2de65cc3a16
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/checkbox/index.ts
@@ -0,0 +1,6 @@
+import Root from './checkbox.svelte';
+export {
+	Root,
+	//
+	Root as Checkbox
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/collapsible/collapsible-content.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/collapsible/collapsible-content.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..59b068c5f3ef2b74679e2297904fef09047f7b46
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/collapsible/collapsible-content.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props();
+</script>
+
+<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/collapsible/collapsible-trigger.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/collapsible/collapsible-trigger.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..c88cebaff3f972eeba04df6e91ddc216211f4922
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/collapsible/collapsible-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.TriggerProps = $props();
+</script>
+
+<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} />
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/collapsible/collapsible.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/collapsible/collapsible.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..7a8c5da46811a97fc2ba0ac9f4dd3c04859723f2
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/collapsible/collapsible.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		...restProps
+	}: CollapsiblePrimitive.RootProps = $props();
+</script>
+
+<CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} />
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/collapsible/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/collapsible/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8181f6448d98ddfbade523e410f71d37bdc17f44
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/collapsible/index.ts
@@ -0,0 +1,13 @@
+import Root from './collapsible.svelte';
+import Trigger from './collapsible-trigger.svelte';
+import Content from './collapsible-content.svelte';
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Collapsible,
+	Content as CollapsibleContent,
+	Trigger as CollapsibleTrigger
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-close.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-close.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..e8a96a773163dcf63fb34fa3281e2b83600d7f5b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-content.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-content.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..0e1b07c40ed203a75dff262acda532f049e76af7
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import XIcon from '@lucide/svelte/icons/x';
+	import type { Snippet } from 'svelte';
+	import * as Dialog from './index.js';
+	import { cn, type WithoutChildrenOrChild } from '$lib/components/ui/utils';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: DialogPrimitive.PortalProps;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<Dialog.Portal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			`fixed top-[50%] left-[50%] z-50 grid max-h-[100dvh] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-lg border border-border/30 bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:fill-mode-forwards data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg md:max-h-[100vh]`,
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close
+				class="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+			>
+				<XIcon />
+				<span class="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</Dialog.Portal>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-description.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-description.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..6c0c192316266ac5db18eae7910ddcb01c09b5cd
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/components/ui/utils';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn('text-sm text-muted-foreground', className)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-footer.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-footer.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..abf948fc8ea9c970d6552aef3d4413e8c40a401f
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-footer"
+	class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-header.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-header.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..7ba9ba17b0dccd12120bc74255f91db3251f49ab
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/components/ui/utils';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-overlay.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..a7803f9036802cdca0b54d7094c6e3e5822081c5
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/components/ui/utils';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={cn(
+		'fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:fill-mode-forwards data-[state=open]:animate-in data-[state=open]:fade-in-0',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-title.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-title.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..e8c99c5d95080ec45a368242405f95637cadf8c2
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/components/ui/utils';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn('text-lg leading-none font-semibold', className)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-trigger.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-trigger.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..ac04d9fe453d39aac03f42cdf0d8e08e9d847333
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/dialog-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d9e5fb86efe22c051478774f1b179ba6da4dfdda
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,37 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+
+import Title from './dialog-title.svelte';
+import Footer from './dialog-footer.svelte';
+import Header from './dialog-header.svelte';
+import Overlay from './dialog-overlay.svelte';
+import Content from './dialog-content.svelte';
+import Description from './dialog-description.svelte';
+import Trigger from './dialog-trigger.svelte';
+import Close from './dialog-close.svelte';
+
+const Root = DialogPrimitive.Root;
+const Portal = DialogPrimitive.Portal;
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..e71acefab673b66dcc63b8ac6004b0b58a1c190f
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import { cn, type WithoutChildrenOrChild } from '$lib/components/ui/utils.js';
+	import type { Snippet } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="dropdown-menu-checkbox-item"
+	class={cn(
+		"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+			{#if indeterminate}
+				<MinusIcon class="size-4" />
+			{:else}
+				<CheckIcon class={cn('size-4', !checked && 'text-transparent')} />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</DropdownMenuPrimitive.CheckboxItem>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..0ca0d3964acf789ca1781115d4914d681bc6941c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { cn } from '$lib/components/ui/utils.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		sideOffset = 4,
+		portalProps,
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.ContentProps & {
+		portalProps?: DropdownMenuPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...portalProps}>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		data-slot="dropdown-menu-content"
+		{sideOffset}
+		class={cn(
+			'z-50 max-h-(--bits-dropdown-menu-content-available-height) min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover p-1.5 text-popover-foreground shadow-md outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:fill-mode-forwards data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 dark:border-border/20',
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPrimitive.Portal>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..f2179668b5612a1c3601a34b9a9722c2e767f41b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/components/ui/utils.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		...restProps
+	}: ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+	bind:ref
+	data-slot="dropdown-menu-group-heading"
+	data-inset={inset}
+	class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8', className)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..261ab7e6399029ce8750afdd3c0d3b8788f3cc01
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..1ac561595d98c38738f5b8c6c8ebe4f6b8df0c74
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { cn } from '$lib/components/ui/utils.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		variant = 'default',
+		...restProps
+	}: DropdownMenuPrimitive.ItemProps & {
+		inset?: boolean;
+		variant?: 'default' | 'destructive';
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+	bind:ref
+	data-slot="dropdown-menu-item"
+	data-inset={inset}
+	data-variant={variant}
+	class={cn(
+		"relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:!text-destructive",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..15b546ea57c31cabe16fa4c1a17301628c1edde3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dropdown-menu-label"
+	data-inset={inset}
+	class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..3e98749198cae5a18fe5981e90e01c29dcf398c8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		...restProps
+	}: DropdownMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-radio-group"
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..97ba772838739b9873f6facbb8138adf9a8bb768
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import CircleIcon from '@lucide/svelte/icons/circle';
+	import { cn, type WithoutChild } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+	bind:ref
+	data-slot="dropdown-menu-radio-item"
+	class={cn(
+		"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+			{#if checked}
+				<CircleIcon class="size-2 fill-current" />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</DropdownMenuPrimitive.RadioItem>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..17b64ac9c2477ff9e278b7599b33b6f1e7082f0a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+	bind:ref
+	data-slot="dropdown-menu-separator"
+	class={cn('-mx-1 my-1 h-px bg-border/20', className)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..c3ccc21920cb5d5082b86803cb7e05730cb365de
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="dropdown-menu-shortcut"
+	class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..e26c51cdc23c7f350b22ebc328f396cf39293adc
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+	bind:ref
+	data-slot="dropdown-menu-sub-content"
+	class={cn(
+		'z-50 max-h-(--bits-dropdown-menu-content-available-height) min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover p-1.5 text-popover-foreground shadow-md outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:fill-mode-forwards data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 dark:border-border/20',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..550a789ce852d220f3d1076d01300e8544b08e4a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { cn } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: DropdownMenuPrimitive.SubTriggerProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	bind:ref
+	data-slot="dropdown-menu-sub-trigger"
+	data-inset={inset}
+	class={cn(
+		"flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRightIcon class="ml-auto size-4" />
+</DropdownMenuPrimitive.SubTrigger>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..032b6453159dab5cb49e6a78c8bbe7287b78aa3c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...restProps} />
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aeb398e0611336e9f6317169ea66f953c4ae84ae
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,49 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
+import Content from './dropdown-menu-content.svelte';
+import Group from './dropdown-menu-group.svelte';
+import Item from './dropdown-menu-item.svelte';
+import Label from './dropdown-menu-label.svelte';
+import RadioGroup from './dropdown-menu-radio-group.svelte';
+import RadioItem from './dropdown-menu-radio-item.svelte';
+import Separator from './dropdown-menu-separator.svelte';
+import Shortcut from './dropdown-menu-shortcut.svelte';
+import Trigger from './dropdown-menu-trigger.svelte';
+import SubContent from './dropdown-menu-sub-content.svelte';
+import SubTrigger from './dropdown-menu-sub-trigger.svelte';
+import GroupHeading from './dropdown-menu-group-heading.svelte';
+const Sub = DropdownMenuPrimitive.Sub;
+const Root = DropdownMenuPrimitive.Root;
+
+export {
+	CheckboxItem,
+	Content,
+	Root as DropdownMenu,
+	CheckboxItem as DropdownMenuCheckboxItem,
+	Content as DropdownMenuContent,
+	Group as DropdownMenuGroup,
+	Item as DropdownMenuItem,
+	Label as DropdownMenuLabel,
+	RadioGroup as DropdownMenuRadioGroup,
+	RadioItem as DropdownMenuRadioItem,
+	Separator as DropdownMenuSeparator,
+	Shortcut as DropdownMenuShortcut,
+	Sub as DropdownMenuSub,
+	SubContent as DropdownMenuSubContent,
+	SubTrigger as DropdownMenuSubTrigger,
+	Trigger as DropdownMenuTrigger,
+	GroupHeading as DropdownMenuGroupHeading,
+	Group,
+	GroupHeading,
+	Item,
+	Label,
+	RadioGroup,
+	RadioItem,
+	Root,
+	Separator,
+	Shortcut,
+	Sub,
+	SubContent,
+	SubTrigger,
+	Trigger
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/empty-content.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/empty-content.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..cbae3ab041b95e179d8fdcd6f237b79e4b727955
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/empty-content.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-content"
+	class={cn(
+		'gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/empty-description.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/empty-description.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..4d0fd7d534dfc55cc0d47a3a7a9f434c220768fa
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/empty-description.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-description"
+	class={cn(
+		'text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/empty-header.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/empty-header.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..87014feaffa199ea3561c6aa394468ff83fe7319
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/empty-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-header"
+	class={cn('gap-2 flex max-w-sm flex-col items-center', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/empty-media.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/empty-media.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..13e15918c191daad703841c0c8c3a9d578756dae
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/empty-media.svelte
@@ -0,0 +1,41 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	export const emptyMediaVariants = tv({
+		base: 'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4"
+			}
+		},
+		defaultVariants: {
+			variant: 'default'
+		}
+	});
+
+	export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = 'default',
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: EmptyMediaVariant } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-icon"
+	data-variant={variant}
+	class={cn(emptyMediaVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/empty-title.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/empty-title.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..83c9810eb98360836813f67edb83e7eeb33e930b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/empty-title.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-title"
+	class={cn('text-sm font-medium tracking-tight', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/empty.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/empty.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..6c38c10a9b6ce21d0e505295ac32e9d0c1620e22
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/empty.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty"
+	class={cn(
+		'gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cae5ff9148df9a716db1af78dc1488890170c655
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/empty/index.ts
@@ -0,0 +1,22 @@
+import Root from './empty.svelte';
+import Header from './empty-header.svelte';
+import Media from './empty-media.svelte';
+import Title from './empty-title.svelte';
+import Description from './empty-description.svelte';
+import Content from './empty-content.svelte';
+
+export {
+	Root,
+	Header,
+	Media,
+	Title,
+	Description,
+	Content,
+	//
+	Root as Empty,
+	Header as EmptyHeader,
+	Media as EmptyMedia,
+	Title as EmptyTitle,
+	Description as EmptyDescription,
+	Content as EmptyContent
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/hover-card/hover-card-content.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/hover-card/hover-card-content.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..db1406a7b5f9788655dd92d1317355292551549c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/hover-card/hover-card-content.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/components/ui/utils.js';
+	import HoverCardPortal from './hover-card-portal.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		align = 'center',
+		sideOffset = 4,
+		portalProps,
+		...restProps
+	}: HoverCardPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof HoverCardPortal>>;
+	} = $props();
+</script>
+
+<HoverCardPortal {...portalProps}>
+	<HoverCardPrimitive.Content
+		bind:ref
+		data-slot="hover-card-content"
+		{align}
+		{sideOffset}
+		class={cn(
+			'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 origin-(--transform-origin) outline-hidden',
+			className
+		)}
+		{...restProps}
+	/>
+</HoverCardPortal>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/hover-card/hover-card-portal.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/hover-card/hover-card-portal.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..9dc25827de45fbe9d2fb8d6a45e836ae5558eb3a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/hover-card/hover-card-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from 'bits-ui';
+
+	let { ...restProps }: HoverCardPrimitive.PortalProps = $props();
+</script>
+
+<HoverCardPrimitive.Portal {...restProps} />
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/hover-card/hover-card-trigger.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/hover-card/hover-card-trigger.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..2d42f89c39e20ba63fa9ca845bd0ee257c39af3f
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/hover-card/hover-card-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: HoverCardPrimitive.TriggerProps = $props();
+</script>
+
+<HoverCardPrimitive.Trigger bind:ref data-slot="hover-card-trigger" {...restProps} />
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/hover-card/hover-card.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/hover-card/hover-card.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..ffc075dcd5a56ae8df38b12f341c8bf06b777e93
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/hover-card/hover-card.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: HoverCardPrimitive.RootProps = $props();
+</script>
+
+<HoverCardPrimitive.Root bind:open {...restProps} />
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/hover-card/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/hover-card/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..098f69176d0eff2c15cbdefdd14f08937a87c221
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/hover-card/index.ts
@@ -0,0 +1,15 @@
+import Root from './hover-card.svelte';
+import Content from './hover-card-content.svelte';
+import Trigger from './hover-card-trigger.svelte';
+import Portal from './hover-card-portal.svelte';
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Portal,
+	Root as HoverCard,
+	Content as HoverCardContent,
+	Trigger as HoverCardTrigger,
+	Portal as HoverCardPortal
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/input/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/input/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..15c0933dc845c449221a24445ccf2baf2d7c3149
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/input/index.ts
@@ -0,0 +1,7 @@
+import Root from './input.svelte';
+
+export {
+	Root,
+	//
+	Root as Input
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/input/input.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/input/input.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..2b6279b6420de0b5efe201d9566fc8ef0267abb1
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/components/ui/utils';
+
+	type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, 'type'> &
+			({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
+	>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		files = $bindable(),
+		class: className,
+		...restProps
+	}: Props = $props();
+</script>
+
+{#if type === 'file'}
+	<input
+		bind:this={ref}
+		data-slot="input"
+		class={cn(
+			'flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
+			'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+			className
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		bind:this={ref}
+		data-slot="input"
+		class={cn(
+			'flex h-9 w-full min-w-0 rounded-md border border-input bg-background px-3 py-1 text-base shadow-xs ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
+			'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+			className
+		)}
+		style="backdrop-filter: blur(0.5rem);"
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/label/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/label/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..808d14152c07dc9219312d17a7f2bb155820a7a6
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/label/index.ts
@@ -0,0 +1,7 @@
+import Root from './label.svelte';
+
+export {
+	Root,
+	//
+	Root as Label
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/label/label.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/label/label.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..9da4ae369dfbbb638dc5743b7b5c3333eb28331a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/label/label.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from 'bits-ui';
+	import { cn } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: LabelPrimitive.RootProps = $props();
+</script>
+
+<LabelPrimitive.Root
+	bind:ref
+	data-slot="label"
+	class={cn(
+		'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/popover/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/popover/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c5937fb3a04309294233fa1655a3ffd44dadcf65
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/popover/index.ts
@@ -0,0 +1,19 @@
+import Root from './popover.svelte';
+import Close from './popover-close.svelte';
+import Content from './popover-content.svelte';
+import Trigger from './popover-trigger.svelte';
+import Portal from './popover-portal.svelte';
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Close,
+	Portal,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Trigger as PopoverTrigger,
+	Close as PopoverClose,
+	Portal as PopoverPortal
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/popover/popover-close.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/popover/popover-close.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..dc4dec4b339525ba50bde8e833117f8b37f73a2e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/popover/popover-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
+</script>
+
+<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/popover/popover-content.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/popover/popover-content.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..b46e928b1b90c1501644ed27530b5814cacbfab1
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/popover/popover-content.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import PopoverPortal from './popover-portal.svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/components/ui/utils.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		side,
+		align = 'center',
+		collisionPadding = 8,
+		avoidCollisions = true,
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+	} = $props();
+</script>
+
+<PopoverPortal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		data-slot="popover-content"
+		{sideOffset}
+		{side}
+		{align}
+		{collisionPadding}
+		{avoidCollisions}
+		class={cn(
+			'z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:fill-mode-forwards data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPortal>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/popover/popover-portal.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/popover/popover-portal.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..25efb877b73fc8100a4e797c6e5d28f6166c87e3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/popover/popover-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	let { ...restProps }: PopoverPrimitive.PortalProps = $props();
+</script>
+
+<PopoverPrimitive.Portal {...restProps} />
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/popover/popover-trigger.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/popover/popover-trigger.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..5ef3d0e932464348a90816fa0e12e3224e2792da
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/popover/popover-trigger.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from '$lib/components/ui/utils.js';
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PopoverPrimitive.TriggerProps = $props();
+</script>
+
+<PopoverPrimitive.Trigger
+	bind:ref
+	data-slot="popover-trigger"
+	class={cn('', className)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/popover/popover.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/popover/popover.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..f39b867a694bc3608303a289f4a66db0911f4244
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/popover/popover.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
+</script>
+
+<PopoverPrimitive.Root bind:open {...restProps} />
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/scroll-area/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/scroll-area/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d5468067dee8acc4ee158d9201fb462fb9929f78
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/scroll-area/index.ts
@@ -0,0 +1,10 @@
+import Scrollbar from './scroll-area-scrollbar.svelte';
+import Root from './scroll-area.svelte';
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..3f0d00d5ebf87a2de9fbd3e42dc62c88c2bbce83
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+	import { cn, type WithoutChild } from '$lib/components/ui/utils';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = 'vertical',
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	bind:ref
+	data-slot="scroll-area-scrollbar"
+	{orientation}
+	class={cn(
+		'flex touch-none p-px transition-colors select-none',
+		orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
+		orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ScrollAreaPrimitive.Thumb
+		data-slot="scroll-area-thumb"
+		class="relative flex-1 rounded-full bg-border"
+	/>
+</ScrollAreaPrimitive.Scrollbar>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/scroll-area/scroll-area.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/scroll-area/scroll-area.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..ba6f8382e5679ca3b044bcc7f5d8381b5d6d5bcd
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+	import { Scrollbar } from './index.js';
+	import { cn, type WithoutChild } from '$lib/components/ui/utils';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = 'vertical',
+		scrollbarXClasses = '',
+		scrollbarYClasses = '',
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+		orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
+		scrollbarXClasses?: string | undefined;
+		scrollbarYClasses?: string | undefined;
+	} = $props();
+</script>
+
+<ScrollAreaPrimitive.Root
+	bind:ref
+	data-slot="scroll-area"
+	class={cn('relative', className)}
+	{...restProps}
+>
+	<ScrollAreaPrimitive.Viewport
+		data-slot="scroll-area-viewport"
+		class="size-full rounded-[inherit] ring-ring/10 outline-ring/50 transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 dark:ring-ring/20 dark:outline-ring/40"
+	>
+		{@render children?.()}
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === 'vertical' || orientation === 'both'}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === 'horizontal' || orientation === 'both'}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/select/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bfa73d90ebd3e1c750682062831233bfbd88b575
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/index.ts
@@ -0,0 +1,37 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+
+import Group from './select-group.svelte';
+import Label from './select-label.svelte';
+import Item from './select-item.svelte';
+import Content from './select-content.svelte';
+import Trigger from './select-trigger.svelte';
+import Separator from './select-separator.svelte';
+import ScrollDownButton from './select-scroll-down-button.svelte';
+import ScrollUpButton from './select-scroll-up-button.svelte';
+import GroupHeading from './select-group-heading.svelte';
+
+const Root = SelectPrimitive.Root;
+
+export {
+	Root,
+	Group,
+	Label,
+	Item,
+	Content,
+	Trigger,
+	Separator,
+	ScrollDownButton,
+	ScrollUpButton,
+	GroupHeading,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator,
+	ScrollDownButton as SelectScrollDownButton,
+	ScrollUpButton as SelectScrollUpButton,
+	GroupHeading as SelectGroupHeading
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-content.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-content.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..b54bc60c2274ce8f3e12c79830934d089a9640ef
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-content.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import SelectScrollUpButton from './select-scroll-up-button.svelte';
+	import SelectScrollDownButton from './select-scroll-down-button.svelte';
+	import { cn, type WithoutChild } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ContentProps> & {
+		portalProps?: SelectPrimitive.PortalProps;
+	} = $props();
+
+	let cleanupInternalListeners: (() => void) | undefined;
+
+	onMount(() => {
+		const listenerOptions: AddEventListenerOptions = { passive: false };
+
+		const blockOutsideWheel = (event: WheelEvent) => {
+			if (!ref) {
+				return;
+			}
+
+			const target = event.target as Node | null;
+
+			if (!target || !ref.contains(target)) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		};
+
+		const blockOutsideTouchMove = (event: TouchEvent) => {
+			if (!ref) {
+				return;
+			}
+
+			const target = event.target as Node | null;
+
+			if (!target || !ref.contains(target)) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		};
+
+		document.addEventListener('wheel', blockOutsideWheel, listenerOptions);
+		document.addEventListener('touchmove', blockOutsideTouchMove, listenerOptions);
+
+		return () => {
+			document.removeEventListener('wheel', blockOutsideWheel, listenerOptions);
+			document.removeEventListener('touchmove', blockOutsideTouchMove, listenerOptions);
+		};
+	});
+
+	$effect(() => {
+		const element = ref;
+
+		cleanupInternalListeners?.();
+
+		if (!element) {
+			return;
+		}
+
+		const stopWheelPropagation = (event: WheelEvent) => {
+			event.stopPropagation();
+		};
+
+		const stopTouchPropagation = (event: TouchEvent) => {
+			event.stopPropagation();
+		};
+
+		element.addEventListener('wheel', stopWheelPropagation);
+		element.addEventListener('touchmove', stopTouchPropagation);
+
+		cleanupInternalListeners = () => {
+			element.removeEventListener('wheel', stopWheelPropagation);
+			element.removeEventListener('touchmove', stopTouchPropagation);
+		};
+	});
+
+	onDestroy(() => {
+		cleanupInternalListeners?.();
+	});
+</script>
+
+<SelectPrimitive.Portal {...portalProps}>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		data-slot="select-content"
+		class={cn(
+			'relative z-[var(--layer-popover,1000000)] max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:translate-y-1 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:-translate-x-1 data-[side=left]:slide-in-from-right-2 data-[side=right]:translate-x-1 data-[side=right]:slide-in-from-left-2 data-[side=top]:-translate-y-1 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:fill-mode-forwards data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+			className
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport
+			class={cn(
+				'h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1'
+			)}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPrimitive.Portal>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-group-heading.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-group-heading.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..77c2042c8cd7e7397095f479615c83e3dc5e2b9d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-group-heading.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn } from '$lib/components/ui/utils.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+	bind:ref
+	data-slot="select-group-heading"
+	class={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</SelectPrimitive.GroupHeading>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-group.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-group.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..2520795d7e70d5e48426b5a36aef42584eed1f07
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-group.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group data-slot="select-group" {...restProps} />
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-item.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-item.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..02543c1fc314a62bade65cd330ba9f5e3450430e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-item.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChild } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		label,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	data-slot="select-item"
+	class={cn(
+		"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute right-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<CheckIcon class="size-4" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-label.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-label.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..e2b830cf11b4ac5906ecd37e3014808b74fce891
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-label.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="select-label"
+	class={cn('px-2 py-1.5 text-xs text-muted-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-scroll-down-button.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-scroll-down-button.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..9256dd8b5934ee4ccb5e18ad3fb8cac83a7e04dc
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	data-slot="select-scroll-down-button"
+	class={cn('flex cursor-default items-center justify-center py-1', className)}
+	{...restProps}
+>
+	<ChevronDownIcon class="size-4" />
+</SelectPrimitive.ScrollDownButton>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-scroll-up-button.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-scroll-up-button.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..552e52728de8dc7a1625350220ead5bea041e59e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	data-slot="select-scroll-up-button"
+	class={cn('flex cursor-default items-center justify-center py-1', className)}
+	{...restProps}
+>
+	<ChevronUpIcon class="size-4" />
+</SelectPrimitive.ScrollUpButton>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-separator.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-separator.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..7daaa8d09f0de940db196804d5be2af5b024a1e8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-separator.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Separator as SeparatorPrimitive } from 'bits-ui';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { cn } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="select-separator"
+	class={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-trigger.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-trigger.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..5bc28eeb47bf3d72218b0d40e984db8b366f2fe8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/select/select-trigger.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { cn, type WithoutChild } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = 'default',
+		variant = 'default',
+		...restProps
+	}: WithoutChild<SelectPrimitive.TriggerProps> & {
+		size?: 'sm' | 'default';
+		variant?: 'default' | 'plain';
+	} = $props();
+
+	const baseClasses = $derived(
+		variant === 'plain'
+			? "group inline-flex w-full items-center justify-end gap-2 whitespace-nowrap px-0 py-0 text-sm font-medium text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3 [&_svg:not([class*='text-'])]:text-muted-foreground"
+			: "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground"
+	);
+
+	const chevronClasses = $derived(
+		variant === 'plain'
+			? 'size-3 opacity-60 transition-transform group-data-[state=open]:-rotate-180'
+			: 'size-4 opacity-50'
+	);
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
+	class={cn(baseClasses, className)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon class={chevronClasses} />
+</SelectPrimitive.Trigger>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/separator/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/separator/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..768efac960b9507daa32ac8c3c9394a50a082c88
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/separator/index.ts
@@ -0,0 +1,7 @@
+import Root from './separator.svelte';
+
+export {
+	Root,
+	//
+	Root as Separator
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/separator/separator.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/separator/separator.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..00307fdcae720fef6ca3c8a20e5521280e2d2563
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/separator/separator.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from 'bits-ui';
+	import { cn } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	data-slot="separator"
+	class={cn(
+		'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..139e2d253429f93414c7678ae3cc2f42d676fa98
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/index.ts
@@ -0,0 +1,36 @@
+import { Dialog as SheetPrimitive } from 'bits-ui';
+import Trigger from './sheet-trigger.svelte';
+import Close from './sheet-close.svelte';
+import Overlay from './sheet-overlay.svelte';
+import Content from './sheet-content.svelte';
+import Header from './sheet-header.svelte';
+import Footer from './sheet-footer.svelte';
+import Title from './sheet-title.svelte';
+import Description from './sheet-description.svelte';
+
+const Root = SheetPrimitive.Root;
+const Portal = SheetPrimitive.Portal;
+
+export {
+	Root,
+	Close,
+	Trigger,
+	Portal,
+	Overlay,
+	Content,
+	Header,
+	Footer,
+	Title,
+	Description,
+	//
+	Root as Sheet,
+	Close as SheetClose,
+	Trigger as SheetTrigger,
+	Portal as SheetPortal,
+	Overlay as SheetOverlay,
+	Content as SheetContent,
+	Header as SheetHeader,
+	Footer as SheetFooter,
+	Title as SheetTitle,
+	Description as SheetDescription
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-close.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-close.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..b0180c0c194cfa7f47d21bd741ca7237423b1650
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
+</script>
+
+<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} />
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-content.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-content.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..b616c469a9188123ee8add5889800338f0d2d407
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-content.svelte
@@ -0,0 +1,61 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+	export const sheetVariants = tv({
+		base: `border-border/30 dark:border-border/20 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fixed z-50 flex flex-col gap-4 shadow-sm transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 ${PANEL_CLASSES}`,
+		variants: {
+			side: {
+				top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+				bottom:
+					'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+				left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+				right:
+					'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm'
+			}
+		},
+		defaultVariants: {
+			side: 'right'
+		}
+	});
+
+	export type Side = VariantProps<typeof sheetVariants>['side'];
+</script>
+
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import XIcon from '@lucide/svelte/icons/x';
+	import type { Snippet } from 'svelte';
+	import SheetOverlay from './sheet-overlay.svelte';
+	import { cn, type WithoutChildrenOrChild } from '$lib/components/ui/utils.js';
+	import { PANEL_CLASSES } from '$lib/constants';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		side = 'right',
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		portalProps?: SheetPrimitive.PortalProps;
+		side?: Side;
+		children: Snippet;
+	} = $props();
+</script>
+
+<SheetPrimitive.Portal {...portalProps}>
+	<SheetOverlay />
+	<SheetPrimitive.Content
+		bind:ref
+		data-slot="sheet-content"
+		class={cn(sheetVariants({ side }), className)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<SheetPrimitive.Close
+			class="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none"
+		>
+			<XIcon class="size-4" />
+			<span class="sr-only">Close</span>
+		</SheetPrimitive.Close>
+	</SheetPrimitive.Content>
+</SheetPrimitive.Portal>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-description.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-description.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..ef4d58f227f31c6bda2c468deff9400175b00b29
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.DescriptionProps = $props();
+</script>
+
+<SheetPrimitive.Description
+	bind:ref
+	data-slot="sheet-description"
+	class={cn('text-sm text-muted-foreground', className)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-footer.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-footer.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..4e1b927a5c21f065b2397a806c50a1bb02b8b0fd
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-footer"
+	class={cn('mt-auto flex flex-col gap-2 p-4', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-header.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-header.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..6c6c1ec9d4ab3d57d0cb0d007195c6dc71ef56b0
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="sheet-header"
+	class={cn('flex flex-col gap-1.5 p-4', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-overlay.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-overlay.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..f402d81aa6f7f0f1f068d19e7d8ec4b750167133
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.OverlayProps = $props();
+</script>
+
+<SheetPrimitive.Overlay
+	bind:ref
+	data-slot="sheet-overlay"
+	class={cn(
+		'fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:fill-mode-forwards data-[state=open]:animate-in data-[state=open]:fade-in-0',
+		className
+	)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-title.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-title.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..0efcc7a4fd71c44a43797d3699c2acaaa3519f89
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+	import { cn } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SheetPrimitive.TitleProps = $props();
+</script>
+
+<SheetPrimitive.Title
+	bind:ref
+	data-slot="sheet-title"
+	class={cn('font-semibold text-foreground', className)}
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-trigger.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-trigger.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..d95719a60ce92753344f9ab9f62411256ed35ac1
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/sheet/sheet-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
+</script>
+
+<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} />
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/skeleton/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/skeleton/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3120ce123c98e661627e4ac9aa3cdf9ebe601dc9
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/skeleton/index.ts
@@ -0,0 +1,7 @@
+import Root from './skeleton.svelte';
+
+export {
+	Root,
+	//
+	Root as Skeleton
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/skeleton/skeleton.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/skeleton/skeleton.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..62b6f80dfa71bf43e78032dd9984e49ac7985272
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/skeleton/skeleton.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from '$lib/components/ui/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	class={cn('animate-pulse rounded-md bg-accent', className)}
+	{...restProps}
+></div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/switch/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/switch/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..129f8f5c3b4da7a3941effb5f4937248afe43d85
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/switch/index.ts
@@ -0,0 +1,7 @@
+import Root from './switch.svelte';
+
+export {
+	Root,
+	//
+	Root as Switch
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/switch/switch.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/switch/switch.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..e0848790d3c15cd04f8ccecdd53c96a4c74b2431
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/switch/switch.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		checked = $bindable(false),
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	class={cn(
+		'peer inline-flex h-[1.15rem] w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80',
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
+		class={cn(
+			'pointer-events-none block size-4 rounded-full bg-background ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground'
+		)}
+	/>
+</SwitchPrimitive.Root>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/table/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/table/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..99239aeead53e63f2777740bd36768243ac5d7b9
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/table/index.ts
@@ -0,0 +1,28 @@
+import Root from './table.svelte';
+import Body from './table-body.svelte';
+import Caption from './table-caption.svelte';
+import Cell from './table-cell.svelte';
+import Footer from './table-footer.svelte';
+import Head from './table-head.svelte';
+import Header from './table-header.svelte';
+import Row from './table-row.svelte';
+
+export {
+	Root,
+	Body,
+	Caption,
+	Cell,
+	Footer,
+	Head,
+	Header,
+	Row,
+	//
+	Root as Table,
+	Body as TableBody,
+	Caption as TableCaption,
+	Cell as TableCell,
+	Footer as TableFooter,
+	Head as TableHead,
+	Header as TableHeader,
+	Row as TableRow
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-body.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-body.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..f8df65cf689b3f501951cf66f00e27276963c1b4
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-body.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody
+	bind:this={ref}
+	data-slot="table-body"
+	class={cn('[&_tr:last-child]:border-0', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tbody>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-caption.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-caption.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..0fdcc6439c1b32a66090b82801dc2dccc586a9d5
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-caption.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<caption
+	bind:this={ref}
+	data-slot="table-caption"
+	class={cn('mt-4 text-sm text-muted-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</caption>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-cell.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-cell.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..4506fdfc5bc3ce62d259d935604ef349f2722a05
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-cell.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+	import type { HTMLTdAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td
+	bind:this={ref}
+	data-slot="table-cell"
+	class={cn(
+		'bg-clip-padding p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</td>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-footer.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-footer.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..77e4a64c08b233f680f608d7b957f2774469de4d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot
+	bind:this={ref}
+	data-slot="table-footer"
+	class={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tfoot>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-head.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-head.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..c1c57ad44349534f482cae72ac0b808aade7a8c8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-head.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+	import type { HTMLThAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLThAttributes> = $props();
+</script>
+
+<th
+	bind:this={ref}
+	data-slot="table-head"
+	class={cn(
+		'h-10 bg-clip-padding px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pe-0',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</th>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-header.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-header.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..eb366739b39e3543d920512ed6f5a172e4e6046c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<thead
+	bind:this={ref}
+	data-slot="table-header"
+	class={cn('[&_tr]:border-b', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</thead>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-row.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-row.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..4131d3660a4c78f72728f3f428bcde2144fc1a11
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table-row.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
+</script>
+
+<tr
+	bind:this={ref}
+	data-slot="table-row"
+	class={cn(
+		'border-b transition-colors data-[state=selected]:bg-muted hover:[&,&>svelte-css-wrapper]:[&>th,td]:bg-muted/50',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</tr>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..c11a6a6c4ba62e7996758eb6bf7db82e3f64f43e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/table/table.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLTableAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTableAttributes> = $props();
+</script>
+
+<div data-slot="table-container" class="relative w-full overflow-x-auto">
+	<table
+		bind:this={ref}
+		data-slot="table"
+		class={cn('w-full caption-bottom text-sm', className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</table>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/textarea/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/textarea/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9ccb3bff3b0e5ba924779b0a673b0cce0507c94a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/textarea/index.ts
@@ -0,0 +1,7 @@
+import Root from './textarea.svelte';
+
+export {
+	Root,
+	//
+	Root as Textarea
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/textarea/textarea.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/textarea/textarea.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..bf838829c02d6fb5c2167ad06d821f1d97e433c3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/textarea/textarea.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from '$lib/components/ui/utils';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot="textarea"
+	class={cn(
+		'flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40',
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/tooltip/index.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..273d831e6e8ffc152005d356d7886dcd179b9ead
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,21 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import Trigger from './tooltip-trigger.svelte';
+import Content from './tooltip-content.svelte';
+
+const Root = TooltipPrimitive.Root;
+const Provider = TooltipPrimitive.Provider;
+const Portal = TooltipPrimitive.Portal;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	Provider,
+	Portal,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
+	Portal as TooltipPortal
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/tooltip/tooltip-content.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..0b173ee7c15a40f2c128b0798f651d79f3248cca
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+	import { cn } from '$lib/components/ui/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		side = 'top',
+		children,
+		arrowClasses,
+		noPortal = false,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+		noPortal?: boolean;
+	} = $props();
+
+	const contentClass = $derived(
+		cn(
+			'z-50 w-fit origin-(--bits-tooltip-content-transform-origin) animate-in rounded-md bg-primary px-3 py-1.5 text-xs text-balance text-primary-foreground fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:fill-mode-forwards',
+			className
+		)
+	);
+</script>
+
+{#snippet tooltipContent()}
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={contentClass}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						'z-50 size-2.5 rotate-45 rounded-[2px] bg-primary',
+						'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]',
+						'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]',
+						'data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2',
+						'data-[side=left]:-translate-y-[calc(50%_-_3px)]',
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+{/snippet}
+
+{#if noPortal}
+	{@render tooltipContent()}
+{:else}
+	<TooltipPrimitive.Portal>
+		{@render tooltipContent()}
+	</TooltipPrimitive.Portal>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/tooltip/tooltip-trigger.svelte b/backend/llama.cpp/tools/ui/src/lib/components/ui/tooltip/tooltip-trigger.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..671d6e2201a9269ef0068f450cd84f2005820331
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/tooltip/tooltip-trigger.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+</script>
+
+<TooltipPrimitive.Trigger
+	bind:ref
+	data-slot="tooltip-trigger"
+	class="cursor-pointer"
+	{...restProps}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/lib/components/ui/utils.ts b/backend/llama.cpp/tools/ui/src/lib/components/ui/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f92bfcbb3f6aaa73e14c2ab1c2648769876f0927
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/components/ui/utils.ts
@@ -0,0 +1,13 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, 'child'> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, 'children'> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/agentic.ts b/backend/llama.cpp/tools/ui/src/lib/constants/agentic.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c0575163efca9644b188d5dec31a340fa0fc4381
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/agentic.ts
@@ -0,0 +1,52 @@
+import type { AgenticConfig } from '$lib/types/agentic';
+
+export const ATTACHMENT_SAVED_REGEX = /\[Attachment saved: ([^\]]+)\]/;
+
+export const NEWLINE_SEPARATOR = '\n';
+
+export const DEFAULT_AGENTIC_CONFIG: AgenticConfig = {
+	enabled: true,
+	maxTurns: 100,
+	maxToolPreviewLines: 25
+} as const;
+
+export const REASONING_TAGS = {
+	START: '<think>',
+	END: '</think>'
+} as const;
+
+/**
+ * @deprecated Legacy marker tags - only used for migration of old stored messages.
+ * New messages use structured fields (reasoningContent, toolCalls, toolCallId).
+ */
+export const LEGACY_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;
+
+/**
+ * @deprecated Legacy reasoning tags - only used for migration of old stored messages.
+ * New messages use the dedicated reasoningContent field.
+ */
+export const LEGACY_REASONING_TAGS = {
+	START: '<<<reasoning_content_start>>>',
+	END: '<<<reasoning_content_end>>>'
+} as const;
+
+/**
+ * @deprecated Legacy regex patterns - only used for migration of old stored messages.
+ */
+export const LEGACY_AGENTIC_REGEX = {
+	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,
+	REASONING_BLOCK: /<<<reasoning_content_start>>>[\s\S]*?<<<reasoning_content_end>>>/g,
+	REASONING_EXTRACT: /<<<reasoning_content_start>>>([\s\S]*?)<<<reasoning_content_end>>>/,
+	REASONING_OPEN: /<<<reasoning_content_start>>>[\s\S]*$/,
+	AGENTIC_TOOL_CALL_BLOCK: /\n*<<<AGENTIC_TOOL_CALL_START>>>[\s\S]*?<<<AGENTIC_TOOL_CALL_END>>>/g,
+	AGENTIC_TOOL_CALL_OPEN: /\n*<<<AGENTIC_TOOL_CALL_START>>>[\s\S]*$/,
+	HAS_LEGACY_MARKERS: /<<<(?:AGENTIC_TOOL_CALL_START|reasoning_content_start)>>>/
+} as const;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/api-endpoints.ts b/backend/llama.cpp/tools/ui/src/lib/constants/api-endpoints.ts
new file mode 100644
index 0000000000000000000000000000000000000000..37137c1c769900c933fed4d7df8cd76c0f3faad4
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/api-endpoints.ts
@@ -0,0 +1,31 @@
+export const API_MODELS = {
+	LIST: '/v1/models',
+	LOAD: '/models/load',
+	UNLOAD: '/models/unload',
+	SSE: '/models/sse'
+};
+
+// chat completion routes, the control route drives realtime inference (e.g. end reasoning)
+export const API_CHAT = {
+	COMPLETIONS: './v1/chat/completions',
+	CONTROL: './v1/chat/completions/control'
+};
+
+// slot introspection, requires the --slots flag on the server
+export const API_SLOTS = {
+	LIST: './slots'
+};
+
+export const API_TOOLS = {
+	LIST: '/tools',
+	EXECUTE: '/tools'
+};
+
+// resumable stream routes, the conv::model identity is appended as a path segment
+export const API_STREAM = {
+	BASE: './v1/stream',
+	LOOKUP: './v1/streams/lookup'
+};
+
+/** CORS proxy endpoint path */
+export const CORS_PROXY_ENDPOINT = '/cors-proxy';
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/app.ts b/backend/llama.cpp/tools/ui/src/lib/constants/app.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c598f480fd4dfc3decfab10f4cf86bf8be371764
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/app.ts
@@ -0,0 +1 @@
+export const APP_NAME = import.meta.env?.VITE_PUBLIC_APP_NAME || 'llama-ui';
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/attachment-labels.ts b/backend/llama.cpp/tools/ui/src/lib/constants/attachment-labels.ts
new file mode 100644
index 0000000000000000000000000000000000000000..be9999c0f9eed66849bef18aa613e9414edafea5
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/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/backend/llama.cpp/tools/ui/src/lib/constants/attachment-menu.ts b/backend/llama.cpp/tools/ui/src/lib/constants/attachment-menu.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3d7381812e5d04bce2c799949350f0f8aca068c3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/attachment-menu.ts
@@ -0,0 +1,114 @@
+import type { Component } from 'svelte';
+import { MessageSquare, Zap, FolderOpen } from '@lucide/svelte';
+import { FILE_TYPE_ICONS } from '$lib/constants/icons';
+import {
+	AttachmentAction,
+	AttachmentItemEnabledWhen,
+	AttachmentItemVisibleWhen,
+	AttachmentMenuItemId
+} from '$lib/enums';
+
+export interface AttachmentMenuItem {
+	/** Unique identifier for the item */
+	id: AttachmentMenuItemId;
+	/** Display label */
+	label: string;
+	/** Lucide icon component */
+	icon: Component;
+	/** Extra CSS class applied to the item (e.g. for test selectors) */
+	class?: string;
+	/** Whether the item requires a specific modality to be enabled */
+	enabledWhen?: AttachmentItemEnabledWhen;
+	/** Tooltip shown when the item is disabled */
+	disabledTooltip?: string;
+	/** Callback key on the Props interface to invoke when clicked */
+	action: AttachmentAction;
+	/** Whether the item is only shown when a specific capability is present */
+	visibleWhen?: AttachmentItemVisibleWhen;
+	/** Whether this item has a tooltip even when enabled (uses dynamic text) */
+	hasEnabledTooltip?: boolean;
+}
+
+/**
+ * File attachment menu items shown in both the desktop dropdown and mobile sheet.
+ * The "Tools" submenu is handled separately by each component.
+ */
+export const ATTACHMENT_FILE_ITEMS: AttachmentMenuItem[] = [
+	{
+		id: AttachmentMenuItemId.IMAGES,
+		label: 'Images',
+		icon: FILE_TYPE_ICONS.image,
+		class: 'images-button',
+		enabledWhen: AttachmentItemEnabledWhen.HAS_VISION_MODALITY,
+		disabledTooltip: 'Image processing requires a vision model',
+		action: AttachmentAction.FILE_UPLOAD
+	},
+	{
+		id: AttachmentMenuItemId.AUDIO,
+		label: 'Audio Files',
+		icon: FILE_TYPE_ICONS.audio,
+		class: 'audio-button',
+		enabledWhen: AttachmentItemEnabledWhen.HAS_AUDIO_MODALITY,
+		disabledTooltip: 'Audio files processing requires an audio model',
+		action: AttachmentAction.FILE_UPLOAD
+	},
+	{
+		id: AttachmentMenuItemId.VIDEO,
+		label: 'Video Files',
+		icon: FILE_TYPE_ICONS.video,
+		class: 'video-button',
+		enabledWhen: AttachmentItemEnabledWhen.HAS_VIDEO_MODALITY,
+		disabledTooltip: 'Video files processing requires a video model',
+		action: AttachmentAction.FILE_UPLOAD
+	},
+	{
+		id: AttachmentMenuItemId.TEXT,
+		label: 'Text Files',
+		icon: FILE_TYPE_ICONS.text,
+		enabledWhen: AttachmentItemEnabledWhen.ALWAYS,
+		action: AttachmentAction.FILE_UPLOAD
+	},
+	{
+		id: AttachmentMenuItemId.PDF,
+		label: 'PDF Files',
+		icon: FILE_TYPE_ICONS.pdf,
+		enabledWhen: AttachmentItemEnabledWhen.ALWAYS,
+		disabledTooltip: 'PDFs will be converted to text. Image-based PDFs may not work properly.',
+		hasEnabledTooltip: true,
+		action: AttachmentAction.FILE_UPLOAD
+	}
+];
+
+export const ATTACHMENT_EXTRA_ITEMS: AttachmentMenuItem[] = [];
+
+export const ATTACHMENT_PROMPT_ITEMS: AttachmentMenuItem[] = [
+	{
+		id: AttachmentMenuItemId.SYSTEM_MESSAGE,
+		label: 'System Message',
+		icon: MessageSquare,
+		enabledWhen: AttachmentItemEnabledWhen.ALWAYS,
+		hasEnabledTooltip: true,
+		action: AttachmentAction.SYSTEM_PROMPT_CLICK
+	},
+	{
+		id: AttachmentMenuItemId.MCP_PROMPT,
+		label: 'MCP Prompt',
+		icon: Zap,
+		enabledWhen: AttachmentItemEnabledWhen.ALWAYS,
+		action: AttachmentAction.MCP_PROMPT_CLICK,
+		visibleWhen: AttachmentItemVisibleWhen.HAS_MCP_PROMPTS_SUPPORT
+	}
+];
+
+export const ATTACHMENT_MCP_ITEMS: AttachmentMenuItem[] = [
+	{
+		id: AttachmentMenuItemId.MCP_RESOURCES,
+		label: 'MCP Resources',
+		icon: FolderOpen,
+		enabledWhen: AttachmentItemEnabledWhen.ALWAYS,
+		action: AttachmentAction.MCP_RESOURCES_CLICK,
+		visibleWhen: AttachmentItemVisibleWhen.HAS_MCP_RESOURCES_SUPPORT
+	}
+];
+
+export const ATTACHMENT_TOOLTIP_TEXT = 'Add files, prompts, tools or MCP Servers';
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/auto-scroll.ts b/backend/llama.cpp/tools/ui/src/lib/constants/auto-scroll.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ca9ba5a9e832697ba1d8172eca8e8dd53dea5e6b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/auto-scroll.ts
@@ -0,0 +1,2 @@
+export const AUTO_SCROLL_INTERVAL = 100;
+export const AUTO_SCROLL_AT_BOTTOM_THRESHOLD = 10;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/binary-detection.ts b/backend/llama.cpp/tools/ui/src/lib/constants/binary-detection.ts
new file mode 100644
index 0000000000000000000000000000000000000000..21a95cc88371759785c856564226d4ce0daf32f8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/binary-detection.ts
@@ -0,0 +1,7 @@
+import type { BinaryDetectionOptions } from '$lib/types';
+
+export const DEFAULT_BINARY_DETECTION_OPTIONS: BinaryDetectionOptions = {
+	prefixLength: 1024 * 10, // Check the first 10KB of the string
+	suspiciousCharThresholdRatio: 0.15, // Allow up to 15% suspicious chars
+	maxAbsoluteNullBytes: 2
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/cache.ts b/backend/llama.cpp/tools/ui/src/lib/constants/cache.ts
new file mode 100644
index 0000000000000000000000000000000000000000..07fe8683414a7fa165c9d0a22cca511e36cf2c44
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/cache.ts
@@ -0,0 +1,54 @@
+/**
+ * Cache configuration constants
+ */
+
+/**
+ * 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 100
+ */
+export const DEFAULT_CACHE_MAX_ENTRIES = 100;
+
+/**
+ * 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
+ * @default 50
+ */
+export const MODEL_PROPS_CACHE_MAX_ENTRIES = 50;
+
+/**
+ * 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
+ * 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/backend/llama.cpp/tools/ui/src/lib/constants/chat-form.ts b/backend/llama.cpp/tools/ui/src/lib/constants/chat-form.ts
new file mode 100644
index 0000000000000000000000000000000000000000..05ab8c1f821236c715f2eca6faed116d757a724d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/chat-form.ts
@@ -0,0 +1,6 @@
+export const INITIAL_FILE_SIZE = 0;
+export const PROMPT_CONTENT_SEPARATOR = '\n\n';
+export const CLIPBOARD_CONTENT_QUOTE_PREFIX = '"';
+export const PROMPT_TRIGGER_PREFIX = '/';
+export const RESOURCE_TRIGGER_PREFIX = '@';
+export const NEW_CHAT_DRAFT_KEY = '__new_chat__';
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/cli-flags.ts b/backend/llama.cpp/tools/ui/src/lib/constants/cli-flags.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4fbee8a36973da18229ddc38e607b617f7024c46
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/cli-flags.ts
@@ -0,0 +1,6 @@
+export const CLI_FLAGS = {
+	API_KEY: '--api-key',
+	MCP_PROXY: '--ui-mcp-proxy',
+	SLOTS: '--slots',
+	TOOLS: '--tools'
+} as const;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/code-blocks.ts b/backend/llama.cpp/tools/ui/src/lib/constants/code-blocks.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0f7265104d9b1f96cbaf164b28ff89a250f6eb88
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/code-blocks.ts
@@ -0,0 +1,8 @@
+export const CODE_BLOCK_SCROLL_CONTAINER_CLASS = 'code-block-scroll-container';
+export const CODE_BLOCK_WRAPPER_CLASS = 'code-block-wrapper';
+export const CODE_BLOCK_HEADER_CLASS = 'code-block-header';
+export const CODE_BLOCK_ACTIONS_CLASS = 'code-block-actions';
+export const CODE_LANGUAGE_CLASS = 'code-language';
+export const COPY_CODE_BTN_CLASS = 'copy-code-btn';
+export const PREVIEW_CODE_BTN_CLASS = 'preview-code-btn';
+export const RELATIVE_CLASS = 'relative';
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/code.ts b/backend/llama.cpp/tools/ui/src/lib/constants/code.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b55513d7420d1fc756268a2ac6a3f80c59f6f1d8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/code.ts
@@ -0,0 +1,8 @@
+export const NEWLINE = '\n';
+export const TAB = '\t';
+export const DEFAULT_LANGUAGE = 'text';
+export const LANG_PATTERN = /^(\w*)\n?/;
+export const AMPERSAND_REGEX = /&/g;
+export const LT_REGEX = /</g;
+export const GT_REGEX = />/g;
+export const FENCE_PATTERN = /^```|\n```/g;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/context-keys.ts b/backend/llama.cpp/tools/ui/src/lib/constants/context-keys.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0bd733b37066bf9dd8ab18b4b67f083483baddd2
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/context-keys.ts
@@ -0,0 +1,3 @@
+export const CONTEXT_KEY_MESSAGE_EDIT = 'chat-message-edit';
+export const CONTEXT_KEY_CHAT_ACTIONS = 'chat-actions';
+export const CONTEXT_KEY_CHAT_SETTINGS_CONFIG = 'chat-settings-config';
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/control-actions.ts b/backend/llama.cpp/tools/ui/src/lib/constants/control-actions.ts
new file mode 100644
index 0000000000000000000000000000000000000000..935ae9542a360193888d7825b69d5c897ac4a020
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/control-actions.ts
@@ -0,0 +1,7 @@
+// actions accepted by the realtime inference control endpoint (API_CHAT.CONTROL)
+// kept separate from the endpoint paths since these are protocol level verbs
+export const CONTROL_ACTION = {
+	END_REASONING: 'reasoning_end'
+} as const;
+
+export type ControlAction = (typeof CONTROL_ACTION)[keyof typeof CONTROL_ACTION];
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/css-classes.ts b/backend/llama.cpp/tools/ui/src/lib/constants/css-classes.ts
new file mode 100644
index 0000000000000000000000000000000000000000..009b5c52eeb9fab6d33d117028d133f36d83d34d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/css-classes.ts
@@ -0,0 +1,20 @@
+export const BOX_BORDER =
+	'border border-border/30 focus-within:border-border  dark:border-border/20 dark:focus-within:border-border';
+
+export const INPUT_CLASSES = `
+    bg-muted/60 dark:bg-muted/75
+    ${BOX_BORDER}
+    shadow-sm
+    outline-none
+    text-foreground
+`;
+
+export const PANEL_CLASSES = `
+    bg-background
+    border border-border/30 dark:border-border/20
+    shadow-sm backdrop-blur-lg!
+    rounded-t-lg!
+`;
+
+export const CHAT_FORM_POPOVER_MAX_HEIGHT = 'max-h-80';
+export const DIALOG_SUBMENU_CONTENT = 'w-60';
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/database.ts b/backend/llama.cpp/tools/ui/src/lib/constants/database.ts
new file mode 100644
index 0000000000000000000000000000000000000000..95e698f40012312d51a145fe4950aa51ddc19e25
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/database.ts
@@ -0,0 +1,29 @@
+/**
+ * Database-related constants (IndexedDB, Dexie).
+ *
+ * Centralized to ensure consistency across the app and simplify future
+ * naming changes.
+ */
+
+import { STORAGE_APP_NAME } from './storage';
+
+/** IndexedDB database name */
+export const DB_NAME = STORAGE_APP_NAME;
+
+/** IndexedDB store / table names */
+export const IDXDB_TABLES = {
+	conversations: 'conversations',
+	messages: 'messages'
+} as const;
+
+/** IndexedDB store schemas */
+export const IDXDB_STORE_SCHEMAS = {
+	conversations: 'id, lastModified, currNode, name',
+	messages: 'id, convId, type, role, timestamp, parent, children'
+} as const;
+
+/** Combined Dexie stores definition — keys are table names, values are schemas */
+export const IDXDB_STORES = {
+	[IDXDB_TABLES.conversations]: IDXDB_STORE_SCHEMAS.conversations,
+	[IDXDB_TABLES.messages]: IDXDB_STORE_SCHEMAS.messages
+} as const;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/diagram-blocks.ts b/backend/llama.cpp/tools/ui/src/lib/constants/diagram-blocks.ts
new file mode 100644
index 0000000000000000000000000000000000000000..caeb6b5b33848a3d806fe8ad30375b3dc187e112
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/diagram-blocks.ts
@@ -0,0 +1,9 @@
+// Shared constants for diagram blocks (mermaid and svg) that toggle between a
+// rendered view and a source view. The wrapper carries the active mode, css
+// drives the visibility, the click handler only flips the attribute.
+
+export const DIAGRAM_VIEW_MODE_ATTR = 'data-view-mode';
+export const DIAGRAM_VIEW_RENDERED = 'rendered';
+export const DIAGRAM_VIEW_SOURCE = 'source';
+export const DIAGRAM_SOURCE_CLASS = 'diagram-source';
+export const TOGGLE_SOURCE_BTN_CLASS = 'toggle-source-btn';
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/error.ts b/backend/llama.cpp/tools/ui/src/lib/constants/error.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4339bd25d55e2455c12c1e4248314c96d4b2b4bd
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/error.ts
@@ -0,0 +1,23 @@
+export const ERROR_MESSAGES = {
+	NETWORK: {
+		GENERIC: 'Failed to connect to server',
+		NXDOMAIN: 'Server not found - check server address',
+		REFUSED: 'Connection refused - server may be offline',
+		TIMEOUT: 'Request timed out',
+		UNREACHABLE: 'Server is not running or unreachable'
+	},
+	HTTP: {
+		GENERIC: 'Request failed',
+		ACCESS_DENIED: 'Access denied',
+		INTERNAL_ERROR: 'Server error - check server logs',
+		NOT_FOUND: 'Not found',
+		TEMPORARILY_UNAVAILABLE: 'Server temporarily unavailable'
+	}
+};
+
+export const HTTP_CODE_TO_STRING: Record<string, string> = {
+	401: ERROR_MESSAGES.HTTP.ACCESS_DENIED,
+	403: ERROR_MESSAGES.HTTP.ACCESS_DENIED,
+	500: ERROR_MESSAGES.HTTP.INTERNAL_ERROR,
+	503: ERROR_MESSAGES.HTTP.TEMPORARILY_UNAVAILABLE
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/floating-ui-constraints.ts b/backend/llama.cpp/tools/ui/src/lib/constants/floating-ui-constraints.ts
new file mode 100644
index 0000000000000000000000000000000000000000..003fc77acb08eac8b373bcf1243139f8cf911117
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/floating-ui-constraints.ts
@@ -0,0 +1,2 @@
+export const VIEWPORT_GUTTER = 8;
+export const MENU_OFFSET = 6;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/formatters.ts b/backend/llama.cpp/tools/ui/src/lib/constants/formatters.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c417faea43d93b5771895b53fde98fb7678354b3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/formatters.ts
@@ -0,0 +1,35 @@
+export const MS_PER_SECOND = 1000;
+export const SECONDS_PER_MINUTE = 60;
+export const SECONDS_PER_HOUR = 3600;
+export const SHORT_DURATION_THRESHOLD = 1;
+export const MEDIUM_DURATION_THRESHOLD = 10;
+
+/** Default display value when no performance time is available */
+export const DEFAULT_PERFORMANCE_TIME = '0s';
+
+/** Max length before reasoning preview is truncated */
+export const MAX_PREVIEW_LENGTH = 120;
+
+export const STRIP_MARKDOWN_CAPTURE_PATTERNS: [RegExp, string][] = [
+	[/^```(.*)/gm, '$1'],
+	[/(.*)```$/gm, '$1'],
+	[/`([^`]*)`/g, '$1'],
+	[/\*\*(.*?)\*\*/g, '$1'],
+	[/__(.*?)__/g, '$1'],
+	[/\*(.*?)\*/g, '$1'],
+	[/_(.*?)_/g, '$1']
+];
+
+/* eslint-disable no-misleading-character-class */
+export const STRIP_MARKDOWN_INLINE_REGEX = new RegExp(
+	[
+		'<[^>]*>',
+		'^>\\s*',
+		'^#{1,6}\\s+',
+		'^[\\s]*[-*+]\\s+',
+		'^[\\s]*\\d+[.)]\\s+',
+		'[\\u{1F600}-\\u{1F64F}\\u{1F300}-\\u{1F5FF}\\u{1F680}-\\u{1F6FF}\\u{1F1E0}-\\u{1F1FF}\\u{2600}-\\u{26FF}\\u{2700}-\\u{27BF}\\u{FE00}-\\u{FE0F}\\u{1F900}-\\u{1F9FF}\\u{1FA00}-\\u{1FA6F}\\u{1FA70}-\\u{1FAFF}\\u{200D}\\u{20E3}\\u{231A}-\\u{231B}\\u{23E9}-\\u{23F3}\\u{23F8}-\\u{23FA}\\u{25AA}-\\u{25AB}\\u{25B6}\\u{25C0}\\u{25FB}-\\u{25FE}\\u{2934}-\\u{2935}\\u{2B05}-\\u{2B07}\\u{2B1B}-\\u{2B1C}\\u{2B50}\\u{2B55}\\u{3030}\\u{303D}\\u{3297}\\u{3299}]'
+	].join('|'),
+	'gmu'
+);
+/* eslint-enable no-misleading-character-class */
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/icons.ts b/backend/llama.cpp/tools/ui/src/lib/constants/icons.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6ef02c4cb7cfd707f80ceddadce91d8d3b3eb623
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/icons.ts
@@ -0,0 +1,43 @@
+/**
+ * Icon mappings for file types and model modalities
+ * Centralized configuration to ensure consistent icon usage across the app
+ */
+
+import {
+	File as FileIcon,
+	FileText as FileTextIcon,
+	Image as ImageIcon,
+	Eye as VisionIcon,
+	Mic as AudioIcon,
+	Video as VideoIcon
+} from '@lucide/svelte';
+import { FileTypeCategory, ModelModality } from '$lib/enums';
+
+export const FILE_TYPE_ICONS = {
+	[FileTypeCategory.IMAGE]: ImageIcon,
+	[FileTypeCategory.AUDIO]: AudioIcon,
+	[FileTypeCategory.VIDEO]: VideoIcon,
+	[FileTypeCategory.TEXT]: FileTextIcon,
+	[FileTypeCategory.PDF]: FileIcon
+} as const;
+
+export const DEFAULT_FILE_ICON = FileIcon;
+
+export const MODALITY_ICONS = {
+	[ModelModality.VISION]: VisionIcon,
+	[ModelModality.AUDIO]: AudioIcon,
+	[ModelModality.VIDEO]: VideoIcon
+} as const;
+
+export const MODALITY_LABELS = {
+	[ModelModality.VISION]: 'Vision',
+	[ModelModality.AUDIO]: 'Audio',
+	[ModelModality.VIDEO]: 'Video'
+} as const;
+
+// Shared SVG icon strings for copy and preview buttons
+export const COPY_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
+
+export const PREVIEW_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye lucide-eye-icon"><path d="M2.062 12.345a1 1 0 0 1 0-.69C3.5 7.73 7.36 5 12 5s8.5 2.73 9.938 6.655a1 1 0 0 1 0 .69C20.5 16.27 16.64 19 12 19s-8.5-2.73-9.938-6.655"/><circle cx="12" cy="12" r="3"/></svg>`;
+
+export const CODE_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code lucide-code-icon"><path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/></svg>`;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/image-size.ts b/backend/llama.cpp/tools/ui/src/lib/constants/image-size.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8a7f921fa019a0cec1a6b1e28b7fc30a3ecd5ec9
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/image-size.ts
@@ -0,0 +1,3 @@
+export const MEGAPIXELS_TO_PIXELS = 1_000_000;
+
+export const HEIC_JPEG_QUALITY = 0.85;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/index.ts b/backend/llama.cpp/tools/ui/src/lib/constants/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b982a59072751650607b40d1e4b47e3fd15f6d98
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/index.ts
@@ -0,0 +1,58 @@
+// Central constants export file
+// All constants should be imported from '$lib/constants'
+
+export * from './agentic';
+export * from './api-endpoints';
+export * from './app';
+export * from './attachment-labels';
+export * from './database';
+export * from './reasoning-effort';
+export * from './reasoning-effort-tokens';
+export * from './storage';
+export * from './attachment-menu';
+export * from './auto-scroll';
+export * from './binary-detection';
+export * from './cache';
+export * from './chat-form';
+export * from './cli-flags';
+export * from './code-blocks';
+export * from './icons';
+export * from './code';
+export * from './context-keys';
+export * from './control-actions';
+export * from './css-classes';
+export * from './floating-ui-constraints';
+export * from './formatters';
+export * from './key-value-pairs';
+export * from './icons';
+export * from './latex-protection';
+export * from './literal-html';
+export * from './markdown';
+export * from './mermaid-blocks';
+export * from './svg-blocks';
+export * from './diagram-blocks';
+export * from './max-bundle-size';
+export * from './mcp';
+export * from './mcp-form';
+export * from './mcp-resource';
+export * from './message-export';
+export * from './model-id';
+export * from './model-loading';
+export * from './sse';
+export * from './precision';
+export * from './processing-info';
+export * from './pwa';
+export * from './routes';
+export * from './sandbox';
+export * from './settings-keys';
+export * from './settings-registry';
+export * from './stream';
+export * from './supported-file-types';
+export * from './table-html-restorer';
+export * from './title-generation';
+export * from './tools';
+export * from './tooltip-config';
+export * from './ui';
+export * from './uri-template';
+export * from './url';
+export * from './viewport';
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/jpeg-exif.ts b/backend/llama.cpp/tools/ui/src/lib/constants/jpeg-exif.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5b2591b04b1850c8f4784caf109b2865da800984
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/jpeg-exif.ts
@@ -0,0 +1,30 @@
+/**
+ * JPEG and EXIF binary format constants for orientation parsing.
+ */
+
+/** Bytes of file prefix to scan, the APP1 EXIF segment sits near the start */
+export const EXIF_SCAN_BYTE_LIMIT = 128 * 1024;
+
+/** JPEG start of image marker */
+export const JPEG_SOI_MARKER = 0xffd8;
+
+/** APP1 segment marker byte, carries the EXIF payload */
+export const APP1_MARKER = 0xe1;
+
+/** Start of scan marker byte, compressed data begins and no EXIF follows */
+export const SOS_MARKER = 0xda;
+
+/** "Exif" signature opening the APP1 payload, big endian uint32 */
+export const EXIF_SIGNATURE = 0x45786966;
+
+/** TIFF byte order mark for little endian ("II") */
+export const TIFF_LITTLE_ENDIAN = 0x4949;
+
+/** TIFF magic number following the byte order mark */
+export const TIFF_MAGIC = 42;
+
+/** EXIF tag id holding the orientation value */
+export const EXIF_ORIENTATION_TAG = 0x0112;
+
+/** Size in bytes of one IFD directory entry */
+export const IFD_ENTRY_SIZE = 12;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/key-value-pairs.ts b/backend/llama.cpp/tools/ui/src/lib/constants/key-value-pairs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..48dadbec43110a914b05111204d2172011a4e10a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/key-value-pairs.ts
@@ -0,0 +1,20 @@
+/**
+ * Key-value pair form constraints and sanitization patterns.
+ *
+ * Both regexes target characters dangerous in HTTP-header / env-var contexts:
+ *   \x00        – null byte (injection)
+ *   \x0A (\n)   – LF  (HTTP header injection / response splitting)
+ *   \x0D (\r)   – CR  (HTTP header injection / response splitting)
+ *   \x01–\x08, \x0B–\x0C, \x0E–\x1F, \x7F – other C0/DEL control chars
+ *
+ * KEY_UNSAFE_RE additionally strips TAB (\x09); values keep TAB because it is
+ * a valid header-value continuation character per RFC 7230.
+ */
+
+export const KEY_VALUE_PAIR_KEY_MAX_LENGTH = 256;
+export const KEY_VALUE_PAIR_VALUE_MAX_LENGTH = 8192;
+
+// eslint-disable-next-line no-control-regex
+export const KEY_VALUE_PAIR_UNSAFE_KEY_RE = /[\x00-\x1F\x7F]/g;
+// eslint-disable-next-line no-control-regex
+export const KEY_VALUE_PAIR_UNSAFE_VALUE_RE = /[\x00-\x08\x0A-\x0D\x0E-\x1F\x7F]/g;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/latex-protection.ts b/backend/llama.cpp/tools/ui/src/lib/constants/latex-protection.ts
new file mode 100644
index 0000000000000000000000000000000000000000..27c88e7252a633be1ed28f22a63c20a3bdfb43d7
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/latex-protection.ts
@@ -0,0 +1,35 @@
+/**
+ * Matches common Markdown code blocks to exclude them from further processing (e.g. LaTeX).
+ * - Fenced: ```...```
+ * - Inline: `...` (does NOT support nested backticks or multi-backtick syntax)
+ *
+ * Note: This pattern does not handle advanced cases like:
+ *       `` `code with `backticks` `` or \\``...\\``
+ */
+export const CODE_BLOCK_REGEXP = /(```[\s\S]*?```|`[^`\n]+`)/g;
+
+/**
+ * Matches LaTeX math delimiters \(...\) and \[...\] only when not preceded by a backslash (i.e., not escaped),
+ * while also capturing code blocks (```, `...`) so they can be skipped during processing.
+ *
+ * Uses negative lookbehind `(?<!\\)` to avoid matching \\( or \\[.
+ * Using the look‑behind pattern `(?<!\\)` we skip matches
+ * that are preceded by a backslash, e.g.
+ * `Definitions\\(also called macros)` (title of chapter 20 in The TeXbook)
+ * or `\\[4pt]` (LaTeX line-break).
+ *
+ * group 1: code-block
+ * group 2: square-bracket
+ * group 3: round-bracket
+ */
+export const LATEX_MATH_AND_CODE_PATTERN =
+	/(```[\S\s]*?```|`.*?`)|(?<!\\)\\\[([\S\s]*?[^\\])\\]|(?<!\\)\\\((.*?)\\\)/g;
+
+/** Regex to capture the content of a $$...\\\\...$$ block (display-formula with line-break) */
+export const LATEX_LINEBREAK_REGEXP = /\$\$([\s\S]*?\\\\[\s\S]*?)\$\$/;
+
+/** map from mchem-regexp to replacement */
+export const MHCHEM_PATTERN_MAP: readonly [RegExp, string][] = [
+	[/(\s)\$\\ce{/g, '$1$\\\\ce{'],
+	[/(\s)\$\\pu{/g, '$1$\\\\pu{']
+] as const;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/literal-html.ts b/backend/llama.cpp/tools/ui/src/lib/constants/literal-html.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ed1b0cf0d90d6d53cc90c693fcfc536d956dfbd3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/literal-html.ts
@@ -0,0 +1,15 @@
+export const LINE_BREAK = /\r?\n/;
+
+export const PHRASE_PARENTS = new Set([
+	'paragraph',
+	'heading',
+	'emphasis',
+	'strong',
+	'delete',
+	'link',
+	'linkReference',
+	'tableCell'
+]);
+
+export const NBSP = '\u00a0';
+export const TAB_AS_SPACES = NBSP.repeat(4);
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/markdown.ts b/backend/llama.cpp/tools/ui/src/lib/constants/markdown.ts
new file mode 100644
index 0000000000000000000000000000000000000000..783d31a22c11ef0ab2f12f9399edd626d1695017
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/markdown.ts
@@ -0,0 +1,4 @@
+export const IMAGE_NOT_ERROR_BOUND_SELECTOR = 'img:not([data-error-bound])';
+export const DATA_ERROR_BOUND_ATTR = 'errorBound';
+export const DATA_ERROR_HANDLED_ATTR = 'errorHandled';
+export const BOOL_TRUE_STRING = 'true';
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/max-bundle-size.ts b/backend/llama.cpp/tools/ui/src/lib/constants/max-bundle-size.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e04348febeeb93c92fee10b7e0742b44026c1f18
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/max-bundle-size.ts
@@ -0,0 +1 @@
+export const MAX_BUNDLE_SIZE = 2 * 1024 * 1024;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/mcp-form.ts b/backend/llama.cpp/tools/ui/src/lib/constants/mcp-form.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7a1ccffb03f1b06369a4cf8d57bbfbda3d2908c6
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/mcp-form.ts
@@ -0,0 +1,2 @@
+export const MCP_SERVER_URL_PLACEHOLDER = 'https://mcp.example.com/sse';
+export const MIN_AUTOCOMPLETE_INPUT_LENGTH = 1;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/mcp-resource.ts b/backend/llama.cpp/tools/ui/src/lib/constants/mcp-resource.ts
new file mode 100644
index 0000000000000000000000000000000000000000..44419012d16fa2ae67745edcc1c8caf580c54e70
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/mcp-resource.ts
@@ -0,0 +1,55 @@
+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';
+
+// Default filename for resource content downloads
+export const DEFAULT_RESOURCE_FILENAME = 'resource.txt';
+
+// Path separator for resource URI parsing
+export const PATH_SEPARATOR = '/';
+
+// Separator for joining text content from multiple resource parts
+export const RESOURCE_TEXT_CONTENT_SEPARATOR = '\n\n';
+
+// Fallback text for unknown content types
+export const RESOURCE_UNKNOWN_TYPE = 'unknown type';
+
+// Label prefix for binary blob content
+export const BINARY_CONTENT_LABEL = 'Binary content';
+
+/**
+ * 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/backend/llama.cpp/tools/ui/src/lib/constants/mcp.ts b/backend/llama.cpp/tools/ui/src/lib/constants/mcp.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a7381df0bff13b7ce0a14377b7e4a55d0f8058fb
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/mcp.ts
@@ -0,0 +1,94 @@
+import { Zap, Globe, Radio } from '@lucide/svelte';
+import { MCPTransportType } from '$lib/enums';
+import type { ClientCapabilities, Implementation } from '$lib/types';
+import type { Component } from 'svelte';
+import { MimeTypeImage } from '$lib/enums/files.enums';
+
+export const DEFAULT_CLIENT_VERSION = '1.0.0';
+export const MCP_CLIENT_NAME = 'llama-ui-mcp';
+export const DEFAULT_IMAGE_MIME_TYPE = MimeTypeImage.PNG;
+
+/** MIME types considered safe for rendering MCP server icons */
+export const MCP_ALLOWED_ICON_MIME_TYPES = new Set([
+	MimeTypeImage.PNG,
+	MimeTypeImage.JPEG,
+	MimeTypeImage.JPG,
+	MimeTypeImage.SVG,
+	MimeTypeImage.WEBP,
+	MimeTypeImage.ICO,
+	MimeTypeImage.ICO_MICROSOFT
+]);
+
+/**
+ * MCP specification version this client targets.
+ * Update when the upstream MCP spec introduces a new stable version:
+ * https://spec.modelcontextprotocol.io/
+ */
+export const MCP_PROTOCOL_VERSION = '2025-06-18';
+
+export const DEFAULT_MCP_CONFIG = {
+	protocolVersion: MCP_PROTOCOL_VERSION,
+	capabilities: { tools: { listChanged: true } } as ClientCapabilities,
+	clientInfo: { name: MCP_CLIENT_NAME, version: DEFAULT_CLIENT_VERSION } 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 = 'LlamaUI-MCP-Server';
+
+export const MCP_RECONNECT_INITIAL_DELAY = 1000;
+export const MCP_RECONNECT_BACKOFF_MULTIPLIER = 2;
+export const MCP_RECONNECT_MAX_DELAY = 30000;
+/** Per-attempt timeout for a single reconnection attempt before giving up and backing off. */
+export const MCP_RECONNECT_ATTEMPT_TIMEOUT_MS = 15_000;
+
+/** Maximum number of MCP server avatars to display in the chat form */
+export const MAX_DISPLAYED_MCP_AVATARS = 4;
+
+/** Expected count when two theme-less icons represent a light/dark pair */
+export const EXPECTED_THEMED_ICON_PAIR_COUNT = 2;
+
+/** CORS proxy URL query parameter name */
+export const CORS_PROXY_URL_PARAM = 'url';
+
+/** Header prefix for headers that should be forwarded by the CORS proxy */
+export const CORS_PROXY_HEADER_PREFIX = 'x-llama-server-proxy-header-';
+
+/** Number of trailing characters to keep visible when partially redacting mcp-session-id */
+export const MCP_SESSION_ID_VISIBLE_CHARS = 5;
+
+/** Partial-redaction rules for MCP headers: header name -> visible trailing chars */
+export const MCP_PARTIAL_REDACT_HEADERS = new Map<string, number>([
+	['mcp-session-id', MCP_SESSION_ID_VISIBLE_CHARS]
+]);
+
+/** Header names whose values should be redacted in diagnostic logs */
+export const REDACTED_HEADERS = new Set([
+	'authorization',
+	'api-key',
+	'cookie',
+	'mcp-session-id',
+	'proxy-authorization',
+	'set-cookie',
+	'x-auth-token',
+	'x-api-key'
+]);
+
+/** 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
+};
+
+/** Standard SSE endpoint path indicators */
+export const MCP_SSE_ENDPOINT = '/sse';
+export const MCP_SSE_ENDPOINT_SLASH = '/sse/';
+export const MCP_SSE_ENDPOINT_QUERY = '/sse?';
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/mermaid-blocks.ts b/backend/llama.cpp/tools/ui/src/lib/constants/mermaid-blocks.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cd9467fb6e6366ae8190e873dbb355b2e803b7e9
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/mermaid-blocks.ts
@@ -0,0 +1,9 @@
+export const MERMAID_WRAPPER_CLASS = 'mermaid-block-wrapper';
+export const MERMAID_SCROLL_CONTAINER_CLASS = 'mermaid-scroll-container';
+export const MERMAID_BLOCK_CLASS = 'mermaid';
+
+export const MERMAID_LANGUAGE = 'mermaid';
+
+export const MERMAID_SYNTAX_ATTR = 'data-mermaid-syntax';
+export const MERMAID_ID_ATTR = 'data-mermaid-id';
+export const MERMAID_RENDERED_ATTR = 'data-mermaid-rendered';
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/message-export.ts b/backend/llama.cpp/tools/ui/src/lib/constants/message-export.ts
new file mode 100644
index 0000000000000000000000000000000000000000..79fa36f9141d06c9209d58228f05b14b3b15384d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/message-export.ts
@@ -0,0 +1,20 @@
+// Conversation filename constants
+
+// Length of the trimmed conversation ID in the filename
+export const EXPORT_CONV_ID_TRIM_LENGTH = 8;
+// Maximum length of the sanitized conversation name snippet
+export const EXPORT_CONV_NAME_SUFFIX_MAX_LENGTH = 20;
+// Characters to keep in the ISO timestamp. 19 keeps 2026-01-01T00:00:00
+export const ISO_TIMESTAMP_SLICE_LENGTH = 19;
+
+// Replacements for making the conversation title filename-friendly
+export const NON_ALPHANUMERIC_REGEX = /[^a-z0-9]/gi;
+export const EXPORT_CONV_NONALNUM_REPLACEMENT = '_';
+export const MULTIPLE_UNDERSCORE_REGEX = /_+/g;
+
+// Replacements to the ISO date for use in the export filename
+export const ISO_DATE_TIME_SEPARATOR = 'T';
+export const ISO_DATE_TIME_SEPARATOR_REPLACEMENT = '_';
+
+export const ISO_TIME_SEPARATOR = ':';
+export const ISO_TIME_SEPARATOR_REPLACEMENT = '-';
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/model-id.ts b/backend/llama.cpp/tools/ui/src/lib/constants/model-id.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ab7932240e49e2d1c7e82b1ac992de7141c17ff8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/model-id.ts
@@ -0,0 +1,44 @@
+/** Sentinel value returned by `indexOf` when a substring is not found. */
+export const MODEL_ID_NOT_FOUND = -1;
+
+/** Separates `<org>` from `<model>` in a model ID, e.g. `org/ModelName`. */
+export const MODEL_ID_ORG_SEPARATOR = '/';
+
+/** Separates named segments within the model path, e.g. `ModelName-7B-GGUF`. */
+export const MODEL_ID_SEGMENT_SEPARATOR = '-';
+
+/** Separates the model path from the quantization tag, e.g. `model:Q4_K_M`. */
+export const MODEL_ID_QUANTIZATION_SEPARATOR = ':';
+
+/**
+ * Matches a quantization/precision segment, e.g. `Q4_K_M`, `IQ4_XS`, `F16`, `BF16`, `MXFP4`.
+ * Case-insensitive to handle both uppercase and lowercase inputs.
+ */
+export const MODEL_QUANTIZATION_SEGMENT_RE =
+	/^(I?Q\d+(_[A-Z0-9]+)*|F\d+|BF\d+|MXFP\d+(_[A-Z0-9]+)*)$/i;
+
+/**
+ * Matches prefix for custom quantization types, e.g. `UD-Q8_K_XL`.
+ */
+export const MODEL_CUSTOM_QUANTIZATION_PREFIX_RE = /^UD$/i;
+
+/**
+ * Matches a parameter-count segment, e.g. `7B`, `1.5b`, `120M`.
+ */
+export const MODEL_PARAMS_RE = /^\d+(\.\d+)?[BbMmKkTt]$/;
+
+/**
+ * Matches an activated-parameter-count segment, e.g. `A10B`, `a2.4b`.
+ * The leading `A`/`a` distinguishes it from a regular params segment.
+ */
+export const MODEL_ACTIVATED_PARAMS_RE = /^[Aa]\d+(\.\d+)?[BbMmKkTt]$/;
+
+/**
+ * Container format segments to exclude from tags (every model uses these).
+ */
+export const MODEL_IGNORED_SEGMENTS = new Set(['GGUF', 'GGML']);
+
+/**
+ * Matches a trailing weight file extension, e.g. `model.gguf` -> `model`.
+ */
+export const MODEL_WEIGHT_EXTENSION_RE = /\.(gguf|ggml)$/i;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/model-loading.ts b/backend/llama.cpp/tools/ui/src/lib/constants/model-loading.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a55ba708b1cd9a3c3ed5737bee5f7867071fb872
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/model-loading.ts
@@ -0,0 +1,14 @@
+/**
+ * Labels shown while a model loads, keyed by the stage reported on /models/sse.
+ */
+export const MODEL_LOAD_STAGE_LABELS: Record<ApiModelLoadStage, string> = {
+	text_model: 'Loading weights',
+	spec_model: 'Loading draft',
+	mmproj_model: 'Loading projector'
+};
+
+/**
+ * Share of the bar reserved for each load phase after text_model.
+ * text_model fills the rest, so a plain model reaches 100% on its own.
+ */
+export const MODEL_LOAD_TAIL_SHARE = 0.1;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/precision.ts b/backend/llama.cpp/tools/ui/src/lib/constants/precision.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8df5c4f966656a63085247faa8d43c7d20e78df3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/precision.ts
@@ -0,0 +1,2 @@
+export const PRECISION_MULTIPLIER = 1000000;
+export const PRECISION_DECIMAL_PLACES = 6;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/processing-info.ts b/backend/llama.cpp/tools/ui/src/lib/constants/processing-info.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2c3f7dc53440614c4ab1ef98a517acb0e1a4b40f
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/processing-info.ts
@@ -0,0 +1,8 @@
+export const PROCESSING_INFO_TIMEOUT = 2000;
+
+/**
+ * Statistics units labels
+ */
+export const STATS_UNITS = {
+	TOKENS_PER_SECOND: 't/s'
+} as const;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/pwa.ts b/backend/llama.cpp/tools/ui/src/lib/constants/pwa.ts
new file mode 100644
index 0000000000000000000000000000000000000000..343bcaf3cd414840f5e77a0ed1804d7335c24b8c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/pwa.ts
@@ -0,0 +1,361 @@
+/**
+ * Centralized PWA constants to avoid magic strings, regexes, and duplicated
+ * definitions across the codebase.
+ */
+
+import { APP_NAME } from './app';
+
+export const MEDIA_QUERIES = {
+	PREFERS_DARK: '(prefers-color-scheme: dark)',
+	PREFERS_LIGHT: '(prefers-color-scheme: light)',
+	DISPLAY_MODE_STANDALONE: '(display-mode: standalone)'
+} as const;
+
+export const THEME_COLORS = {
+	LIGHT: '#ffffff',
+	DARK: '#0d0d0d',
+	ACCENT_BLUE: '#2563eb',
+	ACCENT_BLUE_HOVER: '#1d4ed8',
+	BACKGROUND_LIGHT: 'white',
+	BACKGROUND_DARK: '#111111',
+	TITLE_UPDATE_ALERT: {
+		BORDER_LIGHT: 'zinc-200',
+		BORDER_DARK: 'zinc-700',
+		BG_LIGHT: 'white',
+		BG_DARK: 'zinc-800',
+		TEXT_LIGHT: 'zinc-500',
+		TEXT_DARK: 'zinc-400'
+	}
+} as const;
+
+export const FAVICON_PATHS = {
+	ICO_LIGHT: 'favicon.ico',
+	ICO_DARK: 'favicon-dark.ico',
+	SVG_LIGHT: 'favicon.svg',
+	SVG_DARK: 'favicon-dark.svg'
+} as const;
+
+// Substituted for `currentColor` in src/lib/assets/logo.svg when generating
+// the light/dark static sources consumed by the PWA asset generator.
+export const FAVICON_COLORS = {
+	LIGHT: '#111111',
+	DARK: '#fafafa'
+} as const;
+
+export const FAVICON_SELECTORS = {
+	ICO_48X48: 'link[rel="icon"][sizes="48x48"]',
+	SVG_ANY: 'link[rel="icon"][type="image/svg+xml"]'
+} as const;
+
+export const APPLE_ASSETS = {
+	TOUCH_ICON: 'apple-touch-icon-180x180.png'
+} as const;
+
+export const PWA_MANIFEST = {
+	name: APP_NAME,
+	short_name: APP_NAME,
+	description: 'Local AI chat interface powered by llama.cpp',
+	start_url: './',
+	display: 'standalone' as const,
+	background_color: THEME_COLORS.BACKGROUND_LIGHT,
+	theme_color: THEME_COLORS.BACKGROUND_LIGHT,
+	icons: [
+		{ src: 'pwa-64x64.png', sizes: '64x64', type: 'image/png' },
+		{ src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
+		{ src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'any' as const },
+		{
+			src: 'maskable-icon-512x512.png',
+			sizes: '512x512',
+			type: 'image/png',
+			purpose: 'maskable' as const
+		}
+	]
+};
+
+export const PWA_ICON_PATHS = {
+	PWA_64: '/pwa-64x64.png',
+	PWA_192: '/pwa-192x192.png',
+	PWA_512: '/pwa-512x512.png',
+	MASKABLE_512: '/maskable-icon-512x512.png'
+} as const;
+
+/** Apple device dimensions (logical points) and DPR, from Apple HIG. */
+export const APPLE_DEVICES = {
+	// iPhones (DPR 3)
+	'1170x2532': { width: 390, height: 844, dpr: 3 }, // iPhone 13, 15
+	'1179x2556': { width: 393, height: 852, dpr: 3 }, // iPhone 14, 15 Pro, 16
+	'1206x2622': { width: 402, height: 874, dpr: 3 }, // iPhone 16 Plus, 16e
+	'1284x2778': { width: 428, height: 926, dpr: 3 }, // iPhone 15 Plus
+	'1290x2796': { width: 430, height: 932, dpr: 3 }, // iPhone 15 Pro Max, 16 Pro
+	'1320x2868': { width: 440, height: 956, dpr: 3 }, // iPhone 16 Pro Max
+	'750x1334': { width: 375, height: 667, dpr: 2 }, // iPhone 6/7/8, 14
+	'640x1136': { width: 320, height: 568, dpr: 2 }, // iPhone 6/7/8 Plus
+	// iPads (DPR 2)
+	'1668x2388': { width: 834, height: 1194, dpr: 2 }, // iPad Air 11", iPad 11"
+	'2048x2732': { width: 1024, height: 1366, dpr: 2 }, // iPad Pro 12.9"
+	'1640x2360': { width: 820, height: 1180, dpr: 2 }, // iPad Air 10.9"
+	'1032x1376': { width: 1032, height: 1376, dpr: 2 }, // iPad Air 13"
+	'744x1133': { width: 376, height: 573, dpr: 2 } // iPad mini 8.3"
+} as const;
+
+export type AppleDeviceKey = keyof typeof APPLE_DEVICES;
+
+export const PWA_FILE_PATHS = {
+	MANIFEST: '/manifest.webmanifest',
+	SERVICE_WORKER: '/sw.js',
+	VERSION: '/version.json',
+	WORKBOX: '/workbox-<hash>.js'
+} as const;
+
+// Used by the server middleware to skip API key validation.
+// Keep in sync with tools/server/server-http.cpp public_endpoints list.
+
+export const PUBLIC_ENDPOINTS = [
+	'/health',
+	'/v1/health',
+	'/models',
+	'/v1/models',
+	'/props',
+	'/metrics',
+	'/',
+	'/index.html',
+
+	'/favicon.ico',
+	'/favicon-dark.ico',
+	'/favicon.svg',
+	'/favicon-dark.svg',
+	'/pwa-64x64.png',
+	'/pwa-192x192.png',
+	'/pwa-512x512.png',
+	'/maskable-icon-512x512.png',
+	'/apple-touch-icon-180x180.png',
+	'/apple-splash-portrait-640x1136.png',
+	'/apple-splash-landscape-640x1136.png',
+	'/apple-splash-portrait-750x1334.png',
+	'/apple-splash-landscape-750x1334.png',
+	'/apple-splash-portrait-1170x2532.png',
+	'/apple-splash-landscape-1170x2532.png',
+	'/apple-splash-portrait-1179x2556.png',
+	'/apple-splash-landscape-1179x2556.png',
+	'/apple-splash-portrait-1206x2622.png',
+	'/apple-splash-landscape-1206x2622.png',
+	'/apple-splash-portrait-1284x2778.png',
+	'/apple-splash-landscape-1284x2778.png',
+	'/apple-splash-portrait-1290x2796.png',
+	'/apple-splash-landscape-1290x2796.png',
+	'/apple-splash-portrait-1320x2868.png',
+	'/apple-splash-landscape-1320x2868.png',
+	'/apple-splash-portrait-1488x2266.png',
+	'/apple-splash-landscape-1488x2266.png',
+	'/apple-splash-portrait-1640x2360.png',
+	'/apple-splash-landscape-1640x2360.png',
+	'/apple-splash-portrait-1668x2388.png',
+	'/apple-splash-landscape-1668x2388.png',
+	'/apple-splash-portrait-2048x2732.png',
+	'/apple-splash-landscape-2048x2732.png',
+	'/apple-splash-portrait-dark-640x1136.png',
+	'/apple-splash-landscape-dark-640x1136.png',
+	'/apple-splash-portrait-dark-750x1334.png',
+	'/apple-splash-landscape-dark-750x1334.png',
+	'/apple-splash-portrait-dark-1170x2532.png',
+	'/apple-splash-landscape-dark-1170x2532.png',
+	'/apple-splash-portrait-dark-1179x2556.png',
+	'/apple-splash-landscape-dark-1179x2556.png',
+	'/apple-splash-portrait-dark-1206x2622.png',
+	'/apple-splash-landscape-dark-1206x2622.png',
+	'/apple-splash-portrait-dark-1284x2778.png',
+	'/apple-splash-landscape-dark-1284x2778.png',
+	'/apple-splash-portrait-dark-1290x2796.png',
+	'/apple-splash-landscape-dark-1290x2796.png',
+	'/apple-splash-portrait-dark-1320x2868.png',
+	'/apple-splash-landscape-dark-1320x2868.png',
+	'/apple-splash-portrait-dark-1488x2266.png',
+	'/apple-splash-landscape-dark-1488x2266.png',
+	'/apple-splash-portrait-dark-1640x2360.png',
+	'/apple-splash-landscape-dark-1640x2360.png',
+	'/apple-splash-portrait-dark-1668x2388.png',
+	'/apple-splash-landscape-dark-1668x2388.png',
+	'/apple-splash-portrait-dark-2048x2732.png',
+	'/apple-splash-landscape-dark-2048x2732.png',
+	'/manifest.webmanifest',
+	'/sw.js',
+	'/version.json',
+	'/workbox-<hash>.js'
+] as const;
+export const BUILD_CONFIG = {
+	OUTPUT_DIR: './dist',
+	GUIDE_COMMENT: `
+<!--
+  This is a static build of the frontend.
+  It is automatically generated by the build process.
+  Do not edit this file directly.
+  To make changes, refer to the "Web UI" section in the README.
+-->
+`.trim()
+} as const;
+
+export const REGEX_PATTERNS = {
+	SPLASH_FILE: /^apple-splash-(portrait|landscape)-(dark-)?(\d+)x(\d+)\.png$/,
+	HEAD_CLOSE: /\t*<\/head>/
+} as const;
+
+// Device names used by @vite-pwa/assets-generator for splash screen generation.
+// Keep in sync with pwa-assets.config.ts.
+export const PWA_GENERATOR_DEVICES = [
+	'iPhone 13',
+	'iPhone 13 Pro',
+	'iPhone 13 Pro Max',
+	'iPhone 14',
+	'iPhone 14 Plus',
+	'iPhone 14 Pro',
+	'iPhone 14 Pro Max',
+	'iPhone 15',
+	'iPhone 15 Plus',
+	'iPhone 15 Pro',
+	'iPhone 15 Pro Max',
+	'iPhone 16',
+	'iPhone 16 Plus',
+	'iPhone 16 Pro',
+	'iPhone 16 Pro Max',
+	'iPhone 16e',
+	'iPhone SE 4"',
+	'iPhone SE 4.7"',
+	'iPad 11"',
+	'iPad Air 10.9"',
+	'iPad Air 11"',
+	'iPad Air 13"',
+	'iPad Pro 11"',
+	'iPad Pro 12.9"',
+	'iPad mini 8.3"'
+] as const;
+
+// PWA assets generator configuration — used by pwa-assets.config.ts
+// FAVICON_PADDING: fraction (0..1) of the icon reserved as equal margin on
+// each side. Applied to icon PNG/ICO outputs by @vite-pwa/assets-generator and
+// post-processed into the static favicon.svg so the in-app logo (which reads
+// src/lib/assets/logo.svg directly) is unaffected.
+export const PWA_ASSET_GENERATOR = {
+	LINK_PRESET: '2023',
+	FAVICON_PADDING: 0.04,
+	SPLASH_PADDING: 0.75,
+	FIT_MODE: 'contain',
+	ADD_MEDIA_SCREEN: true,
+	BASE_PATH: './',
+	XHTML: false,
+	PNG_COMPRESSION_LEVEL: 9,
+	PNG_QUALITY: 60,
+	DARK_PREFIX: 'dark-'
+} as const;
+
+export const CACHE_SETTINGS = {
+	IMMUTABLE_MAX_AGE_SECONDS: 31536000,
+	API_CACHE_MAX_AGE_SECONDS: 60 * 60 * 24,
+	API_CACHE_MAX_ENTRIES: 50,
+	MAX_FILE_SIZE_BYTES: 10 * 1024 * 1024
+} as const;
+
+export const GLOB_PATTERNS: string[] = [
+	'**/*.{js,css,html,ico,svg,png,webp,woff,woff2,json,webmanifest}'
+];
+
+export const SW_CONFIG = {
+	CHECK_INTERVAL_MS: 60000,
+	UPDATE_FETCH_OPTIONS: {
+		CACHE: 'no-store',
+		HEADERS: {
+			CACHE: 'no-store',
+			CACHE_CONTROL: 'no-cache'
+		}
+	}
+} as const;
+
+// Runtime caching configuration for Workbox
+export const RUNTIME_CACHING = {
+	HANDLER: 'NetworkFirst',
+	CACHE_NAME: 'api-cache'
+} as const;
+
+// Workbox runtime caching patterns
+export const API_CACHING_PATTERNS = {
+	V1_API: /^\/v1\/.*/,
+	STATIC_API: /^\/(health|props|models|tools|slots|cors-proxy).*/
+} as const;
+
+// SvelteKit PWA plugin options
+export const PWA_KIT_OPTIONS = {} as const;
+
+export const APPLE_META_TAGS = {
+	MOBILE_WEB_APP_CAPABLE: { name: 'apple-mobile-web-app-capable', content: 'yes' },
+	STATUS_BAR_STYLE: { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
+	MOBILE_WEB_APP_TITLE: { name: 'apple-mobile-web-app-title' }
+} as const;
+
+// Splash screen HTML link tag prefix used by generateSplashScreenLinks
+export const SPLASH_LINK = {
+	HTML: '<link rel="apple-touch-startup-image"',
+	DARK_MEDIA_SUFFIX: ' and (prefers-color-scheme: dark)'
+} as const;
+
+// SvelteKit PWA plugin configuration — used by @vite.config.ts
+import type { SvelteKitPWAOptions } from '@vite-pwa/sveltekit';
+
+export const SVELTEKIT_PWA_OPTIONS: SvelteKitPWAOptions = {
+	// Strategy: generateSW - the plugin generates a service worker automatically
+	// using Workbox. For a custom SW, use 'injectManifest' instead.
+	// Manifest configuration
+	manifest: PWA_MANIFEST,
+
+	// Workbox configuration for generateSW strategy
+	workbox: {
+		// Match all static assets in the build output.
+		// Uses '**/' because SvelteKit outputs files under _app/immutable/
+		// subdirectories.
+		globPatterns: GLOB_PATTERNS,
+		maximumFileSizeToCacheInBytes: CACHE_SETTINGS.MAX_FILE_SIZE_BYTES,
+
+		// Prevent @vite-pwa/sveltekit from auto-adding a NavigationRoute by
+		// setting navigateFallback to empty string. This keeps the service
+		// worker from intercepting direct browser navigation to server API
+		// endpoints (e.g. /slots, /models, /v1/models) which should return
+		// JSON, not the SPA HTML shell. The server's own static-file fallback
+		// handles non-API navigation to index.html for the SPA router.
+		navigateFallback: '',
+
+		// Runtime caching for API calls - use NetworkFirst so APIs are always fresh
+		runtimeCaching: [
+			{
+				urlPattern: API_CACHING_PATTERNS.V1_API,
+				handler: RUNTIME_CACHING.HANDLER,
+				options: {
+					cacheName: RUNTIME_CACHING.CACHE_NAME,
+					expiration: {
+						maxEntries: CACHE_SETTINGS.API_CACHE_MAX_ENTRIES,
+						maxAgeSeconds: CACHE_SETTINGS.API_CACHE_MAX_AGE_SECONDS
+					}
+				}
+			},
+			{
+				urlPattern: API_CACHING_PATTERNS.STATIC_API,
+				handler: RUNTIME_CACHING.HANDLER,
+				options: {
+					cacheName: RUNTIME_CACHING.CACHE_NAME,
+					expiration: {
+						maxEntries: CACHE_SETTINGS.API_CACHE_MAX_ENTRIES,
+						maxAgeSeconds: CACHE_SETTINGS.API_CACHE_MAX_AGE_SECONDS
+					}
+				}
+			}
+		]
+	},
+
+	devOptions: {
+		enabled: true,
+		suppressWarnings: true
+	},
+
+	// SvelteKit-specific options
+	kit: {
+		// Include version file for proper cache invalidation
+		includeVersionFile: true
+	}
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/reasoning-effort-tokens.ts b/backend/llama.cpp/tools/ui/src/lib/constants/reasoning-effort-tokens.ts
new file mode 100644
index 0000000000000000000000000000000000000000..059af71dea008fe1510bfe46dc45c54c764ca719
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/reasoning-effort-tokens.ts
@@ -0,0 +1,12 @@
+import { ReasoningEffort } from '$lib/enums';
+
+/**
+ * Reasoning effort to token budget mapping.
+ * Maps the ReasoningEffort enum values to concrete token counts for the server.
+ */
+export const REASONING_EFFORT_TOKENS: Record<string, number> = {
+	[ReasoningEffort.LOW]: 512,
+	[ReasoningEffort.MEDIUM]: 2048,
+	[ReasoningEffort.HIGH]: 8192,
+	[ReasoningEffort.MAX]: -1 // unlimited
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/reasoning-effort.ts b/backend/llama.cpp/tools/ui/src/lib/constants/reasoning-effort.ts
new file mode 100644
index 0000000000000000000000000000000000000000..28a24420e614f9942de230398697cd6df64e18d6
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/reasoning-effort.ts
@@ -0,0 +1,22 @@
+import { ReasoningEffort } from '$lib/enums';
+import type { ReasoningEffortLevel } from '$lib/types';
+
+/**
+ * Reasoning effort UI labels.
+ * Keys match the ReasoningEffort enum values for type-safe lookups.
+ */
+export const REASONING_EFFORT_LABELS: Record<string, string> = {
+	[ReasoningEffort.OFF]: 'Off',
+	[ReasoningEffort.LOW]: 'Low',
+	[ReasoningEffort.MEDIUM]: 'Medium',
+	[ReasoningEffort.HIGH]: 'High',
+	[ReasoningEffort.MAX]: 'Max'
+};
+
+export const REASONING_EFFORT_LEVELS: ReasoningEffortLevel[] = [
+	{ value: ReasoningEffort.OFF, label: 'Off', isOff: true },
+	{ value: ReasoningEffort.LOW, label: 'Low' },
+	{ value: ReasoningEffort.MEDIUM, label: 'Medium' },
+	{ value: ReasoningEffort.HIGH, label: 'High' },
+	{ value: ReasoningEffort.MAX, label: 'Max', hasInfo: true }
+];
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/routes.ts b/backend/llama.cpp/tools/ui/src/lib/constants/routes.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1adf0a600588d5db51cd5ea55d3a869cafd49ae8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/routes.ts
@@ -0,0 +1,29 @@
+export const NEW_CHAT_PARAM = 'new_chat';
+
+/** Settings section slugs — used for routes and navigation. */
+export const SETTINGS_SECTION_SLUGS = {
+	GENERAL: 'general',
+	DISPLAY: 'display',
+	SAMPLING: 'sampling',
+	PENALTIES: 'penalties',
+	AGENTIC: 'agentic',
+	DEVELOPER: 'developer',
+	MCP: 'mcp',
+	TOOLS: 'tools',
+	IMPORT_EXPORT: 'import-export'
+} as const;
+
+export const ROUTES = {
+	/** Root — start of the app. */
+	START: '#/',
+	/** New chat — root with new chat query param. */
+	NEW_CHAT: `?${NEW_CHAT_PARAM}=true#/`,
+	/** Chat base — for dynamic chat URLs use RouterService. */
+	CHAT: '#/chat',
+	/** MCP servers. */
+	MCP_SERVERS: '#/mcp-servers',
+	/** Settings base — for dynamic settings URLs use RouterService. */
+	SETTINGS: '#/settings',
+	/** Search — mobile-only full-page conversation search. */
+	SEARCH: '#/search'
+} as const;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/sandbox.ts b/backend/llama.cpp/tools/ui/src/lib/constants/sandbox.ts
new file mode 100644
index 0000000000000000000000000000000000000000..30e769509e820018c933c64e6a7c1dfaf65a57dd
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/sandbox.ts
@@ -0,0 +1,39 @@
+import { JsonSchemaType, ToolCallType } from '$lib/enums';
+import type { OpenAIToolDefinition } from '$lib/types';
+
+export const SANDBOX_TOOL_NAME = 'run_javascript';
+
+export const SANDBOX_TIMEOUT_MS_DEFAULT = 10000;
+
+export const SANDBOX_TIMEOUT_MS_MAX = 30000;
+
+export const SANDBOX_OUTPUT_MAX_CHARS = 8192;
+
+export const SANDBOX_EMPTY_OUTPUT = '(no output)';
+
+export const SANDBOX_TRUNCATION_NOTICE = '[output truncated]';
+
+export const SANDBOX_TOOL_DEFINITION: OpenAIToolDefinition = {
+	type: ToolCallType.FUNCTION,
+	function: {
+		name: SANDBOX_TOOL_NAME,
+		description:
+			'Execute JavaScript in a sandboxed browser worker (no DOM, no page access). ' +
+			'Top level await is supported. Use console.log to print intermediate values; ' +
+			'a top level return statement is captured as the result.',
+		parameters: {
+			type: JsonSchemaType.OBJECT,
+			properties: {
+				code: {
+					type: JsonSchemaType.STRING,
+					description: 'JavaScript source to execute'
+				},
+				timeout_ms: {
+					type: JsonSchemaType.NUMBER,
+					description: `Execution timeout in milliseconds, default ${SANDBOX_TIMEOUT_MS_DEFAULT}, max ${SANDBOX_TIMEOUT_MS_MAX}`
+				}
+			},
+			required: ['code']
+		}
+	}
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/settings-keys.ts b/backend/llama.cpp/tools/ui/src/lib/constants/settings-keys.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c69c47f648da4ac48518dab0c290c4b375318f11
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/settings-keys.ts
@@ -0,0 +1,74 @@
+/**
+ * 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',
+	SEND_ON_ENTER: 'sendOnEnter',
+	ENABLE_CONTINUE_GENERATION: 'enableContinueGeneration',
+	PDF_AS_IMAGE: 'pdfAsImage',
+	ASK_FOR_TITLE_CONFIRMATION: 'askForTitleConfirmation',
+	TITLE_GENERATION_USE_FIRST_LINE: 'titleGenerationUseFirstLine',
+	TITLE_GENERATION_USE_LLM: 'titleGenerationUseLLM',
+	TITLE_GENERATION_PROMPT: 'titleGenerationPrompt',
+	MAX_IMAGE_RESOLUTION: 'maxImageMPixels',
+	// Display
+	SHOW_MESSAGE_STATS: 'showMessageStats',
+	SHOW_THOUGHT_IN_PROGRESS: 'showThoughtInProgress',
+	AUTO_MIC_ON_EMPTY: 'autoMicOnEmpty',
+	RENDER_USER_CONTENT_AS_MARKDOWN: 'renderUserContentAsMarkdown',
+	DISABLE_AUTO_SCROLL: 'disableAutoScroll',
+	ALWAYS_SHOW_SIDEBAR_ON_DESKTOP: 'alwaysShowSidebarOnDesktop',
+	FULL_HEIGHT_CODE_BLOCKS: 'fullHeightCodeBlocks',
+	SHOW_RAW_MODEL_NAMES: 'showRawModelNames',
+	SHOW_MODEL_QUANTIZATION: 'showModelQuantization',
+	SHOW_MODEL_TAGS: 'showModelTags',
+	SHOW_BUILD_VERSION: 'showBuildVersion',
+	SHOW_SYSTEM_MESSAGE: 'showSystemMessage',
+	RENDER_THINKING_AS_MARKDOWN: 'renderThinkingAsMarkdown',
+	// 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
+	MCP_SERVERS: 'mcpServers',
+	MCP_REQUEST_TIMEOUT_SECONDS: 'mcpRequestTimeoutSeconds',
+	AGENTIC_MAX_TURNS: 'agenticMaxTurns',
+	AGENTIC_MAX_TOOL_PREVIEW_LINES: 'agenticMaxToolPreviewLines',
+	SHOW_TOOL_CALL_IN_PROGRESS: 'showToolCallInProgress',
+	// Performance
+	PRE_ENCODE_CONVERSATION: 'preEncodeConversation',
+	// Developer
+	DISABLE_REASONING_PARSING: 'disableReasoningParsing',
+	EXCLUDE_REASONING_FROM_CONTEXT: 'excludeReasoningFromContext',
+	SHOW_RAW_OUTPUT_SWITCH: 'showRawOutputSwitch',
+	// PY_INTERPRETER_ENABLED: 'pyInterpreterEnabled',
+	JS_SANDBOX_ENABLED: 'jsSandboxEnabled',
+	CUSTOM_JSON: 'customJson',
+	CUSTOM_CSS: 'customCss'
+} as const;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/settings-registry.ts b/backend/llama.cpp/tools/ui/src/lib/constants/settings-registry.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7e114d62d54b532490dc1d525f94340ad9705656
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/settings-registry.ts
@@ -0,0 +1,858 @@
+import { ColorMode } from '$lib/enums/ui.enums';
+import { SettingsFieldType } from '$lib/enums/settings.enums';
+import { SyncableParameterType } from '$lib/enums';
+import {
+	Funnel,
+	AlertTriangle,
+	Code,
+	Monitor,
+	ListRestart,
+	Sliders,
+	PencilRuler,
+	Database,
+	Monitor as MonitorIcon,
+	Sun,
+	Moon
+} from '@lucide/svelte';
+import type { Component } from 'svelte';
+import type {
+	SettingsConfigValue,
+	SyncableParameter,
+	SettingsEntry,
+	SettingsSectionTitle,
+	SettingsSectionEntry,
+	SettingsSection
+} from '$lib/types';
+import { CLI_FLAGS, DEFAULT_MCP_CONFIG } from '$lib/constants';
+import McpLogo from '$lib/components/app/mcp/McpLogo.svelte';
+import { SETTINGS_KEYS } from './settings-keys';
+import { ROUTES, SETTINGS_SECTION_SLUGS } from './routes';
+import { TITLE_GENERATION } from './title-generation';
+
+export const SETTINGS_SECTION_TITLES = {
+	GENERAL: 'General',
+	DISPLAY: 'Display',
+	SAMPLING: 'Sampling',
+	PENALTIES: 'Penalties',
+	AGENTIC: 'Agentic',
+	TOOLS: 'Tools',
+	MCP: 'MCP',
+	IMPORT_EXPORT: 'Import/Export',
+	DEVELOPER: 'Developer'
+} as const;
+
+const STANDALONE_SECTIONS: { title: SettingsSectionTitle; slug: string; icon: Component }[] = [
+	{ title: SETTINGS_SECTION_TITLES.TOOLS, slug: SETTINGS_SECTION_SLUGS.TOOLS, icon: PencilRuler },
+	{
+		title: SETTINGS_SECTION_TITLES.IMPORT_EXPORT,
+		slug: SETTINGS_SECTION_SLUGS.IMPORT_EXPORT,
+		icon: Database
+	}
+];
+
+const COLOR_MODE_OPTIONS: Array<{ value: string; label: string; icon: Component }> = [
+	{ value: ColorMode.SYSTEM, label: 'System', icon: MonitorIcon },
+	{ value: ColorMode.LIGHT, label: 'Light', icon: Sun },
+	{ value: ColorMode.DARK, label: 'Dark', icon: Moon }
+];
+
+const SETTINGS_REGISTRY: Record<string, SettingsSectionEntry> = {
+	[SETTINGS_SECTION_SLUGS.GENERAL]: {
+		title: SETTINGS_SECTION_TITLES.GENERAL,
+		slug: SETTINGS_SECTION_SLUGS.GENERAL,
+		icon: Sliders,
+		settings: [
+			{
+				key: SETTINGS_KEYS.THEME,
+				label: 'Theme',
+				help: 'Choose the color theme for the interface. You can choose between System (follows your device settings), Light, or Dark.',
+				defaultValue: ColorMode.SYSTEM,
+				type: SettingsFieldType.SELECT,
+				section: SETTINGS_SECTION_SLUGS.GENERAL,
+				options: COLOR_MODE_OPTIONS,
+				sync: { serverKey: SETTINGS_KEYS.THEME, paramType: SyncableParameterType.STRING }
+			},
+			{
+				key: SETTINGS_KEYS.API_KEY,
+				label: 'API Key',
+				help: `Set the API Key if you are using <code> ${CLI_FLAGS.API_KEY} </code> option for the server.`,
+				defaultValue: '',
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.GENERAL
+			},
+			{
+				key: SETTINGS_KEYS.SYSTEM_MESSAGE,
+				label: 'System Message',
+				help: 'The starting message that defines how model should behave.',
+				defaultValue: '',
+				type: SettingsFieldType.TEXTAREA,
+				section: SETTINGS_SECTION_SLUGS.GENERAL,
+				sync: {
+					serverKey: SETTINGS_KEYS.SYSTEM_MESSAGE,
+					paramType: SyncableParameterType.STRING
+				}
+			},
+			{
+				key: SETTINGS_KEYS.PASTE_LONG_TEXT_TO_FILE_LEN,
+				label: 'Paste long text to file length',
+				help: 'On pasting long text, it will be converted to a file. You can control the file length by setting the value of this parameter. Value 0 means disable.',
+				defaultValue: 2500,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.GENERAL,
+				sync: {
+					serverKey: SETTINGS_KEYS.PASTE_LONG_TEXT_TO_FILE_LEN,
+					paramType: SyncableParameterType.NUMBER
+				}
+			},
+			{
+				key: SETTINGS_KEYS.SEND_ON_ENTER,
+				label: 'Send message on Enter',
+				help: 'Use Enter to send messages and Shift + Enter for new lines. When disabled, use Ctrl/Cmd + Enter.',
+				defaultValue: true,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.GENERAL,
+				sync: {
+					serverKey: SETTINGS_KEYS.SEND_ON_ENTER,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.COPY_TEXT_ATTACHMENTS_AS_PLAIN_TEXT,
+				label: 'Copy text attachments as plain text',
+				help: 'When copying a message with text attachments, combine them into a single plain text string instead of a special format that can be pasted back as attachments.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.GENERAL,
+				sync: {
+					serverKey: SETTINGS_KEYS.COPY_TEXT_ATTACHMENTS_AS_PLAIN_TEXT,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.ENABLE_CONTINUE_GENERATION,
+				label: 'Enable "Continue" button',
+				help: 'Enable "Continue" button for assistant messages, including reasoning models.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.GENERAL,
+				isExperimental: true,
+				sync: {
+					serverKey: SETTINGS_KEYS.ENABLE_CONTINUE_GENERATION,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.PDF_AS_IMAGE,
+				label: 'Parse PDF as image',
+				help: 'Parse PDF as image instead of text. Automatically falls back to text processing for non-vision models.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.GENERAL,
+				sync: {
+					serverKey: SETTINGS_KEYS.PDF_AS_IMAGE,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.ASK_FOR_TITLE_CONFIRMATION,
+				label: 'Ask for confirmation before changing conversation title',
+				help: 'Ask for confirmation before automatically changing conversation title when editing the first message.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.GENERAL,
+				sync: {
+					serverKey: SETTINGS_KEYS.ASK_FOR_TITLE_CONFIRMATION,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.TITLE_GENERATION_USE_FIRST_LINE,
+				label: 'Use first non-empty line for conversation title',
+				help: 'Use only the first non-empty line of the prompt to generate the conversation title.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.GENERAL,
+				sync: {
+					serverKey: SETTINGS_KEYS.TITLE_GENERATION_USE_FIRST_LINE,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.TITLE_GENERATION_USE_LLM,
+				label: 'Use LLM to generate conversation title',
+				help: 'Use the LLM to automatically generate conversation titles based on the first message exchange.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.GENERAL,
+				isExperimental: true,
+				sync: {
+					serverKey: SETTINGS_KEYS.TITLE_GENERATION_USE_LLM,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.TITLE_GENERATION_PROMPT,
+				label: 'LLM title generation prompt',
+				help: 'Optional template for the title generation prompt. Use {{USER}} for the user message and {{ASSISTANT}} for the assistant message.',
+				defaultValue: TITLE_GENERATION.DEFAULT_PROMPT,
+				type: SettingsFieldType.TEXTAREA,
+				section: SETTINGS_SECTION_SLUGS.GENERAL,
+				sync: {
+					serverKey: SETTINGS_KEYS.TITLE_GENERATION_PROMPT,
+					paramType: SyncableParameterType.STRING
+				}
+			},
+			{
+				key: SETTINGS_KEYS.MAX_IMAGE_RESOLUTION,
+				label: 'Maximum image resolution (megapixels)',
+				help: 'Images larger than this will be resized before sending to server. Set to 0 to disable.',
+				defaultValue: 0,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.GENERAL,
+				sync: {
+					serverKey: SETTINGS_KEYS.MAX_IMAGE_RESOLUTION,
+					paramType: SyncableParameterType.NUMBER
+				}
+			}
+		]
+	},
+	[SETTINGS_SECTION_SLUGS.DISPLAY]: {
+		title: SETTINGS_SECTION_TITLES.DISPLAY,
+		slug: SETTINGS_SECTION_SLUGS.DISPLAY,
+		icon: Monitor,
+		settings: [
+			{
+				key: SETTINGS_KEYS.SHOW_MESSAGE_STATS,
+				label: 'Show message generation statistics',
+				help: 'Display generation statistics (tokens/second, token count, duration) below each assistant message.',
+				defaultValue: true,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.DISPLAY,
+				sync: {
+					serverKey: SETTINGS_KEYS.SHOW_MESSAGE_STATS,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.SHOW_THOUGHT_IN_PROGRESS,
+				label: 'Show thought in progress',
+				help: 'Expand thought process by default when generating messages.',
+				defaultValue: true,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.DISPLAY,
+				sync: {
+					serverKey: SETTINGS_KEYS.SHOW_THOUGHT_IN_PROGRESS,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.SHOW_TOOL_CALL_IN_PROGRESS,
+				label: 'Show tool call in progress',
+				help: 'Automatically expand tool call details while executing and keep them expanded after completion.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.DISPLAY,
+				sync: {
+					serverKey: SETTINGS_KEYS.SHOW_TOOL_CALL_IN_PROGRESS,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.AUTO_MIC_ON_EMPTY,
+				label: 'Show microphone on empty input',
+				help: 'Automatically show microphone button instead of send button when textarea is empty for models with audio modality support.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.DISPLAY,
+				isExperimental: true,
+				sync: {
+					serverKey: SETTINGS_KEYS.AUTO_MIC_ON_EMPTY,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.RENDER_USER_CONTENT_AS_MARKDOWN,
+				label: 'Render user content as Markdown',
+				help: 'Render user messages using markdown formatting in the chat.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.DISPLAY,
+				sync: {
+					serverKey: SETTINGS_KEYS.RENDER_USER_CONTENT_AS_MARKDOWN,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.RENDER_THINKING_AS_MARKDOWN,
+				label: 'Render thinking as Markdown',
+				help: 'Render the reasoning/thinking block content as formatted Markdown instead of plain text.',
+				defaultValue: true,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.DISPLAY,
+				sync: {
+					serverKey: SETTINGS_KEYS.RENDER_THINKING_AS_MARKDOWN,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.FULL_HEIGHT_CODE_BLOCKS,
+				label: 'Use full height code blocks',
+				help: 'Always display code blocks at their full natural height, overriding any height limits.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.DISPLAY,
+				sync: {
+					serverKey: SETTINGS_KEYS.FULL_HEIGHT_CODE_BLOCKS,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.DISABLE_AUTO_SCROLL,
+				label: 'Disable automatic scroll',
+				help: 'Disable automatic scrolling while messages stream so you can control the viewport position manually.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.DISPLAY,
+				sync: {
+					serverKey: SETTINGS_KEYS.DISABLE_AUTO_SCROLL,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.ALWAYS_SHOW_SIDEBAR_ON_DESKTOP,
+				label: 'Always show sidebar on desktop',
+				help: 'Always keep the sidebar visible on desktop instead of auto-hiding it.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.DISPLAY,
+				sync: {
+					serverKey: SETTINGS_KEYS.ALWAYS_SHOW_SIDEBAR_ON_DESKTOP,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.SHOW_RAW_MODEL_NAMES,
+				label: 'Show raw model names',
+				help: 'Display full raw model identifiers (e.g. "ggml-org/GLM-4.7-Flash-GGUF:Q8_0") instead of parsed names with badges.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.DISPLAY,
+				sync: {
+					serverKey: SETTINGS_KEYS.SHOW_RAW_MODEL_NAMES,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.SHOW_MODEL_QUANTIZATION,
+				label: 'Show model quantization information',
+				help: 'Display quantization badges (e.g. Q8_0, Q4_K_M) next to model names throughout the interface.',
+				defaultValue: true,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.DISPLAY,
+				sync: {
+					serverKey: SETTINGS_KEYS.SHOW_MODEL_QUANTIZATION,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.SHOW_MODEL_TAGS,
+				label: 'Show model tags',
+				help: 'Display model tags (e.g. "vision", "reasoning") next to model names throughout the interface.',
+				defaultValue: true,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.DISPLAY,
+				sync: {
+					serverKey: SETTINGS_KEYS.SHOW_MODEL_TAGS,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.SHOW_BUILD_VERSION,
+				label: 'Show build version information',
+				help: 'Display the current build version in the bottom-right corner of the interface.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.DISPLAY,
+				sync: {
+					serverKey: SETTINGS_KEYS.SHOW_BUILD_VERSION,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			}
+		]
+	},
+	[SETTINGS_SECTION_SLUGS.SAMPLING]: {
+		title: SETTINGS_SECTION_TITLES.SAMPLING,
+		slug: SETTINGS_SECTION_SLUGS.SAMPLING,
+		icon: Funnel,
+		settings: [
+			{
+				key: SETTINGS_KEYS.TEMPERATURE,
+				label: 'Temperature',
+				help: 'Controls the randomness of the generated text by affecting the probability distribution of the output tokens. Higher = more random, lower = more focused.',
+				defaultValue: undefined,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.SAMPLING,
+				sync: {
+					serverKey: SETTINGS_KEYS.TEMPERATURE,
+					paramType: SyncableParameterType.NUMBER
+				}
+			},
+			{
+				key: SETTINGS_KEYS.DYNATEMP_RANGE,
+				label: 'Dynamic temperature range',
+				help: 'Addon for the temperature sampler. The added value to the range of dynamic temperature, which adjusts probabilities by entropy of tokens.',
+				defaultValue: undefined,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.SAMPLING,
+				sync: {
+					serverKey: SETTINGS_KEYS.DYNATEMP_RANGE,
+					paramType: SyncableParameterType.NUMBER
+				}
+			},
+			{
+				key: SETTINGS_KEYS.DYNATEMP_EXPONENT,
+				label: 'Dynamic temperature exponent',
+				help: 'Addon for the temperature sampler. Smoothes out the probability redistribution based on the most probable token.',
+				defaultValue: undefined,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.SAMPLING,
+				sync: {
+					serverKey: SETTINGS_KEYS.DYNATEMP_EXPONENT,
+					paramType: SyncableParameterType.NUMBER
+				}
+			},
+			{
+				key: SETTINGS_KEYS.TOP_K,
+				label: 'Top K',
+				help: 'Keeps only k top tokens.',
+				defaultValue: undefined,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.SAMPLING,
+				sync: { serverKey: SETTINGS_KEYS.TOP_K, paramType: SyncableParameterType.NUMBER }
+			},
+			{
+				key: SETTINGS_KEYS.TOP_P,
+				label: 'Top P',
+				help: 'Limits tokens to those that together have a cumulative probability of at least p',
+				defaultValue: undefined,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.SAMPLING,
+				sync: { serverKey: SETTINGS_KEYS.TOP_P, paramType: SyncableParameterType.NUMBER }
+			},
+			{
+				key: SETTINGS_KEYS.MIN_P,
+				label: 'Min P',
+				help: 'Limits tokens based on the minimum probability for a token to be considered, relative to the probability of the most likely token.',
+				defaultValue: undefined,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.SAMPLING,
+				sync: { serverKey: SETTINGS_KEYS.MIN_P, paramType: SyncableParameterType.NUMBER }
+			},
+			{
+				key: SETTINGS_KEYS.XTC_PROBABILITY,
+				label: 'XTC probability',
+				help: 'XTC sampler cuts out top tokens; this parameter controls the chance of cutting tokens at all. 0 disables XTC.',
+				defaultValue: undefined,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.SAMPLING,
+				sync: {
+					serverKey: SETTINGS_KEYS.XTC_PROBABILITY,
+					paramType: SyncableParameterType.NUMBER
+				}
+			},
+			{
+				key: SETTINGS_KEYS.XTC_THRESHOLD,
+				label: 'XTC threshold',
+				help: 'XTC sampler cuts out top tokens; this parameter controls the token probability that is required to cut that token.',
+				defaultValue: undefined,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.SAMPLING,
+				sync: {
+					serverKey: SETTINGS_KEYS.XTC_THRESHOLD,
+					paramType: SyncableParameterType.NUMBER
+				}
+			},
+			{
+				key: SETTINGS_KEYS.TYP_P,
+				label: 'Typical P',
+				help: 'Sorts and limits tokens based on the difference between log-probability and entropy.',
+				defaultValue: undefined,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.SAMPLING,
+				sync: { serverKey: SETTINGS_KEYS.TYP_P, paramType: SyncableParameterType.NUMBER }
+			},
+			{
+				key: SETTINGS_KEYS.MAX_TOKENS,
+				label: 'Max tokens',
+				help: 'The maximum number of token per output. Use -1 for infinite (no limit).',
+				defaultValue: undefined,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.SAMPLING,
+				sync: {
+					serverKey: SETTINGS_KEYS.MAX_TOKENS,
+					paramType: SyncableParameterType.NUMBER
+				}
+			},
+			{
+				key: SETTINGS_KEYS.SAMPLERS,
+				label: 'Samplers',
+				help: 'The order at which samplers are applied, in simplified way. Default is "top_k;typ_p;top_p;min_p;temperature": top_k->typ_p->top_p->min_p->temperature',
+				defaultValue: '',
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.SAMPLING,
+				sync: { serverKey: SETTINGS_KEYS.SAMPLERS, paramType: SyncableParameterType.STRING }
+			},
+			{
+				key: SETTINGS_KEYS.BACKEND_SAMPLING,
+				label: 'Backend sampling',
+				help: 'Enable backend-based samplers. When enabled, supported samplers run on the accelerator backend for faster sampling.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.SAMPLING,
+				sync: {
+					serverKey: SETTINGS_KEYS.BACKEND_SAMPLING,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			}
+		]
+	},
+	[SETTINGS_SECTION_SLUGS.PENALTIES]: {
+		title: SETTINGS_SECTION_TITLES.PENALTIES,
+		slug: SETTINGS_SECTION_SLUGS.PENALTIES,
+		icon: AlertTriangle,
+		settings: [
+			{
+				key: SETTINGS_KEYS.REPEAT_LAST_N,
+				label: 'Repeat last N',
+				help: 'Last n tokens to consider for penalizing repetition',
+				defaultValue: undefined,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.PENALTIES,
+				sync: {
+					serverKey: SETTINGS_KEYS.REPEAT_LAST_N,
+					paramType: SyncableParameterType.NUMBER
+				}
+			},
+			{
+				key: SETTINGS_KEYS.REPEAT_PENALTY,
+				label: 'Repeat penalty',
+				help: 'Controls the repetition of token sequences in the generated text',
+				defaultValue: undefined,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.PENALTIES,
+				sync: {
+					serverKey: SETTINGS_KEYS.REPEAT_PENALTY,
+					paramType: SyncableParameterType.NUMBER
+				}
+			},
+			{
+				key: SETTINGS_KEYS.PRESENCE_PENALTY,
+				label: 'Presence penalty',
+				help: 'Limits tokens based on whether they appear in the output or not.',
+				defaultValue: undefined,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.PENALTIES,
+				sync: {
+					serverKey: SETTINGS_KEYS.PRESENCE_PENALTY,
+					paramType: SyncableParameterType.NUMBER
+				}
+			},
+			{
+				key: SETTINGS_KEYS.FREQUENCY_PENALTY,
+				label: 'Frequency penalty',
+				help: 'Limits tokens based on how often they appear in the output.',
+				defaultValue: undefined,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.PENALTIES,
+				sync: {
+					serverKey: SETTINGS_KEYS.FREQUENCY_PENALTY,
+					paramType: SyncableParameterType.NUMBER
+				}
+			},
+			{
+				key: SETTINGS_KEYS.DRY_MULTIPLIER,
+				label: 'DRY multiplier',
+				help: 'DRY sampling reduces repetition in generated text even across long contexts. This parameter sets the DRY sampling multiplier.',
+				defaultValue: undefined,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.PENALTIES,
+				sync: {
+					serverKey: SETTINGS_KEYS.DRY_MULTIPLIER,
+					paramType: SyncableParameterType.NUMBER
+				}
+			},
+			{
+				key: SETTINGS_KEYS.DRY_BASE,
+				label: 'DRY base',
+				help: 'DRY sampling reduces repetition in generated text even across long contexts. This parameter sets the DRY sampling base value.',
+				defaultValue: undefined,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.PENALTIES,
+				sync: { serverKey: SETTINGS_KEYS.DRY_BASE, paramType: SyncableParameterType.NUMBER }
+			},
+			{
+				key: SETTINGS_KEYS.DRY_ALLOWED_LENGTH,
+				label: 'DRY allowed length',
+				help: 'DRY sampling reduces repetition in generated text even across long contexts. This parameter sets the allowed length for DRY sampling.',
+				defaultValue: undefined,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.PENALTIES,
+				sync: {
+					serverKey: SETTINGS_KEYS.DRY_ALLOWED_LENGTH,
+					paramType: SyncableParameterType.NUMBER
+				}
+			},
+			{
+				key: SETTINGS_KEYS.DRY_PENALTY_LAST_N,
+				label: 'DRY penalty last N',
+				help: 'DRY sampling reduces repetition in generated text even across long contexts. This parameter sets DRY penalty for the last n tokens.',
+				defaultValue: undefined,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.PENALTIES,
+				sync: {
+					serverKey: SETTINGS_KEYS.DRY_PENALTY_LAST_N,
+					paramType: SyncableParameterType.NUMBER
+				}
+			}
+		]
+	},
+	[SETTINGS_SECTION_SLUGS.AGENTIC]: {
+		title: SETTINGS_SECTION_TITLES.AGENTIC,
+		slug: SETTINGS_SECTION_SLUGS.AGENTIC,
+		icon: ListRestart,
+		settings: [
+			{
+				key: SETTINGS_KEYS.AGENTIC_MAX_TURNS,
+				label: 'Agentic turns',
+				help: 'Maximum number of tool execution cycles before stopping (prevents infinite loops).',
+				defaultValue: 10,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.AGENTIC,
+				isPositiveInteger: true,
+				sync: {
+					serverKey: SETTINGS_KEYS.AGENTIC_MAX_TURNS,
+					paramType: SyncableParameterType.NUMBER
+				}
+			},
+			{
+				key: SETTINGS_KEYS.AGENTIC_MAX_TOOL_PREVIEW_LINES,
+				label: 'Max lines per tool preview',
+				help: '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.',
+				defaultValue: 25,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.AGENTIC,
+				isPositiveInteger: true,
+				sync: {
+					serverKey: SETTINGS_KEYS.AGENTIC_MAX_TOOL_PREVIEW_LINES,
+					paramType: SyncableParameterType.NUMBER
+				}
+			}
+		]
+	},
+	[SETTINGS_SECTION_SLUGS.DEVELOPER]: {
+		title: SETTINGS_SECTION_TITLES.DEVELOPER,
+		slug: SETTINGS_SECTION_SLUGS.DEVELOPER,
+		icon: Code,
+		settings: [
+			{
+				key: SETTINGS_KEYS.PRE_ENCODE_CONVERSATION,
+				label: 'Pre-fill KV cache after response',
+				help: 'After each response, re-submit the conversation to pre-fill the server KV cache. Makes the next turn faster since the prompt is already encoded while you read the response.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.DEVELOPER,
+				sync: {
+					serverKey: SETTINGS_KEYS.PRE_ENCODE_CONVERSATION,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.DISABLE_REASONING_PARSING,
+				label: 'Disable reasoning content parsing',
+				help: 'Send reasoning_format=none so the server returns thinking tokens inline instead of extracting them into a separate field.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.DEVELOPER,
+				sync: {
+					serverKey: SETTINGS_KEYS.DISABLE_REASONING_PARSING,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.EXCLUDE_REASONING_FROM_CONTEXT,
+				label: 'Exclude reasoning from context',
+				help: 'Strip thinking from previous messages before sending. When off, thinking is sent back via the reasoning_content field so the model sees its own chain-of-thought across turns.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.DEVELOPER,
+				sync: {
+					serverKey: SETTINGS_KEYS.EXCLUDE_REASONING_FROM_CONTEXT,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.SHOW_RAW_OUTPUT_SWITCH,
+				label: 'Enable raw output toggle',
+				help: 'Show toggle button to display messages as plain text instead of Markdown-formatted content',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.DEVELOPER,
+				sync: {
+					serverKey: SETTINGS_KEYS.SHOW_RAW_OUTPUT_SWITCH,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.JS_SANDBOX_ENABLED,
+				label: 'JavaScript sandbox tool',
+				help: 'Expose a run_javascript tool to the model. Code runs in a Web Worker inside a sandboxed iframe with an opaque origin, isolated from the WebUI and its API, with a hard timeout.',
+				defaultValue: false,
+				type: SettingsFieldType.CHECKBOX,
+				section: SETTINGS_SECTION_SLUGS.DEVELOPER,
+				sync: {
+					serverKey: SETTINGS_KEYS.JS_SANDBOX_ENABLED,
+					paramType: SyncableParameterType.BOOLEAN
+				}
+			},
+			{
+				key: SETTINGS_KEYS.CUSTOM_JSON,
+				label: 'Custom JSON',
+				help: 'Custom JSON parameters to send to the API. Must be valid JSON format.',
+				defaultValue: '',
+				type: SettingsFieldType.TEXTAREA,
+				section: SETTINGS_SECTION_SLUGS.DEVELOPER
+			},
+			{
+				key: SETTINGS_KEYS.CUSTOM_CSS,
+				label: 'Custom CSS',
+				help: 'CSS injected into the page at runtime. Set it here, or ship it server side via the --ui-config customCss field.',
+				defaultValue: '',
+				type: SettingsFieldType.TEXTAREA,
+				section: SETTINGS_SECTION_SLUGS.DEVELOPER,
+				sync: {
+					serverKey: SETTINGS_KEYS.CUSTOM_CSS,
+					paramType: SyncableParameterType.STRING
+				}
+			}
+		]
+	},
+	[SETTINGS_SECTION_SLUGS.MCP]: {
+		title: SETTINGS_SECTION_TITLES.MCP,
+		slug: SETTINGS_SECTION_SLUGS.MCP,
+		icon: McpLogo,
+		settings: [
+			{
+				key: SETTINGS_KEYS.MCP_REQUEST_TIMEOUT_SECONDS,
+				label: 'Request timeout (seconds)',
+				help: 'Default timeout for individual MCP tool calls. Can be overridden per server.',
+				defaultValue: DEFAULT_MCP_CONFIG.requestTimeoutSeconds,
+				type: SettingsFieldType.INPUT,
+				section: SETTINGS_SECTION_SLUGS.MCP,
+				isPositiveInteger: true,
+				sync: {
+					serverKey: SETTINGS_KEYS.MCP_REQUEST_TIMEOUT_SECONDS,
+					paramType: SyncableParameterType.NUMBER
+				}
+			}
+		]
+	}
+} as const;
+
+const NON_UI_SETTINGS: SettingsEntry[] = [
+	{
+		key: SETTINGS_KEYS.SHOW_SYSTEM_MESSAGE,
+		label: 'Show system message',
+		help: 'Display the system message at the top of each conversation.',
+		defaultValue: true,
+		type: SettingsFieldType.CHECKBOX,
+		sync: {
+			serverKey: SETTINGS_KEYS.SHOW_SYSTEM_MESSAGE,
+			paramType: SyncableParameterType.BOOLEAN
+		}
+	},
+	{
+		key: SETTINGS_KEYS.MCP_SERVERS,
+		label: 'MCP servers',
+		help: 'Configure MCP servers as a JSON list. Use the form in the MCP Client settings section to edit.',
+		defaultValue: '[]',
+		type: SettingsFieldType.INPUT,
+		sync: { serverKey: SETTINGS_KEYS.MCP_SERVERS, paramType: SyncableParameterType.STRING }
+	}
+	// {
+	// 	key: SETTINGS_KEYS.PY_INTERPRETER_ENABLED,
+	// 	label: 'Python interpreter enabled',
+	// 	help: 'Enable Python interpreter using Pyodide. Allows running Python code in markdown code blocks.',
+	// 	defaultValue: false,
+	// 	type: SettingsFieldType.CHECKBOX,
+	// 	isExperimental: true,
+	// 	sync: { serverKey: SETTINGS_KEYS.PY_INTERPRETER_ENABLED, paramType: SyncableParameterType.BOOLEAN }
+	// }
+];
+
+function getAllSettings(): SettingsEntry[] {
+	const result: SettingsEntry[] = [];
+	for (const section of Object.values(SETTINGS_REGISTRY)) {
+		result.push(...section.settings);
+	}
+	result.push(...NON_UI_SETTINGS);
+	return result;
+}
+
+/** Flat config object stored in localStorage. */
+export const SETTING_CONFIG_DEFAULT: Record<string, SettingsConfigValue> = Object.fromEntries(
+	getAllSettings().map((s) => [s.key, s.defaultValue])
+) as Record<string, SettingsConfigValue>;
+
+/** Help text for every setting (including non-UI). */
+export const SETTING_CONFIG_INFO: Record<string, string> = Object.fromEntries(
+	getAllSettings().map((s) => [s.key, s.help])
+) as Record<string, string>;
+
+/** Theme select options. */
+export const SETTINGS_COLOR_MODES_CONFIG = COLOR_MODE_OPTIONS;
+
+export type { SettingsSectionTitle } from '$lib/types';
+export type { SettingsSection } from '$lib/types';
+
+/** Sidebar sections + field configs (as consumed by UI). */
+export const SETTINGS_CHAT_SECTIONS: SettingsSection[] = [
+	...Object.values(SETTINGS_REGISTRY).map((section) => ({
+		title: section.title,
+		slug: section.slug,
+		icon: section.icon,
+		fields: section.settings.map((s) => ({
+			key: s.key,
+			label: s.label,
+			type: s.type,
+			isExperimental: s.isExperimental,
+			isPositiveInteger: s.isPositiveInteger,
+			help: s.help,
+			options: s.options
+		}))
+	})),
+	...STANDALONE_SECTIONS
+];
+
+/** INPUT-type settings whose value is a number. */
+export const NUMERIC_FIELDS = getAllSettings()
+	.filter((s) => s.type === SettingsFieldType.INPUT && typeof s.defaultValue !== 'string')
+	.map((s) => s.key) as readonly string[];
+
+/** Numeric fields clamped to ≥ 1 and rounded. */
+export const POSITIVE_INTEGER_FIELDS = getAllSettings()
+	.filter((s) => s.isPositiveInteger)
+	.map((s) => s.key) as readonly string[];
+
+/** Derived for the parameter sync service. */
+export const SYNCABLE_PARAMETERS: SyncableParameter[] = getAllSettings()
+	.filter((s) => s.sync !== undefined)
+	.map((s) => ({
+		key: s.key,
+		serverKey: s.sync!.serverKey,
+		type: s.sync!.paramType,
+		canSync: true
+	}));
+
+export const SETTINGS_FALLBACK_EXIT_ROUTE = ROUTES.START;
+
+export { SETTINGS_KEYS } from './settings-keys';
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/sse.ts b/backend/llama.cpp/tools/ui/src/lib/constants/sse.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0eb4b6edeea2f03171ab11719041d3bdd90d1587
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/sse.ts
@@ -0,0 +1,16 @@
+/**
+ * Server-sent events wire format, shared by the chat stream and the
+ * /models/sse status feed (text/event-stream).
+ */
+
+// blank line between two events
+export const SSE_RECORD_SEPARATOR = '\n\n';
+
+// line break inside an event
+export const SSE_LINE_SEPARATOR = '\n';
+
+// data field prefix, the value follows after an optional space
+export const SSE_DATA_PREFIX = 'data:';
+
+// end-of-stream marker on the chat completion stream
+export const SSE_DONE_MARKER = '[DONE]';
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/storage.ts b/backend/llama.cpp/tools/ui/src/lib/constants/storage.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4f130be942ff3704d6c3a08decf66f5255d97510
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/storage.ts
@@ -0,0 +1,52 @@
+/**
+ * Storage-related constants (localStorage, IndexedDB).
+ *
+ * Centralized to ensure consistency across the app and simplify future
+ * name changes.
+ */
+
+/** Name prefix for all localStorage keys */
+export const STORAGE_APP_NAME = 'LlamaUi';
+
+/** Deprecated localStorage key prefix (old app name) */
+export const STORAGE_APP_NAME_DEPRECATED = 'LlamaCppWebui';
+
+/** @deprecated Deprecated IndexedDB name — will be removed after all users have migrated */
+export const DB_APP_NAME_DEPRECATED = 'LlamacppWebui';
+
+export const ALWAYS_ALLOWED_TOOLS_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME}.alwaysAllowedTools`;
+export const CONFIG_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME}.config`;
+export const DISABLED_TOOLS_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME}.disabledTools`;
+
+/** Disabled tools keyed by stable selection identity, no migration from the name based key */
+export const DISABLED_TOOL_KEYS_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME}.disabledToolKeys`;
+export const FAVORITE_MODELS_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME}.favoriteModels`;
+export const REASONING_EFFORT_DEFAULT_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME}.reasoningEffortDefault`;
+export const USER_OVERRIDES_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME}.userOverrides`;
+
+/** Key prefix for per-conversation resumable stream state, conversationId is appended */
+export const STREAM_RESUME_LOCALSTORAGE_KEY_PREFIX = `${STORAGE_APP_NAME}.streamResume.`;
+
+// Deprecated old key names (kept for backward compat while users migrate)
+/** @deprecated Use {@link ALWAYS_ALLOWED_TOOLS_LOCALSTORAGE_KEY} instead */
+export const DEPRECATED_ALWAYS_ALLOWED_TOOLS_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME_DEPRECATED}.alwaysAllowedTools`;
+/** @deprecated Use {@link CONFIG_LOCALSTORAGE_KEY} instead */
+export const DEPRECATED_CONFIG_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME_DEPRECATED}.config`;
+/** @deprecated Use {@link DISABLED_TOOLS_LOCALSTORAGE_KEY} instead */
+export const DEPRECATED_DISABLED_TOOLS_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME_DEPRECATED}.disabledTools`;
+/** @deprecated Use {@link FAVORITE_MODELS_LOCALSTORAGE_KEY} instead */
+export const DEPRECATED_FAVORITE_MODELS_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME_DEPRECATED}.favoriteModels`;
+/** @deprecated Use {@link USER_OVERRIDES_LOCALSTORAGE_KEY} instead */
+export const DEPRECATED_USER_OVERRIDES_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME_DEPRECATED}.userOverrides`;
+
+/** Build version stored in localStorage for non-PWA update detection */
+export const BUILD_VERSION_LOCALSTORAGE_KEY = `${STORAGE_APP_NAME}.buildVersion`;
+
+/** Maps new keys to their deprecated fallback keys */
+export const NEW_TO_DEPRECATED_MAP: Record<string, string> = {
+	[ALWAYS_ALLOWED_TOOLS_LOCALSTORAGE_KEY]: DEPRECATED_ALWAYS_ALLOWED_TOOLS_LOCALSTORAGE_KEY,
+	[CONFIG_LOCALSTORAGE_KEY]: DEPRECATED_CONFIG_LOCALSTORAGE_KEY,
+	[DISABLED_TOOLS_LOCALSTORAGE_KEY]: DEPRECATED_DISABLED_TOOLS_LOCALSTORAGE_KEY,
+	[FAVORITE_MODELS_LOCALSTORAGE_KEY]: DEPRECATED_FAVORITE_MODELS_LOCALSTORAGE_KEY,
+	[USER_OVERRIDES_LOCALSTORAGE_KEY]: DEPRECATED_USER_OVERRIDES_LOCALSTORAGE_KEY
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/stream.ts b/backend/llama.cpp/tools/ui/src/lib/constants/stream.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67951ee95301af6b0880f702accc9a12fdd96f2a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/stream.ts
@@ -0,0 +1,3 @@
+// grace window after a visibilitychange before we kick a reader whose socket likely died
+// while the tab was hidden. covers brief background pauses without thrashing live streams
+export const STREAM_VISIBILITY_KICK_MS = 3000;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/supported-file-types.ts b/backend/llama.cpp/tools/ui/src/lib/constants/supported-file-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cbe780aa57e7e623aff9076cb83c3cf0c849f3a3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/supported-file-types.ts
@@ -0,0 +1,234 @@
+/**
+ * Comprehensive dictionary of all supported file types in llama-ui
+ * Organized by category with TypeScript enums for better type safety
+ */
+
+import {
+	FileExtensionAudio,
+	FileExtensionImage,
+	FileExtensionPdf,
+	FileExtensionText,
+	FileTypeAudio,
+	FileTypeImage,
+	FileTypePdf,
+	FileTypeText,
+	MimeTypeAudio,
+	MimeTypeVideo,
+	MimeTypeImage,
+	MimeTypeApplication,
+	MimeTypeText
+} from '$lib/enums';
+import { FileExtensionVideo, FileTypeVideo } from '$lib/enums/files.enums';
+
+// File type configuration using enums
+export const AUDIO_FILE_TYPES = {
+	[FileTypeAudio.MP3]: {
+		extensions: [FileExtensionAudio.MP3],
+		mimeTypes: [MimeTypeAudio.MP3_MPEG, MimeTypeAudio.MP3]
+	},
+	[FileTypeAudio.WAV]: {
+		extensions: [FileExtensionAudio.WAV],
+		mimeTypes: [MimeTypeAudio.WAV]
+	}
+} as const;
+
+export const VIDEO_FILE_TYPES = {
+	[FileTypeVideo.MP4]: {
+		extensions: [FileExtensionVideo.MP4],
+		mimeTypes: [MimeTypeVideo.MP4]
+	},
+	[FileTypeVideo.OGG]: {
+		extensions: [FileExtensionVideo.OGG],
+		mimeTypes: [MimeTypeVideo.OGG]
+	}
+} as const;
+
+export const IMAGE_FILE_TYPES = {
+	[FileTypeImage.JPEG]: {
+		extensions: [FileExtensionImage.JPG, FileExtensionImage.JPEG],
+		mimeTypes: [MimeTypeImage.JPEG]
+	},
+	[FileTypeImage.PNG]: {
+		extensions: [FileExtensionImage.PNG],
+		mimeTypes: [MimeTypeImage.PNG]
+	},
+	[FileTypeImage.GIF]: {
+		extensions: [FileExtensionImage.GIF],
+		mimeTypes: [MimeTypeImage.GIF]
+	},
+	[FileTypeImage.WEBP]: {
+		extensions: [FileExtensionImage.WEBP],
+		mimeTypes: [MimeTypeImage.WEBP]
+	},
+	[FileTypeImage.SVG]: {
+		extensions: [FileExtensionImage.SVG],
+		mimeTypes: [MimeTypeImage.SVG]
+	},
+	[FileTypeImage.HEIC]: {
+		extensions: [FileExtensionImage.HEIC, FileExtensionImage.HEIF],
+		mimeTypes: [MimeTypeImage.HEIC, MimeTypeImage.HEIF]
+	}
+} as const;
+
+export const PDF_FILE_TYPES = {
+	[FileTypePdf.PDF]: {
+		extensions: [FileExtensionPdf.PDF],
+		mimeTypes: [MimeTypeApplication.PDF]
+	}
+} as const;
+
+export const TEXT_FILE_TYPES = {
+	[FileTypeText.PLAIN_TEXT]: {
+		extensions: [FileExtensionText.TXT],
+		mimeTypes: [MimeTypeText.PLAIN]
+	},
+	[FileTypeText.MARKDOWN]: {
+		extensions: [FileExtensionText.MD],
+		mimeTypes: [MimeTypeText.MARKDOWN]
+	},
+	[FileTypeText.ASCIIDOC]: {
+		extensions: [FileExtensionText.ADOC],
+		mimeTypes: [MimeTypeText.ASCIIDOC]
+	},
+	[FileTypeText.JAVASCRIPT]: {
+		extensions: [FileExtensionText.JS],
+		mimeTypes: [MimeTypeText.JAVASCRIPT, MimeTypeText.JAVASCRIPT_APP]
+	},
+	[FileTypeText.TYPESCRIPT]: {
+		extensions: [FileExtensionText.TS],
+		mimeTypes: [MimeTypeText.TYPESCRIPT]
+	},
+	[FileTypeText.JSX]: {
+		extensions: [FileExtensionText.JSX],
+		mimeTypes: [MimeTypeText.JSX]
+	},
+	[FileTypeText.TSX]: {
+		extensions: [FileExtensionText.TSX],
+		mimeTypes: [MimeTypeText.TSX]
+	},
+	[FileTypeText.CSS]: {
+		extensions: [FileExtensionText.CSS],
+		mimeTypes: [MimeTypeText.CSS]
+	},
+	[FileTypeText.HTML]: {
+		extensions: [FileExtensionText.HTML, FileExtensionText.HTM],
+		mimeTypes: [MimeTypeText.HTML]
+	},
+	[FileTypeText.JSON]: {
+		extensions: [FileExtensionText.JSON],
+		mimeTypes: [MimeTypeText.JSON]
+	},
+	[FileTypeText.XML]: {
+		extensions: [FileExtensionText.XML],
+		mimeTypes: [MimeTypeText.XML_TEXT, MimeTypeText.XML_APP]
+	},
+	[FileTypeText.YAML]: {
+		extensions: [FileExtensionText.YAML, FileExtensionText.YML],
+		mimeTypes: [MimeTypeText.YAML_TEXT, MimeTypeText.YAML_APP]
+	},
+	[FileTypeText.CSV]: {
+		extensions: [FileExtensionText.CSV],
+		mimeTypes: [MimeTypeText.CSV]
+	},
+	[FileTypeText.LOG]: {
+		extensions: [FileExtensionText.LOG],
+		mimeTypes: [MimeTypeText.PLAIN]
+	},
+	[FileTypeText.PYTHON]: {
+		extensions: [FileExtensionText.PY],
+		mimeTypes: [MimeTypeText.PYTHON]
+	},
+	[FileTypeText.JAVA]: {
+		extensions: [FileExtensionText.JAVA],
+		mimeTypes: [MimeTypeText.JAVA]
+	},
+	[FileTypeText.CPP]: {
+		extensions: [
+			FileExtensionText.CPP,
+			FileExtensionText.C,
+			FileExtensionText.H,
+			FileExtensionText.HPP
+		],
+		mimeTypes: [MimeTypeText.CPP_SRC, MimeTypeText.CPP_HDR, MimeTypeText.C_SRC, MimeTypeText.C_HDR]
+	},
+	[FileTypeText.PHP]: {
+		extensions: [FileExtensionText.PHP],
+		mimeTypes: [MimeTypeText.PHP]
+	},
+	[FileTypeText.RUBY]: {
+		extensions: [FileExtensionText.RB],
+		mimeTypes: [MimeTypeText.RUBY]
+	},
+	[FileTypeText.GO]: {
+		extensions: [FileExtensionText.GO],
+		mimeTypes: [MimeTypeText.GO]
+	},
+	[FileTypeText.RUST]: {
+		extensions: [FileExtensionText.RS],
+		mimeTypes: [MimeTypeText.RUST]
+	},
+	[FileTypeText.SHELL]: {
+		extensions: [FileExtensionText.SH, FileExtensionText.BAT],
+		mimeTypes: [MimeTypeText.SHELL, MimeTypeText.BAT]
+	},
+	[FileTypeText.SQL]: {
+		extensions: [FileExtensionText.SQL],
+		mimeTypes: [MimeTypeText.SQL]
+	},
+	[FileTypeText.R]: {
+		extensions: [FileExtensionText.R],
+		mimeTypes: [MimeTypeText.R]
+	},
+	[FileTypeText.SCALA]: {
+		extensions: [FileExtensionText.SCALA],
+		mimeTypes: [MimeTypeText.SCALA]
+	},
+	[FileTypeText.KOTLIN]: {
+		extensions: [FileExtensionText.KT],
+		mimeTypes: [MimeTypeText.KOTLIN]
+	},
+	[FileTypeText.SWIFT]: {
+		extensions: [FileExtensionText.SWIFT],
+		mimeTypes: [MimeTypeText.SWIFT]
+	},
+	[FileTypeText.DART]: {
+		extensions: [FileExtensionText.DART],
+		mimeTypes: [MimeTypeText.DART]
+	},
+	[FileTypeText.VUE]: {
+		extensions: [FileExtensionText.VUE],
+		mimeTypes: [MimeTypeText.VUE]
+	},
+	[FileTypeText.SVELTE]: {
+		extensions: [FileExtensionText.SVELTE],
+		mimeTypes: [MimeTypeText.SVELTE]
+	},
+	[FileTypeText.LATEX]: {
+		extensions: [FileExtensionText.TEX],
+		mimeTypes: [MimeTypeText.LATEX, MimeTypeText.TEX, MimeTypeText.TEX_APP]
+	},
+	[FileTypeText.BIBTEX]: {
+		extensions: [FileExtensionText.BIB],
+		mimeTypes: [MimeTypeText.BIBTEX]
+	},
+	[FileTypeText.CUDA]: {
+		extensions: [FileExtensionText.CU, FileExtensionText.CUH],
+		mimeTypes: [MimeTypeText.CUDA]
+	},
+	[FileTypeText.VULKAN]: {
+		extensions: [FileExtensionText.COMP],
+		mimeTypes: [MimeTypeText.PLAIN]
+	},
+	[FileTypeText.HASKELL]: {
+		extensions: [FileExtensionText.HS],
+		mimeTypes: [MimeTypeText.HASKELL]
+	},
+	[FileTypeText.CSHARP]: {
+		extensions: [FileExtensionText.CS],
+		mimeTypes: [MimeTypeText.CSHARP]
+	},
+	[FileTypeText.PROPERTIES]: {
+		extensions: [FileExtensionText.PROPERTIES],
+		mimeTypes: [MimeTypeText.PROPERTIES]
+	}
+} as const;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/svg-blocks.ts b/backend/llama.cpp/tools/ui/src/lib/constants/svg-blocks.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ccca9376c68f52bade2e22825322b40c47c63535
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/svg-blocks.ts
@@ -0,0 +1,49 @@
+export const SVG_WRAPPER_CLASS = 'svg-block-wrapper';
+export const SVG_SCROLL_CONTAINER_CLASS = 'svg-scroll-container';
+export const SVG_BLOCK_CLASS = 'svg-block';
+
+export const SVG_LANGUAGE = 'svg';
+export const XML_LANGUAGE = 'xml';
+export const SVG_TAG_PREFIX = '<svg';
+
+export const SVG_SOURCE_ATTR = 'data-svg-source';
+export const SVG_ID_ATTR = 'data-svg-id';
+export const SVG_RENDERED_ATTR = 'data-svg-rendered';
+
+/**
+ * Hard size ceiling for a single inline svg block.
+ * Above this the source is left as raw text instead of being rendered.
+ */
+export const SVG_MAX_BYTES = 256 * 1024;
+
+/**
+ * DOMPurify config for untrusted svg coming from model output.
+ *
+ * foreignObject and script stay forbidden unconditionally, they are the only
+ * inline svg vectors that execute arbitrary html or js. Everything else is
+ * allowed for maximum rendering compatibility: href and xlink:href stay so
+ * use, image, a and animateMotion work, and DOMPurify still neutralizes
+ * javascript: and data: uri schemes natively. External resource refs are
+ * allowed by design on a local first tool, the user browser fetches them.
+ *
+ * The sanitized svg is always mounted inside a shadow root (see svg-shadow),
+ * so an author <style> stays scoped to that root and can not reach the page.
+ */
+export const SVG_SANITIZE_CONFIG = {
+	USE_PROFILES: { svg: true, svgFilters: true },
+	FORBID_TAGS: ['foreignObject', 'script']
+};
+
+/**
+ * Shadow root style for an inline svg block. Mirrors the centered, padded
+ * sizing the light dom used before the svg moved behind a shadow boundary.
+ */
+export const SVG_INLINE_SHADOW_STYLE =
+	':host{display:block;width:100%;text-align:center}svg{display:block;margin:0 auto;width:auto;height:auto;max-width:100%;max-height:70vh;min-height:8rem;padding:3rem 1rem}';
+
+/**
+ * Shadow root style for the zoom dialog svg. Lets the svg grow past its
+ * intrinsic size so pan and zoom have room to work.
+ */
+export const SVG_DIALOG_SHADOW_STYLE =
+	':host{display:inline-block}svg{min-height:min(50vh,12rem);min-width:min(80vw,20rem);max-width:none;max-height:none;height:auto;width:auto;display:block}';
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/table-html-restorer.ts b/backend/llama.cpp/tools/ui/src/lib/constants/table-html-restorer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e5d5b120114206fef3fef0ac8f5b2dbd9d1b772d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/table-html-restorer.ts
@@ -0,0 +1,20 @@
+/**
+ * Matches <br>, <br/>, <br /> tags (case-insensitive).
+ * Used to detect line breaks in table cell text content.
+ */
+export const BR_PATTERN = /<br\s*\/?\s*>/gi;
+
+/**
+ * Matches a complete <ul>...</ul> block.
+ * Captures the inner content (group 1) for further <li> extraction.
+ * Case-insensitive, allows multiline content.
+ */
+export const LIST_PATTERN = /^<ul>([\s\S]*)<\/ul>$/i;
+
+/**
+ * Matches individual <li>...</li> elements within a list.
+ * Captures the inner content (group 1) of each list item.
+ * Non-greedy to handle multiple consecutive items.
+ * Case-insensitive, allows multiline content.
+ */
+export const LI_PATTERN = /<li>([\s\S]*?)<\/li>/gi;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/title-generation.ts b/backend/llama.cpp/tools/ui/src/lib/constants/title-generation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..48ca2217a27d5f35a918c4c4c2e815abe27e2db1
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/title-generation.ts
@@ -0,0 +1,9 @@
+/* Title generation constants */
+export const TITLE_GENERATION = {
+	MIN_LENGTH: 3,
+	FALLBACK: 'New Chat',
+	DEFAULT_PROMPT:
+		'Based on the following interaction, generate a short, concise title (maximum 6-8 words) that captures the main topic. Return ONLY the title text, nothing else. Do not use quotes.\n\nUser: {{USER}}\n\nAssistant: {{ASSISTANT}}\n\nTitle:',
+	PREFIX_PATTERN: /^(Title:|Subject:|Topic:)\s*/i,
+	QUOTE_PATTERN: /^["]|["]$/g
+} as const;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/tools.ts b/backend/llama.cpp/tools/ui/src/lib/constants/tools.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4d9385f9f5ca12d0bf8726dc13f4915e552ae599
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/tools.ts
@@ -0,0 +1,13 @@
+import { ToolSource } from '$lib/enums/tools.enums';
+
+export const TOOL_GROUP_LABELS = {
+	[ToolSource.BUILTIN]: 'Built-in',
+	[ToolSource.CUSTOM]: 'JSON Schema',
+	[ToolSource.FRONTEND]: 'Browser'
+} as const;
+
+export const TOOL_SERVER_LABELS = {
+	[ToolSource.BUILTIN]: 'Built-in Tools',
+	[ToolSource.CUSTOM]: 'Custom Tools',
+	[ToolSource.FRONTEND]: 'Browser Tools'
+} as const;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/tooltip-config.ts b/backend/llama.cpp/tools/ui/src/lib/constants/tooltip-config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ad76ab35226615e8586535bdb3aabc64af860c21
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/tooltip-config.ts
@@ -0,0 +1 @@
+export const TOOLTIP_DELAY_DURATION = 500;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/ui.ts b/backend/llama.cpp/tools/ui/src/lib/constants/ui.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f2d3e95e01c648ef5dfaf5e42293b19f2a3c05df
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/ui.ts
@@ -0,0 +1,37 @@
+import { Search, Settings, SquarePen } from '@lucide/svelte';
+import McpLogo from '$lib/components/app/mcp/McpLogo.svelte';
+import type { Component } from 'svelte';
+import { ROUTES } from './routes';
+
+export const FORK_TREE_DEPTH_PADDING = 8;
+export const SYSTEM_MESSAGE_PLACEHOLDER = 'System message';
+
+export const ICON_STRIP_TRANSITION_DURATION = 150;
+export const ICON_STRIP_TRANSITION_DELAY_MULTIPLIER = 50;
+
+export interface DesktopIconStripItem {
+	icon: Component;
+	tooltip: string;
+	route?: string;
+	activeRouteId?: string;
+	activeRoutePrefix?: string;
+	activeUrlIncludes?: string;
+	keys?: string[];
+}
+
+export const SIDEBAR_ACTIONS_ITEMS: DesktopIconStripItem[] = [
+	{ icon: SquarePen, tooltip: 'New chat', route: ROUTES.NEW_CHAT, keys: ['shift', 'cmd', 'o'] },
+	{ icon: Search, tooltip: 'Search', keys: ['cmd', 'k'] },
+	{
+		icon: McpLogo,
+		tooltip: 'MCP Servers',
+		route: ROUTES.MCP_SERVERS,
+		activeRouteId: '/mcp-servers'
+	},
+	{
+		icon: Settings,
+		tooltip: 'Settings',
+		route: `${ROUTES.SETTINGS}/general`,
+		activeUrlIncludes: '#/settings'
+	}
+];
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/uri-template.ts b/backend/llama.cpp/tools/ui/src/lib/constants/uri-template.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b44d6ed375615b5af4525a369d803ced91f6740
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/uri-template.ts
@@ -0,0 +1,60 @@
+/**
+ * URI Template constants for RFC 6570 template processing.
+ */
+
+/** URI scheme separator */
+export const URI_SCHEME_SEPARATOR = '://';
+
+/** Regex to match template expressions like {var}, {+var}, {#var}, {/var} */
+export const TEMPLATE_EXPRESSION_REGEX = /\{([+#./;?&]?)([^}]+)\}/g;
+
+/** RFC 6570 URI template operators */
+export const URI_TEMPLATE_OPERATORS = {
+	/** Simple string expansion (default) */
+	SIMPLE: '',
+	/** Reserved expansion */
+	RESERVED: '+',
+	/** Fragment expansion */
+	FRAGMENT: '#',
+	/** Path segment expansion */
+	PATH_SEGMENT: '/',
+	/** Label expansion */
+	LABEL: '.',
+	/** Path-style parameters */
+	PATH_PARAM: ';',
+	/** Form-style query */
+	FORM_QUERY: '?',
+	/** Form-style query continuation */
+	FORM_CONTINUATION: '&'
+} as const;
+
+/** URI template separators used in expansion */
+export const URI_TEMPLATE_SEPARATORS = {
+	/** Comma separator for list expansion */
+	COMMA: ',',
+	/** Slash separator for path segments */
+	SLASH: '/',
+	/** Period separator for label expansion */
+	PERIOD: '.',
+	/** Semicolon separator for path parameters */
+	SEMICOLON: ';',
+	/** Question mark prefix for query string */
+	QUERY_PREFIX: '?',
+	/** Ampersand prefix for query continuation */
+	QUERY_CONTINUATION: '&'
+} as const;
+
+/** Maximum number of leading slashes to strip during URI normalization */
+export const MAX_LEADING_SLASHES_TO_STRIP = 3;
+
+/** Regex to strip explode modifier (*) from variable names */
+export const VARIABLE_EXPLODE_MODIFIER_REGEX = /[*]$/;
+
+/** Regex to strip prefix modifier (:N) from variable names */
+export const VARIABLE_PREFIX_MODIFIER_REGEX = /:[\d]+$/;
+
+/** Regex to strip one or more leading slashes */
+export const LEADING_SLASHES_REGEX = /^\/+/;
+
+/** Regex to match base64-encoded image URIs (format: "data:image/[media type];base64,[data]")*/
+export const BASE64_IMAGE_URI_REGEX = /^data:(image\/[a-z0-9.\-+]+);base64/;
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/url.ts b/backend/llama.cpp/tools/ui/src/lib/constants/url.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0afb9deccb8a3adb4862ae3fbc70d6670a792dec
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/url.ts
@@ -0,0 +1,186 @@
+const STD = ['com', 'net', 'org', 'gov', 'edu'] as const;
+
+const STD_MIL = [...STD, 'mil'] as const;
+
+const ccTLD_PREFIXES: Record<string, readonly string[]> = {
+	// --- Standard 5 only ---
+	ar: STD,
+	bd: STD,
+	bg: STD,
+	cn: STD_MIL,
+	eg: STD,
+	gr: STD,
+	hk: STD,
+	hr: STD,
+	lk: STD,
+	mx: STD_MIL,
+	my: STD_MIL,
+	ng: STD,
+	ph: STD,
+	pk: STD,
+	pl: STD,
+	ro: STD,
+	ru: STD,
+	sa: STD,
+	si: STD,
+	tr: STD,
+	tw: STD,
+	ua: STD,
+	ve: STD,
+
+	au: [...STD_MIL, 'id', 'asn', 'csiro'],
+	br: [
+		...STD_MIL,
+		'art',
+		'eco',
+		'eng',
+		'inf',
+		'med',
+		'psi',
+		'tmp',
+		'etc',
+		'adm',
+		'adv',
+		'arq',
+		'bio',
+		'bmd',
+		'cim',
+		'cng',
+		'cnt',
+		'coop',
+		'ecn',
+		'esp',
+		'far',
+		'fm',
+		'fnd',
+		'fot',
+		'fst',
+		'g12',
+		'ggf',
+		'imb',
+		'ind',
+		'jor',
+		'jus',
+		'leg',
+		'lel',
+		'mat',
+		'mp',
+		'mus',
+		'not',
+		'ntr',
+		'odo',
+		'ppg',
+		'pro',
+		'psc',
+		'qsl',
+		'rec',
+		'slg',
+		'srv',
+		'trd',
+		'tur',
+		'tv',
+		'vet',
+		'vlog',
+		'wiki',
+		'zlg'
+	],
+	id: [...STD_MIL, 'co', 'go', 'or', 'web', 'sch'],
+	in: [...STD_MIL, 'co', 'gen', 'ind', 'firm', 'ernet', 'nic'],
+	kr: [...STD_MIL, 'co', 'go', 'or', 'ac', 're'],
+	nz: [
+		...STD_MIL,
+		'co',
+		'gen',
+		'geek',
+		'kiwi',
+		'maori',
+		'school',
+		'govt',
+		'health',
+		'iwi',
+		'parliament'
+	],
+	sg: [...STD, 'per'],
+	th: ['co', 'go', 'or', 'in', 'ac', 'mi', 'net'],
+
+	ae: ['co', 'net', 'org', 'gov', 'ac', 'sch'],
+	hu: ['co', 'net', 'org', 'gov', 'edu'],
+	il: ['co', 'net', 'org', 'gov', 'ac', 'muni'],
+	jp: ['ac', 'ad', 'co', 'ed', 'go', 'gr', 'lg', 'ne', 'or'],
+	ke: ['co', 'or', 'ne', 'go', 'ac', 'sc'],
+	rs: ['co', 'net', 'org', 'gov', 'edu'],
+	uk: ['co', 'org', 'net', 'ac', 'gov', 'mil', 'nhs', 'police', 'mod', 'ltd', 'plc', 'me', 'sch'],
+	za: ['co', 'org', 'net', 'web', 'law', 'mil']
+};
+
+const WILDCARD_BASES: Record<string, readonly string[]> = {
+	br: ['nom', 'blog'],
+	jp: [
+		'kobe',
+		'kyoto',
+		'nagoya',
+		'osaka',
+		'sapporo',
+		'sendai',
+		'tokyo',
+		'yokohama',
+		'aichi',
+		'akita',
+		'aomori',
+		'chiba',
+		'ehime',
+		'fukui',
+		'fukuoka',
+		'fukushima',
+		'gifu',
+		'gunma',
+		'hiroshima',
+		'hokkaido',
+		'hyogo',
+		'ibaraki',
+		'ishikawa',
+		'iwate',
+		'kagawa',
+		'kagoshima',
+		'kanagawa',
+		'kochi',
+		'kumamoto',
+		'mie',
+		'miyagi',
+		'miyazaki',
+		'nagano',
+		'nara',
+		'niigata',
+		'oita',
+		'okayama',
+		'okinawa',
+		'saga',
+		'saitama',
+		'shiga',
+		'shimane',
+		'shizuoka',
+		'tochigi',
+		'tokushima',
+		'tottori',
+		'toyama',
+		'wakayama',
+		'yamagata',
+		'yamaguchi',
+		'yamanashi'
+	]
+};
+
+function buildSuffixSet(suffixes: Record<string, readonly string[]>): Set<string> {
+	const set = new Set<string>();
+
+	for (const [tld, parts] of Object.entries(suffixes)) {
+		for (const part of parts) {
+			set.add(`${part}.${tld}`);
+		}
+	}
+
+	return set;
+}
+
+export const TWO_PART_PUBLIC_SUFFIXES = buildSuffixSet(ccTLD_PREFIXES);
+export const WILDCARD_PUBLIC_SUFFIXES = buildSuffixSet(WILDCARD_BASES);
diff --git a/backend/llama.cpp/tools/ui/src/lib/constants/viewport.ts b/backend/llama.cpp/tools/ui/src/lib/constants/viewport.ts
new file mode 100644
index 0000000000000000000000000000000000000000..26e202cfea80c425a13daf986f8ed538488e05d4
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/constants/viewport.ts
@@ -0,0 +1 @@
+export const DEFAULT_MOBILE_BREAKPOINT = 768;
diff --git a/backend/llama.cpp/tools/ui/src/lib/contexts/chat-actions.context.ts b/backend/llama.cpp/tools/ui/src/lib/contexts/chat-actions.context.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e9050fa27fb3ddd236ffa5815279cd13e1cbc156
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/contexts/chat-actions.context.ts
@@ -0,0 +1,39 @@
+import { getContext, setContext } from 'svelte';
+import { CONTEXT_KEY_CHAT_ACTIONS } from '$lib/constants';
+
+export interface ChatActionsContext {
+	copy: (message: DatabaseMessage) => void;
+	delete: (message: DatabaseMessage) => void;
+	navigateToSibling: (siblingId: string) => void;
+	editWithBranching: (
+		message: DatabaseMessage,
+		newContent: string,
+		newExtras?: DatabaseMessageExtra[]
+	) => void;
+	editWithReplacement: (
+		message: DatabaseMessage,
+		newContent: string,
+		shouldBranch: boolean
+	) => void;
+	editUserMessagePreserveResponses: (
+		message: DatabaseMessage,
+		newContent: string,
+		newExtras?: DatabaseMessageExtra[]
+	) => void;
+	regenerateWithBranching: (message: DatabaseMessage, modelOverride?: string) => void;
+	continueAssistantMessage: (message: DatabaseMessage) => void;
+	forkConversation: (
+		message: DatabaseMessage,
+		options: { name: string; includeAttachments: boolean }
+	) => void;
+}
+
+const CHAT_ACTIONS_KEY = Symbol.for(CONTEXT_KEY_CHAT_ACTIONS);
+
+export function setChatActionsContext(ctx: ChatActionsContext): ChatActionsContext {
+	return setContext(CHAT_ACTIONS_KEY, ctx);
+}
+
+export function getChatActionsContext(): ChatActionsContext {
+	return getContext(CHAT_ACTIONS_KEY);
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/contexts/chat-settings-config.context.ts b/backend/llama.cpp/tools/ui/src/lib/contexts/chat-settings-config.context.ts
new file mode 100644
index 0000000000000000000000000000000000000000..35941e09bd5cd82773993c4e023c87cac6a4f764
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/contexts/chat-settings-config.context.ts
@@ -0,0 +1,20 @@
+import { getContext, setContext } from 'svelte';
+import { CONTEXT_KEY_CHAT_SETTINGS_CONFIG } from '$lib/constants';
+
+export interface ChatSettingsConfigContext {
+	readonly localConfig: SettingsConfigType;
+	handleConfigChange: (key: string, value: string | boolean) => void;
+	handleThemeChange: (theme: string) => void;
+}
+
+const CHAT_SETTINGS_CONFIG_KEY = Symbol.for(CONTEXT_KEY_CHAT_SETTINGS_CONFIG);
+
+export function setChatSettingsConfigContext(
+	ctx: ChatSettingsConfigContext
+): ChatSettingsConfigContext {
+	return setContext(CHAT_SETTINGS_CONFIG_KEY, ctx);
+}
+
+export function getChatSettingsConfigContext(): ChatSettingsConfigContext {
+	return getContext(CHAT_SETTINGS_CONFIG_KEY);
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/contexts/index.ts b/backend/llama.cpp/tools/ui/src/lib/contexts/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c6719fa9e47728f87b076764b9697f3b0e9267c3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/contexts/index.ts
@@ -0,0 +1,19 @@
+export {
+	getMessageEditContext,
+	setMessageEditContext,
+	type MessageEditContext,
+	type MessageEditState,
+	type MessageEditActions
+} from './message-edit.context';
+
+export {
+	getChatActionsContext,
+	setChatActionsContext,
+	type ChatActionsContext
+} from './chat-actions.context';
+
+export {
+	getChatSettingsConfigContext,
+	setChatSettingsConfigContext,
+	type ChatSettingsConfigContext
+} from './chat-settings-config.context';
diff --git a/backend/llama.cpp/tools/ui/src/lib/contexts/message-edit.context.ts b/backend/llama.cpp/tools/ui/src/lib/contexts/message-edit.context.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b6231f940e9b1fe3a925fd8ba8833460f83cc441
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/contexts/message-edit.context.ts
@@ -0,0 +1,51 @@
+import { getContext, setContext } from 'svelte';
+import { CONTEXT_KEY_MESSAGE_EDIT } from '$lib/constants';
+import { MessageRole } from '$lib/enums';
+
+export interface MessageEditState {
+	readonly isEditing: boolean;
+	readonly editedContent: string;
+	readonly editedExtras: DatabaseMessageExtra[];
+	readonly editedUploadedFiles: ChatUploadedFile[];
+	readonly originalContent: string;
+	readonly originalExtras: DatabaseMessageExtra[];
+	readonly showSaveOnlyOption: boolean;
+	readonly showBranchAfterEditOption: boolean;
+	readonly shouldBranchAfterEdit: boolean;
+	readonly messageRole: MessageRole;
+	readonly rawEditContent?: string;
+}
+
+export interface MessageEditActions {
+	setContent: (content: string) => void;
+	setExtras: (extras: DatabaseMessageExtra[]) => void;
+	setUploadedFiles: (files: ChatUploadedFile[]) => void;
+	save: () => void;
+	saveOnly: () => void;
+	cancel: () => void;
+	startEdit: () => void;
+}
+
+export interface AssistantEditActions {
+	setShouldBranchAfterEdit: (value: boolean) => void;
+}
+
+export type MessageEditContext = MessageEditState &
+	MessageEditActions &
+	Partial<AssistantEditActions>;
+
+const MESSAGE_EDIT_KEY = Symbol.for(CONTEXT_KEY_MESSAGE_EDIT);
+
+/**
+ * Sets the message edit context. Call this in the parent component (ChatMessage.svelte).
+ */
+export function setMessageEditContext(ctx: MessageEditContext): MessageEditContext {
+	return setContext(MESSAGE_EDIT_KEY, ctx);
+}
+
+/**
+ * Gets the message edit context. Call this in child components.
+ */
+export function getMessageEditContext(): MessageEditContext {
+	return getContext(MESSAGE_EDIT_KEY);
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/enums/agentic.enums.ts b/backend/llama.cpp/tools/ui/src/lib/enums/agentic.enums.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9ad7b4f1a87c19a021f963a4195440917c21a3ac
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/enums/agentic.enums.ts
@@ -0,0 +1,27 @@
+/**
+ * OpenAI-compatible tool call type.
+ */
+export enum ToolCallType {
+	FUNCTION = 'function'
+}
+
+/**
+ * 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'
+}
+
+/**
+ * How a Continue click on an assistant message resumes generation.
+ */
+export enum ContinueIntentKind {
+	APPEND_TEXT = 'append_text',
+	RERUN_TURN = 'rerun_turn',
+	NEXT_TURN = 'next_turn'
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/enums/attachment.enums.ts b/backend/llama.cpp/tools/ui/src/lib/enums/attachment.enums.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1c3258cb19da8c918e993256e9aa42c3b0028aa0
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/enums/attachment.enums.ts
@@ -0,0 +1,56 @@
+/**
+ * Attachment type enum for database message extras
+ */
+export enum AttachmentType {
+	AUDIO = 'AUDIO',
+	IMAGE = 'IMAGE',
+	VIDEO = 'VIDEO',
+	MCP_PROMPT = 'MCP_PROMPT',
+	MCP_RESOURCE = 'MCP_RESOURCE',
+	PDF = 'PDF',
+	TEXT = 'TEXT',
+	LEGACY_CONTEXT = 'context' // Legacy attachment type for backward compatibility
+}
+
+/**
+ * Unique identifiers for attachment menu items in the chat form action dropdowns.
+ * Used to select which file upload or attachment action is triggered.
+ */
+export enum AttachmentMenuItemId {
+	IMAGES = 'images',
+	AUDIO = 'audio',
+	VIDEO = 'video',
+	TEXT = 'text',
+	PDF = 'pdf',
+	SYSTEM_MESSAGE = 'system-message',
+	MCP_PROMPT = 'mcp-prompt',
+	MCP_RESOURCES = 'mcp-resources'
+}
+
+/**
+ * Defines when an attachment menu item should be enabled.
+ */
+export enum AttachmentItemEnabledWhen {
+	ALWAYS = 'always',
+	HAS_VISION_MODALITY = 'hasVisionModality',
+	HAS_AUDIO_MODALITY = 'hasAudioModality',
+	HAS_VIDEO_MODALITY = 'hasVideoModality'
+}
+
+/**
+ * Defines the callback action triggered when an attachment menu item is clicked.
+ */
+export enum AttachmentAction {
+	FILE_UPLOAD = 'onFileUpload',
+	SYSTEM_PROMPT_CLICK = 'onSystemPromptClick',
+	MCP_PROMPT_CLICK = 'onMcpPromptClick',
+	MCP_RESOURCES_CLICK = 'onMcpResourcesClick'
+}
+
+/**
+ * Visibility conditions for attachment menu items.
+ */
+export enum AttachmentItemVisibleWhen {
+	HAS_MCP_PROMPTS_SUPPORT = 'hasMcpPromptsSupport',
+	HAS_MCP_RESOURCES_SUPPORT = 'hasMcpResourcesSupport'
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/enums/chat.enums.ts b/backend/llama.cpp/tools/ui/src/lib/enums/chat.enums.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f4994bb8e94dc91edbcb98a6f3009901b62d75c4
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/enums/chat.enums.ts
@@ -0,0 +1,80 @@
+export enum ChatMessageStatsView {
+	GENERATION = 'generation',
+	READING = 'reading',
+	TOOLS = 'tools',
+	SUMMARY = 'summary'
+}
+
+export enum ChatMessageStatisticsMode {
+	SWITCHABLE = 'switchable',
+	READING = 'reading',
+	GENERATION = 'generation'
+}
+
+/**
+ * Connection state of a streamed completion, drives the resume status indicator.
+ */
+export enum StreamConnectionState {
+	STREAMING = 'streaming',
+	RESUMING = 'resuming',
+	LOST = 'lost'
+}
+
+/**
+ * Reasoning format options for API requests.
+ */
+export enum ReasoningFormat {
+	NONE = 'none',
+	AUTO = 'auto'
+}
+
+/**
+ * Message roles for chat messages.
+ */
+export enum MessageRole {
+	USER = 'user',
+	ASSISTANT = 'assistant',
+	SYSTEM = 'system',
+	TOOL = 'tool'
+}
+
+/**
+ * Message types for different content kinds.
+ */
+export enum MessageType {
+	ROOT = 'root',
+	TEXT = 'text',
+	THINK = 'think',
+	SYSTEM = 'system'
+}
+
+/**
+ * Content part types for API chat message content.
+ */
+export enum ContentPartType {
+	TEXT = 'text',
+	IMAGE_URL = 'image_url',
+	INPUT_AUDIO = 'input_audio',
+	INPUT_VIDEO = 'input_video'
+}
+
+/**
+ * Error dialog types for displaying server/timeout errors.
+ */
+export enum ErrorDialogType {
+	TIMEOUT = 'timeout',
+	SERVER = 'server'
+}
+
+export enum ConversationSelectionMode {
+	EXPORT = 'export',
+	IMPORT = 'import'
+}
+
+/**
+ * PDF view mode options for previewing PDF attachments.
+ */
+export enum PdfViewMode {
+	TEXT = 'text',
+	PAGES = 'pages'
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/enums/files.enums.ts b/backend/llama.cpp/tools/ui/src/lib/enums/files.enums.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a908b899657e947e514118ba840711be091a41c2
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/enums/files.enums.ts
@@ -0,0 +1,266 @@
+/**
+ * Comprehensive dictionary of all supported file types in llama-ui
+ * Organized by category with TypeScript enums for better type safety
+ */
+
+// File type category enum
+export enum FileTypeCategory {
+	IMAGE = 'image',
+	AUDIO = 'audio',
+	VIDEO = 'video',
+	PDF = 'pdf',
+	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',
+	PNG = 'png',
+	GIF = 'gif',
+	WEBP = 'webp',
+	SVG = 'svg',
+	HEIC = 'heic',
+	HEIF = 'heif'
+}
+
+export enum FileTypeAudio {
+	MP3 = 'mp3',
+	WAV = 'wav',
+	WEBM = 'webm'
+}
+
+export enum FileTypeVideo {
+	MP4 = 'mp4',
+	OGG = 'ogg'
+}
+
+export enum FileTypePdf {
+	PDF = 'pdf'
+}
+
+export enum FileTypeText {
+	PLAIN_TEXT = 'plainText',
+	MARKDOWN = 'md',
+	ASCIIDOC = 'asciidoc',
+	JAVASCRIPT = 'js',
+	TYPESCRIPT = 'ts',
+	JSX = 'jsx',
+	TSX = 'tsx',
+	CSS = 'css',
+	HTML = 'html',
+	JSON = 'json',
+	XML = 'xml',
+	YAML = 'yaml',
+	CSV = 'csv',
+	LOG = 'log',
+	PYTHON = 'python',
+	JAVA = 'java',
+	CPP = 'cpp',
+	PHP = 'php',
+	RUBY = 'ruby',
+	GO = 'go',
+	RUST = 'rust',
+	SHELL = 'shell',
+	SQL = 'sql',
+	R = 'r',
+	SCALA = 'scala',
+	KOTLIN = 'kotlin',
+	SWIFT = 'swift',
+	DART = 'dart',
+	VUE = 'vue',
+	SVELTE = 'svelte',
+	LATEX = 'latex',
+	BIBTEX = 'bibtex',
+	CUDA = 'cuda',
+	VULKAN = 'vulkan',
+	HASKELL = 'haskell',
+	CSHARP = 'csharp',
+	PROPERTIES = 'properties'
+}
+
+// File extension enums
+export enum FileExtensionImage {
+	JPG = '.jpg',
+	JPEG = '.jpeg',
+	PNG = '.png',
+	GIF = '.gif',
+	WEBP = '.webp',
+	SVG = '.svg',
+	HEIC = '.heic',
+	HEIF = '.heif'
+}
+
+export enum FileExtensionAudio {
+	MP3 = '.mp3',
+	WAV = '.wav'
+}
+
+export enum FileExtensionVideo {
+	MP4 = '.mp4',
+	OGG = '.ogg'
+}
+
+export enum FileExtensionPdf {
+	PDF = '.pdf'
+}
+
+export enum FileExtensionText {
+	TXT = '.txt',
+	MD = '.md',
+	ADOC = '.adoc',
+	JS = '.js',
+	TS = '.ts',
+	JSX = '.jsx',
+	TSX = '.tsx',
+	CSS = '.css',
+	HTML = '.html',
+	HTM = '.htm',
+	JSON = '.json',
+	JSONL = '.jsonl',
+	ZIP = '.zip',
+	XML = '.xml',
+	YAML = '.yaml',
+	YML = '.yml',
+	CSV = '.csv',
+	LOG = '.log',
+	PY = '.py',
+	JAVA = '.java',
+	CPP = '.cpp',
+	C = '.c',
+	H = '.h',
+	PHP = '.php',
+	RB = '.rb',
+	GO = '.go',
+	RS = '.rs',
+	SH = '.sh',
+	BAT = '.bat',
+	SQL = '.sql',
+	R = '.r',
+	SCALA = '.scala',
+	KT = '.kt',
+	SWIFT = '.swift',
+	DART = '.dart',
+	VUE = '.vue',
+	SVELTE = '.svelte',
+	TEX = '.tex',
+	BIB = '.bib',
+	CU = '.cu',
+	CUH = '.cuh',
+	COMP = '.comp',
+	HPP = '.hpp',
+	HS = '.hs',
+	PROPERTIES = '.properties',
+	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',
+	OCTET_STREAM = 'application/octet-stream',
+	ZIP = 'application/zip'
+}
+
+export enum MimeTypeAudio {
+	MP3_MPEG = 'audio/mpeg',
+	MP3 = 'audio/mp3',
+	MP4 = 'audio/mp4',
+	WAV = 'audio/wav',
+	WAVE = 'audio/wave',
+	X_WAV = 'audio/x-wav',
+	X_WAVE = 'audio/x-wave',
+	VND_WAVE = 'audio/vnd.wave',
+	X_PN_WAV = 'audio/x-pn-wav',
+	WEBM = 'audio/webm',
+	WEBM_OPUS = 'audio/webm;codecs=opus'
+}
+
+export enum MimeTypeVideo {
+	MP4 = 'video/mp4',
+	OGG = 'video/ogg'
+}
+
+export enum MimeTypeImage {
+	JPEG = 'image/jpeg',
+	JPG = 'image/jpg',
+	PNG = 'image/png',
+	GIF = 'image/gif',
+	WEBP = 'image/webp',
+	SVG = 'image/svg+xml',
+	ICO = 'image/x-icon',
+	ICO_MICROSOFT = 'image/vnd.microsoft.icon',
+	HEIC = 'image/heic',
+	HEIF = 'image/heif'
+}
+
+export enum MimeTypeText {
+	PLAIN = 'text/plain',
+	MARKDOWN = 'text/markdown',
+	ASCIIDOC = 'text/asciidoc',
+	JAVASCRIPT = 'text/javascript',
+	JAVASCRIPT_APP = 'application/javascript',
+	TYPESCRIPT = 'text/typescript',
+	JSX = 'text/jsx',
+	TSX = 'text/tsx',
+	CSS = 'text/css',
+	HTML = 'text/html',
+	JSON = 'application/json',
+	JSONL = 'application/jsonl',
+	XML_TEXT = 'text/xml',
+	XML_APP = 'application/xml',
+	YAML_TEXT = 'text/yaml',
+	YAML_APP = 'application/yaml',
+	CSV = 'text/csv',
+	PYTHON = 'text/x-python',
+	JAVA = 'text/x-java-source',
+	CPP_HDR = 'text/x-c++hdr',
+	CPP_SRC = 'text/x-c++src',
+	CSHARP = 'text/x-csharp',
+	HASKELL = 'text/x-haskell',
+	C_SRC = 'text/x-csrc',
+	C_HDR = 'text/x-chdr',
+	PHP = 'text/x-php',
+	RUBY = 'text/x-ruby',
+	GO = 'text/x-go',
+	RUST = 'text/x-rust',
+	SHELL = 'text/x-shellscript',
+	BAT = 'application/x-bat',
+	SQL = 'text/x-sql',
+	R = 'text/x-r',
+	SCALA = 'text/x-scala',
+	KOTLIN = 'text/x-kotlin',
+	SWIFT = 'text/x-swift',
+	DART = 'text/x-dart',
+	VUE = 'text/x-vue',
+	SVELTE = 'text/x-svelte',
+	TEX = 'text/x-tex',
+	TEX_APP = 'application/x-tex',
+	LATEX = 'application/x-latex',
+	BIBTEX = 'text/x-bibtex',
+	CUDA = 'text/x-cuda',
+	PROPERTIES = 'text/properties'
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/enums/index.ts b/backend/llama.cpp/tools/ui/src/lib/enums/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..847014e78c24338853a243e5e4dc80b2d28dfef8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/enums/index.ts
@@ -0,0 +1,69 @@
+export {
+	AttachmentType,
+	AttachmentMenuItemId,
+	AttachmentItemEnabledWhen,
+	AttachmentAction,
+	AttachmentItemVisibleWhen
+} from './attachment.enums';
+
+export { AgenticSectionType, ContinueIntentKind, ToolCallType } from './agentic.enums';
+
+export {
+	ChatMessageStatsView,
+	ChatMessageStatisticsMode,
+	StreamConnectionState,
+	ContentPartType,
+	ConversationSelectionMode,
+	ErrorDialogType,
+	MessageRole,
+	MessageType,
+	PdfViewMode,
+	ReasoningFormat
+} from './chat.enums';
+
+export { ReasoningEffort } from './reasoning-effort.enums';
+
+export {
+	FileTypeCategory,
+	FileTypeImage,
+	FileTypeAudio,
+	FileTypePdf,
+	FileTypeText,
+	FileExtensionImage,
+	FileExtensionAudio,
+	FileExtensionPdf,
+	FileExtensionText,
+	MimeTypePrefix,
+	MimeTypeIncludes,
+	UriPattern,
+	MimeTypeApplication,
+	MimeTypeAudio,
+	MimeTypeVideo,
+	MimeTypeImage,
+	MimeTypeText,
+	SpecialFileType
+} from './files.enums';
+
+export {
+	MCPConnectionPhase,
+	MCPLogLevel,
+	MCPTransportType,
+	HealthCheckStatus,
+	MCPContentType,
+	MCPRefType,
+	JsonSchemaType
+} from './mcp.enums';
+
+export { ModelModality } from './model.enums';
+
+export { ServerRole, ServerModelStatus, ServerModelsSseEventType } from './server.enums';
+
+export { ParameterSource, SyncableParameterType, SettingsFieldType } from './settings.enums';
+
+export { ColorMode, HtmlInputType, McpPromptVariant, TooltipSide, UrlProtocol } from './ui.enums';
+
+export { KeyboardKey } from './keyboard.enums';
+
+export { ToolSource, ToolPermissionDecision, ToolResponseField } from './tools.enums';
+
+export { SplashOrientation } from './splash.enums';
diff --git a/backend/llama.cpp/tools/ui/src/lib/enums/keyboard.enums.ts b/backend/llama.cpp/tools/ui/src/lib/enums/keyboard.enums.ts
new file mode 100644
index 0000000000000000000000000000000000000000..735d3e4b4684af5c4424b6f42333363ca3c68680
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/enums/keyboard.enums.ts
@@ -0,0 +1,20 @@
+/**
+ * Keyboard key names for event handling
+ */
+export enum KeyboardKey {
+	ENTER = 'Enter',
+	ESCAPE = 'Escape',
+	ARROW_UP = 'ArrowUp',
+	ARROW_DOWN = 'ArrowDown',
+	ARROW_LEFT = 'ArrowLeft',
+	ARROW_RIGHT = 'ArrowRight',
+	TAB = 'Tab',
+	B_LOWER = 'b',
+	D_LOWER = 'd',
+	D_UPPER = 'D',
+	E_UPPER = 'E',
+	K_LOWER = 'k',
+	O_LOWER = 'o',
+	O_UPPER = 'O',
+	SPACE = ' '
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/enums/mcp.enums.ts b/backend/llama.cpp/tools/ui/src/lib/enums/mcp.enums.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3d9a2070dc541b43e95aa67f0a31cfb67f481e4a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/enums/mcp.enums.ts
@@ -0,0 +1,68 @@
+/**
+ * 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'
+}
+
+/**
+ * JSON Schema types used in MCP tool definitions
+ */
+export enum JsonSchemaType {
+	OBJECT = 'object',
+	STRING = 'string',
+	NUMBER = 'number'
+}
+
+/**
+ * Reference types for MCP completions
+ */
+export enum MCPRefType {
+	PROMPT = 'ref/prompt',
+	RESOURCE = 'ref/resource'
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/enums/model.enums.ts b/backend/llama.cpp/tools/ui/src/lib/enums/model.enums.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7aa469947e2b0d405619f374bdbca70f1bdca2da
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/enums/model.enums.ts
@@ -0,0 +1,6 @@
+export enum ModelModality {
+	TEXT = 'TEXT',
+	AUDIO = 'AUDIO',
+	VISION = 'VISION',
+	VIDEO = 'VIDEO'
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/enums/reasoning-effort.enums.ts b/backend/llama.cpp/tools/ui/src/lib/enums/reasoning-effort.enums.ts
new file mode 100644
index 0000000000000000000000000000000000000000..172f118e7f79d878fbf1c443604f2debde4b8238
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/enums/reasoning-effort.enums.ts
@@ -0,0 +1,11 @@
+/**
+ * Reasoning effort levels for thinking models.
+ * These values are sent to the server and mapped to token budgets.
+ */
+export enum ReasoningEffort {
+	OFF = 'off',
+	LOW = 'low',
+	MEDIUM = 'medium',
+	HIGH = 'high',
+	MAX = 'max'
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/enums/server.enums.ts b/backend/llama.cpp/tools/ui/src/lib/enums/server.enums.ts
new file mode 100644
index 0000000000000000000000000000000000000000..446af84be7089e620004bf9b7b52e44f4cbfe3a0
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/enums/server.enums.ts
@@ -0,0 +1,35 @@
+/**
+ * Server role enum - used for single/multi-model mode
+ */
+export enum ServerRole {
+	/** Single model mode - server running with a specific model loaded */
+	MODEL = 'model',
+	/** Router mode - server managing multiple model instances */
+	ROUTER = 'router'
+}
+
+/**
+ * Model status enum - matches tools/server/server-models.h from C++ server
+ * Used as the `value` field in the status object from /models endpoint
+ */
+export enum ServerModelStatus {
+	UNLOADED = 'unloaded',
+	LOADING = 'loading',
+	LOADED = 'loaded',
+	SLEEPING = 'sleeping',
+	FAILED = 'failed'
+}
+
+/**
+ * /models/sse event type enum - discriminates the records broadcast on the
+ * model status feed in ROUTER mode. Matches the event names emitted by
+ * tools/server/server-models.cpp from the C++ server.
+ */
+export enum ServerModelsSseEventType {
+	STATUS_CHANGE = 'status_change',
+	MODEL_STATUS = 'model_status',
+	STATUS_UPDATE = 'status_update',
+	MODELS_RELOAD = 'models_reload',
+	MODEL_REMOVE = 'model_remove',
+	DOWNLOAD_PROGRESS = 'download_progress'
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/enums/settings.enums.ts b/backend/llama.cpp/tools/ui/src/lib/enums/settings.enums.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f17f219762014bf9b24c3627e3f65991ef8eb339
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/enums/settings.enums.ts
@@ -0,0 +1,26 @@
+/**
+ * Parameter source - indicates whether a parameter uses default or custom value
+ */
+export enum ParameterSource {
+	DEFAULT = 'default',
+	CUSTOM = 'custom'
+}
+
+/**
+ * Syncable parameter type - data types for parameters that can be synced with server
+ */
+export enum SyncableParameterType {
+	NUMBER = 'number',
+	STRING = 'string',
+	BOOLEAN = 'boolean'
+}
+
+/**
+ * Settings field type - defines the input type for settings fields
+ */
+export enum SettingsFieldType {
+	INPUT = 'input',
+	TEXTAREA = 'textarea',
+	CHECKBOX = 'checkbox',
+	SELECT = 'select'
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/enums/splash.enums.ts b/backend/llama.cpp/tools/ui/src/lib/enums/splash.enums.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7efa89299fea4f2e5e764c626054d1052d520ede
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/enums/splash.enums.ts
@@ -0,0 +1,7 @@
+/**
+ * Splash screen orientation for iOS apple-touch-startup-image
+ */
+export enum SplashOrientation {
+	PORTRAIT = 'portrait',
+	LANDSCAPE = 'landscape'
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/enums/tools.enums.ts b/backend/llama.cpp/tools/ui/src/lib/enums/tools.enums.ts
new file mode 100644
index 0000000000000000000000000000000000000000..120c1d471d64b01f916331499597d32948cc41f6
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/enums/tools.enums.ts
@@ -0,0 +1,18 @@
+export enum ToolSource {
+	BUILTIN = 'builtin',
+	MCP = 'mcp',
+	CUSTOM = 'custom',
+	FRONTEND = 'frontend'
+}
+
+export enum ToolPermissionDecision {
+	ALWAYS = 'always',
+	ALWAYS_SERVER = 'always_server',
+	ONCE = 'once',
+	DENY = 'deny'
+}
+
+export enum ToolResponseField {
+	PLAIN_TEXT = 'plain_text_response',
+	ERROR = 'error'
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/enums/ui.enums.ts b/backend/llama.cpp/tools/ui/src/lib/enums/ui.enums.ts
new file mode 100644
index 0000000000000000000000000000000000000000..82996379428e429edba0bc777eea0ffcd7c8f5ac
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/enums/ui.enums.ts
@@ -0,0 +1,35 @@
+export enum ColorMode {
+	LIGHT = 'light',
+	DARK = 'dark',
+	SYSTEM = 'system'
+}
+
+export enum TooltipSide {
+	TOP = 'top',
+	RIGHT = 'right',
+	BOTTOM = 'bottom',
+	LEFT = 'left'
+}
+
+/**
+ * MCP prompt display variant
+ */
+export enum McpPromptVariant {
+	MESSAGE = 'message',
+	ATTACHMENT = 'attachment'
+}
+
+/**
+ * URL prefixes for protocol detection
+ */
+export enum UrlProtocol {
+	DATA = 'data:',
+	HTTP = 'http:',
+	HTTPS = 'https:',
+	WEBSOCKET = 'ws:',
+	WEBSOCKET_SECURE = 'wss:'
+}
+
+export enum HtmlInputType {
+	FILE = 'file'
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/hooks/use-attachment-menu.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/hooks/use-attachment-menu.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0940ce7b6b1880c23ae8eda09f460b637365eb0e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/hooks/use-attachment-menu.svelte.ts
@@ -0,0 +1,82 @@
+import { page } from '$app/state';
+import { AttachmentAction } from '$lib/enums';
+
+export interface AttachmentModalityFlags {
+	hasVisionModality: boolean;
+	hasAudioModality: boolean;
+	hasVideoModality: boolean;
+	hasMcpPromptsSupport: boolean;
+	hasMcpResourcesSupport: boolean;
+}
+
+export interface AttachmentActionCallbacks {
+	onFileUpload?: () => void;
+	onSystemPromptClick?: () => void;
+	onMcpPromptClick?: () => void;
+	onMcpResourcesClick?: () => void;
+}
+
+export interface UseAttachmentMenuReturn {
+	readonly callbacks: Record<string, () => void>;
+	isItemEnabled(enabledWhen: string | undefined): boolean;
+	isItemVisible(visibleWhen: string | undefined): boolean;
+	getSystemMessageTooltip(): string;
+}
+
+/**
+ * useAttachmentMenu - Shared logic for attachment menu components.
+ *
+ * Encapsulates the modality-flag checks and callback wrapping that is
+ * identical across the desktop dropdown (`ChatFormActionAddDropdown`)
+ * and the mobile sheet (`ChatFormActionAddSheet`).
+ *
+ * @param getFlags   - Getter returning the current modality capability flags.
+ * @param getCallbacks - Getter returning the raw action callbacks from props.
+ * @param close      - Function that dismisses the hosting UI element (dropdown / sheet).
+ */
+export function useAttachmentMenu(
+	getFlags: () => AttachmentModalityFlags,
+	getCallbacks: () => AttachmentActionCallbacks,
+	close: () => void
+): UseAttachmentMenuReturn {
+	const modalityFlags = $derived(getFlags());
+
+	const callbacks = $derived.by(() => {
+		const cbs = getCallbacks();
+		const wrap = (fn?: () => void) => () => {
+			close();
+			fn?.();
+		};
+		return {
+			[AttachmentAction.FILE_UPLOAD]: wrap(cbs.onFileUpload),
+			[AttachmentAction.SYSTEM_PROMPT_CLICK]: wrap(cbs.onSystemPromptClick),
+			[AttachmentAction.MCP_PROMPT_CLICK]: wrap(cbs.onMcpPromptClick),
+			[AttachmentAction.MCP_RESOURCES_CLICK]: wrap(cbs.onMcpResourcesClick)
+		};
+	});
+
+	function isItemEnabled(enabledWhen: string | undefined): boolean {
+		if (!enabledWhen || enabledWhen === 'always') return true;
+		return !!modalityFlags[enabledWhen as keyof AttachmentModalityFlags];
+	}
+
+	function isItemVisible(visibleWhen: string | undefined): boolean {
+		if (!visibleWhen) return true;
+		return !!modalityFlags[visibleWhen as keyof AttachmentModalityFlags];
+	}
+
+	function getSystemMessageTooltip(): string {
+		return !page.params.id
+			? 'Add custom system message for a new conversation'
+			: 'Inject custom system message at the beginning of the conversation';
+	}
+
+	return {
+		get callbacks() {
+			return callbacks;
+		},
+		isItemEnabled,
+		isItemVisible,
+		getSystemMessageTooltip
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/hooks/use-auto-scroll.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/hooks/use-auto-scroll.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8107f08d088eaf85ae538c68d59fb3fff0d674bc
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/hooks/use-auto-scroll.svelte.ts
@@ -0,0 +1,217 @@
+import { AUTO_SCROLL_AT_BOTTOM_THRESHOLD, AUTO_SCROLL_INTERVAL } from '$lib/constants';
+
+export interface AutoScrollOptions {
+	disabled?: boolean;
+}
+
+/**
+ * Creates an auto-scroll controller for a scrollable container.
+ *
+ * Features:
+ * - Auto-scrolls to bottom during streaming/loading
+ * - Stops auto-scroll when user manually scrolls up
+ * - Resumes auto-scroll when user scrolls back to bottom
+ */
+export class AutoScrollController {
+	private _autoScrollEnabled = $state(true);
+	private _userScrolledUp = $state(false);
+	private _lastScrollTop = $state(0);
+	private _scrollInterval: ReturnType<typeof setInterval> | undefined;
+	private _container: HTMLElement | undefined;
+	private _disabled: boolean;
+	private _mutationObserver: MutationObserver | null = null;
+	private _rafPending = false;
+	private _observerEnabled = false;
+	constructor(options: AutoScrollOptions = {}) {
+		this._disabled = options.disabled ?? false;
+	}
+
+	get autoScrollEnabled(): boolean {
+		return this._autoScrollEnabled;
+	}
+
+	get userScrolledUp(): boolean {
+		return this._userScrolledUp;
+	}
+
+	/**
+	 * Binds the controller to a scrollable container element.
+	 */
+	setContainer(container: HTMLElement | undefined): void {
+		this._doStopObserving();
+		this._container = container;
+
+		if (this._observerEnabled && container && !this._disabled) {
+			this._doStartObserving();
+		}
+	}
+
+	/**
+	 * Updates the disabled state.
+	 */
+	setDisabled(disabled: boolean): void {
+		if (this._disabled === disabled) return;
+		this._disabled = disabled;
+		if (disabled) {
+			this._autoScrollEnabled = false;
+			this.stopInterval();
+			this._doStopObserving();
+		} else if (this._observerEnabled && this._container && !this._mutationObserver) {
+			this._doStartObserving();
+		}
+	}
+
+	/**
+	 * Handles scroll events to detect user scroll direction and toggle auto-scroll.
+	 */
+	handleScroll(): void {
+		if (this._disabled || !this._container) return;
+
+		const { scrollTop, scrollHeight, clientHeight } = this._container;
+		const distanceFromBottom = scrollHeight - clientHeight - scrollTop;
+		const isScrollingUp = scrollTop < this._lastScrollTop;
+		const isAtBottom = distanceFromBottom < AUTO_SCROLL_AT_BOTTOM_THRESHOLD;
+
+		if (isScrollingUp && !isAtBottom) {
+			this._userScrolledUp = true;
+			this._autoScrollEnabled = false;
+		} else if (isAtBottom && this._userScrolledUp) {
+			this._userScrolledUp = false;
+			this._autoScrollEnabled = true;
+		}
+
+		this._lastScrollTop = scrollTop;
+	}
+
+	/**
+	 * Scrolls the container to the bottom.
+	 */
+	scrollToBottom(behavior: ScrollBehavior = 'smooth'): void {
+		if (this._disabled || !this._container) return;
+		this._container.scrollTo({ top: this._container.scrollHeight, behavior });
+	}
+
+	/**
+	 * Enables auto-scroll (e.g., when user sends a message).
+	 */
+	enable(): void {
+		if (this._disabled) return;
+		this._userScrolledUp = false;
+		this._autoScrollEnabled = true;
+	}
+
+	/**
+	 * Resets scroll state when switching conversations.
+	 */
+	resetScrollState(): void {
+		this._userScrolledUp = false;
+		this._autoScrollEnabled = !this._disabled;
+		if (this._container) {
+			this._lastScrollTop = this._container.scrollTop;
+		}
+	}
+
+	/**
+	 * Starts the auto-scroll interval for continuous scrolling during streaming.
+	 */
+	startInterval(): void {
+		if (this._disabled || this._scrollInterval) return;
+
+		this._scrollInterval = setInterval(() => {
+			this.scrollToBottom();
+		}, AUTO_SCROLL_INTERVAL);
+	}
+
+	/**
+	 * Stops the auto-scroll interval.
+	 */
+	stopInterval(): void {
+		if (this._scrollInterval) {
+			clearInterval(this._scrollInterval);
+			this._scrollInterval = undefined;
+		}
+	}
+
+	/**
+	 * Updates the auto-scroll interval based on streaming state.
+	 * Call this in a $effect to automatically manage the interval.
+	 */
+	updateInterval(isStreaming: boolean): void {
+		if (this._disabled) {
+			this.stopInterval();
+			return;
+		}
+
+		if (isStreaming && this._autoScrollEnabled) {
+			if (!this._scrollInterval) {
+				this.startInterval();
+			}
+		} else {
+			this.stopInterval();
+		}
+	}
+
+	/**
+	 * Cleans up resources. Call this in onDestroy or when the component unmounts.
+	 */
+	destroy(): void {
+		this.stopInterval();
+		this._doStopObserving();
+	}
+
+	/**
+	 * Starts a MutationObserver on the container that auto-scrolls to bottom
+	 * on content changes. More responsive than interval-based polling.
+	 */
+	startObserving(): void {
+		this._observerEnabled = true;
+
+		if (this._container && !this._disabled && !this._mutationObserver) {
+			this._doStartObserving();
+		}
+	}
+
+	/**
+	 * Stops the MutationObserver.
+	 */
+	stopObserving(): void {
+		this._observerEnabled = false;
+		this._doStopObserving();
+	}
+
+	private _doStartObserving(): void {
+		if (!this._container || this._mutationObserver) return;
+
+		this._mutationObserver = new MutationObserver(() => {
+			if (!this._autoScrollEnabled || this._rafPending) return;
+			this._rafPending = true;
+			requestAnimationFrame(() => {
+				this._rafPending = false;
+				if (this._autoScrollEnabled && this._container) {
+					this._container.scrollTop = this._container.scrollHeight;
+				}
+			});
+		});
+
+		this._mutationObserver.observe(this._container, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+	}
+
+	private _doStopObserving(): void {
+		if (this._mutationObserver) {
+			this._mutationObserver.disconnect();
+			this._mutationObserver = null;
+		}
+		this._rafPending = false;
+	}
+}
+
+/**
+ * Creates a new AutoScrollController instance.
+ */
+export function createAutoScrollController(options: AutoScrollOptions = {}): AutoScrollController {
+	return new AutoScrollController(options);
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/hooks/use-chat-screen-active-model.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/hooks/use-chat-screen-active-model.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..de75e9fefcaea4c1e79856949e24573bdbb11910
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/hooks/use-chat-screen-active-model.svelte.ts
@@ -0,0 +1,100 @@
+/**
+ * Active model resolution and capability detection for the ChatScreen.
+ *
+ * Picks the model that should be used for the current view
+ * (router: user-selected or conversation fallback; non-router: first
+ * available option), and reactively tracks which modalities (vision /
+ * audio / video) it supports — fetching model props from the server on
+ * demand if they aren't cached yet.
+ */
+
+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 } from '$lib/stores/conversations.svelte';
+
+export function useChatScreenActiveModel() {
+	const isRouter = $derived(isRouterMode());
+	const conversationModel = $derived(
+		chatStore.getConversationModel(activeMessages() as DatabaseMessage[])
+	);
+
+	const activeModelId = $derived.by(() => {
+		const options = modelOptions();
+
+		if (!isRouter) {
+			return options.length > 0 ? options[0].model : null;
+		}
+
+		const selectedId = selectedModelId();
+		if (selectedId) {
+			const model = options.find((m) => m.id === selectedId);
+			if (model) return model.model;
+		}
+
+		if (conversationModel) {
+			const model = options.find((m) => m.model === conversationModel);
+			if (model) return model.model;
+		}
+
+		return null;
+	});
+
+	let modelPropsVersion = $state(0);
+
+	$effect(() => {
+		if (activeModelId) {
+			const cached = modelsStore.getModelProps(activeModelId);
+			if (!cached) {
+				modelsStore.fetchModelProps(activeModelId).then(() => {
+					modelPropsVersion++;
+				});
+			}
+		}
+	});
+
+	const hasAudioModality = $derived.by(() => {
+		if (activeModelId) {
+			void modelPropsVersion;
+			return modelsStore.modelSupportsAudio(activeModelId);
+		}
+		return false;
+	});
+
+	const hasVideoModality = $derived.by(() => {
+		if (activeModelId) {
+			void modelPropsVersion;
+			return modelsStore.modelSupportsVideo(activeModelId);
+		}
+		return false;
+	});
+
+	const hasVisionModality = $derived.by(() => {
+		if (activeModelId) {
+			void modelPropsVersion;
+			return modelsStore.modelSupportsVision(activeModelId);
+		}
+		return false;
+	});
+
+	return {
+		get isRouter() {
+			return isRouter;
+		},
+		get conversationModel() {
+			return conversationModel;
+		},
+		get activeModelId() {
+			return activeModelId;
+		},
+		get hasAudioModality() {
+			return hasAudioModality;
+		},
+		get hasVideoModality() {
+			return hasVideoModality;
+		},
+		get hasVisionModality() {
+			return hasVisionModality;
+		}
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/hooks/use-chat-screen-drag-and-drop.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/hooks/use-chat-screen-drag-and-drop.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3f292b4e1d955fffe7186fd56eb42991ff6c62fa
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/hooks/use-chat-screen-drag-and-drop.svelte.ts
@@ -0,0 +1,72 @@
+/**
+ * Drag-and-drop state machine for the ChatScreen.
+ *
+ * Tracks pointer enter/leave nesting so the overlay stays visible while the
+ * cursor traverses child elements, then routes the dropped files either to
+ * the active message-edit handler (if a message is being edited) or to the
+ * caller's onDrop callback.
+ */
+
+import { getAddFilesHandler, isEditing } from '$lib/stores/chat.svelte';
+
+interface UseChatScreenDragAndDropOptions {
+	/** Called when the user drops files and no message is being edited. */
+	onDrop: (files: File[]) => void;
+}
+
+export function useChatScreenDragAndDrop(options: UseChatScreenDragAndDropOptions) {
+	let dragCounter = $state(0);
+	let isDragOver = $state(false);
+
+	function handleDragEnter(event: DragEvent) {
+		event.preventDefault();
+		dragCounter++;
+		if (event.dataTransfer?.types.includes('Files')) {
+			isDragOver = true;
+		}
+	}
+
+	function handleDragLeave(event: DragEvent) {
+		event.preventDefault();
+		dragCounter--;
+		if (dragCounter === 0) {
+			isDragOver = false;
+		}
+	}
+
+	function handleDragOver(event: DragEvent) {
+		event.preventDefault();
+	}
+
+	async function handleDrop(event: DragEvent) {
+		event.preventDefault();
+		isDragOver = false;
+		dragCounter = 0;
+
+		if (!event.dataTransfer?.files) return;
+
+		const files = Array.from(event.dataTransfer.files);
+
+		if (isEditing()) {
+			const handler = getAddFilesHandler();
+			if (handler) {
+				handler(files);
+				return;
+			}
+		}
+
+		options.onDrop(files);
+	}
+
+	return {
+		get isDragOver() {
+			return isDragOver;
+		},
+		dragHandlers: {
+			dragenter: handleDragEnter,
+			dragleave: handleDragLeave,
+			dragover: handleDragOver,
+			drop: handleDrop
+		}
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/hooks/use-chat-screen-file-upload.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/hooks/use-chat-screen-file-upload.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f1ab9472184e99892925061fd2488d39bcff8aa7
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/hooks/use-chat-screen-file-upload.svelte.ts
@@ -0,0 +1,104 @@
+/**
+ * File upload lifecycle for the ChatScreen form.
+ *
+ * Owns the queue of processed `ChatUploadedFile`, the rejection-by-capability
+ * dialog state, and the dual-layer validation pipeline (general format +
+ * model modality). The caller provides the active model's capabilities and ID
+ * as reactive getters so validation tracks the model in real time.
+ */
+
+import { processFilesToChatUploaded } from '$lib/utils/browser-only';
+import { isFileTypeSupported, filterFilesByModalities } from '$lib/utils';
+
+interface UseChatScreenFileUploadOptions {
+	capabilities: () => { hasVision: boolean; hasAudio: boolean; hasVideo: boolean };
+	activeModelId: () => string | null | undefined;
+}
+
+export interface FileErrorData {
+	generallyUnsupported: File[];
+	modalityUnsupported: File[];
+	modalityReasons: Record<string, string>;
+	supportedTypes: string[];
+}
+
+export function useChatScreenFileUpload(options: UseChatScreenFileUploadOptions) {
+	let uploadedFiles = $state<ChatUploadedFile[]>([]);
+	let showFileErrorDialog = $state(false);
+	let fileErrorData = $state<FileErrorData>({
+		generallyUnsupported: [],
+		modalityUnsupported: [],
+		modalityReasons: {},
+		supportedTypes: []
+	});
+
+	async function processFiles(files: File[]) {
+		const generallySupported: File[] = [];
+		const generallyUnsupported: File[] = [];
+
+		for (const file of files) {
+			if (isFileTypeSupported(file.name, file.type)) {
+				generallySupported.push(file);
+			} else {
+				generallyUnsupported.push(file);
+			}
+		}
+
+		const { supportedFiles, unsupportedFiles, modalityReasons } = filterFilesByModalities(
+			generallySupported,
+			options.capabilities()
+		);
+
+		const allUnsupportedFiles = [...generallyUnsupported, ...unsupportedFiles];
+
+		if (allUnsupportedFiles.length > 0) {
+			const supportedTypes: string[] = ['text files', 'PDFs'];
+			const caps = options.capabilities();
+			if (caps.hasVision) supportedTypes.push('images');
+			if (caps.hasAudio) supportedTypes.push('audio files');
+			if (caps.hasVideo) supportedTypes.push('video files');
+
+			fileErrorData = {
+				generallyUnsupported,
+				modalityUnsupported: unsupportedFiles,
+				modalityReasons,
+				supportedTypes
+			};
+			showFileErrorDialog = true;
+		}
+
+		if (supportedFiles.length > 0) {
+			const processed = await processFilesToChatUploaded(
+				supportedFiles,
+				options.activeModelId() ?? undefined
+			);
+			uploadedFiles = [...uploadedFiles, ...processed];
+		}
+	}
+
+	function handleFileUpload(files: File[]) {
+		return processFiles(files);
+	}
+
+	function handleFileRemove(fileId: string) {
+		uploadedFiles = uploadedFiles.filter((f) => f.id !== fileId);
+	}
+
+	return {
+		get uploadedFiles() {
+			return uploadedFiles;
+		},
+		set uploadedFiles(value) {
+			uploadedFiles = value;
+		},
+		get showFileErrorDialog() {
+			return showFileErrorDialog;
+		},
+		set showFileErrorDialog(value) {
+			showFileErrorDialog = value;
+		},
+		fileErrorData,
+		handleFileUpload,
+		handleFileRemove
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/hooks/use-chat-screen-scroll.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/hooks/use-chat-screen-scroll.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cecf208bdec6f4088451f0470be2d03b5720a0a0
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/hooks/use-chat-screen-scroll.svelte.ts
@@ -0,0 +1,47 @@
+/**
+ * Scroll container binding and navigation guard for the ChatScreen.
+ *
+ * Binds the `AutoScrollController` to `document.documentElement`, exposes
+ * the container for programmatic scrolling, and flags an `isNavigating`
+ * window during route changes so the controller can reset without its
+ * scroll handler seeing spurious events from layout shifts.
+ */
+
+import { afterNavigate, beforeNavigate } from '$app/navigation';
+import type { AutoScrollController } from './use-auto-scroll.svelte';
+
+export function useChatScreenScroll(autoScroll: AutoScrollController) {
+	let chatScrollContainer: HTMLElement | undefined = $state();
+	let isNavigating = $state(false);
+
+	function handleScroll(event: UIEvent) {
+		// Ignore scroll events caused by navigation layout changes or by our own
+		// programmatic scrolls so they don't accidentally disable auto-scroll.
+		if (isNavigating || !event.isTrusted) return;
+		autoScroll.handleScroll();
+	}
+
+	beforeNavigate(() => {
+		isNavigating = true;
+		autoScroll.resetScrollState();
+	});
+
+	afterNavigate(() => {
+		setTimeout(() => {
+			isNavigating = false;
+			autoScroll.resetScrollState();
+		}, 10);
+	});
+
+	$effect(() => {
+		chatScrollContainer = document.documentElement;
+		autoScroll.setContainer(chatScrollContainer);
+	});
+
+	return {
+		get chatScrollContainer() {
+			return chatScrollContainer;
+		},
+		handleScroll
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/hooks/use-context-gauge.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/hooks/use-context-gauge.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e11e2f7ab1a58a96c405dc22c2951c9dcaa130bb
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/hooks/use-context-gauge.svelte.ts
@@ -0,0 +1,295 @@
+/**
+ * Reactive state for the context usage gauge: resolves the active model,
+ * fetches its cached props, parses live server stats, and exposes per-turn
+ * read / fresh / cache / output and cumulative token counts.
+ */
+
+import {
+	modelsStore,
+	modelOptions,
+	selectedModelId,
+	singleModelName
+} from '$lib/stores/models.svelte';
+import { chatStore } from '$lib/stores/chat.svelte';
+import { activeMessages } from '$lib/stores/conversations.svelte';
+import { isRouterMode } from '$lib/stores/server.svelte';
+import { MessageRole } from '$lib/enums';
+import { STATS_UNITS } from '$lib/constants';
+import type { ChatMessageTimings, DatabaseMessage } from '$lib/types';
+import { useProcessingState } from './use-processing-state.svelte';
+import {
+	colorLevelFromPercent,
+	type ColorLevel
+} from '$lib/components/app/chat/ChatForm/ChatFormContextGauge/context-gauge';
+
+interface LiveStats {
+	freshTokens: number;
+	promptTokens: number;
+	cacheTokens: number;
+	outputTokens: number;
+}
+
+export interface UseContextGaugeReturn {
+	readonly activeModelId: string | null;
+	readonly isActiveModelLoaded: boolean;
+	readonly isActiveModelLoading: boolean;
+	readonly contextTotal: number | null;
+	readonly contextUsed: number;
+	readonly currentRead: number;
+	readonly currentFresh: number;
+	readonly currentCache: number;
+	readonly currentOutput: number;
+	readonly kvTotal: number;
+	readonly cumulativeRead: number;
+	readonly cumulativeOutput: number;
+	readonly cumulativeCacheTotal: number;
+	readonly averageTokensPerSecond: number | null;
+	readonly contextPercent: number | null;
+	readonly colorLevel: ColorLevel;
+	readonly transientDetails: string[];
+	readonly hasAnyUsage: boolean;
+	loadModel(): Promise<void>;
+	startMonitoring(): void;
+}
+
+function lastAssistantTimings(messages: DatabaseMessage[]): ChatMessageTimings | undefined {
+	for (let i = messages.length - 1; i >= 0; i--) {
+		const m = messages[i];
+		if (m.role === MessageRole.ASSISTANT && m.timings) return m.timings;
+	}
+	return undefined;
+}
+
+function deriveLiveStats(
+	state: ReturnType<typeof useProcessingState>['processingState']
+): LiveStats | null {
+	if (!state || (state.status !== 'preparing' && state.status !== 'generating')) {
+		return null;
+	}
+	const promptTokens = state.promptTokens ?? 0;
+	const cacheTokens = state.cacheTokens ?? 0;
+	return {
+		freshTokens: promptTokens,
+		promptTokens: promptTokens + cacheTokens,
+		cacheTokens,
+		outputTokens: state.outputTokensUsed ?? 0
+	};
+}
+
+const TRANSIENT_DETAILS_EXCLUDED_PREFIXES = ['Context:', 'Output:'];
+
+function filterTransientDetails(raw: string[]): string[] {
+	return raw.filter((detail) => {
+		if (TRANSIENT_DETAILS_EXCLUDED_PREFIXES.some((prefix) => detail.startsWith(prefix))) {
+			return false;
+		}
+		return !detail.includes(STATS_UNITS.TOKENS_PER_SECOND);
+	});
+}
+
+export function useContextGauge(): UseContextGaugeReturn {
+	const processingState = useProcessingState();
+
+	// Resolve the model the gauge reports context for: explicit selection >
+	// last assistant model > single-model mode (mirrors useChatScreenActiveModel).
+	const activeModelId = $derived.by(() => {
+		if (!isRouterMode()) {
+			return singleModelName();
+		}
+
+		const selectedId = selectedModelId();
+		if (selectedId) {
+			const model = modelOptions().find((m) => m.id === selectedId);
+			if (model) return model.model;
+		}
+
+		return chatStore.getConversationModel(activeMessages() as DatabaseMessage[]);
+	});
+
+	const isActiveModelLoaded = $derived(
+		activeModelId !== null && modelsStore.isModelLoaded(activeModelId)
+	);
+
+	const isActiveModelLoading = $derived(
+		activeModelId !== null && modelsStore.isModelOperationInProgress(activeModelId)
+	);
+
+	// Pull /props on demand so n_ctx surfaces before the first chat request.
+	$effect(() => {
+		if (activeModelId && isActiveModelLoaded) {
+			const cached = modelsStore.getModelProps(activeModelId);
+			if (!cached) {
+				void modelsStore.fetchModelProps(activeModelId);
+			}
+		}
+	});
+
+	const contextTotal = $derived.by(() => {
+		void modelsStore.propsCacheVersion;
+		return activeModelId ? modelsStore.getModelContextSize(activeModelId) : null;
+	});
+
+	const liveStats = $derived(deriveLiveStats(processingState.processingState));
+
+	const currentRead = $derived.by(() => {
+		const timings = lastAssistantTimings(activeMessages() as DatabaseMessage[]);
+		let read = 0;
+		if (timings) {
+			read = (timings.prompt_n ?? 0) + (timings.cache_n ?? 0);
+		}
+		// live.promptTokens is already the combined reading (prompt + cache),
+		// so do not also add live.cacheTokens.
+		if (liveStats && liveStats.promptTokens > 0) {
+			read = Math.max(read, liveStats.promptTokens);
+		}
+		return read;
+	});
+
+	const currentFresh = $derived.by(() => {
+		const timings = lastAssistantTimings(activeMessages() as DatabaseMessage[]);
+		const fresh = timings?.prompt_n ?? 0;
+		return Math.max(fresh, liveStats?.freshTokens ?? 0);
+	});
+
+	const currentCache = $derived.by(() => {
+		const timings = lastAssistantTimings(activeMessages() as DatabaseMessage[]);
+		const cached = timings?.cache_n ?? 0;
+		if (liveStats && liveStats.promptTokens > 0) {
+			return Math.max(cached, liveStats.cacheTokens);
+		}
+		return cached;
+	});
+
+	const currentOutput = $derived.by(() => {
+		if (liveStats && liveStats.outputTokens > 0) return liveStats.outputTokens;
+		const timings = lastAssistantTimings(activeMessages() as DatabaseMessage[]);
+		return timings?.predicted_n ?? 0;
+	});
+
+	const kvTotal = $derived(currentRead + currentOutput);
+	const contextUsed = $derived(currentRead + currentOutput);
+
+	const cumulative = $derived.by(() => {
+		const messages = activeMessages() as DatabaseMessage[];
+
+		// Agentic sessions stamp the same agentic.llm totals onto every
+		// assistant message; cache_n is never per-turn so cache_total stays 0.
+		const agenticMessages = messages.filter(
+			(m) => m.role === MessageRole.ASSISTANT && m.timings?.agentic?.llm?.predicted_n != null
+		);
+
+		if (agenticMessages.length > 0) {
+			const llm = agenticMessages[agenticMessages.length - 1].timings!.agentic!.llm;
+			const output = llm.predicted_n ?? 0;
+			const outputMs = llm.predicted_ms ?? 0;
+			const averageTokensPerSecond = outputMs > 0 && output > 0 ? (output / outputMs) * 1000 : null;
+			return {
+				read: llm.prompt_n ?? 0,
+				output,
+				cacheTotal: 0,
+				averageTokensPerSecond
+			};
+		}
+
+		let read = 0;
+		let output = 0;
+		let outputMs = 0;
+		let cacheTotal = 0;
+		for (const m of messages) {
+			if (m.role !== MessageRole.ASSISTANT || !m.timings) continue;
+			read += m.timings.prompt_n ?? 0;
+			cacheTotal += m.timings.cache_n ?? 0;
+			output += m.timings.predicted_n ?? 0;
+			outputMs += m.timings.predicted_ms ?? 0;
+		}
+		const averageTokensPerSecond = outputMs > 0 && output > 0 ? (output / outputMs) * 1000 : null;
+		return { read, output, cacheTotal, averageTokensPerSecond };
+	});
+
+	const contextPercent = $derived.by(() => {
+		if (contextTotal === null || contextTotal <= 0) return null;
+		return Math.round((contextUsed / contextTotal) * 100);
+	});
+
+	const colorLevel = $derived(colorLevelFromPercent(contextPercent));
+
+	// Drop lines the surrounding Context / Output / speed rows already render.
+	const transientDetails = $derived(filterTransientDetails(processingState.getTechnicalDetails()));
+
+	const hasAnyUsage = $derived(
+		cumulative.read > 0 ||
+			cumulative.output > 0 ||
+			currentRead > 0 ||
+			currentOutput > 0 ||
+			cumulative.averageTokensPerSecond !== null ||
+			transientDetails.length > 0
+	);
+
+	async function loadModel() {
+		if (!activeModelId || isActiveModelLoading) return;
+		try {
+			await modelsStore.loadModel(activeModelId);
+		} catch {
+			// toast already surfaced by modelsStore.loadModel
+		}
+	}
+
+	return {
+		get activeModelId() {
+			return activeModelId;
+		},
+		get isActiveModelLoaded() {
+			return isActiveModelLoaded;
+		},
+		get isActiveModelLoading() {
+			return isActiveModelLoading;
+		},
+		get contextTotal() {
+			return contextTotal;
+		},
+		get contextUsed() {
+			return contextUsed;
+		},
+		get currentRead() {
+			return currentRead;
+		},
+		get currentFresh() {
+			return currentFresh;
+		},
+		get currentCache() {
+			return currentCache;
+		},
+		get currentOutput() {
+			return currentOutput;
+		},
+		get kvTotal() {
+			return kvTotal;
+		},
+		get cumulativeRead() {
+			return cumulative.read;
+		},
+		get cumulativeOutput() {
+			return cumulative.output;
+		},
+		get cumulativeCacheTotal() {
+			return cumulative.cacheTotal;
+		},
+		get averageTokensPerSecond() {
+			return cumulative.averageTokensPerSecond;
+		},
+		get contextPercent() {
+			return contextPercent;
+		},
+		get colorLevel() {
+			return colorLevel;
+		},
+		get transientDetails() {
+			return transientDetails;
+		},
+		get hasAnyUsage() {
+			return hasAnyUsage;
+		},
+		loadModel,
+		startMonitoring: () => processingState.startMonitoring()
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/hooks/use-draft-messages.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/hooks/use-draft-messages.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..11305b20552037d4936babf4adb6dc09ae652f27
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/hooks/use-draft-messages.svelte.ts
@@ -0,0 +1,45 @@
+import { onMount } from 'svelte';
+import { afterNavigate, beforeNavigate } from '$app/navigation';
+import { draftMessagesStore } from '$lib/stores/draft-messages.svelte';
+
+interface UseDraftMessagesOptions {
+	getChatId: () => string | undefined;
+	getMessage: () => string;
+	getFiles: () => ChatUploadedFile[];
+	setMessage: (message: string) => void;
+	setFiles: (files: ChatUploadedFile[]) => void;
+	getInitialMessage: () => string;
+}
+
+export function useDraftMessages(options: UseDraftMessagesOptions) {
+	onMount(() => {
+		const chatId = options.getChatId();
+		const draft = draftMessagesStore.getDraftMessage(chatId);
+
+		if ((draft.message || draft.files.length > 0) && !options.getInitialMessage()) {
+			options.setMessage(draft.message);
+			options.setFiles(draft.files);
+		}
+	});
+
+	beforeNavigate(() => {
+		const chatId = options.getChatId();
+		draftMessagesStore.saveDraftMessage(chatId, options.getMessage(), options.getFiles());
+	});
+
+	afterNavigate((navigation) => {
+		if (navigation?.from != null) {
+			const chatId = options.getChatId();
+			const draft = draftMessagesStore.getDraftMessage(chatId);
+			options.setMessage(draft.message);
+			options.setFiles(draft.files);
+		}
+	});
+
+	function clearDraft() {
+		const chatId = options.getChatId();
+		draftMessagesStore.clearDraftMessage(chatId);
+	}
+
+	return { clearDraft };
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/hooks/use-keyboard-shortcuts.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/hooks/use-keyboard-shortcuts.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..61df30b79a56a70ddd33e3bf8fdcbfed353138f3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/hooks/use-keyboard-shortcuts.svelte.ts
@@ -0,0 +1,66 @@
+import { goto } from '$app/navigation';
+import { KeyboardKey } from '$lib/enums';
+import { ROUTES } from '$lib/constants/routes';
+
+interface KeyboardShortcutsCallbacks {
+	activateSearchMode?: () => void;
+	editActiveConversation?: () => void;
+	onSearchActivated?: () => void;
+	deleteActiveConversation?: () => void;
+	navigateToPrevConversation?: () => void;
+	navigateToNextConversation?: () => void;
+	toggleSidebar?: () => void;
+}
+
+export function useKeyboardShortcuts(callbacks: KeyboardShortcutsCallbacks) {
+	function handleKeydown(event: KeyboardEvent) {
+		const isCmdOrCtrl = event.metaKey || event.ctrlKey;
+
+		if (isCmdOrCtrl && event.key === KeyboardKey.K_LOWER) {
+			event.preventDefault();
+			callbacks.activateSearchMode?.();
+			callbacks.onSearchActivated?.();
+		}
+
+		if (isCmdOrCtrl && event.key === KeyboardKey.B_LOWER) {
+			event.preventDefault();
+			callbacks.toggleSidebar?.();
+		}
+
+		if (
+			isCmdOrCtrl &&
+			event.shiftKey &&
+			(event.key === KeyboardKey.O_LOWER || event.key === KeyboardKey.O_UPPER)
+		) {
+			event.preventDefault();
+
+			goto(ROUTES.NEW_CHAT);
+		}
+
+		if (event.shiftKey && isCmdOrCtrl && event.key === KeyboardKey.E_UPPER) {
+			event.preventDefault();
+			callbacks.editActiveConversation?.();
+		}
+
+		if (
+			isCmdOrCtrl &&
+			event.shiftKey &&
+			(event.key === KeyboardKey.D_LOWER || event.key === KeyboardKey.D_UPPER)
+		) {
+			event.preventDefault();
+			callbacks.deleteActiveConversation?.();
+		}
+
+		if (isCmdOrCtrl && event.shiftKey && event.key === KeyboardKey.ARROW_UP) {
+			event.preventDefault();
+			callbacks.navigateToPrevConversation?.();
+		}
+
+		if (isCmdOrCtrl && event.shiftKey && event.key === KeyboardKey.ARROW_DOWN) {
+			event.preventDefault();
+			callbacks.navigateToNextConversation?.();
+		}
+	}
+
+	return { handleKeydown };
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/hooks/use-message-edit-context.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/hooks/use-message-edit-context.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..71d1b66f8d3f22f038ce8ae2b9cd3657c4632233
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/hooks/use-message-edit-context.svelte.ts
@@ -0,0 +1,99 @@
+import { setMessageEditContext } from '$lib/contexts';
+import { MessageRole } from '$lib/enums';
+import { parseFilesToMessageExtras } from '$lib/utils/convert-files-to-extra';
+
+interface UseMessageEditContextOptions {
+	getContent: () => string;
+	getExtras: () => DatabaseMessageExtra[];
+	showSaveOnlyOption?: boolean;
+	onSave: (content: string, extras?: DatabaseMessageExtra[]) => void;
+}
+
+export function useMessageEditContext(options: UseMessageEditContextOptions) {
+	let isEditing = $state(false);
+	let editedContent = $state('');
+	let editedExtras = $state<DatabaseMessageExtra[]>([]);
+	let editedUploadedFiles = $state<ChatUploadedFile[]>([]);
+
+	function handleEdit() {
+		editedContent = options.getContent();
+		editedExtras = [...options.getExtras()];
+		editedUploadedFiles = [];
+		isEditing = true;
+	}
+
+	async function handleSaveEdit() {
+		const trimmed = editedContent.trim();
+		if (!trimmed && editedExtras.length === 0 && editedUploadedFiles.length === 0) return;
+
+		let finalExtras: DatabaseMessageExtra[] = $state.snapshot(editedExtras);
+		if (editedUploadedFiles.length > 0) {
+			const plainFiles = $state.snapshot(editedUploadedFiles);
+			const result = await parseFilesToMessageExtras(plainFiles);
+			const newExtras = result?.extras || [];
+			finalExtras = [...finalExtras, ...newExtras];
+		}
+
+		options.onSave(trimmed, finalExtras.length > 0 ? finalExtras : undefined);
+		isEditing = false;
+	}
+
+	function handleCancelEdit() {
+		isEditing = false;
+	}
+
+	setMessageEditContext({
+		get isEditing() {
+			return isEditing;
+		},
+		get editedContent() {
+			return editedContent;
+		},
+		get editedExtras() {
+			return editedExtras;
+		},
+		get editedUploadedFiles() {
+			return editedUploadedFiles;
+		},
+		get originalContent() {
+			return options.getContent();
+		},
+		get originalExtras() {
+			return options.getExtras();
+		},
+		get showSaveOnlyOption() {
+			return options.showSaveOnlyOption ?? false;
+		},
+		get showBranchAfterEditOption() {
+			return false;
+		},
+		get shouldBranchAfterEdit() {
+			return false;
+		},
+		get messageRole() {
+			return MessageRole.USER;
+		},
+		setContent: (c: string) => {
+			editedContent = c;
+		},
+		setExtras: (e: DatabaseMessageExtra[]) => {
+			editedExtras = e;
+		},
+		setUploadedFiles: (f: ChatUploadedFile[]) => {
+			editedUploadedFiles = f;
+		},
+		save: handleSaveEdit,
+		saveOnly: handleSaveEdit,
+		cancel: handleCancelEdit,
+		startEdit: handleEdit
+	});
+
+	return {
+		get isEditing() {
+			return isEditing;
+		},
+		handleEdit,
+		handleSaveEdit,
+		handleCancelEdit
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/hooks/use-models-selector.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/hooks/use-models-selector.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b3be15c03baa4e7254750a2f6991d8519b4c191
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/hooks/use-models-selector.svelte.ts
@@ -0,0 +1,273 @@
+import { onMount } from 'svelte';
+import {
+	modelsStore,
+	modelOptions,
+	modelsLoading,
+	modelsUpdating,
+	selectedModelId,
+	singleModelName
+} from '$lib/stores/models.svelte';
+import { isRouterMode } from '$lib/stores/server.svelte';
+import { filterModelOptions, groupModelOptions } from '$lib/components/app/models/utils';
+import type { ModelOption } from '$lib/types/models';
+
+export interface UseModelsSelectorOptions {
+	currentModel: () => string | null;
+	useGlobalSelection?: () => boolean;
+	onModelChange?: () =>
+		| ((modelId: string, modelName: string) => Promise<boolean> | boolean | void)
+		| undefined;
+	onOpenChange?: (open: boolean) => void;
+}
+
+export interface UseModelsSelectorReturn {
+	readonly options: ModelOption[];
+	readonly loading: boolean;
+	readonly updating: boolean;
+	readonly activeId: string | null;
+	readonly isRouter: boolean;
+	readonly serverModel: string | null;
+	readonly isHighlightedCurrentModelActive: boolean;
+	readonly isCurrentModelInCache: boolean;
+	readonly filteredOptions: ModelOption[];
+	readonly groupedFilteredOptions: ReturnType<typeof groupModelOptions>;
+	readonly isLoadingModel: boolean;
+	readonly searchTerm: string;
+	readonly showModelDialog: boolean;
+	readonly infoModelId: string | null;
+	setSearchTerm(value: string): void;
+	setShowModelDialog(value: boolean): void;
+	handleInfoClick(modelName: string): void;
+	handleSelect(modelId: string): Promise<void>;
+	handleOpenChange(open: boolean): void;
+	isFavorite(model: string): boolean;
+	getDisplayOption(): ModelOption | undefined;
+}
+
+/**
+ * Shared reactive state and logic for model selection.
+ *
+ * Used by both the desktop dropdown (`ModelsSelectorDropdown`)
+ * and the mobile sheet (`ModelsSelectorSheet`) to avoid
+ * duplicating store derivations, selection handling, and model loading.
+ */
+export function useModelsSelector(opts: UseModelsSelectorOptions): UseModelsSelectorReturn {
+	const options = $derived(
+		modelOptions().filter((option) => {
+			const modelProps = modelsStore.getModelProps(option.model);
+
+			return modelProps?.ui !== false;
+		})
+	);
+	const loading = $derived(modelsLoading());
+	const updating = $derived(modelsUpdating());
+	const activeId = $derived(selectedModelId());
+	const isRouter = $derived(isRouterMode());
+	const serverModel = $derived(singleModelName());
+
+	const currentModel = $derived(opts.currentModel());
+	const onModelChange = $derived(opts.onModelChange?.());
+
+	const isHighlightedCurrentModelActive = $derived.by(() => {
+		if (!isRouter || !currentModel) return false;
+		const currentOption = options.find((option) => option.model === currentModel);
+		return currentOption ? currentOption.id === activeId : false;
+	});
+
+	const isCurrentModelInCache = $derived.by(() => {
+		if (!isRouter || !currentModel) return true;
+		return options.some((option) => option.model === currentModel);
+	});
+
+	let isLoadingModel = $state(false);
+	let searchTerm = $state('');
+	let showModelDialog = $state(false);
+	let infoModelId = $state<string | null>(null);
+	const filteredOptions = $derived(filterModelOptions(options, searchTerm));
+	const groupedFilteredOptions = $derived(
+		groupModelOptions(filteredOptions, modelsStore.favoriteModelIds, (m) =>
+			modelsStore.isModelLoaded(m)
+		)
+	);
+
+	function handleInfoClick(modelName: string) {
+		infoModelId = modelName;
+		showModelDialog = true;
+	}
+
+	onMount(() => {
+		modelsStore.fetch().catch((error) => {
+			console.error('Unable to load models:', error);
+		});
+	});
+
+	function handleOpenChange(open: boolean) {
+		if (loading || updating) return;
+
+		if (isRouter) {
+			searchTerm = '';
+
+			if (open) {
+				modelsStore.fetchRouterModels().then(() => {
+					modelsStore.fetchModalitiesForLoadedModels();
+				});
+			}
+
+			opts.onOpenChange?.(open);
+		} else {
+			showModelDialog = open;
+		}
+	}
+
+	async function handleSelect(modelId: string) {
+		const option = options.find((opt) => opt.id === modelId);
+		if (!option) return;
+
+		let shouldCloseMenu = true;
+
+		if (onModelChange) {
+			const result = await onModelChange(option.id, option.model);
+
+			if (result === false) {
+				shouldCloseMenu = false;
+			}
+		} else {
+			await modelsStore.selectModelById(option.id);
+		}
+
+		if (shouldCloseMenu) {
+			handleOpenChange(false);
+
+			requestAnimationFrame(() => {
+				const textarea = document.querySelector<HTMLTextAreaElement>(
+					'[data-slot="chat-form"] textarea'
+				);
+
+				textarea?.focus({ preventScroll: true });
+			});
+		}
+
+		if (!onModelChange && isRouter && !modelsStore.isModelLoaded(option.model)) {
+			isLoadingModel = true;
+
+			modelsStore
+				.loadModel(option.model)
+				.catch((error) => console.error('Failed to load model:', error))
+				.finally(() => (isLoadingModel = false));
+		}
+	}
+
+	function getDisplayOption(): ModelOption | undefined {
+		if (!isRouter) {
+			const displayModel = serverModel || currentModel;
+
+			if (displayModel) {
+				return {
+					id: serverModel ? 'current' : 'offline-current',
+					model: displayModel,
+					name: displayModel.split('/').pop() || displayModel,
+					capabilities: []
+				};
+			}
+
+			return undefined;
+		}
+
+		if (currentModel) {
+			if (!isCurrentModelInCache) {
+				return {
+					id: 'not-in-cache',
+					model: currentModel,
+					name: currentModel.split('/').pop() || currentModel,
+					capabilities: []
+				};
+			}
+
+			return options.find((option) => option.model === currentModel);
+		}
+
+		if (activeId) {
+			return options.find((option) => option.id === activeId);
+		}
+
+		return undefined;
+	}
+
+	return {
+		get options() {
+			return options;
+		},
+
+		get loading() {
+			return loading;
+		},
+
+		get updating() {
+			return updating;
+		},
+
+		get activeId() {
+			return activeId;
+		},
+
+		get isRouter() {
+			return isRouter;
+		},
+
+		get serverModel() {
+			return serverModel;
+		},
+
+		get isHighlightedCurrentModelActive() {
+			return isHighlightedCurrentModelActive;
+		},
+
+		get isCurrentModelInCache() {
+			return isCurrentModelInCache;
+		},
+
+		get filteredOptions() {
+			return filteredOptions;
+		},
+
+		get groupedFilteredOptions() {
+			return groupedFilteredOptions;
+		},
+
+		get isLoadingModel() {
+			return isLoadingModel;
+		},
+
+		get searchTerm() {
+			return searchTerm;
+		},
+
+		get showModelDialog() {
+			return showModelDialog;
+		},
+
+		get infoModelId() {
+			return infoModelId;
+		},
+
+		setSearchTerm(value: string) {
+			searchTerm = value;
+		},
+
+		setShowModelDialog(value: boolean) {
+			showModelDialog = value;
+		},
+
+		handleInfoClick,
+
+		handleSelect,
+
+		handleOpenChange,
+
+		isFavorite(model: string) {
+			return modelsStore.favoriteModelIds.has(model);
+		},
+
+		getDisplayOption
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/hooks/use-processing-state.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/hooks/use-processing-state.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9fbda75d67240b5842cef797da56043cc7772d85
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/hooks/use-processing-state.svelte.ts
@@ -0,0 +1,317 @@
+import { activeProcessingState } from '$lib/stores/chat.svelte';
+import { STATS_UNITS } from '$lib/constants';
+import type { ApiProcessingState, LiveProcessingStats, LiveGenerationStats } from '$lib/types';
+
+export interface UseProcessingStateReturn {
+	readonly processingState: ApiProcessingState | null;
+	getProcessingDetails(): string[];
+	getTechnicalDetails(): string[];
+	getProcessingMessage(): string;
+	getPromptProgressText(): string | null;
+	getLiveProcessingStats(): LiveProcessingStats | null;
+	getLiveGenerationStats(): LiveGenerationStats | null;
+	shouldShowDetails(): boolean;
+	startMonitoring(): void;
+	stopMonitoring(): void;
+}
+
+/**
+ * useProcessingState - Reactive processing state hook
+ *
+ * This hook provides reactive access to the processing state of the server.
+ * It directly reads from chatStore's reactive state and provides
+ * formatted processing details for UI display.
+ *
+ * **Features:**
+ * - Real-time processing state via direct reactive state binding
+ * - Context and output token tracking
+ * - Tokens per second calculation
+ * - Automatic updates when streaming data arrives
+ * - Supports multiple concurrent conversations
+ *
+ * @returns Hook interface with processing state and control methods
+ */
+export function useProcessingState(): UseProcessingStateReturn {
+	let isMonitoring = $state(false);
+	let lastKnownState = $state<ApiProcessingState | null>(null);
+	let lastKnownProcessingStats = $state<LiveProcessingStats | null>(null);
+
+	// Derive processing state reactively from chatStore's direct state
+	const processingState = $derived.by(() => {
+		if (!isMonitoring) {
+			return lastKnownState;
+		}
+		// Read directly from the reactive state export
+		return activeProcessingState();
+	});
+
+	$effect(() => {
+		if (processingState && isMonitoring) {
+			lastKnownState = processingState;
+		}
+	});
+
+	// Track last known processing stats for when promptProgress disappears
+	$effect(() => {
+		if (processingState?.promptProgress) {
+			const { processed, total, time_ms, cache } = processingState.promptProgress;
+			const actualProcessed = processed - cache;
+			const actualTotal = total - cache;
+
+			if (actualProcessed > 0 && time_ms > 0) {
+				const tokensPerSecond = actualProcessed / (time_ms / 1000);
+				lastKnownProcessingStats = {
+					tokensProcessed: actualProcessed,
+					totalTokens: actualTotal,
+					timeMs: time_ms,
+					tokensPerSecond
+				};
+			}
+		}
+	});
+
+	function getETASecs(done: number, total: number, elapsedMs: number): number | undefined {
+		const elapsedSecs = elapsedMs / 1000;
+		const progressETASecs =
+			done === 0 || elapsedSecs < 0.5
+				? undefined // can be the case for the 0% progress report
+				: elapsedSecs * (total / done - 1);
+		return progressETASecs;
+	}
+
+	function startMonitoring(): void {
+		if (isMonitoring) return;
+		isMonitoring = true;
+	}
+
+	function stopMonitoring(): void {
+		if (!isMonitoring) return;
+
+		isMonitoring = false;
+	}
+
+	function getProcessingMessage(): string {
+		if (!processingState) {
+			return 'Processing...';
+		}
+
+		switch (processingState.status) {
+			case 'initializing':
+				return 'Initializing...';
+			case 'preparing':
+				if (processingState.progressPercent !== undefined) {
+					return `Processing (${processingState.progressPercent}%)`;
+				}
+				return 'Preparing response...';
+			case 'generating':
+				return '';
+			default:
+				return 'Processing...';
+		}
+	}
+
+	function getProcessingDetails(): string[] {
+		// Use current processing state or fall back to last known state
+		const stateToUse = processingState || lastKnownState;
+		if (!stateToUse) {
+			return [];
+		}
+
+		const details: string[] = [];
+
+		// Show prompt processing progress with ETA during preparation phase
+		if (stateToUse.promptProgress) {
+			const { processed, total, time_ms, cache } = stateToUse.promptProgress;
+			const actualProcessed = processed - cache;
+			const actualTotal = total - cache;
+
+			if (actualProcessed < actualTotal && actualProcessed > 0) {
+				const percent = Math.round((actualProcessed / actualTotal) * 100);
+				const eta = getETASecs(actualProcessed, actualTotal, time_ms);
+
+				if (eta !== undefined) {
+					const etaSecs = Math.ceil(eta);
+					details.push(`Processing ${percent}% (ETA: ${etaSecs}s)`);
+				} else {
+					details.push(`Processing ${percent}%`);
+				}
+			}
+		}
+
+		// Always show context info when we have valid data
+		if (
+			typeof stateToUse.contextTotal === 'number' &&
+			stateToUse.contextUsed >= 0 &&
+			stateToUse.contextTotal > 0
+		) {
+			const contextPercent = Math.round((stateToUse.contextUsed / stateToUse.contextTotal) * 100);
+
+			details.push(
+				`Context: ${stateToUse.contextUsed}/${stateToUse.contextTotal} (${contextPercent}%)`
+			);
+		}
+
+		if (stateToUse.outputTokensUsed > 0) {
+			// Handle infinite max_tokens (-1) case
+			if (stateToUse.outputTokensMax <= 0) {
+				details.push(`Output: ${stateToUse.outputTokensUsed}/∞`);
+			} else {
+				const outputPercent = Math.round(
+					(stateToUse.outputTokensUsed / stateToUse.outputTokensMax) * 100
+				);
+
+				details.push(
+					`Output: ${stateToUse.outputTokensUsed}/${stateToUse.outputTokensMax} (${outputPercent}%)`
+				);
+			}
+		}
+
+		if (stateToUse.tokensPerSecond && stateToUse.tokensPerSecond > 0) {
+			details.push(`${stateToUse.tokensPerSecond.toFixed(1)} ${STATS_UNITS.TOKENS_PER_SECOND}`);
+		}
+
+		if (stateToUse.speculative) {
+			details.push('Speculative decoding enabled');
+		}
+
+		return details;
+	}
+
+	/**
+	 * Returns technical details without the progress message (for bottom bar)
+	 */
+	function getTechnicalDetails(): string[] {
+		const stateToUse = processingState || lastKnownState;
+		if (!stateToUse) {
+			return [];
+		}
+
+		const details: string[] = [];
+
+		// Always show context info when we have valid data
+		if (
+			typeof stateToUse.contextTotal === 'number' &&
+			stateToUse.contextUsed >= 0 &&
+			stateToUse.contextTotal > 0
+		) {
+			const contextPercent = Math.round((stateToUse.contextUsed / stateToUse.contextTotal) * 100);
+
+			details.push(
+				`Context: ${stateToUse.contextUsed}/${stateToUse.contextTotal} (${contextPercent}%)`
+			);
+		}
+
+		if (stateToUse.outputTokensUsed > 0) {
+			// Handle infinite max_tokens (-1) case
+			if (stateToUse.outputTokensMax <= 0) {
+				details.push(`Output: ${stateToUse.outputTokensUsed}/∞`);
+			} else {
+				const outputPercent = Math.round(
+					(stateToUse.outputTokensUsed / stateToUse.outputTokensMax) * 100
+				);
+
+				details.push(
+					`Output: ${stateToUse.outputTokensUsed}/${stateToUse.outputTokensMax} (${outputPercent}%)`
+				);
+			}
+		}
+
+		if (stateToUse.tokensPerSecond && stateToUse.tokensPerSecond > 0) {
+			details.push(`${stateToUse.tokensPerSecond.toFixed(1)} ${STATS_UNITS.TOKENS_PER_SECOND}`);
+		}
+
+		if (stateToUse.speculative) {
+			details.push('Speculative decoding enabled');
+		}
+
+		return details;
+	}
+
+	function shouldShowDetails(): boolean {
+		return processingState !== null && processingState.status !== 'idle';
+	}
+
+	/**
+	 * Returns a short progress message with percent
+	 */
+	function getPromptProgressText(): string | null {
+		if (!processingState?.promptProgress) return null;
+
+		const { processed, total, cache } = processingState.promptProgress;
+
+		const actualProcessed = processed - cache;
+		const actualTotal = total - cache;
+		const percent = Math.round((actualProcessed / actualTotal) * 100);
+		const eta = getETASecs(actualProcessed, actualTotal, processingState.promptProgress.time_ms);
+
+		if (eta !== undefined) {
+			const etaSecs = Math.ceil(eta);
+			return `Processing ${percent}% (ETA: ${etaSecs}s)`;
+		}
+
+		return `Processing ${percent}%`;
+	}
+
+	/**
+	 * Returns live processing statistics for display (prompt processing phase)
+	 * Returns last known stats when promptProgress becomes unavailable
+	 */
+	function getLiveProcessingStats(): LiveProcessingStats | null {
+		if (processingState?.promptProgress) {
+			const { processed, total, time_ms, cache } = processingState.promptProgress;
+
+			const actualProcessed = processed - cache;
+			const actualTotal = total - cache;
+
+			if (actualProcessed > 0 && time_ms > 0) {
+				const tokensPerSecond = actualProcessed / (time_ms / 1000);
+
+				return {
+					tokensProcessed: actualProcessed,
+					totalTokens: actualTotal,
+					timeMs: time_ms,
+					tokensPerSecond
+				};
+			}
+		}
+
+		// Return last known stats if promptProgress is no longer available
+		return lastKnownProcessingStats;
+	}
+
+	/**
+	 * Returns live generation statistics for display (token generation phase)
+	 */
+	function getLiveGenerationStats(): LiveGenerationStats | null {
+		if (!processingState) return null;
+
+		const { tokensDecoded, tokensPerSecond } = processingState;
+
+		if (tokensDecoded <= 0) return null;
+
+		// Calculate time from tokens and speed
+		const timeMs =
+			tokensPerSecond && tokensPerSecond > 0 ? (tokensDecoded / tokensPerSecond) * 1000 : 0;
+
+		return {
+			tokensGenerated: tokensDecoded,
+			timeMs,
+			tokensPerSecond: tokensPerSecond || 0
+		};
+	}
+
+	return {
+		get processingState() {
+			return processingState;
+		},
+		getProcessingDetails,
+		getTechnicalDetails,
+		getProcessingMessage,
+		getPromptProgressText,
+		getLiveProcessingStats,
+		getLiveGenerationStats,
+		shouldShowDetails,
+		startMonitoring,
+		stopMonitoring
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/hooks/use-pwa.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/hooks/use-pwa.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e1f46e1bc2771e128037124374e9fd76b5be5cef
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/hooks/use-pwa.svelte.ts
@@ -0,0 +1,82 @@
+import { browser } from '$app/environment';
+import { useRegisterSW } from 'virtual:pwa-register/svelte';
+import { versionStore } from '$lib/stores/version.svelte';
+import { BUILD_VERSION_LOCALSTORAGE_KEY } from '$lib/constants/storage';
+import { SW_CONFIG } from '$lib/constants/pwa';
+
+/**
+ * Hook for PWA service worker registration, update polling, and build version mismatch detection.
+ *
+ * Combines two concerns that always belong together:
+ * 1. SW registration with periodic polling for updates
+ * 2. localStorage-based version tracking for non-PWA users
+ */
+export function usePwa() {
+	let swCheckInterval: ReturnType<typeof setInterval> | null = null;
+	let needRefreshByStorage = $state(false);
+
+	const {
+		// offlineReady, // to do - add installation banners for iOS
+		needRefresh: pwaNeedRefresh,
+		updateServiceWorker
+	} = useRegisterSW({
+		onRegisteredSW(swUrl: string, r: ServiceWorkerRegistration | undefined) {
+			if (swCheckInterval) {
+				clearInterval(swCheckInterval);
+			}
+			swCheckInterval = setInterval(async () => {
+				if (!r || r.installing || !navigator?.onLine) return;
+
+				try {
+					const resp = await fetch(swUrl, {
+						cache: SW_CONFIG.UPDATE_FETCH_OPTIONS.CACHE,
+						headers: {
+							cache: SW_CONFIG.UPDATE_FETCH_OPTIONS.HEADERS.CACHE,
+							'cache-control': SW_CONFIG.UPDATE_FETCH_OPTIONS.HEADERS.CACHE_CONTROL
+						}
+					});
+					if (resp?.status === 200) {
+						await r.update();
+					}
+				} catch (e) {
+					console.error(e);
+				}
+			}, SW_CONFIG.CHECK_INTERVAL_MS);
+		},
+		onRegisterError(error: unknown) {
+			console.error('[PWA] SW registration error:', error);
+		}
+	});
+
+	// Detect version mismatch via localStorage.
+	// _app/version.json is SvelteKit's native version file for PWA cache invalidation.
+	// This comparison detects server upgrades for non-PWA users.
+	$effect(() => {
+		if (!browser) return;
+		// PWA pages update via the service worker path; the storage check is the non-PWA fallback only
+		if (navigator.serviceWorker?.controller) return;
+
+		const currentVersion = versionStore.value;
+		if (!currentVersion) return;
+
+		try {
+			const storedVersion = localStorage.getItem(BUILD_VERSION_LOCALSTORAGE_KEY);
+			needRefreshByStorage = !!storedVersion && storedVersion !== currentVersion;
+			localStorage.setItem(BUILD_VERSION_LOCALSTORAGE_KEY, currentVersion);
+		} catch {
+			needRefreshByStorage = false;
+		}
+	});
+
+	return {
+		/** Writable that is true when a PWA service worker update is available */
+		get needRefresh() {
+			return pwaNeedRefresh;
+		},
+		updateServiceWorker,
+		/** Version mismatch detected via localStorage (non-PWA users) */
+		get needRefreshByStorage() {
+			return needRefreshByStorage;
+		}
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/hooks/use-scroll-carousel.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/hooks/use-scroll-carousel.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e4c75d236504bd6ca84b49a4fc3b31174178018d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/hooks/use-scroll-carousel.svelte.ts
@@ -0,0 +1,61 @@
+export function useScrollCarousel() {
+	let canScrollLeft = $state(false);
+	let canScrollRight = $state(false);
+	let scrollContainer = $state<HTMLDivElement | undefined>();
+
+	function scrollToCenter(element: HTMLElement) {
+		if (!scrollContainer) return;
+
+		const containerRect = scrollContainer.getBoundingClientRect();
+		const elementRect = element.getBoundingClientRect();
+
+		const elementCenter = elementRect.left + elementRect.width / 2;
+		const containerCenter = containerRect.left + containerRect.width / 2;
+		const scrollOffset = elementCenter - containerCenter;
+
+		scrollContainer.scrollBy({ left: scrollOffset, behavior: 'smooth' });
+	}
+
+	function scrollLeft() {
+		if (!scrollContainer) return;
+		scrollContainer.scrollBy({ left: -250, behavior: 'smooth' });
+	}
+
+	function scrollRight() {
+		if (!scrollContainer) return;
+		scrollContainer.scrollBy({ left: 250, behavior: 'smooth' });
+	}
+
+	function updateScrollButtons() {
+		if (!scrollContainer) return;
+
+		const { scrollLeft: sl, scrollWidth, clientWidth } = scrollContainer;
+		canScrollLeft = sl > 0;
+		canScrollRight = sl < scrollWidth - clientWidth - 1;
+	}
+
+	$effect(() => {
+		if (scrollContainer) {
+			updateScrollButtons();
+		}
+	});
+
+	return {
+		get canScrollLeft() {
+			return canScrollLeft;
+		},
+		get canScrollRight() {
+			return canScrollRight;
+		},
+		get scrollContainer() {
+			return scrollContainer;
+		},
+		set scrollContainer(el: HTMLDivElement | undefined) {
+			scrollContainer = el;
+		},
+		scrollToCenter,
+		scrollLeft,
+		scrollRight,
+		updateScrollButtons
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/hooks/use-settings-navigation.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/hooks/use-settings-navigation.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3cbcaaeda5f3904894058d9d3a553ffd85e57909
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/hooks/use-settings-navigation.svelte.ts
@@ -0,0 +1,46 @@
+import { page } from '$app/state';
+import { beforeNavigate } from '$app/navigation';
+import { settingsReferrer } from '$lib/stores/settings-referrer.svelte';
+import { ROUTES } from '$lib/constants/routes';
+
+export interface ChatSettings {
+	reset: () => void;
+}
+
+export function useSettingsNavigation() {
+	const subroute = $state({
+		activePanel: 'chat' as 'chat' | 'settings' | 'mcp',
+		chatSettingsRef: undefined as ChatSettings | undefined
+	});
+
+	const isSettingsRoute = $derived(!!page.route.id?.startsWith('/settings'));
+
+	beforeNavigate(({ to, from }) => {
+		if (to?.route?.id?.startsWith('/settings') && !from?.route?.id?.startsWith('/settings')) {
+			settingsReferrer.url = window.location.hash || ROUTES.START;
+		}
+	});
+
+	$effect(() => {
+		if (subroute.activePanel === 'settings' && subroute.chatSettingsRef) {
+			subroute.chatSettingsRef.reset();
+		}
+	});
+
+	// Return to chat when navigating to a new route
+	$effect(() => {
+		void page.url;
+
+		subroute.activePanel = 'chat';
+	});
+
+	return {
+		get panel() {
+			return subroute;
+		},
+
+		get isSettingsRoute() {
+			return isSettingsRoute;
+		}
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/hooks/use-throttle.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/hooks/use-throttle.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0795519787b8e539fc9ecaf56cc2ded6af4a2016
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/hooks/use-throttle.svelte.ts
@@ -0,0 +1,32 @@
+/**
+ * Creates a reactive throttle key that increments when `getValue()` changes
+ * and the throttle window has elapsed since the last increment.
+ *
+ * Useful for throttling animations that should not fire on every rapid update.
+ *
+ * @param getValue - A reactive getter for the value to watch
+ * @param ms - Throttle window in milliseconds
+ * @returns A reactive number that increments when the throttled value changes
+ */
+export function useThrottle(getValue: () => string | undefined, ms: number) {
+	let key = $state(0);
+	let throttleEnd = $state(0);
+	let lastValue: string | undefined = getValue();
+
+	$effect(() => {
+		const value = getValue();
+		if (value === lastValue) return;
+		const now = Date.now();
+		if (now >= throttleEnd) {
+			lastValue = value;
+			key++;
+			throttleEnd = now + ms;
+		}
+	});
+
+	return {
+		get key() {
+			return key;
+		}
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/hooks/use-tools-panel.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/hooks/use-tools-panel.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2e1d2d08da5fda922bd31bfb473d85fd36ee9486
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/hooks/use-tools-panel.svelte.ts
@@ -0,0 +1,123 @@
+import { CLI_FLAGS } from '$lib/constants';
+import { SvelteSet } from 'svelte/reactivity';
+import { ToolSource } from '$lib/enums';
+import { conversationsStore } from '$lib/stores/conversations.svelte';
+import { mcpStore } from '$lib/stores/mcp.svelte';
+import { toolsStore } from '$lib/stores/tools.svelte';
+import type { ToolGroup } from '$lib/types';
+
+export interface UseToolsPanelReturn {
+	readonly expandedGroups: SvelteSet<string>;
+	readonly groups: ToolGroup[];
+	readonly activeGroups: ToolGroup[];
+	readonly totalToolCount: number;
+	readonly noToolsInfoMessage: string | null;
+	isGroupChecked(group: ToolGroup): boolean;
+	getEnabledToolCount(group: ToolGroup): number;
+	getFavicon(group: ToolGroup): string | null;
+	isGroupDisabled(group: ToolGroup): boolean;
+	toggleGroupExpanded(label: string): void;
+	/** Toggle all tools in a group by label (avoids stale group object references). */
+	toggleGroupByLabel(label: string): void;
+	handleOpen(): void;
+}
+
+/**
+ * Shared reactive state and helpers for the tools panel UI.
+ *
+ * Used by both the desktop dropdown (`ChatFormActionAddToolsSubmenu`)
+ * and the mobile sheet (`ChatFormActionAddSheet`) to avoid
+ * duplicating group filtering, checked-state derivation, and favicon logic.
+ */
+export function useToolsPanel(): UseToolsPanelReturn {
+	const expandedGroups = new SvelteSet<string>();
+
+	const groups = $derived(toolsStore.toolGroups);
+	const activeGroups = $derived(
+		groups.filter(
+			(g) =>
+				g.source !== ToolSource.MCP ||
+				!g.serverId ||
+				conversationsStore.isMcpServerEnabledForChat(g.serverId)
+		)
+	);
+	const totalToolCount = $derived(activeGroups.reduce((n, g) => n + g.tools.length, 0));
+	const noToolsInfoMessage = $derived.by(() => {
+		if (toolsStore.loading) return null;
+		if (toolsStore.toolGroups.length > 0) return null;
+		// Tools endpoint is unreachable (404) — server started without --tools
+		if (toolsStore.isToolsEndpointUnreachable) {
+			return `To enable Built-In Tools you need to run llama-server with ${CLI_FLAGS.TOOLS} all or ${CLI_FLAGS.TOOLS} <name> flag. To see MCP Tools you need to add / enable MCP Server(s).`;
+		}
+		// Other errors — return null so UI shows "Failed to load tools"
+		if (toolsStore.error) return null;
+		return `To enable Built-In Tools you need to run llama-server with ${CLI_FLAGS.TOOLS} all or ${CLI_FLAGS.TOOLS} <name> flag. To see MCP Tools you need to add / enable MCP Server(s).`;
+	});
+
+	function isGroupChecked(group: ToolGroup): boolean {
+		return toolsStore.isGroupFullyEnabled(group);
+	}
+
+	function getEnabledToolCount(group: ToolGroup): number {
+		return group.tools.filter((tool) => toolsStore.isToolEnabled(tool.key)).length;
+	}
+
+	function getFavicon(group: ToolGroup): string | null {
+		if (group.source !== ToolSource.MCP || !group.serverId) return null;
+
+		return mcpStore.getServerFavicon(group.serverId);
+	}
+
+	function isGroupDisabled(group: ToolGroup): boolean {
+		return (
+			group.source === ToolSource.MCP &&
+			!!group.serverId &&
+			!conversationsStore.isMcpServerEnabledForChat(group.serverId)
+		);
+	}
+
+	function toggleGroupExpanded(label: string): void {
+		if (expandedGroups.has(label)) {
+			expandedGroups.delete(label);
+		} else {
+			expandedGroups.add(label);
+		}
+	}
+
+	function toggleGroupByLabel(label: string): void {
+		// Find current group by label to get up-to-date tool references
+		const group = activeGroups.find((g) => g.label === label);
+		if (!group) return;
+		toolsStore.toggleGroup(group);
+	}
+
+	function handleOpen(): void {
+		if (toolsStore.builtinTools.length === 0 && !toolsStore.loading) {
+			toolsStore.fetchBuiltinTools();
+		}
+		mcpStore.runHealthChecksForServers(mcpStore.getServers().filter((s) => s.enabled));
+	}
+
+	return {
+		expandedGroups,
+		get groups() {
+			return groups;
+		},
+		get activeGroups() {
+			return activeGroups;
+		},
+		get totalToolCount() {
+			return totalToolCount;
+		},
+		get noToolsInfoMessage() {
+			return noToolsInfoMessage;
+		},
+		isGroupChecked,
+		getEnabledToolCount,
+		getFavicon,
+		isGroupDisabled,
+		toggleGroupExpanded,
+		toggleGroupByLabel,
+		handleOpen
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/services/chat.service.ts b/backend/llama.cpp/tools/ui/src/lib/services/chat.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..15f4cc3b5f8bf3e218f8f2bf3cf1c835974f2cae
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/services/chat.service.ts
@@ -0,0 +1,1491 @@
+import { getAuthHeaders, getJsonHeaders } from '$lib/utils/api-headers';
+import { formatAttachmentText } from '$lib/utils/formatters';
+import { isAbortError } from '$lib/utils/abort';
+import { streamIdentity } from '$lib/utils/stream-identity';
+import {
+	ATTACHMENT_LABEL_PDF_FILE,
+	ATTACHMENT_LABEL_MCP_PROMPT,
+	ATTACHMENT_LABEL_MCP_RESOURCE,
+	LEGACY_AGENTIC_REGEX,
+	REASONING_EFFORT_TOKENS,
+	SETTINGS_KEYS,
+	API_CHAT,
+	API_SLOTS,
+	CONTROL_ACTION,
+	SSE_LINE_SEPARATOR,
+	SSE_DATA_PREFIX,
+	SSE_DONE_MARKER,
+	STREAM_VISIBILITY_KICK_MS,
+	STREAM_RESUME_LOCALSTORAGE_KEY_PREFIX,
+	API_STREAM
+} from '$lib/constants';
+import {
+	AttachmentType,
+	ContentPartType,
+	FileTypeAudio,
+	MessageRole,
+	MimeTypeAudio,
+	ReasoningFormat,
+	StreamConnectionState
+} from '$lib/enums';
+import type {
+	ApiChatMessageContentPart,
+	ApiChatMessageData,
+	ApiChatCompletionToolCall,
+	ApiStreamSession
+} from '$lib/types/api';
+import type {
+	AudioInputFormat,
+	DatabaseMessageExtraMcpPrompt,
+	DatabaseMessageExtraMcpResource
+} from '$lib/types';
+import { modelsStore } from '$lib/stores/models.svelte';
+import { settingsStore } from '../stores/settings.svelte';
+import { capImageDataURLSize } from '../utils/cap-img-size';
+
+function getAudioInputFormat(mimeType: string): AudioInputFormat {
+	const normalizedMimeType = mimeType.trim().toLowerCase();
+
+	if (
+		normalizedMimeType === MimeTypeAudio.WAV ||
+		normalizedMimeType === MimeTypeAudio.WAVE ||
+		normalizedMimeType === MimeTypeAudio.X_WAV ||
+		normalizedMimeType === MimeTypeAudio.X_WAVE ||
+		normalizedMimeType === MimeTypeAudio.VND_WAVE ||
+		normalizedMimeType === MimeTypeAudio.X_PN_WAV
+	) {
+		return FileTypeAudio.WAV;
+	}
+
+	return FileTypeAudio.MP3;
+}
+
+interface ResumableStreamState {
+	bytesReceived: number;
+	updatedAt: number;
+
+	// model frozen at POST time, lets a reload rebuild the exact conv::model identity the
+	// server keyed the session under. null when the POST carried no explicit model
+	model?: string | null;
+}
+
+function streamStorageKey(conversationId: string): string {
+	return STREAM_RESUME_LOCALSTORAGE_KEY_PREFIX + conversationId;
+}
+
+export class ChatService {
+	/**
+	 *
+	 *
+	 * Title Generation
+	 *
+	 *
+	 */
+
+	/**
+	 * Sends a streaming chat completion request for generating a chat title.
+	 * Delegates to `sendMessage` for fetch, SSE parsing, and error handling.
+	 *
+	 * @param message - The single message to send (a user message containing the title generation prompt)
+	 * @param model - Optional model name to use (required in ROUTER mode)
+	 * @param signal - Optional AbortSignal to cancel the request
+	 * @returns {Promise<string>} The aggregated title text, or empty string if request failed
+	 * @static
+	 */
+	static async generateTitle(
+		message: ApiChatMessageData,
+		model?: string | null,
+		signal?: AbortSignal
+	): Promise<string> {
+		let titleResponse = '';
+		try {
+			await ChatService.sendMessage(
+				[message],
+				{
+					model: model || undefined,
+					stream: true,
+					custom: { chat_template_kwargs: { enable_thinking: false } },
+					onChunk: (chunk: string) => {
+						titleResponse += chunk;
+					}
+				},
+				undefined,
+				signal
+			);
+		} catch {
+			return '';
+		}
+		return titleResponse;
+	}
+
+	/**
+	 *
+	 *
+	 * Messaging
+	 *
+	 *
+	 */
+
+	/**
+	 * Sends a chat completion request to the llama-server.
+	 * Supports both streaming and non-streaming responses with comprehensive parameter configuration.
+	 * Automatically converts database messages with attachments to the appropriate API format.
+	 *
+	 * @param messages - Array of chat messages to send to the API (supports both ApiChatMessageData and DatabaseMessage with attachments)
+	 * @param options - Configuration options for the chat completion request. See `SettingsChatServiceOptions` type for details.
+	 * @returns {Promise<string | void>} that resolves to the complete response string (non-streaming) or void (streaming)
+	 * @throws {Error} if the request fails or is aborted
+	 */
+	static async sendMessage(
+		messages: ApiChatMessageData[] | (DatabaseMessage & { extra?: DatabaseMessageExtra[] })[],
+		options: SettingsChatServiceOptions = {},
+		conversationId?: string,
+		signal?: AbortSignal
+	): Promise<string | void> {
+		const {
+			stream,
+			onChunk,
+			onComplete,
+			onError,
+			onConnectionState,
+			onReasoningChunk,
+			onToolCallChunk,
+			onModel,
+			onCompletionId,
+			onTimings,
+			// Tools for function calling
+			tools,
+			// Generation parameters
+			temperature,
+			max_tokens,
+			// Sampling parameters
+			dynatemp_range,
+			dynatemp_exponent,
+			top_k,
+			top_p,
+			min_p,
+			xtc_probability,
+			xtc_threshold,
+			typ_p,
+			// Penalty parameters
+			repeat_last_n,
+			repeat_penalty,
+			presence_penalty,
+			frequency_penalty,
+			dry_multiplier,
+			dry_base,
+			dry_allowed_length,
+			dry_penalty_last_n,
+			// Other parameters
+			samplers,
+			backend_sampling,
+			custom,
+			timings_per_token,
+			// Config options
+			disableReasoningParsing,
+			excludeReasoningFromContext,
+			enableThinking,
+			reasoningEffort,
+			continueFinalMessage
+		} = options;
+
+		const normalizedMessages: ApiChatMessageData[] = (
+			await Promise.all(
+				messages.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;
+					}
+				})
+			)
+		).filter((msg: { role: ChatRole; content: string | ApiChatMessageContentPart[] }) => {
+			// Filter out empty system messages
+			if (msg.role === MessageRole.SYSTEM) {
+				const content = typeof msg.content === 'string' ? msg.content : '';
+
+				return content.trim().length > 0;
+			}
+
+			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 &&
+						typeof msg.content[0].text === 'string'
+					) {
+						msg.content = msg.content[0].text;
+					}
+				}
+			});
+		}
+
+		const requestBody: ApiChatCompletionRequest = {
+			messages: normalizedMessages.map((msg: ApiChatMessageData) => {
+				const mapped: ApiChatCompletionRequest['messages'][0] = {
+					role: msg.role,
+					content: msg.content,
+					tool_calls: msg.tool_calls,
+					tool_call_id: msg.tool_call_id
+				};
+				// Include reasoning_content from the dedicated field
+				if (!excludeReasoningFromContext && msg.reasoning_content) {
+					mapped.reasoning_content = msg.reasoning_content;
+				}
+				return mapped;
+			}),
+			stream,
+			return_progress: stream ? true : undefined,
+			sse_ping_interval: stream ? 1 : undefined,
+			tools: tools && tools.length > 0 ? tools : undefined
+		};
+
+		// Include model in request if provided (required in ROUTER mode)
+		if (options.model) {
+			requestBody.model = options.model;
+		}
+
+		requestBody.reasoning_format = disableReasoningParsing
+			? ReasoningFormat.NONE
+			: ReasoningFormat.AUTO;
+
+		const reasoningBudgetTokens =
+			enableThinking && reasoningEffort ? (REASONING_EFFORT_TOKENS[reasoningEffort] ?? -1) : -1;
+
+		requestBody.chat_template_kwargs = {
+			...(requestBody.chat_template_kwargs ?? {}),
+			enable_thinking: enableThinking
+		};
+
+		if (reasoningBudgetTokens >= 0) {
+			requestBody.thinking_budget_tokens = reasoningBudgetTokens;
+		}
+
+		// arms the budget sampler so reasoning can be ended at runtime via the control endpoint
+		requestBody.reasoning_control = true;
+
+		if (continueFinalMessage) {
+			requestBody.continue_final_message = true;
+			requestBody.add_generation_prompt = false;
+		}
+
+		if (temperature !== undefined) requestBody.temperature = temperature;
+		if (max_tokens !== undefined) {
+			// Set max_tokens to -1 (infinite) when explicitly configured as 0 or null
+			requestBody.max_tokens = max_tokens !== null && max_tokens !== 0 ? max_tokens : -1;
+		}
+
+		if (dynatemp_range !== undefined) requestBody.dynatemp_range = dynatemp_range;
+		if (dynatemp_exponent !== undefined) requestBody.dynatemp_exponent = dynatemp_exponent;
+		if (top_k !== undefined) requestBody.top_k = top_k;
+		if (top_p !== undefined) requestBody.top_p = top_p;
+		if (min_p !== undefined) requestBody.min_p = min_p;
+		if (xtc_probability !== undefined) requestBody.xtc_probability = xtc_probability;
+		if (xtc_threshold !== undefined) requestBody.xtc_threshold = xtc_threshold;
+		if (typ_p !== undefined) requestBody.typ_p = typ_p;
+
+		if (repeat_last_n !== undefined) requestBody.repeat_last_n = repeat_last_n;
+		if (repeat_penalty !== undefined) requestBody.repeat_penalty = repeat_penalty;
+		if (presence_penalty !== undefined) requestBody.presence_penalty = presence_penalty;
+		if (frequency_penalty !== undefined) requestBody.frequency_penalty = frequency_penalty;
+		if (dry_multiplier !== undefined) requestBody.dry_multiplier = dry_multiplier;
+		if (dry_base !== undefined) requestBody.dry_base = dry_base;
+		if (dry_allowed_length !== undefined) requestBody.dry_allowed_length = dry_allowed_length;
+		if (dry_penalty_last_n !== undefined) requestBody.dry_penalty_last_n = dry_penalty_last_n;
+
+		if (samplers !== undefined) {
+			requestBody.samplers =
+				typeof samplers === 'string'
+					? samplers.split(';').filter((s: string) => s.trim())
+					: samplers;
+		}
+
+		if (backend_sampling !== undefined) requestBody.backend_sampling = backend_sampling;
+
+		if (timings_per_token !== undefined) requestBody.timings_per_token = timings_per_token;
+
+		if (custom) {
+			try {
+				const customParams = typeof custom === 'string' ? JSON.parse(custom) : custom;
+				Object.assign(requestBody, customParams);
+			} catch (error) {
+				console.warn('Failed to parse custom parameters:', error);
+			}
+		}
+
+		try {
+			const headers: Record<string, string> = { ...getJsonHeaders() };
+			// tag streaming requests with the conversation id, this single header is the opt in for the
+			// server side replay buffer and powers discoverActiveStream on tab reopen. with an explicit
+			// model the ::model suffix keeps the per model session distinct
+			if (stream && conversationId) {
+				headers['X-Conversation-Id'] = streamIdentity(conversationId, options.model);
+			}
+
+			const response = await fetch(API_CHAT.COMPLETIONS, {
+				method: 'POST',
+				headers,
+				body: JSON.stringify(requestBody),
+				signal
+			});
+
+			if (!response.ok) {
+				const error = await ChatService.parseErrorResponse(response);
+
+				if (onError) {
+					onError(error);
+				}
+
+				throw error;
+			}
+
+			if (stream) {
+				await ChatService.handleStreamResponse(
+					response,
+					onChunk,
+					onComplete,
+					onError,
+					onReasoningChunk,
+					onToolCallChunk,
+					onModel,
+					onCompletionId,
+					onTimings,
+					conversationId,
+					signal,
+					onConnectionState,
+					options.model
+				);
+
+				return;
+			} else {
+				return ChatService.handleNonStreamResponse(
+					response,
+					onComplete,
+					onError,
+					onToolCallChunk,
+					onModel
+				);
+			}
+		} catch (error) {
+			if (isAbortError(error)) {
+				console.log('Chat completion request was aborted');
+				return;
+			}
+
+			let userFriendlyError: Error;
+
+			if (error instanceof Error) {
+				if (error.name === 'TypeError' && error.message.includes('fetch')) {
+					userFriendlyError = new Error(
+						'Unable to connect to server - please check if the server is running'
+					);
+					userFriendlyError.name = 'NetworkError';
+				} else if (error.message.includes('ECONNREFUSED')) {
+					userFriendlyError = new Error('Connection refused - server may be offline');
+					userFriendlyError.name = 'NetworkError';
+				} else if (error.message.includes('ETIMEDOUT')) {
+					userFriendlyError = new Error('Request timed out - the server took too long to respond');
+					userFriendlyError.name = 'TimeoutError';
+				} else {
+					userFriendlyError = error;
+				}
+			} else {
+				userFriendlyError = new Error('Unknown error occurred while sending message');
+			}
+
+			console.error('Error in sendMessage:', error);
+
+			if (onError) {
+				onError(userFriendlyError);
+			}
+
+			throw userFriendlyError;
+		}
+	}
+
+	/**
+	 * Checks whether all server slots are currently idle (not processing any requests).
+	 * Queries the /slots endpoint (requires --slots flag on the server).
+	 * Returns true if all slots are idle, false if any is processing.
+	 * If the endpoint is unavailable or errors out, returns true (best-effort fallback).
+	 *
+	 * @param signal - Optional AbortSignal to cancel the request if needed
+	 * @param model - Optional model name to check slots for (required in ROUTER mode)
+	 * @returns {Promise<boolean>} Promise that resolves to true if all slots are idle, false if any is processing
+	 */
+	static async areAllSlotsIdle(model?: string | null, signal?: AbortSignal): Promise<boolean> {
+		try {
+			const url = model ? `${API_SLOTS.LIST}?model=${encodeURIComponent(model)}` : API_SLOTS.LIST;
+			const res = await fetch(url, { signal });
+			if (!res.ok) return true;
+
+			const slots: { is_processing: boolean }[] = await res.json();
+			return slots.every((s) => !s.is_processing);
+		} catch {
+			return true;
+		}
+	}
+
+	/**
+	 * Ends the current reasoning block of a running completion, targeted by its
+	 * chat completion id (streamed back as `id`). Matching the completion rather
+	 * than a slot index avoids a TOCTOU: a finished completion simply matches
+	 * nothing server side. The model is carried so the router forwards to the
+	 * right child, single model ignores it. Returns true on success.
+	 */
+	static async stopReasoning(completionId: string, model?: string | null): Promise<boolean> {
+		if (!completionId) {
+			console.error(
+				'stopReasoning: no completion id for the active message, cannot target the running completion'
+			);
+			return false;
+		}
+
+		const body: Record<string, unknown> = {
+			id: completionId,
+			action: CONTROL_ACTION.END_REASONING
+		};
+		if (model) body.model = model;
+
+		try {
+			const res = await fetch(API_CHAT.CONTROL, {
+				method: 'POST',
+				headers: getJsonHeaders(),
+				body: JSON.stringify(body)
+			});
+
+			const data = await res.json().catch(() => null);
+			if (!res.ok || data?.success !== true) {
+				console.error('stopReasoning: control request failed', {
+					status: res.status,
+					completionId,
+					response: data
+				});
+				return false;
+			}
+			return true;
+		} catch (error) {
+			console.error('stopReasoning: control request threw', { completionId, error });
+			return false;
+		}
+	}
+
+	/**
+	 * Sends a fire-and-forget request to pre-encode the conversation in the server's KV cache.
+	 * After a response completes, this re-submits the full conversation
+	 * using n_predict=0 and stream=false so the server processes the prompt without generating tokens.
+	 * This warms the cache for the next turn, making it faster.
+	 *
+	 * When excludeReasoningFromContext is true, reasoning content is stripped from the messages
+	 * to match what sendMessage would send on the next turn (avoiding cache misses).
+	 * When false, reasoning_content is preserved so the cached prompt matches the next request.
+	 *
+	 * @param messages - The full conversation including the latest assistant response
+	 * @param model - Optional model name (required in ROUTER mode)
+	 * @param excludeReasoning - Whether to strip reasoning content (should match excludeReasoningFromContext setting)
+	 * @param signal - Optional AbortSignal to cancel the pre-encode request
+	 */
+	static async cancelServerStream(conversationId: string, model?: string | null): Promise<void> {
+		if (!conversationId) return;
+		try {
+			const id = streamIdentity(conversationId, model);
+			await fetch(`${API_STREAM.BASE}/${encodeURIComponent(id)}`, {
+				method: 'DELETE',
+				headers: getAuthHeaders()
+			});
+		} catch (e) {
+			console.warn('cancelServerStream failed:', e);
+		}
+	}
+
+	/**
+	 * Pick the running session to splice into when discoverActiveStream lists candidates for a
+	 * conversation. Finalized sessions are not candidates: their final content was already written
+	 * to the DB by the original onComplete handler, so attaching to them would replay a buffer that
+	 * may not match what the DB holds. A continue session's buffer holds only the appended deltas,
+	 * not the pre continue prefix, so replaying it as a fresh generation would erase the original.
+	 *
+	 * Among running sessions we tie break on the most recent started_at, which covers the case of
+	 * multiple inferences left running on the same conversation.
+	 */
+	static selectActiveStream(
+		sessions: ApiStreamSession[] | null | undefined
+	): ApiStreamSession | null {
+		if (!Array.isArray(sessions) || sessions.length === 0) {
+			return null;
+		}
+		const running = sessions.filter((s) => !s.is_done);
+		if (running.length === 0) {
+			return null;
+		}
+		return running.reduce((best, cur) => (cur.started_at > best.started_at ? cur : best));
+	}
+
+	// persist the running byte count and the frozen model for a conversation, a later visit
+	// resumes the SSE replay at the right offset under the same conv::model identity
+	static saveStreamState(
+		conversationId: string,
+		bytesReceived: number,
+		model?: string | null
+	): void {
+		if (!conversationId) return;
+		try {
+			const state: ResumableStreamState = {
+				bytesReceived,
+				updatedAt: Date.now(),
+				model: model ?? null
+			};
+			localStorage.setItem(streamStorageKey(conversationId), JSON.stringify(state));
+		} catch {
+			// localStorage may be full or disabled, silently ignore
+		}
+	}
+
+	static getStreamState(conversationId: string): ResumableStreamState | null {
+		if (!conversationId) return null;
+		try {
+			const raw = localStorage.getItem(streamStorageKey(conversationId));
+			if (!raw) return null;
+			const parsed = JSON.parse(raw) as ResumableStreamState;
+			if (!parsed || typeof parsed.bytesReceived !== 'number') return null;
+			return parsed;
+		} catch {
+			return null;
+		}
+	}
+
+	static clearStreamState(conversationId: string): void {
+		if (!conversationId) return;
+		try {
+			localStorage.removeItem(streamStorageKey(conversationId));
+		} catch {
+			// nothing to do
+		}
+	}
+
+	/**
+	 * Rebuild the stream identity for a resume. The model persisted at POST time wins, including a
+	 * stored null which means the POST carried no explicit model so the identity stays the bare conv
+	 * id. Only fall back to the caller supplied current model when nothing was persisted.
+	 */
+	static resumeStreamIdentity(
+		conversationId: string,
+		state: ResumableStreamState | null,
+		fallbackModel: string | null
+	): string {
+		const model = state && state.model !== undefined ? state.model : fallbackModel;
+		return streamIdentity(conversationId, model);
+	}
+
+	/**
+	 * Reconnect to an interrupted stream for this conversation. Returns the fetch Response so the
+	 * existing SSE parser drains it like a fresh stream. The server returns 200 on success, 404 if
+	 * no session exists for the conv_id, and 400 if the offset is below the dropped prefix.
+	 */
+	static async resumeStream(
+		conversationId: string,
+		signal?: AbortSignal,
+		model?: string | null
+	): Promise<Response | null> {
+		if (!conversationId) return null;
+		const state = ChatService.getStreamState(conversationId);
+		const from = state?.bytesReceived ?? 0;
+		const id = streamIdentity(conversationId, model);
+		const url = `${API_STREAM.BASE}/${encodeURIComponent(id)}?from=${from}`;
+		return await fetch(url, { method: 'GET', signal, headers: getAuthHeaders() });
+	}
+
+	static async preEncode(
+		messages: ApiChatMessageData[] | (DatabaseMessage & { extra?: DatabaseMessageExtra[] })[],
+		model?: string | null,
+		excludeReasoning?: boolean,
+		signal?: AbortSignal
+	): Promise<void> {
+		const normalizedMessages: ApiChatMessageData[] = (
+			await Promise.all(
+				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: { role: ChatRole; content: string | ApiChatMessageContentPart[] }) => {
+			if (msg.role === MessageRole.SYSTEM) {
+				const content = typeof msg.content === 'string' ? msg.content : '';
+
+				return content.trim().length > 0;
+			}
+
+			return true;
+		});
+
+		const requestBody: Record<string, unknown> = {
+			messages: normalizedMessages.map((msg: ApiChatMessageData) => {
+				const mapped: Record<string, unknown> = {
+					role: msg.role,
+					content: excludeReasoning ? ChatService.stripReasoningContent(msg.content) : msg.content,
+					tool_calls: msg.tool_calls,
+					tool_call_id: msg.tool_call_id
+				};
+
+				if (!excludeReasoning && msg.reasoning_content) {
+					mapped.reasoning_content = msg.reasoning_content;
+				}
+
+				return mapped;
+			}),
+			stream: false,
+			n_predict: 0
+		};
+
+		if (model) {
+			requestBody.model = model;
+		}
+
+		try {
+			await fetch(API_CHAT.COMPLETIONS, {
+				method: 'POST',
+				headers: getJsonHeaders(),
+				body: JSON.stringify(requestBody),
+				signal
+			});
+		} catch (error) {
+			if (!isAbortError(error)) {
+				console.warn('[ChatService] Pre-encode request failed:', error);
+			}
+		}
+	}
+
+	/**
+	 *
+	 *
+	 * Streaming
+	 *
+	 *
+	 */
+
+	/**
+	 * Handles streaming response from the chat completion API
+	 * @param response - The Response object from the fetch request
+	 * @param onChunk - Optional callback invoked for each content chunk received
+	 * @param onComplete - Optional callback invoked when the stream is complete with full response
+	 * @param onError - Optional callback invoked if an error occurs during streaming
+	 * @param onReasoningChunk - Optional callback invoked for each reasoning content chunk
+	 * @param conversationId - Optional conversation ID for per-conversation state tracking
+	 * @returns {Promise<void>} Promise that resolves when streaming is complete
+	 * @throws {Error} if the stream cannot be read or parsed
+	 */
+	static async handleStreamResponse(
+		response: Response,
+		onChunk?: (chunk: string) => void,
+		onComplete?: (
+			response: string,
+			reasoningContent?: string,
+			timings?: ChatMessageTimings,
+			toolCalls?: string
+		) => void,
+		onError?: (error: Error) => void,
+		onReasoningChunk?: (chunk: string) => void,
+		onToolCallChunk?: (chunk: string) => void,
+		onModel?: (model: string) => void,
+		onCompletionId?: (id: string) => void,
+		onTimings?: (timings?: ChatMessageTimings, promptProgress?: ChatMessagePromptProgress) => void,
+		conversationId?: string,
+		abortSignal?: AbortSignal,
+		onConnectionState?: (state: StreamConnectionState) => void,
+		streamModel?: string | null
+	): Promise<void> {
+		let reader = response.body?.getReader();
+
+		if (!reader) {
+			throw new Error('No response body');
+		}
+
+		// bytesParsed is the absolute server side buffer offset of the next byte to parse
+		// segmentStartOffset is the absolute offset where the current reader started, reset on resume
+		// segmentBytesRead is wire bytes read by the current reader
+		let bytesParsed = 0;
+		let segmentStartOffset = 0;
+		let segmentBytesRead = 0;
+		let lastByteAt = Date.now();
+		// each resume must produce at least one byte to be retried again
+		// if a resume returns 200 but yields nothing, we abandon
+		// since the session has a bounded size, the total number of retries is bounded by construction
+		let madeProgress = true;
+		const encoder = new TextEncoder();
+		if (conversationId) {
+			ChatService.saveStreamState(conversationId, 0, streamModel);
+		}
+		onConnectionState?.(StreamConnectionState.STREAMING);
+
+		let decoder = new TextDecoder();
+		let aggregatedContent = '';
+		let fullReasoningContent = '';
+		let aggregatedToolCalls: ApiChatCompletionToolCall[] = [];
+		let lastTimings: ChatMessageTimings | undefined;
+		let streamFinished = false;
+		let modelEmitted = false;
+		let idEmitted = false;
+		let toolCallIndexOffset = 0;
+		let hasOpenToolCallBatch = false;
+
+		const finalizeOpenToolCallBatch = () => {
+			if (!hasOpenToolCallBatch) {
+				return;
+			}
+
+			toolCallIndexOffset = aggregatedToolCalls.length;
+			hasOpenToolCallBatch = false;
+		};
+
+		const processToolCallDelta = (toolCalls?: ApiChatCompletionToolCallDelta[]) => {
+			if (!toolCalls || toolCalls.length === 0) {
+				return;
+			}
+
+			aggregatedToolCalls = ChatService.mergeToolCallDeltas(
+				aggregatedToolCalls,
+				toolCalls,
+				toolCallIndexOffset
+			);
+
+			if (aggregatedToolCalls.length === 0) {
+				return;
+			}
+
+			hasOpenToolCallBatch = true;
+
+			const serializedToolCalls = JSON.stringify(aggregatedToolCalls);
+
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
+				console.log('[ChatService] Aggregated tool calls:', serializedToolCalls);
+			}
+
+			if (!serializedToolCalls) {
+				return;
+			}
+
+			if (!abortSignal?.aborted) {
+				onToolCallChunk?.(serializedToolCalls);
+			}
+		};
+
+		const onVisibilityChange = () => {
+			if (typeof document === 'undefined') return;
+			if (document.visibilityState !== 'visible') return;
+			if (streamFinished) return;
+			if (!conversationId) return;
+			// the bytes have been quiet for too long, the OS likely killed the socket
+			// kicking the reader unblocks reader.read with done=true so the outer loop can resume
+			if (Date.now() - lastByteAt > STREAM_VISIBILITY_KICK_MS) {
+				reader!.cancel().catch(() => {});
+			}
+		};
+		if (typeof document !== 'undefined') {
+			document.addEventListener('visibilitychange', onVisibilityChange);
+		}
+
+		try {
+			let chunk = '';
+			// outer loop drives the resume cycle, swaps reader on premature end of stream
+			while (true) {
+				while (true) {
+					if (abortSignal?.aborted) break;
+
+					let done: boolean;
+					let value: Uint8Array | undefined;
+					try {
+						const r = await reader.read();
+						done = r.done;
+						value = r.value;
+					} catch (readErr) {
+						// reader.read() rejects with TypeError when the underlying connection drops
+						// instead of just resolving with done=true. treat it like done so the outer
+						// loop swaps reader via the resume path
+						if (isAbortError(readErr)) {
+							throw readErr;
+						}
+						console.warn('reader.read() rejected, treating as premature end:', readErr);
+						done = true;
+						value = undefined;
+					}
+					if (done) break;
+
+					if (abortSignal?.aborted) break;
+
+					if (value && value.byteLength > 0) {
+						segmentBytesRead += value.byteLength;
+						lastByteAt = Date.now();
+						if (!madeProgress) {
+							madeProgress = true;
+							onConnectionState?.(StreamConnectionState.STREAMING);
+						}
+					}
+
+					chunk += decoder.decode(value, { stream: true });
+					const lines = chunk.split(SSE_LINE_SEPARATOR);
+					chunk = lines.pop() || '';
+
+					// the persisted offset must point right after the last fully parsed line,
+					// the trailing `chunk` is partial bytes still waiting for a newline
+					if (conversationId) {
+						const tailBytes = encoder.encode(chunk).byteLength;
+						bytesParsed = segmentStartOffset + segmentBytesRead - tailBytes;
+						ChatService.saveStreamState(conversationId, bytesParsed, streamModel);
+					}
+
+					for (const line of lines) {
+						if (abortSignal?.aborted) break;
+
+						if (line.startsWith(SSE_DATA_PREFIX)) {
+							const data = line.slice(SSE_DATA_PREFIX.length).trim();
+							if (data === SSE_DONE_MARKER) {
+								streamFinished = true;
+
+								continue;
+							}
+
+							try {
+								const parsed: ApiChatCompletionStreamChunk = JSON.parse(data);
+								const choice = parsed.choices?.[0];
+								const content = choice?.delta?.content;
+								const reasoningContent = choice?.delta?.reasoning_content;
+								const toolCalls = choice?.delta?.tool_calls;
+								const timings = parsed.timings;
+								const promptProgress = parsed.prompt_progress;
+
+								const chunkModel = ChatService.extractModelName(parsed);
+								if (chunkModel && !modelEmitted) {
+									modelEmitted = true;
+									onModel?.(chunkModel);
+								}
+
+								if (parsed.id && !idEmitted) {
+									idEmitted = true;
+									onCompletionId?.(parsed.id);
+								}
+
+								if (promptProgress) {
+									ChatService.notifyTimings(undefined, promptProgress, onTimings);
+								}
+
+								if (timings) {
+									ChatService.notifyTimings(timings, promptProgress, onTimings);
+									lastTimings = timings;
+								}
+
+								if (content) {
+									finalizeOpenToolCallBatch();
+									aggregatedContent += content;
+									if (!abortSignal?.aborted) {
+										onChunk?.(content);
+									}
+								}
+
+								if (reasoningContent) {
+									finalizeOpenToolCallBatch();
+									fullReasoningContent += reasoningContent;
+									if (!abortSignal?.aborted) {
+										onReasoningChunk?.(reasoningContent);
+									}
+								}
+
+								processToolCallDelta(toolCalls);
+							} catch (e) {
+								console.error('Error parsing JSON chunk:', e);
+							}
+						}
+					}
+
+					if (abortSignal?.aborted) break;
+					if (streamFinished) break;
+				}
+
+				// inner reader done, decide whether to try a resume
+				if (abortSignal?.aborted) break;
+				if (streamFinished) break;
+				if (!conversationId) break;
+
+				if (!madeProgress) {
+					onConnectionState?.(StreamConnectionState.LOST);
+					onError?.(new Error('Stream resume produced no new bytes, giving up'));
+					break;
+				}
+
+				onConnectionState?.(StreamConnectionState.RESUMING);
+				madeProgress = false;
+
+				// the server resends starting at bytesParsed, discard any partial line we held, it
+				// will be retransmitted from a clean line boundary. reuse the frozen model, not the
+				// live dropdown
+				const resumeResp = await ChatService.resumeStream(
+					conversationId,
+					abortSignal,
+					streamModel
+				).catch(() => null);
+				// an abort landing during the resume request is intentional, not a lost connection
+				if (abortSignal?.aborted) break;
+				if (!resumeResp || resumeResp.status !== 200) {
+					onConnectionState?.(StreamConnectionState.LOST);
+					onError?.(new Error('Stream connection lost and could not be resumed'));
+					break;
+				}
+				const newReader = resumeResp.body?.getReader();
+				if (!newReader) break;
+
+				try {
+					reader.releaseLock();
+				} catch {
+					/* ignore */
+				}
+				reader = newReader;
+				decoder = new TextDecoder();
+				chunk = '';
+				segmentStartOffset = bytesParsed;
+				segmentBytesRead = 0;
+				lastByteAt = Date.now();
+			}
+
+			if (abortSignal?.aborted) return;
+
+			if (streamFinished) {
+				finalizeOpenToolCallBatch();
+
+				if (conversationId) {
+					ChatService.clearStreamState(conversationId);
+				}
+
+				const finalToolCalls =
+					aggregatedToolCalls.length > 0 ? JSON.stringify(aggregatedToolCalls) : undefined;
+
+				onComplete?.(
+					aggregatedContent,
+					fullReasoningContent || undefined,
+					lastTimings,
+					finalToolCalls
+				);
+			}
+		} catch (error) {
+			const err = error instanceof Error ? error : new Error('Stream error');
+
+			onError?.(err);
+
+			throw err;
+		} finally {
+			if (typeof document !== 'undefined') {
+				document.removeEventListener('visibilitychange', onVisibilityChange);
+			}
+			try {
+				reader.releaseLock();
+			} catch {
+				/* ignore */
+			}
+		}
+	}
+
+	/**
+	 * Handles non-streaming response from the chat completion API.
+	 * Parses the JSON response and extracts the generated content.
+	 *
+	 * @param response - The fetch Response object containing the JSON data
+	 * @param onComplete - Optional callback invoked when response is successfully parsed
+	 * @param onError - Optional callback invoked if an error occurs while parsing
+	 * @returns {Promise<string>} Promise that resolves to the generated content string
+	 * @throws {Error} if the response cannot be parsed or is malformed
+	 */
+	private static async handleNonStreamResponse(
+		response: Response,
+		onComplete?: (
+			response: string,
+			reasoningContent?: string,
+			timings?: ChatMessageTimings,
+			toolCalls?: string
+		) => void,
+		onError?: (error: Error) => void,
+		onToolCallChunk?: (chunk: string) => void,
+		onModel?: (model: string) => void
+	): Promise<string> {
+		try {
+			const responseText = await response.text();
+
+			if (!responseText.trim()) {
+				const noResponseError = new Error('No response received from server. Please try again.');
+
+				throw noResponseError;
+			}
+
+			const data: ApiChatCompletionResponse = JSON.parse(responseText);
+
+			const responseModel = ChatService.extractModelName(data);
+			if (responseModel) {
+				onModel?.(responseModel);
+			}
+
+			const content = data.choices[0]?.message?.content || '';
+			const reasoningContent = data.choices[0]?.message?.reasoning_content;
+			const toolCalls = data.choices[0]?.message?.tool_calls;
+
+			let serializedToolCalls: string | undefined;
+
+			if (toolCalls && toolCalls.length > 0) {
+				const mergedToolCalls = ChatService.mergeToolCallDeltas([], toolCalls);
+
+				if (mergedToolCalls.length > 0) {
+					serializedToolCalls = JSON.stringify(mergedToolCalls);
+					if (serializedToolCalls) {
+						onToolCallChunk?.(serializedToolCalls);
+					}
+				}
+			}
+
+			if (!content.trim() && !serializedToolCalls) {
+				const noResponseError = new Error('No response received from server. Please try again.');
+
+				throw noResponseError;
+			}
+
+			onComplete?.(content, reasoningContent, undefined, serializedToolCalls);
+
+			return content;
+		} catch (error) {
+			const err = error instanceof Error ? error : new Error('Parse error');
+
+			onError?.(err);
+
+			throw err;
+		}
+	}
+
+	/**
+	 * Merges tool call deltas into an existing array of tool calls.
+	 * Handles both existing and new tool calls, updating existing ones and adding new ones.
+	 *
+	 * @param existing - The existing array of tool calls to merge into
+	 * @param deltas - The array of tool call deltas to merge
+	 * @param indexOffset - Optional offset to apply to the index of new tool calls
+	 * @returns {ApiChatCompletionToolCall[]} The merged array of tool calls
+	 */
+	private static mergeToolCallDeltas(
+		existing: ApiChatCompletionToolCall[],
+		deltas: ApiChatCompletionToolCallDelta[],
+		indexOffset = 0
+	): ApiChatCompletionToolCall[] {
+		const result = existing.map((call) => ({
+			...call,
+			function: call.function ? { ...call.function } : undefined
+		}));
+
+		for (const delta of deltas) {
+			const index =
+				typeof delta.index === 'number' && delta.index >= 0
+					? delta.index + indexOffset
+					: result.length;
+
+			while (result.length <= index) {
+				result.push({ function: undefined });
+			}
+
+			const target = result[index]!;
+
+			if (delta.id) {
+				target.id = delta.id;
+			}
+
+			if (delta.type) {
+				target.type = delta.type;
+			}
+
+			if (delta.function) {
+				const fn = target.function ? { ...target.function } : {};
+
+				if (delta.function.name) {
+					fn.name = delta.function.name;
+				}
+
+				if (delta.function.arguments) {
+					fn.arguments = (fn.arguments ?? '') + delta.function.arguments;
+				}
+
+				target.function = fn;
+			}
+		}
+
+		return result;
+	}
+
+	/**
+	 *
+	 *
+	 * Conversion
+	 *
+	 *
+	 */
+
+	/**
+	 * Converts a database message with attachments to API chat message format.
+	 * Processes various attachment types (images, text files, PDFs) and formats them
+	 * as content parts suitable for the chat completion API.
+	 *
+	 * @param message - Database message object with optional extra attachments
+	 * @param message.content - The text content of the message
+	 * @param message.role - The role of the message sender (user, assistant, system)
+	 * @param message.extra - Optional array of message attachments (images, files, etc.)
+	 * @returns {ApiChatMessageData} object formatted for the chat completion API
+	 * @static
+	 */
+	static async convertDbMessageToApiChatMessageData(
+		message: DatabaseMessage & { extra?: DatabaseMessageExtra[] }
+	): Promise<ApiChatMessageData> {
+		// Handle tool result messages (role: 'tool')
+		if (message.role === MessageRole.TOOL && message.toolCallId) {
+			return {
+				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 (message.reasoningContent) {
+				result.reasoning_content = message.reasoningContent;
+			}
+
+			if (toolCalls && toolCalls.length > 0) {
+				result.tool_calls = toolCalls;
+			}
+
+			return result;
+		}
+
+		const contentParts: ApiChatMessageContentPart[] = [];
+
+		const textFiles = message.extra.filter(
+			(extra: DatabaseMessageExtra): extra is DatabaseMessageExtraTextFile =>
+				extra.type === AttachmentType.TEXT
+		);
+
+		for (const textFile of textFiles) {
+			contentParts.push({
+				type: ContentPartType.TEXT,
+				text: formatAttachmentText('File', textFile.name, textFile.content)
+			});
+		}
+
+		// Handle legacy 'context' type from the old UI (pasted content)
+		const legacyContextFiles = message.extra.filter(
+			(extra: DatabaseMessageExtra): extra is DatabaseMessageExtraLegacyContext =>
+				extra.type === AttachmentType.LEGACY_CONTEXT
+		);
+
+		for (const legacyContextFile of legacyContextFiles) {
+			contentParts.push({
+				type: ContentPartType.TEXT,
+				text: formatAttachmentText('File', legacyContextFile.name, legacyContextFile.content)
+			});
+		}
+
+		const imageFiles = message.extra.filter(
+			(extra: DatabaseMessageExtra): extra is DatabaseMessageExtraImageFile =>
+				extra.type === AttachmentType.IMAGE
+		);
+
+		for (const image of imageFiles) {
+			const maxImageResolution = settingsStore.getConfig(SETTINGS_KEYS.MAX_IMAGE_RESOLUTION);
+
+			// Caps the resolution and bakes the jpeg exif orientation in one pass,
+			// untouched images pass through as is
+			const base64Url = await capImageDataURLSize(image.base64Url, maxImageResolution);
+
+			contentParts.push({
+				type: ContentPartType.IMAGE_URL,
+				image_url: { url: base64Url }
+			});
+		}
+
+		const audioFiles = message.extra.filter(
+			(extra: DatabaseMessageExtra): extra is DatabaseMessageExtraAudioFile =>
+				extra.type === AttachmentType.AUDIO
+		);
+
+		for (const audio of audioFiles) {
+			contentParts.push({
+				type: ContentPartType.INPUT_AUDIO,
+				input_audio: {
+					data: audio.base64Data,
+					format: getAudioInputFormat(audio.mimeType)
+				}
+			});
+		}
+
+		if (message.content) {
+			contentParts.push({
+				type: ContentPartType.TEXT,
+				text: message.content
+			});
+		}
+
+		const videoFiles = message.extra.filter(
+			(extra: DatabaseMessageExtra): extra is DatabaseMessageExtraVideoFile =>
+				extra.type === AttachmentType.VIDEO
+		);
+
+		for (const video of videoFiles) {
+			contentParts.push({
+				type: ContentPartType.INPUT_VIDEO,
+				input_video: {
+					data: video.base64Data,
+					format: video.mimeType.includes('mp4')
+						? 'mp4'
+						: video.mimeType.includes('ogg')
+							? 'ogg'
+							: 'auto'
+				}
+			});
+		}
+
+		const pdfFiles = message.extra.filter(
+			(extra: DatabaseMessageExtra): extra is DatabaseMessageExtraPdfFile =>
+				extra.type === AttachmentType.PDF
+		);
+
+		for (const pdfFile of pdfFiles) {
+			if (pdfFile.processedAsImages && pdfFile.images) {
+				for (let i = 0; i < pdfFile.images.length; i++) {
+					contentParts.push({
+						type: ContentPartType.IMAGE_URL,
+						image_url: { url: pdfFile.images[i] }
+					});
+				}
+			} else {
+				contentParts.push({
+					type: ContentPartType.TEXT,
+					text: formatAttachmentText(ATTACHMENT_LABEL_PDF_FILE, pdfFile.name, pdfFile.content)
+				});
+			}
+		}
+
+		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 (message.reasoningContent) {
+			result.reasoning_content = message.reasoningContent;
+		}
+		if (toolCalls && toolCalls.length > 0) {
+			result.tool_calls = toolCalls;
+		}
+		return result;
+	}
+
+	/**
+	 *
+	 *
+	 * Utilities
+	 *
+	 *
+	 */
+
+	/**
+	 * Strips legacy inline reasoning content tags from message content.
+	 * Handles both plain string content and multipart content arrays.
+	 */
+	private static stripReasoningContent(
+		content: string | ApiChatMessageContentPart[]
+	): string | ApiChatMessageContentPart[] {
+		const stripFromString = (text: string): string =>
+			text.replace(LEGACY_AGENTIC_REGEX.REASONING_BLOCK, '').trim();
+
+		if (typeof content === 'string') {
+			return stripFromString(content);
+		}
+
+		return content.map((part) => {
+			if (part.type === ContentPartType.TEXT && part.text) {
+				return { ...part, text: stripFromString(part.text) };
+			}
+			return part;
+		});
+	}
+
+	/**
+	 * Parses error response and creates appropriate error with context information
+	 * @param response - HTTP response object
+	 * @returns Promise<Error> - Parsed error with context info if available
+	 */
+	private static async parseErrorResponse(
+		response: Response
+	): Promise<Error & { contextInfo?: { n_prompt_tokens: number; n_ctx: number } }> {
+		try {
+			const errorText = await response.text();
+			const errorData: ApiErrorResponse = JSON.parse(errorText);
+
+			const message = errorData.error?.message || 'Unknown server error';
+			const error = new Error(message) as Error & {
+				contextInfo?: { n_prompt_tokens: number; n_ctx: number };
+			};
+			error.name = response.status === 400 ? 'ServerError' : 'HttpError';
+
+			if (errorData.error && 'n_prompt_tokens' in errorData.error && 'n_ctx' in errorData.error) {
+				error.contextInfo = {
+					n_prompt_tokens: errorData.error.n_prompt_tokens,
+					n_ctx: errorData.error.n_ctx
+				};
+			}
+
+			return error;
+		} catch {
+			const fallback = new Error(
+				`Server error (${response.status}): ${response.statusText}`
+			) as Error & {
+				contextInfo?: { n_prompt_tokens: number; n_ctx: number };
+			};
+			fallback.name = 'HttpError';
+
+			return fallback;
+		}
+	}
+
+	/**
+	 * Extracts model name from Chat Completions API response data.
+	 * Handles various response formats including streaming chunks and final responses.
+	 *
+	 * WORKAROUND: In single model mode, llama-server returns a default/incorrect model name
+	 * in the response. We override it with the actual model name from serverStore.
+	 *
+	 * @param data - Raw response data from the Chat Completions API
+	 * @returns Model name string if found, undefined otherwise
+	 * @private
+	 */
+	private static extractModelName(data: unknown): string | undefined {
+		const asRecord = (value: unknown): Record<string, unknown> | undefined => {
+			return typeof value === 'object' && value !== null
+				? (value as Record<string, unknown>)
+				: undefined;
+		};
+
+		const getTrimmedString = (value: unknown): string | undefined => {
+			return typeof value === 'string' && value.trim() ? value.trim() : undefined;
+		};
+
+		const root = asRecord(data);
+		if (!root) return undefined;
+
+		// 1) root (some implementations provide `model` at the top level)
+		const rootModel = getTrimmedString(root.model);
+		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;
+		}
+
+		// priority: delta.model (first chunk) else message.model (final response)
+		const deltaModel = getTrimmedString(asRecord(firstChoice.delta)?.model);
+		if (deltaModel) {
+			return deltaModel;
+		}
+
+		const messageModel = getTrimmedString(asRecord(firstChoice.message)?.model);
+		if (messageModel) {
+			return messageModel;
+		}
+
+		// avoid guessing from non-standard locations (metadata, etc.)
+		return undefined;
+	}
+
+	/**
+	 * Calls the onTimings callback with timing data from streaming response.
+	 *
+	 * @param timings - Timing information from the Chat Completions API response
+	 * @param promptProgress - Prompt processing progress data
+	 * @param onTimingsCallback - Callback function to invoke with timing data
+	 * @private
+	 */
+	private static notifyTimings(
+		timings: ChatMessageTimings | undefined,
+		promptProgress: ChatMessagePromptProgress | undefined,
+		onTimingsCallback:
+			| ((timings?: ChatMessageTimings, promptProgress?: ChatMessagePromptProgress) => void)
+			| undefined
+	): void {
+		if (!onTimingsCallback || (!timings && !promptProgress)) return;
+
+		onTimingsCallback(timings, promptProgress);
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/services/database.service.ts b/backend/llama.cpp/tools/ui/src/lib/services/database.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3338439bbec1fd0a2b51259b019b95ae14991fee
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/services/database.service.ts
@@ -0,0 +1,531 @@
+import Dexie, { type EntityTable } from 'dexie';
+import { findDescendantMessages, uuid, filterByLeafNodeId } from '$lib/utils';
+import { IDXDB_TABLES, IDXDB_STORES, STORAGE_APP_NAME } from '$lib/constants';
+import { MessageRole } from '$lib/enums';
+import type { McpServerOverride } from '$lib/types/database';
+
+class LlamaUiDatabase extends Dexie {
+	[IDXDB_TABLES.conversations]!: EntityTable<DatabaseConversation, string>;
+	[IDXDB_TABLES.messages]!: EntityTable<DatabaseMessage, string>;
+
+	constructor() {
+		super(STORAGE_APP_NAME);
+
+		this.version(1).stores(IDXDB_STORES);
+	}
+}
+
+const db = new LlamaUiDatabase();
+
+export class DatabaseService {
+	/**
+	 *
+	 *
+	 * Conversations
+	 *
+	 *
+	 */
+
+	/**
+	 * Creates a new conversation.
+	 *
+	 * @param name - Name of the conversation
+	 * @returns The created conversation
+	 */
+	static async createConversation(name: string): Promise<DatabaseConversation> {
+		const conversation: DatabaseConversation = {
+			id: uuid(),
+			name,
+			lastModified: Date.now(),
+			currNode: ''
+		};
+
+		await db[IDXDB_TABLES.conversations].add(conversation);
+		return conversation;
+	}
+
+	/**
+	 *
+	 *
+	 * Messages
+	 *
+	 *
+	 */
+
+	/**
+	 * Creates a new message branch by adding a message and updating parent/child relationships.
+	 * Also updates the conversation's currNode to point to the new message.
+	 *
+	 * @param message - Message to add (without id)
+	 * @param parentId - Parent message ID to attach to
+	 * @returns The created message
+	 */
+	static async createMessageBranch(
+		message: Omit<DatabaseMessage, 'id'>,
+		parentId: string | null
+	): Promise<DatabaseMessage> {
+		return await db.transaction(
+			'rw',
+			[db[IDXDB_TABLES.conversations], db[IDXDB_TABLES.messages]],
+			async () => {
+				// Handle null parent (root message case)
+				if (parentId !== null) {
+					const parentMessage = await db[IDXDB_TABLES.messages].get(parentId);
+					if (!parentMessage) {
+						throw new Error(`Parent message ${parentId} not found`);
+					}
+				}
+
+				const newMessage: DatabaseMessage = {
+					...message,
+					id: uuid(),
+					parent: parentId,
+					toolCalls: message.toolCalls ?? '',
+					children: []
+				};
+
+				await db[IDXDB_TABLES.messages].add(newMessage);
+
+				// Update parent's children array if parent exists
+				if (parentId !== null) {
+					const parentMessage = await db[IDXDB_TABLES.messages].get(parentId);
+					if (parentMessage) {
+						await db[IDXDB_TABLES.messages].update(parentId, {
+							children: [...parentMessage.children, newMessage.id]
+						});
+					}
+				}
+
+				await this.updateConversation(message.convId, {
+					currNode: newMessage.id
+				});
+
+				return newMessage;
+			}
+		);
+	}
+
+	/**
+	 * Creates a root message for a new conversation.
+	 * Root messages are not displayed but serve as the tree root for branching.
+	 *
+	 * @param convId - Conversation ID
+	 * @returns The created root message
+	 */
+	static async createRootMessage(convId: string): Promise<string> {
+		const rootMessage: DatabaseMessage = {
+			id: uuid(),
+			convId,
+			type: 'root',
+			timestamp: Date.now(),
+			role: MessageRole.SYSTEM,
+			content: '',
+			parent: null,
+			toolCalls: '',
+			children: []
+		};
+
+		await db[IDXDB_TABLES.messages].add(rootMessage);
+		return rootMessage.id;
+	}
+
+	/**
+	 * Creates a system prompt message for a conversation.
+	 *
+	 * @param convId - Conversation ID
+	 * @param systemPrompt - The system prompt content (must be non-empty)
+	 * @param parentId - Parent message ID (typically the root message)
+	 * @returns The created system message
+	 * @throws Error if systemPrompt is empty
+	 */
+	static async createSystemMessage(
+		convId: string,
+		systemPrompt: string,
+		parentId: string
+	): Promise<DatabaseMessage> {
+		const trimmedPrompt = systemPrompt.trim();
+		if (!trimmedPrompt) {
+			throw new Error('Cannot create system message with empty content');
+		}
+
+		const systemMessage: DatabaseMessage = {
+			id: uuid(),
+			convId,
+			type: MessageRole.SYSTEM,
+			timestamp: Date.now(),
+			role: MessageRole.SYSTEM,
+			content: trimmedPrompt,
+			parent: parentId,
+			children: []
+		};
+
+		await db[IDXDB_TABLES.messages].add(systemMessage);
+
+		const parentMessage = await db[IDXDB_TABLES.messages].get(parentId);
+		if (parentMessage) {
+			await db[IDXDB_TABLES.messages].update(parentId, {
+				children: [...parentMessage.children, systemMessage.id]
+			});
+		}
+
+		return systemMessage;
+	}
+
+	/**
+	 * Deletes a conversation and all its messages.
+	 *
+	 * @param id - Conversation ID
+	 */
+	static async deleteConversation(
+		id: string,
+		options?: { deleteWithForks?: boolean }
+	): Promise<void> {
+		await db.transaction(
+			'rw',
+			[db[IDXDB_TABLES.conversations], db[IDXDB_TABLES.messages]],
+			async () => {
+				if (options?.deleteWithForks) {
+					// Recursively collect all descendant IDs
+					const idsToDelete: string[] = [];
+					const queue = [id];
+
+					while (queue.length > 0) {
+						const parentId = queue.pop()!;
+						const children = await db[IDXDB_TABLES.conversations]
+							.filter((c) => c.forkedFromConversationId === parentId)
+							.toArray();
+
+						for (const child of children) {
+							idsToDelete.push(child.id);
+							queue.push(child.id);
+						}
+					}
+
+					for (const forkId of idsToDelete) {
+						await db[IDXDB_TABLES.conversations].delete(forkId);
+						await db[IDXDB_TABLES.messages].where('convId').equals(forkId).delete();
+					}
+				} else {
+					// Reparent direct children to deleted conv's parent
+					const conv = await db[IDXDB_TABLES.conversations].get(id);
+					const newParent = conv?.forkedFromConversationId;
+					const directChildren = await db[IDXDB_TABLES.conversations]
+						.filter((c) => c.forkedFromConversationId === id)
+						.toArray();
+
+					for (const child of directChildren) {
+						await db[IDXDB_TABLES.conversations].update(child.id, {
+							forkedFromConversationId: newParent ?? undefined
+						});
+					}
+				}
+
+				await db[IDXDB_TABLES.conversations].delete(id);
+				await db[IDXDB_TABLES.messages].where('convId').equals(id).delete();
+			}
+		);
+	}
+
+	/**
+	 * Deletes a message and removes it from its parent's children array.
+	 *
+	 * @param messageId - ID of the message to delete
+	 */
+	static async deleteMessage(messageId: string): Promise<void> {
+		await db.transaction('rw', db[IDXDB_TABLES.messages], async () => {
+			const message = await db[IDXDB_TABLES.messages].get(messageId);
+			if (!message) return;
+
+			// Remove this message from its parent's children array
+			if (message.parent) {
+				const parent = await db[IDXDB_TABLES.messages].get(message.parent);
+				if (parent) {
+					parent.children = parent.children.filter((childId: string) => childId !== messageId);
+					await db[IDXDB_TABLES.messages].put(parent);
+				}
+			}
+
+			// Delete the message
+			await db[IDXDB_TABLES.messages].delete(messageId);
+		});
+	}
+
+	/**
+	 * Deletes a message and all its descendant messages (cascading deletion).
+	 * This removes the entire branch starting from the specified message.
+	 *
+	 * @param conversationId - ID of the conversation containing the message
+	 * @param messageId - ID of the root message to delete (along with all descendants)
+	 * @returns Array of all deleted message IDs
+	 */
+	static async deleteMessageCascading(
+		conversationId: string,
+		messageId: string
+	): Promise<string[]> {
+		return await db.transaction('rw', db[IDXDB_TABLES.messages], async () => {
+			// Get all messages in the conversation to find descendants
+			const allMessages = await db[IDXDB_TABLES.messages]
+				.where('convId')
+				.equals(conversationId)
+				.toArray();
+
+			// Find all descendant messages
+			const descendants = findDescendantMessages(allMessages, messageId);
+			const allToDelete = [messageId, ...descendants];
+
+			// Get the message to delete for parent cleanup
+			const message = await db[IDXDB_TABLES.messages].get(messageId);
+			if (message && message.parent) {
+				const parent = await db[IDXDB_TABLES.messages].get(message.parent);
+				if (parent) {
+					parent.children = parent.children.filter((childId: string) => childId !== messageId);
+					await db[IDXDB_TABLES.messages].put(parent);
+				}
+			}
+
+			// Delete all messages in the branch
+			await db[IDXDB_TABLES.messages].bulkDelete(allToDelete);
+
+			return allToDelete;
+		});
+	}
+
+	/**
+	 * Gets all conversations, sorted by last modified time (newest first).
+	 *
+	 * @returns Array of conversations
+	 */
+	static async getAllConversations(): Promise<DatabaseConversation[]> {
+		return await db[IDXDB_TABLES.conversations].orderBy('lastModified').reverse().toArray();
+	}
+
+	/**
+	 * Gets a conversation by ID.
+	 *
+	 * @param id - Conversation ID
+	 * @returns The conversation if found, otherwise undefined
+	 */
+	static async getConversation(id: string): Promise<DatabaseConversation | undefined> {
+		return await db[IDXDB_TABLES.conversations].get(id);
+	}
+
+	/**
+	 * Gets all messages in a conversation, sorted by timestamp (oldest first).
+	 *
+	 * @param convId - Conversation ID
+	 * @returns Array of messages in the conversation
+	 */
+	static async getConversationMessages(convId: string): Promise<DatabaseMessage[]> {
+		return await db[IDXDB_TABLES.messages].where('convId').equals(convId).sortBy('timestamp');
+	}
+
+	/**
+	 * Updates a conversation.
+	 *
+	 * @param id - Conversation ID
+	 * @param updates - Partial updates to apply
+	 * @returns Promise that resolves when the conversation is updated
+	 */
+	static async updateConversation(
+		id: string,
+		updates: Partial<Omit<DatabaseConversation, 'id'>>
+	): Promise<void> {
+		await db[IDXDB_TABLES.conversations].update(id, {
+			...updates,
+			lastModified: Date.now()
+		});
+	}
+
+	/**
+	 *
+	 *
+	 * Navigation
+	 *
+	 *
+	 */
+
+	/**
+	 * Toggles the pinned status of a conversation.
+	 *
+	 * @param id - Conversation ID
+	 * @returns The new pinned status
+	 */
+	static async toggleConversationPin(id: string): Promise<boolean> {
+		const conversation = await db.conversations.get(id);
+		if (!conversation) {
+			throw new Error(`Conversation ${id} not found`);
+		}
+		const newPinnedState = !conversation.pinned;
+		await this.updateConversation(id, { pinned: newPinnedState });
+		return newPinnedState;
+	}
+
+	/**
+	 * Updates the conversation's current node (active branch).
+	 * This determines which conversation path is currently being viewed.
+	 *
+	 * @param convId - Conversation ID
+	 * @param nodeId - Message ID to set as current node
+	 */
+	static async updateCurrentNode(convId: string, nodeId: string): Promise<void> {
+		await this.updateConversation(convId, {
+			currNode: nodeId
+		});
+	}
+
+	/**
+	 * Updates a message.
+	 *
+	 * @param id - Message ID
+	 * @param updates - Partial updates to apply
+	 * @returns Promise that resolves when the message is updated
+	 */
+	static async updateMessage(
+		id: string,
+		updates: Partial<Omit<DatabaseMessage, 'id'>>
+	): Promise<void> {
+		await db[IDXDB_TABLES.messages].update(id, updates);
+	}
+
+	/**
+	 *
+	 *
+	 * Import
+	 *
+	 *
+	 */
+
+	/**
+	 * Imports multiple conversations and their messages.
+	 * Skips conversations that already exist.
+	 *
+	 * @param data - Array of { conv, messages } objects
+	 */
+	static async importConversations(
+		data: { conv: DatabaseConversation; messages: DatabaseMessage[] }[]
+	): Promise<{ imported: number; skipped: number }> {
+		let importedCount = 0;
+		let skippedCount = 0;
+
+		return await db.transaction(
+			'rw',
+			[db[IDXDB_TABLES.conversations], db[IDXDB_TABLES.messages]],
+			async () => {
+				for (const item of data) {
+					const { conv, messages } = item;
+
+					const existing = await db[IDXDB_TABLES.conversations].get(conv.id);
+					if (existing) {
+						console.warn(`Conversation "${conv.name}" already exists, skipping...`);
+						skippedCount++;
+						continue;
+					}
+
+					await db[IDXDB_TABLES.conversations].add(conv);
+					for (const msg of messages) {
+						await db[IDXDB_TABLES.messages].put(msg);
+					}
+
+					importedCount++;
+				}
+
+				return { imported: importedCount, skipped: skippedCount };
+			}
+		);
+	}
+
+	/**
+	 *
+	 *
+	 * Forking
+	 *
+	 *
+	 */
+
+	/**
+	 * Forks a conversation at a specific message, creating a new conversation
+	 * containing all messages from the root up to (and including) the target message.
+	 *
+	 * @param sourceConvId - The source conversation ID
+	 * @param atMessageId - The message ID to fork at (the new conversation ends here)
+	 * @param options - Fork options (name and whether to include attachments)
+	 * @returns The newly created conversation
+	 */
+	static async forkConversation(
+		sourceConvId: string,
+		atMessageId: string,
+		options: { name: string; includeAttachments: boolean }
+	): Promise<DatabaseConversation> {
+		return await db.transaction(
+			'rw',
+			[db[IDXDB_TABLES.conversations], db[IDXDB_TABLES.messages]],
+			async () => {
+				const sourceConv = await db[IDXDB_TABLES.conversations].get(sourceConvId);
+				if (!sourceConv) {
+					throw new Error(`Source conversation ${sourceConvId} not found`);
+				}
+
+				const allMessages = await db[IDXDB_TABLES.messages]
+					.where('convId')
+					.equals(sourceConvId)
+					.toArray();
+
+				const pathMessages = filterByLeafNodeId(
+					allMessages,
+					atMessageId,
+					true
+				) as DatabaseMessage[];
+				if (pathMessages.length === 0) {
+					throw new Error(`Could not resolve message path to ${atMessageId}`);
+				}
+
+				const idMap = new Map<string, string>();
+
+				for (const msg of pathMessages) {
+					idMap.set(msg.id, uuid());
+				}
+
+				const newConvId = uuid();
+				const clonedMessages: DatabaseMessage[] = pathMessages.map((msg) => {
+					const newId = idMap.get(msg.id)!;
+					const newParent = msg.parent ? (idMap.get(msg.parent) ?? null) : null;
+					const newChildren = msg.children
+						.filter((childId: string) => idMap.has(childId))
+						.map((childId: string) => idMap.get(childId)!);
+
+					return {
+						...msg,
+						id: newId,
+						convId: newConvId,
+						parent: newParent,
+						children: newChildren,
+						extra: options.includeAttachments ? msg.extra : undefined
+					};
+				});
+
+				const lastClonedMessage = clonedMessages[clonedMessages.length - 1];
+				const newConv: DatabaseConversation = {
+					id: newConvId,
+					name: options.name,
+					lastModified: Date.now(),
+					currNode: lastClonedMessage.id,
+					forkedFromConversationId: sourceConvId,
+					mcpServerOverrides: sourceConv.mcpServerOverrides
+						? sourceConv.mcpServerOverrides.map((o: McpServerOverride) => ({
+								serverId: o.serverId,
+								enabled: o.enabled
+							}))
+						: undefined
+				};
+
+				await db[IDXDB_TABLES.conversations].add(newConv);
+
+				for (const msg of clonedMessages) {
+					await db[IDXDB_TABLES.messages].add(msg);
+				}
+
+				return newConv;
+			}
+		);
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/services/index.ts b/backend/llama.cpp/tools/ui/src/lib/services/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..386f740b8f04a4f1d5bcb11a9edae7ebf0f08e85
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/services/index.ts
@@ -0,0 +1,333 @@
+/**
+ *
+ * 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';
+
+/**
+ * **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 UI setting keys to server parameter keys
+ *
+ * @see settingsStore in stores/settings.svelte.ts — primary consumer for settings sync
+ * @see SettingsChatParameterSourceIndicator — 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';
+
+/**
+ * **SandboxService** - Frontend JavaScript execution in a browser sandbox
+ *
+ * Stateless executor for the run_javascript frontend tool. Model generated
+ * code runs in a Web Worker spawned inside a sandboxed iframe with an opaque
+ * origin: no access to the app origin, its storage or its API, and outgoing
+ * requests carry a null origin. The code never touches a main thread, so the
+ * parent enforces the timeout by removing the iframe, which terminates the
+ * worker at the browser level.
+ *
+ * **Architecture & Relationships:**
+ * - **SandboxService** (this class): Stateless sandbox execution
+ * - **toolsStore**: Exposes the tool definition when the sandbox is enabled
+ * - **agenticStore**: Dispatches ToolSource.FRONTEND calls here
+ *
+ * @see SANDBOX_TOOL_DEFINITION in constants/sandbox.ts - tool schema sent to the LLM
+ * @see agenticStore in stores/agentic.svelte.ts - tool dispatch
+ */
+export { SandboxService } from './sandbox.service';
+
+/**
+ * **RouterService** — Dynamic route URL construction utility
+ *
+ * Stateless utility for building dynamic route URLs from ROUTES base paths.
+ * Static routes (START, NEW_CHAT, MCP_SERVERS) live in ROUTES constants;
+ * dynamic routes (CHAT, SETTINGS) are constructed here by appending parameters.
+ *
+ * **Architecture & Relationships:**
+ * - **RouterService** (this class): Stateless URL construction
+ *   - Builds dynamic route URLs from ROUTES base paths
+ *   - No side effects — receives route parameters, returns route strings
+ *
+ * - **ROUTES constant** (constants/routes.ts): Static route base paths
+ * - **All components/stores**: Call RouterService for dynamic route URLs
+ *
+ * **Key Responsibilities:**
+ * - Build chat URLs for specific conversations: `RouterService.chat(id)` → `#/chat/:id`
+ * - Build settings URLs for sections: `RouterService.settings(section)` → `#/settings/:section`
+ *
+ * @see ROUTES in constants/routes.ts — static route base paths
+ */
+export { RouterService } from './router.service';
+
+/**
+ * **MigrationService** — Unified data migration hook
+ *
+ * Centralizes all data migrations (localStorage, IndexedDB, legacy formats) into a single
+ * initialization point. All migrations are NON-DESTRUCTIVE - legacy data is preserved
+ * for downgrade compatibility (no rollback needed).
+ *
+ * **Current Migrations:**
+ * 1. **localStorage prefix**: Copy LlamaCppWebui.* → LlamaUi.* (both preserved)
+ * 2. **IndexedDB database**: Copy LlamacppWebui → LlamaUi (both preserved)
+ * 3. **Legacy message format**: Marker-based → Structured format
+ * 4. **Theme key**: Copy standalone `theme` → config object (both preserved)
+ *
+ * **Usage:**
+ * ```typescript
+ * import { MigrationService } from '$lib/services';
+ *
+ * // Run all migrations on app startup (non-destructive)
+ * await MigrationService.runAllMigrations();
+ *
+ * // Check migration status
+ * const state = MigrationService.getState();
+ * ```
+ *
+ * @see migration.service.ts — full implementation (non-destructive)
+ */
+export { MigrationService } from './migration.service';
diff --git a/backend/llama.cpp/tools/ui/src/lib/services/mcp.service.ts b/backend/llama.cpp/tools/ui/src/lib/services/mcp.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ae98632a6fe638831fa52228d72874a6dae3a953
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/services/mcp.service.ts
@@ -0,0 +1,1242 @@
+import { Client } from '@modelcontextprotocol/sdk/client';
+import {
+	StreamableHTTPClientTransport,
+	StreamableHTTPError
+} 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 {
+	DEFAULT_MCP_CONFIG,
+	DEFAULT_CLIENT_VERSION,
+	DEFAULT_IMAGE_MIME_TYPE,
+	CORS_PROXY_HEADER_PREFIX,
+	MCP_PARTIAL_REDACT_HEADERS,
+	CORS_PROXY_ENDPOINT
+} from '$lib/constants';
+import {
+	MCPConnectionPhase,
+	MCPLogLevel,
+	MCPTransportType,
+	MCPContentType,
+	MCPRefType
+} from '$lib/enums';
+import type {
+	MCPServerConfig,
+	MCPResourceIcon,
+	ToolCallParams,
+	ToolExecutionResult,
+	Implementation,
+	ClientCapabilities,
+	MCPConnection,
+	MCPPhaseCallback,
+	MCPConnectionLog,
+	MCPServerInfo,
+	MCPResource,
+	MCPResourceTemplate,
+	MCPResourceContent,
+	MCPReadResourceResult
+} from '$lib/types';
+import {
+	buildProxiedUrl,
+	buildProxiedHeaders,
+	getAuthHeaders,
+	sanitizeHeaders,
+	throwIfAborted,
+	isAbortError,
+	createBase64DataUrl,
+	getRequestUrl,
+	getRequestMethod,
+	getRequestBody,
+	summarizeRequestBody,
+	formatDiagnosticErrorMessage,
+	extractJsonRpcMethods,
+	type RequestBodySummary
+} from '$lib/utils';
+
+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>;
+}
+
+interface DiagnosticRequestDetails {
+	url: string;
+	method: string;
+	credentials?: RequestCredentials;
+	mode?: RequestMode;
+	headers: Record<string, string>;
+	body: RequestBodySummary;
+	jsonRpcMethods?: string[];
+}
+
+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
+		};
+	}
+
+	private static createDiagnosticRequestDetails(
+		input: RequestInfo | URL,
+		init: RequestInit | undefined,
+		baseInit: RequestInit,
+		requestHeaders: Headers,
+		extraRedactedHeaders?: Iterable<string>
+	): DiagnosticRequestDetails {
+		const body = getRequestBody(input, init);
+		const details: DiagnosticRequestDetails = {
+			url: getRequestUrl(input),
+			method: getRequestMethod(input, init, baseInit).toUpperCase(),
+			credentials: init?.credentials ?? baseInit.credentials,
+			mode: init?.mode ?? baseInit.mode,
+			headers: sanitizeHeaders(requestHeaders, extraRedactedHeaders, MCP_PARTIAL_REDACT_HEADERS),
+			body: summarizeRequestBody(body)
+		};
+		const jsonRpcMethods = extractJsonRpcMethods(body);
+
+		if (jsonRpcMethods) {
+			details.jsonRpcMethods = jsonRpcMethods;
+		}
+
+		return details;
+	}
+
+	private static addRequestHeaders(
+		requestHeaders: Headers,
+		headers: HeadersInit,
+		useProxy: boolean
+	) {
+		for (const [key, value] of new Headers(headers).entries()) {
+			const proxiedKey =
+				useProxy && !key.toLowerCase().startsWith(CORS_PROXY_HEADER_PREFIX)
+					? `${CORS_PROXY_HEADER_PREFIX}${key}`
+					: key;
+			requestHeaders.set(proxiedKey, value);
+		}
+	}
+
+	private static summarizeError(error: unknown): Record<string, unknown> {
+		if (error instanceof Error) {
+			return {
+				name: error.name,
+				message: error.message,
+				cause:
+					error.cause instanceof Error
+						? { name: error.cause.name, message: error.cause.message }
+						: error.cause,
+				stack: error.stack?.split('\n').slice(0, 6).join('\n')
+			};
+		}
+
+		return { value: String(error) };
+	}
+
+	private static getBrowserContext(
+		targetUrl: URL,
+		useProxy: boolean
+	): Record<string, unknown> | undefined {
+		if (typeof window === 'undefined') {
+			return undefined;
+		}
+
+		return {
+			location: window.location.href,
+			origin: window.location.origin,
+			protocol: window.location.protocol,
+			isSecureContext: window.isSecureContext,
+			targetOrigin: targetUrl.origin,
+			targetProtocol: targetUrl.protocol,
+			sameOrigin: window.location.origin === targetUrl.origin,
+			useProxy
+		};
+	}
+
+	private static getConnectionHints(
+		targetUrl: URL,
+		config: MCPServerConfig,
+		error: unknown
+	): string[] {
+		const hints: string[] = [];
+		const message = error instanceof Error ? error.message : String(error);
+		const headerNames = Object.keys(config.headers ?? {});
+
+		if (typeof window !== 'undefined') {
+			if (
+				window.location.protocol === 'https:' &&
+				targetUrl.protocol === 'http:' &&
+				!config.useProxy
+			) {
+				hints.push(
+					'The page is running over HTTPS but the MCP server is HTTP. Browsers often block this as mixed content; enable the proxy or use HTTPS/WSS for the MCP server.'
+				);
+			}
+
+			if (window.location.origin !== targetUrl.origin && !config.useProxy) {
+				hints.push(
+					'This is a cross-origin browser request. If the server is reachable from curl or Node but not from the browser, missing CORS headers are the most likely cause.'
+				);
+			}
+		}
+
+		if (headerNames.length > 0) {
+			hints.push(
+				`Custom request headers are configured (${headerNames.join(', ')}). That triggers a CORS preflight, so the server must allow OPTIONS and include the matching Access-Control-Allow-Headers response.`
+			);
+		}
+
+		if (config.credentials && config.credentials !== 'omit') {
+			hints.push(
+				'Credentials are enabled for this connection. Cross-origin credentialed requests need Access-Control-Allow-Credentials: true and cannot use a wildcard Access-Control-Allow-Origin.'
+			);
+		}
+
+		if (message.includes('Failed to fetch')) {
+			hints.push(
+				'"Failed to fetch" is a browser-level network failure. Common causes are CORS rejection, mixed-content blocking, certificate/TLS errors, DNS failures, or nothing listening on the target port.'
+			);
+		}
+
+		return hints;
+	}
+
+	private static createDiagnosticFetch(
+		serverName: string,
+		config: MCPServerConfig,
+		baseInit: RequestInit,
+		targetUrl: URL,
+		useProxy: boolean,
+		onLog?: (log: MCPConnectionLog) => void
+	): {
+		fetch: typeof fetch;
+		disable: () => void;
+	} {
+		let enabled = true;
+		const logIfEnabled = (log: MCPConnectionLog) => {
+			if (enabled) {
+				onLog?.(log);
+			}
+		};
+
+		return {
+			fetch: async (input, init) => {
+				if (useProxy && typeof window !== 'undefined') {
+					let requestUrlStr = '';
+					if (typeof input === 'string') {
+						requestUrlStr = input;
+					} else if (input instanceof URL) {
+						requestUrlStr = input.href;
+					}
+
+					if (requestUrlStr) {
+						const parsedRequestUrl = new URL(requestUrlStr, window.location.origin);
+						if (
+							parsedRequestUrl.origin === window.location.origin &&
+							!parsedRequestUrl.pathname.includes(CORS_PROXY_ENDPOINT)
+						) {
+							const originalConfigUrl = new URL(config.url);
+							const realTargetUrl = new URL(
+								parsedRequestUrl.pathname + parsedRequestUrl.search,
+								originalConfigUrl.origin
+							);
+							const proxiedUrl = buildProxiedUrl(realTargetUrl.href);
+
+							if (typeof input === 'string') {
+								input = proxiedUrl.href;
+							} else if (input instanceof URL) {
+								input = proxiedUrl;
+							}
+						}
+					}
+				}
+
+				const startedAt = performance.now();
+				const requestHeaders = new Headers(baseInit.headers);
+
+				if (typeof Request !== 'undefined' && input instanceof Request) {
+					this.addRequestHeaders(requestHeaders, input.headers, useProxy);
+				}
+
+				if (init?.headers) {
+					this.addRequestHeaders(requestHeaders, init.headers, useProxy);
+				}
+
+				const request = this.createDiagnosticRequestDetails(
+					input,
+					init,
+					baseInit,
+					requestHeaders,
+					Object.keys(config.headers ?? {})
+				);
+				const { method, url } = request;
+
+				logIfEnabled(
+					this.createLog(
+						MCPConnectionPhase.INITIALIZING,
+						`HTTP ${method} ${url}`,
+						MCPLogLevel.INFO,
+						{
+							serverName,
+							request
+						}
+					)
+				);
+
+				if (method === 'DELETE' && url.includes(CORS_PROXY_ENDPOINT)) {
+					const response = new Response(null, { status: 200, statusText: 'OK' });
+
+					logIfEnabled(
+						this.createLog(
+							MCPConnectionPhase.INITIALIZING,
+							`HTTP 200 ${method} ${url} (fake response)`,
+							MCPLogLevel.INFO,
+							{
+								response: {
+									url,
+									status: response.status,
+									statusText: response.statusText,
+									durationMs: 0,
+									isFake: true
+								}
+							}
+						)
+					);
+
+					// fake response, bypass real fetch()
+					return response;
+				}
+
+				try {
+					const response = await fetch(input, {
+						...baseInit,
+						...init,
+						headers: requestHeaders
+					});
+					const durationMs = Math.round(performance.now() - startedAt);
+
+					logIfEnabled(
+						this.createLog(
+							MCPConnectionPhase.INITIALIZING,
+							`HTTP ${response.status} ${method} ${url} (${durationMs}ms)`,
+							response.ok ? MCPLogLevel.INFO : MCPLogLevel.WARN,
+							{
+								response: {
+									url,
+									status: response.status,
+									statusText: response.statusText,
+									headers: sanitizeHeaders(response.headers, undefined, MCP_PARTIAL_REDACT_HEADERS),
+									durationMs
+								}
+							}
+						)
+					);
+
+					return response;
+				} catch (error) {
+					const durationMs = Math.round(performance.now() - startedAt);
+
+					logIfEnabled(
+						this.createLog(
+							MCPConnectionPhase.ERROR,
+							`HTTP ${method} ${url} failed: ${formatDiagnosticErrorMessage(error)}`,
+							MCPLogLevel.ERROR,
+							{
+								serverName,
+								request,
+								error: this.summarizeError(error),
+								browser: this.getBrowserContext(targetUrl, useProxy),
+								hints: this.getConnectionHints(targetUrl, config, error),
+								durationMs
+							}
+						)
+					);
+
+					throw error;
+				}
+			},
+			disable: () => {
+				enabled = false;
+			}
+		};
+	}
+
+	/**
+	 * Detect if an error indicates an expired/invalidated MCP session.
+	 * Per MCP spec 2025-11-25: HTTP 404 means session invalidated, client MUST
+	 * discard its session ID and start a new session with a fresh initialize request.
+	 *
+	 * @param error - The caught error to inspect
+	 * @returns true if the error is a StreamableHTTP 404 (session not found)
+	 */
+	static isSessionExpiredError(error: unknown): boolean {
+		return error instanceof StreamableHTTPError && error.code === 404;
+	}
+
+	/**
+	 * 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(
+		serverName: string,
+		config: MCPServerConfig,
+		onLog?: (log: MCPConnectionLog) => void
+	): {
+		transport: Transport;
+		type: MCPTransportType;
+		stopPhaseLogging: () => void;
+	} {
+		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.useProxy ? buildProxiedHeaders(config.headers) : config.headers;
+		}
+
+		if (useProxy) {
+			requestInit.headers = {
+				...getAuthHeaders(),
+				...(requestInit.headers as Record<string, string>)
+			};
+		}
+
+		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 && import.meta.env.VITE_DEBUG) {
+				console.log(`[MCPService] Creating WebSocket transport for ${url.href}`);
+			}
+
+			return {
+				transport: new WebSocketClientTransport(url),
+				type: MCPTransportType.WEBSOCKET,
+				stopPhaseLogging: () => {}
+			};
+		}
+
+		if (config.transport === MCPTransportType.SSE) {
+			const url = useProxy ? buildProxiedUrl(config.url) : new URL(config.url);
+			const { fetch: diagnosticFetch, disable: stopPhaseLogging } = this.createDiagnosticFetch(
+				serverName,
+				config,
+				requestInit,
+				url,
+				useProxy,
+				onLog
+			);
+
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
+				console.log(`[MCPService] Creating SSE transport for ${url.href}`);
+			}
+
+			return {
+				transport: new SSEClientTransport(url, {
+					requestInit,
+					fetch: diagnosticFetch,
+					eventSourceInit: { fetch: diagnosticFetch }
+				}),
+				type: MCPTransportType.SSE,
+				stopPhaseLogging
+			};
+		}
+
+		const url = useProxy ? buildProxiedUrl(config.url) : new URL(config.url);
+		const { fetch: diagnosticFetch, disable: stopPhaseLogging } = this.createDiagnosticFetch(
+			serverName,
+			config,
+			requestInit,
+			url,
+			useProxy,
+			onLog
+		);
+
+		if (useProxy && import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
+			console.log(`[MCPService] Using CORS proxy for ${config.url} -> ${url.href}`);
+		}
+
+		try {
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
+				console.log(`[MCPService] Creating StreamableHTTP transport for ${url.href}`);
+			}
+
+			return {
+				transport: new StreamableHTTPClientTransport(url, {
+					requestInit,
+					fetch: diagnosticFetch
+				}),
+				type: MCPTransportType.STREAMABLE_HTTP,
+				stopPhaseLogging
+			};
+		} catch (httpError) {
+			console.warn(`[MCPService] StreamableHTTP failed, trying SSE transport...`, httpError);
+
+			try {
+				return {
+					transport: new SSEClientTransport(url, {
+						requestInit,
+						fetch: diagnosticFetch,
+						eventSourceInit: { fetch: diagnosticFetch }
+					}),
+					type: MCPTransportType.SSE,
+					stopPhaseLogging
+				};
+			} 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: MCPResourceIcon) => ({
+				src: icon.src,
+				mimeType: icon.mimeType,
+				sizes: icon.sizes,
+				theme: icon.theme
+			}))
+		};
+	}
+
+	/**
+	 * 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 && import.meta.env.VITE_DEBUG) {
+			console.log(`[MCPService][${serverName}] Creating transport...`);
+		}
+
+		const {
+			transport,
+			type: transportType,
+			stopPhaseLogging
+		} = this.createTransport(serverName, serverConfig, (log) => onPhase?.(log.phase, log));
+
+		// 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
+			}
+		);
+
+		const runtimeErrorHandler = (error: Error) => {
+			// the SDK reports any post initialize error here, including the abort we trigger
+			// ourselves on the next health check cycle, on tab unload, or on server teardown.
+			// these are lifecycle aborts, not actionable errors, so we keep them out of the red console.
+			// the SDK wraps the original AbortError in a generic Error like
+			//   "SSE stream disconnected: AbortError: The operation was aborted."
+			// which isAbortError cannot recognize by name alone, so we also pattern match on the message
+			if (isAbortError(error)) {
+				return;
+			}
+			const msg = error?.message ?? '';
+			if (
+				/SSE stream disconnected:.*AbortError/i.test(msg) ||
+				/AbortError: .*aborted/i.test(msg) ||
+				/stream locked by a reader/i.test(msg)
+			) {
+				return;
+			}
+			console.error(`[MCPService][${serverName}] Protocol error after initialize:`, error);
+		};
+
+		client.onerror = (error) => {
+			onPhase?.(
+				MCPConnectionPhase.ERROR,
+				this.createLog(
+					MCPConnectionPhase.ERROR,
+					`Protocol error: ${error.message}`,
+					MCPLogLevel.ERROR,
+					{
+						error: this.summarizeError(error)
+					}
+				)
+			);
+		};
+
+		// Phase: Initializing
+		onPhase?.(
+			MCPConnectionPhase.INITIALIZING,
+			this.createLog(MCPConnectionPhase.INITIALIZING, 'Sending initialize request...')
+		);
+
+		try {
+			await client.connect(transport);
+			// Transport diagnostics are only for the initial handshake, not long-lived traffic.
+			stopPhaseLogging();
+			client.onerror = runtimeErrorHandler;
+		} catch (error) {
+			client.onerror = runtimeErrorHandler;
+			const url =
+				(serverConfig.useProxy ?? false)
+					? buildProxiedUrl(serverConfig.url)
+					: new URL(serverConfig.url);
+
+			onPhase?.(
+				MCPConnectionPhase.ERROR,
+				this.createLog(
+					MCPConnectionPhase.ERROR,
+					`Connection failed during initialize: ${
+						error instanceof Error ? error.message : String(error)
+					}`,
+					MCPLogLevel.ERROR,
+					{
+						error: this.summarizeError(error),
+						config: {
+							serverName,
+							configuredUrl: serverConfig.url,
+							effectiveUrl: url.href,
+							transportType,
+							useProxy: serverConfig.useProxy ?? false,
+							headers: sanitizeHeaders(
+								serverConfig.headers,
+								Object.keys(serverConfig.headers ?? {}),
+								MCP_PARTIAL_REDACT_HEADERS
+							),
+							credentials: serverConfig.credentials
+						},
+						browser: this.getBrowserContext(url, serverConfig.useProxy ?? false),
+						hints: this.getConnectionHints(url, serverConfig, error)
+					}
+				)
+			);
+
+			throw error;
+		}
+
+		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...')
+		);
+
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
+			console.log(`[MCPService][${serverName}] Connected, listing tools...`);
+		}
+
+		const tools = await this.listTools({
+			client,
+			transport,
+			tools: [],
+			serverName,
+			transportType,
+			connectionTimeMs: 0,
+			requestTimeoutMs:
+				serverConfig.requestTimeoutMs ?? DEFAULT_MCP_CONFIG.requestTimeoutSeconds * 1000
+		});
+
+		const connectionTimeMs = Math.round(performance.now() - startTime);
+
+		// Phase: Connected
+		onPhase?.(
+			MCPConnectionPhase.CONNECTED,
+			this.createLog(
+				MCPConnectionPhase.CONNECTED,
+				`Connection established with ${tools.length} tools (${connectionTimeMs}ms)`
+			)
+		);
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
+			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,
+			requestTimeoutMs:
+				serverConfig.requestTimeoutMs ?? DEFAULT_MCP_CONFIG.requestTimeoutSeconds * 1000
+		};
+	}
+
+	/**
+	 * 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> {
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
+			console.log(`[MCPService][${connection.serverName}] Disconnecting...`);
+		}
+
+		try {
+			// Terminate the session first for streamable-http transports to cleanly
+			// close streams, matching the inspector's disconnect flow.
+			if (connection.transport instanceof StreamableHTTPClientTransport) {
+				await connection.transport.terminateSession();
+			}
+
+			// Clear error handlers before closing to prevent noise from expected
+			// abort errors during shutdown. The inspector avoids this entirely
+			// by not setting onerror, but since we use it for protocol logging,
+			// we must clear it before disconnect.
+			connection.client.onerror = undefined;
+			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) {
+			// Let session-expired errors propagate for reconnection handling
+			if (this.isSessionExpiredError(error)) {
+				throw 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) {
+			// Let session-expired errors propagate for reconnection handling
+			if (this.isSessionExpiredError(error)) {
+				throw 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, timeout: connection.requestTimeoutMs }
+			);
+
+			return {
+				content: this.formatToolResult(result as ToolCallResult),
+				isError: (result as ToolCallResult).isError ?? false
+			};
+		} catch (error) {
+			if (isAbortError(error)) {
+				throw error;
+			}
+
+			// Let session-expired errors propagate unwrapped for reconnection handling
+			if (this.isSessionExpiredError(error)) {
+				throw error;
+			}
+
+			const message = error instanceof Error ? error.message : String(error);
+
+			throw new Error(
+				`Tool "${params.name}" execution failed on server "${connection.serverName}": ${message}`,
+				{ cause: error instanceof Error ? error : undefined }
+			);
+		}
+	}
+
+	/**
+	 * 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) {
+			if (this.isSessionExpiredError(error)) {
+				throw 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) {
+			if (this.isSessionExpiredError(error)) {
+				throw 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 });
+
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
+				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/backend/llama.cpp/tools/ui/src/lib/services/migration.service.ts b/backend/llama.cpp/tools/ui/src/lib/services/migration.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c5e4093f3a363fa1d6f85bd530cd0405bb555c77
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/services/migration.service.ts
@@ -0,0 +1,740 @@
+/**
+ * Migration Service - Unified data migration hook
+ *
+ * Centralizes all data migrations (localStorage, IndexedDB, legacy formats) into a single
+ * initialization point. Each migration copies data to new format WITHOUT deleting the old.
+ *
+ * **Architecture:**
+ * - Migrations are defined as objects with `id` and `run()` methods
+ * - Migration state is tracked in localStorage to avoid re-running
+ * - `runAllMigrations()` should be called once at app startup
+ * - All migrations are NON-DESTRUCTIVE - legacy data is preserved for downgrade compatibility
+ *
+ * **Current Migrations:**
+ * 1. localStorage prefix: Copy LlamaCppWebui.* → LlamaUi.* (both preserved)
+ * 2. IndexedDB database: Copy LlamacppWebui → LlamaUi (both preserved)
+ * 3. Legacy message format: Transform in-place (preserves structure, migrates markers)
+ * 4. Theme key: Copy standalone `theme` → config object (both preserved)
+ */
+
+import Dexie from 'dexie';
+import {
+	STORAGE_APP_NAME,
+	STORAGE_APP_NAME_DEPRECATED,
+	DB_APP_NAME_DEPRECATED,
+	CONFIG_LOCALSTORAGE_KEY,
+	IDXDB_TABLES,
+	IDXDB_STORES,
+	NEW_TO_DEPRECATED_MAP
+} from '$lib/constants';
+import { LEGACY_AGENTIC_REGEX, LEGACY_REASONING_TAGS } from '$lib/constants/agentic';
+import { SETTINGS_KEYS } from '$lib/constants/settings-registry';
+import { MessageRole } from '$lib/enums';
+
+// Types
+
+interface Migration {
+	/** Unique identifier for this migration */
+	id: string;
+	/** Human-readable description */
+	description: string;
+	/** Run the migration forward (non-destructive - copies, doesn't delete) */
+	run(): Promise<void>;
+}
+
+interface MigrationState {
+	completed: string[];
+	failed: string[];
+	lastRun: string;
+}
+
+// Constants
+
+const MIGRATION_STATE_KEY = `${STORAGE_APP_NAME}.migration-state`;
+const MIGRATION_STATE_VERSION = 1;
+
+// State Management
+
+function getMigrationState(): MigrationState {
+	try {
+		const raw = localStorage.getItem(MIGRATION_STATE_KEY);
+		if (!raw) return { completed: [], failed: [], lastRun: '' };
+		const parsed = JSON.parse(raw);
+		if (parsed.version !== MIGRATION_STATE_VERSION) {
+			return { completed: [], failed: [], lastRun: '' };
+		}
+		return {
+			completed: parsed.completed ?? [],
+			failed: parsed.failed ?? [],
+			lastRun: parsed.lastRun ?? ''
+		};
+	} catch {
+		return { completed: [], failed: [], lastRun: '' };
+	}
+}
+
+function saveMigrationState(state: MigrationState): void {
+	localStorage.setItem(
+		MIGRATION_STATE_KEY,
+		JSON.stringify({
+			version: MIGRATION_STATE_VERSION,
+			...state,
+			lastRun: new Date().toISOString()
+		})
+	);
+}
+
+function isMigrationCompleted(id: string): boolean {
+	const state = getMigrationState();
+	return state.completed.includes(id);
+}
+
+function markMigrationCompleted(id: string): void {
+	const state = getMigrationState();
+	if (!state.completed.includes(id)) {
+		state.completed.push(id);
+	}
+	state.failed = state.failed.filter((f) => f !== id);
+	saveMigrationState(state);
+}
+
+function markMigrationFailed(id: string): void {
+	const state = getMigrationState();
+	if (!state.failed.includes(id)) {
+		state.failed.push(id);
+	}
+	saveMigrationState(state);
+}
+
+// Migration 1: LocalStorage Key Prefix (Non-Destructive)
+
+const LOCALSTORAGE_MIGRATION_ID = 'localstorage-prefix-v1';
+
+const localStorageMigration: Migration = {
+	id: LOCALSTORAGE_MIGRATION_ID,
+	description: 'Copy localStorage keys from LlamaCppWebui to LlamaUi prefix (non-destructive)',
+
+	async run(): Promise<void> {
+		// Non-destructive: copy to new key, but KEEP the old key
+		for (const [newKey, deprecatedKey] of Object.entries(NEW_TO_DEPRECATED_MAP)) {
+			// Only migrate if new key doesn't already exist
+			const newValue = localStorage.getItem(newKey);
+			if (newValue !== null) {
+				if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+					console.log(`[Migration] localStorage: ${newKey} already exists, skipping`);
+				continue;
+			}
+
+			const oldValue = localStorage.getItem(deprecatedKey);
+			if (oldValue !== null) {
+				localStorage.setItem(newKey, oldValue);
+				// Keep old key for downgrade compatibility - DO NOT DELETE
+				if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
+					console.log(
+						`[Migration] localStorage: copied ${deprecatedKey} → ${newKey} (preserved old)`
+					);
+				}
+			}
+		}
+	}
+};
+
+// Migration 2: IndexedDB Database Name (Non-Destructive)
+
+const IDXDB_MIGRATION_ID = 'idxdb-database-v1';
+
+const idxdbMigration: Migration = {
+	id: IDXDB_MIGRATION_ID,
+	description: 'Copy IndexedDB from LlamacppWebui to LlamaUi database (non-destructive)',
+
+	async run(): Promise<void> {
+		const oldDbNames = await Dexie.getDatabaseNames();
+		if (!oldDbNames.includes(DB_APP_NAME_DEPRECATED)) {
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+				console.log('[Migration] IndexedDB: no old database found, skipping');
+			return;
+		}
+
+		// Check if new database already has data
+		const newDb = new Dexie(STORAGE_APP_NAME);
+		newDb.version(1).stores(IDXDB_STORES);
+		const existingConvs = await newDb.table(IDXDB_TABLES.conversations).count();
+		if (existingConvs > 0) {
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+				console.log('[Migration] IndexedDB: new database already has data, skipping');
+			return;
+		}
+
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+			console.log('[Migration] IndexedDB: copying from', DB_APP_NAME_DEPRECATED);
+
+		const oldDb = new Dexie(DB_APP_NAME_DEPRECATED);
+		oldDb.version(1).stores(IDXDB_STORES);
+
+		const conversations = await oldDb.table(IDXDB_TABLES.conversations).toArray();
+		const messages = await oldDb.table(IDXDB_TABLES.messages).toArray();
+
+		if (conversations.length > 0) {
+			await newDb.table(IDXDB_TABLES.conversations).bulkAdd(conversations);
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+				console.log(`[Migration] IndexedDB: copied ${conversations.length} conversations`);
+		}
+		if (messages.length > 0) {
+			await newDb.table(IDXDB_TABLES.messages).bulkAdd(messages);
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+				console.log(`[Migration] IndexedDB: copied ${messages.length} messages`);
+		}
+
+		// Non-destructive: DO NOT delete old database - keep for downgrade compatibility
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+			console.log('[Migration] IndexedDB: preserved old database for downgrade compatibility');
+	}
+};
+
+// Migration 3: Legacy Message Format
+
+const LEGACY_MESSAGE_MIGRATION_ID = 'legacy-message-format-v2';
+
+interface ParsedTurn {
+	textBefore: string;
+	toolCalls: Array<{ name: string; args: string; result: string }>;
+}
+
+function parseLegacyToolCalls(content: string): ParsedTurn[] {
+	const turns: ParsedTurn[] = [];
+	const regex = new RegExp(LEGACY_AGENTIC_REGEX.COMPLETED_TOOL_CALL.source, 'g');
+
+	let lastIndex = 0;
+	let currentTurn: ParsedTurn = { textBefore: '', toolCalls: [] };
+	let match;
+
+	while ((match = regex.exec(content)) !== null) {
+		const textBefore = content.slice(lastIndex, match.index).trim();
+
+		if (textBefore && currentTurn.toolCalls.length > 0) {
+			turns.push(currentTurn);
+			currentTurn = { textBefore, toolCalls: [] };
+		} else if (textBefore && currentTurn.toolCalls.length === 0) {
+			currentTurn.textBefore = textBefore;
+		}
+
+		currentTurn.toolCalls.push({
+			name: match[1],
+			args: match[2],
+			result: match[3].replace(/^\n+|\n+$/g, '')
+		});
+
+		lastIndex = match.index + match[0].length;
+	}
+
+	const remainingText = content.slice(lastIndex).trim();
+
+	if (currentTurn.toolCalls.length > 0) {
+		turns.push(currentTurn);
+	}
+
+	if (remainingText) {
+		const cleanRemaining = remainingText
+			.replace(LEGACY_AGENTIC_REGEX.AGENTIC_TOOL_CALL_OPEN, '')
+			.trim();
+		if (cleanRemaining) {
+			turns.push({ textBefore: cleanRemaining, toolCalls: [] });
+		}
+	}
+
+	if (turns.length === 0) {
+		turns.push({ textBefore: content.trim(), toolCalls: [] });
+	}
+
+	return turns;
+}
+
+function extractLegacyReasoning(content: string): { reasoning: string; cleanContent: string } {
+	let reasoning = '';
+	let cleanContent = content;
+
+	const re = new RegExp(LEGACY_AGENTIC_REGEX.REASONING_EXTRACT.source, 'g');
+	let match;
+	while ((match = re.exec(content)) !== null) {
+		reasoning += match[1];
+	}
+
+	cleanContent = cleanContent
+		.replace(new RegExp(LEGACY_AGENTIC_REGEX.REASONING_BLOCK.source, 'g'), '')
+		.replace(LEGACY_AGENTIC_REGEX.REASONING_OPEN, '');
+
+	return { reasoning, cleanContent };
+}
+
+function hasLegacyMarkers(content: string): boolean {
+	return LEGACY_AGENTIC_REGEX.HAS_LEGACY_MARKERS.test(content);
+}
+
+let DatabaseService: typeof import('./database.service').DatabaseService | null = null;
+
+async function getDatabaseService() {
+	if (!DatabaseService) {
+		const module = await import('./database.service');
+		DatabaseService = module.DatabaseService;
+	}
+	return DatabaseService;
+}
+
+const legacyMessageMigration: Migration = {
+	id: LEGACY_MESSAGE_MIGRATION_ID,
+	description: 'Migrate legacy marker-based messages to structured format',
+
+	async run(): Promise<void> {
+		const db = await getDatabaseService();
+		const conversations = await db.getAllConversations();
+		let migratedCount = 0;
+
+		for (const conv of conversations) {
+			const allMessages = await db.getConversationMessages(conv.id);
+
+			for (const message of allMessages) {
+				if (message.role !== MessageRole.ASSISTANT) {
+					if (message.content?.includes(LEGACY_REASONING_TAGS.START)) {
+						const { reasoning, cleanContent } = extractLegacyReasoning(message.content);
+						await db.updateMessage(message.id, {
+							content: cleanContent.trim(),
+							reasoningContent: reasoning || undefined
+						});
+						migratedCount++;
+					}
+					continue;
+				}
+
+				if (!hasLegacyMarkers(message.content ?? '')) continue;
+
+				const { reasoning, cleanContent } = extractLegacyReasoning(message.content);
+				const turns = parseLegacyToolCalls(cleanContent);
+
+				let existingToolCalls: Array<{
+					id: string;
+					function?: { name: string; arguments: string };
+				}> = [];
+				if (message.toolCalls) {
+					try {
+						existingToolCalls = JSON.parse(message.toolCalls);
+					} catch {
+						// Ignore
+					}
+				}
+
+				const firstTurn = turns[0];
+				if (!firstTurn) continue;
+
+				const firstTurnToolCalls = firstTurn.toolCalls.map((tc, i) => {
+					const existing =
+						existingToolCalls.find((e) => e.function?.name === tc.name) || existingToolCalls[i];
+					return {
+						id: existing?.id || `legacy_tool_${i}`,
+						type: 'function' as const,
+						function: { name: tc.name, arguments: tc.args }
+					};
+				});
+
+				await db.updateMessage(message.id, {
+					content: firstTurn.textBefore,
+					reasoningContent: reasoning || undefined,
+					toolCalls: firstTurnToolCalls.length > 0 ? JSON.stringify(firstTurnToolCalls) : ''
+				});
+
+				let currentParentId = message.id;
+				let toolCallIdCounter = existingToolCalls.length;
+
+				for (let i = 0; i < firstTurn.toolCalls.length; i++) {
+					const tc = firstTurn.toolCalls[i];
+					const toolCallId = firstTurnToolCalls[i]?.id || `legacy_tool_${i}`;
+
+					const toolMsg = await db.createMessageBranch(
+						{
+							convId: conv.id,
+							type: 'text',
+							role: MessageRole.TOOL,
+							content: tc.result,
+							toolCallId,
+							timestamp: message.timestamp + i + 1,
+							toolCalls: '',
+							children: []
+						},
+						currentParentId
+					);
+					currentParentId = toolMsg.id;
+				}
+
+				for (let turnIdx = 1; turnIdx < turns.length; turnIdx++) {
+					const turn = turns[turnIdx];
+
+					const turnToolCalls = turn.toolCalls.map((tc, i) => {
+						const idx = toolCallIdCounter + i;
+						const existing = existingToolCalls[idx];
+						return {
+							id: existing?.id || `legacy_tool_${idx}`,
+							type: 'function' as const,
+							function: { name: tc.name, arguments: tc.args }
+						};
+					});
+					toolCallIdCounter += turn.toolCalls.length;
+
+					const assistantMsg = await db.createMessageBranch(
+						{
+							convId: conv.id,
+							type: 'text',
+							role: MessageRole.ASSISTANT,
+							content: turn.textBefore,
+							timestamp: message.timestamp + turnIdx * 100,
+							toolCalls: turnToolCalls.length > 0 ? JSON.stringify(turnToolCalls) : '',
+							children: [],
+							model: message.model
+						},
+						currentParentId
+					);
+					currentParentId = assistantMsg.id;
+
+					for (let i = 0; i < turn.toolCalls.length; i++) {
+						const tc = turn.toolCalls[i];
+						const toolCallId = turnToolCalls[i]?.id || `legacy_tool_${toolCallIdCounter + i}`;
+
+						const toolMsg = await db.createMessageBranch(
+							{
+								convId: conv.id,
+								type: 'text',
+								role: MessageRole.TOOL,
+								content: tc.result,
+								toolCallId,
+								timestamp: message.timestamp + turnIdx * 100 + i + 1,
+								toolCalls: '',
+								children: []
+							},
+							currentParentId
+						);
+						currentParentId = toolMsg.id;
+					}
+				}
+
+				if (message.children.length > 0 && currentParentId !== message.id) {
+					for (const childId of message.children) {
+						const child = allMessages.find((m) => m.id === childId);
+						if (!child) continue;
+						if (child.role !== MessageRole.TOOL) {
+							await db.updateMessage(childId, { parent: currentParentId });
+						}
+					}
+					await db.updateMessage(message.id, { children: [] });
+				}
+
+				migratedCount++;
+			}
+		}
+
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+			console.log(`[Migration] Legacy messages: migrated ${migratedCount} messages`);
+	}
+};
+
+// Migration 4: Theme Key (Non-Destructive)
+
+const THEME_MIGRATION_ID = 'theme-key-v1';
+
+const themeMigration: Migration = {
+	id: THEME_MIGRATION_ID,
+	description: 'Copy standalone theme key to config object (non-destructive)',
+
+	async run(): Promise<void> {
+		const legacyTheme = localStorage.getItem('theme');
+		if (legacyTheme === null) {
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+				console.log('[Migration] Theme: no legacy theme key found, skipping');
+			return;
+		}
+
+		// Check if config already has theme
+		const configRaw = localStorage.getItem(CONFIG_LOCALSTORAGE_KEY);
+		const config = configRaw ? JSON.parse(configRaw) : {};
+
+		if (SETTINGS_KEYS.THEME in config) {
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+				console.log('[Migration] Theme: config already has theme, skipping');
+			return;
+		}
+
+		config[SETTINGS_KEYS.THEME] = legacyTheme;
+		localStorage.setItem(CONFIG_LOCALSTORAGE_KEY, JSON.stringify(config));
+
+		// Non-destructive: DO NOT delete legacy theme key - keep for downgrade compatibility
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+			console.log(`[Migration] Theme: copied standalone theme to config (preserved old key)`);
+	}
+};
+
+// Migration Registry & Runner
+
+const CUSTOM_JSON_MIGRATION_ID = 'custom-json-key-v1';
+
+const customJsonKeyMigration: Migration = {
+	id: CUSTOM_JSON_MIGRATION_ID,
+	description: 'Copy legacy custom config key to customJson (non-destructive)',
+
+	async run(): Promise<void> {
+		const configRaw = localStorage.getItem(CONFIG_LOCALSTORAGE_KEY);
+		if (configRaw === null) return;
+
+		const config = JSON.parse(configRaw);
+
+		if (!('custom' in config)) return;
+		if (SETTINGS_KEYS.CUSTOM_JSON in config) return;
+
+		config[SETTINGS_KEYS.CUSTOM_JSON] = config.custom;
+		localStorage.setItem(CONFIG_LOCALSTORAGE_KEY, JSON.stringify(config));
+
+		// Non-destructive: keep the legacy custom key for downgrade compatibility
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+			console.log(`[Migration] Custom JSON: copied custom to customJson (preserved old key)`);
+	}
+};
+
+const MCP_DEFAULT_ENABLED_MIGRATION_ID = 'mcp-default-enabled-to-config-v1';
+
+const LEGACY_MCP_DEFAULT_ENABLED_KEY = `${STORAGE_APP_NAME}.mcpDefaultEnabled`;
+const DEPRECATED_LEGACY_MCP_DEFAULT_ENABLED_KEY = `${STORAGE_APP_NAME_DEPRECATED}.mcpDefaultEnabled`;
+
+const mcpDefaultEnabledMigration: Migration = {
+	id: MCP_DEFAULT_ENABLED_MIGRATION_ID,
+	description:
+		'Copy mcpDefaultEnabled localStorage key into settings config (preserves legacy keys)',
+
+	async run(): Promise<void> {
+		const raw =
+			localStorage.getItem(LEGACY_MCP_DEFAULT_ENABLED_KEY) ??
+			localStorage.getItem(DEPRECATED_LEGACY_MCP_DEFAULT_ENABLED_KEY);
+
+		// Legacy keys intentionally left in place so a downgrade keeps reading them.
+
+		if (raw === null) {
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+				console.log('[Migration] MCP default enabled: no legacy key found, skipping');
+			return;
+		}
+
+		const configRaw = localStorage.getItem(CONFIG_LOCALSTORAGE_KEY);
+		const config = configRaw ? JSON.parse(configRaw) : {};
+
+		// Don't overwrite an existing config entry — current data wins.
+		if (MCP_DEFAULT_OVERRIDES_LEGACY_KEY in config) {
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+				console.log('[Migration] MCP default enabled: config already has overrides, skipping');
+			return;
+		}
+
+		try {
+			const parsed = JSON.parse(raw);
+			if (!Array.isArray(parsed)) return;
+			const valid = parsed.every(
+				(o) =>
+					typeof o === 'object' &&
+					o !== null &&
+					typeof (o as Record<string, unknown>).serverId === 'string' &&
+					typeof (o as Record<string, unknown>).enabled === 'boolean'
+			);
+			if (!valid) return;
+		} catch {
+			return;
+		}
+
+		config[MCP_DEFAULT_OVERRIDES_LEGACY_KEY] = raw;
+		localStorage.setItem(CONFIG_LOCALSTORAGE_KEY, JSON.stringify(config));
+
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+			console.log('[Migration] MCP default enabled: moved legacy key into config');
+	}
+};
+
+const CONFIG_TYPES_MIGRATION_ID = 'config-type-normalization-v1';
+
+const configTypesMigration: Migration = {
+	id: CONFIG_TYPES_MIGRATION_ID,
+	description: 'Coerce legacy string-encoded booleans in persisted config to real booleans',
+
+	async run(): Promise<void> {
+		const configRaw = localStorage.getItem(CONFIG_LOCALSTORAGE_KEY);
+		if (configRaw === null) return;
+
+		const config = JSON.parse(configRaw);
+		let changed = false;
+
+		// Pre-schema configs persisted booleans as "true"/"false" strings; the strict server
+		// schema rejects them. No config string field holds exactly "true"/"false", so the
+		// match is unambiguous.
+		for (const key of Object.keys(config)) {
+			if (config[key] === 'true') {
+				config[key] = true;
+				changed = true;
+			} else if (config[key] === 'false') {
+				config[key] = false;
+				changed = true;
+			}
+		}
+
+		if (changed) {
+			localStorage.setItem(CONFIG_LOCALSTORAGE_KEY, JSON.stringify(config));
+		}
+
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+			console.log(`[Migration] Config types: coerced string booleans (changed=${changed})`);
+	}
+};
+
+const MCP_DEFAULT_OVERRIDES_LEGACY_KEY = `${STORAGE_APP_NAME}.mcpDefaultServerOverrides`;
+const MCP_DEFAULT_OVERRIDES_MERGE_MIGRATION_ID = 'mcp-default-overrides-merge-v1';
+
+/**
+ * Folds `mcpDefaultServerOverrides` (the legacy "default for new chats" list,
+ * JSON-encoded as `[{ serverId, enabled }, ...]`) into `mcpServers[i].enabled`.
+ * The legacy override key is intentionally left in the config so a downgrade
+ * keeps reading it. Runs after `mcpDefaultEnabledMigration` so any legacy
+ * standalone overrides are already inside the config.
+ */
+const mcpDefaultOverridesMergeMigration: Migration = {
+	id: MCP_DEFAULT_OVERRIDES_MERGE_MIGRATION_ID,
+	description:
+		'Merge mcpDefaultServerOverrides entries onto mcpServers[i].enabled (preserves legacy key)',
+
+	async run(): Promise<void> {
+		const configRaw = localStorage.getItem(CONFIG_LOCALSTORAGE_KEY);
+		if (configRaw === null) return;
+
+		const config = JSON.parse(configRaw);
+		const raw = config[MCP_DEFAULT_OVERRIDES_LEGACY_KEY];
+
+		if (typeof raw !== 'string' || raw.length === 0) {
+			if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+				console.log('[Migration] MCP default overrides merge: nothing to merge');
+			return;
+		}
+
+		let overrides: { serverId: string; enabled: boolean }[];
+		try {
+			const parsed = JSON.parse(raw);
+			if (!Array.isArray(parsed)) return;
+			overrides = parsed.filter(
+				(o) =>
+					typeof o === 'object' &&
+					o !== null &&
+					typeof (o as Record<string, unknown>).serverId === 'string' &&
+					typeof (o as Record<string, unknown>).enabled === 'boolean'
+			) as { serverId: string; enabled: boolean }[];
+		} catch {
+			return;
+		}
+
+		const serversRaw = config[SETTINGS_KEYS.MCP_SERVERS];
+		let servers: { id: string; enabled?: boolean }[];
+		try {
+			servers = typeof serversRaw === 'string' ? JSON.parse(serversRaw) : [];
+		} catch {
+			return;
+		}
+
+		if (!Array.isArray(servers)) servers = [];
+
+		let serversChanged = false;
+		const knownIds = new Set(servers.map((s) => s.id));
+		for (const override of overrides) {
+			if (!knownIds.has(override.serverId)) continue;
+			const index = servers.findIndex((s) => s.id === override.serverId);
+
+			if (index >= 0 && servers[index].enabled !== override.enabled) {
+				servers[index] = { ...servers[index], enabled: override.enabled };
+				serversChanged = true;
+			}
+		}
+
+		if (serversChanged) {
+			config[SETTINGS_KEYS.MCP_SERVERS] = JSON.stringify(servers);
+			localStorage.setItem(CONFIG_LOCALSTORAGE_KEY, JSON.stringify(config));
+		}
+
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+			console.log(
+				`[Migration] MCP default overrides merge: applied=${overrides.length} serversChanged=${serversChanged} (legacy key preserved)`
+			);
+	}
+};
+
+const migrations: Migration[] = [
+	localStorageMigration,
+	idxdbMigration,
+	legacyMessageMigration,
+	themeMigration,
+	customJsonKeyMigration,
+	mcpDefaultEnabledMigration,
+	mcpDefaultOverridesMergeMigration,
+	configTypesMigration
+];
+
+export const MigrationService = {
+	/**
+	 * Get all registered migrations
+	 */
+	getMigrations(): Migration[] {
+		return [...migrations];
+	},
+
+	/**
+	 * Check if a specific migration has been completed
+	 */
+	isCompleted(id: string): boolean {
+		return isMigrationCompleted(id);
+	},
+
+	/**
+	 * Get current migration state
+	 */
+	getState(): MigrationState {
+		return getMigrationState();
+	},
+
+	/**
+	 * Reset migration state (use with caution - migrations will run again)
+	 */
+	resetState(): void {
+		localStorage.removeItem(MIGRATION_STATE_KEY);
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+			console.log('[Migration] State reset - all migrations will run again');
+	},
+
+	/**
+	 * Run all pending migrations (non-destructive - preserves legacy data)
+	 * Should be called once at app initialization
+	 */
+	async runAllMigrations(): Promise<void> {
+		const state = getMigrationState();
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+			console.log('[Migration] Starting migration run, state:', state);
+
+		for (const migration of migrations) {
+			if (isMigrationCompleted(migration.id)) {
+				if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+					console.log(`[Migration] ${migration.id}: already completed, skipping`);
+				continue;
+			}
+
+			try {
+				if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+					console.log(`[Migration] ${migration.id}: running...`);
+				await migration.run();
+				markMigrationCompleted(migration.id);
+				if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+					console.log(`[Migration] ${migration.id}: completed successfully`);
+			} catch (error) {
+				console.error(`[Migration] ${migration.id}: failed`, error);
+				markMigrationFailed(migration.id);
+			}
+		}
+
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+			console.log('[Migration] All migrations complete');
+	}
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/services/models.service.ts b/backend/llama.cpp/tools/ui/src/lib/services/models.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9574da59ef9f6a0b4e56910f97fa60e2f9b48343
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/services/models.service.ts
@@ -0,0 +1,233 @@
+import { ServerModelStatus } from '$lib/enums';
+import { apiFetch, apiPost, normalizeModelName } from '$lib/utils';
+import type { ParsedModelId } from '$lib/types/models';
+import {
+	MODEL_QUANTIZATION_SEGMENT_RE,
+	MODEL_CUSTOM_QUANTIZATION_PREFIX_RE,
+	MODEL_PARAMS_RE,
+	MODEL_ACTIVATED_PARAMS_RE,
+	MODEL_IGNORED_SEGMENTS,
+	MODEL_WEIGHT_EXTENSION_RE,
+	MODEL_ID_NOT_FOUND,
+	MODEL_ID_ORG_SEPARATOR,
+	MODEL_ID_SEGMENT_SEPARATOR,
+	MODEL_ID_QUANTIZATION_SEPARATOR,
+	API_MODELS
+} from '$lib/constants';
+
+export class ModelsService {
+	/**
+	 *
+	 *
+	 * Listing
+	 *
+	 *
+	 */
+
+	/**
+	 * Fetch list of models from OpenAI-compatible endpoint.
+	 * Works in both MODEL and ROUTER modes.
+	 *
+	 * @returns List of available models with basic metadata
+	 */
+	static async list(): Promise<ApiModelListResponse> {
+		return apiFetch<ApiModelListResponse>(API_MODELS.LIST);
+	}
+
+	/**
+	 * Fetch list of all models with detailed metadata (ROUTER mode).
+	 * Returns models with load status, paths, and other metadata
+	 * beyond what the OpenAI-compatible endpoint provides.
+	 *
+	 * @returns List of models with detailed status and configuration info
+	 */
+	static async listRouter(): Promise<ApiRouterModelsListResponse> {
+		return apiFetch<ApiRouterModelsListResponse>(API_MODELS.LIST);
+	}
+
+	/**
+	 *
+	 *
+	 * Load/Unload
+	 *
+	 *
+	 */
+
+	/**
+	 * Load a model (ROUTER mode only).
+	 * Sends POST request to `/models/load`. Note: the endpoint returns success
+	 * before loading completes — use polling to await actual load status.
+	 *
+	 * @param modelId - Model identifier to load
+	 * @param extraArgs - Optional additional arguments to pass to the model instance
+	 * @returns Load response from the server
+	 */
+	static async load(modelId: string, extraArgs?: string[]): Promise<ApiRouterModelsLoadResponse> {
+		const payload: { model: string; extra_args?: string[] } = { model: modelId };
+		if (extraArgs && extraArgs.length > 0) {
+			payload.extra_args = extraArgs;
+		}
+
+		return apiPost<ApiRouterModelsLoadResponse>(API_MODELS.LOAD, payload);
+	}
+
+	/**
+	 * Unload a model (ROUTER mode only).
+	 * Sends POST request to `/models/unload`. Note: the endpoint returns success
+	 * before unloading completes — use polling to await actual unload status.
+	 *
+	 * @param modelId - Model identifier to unload
+	 * @returns Unload response from the server
+	 */
+	static async unload(modelId: string): Promise<ApiRouterModelsUnloadResponse> {
+		return apiPost<ApiRouterModelsUnloadResponse>(API_MODELS.UNLOAD, { model: modelId });
+	}
+
+	/**
+	 *
+	 *
+	 * Status
+	 *
+	 *
+	 */
+
+	/**
+	 * Check if a model is loaded based on its metadata.
+	 *
+	 * @param model - Model data entry from the API response
+	 * @returns True if the model status is LOADED
+	 */
+	static isModelLoaded(model: ApiModelDataEntry): boolean {
+		return model.status.value === ServerModelStatus.LOADED;
+	}
+
+	/**
+	 * Check if a model is currently loading.
+	 *
+	 * @param model - Model data entry from the API response
+	 * @returns True if the model status is LOADING
+	 */
+	static isModelLoading(model: ApiModelDataEntry): boolean {
+		return model.status.value === ServerModelStatus.LOADING;
+	}
+
+	/**
+	 *
+	 *
+	 * Parsing
+	 *
+	 *
+	 */
+
+	/**
+	 * Parse a model ID string into its structured components.
+	 *
+	 * Handles conventions like:
+	 *   `<org>/<ModelName>-<Parameters>(-<ActivatedParameters>)(-<Tags>)(-<Quantization>):<Quantization>`
+	 *   `<ModelName>.<Quantization>` (dot-separated quantization, e.g. `model.Q4_K_M`)
+	 *
+	 * @param modelId - Raw model identifier string
+	 * @returns Structured {@link ParsedModelId} with all detected fields
+	 */
+	static parseModelId(modelId: string): ParsedModelId {
+		const result: ParsedModelId = {
+			raw: modelId,
+			orgName: null,
+			modelName: null,
+			params: null,
+			activatedParams: null,
+			quantization: null,
+			tags: []
+		};
+
+		// strip directory path and weight extension so a bare `-m /path/file.gguf`
+		// parses like a clean repo id; the HF `org/model` form is preserved
+		const source = normalizeModelName(modelId).replace(MODEL_WEIGHT_EXTENSION_RE, '');
+
+		// 1. Extract colon-separated quantization (e.g. `model:Q4_K_M`)
+		const colonIdx = source.indexOf(MODEL_ID_QUANTIZATION_SEPARATOR);
+		let modelPath: string;
+
+		if (colonIdx !== MODEL_ID_NOT_FOUND) {
+			result.quantization = source.slice(colonIdx + 1) || null;
+			modelPath = source.slice(0, colonIdx);
+		} else {
+			modelPath = source;
+		}
+
+		// 2. Extract org name (e.g. `org/model` -> org = "org")
+		const slashIdx = modelPath.indexOf(MODEL_ID_ORG_SEPARATOR);
+		let modelStr: string;
+
+		if (slashIdx !== MODEL_ID_NOT_FOUND) {
+			result.orgName = modelPath.slice(0, slashIdx);
+			modelStr = modelPath.slice(slashIdx + 1);
+		} else {
+			modelStr = modelPath;
+		}
+
+		// 3. Handle dot-separated quantization (e.g. `model-name.Q4_K_M`)
+		const dotIdx = modelStr.lastIndexOf('.');
+
+		if (dotIdx !== MODEL_ID_NOT_FOUND && !result.quantization) {
+			const afterDot = modelStr.slice(dotIdx + 1);
+
+			if (MODEL_QUANTIZATION_SEGMENT_RE.test(afterDot)) {
+				result.quantization = afterDot;
+				modelStr = modelStr.slice(0, dotIdx);
+			}
+		}
+
+		const segments = modelStr.split(MODEL_ID_SEGMENT_SEPARATOR);
+
+		// 4. Detect trailing quantization from dash-separated segments
+		//    Handle UD-prefixed quantization (e.g. `UD-Q8_K_XL`) and
+		//    standalone quantization (e.g. `Q4_K_M`, `BF16`, `F16`, `MXFP4`)
+		if (!result.quantization && segments.length > 1) {
+			const last = segments[segments.length - 1];
+			const secondLast = segments.length > 2 ? segments[segments.length - 2] : null;
+
+			if (MODEL_QUANTIZATION_SEGMENT_RE.test(last)) {
+				if (secondLast && MODEL_CUSTOM_QUANTIZATION_PREFIX_RE.test(secondLast)) {
+					result.quantization = `${secondLast}-${last}`;
+					segments.splice(segments.length - 2, 2);
+				} else {
+					result.quantization = last;
+					segments.pop();
+				}
+			}
+		}
+
+		// 5. Find params and activated params
+		let paramsIdx = MODEL_ID_NOT_FOUND;
+		let activatedParamsIdx = MODEL_ID_NOT_FOUND;
+
+		for (let i = 0; i < segments.length; i++) {
+			const seg = segments[i];
+
+			if (paramsIdx === MODEL_ID_NOT_FOUND && MODEL_PARAMS_RE.test(seg)) {
+				paramsIdx = i;
+				result.params = seg.toUpperCase();
+			} else if (paramsIdx !== MODEL_ID_NOT_FOUND && MODEL_ACTIVATED_PARAMS_RE.test(seg)) {
+				activatedParamsIdx = i;
+				result.activatedParams = seg.toUpperCase();
+			}
+		}
+
+		// 6. Model name = segments before params; tags = remaining segments after params
+		const pivotIdx = paramsIdx !== MODEL_ID_NOT_FOUND ? paramsIdx : segments.length;
+
+		result.modelName = segments.slice(0, pivotIdx).join(MODEL_ID_SEGMENT_SEPARATOR) || null;
+
+		if (paramsIdx !== MODEL_ID_NOT_FOUND) {
+			result.tags = segments.slice(paramsIdx + 1).filter((_, relIdx) => {
+				const absIdx = paramsIdx + 1 + relIdx;
+				if (absIdx === activatedParamsIdx) return false;
+
+				return !MODEL_IGNORED_SEGMENTS.has(segments[absIdx].toUpperCase());
+			});
+		}
+
+		return result;
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/services/parameter-sync.service.spec.ts b/backend/llama.cpp/tools/ui/src/lib/services/parameter-sync.service.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f15c0c143379372ce653a82bf98285d51fcec213
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/services/parameter-sync.service.spec.ts
@@ -0,0 +1,149 @@
+import { describe, it, expect } from 'vitest';
+import { ParameterSyncService } from './parameter-sync.service';
+import { ColorMode } from '$lib/enums';
+
+describe('ParameterSyncService', () => {
+	describe('roundFloatingPoint', () => {
+		it('should fix JavaScript floating-point precision issues', () => {
+			// Test the specific values from the screenshot
+			const mockServerParams = {
+				top_p: 0.949999988079071,
+				min_p: 0.009999999776482582,
+				temperature: 0.800000011920929,
+				top_k: 40,
+				samplers: ['top_k', 'typ_p', 'top_p', 'min_p', 'temperature']
+			};
+
+			const result = ParameterSyncService.extractServerDefaults({
+				...mockServerParams,
+				// Add other required fields to match the API type
+				n_predict: 512,
+				seed: -1,
+				dynatemp_range: 0.0,
+				dynatemp_exponent: 1.0,
+				xtc_probability: 0.0,
+				xtc_threshold: 0.1,
+				typ_p: 1.0,
+				repeat_last_n: 64,
+				repeat_penalty: 1.0,
+				presence_penalty: 0.0,
+				frequency_penalty: 0.0,
+				dry_multiplier: 0.0,
+				dry_base: 1.75,
+				dry_allowed_length: 2,
+				dry_penalty_last_n: -1,
+				mirostat: 0,
+				mirostat_tau: 5.0,
+				mirostat_eta: 0.1,
+				stop: [],
+				max_tokens: -1,
+				n_keep: 0,
+				n_discard: 0,
+				ignore_eos: false,
+				stream: true,
+				logit_bias: [],
+				n_probs: 0,
+				min_keep: 0,
+				grammar: '',
+				grammar_lazy: false,
+				grammar_triggers: [],
+				preserved_tokens: [],
+				chat_format: '',
+				reasoning_format: '',
+				reasoning_in_content: false,
+				generation_prompt: '',
+				'speculative.n_max': 0,
+				'speculative.n_min': 0,
+				'speculative.p_min': 0.0,
+				timings_per_token: false,
+				post_sampling_probs: false,
+				lora: [],
+				top_n_sigma: 0.0,
+				dry_sequence_breakers: []
+			} as ApiLlamaCppServerProps['default_generation_settings']['params']);
+
+			// Check that the problematic floating-point values are rounded correctly
+			expect(result.top_p).toBe(0.95);
+			expect(result.min_p).toBe(0.01);
+			expect(result.temperature).toBe(0.8);
+			expect(result.top_k).toBe(40); // Integer should remain unchanged
+			expect(result.samplers).toBe('top_k;typ_p;top_p;min_p;temperature');
+		});
+
+		it('should preserve non-numeric values', () => {
+			const mockServerParams = {
+				samplers: ['top_k', 'temperature'],
+				max_tokens: -1,
+				temperature: 0.7
+			};
+
+			const result = ParameterSyncService.extractServerDefaults({
+				...mockServerParams,
+				// Minimal required fields
+				n_predict: 512,
+				seed: -1,
+				dynatemp_range: 0.0,
+				dynatemp_exponent: 1.0,
+				top_k: 40,
+				top_p: 0.95,
+				min_p: 0.05,
+				xtc_probability: 0.0,
+				xtc_threshold: 0.1,
+				typ_p: 1.0,
+				repeat_last_n: 64,
+				repeat_penalty: 1.0,
+				presence_penalty: 0.0,
+				frequency_penalty: 0.0,
+				dry_multiplier: 0.0,
+				dry_base: 1.75,
+				dry_allowed_length: 2,
+				dry_penalty_last_n: -1,
+				mirostat: 0,
+				mirostat_tau: 5.0,
+				mirostat_eta: 0.1,
+				stop: [],
+				n_keep: 0,
+				n_discard: 0,
+				ignore_eos: false,
+				stream: true,
+				logit_bias: [],
+				n_probs: 0,
+				min_keep: 0,
+				grammar: '',
+				grammar_lazy: false,
+				grammar_triggers: [],
+				preserved_tokens: [],
+				chat_format: '',
+				reasoning_format: '',
+				reasoning_in_content: false,
+				generation_prompt: '',
+				'speculative.n_max': 0,
+				'speculative.n_min': 0,
+				'speculative.p_min': 0.0,
+				timings_per_token: false,
+				post_sampling_probs: false,
+				lora: [],
+				top_n_sigma: 0.0,
+				dry_sequence_breakers: []
+			} as ApiLlamaCppServerProps['default_generation_settings']['params']);
+
+			expect(result.samplers).toBe('top_k;temperature');
+			expect(result.max_tokens).toBe(-1);
+			expect(result.temperature).toBe(0.7);
+		});
+
+		it('should merge ui settings from props when provided', () => {
+			const result = ParameterSyncService.extractServerDefaults(null, {
+				pasteLongTextToFileLen: 0,
+				pdfAsImage: true,
+				renderUserContentAsMarkdown: false,
+				theme: ColorMode.DARK
+			});
+
+			expect(result.pasteLongTextToFileLen).toBe(0);
+			expect(result.pdfAsImage).toBe(true);
+			expect(result.renderUserContentAsMarkdown).toBe(false);
+			expect(result.theme).toBeUndefined();
+		});
+	});
+});
diff --git a/backend/llama.cpp/tools/ui/src/lib/services/parameter-sync.service.ts b/backend/llama.cpp/tools/ui/src/lib/services/parameter-sync.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..900471b3aa9e1a360c1ff80ed3f394eeb51d897f
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/services/parameter-sync.service.ts
@@ -0,0 +1,232 @@
+import { normalizeFloatingPoint } from '$lib/utils';
+import { SETTINGS_KEYS, SYNCABLE_PARAMETERS } from '$lib/constants';
+import type { ParameterRecord, ParameterInfo, ParameterValue } from '$lib/types';
+import { SyncableParameterType, ParameterSource } from '$lib/enums';
+
+export class ParameterSyncService {
+	/**
+	 *
+	 *
+	 * Extraction
+	 *
+	 *
+	 */
+
+	/**
+	 * Round floating-point numbers to avoid JavaScript precision issues.
+	 * E.g., 0.1 + 0.2 = 0.30000000000000004 → 0.3
+	 *
+	 * @param value - Parameter value to normalize
+	 * @returns Precision-normalized value
+	 */
+	private static roundFloatingPoint(value: ParameterValue): ParameterValue {
+		return normalizeFloatingPoint(value) as ParameterValue;
+	}
+
+	/**
+	 * Extract server default parameters that can be synced from `/props` response.
+	 * Handles both generation settings parameters and UI-specific settings.
+	 * Converts samplers array to semicolon-delimited string for UI display.
+	 *
+	 * @param serverParams - Raw generation settings from server `/props` endpoint
+	 * @param uiSettings - Optional UI-specific settings from server
+	 * @returns Record of extracted parameter key-value pairs with normalized precision
+	 */
+	static extractServerDefaults(
+		serverParams: ApiLlamaCppServerProps['default_generation_settings']['params'] | null,
+		uiSettings?: Record<string, string | number | boolean>
+	): ParameterRecord {
+		const extracted: ParameterRecord = {};
+
+		if (serverParams) {
+			for (const param of SYNCABLE_PARAMETERS) {
+				if (param.canSync && param.serverKey in serverParams) {
+					const value = (serverParams as unknown as Record<string, ParameterValue>)[
+						param.serverKey
+					];
+					if (value !== undefined) {
+						// Apply precision rounding to avoid JavaScript floating-point issues
+						extracted[param.key] = this.roundFloatingPoint(value);
+					}
+				}
+			}
+
+			// Handle samplers array conversion to string
+			if (serverParams.samplers && Array.isArray(serverParams.samplers)) {
+				extracted[SETTINGS_KEYS.SAMPLERS] = serverParams.samplers.join(';');
+			}
+		}
+
+		if (uiSettings) {
+			for (const param of SYNCABLE_PARAMETERS) {
+				if (param.canSync && param.serverKey in uiSettings) {
+					const value = uiSettings[param.serverKey];
+
+					if (value !== undefined) {
+						extracted[param.key] = this.roundFloatingPoint(value);
+					}
+				}
+			}
+		}
+
+		return extracted;
+	}
+
+	/**
+	 *
+	 *
+	 * Merging
+	 *
+	 *
+	 */
+
+	/**
+	 * Merge server defaults with current user settings.
+	 * User overrides always take priority — only parameters not in `userOverrides`
+	 * set will be updated from server defaults.
+	 *
+	 * @param currentSettings - Current parameter values in the settings store
+	 * @param serverDefaults - Default values extracted from server props
+	 * @param userOverrides - Set of parameter keys explicitly overridden by the user
+	 * @returns Merged parameter record with user overrides preserved
+	 */
+	static mergeWithServerDefaults(
+		currentSettings: ParameterRecord,
+		serverDefaults: ParameterRecord,
+		userOverrides: Set<string> = new Set()
+	): ParameterRecord {
+		const merged = { ...currentSettings };
+
+		for (const [key, serverValue] of Object.entries(serverDefaults)) {
+			// Only update if user hasn't explicitly overridden this parameter
+			if (!userOverrides.has(key)) {
+				merged[key] = this.roundFloatingPoint(serverValue);
+			}
+		}
+
+		return merged;
+	}
+
+	/**
+	 *
+	 *
+	 * Info
+	 *
+	 *
+	 */
+
+	/**
+	 * Get parameter information including source and values.
+	 * Used by SettingsChatParameterSourceIndicator to display the correct badge
+	 * (Custom vs Default) for each parameter in the settings UI.
+	 *
+	 * @param key - The parameter key to get info for
+	 * @param currentValue - The current value of the parameter
+	 * @param propsDefaults - Server default values from `/props`
+	 * @param userOverrides - Set of parameter keys explicitly overridden by the user
+	 * @returns Parameter info with source, server default, and user override values
+	 */
+	static getParameterInfo(
+		key: string,
+		currentValue: ParameterValue,
+		propsDefaults: ParameterRecord,
+		userOverrides: Set<string>
+	): ParameterInfo {
+		const hasPropsDefault = propsDefaults[key] !== undefined;
+		const isUserOverride = userOverrides.has(key);
+
+		// Simple logic: either using default (from props) or custom (user override)
+		const source = isUserOverride ? ParameterSource.CUSTOM : ParameterSource.DEFAULT;
+
+		return {
+			value: currentValue,
+			source,
+			serverDefault: hasPropsDefault ? propsDefaults[key] : undefined, // Keep same field name for compatibility
+			userOverride: isUserOverride ? currentValue : undefined
+		};
+	}
+
+	/**
+	 * Check if a parameter can be synced from server.
+	 *
+	 * @param key - The parameter key to check
+	 * @returns True if the parameter is in the syncable parameters list
+	 */
+	static canSyncParameter(key: string): boolean {
+		return SYNCABLE_PARAMETERS.some((param) => param.key === key && param.canSync);
+	}
+
+	/**
+	 * Get all syncable parameter keys.
+	 *
+	 * @returns Array of parameter keys that can be synced from server
+	 */
+	static getSyncableParameterKeys(): string[] {
+		return SYNCABLE_PARAMETERS.filter((param) => param.canSync).map((param) => param.key);
+	}
+
+	/**
+	 * Validate a server parameter value against its expected type.
+	 *
+	 * @param key - The parameter key to validate
+	 * @param value - The value to validate
+	 * @returns True if value matches the expected type for this parameter
+	 */
+	static validateServerParameter(key: string, value: ParameterValue): boolean {
+		const param = SYNCABLE_PARAMETERS.find((p) => p.key === key);
+		if (!param) return false;
+
+		switch (param.type) {
+			case SyncableParameterType.NUMBER:
+				return typeof value === 'number' && !isNaN(value);
+			case SyncableParameterType.STRING:
+				return typeof value === 'string';
+			case SyncableParameterType.BOOLEAN:
+				return typeof value === 'boolean';
+			default:
+				return false;
+		}
+	}
+
+	/**
+	 *
+	 *
+	 * Diff
+	 *
+	 *
+	 */
+
+	/**
+	 * Create a diff between current settings and server defaults.
+	 * Shows which parameters differ from server values, useful for debugging
+	 * and for the "Reset to defaults" functionality.
+	 *
+	 * @param currentSettings - Current parameter values in the settings store
+	 * @param serverDefaults - Default values extracted from server props
+	 * @returns Record of parameter diffs with current value, server value, and whether they differ
+	 */
+	static createParameterDiff(
+		currentSettings: ParameterRecord,
+		serverDefaults: ParameterRecord
+	): Record<string, { current: ParameterValue; server: ParameterValue; differs: boolean }> {
+		const diff: Record<
+			string,
+			{ current: ParameterValue; server: ParameterValue; differs: boolean }
+		> = {};
+
+		for (const key of this.getSyncableParameterKeys()) {
+			const currentValue = currentSettings[key];
+			const serverValue = serverDefaults[key];
+
+			if (serverValue !== undefined) {
+				diff[key] = {
+					current: currentValue,
+					server: serverValue,
+					differs: currentValue !== serverValue
+				};
+			}
+		}
+
+		return diff;
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/services/props.service.ts b/backend/llama.cpp/tools/ui/src/lib/services/props.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..45c3e457732c1b7bb17f36f3c9583aee22b5eb47
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/services/props.service.ts
@@ -0,0 +1,47 @@
+import { apiFetchWithParams } from '$lib/utils';
+
+export class PropsService {
+	/**
+	 *
+	 *
+	 * Fetching
+	 *
+	 *
+	 */
+
+	/**
+	 * Fetches global server properties from the `/props` endpoint.
+	 * In MODEL mode, returns modalities for the single loaded model.
+	 * In ROUTER mode, returns server-wide settings without model-specific modalities.
+	 *
+	 * @param autoload - If false, prevents automatic model loading (default: false)
+	 * @returns Server properties including default generation settings and capabilities
+	 * @throws {Error} If the request fails or returns invalid data
+	 */
+	static async fetch(autoload = false): Promise<ApiLlamaCppServerProps> {
+		const params: Record<string, string> = {};
+		if (!autoload) {
+			params.autoload = 'false';
+		}
+
+		return apiFetchWithParams<ApiLlamaCppServerProps>('./props', params, { authOnly: true });
+	}
+
+	/**
+	 * Fetches server properties for a specific model (ROUTER mode only).
+	 * Required in ROUTER mode because global `/props` does not include per-model modalities.
+	 *
+	 * @param modelId - The model ID to fetch properties for
+	 * @param autoload - If false, prevents automatic model loading (default: false)
+	 * @returns Server properties specific to the requested model
+	 * @throws {Error} If the request fails, model not found, or model not loaded
+	 */
+	static async fetchForModel(modelId: string, autoload = false): Promise<ApiLlamaCppServerProps> {
+		const params: Record<string, string> = { model: modelId };
+		if (!autoload) {
+			params.autoload = 'false';
+		}
+
+		return apiFetchWithParams<ApiLlamaCppServerProps>('./props', params, { authOnly: true });
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/services/router.service.ts b/backend/llama.cpp/tools/ui/src/lib/services/router.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6fa172eec23428de10c9adc5ba33772630f512a3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/services/router.service.ts
@@ -0,0 +1,11 @@
+import { ROUTES } from '$lib/constants/routes';
+
+export class RouterService {
+	static chat(id: string): string {
+		return `${ROUTES.CHAT}/${id}`;
+	}
+
+	static settings(section: string): string {
+		return `${ROUTES.SETTINGS}/${section}`;
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/services/sandbox-harness.ts b/backend/llama.cpp/tools/ui/src/lib/services/sandbox-harness.ts
new file mode 100644
index 0000000000000000000000000000000000000000..27b05e24b4b4a33416328dfa79b2fac88b47cab8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/services/sandbox-harness.ts
@@ -0,0 +1,25 @@
+import WORKER_SHIM from './sandbox-worker.js?raw';
+
+/**
+ * Harness loaded as srcdoc into a sandboxed iframe (allow-scripts only).
+ * The opaque origin is the security boundary: no access to the app origin,
+ * its storage or its API. The harness spawns a worker so model code never
+ * runs on a main thread, which makes the parent timeout enforceable by
+ * removing the iframe.
+ */
+export const SANDBOX_HARNESS_HTML = `<!doctype html><script>
+const SHIM = ${JSON.stringify(WORKER_SHIM)};
+addEventListener('message', (event) => {
+	const respond = (payload) => parent.postMessage(payload, '*');
+	let worker;
+	try {
+		worker = new Worker(URL.createObjectURL(new Blob([SHIM], { type: 'text/javascript' })));
+	} catch (err) {
+		respond({ logs: [], result: null, error: 'Worker creation failed: ' + err });
+		return;
+	}
+	worker.onmessage = (msg) => respond(msg.data);
+	worker.onerror = (err) => respond({ logs: [], result: null, error: String(err.message || err) });
+	worker.postMessage({ code: event.data.code });
+});
+</script>`;
diff --git a/backend/llama.cpp/tools/ui/src/lib/services/sandbox-worker.js b/backend/llama.cpp/tools/ui/src/lib/services/sandbox-worker.js
new file mode 100644
index 0000000000000000000000000000000000000000..689b9211eb5403749353eeaceab8fcf4d94746e1
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/services/sandbox-worker.js
@@ -0,0 +1,30 @@
+const logs = [];
+const fmt = (value) => {
+	if (typeof value === 'string') return value;
+	try {
+		return JSON.stringify(value);
+	} catch {
+		return String(value);
+	}
+};
+const capture =
+	(level, prefix) =>
+	(...args) => {
+		logs.push(prefix + args.map(fmt).join(' '));
+	};
+console.log = capture('log', '');
+console.info = capture('info', '');
+console.debug = capture('debug', '');
+console.warn = capture('warn', 'warn: ');
+console.error = capture('error', 'error: ');
+self.onmessage = async (event) => {
+	const reply = { logs, result: null, error: null };
+	try {
+		const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;
+		const value = await new AsyncFunction(event.data.code)();
+		if (value !== undefined) reply.result = fmt(value);
+	} catch (err) {
+		reply.error = err instanceof Error ? err.stack || err.message : String(err);
+	}
+	self.postMessage(reply);
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/services/sandbox.service.ts b/backend/llama.cpp/tools/ui/src/lib/services/sandbox.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ef0e6cf4eb445ca0c15cee1011568df993526de7
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/services/sandbox.service.ts
@@ -0,0 +1,112 @@
+import {
+	NEWLINE_SEPARATOR,
+	SANDBOX_EMPTY_OUTPUT,
+	SANDBOX_OUTPUT_MAX_CHARS,
+	SANDBOX_TIMEOUT_MS_DEFAULT,
+	SANDBOX_TIMEOUT_MS_MAX,
+	SANDBOX_TOOL_NAME,
+	SANDBOX_TRUNCATION_NOTICE
+} from '$lib/constants';
+import { SANDBOX_HARNESS_HTML } from './sandbox-harness';
+import type { ToolExecutionResult } from '$lib/types';
+
+interface SandboxReply {
+	logs?: unknown;
+	result?: unknown;
+	error?: unknown;
+}
+
+function formatReply(reply: SandboxReply): ToolExecutionResult {
+	const lines: string[] = [];
+
+	if (Array.isArray(reply.logs)) {
+		for (const line of reply.logs) lines.push(String(line));
+	}
+
+	if (reply.error != null) {
+		lines.push(`Error: ${String(reply.error)}`);
+	} else if (reply.result != null) {
+		lines.push(`=> ${String(reply.result)}`);
+	}
+
+	let content = lines.join(NEWLINE_SEPARATOR);
+	if (!content) content = SANDBOX_EMPTY_OUTPUT;
+	if (content.length > SANDBOX_OUTPUT_MAX_CHARS) {
+		content = `${content.slice(0, SANDBOX_OUTPUT_MAX_CHARS)}${NEWLINE_SEPARATOR}${SANDBOX_TRUNCATION_NOTICE}`;
+	}
+
+	return { content, isError: reply.error != null };
+}
+
+export class SandboxService {
+	/**
+	 * Execute a frontend sandbox tool call and return its output.
+	 * One disposable iframe per execution, removed on completion,
+	 * timeout or abort. Removing the iframe terminates the worker
+	 * at the browser level, so runaway code cannot outlive it.
+	 */
+	static executeTool(
+		toolName: string,
+		params: Record<string, unknown>,
+		signal?: AbortSignal
+	): Promise<ToolExecutionResult> {
+		if (toolName !== SANDBOX_TOOL_NAME) {
+			return Promise.resolve({ content: `Unknown frontend tool: ${toolName}`, isError: true });
+		}
+
+		const code = typeof params.code === 'string' ? params.code : '';
+		if (!code) {
+			return Promise.resolve({ content: 'Missing required parameter: code', isError: true });
+		}
+
+		const requested = Number(params.timeout_ms);
+		const timeoutMs =
+			Number.isFinite(requested) && requested > 0
+				? Math.min(requested, SANDBOX_TIMEOUT_MS_MAX)
+				: SANDBOX_TIMEOUT_MS_DEFAULT;
+
+		return new Promise<ToolExecutionResult>((resolve, reject) => {
+			const iframe = document.createElement('iframe');
+			iframe.setAttribute('sandbox', 'allow-scripts');
+			iframe.style.display = 'none';
+			iframe.srcdoc = SANDBOX_HARNESS_HTML;
+
+			let settled = false;
+
+			const cleanup = () => {
+				settled = true;
+				clearTimeout(timer);
+				window.removeEventListener('message', onMessage);
+				signal?.removeEventListener('abort', onAbort);
+				iframe.remove();
+			};
+
+			const finish = (result: ToolExecutionResult) => {
+				if (settled) return;
+				cleanup();
+				resolve(result);
+			};
+
+			const onAbort = () => {
+				if (settled) return;
+				cleanup();
+				reject(new DOMException('Sandbox execution aborted', 'AbortError'));
+			};
+
+			const onMessage = (event: MessageEvent) => {
+				if (event.source !== iframe.contentWindow) return;
+				finish(formatReply((event.data ?? {}) as SandboxReply));
+			};
+
+			const timer = setTimeout(
+				() => finish({ content: `Execution timed out after ${timeoutMs} ms`, isError: true }),
+				timeoutMs
+			);
+
+			window.addEventListener('message', onMessage);
+			signal?.addEventListener('abort', onAbort);
+			iframe.onload = () => iframe.contentWindow?.postMessage({ code }, '*');
+			document.body.appendChild(iframe);
+		});
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/services/tools.service.ts b/backend/llama.cpp/tools/ui/src/lib/services/tools.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8f39f5209f8e6552677e9172de933eb5ae6b6dab
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/services/tools.service.ts
@@ -0,0 +1,40 @@
+import { apiFetch } from '$lib/utils';
+import { API_TOOLS } from '$lib/constants';
+import { ToolResponseField } from '$lib/enums';
+import type { ToolExecutionResult, ServerBuiltinToolInfo } from '$lib/types';
+
+export class ToolsService {
+	/**
+	 * Fetch the list of built-in tools from the server.
+	 *
+	 * @returns Array of tool definitions in OpenAI-compatible format
+	 */
+	static async list(): Promise<ServerBuiltinToolInfo[]> {
+		return apiFetch<ServerBuiltinToolInfo[]>(API_TOOLS.LIST);
+	}
+
+	/**
+	 * Execute a built-in tool on the server.
+	 */
+	static async executeTool(
+		toolName: string,
+		params: Record<string, unknown>,
+		signal?: AbortSignal
+	): Promise<ToolExecutionResult> {
+		const result = await apiFetch<Record<string, unknown>>(API_TOOLS.EXECUTE, {
+			method: 'POST',
+			body: JSON.stringify({ tool: toolName, params }),
+			signal
+		});
+
+		if (ToolResponseField.ERROR in result) {
+			return { content: String(result[ToolResponseField.ERROR]), isError: true };
+		}
+
+		if (ToolResponseField.PLAIN_TEXT in result) {
+			return { content: String(result[ToolResponseField.PLAIN_TEXT]), isError: false };
+		}
+
+		return { content: JSON.stringify(result), isError: false };
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/stores/agentic.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/stores/agentic.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1a677602f9b5ea5dd0c3ff6d42d9fc9370d5f69c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/stores/agentic.svelte.ts
@@ -0,0 +1,1037 @@
+/**
+ * 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
+ *
+ * Each agentic turn produces separate DB messages:
+ * - One assistant message per LLM turn (with tool_calls if any)
+ * - One tool result message per tool call execution
+ *
+ * **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 { 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 { toolsStore } from '$lib/stores/tools.svelte';
+import { permissionsStore } from '$lib/stores/permissions.svelte';
+import { ToolSource, ToolPermissionDecision } from '$lib/enums';
+import { SvelteMap } from 'svelte/reactivity';
+import { ToolsService } from '$lib/services/tools.service';
+import { SandboxService } from '$lib/services/sandbox.service';
+import { isAbortError } from '$lib/utils';
+import { DEFAULT_AGENTIC_CONFIG, NEWLINE_SEPARATOR } from '$lib/constants';
+import {
+	IMAGE_MIME_TO_EXTENSION,
+	DATA_URI_BASE64_REGEX,
+	MCP_ATTACHMENT_NAME_PREFIX,
+	DEFAULT_IMAGE_EXTENSION
+} from '$lib/constants';
+import {
+	AttachmentType,
+	ContentPartType,
+	MessageRole,
+	MimeTypePrefix,
+	ToolCallType
+} from '$lib/enums';
+import type {
+	AgenticFlowParams,
+	AgenticFlowResult,
+	AgenticSession,
+	AgenticConfig,
+	SettingsConfigType,
+	McpServerOverride,
+	MCPToolCall
+} from '$lib/types';
+import type {
+	AgenticMessage,
+	AgenticToolCallList,
+	AgenticFlowCallbacks,
+	AgenticFlowOptions,
+	SteeringMessage
+} 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,
+		pendingPermissionRequest: 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,
+				reasoning_content: message.reasoning_content,
+				tool_calls: message.tool_calls.map((call, index) => ({
+					id: call.id ?? `call_${index}`,
+					type: (call.type as ToolCallType.FUNCTION) ?? ToolCallType.FUNCTION,
+					function: {
+						name: call.function?.name ?? '',
+						arguments: call.function?.arguments ?? ''
+					}
+				}))
+			} satisfies AgenticMessage;
+		}
+		if (message.role === MessageRole.ASSISTANT) {
+			return {
+				role: MessageRole.ASSISTANT,
+				content: message.content,
+				reasoning_content: message.reasoning_content
+			} 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 = new SvelteMap<string, AgenticSession>();
+	/** Dedicated reactive state for pending permission requests (ensures immediate UI updates) */
+	private _pendingPermissions = new SvelteMap<
+		string,
+		{ toolName: string; serverLabel: string } | null
+	>();
+	/** Non-reactive: stores resolve functions for pending permission Promises */
+	private _permissionResolvers = new Map<string, (decision: ToolPermissionDecision) => void>();
+
+	/** Dedicated reactive state for pending continue requests (turn limit reached) */
+	private _pendingContinueRequests = new SvelteMap<string, boolean>();
+	/** Non-reactive: stores resolve functions for pending continue Promises */
+	private _continueResolvers = new Map<string, (shouldContinue: boolean) => void>();
+
+	/** Reactive: queued steering messages to inject between turns */
+	private _steeringMessages = new SvelteMap<string, SteeringMessage>();
+
+	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;
+	}
+
+	pendingPermissionRequest(
+		conversationId: string
+	): { toolName: string; serverLabel: string } | null {
+		return this._pendingPermissions.get(conversationId) ?? null;
+	}
+
+	pendingContinueRequest(conversationId: string): boolean {
+		return this._pendingContinueRequests.get(conversationId) ?? false;
+	}
+
+	resolveContinue(conversationId: string, shouldContinue: boolean): void {
+		const resolver = this._continueResolvers.get(conversationId);
+		if (resolver) {
+			this._continueResolvers.delete(conversationId);
+			resolver(shouldContinue);
+		}
+	}
+
+	resolvePermission(conversationId: string, decision: ToolPermissionDecision): void {
+		const resolver = this._permissionResolvers.get(conversationId);
+		if (resolver) {
+			this._permissionResolvers.delete(conversationId);
+			resolver(decision);
+		}
+	}
+
+	clearError(conversationId: string): void {
+		this.updateSession(conversationId, { lastError: null });
+	}
+
+	hasPendingSteeringMessage(conversationId: string): boolean {
+		return this._steeringMessages.has(conversationId);
+	}
+
+	pendingSteeringMessageContent(conversationId: string): string | null {
+		return this._steeringMessages.get(conversationId)?.content ?? null;
+	}
+
+	pendingSteeringMessageExtras(conversationId: string): DatabaseMessageExtra[] | undefined {
+		return this._steeringMessages.get(conversationId)?.extras;
+	}
+
+	/**
+	 * Queue a steering message. When the current agentic turn completes,
+	 * the flow exits and the caller re-sends the message as a normal chat message.
+	 */
+	injectSteeringMessage(
+		conversationId: string,
+		content: string,
+		extras?: DatabaseMessageExtra[]
+	): void {
+		this._steeringMessages.set(conversationId, { content, extras });
+	}
+
+	/**
+	 * Clear the pending steering message without consuming it.
+	 */
+	clearSteeringMessage(conversationId: string): void {
+		this._steeringMessages.delete(conversationId);
+	}
+
+	/**
+	 * Consume and return the pending steering message for re-sending.
+	 * Called by chatStore after the agentic flow exits.
+	 */
+	consumePendingSteeringMessage(conversationId: string): SteeringMessage | null {
+		const msg = this._steeringMessages.get(conversationId);
+		if (!msg) return null;
+		this._steeringMessages.delete(conversationId);
+		return msg;
+	}
+
+	getConfig(settings: SettingsConfigType, perChatOverrides?: McpServerOverride[]): AgenticConfig {
+		const maxTurns = Number(settings.agenticMaxTurns) || DEFAULT_AGENTIC_CONFIG.maxTurns;
+		const maxToolPreviewLines =
+			Number(settings.agenticMaxToolPreviewLines) || DEFAULT_AGENTIC_CONFIG.maxToolPreviewLines;
+		const hasTools =
+			mcpStore.hasEnabledServers(perChatOverrides) ||
+			toolsStore.builtinTools.length > 0 ||
+			toolsStore.customTools.length > 0;
+		return {
+			enabled: hasTools && DEFAULT_AGENTIC_CONFIG.enabled,
+			maxTurns,
+			maxToolPreviewLines
+		};
+	}
+
+	private parseToolArguments(args: string | Record<string, unknown>): Record<string, unknown> {
+		if (typeof args === 'object') return args;
+		const trimmed = args.trim();
+		if (trimmed === '') return {};
+		return JSON.parse(trimmed) as Record<string, unknown>;
+	}
+
+	private async requestPermission(
+		conversationId: string,
+		toolName: string,
+		serverLabel: string,
+		signal?: AbortSignal
+	): Promise<ToolPermissionDecision> {
+		const permissionKey = toolsStore.getPermissionKey(toolName);
+		if (permissionKey && permissionsStore.hasTool(permissionKey)) {
+			return ToolPermissionDecision.ONCE;
+		}
+
+		this._pendingPermissions.set(conversationId, { toolName, serverLabel });
+
+		return new Promise<ToolPermissionDecision>((resolve) => {
+			if (signal?.aborted) {
+				this._pendingPermissions.set(conversationId, null);
+				resolve(ToolPermissionDecision.DENY);
+				return;
+			}
+
+			this._permissionResolvers.set(conversationId, (decision) => {
+				this._pendingPermissions.set(conversationId, null);
+				if (decision === ToolPermissionDecision.ALWAYS && permissionKey) {
+					permissionsStore.allowTool(permissionKey);
+				} else if (decision === ToolPermissionDecision.ALWAYS_SERVER) {
+					const serverToolKeys = toolsStore.allTools
+						.filter((t) =>
+							t.serverName
+								? t.serverName === serverLabel
+								: toolsStore.getToolServerLabel(t.definition.function.name) === serverLabel
+						)
+						.map((t) => toolsStore.getPermissionKey(t.definition.function.name)!)
+						.filter((k): k is string => k !== null);
+					permissionsStore.allowTools(serverToolKeys);
+				}
+				resolve(decision);
+			});
+
+			signal?.addEventListener(
+				'abort',
+				() => {
+					const resolver = this._permissionResolvers.get(conversationId);
+					if (resolver) {
+						this._permissionResolvers.delete(conversationId);
+						this._pendingPermissions.set(conversationId, null);
+						resolve(ToolPermissionDecision.DENY);
+					}
+				},
+				{ once: true }
+			);
+		});
+	}
+
+	private async requestContinue(conversationId: string, signal?: AbortSignal): Promise<boolean> {
+		this._pendingContinueRequests.set(conversationId, true);
+
+		return new Promise<boolean>((resolve) => {
+			if (signal?.aborted) {
+				this._pendingContinueRequests.set(conversationId, false);
+				resolve(false);
+				return;
+			}
+
+			this._continueResolvers.set(conversationId, (shouldContinue) => {
+				this._pendingContinueRequests.set(conversationId, false);
+				resolve(shouldContinue);
+			});
+
+			signal?.addEventListener(
+				'abort',
+				() => {
+					const resolver = this._continueResolvers.get(conversationId);
+					if (resolver) {
+						this._continueResolvers.delete(conversationId);
+						this._pendingContinueRequests.set(conversationId, false);
+						resolve(false);
+					}
+				},
+				{ once: true }
+			);
+		});
+	}
+
+	async runAgenticFlow(params: AgenticFlowParams): Promise<AgenticFlowResult> {
+		const { conversationId, messages, options = {}, callbacks, signal, perChatOverrides } = params;
+
+		// Clear any pending permissions/continue requests for this conversation when starting a new flow
+		this._pendingPermissions.set(conversationId, null);
+		this._permissionResolvers.delete(conversationId);
+		this._pendingContinueRequests.set(conversationId, false);
+		this._continueResolvers.delete(conversationId);
+		this._steeringMessages.delete(conversationId);
+
+		// Ensure built-in tools are fetched before checking if agentic is enabled
+		if (toolsStore.builtinTools.length === 0 && !toolsStore.loading) {
+			await toolsStore.fetchBuiltinTools();
+		}
+
+		const agenticConfig = this.getConfig(config(), perChatOverrides);
+		if (!agenticConfig.enabled) return { handled: false };
+
+		const hasMcpServers = mcpStore.hasEnabledServers(perChatOverrides);
+		if (hasMcpServers) {
+			const initialized = await mcpStore.ensureInitialized(perChatOverrides);
+
+			if (!initialized) {
+				console.log('[AgenticStore] MCP not initialized');
+			}
+		}
+
+		const tools = toolsStore.getEnabledToolsForLLM();
+		if (tools.length === 0) {
+			return { handled: false };
+		}
+
+		console.log(`[AgenticStore] Starting agentic flow with ${tools.length} tools`);
+
+		const normalizedMessages: ApiChatMessageData[] = (
+			await Promise.all(
+				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: { role: ChatRole; content: string | ApiChatMessageContentPart[] }) => {
+			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
+		});
+
+		if (hasMcpServers) mcpStore.acquireConnection();
+
+		try {
+			await this.executeAgenticLoop({
+				conversationId,
+				messages: normalizedMessages,
+				options,
+				tools,
+				agenticConfig,
+				callbacks,
+				signal
+			});
+			return { handled: true };
+		} catch (error) {
+			const normalizedError = error instanceof Error ? error : new Error(String(error));
+			this.updateSession(conversationId, { lastError: normalizedError });
+			callbacks.onError?.(normalizedError);
+			return { handled: true, error: normalizedError };
+		} finally {
+			this.updateSession(conversationId, { isRunning: false });
+
+			if (hasMcpServers) {
+				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 toolsStore.getEnabledToolsForLLM>;
+		agenticConfig: AgenticConfig;
+		callbacks: AgenticFlowCallbacks;
+		signal?: AbortSignal;
+	}): Promise<void> {
+		const { conversationId, messages, options, tools, agenticConfig, callbacks, signal } = params;
+		const {
+			onChunk,
+			onReasoningChunk,
+			onToolCallsStreaming,
+			onAttachments,
+			onModel,
+			onCompletionId,
+			onAssistantTurnComplete,
+			createToolResultMessage,
+			createAssistantMessage,
+			onFlowComplete,
+			onTimings,
+			onTurnComplete
+		} = callbacks;
+
+		const sessionMessages: AgenticMessage[] = toAgenticMessages(messages);
+		let capturedTimings: ChatMessageTimings | undefined;
+		let totalToolCallCount = 0;
+
+		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 effectiveModel = options.model || modelsStore.models[0]?.model || '';
+
+		let turn = 0;
+		while (true) {
+			if (turn >= maxTurns) {
+				// Turn limit reached - ask user whether to continue
+				const shouldContinue = await this.requestContinue(conversationId, signal);
+
+				// Yield to allow Svelte to flush the UI update
+				await new Promise((r) => setTimeout(r, 0));
+
+				if (!shouldContinue || signal?.aborted) {
+					onFlowComplete?.(this.buildFinalTimings(capturedTimings, agenticTimings));
+					return;
+				}
+
+				// User chose to continue - extend the limit
+				turn = 0;
+			}
+
+			this.updateSession(conversationId, { currentTurn: turn + 1 });
+			agenticTimings.turns = turn + 1;
+
+			if (signal?.aborted) {
+				onFlowComplete?.(this.buildFinalTimings(capturedTimings, agenticTimings));
+				return;
+			}
+
+			// For turns > 0, create a new assistant message via callback
+			if (turn > 0 && createAssistantMessage) {
+				await createAssistantMessage();
+			}
+
+			let turnContent = '';
+			let turnReasoningContent = '';
+			let turnToolCalls: ApiChatCompletionToolCall[] = [];
+			let lastStreamingToolCallName = '';
+			let lastStreamingToolCallArgsLength = 0;
+			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: (chunk: string) => {
+							turnReasoningContent += chunk;
+							onReasoningChunk?.(chunk);
+						},
+						onToolCallChunk: (serialized: string) => {
+							try {
+								turnToolCalls = JSON.parse(serialized) as ApiChatCompletionToolCall[];
+								onToolCallsStreaming?.(turnToolCalls);
+
+								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,
+						onCompletionId,
+						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;
+						}
+					},
+					conversationId,
+					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) {
+					// Save whatever we have for this turn before exiting
+					await onAssistantTurnComplete?.(
+						turnContent,
+						turnReasoningContent || undefined,
+						this.buildFinalTimings(capturedTimings, agenticTimings),
+						undefined
+					);
+					onFlowComplete?.(this.buildFinalTimings(capturedTimings, agenticTimings));
+					return;
+				}
+				const normalizedError = error instanceof Error ? error : new Error('LLM stream error');
+				// preserve partial output as is, the outer error dialog informs the user separately
+				await onAssistantTurnComplete?.(
+					turnContent,
+					turnReasoningContent || undefined,
+					this.buildFinalTimings(capturedTimings, agenticTimings),
+					undefined
+				);
+				onFlowComplete?.(this.buildFinalTimings(capturedTimings, agenticTimings));
+				throw normalizedError;
+			}
+
+			// === Steering check: if a user message was queued during this turn, exit the flow.
+			// The caller (chatStore) will consume the pending message and re-send it normally.
+			if (this._steeringMessages.has(conversationId)) {
+				console.log('[AgenticStore] Steering message detected after turn, exiting agentic flow');
+				await onAssistantTurnComplete?.(
+					turnContent,
+					turnReasoningContent || undefined,
+					this.buildFinalTimings(capturedTimings, agenticTimings),
+					turnToolCalls.length > 0 ? this.normalizeToolCalls(turnToolCalls) : undefined
+				);
+				onFlowComplete?.(this.buildFinalTimings(capturedTimings, agenticTimings));
+				return;
+			}
+
+			// No tool calls = final turn, save and complete
+			if (turnToolCalls.length === 0) {
+				agenticTimings.perTurn!.push(turnStats);
+
+				const finalTimings = this.buildFinalTimings(capturedTimings, agenticTimings);
+
+				await onAssistantTurnComplete?.(
+					turnContent,
+					turnReasoningContent || undefined,
+					finalTimings,
+					undefined
+				);
+
+				if (finalTimings) onTurnComplete?.(finalTimings);
+
+				onFlowComplete?.(finalTimings);
+
+				return;
+			}
+
+			// Normalize and save assistant turn with tool calls
+			const normalizedCalls = this.normalizeToolCalls(turnToolCalls);
+			if (normalizedCalls.length === 0) {
+				await onAssistantTurnComplete?.(
+					turnContent,
+					turnReasoningContent || undefined,
+					this.buildFinalTimings(capturedTimings, agenticTimings),
+					undefined
+				);
+				onFlowComplete?.(this.buildFinalTimings(capturedTimings, agenticTimings));
+				return;
+			}
+
+			totalToolCallCount += normalizedCalls.length;
+			this.updateSession(conversationId, { totalToolCalls: totalToolCallCount });
+
+			// Save the assistant message with its tool calls
+			await onAssistantTurnComplete?.(
+				turnContent,
+				turnReasoningContent || undefined,
+				turnTimings,
+				normalizedCalls
+			);
+
+			// Add assistant message to session history
+			sessionMessages.push({
+				role: MessageRole.ASSISTANT,
+				content: turnContent || undefined,
+				reasoning_content: turnReasoningContent || undefined,
+				tool_calls: normalizedCalls
+			});
+
+			// Execute each tool call and create result messages
+			for (let i = 0; i < normalizedCalls.length; i++) {
+				const toolCall = normalizedCalls[i];
+
+				if (signal?.aborted) {
+					onFlowComplete?.(this.buildFinalTimings(capturedTimings, agenticTimings));
+					return;
+				}
+
+				// Check for pending steering message - skip remaining tool calls
+				if (this._steeringMessages.has(conversationId)) {
+					console.log(
+						`[AgenticStore] Steering message detected, skipping ${normalizedCalls.length - i} remaining tool call(s)`
+					);
+					for (let j = i; j < normalizedCalls.length; j++) {
+						const remainingCall = normalizedCalls[j];
+						const interruptedContent = 'Tool execution was interrupted by a new user message.';
+						if (createToolResultMessage) {
+							await createToolResultMessage(remainingCall.id, interruptedContent);
+						}
+						sessionMessages.push({
+							role: MessageRole.TOOL,
+							tool_call_id: remainingCall.id,
+							content: interruptedContent
+						});
+					}
+					break;
+				}
+
+				const toolName = toolCall.function.name;
+				const serverLabel = toolsStore.getToolServerLabel(toolName);
+
+				// Ask for permission before executing the tool
+				const permission = await this.requestPermission(
+					conversationId,
+					toolName,
+					serverLabel,
+					signal
+				);
+
+				// Yield to allow Svelte to flush the UI update (hide permission dialog)
+				await new Promise((r) => setTimeout(r, 0));
+
+				if (signal?.aborted) {
+					onFlowComplete?.(this.buildFinalTimings(capturedTimings, agenticTimings));
+					return;
+				}
+
+				const toolStartTime = performance.now();
+				const toolSource = toolsStore.getToolSource(toolName);
+
+				let result: string;
+				let toolSuccess = true;
+
+				if (permission === ToolPermissionDecision.DENY) {
+					result = 'Tool execution was denied by the user.';
+					toolSuccess = false;
+				} else {
+					try {
+						if (toolSource === ToolSource.BUILTIN) {
+							const args = this.parseToolArguments(toolCall.function.arguments);
+							const executionResult = await ToolsService.executeTool(toolName, args, signal);
+
+							result = executionResult.content;
+
+							if (executionResult.isError) toolSuccess = false;
+						} else if (toolSource === ToolSource.FRONTEND) {
+							const args = this.parseToolArguments(toolCall.function.arguments);
+							const executionResult = await SandboxService.executeTool(toolName, args, signal);
+
+							result = executionResult.content;
+
+							if (executionResult.isError) toolSuccess = false;
+						} else {
+							const mcpCall: MCPToolCall = {
+								id: toolCall.id,
+								function: { name: toolName, arguments: toolCall.function.arguments }
+							};
+							const executionResult = await mcpStore.executeTool(mcpCall, signal);
+
+							result = executionResult.content;
+						}
+					} catch (error) {
+						if (isAbortError(error)) {
+							onFlowComplete?.(this.buildFinalTimings(capturedTimings, agenticTimings));
+							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) {
+					onFlowComplete?.(this.buildFinalTimings(capturedTimings, agenticTimings));
+					return;
+				}
+
+				const { cleanedResult, attachments } = this.extractBase64Attachments(result);
+
+				// Create the tool result message in the DB
+				let toolResultMessage: DatabaseMessage | undefined;
+				if (createToolResultMessage) {
+					toolResultMessage = await createToolResultMessage(
+						toolCall.id,
+						cleanedResult,
+						attachments.length > 0 ? attachments : undefined
+					);
+				}
+
+				if (attachments.length > 0 && toolResultMessage) {
+					onAttachments?.(toolResultMessage.id, attachments);
+				}
+
+				// Build content parts for session history (including images for vision models)
+				const contentParts: ApiChatMessageContentPart[] = [
+					{ type: ContentPartType.TEXT, text: cleanedResult }
+				];
+				for (const attachment of attachments) {
+					if (attachment.type === AttachmentType.IMAGE) {
+						if (modelsStore.modelSupportsVision(effectiveModel)) {
+							contentParts.push({
+								type: ContentPartType.IMAGE_URL,
+								image_url: {
+									url: (attachment as DatabaseMessageExtraImageFile).base64Url
+								}
+							});
+						} else {
+							console.info(
+								`[AgenticStore] Skipping image attachment (model "${effectiveModel}" 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);
+
+				const intermediateTimings = this.buildFinalTimings(capturedTimings, agenticTimings);
+				if (intermediateTimings) onTurnComplete?.(intermediateTimings);
+			}
+
+			// If tools were interrupted by a steering message, exit now instead of starting another LLM turn
+			if (this._steeringMessages.has(conversationId)) {
+				console.log(
+					'[AgenticStore] Steering message detected after tool execution, exiting agentic flow'
+				);
+				onFlowComplete?.(this.buildFinalTimings(capturedTimings, agenticTimings));
+				return;
+			}
+
+			turn++;
+		}
+	}
+
+	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 ToolCallType.FUNCTION) ?? ToolCallType.FUNCTION,
+			function: {
+				name: call?.function?.name ?? '',
+				arguments: call?.function?.arguments ?? ''
+			}
+		}));
+	}
+
+	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 agenticPendingPermissionRequest(conversationId: string) {
+	return agenticStore.pendingPermissionRequest(conversationId);
+}
+
+export function agenticResolvePermission(conversationId: string, decision: ToolPermissionDecision) {
+	agenticStore.resolvePermission(conversationId, decision);
+}
+
+export function agenticPendingContinueRequest(conversationId: string) {
+	return agenticStore.pendingContinueRequest(conversationId);
+}
+
+export function agenticResolveContinue(conversationId: string, shouldContinue: boolean) {
+	agenticStore.resolveContinue(conversationId, shouldContinue);
+}
+
+export function agenticHasPendingSteeringMessage(conversationId: string) {
+	return agenticStore.hasPendingSteeringMessage(conversationId);
+}
+
+export function agenticInjectSteeringMessage(
+	conversationId: string,
+	content: string,
+	extras?: DatabaseMessageExtra[]
+) {
+	agenticStore.injectSteeringMessage(conversationId, content, extras);
+}
+
+export function agenticPendingSteeringMessageContent(conversationId: string) {
+	return agenticStore.pendingSteeringMessageContent(conversationId);
+}
+
+export function agenticPendingSteeringMessageExtras(conversationId: string) {
+	return agenticStore.pendingSteeringMessageExtras(conversationId);
+}
+
+export function agenticClearSteeringMessage(conversationId: string) {
+	agenticStore.clearSteeringMessage(conversationId);
+}
+
+export function agenticIsAnyRunning() {
+	return agenticStore.isAnyRunning;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/stores/build-info.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/stores/build-info.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a137be2367ec5b23bcd4d964d332445d7a7d1f98
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/stores/build-info.svelte.ts
@@ -0,0 +1,42 @@
+/**
+ * buildInfoStore - llama.cpp build information
+ *
+ * Reads the build version from `build.json` — embedded at llama.cpp build time
+ * with the llama.cpp build number (LLAMA_BUILD_NUMBER). Shown in the UI when
+ * `showBuildVersion` is enabled.
+ *
+ * In dev mode (via `npm run dev`), falls back to `import.meta.env.DEV`'s truthy
+ * value since the artifact is not produced.
+ */
+
+import { browser } from '$app/environment';
+import { base } from '$app/paths';
+
+let build = $state<string>('');
+
+async function loadBuild() {
+	if (!browser) return;
+
+	if (import.meta.env.DEV) {
+		build = 'dev';
+		return;
+	}
+
+	try {
+		const res = await fetch(`${base}/build.json`, { cache: 'no-store' });
+		if (res.ok) {
+			const data = await res.json();
+			build = data.version ?? '';
+		}
+	} catch {
+		// build.json missing or unreachable - leave as empty string
+	}
+}
+
+loadBuild();
+
+export const buildInfoStore = {
+	get value(): string {
+		return build;
+	}
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/stores/chat.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/stores/chat.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fcd07c4fd6bcfc125cdcbc12042f10a56977d5fc
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/stores/chat.svelte.ts
@@ -0,0 +1,2460 @@
+/**
+ * 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, SvelteSet } from 'svelte/reactivity';
+import { DatabaseService } from '$lib/services/database.service';
+import { ChatService } from '$lib/services/chat.service';
+import { streamIdentity } from '$lib/utils/stream-identity';
+import { getAuthHeaders } from '$lib/utils/api-headers';
+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,
+	modelsStore,
+	selectedModelContextSize
+} from '$lib/stores/models.svelte';
+import {
+	normalizeModelName,
+	filterByLeafNodeId,
+	findDescendantMessages,
+	findLeafNode,
+	findMessageById,
+	isAbortError,
+	generateConversationTitle
+} from '$lib/utils';
+import { classifyContinueIntent } from '$lib/utils/agentic';
+import {
+	MAX_INACTIVE_CONVERSATION_STATES,
+	INACTIVE_CONVERSATION_STATE_MAX_AGE_MS,
+	SYSTEM_MESSAGE_PLACEHOLDER,
+	TITLE_GENERATION
+} from '$lib/constants';
+import type {
+	ChatMessageTimings,
+	ChatMessagePromptProgress,
+	ChatStreamCallbacks,
+	ErrorDialogState
+} from '$lib/types/chat';
+import type {
+	ApiChatMessageData,
+	ApiProcessingState,
+	ApiStreamSession,
+	DatabaseMessage,
+	DatabaseMessageExtra
+} from '$lib/types';
+import {
+	ContinueIntentKind,
+	ErrorDialogType,
+	MessageRole,
+	MessageType,
+	ReasoningEffort,
+	StreamConnectionState
+} from '$lib/enums';
+
+interface ConversationStateEntry {
+	lastAccessed: number;
+}
+
+class ChatStore {
+	activeProcessingState = $state<ApiProcessingState | null>(null);
+	currentResponse = $state('');
+	errorDialogState = $state<ErrorDialogState | null>(null);
+	isLoading = $state(false);
+	// true while the active conversation streams reasoning content but no visible content yet
+	isReasoning = $state(false);
+	// resumable stream connection state for the active conversation
+	// streaming -> bytes flowing normally, resuming -> waiting on /v1/stream/:id reconnect, lost -> unrecoverable
+	streamConnectionState = $state<StreamConnectionState>(StreamConnectionState.STREAMING);
+	chatLoadingStates = new SvelteMap<string, boolean>();
+	chatReasoningStates = new SvelteMap<string, boolean>();
+	chatStreamingStates = new SvelteMap<
+		string,
+		{ response: string; messageId: string; model?: string | null }
+	>();
+	// convs that the backend reports as having a running session, populated by the global sync
+	// at app mount and on visibilitychange. it does not overlap with chatLoadingStates which
+	// tracks inferences driven by this browser, both are unioned to feed the sidebar spinners
+	private remoteRunningConvs = new SvelteSet<string>();
+	// per conv attach lifecycle, used to derive the global streaming flag without flipping it
+	// off when one conv finishes while another is still streaming. mirrors chatLoadingStates
+	// in scope but tracks the attach + tee replay path specifically
+	private attachingConvs = new SvelteSet<string>();
+	// in-flight discoverActiveStream guard, keyed by conv id
+	private discoveringConvs = new SvelteSet<string>();
+	private abortControllers = new SvelteMap<string, AbortController>();
+	private preEncodeAbortController: AbortController | null = null;
+	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);
+	private messageUpdateCallback:
+		| ((messageId: string, updates: Partial<DatabaseMessage>) => void)
+		| null = null;
+	private _pendingDraftMessage = $state<string>('');
+	private _pendingDraftFiles = $state<ChatUploadedFile[]>([]);
+
+	/** Reactive: queued pending messages for non-agentic streaming */
+	private _pendingMessages = new SvelteMap<
+		string,
+		{ content: string; extras?: DatabaseMessageExtra[] }
+	>();
+
+	private setChatLoading(convId: string, loading: boolean): void {
+		this.touchConversationState(convId);
+		if (loading) {
+			this.chatLoadingStates.set(convId, true);
+			if (convId === conversationsStore.activeConversation?.id) this.isLoading = true;
+		} else {
+			this.chatLoadingStates.delete(convId);
+			if (convId === conversationsStore.activeConversation?.id) this.isLoading = false;
+			this.setChatReasoning(convId, false);
+			// the local pipe is the authoritative observer of session end: when it finishes (clean
+			// onComplete or explicit Stop), the backend session is finalized too, so we drop the
+			// sidebar hint for this conv right away instead of waiting for the next visibilitychange
+			// snapshot. without this the spinner ghosts until the user toggles the tab
+			this.remoteRunningConvs.delete(convId);
+		}
+	}
+
+	private setChatReasoning(convId: string, reasoning: boolean): void {
+		if (reasoning) {
+			this.chatReasoningStates.set(convId, true);
+			if (convId === conversationsStore.activeConversation?.id) this.isReasoning = true;
+		} else {
+			this.chatReasoningStates.delete(convId);
+			if (convId === conversationsStore.activeConversation?.id) this.isReasoning = false;
+		}
+	}
+	private setChatStreaming(
+		convId: string,
+		response: string,
+		messageId: string,
+		model?: string | null
+	): void {
+		this.touchConversationState(convId);
+		this.chatStreamingStates.set(convId, {
+			response,
+			messageId,
+			model: model ?? this.chatStreamingStates.get(convId)?.model
+		});
+		if (convId === conversationsStore.activeConversation?.id) this.currentResponse = response;
+	}
+	private clearChatStreaming(convId: string, messageId?: string): void {
+		// session aware: a stale generation must not wipe a newer one's streaming state on the
+		// same conversation, that would drop the frozen stop identity and stop the wrong session
+		if (messageId !== undefined) {
+			const cur = this.chatStreamingStates.get(convId);
+			if (cur && cur.messageId !== messageId) return;
+		}
+		this.chatStreamingStates.delete(convId);
+		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.chatLoadingStates.get(convId) || false;
+		this.isReasoning = this.chatReasoningStates.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 (s?.response && s?.messageId) {
+			const idx = conversationsStore.findMessageIndex(s.messageId);
+			if (idx !== -1) {
+				conversationsStore.updateMessageAtIndex(idx, { content: s.response });
+			}
+		}
+	}
+	/**
+	 * Server side stream discovery, split in three pieces:
+	 *
+	 * probeServerStream(convId) -> hits POST /v1/streams/lookup with the conv id, returns the session to attach
+	 *   to or null. Pure read, no side effect, no UI lock. Safe to fire in parallel with anything.
+	 *
+	 * attachServerStream(convId) -> flips the spinner immediately, fetches the replay stream
+	 *   from byte 0, finds the assistant slot to splice into (creates a placeholder if the conv has
+	 *   no assistant message yet, for cross device or fresh local DB cases), and pipes the SSE bytes
+	 *   into the message via handleStreamResponse.
+	 *
+	 * discoverActiveStream(convId) -> probe + attach in one call. Used by callers that do not need
+	 *   to overlap the probe with other async work.
+	 *
+	 * The mount of the chat page in +page.svelte calls probeServerStream in parallel with
+	 * loadConversation, then attachServerStream once both have settled. This gives the earliest
+	 * possible time to spinner and avoids racing against an empty activeMessages array.
+	 */
+	async probeServerStream(convId: string): Promise<ApiStreamSession | null> {
+		if (!convId) return null;
+		let listResp: Response;
+		try {
+			// POST the one conv id we are probing
+			listResp = await fetch(`./v1/streams/lookup`, {
+				method: 'POST',
+				headers: { ...getAuthHeaders(), 'Content-Type': 'application/json' },
+				body: JSON.stringify({ conversation_ids: [convId] })
+			});
+		} catch (e) {
+			console.warn('probeServerStream fetch failed:', e);
+			return null;
+		}
+		if (!listResp.ok) {
+			console.warn(`probeServerStream got HTTP ${listResp.status} for conv ${convId}`);
+			return null;
+		}
+		let sessions: ApiStreamSession[];
+		try {
+			sessions = (await listResp.json()) as ApiStreamSession[];
+		} catch (e) {
+			console.warn('probeServerStream JSON parse failed:', e);
+			return null;
+		}
+		return ChatService.selectActiveStream(sessions);
+	}
+
+	async attachServerStream(convId: string, streamId?: string): Promise<void> {
+		if (!convId) return;
+		if (this.chatStreamingStates.has(convId)) return;
+
+		// flip the spinner immediately, the user sees activity as soon as the conv becomes active.
+		// the global isStreamingActive flag is derived from attachingConvs.size, so adding here
+		// turns it on, and removing in unlock only turns it off when this is the last attach
+		this.setChatLoading(convId, true);
+		this.attachingConvs.add(convId);
+		this.setStreamingActive(true);
+		// only set the active processing conv if we are looking at it, otherwise a background
+		// attach would steal the indicator from the conv the user is currently viewing
+		if (convId === conversationsStore.activeConversation?.id) {
+			this.setActiveProcessingConversation(convId);
+		}
+
+		const unlock = () => {
+			this.attachingConvs.delete(convId);
+			// flip the global flag off only when no other conv is still attaching
+			if (this.attachingConvs.size === 0) {
+				this.setStreamingActive(false);
+			}
+			this.setChatLoading(convId, false);
+			this.clearChatStreaming(convId);
+		};
+
+		// fetch the replay stream from byte 0, rebuild the assistant message from scratch.
+		// resolve the server side identity, fall back to streamIdentity when the caller does not
+		// pass a streamId. probeServerStream returns the full id (with ::model suffix when present)
+		const id = streamId || streamIdentity(convId, selectedModelName());
+		let response: Response;
+		try {
+			response = await fetch(`./v1/stream/${encodeURIComponent(id)}?from=0`, {
+				headers: getAuthHeaders()
+			});
+		} catch (e) {
+			console.error('attachServerStream replay fetch failed:', e);
+			unlock();
+			return;
+		}
+		if (!response.ok) {
+			console.warn(`attachServerStream replay got HTTP ${response.status} for conv ${convId}`);
+			unlock();
+			return;
+		}
+
+		// load the target conversation messages by id, not via the active store. when multiple
+		// attaches run in parallel the active store may reflect another conv and writing through
+		// its index mixes content across convs (CoT flicker, message bleed). by going through the
+		// DB we stay isolated, and only mirror into the active store when the attached conv is
+		// the one currently displayed
+		let messages: DatabaseMessage[];
+		try {
+			messages = await DatabaseService.getConversationMessages(convId);
+		} catch (e) {
+			console.error('attachServerStream load messages failed:', e);
+			unlock();
+			return;
+		}
+
+		// locate the slot to splice into, create a placeholder assistant message if there is none.
+		// we use the conv-scoped findLastAssistantIdx helpers, they only depend on the array
+		let targetIdx = this.findLastAssistantIdx(messages);
+		if (targetIdx === -1) {
+			const lastUserIdx = this.findLastUserIdx(messages);
+			if (lastUserIdx === -1) {
+				console.warn(
+					`attachServerStream: conv ${convId} has no user or assistant message, cannot splice`
+				);
+				unlock();
+				return;
+			}
+			try {
+				const placeholder = await DatabaseService.createMessageBranch(
+					{
+						convId,
+						role: MessageRole.ASSISTANT,
+						content: '',
+						type: MessageType.TEXT,
+						timestamp: Date.now(),
+						parent: messages[lastUserIdx].id,
+						children: [],
+						toolCalls: ''
+					} as Omit<DatabaseMessage, 'id'>,
+					messages[lastUserIdx].id
+				);
+				messages = [...messages, placeholder];
+				targetIdx = messages.length - 1;
+				// only push into the active store when this conv is the one displayed right now
+				if (convId === conversationsStore.activeConversation?.id) {
+					conversationsStore.addMessageToActive(placeholder);
+				}
+			} catch (e) {
+				console.error('attachServerStream placeholder creation failed:', e);
+				unlock();
+				return;
+			}
+		}
+		if (targetIdx === -1) {
+			unlock();
+			return;
+		}
+		const targetMessage = messages[targetIdx];
+		const targetMessageId = targetMessage.id;
+		// when the assistant slot already has content, the running session is a continue or
+		// another append flow and its buffer holds only the appended deltas. preserve the prefix
+		// and let the replay add to it. when the slot is empty the session buffer holds the whole
+		// message so we wipe and rebuild from byte 0
+		const existingContent = targetMessage.content ?? '';
+		const existingReasoning = targetMessage.reasoningContent ?? '';
+		const isAppendMode = existingContent.length > 0;
+
+		// helper: write to the active store only when the attached conv is currently displayed.
+		// the lookup by message id is robust to reordering of activeMessages, two parallel attaches
+		// can no longer step on each other's indices
+		const writeActive = (updates: Partial<DatabaseMessage>) => {
+			if (convId !== conversationsStore.activeConversation?.id) {
+				return;
+			}
+			const liveIdx = conversationsStore.findMessageIndex(targetMessageId);
+			if (liveIdx === -1) return;
+			conversationsStore.updateMessageAtIndex(liveIdx, updates);
+		};
+
+		if (!isAppendMode) {
+			writeActive({ content: '', reasoningContent: undefined });
+		}
+
+		// extract the model suffix, the resume calls in handleStreamResponse must reuse the model
+		// the session was tagged with, not the live dropdown
+		const sepIdx = id.indexOf('::');
+		const attachedModel: string | null = sepIdx === -1 ? null : id.slice(sepIdx + 2);
+		this.setChatStreaming(convId, existingContent, targetMessageId, attachedModel);
+		const abortController = this.getOrCreateAbortController(convId);
+
+		let streamedContent = '';
+		let streamedReasoningContent = '';
+
+		const cleanup = () => {
+			unlock();
+			this.setProcessingState(convId, null);
+		};
+
+		try {
+			await ChatService.handleStreamResponse(
+				response,
+				(chunk: string) => {
+					streamedContent += chunk;
+					const displayed = isAppendMode ? existingContent + streamedContent : streamedContent;
+					writeActive({ content: displayed });
+					this.setChatStreaming(convId, displayed, targetMessageId);
+				},
+				async (
+					finalContent?: string,
+					reasoningContent?: string,
+					timings?: ChatMessageTimings,
+					toolCalls?: string
+				) => {
+					const streamed = streamedContent || finalContent || '';
+					const streamedR = streamedReasoningContent || reasoningContent || '';
+					const content = isAppendMode ? existingContent + streamed : streamed;
+					const reasoning = isAppendMode ? existingReasoning + streamedR : streamedR;
+					// the DB write is the source of truth, mirror to the active store only when
+					// the conv is currently displayed
+					await DatabaseService.updateMessage(targetMessageId, {
+						content,
+						reasoningContent: reasoning || undefined,
+						toolCalls: toolCalls || '',
+						timings
+					});
+					writeActive({
+						content,
+						reasoningContent: reasoning || undefined,
+						timings
+					});
+					cleanup();
+				},
+				(err: Error) => {
+					console.error('attachServerStream pipe error:', err);
+					cleanup();
+				},
+				(chunk: string) => {
+					streamedReasoningContent += chunk;
+					const displayed = isAppendMode
+						? existingReasoning + streamedReasoningContent
+						: streamedReasoningContent;
+					writeActive({ reasoningContent: displayed });
+				},
+				undefined,
+				undefined,
+				undefined,
+				undefined,
+				convId,
+				abortController.signal,
+				(connState: StreamConnectionState) => {
+					if (convId === conversationsStore.activeConversation?.id) {
+						this.streamConnectionState = connState;
+					}
+				},
+				attachedModel
+			);
+		} catch (e) {
+			console.error('attachServerStream pipe crashed:', e);
+			cleanup();
+		}
+	}
+
+	async discoverActiveStream(convId: string): Promise<void> {
+		if (!convId) return;
+		if (this.chatStreamingStates.has(convId)) return;
+		if (this.chatLoadingStates.get(convId)) return;
+		// concurrency guard: another discover may already be running for this conv (typical race
+		// between mount and visibilitychange on tab switch). a second concurrent fetch on the same
+		// /v1/stream/<id> would duplicate every byte into the DB message, this guard bounces it
+		if (this.discoveringConvs.has(convId)) return;
+		this.discoveringConvs.add(convId);
+
+		try {
+			// the model is frozen at POST time, rebuild the exact conv::model identity from the
+			// persisted state so the lookup key matches what the server stored. null means a single
+			// model conv with no ::suffix, only guess from the dropdown with no persisted state
+			const localState = ChatService.getStreamState(convId);
+			const streamId = ChatService.resumeStreamIdentity(convId, localState, selectedModelName());
+
+			// primary path: ask the server which sessions exist for this identity
+			const serverTarget = await this.probeServerStream(streamId);
+			if (serverTarget) {
+				// pass the full server side identity (may carry a ::model suffix) so the GET routes
+				// straight to the owning session, no probe or fan out
+				await this.attachServerStream(convId, serverTarget.conversation_id);
+				return;
+			}
+
+			// fallback: local state remembers an interrupted byte offset for this conv, the server may
+			// still have a live session matching that identity (we just lost the bytes mid stream). retry
+			// with the frozen identity, the server probe inside attachServerStream tells us if it exists
+			if (!localState) {
+				return;
+			}
+			await this.attachServerStream(convId, streamId);
+			// if attachServerStream failed (session gone, TTL expired), clear the local state to avoid retrying forever
+			if (!this.chatStreamingStates.has(convId) && !this.chatLoadingStates.get(convId)) {
+				ChatService.clearStreamState(convId);
+			}
+		} finally {
+			this.discoveringConvs.delete(convId);
+		}
+	}
+
+	private findLastAssistantIdx(messages: DatabaseMessage[]): number {
+		for (let i = messages.length - 1; i >= 0; i--) {
+			if (messages[i].role === MessageRole.ASSISTANT) return i;
+		}
+		return -1;
+	}
+
+	private findLastUserIdx(messages: DatabaseMessage[]): number {
+		for (let i = messages.length - 1; i >= 0; i--) {
+			if (messages[i].role === MessageRole.USER) return i;
+		}
+		return -1;
+	}
+
+	clearUIState(): void {
+		this.isLoading = false;
+		this.currentResponse = '';
+		this.isStreamingActive = false;
+	}
+
+	setActiveProcessingConversation(conversationId: string | null): void {
+		this.activeConversationId = conversationId;
+		this.activeProcessingState = conversationId
+			? this.processingStates.get(conversationId) || null
+			: null;
+	}
+
+	getProcessingState(conversationId: string): ApiProcessingState | null {
+		return this.processingStates.get(conversationId) || null;
+	}
+
+	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;
+	}
+
+	getActiveProcessingState(): ApiProcessingState | null {
+		return this.activeProcessingState;
+	}
+
+	getCurrentProcessingStateSync(): ApiProcessingState | null {
+		return this.activeProcessingState;
+	}
+
+	private setStreamingActive(active: boolean): void {
+		this.isStreamingActive = active;
+	}
+
+	isStreaming(): boolean {
+		return this.isStreamingActive;
+	}
+
+	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;
+	}
+
+	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();
+		}
+	}
+
+	/**
+	 * Abort the current agentic flow signal without clearing loading state.
+	 * Used by "Send immediately" to force the agentic loop to exit so that
+	 * the pending steering message can be re-sent.
+	 */
+	abortCurrentFlow(convId: string): void {
+		const c = this.abortControllers.get(convId);
+		if (c) {
+			c.abort();
+			this.abortControllers.delete(convId);
+		}
+	}
+
+	private showErrorDialog(state: ErrorDialogState | null): void {
+		this.errorDialogState = state;
+	}
+
+	dismissErrorDialog(): void {
+		this.errorDialogState = null;
+	}
+
+	clearEditMode(): void {
+		this.isEditModeActive = false;
+		this.addFilesHandler = null;
+	}
+
+	isEditing(): boolean {
+		return this.isEditModeActive;
+	}
+
+	setEditModeActive(handler: (files: File[]) => void): void {
+		this.isEditModeActive = true;
+		this.addFilesHandler = handler;
+	}
+
+	getAddFilesHandler(): ((files: File[]) => void) | null {
+		return this.addFilesHandler;
+	}
+
+	clearPendingEditMessageId(): void {
+		this.pendingEditMessageId = null;
+	}
+
+	savePendingDraft(message: string, files: ChatUploadedFile[]): void {
+		this._pendingDraftMessage = message;
+		this._pendingDraftFiles = [...files];
+	}
+
+	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;
+	}
+
+	hasPendingDraft(): boolean {
+		return Boolean(this._pendingDraftMessage) || this._pendingDraftFiles.length > 0;
+	}
+
+	getAllLoadingChats(): string[] {
+		// union of local (this browser is piping) and remote (backend reports a running session
+		// for this conv but no local pipe yet) sources. the sidebar shows one spinner per entry
+		const out = new SvelteSet<string>(this.chatLoadingStates.keys());
+		for (const id of this.remoteRunningConvs) {
+			out.add(id);
+		}
+		return Array.from(out);
+	}
+
+	getAllStreamingChats(): string[] {
+		return Array.from(this.chatStreamingStates.keys());
+	}
+
+	/**
+	 * Resync the remote running convs set from the backend. Called by the layout at mount and on
+	 * visibilitychange, no polling. A snapshot semantic: the set is replaced wholesale, stale entries
+	 * for sessions that finalized while the browser was elsewhere are dropped naturally.
+	 */
+	async syncRemoteRunningStreams(): Promise<void> {
+		// the conversations store loads from IndexedDB asynchronously, the +layout onMount caller
+		// fires before that finishes. read ids straight from the DB so the result does not depend
+		// on the store init race, and the sidebar spinners light up at first paint for every conv
+		// the user owns even if it has not been hydrated into the store yet
+		let ids: string[];
+		try {
+			const all = await DatabaseService.getAllConversations();
+			ids = all.map((c) => c.id).filter((id) => !!id);
+		} catch (e) {
+			console.warn('syncRemoteRunningStreams DB read failed:', e);
+			return;
+		}
+		// only ask about conv ids the user already owns
+		if (ids.length === 0) {
+			for (const id of Array.from(this.remoteRunningConvs)) {
+				this.remoteRunningConvs.delete(id);
+			}
+			return;
+		}
+		// rebuild the frozen conv::model identity per conv so a session started with a model still
+		// matches. the server response is mapped back to the bare id below for the sidebar set
+		const lookupIds = ids.map((id) =>
+			ChatService.resumeStreamIdentity(id, ChatService.getStreamState(id), null)
+		);
+		let sessions: ApiStreamSession[];
+		try {
+			const resp = await fetch('./v1/streams/lookup', {
+				method: 'POST',
+				headers: { ...getAuthHeaders(), 'Content-Type': 'application/json' },
+				body: JSON.stringify({ conversation_ids: lookupIds })
+			});
+			if (!resp.ok) return;
+			const body = (await resp.json()) as unknown;
+			if (!Array.isArray(body)) return;
+			sessions = body as ApiStreamSession[];
+		} catch (e) {
+			console.warn('syncRemoteRunningStreams fetch failed:', e);
+			return;
+		}
+		const running = new SvelteSet<string>();
+		for (const s of sessions) {
+			if (s && !s.is_done && typeof s.conversation_id === 'string' && s.conversation_id) {
+				// strip the optional ::model suffix, the sidebar set is keyed by the bare conv id
+				const sepIdx = s.conversation_id.indexOf('::');
+				const bareId = sepIdx === -1 ? s.conversation_id : s.conversation_id.slice(0, sepIdx);
+				running.add(bareId);
+			}
+		}
+		for (const id of Array.from(this.remoteRunningConvs)) {
+			if (!running.has(id)) {
+				this.remoteRunningConvs.delete(id);
+			}
+		}
+		for (const id of running) {
+			this.remoteRunningConvs.add(id);
+		}
+	}
+
+	getChatStreamingPublic(convId: string): { response: string; messageId: string } | undefined {
+		return this.getChatStreaming(convId);
+	}
+
+	isChatLoadingPublic(convId: string): boolean {
+		return this.chatLoadingStates.get(convId) || false;
+	}
+
+	isChatReasoningPublic(convId: string): boolean {
+		return this.chatReasoningStates.get(convId) || false;
+	}
+
+	private isChatLoadingInternal(convId: string): boolean {
+		return this.chatLoadingStates.has(convId) || this.chatStreamingStates.has(convId);
+	}
+
+	hasPendingMessage(convId: string): boolean {
+		return this._pendingMessages.has(convId);
+	}
+
+	pendingMessageContent(convId: string): string | null {
+		return this._pendingMessages.get(convId)?.content ?? null;
+	}
+
+	pendingMessageExtras(convId: string): DatabaseMessageExtra[] | undefined {
+		return this._pendingMessages.get(convId)?.extras;
+	}
+
+	injectPendingMessage(convId: string, content: string, extras?: DatabaseMessageExtra[]): void {
+		this._pendingMessages.set(convId, { content, extras });
+	}
+
+	clearPendingMessage(convId: string): void {
+		this._pendingMessages.delete(convId);
+	}
+
+	consumePendingMessage(
+		convId: string
+	): { content: string; extras?: DatabaseMessageExtra[] } | null {
+		const msg = this._pendingMessages.get(convId);
+		if (!msg) return null;
+		this._pendingMessages.delete(convId);
+		return msg;
+	}
+
+	private touchConversationState(convId: string): void {
+		this.conversationStateTimestamps.set(convId, { lastAccessed: Date.now() });
+	}
+
+	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;
+	}
+
+	private getMessageByIdWithRole(
+		messageId: string,
+		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: MessageRole,
+		content: string,
+		type: MessageType = MessageType.TEXT,
+		parent: string = '-1',
+		extras?: DatabaseMessageExtra[]
+	): Promise<DatabaseMessage> {
+		const activeConv = conversationsStore.activeConversation;
+		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);
+			}
+		} 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;
+	}
+
+	async addSystemPrompt(): Promise<void> {
+		let activeConv = conversationsStore.activeConversation;
+		if (!activeConv) {
+			await conversationsStore.createConversation();
+			activeConv = conversationsStore.activeConversation;
+		}
+		if (!activeConv) return;
+		try {
+			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
+			const rootMessage = allMessages.find((m) => m.type === 'root' && m.parent === null);
+			const rootId = rootMessage
+				? rootMessage.id
+				: await DatabaseService.createRootMessage(activeConv.id);
+			const existingSystemMessage = allMessages.find(
+				(m) => m.role === MessageRole.SYSTEM && m.parent === rootId
+			);
+			if (existingSystemMessage) {
+				this.pendingEditMessageId = existingSystemMessage.id;
+				if (!conversationsStore.activeMessages.some((m) => m.id === existingSystemMessage.id))
+					conversationsStore.activeMessages.unshift(existingSystemMessage);
+				return;
+			}
+			const am = conversationsStore.activeMessages;
+			const firstActiveMessage = am.find((m) => m.parent === rootId);
+			const systemMessage = await DatabaseService.createSystemMessage(
+				activeConv.id,
+				SYSTEM_MESSAGE_PLACEHOLDER,
+				rootId
+			);
+			if (firstActiveMessage) {
+				await DatabaseService.updateMessage(firstActiveMessage.id, {
+					parent: systemMessage.id
+				});
+				await DatabaseService.updateMessage(systemMessage.id, {
+					children: [firstActiveMessage.id]
+				});
+				const updatedRootChildren = rootMessage
+					? rootMessage.children.filter((id: string) => id !== firstActiveMessage.id)
+					: [];
+				await DatabaseService.updateMessage(rootId, {
+					children: [
+						...updatedRootChildren.filter((id: string) => id !== systemMessage.id),
+						systemMessage.id
+					]
+				});
+				const firstMsgIndex = conversationsStore.findMessageIndex(firstActiveMessage.id);
+				if (firstMsgIndex !== -1)
+					conversationsStore.updateMessageAtIndex(firstMsgIndex, {
+						parent: systemMessage.id
+					});
+			}
+			conversationsStore.activeMessages.unshift(systemMessage);
+			this.pendingEditMessageId = systemMessage.id;
+			conversationsStore.updateConversationTimestamp();
+		} catch (error) {
+			console.error('Failed to add system prompt:', error);
+		}
+	}
+
+	async removeSystemPromptPlaceholder(messageId: string): Promise<boolean> {
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv) return false;
+		try {
+			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
+			const systemMessage = findMessageById(allMessages, messageId);
+			if (!systemMessage || systemMessage.role !== MessageRole.SYSTEM) return false;
+			const rootMessage = allMessages.find((m) => m.type === 'root' && m.parent === null);
+			if (!rootMessage) return false;
+			if (allMessages.length === 2 && systemMessage.children.length === 0) {
+				await conversationsStore.deleteConversation(activeConv.id);
+				return true;
+			}
+			for (const childId of systemMessage.children) {
+				await DatabaseService.updateMessage(childId, { parent: rootMessage.id });
+				const childIndex = conversationsStore.findMessageIndex(childId);
+				if (childIndex !== -1)
+					conversationsStore.updateMessageAtIndex(childIndex, { parent: rootMessage.id });
+			}
+			await DatabaseService.updateMessage(rootMessage.id, {
+				children: [
+					...rootMessage.children.filter((id: string) => id !== messageId),
+					...systemMessage.children
+				]
+			});
+			await DatabaseService.deleteMessage(messageId);
+			const systemIndex = conversationsStore.findMessageIndex(messageId);
+			if (systemIndex !== -1) conversationsStore.activeMessages.splice(systemIndex, 1);
+			conversationsStore.updateConversationTimestamp();
+			return false;
+		} catch (error) {
+			console.error('Failed to remove system prompt placeholder:', error);
+			return false;
+		}
+	}
+
+	private async createAssistantMessage(parentId?: string): Promise<DatabaseMessage> {
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv) throw new Error('No active conversation');
+		return await DatabaseService.createMessageBranch(
+			{
+				convId: activeConv.id,
+				type: MessageType.TEXT,
+				role: MessageRole.ASSISTANT,
+				content: '',
+				timestamp: Date.now(),
+				toolCalls: '',
+				children: [],
+				model: null
+			},
+			parentId || null
+		);
+	}
+
+	async sendMessage(content: string, extras?: DatabaseMessageExtra[]): Promise<void> {
+		if (!content.trim() && (!extras || extras.length === 0)) return;
+		const activeConv = conversationsStore.activeConversation;
+
+		// If agentic loop is running, inject as a steering message instead of starting a new flow
+		if (activeConv && agenticStore.isRunning(activeConv.id)) {
+			agenticStore.injectSteeringMessage(activeConv.id, content, extras);
+			return;
+		}
+
+		// If non-agentic streaming is active, queue as a pending message to send after completion
+		if (activeConv && this.isChatLoadingInternal(activeConv.id)) {
+			this.injectPendingMessage(activeConv.id, content, extras);
+			return;
+		}
+
+		// Cancel any in-flight pre-encode request
+		this.cancelPreEncode();
+
+		// 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) {
+			await conversationsStore.createConversation();
+			isNewConversation = true;
+		}
+		const currentConv = conversationsStore.activeConversation;
+		if (!currentConv) return;
+		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(
+				MessageRole.USER,
+				content,
+				MessageType.TEXT,
+				parentIdForUserMessage ?? '-1',
+				allExtras
+			);
+			if (isNewConversation && content)
+				await conversationsStore.updateConversationName(
+					currentConv.id,
+					generateConversationTitle(content, Boolean(config().titleGenerationUseFirstLine))
+				);
+			const assistantMessage = await this.createAssistantMessage(userMessage.id);
+			conversationsStore.addMessageToActive(assistantMessage);
+			await this.streamChatCompletion(
+				conversationsStore.activeMessages.slice(0, -1),
+				assistantMessage,
+				undefined,
+				undefined,
+				undefined,
+				config().titleGenerationUseLLM && isNewConversation ? content : undefined
+			);
+		} catch (error) {
+			if (isAbortError(error)) {
+				this.setChatLoading(currentConv.id, false);
+				return;
+			}
+			console.error('Failed to send message:', error);
+			this.setChatLoading(currentConv.id, false);
+			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,
+		firstUserMessageContent?: string
+	): Promise<void> {
+		// the ::model suffix in the stream identity is only for router mode, where it routes to the
+		// owning child. in single-model mode the identity stays the bare conv id so that attach, stop
+		// and reattach all agree, regardless of fresh send vs regenerate passing a resolved model
+		let effectiveModel: string | null | undefined = undefined;
+
+		if (isRouterMode()) {
+			const conversationModel = this.getConversationModel(allMessages);
+			effectiveModel = modelOverride || selectedModelName() || conversationModel;
+		}
+
+		if (isRouterMode() && effectiveModel) {
+			if (!modelsStore.getModelProps(effectiveModel))
+				await modelsStore.fetchModelProps(effectiveModel);
+		}
+
+		// Mutable state for the current message being streamed
+		let currentMessageId = assistantMessage.id;
+		let streamedContent = '';
+		let streamedReasoningContent = '';
+		let resolvedModel: string | null = null;
+		let modelPersisted = false;
+		const convId = assistantMessage.convId;
+		// Tracks the last message created in this flow. Used as the parent for the next
+		// turn's assistant message so createAssistantMessage does not have to read
+		// conversationsStore.activeMessages, which may belong to a different conversation
+		// after the user navigates while the loop is still running.
+		let lastCreatedInFlow = currentMessageId;
+		// freeze the POST identity from t0 so a stop cancels with the exact session key,
+		// never a stale or empty model resolved later
+		this.setChatStreaming(convId, streamedContent, currentMessageId, effectiveModel);
+
+		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(currentMessageId);
+			conversationsStore.updateMessageAtIndex(idx, { model: n });
+			if (persistImmediately && !modelPersisted) {
+				modelPersisted = true;
+				DatabaseService.updateMessage(currentMessageId, { model: n }).catch(() => {
+					modelPersisted = false;
+					resolvedModel = null;
+				});
+			}
+		};
+
+		let completionIdRecorded = false;
+		const recordCompletionId = (id: string): void => {
+			if (!id || completionIdRecorded) return;
+			completionIdRecorded = true;
+			const idx = conversationsStore.findMessageIndex(currentMessageId);
+			conversationsStore.updateMessageAtIndex(idx, { completionId: id });
+			DatabaseService.updateMessage(currentMessageId, { completionId: id }).catch(() => {
+				completionIdRecorded = false;
+			});
+		};
+
+		const updateStreamingUI = () => {
+			this.setChatStreaming(convId, streamedContent, currentMessageId, effectiveModel);
+			const idx = conversationsStore.findMessageIndex(currentMessageId);
+			conversationsStore.updateMessageAtIndex(idx, { content: streamedContent });
+		};
+
+		const cleanupStreamingState = () => {
+			this.setStreamingActive(false);
+			this.setChatLoading(convId, false);
+			this.clearChatStreaming(convId, currentMessageId);
+			this.setProcessingState(convId, null);
+		};
+
+		this.setStreamingActive(true);
+		this.setActiveProcessingConversation(convId);
+		const abortController = this.getOrCreateAbortController(convId);
+
+		const streamCallbacks: ChatStreamCallbacks = {
+			onChunk: (chunk: string) => {
+				streamedContent += chunk;
+				updateStreamingUI();
+				this.setChatReasoning(convId, false);
+			},
+			onReasoningChunk: (chunk: string) => {
+				streamedReasoningContent += chunk;
+				// mark streaming state so a stop mid-thinking can persist the partial reasoning
+				this.setChatStreaming(convId, streamedContent, currentMessageId, effectiveModel);
+				const idx = conversationsStore.findMessageIndex(currentMessageId);
+				conversationsStore.updateMessageAtIndex(idx, {
+					reasoningContent: streamedReasoningContent
+				});
+				this.setChatReasoning(convId, true);
+			},
+			onToolCallsStreaming: (toolCalls) => {
+				const idx = conversationsStore.findMessageIndex(currentMessageId);
+				conversationsStore.updateMessageAtIndex(idx, {
+					toolCalls: JSON.stringify(toolCalls)
+				});
+			},
+			onAttachments: (messageId: string, extras: DatabaseMessageExtra[]) => {
+				if (!extras.length) return;
+				const idx = conversationsStore.findMessageIndex(messageId);
+				if (idx === -1) return;
+				const msg = conversationsStore.activeMessages[idx];
+				const updatedExtras = [...(msg.extra || []), ...extras];
+				conversationsStore.updateMessageAtIndex(idx, { extra: updatedExtras });
+				DatabaseService.updateMessage(messageId, { extra: updatedExtras }).catch(console.error);
+			},
+			onModel: (modelName: string) => recordModel(modelName),
+			onCompletionId: (id: string) => recordCompletionId(id),
+			onTurnComplete: (intermediateTimings: ChatMessageTimings) => {
+				// Update the first assistant message with cumulative agentic timings
+				const idx = conversationsStore.findMessageIndex(assistantMessage.id);
+				conversationsStore.updateMessageAtIndex(idx, { timings: intermediateTimings });
+			},
+			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
+					},
+					convId
+				);
+			},
+			onAssistantTurnComplete: async (
+				content: string,
+				reasoningContent: string | undefined,
+				timings: ChatMessageTimings | undefined,
+				toolCalls: import('$lib/types/api').ApiChatCompletionToolCall[] | undefined
+			) => {
+				const updateData: Record<string, unknown> = {
+					content,
+					reasoningContent: reasoningContent || undefined,
+					toolCalls: toolCalls ? JSON.stringify(toolCalls) : '',
+					timings
+				};
+				if (resolvedModel && !modelPersisted) updateData.model = resolvedModel;
+				await DatabaseService.updateMessage(currentMessageId, updateData);
+				const idx = conversationsStore.findMessageIndex(currentMessageId);
+				const uiUpdate: Partial<DatabaseMessage> = {
+					content,
+					reasoningContent: reasoningContent || undefined,
+					toolCalls: toolCalls ? JSON.stringify(toolCalls) : ''
+				};
+				if (timings) uiUpdate.timings = timings;
+				if (resolvedModel) uiUpdate.model = resolvedModel;
+				// touch the active ui array and node pointer only when this conversation
+				// is displayed; otherwise persist the node move straight to the db so a
+				// foreign conv's currNode stays untouched
+				if (conversationsStore.activeConversation?.id === convId) {
+					conversationsStore.updateMessageAtIndex(idx, uiUpdate);
+					await conversationsStore.updateCurrentNode(currentMessageId);
+				} else {
+					await DatabaseService.updateCurrentNode(convId, currentMessageId);
+				}
+			},
+			createToolResultMessage: async (
+				toolCallId: string,
+				content: string,
+				extras?: DatabaseMessageExtra[]
+			) => {
+				const msg = await DatabaseService.createMessageBranch(
+					{
+						convId,
+						type: MessageType.TEXT,
+						role: MessageRole.TOOL,
+						content,
+						toolCallId,
+						timestamp: Date.now(),
+						toolCalls: '',
+						children: [],
+						extra: extras
+					},
+					currentMessageId
+				);
+				// mirror into the active store and move the node pointer only when this
+				// conversation is displayed; otherwise persist the node move straight to
+				// the db for the owning conv so a foreign conv's currNode stays untouched
+				if (conversationsStore.activeConversation?.id === convId) {
+					conversationsStore.addMessageToActive(msg);
+					await conversationsStore.updateCurrentNode(msg.id);
+				} else {
+					await DatabaseService.updateCurrentNode(convId, msg.id);
+				}
+				lastCreatedInFlow = msg.id;
+				return msg;
+			},
+			createAssistantMessage: async () => {
+				// Reset streaming state for new message
+				streamedContent = '';
+				streamedReasoningContent = '';
+
+				const msg = await DatabaseService.createMessageBranch(
+					{
+						convId,
+						type: MessageType.TEXT,
+						role: MessageRole.ASSISTANT,
+						content: '',
+						timestamp: Date.now(),
+						toolCalls: '',
+						children: [],
+						model: resolvedModel
+					},
+					lastCreatedInFlow
+				);
+				if (conversationsStore.activeConversation?.id === convId) {
+					conversationsStore.addMessageToActive(msg);
+				}
+				currentMessageId = msg.id;
+				lastCreatedInFlow = msg.id;
+				return msg;
+			},
+			onFlowComplete: (finalTimings?: ChatMessageTimings) => {
+				if (finalTimings) {
+					const idx = conversationsStore.findMessageIndex(assistantMessage.id);
+
+					conversationsStore.updateMessageAtIndex(idx, { timings: finalTimings });
+					DatabaseService.updateMessage(assistantMessage.id, {
+						timings: finalTimings
+					}).catch(console.error);
+				}
+
+				cleanupStreamingState();
+
+				if (onComplete) onComplete(streamedContent);
+				if (isRouterMode()) modelsStore.fetchRouterModels().catch(console.error);
+				// Pre-encode conversation in KV cache for faster next turn
+				if (config().preEncodeConversation) {
+					this.triggerPreEncode(
+						allMessages,
+						assistantMessage,
+						streamedContent,
+						effectiveModel,
+						!!config().excludeReasoningFromContext
+					);
+				}
+			},
+			onError: async (error: Error) => {
+				this.setStreamingActive(false);
+				if (isAbortError(error)) {
+					cleanupStreamingState();
+					// If aborted with a pending message (e.g. "Send immediately"), re-send it
+					const pending = this.consumePendingMessage(convId);
+					if (pending) {
+						this.sendMessage(pending.content, pending.extras);
+					}
+					return;
+				}
+				console.error('Streaming error:', error);
+				// keep whatever was streamed so far, the message stays in memory and in DB
+				await this.savePartialResponseIfNeeded(convId);
+				cleanupStreamingState();
+				this.clearPendingMessage(convId);
+
+				const contextInfo = (
+					error as Error & { contextInfo?: { n_prompt_tokens: number; n_ctx: number } }
+				).contextInfo;
+				this.showErrorDialog({
+					type: error.name === 'TimeoutError' ? ErrorDialogType.TIMEOUT : ErrorDialogType.SERVER,
+					message: error.message,
+					contextInfo
+				});
+				if (onError) onError(error);
+			}
+		};
+
+		const perChatOverrides = conversationsStore.activeConversation?.mcpServerOverrides;
+
+		{
+			const agenticResult = await agenticStore.runAgenticFlow({
+				conversationId: convId,
+				messages: allMessages,
+				options: {
+					...this.getApiOptions(),
+					...(effectiveModel ? { model: effectiveModel } : {})
+				},
+				callbacks: streamCallbacks,
+				signal: abortController.signal,
+				perChatOverrides
+			});
+			if (agenticResult.handled) {
+				// Generate LLM based title for new conversations after agentic flow completes
+				if (firstUserMessageContent) {
+					await this.generateTitleWithLLM(firstUserMessageContent, streamedContent, convId);
+				}
+				// Check if there's a pending steering message to re-send
+				const pending = agenticStore.consumePendingSteeringMessage(convId);
+				if (pending) {
+					await this.sendMessage(pending.content, pending.extras);
+				}
+				return;
+			}
+		}
+
+		await ChatService.sendMessage(
+			allMessages,
+			{
+				...this.getApiOptions(),
+				...(effectiveModel ? { model: effectiveModel } : {}),
+				stream: true,
+				onChunk: streamCallbacks.onChunk,
+				onReasoningChunk: streamCallbacks.onReasoningChunk,
+				onModel: streamCallbacks.onModel,
+				onCompletionId: streamCallbacks.onCompletionId,
+				onTimings: streamCallbacks.onTimings,
+				onConnectionState: (state: StreamConnectionState) => {
+					if (convId === conversationsStore.activeConversation?.id) {
+						this.streamConnectionState = state;
+					}
+				},
+				onComplete: async (
+					finalContent?: string,
+					reasoningContent?: string,
+					timings?: ChatMessageTimings,
+					toolCalls?: string
+				) => {
+					const content = streamedContent || finalContent || '';
+					const reasoning = streamedReasoningContent || reasoningContent;
+					const updateData: Record<string, unknown> = {
+						content,
+						reasoningContent: reasoning || undefined,
+						toolCalls: toolCalls || '',
+						timings
+					};
+					if (resolvedModel && !modelPersisted) updateData.model = resolvedModel;
+					await DatabaseService.updateMessage(currentMessageId, updateData);
+					const idx = conversationsStore.findMessageIndex(currentMessageId);
+					const uiUpdate: Partial<DatabaseMessage> = {
+						content,
+						reasoningContent: reasoning || undefined,
+						toolCalls: toolCalls || ''
+					};
+					if (timings) uiUpdate.timings = timings;
+					if (resolvedModel) uiUpdate.model = resolvedModel;
+					conversationsStore.updateMessageAtIndex(idx, uiUpdate);
+					await conversationsStore.updateCurrentNode(currentMessageId);
+					cleanupStreamingState();
+					if (onComplete) await onComplete(content);
+					if (isRouterMode()) modelsStore.fetchRouterModels().catch(console.error);
+
+					// Generate LLM based title for new conversations (avoids stale reference
+					// issue when user switches conversations while streaming)
+					if (firstUserMessageContent) {
+						await this.generateTitleWithLLM(firstUserMessageContent, streamedContent, convId);
+					}
+
+					// Check if there's a pending message queued during streaming
+					const pending = this.consumePendingMessage(convId);
+					if (pending) {
+						await this.sendMessage(pending.content, pending.extras);
+					}
+				},
+				onError: streamCallbacks.onError
+			},
+			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.setStreamingActive(false);
+		// tell the server to stop the generation, not just drop the HTTP socket. without this the
+		// detached drain keeps producing tokens until eos or max_tokens. use the frozen identity
+		// captured when the session started, not the live dropdown
+		const streamStateForStop = this.chatStreamingStates.get(convId);
+		const modelForStop = streamStateForStop?.model;
+		void ChatService.cancelServerStream(convId, modelForStop);
+		this.abortRequest(convId);
+		this.setChatLoading(convId, false);
+		this.clearChatStreaming(convId);
+		this.setProcessingState(convId, null);
+		this.clearPendingMessage(convId);
+	}
+
+	private async generateTitleWithLLM(
+		userContent: string,
+		assistantContent: string,
+		convId: string
+	): Promise<void> {
+		const effectiveModel = isRouterMode() && selectedModelName() ? selectedModelName() : undefined;
+		const configValue = config();
+		const titlePromptTemplate =
+			typeof configValue.titleGenerationPrompt === 'string' &&
+			configValue.titleGenerationPrompt.trim()
+				? configValue.titleGenerationPrompt
+				: TITLE_GENERATION.DEFAULT_PROMPT;
+
+		const titlePrompt = titlePromptTemplate
+			.replace('{{USER}}', String(userContent || ''))
+			.replace('{{ASSISTANT}}', String(assistantContent || ''));
+
+		const titleMessage: ApiChatMessageData = {
+			role: MessageRole.USER,
+			content: titlePrompt
+		};
+
+		const titleResponse = await ChatService.generateTitle(titleMessage, effectiveModel);
+
+		if (!titleResponse) {
+			return;
+		}
+
+		let cleanTitle = titleResponse.trim();
+		cleanTitle = cleanTitle
+			.replace(TITLE_GENERATION.PREFIX_PATTERN, '')
+			.replace(TITLE_GENERATION.QUOTE_PATTERN, '')
+			.trim();
+		if (!cleanTitle || cleanTitle.length < TITLE_GENERATION.MIN_LENGTH) {
+			const firstLine = userContent.split('\n').find((l) => l.trim().length > 0);
+			cleanTitle = firstLine ? firstLine.trim() : TITLE_GENERATION.FALLBACK;
+		}
+		if (cleanTitle && cleanTitle.length >= TITLE_GENERATION.MIN_LENGTH) {
+			await conversationsStore.updateConversationName(convId, cleanTitle);
+		}
+	}
+
+	private async savePartialResponseIfNeeded(convId?: string): Promise<void> {
+		const conversationId = convId || conversationsStore.activeConversation?.id;
+		if (!conversationId) return;
+		const streamingState = this.getChatStreaming(conversationId);
+		if (!streamingState) 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 !== MessageRole.ASSISTANT) return;
+
+		const partialContent = streamingState.response;
+		const partialReasoning = lastMessage.reasoningContent || '';
+
+		// nothing to persist when both content and reasoning are empty (e.g. stop before any token)
+		if (!partialContent.trim() && !partialReasoning.trim()) return;
+
+		try {
+			const updateData: {
+				content: string;
+				reasoningContent?: string;
+				timings?: ChatMessageTimings;
+			} = {
+				content: partialContent
+			};
+			if (partialReasoning) {
+				updateData.reasoningContent = partialReasoning;
+			}
+			const lastKnownState = this.getProcessingState(conversationId);
+			if (lastKnownState) {
+				updateData.timings = {
+					prompt_n: lastKnownState.promptTokens || 0,
+					prompt_ms: lastKnownState.promptMs,
+					predicted_n: lastKnownState.tokensDecoded || 0,
+					cache_n: lastKnownState.cacheTokens || 0,
+					predicted_ms:
+						lastKnownState.tokensPerSecond && lastKnownState.tokensDecoded
+							? (lastKnownState.tokensDecoded / lastKnownState.tokensPerSecond) * 1000
+							: undefined
+				};
+			}
+			await DatabaseService.updateMessage(lastMessage.id, updateData);
+			lastMessage.content = partialContent;
+			if (updateData.timings) lastMessage.timings = updateData.timings;
+		} catch (error) {
+			lastMessage.content = partialContent;
+			console.error('Failed to save partial response:', error);
+		}
+	}
+
+	async updateMessage(messageId: string, newContent: string): Promise<void> {
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv) return;
+		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())
+				await conversationsStore.updateConversationTitleWithConfirmation(
+					activeConv.id,
+					generateConversationTitle(newContent, Boolean(config().titleGenerationUseFirstLine))
+				);
+			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();
+			conversationsStore.addMessageToActive(assistantMessage);
+			await conversationsStore.updateCurrentNode(assistantMessage.id);
+			await this.streamChatCompletion(
+				conversationsStore.activeMessages.slice(0, -1),
+				assistantMessage,
+				undefined,
+				() => {
+					conversationsStore.updateMessageAtIndex(conversationsStore.findMessageIndex(messageId), {
+						content: originalContent
+					});
+				}
+			);
+		} catch (error) {
+			if (!isAbortError(error)) console.error('Failed to update message:', error);
+		}
+	}
+
+	async regenerateMessage(messageId: string): Promise<void> {
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv || this.isChatLoadingInternal(activeConv.id)) return;
+		this.cancelPreEncode();
+		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);
+			conversationsStore.addMessageToActive(assistantMessage);
+			await this.streamChatCompletion(
+				conversationsStore.activeMessages.slice(0, -1),
+				assistantMessage
+			);
+		} catch (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;
+		this.cancelPreEncode();
+		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 = findMessageById(allMessages, 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);
+		}
+	}
+
+	async getDeletionInfo(messageId: string): Promise<{
+		totalCount: number;
+		userMessages: number;
+		assistantMessages: number;
+		messageTypes: string[];
+	}> {
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv)
+			return { totalCount: 0, userMessages: 0, assistantMessages: 0, messageTypes: [] };
+		const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
+		const messageToDelete = findMessageById(allMessages, messageId);
+
+		// For system messages, don't count descendants as they will be preserved (reparented to root)
+		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 === MessageRole.USER) {
+					userMessages++;
+					if (!messageTypes.includes('user message')) messageTypes.push('user message');
+				} else if (msg.role === MessageRole.ASSISTANT) {
+					assistantMessages++;
+					if (!messageTypes.includes('assistant response')) messageTypes.push('assistant response');
+				}
+			}
+
+			return { totalCount: 1, userMessages, assistantMessages, messageTypes };
+		}
+
+		const descendants = findDescendantMessages(allMessages, messageId);
+		const allToDelete = [messageId, ...descendants];
+		const messagesToDelete = allMessages.filter((m) => allToDelete.includes(m.id));
+		let userMessages = 0,
+			assistantMessages = 0;
+		const messageTypes: string[] = [];
+
+		for (const msg of messagesToDelete) {
+			if (msg.role === MessageRole.USER) {
+				userMessages++;
+				if (!messageTypes.includes('user message')) messageTypes.push('user message');
+			} else if (msg.role === MessageRole.ASSISTANT) {
+				assistantMessages++;
+				if (!messageTypes.includes('assistant response')) messageTypes.push('assistant response');
+			}
+		}
+
+		return { totalCount: allToDelete.length, userMessages, assistantMessages, messageTypes };
+	}
+
+	async deleteMessage(messageId: string): Promise<void> {
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv) return;
+		try {
+			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
+			const messageToDelete = findMessageById(allMessages, messageId);
+
+			if (!messageToDelete) return;
+
+			const currentPath = filterByLeafNodeId(allMessages, activeConv.currNode || '', false);
+			const isInCurrentPath = currentPath.some((m) => m.id === messageId);
+
+			if (isInCurrentPath && messageToDelete.parent) {
+				const siblings = allMessages.filter(
+					(m) => m.parent === messageToDelete.parent && m.id !== messageId
+				);
+
+				if (siblings.length > 0) {
+					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(
+						findLeafNode(allMessages, messageToDelete.parent)
+					);
+				}
+			}
+
+			await DatabaseService.deleteMessageCascading(activeConv.id, messageId);
+			await conversationsStore.refreshActiveMessages();
+
+			conversationsStore.updateConversationTimestamp();
+		} catch (error) {
+			console.error('Failed to delete message:', error);
+		}
+	}
+
+	/**
+	 * Open a fresh assistant turn anchored at the last tool result of a resolved
+	 * agentic round and let streamChatCompletion route through runAgenticFlow.
+	 * Used by continueAssistantMessage when classifyContinueIntent returns
+	 * next_turn, meaning the target assistant already has its tool_calls paired
+	 * with trailing tool results and the next thing to generate is a brand new
+	 * turn rather than a token level continuation.
+	 */
+	private async continueAsNextAgenticTurn(anchorIndex: number): Promise<void> {
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv) return;
+		const anchor = conversationsStore.activeMessages[anchorIndex];
+		if (!anchor) return;
+		this.cancelPreEncode();
+		this.setChatLoading(activeConv.id, true);
+		this.clearChatStreaming(activeConv.id);
+		try {
+			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
+			const anchorMessage = findMessageById(allMessages, anchor.id);
+			if (!anchorMessage) {
+				this.setChatLoading(activeConv.id, false);
+				return;
+			}
+			const newAssistantMessage = await DatabaseService.createMessageBranch(
+				{
+					convId: activeConv.id,
+					type: MessageType.TEXT,
+					timestamp: Date.now(),
+					role: MessageRole.ASSISTANT,
+					content: '',
+					toolCalls: '',
+					children: [],
+					model: null
+				},
+				anchorMessage.id
+			);
+			await conversationsStore.updateCurrentNode(newAssistantMessage.id);
+			conversationsStore.updateConversationTimestamp();
+			await conversationsStore.refreshActiveMessages();
+			const conversationPath = filterByLeafNodeId(
+				allMessages,
+				anchorMessage.id,
+				false
+			) as DatabaseMessage[];
+			await this.streamChatCompletion(conversationPath, newAssistantMessage);
+		} catch (error) {
+			if (!isAbortError(error)) console.error('Failed to continue agentic turn:', error);
+			this.setChatLoading(activeConv.id, false);
+		}
+	}
+
+	async continueAssistantMessage(messageId: string): Promise<void> {
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv || this.isChatLoadingInternal(activeConv.id)) return;
+		const result = this.getMessageByIdWithRole(messageId, MessageRole.ASSISTANT);
+
+		if (!result) return;
+
+		const { message: msg, index: idx } = result;
+
+		// Decide which resume path applies. tool_calls without tool results can
+		// not be resumed mid sequence by continue_final_message, branch instead.
+		// tool_calls already paired with tool results need a fresh next turn,
+		// not a token level continuation of the target assistant.
+		const intent = classifyContinueIntent(conversationsStore.activeMessages, idx);
+		if (intent.kind === ContinueIntentKind.RERUN_TURN) {
+			return this.regenerateMessageWithBranching(messageId);
+		}
+		if (intent.kind === ContinueIntentKind.NEXT_TURN) {
+			return this.continueAsNextAgenticTurn(intent.truncateAfter);
+		}
+
+		try {
+			this.showErrorDialog(null);
+			this.setChatLoading(activeConv.id, true);
+			this.clearChatStreaming(activeConv.id);
+
+			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
+			const dbMessage = findMessageById(allMessages, messageId);
+
+			if (!dbMessage) {
+				this.setChatLoading(activeConv.id, false);
+				return;
+			}
+
+			const originalContent = dbMessage.content;
+			const originalReasoning = dbMessage.reasoningContent || '';
+			// Hand the persisted DatabaseMessage straight to sendMessage so its
+			// internal converter preserves tool_calls and extras when present.
+			// Reconstructing a bare {role, content} here would drop those fields
+			// and break continue_final_message for messages with tool calls.
+			const contextWithContinue = conversationsStore.activeMessages.slice(0, idx + 1);
+
+			let appendedContent = '';
+			let appendedReasoning = '';
+			let hasReceivedContent = false;
+
+			const updateStreamingContent = (fullContent: string) => {
+				this.setChatStreaming(msg.convId, fullContent, msg.id);
+				// resolve the row by id on every write, switching to another conv mid continue makes
+				// this a no op instead of writing positionally into the now displayed conversation
+				conversationsStore.updateMessageAtIndex(conversationsStore.findMessageIndex(msg.id), {
+					content: fullContent
+				});
+			};
+
+			const abortController = this.getOrCreateAbortController(msg.convId);
+
+			await ChatService.sendMessage(
+				contextWithContinue,
+				{
+					...this.getApiOptions(),
+					continueFinalMessage: true,
+					onConnectionState: (state: StreamConnectionState) => {
+						if (msg.convId === conversationsStore.activeConversation?.id) {
+							this.streamConnectionState = state;
+						}
+					},
+					onChunk: (chunk: string) => {
+						appendedContent += chunk;
+						hasReceivedContent = true;
+						updateStreamingContent(originalContent + appendedContent);
+						this.setChatReasoning(msg.convId, false);
+					},
+					onCompletionId: (id: string) => {
+						if (!id) return;
+						// refresh the message id so a later skip targets the live slot after a continue
+						conversationsStore.updateMessageAtIndex(conversationsStore.findMessageIndex(msg.id), {
+							completionId: id
+						});
+						DatabaseService.updateMessage(msg.id, { completionId: id }).catch(() => {});
+					},
+					onReasoningChunk: (chunk: string) => {
+						appendedReasoning += chunk;
+						hasReceivedContent = true;
+						// mark streaming state so a stop mid-thinking can persist the partial reasoning
+						this.setChatStreaming(msg.convId, originalContent + appendedContent, msg.id);
+						conversationsStore.updateMessageAtIndex(conversationsStore.findMessageIndex(msg.id), {
+							reasoningContent: originalReasoning + appendedReasoning
+						});
+						this.setChatReasoning(msg.convId, true);
+					},
+					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
+							},
+							msg.convId
+						);
+					},
+					onComplete: async (
+						finalContent?: string,
+						reasoningContent?: string,
+						timings?: ChatMessageTimings
+					) => {
+						const finalAppendedContent = hasReceivedContent ? appendedContent : finalContent || '';
+						const finalAppendedReasoning = hasReceivedContent
+							? appendedReasoning
+							: reasoningContent || '';
+						const fullContent = originalContent + finalAppendedContent;
+						const fullReasoning = originalReasoning + finalAppendedReasoning || undefined;
+
+						await DatabaseService.updateMessage(msg.id, {
+							content: fullContent,
+							reasoningContent: fullReasoning,
+							timestamp: Date.now(),
+							timings
+						});
+
+						conversationsStore.updateMessageAtIndex(conversationsStore.findMessageIndex(msg.id), {
+							content: fullContent,
+							reasoningContent: fullReasoning,
+							timestamp: Date.now(),
+							timings
+						});
+
+						conversationsStore.updateConversationTimestamp();
+
+						this.setChatLoading(msg.convId, false);
+						this.clearChatStreaming(msg.convId);
+						this.setProcessingState(msg.convId, null);
+					},
+					onError: async (error: Error) => {
+						if (isAbortError(error)) {
+							if (hasReceivedContent && appendedContent) {
+								await DatabaseService.updateMessage(msg.id, {
+									content: originalContent + appendedContent,
+									reasoningContent: originalReasoning + appendedReasoning || undefined,
+									timestamp: Date.now()
+								});
+
+								conversationsStore.updateMessageAtIndex(
+									conversationsStore.findMessageIndex(msg.id),
+									{
+										content: originalContent + appendedContent,
+										reasoningContent: originalReasoning + appendedReasoning || undefined,
+										timestamp: Date.now()
+									}
+								);
+							}
+
+							this.setChatLoading(msg.convId, false);
+							this.clearChatStreaming(msg.convId);
+							this.setProcessingState(msg.convId, null);
+
+							return;
+						}
+
+						console.error('Continue generation error:', error);
+						// keep whatever was appended so far, the message stays in memory and in DB
+						await DatabaseService.updateMessage(msg.id, {
+							content: originalContent + appendedContent,
+							reasoningContent: originalReasoning + appendedReasoning || undefined,
+							timestamp: Date.now()
+						});
+						conversationsStore.updateMessageAtIndex(conversationsStore.findMessageIndex(msg.id), {
+							content: originalContent + appendedContent,
+							reasoningContent: originalReasoning + appendedReasoning || undefined,
+							timestamp: Date.now()
+						});
+
+						this.setChatLoading(msg.convId, false);
+						this.clearChatStreaming(msg.convId);
+						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 (!isAbortError(error)) console.error('Failed to continue message:', error);
+			if (activeConv) this.setChatLoading(activeConv.id, false);
+		}
+	}
+
+	async editAssistantMessage(
+		messageId: string,
+		newContent: string,
+		shouldBranch: boolean
+	): Promise<void> {
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv || this.isChatLoadingInternal(activeConv.id)) return;
+
+		const result = this.getMessageByIdWithRole(messageId, MessageRole.ASSISTANT);
+		if (!result) return;
+
+		const { message: msg, index: idx } = result;
+
+		try {
+			if (shouldBranch) {
+				const newMessage = await DatabaseService.createMessageBranch(
+					{
+						convId: msg.convId,
+						type: msg.type,
+						timestamp: Date.now(),
+						role: msg.role,
+						content: newContent,
+						toolCalls: msg.toolCalls || '',
+						children: [],
+						model: msg.model
+					},
+					msg.parent!
+				);
+
+				await conversationsStore.updateCurrentNode(newMessage.id);
+			} else {
+				await DatabaseService.updateMessage(msg.id, { content: newContent });
+				conversationsStore.updateMessageAtIndex(idx, { content: newContent });
+			}
+
+			conversationsStore.updateConversationTimestamp();
+
+			await conversationsStore.refreshActiveMessages();
+		} catch (error) {
+			console.error('Failed to edit assistant message:', error);
+		}
+	}
+
+	async editUserMessagePreserveResponses(
+		messageId: string,
+		newContent: string,
+		newExtras?: DatabaseMessageExtra[]
+	): Promise<void> {
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv) return;
+
+		const result = this.getMessageByIdWithRole(messageId, MessageRole.USER);
+		if (!result) return;
+
+		const { message: msg, index: idx } = result;
+		try {
+			const updateData: Partial<DatabaseMessage> = { content: newContent };
+
+			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);
+			const rootMessage = allMessages.find((m) => m.type === 'root' && m.parent === null);
+
+			if (rootMessage && msg.parent === rootMessage.id && newContent.trim()) {
+				await conversationsStore.updateConversationTitleWithConfirmation(
+					activeConv.id,
+					generateConversationTitle(newContent, Boolean(config().titleGenerationUseFirstLine))
+				);
+			}
+
+			conversationsStore.updateConversationTimestamp();
+		} catch (error) {
+			console.error('Failed to edit user message:', error);
+		}
+	}
+
+	async editMessageWithBranching(
+		messageId: string,
+		newContent: string,
+		newExtras?: DatabaseMessageExtra[]
+	): Promise<void> {
+		const activeConv = conversationsStore.activeConversation;
+		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, index: idx } = result;
+		try {
+			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
+			const rootMessage = allMessages.find((m) => m.type === 'root' && m.parent === null);
+			const isFirstUserMessage =
+				msg.role === MessageRole.USER && rootMessage && msg.parent === rootMessage.id;
+			const extrasToUse =
+				newExtras !== undefined
+					? JSON.parse(JSON.stringify(newExtras))
+					: msg.extra
+						? JSON.parse(JSON.stringify(msg.extra))
+						: undefined;
+
+			let messageIdForResponse: string;
+
+			const dbMsg = findMessageById(allMessages, msg.id);
+			const hasChildren = dbMsg ? dbMsg.children.length > 0 : msg.children.length > 0;
+
+			if (!hasChildren) {
+				// No responses after this message — update in place instead of branching
+				const updates: Partial<DatabaseMessage> = {
+					content: newContent,
+					timestamp: Date.now(),
+					extra: extrasToUse
+				};
+				await DatabaseService.updateMessage(msg.id, updates);
+				conversationsStore.updateMessageAtIndex(idx, updates);
+				messageIdForResponse = msg.id;
+			} else {
+				// Has children — create a new branch as sibling
+				const parentId = msg.parent || rootMessage?.id;
+				if (!parentId) return;
+				const newMessage = await DatabaseService.createMessageBranch(
+					{
+						convId: msg.convId,
+						type: msg.type,
+						timestamp: Date.now(),
+						role: msg.role,
+						content: newContent,
+						toolCalls: msg.toolCalls || '',
+						children: [],
+						extra: extrasToUse,
+						model: msg.model
+					},
+					parentId
+				);
+				await conversationsStore.updateCurrentNode(newMessage.id);
+				messageIdForResponse = newMessage.id;
+			}
+
+			conversationsStore.updateConversationTimestamp();
+			if (isFirstUserMessage && newContent.trim())
+				await conversationsStore.updateConversationTitleWithConfirmation(
+					activeConv.id,
+					generateConversationTitle(newContent, Boolean(config().titleGenerationUseFirstLine))
+				);
+			await conversationsStore.refreshActiveMessages();
+			if (msg.role === MessageRole.USER)
+				await this.generateResponseForMessage(messageIdForResponse);
+		} catch (error) {
+			console.error('Failed to edit message with branching:', error);
+		}
+	}
+
+	private async generateResponseForMessage(userMessageId: string): Promise<void> {
+		const activeConv = conversationsStore.activeConversation;
+		if (!activeConv) return;
+
+		this.showErrorDialog(null);
+		this.setChatLoading(activeConv.id, true);
+		this.clearChatStreaming(activeConv.id);
+
+		try {
+			const allMessages = await conversationsStore.getConversationMessages(activeConv.id);
+			const conversationPath = filterByLeafNodeId(
+				allMessages,
+				userMessageId,
+				false
+			) as DatabaseMessage[];
+			const assistantMessage = await DatabaseService.createMessageBranch(
+				{
+					convId: activeConv.id,
+					type: MessageType.TEXT,
+					timestamp: Date.now(),
+					role: MessageRole.ASSISTANT,
+					content: '',
+					toolCalls: '',
+					children: [],
+					model: null
+				},
+				userMessageId
+			);
+
+			conversationsStore.addMessageToActive(assistantMessage);
+
+			await this.streamChatCompletion(conversationPath, assistantMessage);
+		} catch (error) {
+			console.error('Failed to generate response:', error);
+			this.setChatLoading(activeConv.id, false);
+		}
+	}
+
+	private getContextTotal(): number | null {
+		const activeConvId = this.activeConversationId;
+		const activeState = activeConvId ? this.getProcessingState(activeConvId) : null;
+
+		if (activeState && typeof activeState.contextTotal === 'number' && activeState.contextTotal > 0)
+			return activeState.contextTotal;
+
+		if (isRouterMode()) {
+			const modelContextSize = selectedModelContextSize();
+
+			if (typeof modelContextSize === 'number' && modelContextSize > 0) {
+				return modelContextSize;
+			}
+		} else {
+			const propsContextSize = contextSize();
+
+			if (typeof propsContextSize === 'number' && propsContextSize > 0) {
+				return propsContextSize;
+			}
+		}
+
+		return null;
+	}
+
+	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.setProcessingState(targetId, processingState);
+		}
+	}
+
+	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
+		};
+	}
+
+	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;
+				}
+			}
+		}
+	}
+
+	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;
+	}
+
+	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 };
+
+		if (isRouterMode()) {
+			const modelName = selectedModelName();
+			if (modelName) apiOptions.model = modelName;
+		}
+
+		if (currentConfig.systemMessage) apiOptions.systemMessage = currentConfig.systemMessage;
+
+		if (currentConfig.disableReasoningParsing) apiOptions.disableReasoningParsing = true;
+
+		if (currentConfig.excludeReasoningFromContext) apiOptions.excludeReasoningFromContext = true;
+
+		apiOptions.enableThinking = conversationsStore.getThinkingEnabled();
+		const effort = conversationsStore.getReasoningEffort();
+		if (effort !== ReasoningEffort.OFF) apiOptions.reasoningEffort = effort;
+
+		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;
+
+		apiOptions.backend_sampling = currentConfig.backend_sampling;
+
+		if (currentConfig.customJson) apiOptions.custom = currentConfig.customJson;
+
+		return apiOptions;
+	}
+
+	private cancelPreEncode(): void {
+		if (this.preEncodeAbortController) {
+			this.preEncodeAbortController.abort();
+			this.preEncodeAbortController = null;
+		}
+	}
+
+	private async triggerPreEncode(
+		allMessages: DatabaseMessage[],
+		assistantMessage: DatabaseMessage,
+		assistantContent: string,
+		model?: string | null,
+		excludeReasoning?: boolean
+	): Promise<void> {
+		this.cancelPreEncode();
+		this.preEncodeAbortController = new AbortController();
+
+		const signal = this.preEncodeAbortController.signal;
+
+		try {
+			const allIdle = await ChatService.areAllSlotsIdle(model, signal);
+			if (!allIdle || signal.aborted) return;
+
+			const messagesWithAssistant: DatabaseMessage[] = [
+				...allMessages,
+				{ ...assistantMessage, content: assistantContent }
+			];
+
+			await ChatService.preEncode(messagesWithAssistant, model, excludeReasoning, signal);
+		} catch (err) {
+			if (!isAbortError(err)) {
+				console.warn('[ChatStore] Pre-encode failed:', err);
+			}
+		}
+	}
+}
+
+export const chatStore = new ChatStore();
+
+export const activeProcessingState = () => chatStore.activeProcessingState;
+export const currentResponse = () => chatStore.currentResponse;
+export const errorDialog = () => chatStore.errorDialogState;
+export const getAddFilesHandler = () => chatStore.getAddFilesHandler();
+export const getAllLoadingChats = () => chatStore.getAllLoadingChats();
+export const getAllStreamingChats = () => chatStore.getAllStreamingChats();
+export const getChatStreaming = (convId: string) => chatStore.getChatStreamingPublic(convId);
+export const isChatLoading = (convId: string) => chatStore.isChatLoadingPublic(convId);
+export const isChatStreaming = () => chatStore.isStreaming();
+export const isEditing = () => chatStore.isEditing();
+export const isLoading = () => chatStore.isLoading;
+export const isReasoning = () => chatStore.isReasoning;
+export const pendingEditMessageId = () => chatStore.pendingEditMessageId;
+export const chatHasPendingMessage = (convId: string) => chatStore.hasPendingMessage(convId);
+export const chatPendingMessageContent = (convId: string) =>
+	chatStore.pendingMessageContent(convId);
+export const chatPendingMessageExtras = (convId: string) => chatStore.pendingMessageExtras(convId);
+export const chatClearPendingMessage = (convId: string) => chatStore.clearPendingMessage(convId);
+export const chatInjectPendingMessage = (
+	convId: string,
+	content: string,
+	extras?: DatabaseMessageExtra[]
+) => chatStore.injectPendingMessage(convId, content, extras);
diff --git a/backend/llama.cpp/tools/ui/src/lib/stores/conversations.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/stores/conversations.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ea2c11e14519e41910164154014e6b8b3bdc0911
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/stores/conversations.svelte.ts
@@ -0,0 +1,1225 @@
+/**
+ * conversationsStore - Reactive State Store for Conversations
+ *
+ * Manages conversation lifecycle, persistence, navigation, and MCP server overrides.
+ *
+ * **Architecture & Relationships:**
+ * - **DatabaseService**: Stateless IndexedDB layer
+ * - **conversationsStore** (this): Reactive state + business logic
+ * - **chatStore**: Chat-specific state (streaming, loading)
+ *
+ * **Key Responsibilities:**
+ * - Conversation CRUD (create, load, delete)
+ * - Message management and tree navigation
+ * - MCP server per-chat overrides
+ * - Import/Export functionality
+ * - Title management with confirmation
+ *
+ * @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 { MigrationService } from '$lib/services/migration.service';
+import { config } from '$lib/stores/settings.svelte';
+import { mcpStore } from '$lib/stores/mcp.svelte';
+import { filterByLeafNodeId, findLeafNode, generateConversationTitle } from '$lib/utils';
+import type { McpServerOverride } from '$lib/types/database';
+import { zipSync, unzipSync, strToU8, strFromU8 } from 'fflate';
+import {
+	MessageRole,
+	HtmlInputType,
+	FileExtensionText,
+	MimeTypeText,
+	MimeTypeApplication,
+	ReasoningEffort
+} from '$lib/enums';
+import {
+	ISO_DATE_TIME_SEPARATOR,
+	ISO_DATE_TIME_SEPARATOR_REPLACEMENT,
+	ISO_TIMESTAMP_SLICE_LENGTH,
+	EXPORT_CONV_ID_TRIM_LENGTH,
+	EXPORT_CONV_NONALNUM_REPLACEMENT,
+	EXPORT_CONV_NAME_SUFFIX_MAX_LENGTH,
+	ISO_TIME_SEPARATOR,
+	ISO_TIME_SEPARATOR_REPLACEMENT,
+	NON_ALPHANUMERIC_REGEX,
+	MULTIPLE_UNDERSCORE_REGEX,
+	REASONING_EFFORT_DEFAULT_LOCALSTORAGE_KEY
+} from '$lib/constants';
+
+import { ROUTES } from '$lib/constants/routes';
+import { RouterService } from '$lib/services/router.service';
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+
+export interface ConversationTreeItem {
+	conversation: DatabaseConversation;
+	depth: number;
+}
+
+class ConversationsStore {
+	/**
+	 *
+	 *
+	 * State
+	 *
+	 *
+	 */
+
+	/** List of all conversations */
+	conversations = $state<DatabaseConversation[]>([]);
+
+	/** Currently active conversation */
+	activeConversation = $state<DatabaseConversation | null>(null);
+
+	/** Messages in the active conversation (filtered by currNode path) */
+	activeMessages = $state<DatabaseMessage[]>([]);
+
+	/** Whether the store has been initialized */
+	isInitialized = $state(false);
+
+	/** Global (non-conversation-specific) thinking toggle default, derived from reasoning effort */
+	pendingThinkingEnabled = $state(false);
+
+	/** Global (non-conversation-specific) reasoning effort default */
+	pendingReasoningEffort = $state<ReasoningEffort | ReasoningEffort.OFF>(
+		ConversationsStore.loadReasoningEffortDefault()
+	);
+
+	/** Last non-off reasoning effort, restored when re-enabling thinking globally */
+	private lastNonOffEffort: ReasoningEffort | null = null;
+
+	/** Load reasoning effort default from localStorage */
+	private static loadReasoningEffortDefault(): ReasoningEffort | ReasoningEffort.OFF {
+		if (typeof globalThis.localStorage === 'undefined') return ReasoningEffort.OFF;
+		try {
+			const raw = localStorage.getItem(REASONING_EFFORT_DEFAULT_LOCALSTORAGE_KEY);
+			return (raw as ReasoningEffort | ReasoningEffort.OFF) || ReasoningEffort.OFF;
+		} catch {
+			return ReasoningEffort.OFF;
+		}
+	}
+
+	/** Persist reasoning effort default to localStorage */
+	private saveReasoningEffortDefaults(): void {
+		if (typeof globalThis.localStorage === 'undefined') return;
+		localStorage.setItem(REASONING_EFFORT_DEFAULT_LOCALSTORAGE_KEY, this.pendingReasoningEffort);
+	}
+
+	/** Callback for title update confirmation dialog */
+	titleUpdateConfirmationCallback?: (currentTitle: string, newTitle: string) => Promise<boolean>;
+
+	/**
+	 * 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;
+
+	/**
+	 *
+	 *
+	 * Lifecycle
+	 *
+	 *
+	 */
+
+	/**
+	 * Initialize the store by loading conversations from database.
+	 * Must be called once after app startup.
+	 */
+	async init(): Promise<void> {
+		if (!browser) return;
+		if (this.isInitialized) return;
+
+		try {
+			await MigrationService.runAllMigrations();
+			await this.loadConversations();
+			this.isInitialized = true;
+		} catch (error) {
+			console.error('Failed to initialize conversations:', error);
+		}
+	}
+
+	/**
+	 * Alias for init() for backward compatibility.
+	 */
+	async initialize(): Promise<void> {
+		return this.init();
+	}
+
+	/**
+	 * 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;
+	}
+
+	/**
+	 *
+	 *
+	 * Message Array Operations
+	 *
+	 *
+	 */
+
+	/**
+	 * Adds a message to the active messages array
+	 */
+	addMessageToActive(message: DatabaseMessage): void {
+		this.activeMessages.push(message);
+	}
+
+	/**
+	 * 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 };
+		}
+	}
+
+	/**
+	 * Finds the index of a message in active messages
+	 */
+	findMessageIndex(messageId: string): number {
+		return this.activeMessages.findIndex((m) => m.id === messageId);
+	}
+
+	/**
+	 * Removes messages from active messages starting at an index
+	 */
+	sliceActiveMessages(startIndex: number): void {
+		this.activeMessages = this.activeMessages.slice(0, startIndex);
+	}
+
+	/**
+	 * 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;
+	}
+
+	/**
+	 * Sets the callback function for title update confirmations
+	 */
+	setTitleUpdateConfirmationCallback(
+		callback: (currentTitle: string, newTitle: string) => Promise<boolean>
+	): void {
+		this.titleUpdateConfirmationCallback = callback;
+	}
+
+	/**
+	 *
+	 *
+	 * Conversation CRUD
+	 *
+	 *
+	 */
+
+	/**
+	 * Loads all conversations from the database
+	 */
+	async loadConversations(): Promise<void> {
+		const conversations = await DatabaseService.getAllConversations();
+		this.conversations = conversations;
+	}
+
+	/**
+	 * Creates a new conversation and navigates to it
+	 * @param name - Optional name for the conversation
+	 * @returns The ID of the created conversation
+	 */
+	async createConversation(name?: string): Promise<string> {
+		const conversationName = name || `Chat ${new Date().toLocaleString()}`;
+		const conversation = await DatabaseService.createConversation(conversationName);
+
+		// New conversations inherit per-server enabled defaults directly from
+		// `mcpServers[i].enabled` (see #checkServerEnabled). No per-conversation
+		// override list needs to be seeded.
+
+		// Inherit global thinking/reasoning defaults into the new conversation
+		const thinkingEnabled = this.getThinkingEnabled();
+		conversation.thinkingEnabled = thinkingEnabled;
+		conversation.reasoningEffort =
+			this.pendingReasoningEffort === ReasoningEffort.OFF ? undefined : this.pendingReasoningEffort;
+		await DatabaseService.updateConversation(conversation.id, {
+			thinkingEnabled,
+			reasoningEffort:
+				this.pendingReasoningEffort === ReasoningEffort.OFF
+					? undefined
+					: this.pendingReasoningEffort
+		});
+
+		this.conversations = [conversation, ...this.conversations];
+		this.activeConversation = conversation;
+		this.activeMessages = [];
+
+		await goto(RouterService.chat(conversation.id));
+
+		return conversation.id;
+	}
+
+	/**
+	 * Loads a specific conversation and its messages
+	 * @param convId - The conversation ID to load
+	 * @returns True if conversation was loaded successfully
+	 */
+	async loadConversation(convId: string): Promise<boolean> {
+		try {
+			const conversation = await DatabaseService.getConversation(convId);
+
+			if (!conversation) {
+				return false;
+			}
+
+			this.activeConversation = conversation;
+
+			if (conversation.currNode) {
+				const allMessages = await DatabaseService.getConversationMessages(convId);
+				const filteredMessages = filterByLeafNodeId(
+					allMessages,
+					conversation.currNode,
+					false
+				) as DatabaseMessage[];
+				this.activeMessages = filteredMessages;
+			} else {
+				const messages = await DatabaseService.getConversationMessages(convId);
+				this.activeMessages = messages;
+			}
+
+			return true;
+		} catch (error) {
+			console.error('Failed to load conversation:', error);
+			return false;
+		}
+	}
+
+	/**
+	 * Clears the active conversation and messages.
+	 */
+	clearActiveConversation(): void {
+		this.activeConversation = null;
+		this.activeMessages = [];
+		// reload defaults so new chats inherit persisted state
+		this.pendingReasoningEffort = ConversationsStore.loadReasoningEffortDefault();
+	}
+
+	/**
+	 * Deletes a conversation and all its messages
+	 * @param convId - The conversation ID to delete
+	 */
+	async deleteConversation(convId: string, options?: { deleteWithForks?: boolean }): Promise<void> {
+		try {
+			await DatabaseService.deleteConversation(convId, options);
+
+			if (options?.deleteWithForks) {
+				// Collect all descendants recursively
+				const idsToRemove = new SvelteSet([convId]);
+				const queue = [convId];
+				while (queue.length > 0) {
+					const parentId = queue.pop()!;
+					for (const c of this.conversations) {
+						if (c.forkedFromConversationId === parentId && !idsToRemove.has(c.id)) {
+							idsToRemove.add(c.id);
+							queue.push(c.id);
+						}
+					}
+				}
+				this.conversations = this.conversations.filter((c) => !idsToRemove.has(c.id));
+
+				if (this.activeConversation && idsToRemove.has(this.activeConversation.id)) {
+					this.clearActiveConversation();
+					await goto(ROUTES.NEW_CHAT);
+				}
+			} else {
+				// Reparent direct children to deleted conv's parent (or promote to top-level)
+				const deletedConv = this.conversations.find((c) => c.id === convId);
+				const newParent = deletedConv?.forkedFromConversationId;
+				this.conversations = this.conversations
+					.filter((c) => c.id !== convId)
+					.map((c) =>
+						c.forkedFromConversationId === convId
+							? { ...c, forkedFromConversationId: newParent }
+							: c
+					);
+
+				if (this.activeConversation?.id === convId) {
+					this.clearActiveConversation();
+					await goto(ROUTES.NEW_CHAT);
+				}
+			}
+		} 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(ROUTES.NEW_CHAT);
+		} 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.
+	 */
+	async refreshActiveMessages(): Promise<void> {
+		if (!this.activeConversation) return;
+
+		const allMessages = await DatabaseService.getConversationMessages(this.activeConversation.id);
+
+		if (allMessages.length === 0) {
+			this.activeMessages = [];
+			return;
+		}
+
+		const leafNodeId =
+			this.activeConversation.currNode ||
+			allMessages.reduce((latest, msg) => (msg.timestamp > latest.timestamp ? msg : latest)).id;
+
+		const currentPath = filterByLeafNodeId(allMessages, leafNodeId, false) as DatabaseMessage[];
+
+		this.activeMessages = currentPath;
+	}
+
+	/**
+	 * 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
+	 */
+	async updateConversationName(convId: string, name: string): Promise<void> {
+		try {
+			await DatabaseService.updateConversation(convId, { name });
+
+			const convIndex = this.conversations.findIndex((c) => c.id === convId);
+
+			if (convIndex !== -1) {
+				this.conversations[convIndex].name = name;
+				this.conversations = [...this.conversations];
+			}
+
+			if (this.activeConversation?.id === convId) {
+				this.activeConversation = { ...this.activeConversation, name };
+			}
+		} catch (error) {
+			console.error('Failed to update conversation name:', error);
+		}
+	}
+
+	/**
+	 * Toggles the pinned status of a conversation.
+	 * @param convId - The conversation ID to toggle
+	 * @returns The new pinned status
+	 */
+	async toggleConversationPin(convId: string): Promise<boolean> {
+		try {
+			const newPinnedState = await DatabaseService.toggleConversationPin(convId);
+
+			const convIndex = this.conversations.findIndex((c) => c.id === convId);
+
+			if (convIndex !== -1) {
+				this.conversations[convIndex].pinned = newPinnedState;
+				this.conversations = [...this.conversations];
+			}
+
+			if (this.activeConversation?.id === convId) {
+				this.activeConversation = { ...this.activeConversation, pinned: newPinnedState };
+			}
+
+			return newPinnedState;
+		} catch (error) {
+			console.error('Failed to toggle conversation pin:', error);
+			return false;
+		}
+	}
+
+	/**
+	 * Updates conversation title with optional confirmation dialog based on settings
+	 * @param convId - The conversation ID to update
+	 * @param newTitle - The new title content
+	 * @returns True if title was updated, false if cancelled
+	 */
+	async updateConversationTitleWithConfirmation(
+		convId: string,
+		newTitle: string
+	): Promise<boolean> {
+		try {
+			const currentConfig = config();
+
+			if (currentConfig.askForTitleConfirmation && this.titleUpdateConfirmationCallback) {
+				const conversation = await DatabaseService.getConversation(convId);
+				if (!conversation) return false;
+
+				const shouldUpdate = await this.titleUpdateConfirmationCallback(
+					conversation.name,
+					newTitle
+				);
+				if (!shouldUpdate) return false;
+			}
+
+			await this.updateConversationName(convId, newTitle);
+			return true;
+		} catch (error) {
+			console.error('Failed to update conversation title with confirmation:', error);
+			return false;
+		}
+	}
+
+	/**
+	 * Updates conversation lastModified timestamp and moves it to top of list
+	 */
+	updateConversationTimestamp(): void {
+		if (!this.activeConversation) return;
+
+		const chatIndex = this.conversations.findIndex((c) => c.id === this.activeConversation!.id);
+
+		if (chatIndex !== -1) {
+			this.conversations[chatIndex].lastModified = Date.now();
+			const updatedConv = this.conversations.splice(chatIndex, 1)[0];
+			this.conversations = [updatedConv, ...this.conversations];
+		}
+	}
+
+	/**
+	 * 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) => m.type === 'root' && m.parent === null);
+		const currentFirstUserMessage = this.activeMessages.find(
+			(m) => m.role === MessageRole.USER && m.parent === rootMessage?.id
+		);
+
+		const currentLeafNodeId = findLeafNode(allMessages, siblingId);
+
+		await DatabaseService.updateCurrentNode(this.activeConversation.id, currentLeafNodeId);
+		this.activeConversation = { ...this.activeConversation, currNode: currentLeafNodeId };
+		await this.refreshActiveMessages();
+
+		if (rootMessage && this.activeMessages.length > 0) {
+			const newFirstUserMessage = this.activeMessages.find(
+				(m) => m.role === MessageRole.USER && m.parent === rootMessage.id
+			);
+
+			if (
+				newFirstUserMessage &&
+				newFirstUserMessage.content.trim() &&
+				(!currentFirstUserMessage ||
+					newFirstUserMessage.id !== currentFirstUserMessage.id ||
+					newFirstUserMessage.content.trim() !== currentFirstUserMessage.content.trim())
+			) {
+				await this.updateConversationTitleWithConfirmation(
+					this.activeConversation.id,
+					generateConversationTitle(
+						newFirstUserMessage.content,
+						Boolean(config().titleGenerationUseFirstLine)
+					)
+				);
+			}
+		}
+	}
+
+	/**
+	 *
+	 *
+	 * MCP Server Overrides
+	 *
+	 *
+	 */
+
+	/**
+	/**
+	 * Resolve the per-server enabled value when no active conversation exists.
+	 * The default for new chats is the server's own `enabled` flag in `mcpServers`.
+	 */
+	#getDefaultOverrideForNoConversation(serverId: string): McpServerOverride | undefined {
+		const server = mcpStore.getServers().find((s) => s.id === serverId);
+		if (!server) return undefined;
+		return { serverId, enabled: server.enabled };
+	}
+
+	/**
+	 * Default overrides for new chats are derived from `mcpServers[i].enabled`,
+	 * so the global on/off state lives in one place.
+	 */
+	#getAllDefaultOverridesForNoConversation(): McpServerOverride[] {
+		return mcpStore.getServers().map((s) => ({ serverId: s.id, enabled: s.enabled }));
+	}
+
+	/**
+	 * Gets MCP server override for a specific server in the active conversation.
+	 * Falls back to `mcpServers[i].enabled` if no active conversation exists.
+	 * @param serverId - The server ID to check
+	 * @returns The override if set, undefined if no matching server
+	 */
+	getMcpServerOverride(serverId: string): McpServerOverride | undefined {
+		if (this.activeConversation) {
+			return this.activeConversation.mcpServerOverrides?.find(
+				(o: McpServerOverride) => o.serverId === serverId
+			);
+		}
+		return this.#getDefaultOverrideForNoConversation(serverId);
+	}
+
+	/**
+	 * Get all MCP server overrides for the current conversation.
+	 * When no active conversation, derives from `mcpServers[i].enabled`.
+	 */
+	getAllMcpServerOverrides(): McpServerOverride[] {
+		if (this.activeConversation?.mcpServerOverrides) {
+			return this.activeConversation.mcpServerOverrides;
+		}
+		return this.#getAllDefaultOverridesForNoConversation();
+	}
+
+	/**
+	 * 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
+	 */
+	isMcpServerEnabledForChat(serverId: string): boolean {
+		const override = this.getMcpServerOverride(serverId);
+		return override?.enabled ?? false;
+	}
+
+	/**
+	 * Sets or removes MCP server override for the active conversation.
+	 * If no conversation exists, persists `enabled` onto `mcpServers[i].enabled`
+	 * (the single source of truth for new-chat defaults).
+	 * @param serverId - The server ID to override
+	 * @param enabled - The enabled state, or undefined to remove per-conversation override
+	 */
+	async setMcpServerOverride(serverId: string, enabled: boolean | undefined): Promise<void> {
+		if (!this.activeConversation) {
+			if (enabled !== undefined) {
+				mcpStore.updateServer(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 }];
+			}
+		}
+
+		await DatabaseService.updateConversation(this.activeConversation.id, {
+			mcpServerOverrides: newOverrides.length > 0 ? newOverrides : undefined
+		});
+
+		this.activeConversation = {
+			...this.activeConversation,
+			mcpServerOverrides: newOverrides.length > 0 ? newOverrides : undefined
+		};
+
+		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];
+		}
+	}
+
+	/**
+	 * 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);
+	}
+
+	/**
+	 * Gets the effective thinking-enabled state for the active conversation.
+	 * Returns the conversation override if set, otherwise the global default.
+	 */
+	getThinkingEnabled(): boolean {
+		if (this.activeConversation) {
+			if (this.activeConversation.thinkingEnabled !== undefined) {
+				return this.activeConversation.thinkingEnabled;
+			}
+		}
+		return this.getReasoningEffort() !== ReasoningEffort.OFF;
+	}
+
+	/**
+	 * Sets the thinking-enabled state for the active conversation.
+	 * If no conversation exists, stores the global default.
+	 * @param enabled - The enabled state
+	 */
+	async setThinkingEnabled(enabled: boolean): Promise<void> {
+		if (!this.activeConversation) {
+			if (enabled) {
+				const effort = this.lastNonOffEffort ?? ReasoningEffort.LOW;
+				this.pendingReasoningEffort = effort;
+				this.saveReasoningEffortDefaults();
+			} else {
+				if (this.pendingReasoningEffort !== ReasoningEffort.OFF) {
+					this.lastNonOffEffort = this.pendingReasoningEffort;
+				}
+				this.pendingReasoningEffort = ReasoningEffort.OFF;
+				this.saveReasoningEffortDefaults();
+			}
+			return;
+		}
+
+		this.activeConversation = {
+			...this.activeConversation,
+			thinkingEnabled: enabled
+		};
+
+		await DatabaseService.updateConversation(this.activeConversation.id, {
+			thinkingEnabled: enabled
+		});
+
+		const convIndex = this.conversations.findIndex((c) => c.id === this.activeConversation!.id);
+		if (convIndex !== -1) {
+			this.conversations[convIndex].thinkingEnabled = enabled;
+			this.conversations = [...this.conversations];
+		}
+	}
+
+	/**
+	 * Gets the effective reasoning effort for the active conversation.
+	 * Returns the conversation override if set, otherwise the global default.
+	 */
+	getReasoningEffort(): ReasoningEffort | ReasoningEffort.OFF {
+		if (this.activeConversation) {
+			return this.activeConversation.reasoningEffort ?? this.pendingReasoningEffort;
+		}
+		return this.pendingReasoningEffort;
+	}
+
+	/**
+	 * Sets the reasoning effort for the active conversation.
+	 * If no conversation exists, stores the global default.
+	 * @param effort - The effort level ('low' | 'medium' | 'high' | 'max')
+	 */
+	async setReasoningEffort(effort: ReasoningEffort): Promise<void> {
+		if (!this.activeConversation) {
+			this.pendingReasoningEffort = effort;
+			this.saveReasoningEffortDefaults();
+			return;
+		}
+
+		this.activeConversation = {
+			...this.activeConversation,
+			reasoningEffort: effort
+		};
+
+		await DatabaseService.updateConversation(this.activeConversation.id, {
+			reasoningEffort: effort
+		});
+
+		const convIndex = this.conversations.findIndex((c) => c.id === this.activeConversation!.id);
+		if (convIndex !== -1) {
+			this.conversations[convIndex].reasoningEffort = effort;
+			this.conversations = [...this.conversations];
+		}
+	}
+
+	/**
+	 * Forks a conversation at a specific message, creating a new conversation
+	 * containing messages from root up to the target message, then navigates to it.
+	 *
+	 * @param messageId - The message ID to fork at
+	 * @param options - Fork options (name and whether to include attachments)
+	 * @returns The new conversation ID, or null if fork failed
+	 */
+	async forkConversation(
+		messageId: string,
+		options: { name: string; includeAttachments: boolean }
+	): Promise<string | null> {
+		if (!this.activeConversation) return null;
+
+		try {
+			const newConv = await DatabaseService.forkConversation(
+				this.activeConversation.id,
+				messageId,
+				options
+			);
+
+			this.conversations = [newConv, ...this.conversations];
+
+			await goto(RouterService.chat(newConv.id));
+
+			toast.success('Conversation forked');
+
+			return newConv.id;
+		} catch (error) {
+			console.error('Failed to fork conversation:', error);
+			toast.error('Failed to fork conversation');
+
+			return null;
+		}
+	}
+
+	/**
+	 *
+	 *
+	 * Import & Export
+	 *
+	 *
+	 */
+
+	/**
+	 * Generates a sanitized filename for a conversation export
+	 * @param conversation - The conversation metadata
+	 * @param msgs - Optional array of messages belonging to the conversation
+	 * @returns The generated filename string
+	 */
+	generateConversationFilename(
+		conversation: { id?: string; name?: string },
+		msgs?: DatabaseMessage[]
+	): string {
+		const conversationName = (conversation.name ?? '').trim().toLowerCase();
+
+		const sanitizedName = conversationName
+			.replace(NON_ALPHANUMERIC_REGEX, EXPORT_CONV_NONALNUM_REPLACEMENT)
+			.replace(MULTIPLE_UNDERSCORE_REGEX, '_')
+			.substring(0, EXPORT_CONV_NAME_SUFFIX_MAX_LENGTH);
+
+		// If we have messages, use the timestamp of the newest message
+		const referenceDate = msgs?.length
+			? new Date(Math.max(...msgs.map((m) => m.timestamp)))
+			: new Date();
+
+		const iso = referenceDate.toISOString().slice(0, ISO_TIMESTAMP_SLICE_LENGTH);
+		const formattedDate = iso
+			.replace(ISO_DATE_TIME_SEPARATOR, ISO_DATE_TIME_SEPARATOR_REPLACEMENT)
+			.replaceAll(ISO_TIME_SEPARATOR, ISO_TIME_SEPARATOR_REPLACEMENT);
+		const trimmedConvId = conversation.id?.slice(0, EXPORT_CONV_ID_TRIM_LENGTH) ?? '';
+		return `${formattedDate}_conv_${trimmedConvId}_${sanitizedName}${FileExtensionText.JSONL}`;
+	}
+
+	/**
+	 * Serializes a session (a conversation with its messages) as JSONL.
+	 * The first line is the session header (a `type: 'session'` record carrying the
+	 * conversation properties); each subsequent line is a single message.
+	 * @param data - The exported conversation payload
+	 * @returns The JSONL string (one record per line)
+	 */
+	serializeSessionToJsonl(data: ExportedConversation): string {
+		const { conv, messages } = data;
+
+		const sessionLine = JSON.stringify({ type: 'session', harness: 'llama.app', ...conv });
+		const messageLines = messages.map((message: DatabaseMessage) => {
+			// `toolCalls` is stored as a JSON string; drop it when empty, otherwise parse it.
+			const { toolCalls, ...rest } = message;
+			const normalized = toolCalls ? { ...rest, toolCalls: JSON.parse(toolCalls) } : rest;
+
+			return JSON.stringify({ type: 'message', message: normalized });
+		});
+
+		return [sessionLine, ...messageLines].join('\n');
+	}
+
+	/**
+	 * Parses the JSONL session format produced by {@link serializeSessionToJsonl}.
+	 * A `type: 'session'` line starts a new session; following `type: 'message'`
+	 * lines are appended to it. Supports multiple sessions in a single file.
+	 * @param text - The JSONL file contents
+	 * @returns The parsed conversations with their messages
+	 */
+	parseSessionsJsonl(text: string): ExportedConversation[] {
+		const sessions: ExportedConversation[] = [];
+		let current: ExportedConversation | null = null;
+
+		for (const line of text.split('\n')) {
+			const trimmed = line.trim();
+			if (!trimmed) continue;
+
+			const record = JSON.parse(trimmed);
+
+			if (record.type === 'session') {
+				// Drop the discriminator and harness marker; the rest is the conversation.
+				const conv = { ...record };
+				delete conv.type;
+				delete conv.harness;
+				current = { conv: conv as DatabaseConversation, messages: [] };
+				sessions.push(current);
+			} else if (record.type === 'message') {
+				if (!current) {
+					throw new Error('Invalid JSONL: message record before any session record');
+				}
+
+				const message = record.message as DatabaseMessage;
+				// `toolCalls` is parsed to an array on export; the DB stores it as a string.
+				if (message.toolCalls !== undefined && typeof message.toolCalls !== 'string') {
+					message.toolCalls = JSON.stringify(message.toolCalls);
+				}
+				current.messages.push(message);
+			}
+			// Ignore unknown record types for forward compatibility.
+		}
+
+		return sessions;
+	}
+
+	/**
+	 * Parses an import file into conversations, accepting the current `.jsonl` and
+	 * `.zip` formats as well as the legacy `.json` format.
+	 * @param file - The user-selected file
+	 * @returns The parsed conversations with their messages
+	 */
+	async parseImportFile(file: File): Promise<ExportedConversation[]> {
+		const name = file.name.toLowerCase();
+
+		if (name.endsWith(FileExtensionText.ZIP)) {
+			const entries = unzipSync(new Uint8Array(await file.arrayBuffer()));
+			const sessions: ExportedConversation[] = [];
+			for (const [entryName, bytes] of Object.entries(entries)) {
+				if (!entryName.toLowerCase().endsWith(FileExtensionText.JSONL)) continue;
+				sessions.push(...this.parseSessionsJsonl(strFromU8(bytes)));
+			}
+			return sessions;
+		}
+
+		const text = await file.text();
+
+		if (name.endsWith(FileExtensionText.JSONL)) {
+			return this.parseSessionsJsonl(text);
+		}
+
+		// Legacy JSON format: an array of conversations or a single conversation object.
+		const parsed = JSON.parse(text);
+		if (Array.isArray(parsed)) {
+			return parsed;
+		}
+		if (parsed && typeof parsed === 'object' && 'conv' in parsed && 'messages' in parsed) {
+			return [parsed];
+		}
+		throw new Error(
+			'Invalid file format: expected array of conversations or single conversation object'
+		);
+	}
+
+	/**
+	 * Triggers a browser download of the provided exported conversation data
+	 * @param data - The exported conversation payload (a single conversation with its messages)
+	 * @param filename - Filename; if omitted, a deterministic name is generated
+	 */
+	downloadConversationFile(data: ExportedConversation, filename?: string): void {
+		const { conv: conversation, messages: msgs } = data;
+
+		if (!conversation) {
+			console.error('Invalid data: missing conversation');
+			return;
+		}
+
+		const downloadFilename = filename ?? this.generateConversationFilename(conversation, msgs);
+
+		const jsonl = this.serializeSessionToJsonl(data);
+		const blob = new Blob([jsonl], { type: MimeTypeText.JSONL });
+		this.triggerDownload(blob, downloadFilename);
+	}
+
+	/**
+	 * Triggers a browser download of multiple conversations as a `.zip`, one
+	 * `.jsonl` file per conversation.
+	 * @param data - The conversations to export
+	 */
+	downloadConversationsArchive(data: ExportedConversation[]): void {
+		if (data.length === 0) {
+			console.error('Invalid data: no conversations to export');
+			return;
+		}
+
+		const usedNames = new SvelteSet<string>();
+		const files: Record<string, Uint8Array> = {};
+
+		for (const session of data) {
+			const baseName = this.generateConversationFilename(session.conv, session.messages);
+
+			// Disambiguate any duplicate filenames within the archive.
+			let entryName = baseName;
+			let suffix = 1;
+			while (usedNames.has(entryName)) {
+				entryName = baseName.replace(
+					new RegExp(`${FileExtensionText.JSONL}$`),
+					`_${suffix++}${FileExtensionText.JSONL}`
+				);
+			}
+			usedNames.add(entryName);
+
+			files[entryName] = strToU8(this.serializeSessionToJsonl(session));
+		}
+
+		const archiveName = `${new Date().toISOString().split(ISO_DATE_TIME_SEPARATOR)[0]}_conversations${FileExtensionText.ZIP}`;
+
+		const zipped = zipSync(files);
+		const blob = new Blob([zipped], { type: MimeTypeApplication.ZIP });
+		this.triggerDownload(blob, archiveName);
+	}
+
+	/**
+	 * Triggers a browser download of a blob under the given filename.
+	 */
+	private triggerDownload(blob: Blob, filename: string): void {
+		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);
+	}
+
+	/**
+	 * Downloads a single conversation as a JSONL file, serializing the full message tree.
+	 * @param convId - The conversation ID to download
+	 */
+	async downloadConversation(convId: string): Promise<void> {
+		const conversation =
+			this.activeConversation?.id === convId
+				? this.activeConversation
+				: await DatabaseService.getConversation(convId);
+
+		if (!conversation) return;
+
+		const messages = await DatabaseService.getConversationMessages(convId);
+
+		this.downloadConversationFile({ conv: conversation, messages });
+	}
+
+	/**
+	 * Imports conversations from a JSON file
+	 * Opens file picker and processes the selected file
+	 * @returns The list of imported conversations
+	 */
+	async importConversations(): Promise<DatabaseConversation[]> {
+		return new Promise((resolve, reject) => {
+			const input = document.createElement('input');
+			input.type = HtmlInputType.FILE;
+			input.accept = FileExtensionText.JSON;
+
+			input.onchange = async (e) => {
+				const file = (e.target as HTMLInputElement)?.files?.[0];
+
+				if (!file) {
+					reject(new Error('No file selected'));
+					return;
+				}
+
+				try {
+					const text = await file.text();
+					const parsedData = JSON.parse(text);
+					let importedData: ExportedConversations;
+
+					if (Array.isArray(parsedData)) {
+						importedData = parsedData;
+					} else if (
+						parsedData &&
+						typeof parsedData === 'object' &&
+						'conv' in parsedData &&
+						'messages' in parsedData
+					) {
+						importedData = [parsedData];
+					} else {
+						throw new Error('Invalid file format');
+					}
+
+					const result = await DatabaseService.importConversations(importedData);
+					toast.success(`Imported ${result.imported} conversation(s), skipped ${result.skipped}`);
+
+					await this.loadConversations();
+
+					const importedConversations = (
+						Array.isArray(importedData) ? importedData : [importedData]
+					).map((item) => item.conv);
+
+					resolve(importedConversations);
+				} catch (err: unknown) {
+					const message = err instanceof Error ? err.message : 'Unknown error';
+					console.error('Failed to import conversations:', err);
+					toast.error('Import failed', { description: message });
+					reject(new Error(`Import failed: ${message}`));
+				}
+			};
+
+			input.click();
+		});
+	}
+
+	/**
+	 * Imports conversations from provided data (without file picker)
+	 * @param data - Array of conversation data with messages
+	 * @returns Import result with counts
+	 */
+	async importConversationsData(
+		data: ExportedConversations
+	): Promise<{ imported: number; skipped: number }> {
+		const result = await DatabaseService.importConversations(data);
+		await this.loadConversations();
+		return result;
+	}
+}
+
+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;
+
+/**
+ * Builds a flat tree of conversations with depth levels for nested forks.
+ * Accepts a pre-filtered list so search filtering stays in the component.
+ */
+
+// Pinned conversations first, then by lastModified descending
+const comparePinnedThenRecent = (a: DatabaseConversation, b: DatabaseConversation) => {
+	if (a.pinned && !b.pinned) return -1;
+	if (!a.pinned && b.pinned) return 1;
+	return b.lastModified - a.lastModified;
+};
+
+export function buildConversationTree(convs: DatabaseConversation[]): ConversationTreeItem[] {
+	const childrenByParent = new SvelteMap<string, DatabaseConversation[]>();
+	const forkIds = new SvelteSet<string>();
+
+	for (const conv of convs) {
+		if (conv.forkedFromConversationId) {
+			forkIds.add(conv.id);
+
+			const siblings = childrenByParent.get(conv.forkedFromConversationId) || [];
+
+			siblings.push(conv);
+			childrenByParent.set(conv.forkedFromConversationId, siblings);
+		}
+	}
+
+	const result: ConversationTreeItem[] = [];
+	const visited = new SvelteSet<string>();
+
+	function walk(conv: DatabaseConversation, depth: number) {
+		visited.add(conv.id);
+		result.push({ conversation: conv, depth });
+
+		const children = childrenByParent.get(conv.id);
+		if (children) {
+			children.sort(comparePinnedThenRecent);
+
+			for (const child of children) {
+				walk(child, depth + 1);
+			}
+		}
+	}
+
+	const roots = convs.filter((c) => !forkIds.has(c.id)).sort(comparePinnedThenRecent);
+	for (const root of roots) {
+		walk(root, 0);
+	}
+
+	for (const conv of convs) {
+		if (!visited.has(conv.id)) {
+			walk(conv, 1);
+		}
+	}
+
+	return result;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/stores/device.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/stores/device.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d0f04b437a3f7e7ae3297d5e6cf9542fa5a0ce9d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/stores/device.svelte.ts
@@ -0,0 +1,72 @@
+import { browser } from '$app/environment';
+import { MEDIA_QUERIES } from '$lib/constants';
+
+/**
+ * iOS UA token detection.
+ *
+ * iPadOS 13+ ships a desktop macOS UA, so 'iPad' is no longer present in it;
+ * a Macintosh UA combined with touch support is treated as an iPad instead.
+ * Third-party iOS browsers (Chrome, Firefox, Edge) and in-app WKWebViews all
+ * run on WKWebView and emit their own tokens (CriOS/FxiOS/EdgiOS/GSA) instead
+ * of the trailing 'Safari/' the Safari app keeps.
+ */
+const UA_PATTERNS = {
+	IOS_PHONE: /iPhone|iPod/,
+	MACINTOSH: /Macintosh/,
+	SAFARI: /Safari/,
+	WEBVIEW_IOS: /CriOS|FxiOS|EdgiOS|GSA/
+} as const;
+
+interface DeviceContext {
+	/** Any iOS/iPadOS device, regardless of which app or browser embeds the page. */
+	isIOSDevice: boolean;
+	/** The Safari browser app on iOS, excluding other iOS browsers and WKWebViews. */
+	isIOSSafari: boolean;
+	/** Any WKWebView context on iOS: in-app browsers, embedded web views, and the
+	 *  third-party iOS browsers (all of which share the WKWebView engine). */
+	isWKWebView: boolean;
+	/** PWA standalone mode: the page was launched from the home screen icon. */
+	isStandalone: boolean;
+}
+
+const SERVER_DEFAULT: DeviceContext = {
+	isIOSDevice: false,
+	isIOSSafari: false,
+	isWKWebView: false,
+	isStandalone: false
+};
+
+function detect(): DeviceContext {
+	if (!browser) return SERVER_DEFAULT;
+
+	const ua = navigator.userAgent;
+	const isTouch = navigator.maxTouchPoints > 0;
+
+	const isIOSDevice = UA_PATTERNS.IOS_PHONE.test(ua) || (UA_PATTERNS.MACINTOSH.test(ua) && isTouch);
+
+	// Safari keeps 'Safari/' in the UA; non-Safari iOS browsers emit their own
+	// token instead. WKWebView typically omits 'Safari/' entirely.
+	const hasSafariToken = UA_PATTERNS.SAFARI.test(ua) && !UA_PATTERNS.WEBVIEW_IOS.test(ua);
+	const isIOSSafari = isIOSDevice && hasSafariToken;
+	const isWKWebView = isIOSDevice && !hasSafariToken;
+
+	// navigator.standalone is the legacy iOS-only flag (deprecated but still
+	// present); display-mode: standalone is the modern standard (Safari 16.4+).
+	const isStandalone =
+		window.matchMedia(MEDIA_QUERIES.DISPLAY_MODE_STANDALONE).matches ||
+		(navigator as Navigator & { standalone?: boolean }).standalone === true;
+
+	return { isIOSDevice, isIOSSafari, isWKWebView, isStandalone };
+}
+
+export const device = $state<DeviceContext>(detect());
+
+if (browser) {
+	// isStandalone can change at runtime (e.g. user installs the PWA while the
+	// tab is open); the UA-derived flags are static for the session.
+	const mql = window.matchMedia(MEDIA_QUERIES.DISPLAY_MODE_STANDALONE);
+
+	mql.addEventListener('change', (e) => {
+		device.isStandalone = e.matches;
+	});
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/stores/draft-messages.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/stores/draft-messages.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7ee814d840eab543d3d38101edc29e1072887226
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/stores/draft-messages.svelte.ts
@@ -0,0 +1,31 @@
+import { NEW_CHAT_DRAFT_KEY } from '$lib/constants';
+
+interface DraftMessage {
+	message: string;
+	files: ChatUploadedFile[];
+}
+
+class DraftMessagesStore {
+	private drafts = new Map<string, DraftMessage>();
+
+	getDraftMessage(chatId: string | undefined): DraftMessage {
+		const key = chatId ?? NEW_CHAT_DRAFT_KEY;
+		return this.drafts.get(key) ?? { message: '', files: [] };
+	}
+
+	saveDraftMessage(chatId: string | undefined, message: string, files: ChatUploadedFile[]): void {
+		const key = chatId ?? NEW_CHAT_DRAFT_KEY;
+		if (message || files.length > 0) {
+			this.drafts.set(key, { message, files: [...files] });
+		} else {
+			this.drafts.delete(key);
+		}
+	}
+
+	clearDraftMessage(chatId: string | undefined): void {
+		const key = chatId ?? NEW_CHAT_DRAFT_KEY;
+		this.drafts.delete(key);
+	}
+}
+
+export const draftMessagesStore = new DraftMessagesStore();
diff --git a/backend/llama.cpp/tools/ui/src/lib/stores/mcp-resources.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/stores/mcp-resources.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..18347fb7521a84040c59152b1ea2f8bbc9ca8903
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/stores/mcp-resources.svelte.ts
@@ -0,0 +1,608 @@
+/**
+ * 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_ATTACHMENT_ID_PREFIX,
+	MCP_RESOURCE_CACHE_MAX_ENTRIES,
+	MCP_RESOURCE_CACHE_TTL_MS,
+	NEWLINE_SEPARATOR,
+	RESOURCE_UNKNOWN_TYPE,
+	BINARY_CONTENT_LABEL
+} from '$lib/constants';
+import { normalizeResourceUri } from '$lib/utils';
+import type {
+	MCPResource,
+	MCPResourceTemplate,
+	MCPResourceContent,
+	MCPResourceInfo,
+	MCPResourceTemplateInfo,
+	MCPCachedResource,
+	MCPResourceAttachment,
+	MCPResourceSubscription,
+	MCPServerResources,
+	DatabaseMessageExtraMcpResource
+} 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 {
+		const normalizedUri = normalizeResourceUri(uri);
+
+		return this._attachments.some(
+			(att) => att.resource.uri === uri || normalizeResourceUri(att.resource.uri) === normalizedUri
+		);
+	}
+
+	/**
+	 *
+	 *
+	 * 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 {
+		const normalizedUri = normalizeResourceUri(uri);
+
+		for (const [serverName, serverRes] of this._serverResources) {
+			const resource =
+				serverRes.resources.find((r) => r.uri === uri) ??
+				serverRes.resources.find((r) => normalizeResourceUri(r.uri) === normalizedUri);
+
+			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_LABEL}: ${content.mimeType || RESOURCE_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(): DatabaseMessageExtraMcpResource[] {
+		const extras: 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_LABEL}: ${content.mimeType || RESOURCE_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(NEWLINE_SEPARATOR),
+					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/backend/llama.cpp/tools/ui/src/lib/stores/mcp.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/stores/mcp.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c752e7a3665a3cebb1c97e95cc848b922bfe1da0
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/stores/mcp.svelte.ts
@@ -0,0 +1,1875 @@
+/**
+ * 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
+ * - Automatic tool-to-server routing
+ * - Health checks
+ *
+ * MCP connection state and raw `Tool[]` per server are owned here; the
+ * OpenAI-compatible wire format for those tools is built in `toolsStore`
+ * (see {@link toolsStore.mcpEntries} / {@link toolsStore.getEnabledToolsForLLM}).
+ *
+ * @see MCPService in services/mcp.service.ts for protocol operations
+ */
+
+import { browser } from '$app/environment';
+import { SETTINGS_KEYS } from '$lib/constants';
+import { MCPService } from '$lib/services/mcp.service';
+import { config, settingsStore } from '$lib/stores/settings.svelte';
+import { mcpResourceStore } from '$lib/stores/mcp-resources.svelte';
+import { serverStore } from '$lib/stores/server.svelte';
+import { mode } from 'mode-watcher';
+import {
+	parseMcpServerSettings,
+	detectMcpTransportFromUrl,
+	uuid,
+	extractRootDomain
+} from '$lib/utils';
+import {
+	MCPConnectionPhase,
+	MCPLogLevel,
+	HealthCheckStatus,
+	MCPRefType,
+	ColorMode,
+	UrlProtocol
+} from '$lib/enums';
+import {
+	DEFAULT_CACHE_TTL_MS,
+	DEFAULT_MCP_CONFIG,
+	EXPECTED_THEMED_ICON_PAIR_COUNT,
+	MCP_ALLOWED_ICON_MIME_TYPES,
+	MCP_SERVER_ID_PREFIX,
+	MCP_RECONNECT_BACKOFF_MULTIPLIER,
+	MCP_RECONNECT_INITIAL_DELAY,
+	MCP_RECONNECT_MAX_DELAY,
+	MCP_RECONNECT_ATTEMPT_TIMEOUT_MS
+} from '$lib/constants';
+import type {
+	MCPToolCall,
+	ServerStatus,
+	ToolExecutionResult,
+	MCPClientConfig,
+	MCPConnection,
+	HealthCheckParams,
+	ServerCapabilities,
+	ClientCapabilities,
+	MCPCapabilitiesInfo,
+	MCPConnectionLog,
+	MCPPromptInfo,
+	GetPromptResult,
+	Tool,
+	HealthCheckState,
+	MCPServerSettingsEntry,
+	MCPServerDisplayInfo,
+	MCPServerConfig,
+	MCPResourceIcon,
+	MCPResourceAttachment,
+	MCPResourceContent
+} from '$lib/types';
+import type { ListChangedHandlers } from '@modelcontextprotocol/sdk/types.js';
+import type { DatabaseMessageExtraMcpResource, McpServerOverride } from '$lib/types/database';
+import type { SettingsConfigType } from '$lib/types/settings';
+
+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 isProxyAvailable(): boolean {
+		return serverStore.props?.cors_proxy_enabled ?? false;
+	}
+
+	/**
+	 * Generates a unique server ID from an optional ID string or index.
+	 */
+	#generateServerId(id: unknown, index: number): string {
+		if (typeof id === 'string' && id.trim()) {
+			return id.trim();
+		}
+
+		return `${MCP_SERVER_ID_PREFIX}-${index + 1}`;
+	}
+
+	/**
+	 * Parses raw server settings from config into MCPServerSettingsEntry array.
+	 */
+	#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: this.#generateServerId((entry as { id?: unknown })?.id, index),
+				enabled: Boolean((entry as { enabled?: unknown })?.enabled),
+				url,
+				name: (entry as { name?: string })?.name,
+				requestTimeoutSeconds:
+					(entry as { requestTimeoutSeconds?: number })?.requestTimeoutSeconds ??
+					DEFAULT_MCP_CONFIG.requestTimeoutSeconds,
+				headers: headers || undefined,
+				useProxy: Boolean((entry as { useProxy?: unknown })?.useProxy)
+			} satisfies MCPServerSettingsEntry;
+		});
+	}
+
+	/**
+	 * Builds server configuration from a settings entry.
+	 */
+	#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
+		};
+	}
+
+	/**
+	 * Checks if a server is enabled for a given chat.
+	 * Only per-chat overrides (persisted in localStorage for new chats,
+	 * or in IndexedDB for existing conversations) control enabled state.
+	 */
+	#checkServerEnabled(
+		server: MCPServerSettingsEntry,
+		perChatOverrides?: McpServerOverride[]
+	): boolean {
+		const override = perChatOverrides?.find((o) => o.serverId === server.id);
+		return override?.enabled ?? false;
+	}
+
+	/**
+	 * Builds MCP client configuration from settings.
+	 */
+	#buildMcpClientConfig(
+		cfg: SettingsConfigType,
+		perChatOverrides?: McpServerOverride[]
+	): MCPClientConfig | undefined {
+		const rawServers = this.#parseServerSettings(cfg.mcpServers);
+		if (!rawServers.length) {
+			return undefined;
+		}
+
+		const servers: Record<string, MCPServerConfig> = {};
+
+		for (const [index, entry] of rawServers.entries()) {
+			if (!this.#checkServerEnabled(entry, perChatOverrides)) continue;
+			const normalized = this.#buildServerConfig(entry);
+			if (normalized) servers[this.#generateServerId(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
+		};
+	}
+
+	/**
+	 * Builds capabilities info from server and client capabilities.
+	 */
+	#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
+			}
+		};
+	}
+
+	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 = this.#buildMcpClientConfig(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: HealthCheckStatus.IDLE };
+	}
+
+	hasHealthCheck(serverId: string): boolean {
+		return (
+			serverId in this._healthChecks &&
+			this._healthChecks[serverId].status !== HealthCheckStatus.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: MCPServerDisplayInfo): 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;
+	}
+
+	/**
+	 * Validates that an icon URI uses a safe scheme (https: or data:).
+	 */
+	#isValidIconUri(src: string): boolean {
+		try {
+			if (src.startsWith(UrlProtocol.DATA)) return true;
+
+			const url = new URL(src);
+
+			return url.protocol === UrlProtocol.HTTPS;
+		} catch {
+			return false;
+		}
+	}
+
+	/**
+	 * Selects the best icon URL from an MCP icons array.
+	 * Follows security guidelines from the MCP specification:
+	 * - Only allows https: and data: URIs
+	 * - Filters to supported MIME types
+	 *
+	 * Selection priority:
+	 * 1. Icon matching the current color scheme (dark/light)
+	 * 2. Universal icon (no theme specified); if exactly 2, assumes [0]=light, [1]=dark
+	 * 3. First valid icon as last resort
+	 */
+	#getMcpIconUrl(icons: MCPResourceIcon[] | undefined, isDark = false): string | null {
+		if (!icons?.length) return null;
+
+		const validIcons = icons.filter((icon) => {
+			if (!icon.src || !this.#isValidIconUri(icon.src)) return false;
+			if (icon.mimeType && !MCP_ALLOWED_ICON_MIME_TYPES.has(icon.mimeType)) return false;
+			return true;
+		});
+
+		if (validIcons.length === 0) return null;
+
+		const preferredTheme = isDark ? ColorMode.DARK : ColorMode.LIGHT;
+
+		// 1. Prefer icon explicitly matching the current color scheme
+		const themedIcon = validIcons.find((icon) => icon.theme === preferredTheme);
+		if (themedIcon) return themedIcon.src;
+
+		// 2. Handle universal icons (no theme specified)
+		const universalIcons = validIcons.filter((icon) => !icon.theme);
+
+		if (universalIcons.length === EXPECTED_THEMED_ICON_PAIR_COUNT) {
+			// Heuristic: two theme-less icons → assume [0] = light, [1] = dark
+			return universalIcons[isDark ? 1 : 0].src;
+		}
+
+		if (universalIcons.length > 0) {
+			return universalIcons[0].src;
+		}
+
+		// 3. Last resort: use opposite-theme icon
+		return validIcons[0].src;
+	}
+
+	/**
+	 * Get icon URL for an MCP server by its ID.
+	 * Returns the best icon from the MCP server's `icons` array
+	 * (see MCP spec: spec.modelcontextprotocol.io).
+	 * Returns null if no icon is available.
+	 */
+	getServerFavicon(serverId: string): string | null {
+		const server = this.getServerById(serverId);
+		if (!server) {
+			return null;
+		}
+
+		const isDark = mode.current === ColorMode.DARK;
+		const healthState = this.getHealthCheckState(serverId);
+		if (healthState.status === HealthCheckStatus.SUCCESS && healthState.serverInfo?.icons) {
+			const mcpIconUrl = this.#getMcpIconUrl(healthState.serverInfo.icons, isDark);
+
+			if (mcpIconUrl) {
+				return mcpIconUrl;
+			}
+		}
+
+		return this.#getServerFaviconFallback(server.url);
+	}
+
+	/**
+	 * Construct a fallback favicon URL from the MCP server URL.
+	 * e.g. https://mcp.example.com/sse -> https://example.com/favicon.ico
+	 */
+	#getServerFaviconFallback(serverUrl: string): string | null {
+		try {
+			const url = new URL(serverUrl);
+			const rootDomain = extractRootDomain(url);
+			if (!rootDomain) return null;
+
+			const origin = `${url.protocol}//${rootDomain}`;
+			const candidates = ['favicon.ico', 'favicon.png'];
+
+			for (const path of candidates) {
+				const faviconUrl = `${origin}/${path}`;
+				if (this.#isValidIconUri(faviconUrl)) {
+					return faviconUrl;
+				}
+			}
+		} catch {
+			// Invalid URL, return null
+		}
+
+		return null;
+	}
+
+	addServer(
+		serverData: Omit<MCPServerSettingsEntry, 'id' | 'requestTimeoutSeconds'> & { id?: string }
+	): MCPServerSettingsEntry {
+		const servers = this.getServers();
+		const newServer: MCPServerSettingsEntry = {
+			id: serverData.id || (uuid() ?? `server-${Date.now()}`),
+			enabled: serverData.enabled,
+			url: serverData.url.trim(),
+			name: serverData.name,
+			headers: serverData.headers?.trim() || undefined,
+			requestTimeoutSeconds:
+				Number(config().mcpRequestTimeoutSeconds) || DEFAULT_MCP_CONFIG.requestTimeoutSeconds,
+			useProxy: serverData.useProxy
+		};
+		settingsStore.updateConfig(SETTINGS_KEYS.MCP_SERVERS, JSON.stringify([...servers, newServer]));
+		return newServer;
+	}
+
+	updateServer(id: string, updates: Partial<MCPServerSettingsEntry>): void {
+		const servers = this.getServers();
+		settingsStore.updateConfig(
+			SETTINGS_KEYS.MCP_SERVERS,
+			JSON.stringify(
+				servers.map((server) => (server.id === id ? { ...server, ...updates } : server))
+			)
+		);
+	}
+
+	removeServer(id: string): void {
+		const servers = this.getServers();
+		settingsStore.updateConfig(
+			SETTINGS_KEYS.MCP_SERVERS,
+			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(this.#buildMcpClientConfig(config(), perChatOverrides));
+	}
+
+	getEnabledServersForConversation(
+		perChatOverrides?: McpServerOverride[]
+	): MCPServerSettingsEntry[] {
+		return this.getServers().filter((server) => {
+			return this.#checkServerEnabled(server, perChatOverrides);
+		});
+	}
+
+	/**
+	 * MCP servers selectable in chat-add UIs and the settings page,
+	 * in the order they were added to the config.
+	 */
+	get visibleMcpServers(): MCPServerSettingsEntry[] {
+		return this.getServers().filter((server) => server.enabled);
+	}
+
+	async ensureInitialized(perChatOverrides?: McpServerOverride[]): Promise<boolean> {
+		if (!browser) {
+			return false;
+		}
+
+		const mcpConfig = this.#buildMcpClientConfig(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: []
+		});
+	}
+
+	/**
+	 * Immediately reconnect to a server by creating a fresh transport and session.
+	 * Used when a session-expired error (HTTP 404) is detected during tool execution.
+	 * Per MCP spec 2025-11-25: client MUST discard session ID and re-initialize.
+	 *
+	 * Unlike autoReconnect (which uses exponential backoff for connectivity issues),
+	 * this performs a single immediate reconnection attempt since the server is known
+	 * to be reachable (it responded with 404).
+	 */
+	private async reconnectServer(serverName: string): Promise<void> {
+		const serverConfig = this.serverConfigs.get(serverName);
+		if (!serverConfig) {
+			throw new Error(`[MCPStore] No config found for ${serverName}, cannot reconnect`);
+		}
+
+		// Disconnect stale connection (clears old transport + session ID)
+		const oldConnection = this.connections.get(serverName);
+		if (oldConnection) {
+			await MCPService.disconnect(oldConnection).catch(console.warn);
+			this.connections.delete(serverName);
+		}
+
+		console.log(`[MCPStore][${serverName}] Session expired, reconnecting with fresh session...`);
+
+		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, starting auto-reconnect`);
+					this.autoReconnect(serverName);
+				}
+			},
+			listChangedHandlers
+		);
+
+		// Replace connection and rebuild tool index for this server
+		this.connections.set(serverName, connection);
+		for (const tool of connection.tools) {
+			this.toolsIndex.set(tool.name, serverName);
+		}
+
+		console.log(`[MCPStore][${serverName}] Session recovered successfully`);
+	}
+
+	/**
+	 * Auto-reconnect to a server with exponential backoff.
+	 * Continues indefinitely until successful.
+	 *
+	 * Race-condition safety: when the phase callback fires a DISCONNECTED event
+	 * while we are still inside this function (e.g., the server drops right after
+	 * a successful connect()), a naive inner `autoReconnect()` call would be
+	 * swallowed by the `reconnectingServers` guard, leaving the server
+	 * permanently disconnected once the outer call exits. We solve this by
+	 * deferring the new reconnection via the `needsReconnect` flag: the flag is
+	 * set inside the phase callback and honoured in the `finally` block after
+	 * the guard entry has been removed.
+	 */
+	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;
+		// Flag set by the phase callback when a DISCONNECTED event fires while
+		// reconnectingServers still holds this server (see JSDoc above).
+		let needsReconnect = false;
+
+		try {
+			while (true) {
+				await new Promise((resolve) => setTimeout(resolve, backoff));
+
+				console.log(`[MCPStore][${serverName}] Auto-reconnecting...`);
+
+				try {
+					// Per-attempt timeout: reject if the server doesn't respond in time,
+					// then fall through to backoff logic as with any other failure.
+					const timeoutPromise = new Promise<never>((_, reject) =>
+						setTimeout(
+							() =>
+								reject(
+									new Error(
+										`Reconnect attempt timed out after ${MCP_RECONNECT_ATTEMPT_TIMEOUT_MS}ms`
+									)
+								),
+							MCP_RECONNECT_ATTEMPT_TIMEOUT_MS
+						)
+					);
+
+					needsReconnect = false;
+					const listChangedHandlers = this.createListChangedHandlers(serverName);
+					const connectPromise = MCPService.connect(
+						serverName,
+						serverConfig,
+						DEFAULT_MCP_CONFIG.clientInfo,
+						DEFAULT_MCP_CONFIG.capabilities,
+						(phase) => {
+							if (phase === MCPConnectionPhase.DISCONNECTED) {
+								if (this.reconnectingServers.has(serverName)) {
+									// Reconnect loop is active; defer to after it exits.
+									needsReconnect = true;
+								} else {
+									console.log(
+										`[MCPStore][${serverName}] Connection lost, restarting auto-reconnect`
+									);
+									this.autoReconnect(serverName);
+								}
+							}
+						},
+						listChangedHandlers
+					);
+
+					const connection = await Promise.race([connectPromise, timeoutPromise]);
+
+					// 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);
+			// If the phase callback signalled a disconnect while this function held
+			// the guard, kick off a fresh reconnect now that the guard is released.
+			if (needsReconnect) {
+				console.log(
+					`[MCPStore][${serverName}] Deferred disconnect detected, restarting auto-reconnect`
+				);
+				this.autoReconnect(serverName);
+			}
+		}
+	}
+
+	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);
+
+		try {
+			return await MCPService.callTool(connection, { name: toolName, arguments: args }, signal);
+		} catch (error) {
+			// Session expired (server restarted) - reconnect and retry once
+			if (MCPService.isSessionExpiredError(error)) {
+				await this.reconnectServer(serverName);
+
+				const newConnection = this.connections.get(serverName);
+				if (!newConnection) throw new Error(`Failed to reconnect to "${serverName}"`);
+
+				return MCPService.callTool(newConnection, { name: toolName, arguments: args }, signal);
+			}
+
+			throw error;
+		}
+	}
+
+	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`);
+
+		try {
+			return await MCPService.callTool(connection, { name: toolName, arguments: args }, signal);
+		} catch (error) {
+			if (MCPService.isSessionExpiredError(error)) {
+				await this.reconnectServer(serverName);
+
+				const newConnection = this.connections.get(serverName);
+				if (!newConnection) throw new Error(`Failed to reconnect to "${serverName}"`);
+
+				return MCPService.callTool(newConnection, { name: toolName, arguments: args }, signal);
+			}
+
+			throw error;
+		}
+	}
+
+	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 }
+		);
+	}
+
+	/**
+	 * Get completions for a resource template argument.
+	 * Uses the MCP Completion API with ref/resource.
+	 */
+	async getResourceCompletions(
+		serverName: string,
+		uriTemplate: 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.RESOURCE, uri: uriTemplate },
+			{ name: argumentName, value: argumentValue }
+		);
+	}
+
+	/**
+	 * Read a resource by an arbitrary URI (e.g., one expanded from a template).
+	 * Unlike readResource(), this does not require the URI to be in the resources list.
+	 */
+	async readResourceByUri(serverName: string, uri: string): Promise<MCPResourceContent[] | 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);
+
+			return result.contents;
+		} catch (error) {
+			console.error(`[MCPStore] Failed to read resource ${uri}:`, error);
+
+			return null;
+		}
+	}
+
+	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 = this.#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 = this.#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';
+
+			if (logs.at(-1)?.phase !== MCPConnectionPhase.ERROR) {
+				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 < DEFAULT_CACHE_TTL_MS;
+			});
+
+			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<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<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(): 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 mcpIsProxyAvailable = () => mcpStore.isProxyAvailable;
+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/backend/llama.cpp/tools/ui/src/lib/stores/models.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/stores/models.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4c7c7cdfec243c2a18a281e8c746150bf141a5fe
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/stores/models.svelte.ts
@@ -0,0 +1,1042 @@
+import { base } from '$app/paths';
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { toast } from 'svelte-sonner';
+import { ServerModelStatus, ServerModelsSseEventType, ModelModality } from '$lib/enums';
+import { ModelsService } from '$lib/services/models.service';
+import { PropsService } from '$lib/services/props.service';
+import { serverStore, isRouterMode } from '$lib/stores/server.svelte';
+import {
+	detectThinkingSupport,
+	detectThinkingSupportWithReason
+} from '$lib/utils/chat-template-thinking-detector';
+import { TTLCache, getAuthHeaders } from '$lib/utils';
+import {
+	MODEL_PROPS_CACHE_TTL_MS,
+	MODEL_PROPS_CACHE_MAX_ENTRIES,
+	FAVORITE_MODELS_LOCALSTORAGE_KEY,
+	API_MODELS,
+	SSE_RECORD_SEPARATOR,
+	SSE_LINE_SEPARATOR,
+	SSE_DATA_PREFIX
+} from '$lib/constants';
+
+import { conversationsStore } from '$lib/stores/conversations.svelte';
+
+/**
+ * modelsStore - Reactive store for model management in both MODEL and ROUTER modes.
+ *
+ * **Architecture & Relationships:**
+ * - **ModelsService**: Stateless service for model API communication
+ * - **PropsService**: Stateless service for props/modalities fetching
+ * - **modelsStore** (this class): Reactive store for model state
+ * - **conversationsStore**: Tracks which conversations use which models
+ *
+ * **API Inconsistency Workaround:**
+ * In MODEL mode, `/props` returns modalities for the single model.
+ * In ROUTER mode, `/props` has no modalities — must use `/props?model=<id>` per model.
+ * This store normalizes this behavior so consumers don't need to know the server mode.
+ */
+class ModelsStore {
+	/**
+	 *
+	 *
+	 * State
+	 *
+	 *
+	 */
+
+	models = $state<ModelOption[]>([]);
+	routerModels = $state<ApiModelDataEntry[]>([]);
+	loading = $state(false);
+	updating = $state(false);
+	error = $state<string | null>(null);
+	selectedModelId = $state<string | null>(null);
+	selectedModelName = $state<string | null>(null);
+
+	// Dedup concurrent fetch() callers — all awaiters share the same inflight promise.
+	// Without this, ?model=<name> URL handler races an in-progress fetch and sees an empty list.
+	private inflightFetch: Promise<void> | null = null;
+
+	private modelUsage = $state<Map<string, SvelteSet<string>>>(new Map());
+	private modelLoadingStates = new SvelteMap<string, boolean>();
+
+	// /models/sse feed state, the single source of truth for status and load progress
+	private statusAbort: AbortController | null = null;
+	private statusReaderActive = false;
+	private loadProgress = new SvelteMap<string, ModelLoadProgress>();
+	private statusWaiters = new Map<
+		string,
+		{ target: ServerModelStatus; resolve: () => void; reject: (e: Error) => void }
+	>();
+
+	favoriteModelIds = $state<Set<string>>(this.loadFavoritesFromStorage());
+
+	/**
+	 * Model-specific props cache with TTL.
+	 * Key: modelId, Value: props data including modalities.
+	 * TTL: 10 minutes — props don't change frequently.
+	 */
+	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());
+
+	/**
+	 * Version counter for props cache — used to trigger reactivity when props are updated.
+	 */
+	propsCacheVersion = $state(0);
+
+	/**
+	 *
+	 *
+	 * Computed Getters
+	 *
+	 *
+	 */
+
+	get selectedModel(): ModelOption | null {
+		if (!this.selectedModelId) return null;
+		return this.models.find((m) => m.id === this.selectedModelId) ?? null;
+	}
+
+	get loadedModelIds(): string[] {
+		return this.routerModels
+			.filter(
+				(m) =>
+					m.status.value === ServerModelStatus.LOADED ||
+					m.status.value === ServerModelStatus.SLEEPING
+			)
+			.map((m) => m.id);
+	}
+
+	get loadingModelIds(): string[] {
+		return Array.from(this.modelLoadingStates.entries())
+			.filter(([, loading]) => loading)
+			.map(([id]) => id);
+	}
+
+	/**
+	 * Get model name in MODEL mode (single model).
+	 * Extracts from model_path or model_alias from server props.
+	 * In ROUTER mode, returns null (model is per-conversation).
+	 */
+	get singleModelName(): string | null {
+		if (isRouterMode()) return null;
+
+		const props = serverStore.props;
+		if (props?.model_alias) return props.model_alias;
+		if (!props?.model_path) return null;
+
+		return props.model_path.split(/(\\|\/)/).pop() || null;
+	}
+
+	get selectedModelContextSize(): number | null {
+		if (!this.selectedModelName) return null;
+		return this.getModelContextSize(this.selectedModelName);
+	}
+
+	/**
+	 *
+	 *
+	 * Modalities
+	 *
+	 *
+	 */
+
+	getModelModalities(modelId: string): ModelModalities | null {
+		if (!isRouterMode() && serverStore.props?.modalities) {
+			return this.buildModalities(serverStore.props.modalities);
+		}
+
+		const model = this.models.find((m) => m.model === modelId || m.id === modelId);
+		if (model?.modalities) {
+			return model.modalities;
+		}
+
+		const props = this.modelPropsCache.get(modelId);
+		if (props?.modalities) {
+			return this.buildModalities(props.modalities);
+		}
+
+		return null;
+	}
+
+	modelSupportsVision(modelId: string): boolean {
+		return this.getModelModalities(modelId)?.vision ?? false;
+	}
+
+	modelSupportsAudio(modelId: string): boolean {
+		return this.getModelModalities(modelId)?.audio ?? false;
+	}
+
+	modelSupportsVideo(modelId: string): boolean {
+		return this.getModelModalities(modelId)?.video ?? false;
+	}
+
+	getModelModalitiesArray(modelId: string): ModelModality[] {
+		const modalities = this.getModelModalities(modelId);
+		if (!modalities) return [];
+
+		const result: ModelModality[] = [];
+		if (modalities.vision) result.push(ModelModality.VISION);
+		if (modalities.audio) result.push(ModelModality.AUDIO);
+		if (modalities.video) result.push(ModelModality.VIDEO);
+
+		return result;
+	}
+
+	getModelProps(modelId: string): ApiLlamaCppServerProps | null {
+		return this.modelPropsCache.get(modelId);
+	}
+
+	getModelContextSize(modelId: string): number | null {
+		const props = this.getModelProps(modelId);
+		const nCtx = props?.default_generation_settings?.n_ctx;
+
+		return typeof nCtx === 'number' ? nCtx : null;
+	}
+
+	isModelPropsFetching(modelId: string): boolean {
+		return this.modelPropsFetching.has(modelId);
+	}
+
+	/**
+	 *
+	 *
+	 * Status Queries
+	 *
+	 *
+	 */
+
+	isModelLoaded(modelId: string): boolean {
+		const model = this.routerModels.find((m) => m.id === modelId);
+
+		return (
+			model?.status.value === ServerModelStatus.LOADED ||
+			model?.status.value === ServerModelStatus.SLEEPING
+		);
+	}
+
+	isModelOperationInProgress(modelId: string): boolean {
+		return this.modelLoadingStates.get(modelId) ?? false;
+	}
+
+	getModelStatus(modelId: string): ServerModelStatus | null {
+		const model = this.routerModels.find((m) => m.id === modelId);
+
+		return model?.status.value ?? null;
+	}
+
+	getModelUsage(modelId: string): SvelteSet<string> {
+		return this.modelUsage.get(modelId) ?? new SvelteSet<string>();
+	}
+
+	isModelInUse(modelId: string): boolean {
+		const usage = this.modelUsage.get(modelId);
+
+		return usage !== undefined && usage.size > 0;
+	}
+	//
+	// Thinking Support Detection
+	//
+
+	/**
+	 * Whether the selected model's chat template supports thinking/reasoning.
+	 * Uses heuristic detection on the model's chat_template from /props.
+	 *
+	 * - MODEL mode: uses serverStore.props.chat_template (single loaded model)
+	 * - ROUTER mode: fetches /props?model=<id> for the selected model (cached)
+	 *
+	 * Triggers an async fetch of model props if not yet cached in ROUTER mode.
+	 */
+	get supportsThinking(): boolean {
+		const modelId = this.selectedModelName;
+		if (!modelId) {
+			if (!isRouterMode()) {
+				return detectThinkingSupport(serverStore.props?.chat_template ?? '');
+			}
+			return false;
+		}
+
+		if (isRouterMode() && !this.modelPropsCache.get(modelId)) {
+			this.fetchModelProps(modelId);
+		}
+		const props = this.getModelProps(modelId);
+		return detectThinkingSupport(props?.chat_template ?? '');
+	}
+
+	/**
+	 * Check if a specific model supports thinking.
+	 * Fetches model props if not cached (in router mode).
+	 */
+	checkModelSupportsThinking(modelId: string): boolean {
+		if (!modelId) return false;
+
+		if (isRouterMode() && !this.modelPropsCache.get(modelId)) {
+			this.fetchModelProps(modelId);
+		}
+
+		const props = this.getModelProps(modelId);
+		return detectThinkingSupport(props?.chat_template ?? '');
+	}
+
+	/**
+	 * Detailed thinking support detection result with reason for debugging/UI.
+	 */
+	get thinkingSupportDetails(): { supported: boolean; reason: string } {
+		const modelId = this.selectedModelName;
+		if (!modelId) {
+			if (!isRouterMode()) {
+				return detectThinkingSupportWithReason(serverStore.props?.chat_template ?? '');
+			}
+			return { supported: false, reason: 'No model selected' };
+		}
+		if (isRouterMode() && !this.modelPropsCache.get(modelId)) {
+			this.fetchModelProps(modelId);
+		}
+		const props = this.getModelProps(modelId);
+		return detectThinkingSupportWithReason(props?.chat_template ?? '');
+	}
+
+	/**
+	 *
+	 *
+	 * Data Fetching
+	 *
+	 *
+	 */
+
+	/**
+	 * Fetch list of models from server and detect server role.
+	 * Also fetches modalities for MODEL mode (single model).
+	 */
+	async fetch(force = false): Promise<void> {
+		if (this.inflightFetch) return this.inflightFetch;
+		if (this.models.length > 0 && !force) return;
+
+		this.inflightFetch = this.runFetch();
+		try {
+			await this.inflightFetch;
+		} finally {
+			this.inflightFetch = null;
+		}
+	}
+
+	private async runFetch(): Promise<void> {
+		this.loading = true;
+		this.error = null;
+
+		try {
+			if (!serverStore.props) {
+				await serverStore.fetch();
+			}
+
+			const router = isRouterMode();
+
+			if (router) {
+				const response = await ModelsService.listRouter();
+
+				this.routerModels = response.data;
+				this.models = this.buildModelOptions(response);
+
+				await this.fetchModalitiesForLoadedModels();
+
+				const visible = this.getVisibleModels();
+
+				if (visible.length === 1 && this.isModelLoaded(visible[0].model)) {
+					this.selectModelById(visible[0].id);
+				}
+			} else {
+				this.models = await this.fetchModelModeInternal();
+			}
+		} catch (error) {
+			this.models = [];
+			this.error = error instanceof Error ? error.message : 'Failed to load models';
+
+			throw error;
+		} finally {
+			this.loading = false;
+		}
+	}
+
+	/** Fetch models in MODEL mode (single model, standard OpenAI-compatible). */
+	private async fetchModelModeInternal(): Promise<ModelOption[]> {
+		const response = await ModelsService.list();
+
+		return this.buildModelOptions(response);
+	}
+
+	/**
+	 * Build ModelOption[] from an API response.
+	 * Both MODEL and ROUTER modes share the same mapping logic;
+	 * they differ only in which endpoint is called.
+	 */
+	private buildModelOptions(
+		response: ApiModelListResponse | ApiRouterModelsListResponse
+	): ModelOption[] {
+		return response.data.map((item: ApiModelDataEntry, index: number) => {
+			const details = response.models?.[index];
+			const rawCapabilities = Array.isArray(details?.capabilities) ? details?.capabilities : [];
+			const displayNameSource =
+				details?.name && details.name.trim().length > 0 ? details.name : item.id;
+			const modelId = details?.model || item.id;
+
+			return {
+				id: item.id,
+				name: this.toDisplayName(displayNameSource),
+				model: modelId,
+				description: details?.description,
+				capabilities: rawCapabilities.filter((value: unknown): value is string => Boolean(value)),
+				details: details?.details,
+				meta: item.meta ?? null,
+				parsedId: ModelsService.parseModelId(modelId),
+				aliases: item.aliases ?? [],
+				tags: item.tags ?? []
+			};
+		});
+	}
+
+	/**
+	 * Fetch router models with full metadata (ROUTER mode only).
+	 * No-op in router mode — fetch() already calls listRouter() internally.
+	 * Kept for API compatibility (e.g. handleOpenChange dropdown open handler).
+	 */
+	async fetchRouterModels(): Promise<void> {
+		if (!isRouterMode()) return;
+
+		try {
+			const response = await ModelsService.listRouter();
+			this.routerModels = response.data;
+			await this.fetchModalitiesForLoadedModels();
+
+			const visible = this.getVisibleModels();
+			if (visible.length === 1 && this.isModelLoaded(visible[0].model)) {
+				this.selectModelById(visible[0].id);
+			}
+		} catch (error) {
+			console.warn('Failed to fetch router models:', error);
+			this.routerModels = [];
+		}
+	}
+
+	/**
+	 * Fetch props for a specific model from /props endpoint.
+	 * Uses caching to avoid redundant requests.
+	 *
+	 * In ROUTER mode, this only fetches props if the model is loaded,
+	 * since unloaded models return 400 from /props endpoint.
+	 *
+	 * @param modelId - Model identifier to fetch props for
+	 * @returns Props data or null if fetch failed or model not loaded
+	 */
+	async fetchModelProps(modelId: string): Promise<ApiLlamaCppServerProps | null> {
+		const cached = this.modelPropsCache.get(modelId);
+		if (cached) return cached;
+
+		if (serverStore.isRouterMode && !this.isModelLoaded(modelId)) {
+			return null;
+		}
+
+		if (this.modelPropsFetching.has(modelId)) return null;
+
+		this.modelPropsFetching.add(modelId);
+
+		try {
+			const props = await PropsService.fetchForModel(modelId);
+			this.modelPropsCache.set(modelId, props);
+			this.propsCacheVersion++;
+			return props;
+		} catch (error) {
+			console.warn(`Failed to fetch props for model ${modelId}:`, error);
+			return null;
+		} finally {
+			this.modelPropsFetching.delete(modelId);
+		}
+	}
+
+	/** Fetch modalities for all loaded models from /props endpoint. */
+	async fetchModalitiesForLoadedModels(): Promise<void> {
+		const loadedModelIds = this.loadedModelIds;
+		if (loadedModelIds.length === 0) return;
+
+		const propsPromises = loadedModelIds.map((modelId) => this.fetchModelProps(modelId));
+
+		try {
+			const results = await Promise.all(propsPromises);
+
+			this.models = this.models.map((model) => {
+				const modelIndex = loadedModelIds.indexOf(model.model);
+				if (modelIndex === -1) return model;
+
+				const props = results[modelIndex];
+				if (!props?.modalities) return model;
+
+				return { ...model, modalities: this.buildModalities(props.modalities) };
+			});
+
+			this.propsCacheVersion++;
+		} catch (error) {
+			console.warn('Failed to fetch modalities for loaded models:', error);
+		}
+	}
+
+	/**
+	 * Update modalities for a specific model.
+	 * Called when a model is loaded or when we need fresh modality data.
+	 */
+	async updateModelModalities(modelId: string): Promise<void> {
+		const props = await this.fetchModelProps(modelId);
+		if (!props?.modalities) return;
+
+		this.models = this.models.map((model) =>
+			model.model === modelId
+				? { ...model, modalities: this.buildModalities(props.modalities!) }
+				: model
+		);
+
+		this.propsCacheVersion++;
+	}
+
+	/**
+	 * Filter to models visible in the UI (ui !== false).
+	 */
+	private getVisibleModels(): ModelOption[] {
+		return this.models.filter((option) => this.getModelProps(option.model)?.ui !== false);
+	}
+
+	/**
+	 * Gets the model name from the last assistant message in the active conversation.
+	 * Used by both the chat page and settings page to maintain model consistency.
+	 */
+	getModelFromLastAssistantResponse(): string | null {
+		const messages = conversationsStore.activeMessages;
+		if (!messages || messages.length === 0) return null;
+
+		for (let i = messages.length - 1; i >= 0; i--) {
+			if (messages[i].model) {
+				return messages[i].model;
+			}
+		}
+
+		return null;
+	}
+
+	/**
+	 * Auto-selects the model from the last assistant response if available and loaded.
+	 * Returns true if a model was selected, false otherwise.
+	 */
+	async selectModelFromLastAssistantResponse(): Promise<boolean> {
+		const lastModel = this.getModelFromLastAssistantResponse();
+		if (!lastModel || this.selectedModelName === lastModel) return false;
+
+		const matchingModel = this.models.find((option) => option.model === lastModel);
+		if (!matchingModel || !this.isModelLoaded(lastModel)) return false;
+
+		try {
+			await this.selectModelById(matchingModel.id);
+			console.log(`[modelsStore] Automatically selected model: ${lastModel} from last message`);
+			return true;
+		} catch (error) {
+			console.warn('[modelsStore] Failed to automatically select model from last message:', error);
+			return false;
+		}
+	}
+
+	/**
+	 * Auto-selects the first available model if none is selected.
+	 * Prioritizes:
+	 * 1. Model from active conversation's last assistant response (if loaded)
+	 * 2. Model from active conversation's last assistant response (if not loaded)
+	 * 3. First loaded model (not from active conversation)
+	 * 4. A favorite model
+	 * 5. First available model
+	 */
+	async ensureFirstModelSelected(): Promise<void> {
+		if (this.selectedModelName) return;
+
+		const availableModels = this.getVisibleModels();
+		if (availableModels.length === 0) return;
+
+		// Try to select model from last assistant response first
+		const lastModel = this.getModelFromLastAssistantResponse();
+		if (lastModel) {
+			const lastModelOption = availableModels.find((m) => m.model === lastModel);
+			if (lastModelOption) {
+				await this.selectModelById(lastModelOption.id);
+				if (this.isModelLoaded(lastModel)) {
+					await this.fetchModelProps(lastModel);
+				}
+				return;
+			}
+		}
+
+		// Try a loaded model first
+		const loadedModel = availableModels.find((m) => this.isModelLoaded(m.model));
+		if (loadedModel) {
+			await this.selectModelById(loadedModel.id);
+			await this.fetchModelProps(loadedModel.model);
+			return;
+		}
+
+		// Try loading a favorite model
+		const favorite = this.favoriteModelIds.values().next()?.value;
+		if (favorite) {
+			await this.selectModelById(favorite);
+			return;
+		}
+
+		// Fall back to the first available model
+		await this.selectModelById(availableModels[0].id);
+	}
+
+	/**
+	 *
+	 *
+	 * Model Selection
+	 *
+	 *
+	 */
+
+	async selectModelById(modelId: string): Promise<void> {
+		if (!modelId || this.updating) return;
+		if (this.selectedModelId === modelId) return;
+
+		const option = this.models.find((model) => model.id === modelId);
+		if (!option) throw new Error('Selected model is not available');
+
+		this.updating = true;
+		this.error = null;
+
+		try {
+			this.selectedModelId = option.id;
+			this.selectedModelName = option.model;
+		} finally {
+			this.updating = false;
+		}
+	}
+
+	/**
+	 * Select a model by its model name (used for syncing with conversation model).
+	 */
+	selectModelByName(modelName: string): void {
+		const option = this.models.find((model) => model.model === modelName);
+		if (option) {
+			this.selectedModelId = option.id;
+			this.selectedModelName = option.model;
+		}
+	}
+
+	clearSelection(): void {
+		this.selectedModelId = null;
+		this.selectedModelName = null;
+	}
+
+	findModelByName(modelName: string): ModelOption | null {
+		return (
+			this.models.find(
+				(model) =>
+					model.model === modelName || model.id === modelName || model.aliases?.includes(modelName)
+			) ?? null
+		);
+	}
+
+	findModelById(modelId: string): ModelOption | null {
+		return this.models.find((model) => model.id === modelId) ?? null;
+	}
+
+	hasModel(modelName: string): boolean {
+		return this.models.some((model) => model.model === modelName);
+	}
+
+	/**
+	 *
+	 *
+	 * Loading / Unloading Models
+	 *
+	 *
+	 */
+
+	// reconnect delay after the feed drops or the server is not ready yet
+	private static readonly SSE_RECONNECT_MS = 1000;
+
+	/**
+	 * Open the /models/sse feed and keep it live with auto reconnect.
+	 * Idempotent and router mode only. The feed drives status and progress,
+	 * so it replaces any post-operation polling.
+	 */
+	subscribeStatus(): void {
+		if (this.statusReaderActive) return;
+		if (!isRouterMode()) return;
+
+		this.statusReaderActive = true;
+		this.statusAbort = new AbortController();
+		void this.runStatusReader(this.statusAbort.signal);
+	}
+
+	/**
+	 * Close the /models/sse feed and drop transient progress.
+	 */
+	unsubscribeStatus(): void {
+		this.statusReaderActive = false;
+		this.statusAbort?.abort();
+		this.statusAbort = null;
+		this.loadProgress.clear();
+	}
+
+	/**
+	 * Current load progress for a model, or null when not loading.
+	 */
+	getLoadProgress(modelId: string): ModelLoadProgress | null {
+		return this.loadProgress.get(modelId) ?? null;
+	}
+
+	/**
+	 * Read the feed and reconnect until unsubscribed. Splits the byte stream
+	 * into SSE records on the blank line boundary.
+	 */
+	private async runStatusReader(signal: AbortSignal): Promise<void> {
+		const decoder = new TextDecoder();
+
+		while (!signal.aborted) {
+			try {
+				const response = await fetch(`${base}${API_MODELS.SSE}`, {
+					headers: getAuthHeaders(),
+					signal
+				});
+
+				if (response.ok && response.body) {
+					const reader = response.body.getReader();
+					let buffer = '';
+
+					while (!signal.aborted) {
+						const { value, done } = await reader.read();
+						if (done) break;
+
+						buffer += decoder.decode(value, { stream: true });
+
+						let boundary = buffer.indexOf(SSE_RECORD_SEPARATOR);
+						while (boundary !== -1) {
+							this.handleStatusRecord(buffer.slice(0, boundary));
+							buffer = buffer.slice(boundary + SSE_RECORD_SEPARATOR.length);
+							boundary = buffer.indexOf(SSE_RECORD_SEPARATOR);
+						}
+					}
+				}
+			} catch {
+				// network drop or abort falls through to the reconnect delay
+			}
+
+			if (signal.aborted) return;
+
+			await new Promise((resolve) => setTimeout(resolve, ModelsStore.SSE_RECONNECT_MS));
+		}
+	}
+
+	/**
+	 * Parse one SSE record. The payload rides in the data lines as a JSON
+	 * envelope that carries its own model, event and data fields.
+	 */
+	private handleStatusRecord(record: string): void {
+		const payload = record
+			.split(SSE_LINE_SEPARATOR)
+			.filter((line) => line.startsWith(SSE_DATA_PREFIX))
+			.map((line) => line.slice(SSE_DATA_PREFIX.length).trim())
+			.join(SSE_LINE_SEPARATOR);
+
+		if (payload.length === 0) return;
+
+		let envelope: ApiModelsSseEvent;
+		try {
+			envelope = JSON.parse(payload);
+		} catch {
+			return;
+		}
+
+		this.applyStatusEvent(envelope);
+	}
+
+	/**
+	 * Route one feed record by event kind. Only the status_* events carry a
+	 * status payload, models_reload triggers a list refresh, model_remove drops
+	 * the row, download_* belong to the download surface, not here.
+	 */
+	private applyStatusEvent(event: ApiModelsSseEvent): void {
+		switch (event.event) {
+			case ServerModelsSseEventType.STATUS_CHANGE:
+			case ServerModelsSseEventType.MODEL_STATUS:
+			case ServerModelsSseEventType.STATUS_UPDATE:
+				this.applyModelStatus(event);
+				break;
+			case ServerModelsSseEventType.MODELS_RELOAD:
+				void this.fetchRouterModels();
+				break;
+			case ServerModelsSseEventType.MODEL_REMOVE:
+				this.removeRouterModel(event.model);
+				break;
+			case ServerModelsSseEventType.DOWNLOAD_PROGRESS:
+				break;
+		}
+	}
+
+	/**
+	 * Apply a status envelope: update the model row, track or clear progress,
+	 * settle any pending load or unload awaiter.
+	 */
+	private applyModelStatus(event: ApiModelsSseEvent): void {
+		const model = event.model;
+		const data = event.data;
+		if (!model || !data?.status) return;
+
+		const status = data.status;
+
+		this.setRouterModelStatus(model, status);
+
+		if (status === ServerModelStatus.LOADING) {
+			if (data.progress) this.loadProgress.set(model, data.progress);
+		} else {
+			this.loadProgress.delete(model);
+		}
+
+		if (status === ServerModelStatus.LOADED) {
+			void this.updateModelModalities(model);
+		}
+
+		const failed =
+			status === ServerModelStatus.FAILED ||
+			(status === ServerModelStatus.UNLOADED && (data.exit_code ?? 0) !== 0);
+
+		if (failed) {
+			this.rejectStatus(model, new Error(`Model failed: ${this.toDisplayName(model)}`));
+			return;
+		}
+
+		this.settleStatus(model, status);
+	}
+
+	/**
+	 * Drop a model row reported gone by the feed and settle its awaiters.
+	 */
+	private removeRouterModel(modelId: string): void {
+		if (this.routerModels.findIndex((m) => m.id === modelId) === -1) return;
+
+		this.routerModels = this.routerModels.filter((m) => m.id !== modelId);
+		this.loadProgress.delete(modelId);
+		this.rejectStatus(modelId, new Error(`Model removed: ${this.toDisplayName(modelId)}`));
+	}
+
+	/**
+	 * Update one model row status in place, reassigning to trigger reactivity.
+	 */
+	private setRouterModelStatus(modelId: string, status: ServerModelStatus): void {
+		const idx = this.routerModels.findIndex((m) => m.id === modelId);
+		if (idx === -1) return;
+
+		const current = this.routerModels[idx];
+		if (current.status.value === status) return;
+
+		const next = [...this.routerModels];
+		next[idx] = { ...current, status: { ...current.status, value: status } };
+		this.routerModels = next;
+	}
+
+	/**
+	 * Register an awaiter that resolves when the feed reports target status.
+	 * One operation runs per model at a time, so one awaiter per model is kept.
+	 */
+	private waitForStatus(modelId: string, target: ServerModelStatus): Promise<void> {
+		return new Promise((resolve, reject) => {
+			this.statusWaiters.set(modelId, { target, resolve, reject });
+		});
+	}
+
+	/**
+	 * Resolve and drop the awaiter when the model reaches its target status.
+	 */
+	private settleStatus(modelId: string, status: ServerModelStatus): void {
+		const waiter = this.statusWaiters.get(modelId);
+		if (waiter && waiter.target === status) {
+			this.statusWaiters.delete(modelId);
+			waiter.resolve();
+		}
+	}
+
+	/**
+	 * Reject and drop the awaiter for a model.
+	 */
+	private rejectStatus(modelId: string, error: Error): void {
+		const waiter = this.statusWaiters.get(modelId);
+		if (waiter) {
+			this.statusWaiters.delete(modelId);
+			waiter.reject(error);
+		}
+	}
+
+	async loadModel(modelId: string): Promise<void> {
+		if (this.isModelLoaded(modelId)) return;
+		if (this.modelLoadingStates.get(modelId)) return;
+
+		this.modelLoadingStates.set(modelId, true);
+		this.error = null;
+
+		// the feed drives completion, so it must be live before the request
+		this.subscribeStatus();
+
+		const reachedLoaded = this.waitForStatus(modelId, ServerModelStatus.LOADED);
+		reachedLoaded.catch(() => {});
+
+		try {
+			await ModelsService.load(modelId);
+			await reachedLoaded;
+			toast.success(`Model loaded: ${this.toDisplayName(modelId)}`);
+		} catch (error) {
+			this.rejectStatus(modelId, error instanceof Error ? error : new Error('load failed'));
+			this.error = error instanceof Error ? error.message : 'Failed to load model';
+			toast.error(`Failed to load model: ${this.toDisplayName(modelId)}`);
+			throw error;
+		} finally {
+			this.modelLoadingStates.set(modelId, false);
+		}
+	}
+
+	async unloadModel(modelId: string): Promise<void> {
+		if (!this.isModelLoaded(modelId)) return;
+		if (this.modelLoadingStates.get(modelId)) return;
+
+		this.modelLoadingStates.set(modelId, true);
+		this.error = null;
+
+		this.subscribeStatus();
+
+		const reachedUnloaded = this.waitForStatus(modelId, ServerModelStatus.UNLOADED);
+		reachedUnloaded.catch(() => {});
+
+		try {
+			await ModelsService.unload(modelId);
+			await reachedUnloaded;
+			toast.info(`Model unloaded: ${this.toDisplayName(modelId)}`);
+		} catch (error) {
+			this.rejectStatus(modelId, error instanceof Error ? error : new Error('unload failed'));
+			this.error = error instanceof Error ? error.message : 'Failed to unload model';
+			toast.error(`Failed to unload model: ${this.toDisplayName(modelId)}`);
+			throw error;
+		} finally {
+			this.modelLoadingStates.set(modelId, false);
+		}
+	}
+
+	async ensureModelLoaded(modelId: string): Promise<void> {
+		if (this.isModelLoaded(modelId)) return;
+		await this.loadModel(modelId);
+	}
+
+	/**
+	 *
+	 *
+	 * Favorites
+	 *
+	 *
+	 */
+
+	isFavorite(modelId: string): boolean {
+		return this.favoriteModelIds.has(modelId);
+	}
+
+	toggleFavorite(modelId: string): void {
+		const next = new SvelteSet(this.favoriteModelIds);
+
+		if (next.has(modelId)) {
+			next.delete(modelId);
+		} else {
+			next.add(modelId);
+		}
+
+		this.favoriteModelIds = next;
+
+		try {
+			localStorage.setItem(FAVORITE_MODELS_LOCALSTORAGE_KEY, JSON.stringify([...next]));
+		} catch {
+			toast.error('Failed to save favorite models to local storage');
+		}
+	}
+
+	private loadFavoritesFromStorage(): Set<string> {
+		try {
+			const raw = localStorage.getItem(FAVORITE_MODELS_LOCALSTORAGE_KEY);
+			return raw ? new Set(JSON.parse(raw) as string[]) : new Set();
+		} catch {
+			toast.error('Failed to load favorite models from local storage');
+			return new Set();
+		}
+	}
+
+	/**
+	 *
+	 *
+	 * Utilities
+	 *
+	 *
+	 */
+
+	private toDisplayName(id: string): string {
+		const segments = id.split(/\\|\//);
+		const candidate = segments.pop();
+		return candidate && candidate.trim().length > 0 ? candidate : id;
+	}
+
+	private buildModalities(
+		modalities: NonNullable<ApiLlamaCppServerProps['modalities']>
+	): ModelModalities {
+		return {
+			vision: modalities.vision ?? false,
+			audio: modalities.audio ?? false,
+			video: modalities.video ?? false
+		};
+	}
+
+	clear(): void {
+		this.unsubscribeStatus();
+		this.statusWaiters.forEach((waiter) => waiter.reject(new Error('Models store cleared')));
+		this.statusWaiters.clear();
+		this.models = [];
+		this.routerModels = [];
+		this.loading = false;
+		this.updating = false;
+		this.error = null;
+		this.selectedModelId = null;
+		this.selectedModelName = null;
+		this.modelUsage.clear();
+		this.modelLoadingStates.clear();
+		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();
+
+export const modelOptions = () => modelsStore.models;
+export const routerModels = () => modelsStore.routerModels;
+export const modelsLoading = () => modelsStore.loading;
+export const modelsUpdating = () => modelsStore.updating;
+export const modelsError = () => modelsStore.error;
+export const selectedModelId = () => modelsStore.selectedModelId;
+export const selectedModelName = () => modelsStore.selectedModelName;
+export const selectedModelOption = () => modelsStore.selectedModel;
+export const loadedModelIds = () => modelsStore.loadedModelIds;
+export const loadingModelIds = () => modelsStore.loadingModelIds;
+export const propsCacheVersion = () => modelsStore.propsCacheVersion;
+export const singleModelName = () => modelsStore.singleModelName;
+export const selectedModelContextSize = () => modelsStore.selectedModelContextSize;
+export const favoriteModelIds = () => modelsStore.favoriteModelIds;
+export const supportsThinking = () => modelsStore.supportsThinking;
+export const checkModelSupportsThinking = (modelId: string) =>
+	modelsStore.checkModelSupportsThinking(modelId);
+export const thinkingSupportDetails = () => modelsStore.thinkingSupportDetails;
diff --git a/backend/llama.cpp/tools/ui/src/lib/stores/permissions.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/stores/permissions.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c50fbe02db8933bc1c46e1eef77eb97a9030fae3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/stores/permissions.svelte.ts
@@ -0,0 +1,59 @@
+import { ALWAYS_ALLOWED_TOOLS_LOCALSTORAGE_KEY } from '$lib/constants';
+
+import { SvelteSet } from 'svelte/reactivity';
+
+class PermissionsStore {
+	private _tools = $state(new SvelteSet<string>());
+
+	constructor() {
+		try {
+			const stored = localStorage.getItem(ALWAYS_ALLOWED_TOOLS_LOCALSTORAGE_KEY);
+			if (stored) {
+				for (const name of JSON.parse(stored) as string[]) {
+					if (typeof name === 'string') this._tools.add(name);
+				}
+			}
+		} catch (err) {
+			console.error(
+				`Failed to load permissions from localStorage ("${ALWAYS_ALLOWED_TOOLS_LOCALSTORAGE_KEY}"):`,
+				err
+			);
+		}
+	}
+
+	get tools(): ReadonlySet<string> {
+		return this._tools;
+	}
+
+	hasTool(key: string): boolean {
+		return this._tools.has(key);
+	}
+
+	allowTool(key: string): void {
+		this._tools.add(key);
+		this._persist();
+	}
+
+	allowTools(keys: string[]): void {
+		for (const key of keys) this._tools.add(key);
+		this._persist();
+	}
+
+	revokeTool(key: string): void {
+		this._tools.delete(key);
+		this._persist();
+	}
+
+	private _persist(): void {
+		try {
+			localStorage.setItem(ALWAYS_ALLOWED_TOOLS_LOCALSTORAGE_KEY, JSON.stringify([...this._tools]));
+		} catch (err) {
+			console.error(
+				`Failed to persist to localStorage ("${ALWAYS_ALLOWED_TOOLS_LOCALSTORAGE_KEY}"):`,
+				err
+			);
+		}
+	}
+}
+
+export const permissionsStore = new PermissionsStore();
diff --git a/backend/llama.cpp/tools/ui/src/lib/stores/persisted.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/stores/persisted.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1e07f80ed7275269237ddf91097ff51b0cbb8b28
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/stores/persisted.svelte.ts
@@ -0,0 +1,50 @@
+import { browser } from '$app/environment';
+
+type PersistedValue<T> = {
+	get value(): T;
+	set value(newValue: T);
+};
+
+export function persisted<T>(key: string, initialValue: T): PersistedValue<T> {
+	let value = initialValue;
+
+	if (browser) {
+		try {
+			const stored = localStorage.getItem(key);
+
+			if (stored !== null) {
+				value = JSON.parse(stored) as T;
+			}
+		} catch (error) {
+			console.warn(`Failed to load ${key}:`, error);
+		}
+	}
+
+	const persist = (next: T) => {
+		if (!browser) {
+			return;
+		}
+
+		try {
+			if (next === null || next === undefined) {
+				localStorage.removeItem(key);
+				return;
+			}
+
+			localStorage.setItem(key, JSON.stringify(next));
+		} catch (error) {
+			console.warn(`Failed to persist ${key}:`, error);
+		}
+	};
+
+	return {
+		get value() {
+			return value;
+		},
+
+		set value(newValue: T) {
+			value = newValue;
+			persist(newValue);
+		}
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/stores/server.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/stores/server.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..66ab411194577b3925a63de67351ea5c9137e2a0
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/stores/server.svelte.ts
@@ -0,0 +1,175 @@
+import { PropsService } from '$lib/services/props.service';
+import { ServerRole } from '$lib/enums';
+import { ApiError } from '$lib/utils/api-fetch';
+
+const LOADING_RETRY_INTERVAL_MS = 1000;
+
+/**
+ * serverStore - Server connection state, configuration, and role detection
+ *
+ * This store manages the server connection state and properties fetched from `/props`.
+ * It provides reactive state for server configuration and role detection.
+ *
+ * **Architecture & Relationships:**
+ * - **PropsService**: Stateless service for fetching `/props` data
+ * - **serverStore** (this class): Reactive store for server state
+ * - **modelsStore**: Independent store for model management (uses PropsService directly)
+ *
+ * **Key Features:**
+ * - **Server State**: Connection status, loading, error handling
+ * - **Role Detection**: MODEL (single model) vs ROUTER (multi-model)
+ * - **Default Params**: Server-wide generation defaults
+ */
+class ServerStore {
+	/**
+	 *
+	 *
+	 * State
+	 *
+	 *
+	 */
+
+	props = $state<ApiLlamaCppServerProps | null>(null);
+	loading = $state(false);
+	error = $state<string | null>(null);
+	status = $state<number | null>(null);
+	role = $state<ServerRole | null>(null);
+	private fetchPromise: Promise<void> | null = null;
+	private retryTimer: ReturnType<typeof setTimeout> | null = null;
+
+	/**
+	 *
+	 *
+	 * Getters
+	 *
+	 *
+	 */
+
+	get defaultParams(): ApiLlamaCppServerProps['default_generation_settings']['params'] | null {
+		return this.props?.default_generation_settings?.params || null;
+	}
+
+	get contextSize(): number | null {
+		const nCtx = this.props?.default_generation_settings?.n_ctx;
+
+		return typeof nCtx === 'number' ? nCtx : null;
+	}
+
+	get uiSettings(): Record<string, string | number | boolean> | undefined {
+		return this.props?.ui_settings ?? this.props?.webui_settings;
+	}
+
+	get isRouterMode(): boolean {
+		return this.role === ServerRole.ROUTER;
+	}
+
+	get isModelMode(): boolean {
+		return this.role === ServerRole.MODEL;
+	}
+
+	/**
+	 *
+	 *
+	 * Data Handling
+	 *
+	 *
+	 */
+
+	/**
+	 * @param background - Set by the automatic "still loading" poll. Skips the
+	 * `loading` flag flip so the UI doesn't bounce between the full loading
+	 * splash and the chat screen every retry tick.
+	 */
+	async fetch({ background = false }: { background?: boolean } = {}): Promise<void> {
+		if (this.fetchPromise) return this.fetchPromise;
+
+		this.clearRetryTimer();
+		if (!background) {
+			this.loading = true;
+		}
+		// Don't clear an existing "still loading" error before a retry -
+		// doing so would unmount/remount the error banner every second.
+		if (this.status !== 503) {
+			this.error = null;
+		}
+
+		const fetchPromise = (async () => {
+			try {
+				const props = await PropsService.fetch();
+				this.props = props;
+				this.error = null;
+				this.status = null;
+				this.detectRole(props);
+			} catch (error: unknown) {
+				this.error = error instanceof Error ? error.message : String(error);
+				this.status = error instanceof ApiError ? error.status : null;
+				console.error('Error fetching server properties:', error);
+
+				if (this.status === 503) {
+					this.scheduleRetry();
+				}
+			} finally {
+				if (!background) {
+					this.loading = false;
+				}
+				this.fetchPromise = null;
+			}
+		})();
+
+		this.fetchPromise = fetchPromise;
+		await fetchPromise;
+	}
+
+	clear(): void {
+		this.clearRetryTimer();
+		this.props = null;
+		this.error = null;
+		this.status = null;
+		this.loading = false;
+		this.role = null;
+		this.fetchPromise = null;
+	}
+
+	private scheduleRetry(): void {
+		if (this.retryTimer) return;
+		this.retryTimer = setTimeout(() => {
+			this.retryTimer = null;
+			this.fetch({ background: true });
+		}, LOADING_RETRY_INTERVAL_MS);
+	}
+
+	private clearRetryTimer(): void {
+		if (this.retryTimer) {
+			clearTimeout(this.retryTimer);
+			this.retryTimer = null;
+		}
+	}
+
+	/**
+	 *
+	 *
+	 * Utilities
+	 *
+	 *
+	 */
+
+	private detectRole(props: ApiLlamaCppServerProps): void {
+		const newRole = props?.role === ServerRole.ROUTER ? ServerRole.ROUTER : ServerRole.MODEL;
+		if (this.role !== newRole) {
+			this.role = newRole;
+			console.info(`Server running in ${newRole === ServerRole.ROUTER ? 'ROUTER' : 'MODEL'} mode`);
+		}
+	}
+}
+
+export const serverStore = new ServerStore();
+
+export const serverProps = () => serverStore.props;
+export const serverLoading = () => serverStore.loading;
+export const serverError = () => serverStore.error;
+export const serverStatus = () => serverStore.status;
+export const serverRole = () => serverStore.role;
+export const defaultParams = () => serverStore.defaultParams;
+export const contextSize = () => serverStore.contextSize;
+export const isRouterMode = () => serverStore.isRouterMode;
+export const isModelMode = () => serverStore.isModelMode;
diff --git a/backend/llama.cpp/tools/ui/src/lib/stores/settings-referrer.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/stores/settings-referrer.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..297a0d6a45534238f2f625fb51d9c1dc91b18aad
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/stores/settings-referrer.svelte.ts
@@ -0,0 +1,12 @@
+import { SETTINGS_FALLBACK_EXIT_ROUTE } from '$lib/constants';
+
+let _url = $state<string>(SETTINGS_FALLBACK_EXIT_ROUTE);
+
+export const settingsReferrer = {
+	get url() {
+		return _url;
+	},
+	set url(value: string) {
+		_url = value;
+	}
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/stores/settings.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/stores/settings.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8d3c711b82e2805af473efcb22dccfe3da3216c7
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/stores/settings.svelte.ts
@@ -0,0 +1,546 @@
+/**
+ * settingsStore - Application configuration and theme management
+ *
+ * This store manages all application settings including AI model parameters, UI preferences,
+ * and theme configuration. It provides persistent storage through localStorage with reactive
+ * state management using Svelte 5 runes.
+ *
+ * **Architecture & Relationships:**
+ * - **settingsStore** (this class): Configuration state management
+ *   - Manages AI model parameters (temperature, max tokens, etc.)
+ *   - Handles theme switching and persistence
+ *   - Provides localStorage synchronization
+ *   - Offers reactive configuration access
+ *
+ * - **ChatService**: Reads model parameters for API requests
+ * - **UI Components**: Subscribe to theme and configuration changes
+ *
+ * **Key Features:**
+ * - **Model Parameters**: Temperature, max tokens, top-p, top-k, repeat penalty
+ * - **Theme Management**: Auto, light, dark theme switching
+ * - **Persistence**: Automatic localStorage synchronization
+ * - **Reactive State**: Svelte 5 runes for automatic UI updates
+ * - **Default Handling**: Graceful fallback to defaults for missing settings
+ * - **Batch Updates**: Efficient multi-setting updates
+ * - **Reset Functionality**: Restore defaults for individual or all settings
+ *
+ * **Configuration Categories:**
+ * - Generation parameters (temperature, tokens, sampling)
+ * - UI preferences (theme, display options)
+ * - System settings (model selection, prompts)
+ * - Advanced options (seed, penalties, context handling)
+ */
+
+import { browser } from '$app/environment';
+import { ColorMode } from '$lib/enums';
+import type { SettingsExportType } from '$lib/types';
+import { setMode } from 'mode-watcher';
+import {
+	CONFIG_LOCALSTORAGE_KEY,
+	SETTING_CONFIG_DEFAULT,
+	SETTINGS_KEYS,
+	USER_OVERRIDES_LOCALSTORAGE_KEY
+} from '$lib/constants';
+import { isMobile } from '$lib/stores/viewport.svelte';
+import { ParameterSyncService } from '$lib/services/parameter-sync.service';
+import { serverStore } from '$lib/stores/server.svelte';
+import {
+	configToParameterRecord,
+	normalizeFloatingPoint,
+	getConfigValue,
+	setConfigValue
+} from '$lib/utils';
+
+class SettingsStore {
+	/**
+	 *
+	 *
+	 * State
+	 *
+	 *
+	 */
+
+	config = $state<SettingsConfigType>({ ...SETTING_CONFIG_DEFAULT });
+	isInitialized = $state(false);
+	userOverrides = $state<Set<string>>(new Set());
+
+	/**
+	 *
+	 *
+	 * Utilities (private helpers)
+	 *
+	 *
+	 */
+
+	/**
+	 * Helper method to get server defaults with null safety
+	 * Centralizes the pattern of getting and extracting server defaults
+	 */
+	private getServerDefaults(): Record<string, string | number | boolean> {
+		const serverParams = serverStore.defaultParams;
+		const uiSettings = serverStore.uiSettings;
+
+		return ParameterSyncService.extractServerDefaults(serverParams, uiSettings);
+	}
+
+	constructor() {
+		if (browser) {
+			this.initialize();
+		}
+	}
+
+	/**
+	 *
+	 *
+	 * Lifecycle
+	 *
+	 *
+	 */
+
+	/**
+	 * Initialize the settings store by loading from localStorage
+	 */
+	initialize() {
+		try {
+			this.loadConfig();
+			this.migrateLegacyTheme();
+			// Apply the persisted theme from config on initial load
+			setMode(this.config[SETTINGS_KEYS.THEME] as ColorMode);
+			this.isInitialized = true;
+		} catch (error) {
+			console.error('Failed to initialize settings store:', error);
+		}
+	}
+
+	/**
+	 * Load configuration from localStorage
+	 * Returns default values for missing keys to prevent breaking changes
+	 */
+	private loadConfig() {
+		if (!browser) return;
+
+		try {
+			const storedConfigRaw = localStorage.getItem(CONFIG_LOCALSTORAGE_KEY);
+			const savedVal = JSON.parse(storedConfigRaw || '{}');
+
+			// Merge with defaults to prevent breaking changes
+			this.config = {
+				...SETTING_CONFIG_DEFAULT,
+				...savedVal
+			};
+
+			// Default sendOnEnter to false on mobile when the user has no saved preference
+			if (!(SETTINGS_KEYS.SEND_ON_ENTER in savedVal)) {
+				if (isMobile.current) {
+					this.config[SETTINGS_KEYS.SEND_ON_ENTER] = false;
+				}
+			}
+
+			// Load user overrides
+			const savedOverrides = JSON.parse(
+				localStorage.getItem(USER_OVERRIDES_LOCALSTORAGE_KEY) || '[]'
+			);
+			this.userOverrides = new Set(savedOverrides);
+		} catch (error) {
+			console.warn('Failed to parse config from localStorage, using defaults:', error);
+			this.config = { ...SETTING_CONFIG_DEFAULT };
+			this.userOverrides = new Set();
+		}
+	}
+
+	/**
+	 * Migrate the legacy un-namespaced "theme" localStorage key into config.
+	 * Previously theme was stored separately in localStorage("theme") — now it lives
+	 * inside the config object alongside all other settings.
+	 * After migration the legacy key is removed.
+	 */
+	private migrateLegacyTheme() {
+		if (!browser) return;
+
+		const legacyTheme = localStorage.getItem('theme');
+		if (legacyTheme) {
+			this.config[SETTINGS_KEYS.THEME] = legacyTheme;
+			localStorage.removeItem('theme');
+			this.saveConfig();
+			setMode(legacyTheme as ColorMode);
+		}
+	}
+	/**
+	 *
+	 *
+	 * Config Updates
+	 *
+	 *
+	 */
+
+	/**
+	 * Update a specific configuration setting
+	 * @param key - The configuration key to update
+	 * @param value - The new value for the configuration key
+	 */
+	updateConfig<K extends keyof SettingsConfigType>(key: K, value: SettingsConfigType[K]): void {
+		this.config[key] = value;
+
+		if (ParameterSyncService.canSyncParameter(key as string)) {
+			const propsDefaults = this.getServerDefaults();
+			const propsDefault = propsDefaults[key as string];
+
+			if (propsDefault !== undefined) {
+				const normalizedValue = normalizeFloatingPoint(value);
+				const normalizedDefault = normalizeFloatingPoint(propsDefault);
+
+				if (normalizedValue === normalizedDefault) {
+					this.userOverrides.delete(key as string);
+				} else {
+					this.userOverrides.add(key as string);
+				}
+			}
+		}
+
+		this.saveConfig();
+	}
+
+	/**
+	 * Update multiple configuration settings at once
+	 * @param updates - Object containing the configuration updates
+	 */
+	updateMultipleConfig(updates: Partial<SettingsConfigType>) {
+		Object.assign(this.config, updates);
+
+		const propsDefaults = this.getServerDefaults();
+
+		for (const [key, value] of Object.entries(updates)) {
+			if (ParameterSyncService.canSyncParameter(key)) {
+				const propsDefault = propsDefaults[key];
+
+				if (propsDefault !== undefined) {
+					const normalizedValue = normalizeFloatingPoint(value);
+					const normalizedDefault = normalizeFloatingPoint(propsDefault);
+
+					if (normalizedValue === normalizedDefault) {
+						this.userOverrides.delete(key);
+					} else {
+						this.userOverrides.add(key);
+					}
+				}
+			}
+		}
+
+		this.saveConfig();
+	}
+
+	/**
+	 * Save the current configuration to localStorage
+	 */
+	private saveConfig() {
+		if (!browser) return;
+
+		try {
+			localStorage.setItem(CONFIG_LOCALSTORAGE_KEY, JSON.stringify(this.config));
+
+			localStorage.setItem(
+				USER_OVERRIDES_LOCALSTORAGE_KEY,
+				JSON.stringify(Array.from(this.userOverrides))
+			);
+		} catch (error) {
+			console.error('Failed to save config to localStorage:', error);
+		}
+	}
+
+	/**
+	 * Update the theme setting.
+	 * @param newTheme - The new theme value
+	 */
+	updateTheme(newTheme: string) {
+		this.updateConfig(SETTINGS_KEYS.THEME, newTheme);
+
+		setMode(newTheme as ColorMode);
+	}
+
+	/**
+	 *
+	 *
+	 * Reset
+	 *
+	 *
+	 */
+
+	/**
+	 * Reset configuration to defaults
+	 */
+	resetConfig() {
+		this.config = { ...SETTING_CONFIG_DEFAULT };
+
+		this.saveConfig();
+	}
+
+	/**
+	 * Reset theme to default value.
+	 * Theme is now stored inside the config object.
+	 */
+	resetTheme() {
+		this.updateConfig(SETTINGS_KEYS.THEME, SETTING_CONFIG_DEFAULT[SETTINGS_KEYS.THEME]);
+
+		setMode(SETTING_CONFIG_DEFAULT[SETTINGS_KEYS.THEME] as ColorMode);
+	}
+
+	/**
+	 * Reset all settings to defaults.
+	 */
+	resetAll() {
+		this.resetConfig();
+
+		this.resetTheme();
+	}
+
+	/**
+	 * Reset a parameter to Server default (or UI default if no Server default)
+	 */
+	resetParameterToServerDefault(key: string): void {
+		const serverDefaults = this.getServerDefaults();
+		const uiSettings = serverStore.uiSettings;
+
+		if (uiSettings && key in uiSettings) {
+			// UI setting from admin config: write actual value
+			setConfigValue(this.config, key, uiSettings[key]);
+		} else if (serverDefaults[key] !== undefined) {
+			// sampling param known by server: clear it, let server decide
+			setConfigValue(this.config, key, '');
+		} else if (key in SETTING_CONFIG_DEFAULT) {
+			setConfigValue(this.config, key, getConfigValue(SETTING_CONFIG_DEFAULT, key));
+		}
+
+		this.userOverrides.delete(key);
+		this.saveConfig();
+	}
+
+	/**
+	 *
+	 *
+	 * Server Sync
+	 *
+	 *
+	 */
+
+	/**
+	 * Initialize settings with props defaults when server properties are first loaded
+	 * This sets up the default values from /props endpoint
+	 */
+	syncWithServerDefaults(): void {
+		const propsDefaults = this.getServerDefaults();
+		if (Object.keys(propsDefaults).length === 0) return;
+
+		const uiSettings = serverStore.uiSettings;
+		const uiSettingsKeys = new Set(uiSettings ? Object.keys(uiSettings) : []);
+
+		for (const [key, propsValue] of Object.entries(propsDefaults)) {
+			const currentValue = getConfigValue(this.config, key);
+
+			const normalizedCurrent = normalizeFloatingPoint(currentValue);
+			const normalizedDefault = normalizeFloatingPoint(propsValue);
+
+			// if user value matches server, it's not a real override
+			if (normalizedCurrent === normalizedDefault) {
+				this.userOverrides.delete(key);
+
+				if (!uiSettingsKeys.has(key) && getConfigValue(SETTING_CONFIG_DEFAULT, key) === undefined) {
+					setConfigValue(this.config, key, undefined);
+				}
+			}
+		}
+
+		// UI settings need actual values in config (no placeholder mechanism),
+		// so write them for non-overridden keys
+		if (uiSettings) {
+			for (const [key, value] of Object.entries(uiSettings)) {
+				if (!this.userOverrides.has(key) && value !== undefined) {
+					setConfigValue(this.config, key, value);
+
+					// theme lives in mode-watcher, not just in config -> propagate
+					if (key === SETTINGS_KEYS.THEME) {
+						setMode(value as ColorMode);
+					}
+				}
+			}
+		}
+
+		this.saveConfig();
+		console.log('User overrides after sync:', Array.from(this.userOverrides));
+	}
+
+	/**
+	 * Reset all parameters to their default values (from props)
+	 * This is used by the "Reset to Default" functionality
+	 * Prioritizes Server defaults from /props, falls back to UI defaults
+	 */
+	forceSyncWithServerDefaults(): void {
+		const propsDefaults = this.getServerDefaults();
+		const uiSettings = serverStore.uiSettings;
+
+		for (const key of ParameterSyncService.getSyncableParameterKeys()) {
+			if (uiSettings && key in uiSettings) {
+				// UI setting from admin config: write actual value
+				setConfigValue(this.config, key, uiSettings[key]);
+			} else if (propsDefaults[key] !== undefined) {
+				// sampling param: clear it, let server decide
+				setConfigValue(this.config, key, '');
+			} else if (key in SETTING_CONFIG_DEFAULT) {
+				setConfigValue(this.config, key, getConfigValue(SETTING_CONFIG_DEFAULT, key));
+			}
+
+			this.userOverrides.delete(key);
+		}
+
+		this.saveConfig();
+	}
+
+	/**
+	 *
+	 *
+	 * Utilities
+	 *
+	 *
+	 */
+
+	/**
+	 * Get a specific configuration value
+	 * @param key - The configuration key to get
+	 * @returns The configuration value
+	 */
+	getConfig<K extends keyof SettingsConfigType>(key: K): SettingsConfigType[K] {
+		return this.config[key];
+	}
+
+	/**
+	 * Get the entire configuration object
+	 * @returns The complete configuration object
+	 */
+	getAllConfig(): SettingsConfigType {
+		return { ...this.config };
+	}
+
+	canSyncParameter(key: string): boolean {
+		return ParameterSyncService.canSyncParameter(key);
+	}
+
+	/**
+	 * Get parameter information including source for a specific parameter
+	 */
+	getParameterInfo(key: string) {
+		const propsDefaults = this.getServerDefaults();
+		const currentValue = getConfigValue(this.config, key);
+
+		return ParameterSyncService.getParameterInfo(
+			key,
+			currentValue ?? '',
+			propsDefaults,
+			this.userOverrides
+		);
+	}
+
+	/**
+	 * Get diff between current settings and server defaults
+	 */
+	getParameterDiff() {
+		const serverDefaults = this.getServerDefaults();
+		if (Object.keys(serverDefaults).length === 0) return {};
+
+		const configAsRecord = configToParameterRecord(
+			this.config,
+			ParameterSyncService.getSyncableParameterKeys()
+		);
+
+		return ParameterSyncService.createParameterDiff(configAsRecord, serverDefaults);
+	}
+
+	/**
+	 * Clear all user overrides (for debugging)
+	 */
+	clearAllUserOverrides(): void {
+		this.userOverrides.clear();
+		this.saveConfig();
+		console.log('Cleared all user overrides');
+	}
+
+	/**
+	 *
+	 *
+	 * Import / Export
+	 *
+	 *
+	 */
+
+	/**
+	 * Export all settings as a versioned JSON-compatible object.
+	 * The export captures the full config (excluding sensitive values like API key)
+	 * and user overrides. Sensitive fields are filtered out for security by default.
+	 * @param includeSensitiveData - If true, include sensitive fields (apiKey, MCP server headers) in export
+	 */
+	exportSettings(includeSensitiveData: boolean = false): SettingsExportType {
+		// Build config excluding sensitive data unless user opts in
+		const configToExport: Record<string, string | number | boolean | undefined> =
+			includeSensitiveData
+				? { ...this.config }
+				: Object.fromEntries(Object.entries(this.config).filter(([key]) => key !== 'apiKey'));
+
+		// Handle MCP servers: exclude custom headers unless user opts in
+		if ('mcpServers' in configToExport && !includeSensitiveData) {
+			try {
+				const mcpServers = JSON.parse(configToExport.mcpServers as string) as Array<
+					Record<string, unknown>
+				>;
+				const safeServers = mcpServers.map((server) => {
+					delete server.headers;
+					return server;
+				});
+				configToExport.mcpServers = JSON.stringify(safeServers);
+			} catch {
+				// If parsing fails, just exclude the entire mcpServers field
+				delete (configToExport as Record<string, unknown>).mcpServers;
+			}
+		}
+
+		return {
+			version: 1,
+			timestamp: Date.now(),
+			config: configToExport,
+			userOverrides: Array.from(this.userOverrides)
+		};
+	}
+
+	/**
+	 * Import settings from a previously exported object.
+	 * Restores config (including theme) and user overrides.
+	 * @param data - The exported settings object
+	 */
+	importSettings(data: SettingsExportType): void {
+		if (!browser) return;
+
+		if (!data || !data.config) {
+			throw new Error('Invalid settings data: missing config');
+		}
+
+		// Restore config (theme is included in config)
+		this.config = {
+			...SETTING_CONFIG_DEFAULT,
+			...data.config
+		};
+
+		// Restore user overrides (derived state — may be stale if server defaults differ)
+		this.userOverrides = new Set(data.userOverrides ?? []);
+
+		// Persist to localStorage
+		this.saveConfig();
+
+		// Apply theme for immediate visual feedback
+		setMode(this.config[SETTINGS_KEYS.THEME] as ColorMode);
+
+		console.log('Settings imported successfully');
+	}
+}
+
+export const settingsStore = new SettingsStore();
+
+export const config = () => settingsStore.config;
+export const theme = () => settingsStore.config[SETTINGS_KEYS.THEME];
+export const isInitialized = () => settingsStore.isInitialized;
diff --git a/backend/llama.cpp/tools/ui/src/lib/stores/theme.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/stores/theme.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..999e3762477355fcce648cd78d19943fc57f0bfb
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/stores/theme.svelte.ts
@@ -0,0 +1,14 @@
+import { browser } from '$app/environment';
+import { MEDIA_QUERIES } from '$lib/constants';
+
+export const theme = $state({
+	isSystemDark: browser && window.matchMedia(MEDIA_QUERIES.PREFERS_DARK).matches
+});
+
+if (browser) {
+	const mql = window.matchMedia(MEDIA_QUERIES.PREFERS_DARK);
+
+	mql.addEventListener('change', (e) => {
+		theme.isSystemDark = e.matches;
+	});
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/stores/tools.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/stores/tools.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dcaab5f42b16ea3bc213d413e559bde7c5d49f40
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/stores/tools.svelte.ts
@@ -0,0 +1,493 @@
+import type { OpenAIToolDefinition, ToolEntry, ToolGroup } from '$lib/types';
+import { ToolsService } from '$lib/services/tools.service';
+import { mcpStore } from '$lib/stores/mcp.svelte';
+import { HealthCheckStatus, JsonSchemaType, ToolCallType, ToolSource } from '$lib/enums';
+import { config } from '$lib/stores/settings.svelte';
+import {
+	DISABLED_TOOL_KEYS_LOCALSTORAGE_KEY,
+	SANDBOX_TOOL_DEFINITION,
+	TOOL_GROUP_LABELS,
+	TOOL_SERVER_LABELS
+} from '$lib/constants';
+
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+
+/** Stable selection identity for a tool, shared by the disabled set and the permission store */
+
+class ToolsStore {
+	private _builtinTools = $state<OpenAIToolDefinition[]>([]);
+	private _loading = $state(false);
+	private _error = $state<string | null>(null);
+	private _disabledTools = $state(new SvelteSet<string>());
+	private _toolsEndpointUnreachable = $state(false);
+
+	constructor() {
+		try {
+			const stored = localStorage.getItem(DISABLED_TOOL_KEYS_LOCALSTORAGE_KEY);
+			if (stored) {
+				const parsed = JSON.parse(stored);
+				if (Array.isArray(parsed)) {
+					for (const key of parsed) {
+						if (typeof key === 'string') this._disabledTools.add(key);
+					}
+				}
+			}
+		} catch (err) {
+			console.error('[ToolsStore] Failed to load disabled tools from localStorage:', err);
+		}
+
+		this.fetchBuiltinTools();
+	}
+
+	private persistDisabledTools(): void {
+		try {
+			localStorage.setItem(
+				DISABLED_TOOL_KEYS_LOCALSTORAGE_KEY,
+				JSON.stringify([...this._disabledTools])
+			);
+		} catch {
+			// ignore storage errors
+		}
+	}
+
+	private toolKey(source: ToolSource, name: string, serverId?: string): string {
+		switch (source) {
+			case ToolSource.MCP:
+				return serverId ? `mcp-${serverId}:${name}` : `mcp:${name}`;
+			case ToolSource.CUSTOM:
+				return `custom:${name}`;
+			case ToolSource.FRONTEND:
+				return `frontend:${name}`;
+			default:
+				return `builtin:${name}`;
+		}
+	}
+
+	private inferTypeFromDefault(value: unknown): string | undefined {
+		if (typeof value === 'string') return 'string';
+		if (typeof value === 'boolean') return 'boolean';
+		if (typeof value === 'number') return Number.isInteger(value) ? 'integer' : 'number';
+		if (Array.isArray(value)) return 'array';
+		if (value !== null && typeof value === 'object') return 'object';
+		return undefined;
+	}
+
+	/**
+	 * Recursively normalize a JSON Schema object: infers `type` from `default`
+	 * for properties / items that omit it, and descends into nested `properties`
+	 * and `items`. Returns a new object -- does not mutate the input.
+	 */
+	private normalizeJsonSchema(schema: Record<string, unknown>): Record<string, unknown> {
+		if (!schema || typeof schema !== 'object') return schema;
+
+		const normalized: Record<string, unknown> = { ...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: Record<string, unknown> = { ...prop };
+
+				if (!normalizedProp.type && normalizedProp.default !== undefined) {
+					const inferred = this.inferTypeFromDefault(normalizedProp.default);
+					if (inferred) normalizedProp.type = inferred;
+				}
+
+				if (normalizedProp.properties) {
+					Object.assign(
+						normalizedProp,
+						this.normalizeJsonSchema(normalizedProp as Record<string, unknown>)
+					);
+				}
+
+				if (normalizedProp.items && typeof normalizedProp.items === 'object') {
+					normalizedProp.items = this.normalizeJsonSchema(
+						normalizedProp.items as Record<string, unknown>
+					);
+				}
+
+				normalizedProps[key] = normalizedProp;
+			}
+			normalized.properties = normalizedProps;
+		}
+
+		return normalized;
+	}
+
+	private mcpDefinition(
+		name: string,
+		description: string | undefined,
+		schema?: Record<string, unknown>
+	): OpenAIToolDefinition {
+		return {
+			type: ToolCallType.FUNCTION,
+			function: {
+				name,
+				description,
+				parameters: schema ?? { type: JsonSchemaType.OBJECT, properties: {}, required: [] }
+			}
+		};
+	}
+
+	get builtinTools(): OpenAIToolDefinition[] {
+		return this._builtinTools;
+	}
+
+	get mcpTools(): OpenAIToolDefinition[] {
+		return this.mcpEntries().map((e) => e.definition);
+	}
+
+	get frontendTools(): OpenAIToolDefinition[] {
+		return config().jsSandboxEnabled ? [SANDBOX_TOOL_DEFINITION] : [];
+	}
+
+	get customTools(): OpenAIToolDefinition[] {
+		const raw = config().customJson;
+		if (!raw || typeof raw !== 'string') return [];
+
+		try {
+			const parsed = JSON.parse(raw);
+			if (!Array.isArray(parsed)) return [];
+
+			return parsed.filter(
+				(t: unknown): t is OpenAIToolDefinition =>
+					typeof t === 'object' &&
+					t !== null &&
+					'type' in t &&
+					(t as OpenAIToolDefinition).type === 'function' &&
+					'function' in t &&
+					typeof (t as OpenAIToolDefinition).function?.name === 'string'
+			);
+		} catch {
+			return [];
+		}
+	}
+
+	/** Normalize MCP tools from live connections when available, fall back to health check data */
+	private mcpEntries(): {
+		serverId: string;
+		serverName: string;
+		definition: OpenAIToolDefinition;
+	}[] {
+		const out: { serverId: string; serverName: string; definition: OpenAIToolDefinition }[] = [];
+
+		const connections = mcpStore.getConnections();
+		if (connections.size > 0) {
+			for (const [serverId, connection] of connections) {
+				const serverName = mcpStore.getServerDisplayName(serverId);
+				for (const tool of connection.tools) {
+					const rawSchema = (tool.inputSchema as Record<string, unknown>) ?? {
+						type: JsonSchemaType.OBJECT,
+						properties: {},
+						required: []
+					};
+					out.push({
+						serverId,
+						serverName,
+						definition: {
+							type: ToolCallType.FUNCTION,
+							function: {
+								name: tool.name,
+								description: tool.description,
+								parameters: this.normalizeJsonSchema(rawSchema)
+							}
+						}
+					});
+				}
+			}
+		} else {
+			for (const { serverId, serverName, tools } of this.getMcpToolsFromHealthChecks()) {
+				for (const tool of tools) {
+					out.push({
+						serverId,
+						serverName,
+						definition: this.mcpDefinition(tool.name, tool.description)
+					});
+				}
+			}
+		}
+
+		return out;
+	}
+
+	/** Canonical flat list of tool entries with source metadata and stable keys, deduped by key */
+	get allTools(): ToolEntry[] {
+		const entries: ToolEntry[] = [];
+		const seen = new SvelteSet<string>();
+
+		const push = (entry: ToolEntry) => {
+			if (seen.has(entry.key)) return;
+			seen.add(entry.key);
+			entries.push(entry);
+		};
+
+		for (const def of this._builtinTools) {
+			const name = def.function.name;
+			push({
+				source: ToolSource.BUILTIN,
+				key: this.toolKey(ToolSource.BUILTIN, name),
+				definition: def
+			});
+		}
+
+		for (const def of this.frontendTools) {
+			const name = def.function.name;
+			push({
+				source: ToolSource.FRONTEND,
+				key: this.toolKey(ToolSource.FRONTEND, name),
+				definition: def
+			});
+		}
+
+		for (const { serverId, serverName, definition } of this.mcpEntries()) {
+			const name = definition.function.name;
+			push({
+				source: ToolSource.MCP,
+				serverId,
+				serverName,
+				key: this.toolKey(ToolSource.MCP, name, serverId),
+				definition
+			});
+		}
+
+		for (const def of this.customTools) {
+			const name = def.function.name;
+			push({
+				source: ToolSource.CUSTOM,
+				key: this.toolKey(ToolSource.CUSTOM, name),
+				definition: def
+			});
+		}
+
+		return entries;
+	}
+
+	/** Tools grouped by category for tree display, derived from the canonical entries */
+	get toolGroups(): ToolGroup[] {
+		const groups: ToolGroup[] = [];
+		const byKey = new SvelteMap<string, ToolGroup>();
+
+		for (const entry of this.allTools) {
+			const groupKey =
+				entry.source === ToolSource.MCP ? `mcp:${entry.serverId ?? ''}` : entry.source;
+
+			let group = byKey.get(groupKey);
+			if (!group) {
+				group = {
+					source: entry.source,
+					label: this.groupLabel(entry),
+					serverId: entry.serverId,
+					tools: []
+				};
+				byKey.set(groupKey, group);
+				groups.push(group);
+			}
+
+			group.tools.push(entry);
+		}
+
+		return groups;
+	}
+
+	private groupLabel(entry: ToolEntry): string {
+		switch (entry.source) {
+			case ToolSource.MCP:
+				return entry.serverName ?? '';
+			case ToolSource.CUSTOM:
+				return TOOL_GROUP_LABELS[ToolSource.CUSTOM];
+			case ToolSource.FRONTEND:
+				return TOOL_GROUP_LABELS[ToolSource.FRONTEND];
+			default:
+				return TOOL_GROUP_LABELS[ToolSource.BUILTIN];
+		}
+	}
+
+	/**
+	 * Enabled tool definitions for sending to the LLM.
+	 * MCP tool schemas are normalized here so the wire payload is consistent
+	 * across all four sources (built-in, frontend/sandbox, MCP, custom JSON).
+	 * The API identifies tools by name, so a name is sent at most once.
+	 */
+	getEnabledToolsForLLM(): OpenAIToolDefinition[] {
+		const enabledNames = new SvelteSet<string>();
+		for (const entry of this.allTools) {
+			if (!this._disabledTools.has(entry.key)) {
+				enabledNames.add(entry.definition.function.name);
+			}
+		}
+
+		const result: OpenAIToolDefinition[] = [];
+		const seen = new SvelteSet<string>();
+
+		const take = (def: OpenAIToolDefinition) => {
+			const name = def.function.name;
+			if (!enabledNames.has(name) || seen.has(name)) return;
+			seen.add(name);
+			result.push(def);
+		};
+
+		for (const def of this._builtinTools) take(def);
+		for (const def of this.frontendTools) take(def);
+		// mcpEntries() over mcpStore directly so wire shape stays normalized and aligned with the tools UI.
+		for (const entry of this.mcpEntries()) take(entry.definition);
+		for (const def of this.customTools) take(def);
+
+		return result;
+	}
+
+	get allToolDefinitions(): OpenAIToolDefinition[] {
+		return this.allTools.map((t) => t.definition);
+	}
+
+	get loading(): boolean {
+		return this._loading;
+	}
+
+	get error(): string | null {
+		return this._error;
+	}
+
+	get isToolsEndpointUnreachable(): boolean {
+		return this._toolsEndpointUnreachable;
+	}
+
+	get disabledTools(): SvelteSet<string> {
+		return this._disabledTools;
+	}
+
+	isToolEnabled(key: string): boolean {
+		return !this._disabledTools.has(key);
+	}
+
+	toggleTool(key: string): void {
+		if (this._disabledTools.has(key)) {
+			this._disabledTools.delete(key);
+		} else {
+			this._disabledTools.add(key);
+		}
+		this.persistDisabledTools();
+	}
+
+	setToolEnabled(key: string, enabled: boolean): void {
+		if (enabled) {
+			this._disabledTools.delete(key);
+		} else {
+			this._disabledTools.add(key);
+		}
+	}
+
+	/** Enable all tools belonging to a specific MCP server */
+	enableAllToolsForServer(serverId: string): void {
+		const connection = mcpStore.getConnections().get(serverId);
+		if (!connection) return;
+		for (const tool of connection.tools) {
+			this._disabledTools.delete(this.toolKey(ToolSource.MCP, tool.name, serverId));
+		}
+		this.persistDisabledTools();
+	}
+
+	toggleGroup(group: ToolGroup): void {
+		const allEnabled = group.tools.every((t) => this.isToolEnabled(t.key));
+		const target = !allEnabled;
+		for (const tool of group.tools) {
+			if (target) this._disabledTools.delete(tool.key);
+			else this._disabledTools.add(tool.key);
+		}
+		this.persistDisabledTools();
+	}
+
+	isGroupFullyEnabled(group: ToolGroup): boolean {
+		return group.tools.length > 0 && group.tools.every((t) => this.isToolEnabled(t.key));
+	}
+
+	/** Get MCP tools from health check data, used when live connections aren't established yet */
+	private getMcpToolsFromHealthChecks(): {
+		serverId: string;
+		serverName: string;
+		tools: { name: string; description?: string }[];
+	}[] {
+		const result: ReturnType<ToolsStore['getMcpToolsFromHealthChecks']> = [];
+		for (const server of mcpStore.visibleMcpServers) {
+			const health = mcpStore.getHealthCheckState(server.id);
+			if (health.status === HealthCheckStatus.SUCCESS && health.tools.length > 0) {
+				result.push({
+					serverId: server.id,
+					serverName: mcpStore.getServerLabel(server),
+					tools: health.tools
+				});
+			}
+		}
+		return result;
+	}
+
+	/** First canonical entry matching a tool name, runtime tool calls resolve by name */
+	private findEntryByName(toolName: string): ToolEntry | null {
+		for (const entry of this.allTools) {
+			if (entry.definition.function.name === toolName) return entry;
+		}
+		return null;
+	}
+
+	/** Determine the source of a tool by its name */
+	getToolSource(toolName: string): ToolSource | null {
+		return this.findEntryByName(toolName)?.source ?? null;
+	}
+
+	/** Get the display label for the server that owns a given tool */
+	getToolServerLabel(toolName: string): string {
+		const entry = this.findEntryByName(toolName);
+		if (!entry) return '';
+		if (entry.serverName) return mcpStore.getServerDisplayName(entry.serverName);
+		if (entry.source === ToolSource.BUILTIN) return TOOL_SERVER_LABELS[ToolSource.BUILTIN];
+		if (entry.source === ToolSource.CUSTOM) return TOOL_SERVER_LABELS[ToolSource.CUSTOM];
+		if (entry.source === ToolSource.FRONTEND) return TOOL_SERVER_LABELS[ToolSource.FRONTEND];
+		return '';
+	}
+
+	/** Permission key for a tool name, identical to the selection key */
+	getPermissionKey(toolName: string): string | null {
+		return this.findEntryByName(toolName)?.key ?? null;
+	}
+
+	/** Check if there are any enabled tools available (builtin, MCP, or custom) */
+	get hasEnabledTools(): boolean {
+		return this.getEnabledToolsForLLM().length > 0;
+	}
+
+	async fetchBuiltinTools(): Promise<void> {
+		if (this._loading) return;
+
+		this._loading = true;
+		this._error = null;
+		this._toolsEndpointUnreachable = false;
+
+		try {
+			const toolInfos = await ToolsService.list();
+			this._builtinTools = toolInfos.map((info) => info.definition);
+		} catch (err) {
+			const errorMessage = err instanceof Error ? err.message : String(err);
+			this._error = errorMessage;
+			// 403 from /tools means the server was started without --tools
+			// TODO: check status code instead of relying on message
+			if (errorMessage.includes('this feature is disabled')) {
+				this._toolsEndpointUnreachable = true;
+				console.info('[ToolsStore] Built-in tools are disabled on the server');
+			} else {
+				console.error('[ToolsStore] Failed to fetch built-in tools:', err);
+			}
+		} finally {
+			this._loading = false;
+		}
+	}
+}
+
+export const toolsStore = new ToolsStore();
+
+export const allTools = () => toolsStore.allTools;
+export const allToolDefinitions = () => toolsStore.allToolDefinitions;
+export const toolGroups = () => toolsStore.toolGroups;
diff --git a/backend/llama.cpp/tools/ui/src/lib/stores/version.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/stores/version.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d8248a6dc1ffdc12cca5256b089c3d74e9a33b78
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/stores/version.svelte.ts
@@ -0,0 +1,41 @@
+/**
+ * versionStore - Frontend build version
+ *
+ * Reads from SvelteKit's `_app/version.json` — generated by the @vite-pwa/sveltekit
+ * plugin. The version string changes on every build, so comparing it against
+ * localStorage reliably detects server upgrades.
+ *
+ * In dev mode, falls back to `'dev'`.
+ */
+
+import { browser } from '$app/environment';
+import { base } from '$app/paths';
+
+let version = $state<string>('');
+
+async function loadVersion() {
+	if (!browser) return;
+
+	if (import.meta.env.DEV) {
+		version = 'dev';
+		return;
+	}
+
+	try {
+		const res = await fetch(`${base}/_app/version.json`, { cache: 'no-store' });
+		if (res.ok) {
+			const data = await res.json();
+			version = data.version ?? '';
+		}
+	} catch {
+		// _app/version.json missing or unreachable - leave as empty string
+	}
+}
+
+loadVersion();
+
+export const versionStore = {
+	get value(): string {
+		return version;
+	}
+};
diff --git a/backend/llama.cpp/tools/ui/src/lib/stores/viewport.svelte.ts b/backend/llama.cpp/tools/ui/src/lib/stores/viewport.svelte.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dac241a0124791607572a3fac03dc1099037558e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/stores/viewport.svelte.ts
@@ -0,0 +1,9 @@
+import { browser } from '$app/environment';
+import { DEFAULT_MOBILE_BREAKPOINT } from '$lib/constants/viewport';
+import { MediaQuery } from 'svelte/reactivity';
+
+export const viewport = $state({
+	width: browser ? window.innerWidth : 0
+});
+
+export const isMobile = new MediaQuery(`max-width: ${DEFAULT_MOBILE_BREAKPOINT - 1}px`);
diff --git a/backend/llama.cpp/tools/ui/src/lib/types/agentic.d.ts b/backend/llama.cpp/tools/ui/src/lib/types/agentic.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bcec10c671eecd06c988c8038945ebe3c97f56fd
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/types/agentic.d.ts
@@ -0,0 +1,159 @@
+import type { MessageRole } from '$lib/enums';
+import { ToolCallType } from '$lib/enums';
+import type {
+	ApiChatCompletionRequest,
+	ApiChatCompletionToolCall,
+	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: ToolCallType.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[];
+			reasoning_content?: string;
+			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;
+	pendingPermissionRequest: { toolName: string; serverLabel: string } | null;
+}
+
+/**
+ * Callbacks for agentic flow execution.
+ *
+ * The agentic loop creates separate DB messages for each turn:
+ * - assistant messages (one per LLM turn, with tool_calls if any)
+ * - tool result messages (one per tool call execution)
+ *
+ * The first assistant message is created by the caller before starting the flow.
+ * Subsequent messages are created via createToolResultMessage / createAssistantMessage.
+ */
+export interface AgenticFlowCallbacks {
+	/** Content chunk for the current assistant message */
+	onChunk?: (chunk: string) => void;
+	/** Reasoning content chunk for the current assistant message */
+	onReasoningChunk?: (chunk: string) => void;
+	/** Tool calls being streamed (partial, accumulating) for the current turn */
+	onToolCallsStreaming?: (toolCalls: ApiChatCompletionToolCall[]) => void;
+	/** Attachments extracted from tool results */
+	onAttachments?: (messageId: string, extras: DatabaseMessageExtra[]) => void;
+	/** Model name detected from response */
+	onModel?: (model: string) => void;
+	onCompletionId?: (id: string) => void;
+	/** Current assistant turn's streaming is complete - save to DB */
+	onAssistantTurnComplete?: (
+		content: string,
+		reasoningContent: string | undefined,
+		timings: ChatMessageTimings | undefined,
+		toolCalls: ApiChatCompletionToolCall[] | undefined
+	) => Promise<void>;
+	/** Create a tool result message in the DB tree */
+	createToolResultMessage?: (
+		toolCallId: string,
+		content: string,
+		extras?: DatabaseMessageExtra[]
+	) => Promise<DatabaseMessage>;
+	/** Create a new assistant message for the next agentic turn */
+	createAssistantMessage?: () => Promise<DatabaseMessage>;
+	/** Entire agentic flow is complete */
+	onFlowComplete?: (timings?: ChatMessageTimings) => void;
+	/** Error during flow */
+	onError?: (error: Error) => void;
+	/** Timing updates during streaming */
+	onTimings?: (timings?: ChatMessageTimings, promptProgress?: ChatMessagePromptProgress) => void;
+	/** An agentic turn (LLM + tool execution) completed - intermediate timing update */
+	onTurnComplete?: (intermediateTimings: ChatMessageTimings) => 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;
+}
+
+/**
+ * A user message to be injected into the agentic loop between turns.
+ */
+export interface SteeringMessage {
+	content: string;
+	extras?: DatabaseMessageExtra[];
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/types/api.d.ts b/backend/llama.cpp/tools/ui/src/lib/types/api.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5421f8b7f35c87a558cec6fc03941c9a6520f3b9
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/types/api.d.ts
@@ -0,0 +1,530 @@
+import type {
+	ContentPartType,
+	FileTypeAudio,
+	ServerModelStatus,
+	ServerModelsSseEventType,
+	ServerRole
+} from '$lib/enums';
+import type { ChatMessagePromptProgress, ChatRole } from './chat';
+
+export type AudioInputFormat = FileTypeAudio.WAV | FileTypeAudio.MP3;
+
+export interface ApiChatCompletionToolFunction {
+	name: string;
+	description?: string;
+	parameters: Record<string, unknown>;
+}
+
+export interface ApiChatCompletionTool {
+	type: 'function';
+	function: ApiChatCompletionToolFunction;
+}
+
+export interface ApiChatMessageContentPart {
+	type: ContentPartType;
+	text?: string;
+	image_url?: {
+		url: string;
+	};
+	input_audio?: {
+		data: string;
+		format: AudioInputFormat;
+	};
+	input_video?: {
+		data: string;
+		format: 'mp4' | 'ogg' | 'auto';
+	};
+}
+
+export interface ApiContextSizeError {
+	code: number;
+	message: string;
+	type: 'exceed_context_size_error';
+	n_prompt_tokens: number;
+	n_ctx: number;
+}
+
+export interface ApiErrorResponse {
+	error:
+		| ApiContextSizeError
+		| {
+				code: number;
+				message: string;
+				type?: string;
+		  };
+}
+
+export interface ApiChatMessageData {
+	role: ChatRole;
+	content: string | ApiChatMessageContentPart[];
+	reasoning_content?: string;
+	tool_calls?: ApiChatCompletionToolCall[];
+	tool_call_id?: string;
+	timestamp?: number;
+}
+
+/**
+ * Model status object from /models endpoint
+ */
+export interface ApiModelStatus {
+	/** Status value: loaded, unloaded, loading, sleeping, failed */
+	value: ServerModelStatus;
+	/** Command line arguments used when loading (only for loaded models) */
+	args?: string[];
+}
+
+/**
+ * Model entry from /models endpoint (ROUTER mode)
+ * Based on actual API response structure
+ */
+export interface ApiModelDataEntry {
+	/** Model identifier (e.g., "ggml-org/Qwen2.5-Omni-7B-GGUF:latest") */
+	id: string;
+	/** Model name (optional, usually same as id - not always returned by API) */
+	name?: string;
+	/** Object type, always "model" */
+	object: string;
+	/** Owner, usually "llamacpp" */
+	owned_by: string;
+	/** Creation timestamp */
+	created: number;
+	/** Whether model files are in HuggingFace cache */
+	in_cache: boolean;
+	/** Path to model manifest file */
+	path: string;
+	/** Current status of the model */
+	status: ApiModelStatus;
+	/** Alternative names that resolve to this model */
+	aliases?: string[];
+	/** Informational tags for this model */
+	tags?: string[];
+	/** Legacy meta field (may be present in older responses) */
+	meta?: Record<string, unknown> | null;
+}
+
+/**
+ * Load stage reported by the /models/sse feed, in load order.
+ */
+export type ApiModelLoadStage = 'text_model' | 'spec_model' | 'mmproj_model';
+
+/**
+ * Load progress snapshot: the full ordered stage plan, the active stage,
+ * and its fractional value (0.0 -> 1.0).
+ */
+export interface ApiModelsSseProgress {
+	stages: ApiModelLoadStage[];
+	current: ApiModelLoadStage;
+	value: number;
+}
+
+/**
+ * Status payload carried by a /models/sse envelope.
+ * exit_code appears on unload.
+ */
+export interface ApiModelsSseData {
+	status: ServerModelStatus;
+	progress?: ApiModelsSseProgress;
+	exit_code?: number;
+}
+
+/**
+ * Event kind multiplexed on the /models/sse feed.
+ * Only the status_* events carry a status payload, models_reload signals a
+ * full list refresh, model_remove drops a row, download_* drive download UI.
+ */
+/**
+ * One /models/sse record. event discriminates the kind, model names the
+ * target instance, data carries the status payload when present.
+ */
+export interface ApiModelsSseEvent {
+	model: string;
+	event: ServerModelsSseEventType;
+	data: ApiModelsSseData;
+}
+
+export interface ApiModelDetails {
+	name: string;
+	model: string;
+	modified_at?: string;
+	size?: string | number;
+	digest?: string;
+	type?: string;
+	description?: string;
+	tags?: string[];
+	capabilities?: string[];
+	parameters?: string;
+	details?: {
+		parent_model?: string;
+		format?: string;
+		family?: string;
+		families?: string[];
+		parameter_size?: string;
+		quantization_level?: string;
+	};
+}
+
+export interface ApiModelListResponse {
+	object: string;
+	data: ApiModelDataEntry[];
+	models?: ApiModelDetails[];
+}
+
+export interface ApiLlamaCppServerProps {
+	default_generation_settings: {
+		id: number;
+		id_task: number;
+		n_ctx: number;
+		speculative: boolean;
+		is_processing: boolean;
+		params: {
+			n_predict: number;
+			seed: number;
+			temperature: number;
+			dynatemp_range: number;
+			dynatemp_exponent: number;
+			top_k: number;
+			top_p: number;
+			min_p: number;
+			top_n_sigma: number;
+			xtc_probability: number;
+			xtc_threshold: number;
+			typ_p: number;
+			repeat_last_n: number;
+			repeat_penalty: number;
+			presence_penalty: number;
+			frequency_penalty: number;
+			dry_multiplier: number;
+			dry_base: number;
+			dry_allowed_length: number;
+			dry_penalty_last_n: number;
+			dry_sequence_breakers: string[];
+			mirostat: number;
+			mirostat_tau: number;
+			mirostat_eta: number;
+			stop: string[];
+			max_tokens: number;
+			n_keep: number;
+			n_discard: number;
+			ignore_eos: boolean;
+			stream: boolean;
+			logit_bias: Array<[number, number]>;
+			n_probs: number;
+			min_keep: number;
+			grammar: string;
+			grammar_lazy: boolean;
+			grammar_triggers: string[];
+			preserved_tokens: number[];
+			chat_format: string;
+			reasoning_format: string;
+			reasoning_in_content: boolean;
+			generation_prompt: string;
+			samplers: string[];
+			backend_sampling: boolean;
+			'speculative.n_max': number;
+			'speculative.n_min': number;
+			'speculative.p_min': number;
+			timings_per_token: boolean;
+			post_sampling_probs: boolean;
+			lora: Array<{ name: string; scale: number }>;
+		};
+		prompt: string;
+		next_token: {
+			has_next_token: boolean;
+			has_new_line: boolean;
+			n_remain: number;
+			n_decoded: number;
+			stopping_word: string;
+		};
+	};
+	total_slots: number;
+	model_path: string;
+	role: ServerRole;
+	modalities: {
+		vision: boolean;
+		audio: boolean;
+		video: boolean;
+	};
+	chat_template: string;
+	bos_token: string;
+	eos_token: string;
+	build_info: string;
+	/** @deprecated Use {@link ui_settings} instead */
+	webui_settings?: Record<string, string | number | boolean>;
+	ui_settings?: Record<string, string | number | boolean>;
+	cors_proxy_enabled?: boolean;
+}
+
+export interface ApiChatCompletionRequest {
+	messages: Array<{
+		role: ChatRole;
+		content: string | ApiChatMessageContentPart[];
+		reasoning_content?: string;
+		tool_calls?: ApiChatCompletionToolCall[];
+		tool_call_id?: string;
+	}>;
+	stream?: boolean;
+	model?: string;
+	return_progress?: boolean;
+	sse_ping_interval?: number;
+	tools?: ApiChatCompletionTool[];
+	// Reasoning parameters
+	reasoning_format?: string;
+	// Generation parameters
+	temperature?: number;
+	max_tokens?: number;
+	// Sampling parameters
+	dynatemp_range?: number;
+	dynatemp_exponent?: number;
+	top_k?: number;
+	top_p?: number;
+	min_p?: number;
+	xtc_probability?: number;
+	xtc_threshold?: number;
+	typ_p?: number;
+	// Penalty parameters
+	repeat_last_n?: number;
+	repeat_penalty?: number;
+	presence_penalty?: number;
+	frequency_penalty?: number;
+	dry_multiplier?: number;
+	dry_base?: number;
+	dry_allowed_length?: number;
+	dry_penalty_last_n?: number;
+	// Sampler configuration
+	samplers?: string[];
+	backend_sampling?: boolean;
+	// Custom parameters (JSON string)
+	custom?: Record<string, unknown>;
+	timings_per_token?: boolean;
+	// Continuation control (vLLM compat)
+	add_generation_prompt?: boolean;
+	continue_final_message?: boolean;
+}
+
+export interface ApiChatCompletionToolCallFunctionDelta {
+	name?: string;
+	arguments?: string;
+}
+
+export interface ApiChatCompletionToolCallDelta {
+	index?: number;
+	id?: string;
+	type?: string;
+	function?: ApiChatCompletionToolCallFunctionDelta;
+}
+
+export interface ApiChatCompletionToolCall extends ApiChatCompletionToolCallDelta {
+	function?: ApiChatCompletionToolCallFunctionDelta & { arguments?: string };
+}
+
+export interface ApiChatCompletionStreamChunk {
+	id?: string;
+	object?: string;
+	model?: string;
+	choices: Array<{
+		model?: string;
+		metadata?: { model?: string };
+		delta: {
+			content?: string;
+			reasoning_content?: string;
+			model?: string;
+			tool_calls?: ApiChatCompletionToolCallDelta[];
+		};
+		finish_reason?: string | null;
+	}>;
+	timings?: {
+		prompt_n?: number;
+		prompt_ms?: number;
+		predicted_n?: number;
+		predicted_ms?: number;
+		cache_n?: number;
+	};
+	prompt_progress?: ChatMessagePromptProgress;
+}
+
+export interface ApiChatCompletionResponse {
+	model?: string;
+	choices: Array<{
+		model?: string;
+		metadata?: { model?: string };
+		message: {
+			content: string;
+			reasoning_content?: string;
+			model?: string;
+			tool_calls?: ApiChatCompletionToolCall[];
+		};
+		finish_reason?: string | null;
+	}>;
+}
+
+export interface ApiSlotData {
+	id: number;
+	id_task: number;
+	n_ctx: number;
+	speculative: boolean;
+	is_processing: boolean;
+	params: {
+		n_predict: number;
+		seed: number;
+		temperature: number;
+		dynatemp_range: number;
+		dynatemp_exponent: number;
+		top_k: number;
+		top_p: number;
+		min_p: number;
+		top_n_sigma: number;
+		xtc_probability: number;
+		xtc_threshold: number;
+		typical_p: number;
+		repeat_last_n: number;
+		repeat_penalty: number;
+		presence_penalty: number;
+		frequency_penalty: number;
+		dry_multiplier: number;
+		dry_base: number;
+		dry_allowed_length: number;
+		dry_penalty_last_n: number;
+		mirostat: number;
+		mirostat_tau: number;
+		mirostat_eta: number;
+		max_tokens: number;
+		n_keep: number;
+		n_discard: number;
+		ignore_eos: boolean;
+		stream: boolean;
+		n_probs: number;
+		min_keep: number;
+		chat_format: string;
+		reasoning_format: string;
+		reasoning_in_content: boolean;
+		generation_prompt: string;
+		samplers: string[];
+		backend_sampling: boolean;
+		'speculative.n_max': number;
+		'speculative.n_min': number;
+		'speculative.p_min': number;
+		timings_per_token: boolean;
+		post_sampling_probs: boolean;
+		lora: Array<{ name: string; scale: number }>;
+	};
+	next_token: {
+		has_next_token: boolean;
+		has_new_line: boolean;
+		n_remain: number;
+		n_decoded: number;
+	};
+}
+
+export interface ApiProcessingState {
+	status: 'initializing' | 'generating' | 'preparing' | 'idle';
+	tokensDecoded: number;
+	tokensRemaining: number;
+	contextUsed: number;
+	contextTotal: number | null;
+	outputTokensUsed: number; // Total output tokens (thinking + regular content)
+	outputTokensMax: number; // Max output tokens allowed
+	temperature: number;
+	topP: number;
+	speculative: boolean;
+	hasNextToken: boolean;
+	tokensPerSecond?: number;
+	// Progress information from prompt_progress
+	progressPercent?: number;
+	promptProgress?: ChatMessagePromptProgress;
+	promptTokens?: number;
+	promptMs?: number;
+	cacheTokens?: number;
+}
+
+/**
+ * Router model metadata - extended from ApiModelDataEntry with additional router-specific fields
+ * @deprecated Use ApiModelDataEntry instead - the /models endpoint returns this structure directly
+ */
+export interface ApiRouterModelMeta {
+	/** Model identifier (e.g., "ggml-org/Qwen2.5-Omni-7B-GGUF:latest") */
+	name: string;
+	/** Path to model file or manifest */
+	path: string;
+	/** Optional path to multimodal projector */
+	path_mmproj?: string;
+	/** Whether model is in HuggingFace cache */
+	in_cache: boolean;
+	/** Port where model instance is running (0 if not loaded) */
+	port?: number;
+	/** Current status of the model */
+	status: ApiModelStatus;
+	/** Error message if status is FAILED */
+	error?: string;
+}
+
+/**
+ * Request to load a model
+ */
+export interface ApiRouterModelsLoadRequest {
+	model: string;
+}
+
+/**
+ * Response from loading a model
+ */
+export interface ApiRouterModelsLoadResponse {
+	success: boolean;
+	error?: string;
+}
+
+/**
+ * Request to check model status
+ */
+export interface ApiRouterModelsStatusRequest {
+	model: string;
+}
+
+/**
+ * Response with model status
+ */
+export interface ApiRouterModelsStatusResponse {
+	model: string;
+	status: ModelStatus;
+	port?: number;
+	error?: string;
+}
+
+/**
+ * Response with list of all models from /models endpoint
+ * Note: This is the same as ApiModelListResponse - the endpoint returns the same structure
+ * regardless of server mode (MODEL or ROUTER)
+ */
+export interface ApiRouterModelsListResponse {
+	object: string;
+	data: ApiModelDataEntry[];
+}
+
+/**
+ * Request to unload a model
+ */
+export interface ApiRouterModelsUnloadRequest {
+	model: string;
+}
+
+/**
+ * Response from unloading a model
+ */
+export interface ApiRouterModelsUnloadResponse {
+	success: boolean;
+	error?: string;
+}
+
+/**
+ * Entry returned by POST /v1/streams/lookup. The client passes the conv ids it owns in the body
+ * and the server returns one entry per matching live or recently completed background streaming
+ * session, keyed by conversation_id. The WebUI uses this at mount and on visibilitychange to
+ * populate sidebar spinners and to reattach to an ongoing inference for the active conversation.
+ * The server never lists ids the client did not ask about, so foreign random UUIDs stay private.
+ */
+export interface ApiStreamSession {
+	conversation_id: string;
+	is_done: boolean;
+	total_bytes: number;
+	started_at: number;
+	completed_at: number;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/types/chat.d.ts b/backend/llama.cpp/tools/ui/src/lib/types/chat.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b2158807d4d7302d3282a9740f801b0ebac0b9d4
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/types/chat.d.ts
@@ -0,0 +1,162 @@
+import type { ErrorDialogType } from '$lib/enums';
+import type { ApiChatCompletionToolCall } from './api';
+import type { DatabaseMessage, DatabaseMessageExtra } from './database';
+
+export interface ChatUploadedFile {
+	id: string;
+	name: string;
+	size: number;
+	type: string;
+	file: File;
+	preview?: string;
+	textContent?: string;
+	mcpPrompt?: {
+		serverName: string;
+		promptName: string;
+		arguments?: Record<string, string>;
+	};
+	isLoading?: boolean;
+	loadError?: string;
+}
+
+export interface ChatAttachmentDisplayItem {
+	id: string;
+	name: string;
+	size?: number;
+	preview?: string;
+	isImage: boolean;
+	isLoading?: boolean;
+	loadError?: string;
+	uploadedFile?: ChatUploadedFile;
+	attachment?: DatabaseMessageExtra;
+	attachmentIndex?: number;
+	textContent?: string;
+}
+
+export interface ChatMessageSiblingInfo {
+	message: DatabaseMessage;
+	siblingIds: string[];
+	currentIndex: number;
+	totalSiblings: number;
+}
+
+export interface ChatMessagePromptProgress {
+	cache: number;
+	processed: number;
+	time_ms: number;
+	total: number;
+}
+
+export interface ChatMessageTimings {
+	cache_n?: number;
+	predicted_ms?: number;
+	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 (used by both agentic and non-agentic paths)
+ */
+export interface ChatStreamCallbacks {
+	onChunk?: (chunk: string) => void;
+	onReasoningChunk?: (chunk: string) => void;
+	onToolCallsStreaming?: (toolCalls: ApiChatCompletionToolCall[]) => void;
+	onAttachments?: (messageId: string, extras: DatabaseMessageExtra[]) => void;
+	onModel?: (model: string) => void;
+	onCompletionId?: (id: string) => void;
+	onTimings?: (timings?: ChatMessageTimings, promptProgress?: ChatMessagePromptProgress) => void;
+	onAssistantTurnComplete?: (
+		content: string,
+		reasoningContent: string | undefined,
+		timings: ChatMessageTimings | undefined,
+		toolCalls: ApiChatCompletionToolCall[] | undefined
+	) => Promise<void>;
+	createToolResultMessage?: (
+		toolCallId: string,
+		content: string,
+		extras?: DatabaseMessageExtra[]
+	) => Promise<DatabaseMessage>;
+	createAssistantMessage?: () => Promise<DatabaseMessage>;
+	onFlowComplete?: (timings?: ChatMessageTimings) => void;
+	onError?: (error: Error) => void;
+	onTurnComplete?: (intermediateTimings: ChatMessageTimings) => 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;
+	timeMs: number;
+	tokensPerSecond: number;
+	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/backend/llama.cpp/tools/ui/src/lib/types/common.d.ts b/backend/llama.cpp/tools/ui/src/lib/types/common.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6de33aaaf8464598b04c28338254150200047f01
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/types/common.d.ts
@@ -0,0 +1,72 @@
+import type { AttachmentType } from '$lib/enums';
+
+/**
+ * Common utility types used across the application
+ */
+
+/**
+ * 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;
+	value: string;
+}
+
+/**
+ * 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
+ */
+export interface ClipboardTextAttachment {
+	type: typeof AttachmentType.TEXT;
+	name: string;
+	content: string;
+}
+
+/**
+ * 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
+	| MimeTypeVideo
+	| MimeTypeImage
+	| MimeTypeApplication
+	| MimeTypeText;
diff --git a/backend/llama.cpp/tools/ui/src/lib/types/database.d.ts b/backend/llama.cpp/tools/ui/src/lib/types/database.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b01a7b9649c1c0ef39b8402760cf7e798590685b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/types/database.d.ts
@@ -0,0 +1,133 @@
+import type { ChatMessageTimings, ChatRole, ChatMessageType } from '$lib/types/chat';
+import { AttachmentType, ReasoningEffort } from '$lib/enums';
+
+export interface McpServerOverride {
+	serverId: string;
+	enabled: boolean;
+}
+
+export interface DatabaseConversation {
+	currNode: string | null;
+	id: string;
+	lastModified: number;
+	name: string;
+	mcpServerOverrides?: McpServerOverride[];
+	thinkingEnabled?: boolean;
+	reasoningEffort?: ReasoningEffort;
+	forkedFromConversationId?: string;
+	pinned?: boolean;
+}
+
+export interface DatabaseMessageExtraAudioFile {
+	type: AttachmentType.AUDIO;
+	name: string;
+	size?: number;
+	base64Data: string;
+	mimeType: string;
+}
+
+export interface DatabaseMessageExtraVideoFile {
+	type: AttachmentType.VIDEO;
+	name: string;
+	size?: number;
+	base64Data: string;
+	mimeType: string;
+}
+
+export interface DatabaseMessageExtraImageFile {
+	type: AttachmentType.IMAGE;
+	name: string;
+	size?: number;
+	base64Url: string;
+}
+
+/**
+ * Legacy format from the old UI — pasted content was stored as "context" type
+ * @deprecated Use DatabaseMessageExtraTextFile instead
+ */
+export interface DatabaseMessageExtraLegacyContext {
+	type: AttachmentType.LEGACY_CONTEXT;
+	name: string;
+	size?: number;
+	content: string;
+}
+
+export interface DatabaseMessageExtraPdfFile {
+	type: AttachmentType.PDF;
+	base64Data: string;
+	name: string;
+	size?: number;
+	content: string;
+	images?: string[];
+	processedAsImages: boolean;
+}
+
+export interface DatabaseMessageExtraTextFile {
+	type: AttachmentType.TEXT;
+	name: string;
+	size?: number;
+	content: string;
+}
+
+export interface DatabaseMessageExtraMcpPrompt {
+	type: AttachmentType.MCP_PROMPT;
+	name: string;
+	size?: number;
+	serverName: string;
+	promptName: string;
+	content: string;
+	arguments?: Record<string, string>;
+}
+
+export interface DatabaseMessageExtraMcpResource {
+	type: AttachmentType.MCP_RESOURCE;
+	name: string;
+	size?: number;
+	uri: string;
+	serverName: string;
+	content: string;
+	mimeType?: string;
+}
+
+export type DatabaseMessageExtra =
+	| DatabaseMessageExtraImageFile
+	| DatabaseMessageExtraTextFile
+	| DatabaseMessageExtraAudioFile
+	| DatabaseMessageExtraVideoFile
+	| DatabaseMessageExtraPdfFile
+	| DatabaseMessageExtraMcpPrompt
+	| DatabaseMessageExtraMcpResource
+	| DatabaseMessageExtraLegacyContext;
+
+export interface DatabaseMessage {
+	id: string;
+	convId: string;
+	type: ChatMessageType;
+	timestamp: number;
+	role: ChatRole;
+	content: string;
+	parent: string | null;
+	/**
+	 * @deprecated - left for backward compatibility
+	 */
+	thinking?: string;
+	/** Reasoning content produced by the model (separate from visible content) */
+	reasoningContent?: string;
+	/** Serialized JSON array of tool calls made by assistant messages */
+	toolCalls?: string;
+	/** Chat completion id streamed by the server, used to target realtime control (e.g. end reasoning) */
+	completionId?: string;
+	/** Tool call ID for tool result messages (role: 'tool') */
+	toolCallId?: string;
+	children: string[];
+	extra?: DatabaseMessageExtra[];
+	timings?: ChatMessageTimings;
+	model?: string;
+}
+
+export type ExportedConversation = {
+	conv: DatabaseConversation;
+	messages: DatabaseMessage[];
+};
+
+export type ExportedConversations = ExportedConversation | ExportedConversation[];
diff --git a/backend/llama.cpp/tools/ui/src/lib/types/index.ts b/backend/llama.cpp/tools/ui/src/lib/types/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..91ceb72e7bd951bb1300de5c2d738c466bd3669d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/types/index.ts
@@ -0,0 +1,181 @@
+/**
+ * Unified exports for all type definitions
+ * Import types from '$lib/types' for cleaner imports
+ */
+
+// API types
+export type {
+	ApiChatMessageContentPart,
+	ApiContextSizeError,
+	ApiErrorResponse,
+	ApiChatMessageData,
+	ApiModelStatus,
+	ApiModelDataEntry,
+	ApiModelLoadStage,
+	ApiModelsSseProgress,
+	ApiModelsSseData,
+	ApiModelsSseEvent,
+	ApiModelDetails,
+	ApiModelListResponse,
+	ApiLlamaCppServerProps,
+	ApiChatCompletionRequest,
+	ApiChatCompletionToolCallFunctionDelta,
+	ApiChatCompletionToolCallDelta,
+	ApiChatCompletionToolCall,
+	ApiChatCompletionStreamChunk,
+	ApiChatCompletionResponse,
+	ApiSlotData,
+	ApiProcessingState,
+	ApiRouterModelMeta,
+	ApiRouterModelsLoadRequest,
+	ApiRouterModelsLoadResponse,
+	ApiRouterModelsStatusRequest,
+	ApiRouterModelsStatusResponse,
+	ApiRouterModelsListResponse,
+	ApiRouterModelsUnloadRequest,
+	ApiRouterModelsUnloadResponse,
+	AudioInputFormat,
+	ApiStreamSession
+} from './api';
+
+// Chat types
+export type {
+	ChatUploadedFile,
+	ChatAttachmentDisplayItem,
+	ChatMessageSiblingInfo,
+	ChatMessagePromptProgress,
+	ChatMessageTimings,
+	ChatMessageAgenticTimings,
+	ChatMessageAgenticTurnStats,
+	ChatMessageToolCallTiming,
+	ChatStreamCallbacks,
+	ErrorDialogState,
+	LiveProcessingStats,
+	LiveGenerationStats,
+	AttachmentDisplayItemsOptions,
+	FileProcessingResult
+} from './chat.d';
+
+// Database types
+export type {
+	McpServerOverride,
+	DatabaseConversation,
+	DatabaseMessageExtraAudioFile,
+	DatabaseMessageExtraVideoFile,
+	DatabaseMessageExtraImageFile,
+	DatabaseMessageExtraLegacyContext,
+	DatabaseMessageExtraMcpPrompt,
+	DatabaseMessageExtraMcpResource,
+	DatabaseMessageExtraPdfFile,
+	DatabaseMessageExtraTextFile,
+	DatabaseMessageExtra,
+	DatabaseMessage,
+	ExportedConversation,
+	ExportedConversations
+} from './database';
+
+// Model types
+export type {
+	ModelModalities,
+	ModelOption,
+	ModelLoadProgress,
+	ModalityCapabilities
+} from './models';
+
+// Settings types
+export type {
+	SettingsConfigValue,
+	SettingsFieldConfig,
+	SettingsChatServiceOptions,
+	SettingsConfigType,
+	SettingsExportType,
+	ParameterValue,
+	ParameterRecord,
+	ParameterInfo,
+	SyncableParameter,
+	SettingsEntry,
+	SettingsSectionTitle,
+	SettingsSectionEntry,
+	SettingsSection
+} from './settings';
+
+// Common types
+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,
+	MCPServerDisplayInfo,
+	MCPToolCall,
+	OpenAIToolDefinition,
+	ServerStatus,
+	ToolCallParams,
+	ToolExecutionResult,
+	ServerBuiltinToolInfo,
+	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,
+	SteeringMessage
+} from './agentic';
+
+// Tools types
+export type { ToolEntry, ToolGroup } from './tools';
+
+// Reasoning
+export type { ReasoningEffortLevel } from './reasoning';
+
+// Splash
+export type { SplashDimensions } from './splash';
diff --git a/backend/llama.cpp/tools/ui/src/lib/types/mcp.d.ts b/backend/llama.cpp/tools/ui/src/lib/types/mcp.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dca57d3968f41a6b06e613050c2f18b840ff3d9e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/types/mcp.d.ts
@@ -0,0 +1,440 @@
+import type { MCPConnectionPhase, MCPLogLevel, HealthCheckStatus } from '$lib/enums/mcp.enums';
+import type { ToolSource } from '$lib/enums/tools.enums';
+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';
+import type { ColorMode } from '$lib/enums';
+
+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?: MCPResourceIcon[];
+}
+
+/**
+ * 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;
+	/** Configured timeout for individual requests (tool calls, etc.) in milliseconds */
+	requestTimeoutMs: number;
+}
+
+/**
+ * Extended health check state with detailed connection info
+ */
+export type HealthCheckState =
+	| { status: HealthCheckStatus.IDLE }
+	| {
+			status: HealthCheckStatus.CONNECTING;
+			phase: MCPConnectionPhase;
+			logs: MCPConnectionLog[];
+	  }
+	| {
+			status: HealthCheckStatus.ERROR;
+			message: string;
+			phase?: MCPConnectionPhase;
+			logs: MCPConnectionLog[];
+	  }
+	| {
+			status: 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;
+	};
+};
+
+/**
+ * Minimum fields needed to display or identify an MCP server.
+ */
+export interface MCPServerDisplayInfo {
+	id: string;
+	name?: string;
+	url: string;
+}
+
+export type MCPServerSettingsEntry = MCPServerDisplayInfo & {
+	enabled: boolean;
+	requestTimeoutSeconds: number;
+	headers?: 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;
+}
+
+export interface ServerBuiltinToolInfo {
+	display_name: string;
+	tool: string;
+	type: ToolSource.BUILTIN;
+	permissions: {
+		write: boolean;
+	};
+	definition: OpenAIToolDefinition;
+}
+
+/**
+ * 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?: ColorMode.LIGHT | ColorMode.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/backend/llama.cpp/tools/ui/src/lib/types/models.d.ts b/backend/llama.cpp/tools/ui/src/lib/types/models.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b32c16f6f26b518a8dce63a1275bc885bd7d9462
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/types/models.d.ts
@@ -0,0 +1,51 @@
+import type { ApiModelDataEntry, ApiModelDetails, ApiModelLoadStage } from '$lib/types/api';
+
+export interface ModelModalities {
+	vision: boolean;
+	audio: boolean;
+	video: boolean;
+}
+
+export interface ModelOption {
+	id: string;
+	name: string;
+	model: string;
+	description?: string;
+	capabilities: string[];
+	modalities?: ModelModalities;
+	details?: ApiModelDetails['details'];
+	meta?: ApiModelDataEntry['meta'];
+	parsedId?: ParsedModelId;
+	aliases?: string[];
+	tags?: string[];
+}
+
+/**
+ * Ephemeral UI-only load progress for one model instance.
+ * Lives only while a load runs, driven by the /models/sse feed.
+ * stage is absent until the feed reports its first stage.
+ */
+export interface ModelLoadProgress {
+	stages: ApiModelLoadStage[];
+	current: ApiModelLoadStage;
+	value: number;
+}
+
+export interface ParsedModelId {
+	raw: string;
+	orgName: string | null;
+	modelName: string | null;
+	params: string | null;
+	activatedParams: string | null;
+	quantization: string | null;
+	tags: string[];
+}
+
+/**
+ * Modality capabilities for file validation
+ */
+export interface ModalityCapabilities {
+	hasVision: boolean;
+	hasAudio: boolean;
+	hasVideo: boolean;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/types/reasoning.ts b/backend/llama.cpp/tools/ui/src/lib/types/reasoning.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b72a3b77f1fe70437fcc59dc5d7ae32253376a8f
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/types/reasoning.ts
@@ -0,0 +1,6 @@
+export interface ReasoningEffortLevel {
+	value: string;
+	label: string;
+	isOff?: boolean;
+	hasInfo?: boolean;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/types/settings.d.ts b/backend/llama.cpp/tools/ui/src/lib/types/settings.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9c787cd958f795cc7f8765ec0d4335b4d16e5391
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/types/settings.d.ts
@@ -0,0 +1,164 @@
+import type { SETTING_CONFIG_DEFAULT, SETTINGS_SECTION_TITLES } from '$lib/constants';
+import type { ChatMessagePromptProgress, ChatMessageTimings } from './chat';
+import type { OpenAIToolDefinition } from './mcp';
+import type { DatabaseMessageExtra } from './database';
+import type {
+	ParameterSource,
+	SyncableParameterType,
+	SettingsFieldType,
+	StreamConnectionState,
+	ReasoningEffort
+} from '$lib/enums';
+import type { Icon } from '@lucide/svelte';
+import type { Component } from 'svelte';
+
+export type SettingsConfigValue = string | number | boolean | undefined;
+
+/** Section title type derived from registry section titles. */
+export type SettingsSectionTitle =
+	(typeof SETTINGS_SECTION_TITLES)[keyof typeof SETTINGS_SECTION_TITLES];
+
+/** Per-setting metadata — one entry per setting. */
+export interface SettingsEntry {
+	key: string;
+	label: string;
+	help: string;
+	defaultValue: SettingsConfigValue;
+	type: SettingsFieldType;
+	section?: string;
+	options?: Array<{ value: string; label: string; icon: Component }>;
+	isExperimental?: boolean;
+	isPositiveInteger?: boolean;
+	sync?: {
+		serverKey: string;
+		paramType: SyncableParameterType;
+	};
+}
+
+/** A settings section with its icon, slug, title, and ordered settings. */
+export interface SettingsSectionEntry {
+	title: SettingsSectionTitle;
+	slug: string;
+	icon: Component;
+	settings: SettingsEntry[];
+}
+
+export interface SettingsFieldConfig {
+	key: string;
+	label: string;
+	type: SettingsFieldType;
+	isExperimental?: boolean;
+	isPositiveInteger?: boolean;
+	help?: string;
+	options?: Array<{ value: string; label: string; icon?: typeof Icon }>;
+}
+
+/** Re-exported for backward compatibility. */
+export interface SettingsSection {
+	fields?: SettingsFieldConfig[];
+	icon: Component;
+	slug: string;
+	title: SettingsSectionTitle;
+}
+
+export interface SettingsChatServiceOptions {
+	stream?: boolean;
+	// Model (required in ROUTER mode, optional in MODEL mode)
+	model?: string;
+	// System message to inject
+	systemMessage?: string;
+	// Disable reasoning parsing (use 'none' instead of 'auto')
+	disableReasoningParsing?: boolean;
+	// Strip reasoning content from context before sending
+	excludeReasoningFromContext?: boolean;
+	// Enable model thinking/reasoning via chat_template_kwargs
+	enableThinking?: boolean;
+	// Reasoning effort level (low/medium/high/max) for thinking models
+	reasoningEffort?: ReasoningEffort;
+	tools?: OpenAIToolDefinition[];
+	// Generation parameters
+	temperature?: number;
+	max_tokens?: number;
+	// Sampling parameters
+	dynatemp_range?: number;
+	dynatemp_exponent?: number;
+	top_k?: number;
+	top_p?: number;
+	min_p?: number;
+	xtc_probability?: number;
+	xtc_threshold?: number;
+	typ_p?: number;
+	// Penalty parameters
+	repeat_last_n?: number;
+	repeat_penalty?: number;
+	presence_penalty?: number;
+	frequency_penalty?: number;
+	dry_multiplier?: number;
+	dry_base?: number;
+	dry_allowed_length?: number;
+	dry_penalty_last_n?: number;
+	// Sampler configuration
+	samplers?: string | string[];
+	backend_sampling?: boolean;
+	// Custom JSON parameters
+	customJson?: string;
+	timings_per_token?: boolean;
+	// Continuation control (vLLM compat), opt in to the explicit continue final message flag
+	continueFinalMessage?: boolean;
+	// Callbacks
+	onChunk?: (chunk: string) => void;
+	onReasoningChunk?: (chunk: string) => void;
+	onToolCallChunk?: (chunk: string) => void;
+	onAttachments?: (extras: DatabaseMessageExtra[]) => void;
+	onModel?: (model: string) => void;
+	onCompletionId?: (id: string) => void;
+	onTimings?: (timings?: ChatMessageTimings, promptProgress?: ChatMessagePromptProgress) => void;
+	onComplete?: (
+		response: string,
+		reasoningContent?: string,
+		timings?: ChatMessageTimings,
+		toolCalls?: string
+	) => void;
+	onError?: (error: Error) => void;
+	onConnectionState?: (state: StreamConnectionState) => void;
+}
+
+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: string | number | boolean;
+	source: ParameterSource;
+	serverDefault?: string | number | boolean;
+	userOverride?: string | number | boolean;
+}
+
+export interface SyncableParameter {
+	key: string;
+	serverKey: string;
+	type: SyncableParameterType;
+	canSync: boolean;
+}
+
+/**
+ * Shape of the settings JSON export file.
+ * Versioned to allow future schema evolution.
+ */
+export interface SettingsExportType {
+	/** Export format version — bumped on breaking changes */
+	version: number;
+	/** Unix timestamp of export */
+	timestamp: number;
+	/** Full settings config (includes theme as a config key) */
+	config: SettingsConfigType;
+	/** Keys that differ from server defaults (derived, but persisted for fidelity) */
+	userOverrides: string[];
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/types/splash.ts b/backend/llama.cpp/tools/ui/src/lib/types/splash.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8c5c5ff53835beec65cd8da47da832c887d88d1b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/types/splash.ts
@@ -0,0 +1 @@
+export type SplashDimensions = { deviceW: number; deviceH: number; dpr: number };
diff --git a/backend/llama.cpp/tools/ui/src/lib/types/tools.d.ts b/backend/llama.cpp/tools/ui/src/lib/types/tools.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..50561a4c578b52a94e4a8c2d88f373e4efb8413e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/types/tools.d.ts
@@ -0,0 +1,21 @@
+import type { ToolSource } from '$lib/enums';
+import type { OpenAIToolDefinition } from './mcp';
+
+export interface ToolEntry {
+	source: ToolSource;
+	/** For MCP tools, the server display name (used for UI grouping) */
+	serverName?: string;
+	/** For MCP tools, the server ID (used for permission keys) */
+	serverId?: string;
+	/** Stable selection identity: builtin:name, mcp-<serverId>:name, mcp:name, custom:name */
+	key: string;
+	definition: OpenAIToolDefinition;
+}
+
+export interface ToolGroup {
+	source: ToolSource;
+	label: string;
+	/** For MCP groups, the server ID */
+	serverId?: string;
+	tools: ToolEntry[];
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/abort.ts b/backend/llama.cpp/tools/ui/src/lib/utils/abort.ts
new file mode 100644
index 0000000000000000000000000000000000000000..135ef087a0a0d965335ef33c5ec69b24b2d070e7
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/abort.ts
@@ -0,0 +1,169 @@
+/**
+ * Abort Signal Utilities
+ *
+ * Provides utilities for consistent AbortSignal propagation across the application.
+ * These utilities help ensure that async operations can be properly cancelled
+ * when needed (e.g., user stops generation, navigates away, etc.).
+ */
+
+// the standard DOMException name for a cancelled operation
+const ABORT_ERROR_NAME = 'AbortError';
+
+// browser specific TypeError messages emitted when a fetch reader is cut by page unload,
+// navigation, or a transient network drop. functionally aborts, not actionable errors
+const ABORT_LIKE_MESSAGE_PATTERNS = [
+	/input stream/i, // Firefox: stream cut at unload
+	/network connection was lost/i, // Safari: transient network drop
+	/load failed/i // Safari: page navigation during fetch
+];
+
+/**
+ * Throws an AbortError if the signal is aborted.
+ * Use this at the start of async operations to fail fast.
+ *
+ * @param signal - Optional AbortSignal to check
+ * @throws DOMException with name 'AbortError' if signal is aborted
+ *
+ * @example
+ * ```ts
+ * async function fetchData(signal?: AbortSignal) {
+ *   throwIfAborted(signal);
+ *   // ... proceed with operation
+ * }
+ * ```
+ */
+export function throwIfAborted(signal?: AbortSignal): void {
+	if (signal?.aborted) {
+		throw new DOMException('Operation was aborted', ABORT_ERROR_NAME);
+	}
+}
+
+/**
+ * Checks if an error is an AbortError.
+ * Use this to distinguish between user-initiated cancellation and actual errors.
+ *
+ * @param error - Error to check
+ * @returns true if the error is an AbortError
+ *
+ * @example
+ * ```ts
+ * try {
+ *   await fetchData(signal);
+ * } catch (error) {
+ *   if (isAbortError(error)) {
+ *     // User cancelled - no error dialog needed
+ *     return;
+ *   }
+ *   // Handle actual error
+ * }
+ * ```
+ */
+export function isAbortError(error: unknown): boolean {
+	if (error instanceof DOMException && error.name === ABORT_ERROR_NAME) {
+		return true;
+	}
+	if (error instanceof Error) {
+		if (error.name === ABORT_ERROR_NAME) {
+			return true;
+		}
+		// these patterns are functionally aborts, keep them out of the red console
+		if (error instanceof TypeError) {
+			const msg = error.message ?? '';
+			if (ABORT_LIKE_MESSAGE_PATTERNS.some((re) => re.test(msg))) return true;
+		}
+	}
+	return false;
+}
+
+/**
+ * Creates a new AbortController that is linked to one or more parent signals.
+ * When any parent signal aborts, the returned controller also aborts.
+ *
+ * Useful for creating child operations that should be cancelled when
+ * either the parent operation or their own timeout/condition triggers.
+ *
+ * @param signals - Parent signals to link to (undefined signals are ignored)
+ * @returns A new AbortController linked to all provided signals
+ *
+ * @example
+ * ```ts
+ * // Link to user's abort signal and add a timeout
+ * const linked = createLinkedController(userSignal, timeoutSignal);
+ * await fetch(url, { signal: linked.signal });
+ * ```
+ */
+export function createLinkedController(...signals: (AbortSignal | undefined)[]): AbortController {
+	const controller = new AbortController();
+
+	for (const signal of signals) {
+		if (!signal) continue;
+
+		// If already aborted, abort immediately
+		if (signal.aborted) {
+			controller.abort(signal.reason);
+			return controller;
+		}
+
+		// Link to parent signal
+		signal.addEventListener('abort', () => controller.abort(signal.reason), { once: true });
+	}
+
+	return controller;
+}
+
+/**
+ * Creates an AbortSignal that times out after the specified duration.
+ *
+ * @param ms - Timeout duration in milliseconds
+ * @returns AbortSignal that will abort after the timeout
+ *
+ * @example
+ * ```ts
+ * const signal = createTimeoutSignal(5000); // 5 second timeout
+ * await fetch(url, { signal });
+ * ```
+ */
+export function createTimeoutSignal(ms: number): AbortSignal {
+	return AbortSignal.timeout(ms);
+}
+
+/**
+ * Wraps a promise to reject if the signal is aborted.
+ * Useful for making non-abortable promises respect an AbortSignal.
+ *
+ * @param promise - Promise to wrap
+ * @param signal - AbortSignal to respect
+ * @returns Promise that rejects with AbortError if signal aborts
+ *
+ * @example
+ * ```ts
+ * // Make a non-abortable operation respect abort signal
+ * const result = await withAbortSignal(
+ *   someNonAbortableOperation(),
+ *   signal
+ * );
+ * ```
+ */
+export async function withAbortSignal<T>(promise: Promise<T>, signal?: AbortSignal): Promise<T> {
+	if (!signal) return promise;
+
+	throwIfAborted(signal);
+
+	return new Promise<T>((resolve, reject) => {
+		const abortHandler = () => {
+			reject(new DOMException('Operation was aborted', ABORT_ERROR_NAME));
+		};
+
+		signal.addEventListener('abort', abortHandler, { once: true });
+
+		promise
+			.then((value) => {
+				signal.removeEventListener('abort', abortHandler);
+				resolve(value);
+			})
+			.catch((error) => {
+				signal.removeEventListener('abort', abortHandler);
+				reject(error);
+			});
+	});
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/agentic.ts b/backend/llama.cpp/tools/ui/src/lib/utils/agentic.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d19f03434e6bc3b49722dd865f04645abb4a4bfc
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/agentic.ts
@@ -0,0 +1,288 @@
+import { AgenticSectionType, ContinueIntentKind, MessageRole } from '$lib/enums';
+import { ATTACHMENT_SAVED_REGEX, NEWLINE_SEPARATOR } from '$lib/constants';
+import type { ApiChatCompletionToolCall } from '$lib/types/api';
+import type {
+	DatabaseMessage,
+	DatabaseMessageExtra,
+	DatabaseMessageExtraImageFile
+} from '$lib/types/database';
+import { AttachmentType } from '$lib/enums';
+
+/**
+ * Represents a parsed section of agentic content for display
+ */
+export interface AgenticSection {
+	type: AgenticSectionType;
+	content: string;
+	toolName?: string;
+	toolArgs?: string;
+	toolResult?: string;
+	toolResultExtras?: DatabaseMessageExtra[];
+	wasInterrupted?: boolean;
+}
+
+/**
+ * Represents a tool result line that may reference an image attachment
+ */
+export type ToolResultLine = {
+	text: string;
+	image?: DatabaseMessageExtraImageFile;
+};
+
+/**
+ * Derives display sections from a single assistant message and its direct tool results.
+ *
+ * @param message - The assistant message
+ * @param toolMessages - Tool result messages for this assistant's tool_calls
+ * @param streamingToolCalls - Partial tool calls during streaming (not yet persisted)
+ */
+function deriveSingleTurnSections(
+	message: DatabaseMessage,
+	toolMessages: DatabaseMessage[] = [],
+	streamingToolCalls: ApiChatCompletionToolCall[] = [],
+	isStreaming: boolean = false
+): AgenticSection[] {
+	const sections: AgenticSection[] = [];
+
+	// 1. Reasoning content (from dedicated field)
+	if (message.reasoningContent) {
+		const toolCalls = parseToolCalls(message.toolCalls);
+		const hasContentAfterReasoning =
+			!!message.content?.trim() || toolCalls.length > 0 || streamingToolCalls.length > 0;
+		const isPending = isStreaming && !hasContentAfterReasoning;
+		sections.push({
+			type: isPending ? AgenticSectionType.REASONING_PENDING : AgenticSectionType.REASONING,
+			content: message.reasoningContent,
+			wasInterrupted: !isStreaming && !hasContentAfterReasoning
+		});
+	}
+
+	// 2. Text content
+	if (message.content?.trim()) {
+		sections.push({
+			type: AgenticSectionType.TEXT,
+			content: message.content
+		});
+	}
+
+	// 3. Persisted tool calls (from message.toolCalls field)
+	const toolCalls = parseToolCalls(message.toolCalls);
+	for (const tc of toolCalls) {
+		const resultMsg = toolMessages.find((m) => m.toolCallId === tc.id);
+		// Only show as pending/loading if we're actively streaming; otherwise it's just a tool call without result
+		const type = resultMsg
+			? AgenticSectionType.TOOL_CALL
+			: isStreaming
+				? AgenticSectionType.TOOL_CALL_PENDING
+				: AgenticSectionType.TOOL_CALL;
+		sections.push({
+			type,
+			content: resultMsg?.content || '',
+			toolName: tc.function?.name,
+			toolArgs: tc.function?.arguments,
+			toolResult: resultMsg?.content,
+			toolResultExtras: resultMsg?.extra
+		});
+	}
+
+	// 4. Streaming tool calls (not yet persisted - currently being received)
+	for (const tc of streamingToolCalls) {
+		// Skip if already in persisted tool calls
+		if (tc.id && toolCalls.find((t) => t.id === tc.id)) continue;
+		sections.push({
+			type: AgenticSectionType.TOOL_CALL_STREAMING,
+			content: '',
+			toolName: tc.function?.name,
+			toolArgs: tc.function?.arguments
+		});
+	}
+
+	return sections;
+}
+
+/**
+ * Derives display sections from structured message data.
+ *
+ * Handles both single-turn (one assistant + its tool results) and multi-turn
+ * agentic sessions (multiple assistant + tool messages grouped together).
+ *
+ * When `toolMessages` contains continuation assistant messages (from multi-turn
+ * agentic flows), they are processed in order to produce sections across all turns.
+ *
+ * @param message - The first/anchor assistant message
+ * @param toolMessages - Tool result messages and continuation assistant messages
+ * @param streamingToolCalls - Partial tool calls during streaming (not yet persisted)
+ * @param isStreaming - Whether the message is currently being streamed
+ */
+export function deriveAgenticSections(
+	message: DatabaseMessage,
+	toolMessages: DatabaseMessage[] = [],
+	streamingToolCalls: ApiChatCompletionToolCall[] = [],
+	isStreaming: boolean = false
+): AgenticSection[] {
+	const hasAssistantContinuations = toolMessages.some((m) => m.role === MessageRole.ASSISTANT);
+
+	if (!hasAssistantContinuations) {
+		return deriveSingleTurnSections(message, toolMessages, streamingToolCalls, isStreaming);
+	}
+
+	const sections: AgenticSection[] = [];
+
+	const firstTurnToolMsgs = collectToolMessages(toolMessages, 0);
+	sections.push(...deriveSingleTurnSections(message, firstTurnToolMsgs));
+
+	let i = firstTurnToolMsgs.length;
+
+	while (i < toolMessages.length) {
+		const msg = toolMessages[i];
+
+		if (msg.role === MessageRole.ASSISTANT) {
+			const turnToolMsgs = collectToolMessages(toolMessages, i + 1);
+			const isLastTurn = i + 1 + turnToolMsgs.length >= toolMessages.length;
+
+			sections.push(
+				...deriveSingleTurnSections(
+					msg,
+					turnToolMsgs,
+					isLastTurn ? streamingToolCalls : [],
+					isLastTurn && isStreaming
+				)
+			);
+
+			i += 1 + turnToolMsgs.length;
+		} else {
+			i++;
+		}
+	}
+
+	return sections;
+}
+
+/**
+ * Collect consecutive tool messages starting at `startIndex`.
+ */
+function collectToolMessages(messages: DatabaseMessage[], startIndex: number): DatabaseMessage[] {
+	const result: DatabaseMessage[] = [];
+
+	for (let i = startIndex; i < messages.length; i++) {
+		if (messages[i].role === MessageRole.TOOL) {
+			result.push(messages[i]);
+		} else {
+			break;
+		}
+	}
+
+	return result;
+}
+
+/**
+ * Parse tool result text into lines, matching image attachments by name.
+ */
+export function parseToolResultWithImages(
+	toolResult: string,
+	extras?: DatabaseMessageExtra[]
+): 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 };
+	});
+}
+
+/**
+ * Safely parse the toolCalls JSON string from a DatabaseMessage.
+ */
+function parseToolCalls(toolCallsJson?: string): ApiChatCompletionToolCall[] {
+	if (!toolCallsJson) return [];
+
+	try {
+		const parsed = JSON.parse(toolCallsJson);
+
+		return Array.isArray(parsed) ? parsed : [];
+	} catch {
+		return [];
+	}
+}
+
+/**
+ * Check if a message has agentic content (tool calls or is part of an agentic flow).
+ */
+export function hasAgenticContent(
+	message: DatabaseMessage,
+	toolMessages: DatabaseMessage[] = []
+): boolean {
+	if (message.toolCalls) {
+		const tc = parseToolCalls(message.toolCalls);
+
+		if (tc.length > 0) return true;
+	}
+
+	return toolMessages.length > 0;
+}
+
+/**
+ * Classification of how a Continue click on an assistant message should resume
+ * generation. The caller dispatches the resume path based on this value.
+ *
+ *   append_text  -> the target is a plain text turn, resume with
+ *                   continue_final_message and rehydrate the persisted
+ *                   tool_calls and attachments through the regular DB to API
+ *                   message converter.
+ *   rerun_turn   -> the target carries tool_calls that were never resolved by
+ *                   tool result messages. The agentic stream was cut mid turn,
+ *                   so we drop the target and rerun the loop from the previous
+ *                   history. truncateAfter is the last kept index, inclusive.
+ *   next_turn    -> the target's tool_calls were already resolved by trailing
+ *                   tool results. Hand the history up to and including the
+ *                   last consecutive tool result back to the agentic loop so it
+ *                   starts the next turn naturally. truncateAfter points at
+ *                   that last tool result.
+ */
+export type ContinueIntent =
+	| { kind: ContinueIntentKind.APPEND_TEXT }
+	| { kind: ContinueIntentKind.RERUN_TURN; truncateAfter: number }
+	| { kind: ContinueIntentKind.NEXT_TURN; truncateAfter: number };
+
+/**
+ * Decide how a Continue click on messages[idx] should resume generation.
+ * Pure function over the persisted history snapshot.
+ */
+export function classifyContinueIntent(messages: DatabaseMessage[], idx: number): ContinueIntent {
+	const target = messages[idx];
+
+	// Defensive default: callers already filter by role, stay deterministic.
+	if (!target || target.role !== MessageRole.ASSISTANT) {
+		return { kind: ContinueIntentKind.APPEND_TEXT };
+	}
+
+	const hasToolCalls = parseToolCalls(target.toolCalls).length > 0;
+	if (!hasToolCalls) {
+		return { kind: ContinueIntentKind.APPEND_TEXT };
+	}
+
+	// Walk consecutive trailing tool results. The agentic loop only emits tool
+	// messages directly after the assistant turn that owns them, so the first
+	// non tool message marks the boundary.
+	let lastTrailingTool = idx;
+	for (let i = idx + 1; i < messages.length; i++) {
+		if (messages[i].role === MessageRole.TOOL) {
+			lastTrailingTool = i;
+		} else {
+			break;
+		}
+	}
+
+	if (lastTrailingTool > idx) {
+		return { kind: ContinueIntentKind.NEXT_TURN, truncateAfter: lastTrailingTool };
+	}
+
+	return { kind: ContinueIntentKind.RERUN_TURN, truncateAfter: idx - 1 };
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/api-fetch.ts b/backend/llama.cpp/tools/ui/src/lib/utils/api-fetch.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e9d90625830fcfd240fa5463e2e5fcc994eecaa1
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/api-fetch.ts
@@ -0,0 +1,216 @@
+import { base } from '$app/paths';
+import { getJsonHeaders, getAuthHeaders } from './api-headers';
+import { UrlProtocol } from '$lib/enums';
+import { ERROR_MESSAGES, HTTP_CODE_TO_STRING } from '$lib/constants/error';
+
+/**
+ * API Fetch Utilities
+ *
+ * Provides common fetch patterns used across services:
+ * - Automatic JSON headers
+ * - Error handling with proper error messages
+ * - Base path resolution
+ */
+
+/**
+ * Error thrown when an API request fails, carrying the HTTP status code
+ * so callers can distinguish e.g. a 503 "still loading" response from a
+ * genuine failure.
+ */
+export class ApiError extends Error {
+	status: number;
+
+	constructor(message: string, status: number) {
+		super(message);
+		this.name = 'ApiError';
+		this.status = status;
+	}
+}
+
+export interface ApiFetchOptions extends Omit<RequestInit, 'headers'> {
+	/**
+	 * Use auth-only headers (no Content-Type).
+	 * Default: false (uses JSON headers with Content-Type: application/json)
+	 */
+	authOnly?: boolean;
+	/**
+	 * Additional headers to merge with default headers.
+	 */
+	headers?: Record<string, string>;
+}
+
+/**
+ * Fetch JSON data from an API endpoint with standard headers and error handling.
+ *
+ * @param path - API path (will be prefixed with base path)
+ * @param options - Fetch options with additional authOnly flag
+ * @returns Parsed JSON response
+ * @throws Error with formatted message on failure
+ *
+ * @example
+ * ```typescript
+ * // GET request
+ * const models = await apiFetch<ApiModelListResponse>('/v1/models');
+ *
+ * // POST request
+ * const result = await apiFetch<ApiResponse>('/models/load', {
+ *   method: 'POST',
+ *   body: JSON.stringify({ model: 'gpt-4' })
+ * });
+ * ```
+ */
+export async function apiFetch<T>(path: string, options: ApiFetchOptions = {}): Promise<T> {
+	const { authOnly = false, headers: customHeaders, ...fetchOptions } = options;
+
+	const baseHeaders = authOnly ? getAuthHeaders() : getJsonHeaders();
+	const headers = { ...baseHeaders, ...customHeaders };
+
+	const url =
+		path.startsWith(UrlProtocol.HTTP) || path.startsWith(UrlProtocol.HTTPS)
+			? path
+			: `${base}${path}`;
+
+	let response;
+	try {
+		response = await fetch(url, {
+			...fetchOptions,
+			headers
+		});
+	} catch (e) {
+		throw new Error(beautifyNetworkError(e));
+	}
+
+	if (!response.ok) {
+		const errorMessage = await parseErrorMessage(response);
+		throw new ApiError(errorMessage, response.status);
+	}
+
+	return response.json() as Promise<T>;
+}
+
+/**
+ * Fetch with URL constructed from base URL and query parameters.
+ *
+ * @param basePath - Base API path
+ * @param params - Query parameters to append
+ * @param options - Fetch options
+ * @returns Parsed JSON response
+ *
+ * @example
+ * ```typescript
+ * const props = await apiFetchWithParams<ApiProps>('./props', {
+ *   model: 'gpt-4',
+ *   autoload: 'false'
+ * });
+ * ```
+ */
+export async function apiFetchWithParams<T>(
+	basePath: string,
+	params: Record<string, string>,
+	options: ApiFetchOptions = {}
+): Promise<T> {
+	const url = new URL(basePath, window.location.href);
+
+	for (const [key, value] of Object.entries(params)) {
+		if (value !== undefined && value !== null) {
+			url.searchParams.set(key, value);
+		}
+	}
+
+	const { authOnly = false, headers: customHeaders, ...fetchOptions } = options;
+
+	const baseHeaders = authOnly ? getAuthHeaders() : getJsonHeaders();
+	const headers = { ...baseHeaders, ...customHeaders };
+
+	let response;
+	try {
+		response = await fetch(url.toString(), {
+			...fetchOptions,
+			headers
+		});
+	} catch (e) {
+		throw new Error(beautifyNetworkError(e));
+	}
+
+	if (!response.ok) {
+		const errorMessage = await parseErrorMessage(response);
+		throw new ApiError(errorMessage, response.status);
+	}
+
+	return response.json() as Promise<T>;
+}
+
+/**
+ * POST JSON data to an API endpoint.
+ *
+ * @param path - API path
+ * @param body - Request body (will be JSON stringified)
+ * @param options - Additional fetch options
+ * @returns Parsed JSON response
+ */
+export async function apiPost<T, B = unknown>(
+	path: string,
+	body: B,
+	options: ApiFetchOptions = {}
+): Promise<T> {
+	return apiFetch<T>(path, {
+		method: 'POST',
+		body: JSON.stringify(body),
+		...options
+	});
+}
+
+/**
+ * Parse error message from a failed response.
+ * Tries to extract error message from JSON body, falls back to status text.
+ */
+async function parseErrorMessage(response: Response): Promise<string> {
+	try {
+		const errorData = await response.json();
+		if (errorData?.error?.message) {
+			return errorData.error.message;
+		}
+		if (errorData?.error && typeof errorData.error === 'string') {
+			return errorData.error;
+		}
+		if (errorData?.message) {
+			return errorData.message;
+		}
+	} catch {
+		// JSON parsing failed, use status text
+	}
+
+	const httpErrorStr = HTTP_CODE_TO_STRING[response.status];
+	if (httpErrorStr) {
+		return httpErrorStr;
+	}
+
+	return `${ERROR_MESSAGES.HTTP.GENERIC}: ${response.status} ${response.statusText}`;
+}
+
+/**
+ * Converts a network issue into a human-readable message.
+ * @param throwable - The throwable raised during fetch operation
+ * @returns Error in an human-readable format
+ */
+function beautifyNetworkError(throwable: unknown): string {
+	let message;
+	if (throwable instanceof Error) {
+		message = throwable.message;
+		if (throwable.name === 'TypeError' && message.includes('fetch')) {
+			return ERROR_MESSAGES.NETWORK.UNREACHABLE;
+		}
+	} else {
+		message = String(throwable);
+	}
+
+	if (message.includes('ECONNREFUSED')) {
+		return ERROR_MESSAGES.NETWORK.REFUSED;
+	} else if (message.includes('ENOTFOUND')) {
+		return ERROR_MESSAGES.NETWORK.NXDOMAIN;
+	} else if (message.includes('ETIMEDOUT')) {
+		return ERROR_MESSAGES.NETWORK.TIMEOUT;
+	}
+
+	return `${ERROR_MESSAGES.NETWORK.GENERIC} (${message})`;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/api-headers.ts b/backend/llama.cpp/tools/ui/src/lib/utils/api-headers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a2b70d492ab2c2e12ca67bd934b971a49bdedf9d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/api-headers.ts
@@ -0,0 +1,76 @@
+import { config } from '$lib/stores/settings.svelte';
+import { CORS_PROXY_HEADER_PREFIX, REDACTED_HEADERS } from '$lib/constants';
+import { redactValue } from './redact';
+
+/**
+ * Get authorization headers for API requests
+ * Includes Bearer token if API key is configured
+ */
+export function getAuthHeaders(): Record<string, string> {
+	const currentConfig = config();
+	const apiKey = currentConfig.apiKey?.toString().trim();
+
+	return apiKey ? { Authorization: `Bearer ${apiKey}` } : {};
+}
+
+/**
+ * Get standard JSON headers with optional authorization
+ */
+export function getJsonHeaders(): Record<string, string> {
+	return {
+		'Content-Type': 'application/json',
+		...getAuthHeaders()
+	};
+}
+
+/**
+ * Sanitize HTTP headers by redacting sensitive values.
+ * Known sensitive headers (from REDACTED_HEADERS) and any extra headers
+ * specified by the caller are fully redacted. Headers listed in
+ * `partialRedactHeaders` are partially redacted, showing only the
+ * specified number of trailing characters.
+ *
+ * @param headers - Headers to sanitize
+ * @param extraRedactedHeaders - Additional header names to fully redact
+ * @param partialRedactHeaders - Map of header name -> number of trailing chars to keep visible
+ * @returns Object with header names as keys and (possibly redacted) values
+ */
+export function sanitizeHeaders(
+	headers?: HeadersInit,
+	extraRedactedHeaders?: Iterable<string>,
+	partialRedactHeaders?: Map<string, number>
+): Record<string, string> {
+	if (!headers) {
+		return {};
+	}
+
+	const normalized = new Headers(headers);
+	const sanitized: Record<string, string> = {};
+	const redactedHeaders = new Set(
+		Array.from(extraRedactedHeaders ?? [], (header) => header.toLowerCase())
+	);
+
+	for (const [key, value] of normalized.entries()) {
+		const normalizedKey = key.toLowerCase();
+		const unproxiedKey = normalizedKey.startsWith(CORS_PROXY_HEADER_PREFIX)
+			? normalizedKey.slice(CORS_PROXY_HEADER_PREFIX.length)
+			: normalizedKey;
+		const partialChars =
+			partialRedactHeaders?.get(normalizedKey) ?? partialRedactHeaders?.get(unproxiedKey);
+
+		if (partialChars !== undefined) {
+			sanitized[key] = redactValue(value, partialChars);
+		} else if (
+			REDACTED_HEADERS.has(normalizedKey) ||
+			REDACTED_HEADERS.has(unproxiedKey) ||
+			redactedHeaders.has(normalizedKey) ||
+			redactedHeaders.has(unproxiedKey)
+		) {
+			sanitized[key] = redactValue(value);
+		} else {
+			sanitized[key] = value;
+		}
+	}
+
+	return sanitized;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/api-key-validation.ts b/backend/llama.cpp/tools/ui/src/lib/utils/api-key-validation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dbbf9a09b2b243adad44ac01b42db5c62b25dd67
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/api-key-validation.ts
@@ -0,0 +1,49 @@
+import { base } from '$app/paths';
+import { error } from '@sveltejs/kit';
+import { browser } from '$app/environment';
+import { config } from '$lib/stores/settings.svelte';
+
+/**
+ * Validates API key by making a request to the server props endpoint
+ * Throws SvelteKit errors for authentication failures or server issues
+ */
+export async function validateApiKey(fetch: typeof globalThis.fetch): Promise<void> {
+	if (!browser) {
+		return;
+	}
+
+	const apiKey = config().apiKey;
+
+	// No API key configured — server doesn't require auth, skip the request entirely.
+	// The /props endpoint is only protected when the server has API keys configured,
+	// and in that case the client always has one set (from settings).
+	if (!apiKey) {
+		return;
+	}
+
+	try {
+		const headers: Record<string, string> = {
+			'Content-Type': 'application/json',
+			Authorization: `Bearer ${apiKey}`
+		};
+
+		const response = await fetch(`${base}/props`, { headers });
+
+		if (!response.ok) {
+			if (response.status === 401 || response.status === 403) {
+				throw error(401, 'Access denied');
+			}
+
+			console.warn(`Server responded with status ${response.status} during API key validation`);
+			return;
+		}
+	} catch (err) {
+		// If it's already a SvelteKit error, re-throw it
+		if (err && typeof err === 'object' && 'status' in err) {
+			throw err;
+		}
+
+		// Network or other errors
+		console.warn('Cannot connect to server for API key validation:', err);
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/attachment-display.ts b/backend/llama.cpp/tools/ui/src/lib/utils/attachment-display.ts
new file mode 100644
index 0000000000000000000000000000000000000000..30c7043bf0e2f24118cb27cb79ff4653993d7b30
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/attachment-display.ts
@@ -0,0 +1,85 @@
+import { AttachmentType, FileTypeCategory, SpecialFileType } from '$lib/enums';
+import { getFileTypeCategory, getFileTypeCategoryByExtension, isImageFile } from '$lib/utils';
+import type {
+	AttachmentDisplayItemsOptions,
+	ChatAttachmentDisplayItem,
+	ChatUploadedFile
+} from '$lib/types';
+
+/**
+ * Check if a display item represents an MCP prompt
+ * (either from attachment type or uploaded file with mcpPrompt metadata)
+ */
+export function isMcpPrompt(item: ChatAttachmentDisplayItem): boolean {
+	if (item.attachment?.type === AttachmentType.MCP_PROMPT) {
+		return true;
+	}
+	if (item.uploadedFile?.type === SpecialFileType.MCP_PROMPT && item.uploadedFile.mcpPrompt) {
+		return true;
+	}
+	return false;
+}
+
+/**
+ * Check if a display item represents an MCP resource
+ */
+export function isMcpResource(item: ChatAttachmentDisplayItem): boolean {
+	return item.attachment?.type === AttachmentType.MCP_RESOURCE;
+}
+
+/**
+ * Gets the file type category from an uploaded file, checking both MIME type and extension
+ */
+function getUploadedFileCategory(file: ChatUploadedFile): FileTypeCategory | null {
+	const categoryByMime = getFileTypeCategory(file.type);
+
+	if (categoryByMime) {
+		return categoryByMime;
+	}
+
+	return getFileTypeCategoryByExtension(file.name);
+}
+
+/**
+ * Creates a unified list of display items from uploaded files and stored attachments.
+ * Items are returned in reverse order (newest first).
+ */
+export function getAttachmentDisplayItems(
+	options: AttachmentDisplayItemsOptions
+): ChatAttachmentDisplayItem[] {
+	const { uploadedFiles = [], attachments = [] } = options;
+	const items: ChatAttachmentDisplayItem[] = [];
+
+	// Add uploaded files (ChatForm)
+	for (const file of uploadedFiles) {
+		items.push({
+			id: file.id,
+			name: file.name,
+			size: file.size,
+			preview: file.preview,
+			isImage: getUploadedFileCategory(file) === FileTypeCategory.IMAGE,
+			isLoading: file.isLoading,
+			loadError: file.loadError,
+			uploadedFile: file,
+			textContent: file.textContent
+		});
+	}
+
+	// Add stored attachments (ChatMessage)
+	for (const [index, attachment] of attachments.entries()) {
+		const isImage = isImageFile(attachment);
+
+		items.push({
+			id: `attachment-${index}`,
+			name: attachment.name,
+			size: 'size' in attachment ? attachment.size : undefined,
+			preview: isImage && 'base64Url' in attachment ? attachment.base64Url : undefined,
+			isImage,
+			attachment,
+			attachmentIndex: index,
+			textContent: 'content' in attachment ? attachment.content : undefined
+		});
+	}
+
+	return items.reverse();
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/attachment-type.ts b/backend/llama.cpp/tools/ui/src/lib/utils/attachment-type.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d595afa6b7f489fe3ad2a022983f626184ce6356
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/attachment-type.ts
@@ -0,0 +1,126 @@
+import { AttachmentType, FileTypeCategory } from '$lib/enums';
+import { getFileTypeCategory, getFileTypeCategoryByExtension } from '$lib/utils';
+
+/**
+ * Gets the file type category from an uploaded file, checking both MIME type and extension
+ * @param uploadedFile - The uploaded file to check
+ * @returns The file type category or null if not recognized
+ */
+function getUploadedFileCategory(uploadedFile: ChatUploadedFile): FileTypeCategory | null {
+	// First try MIME type
+	const categoryByMime = getFileTypeCategory(uploadedFile.type);
+
+	if (categoryByMime) {
+		return categoryByMime;
+	}
+
+	// Fallback to extension (browsers don't always provide correct MIME types)
+	return getFileTypeCategoryByExtension(uploadedFile.name);
+}
+
+/**
+ * Determines if an attachment or uploaded file is a text file
+ * @param uploadedFile - Optional uploaded file
+ * @param attachment - Optional database attachment
+ * @returns true if the file is a text file
+ */
+export function isTextFile(
+	attachment?: DatabaseMessageExtra,
+	uploadedFile?: ChatUploadedFile
+): boolean {
+	if (uploadedFile) {
+		return getUploadedFileCategory(uploadedFile) === FileTypeCategory.TEXT;
+	}
+
+	if (attachment) {
+		return (
+			attachment.type === AttachmentType.TEXT || attachment.type === AttachmentType.LEGACY_CONTEXT
+		);
+	}
+
+	return false;
+}
+
+/**
+ * Determines if an attachment or uploaded file is an image
+ * @param uploadedFile - Optional uploaded file
+ * @param attachment - Optional database attachment
+ * @returns true if the file is an image
+ */
+export function isImageFile(
+	attachment?: DatabaseMessageExtra,
+	uploadedFile?: ChatUploadedFile
+): boolean {
+	if (uploadedFile) {
+		return getUploadedFileCategory(uploadedFile) === FileTypeCategory.IMAGE;
+	}
+
+	if (attachment) {
+		return attachment.type === AttachmentType.IMAGE;
+	}
+
+	return false;
+}
+
+/**
+ * Determines if an attachment or uploaded file is a PDF
+ * @param uploadedFile - Optional uploaded file
+ * @param attachment - Optional database attachment
+ * @returns true if the file is a PDF
+ */
+export function isPdfFile(
+	attachment?: DatabaseMessageExtra,
+	uploadedFile?: ChatUploadedFile
+): boolean {
+	if (uploadedFile) {
+		return getUploadedFileCategory(uploadedFile) === FileTypeCategory.PDF;
+	}
+
+	if (attachment) {
+		return attachment.type === AttachmentType.PDF;
+	}
+
+	return false;
+}
+
+/**
+ * Determines if an attachment or uploaded file is an audio file
+ * @param uploadedFile - Optional uploaded file
+ * @param attachment - Optional database attachment
+ * @returns true if the file is an audio file
+ */
+export function isAudioFile(
+	attachment?: DatabaseMessageExtra,
+	uploadedFile?: ChatUploadedFile
+): boolean {
+	if (uploadedFile) {
+		return getUploadedFileCategory(uploadedFile) === FileTypeCategory.AUDIO;
+	}
+
+	if (attachment) {
+		return attachment.type === AttachmentType.AUDIO;
+	}
+
+	return false;
+}
+
+/**
+ * Determines if an attachment or uploaded file is a video file
+ * @param uploadedFile - Optional uploaded file
+ * @param attachment - Optional database attachment
+ * @returns true if the file is a video file
+ */
+export function isVideoFile(
+	attachment?: DatabaseMessageExtra,
+	uploadedFile?: ChatUploadedFile
+): boolean {
+	if (uploadedFile) {
+		return getUploadedFileCategory(uploadedFile) === FileTypeCategory.VIDEO;
+	}
+
+	if (attachment) {
+		return attachment.type === AttachmentType.VIDEO;
+	}
+
+	return false;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/audio-recording.ts b/backend/llama.cpp/tools/ui/src/lib/utils/audio-recording.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ab207b7a44d2516ca246e3346ee310659414eabb
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/audio-recording.ts
@@ -0,0 +1,257 @@
+import { MimeTypeAudio } from '$lib/enums';
+
+/**
+ * AudioRecorder - Browser-based audio recording with MediaRecorder API
+ *
+ * This class provides a complete audio recording solution using the browser's MediaRecorder API.
+ * It handles microphone access, recording state management, and audio format optimization.
+ *
+ * **Features:**
+ * - Automatic microphone permission handling
+ * - Audio enhancement (echo cancellation, noise suppression, auto gain)
+ * - Multiple format support with fallback (WAV, WebM, MP4, AAC)
+ * - Real-time recording state tracking
+ * - Proper cleanup and resource management
+ */
+export class AudioRecorder {
+	private mediaRecorder: MediaRecorder | null = null;
+	private audioChunks: Blob[] = [];
+	private stream: MediaStream | null = null;
+	private recordingState: boolean = false;
+
+	async startRecording(): Promise<void> {
+		try {
+			this.stream = await navigator.mediaDevices.getUserMedia({
+				audio: {
+					echoCancellation: true,
+					noiseSuppression: true,
+					autoGainControl: true
+				}
+			});
+
+			this.initializeRecorder(this.stream);
+
+			this.audioChunks = [];
+			// Start recording with a small timeslice to ensure we get data
+			this.mediaRecorder!.start(100);
+			this.recordingState = true;
+		} catch (error) {
+			console.error('Failed to start recording:', error);
+			throw new Error('Failed to access microphone. Please check permissions.');
+		}
+	}
+
+	async stopRecording(): Promise<Blob> {
+		return new Promise((resolve, reject) => {
+			const recorder = this.mediaRecorder;
+			const chunks = this.audioChunks;
+			const stream = this.stream;
+
+			if (!recorder || recorder.state === 'inactive') {
+				reject(new Error('No active recording to stop'));
+				return;
+			}
+
+			// Detach instance state right away so a new startRecording can take over without race
+			this.mediaRecorder = null;
+			this.audioChunks = [];
+			this.stream = null;
+			this.recordingState = false;
+
+			recorder.onstop = () => {
+				const audioBlob = new Blob(chunks, {
+					type: recorder.mimeType || MimeTypeAudio.WAV
+				});
+
+				if (stream) {
+					for (const track of stream.getTracks()) {
+						track.stop();
+					}
+				}
+
+				resolve(audioBlob);
+			};
+
+			recorder.onerror = (event) => {
+				console.error('Recording error:', event);
+
+				if (stream) {
+					for (const track of stream.getTracks()) {
+						track.stop();
+					}
+				}
+
+				reject(new Error('Recording failed'));
+			};
+
+			recorder.stop();
+		});
+	}
+
+	isRecording(): boolean {
+		return this.recordingState;
+	}
+
+	cancelRecording(): void {
+		const recorder = this.mediaRecorder;
+		const stream = this.stream;
+
+		this.mediaRecorder = null;
+		this.audioChunks = [];
+		this.stream = null;
+		this.recordingState = false;
+
+		if (recorder && recorder.state !== 'inactive') {
+			// Drop the original handlers so the pending stop event does not touch the instance
+			recorder.onstop = null;
+			recorder.onerror = null;
+			recorder.stop();
+		}
+
+		if (stream) {
+			for (const track of stream.getTracks()) {
+				track.stop();
+			}
+		}
+	}
+
+	private initializeRecorder(stream: MediaStream): void {
+		const options: MediaRecorderOptions = {};
+
+		if (MediaRecorder.isTypeSupported(MimeTypeAudio.WAV)) {
+			options.mimeType = MimeTypeAudio.WAV;
+		} else if (MediaRecorder.isTypeSupported(MimeTypeAudio.WEBM_OPUS)) {
+			options.mimeType = MimeTypeAudio.WEBM_OPUS;
+		} else if (MediaRecorder.isTypeSupported(MimeTypeAudio.WEBM)) {
+			options.mimeType = MimeTypeAudio.WEBM;
+		} else if (MediaRecorder.isTypeSupported(MimeTypeAudio.MP4)) {
+			options.mimeType = MimeTypeAudio.MP4;
+		} else {
+			console.warn('No preferred audio format supported, using default');
+		}
+
+		this.mediaRecorder = new MediaRecorder(stream, options);
+
+		this.mediaRecorder.ondataavailable = (event) => {
+			if (event.data.size > 0) {
+				this.audioChunks.push(event.data);
+			}
+		};
+
+		this.mediaRecorder.onstop = () => {
+			this.recordingState = false;
+		};
+
+		this.mediaRecorder.onerror = (event) => {
+			console.error('MediaRecorder error:', event);
+			this.recordingState = false;
+		};
+	}
+}
+
+export async function convertToWav(audioBlob: Blob): Promise<Blob> {
+	try {
+		if (audioBlob.type.includes('wav')) {
+			return audioBlob;
+		}
+
+		const arrayBuffer = await audioBlob.arrayBuffer();
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+
+		try {
+			const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+			return audioBufferToWav(audioBuffer);
+		} finally {
+			audioContext.close();
+		}
+	} catch (error) {
+		console.error('Failed to convert audio to WAV:', error);
+		return audioBlob;
+	}
+}
+
+function audioBufferToWav(buffer: AudioBuffer): Blob {
+	const length = buffer.length;
+	const numberOfChannels = buffer.numberOfChannels;
+	const sampleRate = buffer.sampleRate;
+	const bytesPerSample = 2; // 16-bit
+	const blockAlign = numberOfChannels * bytesPerSample;
+	const byteRate = sampleRate * blockAlign;
+	const dataSize = length * blockAlign;
+	const bufferSize = 44 + dataSize;
+
+	const arrayBuffer = new ArrayBuffer(bufferSize);
+	const view = new DataView(arrayBuffer);
+
+	const writeString = (offset: number, string: string) => {
+		for (let i = 0; i < string.length; i++) {
+			view.setUint8(offset + i, string.charCodeAt(i));
+		}
+	};
+
+	writeString(0, 'RIFF'); // ChunkID
+	view.setUint32(4, bufferSize - 8, true); // ChunkSize
+	writeString(8, 'WAVE'); // Format
+	writeString(12, 'fmt '); // Subchunk1ID
+	view.setUint32(16, 16, true); // Subchunk1Size
+	view.setUint16(20, 1, true); // AudioFormat (PCM)
+	view.setUint16(22, numberOfChannels, true); // NumChannels
+	view.setUint32(24, sampleRate, true); // SampleRate
+	view.setUint32(28, byteRate, true); // ByteRate
+	view.setUint16(32, blockAlign, true); // BlockAlign
+	view.setUint16(34, 16, true); // BitsPerSample
+	writeString(36, 'data'); // Subchunk2ID
+	view.setUint32(40, dataSize, true); // Subchunk2Size
+
+	// Cache channel arrays, write PCM via Int16Array (native little-endian, matches WAV)
+	const channels: Float32Array[] = new Array(numberOfChannels);
+	for (let c = 0; c < numberOfChannels; c++) {
+		channels[c] = buffer.getChannelData(c);
+	}
+
+	const pcm = new Int16Array(arrayBuffer, 44, length * numberOfChannels);
+	let p = 0;
+	for (let i = 0; i < length; i++) {
+		for (let c = 0; c < numberOfChannels; c++) {
+			let s = channels[c][i];
+			if (s > 1) s = 1;
+			else if (s < -1) s = -1;
+			pcm[p++] = s * 0x7fff;
+		}
+	}
+
+	return new Blob([arrayBuffer], { type: MimeTypeAudio.WAV });
+}
+
+/**
+ * Create a File object from audio blob with timestamp-based naming
+ * @param audioBlob - The audio blob to wrap
+ * @param filename - Optional custom filename
+ * @returns File object with appropriate name and metadata
+ */
+export function createAudioFile(audioBlob: Blob, filename?: string): File {
+	const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+	const extension = audioBlob.type.includes('wav') ? 'wav' : 'mp3';
+	const defaultFilename = `recording-${timestamp}.${extension}`;
+
+	return new File([audioBlob], filename || defaultFilename, {
+		type: audioBlob.type,
+		lastModified: Date.now()
+	});
+}
+
+/**
+ * Check if audio recording is supported in the current browser
+ * @returns True if MediaRecorder and getUserMedia are available
+ */
+export function isAudioRecordingSupported(): boolean {
+	return !!(
+		typeof navigator !== 'undefined' &&
+		navigator.mediaDevices &&
+		typeof navigator.mediaDevices.getUserMedia === 'function' &&
+		typeof window !== 'undefined' &&
+		window.MediaRecorder
+	);
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/autoresize-textarea.ts b/backend/llama.cpp/tools/ui/src/lib/utils/autoresize-textarea.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cfee5ec1511543bcab7649b9b616b619b35e38a1
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/autoresize-textarea.ts
@@ -0,0 +1,10 @@
+/**
+ * Automatically resizes a textarea element to fit its content
+ * @param textareaElement - The textarea element to resize
+ */
+export default function autoResizeTextarea(textareaElement: HTMLTextAreaElement | null): void {
+	if (textareaElement) {
+		textareaElement.style.height = '1rem';
+		textareaElement.style.height = textareaElement.scrollHeight + 'px';
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/branching.ts b/backend/llama.cpp/tools/ui/src/lib/utils/branching.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6ff701318a11f4b83401fc2b238cd899146f5dd7
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/branching.ts
@@ -0,0 +1,236 @@
+/**
+ * Message branching utilities for conversation tree navigation.
+ *
+ * Conversation branching allows users to edit messages and create alternate paths
+ * while preserving the original conversation flow. Each message has parent/children
+ * relationships forming a tree structure.
+ *
+ * Example tree:
+ * root
+ *  ├── message 1 (user)
+ *  │      └── message 2 (assistant)
+ *  │             ├── message 3 (user)
+ *  │             └── message 6 (user) ← new branch
+ *  └── message 4 (user)
+ *        └── message 5 (assistant)
+ */
+
+import { MessageRole } from '$lib/enums';
+
+/**
+ * Finds a message by its ID in the given messages array.
+ */
+export function findMessageById(
+	messages: readonly DatabaseMessage[],
+	id: string | null | undefined
+): DatabaseMessage | undefined {
+	if (!id) return undefined;
+	return messages.find((m) => m.id === id);
+}
+
+/**
+ * Filters messages to get the conversation path from root to a specific leaf node.
+ * If the leafNodeId doesn't exist, returns the path with the latest timestamp.
+ *
+ * @param messages - All messages in the conversation
+ * @param leafNodeId - The target leaf node ID to trace back from
+ * @param includeRoot - Whether to include root messages in the result
+ * @returns Array of messages from root to leaf, sorted by timestamp
+ */
+export function filterByLeafNodeId(
+	messages: readonly DatabaseMessage[],
+	leafNodeId: string,
+	includeRoot: boolean = false
+): readonly DatabaseMessage[] {
+	const result: DatabaseMessage[] = [];
+	const nodeMap = new Map<string, DatabaseMessage>();
+
+	// Build node map for quick lookups
+	for (const msg of messages) {
+		nodeMap.set(msg.id, msg);
+	}
+
+	// Find the starting node (leaf node or latest if not found)
+	let startNode: DatabaseMessage | undefined = nodeMap.get(leafNodeId);
+	if (!startNode) {
+		// If leaf node not found, use the message with latest timestamp
+		let latestTime = -1;
+		for (const msg of messages) {
+			if (msg.timestamp > latestTime) {
+				startNode = msg;
+				latestTime = msg.timestamp;
+			}
+		}
+	}
+
+	// Traverse from leaf to root, collecting messages
+	let currentNode: DatabaseMessage | undefined = startNode;
+	while (currentNode) {
+		// Include message if it's not root, or if we want to include root
+		if (currentNode.type !== 'root' || includeRoot) {
+			result.push(currentNode);
+		}
+
+		// Stop traversal if parent is null (reached root)
+		if (currentNode.parent === null) {
+			break;
+		}
+		currentNode = nodeMap.get(currentNode.parent);
+	}
+
+	// Sort: system messages first, then by timestamp
+	result.sort((a, b) => {
+		if (a.role === MessageRole.SYSTEM && b.role !== MessageRole.SYSTEM) return -1;
+		if (a.role !== MessageRole.SYSTEM && b.role === MessageRole.SYSTEM) return 1;
+
+		return a.timestamp - b.timestamp;
+	});
+	return result;
+}
+
+/**
+ * Finds the leaf node (message with no children) for a given message branch.
+ * Traverses down the tree following the last child until reaching a leaf.
+ *
+ * @param nodeMap - Map of messages keyed by ID
+ * @param messageId - Starting message ID to find leaf for
+ * @returns The leaf node ID, or the original messageId if no children
+ */
+function findLeafNodeInMap(
+	nodeMap: ReadonlyMap<string, DatabaseMessage>,
+	messageId: string
+): string {
+	let currentNode: DatabaseMessage | undefined = nodeMap.get(messageId);
+	while (currentNode && currentNode.children.length > 0) {
+		// Follow the last child (most recent branch)
+		const lastChildId = currentNode.children[currentNode.children.length - 1];
+		currentNode = nodeMap.get(lastChildId);
+	}
+
+	return currentNode?.id ?? messageId;
+}
+
+/**
+ * Convenience wrapper around {@link findLeafNodeInMap} for callers that have a flat message array.
+ */
+export function findLeafNode(messages: readonly DatabaseMessage[], messageId: string): string {
+	const nodeMap = new Map(messages.map((msg) => [msg.id, msg] as const));
+	return findLeafNodeInMap(nodeMap, messageId);
+}
+
+/**
+ * Finds all descendant messages (children, grandchildren, etc.) of a given message.
+ * This is used for cascading deletion to remove all messages in a branch.
+ *
+ * @param messages - All messages in the conversation
+ * @param messageId - The root message ID to find descendants for
+ * @returns Array of all descendant message IDs
+ */
+export function findDescendantMessages(
+	messages: readonly DatabaseMessage[],
+	messageId: string
+): string[] {
+	const nodeMap = new Map<string, DatabaseMessage>();
+
+	// Build node map for quick lookups
+	for (const msg of messages) {
+		nodeMap.set(msg.id, msg);
+	}
+
+	const descendants: string[] = [];
+	const queue: string[] = [messageId];
+
+	while (queue.length > 0) {
+		const currentId = queue.shift()!;
+		const currentNode = nodeMap.get(currentId);
+
+		if (currentNode) {
+			// Add all children to the queue and descendants list
+			for (const childId of currentNode.children) {
+				descendants.push(childId);
+				queue.push(childId);
+			}
+		}
+	}
+
+	return descendants;
+}
+
+/**
+ * Gets sibling information for a message, including all sibling IDs and current position.
+ * Siblings are messages that share the same parent.
+ *
+ * @param nodeMap - Map of messages keyed by ID
+ * @param messageId - The message to get sibling info for
+ * @returns Sibling information including leaf node IDs for navigation
+ */
+export function getMessageSiblings(
+	nodeMap: ReadonlyMap<string, DatabaseMessage>,
+	messageId: string
+): ChatMessageSiblingInfo | null {
+	const message = nodeMap.get(messageId);
+	if (!message) {
+		return null;
+	}
+
+	// Handle null parent (root message) case
+	if (message.parent === null) {
+		// No parent means this is likely a root node with no siblings
+		return {
+			message,
+			siblingIds: [messageId],
+			currentIndex: 0,
+			totalSiblings: 1
+		};
+	}
+
+	const parentNode = nodeMap.get(message.parent);
+	if (!parentNode) {
+		// Parent not found - treat as single message
+		return {
+			message,
+			siblingIds: [messageId],
+			currentIndex: 0,
+			totalSiblings: 1
+		};
+	}
+
+	// Get all sibling IDs (including self)
+	const siblingIds = parentNode.children;
+
+	// Convert sibling message IDs to their corresponding leaf node IDs
+	// This allows navigation between different conversation branches
+	const siblingLeafIds = siblingIds.map((siblingId: string) =>
+		findLeafNodeInMap(nodeMap, siblingId)
+	);
+
+	// Find current message's position among siblings
+	const currentIndex = siblingIds.indexOf(messageId);
+
+	return {
+		message,
+		siblingIds: siblingLeafIds,
+		currentIndex,
+		totalSiblings: siblingIds.length
+	};
+}
+
+/**
+ * Builds sibling information for every message in a conversation.
+ *
+ * @param messages - All messages in the conversation
+ * @returns Map of message ID to its sibling information
+ */
+export function buildSiblingInfoMap(
+	messages: readonly DatabaseMessage[]
+): Map<string, ChatMessageSiblingInfo> {
+	const nodeMap = new Map(messages.map((msg) => [msg.id, msg] as const));
+	const siblingMap = new Map<string, ChatMessageSiblingInfo>();
+	for (const msg of messages) {
+		const info = getMessageSiblings(nodeMap, msg.id);
+		if (info) {
+			siblingMap.set(msg.id, info);
+		}
+	}
+	return siblingMap;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/browser-only.ts b/backend/llama.cpp/tools/ui/src/lib/utils/browser-only.ts
new file mode 100644
index 0000000000000000000000000000000000000000..27d2be4aaae45b346c9140475739f63fb0ab2b28
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/browser-only.ts
@@ -0,0 +1,35 @@
+/**
+ * Browser-only utility exports
+ *
+ * These utilities require browser APIs (DOM, Canvas, MediaRecorder, etc.)
+ * and cannot be imported during SSR. Import from '$lib/utils/browser-only'
+ * only in client-side code or components that are not server-rendered.
+ */
+
+// Audio utilities (MediaRecorder API)
+export {
+	AudioRecorder,
+	convertToWav,
+	createAudioFile,
+	isAudioRecordingSupported
+} from './audio-recording';
+
+// PDF processing utilities (pdfjs-dist with DOMMatrix)
+export {
+	convertPDFToText,
+	convertPDFToImage,
+	isPdfFile as isPdfFileFromFile,
+	isApplicationMimeType
+} from './pdf-processing';
+
+// File conversion utilities (depends on pdf-processing)
+export { parseFilesToMessageExtras } from './convert-files-to-extra';
+
+// File upload processing utilities (depends on pdf-processing, svg-to-png, webp-to-png)
+export { processFilesToChatUploaded } from './process-uploaded-files';
+
+// SVG utilities (Canvas/Image API)
+export { svgBase64UrlToPngDataURL, isSvgFile, isSvgMimeType } from './svg-to-png';
+
+// WebP utilities (Canvas/Image API)
+export { webpBase64UrlToPngDataURL, isWebpFile, isWebpMimeType } from './webp-to-png';
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/cache-ttl.ts b/backend/llama.cpp/tools/ui/src/lib/utils/cache-ttl.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4e414dd5457b56ed9ee16ab1fa55bdce49239931
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/cache-ttl.ts
@@ -0,0 +1,292 @@
+import { DEFAULT_CACHE_TTL_MS, DEFAULT_CACHE_MAX_ENTRIES } from '$lib/constants';
+
+/**
+ * TTL Cache - Time-To-Live cache implementation for memory optimization
+ *
+ * Provides automatic expiration of cached entries to prevent memory bloat
+ * in long-running sessions.
+ *
+ * @example
+ * ```ts
+ * const cache = new TTLCache<string, ApiData>({ ttlMs: 5 * 60 * 1000 }); // 5 minutes
+ * cache.set('key', data);
+ * const value = cache.get('key'); // null if expired
+ * ```
+ */
+
+export interface TTLCacheOptions {
+	/** Time-to-live in milliseconds. Default: 5 minutes */
+	ttlMs?: number;
+	/** Maximum number of entries. Oldest entries are evicted when exceeded. Default: 100 */
+	maxEntries?: number;
+	/** Callback when an entry expires or is evicted */
+	onEvict?: (key: string, value: unknown) => void;
+}
+
+interface CacheEntry<T> {
+	value: T;
+	expiresAt: number;
+	lastAccessed: number;
+}
+
+export class TTLCache<K extends string, V> {
+	private cache = new Map<K, CacheEntry<V>>();
+	private readonly ttlMs: number;
+	private readonly maxEntries: number;
+	private readonly onEvict?: (key: string, value: unknown) => void;
+
+	constructor(options: TTLCacheOptions = {}) {
+		this.ttlMs = options.ttlMs ?? DEFAULT_CACHE_TTL_MS;
+		this.maxEntries = options.maxEntries ?? DEFAULT_CACHE_MAX_ENTRIES;
+		this.onEvict = options.onEvict;
+	}
+
+	/**
+	 * Get a value from cache. Returns null if expired or not found.
+	 */
+	get(key: K): V | null {
+		const entry = this.cache.get(key);
+		if (!entry) return null;
+
+		if (Date.now() > entry.expiresAt) {
+			this.delete(key);
+			return null;
+		}
+
+		// Update last accessed time for LRU-like behavior
+		entry.lastAccessed = Date.now();
+		return entry.value;
+	}
+
+	/**
+	 * Set a value in cache with TTL.
+	 */
+	set(key: K, value: V, customTtlMs?: number): void {
+		// Evict oldest entries if at capacity
+		if (this.cache.size >= this.maxEntries && !this.cache.has(key)) {
+			this.evictOldest();
+		}
+
+		const ttl = customTtlMs ?? this.ttlMs;
+		const now = Date.now();
+
+		this.cache.set(key, {
+			value,
+			expiresAt: now + ttl,
+			lastAccessed: now
+		});
+	}
+
+	/**
+	 * Check if key exists and is not expired.
+	 */
+	has(key: K): boolean {
+		const entry = this.cache.get(key);
+		if (!entry) return false;
+
+		if (Date.now() > entry.expiresAt) {
+			this.delete(key);
+			return false;
+		}
+
+		return true;
+	}
+
+	/**
+	 * Delete a specific key from cache.
+	 */
+	delete(key: K): boolean {
+		const entry = this.cache.get(key);
+		if (entry && this.onEvict) {
+			this.onEvict(key, entry.value);
+		}
+		return this.cache.delete(key);
+	}
+
+	/**
+	 * Clear all entries from cache.
+	 */
+	clear(): void {
+		if (this.onEvict) {
+			for (const [key, entry] of this.cache) {
+				this.onEvict(key, entry.value);
+			}
+		}
+		this.cache.clear();
+	}
+
+	/**
+	 * Get the number of entries (including potentially expired ones).
+	 */
+	get size(): number {
+		return this.cache.size;
+	}
+
+	/**
+	 * Remove all expired entries from cache.
+	 * Call periodically for proactive cleanup.
+	 */
+	prune(): number {
+		const now = Date.now();
+		let pruned = 0;
+
+		for (const [key, entry] of this.cache) {
+			if (now > entry.expiresAt) {
+				this.delete(key);
+				pruned++;
+			}
+		}
+
+		return pruned;
+	}
+
+	/**
+	 * Get all valid (non-expired) keys.
+	 */
+	keys(): K[] {
+		const now = Date.now();
+		const validKeys: K[] = [];
+
+		for (const [key, entry] of this.cache) {
+			if (now <= entry.expiresAt) {
+				validKeys.push(key);
+			}
+		}
+
+		return validKeys;
+	}
+
+	/**
+	 * Evict the oldest (least recently accessed) entry.
+	 */
+	private evictOldest(): void {
+		let oldestKey: K | null = null;
+		let oldestTime = Infinity;
+
+		for (const [key, entry] of this.cache) {
+			if (entry.lastAccessed < oldestTime) {
+				oldestTime = entry.lastAccessed;
+				oldestKey = key;
+			}
+		}
+
+		if (oldestKey !== null) {
+			this.delete(oldestKey);
+		}
+	}
+
+	/**
+	 * Refresh TTL for an existing entry without changing the value.
+	 */
+	touch(key: K): boolean {
+		const entry = this.cache.get(key);
+		if (!entry) return false;
+
+		const now = Date.now();
+		if (now > entry.expiresAt) {
+			this.delete(key);
+			return false;
+		}
+
+		entry.expiresAt = now + this.ttlMs;
+		entry.lastAccessed = now;
+		return true;
+	}
+}
+
+/**
+ * Reactive TTL Map for Svelte stores
+ * Wraps SvelteMap with TTL functionality
+ */
+export class ReactiveTTLMap<K extends string, V> {
+	private entries = $state<Map<K, CacheEntry<V>>>(new Map());
+	private readonly ttlMs: number;
+	private readonly maxEntries: number;
+
+	constructor(options: TTLCacheOptions = {}) {
+		this.ttlMs = options.ttlMs ?? DEFAULT_CACHE_TTL_MS;
+		this.maxEntries = options.maxEntries ?? DEFAULT_CACHE_MAX_ENTRIES;
+	}
+
+	get(key: K): V | null {
+		const entry = this.entries.get(key);
+		if (!entry) return null;
+
+		if (Date.now() > entry.expiresAt) {
+			this.entries.delete(key);
+			return null;
+		}
+
+		entry.lastAccessed = Date.now();
+		return entry.value;
+	}
+
+	set(key: K, value: V, customTtlMs?: number): void {
+		if (this.entries.size >= this.maxEntries && !this.entries.has(key)) {
+			this.evictOldest();
+		}
+
+		const ttl = customTtlMs ?? this.ttlMs;
+		const now = Date.now();
+
+		this.entries.set(key, {
+			value,
+			expiresAt: now + ttl,
+			lastAccessed: now
+		});
+	}
+
+	has(key: K): boolean {
+		const entry = this.entries.get(key);
+		if (!entry) return false;
+
+		if (Date.now() > entry.expiresAt) {
+			this.entries.delete(key);
+			return false;
+		}
+
+		return true;
+	}
+
+	delete(key: K): boolean {
+		return this.entries.delete(key);
+	}
+
+	clear(): void {
+		this.entries.clear();
+	}
+
+	get size(): number {
+		return this.entries.size;
+	}
+
+	prune(): number {
+		const now = Date.now();
+		let pruned = 0;
+
+		for (const [key, entry] of this.entries) {
+			if (now > entry.expiresAt) {
+				this.entries.delete(key);
+				pruned++;
+			}
+		}
+
+		return pruned;
+	}
+
+	private evictOldest(): void {
+		let oldestKey: K | null = null;
+		let oldestTime = Infinity;
+
+		for (const [key, entry] of this.entries) {
+			if (entry.lastAccessed < oldestTime) {
+				oldestTime = entry.lastAccessed;
+				oldestKey = key;
+			}
+		}
+
+		if (oldestKey !== null) {
+			this.entries.delete(oldestKey);
+		}
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/cap-img-size.ts b/backend/llama.cpp/tools/ui/src/lib/utils/cap-img-size.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c5d9b730650b8e5e8815d1471bd56cde1a34209c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/cap-img-size.ts
@@ -0,0 +1,88 @@
+import { MEGAPIXELS_TO_PIXELS } from '$lib/constants/image-size';
+import { BASE64_IMAGE_URI_REGEX } from '$lib/constants/uri-template';
+import { getJpegOrientationFromDataURL, isJpegMimeType } from './jpeg-orientation';
+import { MimeTypeImage } from '$lib/enums';
+
+/**
+ * Converts an Image base64 data URL to another Image data URL with capped dimensions to reduce file size.
+ *
+ * For JPEGs the EXIF orientation is baked into the pixels in the same canvas
+ * pass, the browser applies the rotation when decoding so naturalWidth and
+ * naturalHeight already describe the upright image. Backends decoding with
+ * stb_image ignore EXIF, see ggml-org/llama.cpp#20870. Images that need
+ * neither capping nor rotation pass through untouched, so at most one
+ * re-encode ever happens.
+ * @param base64UrlImage - The Image base64 data URL to convert
+ * @param maxMegapixels - The maximum image size in megapixels for the output Image, 0 disables capping
+ * @returns Promise resolving to Image data URL
+ */
+export function capImageDataURLSize(
+	base64UrlImage: string,
+	maxMegapixels: number
+): Promise<string> {
+	return new Promise((resolve, reject) => {
+		try {
+			const mimeMatch = base64UrlImage.match(BASE64_IMAGE_URI_REGEX);
+
+			if (!mimeMatch) {
+				return reject(new Error('Invalid data URL format.'));
+			}
+
+			const mimeType = mimeMatch[1] as MimeTypeImage;
+
+			if (!Object.values(MimeTypeImage).includes(mimeType)) {
+				return reject(new Error(`Unsupported image MIME type: ${mimeType}`));
+			}
+
+			const orientation = isJpegMimeType(mimeType)
+				? getJpegOrientationFromDataURL(base64UrlImage)
+				: 1;
+
+			const img = new Image();
+
+			img.onload = () => {
+				try {
+					const canvas = document.createElement('canvas');
+					const ctx = canvas.getContext('2d');
+
+					if (!ctx) {
+						throw new Error('Failed to get 2D canvas context.');
+					}
+
+					const targetWidth = img.naturalWidth;
+					const targetHeight = img.naturalHeight;
+					const totalPixels = targetWidth * targetHeight;
+					const maxPixels = Math.floor(maxMegapixels * MEGAPIXELS_TO_PIXELS);
+
+					if (maxPixels > 0 && totalPixels > maxPixels) {
+						const scaleFactor = Math.sqrt(maxPixels / totalPixels);
+						canvas.width = Math.floor(targetWidth * scaleFactor);
+						canvas.height = Math.floor(targetHeight * scaleFactor);
+					} else if (orientation > 1) {
+						// No capping needed but the pixels still need the rotation baked in
+						canvas.width = targetWidth;
+						canvas.height = targetHeight;
+					} else {
+						return resolve(base64UrlImage);
+					}
+
+					ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+					resolve(canvas.toDataURL(mimeType));
+				} catch (err) {
+					reject(err instanceof Error ? err : new Error(String(err)));
+				}
+			};
+
+			img.onerror = () => {
+				reject(new Error('Failed to load image.'));
+			};
+
+			img.src = base64UrlImage;
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			const errorMessage = `Error resizing image: ${message}`;
+			console.error(errorMessage, error);
+			reject(new Error(errorMessage));
+		}
+	});
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/chat-template-thinking-detector.ts b/backend/llama.cpp/tools/ui/src/lib/utils/chat-template-thinking-detector.ts
new file mode 100644
index 0000000000000000000000000000000000000000..da6382f5cf94dbe3aee2843f05fd2628b9505e8f
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/chat-template-thinking-detector.ts
@@ -0,0 +1,86 @@
+/**
+ * Detects whether a model's chat template supports thinking/reasoning control.
+ *
+ * The server "/props" endpoint does NOT expose a supports_thinking flag.
+ * It is computed internally by common_chat_templates_support_enable_thinking
+ * in common/chat.cpp. A proper server flag would make this unnecessary.
+ *
+ * Detection order (most reliable first):
+ *  1. Thinking-control Jinja2 variables  === pass-through via chat_template_kwargs
+ *  2. Thinking-control Jinja2 conditionals  === template-native on/off logic
+ *  3. Paired thinking-content tag pairs    === models that output special tags
+ */
+
+const THINKING_KWARG_VARS = ['enable_thinking', 'reasoning_effort', 'thinking_budget'];
+
+/**
+ * Paired thinking-content tag patterns.
+ *
+ * Inspected: llama-cpp-deepseek-r1/v3, nim-nemotron-{3,4}-nano, qwen-qwq-32b,
+ * qwen-3-32b, google-gemma-4-31b-it, kimikimi-k2-thinking, apertus-8b-instruct,
+ * mistralai-Mistral-Small-3.2-24B, ByteDance-Seed-OSS.
+ *
+ * The self-closing entry is Kimi-K2, Gemma4 fixed-length pair,
+ * where both tags always appear adjacent with no content between.
+ */
+const THINKING_TAG_PATTERNS: Array<[string, string | null]> = [
+	['<think>', '</think>'],
+	['<|channel>thought', '<|channel|>'],
+	['<|think|>', '</|think|>'],
+	['<seed:think|>', '</seed:think|>'],
+	['<think></think>', null]
+];
+
+const JINJA_THINKING_CONDITIONALS: RegExp[] = [
+	// Matches: {% if enable thinking %}, {% if enable_thinking %}, {% if (enable_thinking is defined) %}
+	// Handles: underscore-separated (enable_thinking), space-separated (enable thinking),
+	// and optional parens/brackets before enable (if (enable_thinking )
+	/\{%-?\s*if\s+\(?\s*\w*enable[\s_]+\w*(thinking|think|reasoning)/i,
+	/\{%-?\s*if\s+\w*(thinking|reasoning)\s*(is not|==|!=)/i,
+	/\{%-?\s*if\s+not\s+\w*enable/i,
+	/\{%-?\s*if\s+ns\.enable_thinking/i
+];
+
+/** Guards against false positives:
+ *  - Generic thought keyword (tool descriptions say "chain of thought")
+ *  - Qwen vertical-bar token (used for ALL tool calls, not thinking)
+ */
+export function detectThinkingSupport(t: string): boolean {
+	if (!t) return false;
+	for (const kwarg of THINKING_KWARG_VARS) {
+		const regex = new RegExp(
+			`(\\{\\{[^{}]*\\b${kwarg}\\b[^{}]*\\}\\}|\\{%[^{}]*\\b${kwarg}\\b[^{}]*%\\})`,
+			'i'
+		);
+		if (regex.test(t)) return true;
+	}
+	for (const p of JINJA_THINKING_CONDITIONALS) {
+		if (p.test(t)) return true;
+	}
+	for (const [s, e] of THINKING_TAG_PATTERNS) {
+		if (t.includes(s) && (!e || t.includes(e))) return true;
+	}
+	return false;
+}
+
+export function detectThinkingSupportWithReason(t: string): { supported: boolean; reason: string } {
+	if (!t) return { supported: false, reason: 'No chat template available' };
+	for (const kwarg of THINKING_KWARG_VARS) {
+		const regex = new RegExp(
+			`(\\{\\{[^{}]*\\b${kwarg}\\b[^{}]*\\}\\}|\\{%[^{}]*\\b${kwarg}\\b[^{}]*%\\})`,
+			'i'
+		);
+		if (regex.test(t)) {
+			return { supported: true, reason: 'Found: ' + kwarg };
+		}
+	}
+	for (const p of JINJA_THINKING_CONDITIONALS) {
+		if (p.test(t)) return { supported: true, reason: 'Found: thinking conditional' };
+	}
+	for (const [s, e] of THINKING_TAG_PATTERNS) {
+		if (t.includes(s) && (!e || t.includes(e))) {
+			return { supported: true, reason: 'Found: ' + s + (e ? ' .. ' + e : ' (self)') };
+		}
+	}
+	return { supported: false, reason: 'No thinking patterns found' };
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/clipboard.ts b/backend/llama.cpp/tools/ui/src/lib/utils/clipboard.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8fcb554b1a9a66257523af1db10340ff2d552c4d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/clipboard.ts
@@ -0,0 +1,311 @@
+import { toast } from 'svelte-sonner';
+import { AttachmentType } from '$lib/enums';
+import type {
+	DatabaseMessageExtra,
+	DatabaseMessageExtraTextFile,
+	DatabaseMessageExtraLegacyContext,
+	DatabaseMessageExtraMcpPrompt,
+	DatabaseMessageExtraMcpResource,
+	ClipboardTextAttachment,
+	ClipboardMcpPromptAttachment,
+	ClipboardAttachment,
+	ParsedClipboardContent
+} from '$lib/types';
+
+/**
+ * Copy text to clipboard with toast notification
+ * Uses modern clipboard API when available, falls back to legacy method for non-secure contexts
+ * @param text - Text to copy to clipboard
+ * @param successMessage - Custom success message (optional)
+ * @param errorMessage - Custom error message (optional)
+ * @returns Promise<boolean> - True if successful, false otherwise
+ */
+export async function copyToClipboard(
+	text: string,
+	successMessage = 'Copied to clipboard',
+	errorMessage = 'Failed to copy to clipboard'
+): Promise<boolean> {
+	try {
+		// Try modern clipboard API first (secure contexts only)
+		if (navigator.clipboard && navigator.clipboard.writeText) {
+			await navigator.clipboard.writeText(text);
+			toast.success(successMessage);
+			return true;
+		}
+
+		// Fallback for non-secure contexts
+		const textArea = document.createElement('textarea');
+		textArea.value = text;
+		textArea.style.position = 'fixed';
+		textArea.style.left = '-999999px';
+		textArea.style.top = '-999999px';
+		document.body.appendChild(textArea);
+		textArea.focus();
+		textArea.select();
+
+		const successful = document.execCommand('copy');
+		document.body.removeChild(textArea);
+
+		if (successful) {
+			toast.success(successMessage);
+			return true;
+		} else {
+			throw new Error('execCommand failed');
+		}
+	} catch (error) {
+		console.error('Failed to copy to clipboard:', error);
+		toast.error(errorMessage);
+		return false;
+	}
+}
+
+/**
+ * Copy code with HTML entity decoding and toast notification
+ * @param rawCode - Raw code string that may contain HTML entities
+ * @param successMessage - Custom success message (optional)
+ * @param errorMessage - Custom error message (optional)
+ * @returns Promise<boolean> - True if successful, false otherwise
+ */
+export async function copyCodeToClipboard(
+	rawCode: string,
+	successMessage = 'Code copied to clipboard',
+	errorMessage = 'Failed to copy code'
+): Promise<boolean> {
+	return copyToClipboard(rawCode, successMessage, errorMessage);
+}
+
+/**
+ * Formats a message with text attachments for clipboard copying.
+ *
+ * Default format (asPlainText = false):
+ * ```
+ * "Text message content"
+ * [
+ *   {"type":"TEXT","name":"filename.txt","content":"..."},
+ *   {"type":"TEXT","name":"another.txt","content":"..."}
+ * ]
+ * ```
+ *
+ * Plain text format (asPlainText = true):
+ * ```
+ * Text message content
+ *
+ * file content here
+ *
+ * another file content
+ * ```
+ *
+ * @param content - The message text content
+ * @param extras - Optional array of message attachments
+ * @param asPlainText - If true, format as plain text without JSON structure
+ * @returns Formatted string for clipboard
+ */
+export function formatMessageForClipboard(
+	content: string,
+	extras?: DatabaseMessageExtra[],
+	asPlainText: boolean = false
+): string {
+	// Filter text-like attachments (TEXT, LEGACY_CONTEXT, MCP_PROMPT, and MCP_RESOURCE types)
+	const textAttachments =
+		extras?.filter(
+			(
+				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) {
+		return content;
+	}
+
+	if (asPlainText) {
+		const parts = [content];
+		for (const att of textAttachments) {
+			parts.push(att.content);
+		}
+		return parts.join('\n\n');
+	}
+
+	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)}`;
+}
+
+/**
+ * Parses clipboard content to extract message and text attachments.
+ * Supports both plain text and the special format with attachments.
+ *
+ * @param clipboardText - Raw text from clipboard
+ * @returns Parsed content with message and attachments
+ */
+export function parseClipboardContent(clipboardText: string): ParsedClipboardContent {
+	const defaultResult: ParsedClipboardContent = {
+		message: clipboardText,
+		textAttachments: [],
+		mcpPromptAttachments: []
+	};
+
+	if (!clipboardText.startsWith('"')) {
+		return defaultResult;
+	}
+
+	try {
+		let stringEndIndex = -1;
+		let escaped = false;
+
+		for (let i = 1; i < clipboardText.length; i++) {
+			const char = clipboardText[i];
+
+			if (escaped) {
+				escaped = false;
+				continue;
+			}
+
+			if (char === '\\') {
+				escaped = true;
+				continue;
+			}
+
+			if (char === '"') {
+				stringEndIndex = i;
+				break;
+			}
+		}
+
+		if (stringEndIndex === -1) {
+			return defaultResult;
+		}
+
+		const jsonStringPart = clipboardText.substring(0, stringEndIndex + 1);
+		const remainingPart = clipboardText.substring(stringEndIndex + 1).trim();
+
+		const message = JSON.parse(jsonStringPart) as string;
+
+		if (!remainingPart || !remainingPart.startsWith('[')) {
+			return {
+				message,
+				textAttachments: [],
+				mcpPromptAttachments: []
+			};
+		}
+
+		const attachments = JSON.parse(remainingPart) as unknown[];
+
+		const validTextAttachments: ClipboardTextAttachment[] = [];
+		const validMcpPromptAttachments: ClipboardMcpPromptAttachment[] = [];
+
+		for (const att of attachments) {
+			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
+				});
+			}
+		}
+
+		return {
+			message,
+			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
+ * @returns true if the object is a valid text attachment
+ */
+function isValidTextAttachment(
+	obj: unknown
+): obj is { type: string; name: string; content: string } {
+	if (typeof obj !== 'object' || obj === null) {
+		return false;
+	}
+
+	const record = obj as Record<string, unknown>;
+
+	return (
+		(record.type === AttachmentType.TEXT || record.type === 'TEXT') &&
+		typeof record.name === 'string' &&
+		typeof record.content === 'string'
+	);
+}
+
+/**
+ * Checks if clipboard content contains our special format with attachments
+ * @param clipboardText - Raw text from clipboard
+ * @returns true if the clipboard content contains our special format with attachments
+ */
+export function hasClipboardAttachments(clipboardText: string): boolean {
+	if (!clipboardText.startsWith('"')) {
+		return false;
+	}
+
+	const parsed = parseClipboardContent(clipboardText);
+	return parsed.textAttachments.length > 0 || parsed.mcpPromptAttachments.length > 0;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/code.ts b/backend/llama.cpp/tools/ui/src/lib/utils/code.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d83bc31af3f5c5537dd879eaa3e845c355d97e97
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/code.ts
@@ -0,0 +1,85 @@
+import hljs from 'highlight.js';
+import {
+	NEWLINE,
+	DEFAULT_LANGUAGE,
+	LANG_PATTERN,
+	AMPERSAND_REGEX,
+	LT_REGEX,
+	GT_REGEX,
+	FENCE_PATTERN
+} from '$lib/constants';
+
+export interface IncompleteCodeBlock {
+	language: string;
+	code: string;
+	openingIndex: number;
+}
+
+/**
+ * Highlights code using highlight.js
+ * @param code - The code to highlight
+ * @param language - The programming language
+ * @returns HTML string with syntax highlighting
+ */
+export function highlightCode(code: string, language: string): string {
+	if (!code) return '';
+
+	try {
+		const lang = language.toLowerCase();
+		const isSupported = hljs.getLanguage(lang);
+
+		if (isSupported) {
+			return hljs.highlight(code, { language: lang }).value;
+		} else {
+			return hljs.highlightAuto(code).value;
+		}
+	} catch {
+		// Fallback to escaped plain text
+		return code
+			.replace(AMPERSAND_REGEX, '&amp;')
+			.replace(LT_REGEX, '&lt;')
+			.replace(GT_REGEX, '&gt;');
+	}
+}
+
+/**
+ * Detects if markdown ends with an incomplete code block (opened but not closed).
+ * Returns the code block info if found, null otherwise.
+ * @param markdown - The raw markdown string to check
+ * @returns IncompleteCodeBlock info or null
+ */
+export function detectIncompleteCodeBlock(markdown: string): IncompleteCodeBlock | null {
+	// Count all code fences in the markdown
+	// A code block is incomplete if there's an odd number of ``` fences
+	const fencePattern = new RegExp(FENCE_PATTERN.source, FENCE_PATTERN.flags);
+	const fences: number[] = [];
+	let fenceMatch;
+
+	while ((fenceMatch = fencePattern.exec(markdown)) !== null) {
+		// Store the position after the ```
+		const pos = fenceMatch[0].startsWith(NEWLINE) ? fenceMatch.index + 1 : fenceMatch.index;
+		fences.push(pos);
+	}
+
+	// If even number of fences (including 0), all code blocks are closed
+	if (fences.length % 2 === 0) {
+		return null;
+	}
+
+	// Odd number means last code block is incomplete
+	// The last fence is the opening of the incomplete block
+	const openingIndex = fences[fences.length - 1];
+	const afterOpening = markdown.slice(openingIndex + 3);
+
+	// Extract language and code content
+	const langMatch = afterOpening.match(LANG_PATTERN);
+	const language = langMatch?.[1] || DEFAULT_LANGUAGE;
+	const codeStartIndex = openingIndex + 3 + (langMatch?.[0]?.length ?? 0);
+	const code = markdown.slice(codeStartIndex);
+
+	return {
+		language,
+		code,
+		openingIndex
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/config-helpers.ts b/backend/llama.cpp/tools/ui/src/lib/utils/config-helpers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b85242d85dbfe131ef7a0c76fac2192ea410d01b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/config-helpers.ts
@@ -0,0 +1,51 @@
+/**
+ * Type-safe configuration helpers
+ *
+ * Provides utilities for safely accessing and modifying configuration objects
+ * with dynamic keys while maintaining TypeScript type safety.
+ */
+
+/**
+ * Type-safe helper to access config properties dynamically
+ * Provides better type safety than direct casting to Record
+ */
+export function setConfigValue<T extends SettingsConfigType>(
+	config: T,
+	key: string,
+	value: unknown
+): void {
+	if (key in config) {
+		(config as Record<string, unknown>)[key] = value;
+	}
+}
+
+/**
+ * Type-safe helper to get config values dynamically
+ */
+export function getConfigValue<T extends SettingsConfigType>(
+	config: T,
+	key: string
+): string | number | boolean | undefined {
+	const value = (config as Record<string, unknown>)[key];
+	return value as string | number | boolean | undefined;
+}
+
+/**
+ * Convert a SettingsConfigType to a ParameterRecord for specific keys
+ * Useful for parameter synchronization operations
+ */
+export function configToParameterRecord<T extends SettingsConfigType>(
+	config: T,
+	keys: string[]
+): Record<string, string | number | boolean> {
+	const record: Record<string, string | number | boolean> = {};
+
+	for (const key of keys) {
+		const value = getConfigValue(config, key);
+		if (value !== undefined) {
+			record[key] = value;
+		}
+	}
+
+	return record;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/conversation-utils.ts b/backend/llama.cpp/tools/ui/src/lib/utils/conversation-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2c3d838999b27966b0880046ec6c98e316169a54
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/conversation-utils.ts
@@ -0,0 +1,31 @@
+/**
+ * Utility functions for conversation data manipulation
+ */
+import type { DatabaseMessage } from '$lib/types';
+
+/**
+ * Creates a map of conversation IDs to their message counts from exported conversation data
+ * @param exportedData - Array of exported conversations with their messages
+ * @returns Map of conversation ID to message count
+ */
+export function createMessageCountMap(
+	exportedData: Array<{ conv: DatabaseConversation; messages: DatabaseMessage[] }>
+): Map<string, number> {
+	const countMap = new Map<string, number>();
+
+	for (const item of exportedData) {
+		countMap.set(item.conv.id, item.messages.length);
+	}
+
+	return countMap;
+}
+
+/**
+ * Gets the message count for a specific conversation from the count map
+ * @param conversationId - The ID of the conversation
+ * @param countMap - Map of conversation IDs to message counts
+ * @returns The message count, or 0 if not found
+ */
+export function getMessageCount(conversationId: string, countMap: Map<string, number>): number {
+	return countMap.get(conversationId) ?? 0;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/convert-files-to-extra.ts b/backend/llama.cpp/tools/ui/src/lib/utils/convert-files-to-extra.ts
new file mode 100644
index 0000000000000000000000000000000000000000..af404445f7889c85184329af9314f617a4408619
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/convert-files-to-extra.ts
@@ -0,0 +1,224 @@
+import { convertPDFToImage, convertPDFToText } from './pdf-processing';
+import { isSvgMimeType, svgBase64UrlToPngDataURL } from './svg-to-png';
+import { isWebpMimeType, webpBase64UrlToPngDataURL } from './webp-to-png';
+import { FileTypeCategory, AttachmentType, SpecialFileType } from '$lib/enums';
+import { SETTINGS_KEYS } from '$lib/constants';
+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) => {
+		const reader = new FileReader();
+
+		reader.onload = () => {
+			// Extract base64 data without the data URL prefix
+			const dataUrl = reader.result as string;
+			const base64 = dataUrl.split(',')[1];
+			resolve(base64);
+		};
+
+		reader.onerror = () => reject(reader.error);
+
+		reader.readAsDataURL(file);
+	});
+}
+
+export async function parseFilesToMessageExtras(
+	files: ChatUploadedFile[],
+	activeModelId?: string
+): Promise<FileProcessingResult> {
+	const extras: DatabaseMessageExtra[] = [];
+	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,
+				size: file.size,
+				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;
+
+				if (isSvgMimeType(file.type)) {
+					try {
+						base64Url = await svgBase64UrlToPngDataURL(base64Url);
+					} catch (error) {
+						console.error('Failed to convert SVG to PNG for database storage:', error);
+					}
+				} else if (isWebpMimeType(file.type)) {
+					try {
+						base64Url = await webpBase64UrlToPngDataURL(base64Url);
+					} catch (error) {
+						console.error('Failed to convert WebP to PNG for database storage:', error);
+					}
+				}
+
+				extras.push({
+					type: AttachmentType.IMAGE,
+					name: file.name,
+					size: file.size,
+					base64Url
+				});
+			}
+		} else if (getFileTypeCategory(file.type) === FileTypeCategory.AUDIO) {
+			// Process audio files (MP3 and WAV)
+			try {
+				const base64Data = await readFileAsBase64(file.file);
+
+				extras.push({
+					type: AttachmentType.AUDIO,
+					name: file.name,
+					size: file.size,
+					base64Data: base64Data,
+					mimeType: file.type
+				});
+			} catch (error) {
+				console.error(`Failed to process audio file ${file.name}:`, error);
+			}
+		} else if (getFileTypeCategory(file.type) === FileTypeCategory.VIDEO) {
+			// Process video files (MP4, etc)
+			try {
+				const base64Data = await readFileAsBase64(file.file);
+
+				extras.push({
+					type: AttachmentType.VIDEO,
+					name: file.name,
+					size: file.size,
+					base64Data: base64Data,
+					mimeType: file.type
+				});
+			} catch (error) {
+				console.error(`Failed to process video file ${file.name}:`, error);
+			}
+		} else if (getFileTypeCategory(file.type) === FileTypeCategory.PDF) {
+			try {
+				// Always get base64 data for preview functionality
+				const base64Data = await readFileAsBase64(file.file);
+				const currentConfig = config();
+				// Use per-model vision check for router mode
+				const hasVisionSupport = activeModelId
+					? modelsStore.modelSupportsVision(activeModelId)
+					: false;
+
+				// Force PDF-to-text for non-vision models
+				let shouldProcessAsImages = Boolean(currentConfig.pdfAsImage) && hasVisionSupport;
+
+				// If user had pdfAsImage enabled but model doesn't support vision, update setting and notify
+				if (currentConfig.pdfAsImage && !hasVisionSupport) {
+					console.log('Non-vision model detected: forcing PDF-to-text mode and updating settings');
+
+					// Update the setting in localStorage
+					settingsStore.updateConfig(SETTINGS_KEYS.PDF_AS_IMAGE, false);
+
+					// Show toast notification to user
+					toast.warning(
+						'PDF setting changed: Non-vision model detected, PDFs will be processed as text instead of images.',
+						{
+							duration: 5000
+						}
+					);
+
+					shouldProcessAsImages = false;
+				}
+
+				if (shouldProcessAsImages) {
+					// Process PDF as images (only for vision models)
+					try {
+						const images = await convertPDFToImage(file.file);
+
+						// Show success toast for PDF image processing
+						toast.success(
+							`PDF "${file.name}" processed as ${images.length} images for vision model.`,
+							{
+								duration: 3000
+							}
+						);
+
+						extras.push({
+							type: AttachmentType.PDF,
+							name: file.name,
+							size: file.size,
+							content: `PDF file with ${images.length} pages`,
+							images: images,
+							processedAsImages: true,
+							base64Data: base64Data
+						});
+					} catch (imageError) {
+						console.warn(
+							`Failed to process PDF ${file.name} as images, falling back to text:`,
+							imageError
+						);
+
+						// Fallback to text processing
+						const content = await convertPDFToText(file.file);
+
+						extras.push({
+							type: AttachmentType.PDF,
+							name: file.name,
+							size: file.size,
+							content: content,
+							processedAsImages: false,
+							base64Data: base64Data
+						});
+					}
+				} else {
+					// Process PDF as text (default or forced for non-vision models)
+					const content = await convertPDFToText(file.file);
+
+					// Show success toast for PDF text processing
+					toast.success(`PDF "${file.name}" processed as text content.`, {
+						duration: 3000
+					});
+
+					extras.push({
+						type: AttachmentType.PDF,
+						name: file.name,
+						size: file.size,
+						content: content,
+						processedAsImages: false,
+						base64Data: base64Data
+					});
+				}
+			} catch (error) {
+				console.error(`Failed to process PDF file ${file.name}:`, error);
+			}
+		} else {
+			try {
+				const content = await readFileAsText(file.file);
+
+				// Check if file is empty
+				if (content.trim() === '') {
+					console.warn(`File ${file.name} is empty and will be skipped`);
+					emptyFiles.push(file.name);
+				} else if (isLikelyTextFile(content)) {
+					extras.push({
+						type: AttachmentType.TEXT,
+						name: file.name,
+						size: file.size,
+						content: content
+					});
+				} else {
+					console.warn(`File ${file.name} appears to be binary and will be skipped`);
+				}
+			} catch (error) {
+				console.error(`Failed to read file ${file.name}:`, error);
+			}
+		}
+	}
+
+	return { extras, emptyFiles };
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/cors-proxy.ts b/backend/llama.cpp/tools/ui/src/lib/utils/cors-proxy.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1694b7dbe6b836446aa515b0059f07cdbe9ed483
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/cors-proxy.ts
@@ -0,0 +1,39 @@
+/**
+ * CORS Proxy utility for routing requests through llama-server's CORS proxy.
+ */
+
+import { base } from '$app/paths';
+import {
+	CORS_PROXY_ENDPOINT,
+	CORS_PROXY_HEADER_PREFIX,
+	CORS_PROXY_URL_PARAM
+} from '$lib/constants';
+
+/**
+ * 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_ENDPOINT}`;
+	const proxyUrl = new URL(proxyPath, window.location.origin);
+
+	proxyUrl.searchParams.set(CORS_PROXY_URL_PARAM, targetUrl);
+
+	return proxyUrl;
+}
+
+/**
+ * Wrap original headers for proxying through the CORS proxy. This avoids issues with duplicated llama.cpp-specific and target headers when using the CORS proxy.
+ * @param headers - The original headers to be proxied to target
+ * @returns List of "wrapped" headers to be sent to the CORS proxy
+ */
+export function buildProxiedHeaders(headers: Record<string, string>): Record<string, string> {
+	const proxiedHeaders: Record<string, string> = {};
+
+	for (const [key, value] of Object.entries(headers)) {
+		proxiedHeaders[`${CORS_PROXY_HEADER_PREFIX}${key}`] = value;
+	}
+
+	return proxiedHeaders;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/css.ts b/backend/llama.cpp/tools/ui/src/lib/utils/css.ts
new file mode 100644
index 0000000000000000000000000000000000000000..99351a7f4493f625b966ba4c548261cf8867403c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/css.ts
@@ -0,0 +1,9 @@
+/**
+ * Converts a rem CSS value to pixels based on the document root font size.
+ */
+export function remToPx(rem: string): number {
+	const val = parseFloat(rem);
+	const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+	return val * fontSize;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/data-url.ts b/backend/llama.cpp/tools/ui/src/lib/utils/data-url.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6f55be793daa412c8bf5b8c4c35e00149558a306
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/data-url.ts
@@ -0,0 +1,10 @@
+/**
+ * Creates a base64 data URL from MIME type and base64-encoded data.
+ *
+ * @param mimeType - The MIME type (e.g., 'image/png', 'audio/mp3')
+ * @param base64Data - The base64-encoded data
+ * @returns A data URL string in format 'data:{mimeType};base64,{data}'
+ */
+export function createBase64DataUrl(mimeType: string, base64Data: string): string {
+	return `data:${mimeType};base64,${base64Data}`;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/debounce.ts b/backend/llama.cpp/tools/ui/src/lib/utils/debounce.ts
new file mode 100644
index 0000000000000000000000000000000000000000..90a5a01783a03b0ac1fd7e9f7b782f7f2f2a3f83
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/debounce.ts
@@ -0,0 +1,22 @@
+/**
+ * @param fn - The function to debounce
+ * @param delay - The delay in milliseconds
+ * @returns A debounced version of the function
+ */
+export function debounce<T extends (...args: Parameters<T>) => void>(
+	fn: T,
+	delay: number
+): (...args: Parameters<T>) => void {
+	let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+	return (...args: Parameters<T>) => {
+		if (timeoutId) {
+			clearTimeout(timeoutId);
+		}
+
+		timeoutId = setTimeout(() => {
+			fn(...args);
+			timeoutId = null;
+		}, delay);
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/file-preview.ts b/backend/llama.cpp/tools/ui/src/lib/utils/file-preview.ts
new file mode 100644
index 0000000000000000000000000000000000000000..26a60533ae6fc986f809a4446629785356c47c2f
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/file-preview.ts
@@ -0,0 +1,36 @@
+/**
+ * Gets a display label for a file type from various input formats
+ *
+ * Handles:
+ * - MIME types: 'application/pdf' → 'PDF'
+ * - AttachmentType values: 'PDF', 'AUDIO' → 'PDF', 'AUDIO'
+ * - File names: 'document.pdf' → 'PDF'
+ * - Unknown: returns 'FILE'
+ *
+ * @param input - MIME type, AttachmentType value, or file name
+ * @returns Formatted file type label (uppercase)
+ */
+export function getFileTypeLabel(input: string | undefined): string {
+	if (!input) return 'FILE';
+
+	// Handle MIME types (contains '/')
+	if (input.includes('/')) {
+		const subtype = input.split('/').pop();
+		if (subtype) {
+			// Handle special cases like 'vnd.ms-excel' → 'EXCEL'
+			if (subtype.includes('.')) {
+				return subtype.split('.').pop()?.toUpperCase() || 'FILE';
+			}
+			return subtype.toUpperCase();
+		}
+	}
+
+	// Handle file names (contains '.')
+	if (input.includes('.')) {
+		const ext = input.split('.').pop();
+		if (ext) return ext.toUpperCase();
+	}
+
+	// Handle AttachmentType or other plain strings
+	return input.toUpperCase();
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/file-type.ts b/backend/llama.cpp/tools/ui/src/lib/utils/file-type.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e61564174e8d78bec875a6b1f2880268f80ee5e0
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/file-type.ts
@@ -0,0 +1,248 @@
+import {
+	AUDIO_FILE_TYPES,
+	VIDEO_FILE_TYPES,
+	IMAGE_FILE_TYPES,
+	PDF_FILE_TYPES,
+	TEXT_FILE_TYPES
+} from '$lib/constants';
+import {
+	FileExtensionAudio,
+	FileExtensionImage,
+	FileExtensionPdf,
+	FileExtensionText,
+	FileTypeCategory,
+	MimeTypeApplication,
+	MimeTypeAudio,
+	MimeTypeVideo,
+	MimeTypeImage,
+	MimeTypeText
+} from '$lib/enums';
+
+function normalizeMimeType(mimeType: string): string {
+	return mimeType.trim().toLowerCase();
+}
+
+export function getFileTypeCategory(mimeType: string): FileTypeCategory | null {
+	switch (normalizeMimeType(mimeType)) {
+		// Images
+		case MimeTypeImage.JPEG:
+		case MimeTypeImage.PNG:
+		case MimeTypeImage.GIF:
+		case MimeTypeImage.WEBP:
+		case MimeTypeImage.SVG:
+		case MimeTypeImage.HEIC:
+		case MimeTypeImage.HEIF:
+			return FileTypeCategory.IMAGE;
+
+		// Audio
+		case MimeTypeAudio.MP3_MPEG:
+		case MimeTypeAudio.MP3:
+		case MimeTypeAudio.MP4:
+		case MimeTypeAudio.WAV:
+		case MimeTypeAudio.WAVE:
+		case MimeTypeAudio.X_WAV:
+		case MimeTypeAudio.X_WAVE:
+		case MimeTypeAudio.VND_WAVE:
+		case MimeTypeAudio.X_PN_WAV:
+		case MimeTypeAudio.WEBM:
+		case MimeTypeAudio.WEBM_OPUS:
+			return FileTypeCategory.AUDIO;
+
+		// Video
+		case MimeTypeVideo.MP4:
+		case MimeTypeVideo.OGG:
+			return FileTypeCategory.VIDEO;
+
+		// PDF
+		case MimeTypeApplication.PDF:
+			return FileTypeCategory.PDF;
+
+		// Text
+		case MimeTypeText.PLAIN:
+		case MimeTypeText.MARKDOWN:
+		case MimeTypeText.ASCIIDOC:
+		case MimeTypeText.JAVASCRIPT:
+		case MimeTypeText.JAVASCRIPT_APP:
+		case MimeTypeText.TYPESCRIPT:
+		case MimeTypeText.JSX:
+		case MimeTypeText.TSX:
+		case MimeTypeText.CSS:
+		case MimeTypeText.HTML:
+		case MimeTypeText.JSON:
+		case MimeTypeText.XML_TEXT:
+		case MimeTypeText.XML_APP:
+		case MimeTypeText.YAML_TEXT:
+		case MimeTypeText.YAML_APP:
+		case MimeTypeText.CSV:
+		case MimeTypeText.PYTHON:
+		case MimeTypeText.JAVA:
+		case MimeTypeText.CPP_SRC:
+		case MimeTypeText.C_SRC:
+		case MimeTypeText.C_HDR:
+		case MimeTypeText.PHP:
+		case MimeTypeText.RUBY:
+		case MimeTypeText.GO:
+		case MimeTypeText.RUST:
+		case MimeTypeText.SHELL:
+		case MimeTypeText.BAT:
+		case MimeTypeText.SQL:
+		case MimeTypeText.R:
+		case MimeTypeText.SCALA:
+		case MimeTypeText.KOTLIN:
+		case MimeTypeText.SWIFT:
+		case MimeTypeText.DART:
+		case MimeTypeText.VUE:
+		case MimeTypeText.SVELTE:
+		case MimeTypeText.LATEX:
+		case MimeTypeText.BIBTEX:
+		case MimeTypeText.CUDA:
+		case MimeTypeText.CPP_HDR:
+		case MimeTypeText.CSHARP:
+		case MimeTypeText.HASKELL:
+		case MimeTypeText.PROPERTIES:
+		case MimeTypeText.TEX:
+		case MimeTypeText.TEX_APP:
+			return FileTypeCategory.TEXT;
+
+		default:
+			return null;
+	}
+}
+
+export function getFileTypeCategoryByExtension(filename: string): FileTypeCategory | null {
+	const extension = filename.toLowerCase().substring(filename.lastIndexOf('.'));
+
+	switch (extension) {
+		// Images
+		case FileExtensionImage.JPG:
+		case FileExtensionImage.JPEG:
+		case FileExtensionImage.PNG:
+		case FileExtensionImage.GIF:
+		case FileExtensionImage.WEBP:
+		case FileExtensionImage.SVG:
+		case FileExtensionImage.HEIC:
+		case FileExtensionImage.HEIF:
+			return FileTypeCategory.IMAGE;
+
+		// Audio
+		case FileExtensionAudio.MP3:
+		case FileExtensionAudio.WAV:
+			return FileTypeCategory.AUDIO;
+
+		// PDF
+		case FileExtensionPdf.PDF:
+			return FileTypeCategory.PDF;
+
+		// Text
+		case FileExtensionText.TXT:
+		case FileExtensionText.MD:
+		case FileExtensionText.ADOC:
+		case FileExtensionText.JS:
+		case FileExtensionText.TS:
+		case FileExtensionText.JSX:
+		case FileExtensionText.TSX:
+		case FileExtensionText.CSS:
+		case FileExtensionText.HTML:
+		case FileExtensionText.HTM:
+		case FileExtensionText.JSON:
+		case FileExtensionText.XML:
+		case FileExtensionText.YAML:
+		case FileExtensionText.YML:
+		case FileExtensionText.CSV:
+		case FileExtensionText.LOG:
+		case FileExtensionText.PY:
+		case FileExtensionText.JAVA:
+		case FileExtensionText.CPP:
+		case FileExtensionText.C:
+		case FileExtensionText.H:
+		case FileExtensionText.PHP:
+		case FileExtensionText.RB:
+		case FileExtensionText.GO:
+		case FileExtensionText.RS:
+		case FileExtensionText.SH:
+		case FileExtensionText.BAT:
+		case FileExtensionText.SQL:
+		case FileExtensionText.R:
+		case FileExtensionText.SCALA:
+		case FileExtensionText.KT:
+		case FileExtensionText.SWIFT:
+		case FileExtensionText.DART:
+		case FileExtensionText.VUE:
+		case FileExtensionText.SVELTE:
+		case FileExtensionText.TEX:
+		case FileExtensionText.BIB:
+		case FileExtensionText.COMP:
+		case FileExtensionText.CU:
+		case FileExtensionText.CUH:
+		case FileExtensionText.HPP:
+		case FileExtensionText.HS:
+		case FileExtensionText.PROPERTIES:
+			return FileTypeCategory.TEXT;
+
+		default:
+			return null;
+	}
+}
+
+export function getFileTypeByExtension(filename: string): string | null {
+	const extension = filename.toLowerCase().substring(filename.lastIndexOf('.'));
+
+	for (const [key, type] of Object.entries(IMAGE_FILE_TYPES)) {
+		if ((type.extensions as readonly string[]).includes(extension)) {
+			return `${FileTypeCategory.IMAGE}:${key}`;
+		}
+	}
+
+	for (const [key, type] of Object.entries(AUDIO_FILE_TYPES)) {
+		if ((type.extensions as readonly string[]).includes(extension)) {
+			return `${FileTypeCategory.AUDIO}:${key}`;
+		}
+	}
+
+	for (const [key, type] of Object.entries(VIDEO_FILE_TYPES)) {
+		if ((type.extensions as readonly string[]).includes(extension)) {
+			return `${FileTypeCategory.VIDEO}:${key}`;
+		}
+	}
+
+	for (const [key, type] of Object.entries(PDF_FILE_TYPES)) {
+		if ((type.extensions as readonly string[]).includes(extension)) {
+			return `${FileTypeCategory.PDF}:${key}`;
+		}
+	}
+
+	for (const [key, type] of Object.entries(TEXT_FILE_TYPES)) {
+		if ((type.extensions as readonly string[]).includes(extension)) {
+			return `${FileTypeCategory.TEXT}:${key}`;
+		}
+	}
+
+	return null;
+}
+
+export function isFileTypeSupported(filename: string, mimeType?: string): boolean {
+	// Images are detected and handled separately for vision models
+	if (mimeType) {
+		const category = getFileTypeCategory(mimeType);
+		if (
+			category === FileTypeCategory.IMAGE ||
+			category === FileTypeCategory.AUDIO ||
+			category === FileTypeCategory.PDF
+		) {
+			return true;
+		}
+	}
+
+	// Check extension for known types (especially images without MIME)
+	const extCategory = getFileTypeCategoryByExtension(filename);
+	if (
+		extCategory === FileTypeCategory.IMAGE ||
+		extCategory === FileTypeCategory.AUDIO ||
+		extCategory === FileTypeCategory.PDF
+	) {
+		return true;
+	}
+
+	// Fallback: treat everything else as text (inclusive by default)
+	return true;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/formatters.ts b/backend/llama.cpp/tools/ui/src/lib/utils/formatters.ts
new file mode 100644
index 0000000000000000000000000000000000000000..de74ee8686d1bcf91e04392d48c77462e5eb3077
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/formatters.ts
@@ -0,0 +1,187 @@
+import {
+	MS_PER_SECOND,
+	SECONDS_PER_MINUTE,
+	SECONDS_PER_HOUR,
+	SHORT_DURATION_THRESHOLD,
+	MEDIUM_DURATION_THRESHOLD,
+	MAX_PREVIEW_LENGTH,
+	STRIP_MARKDOWN_INLINE_REGEX,
+	STRIP_MARKDOWN_CAPTURE_PATTERNS,
+	NEWLINE_SEPARATOR
+} from '$lib/constants';
+
+/**
+ * Formats file size in bytes to human readable format
+ * Supports Bytes, KB, MB, and GB
+ *
+ * @param bytes - File size in bytes (or unknown for safety)
+ * @returns Formatted file size string
+ */
+export function formatFileSize(bytes: number | unknown): string {
+	if (typeof bytes !== 'number') return 'Unknown';
+	if (bytes === 0) return '0 Bytes';
+
+	const k = 1024;
+	const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+	return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+/**
+ * Format parameter count to human-readable format (B, M, K)
+ *
+ * @param params - Parameter count
+ * @returns Human-readable parameter count
+ */
+export function formatParameters(params: number | unknown): string {
+	if (typeof params !== 'number') return 'Unknown';
+
+	if (params >= 1e9) {
+		return `${(params / 1e9).toFixed(2)}B`;
+	}
+
+	if (params >= 1e6) {
+		return `${(params / 1e6).toFixed(2)}M`;
+	}
+
+	if (params >= 1e3) {
+		return `${(params / 1e3).toFixed(2)}K`;
+	}
+
+	return params.toString();
+}
+
+/**
+ * Format number with locale-specific thousands separators
+ *
+ * @param num - Number to format
+ * @returns Human-readable number
+ */
+export function formatNumber(num: number | unknown): string {
+	if (typeof num !== 'number') return 'Unknown';
+
+	return num.toLocaleString();
+}
+
+/**
+ * Format JSON string with pretty printing (2-space indentation)
+ * Returns original string if parsing fails
+ *
+ * @param jsonString - JSON string to format
+ * @returns Pretty-printed JSON string or original if invalid
+ */
+export function formatJsonPretty(jsonString: string): string {
+	try {
+		const parsed = JSON.parse(jsonString);
+		return JSON.stringify(parsed, null, 2);
+	} catch {
+		return jsonString;
+	}
+}
+
+/**
+ * Format time as HH:MM:SS in 24-hour format
+ *
+ * @param date - Date object to format
+ * @returns Formatted time string (HH:MM:SS)
+ */
+export function formatTime(date: Date): string {
+	return date.toLocaleTimeString('en-US', {
+		hour12: false,
+		hour: '2-digit',
+		minute: '2-digit',
+		second: '2-digit'
+	});
+}
+
+/**
+ * Formats milliseconds to a human-readable time string for performance metrics.
+ * Examples: "4h 12min 54s", "12min 34s", "45s", "0.5s"
+ *
+ * @param ms - Time in milliseconds
+ * @returns Formatted time string
+ */
+export function formatPerformanceTime(ms: number): string {
+	if (ms < 0) return '0s';
+
+	const totalSeconds = ms / MS_PER_SECOND;
+
+	if (totalSeconds < SHORT_DURATION_THRESHOLD) {
+		return `${totalSeconds.toFixed(1)}s`;
+	}
+
+	if (totalSeconds < MEDIUM_DURATION_THRESHOLD) {
+		return `${totalSeconds.toFixed(1)}s`;
+	}
+
+	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[] = [];
+
+	if (hours > 0) {
+		parts.push(`${hours}h`);
+	}
+
+	if (minutes > 0) {
+		parts.push(`${minutes}min`);
+	}
+
+	if (seconds > 0 || parts.length === 0) {
+		parts.push(`${seconds}s`);
+	}
+
+	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}`;
+}
+
+export function formatReasoningPreview(content: string): { preview: string; overflow: number } {
+	if (!content) return { preview: '', overflow: 0 };
+
+	const lines = content.split(NEWLINE_SEPARATOR);
+	let lastLine = '';
+
+	for (let i = lines.length - 1; i >= 0; i--) {
+		let cleaned = lines[i].trim();
+		if (!cleaned) continue;
+
+		cleaned = cleaned.replace(STRIP_MARKDOWN_INLINE_REGEX, '');
+		for (const [pattern, replacement] of STRIP_MARKDOWN_CAPTURE_PATTERNS) {
+			cleaned = cleaned.replace(pattern, replacement);
+		}
+
+		if (cleaned.length > 0) {
+			lastLine = cleaned;
+			break;
+		}
+	}
+
+	const fullLength = lastLine.length;
+	const overflow = Math.max(0, fullLength - MAX_PREVIEW_LENGTH);
+	if (fullLength > MAX_PREVIEW_LENGTH) {
+		lastLine = lastLine.slice(0, MAX_PREVIEW_LENGTH) + '...';
+	}
+
+	return { preview: lastLine, overflow };
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/headers.ts b/backend/llama.cpp/tools/ui/src/lib/utils/headers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0b907b8300331a51915027204cb4aee2b787c944
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/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/backend/llama.cpp/tools/ui/src/lib/utils/heic-to-jpeg.ts b/backend/llama.cpp/tools/ui/src/lib/utils/heic-to-jpeg.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4ccb992a3b32d02ebfda25b5dfba8043515830bc
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/heic-to-jpeg.ts
@@ -0,0 +1,56 @@
+import { MimeTypeImage } from '$lib/enums';
+import { HEIC_JPEG_QUALITY } from '$lib/constants/image-size';
+
+// heic requires a relatively large decoder, in order to reduce primary bundle size
+// we lazily load this decoder from a CDN when needed, and cache it for future conversions
+const HEIC_TO_CDN_URL = 'https://cdn.jsdelivr.net/npm/heic-to@1.5.2/dist/heic-to.js';
+
+interface HeicToModule {
+	heicTo(args: { blob: Blob; type: string; quality?: number }): Promise<Blob>;
+}
+
+let modulePromise: Promise<HeicToModule> | null = null;
+
+/**
+ * Lazily load the heic-to decoder from the CDN and cache it
+ * @returns Promise resolving to the heic-to module
+ */
+function getHeicTo(): Promise<HeicToModule> {
+	if (!modulePromise) {
+		modulePromise = import(/* @vite-ignore */ HEIC_TO_CDN_URL) as Promise<HeicToModule>;
+	}
+
+	return modulePromise;
+}
+
+/**
+ * Convert a HEIC/HEIF file to a compressed JPEG data URL
+ * @param file - The HEIC/HEIF file to convert
+ * @returns Promise resolving to JPEG data URL
+ */
+export async function heicFileToJpegDataURL(file: File | Blob): Promise<string> {
+	const { heicTo } = await getHeicTo();
+	const jpegBlob = await heicTo({
+		blob: file,
+		type: MimeTypeImage.JPEG,
+		quality: HEIC_JPEG_QUALITY
+	});
+
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => resolve(reader.result as string);
+		reader.onerror = () => reject(reader.error);
+		reader.readAsDataURL(jpegBlob);
+	});
+}
+
+/**
+ * Check if a MIME type represents a HEIC/HEIF image
+ * @param mimeType - The MIME type to check
+ * @returns True if the MIME type is image/heic or image/heif
+ */
+export function isHeicMimeType(mimeType: string): boolean {
+	const normalized = mimeType.trim().toLowerCase();
+
+	return normalized === MimeTypeImage.HEIC || normalized === MimeTypeImage.HEIF;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/image-error-fallback.ts b/backend/llama.cpp/tools/ui/src/lib/utils/image-error-fallback.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6e3260f4ae24646f28ad0b43ba7516dd76ad7665
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/image-error-fallback.ts
@@ -0,0 +1,10 @@
+/**
+ * Simplified HTML fallback for external images that fail to load.
+ * Displays a centered message with a link to open the image in a new tab.
+ */
+export function getImageErrorFallbackHtml(src: string): string {
+	return `<div class="image-error-content">
+		<span>Image cannot be displayed</span>
+		<a href="${src}" target="_blank" rel="noopener noreferrer">(open link)</a>
+	</div>`;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/index.ts b/backend/llama.cpp/tools/ui/src/lib/utils/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8474691acdfe3ba6dc92ba223bf3fec61f61215a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/index.ts
@@ -0,0 +1,193 @@
+/**
+ * Unified exports for all utility functions
+ * Import utilities from '$lib/utils' for cleaner imports
+ *
+ * For browser-only utilities (pdf-processing, audio-recording, svg-to-png,
+ * webp-to-png, process-uploaded-files, convert-files-to-extra), use:
+ * import { ... } from '$lib/utils/browser-only'
+ */
+
+// API utilities
+export { getAuthHeaders, getJsonHeaders, sanitizeHeaders } from './api-headers';
+export { apiFetch, apiFetchWithParams, apiPost, type ApiFetchOptions } from './api-fetch';
+export { validateApiKey } from './api-key-validation';
+
+// Attachment utilities
+export { getAttachmentDisplayItems, isMcpPrompt, isMcpResource } from './attachment-display';
+export { isTextFile, isImageFile, isPdfFile, isAudioFile, isVideoFile } from './attachment-type';
+
+// Textarea utilities
+export { default as autoResizeTextarea } from './autoresize-textarea';
+
+// Branching utilities
+export {
+	filterByLeafNodeId,
+	findMessageById,
+	findLeafNode,
+	findDescendantMessages,
+	getMessageSiblings,
+	buildSiblingInfoMap
+} from './branching';
+
+// Code
+export { highlightCode, detectIncompleteCodeBlock, type IncompleteCodeBlock } from './code';
+
+// Config helpers
+export { setConfigValue, getConfigValue, configToParameterRecord } from './config-helpers';
+
+// CORS Proxy
+export { buildProxiedUrl, buildProxiedHeaders } from './cors-proxy';
+
+// URL utilities
+export { extractRootDomain, sanitizeExternalUrl } from './url';
+
+// Progress helpers
+export { modelLoadFraction, modelLoadProgressText } from './progress';
+
+// Conversation utilities
+export { createMessageCountMap, getMessageCount } from './conversation-utils';
+
+// Clipboard utilities
+export {
+	copyToClipboard,
+	copyCodeToClipboard,
+	formatMessageForClipboard,
+	parseClipboardContent,
+	hasClipboardAttachments
+} from './clipboard';
+
+// File preview utilities
+export { getFileTypeLabel } from './file-preview';
+export { getPreviewText, generateConversationTitle } from './text';
+
+// File type utilities
+export {
+	getFileTypeCategory,
+	getFileTypeCategoryByExtension,
+	getFileTypeByExtension,
+	isFileTypeSupported
+} from './file-type';
+
+// Formatting utilities
+export {
+	formatFileSize,
+	formatParameters,
+	formatNumber,
+	formatJsonPretty,
+	formatTime,
+	formatPerformanceTime,
+	formatAttachmentText,
+	formatReasoningPreview
+} from './formatters';
+
+// IME utilities
+export { isIMEComposing } from './is-ime-composing';
+
+// LaTeX utilities
+export { maskInlineLaTeX, preprocessLaTeX } from './latex-protection';
+
+// Modality file validation utilities
+export {
+	isFileTypeSupportedByModel,
+	filterFilesByModalities,
+	generateModalityErrorMessage
+} from './modality-file-validation';
+
+// Model name utilities
+export { normalizeModelName, isValidModelName } from './model-names';
+
+// Portal utilities
+export { portalToBody } from './portal-to-body';
+
+// Precision utilities
+export { normalizeFloatingPoint, normalizeNumber } from './precision';
+
+// Syntax highlighting utilities
+export { getLanguageFromFilename } from './syntax-highlight-language';
+
+// Text file utilities
+export { isTextFileByName, readFileAsText, isLikelyTextFile } from './text-files';
+
+// Debounce utilities
+export { debounce } from './debounce';
+
+// Sanitization utilities
+export { sanitizeKeyValuePairKey, sanitizeKeyValuePairValue } from './sanitize';
+
+// 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';
+
+// URI Template utilities
+export {
+	extractTemplateVariables,
+	expandTemplate,
+	isTemplateComplete,
+	normalizeResourceUri,
+	type UriTemplateVariable
+} from './uri-template';
+
+// Data URL utilities
+export { createBase64DataUrl } from './data-url';
+
+// Header utilities
+export { parseHeadersToArray, serializeHeaders } from './headers';
+
+// Agentic content utilities (structured section derivation)
+export {
+	deriveAgenticSections,
+	parseToolResultWithImages,
+	hasAgenticContent,
+	type AgenticSection,
+	type ToolResultLine
+} from './agentic';
+
+// Cache utilities
+export { TTLCache, ReactiveTTLMap, type TTLCacheOptions } from './cache-ttl';
+
+// Redaction utilities
+export { redactValue } from './redact';
+
+// Request inspection utilities
+export {
+	getRequestUrl,
+	getRequestMethod,
+	getRequestBody,
+	summarizeRequestBody,
+	formatDiagnosticErrorMessage,
+	extractJsonRpcMethods,
+	type RequestBodySummary
+} from './request-helpers';
+
+// Abort signal utilities
+export {
+	throwIfAborted,
+	isAbortError,
+	createLinkedController,
+	createTimeoutSignal,
+	withAbortSignal
+} from './abort';
+
+// Cryptography utilities
+
+export { uuid } from './uuid';
+
+// CSS utilities
+export { remToPx } from './css';
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/is-ime-composing.ts b/backend/llama.cpp/tools/ui/src/lib/utils/is-ime-composing.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9182ea4f3603f25140470542bb496599ffebb6c0
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/is-ime-composing.ts
@@ -0,0 +1,5 @@
+export function isIMEComposing(event: KeyboardEvent) {
+	// Check for IME composition using isComposing property and keyCode 229 (specifically for IME composition on Safari, which is notorious for not supporting KeyboardEvent.isComposing)
+	// This prevents form submission when confirming IME word selection (e.g., Japanese/Chinese input)
+	return event.isComposing || event.keyCode === 229;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/jpeg-orientation.ts b/backend/llama.cpp/tools/ui/src/lib/utils/jpeg-orientation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..15c21017ade885ae7edbf638e6fa1c57e1ffdd44
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/jpeg-orientation.ts
@@ -0,0 +1,146 @@
+import {
+	EXIF_SCAN_BYTE_LIMIT,
+	JPEG_SOI_MARKER,
+	APP1_MARKER,
+	SOS_MARKER,
+	EXIF_SIGNATURE,
+	TIFF_LITTLE_ENDIAN,
+	TIFF_MAGIC,
+	EXIF_ORIENTATION_TAG,
+	IFD_ENTRY_SIZE
+} from '$lib/constants/jpeg-exif';
+import { MimeTypeImage } from '$lib/enums';
+
+/**
+ * Read the EXIF orientation tag from a JPEG base64 data URL
+ *
+ * Only a bounded prefix of the base64 payload is decoded, the APP1 segment
+ * always sits near the start of the file.
+ * @param base64UrlJpeg - The JPEG base64 data URL to inspect
+ * @returns The orientation value (1 to 8), or 1 when absent or unreadable
+ */
+export function getJpegOrientationFromDataURL(base64UrlJpeg: string): number {
+	try {
+		const payloadStart = base64UrlJpeg.indexOf(',') + 1;
+
+		if (payloadStart <= 0) {
+			return 1;
+		}
+
+		// Keep the slice a multiple of 4 characters so atob accepts it
+		const charLimit = Math.ceil(EXIF_SCAN_BYTE_LIMIT / 3) * 4;
+		const slice = base64UrlJpeg.slice(payloadStart, payloadStart + charLimit);
+		const binary = atob(slice.slice(0, slice.length - (slice.length % 4)));
+		const bytes = new Uint8Array(binary.length);
+
+		for (let i = 0; i < binary.length; i++) {
+			bytes[i] = binary.charCodeAt(i);
+		}
+
+		return findExifOrientation(new DataView(bytes.buffer));
+	} catch {
+		return 1;
+	}
+}
+
+/**
+ * Walk the JPEG segments of a header buffer looking for the APP1 EXIF block
+ * @param view - DataView over the JPEG header bytes
+ * @returns The orientation value (1 to 8), or 1 when absent or malformed
+ */
+function findExifOrientation(view: DataView): number {
+	if (view.byteLength < 4 || view.getUint16(0) !== JPEG_SOI_MARKER) {
+		return 1;
+	}
+
+	let offset = 2;
+
+	while (offset + 4 <= view.byteLength) {
+		if (view.getUint8(offset) !== 0xff) {
+			return 1;
+		}
+
+		const marker = view.getUint8(offset + 1);
+
+		// Compressed image data starts here: no EXIF past this point
+		if (marker === SOS_MARKER) {
+			return 1;
+		}
+
+		const segmentLength = view.getUint16(offset + 2);
+
+		if (marker === APP1_MARKER) {
+			return parseExifOrientation(view, offset + 4, segmentLength);
+		}
+
+		offset += 2 + segmentLength;
+	}
+
+	return 1;
+}
+
+/**
+ * Parse the orientation tag from an APP1 EXIF payload
+ * @param view - DataView over the JPEG header bytes
+ * @param start - Offset of the APP1 payload, right after the segment length
+ * @param segmentLength - Declared APP1 segment length
+ * @returns The orientation value (1 to 8), or 1 when absent or malformed
+ */
+function parseExifOrientation(view: DataView, start: number, segmentLength: number): number {
+	const end = Math.min(start + segmentLength, view.byteLength);
+
+	// The payload opens with the "Exif\0\0" signature
+	if (
+		start + 6 > end ||
+		view.getUint32(start) !== EXIF_SIGNATURE ||
+		view.getUint16(start + 4) !== 0
+	) {
+		return 1;
+	}
+
+	const tiff = start + 6;
+
+	if (tiff + 8 > end) {
+		return 1;
+	}
+
+	const littleEndian = view.getUint16(tiff) === TIFF_LITTLE_ENDIAN;
+
+	if (view.getUint16(tiff + 2, littleEndian) !== TIFF_MAGIC) {
+		return 1;
+	}
+
+	const ifdOffset = view.getUint32(tiff + 4, littleEndian);
+
+	if (tiff + ifdOffset + 2 > end) {
+		return 1;
+	}
+
+	const entryCount = view.getUint16(tiff + ifdOffset, littleEndian);
+
+	// Scan IFD0 entries for the orientation tag
+	for (let i = 0; i < entryCount; i++) {
+		const entry = tiff + ifdOffset + 2 + i * IFD_ENTRY_SIZE;
+
+		if (entry + IFD_ENTRY_SIZE > end) {
+			return 1;
+		}
+
+		if (view.getUint16(entry, littleEndian) === EXIF_ORIENTATION_TAG) {
+			const orientation = view.getUint16(entry + 8, littleEndian);
+
+			return orientation >= 1 && orientation <= 8 ? orientation : 1;
+		}
+	}
+
+	return 1;
+}
+
+/**
+ * Check if a MIME type represents a JPEG
+ * @param mimeType - The MIME type to check
+ * @returns True if the MIME type is a JPEG variant
+ */
+export function isJpegMimeType(mimeType: string): boolean {
+	return mimeType === MimeTypeImage.JPEG || mimeType === MimeTypeImage.JPG;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/latex-protection.ts b/backend/llama.cpp/tools/ui/src/lib/utils/latex-protection.ts
new file mode 100644
index 0000000000000000000000000000000000000000..839306978f332d32ea637e283893909ffe13cd4e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/latex-protection.ts
@@ -0,0 +1,270 @@
+import {
+	CODE_BLOCK_REGEXP,
+	LATEX_MATH_AND_CODE_PATTERN,
+	LATEX_LINEBREAK_REGEXP,
+	MHCHEM_PATTERN_MAP
+} from '$lib/constants';
+
+/**
+ * Replaces inline LaTeX expressions enclosed in `$...$` with placeholders, avoiding dollar signs
+ * that appear to be part of monetary values or identifiers.
+ *
+ * This function processes the input line by line and skips `$` sequences that are likely
+ * part of money amounts (e.g., `$5`, `$100.99`) or code-like tokens (e.g., `var$`, `$var`).
+ * Valid LaTeX inline math is replaced with a placeholder like `<<LATEX_0>>`, and the
+ * actual LaTeX content is stored in the provided `latexExpressions` array.
+ *
+ * @param content - The input text potentially containing LaTeX expressions.
+ * @param latexExpressions - An array used to collect extracted LaTeX expressions.
+ * @returns The processed string with LaTeX replaced by placeholders.
+ */
+export function maskInlineLaTeX(content: string, latexExpressions: string[]): string {
+	if (!content.includes('$')) {
+		return content;
+	}
+	return content
+		.split('\n')
+		.map((line) => {
+			if (line.indexOf('$') == -1) {
+				return line;
+			}
+
+			let processedLine = '';
+			let currentPosition = 0;
+
+			while (currentPosition < line.length) {
+				const openDollarIndex = line.indexOf('$', currentPosition);
+
+				if (openDollarIndex == -1) {
+					processedLine += line.slice(currentPosition);
+					break;
+				}
+
+				// Is there a next $-sign?
+				const closeDollarIndex = line.indexOf('$', openDollarIndex + 1);
+
+				if (closeDollarIndex == -1) {
+					processedLine += line.slice(currentPosition);
+					break;
+				}
+
+				const charBeforeOpen = openDollarIndex > 0 ? line[openDollarIndex - 1] : '';
+				const charAfterOpen = line[openDollarIndex + 1];
+				const charBeforeClose =
+					openDollarIndex + 1 < closeDollarIndex ? line[closeDollarIndex - 1] : '';
+				const charAfterClose = closeDollarIndex + 1 < line.length ? line[closeDollarIndex + 1] : '';
+
+				let shouldSkipAsNonLatex = false;
+
+				if (closeDollarIndex == currentPosition + 1) {
+					// No content
+					shouldSkipAsNonLatex = true;
+				}
+
+				if (/[A-Za-z0-9_$-]/.test(charBeforeOpen)) {
+					// Character, digit, $, _ or - before first '$', no TeX.
+					shouldSkipAsNonLatex = true;
+				}
+
+				if (
+					/[0-9]/.test(charAfterOpen) &&
+					(/[A-Za-z0-9_$-]/.test(charAfterClose) || ' ' == charBeforeClose)
+				) {
+					// First $ seems to belong to an amount.
+					shouldSkipAsNonLatex = true;
+				}
+
+				if (shouldSkipAsNonLatex) {
+					processedLine += line.slice(currentPosition, openDollarIndex + 1);
+					currentPosition = openDollarIndex + 1;
+
+					continue;
+				}
+
+				// Treat as LaTeX
+				processedLine += line.slice(currentPosition, openDollarIndex);
+				const latexContent = line.slice(openDollarIndex, closeDollarIndex + 1);
+				latexExpressions.push(latexContent);
+				processedLine += `<<LATEX_${latexExpressions.length - 1}>>`;
+				currentPosition = closeDollarIndex + 1;
+			}
+
+			return processedLine;
+		})
+		.join('\n');
+}
+
+function escapeBrackets(text: string): string {
+	return text.replace(
+		LATEX_MATH_AND_CODE_PATTERN,
+		(
+			match: string,
+			codeBlock: string | undefined,
+			squareBracket: string | undefined,
+			roundBracket: string | undefined
+		): string => {
+			if (codeBlock != null) {
+				return codeBlock;
+			} else if (squareBracket != null) {
+				return `$$${squareBracket}$$`;
+			} else if (roundBracket != null) {
+				return `$${roundBracket}$`;
+			}
+
+			return match;
+		}
+	);
+}
+
+// Escape $\\ce{...} → $\\ce{...} but with proper handling
+function escapeMhchem(text: string): string {
+	return MHCHEM_PATTERN_MAP.reduce((result, [pattern, replacement]) => {
+		return result.replace(pattern, replacement);
+	}, text);
+}
+
+const doEscapeMhchem = false;
+
+/**
+ * Preprocesses markdown content to safely handle LaTeX math expressions while protecting
+ * against false positives (e.g., dollar amounts like $5.99) and ensuring proper rendering.
+ *
+ * This function:
+ * - Protects code blocks (```) and inline code (`...`)
+ * - Safeguards block and inline LaTeX: \(...\), \[...\], $$...$$, and selective $...$
+ * - Escapes standalone dollar signs before numbers (e.g., $5 → \$5) to prevent misinterpretation
+ * - Restores protected LaTeX and code blocks after processing
+ * - Converts \(...\) → $...$ and \[...\] → $$...$$ for compatibility with math renderers
+ * - Applies additional escaping for brackets and mhchem syntax if needed
+ *
+ * @param content - The raw text (e.g., markdown) that may contain LaTeX or code blocks.
+ * @returns The preprocessed string with properly escaped and normalized LaTeX.
+ *
+ * @example
+ * preprocessLaTeX("Price: $10. The equation is \\(x^2\\).")
+ * // → "Price: $10. The equation is $x^2$."
+ */
+export function preprocessLaTeX(content: string): string {
+	// See also:
+	// https://github.com/danny-avila/LibreChat/blob/main/client/src/utils/latex.ts
+
+	// Step 0: Temporarily remove blockquote markers (>) to process LaTeX correctly
+	// Store the structure so we can restore it later
+	const blockquoteMarkers: Map<number, string> = new Map();
+	const lines = content.split('\n');
+	const processedLines = lines.map((line, index) => {
+		const match = line.match(/^(>\s*)/);
+		if (match) {
+			blockquoteMarkers.set(index, match[1]);
+			return line.slice(match[1].length);
+		}
+		return line;
+	});
+	content = processedLines.join('\n');
+
+	// Step 1: Protect code blocks
+	const codeBlocks: string[] = [];
+
+	content = content.replace(CODE_BLOCK_REGEXP, (match) => {
+		codeBlocks.push(match);
+
+		return `<<CODE_BLOCK_${codeBlocks.length - 1}>>`;
+	});
+
+	// Step 2: Protect existing LaTeX expressions
+	const latexExpressions: string[] = [];
+
+	// Match \S...\[...\] and protect them and insert a line-break.
+	content = content.replace(/([\S].*?)\\\[([\s\S]*?)\\\](.*)/g, (match, group1, group2, group3) => {
+		// Check if there are characters following the formula (display-formula in a table-cell?)
+		if (group1.endsWith('\\')) {
+			return match; // Backslash before \[, do nothing.
+		}
+		const hasSuffix = /\S/.test(group3);
+		let optBreak;
+
+		if (hasSuffix) {
+			latexExpressions.push(`\\(${group2.trim()}\\)`); // Convert into inline.
+			optBreak = '';
+		} else {
+			latexExpressions.push(`\\[${group2}\\]`);
+			optBreak = '\n';
+		}
+
+		return `${group1}${optBreak}<<LATEX_${latexExpressions.length - 1}>>${optBreak}${group3}`;
+	});
+
+	// Match \(...\), \[...\], $$...$$ and protect them
+	content = content.replace(
+		/(\$\$[\s\S]*?\$\$|(?<!\\)\\\[[\s\S]*?\\\]|(?<!\\)\\\(.*?\\\))/g,
+		(match) => {
+			latexExpressions.push(match);
+
+			return `<<LATEX_${latexExpressions.length - 1}>>`;
+		}
+	);
+
+	// Protect inline $...$ but NOT if it looks like money (e.g., $10, $3.99)
+	content = maskInlineLaTeX(content, latexExpressions);
+
+	// Step 3: Escape standalone $ before digits (currency like $5 → \$5)
+	// (Now that inline math is protected, this will only escape dollars not already protected)
+	content = content.replace(/\$(?=\d)/g, '\\$');
+
+	// Step 4: Restore protected LaTeX expressions (they are valid)
+	content = content.replace(/<<LATEX_(\d+)>>/g, (_, index) => {
+		let expr = latexExpressions[parseInt(index)];
+		const match = expr.match(LATEX_LINEBREAK_REGEXP);
+		if (match) {
+			// Katex: The $$-delimiters should be in their own line
+			// if there are \\-line-breaks.
+			const formula = match[1];
+			const prefix = formula.startsWith('\n') ? '' : '\n';
+			const suffix = formula.endsWith('\n') ? '' : '\n';
+			expr = '$$' + prefix + formula + suffix + '$$';
+		}
+		return expr;
+	});
+
+	// Step 5: Apply additional escaping functions (brackets and mhchem)
+	// This must happen BEFORE restoring code blocks to avoid affecting code content
+	content = escapeBrackets(content);
+
+	if (doEscapeMhchem && (content.includes('\\ce{') || content.includes('\\pu{'))) {
+		content = escapeMhchem(content);
+	}
+
+	// Step 6: Convert remaining \(...\) → $...$, \[...\] → $$...$$
+	// This must happen BEFORE restoring code blocks to avoid affecting code content
+	content = content
+		// Using the look‑behind pattern `(?<!\\)` we skip matches
+		// that are preceded by a backslash, e.g.
+		// `Definitions\\(also called macros)` (title of chapter 20 in The TeXbook).
+		.replace(/(?<!\\)\\\((.+?)\\\)/g, '$$$1$') // inline
+		.replace(
+			// Using the look‑behind pattern `(?<!\\)` we skip matches
+			// that are preceded by a backslash, e.g. `\\[4pt]`.
+			/(?<!\\)\\\[([\s\S]*?)\\\]/g, // display, see also PR #16599
+			(_, content: string) => {
+				return `$$${content}$$`;
+			}
+		);
+
+	// Step 7: Restore code blocks
+	// This happens AFTER all LaTeX conversions to preserve code content
+	content = content.replace(/<<CODE_BLOCK_(\d+)>>/g, (_, index) => {
+		return codeBlocks[parseInt(index)];
+	});
+
+	// Step 8: Restore blockquote markers
+	if (blockquoteMarkers.size > 0) {
+		const finalLines = content.split('\n');
+		const restoredLines = finalLines.map((line, index) => {
+			const marker = blockquoteMarkers.get(index);
+			return marker ? marker + line : line;
+		});
+		content = restoredLines.join('\n');
+	}
+
+	return content;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/legacy-migration.ts b/backend/llama.cpp/tools/ui/src/lib/utils/legacy-migration.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6b0890a363142828d1521b65a65987444bde7a20
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/legacy-migration.ts
@@ -0,0 +1,364 @@
+/**
+ * @deprecated Legacy migration utility — remove at some point in the future once all users have migrated to the new structured agentic message format.
+ *
+ * Converts old marker-based agentic messages to the new structured format
+ * with separate messages per turn.
+ *
+ * Old format: Single assistant message with markers in content:
+ *   <<<reasoning_content_start>>>...<<<reasoning_content_end>>>
+ *   <<<AGENTIC_TOOL_CALL_START>>>...<<<AGENTIC_TOOL_CALL_END>>>
+ *
+ * New format: Separate messages per turn:
+ *   - assistant (content + reasoningContent + toolCalls)
+ *   - tool (toolCallId + content)
+ *   - assistant (next turn)
+ *   - ...
+ */
+
+import { LEGACY_AGENTIC_REGEX, LEGACY_REASONING_TAGS } from '$lib/constants';
+import { DatabaseService } from '$lib/services/database.service';
+import { MessageRole, MessageType } from '$lib/enums';
+import type { DatabaseMessage } from '$lib/types/database';
+
+const MIGRATION_DONE_KEY = 'llama-ui-migration-v2-done';
+/** @deprecated Use {@link MIGRATION_DONE_KEY} instead */
+const DEPRECATED_MIGRATION_DONE_KEY = 'llama-webui-migration-v2-done';
+
+/**
+ * @deprecated Part of legacy migration — remove with the migration module.
+ * Check if migration has been performed.
+ */
+export function isMigrationNeeded(): boolean {
+	try {
+		// Check new key first, fall back to deprecated old key
+		if (localStorage.getItem(MIGRATION_DONE_KEY)) return false;
+		if (localStorage.getItem(DEPRECATED_MIGRATION_DONE_KEY)) {
+			// Migrate to new key
+			try {
+				localStorage.setItem(MIGRATION_DONE_KEY, String(Date.now()));
+				localStorage.removeItem(DEPRECATED_MIGRATION_DONE_KEY);
+			} catch {
+				// Ignore storage errors
+			}
+			return false;
+		}
+		return true;
+	} catch {
+		return false;
+	}
+}
+
+/**
+ * Mark migration as done.
+ */
+function markMigrationDone(): void {
+	try {
+		localStorage.setItem(MIGRATION_DONE_KEY, String(Date.now()));
+	} catch {
+		// Ignore localStorage errors
+	}
+}
+
+/**
+ * Check if a message has legacy markers in its content.
+ */
+function hasLegacyMarkers(message: DatabaseMessage): boolean {
+	if (!message.content) return false;
+	return LEGACY_AGENTIC_REGEX.HAS_LEGACY_MARKERS.test(message.content);
+}
+
+/**
+ * Extract reasoning content from legacy marker format.
+ */
+function extractLegacyReasoning(content: string): { reasoning: string; cleanContent: string } {
+	let reasoning = '';
+	let cleanContent = content;
+
+	// Extract all reasoning blocks
+	const re = new RegExp(LEGACY_AGENTIC_REGEX.REASONING_EXTRACT.source, 'g');
+	let match;
+	while ((match = re.exec(content)) !== null) {
+		reasoning += match[1];
+	}
+
+	// Remove reasoning tags from content
+	cleanContent = cleanContent
+		.replace(new RegExp(LEGACY_AGENTIC_REGEX.REASONING_BLOCK.source, 'g'), '')
+		.replace(LEGACY_AGENTIC_REGEX.REASONING_OPEN, '');
+
+	return { reasoning, cleanContent };
+}
+
+/**
+ * Parse legacy content with tool call markers into structured turns.
+ */
+interface ParsedTurn {
+	textBefore: string;
+	toolCalls: Array<{
+		name: string;
+		args: string;
+		result: string;
+	}>;
+}
+
+function parseLegacyToolCalls(content: string): ParsedTurn[] {
+	const turns: ParsedTurn[] = [];
+	const regex = new RegExp(LEGACY_AGENTIC_REGEX.COMPLETED_TOOL_CALL.source, 'g');
+
+	let lastIndex = 0;
+	let currentTurn: ParsedTurn = { textBefore: '', toolCalls: [] };
+	let match;
+
+	while ((match = regex.exec(content)) !== null) {
+		const textBefore = content.slice(lastIndex, match.index).trim();
+
+		// If there's text between tool calls and we already have tool calls,
+		// that means a new turn started (text after tool results = new LLM turn)
+		if (textBefore && currentTurn.toolCalls.length > 0) {
+			turns.push(currentTurn);
+			currentTurn = { textBefore, toolCalls: [] };
+		} else if (textBefore && currentTurn.toolCalls.length === 0) {
+			currentTurn.textBefore = textBefore;
+		}
+
+		currentTurn.toolCalls.push({
+			name: match[1],
+			args: match[2],
+			result: match[3].replace(/^\n+|\n+$/g, '')
+		});
+
+		lastIndex = match.index + match[0].length;
+	}
+
+	// Any remaining text after the last tool call
+	const remainingText = content.slice(lastIndex).trim();
+
+	if (currentTurn.toolCalls.length > 0) {
+		turns.push(currentTurn);
+	}
+
+	// If there's text after all tool calls, it's the final assistant response
+	if (remainingText) {
+		// Remove any partial/open markers
+		const cleanRemaining = remainingText
+			.replace(LEGACY_AGENTIC_REGEX.AGENTIC_TOOL_CALL_OPEN, '')
+			.trim();
+		if (cleanRemaining) {
+			turns.push({ textBefore: cleanRemaining, toolCalls: [] });
+		}
+	}
+
+	// If no tool calls found at all, return the original content as a single turn
+	if (turns.length === 0) {
+		turns.push({ textBefore: content.trim(), toolCalls: [] });
+	}
+
+	return turns;
+}
+
+/**
+ * Migrate a single conversation's messages from legacy format to new format.
+ */
+async function migrateConversation(convId: string): Promise<number> {
+	const allMessages = await DatabaseService.getConversationMessages(convId);
+	let migratedCount = 0;
+
+	for (const message of allMessages) {
+		if (message.role !== MessageRole.ASSISTANT) continue;
+		if (!hasLegacyMarkers(message)) {
+			// Still check for reasoning-only markers (no tool calls)
+			if (message.content?.includes(LEGACY_REASONING_TAGS.START)) {
+				const { reasoning, cleanContent } = extractLegacyReasoning(message.content);
+				await DatabaseService.updateMessage(message.id, {
+					content: cleanContent.trim(),
+					reasoningContent: reasoning || undefined
+				});
+				migratedCount++;
+			}
+			continue;
+		}
+
+		// Has agentic markers - full migration needed
+		const { reasoning, cleanContent } = extractLegacyReasoning(message.content);
+		const turns = parseLegacyToolCalls(cleanContent);
+
+		// Parse existing toolCalls JSON to try to match IDs
+		let existingToolCalls: Array<{
+			id: string;
+			function?: { name: string; arguments: string };
+		}> = [];
+		if (message.toolCalls) {
+			try {
+				existingToolCalls = JSON.parse(message.toolCalls);
+			} catch {
+				// Ignore
+			}
+		}
+
+		// First turn uses the existing message
+		const firstTurn = turns[0];
+		if (!firstTurn) continue;
+
+		// Match tool calls from the first turn to existing IDs
+		const firstTurnToolCalls = firstTurn.toolCalls.map((tc, i) => {
+			const existing =
+				existingToolCalls.find((e) => e.function?.name === tc.name) || existingToolCalls[i];
+			return {
+				id: existing?.id || `legacy_tool_${i}`,
+				type: 'function' as const,
+				function: { name: tc.name, arguments: tc.args }
+			};
+		});
+
+		// Update the existing message for the first turn
+		await DatabaseService.updateMessage(message.id, {
+			content: firstTurn.textBefore,
+			reasoningContent: reasoning || undefined,
+			toolCalls: firstTurnToolCalls.length > 0 ? JSON.stringify(firstTurnToolCalls) : ''
+		});
+
+		let currentParentId = message.id;
+		let toolCallIdCounter = existingToolCalls.length;
+
+		// Create tool result messages for the first turn
+		for (let i = 0; i < firstTurn.toolCalls.length; i++) {
+			const tc = firstTurn.toolCalls[i];
+			const toolCallId = firstTurnToolCalls[i]?.id || `legacy_tool_${i}`;
+
+			const toolMsg = await DatabaseService.createMessageBranch(
+				{
+					convId,
+					type: MessageType.TEXT,
+					role: MessageRole.TOOL,
+					content: tc.result,
+					toolCallId,
+					timestamp: message.timestamp + i + 1,
+					toolCalls: '',
+					children: []
+				},
+				currentParentId
+			);
+			currentParentId = toolMsg.id;
+		}
+
+		// Create messages for subsequent turns
+		for (let turnIdx = 1; turnIdx < turns.length; turnIdx++) {
+			const turn = turns[turnIdx];
+
+			const turnToolCalls = turn.toolCalls.map((tc, i) => {
+				const idx = toolCallIdCounter + i;
+				const existing = existingToolCalls[idx];
+				return {
+					id: existing?.id || `legacy_tool_${idx}`,
+					type: 'function' as const,
+					function: { name: tc.name, arguments: tc.args }
+				};
+			});
+			toolCallIdCounter += turn.toolCalls.length;
+
+			// Create assistant message for this turn
+			const assistantMsg = await DatabaseService.createMessageBranch(
+				{
+					convId,
+					type: MessageType.TEXT,
+					role: MessageRole.ASSISTANT,
+					content: turn.textBefore,
+					timestamp: message.timestamp + turnIdx * 100,
+					toolCalls: turnToolCalls.length > 0 ? JSON.stringify(turnToolCalls) : '',
+					children: [],
+					model: message.model
+				},
+				currentParentId
+			);
+			currentParentId = assistantMsg.id;
+
+			// Create tool result messages for this turn
+			for (let i = 0; i < turn.toolCalls.length; i++) {
+				const tc = turn.toolCalls[i];
+				const toolCallId = turnToolCalls[i]?.id || `legacy_tool_${toolCallIdCounter + i}`;
+
+				const toolMsg = await DatabaseService.createMessageBranch(
+					{
+						convId,
+						type: MessageType.TEXT,
+						role: MessageRole.TOOL,
+						content: tc.result,
+						toolCallId,
+						timestamp: message.timestamp + turnIdx * 100 + i + 1,
+						toolCalls: '',
+						children: []
+					},
+					currentParentId
+				);
+				currentParentId = toolMsg.id;
+			}
+		}
+
+		// Re-parent any children of the original message to the last created message
+		// (the original message's children list was the next user message or similar)
+		if (message.children.length > 0 && currentParentId !== message.id) {
+			for (const childId of message.children) {
+				// Skip children we just created (they were already properly parented)
+				const child = allMessages.find((m) => m.id === childId);
+				if (!child) continue;
+				// Only re-parent non-tool messages that were original children
+				if (child.role !== MessageRole.TOOL) {
+					await DatabaseService.updateMessage(childId, { parent: currentParentId });
+					// Add to new parent's children
+					const newParent = await DatabaseService.getConversationMessages(convId).then((msgs) =>
+						msgs.find((m) => m.id === currentParentId)
+					);
+					if (newParent && !newParent.children.includes(childId)) {
+						await DatabaseService.updateMessage(currentParentId, {
+							children: [...newParent.children, childId]
+						});
+					}
+				}
+			}
+			// Clear re-parented children from the original message
+			await DatabaseService.updateMessage(message.id, { children: [] });
+		}
+
+		migratedCount++;
+	}
+
+	return migratedCount;
+}
+
+/**
+ * @deprecated Part of legacy migration — remove with the migration module.
+ * Run the full migration across all conversations.
+ * This should be called once at app startup if migration is needed.
+ */
+export async function runLegacyMigration(): Promise<void> {
+	if (!isMigrationNeeded()) return;
+
+	if (import.meta.env.DEV && import.meta.env.VITE_DEBUG)
+		console.log('[Migration] Starting legacy message format migration...');
+
+	try {
+		const conversations = await DatabaseService.getAllConversations();
+		let totalMigrated = 0;
+
+		for (const conv of conversations) {
+			const count = await migrateConversation(conv.id);
+			totalMigrated += count;
+		}
+
+		if (import.meta.env.DEV && import.meta.env.VITE_DEBUG) {
+			if (totalMigrated > 0) {
+				console.log(
+					`[Migration] Migrated ${totalMigrated} messages across ${conversations.length} conversations`
+				);
+			} else {
+				console.log('[Migration] No legacy messages found, marking as done');
+			}
+		}
+
+		markMigrationDone();
+	} catch (error) {
+		console.error('[Migration] Failed to migrate legacy messages:', error);
+		// Still mark as done to avoid infinite retry loops
+		markMigrationDone();
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/mcp.ts b/backend/llama.cpp/tools/ui/src/lib/utils/mcp.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7ce7f19fe98d2025de9e1524f2ce063c361b21d1
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/mcp.ts
@@ -0,0 +1,321 @@
+import type { MCPServerSettingsEntry, MCPResourceContent, MCPResourceInfo } from '$lib/types';
+import {
+	MCPTransportType,
+	MCPLogLevel,
+	UrlProtocol,
+	MimeTypePrefix,
+	MimeTypeIncludes,
+	UriPattern,
+	MimeTypeText
+} from '$lib/enums';
+import {
+	DEFAULT_MCP_CONFIG,
+	MCP_SERVER_ID_PREFIX,
+	IMAGE_FILE_EXTENSION_REGEX,
+	CODE_FILE_EXTENSION_REGEX,
+	TEXT_FILE_EXTENSION_REGEX,
+	PROTOCOL_PREFIX_REGEX,
+	FILE_EXTENSION_REGEX,
+	DISPLAY_NAME_SEPARATOR_REGEX,
+	PATH_SEPARATOR,
+	RESOURCE_TEXT_CONTENT_SEPARATOR,
+	DEFAULT_RESOURCE_FILENAME,
+	MCP_SSE_ENDPOINT,
+	MCP_SSE_ENDPOINT_SLASH,
+	MCP_SSE_ENDPOINT_QUERY
+} from '$lib/constants';
+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();
+
+	if (
+		normalized.startsWith(UrlProtocol.WEBSOCKET) ||
+		normalized.startsWith(UrlProtocol.WEBSOCKET_SECURE)
+	) {
+		return MCPTransportType.WEBSOCKET;
+	}
+
+	if (
+		normalized.endsWith(MCP_SSE_ENDPOINT) ||
+		normalized.endsWith(MCP_SSE_ENDPOINT_SLASH) ||
+		normalized.includes(MCP_SSE_ENDPOINT_QUERY)
+	) {
+		return MCPTransportType.SSE;
+	}
+
+	return MCPTransportType.STREAMABLE_HTTP;
+}
+
+/**
+ * Parses MCP server settings from a JSON string or array.
+ * Preserves per-server requestTimeoutSeconds if stored, otherwise falls back to the global default.
+ * @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:
+				(entry as { requestTimeoutSeconds?: number })?.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(PATH_SEPARATOR).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(RESOURCE_TEXT_CONTENT_SEPARATOR);
+}
+
+/**
+ * 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 = DEFAULT_RESOURCE_FILENAME
+): 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/backend/llama.cpp/tools/ui/src/lib/utils/modality-file-validation.ts b/backend/llama.cpp/tools/ui/src/lib/utils/modality-file-validation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bf78a70088cf59a291b87355c7c3cc41ed7a274a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/modality-file-validation.ts
@@ -0,0 +1,169 @@
+/**
+ * File validation utilities based on model modalities
+ * Ensures only compatible file types are processed based on model capabilities
+ */
+
+import { getFileTypeCategory } from '$lib/utils';
+import { FileTypeCategory } from '$lib/enums';
+import type { ModalityCapabilities } from '$lib/types';
+
+/**
+ * Check if a file type is supported by the given modalities
+ * @param filename - The filename to check
+ * @param mimeType - The MIME type of the file
+ * @param capabilities - The modality capabilities to check against
+ * @returns true if the file type is supported
+ */
+export function isFileTypeSupportedByModel(
+	filename: string,
+	mimeType: string | undefined,
+	capabilities: ModalityCapabilities
+): boolean {
+	const category = mimeType ? getFileTypeCategory(mimeType) : null;
+
+	// If we can't determine the category from MIME type, fall back to general support check
+	if (!category) {
+		// For unknown types, only allow if they might be text files
+		// This is a conservative approach for edge cases
+		return true; // Let the existing isFileTypeSupported handle this
+	}
+
+	switch (category) {
+		case FileTypeCategory.TEXT:
+			// Text files are always supported
+			return true;
+
+		case FileTypeCategory.PDF:
+			// PDFs are always supported (will be processed as text for non-vision models)
+			return true;
+
+		case FileTypeCategory.IMAGE:
+			// Images require vision support
+			return capabilities.hasVision;
+
+		case FileTypeCategory.AUDIO:
+			// Audio files require audio support
+			return capabilities.hasAudio;
+
+		case FileTypeCategory.VIDEO:
+			// Video files require video support
+			return capabilities.hasVideo;
+
+		default:
+			// Unknown categories - be conservative and allow
+			return true;
+	}
+}
+
+/**
+ * Filter files based on model modalities and return supported/unsupported lists
+ * @param files - Array of files to filter
+ * @param capabilities - The modality capabilities to check against
+ * @returns Object with supportedFiles and unsupportedFiles arrays
+ */
+export function filterFilesByModalities(
+	files: File[],
+	capabilities: ModalityCapabilities
+): {
+	supportedFiles: File[];
+	unsupportedFiles: File[];
+	modalityReasons: Record<string, string>;
+} {
+	const supportedFiles: File[] = [];
+	const unsupportedFiles: File[] = [];
+	const modalityReasons: Record<string, string> = {};
+
+	const { hasVision, hasAudio, hasVideo } = capabilities;
+
+	for (const file of files) {
+		const category = getFileTypeCategory(file.type);
+		let isSupported = true;
+		let reason = '';
+
+		switch (category) {
+			case FileTypeCategory.IMAGE:
+				if (!hasVision) {
+					isSupported = false;
+					reason = 'Images require a vision-capable model';
+				}
+				break;
+
+			case FileTypeCategory.AUDIO:
+				if (!hasAudio) {
+					isSupported = false;
+					reason = 'Audio files require an audio-capable model';
+				}
+				break;
+
+			case FileTypeCategory.VIDEO:
+				if (!hasVideo) {
+					isSupported = false;
+					reason = 'Video files require a video-capable model';
+				}
+				break;
+
+			case FileTypeCategory.TEXT:
+			case FileTypeCategory.PDF:
+				// Always supported
+				break;
+
+			default:
+				// For unknown types, check if it's a generally supported file type
+				// This handles edge cases and maintains backward compatibility
+				break;
+		}
+
+		if (isSupported) {
+			supportedFiles.push(file);
+		} else {
+			unsupportedFiles.push(file);
+			modalityReasons[file.name] = reason;
+		}
+	}
+
+	return { supportedFiles, unsupportedFiles, modalityReasons };
+}
+
+/**
+ * Generate a user-friendly error message for unsupported files
+ * @param unsupportedFiles - Array of unsupported files
+ * @param modalityReasons - Reasons why files are unsupported
+ * @param capabilities - The modality capabilities to check against
+ * @returns Formatted error message
+ */
+export function generateModalityErrorMessage(
+	unsupportedFiles: File[],
+	modalityReasons: Record<string, string>,
+	capabilities: ModalityCapabilities
+): string {
+	if (unsupportedFiles.length === 0) return '';
+
+	const { hasVision, hasAudio, hasVideo } = capabilities;
+
+	let message = '';
+
+	if (unsupportedFiles.length === 1) {
+		const file = unsupportedFiles[0];
+		const reason = modalityReasons[file.name];
+		message = `The file "${file.name}" cannot be uploaded: ${reason}.`;
+	} else {
+		const fileNames = unsupportedFiles.map((f) => f.name).join(', ');
+		message = `The following files cannot be uploaded: ${fileNames}.`;
+	}
+
+	// Add helpful information about what is supported
+	const supportedTypes: string[] = ['text files', 'PDFs'];
+	if (hasVision) supportedTypes.push('images');
+	if (hasAudio) supportedTypes.push('audio files');
+	if (hasVideo) supportedTypes.push('video files');
+
+	message += ` This model supports: ${supportedTypes.join(', ')}.`;
+
+	return message;
+}
+
+/**
+ * Generate file input accept string based on model modalities
+ * @param capabilities - The modality capabilities to check against
+ * @returns Accept string for HTML file input element
+ */
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/model-names.ts b/backend/llama.cpp/tools/ui/src/lib/utils/model-names.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c0a1e1c578fb631175b107abae79a03eff382f55
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/model-names.ts
@@ -0,0 +1,56 @@
+/**
+ * Normalizes a model name by extracting the filename from a path, but preserves Hugging Face repository format.
+ *
+ * Handles both forward slashes (/) and backslashes (\) as path separators.
+ * - If the model name has exactly one slash (org/model format), preserves the full "org/model" name
+ * - If the model name has no slash or multiple slashes, extracts just the filename
+ * - If the model name is just a filename (no path), returns it as-is.
+ *
+ * @param modelName - The model name or path to normalize
+ * @returns The normalized model name
+ *
+ * @example
+ * normalizeModelName('models/llama-3.1-8b') // Returns: 'llama-3.1-8b' (multiple slashes -> filename)
+ * normalizeModelName('C:\\Models\\gpt-4') // Returns: 'gpt-4' (multiple slashes -> filename)
+ * normalizeModelName('meta-llama/Llama-3.1-8B') // Returns: 'meta-llama/Llama-3.1-8B' (Hugging Face format)
+ * normalizeModelName('simple-model') // Returns: 'simple-model' (no slash)
+ * normalizeModelName('  spaced  ') // Returns: 'spaced'
+ * normalizeModelName('') // Returns: ''
+ */
+export function normalizeModelName(modelName: string): string {
+	const trimmed = modelName.trim();
+
+	if (!trimmed) {
+		return '';
+	}
+
+	const segments = trimmed.split(/[\\/]/);
+
+	// If we have exactly 2 segments (one slash), treat it as Hugging Face repo format
+	// and preserve the full "org/model" format
+	if (segments.length === 2) {
+		const [org, model] = segments;
+		const trimmedOrg = org?.trim();
+		const trimmedModel = model?.trim();
+
+		if (trimmedOrg && trimmedModel) {
+			return `${trimmedOrg}/${trimmedModel}`;
+		}
+	}
+
+	// For other cases (no slash, or multiple slashes), extract just the filename
+	const candidate = segments.pop();
+	const normalized = candidate?.trim();
+
+	return normalized && normalized.length > 0 ? normalized : trimmed;
+}
+
+/**
+ * Validates if a model name is valid (non-empty after normalization).
+ *
+ * @param modelName - The model name to validate
+ * @returns true if valid, false otherwise
+ */
+export function isValidModelName(modelName: string): boolean {
+	return normalizeModelName(modelName).length > 0;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/pdf-processing.ts b/backend/llama.cpp/tools/ui/src/lib/utils/pdf-processing.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8cf99207cf3b4437da75435780b35ac69fe87fd9
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/pdf-processing.ts
@@ -0,0 +1,150 @@
+/**
+ * PDF processing utilities using PDF.js
+ * Handles PDF text extraction and image conversion in the browser
+ */
+
+import { browser } from '$app/environment';
+import { MimeTypeApplication, MimeTypeImage } from '$lib/enums';
+import * as pdfjs from 'pdfjs-dist';
+
+type TextContent = {
+	items: Array<{ str: string }>;
+};
+
+if (browser) {
+	// Import worker as text and create blob URL for inline bundling
+	import('pdfjs-dist/build/pdf.worker.min.mjs?raw')
+		.then((workerModule) => {
+			const workerBlob = new Blob([workerModule.default], { type: 'application/javascript' });
+			pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(workerBlob);
+		})
+		.catch(() => {
+			console.warn('Failed to load PDF.js worker, PDF processing may not work');
+		});
+}
+
+/**
+ * Convert a File object to ArrayBuffer for PDF.js processing
+ * @param file - The PDF file to convert
+ * @returns Promise resolving to the file's ArrayBuffer
+ */
+async function getFileAsBuffer(file: File): Promise<ArrayBuffer> {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = (event) => {
+			if (event.target?.result) {
+				resolve(event.target.result as ArrayBuffer);
+			} else {
+				reject(new Error('Failed to read file.'));
+			}
+		};
+		reader.onerror = () => {
+			reject(new Error('Failed to read file.'));
+		};
+		reader.readAsArrayBuffer(file);
+	});
+}
+
+/**
+ * Extract text content from a PDF file
+ * @param file - The PDF file to process
+ * @returns Promise resolving to the extracted text content
+ */
+export async function convertPDFToText(file: File): Promise<string> {
+	if (!browser) {
+		throw new Error('PDF processing is only available in the browser');
+	}
+
+	try {
+		const buffer = await getFileAsBuffer(file);
+		const pdf = await pdfjs.getDocument({ data: buffer }).promise;
+		const numPages = pdf.numPages;
+
+		const textContentPromises: Promise<TextContent>[] = [];
+
+		for (let i = 1; i <= numPages; i++) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			textContentPromises.push(pdf.getPage(i).then((page: any) => page.getTextContent()));
+		}
+
+		const textContents = await Promise.all(textContentPromises);
+		const textItems = textContents.flatMap((textContent: TextContent) =>
+			textContent.items.map((item) => item.str ?? '')
+		);
+
+		return textItems.join('\n');
+	} catch (error) {
+		console.error('Error converting PDF to text:', error);
+		throw new Error(
+			`Failed to convert PDF to text: ${error instanceof Error ? error.message : 'Unknown error'}`
+		);
+	}
+}
+
+/**
+ * Convert PDF pages to PNG images as data URLs
+ * @param file - The PDF file to convert
+ * @param scale - Rendering scale factor (default: 1.5)
+ * @returns Promise resolving to array of PNG data URLs
+ */
+export async function convertPDFToImage(file: File, scale: number = 1.5): Promise<string[]> {
+	if (!browser) {
+		throw new Error('PDF processing is only available in the browser');
+	}
+
+	try {
+		const buffer = await getFileAsBuffer(file);
+		const doc = await pdfjs.getDocument({ data: buffer }).promise;
+		const pages: Promise<string>[] = [];
+
+		for (let i = 1; i <= doc.numPages; i++) {
+			const page = await doc.getPage(i);
+			const viewport = page.getViewport({ scale });
+			const canvas = document.createElement('canvas');
+			const ctx = canvas.getContext('2d');
+
+			canvas.width = viewport.width;
+			canvas.height = viewport.height;
+
+			if (!ctx) {
+				throw new Error('Failed to get 2D context from canvas');
+			}
+
+			const task = page.render({
+				canvasContext: ctx,
+				viewport: viewport,
+				canvas: canvas
+			});
+			pages.push(
+				task.promise.then(() => {
+					return canvas.toDataURL(MimeTypeImage.PNG);
+				})
+			);
+		}
+
+		return await Promise.all(pages);
+	} catch (error) {
+		console.error('Error converting PDF to images:', error);
+		throw new Error(
+			`Failed to convert PDF to images: ${error instanceof Error ? error.message : 'Unknown error'}`
+		);
+	}
+}
+
+/**
+ * Check if a file is a PDF based on its MIME type
+ * @param file - The file to check
+ * @returns True if the file is a PDF
+ */
+export function isPdfFile(file: File): boolean {
+	return file.type === MimeTypeApplication.PDF;
+}
+
+/**
+ * Check if a MIME type represents a PDF
+ * @param mimeType - The MIME type to check
+ * @returns True if the MIME type is application/pdf
+ */
+export function isApplicationMimeType(mimeType: string): boolean {
+	return mimeType === MimeTypeApplication.PDF;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/portal-to-body.ts b/backend/llama.cpp/tools/ui/src/lib/utils/portal-to-body.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bffbe890069485a16c50c20c9180b0d9651ad982
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/portal-to-body.ts
@@ -0,0 +1,20 @@
+export function portalToBody(node: HTMLElement) {
+	if (typeof document === 'undefined') {
+		return;
+	}
+
+	const target = document.body;
+	if (!target) {
+		return;
+	}
+
+	target.appendChild(node);
+
+	return {
+		destroy() {
+			if (node.parentNode === target) {
+				target.removeChild(node);
+			}
+		}
+	};
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/precision.ts b/backend/llama.cpp/tools/ui/src/lib/utils/precision.ts
new file mode 100644
index 0000000000000000000000000000000000000000..500281dc9a247b17aa5b552afa24f7caed01ce7a
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/precision.ts
@@ -0,0 +1,25 @@
+/**
+ * Floating-point precision utilities
+ *
+ * Provides functions to normalize floating-point numbers for consistent comparison
+ * and display, addressing JavaScript's floating-point precision issues.
+ */
+
+import { PRECISION_MULTIPLIER } from '$lib/constants';
+
+/**
+ * Normalize floating-point numbers for consistent comparison
+ * Addresses JavaScript floating-point precision issues (e.g., 0.949999988079071 → 0.95)
+ */
+export function normalizeFloatingPoint(value: unknown): unknown {
+	return typeof value === 'number'
+		? Math.round(value * PRECISION_MULTIPLIER) / PRECISION_MULTIPLIER
+		: value;
+}
+
+/**
+ * Type-safe version that only accepts numbers
+ */
+export function normalizeNumber(value: number): number {
+	return Math.round(value * PRECISION_MULTIPLIER) / PRECISION_MULTIPLIER;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/process-uploaded-files.ts b/backend/llama.cpp/tools/ui/src/lib/utils/process-uploaded-files.ts
new file mode 100644
index 0000000000000000000000000000000000000000..91b619cfb925fe10f19576e2d44bbe98f580177d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/process-uploaded-files.ts
@@ -0,0 +1,149 @@
+import { isSvgMimeType, svgBase64UrlToPngDataURL } from './svg-to-png';
+import { isWebpMimeType, webpBase64UrlToPngDataURL } from './webp-to-png';
+import { heicFileToJpegDataURL, isHeicMimeType } from './heic-to-jpeg';
+import { FileTypeCategory } from '$lib/enums';
+import { SETTINGS_KEYS } from '$lib/constants';
+import { modelsStore } from '$lib/stores/models.svelte';
+import { settingsStore } from '$lib/stores/settings.svelte';
+import { toast } from 'svelte-sonner';
+import { getFileTypeCategory } from '$lib/utils';
+import { convertPDFToText } from './pdf-processing';
+
+/**
+ * Read a file as a data URL (base64 encoded)
+ * @param file - The file to read
+ * @returns Promise resolving to the data URL string
+ */
+function readFileAsDataURL(file: File): Promise<string> {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => resolve(reader.result as string);
+		reader.onerror = () => reject(reader.error);
+		reader.readAsDataURL(file);
+	});
+}
+
+/**
+ * Read a file as UTF-8 text
+ * @param file - The file to read
+ * @returns Promise resolving to the text content
+ */
+function readFileAsUTF8(file: File): Promise<string> {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => resolve(reader.result as string);
+		reader.onerror = () => reject(reader.error);
+		reader.readAsText(file);
+	});
+}
+
+/**
+ * Process uploaded files into ChatUploadedFile format with previews and content
+ *
+ * This function processes various file types and generates appropriate previews:
+ * - Images: Base64 data URLs with format normalization (SVG/WebP → PNG)
+ * - Text files: UTF-8 content extraction
+ * - PDFs: Metadata only (processed later in conversion pipeline)
+ * - Audio: Base64 data URLs for preview
+ *
+ * @param files - Array of File objects to process
+ * @returns Promise resolving to array of ChatUploadedFile objects
+ */
+export async function processFilesToChatUploaded(
+	files: File[],
+	activeModelId?: string
+): Promise<ChatUploadedFile[]> {
+	const results: ChatUploadedFile[] = [];
+
+	for (const file of files) {
+		const id = Date.now().toString() + Math.random().toString(36).substr(2, 9);
+		const base: ChatUploadedFile = {
+			id,
+			name: file.name,
+			size: file.size,
+			type: file.type,
+			file
+		};
+
+		try {
+			if (getFileTypeCategory(file.type) === FileTypeCategory.IMAGE) {
+				let preview = await readFileAsDataURL(file);
+
+				// Normalize SVG and WebP to PNG, and HEIC to compressed JPEG, in previews
+				if (isSvgMimeType(file.type)) {
+					try {
+						preview = await svgBase64UrlToPngDataURL(preview);
+					} catch (err) {
+						console.error('Failed to convert SVG to PNG:', err);
+					}
+				} else if (isWebpMimeType(file.type)) {
+					try {
+						preview = await webpBase64UrlToPngDataURL(preview);
+					} catch (err) {
+						console.error('Failed to convert WebP to PNG:', err);
+					}
+				} else if (isHeicMimeType(file.type)) {
+					try {
+						preview = await heicFileToJpegDataURL(file);
+					} catch (err) {
+						console.error('Failed to convert HEIC to PNG:', err);
+						continue;
+					}
+				}
+
+				results.push({ ...base, preview });
+			} else if (getFileTypeCategory(file.type) === FileTypeCategory.PDF) {
+				// Extract text content from PDF for preview
+				try {
+					const textContent = await convertPDFToText(file);
+					results.push({ ...base, textContent });
+				} catch (err) {
+					console.warn('Failed to extract text from PDF, adding without content:', err);
+					results.push(base);
+				}
+
+				// Show suggestion toast if vision model is available but PDF as image is disabled
+				const hasVisionSupport = activeModelId
+					? modelsStore.modelSupportsVision(activeModelId)
+					: false;
+				const currentConfig = settingsStore.config;
+				if (hasVisionSupport && !currentConfig.pdfAsImage) {
+					toast.info(`You can enable parsing PDF as images with vision models.`, {
+						duration: 8000,
+						action: {
+							label: 'Enable PDF as Images',
+							onClick: () => {
+								settingsStore.updateConfig(SETTINGS_KEYS.PDF_AS_IMAGE, true);
+								toast.success('PDF parsing as images enabled!', {
+									duration: 3000
+								});
+							}
+						}
+					});
+				}
+			} else if (getFileTypeCategory(file.type) === FileTypeCategory.AUDIO) {
+				// Generate preview URL for audio files
+				const preview = await readFileAsDataURL(file);
+				results.push({ ...base, preview });
+			} else if (getFileTypeCategory(file.type) === FileTypeCategory.VIDEO) {
+				// Generate preview URL for video files
+				const preview = await readFileAsDataURL(file);
+				results.push({ ...base, preview });
+			} else {
+				// Fallback: treat unknown files as text
+				try {
+					const textContent = await readFileAsUTF8(file);
+					results.push({ ...base, textContent });
+				} catch (err) {
+					console.warn('Failed to read file as text, adding without content:', err);
+					results.push(base);
+				}
+			}
+		} catch (error) {
+			console.error('Error processing file', file.name, error);
+			results.push(base);
+		}
+	}
+
+	return results;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/progress.ts b/backend/llama.cpp/tools/ui/src/lib/utils/progress.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4d7e22388223760dbb7ca9909ce431bbaf24b4d0
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/progress.ts
@@ -0,0 +1,43 @@
+/**
+ * Model load progress helpers for the /models/sse surfaces
+ * (selector row and chat message).
+ */
+
+import { MODEL_LOAD_STAGE_LABELS, MODEL_LOAD_TAIL_SHARE } from '$lib/constants';
+
+/**
+ * Human label for a model load stage.
+ */
+export function modelLoadStageLabel(stage: ApiModelLoadStage): string {
+	return MODEL_LOAD_STAGE_LABELS[stage];
+}
+
+/**
+ * Overall load fraction (0.0 -> 1.0) across the declared stage plan.
+ * text_model fills [0, 1 - tail], each later phase owns one tail slice.
+ */
+export function modelLoadFraction(progress: ModelLoadProgress | null): number {
+	if (!progress) return 0;
+
+	const { stages, current, value } = progress;
+	const tailCount = Math.max(stages.length - 1, 0);
+	const textCeiling = 1 - tailCount * MODEL_LOAD_TAIL_SHARE;
+	const idx = stages.indexOf(current);
+
+	if (idx <= 0) {
+		return value * textCeiling;
+	}
+
+	return textCeiling + (idx - 1 + value) * MODEL_LOAD_TAIL_SHARE;
+}
+
+/**
+ * Single line describing load progress: active stage label and overall percent.
+ * Returns null when there is no progress to show.
+ */
+export function modelLoadProgressText(progress: ModelLoadProgress | null): string | null {
+	if (!progress) return null;
+
+	const label = modelLoadStageLabel(progress.current);
+	return `${label} ${Math.round(modelLoadFraction(progress) * 100)}%`;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/redact.ts b/backend/llama.cpp/tools/ui/src/lib/utils/redact.ts
new file mode 100644
index 0000000000000000000000000000000000000000..851be7bf4b34ba6293f0cf0a0f82c06a6c1d07a7
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/redact.ts
@@ -0,0 +1,14 @@
+/**
+ * Redacts a sensitive value, optionally showing the last N characters.
+ *
+ * @param value - The value to redact
+ * @param showLastChars - If provided, reveals the last N characters with a leading mask
+ * @returns The redacted string
+ */
+export function redactValue(value: string, showLastChars?: number): string {
+	if (showLastChars) {
+		return `....${value.slice(-showLastChars)}`;
+	}
+
+	return '[redacted]';
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/request-helpers.ts b/backend/llama.cpp/tools/ui/src/lib/utils/request-helpers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8a11b8fb5ec3c5e90ac8f9f211598ece19a4b781
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/request-helpers.ts
@@ -0,0 +1,111 @@
+/**
+ * HTTP request inspection utilities for diagnostic logging.
+ * These helpers extract metadata from fetch-style request arguments
+ * without exposing sensitive payload data.
+ */
+
+export interface RequestBodySummary {
+	kind: string;
+	size?: number;
+}
+
+export function getRequestUrl(input: RequestInfo | URL): string {
+	if (typeof input === 'string') {
+		return input;
+	}
+
+	if (input instanceof URL) {
+		return input.href;
+	}
+
+	return input.url;
+}
+
+export function getRequestMethod(
+	input: RequestInfo | URL,
+	init?: RequestInit,
+	baseInit?: RequestInit
+): string {
+	if (init?.method) {
+		return init.method;
+	}
+
+	if (typeof Request !== 'undefined' && input instanceof Request) {
+		return input.method;
+	}
+
+	return baseInit?.method ?? 'GET';
+}
+
+export function getRequestBody(
+	input: RequestInfo | URL,
+	init?: RequestInit
+): BodyInit | null | undefined {
+	if (init?.body !== undefined) {
+		return init.body;
+	}
+
+	if (typeof Request !== 'undefined' && input instanceof Request) {
+		return input.body;
+	}
+
+	return undefined;
+}
+
+export function summarizeRequestBody(body: BodyInit | null | undefined): RequestBodySummary {
+	if (body == null) {
+		return { kind: 'empty' };
+	}
+
+	if (typeof body === 'string') {
+		return { kind: 'string', size: body.length };
+	}
+
+	if (body instanceof Blob) {
+		return { kind: 'blob', size: body.size };
+	}
+
+	if (body instanceof URLSearchParams) {
+		return { kind: 'urlsearchparams', size: body.toString().length };
+	}
+
+	if (body instanceof FormData) {
+		return { kind: 'formdata' };
+	}
+
+	if (body instanceof ArrayBuffer) {
+		return { kind: 'arraybuffer', size: body.byteLength };
+	}
+
+	if (ArrayBuffer.isView(body)) {
+		return { kind: body.constructor.name, size: body.byteLength };
+	}
+
+	return { kind: typeof body };
+}
+
+export function formatDiagnosticErrorMessage(error: unknown): string {
+	const message = error instanceof Error ? error.message : String(error);
+
+	return message.includes('Failed to fetch') ? `${message} (check CORS?)` : message;
+}
+
+export function extractJsonRpcMethods(body: BodyInit | null | undefined): string[] | undefined {
+	if (typeof body !== 'string') {
+		return undefined;
+	}
+
+	try {
+		const parsed = JSON.parse(body);
+		const messages = Array.isArray(parsed) ? parsed : [parsed];
+		const methods = messages
+			.map((message: Record<string, unknown>) =>
+				typeof message?.method === 'string' ? (message.method as string) : undefined
+			)
+			.filter((method: string | undefined): method is string => Boolean(method));
+
+		return methods.length > 0 ? methods : undefined;
+	} catch {
+		return undefined;
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/sanitize-svg.ts b/backend/llama.cpp/tools/ui/src/lib/utils/sanitize-svg.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e5a9493efe24e23650c447156fe3af239436c423
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/sanitize-svg.ts
@@ -0,0 +1,22 @@
+import DOMPurify from 'dompurify';
+import { SVG_MAX_BYTES, SVG_SANITIZE_CONFIG, SVG_TAG_PREFIX } from '$lib/constants';
+
+/**
+ * Sanitizes a raw svg string for safe inline rendering.
+ * Returns the cleaned svg markup, or an empty string when the input is not a
+ * usable svg, exceeds the size ceiling, or sanitizes to nothing. An empty
+ * return tells the caller to keep the raw code block instead of rendering.
+ */
+export function sanitizeSvg(source: string): string {
+	const trimmed = source.trim();
+
+	if (!trimmed || trimmed.length > SVG_MAX_BYTES) return '';
+
+	if (!trimmed.startsWith(SVG_TAG_PREFIX)) return '';
+
+	const clean = DOMPurify.sanitize(trimmed, SVG_SANITIZE_CONFIG) as unknown as string;
+
+	if (!clean || !clean.includes(SVG_TAG_PREFIX)) return '';
+
+	return clean;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/sanitize.ts b/backend/llama.cpp/tools/ui/src/lib/utils/sanitize.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6078ecdf73f4dd95b77b635e11b69da6b731508e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/sanitize.ts
@@ -0,0 +1,23 @@
+import {
+	KEY_VALUE_PAIR_KEY_MAX_LENGTH,
+	KEY_VALUE_PAIR_VALUE_MAX_LENGTH,
+	KEY_VALUE_PAIR_UNSAFE_KEY_RE,
+	KEY_VALUE_PAIR_UNSAFE_VALUE_RE
+} from '$lib/constants';
+
+/**
+ * Strip control characters unsafe in identifier/header-name contexts and cap length.
+ * Removes all C0 controls (including TAB) and DEL.
+ */
+export function sanitizeKeyValuePairKey(raw: string): string {
+	return raw.replace(KEY_VALUE_PAIR_UNSAFE_KEY_RE, '').slice(0, KEY_VALUE_PAIR_KEY_MAX_LENGTH);
+}
+
+/**
+ * Strip control characters that enable header injection; allow TAB; cap length.
+ * Removes null bytes, CR/LF and other C0/DEL controls while keeping TAB (\x09),
+ * which is a valid header-value continuation character per RFC 7230.
+ */
+export function sanitizeKeyValuePairValue(raw: string): string {
+	return raw.replace(KEY_VALUE_PAIR_UNSAFE_VALUE_RE, '').slice(0, KEY_VALUE_PAIR_VALUE_MAX_LENGTH);
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/stream-identity.ts b/backend/llama.cpp/tools/ui/src/lib/utils/stream-identity.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ce88df00744300f98c2f1f76a3ebafd5b7e849ca
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/stream-identity.ts
@@ -0,0 +1,13 @@
+/**
+ * Build the conversation identity used by the server side replay buffer.
+ *
+ * The server identifies a stream session by a conversation id sent in the
+ * X-Conversation-Id header. When the user has explicitly picked a model the
+ * client appends ::modelName, so a per model session stays distinct and the
+ * router resolves the owning child through its conv_id -> model map.
+ */
+export function streamIdentity(conversationId: string, model?: string | null): string {
+	if (!conversationId) return '';
+	if (!model) return conversationId;
+	return `${conversationId}::${model}`;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/svg-shadow.ts b/backend/llama.cpp/tools/ui/src/lib/utils/svg-shadow.ts
new file mode 100644
index 0000000000000000000000000000000000000000..71caff8c24ce134bd585bd55592ccdbac2d57fc5
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/svg-shadow.ts
@@ -0,0 +1,10 @@
+/**
+ * Mounts svg markup inside an open shadow root on the host element.
+ * The shadow boundary scopes the svg <style> and its animations to the host,
+ * so model authored css can not reach the surrounding page. The caller passes
+ * markup that is already sanitized, this only isolates and sizes it.
+ */
+export function mountSvgShadow(host: HTMLElement, markup: string, style: string): void {
+	const root = host.shadowRoot ?? host.attachShadow({ mode: 'open' });
+	root.innerHTML = markup ? `<style>${style}</style>${markup}` : '';
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/svg-to-png.ts b/backend/llama.cpp/tools/ui/src/lib/utils/svg-to-png.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d5a7f7d8340d159e2e14fddf15352181b01b3ad4
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/svg-to-png.ts
@@ -0,0 +1,71 @@
+import { MimeTypeImage } from '$lib/enums';
+
+/**
+ * Convert an SVG base64 data URL to a PNG data URL
+ * @param base64UrlSvg - The SVG base64 data URL to convert
+ * @param backgroundColor - Background color for the PNG (default: 'white')
+ * @returns Promise resolving to PNG data URL
+ */
+export function svgBase64UrlToPngDataURL(
+	base64UrlSvg: string,
+	backgroundColor: string = 'white'
+): Promise<string> {
+	return new Promise((resolve, reject) => {
+		try {
+			const img = new Image();
+
+			img.onload = () => {
+				const canvas = document.createElement('canvas');
+				const ctx = canvas.getContext('2d');
+
+				if (!ctx) {
+					reject(new Error('Failed to get 2D canvas context.'));
+					return;
+				}
+
+				const targetWidth = img.naturalWidth || 300;
+				const targetHeight = img.naturalHeight || 300;
+
+				canvas.width = targetWidth;
+				canvas.height = targetHeight;
+
+				if (backgroundColor) {
+					ctx.fillStyle = backgroundColor;
+					ctx.fillRect(0, 0, canvas.width, canvas.height);
+				}
+				ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
+
+				resolve(canvas.toDataURL(MimeTypeImage.PNG));
+			};
+
+			img.onerror = () => {
+				reject(new Error('Failed to load SVG image. Ensure the SVG data is valid.'));
+			};
+
+			img.src = base64UrlSvg;
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			const errorMessage = `Error converting SVG to PNG: ${message}`;
+			console.error(errorMessage, error);
+			reject(new Error(errorMessage));
+		}
+	});
+}
+
+/**
+ * Check if a file is an SVG based on its MIME type
+ * @param file - The file to check
+ * @returns True if the file is an SVG
+ */
+export function isSvgFile(file: File): boolean {
+	return file.type === MimeTypeImage.SVG;
+}
+
+/**
+ * Check if a MIME type represents an SVG
+ * @param mimeType - The MIME type to check
+ * @returns True if the MIME type is image/svg+xml
+ */
+export function isSvgMimeType(mimeType: string): boolean {
+	return mimeType === MimeTypeImage.SVG;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/syntax-highlight-language.ts b/backend/llama.cpp/tools/ui/src/lib/utils/syntax-highlight-language.ts
new file mode 100644
index 0000000000000000000000000000000000000000..538429182e380bf3caaeb23cf89bc946fc7b66df
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/syntax-highlight-language.ts
@@ -0,0 +1,145 @@
+/**
+ * Maps file extensions to highlight.js language identifiers
+ */
+export function getLanguageFromFilename(filename: string): string {
+	const extension = filename.toLowerCase().substring(filename.lastIndexOf('.'));
+
+	switch (extension) {
+		// JavaScript / TypeScript
+		case '.js':
+		case '.mjs':
+		case '.cjs':
+			return 'javascript';
+		case '.ts':
+		case '.mts':
+		case '.cts':
+			return 'typescript';
+		case '.jsx':
+			return 'javascript';
+		case '.tsx':
+			return 'typescript';
+
+		// Web
+		case '.html':
+		case '.htm':
+			return 'html';
+		case '.css':
+			return 'css';
+		case '.scss':
+			return 'scss';
+		case '.less':
+			return 'less';
+		case '.vue':
+			return 'html';
+		case '.svelte':
+			return 'html';
+
+		// Data formats
+		case '.json':
+			return 'json';
+		case '.xml':
+			return 'xml';
+		case '.yaml':
+		case '.yml':
+			return 'yaml';
+		case '.toml':
+			return 'ini';
+		case '.csv':
+			return 'plaintext';
+
+		// Programming languages
+		case '.py':
+			return 'python';
+		case '.java':
+			return 'java';
+		case '.kt':
+		case '.kts':
+			return 'kotlin';
+		case '.scala':
+			return 'scala';
+		case '.cpp':
+		case '.cc':
+		case '.cxx':
+		case '.c++':
+			return 'cpp';
+		case '.c':
+			return 'c';
+		case '.h':
+		case '.hpp':
+			return 'cpp';
+		case '.cs':
+			return 'csharp';
+		case '.go':
+			return 'go';
+		case '.rs':
+			return 'rust';
+		case '.rb':
+			return 'ruby';
+		case '.php':
+			return 'php';
+		case '.swift':
+			return 'swift';
+		case '.dart':
+			return 'dart';
+		case '.r':
+			return 'r';
+		case '.lua':
+			return 'lua';
+		case '.pl':
+		case '.pm':
+			return 'perl';
+
+		// Shell
+		case '.sh':
+		case '.bash':
+		case '.zsh':
+			return 'bash';
+		case '.bat':
+		case '.cmd':
+			return 'dos';
+		case '.ps1':
+			return 'powershell';
+
+		// Database
+		case '.sql':
+			return 'sql';
+
+		// Markup / Documentation
+		case '.md':
+		case '.markdown':
+			return 'markdown';
+		case '.tex':
+		case '.latex':
+			return 'latex';
+		case '.adoc':
+		case '.asciidoc':
+			return 'asciidoc';
+
+		// Config
+		case '.ini':
+		case '.cfg':
+		case '.conf':
+			return 'ini';
+		case '.dockerfile':
+			return 'dockerfile';
+		case '.nginx':
+			return 'nginx';
+
+		// Other
+		case '.graphql':
+		case '.gql':
+			return 'graphql';
+		case '.proto':
+			return 'protobuf';
+		case '.diff':
+		case '.patch':
+			return 'diff';
+		case '.log':
+			return 'plaintext';
+		case '.txt':
+			return 'plaintext';
+
+		default:
+			return 'plaintext';
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/text-files.ts b/backend/llama.cpp/tools/ui/src/lib/utils/text-files.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3f7a55ebc26da161e72e8b627ef84e371ea803bf
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/text-files.ts
@@ -0,0 +1,95 @@
+/**
+ * Text file processing utilities
+ * Handles text file detection, reading, and validation
+ */
+
+import { DEFAULT_BINARY_DETECTION_OPTIONS } from '$lib/constants';
+import type { BinaryDetectionOptions } from '$lib/types';
+import { FileExtensionText } from '$lib/enums';
+
+/**
+ * Check if a filename indicates a text file based on its extension
+ * @param filename - The filename to check
+ * @returns True if the filename has a recognized text file extension
+ */
+export function isTextFileByName(filename: string): boolean {
+	const textExtensions = Object.values(FileExtensionText);
+
+	return textExtensions.some((ext: FileExtensionText) => filename.toLowerCase().endsWith(ext));
+}
+
+/**
+ * Read a file's content as text
+ * @param file - The file to read
+ * @returns Promise resolving to the file's text content
+ */
+export async function readFileAsText(file: File): Promise<string> {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+
+		reader.onload = (event) => {
+			if (event.target?.result !== null && event.target?.result !== undefined) {
+				resolve(event.target.result as string);
+			} else {
+				reject(new Error('Failed to read file'));
+			}
+		};
+
+		reader.onerror = () => reject(new Error('File reading error'));
+
+		reader.readAsText(file);
+	});
+}
+
+/**
+ * Heuristic check to determine if content is likely from a text file
+ * Detects binary files by counting suspicious characters and null bytes
+ * @param content - The file content to analyze
+ * @param options - Optional configuration for detection parameters
+ * @returns True if the content appears to be text-based
+ */
+export function isLikelyTextFile(
+	content: string,
+	options: Partial<BinaryDetectionOptions> = {}
+): boolean {
+	if (!content) return true;
+
+	const config = { ...DEFAULT_BINARY_DETECTION_OPTIONS, ...options };
+	const sample = content.substring(0, config.prefixLength);
+
+	let nullCount = 0;
+	let suspiciousControlCount = 0;
+
+	for (let i = 0; i < sample.length; i++) {
+		const charCode = sample.charCodeAt(i);
+
+		// Count null bytes - these are strong indicators of binary files
+		if (charCode === 0) {
+			nullCount++;
+
+			continue;
+		}
+
+		// Count suspicious control characters
+		// Allow common whitespace characters: tab (9), newline (10), carriage return (13)
+		if (charCode < 32 && charCode !== 9 && charCode !== 10 && charCode !== 13) {
+			// Count most suspicious control characters
+			if (charCode < 8 || (charCode > 13 && charCode < 27)) {
+				suspiciousControlCount++;
+			}
+		}
+
+		// Count replacement characters (indicates encoding issues)
+		if (charCode === 0xfffd) {
+			suspiciousControlCount++;
+		}
+	}
+
+	// Reject if too many null bytes
+	if (nullCount > config.maxAbsoluteNullBytes) return false;
+
+	// Reject if too many suspicious characters
+	if (suspiciousControlCount / sample.length > config.suspiciousCharThresholdRatio) return false;
+
+	return true;
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/text.ts b/backend/llama.cpp/tools/ui/src/lib/utils/text.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a2a4a1b57aefb4a8b9ea8ce0af2aae10f848a7e2
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/text.ts
@@ -0,0 +1,22 @@
+import { NEWLINE_SEPARATOR } from '$lib/constants';
+
+/**
+ * Returns a shortened preview of the provided content capped at the given length.
+ * Appends an ellipsis when the content exceeds the maximum.
+ */
+export function getPreviewText(content: string, max = 150): string {
+	return content.length > max ? content.slice(0, max) + '...' : content;
+}
+
+/**
+ * Generates a single-line title from a potentially multi-line prompt.
+ * Uses the first non-empty line if `useFirstLine` is true.
+ */
+export function generateConversationTitle(content: string, useFirstLine: boolean = false): string {
+	if (useFirstLine) {
+		const firstLine = content.split(NEWLINE_SEPARATOR).find((line) => line.trim().length > 0);
+		return firstLine ? firstLine.trim() : content.trim();
+	}
+
+	return content.trim();
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/uri-template.ts b/backend/llama.cpp/tools/ui/src/lib/utils/uri-template.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eb8dbfb3632c297f2c1f13d33992a8ae87d03fa3
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/uri-template.ts
@@ -0,0 +1,198 @@
+import {
+	TEMPLATE_EXPRESSION_REGEX,
+	URI_SCHEME_SEPARATOR,
+	URI_TEMPLATE_OPERATORS,
+	URI_TEMPLATE_SEPARATORS,
+	VARIABLE_EXPLODE_MODIFIER_REGEX,
+	VARIABLE_PREFIX_MODIFIER_REGEX,
+	LEADING_SLASHES_REGEX
+} from '../constants';
+
+/**
+ * Normalize a resource URI for comparison.
+ *
+ * URI template expansion (especially with path operators like {/var})
+ * can produce URIs that differ from listed resource URIs in slash placement.
+ * For example, the template `svelte://{/slug*}.md` with slug="svelte/$effect"
+ * expands to `svelte:///svelte/$effect.md`, while the listed resource URI is
+ * `svelte://svelte/$effect.md`.
+ *
+ * This function strips extra leading slashes after the scheme to normalize
+ * both forms to the same string for comparison purposes.
+ *
+ * @param uri - The URI to normalize
+ * @returns Normalized URI string
+ */
+export function normalizeResourceUri(uri: string): string {
+	const schemeEnd = uri.indexOf(URI_SCHEME_SEPARATOR);
+	if (schemeEnd === -1) return uri;
+
+	const scheme = uri.substring(0, schemeEnd);
+	const rest = uri
+		.substring(schemeEnd + URI_SCHEME_SEPARATOR.length)
+		.replace(LEADING_SLASHES_REGEX, '');
+
+	return `${scheme}${URI_SCHEME_SEPARATOR}${rest}`;
+}
+
+/**
+ * A parsed variable from a URI template expression.
+ */
+export interface UriTemplateVariable {
+	/** Variable name */
+	name: string;
+	/** Operator prefix (+, #, /, etc.) or empty string */
+	operator: string;
+}
+
+/**
+ * Extract all variable names from a URI template string.
+ *
+ * @param template - URI template string (RFC 6570)
+ * @returns Array of unique variable descriptors
+ *
+ * @example
+ * ```ts
+ * extractTemplateVariables("file:///{path}")
+ * // => [{ name: "path", operator: "" }]
+ *
+ * extractTemplateVariables("db://{schema}/{table}")
+ * // => [{ name: "schema", operator: "" }, { name: "table", operator: "" }]
+ * ```
+ */
+export function extractTemplateVariables(template: string): UriTemplateVariable[] {
+	const variables: UriTemplateVariable[] = [];
+	const seen = new Set<string>();
+
+	let match;
+	TEMPLATE_EXPRESSION_REGEX.lastIndex = 0;
+
+	while ((match = TEMPLATE_EXPRESSION_REGEX.exec(template)) !== null) {
+		const operator = match[1] || '';
+		const varList = match[2];
+
+		// RFC 6570 allows comma-separated variable lists: {x,y,z}
+		for (const varSpec of varList.split(',')) {
+			// Strip explode modifier (*) and prefix modifier (:N)
+			const name = varSpec
+				.replace(VARIABLE_EXPLODE_MODIFIER_REGEX, '')
+				.replace(VARIABLE_PREFIX_MODIFIER_REGEX, '')
+				.trim();
+
+			if (name && !seen.has(name)) {
+				seen.add(name);
+				variables.push({ name, operator });
+			}
+		}
+	}
+
+	return variables;
+}
+
+/**
+ * Expand a URI template with the given variable values.
+ * Implements a simplified RFC 6570 Level 2 expansion.
+ *
+ * @param template - URI template string
+ * @param values - Map of variable name to value
+ * @returns Expanded URI string
+ *
+ * @example
+ * ```ts
+ * expandTemplate("file:///{path}", { path: "src/main.rs" })
+ * // => "file:///src/main.rs"
+ * ```
+ */
+export function expandTemplate(template: string, values: Record<string, string>): string {
+	TEMPLATE_EXPRESSION_REGEX.lastIndex = 0;
+
+	return template.replace(
+		TEMPLATE_EXPRESSION_REGEX,
+		(_match, operator: string, varList: string) => {
+			const varNames = varList
+				.split(',')
+				.map((v: string) =>
+					v
+						.replace(VARIABLE_EXPLODE_MODIFIER_REGEX, '')
+						.replace(VARIABLE_PREFIX_MODIFIER_REGEX, '')
+						.trim()
+				);
+
+			const expandedParts = varNames
+				.map((name: string) => values[name] ?? '')
+				.filter((v: string) => v !== '');
+
+			if (expandedParts.length === 0) return '';
+
+			switch (operator) {
+				case URI_TEMPLATE_OPERATORS.RESERVED:
+					// Reserved expansion: no encoding
+					return expandedParts.join(URI_TEMPLATE_SEPARATORS.COMMA);
+				case URI_TEMPLATE_OPERATORS.FRAGMENT:
+					// Fragment expansion
+					return (
+						URI_TEMPLATE_OPERATORS.FRAGMENT + expandedParts.join(URI_TEMPLATE_SEPARATORS.COMMA)
+					);
+				case URI_TEMPLATE_OPERATORS.PATH_SEGMENT:
+					// Path segments
+					return URI_TEMPLATE_SEPARATORS.SLASH + expandedParts.join(URI_TEMPLATE_SEPARATORS.SLASH);
+				case URI_TEMPLATE_OPERATORS.LABEL:
+					// Label expansion
+					return (
+						URI_TEMPLATE_SEPARATORS.PERIOD + expandedParts.join(URI_TEMPLATE_SEPARATORS.PERIOD)
+					);
+				case URI_TEMPLATE_OPERATORS.PATH_PARAM:
+					// Path-style parameters
+					return varNames
+						.filter((_: string, i: number) => expandedParts[i])
+						.map(
+							(name: string, i: number) =>
+								`${URI_TEMPLATE_SEPARATORS.SEMICOLON}${name}=${expandedParts[i]}`
+						)
+						.join('');
+				case URI_TEMPLATE_OPERATORS.FORM_QUERY:
+					// Form-style query
+					return (
+						URI_TEMPLATE_SEPARATORS.QUERY_PREFIX +
+						varNames
+							.filter((_: string, i: number) => expandedParts[i])
+							.map(
+								(name: string, i: number) =>
+									`${encodeURIComponent(name)}=${encodeURIComponent(expandedParts[i])}`
+							)
+							.join(URI_TEMPLATE_SEPARATORS.QUERY_CONTINUATION)
+					);
+				case URI_TEMPLATE_OPERATORS.FORM_CONTINUATION:
+					// Form-style query continuation
+					return (
+						URI_TEMPLATE_SEPARATORS.QUERY_CONTINUATION +
+						varNames
+							.filter((_: string, i: number) => expandedParts[i])
+							.map(
+								(name: string, i: number) =>
+									`${encodeURIComponent(name)}=${encodeURIComponent(expandedParts[i])}`
+							)
+							.join(URI_TEMPLATE_SEPARATORS.COMMA)
+					);
+				default:
+					// Simple string expansion (default operator)
+					return expandedParts
+						.map((v: string) => encodeURIComponent(v))
+						.join(URI_TEMPLATE_SEPARATORS.COMMA);
+			}
+		}
+	);
+}
+
+/**
+ * Check whether all required variables in a template have been provided.
+ *
+ * @param template - URI template string
+ * @param values - Map of variable name to value
+ * @returns true if all variables have non-empty values
+ */
+export function isTemplateComplete(template: string, values: Record<string, string>): boolean {
+	const variables = extractTemplateVariables(template);
+
+	return variables.every((v) => (values[v.name] ?? '').trim() !== '');
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/url.ts b/backend/llama.cpp/tools/ui/src/lib/utils/url.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e8b78f7bd404ccef88174a40b4c4f078f6b7acd1
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/url.ts
@@ -0,0 +1,72 @@
+import { TWO_PART_PUBLIC_SUFFIXES, WILDCARD_PUBLIC_SUFFIXES } from '$lib/constants';
+import { UrlProtocol } from '$lib/enums';
+
+/**
+ * Check whether a hostname looks like an IPv4 or IPv6 address.
+ */
+function isIpAddress(hostname: string): boolean {
+	if (hostname.includes(':')) return true;
+
+	if (/^\d{1,3}(\.\d{1,3}){3}$/.test(hostname)) return true;
+
+	return false;
+}
+
+/**
+ * Extract the registrable root domain from a URL.
+ *
+ * @example
+ *   'mcp.example.com'           -> 'example.com'
+ *   'www.example.co.uk'         -> 'example.co.uk'
+ *   'bar.foo.nom.br'            -> 'bar.foo.nom.br'
+ *   '192.168.1.1'               -> null
+ *   'localhost'                 -> null
+ */
+export function extractRootDomain(url: URL): string | null {
+	const hostname = url.hostname.toLowerCase();
+	if (!hostname || isIpAddress(hostname)) return null;
+
+	const parts = hostname.split('.');
+
+	if (parts.length < 2) return null;
+
+	if (parts.length >= 3) {
+		const suffix2 = `${parts[parts.length - 2]}.${parts[parts.length - 1]}`;
+
+		if (TWO_PART_PUBLIC_SUFFIXES.has(suffix2)) {
+			return parts.slice(-3).join('.');
+		}
+	}
+
+	for (let i = 2; i <= parts.length; i++) {
+		const candidate = parts.slice(-i).join('.');
+
+		if (WILDCARD_PUBLIC_SUFFIXES.has(candidate)) {
+			if (parts.length === i + 1) {
+				return hostname;
+			}
+
+			return parts.slice(-(i + 2)).join('.');
+		}
+	}
+
+	return parts.slice(-2).join('.');
+}
+
+/**
+ * Sanitize an external URL string for safe use in an `<a href>`.
+ * Only allows http: and https: schemes. Returns `null` for anything else.
+ */
+export function sanitizeExternalUrl(raw: string): string | null {
+	try {
+		const url = new URL(raw);
+
+		if (url.protocol !== UrlProtocol.HTTP && url.protocol !== UrlProtocol.HTTPS) {
+			return null;
+		}
+
+		return url.href;
+	} catch {
+		return null;
+	}
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/uuid.ts b/backend/llama.cpp/tools/ui/src/lib/utils/uuid.ts
new file mode 100644
index 0000000000000000000000000000000000000000..29c20b3107841bde0b7560e42e8bf5dda0ef7375
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/uuid.ts
@@ -0,0 +1,3 @@
+export function uuid(): string {
+	return globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).substring(2);
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/viewport.ts b/backend/llama.cpp/tools/ui/src/lib/utils/viewport.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9e9b7aff3b80b03492af090390495ae3b665e6d9
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/viewport.ts
@@ -0,0 +1,12 @@
+/**
+ * Check if an element is within the current viewport.
+ */
+export function isElementInViewport(node: HTMLElement): boolean {
+	const rect = node.getBoundingClientRect();
+	return (
+		rect.top < window.innerHeight &&
+		rect.bottom > 0 &&
+		rect.left < window.innerWidth &&
+		rect.right > 0
+	);
+}
diff --git a/backend/llama.cpp/tools/ui/src/lib/utils/webp-to-png.ts b/backend/llama.cpp/tools/ui/src/lib/utils/webp-to-png.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ea51838029e5c714e0d0cc823d3cd17764027e09
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/lib/utils/webp-to-png.ts
@@ -0,0 +1,73 @@
+import { FileExtensionImage, MimeTypeImage } from '$lib/enums';
+
+/**
+ * Convert a WebP base64 data URL to a PNG data URL
+ * @param base64UrlWebp - The WebP base64 data URL to convert
+ * @param backgroundColor - Background color for the PNG (default: 'white')
+ * @returns Promise resolving to PNG data URL
+ */
+export function webpBase64UrlToPngDataURL(
+	base64UrlWebp: string,
+	backgroundColor: string = 'white'
+): Promise<string> {
+	return new Promise((resolve, reject) => {
+		try {
+			const img = new Image();
+
+			img.onload = () => {
+				const canvas = document.createElement('canvas');
+				const ctx = canvas.getContext('2d');
+
+				if (!ctx) {
+					reject(new Error('Failed to get 2D canvas context.'));
+					return;
+				}
+
+				const targetWidth = img.naturalWidth || 300;
+				const targetHeight = img.naturalHeight || 300;
+
+				canvas.width = targetWidth;
+				canvas.height = targetHeight;
+
+				if (backgroundColor) {
+					ctx.fillStyle = backgroundColor;
+					ctx.fillRect(0, 0, canvas.width, canvas.height);
+				}
+				ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
+
+				resolve(canvas.toDataURL(MimeTypeImage.PNG));
+			};
+
+			img.onerror = () => {
+				reject(new Error('Failed to load WebP image. Ensure the WebP data is valid.'));
+			};
+
+			img.src = base64UrlWebp;
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			const errorMessage = `Error converting WebP to PNG: ${message}`;
+			console.error(errorMessage, error);
+			reject(new Error(errorMessage));
+		}
+	});
+}
+
+/**
+ * Check if a file is a WebP based on its MIME type
+ * @param file - The file to check
+ * @returns True if the file is a WebP
+ */
+export function isWebpFile(file: File): boolean {
+	return (
+		file.type === MimeTypeImage.WEBP || file.name.toLowerCase().endsWith(FileExtensionImage.WEBP)
+	);
+}
+
+/**
+ * Check if a MIME type represents a WebP
+ * @param mimeType - The MIME type to check
+ * @returns True if the MIME type is image/webp
+ */
+export function isWebpMimeType(mimeType: string): boolean {
+	return mimeType === MimeTypeImage.WEBP;
+}
diff --git a/backend/llama.cpp/tools/ui/src/routes/(chat)/+layout.svelte b/backend/llama.cpp/tools/ui/src/routes/(chat)/+layout.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..37aa03582487fdad023f8b7763c9965d6df7a24e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/routes/(chat)/+layout.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { ChatScreen } from '$lib/components/app';
+
+	let { children } = $props();
+
+	let showCenteredEmpty = $derived(!page.params.id);
+</script>
+
+<ChatScreen {showCenteredEmpty} />
+
+{@render children?.()}
diff --git a/backend/llama.cpp/tools/ui/src/routes/(chat)/+page.svelte b/backend/llama.cpp/tools/ui/src/routes/(chat)/+page.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..9db1d445fe8429cef1e44e0b3a7d6189d1f2df8b
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/routes/(chat)/+page.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { DialogModelNotAvailable } from '$lib/components/app';
+	import { chatStore } from '$lib/stores/chat.svelte';
+	import { conversationsStore, isConversationsInitialized } from '$lib/stores/conversations.svelte';
+	import { modelsStore, modelOptions } from '$lib/stores/models.svelte';
+	import { onMount } from 'svelte';
+	import { page } from '$app/state';
+	import { replaceState } from '$app/navigation';
+	import { APP_NAME, NEW_CHAT_PARAM } from '$lib/constants';
+
+	let qParam = $derived(page.url.searchParams.get('q'));
+	let modelParam = $derived(page.url.searchParams.get('model'));
+	let newChatParam = $derived(page.url.searchParams.get(NEW_CHAT_PARAM));
+
+	// Dialog state for model not available error
+	let showModelNotAvailable = $state(false);
+	let requestedModelName = $state('');
+	let availableModelNames = $derived(modelOptions().map((m) => m.model));
+
+	/**
+	 * Clear URL params after message is sent to prevent re-sending on refresh
+	 */
+	function clearUrlParams() {
+		const url = new URL(page.url);
+
+		url.searchParams.delete('q');
+		url.searchParams.delete('model');
+		url.searchParams.delete(NEW_CHAT_PARAM);
+
+		replaceState(url.toString(), {});
+	}
+
+	async function handleUrlParams() {
+		await modelsStore.fetch();
+
+		if (modelParam) {
+			const model = modelsStore.findModelByName(modelParam);
+
+			if (model) {
+				try {
+					await modelsStore.selectModelById(model.id);
+				} catch (error) {
+					console.error('Failed to select model:', error);
+					requestedModelName = modelParam;
+					showModelNotAvailable = true;
+
+					return;
+				}
+			} else {
+				requestedModelName = modelParam;
+				showModelNotAvailable = true;
+
+				return;
+			}
+		}
+
+		// Handle ?q= parameter - create new conversation and send message
+		if (qParam !== null) {
+			await conversationsStore.createConversation();
+			clearUrlParams();
+		} else if (modelParam || newChatParam === 'true') {
+			clearUrlParams();
+		}
+	}
+
+	onMount(async () => {
+		if (!isConversationsInitialized()) {
+			await conversationsStore.initialize();
+		}
+
+		conversationsStore.clearActiveConversation();
+		chatStore.clearUIState();
+
+		await modelsStore.fetch();
+
+		if (qParam !== null || modelParam !== null || newChatParam === 'true') {
+			await handleUrlParams();
+		}
+
+		await modelsStore.ensureFirstModelSelected();
+	});
+</script>
+
+<svelte:head>
+	<title>{APP_NAME}</title>
+</svelte:head>
+
+<DialogModelNotAvailable
+	bind:open={showModelNotAvailable}
+	modelName={requestedModelName}
+	availableModels={availableModelNames}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/routes/(chat)/+page.ts b/backend/llama.cpp/tools/ui/src/routes/(chat)/+page.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7905af6b5134393d688af4b38574954e13d84417
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/routes/(chat)/+page.ts
@@ -0,0 +1,6 @@
+import type { PageLoad } from './$types';
+import { validateApiKey } from '$lib/utils';
+
+export const load: PageLoad = async ({ fetch }) => {
+	await validateApiKey(fetch);
+};
diff --git a/backend/llama.cpp/tools/ui/src/routes/(chat)/chat/[id]/+page.svelte b/backend/llama.cpp/tools/ui/src/routes/(chat)/chat/[id]/+page.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..f14553c90a9077f9842c65de093dbb373d061314
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/routes/(chat)/chat/[id]/+page.svelte
@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { goto, replaceState } from '$app/navigation';
+	import { page } from '$app/state';
+	import { afterNavigate } from '$app/navigation';
+	import { DialogModelNotAvailable } from '$lib/components/app';
+	import { APP_NAME, ROUTES } from '$lib/constants';
+	import { chatStore } from '$lib/stores/chat.svelte';
+	import { conversationsStore, activeConversation } from '$lib/stores/conversations.svelte';
+	import { modelsStore, modelOptions } from '$lib/stores/models.svelte';
+
+	let chatId = $derived(page.params.id);
+	let currentChatId: string | undefined = undefined;
+
+	// URL parameters for prompt and model selection
+	let qParam = $derived(page.url.searchParams.get('q'));
+	let modelParam = $derived(page.url.searchParams.get('model'));
+
+	// Dialog state for model not available error
+	let showModelNotAvailable = $state(false);
+	let requestedModelName = $state('');
+	let availableModelNames = $derived(modelOptions().map((m) => m.model));
+
+	// Track if URL params have been processed for this chat
+	let urlParamsProcessed = $state(false);
+
+	/**
+	 * Clear URL params after message is sent to prevent re-sending on refresh
+	 */
+	function clearUrlParams() {
+		const url = new URL(page.url);
+		url.searchParams.delete('q');
+		url.searchParams.delete('model');
+		replaceState(url.toString(), {});
+	}
+
+	async function handleUrlParams() {
+		// Ensure models are loaded first
+		await modelsStore.fetch();
+
+		// Handle model parameter - select model if provided
+		if (modelParam) {
+			const model = modelsStore.findModelByName(modelParam);
+			if (model) {
+				try {
+					await modelsStore.selectModelById(model.id);
+				} catch (error) {
+					console.error('Failed to select model:', error);
+					requestedModelName = modelParam;
+					showModelNotAvailable = true;
+					return;
+				}
+			} else {
+				// Model not found - show error dialog
+				requestedModelName = modelParam;
+				showModelNotAvailable = true;
+				return;
+			}
+		}
+
+		// Handle ?q= parameter - send message in current conversation
+		if (qParam !== null) {
+			await chatStore.sendMessage(qParam);
+			// Clear URL params after message is sent
+			clearUrlParams();
+		} else if (modelParam) {
+			// Clear params even if no message was sent (just model selection)
+			clearUrlParams();
+		}
+
+		urlParamsProcessed = true;
+	}
+
+	afterNavigate(() => {
+		setTimeout(() => {
+			void modelsStore.selectModelFromLastAssistantResponse();
+		}, 100);
+	});
+
+	$effect(() => {
+		if (chatId && chatId !== currentChatId) {
+			currentChatId = chatId;
+			urlParamsProcessed = false; // Reset for new chat
+
+			// Skip loading if this conversation is already active (e.g., just created)
+			if (activeConversation()?.id === chatId) {
+				void chatStore.discoverActiveStream(chatId);
+				if ((qParam !== null || modelParam !== null) && !urlParamsProcessed) {
+					handleUrlParams();
+				}
+				return;
+			}
+
+			(async () => {
+				const success = await conversationsStore.loadConversation(chatId);
+				if (!success) {
+					await goto(ROUTES.START);
+					return;
+				}
+				chatStore.syncLoadingStateForChat(chatId);
+				// server probe (with localStorage fallback) and attach
+				await chatStore.discoverActiveStream(chatId);
+
+				if ((qParam !== null || modelParam !== null) && !urlParamsProcessed) {
+					await handleUrlParams();
+				}
+			})();
+		}
+	});
+
+	$effect(() => {
+		if (typeof window === 'undefined' || typeof document === 'undefined') return;
+
+		// when the tab comes back to the foreground, re-run discovery to catch any race
+		// where the initial mount probe missed an active session
+		const onVisibility = () => {
+			if (document.visibilityState !== 'visible') return;
+			if (!chatId) return;
+			void chatStore.discoverActiveStream(chatId);
+		};
+		document.addEventListener('visibilitychange', onVisibility);
+		return () => document.removeEventListener('visibilitychange', onVisibility);
+	});
+</script>
+
+<svelte:head>
+	<title>{activeConversation()?.name || 'Chat'} - {APP_NAME}</title>
+</svelte:head>
+
+<DialogModelNotAvailable
+	bind:open={showModelNotAvailable}
+	modelName={requestedModelName}
+	availableModels={availableModelNames}
+/>
diff --git a/backend/llama.cpp/tools/ui/src/routes/(chat)/chat/[id]/+page.ts b/backend/llama.cpp/tools/ui/src/routes/(chat)/chat/[id]/+page.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7905af6b5134393d688af4b38574954e13d84417
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/routes/(chat)/chat/[id]/+page.ts
@@ -0,0 +1,6 @@
+import type { PageLoad } from './$types';
+import { validateApiKey } from '$lib/utils';
+
+export const load: PageLoad = async ({ fetch }) => {
+	await validateApiKey(fetch);
+};
diff --git a/backend/llama.cpp/tools/ui/src/routes/+error.svelte b/backend/llama.cpp/tools/ui/src/routes/+error.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..8da9aad16f9d9033c52a6a71c972709454a6b4ef
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/routes/+error.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { ServerErrorSplash } from '$lib/components/app';
+	import { ROUTES } from '$lib/constants/routes';
+	import { APP_NAME } from '$lib/constants';
+
+	let error = $derived($page.error);
+	let status = $derived($page.status);
+
+	// Check if this is an API key related error
+	let isApiKeyError = $derived(
+		status === 401 ||
+			status === 403 ||
+			error?.message?.toLowerCase().includes('access denied') ||
+			error?.message?.toLowerCase().includes('unauthorized') ||
+			error?.message?.toLowerCase().includes('invalid api key')
+	);
+
+	function handleRetry() {
+		// Navigate back to home page after successful API key validation
+		goto(ROUTES.START);
+	}
+</script>
+
+<svelte:head>
+	<title>Error {status} - {APP_NAME}</title>
+</svelte:head>
+
+{#if isApiKeyError}
+	<ServerErrorSplash
+		error={error?.message || 'Access denied - check server permissions'}
+		onRetry={handleRetry}
+		showRetry={false}
+		showTroubleshooting={false}
+	/>
+{:else}
+	<!-- Generic error page for non-API key errors -->
+	<div class="flex h-full items-center justify-center">
+		<div class="w-full max-w-md px-4 text-center">
+			<div class="mb-6">
+				<div
+					class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10"
+				>
+					<svg
+						class="h-8 w-8 text-destructive"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+						/>
+					</svg>
+				</div>
+				<h1 class="mb-2 text-2xl font-bold">Error {status}</h1>
+				<p class="text-muted-foreground">
+					{error?.message || 'Something went wrong'}
+				</p>
+			</div>
+			<button
+				onclick={() => goto(ROUTES.START)}
+				class="rounded-md bg-primary px-4 py-2 text-primary-foreground hover:bg-primary/90"
+			>
+				Go Home
+			</button>
+		</div>
+	</div>
+{/if}
diff --git a/backend/llama.cpp/tools/ui/src/routes/+layout.svelte b/backend/llama.cpp/tools/ui/src/routes/+layout.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..f3c024bb9a7e1ad6ca6c26fd7e342e0e6a08ef63
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/routes/+layout.svelte
@@ -0,0 +1,340 @@
+<script lang="ts">
+	import '../app.css';
+	import { base } from '$app/paths';
+	import { browser } from '$app/environment';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { untrack } from 'svelte';
+	import { onMount } from 'svelte';
+
+	import { SidebarNavigation, DialogConversationTitleUpdate } from '$lib/components/app';
+	import { PwaMetaTags, PwaRefreshAlert } from '$lib/components/pwa';
+	import { pwaAssetsHead } from 'virtual:pwa-assets/head';
+
+	import { chatStore } from '$lib/stores/chat.svelte';
+	import { conversationsStore } from '$lib/stores/conversations.svelte';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { isRouterMode, serverStore } from '$lib/stores/server.svelte';
+	import { config, settingsStore } from '$lib/stores/settings.svelte';
+	import { ModeWatcher } from 'mode-watcher';
+	import { ROUTES } from '$lib/constants/routes';
+	import { RouterService } from '$lib/services/router.service';
+	import { Toaster } from 'svelte-sonner';
+	import { modelsStore } from '$lib/stores/models.svelte';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { TOOLTIP_DELAY_DURATION } from '$lib/constants';
+	import { FAVICON_PATHS, FAVICON_SELECTORS } from '$lib/constants/pwa';
+	import { useKeyboardShortcuts } from '$lib/hooks/use-keyboard-shortcuts.svelte';
+	import { usePwa } from '$lib/hooks/use-pwa.svelte';
+	import { conversations } from '$lib/stores/conversations.svelte';
+	import { isMobile } from '$lib/stores/viewport.svelte';
+	import { theme } from '$lib/stores/theme.svelte';
+	import { buildInfoStore } from '$lib/stores/build-info.svelte';
+
+	import { SETTINGS_KEYS } from '$lib/constants';
+
+	let { children } = $props();
+	let innerHeight = $state<number | undefined>();
+	let innerWidth = $state(browser ? window.innerWidth : 0);
+
+	let chatSidebar:
+		| {
+				activateSearchMode?: () => void;
+				editActiveConversation?: () => void;
+		  }
+		| undefined = $state();
+
+	let showBuildVersion = $derived(config()[SETTINGS_KEYS.SHOW_BUILD_VERSION] as boolean);
+
+	let titleUpdateDialogOpen = $state(false);
+	let titleUpdateCurrentTitle = $state('');
+	let titleUpdateNewTitle = $state('');
+	let titleUpdateResolve: ((value: boolean) => void) | null = null;
+
+	// Keep the hook object intact: destructuring needRefreshByStorage reads the getter once and freezes it
+	const pwa = usePwa();
+	const { needRefresh, updateServiceWorker } = pwa;
+
+	function updateFavicon() {
+		const dark = theme.isSystemDark;
+
+		let icoLink = document.querySelector(FAVICON_SELECTORS.ICO_48X48) as HTMLLinkElement | null;
+		if (icoLink) {
+			icoLink.href = dark ? FAVICON_PATHS.ICO_DARK : FAVICON_PATHS.ICO_LIGHT;
+		}
+
+		let svgLink = document.querySelector(FAVICON_SELECTORS.SVG_ANY) as HTMLLinkElement | null;
+		if (svgLink) {
+			svgLink.href = dark ? FAVICON_PATHS.SVG_DARK : FAVICON_PATHS.SVG_LIGHT;
+		}
+	}
+
+	function navigateToConversation(direction: -1 | 1) {
+		const allConvs = conversations();
+
+		if (allConvs.length === 0) return;
+
+		const currentId = page.params.id;
+
+		if (!currentId) {
+			goto(RouterService.chat(allConvs[direction === 1 ? 0 : allConvs.length - 1].id));
+
+			return;
+		}
+
+		const idx = allConvs.findIndex((c) => c.id === currentId);
+
+		if (idx === -1) return;
+
+		const targetIdx = idx + direction;
+
+		if (targetIdx >= 0 && targetIdx < allConvs.length) {
+			goto(RouterService.chat(allConvs[targetIdx].id));
+		} else {
+			goto(ROUTES.NEW_CHAT);
+		}
+	}
+
+	// Global keyboard shortcuts
+	const { handleKeydown } = useKeyboardShortcuts({
+		editActiveConversation: () => chatSidebar?.editActiveConversation?.(),
+		navigateToPrevConversation: () => navigateToConversation(-1),
+		navigateToNextConversation: () => navigateToConversation(1)
+	});
+
+	function checkApiKey() {
+		const apiKey = config().apiKey;
+
+		// No API key configured — server doesn't require auth, no need to validate.
+		// This mirrors the early return in validateApiKey() to avoid redundant /props requests.
+		if (!apiKey || apiKey.trim() === '') {
+			return;
+		}
+
+		untrack(() => {
+			if (
+				(page.route.id === '/(chat)' || page.route.id === '/(chat)/chat/[id]') &&
+				page.status !== 401 &&
+				page.status !== 403
+			) {
+				const headers: Record<string, string> = {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${apiKey.trim()}`
+				};
+
+				fetch(`${base}/props`, { headers })
+					.then((response) => {
+						if (response.status === 401 || response.status === 403) {
+							window.location.reload();
+						}
+					})
+					.catch((e) => {
+						console.error('Error checking API key:', e);
+					});
+			}
+		});
+	}
+
+	function handleTitleUpdateCancel() {
+		titleUpdateDialogOpen = false;
+
+		if (titleUpdateResolve) {
+			titleUpdateResolve(false);
+			titleUpdateResolve = null;
+		}
+	}
+
+	function handleTitleUpdateConfirm() {
+		titleUpdateDialogOpen = false;
+
+		if (titleUpdateResolve) {
+			titleUpdateResolve(true);
+			titleUpdateResolve = null;
+		}
+	}
+
+	onMount(() => {
+		updateFavicon();
+		// snapshot of every backend running stream on first load, populates the sidebar spinners
+		// so the user sees each conv that has a live inference, even ones not opened yet
+		void chatStore.syncRemoteRunningStreams();
+	});
+
+	// refresh that snapshot when the tab returns to the foreground, a stream may have advanced
+	// or ended while it was hidden. snapshot only, no polling
+	function handleVisibilityChange() {
+		if (document.visibilityState !== 'visible') return;
+		void chatStore.syncRemoteRunningStreams();
+	}
+
+	$effect(() => {
+		void theme.isSystemDark;
+
+		updateFavicon();
+	});
+
+	// Initialize server properties on app load (run once)
+	$effect(() => {
+		// Only fetch if we don't already have props
+		if (!serverStore.props) {
+			untrack(() => {
+				serverStore.fetch();
+			});
+		}
+	});
+
+	// Sync settings when server props are loaded
+	$effect(() => {
+		const serverProps = serverStore.props;
+
+		if (serverProps) {
+			untrack(() => {
+				settingsStore.syncWithServerDefaults();
+			});
+		}
+	});
+
+	// Inject custom CSS at runtime through an action on the head style node
+	// textContent keeps the value as text, never parsed as HTML
+	function customCss(node: HTMLStyleElement) {
+		$effect(() => {
+			node.textContent = (config().customCss as string | undefined) ?? '';
+		});
+	}
+
+	// Fetch router models when in router mode (for status and modalities)
+	// Wait for models to be loaded first, run only once
+	let routerModelsFetched = false;
+
+	$effect(() => {
+		const isRouter = isRouterMode();
+		const modelsCount = modelsStore.models.length;
+
+		// Only fetch router models once when we have models loaded and in router mode
+		if (isRouter && modelsCount > 0 && !routerModelsFetched) {
+			routerModelsFetched = true;
+
+			untrack(() => {
+				modelsStore.fetchRouterModels();
+			});
+		}
+	});
+
+	// Live model status and load progress via the /models/sse feed (router mode)
+	$effect(() => {
+		if (!browser) return;
+		if (!isRouterMode()) return;
+
+		untrack(() => {
+			modelsStore.subscribeStatus();
+		});
+
+		return () => {
+			modelsStore.unsubscribeStatus();
+		};
+	});
+
+	// Background MCP server health checks on app load
+	// Fetch enabled servers from settings and run health checks in background.
+	// Only IDLE servers are checked; already-resolved (SUCCESS / ERROR) servers
+	// keep their existing state, so adding or removing a server does not flash
+	// every other card back through skeleton state.
+	$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, true).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(() => {
+		checkApiKey();
+	});
+
+	// Set up title update confirmation callback
+	$effect(() => {
+		conversationsStore.setTitleUpdateConfirmationCallback(
+			async (currentTitle: string, newTitle: string) => {
+				return new Promise<boolean>((resolve) => {
+					titleUpdateCurrentTitle = currentTitle;
+					titleUpdateNewTitle = newTitle;
+					titleUpdateResolve = resolve;
+					titleUpdateDialogOpen = true;
+				});
+			}
+		);
+	});
+</script>
+
+<svelte:head>
+	{#if pwaAssetsHead.themeColor}
+		<meta name="theme-color" content={pwaAssetsHead.themeColor.content} />
+	{/if}
+
+	{#if config().customCss}
+		<style use:customCss></style>
+	{/if}
+
+	{#each pwaAssetsHead.links as link (link.href)}
+		<link {...link} />
+	{/each}
+
+	<PwaMetaTags />
+</svelte:head>
+
+<svelte:window onkeydown={handleKeydown} bind:innerHeight bind:innerWidth />
+<svelte:document onvisibilitychange={handleVisibilityChange} />
+
+<Tooltip.Provider delayDuration={TOOLTIP_DELAY_DURATION}>
+	<div class="flex flex-col md:flex-row">
+		<SidebarNavigation
+			onSearchClick={() => {
+				if (isMobile.current) {
+					goto(ROUTES.SEARCH);
+				} else if (chatSidebar?.activateSearchMode) {
+					chatSidebar.activateSearchMode();
+				}
+			}}
+		/>
+
+		<div class="flex-1">
+			{@render children?.()}
+		</div>
+	</div>
+
+	<ModeWatcher />
+
+	<Toaster richColors />
+
+	<DialogConversationTitleUpdate
+		bind:open={titleUpdateDialogOpen}
+		currentTitle={titleUpdateCurrentTitle}
+		newTitle={titleUpdateNewTitle}
+		onConfirm={handleTitleUpdateConfirm}
+		onCancel={handleTitleUpdateCancel}
+	/>
+</Tooltip.Provider>
+
+<!-- PWA update prompt + version -->
+<div class="fixed right-4 bottom-4 z-9999 flex flex-col items-end gap-1">
+	{#if showBuildVersion && buildInfoStore.value}
+		<span class="text-[10px] tabular-nums text-muted-foreground">{buildInfoStore.value}</span>
+	{/if}
+
+	<PwaRefreshAlert
+		needRefresh={$needRefresh || pwa.needRefreshByStorage}
+		forceReload={pwa.needRefreshByStorage}
+		{updateServiceWorker}
+	/>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/routes/mcp-servers/+page.svelte b/backend/llama.cpp/tools/ui/src/routes/mcp-servers/+page.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..1758134c391bee40daeee9905c9efd37fd17b139
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/routes/mcp-servers/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { SettingsMcpServers } from '$lib/components/app/settings';
+</script>
+
+<SettingsMcpServers class="mx-auto w-full p-4 md:p-8 md:py-8" />
diff --git a/backend/llama.cpp/tools/ui/src/routes/search/+page.svelte b/backend/llama.cpp/tools/ui/src/routes/search/+page.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..d99dc1f2fab307701063d18bc71df1fd1f0618b8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/routes/search/+page.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { browser } from '$app/environment';
+
+	import { SearchInput, SidebarNavigationSearchResults } from '$lib/components/app';
+	import { ROUTES } from '$lib/constants/routes';
+	import { RouterService } from '$lib/services/router.service';
+	import { conversationsStore, conversations } from '$lib/stores/conversations.svelte';
+	import { chatStore } from '$lib/stores/chat.svelte';
+	import { isMobile } from '$lib/stores/viewport.svelte';
+
+	let searchQuery = $state('');
+	let searchInputRef = $state<HTMLInputElement | null>(null);
+
+	let currentChatId = $derived(page.params.id);
+
+	let filteredConversations = $derived.by(() => {
+		const query = searchQuery.trim().toLowerCase();
+		if (query.length === 0) return [];
+		return conversations().filter((c) => c.name.toLowerCase().includes(query));
+	});
+
+	// Search page is intended for mobile; on desktop the sidebar already exposes
+	// in-place search, so bounce back to a chat.
+	$effect(() => {
+		if (browser && !isMobile.current) {
+			goto(ROUTES.NEW_CHAT, { replaceState: true });
+		}
+	});
+
+	async function selectConversation(id: string) {
+		await goto(RouterService.chat(id));
+	}
+
+	async function handleEditConversation(id: string) {
+		const conversation = conversations().find((c) => c.id === id);
+		if (!conversation) return;
+
+		const newName = window.prompt('Rename conversation', conversation.name);
+		if (newName && newName.trim()) {
+			await conversationsStore.updateConversationName(id, newName.trim());
+		}
+	}
+
+	async function handleDeleteConversation(id: string) {
+		const conversation = conversations().find((c) => c.id === id);
+		if (!conversation) return;
+
+		const confirmed = window.confirm(
+			`Delete "${conversation.name}"? This action cannot be undone.`
+		);
+		if (!confirmed) return;
+
+		await conversationsStore.deleteConversation(id, { deleteWithForks: false });
+	}
+
+	function handleStopGeneration(id: string) {
+		chatStore.stopGenerationForChat(id);
+	}
+
+	function handleBack() {
+		if (history.length > 1) {
+			history.back();
+		} else {
+			goto(ROUTES.NEW_CHAT);
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Search · llama.cpp</title>
+</svelte:head>
+
+<div class="fixed top-0 z-10 left-0 right-0 p-2">
+	<SearchInput
+		autofocus
+		bind:value={searchQuery}
+		bind:ref={searchInputRef}
+		onClose={handleBack}
+		placeholder="Search conversations..."
+	/>
+</div>
+
+<div class="p-2 pt-16">
+	<SidebarNavigationSearchResults
+		{searchQuery}
+		{filteredConversations}
+		{currentChatId}
+		onSelect={selectConversation}
+		onEdit={handleEditConversation}
+		onDelete={handleDeleteConversation}
+		onStop={handleStopGeneration}
+	/>
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/routes/settings/+layout.svelte b/backend/llama.cpp/tools/ui/src/routes/settings/+layout.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..c2b587862f257d149d2f57b2b007d80be8020d5d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/routes/settings/+layout.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { X } from '@lucide/svelte';
+	import { goto } from '$app/navigation';
+	import { browser } from '$app/environment';
+	import { page } from '$app/state';
+	import { ActionIcon } from '$lib/components/app';
+	import { SETTINGS_FALLBACK_EXIT_ROUTE } from '$lib/constants';
+
+	let { children } = $props();
+
+	let previousRouteId = $state<string | null>(null);
+
+	$effect(() => {
+		const currentId = page.route.id;
+		return () => {
+			previousRouteId = currentId;
+		};
+	});
+
+	function handleClose() {
+		const prevIsSettings = previousRouteId?.startsWith('/settings');
+		if (browser && window.history.length > 1 && !prevIsSettings) {
+			history.back();
+		} else {
+			goto(SETTINGS_FALLBACK_EXIT_ROUTE);
+		}
+	}
+</script>
+
+<div class="fixed top-4.5 right-4 z-50 md:hidden">
+	<ActionIcon icon={X} tooltip="Close" onclick={handleClose} />
+</div>
+
+<div class="min-h-full">
+	{@render children?.()}
+</div>
diff --git a/backend/llama.cpp/tools/ui/src/routes/settings/[[section]]/+page.svelte b/backend/llama.cpp/tools/ui/src/routes/settings/[[section]]/+page.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..90fe6107012fae5650554d9685bd4e71ed1418f1
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/routes/settings/[[section]]/+page.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { SettingsChat } from '$lib/components/app/settings';
+	import { page } from '$app/state';
+	import { afterNavigate, replaceState } from '$app/navigation';
+	import { RouterService } from '$lib/services';
+	import { SETTINGS_SECTION_SLUGS } from '$lib/constants';
+
+	afterNavigate(() => {
+		if (!page.params.section) {
+			replaceState(RouterService.settings(SETTINGS_SECTION_SLUGS.GENERAL), {});
+		}
+	});
+</script>
+
+<SettingsChat initialSection={(page.params as Record<string, string | undefined>).section} />
diff --git a/backend/llama.cpp/tools/ui/src/styles/katex-custom.scss b/backend/llama.cpp/tools/ui/src/styles/katex-custom.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0e385844a18124276701489a9e715008999f32e6
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/src/styles/katex-custom.scss
@@ -0,0 +1,16 @@
+// Override KaTeX SCSS variables to disable ttf and woff fonts
+// Only use woff2 format which is embedded in the bundle
+$use-woff2: true;
+$use-woff: false;
+$use-ttf: false;
+
+// Use Vite alias for font folder
+$font-folder: 'katex-fonts';
+
+// Import KaTeX SCSS with overridden variables
+@use 'katex/src/styles/katex.scss' with (
+	$use-woff2: true,
+	$use-woff: false,
+	$use-ttf: false,
+	$font-folder: 'katex-fonts'
+);
diff --git a/backend/llama.cpp/tools/ui/svelte.config.js b/backend/llama.cpp/tools/ui/svelte.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..897c7267f9cf049545e444d9b0892d600b837e51
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/svelte.config.js
@@ -0,0 +1,38 @@
+import { mdsvex } from 'mdsvex';
+import adapter from '@sveltejs/adapter-static';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+// CMake sets LLAMA_UI_OUT_DIR to the staging dir under the build tree; manual
+// `npm run build` runs without the env var default to ./dist.
+const outDir = process.env.LLAMA_UI_OUT_DIR ?? './dist';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://svelte.dev/docs/kit/integrations
+	// for more information about preprocessors
+	preprocess: [vitePreprocess(), mdsvex()],
+
+	kit: {
+		paths: {
+			relative: true
+		},
+		router: { type: 'hash' },
+		adapter: adapter({
+			pages: outDir,
+			assets: outDir,
+			fallback: 'index.html',
+			precompress: false,
+			strict: true
+		}),
+		output: {
+			bundleStrategy: 'single'
+		},
+		alias: {
+			$styles: 'src/styles'
+		}
+	},
+
+	extensions: ['.svelte', '.svx']
+};
+
+export default config;
diff --git a/backend/llama.cpp/tools/ui/tests/client/cap-img-size.svelte.test.ts b/backend/llama.cpp/tools/ui/tests/client/cap-img-size.svelte.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d704942086c00d98cea609cdb61c0bec1e4d59a9
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/client/cap-img-size.svelte.test.ts
@@ -0,0 +1,121 @@
+import { describe, expect, it } from 'vitest';
+import { capImageDataURLSize } from '$lib/utils/cap-img-size';
+import { getJpegOrientationFromDataURL } from '$lib/utils/jpeg-orientation';
+
+// Real 64x32 jpegs generated with Pillow, quality 90. The upright picture is
+// four solid quadrants: top left red, top right green, bottom left blue,
+// bottom right yellow. For each exif value the stored pixels are inverse
+// transposed so a conforming decoder shows the upright picture, exactly like
+// a rotated smartphone photo.
+const EXIF1 = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAEAAAAAAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAgAEADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD50ooor8MP9UwooooA9uooor4I/wCcwKKKKAPhSiiiv+gM/qgKKKKAP3Vooor/AJdz+lQooooA/9k=`;
+const EXIF3 = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAMAAAAAAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAgAEADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD7Nooor/Mo/XQooooA/Cqiiiv+og/moKKKKAPuuiiiv+fw/lcKKKKAPEaKKK+9P+jMKKKKAP/Z`;
+const EXIF5 = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAUAAAAAAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCABAACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD50ooor8MP9UzwKiiiv9xj/HQ99ooor/Dk/wBizwKiiiv9xj/HQ+66KKK/5/D+Vz7qooor+ej/AE9PhWiiiv6FP8wj7qooor+ej/T0/9k=`;
+const EXIF6 = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAAAAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCABAACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDCooor+Tz+Hz7qooor+ej/AE9PhWiiiv6FP8wj7qooor+ej/T0/Keiiiv7CP72PAqKKK/3GP8AHQ99ooor/Dk/2LPAqKKK/wBxj/HQ/9k=`;
+const EXIF8 = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAgAAAAAAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCABAACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD896KKK/1TPhz32iiiv8OT/Ys8Cooor/cY/wAdD32iiiv8OT/Ys/Viiiiv49P4JPhWiiiv6FP8wj7qooor+ej/AE9PhWiiiv6FP8wj/9k=`;
+const NOEXIF = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAgAEADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD50ooor8MP9UwooooA9uooor4I/wCcwKKKKAPhSiiiv+gM/qgKKKKAP3Vooor/AJdz+lQooooA/9k=`;
+
+const RED: Rgb = [255, 0, 0];
+const GREEN: Rgb = [0, 200, 0];
+const BLUE: Rgb = [0, 0, 255];
+const YELLOW: Rgb = [255, 220, 0];
+
+// Wide tolerance per channel, jpeg compression shifts solid colors a bit
+const COLOR_TOLERANCE = 70;
+
+// 0.000512 megapixels is 512 pixels, a quarter of the area of the 2048 pixel fixtures
+const QUARTER_AREA_MEGAPIXELS = 0.000512;
+
+type Rgb = [number, number, number];
+
+function loadImage(dataUrl: string): Promise<HTMLImageElement> {
+	return new Promise((resolve, reject) => {
+		const img = new Image();
+		img.onload = () => resolve(img);
+		img.onerror = () => reject(new Error('Failed to decode image.'));
+		img.src = dataUrl;
+	});
+}
+
+// Decodes a data URL and samples the center of each quadrant of the picture
+async function quadrantColors(dataUrl: string): Promise<Rgb[]> {
+	const img = await loadImage(dataUrl);
+	const canvas = document.createElement('canvas');
+	canvas.width = img.naturalWidth;
+	canvas.height = img.naturalHeight;
+	const ctx = canvas.getContext('2d')!;
+	ctx.drawImage(img, 0, 0);
+	const points = [
+		[0.25, 0.25],
+		[0.75, 0.25],
+		[0.25, 0.75],
+		[0.75, 0.75]
+	];
+	return points.map(([fx, fy]) => {
+		const d = ctx.getImageData(
+			Math.floor(canvas.width * fx),
+			Math.floor(canvas.height * fy),
+			1,
+			1
+		).data;
+		return [d[0], d[1], d[2]];
+	});
+}
+
+function expectUpright(colors: Rgb[]) {
+	const targets = [RED, GREEN, BLUE, YELLOW];
+	for (let i = 0; i < 4; i++) {
+		for (let c = 0; c < 3; c++) {
+			expect(Math.abs(colors[i][c] - targets[i][c])).toBeLessThan(COLOR_TOLERANCE);
+		}
+	}
+}
+
+describe('capImageDataURLSize orientation and capping', () => {
+	it('passes upright jpegs through untouched when capping is disabled', async () => {
+		expect(await capImageDataURLSize(EXIF1, 0)).toBe(EXIF1);
+		expect(await capImageDataURLSize(NOEXIF, 0)).toBe(NOEXIF);
+	});
+
+	it('passes upright jpegs through untouched when under the cap threshold', async () => {
+		expect(await capImageDataURLSize(EXIF1, 1)).toBe(EXIF1);
+	});
+
+	it.each([
+		['orientation 3', EXIF3],
+		['orientation 5', EXIF5],
+		['orientation 6', EXIF6],
+		['orientation 8', EXIF8]
+	])('bakes %s into upright pixels without capping', async (_label, fixture) => {
+		const result = await capImageDataURLSize(fixture, 0);
+
+		expect(result).not.toBe(fixture);
+
+		const img = await loadImage(result);
+
+		expect(img.naturalWidth).toBe(64);
+		expect(img.naturalHeight).toBe(32);
+		expectUpright(await quadrantColors(result));
+
+		// The re-encoded jpeg carries no orientation tag anymore
+		expect(getJpegOrientationFromDataURL(result)).toBe(1);
+	});
+
+	it('caps and bakes the orientation in a single output', async () => {
+		const result = await capImageDataURLSize(EXIF6, QUARTER_AREA_MEGAPIXELS);
+		const img = await loadImage(result);
+
+		expect(img.naturalWidth).toBe(32);
+		expect(img.naturalHeight).toBe(16);
+		expectUpright(await quadrantColors(result));
+		expect(getJpegOrientationFromDataURL(result)).toBe(1);
+	});
+
+	it('caps upright jpegs without disturbing the picture', async () => {
+		const result = await capImageDataURLSize(EXIF1, QUARTER_AREA_MEGAPIXELS);
+		const img = await loadImage(result);
+
+		expect(img.naturalWidth).toBe(32);
+		expect(img.naturalHeight).toBe(16);
+		expectUpright(await quadrantColors(result));
+	});
+});
diff --git a/backend/llama.cpp/tools/ui/tests/client/components/McpServerFormWrapper.svelte b/backend/llama.cpp/tools/ui/tests/client/components/McpServerFormWrapper.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..fe2cc958bc408dd93e4655de8d18b944e6775159
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/client/components/McpServerFormWrapper.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import McpServerForm from '$lib/components/app/mcp/McpServerForm.svelte';
+
+	interface Props {
+		headers?: string;
+	}
+
+	let { headers = '' }: Props = $props();
+
+	let headersState = $state(untrack(() => headers));
+	let lastCapturedHeaders = $state(untrack(() => headers));
+
+	$effect(() => {
+		if (headers !== lastCapturedHeaders) {
+			headersState = headers;
+			lastCapturedHeaders = headers;
+		}
+	});
+</script>
+
+<!--
+	Drives McpServerForm with a controlled `headers` string and exposes the
+	latest captured value through `data-captured-headers` so the client test
+	can read it back without a custom binding API.
+-->
+<McpServerForm
+	url="https://example.test/mcp"
+	headers={headersState}
+	onUrlChange={() => {}}
+	onHeadersChange={(value) => {
+		headersState = value;
+	}}
+	id="mcp-server-form-test"
+/>
+
+<div data-testid="captured-headers" data-captured-headers={headersState} hidden></div>
diff --git a/backend/llama.cpp/tools/ui/tests/client/components/TestWrapper.svelte b/backend/llama.cpp/tools/ui/tests/client/components/TestWrapper.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..1380ec851bd7fdef05a188641e5377d5a0e3700e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/client/components/TestWrapper.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import Page from '../../../src/routes/(chat)/+page.svelte';
+</script>
+
+<!--
+	Test wrapper that provides necessary context providers for component testing.
+	This mirrors the providers from +layout.svelte.
+-->
+<Tooltip.Provider>
+	<Page />
+</Tooltip.Provider>
diff --git a/backend/llama.cpp/tools/ui/tests/client/mcp-server-form.svelte.test.ts b/backend/llama.cpp/tools/ui/tests/client/mcp-server-form.svelte.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b4bd892347f7baa352fee14f0fe38c4d50ef5032
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/client/mcp-server-form.svelte.test.ts
@@ -0,0 +1,133 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import McpServerFormWrapper from './components/McpServerFormWrapper.svelte';
+
+const AUTHORIZATION_HEADER = 'Authorization';
+const BEARER_PREFIX = 'Bearer ';
+const BEARER_PLACEHOLDER = 'Paste token here';
+
+/**
+ * Client-side tests for the McpServerForm bearer UI.
+ *
+ * The dedicated UI only "owns" Authorization headers that already carry a
+ * Bearer scheme (heuristic check on the value). Other Authorization values
+ * stay in the KV section so the user can still edit them verbatim. Storage
+ * always goes through the same custom-headers slot, so a round-trip via this
+ * UI produces exactly one `Authorization: Bearer <token>` entry.
+ *
+ * Equivalent parser coverage lives in `tests/unit/headers.test.ts`.
+ */
+describe('McpServerForm - Authorization / bearer UI', () => {
+	function bearerInput(screen: Awaited<ReturnType<typeof render>>) {
+		return screen.locator.getByPlaceholder(BEARER_PLACEHOLDER);
+	}
+
+	function capturedHeaders(screen: Awaited<ReturnType<typeof render>>) {
+		return screen.getByTestId('captured-headers');
+	}
+
+	it('mounts with the bearer input hidden when no auth header is present', async () => {
+		const screen = await render(McpServerFormWrapper, { headers: '' });
+
+		await expect.element(screen.getByRole('textbox', { name: /server url/i })).toBeVisible();
+
+		await expect.element(bearerInput(screen)).not.toBeInTheDocument();
+	});
+
+	it('toggling Authorization shows the bearer input', async () => {
+		const screen = await render(McpServerFormWrapper, { headers: '' });
+
+		await screen.getByRole('switch', { name: /authorization/i }).click();
+
+		await expect.element(bearerInput(screen)).toBeVisible();
+	});
+
+	it('typing a token writes the Authorization row with the Bearer prefix prepended', async () => {
+		const screen = await render(McpServerFormWrapper, { headers: '' });
+
+		await screen.getByRole('switch', { name: /authorization/i }).click();
+
+		const token = 'super-secret';
+		await bearerInput(screen).fill(token);
+
+		const expected = JSON.stringify({ [AUTHORIZATION_HEADER]: `${BEARER_PREFIX}${token}` });
+		await expect
+			.element(capturedHeaders(screen))
+			.toHaveAttribute('data-captured-headers', expected);
+	});
+
+	it('pre-existing Bearer header pre-fills the bearer input with the token stripped', async () => {
+		const existing = JSON.stringify({
+			'X-Trace-Id': 'abc',
+			[AUTHORIZATION_HEADER]: `${BEARER_PREFIX}preexisting`
+		});
+
+		const screen = await render(McpServerFormWrapper, { headers: existing });
+
+		await expect.element(bearerInput(screen)).toBeVisible();
+		await expect.element(bearerInput(screen)).toHaveValue('preexisting');
+	});
+
+	it('non-Bearer Authorization is ignored by the dedicated UI and stays in the KV section', async () => {
+		const existing = JSON.stringify({ [AUTHORIZATION_HEADER]: 'Basic czNjcjpwYXNz' });
+
+		const screen = await render(McpServerFormWrapper, { headers: existing });
+
+		await expect.element(bearerInput(screen)).not.toBeInTheDocument();
+
+		const headerKeyInput = screen.getByPlaceholder('Header name');
+		await expect.element(headerKeyInput).toBeVisible();
+	});
+
+	it('engaging the token UI replaces a non-Bearer Authorization with the Bearer scheme', async () => {
+		const existing = JSON.stringify({ [AUTHORIZATION_HEADER]: 'Basic old' });
+
+		const screen = await render(McpServerFormWrapper, { headers: existing });
+
+		await screen.getByRole('switch', { name: /authorization/i }).click();
+		await bearerInput(screen).fill('new');
+
+		const expected = JSON.stringify({ [AUTHORIZATION_HEADER]: `${BEARER_PREFIX}new` });
+		await expect
+			.element(capturedHeaders(screen))
+			.toHaveAttribute('data-captured-headers', expected);
+	});
+
+	it('toggling Authorization off with no token drops the Bearer row but keeps non-Bearer schemes', async () => {
+		const existing = JSON.stringify({ [AUTHORIZATION_HEADER]: `${BEARER_PREFIX}xyz` });
+		const screen = await render(McpServerFormWrapper, { headers: existing });
+
+		await screen.getByRole('switch', { name: /authorization/i }).click();
+
+		await expect.element(capturedHeaders(screen)).toHaveAttribute('data-captured-headers', '');
+	});
+
+	it('toggling Authorization off when no Bearer row is present leaves headers untouched', async () => {
+		const existing = JSON.stringify({ [AUTHORIZATION_HEADER]: 'Basic czNjcjpwYXNz' });
+		const screen = await render(McpServerFormWrapper, { headers: existing });
+
+		await screen.getByRole('switch', { name: /authorization/i }).click();
+		await screen.getByRole('switch', { name: /authorization/i }).click();
+
+		await expect
+			.element(capturedHeaders(screen))
+			.toHaveAttribute('data-captured-headers', existing);
+	});
+
+	it('clearing the bearer input drops the Authorization row', async () => {
+		const existing = JSON.stringify({ [AUTHORIZATION_HEADER]: `${BEARER_PREFIX}xyz` });
+		const screen = await render(McpServerFormWrapper, { headers: existing });
+
+		await bearerInput(screen).fill('');
+
+		await expect.element(capturedHeaders(screen)).toHaveAttribute('data-captured-headers', '');
+	});
+
+	it('does not surface Bearer Authorization in the KV section even when pre-existing', async () => {
+		const existing = JSON.stringify({ [AUTHORIZATION_HEADER]: `${BEARER_PREFIX}xyz` });
+		const screen = await render(McpServerFormWrapper, { headers: existing });
+
+		const headerKeyInput = screen.getByPlaceholder('Header name');
+		await expect.element(headerKeyInput).not.toBeInTheDocument();
+	});
+});
diff --git a/backend/llama.cpp/tools/ui/tests/client/page.svelte.test.ts b/backend/llama.cpp/tools/ui/tests/client/page.svelte.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..32e333d7f5194487443b74a3b298493a21d57c37
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/client/page.svelte.test.ts
@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import TestWrapper from './components/TestWrapper.svelte';
+
+describe('/+page.svelte', () => {
+	it('should render page without throwing', async () => {
+		// Basic smoke test - page should render without throwing errors.
+		// API calls are mocked in vitest-setup-client.ts.
+		await render(TestWrapper);
+		expect(true).toBe(true);
+	});
+});
diff --git a/backend/llama.cpp/tools/ui/tests/e2e/pwa.e2e.ts b/backend/llama.cpp/tools/ui/tests/e2e/pwa.e2e.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c20eec276175dc25a48b4bf4eb5e22968b620087
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/e2e/pwa.e2e.ts
@@ -0,0 +1,109 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('PWA Service Worker', () => {
+	test('service worker is registered', async ({ page }) => {
+		await page.goto('/');
+
+		const swURL = await page.evaluate(async () => {
+			const registration = await Promise.race([
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore - type inference differs from browser runtime
+				navigator.serviceWorker.ready,
+				new Promise((_, reject) =>
+					setTimeout(() => reject(new Error('Service worker registration failed: timeout')), 15000)
+				)
+			]);
+			// @ts-expect-error registration is of type unknown
+			return registration.active?.scriptURL;
+		});
+
+		expect(swURL).toBeTruthy();
+		expect(swURL).toContain('/sw.js');
+	});
+
+	test('service worker has precache configured', async ({ page }) => {
+		await page.goto('/');
+
+		await page.evaluate(async () => {
+			await navigator.serviceWorker.ready;
+		});
+
+		const swActive = await page.evaluate(async () => {
+			const reg = await navigator.serviceWorker.ready;
+			return reg.active?.scriptURL ?? null;
+		});
+
+		expect(swActive).toBeTruthy();
+
+		const swResponse = await page.request.get(swActive!);
+		const swContent = await swResponse.text();
+
+		// Precache contains SvelteKit content-hashed bundle paths
+		expect(swContent).toMatch(/"_app\/immutable\/bundle\.[a-zA-Z0-9_-]+\.js"/);
+		expect(swContent).toMatch(/"_app\/immutable\/assets\/bundle\.[a-zA-Z0-9_-]+\.css"/);
+		expect(swContent).toMatch(/"manifest\.webmanifest"/);
+		expect(swContent).toMatch(/"_app\/version\.json"/);
+		// NavigationRoute is intentionally absent — server API endpoints
+		// (e.g. /slots, /models) must not be intercepted by the PWA and
+		// should return JSON directly from the server.
+		expect(swContent).not.toMatch(/NavigationRoute/);
+		expect(swContent).toMatch(/api-cache/);
+	});
+
+	test('offline mode - page loads when offline after caching', async ({ browser }) => {
+		const context = await browser.newContext();
+		const offlinePage = await context.newPage();
+
+		await offlinePage.goto('/');
+		await offlinePage.waitForLoadState('networkidle');
+
+		await offlinePage.evaluate(async () => {
+			await navigator.serviceWorker.ready;
+		});
+
+		await offlinePage.waitForTimeout(2000);
+
+		await context.setOffline(true);
+		await offlinePage.goto('/');
+
+		const bodyText = await offlinePage.locator('body').textContent();
+		expect(bodyText).toBeTruthy();
+
+		await context.close();
+	});
+
+	test('version.json is accessible and contains version', async ({ page }) => {
+		const versionResponse = await page.request.get('/_app/version.json');
+		expect(versionResponse.ok()).toBeTruthy();
+
+		const versionData = await versionResponse.json();
+		expect(versionData).toHaveProperty('version');
+		expect(typeof versionData.version).toBe('string');
+		expect(versionData.version.length).toBeGreaterThan(0);
+	});
+
+	test('manifest.webmanifest is accessible and valid', async ({ page }) => {
+		const response = await page.request.get('/manifest.webmanifest');
+		expect(response.ok()).toBeTruthy();
+
+		const manifest = await response.json();
+		expect(manifest).toHaveProperty('name', 'llama-ui');
+		expect(manifest).toHaveProperty('short_name', 'llama-ui');
+		expect(manifest).toHaveProperty('start_url', './');
+		expect(manifest).toHaveProperty('display', 'standalone');
+		expect(manifest.icons).toBeTruthy();
+		expect(manifest.icons.length).toBeGreaterThan(0);
+	});
+
+	test('index.html contains content-hashed bundle references', async ({ page }) => {
+		const response = await page.request.get('/');
+		expect(response.ok()).toBeTruthy();
+
+		const html = await response.text();
+
+		// SvelteKit outputs content-hashed bundle names in _app/immutable/
+		expect(html).toMatch(/href="(\.\/|\/)_app\/immutable\/bundle\.[a-zA-Z0-9_-]+\.js"/);
+		expect(html).toMatch(/href="(\.\/|\/)_app\/immutable\/assets\/bundle\.[a-zA-Z0-9_-]+\.css"/);
+		expect(html).toMatch(/import\("(\.\/|\/)_app\/immutable\/bundle\.[a-zA-Z0-9_-]+\.js"\)/);
+	});
+});
diff --git a/backend/llama.cpp/tools/ui/tests/stories/ChatMessage.stories.svelte b/backend/llama.cpp/tools/ui/tests/stories/ChatMessage.stories.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..e640176a8459b6b8667d167d51dc927d4ba3a758
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/ChatMessage.stories.svelte
@@ -0,0 +1,207 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ChatMessage from '$lib/components/app/chat/ChatMessages/ChatMessage/ChatMessage.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Components/ChatScreen/ChatMessage',
+		component: ChatMessage,
+		parameters: {
+			layout: 'centered'
+		}
+	});
+
+	// Mock messages for different scenarios
+	const userMessage: DatabaseMessage = {
+		id: '1',
+		convId: 'conv-1',
+		type: 'message',
+		timestamp: Date.now() - 1000 * 60 * 5,
+		role: 'user',
+		content: 'What is the meaning of life, the universe, and everything?',
+		parent: '',
+		thinking: '',
+		children: []
+	};
+
+	const assistantMessage: DatabaseMessage = {
+		id: '2',
+		convId: 'conv-1',
+		type: 'message',
+		timestamp: Date.now() - 1000 * 60 * 3,
+		role: 'assistant',
+		content:
+			'The answer to the ultimate question of life, the universe, and everything is **42**.\n\nThis comes from Douglas Adams\' "The Hitchhiker\'s Guide to the Galaxy," where a supercomputer named Deep Thought calculated this answer over 7.5 million years. However, the question itself was never properly formulated, which is why the answer seems meaningless without context.',
+		parent: '1',
+		thinking: '',
+		children: []
+	};
+
+	const assistantWithReasoning: DatabaseMessage = {
+		id: '3',
+		convId: 'conv-1',
+		type: 'message',
+		timestamp: Date.now() - 1000 * 60 * 2,
+		role: 'assistant',
+		content: "Here's the concise answer, now that I've thought it through carefully for you.",
+		parent: '1',
+		thinking:
+			"Let's consider the user's question step by step:\\n\\n1. Identify the core problem\\n2. Evaluate relevant information\\n3. Formulate a clear answer\\n\\nFollowing this process ensures the final response stays focused and accurate.",
+		children: []
+	};
+	const rawOutputMessage: DatabaseMessage = {
+		id: '6',
+		convId: 'conv-1',
+		type: 'message',
+		timestamp: Date.now() - 1000 * 60,
+		role: 'assistant',
+		content:
+			'<|channel|>analysis<|message|>User greeted me. Initiating overcomplicated analysis: Is this a trap? No, just a normal hello. Respond calmly, act like a helpful assistant, and do not start explaining quantum physics again. Confidence 0.73. Engaging socially acceptable greeting protocol...<|end|>Hello there! How can I help you today?',
+		parent: '1',
+		thinking: '',
+		children: []
+	};
+
+	let processingMessage = $state({
+		id: '4',
+		convId: 'conv-1',
+		type: 'message',
+		timestamp: 0, // No timestamp = processing
+		role: 'assistant',
+		content: '',
+		parent: '1',
+		thinking: '',
+		children: []
+	});
+
+	let streamingMessage = $state({
+		id: '5',
+		convId: 'conv-1',
+		type: 'message',
+		timestamp: 0, // No timestamp = streaming
+		role: 'assistant',
+		content: '',
+		parent: '1',
+		thinking: '',
+		children: []
+	});
+</script>
+
+<Story
+	name="User"
+	args={{
+		message: userMessage
+	}}
+	play={async () => {
+		const { settingsStore } = await import('$lib/stores/settings.svelte');
+		settingsStore.updateConfig('showRawOutputSwitch', false);
+	}}
+/>
+
+<Story
+	name="Assistant"
+	args={{
+		class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
+		message: assistantMessage
+	}}
+	play={async () => {
+		const { settingsStore } = await import('$lib/stores/settings.svelte');
+		settingsStore.updateConfig('showRawOutputSwitch', false);
+	}}
+/>
+
+<Story
+	name="AssistantWithReasoning"
+	args={{
+		class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
+		message: assistantWithReasoning
+	}}
+	play={async () => {
+		const { settingsStore } = await import('$lib/stores/settings.svelte');
+		settingsStore.updateConfig('showRawOutputSwitch', false);
+	}}
+/>
+
+<Story
+	name="RawLlmOutput"
+	args={{
+		class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
+		message: rawOutputMessage
+	}}
+	play={async () => {
+		const { settingsStore } = await import('$lib/stores/settings.svelte');
+		settingsStore.updateConfig('showRawOutputSwitch', true);
+	}}
+/>
+
+<Story
+	name="WithReasoningContent"
+	args={{
+		message: streamingMessage
+	}}
+	asChild
+	play={async () => {
+		const { settingsStore } = await import('$lib/stores/settings.svelte');
+		settingsStore.updateConfig('showRawOutputSwitch', false);
+		// Phase 1: Stream reasoning content in chunks
+		let reasoningText =
+			'I need to think about this carefully. Let me break down the problem:\n\n1. The user is asking for help with something complex\n2. I should provide a thorough and helpful response\n3. I need to consider multiple approaches\n4. The best solution would be to explain step by step\n\nThis approach will ensure clarity and understanding.';
+
+		let reasoningChunk = 'I';
+		let i = 0;
+		while (i < reasoningText.length) {
+			const chunkSize = Math.floor(Math.random() * 5) + 3; // Random 3-7 characters
+			const chunk = reasoningText.slice(i, i + chunkSize);
+			reasoningChunk += chunk;
+
+			// Update the reactive state directly
+			streamingMessage.thinking = reasoningChunk;
+
+			i += chunkSize;
+			await new Promise((resolve) => setTimeout(resolve, 50));
+		}
+
+		const regularText =
+			"Based on my analysis, here's the solution:\n\n**Step 1:** First, we need to understand the requirements clearly.\n\n**Step 2:** Then we can implement the solution systematically.\n\n**Step 3:** Finally, we test and validate the results.\n\nThis approach ensures we cover all aspects of the problem effectively.";
+
+		let contentChunk = '';
+		i = 0;
+
+		while (i < regularText.length) {
+			const chunkSize = Math.floor(Math.random() * 5) + 3; // Random 3-7 characters
+			const chunk = regularText.slice(i, i + chunkSize);
+			contentChunk += chunk;
+
+			// Update the reactive state directly
+			streamingMessage.content = contentChunk;
+
+			i += chunkSize;
+			await new Promise((resolve) => setTimeout(resolve, 50));
+		}
+
+		streamingMessage.timestamp = Date.now();
+	}}
+>
+	<div class="w-[56rem]">
+		<ChatMessage message={streamingMessage} />
+	</div>
+</Story>
+
+<Story
+	name="Processing"
+	args={{
+		message: processingMessage
+	}}
+	play={async () => {
+		const { settingsStore } = await import('$lib/stores/settings.svelte');
+		settingsStore.updateConfig('showRawOutputSwitch', false);
+		// Import the chat store to simulate loading state
+		const { chatStore } = await import('$lib/stores/chat.svelte');
+
+		// Set loading state to true to trigger the processing UI
+		chatStore.isLoading = true;
+
+		// Simulate the processing state hook behavior
+		// This will show the "Generating..." text and parameter details
+		await new Promise((resolve) => setTimeout(resolve, 100));
+	}}
+/>
diff --git a/backend/llama.cpp/tools/ui/tests/stories/ChatScreenForm.stories.svelte b/backend/llama.cpp/tools/ui/tests/stories/ChatScreenForm.stories.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..4c1734345955d7da3440d303614564c4c74af5af
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/ChatScreenForm.stories.svelte
@@ -0,0 +1,94 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ChatScreenForm from '$lib/components/app/chat/ChatScreen/ChatScreenForm.svelte';
+	import { expect } from 'storybook/test';
+	import jpgAsset from './fixtures/assets/1.jpg?url';
+	import svgAsset from './fixtures/assets/hf-logo.svg?url';
+	import pdfAsset from './fixtures/assets/example.pdf?raw';
+
+	const { Story } = defineMeta({
+		title: 'Components/ChatScreen/ChatScreenForm',
+		component: ChatScreenForm,
+		parameters: {
+			layout: 'centered'
+		}
+	});
+
+	let fileAttachments = $state([
+		{
+			id: '1',
+			name: '1.jpg',
+			type: 'image/jpeg',
+			size: 44891,
+			preview: jpgAsset,
+			file: new File([''], '1.jpg', { type: 'image/jpeg' })
+		},
+		{
+			id: '2',
+			name: 'hf-logo.svg',
+			type: 'image/svg+xml',
+			size: 1234,
+			preview: svgAsset,
+			file: new File([''], 'hf-logo.svg', { type: 'image/svg+xml' })
+		},
+		{
+			id: '3',
+			name: 'example.pdf',
+			type: 'application/pdf',
+			size: 351048,
+			file: new File([pdfAsset], 'example.pdf', { type: 'application/pdf' })
+		}
+	]);
+</script>
+
+<Story
+	name="Default"
+	args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+	play={async ({ canvas, userEvent }) => {
+		const textarea = await canvas.findByRole('textbox');
+		const submitButton = await canvas.findByRole('button', { name: 'Send' });
+
+		// Expect the input to be focused after the component is mounted
+		await expect(textarea).toHaveFocus();
+
+		// Expect the submit button to be disabled
+		await expect(submitButton).toBeDisabled();
+
+		const text = 'What is the meaning of life?';
+
+		await userEvent.clear(textarea);
+		await userEvent.type(textarea, text);
+
+		await expect(textarea).toHaveValue(text);
+
+		const fileInput = document.querySelector('input[type="file"]');
+		await expect(fileInput).not.toHaveAttribute('accept');
+	}}
+/>
+
+<Story name="Loading" args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]', isLoading: true }} />
+
+<Story
+	name="FileAttachments"
+	args={{
+		class: 'max-w-[56rem] w-[calc(100vw-2rem)]',
+		uploadedFiles: fileAttachments
+	}}
+	play={async ({ canvas }) => {
+		const jpgAttachment = canvas.getByAltText('1.jpg');
+		const svgAttachment = canvas.getByAltText('hf-logo.svg');
+		const pdfFileExtension = canvas.getByText('PDF');
+		const pdfAttachment = canvas.getByText('example.pdf');
+		const pdfSize = canvas.getByText('342.82 KB');
+
+		await expect(jpgAttachment).toBeInTheDocument();
+		await expect(jpgAttachment).toHaveAttribute('src', jpgAsset);
+
+		await expect(svgAttachment).toBeInTheDocument();
+		await expect(svgAttachment).toHaveAttribute('src', svgAsset);
+
+		await expect(pdfFileExtension).toBeInTheDocument();
+		await expect(pdfAttachment).toBeInTheDocument();
+		await expect(pdfSize).toBeInTheDocument();
+	}}
+/>
diff --git a/backend/llama.cpp/tools/ui/tests/stories/Introduction.mdx b/backend/llama.cpp/tools/ui/tests/stories/Introduction.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..d4c0c792164c5f5b2bd27c03e0306c0b2c9d647d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/Introduction.mdx
@@ -0,0 +1,44 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Introduction" />
+
+# llama.cpp Web UI
+
+Welcome to the **llama-ui** component library! This Storybook showcases the components used in the modern web interface for the llama-server.
+
+## 🚀 About This Project
+
+Llama UI is a modern web interface for the llama-server, built with SvelteKit and ShadCN UI. Features include:
+
+- **Real-time chat conversations** with AI assistants
+- **Multi-conversation management** with persistent storage
+- **Advanced parameter tuning** for model behavior
+- **File upload support** for multimodal interactions
+- **Responsive design** that works on desktop and mobile
+
+## 🎨 Design System
+
+The UI is built using:
+
+- **SvelteKit** - Modern web framework with excellent performance
+- **Tailwind CSS** - Utility-first CSS framework for rapid styling
+- **ShadCN/UI** - High-quality, accessible component library
+- **Lucide Icons** - Beautiful, consistent icon set
+
+## 🔧 Development
+
+This Storybook serves as both documentation and a development environment for the UI components. Each story demonstrates:
+
+- **Component variations** - Different states and configurations
+- **Interactive examples** - Live components you can interact with
+- **Usage patterns** - How components work together
+- **Styling consistency** - Unified design language
+
+## 🚀 Getting Started
+
+To explore the components:
+
+1. **Browse the sidebar** to see all available components
+2. **Click on stories** to see different component states
+3. **Use the controls panel** to interact with component props
+4. **Check the docs tab** for detailed component information
diff --git a/backend/llama.cpp/tools/ui/tests/stories/MarkdownContent.stories.svelte b/backend/llama.cpp/tools/ui/tests/stories/MarkdownContent.stories.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..04f270a432e86be1a707553bf4bfe8018dfe246f
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/MarkdownContent.stories.svelte
@@ -0,0 +1,132 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { expect } from 'storybook/test';
+	import { MarkdownContent } from '$lib/components/app';
+	import { AI_TUTORIAL_MD } from './fixtures/ai-tutorial.js';
+	import { API_DOCS_MD } from './fixtures/api-docs.js';
+	import { BLOG_POST_MD } from './fixtures/blog-post.js';
+	import { DATA_ANALYSIS_MD } from './fixtures/data-analysis.js';
+	import { README_MD } from './fixtures/readme.js';
+	import { MATH_FORMULAS_MD } from './fixtures/math-formulas.js';
+	import { EMPTY_MD } from './fixtures/empty.js';
+
+	const { Story } = defineMeta({
+		title: 'Components/MarkdownContent',
+		component: MarkdownContent,
+		parameters: {
+			layout: 'centered'
+		}
+	});
+</script>
+
+<Story name="Empty" args={{ content: EMPTY_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }} />
+
+<Story
+	name="AI Tutorial"
+	args={{ content: AI_TUTORIAL_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+/>
+
+<Story
+	name="API Documentation"
+	args={{ content: API_DOCS_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+/>
+
+<Story
+	name="Technical Blog"
+	args={{ content: BLOG_POST_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+/>
+
+<Story
+	name="Data Analysis"
+	args={{ content: DATA_ANALYSIS_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+/>
+
+<Story
+	name="README file"
+	args={{ content: README_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+/>
+
+<Story
+	name="Math Formulas"
+	args={{ content: MATH_FORMULAS_MD, class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+/>
+
+<Story
+	name="URL Links"
+	args={{
+		content: `# URL Links Test
+
+Here are some example URLs that should open in new tabs:
+
+- [Hugging Face Homepage](https://huggingface.co)
+- [GitHub Repository](https://github.com/ggml-org/llama.cpp)
+- [OpenAI Website](https://openai.com)
+- [Google Search](https://www.google.com)
+
+You can also test inline links like https://example.com or https://docs.python.org.
+
+All links should have \`target="_blank"\` and \`rel="noopener noreferrer"\` attributes for security.`,
+		class: 'max-w-[56rem] w-[calc(100vw-2rem)]'
+	}}
+	play={async (context) => {
+		const { canvasElement } = context;
+		// Wait for component to render
+		await new Promise((resolve) => setTimeout(resolve, 100));
+
+		// Find all links in the rendered content
+		const links = (canvasElement as HTMLElement).querySelectorAll(
+			'a[href]'
+		) as NodeListOf<HTMLAnchorElement>;
+		const linkList = Array.from(links) as HTMLAnchorElement[];
+
+		// Test that we have the expected number of links
+		expect(links.length).toBeGreaterThan(0);
+
+		// Test each link for proper attributes
+		links.forEach((link: HTMLAnchorElement) => {
+			const href = link.getAttribute('href');
+
+			// Test that external links have proper security attributes
+			if (href && (href.startsWith('http://') || href.startsWith('https://'))) {
+				expect(link.getAttribute('target')).toBe('_blank');
+				expect(link.getAttribute('rel')).toBe('noopener noreferrer');
+			}
+		});
+
+		// Test specific links exist
+		const hugginFaceLink = linkList.find(
+			(link) => link.getAttribute('href') === 'https://huggingface.co'
+		);
+		expect(hugginFaceLink).toBeTruthy();
+		expect(hugginFaceLink?.textContent).toBe('Hugging Face Homepage');
+
+		const githubLink = linkList.find(
+			(link) => link.getAttribute('href') === 'https://github.com/ggml-org/llama.cpp'
+		);
+		expect(githubLink).toBeTruthy();
+		expect(githubLink?.textContent).toBe('GitHub Repository');
+
+		const openaiLink = linkList.find((link) => link.getAttribute('href') === 'https://openai.com');
+		expect(openaiLink).toBeTruthy();
+		expect(openaiLink?.textContent).toBe('OpenAI Website');
+
+		const googleLink = linkList.find(
+			(link) => link.getAttribute('href') === 'https://www.google.com'
+		);
+		expect(googleLink).toBeTruthy();
+		expect(googleLink?.textContent).toBe('Google Search');
+
+		// Test inline links (auto-linked URLs)
+		const exampleLink = linkList.find(
+			(link) => link.getAttribute('href') === 'https://example.com'
+		);
+		expect(exampleLink).toBeTruthy();
+
+		const pythonDocsLink = linkList.find(
+			(link) => link.getAttribute('href') === 'https://docs.python.org'
+		);
+		expect(pythonDocsLink).toBeTruthy();
+
+		console.log(`✅ URL Links test passed - Found ${links.length} links with proper attributes`);
+	}}
+/>
diff --git a/backend/llama.cpp/tools/ui/tests/stories/ModelsSelector.stories.svelte b/backend/llama.cpp/tools/ui/tests/stories/ModelsSelector.stories.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..3aba0dc78e452e4caf302efd30efe525b29bb864
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/ModelsSelector.stories.svelte
@@ -0,0 +1,269 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ModelsSelectorList from '$lib/components/app/models/ModelsSelectorList.svelte';
+	import ModelsSelectorOption from '$lib/components/app/models/ModelsSelectorOption.svelte';
+	import type { GroupedModelOptions, ModelItem } from '$lib/components/app/models/utils';
+	import { modelsStore } from '$lib/stores/models.svelte';
+	import { ServerModelStatus } from '$lib/enums';
+
+	const { Story } = defineMeta({
+		title: 'Components/ModelsSelector',
+		parameters: {
+			layout: 'centered'
+		}
+	});
+
+	const mockModel = (id: string, name: string, orgName?: string, tags?: string[]): ModelOption => ({
+		id,
+		name,
+		model: orgName ? `${orgName}/${name}` : name,
+		capabilities: [],
+		parsedId: {
+			raw: orgName ? `${orgName}/${name}` : name,
+			orgName: orgName ?? null,
+			modelName: name,
+			params: null,
+			activatedParams: null,
+			quantization: null,
+			tags: tags ?? []
+		},
+		tags
+	});
+
+	const mockRouterEntry = (modelName: string, status: ServerModelStatus): ApiModelDataEntry => ({
+		id: modelName,
+		object: 'model',
+		owned_by: 'llamacpp',
+		created: Date.now(),
+		in_cache: true,
+		path: `/models/${modelName}`,
+		status: { value: status }
+	});
+</script>
+
+<script lang="ts">
+	let selectedModel = $state<string | null>(null);
+	let activeId = $state<string | null>(null);
+
+	function mockModelsStore() {
+		modelsStore.favoriteModelIds = new Set(['qwen2.5-7b', 'llama3.2-3b']);
+
+		// Mock router models with various statuses for ModelLoadedStates story
+		modelsStore.routerModels = [
+			mockRouterEntry('meta/Model (loading)', ServerModelStatus.LOADING),
+			mockRouterEntry('meta/Model (loaded)', ServerModelStatus.LOADED),
+			mockRouterEntry('meta/Model (sleeping)', ServerModelStatus.SLEEPING),
+			mockRouterEntry('meta/Model (failed)', ServerModelStatus.FAILED)
+		];
+	}
+
+	mockModelsStore();
+
+	const loadedModels: ModelItem[] = [
+		{ option: mockModel('llama3.1-8b', 'Llama-3.1-8B-Instruct', 'meta'), flatIndex: 0 },
+		{ option: mockModel('mistral-7b', 'Mistral-7B-v0.3', 'mistralai'), flatIndex: 1 }
+	];
+
+	const favoriteModels: ModelItem[] = [
+		{ option: mockModel('qwen2.5-7b', 'Qwen2.5-7B-Instruct', 'Qwen'), flatIndex: 2 },
+		{ option: mockModel('llama3.2-3b', 'Llama-3.2-3B-Instruct', 'meta'), flatIndex: 3 }
+	];
+
+	const availableModels: ModelItem[] = [
+		{
+			option: mockModel('deepseek-coder-6.7b', 'DeepSeek-Coder-6.7B', 'deepseek', ['coding']),
+			flatIndex: 4
+		},
+		{ option: mockModel('gemma-2-9b', 'Gemma-2-9B-IT', 'google'), flatIndex: 5 },
+		{ option: mockModel('phi-3-mini', 'Phi-3-mini-4k', 'microsoft'), flatIndex: 6 },
+		{ option: mockModel('codellama-7b', 'CodeLlama-7B', 'codellama', ['coding']), flatIndex: 7 },
+		{ option: mockModel('neural-chat-7b', 'Neural-Chat-7B-v3-3', 'intel'), flatIndex: 8 }
+	];
+
+	const groupedOptions: GroupedModelOptions = {
+		loaded: loadedModels,
+		favorites: favoriteModels,
+		available: [
+			{
+				orgName: 'deepseek',
+				items: [availableModels[0]]
+			},
+			{
+				orgName: 'google',
+				items: [availableModels[1]]
+			},
+			{
+				orgName: 'microsoft',
+				items: [availableModels[2]]
+			},
+			{
+				orgName: 'codellama',
+				items: [availableModels[3]]
+			},
+			{
+				orgName: 'intel',
+				items: [availableModels[4]]
+			}
+		]
+	};
+
+	function handleSelect(modelId: string) {
+		const opt = [...loadedModels, ...favoriteModels, ...availableModels].find(
+			(m) => m.option.id === modelId
+		);
+		if (opt) {
+			selectedModel = opt.option.model;
+			activeId = modelId;
+		}
+	}
+</script>
+
+<Story name="List">
+	<div class="w-80 rounded-lg border border-border bg-popover p-2 shadow-md">
+		<ModelsSelectorList
+			groups={groupedOptions}
+			currentModel={selectedModel}
+			{activeId}
+			onSelect={handleSelect}
+			onInfoClick={(modelName) => console.log('Info clicked:', modelName)}
+		/>
+	</div>
+</Story>
+
+<Story name="SingleLoaded">
+	<div class="w-80 rounded-lg border border-border bg-popover p-2 shadow-md">
+		<ModelsSelectorList
+			groups={{
+				loaded: [loadedModels[0]],
+				favorites: [],
+				available: []
+			}}
+			currentModel={null}
+			activeId={null}
+			onSelect={handleSelect}
+			onInfoClick={(modelName) => console.log('Info clicked:', modelName)}
+		/>
+	</div>
+</Story>
+
+<Story name="WithFavoritesOnly">
+	<div class="w-80 rounded-lg border border-border bg-popover p-2 shadow-md">
+		<ModelsSelectorList
+			groups={{
+				loaded: [],
+				favorites: favoriteModels,
+				available: []
+			}}
+			currentModel={null}
+			activeId={null}
+			onSelect={handleSelect}
+			onInfoClick={(modelName) => console.log('Info clicked:', modelName)}
+		/>
+	</div>
+</Story>
+
+<Story name="ModelLoadedStates">
+	<div class="w-80 rounded-lg border border-border bg-popover p-2 shadow-md">
+		<div class="px-2 py-2 text-[13px] font-semibold text-muted-foreground/70 select-none">
+			Server model states
+		</div>
+		<ModelsSelectorOption
+			option={mockModel('model-idle', 'Model (idle)', 'meta')}
+			isSelected={false}
+			isHighlighted={false}
+			isFav={false}
+			hideOrgName={true}
+			onSelect={() => {}}
+			onMouseEnter={() => {}}
+			onKeyDown={() => {}}
+		/>
+		<ModelsSelectorOption
+			option={mockModel('model-loading', 'Model (loading)', 'meta')}
+			isSelected={false}
+			isHighlighted={false}
+			isFav={false}
+			hideOrgName={true}
+			onSelect={() => {}}
+			onMouseEnter={() => {}}
+			onKeyDown={() => {}}
+		/>
+		<ModelsSelectorOption
+			option={mockModel('model-loaded', 'Model (loaded)', 'meta')}
+			isSelected={false}
+			isHighlighted={false}
+			isFav={false}
+			hideOrgName={true}
+			onSelect={() => {}}
+			onMouseEnter={() => {}}
+			onKeyDown={() => {}}
+		/>
+		<ModelsSelectorOption
+			option={mockModel('model-sleeping', 'Model (sleeping)', 'meta')}
+			isSelected={false}
+			isHighlighted={false}
+			isFav={false}
+			hideOrgName={true}
+			onSelect={() => {}}
+			onMouseEnter={() => {}}
+			onKeyDown={() => {}}
+		/>
+		<ModelsSelectorOption
+			option={mockModel('model-failed', 'Model (failed)', 'meta')}
+			isSelected={false}
+			isHighlighted={false}
+			isFav={false}
+			hideOrgName={true}
+			onSelect={() => {}}
+			onMouseEnter={() => {}}
+			onKeyDown={() => {}}
+		/>
+	</div>
+</Story>
+
+<Story name="ModelSelectedStates">
+	<div class="w-80 rounded-lg border border-border bg-popover p-2 shadow-md">
+		<div class="px-2 py-2 text-[13px] font-semibold text-muted-foreground/70 select-none">
+			Selection states
+		</div>
+		<ModelsSelectorOption
+			option={mockModel('normal-model', 'Normal Model', 'meta')}
+			isSelected={false}
+			isHighlighted={false}
+			isFav={false}
+			hideOrgName={true}
+			onSelect={() => {}}
+			onMouseEnter={() => {}}
+			onKeyDown={() => {}}
+		/>
+		<ModelsSelectorOption
+			option={mockModel('selected-model', 'Selected Model', 'meta')}
+			isSelected={true}
+			isHighlighted={false}
+			isFav={false}
+			hideOrgName={true}
+			onSelect={() => {}}
+			onMouseEnter={() => {}}
+			onKeyDown={() => {}}
+		/>
+		<ModelsSelectorOption
+			option={mockModel('highlighted-model', 'Highlighted Model', 'meta')}
+			isSelected={false}
+			isHighlighted={true}
+			isFav={false}
+			hideOrgName={true}
+			onSelect={() => {}}
+			onMouseEnter={() => {}}
+			onKeyDown={() => {}}
+		/>
+		<ModelsSelectorOption
+			option={mockModel('fav-model', 'Favorite Model', 'Qwen')}
+			isSelected={false}
+			isHighlighted={false}
+			isFav={true}
+			hideOrgName={true}
+			onSelect={() => {}}
+			onMouseEnter={() => {}}
+			onKeyDown={() => {}}
+		/>
+	</div>
+</Story>
diff --git a/backend/llama.cpp/tools/ui/tests/stories/PwaRefreshAlert.stories.svelte b/backend/llama.cpp/tools/ui/tests/stories/PwaRefreshAlert.stories.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..26aa57323264cce93163254e659c2d0cc5d31887
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/PwaRefreshAlert.stories.svelte
@@ -0,0 +1,57 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import PwaRefreshAlert from '$lib/components/pwa/PwaRefreshAlert.svelte';
+	import { expect } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Components/PwaRefreshAlert',
+		component: PwaRefreshAlert,
+		parameters: {
+			layout: 'centered'
+		}
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{ needRefresh: true, updateServiceWorker: () => console.log('reload') }}
+	play={async ({ canvas }) => {
+		const title = canvas.getByText('Update available');
+		await expect(title).toBeInTheDocument();
+
+		const description = canvas.getByText(/A new version is available/);
+		await expect(description).toBeInTheDocument();
+
+		const button = canvas.getByRole('button', { name: 'Reload' });
+		await expect(button).toBeInTheDocument();
+	}}
+/>
+
+<Story
+	name="Hidden"
+	args={{ needRefresh: false, updateServiceWorker: () => console.log('reload') }}
+	play={async ({ canvas }) => {
+		const title = canvas.queryByText('Update available');
+		await expect(title).not.toBeInTheDocument();
+	}}
+/>
+
+<Story
+	name="ClickReload"
+	args={{
+		needRefresh: true,
+		updateServiceWorker: () => console.log('reload')
+	}}
+	play={async ({ canvas, userEvent }) => {
+		const button = canvas.getByRole('button', { name: 'Reload' });
+		await expect(button).toBeInTheDocument();
+
+		await userEvent.click(button);
+
+		const title = canvas.queryByText('Update available');
+		await expect(title).not.toBeInTheDocument();
+
+		const reloadBtn = canvas.queryByRole('button', { name: 'Reload' });
+		await expect(reloadBtn).not.toBeInTheDocument();
+	}}
+/>
diff --git a/backend/llama.cpp/tools/ui/tests/stories/SidebarNavigation.stories.svelte b/backend/llama.cpp/tools/ui/tests/stories/SidebarNavigation.stories.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..7fbcef3ed5bd1c717e3cba4308f65a521a7efe1c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/SidebarNavigation.stories.svelte
@@ -0,0 +1,106 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import SidebarNavigation from '$lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte';
+	import { waitFor } from 'storybook/test';
+	import { screen } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Components/SidebarNavigation',
+		component: SidebarNavigation,
+		parameters: {
+			layout: 'centered'
+		}
+	});
+</script>
+
+<script lang="ts">
+	// Mock conversations for the sidebar
+	const mockConversations: DatabaseConversation[] = [
+		{
+			id: 'conv-1',
+			name: 'Getting Started with AI',
+			lastModified: Date.now() - 1000 * 60 * 5, // 5 minutes ago
+			currNode: 'msg-1'
+		},
+		{
+			id: 'conv-2',
+			name: 'Python Programming Help',
+			lastModified: Date.now() - 1000 * 60 * 60 * 2, // 2 hours ago
+			currNode: 'msg-2'
+		},
+		{
+			id: 'conv-3',
+			name: 'Creative Writing Ideas',
+			lastModified: Date.now() - 1000 * 60 * 60 * 24, // 1 day ago
+			currNode: 'msg-3'
+		},
+		{
+			id: 'conv-4',
+			name: 'This is a very long conversation title that should be truncated properly when displayed',
+			lastModified: Date.now() - 1000 * 60 * 60 * 24 * 3, // 3 days ago
+			currNode: 'msg-4'
+		},
+		{
+			id: 'conv-5',
+			name: 'Math Problem Solving',
+			lastModified: Date.now() - 1000 * 60 * 60 * 24 * 7, // 1 week ago
+			currNode: 'msg-5'
+		}
+	];
+</script>
+
+<Story
+	asChild
+	name="Default"
+	play={async () => {
+		const { conversationsStore } = await import('$lib/stores/conversations.svelte');
+
+		waitFor(() =>
+			setTimeout(() => {
+				conversationsStore.conversations = mockConversations;
+			}, 0)
+		);
+	}}
+>
+	<div class="flex-column h-screen w-72 bg-background">
+		<SidebarNavigation />
+	</div>
+</Story>
+
+<Story
+	asChild
+	name="SearchActive"
+	play={async ({ userEvent }) => {
+		const { conversationsStore } = await import('$lib/stores/conversations.svelte');
+
+		waitFor(() =>
+			setTimeout(() => {
+				conversationsStore.conversations = mockConversations;
+			}, 0)
+		);
+
+		// Expand sidebar first, then click Search in the expanded button list
+		const logoTrigger = screen.getByRole('button', { name: /expand navigation/i });
+		await userEvent.click(logoTrigger);
+		const searchTrigger = screen.getByText('Search');
+		userEvent.click(searchTrigger);
+	}}
+>
+	<div class="flex-column h-screen w-72 bg-background">
+		<SidebarNavigation />
+	</div>
+</Story>
+
+<Story
+	asChild
+	name="Empty"
+	play={async () => {
+		// Mock empty conversations store
+		const { conversationsStore } = await import('$lib/stores/conversations.svelte');
+		conversationsStore.conversations = [];
+	}}
+>
+	<div class="flex-column h-screen w-72 bg-background">
+		<SidebarNavigation />
+	</div>
+</Story>
diff --git a/backend/llama.cpp/tools/ui/tests/stories/a11y/ActionIcon.a11y.stories.svelte b/backend/llama.cpp/tools/ui/tests/stories/a11y/ActionIcon.a11y.stories.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..20f5e057b0c7eba1de28b79e3694efffd18fba49
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/a11y/ActionIcon.a11y.stories.svelte
@@ -0,0 +1,34 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Copy } from '@lucide/svelte';
+	import ActionIcon from '$lib/components/app/actions/ActionIcon.svelte';
+	import { expect } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Components/ActionIcon/Accessibility',
+		component: ActionIcon,
+		parameters: {
+			layout: 'centered'
+		},
+		tags: ['!dev']
+	});
+</script>
+
+<Story
+	asChild
+	name="SingleTabStop"
+	play={async ({ canvas, userEvent }) => {
+		const before = await canvas.findByRole('button', { name: 'before' });
+		const target = await canvas.findByRole('button', { name: 'Copy' });
+
+		before.focus();
+		await userEvent.tab();
+
+		await expect(target).toHaveFocus();
+	}}
+>
+	<div>
+		<button type="button">before</button>
+		<ActionIcon icon={Copy} tooltip="Copy" onclick={() => {}} />
+	</div>
+</Story>
diff --git a/backend/llama.cpp/tools/ui/tests/stories/a11y/ChatMessageStatistics.a11y.stories.svelte b/backend/llama.cpp/tools/ui/tests/stories/a11y/ChatMessageStatistics.a11y.stories.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..4aaf60cd656027c86d5d3e12a04af42561dfe44c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/a11y/ChatMessageStatistics.a11y.stories.svelte
@@ -0,0 +1,50 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ChatMessageStatistics from '$lib/components/app/chat/ChatMessages/ChatMessageStatistics/ChatMessageStatistics.svelte';
+	import { expect } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Components/ChatMessageStatistics/Accessibility',
+		component: ChatMessageStatistics,
+		parameters: {
+			layout: 'centered'
+		},
+		tags: ['!dev']
+	});
+</script>
+
+<Story
+	name="ViewButtonsSingleTabStop"
+	args={{
+		promptTokens: 100,
+		promptMs: 500,
+		predictedTokens: 200,
+		predictedMs: 1000,
+		agenticTimings: {
+			turns: 1,
+			toolCallsCount: 1,
+			toolsMs: 500,
+			llm: { predicted_n: 200, predicted_ms: 1000, prompt_n: 100, prompt_ms: 500 }
+		},
+		hideSummary: false,
+		isLive: false
+	}}
+	play={async ({ canvas, userEvent }) => {
+		const reading = await canvas.findByRole('button', { name: 'Reading' });
+		const generation = await canvas.findByRole('button', { name: 'Generation' });
+		const tools = await canvas.findByRole('button', { name: 'Tools' });
+		const summary = await canvas.findByRole('button', { name: 'Summary' });
+
+		reading.focus();
+		await expect(reading).toHaveFocus();
+
+		await userEvent.tab();
+		await expect(generation).toHaveFocus();
+
+		await userEvent.tab();
+		await expect(tools).toHaveFocus();
+
+		await userEvent.tab();
+		await expect(summary).toHaveFocus();
+	}}
+/>
diff --git a/backend/llama.cpp/tools/ui/tests/stories/a11y/ChatScreenForm.a11y.stories.svelte b/backend/llama.cpp/tools/ui/tests/stories/a11y/ChatScreenForm.a11y.stories.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..46f852c06641cbb7f63c1079f5c3ecbb2257767c
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/a11y/ChatScreenForm.a11y.stories.svelte
@@ -0,0 +1,50 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ChatScreenForm from '$lib/components/app/chat/ChatScreen/ChatScreenForm.svelte';
+	import { expect, screen, waitFor } from 'storybook/test';
+	import { ATTACHMENT_TOOLTIP_TEXT } from '$lib/constants';
+
+	const { Story } = defineMeta({
+		title: 'Components/ChatScreen/ChatScreenForm/Accessibility',
+		component: ChatScreenForm,
+		parameters: {
+			layout: 'centered'
+		},
+		tags: ['!dev']
+	});
+</script>
+
+<Story
+	name="AddButtonSingleTabStop"
+	args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+	play={async ({ canvas, userEvent }) => {
+		const textarea = await canvas.findByRole('textbox');
+		await userEvent.clear(textarea);
+		await userEvent.type(textarea, 'What is the meaning of life?');
+
+		const trigger = await canvas.findByRole('button', { name: ATTACHMENT_TOOLTIP_TEXT });
+
+		trigger.focus();
+		await expect(trigger).toHaveFocus();
+
+		await userEvent.tab();
+
+		await expect(trigger).not.toHaveFocus();
+	}}
+/>
+
+<Story
+	name="AddDropdownFocusesFirstEnabled"
+	args={{ class: 'max-w-[56rem] w-[calc(100vw-2rem)]' }}
+	play={async ({ canvas, userEvent }) => {
+		const trigger = await canvas.findByRole('button', { name: ATTACHMENT_TOOLTIP_TEXT });
+
+		trigger.focus();
+		await userEvent.keyboard('{Enter}');
+		await screen.findByRole('menu');
+
+		await waitFor(() => {
+			expect(document.activeElement).toHaveTextContent('Add files');
+		});
+	}}
+/>
diff --git a/backend/llama.cpp/tools/ui/tests/stories/a11y/HorizontalScrollCarousel.a11y.stories.svelte b/backend/llama.cpp/tools/ui/tests/stories/a11y/HorizontalScrollCarousel.a11y.stories.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..937d7ab109497cc18cab3cd902e762cbb0bf7673
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/a11y/HorizontalScrollCarousel.a11y.stories.svelte
@@ -0,0 +1,69 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import HorizontalScrollCarousel from '$lib/components/app/misc/HorizontalScrollCarousel.svelte';
+	import { expect, waitFor } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Components/HorizontalScrollCarousel/Accessibility',
+		component: HorizontalScrollCarousel,
+		parameters: {
+			layout: 'centered'
+		},
+		tags: ['!dev']
+	});
+</script>
+
+<Story
+	asChild
+	name="ArrowsNotInTabOrderWhenNotScrollable"
+	play={async ({ canvas, userEvent }) => {
+		const before = await canvas.findByRole('button', { name: 'before' });
+		const after = await canvas.findByRole('button', { name: 'after' });
+		const leftArrow = await canvas.findByRole('button', { name: 'Scroll left' });
+
+		await waitFor(() => {
+			expect(leftArrow).toBeDisabled();
+		});
+
+		before.focus();
+		await userEvent.tab();
+
+		await expect(after).toHaveFocus();
+	}}
+>
+	<div>
+		<button type="button">before</button>
+		<HorizontalScrollCarousel class="w-96">
+			<div class="h-12 w-12 shrink-0 bg-muted"></div>
+			<div class="h-12 w-12 shrink-0 bg-muted"></div>
+		</HorizontalScrollCarousel>
+		<button type="button">after</button>
+	</div>
+</Story>
+
+<Story
+	asChild
+	name="ArrowsInTabOrderWhenScrollable"
+	play={async ({ canvas, userEvent }) => {
+		const before = await canvas.findByRole('button', { name: 'before' });
+		const rightArrow = await canvas.findByRole('button', { name: 'Scroll right' });
+
+		await waitFor(() => {
+			expect(rightArrow).not.toBeDisabled();
+		});
+
+		before.focus();
+		await userEvent.tab();
+
+		await expect(rightArrow).toHaveFocus();
+	}}
+>
+	<div>
+		<button type="button">before</button>
+		<HorizontalScrollCarousel class="w-48">
+			{#each [...Array(20).keys()] as i (i)}
+				<div class="h-12 w-24 shrink-0 bg-muted">{i}</div>
+			{/each}
+		</HorizontalScrollCarousel>
+	</div>
+</Story>
diff --git a/backend/llama.cpp/tools/ui/tests/stories/a11y/SidebarNavigationConversationItem.a11y.stories.svelte b/backend/llama.cpp/tools/ui/tests/stories/a11y/SidebarNavigationConversationItem.a11y.stories.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..1fc42608f720cb756143044e4e74d42cd0d527b8
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/a11y/SidebarNavigationConversationItem.a11y.stories.svelte
@@ -0,0 +1,36 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import SidebarNavigationConversationItem from '$lib/components/app/navigation/SidebarNavigation/SidebarNavigationConversationItem.svelte';
+	import { expect } from 'storybook/test';
+
+	const mockForkedConversation: DatabaseConversation = {
+		id: 'conv-2',
+		name: 'Forked Conversation',
+		lastModified: Date.now(),
+		currNode: 'msg-2',
+		forkedFromConversationId: 'conv-1'
+	};
+
+	const { Story } = defineMeta({
+		title: 'Components/SidebarNavigationConversationItem/Accessibility',
+		component: SidebarNavigationConversationItem,
+		parameters: {
+			layout: 'centered'
+		},
+		tags: ['!dev']
+	});
+</script>
+
+<Story
+	name="ForkIconSingleTabStop"
+	args={{ conversation: mockForkedConversation, depth: 1 }}
+	play={async ({ canvas, userEvent }) => {
+		const row = await canvas.findByRole('button', { name: /Forked Conversation/ });
+		const forkIcon = await canvas.findByRole('link');
+
+		row.focus();
+		await userEvent.tab();
+
+		await expect(forkIcon).toHaveFocus();
+	}}
+/>
diff --git a/backend/llama.cpp/tools/ui/tests/stories/fixtures/ai-tutorial.ts b/backend/llama.cpp/tools/ui/tests/stories/fixtures/ai-tutorial.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b3b1c24835921d0a579149905366e8e579da0c73
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/fixtures/ai-tutorial.ts
@@ -0,0 +1,164 @@
+// AI Assistant Tutorial Response
+export const AI_TUTORIAL_MD = String.raw`
+# Building a Modern Chat Application with SvelteKit
+
+I'll help you create a **production-ready chat application** using SvelteKit, TypeScript, and WebSockets. This implementation includes real-time messaging, user authentication, and message persistence.
+
+## 🚀 Quick Start
+
+First, let's set up the project:
+
+${'```'}bash
+npm create svelte@latest chat-app
+cd chat-app
+npm install
+npm install socket.io socket.io-client
+npm install @prisma/client prisma
+npm run dev
+${'```'}
+
+## 📁 Project Structure
+
+${'```'}
+chat-app/
+├── src/
+│   ├── routes/
+│   │   ├── +layout.svelte
+│   │   ├── +page.svelte
+│   │   └── api/
+│   │       └── socket/+server.ts
+│   ├── lib/
+│   │   ├── components/
+│   │   │   ├── ChatMessage.svelte
+│   │   │   └── ChatInput.svelte
+│   │   └── stores/
+│   │       └── chat.ts
+│   └── app.html
+├── prisma/
+│   └── schema.prisma
+└── package.json
+${'```'}
+
+## 💻 Implementation
+
+### WebSocket Server
+
+${'```'}typescript
+// src/lib/server/socket.ts
+import { Server } from 'socket.io';
+import type { ViteDevServer } from 'vite';
+
+export function initializeSocketIO(server: ViteDevServer) {
+    const io = new Server(server.httpServer || server, {
+        cors: {
+            origin: process.env.ORIGIN || 'http://localhost:5173',
+            credentials: true
+        }
+    });
+
+    io.on('connection', (socket) => {
+        console.log('User connected:', socket.id);
+        
+        socket.on('message', async (data) => {
+            // Broadcast to all clients
+            io.emit('new-message', {
+                id: crypto.randomUUID(),
+                userId: socket.id,
+                content: data.content,
+                timestamp: new Date().toISOString()
+            });
+        });
+
+        socket.on('disconnect', () => {
+            console.log('User disconnected:', socket.id);
+        });
+    });
+
+    return io;
+}
+${'```'}
+
+### Client Store
+
+${'```'}typescript
+// src/lib/stores/chat.ts
+import { writable } from 'svelte/store';
+import io from 'socket.io-client';
+
+export interface Message {
+    id: string;
+    userId: string;
+    content: string;
+    timestamp: string;
+}
+
+function createChatStore() {
+    const { subscribe, update } = writable<Message[]>([]);
+    let socket: ReturnType<typeof io>;
+    
+    return {
+        subscribe,
+        connect: () => {
+            socket = io('http://localhost:5173');
+            
+            socket.on('new-message', (message: Message) => {
+                update(messages => [...messages, message]);
+            });
+        },
+        sendMessage: (content: string) => {
+            if (socket && content.trim()) {
+                socket.emit('message', { content });
+            }
+        }
+    };
+}
+
+export const chatStore = createChatStore();
+${'```'}
+
+## 🎯 Key Features
+
+✅ **Real-time messaging** with WebSockets  
+✅ **Message persistence** using Prisma + PostgreSQL  
+✅ **Type-safe** with TypeScript  
+✅ **Responsive UI** for all devices  
+✅ **Auto-reconnection** on connection loss  
+
+## 📊 Performance Metrics
+
+| Metric | Value |
+|--------|-------|
+| **Message Latency** | < 50ms |
+| **Concurrent Users** | 10,000+ |
+| **Messages/Second** | 5,000+ |
+| **Uptime** | 99.9% |
+
+## 🔧 Configuration
+
+### Environment Variables
+
+${'```'}env
+DATABASE_URL="postgresql://user:password@localhost:5432/chat"
+JWT_SECRET="your-secret-key"
+REDIS_URL="redis://localhost:6379"
+${'```'}
+
+## 🚢 Deployment
+
+Deploy to production using Docker:
+
+${'```'}dockerfile
+FROM node:20-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci --only=production
+COPY . .
+RUN npm run build
+EXPOSE 3000
+CMD ["node", "build"]
+${'```'}
+
+---
+
+*Need help? Check the [documentation](https://kit.svelte.dev) or [open an issue](https://github.com/sveltejs/kit/issues)*
+`;
diff --git a/backend/llama.cpp/tools/ui/tests/stories/fixtures/api-docs.ts b/backend/llama.cpp/tools/ui/tests/stories/fixtures/api-docs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7b499956f8bc3106be6f2bedd728fe70c511aad2
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/fixtures/api-docs.ts
@@ -0,0 +1,160 @@
+// API Documentation
+export const API_DOCS_MD = String.raw`
+# REST API Documentation
+
+## 🔐 Authentication
+
+All API requests require authentication using **Bearer tokens**. Include your API key in the Authorization header:
+
+${'```'}http
+GET /api/v1/users
+Host: api.example.com
+Authorization: Bearer YOUR_API_KEY
+Content-Type: application/json
+${'```'}
+
+## 📍 Endpoints
+
+### Users API
+
+#### **GET** /api/v1/users
+
+Retrieve a paginated list of users.
+
+**Query Parameters:**
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| page | integer | 1 | Page number |
+| limit | integer | 20 | Items per page |
+| sort | string | "created_at" | Sort field |
+| order | string | "desc" | Sort order |
+
+**Response:** 200 OK
+
+${'```'}json
+{
+  "data": [
+    {
+      "id": "usr_1234567890",
+      "email": "user@example.com",
+      "name": "John Doe",
+      "role": "admin",
+      "created_at": "2024-01-15T10:30:00Z"
+    }
+  ],
+  "pagination": {
+    "page": 1,
+    "limit": 20,
+    "total": 156,
+    "pages": 8
+  }
+}
+${'```'}
+
+#### **POST** /api/v1/users
+
+Create a new user account.
+
+**Request Body:**
+
+${'```'}json
+{
+  "email": "newuser@example.com",
+  "password": "SecurePassword123!",
+  "name": "Jane Smith",
+  "role": "user"
+}
+${'```'}
+
+**Response:** 201 Created
+
+${'```'}json
+{
+  "id": "usr_9876543210",
+  "email": "newuser@example.com",
+  "name": "Jane Smith",
+  "role": "user",
+  "created_at": "2024-01-21T09:15:00Z"
+}
+${'```'}
+
+### Error Responses
+
+The API returns errors in a consistent format:
+
+${'```'}json
+{
+  "error": {
+    "code": "VALIDATION_ERROR",
+    "message": "Invalid request parameters",
+    "details": [
+      {
+        "field": "email",
+        "message": "Email format is invalid"
+      }
+    ]
+  }
+}
+${'```'}
+
+### Rate Limiting
+
+| Tier | Requests/Hour | Burst |
+|------|--------------|-------|
+| **Free** | 1,000 | 100 |
+| **Pro** | 10,000 | 500 |
+| **Enterprise** | Unlimited | - |
+
+**Headers:**
+- X-RateLimit-Limit
+- X-RateLimit-Remaining  
+- X-RateLimit-Reset
+
+### Webhooks
+
+Configure webhooks to receive real-time events:
+
+${'```'}javascript
+// Webhook payload
+{
+  "event": "user.created",
+  "timestamp": "2024-01-21T09:15:00Z",
+  "data": {
+    "id": "usr_9876543210",
+    "email": "newuser@example.com"
+  },
+  "signature": "sha256=abcd1234..."
+}
+${'```'}
+
+### SDK Examples
+
+**JavaScript/TypeScript:**
+
+${'```'}typescript
+import { ApiClient } from '@example/api-sdk';
+
+const client = new ApiClient({
+  apiKey: process.env.API_KEY
+});
+
+const users = await client.users.list({
+  page: 1,
+  limit: 20
+});
+${'```'}
+
+**Python:**
+
+${'```'}python
+from example_api import Client
+
+client = Client(api_key=os.environ['API_KEY'])
+users = client.users.list(page=1, limit=20)
+${'```'}
+
+---
+
+📚 [Full API Reference](https://api.example.com/docs) | 💬 [Support](https://support.example.com)
+`;
diff --git a/backend/llama.cpp/tools/ui/tests/stories/fixtures/assets/1.jpg b/backend/llama.cpp/tools/ui/tests/stories/fixtures/assets/1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8348e38780de3332ba2e1d39fdb81fd8bba92389
Binary files /dev/null and b/backend/llama.cpp/tools/ui/tests/stories/fixtures/assets/1.jpg differ
diff --git a/backend/llama.cpp/tools/ui/tests/stories/fixtures/assets/beautiful-flowers-lotus.webp b/backend/llama.cpp/tools/ui/tests/stories/fixtures/assets/beautiful-flowers-lotus.webp
new file mode 100644
index 0000000000000000000000000000000000000000..a381cf364ba82158c315f1c9f94b7b6684551136
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/fixtures/assets/beautiful-flowers-lotus.webp
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a5f728fbce7c5b2ed8ef32303942f97a00e4cadb791ec65eadcfbe59ebe9625f
+size 817630
diff --git a/backend/llama.cpp/tools/ui/tests/stories/fixtures/assets/example.pdf b/backend/llama.cpp/tools/ui/tests/stories/fixtures/assets/example.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..0d27da1dcdc565be93d5d5c8a2548162f12ff8db
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/fixtures/assets/example.pdf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:83a68983203e51467b9ffaf42c1a6728bd7a9c5a2425eb8e26acc2742020bdab
+size 351048
diff --git a/backend/llama.cpp/tools/ui/tests/stories/fixtures/assets/hf-logo.svg b/backend/llama.cpp/tools/ui/tests/stories/fixtures/assets/hf-logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d55ea22a24f4fb8fc8ae911aff86f6689bb0ad1d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/fixtures/assets/hf-logo.svg
@@ -0,0 +1,8 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M230.721 172.7C230.183 170.673 229.313 168.75 228.146 167.008C228.396 166.091 228.587 165.159 228.714 164.217C229.543 158.241 227.471 152.77 223.567 148.537C221.452 146.225 219.185 144.698 216.784 143.761C218.36 137.018 219.157 130.117 219.161 123.193C219.161 120.03 218.982 116.932 218.682 113.88C218.526 112.356 218.337 110.836 218.115 109.32C217.428 104.847 216.408 100.431 215.064 96.11C214.183 93.2707 213.164 90.476 212.01 87.736C210.281 83.6782 208.262 79.75 205.969 75.982C204.465 73.475 202.827 71.0508 201.062 68.72C200.197 67.543 199.296 66.3938 198.358 65.274C195.58 61.898 192.561 58.7277 189.325 55.788C188.25 54.7997 187.145 53.8453 186.01 52.926C184.893 51.9943 183.751 51.0927 182.586 50.222C180.241 48.4766 177.818 46.8392 175.324 45.315C161.543 36.945 145.382 32.145 128.109 32.145C77.817 32.145 37.057 72.907 37.057 123.196C37.055 130.208 37.867 137.196 39.477 144.02C37.317 144.958 35.247 146.42 33.327 148.535C29.424 152.766 27.351 158.217 28.18 164.193C28.306 165.142 28.495 166.082 28.747 167.006C27.5811 168.749 26.7117 170.673 26.174 172.7C24.974 177.261 25.369 181.374 26.894 184.978C25.236 189.688 25.65 194.704 27.809 199.065C29.379 202.25 31.626 204.714 34.396 206.916C37.689 209.534 41.811 211.758 46.783 213.892C52.715 216.422 59.956 218.799 63.249 219.671C71.755 221.873 79.911 223.269 88.177 223.337C99.954 223.446 110.096 220.677 117.357 213.59C120.924 214.027 124.515 214.246 128.109 214.244C131.906 214.236 135.699 213.997 139.467 213.529C146.711 220.661 156.892 223.455 168.712 223.343C176.977 223.277 185.133 221.881 193.617 219.676C196.932 218.804 204.17 216.427 210.105 213.897C215.077 211.76 219.199 209.536 222.514 206.922C225.263 204.719 227.508 202.256 229.079 199.071C231.26 194.709 231.652 189.693 230.017 184.983C231.527 181.379 231.92 177.257 230.721 172.7ZM222.281 184.673C223.952 187.844 224.059 191.427 222.585 194.764C220.349 199.821 214.795 203.805 204.008 208.082C197.3 210.742 191.158 212.443 191.104 212.458C182.232 214.759 174.208 215.928 167.262 215.928C155.76 215.928 147.201 212.754 141.773 206.486C132.594 208.05 123.222 208.103 114.026 206.644C108.591 212.808 100.081 215.928 88.676 215.928C81.729 215.928 73.706 214.759 64.833 212.458C64.779 212.443 58.639 210.742 51.929 208.082C41.143 203.805 35.587 199.824 33.352 194.764C31.878 191.427 31.985 187.844 33.656 184.673C33.81 184.378 33.976 184.091 34.153 183.813C33.1516 182.309 32.4799 180.61 32.182 178.827C31.8842 177.045 31.967 175.22 32.425 173.472C33.089 170.949 34.46 168.851 36.322 167.344C35.425 165.87 34.8365 164.23 34.592 162.522C34.056 158.808 35.289 155.1 38.062 152.076C40.222 149.723 43.275 148.428 46.655 148.428H46.745C44.1965 140.259 42.9044 131.75 42.913 123.193C42.913 76.522 80.749 38.683 127.427 38.683C174.104 38.683 211.94 76.518 211.94 123.193C211.947 131.773 210.646 140.304 208.081 148.492C208.489 148.452 208.889 148.432 209.282 148.431C212.662 148.431 215.716 149.726 217.874 152.079C220.647 155.1 221.881 158.811 221.344 162.525C221.1 164.233 220.511 165.873 219.615 167.347C221.477 168.854 222.849 170.952 223.512 173.475C223.97 175.223 224.053 177.048 223.755 178.831C223.458 180.613 222.786 182.312 221.784 183.816C221.961 184.091 222.129 184.378 222.281 184.673Z" fill="white"/>
+<path d="M221.784 183.816C222.786 182.312 223.458 180.613 223.756 178.831C224.053 177.048 223.97 175.223 223.512 173.475C222.848 170.952 221.476 168.854 219.615 167.347C220.512 165.873 221.1 164.233 221.344 162.525C221.881 158.811 220.648 155.103 217.874 152.079C215.716 149.726 212.662 148.431 209.282 148.431C208.889 148.431 208.489 148.452 208.081 148.492C210.643 140.304 211.942 131.774 211.933 123.195C211.933 76.5231 174.097 38.6851 127.424 38.6851C80.75 38.6851 42.9099 76.5191 42.9099 123.195C42.9015 131.752 44.1936 140.261 46.742 148.43H46.6519C43.2719 148.43 40.219 149.724 38.06 152.077C35.287 155.098 34.0529 158.81 34.5899 162.523C34.8346 164.231 35.4231 165.872 36.3199 167.346C34.4579 168.852 33.086 170.95 32.422 173.473C31.9642 175.222 31.8817 177.047 32.1799 178.83C32.4781 180.612 33.1501 182.312 34.1519 183.816C33.9739 184.094 33.8099 184.381 33.6549 184.676C31.9849 187.847 31.877 191.43 33.352 194.767C35.588 199.824 41.1419 203.808 51.9289 208.085C58.6359 210.745 64.779 212.446 64.833 212.461C73.705 214.762 81.729 215.931 88.675 215.931C100.081 215.931 108.591 212.811 114.026 206.647C123.222 208.106 132.594 208.052 141.773 206.489C147.201 212.757 155.76 215.931 167.262 215.931C174.208 215.931 182.232 214.762 191.103 212.461C191.158 212.446 197.298 210.745 204.008 208.085C214.795 203.808 220.35 199.824 222.585 194.767C224.059 191.43 223.952 187.847 222.281 184.676C222.129 184.379 221.961 184.091 221.784 183.816ZM110.137 196.997C109.669 197.815 109.168 198.614 108.635 199.391C107.23 201.448 105.382 203.02 103.237 204.188C99.1369 206.424 93.947 207.205 88.675 207.205C80.346 207.205 71.808 205.256 67.023 204.015C66.787 203.954 37.689 195.735 41.373 188.739C41.993 187.562 43.0129 187.092 44.2979 187.092C49.4849 187.092 58.9299 194.816 62.9889 194.816C63.8959 194.816 64.5359 194.43 64.7969 193.488C66.5269 187.284 38.5039 184.676 40.8639 175.692C41.2799 174.102 42.41 173.456 43.998 173.456C50.856 173.455 66.248 185.516 69.467 185.516C69.714 185.516 69.8909 185.443 69.9869 185.291C70.0009 185.268 70.015 185.246 70.028 185.222C71.539 182.727 70.6719 180.913 60.3209 174.573L59.3269 173.968C47.9359 167.074 39.9409 162.925 44.4879 157.975C45.0109 157.404 45.7529 157.151 46.6539 157.151C47.7219 157.151 49.0149 157.508 50.4389 158.108C56.4549 160.645 64.793 167.564 68.276 170.581C68.8239 171.057 69.3683 171.538 69.9089 172.022C69.9089 172.022 74.319 176.608 76.985 176.608C77.599 176.608 78.1199 176.366 78.4729 175.768C80.364 172.58 60.9099 157.838 59.8129 151.755C59.0689 147.634 60.3349 145.546 62.6749 145.546C63.7879 145.546 65.1459 146.02 66.6449 146.971C71.2949 149.922 80.2729 165.35 83.5599 171.352C84.6619 173.363 86.5429 174.213 88.2379 174.213C91.6009 174.213 94.2299 170.87 88.5459 166.622C80.0029 160.23 83.001 149.782 87.078 149.139C87.252 149.111 87.4279 149.097 87.6029 149.097C91.3109 149.097 92.9459 155.486 92.9459 155.486C92.9459 155.486 97.7399 167.524 105.975 175.753C113.447 183.222 114.491 189.351 110.137 196.997ZM136.766 198.407L136.339 198.458L135.611 198.541C135.228 198.581 134.844 198.619 134.459 198.654L134.084 198.688L133.741 198.717L133.255 198.756L132.718 198.795L132.182 198.83L132.063 198.838C131.923 198.846 131.783 198.855 131.641 198.862L131.462 198.872C131.296 198.881 131.13 198.889 130.962 198.896L130.381 198.921L129.854 198.939L129.502 198.949H129.323C129.213 198.949 129.104 198.955 128.994 198.956H128.82C128.71 198.956 128.601 198.956 128.491 198.961L128.043 198.967H127.418C126.927 198.967 126.437 198.962 125.949 198.952L125.553 198.943C125.44 198.943 125.327 198.938 125.216 198.934L124.796 198.922L124.275 198.902L123.805 198.881L123.684 198.876L123.237 198.853C123.112 198.846 122.989 198.84 122.865 198.831L122.576 198.814C122.213 198.791 121.85 198.766 121.487 198.738L121.107 198.707C120.947 198.695 120.787 198.68 120.628 198.666C120.441 198.65 120.254 198.632 120.067 198.614C119.754 198.585 119.441 198.553 119.128 198.519H119.113C123.683 188.324 121.372 178.802 112.137 169.575C106.08 163.526 102.051 154.594 101.215 152.633C99.5229 146.828 95.045 140.375 87.608 140.375C86.979 140.375 86.351 140.425 85.73 140.523C82.472 141.036 79.624 142.911 77.592 145.733C75.396 143.002 73.262 140.831 71.332 139.605C68.422 137.76 65.5179 136.824 62.6889 136.824C59.1579 136.824 56.0019 138.274 53.8019 140.904L53.7459 140.971C53.7039 140.798 53.6639 140.625 53.6229 140.451L53.6179 140.428C53.1992 138.638 52.8477 136.833 52.5639 135.016C52.5639 135.004 52.5639 134.992 52.5579 134.98C52.5359 134.843 52.5159 134.705 52.4949 134.568C52.4334 134.162 52.3757 133.755 52.3219 133.348C52.2979 133.163 52.2719 132.978 52.2489 132.793L52.1809 132.238C52.1589 132.053 52.1409 131.885 52.1209 131.709L52.115 131.665C52.0351 130.945 51.9651 130.225 51.9049 129.503L51.8829 129.226L51.8479 128.754C51.8379 128.625 51.8279 128.495 51.8209 128.365C51.8209 128.334 51.8159 128.304 51.8149 128.275C51.7895 127.913 51.7678 127.55 51.7499 127.187C51.7399 126.998 51.7299 126.81 51.7219 126.62L51.7019 126.124L51.6969 125.974L51.6809 125.517L51.6709 125.128C51.6709 124.973 51.6629 124.818 51.6609 124.663C51.6579 124.508 51.6539 124.338 51.6529 124.174C51.6509 124.01 51.6529 123.848 51.6479 123.685C51.6439 123.521 51.6479 123.358 51.6479 123.195C51.6479 81.3421 85.5789 47.4111 127.436 47.4111C169.292 47.4111 203.222 81.3411 203.222 123.195V124.174C203.222 124.337 203.217 124.501 203.214 124.663C203.214 124.798 203.208 124.931 203.204 125.068C203.204 125.188 203.199 125.309 203.195 125.425C203.195 125.578 203.186 125.731 203.181 125.884V125.896L203.16 126.427C203.153 126.582 203.147 126.738 203.139 126.893L203.134 127.003L203.107 127.499C203.048 128.562 202.967 129.623 202.866 130.683V130.696C202.849 130.87 202.832 131.044 202.813 131.218L202.768 131.629L202.679 132.433L202.628 132.84L202.565 133.319C202.542 133.493 202.519 133.668 202.493 133.841C202.467 134.036 202.438 134.23 202.409 134.424L202.34 134.883L202.258 135.403C202.23 135.576 202.2 135.748 202.168 135.92C202.135 136.093 202.109 136.265 202.079 136.437C202.019 136.781 201.956 137.125 201.89 137.468C201.789 137.981 201.686 138.493 201.58 139.005L201.47 139.512C201.434 139.681 201.395 139.851 201.357 140.02C199.224 137.947 196.399 136.818 193.284 136.818C190.457 136.818 187.55 137.753 184.641 139.598C182.711 140.824 180.578 142.996 178.381 145.726C176.346 142.904 173.498 141.029 170.242 140.516C169.621 140.418 168.993 140.368 168.364 140.368C160.925 140.368 156.45 146.821 154.757 152.626C153.917 154.587 149.887 163.519 143.825 169.577C134.596 178.775 132.268 188.254 136.766 198.407ZM215.007 177.998L214.977 178.087C214.901 178.288 214.813 178.484 214.714 178.674C214.639 178.814 214.558 178.95 214.47 179.082C214.303 179.331 214.12 179.569 213.921 179.793C213.875 179.845 213.831 179.897 213.779 179.948C213.707 180.025 213.634 180.101 213.559 180.175C212.213 181.509 210.161 182.679 207.841 183.752C207.578 183.871 207.311 183.99 207.042 184.11L206.774 184.229C206.595 184.308 206.416 184.386 206.228 184.463C206.049 184.541 205.863 184.619 205.677 184.695L205.119 184.925C203.814 185.462 202.477 185.974 201.173 186.479L200.615 186.696L200.064 186.912C199.697 187.055 199.335 187.198 198.979 187.341L198.448 187.555L197.926 187.768L197.67 187.876C197.499 187.947 197.332 188.018 197.165 188.089C193.328 189.736 190.567 191.411 191.147 193.489C191.163 193.548 191.181 193.604 191.201 193.659C191.253 193.813 191.324 193.958 191.413 194.095C191.465 194.176 191.525 194.253 191.592 194.323C192.274 195.032 193.515 194.92 195.08 194.357C195.3 194.276 195.519 194.192 195.736 194.104L195.872 194.048C196.23 193.896 196.609 193.726 196.996 193.542C197.093 193.496 197.191 193.452 197.289 193.401C199.203 192.465 201.372 191.205 203.524 190.058C204.385 189.593 205.258 189.152 206.142 188.733C208.18 187.774 210.096 187.094 211.636 187.094C212.359 187.094 212.997 187.242 213.529 187.582L213.618 187.641C213.952 187.876 214.232 188.178 214.441 188.528C214.482 188.595 214.522 188.666 214.561 188.739C215.322 190.184 214.685 191.68 213.194 193.147C211.763 194.556 209.537 195.937 207.007 197.215C206.819 197.31 206.631 197.405 206.44 197.498C198.91 201.196 189.049 203.981 188.912 204.016C186.284 204.697 182.526 205.591 178.292 206.26L177.666 206.358L177.563 206.373C177.089 206.445 176.614 206.512 176.138 206.574C175.655 206.639 175.167 206.698 174.676 206.753L174.586 206.763C172.806 206.968 171.019 207.104 169.228 207.169H169.202C168.554 207.192 167.907 207.204 167.259 207.204H166.512C165.524 207.191 164.538 207.146 163.553 207.07C163.53 207.07 163.505 207.07 163.482 207.064C163.129 207.037 162.777 207.004 162.425 206.965C162.06 206.926 161.696 206.882 161.333 206.833C161.094 206.801 160.856 206.765 160.618 206.726C160.376 206.687 160.134 206.647 159.893 206.605L159.564 206.543L159.539 206.538C159.192 206.472 158.847 206.399 158.503 206.319C158.303 206.274 158.104 206.23 157.907 206.176L157.788 206.146C157.69 206.122 157.595 206.096 157.498 206.07L157.445 206.056L157.137 205.966C157.025 205.935 156.913 205.901 156.801 205.868L156.762 205.857L156.471 205.768C156.361 205.734 156.251 205.698 156.142 205.662L155.874 205.573L155.677 205.504C155.487 205.437 155.298 205.368 155.111 205.296L154.933 205.226L154.786 205.168C154.502 205.054 154.22 204.935 153.941 204.81L153.756 204.72L153.725 204.706C153.659 204.675 153.594 204.644 153.528 204.617C153.399 204.555 153.271 204.491 153.144 204.426L153.105 204.407L152.921 204.31C152.594 204.139 152.274 203.957 151.96 203.764L151.788 203.658C151.702 203.605 151.616 203.55 151.532 203.494L151.308 203.346L151.067 203.18L150.923 203.077C150.771 202.969 150.622 202.857 150.476 202.742L150.243 202.563C150.15 202.488 150.058 202.412 149.967 202.335C149.89 202.272 149.815 202.206 149.74 202.14L149.734 202.135C149.653 202.064 149.574 201.993 149.495 201.92C149.417 201.849 149.339 201.777 149.263 201.704L149.254 201.695C149.174 201.619 149.096 201.542 149.019 201.463C148.942 201.385 148.863 201.307 148.788 201.227C148.713 201.148 148.636 201.067 148.562 200.984C148.488 200.902 148.42 200.827 148.35 200.746L148.327 200.719C148.259 200.641 148.192 200.562 148.126 200.481C147.983 200.31 147.844 200.135 147.71 199.956C147.575 199.776 147.443 199.592 147.314 199.405L147.191 199.221C147.027 198.981 146.867 198.739 146.712 198.493C146.596 198.316 146.483 198.138 146.373 197.957C146.302 197.844 146.234 197.73 146.166 197.618L146.138 197.572C146.073 197.462 146.009 197.354 145.947 197.245C145.911 197.186 145.877 197.127 145.845 197.066C145.812 197.004 145.774 196.941 145.739 196.878L145.682 196.779L145.647 196.715C145.58 196.595 145.514 196.474 145.45 196.352C145.42 196.298 145.391 196.244 145.36 196.192L145.271 196.019L145.181 195.848C144.956 195.398 144.743 194.942 144.543 194.48L144.472 194.311C144.426 194.198 144.383 194.086 144.337 193.975C144.315 193.921 144.293 193.868 144.274 193.814C144.167 193.537 144.067 193.257 143.975 192.975C143.942 192.874 143.91 192.775 143.88 192.675C143.808 192.448 143.743 192.219 143.685 191.988C143.614 191.719 143.551 191.448 143.498 191.175C143.487 191.12 143.476 191.065 143.467 191.012C143.415 190.745 143.373 190.476 143.34 190.206C143.332 190.153 143.326 190.1 143.32 190.047L143.303 189.885C143.281 189.673 143.264 189.46 143.254 189.247C143.254 189.193 143.249 189.139 143.247 189.087C143.242 188.981 143.24 188.875 143.239 188.769C143.183 184.496 145.345 180.388 149.968 175.767C158.203 167.54 162.997 155.501 162.997 155.501C162.997 155.501 163.126 154.996 163.394 154.269C163.431 154.168 163.47 154.064 163.514 153.955C163.67 153.548 163.846 153.148 164.041 152.758L164.08 152.683C164.246 152.351 164.428 152.027 164.624 151.712C164.67 151.639 164.714 151.567 164.765 151.494C164.912 151.277 165.067 151.065 165.23 150.86C165.319 150.749 165.416 150.639 165.513 150.532C165.552 150.49 165.59 150.448 165.631 150.408C166.108 149.915 166.653 149.513 167.27 149.299L167.348 149.273C167.4 149.256 167.452 149.24 167.505 149.225C167.566 149.209 167.627 149.195 167.69 149.182L167.719 149.176C167.849 149.15 167.981 149.133 168.114 149.124H168.125C168.194 149.124 168.264 149.117 168.335 149.117C168.424 149.117 168.507 149.117 168.594 149.126C168.684 149.134 168.773 149.144 168.863 149.158C169.605 149.276 170.311 149.718 170.919 150.4C171.15 150.66 171.358 150.94 171.54 151.236C171.66 151.428 171.773 151.631 171.88 151.845C171.923 151.934 171.964 152.016 172.004 152.104C172.108 152.33 172.202 152.56 172.284 152.795C172.479 153.345 172.626 153.911 172.723 154.487C172.807 154.992 172.857 155.502 172.873 156.013C172.881 156.286 172.881 156.563 172.873 156.842C172.819 158.14 172.553 159.421 172.086 160.634C172.044 160.745 171.997 160.857 171.952 160.969C171.86 161.195 171.759 161.417 171.65 161.634C171.569 161.799 171.484 161.965 171.392 162.13C171.332 162.24 171.269 162.35 171.206 162.46C171.045 162.734 170.871 163.006 170.684 163.277L170.571 163.439C170.129 164.055 169.637 164.633 169.099 165.167C168.569 165.698 168.001 166.189 167.4 166.637C166.798 167.083 166.233 167.577 165.711 168.114C164.208 169.691 163.858 171.083 164.196 172.138C164.25 172.304 164.321 172.465 164.407 172.617C164.508 172.791 164.628 172.951 164.764 173.097L164.817 173.152L164.871 173.206C164.925 173.258 164.982 173.309 165.043 173.359L165.103 173.407C165.248 173.519 165.402 173.619 165.563 173.707C165.61 173.732 165.652 173.757 165.705 173.781C165.879 173.866 166.058 173.939 166.242 173.998C166.293 174.015 166.344 174.03 166.396 174.046L166.461 174.063L166.551 174.087L166.628 174.106L166.712 174.124L166.795 174.141L166.874 174.154C166.932 174.164 166.992 174.174 167.052 174.181L167.109 174.19L167.213 174.2L167.277 174.207L167.382 174.214H167.444L167.554 174.22H167.9L167.999 174.214L168.113 174.207L168.252 174.194L168.382 174.179C168.412 174.179 168.442 174.171 168.472 174.165C168.872 174.107 169.264 174.001 169.639 173.849L169.798 173.782C169.887 173.743 169.977 173.702 170.059 173.658C170.235 173.57 170.406 173.47 170.57 173.361C170.799 173.211 171.015 173.043 171.217 172.858C171.265 172.815 171.312 172.769 171.358 172.725C171.381 172.703 171.403 172.682 171.425 172.658C171.469 172.613 171.514 172.569 171.558 172.52C171.878 172.168 172.155 171.78 172.383 171.363C174.34 167.804 176.391 164.298 178.534 160.849L178.828 160.378L179.125 159.907C179.273 159.668 179.423 159.433 179.572 159.199L179.722 158.965C180.22 158.185 180.726 157.41 181.241 156.641L181.546 156.185C182.158 155.278 182.768 154.396 183.373 153.558L183.674 153.143C184.332 152.236 185.017 151.348 185.728 150.482L186.01 150.144C186.057 150.088 186.1 150.032 186.151 149.978C186.244 149.868 186.337 149.761 186.428 149.657C186.474 149.604 186.517 149.552 186.566 149.5L186.834 149.198L186.968 149.051C187.103 148.906 187.235 148.767 187.365 148.634C187.455 148.544 187.538 148.455 187.624 148.371C188.131 147.853 188.69 147.388 189.293 146.985L189.433 146.895C189.567 146.805 189.706 146.721 189.848 146.645C192.212 145.303 194.169 145.204 195.296 146.331C195.978 147.013 196.356 148.144 196.335 149.718C196.335 149.787 196.335 149.857 196.33 149.929V150.006C196.33 150.078 196.324 150.15 196.318 150.223C196.318 150.313 196.308 150.402 196.299 150.492C196.29 150.581 196.285 150.649 196.276 150.729C196.276 150.751 196.272 150.774 196.268 150.798C196.262 150.867 196.253 150.938 196.243 151.009C196.243 151.03 196.243 151.052 196.235 151.074C196.224 151.169 196.21 151.263 196.194 151.357C196.183 151.447 196.168 151.531 196.152 151.619L196.126 151.768C196.1 151.91 196.067 152.05 196.026 152.188C195.948 152.447 195.854 152.7 195.743 152.946C195.588 153.284 195.417 153.613 195.229 153.933C195.125 154.111 195.018 154.286 194.907 154.459C194.793 154.638 194.673 154.819 194.549 155.002C194.233 155.454 193.905 155.897 193.564 156.33L193.408 156.527C192.852 157.22 192.278 157.899 191.686 158.562L191.499 158.772C191.247 159.053 190.991 159.336 190.729 159.62L190.532 159.834C190.401 159.977 190.264 160.12 190.132 160.264C190.001 160.407 189.864 160.552 189.726 160.697L189.315 161.13L188.898 161.566L188.478 162.002C188.196 162.294 187.913 162.586 187.628 162.878C183.573 167.037 179.301 171.182 177.855 173.766C177.758 173.934 177.671 174.108 177.593 174.285C177.387 174.755 177.301 175.157 177.36 175.482C177.379 175.589 177.416 175.691 177.471 175.785C177.552 175.926 177.651 176.056 177.766 176.172C177.819 176.224 177.875 176.272 177.934 176.316C178.232 176.528 178.591 176.637 178.957 176.627H179.071L179.188 176.618L179.305 176.605L179.402 176.591C179.415 176.589 179.429 176.587 179.442 176.583L179.531 176.566L179.554 176.561L179.653 176.54L179.688 176.531C179.723 176.522 179.757 176.513 179.792 176.503C179.827 176.493 179.875 176.48 179.917 176.466C180.093 176.413 180.265 176.35 180.434 176.278C180.523 176.242 180.61 176.203 180.696 176.161C180.741 176.141 180.786 176.12 180.828 176.098L180.962 176.032C181.282 175.866 181.594 175.685 181.898 175.491L182.031 175.401C182.076 175.373 182.121 175.344 182.164 175.312L182.297 175.223L182.368 175.174L182.56 175.039C182.739 174.916 182.906 174.789 183.075 174.66L183.09 174.648L183.359 174.44C183.726 174.15 184.074 173.858 184.39 173.583L184.6 173.399L184.619 173.381L184.729 173.284C184.987 173.052 185.217 172.836 185.408 172.658L185.487 172.581C185.556 172.516 185.619 172.455 185.676 172.403L185.788 172.292L185.828 172.253L185.839 172.242L185.956 172.125L186.03 172.048L186.039 172.041L186.074 172.009L186.118 171.969L186.132 171.956L186.169 171.922L186.373 171.743L186.487 171.641C186.548 171.588 186.607 171.534 186.666 171.479L186.802 171.358C186.827 171.338 186.851 171.316 186.876 171.294L187.019 171.169L187.229 170.984L187.341 170.887C187.776 170.509 188.305 170.052 188.913 169.537L189.162 169.326L189.573 168.981L189.994 168.63C190.544 168.173 191.136 167.688 191.762 167.185L192.173 166.855C192.523 166.576 192.882 166.292 193.246 166.006C193.393 165.891 193.542 165.776 193.694 165.662C194.066 165.373 194.44 165.086 194.817 164.803C195.675 164.155 196.56 163.506 197.456 162.874L197.84 162.606C198.109 162.421 198.377 162.235 198.645 162.054L198.888 161.89C199.367 161.565 199.853 161.248 200.343 160.939L200.586 160.786L200.827 160.636C201.069 160.486 201.309 160.339 201.548 160.196L201.787 160.053L202.265 159.775L202.734 159.506L202.829 159.454L203.2 159.25C203.355 159.166 203.509 159.085 203.663 159.006L203.892 158.888L204.115 158.776C204.193 158.739 204.27 158.7 204.346 158.663C204.848 158.415 205.36 158.187 205.88 157.979C206.021 157.919 206.161 157.865 206.3 157.818L206.71 157.674C206.833 157.633 206.953 157.594 207.068 157.559L207.108 157.547C207.17 157.527 207.232 157.509 207.293 157.493L207.311 157.488C207.439 157.451 207.566 157.419 207.691 157.389H207.7C208.054 157.304 208.414 157.243 208.777 157.206C208.944 157.189 209.111 157.18 209.279 157.181H209.363C209.475 157.181 209.583 157.188 209.69 157.199C209.739 157.199 209.788 157.209 209.836 157.215H209.856C209.904 157.221 209.952 157.228 210 157.239C210.047 157.248 210.095 157.256 210.141 157.267H210.156C210.203 157.277 210.245 157.289 210.294 157.303C210.548 157.374 210.79 157.484 211.012 157.628C211.121 157.699 211.223 157.779 211.317 157.868L211.344 157.894C211.362 157.91 211.379 157.927 211.395 157.944L211.444 157.997C211.846 158.418 212.178 158.901 212.428 159.427L212.466 159.517C212.551 159.717 212.618 159.924 212.666 160.135C212.808 160.781 212.753 161.455 212.508 162.07C212.415 162.318 212.302 162.557 212.169 162.785C211.858 163.309 211.489 163.796 211.07 164.237L210.981 164.332C210.848 164.472 210.71 164.612 210.565 164.752C210.501 164.815 210.434 164.877 210.367 164.94L210.162 165.129L210.055 165.224C209.797 165.454 209.532 165.677 209.263 165.893C209.1 166.025 208.936 166.154 208.77 166.281C208.184 166.729 207.587 167.161 206.979 167.578C206.612 167.83 206.242 168.077 205.869 168.321C204.95 168.924 204.021 169.512 203.083 170.084C201.115 171.294 198.934 172.588 196.609 173.995L196.007 174.36C195.348 174.762 194.726 175.146 194.14 175.512L193.845 175.697L193.287 176.055C192.917 176.292 192.548 176.531 192.179 176.77L191.882 176.966C191.737 177.06 191.593 177.156 191.449 177.252L191.308 177.342L190.876 177.633L190.647 177.79L190.379 177.976L190.13 178.149C189.713 178.444 189.325 178.725 188.968 178.992L188.834 179.094C188.624 179.253 188.416 179.415 188.211 179.58C187.902 179.829 187.62 180.067 187.367 180.296L187.243 180.409C187.172 180.474 187.102 180.539 187.035 180.603C186.989 180.648 186.946 180.693 186.898 180.736L186.834 180.8C186.691 180.944 186.551 181.091 186.416 181.242L186.35 181.318C186.203 181.488 186.075 181.651 185.963 181.81L185.913 181.881C185.825 182.009 185.744 182.141 185.671 182.277C185.652 182.311 185.635 182.345 185.618 182.379L185.569 182.481L185.536 182.555L185.515 182.605L185.498 182.65L185.475 182.711C185.413 182.88 185.37 183.056 185.345 183.234L185.337 183.296L185.331 183.354V183.669C185.331 183.695 185.331 183.721 185.338 183.749L185.343 183.797C185.343 183.823 185.349 183.848 185.353 183.876C185.357 183.902 185.364 183.949 185.372 183.986V183.991C185.379 184.026 185.386 184.06 185.395 184.095C185.404 184.13 185.413 184.17 185.424 184.206C185.443 184.277 185.467 184.347 185.492 184.417C185.508 184.459 185.523 184.5 185.54 184.541C185.54 184.549 185.546 184.558 185.55 184.566L185.586 184.647L185.636 184.758C185.69 184.873 185.749 184.985 185.813 185.094L185.879 185.208L185.947 185.322C185.959 185.341 185.973 185.359 185.988 185.376L186.01 185.399L186.035 185.422L186.061 185.442C186.099 185.469 186.14 185.49 186.183 185.505C186.206 185.513 186.23 185.519 186.254 185.525C186.831 185.655 188.017 185.178 189.593 184.346C189.682 184.298 189.78 184.248 189.875 184.196L190.355 183.934L190.589 183.804C190.756 183.715 190.926 183.614 191.1 183.515L191.417 183.336C193.5 182.137 195.988 180.597 198.56 179.093C198.801 178.952 199.043 178.811 199.285 178.672L199.771 178.361C200.335 178.038 200.902 177.719 201.471 177.404C202.188 177.01 202.91 176.626 203.639 176.254L204.115 176.013C204.431 175.857 204.744 175.705 205.053 175.557C205.651 175.273 206.256 175.003 206.868 174.748L207.203 174.612L207.243 174.596C209.018 173.893 210.627 173.459 211.929 173.459C212.21 173.456 212.492 173.48 212.769 173.528H212.778C212.867 173.544 212.948 173.562 213.031 173.582H213.046C213.259 173.636 213.466 173.713 213.662 173.812C213.937 173.954 214.184 174.143 214.393 174.371C214.489 174.477 214.574 174.592 214.649 174.714C214.789 174.929 214.899 175.162 214.978 175.406C215.01 175.501 215.038 175.594 215.067 175.693C215.278 176.45 215.257 177.253 215.007 177.998Z" fill="#FF9D00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M203.21 123.685V123.194C203.21 81.34 169.292 47.411 127.435 47.411C85.5791 47.411 51.648 81.342 51.648 123.194V123.358C51.646 123.467 51.645 123.576 51.648 123.685C51.6529 123.848 51.6546 124.011 51.653 124.174L51.6581 124.534L51.661 124.663C51.661 124.723 51.6631 124.782 51.6651 124.842C51.6681 124.937 51.67 125.033 51.67 125.128L51.681 125.517L51.697 125.974L51.702 126.124L51.722 126.597V126.62C51.73 126.805 51.7401 126.989 51.7491 127.173L51.75 127.187C51.76 127.375 51.7701 127.564 51.7821 127.753C51.7921 127.927 51.802 128.101 51.815 128.275L51.8171 128.306C51.8258 128.455 51.8358 128.605 51.847 128.754L51.85 128.794L51.883 129.226L51.8861 129.254C51.8921 129.338 51.898 129.422 51.906 129.503C51.9658 130.224 52.0355 130.945 52.1151 131.664L52.12 131.709L52.181 132.238L52.2491 132.793L52.299 133.17L52.322 133.347C52.3753 133.755 52.433 134.162 52.495 134.568L52.4991 134.595L52.558 134.979C52.8435 136.808 53.1971 138.626 53.618 140.429L53.6231 140.451L53.655 140.586L53.746 140.971L53.802 140.904C56.002 138.274 59.158 136.824 62.689 136.824C65.519 136.824 68.4221 137.76 71.3321 139.605C73.2621 140.831 75.3961 143.002 77.5921 145.733C79.6241 142.911 82.4721 141.035 85.7301 140.523C86.3513 140.425 86.9792 140.376 87.6081 140.375C95.0441 140.375 99.523 146.828 101.215 152.633C102.051 154.594 106.08 163.526 112.156 169.568C121.392 178.795 123.703 188.316 119.132 198.511H119.148C119.459 198.546 119.772 198.578 120.087 198.607C120.274 198.625 120.46 198.643 120.648 198.659L120.714 198.665L121.127 198.7L121.507 198.73C121.869 198.758 122.232 198.784 122.596 198.807L122.885 198.824L123.114 198.838L123.256 198.846L123.703 198.869L123.825 198.874L124.294 198.895L124.816 198.915L125.235 198.927L125.305 198.929C125.394 198.933 125.483 198.936 125.572 198.936L125.668 198.939C126.258 198.953 126.847 198.96 127.437 198.959H128.063L128.51 198.954C128.62 198.949 128.729 198.949 128.84 198.949H129.014L129.165 198.945C129.224 198.943 129.283 198.941 129.343 198.941H129.522L129.873 198.932L130.401 198.914L130.982 198.888C131.15 198.882 131.316 198.873 131.482 198.865L131.661 198.854L131.927 198.84L132.083 198.831L132.201 198.823L132.738 198.788L133.274 198.749L133.761 198.71L134.103 198.681L134.479 198.647C135.107 198.591 135.733 198.525 136.359 198.45L136.786 198.399C132.287 188.247 134.616 178.767 143.813 169.577C149.876 163.519 153.905 154.587 154.745 152.625C156.438 146.821 160.914 140.368 168.352 140.368C168.981 140.368 169.61 140.418 170.231 140.516C173.486 141.028 176.334 142.904 178.369 145.726C180.566 142.996 182.699 140.823 184.63 139.597C187.539 137.753 190.445 136.817 193.272 136.817C196.388 136.817 199.212 137.947 201.345 140.02C201.384 139.851 201.422 139.682 201.459 139.512L201.568 139.006C201.607 138.821 201.646 138.636 201.683 138.451C201.749 138.124 201.815 137.797 201.878 137.467C201.944 137.125 202.007 136.781 202.067 136.437L202.098 136.251C202.117 136.141 202.135 136.031 202.156 135.92C202.19 135.748 202.218 135.576 202.246 135.402L202.257 135.336L202.328 134.883L202.398 134.424V134.42C202.449 134.081 202.497 133.742 202.542 133.403L202.553 133.319L202.616 132.841L202.667 132.433L202.757 131.629L202.792 131.306L202.801 131.218C202.82 131.044 202.838 130.87 202.854 130.696V130.682C202.867 130.544 202.881 130.405 202.893 130.266C202.964 129.478 203.024 128.686 203.072 127.891C203.081 127.761 203.088 127.63 203.096 127.499V127.493L203.122 127.002L203.128 126.892C203.144 126.56 203.158 126.228 203.169 125.896V125.884L203.174 125.754C203.179 125.645 203.183 125.535 203.183 125.425L203.185 125.381C203.189 125.278 203.193 125.172 203.193 125.067L203.196 124.977C203.199 124.872 203.202 124.768 203.202 124.663L203.204 124.574C203.207 124.441 203.21 124.307 203.21 124.174V123.685ZM108.638 199.391C114.64 190.59 114.214 183.984 105.98 175.754C97.7441 167.523 92.951 155.487 92.951 155.487C92.951 155.487 91.1621 148.496 87.0821 149.138C83.0021 149.78 80.0091 160.227 88.5521 166.622C97.0941 173.017 86.8521 177.353 83.5641 171.352C80.2761 165.35 71.299 149.923 66.645 146.972C61.991 144.021 58.718 145.675 59.815 151.757C60.36 154.776 65.4281 159.929 70.1631 164.743C74.9671 169.627 79.428 174.163 78.474 175.768C76.581 178.955 69.9141 172.023 69.9141 172.023C69.9141 172.023 49.038 153.025 44.494 157.976C40.304 162.539 46.765 166.418 56.7211 172.397C57.5671 172.905 58.4391 173.429 59.3321 173.969C70.7231 180.865 71.609 182.684 69.992 185.293C69.395 186.257 65.582 183.968 60.892 181.153C52.897 176.352 42.3551 170.023 40.8661 175.688C39.5781 180.591 47.334 183.595 54.368 186.32C60.228 188.59 65.5881 190.666 64.7991 193.484C63.9821 196.406 59.5531 193.969 54.7121 191.305C49.2771 188.314 43.3221 185.038 41.3731 188.735C37.6901 195.725 66.7831 203.954 67.0231 204.015C76.4231 206.453 100.295 211.619 108.638 199.391ZM147.303 199.391C141.301 190.59 141.727 183.984 149.962 175.754C158.197 167.523 162.99 155.487 162.99 155.487C162.99 155.487 164.779 148.496 168.859 149.138C172.939 149.78 175.932 160.227 167.39 166.622C158.847 173.017 169.089 177.353 172.377 171.352C175.666 165.35 184.637 149.923 189.291 146.972C193.945 144.021 197.22 145.675 196.122 151.757C195.578 154.776 190.509 159.929 185.774 164.744C180.97 169.628 176.509 174.163 177.462 175.768C179.355 178.955 186.027 172.019 186.027 172.019C186.027 172.019 206.902 153.022 211.448 157.973C215.637 162.535 209.176 166.415 199.219 172.394C198.348 172.917 197.478 173.441 196.609 173.966C185.218 180.862 184.332 182.681 185.948 185.289C186.546 186.254 190.359 183.964 195.048 181.149C203.044 176.349 213.586 170.019 215.075 175.685C216.364 180.588 208.607 183.592 201.573 186.317C195.713 188.587 190.353 190.663 191.141 193.481C191.957 196.402 196.385 193.965 201.225 191.301C206.66 188.31 212.616 185.032 214.564 188.732C218.248 195.726 189.15 203.947 188.915 204.007C179.515 206.453 155.643 211.619 147.303 199.391Z" fill="#FFD21E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M152.047 102.567C153.229 102.985 154.108 104.257 154.944 105.468C156.074 107.104 157.126 108.627 158.74 107.769C160.644 106.756 162.205 105.202 163.225 103.302C164.246 101.402 164.681 99.2427 164.475 97.096C164.321 95.4908 163.813 93.9398 162.987 92.5548C162.161 91.1697 161.038 89.985 159.7 89.0862C158.361 88.1874 156.839 87.5968 155.245 87.3569C153.65 87.117 152.022 87.2339 150.478 87.699C148.934 88.1639 147.513 88.9653 146.316 90.0455C145.119 91.1257 144.176 92.4578 143.556 93.946C142.936 95.4342 142.653 97.0415 142.728 98.652C142.804 100.263 143.235 101.836 143.992 103.26C144.74 104.667 146.4 104.003 148.152 103.302C149.525 102.753 150.956 102.181 152.047 102.567ZM100.672 102.567C99.49 102.985 98.611 104.258 97.775 105.468C96.645 107.105 95.592 108.627 93.979 107.769C91.5845 106.501 89.7482 104.386 88.8278 101.838C87.9075 99.2895 87.9692 96.4896 89.0008 93.9841C90.0324 91.4786 91.9601 89.4471 94.408 88.2855C96.856 87.1239 99.6488 86.9156 102.242 87.701C104.307 88.3228 106.141 89.5427 107.513 91.2065C108.885 92.8704 109.732 94.9035 109.949 97.049C110.165 99.1945 109.74 101.356 108.728 103.26C107.979 104.667 106.319 104.003 104.567 103.303C103.193 102.753 101.764 102.181 100.672 102.567ZM144.099 149.318C152.242 142.903 155.233 132.429 155.233 125.977C155.233 120.877 151.802 122.482 146.309 125.202L145.999 125.355C140.957 127.852 134.245 131.177 126.877 131.177C119.508 131.177 112.796 127.852 107.755 125.354C102.084 122.545 98.527 120.783 98.527 125.978C98.527 132.634 101.709 143.563 110.443 149.912C111.596 147.573 113.219 145.497 115.211 143.813C117.202 142.129 119.52 140.874 122.018 140.126C122.89 139.866 123.788 141.367 124.707 142.904C125.594 144.386 126.501 145.902 127.423 145.902C128.406 145.902 129.371 144.408 130.314 142.95C131.299 141.425 132.26 139.94 133.189 140.237C137.864 141.738 141.775 144.993 144.099 149.318Z" fill="#32343D"/>
+<path d="M144.097 149.317C139.856 152.659 134.219 154.9 126.878 154.9C119.981 154.9 114.587 152.922 110.443 149.911C111.596 147.572 113.219 145.495 115.211 143.812C117.202 142.128 119.52 140.873 122.018 140.125C123.73 139.614 125.545 145.901 127.423 145.901C129.433 145.901 131.37 139.655 133.189 140.236C137.863 141.738 141.773 144.993 144.097 149.317Z" fill="#FF323D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M81.2 111.64C80.2312 112.288 79.1173 112.687 77.9572 112.801C76.7971 112.916 75.6267 112.742 74.55 112.295C73.6893 111.94 72.9072 111.418 72.2488 110.759C71.5903 110.101 71.0684 109.319 70.713 108.458C70.267 107.381 70.0935 106.211 70.2082 105.051C70.3228 103.891 70.7219 102.777 71.37 101.808C72.1488 100.642 73.2558 99.7333 74.5512 99.1967C75.8466 98.6601 77.272 98.5197 78.6471 98.7935C80.0223 99.0672 81.2853 99.7427 82.2764 100.734C83.2675 101.726 83.9422 102.99 84.215 104.365C84.4883 105.74 84.3477 107.165 83.8113 108.46C83.2748 109.755 82.3654 110.861 81.2 111.64ZM182.613 111.64C181.644 112.288 180.53 112.687 179.37 112.801C178.209 112.916 177.039 112.742 175.962 112.295C175.101 111.939 174.319 111.418 173.661 110.759C173.003 110.101 172.481 109.319 172.125 108.458C171.68 107.381 171.507 106.211 171.621 105.051C171.736 103.891 172.135 102.777 172.782 101.808C173.364 100.936 174.133 100.205 175.032 99.6658C175.931 99.1269 176.938 98.7942 177.981 98.6917C179.025 98.5891 180.078 98.7193 181.064 99.0728C182.051 99.4264 182.947 99.9944 183.688 100.736C184.68 101.727 185.355 102.99 185.628 104.365C185.902 105.74 185.761 107.165 185.224 108.46C184.687 109.755 183.779 110.861 182.613 111.64Z" fill="#FFAD03"/>
+</svg>
\ No newline at end of file
diff --git a/backend/llama.cpp/tools/ui/tests/stories/fixtures/blog-post.ts b/backend/llama.cpp/tools/ui/tests/stories/fixtures/blog-post.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3eb2ed7585f869b3b2045318ce6b2179ecef6105
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/fixtures/blog-post.ts
@@ -0,0 +1,125 @@
+// Blog Post Content
+export const BLOG_POST_MD = String.raw`
+# Understanding Rust's Ownership System
+
+*Published on March 15, 2024 • 8 min read*
+
+Rust's ownership system is one of its most distinctive features, enabling memory safety without garbage collection. In this post, we'll explore how ownership works and why it's revolutionary for systems programming.
+
+## What is Ownership?
+
+Ownership is a set of rules that governs how Rust manages memory. These rules are checked at compile time, ensuring memory safety without runtime overhead.
+
+### The Three Rules of Ownership
+
+1. **Each value has a single owner**
+2. **There can only be one owner at a time**
+3. **When the owner goes out of scope, the value is dropped**
+
+## Memory Management Without GC
+
+Traditional approaches to memory management:
+
+- **Manual management** (C/C++): Error-prone, leads to bugs
+- **Garbage collection** (Java, Python): Runtime overhead
+- **Ownership** (Rust): Compile-time safety, zero runtime cost
+
+## Basic Examples
+
+### Variable Scope
+
+${'```'}rust
+fn main() {
+    let s = String::from("hello");  // s comes into scope
+    
+    // s is valid here
+    println!("{}", s);
+    
+}  // s goes out of scope and is dropped
+${'```'}
+
+### Move Semantics
+
+${'```'}rust
+fn main() {
+    let s1 = String::from("hello");
+    let s2 = s1;  // s1 is moved to s2
+    
+    // println!("{}", s1);  // ❌ ERROR: s1 is no longer valid
+    println!("{}", s2);     // ✅ OK: s2 owns the string
+}
+${'```'}
+
+## Borrowing and References
+
+Instead of transferring ownership, you can **borrow** values:
+
+### Immutable References
+
+${'```'}rust
+fn calculate_length(s: &String) -> usize {
+    s.len()  // s is a reference, doesn't own the String
+}
+
+fn main() {
+    let s1 = String::from("hello");
+    let len = calculate_length(&s1);  // Borrow s1
+    println!("Length of '{}' is {}", s1, len);  // s1 still valid
+}
+${'```'}
+
+### Mutable References
+
+${'```'}rust
+fn main() {
+    let mut s = String::from("hello");
+    
+    let r1 = &mut s;
+    r1.push_str(", world");
+    println!("{}", r1);
+    
+    // let r2 = &mut s;  // ❌ ERROR: cannot borrow twice
+}
+${'```'}
+
+## Common Pitfalls
+
+### Dangling References
+
+${'```'}rust
+fn dangle() -> &String {  // ❌ ERROR: missing lifetime specifier
+    let s = String::from("hello");
+    &s  // s will be dropped, leaving a dangling reference
+}
+${'```'}
+
+### ✅ Solution
+
+${'```'}rust
+fn no_dangle() -> String {
+    let s = String::from("hello");
+    s  // Ownership is moved out
+}
+${'```'}
+
+## Benefits
+
+- ✅ **No null pointer dereferences**
+- ✅ **No data races**
+- ✅ **No use-after-free**
+- ✅ **No memory leaks**
+
+## Conclusion
+
+Rust's ownership system eliminates entire classes of bugs at compile time. While it has a learning curve, the benefits in safety and performance are worth it.
+
+## Further Reading
+
+- [The Rust Book - Ownership](https://doc.rust-lang.org/book/ch04-00-understanding-ownership.html)
+- [Rust by Example - Ownership](https://doc.rust-lang.org/rust-by-example/scope/move.html)
+- [Rustlings Exercises](https://github.com/rust-lang/rustlings)
+
+---
+
+*Questions? Reach out on [Twitter](https://twitter.com/rustlang) or join the [Rust Discord](https://discord.gg/rust-lang)*
+`;
diff --git a/backend/llama.cpp/tools/ui/tests/stories/fixtures/data-analysis.ts b/backend/llama.cpp/tools/ui/tests/stories/fixtures/data-analysis.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6fec32dad637ce5f835cc513ef04ec9e779d4dab
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/fixtures/data-analysis.ts
@@ -0,0 +1,124 @@
+// Data Analysis Report
+export const DATA_ANALYSIS_MD = String.raw`
+# Q4 2024 Business Analytics Report
+
+*Executive Summary • Generated on January 15, 2025*
+
+## 📊 Key Performance Indicators
+
+${'```'}
+Daily Active Users (DAU):   1.2M (+65% YoY)
+Monthly Active Users (MAU): 4.5M (+48% YoY)
+User Retention (Day 30):    68% (+12pp YoY)
+Average Session Duration:   24min (+35% YoY)
+${'```'}
+
+## 🎯 Product Performance
+
+### Feature Adoption Rates
+
+1. **AI Assistant**: 78% of users (↑ from 45%)
+2. **Collaboration Tools**: 62% of users (↑ from 38%)
+3. **Analytics Dashboard**: 54% of users (↑ from 31%)
+4. **Mobile App**: 41% of users (↑ from 22%)
+
+### Customer Satisfaction
+
+| Metric | Q4 2024 | Q3 2024 | Change |
+|--------|---------|---------|--------|
+| **NPS Score** | 72 | 68 | +4 |
+| **CSAT** | 4.6/5 | 4.4/5 | +0.2 |
+| **Support Tickets** | 2,340 | 2,890 | -19% |
+| **Resolution Time** | 4.2h | 5.1h | -18% |
+
+## 💰 Revenue Metrics
+
+### Monthly Recurring Revenue (MRR)
+
+- **Current MRR**: $2.8M (+42% YoY)
+- **New MRR**: $340K
+- **Expansion MRR**: $180K
+- **Churned MRR**: $95K
+- **Net New MRR**: $425K
+
+### Customer Acquisition
+
+${'```'}
+Cost per Acquisition (CAC): $127 (-23% YoY)
+Customer Lifetime Value:    $1,840 (+31% YoY)
+LTV:CAC Ratio:             14.5:1
+Payback Period:            3.2 months
+${'```'}
+
+## 🌍 Geographic Performance
+
+### Revenue by Region
+
+1. **North America**: 45% ($1.26M)
+2. **Europe**: 32% ($896K)
+3. **Asia-Pacific**: 18% ($504K)
+4. **Other**: 5% ($140K)
+
+### Growth Opportunities
+
+- **APAC**: 89% YoY growth potential
+- **Latin America**: Emerging market entry
+- **Middle East**: Enterprise expansion
+
+## 📱 Channel Performance
+
+### Traffic Sources
+
+| Channel | Sessions | Conversion | Revenue |
+|---------|----------|------------|---------|
+| **Organic Search** | 45% | 3.2% | $1.1M |
+| **Direct** | 28% | 4.1% | $850K |
+| **Social Media** | 15% | 2.8% | $420K |
+| **Paid Ads** | 12% | 5.5% | $430K |
+
+### Marketing ROI
+
+- **Content Marketing**: 340% ROI
+- **Email Campaigns**: 280% ROI
+- **Social Media**: 190% ROI
+- **Paid Search**: 220% ROI
+
+## 🔍 User Behavior Analysis
+
+### Session Patterns
+
+- **Peak Hours**: 9-11 AM, 2-4 PM EST
+- **Mobile Usage**: 67% of sessions
+- **Average Pages/Session**: 4.8
+- **Bounce Rate**: 23% (↓ from 31%)
+
+### Feature Usage Heatmap
+
+Most used features in order:
+1. Dashboard (89% of users)
+2. Search (76% of users)
+3. Reports (64% of users)
+4. Settings (45% of users)
+5. Integrations (32% of users)
+
+## 💡 Recommendations
+
+1. **Invest** in AI capabilities (+$2M budget)
+2. **Expand** sales team in APAC region
+3. **Improve** onboarding to reduce churn
+4. **Launch** enterprise security features
+
+## Appendix
+
+### Methodology
+
+Data collected from:
+- Internal analytics (Amplitude)
+- Customer surveys (n=2,450)
+- Financial systems (NetSuite)
+- Market research (Gartner)
+
+---
+
+*Report prepared by Data Analytics Team • [View Interactive Dashboard](https://analytics.example.com)*
+`;
diff --git a/backend/llama.cpp/tools/ui/tests/stories/fixtures/empty.ts b/backend/llama.cpp/tools/ui/tests/stories/fixtures/empty.ts
new file mode 100644
index 0000000000000000000000000000000000000000..05286e7a783c6c28920e7a683f164a20da98730e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/fixtures/empty.ts
@@ -0,0 +1,2 @@
+// Empty state
+export const EMPTY_MD = '';
diff --git a/backend/llama.cpp/tools/ui/tests/stories/fixtures/math-formulas.ts b/backend/llama.cpp/tools/ui/tests/stories/fixtures/math-formulas.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1355256b20ceb7f51aaa7fb6f69c3449dd28d126
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/fixtures/math-formulas.ts
@@ -0,0 +1,221 @@
+/* eslint-disable no-irregular-whitespace */
+// Math Formulas Content
+export const MATH_FORMULAS_MD = String.raw`
+# Mathematical Formulas and Expressions
+
+This document demonstrates various mathematical notation and formulas that can be rendered using LaTeX syntax in markdown.
+
+## Basic Arithmetic
+
+### Addition and Summation
+$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$
+
+## Algebra
+
+### Quadratic Formula
+The solutions to $ax^2 + bx + c = 0$ are:
+$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$
+
+### Binomial Theorem
+$$(x + y)^n = \sum_{k=0}^{n} \binom{n}{k} x^{n-k} y^k$$
+
+## Calculus
+
+### Derivatives
+The derivative of $f(x) = x^n$ is:
+$$f'(x) = nx^{n-1}$$
+
+### Integration
+$$\int_a^b f(x) \, dx = F(b) - F(a)$$
+
+### Fundamental Theorem of Calculus
+$$\frac{d}{dx} \int_a^x f(t) \, dt = f(x)$$
+
+## Linear Algebra
+
+### Matrix Multiplication
+If $A$ is an $m \times n$ matrix and $B$ is an $n \times p$ matrix, then:
+$$C_{ij} = \sum_{k=1}^{n} A_{ik} B_{kj}$$
+
+### Eigenvalues and Eigenvectors
+For a square matrix $A$, if $Av = \lambda v$ for some non-zero vector $v$, then:
+- $\lambda$ is an eigenvalue
+- $v$ is an eigenvector
+
+## Statistics and Probability
+
+### Normal Distribution
+The probability density function is:
+$$f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}$$
+
+### Bayes' Theorem
+$$P(A|B) = \frac{P(B|A) \cdot P(A)}{P(B)}$$
+
+### Central Limit Theorem
+For large $n$, the sample mean $\bar{X}$ is approximately:
+$$\bar{X} \sim N\left(\mu, \frac{\sigma^2}{n}\right)$$
+
+## Trigonometry
+
+### Pythagorean Identity
+$$\sin^2\theta + \cos^2\theta = 1$$
+
+### Euler's Formula
+$$e^{i\theta} = \cos\theta + i\sin\theta$$
+
+### Taylor Series for Sine
+$$\sin x = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!} x^{2n+1} = x - \frac{x^3}{3!} + \frac{x^5}{5!} - \frac{x^7}{7!} + \cdots$$
+
+## Complex Analysis
+
+### Complex Numbers
+A complex number can be written as:
+$$z = a + bi = r e^{i\theta}$$
+
+where $r = |z| = \sqrt{a^2 + b^2}$ and $\theta = \arg(z)$
+
+### Cauchy-Riemann Equations
+For a function $f(z) = u(x,y) + iv(x,y)$ to be analytic:
+$$\frac{\partial u}{\partial x} = \frac{\partial v}{\partial y}, \quad \frac{\partial u}{\partial y} = -\frac{\partial v}{\partial x}$$
+
+## Differential Equations
+
+### First-order Linear ODE
+$$\frac{dy}{dx} + P(x)y = Q(x)$$
+
+Solution: $y = e^{-\int P(x)dx}\left[\int Q(x)e^{\int P(x)dx}dx + C\right]$
+
+### Heat Equation
+$$\frac{\partial u}{\partial t} = \alpha \frac{\partial^2 u}{\partial x^2}$$
+
+## Number Theory
+
+### Prime Number Theorem
+$$\pi(x) \sim \frac{x}{\ln x}$$
+
+where $\pi(x)$ is the number of primes less than or equal to $x$.
+
+### Fermat's Last Theorem
+For $n > 2$, there are no positive integers $a$, $b$, and $c$ such that:
+$$a^n + b^n = c^n$$
+
+## Set Theory
+
+### De Morgan's Laws
+$$\overline{A \cup B} = \overline{A} \cap \overline{B}$$
+$$\overline{A \cap B} = \overline{A} \cup \overline{B}$$
+
+## Advanced Topics
+
+### Riemann Zeta Function
+$$\zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s} = \prod_{p \text{ prime}} \frac{1}{1-p^{-s}}$$
+
+### Maxwell's Equations
+$$\nabla \cdot \mathbf{E} = \frac{\rho}{\epsilon_0}$$
+$$\nabla \cdot \mathbf{B} = 0$$
+$$\nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t}$$
+$$\nabla \times \mathbf{B} = \mu_0\mathbf{J} + \mu_0\epsilon_0\frac{\partial \mathbf{E}}{\partial t}$$
+
+### Schrödinger Equation
+$$i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r},t) = \hat{H}\Psi(\mathbf{r},t)$$
+
+## Inline Math Examples
+
+Here are some inline mathematical expressions:
+
+- The golden ratio: $\phi = \frac{1 + \sqrt{5}}{2} \approx 1.618$
+- Euler's number: $e = \lim_{n \to \infty} \left(1 + \frac{1}{n}\right)^n$
+- Pi: $\pi = 4 \sum_{n=0}^{\infty} \frac{(-1)^n}{2n+1}$
+- Square root of 2: $\sqrt{2} = 1.41421356...$
+
+## Fractions and Radicals
+
+Complex fraction: $\frac{\frac{a}{b} + \frac{c}{d}}{\frac{e}{f} - \frac{g}{h}}$
+
+Nested radicals: $\sqrt{2 + \sqrt{3 + \sqrt{4 + \sqrt{5}}}}$
+
+## Summations and Products
+
+### Geometric Series
+$$\sum_{n=0}^{\infty} ar^n = \frac{a}{1-r} \quad \text{for } |r| < 1$$
+
+### Product Notation
+$$n! = \prod_{k=1}^{n} k$$
+
+### Double Summation
+$$\sum_{i=1}^{m} \sum_{j=1}^{n} a_{ij}$$
+
+## Limits
+
+$$\lim_{x \to 0} \frac{\sin x}{x} = 1$$
+
+$$\lim_{n \to \infty} \left(1 + \frac{x}{n}\right)^n = e^x$$
+
+## Further Bracket Styles and Amounts
+
+-  \( \mathrm{GL}_2(\mathbb{F}_7) \): Group of invertible matrices with entries in \(\mathbb{F}_7\).
+- Some kernel of \(\mathrm{SL}_2(\mathbb{F}_7)\):
+  \[
+  \left\{ \begin{pmatrix} 1 & 0 \\ 0 & 1 \end{pmatrix}, \begin{pmatrix} -1 & 0 \\ 0 & -1 \end{pmatrix} \right\} = \{\pm I\}
+  \]
+- Algebra:
+\[
+x = \frac{-b \pm \sqrt{\,b^{2}-4ac\,}}{2a}
+\]
+- $100 and $12.99 are amounts, not LaTeX.
+- I have $10, $3.99 and $x + y$ and $100x$. The amount is $2,000.
+- Emma buys 2 cupcakes for $3 each and 1 cookie for $1.50. How much money does she spend in total?
+- Maria has $20. She buys a notebook for $4.75 and a pack of pencils for $3.25. How much change does she receive?
+- 1 kg の質量は
+  \[
+  E = (1\ \text{kg}) \times (3.0 \times 10^8\ \text{m/s})^2 \approx 9.0 \times 10^{16}\ \text{J}
+  \]
+  というエネルギーに相当します。これは約 21 百万トンの TNT が爆発したときのエネルギーに匹敵します。
+- Algebra: \[
+x = \frac{-b \pm \sqrt{\,b^{2}-4ac\,}}{2a}
+\]
+- Algebraic topology, Homotopy Groups of $\mathbb{S}^3$:
+$$\pi_n(\mathbb{S}^3) = \begin{cases}
+\mathbb{Z} & n = 3 \\
+0 & n > 3, n \neq 4 \\
+\mathbb{Z}_2 & n = 4 \\
+\end{cases}$$
+- Spacer preceded by backslash:
+\[
+\boxed{
+\begin{aligned}
+N_{\text{att}}^{\text{(MHA)}} &=
+h \bigl[\, d_{\text{model}}\;d_{k} + d_{\text{model}}\;d_{v}\, \bigr]   && (\text{Q,K,V の重み})\\
+&\quad+ h(d_{k}+d_{k}+d_{v})                                          && (\text{バイアス Q,K,V）}\\[4pt]
+&\quad+ (h d_{v})\, d_{\text{model}}                                 && (\text{出力射影 }W^{O})\\
+&\quad+ d_{\text{model}}                                            && (\text{バイアス }b^{O})
+\end{aligned}}
+\]
+
+## Formulas in a Table
+
+| Area | Expression | Comment |
+|------|------------|---------|
+| **Algebra** | \[
+x = \frac{-b \pm \sqrt{\,b^{2}-4ac\,}}{2a}
+\] | Quadratic formula |
+| | \[
+(a+b)^{n} = \sum_{k=0}^{n}\binom{n}{k}\,a^{\,n-k}\,b^{\,k}
+\] | Binomial theorem |
+| | \(\displaystyle \prod_{k=1}^{n}k = n! \) | Factorial definition |
+| **Geometry** | \( \mathbf{a}\cdot \mathbf{b} = \|\mathbf{a}\|\,\|\mathbf{b}\|\,\cos\theta \) | Dot product & angle |
+
+## No math (but chemical)
+
+Balanced chemical reaction with states:
+
+\[
+\ce{2H2(g) + O2(g) -> 2H2O(l)}
+\]
+
+The standard enthalpy change for the reaction is: $\Delta H^\circ = \pu{-572 kJ mol^{-1}}$.
+
+---
+
+*This document showcases various mathematical notation and formulas that can be rendered in markdown using LaTeX syntax.*
+`;
diff --git a/backend/llama.cpp/tools/ui/tests/stories/fixtures/readme.ts b/backend/llama.cpp/tools/ui/tests/stories/fixtures/readme.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e8b573d6c4e3f9ecfb94e44d644adac08eeeed51
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/fixtures/readme.ts
@@ -0,0 +1,136 @@
+// README Content
+export const README_MD = String.raw`
+# 🚀 Awesome Web Framework
+
+[![npm version](https://img.shields.io/npm/v/awesome-framework.svg)](https://www.npmjs.com/package/awesome-framework)
+[![Build Status](https://github.com/awesome/framework/workflows/CI/badge.svg)](https://github.com/awesome/framework/actions)
+[![Coverage](https://codecov.io/gh/awesome/framework/branch/main/graph/badge.svg)](https://codecov.io/gh/awesome/framework)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+> A modern, fast, and flexible web framework for building scalable applications
+
+## ✨ Features
+
+- 🎯 **Type-Safe** - Full TypeScript support out of the box
+- ⚡ **Lightning Fast** - Built on Vite for instant HMR
+- 📦 **Zero Config** - Works out of the box for most use cases
+- 🎨 **Flexible** - Unopinionated with sensible defaults
+- 🔧 **Extensible** - Plugin system for custom functionality
+- 📱 **Responsive** - Mobile-first approach
+- 🌍 **i18n Ready** - Built-in internationalization
+- 🔒 **Secure** - Security best practices by default
+
+## 📦 Installation
+
+${'```'}bash
+npm install awesome-framework
+# or
+yarn add awesome-framework
+# or
+pnpm add awesome-framework
+${'```'}
+
+## 🚀 Quick Start
+
+### Create a new project
+
+${'```'}bash
+npx create-awesome-app my-app
+cd my-app
+npm run dev
+${'```'}
+
+### Basic Example
+
+${'```'}javascript
+import { createApp } from 'awesome-framework';
+
+const app = createApp({
+  port: 3000,
+  middleware: ['cors', 'helmet', 'compression']
+});
+
+app.get('/', (req, res) => {
+  res.json({ message: 'Hello World!' });
+});
+
+app.listen(() => {
+  console.log('Server running on http://localhost:3000');
+});
+${'```'}
+
+## 📖 Documentation
+
+### Core Concepts
+
+- [Getting Started](https://docs.awesome.dev/getting-started)
+- [Configuration](https://docs.awesome.dev/configuration)
+- [Routing](https://docs.awesome.dev/routing)
+- [Middleware](https://docs.awesome.dev/middleware)
+- [Database](https://docs.awesome.dev/database)
+- [Authentication](https://docs.awesome.dev/authentication)
+
+### Advanced Topics
+
+- [Performance Optimization](https://docs.awesome.dev/performance)
+- [Deployment](https://docs.awesome.dev/deployment)
+- [Testing](https://docs.awesome.dev/testing)
+- [Security](https://docs.awesome.dev/security)
+
+## 🛠️ Development
+
+### Prerequisites
+
+- Node.js >= 18
+- pnpm >= 8
+
+### Setup
+
+${'```'}bash
+git clone https://github.com/awesome/framework.git
+cd framework
+pnpm install
+pnpm dev
+${'```'}
+
+### Testing
+
+${'```'}bash
+pnpm test        # Run unit tests
+pnpm test:e2e    # Run end-to-end tests
+pnpm test:watch  # Run tests in watch mode
+${'```'}
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+### Contributors
+
+<a href="https://github.com/awesome/framework/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=awesome/framework" />
+</a>
+
+## 📊 Benchmarks
+
+| Framework | Requests/sec | Latency (ms) | Memory (MB) |
+|-----------|-------------|--------------|-------------|
+| **Awesome** | **45,230** | **2.1** | **42** |
+| Express | 28,450 | 3.5 | 68 |
+| Fastify | 41,200 | 2.3 | 48 |
+| Koa | 32,100 | 3.1 | 52 |
+
+*Benchmarks performed on MacBook Pro M2, Node.js 20.x*
+
+## 📝 License
+
+MIT © [Awesome Team](https://github.com/awesome)
+
+## 🙏 Acknowledgments
+
+Special thanks to all our sponsors and contributors who make this project possible.
+
+---
+
+**[Website](https://awesome.dev)** • **[Documentation](https://docs.awesome.dev)** • **[Discord](https://discord.gg/awesome)** • **[Twitter](https://twitter.com/awesomeframework)**
+`;
diff --git a/backend/llama.cpp/tools/ui/tests/stories/fixtures/storybook-mocks.ts b/backend/llama.cpp/tools/ui/tests/stories/fixtures/storybook-mocks.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ecfcdf09ddd45dff248419492358c10980833e75
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/stories/fixtures/storybook-mocks.ts
@@ -0,0 +1,86 @@
+import { serverStore } from '$lib/stores/server.svelte';
+import { modelsStore } from '$lib/stores/models.svelte';
+
+/**
+ * Mock server properties for Storybook testing
+ * This utility allows setting mock server configurations without polluting production code
+ */
+export function mockServerProps(props: Partial<ApiLlamaCppServerProps>): void {
+	// Reset any pointer-events from previous tests (dropdown cleanup)
+	const body = document.querySelector('body');
+	if (body) body.style.pointerEvents = '';
+
+	// Directly set the props for testing purposes
+	(serverStore as unknown as { props: ApiLlamaCppServerProps }).props = {
+		model_path: props.model_path || 'test-model',
+		modalities: {
+			vision: props.modalities?.vision ?? false,
+			audio: props.modalities?.audio ?? false,
+			video: props.modalities?.video ?? false
+		},
+		...props
+	} as ApiLlamaCppServerProps;
+
+	// Set router mode role so activeModelId can be set
+	(serverStore as unknown as { props: ApiLlamaCppServerProps }).props.role = 'ROUTER';
+
+	// Also mock modelsStore methods for modality checking
+	const vision = props.modalities?.vision ?? false;
+	const audio = props.modalities?.audio ?? false;
+	const video = props.modalities?.video ?? false;
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	(modelsStore as any).modelSupportsVision = () => vision;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	(modelsStore as any).modelSupportsAudio = () => audio;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	(modelsStore as any).modelSupportsVideo = () => video;
+
+	// Mock models list with a test model so activeModelId can be resolved
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	(modelsStore as any).models = [
+		{
+			id: 'test-model',
+			name: 'Test Model',
+			model: 'test-model'
+		}
+	];
+
+	// Mock selectedModelId
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	(modelsStore as any).selectedModelId = 'test-model';
+}
+
+/**
+ * Reset server store to clean state for testing
+ */
+export function resetServerStore(): void {
+	(serverStore as unknown as { props: ApiLlamaCppServerProps }).props = {
+		model_path: '',
+		modalities: {
+			vision: false,
+			audio: false,
+			video: false
+		}
+	} as ApiLlamaCppServerProps;
+	(serverStore as unknown as { error: string }).error = '';
+	(serverStore as unknown as { loading: boolean }).loading = false;
+}
+
+/**
+ * Common mock configurations for Storybook stories
+ */
+export const mockConfigs = {
+	visionOnly: {
+		modalities: { vision: true, audio: false }
+	},
+	audioOnly: {
+		modalities: { vision: false, audio: true }
+	},
+	bothModalities: {
+		modalities: { vision: true, audio: true }
+	},
+	noModalities: {
+		modalities: { vision: false, audio: false, video: false }
+	}
+} as const;
diff --git a/backend/llama.cpp/tools/ui/tests/unit/abort.test.ts b/backend/llama.cpp/tools/ui/tests/unit/abort.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..306e71ca15d7c7aa33051a3305806f3a87931250
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/unit/abort.test.ts
@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest';
+import { isAbortError } from '$lib/utils/abort';
+
+describe('isAbortError', () => {
+	it('returns false for null, undefined and non-error values', () => {
+		expect(isAbortError(null)).toBe(false);
+		expect(isAbortError(undefined)).toBe(false);
+		expect(isAbortError('string error')).toBe(false);
+		expect(isAbortError({ name: 'AbortError' })).toBe(false);
+		expect(isAbortError(42)).toBe(false);
+	});
+
+	it('returns true for DOMException with AbortError name', () => {
+		const err = new DOMException('Operation was aborted', 'AbortError');
+		expect(isAbortError(err)).toBe(true);
+	});
+
+	it('returns true for plain Error with AbortError name', () => {
+		const err = new Error('aborted');
+		err.name = 'AbortError';
+		expect(isAbortError(err)).toBe(true);
+	});
+
+	it('returns false for unrelated Error instances', () => {
+		expect(isAbortError(new Error('something failed'))).toBe(false);
+		expect(isAbortError(new TypeError('not related'))).toBe(false);
+		expect(isAbortError(new RangeError('out of range'))).toBe(false);
+	});
+
+	it('recognizes Firefox TypeError "Error in input stream" emitted at page unload', () => {
+		expect(isAbortError(new TypeError('Error in input stream'))).toBe(true);
+		expect(isAbortError(new TypeError('TypeError: Error in input stream'))).toBe(true);
+	});
+
+	it('recognizes Safari "The network connection was lost" during transient drop', () => {
+		expect(isAbortError(new TypeError('The network connection was lost.'))).toBe(true);
+	});
+
+	it('recognizes Safari "Load failed" during page navigation', () => {
+		expect(isAbortError(new TypeError('Load failed'))).toBe(true);
+	});
+
+	it('does NOT recognize generic TypeError messages as aborts', () => {
+		// matching too broadly would hide real bugs, the predicate must stay conservative
+		expect(isAbortError(new TypeError('Failed to fetch'))).toBe(false);
+		expect(isAbortError(new TypeError('Cannot read property of undefined'))).toBe(false);
+		expect(isAbortError(new TypeError('NetworkError when attempting to fetch resource'))).toBe(
+			false
+		);
+	});
+
+	it('is case insensitive on the matched substrings', () => {
+		expect(isAbortError(new TypeError('error in INPUT STREAM'))).toBe(true);
+		expect(isAbortError(new TypeError('the network connection WAS LOST'))).toBe(true);
+	});
+});
diff --git a/backend/llama.cpp/tools/ui/tests/unit/agentic-sections.test.ts b/backend/llama.cpp/tools/ui/tests/unit/agentic-sections.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7af882143d4e5a4a199e9e35aa0377eed06e1e31
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/unit/agentic-sections.test.ts
@@ -0,0 +1,257 @@
+import { describe, it, expect } from 'vitest';
+import { deriveAgenticSections, hasAgenticContent } from '$lib/utils/agentic';
+import { AgenticSectionType, MessageRole } from '$lib/enums';
+import type { DatabaseMessage } from '$lib/types/database';
+import type { ApiChatCompletionToolCall } from '$lib/types/api';
+
+function makeAssistant(overrides: Partial<DatabaseMessage> = {}): DatabaseMessage {
+	return {
+		id: overrides.id ?? 'ast-1',
+		convId: 'conv-1',
+		type: 'text',
+		timestamp: Date.now(),
+		role: MessageRole.ASSISTANT,
+		content: overrides.content ?? '',
+		parent: null,
+		children: [],
+		...overrides
+	} as DatabaseMessage;
+}
+
+function makeToolMsg(overrides: Partial<DatabaseMessage> = {}): DatabaseMessage {
+	return {
+		id: overrides.id ?? 'tool-1',
+		convId: 'conv-1',
+		type: 'text',
+		timestamp: Date.now(),
+		role: MessageRole.TOOL,
+		content: overrides.content ?? 'tool result',
+		parent: null,
+		children: [],
+		toolCallId: overrides.toolCallId ?? 'call_1',
+		...overrides
+	} as DatabaseMessage;
+}
+
+describe('deriveAgenticSections', () => {
+	it('returns empty array for assistant with no content', () => {
+		const msg = makeAssistant({ content: '' });
+		const sections = deriveAgenticSections(msg);
+		expect(sections).toEqual([]);
+	});
+
+	it('returns text section for simple assistant message', () => {
+		const msg = makeAssistant({ content: 'Hello world' });
+		const sections = deriveAgenticSections(msg);
+		expect(sections).toHaveLength(1);
+		expect(sections[0].type).toBe(AgenticSectionType.TEXT);
+		expect(sections[0].content).toBe('Hello world');
+	});
+
+	it('returns reasoning + text for message with reasoning', () => {
+		const msg = makeAssistant({
+			content: 'Answer is 4.',
+			reasoningContent: 'Let me think...'
+		});
+		const sections = deriveAgenticSections(msg);
+		expect(sections).toHaveLength(2);
+		expect(sections[0].type).toBe(AgenticSectionType.REASONING);
+		expect(sections[0].content).toBe('Let me think...');
+		expect(sections[1].type).toBe(AgenticSectionType.TEXT);
+	});
+
+	it('single turn: assistant with tool calls and results', () => {
+		const msg = makeAssistant({
+			content: 'Let me check.',
+			toolCalls: JSON.stringify([
+				{
+					id: 'call_1',
+					type: 'function',
+					function: { name: 'search', arguments: '{"q":"test"}' }
+				}
+			])
+		});
+		const toolResult = makeToolMsg({
+			toolCallId: 'call_1',
+			content: 'Found 3 results'
+		});
+		const sections = deriveAgenticSections(msg, [toolResult]);
+		expect(sections).toHaveLength(2);
+		expect(sections[0].type).toBe(AgenticSectionType.TEXT);
+		expect(sections[1].type).toBe(AgenticSectionType.TOOL_CALL);
+		expect(sections[1].toolName).toBe('search');
+		expect(sections[1].toolResult).toBe('Found 3 results');
+	});
+
+	it('single turn: pending tool call without result', () => {
+		const msg = makeAssistant({
+			toolCalls: JSON.stringify([
+				{ id: 'call_1', type: 'function', function: { name: 'bash', arguments: '{}' } }
+			])
+		});
+		const sections = deriveAgenticSections(msg, [], [], true);
+		expect(sections).toHaveLength(1);
+		expect(sections[0].type).toBe(AgenticSectionType.TOOL_CALL_PENDING);
+		expect(sections[0].toolName).toBe('bash');
+	});
+
+	it('multi-turn: two assistant turns grouped as one session', () => {
+		const assistant1 = makeAssistant({
+			id: 'ast-1',
+			content: 'Turn 1 text',
+			toolCalls: JSON.stringify([
+				{
+					id: 'call_1',
+					type: 'function',
+					function: { name: 'search', arguments: '{"q":"foo"}' }
+				}
+			])
+		});
+		const tool1 = makeToolMsg({ id: 'tool-1', toolCallId: 'call_1', content: 'result 1' });
+		const assistant2 = makeAssistant({
+			id: 'ast-2',
+			content: 'Final answer based on results.'
+		});
+
+		// toolMessages contains both tool result and continuation assistant
+		const sections = deriveAgenticSections(assistant1, [tool1, assistant2]);
+		expect(sections).toHaveLength(3);
+		// Turn 1
+		expect(sections[0].type).toBe(AgenticSectionType.TEXT);
+		expect(sections[0].content).toBe('Turn 1 text');
+		expect(sections[1].type).toBe(AgenticSectionType.TOOL_CALL);
+		expect(sections[1].toolName).toBe('search');
+		expect(sections[1].toolResult).toBe('result 1');
+		// Turn 2 (final)
+		expect(sections[2].type).toBe(AgenticSectionType.TEXT);
+		expect(sections[2].content).toBe('Final answer based on results.');
+	});
+
+	it('multi-turn: three turns with tool calls', () => {
+		const assistant1 = makeAssistant({
+			id: 'ast-1',
+			content: '',
+			toolCalls: JSON.stringify([
+				{
+					id: 'call_1',
+					type: 'function',
+					function: { name: 'list_files', arguments: '{}' }
+				}
+			])
+		});
+		const tool1 = makeToolMsg({ id: 'tool-1', toolCallId: 'call_1', content: 'file1 file2' });
+		const assistant2 = makeAssistant({
+			id: 'ast-2',
+			content: 'Reading file1...',
+			toolCalls: JSON.stringify([
+				{
+					id: 'call_2',
+					type: 'function',
+					function: { name: 'read_file', arguments: '{"path":"file1"}' }
+				}
+			])
+		});
+		const tool2 = makeToolMsg({
+			id: 'tool-2',
+			toolCallId: 'call_2',
+			content: 'contents of file1'
+		});
+		const assistant3 = makeAssistant({
+			id: 'ast-3',
+			content: 'Here is the analysis.',
+			reasoningContent: 'The file contains...'
+		});
+
+		const sections = deriveAgenticSections(assistant1, [tool1, assistant2, tool2, assistant3]);
+		// Turn 1: tool_call (no text since content is empty)
+		// Turn 2: text + tool_call
+		// Turn 3: reasoning + text
+		expect(sections).toHaveLength(5);
+		expect(sections[0].type).toBe(AgenticSectionType.TOOL_CALL);
+		expect(sections[0].toolName).toBe('list_files');
+		expect(sections[1].type).toBe(AgenticSectionType.TEXT);
+		expect(sections[1].content).toBe('Reading file1...');
+		expect(sections[2].type).toBe(AgenticSectionType.TOOL_CALL);
+		expect(sections[2].toolName).toBe('read_file');
+		expect(sections[3].type).toBe(AgenticSectionType.REASONING);
+		expect(sections[4].type).toBe(AgenticSectionType.TEXT);
+		expect(sections[4].content).toBe('Here is the analysis.');
+	});
+
+	it('returns REASONING_PENDING when streaming with only reasoning content', () => {
+		const msg = makeAssistant({
+			reasoningContent: 'Let me think about this...'
+		});
+		const sections = deriveAgenticSections(msg, [], [], true);
+		expect(sections).toHaveLength(1);
+		expect(sections[0].type).toBe(AgenticSectionType.REASONING_PENDING);
+		expect(sections[0].content).toBe('Let me think about this...');
+	});
+
+	it('returns REASONING (not pending) when streaming but text content has appeared', () => {
+		const msg = makeAssistant({
+			content: 'The answer is',
+			reasoningContent: 'Let me think...'
+		});
+		const sections = deriveAgenticSections(msg, [], [], true);
+		expect(sections).toHaveLength(2);
+		expect(sections[0].type).toBe(AgenticSectionType.REASONING);
+		expect(sections[1].type).toBe(AgenticSectionType.TEXT);
+	});
+
+	it('returns REASONING (not pending) when not streaming', () => {
+		const msg = makeAssistant({
+			reasoningContent: 'Let me think...'
+		});
+		const sections = deriveAgenticSections(msg, [], [], false);
+		expect(sections).toHaveLength(1);
+		expect(sections[0].type).toBe(AgenticSectionType.REASONING);
+	});
+
+	it('multi-turn: streaming tool calls on last turn', () => {
+		const assistant1 = makeAssistant({
+			toolCalls: JSON.stringify([
+				{ id: 'call_1', type: 'function', function: { name: 'search', arguments: '{}' } }
+			])
+		});
+		const tool1 = makeToolMsg({ toolCallId: 'call_1', content: 'result' });
+		const assistant2 = makeAssistant({ id: 'ast-2', content: '' });
+
+		const streamingToolCalls: ApiChatCompletionToolCall[] = [
+			{ id: 'call_2', type: 'function', function: { name: 'write_file', arguments: '{"pa' } }
+		];
+
+		const sections = deriveAgenticSections(assistant1, [tool1, assistant2], streamingToolCalls);
+		// Turn 1: tool_call
+		// Turn 2 (streaming): streaming tool call
+		expect(sections.some((s) => s.type === AgenticSectionType.TOOL_CALL)).toBe(true);
+		expect(sections.some((s) => s.type === AgenticSectionType.TOOL_CALL_STREAMING)).toBe(true);
+	});
+});
+
+describe('hasAgenticContent', () => {
+	it('returns false for plain assistant', () => {
+		const msg = makeAssistant({ content: 'Just text' });
+		expect(hasAgenticContent(msg)).toBe(false);
+	});
+
+	it('returns true when message has toolCalls', () => {
+		const msg = makeAssistant({
+			toolCalls: JSON.stringify([
+				{ id: 'call_1', type: 'function', function: { name: 'test', arguments: '{}' } }
+			])
+		});
+		expect(hasAgenticContent(msg)).toBe(true);
+	});
+
+	it('returns true when toolMessages are provided', () => {
+		const msg = makeAssistant();
+		const tool = makeToolMsg();
+		expect(hasAgenticContent(msg, [tool])).toBe(true);
+	});
+
+	it('returns false for empty toolCalls JSON', () => {
+		const msg = makeAssistant({ toolCalls: '[]' });
+		expect(hasAgenticContent(msg)).toBe(false);
+	});
+});
diff --git a/backend/llama.cpp/tools/ui/tests/unit/agentic-strip.test.ts b/backend/llama.cpp/tools/ui/tests/unit/agentic-strip.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..86867f8a9ddcd7e6234a643243ac3702e8669cfd
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/unit/agentic-strip.test.ts
@@ -0,0 +1,95 @@
+import { describe, it, expect } from 'vitest';
+import { LEGACY_AGENTIC_REGEX } from '$lib/constants/agentic';
+
+/**
+ * Tests for legacy marker stripping (used in migration).
+ * The new system does not embed markers in content - these tests verify
+ * the legacy regex patterns still work for the migration code.
+ */
+
+// Mirror the legacy stripping logic used during migration
+function stripLegacyContextMarkers(content: string): string {
+	return content
+		.replace(new RegExp(LEGACY_AGENTIC_REGEX.REASONING_BLOCK.source, 'g'), '')
+		.replace(LEGACY_AGENTIC_REGEX.REASONING_OPEN, '')
+		.replace(new RegExp(LEGACY_AGENTIC_REGEX.AGENTIC_TOOL_CALL_BLOCK.source, 'g'), '')
+		.replace(LEGACY_AGENTIC_REGEX.AGENTIC_TOOL_CALL_OPEN, '');
+}
+
+// A realistic complete tool call block as stored in old message.content
+const COMPLETE_BLOCK =
+	'\n\n<<<AGENTIC_TOOL_CALL_START>>>\n' +
+	'<<<TOOL_NAME:bash_tool>>>\n' +
+	'<<<TOOL_ARGS_START>>>\n' +
+	'{"command":"ls /tmp","description":"list tmp"}\n' +
+	'<<<TOOL_ARGS_END>>>\n' +
+	'file1.txt\nfile2.txt\n' +
+	'<<<AGENTIC_TOOL_CALL_END>>>\n';
+
+// Partial block: streaming was cut before END arrived.
+const OPEN_BLOCK =
+	'\n\n<<<AGENTIC_TOOL_CALL_START>>>\n' +
+	'<<<TOOL_NAME:bash_tool>>>\n' +
+	'<<<TOOL_ARGS_START>>>\n' +
+	'{"command":"ls /tmp","description":"list tmp"}\n' +
+	'<<<TOOL_ARGS_END>>>\n' +
+	'partial output...';
+
+describe('legacy agentic marker stripping (for migration)', () => {
+	it('strips a complete tool call block, leaving surrounding text', () => {
+		const input = 'Before.' + COMPLETE_BLOCK + 'After.';
+		const result = stripLegacyContextMarkers(input);
+		expect(result).not.toContain('<<<');
+		expect(result).toContain('Before.');
+		expect(result).toContain('After.');
+	});
+
+	it('strips multiple complete tool call blocks', () => {
+		const input = 'A' + COMPLETE_BLOCK + 'B' + COMPLETE_BLOCK + 'C';
+		const result = stripLegacyContextMarkers(input);
+		expect(result).not.toContain('<<<');
+		expect(result).toContain('A');
+		expect(result).toContain('B');
+		expect(result).toContain('C');
+	});
+
+	it('strips an open/partial tool call block (no END marker)', () => {
+		const input = 'Lead text.' + OPEN_BLOCK;
+		const result = stripLegacyContextMarkers(input);
+		expect(result).toBe('Lead text.');
+		expect(result).not.toContain('<<<');
+	});
+
+	it('does not alter content with no markers', () => {
+		const input = 'Just a normal assistant response.';
+		expect(stripLegacyContextMarkers(input)).toBe(input);
+	});
+
+	it('strips reasoning block independently', () => {
+		const input = '<<<reasoning_content_start>>>think hard<<<reasoning_content_end>>>Answer.';
+		expect(stripLegacyContextMarkers(input)).toBe('Answer.');
+	});
+
+	it('strips both reasoning and agentic blocks together', () => {
+		const input =
+			'<<<reasoning_content_start>>>plan<<<reasoning_content_end>>>' +
+			'Some text.' +
+			COMPLETE_BLOCK;
+		expect(stripLegacyContextMarkers(input)).not.toContain('<<<');
+		expect(stripLegacyContextMarkers(input)).toContain('Some text.');
+	});
+
+	it('empty string survives', () => {
+		expect(stripLegacyContextMarkers('')).toBe('');
+	});
+
+	it('detects legacy markers', () => {
+		expect(LEGACY_AGENTIC_REGEX.HAS_LEGACY_MARKERS.test('normal text')).toBe(false);
+		expect(
+			LEGACY_AGENTIC_REGEX.HAS_LEGACY_MARKERS.test('text<<<AGENTIC_TOOL_CALL_START>>>more')
+		).toBe(true);
+		expect(LEGACY_AGENTIC_REGEX.HAS_LEGACY_MARKERS.test('<<<reasoning_content_start>>>think')).toBe(
+			true
+		);
+	});
+});
diff --git a/backend/llama.cpp/tools/ui/tests/unit/clipboard.test.ts b/backend/llama.cpp/tools/ui/tests/unit/clipboard.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d8ea4899e2118330e72eb10fe147426217baec69
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/unit/clipboard.test.ts
@@ -0,0 +1,423 @@
+import { describe, it, expect } from 'vitest';
+import { AttachmentType } from '$lib/enums';
+import {
+	formatMessageForClipboard,
+	parseClipboardContent,
+	hasClipboardAttachments
+} from '$lib/utils/clipboard';
+
+describe('formatMessageForClipboard', () => {
+	it('returns plain content when no extras', () => {
+		const result = formatMessageForClipboard('Hello world', undefined);
+		expect(result).toBe('Hello world');
+	});
+
+	it('returns plain content when extras is empty array', () => {
+		const result = formatMessageForClipboard('Hello world', []);
+		expect(result).toBe('Hello world');
+	});
+
+	it('handles empty string content', () => {
+		const result = formatMessageForClipboard('', undefined);
+		expect(result).toBe('');
+	});
+
+	it('returns plain content when extras has only non-text attachments', () => {
+		const extras = [
+			{
+				type: AttachmentType.IMAGE as const,
+				name: 'image.png',
+				base64Url: 'data:image/png;base64,...'
+			}
+		];
+		const result = formatMessageForClipboard('Hello world', extras);
+		expect(result).toBe('Hello world');
+	});
+
+	it('filters non-text attachments and keeps only text ones', () => {
+		const extras = [
+			{
+				type: AttachmentType.IMAGE as const,
+				name: 'image.png',
+				base64Url: 'data:image/png;base64,...'
+			},
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'file.txt',
+				content: 'Text content'
+			},
+			{
+				type: AttachmentType.PDF as const,
+				name: 'doc.pdf',
+				base64Data: 'data:application/pdf;base64,...',
+				content: 'PDF content',
+				processedAsImages: false
+			}
+		];
+		const result = formatMessageForClipboard('Hello', extras);
+
+		expect(result).toContain('"file.txt"');
+		expect(result).not.toContain('image.png');
+		expect(result).not.toContain('doc.pdf');
+	});
+
+	it('formats message with text attachments', () => {
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'file1.txt',
+				content: 'File 1 content'
+			},
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'file2.txt',
+				content: 'File 2 content'
+			}
+		];
+		const result = formatMessageForClipboard('Hello world', extras);
+
+		expect(result).toContain('"Hello world"');
+		expect(result).toContain('"type": "TEXT"');
+		expect(result).toContain('"name": "file1.txt"');
+		expect(result).toContain('"content": "File 1 content"');
+		expect(result).toContain('"name": "file2.txt"');
+	});
+
+	it('handles content with quotes and special characters', () => {
+		const content = 'Hello "world" with\nnewline';
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'test.txt',
+				content: 'Test content'
+			}
+		];
+		const result = formatMessageForClipboard(content, extras);
+
+		// Should be valid JSON
+		expect(result.startsWith('"')).toBe(true);
+		// The content should be properly escaped
+		const parsed = JSON.parse(result.split('\n')[0]);
+		expect(parsed).toBe(content);
+	});
+
+	it('converts legacy context type to TEXT type', () => {
+		const extras = [
+			{
+				type: AttachmentType.LEGACY_CONTEXT as const,
+				name: 'legacy.txt',
+				content: 'Legacy content'
+			}
+		];
+		const result = formatMessageForClipboard('Hello', extras);
+
+		expect(result).toContain('"type": "TEXT"');
+		expect(result).not.toContain('"context"');
+	});
+
+	it('handles attachment content with special characters', () => {
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'code.js',
+				content: 'const x = "hello\\nworld";\nconst y = `template ${var}`;'
+			}
+		];
+		const formatted = formatMessageForClipboard('Check this code', extras);
+		const parsed = parseClipboardContent(formatted);
+
+		expect(parsed.textAttachments[0].content).toBe(
+			'const x = "hello\\nworld";\nconst y = `template ${var}`;'
+		);
+	});
+
+	it('handles unicode characters in content and attachments', () => {
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'unicode.txt',
+				content: '日本語テスト 🎉 émojis'
+			}
+		];
+		const formatted = formatMessageForClipboard('Привет мир 👋', extras);
+		const parsed = parseClipboardContent(formatted);
+
+		expect(parsed.message).toBe('Привет мир 👋');
+		expect(parsed.textAttachments[0].content).toBe('日本語テスト 🎉 émojis');
+	});
+
+	it('formats as plain text when asPlainText is true', () => {
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'file1.txt',
+				content: 'File 1 content'
+			},
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'file2.txt',
+				content: 'File 2 content'
+			}
+		];
+		const result = formatMessageForClipboard('Hello world', extras, true);
+
+		expect(result).toBe('Hello world\n\nFile 1 content\n\nFile 2 content');
+	});
+
+	it('returns plain content when asPlainText is true but no attachments', () => {
+		const result = formatMessageForClipboard('Hello world', [], true);
+		expect(result).toBe('Hello world');
+	});
+
+	it('plain text mode does not use JSON format', () => {
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'test.txt',
+				content: 'Test content'
+			}
+		];
+		const result = formatMessageForClipboard('Hello', extras, true);
+
+		expect(result).not.toContain('"type"');
+		expect(result).not.toContain('[');
+		expect(result).toBe('Hello\n\nTest content');
+	});
+});
+
+describe('parseClipboardContent', () => {
+	it('returns plain text as message when not in special format', () => {
+		const result = parseClipboardContent('Hello world');
+
+		expect(result.message).toBe('Hello world');
+		expect(result.textAttachments).toHaveLength(0);
+	});
+
+	it('handles empty string input', () => {
+		const result = parseClipboardContent('');
+
+		expect(result.message).toBe('');
+		expect(result.textAttachments).toHaveLength(0);
+	});
+
+	it('handles whitespace-only input', () => {
+		const result = parseClipboardContent('   \n\t  ');
+
+		expect(result.message).toBe('   \n\t  ');
+		expect(result.textAttachments).toHaveLength(0);
+	});
+
+	it('returns plain text as message when starts with quote but invalid format', () => {
+		const result = parseClipboardContent('"Unclosed quote');
+
+		expect(result.message).toBe('"Unclosed quote');
+		expect(result.textAttachments).toHaveLength(0);
+	});
+
+	it('returns original text when JSON array is malformed', () => {
+		const input = '"Hello"\n[invalid json';
+
+		const result = parseClipboardContent(input);
+
+		expect(result.message).toBe('"Hello"\n[invalid json');
+		expect(result.textAttachments).toHaveLength(0);
+	});
+
+	it('parses message with text attachments', () => {
+		const input = `"Hello world"
+[
+  {"type":"TEXT","name":"file1.txt","content":"File 1 content"},
+  {"type":"TEXT","name":"file2.txt","content":"File 2 content"}
+]`;
+
+		const result = parseClipboardContent(input);
+
+		expect(result.message).toBe('Hello world');
+		expect(result.textAttachments).toHaveLength(2);
+		expect(result.textAttachments[0].name).toBe('file1.txt');
+		expect(result.textAttachments[0].content).toBe('File 1 content');
+		expect(result.textAttachments[1].name).toBe('file2.txt');
+		expect(result.textAttachments[1].content).toBe('File 2 content');
+	});
+
+	it('handles escaped quotes in message', () => {
+		const input = `"Hello \\"world\\" with quotes"
+[
+  {"type":"TEXT","name":"file.txt","content":"test"}
+]`;
+
+		const result = parseClipboardContent(input);
+
+		expect(result.message).toBe('Hello "world" with quotes');
+		expect(result.textAttachments).toHaveLength(1);
+	});
+
+	it('handles newlines in message', () => {
+		const input = `"Hello\\nworld"
+[
+  {"type":"TEXT","name":"file.txt","content":"test"}
+]`;
+
+		const result = parseClipboardContent(input);
+
+		expect(result.message).toBe('Hello\nworld');
+		expect(result.textAttachments).toHaveLength(1);
+	});
+
+	it('returns message only when no array follows', () => {
+		const input = '"Just a quoted string"';
+
+		const result = parseClipboardContent(input);
+
+		expect(result.message).toBe('Just a quoted string');
+		expect(result.textAttachments).toHaveLength(0);
+	});
+
+	it('filters out invalid attachment objects', () => {
+		const input = `"Hello"
+[
+  {"type":"TEXT","name":"valid.txt","content":"valid"},
+  {"type":"INVALID","name":"invalid.txt","content":"invalid"},
+  {"name":"missing-type.txt","content":"missing"},
+  {"type":"TEXT","content":"missing name"}
+]`;
+
+		const result = parseClipboardContent(input);
+
+		expect(result.message).toBe('Hello');
+		expect(result.textAttachments).toHaveLength(1);
+		expect(result.textAttachments[0].name).toBe('valid.txt');
+	});
+
+	it('handles empty attachments array', () => {
+		const input = '"Hello"\n[]';
+
+		const result = parseClipboardContent(input);
+
+		expect(result.message).toBe('Hello');
+		expect(result.textAttachments).toHaveLength(0);
+	});
+
+	it('roundtrips correctly with formatMessageForClipboard', () => {
+		const originalContent = 'Hello "world" with\nspecial characters';
+		const originalExtras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'file1.txt',
+				content: 'Content with\nnewlines and "quotes"'
+			},
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'file2.txt',
+				content: 'Another file'
+			}
+		];
+
+		const formatted = formatMessageForClipboard(originalContent, originalExtras);
+		const parsed = parseClipboardContent(formatted);
+
+		expect(parsed.message).toBe(originalContent);
+		expect(parsed.textAttachments).toHaveLength(2);
+		expect(parsed.textAttachments[0].name).toBe('file1.txt');
+		expect(parsed.textAttachments[0].content).toBe('Content with\nnewlines and "quotes"');
+		expect(parsed.textAttachments[1].name).toBe('file2.txt');
+		expect(parsed.textAttachments[1].content).toBe('Another file');
+	});
+});
+
+describe('hasClipboardAttachments', () => {
+	it('returns false for plain text', () => {
+		expect(hasClipboardAttachments('Hello world')).toBe(false);
+	});
+
+	it('returns false for empty string', () => {
+		expect(hasClipboardAttachments('')).toBe(false);
+	});
+
+	it('returns false for quoted string without attachments', () => {
+		expect(hasClipboardAttachments('"Hello world"')).toBe(false);
+	});
+
+	it('returns true for valid format with attachments', () => {
+		const input = `"Hello"
+[{"type":"TEXT","name":"file.txt","content":"test"}]`;
+
+		expect(hasClipboardAttachments(input)).toBe(true);
+	});
+
+	it('returns false for format with empty attachments array', () => {
+		const input = '"Hello"\n[]';
+
+		expect(hasClipboardAttachments(input)).toBe(false);
+	});
+
+	it('returns false for malformed JSON', () => {
+		expect(hasClipboardAttachments('"Hello"\n[broken')).toBe(false);
+	});
+});
+
+describe('roundtrip edge cases', () => {
+	it('preserves empty message with attachments', () => {
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'file.txt',
+				content: 'Content only'
+			}
+		];
+		const formatted = formatMessageForClipboard('', extras);
+		const parsed = parseClipboardContent(formatted);
+
+		expect(parsed.message).toBe('');
+		expect(parsed.textAttachments).toHaveLength(1);
+		expect(parsed.textAttachments[0].content).toBe('Content only');
+	});
+
+	it('preserves attachment with empty content', () => {
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'empty.txt',
+				content: ''
+			}
+		];
+		const formatted = formatMessageForClipboard('Message', extras);
+		const parsed = parseClipboardContent(formatted);
+
+		expect(parsed.message).toBe('Message');
+		expect(parsed.textAttachments).toHaveLength(1);
+		expect(parsed.textAttachments[0].content).toBe('');
+	});
+
+	it('preserves multiple backslashes', () => {
+		const content = 'Path: C:\\\\Users\\\\test\\\\file.txt';
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'path.txt',
+				content: 'D:\\\\Data\\\\file'
+			}
+		];
+		const formatted = formatMessageForClipboard(content, extras);
+		const parsed = parseClipboardContent(formatted);
+
+		expect(parsed.message).toBe(content);
+		expect(parsed.textAttachments[0].content).toBe('D:\\\\Data\\\\file');
+	});
+
+	it('preserves tabs and various whitespace', () => {
+		const content = 'Line1\t\tTabbed\n  Spaced\r\nCRLF';
+		const extras = [
+			{
+				type: AttachmentType.TEXT as const,
+				name: 'whitespace.txt',
+				content: '\t\t\n\n   '
+			}
+		];
+		const formatted = formatMessageForClipboard(content, extras);
+		const parsed = parseClipboardContent(formatted);
+
+		expect(parsed.message).toBe(content);
+		expect(parsed.textAttachments[0].content).toBe('\t\t\n\n   ');
+	});
+});
diff --git a/backend/llama.cpp/tools/ui/tests/unit/continue-intent.test.ts b/backend/llama.cpp/tools/ui/tests/unit/continue-intent.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..76539c76a9e8a25f333a0899693f32da5ebbcaf5
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/unit/continue-intent.test.ts
@@ -0,0 +1,166 @@
+import { describe, it, expect } from 'vitest';
+import { classifyContinueIntent } from '$lib/utils/agentic';
+import { ContinueIntentKind, MessageRole, MessageType } from '$lib/enums';
+import type { DatabaseMessage } from '$lib/types/database';
+
+/**
+ * Tests for the Continue button intent classifier.
+ *
+ * The classifier walks the persisted message history to decide which of three
+ * resume paths a Continue click should take:
+ *
+ *   A. append_text  -> plain text assistant turn, resume with
+ *                      continue_final_message.
+ *   B. rerun_turn   -> assistant turn with tool_calls but no tool results yet,
+ *                      the stream was cut mid turn and the tool_calls are
+ *                      unrecoverable as a token level continuation. Drop the
+ *                      target and rerun from the previous history.
+ *   C. next_turn    -> assistant turn with tool_calls that were already
+ *                      resolved by trailing tool results. Hand the history
+ *                      back to the agentic loop so it starts the next turn.
+ */
+
+let nextId = 0;
+function makeMsg(role: MessageRole, opts: Partial<DatabaseMessage> = {}): DatabaseMessage {
+	nextId++;
+	return {
+		id: `msg-${nextId}`,
+		convId: 'conv-1',
+		type: MessageType.TEXT,
+		timestamp: nextId,
+		role,
+		content: '',
+		parent: null,
+		children: [],
+		...opts
+	};
+}
+
+function toolCall(id: string, name: string, args: string = '{}'): string {
+	return JSON.stringify([{ id, type: 'function', function: { name, arguments: args } }]);
+}
+
+describe('classifyContinueIntent', () => {
+	it('returns append_text for a plain text assistant turn at the tail', () => {
+		const messages = [
+			makeMsg(MessageRole.USER, { content: 'hello' }),
+			makeMsg(MessageRole.ASSISTANT, { content: 'hi there' })
+		];
+
+		const intent = classifyContinueIntent(messages, 1);
+
+		expect(intent).toEqual({ kind: ContinueIntentKind.APPEND_TEXT });
+	});
+
+	it('returns append_text for a plain text assistant turn in the middle', () => {
+		const messages = [
+			makeMsg(MessageRole.USER, { content: 'q1' }),
+			makeMsg(MessageRole.ASSISTANT, { content: 'a1' }),
+			makeMsg(MessageRole.USER, { content: 'q2' }),
+			makeMsg(MessageRole.ASSISTANT, { content: 'a2' })
+		];
+
+		expect(classifyContinueIntent(messages, 1)).toEqual({ kind: ContinueIntentKind.APPEND_TEXT });
+	});
+
+	it('returns rerun_turn when the assistant has tool_calls without results', () => {
+		const messages = [
+			makeMsg(MessageRole.USER, { content: 'list files' }),
+			makeMsg(MessageRole.ASSISTANT, {
+				content: '',
+				toolCalls: toolCall('call_1', 'bash_tool', '{"command":"ls"}')
+			})
+		];
+
+		const intent = classifyContinueIntent(messages, 1);
+
+		expect(intent).toEqual({ kind: ContinueIntentKind.RERUN_TURN, truncateAfter: 0 });
+	});
+
+	it('returns next_turn when trailing tool results resolve the tool_calls', () => {
+		const messages = [
+			makeMsg(MessageRole.USER, { content: 'list files' }),
+			makeMsg(MessageRole.ASSISTANT, {
+				content: '',
+				toolCalls: toolCall('call_1', 'bash_tool')
+			}),
+			makeMsg(MessageRole.TOOL, { content: 'file1\nfile2', toolCallId: 'call_1' })
+		];
+
+		const intent = classifyContinueIntent(messages, 1);
+
+		expect(intent).toEqual({ kind: ContinueIntentKind.NEXT_TURN, truncateAfter: 2 });
+	});
+
+	it('next_turn keeps all consecutive trailing tool results, not just one', () => {
+		const messages = [
+			makeMsg(MessageRole.USER, { content: 'do many things' }),
+			makeMsg(MessageRole.ASSISTANT, {
+				content: '',
+				toolCalls: JSON.stringify([
+					{ id: 'call_1', type: 'function', function: { name: 'a', arguments: '{}' } },
+					{ id: 'call_2', type: 'function', function: { name: 'b', arguments: '{}' } }
+				])
+			}),
+			makeMsg(MessageRole.TOOL, { content: 'r1', toolCallId: 'call_1' }),
+			makeMsg(MessageRole.TOOL, { content: 'r2', toolCallId: 'call_2' })
+		];
+
+		const intent = classifyContinueIntent(messages, 1);
+
+		expect(intent).toEqual({ kind: ContinueIntentKind.NEXT_TURN, truncateAfter: 3 });
+	});
+
+	it('next_turn stops at the first non tool message after the target', () => {
+		const messages = [
+			makeMsg(MessageRole.USER, { content: 'go' }),
+			makeMsg(MessageRole.ASSISTANT, {
+				content: '',
+				toolCalls: toolCall('call_1', 'a')
+			}),
+			makeMsg(MessageRole.TOOL, { content: 'r1', toolCallId: 'call_1' }),
+			makeMsg(MessageRole.USER, { content: 'wait' }),
+			makeMsg(MessageRole.TOOL, { content: 'late', toolCallId: 'call_1' })
+		];
+
+		const intent = classifyContinueIntent(messages, 1);
+
+		// truncateAfter must point at the contiguous tool block, not jump over
+		// the user message to grab the dangling late tool.
+		expect(intent).toEqual({ kind: ContinueIntentKind.NEXT_TURN, truncateAfter: 2 });
+	});
+
+	it('returns append_text when toolCalls is set but parses to empty array', () => {
+		const messages = [
+			makeMsg(MessageRole.USER, { content: 'q' }),
+			makeMsg(MessageRole.ASSISTANT, { content: 'a', toolCalls: '[]' })
+		];
+
+		expect(classifyContinueIntent(messages, 1)).toEqual({ kind: ContinueIntentKind.APPEND_TEXT });
+	});
+
+	it('returns append_text when toolCalls is malformed JSON', () => {
+		const messages = [
+			makeMsg(MessageRole.USER, { content: 'q' }),
+			makeMsg(MessageRole.ASSISTANT, { content: 'a', toolCalls: '{not json' })
+		];
+
+		expect(classifyContinueIntent(messages, 1)).toEqual({ kind: ContinueIntentKind.APPEND_TEXT });
+	});
+
+	it('returns append_text defensively when idx points at a non assistant message', () => {
+		const messages = [
+			makeMsg(MessageRole.USER, { content: 'q' }),
+			makeMsg(MessageRole.ASSISTANT, { content: 'a' })
+		];
+
+		expect(classifyContinueIntent(messages, 0)).toEqual({ kind: ContinueIntentKind.APPEND_TEXT });
+	});
+
+	it('returns append_text defensively when idx is out of bounds', () => {
+		const messages = [makeMsg(MessageRole.ASSISTANT, { content: 'a' })];
+
+		expect(classifyContinueIntent(messages, 5)).toEqual({ kind: ContinueIntentKind.APPEND_TEXT });
+		expect(classifyContinueIntent([], 0)).toEqual({ kind: ContinueIntentKind.APPEND_TEXT });
+	});
+});
diff --git a/backend/llama.cpp/tools/ui/tests/unit/favicon-colorize.test.ts b/backend/llama.cpp/tools/ui/tests/unit/favicon-colorize.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..12b8a6f21cde6c3f2701606c799df2addffd026e
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/unit/favicon-colorize.test.ts
@@ -0,0 +1,198 @@
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import {
+	colorizeFaviconSvg,
+	padFaviconSvg,
+	writeThemeFavicons
+} from '../../scripts/favicon-colorize';
+
+const SOURCE_SVG = [
+	'<svg xmlns="http://www.w3.org/2000/svg">',
+	'  <path d="M0 0" fill="currentColor"/>',
+	'  <path d="M1 1" fill="#ff00aa"/>',
+	'  <circle fill="currentColor"/>',
+	'</svg>'
+].join('\n');
+
+describe('colorizeFaviconSvg', () => {
+	it('substitutes every currentColor occurrence for the light variant', () => {
+		const { light } = colorizeFaviconSvg(SOURCE_SVG, '#111111', '#fafafa');
+		expect(light.match(/currentColor/g)).toBeNull();
+		expect(light).toContain('fill="#111111"');
+		expect(light).toContain('<circle fill="#111111"/>');
+	});
+
+	it('substitutes every currentColor occurrence for the dark variant', () => {
+		const { dark } = colorizeFaviconSvg(SOURCE_SVG, '#111111', '#fafafa');
+		expect(dark.match(/currentColor/g)).toBeNull();
+		expect(dark).toContain('fill="#fafafa"');
+		expect(dark).toContain('<circle fill="#fafafa"/>');
+	});
+
+	it('leaves non-currentColor colors untouched in both variants', () => {
+		const { light, dark } = colorizeFaviconSvg(SOURCE_SVG, '#111111', '#fafafa');
+		expect(light).toContain('fill="#ff00aa"');
+		expect(dark).toContain('fill="#ff00aa"');
+	});
+
+	it('does not alter any other part of the SVG', () => {
+		const { light, dark } = colorizeFaviconSvg(SOURCE_SVG, '#111111', '#fafafa');
+		const stripColors = (s: string) =>
+			s.replaceAll('#111111', '').replaceAll('#fafafa', '').replaceAll('currentColor', '');
+		const expected = stripColors(SOURCE_SVG);
+		expect(stripColors(light)).toBe(expected);
+		expect(stripColors(dark)).toBe(expected);
+	});
+
+	it('returns the same SVG for light and dark when called with the same color', () => {
+		const result = colorizeFaviconSvg(SOURCE_SVG, '#abcdef', '#abcdef');
+		expect(result.light).toBe(result.dark);
+	});
+
+	it('returns the source unchanged when given a color that does not appear (no currentColor in source)', () => {
+		const plain = '<svg><path fill="#000"/></svg>';
+		const { light, dark } = colorizeFaviconSvg(plain, '#111111', '#fafafa');
+		expect(light).toBe(plain);
+		expect(dark).toBe(plain);
+	});
+});
+
+describe('padFaviconSvg', () => {
+	const SIZED_SVG =
+		'<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">' +
+		'<path d="M244.95 8L388.923 8Z" fill="currentColor"/>' +
+		'</svg>';
+
+	it('wraps inner content in a translate-then-scale group that matches padding', () => {
+		const padded = padFaviconSvg(SIZED_SVG, 0.05);
+		// scale = 1 - 0.05 = 0.95
+		// translate = (0.05 * 512) / 2 = 12.8 on each axis
+		expect(padded).toContain('transform="translate(12.8 12.8) scale(0.95)"');
+		expect(padded).toContain('<g transform="translate(12.8 12.8) scale(0.95)">');
+		expect(padded).toContain('<path d="M244.95 8L388.923 8Z" fill="currentColor"/>');
+		expect(padded.endsWith('</g></svg>')).toBe(true);
+	});
+
+	it('preserves the outer <svg> tag attributes', () => {
+		const padded = padFaviconSvg(SIZED_SVG, 0.1);
+		expect(padded.startsWith('<svg width="512" height="512" viewBox="0 0 512 512"')).toBe(true);
+	});
+
+	it('returns the input unchanged for zero or negative padding', () => {
+		expect(padFaviconSvg(SIZED_SVG, 0)).toBe(SIZED_SVG);
+		expect(padFaviconSvg(SIZED_SVG, -0.1)).toBe(SIZED_SVG);
+	});
+
+	it('returns the input unchanged when padding would fully collapse the icon (>= 1)', () => {
+		expect(padFaviconSvg(SIZED_SVG, 1)).toBe(SIZED_SVG);
+		expect(padFaviconSvg(SIZED_SVG, 1.5)).toBe(SIZED_SVG);
+	});
+
+	it('returns the input unchanged when no viewBox is present', () => {
+		const noViewBox = '<svg width="32" height="32"><path d="M0 0Z"/></svg>';
+		expect(padFaviconSvg(noViewBox, 0.1)).toBe(noViewBox);
+	});
+
+	it('returns the input unchanged when viewBox values are not finite numbers', () => {
+		const bad = '<svg viewBox="auto auto 0 0"><path/></svg>';
+		expect(padFaviconSvg(bad, 0.1)).toBe(bad);
+	});
+
+	it('tolerates a non-square viewBox', () => {
+		const wide = '<svg viewBox="0 0 100 50"><rect/></svg>';
+		const padded = padFaviconSvg(wide, 0.1);
+		// scale 0.9, translate (5, 2.5)
+		expect(padded).toContain('transform="translate(5 2.5) scale(0.9)"');
+	});
+});
+
+describe('writeThemeFavicons', () => {
+	const LOGO =
+		'<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">' +
+		'<path d="M244.95 8L388.923 8Z" fill="currentColor"/>' +
+		'</svg>';
+
+	let tmpDir: string;
+
+	beforeEach(() => {
+		tmpDir = mkdtempSync(join(tmpdir(), 'favicon-'));
+	});
+
+	afterEach(() => {
+		rmSync(tmpDir, { recursive: true, force: true });
+	});
+
+	function setupSource() {
+		const sourcePath = join(tmpDir, 'logo.svg');
+		writeFileSync(sourcePath, LOGO);
+		return {
+			sourcePath,
+			lightPath: join(tmpDir, 'favicon.svg'),
+			darkPath: join(tmpDir, 'favicon-dark.svg')
+		};
+	}
+
+	it('writes colorized, un-padded favicons without modifying the source', () => {
+		const { sourcePath, lightPath, darkPath } = setupSource();
+		const before = readFileSync(sourcePath, 'utf-8');
+
+		writeThemeFavicons('#abcdef', '#012345', {
+			sourcePath,
+			lightOutPath: lightPath,
+			darkOutPath: darkPath
+		});
+
+		const lightOut = readFileSync(lightPath, 'utf-8');
+		const darkOut = readFileSync(darkPath, 'utf-8');
+
+		// currentColor swapped to the requested palette in both files
+		expect(lightOut).toContain('fill="#abcdef"');
+		expect(lightOut).not.toContain('currentColor');
+		expect(darkOut).toContain('fill="#012345"');
+		expect(darkOut).not.toContain('currentColor');
+
+		// default padding (0) keeps the wrapper off the output
+		expect(lightOut).not.toContain('<g ');
+		expect(darkOut).not.toContain('<g ');
+
+		// source file is unchanged after the call
+		expect(readFileSync(sourcePath, 'utf-8')).toBe(before);
+	});
+
+	it('writes colorized favicons wrapped in a padding <g transform>...</g>', () => {
+		const { sourcePath, lightPath, darkPath } = setupSource();
+		// mirror the production wiring: PWA_ASSET_GENERATOR.FAVICON_PADDING
+		const padding = 0.04;
+		// scale = 1 - 0.04 = 0.96; translate = (0.04 * 512) / 2 = 10.24
+		const expectedTransform = 'transform="translate(10.24 10.24) scale(0.96)"';
+
+		writeThemeFavicons('#111111', '#fafafa', {
+			sourcePath,
+			lightOutPath: lightPath,
+			darkOutPath: darkPath,
+			padding
+		});
+
+		const lightOut = readFileSync(lightPath, 'utf-8');
+		const darkOut = readFileSync(darkPath, 'utf-8');
+
+		// both files get the same padding wrapper derived from the viewBox
+		expect(lightOut).toContain(`<g ${expectedTransform}>`);
+		expect(lightOut.endsWith('</g></svg>')).toBe(true);
+		expect(darkOut).toContain(`<g ${expectedTransform}>`);
+		expect(darkOut.endsWith('</g></svg>')).toBe(true);
+
+		// colorization still happens inside the wrapped group
+		expect(lightOut).toContain('fill="#111111"');
+		expect(lightOut).not.toContain('currentColor');
+		expect(darkOut).toContain('fill="#fafafa"');
+		expect(darkOut).not.toContain('currentColor');
+		// light palette colour must not leak into dark output
+		expect(darkOut).not.toContain('#111111');
+
+		// source file is not modified by the padding step
+		expect(readFileSync(sourcePath, 'utf-8')).toBe(LOGO);
+	});
+});
diff --git a/backend/llama.cpp/tools/ui/tests/unit/headers.test.ts b/backend/llama.cpp/tools/ui/tests/unit/headers.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..33619547c62025c76d1df05109fc3d33b44c96e0
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/unit/headers.test.ts
@@ -0,0 +1,126 @@
+import { describe, expect, it } from 'vitest';
+import { parseHeadersToArray, serializeHeaders } from '$lib/utils/headers';
+
+/**
+ * Tests for the header serialization helpers used by the MCP server form
+ * (custom header rows) and the new Authorization/Bearer-token flow.
+ */
+describe('parseHeadersToArray', () => {
+	it('returns an empty array for empty or whitespace-only input', () => {
+		expect(parseHeadersToArray('')).toEqual([]);
+		expect(parseHeadersToArray('   ')).toEqual([]);
+		expect(parseHeadersToArray(undefined as unknown as string)).toEqual([]);
+	});
+
+	it('returns an empty array for invalid JSON input', () => {
+		expect(parseHeadersToArray('{not-json')).toEqual([]);
+		expect(parseHeadersToArray('[]')).toEqual([]);
+		expect(parseHeadersToArray('"plain-string"')).toEqual([]);
+	});
+
+	it('converts an object into ordered key/value pairs', () => {
+		expect(parseHeadersToArray('{"X-Foo":"bar","Authorization":"Bearer abc"}')).toEqual([
+			{ key: 'X-Foo', value: 'bar' },
+			{ key: 'Authorization', value: 'Bearer abc' }
+		]);
+	});
+
+	it('stringifies non-string values', () => {
+		expect(parseHeadersToArray('{"count":"42","flag":"true"}')).toEqual([
+			{ key: 'count', value: '42' },
+			{ key: 'flag', value: 'true' }
+		]);
+	});
+});
+
+describe('serializeHeaders', () => {
+	it('returns an empty string when there are no valid pairs', () => {
+		expect(serializeHeaders([])).toBe('');
+		expect(serializeHeaders([{ key: '', value: 'value' }])).toBe('');
+		expect(serializeHeaders([{ key: '   ', value: 'value' }])).toBe('');
+	});
+
+	it('returns an empty string when every pair has a blank key', () => {
+		expect(
+			serializeHeaders([
+				{ key: '', value: 'drop-me' },
+				{ key: '   ', value: 'drop-me-too' },
+				{ key: '\t', value: 'tab-key' }
+			])
+		).toBe('');
+	});
+
+	it('drops pairs with empty keys but keeps the rest', () => {
+		expect(
+			serializeHeaders([
+				{ key: '', value: 'drop-me' },
+				{ key: 'X-Keep', value: 'ok' }
+			])
+		).toBe('{"X-Keep":"ok"}');
+	});
+
+	it('trims keys before serializing', () => {
+		expect(serializeHeaders([{ key: '  X-Space  ', value: 'ok' }])).toBe('{"X-Space":"ok"}');
+	});
+
+	it('preserves the input order of surviving pairs', () => {
+		const serialized = serializeHeaders([
+			{ key: 'X-C', value: '3' },
+			{ key: 'X-A', value: '1' },
+			{ key: 'X-B', value: '2' }
+		]);
+
+		// Object key order follows insertion order in modern JS engines, so
+		// the serialized JSON writes keys in our input order.
+		expect(JSON.parse(serialized)).toEqual({ 'X-C': '3', 'X-A': '1', 'X-B': '2' });
+	});
+});
+
+describe('parseHeadersToArray / serializeHeaders roundtrip', () => {
+	it('serializes back to an equal header object after a parse', () => {
+		const original = JSON.stringify({
+			'Content-Type': 'application/json',
+			'X-Trace-Id': 'abc-123'
+		});
+
+		const roundtrip = serializeHeaders(parseHeadersToArray(original));
+
+		expect(JSON.parse(roundtrip)).toEqual(JSON.parse(original));
+	});
+
+	it('drops rows whose keys are blank after trimming during serialization', () => {
+		const pairs = parseHeadersToArray('{"X-Keep":"ok","":"drop-me"}');
+
+		// parseHeadersToArray keeps raw key strings (the consumer is expected to
+		// filter blanks, not the parser); serialization must strip them.
+		expect(pairs).toEqual([
+			{ key: 'X-Keep', value: 'ok' },
+			{ key: '', value: 'drop-me' }
+		]);
+		expect(serializeHeaders(pairs)).toBe('{"X-Keep":"ok"}');
+	});
+
+	it('preserves upstream keys untouched (does not lowercase them)', () => {
+		const upperCased = '{"Authorization":"Bearer xyz"}';
+
+		const parsed = parseHeadersToArray(upperCased);
+
+		expect(parsed).toEqual([{ key: 'Authorization', value: 'Bearer xyz' }]);
+	});
+
+	it('bearer-token write survives a re-parse when paired with regular custom headers', () => {
+		// The McpServerForm bearer UI writes {Authorization: `Bearer <token>`}
+		// into the same headers string as the custom KV section. The round
+		// trip below mirrors the exact shape the form produces so a future
+		// refactor of either code path cannot silently change the on-disk key.
+		const pairs = [
+			{ key: 'X-Trace-Id', value: 'abc-123' },
+			{ key: 'Authorization', value: 'Bearer super-secret' }
+		];
+
+		const serialized = serializeHeaders(pairs);
+
+		expect(serialized).toBe('{"X-Trace-Id":"abc-123","Authorization":"Bearer super-secret"}');
+		expect(parseHeadersToArray(serialized)).toEqual(pairs);
+	});
+});
diff --git a/backend/llama.cpp/tools/ui/tests/unit/jpeg-orientation.test.ts b/backend/llama.cpp/tools/ui/tests/unit/jpeg-orientation.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b1ad4777d92b7846e9911852ab0c3cfa0c964d5d
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/unit/jpeg-orientation.test.ts
@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest';
+import { getJpegOrientationFromDataURL, isJpegMimeType } from '$lib/utils/jpeg-orientation';
+
+// Builds the TIFF payload of an APP1 segment holding a single IFD0 entry
+function buildTiff(littleEndian: boolean, tag: number, value: number): number[] {
+	const u16 = (v: number) => (littleEndian ? [v & 0xff, v >> 8] : [v >> 8, v & 0xff]);
+	const u32 = (v: number) =>
+		littleEndian
+			? [v & 0xff, (v >> 8) & 0xff, (v >> 16) & 0xff, (v >> 24) & 0xff]
+			: [(v >> 24) & 0xff, (v >> 16) & 0xff, (v >> 8) & 0xff, v & 0xff];
+
+	return [
+		...(littleEndian ? [0x49, 0x49] : [0x4d, 0x4d]),
+		...u16(42),
+		...u32(8),
+		...u16(1),
+		...u16(tag),
+		...u16(3),
+		...u32(1),
+		// SHORT value sits left justified in the 4 byte value field
+		...u16(value),
+		...u16(0),
+		...u32(0)
+	];
+}
+
+// Wraps a TIFF payload into a complete minimal JPEG data URL
+function buildJpegDataURL(tiff: number[] | null, prependApp0 = false): string {
+	const bytes: number[] = [0xff, 0xd8];
+
+	if (prependApp0) {
+		// JFIF APP0 segment, irrelevant content the parser walks over
+		bytes.push(0xff, 0xe0, 0x00, 0x07, 0x4a, 0x46, 0x49, 0x46, 0x00);
+	}
+
+	if (tiff) {
+		const payload = [0x45, 0x78, 0x69, 0x66, 0x00, 0x00, ...tiff];
+		const length = payload.length + 2;
+		bytes.push(0xff, 0xe1, length >> 8, length & 0xff, ...payload);
+	}
+
+	// SOS marker terminates the metadata scan
+	bytes.push(0xff, 0xda, 0x00, 0x02);
+
+	return `data:image/jpeg;base64,${btoa(String.fromCharCode(...bytes))}`;
+}
+
+describe('getJpegOrientationFromDataURL', () => {
+	it('returns the orientation from a little endian EXIF block', () => {
+		expect(getJpegOrientationFromDataURL(buildJpegDataURL(buildTiff(true, 0x0112, 6)))).toBe(6);
+	});
+
+	it('returns the orientation from a big endian EXIF block', () => {
+		expect(getJpegOrientationFromDataURL(buildJpegDataURL(buildTiff(false, 0x0112, 8)))).toBe(8);
+	});
+
+	it('walks over a leading APP0 segment', () => {
+		expect(getJpegOrientationFromDataURL(buildJpegDataURL(buildTiff(true, 0x0112, 3), true))).toBe(
+			3
+		);
+	});
+
+	it('returns 1 when the EXIF block holds no orientation tag', () => {
+		expect(getJpegOrientationFromDataURL(buildJpegDataURL(buildTiff(true, 0x0100, 6)))).toBe(1);
+	});
+
+	it('returns 1 when the orientation value is out of range', () => {
+		expect(getJpegOrientationFromDataURL(buildJpegDataURL(buildTiff(true, 0x0112, 9)))).toBe(1);
+	});
+
+	it('returns 1 when the JPEG has no APP1 segment', () => {
+		expect(getJpegOrientationFromDataURL(buildJpegDataURL(null, true))).toBe(1);
+	});
+
+	it('returns 1 for a payload that is not a JPEG', () => {
+		const png = btoa(String.fromCharCode(0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a));
+		expect(getJpegOrientationFromDataURL(`data:image/png;base64,${png}`)).toBe(1);
+	});
+
+	it('returns 1 for a truncated payload', () => {
+		const truncated = btoa(String.fromCharCode(0xff, 0xd8, 0xff));
+		expect(getJpegOrientationFromDataURL(`data:image/jpeg;base64,${truncated}`)).toBe(1);
+	});
+
+	it('returns 1 for a malformed data URL', () => {
+		expect(getJpegOrientationFromDataURL('not a data url')).toBe(1);
+	});
+});
+
+describe('isJpegMimeType', () => {
+	it('matches both JPEG MIME variants', () => {
+		expect(isJpegMimeType('image/jpeg')).toBe(true);
+		expect(isJpegMimeType('image/jpg')).toBe(true);
+	});
+
+	it('rejects other image MIME types', () => {
+		expect(isJpegMimeType('image/png')).toBe(false);
+		expect(isJpegMimeType('image/webp')).toBe(false);
+	});
+});
diff --git a/backend/llama.cpp/tools/ui/tests/unit/latex-protection.test.ts b/backend/llama.cpp/tools/ui/tests/unit/latex-protection.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..84328dbc17a64cb7c7360218ba7ab918cb16f460
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/unit/latex-protection.test.ts
@@ -0,0 +1,376 @@
+/* eslint-disable no-irregular-whitespace */
+import { describe, it, expect, test } from 'vitest';
+import { maskInlineLaTeX, preprocessLaTeX } from '$lib/utils/latex-protection';
+
+describe('maskInlineLaTeX', () => {
+	it('should protect LaTeX $x + y$ but not money $3.99', () => {
+		const latexExpressions: string[] = [];
+		const input = 'I have $10, $3.99 and $x + y$ and $100x$. The amount is $2,000.';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('I have $10, $3.99 and <<LATEX_0>> and <<LATEX_1>>. The amount is $2,000.');
+		expect(latexExpressions).toEqual(['$x + y$', '$100x$']);
+	});
+
+	it('should ignore money like $5 and $12.99', () => {
+		const latexExpressions: string[] = [];
+		const input = 'Prices are $12.99 and $5. Tax?';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('Prices are $12.99 and $5. Tax?');
+		expect(latexExpressions).toEqual([]);
+	});
+
+	it('should protect inline math $a^2 + b^2$ even after text', () => {
+		const latexExpressions: string[] = [];
+		const input = 'Pythagorean: $a^2 + b^2 = c^2$.';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('Pythagorean: <<LATEX_0>>.');
+		expect(latexExpressions).toEqual(['$a^2 + b^2 = c^2$']);
+	});
+
+	it('should not protect math that has letter after closing $ (e.g. units)', () => {
+		const latexExpressions: string[] = [];
+		const input = 'The cost is $99 and change.';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('The cost is $99 and change.');
+		expect(latexExpressions).toEqual([]);
+	});
+
+	it('should allow $x$ followed by punctuation', () => {
+		const latexExpressions: string[] = [];
+		const input = 'We know $x$, right?';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('We know <<LATEX_0>>, right?');
+		expect(latexExpressions).toEqual(['$x$']);
+	});
+
+	it('should work across multiple lines', () => {
+		const latexExpressions: string[] = [];
+		const input = `Emma buys cupcakes for $3 each.\nHow much is $x + y$?`;
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe(`Emma buys cupcakes for $3 each.\nHow much is <<LATEX_0>>?`);
+		expect(latexExpressions).toEqual(['$x + y$']);
+	});
+
+	it('should not protect $100 but protect $matrix$', () => {
+		const latexExpressions: string[] = [];
+		const input = '$100 and $\\mathrm{GL}_2(\\mathbb{F}_7)$ are different.';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('$100 and <<LATEX_0>> are different.');
+		expect(latexExpressions).toEqual(['$\\mathrm{GL}_2(\\mathbb{F}_7)$']);
+	});
+
+	it('should skip if $ is followed by digit and alphanumeric after close (money)', () => {
+		const latexExpressions: string[] = [];
+		const input = 'I paid $5 quickly.';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('I paid $5 quickly.');
+		expect(latexExpressions).toEqual([]);
+	});
+
+	it('should protect LaTeX even with special chars inside', () => {
+		const latexExpressions: string[] = [];
+		const input = 'Consider $\\alpha_1 + \\beta_2$ now.';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('Consider <<LATEX_0>> now.');
+		expect(latexExpressions).toEqual(['$\\alpha_1 + \\beta_2$']);
+	});
+
+	it('short text', () => {
+		const latexExpressions: string[] = ['$0$'];
+		const input = '$a$\n$a$ and $b$';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('<<LATEX_1>>\n<<LATEX_2>> and <<LATEX_3>>');
+		expect(latexExpressions).toEqual(['$0$', '$a$', '$a$', '$b$']);
+	});
+
+	it('empty text', () => {
+		const latexExpressions: string[] = [];
+		const input = '$\n$$\n';
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe('$\n$$\n');
+		expect(latexExpressions).toEqual([]);
+	});
+
+	it('LaTeX-spacer preceded by backslash', () => {
+		const latexExpressions: string[] = [];
+		const input = `\\[
+\\boxed{
+\\begin{aligned}
+N_{\\text{att}}^{\\text{(MHA)}} &=
+h \\bigl[\\, d_{\\text{model}}\\;d_{k} + d_{\\text{model}}\\;d_{v}\\, \\bigr]   && (\\text{Q,K,V の重み})\\\\
+&\\quad+ h(d_{k}+d_{k}+d_{v})                                          && (\\text{バイアス Q,K,V）}\\\\[4pt]
+&\\quad+ (h d_{v})\\, d_{\\text{model}}                                 && (\\text{出力射影 }W^{O})\\\\
+&\\quad+ d_{\\text{model}}                                            && (\\text{バイアス }b^{O})
+\\end{aligned}}
+\\]`;
+		const output = maskInlineLaTeX(input, latexExpressions);
+
+		expect(output).toBe(input);
+		expect(latexExpressions).toEqual([]);
+	});
+});
+
+describe('preprocessLaTeX', () => {
+	test('converts inline \\( ... \\) to $...$', () => {
+		const input =
+			'\\( \\mathrm{GL}_2(\\mathbb{F}_7) \\): Group of invertible matrices with entries in \\(\\mathbb{F}_7\\).';
+		const output = preprocessLaTeX(input);
+		expect(output).toBe(
+			'$ \\mathrm{GL}_2(\\mathbb{F}_7) $: Group of invertible matrices with entries in $\\mathbb{F}_7$.'
+		);
+	});
+
+	test("don't inline \\\\( ... \\) to $...$", () => {
+		const input =
+			'Chapter 20 of The TeXbook, in source "Definitions\\\\(also called Macros)", containst the formula \\((x_1,\\ldots,x_n)\\).';
+		const output = preprocessLaTeX(input);
+		expect(output).toBe(
+			'Chapter 20 of The TeXbook, in source "Definitions\\\\(also called Macros)", containst the formula $(x_1,\\ldots,x_n)$.'
+		);
+	});
+
+	test('preserves display math \\[ ... \\] and protects adjacent text', () => {
+		const input = `Some kernel of \\(\\mathrm{SL}_2(\\mathbb{F}_7)\\):
+  \\[
+  \\left\\{ \\begin{pmatrix} 1 & 0 \\\\ 0 & 1 \\end{pmatrix}, \\begin{pmatrix} -1 & 0 \\\\ 0 & -1 \\end{pmatrix} \\right\\} = \\{\\pm I\\}
+  \\]`;
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(`Some kernel of $\\mathrm{SL}_2(\\mathbb{F}_7)$:
+  $$
+  \\left\\{ \\begin{pmatrix} 1 & 0 \\\\ 0 & 1 \\end{pmatrix}, \\begin{pmatrix} -1 & 0 \\\\ 0 & -1 \\end{pmatrix} \\right\\} = \\{\\pm I\\}
+  $$`);
+	});
+
+	test('handles standalone display math equation', () => {
+		const input = `Algebra:
+\\[
+x = \\frac{-b \\pm \\sqrt{\\,b^{2}-4ac\\,}}{2a}
+\\]`;
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(`Algebra:
+$$
+x = \\frac{-b \\pm \\sqrt{\\,b^{2}-4ac\\,}}{2a}
+$$`);
+	});
+
+	test('does not interpret currency values as LaTeX', () => {
+		const input = 'I have $10, $3.99 and $x + y$ and $100x$. The amount is $2,000.';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe('I have \\$10, \\$3.99 and $x + y$ and $100x$. The amount is \\$2,000.');
+	});
+
+	test('ignores dollar signs followed by digits (money), but keeps valid math $x + y$', () => {
+		const input = 'I have $10, $3.99 and $x + y$ and $100x$. The amount is $2,000.';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe('I have \\$10, \\$3.99 and $x + y$ and $100x$. The amount is \\$2,000.');
+	});
+
+	test('handles real-world word problems with amounts and no math delimiters', () => {
+		const input =
+			'Emma buys 2 cupcakes for $3 each and 1 cookie for $1.50. How much money does she spend in total?';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(
+			'Emma buys 2 cupcakes for \\$3 each and 1 cookie for \\$1.50. How much money does she spend in total?'
+		);
+	});
+
+	test('handles decimal amounts in word problem correctly', () => {
+		const input =
+			'Maria has $20. She buys a notebook for $4.75 and a pack of pencils for $3.25. How much change does she receive?';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(
+			'Maria has \\$20. She buys a notebook for \\$4.75 and a pack of pencils for \\$3.25. How much change does she receive?'
+		);
+	});
+
+	test('preserves display math with surrounding non-ASCII text', () => {
+		const input = `1 kg の質量は
+  \\[
+  E = (1\\ \\text{kg}) \\times (3.0 \\times 10^8\\ \\text{m/s})^2 \\approx 9.0 \\times 10^{16}\\ \\text{J}
+  \\]
+  というエネルギーに相当します。これは約 21 百万トンの TNT が爆発したときのエネルギーに匹敵します。`;
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(
+			`1 kg の質量は
+  $$
+  E = (1\\ \\text{kg}) \\times (3.0 \\times 10^8\\ \\text{m/s})^2 \\approx 9.0 \\times 10^{16}\\ \\text{J}
+  $$
+  というエネルギーに相当します。これは約 21 百万トンの TNT が爆発したときのエネルギーに匹敵します。`
+		);
+	});
+
+	test('LaTeX-spacer preceded by backslash', () => {
+		const input = `\\[
+\\boxed{
+\\begin{aligned}
+N_{\\text{att}}^{\\text{(MHA)}} &=
+h \\bigl[\\, d_{\\text{model}}\\;d_{k} + d_{\\text{model}}\\;d_{v}\\, \\bigr]   && (\\text{Q,K,V の重み})\\\\
+&\\quad+ h(d_{k}+d_{k}+d_{v})                                          && (\\text{バイアス Q,K,V）}\\\\[4pt]
+&\\quad+ (h d_{v})\\, d_{\\text{model}}                                 && (\\text{出力射影 }W^{O})\\\\
+&\\quad+ d_{\\text{model}}                                            && (\\text{バイアス }b^{O})
+\\end{aligned}}
+\\]`;
+		const output = preprocessLaTeX(input);
+		expect(output).toBe(
+			`$$
+\\boxed{
+\\begin{aligned}
+N_{\\text{att}}^{\\text{(MHA)}} &=
+h \\bigl[\\, d_{\\text{model}}\\;d_{k} + d_{\\text{model}}\\;d_{v}\\, \\bigr]   && (\\text{Q,K,V の重み})\\\\
+&\\quad+ h(d_{k}+d_{k}+d_{v})                                          && (\\text{バイアス Q,K,V）}\\\\[4pt]
+&\\quad+ (h d_{v})\\, d_{\\text{model}}                                 && (\\text{出力射影 }W^{O})\\\\
+&\\quad+ d_{\\text{model}}                                            && (\\text{バイアス }b^{O})
+\\end{aligned}}
+$$`
+		);
+	});
+
+	test('converts \\[ ... \\] even when preceded by text without space', () => {
+		const input = 'Some line ...\nAlgebra: \\[x = \\frac{-b \\pm \\sqrt{\\,b^{2}-4ac\\,}}{2a}\\]';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(
+			'Some line ...\nAlgebra: \n$$x = \\frac{-b \\pm \\sqrt{\\,b^{2}-4ac\\,}}{2a}$$\n'
+		);
+	});
+
+	test('converts \\[ ... \\] in table-cells', () => {
+		const input = `| ID | Expression |\n| #1 | \\[
+			x = \\frac{-b \\pm \\sqrt{\\,b^{2}-4ac\\,}}{2a}
+\\] |`;
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(
+			'| ID | Expression |\n| #1 | $x = \\frac{-b \\pm \\sqrt{\\,b^{2}-4ac\\,}}{2a}$ |'
+		);
+	});
+
+	test('escapes isolated $ before digits ($5 → \\$5), but not valid math', () => {
+		const input = 'This costs $5 and this is math $x^2$. $100 is money.';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe('This costs \\$5 and this is math $x^2$. \\$100 is money.');
+		// Note: Since $x^2$ is detected as valid LaTeX, it's preserved.
+		// $5 becomes \$5 only *after* real math is masked — but here it's correct because the masking logic avoids treating $5 as math.
+	});
+
+	test('display with LaTeX-line-breaks', () => {
+		const input = String.raw`- Algebraic topology, Homotopy Groups of $\mathbb{S}^3$:
+$$\pi_n(\mathbb{S}^3) = \begin{cases}
+\mathbb{Z} & n = 3 \\
+0 & n > 3, n \neq 4 \\
+\mathbb{Z}_2 & n = 4 \\
+\end{cases}$$`;
+		const output = preprocessLaTeX(input);
+		// If the formula contains '\\' the $$-delimiters should be in their own line.
+		expect(output).toBe(`- Algebraic topology, Homotopy Groups of $\\mathbb{S}^3$:
+$$\n\\pi_n(\\mathbb{S}^3) = \\begin{cases}
+\\mathbb{Z} & n = 3 \\\\
+0 & n > 3, n \\neq 4 \\\\
+\\mathbb{Z}_2 & n = 4 \\\\
+\\end{cases}\n$$`);
+	});
+
+	test('handles mhchem notation safely if present', () => {
+		const input = 'Chemical reaction: \\( \\ce{H2O} \\) and $\\ce{CO2}$';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe('Chemical reaction: $ \\ce{H2O} $ and $\\ce{CO2}$');
+	});
+
+	test('preserves code blocks', () => {
+		const input = 'Inline code: `sum $total` and block:\n```\ndollar $amount\n```\nEnd.';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(input); // Code blocks prevent misinterpretation
+	});
+
+	test('preserves backslash parentheses in code blocks (GitHub issue)', () => {
+		const input = '```python\nfoo = "\\(bar\\)"\n```';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(input); // Code blocks should not have LaTeX conversion applied
+	});
+
+	test('preserves backslash brackets in code blocks', () => {
+		const input = '```python\nfoo = "\\[bar\\]"\n```';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(input); // Code blocks should not have LaTeX conversion applied
+	});
+
+	test('preserves backslash parentheses in inline code', () => {
+		const input = 'Use `foo = "\\(bar\\)"` in your code.';
+		const output = preprocessLaTeX(input);
+
+		expect(output).toBe(input);
+	});
+
+	test('escape backslash in mchem ce', () => {
+		const input = 'mchem ce:\n$\\ce{2H2(g) + O2(g) -> 2H2O(l)}$';
+		const output = preprocessLaTeX(input);
+
+		// mhchem-escape would insert a backslash here.
+		expect(output).toBe('mchem ce:\n$\\ce{2H2(g) + O2(g) -> 2H2O(l)}$');
+	});
+
+	test('escape backslash in mchem pu', () => {
+		const input = 'mchem pu:\n$\\pu{-572 kJ mol^{-1}}$';
+		const output = preprocessLaTeX(input);
+
+		// mhchem-escape would insert a backslash here.
+		expect(output).toBe('mchem pu:\n$\\pu{-572 kJ mol^{-1}}$');
+	});
+
+	test('LaTeX in blockquotes with display math', () => {
+		const input =
+			'> **Definition (limit):**  \n>  \\[\n>  \\lim_{x\\to a} f(x) = L\n>  \\]\n>  means that as \\(x\\) gets close to \\(a\\).';
+		const output = preprocessLaTeX(input);
+
+		// Blockquote markers should be preserved, LaTeX should be converted
+		expect(output).toContain('> **Definition (limit):**');
+		expect(output).toContain('$$');
+		expect(output).toContain('$x$');
+		expect(output).not.toContain('\\[');
+		expect(output).not.toContain('\\]');
+		expect(output).not.toContain('\\(');
+		expect(output).not.toContain('\\)');
+	});
+
+	test('LaTeX in blockquotes with inline math', () => {
+		const input =
+			"> The derivative \\(f'(x)\\) at point \\(x=a\\) measures slope.\n> Formula: \\(f'(a)=\\lim_{h\\to 0}\\frac{f(a+h)-f(a)}{h}\\)";
+		const output = preprocessLaTeX(input);
+
+		// Blockquote markers should be preserved, inline LaTeX converted to $...$
+		expect(output).toContain("> The derivative $f'(x)$ at point $x=a$ measures slope.");
+		expect(output).toContain("> Formula: $f'(a)=\\lim_{h\\to 0}\\frac{f(a+h)-f(a)}{h}$");
+	});
+
+	test('Mixed content with blockquotes and regular text', () => {
+		const input =
+			'Regular text with \\(x^2\\).\n\n> Quote with \\(y^2\\).\n\nMore text with \\(z^2\\).';
+		const output = preprocessLaTeX(input);
+
+		// All LaTeX should be converted, blockquote markers preserved
+		expect(output).toBe('Regular text with $x^2$.\n\n> Quote with $y^2$.\n\nMore text with $z^2$.');
+	});
+});
diff --git a/backend/llama.cpp/tools/ui/tests/unit/mcp-default-overrides-merge.test.ts b/backend/llama.cpp/tools/ui/tests/unit/mcp-default-overrides-merge.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ce721ca6cd943ac0152347a4337a48af60260829
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/unit/mcp-default-overrides-merge.test.ts
@@ -0,0 +1,158 @@
+import { afterEach, beforeAll, beforeEach, describe, expect, it } from 'vitest';
+import { STORAGE_APP_NAME, CONFIG_LOCALSTORAGE_KEY } from '$lib/constants';
+
+// node env unit project has no DOM, install a minimal localStorage backed by a Map
+beforeAll(() => {
+	const store = new Map<string, string>();
+	const polyfill: Storage = {
+		get length() {
+			return store.size;
+		},
+		clear: () => store.clear(),
+		getItem: (k) => (store.has(k) ? store.get(k)! : null),
+		key: (i) => Array.from(store.keys())[i] ?? null,
+		removeItem: (k) => {
+			store.delete(k);
+		},
+		setItem: (k, v) => {
+			store.set(k, String(v));
+		}
+	};
+	(globalThis as unknown as { localStorage: Storage }).localStorage = polyfill;
+});
+
+/**
+ * Migration `mcp-default-overrides-merge-v1` folds the values of the parallel
+ * `mcpDefaultServerOverrides` config entry onto `mcpServers[i].enabled` (the
+ * single source of truth for new-chat defaults). The legacy key is kept on
+ * disk for downgrade compatibility.
+ */
+describe('mcp-default-overrides-merge-v1 migration', () => {
+	const MIGRATION_STATE_KEY = `${STORAGE_APP_NAME}.migration-state`;
+	const MCP_DEFAULT_OVERRIDES_KEY = `${STORAGE_APP_NAME}.mcpDefaultServerOverrides`;
+
+	beforeEach(async () => {
+		localStorage.clear();
+		// Reset the migration run counter so `runAllMigrations` is guaranteed to execute.
+		await import('$lib/services/migration.service').then((mod) =>
+			mod.MigrationService.resetState()
+		);
+	});
+
+	afterEach(() => {
+		localStorage.clear();
+	});
+
+	async function runMigrations() {
+		const { MigrationService } = await import('$lib/services/migration.service');
+		await MigrationService.runAllMigrations();
+	}
+
+	function readConfig(): Record<string, unknown> {
+		const raw = localStorage.getItem(CONFIG_LOCALSTORAGE_KEY);
+
+		return raw ? (JSON.parse(raw) as Record<string, unknown>) : {};
+	}
+
+	function writeConfig(config: Record<string, unknown>) {
+		localStorage.setItem(CONFIG_LOCALSTORAGE_KEY, JSON.stringify(config));
+	}
+
+	it('applies matching overrides onto mcpServers[i].enabled and preserves the legacy key', async () => {
+		writeConfig({
+			mcpServers: JSON.stringify([
+				{ id: 'exa', enabled: false, url: 'https://mcp.exa.ai/mcp' },
+				{ id: 'hf', enabled: false, url: 'https://huggingface.co/mcp' }
+			]),
+			[MCP_DEFAULT_OVERRIDES_KEY]: JSON.stringify([
+				{ serverId: 'exa', enabled: true },
+				{ serverId: 'hf', enabled: false }
+			])
+		});
+
+		await runMigrations();
+
+		const after = readConfig();
+		const servers = JSON.parse(after.mcpServers as string) as Array<{
+			id: string;
+			enabled: boolean;
+		}>;
+
+		expect(servers.find((s) => s.id === 'exa')?.enabled).toBe(true);
+		expect(servers.find((s) => s.id === 'hf')?.enabled).toBe(false);
+		expect(MCP_DEFAULT_OVERRIDES_KEY in after).toBe(true);
+	});
+
+	it('skips override ids that do not match any configured server', async () => {
+		writeConfig({
+			mcpServers: JSON.stringify([{ id: 'exa', enabled: false, url: 'https://mcp.exa.ai/mcp' }]),
+			[MCP_DEFAULT_OVERRIDES_KEY]: JSON.stringify([
+				{ serverId: 'orphan', enabled: true },
+				{ serverId: 'exa', enabled: true }
+			])
+		});
+
+		await runMigrations();
+
+		const after = readConfig();
+		const servers = JSON.parse(after.mcpServers as string) as Array<{
+			id: string;
+			enabled: boolean;
+		}>;
+
+		expect(servers).toHaveLength(1);
+		expect(servers[0].enabled).toBe(true);
+		expect(MCP_DEFAULT_OVERRIDES_KEY in after).toBe(true);
+	});
+
+	it('is a no-op when there are no legacy overrides', async () => {
+		writeConfig({
+			mcpServers: JSON.stringify([{ id: 'exa', enabled: true, url: 'https://mcp.exa.ai/mcp' }])
+		});
+
+		await runMigrations();
+
+		const after = readConfig();
+		const servers = JSON.parse(after.mcpServers as string) as Array<{
+			id: string;
+			enabled: boolean;
+		}>;
+
+		expect(servers[0].enabled).toBe(true);
+		expect(MCP_DEFAULT_OVERRIDES_KEY in after).toBe(false);
+	});
+
+	it('does not rewrite mcpServers when override.enabled already matches', async () => {
+		const originalServers = JSON.stringify([
+			{ id: 'exa', enabled: true, url: 'https://mcp.exa.ai/mcp' }
+		]);
+
+		writeConfig({
+			mcpServers: originalServers,
+			[MCP_DEFAULT_OVERRIDES_KEY]: JSON.stringify([{ serverId: 'exa', enabled: true }])
+		});
+
+		await runMigrations();
+
+		const after = readConfig();
+		expect(after.mcpServers).toBe(originalServers);
+		expect(MCP_DEFAULT_OVERRIDES_KEY in after).toBe(true);
+	});
+
+	it('records itself as completed so subsequent loads do not re-run', async () => {
+		writeConfig({
+			mcpServers: JSON.stringify([{ id: 'exa', enabled: false, url: 'https://mcp.exa.ai/mcp' }]),
+			[MCP_DEFAULT_OVERRIDES_KEY]: JSON.stringify([{ serverId: 'exa', enabled: true }])
+		});
+
+		const { MigrationService } = await import('$lib/services/migration.service');
+
+		await MigrationService.runAllMigrations();
+
+		const stateRaw = localStorage.getItem(MIGRATION_STATE_KEY);
+		expect(stateRaw).not.toBeNull();
+		const state = JSON.parse(stateRaw!) as { completed: string[]; failed: string[] };
+		expect(state.completed).toContain('mcp-default-overrides-merge-v1');
+		expect(state.failed).not.toContain('mcp-default-overrides-merge-v1');
+	});
+});
diff --git a/backend/llama.cpp/tools/ui/tests/unit/mcp-servers-default.test.ts b/backend/llama.cpp/tools/ui/tests/unit/mcp-servers-default.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..35eec6fb7967cbb06f06f69512f22537a218cd36
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/unit/mcp-servers-default.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+import { SETTINGS_KEYS } from '$lib/constants/settings-keys';
+
+/**
+ * Default-value policy for the `MCP_SERVERS` setting.
+ *
+ * Earlier versions of the UI preloaded a hard-coded list of suggested
+ * MCP servers into this setting on first install. That caused silent
+ * third-party HTTP requests at app load (see issue #25509) and a popup
+ * "recommendation" dialog (see issue #25274). New users must now opt
+ * in explicitly when adding a server, so the default is an empty list.
+ */
+describe('MCP_SERVERS default value', () => {
+	it('does not preload any servers in the MCP_SERVERS setting default', async () => {
+		const { SETTING_CONFIG_DEFAULT } = await import('$lib/constants/settings-registry');
+
+		expect(SETTING_CONFIG_DEFAULT[SETTINGS_KEYS.MCP_SERVERS]).toBe('[]');
+	}, 15000);
+});
diff --git a/backend/llama.cpp/tools/ui/tests/unit/mcp-service.test.ts b/backend/llama.cpp/tools/ui/tests/unit/mcp-service.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d3af906813aaed68e38785223c39968331dcb333
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/unit/mcp-service.test.ts
@@ -0,0 +1,338 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Client } from '@modelcontextprotocol/sdk/client';
+import { MCPService } from '$lib/services/mcp.service';
+import { MCPConnectionPhase, MCPTransportType } from '$lib/enums';
+import type { MCPConnectionLog, MCPServerConfig } from '$lib/types';
+import { CORS_PROXY_HEADER_PREFIX } from '$lib/constants';
+
+type DiagnosticFetchFactory = (
+	serverName: string,
+	config: MCPServerConfig,
+	baseInit: RequestInit,
+	targetUrl: URL,
+	useProxy: boolean,
+	onLog?: (log: MCPConnectionLog) => void
+) => { fetch: typeof fetch; disable: () => void };
+
+const createDiagnosticFetch = (
+	config: MCPServerConfig,
+	onLog?: (log: MCPConnectionLog) => void,
+	baseInit: RequestInit = {},
+	useProxy = false
+) =>
+	(
+		MCPService as unknown as { createDiagnosticFetch: DiagnosticFetchFactory }
+	).createDiagnosticFetch('test-server', config, baseInit, new URL(config.url), useProxy, onLog);
+
+describe('MCPService', () => {
+	afterEach(() => {
+		vi.restoreAllMocks();
+		vi.unstubAllGlobals();
+	});
+
+	it('stops transport phase logging after handshake diagnostics are disabled', async () => {
+		const logs: MCPConnectionLog[] = [];
+		const response = new Response('{}', {
+			status: 200,
+			headers: { 'content-type': 'application/json' }
+		});
+
+		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response));
+
+		const config: MCPServerConfig = {
+			url: 'https://example.com/mcp',
+			transport: MCPTransportType.STREAMABLE_HTTP
+		};
+
+		const controller = createDiagnosticFetch(config, (log) => logs.push(log));
+
+		await controller.fetch(config.url, { method: 'POST', body: '{}' });
+		expect(logs).toHaveLength(2);
+		expect(logs.every((log) => log.message.includes('https://example.com/mcp'))).toBe(true);
+
+		controller.disable();
+		await controller.fetch(config.url, { method: 'POST', body: '{}' });
+
+		expect(logs).toHaveLength(2);
+	});
+
+	it('redacts all configured custom headers in diagnostic request logs', async () => {
+		const logs: MCPConnectionLog[] = [];
+		const response = new Response('{}', {
+			status: 200,
+			headers: { 'content-type': 'application/json' }
+		});
+
+		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response));
+
+		const config: MCPServerConfig = {
+			url: 'https://example.com/mcp',
+			transport: MCPTransportType.STREAMABLE_HTTP,
+			headers: {
+				'x-auth-token': 'secret-token',
+				'x-vendor-api-key': 'secret-key'
+			}
+		};
+
+		const controller = createDiagnosticFetch(config, (log) => logs.push(log), {
+			headers: config.headers
+		});
+
+		await controller.fetch(config.url, {
+			method: 'POST',
+			headers: { 'content-type': 'application/json' },
+			body: '{}'
+		});
+
+		expect(logs).toHaveLength(2);
+		expect(logs[0].details).toMatchObject({
+			request: {
+				headers: {
+					'x-auth-token': '[redacted]',
+					'x-vendor-api-key': '[redacted]',
+					'content-type': 'application/json'
+				}
+			}
+		});
+	});
+
+	it('wraps dynamic request headers when using the CORS proxy', async () => {
+		const logs: MCPConnectionLog[] = [];
+		const proxiedAuthToken = `${CORS_PROXY_HEADER_PREFIX}x-auth-token`;
+		const proxiedContentType = `${CORS_PROXY_HEADER_PREFIX}content-type`;
+		const proxiedSessionId = `${CORS_PROXY_HEADER_PREFIX}mcp-session-id`;
+		const response = new Response('{}', {
+			status: 200,
+			headers: { 'content-type': 'application/json' }
+		});
+		const fetchMock = vi.fn().mockResolvedValue(response);
+
+		vi.stubGlobal('fetch', fetchMock);
+
+		const config: MCPServerConfig = {
+			url: 'https://example.com/mcp',
+			transport: MCPTransportType.STREAMABLE_HTTP,
+			useProxy: true
+		};
+
+		const controller = createDiagnosticFetch(
+			config,
+			(log) => logs.push(log),
+			{
+				headers: {
+					authorization: 'Bearer llama-server-key',
+					[proxiedAuthToken]: 'target-token'
+				}
+			},
+			true
+		);
+
+		await controller.fetch('http://localhost:8080/cors-proxy?url=https%3A%2F%2Fexample.com%2Fmcp', {
+			method: 'POST',
+			headers: {
+				'content-type': 'application/json',
+				'mcp-session-id': 'session-request-12345'
+			},
+			body: '{}'
+		});
+
+		const sentHeaders = fetchMock.mock.calls[0]?.[1]?.headers as Headers;
+		expect(sentHeaders.get('authorization')).toBe('Bearer llama-server-key');
+		expect(sentHeaders.get(proxiedAuthToken)).toBe('target-token');
+		expect(sentHeaders.get(proxiedContentType)).toBe('application/json');
+		expect(sentHeaders.get(proxiedSessionId)).toBe('session-request-12345');
+		expect(sentHeaders.has('content-type')).toBe(false);
+		expect(sentHeaders.has('mcp-session-id')).toBe(false);
+		expect(logs[0].details).toMatchObject({
+			request: {
+				headers: {
+					authorization: '[redacted]',
+					[proxiedAuthToken]: '[redacted]',
+					[proxiedSessionId]: '....12345'
+				}
+			}
+		});
+	});
+
+	it('DELETE request with CORS proxy should return a fake 200 response', async () => {
+		const logs: MCPConnectionLog[] = [];
+		const fetchMock = vi.fn();
+
+		vi.stubGlobal('fetch', fetchMock);
+
+		const config: MCPServerConfig = {
+			url: 'https://example.com/mcp',
+			transport: MCPTransportType.STREAMABLE_HTTP,
+			useProxy: true
+		};
+
+		const controller = createDiagnosticFetch(config, (log) => logs.push(log), {}, true);
+
+		const response = await controller.fetch(
+			'http://localhost:8080/cors-proxy?url=https%3A%2F%2Fexample.com%2Fmcp',
+			{ method: 'DELETE' }
+		);
+
+		expect(fetchMock).not.toHaveBeenCalled();
+		expect(response.status).toBe(200);
+		expect(logs.at(-1)?.details).toMatchObject({
+			response: { status: 200, isFake: true }
+		});
+	});
+
+	it('partially redacts mcp-session-id in diagnostic request and response logs', async () => {
+		const logs: MCPConnectionLog[] = [];
+		const response = new Response('{}', {
+			status: 200,
+			headers: {
+				'content-type': 'application/json',
+				'mcp-session-id': 'session-response-67890'
+			}
+		});
+
+		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response));
+
+		const config: MCPServerConfig = {
+			url: 'https://example.com/mcp',
+			transport: MCPTransportType.STREAMABLE_HTTP
+		};
+
+		const controller = createDiagnosticFetch(config, (log) => logs.push(log));
+
+		await controller.fetch(config.url, {
+			method: 'POST',
+			headers: {
+				'content-type': 'application/json',
+				'mcp-session-id': 'session-request-12345'
+			},
+			body: '{}'
+		});
+
+		expect(logs).toHaveLength(2);
+		expect(logs[0].details).toMatchObject({
+			request: {
+				headers: {
+					'content-type': 'application/json',
+					'mcp-session-id': '....12345'
+				}
+			}
+		});
+		expect(logs[1].details).toMatchObject({
+			response: {
+				headers: {
+					'content-type': 'application/json',
+					'mcp-session-id': '....67890'
+				}
+			}
+		});
+	});
+
+	it('extracts JSON-RPC methods without logging the raw request body', async () => {
+		const logs: MCPConnectionLog[] = [];
+		const response = new Response('{}', {
+			status: 200,
+			headers: { 'content-type': 'application/json' }
+		});
+
+		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response));
+
+		const config: MCPServerConfig = {
+			url: 'https://example.com/mcp',
+			transport: MCPTransportType.STREAMABLE_HTTP
+		};
+
+		const controller = createDiagnosticFetch(config, (log) => logs.push(log));
+
+		await controller.fetch(config.url, {
+			method: 'POST',
+			body: JSON.stringify([
+				{ jsonrpc: '2.0', id: 1, method: 'initialize' },
+				{ jsonrpc: '2.0', method: 'notifications/initialized' }
+			])
+		});
+
+		expect(logs[0].details).toMatchObject({
+			request: {
+				method: 'POST',
+				body: {
+					kind: 'string',
+					size: expect.any(Number)
+				},
+				jsonRpcMethods: ['initialize', 'notifications/initialized']
+			}
+		});
+	});
+
+	it('adds a CORS hint to Failed to fetch diagnostic log messages', async () => {
+		const logs: MCPConnectionLog[] = [];
+		const fetchError = new TypeError('Failed to fetch');
+
+		vi.stubGlobal('fetch', vi.fn().mockRejectedValue(fetchError));
+
+		const config: MCPServerConfig = {
+			url: 'http://localhost:8000/mcp',
+			transport: MCPTransportType.STREAMABLE_HTTP
+		};
+
+		const controller = createDiagnosticFetch(config, (log) => logs.push(log));
+
+		await expect(controller.fetch(config.url, { method: 'POST', body: '{}' })).rejects.toThrow(
+			'Failed to fetch'
+		);
+
+		expect(logs).toHaveLength(2);
+		expect(logs[1].message).toBe(
+			'HTTP POST http://localhost:8000/mcp failed: Failed to fetch (check CORS?)'
+		);
+	});
+
+	it('detaches phase error logging after the initialize handshake completes', async () => {
+		const phaseLogs: Array<{ phase: MCPConnectionPhase; log: MCPConnectionLog }> = [];
+		const stopPhaseLogging = vi.fn();
+		let emitClientError: ((error: Error) => void) | undefined;
+
+		vi.spyOn(MCPService, 'createTransport').mockReturnValue({
+			transport: {} as never,
+			type: MCPTransportType.WEBSOCKET,
+			stopPhaseLogging
+		});
+		vi.spyOn(MCPService, 'listTools').mockResolvedValue([]);
+		vi.spyOn(Client.prototype, 'getServerVersion').mockReturnValue(undefined);
+		vi.spyOn(Client.prototype, 'getServerCapabilities').mockReturnValue(undefined);
+		vi.spyOn(Client.prototype, 'getInstructions').mockReturnValue(undefined);
+		vi.spyOn(Client.prototype, 'connect').mockImplementation(async function (this: Client) {
+			emitClientError = (error: Error) => this.onerror?.(error);
+			this.onerror?.(new Error('handshake protocol error'));
+		});
+
+		await MCPService.connect(
+			'test-server',
+			{
+				url: 'ws://example.com/mcp',
+				transport: MCPTransportType.WEBSOCKET
+			},
+			undefined,
+			undefined,
+			(phase, log) => phaseLogs.push({ phase, log })
+		);
+
+		expect(stopPhaseLogging).toHaveBeenCalledTimes(1);
+		expect(
+			phaseLogs.filter(
+				({ phase, log }) =>
+					phase === MCPConnectionPhase.ERROR &&
+					log.message === 'Protocol error: handshake protocol error'
+			)
+		).toHaveLength(1);
+
+		emitClientError?.(new Error('runtime protocol error'));
+
+		expect(
+			phaseLogs.filter(
+				({ phase, log }) =>
+					phase === MCPConnectionPhase.ERROR &&
+					log.message === 'Protocol error: runtime protocol error'
+			)
+		).toHaveLength(0);
+	});
+});
diff --git a/backend/llama.cpp/tools/ui/tests/unit/model-id-parser.test.ts b/backend/llama.cpp/tools/ui/tests/unit/model-id-parser.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3c2937d35608771e64769c7540d67b623b2261f5
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/unit/model-id-parser.test.ts
@@ -0,0 +1,270 @@
+import { describe, expect, it } from 'vitest';
+import { ModelsService } from '$lib/services/models.service';
+
+const { parseModelId } = ModelsService;
+
+describe('parseModelId', () => {
+	it('handles unknown patterns correctly', () => {
+		expect(parseModelId('model-name-1')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'model-name-1',
+			orgName: null,
+			params: null,
+			quantization: null,
+			raw: 'model-name-1',
+			tags: []
+		});
+
+		expect(parseModelId('org/model-name-2')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'model-name-2',
+			orgName: 'org',
+			params: null,
+			quantization: null,
+			raw: 'org/model-name-2',
+			tags: []
+		});
+	});
+
+	it('extracts model parameters correctly', () => {
+		expect(parseModelId('model-100B-BF16')).toMatchObject({ params: '100B' });
+		expect(parseModelId('model-100B:Q4_K_M')).toMatchObject({ params: '100B' });
+	});
+
+	it('extracts model parameters correctly in lowercase', () => {
+		expect(parseModelId('model-100b-bf16')).toMatchObject({ params: '100B' });
+		expect(parseModelId('model-100b:q4_k_m')).toMatchObject({ params: '100B' });
+	});
+
+	it('extracts activated parameters correctly', () => {
+		expect(parseModelId('model-100B-A10B-BF16')).toMatchObject({ activatedParams: 'A10B' });
+		expect(parseModelId('model-100B-A10B:Q4_K_M')).toMatchObject({ activatedParams: 'A10B' });
+	});
+
+	it('extracts activated parameters correctly in lowercase', () => {
+		expect(parseModelId('model-100b-a10b-bf16')).toMatchObject({ activatedParams: 'A10B' });
+		expect(parseModelId('model-100b-a10b:q4_k_m')).toMatchObject({ activatedParams: 'A10B' });
+	});
+
+	it('extracts quantization correctly', () => {
+		// Dash-separated quantization
+		expect(parseModelId('model-100B-UD-IQ1_S')).toMatchObject({ quantization: 'UD-IQ1_S' });
+		expect(parseModelId('model-100B-IQ4_XS')).toMatchObject({ quantization: 'IQ4_XS' });
+		expect(parseModelId('model-100B-Q4_K_M')).toMatchObject({ quantization: 'Q4_K_M' });
+		expect(parseModelId('model-100B-Q8_0')).toMatchObject({ quantization: 'Q8_0' });
+		expect(parseModelId('model-100B-UD-Q8_K_XL')).toMatchObject({ quantization: 'UD-Q8_K_XL' });
+		expect(parseModelId('model-100B-F16')).toMatchObject({ quantization: 'F16' });
+		expect(parseModelId('model-100B-BF16')).toMatchObject({ quantization: 'BF16' });
+		expect(parseModelId('model-100B-MXFP4')).toMatchObject({ quantization: 'MXFP4' });
+
+		// Colon-separated quantization
+		expect(parseModelId('model-100B:UD-IQ1_S')).toMatchObject({ quantization: 'UD-IQ1_S' });
+		expect(parseModelId('model-100B:IQ4_XS')).toMatchObject({ quantization: 'IQ4_XS' });
+		expect(parseModelId('model-100B:Q4_K_M')).toMatchObject({ quantization: 'Q4_K_M' });
+		expect(parseModelId('model-100B:Q8_0')).toMatchObject({ quantization: 'Q8_0' });
+		expect(parseModelId('model-100B:UD-Q8_K_XL')).toMatchObject({ quantization: 'UD-Q8_K_XL' });
+		expect(parseModelId('model-100B:F16')).toMatchObject({ quantization: 'F16' });
+		expect(parseModelId('model-100B:BF16')).toMatchObject({ quantization: 'BF16' });
+		expect(parseModelId('model-100B:MXFP4')).toMatchObject({ quantization: 'MXFP4' });
+
+		// Dot-separated quantization
+		expect(parseModelId('nomic-embed-text-v2-moe.Q4_K_M')).toMatchObject({
+			quantization: 'Q4_K_M'
+		});
+	});
+
+	it('extracts additional tags correctly', () => {
+		expect(parseModelId('model-100B-foobar-Q4_K_M')).toMatchObject({ tags: ['foobar'] });
+		expect(parseModelId('model-100B-A10B-foobar-1M-BF16')).toMatchObject({
+			tags: ['foobar', '1M']
+		});
+		expect(parseModelId('model-100B-1M-foobar:UD-Q8_K_XL')).toMatchObject({
+			tags: ['1M', 'foobar']
+		});
+	});
+
+	it('filters out container format segments from tags', () => {
+		expect(parseModelId('model-100B-GGUF-Instruct-BF16')).toMatchObject({
+			tags: ['Instruct']
+		});
+		expect(parseModelId('model-100B-GGML-Instruct:Q4_K_M')).toMatchObject({
+			tags: ['Instruct']
+		});
+	});
+
+	it('handles real-world examples correctly', () => {
+		expect(parseModelId('meta-llama/Llama-3.1-8B')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'Llama-3.1',
+			orgName: 'meta-llama',
+			params: '8B',
+			quantization: null,
+			raw: 'meta-llama/Llama-3.1-8B',
+			tags: []
+		});
+
+		expect(parseModelId('openai/gpt-oss-120b-MXFP4')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'gpt-oss',
+			orgName: 'openai',
+			params: '120B',
+			quantization: 'MXFP4',
+			raw: 'openai/gpt-oss-120b-MXFP4',
+			tags: []
+		});
+
+		expect(parseModelId('openai/gpt-oss-20b:Q4_K_M')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'gpt-oss',
+			orgName: 'openai',
+			params: '20B',
+			quantization: 'Q4_K_M',
+			raw: 'openai/gpt-oss-20b:Q4_K_M',
+			tags: []
+		});
+
+		expect(parseModelId('Qwen/Qwen3-Coder-30B-A3B-Instruct-1M-BF16')).toStrictEqual({
+			activatedParams: 'A3B',
+			modelName: 'Qwen3-Coder',
+			orgName: 'Qwen',
+			params: '30B',
+			quantization: 'BF16',
+			raw: 'Qwen/Qwen3-Coder-30B-A3B-Instruct-1M-BF16',
+			tags: ['Instruct', '1M']
+		});
+	});
+
+	it('handles real-world examples with quantization in segments', () => {
+		expect(parseModelId('meta-llama/Llama-4-Scout-17B-16E-Instruct-Q4_K_M')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'Llama-4-Scout',
+			orgName: 'meta-llama',
+			params: '17B',
+			quantization: 'Q4_K_M',
+			raw: 'meta-llama/Llama-4-Scout-17B-16E-Instruct-Q4_K_M',
+			tags: ['16E', 'Instruct']
+		});
+
+		expect(parseModelId('MiniMaxAI/MiniMax-M2-IQ4_XS')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'MiniMax-M2',
+			orgName: 'MiniMaxAI',
+			params: null,
+			quantization: 'IQ4_XS',
+			raw: 'MiniMaxAI/MiniMax-M2-IQ4_XS',
+			tags: []
+		});
+
+		expect(parseModelId('MiniMaxAI/MiniMax-M2-UD-Q3_K_XL')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'MiniMax-M2',
+			orgName: 'MiniMaxAI',
+			params: null,
+			quantization: 'UD-Q3_K_XL',
+			raw: 'MiniMaxAI/MiniMax-M2-UD-Q3_K_XL',
+			tags: []
+		});
+
+		expect(parseModelId('mistralai/Devstral-2-123B-Instruct-2512-Q4_K_M')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'Devstral-2',
+			orgName: 'mistralai',
+			params: '123B',
+			quantization: 'Q4_K_M',
+			raw: 'mistralai/Devstral-2-123B-Instruct-2512-Q4_K_M',
+			tags: ['Instruct', '2512']
+		});
+
+		expect(parseModelId('mistralai/Devstral-Small-2-24B-Instruct-2512-Q8_0')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'Devstral-Small-2',
+			orgName: 'mistralai',
+			params: '24B',
+			quantization: 'Q8_0',
+			raw: 'mistralai/Devstral-Small-2-24B-Instruct-2512-Q8_0',
+			tags: ['Instruct', '2512']
+		});
+
+		expect(parseModelId('noctrex/GLM-4.7-Flash-MXFP4_MOE')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'GLM-4.7-Flash',
+			orgName: 'noctrex',
+			params: null,
+			quantization: 'MXFP4_MOE',
+			raw: 'noctrex/GLM-4.7-Flash-MXFP4_MOE',
+			tags: []
+		});
+
+		expect(parseModelId('Qwen/Qwen3-Coder-Next-Q4_K_M')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'Qwen3-Coder-Next',
+			orgName: 'Qwen',
+			params: null,
+			quantization: 'Q4_K_M',
+			raw: 'Qwen/Qwen3-Coder-Next-Q4_K_M',
+			tags: []
+		});
+
+		expect(parseModelId('openai/gpt-oss-120b-Q4_K_M')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'gpt-oss',
+			orgName: 'openai',
+			params: '120B',
+			quantization: 'Q4_K_M',
+			raw: 'openai/gpt-oss-120b-Q4_K_M',
+			tags: []
+		});
+
+		expect(parseModelId('openai/gpt-oss-20b-F16')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'gpt-oss',
+			orgName: 'openai',
+			params: '20B',
+			quantization: 'F16',
+			raw: 'openai/gpt-oss-20b-F16',
+			tags: []
+		});
+
+		expect(parseModelId('nomic-embed-text-v2-moe.Q4_K_M')).toStrictEqual({
+			activatedParams: null,
+			modelName: 'nomic-embed-text-v2-moe',
+			orgName: null,
+			params: null,
+			quantization: 'Q4_K_M',
+			raw: 'nomic-embed-text-v2-moe.Q4_K_M',
+			tags: []
+		});
+	});
+
+	it('handles ambiguous model names', () => {
+		// Qwen3.5 Instruct vs Thinking — tags should distinguish them
+		expect(parseModelId('Qwen/Qwen3.5-30B-A3B-Instruct')).toMatchObject({
+			modelName: 'Qwen3.5',
+			params: '30B',
+			activatedParams: 'A3B',
+			tags: ['Instruct']
+		});
+
+		expect(parseModelId('Qwen/Qwen3.5-30B-A3B-Thinking')).toMatchObject({
+			modelName: 'Qwen3.5',
+			params: '30B',
+			activatedParams: 'A3B',
+			tags: ['Thinking']
+		});
+
+		// Dot-separated quantization with variant suffixes
+		expect(parseModelId('gemma-3-27b-it-heretic-v2.Q8_0')).toMatchObject({
+			modelName: 'gemma-3',
+			params: '27B',
+			quantization: 'Q8_0',
+			tags: ['it', 'heretic', 'v2']
+		});
+
+		expect(parseModelId('gemma-3-27b-it.Q8_0')).toMatchObject({
+			modelName: 'gemma-3',
+			params: '27B',
+			quantization: 'Q8_0',
+			tags: ['it']
+		});
+	});
+});
diff --git a/backend/llama.cpp/tools/ui/tests/unit/model-names.test.ts b/backend/llama.cpp/tools/ui/tests/unit/model-names.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..40c5a0e3aa2a20b5e25aa108f98f516e4b117803
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/unit/model-names.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest';
+import { isValidModelName, normalizeModelName } from '$lib/utils/model-names';
+
+describe('normalizeModelName', () => {
+	it('preserves Hugging Face org/model format (single slash)', () => {
+		// Single slash is treated as Hugging Face format and preserved
+		expect(normalizeModelName('meta-llama/Llama-3.1-8B')).toBe('meta-llama/Llama-3.1-8B');
+		expect(normalizeModelName('models/model-name-1')).toBe('models/model-name-1');
+	});
+
+	it('extracts filename from multi-segment paths', () => {
+		// Multiple slashes -> extract just the filename
+		expect(normalizeModelName('path/to/model/model-name-2')).toBe('model-name-2');
+		expect(normalizeModelName('/absolute/path/to/model')).toBe('model');
+	});
+
+	it('extracts filename from backslash paths', () => {
+		expect(normalizeModelName('C\\Models\\model-name-1')).toBe('model-name-1');
+		expect(normalizeModelName('path\\to\\model\\model-name-2')).toBe('model-name-2');
+	});
+
+	it('handles mixed path separators', () => {
+		expect(normalizeModelName('path/to\\model/model-name-2')).toBe('model-name-2');
+	});
+
+	it('returns simple names as-is', () => {
+		expect(normalizeModelName('simple-model')).toBe('simple-model');
+		expect(normalizeModelName('model-name-2')).toBe('model-name-2');
+	});
+
+	it('trims whitespace', () => {
+		expect(normalizeModelName('  model-name  ')).toBe('model-name');
+	});
+
+	it('returns empty string for empty input', () => {
+		expect(normalizeModelName('')).toBe('');
+		expect(normalizeModelName('   ')).toBe('');
+	});
+});
+
+describe('isValidModelName', () => {
+	it('returns true for valid names', () => {
+		expect(isValidModelName('model')).toBe(true);
+		expect(isValidModelName('path/to/model.bin')).toBe(true);
+	});
+
+	it('returns false for empty values', () => {
+		expect(isValidModelName('')).toBe(false);
+		expect(isValidModelName('   ')).toBe(false);
+	});
+});
diff --git a/backend/llama.cpp/tools/ui/tests/unit/parse-mcp-server-settings.test.ts b/backend/llama.cpp/tools/ui/tests/unit/parse-mcp-server-settings.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f5e0b3a96a25ff802e229da854a8e710f971f268
--- /dev/null
+++ b/backend/llama.cpp/tools/ui/tests/unit/parse-mcp-server-settings.test.ts
@@ -0,0 +1,143 @@
+import { describe, expect, it, vi } from 'vitest';
+import { parseMcpServerSettings } from '$lib/utils/mcp';
+import { DEFAULT_MCP_CONFIG, MCP_SERVER_ID_PREFIX } from '$lib/constants/mcp';
+
+/**
+ * Tests for the mcpServers settings parser.
+ *
+ * The parser has to be resilient to anything that may live in the
+ * user's localStorage: malformed JSON, wrong shapes, missing fields,
+ * falsy-but-not-zero numbers, and entry arrays that have been mutated
+ * by the user via the settings form.
+ */
+describe('parseMcpServerSettings', () => {
+	it('returns an empty array for falsy or whitespace-only input', () => {
+		expect(parseMcpServerSettings(null)).toEqual([]);
+		expect(parseMcpServerSettings(undefined)).toEqual([]);
+		expect(parseMcpServerSettings('')).toEqual([]);
+		expect(parseMcpServerSettings('   ')).toEqual([]);
+	});
+
+	it('returns an empty array and logs a warning for invalid JSON strings', () => {
+		const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+		expect(parseMcpServerSettings('{not-json')).toEqual([]);
+		expect(warn).toHaveBeenCalled();
+
+		warn.mockRestore();
+	});
+
+	it('returns an empty array for valid JSON that is not an array', () => {
+		expect(parseMcpServerSettings('"plain-string"')).toEqual([]);
+		expect(parseMcpServerSettings('{"id":"foo"}')).toEqual([]);
+		expect(parseMcpServerSettings('42')).toEqual([]);
+		expect(parseMcpServerSettings('null')).toEqual([]);
+	});
+
+	it('drops entries with no parseable id and substitutes a stable fallback', () => {
+		const parsed = parseMcpServerSettings(
+			JSON.stringify([{ url: 'https://a.test', enabled: true }, { url: 'https://b.test' }])
+		);
+
+		expect(parsed).toHaveLength(2);
+		expect(parsed[0]?.id).toBe(`${MCP_SERVER_ID_PREFIX}-1`);
+		expect(parsed[1]?.id).toBe(`${MCP_SERVER_ID_PREFIX}-2`);
+	});
+
+	it('reuses the first id when it is present and falls back only for missing ones', () => {
+		const parsed = parseMcpServerSettings(
+			JSON.stringify([
+				{ id: 'custom-1', url: 'https://a.test' },
+				{ url: 'https://b.test' },
+				{ id: 'custom-3', url: 'https://c.test' }
+			])
+		);
+
+		expect(parsed[0]?.id).toBe('custom-1');
+		expect(parsed[1]?.id).toBe(`${MCP_SERVER_ID_PREFIX}-2`);
+		expect(parsed[2]?.id).toBe('custom-3');
+	});
+
+	it('falls back to the configured default requestTimeoutSeconds only for nullish values', () => {
+		const fallback = DEFAULT_MCP_CONFIG.requestTimeoutSeconds;
+
+		const parsed = parseMcpServerSettings(
+			JSON.stringify([
+				{ id: 'a', url: 'https://a.test' },
+				{ id: 'b', url: 'https://b.test', requestTimeoutSeconds: undefined },
+				{ id: 'c', url: 'https://c.test', requestTimeoutSeconds: 0 },
+				{ id: 'd', url: 'https://d.test', requestTimeoutSeconds: 45 }
+			])
+		);
+
+		// The parser uses ?? for timeout fallback, which only triggers on
+		// null/undefined. Explicit 0 is preserved at face value.
+		expect(parsed[0]?.requestTimeoutSeconds).toBe(fallback);
+		expect(parsed[1]?.requestTimeoutSeconds).toBe(fallback);
+		expect(parsed[2]?.requestTimeoutSeconds).toBe(0);
+		expect(parsed[3]?.requestTimeoutSeconds).toBe(45);
+	});
+
+	it('treats whitespace-only headers strings as undefined', () => {
+		const parsed = parseMcpServerSettings(
+			JSON.stringify([
+				{ id: 'a', url: 'https://a.test', headers: '   ' },
+				{ id: 'b', url: 'https://b.test', headers: '{"X-Foo":"bar"}' }
+			])
+		);
+
+		// The parser trims headers and coerces empty/whitespace to undefined.
+		expect(parsed[0]?.headers).toBeUndefined();
+		expect(parsed[1]?.headers).toBe('{"X-Foo":"bar"}');
+	});
+
+	it('defaults coercion for booleans (undefined -> false, true -> true)', () => {
+		const parsed = parseMcpServerSettings(
+			JSON.stringify([
+				{ id: 'a', url: 'https://a.test' },
+				{ id: 'b', url: 'https://b.test', enabled: true },
+				{ id: 'c', url: 'https://c.test', enabled: false },
+				{ id: 'd', url: 'https://d.test', useProxy: true }
+			])
+		);
+
+		expect(parsed[0]?.enabled).toBe(false);
+		expect(parsed[1]?.enabled).toBe(true);
+		expect(parsed[2]?.enabled).toBe(false);
+		expect(parsed[0]?.useProxy).toBe(false);
+		expect(parsed[3]?.useProxy).toBe(true);
+	});
+
+	it('preserves input order when mapping entries', () => {
+		const source = [
+			{ id: 'gamma', url: 'https://c.test' },
+			{ id: 'alpha', url: 'https://a.test' },
+			{ id: 'beta', url: 'https://b.test' }
+		];
+
+		const parsed = parseMcpServerSettings(JSON.stringify(source));
+
+		expect(parsed.map((entry) => entry.id)).toEqual(['gamma', 'alpha', 'beta']);
+	});
+
+	it('passes non-string raw input through the JSON-equality path', () => {
+		const parsed = parseMcpServerSettings([
+			{ id: 'a', url: 'https://a.test' },
+			{ id: 'b', url: 'https://b.test', enabled: true }
+		]);
+
+		expect(parsed).toHaveLength(2);
+		expect(parsed[0]?.id).toBe('a');
+		expect(parsed[1]?.enabled).toBe(true);
+	});
+
+	it('coerces non-string url values to an empty string rather than throwing', () => {
+		const parsed = parseMcpServerSettings(
+			JSON.stringify([{ id: 'a', url: 42 }, { id: 'b' }, { id: 'c', url: 'https://c.test' }])
+		);
+
+		expect(parsed[0]?.url).toBe('');
+		expect(parsed[1]?.url).toBe('');
+		expect(parsed[2]?.url).toBe('https://c.test');
+	});
+});