From 7e347ce378af2f3dcf400339ce1b6174f94d6a59 Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@predator-mini.local>
Date: Fri, 13 Mar 2026 10:30:29 -0400
Subject: [PATCH] fix: add tags input to host modal, pass groupId when creating
 from group

- Tags field added to New Host modal (comma separated)
- Clicking + on a group now passes groupId to the new host
- Shows "Adding to: GroupName" in modal when creating from a group
- Refreshes tree after host creation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/pages/index.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index befa0e7..14acdb1 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -26,6 +26,7 @@ onMounted(async () => {
 
 function openNewHost(groupId?: number) {
   editingHost.value = groupId ? { groupId } : null
+  inlineHost.value = { name: '', hostname: '', port: 22, protocol: 'ssh', groupId: groupId || null, tags: '' }
   showHostDialog.value = true
 }
 
@@ -112,7 +113,7 @@ function dismissSavePrompt() {
 }
 
 // Inline modal state
-const inlineHost = ref({ name: '', hostname: '', port: 22, protocol: 'ssh' as 'ssh' | 'rdp' })
+const inlineHost = ref({ name: '', hostname: '', port: 22, protocol: 'ssh' as 'ssh' | 'rdp', groupId: null as number | null, tags: '' })
 
 async function createGroupInline() {
   const nameEl = document.getElementById('grp-name') as HTMLInputElement
@@ -123,14 +124,21 @@ async function createGroupInline() {
 
 async function createHostInline() {
   if (!inlineHost.value.name || !inlineHost.value.hostname) return
+  const tags = inlineHost.value.tags
+    .split(',')
+    .map(t => t.trim())
+    .filter(Boolean)
   await connections.createHost({
     name: inlineHost.value.name,
     hostname: inlineHost.value.hostname,
     port: inlineHost.value.port,
     protocol: inlineHost.value.protocol,
+    groupId: inlineHost.value.groupId,
+    tags,
   })
   showHostDialog.value = false
-  inlineHost.value = { name: '', hostname: '', port: 22, protocol: 'ssh' }
+  inlineHost.value = { name: '', hostname: '', port: 22, protocol: 'ssh', groupId: null, tags: '' }
+  await connections.fetchTree()
 }
 
 // Client-side search filtering
@@ -383,6 +391,10 @@ async function deleteSelectedHost() {
           </div>
         </div>
         <div v-else class="space-y-3">
+          <!-- Show which group this host will be added to -->
+          <div v-if="inlineHost.groupId" class="text-xs text-gray-500 bg-gray-800 rounded px-2 py-1">
+            Adding to: <span class="text-gray-300">{{ connections.groups.find((g: any) => g.id === inlineHost.groupId)?.name || 'Group' }}</span>
+          </div>
           <div>
             <label class="block text-sm text-gray-400 mb-1">Name</label>
             <input v-model="inlineHost.name" type="text" placeholder="My Server"
@@ -407,6 +419,11 @@ async function deleteSelectedHost() {
               <option value="rdp">RDP</option>
             </select>
           </div>
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Tags <span class="text-gray-600">(comma separated)</span></label>
+            <input v-model="inlineHost.tags" type="text" placeholder="ssh, prod, web"
+              class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white" />
+          </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>