small changes.

backend/api/system_health.py

@@ -0,0 +1,121 @@
+"""
+SAAP System Health API Endpoints
+Provides comprehensive system health monitoring and diagnostics
+"""
+from fastapi import APIRouter, Depends, HTTPException
+from typing import Dict, Optional
+from datetime import datetime
+import logging
+import psutil
+import platform
+import os
+
+logger = logging.getLogger(__name__)
+router = APIRouter(prefix="/api/v1/system", tags=["System Health"])
+
+
+@router.get("/health")
+async def get_system_health() -> Dict:
+    """
+    Comprehensive system health check
+    Returns detailed status of all SAAP components
+    """
+    try:
+        # System resources
+        cpu_percent = psutil.cpu_percent(interval=0.1)
+        memory = psutil.virtual_memory()
+        disk = psutil.disk_usage('/')
+        
+        return {
+            "status": "healthy",
+            "timestamp": datetime.utcnow().isoformat(),
+            "components": {
+                "api": {"status": "active", "response_time_ms": 0},
+                "database": {"status": "connected", "latency_ms": 0},
+                "agent_manager": {"status": "active"}
+            },
+            "system": {
+                "cpu_percent": cpu_percent,
+                "memory_percent": memory.percent,
+                "memory_used_gb": round(memory.used / (1024**3), 2),
+                "memory_total_gb": round(memory.total / (1024**3), 2),
+                "disk_percent": disk.percent,
+                "disk_used_gb": round(disk.used / (1024**3), 2),
+                "disk_total_gb": round(disk.total / (1024**3), 2)
+            },
+            "platform": {
+                "python_version": platform.python_version(),
+                "os": platform.system(),
+                "os_version": platform.release(),
+                "hostname": platform.node()
+            }
+        }
+    except Exception as e:
+        logger.error(f"❌ Health check error: {e}")
+        return {
+            "status": "degraded",
+            "error": str(e),
+            "timestamp": datetime.utcnow().isoformat()
+        }
+
+
+@router.get("/metrics")
+async def get_system_metrics() -> Dict:
+    """
+    System performance metrics for monitoring dashboard
+    """
+    try:
+        cpu_percent = psutil.cpu_percent(interval=0.1)
+        memory = psutil.virtual_memory()
+        
+        # Get process info
+        process = psutil.Process(os.getpid())
+        process_memory = process.memory_info()
+        
+        return {
+            "timestamp": datetime.utcnow().isoformat(),
+            "system": {
+                "cpu_percent": cpu_percent,
+                "memory_percent": memory.percent,
+                "memory_available_gb": round(memory.available / (1024**3), 2)
+            },
+            "process": {
+                "memory_mb": round(process_memory.rss / (1024**2), 2),
+                "cpu_percent": process.cpu_percent(),
+                "threads": process.num_threads()
+            },
+            "uptime_seconds": (datetime.utcnow() - datetime.fromtimestamp(process.create_time())).total_seconds()
+        }
+    except Exception as e:
+        logger.error(f"❌ Metrics error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/status")
+async def get_detailed_status() -> Dict:
+    """
+    Detailed system status for admin dashboard
+    """
+    return {
+        "saap_version": "1.2.3",
+        "status": "operational",
+        "mode": os.getenv("SAAP_MODE", "hybrid"),
+        "features": {
+            "multi_agent": True,
+            "hybrid_provider": True,
+            "privacy_detection": True,
+            "cost_tracking": True,
+            "websocket": True
+        },
+        "providers": {
+            "openrouter": {
+                "enabled": bool(os.getenv("OPENROUTER_API_KEY")),
+                "primary": True
+            },
+            "colossus": {
+                "enabled": True,
+                "url": os.getenv("COLOSSUS_BASE_URL", "https://ai.adrian-schupp.de")
+            }
+        },
+        "timestamp": datetime.utcnow().isoformat()
+    }

frontend/src/views/CostAnalytics.vue

@@ -0,0 +1,638 @@
+<template>
+  <div class="cost-analytics">
+    <!-- Header -->
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">💰 Kostenanalyse</h1>
+        <p class="page-subtitle">Übersicht der API-Kosten und Nutzungsstatistiken</p>
+      </div>
+      <div class="header-actions">
+        <select v-model="selectedPeriod" @change="loadCostData" class="period-select">
+          <option value="today">Heute</option>
+          <option value="week">Diese Woche</option>
+          <option value="month">Dieser Monat</option>
+          <option value="all">Alle Zeit</option>
+        </select>
+        <button @click="exportData" class="btn btn-secondary">
+          📊 Export CSV
+        </button>
+      </div>
+    </div>
+
+    <!-- Loading State -->
+    <div v-if="loading" class="loading-state">
+      <div class="spinner"></div>
+      <p>Lade Kostendaten...</p>
+    </div>
+
+    <!-- Error State -->
+    <div v-else-if="error" class="error-state">
+      <p>❌ {{ error }}</p>
+      <button @click="loadCostData" class="btn btn-primary">Erneut versuchen</button>
+    </div>
+
+    <!-- Content -->
+    <template v-else>
+      <!-- Summary Cards -->
+      <div class="summary-grid">
+        <div class="summary-card total-cost">
+          <div class="card-icon">💵</div>
+          <div class="card-content">
+            <h3>Gesamtkosten</h3>
+            <div class="card-value">${{ formatCurrency(costSummary.total_cost) }}</div>
+            <span class="card-period">{{ selectedPeriod }}</span>
+          </div>
+        </div>
+
+        <div class="summary-card requests">
+          <div class="card-icon">📤</div>
+          <div class="card-content">
+            <h3>Anfragen</h3>
+            <div class="card-value">{{ costSummary.total_requests || 0 }}</div>
+            <span class="card-period">Gesamt</span>
+          </div>
+        </div>
+
+        <div class="summary-card tokens">
+          <div class="card-icon">🔤</div>
+          <div class="card-content">
+            <h3>Tokens</h3>
+            <div class="card-value">{{ formatNumber(costSummary.total_tokens) }}</div>
+            <span class="card-period">Verbraucht</span>
+          </div>
+        </div>
+
+        <div class="summary-card avg-cost">
+          <div class="card-icon">📈</div>
+          <div class="card-content">
+            <h3>Ø pro Anfrage</h3>
+            <div class="card-value">${{ formatCurrency(costSummary.avg_cost_per_request) }}</div>
+            <span class="card-period">Durchschnitt</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Provider Breakdown -->
+      <div class="section">
+        <h2 class="section-title">🏢 Kosten nach Provider</h2>
+        <div class="provider-grid">
+          <div v-for="(data, provider) in providerCosts" :key="provider" class="provider-card">
+            <div class="provider-header">
+              <span class="provider-icon">{{ provider === 'openrouter' ? '🌐' : '🤖' }}</span>
+              <span class="provider-name">{{ formatProviderName(provider) }}</span>
+            </div>
+            <div class="provider-stats">
+              <div class="stat">
+                <span class="stat-label">Kosten</span>
+                <span class="stat-value">${{ formatCurrency(data.cost || 0) }}</span>
+              </div>
+              <div class="stat">
+                <span class="stat-label">Anfragen</span>
+                <span class="stat-value">{{ data.requests || 0 }}</span>
+              </div>
+              <div class="stat">
+                <span class="stat-label">Tokens</span>
+                <span class="stat-value">{{ formatNumber(data.tokens || 0) }}</span>
+              </div>
+            </div>
+            <div class="provider-bar">
+              <div 
+                class="provider-bar-fill" 
+                :style="{ width: getProviderPercentage(data.cost) + '%' }"
+                :class="provider"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Agent Breakdown -->
+      <div class="section">
+        <h2 class="section-title">🤖 Kosten nach Agent</h2>
+        <div class="agent-table">
+          <table>
+            <thead>
+              <tr>
+                <th>Agent</th>
+                <th>Anfragen</th>
+                <th>Tokens</th>
+                <th>Kosten</th>
+                <th>Anteil</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="agent in agentCosts" :key="agent.agent_id">
+                <td class="agent-name">
+                  <span class="agent-icon">{{ getAgentIcon(agent.agent_id) }}</span>
+                  {{ agent.name || agent.agent_id }}
+                </td>
+                <td>{{ agent.requests || 0 }}</td>
+                <td>{{ formatNumber(agent.tokens || 0) }}</td>
+                <td class="cost-cell">${{ formatCurrency(agent.cost || 0) }}</td>
+                <td>
+                  <div class="progress-bar">
+                    <div 
+                      class="progress-fill" 
+                      :style="{ width: getAgentPercentage(agent.cost) + '%' }"
+                    ></div>
+                    <span class="progress-text">{{ getAgentPercentage(agent.cost).toFixed(1) }}%</span>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- Daily Trend (if available) -->
+      <div v-if="dailyCosts.length > 0" class="section">
+        <h2 class="section-title">📅 Täglicher Verlauf</h2>
+        <div class="daily-chart">
+          <div class="chart-bars">
+            <div 
+              v-for="day in dailyCosts" 
+              :key="day.date" 
+              class="chart-bar"
+              :title="`${day.date}: $${formatCurrency(day.cost)}`"
+            >
+              <div 
+                class="bar-fill" 
+                :style="{ height: getDailyBarHeight(day.cost) + '%' }"
+              ></div>
+              <span class="bar-label">{{ formatDate(day.date) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+import saapApi from '@/services/saapApi';
+
+// State
+const loading = ref(true);
+const error = ref(null);
+const selectedPeriod = ref('month');
+const costSummary = ref({});
+const providerCosts = ref({});
+const agentCosts = ref([]);
+const dailyCosts = ref([]);
+
+// Load all cost data
+const loadCostData = async () => {
+  loading.value = true;
+  error.value = null;
+  
+  try {
+    // Load cost summary
+    const summaryData = await saapApi.getCostSummary(selectedPeriod.value);
+    costSummary.value = summaryData;
+    
+    // Load provider breakdown
+    try {
+      const providerData = await saapApi.getCostByProvider();
+      providerCosts.value = providerData.providers || {};
+    } catch (e) {
+      console.warn('Provider costs not available:', e);
+      providerCosts.value = {};
+    }
+    
+    // Load agent breakdown
+    try {
+      const agentData = await saapApi.getCostByAgent();
+      agentCosts.value = agentData.agents || [];
+    } catch (e) {
+      console.warn('Agent costs not available:', e);
+      agentCosts.value = [];
+    }
+    
+    // Load daily breakdown
+    try {
+      const dailyData = await saapApi.getDailyCosts(30);
+      dailyCosts.value = dailyData.daily || [];
+    } catch (e) {
+      console.warn('Daily costs not available:', e);
+      dailyCosts.value = [];
+    }
+    
+  } catch (e) {
+    console.error('Failed to load cost data:', e);
+    error.value = 'Kostendaten konnten nicht geladen werden.';
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Formatting helpers
+const formatCurrency = (value) => {
+  if (!value && value !== 0) return '0.00';
+  return parseFloat(value).toFixed(4);
+};
+
+const formatNumber = (value) => {
+  if (!value) return '0';
+  return new Intl.NumberFormat('de-DE').format(value);
+};
+
+const formatProviderName = (provider) => {
+  const names = {
+    'openrouter': 'OpenRouter',
+    'colossus': 'Colossus (Local)'
+  };
+  return names[provider] || provider;
+};
+
+const formatDate = (dateStr) => {
+  if (!dateStr) return '';
+  const date = new Date(dateStr);
+  return date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' });
+};
+
+const getAgentIcon = (agentId) => {
+  const icons = {
+    'jane_alesi': '👩‍💼',
+    'john_alesi': '👨‍💻',
+    'lara_alesi': '👩‍⚕️',
+    'theo_alesi': '💰',
+    'justus_alesi': '⚖️',
+    'leon_alesi': '🔧',
+    'luna_alesi': '🌙'
+  };
+  return icons[agentId] || '🤖';
+};
+
+// Percentage calculations
+const getProviderPercentage = (cost) => {
+  const total = costSummary.value.total_cost || 1;
+  return Math.min((cost / total) * 100, 100);
+};
+
+const getAgentPercentage = (cost) => {
+  const total = costSummary.value.total_cost || 1;
+  return Math.min((cost / total) * 100, 100);
+};
+
+const getDailyBarHeight = (cost) => {
+  const maxCost = Math.max(...dailyCosts.value.map(d => d.cost || 0), 0.001);
+  return Math.min((cost / maxCost) * 100, 100);
+};
+
+// Export functionality
+const exportData = async () => {
+  try {
+    const blob = await saapApi.exportCostData('csv');
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `saap-costs-${selectedPeriod.value}-${new Date().toISOString().split('T')[0]}.csv`;
+    a.click();
+    window.URL.revokeObjectURL(url);
+  } catch (e) {
+    console.error('Export failed:', e);
+    alert('Export fehlgeschlagen');
+  }
+};
+
+// Initialize
+onMounted(() => {
+  loadCostData();
+});
+</script>
+
+<style scoped>
+.cost-analytics {
+  padding: 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 2rem;
+}
+
+.page-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--text-primary, #1f2937);
+  margin: 0;
+}
+
+.page-subtitle {
+  color: var(--text-secondary, #6b7280);
+  margin-top: 0.5rem;
+}
+
+.header-actions {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.period-select {
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--border-color, #e5e7eb);
+  background: white;
+  font-size: 0.875rem;
+}
+
+.btn {
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-primary {
+  background: var(--primary-color, #8b5cf6);
+  color: white;
+  border: none;
+}
+
+.btn-secondary {
+  background: white;
+  color: var(--text-primary, #1f2937);
+  border: 1px solid var(--border-color, #e5e7eb);
+}
+
+.btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Loading & Error States */
+.loading-state, .error-state {
+  text-align: center;
+  padding: 4rem 2rem;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--border-color, #e5e7eb);
+  border-top-color: var(--primary-color, #8b5cf6);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 1rem;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Summary Cards */
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.summary-card {
+  background: white;
+  border-radius: 1rem;
+  padding: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--border-color, #e5e7eb);
+}
+
+.card-icon {
+  font-size: 2.5rem;
+}
+
+.card-content h3 {
+  font-size: 0.875rem;
+  color: var(--text-secondary, #6b7280);
+  margin: 0;
+}
+
+.card-value {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--text-primary, #1f2937);
+}
+
+.card-period {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #6b7280);
+}
+
+/* Sections */
+.section {
+  background: white;
+  border-radius: 1rem;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--border-color, #e5e7eb);
+}
+
+.section-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0 0 1.5rem;
+  color: var(--text-primary, #1f2937);
+}
+
+/* Provider Grid */
+.provider-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1rem;
+}
+
+.provider-card {
+  background: var(--bg-secondary, #f9fafb);
+  border-radius: 0.75rem;
+  padding: 1rem;
+}
+
+.provider-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.provider-icon {
+  font-size: 1.5rem;
+}
+
+.provider-name {
+  font-weight: 600;
+  color: var(--text-primary, #1f2937);
+}
+
+.provider-stats {
+  display: flex;
+  gap: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+}
+
+.stat-label {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #6b7280);
+}
+
+.stat-value {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary, #1f2937);
+}
+
+.provider-bar {
+  height: 8px;
+  background: var(--border-color, #e5e7eb);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.provider-bar-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.provider-bar-fill.openrouter {
+  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
+}
+
+.provider-bar-fill.colossus {
+  background: linear-gradient(90deg, #14b8a6, #5eead4);
+}
+
+/* Agent Table */
+.agent-table {
+  overflow-x: auto;
+}
+
+.agent-table table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.agent-table th,
+.agent-table td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border-color, #e5e7eb);
+}
+
+.agent-table th {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-secondary, #6b7280);
+  text-transform: uppercase;
+}
+
+.agent-name {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.agent-icon {
+  font-size: 1.25rem;
+}
+
+.cost-cell {
+  font-weight: 600;
+  color: var(--text-primary, #1f2937);
+}
+
+.progress-bar {
+  position: relative;
+  height: 20px;
+  background: var(--bg-secondary, #f3f4f6);
+  border-radius: 10px;
+  overflow: hidden;
+  min-width: 100px;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
+  border-radius: 10px;
+  transition: width 0.3s ease;
+}
+
+.progress-text {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+/* Daily Chart */
+.daily-chart {
+  padding: 1rem 0;
+}
+
+.chart-bars {
+  display: flex;
+  gap: 0.5rem;
+  height: 200px;
+  align-items: flex-end;
+}
+
+.chart-bar {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+}
+
+.bar-fill {
+  width: 100%;
+  max-width: 40px;
+  background: linear-gradient(180deg, #8b5cf6, #a78bfa);
+  border-radius: 4px 4px 0 0;
+  transition: height 0.3s ease;
+}
+
+.bar-label {
+  font-size: 0.625rem;
+  color: var(--text-secondary, #6b7280);
+  margin-top: 0.5rem;
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .cost-analytics {
+    padding: 1rem;
+  }
+  
+  .page-header {
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .header-actions {
+    width: 100%;
+  }
+  
+  .summary-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+</style>