From ca55783b9087dbdd2c7bb479e864718cb8ddf6ff Mon Sep 17 00:00:00 2001
From: Oliver Hofmann <oliver.hofmann@dokoliho.de>
Date: Sun, 10 May 2026 10:15:48 +0200
Subject: [PATCH] Show last 10 log lines in settings section

---
 frontend/src/main.jsx   | 24 +++++++++++++++++++++---
 frontend/src/styles.css | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 54b1fa1..2017316 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -76,7 +76,7 @@ const EMPTY_KEY_FORM = {
   name: '', expires_at: '', daily_tokens: '', monthly_tokens: '', daily_requests: '', monthly_requests: '',
 };
 
-function SettingsSection({ password }) {
+function SettingsSection({ password, refreshKey }) {
   const [settings, setSettings] = useState(null);
   const [availableModels, setAvailableModels] = useState([]);
   const [modelsLoading, setModelsLoading] = useState(false);
@@ -85,6 +85,8 @@ function SettingsSection({ password }) {
   const [appVersion, setAppVersion] = useState(null);
   const [saved, setSaved] = useState(false);
   const [error, setError] = useState(null);
+  const [usageLog, setUsageLog] = useState([]);
+  const [errorLog, setErrorLog] = useState([]);
 
   const fetchModels = async (url, currentModel) => {
     setModelsLoading(true);
@@ -112,14 +114,18 @@ function SettingsSection({ password }) {
     Promise.all([
       axios.get('/api/settings', { headers }),
       axios.get('/api/proxy-info', { headers }),
-    ]).then(([settingsRes, proxyRes]) => {
+      axios.get('/api/logs/usage', { headers }),
+      axios.get('/api/logs/error', { headers }),
+    ]).then(([settingsRes, proxyRes, usageRes, errorRes]) => {
       const s = settingsRes.data;
       setSettings(s);
       setProxyEndpoint(proxyRes.data.endpoint);
       setAppVersion(proxyRes.data.version);
+      setUsageLog(usageRes.data.lines);
+      setErrorLog(errorRes.data.lines);
       fetchModels(s.ollama_url, s.force_model);
     }).catch(() => setError('Einstellungen konnten nicht geladen werden.'));
-  }, []);
+  }, [refreshKey]);
 
   const handleSave = async (e) => {
     e.preventDefault();
@@ -192,6 +198,18 @@ function SettingsSection({ password }) {
         {saved && <div className="success">Gespeichert.</div>}
         <button type="submit">Speichern</button>
       </form>
+      <div className="log-section">
+        <h3>Nutzungslog (letzte 10 Einträge)</h3>
+        <pre className="log-pre">
+          {usageLog.length > 0 ? usageLog.join('\n') : '— keine Einträge —'}
+        </pre>
+        {errorLog.length > 0 && (
+          <>
+            <h3>Fehlerlog</h3>
+            <pre className="log-pre log-pre-error">{errorLog.join('\n')}</pre>
+          </>
+        )}
+      </div>
     </section>
   );
 }
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 85a26c8..a61ff7a 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -452,3 +452,36 @@ tr:hover {
 .btn-cancel:hover {
   background: #7f8c8d;
 }
+
+.log-section {
+  margin-top: 24px;
+  border-top: 1px solid #eee;
+  padding-top: 16px;
+}
+
+.log-section h3 {
+  font-size: 13px;
+  font-weight: 600;
+  color: #555;
+  margin: 0 0 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.log-pre {
+  background: #1e2a35;
+  color: #c8d6df;
+  font-family: 'Menlo', 'Consolas', monospace;
+  font-size: 11px;
+  line-height: 1.6;
+  padding: 10px 14px;
+  border-radius: 4px;
+  margin: 0 0 14px;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.log-pre-error {
+  background: #2d1b1b;
+  color: #f5a0a0;
+}