diff --git a/internal/services/env_service.go b/internal/services/env_service.go
index 55149aa..a2d6ce3 100644
--- a/internal/services/env_service.go
+++ b/internal/services/env_service.go
@@ -22,7 +22,24 @@ func (es *EnvService) CreateEnvVar(name, value, remark string, hidden bool, user
 		Hidden: hidden,
 		UserID: uint(userID),
 	}
-	database.DB.Create(env)
+	data := map[string]interface{}{
+		"name":    name,
+		"value":   value,
+		"remark":  remark,
+		"hidden":  hidden,
+		"user_id": userID,
+	}
+	database.DB.Model(&models.EnvironmentVariable{}).Create(data)
+
+	// 将自动生成的 ID 赋值回对象以便返回
+	if id, ok := data["id"].(uint); ok {
+		env.ID = id
+	} else if id, ok := data["id"].(int64); ok {
+		env.ID = uint(id)
+	} else {
+		// 如果 ID 没有自动回填到 map，尝试通过刚才的数据查出来
+		database.DB.Where("name = ? AND user_id = ?", name, userID).Order("id DESC").First(env)
+	}
 	return env
 }
 
diff --git a/web/src/views/agents/Agents.vue b/web/src/views/agents/Agents.vue
index 34cbab1..e89182c 100644
--- a/web/src/views/agents/Agents.vue
+++ b/web/src/views/agents/Agents.vue
@@ -323,7 +323,7 @@ onUnmounted(() => {
                 class="w-24 sm:w-32 shrink-0 font-medium text-xs sm:text-sm truncate cursor-pointer hover:text-primary"
                 @click="viewDetail(agent)" :title="agent.name">{{ agent.name }}</span>
               <span class="w-24 sm:w-28 shrink-0 text-xs sm:text-sm text-muted-foreground truncate">{{ agent.ip || '-'
-                }}</span>
+              }}</span>
               <span class="w-20 sm:w-32 shrink-0 text-xs sm:text-sm text-muted-foreground truncate hidden md:block">{{
                 agent.hostname || '-' }}</span>
               <span class="w-20 sm:w-36 shrink-0 text-xs sm:text-sm text-muted-foreground truncate hidden lg:block">{{
@@ -423,7 +423,7 @@ onUnmounted(() => {
 
     <!-- 详情对话框 -->
     <Dialog v-model:open="showDetailDialog">
-      <DialogContent class="sm:max-w-md md:max-w-lg">
+      <DialogContent class="sm:max-w-md md:max-w-lg" @openAutoFocus.prevent>
         <DialogHeader>
           <DialogTitle>Agent 详情</DialogTitle>
         </DialogHeader>
@@ -492,7 +492,7 @@ onUnmounted(() => {
 
     <!-- 编辑对话框 -->
     <Dialog v-model:open="showEditDialog">
-      <DialogContent>
+      <DialogContent @openAutoFocus.prevent>
         <DialogHeader>
           <DialogTitle>编辑 Agent</DialogTitle>
         </DialogHeader>
@@ -532,7 +532,7 @@ onUnmounted(() => {
 
     <!-- 下载对话框 -->
     <Dialog v-model:open="showDownloadDialog">
-      <DialogContent class="sm:max-w-lg">
+      <DialogContent class="sm:max-w-lg" @openAutoFocus.prevent>
         <DialogHeader>
           <DialogTitle>下载 Agent</DialogTitle>
           <DialogDescription>当前版本: {{ agentVersion }}</DialogDescription>
@@ -580,7 +580,7 @@ onUnmounted(() => {
 
     <!-- 创建令牌对话框 -->
     <Dialog v-model:open="showTokenDialog">
-      <DialogContent>
+      <DialogContent @openAutoFocus.prevent>
         <DialogHeader>
           <DialogTitle>生成令牌</DialogTitle>
         </DialogHeader>
diff --git a/web/src/views/dependencies/Dependencies.vue b/web/src/views/dependencies/Dependencies.vue
index 6d748d2..f7ccf73 100644
--- a/web/src/views/dependencies/Dependencies.vue
+++ b/web/src/views/dependencies/Dependencies.vue
@@ -202,8 +202,10 @@ onMounted(loadDeps)
               <Button variant="outline" size="icon" class="h-9 w-9 shrink-0" @click="loadDeps" :disabled="loading">
                 <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': loading }" />
               </Button>
-              <Button variant="outline" size="sm" class="h-9 shrink-0" @click="reinstallAll" :disabled="reinstallingAll || filteredDeps.length === 0">
-                <RotateCw class="h-4 w-4 sm:mr-1.5" :class="{ 'animate-spin': reinstallingAll }" /> <span class="hidden sm:inline">全部重装</span>
+              <Button variant="outline" size="sm" class="h-9 shrink-0" @click="reinstallAll"
+                :disabled="reinstallingAll || filteredDeps.length === 0">
+                <RotateCw class="h-4 w-4 sm:mr-1.5" :class="{ 'animate-spin': reinstallingAll }" /> <span
+                  class="hidden sm:inline">全部重装</span>
               </Button>
               <Button size="sm" class="h-9 shrink-0" @click="openInstallDialog">
                 <Download class="h-4 w-4 sm:mr-1.5" /> <span class="hidden sm:inline">安装</span>
@@ -212,7 +214,8 @@ onMounted(loadDeps)
           </div>
 
           <!-- 表头 -->
-          <div class="flex items-center gap-4 px-4 py-2 border-b bg-muted/50 text-sm text-muted-foreground font-medium min-w-[400px]">
+          <div
+            class="flex items-center gap-4 px-4 py-2 border-b bg-muted/50 text-sm text-muted-foreground font-medium min-w-[400px]">
             <span class="flex-1">包名</span>
             <span class="w-32">版本</span>
             <span class="w-48 hidden md:block">备注</span>
@@ -229,12 +232,8 @@ onMounted(loadDeps)
               <Package class="h-8 w-8 mx-auto mb-2 opacity-50" />
               {{ searchQuery ? '无匹配结果' : '暂无依赖包' }}
             </div>
-            <div
-              v-else
-              v-for="dep in filteredDeps"
-              :key="dep.id"
-              class="flex items-center gap-4 px-4 py-2 hover:bg-muted/50 transition-colors"
-            >
+            <div v-else v-for="dep in filteredDeps" :key="dep.id"
+              class="flex items-center gap-4 px-4 py-2 hover:bg-muted/50 transition-colors">
               <span class="flex-1 font-mono text-sm truncate">
                 <TextOverflow :text="dep.name" title="包名" />
               </span>
@@ -246,7 +245,8 @@ onMounted(loadDeps)
                 <Button v-if="dep.log" variant="ghost" size="icon" class="h-7 w-7" @click="showLog(dep)">
                   <FileText class="h-4 w-4" />
                 </Button>
-                <Button variant="ghost" size="icon" class="h-7 w-7" @click="reinstallPackage(dep)" :disabled="reinstalling === dep.id">
+                <Button variant="ghost" size="icon" class="h-7 w-7" @click="reinstallPackage(dep)"
+                  :disabled="reinstalling === dep.id">
                   <RotateCw class="h-4 w-4" :class="{ 'animate-spin': reinstalling === dep.id }" />
                 </Button>
                 <Button variant="ghost" size="icon" class="h-7 w-7 text-destructive" @click="confirmDelete(dep)">
@@ -261,7 +261,7 @@ onMounted(loadDeps)
 
     <!-- 安装对话框 -->
     <Dialog v-model:open="showInstallDialog">
-      <DialogContent class="sm:max-w-[400px]">
+      <DialogContent class="sm:max-w-[400px]" @openAutoFocus.prevent>
         <DialogHeader>
           <DialogTitle>安装 {{ getTypeLabel(activeTab) }} 包</DialogTitle>
         </DialogHeader>
@@ -309,7 +309,7 @@ onMounted(loadDeps)
 
     <!-- 日志对话框 -->
     <Dialog v-model:open="showLogDialog">
-      <DialogContent class="sm:max-w-[600px]">
+      <DialogContent class="sm:max-w-[600px]" @openAutoFocus.prevent>
         <DialogHeader>
           <DialogTitle>安装日志 - {{ logPkgName }}</DialogTitle>
         </DialogHeader>
diff --git a/web/src/views/editor/Editor.vue b/web/src/views/editor/Editor.vue
index 4544340..7d6e81a 100644
--- a/web/src/views/editor/Editor.vue
+++ b/web/src/views/editor/Editor.vue
@@ -522,7 +522,7 @@ onUnmounted(() => {
 
     <!-- 新建对话框 -->
     <Dialog v-model:open="showCreateDialog">
-      <DialogContent class="max-w-xs">
+      <DialogContent class="max-w-xs" @openAutoFocus.prevent>
         <DialogHeader>
           <DialogTitle class="text-sm">新建</DialogTitle>
         </DialogHeader>
@@ -570,7 +570,7 @@ onUnmounted(() => {
 
     <!-- 重命名对话框 -->
     <Dialog v-model:open="showRenameDialog">
-      <DialogContent class="max-w-xs" @open-auto-focus.prevent>
+      <DialogContent class="max-w-xs" @openAutoFocus.prevent>
         <DialogHeader>
           <DialogTitle class="text-sm">重命名</DialogTitle>
         </DialogHeader>
@@ -592,7 +592,7 @@ onUnmounted(() => {
     <Dialog v-model:open="showTerminalDialog">
       <DialogContent
         class="w-[calc(100%-2rem)] sm:max-w-3xl h-[60vh] sm:h-[70vh] flex flex-col p-0 overflow-hidden !bg-[#1e1e1e] border-[#3c3c3c]"
-        :show-close-button="false">
+        :show-close-button="false" @openAutoFocus.prevent>
         <div class="flex items-center justify-between px-3 sm:px-4 py-2 border-b border-[#3c3c3c]">
           <span class="text-xs sm:text-sm font-medium text-gray-300">运行脚本</span>
           <Button variant="ghost" size="icon" class="h-6 w-6 text-gray-400 hover:text-white hover:bg-white/10"
diff --git a/web/src/views/environments/Environments.vue b/web/src/views/environments/Environments.vue
index 4347039..a1c3adc 100644
--- a/web/src/views/environments/Environments.vue
+++ b/web/src/views/environments/Environments.vue
@@ -100,16 +100,8 @@ async function deleteEnv() {
   deleteEnvId.value = null
 }
 
-async function toggleShow(env: EnvVar) {
-  const newHiddenStatus = !env.hidden
-  try {
-    await api.env.update(env.id, { ...env, hidden: newHiddenStatus })
-    env.hidden = newHiddenStatus
-    showValues.value[env.id] = !newHiddenStatus
-    toast.success(newHiddenStatus ? '值已隐藏并保存' : '值已显示并保存')
-  } catch {
-    toast.error('保存显示状态失败')
-  }
+function toggleShow(id: number) {
+  showValues.value[id] = !showValues.value[id]
 }
 
 function maskValue(value: string) {
@@ -163,7 +155,7 @@ onMounted(loadEnvVars)
             <TextOverflow :text="env.remark || '-'" title="备注" />
           </span>
           <span class="w-20 sm:w-24 shrink-0 flex justify-center gap-1">
-            <Button variant="ghost" size="icon" class="h-7 w-7" @click="toggleShow(env)"
+            <Button variant="ghost" size="icon" class="h-7 w-7" @click="toggleShow(env.id)"
               :title="showValues[env.id] ? '隐藏' : '显示'">
               <Eye v-if="!showValues[env.id]" class="h-3.5 w-3.5" />
               <EyeOff v-else class="h-3.5 w-3.5" />
@@ -183,7 +175,7 @@ onMounted(loadEnvVars)
     </div>
 
     <Dialog v-model:open="showDialog">
-      <DialogContent class="max-w-md">
+      <DialogContent class="max-w-md" @openAutoFocus.prevent>
         <DialogHeader>
           <DialogTitle>{{ isEdit ? '编辑变量' : '新建变量' }}</DialogTitle>
         </DialogHeader>
diff --git a/web/src/views/tasks/RepoDialog.vue b/web/src/views/tasks/RepoDialog.vue
index 7cc7e3e..f341ba0 100644
--- a/web/src/views/tasks/RepoDialog.vue
+++ b/web/src/views/tasks/RepoDialog.vue
@@ -116,7 +116,7 @@ watch(() => props.open, async (val) => {
         // 兼容旧字段: 优先使用 $task_concurrency, 若无则默认 1
         let concurrency = 1
         if (parsed['$task_concurrency'] !== undefined) {
-             concurrency = parsed['$task_concurrency'] === 1 ? 1 : 0
+          concurrency = parsed['$task_concurrency'] === 1 ? 1 : 0
         }
         repoConfig.value = { ...defaultConfig, ...parsed, concurrency }
       } catch {
@@ -149,7 +149,7 @@ async function save() {
       ...repoConfig.value,
       '$task_concurrency': repoConfig.value.concurrency !== undefined ? repoConfig.value.concurrency : 1
     }
-    
+
     form.value.config = JSON.stringify(configToSave)
     form.value.command = `[${repoConfig.value.source_type}] ${repoConfig.value.source_url}`
     form.value.agent_id = selectedAgentId.value === 'local' ? null : Number(selectedAgentId.value)
@@ -168,7 +168,8 @@ async function save() {
 
 <template>
   <Dialog :open="open" @update:open="emit('update:open', $event)">
-    <DialogContent class="sm:max-w-[480px] max-h-[85vh] flex flex-col !gap-0 !p-0" :trap-focus="false" @open-auto-focus.prevent>
+    <DialogContent class="sm:max-w-[480px] max-h-[85vh] flex flex-col !gap-0 !p-0" :trap-focus="false"
+      @openAutoFocus.prevent>
       <DialogHeader class="shrink-0 p-6 pb-0">
         <DialogTitle>{{ isEdit ? '编辑仓库同步' : '新建仓库同步' }}</DialogTitle>
       </DialogHeader>
@@ -179,7 +180,8 @@ async function save() {
         </div>
         <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
           <Label class="sm:text-right text-sm">源类型</Label>
-          <Select :model-value="repoConfig.source_type" @update:model-value="(v) => repoConfig.source_type = String(v || 'git')">
+          <Select :model-value="repoConfig.source_type"
+            @update:model-value="(v) => repoConfig.source_type = String(v || 'git')">
             <SelectTrigger class="sm:col-span-3 h-8 text-sm">
               <SelectValue placeholder="选择源类型" />
             </SelectTrigger>
@@ -191,12 +193,15 @@ async function save() {
         </div>
         <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
           <Label class="sm:text-right text-sm">源地址</Label>
-          <Input v-model="repoConfig.source_url" :placeholder="repoConfig.source_type === 'git' ? 'https://github.com/user/repo.git' : 'https://example.com/file.js'" class="sm:col-span-3 h-8 text-xs font-mono" />
+          <Input v-model="repoConfig.source_url"
+            :placeholder="repoConfig.source_type === 'git' ? 'https://github.com/user/repo.git' : 'https://example.com/file.js'"
+            class="sm:col-span-3 h-8 text-xs font-mono" />
         </div>
         <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
           <Label class="sm:text-right text-sm">目标路径</Label>
           <div class="sm:col-span-3">
-            <DirTreeSelect v-if="selectedAgentId === 'local'" :model-value="repoConfig.target_path || ''" @update:model-value="v => repoConfig.target_path = v" />
+            <DirTreeSelect v-if="selectedAgentId === 'local'" :model-value="repoConfig.target_path || ''"
+              @update:model-value="v => repoConfig.target_path = v" />
             <Input v-else v-model="repoConfig.target_path" placeholder="Agent 上的目标路径" class="h-8 text-sm" />
           </div>
         </div>
@@ -214,15 +219,20 @@ async function save() {
             <p class="text-xs text-muted-foreground mt-1">仓库同步任务暂时仅支持本地执行</p>
           </div>
         </div>
-        <div v-if="repoConfig.source_type === 'git'" class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+        <div v-if="repoConfig.source_type === 'git'"
+          class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
           <Label class="sm:text-right text-sm">分支</Label>
-          <Input v-model="repoConfig.branch" placeholder="main (可选)" class="sm:col-span-3 h-8 text-sm" autocomplete="off" />
+          <Input v-model="repoConfig.branch" placeholder="main (可选)" class="sm:col-span-3 h-8 text-sm"
+            autocomplete="off" />
         </div>
-        <div v-if="repoConfig.source_type === 'git'" class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+        <div v-if="repoConfig.source_type === 'git'"
+          class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
           <Label class="sm:text-right text-sm">稀疏路径</Label>
-          <Input v-model="repoConfig.sparse_path" placeholder="仅拉取指定目录或文件 (可选)" class="sm:col-span-3 h-8 text-sm" autocomplete="off" />
+          <Input v-model="repoConfig.sparse_path" placeholder="仅拉取指定目录或文件 (可选)" class="sm:col-span-3 h-8 text-sm"
+            autocomplete="off" />
         </div>
-        <div v-if="repoConfig.source_type === 'git' && repoConfig.sparse_path" class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+        <div v-if="repoConfig.source_type === 'git' && repoConfig.sparse_path"
+          class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
           <Label class="sm:text-right text-sm">单文件</Label>
           <div class="sm:col-span-3">
             <div class="flex items-center gap-3">
@@ -246,11 +256,13 @@ async function save() {
         </div>
         <div v-if="repoConfig.proxy === 'custom'" class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
           <Label class="sm:text-right text-sm">代理地址</Label>
-          <Input v-model="repoConfig.proxy_url" placeholder="https://your-proxy.com/" class="sm:col-span-3 h-8 text-xs font-mono" autocomplete="off" />
+          <Input v-model="repoConfig.proxy_url" placeholder="https://your-proxy.com/"
+            class="sm:col-span-3 h-8 text-xs font-mono" autocomplete="off" />
         </div>
         <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
           <Label class="sm:text-right text-sm">认证Token</Label>
-          <Input v-model="repoConfig.auth_token" type="text" placeholder="可选，用于私有仓库" class="sm:col-span-3 h-8 text-sm" autocomplete="new-password" />
+          <Input v-model="repoConfig.auth_token" type="text" placeholder="可选，用于私有仓库" class="sm:col-span-3 h-8 text-sm"
+            autocomplete="new-password" />
         </div>
         <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
           <Label class="sm:text-right text-sm">并发控制</Label>
@@ -269,12 +281,9 @@ async function save() {
           <div class="sm:col-span-3">
             <p class="text-xs text-muted-foreground mb-1.5">格式: 秒 分 时 日 月 周</p>
             <div class="flex flex-wrap gap-1">
-              <span
-                v-for="preset in cronPresets"
-                :key="preset.value"
+              <span v-for="preset in cronPresets" :key="preset.value"
                 class="px-1.5 py-0.5 text-xs rounded bg-muted hover:bg-accent cursor-pointer transition-colors"
-                @click="form.schedule = preset.value"
-              >
+                @click="form.schedule = preset.value">
                 {{ preset.label }}
               </span>
             </div>
@@ -298,7 +307,8 @@ async function save() {
                   <SelectItem value="count">按条数</SelectItem>
                 </SelectContent>
               </Select>
-              <Input v-if="cleanType && cleanType !== 'none'" v-model.number="cleanKeep" type="number" :placeholder="cleanType === 'day' ? '7' : '100'" class="w-20 h-9 text-sm" />
+              <Input v-if="cleanType && cleanType !== 'none'" v-model.number="cleanKeep" type="number"
+                :placeholder="cleanType === 'day' ? '7' : '100'" class="w-20 h-9 text-sm" />
             </div>
           </div>
         </div>
diff --git a/web/src/views/tasks/TaskDialog.vue b/web/src/views/tasks/TaskDialog.vue
index 65c41ad..5f541d9 100644
--- a/web/src/views/tasks/TaskDialog.vue
+++ b/web/src/views/tasks/TaskDialog.vue
@@ -109,7 +109,7 @@ watch(() => props.open, async (val) => {
       if (!configStr) {
         configStr = '{}'
       }
-      
+
       const parsed = JSON.parse(configStr)
       // 确保解析结果是对象
       if (parsed && typeof parsed === 'object') {
@@ -178,10 +178,10 @@ async function save() {
     form.value.envs = selectedEnvIds.value.join(',')
     form.value.type = 'task'
     form.value.agent_id = selectedAgentId.value === 'local' ? null : Number(selectedAgentId.value)
-    
+
     // 保存配置 - 确保 concurrency 字段被正确保存
     let config: Record<string, any> = {}
-    
+
     // 如果 form.value.config 存在，先解析它以保留其他配置
     if (form.value.config) {
       try {
@@ -193,16 +193,16 @@ async function save() {
         config = {}
       }
     }
-    
+
     // 更新并发控制字段 (1: 开启, 0: 关闭)
     config['$task_concurrency'] = concurrency.value
-    
+
     // 重新序列化配置
     form.value.config = JSON.stringify(config)
 
     // 保存当前选择的执行位置对应的工作目录
     form.value.work_dir = currentWorkDir.value
-    
+
     if (props.isEdit && form.value.id) {
       await api.tasks.update(form.value.id, form.value)
       toast.success('任务已更新')
@@ -212,15 +212,15 @@ async function save() {
     }
     emit('update:open', false)
     emit('saved')
-  } catch (error) { 
-    toast.error('保存失败') 
+  } catch (error) {
+    toast.error('保存失败')
   }
 }
 </script>
 
 <template>
   <Dialog :open="open" @update:open="emit('update:open', $event)">
-    <DialogContent class="sm:max-w-[480px]" @open-auto-focus.prevent>
+    <DialogContent class="sm:max-w-[480px]" @openAutoFocus.prevent>
       <DialogHeader>
         <DialogTitle>{{ isEdit ? '编辑任务' : '新建任务' }}</DialogTitle>
       </DialogHeader>
@@ -248,7 +248,7 @@ async function save() {
                 <SelectValue placeholder="选择执行位置" />
               </SelectTrigger>
               <SelectContent>
-              <SelectItem value="local">本地执行</SelectItem>
+                <SelectItem value="local">本地执行</SelectItem>
                 <SelectItem v-for="agent in onlineAgents" :key="agent.id" :value="String(agent.id)">
                   {{ agent.name }} ({{ agent.status === 'online' ? '在线' : '离线' }})
                 </SelectItem>
@@ -265,12 +265,9 @@ async function save() {
           <div class="sm:col-span-3">
             <p class="text-xs text-muted-foreground mb-1.5">格式: 秒 分 时 日 月 周</p>
             <div class="flex flex-wrap gap-1">
-              <span
-                v-for="preset in cronPresets"
-                :key="preset.value"
+              <span v-for="preset in cronPresets" :key="preset.value"
                 class="px-1.5 py-0.5 text-xs rounded bg-muted hover:bg-accent cursor-pointer transition-colors"
-                @click="form.schedule = preset.value"
-              >
+                @click="form.schedule = preset.value">
                 {{ preset.label }}
               </span>
             </div>
@@ -294,7 +291,8 @@ async function save() {
                   <SelectItem value="count">按条数</SelectItem>
                 </SelectContent>
               </Select>
-              <Input v-if="cleanType && cleanType !== 'none'" v-model.number="cleanKeep" type="number" :placeholder="cleanType === 'day' ? '7' : '100'" class="w-20 h-9 text-sm" />
+              <Input v-if="cleanType && cleanType !== 'none'" v-model.number="cleanKeep" type="number"
+                :placeholder="cleanType === 'day' ? '7' : '100'" class="w-20 h-9 text-sm" />
             </div>
           </div>
         </div>
@@ -324,12 +322,9 @@ async function save() {
                   {{ allEnvVars.length === 0 ? '暂无环境变量' : '无匹配结果' }}
                 </div>
                 <div v-else class="max-h-[140px] overflow-y-auto space-y-0.5">
-                  <div
-                    v-for="env in filteredEnvVars"
-                    :key="env.id"
+                  <div v-for="env in filteredEnvVars" :key="env.id"
                     class="flex items-center gap-2 px-2 py-1 rounded hover:bg-muted cursor-pointer text-xs"
-                    @click="addEnv(env.id)"
-                  >
+                    @click="addEnv(env.id)">
                     <Plus class="h-3 w-3 text-muted-foreground" />
                     <span class="truncate">{{ env.name }}</span>
                   </div>
@@ -337,7 +332,8 @@ async function save() {
               </PopoverContent>
             </Popover>
             <div v-if="selectedEnvs.length > 0" class="flex flex-wrap gap-1">
-              <div v-for="env in selectedEnvs" :key="env.id" class="inline-flex items-center gap-0.5 px-2 py-0.5 text-xs h-5 rounded-full bg-secondary text-secondary-foreground">
+              <div v-for="env in selectedEnvs" :key="env.id"
+                class="inline-flex items-center gap-0.5 px-2 py-0.5 text-xs h-5 rounded-full bg-secondary text-secondary-foreground">
                 <span>{{ env.name }}</span>
                 <X class="h-2.5 w-2.5 cursor-pointer hover:text-destructive" @click="removeEnv(env.id)" />
               </div>