From c23724bade256b85d64f4a3bf1e7a3e64ed9a128 Mon Sep 17 00:00:00 2001
From: Samuel James <143277412+SamuelSJames@users.noreply.github.com>
Date: Sat, 20 Jun 2026 07:48:22 -0400
Subject: [PATCH] Add explicit Host Name field for SSH hosts (#14)

* 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

* Add explicit Host Name field for SSH hosts

The SSH host name was only editable via a small inline header input,
not a clearly labeled form field like the other options (Host / IP,
Port, etc). Add a proper "Host Name" labeled field to both existing
and new SSH host forms.

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 | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 5082bf2..1f8b6b6 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -468,7 +468,7 @@ function SshHostsSection() {
     setBusyFlag(key, true)
     try {
       const { config, secrets } = buildPayload(fieldsWithJumpHost(), values)
-      const name = values.host ? `SSH: ${values.host}` : 'SSH Host'
+      const name = values.__name?.trim() || (values.host ? `SSH: ${values.host}` : 'SSH Host')
       await api.createIntegration({ type: 'ssh', name, config, secrets })
       removeNewDraft(key)
       refresh()
@@ -598,11 +598,7 @@ function SshHostsSection() {
                     boxShadow: online ? '0 0 6px rgba(46,204,113,0.6)' : 'none',
                   }}
                 />
-                <input
-                  value={draft.__name ?? host.name}
-                  onChange={(e) => setDraftField(host.id, '__name', e.target.value)}
-                  style={{ fontSize: '13px', color: '#E8E6E0', fontWeight: 600, backgroundColor: 'transparent', border: 'none', outline: 'none', padding: 0, width: '180px' }}
-                />
+                <span style={{ fontSize: '13px', color: '#E8E6E0', fontWeight: 600 }}>{draft.__name ?? host.name}</span>
               </div>
               <div className="flex items-center gap-2">
                 {statusMsg[host.id] && <span style={{ fontSize: '11px', color: '#7A7D85' }}>{statusMsg[host.id]}</span>}
@@ -633,6 +629,15 @@ function SshHostsSection() {
               </div>
             </div>
             <div className="grid grid-cols-3 gap-4">
+              <div>
+                <label style={labelStyle}>Host Name</label>
+                <input
+                  style={inputStyle}
+                  value={draft.__name ?? host.name}
+                  onChange={(e) => setDraftField(host.id, '__name', e.target.value)}
+                  placeholder="Not configured"
+                />
+              </div>
               {renderFields(fieldsWithJumpHost(), draft, (k, v) => setDraftField(host.id, k, v), host.id, host, host.id)}
             </div>
           </div>
@@ -663,6 +668,15 @@ function SshHostsSection() {
             </div>
           </div>
           <div className="grid grid-cols-3 gap-4">
+            <div>
+              <label style={labelStyle}>Host Name</label>
+              <input
+                style={inputStyle}
+                value={d.values.__name ?? ''}
+                onChange={(e) => setNewDraftField(d.key, '__name', e.target.value)}
+                placeholder="SSH Host"
+              />
+            </div>
             {renderFields(fieldsWithJumpHost(), d.values, (k, v) => setNewDraftField(d.key, k, v), d.key, undefined)}
           </div>
         </div>