feat: Payload-Preview im Chat-Menü + Reminder von hinten gezählt

- Neuer Endpoint GET /api/sessions/{id}/payload-preview
  Gibt den exakten Anthropic-API-Payload als JSON zurück (read-only)
- Chat-Menü: 'Payload anzeigen' öffnet Modal mit formatiertem JSON
- Reminder-Logik umgebaut: halbes Intervall (15) vor Ende,
  dann volle Intervalle (30) rückwärts statt von vorne gezählt
- CSS: Payload-Modal Styling, kleine Variable-Fixes

wwwroot/css/chat.css

@@ -874,6 +874,23 @@
   padding: 2em;
 }
 
+/* Payload Preview Modal */
+
+.payload-preview-modal {
+  max-width: 90vw;
+}
+
+.payload-json {
+  font-family: var(--mono);
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+  padding: var(--box-padding);
+  background: var(--f3-bg);
+  border-radius: var(--border-radius);
+  border: var(--border-width) solid var(--f2-border);
+}
+
 /* Command Output Modal */
 
 .cmd-output-modal {
@@ -1276,7 +1293,7 @@
 /* ── OpenClaw Import Modal ── */
 
 .openclaw-import-modal {
-  max-width: 700px;
+  max-width: var(--modal-width);
 }
 
 .openclaw-hint {
@@ -1314,8 +1331,8 @@
 }
 
 .openclaw-session-id {
-  font-family: var(--mono-font);
-  font-size: var(--small-font-size);
+  font-family: var(--mono);
+  font-size: var(--mono-size);
   color: var(--primary);
   font-weight: 600;
 }

wwwroot/index.html

@@ -386,6 +386,7 @@
         <div class="header-menu-dropdown" id="chatMenuDropdown" hidden>
           <button class="header-menu-item" id="remoteBtn"><i class="fa fa-desktop"></i> Remote-Verbindungen</button>
           <button class="header-menu-item" id="systemPromptBtn">System-Prompt anzeigen</button>
+          <button class="header-menu-item" id="payloadPreviewBtn">Payload anzeigen</button>
           <button class="header-menu-item" id="archiveBtn">Archivieren</button>
         </div>
       </div>

wwwroot/js/api.js

@@ -111,6 +111,11 @@ function apiGetSystemPromptBlocks(sessionId, planMode) {
   return _get(url);
 }
 
+function apiGetPayloadPreview(sessionId, planMode) {
+  var url = '/api/sessions/' + sessionId + '/payload-preview' + (planMode ? '?planMode=true' : '');
+  return _get(url);
+}
+
 function apiIsStreaming(sessionId) { return _get('/api/sessions/' + sessionId + '/streaming'); }
 function apiGitStatus(sessionId) { return _get('/api/sessions/' + sessionId + '/git-status', null); }
 

wwwroot/js/modals.js

@@ -76,6 +76,26 @@ async function showSystemPromptModal(sessionId) {
   }
 }
 
+// ── Payload Preview Modal ──
+
+async function showPayloadPreviewModal(sessionId) {
+  const { body } = _createModal('Payload Preview', { modal: 'payload-preview-modal' });
+  body.innerHTML = '<div class="sp-loading">Laden...</div>';
+
+  try {
+    var planMode = typeof _planModeActive !== 'undefined' && _planModeActive;
+    var payload = await apiGetPayloadPreview(sessionId, planMode);
+    body.innerHTML = '';
+
+    var pre = document.createElement('pre');
+    pre.className = 'payload-json';
+    pre.textContent = JSON.stringify(payload, null, 2);
+    body.appendChild(pre);
+  } catch (e) {
+    body.innerHTML = '<div class="sp-loading text-danger">Fehler beim Laden des Payloads</div>';
+  }
+}
+
 // ── Command Output Modal ──
 
 function showCommandOutputModal(name, command, result) {

wwwroot/js/pages/chat-page.js

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