From 19183ee546c713eb65bbd0cea07608bcf0fdb605 Mon Sep 17 00:00:00 2001
From: Vantz Stockwell <vstockwell@predator-mini.local>
Date: Thu, 12 Mar 2026 17:30:59 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20vault=20management=20UI=20=E2=80=94=20S?=
 =?UTF-8?q?SH=20key=20import=20+=20credential=20CRUD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/components/vault/CredentialForm.vue  | 163 ++++++++++++++++++
 frontend/components/vault/KeyImportDialog.vue | 125 ++++++++++++++
 frontend/composables/useVault.ts              |  36 ++++
 frontend/pages/vault/credentials.vue          | 119 +++++++++++++
 frontend/pages/vault/index.vue                |  64 +++++++
 frontend/pages/vault/keys.vue                 |  97 +++++++++++
 6 files changed, 604 insertions(+)
 create mode 100644 frontend/components/vault/CredentialForm.vue
 create mode 100644 frontend/components/vault/KeyImportDialog.vue
 create mode 100644 frontend/composables/useVault.ts
 create mode 100644 frontend/pages/vault/credentials.vue
 create mode 100644 frontend/pages/vault/index.vue
 create mode 100644 frontend/pages/vault/keys.vue

diff --git a/frontend/components/vault/CredentialForm.vue b/frontend/components/vault/CredentialForm.vue
new file mode 100644
index 0000000..1e938aa
--- /dev/null
+++ b/frontend/components/vault/CredentialForm.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+const props = defineProps<{
+  visible: boolean
+  credential: any | null
+  sshKeys: any[]
+}>()
+
+const emit = defineEmits<{
+  'update:visible': [boolean]
+  saved: []
+}>()
+
+const vault = useVault()
+
+const form = ref({
+  name: '',
+  type: 'password' as 'password' | 'ssh_key',
+  username: '',
+  password: '',
+  sshKeyId: null as number | null,
+  domain: '',
+})
+const saving = ref(false)
+const error = ref('')
+
+const isEdit = computed(() => !!props.credential)
+
+watch(() => props.visible, (val) => {
+  if (val) {
+    if (props.credential) {
+      form.value = {
+        name: props.credential.name || '',
+        type: props.credential.type || 'password',
+        username: props.credential.username || '',
+        password: '',
+        sshKeyId: props.credential.sshKeyId || null,
+        domain: props.credential.domain || '',
+      }
+    } else {
+      form.value = { name: '', type: 'password', username: '', password: '', sshKeyId: null, domain: '' }
+    }
+    error.value = ''
+  }
+})
+
+function close() {
+  emit('update:visible', false)
+}
+
+async function handleSubmit() {
+  if (!form.value.name.trim()) {
+    error.value = 'Name is required.'
+    return
+  }
+  saving.value = true
+  error.value = ''
+  try {
+    const payload: any = {
+      name: form.value.name.trim(),
+      type: form.value.type,
+      username: form.value.username.trim() || undefined,
+      domain: form.value.domain.trim() || undefined,
+    }
+    if (form.value.type === 'password' && form.value.password) {
+      payload.password = form.value.password
+    }
+    if (form.value.type === 'ssh_key' && form.value.sshKeyId) {
+      payload.sshKeyId = form.value.sshKeyId
+    }
+
+    if (isEdit.value) {
+      await vault.updateCredential(props.credential.id, payload)
+    } else {
+      await vault.createCredential(payload)
+    }
+    emit('saved')
+    close()
+  } catch (e: any) {
+    error.value = e?.data?.message || 'Save failed.'
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="fixed inset-0 z-50 flex items-center justify-center">
+      <div class="absolute inset-0 bg-black/60" @click="close" />
+      <div class="relative bg-gray-800 rounded-lg border border-gray-700 w-full max-w-lg mx-4 p-6 shadow-xl">
+        <h3 class="text-lg font-semibold text-white mb-4">
+          {{ isEdit ? 'Edit Credential' : 'New Credential' }}
+        </h3>
+
+        <div v-if="error" class="mb-4 p-3 bg-red-900/50 border border-red-700 rounded text-red-300 text-sm">
+          {{ error }}
+        </div>
+
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Name <span class="text-red-400">*</span></label>
+            <input v-model="form.name" type="text" placeholder="e.g. prod-server-admin"
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-wraith-500 focus:outline-none text-sm" />
+          </div>
+
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Type</label>
+            <select v-model="form.type"
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-wraith-500 focus:outline-none text-sm">
+              <option value="password">Password</option>
+              <option value="ssh_key">SSH Key</option>
+            </select>
+          </div>
+
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Username</label>
+            <input v-model="form.username" type="text" placeholder="e.g. admin"
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-wraith-500 focus:outline-none text-sm" />
+          </div>
+
+          <div v-if="form.type === 'password'">
+            <label class="block text-sm text-gray-400 mb-1">
+              Password <span v-if="isEdit" class="text-gray-600">(leave blank to keep current)</span>
+            </label>
+            <input v-model="form.password" type="password" placeholder="Enter password"
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-wraith-500 focus:outline-none text-sm" />
+          </div>
+
+          <div v-if="form.type === 'ssh_key'">
+            <label class="block text-sm text-gray-400 mb-1">SSH Key</label>
+            <select v-model="form.sshKeyId"
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-wraith-500 focus:outline-none text-sm">
+              <option :value="null">— Select a key —</option>
+              <option v-for="key in sshKeys" :key="key.id" :value="key.id">
+                {{ key.name }} ({{ key.keyType || 'rsa' }})
+              </option>
+            </select>
+            <p v-if="sshKeys.length === 0" class="text-xs text-gray-500 mt-1">
+              No SSH keys in vault yet.
+              <NuxtLink to="/vault/keys" class="text-wraith-400 hover:underline">Import one first.</NuxtLink>
+            </p>
+          </div>
+
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Domain <span class="text-gray-600">(optional, for RDP)</span></label>
+            <input v-model="form.domain" type="text" placeholder="e.g. CORP"
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-wraith-500 focus:outline-none text-sm" />
+          </div>
+        </div>
+
+        <div class="flex justify-end gap-3 mt-6">
+          <button @click="close" class="px-4 py-2 text-sm text-gray-400 hover:text-white rounded border border-gray-600 hover:border-gray-400">
+            Cancel
+          </button>
+          <button @click="handleSubmit" :disabled="saving"
+            class="px-4 py-2 text-sm bg-wraith-600 hover:bg-wraith-700 text-white rounded disabled:opacity-50">
+            {{ saving ? 'Saving...' : (isEdit ? 'Update' : 'Create') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
diff --git a/frontend/components/vault/KeyImportDialog.vue b/frontend/components/vault/KeyImportDialog.vue
new file mode 100644
index 0000000..32584a7
--- /dev/null
+++ b/frontend/components/vault/KeyImportDialog.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+const props = defineProps<{
+  visible: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:visible': [boolean]
+  imported: []
+}>()
+
+const vault = useVault()
+
+const form = ref({
+  name: '',
+  privateKey: '',
+  publicKey: '',
+  passphrase: '',
+})
+const saving = ref(false)
+const error = ref('')
+
+function close() {
+  emit('update:visible', false)
+  form.value = { name: '', privateKey: '', publicKey: '', passphrase: '' }
+  error.value = ''
+}
+
+async function handleSubmit() {
+  if (!form.value.name.trim() || !form.value.privateKey.trim()) {
+    error.value = 'Name and private key are required.'
+    return
+  }
+  saving.value = true
+  error.value = ''
+  try {
+    await vault.importKey({
+      name: form.value.name.trim(),
+      privateKey: form.value.privateKey.trim(),
+      publicKey: form.value.publicKey.trim() || undefined,
+      passphrase: form.value.passphrase || undefined,
+    })
+    emit('imported')
+    close()
+  } catch (e: any) {
+    error.value = e?.data?.message || 'Import failed.'
+  } finally {
+    saving.value = false
+  }
+}
+
+function handleFileUpload(field: 'privateKey' | 'publicKey', event: Event) {
+  const file = (event.target as HTMLInputElement).files?.[0]
+  if (!file) return
+  const reader = new FileReader()
+  reader.onload = (e) => {
+    form.value[field] = e.target?.result as string
+  }
+  reader.readAsText(file)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="fixed inset-0 z-50 flex items-center justify-center">
+      <div class="absolute inset-0 bg-black/60" @click="close" />
+      <div class="relative bg-gray-800 rounded-lg border border-gray-700 w-full max-w-lg mx-4 p-6 shadow-xl">
+        <h3 class="text-lg font-semibold text-white mb-4">Import SSH Key</h3>
+
+        <div v-if="error" class="mb-4 p-3 bg-red-900/50 border border-red-700 rounded text-red-300 text-sm">
+          {{ error }}
+        </div>
+
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Key Name <span class="text-red-400">*</span></label>
+            <input v-model="form.name" type="text" placeholder="e.g. my-server-key"
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-wraith-500 focus:outline-none text-sm" />
+          </div>
+
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Private Key <span class="text-red-400">*</span></label>
+            <textarea v-model="form.privateKey" rows="6" placeholder="-----BEGIN RSA PRIVATE KEY-----..."
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-wraith-500 focus:outline-none text-sm font-mono resize-none" />
+            <div class="mt-1 flex items-center gap-2">
+              <label class="text-xs text-gray-500 cursor-pointer hover:text-gray-300">
+                <input type="file" class="hidden" accept=".pem,.key,id_rsa,id_ed25519,id_ecdsa"
+                  @change="handleFileUpload('privateKey', $event)" />
+                Upload from file
+              </label>
+            </div>
+          </div>
+
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Public Key <span class="text-gray-600">(optional)</span></label>
+            <textarea v-model="form.publicKey" rows="2" placeholder="ssh-rsa AAAA..."
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-wraith-500 focus:outline-none text-sm font-mono resize-none" />
+            <div class="mt-1">
+              <label class="text-xs text-gray-500 cursor-pointer hover:text-gray-300">
+                <input type="file" class="hidden" accept=".pub"
+                  @change="handleFileUpload('publicKey', $event)" />
+                Upload from file
+              </label>
+            </div>
+          </div>
+
+          <div>
+            <label class="block text-sm text-gray-400 mb-1">Passphrase <span class="text-gray-600">(optional)</span></label>
+            <input v-model="form.passphrase" type="password" placeholder="Leave blank if unencrypted"
+              class="w-full bg-gray-900 text-white px-3 py-2 rounded border border-gray-600 focus:border-wraith-500 focus:outline-none text-sm" />
+          </div>
+        </div>
+
+        <div class="flex justify-end gap-3 mt-6">
+          <button @click="close" class="px-4 py-2 text-sm text-gray-400 hover:text-white rounded border border-gray-600 hover:border-gray-400">
+            Cancel
+          </button>
+          <button @click="handleSubmit" :disabled="saving"
+            class="px-4 py-2 text-sm bg-wraith-600 hover:bg-wraith-700 text-white rounded disabled:opacity-50">
+            {{ saving ? 'Importing...' : 'Import Key' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
diff --git a/frontend/composables/useVault.ts b/frontend/composables/useVault.ts
new file mode 100644
index 0000000..f962d6d
--- /dev/null
+++ b/frontend/composables/useVault.ts
@@ -0,0 +1,36 @@
+import { useAuthStore } from '~/stores/auth.store'
+
+export function useVault() {
+  const auth = useAuthStore()
+  const headers = () => ({ Authorization: `Bearer ${auth.token}` })
+
+  // SSH Keys
+  async function listKeys() {
+    return $fetch('/api/ssh-keys', { headers: headers() })
+  }
+  async function importKey(data: { name: string; privateKey: string; passphrase?: string; publicKey?: string }) {
+    return $fetch('/api/ssh-keys', { method: 'POST', body: data, headers: headers() })
+  }
+  async function deleteKey(id: number) {
+    return $fetch(`/api/ssh-keys/${id}`, { method: 'DELETE', headers: headers() })
+  }
+
+  // Credentials
+  async function listCredentials() {
+    return $fetch('/api/credentials', { headers: headers() })
+  }
+  async function createCredential(data: any) {
+    return $fetch('/api/credentials', { method: 'POST', body: data, headers: headers() })
+  }
+  async function updateCredential(id: number, data: any) {
+    return $fetch(`/api/credentials/${id}`, { method: 'PUT', body: data, headers: headers() })
+  }
+  async function deleteCredential(id: number) {
+    return $fetch(`/api/credentials/${id}`, { method: 'DELETE', headers: headers() })
+  }
+
+  return {
+    listKeys, importKey, deleteKey,
+    listCredentials, createCredential, updateCredential, deleteCredential,
+  }
+}
diff --git a/frontend/pages/vault/credentials.vue b/frontend/pages/vault/credentials.vue
new file mode 100644
index 0000000..a5f2411
--- /dev/null
+++ b/frontend/pages/vault/credentials.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+const vault = useVault()
+
+const credentials = ref<any[]>([])
+const sshKeys = ref<any[]>([])
+const loading = ref(true)
+const showForm = ref(false)
+const editingCred = ref<any>(null)
+const deletingId = ref<number | null>(null)
+
+async function load() {
+  loading.value = true
+  try {
+    const [creds, keys] = await Promise.all([
+      vault.listCredentials() as Promise<any[]>,
+      vault.listKeys() as Promise<any[]>,
+    ])
+    credentials.value = creds
+    sshKeys.value = keys
+  } finally {
+    loading.value = false
+  }
+}
+
+function openCreate() {
+  editingCred.value = null
+  showForm.value = true
+}
+
+function openEdit(cred: any) {
+  editingCred.value = cred
+  showForm.value = true
+}
+
+async function confirmDelete(cred: any) {
+  if (!confirm(`Delete credential "${cred.name}"?`)) return
+  deletingId.value = cred.id
+  try {
+    await vault.deleteCredential(cred.id)
+    await load()
+  } finally {
+    deletingId.value = null
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto p-6">
+    <div class="flex items-center justify-between mb-6">
+      <div class="flex items-center gap-3">
+        <NuxtLink to="/vault" class="text-gray-500 hover:text-gray-300 text-sm">Vault</NuxtLink>
+        <span class="text-gray-700">/</span>
+        <h2 class="text-xl font-bold text-white">Credentials</h2>
+      </div>
+      <button @click="openCreate"
+        class="px-3 py-1.5 bg-wraith-600 hover:bg-wraith-700 text-white text-sm rounded">
+        New Credential
+      </button>
+    </div>
+
+    <div v-if="loading" class="text-gray-500 text-sm">Loading...</div>
+
+    <div v-else-if="credentials.length === 0" class="text-center py-12 text-gray-600">
+      <p>No credentials yet.</p>
+      <button @click="openCreate" class="mt-3 text-wraith-400 hover:text-wraith-300 text-sm">
+        Create your first credential
+      </button>
+    </div>
+
+    <div v-else class="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden">
+      <table class="w-full text-sm">
+        <thead>
+          <tr class="border-b border-gray-700 text-gray-400">
+            <th class="text-left px-4 py-3 font-medium">Name</th>
+            <th class="text-left px-4 py-3 font-medium">Username</th>
+            <th class="text-left px-4 py-3 font-medium">Type</th>
+            <th class="text-left px-4 py-3 font-medium">Associated Hosts</th>
+            <th class="px-4 py-3"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="cred in credentials" :key="cred.id"
+            class="border-b border-gray-700/50 hover:bg-gray-700/30">
+            <td class="px-4 py-3 text-white font-medium">{{ cred.name }}</td>
+            <td class="px-4 py-3 text-gray-300">{{ cred.username || '—' }}</td>
+            <td class="px-4 py-3">
+              <span :class="[
+                'px-2 py-0.5 rounded text-xs font-medium',
+                cred.type === 'password' ? 'bg-blue-900/50 text-blue-300' : 'bg-purple-900/50 text-purple-300'
+              ]">
+                {{ cred.type === 'ssh_key' ? 'SSH Key' : 'Password' }}
+              </span>
+            </td>
+            <td class="px-4 py-3 text-gray-400 text-xs">
+              {{ cred.hosts?.length ? cred.hosts.map((h: any) => h.name).join(', ') : '—' }}
+            </td>
+            <td class="px-4 py-3 text-right flex items-center justify-end gap-3">
+              <button @click="openEdit(cred)" class="text-xs text-gray-400 hover:text-white">Edit</button>
+              <button @click="confirmDelete(cred)"
+                :disabled="deletingId === cred.id"
+                class="text-xs text-red-400 hover:text-red-300 disabled:opacity-50">
+                {{ deletingId === cred.id ? 'Deleting...' : 'Delete' }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <CredentialForm
+      v-model:visible="showForm"
+      :credential="editingCred"
+      :ssh-keys="sshKeys"
+      @saved="load"
+    />
+  </div>
+</template>
diff --git a/frontend/pages/vault/index.vue b/frontend/pages/vault/index.vue
new file mode 100644
index 0000000..5cbc9ac
--- /dev/null
+++ b/frontend/pages/vault/index.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+const vault = useVault()
+
+const keyCount = ref(0)
+const credCount = ref(0)
+const loading = ref(true)
+
+onMounted(async () => {
+  try {
+    const [keys, creds] = await Promise.all([
+      vault.listKeys() as Promise<any[]>,
+      vault.listCredentials() as Promise<any[]>,
+    ])
+    keyCount.value = keys.length
+    credCount.value = creds.length
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<template>
+  <div class="max-w-3xl mx-auto p-6">
+    <h2 class="text-xl font-bold text-white mb-6">Vault</h2>
+
+    <div v-if="loading" class="text-gray-500 text-sm">Loading...</div>
+
+    <div v-else class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+      <NuxtLink to="/vault/keys"
+        class="block p-5 bg-gray-800 rounded-lg border border-gray-700 hover:border-wraith-500 transition-colors">
+        <div class="flex items-center gap-3 mb-2">
+          <svg class="w-6 h-6 text-wraith-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+          </svg>
+          <h3 class="text-lg font-semibold text-white">SSH Keys</h3>
+        </div>
+        <p class="text-3xl font-bold text-wraith-400">{{ keyCount }}</p>
+        <p class="text-sm text-gray-400 mt-1">{{ keyCount === 1 ? 'key' : 'keys' }} stored</p>
+        <p class="text-xs text-gray-500 mt-3">Manage and import SSH private keys</p>
+      </NuxtLink>
+
+      <NuxtLink to="/vault/credentials"
+        class="block p-5 bg-gray-800 rounded-lg border border-gray-700 hover:border-wraith-500 transition-colors">
+        <div class="flex items-center gap-3 mb-2">
+          <svg class="w-6 h-6 text-wraith-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+          </svg>
+          <h3 class="text-lg font-semibold text-white">Credentials</h3>
+        </div>
+        <p class="text-3xl font-bold text-wraith-400">{{ credCount }}</p>
+        <p class="text-sm text-gray-400 mt-1">{{ credCount === 1 ? 'credential' : 'credentials' }} stored</p>
+        <p class="text-xs text-gray-500 mt-3">Manage passwords and SSH key credentials</p>
+      </NuxtLink>
+    </div>
+
+    <div class="mt-8 p-4 bg-gray-800/50 rounded border border-gray-700">
+      <p class="text-xs text-gray-500">
+        All secrets are encrypted at rest using AES-256-GCM. Private keys and passwords are never exposed via the API.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/frontend/pages/vault/keys.vue b/frontend/pages/vault/keys.vue
new file mode 100644
index 0000000..3574202
--- /dev/null
+++ b/frontend/pages/vault/keys.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+const vault = useVault()
+
+const keys = ref<any[]>([])
+const loading = ref(true)
+const showImport = ref(false)
+const deletingId = ref<number | null>(null)
+
+async function load() {
+  loading.value = true
+  try {
+    keys.value = (await vault.listKeys()) as any[]
+  } finally {
+    loading.value = false
+  }
+}
+
+async function confirmDelete(key: any) {
+  if (!confirm(`Delete SSH key "${key.name}"? This cannot be undone.`)) return
+  deletingId.value = key.id
+  try {
+    await vault.deleteKey(key.id)
+    await load()
+  } finally {
+    deletingId.value = null
+  }
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto p-6">
+    <div class="flex items-center justify-between mb-6">
+      <div class="flex items-center gap-3">
+        <NuxtLink to="/vault" class="text-gray-500 hover:text-gray-300 text-sm">Vault</NuxtLink>
+        <span class="text-gray-700">/</span>
+        <h2 class="text-xl font-bold text-white">SSH Keys</h2>
+      </div>
+      <button @click="showImport = true"
+        class="px-3 py-1.5 bg-wraith-600 hover:bg-wraith-700 text-white text-sm rounded">
+        Import Key
+      </button>
+    </div>
+
+    <div v-if="loading" class="text-gray-500 text-sm">Loading...</div>
+
+    <div v-else-if="keys.length === 0" class="text-center py-12 text-gray-600">
+      <p>No SSH keys yet.</p>
+      <button @click="showImport = true" class="mt-3 text-wraith-400 hover:text-wraith-300 text-sm">
+        Import your first key
+      </button>
+    </div>
+
+    <div v-else class="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden">
+      <table class="w-full text-sm">
+        <thead>
+          <tr class="border-b border-gray-700 text-gray-400">
+            <th class="text-left px-4 py-3 font-medium">Name</th>
+            <th class="text-left px-4 py-3 font-medium">Type</th>
+            <th class="text-left px-4 py-3 font-medium">Fingerprint</th>
+            <th class="text-left px-4 py-3 font-medium">Created</th>
+            <th class="px-4 py-3"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="key in keys" :key="key.id"
+            class="border-b border-gray-700/50 hover:bg-gray-700/30">
+            <td class="px-4 py-3 text-white font-medium">{{ key.name }}</td>
+            <td class="px-4 py-3">
+              <span class="px-2 py-0.5 bg-gray-700 text-gray-300 rounded text-xs font-mono">
+                {{ key.keyType || 'rsa' }}
+              </span>
+            </td>
+            <td class="px-4 py-3 text-gray-400 font-mono text-xs">
+              {{ key.fingerprint || '—' }}
+            </td>
+            <td class="px-4 py-3 text-gray-400">{{ formatDate(key.createdAt) }}</td>
+            <td class="px-4 py-3 text-right">
+              <button @click="confirmDelete(key)"
+                :disabled="deletingId === key.id"
+                class="text-xs text-red-400 hover:text-red-300 disabled:opacity-50">
+                {{ deletingId === key.id ? 'Deleting...' : 'Delete' }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <KeyImportDialog v-model:visible="showImport" @imported="load" />
+  </div>
+</template>