sealkeep 0.5.0

package/web/setup.js

@@ -0,0 +1,697 @@
+/**
+ * Sealkeep first run.
+ *
+ * Five screens, in the order the decisions depend on each other: what this
+ * does, how archives are stored, where they go, the key, and what is now
+ * running. The vault is created on screen 4 and everything else is applied
+ * after it, which is what makes "stop once your key exists and you still have
+ * a working local-only vault" true rather than aspirational.
+ *
+ * The phrase lives in exactly one variable in this file and is written to at
+ * most one of two lists — the ceremony's, or the fold a password vault offers
+ * — and all of it is cleared the moment the last screen appears. It is never
+ * stored, never re-requested, and never put anywhere a URL, a log or a
+ * browser's session restore could reach. The password is never kept at all:
+ * it is read from its field, sent once, and the field is emptied.
+ */
+import * as api from "./setup-api.js";
+import {
+  buildStoragePayload, checkPhraseAnswers, doneHeadline, INTENTS, intentFor,
+  keyMode, needsBucket, ownProviders, passwordHint, passwordProblem,
+  phraseProblem, provider, summariseDone, validateStorage, verificationPositions
+} from "./setup-logic.js";
+
+const $ = (id) => document.getElementById(id);
+const TOTAL_STEPS = 5;
+
+/** Everything the wizard has been told, none of it secret. */
+const draft = {
+  /** Made once at creation. Only the literal "plain" changes anything. */
+  storageMode: "sealed",
+  providerId: "local",
+  /** The top-level answer. The provider is only a detail underneath one of them. */
+  intent: "local",
+  storage: {},
+  /** Held until the vault exists: linking needs somewhere to keep the token. */
+  enrollEmail: "",
+  enrollCode: "",
+  vault: null,
+  /** Which ceremony made the vault, so re-entering screen 4 redraws the right half. */
+  keyBranch: null,
+  createdAlready: false
+};
+
+/** The one secret this page ever holds. Cleared by `forgetPhrase()`. */
+let phraseWords = null;
+let verifyPositions = [];
+let confirmed = false;
+let step = 1;
+
+/* ── Chrome ──────────────────────────────────────────────────────────── */
+
+function setStatus(text, tone) {
+  const pill = $("connection");
+  pill.textContent = text;
+  pill.className = `pill ${tone ?? ""}`.trim();
+}
+
+function stepButtons() { return [...document.querySelectorAll("nav.steps .step")]; }
+
+function paintRail() {
+  for (const button of stepButtons()) {
+    const index = Number(button.dataset.step);
+    const done = index < step;
+    button.classList.toggle("current", index === step);
+    button.classList.toggle("done", done);
+    // Once the vault exists the earlier screens are history: their answers are
+    // already committed or about to be, and stepping back is a way to lose the
+    // phrase — the fold's copy of it included.
+    const reachable = done && !phraseWords && !(step === TOTAL_STEPS);
+    button.classList.toggle("locked", !reachable && index !== step);
+    button.disabled = !reachable;
+    if (index === step) button.setAttribute("aria-current", "step");
+    else button.removeAttribute("aria-current");
+    button.querySelector("span").textContent = done ? "✓" : String(index);
+  }
+}
+
+function show(next) {
+  step = next;
+  for (let index = 1; index <= TOTAL_STEPS; index += 1) $(`screen-${index}`).hidden = index !== next;
+  $("screen-unavailable").hidden = true;
+  $("screen-gate").hidden = true;
+  paintRail();
+  const heading = $(`screen-${next}`).querySelector("h1");
+  if (heading && typeof heading.focus === "function") { heading.tabIndex = -1; heading.focus(); }
+}
+
+/**
+ * Asks this browser for the token, rather than telling it to go and be a
+ * different browser.
+ *
+ * `sealkeep ui` signs in whichever browser it opened, by way of a fragment
+ * that lands in that browser's sessionStorage. Anyone who then types the
+ * address into a second one — a perfectly reasonable thing to do with a URL
+ * that is now stable and memorable — arrives with nothing, and the old advice
+ * was a terminal command that would have opened the first browser again.
+ */
+function showGate(message) {
+  for (let index = 1; index <= TOTAL_STEPS; index += 1) $(`screen-${index}`).hidden = true;
+  $("screen-unavailable").hidden = true;
+  $("screen-gate").hidden = false;
+  setError("gate-error", message ?? "");
+  for (const button of stepButtons()) { button.disabled = true; button.classList.add("locked"); }
+  setStatus("Not signed in", "warn");
+  $("gate-token").focus();
+}
+
+function showUnavailable(message) {
+  for (let index = 1; index <= TOTAL_STEPS; index += 1) $(`screen-${index}`).hidden = true;
+  $("screen-gate").hidden = true;
+  $("screen-unavailable").hidden = false;
+  $("unavailable-detail").textContent = message;
+  for (const button of stepButtons()) { button.disabled = true; button.classList.add("locked"); }
+  setStatus("Setup unavailable", "warn");
+}
+
+const el = (tag, className, text) => {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text !== undefined) node.textContent = text;
+  return node;
+};
+
+const badgeNode = (badge) => el("span", `badge badge-${badge.kind}`, badge.text);
+
+function setError(id, message) {
+  const node = $(id);
+  node.textContent = message ?? "";
+  node.hidden = !message;
+}
+
+/* ── 2 · How archives are stored ─────────────────────────────────────── */
+
+// The radios are static markup — two fixed answers need no renderer — so the
+// only work is keeping the draft honest about which one is pressed.
+for (const radio of document.querySelectorAll('#mode-choices input[name="storageMode"]')) {
+  radio.onchange = () => { if (radio.checked) draft.storageMode = radio.value === "plain" ? "plain" : "sealed"; };
+}
+
+/* ── 3 · Storage ─────────────────────────────────────────────────────── */
+
+/** The decision: three answers, no vendors. */
+function renderProviders() {
+  const choices = $("provider-choices");
+  choices.replaceChildren(choices.querySelector("legend") ?? el("legend", "sr-only", "Where archives go"));
+
+  for (const entry of INTENTS) {
+    const card = el("label", "choice");
+    const radio = document.createElement("input");
+    radio.type = "radio";
+    radio.name = "intent";
+    radio.value = entry.id;
+    radio.id = `i-${entry.id}`;
+    radio.checked = entry.id === draft.intent;
+    radio.onchange = () => {
+      draft.intent = entry.id;
+      // Each answer carries its own default provider. Choosing "my own bucket"
+      // does not choose a vendor, so the sub-list below opens unanswered rather
+      // than silently picking one on the person's behalf.
+      draft.providerId = entry.id === "own" ? (intentFor(draft.providerId) === "own" ? draft.providerId : "") : entry.id;
+      renderProviders();
+      renderOwnProviders();
+      renderProviderFields();
+    };
+
+    const body = el("div", "choice-body");
+    body.append(el("b", null, entry.label), el("p", "note", entry.blurb), el("p", "note", entry.detail));
+    card.append(radio, body);
+    choices.append(card);
+  }
+}
+
+/** The detail: which bucket, shown only to someone who asked for one. */
+function renderOwnProviders() {
+  const holder = $("own-providers");
+  holder.hidden = draft.intent !== "own";
+  holder.replaceChildren();
+  if (holder.hidden) return;
+
+  holder.append(el("p", "note", "Which one is yours?"));
+  for (const entry of ownProviders()) {
+    const card = el("label", "choice");
+    const radio = document.createElement("input");
+    radio.type = "radio";
+    radio.name = "provider";
+    radio.value = entry.id;
+    radio.id = `p-${entry.id}`;
+    radio.checked = entry.id === draft.providerId;
+    radio.onchange = () => { draft.providerId = entry.id; renderOwnProviders(); renderProviderFields(); };
+
+    const body = el("div", "choice-body");
+    body.append(el("b", null, entry.label), el("p", "note", entry.blurb));
+    card.append(radio, body);
+    holder.append(card);
+  }
+}
+
+function renderProviderFields() {
+  const form = $("storage-form");
+  // Managed storage is remote and has no form: the bucket is ours to provision.
+  // Neither has "my own bucket" until a vendor is named — the fields differ per
+  // provider, so there is nothing truthful to draw yet.
+  form.hidden = !needsBucket(draft.providerId) || !provider(draft.providerId);
+  // The account panel is the managed equivalent of the credentials form — the
+  // one thing that choice does need from the person.
+  $("account-panel").hidden = draft.intent !== "managed";
+  setError("storage-error", "");
+  setError("e-bucket", "");
+  setError("e-prefix", "");
+  if (form.hidden) return;
+
+  const entry = provider(draft.providerId);
+  $("storage-form-title").textContent = `${entry.label} — bucket and credentials`;
+
+  const holder = $("provider-fields");
+  holder.replaceChildren();
+  for (const field of entry.fields) {
+    const wrap = el("div", "field");
+    const label = el("label", null, field.label);
+    label.htmlFor = `f-${field.name}`;
+
+    const input = document.createElement(field.multiline ? "textarea" : "input");
+    input.id = `f-${field.name}`;
+    input.name = field.name;
+    if (!field.multiline) input.type = field.secret ? "password" : "text";
+    else input.rows = 4;
+    input.placeholder = field.placeholder ?? "";
+    input.autocomplete = "off";
+    input.spellcheck = false;
+    input.value = draft.storage[field.name] ?? "";
+    input.oninput = () => { draft.storage[field.name] = input.value; };
+
+    wrap.append(label, input);
+    if (field.hint) wrap.append(el("p", "note", field.hint));
+    wrap.append(Object.assign(el("p", "note error"), { id: `e-${field.name}`, hidden: true }));
+    holder.append(wrap);
+  }
+}
+
+/** Reads the two fixed fields, then the provider's own. Returns false and paints the problems. */
+function collectStorage() {
+  draft.storage.bucket = $("f-bucket").value;
+  draft.storage.prefix = $("f-prefix").value;
+  const { ok, errors } = validateStorage(draft.providerId, draft.storage);
+
+  for (const field of ["bucket", "prefix", ...provider(draft.providerId).fields.map((entry) => entry.name)]) {
+    const node = $(`e-${field}`);
+    if (!node) continue;
+    node.textContent = errors[field] ?? "";
+    node.hidden = !errors[field];
+  }
+  setError("storage-error", ok ? "" : "Fix the fields marked above, or choose to keep archives on this disk for now.");
+  return ok;
+}
+
+/**
+ * Links this machine to an account someone already has.
+ *
+ * A code, not a password and not a recovery phrase: it grants quota, storage
+ * and settings, never the ability to open an archive. That distinction is what
+ * lets a returning user finish here instead of in a terminal without weakening
+ * the rule that no endpoint accepts a phrase.
+ */
+$("enroll-go").onclick = () => {
+  const email = $("f-enroll-email").value.trim();
+  const code = $("f-enroll-code").value.trim();
+  // Both, because the exchange needs the pair — the panel hands them over
+  // together, in the command it prints beside the code.
+  const missing = !email ? "Enter the email your account uses." : !code ? "Press “Show a pairing code” on your account page, then paste it here." : "";
+  setError("e-enroll-code", missing);
+  if (missing) return;
+
+  // Held, not sent. Linking stores a token, and there is nowhere to keep it
+  // until the vault exists — which happens at step 4, after this. The code is
+  // single use, so spending it here would burn it on a machine that could not
+  // have kept the result.
+  draft.enrollEmail = email;
+  draft.enrollCode = code;
+  // Not "Saved" — nothing has been checked yet. The pairing code is single-use
+  // and is only sent when the vault is created, so a wrong or expired one shows
+  // up on the last screen (where the account row now reports it), not here.
+  $("enroll-result").textContent = "Got it — this machine links to your account when the vault is created at the end. If the code is wrong, you'll see it on the last screen.";
+};
+
+/**
+ * Proves the bucket works before anyone trusts an archive to it.
+ *
+ * Nothing is saved by this: the credential is sent, used for one small write
+ * and read, and dropped. That is deliberate — a test that stored the target
+ * would leave a broken configuration behind on the attempt that proved it
+ * broken.
+ */
+$("storage-test").onclick = async () => {
+  const result = $("storage-test-result");
+  if (!collectStorage()) { result.textContent = ""; return; }
+
+  $("storage-test").disabled = true;
+  result.className = "note";
+  result.textContent = "Writing a small file, then reading it back…";
+  try {
+    const outcome = await api.testStorage({ ...buildStoragePayload(draft.providerId, draft.storage), confirm: true });
+    result.className = outcome.ok ? "note" : "note error";
+    result.textContent = outcome.detail;
+  } catch (error) {
+    result.className = "note error";
+    result.textContent = error.message;
+  } finally {
+    $("storage-test").disabled = false;
+  }
+};
+
+/* ── 4 · Your key ────────────────────────────────────────────────────── */
+
+/**
+ * Which half of the key screen is on show.
+ *
+ * Before the vault exists the destination decides the ceremony; after it
+ * exists the ceremony that ran decides, because the intent radio could in
+ * principle change while the created vault cannot. An existing vault outranks
+ * both: it gets neither a second phrase nor a password form this page has no
+ * endpoint to honour.
+ */
+function armKeyScreen() {
+  const made = Boolean(phraseWords);
+  const branch = draft.createdAlready ? "existing" : made ? draft.keyBranch : keyMode(draft.intent);
+  $("phrase-existing").hidden = branch !== "existing";
+  $("phrase-before").hidden = branch !== "phrase" || made;
+  $("phrase-after").hidden = branch !== "phrase" || !made;
+  $("password-before").hidden = branch !== "password" || made;
+  $("password-after").hidden = branch !== "password" || !made;
+}
+
+/** The browser's own "leave site?" prompt, armed only while an unconfirmed phrase is on screen. */
+const guardUnload = (event) => { event.preventDefault(); event.returnValue = ""; return ""; };
+
+function armUnloadGuard() { if (typeof addEventListener === "function") addEventListener("beforeunload", guardUnload); }
+function disarmUnloadGuard() { if (typeof removeEventListener === "function") removeEventListener("beforeunload", guardUnload); }
+
+/** One renderer for both places the words may appear, so neither can drift. */
+function wordList(target, words) {
+  target.replaceChildren();
+  for (const [index, word] of words.entries()) {
+    const item = el("li", "word");
+    item.append(el("span", "ord", String(index + 1)), el("b", null, word));
+    target.append(item);
+  }
+  // Counted from the phrase in hand, never written as a literal — the same
+  // rule as the lede below, and for the same reason.
+  target.setAttribute("aria-label", `Your ${words.length}-word recovery phrase`);
+}
+
+function renderPhrase(words) {
+  wordList($("phrase-words"), words);
+
+  verifyPositions = verificationPositions(words.length);
+  const fields = $("verify-fields");
+  fields.replaceChildren();
+  for (const position of verifyPositions) {
+    const wrap = el("div", "field");
+    const label = el("label", null, `Word ${position}`);
+    label.htmlFor = `v-${position}`;
+    const input = document.createElement("input");
+    input.type = "text";
+    input.id = `v-${position}`;
+    input.autocomplete = "off";
+    input.spellcheck = false;
+    input.oninput = gatePhrase;
+    wrap.append(label, input);
+    fields.append(wrap);
+  }
+
+  armKeyScreen();
+  // Counted from the phrase in hand, never written as a literal. The wizard
+  // said "17 words" for a day after the phrase became 24, so a person was told
+  // to write down seventeen while twenty-four sat on the screen — at the exact
+  // moment they had been told there is no reset and no support ticket. A number
+  // that can disagree with the thing it describes should not be typed twice.
+  $("phrase-lede").textContent = `These ${words.length} words are the only key to everything Sealkeep will seal here. Write them down now — this page will not show them twice.`;
+  armUnloadGuard();
+  paintRail();
+}
+
+/**
+ * The fold's version of the words: offered, not imposed, and never guarded.
+ *
+ * No unload guard here, deliberately — the password already opens this vault,
+ * so leaving without the words costs a fallback, not the archives, and a
+ * browser prompt insisting otherwise would be a lie.
+ */
+function renderFold(words) {
+  wordList($("fold-phrase-words"), words);
+  $("fold-note").textContent = `These ${words.length} words also open the vault — write them down or skip. Skipping is fine: your password already opens it on this machine. The words are the only key that works anywhere else, and this is the only time they are shown.`;
+  armKeyScreen();
+  paintRail();
+}
+
+/** Continue stays shut until the words are transcribed and the sentence is ticked. */
+function gatePhrase() {
+  const answers = verifyPositions.map((position) => $(`v-${position}`).value);
+  const typed = answers.some((value) => value.trim().length > 0);
+  const check = checkPhraseAnswers(phraseWords ?? [], verifyPositions, answers);
+  confirmed = check.ok && $("f-understood").checked;
+
+  setError("verify-error", typed && !check.ok ? phraseProblem(check.wrong) : "");
+  $("confirm-note").textContent = confirmed
+    ? "Ready. Finishing clears these words from the page for good."
+    : check.ok
+      ? "The words match. Tick the box below and you are through."
+      : "Continue unlocks once both of those are true.";
+  $("finish").disabled = !confirmed;
+}
+
+/** After this returns, the phrase does not exist anywhere in this page. */
+function forgetPhrase() {
+  phraseWords = null;
+  verifyPositions = [];
+  $("phrase-words").replaceChildren();
+  $("fold-phrase-words").replaceChildren();
+  $("fold-note").textContent = "";
+  $("verify-fields").replaceChildren();
+  disarmUnloadGuard();
+}
+
+/* ── Committing ──────────────────────────────────────────────────────── */
+
+async function createVault({ password } = {}) {
+  const errorId = password === undefined ? "vault-error" : "password-error";
+  const buttons = [$("generate"), $("create-with-password")];
+  setError(errorId, "");
+  for (const button of buttons) button.disabled = true;
+  setStatus("Creating the vault", "busy");
+  try {
+    const created = await api.createVault({ password, storageMode: draft.storageMode });
+    // `recoveryPhrase` is the server's field name. This line once read a
+    // shorter field of the stub's invention, which did not exist on the wire —
+    // so the vault was created, the words came back, and the one showing of
+    // the phrase silently never happened, while the error path promised a
+    // reload would mint a fresh vault that the existing one made impossible.
+    // The shape is pinned by test now; do not "tolerate" both names — one
+    // canonical field, and a loud failure if it ever moves.
+    const words = String(created.recoveryPhrase ?? "").trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0) {
+      // Two different disasters, two different truths. If the server confirmed
+      // a vault, it exists and its phrase can never be fetched again — saying
+      // "reload for a fresh phrase" would be false and costly. Only when
+      // nothing was created is starting over a real remedy.
+      throw new Error(created.vaultId
+        ? "The vault was created, but Sealkeep could not display its recovery phrase — and it can never be shown again. Do not use this vault: nothing has been sealed in it, so delete the vault folder on this machine and run setup again for a fresh vault and a fresh phrase."
+        : "Sealkeep could not create the vault, so nothing exists yet and nothing is lost. Reload this page and try again.");
+    }
+    draft.vault = { dataDir: created.dataDir, vaultId: created.vaultId };
+    draft.keyBranch = password === undefined ? "phrase" : "password";
+    phraseWords = words;
+    if (draft.keyBranch === "phrase") {
+      renderPhrase(words);
+      setStatus("Vault created — write the phrase down", "ok");
+    } else {
+      // The password did its one job; keeping it in a field is keeping a
+      // secret in a place session restore can resurrect.
+      $("f-password").value = "";
+      $("f-password-again").value = "";
+      renderFold(words);
+      setStatus("Vault created — it opens with your password", "ok");
+    }
+  } catch (error) {
+    for (const button of buttons) button.disabled = false;
+    setError(errorId, error.message);
+    // Neutral on purpose: one of the two failure branches above happens after
+    // the vault exists, and a pill insisting "not created" there was a lie.
+    setStatus("Setup could not finish this step", "warn");
+  }
+}
+
+/**
+ * Everything after the vault, in dependency order, each failure survivable.
+ *
+ * A bucket that will not answer must not undo the vault — so nothing here
+ * throws out of the function; it all lands on the last screen as a row that
+ * says what is true.
+ */
+async function commitRest() {
+  const result = {
+    vault: draft.vault ?? {},
+    // Unknown for a vault made before this page ran: guessing a mode on the
+    // summary would be inventing history.
+    storageMode: draft.createdAlready ? null : draft.storageMode,
+    password: null,
+    storage: null,
+    service: null
+  };
+
+  // Enrolment first, because it is what tells this machine it has managed
+  // storage at all: the account's own settings arrive with it.
+  if (draft.enrollCode) {
+    try {
+      const enrolled = await api.enrollDevice(draft.enrollEmail, draft.enrollCode);
+      result.account = { plan: enrolled.account?.plan ?? "unknown", deviceId: enrolled.deviceId };
+    } catch (error) {
+      result.account = { error: error.message };
+    }
+  }
+
+  if (needsBucket(draft.providerId)) {
+    const payload = buildStoragePayload(draft.providerId, draft.storage);
+    try {
+      const saved = await api.saveStorage(payload);
+      result.storage = { provider: payload.provider, bucket: payload.bucket, prefix: payload.prefix, verified: saved.verified !== false };
+    } catch (error) {
+      result.storage = { provider: payload.provider, bucket: payload.bucket, prefix: payload.prefix, error: error.message };
+    }
+  }
+
+  // Asked, not assumed: the server refuses to fail the create over a lock it
+  // could not write, so whether the password really took is only knowable by
+  // asking the machine afterwards.
+  if (draft.keyBranch === "password") {
+    try {
+      const check = await api.fetchUnlockCheck();
+      result.password = { locked: check.passwordLock === true };
+    } catch {
+      result.password = { locked: null };
+    }
+  }
+
+  try {
+    const service = await api.startService();
+    result.service = { running: service.running !== false, detail: service.detail };
+  } catch (error) {
+    result.service = { running: false, error: error.message };
+  }
+  return result;
+}
+
+function renderDone(result) {
+  const rows = summariseDone(result);
+  const headline = doneHeadline(rows);
+  $("done-headline").textContent = headline;
+  const list = $("done-list");
+  list.replaceChildren();
+  for (const row of rows) {
+    const line = el("div", "done-row");
+    const head = el("div", "agent-head");
+    head.append(el("b", null, row.label), badgeNode(row.badge));
+    line.append(head, el("p", "note", row.detail));
+    list.append(line);
+  }
+  const offMachine = (result.storage && !result.storage.error) || (result.account && !result.account.error);
+  $("next-detail").textContent = offMachine
+    ? "Nothing else is needed. The next time one of your agents finishes a session, the transcript is queued here, archived, and copied to your storage. It shows up on the dashboard within a few minutes."
+    : "Nothing else is needed. The next time one of your agents finishes a session, the transcript is queued here and archived onto this disk. It shows up on the dashboard within a few minutes.";
+  // A password vault may have skipped the words, and that was allowed out
+  // loud — so the advice bends rather than scolding.
+  $("today-key").textContent = result.password
+    ? "If you kept the recovery phrase, put it somewhere you will still have it in a year — a drawer beats a laptop."
+    : "Check that your recovery phrase is somewhere you will still have it in a year — a drawer beats a laptop.";
+  return headline;
+}
+
+async function finish() {
+  for (const id of ["finish", "finish-existing", "finish-password"]) {
+    const button = $(id);
+    if (button) button.disabled = true;
+  }
+  setStatus("Finishing setup", "busy");
+  // The phrase goes before the network does: whatever happens to the bucket or
+  // the service, it is already out of this page and cannot be shown again.
+  forgetPhrase();
+  const result = await commitRest();
+  const headline = renderDone(result);
+  show(5);
+  setStatus(headline === "Sealkeep is running" ? "Done" : "Done, with something left to look at", "ok");
+}
+
+/* ── Navigation ──────────────────────────────────────────────────────── */
+
+function go(next) {
+  // Leaving the storage step: an unanswered sub-choice is its own error, and a
+  // named provider still has to have its fields filled in.
+  if (next === 4 && step === 3) {
+    if (draft.intent === "own" && !provider(draft.providerId)) {
+      setError("storage-error", "Choose which bucket is yours, or pick one of the other two answers above.");
+      return;
+    }
+    if (needsBucket(draft.providerId) && !collectStorage()) return;
+  }
+  if (next === 4) armKeyScreen();
+  show(next);
+}
+
+for (const button of document.querySelectorAll("[data-go]")) {
+  button.onclick = () => go(Number(button.dataset.go));
+}
+for (const button of stepButtons()) {
+  button.onclick = () => { if (!button.disabled) go(Number(button.dataset.step)); };
+}
+
+$("generate").onclick = () => void createVault();
+$("f-understood").onchange = gatePhrase;
+$("confirm-form").onsubmit = (event) => { event.preventDefault(); if (confirmed) void finish(); };
+$("finish-existing").onclick = () => void finish();
+$("finish-password").onclick = () => void finish();
+
+// The password is judged as it is typed — by length, the one property the
+// hint admits to caring about — and judged again on submit, so the create
+// request only ever carries a password the schema will accept.
+$("f-password").oninput = () => {
+  $("password-hint").textContent = passwordHint($("f-password").value.length);
+  setError("password-error", "");
+};
+$("f-password-again").oninput = () => setError("password-error", "");
+$("password-form").onsubmit = (event) => {
+  event.preventDefault();
+  const password = $("f-password").value;
+  const problem = passwordProblem(password, $("f-password-again").value);
+  setError("password-error", problem);
+  if (problem) return;
+  void createVault({ password });
+};
+
+$("copy-phrase").onclick = async () => {
+  if (!phraseWords) return;
+  try {
+    await navigator.clipboard.writeText(phraseWords.join(" "));
+    $("copy-note").textContent = "Copied. A clipboard is not private and outlives this page — paste it, then copy something else.";
+  } catch {
+    $("copy-note").textContent = "This browser would not give the page your clipboard. Select the words above and copy them yourself.";
+  }
+};
+$("print-phrase").onclick = () => { if (typeof print === "function") print(); };
+
+/* ── Boot ────────────────────────────────────────────────────────────── */
+
+async function boot() {
+  api.readTokenFromLocation();
+  // Nothing works without it, so ask for it up front rather than letting every
+  // panel fail separately and leaving the reader to assemble the reason.
+  if (!api.hasToken()) { showGate(); return; }
+  try {
+    const state = await api.fetchState();
+    draft.createdAlready = Boolean(state.vault?.created);
+    if (draft.createdAlready) {
+      // The mode chooser collects an answer creation would use, and there is
+      // no creation left to use it: swap it for the truth.
+      $("mode-choices").hidden = true;
+      $("mode-existing").hidden = false;
+      $("existing-detail").textContent = state.vault?.createdAt
+        ? `It was created on ${new Date(state.vault.createdAt).toLocaleDateString()}, and its recovery phrase was shown once at that moment.`
+        : "It was created earlier, and its recovery phrase was shown once at that moment.";
+      draft.vault = { dataDir: state.vault?.dataDir };
+    }
+    if (state.storage?.configured) {
+      draft.providerId = state.storage.provider ?? draft.providerId;
+      // Resumed as the answer it belongs to, or the screen shows "keep it
+      // here" ticked above a fully drawn R2 form.
+      draft.intent = intentFor(draft.providerId);
+      draft.storage.bucket = state.storage.bucket ?? "";
+      draft.storage.prefix = state.storage.prefix ?? "vaultline";
+    }
+  } catch (error) {
+    if (error.missing) {
+      showUnavailable(`Sealkeep answered on this machine, but it has no ${error.route} endpoint. This build predates the setup wizard.`);
+      return;
+    }
+    setStatus(error.message, "warn");
+  }
+
+  renderProviders();
+  renderOwnProviders();
+  renderProviderFields();
+  if ($("f-bucket").value === "") $("f-bucket").value = draft.storage.bucket ?? "";
+  show(1);
+  setStatus("Connected to this machine", "ok");
+}
+
+/**
+ * A pasted token is tried before it is trusted: a wrong one that merely got
+ * stored would put someone back on step 1 with every panel empty and no reason
+ * given, which is the failure this screen exists to end.
+ */
+$("gate-form").addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const value = $("gate-token").value.trim();
+  if (!value) { setError("gate-error", "Paste the token from the file named above."); return; }
+
+  api.setToken(value);
+  try {
+    await api.fetchState();
+  } catch (error) {
+    api.setToken("");
+    setError("gate-error", error.message.includes("not signed in") ? "That token was not accepted." : error.message);
+    return;
+  }
+  $("gate-token").value = "";
+  await boot();
+});
+
+void boot();