feat: implement dynamic model fetching and update default model in Guardian panel

Author: gitcoder89431

src/lib/components/panels/GuardianPanel.svelte

@@ -5,6 +5,7 @@
 	import { aiAnalysisHelpers } from '$lib/stores/ai-analysis.js';
 	import { loadThemePreset, themePresets } from '$lib/stores/theme.js';
 	import { uiHelpers } from '$lib/stores/ui';
+	import { fetchOpenRouterModels } from '$lib/utils/ai-analysis.js';
 
 	let apiKeyInput = '';
 	let guardianName = '';
@@ -23,28 +24,29 @@
 
 	const displayKey = (k: keyof typeof themePresets) => (k === 'tokyoNight' ? 'tokyo-night' : k);
     
-	// OpenRouter model selection
-	const models = [
-		'anthropic/claude-3.5-sonnet',
-		'openai/gpt-4o-mini',
-		'google/gemini-1.5-pro',
-		'mistralai/mixtral-8x7b-instruct',
-	] as const;
+	// OpenRouter model selection (dynamic; fallback list shown until fetched)
+	let modelList: string[] = [
+		'openai/gpt-oss-20b:free',
+		'mistralai/mixtral-8x7b-instruct:free',
+		'google/gemma-2-9b-it:free',
+		'openchat/openchat-7b:free',
+	];
 	let currentModelIndex = 0;
+	let modelsLoading = false;
 
 	function loadModelFromStorage() {
 		const saved = guardianHelpers.load();
 		const savedModel = saved?.model as string | undefined;
 		if (savedModel) {
-			const idx = models.indexOf(savedModel as any);
+			const idx = modelList.indexOf(savedModel);
 			currentModelIndex = idx >= 0 ? idx : 0;
 		} else {
 			currentModelIndex = 0;
 		}
 	}
 
 	function displayModel() {
-		return models[currentModelIndex] || models[0];
+		return modelList[currentModelIndex] || modelList[0];
 	}
 
 	function persistModel() {
@@ -53,13 +55,36 @@
 
 	function cycleModel(dir: 'prev' | 'next') {
 		if (dir === 'next') {
-			currentModelIndex = (currentModelIndex + 1) % models.length;
+			currentModelIndex = modelList.length ? (currentModelIndex + 1) % modelList.length : 0;
 		} else {
-			currentModelIndex = (currentModelIndex - 1 + models.length) % models.length;
+			currentModelIndex = modelList.length ? (currentModelIndex - 1 + modelList.length) % modelList.length : 0;
 		}
 		persistModel();
 	}
 
+	async function loadModels() {
+		if (!apiKeyInput) return;
+		modelsLoading = true;
+		try {
+			const list = await fetchOpenRouterModels(apiKeyInput, true);
+			if (Array.isArray(list) && list.length) {
+				modelList = list;
+				// Re-align index to saved model if present
+				const savedModel = guardianHelpers.load()?.model as string | undefined;
+				if (savedModel) {
+					const idx = modelList.indexOf(savedModel);
+					currentModelIndex = idx >= 0 ? idx : 0;
+				} else {
+					currentModelIndex = 0;
+				}
+			}
+		} catch (e) {
+			// Ignore; keep fallback list
+		} finally {
+			modelsLoading = false;
+		}
+	}
+
 		onMount(() => {
 		// Load saved guardian data
 		const saved = guardianHelpers.load();
@@ -76,6 +101,8 @@
 
 	// Get model selection from guardian storage
 	loadModelFromStorage();
+	// Fetch model list from OpenRouter if API key is present
+	loadModels();
 	});
 
 	function toggleTheme(direction: 'prev' | 'next') {
@@ -233,10 +260,11 @@
 		<!-- Model selection (OpenRouter) -->
 		<div class="cli-row px-2 py-1">
 			<span class="label" style="color: var(--petalytics-foam);">model</span>
-			<span class="value" style="color: var(--petalytics-text);">{displayModel()}</span>
+			<span class="value" style="color: var(--petalytics-text);">{displayModel()} {#if modelsLoading}(loading...){/if}</span>
 			<div class="ml-2 flex items-center space-x-1">
 				<button type="button" class="arrow-btn" onclick={() => cycleModel('prev')} aria-label="Previous model">&lt;</button>
 				<button type="button" class="arrow-btn" onclick={() => cycleModel('next')} aria-label="Next model">&gt;</button>
+				<button type="button" class="arrow-btn" onclick={loadModels} aria-label="Refresh models">↻</button>
 			</div>
 		</div>
 

src/lib/components/panels/Viewport.svelte

@@ -8,13 +8,14 @@
 	import EmptyState from '../ui/EmptyState.svelte';
 	import Skeleton from '../ui/Skeleton.svelte';
 	import { rightPanelView, uiHelpers } from '$lib/stores/ui';
+	import type { RightPanelView } from '$lib/stores/ui';
 	import type { PetPanelData } from '$lib/types/Pet';
 	import type { JournalEntry } from '$lib/types/JournalEntry';
 
 	let selectedPet: PetPanelData | null = null;
 	let selectedPetId: string | null = null;
 	let pets: PetPanelData[] = [];
-	let currentView: 'dashboard' | 'journal' | 'history' | 'memories' | 'confirmArchive' = 'dashboard';
+	let currentView: RightPanelView = 'dashboard';
 	let journalInput = '';
 	let selectedMood = '';
 	let selectedActivity = '';

src/lib/stores/ai-analysis.ts

@@ -12,7 +12,7 @@ let analyzer: AIAnalyzer | null = null;
 // Initialize analyzer when API key is available
 guardianStore.subscribe((guardian) => {
 	if (guardian.apiKey && guardian.apiKeyValid) {
-		analyzer = new AIAnalyzer(guardian.apiKey, (guardian as any).model || 'anthropic/claude-3.5-sonnet');
+		analyzer = new AIAnalyzer(guardian.apiKey, (guardian as any).model || 'openai/gpt-oss-20b:free');
 	} else {
 		analyzer = null;
 	}

src/lib/stores/guardian.ts

@@ -7,7 +7,7 @@ const STORAGE_KEY = 'petalytics-guardian';
 const defaultGuardian = {
 	name: '',
 	apiKey: '',
-	model: 'anthropic/claude-3.5-sonnet',
+	model: 'openai/gpt-oss-20b:free',
 	preferences: {
 		dailyReminders: false,
 		aiInsights: true,

src/lib/utils/ai-analysis.ts

@@ -15,7 +15,7 @@ export class AIAnalyzer {
 	private baseUrl = 'https://openrouter.ai/api/v1/chat/completions';
 	private model: string;
 
-	constructor(apiKey: string, model: string = 'anthropic/claude-3.5-sonnet') {
+	constructor(apiKey: string, model: string = 'openai/gpt-oss-20b:free') {
 		this.apiKey = apiKey;
 		this.model = model;
 	}
@@ -143,3 +143,25 @@ Consider breed-specific traits, age-related needs, and behavioral patterns. Keep
 		}
 	}
 }
+
+// Fetch available models from OpenRouter API
+export async function fetchOpenRouterModels(apiKey: string, onlyFree: boolean = true): Promise<string[]> {
+	const referer = typeof window !== 'undefined' ? window.location.origin : undefined;
+	const resp = await fetch('https://openrouter.ai/api/v1/models', {
+		method: 'GET',
+		headers: {
+			Authorization: `Bearer ${apiKey}`,
+			'Content-Type': 'application/json',
+			...(referer ? { 'HTTP-Referer': referer } : {}),
+			'X-Title': 'Petalytics',
+		},
+	});
+	if (!resp.ok) {
+		throw new Error(`Failed to list models: ${resp.status}`);
+	}
+	const data = await resp.json();
+	const ids: string[] = (data?.data || []).map((m: any) => m?.id).filter(Boolean);
+	const filtered = onlyFree ? ids.filter((id) => /:free$/i.test(id)) : ids;
+	// Deduplicate and sort for stability
+	return Array.from(new Set(filtered)).sort((a, b) => a.localeCompare(b));
+}