{"keep your\nsecrets."}

master password

setPassword((event.target as HTMLInputElement).value)} onKeyDown={(event) => { if (event.key !== "Enter" || !props.ready) return; void handleCreate(); }} /> 0 && passwordStrength() !== null} fallback={

At least 12 characters.

} >

{passwordStrength()}

confirm password setConfirmPassword((event.target as HTMLInputElement).value)} onKeyDown={(event) => { if (event.key === "Enter" && props.ready) void handleCreate(); }} />

{error()}

Save your 12 recovery words after creating — they're the only way back in if you forget your password.

{"welcome\nback."}

{(entry) => ( )}

{RESTORE_SOURCES.find((entry) => entry.id === active)?.name}

props.onOpenCodexRestore?.()} />

0 }} onDragEnter={(e) => { e.preventDefault(); setDragDepth((d) => d + 1); }} onDragOver={(e) => e.preventDefault()} onDragLeave={() => setDragDepth((d) => Math.max(0, d - 1))} onDrop={(e) => void handleDrop(e)} >

setScriptInput((e.target as HTMLTextAreaElement).value)}
              />
              <div class="peach-restore-or" aria-hidden="true">or</div>
              <label
                class="peach-btn peach-btn--ghost peach-btn--sm peach-restore-file-btn"
                onClick={(e) => {
                  if (restoreDeepLinkActive(RESTORE_DEEP_LINKS.symbols)) return;
                  e.preventDefault();
                  void detachForFilePicker(RESTORE_DEEP_LINKS.symbols).then((detached) => {
                    if (!detached) peachFileRef?.click();
                  });
                }}
              >
                open .peach file
                <input
                  ref={(el) => { peachFileRef = el; }}
                  type="file"
                  accept=".peach,text/plain"
                  style="display:none"
                  onChange={async (e) => {
                    const file = (e.currentTarget as HTMLInputElement).files?.[0];
                    if (!file) return;
                    // PB-26-208: bound the file before file.text().
                    if (file.size > IMPORT_LIMITS.MAX_JSON_BYTES) {
                      setError("That file is too large.");
                      (e.currentTarget as HTMLInputElement).value = "";
                      return;
                    }
                    try {
                      setScriptInput(await file.text());
                    } catch {
                      setError("Couldn't read file.");
                    } finally {
                      (e.currentTarget as HTMLInputElement).value = "";
                    }
                  }}
                />
              </label>
              <p class="peach-restore-drop-hint">or drop the file anywhere here</p>
            </>
          }
        >
          <div class="peach-restore-rune-preview">
            <RuneCanvas runeString={scriptInput()} width={256} height={120} />
          </div>
          <button
            type="button"
            class="peach-restore-picker-back"
            onClick={() => { setScriptInput(""); setError(null); }}
          >
            ‹ paste again
          </button>
        </Show>
        <div class="peach-newvault-field">
          <label class="peach-label" for="restore-backup-pass">
            backup password
          </label>
          <input
            id="restore-backup-pass"
            class="peach-underline-input peach-newvault-input"
            type="password"
            placeholder="••••••••••••"
            autocomplete="current-password"
            value={backupPass()}
            onInput={(e) => setBackupPass((e.target as HTMLInputElement).value)}
            onKeyDown={(e) => {
              if (e.key === "Enter" && scriptValid() && backupPass().trim() && !working()) {
                e.preventDefault();
                void handleRestore();
              }
            }}
          />
        </div>
        <button
          class="peach-btn peach-btn--accent peach-btn--md peach-restore-submit"
          onClick={() => void handleRestore()}
          disabled={!scriptValid() || !backupPass().trim() || working()}
        >
          restore vault
        </button>
        <Show when={error()}>
          <p class="peach-hint peach-hint-error">{error()}</p>
        </Show>
      </Show>
    </div>
  );
}

// ── CSV source ─────────────────────────────────────────────────────────────

function RestoreCSV(props: {
  hasVault: boolean;
  onSuccess: () => void | Promise<void>;
}) {
  const [importing, setImporting] = createSignal(false);
  const [error, setError] = createSignal<string | null>(null);
  // CSV/JSON imports are plaintext and carry no password, so when there is no
  // vault yet the user MUST choose a master password here — otherwise the
  // imported credentials would be encrypted under an empty key and offer zero
  // at-rest protection (audit HIGH). Mirrors the onboarding MIN_LENGTH policy.
  const CSV_MIN_PASSWORD_LENGTH = 12;
  const [newPass, setNewPass] = createSignal("");
  const [confirmPass, setConfirmPass] = createSignal("");
  const needsPassword = () => props.hasVault === false;
  const passwordReady = () =>
    !needsPassword() ||
    (newPass().length >= CSV_MIN_PASSWORD_LENGTH && newPass() === confirmPass());
  // The action popup dies when the OS file picker steals focus — dropping the
  // file is the import path that survives it (see RestoreSymbols).
  const [dragDepth, setDragDepth] = createSignal(0);

// Every route here (label click, drop, the disabled-attribute-guarded
  // input change) passes gatePassword first, so the file is always accepted
  // under a real master password — never an empty key.
  async function processFile(file: File) {
    setImporting(true);
    setError(null);
    try {
      const text = await file.text();
      const parsed = await parseImportSource(text);
      if (parsed.entries.length === 0) throw new Error("NO_ENTRIES");

if (props.hasVault === false) {
        // Create the vault under the user-chosen master password — never an
        // empty one (an empty key derives a publicly-known vault key).
        const cr = await sendMessage({ type: "CREATE_VAULT", payload: { password: newPass() } });
        if (!(cr as { ok: boolean }).ok) throw new Error("CREATE_VAULT_FAILED");
      }

let csvFileRef: HTMLInputElement | undefined;

onMount(() => {
    // A fresh vault needs its master password before a file can be accepted —
    // auto-picking would only drop the chosen file at the password gate, so
    // the dialog waits for the explicit click in that case.
    if (restoreDeepLinkActive(RESTORE_DEEP_LINKS.csv) && !needsPassword()) {
      setTimeout(() => csvFileRef?.click(), 50);
    }
  });

async function handleFile(e: Event) {
    const input = e.currentTarget as HTMLInputElement;
    const file = input.files?.[0];
    input.value = "";
    if (!file) return;
    await processFile(file);
  }

async function handleDrop(e: DragEvent) {
    e.preventDefault();
    setDragDepth(0);
    if (!gatePassword()) return;
    const file = e.dataTransfer?.files?.[0];
    if (!file) return;
    await processFile(file);
  }

return (
    <div
      class="peach-restore-form"
      classList={{ "is-dragover": dragDepth() > 0 }}
      onDragEnter={(e) => { e.preventDefault(); setDragDepth((d) => d + 1); }}
      onDragOver={(e) => e.preventDefault()}
      onDragLeave={() => setDragDepth((d) => Math.max(0, d - 1))}
      onDrop={(e) => void handleDrop(e)}
    >
      <Show when={needsPassword()}>
        <div class="peach-newvault-field">
          <label class="peach-label" for="restore-csv-pass">
            new master password
          </label>
          <input
            id="restore-csv-pass"
            class="peach-underline-input peach-newvault-input"
            type="password"
            placeholder="••••••••••••"
            autocomplete="new-password"
            value={newPass()}
            onInput={(e) => setNewPass((e.target as HTMLInputElement).value)}
          />
        </div>
        <div class="peach-newvault-field">
          <label class="peach-label" for="restore-csv-confirm">
            confirm master password
          </label>
          <input
            id="restore-csv-confirm"
            class="peach-underline-input peach-newvault-input"
            type="password"
            placeholder="••••••••••••"
            autocomplete="new-password"
            value={confirmPass()}
            onInput={(e) => setConfirmPass((e.target as HTMLInputElement).value)}
          />
        </div>
      </Show>
      <label
        class="peach-btn peach-btn--accent peach-btn--md peach-restore-file-btn"
        onClick={(e) => {
          // In the detached window the dialog can open directly — let the
          // label's real user gesture activate the input. In the action
          // popup we must detach first (the dialog would dismiss the popup).
          if (restoreDeepLinkActive(RESTORE_DEEP_LINKS.csv)) return;
          // The label would forward the click to the input even before the
          // password gate passes; own the activation so the gate can speak.
          e.preventDefault();
          if (!gatePassword()) return;
          void detachForFilePicker(RESTORE_DEEP_LINKS.csv).then((detached) => {
            if (!detached) csvFileRef?.click();
          });
        }}
      >
        {importing() ? "importing…" : "open csv file"}
        <input
          ref={(el) => { csvFileRef = el; }}
          type="file"
          accept=".csv,.json,.peach,application/x-peach"
          style="display:none"
          onChange={handleFile}
          disabled={importing() || !passwordReady()}
        />
      </label>
      <p class="peach-restore-drop-hint">or drop the file anywhere here</p>
      <p class="peach-hint peach-restore-csv-sources">
        Imports from Bitwarden, 1Password, Proton Pass,
        <br />
        Chrome, Safari, and Edge.
      </p>
      <p class="peach-newvault-warning">
        <span class="peach-newvault-warning-icon" aria-hidden="true">⚠</span>
        <span>Plain-text file — delete it after the import.</span>
      </p>
      <Show when={error()}>
        <p class="peach-hint peach-hint-error">{error()}</p>
      </Show>
    </div>
  );
}

// ── Helpers ────────────────────────────────────────────────────────────────

function getDisplayError(error: string | undefined, fallback: string): string {
  if (!error) return fallback;
  if (
    error === "SERVICE_WORKER_UNAVAILABLE" ||
    error.includes("Receiving end does not exist") ||
    error.includes("message port closed")
  ) {
    return "background service unavailable";
  }
  // Never echo raw background errors — internal messages must not reach the UI.
  return fallback;
}

unlock your vault.

{"keep your\nsecrets."}

{"welcome\nback."}

{RESTORE_SOURCES.find((entry) => entry.id === active)?.name}

unlock
your vault.