feat: update GuardianPanel for improved API key handling and add gender/size normalization in PetPanel

Author: gitcoder89431

src/lib/components/panels/GuardianPanel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, tick } from 'svelte';
 	import { ChevronLeft, ChevronRight, User, Key, Settings, CheckCircle, AlertCircle, Terminal } from 'lucide-svelte';
 	import { guardianHelpers } from '$lib/stores/guardian.js';
 	import { aiAnalysisHelpers } from '$lib/stores/ai-analysis.js';
@@ -8,6 +8,8 @@
 	import { fetchOpenRouterModels } from '$lib/utils/ai-analysis.js';
 
 	let apiKeyInput = '';
+	let prevApiKey = '';
+	let apiKeyEl: HTMLInputElement | null = null;
 	let guardianName = '';
 	// Preferences trimmed to real features; remove unused reminders/notifications.
 	let preferences: { aiInsights: boolean } = {
@@ -123,12 +125,27 @@
 	}
 
 	function startEdit(field: string) {
-		editingField = field;
+		if (field === 'apiKey') {
+			// Prepare for paste-first UX: clear input and focus the field
+			prevApiKey = apiKeyInput;
+			editingField = field;
+			apiKeyInput = '';
+			// Focus after DOM updates
+			tick().then(() => {
+				apiKeyEl?.focus();
+			});
+		} else {
+			editingField = field;
+		}
 	}
 
 	function stopEdit() {
 		const field = editingField;
 		editingField = null;
+		// For apiKey, don't overwrite with empty; restore previous if nothing pasted
+		if (field === 'apiKey' && !apiKeyInput.trim()) {
+			apiKeyInput = prevApiKey;
+		}
 		saveGuardianInfo();
 		if (field === 'apiKey') {
 			validateApiKey();
@@ -194,6 +211,14 @@
 			action();
 		}
 	}
+	function abbreviateKey(key: string): string {
+		const trimmed = (key || '').trim();
+		if (!trimmed) return 'Not set';
+		if (trimmed.length <= 16) return trimmed;
+		const prefix = trimmed.slice(0, 12);
+		const suffix = trimmed.slice(-3);
+		return `${prefix}...${suffix}`;
+	}
 </script>
 
 <div class="guardian-panel h-full" style="background: var(--petalytics-bg);">
@@ -232,16 +257,21 @@
 			<span class="value" style="color: var(--petalytics-text);">
 				{#if editingField === 'apiKey'}
 					<input
-						type="password"
+						bind:this={apiKeyEl}
+						type="text"
 						bind:value={apiKeyInput}
 						onblur={stopEdit}
 						onkeydown={(e) => handleKeydown(e, 'apiKey')}
 						class="bg-transparent border-none outline-none w-full text-right input-inline"
 						style="color: var(--petalytics-text);"
 						placeholder="sk-or-..."
+						inputmode="text"
+						autocapitalize="off"
+						autocorrect="off"
+						spellcheck={false}
 					/>
 				{:else}
-					{apiKeyInput ? `${apiKeyInput.slice(0, 8)}****` : 'Not set'}
+					{abbreviateKey(apiKeyInput)}
 				{/if}
 			</span>
 			<span class="ml-2">
@@ -322,8 +352,7 @@
 	border-color: var(--petalytics-accent);
 	box-shadow: 0 0 0 2px color-mix(in oklab, var(--petalytics-accent) 40%, transparent);
 }
-.cli-row[aria-pressed="true"],
-.cli-row[aria-expanded="true"] {
+.cli-row[aria-pressed="true"] {
 	background: var(--petalytics-highlight-high);
 	border-color: var(--petalytics-accent);
 }

src/lib/components/panels/PetPanel.svelte

@@ -84,8 +84,8 @@
 		breed: '',
 		age: '',
 		ageUnit: 'years',
-		gender: 'unknown',
-		size: 'medium',
+		gender: '',
+		size: '',
 		profileImageUrl: '',
 	};
 
@@ -133,8 +133,8 @@
 			breed: '',
 			age: '',
 			ageUnit: 'years',
-			gender: 'unknown',
-			size: 'medium',
+			gender: '',
+			size: '',
 			profileImageUrl: '',
 		};
 		formErrors = {};
@@ -191,13 +191,28 @@
 			formErrors.age = 'Please enter a valid age';
 		}
 
-		if (!newPet.gender) {
-			formErrors.gender = 'Please select gender';
-		}
+		// gender optional; defaults to 'unknown' if left blank
 
 		return Object.keys(formErrors).length === 0;
 	}
 
+	function normalizeGender(g: string): 'male' | 'female' | 'unknown' {
+		const v = norm(g);
+		if (v.startsWith('m')) return 'male';
+		if (v.startsWith('f')) return 'female';
+		return 'unknown';
+	}
+
+	function normalizeSize(s: string): 'tiny' | 'small' | 'medium' | 'large' | 'extra_large' {
+		const v = norm(s);
+		if (v.startsWith('ti')) return 'tiny';
+		if (v.startsWith('sm')) return 'small';
+		if (v.startsWith('l') && !v.startsWith('la')) return 'large';
+		if (v.startsWith('la')) return 'large';
+		if (v.startsWith('ex') || v.startsWith('xl') || v.includes('extra')) return 'extra_large';
+		return 'medium';
+	}
+
 	async function createPet() {
 		if (!validateForm()) return;
 
@@ -208,8 +223,8 @@
 			breed: newPet.breed.trim(),
 			age: parseInt(newPet.age),
 			ageUnit: normalizeAgeUnit(newPet.ageUnit),
-			gender: (newPet.gender as 'male'|'female'|'unknown'),
-			size: newPet.size as 'tiny'|'small'|'medium'|'large'|'extra_large',
+			gender: normalizeGender(newPet.gender),
+			size: normalizeSize(newPet.size),
 			profileImageUrl: newPet.profileImageUrl || '/images/default-pet.png',
 			createdAt: new Date().toISOString(),
 			journalEntries: [],