From 15626ba9e1b30543640a4872793313fec7ea6442 Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Fri, 27 Mar 2026 17:50:06 -0400
Subject: [PATCH] add eye to api key

---
 src/components/SettingsView.vue | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/SettingsView.vue b/src/components/SettingsView.vue
index 7a5b659..668b187 100644
--- a/src/components/SettingsView.vue
+++ b/src/components/SettingsView.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { Play, Settings, Type, Save, Check, Plus, Trash2, ChevronDown } from 'lucide-vue-next';
+import { Play, Settings, Type, Save, Check, Plus, Trash2, ChevronDown, Eye, EyeOff } from 'lucide-vue-next';
 import { useSettingsStore, DEFAULT_TEMPLATE, DEFAULT_EVALUATION_TEMPLATE, DEFAULT_REFINEMENT_TEMPLATE, type ApiProfile } from '../stores/settings';
 import { cn } from '../lib/utils';
 
 const settings = useSettingsStore();
 const settingsCategory = ref<'api' | 'general' | 'prompts'>('api');
+const showApiKey = ref(false);
 
 const newProfileName = ref('');
 const isSavingProfile = ref(false);
@@ -161,12 +162,22 @@ onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
                   </div>
                   <div class="space-y-2">
                     <label class="text-sm font-medium text-slate-700 dark:text-slate-300">API Key</label>
-                    <input 
-                      v-model="settings.apiKey"
-                      type="password" 
-                      class="w-full px-4 py-2.5 border dark:border-slate-700 rounded-xl bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100"
-                      placeholder="sk-..."
-                    />
+                    <div class="relative">
+                      <input 
+                        v-model="settings.apiKey"
+                        :type="showApiKey ? 'text' : 'password'" 
+                        class="w-full pl-4 pr-12 py-2.5 border dark:border-slate-700 rounded-xl bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100"
+                        placeholder="sk-..."
+                      />
+                      <button 
+                        @click="showApiKey = !showApiKey"
+                        type="button"
+                        class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors focus:outline-none"
+                      >
+                        <Eye v-if="showApiKey" class="w-5 h-5" />
+                        <EyeOff v-else class="w-5 h-5" />
+                      </button>
+                    </div>
                   </div>
                   <div class="space-y-2">
                     <label class="text-sm font-medium text-slate-700 dark:text-slate-300">Model Name</label>