Modell-Auswahl in Settings implementiert

- Neues SettingsPanel mit Modell-Auswahl (Haiku/Sonnet/Opus)
- Modell wird in SQLite persistiert (claude_model Setting)
- Bridge unterstützt set-model und get-models Commands
- Modell kann zur Laufzeit gewechselt werden
- Preisanzeige pro Modell im Settings-Panel
- Aktuelles Modell wird beim App-Start geladen

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

scripts/claude-bridge.js

@@ -17,7 +17,14 @@ process.stdin.resume();
 
 let activeAbort = null;
 let currentAgentId = null;
-const MODEL = process.env.CLAUDE_MODEL || 'opus';
+let currentModel = process.env.CLAUDE_MODEL || 'opus';
+
+// Verfügbare Modelle
+const AVAILABLE_MODELS = [
+  { id: 'haiku', name: 'Claude Haiku', description: 'Schnell & günstig' },
+  { id: 'sonnet', name: 'Claude Sonnet', description: 'Ausgewogen' },
+  { id: 'opus', name: 'Claude Opus', description: 'Leistungsstark' },
+];
 
 // ============ Kommunikation mit Tauri ============
 
@@ -39,7 +46,10 @@ function sendError(id, error) {
 
 // ============ Claude Agent SDK ============
 
-async function sendMessage(message, requestId) {
+async function sendMessage(message, requestId, model = null) {
+  // Modell für diese Anfrage (Parameter > State > Default)
+  const useModel = model || currentModel;
+
   currentAgentId = randomUUID();
   activeAbort = new AbortController();
 
@@ -47,19 +57,20 @@ async function sendMessage(message, requestId) {
     id: currentAgentId,
     type: 'Main',
     task: message.substring(0, 100),
+    model: useModel,
   });
 
-  sendResponse(requestId, { agentId: currentAgentId, status: 'gestartet' });
+  sendResponse(requestId, { agentId: currentAgentId, status: 'gestartet', model: useModel });
 
   const startTime = Date.now();
   let fullText = '';
-  let usedModel = MODEL;
+  let usedModel = useModel;
 
   try {
     const conversation = query({
       prompt: message,
       options: {
-        model: MODEL,
+        model: useModel,
         maxTurns: 25,
         abortController: activeAbort,
       },
@@ -140,7 +151,8 @@ function handleCommand(msg) {
         sendError(msg.id, 'Keine Nachricht angegeben');
         return;
       }
-      sendMessage(msg.message, msg.id);
+      // Modell kann pro Anfrage überschrieben werden
+      sendMessage(msg.message, msg.id, msg.model);
       break;
 
     case 'stop':
@@ -150,10 +162,33 @@ function handleCommand(msg) {
       sendResponse(msg.id, { status: 'gestoppt' });
       break;
 
+    case 'set-model':
+      if (!msg.model) {
+        sendError(msg.id, 'Kein Modell angegeben');
+        return;
+      }
+      const validModels = AVAILABLE_MODELS.map(m => m.id);
+      if (!validModels.includes(msg.model)) {
+        sendError(msg.id, `Ungültiges Modell: ${msg.model}. Verfügbar: ${validModels.join(', ')}`);
+        return;
+      }
+      currentModel = msg.model;
+      sendResponse(msg.id, { model: currentModel, status: 'Modell geändert' });
+      sendEvent('model-changed', { model: currentModel });
+      break;
+
+    case 'get-models':
+      sendResponse(msg.id, {
+        current: currentModel,
+        available: AVAILABLE_MODELS,
+      });
+      break;
+
     case 'status':
       sendResponse(msg.id, {
-        model: MODEL,
+        model: currentModel,
         isProcessing: !!currentAgentId,
+        availableModels: AVAILABLE_MODELS,
       });
       break;
 
@@ -186,4 +221,4 @@ process.on('SIGTERM', () => { clearInterval(keepAlive); process.exit(0); });
 process.on('SIGINT', () => { clearInterval(keepAlive); process.exit(0); });
 
 // Bereit
-sendEvent('ready', { version: '1.0.0', pid: process.pid, model: MODEL });
+sendEvent('ready', { version: '1.1.0', pid: process.pid, model: currentModel, availableModels: AVAILABLE_MODELS });

src-tauri/src/claude.rs

@@ -264,11 +264,19 @@ fn send_to_bridge(app: &AppHandle, command: &str, message: &str) -> Result<Strin
     state.request_counter += 1;
     let request_id = format!("req-{}", state.request_counter);
 
-    let msg = serde_json::json!({
+    // Je nach Command unterschiedliche Payload-Struktur
+    let msg = match command {
+        "set-model" => serde_json::json!({
+            "command": command,
+            "id": request_id,
+            "model": message
+        }),
+        _ => serde_json::json!({
             "command": command,
             "id": request_id,
             "message": message
-    });
+        }),
+    };
 
     if let Some(stdin) = &mut state.bridge_stdin {
         writeln!(stdin, "{}", msg.to_string()).map_err(|e| e.to_string())?;
@@ -323,3 +331,75 @@ pub async fn get_agent_status(app: AppHandle) -> Result<Vec<AgentStatus>, String
     let state = state.lock().unwrap();
     Ok(state.agents.clone())
 }
+
+/// Modell wechseln
+#[tauri::command]
+pub async fn set_model(app: AppHandle, model: String) -> Result<String, String> {
+    println!("🔄 Modell wechseln zu: {}", model);
+
+    // Modell in Settings speichern
+    if let Some(db_state) = app.try_state::<Arc<Mutex<crate::db::Database>>>() {
+        let db = db_state.lock().unwrap();
+        let _ = db.set_setting("claude_model", &model);
+    }
+
+    // Bridge starten falls nicht aktiv
+    let needs_start = {
+        let state = app.state::<Arc<Mutex<ClaudeState>>>();
+        let state_guard = state.lock().unwrap();
+        state_guard.bridge_stdin.is_none()
+    };
+
+    if needs_start {
+        start_bridge(&app)?;
+        tokio::time::sleep(tokio::time::Duration::from_millis(500)).await;
+    }
+
+    // Modell an Bridge senden
+    send_to_bridge(&app, "set-model", &model)?;
+
+    Ok(model)
+}
+
+/// Verfügbare Modelle abrufen
+#[tauri::command]
+pub async fn get_available_models() -> Result<Vec<ModelInfo>, String> {
+    Ok(vec![
+        ModelInfo {
+            id: "haiku".to_string(),
+            name: "Claude Haiku".to_string(),
+            description: "Schnell & günstig".to_string(),
+        },
+        ModelInfo {
+            id: "sonnet".to_string(),
+            name: "Claude Sonnet".to_string(),
+            description: "Ausgewogen".to_string(),
+        },
+        ModelInfo {
+            id: "opus".to_string(),
+            name: "Claude Opus".to_string(),
+            description: "Leistungsstark".to_string(),
+        },
+    ])
+}
+
+/// Aktuelles Modell aus Settings laden
+#[tauri::command]
+pub async fn get_current_model(app: AppHandle) -> Result<String, String> {
+    if let Some(db_state) = app.try_state::<Arc<Mutex<crate::db::Database>>>() {
+        let db = db_state.lock().unwrap();
+        if let Ok(Some(model)) = db.get_setting("claude_model") {
+            return Ok(model);
+        }
+    }
+    // Default
+    Ok("opus".to_string())
+}
+
+/// Modell-Info Struct
+#[derive(Debug, Clone, serde::Serialize, serde::Deserialize)]
+pub struct ModelInfo {
+    pub id: String,
+    pub name: String,
+    pub description: String,
+}

src-tauri/src/db.rs

@@ -517,6 +517,15 @@ impl Database {
         }
     }
 
+    /// Lädt alle Einstellungen
+    pub fn get_all_settings(&self) -> SqlResult<Vec<(String, String)>> {
+        let mut stmt = self.conn.prepare("SELECT key, value FROM settings")?;
+        let settings = stmt.query_map([], |row| {
+            Ok((row.get(0)?, row.get(1)?))
+        })?.collect::<SqlResult<Vec<_>>>()?;
+        Ok(settings)
+    }
+
     // ============ Statistiken ============
 
     /// DB-Statistiken
@@ -604,3 +613,27 @@ pub async fn get_db_stats(app: AppHandle) -> Result<DbStats, String> {
     let db = state.lock().unwrap();
     db.stats().map_err(|e| e.to_string())
 }
+
+/// Einstellung lesen
+#[tauri::command]
+pub async fn get_setting(app: AppHandle, key: String) -> Result<Option<String>, String> {
+    let state = app.state::<DbState>();
+    let db = state.lock().unwrap();
+    db.get_setting(&key).map_err(|e| e.to_string())
+}
+
+/// Einstellung speichern
+#[tauri::command]
+pub async fn set_setting(app: AppHandle, key: String, value: String) -> Result<(), String> {
+    let state = app.state::<DbState>();
+    let db = state.lock().unwrap();
+    db.set_setting(&key, &value).map_err(|e| e.to_string())
+}
+
+/// Alle Einstellungen laden
+#[tauri::command]
+pub async fn get_all_settings(app: AppHandle) -> Result<Vec<(String, String)>, String> {
+    let state = app.state::<DbState>();
+    let db = state.lock().unwrap();
+    db.get_all_settings().map_err(|e| e.to_string())
+}

src-tauri/src/lib.rs

@@ -23,6 +23,9 @@ pub fn run() {
             claude::send_message,
             claude::stop_all_agents,
             claude::get_agent_status,
+            claude::set_model,
+            claude::get_available_models,
+            claude::get_current_model,
             // Gedächtnis-System
             memory::load_memory,
             memory::get_sticky_context,
@@ -41,6 +44,10 @@ pub fn run() {
             // Datenbank
             db::init_database,
             db::get_db_stats,
+            // Settings
+            db::get_setting,
+            db::set_setting,
+            db::get_all_settings,
             // Sessions
             session::create_session,
             session::update_session,

src/lib/components/SettingsPanel.svelte

@@ -0,0 +1,277 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { invoke } from '@tauri-apps/api/core';
+	import { currentModel } from '$lib/stores/app';
+
+	interface ModelInfo {
+		id: string;
+		name: string;
+		description: string;
+	}
+
+	let availableModels: ModelInfo[] = [];
+	let selectedModel = '';
+	let loading = true;
+	let saving = false;
+
+	// Modell-Icons
+	const modelIcons: Record<string, string> = {
+		haiku: '🐦',
+		sonnet: '📝',
+		opus: '🎭',
+	};
+
+	// Preise pro 1M Token (ungefähre Werte)
+	const modelPrices: Record<string, { input: number; output: number }> = {
+		haiku: { input: 0.25, output: 1.25 },
+		sonnet: { input: 3, output: 15 },
+		opus: { input: 15, output: 75 },
+	};
+
+	async function loadSettings() {
+		try {
+			availableModels = await invoke('get_available_models');
+			const current: string = await invoke('get_current_model');
+			selectedModel = current;
+			$currentModel = current;
+		} catch (err) {
+			console.error('Fehler beim Laden:', err);
+		}
+		loading = false;
+	}
+
+	async function changeModel(modelId: string) {
+		if (modelId === selectedModel) return;
+		saving = true;
+
+		try {
+			await invoke('set_model', { model: modelId });
+			selectedModel = modelId;
+			$currentModel = modelId;
+		} catch (err) {
+			console.error('Fehler beim Speichern:', err);
+		}
+
+		saving = false;
+	}
+
+	onMount(() => {
+		loadSettings();
+	});
+
+	function formatPrice(price: number): string {
+		return `$${price.toFixed(2)}`;
+	}
+</script>
+
+<div class="settings-panel">
+	<div class="panel-header">
+		<h2>⚙️ Einstellungen</h2>
+	</div>
+
+	{#if loading}
+		<div class="loading">Lade Einstellungen...</div>
+	{:else}
+		<div class="settings-content">
+			<!-- Modell-Auswahl -->
+			<section class="settings-section">
+				<h3>🤖 Claude-Modell</h3>
+				<p class="section-hint">Wähle das Modell für deine Anfragen</p>
+
+				<div class="model-list">
+					{#each availableModels as model}
+						<button
+							class="model-card"
+							class:selected={selectedModel === model.id}
+							class:saving={saving && selectedModel !== model.id}
+							on:click={() => changeModel(model.id)}
+							disabled={saving}
+						>
+							<div class="model-header">
+								<span class="model-icon">{modelIcons[model.id] || '🤖'}</span>
+								<span class="model-name">{model.name}</span>
+								{#if selectedModel === model.id}
+									<span class="model-active">✓ Aktiv</span>
+								{/if}
+							</div>
+							<div class="model-description">{model.description}</div>
+							{#if modelPrices[model.id]}
+								<div class="model-pricing">
+									<span>Input: {formatPrice(modelPrices[model.id].input)}/1M</span>
+									<span>Output: {formatPrice(modelPrices[model.id].output)}/1M</span>
+								</div>
+							{/if}
+						</button>
+					{/each}
+				</div>
+			</section>
+
+			<!-- Weitere Einstellungen (Platzhalter) -->
+			<section class="settings-section">
+				<h3>🎨 Darstellung</h3>
+				<div class="setting-row">
+					<span class="setting-label">Theme</span>
+					<span class="setting-value">AWL Dark (fest)</span>
+				</div>
+			</section>
+
+			<section class="settings-section">
+				<h3>📁 Pfade</h3>
+				<div class="setting-row">
+					<span class="setting-label">Arbeitsverzeichnis</span>
+					<span class="setting-value placeholder">Wird aus Session geladen</span>
+				</div>
+			</section>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.settings-panel {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	.panel-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--spacing-sm) var(--spacing-md);
+		background: var(--bg-secondary);
+		border-bottom: 1px solid var(--bg-tertiary);
+	}
+
+	.panel-header h2 {
+		font-size: 0.875rem;
+		font-weight: 600;
+	}
+
+	.loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		color: var(--text-secondary);
+	}
+
+	.settings-content {
+		flex: 1;
+		overflow-y: auto;
+		padding: var(--spacing-md);
+	}
+
+	.settings-section {
+		margin-bottom: var(--spacing-lg);
+	}
+
+	.settings-section h3 {
+		font-size: 0.875rem;
+		font-weight: 600;
+		margin-bottom: var(--spacing-xs);
+	}
+
+	.section-hint {
+		font-size: 0.75rem;
+		color: var(--text-secondary);
+		margin-bottom: var(--spacing-md);
+	}
+
+	/* Modell-Karten */
+	.model-list {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-sm);
+	}
+
+	.model-card {
+		width: 100%;
+		text-align: left;
+		padding: var(--spacing-md);
+		background: var(--bg-secondary);
+		border: 2px solid var(--bg-tertiary);
+		border-radius: var(--radius-md);
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	.model-card:hover:not(:disabled) {
+		background: var(--bg-tertiary);
+		border-color: var(--text-secondary);
+	}
+
+	.model-card.selected {
+		border-color: var(--accent);
+		background: rgba(233, 69, 96, 0.1);
+	}
+
+	.model-card.saving {
+		opacity: 0.5;
+		cursor: wait;
+	}
+
+	.model-card:disabled {
+		cursor: not-allowed;
+	}
+
+	.model-header {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-sm);
+		margin-bottom: var(--spacing-xs);
+	}
+
+	.model-icon {
+		font-size: 1.2rem;
+	}
+
+	.model-name {
+		font-weight: 600;
+		flex: 1;
+	}
+
+	.model-active {
+		font-size: 0.7rem;
+		padding: 2px 6px;
+		background: var(--accent);
+		color: white;
+		border-radius: var(--radius-sm);
+	}
+
+	.model-description {
+		font-size: 0.8rem;
+		color: var(--text-secondary);
+		margin-bottom: var(--spacing-xs);
+	}
+
+	.model-pricing {
+		display: flex;
+		gap: var(--spacing-md);
+		font-size: 0.7rem;
+		color: var(--text-secondary);
+		font-family: var(--font-mono);
+	}
+
+	/* Allgemeine Einstellungs-Zeilen */
+	.setting-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--spacing-sm) 0;
+		border-bottom: 1px solid var(--bg-tertiary);
+	}
+
+	.setting-label {
+		font-size: 0.85rem;
+	}
+
+	.setting-value {
+		font-size: 0.85rem;
+		color: var(--text-secondary);
+	}
+
+	.setting-value.placeholder {
+		font-style: italic;
+		opacity: 0.6;
+	}
+</style>

src/routes/+layout.svelte

@@ -7,6 +7,16 @@
 
 	onMount(async () => {
 		await initEventListeners();
+
+		// Aktuelles Modell aus Settings laden
+		try {
+			const model: string = await invoke('get_current_model');
+			if (model) {
+				$currentModel = model;
+			}
+		} catch (err) {
+			console.warn('Modell konnte nicht geladen werden:', err);
+		}
 	});
 
 	onDestroy(async () => {

src/routes/+page.svelte

@@ -7,6 +7,7 @@
 	import MemoryPanel from '$lib/components/MemoryPanel.svelte';
 	import AuditLog from '$lib/components/AuditLog.svelte';
 	import GuardRailsPanel from '$lib/components/GuardRailsPanel.svelte';
+	import SettingsPanel from '$lib/components/SettingsPanel.svelte';
 
 	let activeMiddleTab = 'activity';
 	let activeRightTab = 'agents';
@@ -20,6 +21,7 @@
 	const rightTabs = [
 		{ id: 'agents', label: 'Agents', icon: '🤖' },
 		{ id: 'guards', label: 'Guard-Rails', icon: '🛡️' },
+		{ id: 'settings', label: 'Settings', icon: '⚙️' },
 	];
 </script>
 
@@ -88,6 +90,8 @@
 				<AgentView />
 			{:else if activeRightTab === 'guards'}
 				<GuardRailsPanel />
+			{:else if activeRightTab === 'settings'}
+				<SettingsPanel />
 			{/if}
 		</div>
 	</Pane>