From 942c2332fa216adea04aff8dbe9d470dd6f5d8bf Mon Sep 17 00:00:00 2001
From: Corey Stedman <cordesir@gmail.com>
Date: Sun, 22 Mar 2026 15:26:56 -0400
Subject: [PATCH] Added a generate tab to the cryptography page

---
 public/assets/icons/crypto/bcd.svg            |   1 +
 public/assets/icons/crypto/bcn.svg            |   1 +
 public/assets/icons/crypto/bdx.svg            |  58 ++
 public/assets/icons/crypto/beam.svg           |  11 +
 .../modals/cryptography/details.pgp.vue       | 357 ++++++++++
 .../pageTabs/cryptography/PGPGenerateTool.vue | 657 ++++++++++++++++++
 .../pageTabs/cryptography/PGPKeyTool.vue      |  30 +
 src/views/Cryptography.vue                    |  14 +-
 8 files changed, 1128 insertions(+), 1 deletion(-)
 create mode 100644 public/assets/icons/crypto/bcd.svg
 create mode 100644 public/assets/icons/crypto/bcn.svg
 create mode 100644 public/assets/icons/crypto/bdx.svg
 create mode 100644 public/assets/icons/crypto/beam.svg
 create mode 100644 src/components/modals/cryptography/details.pgp.vue
 create mode 100644 src/components/pageTabs/cryptography/PGPGenerateTool.vue

diff --git a/public/assets/icons/crypto/bcd.svg b/public/assets/icons/crypto/bcd.svg
new file mode 100644
index 00000000..204a1738
--- /dev/null
+++ b/public/assets/icons/crypto/bcd.svg
@@ -0,0 +1 @@
+<svg height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="none"><circle cx="16" cy="16" fill="#fcc339" r="16"/><path d="M22.585 9.694l.077.171-3.054 1.402 1.374 4.55 4.521-2.283.06.119.018-.022-2.929-3.906zm-.165-.077l-2.773-1.29h-7.171l-2.962 1.36 3.08 1.296h6.85zm-13.154.32l-2.773 3.601 4.514 2.28 1.38-4.568zm3.44 1.373l-1.425 4.72 4.713 8.332 4.714-8.332-1.426-4.72zm12.512 2.733L21 16.174l-4.205 7.433zm-10.047 9.524l-4.182-7.393-4.196-2.119zm-8.74-9.924l.033-.067-.043.056zm2.791-4.181L12.405 8h7.312l3.144 1.462L26 13.648 16 25 6 13.646zm9.201 5.372c.059.607-.192.972-.594 1.179.661.16 1.075.558.993 1.45-.1 1.106-.915 1.402-2.079 1.47v1.163h-.692v-1.147c-.18 0-.363-.002-.553-.006v1.153h-.691V18.93c-.162-.001-.327-.004-.495-.004h-.9l.137-.837s.512.008.503 0c.196 0 .248-.143.26-.232V16.02h.074a.55.55 0 00-.074-.005v-1.311c-.026-.143-.117-.307-.398-.308.009-.01-.502 0-.502 0v-.748h.954v.004c.144 0 .29-.003.44-.006v-1.151h.693v1.129c.184-.004.37-.008.552-.008v-1.12l.692-.001v1.151c.894.08 1.601.358 1.68 1.188zm-.968 2.49c0-.908-1.471-.771-1.94-.771v1.543c.469 0 1.94.098 1.94-.772zm-.322-2.177c0-.826-1.228-.7-1.618-.7v1.4c.39 0 1.618.092 1.618-.7z" fill="#fff"/></g></svg>
\ No newline at end of file
diff --git a/public/assets/icons/crypto/bcn.svg b/public/assets/icons/crypto/bcn.svg
new file mode 100644
index 00000000..f12495c9
--- /dev/null
+++ b/public/assets/icons/crypto/bcn.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g fill="none"><circle cx="15.999" cy="15.999" r="15.999" fill="#F04086"/><path fill="#FFF" d="M23.437 16.754c-.63-.696-1.536-1.128-2.72-1.296v-.025c1.037-.168 1.852-.593 2.406-1.273a3.717 3.717 0 00.862-2.404c0-1.461-.47-2.454-1.444-3.235-.974-.78-2.436-1.037-4.417-1.037h-7.481v6.963H6.347v2.667h11.727c.923 0 1.616.065 2.074.434.458.369.692.846.692 1.551s-.231 1.307-.692 1.685c-.46.377-1.154.626-2.074.626H14.05v-2.074h-3.407v4.741h7.727c1.965 0 3.467-.513 4.509-1.31 1.041-.797 1.53-1.974 1.53-3.419a3.81 3.81 0 00-.972-2.594zm-5.793-2.314H14.05v-4.296h3.594c1.848 0 2.77.721 2.77 2.148s-.922 2.148-2.77 2.148z"/></g></svg>
\ No newline at end of file
diff --git a/public/assets/icons/crypto/bdx.svg b/public/assets/icons/crypto/bdx.svg
new file mode 100644
index 00000000..8ed82ad4
--- /dev/null
+++ b/public/assets/icons/crypto/bdx.svg
@@ -0,0 +1,58 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.06458 16.5208V16.7812L6.07357 16.2927C6.06458 16.3681 6.06458 16.44 6.06458 16.5208Z" fill="#0A0A0A"/>
+<path d="M24.7331 11.1469L24.7421 11.6361V20.3539C24.7421 21.5518 23.7709 22.5231 22.5731 22.5231H19.566V19.6381H20.6523C21.2908 19.6381 21.8088 19.1237 21.8106 18.4852V13.2458C21.8106 12.6073 21.2944 12.0893 20.6559 12.0875C20.6559 12.0875 20.6541 12.0875 20.6523 12.0875H15.3143C14.6759 12.0875 14.1579 12.6037 14.1561 13.2422C14.1561 13.2422 14.1561 13.244 14.1561 13.2458V18.4852C14.1561 19.1237 14.6759 19.6399 15.3125 19.6381H16.647V22.5231H13.4025C12.2047 22.5231 11.2335 21.5536 11.2335 20.3557V11.3753C11.2335 10.1774 12.2029 9.20617 13.4007 9.20617H21.4365L24.7583 4.33194L24.7313 11.1469H24.7331Z" fill="#1574AD"/>
+<path d="M20.6649 19.6381H14.8143V22.5231H20.1145C21.0552 22.5231 21.8177 21.7605 21.8177 20.8198V18.4852C21.8177 19.1219 21.3016 19.6381 20.6631 19.6381H20.6649Z" fill="url(#paint0_linear_2102_95)"/>
+<path d="M17.4042 14.3502H14.1579V17.2351H15.4924C16.1309 17.2351 16.6489 17.7495 16.6507 18.3881V23.6238C16.6507 24.2623 16.1345 24.7803 15.496 24.7821C15.496 24.7821 15.4942 24.7821 15.4924 24.7821H10.1436C9.50517 24.7821 8.98719 24.2659 8.9854 23.6274C8.9854 23.6274 8.9854 23.6256 8.9854 23.6238V18.3881C8.9854 17.7495 9.50517 17.2333 10.1418 17.2351H11.2299V14.3502H9.37028L6.04663 9.47595L6.07001 16.2909L6.06282 16.7801V25.498C6.06282 26.6958 7.03222 27.6671 8.23002 27.6671H17.406C18.6038 27.6671 19.575 26.6958 19.575 25.498V16.5193C19.575 15.3196 18.6002 14.3484 17.4024 14.3502H17.4042Z" fill="#3EC745"/>
+<path d="M8.9854 23.6238V20.7011H6.07721V22.5321C6.07721 23.7731 7.08258 24.7803 8.32355 24.7821H10.1436C9.50517 24.7821 8.9872 24.2641 8.9854 23.6238Z" fill="url(#paint1_linear_2102_95)"/>
+<path d="M19.5732 25.4998V20.7029H16.6488V23.399C16.6488 23.399 17.0193 27.6653 14.237 27.6653H17.406C18.6002 27.6653 19.5714 26.6994 19.5714 25.5034V25.4998H19.5732Z" fill="url(#paint2_linear_2102_95)"/>
+<path d="M15.3107 14.3502H10.1436V17.2351H15.3107V14.3502Z" fill="url(#paint3_linear_2102_95)"/>
+<path d="M14.1597 14.3502H11.2353V17.2351H14.1597V14.3502Z" fill="#1574AD"/>
+<path d="M14.1579 18.4798V13.3214H11.2353V17.6506C11.2353 18.7478 12.1256 19.6381 13.2226 19.6399H15.3161C14.6776 19.6399 14.1597 19.1237 14.1579 18.4852C14.1579 18.4852 14.1579 18.4834 14.1579 18.4816V18.4798Z" fill="url(#paint4_linear_2102_95)"/>
+<path d="M16.0013 31.9999C7.16527 31.9999 0.00179851 24.8397 0 16.0031C0 11.7584 1.6852 7.68635 4.68692 4.68627C10.9349 -1.56209 21.066 -1.56209 27.314 4.68627C33.562 10.9346 33.562 21.0662 27.314 27.3146C24.3213 30.3254 20.2458 32.0125 16.0013 31.9999ZM16.0013 1.10345C7.78755 1.10345 1.10429 7.78527 1.10429 16.0013C1.10429 24.2174 7.78575 30.8992 16.0013 30.8992C24.2169 30.8992 30.8984 24.2174 30.8984 16.0013C30.8984 7.78527 24.2151 1.10345 16.0013 1.10345Z" fill="#34AF3A"/>
+<defs>
+<linearGradient id="paint0_linear_2102_95" x1="21.8177" y1="20.505" x2="14.8143" y2="20.505" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.3"/>
+<stop offset="1" stop-color="#1574AD"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2102_95" x1="8.10953" y1="24.7821" x2="8.10953" y2="20.7011" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.3"/>
+<stop offset="0.07" stop-color="#071808" stop-opacity="0.35"/>
+<stop offset="0.25" stop-color="#184D1B" stop-opacity="0.47"/>
+<stop offset="0.42" stop-color="#26792A" stop-opacity="0.59"/>
+<stop offset="0.58" stop-color="#309B36" stop-opacity="0.71"/>
+<stop offset="0.74" stop-color="#38B33E" stop-opacity="0.82"/>
+<stop offset="0.88" stop-color="#3CC243" stop-opacity="0.92"/>
+<stop offset="1" stop-color="#3EC745"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2102_95" x1="16.906" y1="27.6635" x2="16.906" y2="20.7011" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.3"/>
+<stop offset="0.23" stop-color="#123914" stop-opacity="0.46"/>
+<stop offset="0.49" stop-color="#257529" stop-opacity="0.65"/>
+<stop offset="0.72" stop-color="#32A238" stop-opacity="0.8"/>
+<stop offset="0.9" stop-color="#3BBD41" stop-opacity="0.93"/>
+<stop offset="1" stop-color="#3EC745"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2102_95" x1="15.3107" y1="15.7927" x2="10.1436" y2="15.7927" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3EC745"/>
+<stop offset="0.06" stop-color="#3AB940" stop-opacity="0.92"/>
+<stop offset="0.16" stop-color="#2F9534" stop-opacity="0.78"/>
+<stop offset="0.3" stop-color="#1C5B20" stop-opacity="0.58"/>
+<stop offset="0.48" stop-color="#040B04" stop-opacity="0.33"/>
+<stop offset="0.5" stop-opacity="0.3"/>
+<stop offset="0.61" stop-color="#123914" stop-opacity="0.46"/>
+<stop offset="0.75" stop-color="#257529" stop-opacity="0.65"/>
+<stop offset="0.86" stop-color="#32A238" stop-opacity="0.8"/>
+<stop offset="0.95" stop-color="#3BBD41" stop-opacity="0.93"/>
+<stop offset="1" stop-color="#3EC745"/>
+</linearGradient>
+<linearGradient id="paint4_linear_2102_95" x1="13.2766" y1="19.6381" x2="13.2766" y2="13.3214" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0.3"/>
+<stop offset="0.18" stop-color="#062233" stop-opacity="0.43"/>
+<stop offset="0.37" stop-color="#0B3F5F" stop-opacity="0.56"/>
+<stop offset="0.55" stop-color="#105681" stop-opacity="0.68"/>
+<stop offset="0.72" stop-color="#136799" stop-opacity="0.8"/>
+<stop offset="0.87" stop-color="#1471A8" stop-opacity="0.91"/>
+<stop offset="1" stop-color="#1574AD"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/assets/icons/crypto/beam.svg b/public/assets/icons/crypto/beam.svg
new file mode 100644
index 00000000..9e505ff4
--- /dev/null
+++ b/public/assets/icons/crypto/beam.svg
@@ -0,0 +1,11 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3478_5307" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="60" height="60">
+<circle cx="31.9993" cy="32" r="29.3333" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_3478_5307)">
+<rect x="2.66602" y="2.66663" width="58.6667" height="14.6667" fill="#4066C9"/>
+<rect x="2.66602" y="17.3334" width="58.6667" height="14.6667" fill="#EC450D"/>
+<rect x="2.66602" y="46.6666" width="58.6667" height="14.6667" fill="#10A35D"/>
+<rect x="2.66602" y="32" width="58.6667" height="14.6667" fill="#FFA50A"/>
+</g>
+</svg>
diff --git a/src/components/modals/cryptography/details.pgp.vue b/src/components/modals/cryptography/details.pgp.vue
new file mode 100644
index 00000000..b32e5484
--- /dev/null
+++ b/src/components/modals/cryptography/details.pgp.vue
@@ -0,0 +1,357 @@
+<!--
+  PGP public key details — parsed from armored public key (OpenPGP.js).
+-->
+<template>
+  <DialogRoot :open="open" @update:open="onOpenChange">
+    <DialogPortal>
+      <DialogOverlay class="pgp-details-overlay" />
+      <DialogContent class="pgp-details-modal" aria-describedby="pgp-details-desc">
+        <div class="pgp-details-modal__header">
+          <DialogTitle class="pgp-details-modal__title">Public key details</DialogTitle>
+          <p id="pgp-details-desc" class="pgp-details-modal__subtitle">
+            Information parsed from your armored public key block
+          </p>
+          <DialogClose class="pgp-details-modal__close" aria-label="Close">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M18 6 6 18M6 6l12 12" />
+            </svg>
+          </DialogClose>
+        </div>
+
+        <div class="pgp-details-modal__body">
+          <div v-if="loading" class="pgp-details-modal__loading">Loading…</div>
+
+          <div v-else-if="parseError" class="pgp-details-modal__error" role="alert">
+            {{ parseError }}
+          </div>
+
+          <dl v-else class="pgp-details-dl">
+            <div class="pgp-details-dl__row">
+              <dt>User ID(s) / author</dt>
+              <dd>
+                <ul v-if="userIdLines.length" class="pgp-details-ul">
+                  <li v-for="(uid, i) in userIdLines" :key="i">{{ uid }}</li>
+                </ul>
+                <span v-else class="pgp-details-muted">—</span>
+              </dd>
+            </div>
+
+            <div class="pgp-details-dl__row">
+              <dt>Created</dt>
+              <dd>{{ creationLabel }}</dd>
+            </div>
+
+            <div class="pgp-details-dl__row">
+              <dt>Primary key algorithm</dt>
+              <dd>{{ algorithmLabel }}</dd>
+            </div>
+
+            <div class="pgp-details-dl__row">
+              <dt>Key ID</dt>
+              <dd><code class="pgp-details-code">{{ keyIdHex }}</code></dd>
+            </div>
+
+            <div class="pgp-details-dl__row">
+              <dt>Fingerprint</dt>
+              <dd><code class="pgp-details-code">{{ fingerprintFormatted }}</code></dd>
+            </div>
+
+            <div class="pgp-details-dl__row">
+              <dt>Key expiration</dt>
+              <dd>{{ expirationLabel }}</dd>
+            </div>
+
+            <div v-if="subkeySummary" class="pgp-details-dl__row">
+              <dt>Subkeys</dt>
+              <dd class="pgp-details-subkeys">{{ subkeySummary }}</dd>
+            </div>
+          </dl>
+        </div>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import * as openpgp from 'openpgp'
+import {
+  DialogRoot,
+  DialogPortal,
+  DialogOverlay,
+  DialogContent,
+  DialogTitle,
+  DialogClose,
+} from 'radix-vue'
+
+defineOptions({ name: 'DetailsPgpModal' })
+
+const props = defineProps<{
+  open: boolean
+  /** Armored ASCII public key block */
+  armoredPublicKey: string
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+}>()
+
+const loading = ref(false)
+const parseError = ref('')
+
+const userIdLines = ref<string[]>([])
+const creationLabel = ref('—')
+const algorithmLabel = ref('—')
+const keyIdHex = ref('—')
+const fingerprintFormatted = ref('—')
+const expirationLabel = ref('—')
+const subkeySummary = ref('')
+
+function cleanArmoredKey(key: string): string {
+  let cleaned = key.trim().replace(/^"|"$/g, '')
+  cleaned = cleaned.replace(/\\n/g, '\n')
+  return cleaned
+}
+
+function formatFingerprintHex(hex: string): string {
+  return hex.toUpperCase().replace(/(.{2})(?!$)/g, '$1 ')
+}
+
+function onOpenChange(value: boolean) {
+  emit('update:open', value)
+}
+
+async function loadKeyDetails() {
+  parseError.value = ''
+  userIdLines.value = []
+  creationLabel.value = '—'
+  algorithmLabel.value = '—'
+  keyIdHex.value = '—'
+  fingerprintFormatted.value = '—'
+  expirationLabel.value = '—'
+  subkeySummary.value = ''
+
+  const raw = props.armoredPublicKey?.trim()
+  if (!raw) {
+    parseError.value = 'No public key to read.'
+    return
+  }
+
+  loading.value = true
+  try {
+    const key = await openpgp.readKey({ armoredKey: cleanArmoredKey(raw) })
+
+    const uids = key.getUserIDs()
+    userIdLines.value = uids.length ? uids : []
+
+    const created = key.getCreationTime()
+    creationLabel.value = created ? created.toLocaleString() : '—'
+
+    const algo = key.getAlgorithmInfo()
+    const algoName = String(algo.algorithm ?? 'unknown')
+    const bits = algo.bits != null ? `${algo.bits} bits` : ''
+    const curve = algo.curve != null ? ` (${algo.curve})` : ''
+    algorithmLabel.value = [algoName, bits, curve].filter(Boolean).join(' ').trim() || '—'
+
+    keyIdHex.value = key.getKeyID().toHex().toUpperCase()
+
+    const fp = key.getFingerprint()
+    fingerprintFormatted.value = formatFingerprintHex(fp)
+
+    const exp = await key.getExpirationTime()
+    if (exp === Infinity) {
+      expirationLabel.value = 'No expiration'
+    } else if (exp instanceof Date) {
+      expirationLabel.value = exp.toLocaleString()
+    } else {
+      expirationLabel.value = '—'
+    }
+
+    const subkeys = key.getSubkeys()
+    if (subkeys.length) {
+      const parts = subkeys.map((sk, i) => {
+        const info = sk.getAlgorithmInfo()
+        const b = info.bits != null ? `${info.bits} bit` : ''
+        const c = info.curve != null ? String(info.curve) : ''
+        return `Subkey ${i + 1}: ${info.algorithm}${b ? ` ${b}` : ''}${c ? ` (${c})` : ''}`
+      })
+      subkeySummary.value = parts.join('\n')
+    }
+  } catch (e: unknown) {
+    parseError.value = e instanceof Error ? e.message : 'Could not parse public key'
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(
+  () => [props.open, props.armoredPublicKey] as const,
+  ([isOpen]) => {
+    if (isOpen) {
+      loadKeyDetails()
+    }
+  }
+)
+</script>
+
+<style lang="scss">
+.pgp-details-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 10060;
+  animation: pgp-details-fade 0.15s ease;
+}
+
+@keyframes pgp-details-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.pgp-details-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10061;
+  width: min(92vw, 32rem);
+  max-height: 85vh;
+  background: #fff;
+  border-radius: 0.75rem;
+  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: pgp-details-pop 0.18s ease;
+}
+
+@keyframes pgp-details-pop {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.pgp-details-modal__header {
+  position: relative;
+  padding: 1.25rem 3rem 1rem 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.pgp-details-modal__title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: #111827;
+  margin: 0;
+}
+
+.pgp-details-modal__subtitle {
+  font-size: 0.8125rem;
+  color: #6b7280;
+  margin: 0.375rem 0 0;
+  line-height: 1.4;
+}
+
+.pgp-details-modal__close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  background: #f3f4f6;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  color: #6b7280;
+  transition: background 0.12s, color 0.12s;
+}
+
+.pgp-details-modal__close svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.pgp-details-modal__close:hover {
+  background: #e5e7eb;
+  color: #111827;
+}
+
+.pgp-details-modal__body {
+  overflow-y: auto;
+  padding: 1rem 1.5rem 1.5rem;
+}
+
+.pgp-details-modal__loading,
+.pgp-details-modal__error {
+  font-size: 0.875rem;
+  padding: 0.5rem 0;
+}
+
+.pgp-details-modal__error {
+  color: #991b1b;
+}
+
+.pgp-details-dl {
+  margin: 0;
+}
+
+.pgp-details-dl__row {
+  display: grid;
+  grid-template-columns: 8.5rem 1fr;
+  gap: 0.75rem 1rem;
+  padding: 0.625rem 0;
+  border-bottom: 1px solid #f3f4f6;
+  font-size: 0.875rem;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  dt {
+    margin: 0;
+    font-weight: 600;
+    color: #6b7280;
+  }
+
+  dd {
+    margin: 0;
+    color: #111827;
+    min-width: 0;
+  }
+}
+
+.pgp-details-ul {
+  margin: 0;
+  padding-left: 1.125rem;
+  line-height: 1.45;
+}
+
+.pgp-details-muted {
+  color: #9ca3af;
+}
+
+.pgp-details-code {
+  display: inline-block;
+  font-size: 0.75rem;
+  word-break: break-all;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  line-height: 1.45;
+}
+
+.pgp-details-subkeys {
+  white-space: pre-wrap;
+  font-size: 0.8125rem;
+  line-height: 1.45;
+}
+</style>
diff --git a/src/components/pageTabs/cryptography/PGPGenerateTool.vue b/src/components/pageTabs/cryptography/PGPGenerateTool.vue
new file mode 100644
index 00000000..6238737c
--- /dev/null
+++ b/src/components/pageTabs/cryptography/PGPGenerateTool.vue
@@ -0,0 +1,657 @@
+<template>
+  <div class="pgp-gen">
+    <header class="pgp-gen__header">
+      <h2 class="pgp-gen__title">Generate PGP / GPG key pair</h2>
+      <p class="pgp-gen__lead">
+        Create a new OpenPGP key pair for your identity. Keys are generated locally in your browser.
+      </p>
+    </header>
+
+    <div class="pgp-gen__panel">
+      <div class="pgp-gen__grid">
+        <div class="pgp-gen__field">
+          <Label for="pgp-gen-name" class="pgp-gen__label">Full name</Label>
+          <input
+            id="pgp-gen-name"
+            v-model="displayName"
+            type="text"
+            class="pgp-gen__input"
+            placeholder="Ada Lovelace"
+            autocomplete="name"
+            spellcheck="false"
+          />
+        </div>
+        <div class="pgp-gen__field">
+          <Label for="pgp-gen-email" class="pgp-gen__label">Email</Label>
+          <input
+            id="pgp-gen-email"
+            v-model="email"
+            type="email"
+            class="pgp-gen__input"
+            placeholder="ada@example.com"
+            autocomplete="email"
+            spellcheck="false"
+          />
+        </div>
+      </div>
+
+      <div class="pgp-gen__field">
+        <Label for="pgp-gen-key-type" class="pgp-gen__label">Key type</Label>
+        <SelectRoot v-model="keyType">
+          <SelectTrigger id="pgp-gen-key-type" class="pgp-gen__select-trigger" aria-label="Key type">
+            <SelectValue placeholder="Key type" />
+            <SelectIcon class="pgp-gen__select-chevron" aria-hidden="true">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            </SelectIcon>
+          </SelectTrigger>
+          <SelectPortal>
+            <SelectContent class="pgp-gen__select-content" position="popper" :side-offset="4">
+              <SelectViewport class="pgp-gen__select-viewport">
+                <SelectItem value="rsa4096" class="pgp-gen__select-item">
+                  <SelectItemText>RSA 4096-bit (wide compatibility)</SelectItemText>
+                </SelectItem>
+                <SelectItem value="curve25519" class="pgp-gen__select-item">
+                  <SelectItemText>Curve25519 / Ed25519 (modern, smaller keys)</SelectItemText>
+                </SelectItem>
+              </SelectViewport>
+            </SelectContent>
+          </SelectPortal>
+        </SelectRoot>
+      </div>
+
+      <div class="pgp-gen__field">
+        <Label for="pgp-gen-passphrase" class="pgp-gen__label">
+          Passphrase <span class="pgp-gen__optional">(optional)</span>
+        </Label>
+        <input
+          id="pgp-gen-passphrase"
+          v-model="passphrase"
+          type="password"
+          class="pgp-gen__input"
+          placeholder="Protects your private key — leave empty for unencrypted export"
+          autocomplete="new-password"
+        />
+        <p class="pgp-gen__hint">
+          If set, the private key is encrypted; you’ll need this passphrase to import or use it.
+        </p>
+      </div>
+
+      <Separator class="pgp-gen__separator" />
+
+      <button
+        type="button"
+        class="pgp-gen__btn"
+        :disabled="!canGenerate || isGenerating"
+        @click="generateKeys"
+      >
+        <span v-if="isGenerating" class="pgp-gen__btn-inner">
+          <span class="pgp-gen__spinner" aria-hidden="true" />
+          Generating…
+        </span>
+        <span v-else>Generate key pair</span>
+      </button>
+    </div>
+
+    <div v-if="error" class="pgp-gen__error" role="alert">
+      {{ error }}
+    </div>
+
+    <div v-if="publicKeyArmored" class="pgp-gen__results">
+      <h3 class="pgp-gen__results-title">Generated keys</h3>
+      <p class="pgp-gen__results-meta">
+        Fingerprint: <code class="pgp-gen__fp">{{ fingerprintFormatted }}</code>
+        <button type="button" class="pgp-gen__mini-btn" @click="copyText(fingerprintRaw)">Copy</button>
+      </p>
+
+      <div class="pgp-gen__block">
+        <div class="pgp-gen__block-head">
+          <Label class="pgp-gen__label">Public key</Label>
+          <button type="button" class="pgp-gen__mini-btn" @click="copyText(publicKeyArmored, 'public')">
+            {{ copied === 'public' ? 'Copied' : 'Copy' }}
+          </button>
+        </div>
+        <textarea :value="publicKeyArmored" class="pgp-gen__textarea" readonly rows="8" spellcheck="false" />
+      </div>
+
+      <div class="pgp-gen__block">
+        <div class="pgp-gen__block-head">
+          <Label class="pgp-gen__label">Private key</Label>
+          <button type="button" class="pgp-gen__mini-btn" @click="copyText(privateKeyArmored, 'private')">
+            {{ copied === 'private' ? 'Copied' : 'Copy' }}
+          </button>
+        </div>
+        <textarea :value="privateKeyArmored" class="pgp-gen__textarea" readonly rows="10" spellcheck="false" />
+      </div>
+
+      <div v-if="revocationCertificate" class="pgp-gen__block">
+        <div class="pgp-gen__block-head">
+          <Label class="pgp-gen__label">Revocation certificate</Label>
+          <button type="button" class="pgp-gen__mini-btn" @click="copyText(revocationCertificate, 'revoke')">
+            {{ copied === 'revoke' ? 'Copied' : 'Copy' }}
+          </button>
+        </div>
+        <textarea :value="revocationCertificate" class="pgp-gen__textarea" readonly rows="6" spellcheck="false" />
+      </div>
+
+      <div class="pgp-gen__download-row">
+        <button type="button" class="pgp-gen__btn pgp-gen__btn--secondary" @click="downloadBundle">
+          Download as text file
+        </button>
+      </div>
+    </div>
+
+    <div class="pgp-gen__info">
+      <h3 class="pgp-gen__info-title">Before you continue</h3>
+      <ul class="pgp-gen__info-list">
+        <li>Store your <strong>private key</strong> and passphrase securely — anyone with them can impersonate you.</li>
+        <li>Share only your <strong>public key</strong> with others for encryption and signature verification.</li>
+        <li>Keep the <strong>revocation certificate</strong> safe; publish it if this key is ever compromised.</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import * as openpgp from 'openpgp'
+import {
+  Label,
+  SelectRoot,
+  SelectTrigger,
+  SelectContent,
+  SelectPortal,
+  SelectViewport,
+  SelectItem,
+  SelectItemText,
+  SelectValue,
+  SelectIcon,
+  Separator,
+} from 'radix-vue'
+
+defineOptions({
+  name: 'PGPGenerateTool',
+})
+
+const displayName = ref('')
+const email = ref('')
+const passphrase = ref('')
+const keyType = ref('rsa4096')
+
+const publicKeyArmored = ref('')
+const privateKeyArmored = ref('')
+const revocationCertificate = ref('')
+const fingerprintRaw = ref('')
+
+const isGenerating = ref(false)
+const error = ref('')
+const copied = ref<'public' | 'private' | 'revoke' | ''>('')
+
+const fingerprintFormatted = computed(() => {
+  const fp = fingerprintRaw.value
+  if (!fp) return ''
+  return fp.toUpperCase().replace(/(.{4})(?!$)/g, '$1 ')
+})
+
+const canGenerate = computed(() => {
+  const name = displayName.value.trim()
+  const em = email.value.trim()
+  if (name.length < 1 || em.length < 3) return false
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(em)
+})
+
+async function generateKeys() {
+  if (!canGenerate.value) return
+
+  isGenerating.value = true
+  error.value = ''
+  publicKeyArmored.value = ''
+  privateKeyArmored.value = ''
+  revocationCertificate.value = ''
+  fingerprintRaw.value = ''
+  copied.value = ''
+
+  try {
+    const userIDs = [{ name: displayName.value.trim(), email: email.value.trim() }]
+    const pass = passphrase.value.trim()
+    const passOpt = pass ? { passphrase: pass } : {}
+
+    const result =
+      keyType.value === 'rsa4096'
+        ? await openpgp.generateKey({
+            userIDs,
+            format: 'armored',
+            type: 'rsa',
+            rsaBits: 4096,
+            ...passOpt,
+          })
+        : await openpgp.generateKey({
+            userIDs,
+            format: 'armored',
+            type: 'curve25519',
+            ...passOpt,
+          })
+
+    publicKeyArmored.value = result.publicKey
+    privateKeyArmored.value = result.privateKey
+    revocationCertificate.value = result.revocationCertificate
+
+    const pub = await openpgp.readKey({ armoredKey: result.publicKey })
+    const fp = await pub.getFingerprint()
+    fingerprintRaw.value = fp
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : 'Key generation failed'
+    error.value = message
+  } finally {
+    isGenerating.value = false
+  }
+}
+
+let copyTimer: ReturnType<typeof setTimeout> | null = null
+async function copyText(text: string, kind?: 'public' | 'private' | 'revoke') {
+  try {
+    await navigator.clipboard.writeText(text)
+    if (kind) {
+      copied.value = kind
+      if (copyTimer) clearTimeout(copyTimer)
+      copyTimer = setTimeout(() => {
+        copied.value = ''
+      }, 2000)
+    } else {
+      copied.value = ''
+    }
+  } catch {
+    error.value = 'Could not copy to clipboard'
+  }
+}
+
+function downloadBundle() {
+  if (!publicKeyArmored.value || !privateKeyArmored.value) return
+
+  const safe = email.value.trim().replace(/[^a-z0-9._-]+/gi, '_') || 'key'
+  const header = `----- OpenPGP key export for ${displayName.value.trim()} <${email.value.trim()}> -----\n\n`
+
+  const pubBlob = new Blob([header + publicKeyArmored.value], { type: 'text/plain' })
+  const privBlob = new Blob([header + privateKeyArmored.value], { type: 'text/plain' })
+  const revBlob = revocationCertificate.value
+    ? new Blob([header + revocationCertificate.value], { type: 'text/plain' })
+    : null
+
+  // Simple multi-download: trigger three downloads (browsers may block multiple — offer combined text file as fallback)
+  const combined = [
+    '=== PUBLIC KEY ===\n\n',
+    publicKeyArmored.value,
+    '\n\n=== PRIVATE KEY ===\n\n',
+    privateKeyArmored.value,
+    revocationCertificate.value ? `\n\n=== REVOCATION CERTIFICATE ===\n\n${revocationCertificate.value}` : '',
+    `\n\n=== FINGERPRINT ===\n${fingerprintRaw.value}\n`,
+  ].join('')
+
+  const allBlob = new Blob([combined], { type: 'text/plain' })
+  const url = URL.createObjectURL(allBlob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `openpgp-keys-${safe}.txt`
+  a.click()
+  URL.revokeObjectURL(url)
+}
+</script>
+
+<style lang="scss" scoped>
+.pgp-gen {
+  width: 100%;
+  max-width: 52rem;
+}
+
+.pgp-gen__header {
+  margin-bottom: 1.25rem;
+}
+
+.pgp-gen__title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #111827;
+  margin: 0 0 0.375rem;
+}
+
+.pgp-gen__lead {
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.pgp-gen__panel {
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  padding: 1.25rem;
+}
+
+.pgp-gen__grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+  margin-bottom: 1rem;
+
+  @media (min-width: 640px) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.pgp-gen__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+.pgp-gen__label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.pgp-gen__optional {
+  font-weight: 400;
+  color: #9ca3af;
+}
+
+.pgp-gen__input {
+  width: 100%;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  color: #111827;
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  outline: none;
+
+  &::placeholder {
+    color: #9ca3af;
+  }
+
+  &:focus {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+  }
+}
+
+.pgp-gen__hint {
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin: 0;
+  line-height: 1.4;
+}
+
+.pgp-gen__select-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: #111827;
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+
+  &:hover {
+    border-color: #9ca3af;
+  }
+
+  &[data-state='open'] {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+  }
+}
+
+.pgp-gen__select-chevron {
+  display: flex;
+  color: #6b7280;
+  flex-shrink: 0;
+  transition: transform 0.15s;
+}
+
+.pgp-gen__select-trigger[data-state='open'] .pgp-gen__select-chevron {
+  transform: rotate(180deg);
+}
+
+.pgp-gen__separator {
+  height: 1px;
+  background: #e5e7eb;
+  margin: 1rem 0;
+}
+
+.pgp-gen__btn {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.75rem;
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #fff;
+  background: #2563eb;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: background 0.15s;
+
+  &:hover:not(:disabled) {
+    background: #1d4ed8;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb;
+  }
+
+  &:disabled {
+    background: #d1d5db;
+    color: #6b7280;
+    cursor: not-allowed;
+  }
+
+  &--secondary {
+    background: #4b5563;
+
+    &:hover:not(:disabled) {
+      background: #374151;
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4b5563;
+    }
+  }
+}
+
+.pgp-gen__btn-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.pgp-gen__spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid rgba(255, 255, 255, 0.35);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: pgp-gen-spin 0.7s linear infinite;
+}
+
+@keyframes pgp-gen-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.pgp-gen__error {
+  margin-top: 1rem;
+  padding: 0.875rem 1rem;
+  font-size: 0.875rem;
+  color: #991b1b;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 0.5rem;
+}
+
+.pgp-gen__results {
+  margin-top: 1.25rem;
+  padding: 1.25rem;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+}
+
+.pgp-gen__results-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #111827;
+  margin: 0 0 0.75rem;
+}
+
+.pgp-gen__results-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: #4b5563;
+  margin: 0 0 1rem;
+}
+
+.pgp-gen__fp {
+  font-family: ui-monospace, monospace;
+  font-size: 0.75rem;
+  word-break: break-all;
+}
+
+.pgp-gen__block {
+  margin-bottom: 1rem;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+.pgp-gen__block-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.375rem;
+}
+
+.pgp-gen__textarea {
+  width: 100%;
+  padding: 0.75rem;
+  font-size: 0.75rem;
+  line-height: 1.45;
+  color: #111827;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  resize: vertical;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.pgp-gen__mini-btn {
+  flex-shrink: 0;
+  padding: 0.25rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #1d4ed8;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  border-radius: 0.25rem;
+  cursor: pointer;
+
+  &:hover {
+    background: #dbeafe;
+  }
+}
+
+.pgp-gen__download-row {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+.pgp-gen__info {
+  margin-top: 1.25rem;
+  padding: 1rem 1.25rem;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  border-radius: 0.5rem;
+}
+
+.pgp-gen__info-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #1e3a8a;
+  margin: 0 0 0.75rem;
+}
+
+.pgp-gen__info-list {
+  margin: 0;
+  padding-left: 1.125rem;
+  font-size: 0.875rem;
+  color: #1e40af;
+  line-height: 1.55;
+
+  li {
+    margin-bottom: 0.5rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.pgp-gen__select-content {
+  z-index: 10050;
+  min-width: var(--radix-select-trigger-width);
+  max-width: min(90vw, 28rem);
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12);
+}
+
+.pgp-gen__select-viewport {
+  padding: 0.25rem;
+}
+
+.pgp-gen__select-item {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: #374151;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  outline: none;
+
+  &[data-highlighted] {
+    background: #f3f4f6;
+  }
+
+  &[data-state='checked'] {
+    font-weight: 500;
+    color: #1d4ed8;
+  }
+}
+</style>
diff --git a/src/components/pageTabs/cryptography/PGPKeyTool.vue b/src/components/pageTabs/cryptography/PGPKeyTool.vue
index 0fc9151b..e7d45cbe 100644
--- a/src/components/pageTabs/cryptography/PGPKeyTool.vue
+++ b/src/components/pageTabs/cryptography/PGPKeyTool.vue
@@ -76,6 +76,15 @@
               {{ isValidating ? 'Validating…' : 'Validate keypair' }}
             </button>
 
+            <button
+              type="button"
+              class="pgp__btn pgp__btn--details"
+              :disabled="!publicKey.trim()"
+              @click="detailsOpen = true"
+            >
+              Details
+            </button>
+
             <DropdownMenuRoot v-if="publicKey && rawFingerprint">
               <DropdownMenuTrigger type="button" class="pgp__btn pgp__btn--secondary pgp__dropdown-trigger">
                 Export
@@ -215,12 +224,15 @@
         </TabsRoot>
       </TabsContent>
     </TabsRoot>
+
+    <DetailsPgpModal v-model:open="detailsOpen" :armored-public-key="publicKey" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import * as openpgp from 'openpgp'
+import DetailsPgpModal from '@/components/modals/cryptography/details.pgp.vue'
 import {
   Label,
   TabsRoot,
@@ -246,6 +258,8 @@ const privateKey = ref('')
 const validationMessage = ref('')
 const keyFingerprint = ref('')
 const rawFingerprint = ref('')
+const detailsOpen = ref(false)
+
 const fileToEncrypt = ref<File | null>(null)
 const fileToDecrypt = ref<File | null>(null)
 const encryptionStatus = ref('')
@@ -742,6 +756,22 @@ const decryptFile = async (): Promise<void> => {
     }
   }
 
+  &--details {
+    color: #374151;
+    background: #fff;
+    border: 1px solid #d1d5db;
+
+    &:hover:not(:disabled) {
+      background: #f9fafb;
+      border-color: #9ca3af;
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3b82f6;
+    }
+  }
+
   &--ghost {
     flex-shrink: 0;
     font-weight: 500;
diff --git a/src/views/Cryptography.vue b/src/views/Cryptography.vue
index 5f0740ff..1de766d0 100644
--- a/src/views/Cryptography.vue
+++ b/src/views/Cryptography.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="view">
     <h1 class="view-name">::Cryptography Tools::</h1>
-    <p class="text-left text-gray-600 mb-8">Hash data, verify file integrity, and encrypt/decrypt files</p>
+    <p class="text-left text-gray-600 mb-8">
+      Hash data, verify file integrity, encrypt or decrypt files, manage PGP keys, and generate new key pairs
+    </p>
     
     <!-- Tab Navigation -->
     <TabsWrapper class="tabs-container">
@@ -29,6 +31,12 @@
       >
         PGP/GPG Keys
       </TabComponent>
+      <TabComponent
+        :active="activeTab === 'generate'"
+        :onClick="() => (activeTab = 'generate')"
+      >
+        Generate
+      </TabComponent>
     </TabsWrapper>
 
     <!-- Tab Content -->
@@ -44,6 +52,9 @@
       
       <!-- PGP/GPG Keys Tab -->
       <PGPKeyTool v-if="activeTab === 'pgp'" />
+
+      <!-- Generate PGP key pair -->
+      <PGPGenerateTool v-if="activeTab === 'generate'" />
     </div>
   </div>
 </template>
@@ -54,6 +65,7 @@ import HashTool from '../components/pageTabs/cryptography/HashTool.vue'
 import VerifyTool from '../components/pageTabs/cryptography/VerifyTool.vue'
 import EncryptDecryptTool from '../components/pageTabs/cryptography/EncryptDecryptTool.vue'
 import PGPKeyTool from '@/components/pageTabs/cryptography/PGPKeyTool.vue'
+import PGPGenerateTool from '@/components/pageTabs/cryptography/PGPGenerateTool.vue'
 import TabComponent from '@/components/global/TabComponent.vue'
 import TabsWrapper from '@/components/global/TabsWrapper.vue'