From 7af5b32b3f2e5041a9e4d97b03bbc7d7b97c84b0 Mon Sep 17 00:00:00 2001
From: Rene Fichtmueller <renefichtmueller@MacStudio-von-Rene-8.local>
Date: Thu, 9 Apr 2026 21:20:43 +0200
Subject: [PATCH] ui: redesign LLM panel for light theme readability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace hard-coded purple/green colors with theme CSS variables.
Dark code blocks (#1e1e1e bg), orange accent for active borders/badges,
dark green for status text, amber for warnings — all readable on white.
---
 packages/dashboard/index.html | 163 +++++++++++++++++-----------------
 1 file changed, 83 insertions(+), 80 deletions(-)

diff --git a/packages/dashboard/index.html b/packages/dashboard/index.html
index 2796668..4a46004 100644
--- a/packages/dashboard/index.html
+++ b/packages/dashboard/index.html
@@ -1208,94 +1208,99 @@
   <div id="tab-blog" class="hidden">
 
     <!-- LLM ENGINE PANEL -->
-    <div class="card" style="margin-bottom:1.25rem;border:1px solid rgba(124,92,252,0.3);background:var(--surface2)">
+    <div class="card" style="margin-bottom:1.25rem;border-left:3px solid var(--accent)">
       <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.85rem">
-        <div>
-          <span style="font-size:0.85rem;font-weight:700;color:#a78bfa">🤖 Blog Generation LLM</span>
-          <span id="blog-llm-status-badge" style="margin-left:0.5rem;font-size:0.68rem;padding:2px 7px;border-radius:10px;background:rgba(100,100,100,0.25);color:var(--text-dim)">loading…</span>
+        <div style="display:flex;align-items:center;gap:0.6rem">
+          <span style="font-size:0.9rem;font-weight:700;color:var(--text-bright)">🤖 Blog Generation LLM</span>
+          <span id="blog-llm-status-badge" style="font-size:0.68rem;padding:2px 8px;border-radius:10px;background:var(--surface3);color:var(--text-dim);font-weight:600">loading…</span>
         </div>
         <button onclick="loadBlogLLMStatus()" style="background:transparent;color:var(--text-dim);border:1px solid var(--border);padding:3px 10px;border-radius:6px;cursor:pointer;font-size:0.72rem">↺</button>
       </div>
 
-      <!-- Active model info bar -->
-      <div id="blog-llm-active-bar" style="background:rgba(124,92,252,0.08);border:1px solid rgba(124,92,252,0.2);border-radius:8px;padding:0.6rem 0.85rem;margin-bottom:0.9rem;display:flex;align-items:center;gap:0.75rem">
-        <span style="font-size:0.8rem;color:var(--text-dim)">Active model:</span>
-        <span id="blog-llm-active-model" style="font-family:monospace;font-size:0.8rem;color:#a78bfa;font-weight:600">—</span>
-        <span id="blog-llm-active-provider" style="font-size:0.7rem;padding:2px 6px;border-radius:4px;background:rgba(124,92,252,0.15);color:#a78bfa">—</span>
+      <!-- Active model bar -->
+      <div style="background:var(--accent-glow);border:1px solid rgba(255,129,0,0.25);border-radius:8px;padding:0.55rem 0.85rem;margin-bottom:1rem;display:flex;align-items:center;gap:0.75rem">
+        <span style="font-size:0.78rem;color:var(--text-dim);font-weight:600">AKTIV:</span>
+        <code id="blog-llm-active-model" style="font-size:0.82rem;color:var(--text-bright);font-weight:700">—</code>
+        <span id="blog-llm-active-provider" style="font-size:0.68rem;padding:2px 7px;border-radius:4px;background:var(--accent);color:#fff;font-weight:700">—</span>
         <span id="blog-llm-queue" style="margin-left:auto;font-size:0.72rem;color:var(--text-dim)"></span>
       </div>
 
       <!-- Model cards -->
-      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem">
+      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:0.85rem">
 
         <!-- Claude (recommended) -->
-        <div id="blog-model-card-claude" style="border-radius:8px;padding:0.75rem;border:1px solid rgba(124,92,252,0.25);background:rgba(124,92,252,0.06);position:relative">
-          <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem">
-            <span style="font-size:0.85rem">🧠</span>
-            <span style="font-size:0.78rem;font-weight:700;color:#a78bfa">claude-sonnet-4-6</span>
-            <span style="margin-left:auto;font-size:0.65rem;padding:1px 5px;border-radius:3px;background:rgba(124,92,252,0.25);color:#a78bfa;font-weight:700">RECOMMENDED</span>
+        <div id="blog-model-card-claude" style="border-radius:8px;padding:0.85rem;border:2px solid var(--border);background:var(--surface)">
+          <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:0.6rem">
+            <div>
+              <div style="font-size:0.8rem;font-weight:700;color:var(--text-bright)">🧠 claude-sonnet-4-6</div>
+              <div style="font-size:0.68rem;color:var(--text-dim);margin-top:2px">Anthropic API</div>
+            </div>
+            <span style="font-size:0.62rem;padding:2px 6px;border-radius:3px;background:var(--accent);color:#fff;font-weight:700;white-space:nowrap">★ EMPFOHLEN</span>
           </div>
-          <div style="font-size:0.7rem;color:var(--text-dim);line-height:1.5">
-            <div>★★★★★ Blog quality</div>
-            <div>★★★★☆ Speed (API latency)</div>
-            <div style="margin-top:0.3rem;color:#86efac">✓ Multi-constraint prompts</div>
-            <div style="color:#86efac">✓ No mode collapse</div>
-            <div style="color:#86efac">✓ 4096 token output</div>
-            <div style="margin-top:0.3rem;color:var(--text-dim)">Provider: Anthropic API</div>
+          <div style="font-size:0.72rem;color:var(--text);line-height:1.8;margin-bottom:0.6rem">
+            <div><span style="color:var(--accent)">★★★★★</span> Blog-Qualität</div>
+            <div><span style="color:var(--accent)">★★★★</span><span style="color:var(--text-dim)">★</span> Geschwindigkeit</div>
+            <div style="margin-top:0.35rem;color:#1a7a3a;font-weight:500">✓ Komplexe Multi-Constraint Prompts</div>
+            <div style="color:#1a7a3a;font-weight:500">✓ Kein Mode Collapse</div>
+            <div style="color:#1a7a3a;font-weight:500">✓ 4096 Token Output</div>
           </div>
-          <div style="margin-top:0.6rem;padding-top:0.5rem;border-top:1px solid var(--border)">
-            <code style="font-size:0.65rem;color:#a78bfa;word-break:break-all">BLOG_LLM_PROVIDER=anthropic<br>ANTHROPIC_MODEL=claude-sonnet-4-6</code>
+          <div style="background:#1e1e1e;border-radius:5px;padding:0.5rem 0.65rem;margin-bottom:0.5rem">
+            <code style="font-size:0.65rem;color:#f8f8f2;line-height:1.6;word-break:break-all;display:block">BLOG_LLM_PROVIDER=anthropic<br>ANTHROPIC_MODEL=claude-sonnet-4-6</code>
           </div>
-          <div id="blog-model-claude-status" style="margin-top:0.5rem;font-size:0.68rem;color:var(--text-dim)">checking…</div>
+          <div id="blog-model-claude-status" style="font-size:0.7rem;color:var(--text-dim)">checking…</div>
         </div>
 
-        <!-- Fine-tuned local (current default) -->
-        <div id="blog-model-card-fo" style="border-radius:8px;padding:0.75rem;border:1px solid rgba(34,197,94,0.25);background:rgba(34,197,94,0.04)">
-          <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem">
-            <span style="font-size:0.85rem">🎯</span>
-            <span style="font-size:0.78rem;font-weight:700;color:#86efac">fo-blog-v3-qwen7b</span>
-            <span id="blog-model-fo-active" style="display:none;margin-left:auto;font-size:0.65rem;padding:1px 5px;border-radius:3px;background:rgba(34,197,94,0.25);color:#86efac;font-weight:700">ACTIVE</span>
+        <!-- Fine-tuned local -->
+        <div id="blog-model-card-fo" style="border-radius:8px;padding:0.85rem;border:2px solid var(--border);background:var(--surface)">
+          <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:0.6rem">
+            <div>
+              <div style="font-size:0.8rem;font-weight:700;color:var(--text-bright)">🎯 fo-blog-v3-qwen7b</div>
+              <div style="font-size:0.68rem;color:var(--text-dim);margin-top:2px">Ollama / Mac Studio</div>
+            </div>
+            <span id="blog-model-fo-active" style="display:none;font-size:0.62rem;padding:2px 6px;border-radius:3px;background:#1a7a3a;color:#fff;font-weight:700">● AKTIV</span>
           </div>
-          <div style="font-size:0.7rem;color:var(--text-dim);line-height:1.5">
-            <div>★★★★☆ Blog quality</div>
-            <div>★★★★★ Speed (local GPU)</div>
-            <div style="margin-top:0.3rem;color:#86efac">✓ Fine-tuned on TIP style</div>
-            <div style="color:#86efac">✓ Privacy (runs locally)</div>
-            <div style="color:#fbbf24">⚠ Occasional mode collapse</div>
-            <div style="margin-top:0.3rem;color:var(--text-dim)">Provider: Ollama / Mac Studio</div>
+          <div style="font-size:0.72rem;color:var(--text);line-height:1.8;margin-bottom:0.6rem">
+            <div><span style="color:var(--accent)">★★★★</span><span style="color:var(--text-dim)">★</span> Blog-Qualität</div>
+            <div><span style="color:var(--accent)">★★★★★</span> Geschwindigkeit</div>
+            <div style="margin-top:0.35rem;color:#1a7a3a;font-weight:500">✓ Fine-tuned auf TIP-Stil</div>
+            <div style="color:#1a7a3a;font-weight:500">✓ Lokal / kein API-Kosten</div>
+            <div style="color:#b45309;font-weight:500">⚠ Gelegentlicher Mode Collapse</div>
           </div>
-          <div style="margin-top:0.6rem;padding-top:0.5rem;border-top:1px solid var(--border)">
-            <code style="font-size:0.65rem;color:#86efac;word-break:break-all">BLOG_LLM_PROVIDER=ollama<br>OLLAMA_LLM_MODEL=fo-blog-v3-qwen7b</code>
+          <div style="background:#1e1e1e;border-radius:5px;padding:0.5rem 0.65rem;margin-bottom:0.5rem">
+            <code style="font-size:0.65rem;color:#f8f8f2;line-height:1.6;word-break:break-all;display:block">BLOG_LLM_PROVIDER=ollama<br>OLLAMA_LLM_MODEL=fo-blog-v3-qwen7b</code>
           </div>
-          <div id="blog-model-fo-status" style="margin-top:0.5rem;font-size:0.68rem;color:var(--text-dim)">checking…</div>
+          <div id="blog-model-fo-status" style="font-size:0.7rem;color:var(--text-dim)">checking…</div>
         </div>
 
         <!-- Standard Qwen -->
-        <div id="blog-model-card-qwen" style="border-radius:8px;padding:0.75rem;border:1px solid rgba(100,100,100,0.2);background:rgba(100,100,100,0.04)">
-          <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem">
-            <span style="font-size:0.85rem">⚡</span>
-            <span style="font-size:0.78rem;font-weight:700;color:var(--text)">qwen2.5:14b</span>
+        <div id="blog-model-card-qwen" style="border-radius:8px;padding:0.85rem;border:2px solid var(--border);background:var(--surface)">
+          <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:0.6rem">
+            <div>
+              <div style="font-size:0.8rem;font-weight:700;color:var(--text-bright)">⚡ qwen2.5:14b</div>
+              <div style="font-size:0.68rem;color:var(--text-dim);margin-top:2px">Ollama / Mac Studio</div>
+            </div>
           </div>
-          <div style="font-size:0.7rem;color:var(--text-dim);line-height:1.5">
-            <div>★★★☆☆ Blog quality</div>
-            <div>★★★★☆ Speed (local GPU)</div>
-            <div style="margin-top:0.3rem;color:#86efac">✓ General purpose</div>
-            <div style="color:#86efac">✓ No API cost</div>
-            <div style="color:#fbbf24">⚠ Mode collapse on complex prompts</div>
-            <div style="margin-top:0.3rem;color:var(--text-dim)">Provider: Ollama / Mac Studio</div>
+          <div style="font-size:0.72rem;color:var(--text);line-height:1.8;margin-bottom:0.6rem">
+            <div><span style="color:var(--accent)">★★★</span><span style="color:var(--text-dim)">★★</span> Blog-Qualität</div>
+            <div><span style="color:var(--accent)">★★★★</span><span style="color:var(--text-dim)">★</span> Geschwindigkeit</div>
+            <div style="margin-top:0.35rem;color:#1a7a3a;font-weight:500">✓ Allzweck-Modell</div>
+            <div style="color:#1a7a3a;font-weight:500">✓ Keine API-Kosten</div>
+            <div style="color:#b45309;font-weight:500">⚠ Mode Collapse bei komplexen Prompts</div>
           </div>
-          <div style="margin-top:0.6rem;padding-top:0.5rem;border-top:1px solid var(--border)">
-            <code style="font-size:0.65rem;color:var(--text-dim);word-break:break-all">BLOG_LLM_PROVIDER=ollama<br>OLLAMA_LLM_MODEL=qwen2.5:14b</code>
+          <div style="background:#1e1e1e;border-radius:5px;padding:0.5rem 0.65rem;margin-bottom:0.5rem">
+            <code style="font-size:0.65rem;color:#f8f8f2;line-height:1.6;word-break:break-all;display:block">BLOG_LLM_PROVIDER=ollama<br>OLLAMA_LLM_MODEL=qwen2.5:14b</code>
           </div>
-          <div id="blog-model-qwen-status" style="margin-top:0.5rem;font-size:0.68rem;color:var(--text-dim)">local model</div>
+          <div id="blog-model-qwen-status" style="font-size:0.7rem;color:var(--text-dim)">local model</div>
         </div>
 
       </div><!-- end model grid -->
 
       <!-- Config note -->
-      <div style="margin-top:0.75rem;padding:0.6rem 0.85rem;background:rgba(0,0,0,0.15);border-radius:6px;font-size:0.7rem;color:var(--text-dim)">
-        <strong style="color:var(--text)">Modell wechseln:</strong>
-        SSH → Erik → <code style="color:#a78bfa">nano /opt/tip/ecosystem.config.js</code> → BLOG_LLM_PROVIDER + ANTHROPIC_API_KEY setzen → <code style="color:#a78bfa">pm2 restart tip-api --update-env</code>
+      <div style="margin-top:0.85rem;padding:0.6rem 0.85rem;background:var(--surface2);border-radius:6px;font-size:0.72rem;color:var(--text)">
+        <strong>Modell wechseln:</strong> SSH → Erik →
+        <code style="background:#1e1e1e;color:#f8f8f2;padding:1px 5px;border-radius:3px">nano /opt/tip/ecosystem.config.js</code>
+        → BLOG_LLM_PROVIDER + ANTHROPIC_API_KEY →
+        <code style="background:#1e1e1e;color:#f8f8f2;padding:1px 5px;border-radius:3px">pm2 restart tip-api --update-env</code>
       </div>
     </div><!-- end LLM panel -->
 
@@ -4410,50 +4415,48 @@ async function loadBlogLLMStatus() {
     }
     if (activeModel) activeModel.textContent = llm.model || '—';
     if (activeProvider) {
-      activeProvider.textContent = llm.provider || '—';
-      activeProvider.style.background = llm.provider === 'anthropic' ? 'rgba(124,92,252,0.2)' : 'rgba(34,197,94,0.15)';
-      activeProvider.style.color = llm.provider === 'anthropic' ? '#a78bfa' : '#86efac';
+      activeProvider.textContent = llm.provider === 'anthropic' ? 'anthropic' : 'ollama';
+      activeProvider.style.background = 'var(--accent)';
+      activeProvider.style.color = '#fff';
     }
     if (queueEl) {
       var q = data.queue_depth || 0;
-      queueEl.textContent = q > 0 ? 'Queue: ' + q + ' jobs' : 'Queue: idle';
+      queueEl.textContent = q > 0 ? 'Queue: ' + q + ' Jobs' : 'Queue: idle';
     }
 
-    // Mark active model card
+    // Mark active model card with accent border
     var foActive = document.getElementById('blog-model-fo-active');
     var foCard = document.getElementById('blog-model-card-fo');
     var claudeCard = document.getElementById('blog-model-card-claude');
 
     if (llm.provider === 'anthropic') {
-      if (claudeCard) claudeCard.style.border = '1px solid rgba(124,92,252,0.6)';
-      claudeCard.style.background = 'rgba(124,92,252,0.1)';
+      if (claudeCard) claudeCard.style.border = '2px solid var(--accent)';
       var claudeStatusEl = document.getElementById('blog-model-claude-status');
       if (claudeStatusEl) {
-        claudeStatusEl.textContent = '● ACTIVE — API key configured';
-        claudeStatusEl.style.color = '#a78bfa';
+        claudeStatusEl.textContent = '● Aktiv — API-Key konfiguriert';
+        claudeStatusEl.style.color = '#1a7a3a';
+        claudeStatusEl.style.fontWeight = '600';
       }
-      document.getElementById('blog-model-fo-status').textContent = 'available (not active)';
+      var foSt = document.getElementById('blog-model-fo-status');
+      if (foSt) { foSt.textContent = 'bereit (nicht aktiv)'; foSt.style.color = 'var(--text-dim)'; }
     } else {
-      // Ollama active
       if (foActive) foActive.style.display = 'inline';
-      if (foCard) {
-        foCard.style.border = '1px solid rgba(34,197,94,0.5)';
-        foCard.style.background = 'rgba(34,197,94,0.08)';
-      }
+      if (foCard) foCard.style.border = '2px solid var(--accent)';
       var foStatusEl = document.getElementById('blog-model-fo-status');
       if (foStatusEl) {
-        foStatusEl.textContent = llm.ok ? '● ACTIVE — Ollama reachable' : '⚠ Ollama unreachable: ' + (llm.error || 'check connection');
-        foStatusEl.style.color = llm.ok ? '#86efac' : '#fbbf24';
+        foStatusEl.textContent = llm.ok ? '● Aktiv — Ollama erreichbar' : '⚠ Ollama nicht erreichbar: ' + (llm.error || '').slice(0, 60);
+        foStatusEl.style.color = llm.ok ? '#1a7a3a' : '#b45309';
+        foStatusEl.style.fontWeight = '600';
       }
-      var claudeStatusEl2 = document.getElementById('blog-model-claude-status');
-      if (claudeStatusEl2) {
-        claudeStatusEl2.textContent = 'available — set BLOG_LLM_PROVIDER=anthropic + ANTHROPIC_API_KEY';
-        claudeStatusEl2.style.color = 'var(--text-dim)';
+      var clSt = document.getElementById('blog-model-claude-status');
+      if (clSt) {
+        clSt.textContent = 'bereit — BLOG_LLM_PROVIDER=anthropic + ANTHROPIC_API_KEY setzen';
+        clSt.style.color = 'var(--text-dim)';
       }
     }
   } catch(e) {
     var b = document.getElementById('blog-llm-status-badge');
-    if (b) { b.textContent = 'error'; b.style.color = '#f87171'; }
+    if (b) { b.textContent = 'Fehler'; b.style.background = '#fee2e2'; b.style.color = '#b91c1c'; }
   }
 }