Merge pull request #4 from Turtlepaw/main

feat: add ticket booth

README.md

···
 
 Start the project in development mode:
 
-```
+```shell
 deno task dev
 ```
 

components/Link.tsx

···
+import { JSX } from "preact";
+
+/**
+ * Props for the Link component
+ */
+type Props = Omit<JSX.HTMLAttributes<HTMLAnchorElement>, "href"> & {
+  /** URL for the link */
+  href: string;
+  /** Whether this is an external link that should show an outbound icon */
+  isExternal?: boolean;
+  /** Link text content */
+  children: JSX.Element | string;
+};
+
+/**
+ * A link component that handles external links with appropriate styling and accessibility.
+ * Automatically adds external link icon and proper attributes for external links.
+ */
+export function Link(props: Props) {
+  const {
+    isExternal = false,
+    class: className = "",
+    children,
+    href,
+    ...rest
+  } = props;
+
+  // SVG for external link icon
+  const externalLinkIcon = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      className="w-4 h-4 inline-block ml-1"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        d="M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z"
+      />
+      <path
+        fillRule="evenodd"
+        d="M6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z"
+      />
+    </svg>
+  );
+
+  return (
+    <a
+      href={href}
+      {...rest}
+      className={`inline-flex items-center hover:underline ${className}`}
+      {...(isExternal && {
+        target: "_blank",
+        rel: "noopener noreferrer",
+        "aria-label": `${
+          typeof children === "string" ? children : ""
+        } (opens in new tab)`,
+      })}
+    >
+      {children}
+      {isExternal && externalLinkIcon}
+    </a>
+  );
+}

deno.json

···
   },
   "lint": {
     "rules": {
-      "tags": ["fresh", "recommended"]
+      "tags": [
+        "fresh",
+        "recommended"
+      ]
     }
   },
-  "exclude": ["**/_fresh/*"],
+  "exclude": [
+    "**/_fresh/*"
+  ],
   "imports": {
     "@atproto/api": "npm:@atproto/api@^0.15.6",
     "@bigmoves/atproto-oauth-client": "jsr:@bigmoves/atproto-oauth-client@^0.2.0",
···
     "posthog-js": "npm:posthog-js@1.120.0",
     "preact": "npm:preact@^10.26.6",
     "@preact/signals": "npm:@preact/signals@^2.0.4",
-    "tailwindcss": "npm:tailwindcss@^3.4.3"
+    "tailwindcss": "npm:tailwindcss@^3.4.3",
+    "@atproto/crypto": "npm:@atproto/crypto@^0.4.4",
+    "@did-plc/lib": "npm:@did-plc/lib@^0.0.4"
   },
   "compilerOptions": {
-    "lib": ["dom", "dom.asynciterable", "dom.iterable", "deno.ns"],
+    "lib": [
+      "dom",
+      "dom.asynciterable",
+      "dom.iterable",
+      "deno.ns"
+    ],
     "jsx": "precompile",
     "jsxImportSource": "preact",
-    "jsxPrecompileSkipElements": ["a", "img", "source", "body", "html", "head"],
-    "types": ["node"]
+    "jsxPrecompileSkipElements": [
+      "a",
+      "img",
+      "source",
+      "body",
+      "html",
+      "head"
+    ],
+    "types": [
+      "node"
+    ]
   },
-  "unstable": ["kv", "otel"]
-}
+  "unstable": [
+    "kv",
+    "otel"
+  ]
+}

deno.lock

···
     "npm:@atproto/api@*": "0.15.6",
     "npm:@atproto/api@~0.15.6": "0.15.6",
     "npm:@atproto/crypto@*": "0.4.4",
+    "npm:@atproto/crypto@~0.4.4": "0.4.4",
     "npm:@atproto/identity@*": "0.4.8",
     "npm:@atproto/jwk@0.1.4": "0.1.4",
     "npm:@atproto/oauth-client@~0.3.13": "0.3.16",
     "npm:@atproto/oauth-types@~0.2.4": "0.2.7",
     "npm:@atproto/syntax@*": "0.4.0",
     "npm:@atproto/xrpc@*": "0.7.0",
+    "npm:@did-plc/lib@^0.0.4": "0.0.4",
     "npm:@lucide/lab@*": "0.1.2",
     "npm:@opentelemetry/api@^1.9.0": "1.9.0",
     "npm:@preact/signals@^1.2.3": "1.3.2_preact@10.26.6",
···
         "zod"
       ]
     },
+    "@atproto/common@0.1.1": {
+      "integrity": "sha512-GYwot5wF/z8iYGSPjrLHuratLc0CVgovmwfJss7+BUOB6y2/Vw8+1Vw0n9DDI0gb5vmx3UI8z0uJgC8aa8yuJg==",
+      "dependencies": [
+        "@ipld/dag-cbor",
+        "multiformats@9.9.0",
+        "pino",
+        "zod"
+      ]
+    },
+    "@atproto/crypto@0.1.0": {
+      "integrity": "sha512-9xgFEPtsCiJEPt9o3HtJT30IdFTGw5cQRSJVIy5CFhqBA4vDLcdXiRDLCjkzHEVbtNCsHUW6CrlfOgbeLPcmcg==",
+      "dependencies": [
+        "@noble/secp256k1",
+        "big-integer",
+        "multiformats@9.9.0",
+        "one-webcrypto",
+        "uint8arrays@3.0.0"
+      ]
+    },
     "@atproto/crypto@0.4.4": {
       "integrity": "sha512-Yq9+crJ7WQl7sxStVpHgie5Z51R05etaK9DLWYG/7bR5T4bhdcIgF6IfklLShtZwLYdVVj+K15s0BqW9a8PSDA==",
       "dependencies": [
···
       "integrity": "sha512-Z0sLnJ87SeNdAifT+rqpgE1Rc3layMMW25gfWNo4u40RGuRODbdfAZlTwBSU2r+Vk45hU+iE+xeQspfednCEnA==",
       "dependencies": [
         "@atproto/common-web",
-        "@atproto/crypto"
+        "@atproto/crypto@0.4.4"
       ]
     },
     "@atproto/jwk@0.1.4": {
···
       "integrity": "sha512-SfhP9dGx2qclaScFDb58Jnrmim5nk4geZXCqg6sB0I/KZhZEkr9iIx1hLCp+sxkIfEsmEJjeWO4B0rjUIJW5cw==",
       "dependencies": [
         "@atproto/lexicon",
+        "zod"
+      ]
+    },
+    "@did-plc/lib@0.0.4": {
+      "integrity": "sha512-Omeawq3b8G/c/5CtkTtzovSOnWuvIuCI4GTJNrt1AmCskwEQV7zbX5d6km1mjJNbE0gHuQPTVqZxLVqetNbfwA==",
+      "dependencies": [
+        "@atproto/common",
+        "@atproto/crypto@0.1.0",
+        "@ipld/dag-cbor",
+        "axios",
+        "multiformats@9.9.0",
+        "uint8arrays@3.0.0",
         "zod"
       ]
     },
···
       "os": ["win32"],
       "cpu": ["x64"]
     },
+    "@ipld/dag-cbor@7.0.3": {
+      "integrity": "sha512-1VVh2huHsuohdXC1bGJNE8WR72slZ9XE2T3wbBBq31dm7ZBatmKLLxrB+XAqafxfRFjv08RZmj/W/ZqaM13AuA==",
+      "dependencies": [
+        "cborg",
+        "multiformats@9.9.0"
+      ]
+    },
     "@isaacs/cliui@8.0.2": {
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
       "dependencies": [
···
     },
     "@noble/hashes@1.8.0": {
       "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A=="
+    },
+    "@noble/secp256k1@1.7.2": {
+      "integrity": "sha512-/qzwYl5eFLH8OWIecQWM31qld2g1NfjgylK+TNhqtaUKP37Nm+Y+z30Fjhw0Ct8p9yCQEm2N3W/AckdIb3SMcQ=="
     },
     "@nodelib/fs.scandir@2.1.5": {
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
···
         "undici-types"
       ]
     },
+    "abort-controller@3.0.0": {
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "dependencies": [
+        "event-target-shim"
+      ]
+    },
     "ansi-regex@5.0.1": {
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
     },
···
     "arg@5.0.2": {
       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
     },
+    "asynckit@0.4.0": {
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "atomic-sleep@1.0.0": {
+      "integrity": "sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ=="
+    },
     "autoprefixer@10.4.17_postcss@8.4.35": {
       "integrity": "sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==",
       "dependencies": [
···
     "await-lock@2.2.2": {
       "integrity": "sha512-aDczADvlvTGajTDjcjpJMqRkOF6Qdz3YbPZm/PyW6tKPkx2hlYBzxMhEywM/tU72HrVZjgl5VCdRuMlA7pZ8Gw=="
     },
+    "axios@1.10.0": {
+      "integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
+      "dependencies": [
+        "follow-redirects",
+        "form-data",
+        "proxy-from-env"
+      ]
+    },
     "balanced-match@1.0.2": {
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "base64-js@1.5.1": {
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
+    },
+    "big-integer@1.6.52": {
+      "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg=="
     },
     "binary-extensions@2.3.0": {
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="
···
       ],
       "bin": true
     },
+    "buffer@6.0.3": {
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "dependencies": [
+        "base64-js",
+        "ieee754"
+      ]
+    },
+    "call-bind-apply-helpers@1.0.2": {
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dependencies": [
+        "es-errors",
+        "function-bind"
+      ]
+    },
     "camelcase-css@2.0.1": {
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
     },
···
     },
     "caniuse-lite@1.0.30001717": {
       "integrity": "sha512-auPpttCq6BDEG8ZAuHJIplGw6GODhjw+/11e7IjpnYCxZcW/ONgPs0KVBJ0d1bY3e2+7PRe5RCLyP+PfwVgkYw=="
+    },
+    "cborg@1.10.2": {
+      "integrity": "sha512-b3tFPA9pUr2zCUiCfRd2+wok2/LBSNUMKOuRRok+WlvvAgEt/PlbgPTsZUcwCOs53IJvLgTp0eotwtosE6njug==",
+      "bin": true
     },
     "chokidar@3.6.0": {
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
···
     "colord@2.9.3": {
       "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
     },
+    "combined-stream@1.0.8": {
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": [
+        "delayed-stream"
+      ]
+    },
     "commander@4.1.1": {
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="
     },
···
         "css-tree@2.2.1"
       ]
     },
+    "delayed-stream@1.0.0": {
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "didyoumean@1.2.2": {
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
···
         "domhandler"
       ]
     },
+    "dunder-proto@1.0.1": {
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dependencies": [
+        "call-bind-apply-helpers",
+        "es-errors",
+        "gopd"
+      ]
+    },
     "eastasianwidth@0.2.0": {
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
···
     "entities@4.5.0": {
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
     },
+    "es-define-property@1.0.1": {
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g=="
+    },
+    "es-errors@1.3.0": {
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="
+    },
+    "es-object-atoms@1.1.1": {
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dependencies": [
+        "es-errors"
+      ]
+    },
+    "es-set-tostringtag@2.1.0": {
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dependencies": [
+        "es-errors",
+        "get-intrinsic",
+        "has-tostringtag",
+        "hasown"
+      ]
+    },
     "esbuild-wasm@0.23.1": {
       "integrity": "sha512-L3vn7ctvBrtScRfoB0zG1eOCiV4xYvpLYWfe6PDZuV+iDFDm4Mt3xeLIDllG8cDHQ8clUouK3XekulE+cxgkgw==",
       "bin": true
···
     "escalade@3.2.0": {
       "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="
     },
+    "event-target-shim@5.0.1": {
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
+    },
+    "events@3.3.0": {
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
+    },
     "fast-glob@3.3.3": {
       "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
       "dependencies": [
···
         "micromatch"
       ]
     },
+    "fast-redact@3.5.0": {
+      "integrity": "sha512-dwsoQlS7h9hMeYUq1W++23NDcBLV4KqONnITDV9DjfS3q1SgDGVrBdvvTLUotWtPSD7asWDV9/CmsZPy8Hf70A=="
+    },
     "fastq@1.19.1": {
       "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
       "dependencies": [
···
         "to-regex-range"
       ]
     },
+    "follow-redirects@1.15.9": {
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ=="
+    },
     "foreground-child@3.3.1": {
       "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
       "dependencies": [
···
         "signal-exit"
       ]
     },
+    "form-data@4.0.3": {
+      "integrity": "sha512-qsITQPfmvMOSAdeyZ+12I1c+CKSstAFAwu+97zrnWAbIr5u8wfsExUzCesVLC8NgHuRUqNN4Zy6UPWUTRGslcA==",
+      "dependencies": [
+        "asynckit",
+        "combined-stream",
+        "es-set-tostringtag",
+        "hasown",
+        "mime-types"
+      ]
+    },
     "fraction.js@4.3.7": {
       "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="
     },
···
     "function-bind@1.1.2": {
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
     },
+    "get-intrinsic@1.3.0": {
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dependencies": [
+        "call-bind-apply-helpers",
+        "es-define-property",
+        "es-errors",
+        "es-object-atoms",
+        "function-bind",
+        "get-proto",
+        "gopd",
+        "has-symbols",
+        "hasown",
+        "math-intrinsics"
+      ]
+    },
+    "get-proto@1.0.1": {
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dependencies": [
+        "dunder-proto",
+        "es-object-atoms"
+      ]
+    },
     "glob-parent@5.1.2": {
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "dependencies": [
···
       ],
       "bin": true
     },
+    "gopd@1.2.0": {
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="
+    },
     "graphemer@1.4.0": {
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="
     },
+    "has-symbols@1.1.0": {
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="
+    },
+    "has-tostringtag@1.0.2": {
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dependencies": [
+        "has-symbols"
+      ]
+    },
     "hasown@2.0.2": {
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
       "dependencies": [
         "function-bind"
       ]
+    },
+    "ieee754@1.2.1": {
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
     },
     "ipaddr.js@2.2.0": {
       "integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA=="
···
         "preact@10.26.6"
       ]
     },
+    "math-intrinsics@1.1.0": {
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="
+    },
     "mdn-data@2.0.28": {
       "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="
     },
···
         "picomatch"
       ]
     },
+    "mime-db@1.52.0": {
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+    },
+    "mime-types@2.1.35": {
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": [
+        "mime-db"
+      ]
+    },
     "minimatch@9.0.5": {
       "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dependencies": [
···
     "object-hash@3.0.0": {
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="
     },
+    "on-exit-leak-free@2.1.2": {
+      "integrity": "sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA=="
+    },
+    "one-webcrypto@1.0.3": {
+      "integrity": "sha512-fu9ywBVBPx0gS9K0etIROTiCkvI5S1TDjFsYFb3rC1ewFxeOqsbzq7aIMBHsYfrTHBcGXJaONXXjTl8B01cW1Q=="
+    },
     "package-json-from-dist@1.0.1": {
       "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="
     },
···
     "pify@2.3.0": {
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
     },
+    "pino-abstract-transport@1.2.0": {
+      "integrity": "sha512-Guhh8EZfPCfH+PMXAb6rKOjGQEoy0xlAIn+irODG5kgfYV+BQ0rGYYWTIel3P5mmyXqkYkPmdIkywsn6QKUR1Q==",
+      "dependencies": [
+        "readable-stream",
+        "split2"
+      ]
+    },
+    "pino-std-serializers@6.2.2": {
+      "integrity": "sha512-cHjPPsE+vhj/tnhCy/wiMh3M3z3h/j15zHQX+S9GkTBgqJuTuJzYJ4gUyACLhDaJ7kk9ba9iRDmbH2tJU03OiA=="
+    },
+    "pino@8.21.0": {
+      "integrity": "sha512-ip4qdzjkAyDDZklUaZkcRFb2iA118H9SgRh8yzTkSQK8HilsOJF7rSY8HoW5+I0M46AZgX/pxbprf2vvzQCE0Q==",
+      "dependencies": [
+        "atomic-sleep",
+        "fast-redact",
+        "on-exit-leak-free",
+        "pino-abstract-transport",
+        "pino-std-serializers",
+        "process-warning",
+        "quick-format-unescaped",
+        "real-require",
+        "safe-stable-stringify",
+        "sonic-boom",
+        "thread-stream"
+      ],
+      "bin": true
+    },
     "pirates@4.0.7": {
       "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA=="
     },
···
     "preact@10.26.7": {
       "integrity": "sha512-43xS+QYc1X1IPbw03faSgY6I6OYWcLrJRv3hU0+qMOfh/XCHcP0MX2CVjNARYR2cC/guu975sta4OcjlczxD7g=="
     },
+    "process-warning@3.0.0": {
+      "integrity": "sha512-mqn0kFRl0EoqhnL0GQ0veqFHyIN1yig9RHh/InzORTUiZHFRAur+aMtRkELNwGs9aNwKS6tg/An4NYBPGwvtzQ=="
+    },
+    "process@0.11.10": {
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
+    },
+    "proxy-from-env@1.1.0": {
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "psl@1.15.0": {
       "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
       "dependencies": [
···
     "queue-microtask@1.2.3": {
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
     },
+    "quick-format-unescaped@4.0.4": {
+      "integrity": "sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg=="
+    },
     "read-cache@1.0.0": {
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
       "dependencies": [
         "pify"
       ]
     },
+    "readable-stream@4.7.0": {
+      "integrity": "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==",
+      "dependencies": [
+        "abort-controller",
+        "buffer",
+        "events",
+        "process",
+        "string_decoder"
+      ]
+    },
     "readdirp@3.6.0": {
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
       "dependencies": [
         "picomatch"
       ]
+    },
+    "real-require@0.2.0": {
+      "integrity": "sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg=="
     },
     "resolve@1.22.10": {
       "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
···
         "queue-microtask"
       ]
     },
+    "safe-buffer@5.2.1": {
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+    },
+    "safe-stable-stringify@2.5.0": {
+      "integrity": "sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA=="
+    },
     "shebang-command@2.0.0": {
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
       "dependencies": [
···
     },
     "signal-exit@4.1.0": {
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="
+    },
+    "sonic-boom@3.8.1": {
+      "integrity": "sha512-y4Z8LCDBuum+PBP3lSV7RHrXscqksve/bi0as7mhwVnBW+/wUqKT/2Kb7um8yqcFy0duYbbPxzt89Zy2nOCaxg==",
+      "dependencies": [
+        "atomic-sleep"
+      ]
     },
     "source-map-js@1.2.1": {
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="
     },
+    "split2@4.2.0": {
+      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg=="
+    },
     "string-width@4.2.3": {
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "dependencies": [
···
         "eastasianwidth",
         "emoji-regex@9.2.2",
         "strip-ansi@7.1.0"
+      ]
+    },
+    "string_decoder@1.3.0": {
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dependencies": [
+        "safe-buffer"
       ]
     },
     "strip-ansi@6.0.1": {
···
         "any-promise"
       ]
     },
+    "thread-stream@2.7.0": {
+      "integrity": "sha512-qQiRWsU/wvNolI6tbbCKd9iKaTnCXsTwVxhhKM6nctPdujTyztjlbUkUTUymidWcMnZ5pWR0ej4a0tjsW021vw==",
+      "dependencies": [
+        "real-require"
+      ]
+    },
     "tlds@1.258.0": {
       "integrity": "sha512-XGhStWuOlBA5D8QnyN2xtgB2cUOdJ3ztisne1DYVWMcVH29qh8eQIpRmP3HnuJLdgyzG0HpdGzRMu1lm/Oictw==",
       "bin": true
···
       "jsr:@fresh/plugin-tailwind@^0.0.1-alpha.7",
       "jsr:@knotbin/posthog-fresh@~0.1.3",
       "npm:@atproto/api@~0.15.6",
+      "npm:@atproto/crypto@~0.4.4",
+      "npm:@did-plc/lib@^0.0.4",
       "npm:@preact/signals@^2.0.4",
       "npm:posthog-js@1.120.0",
       "npm:preact@^10.26.6",

islands/DidPlcProgress.tsx

···
+import { useState, useEffect } from "preact/hooks";
+import { Link } from "../components/Link.tsx";
+
+interface PlcUpdateStep {
+  name: string;
+  status: "pending" | "in-progress" | "verifying" | "completed" | "error";
+  error?: string;
+}
+
+// Content chunks for the description
+const contentChunks = [
+  {
+    title: "Welcome to Key Management",
+    subtitle: "BOARDING PASS - SECTION A",
+    content: (
+      <>
+        <div class="passenger-info text-slate-600 dark:text-slate-300 font-mono text-sm mb-4">
+          GATE: KEY-01 • SEAT: DID-1A
+        </div>
+        <p class="text-slate-700 dark:text-slate-300 mb-4">
+          This tool helps you add a new rotation key to your{" "}
+          <Link
+            href="https://web.plc.directory/"
+            isExternal
+            class="text-blue-600 dark:text-blue-400"
+          >
+            PLC (Public Ledger of Credentials)
+          </Link>
+          . Having control of a rotation key gives you sovereignty over your DID
+          (Decentralized Identifier).
+        </p>
+      </>
+    ),
+  },
+  {
+    title: "Key Benefits",
+    subtitle: "BOARDING PASS - SECTION B",
+    content: (
+      <>
+        <div class="passenger-info text-slate-600 dark:text-slate-300 font-mono text-sm mb-4">
+          GATE: KEY-02 • SEAT: DID-1B
+        </div>
+        <div class="space-y-4">
+          <div class="p-3 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
+            <h4 class="font-mono font-bold text-amber-500 dark:text-amber-400 mb-2">
+              PROVIDER MOBILITY ✈️
+            </h4>
+            <p class="text-slate-700 dark:text-slate-300">
+              Change your PDS without losing your identity, protecting you if
+              your provider becomes hostile.
+            </p>
+          </div>
+          <div class="p-3 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
+            <h4 class="font-mono font-bold text-amber-500 dark:text-amber-400 mb-2">
+              IDENTITY CONTROL ✨
+            </h4>
+            <p class="text-slate-700 dark:text-slate-300">
+              Modify your DID document independently of your provider.
+            </p>
+          </div>
+          <div class="p-3 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
+            <p class="text-slate-700 dark:text-slate-300">
+              💡 It's good practice to have a rotation key so you can move to a
+              different provider if you need to.
+            </p>
+          </div>
+        </div>
+      </>
+    ),
+  },
+  {
+    title: "⚠️ CRITICAL SECURITY WARNING",
+    subtitle: "BOARDING PASS - SECTION C",
+    content: (
+      <>
+        <div class="passenger-info text-slate-600 dark:text-slate-300 font-mono text-sm mb-4">
+          GATE: KEY-03 • SEAT: DID-1C
+        </div>
+        <div class="p-4 bg-red-50 dark:bg-red-900 rounded-lg border-2 border-red-500 dark:border-red-700 mb-4">
+          <div class="flex items-center mb-3">
+            <span class="text-2xl mr-2">⚠️</span>
+            <h4 class="font-mono font-bold text-red-700 dark:text-red-400 text-lg">
+              NON-REVOCABLE KEY WARNING
+            </h4>
+          </div>
+          <div class="space-y-3 text-red-700 dark:text-red-300">
+            <p class="font-bold">
+              This rotation key CANNOT BE DISABLED OR DELETED once added:
+            </p>
+            <ul class="list-disc pl-5 space-y-2">
+              <li>
+                If compromised, the attacker can take complete control of your
+                account and identity
+              </li>
+              <li>
+                Malicious actors with this key have COMPLETE CONTROL of your
+                account and identity
+              </li>
+              <li>
+                Store securely, like a password (e.g. <strong>DO NOT</strong>{" "}
+                keep it in Notes or any easily accessible app on an unlocked
+                device).
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="p-3 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
+          <p class="text-slate-700 dark:text-slate-300">
+            💡 We recommend adding a custom rotation key but recommend{" "}
+            <strong class="italic">against</strong> having more than one custom
+            rotation key, as more than one increases risk.
+          </p>
+        </div>
+      </>
+    ),
+  },
+  {
+    title: "Technical Overview",
+    subtitle: "BOARDING PASS - SECTION C",
+    content: (
+      <>
+        <div class="passenger-info text-slate-600 dark:text-slate-300 font-mono text-sm mb-4">
+          GATE: KEY-03 • SEAT: DID-1C
+        </div>
+        <div class="p-4 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
+          <div class="flex items-center mb-3">
+            <span class="text-lg mr-2">📝</span>
+            <h4 class="font-mono font-bold text-amber-500 dark:text-amber-400">
+              TECHNICAL DETAILS
+            </h4>
+          </div>
+          <p class="text-slate-700 dark:text-slate-300">
+            The rotation key is a did:key that will be added to your PLC
+            document's rotationKeys array. This process uses the AT Protocol's
+            PLC operations to update your DID document.
+            <Link
+              href="https://web.plc.directory/"
+              class="block ml-1 text-blue-600 dark:text-blue-400"
+              isExternal
+            >
+              Learn more about did:plc
+            </Link>
+          </p>
+        </div>
+      </>
+    ),
+  },
+];
+
+export default function PlcUpdateProgress() {
+  const [hasStarted, setHasStarted] = useState(false);
+  const [currentChunkIndex, setCurrentChunkIndex] = useState(0);
+  const [steps, setSteps] = useState<PlcUpdateStep[]>([
+    { name: "Generate Rotation Key", status: "pending" },
+    { name: "Start PLC update", status: "pending" },
+    { name: "Complete PLC update", status: "pending" },
+  ]);
+  const [generatedKey, setGeneratedKey] = useState<string>("");
+  const [keyJson, setKeyJson] = useState<any>(null);
+  const [emailToken, setEmailToken] = useState<string>("");
+  const [updateResult, setUpdateResult] = useState<string>("");
+  const [showDownload, setShowDownload] = useState(false);
+  const [showKeyInfo, setShowKeyInfo] = useState(false);
+  const [hasDownloadedKey, setHasDownloadedKey] = useState(false);
+  const [downloadedKeyId, setDownloadedKeyId] = useState<string | null>(null);
+
+  const updateStepStatus = (
+    index: number,
+    status: PlcUpdateStep["status"],
+    error?: string
+  ) => {
+    console.log(
+      `Updating step ${index} to ${status}${
+        error ? ` with error: ${error}` : ""
+      }`
+    );
+    setSteps((prevSteps) =>
+      prevSteps.map((step, i) =>
+        i === index
+          ? { ...step, status, error }
+          : i > index
+          ? { ...step, status: "pending", error: undefined }
+          : step
+      )
+    );
+  };
+
+  const handleStart = () => {
+    setHasStarted(true);
+    // Automatically start the first step
+    setTimeout(() => {
+      handleGenerateKey();
+    }, 100);
+  };
+
+  const getStepDisplayName = (step: PlcUpdateStep, index: number) => {
+    if (step.status === "completed") {
+      switch (index) {
+        case 0:
+          return "Rotation Key Generated";
+        case 1:
+          return "PLC Operation Requested";
+        case 2:
+          return "PLC Update Completed";
+      }
+    }
+
+    if (step.status === "in-progress") {
+      switch (index) {
+        case 0:
+          return "Generating Rotation Key...";
+        case 1:
+          return "Requesting PLC Operation Token...";
+        case 2:
+          return step.name ===
+            "Enter the code sent to your email to complete PLC update"
+            ? step.name
+            : "Completing PLC Update...";
+      }
+    }
+
+    if (step.status === "verifying") {
+      switch (index) {
+        case 0:
+          return "Verifying Rotation Key Generation...";
+        case 1:
+          return "Verifying PLC Operation Token Request...";
+        case 2:
+          return "Verifying PLC Update Completion...";
+      }
+    }
+
+    return step.name;
+  };
+
+  const handleStartPlcUpdate = async (keyToUse?: string) => {
+    const key = keyToUse || generatedKey;
+
+    // Debug logging
+    console.log("=== PLC Update Debug ===");
+    console.log("Current state:", {
+      keyToUse,
+      generatedKey,
+      key,
+      hasKeyJson: !!keyJson,
+      keyJsonId: keyJson?.publicKeyDid,
+      hasDownloadedKey,
+      downloadedKeyId,
+      steps: steps.map((s) => ({ name: s.name, status: s.status })),
+    });
+
+    if (!key) {
+      console.log("No key generated yet");
+      updateStepStatus(1, "error", "No key generated yet");
+      return;
+    }
+
+    if (!keyJson || keyJson.publicKeyDid !== key) {
+      console.log("Key mismatch or missing:", {
+        hasKeyJson: !!keyJson,
+        keyJsonId: keyJson?.publicKeyDid,
+        expectedKey: key,
+      });
+      updateStepStatus(
+        1,
+        "error",
+        "Please ensure you have the correct key loaded"
+      );
+      return;
+    }
+
+    updateStepStatus(1, "in-progress");
+    try {
+      // First request the token
+      console.log("Requesting PLC token...");
+      const tokenRes = await fetch("/api/plc/token", {
+        method: "GET",
+      });
+      const tokenText = await tokenRes.text();
+      console.log("Token response:", tokenText);
+
+      if (!tokenRes.ok) {
+        try {
+          const json = JSON.parse(tokenText);
+          throw new Error(json.message || "Failed to request PLC token");
+        } catch {
+          throw new Error(tokenText || "Failed to request PLC token");
+        }
+      }
+
+      let data;
+      try {
+        data = JSON.parse(tokenText);
+        if (!data.success) {
+          throw new Error(data.message || "Failed to request token");
+        }
+      } catch (error) {
+        throw new Error("Invalid response from server");
+      }
+
+      console.log("Token request successful, updating UI...");
+      // Update step name to prompt for token
+      setSteps((prevSteps) =>
+        prevSteps.map((step, i) =>
+          i === 1
+            ? {
+                ...step,
+                name: "Enter the code sent to your email to complete PLC update",
+                status: "in-progress",
+              }
+            : step
+        )
+      );
+    } catch (error) {
+      console.error("Token request failed:", error);
+      updateStepStatus(
+        1,
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  const handleTokenSubmit = async () => {
+    console.log("=== Token Submit Debug ===");
+    console.log("Current state:", {
+      emailToken,
+      generatedKey,
+      keyJsonId: keyJson?.publicKeyDid,
+      steps: steps.map((s) => ({ name: s.name, status: s.status })),
+    });
+
+    if (!emailToken) {
+      console.log("No token provided");
+      updateStepStatus(1, "error", "Please enter the email token");
+      return;
+    }
+
+    if (!keyJson || !keyJson.publicKeyDid) {
+      console.log("Missing key data");
+      updateStepStatus(1, "error", "Key data is missing, please try again");
+      return;
+    }
+
+    // Prevent duplicate submissions
+    if (steps[1].status === "completed" || steps[2].status === "completed") {
+      console.log("Update already completed, preventing duplicate submission");
+      return;
+    }
+
+    updateStepStatus(1, "completed");
+    try {
+      updateStepStatus(2, "in-progress");
+      console.log("Submitting update request with token...");
+      // Send the update request with both key and token
+      const res = await fetch("/api/plc/update", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          key: keyJson.publicKeyDid,
+          token: emailToken,
+        }),
+      });
+      const text = await res.text();
+      console.log("Update response:", text);
+
+      let data;
+      try {
+        data = JSON.parse(text);
+      } catch {
+        throw new Error("Invalid response from server");
+      }
+
+      // Check for error responses
+      if (!res.ok || !data.success) {
+        const errorMessage = data.message || "Failed to complete PLC update";
+        console.error("Update failed:", errorMessage);
+        throw new Error(errorMessage);
+      }
+
+      // Only proceed if we have a successful response
+      console.log("Update completed successfully!");
+      setUpdateResult("PLC update completed successfully!");
+
+      // Add a delay before marking steps as completed for better UX
+      updateStepStatus(2, "verifying");
+
+      const verifyRes = await fetch("/api/plc/verify", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          key: keyJson.publicKeyDid,
+        }),
+      });
+
+      const verifyText = await verifyRes.text();
+      console.log("Verification response:", verifyText);
+
+      let verifyData;
+      try {
+        verifyData = JSON.parse(verifyText);
+      } catch {
+        throw new Error("Invalid verification response from server");
+      }
+
+      if (!verifyRes.ok || !verifyData.success) {
+        const errorMessage =
+          verifyData.message || "Failed to verify PLC update";
+        console.error("Verification failed:", errorMessage);
+        throw new Error(errorMessage);
+      }
+
+      console.log("Verification successful, marking steps as completed");
+      updateStepStatus(2, "completed");
+    } catch (error) {
+      console.error("Update failed:", error);
+      // Reset the steps to error state
+      updateStepStatus(
+        1,
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+      updateStepStatus(2, "pending"); // Reset the final step
+      setUpdateResult(error instanceof Error ? error.message : String(error));
+
+      // If token is invalid, we should clear it so user can try again
+      if (
+        error instanceof Error &&
+        error.message.toLowerCase().includes("token is invalid")
+      ) {
+        setEmailToken("");
+      }
+    }
+  };
+
+  const handleCompletePlcUpdate = async () => {
+    // This function is no longer needed as we handle everything in handleTokenSubmit
+    return;
+  };
+
+  const handleDownload = () => {
+    console.log("=== Download Debug ===");
+    console.log("Download started with:", {
+      hasKeyJson: !!keyJson,
+      keyJsonId: keyJson?.publicKeyDid,
+    });
+
+    if (!keyJson) {
+      console.error("No key JSON to download");
+      return;
+    }
+
+    try {
+      const jsonString = JSON.stringify(keyJson, null, 2);
+      const blob = new Blob([jsonString], {
+        type: "application/json",
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `plc-key-${keyJson.publicKeyDid || "unknown"}.json`;
+      a.style.display = "none";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      console.log("Download completed, proceeding to next step...");
+      setHasDownloadedKey(true);
+      setDownloadedKeyId(keyJson.publicKeyDid);
+
+      // Automatically proceed to the next step after successful download
+      setTimeout(() => {
+        console.log("Auto-proceeding with key:", keyJson.publicKeyDid);
+        handleStartPlcUpdate(keyJson.publicKeyDid);
+      }, 1000);
+    } catch (error) {
+      console.error("Download failed:", error);
+    }
+  };
+
+  const handleGenerateKey = async () => {
+    console.log("=== Generate Key Debug ===");
+    updateStepStatus(0, "in-progress");
+    setShowDownload(false);
+    setKeyJson(null);
+    setGeneratedKey("");
+    setHasDownloadedKey(false);
+    setDownloadedKeyId(null);
+
+    try {
+      console.log("Requesting new key...");
+      const res = await fetch("/api/plc/keys");
+      const text = await res.text();
+      console.log("Key generation response:", text);
+
+      if (!res.ok) {
+        try {
+          const json = JSON.parse(text);
+          throw new Error(json.message || "Failed to generate key");
+        } catch {
+          throw new Error(text || "Failed to generate key");
+        }
+      }
+
+      let data;
+      try {
+        data = JSON.parse(text);
+      } catch {
+        throw new Error("Invalid response from /api/plc/keys");
+      }
+
+      if (!data.publicKeyDid || !data.privateKeyHex) {
+        throw new Error("Key generation failed: missing key data");
+      }
+
+      console.log("Key generated successfully:", {
+        keyId: data.publicKeyDid,
+      });
+
+      setGeneratedKey(data.publicKeyDid);
+      setKeyJson(data);
+      setShowDownload(true);
+      updateStepStatus(0, "completed");
+    } catch (error) {
+      console.error("Key generation failed:", error);
+      updateStepStatus(
+        0,
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  const getStepIcon = (status: PlcUpdateStep["status"]) => {
+    switch (status) {
+      case "pending":
+        return (
+          <div class="w-8 h-8 rounded-full border-2 border-gray-300 dark:border-gray-600 flex items-center justify-center">
+            <div class="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600" />
+          </div>
+        );
+      case "in-progress":
+        return (
+          <div class="w-8 h-8 rounded-full border-2 border-blue-500 border-t-transparent animate-spin flex items-center justify-center">
+            <div class="w-3 h-3 rounded-full bg-blue-500" />
+          </div>
+        );
+      case "verifying":
+        return (
+          <div class="w-8 h-8 rounded-full border-2 border-yellow-500 border-t-transparent animate-spin flex items-center justify-center">
+            <div class="w-3 h-3 rounded-full bg-yellow-500" />
+          </div>
+        );
+      case "completed":
+        return (
+          <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center">
+            <svg
+              class="w-5 h-5 text-white"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M5 13l4 4L19 7"
+              />
+            </svg>
+          </div>
+        );
+      case "error":
+        return (
+          <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center">
+            <svg
+              class="w-5 h-5 text-white"
+              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>
+          </div>
+        );
+    }
+  };
+
+  const getStepClasses = (status: PlcUpdateStep["status"]) => {
+    const baseClasses =
+      "flex items-center space-x-3 p-4 rounded-lg transition-colors duration-200";
+    switch (status) {
+      case "pending":
+        return `${baseClasses} bg-gray-50 dark:bg-gray-800`;
+      case "in-progress":
+        return `${baseClasses} bg-blue-50 dark:bg-blue-900`;
+      case "verifying":
+        return `${baseClasses} bg-yellow-50 dark:bg-yellow-900`;
+      case "completed":
+        return `${baseClasses} bg-green-50 dark:bg-green-900`;
+      case "error":
+        return `${baseClasses} bg-red-50 dark:bg-red-900`;
+    }
+  };
+
+  const requestNewToken = async () => {
+    try {
+      console.log("Requesting new token...");
+      const res = await fetch("/api/plc/token", {
+        method: "GET",
+      });
+      const text = await res.text();
+      console.log("Token request response:", text);
+
+      if (!res.ok) {
+        throw new Error(text || "Failed to request new token");
+      }
+
+      let data;
+      try {
+        data = JSON.parse(text);
+        if (!data.success) {
+          throw new Error(data.message || "Failed to request token");
+        }
+      } catch {
+        throw new Error("Invalid response from server");
+      }
+
+      // Clear any existing error and token
+      setEmailToken("");
+      updateStepStatus(1, "in-progress");
+      updateStepStatus(2, "pending");
+    } catch (error) {
+      console.error("Failed to request new token:", error);
+      updateStepStatus(
+        1,
+        "error",
+        error instanceof Error ? error.message : String(error)
+      );
+    }
+  };
+
+  if (!hasStarted) {
+    return (
+      <div class="space-y-6">
+        <div class="ticket bg-white dark:bg-slate-800 p-6 relative">
+          <div class="boarding-label text-amber-500 dark:text-amber-400 font-mono font-bold tracking-wider text-sm mb-2">
+            {contentChunks[currentChunkIndex].subtitle}
+          </div>
+
+          <div class="flex justify-between items-start mb-4">
+            <h3 class="text-2xl font-mono text-slate-800 dark:text-slate-200">
+              {contentChunks[currentChunkIndex].title}
+            </h3>
+          </div>
+
+          {/* Main Description */}
+          <div class="mb-6">{contentChunks[currentChunkIndex].content}</div>
+
+          {/* Navigation */}
+          <div class="mt-8 border-t border-dashed border-slate-200 dark:border-slate-700 pt-4">
+            <div class="flex justify-between items-center">
+              <button
+                onClick={() =>
+                  setCurrentChunkIndex((prev) => Math.max(0, prev - 1))
+                }
+                class={`px-4 py-2 font-mono text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 transition-colors duration-200 flex items-center space-x-2 ${
+                  currentChunkIndex === 0 ? "invisible" : ""
+                }`}
+              >
+                <svg
+                  class="w-5 h-5 rotate-180"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+                <span>Previous Gate</span>
+              </button>
+
+              {currentChunkIndex === contentChunks.length - 1 ? (
+                <button
+                  onClick={handleStart}
+                  class="px-6 py-2 bg-amber-500 hover:bg-amber-600 text-white font-mono rounded-md transition-colors duration-200 flex items-center space-x-2"
+                >
+                  <span>Begin Key Generation</span>
+                  <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="M9 5l7 7-7 7"
+                    />
+                  </svg>
+                </button>
+              ) : (
+                <button
+                  onClick={() =>
+                    setCurrentChunkIndex((prev) =>
+                      Math.min(contentChunks.length - 1, prev + 1)
+                    )
+                  }
+                  class="px-4 py-2 font-mono text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 transition-colors duration-200 flex items-center space-x-2"
+                >
+                  <span>Next Gate</span>
+                  <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="M9 5l7 7-7 7"
+                    />
+                  </svg>
+                </button>
+              )}
+            </div>
+
+            {/* Progress Dots */}
+            <div class="flex justify-center space-x-3 mt-4">
+              {contentChunks.map((_, index) => (
+                <div
+                  key={index}
+                  class={`h-1.5 w-8 rounded-full transition-colors duration-200 ${
+                    index === currentChunkIndex
+                      ? "bg-amber-500"
+                      : "bg-slate-200 dark:bg-slate-700"
+                  }`}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div class="space-y-8">
+      {/* Progress Steps */}
+      <div class="space-y-4">
+        <div class="flex items-center justify-between">
+          <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+            Key Generation Progress
+          </h3>
+          {/* Add a help tooltip */}
+          <div class="relative group">
+            <button class="text-gray-400 hover:text-gray-500">
+              <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+            </button>
+            <div class="absolute right-0 w-64 p-2 mt-2 space-y-1 text-sm bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 hidden group-hover:block z-10">
+              <p class="text-gray-600 dark:text-gray-400">
+                Follow these steps to securely add a new rotation key to your
+                PLC record. Each step requires completion before proceeding.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Steps with enhanced visual hierarchy */}
+        {steps.map((step, index) => (
+          <div
+            key={step.name}
+            class={`${getStepClasses(step.status)} ${
+              step.status === "in-progress"
+                ? "ring-2 ring-blue-500 ring-opacity-50"
+                : ""
+            }`}
+          >
+            <div class="flex-shrink-0">{getStepIcon(step.status)}</div>
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center justify-between">
+                <p
+                  class={`font-medium ${
+                    step.status === "error"
+                      ? "text-red-900 dark:text-red-200"
+                      : step.status === "completed"
+                      ? "text-green-900 dark:text-green-200"
+                      : step.status === "in-progress"
+                      ? "text-blue-900 dark:text-blue-200"
+                      : "text-gray-900 dark:text-gray-200"
+                  }`}
+                >
+                  {getStepDisplayName(step, index)}
+                </p>
+                {/* Add step number */}
+                <span class="text-sm text-gray-500 dark:text-gray-400">
+                  Step {index + 1} of {steps.length}
+                </span>
+              </div>
+
+              {step.error && (
+                <div class="mt-2 p-2 bg-red-50 dark:bg-red-900/50 rounded-md">
+                  <p class="text-sm text-red-600 dark:text-red-400 flex items-center">
+                    <svg
+                      class="w-4 h-4 mr-1"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                      />
+                    </svg>
+                    {(() => {
+                      try {
+                        const err = JSON.parse(step.error);
+                        return err.message || step.error;
+                      } catch {
+                        return step.error;
+                      }
+                    })()}
+                  </p>
+                </div>
+              )}
+
+              {/* Key Download Warning */}
+              {index === 0 &&
+                step.status === "completed" &&
+                !hasDownloadedKey && (
+                  <div class="mt-4 space-y-4">
+                    <div class="bg-yellow-50 dark:bg-yellow-900/50 p-4 rounded-lg border border-yellow-200 dark:border-yellow-800">
+                      <div class="flex items-start">
+                        <div class="flex-shrink-0">
+                          <svg
+                            class="h-5 w-5 text-yellow-400"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                          >
+                            <path
+                              fill-rule="evenodd"
+                              d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+                              clip-rule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                        <div class="ml-3">
+                          <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
+                            Critical Security Step
+                          </h3>
+                          <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
+                            <p class="mb-2">
+                              Your rotation key grants control over your
+                              identity:
+                            </p>
+                            <ul class="list-disc pl-5 space-y-2">
+                              <li>
+                                <strong>Store Securely:</strong> Use a password
+                                manager
+                              </li>
+                              <li>
+                                <strong>Keep Private:</strong> Never share with
+                                anyone
+                              </li>
+                              <li>
+                                <strong>Backup:</strong> Keep a secure backup
+                                copy
+                              </li>
+                              <li>
+                                <strong>Required:</strong> Needed for future DID
+                                modifications
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="flex items-center justify-between">
+                      <button
+                        onClick={handleDownload}
+                        class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors duration-200 flex items-center space-x-2"
+                      >
+                        <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                          />
+                        </svg>
+                        <span>Download Key</span>
+                      </button>
+
+                      <div class="flex items-center text-sm text-red-600 dark:text-red-400">
+                        <svg
+                          class="w-4 h-4 mr-1"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                          />
+                        </svg>
+                        Download required to proceed
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+              {/* Email Code Input */}
+              {index === 1 &&
+                (step.status === "in-progress" ||
+                  step.status === "verifying") &&
+                step.name ===
+                  "Enter the code sent to your email to complete PLC update" && (
+                  <div class="mt-4 space-y-4">
+                    <div class="bg-blue-50 dark:bg-blue-900/50 p-4 rounded-lg">
+                      <p class="text-sm text-blue-800 dark:text-blue-200 mb-3">
+                        Check your email for the verification code to complete
+                        the PLC update:
+                      </p>
+                      <div class="flex space-x-2">
+                        <div class="flex-1 relative">
+                          <input
+                            type="text"
+                            value={emailToken}
+                            onChange={(e) =>
+                              setEmailToken(e.currentTarget.value)
+                            }
+                            placeholder="Enter verification code"
+                            class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:focus:border-blue-400 dark:focus:ring-blue-400"
+                          />
+                        </div>
+                        <button
+                          type="button"
+                          onClick={handleTokenSubmit}
+                          disabled={!emailToken || step.status === "verifying"}
+                          class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-2"
+                        >
+                          <span>
+                            {step.status === "verifying"
+                              ? "Verifying..."
+                              : "Verify"}
+                          </span>
+                          <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                            />
+                          </svg>
+                        </button>
+                      </div>
+                      {step.error && (
+                        <div class="mt-2 p-2 bg-red-50 dark:bg-red-900/50 rounded-md">
+                          <p class="text-sm text-red-600 dark:text-red-400 flex items-center">
+                            <svg
+                              class="w-4 h-4 mr-1"
+                              fill="none"
+                              stroke="currentColor"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                              />
+                            </svg>
+                            {step.error}
+                          </p>
+                          {step.error
+                            .toLowerCase()
+                            .includes("token is invalid") && (
+                            <div class="mt-2">
+                              <p class="text-sm text-red-500 dark:text-red-300 mb-2">
+                                The verification code may have expired. Request
+                                a new code to try again.
+                              </p>
+                              <button
+                                onClick={requestNewToken}
+                                class="text-sm px-3 py-1 bg-red-100 hover:bg-red-200 dark:bg-red-800 dark:hover:bg-red-700 text-red-700 dark:text-red-200 rounded-md transition-colors duration-200 flex items-center space-x-1"
+                              >
+                                <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                                  />
+                                </svg>
+                                <span>Request New Code</span>
+                              </button>
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Success Message */}
+      {steps[2].status === "completed" && (
+        <div class="p-4 bg-green-50 dark:bg-green-900/50 rounded-lg border-2 border-green-200 dark:border-green-800">
+          <div class="flex items-center space-x-3 mb-4">
+            <svg
+              class="w-6 h-6 text-green-500"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <h4 class="text-lg font-medium text-green-800 dark:text-green-200">
+              PLC Update Successful!
+            </h4>
+          </div>
+          <p class="text-sm text-green-700 dark:text-green-300 mb-4">
+            Your rotation key has been successfully added to your PLC record.
+            You can now use this key for future DID modifications.
+          </p>
+          <div class="flex space-x-4">
+            <button
+              type="button"
+              onClick={async () => {
+                try {
+                  const response = await fetch("/api/logout", {
+                    method: "POST",
+                    credentials: "include",
+                  });
+                  if (!response.ok) {
+                    throw new Error("Logout failed");
+                  }
+                  globalThis.location.href = "/";
+                } catch (error) {
+                  console.error("Failed to logout:", error);
+                }
+              }}
+              class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors duration-200 flex items-center space-x-2"
+            >
+              <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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                />
+              </svg>
+              <span>Sign Out</span>
+            </button>
+            <a
+              href="https://ko-fi.com/knotbin"
+              target="_blank"
+              class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors duration-200 flex items-center space-x-2"
+            >
+              <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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+                />
+              </svg>
+              <span>Support Us</span>
+            </a>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

islands/Header.tsx

···
         setUser(
           userData
             ? {
-              did: userData.did,
-              handle: userData.handle,
-            }
-            : null,
+                did: userData.did,
+                handle: userData.handle,
+              }
+            : null
         );
       } catch (error) {
         console.error("Failed to fetch user:", error);
···
           />
 
           <div className="flex items-center gap-3">
+            {/* Ticket booth (did:plc update) */}
+            <Button
+              href="/ticket-booth"
+              color="amber"
+              icon="/icons/ticket_bold.svg"
+              iconAlt="Ticket"
+              label="TICKET BOOTH"
+            />
+
             {/* Departures (Migration) */}
             <Button
               href="/migrate"
···
                 <div className="relative">
                   <Button
                     color="amber"
-                    icon="/icons/ticket_bold.svg"
+                    icon="/icons/account.svg"
                     iconAlt="Check-in"
                     label="CHECKED IN"
                     onClick={() => setShowDropdown(!showDropdown)}
···
                 <Button
                   href="/login"
                   color="amber"
-                  icon="/icons/ticket_bold.svg"
+                  icon="/icons/account.svg"
                   iconAlt="Check-in"
                   label="CHECK-IN"
                 />

islands/Ticket.tsx

···
 import { useEffect, useState } from "preact/hooks";
 import { IS_BROWSER } from "fresh/runtime";
+import { Link } from "../components/Link.tsx";
 
 /**
  * The user interface for the ticket component.
···
         setUser(
           userData
             ? {
-              did: userData.did,
-              handle: userData.handle,
-            }
-            : null,
+                did: userData.did,
+                handle: userData.handle,
+              }
+            : null
         );
       } catch (error) {
         console.error("Failed to fetch user:", error);
···
         </p>
         <p>
           Think you might need to migrate in the future but your PDS might be
-          hostile or offline? No worries! Soon you'll be able to go to the
-          ticket booth and get a PLC key to use for account recovery in the
-          future. You can also go to baggage claim (take the air shuttle to
+          hostile or offline? No worries! You can go to the{" "}
+          <Link
+            href="/ticket-booth"
+            isExternal
+            class="text-blue-600 dark:text-blue-400"
+          >
+            ticket booth
+          </Link>{" "}
+          and get a PLC key to use for account recovery in the future. Soon
+          you'll also be able to go to baggage claim (take the air shuttle to
           terminal four) and get a downloadable backup of all your current PDS
           data in case that were to happen.
         </p>

lib/cred/sessions.ts

···
     }
     return migrationSessionOptions;
   }
-  
+
   if (!credentialSessionOptions) {
     credentialSessionOptions = await createSessionOptions("cred_sid");
   }
···
   isMigration: boolean = false
 ) {
   const options = await getOptions(isMigration);
-  return getIronSession<CredentialSession>(
-    req,
-    res,
-    options,
-  );
+  return getIronSession<CredentialSession>(req, res, options);
 }
 
 /**
···
 export async function getCredentialAgent(
   req: Request,
   res: Response = new Response(),
-  isMigration: boolean = false,
+  isMigration: boolean = false
 ) {
-  const session = await getCredentialSession(
-    req,
-    res,
-    isMigration
-  );
-  if (!session.did || !session.service || !session.handle || !session.password) {
+  const session = await getCredentialSession(req, res, isMigration);
+  if (
+    !session.did ||
+    !session.service ||
+    !session.handle ||
+    !session.password
+  ) {
     return null;
   }
 
···
   req: Request,
   res: Response,
   data: CredentialSession,
-  isMigration: boolean = false,
+  isMigration: boolean = false
 ) {
-  const session = await getCredentialSession(
-    req,
-    res,
-    isMigration
-  );
+  const session = await getCredentialSession(req, res, isMigration);
   session.did = data.did;
   session.handle = data.handle;
   session.service = data.service;
···
 export async function getCredentialSessionAgent(
   req: Request,
   res: Response = new Response(),
-  isMigration: boolean = false,
+  isMigration: boolean = false
 ) {
-  const session = await getCredentialSession(
-    req,
-    res,
-    isMigration
-  );
+  const session = await getCredentialSession(req, res, isMigration);
 
   console.log("Session state:", {
     hasDid: !!session.did,
···
     hasPassword: !!session.password,
     hasAccessJwt: !!session.accessJwt,
     service: session.service,
-    handle: session.handle
+    handle: session.handle,
   });
 
   if (
-    !session.did || !session.service || !session.handle || !session.password
+    !session.did ||
+    !session.service ||
+    !session.handle ||
+    !session.password
   ) {
     console.log("Missing required session fields");
     return null;
···
         const sessionInfo = await agent.com.atproto.server.getSession();
         console.log("Stored JWT is valid, session info:", {
           did: sessionInfo.data.did,
-          handle: sessionInfo.data.handle
+          handle: sessionInfo.data.handle,
         });
         return agent;
       } catch (err) {
···
       console.log("Session created successfully:", {
         did: sessionRes.data.did,
         handle: sessionRes.data.handle,
-        hasAccessJwt: !!sessionRes.data.accessJwt
+        hasAccessJwt: !!sessionRes.data.accessJwt,
       });
 
       // Store the new token

routes/api/plc/keys.ts

···
+import { Secp256k1Keypair } from "@atproto/crypto";
+import { getSessionAgent } from "../../../lib/sessions.ts";
+import { define } from "../../../utils.ts";
+import * as ui8 from "npm:uint8arrays";
+
+/**
+ * Generate and return PLC keys for the authenticated user
+ */
+export const handler = define.handlers({
+  async GET(ctx) {
+    const agent = await getSessionAgent(ctx.req);
+    if (!agent) {
+      return new Response("Unauthorized", { status: 401 });
+    }
+
+    // Create a new keypair
+    const keypair = await Secp256k1Keypair.create({ exportable: true });
+
+    // Export private key bytes
+    const privateKeyBytes = await keypair.export();
+    const privateKeyHex = ui8.toString(privateKeyBytes, "hex");
+
+    // Get public key as DID
+    const publicKeyDid = keypair.did();
+
+    // Convert private key to multikey format (base58btc)
+    const privateKeyMultikey = ui8.toString(privateKeyBytes, "base58btc");
+
+    // Return the key information
+    return new Response(
+      JSON.stringify({
+        keyType: "secp256k1",
+        publicKeyDid: publicKeyDid,
+        privateKeyHex: privateKeyHex,
+        privateKeyMultikey: privateKeyMultikey,
+      }),
+      {
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  },
+});

routes/api/plc/token.ts

···
+import { getSessionAgent } from "../../../lib/sessions.ts";
+import { setCredentialSession } from "../../../lib/cred/sessions.ts";
+import { Agent } from "@atproto/api";
+import { define } from "../../../utils.ts";
+
+/**
+ * Handle account creation
+ * First step of the migration process
+ * Body must contain:
+ * - service: The service URL of the new account
+ * - handle: The handle of the new account
+ * - password: The password of the new account
+ * - email: The email of the new account
+ * - invite: The invite code of the new account (optional depending on the PDS)
+ * @param ctx - The context object containing the request and response
+ * @returns A response object with the creation result
+ */
+export const handler = define.handlers({
+  async GET(ctx) {
+    const res = new Response();
+    try {
+      const agent = await getSessionAgent(ctx.req, res);
+
+      if (!agent) return new Response("Unauthorized", { status: 401 });
+
+      // console.log("getting did");
+      // const session = await agent.com.atproto.server.getSession();
+      // const accountDid = session.data.did;
+      // console.log("got did");
+
+      await agent.com.atproto.identity.requestPlcOperationSignature();
+
+      return new Response(
+        JSON.stringify({
+          success: true,
+          message:
+            "We've requested a token to update your identity, it should be sent to your account's email address.",
+        }),
+        {
+          status: 200,
+          headers: {
+            "Content-Type": "application/json",
+            ...Object.fromEntries(res.headers), // Include session cookie headers
+          },
+        }
+      );
+    } catch (error) {
+      console.error("PLC signature request error:", error);
+      return new Response(
+        JSON.stringify({
+          success: false,
+          message:
+            error instanceof Error
+              ? error.message
+              : "Failed to get PLC operation signature (sending confirmation email)",
+        }),
+        {
+          status: 400,
+          headers: { "Content-Type": "application/json" },
+        }
+      );
+    }
+  },
+});

routes/api/plc/update.ts

···
+import { getSessionAgent } from "../../../lib/sessions.ts";
+import { define } from "../../../utils.ts";
+import * as plc from "@did-plc/lib";
+
+/**
+ * Handle PLC update operation
+ * Body must contain:
+ * - key: The new rotation key to add
+ * - token: The email token received from requestPlcOperationSignature
+ * @param ctx - The context object containing the request and response
+ * @returns A response object with the update result
+ */
+export const handler = define.handlers({
+  async POST(ctx) {
+    const res = new Response();
+    try {
+      console.log("=== PLC Update Debug ===");
+      const body = await ctx.req.json();
+      const { key: newKey, token } = body;
+      console.log("Request body:", { newKey, hasToken: !!token });
+
+      if (!newKey) {
+        console.log("Missing key in request");
+        return new Response("Missing param key in request body", {
+          status: 400,
+        });
+      }
+
+      if (!token) {
+        console.log("Missing token in request");
+        return new Response("Missing param token in request body", {
+          status: 400,
+        });
+      }
+
+      const agent = await getSessionAgent(ctx.req, res);
+      if (!agent) {
+        console.log("No agent found");
+        return new Response("Unauthorized", { status: 401 });
+      }
+
+      const session = await agent.com.atproto.server.getSession();
+      const did = session.data.did;
+      if (!did) {
+        console.log("No DID found in session");
+        return new Response(
+          JSON.stringify({
+            success: false,
+            message: "No DID found in your session",
+          }),
+          {
+            status: 400,
+            headers: { "Content-Type": "application/json" },
+          }
+        );
+      }
+      console.log("Using agent DID:", did);
+
+      // Get recommended credentials first
+      console.log("Getting did:plc document...");
+      const plcClient = new plc.Client("https://plc.directory");
+      const didDoc = await plcClient.getDocumentData(did);
+      if (!didDoc) {
+        console.log("No DID document found for agent DID");
+        return new Response(
+          JSON.stringify({
+            success: false,
+            message: "No DID document found for your account",
+          }),
+          {
+            status: 400,
+            headers: { "Content-Type": "application/json" },
+          }
+        );
+      }
+      console.log("Got DID document:", didDoc);
+
+      const rotationKeys = didDoc.rotationKeys ?? [];
+      if (!rotationKeys.length) {
+        console.log("No existing rotation keys found");
+        throw new Error("No rotation keys provided in recommended credentials");
+      }
+
+      // Check if the key is already in rotation keys
+      if (rotationKeys.includes(newKey)) {
+        console.log("Key already exists in rotation keys");
+        return new Response(
+          JSON.stringify({
+            success: false,
+            message: "This key is already in your rotation keys",
+          }),
+          {
+            status: 400,
+            headers: { "Content-Type": "application/json" },
+          }
+        );
+      }
+
+      // Perform the actual PLC update with the provided token
+      console.log("Signing PLC operation...");
+      const plcOp = await agent.com.atproto.identity.signPlcOperation({
+        token,
+        rotationKeys: [newKey, ...rotationKeys],
+      });
+      console.log("PLC operation signed successfully:", plcOp.data);
+
+      console.log("Submitting PLC operation...");
+      const plcSubmit = await agent.com.atproto.identity.submitPlcOperation({
+        operation: plcOp.data.operation,
+      });
+      console.log("PLC operation submitted successfully:", plcSubmit);
+
+      return new Response(
+        JSON.stringify({
+          success: true,
+          message: "PLC update completed successfully",
+          did: plcOp.data,
+          newKey,
+          rotationKeys: [newKey, ...rotationKeys],
+        }),
+        {
+          status: 200,
+          headers: {
+            "Content-Type": "application/json",
+            ...Object.fromEntries(res.headers), // Include session cookie headers
+          },
+        }
+      );
+    } catch (error) {
+      console.error("PLC update error:", error);
+      const errorMessage =
+        error instanceof Error ? error.message : "Failed to update your PLC";
+      console.log("Sending error response:", errorMessage);
+
+      return new Response(
+        JSON.stringify({
+          success: false,
+          message: errorMessage,
+          error:
+            error instanceof Error
+              ? {
+                  name: error.name,
+                  message: error.message,
+                  stack: error.stack,
+                }
+              : String(error),
+        }),
+        {
+          status: 400,
+          headers: { "Content-Type": "application/json" },
+        }
+      );
+    }
+  },
+});

routes/api/plc/update/complete.ts

···
+import { Agent } from "@atproto/api";
+import { getSessionAgent } from "../../../../lib/sessions.ts";
+import { define } from "../../../../utils.ts";
+
+/**
+ * Complete PLC update using email token
+ */
+export const handler = define.handlers({
+  async POST(ctx) {
+    const res = new Response();
+    try {
+      const url = new URL(ctx.req.url);
+      const token = url.searchParams.get("token");
+
+      if (!token) {
+        return new Response(
+          JSON.stringify({
+            success: false,
+            message: "Missing token parameter",
+          }),
+          {
+            status: 400,
+            headers: { "Content-Type": "application/json" },
+          }
+        );
+      }
+
+      const agent = await getSessionAgent(ctx.req, res, true);
+      if (!agent) {
+        return new Response(
+          JSON.stringify({
+            success: false,
+            message: "Unauthorized",
+          }),
+          {
+            status: 401,
+            headers: { "Content-Type": "application/json" },
+          }
+        );
+      }
+
+      const did = agent.did;
+      if (!did) {
+        return new Response(
+          JSON.stringify({
+            success: false,
+            message: "No DID found in session",
+          }),
+          {
+            status: 400,
+            headers: { "Content-Type": "application/json" },
+          }
+        );
+      }
+
+      // Submit the PLC operation with the token
+      await agent!.com.atproto.identity.submitPlcOperation({
+        operation: { token: token },
+      });
+
+      return new Response(
+        JSON.stringify({
+          success: true,
+          message: "PLC update completed successfully",
+          did,
+        }),
+        {
+          status: 200,
+          headers: {
+            "Content-Type": "application/json",
+            ...Object.fromEntries(res.headers), // Include session cookie headers
+          },
+        }
+      );
+    } catch (error) {
+      console.error("PLC update completion error:", error);
+      const message =
+        error instanceof Error ? error.message : "Unknown error occurred";
+
+      return new Response(
+        JSON.stringify({
+          success: false,
+          message: `Failed to complete PLC update: ${message}`,
+        }),
+        {
+          status: 500,
+          headers: { "Content-Type": "application/json" },
+        }
+      );
+    }
+  },
+});

routes/api/plc/verify.ts

···
+import { getSessionAgent } from "../../../lib/sessions.ts";
+import { define } from "../../../utils.ts";
+import * as plc from "@did-plc/lib";
+
+/**
+ * Verify if a rotation key exists in the PLC document
+ * Body must contain:
+ * - key: The rotation key to verify
+ * @param ctx - The context object containing the request and response
+ * @returns A response object with the verification result
+ */
+export const handler = define.handlers({
+  async POST(ctx) {
+    const res = new Response();
+    try {
+      const body = await ctx.req.json();
+      const { key: newKey } = body;
+      console.log("Request body:", { newKey });
+
+      if (!newKey) {
+        console.log("Missing key in request");
+        return new Response("Missing param key in request body", {
+          status: 400,
+        });
+      }
+
+      const agent = await getSessionAgent(ctx.req, res);
+      if (!agent) {
+        console.log("No agent found");
+        return new Response("Unauthorized", { status: 401 });
+      }
+
+      const session = await agent.com.atproto.server.getSession();
+      const did = session.data.did;
+      if (!did) {
+        console.log("No DID found in session");
+        return new Response(
+          JSON.stringify({
+            success: false,
+            message: "No DID found in your session",
+          }),
+          {
+            status: 400,
+            headers: { "Content-Type": "application/json" },
+          }
+        );
+      }
+      console.log("Using agent DID:", did);
+
+      // Fetch the PLC document to check rotation keys
+      console.log("Getting did:plc document...");
+      const plcClient = new plc.Client("https://plc.directory");
+      const didDoc = await plcClient.getDocumentData(did);
+      if (!didDoc) {
+        console.log("No DID document found for agent DID");
+        return new Response(
+          JSON.stringify({
+            success: false,
+            message: "No DID document found for your account",
+          }),
+          {
+            status: 400,
+            headers: { "Content-Type": "application/json" },
+          }
+        );
+      }
+      console.log("Got DID document:", didDoc);
+
+      const rotationKeys = didDoc.rotationKeys ?? [];
+      if (!rotationKeys.length) {
+        console.log("No existing rotation keys found");
+        throw new Error("No rotation keys found in did:plc document");
+      }
+
+      // Check if the key exists in rotation keys
+      if (rotationKeys.includes(newKey)) {
+        return new Response(
+          JSON.stringify({
+            success: true,
+            message: "Rotation key exists in PLC document",
+          }),
+          {
+            status: 200,
+            headers: {
+              "Content-Type": "application/json",
+              ...Object.fromEntries(res.headers), // Include session cookie headers
+            },
+          }
+        );
+      }
+
+      // If we get here, the key was not found
+      return new Response(
+        JSON.stringify({
+          success: false,
+          message: "Rotation key not found in PLC document",
+        }),
+        {
+          status: 404,
+          headers: { "Content-Type": "application/json" },
+        }
+      );
+    } catch (error) {
+      console.error("PLC verification error:", error);
+      const errorMessage =
+        error instanceof Error
+          ? error.message
+          : "Failed to verify rotation key";
+      console.log("Sending error response:", errorMessage);
+
+      return new Response(
+        JSON.stringify({
+          success: false,
+          message: errorMessage,
+          error:
+            error instanceof Error
+              ? {
+                  name: error.name,
+                  message: error.message,
+                  stack: error.stack,
+                }
+              : String(error),
+        }),
+        {
+          status: 400,
+          headers: { "Content-Type": "application/json" },
+        }
+      );
+    }
+  },
+});

routes/ticket-booth/index.tsx

···
+import { PageProps } from "fresh";
+import MigrationSetup from "../../islands/MigrationSetup.tsx";
+import DidPlcProgress from "../../islands/DidPlcProgress.tsx";
+
+export default function TicketBooth(props: PageProps) {
+  const service = props.url.searchParams.get("service");
+  const handle = props.url.searchParams.get("handle");
+
+  return (
+    <div class=" bg-gray-50 dark:bg-gray-900 p-4">
+      <div class="max-w-2xl mx-auto">
+        <h1 class="font-mono text-3xl font-bold text-gray-900 dark:text-white mb-8">
+          Ticket Booth Self-Service Kiosk
+        </h1>
+        <DidPlcProgress />
+      </div>
+    </div>
+  );
+}

static/icons/account.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e3e3e3">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+  </svg>