From 12f3cd3e55f8ace95434f2dcefa4ff07200f3abe Mon Sep 17 00:00:00 2001
From: duffyduck <info@hacker-net.de>
Date: Sun, 25 Oct 2026 14:40:41 +0100
Subject: [PATCH] feat(diagnostic): i-Button erklaert das Kontextfenster
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hinter jeder Token-Auswahl bei den LLM-Karten ein kleines i: oeffnet eine
Erklaerung — Arbeitsgedaechtnis pro Anfrage statt Sitzungsgedaechtnis, was
beim Ueberlauf passiert, Bild Schreibtisch/Aktenordner/Archiv, Speicherbedarf.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 diagnostic/index.html | 38 ++++++++++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/diagnostic/index.html b/diagnostic/index.html
index d283cd8..055a2df 100644
--- a/diagnostic/index.html
+++ b/diagnostic/index.html
@@ -197,6 +197,31 @@
     </div>
   </div>
 
+  <!-- Erklaerung Kontextfenster (i-Button bei den LLM-Karten) -->
+  <div id="ctx-info-modal" style="display:none;position:fixed;inset:0;z-index:1002;background:rgba(0,0,0,0.8);align-items:center;justify-content:center;" onclick="if(event.target===this)this.style.display='none'">
+    <div style="background:#0D0D1A;border:1px solid #2A2A3E;border-radius:10px;padding:18px 20px;max-width:620px;width:94%;max-height:90vh;overflow:auto;color:#C8C8D8;font-size:13px;line-height:1.55;">
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
+        <h3 style="margin:0;color:#fff;">Was ist das Kontextfenster?</h3>
+        <button onclick="document.getElementById('ctx-info-modal').style.display='none'" style="background:none;border:none;color:#8888AA;font-size:22px;cursor:pointer;">&times;</button>
+      </div>
+      <p style="margin:6px 0;">Das <b>Arbeitsgedächtnis für eine einzelne Anfrage</b> — nicht das Gedächtnis einer ganzen Sitzung.</p>
+      <ul style="margin:6px 0 10px 18px;padding:0;">
+        <li>Das Modell selbst merkt sich <b>nichts</b> zwischen zwei Anfragen.</li>
+        <li>Bei jeder Anfrage schickt das Programm (ARIA, Software-Schmiede …) den <b>ganzen bisherigen Verlauf</b> mit: Systemprompt, Werkzeuge, alle Nachrichten und Werkzeug-Ergebnisse.</li>
+        <li>Die eingestellten Tokens sind die Obergrenze dafür, wie viel davon <b>plus die Antwort</b> in eine Anfrage passt.</li>
+      </ul>
+      <p style="margin:6px 0;"><b>Wird der Verlauf länger,</b> muss das Programm kürzen — meist die ältesten Teile. Die sind für das Modell dann weg. Ist der Verlauf trotzdem zu lang, lehnt die Box die Anfrage ab (Fehler <code>context_exceeded</code>).</p>
+      <div style="background:#12122A;border:1px solid #1E1E2E;border-radius:8px;padding:10px 12px;margin:10px 0;">
+        <div style="color:#E0E0F0;font-weight:700;margin-bottom:4px;">Bildlich</div>
+        <div>📄 <b>Kontext</b> = der Schreibtisch: nur was gerade draufliegt, sieht das Modell. 32k Tokens ≈ 20–25 Seiten Text (Code: weniger).</div>
+        <div>🗂️ <b>Sitzung</b> = der Aktenordner beim Programm: beliebig dick, aber pro Anfrage passt nur ein Teil auf den Schreibtisch.</div>
+        <div>🗄️ <b>ARIAs Langzeitgedächtnis</b> = das Archiv: daraus wird bei Bedarf gezielt etwas auf den Schreibtisch gelegt.</div>
+      </div>
+      <p style="margin:6px 0;"><b>Mehr Kontext</b> = das Modell überblickt in einer Anfrage mehr vom Verlauf, es muss seltener gekürzt werden. Es kostet aber <b>Grafikspeicher</b> (die GB-Angabe in der Auswahl ist eine Schätzung für Modell + Kontext). Passt es nicht auf die Karte, setzt die Box sie von selbst auf den alten Wert zurück.</p>
+      <p style="margin:6px 0;color:#8888AA;">Höchstens so viel, wie das Modell gelernt hat (steht in der Modelldatei, z.B. Gemma 4 12B: 256k). Angebundene Programme bekommen den eingestellten Wert automatisch mitgeteilt.</p>
+    </div>
+  </div>
+
   <!-- Kartenauslastung: alle KI-Boxen, alle Karten, live -->
   <div id="card-load-modal" style="display:none;position:fixed;inset:0;z-index:1001;background:rgba(0,0,0,0.8);align-items:center;justify-content:center;" onclick="if(event.target===this)closeCardLoad()">
     <div style="background:#0D0D1A;border:1px solid #2A2A3E;border-radius:10px;padding:16px;max-width:1000px;width:94%;max-height:92vh;overflow:auto;display:flex;flex-direction:column;gap:10px;">
@@ -9380,16 +9405,19 @@
           const ctxSel = sl.model
             ? `<select data-box="${escapeHtml(b.instanceId)}" data-gpu="${escapeHtml(sl.gpu)}" data-model="${escapeHtml(sl.model)}" data-current="${curCtx}"
                  onchange="onLlmCardCtx(this)" ${job ? 'disabled' : ''} title="Kontextfenster (Eingabe + Ausgabe). GB = geschätzter Grafikspeicher für Modell + Kontext auf dieser Karte.${sl.ctxMax ? ' Das Modell kann höchstens ' + sl.ctxMax + ' Tokens.' : ''}"
-                 style="background:#1E1E2E;border:1px solid #333;border-radius:4px;padding:5px 6px;color:#E0E0F0;font-size:12px;">${ctxOpts}</select>`
-            : '<span></span>';
-          rows.push(`<div style="display:grid;grid-template-columns:minmax(220px,1fr) minmax(260px,2fr) 230px 160px;gap:10px;align-items:center;">
+                 style="flex:1;min-width:0;background:#1E1E2E;border:1px solid #333;border-radius:4px;padding:5px 6px;color:#E0E0F0;font-size:12px;">${ctxOpts}</select>`
+            : '';
+          const ctxCell = `<div style="display:flex;gap:6px;align-items:center;min-width:0;">${ctxSel}
+              <button type="button" onclick="openCtxInfo()" title="Was ist das Kontextfenster?"
+                      style="flex-shrink:0;width:22px;height:22px;border-radius:50%;border:1px solid #444466;background:#1E1E2E;color:#8888AA;font-size:12px;font-weight:700;cursor:pointer;padding:0;line-height:20px;">i</button></div>`;
+          rows.push(`<div style="display:grid;grid-template-columns:minmax(220px,1fr) minmax(260px,2fr) 260px 160px;gap:10px;align-items:center;">
               <div><b style="color:#E0E0F0;">${escapeHtml(b.node)}</b> · Karte ${escapeHtml(sl.gpu)}
                 <div style="color:#555570;font-size:11px;">${escapeHtml(sl.gpuName || '')}${vramGB ? ' · ' + vramGB.toFixed(0) + ' GB' : ''}${sl.vramUsedMB >= 0 ? ' · belegt ' + (sl.vramUsedMB / 1024).toFixed(1) + ' GB' : ''}${sl.ctx ? ' · Kontext ' + sl.ctx : ''}</div>
                 ${sl.onCpu ? '<div style="color:#FF9F0A;font-size:11px;" title="llama.cpp findet die Karte nicht und rechnet langsam auf der CPU. Ursache meist: Treiber zu alt fuer das CUDA im llama-swap-Image. Abhilfe: auf der Box  sudo ./bootstrap.sh --upgrade-driver">⚠ Modell läuft auf der CPU, Karte leer — Treiber zu alt? (bootstrap.sh --upgrade-driver)</div>' : ''}</div>
               <select data-box="${escapeHtml(b.instanceId)}" data-gpu="${escapeHtml(sl.gpu)}" data-current="${escapeHtml(sl.model || '')}"
                       onchange="onLlmCardSelect(this)" ${job ? 'disabled' : ''}
                       style="background:#1E1E2E;border:1px solid #333;border-radius:4px;padding:5px 8px;color:#E0E0F0;font-size:12px;">${opts.join('')}</select>
-              ${ctxSel}
+              ${ctxCell}
               <span style="color:${job ? '#FFD60A' : c};font-size:12px;">${jobTxt || st}</span>
             </div>`);
         }
@@ -9397,6 +9425,8 @@
       box.innerHTML = rows.join('');
     }
 
+    function openCtxInfo() { document.getElementById('ctx-info-modal').style.display = 'flex'; }
+
     // Kontextfenster einer Karte aendern = dasselbe Modell mit anderem -c neu
     // laden. Programme bekommen den neuen Wert automatisch (ctx in
     // llm_cluster_models). Passt es nicht in den Grafikspeicher, setzt die Box