From 39c94e40454a726c542a2f187bf795197642a6bb Mon Sep 17 00:00:00 2001
From: Samuel James <143277412+SamuelSJames@users.noreply.github.com>
Date: Sat, 20 Jun 2026 07:40:03 -0400
Subject: [PATCH] Add editable name field to generic integrations (#13)

* Add editable display-name field to generic integrations

Lets users set a custom name for Proxmox, Docker, AWS, Remote Desktop,
Netbird, Cloudflare, Uptime Kuma, and Weather integrations, separate
from the host/IP field, mirroring the SSH host rename pattern.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016kF4hZWEkRCPPvCZTeXxn4

* Surface the new-integration name field as a labeled input

The name field for new generic integrations was a faint header input
with only placeholder text, easy to miss. Move it into the form grid
as a proper labeled "Name" field next to the other connection fields.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016kF4hZWEkRCPPvCZTeXxn4

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 src/pages/Settings.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 7acac7a..5082bf2 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -747,7 +747,8 @@ function IntegrationsSection() {
     setStatusMsg((prev) => ({ ...prev, [rowKey]: '' }))
     try {
       const { config, secrets } = buildPayload(def, editDrafts[existing.id] ?? {})
-      const { integration } = await api.updateIntegration(existing.id, { config, secrets })
+      const name = editDrafts[existing.id]?.__name?.trim()
+      const { integration } = await api.updateIntegration(existing.id, { ...(name ? { name } : {}), config, secrets })
       setIntegrations((prev) => (prev ?? []).map((i) => (i.id === integration.id ? integration : i)))
       setStatusMsg((prev) => ({ ...prev, [rowKey]: 'Saved' }))
     } catch (err) {
@@ -763,7 +764,8 @@ function IntegrationsSection() {
     setStatusMsg((prev) => ({ ...prev, [rowKey]: '' }))
     try {
       const { config, secrets } = buildPayload(def, draft.values)
-      const { integration } = await api.createIntegration({ type: def.type, name: def.name, config, secrets })
+      const name = draft.values.__name?.trim() || def.name
+      const { integration } = await api.createIntegration({ type: def.type, name, config, secrets })
       setIntegrations((prev) => [...(prev ?? []), integration])
       removeNewDraft(draft.id)
     } catch (err) {
@@ -879,7 +881,11 @@ function IntegrationsSection() {
                           boxShadow: online ? '0 0 6px rgba(46,204,113,0.6)' : 'none',
                         }}
                       />
-                      <span style={{ fontSize: '13px', color: '#E8E6E0', fontWeight: 600 }}>{existing.name || def.name}</span>
+                      <input
+                        value={draft.__name ?? existing.name ?? def.name}
+                        onChange={(e) => setEditField(existing.id, '__name', e.target.value)}
+                        style={{ fontSize: '13px', color: '#E8E6E0', fontWeight: 600, backgroundColor: 'transparent', border: 'none', outline: 'none', padding: 0, width: '160px' }}
+                      />
                       {existing.config.baseUrl || existing.config.hostname ? (
                         <span style={{ fontSize: '11px', color: '#7A7D85' }}>{existing.config.baseUrl || existing.config.hostname}</span>
                       ) : null}
@@ -952,6 +958,17 @@ function IntegrationsSection() {
                       </button>
                     </div>
                   </div>
+                  <div className="grid grid-cols-3 gap-4" style={{ marginBottom: '16px' }}>
+                    <div>
+                      <label style={labelStyle}>Name</label>
+                      <input
+                        style={inputStyle}
+                        value={draft.values.__name ?? ''}
+                        onChange={(e) => setNewDraftField(draft.id, '__name', e.target.value)}
+                        placeholder={def.name}
+                      />
+                    </div>
+                  </div>
                   {renderFields(
                     def,
                     rowKey,