SysOps: manual — 2026-07-30 09:33 UTC

cockpit/templates/settings.html

@@ -119,27 +119,48 @@
     <div class="settings-panel-head">
       <div>
         <h2>AI / LLM providers</h2>
-        <p class="page-tip">Koppel cloud API's (DeepSeek, Gemini, Groq, OpenRouter) naast lokale Ollama. Standaard provider wordt gebruikt in chat, Herman en documenten.</p>
+        <p class="page-tip">Cloud LLM naast lokale Ollama. Standaard provider = Herman, briefing, documenten.</p>
       </div>
       <button type="button" class="btn btn-primary" @click="openForm()">+ Nieuwe provider</button>
     </div>
 
+    
+    <div class="llm-hero-card">
+      <div class="llm-hero-body">
+        <div class="llm-hero-badge">Aanbevolen</div>
+        <h3>OpenRouter · DeepSeek V4 Flash</h3>
+        <p class="llm-hero-lead">
+          Eén API key voor Herman, briefing en document-chat.
+          Model: <code>deepseek/deepseek-v4-flash</code>
+        </p>
+        <ol class="llm-hero-steps">
+          <li>Key op <a href="https://openrouter.ai/keys" target="_blank" rel="noopener">openrouter.ai/keys</a></li>
+          <li><strong>Configureren</strong> → API key plakken → Opslaan → Test</li>
+          <li><strong>Maak standaard</strong> op de provider-kaart hieronder</li>
+        </ol>
+      </div>
+      <button type="button" class="btn btn-primary" @click="quickAddOpenRouter()">Configureren</button>
+    </div>
+
     <div class="settings-active-banner" x-show="defaultProvider" x-cloak>
       <span class="badge badge-positive">Standaard</span>
       <span x-text="defaultProvider ? defaultProvider.label + ' · ' + defaultProvider.model : ''"></span>
     </div>
 
-    <div class="llm-preset-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0.65rem;margin-bottom:1.25rem">
+    <h3 class="llm-section-title">Snel toevoegen</h3>
+    <p class="llm-section-sub">Klik een preset — daarna API key invullen in het formulier.</p>
+    <div class="llm-preset-grid">
       <template x-for="pr in presets" :key="pr.id">
-        <div class="perm-card" style="cursor:pointer" @click="quickAdd(pr)">
-          <strong x-text="pr.label"></strong>
-          <p class="page-tip" style="margin:0.35rem 0" x-text="pr.hint"></p>
-          <small x-text="(pr.models||[]).slice(0,2).join(', ')"></small>
-        </div>
+        <button type="button" class="llm-preset-card" @click="quickAdd(pr)">
+          <span class="llm-preset-name" x-text="pr.label"></span>
+          <span class="llm-preset-hint" x-text="pr.hint"></span>
+          <span class="llm-preset-models" x-text="(pr.models||[]).slice(0,2).join(' · ')"></span>
+        </button>
       </template>
     </div>
 
-    <div class="email-account-list">
+    <h3 class="llm-section-title">Geconfigureerde providers</h3>
+    <div class="email-account-list llm-provider-list">
       <template x-for="p in providers" :key="p.id">
         <article class="email-account-card" :class="{ 'is-active': p.is_default }">
           <div class="email-account-card-head">