fix: modal scroll, SSH key textarea, nav full-page, remove OS/Provider

- Fix modal scroll: restructure overlay with scroll/centering wrapper
- Add SSH key textarea + file upload to host modal (authType='key')
- Fix textarea reset on new host (clear via DOM)
- SSH username placeholder instead of default 'root'
- Nav uses plain <a href> instead of HTMX for full-page navigation
- /hosts route returns full page; /hosts/list for HTMX partials
- Remove OS and Provider from host modal, grid card, and list card
- Fix key modal x-data scope for Alpine $dispatch
- Update key_grid to display multi-line key content properly
- Simplify SSH key placeholder format

app/backend/main.go

@@ -61,7 +61,8 @@ func main() {
 	app.Static("/static", "./static")
 
 	app.Get("/", handler.Dashboard)
-	app.Get("/hosts", handler.DashboardList)
+	app.Get("/hosts", handler.Dashboard)
+	app.Get("/hosts/list", handler.DashboardList)
 	app.Post("/hosts", handler.CreateHost)
 	app.Put("/hosts/:id", handler.UpdateHost)
 	app.Delete("/hosts/:id", handler.DeleteHost)

app/backend/views/host_list.html

@@ -20,18 +20,16 @@
         <span class="font-medium">{{.Username | default "root"}}@{{if .Hostname}}{{.Hostname}}{{else}}{{.IP}}{{end}}{{if ne .Port 22}}:{{.Port}}{{end}}</span>
       </p>
 
-      <div class="flex flex-wrap gap-1.5 mb-4">
+      {{if .Type}}<div class="flex flex-wrap gap-1.5 mb-4">
-        <span class="px-2 py-0.5 bg-surface-container-low rounded text-[10px] font-medium text-on-surface-variant">{{.OS}}</span>
+        <span class="px-2 py-0.5 bg-primary-container/10 text-primary rounded text-[10px] font-bold uppercase">{{.Type}}</span>
-        <span class="px-2 py-0.5 bg-surface-container-low rounded text-[10px] font-medium text-on-surface-variant">{{.Provider}}</span>
+      </div>{{end}}
-        {{if .Type}}<span class="px-2 py-0.5 bg-primary-container/10 text-primary rounded text-[10px] font-bold uppercase">{{.Type}}</span>{{end}}
-      </div>
 
       <div class="pt-3 border-t border-outline-variant/30 flex justify-between items-center text-xs">
         <span class="text-outline italic">Last seen {{.LastSeen}}</span>
         <div class="flex gap-1">
           <a href="/terminal?host={{.ID}}" class="bg-primary text-white hover:bg-primary-container hover:text-on-primary-container font-bold text-xs py-1.5 px-3 rounded-lg transition-all">Connect</a>
           <button type="button"
-                  @click="$dispatch('edit-host', { ID: '{{.ID}}', Name: '{{.Name}}', IP: '{{.IP}}', Hostname: '{{.Hostname}}', Port: {{.Port}}, Username: '{{.Username}}', OS: '{{.OS}}', Provider: '{{.Provider}}', Type: '{{.Type}}', AuthType: '{{.AuthType}}', Password: '{{.Password}}', Notes: '{{.Notes}}' })"
+                  @click="$dispatch('edit-host', { ID: '{{.ID}}', Name: '{{.Name}}', IP: '{{.IP}}', Hostname: '{{.Hostname}}', Port: {{.Port}}, Username: '{{.Username}}', Type: '{{.Type}}', AuthType: '{{.AuthType}}', Password: '{{.Password}}', Notes: '{{.Notes}}' })"
                   class="p-1.5 rounded-lg hover:bg-surface-container text-on-surface-variant hover:text-primary transition-colors" title="Edit">
             <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
           </button>
@@ -61,15 +59,11 @@
         <div class="w-10 h-10 rounded-lg bg-surface-container-low flex items-center justify-center text-primary shrink-0 border border-outline-variant/20">
           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14M12 5l7 7-7 7"/></svg>
         </div>
-        <div class="min-w-0 flex-1 sm:grid sm:grid-cols-3 sm:gap-4 items-center">
+        <div class="min-w-0 flex-1 sm:grid sm:grid-cols-2 sm:gap-4 items-center">
           <div>
             <h4 class="font-bold text-on-surface group-hover:text-primary transition-colors text-sm truncate">{{.Name}}</h4>
             <span class="font-mono text-xs text-outline">{{.IP}}</span>
           </div>
-          <div class="hidden sm:block">
-            <p class="text-xs text-on-surface-variant font-medium">{{.OS}}</p>
-            <p class="text-[10px] text-outline">{{.Provider}}</p>
-          </div>
           <div class="hidden md:block">
             <span class="text-xs text-outline italic">Seen {{.LastSeen}}</span>
           </div>
@@ -82,7 +76,7 @@
         </span>
         <a href="/terminal?host={{.ID}}" class="bg-primary text-white hover:bg-primary-container hover:text-on-primary-container font-bold text-xs py-1.5 px-4 rounded-lg transition-all">Connect</a>
         <button type="button"
-                @click="$dispatch('edit-host', { ID: '{{.ID}}', Name: '{{.Name}}', IP: '{{.IP}}', Hostname: '{{.Hostname}}', Port: {{.Port}}, Username: '{{.Username}}', OS: '{{.OS}}', Provider: '{{.Provider}}', Type: '{{.Type}}', AuthType: '{{.AuthType}}', Password: '{{.Password}}', Notes: '{{.Notes}}' })"
+                @click="$dispatch('edit-host', { ID: '{{.ID}}', Name: '{{.Name}}', IP: '{{.IP}}', Hostname: '{{.Hostname}}', Port: {{.Port}}, Username: '{{.Username}}', Type: '{{.Type}}', AuthType: '{{.AuthType}}', Password: '{{.Password}}', Notes: '{{.Notes}}' })"
                 class="p-1.5 rounded-lg hover:bg-surface-container text-on-surface-variant hover:text-primary transition-colors" title="Edit">
           <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/></svg>
         </button>
@@ -110,5 +104,4 @@
   </div>
   {{end}}
 </div>
-{{template "host_modal" .}}
 {{end}}

app/backend/views/host_modal.html

@@ -4,7 +4,8 @@
      @edit-host.window="populate($event.detail); open = true"
      @keydown.escape.window="open = false">
   <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
-  <div class="absolute inset-0 flex items-center justify-center p-4" x-show="open" x-transition>
+  <div class="absolute inset-0 overflow-y-auto p-4" x-show="open" x-transition>
+    <div class="flex min-h-full items-center justify-center">
       <div class="bg-white rounded-2xl max-w-lg w-full border border-outline-variant/30 shadow-2xl max-h-[90vh] overflow-y-auto">
 
       <div class="flex justify-between items-center border-b border-outline-variant/30 p-6 pb-4">
@@ -53,37 +54,6 @@
                  class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium text-on-surface">
         </div>
 
-        <div class="grid grid-cols-2 gap-4">
-          <div class="flex flex-col gap-1.5">
-            <label class="text-xs font-bold text-on-surface-variant uppercase">Operating System</label>
-            <select name="os" x-model="form.os"
-                    class="bg-surface-container-low border border-outline-variant/40 rounded-lg py-2 px-3 focus:outline-none focus:border-primary text-sm text-on-surface">
-              <option value="Ubuntu 22.04">Ubuntu 22.04</option>
-              <option value="Ubuntu 24.04">Ubuntu 24.04</option>
-              <option value="Debian 12">Debian 12</option>
-              <option value="Alpine 3.19">Alpine 3.19</option>
-              <option value="Fedora 39">Fedora 39</option>
-              <option value="Rocky 9">Rocky 9</option>
-              <option value="CentOS 8">CentOS 8</option>
-              <option value="Other">Other</option>
-            </select>
-          </div>
-          <div class="flex flex-col gap-1.5">
-            <label class="text-xs font-bold text-on-surface-variant uppercase">Provider</label>
-            <select name="provider" x-model="form.provider"
-                    class="bg-surface-container-low border border-outline-variant/40 rounded-lg py-2 px-3 focus:outline-none focus:border-primary text-sm text-on-surface">
-              <option value="AWS US-East">AWS Cloud</option>
-              <option value="AWS EU-West">AWS EU-West</option>
-              <option value="DigitalOcean">DigitalOcean</option>
-              <option value="Hetzner">Hetzner</option>
-              <option value="GCP US-Central">GCP Cloud</option>
-              <option value="Vultr">Vultr</option>
-              <option value="Linode">Linode</option>
-              <option value="Local">Local</option>
-            </select>
-          </div>
-        </div>
-
         <div class="flex flex-col gap-1.5">
           <label class="text-xs font-bold text-on-surface-variant uppercase">Host Purpose / Type</label>
           <div class="grid grid-cols-3 gap-2">
@@ -119,6 +89,20 @@
           <input type="hidden" name="authType" :value="form.authType">
         </div>
 
+        <div x-show="form.authType === 'key'" x-cloak class="flex flex-col gap-1.5">
+          <label class="text-xs font-bold text-on-surface-variant uppercase">SSH Private Key</label>
+          <textarea name="password" rows="5" placeholder="Paste your SSH private key here...&#10;&#10;-----BEGIN OPENSSH PRIVATE KEY-----&#10;...&#10;-----END OPENSSH PRIVATE KEY-----"
+                    class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-mono text-on-surface text-xs resize-none leading-relaxed"></textarea>
+          <div class="flex items-center gap-3 mt-1">
+            <label class="flex items-center gap-1.5 text-xs text-on-surface-variant cursor-pointer hover:text-primary transition-colors">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
+              Or upload a key file
+            </label>
+            <input type="file" class="hidden" accept=".pem,.key,.pub,.txt,.ppk" @change="readKeyFile($event)">
+            <span class="text-[10px] text-outline">.pem .key .ppk</span>
+          </div>
+        </div>
+
         <div x-show="form.authType === 'password'" x-cloak class="flex flex-col gap-1.5">
           <label class="text-xs font-bold text-on-surface-variant uppercase">Password</label>
           <input type="password" name="password" x-model="form.password" placeholder="SSH password"
@@ -142,6 +126,7 @@
     </div>
     </div>
   </div>
+</div>
 
 <script>
 function hostForm() {
@@ -150,18 +135,18 @@ function hostForm() {
     editing: false,
     hostId: '',
     form: {
-      name: '', ip: '', hostname: '', port: '22', username: 'root',
+      name: '', ip: '', hostname: '', port: '22', username: '',
-      os: 'Ubuntu 22.04', provider: 'AWS US-East', type: 'api',
+      type: 'api', authType: 'key', password: '', notes: ''
-      authType: 'key', password: '', notes: ''
     },
     reset() {
       this.editing = false;
       this.hostId = '';
       this.form = {
-        name: '', ip: '', hostname: '', port: '22', username: 'root',
+        name: '', ip: '', hostname: '', port: '22', username: '',
-        os: 'Ubuntu 22.04', provider: 'AWS US-East', type: 'api',
+        type: 'api', authType: 'key', password: '', notes: ''
-        authType: 'key', password: '', notes: ''
       };
+      var ta = document.querySelector('#host-modal textarea[name=password]');
+      if (ta) ta.value = '';
     },
     populate(host) {
       this.editing = true;
@@ -172,13 +157,23 @@ function hostForm() {
         hostname: host.Hostname || '',
         port: String(host.Port || 22),
         username: host.Username || 'root',
-        os: host.OS || 'Ubuntu 22.04',
-        provider: host.Provider || 'AWS US-East',
         type: host.Type || 'api',
         authType: host.AuthType || 'key',
         password: host.Password || '',
         notes: host.Notes || ''
       };
+      var ta = document.querySelector('#host-modal textarea[name=password]');
+      if (ta) ta.value = host.Password || '';
+    },
+    readKeyFile($event) {
+      var file = $event.target.files[0];
+      if (!file) return;
+      var reader = new FileReader();
+      var ta = document.querySelector('#host-modal textarea[name=password]');
+      reader.onload = function(e) {
+        if (ta) ta.value = e.target.result;
+      };
+      reader.readAsText(file);
     }
   };
 }

app/backend/views/index.html

@@ -68,22 +68,22 @@
                   <button @click="filter = 'all'"
                           :class="filter === 'all' ? 'bg-white text-primary shadow-sm' : 'text-on-surface-variant hover:text-on-surface'"
                           class="px-2.5 py-1 rounded-md transition-all"
-                          hx-get="/hosts?filter=all" hx-target="#host-list">All</button>
+                          hx-get="/hosts/list?filter=all" hx-target="#host-list">All</button>
                   <button @click="filter = 'active'"
                           :class="filter === 'active' ? 'bg-white text-primary shadow-sm' : 'text-on-surface-variant hover:text-on-surface'"
                           class="px-2.5 py-1 rounded-md transition-all"
-                          hx-get="/hosts?filter=active" hx-target="#host-list">Active</button>
+                          hx-get="/hosts/list?filter=active" hx-target="#host-list">Active</button>
                   <button @click="filter = 'offline'"
                           :class="filter === 'offline' ? 'bg-white text-primary shadow-sm' : 'text-on-surface-variant hover:text-on-surface'"
                           class="px-2.5 py-1 rounded-md transition-all"
-                          hx-get="/hosts?filter=offline" hx-target="#host-list">Offline</button>
+                          hx-get="/hosts/list?filter=offline" hx-target="#host-list">Offline</button>
                 </div>
               </div>
               <div class="flex items-center gap-3">
                 <div class="relative">
                   <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-outline w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    <input type="search" name="q" placeholder="Search hosts..."
-                         hx-get="/hosts" hx-trigger="keyup delay:200ms"
+                         hx-get="/hosts/list" hx-trigger="keyup delay:200ms"
                          hx-target="#host-list"
                          class="pl-9 pr-4 py-1.5 rounded-full bg-surface-container-low border border-outline-variant/30 text-sm focus:border-primary focus:bg-white focus:outline-none focus:ring-1 focus:ring-primary w-48 sm:w-60 transition-all text-on-surface placeholder-on-surface-variant">
                 </div>

app/backend/views/key_grid.html

@@ -39,7 +39,7 @@
     <div class="flex justify-between items-center py-1 border-b border-outline-variant/10">
       <span class="text-outline font-semibold uppercase tracking-wider text-[10px]">Credential Secrets</span>
       <div class="flex items-center gap-2">
-        <span class="font-mono text-on-surface-variant" x-text="reveal ? '{{.Passphrase}}' : '••••••••••••••••'"></span>
+        <span x-show="!reveal" class="font-mono text-on-surface-variant">••••••••••••••••</span>
         <button @click="reveal = !reveal"
                 class="p-1 hover:bg-surface-container rounded text-outline transition-colors" title="Toggle visibility">
           <svg x-show="reveal" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a10.06 10.06 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88L6.59 6.59m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>
@@ -51,6 +51,9 @@
         </button>
       </div>
     </div>
+    <div x-show="reveal" x-cloak class="py-1">
+      <code class="text-[10px] text-on-surface-variant font-mono block break-all bg-surface-container-low p-2 rounded border border-outline-variant/20 max-h-32 overflow-y-auto select-all whitespace-pre-wrap">{{.Passphrase}}</code>
+    </div>
 
     {{if .Fingerprint}}
     <div class="py-1">

app/backend/views/keychain.html

@@ -20,7 +20,7 @@
       <header class="h-14 border-b border-outline-variant/30 flex items-center px-6 bg-white/70 backdrop-blur-md">
         <h1 class="text-lg font-semibold text-on-surface">{{.Title}}</h1>
       </header>
-      <main id="main-content" class="flex-1 overflow-auto p-6">
+      <main id="main-content" class="flex-1 overflow-auto p-6" x-data>
         <div class="max-w-7xl mx-auto space-y-8">
           <!-- Header Panel -->
           <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-outline-variant/30 pb-4">
@@ -61,27 +61,42 @@
         </div>
 
         <!-- Add Credential Modal -->
-        <div id="key-modal" class="fixed inset-0 z-50" x-data="{ open: false }" x-show="open" x-cloak
+        <div id="key-modal" class="fixed inset-0 z-50" x-show="open" x-cloak
+             x-data="{ open: false, readFile($event) {
+               const file = $event.target.files[0];
+               if (!file) return;
+               const reader = new FileReader();
+               reader.onload = (e) => {
+                 document.querySelector('textarea[name=passphrase]').value = e.target.result;
+                 document.querySelector('textarea[name=passphrase]').dispatchEvent(new Event('input'));
+               };
+               reader.readAsText(file);
+             }}"
              @open-key-modal.window="open = true" @keydown.escape.window="open = false">
           <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" @click="open = false"></div>
           <div class="absolute inset-0 flex items-center justify-center p-4" x-show="open" x-transition>
-            <div class="bg-white rounded-2xl max-w-md w-full border border-outline-variant/30 shadow-2xl p-6 space-y-4">
+            <div class="bg-white rounded-2xl max-w-lg w-full border border-outline-variant/30 shadow-2xl max-h-[90vh] overflow-y-auto">
-              <div class="flex justify-between items-center border-b border-outline-variant/30 pb-3">
+
+              <div class="flex justify-between items-center border-b border-outline-variant/30 p-6 pb-4">
                 <h3 class="font-bold text-lg text-on-surface">Register Secure Credential</h3>
-                <button @click="open = false" class="text-outline hover:text-primary p-1 rounded">Cancel</button>
+                <button @click="open = false" class="text-outline hover:text-primary cursor-pointer p-1 rounded-lg">
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                </button>
               </div>
+
               <form hx-post="/keys" hx-target="#key-grid" hx-swap="innerHTML"
-                    @submit="open = false" class="space-y-4 text-sm">
+                    @submit="open = false" class="p-6 space-y-4 text-sm">
-                <div class="flex flex-col gap-1">
+                <div class="flex flex-col gap-1.5">
-                  <label class="text-xs font-bold text-on-surface-variant">CREDENTIAL NAME / LABEL</label>
+                  <label class="text-xs font-bold text-on-surface-variant uppercase">Credential Name / Label</label>
                   <input type="text" name="name" required placeholder="e.g. key_aws_alex"
-                         class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium">
+                         class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-medium text-on-surface">
                 </div>
+
                 <div class="grid grid-cols-2 gap-4">
-                  <div class="flex flex-col gap-1">
+                  <div class="flex flex-col gap-1.5">
-                    <label class="text-xs font-bold text-on-surface-variant">CREDENTIAL TYPE</label>
+                    <label class="text-xs font-bold text-on-surface-variant uppercase">Credential Type</label>
                     <select name="type"
-                            class="bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary">
+                            class="bg-surface-container-low border border-outline-variant/40 rounded-lg py-2 px-3 focus:outline-none focus:border-primary text-sm text-on-surface">
                       <option value="ED25519">ED25519 (Modern)</option>
                       <option value="SSH RSA">SSH RSA (Legacy)</option>
                       <option value="PASSWORD">Master Password</option>
@@ -89,22 +104,33 @@
                       <option value="AWS Key">AWS Access Key</option>
                     </select>
                   </div>
-                  <div class="flex flex-col gap-1">
+                  <div class="flex flex-col gap-1.5">
-                    <label class="text-xs font-bold text-on-surface-variant">LOGIN USERNAME</label>
+                    <label class="text-xs font-bold text-on-surface-variant uppercase">Login Username</label>
                     <input type="text" name="username" required placeholder="e.g. root or ubuntu"
-                           class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary font-medium">
+                           class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-3 focus:outline-none focus:border-primary text-on-surface">
                   </div>
                 </div>
-                <div class="flex flex-col gap-1">
+
-                  <label class="text-xs font-bold text-on-surface-variant">PASSPHRASE / TOKEN KEY</label>
+                <div class="flex flex-col gap-1.5">
-                  <input type="password" name="passphrase" required placeholder="Enter secure password secret..."
+                  <label class="text-xs font-bold text-on-surface-variant uppercase">Key / Secret Value</label>
-                         class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-mono">
+                  <textarea name="passphrase" required rows="5"
+                            placeholder="Paste your key or secret here...&#10;&#10;Example SSH key:&#10;-----BEGIN OPENSSH PRIVATE KEY-----&#10;b3BlbnNzaC1rZXktdjEAAAAIA...&#10;-----END OPENSSH PRIVATE KEY-----"
+                            class="w-full bg-surface-container-low border border-outline-variant/40 rounded-lg py-2.5 px-4 focus:ring-2 focus:ring-primary/20 focus:border-primary focus:outline-none transition-all font-mono text-on-surface text-xs resize-none leading-relaxed"></textarea>
+                  <div class="flex items-center gap-3 mt-1">
+                    <label class="flex items-center gap-1.5 text-xs text-on-surface-variant cursor-pointer hover:text-primary transition-colors">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
+                      Or upload a key file
+                    </label>
+                    <input type="file" class="hidden" accept=".pem,.key,.pub,.txt,.ppk,.p12,.pfx" @change="readFile($event)">
+                    <span class="text-[10px] text-outline">.pem .key .ppk .pub .txt</span>
                   </div>
+                </div>
+
                 <div class="pt-4 flex justify-end gap-3 border-t border-outline-variant/20">
                   <button type="button" @click="open = false"
-                          class="px-4 py-2 text-xs font-bold text-outline hover:text-on-surface">Cancel</button>
+                          class="px-4 py-2 text-xs font-bold text-outline hover:text-on-surface transition-colors">Cancel</button>
                   <button type="submit"
-                          class="bg-primary text-white py-2 px-5 rounded-lg font-bold text-xs shadow-md hover:bg-primary/90 transition-all">Save Credential</button>
+                          class="bg-primary text-white py-2 px-5 rounded-lg font-bold text-xs shadow-md hover:bg-primary-container hover:text-on-primary-container transition-all">Save Credential</button>
                 </div>
               </form>
             </div>

app/backend/views/nav.html

@@ -1,6 +1,6 @@
 {{define "nav"}}
 <nav class="w-[260px] min-h-screen bg-white/70 backdrop-blur-md border-r border-outline-variant/30 flex flex-col shrink-0"
-     x-data="{ page: '{{.View}}' }" @htmx:after-settle.window="page = location.pathname.slice(1) || 'hosts'">
+     x-data="{ page: '{{.View}}' }">
   <div class="p-3 border-b border-outline-variant/20">
     <div class="flex items-center gap-2">
       <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white text-sm font-bold">K</div>
@@ -10,7 +10,6 @@
   <div class="flex-1 px-3 py-4 space-y-0.5">
     {{range .NavItems}}
     <a href="/{{.ID}}"
-       hx-get="/{{.ID}}" hx-target="#main-content" hx-push-url="true"
        :class="page === '{{.ID}}' ? 'bg-primary/10 text-primary font-medium' : 'text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface'"
        class="flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm">
       <span class="w-5 h-5 flex items-center justify-center">{{svg .Icon}}</span>