Fix integration save data loss; add SSH host card collapse (#16)

* 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 file upload for SSH private key and certificate fields

Lets users pick a key file from disk (e.g. ~/.ssh) instead of pasting
its contents into the Private Key / OPKSSH Certificate fields.

* Fix SSH private key paste corrupting multi-line PEM format

Private Key and Certificate fields were single-line <input> elements,
which strip newlines on paste and corrupt PEM-formatted keys (causing
'Unsupported key format' errors). Render them as multi-line textareas
instead so pasted keys keep their line breaks.

* Fix integration save wiping untouched config fields

The PUT /api/integrations/:id route fully overwrites config_json with
whatever config object is sent (no merge), but buildPayload only
included fields the user had actually edited. Saving after editing
just one field (e.g. pasting a new SSH key) silently dropped every
other config field. Merge the existing integration's config into the
payload before sending.

* Add collapse/expand for SSH host cards

Click the chevron to collapse a host's card once it's configured.
Collapsed cards keep all field state in memory (just hidden), and
auto-collapse after a successful Save.

* Install openssh-client in backend image for certificate-auth SSH

Certificate-based SSH connections shell out to the system ssh binary
via node-pty (ssh2 has no OpenSSH certificate support), but the
alpine runtime image never installed openssh-client. This caused
'execvp(3) failed: No such file or directory' for any host with an
OPKSSH certificate configured.

---------

Co-authored-by: Claude <noreply@anthropic.com>

backend/Dockerfile

@@ -12,7 +12,9 @@ WORKDIR /app
 ENV NODE_ENV=production
 # Toolchain is needed again here: production deps are reinstalled fresh, and the
 # native modules (better-sqlite3, ssh2, node-pty) compile from source on install.
-RUN apk add --no-cache python3 make g++
+# openssh-client provides the `ssh` binary, which node-pty shells out to for
+# certificate-based auth (ssh2 has no OpenSSH certificate support).
+RUN apk add --no-cache python3 make g++ openssh-client
 COPY package.json package-lock.json* ./
 RUN npm install --omit=dev
 COPY --from=build /app/dist ./dist

src/pages/Settings.tsx

@@ -15,6 +15,8 @@ import {
   Upload,
   Trash2,
   Camera,
+  ChevronDown,
+  ChevronRight,
 } from 'lucide-react'
 
 const navSections = [
@@ -383,10 +385,20 @@ function SshHostsSection() {
   const [drafts, setDrafts] = useState<Record<number, Record<string, string>>>({})
   const [statusMsg, setStatusMsg] = useState<Record<number, string>>({})
   const [busy, setBusy] = useState<Set<number>>(new Set())
+  const [collapsed, setCollapsed] = useState<Set<number>>(new Set())
   const [newDrafts, setNewDrafts] = useState<{ key: number; values: Record<string, string> }[]>([])
   const nextNewKey = useRef(-1)
   const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({})
 
+  function toggleCollapsed(id: number) {
+    setCollapsed((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
   useEffect(() => {
     refresh()
   }, [])
@@ -436,8 +448,8 @@ function SshHostsSection() {
     { key: 'sessionLogging', label: 'Record session to disk' },
   ]
 
-  function buildPayload(fields: FieldDef[], values: Record<string, string>) {
+  function buildPayload(fields: FieldDef[], values: Record<string, string>, existing?: Integration) {
-    const config: Record<string, string> = {}
+    const config: Record<string, string> = { ...(existing?.config ?? {}) }
     const secrets: Record<string, string> = {}
     for (const f of fields) {
       const value = values[f.key]
@@ -453,11 +465,12 @@ function SshHostsSection() {
     setStatusMsg((prev) => ({ ...prev, [host.id]: '' }))
     try {
       const draft = drafts[host.id] ?? {}
-      const { config, secrets } = buildPayload(fieldsWithJumpHost(), draft)
+      const { config, secrets } = buildPayload(fieldsWithJumpHost(), draft, host)
       const name = draft.__name?.trim()
       const { integration } = await api.updateIntegration(host.id, { ...(name ? { name } : {}), config, secrets })
       setHosts((prev) => (prev ?? []).map((h) => (h.id === integration.id ? integration : h)))
       setStatusMsg((prev) => ({ ...prev, [host.id]: 'Saved' }))
+      setCollapsed((prev) => new Set(prev).add(host.id))
     } catch (err) {
       setStatusMsg((prev) => ({ ...prev, [host.id]: err instanceof ApiError ? err.message : 'Save failed' }))
     } finally {
@@ -624,10 +637,17 @@ function SshHostsSection() {
       {hosts.map((host) => {
         const online = host.status === 'connected'
         const draft = drafts[host.id] ?? {}
+        const isCollapsed = collapsed.has(host.id)
         return (
           <div key={host.id} style={cardBase}>
-            <div className="flex items-center justify-between" style={{ marginBottom: '16px' }}>
+            <div className="flex items-center justify-between" style={{ marginBottom: isCollapsed ? 0 : '16px' }}>
-              <div className="flex items-center gap-2.5">
+              <button
+                onClick={() => toggleCollapsed(host.id)}
+                className="flex items-center gap-2.5 cursor-pointer border-none bg-transparent"
+                style={{ padding: 0 }}
+                title={isCollapsed ? 'Expand' : 'Collapse'}
+              >
+                {isCollapsed ? <ChevronRight size={14} color="#7A7D85" /> : <ChevronDown size={14} color="#7A7D85" />}
                 <span
                   style={{
                     width: '8px',
@@ -638,9 +658,10 @@ function SshHostsSection() {
                   }}
                 />
                 <span style={{ fontSize: '13px', color: '#E8E6E0', fontWeight: 600 }}>{draft.__name ?? host.name}</span>
-              </div>
+              </button>
               <div className="flex items-center gap-2">
                 {statusMsg[host.id] && <span style={{ fontSize: '11px', color: '#7A7D85' }}>{statusMsg[host.id]}</span>}
+                {!isCollapsed && (
                   <button
                     onClick={() => handleSaveExisting(host)}
                     disabled={busy.has(host.id)}
@@ -649,6 +670,7 @@ function SshHostsSection() {
                   >
                     Save
                   </button>
+                )}
                 <button
                   onClick={() => handleTest(host)}
                   disabled={busy.has(host.id)}
@@ -667,7 +689,8 @@ function SshHostsSection() {
                 </button>
               </div>
             </div>
-            <div className="grid grid-cols-3 gap-4">
+            {!isCollapsed && (
+              <div className="grid grid-cols-3 gap-4" style={{ marginTop: '16px' }}>
                 <div>
                   <label style={labelStyle}>Host Name</label>
                   <input
@@ -679,6 +702,7 @@ function SshHostsSection() {
                 </div>
                 {renderFields(fieldsWithJumpHost(), draft, (k, v) => setDraftField(host.id, k, v), host.id, host, host.id)}
               </div>
+            )}
           </div>
         )
       })}
@@ -782,8 +806,8 @@ function IntegrationsSection() {
     setNewDrafts((prev) => prev.filter((d) => d.id !== id))
   }
 
-  function buildPayload(def: (typeof integrationTypeDefs)[number], values: Record<string, string>) {
+  function buildPayload(def: (typeof integrationTypeDefs)[number], values: Record<string, string>, existing?: Integration) {
-    const config: Record<string, string> = {}
+    const config: Record<string, string> = { ...(existing?.config ?? {}) }
     const secrets: Record<string, string> = {}
     for (const f of def.fields) {
       const value = values[f.key]
@@ -799,7 +823,7 @@ function IntegrationsSection() {
     setBusyFlag(rowKey, true)
     setStatusMsg((prev) => ({ ...prev, [rowKey]: '' }))
     try {
-      const { config, secrets } = buildPayload(def, editDrafts[existing.id] ?? {})
+      const { config, secrets } = buildPayload(def, editDrafts[existing.id] ?? {}, existing)
       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)))