From f825692ecc0ae9e472cda995d4c03ef18ca9d64b Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@predator-mini.local>
Date: Tue, 24 Mar 2026 19:20:00 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20SSH=20key=20file=20browser=20=E2=80=94?=
 =?UTF-8?q?=20Browse=20button=20to=20load=20keys=20from=20disk?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a file picker next to the Private Key textarea in the credential
dialog. Users can browse for key files (.pem, .key, id_rsa, id_ed25519,
etc.) instead of copy-pasting PEM content. Uses standard FileReader API
— no additional Tauri plugins needed.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../connections/ConnectionEditDialog.vue      | 39 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/components/connections/ConnectionEditDialog.vue b/src/components/connections/ConnectionEditDialog.vue
index 88a4046..22191a5 100644
--- a/src/components/connections/ConnectionEditDialog.vue
+++ b/src/components/connections/ConnectionEditDialog.vue
@@ -270,10 +270,27 @@
                 </div>
                 <div>
                   <label class="block text-xs text-[var(--wraith-text-secondary)] mb-1">Private Key (PEM)</label>
+                  <div class="flex gap-2 mb-1">
+                    <button
+                      type="button"
+                      class="px-3 py-1.5 text-xs rounded bg-[#21262d] border border-[#30363d] text-[var(--wraith-text-secondary)] hover:text-[var(--wraith-text-primary)] hover:border-[var(--wraith-accent-blue)] transition-colors cursor-pointer"
+                      @click="browseKeyFile"
+                    >
+                      Browse...
+                    </button>
+                    <span v-if="keyFileName" class="text-xs text-[var(--wraith-text-muted)] self-center truncate">{{ keyFileName }}</span>
+                  </div>
+                  <input
+                    ref="keyFileInputRef"
+                    type="file"
+                    class="hidden"
+                    accept=".pem,.key,.pub,.id_rsa,.id_ed25519,.id_ecdsa,.ppk"
+                    @change="loadKeyFile"
+                  />
                   <textarea
                     v-model="newCred.privateKeyPEM"
                     rows="5"
-                    placeholder="-----BEGIN OPENSSH PRIVATE KEY-----&#10;...&#10;-----END OPENSSH PRIVATE KEY-----"
+                    placeholder="Paste key or use Browse to load from file"
                     class="w-full px-3 py-2 text-sm rounded bg-[#161b22] border border-[#30363d] text-[var(--wraith-text-primary)] placeholder-[var(--wraith-text-muted)] outline-none focus:border-[var(--wraith-accent-blue)] transition-colors resize-none font-mono"
                     spellcheck="false"
                   />
@@ -385,6 +402,25 @@ const newCred = ref<NewCredForm>({
   passphrase: "",
 });
 
+// SSH key file picker
+const keyFileInputRef = ref<HTMLInputElement | null>(null);
+const keyFileName = ref("");
+
+function browseKeyFile(): void {
+  keyFileInputRef.value?.click();
+}
+
+function loadKeyFile(event: Event): void {
+  const file = (event.target as HTMLInputElement).files?.[0];
+  if (!file) return;
+  keyFileName.value = file.name;
+  const reader = new FileReader();
+  reader.onload = () => {
+    newCred.value.privateKeyPEM = (reader.result as string).trim();
+  };
+  reader.readAsText(file);
+}
+
 const form = ref<ConnectionForm>({
   name: "",
   hostname: "",
@@ -431,6 +467,7 @@ function setProtocol(protocol: "ssh" | "rdp"): void {
 function resetNewCredForm(): void {
   newCred.value = { name: "", username: "", password: "", privateKeyPEM: "", passphrase: "" };
   newCredError.value = "";
+  keyFileName.value = "";
 }
 
 async function deleteSelectedCredential(): Promise<void> {