Proxy fixes, streaming support, Admin-UI overhaul

Backend:
- Fix Content-Length mismatch by not forwarding client headers to Ollama
- Proxy /v1/chat/completions directly to Ollama's OpenAI-compatible endpoint
  (eliminates manual Ollama↔OpenAI format conversion, fixes tool use)
- Add streaming support via SSE passthrough
- Fix ollama_url /v1 suffix stripped on save
- Replace BaseHTTPMiddleware with FastAPI global dependency (fixes double logging)
- Add rotating usage log (8 KB, logs key name + model + token estimate + prompt preview)
- Add httpx timeout 300s
- Add activate and delete endpoints for API keys
- Return usage data (tokens/requests) in GET /api/api-keys

Frontend:
- Admin table: remove ID column, status as icon, icon-only action buttons with CSS tooltips
- Add activate + delete buttons; edit available for inactive keys too
- Quota columns: fixed equal width, progress bars with k-unit formatting
- Create form: structured layout matching edit form style
- Edit form: token inputs in k units (÷1000 display, ×1000 on save)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/main.jsx

@@ -9,6 +9,23 @@ function authHeaders(token) {
   return { Authorization: `Bearer ${token}` };
 }
 
+const fmtK = (n) => { const k = n / 1000; return k % 1 === 0 ? `${k}k` : `${k.toFixed(1)}k`; };
+
+function QuotaBar({ used, limit, isToken = false }) {
+  if (limit == null) return <span className="quota-unlimited">∞</span>;
+  const pct = Math.min(100, (used / limit) * 100);
+  const color = pct >= 90 ? '#e74c3c' : pct >= 70 ? '#e67e22' : '#27ae60';
+  const fmt = isToken ? fmtK : (n) => n.toLocaleString('de-DE');
+  return (
+    <div className="quota-cell">
+      <span className="quota-label">{fmt(used)} / {fmt(limit)}</span>
+      <div className="progress-bar">
+        <div className="progress-fill" style={{ width: `${pct}%`, backgroundColor: color }} />
+      </div>
+    </div>
+  );
+}
+
 function Login({ onLogin }) {
   const [password, setPassword] = useState('');
   const [error, setError] = useState(null);
@@ -162,6 +179,8 @@ function App() {
   const [newKey, setNewKey] = useState(null);
   const [form, setForm] = useState(EMPTY_KEY_FORM);
   const [creating, setCreating] = useState(false);
+  const [editKey, setEditKey] = useState(null);
+  const [editForm, setEditForm] = useState({});
 
   useEffect(() => {
     if (!password) { setLoading(false); return; }
@@ -183,8 +202,8 @@ function App() {
     try {
       const payload = { name: form.name };
       if (form.expires_at)       payload.expires_at       = new Date(form.expires_at).toISOString();
-      if (form.daily_tokens)     payload.daily_tokens     = Number(form.daily_tokens);
-      if (form.monthly_tokens)   payload.monthly_tokens   = Number(form.monthly_tokens);
+      if (form.daily_tokens)     payload.daily_tokens     = Number(form.daily_tokens) * 1000;
+      if (form.monthly_tokens)   payload.monthly_tokens   = Number(form.monthly_tokens) * 1000;
       if (form.daily_requests)   payload.daily_requests   = Number(form.daily_requests);
       if (form.monthly_requests) payload.monthly_requests = Number(form.monthly_requests);
 
@@ -208,6 +227,53 @@ function App() {
     }
   };
 
+  const handleActivate = async (id) => {
+    try {
+      await axios.put(`/api/api-keys/${id}/activate`, {}, { headers: authHeaders(password) });
+      await fetchApiKeys();
+    } catch {
+      setError('Fehler beim Aktivieren.');
+    }
+  };
+
+  const handleDelete = async (id, name) => {
+    if (!window.confirm(`API-Key "${name}" wirklich löschen?`)) return;
+    try {
+      await axios.delete(`/api/api-keys/${id}`, { headers: authHeaders(password) });
+      if (editKey?.id === id) setEditKey(null);
+      await fetchApiKeys();
+    } catch {
+      setError('Fehler beim Löschen.');
+    }
+  };
+
+  const handleEdit = (key) => {
+    setEditKey(key);
+    setEditForm({
+      daily_tokens:     key.daily_tokens    != null ? key.daily_tokens / 1000    : '',
+      monthly_tokens:   key.monthly_tokens  != null ? key.monthly_tokens / 1000  : '',
+      daily_requests:   key.daily_requests  ?? '',
+      monthly_requests: key.monthly_requests ?? '',
+    });
+  };
+
+  const handleSaveEdit = async (e) => {
+    e.preventDefault();
+    try {
+      const payload = {
+        daily_tokens:     editForm.daily_tokens     !== '' ? Number(editForm.daily_tokens) * 1000     : null,
+        monthly_tokens:   editForm.monthly_tokens   !== '' ? Number(editForm.monthly_tokens) * 1000   : null,
+        daily_requests:   editForm.daily_requests   !== '' ? Number(editForm.daily_requests)   : null,
+        monthly_requests: editForm.monthly_requests !== '' ? Number(editForm.monthly_requests) : null,
+      };
+      await axios.patch(`/api/api-keys/${editKey.id}/quota`, payload, { headers: authHeaders(password) });
+      setEditKey(null);
+      await fetchApiKeys();
+    } catch {
+      setError('Fehler beim Speichern der Limits.');
+    }
+  };
+
   const logout = () => {
     sessionStorage.removeItem('admin_password');
     setPassword(null);
@@ -229,43 +295,76 @@ function App() {
       <section>
         <h2>Neuer API-Key</h2>
         <form onSubmit={handleCreate} className="create-form">
-          <input
-            placeholder="Name"
-            value={form.name}
-            onChange={(e) => setForm({ ...form, name: e.target.value })}
-            required
-          />
-          <input
-            type="date"
-            placeholder="Ablaufdatum (leer = unbegrenzt)"
-            value={form.expires_at}
-            onChange={(e) => setForm({ ...form, expires_at: e.target.value })}
-          />
-          <input
-            type="number"
-            placeholder="Tokens/Tag (leer = unbegrenzt)"
-            value={form.daily_tokens}
-            onChange={(e) => setForm({ ...form, daily_tokens: e.target.value })}
-          />
-          <input
-            type="number"
-            placeholder="Tokens/Monat"
-            value={form.monthly_tokens}
-            onChange={(e) => setForm({ ...form, monthly_tokens: e.target.value })}
-          />
-          <input
-            type="number"
-            placeholder="Requests/Tag"
-            value={form.daily_requests}
-            onChange={(e) => setForm({ ...form, daily_requests: e.target.value })}
-          />
-          <input
-            type="number"
-            placeholder="Requests/Monat"
-            value={form.monthly_requests}
-            onChange={(e) => setForm({ ...form, monthly_requests: e.target.value })}
-          />
-          <button type="submit" disabled={creating}>Erstellen</button>
+          <div className="edit-form">
+            <label className="create-name">
+              Name
+              <small>&nbsp;</small>
+              <input
+                value={form.name}
+                onChange={(e) => setForm({ ...form, name: e.target.value })}
+                required
+                placeholder="z. B. alice"
+              />
+            </label>
+            <label className="create-date">
+              Ablaufdatum
+              <small>leer = unbegrenzt</small>
+              <input
+                type="date"
+                value={form.expires_at}
+                onChange={(e) => setForm({ ...form, expires_at: e.target.value })}
+              />
+            </label>
+            <div className="create-btn-wrap">
+              <button type="submit" disabled={creating} className="btn-save">Erstellen</button>
+            </div>
+          </div>
+          <div className="edit-form">
+            <label>
+              Tokens/Tag (k)
+              <small>leer = unbegrenzt</small>
+              <input
+                type="number"
+                min="0"
+                placeholder="∞"
+                value={form.daily_tokens}
+                onChange={(e) => setForm({ ...form, daily_tokens: e.target.value })}
+              />
+            </label>
+            <label>
+              Tokens/Monat (k)
+              <small>leer = unbegrenzt</small>
+              <input
+                type="number"
+                min="0"
+                placeholder="∞"
+                value={form.monthly_tokens}
+                onChange={(e) => setForm({ ...form, monthly_tokens: e.target.value })}
+              />
+            </label>
+            <label>
+              Requests/Tag
+              <small>leer = unbegrenzt</small>
+              <input
+                type="number"
+                min="0"
+                placeholder="∞"
+                value={form.daily_requests}
+                onChange={(e) => setForm({ ...form, daily_requests: e.target.value })}
+              />
+            </label>
+            <label>
+              Requests/Monat
+              <small>leer = unbegrenzt</small>
+              <input
+                type="number"
+                min="0"
+                placeholder="∞"
+                value={form.monthly_requests}
+                onChange={(e) => setForm({ ...form, monthly_requests: e.target.value })}
+              />
+            </label>
+          </div>
         </form>
         {newKey && (
           <div className="new-key-box">
@@ -281,41 +380,99 @@ function App() {
         <table>
           <thead>
             <tr>
-              <th>ID</th>
+              <th></th>
               <th>Name</th>
               <th>Key</th>
-              <th>Status</th>
               <th>Läuft ab</th>
-              <th>Tokens/Tag</th>
-              <th>Tokens/Monat</th>
-              <th>Req/Tag</th>
-              <th>Req/Monat</th>
+              <th className="th-quota">Tokens/Tag</th>
+              <th className="th-quota">Tokens/Monat</th>
+              <th className="th-quota">Req/Tag</th>
+              <th className="th-quota">Req/Monat</th>
               <th></th>
             </tr>
           </thead>
           <tbody>
             {apiKeys.map(key => (
-              <tr key={key.id}>
-                <td>{key.id}</td>
+              <tr key={key.id} className={editKey?.id === key.id ? 'row-editing' : ''}>
+                <td className="td-status">
+                  <span className={key.is_active ? 'status-active' : 'status-inactive'} title={key.is_active ? 'Aktiv' : 'Inaktiv'}>●</span>
+                </td>
                 <td>{key.name}</td>
                 <td>{displayKey(key.key_prefix)}</td>
-                <td>{key.is_active ? 'Aktiv' : 'Inaktiv'}</td>
                 <td>{key.expires_at ? new Date(key.expires_at).toLocaleDateString('de-DE', { timeZone: 'Europe/Berlin' }) : '∞'}</td>
-                <td>{key.daily_tokens ?? '∞'}</td>
-                <td>{key.monthly_tokens ?? '∞'}</td>
-                <td>{key.daily_requests ?? '∞'}</td>
-                <td>{key.monthly_requests ?? '∞'}</td>
-                <td>
-                  {key.is_active && (
-                    <button className="btn-danger" onClick={() => handleDeactivate(key.id)}>
-                      Deaktivieren
-                    </button>
+                <td><QuotaBar used={key.tokens_used_today} limit={key.daily_tokens} isToken /></td>
+                <td><QuotaBar used={key.tokens_used_month} limit={key.monthly_tokens} isToken /></td>
+                <td><QuotaBar used={key.requests_today} limit={key.daily_requests} /></td>
+                <td><QuotaBar used={key.requests_month} limit={key.monthly_requests} /></td>
+                <td className="action-cell">
+                  <button className="btn-icon btn-icon-edit" data-tooltip="Bearbeiten" onClick={() => handleEdit(key)}>✏</button>
+                  {key.is_active ? (
+                    <button className="btn-icon btn-icon-warn" data-tooltip="Deaktivieren" onClick={() => handleDeactivate(key.id)}>⏸</button>
+                  ) : (
+                    <button className="btn-icon btn-icon-ok" data-tooltip="Aktivieren" onClick={() => handleActivate(key.id)}>▶</button>
                   )}
+                  <button className="btn-icon btn-icon-danger" data-tooltip="Löschen" onClick={() => handleDelete(key.id, key.name)}>✕</button>
                 </td>
               </tr>
             ))}
           </tbody>
         </table>
+
+        {editKey && (
+          <div className="edit-section">
+            <h3>Limits bearbeiten: <em>{editKey.name}</em></h3>
+            <form onSubmit={handleSaveEdit} className="edit-form">
+              <label>
+                Tokens/Tag (k)
+                <small>leer = unbegrenzt</small>
+                <input
+                  type="number"
+                  min="0"
+                  value={editForm.daily_tokens}
+                  onChange={(e) => setEditForm({ ...editForm, daily_tokens: e.target.value })}
+                  placeholder="∞"
+                />
+              </label>
+              <label>
+                Tokens/Monat (k)
+                <small>leer = unbegrenzt</small>
+                <input
+                  type="number"
+                  min="0"
+                  value={editForm.monthly_tokens}
+                  onChange={(e) => setEditForm({ ...editForm, monthly_tokens: e.target.value })}
+                  placeholder="∞"
+                />
+              </label>
+              <label>
+                Requests/Tag
+                <small>leer = unbegrenzt</small>
+                <input
+                  type="number"
+                  min="0"
+                  value={editForm.daily_requests}
+                  onChange={(e) => setEditForm({ ...editForm, daily_requests: e.target.value })}
+                  placeholder="∞"
+                />
+              </label>
+              <label>
+                Requests/Monat
+                <small>leer = unbegrenzt</small>
+                <input
+                  type="number"
+                  min="0"
+                  value={editForm.monthly_requests}
+                  onChange={(e) => setEditForm({ ...editForm, monthly_requests: e.target.value })}
+                  placeholder="∞"
+                />
+              </label>
+              <div className="edit-actions">
+                <button type="submit" className="btn-save">Speichern</button>
+                <button type="button" className="btn-cancel" onClick={() => setEditKey(null)}>Abbrechen</button>
+              </div>
+            </form>
+          </div>
+        )}
       </section>
     </div>
   );
@@ -325,4 +482,4 @@ ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-);
+);

frontend/src/styles.css

@@ -92,30 +92,37 @@ tr:hover {
 
 .create-form {
   display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.create-form .edit-form {
+  margin-bottom: 0;
+}
+
+.create-name {
+  flex: 0 0 auto !important;
+}
+
+.create-name input {
+  width: 200px;
+}
+
+.create-date {
+  flex: 0 0 auto !important;
+}
+
+.create-date input[type="date"] {
+  width: 150px;
+}
+
+.create-btn-wrap {
+  flex: 0 0 auto;
+  display: flex;
   align-items: flex-end;
 }
 
-.create-form input {
-  padding: 8px 10px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-size: 14px;
-  flex: 1 1 160px;
-}
-
-.create-form button {
-  padding: 8px 20px;
-  background: #27ae60;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.create-form button:disabled {
+.create-form .btn-save:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
@@ -218,3 +225,198 @@ tr:hover {
   color: #999;
   font-size: 12px;
 }
+
+/* Quota progress bars */
+.th-quota {
+  width: 90px;
+}
+
+.quota-cell {
+  width: 100%;
+}
+
+.quota-label {
+  font-size: 12px;
+  color: #555;
+  white-space: nowrap;
+}
+
+.quota-unlimited {
+  color: #aaa;
+  font-size: 14px;
+}
+
+.progress-bar {
+  height: 4px;
+  background: #e2e8f0;
+  border-radius: 2px;
+  margin-top: 4px;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+/* Edit form */
+.td-status {
+  width: 20px;
+  text-align: center;
+}
+
+.status-active  { color: #27ae60; font-size: 12px; }
+.status-inactive { color: #bdc3c7; font-size: 12px; }
+
+.btn-icon {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 2px 4px;
+  margin-right: 2px;
+  border-radius: 3px;
+  line-height: 1;
+  position: relative;
+}
+
+.btn-icon:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.btn-icon-edit   { color: #2980b9; }
+.btn-icon-warn   { color: #e67e22; }
+.btn-icon-ok     { color: #27ae60; }
+.btn-icon-danger { color: #e74c3c; }
+
+.btn-icon::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: #2c3e50;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: 400;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s;
+  z-index: 1000;
+}
+
+.btn-icon::before {
+  content: '';
+  position: absolute;
+  bottom: calc(100% + 2px);
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: #2c3e50;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s;
+  z-index: 1000;
+}
+
+.btn-icon:hover::after,
+.btn-icon:hover::before {
+  opacity: 1;
+}
+
+.action-cell {
+  white-space: nowrap;
+  position: relative;
+  overflow: visible;
+}
+
+.row-editing {
+  background: #eaf4fb !important;
+}
+
+.edit-section {
+  margin-top: 20px;
+  padding: 16px 20px;
+  background: #f0f7ff;
+  border: 1px solid #3498db;
+  border-radius: 6px;
+}
+
+.edit-section h3 {
+  margin: 0 0 14px;
+  font-size: 15px;
+  color: #2c3e50;
+  font-weight: 600;
+}
+
+.edit-section h3 em {
+  font-style: normal;
+  color: #2980b9;
+}
+
+.edit-form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  align-items: flex-end;
+}
+
+.edit-form label {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #34495e;
+}
+
+.edit-form label small {
+  font-weight: 400;
+  color: #999;
+  font-size: 11px;
+}
+
+.edit-form input {
+  padding: 6px 8px;
+  border: 1px solid #bdc3c7;
+  border-radius: 4px;
+  font-size: 14px;
+  width: 130px;
+}
+
+.edit-actions {
+  display: flex;
+  gap: 8px;
+  padding-bottom: 2px;
+}
+
+.btn-save {
+  padding: 6px 18px;
+  background: #27ae60;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.btn-save:hover {
+  background: #219a52;
+}
+
+.btn-cancel {
+  padding: 6px 18px;
+  background: #95a5a6;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.btn-cancel:hover {
+  background: #7f8c8d;
+}