Token-Optimierung: Prompt Caching + Tool-Result-Truncation in History

wwwroot/css/chat.css

@@ -383,3 +383,56 @@
   text-decoration: none;
   color: var(--text);
 }
+
+/* System-Prompt Modal */
+
+.sp-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.sp-modal {
+  background: var(--f2-bg);
+  border: var(--border-width) solid var(--f2-border);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  width: 90vw;
+  max-width: 700px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.sp-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--box-padding);
+  border-bottom: var(--border-width) solid var(--f1-border);
+  background: var(--f1-bg);
+  flex-shrink: 0;
+}
+
+.sp-close {
+  width: 2em;
+  aspect-ratio: 1;
+  padding: 0;
+  line-height: 1;
+}
+
+.sp-body {
+  padding: var(--page-padding);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.sp-loading {
+  text-align: center;
+  opacity: var(--semi-transparent);
+  padding: 2em;
+}

wwwroot/index.html

@@ -144,6 +144,7 @@
       <div class="header-menu">
         <button class="header-menu-trigger" id="chatMenuBtn">⋮</button>
         <div class="header-menu-dropdown" id="chatMenuDropdown" hidden>
+          <button class="header-menu-item" id="systemPromptBtn">System-Prompt anzeigen</button>
           <button class="header-menu-item" id="archiveBtn">Archivieren</button>
         </div>
       </div>

wwwroot/js/api.js

@@ -112,6 +112,12 @@ async function apiExecCommand(sessionId, command) {
   });
 }
 
+async function apiGetSystemPrompt(sessionId) {
+  const resp = await fetch(`/api/sessions/${sessionId}/system-prompt`);
+  if (!resp.ok) throw new Error('System-Prompt konnte nicht geladen werden');
+  return resp.text();
+}
+
 async function apiIsStreaming(sessionId) {
   const resp = await fetch(`/api/sessions/${sessionId}/streaming`);
   return resp.json();

wwwroot/js/pages/chat-page.js

@@ -183,6 +183,13 @@ registerPage('chat', {
       });
     }
 
+    // System-Prompt anzeigen
+    const systemPromptBtn = document.getElementById('systemPromptBtn');
+    if (systemPromptBtn) systemPromptBtn.addEventListener('click', () => {
+      if (chatMenuDropdown) chatMenuDropdown.hidden = true;
+      showSystemPromptModal(sessionId);
+    });
+
     // Archivieren
     const archiveBtn = document.getElementById('archiveBtn');
     if (archiveBtn) archiveBtn.addEventListener('click', () => {

wwwroot/js/ui.js

@@ -409,6 +409,58 @@ async function loadAndShowAttachments(messageId, indicator) {
   }
 }
 
+// ── System-Prompt Modal ──
+
+async function showSystemPromptModal(sessionId) {
+  // Overlay
+  const overlay = document.createElement('div');
+  overlay.className = 'sp-overlay';
+
+  // Modal
+  const modal = document.createElement('div');
+  modal.className = 'sp-modal';
+
+  // Header
+  const header = document.createElement('div');
+  header.className = 'sp-header';
+  const title = document.createElement('span');
+  title.textContent = 'System-Prompt';
+  const closeBtn = document.createElement('button');
+  closeBtn.textContent = '✕';
+  closeBtn.className = 'sp-close';
+  header.appendChild(title);
+  header.appendChild(closeBtn);
+
+  // Body
+  const body = document.createElement('div');
+  body.className = 'sp-body markdown';
+  body.innerHTML = '<div class="sp-loading">Laden...</div>';
+
+  modal.appendChild(header);
+  modal.appendChild(body);
+  overlay.appendChild(modal);
+  document.body.appendChild(overlay);
+
+  // Schließen
+  const close = () => overlay.remove();
+  closeBtn.addEventListener('click', close);
+  overlay.addEventListener('click', (e) => {
+    if (e.target === overlay) close();
+  });
+  const onKey = (e) => {
+    if (e.key === 'Escape') { close(); document.removeEventListener('keydown', onKey); }
+  };
+  document.addEventListener('keydown', onKey);
+
+  // Laden
+  try {
+    const prompt = await apiGetSystemPrompt(sessionId);
+    body.innerHTML = renderMarkdown(prompt);
+  } catch (e) {
+    body.innerHTML = '<div class="sp-loading" style="color:var(--dangerous)">Fehler beim Laden des System-Prompts</div>';
+  }
+}
+
 // ── Meta Bar ──
 
 function setMeta(text) {