SvelteKit-based WebUI

.windsurf/rules/css-architecture.md

@@ -0,0 +1,7 @@
+---
+trigger: manual
+---
+
+#### Tailwind & CSS
+
+-   We are using Tailwind v4 which uses oklch colors so we now want to refer to the CSS vars directly, without wrapping it with any color function like `hsla/hsl`, `rgba` etc.

.windsurf/rules/sveltekit-architecture.md

@@ -0,0 +1,44 @@
+---
+trigger: manual
+---
+
+# Coding rules
+
+## Svelte & SvelteKit
+
+### Services vs Stores Separation Pattern
+
+#### `lib/services/` - Pure Business Logic
+
+-   **Purpose**: Stateless business logic and external communication
+-   **Contains**:
+    -   Database operations (DatabaseService)
+    -   API calls to external services (ApiService)
+    -   Pure business logic functions (ChatService, etc.)
+-   **Rules**:
+    -   NO Svelte runes ($state, $derived, $effect)
+    -   NO reactive state management
+    -   Pure functions and classes only
+    -   Can import types but not stores
+    -   Focus on "how" - implementation details
+
+#### `lib/stores/` - Reactive State Management
+
+-   **Purpose**: Svelte-specific reactive state with runes
+-   **Contains**:
+    -   Reactive state classes with $state, $derived, $effect
+    -   UI-focused state management
+    -   Store orchestration logic
+-   **Rules**:
+    -   USE Svelte runes for reactivity
+    -   Import and use services for business logic
+    -   NO direct database operations
+    -   NO direct API calls (use services)
+    -   Focus on "what" - reactive state for UI
+
+#### Enforcement
+
+-   Services should be testable without Svelte
+-   Stores should leverage Svelte's reactivity system
+-   Clear separation: services handle data, stores handle state
+-   Services can be reused across multiple stores

.windsurf/rules/typescript-architecture.md

@@ -0,0 +1,7 @@
+---
+trigger: manual
+---
+
+## TypeScript
+
+-   Add JSDocs for functions

scripts/llama-server-local.sh

@@ -0,0 +1,117 @@
+#!/bin/bash
+
+# llama.cpp WebUI Development Script
+# Usage: ./scripts/webui-dev.sh -hf <model> [-b|--build] [-p|--port <port>]
+
+set -e
+
+# Default values
+MODEL=""
+PORT="8080"
+BUILD=false
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+PROJECT_ROOT="$(dirname "$SCRIPT_DIR")"
+
+# Function to display usage
+usage() {
+    echo "Usage: $0 (-hf|-m) <model> [-b|--build] [-p|--port <port>]"
+    echo ""
+    echo "Options:"
+    echo "  -b, --build        Build llama-server before running"
+    echo "  -h, --help         Show this help message"
+    echo "  -hf <model>        Hugging Face model to use (required)"
+    echo "  -m <model>         Path to local model file (required)"
+    echo "  -p, --port <port>  Port to run the server on (default: 8080)"
+    echo ""
+    echo "Note: -hf and -m are interchangeable and can accept either HF models or local paths"
+    echo ""
+    echo "Examples:"
+    echo "  $0 -hf ggml-org/SmolLM3-3B-GGUF"
+    echo "  $0 -m /path/to/model.gguf"
+    echo "  $0 -hf ggml-org/SmolLM3-3B-GGUF -b -p 8081"
+    exit 1
+}
+
+# Parse command line arguments
+while [[ $# -gt 0 ]]; do
+    case $1 in
+        -hf)
+            MODEL="$2"
+            shift 2
+            ;;
+        -b|--build)
+            BUILD=true
+            shift
+            ;;
+        -m)
+            MODEL="$2"
+            shift 2
+            ;;
+        -p|--port)
+            PORT="$2"
+            shift 2
+            ;;
+        -h|--help)
+            usage
+            ;;
+        *)
+            echo "Unknown option: $1"
+            usage
+            ;;
+    esac
+done
+
+if [[ -z "$MODEL" ]]; then
+    echo "Error: Model (-hf or -m) is required"
+    usage
+fi
+
+if ! [[ "$PORT" =~ ^[0-9]+$ ]]; then
+    echo "Error: Port must be a number"
+    exit 1
+fi
+
+echo "🚀 Starting llama.cpp WebUI Development Environment"
+echo "📁 Project root: $PROJECT_ROOT"
+echo "🤖 Model: $MODEL"
+echo "🌐 Port: $PORT"
+echo "🔨 Build: $BUILD"
+echo ""
+
+# Change to project root
+cd "$PROJECT_ROOT"
+
+# Build if requested
+if [[ "$BUILD" == true ]]; then
+    echo "🔨 Building llama-server..."
+    cmake -B build
+    cmake --build build --config Release -t llama-server
+    echo "✅ Build completed"
+    echo "Building webui..."
+    cd tools/server/webui
+    npm run build
+    cd $PROJECT_ROOT
+    echo ""
+fi
+
+# Check if binary exists
+if [[ ! -f "./build/bin/llama-server" ]]; then
+    echo "❌ Error: llama-server binary not found at ./build/bin/llama-server"
+    echo "💡 Try running with the -b flag to build first"
+    exit 1
+fi
+
+echo "🎯 Starting llama-server..."
+echo "📡 Server will be available at: http://localhost:$PORT"
+echo "🛑 Press Ctrl+C to stop the server"
+echo ""
+
+# Start the server
+# Check if model looks like a HuggingFace model or local path
+if [[ "$MODEL" == *"/"* && ! "$MODEL" == *"ggml-org/"* && ! "$MODEL" == *"microsoft/"* && ! "$MODEL" == *"meta-llama/"* ]]; then
+    # Looks like a local path
+    ./build/bin/llama-server --path tools/server/public -m "$MODEL" --port "$PORT"
+else
+    # Treat as HuggingFace model
+    ./build/bin/llama-server --path tools/server/public -hf "$MODEL" --port "$PORT"
+fi

tools/server/server.cpp

@@ -4911,6 +4911,42 @@ int main(int argc, char ** argv) {
     svr->Get (params.api_prefix + "/slots",               handle_slots);
     svr->Post(params.api_prefix + "/slots/:id_slot",      handle_slots_action);
 
+    // SPA fallback route - serve index.html for any route that doesn't match API endpoints
+    // This enables client-side routing for dynamic routes like /chat/[id]
+    if (params.public_path.empty()) {
+        // Only add fallback when using embedded static files
+        svr->Get(".*", [](const httplib::Request & req, httplib::Response & res) {
+            // Skip API routes - they should have been handled above
+            if (req.path.find("/v1/") != std::string::npos || 
+                req.path.find("/health") != std::string::npos ||
+                req.path.find("/metrics") != std::string::npos ||
+                req.path.find("/props") != std::string::npos ||
+                req.path.find("/models") != std::string::npos ||
+                req.path.find("/api/tags") != std::string::npos ||
+                req.path.find("/completions") != std::string::npos ||
+                req.path.find("/chat/completions") != std::string::npos ||
+                req.path.find("/embeddings") != std::string::npos ||
+                req.path.find("/tokenize") != std::string::npos ||
+                req.path.find("/detokenize") != std::string::npos ||
+                req.path.find("/lora-adapters") != std::string::npos ||
+                req.path.find("/slots") != std::string::npos) {
+                return false; // Let other handlers process API routes
+            }
+
+            // Serve index.html for all other routes (SPA fallback)
+            if (req.get_header_value("Accept-Encoding").find("gzip") == std::string::npos) {
+                res.set_content("Error: gzip is not supported by this browser", "text/plain");
+            } else {
+                res.set_header("Content-Encoding", "gzip");
+                // COEP and COOP headers, required by pyodide (python interpreter)
+                res.set_header("Cross-Origin-Embedder-Policy", "require-corp");
+                res.set_header("Cross-Origin-Opener-Policy", "same-origin");
+                res.set_content(reinterpret_cast<const char*>(index_html_gz), index_html_gz_len, "text/html; charset=utf-8");
+            }
+            return false;
+        });
+    }
+
     //
     // Start the server
     //

tools/server/webui-old/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

tools/server/webui-old/.prettierignore

@@ -0,0 +1,10 @@
+**/.vscode
+**/.github
+**/.git
+**/.svn
+**/.hg
+**/node_modules
+**/dist
+**/build
+
+*.config.js

tools/server/webui-old/eslint.config.js

@@ -0,0 +1,26 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+    },
+  },
+)