fix: wire up Edit Host modal with pre-populated fields

- Edit now populates name, hostname, port, protocol, group, credential, tags
- Modal title shows "Edit Host" vs "New Host" appropriately
- Save calls updateHost for existing hosts, createHost for new
- Added group dropdown selector to host modal
- Button shows "Update" when editing

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

frontend/pages/index.vue

@@ -43,8 +43,25 @@ async function openNewHost(groupId?: number) {
   showHostDialog.value = true
 }
 
-function openEditHost(host: any) {
+async function openEditHost(host: any) {
   editingHost.value = host
+  inlineHost.value = {
+    name: host.name || '',
+    hostname: host.hostname || '',
+    port: host.port || 22,
+    protocol: host.protocol || 'ssh',
+    groupId: host.groupId || host.group?.id || null,
+    tags: (host.tags || []).join(', '),
+    credentialId: host.credentialId || null,
+  }
+  try {
+    const [creds, keys] = await Promise.all([
+      vault.listCredentials() as Promise<any[]>,
+      vault.listKeys() as Promise<any[]>,
+    ])
+    allCredentials.value = creds
+    allSshKeys.value = keys
+  } catch { /* ignore */ }
   showHostDialog.value = true
 }
 
@@ -135,13 +152,13 @@ async function createGroupInline() {
   showGroupDialog.value = false
 }
 
-async function createHostInline() {
+async function saveHostInline() {
   if (!inlineHost.value.name || !inlineHost.value.hostname) return
   const tags = inlineHost.value.tags
     .split(',')
     .map(t => t.trim())
     .filter(Boolean)
-  await connections.createHost({
+  const payload = {
     name: inlineHost.value.name,
     hostname: inlineHost.value.hostname,
     port: inlineHost.value.port,
@@ -149,10 +166,21 @@ async function createHostInline() {
     groupId: inlineHost.value.groupId,
     credentialId: inlineHost.value.credentialId,
     tags,
-  })
+  }
+  if (editingHost.value?.id) {
+    await connections.updateHost(editingHost.value.id, payload)
+  } else {
+    await connections.createHost(payload)
+  }
   showHostDialog.value = false
+  editingHost.value = null
   inlineHost.value = { name: '', hostname: '', port: 22, protocol: 'ssh', groupId: null, tags: '', credentialId: null }
   await connections.fetchTree()
+  // Refresh selected host details if it was the one we edited
+  if (selectedHost.value?.id === editingHost.value?.id) {
+    const updated = connections.hosts.find((h: any) => h.id === selectedHost.value.id)
+    if (updated) selectedHost.value = updated
+  }
 }
 
 // Client-side search filtering
@@ -392,7 +420,7 @@ async function deleteSelectedHost() {
     <div v-if="showGroupDialog || showHostDialog" class="fixed inset-0 z-[9999] flex items-center justify-center" style="z-index: 99999;">
       <div class="absolute inset-0 bg-black bg-opacity-70" @click="showGroupDialog = false; showHostDialog = false" />
       <div class="relative bg-gray-900 border border-gray-700 rounded-lg shadow-2xl p-6 w-96" style="background: #1a1a2e; border: 2px solid #e94560;">
-        <h3 class="text-lg font-bold text-white mb-4">{{ showGroupDialog ? 'New Group' : 'New Host' }}</h3>
+        <h3 class="text-lg font-bold text-white mb-4">{{ showGroupDialog ? 'New Group' : (editingHost?.id ? 'Edit Host' : 'New Host') }}</h3>
         <div v-if="showGroupDialog" class="space-y-3">
           <div>
             <label class="block text-sm text-gray-400 mb-1">Group Name</label>
@@ -405,9 +433,13 @@ async function deleteSelectedHost() {
           </div>
         </div>
         <div v-else class="space-y-3">
-          <!-- Show which group this host will be added to -->
+          <!-- Group selector -->
-          <div v-if="inlineHost.groupId" class="text-xs text-gray-500 bg-gray-800 rounded px-2 py-1">
+          <div>
-            Adding to: <span class="text-gray-300">{{ connections.groups.find((g: any) => g.id === inlineHost.groupId)?.name || 'Group' }}</span>
+            <label class="block text-sm text-gray-400 mb-1">Group</label>
+            <select v-model="inlineHost.groupId" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white">
+              <option :value="null">— Ungrouped —</option>
+              <option v-for="g in connections.groups" :key="g.id" :value="g.id">{{ g.name }}</option>
+            </select>
           </div>
           <div>
             <label class="block text-sm text-gray-400 mb-1">Name</label>
@@ -449,7 +481,7 @@ async function deleteSelectedHost() {
           </div>
           <div class="flex justify-end gap-2 pt-2">
             <button @click="showHostDialog = false" class="px-4 py-2 text-sm text-gray-400 hover:text-white">Cancel</button>
-            <button @click="createHostInline()" class="px-4 py-2 text-sm bg-sky-600 hover:bg-sky-700 text-white rounded">Save</button>
+            <button @click="saveHostInline()" class="px-4 py-2 text-sm bg-sky-600 hover:bg-sky-700 text-white rounded">{{ editingHost?.id ? 'Update' : 'Save' }}</button>
           </div>
         </div>
       </div>