From e7e16a4af2a57d6800ccd1abd94c91fb80edf80a Mon Sep 17 00:00:00 2001
From: mike <michael@appmodel.nl>
Date: Sun, 28 Dec 2025 00:36:27 +0100
Subject: [PATCH] chore: update 2 file(s)

---
 index.html | 445 ++++++++++-------------------------------------------
 style.css  | 281 +++++++++++++++++++++++++++++++++
 2 files changed, 362 insertions(+), 364 deletions(-)

diff --git a/index.html b/index.html
index 756ba48..72850e2 100644
--- a/index.html
+++ b/index.html
@@ -5,293 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chat</title>
     <link rel="stylesheet" href="style.css">
-    <!-- Markdown parser -->
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    <!-- Optional: Highlight.js for better code syntax -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
-    <style>
-    body {
-       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-       max-width: 900px;
-       margin: 0 auto;
-       padding: 20px;
-       background: #f5f5f5;
-    }
-
-    #chatContainer {
-       display: flex;
-       flex-direction: column;
-       height: 95vh;
-       background: white;
-       border-radius: 10px;
-       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-       overflow: hidden;
-    }
-
-    #header {
-       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-       color: white;
-       padding: 15px 20px;
-       font-size: 1.2em;
-       display: flex;
-       justify-content: space-between;
-       align-items: center;
-    }
-
-    #chatLog {
-       flex: 1;
-       overflow-y: auto;
-       padding: 20px;
-       background: #fafafa;
-    }
-
-    .message {
-       margin-bottom: 25px;
-       animation: fadeIn 0.3s ease-in;
-    }
-
-    .message-user {
-       background: #e3f2fd;
-       border-left: 4px solid #2196f3;
-       padding: 12px 15px;
-       border-radius: 0 8px 8px 0;
-       margin-left: 0;
-       margin-right: 40px;
-    }
-
-    .message-assistant {
-       background: white;
-       border: 1px solid #e0e0e0;
-       border-radius: 8px;
-       padding: 15px;
-       margin-right: 0;
-       margin-left: 40px;
-       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-    }
-
-    .message-header {
-       display: flex;
-       align-items: center;
-       margin-bottom: 12px;
-       font-weight: 600;
-    }
-
-    .message-header.user {
-       color: #1976d2;
-    }
-
-    .message-header.assistant {
-       color: #388e3c;
-    }
-
-    .avatar {
-       width: 28px;
-       height: 28px;
-       border-radius: 50%;
-       margin-right: 10px;
-       display: flex;
-       align-items: center;
-       justify-content: center;
-       font-size: 14px;
-    }
-
-    .user-avatar {
-       background: #2196f3;
-       color: white;
-    }
-
-    .assistant-avatar {
-       background: #4caf50;
-       color: white;
-    }
-
-    #inputArea {
-       border-top: 1px solid #e0e0e0;
-       padding: 15px;
-       background: white;
-       display: flex;
-       flex-direction: column;
-       gap: 10px;
-    }
-
-    #userInput {
-       width: 100%;
-       padding: 16px 18px;
-       border: 2px solid #ddd;
-       border-radius: 10px;
-       font-size: 16px;
-       resize: none;
-       min-height: 100px;
-       max-height: 300px;
-       font-family: inherit;
-       line-height: 1.6;
-       box-sizing: border-box;
-    }
-
-    #userInput:focus {
-       outline: none;
-       border-color: #667eea;
-       box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
-    }
-
-    #sendBtn {
-       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-       color: white;
-       border: none;
-       border-radius: 8px;
-       padding: 12px 24px;
-       font-weight: 600;
-       cursor: pointer;
-       transition: transform 0.2s, opacity 0.2s;
-       height: 48px;
-    }
-
-    #sendBtn:hover:not(:disabled) {
-       transform: translateY(-1px);
-       opacity: 0.95;
-    }
-
-    #sendBtn:disabled {
-       background: #ccc;
-       cursor: not-allowed;
-    }
-
-    .typing-indicator {
-       display: flex;
-       align-items: center;
-       gap: 4px;
-       padding: 10px 15px;
-       color: #666;
-    }
-
-    .typing-dot {
-       width: 8px;
-       height: 8px;
-       background: #4caf50;
-       border-radius: 50%;
-       animation: typing 1.4s infinite;
-    }
-
-    .typing-dot:nth-child(2) {
-       animation-delay: 0.2s;
-    }
-
-    .typing-dot:nth-child(3) {
-       animation-delay: 0.4s;
-    }
-
-    @keyframes fadeIn {
-       from {
-          opacity: 0;
-          transform: translateY(10px);
-       }
-       to {
-          opacity: 1;
-          transform: translateY(0);
-       }
-    }
-
-    @keyframes typing {
-       0%, 60%, 100% {
-          transform: translateY(0);
-       }
-       30% {
-          transform: translateY(-6px);
-       }
-    }
-
-    .streaming-cursor {
-       display: inline-block;
-       width: 8px;
-       height: 20px;
-       background-color: #4caf50;
-       margin-left: 2px;
-       animation: blink 1s infinite;
-       vertical-align: middle;
-    }
-
-    @keyframes blink {
-       0%, 50% {
-          opacity: 1;
-       }
-       51%, 100% {
-          opacity: 0;
-       }
-    }
-
-    .thinking-block {
-       margin: 10px 0;
-       border-left: 3px solid #ff9800;
-       background: #fff3e0;
-       border-radius: 6px;
-       overflow: hidden;
-    }
-
-    .thinking-header {
-       padding: 8px 12px;
-       background: #ffe0b2;
-       cursor: pointer;
-       user-select: none;
-       display: flex;
-       align-items: center;
-       gap: 8px;
-       font-weight: 600;
-       color: #e65100;
-       font-size: 0.9em;
-    }
-
-    .thinking-header:hover {
-       background: #ffcc80;
-    }
-
-    .thinking-toggle {
-       transition: transform 0.2s;
-       display: inline-block;
-    }
-
-    .thinking-toggle.collapsed {
-       transform: rotate(-90deg);
-    }
-
-    .thinking-content {
-       padding: 12px;
-       color: #5d4037;
-       font-size: 0.9em;
-       line-height: 1.5;
-       border-top: 1px solid #ffcc80;
-    }
-
-    .thinking-content.hidden {
-       display: none;
-    }
-
-    .controls {
-       display: flex;
-       gap: 10px;
-       margin-top: 10px;
-       align-items: center;
-    }
-
-    .control-btn {
-       padding: 6px 12px;
-       background: #f5f5f5;
-       border: 1px solid #ddd;
-       border-radius: 4px;
-       cursor: pointer;
-       font-size: 12px;
-    }
-
-    .control-btn:hover {
-       background: #e9e9e9;
-    }
-
-    #modelInfo {
-       font-size: 12px;
-       color: #666;
-       margin-left: auto;
-    }
-    </style>
 </head>
 <body>
 <div id="chatContainer">
@@ -301,9 +17,9 @@
             <div style="display: flex; align-items: center; gap: 8px;">
                 <span>Backend:</span>
                 <select id="backendSelector" style="padding: 4px 8px; border-radius: 4px; border: 1px solid #444; background: #2a2a2a; color: #e0e0e0;">
+                    <option value="ollama">Ollama (192.168.1.159:8081)</option>
                     <option value="plato">Plato (192.168.1.74)</option>
                     <option value="stoic">Stoic (192.168.1.159)</option>
-                    <option value="ollama">Ollama (192.168.1.159:8081)</option>
                 </select>
             </div>
             <div style="display: flex; align-items: center; gap: 8px;">
@@ -345,21 +61,21 @@
 <script>
 // Configuration
 const BACKENDS = {
-    plato: {
-        prod: '/api/plato',
-        dev: 'http://192.168.1.74:1234/v1',
-        name: 'Plato (192.168.1.74)'
-    },
-    stoic: {
-        prod: '/api/stoic',
-        dev: 'http://192.168.1.159:1234/v1',
-        name: 'Stoic (192.168.1.159)'
-    },
-    ollama: {
-        prod: '/api/ollama',
-        dev: 'http://192.168.1.159:8081/v1',
-        name: 'Ollama (192.168.1.159:8081)'
-    }
+	plato : {
+		prod: '/api/plato',
+		dev : 'http://192.168.1.74:1234/v1',
+		name: 'Plato (192.168.1.74)'
+	},
+	stoic : {
+		prod: '/api/stoic',
+		dev : 'http://192.168.1.159:1234/v1',
+		name: 'Stoic (192.168.1.159)'
+	},
+	ollama: {
+		prod: '/api/ollama',
+		dev : 'http://192.168.1.159:8081/v1',
+		name: 'Ollama (192.168.1.159:8081)'
+	}
 }
 
 const IS_PRODUCTION = window.location.hostname === 'jarvis-lan.appmodel.nl'
@@ -375,80 +91,80 @@ let chatHistory = [] // Initialize chat history array
 
 // Get current API URL based on selected backend
 function getApiUrl() {
-    const backend = BACKENDS[currentBackend]
-    return IS_PRODUCTION ? backend.prod : backend.dev
+	const backend = BACKENDS[currentBackend]
+	return IS_PRODUCTION ? backend.prod : backend.dev
 }
 
 // Update backend display
 function updateBackendDisplay() {
-    const backend = BACKENDS[currentBackend]
-    const displayText = IS_PRODUCTION
-        ? `${backend.prod} → ${backend.name}`
-        : backend.dev
-    document.getElementById('backendDisplay').textContent = displayText
+	const backend = BACKENDS[currentBackend]
+	const displayText = IS_PRODUCTION
+		? `${ backend.prod } → ${ backend.name }`
+		: backend.dev
+	document.getElementById('backendDisplay').textContent = displayText
 }
 
 // Fetch available models from backend
 async function fetchModels() {
-    try {
-        const response = await fetch(`${getApiUrl()}/models`)
-        if (response.ok) {
-            const data = await response.json()
-            availableModels = data.data || []
-            populateModelSelector()
+	try {
+		const response = await fetch(`${ getApiUrl() }/models`)
+		if (response.ok) {
+			const data = await response.json()
+			availableModels = data.data || []
+			populateModelSelector()
 
-            // Auto-select first model if none selected
-            if (!currentModel && availableModels.length > 0) {
-                currentModel = availableModels[0].id
-                document.getElementById('modelSelector').value = currentModel
-            }
-        } else {
-            console.error('Failed to fetch models:', response.statusText)
-            document.getElementById('modelSelector').innerHTML = '<option value="">Error loading models</option>'
-        }
-    } catch (error) {
-        console.error('Error fetching models:', error)
-        document.getElementById('modelSelector').innerHTML = '<option value="">Error loading models</option>'
-    }
+			// Auto-select first model if none selected
+			if (!currentModel && availableModels.length > 0) {
+				currentModel = availableModels[0].id
+				document.getElementById('modelSelector').value = currentModel
+			}
+		} else {
+			console.error('Failed to fetch models:', response.statusText)
+			document.getElementById('modelSelector').innerHTML = '<option value="">Error loading models</option>'
+		}
+	} catch (error) {
+		console.error('Error fetching models:', error)
+		document.getElementById('modelSelector').innerHTML = '<option value="">Error loading models</option>'
+	}
 }
 
 // Populate model selector dropdown
 function populateModelSelector() {
-    const selector = document.getElementById('modelSelector')
-    if (availableModels.length === 0) {
-        selector.innerHTML = '<option value="">No models available</option>'
-        return
-    }
+	const selector = document.getElementById('modelSelector')
+	if (availableModels.length === 0) {
+		selector.innerHTML = '<option value="">No models available</option>'
+		return
+	}
 
-    selector.innerHTML = availableModels.map(model =>
-        `<option value="${model.id}">${model.id}</option>`
-    ).join('')
+	selector.innerHTML = availableModels.map(model =>
+		`<option value="${ model.id }">${ model.id }</option>`
+	).join('')
 
-    if (currentModel) {
-        selector.value = currentModel
-    }
+	if (currentModel) {
+		selector.value = currentModel
+	}
 }
 
 // Handle backend and model selection changes
 document.addEventListener('DOMContentLoaded', () => {
-    const backendSelector = document.getElementById('backendSelector')
-    const modelSelector = document.getElementById('modelSelector')
+	const backendSelector = document.getElementById('backendSelector')
+	const modelSelector = document.getElementById('modelSelector')
 
-    backendSelector.value = currentBackend
-    updateBackendDisplay()
-    fetchModels()
+	backendSelector.value = currentBackend
+	updateBackendDisplay()
+	fetchModels()
 
-    backendSelector.addEventListener('change', (e) => {
-        currentBackend = e.target.value
-        updateBackendDisplay()
-        console.log('Backend switched to:', currentBackend, '→', getApiUrl())
-        fetchModels() // Reload models for new backend
-    })
+	backendSelector.addEventListener('change', (e) => {
+		currentBackend = e.target.value
+		updateBackendDisplay()
+		console.log('Backend switched to:', currentBackend, '→', getApiUrl())
+		fetchModels() // Reload models for new backend
+	})
 
-    modelSelector.addEventListener('change', (e) => {
-        currentModel = e.target.value
-        console.log('Model selected:', currentModel)
-    })
+	modelSelector.addEventListener('change', (e) => {
+		currentModel = e.target.value
+		console.log('Model selected:', currentModel)
+	})
 })
 
 // DOM Elements
@@ -531,7 +247,7 @@ function addMessage(role, content, markdown = false, messageId = null) {
 	chatLog.scrollTop = chatLog.scrollHeight
 
 	// Add message to chat history
-	chatHistory.push({ role, content, markdown, messageId });
+	chatHistory.push({ role, content, markdown, messageId })
 
 	return contentDiv
 }
@@ -545,13 +261,13 @@ function parseThinkingTags(content) {
 	const completeThinkRegex = /\[THINK\]([\s\S]*?)\[\/THINK\]/gi
 	result = result.replace(completeThinkRegex, (match, thinkContent) => {
 		thinkingCounter++
-		const id = `thinking-${Date.now()}-${thinkingCounter}`
+		const id = `thinking-${ Date.now() }-${ thinkingCounter }`
 		return `<div class="thinking-block">
-			<div class="thinking-header" onclick="toggleThinking('${id}')">
-				<span class="thinking-toggle" id="${id}-toggle">▼</span>
+			<div class="thinking-header" onclick="toggleThinking('${ id }')">
+				<span class="thinking-toggle" id="${ id }-toggle">▼</span>
 				<span>🤔 Thinking...</span>
 			</div>
-			<div class="thinking-content" id="${id}">${thinkContent.trim()}</div>
+			<div class="thinking-content" id="${ id }">${ thinkContent.trim() }</div>
 		</div>`
 	})
 
@@ -559,13 +275,13 @@ function parseThinkingTags(content) {
 	const incompleteThinkRegex = /\[THINK\]([\s\S]*?)$/gi
 	result = result.replace(incompleteThinkRegex, (match, thinkContent) => {
 		thinkingCounter++
-		const id = `thinking-${Date.now()}-${thinkingCounter}`
+		const id = `thinking-${ Date.now() }-${ thinkingCounter }`
 		return `<div class="thinking-block">
-			<div class="thinking-header" onclick="toggleThinking('${id}')">
-				<span class="thinking-toggle" id="${id}-toggle">▼</span>
+			<div class="thinking-header" onclick="toggleThinking('${ id }')">
+				<span class="thinking-toggle" id="${ id }-toggle">▼</span>
 				<span>🤔 Thinking...</span>
 			</div>
-			<div class="thinking-content" id="${id}">${thinkContent.trim()}</div>
+			<div class="thinking-content" id="${ id }">${ thinkContent.trim() }</div>
 		</div>`
 	})
 
@@ -864,10 +580,11 @@ async function handleNonStreamingResponse(userMessage) {
 		userInput.focus()
 	}
 }
+
 function loadChatHistory() {
 	chatHistory.forEach(message => {
-		addMessage(message.role, message.content, message.markdown, message.messageId);
-	});
+		addMessage(message.role, message.content, message.markdown, message.messageId)
+	})
 }
 
 // Stop current stream
@@ -923,7 +640,7 @@ window.onload = () => {
 	fetchModels()
 
 	// Load chat history
-	loadChatHistory();
+	loadChatHistory()
 
 	// Add welcome message
 	setTimeout(() => {
diff --git a/style.css b/style.css
index 5952bc9..641258a 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,284 @@
+body {
+   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+   max-width: 900px;
+   margin: 0 auto;
+   padding: 20px;
+   background: #f5f5f5;
+}
+
+#chatContainer {
+   display: flex;
+   flex-direction: column;
+   height: 95vh;
+   background: white;
+   border-radius: 10px;
+   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+   overflow: hidden;
+}
+
+#header {
+   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+   color: white;
+   padding: 15px 20px;
+   font-size: 1.2em;
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+}
+
+#chatLog {
+   flex: 1;
+   overflow-y: auto;
+   padding: 20px;
+   background: #fafafa;
+}
+
+.message {
+   margin-bottom: 25px;
+   animation: fadeIn 0.3s ease-in;
+}
+
+.message-user {
+   background: #e3f2fd;
+   border-left: 4px solid #2196f3;
+   padding: 12px 15px;
+   border-radius: 0 8px 8px 0;
+   margin-left: 0;
+   margin-right: 40px;
+}
+
+.message-assistant {
+   background: white;
+   border: 1px solid #e0e0e0;
+   border-radius: 8px;
+   padding: 15px;
+   margin-right: 0;
+   margin-left: 40px;
+   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.message-header {
+   display: flex;
+   align-items: center;
+   margin-bottom: 12px;
+   font-weight: 600;
+}
+
+.message-header.user {
+   color: #1976d2;
+}
+
+.message-header.assistant {
+   color: #388e3c;
+}
+
+.avatar {
+   width: 28px;
+   height: 28px;
+   border-radius: 50%;
+   margin-right: 10px;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   font-size: 14px;
+}
+
+.user-avatar {
+   background: #2196f3;
+   color: white;
+}
+
+.assistant-avatar {
+   background: #4caf50;
+   color: white;
+}
+
+#inputArea {
+   border-top: 1px solid #e0e0e0;
+   padding: 15px;
+   background: white;
+   display: flex;
+   flex-direction: column;
+   gap: 10px;
+}
+
+#userInput {
+   width: 100%;
+   padding: 16px 18px;
+   border: 2px solid #ddd;
+   border-radius: 10px;
+   font-size: 16px;
+   resize: none;
+   min-height: 100px;
+   max-height: 300px;
+   font-family: inherit;
+   line-height: 1.6;
+   box-sizing: border-box;
+}
+
+#userInput:focus {
+   outline: none;
+   border-color: #667eea;
+   box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
+}
+
+#sendBtn {
+   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+   color: white;
+   border: none;
+   border-radius: 8px;
+   padding: 12px 24px;
+   font-weight: 600;
+   cursor: pointer;
+   transition: transform 0.2s, opacity 0.2s;
+   height: 48px;
+}
+
+#sendBtn:hover:not(:disabled) {
+   transform: translateY(-1px);
+   opacity: 0.95;
+}
+
+#sendBtn:disabled {
+   background: #ccc;
+   cursor: not-allowed;
+}
+
+.typing-indicator {
+   display: flex;
+   align-items: center;
+   gap: 4px;
+   padding: 10px 15px;
+   color: #666;
+}
+
+.typing-dot {
+   width: 8px;
+   height: 8px;
+   background: #4caf50;
+   border-radius: 50%;
+   animation: typing 1.4s infinite;
+}
+
+.typing-dot:nth-child(2) {
+   animation-delay: 0.2s;
+}
+
+.typing-dot:nth-child(3) {
+   animation-delay: 0.4s;
+}
+
+@keyframes fadeIn {
+   from {
+      opacity: 0;
+      transform: translateY(10px);
+   }
+   to {
+      opacity: 1;
+      transform: translateY(0);
+   }
+}
+
+@keyframes typing {
+   0%, 60%, 100% {
+      transform: translateY(0);
+   }
+   30% {
+      transform: translateY(-6px);
+   }
+}
+
+.streaming-cursor {
+   display: inline-block;
+   width: 8px;
+   height: 20px;
+   background-color: #4caf50;
+   margin-left: 2px;
+   animation: blink 1s infinite;
+   vertical-align: middle;
+}
+
+@keyframes blink {
+   0%, 50% {
+      opacity: 1;
+   }
+   51%, 100% {
+      opacity: 0;
+   }
+}
+
+.thinking-block {
+   margin: 10px 0;
+   border-left: 3px solid #ff9800;
+   background: #fff3e0;
+   border-radius: 6px;
+   overflow: hidden;
+}
+
+.thinking-header {
+   padding: 8px 12px;
+   background: #ffe0b2;
+   cursor: pointer;
+   user-select: none;
+   display: flex;
+   align-items: center;
+   gap: 8px;
+   font-weight: 600;
+   color: #e65100;
+   font-size: 0.9em;
+}
+
+.thinking-header:hover {
+   background: #ffcc80;
+}
+
+.thinking-toggle {
+   transition: transform 0.2s;
+   display: inline-block;
+}
+
+.thinking-toggle.collapsed {
+   transform: rotate(-90deg);
+}
+
+.thinking-content {
+   padding: 12px;
+   color: #5d4037;
+   font-size: 0.9em;
+   line-height: 1.5;
+   border-top: 1px solid #ffcc80;
+}
+
+.thinking-content.hidden {
+   display: none;
+}
+
+.controls {
+   display: flex;
+   gap: 10px;
+   margin-top: 10px;
+   align-items: center;
+}
+
+.control-btn {
+   padding: 6px 12px;
+   background: #f5f5f5;
+   border: 1px solid #ddd;
+   border-radius: 4px;
+   cursor: pointer;
+   font-size: 12px;
+}
+
+.control-btn:hover {
+   background: #e9e9e9;
+}
+
+#modelInfo {
+   font-size: 12px;
+   color: #666;
+   margin-left: auto;
+}
+
 /* Darker markdown styling */
 .markdown-content {
    color: #24292f;