diff --git a/.github/workflows/e2e-test.yml b/.github/workflows/e2e-test.yml
index c3f6bc753..fd9954685 100644
--- a/.github/workflows/e2e-test.yml
+++ b/.github/workflows/e2e-test.yml
@@ -6,6 +6,7 @@ on:
 jobs:
   test:
     strategy:
+      fail-fast: false
       matrix:
         include:
           # Chrome 84.0 is the oldest version available on selenium/standalone-xxx.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d04c9aa30..44fff4221 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,17 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 
 ## [Unreleased]
 
+## [0.16.0] - 2023-01-14
+### Changed
+- Clear input files and text after sent
+- Make Piping UI Auth use detectable for normal receiver in the future
+- Save as input file name in passwordless protection
+- Improve progress bar when viewing in passwordless protection
+
+## Added
+- Show progress bar when downloading in passwordless protection
+- Show update-app button when key exchange version is out-of-date
+
 ## [0.15.0] - 2023-01-07
 ### Added
 - Add info tooltips to "Passwordless", "Verify and Send" and "Password" switches
@@ -454,7 +465,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 ### Added
 - First release
 
-[Unreleased]: https://github.com/nwtgck/piping-ui-web/compare/v0.15.0...HEAD
+[Unreleased]: https://github.com/nwtgck/piping-ui-web/compare/v0.16.0...HEAD
+[0.16.0]: https://github.com/nwtgck/piping-ui-web/compare/v0.15.0...v0.16.0
 [0.15.0]: https://github.com/nwtgck/piping-ui-web/compare/v0.14.0...v0.15.0
 [0.14.0]: https://github.com/nwtgck/piping-ui-web/compare/v0.13.0...v0.14.0
 [0.13.0]: https://github.com/nwtgck/piping-ui-web/compare/v0.12.1...v0.13.0
diff --git a/e2e-test/package-lock.json b/e2e-test/package-lock.json
index 251a80b33..e1b46c2f7 100644
--- a/e2e-test/package-lock.json
+++ b/e2e-test/package-lock.json
@@ -14,7 +14,7 @@
         "selenium-webdriver": "^4.7.1",
         "ts-node": "^10.9.1",
         "typescript": "^4.8.3",
-        "undici": "^5.14.0"
+        "undici": "^5.15.0"
       }
     },
     "node_modules/@cspotcode/source-map-support": {
@@ -1506,9 +1506,9 @@
       }
     },
     "node_modules/undici": {
-      "version": "5.14.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.14.0.tgz",
-      "integrity": "sha512-yJlHYw6yXPPsuOH0x2Ib1Km61vu4hLiRRQoafs+WUgX1vO64vgnxiCEN9dpIrhZyHFsai3F0AEj4P9zy19enEQ==",
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.15.0.tgz",
+      "integrity": "sha512-wCAZJDyjw9Myv+Ay62LAoB+hZLPW9SmKbQkbHIhMw/acKSlpn7WohdMUc/Vd4j1iSMBO0hWwU8mjB7a5p5bl8g==",
       "dev": true,
       "dependencies": {
         "busboy": "^1.6.0"
@@ -2835,9 +2835,9 @@
       "dev": true
     },
     "undici": {
-      "version": "5.14.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.14.0.tgz",
-      "integrity": "sha512-yJlHYw6yXPPsuOH0x2Ib1Km61vu4hLiRRQoafs+WUgX1vO64vgnxiCEN9dpIrhZyHFsai3F0AEj4P9zy19enEQ==",
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.15.0.tgz",
+      "integrity": "sha512-wCAZJDyjw9Myv+Ay62LAoB+hZLPW9SmKbQkbHIhMw/acKSlpn7WohdMUc/Vd4j1iSMBO0hWwU8mjB7a5p5bl8g==",
       "dev": true,
       "requires": {
         "busboy": "^1.6.0"
diff --git a/e2e-test/package.json b/e2e-test/package.json
index fc1fd3627..a8d6b7c12 100644
--- a/e2e-test/package.json
+++ b/e2e-test/package.json
@@ -12,6 +12,6 @@
     "selenium-webdriver": "^4.7.1",
     "ts-node": "^10.9.1",
     "typescript": "^4.8.3",
-    "undici": "^5.14.0"
+    "undici": "^5.15.0"
   }
 }
diff --git a/e2e-test/src/index.test.ts b/e2e-test/src/index.test.ts
index 5530a94ca..ff4636a49 100644
--- a/e2e-test/src/index.test.ts
+++ b/e2e-test/src/index.test.ts
@@ -262,7 +262,7 @@ describe('Piping UI', () => {
     const finishRetryDownload = receiverActions.retryDownloadButtonIfNeed();
     defer(() => finishRetryDownload());
 
-    const downloadedFilePath = path.join(downloadPath, secretPath);
+    const downloadedFilePath = path.join(downloadPath, "mydata.dat");
     await waitForDownload(downloadedFilePath);
     const downloadedFileContent = fs.readFileSync(downloadedFilePath);
 
diff --git a/package-lock.json b/package-lock.json
index f898f3569..01f9a61e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "piping-ui",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "piping-ui",
-      "version": "0.15.0",
+      "version": "0.16.0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -20,8 +20,6 @@
         "file-saver": "^2.0.5",
         "file-type": "^16.5.3",
         "filepond": "^4.30.4",
-        "fp-ts": "^2.12.3",
-        "io-ts": "^2.2.18",
         "jszip": "^3.10.1",
         "jwk-thumbprint": "^0.1.4",
         "linkify-string": "^4.0.2",
@@ -33,7 +31,8 @@
         "url-join": "^4.0.1",
         "vue": "^2.7.10",
         "vue-filepond": "^6.0.3",
-        "vuetify": "^2.6.10"
+        "vuetify": "^2.6.14",
+        "zod": "^3.20.2"
       },
       "devDependencies": {
         "@mdi/js": "^7.0.96",
@@ -46,8 +45,8 @@
         "@types/sanitize-html": "^2.6.2",
         "@types/smoothscroll-polyfill": "^0.3.1",
         "@types/url-join": "^4.0.0",
-        "@typescript-eslint/eslint-plugin": "^5.48.0",
-        "@typescript-eslint/parser": "^5.48.0",
+        "@typescript-eslint/eslint-plugin": "^5.48.1",
+        "@typescript-eslint/parser": "^5.48.1",
         "@vue/cli-plugin-babel": "^5.0.8",
         "@vue/cli-plugin-eslint": "^5.0.8",
         "@vue/cli-plugin-typescript": "^5.0.8",
@@ -2590,14 +2589,14 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.48.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.48.0.tgz",
-      "integrity": "sha512-SVLafp0NXpoJY7ut6VFVUU9I+YeFsDzeQwtK0WZ+xbRN3mtxJ08je+6Oi2N89qDn087COdO0u3blKZNv9VetRQ==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.48.1.tgz",
+      "integrity": "sha512-9nY5K1Rp2ppmpb9s9S2aBiF3xo5uExCehMDmYmmFqqyxgenbHJ3qbarcLt4ITgaD6r/2ypdlcFRdcuVPnks+fQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.48.0",
-        "@typescript-eslint/type-utils": "5.48.0",
-        "@typescript-eslint/utils": "5.48.0",
+        "@typescript-eslint/scope-manager": "5.48.1",
+        "@typescript-eslint/type-utils": "5.48.1",
+        "@typescript-eslint/utils": "5.48.1",
         "debug": "^4.3.4",
         "ignore": "^5.2.0",
         "natural-compare-lite": "^1.4.0",
@@ -2623,14 +2622,14 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.48.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.48.0.tgz",
-      "integrity": "sha512-1mxNA8qfgxX8kBvRDIHEzrRGrKHQfQlbW6iHyfHYS0Q4X1af+S6mkLNtgCOsGVl8+/LUPrqdHMssAemkrQ01qg==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.48.1.tgz",
+      "integrity": "sha512-4yg+FJR/V1M9Xoq56SF9Iygqm+r5LMXvheo6DQ7/yUWynQ4YfCRnsKuRgqH4EQ5Ya76rVwlEpw4Xu+TgWQUcdA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.48.0",
-        "@typescript-eslint/types": "5.48.0",
-        "@typescript-eslint/typescript-estree": "5.48.0",
+        "@typescript-eslint/scope-manager": "5.48.1",
+        "@typescript-eslint/types": "5.48.1",
+        "@typescript-eslint/typescript-estree": "5.48.1",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -2650,13 +2649,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.48.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.48.0.tgz",
-      "integrity": "sha512-0AA4LviDtVtZqlyUQnZMVHydDATpD9SAX/RC5qh6cBd3xmyWvmXYF+WT1oOmxkeMnWDlUVTwdODeucUnjz3gow==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.48.1.tgz",
+      "integrity": "sha512-S035ueRrbxRMKvSTv9vJKIWgr86BD8s3RqoRZmsSh/s8HhIs90g6UlK8ZabUSjUZQkhVxt7nmZ63VJ9dcZhtDQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.48.0",
-        "@typescript-eslint/visitor-keys": "5.48.0"
+        "@typescript-eslint/types": "5.48.1",
+        "@typescript-eslint/visitor-keys": "5.48.1"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2667,13 +2666,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.48.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.48.0.tgz",
-      "integrity": "sha512-vbtPO5sJyFjtHkGlGK4Sthmta0Bbls4Onv0bEqOGm7hP9h8UpRsHJwsrCiWtCUndTRNQO/qe6Ijz9rnT/DB+7g==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.48.1.tgz",
+      "integrity": "sha512-Hyr8HU8Alcuva1ppmqSYtM/Gp0q4JOp1F+/JH5D1IZm/bUBrV0edoewQZiEc1r6I8L4JL21broddxK8HAcZiqQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "5.48.0",
-        "@typescript-eslint/utils": "5.48.0",
+        "@typescript-eslint/typescript-estree": "5.48.1",
+        "@typescript-eslint/utils": "5.48.1",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       },
@@ -2694,9 +2693,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.48.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.48.0.tgz",
-      "integrity": "sha512-UTe67B0Ypius0fnEE518NB2N8gGutIlTojeTg4nt0GQvikReVkurqxd2LvYa9q9M5MQ6rtpNyWTBxdscw40Xhw==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.48.1.tgz",
+      "integrity": "sha512-xHyDLU6MSuEEdIlzrrAerCGS3T7AA/L8Hggd0RCYBi0w3JMvGYxlLlXHeg50JI9Tfg5MrtsfuNxbS/3zF1/ATg==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2707,13 +2706,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.48.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.48.0.tgz",
-      "integrity": "sha512-7pjd94vvIjI1zTz6aq/5wwE/YrfIyEPLtGJmRfyNR9NYIW+rOvzzUv3Cmq2hRKpvt6e9vpvPUQ7puzX7VSmsEw==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.48.1.tgz",
+      "integrity": "sha512-Hut+Osk5FYr+sgFh8J/FHjqX6HFcDzTlWLrFqGoK5kVUN3VBHF/QzZmAsIXCQ8T/W9nQNBTqalxi1P3LSqWnRA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.48.0",
-        "@typescript-eslint/visitor-keys": "5.48.0",
+        "@typescript-eslint/types": "5.48.1",
+        "@typescript-eslint/visitor-keys": "5.48.1",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -2734,16 +2733,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "5.48.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.48.0.tgz",
-      "integrity": "sha512-x2jrMcPaMfsHRRIkL+x96++xdzvrdBCnYRd5QiW5Wgo1OB4kDYPbC1XjWP/TNqlfK93K/lUL92erq5zPLgFScQ==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.48.1.tgz",
+      "integrity": "sha512-SmQuSrCGUOdmGMwivW14Z0Lj8dxG1mOFZ7soeJ0TQZEJcs3n5Ndgkg0A4bcMFzBELqLJ6GTHnEU+iIoaD6hFGA==",
       "dev": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.48.0",
-        "@typescript-eslint/types": "5.48.0",
-        "@typescript-eslint/typescript-estree": "5.48.0",
+        "@typescript-eslint/scope-manager": "5.48.1",
+        "@typescript-eslint/types": "5.48.1",
+        "@typescript-eslint/typescript-estree": "5.48.1",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0",
         "semver": "^7.3.7"
@@ -2760,12 +2759,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.48.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.48.0.tgz",
-      "integrity": "sha512-5motVPz5EgxQ0bHjut3chzBkJ3Z3sheYVcSwS5BpHZpLqSptSmELNtGixmgj65+rIfhvtQTz5i9OP2vtzdDH7Q==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.48.1.tgz",
+      "integrity": "sha512-Ns0XBwmfuX7ZknznfXozgnydyR8F6ev/KEGePP4i74uL3ArsKbEhJ7raeKr1JSa997DBDwol/4a0Y+At82c9dA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.48.0",
+        "@typescript-eslint/types": "5.48.1",
         "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
@@ -8650,11 +8649,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/fp-ts": {
-      "version": "2.13.1",
-      "resolved": "https://registry.npmjs.org/fp-ts/-/fp-ts-2.13.1.tgz",
-      "integrity": "sha512-0eu5ULPS2c/jsa1lGFneEFFEdTbembJv8e4QKXeVJ3lm/5hyve06dlKZrpxmMwJt6rYen7sxmHHK2CLaXvWuWQ=="
-    },
     "node_modules/fraction.js": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -9358,14 +9352,6 @@
         "loose-envify": "^1.0.0"
       }
     },
-    "node_modules/io-ts": {
-      "version": "2.2.20",
-      "resolved": "https://registry.npmjs.org/io-ts/-/io-ts-2.2.20.tgz",
-      "integrity": "sha512-Rq2BsYmtwS5vVttie4rqrOCIfHCS9TgpRLFpKQCM1wZBBRY9nWVGmEvm2FnDbSE2un1UE39DvFpTR5UL47YDcA==",
-      "peerDependencies": {
-        "fp-ts": "^2.5.0"
-      }
-    },
     "node_modules/ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -15282,9 +15268,9 @@
       "dev": true
     },
     "node_modules/vuetify": {
-      "version": "2.6.13",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.6.13.tgz",
-      "integrity": "sha512-HhJi52IzhfrmWFwcYFUiA1GRIzz9smbR06Lj61Ml5HgD5PBcMiDywUnNPVid1VsXO4qWpBU6kO3O89uTxH1yzw==",
+      "version": "2.6.14",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.6.14.tgz",
+      "integrity": "sha512-nr6wU3uTzhhEPssH23cW0Ee/hCrayp7cjl3nNjM2OmNwiJlV91tZiL1VO3597SqZyjh1xIa+m9J2rpKTSdIlrA==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/johnleider"
@@ -16243,6 +16229,14 @@
       "engines": {
         "node": ">=0.10.0"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.20.2",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.20.2.tgz",
+      "integrity": "sha512-1MzNQdAvO+54H+EaK5YpyEy0T+Ejo/7YLHS93G3RnYWh5gaotGHwGeN/ZO687qEDU2y4CdStQYXVHIgrUl5UVQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   },
   "dependencies": {
@@ -18142,14 +18136,14 @@
       }
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "5.48.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.48.0.tgz",
-      "integrity": "sha512-SVLafp0NXpoJY7ut6VFVUU9I+YeFsDzeQwtK0WZ+xbRN3mtxJ08je+6Oi2N89qDn087COdO0u3blKZNv9VetRQ==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.48.1.tgz",
+      "integrity": "sha512-9nY5K1Rp2ppmpb9s9S2aBiF3xo5uExCehMDmYmmFqqyxgenbHJ3qbarcLt4ITgaD6r/2ypdlcFRdcuVPnks+fQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.48.0",
-        "@typescript-eslint/type-utils": "5.48.0",
-        "@typescript-eslint/utils": "5.48.0",
+        "@typescript-eslint/scope-manager": "5.48.1",
+        "@typescript-eslint/type-utils": "5.48.1",
+        "@typescript-eslint/utils": "5.48.1",
         "debug": "^4.3.4",
         "ignore": "^5.2.0",
         "natural-compare-lite": "^1.4.0",
@@ -18159,53 +18153,53 @@
       }
     },
     "@typescript-eslint/parser": {
-      "version": "5.48.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.48.0.tgz",
-      "integrity": "sha512-1mxNA8qfgxX8kBvRDIHEzrRGrKHQfQlbW6iHyfHYS0Q4X1af+S6mkLNtgCOsGVl8+/LUPrqdHMssAemkrQ01qg==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.48.1.tgz",
+      "integrity": "sha512-4yg+FJR/V1M9Xoq56SF9Iygqm+r5LMXvheo6DQ7/yUWynQ4YfCRnsKuRgqH4EQ5Ya76rVwlEpw4Xu+TgWQUcdA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "5.48.0",
-        "@typescript-eslint/types": "5.48.0",
-        "@typescript-eslint/typescript-estree": "5.48.0",
+        "@typescript-eslint/scope-manager": "5.48.1",
+        "@typescript-eslint/types": "5.48.1",
+        "@typescript-eslint/typescript-estree": "5.48.1",
         "debug": "^4.3.4"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "5.48.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.48.0.tgz",
-      "integrity": "sha512-0AA4LviDtVtZqlyUQnZMVHydDATpD9SAX/RC5qh6cBd3xmyWvmXYF+WT1oOmxkeMnWDlUVTwdODeucUnjz3gow==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.48.1.tgz",
+      "integrity": "sha512-S035ueRrbxRMKvSTv9vJKIWgr86BD8s3RqoRZmsSh/s8HhIs90g6UlK8ZabUSjUZQkhVxt7nmZ63VJ9dcZhtDQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.48.0",
-        "@typescript-eslint/visitor-keys": "5.48.0"
+        "@typescript-eslint/types": "5.48.1",
+        "@typescript-eslint/visitor-keys": "5.48.1"
       }
     },
     "@typescript-eslint/type-utils": {
-      "version": "5.48.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.48.0.tgz",
-      "integrity": "sha512-vbtPO5sJyFjtHkGlGK4Sthmta0Bbls4Onv0bEqOGm7hP9h8UpRsHJwsrCiWtCUndTRNQO/qe6Ijz9rnT/DB+7g==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.48.1.tgz",
+      "integrity": "sha512-Hyr8HU8Alcuva1ppmqSYtM/Gp0q4JOp1F+/JH5D1IZm/bUBrV0edoewQZiEc1r6I8L4JL21broddxK8HAcZiqQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/typescript-estree": "5.48.0",
-        "@typescript-eslint/utils": "5.48.0",
+        "@typescript-eslint/typescript-estree": "5.48.1",
+        "@typescript-eslint/utils": "5.48.1",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "5.48.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.48.0.tgz",
-      "integrity": "sha512-UTe67B0Ypius0fnEE518NB2N8gGutIlTojeTg4nt0GQvikReVkurqxd2LvYa9q9M5MQ6rtpNyWTBxdscw40Xhw==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.48.1.tgz",
+      "integrity": "sha512-xHyDLU6MSuEEdIlzrrAerCGS3T7AA/L8Hggd0RCYBi0w3JMvGYxlLlXHeg50JI9Tfg5MrtsfuNxbS/3zF1/ATg==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "5.48.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.48.0.tgz",
-      "integrity": "sha512-7pjd94vvIjI1zTz6aq/5wwE/YrfIyEPLtGJmRfyNR9NYIW+rOvzzUv3Cmq2hRKpvt6e9vpvPUQ7puzX7VSmsEw==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.48.1.tgz",
+      "integrity": "sha512-Hut+Osk5FYr+sgFh8J/FHjqX6HFcDzTlWLrFqGoK5kVUN3VBHF/QzZmAsIXCQ8T/W9nQNBTqalxi1P3LSqWnRA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.48.0",
-        "@typescript-eslint/visitor-keys": "5.48.0",
+        "@typescript-eslint/types": "5.48.1",
+        "@typescript-eslint/visitor-keys": "5.48.1",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -18214,28 +18208,28 @@
       }
     },
     "@typescript-eslint/utils": {
-      "version": "5.48.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.48.0.tgz",
-      "integrity": "sha512-x2jrMcPaMfsHRRIkL+x96++xdzvrdBCnYRd5QiW5Wgo1OB4kDYPbC1XjWP/TNqlfK93K/lUL92erq5zPLgFScQ==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.48.1.tgz",
+      "integrity": "sha512-SmQuSrCGUOdmGMwivW14Z0Lj8dxG1mOFZ7soeJ0TQZEJcs3n5Ndgkg0A4bcMFzBELqLJ6GTHnEU+iIoaD6hFGA==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.9",
         "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.48.0",
-        "@typescript-eslint/types": "5.48.0",
-        "@typescript-eslint/typescript-estree": "5.48.0",
+        "@typescript-eslint/scope-manager": "5.48.1",
+        "@typescript-eslint/types": "5.48.1",
+        "@typescript-eslint/typescript-estree": "5.48.1",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0",
         "semver": "^7.3.7"
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "5.48.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.48.0.tgz",
-      "integrity": "sha512-5motVPz5EgxQ0bHjut3chzBkJ3Z3sheYVcSwS5BpHZpLqSptSmELNtGixmgj65+rIfhvtQTz5i9OP2vtzdDH7Q==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.48.1.tgz",
+      "integrity": "sha512-Ns0XBwmfuX7ZknznfXozgnydyR8F6ev/KEGePP4i74uL3ArsKbEhJ7raeKr1JSa997DBDwol/4a0Y+At82c9dA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "5.48.0",
+        "@typescript-eslint/types": "5.48.1",
         "eslint-visitor-keys": "^3.3.0"
       }
     },
@@ -22868,11 +22862,6 @@
       "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
       "dev": true
     },
-    "fp-ts": {
-      "version": "2.13.1",
-      "resolved": "https://registry.npmjs.org/fp-ts/-/fp-ts-2.13.1.tgz",
-      "integrity": "sha512-0eu5ULPS2c/jsa1lGFneEFFEdTbembJv8e4QKXeVJ3lm/5hyve06dlKZrpxmMwJt6rYen7sxmHHK2CLaXvWuWQ=="
-    },
     "fraction.js": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -23389,12 +23378,6 @@
         "loose-envify": "^1.0.0"
       }
     },
-    "io-ts": {
-      "version": "2.2.20",
-      "resolved": "https://registry.npmjs.org/io-ts/-/io-ts-2.2.20.tgz",
-      "integrity": "sha512-Rq2BsYmtwS5vVttie4rqrOCIfHCS9TgpRLFpKQCM1wZBBRY9nWVGmEvm2FnDbSE2un1UE39DvFpTR5UL47YDcA==",
-      "requires": {}
-    },
     "ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -27838,9 +27821,9 @@
       "dev": true
     },
     "vuetify": {
-      "version": "2.6.13",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.6.13.tgz",
-      "integrity": "sha512-HhJi52IzhfrmWFwcYFUiA1GRIzz9smbR06Lj61Ml5HgD5PBcMiDywUnNPVid1VsXO4qWpBU6kO3O89uTxH1yzw==",
+      "version": "2.6.14",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.6.14.tgz",
+      "integrity": "sha512-nr6wU3uTzhhEPssH23cW0Ee/hCrayp7cjl3nNjM2OmNwiJlV91tZiL1VO3597SqZyjh1xIa+m9J2rpKTSdIlrA==",
       "requires": {}
     },
     "vuetify-loader": {
@@ -28538,6 +28521,11 @@
           "dev": true
         }
       }
+    },
+    "zod": {
+      "version": "3.20.2",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.20.2.tgz",
+      "integrity": "sha512-1MzNQdAvO+54H+EaK5YpyEy0T+Ejo/7YLHS93G3RnYWh5gaotGHwGeN/ZO687qEDU2y4CdStQYXVHIgrUl5UVQ=="
     }
   }
 }
diff --git a/package.json b/package.json
index baf787770..d23c729be 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "piping-ui",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "private": true,
   "author": "Ryo Ota <nwtgck@nwtgck.org> (https://github.com/nwtgck)",
   "scripts": {
@@ -27,8 +27,6 @@
     "file-saver": "^2.0.5",
     "file-type": "^16.5.3",
     "filepond": "^4.30.4",
-    "fp-ts": "^2.12.3",
-    "io-ts": "^2.2.18",
     "jszip": "^3.10.1",
     "jwk-thumbprint": "^0.1.4",
     "linkify-string": "^4.0.2",
@@ -40,7 +38,8 @@
     "url-join": "^4.0.1",
     "vue": "^2.7.10",
     "vue-filepond": "^6.0.3",
-    "vuetify": "^2.6.10"
+    "vuetify": "^2.6.14",
+    "zod": "^3.20.2"
   },
   "devDependencies": {
     "@mdi/js": "^7.0.96",
@@ -53,8 +52,8 @@
     "@types/sanitize-html": "^2.6.2",
     "@types/smoothscroll-polyfill": "^0.3.1",
     "@types/url-join": "^4.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "@typescript-eslint/parser": "^5.48.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-eslint": "^5.0.8",
     "@vue/cli-plugin-typescript": "^5.0.8",
diff --git a/src/components/DataDownloader.vue b/src/components/DataDownloader.vue
index 2d2b8dfdd..fea9a9127 100644
--- a/src/components/DataDownloader.vue
+++ b/src/components/DataDownloader.vue
@@ -1,7 +1,14 @@
 <template>
   <v-expansion-panel ref="rootElement">
-    <v-expansion-panel-header :disable-icon-rotate="hasError">
+    <v-expansion-panel-header :disable-icon-rotate="progressPercentage === 100 || hasError">
       <span>{{ strings?.['download_in_downloader'] }} #{{ composedProps.downloadNo }}</span>
+      <!-- Percentage -->
+      {{ progressPercentage ? `${progressPercentage.toFixed(2)} %` : "" }}
+      <template v-slot:actions>
+        <v-icon :color="headerIconColor" style="margin-left: 0.3em">
+          {{ headerIcon}}
+        </v-icon>
+      </template>
     </v-expansion-panel-header>
     <v-expansion-panel-content>
 
@@ -13,6 +20,24 @@
         <VerificationCode :value="verificationStep.verificationCode"/>
       </span>
 
+      <!-- NOTE: Don't use v-if because the "sibling" element uses "ref" and the ref is loaded in mounted(), but don't know why "sibling" affects. -->
+      <span v-show="showsProgressBar">
+        <!-- loaded of total -->
+        <v-tooltip bottom>
+          <template v-slot:activator="{ on }">
+            <div style="text-align: center" v-on="on">
+              {{ readableBytesString(progressSetting.loadedBytes, 1) }}{{ !progressSetting.totalBytes ? "" : ` of ${readableBytesString(progressSetting.totalBytes, 1)}` }}
+            </div>
+          </template>
+          <span>{{ progressSetting.loadedBytes }}{{ !progressSetting.totalBytes ? "" : ` of ${progressSetting.totalBytes}` }}</span>
+        </v-tooltip>
+
+        <!-- Progress bar -->
+        <v-progress-linear :value="progressPercentage"
+                           :indeterminate="progressPercentage === null && !canceled && !hasError"
+                           :color="canceled ? 'grey' : undefined" />
+      </span>
+
       <v-simple-table class="text-left">
         <tbody>
         <tr v-if="composedProps.protection.type === 'passwordless'" class="text-left">
@@ -40,6 +65,8 @@
         {{ errorMessage }}
       </v-alert>
 
+      <UpdateAppButton v-if="showsUpdateAppButton" />
+
       <v-dialog v-model="openRetryDownload" persistent max-width="290">
         <v-card>
           <v-card-title class="text-h5">{{ strings?.['retry_download_dialog_title'] }}</v-card-title>
@@ -72,8 +99,8 @@ export type DataDownloaderProps = {
 
 import Vue, {ref, computed, onMounted, nextTick} from "vue";
 import urlJoin from 'url-join';
-import {mdiAlert, mdiChevronDown} from "@mdi/js";
-import * as pipingUiUtils from "@/piping-ui-utils";
+import {mdiAlert, mdiCheck, mdiChevronDown, mdiCloseCircle} from "@mdi/js";
+import {pipingUiScrollTo} from "@/piping-ui-utils/pipingUiScrollTo";
 import * as pipingUiRobust from "@/piping-ui-robust";
 import VerificationCode from "@/components/VerificationCode.vue";
 import * as pipingUiAuth from "@/piping-ui-auth";
@@ -85,7 +112,12 @@ import {useErrorMessage} from "@/composables/useErrorMessage";
 import {strings} from "@/strings/strings";
 import {ecdsaP384SigningKeyPairPromise} from "@/states/ecdsaP384SigningKeyPairPromise";
 import {firstAtLeastBlobFromReadableStream} from "@/utils/firstAtLeastBlobFromReadableStream";
+import {decideFileName} from "@/piping-ui-utils/decideFileName";
+import {readableBytesString} from "@/utils/readableBytesString";
+import {getReadableStreamWithProgress} from "@/utils/getReadableStreamWithProgress";
+import {shouldUpdateApp} from "@/piping-ui-utils/shouldUpdateApp";
 
+const UpdateAppButton = () => import('@/components/UpdateAppButton.vue');
 const FileSaverAsync = () => import('file-saver').then(p => p.default);
 const swDownloadAsync = () => import("@/sw-download");
 const openPgpUtilsAsync = () => import("@/utils/openpgp-utils");
@@ -95,8 +127,9 @@ const props = defineProps<{ composedProps: DataDownloaderProps }>();
 // TODO: support cancel
 const {promise: canceledPromise, resolve: cancel} = makePromise<void>();
 canceledPromise.then(() => {
-  // canceled.value = true;
+  canceled.value = true;
 });
+const canceled = ref(false);
 
 const {errorMessage, updateErrorMessage} = useErrorMessage();
 const verificationStep = ref<pipingUiAuth.VerificationStep>({type: 'initial'});
@@ -104,16 +137,26 @@ const hasError = computed<boolean>(() => errorMessage.value !== undefined);
 const headerIcon = computed<string>(() => {
   if (hasError.value) {
     return mdiAlert;
-  } else {
-    return mdiChevronDown;
   }
+  if (canceled.value) {
+    return mdiCloseCircle;
+  }
+  if (progressPercentage.value === 100) {
+    return mdiCheck;
+  }
+  return mdiChevronDown;
 });
 const headerIconColor = computed<string | undefined>(() => {
   if (hasError.value) {
     return "error";
-  } else {
-    return undefined
   }
+  if (canceled.value) {
+    return "grey";
+  }
+  if (progressPercentage.value === 100) {
+    return "teal";
+  }
+  return undefined;
 });
 const isReadyToDownload = computed<boolean>(() => {
   return props.composedProps.protection.type === 'passwordless' ? verificationStep.value.type === 'verified' && verificationStep.value.verified : true
@@ -125,12 +168,27 @@ const rootElement = ref<Vue>();
 const pipingUiAuthVerificationCode = ref<string | undefined>();
 const openRetryDownload = ref<boolean>(false);
 const retry_download_button = ref<Vue>();
+const showsProgressBar = ref(false);
+const progressSetting = ref<{loadedBytes: number, totalBytes?: number}>({
+  loadedBytes: 0,
+  totalBytes: undefined,
+});
+const progressPercentage = computed<number | null>(() => {
+  if (progressSetting.value.totalBytes === undefined) {
+    return null;
+  }
+  if (progressSetting.value.totalBytes === 0) {
+    return 100;
+  }
+  return progressSetting.value.loadedBytes / progressSetting.value.totalBytes * 100;
+});
+const showsUpdateAppButton = ref(false);
 
 // NOTE: Automatically download when mounted
 onMounted(async () => {
   // Scroll to this element
   // NOTE: no need to add `await`
-  pipingUiUtils.scrollTo(rootElement.value!.$el);
+  pipingUiScrollTo(rootElement.value!.$el);
 
   // Key exchange
   const keyExchangeRes = await pipingUiAuth.keyExchangeAndReceiveVerified(
@@ -138,7 +196,7 @@ onMounted(async () => {
       props.composedProps.secretPath,
       props.composedProps.protection,
       await ecdsaP384SigningKeyPairPromise.value,
-      (step: VerificationStep) => {
+      (step: pipingUiAuth.VerificationStep) => {
         verificationStep.value = step;
       },
       canceledPromise,
@@ -154,6 +212,7 @@ onMounted(async () => {
       case "key_exchange_error": {
         const errorCode = keyExchangeRes.error.keyExchangeError;
         updateErrorMessage(() => strings.value?.["key_exchange_error"](errorCode));
+        showsUpdateAppButton.value = shouldUpdateApp(keyExchangeRes.error.keyExchangeError);
         break;
       }
       case "sender_not_verified":
@@ -198,6 +257,9 @@ onMounted(async () => {
         keyExchangeRes.mainPath,
         { abortSignal: abortController.signal },
       );
+      if (keyExchangeRes.dataMeta.size !== undefined) {
+        progressSetting.value.totalBytes = keyExchangeRes.dataMeta.size;
+      }
     } else {
       const res = await fetch(downloadUrl.value);
       if (res.status !== 200) {
@@ -206,6 +268,7 @@ onMounted(async () => {
         return;
       }
       encryptedStream = res.body!;
+      // Should not set Content-Length to progressSetting.value.totalBytes because it is encrypted length
     }
     // Decrypt the response body
     let plainStream: ReadableStream;
@@ -216,14 +279,32 @@ onMounted(async () => {
       updateErrorMessage(() => strings.value?.['password_might_be_wrong']);
       return;
     }
-    // Save
+    showsProgressBar.value = true;
+    const {stream: plainStreamWithProgress, cancel: cancelPlainStreamWithProgress} = getReadableStreamWithProgress(plainStream, {
+      onRead(n) {
+        progressSetting.value.loadedBytes += n;
+      },
+    });
+    canceledPromise.then(() => {
+      cancelPlainStreamWithProgress();
+    });
     const FileSaver = await FileSaverAsync();
-    FileSaver.saveAs(await new Response(plainStream).blob(), props.composedProps.secretPath);
+    const blob = await new Response(plainStreamWithProgress).blob();
+    progressSetting.value.totalBytes = blob.size;
+    const fileName = decideFileName({
+      topPriorityDataMeta: keyExchangeRes.protectionType === "passwordless" ? keyExchangeRes.dataMeta : undefined,
+      secretPath: props.composedProps.secretPath,
+      sniffedFileExtension: (await fileType.fromBlob(blob))?.ext,
+    });
+    // Save
+    FileSaver.saveAs(blob, fileName);
     return;
   }
   console.log("downloading streaming with the Service Worker and decrypting if need...");
   const openPgpUtils = await openPgpUtilsAsync();
 
+  showsProgressBar.value = true;
+
   let readableStream: ReadableStream;
   let contentLengthStr: string | undefined = undefined;
   // Passwordless transfer always uses Piping UI Robust
@@ -238,6 +319,10 @@ onMounted(async () => {
       keyExchangeRes.mainPath,
       { abortSignal: abortController.signal },
     );
+    if (keyExchangeRes.dataMeta.size !== undefined) {
+      contentLengthStr = keyExchangeRes.dataMeta.size.toString();
+      progressSetting.value.totalBytes = keyExchangeRes.dataMeta.size;
+    }
   } else {
     const res = await fetch(downloadUrl.value);
     if (res.status !== 200) {
@@ -245,7 +330,11 @@ onMounted(async () => {
       updateErrorMessage(() => strings.value?.['fetch_status_error']({status: res.status, message}));
       return;
     }
+    // NOTE: Should not use Content-Length when password is defined because it is encrypted byte size
     contentLengthStr = key === undefined ? res.headers.get("Content-Length") ?? undefined : undefined;
+    if (contentLengthStr !== undefined) {
+      progressSetting.value.totalBytes = parseInt(contentLengthStr, 10);
+    }
     readableStream = res.body!
   }
 
@@ -259,33 +348,43 @@ onMounted(async () => {
     }
   }
   const [readableStreamForDownload, readableStreamForFileType] = readableStream.tee();
-  const mimeTypeAndFileExtension: { mimeType: string, fileExtension: string } | undefined = await (async () => {
+  const { mimeType, fileExtension }: { mimeType: string | undefined, fileExtension: string | undefined } = await (async () => {
+    // Avoid sniffing in passwordless protection
     if (keyExchangeRes.protectionType === "passwordless") {
-      return keyExchangeRes.fileType;
+      return keyExchangeRes.dataMeta;
     }
     // NOTE: Using fileType.fromStream() blocks download when specifying multiple large files in DataUploader.vue. (zip detection may read large bytes)
     // NOTE: 4100 was used in FileType.minimumBytes in file-type until 13.1.2
     const fileTypeResult = await fileType.fromBlob(await firstAtLeastBlobFromReadableStream(readableStreamForFileType, 4100));
-    if (fileTypeResult === undefined) {
-      return undefined;
-    }
-    return { mimeType: fileTypeResult.mime, fileExtension: fileTypeResult.ext };
+    return { mimeType: fileTypeResult?.mime, fileExtension: fileTypeResult?.ext };
   })();
-  let fileName = props.composedProps.secretPath;
-  if (mimeTypeAndFileExtension !== undefined && !fileName.match(/.+\..+/)) {
-    fileName = `${fileName}.${mimeTypeAndFileExtension.fileExtension}`;
-  }
+  const fileName = decideFileName({
+    topPriorityDataMeta: keyExchangeRes.protectionType === "passwordless" ? keyExchangeRes.dataMeta : undefined,
+    secretPath: props.composedProps.secretPath,
+    sniffedFileExtension: fileExtension,
+  });
   // (from: https://github.com/jimmywarting/StreamSaver.js/blob/314e64b8984484a3e8d39822c9b86a345eb36454/sw.js#L120-L122)
   // Make filename RFC5987 compatible
   const escapedFileName = encodeURIComponent(fileName).replace(/['()]/g, escape).replace(/\*/g, '%2A');
   const headers: [string, string][] = [
     ...( contentLengthStr === undefined ? [] : [ [ "Content-Length", contentLengthStr ] ] satisfies [[string, string]] ),
     // Without "Content-Type", Safari in iOS 15 adds ".html" to the downloading file
-    ...( mimeTypeAndFileExtension === undefined ? [] : [ [ "Content-Type", mimeTypeAndFileExtension.mimeType ] ] satisfies [[string, string]] ),
+    ...( mimeType === undefined ? [] : [ [ "Content-Type", mimeType ] ] satisfies [[string, string]] ),
     ['Content-Disposition', "attachment; filename*=UTF-8''" + escapedFileName],
   ];
+  const {stream: readableStreamForDownloadWithProgress, cancel: cancelReadableStreamForDownloadWithProgress} = getReadableStreamWithProgress(readableStreamForDownload, {
+    onRead(n) {
+      progressSetting.value.loadedBytes += n;
+    },
+    onFinished() {
+      progressSetting.value.totalBytes = progressSetting.value.loadedBytes;
+    },
+  });
+  canceledPromise.then(() => {
+    cancelReadableStreamForDownloadWithProgress();
+  });
   // Enroll download ReadableStream and get sw-download ID
-  const {swDownloadId} = await enrollDownload(headers, readableStreamForDownload);
+  const {swDownloadId} = await enrollDownload(headers, readableStreamForDownloadWithProgress);
   // Download via Service Worker
   // NOTE: '/sw-download/v2' can be received by Service Worker in src/sw.js
   // NOTE: URL fragment is passed to Service Worker but not passed to Web server
@@ -302,6 +401,7 @@ onMounted(async () => {
       // NOTE: The feature detection can not be created because it would confirm the downloaded file.
       if (isFirefox()) {
         // NOTE: With "download" attributes, Chrome 108 and Safari 16.1 bypass Service Worker
+        // crbug: https://bugs.chromium.org/p/chromium/issues/detail?id=468227
         // NOTE: Without "download" attribute, Firefox frequently fails to download a large file. Passwordless protection is stable without "download" attribute because it uses Piping UI Robust, which transfer small chunks especially first chunk even in Firefox.
         // For testing in Firefox, you can enable "Block pop-up windows" in your preference.
         a.download = fileName;
diff --git a/src/components/DataUploader.vue b/src/components/DataUploader.vue
index 3d422f63b..57c26480f 100644
--- a/src/components/DataUploader.vue
+++ b/src/components/DataUploader.vue
@@ -109,6 +109,8 @@
                v-html="errorMessage"
                :value="hasError" />
 
+      <UpdateAppButton v-if="showsUpdateAppButton" />
+
     </v-expansion-panel-content>
   </v-expansion-panel>
 
@@ -119,19 +121,21 @@ import {type Protection} from "@/datatypes";
 export type DataUploaderProps = {
   uploadNo: number,
   data: File[] | string,
+  inputFileName: string | undefined,
   serverUrl: string,
   secretPath: string,
   protection: Protection,
+  onSentSuccessfully: () => void,
 };
 </script>
 
 <script setup lang="ts">
 /* eslint-disable */
-import Vue, {computed, onMounted, ref} from "vue";
+import Vue, {computed, onMounted, ref, watch} from "vue";
 import urlJoin from 'url-join';
 import {blobToReadableStream} from "binconv/dist/src/blobToReadableStream";
 import * as openPgpUtils from '@/utils/openpgp-utils';
-import * as pipingUiUtils from "@/piping-ui-utils";
+import {pipingUiScrollTo} from "@/piping-ui-utils/pipingUiScrollTo";
 import * as pipingUiRobust from "@/piping-ui-robust";
 import {mdiAlert, mdiCancel, mdiCheck, mdiChevronDown, mdiCloseCircle} from "@mdi/js";
 import VerificationCode from "@/components/VerificationCode.vue";
@@ -145,6 +149,9 @@ import {useErrorMessage} from "@/composables/useErrorMessage";
 import {strings} from "@/strings/strings";
 import {ecdsaP384SigningKeyPairPromise} from "@/states/ecdsaP384SigningKeyPairPromise";
 import * as fileType from 'file-type/browser';
+import {shouldUpdateApp} from "@/piping-ui-utils/shouldUpdateApp";
+
+const UpdateAppButton = () => import('@/components/UpdateAppButton.vue');
 
 const props = defineProps<{ composedProps: DataUploaderProps }>();
 
@@ -167,6 +174,7 @@ const isCompressing = ref(false);
 const isNonStreamingEncrypting = ref(false);
 const verificationStep = ref<pipingUiAuth.VerificationStep>({type: 'initial'});
 const pipingUiAuthVerificationCode = ref<string | undefined>();
+const showsUpdateAppButton = ref(false);
 
 const progressPercentage = computed<number | null>(() => {
   if (progressSetting.value.totalBytes === undefined) {
@@ -181,6 +189,11 @@ const progressPercentage = computed<number | null>(() => {
 const isDoneUpload = computed<boolean>(() => {
   return progressPercentage.value === 100;
 });
+watch(isDoneUpload, () => {
+  if (isDoneUpload) {
+    props.composedProps.onSentSuccessfully();
+  }
+});
 
 const uploadUrl = computed<string>(() => urlJoin(props.composedProps.serverUrl, props.composedProps.secretPath));
 
@@ -259,7 +272,7 @@ const rootElement = ref<Vue>();
 onMounted(async () => {
   // Scroll to this element
   // NOTE: no need to add `await`
-  pipingUiUtils.scrollTo(rootElement.value!.$el);
+  pipingUiScrollTo(rootElement.value!.$el);
 
   switch (props.composedProps.protection.type) {
     case 'raw':
@@ -285,6 +298,7 @@ onMounted(async () => {
       if (keyExchangeRes.type === 'error') {
         verificationStep.value = {type: 'error'};
         updateErrorMessage(() => strings.value?.['key_exchange_error'](keyExchangeRes.keyExchangeError));
+        showsUpdateAppButton.value = shouldUpdateApp(keyExchangeRes.keyExchangeError);
         return;
       }
       const {key, mainPath, verificationCode} = keyExchangeRes;
@@ -305,7 +319,15 @@ async function verify(verified: boolean) {
   verificationStep.value = {type: 'verified', verified};
 
   const plainBody = await makePlainBodyPromise;
-  const parcelExtension = plainBody.mimeType === undefined ? undefined : { version: 1, mimeType: plainBody.mimeType, fileExtension: plainBody.fileExtension } as const;
+  const parcelExtension: pipingUiAuth.VerifiedExtension = {
+    version: 2,
+    data_meta: {
+      mime_type: plainBody.mimeType,
+      size: plainBody.data instanceof Blob ? plainBody.data.size : undefined,
+      file_name: props.composedProps.inputFileName,
+      file_extension: plainBody.fileExtension,
+    },
+  };
   await pipingUiAuth.verify(props.composedProps.serverUrl, mainPath, key, verified, parcelExtension, canceledPromise);
 
   if (!verified) {
diff --git a/src/components/DataViewer.vue b/src/components/DataViewer.vue
index afe49b191..08553f49a 100644
--- a/src/components/DataViewer.vue
+++ b/src/components/DataViewer.vue
@@ -161,6 +161,8 @@
         {{ errorMessage }}
       </v-alert>
 
+      <UpdateAppButton v-if="showsUpdateAppButton" />
+
     </v-expansion-panel-content>
   </v-expansion-panel>
 
@@ -191,7 +193,7 @@ import {mdiAlert, mdiCheck, mdiChevronDown, mdiContentSave, mdiCloseCircle, mdiE
 import * as pipingUiRobust from "@/piping-ui-robust";
 
 import * as openPgpUtils from '@/utils/openpgp-utils';
-import * as pipingUiUtils from "@/piping-ui-utils";
+import {pipingUiScrollTo} from "@/piping-ui-utils/pipingUiScrollTo";
 import VerificationCode from "@/components/VerificationCode.vue";
 import {BlobUrlManager} from "@/utils/BlobUrlManager";
 import * as pipingUiAuth from "@/piping-ui-auth";
@@ -203,6 +205,10 @@ import {useErrorMessage} from "@/composables/useErrorMessage";
 import {getReadableStreamWithProgress} from "@/utils/getReadableStreamWithProgress";
 import {strings} from "@/strings/strings";
 import {ecdsaP384SigningKeyPairPromise} from "@/states/ecdsaP384SigningKeyPairPromise";
+import {decideFileName} from "@/piping-ui-utils/decideFileName";
+import {shouldUpdateApp} from "@/piping-ui-utils/shouldUpdateApp";
+
+const UpdateAppButton = () => import('@/components/UpdateAppButton.vue');
 
 // eslint-disable-next-line no-undef
 const props = defineProps<{ composedProps: DataViewerProps }>();
@@ -232,6 +238,8 @@ let blob = new Blob();
 const showsCopied = ref(false);
 const isDecrypting = ref(false);
 const pipingUiAuthVerificationCode = ref<string | undefined>();
+const showsUpdateAppButton = ref(false);
+let topPriorityDataMeta: { fileName: string | undefined, fileExtension: string | undefined } | undefined;
 
 const progressPercentage = computed<number | null>(() => {
   if (isDoneDownload.value) {
@@ -304,7 +312,7 @@ const rootElement = ref<Vue>();
 onMounted(async () => {
   // Scroll to this element
   // NOTE: no need to add `await`
-  pipingUiUtils.scrollTo(rootElement.value!.$el);
+  pipingUiScrollTo(rootElement.value!.$el);
 
   // Key exchange
   const keyExchangeRes = await pipingUiAuth.keyExchangeAndReceiveVerified(
@@ -328,6 +336,7 @@ onMounted(async () => {
       case "key_exchange_error": {
         const errorCode = keyExchangeRes.error.keyExchangeError;
         updateErrorMessage(() => strings.value?.["key_exchange_error"](errorCode));
+        showsUpdateAppButton.value = shouldUpdateApp(keyExchangeRes.error.keyExchangeError);
         break;
       }
       case "sender_not_verified":
@@ -343,6 +352,10 @@ onMounted(async () => {
 
   const {key} = keyExchangeRes;
 
+  if (keyExchangeRes.protectionType === "passwordless") {
+    topPriorityDataMeta = keyExchangeRes.dataMeta;
+  }
+
   let rawStream: ReadableStream<Uint8Array>;
   if (keyExchangeRes.protectionType === "passwordless") {
     const abortController = new AbortController();
@@ -353,6 +366,9 @@ onMounted(async () => {
     rawStream = pipingUiRobust.receiveReadableStream(props.composedProps.serverUrl, keyExchangeRes.mainPath, {
       abortSignal: abortController.signal,
     });
+    if (keyExchangeRes.dataMeta.size !== undefined) {
+      progressSetting.value.totalBytes = keyExchangeRes.dataMeta.size;
+    }
   } else {
     const abortController = new AbortController();
     canceledPromise.then(() => {
@@ -377,8 +393,8 @@ onMounted(async () => {
       return;
     }
     const contentLengthStr = res.headers.get("Content-Length");
-    // NOTE: Content-Length is encrypted byte size if password is defined
-    if (contentLengthStr !== null && password.value === undefined) {
+    // NOTE: Should not use Content-Length when password is defined because it is encrypted byte size
+    if (contentLengthStr !== null && keyExchangeRes.protectionType === "password") {
       progressSetting.value.totalBytes = parseInt(contentLengthStr, 10);
     }
     rawStream = res.body!;
@@ -394,8 +410,10 @@ onMounted(async () => {
       // Decrypt the response body
       rawOrDecryptedStream = await openPgpUtils.decryptStream(streamForDecrypting, key);
     }
-    const {stream: rawOrDecryptedStreamWithProgress, cancel: cancelRawOrDecryptedStreamWithProgress} = getReadableStreamWithProgress(rawOrDecryptedStream, (n) => {
-      progressSetting.value.loadedBytes += n;
+    const {stream: rawOrDecryptedStreamWithProgress, cancel: cancelRawOrDecryptedStreamWithProgress} = getReadableStreamWithProgress(rawOrDecryptedStream, {
+      onRead(n) {
+        progressSetting.value.loadedBytes += n;
+      },
     });
     canceledPromise.then(() => {
       cancelRawOrDecryptedStreamWithProgress();
@@ -500,17 +518,11 @@ function viewRaw() {
 
 async function save(): Promise<void> {
   const FileSaver = await FileSaverAsync();
-  const fileName = await (async () => {
-    // If secret path has extension
-    if (props.composedProps.secretPath.match(/.+\..+/)) {
-      return props.composedProps.secretPath;
-    }
-    const fileTypeResult = await fileType.fromStream(blobToReadableStream(blob));
-    if (fileTypeResult === undefined) {
-      return props.composedProps.secretPath;
-    }
-    return `${props.composedProps.secretPath}.${fileTypeResult.ext}`;
-  })();
+  const fileName = decideFileName({
+    topPriorityDataMeta,
+    secretPath: props.composedProps.secretPath,
+    sniffedFileExtension: (await fileType.fromBlob(blob))?.ext,
+  });
   FileSaver.saveAs(blob, fileName);
 }
 </script>
diff --git a/src/components/FilePondWrapper.vue b/src/components/FilePondWrapper.vue
index 90b508095..44bf2b6d3 100644
--- a/src/components/FilePondWrapper.vue
+++ b/src/components/FilePondWrapper.vue
@@ -1,6 +1,7 @@
 <template>
   <file-pond :value="value"
              @input="input"
+             ref="filePond"
              :label-idle="labelIdle"
              :allow-multiple="true"
              :allow-paste="true"
@@ -24,6 +25,13 @@ export default Vue.extend({
     value: Array as PropType<FilePondFile[]>,
     labelIdle: String,
   },
+  watch: {
+    value() {
+      if (this.$props.value?.length === 0) {
+        (this.$refs.filePond as any).removeFiles();
+      }
+    }
+  },
   methods: {
     input(value: FilePondFile[]) {
       this.$emit("input", value);
diff --git a/src/components/PipingUI.vue b/src/components/PipingUI.vue
index b5bb4163d..141c4b973 100644
--- a/src/components/PipingUI.vue
+++ b/src/components/PipingUI.vue
@@ -242,7 +242,6 @@ import Vue, {computed, onMounted, ref, watch} from 'vue';
 import {type DataUploaderProps} from '@/components/DataUploader.vue';
 import {type DataViewerProps} from "@/components/DataViewer.vue";
 import {type DataDownloaderProps} from "@/components/DataDownloader.vue";
-import * as t from 'io-ts';
 import {mdiAlert, mdiClose, mdiCollapseAll, mdiDelete, mdiDownload, mdiExpandAll, mdiEye, mdiEyeOff, mdiFileFind, mdiKey, mdiShieldCheck, mdiShieldHalfFull, mdiUpload, mdiPencil, mdiInformation} from "@mdi/js";
 import {strings} from "@/strings/strings";
 import {type FilePondFile} from "filepond";
@@ -482,6 +481,8 @@ async function send() {
     return files;
   })();
 
+  const sendingFilePondFiles: FilePondFile[] = inputFiles.value;
+  const sendingText: string = inputText.value;
   // Increment upload counter
   uploadCount.value++;
   // Delegate data uploading
@@ -490,9 +491,21 @@ async function send() {
     props: {
       uploadNo: uploadCount.value,
       data: body,
+      inputFileName: Array.isArray(body) && body.length === 1 ? body[0].name : undefined,
       serverUrl: pipingServerUrl.value,
       secretPath: secretPath.value,
       protection: protection.value,
+      // NOTE: This may leak when not succeeded
+      onSentSuccessfully() {
+        if (inputFiles.value === sendingFilePondFiles) {
+          // clear input files
+          inputFiles.value = [];
+        }
+        if (inputText.value === sendingText) {
+          // clear input text
+          inputText.value = '';
+        }
+      },
     }
   });
   // Open by default
diff --git a/src/components/UpdateAppButton.vue b/src/components/UpdateAppButton.vue
new file mode 100644
index 000000000..f9be31e48
--- /dev/null
+++ b/src/components/UpdateAppButton.vue
@@ -0,0 +1,15 @@
+<template>
+  <v-btn color="warning" x-large block @click="update()">
+    <v-icon >{{ mdiRefresh }}</v-icon>
+    {{ strings?.['update_the_app'] }}
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import {strings} from "@/strings/strings";
+import {mdiRefresh} from "@mdi/js";
+
+function update() {
+  window.location.reload();
+}
+</script>
diff --git a/src/datatypes.ts b/src/datatypes.ts
index 528c52d12..2cacbbba8 100644
--- a/src/datatypes.ts
+++ b/src/datatypes.ts
@@ -1,4 +1,4 @@
-import * as t from 'io-ts';
+import {z} from "zod";
 
 export type Protection = NoProtection | PasswordProtection| PasswordlessProtection;
 type NoProtection = {
@@ -14,33 +14,36 @@ type PasswordlessProtection = {
   alwaysSendVerify: boolean,
 };
 
-const rsaOtherPrimesInfoType = t.partial({
-  d: t.string,
-  r: t.string,
-  t: t.string,
-});
-export const jsonWebKeyType = t.partial({
-  alg: t.string,
-  crv: t.string,
-  d: t.string,
-  dp: t.string,
-  dq: t.string,
-  e: t.string,
-  ext: t.boolean,
-  k: t.string,
-  key_ops: t.array(t.string),
-  n: t.string,
-  oth: t.array(rsaOtherPrimesInfoType),
-  p: t.string,
-  q: t.string,
-  qi: t.string,
-  use: t.string,
-  x: t.string,
-  y: t.string,
-});
-export const ecJsonWebKeyType = t.intersection([
-  t.type({
-    kty: t.literal('EC'),
+const rsaOtherPrimesInfoType = z.object({
+  d: z.string(),
+  r: z.string(),
+  t: z.string(),
+}).partial();
+
+export const jsonWebKeyType = z.object({
+  alg: z.string(),
+  crv: z.string(),
+  d: z.string(),
+  dp: z.string(),
+  dq: z.string(),
+  e: z.string(),
+  ext: z.boolean(),
+  k: z.string(),
+  key_ops: z.array(z.string()),
+  n: z.string(),
+  oth: z.array(rsaOtherPrimesInfoType),
+  p: z.string(),
+  q: z.string(),
+  qi: z.string(),
+  use: z.string(),
+  x: z.string(),
+  y: z.string(),
+}).partial()
+  .passthrough();
+
+export const ecJsonWebKeyType = z.intersection(
+  z.object({
+    kty: z.literal('EC'),
   }),
   jsonWebKeyType,
-]);
+);
diff --git a/src/piping-ui-auth/KEY_EXCHANGE_VERSION.ts b/src/piping-ui-auth/KEY_EXCHANGE_VERSION.ts
index dde201b0e..b8293e913 100644
--- a/src/piping-ui-auth/KEY_EXCHANGE_VERSION.ts
+++ b/src/piping-ui-auth/KEY_EXCHANGE_VERSION.ts
@@ -1 +1 @@
-export const KEY_EXCHANGE_VERSION = 3;
+export const KEY_EXCHANGE_VERSION = 4;
diff --git a/src/piping-ui-auth/for-legacy.ts b/src/piping-ui-auth/for-legacy.ts
new file mode 100644
index 000000000..30edd0519
--- /dev/null
+++ b/src/piping-ui-auth/for-legacy.ts
@@ -0,0 +1,40 @@
+import {z} from "zod";
+import urlJoin from "url-join";
+import {sha256} from "@/utils/sha256";
+
+const keyExchangeParcelLegacyType = z.object({
+  version: z.number(),
+});
+type KeyExchangeLegacyParcel = z.infer<typeof keyExchangeParcelLegacyType>;
+
+async function keyExchangePathBeforeV3(type: 'sender' | 'receiver', secretPath: string): Promise<string> {
+  return await sha256(`${secretPath}/key_exchange/${type}`);
+}
+
+// For testing: https://git-ce4f4b3d9b88d47280bc46ee2ce769b01d7b0653--piping-ui.netlify.app/
+export function makeKeyExchangeFailForLegacy(serverUrl: string, type: 'sender' | 'receiver', secretPath: string, abortController: AbortController): void {
+  // key exchange version to notify
+  const oldKeyExchangeVersion = 3;
+  (async () => {
+    try {
+      const keyExchangeParcel: KeyExchangeLegacyParcel = {
+        version: oldKeyExchangeVersion + 1,
+      };
+      const myPath = await keyExchangePathBeforeV3(type, secretPath);
+      const peerPath = await keyExchangePathBeforeV3(type === 'sender' ? 'receiver' : 'sender', secretPath);
+      const postResPromise = await fetch(urlJoin(serverUrl, myPath), {
+        method: 'POST',
+        body: JSON.stringify(keyExchangeParcel),
+        signal: abortController.signal,
+      });
+      const peerResPromise = await fetch(urlJoin(serverUrl, peerPath), {
+        signal: abortController.signal,
+      });
+    } catch (e: any) {
+      if (e.name === 'AbortError') {
+        return;
+      }
+      console.warn(e);
+    }
+  })();
+}
diff --git a/src/piping-ui-auth/index.ts b/src/piping-ui-auth/index.ts
index d36694787..f5ed1bbdb 100644
--- a/src/piping-ui-auth/index.ts
+++ b/src/piping-ui-auth/index.ts
@@ -1,43 +1,47 @@
 import {ecJsonWebKeyType, jsonWebKeyType, type Protection} from "@/datatypes";
-import type {Validation} from "io-ts";
 import {sha256} from "@/utils/sha256";
 import * as openPgpUtils from "@/utils/openpgp-utils";
 import {jwkThumbprintByEncoding} from "jwk-thumbprint";
-import {stringToUint8Array} from 'binconv/dist/src/stringToUint8Array';
 import {uint8ArrayToBase64} from 'binconv/dist/src/uint8ArrayToBase64';
-import {uint8ArrayToString} from 'binconv/dist/src/uint8ArrayToString';
 import {base64ToUint8Array} from 'binconv/dist/src/base64ToUint8Array';
 import {uint8ArrayToHexString} from 'binconv/dist/src/uint8ArrayToHexString';
 import urlJoin from "url-join";
-import * as t from 'io-ts';
+import {z} from "zod";
 import {KEY_EXCHANGE_VERSION} from "@/piping-ui-auth/KEY_EXCHANGE_VERSION";
+import {makeKeyExchangeFailForLegacy} from "@/piping-ui-auth/for-legacy";
 
-export const keyExchangeParcelType = t.type({
-  version: t.number,
-});
-export type KeyExchangeParcel = t.TypeOf<typeof keyExchangeParcelType>;
+export const keyExchangeParcelType = z.object({
+  format: z.literal("piping_ui_auth"),
+  version: z.number(),
+}).passthrough();
+export type KeyExchangeParcel = z.infer<typeof keyExchangeParcelType>;
 
-export const keyExchangeV3ParcelType = t.type({
-  version: t.literal(3),
-  publicSigningJwk: jsonWebKeyType,
-  payload: t.string,
-  signature: t.string,
+export const keyExchangeV4ParcelType = z.object({
+  format: z.literal("piping_ui_auth"),
+  version: z.literal(4),
+  public_signing_jwk: jsonWebKeyType,
+  payload: z.string(),
+  signature: z.string(),
 });
-export type KeyExchangeV3Parcel = t.TypeOf<typeof keyExchangeV3ParcelType>;
+export type KeyExchangeV4Parcel = z.infer<typeof keyExchangeV4ParcelType>;
+
+// Ensure KeyExchangeVXParcel is subtype of KeyExchangeParcel
+type IsSubTypeOf<A extends B, B> = void;
+type __DUMMY1__ = IsSubTypeOf<KeyExchangeV4Parcel, KeyExchangeParcel>;
 
-export const keyExchangeParcelPayloadType = t.type({
+export const keyExchangeParcelPayloadType = z.object({
   // Public encryption JWK
-  publicEncryptJwk: ecJsonWebKeyType,
+  public_encrypt_jwk: ecJsonWebKeyType,
   // For mitigating path collision
-  mainPathFactor: t.string,
+  main_path_factor: z.string(),
 });
-export type keyExchangeParcelPayloadType = t.TypeOf<typeof keyExchangeParcelPayloadType>;
+export type keyExchangeParcelPayloadType = z.infer<typeof keyExchangeParcelPayloadType>;
 
-export const verifiedParcelType = t.type({
-  verified: t.boolean,
-  extension: t.union([t.unknown, t.undefined]),
+export const verifiedParcelType = z.object({
+  verified: z.boolean(),
+  extension: z.union([z.unknown(), z.undefined()]),
 });
-export type VerifiedParcel = t.TypeOf<typeof verifiedParcelType>
+export type VerifiedParcel = z.infer<typeof verifiedParcelType>
 
 export type VerificationStep =
   {type: 'initial'} |
@@ -45,30 +49,35 @@ export type VerificationStep =
   {type: 'verification_code_arrived', mainPath: string, verificationCode: string, key: Uint8Array} |
   {type: 'verified', verified: boolean};
 
-const verifiedExtensionType = t.union([
-  t.type({
-    version: t.literal(1),
-    mimeType: t.string,
-    fileExtension: t.string,
+const verifiedExtensionType = z.object({
+  version: z.literal(2),
+  data_meta: z.object({
+    mime_type: z.union([z.string(), z.undefined()]),
+    size: z.union([z.number(), z.undefined()]),
+    file_name: z.union([z.string(), z.undefined()]),
+    file_extension: z.union([z.string(), z.undefined()]),
   }),
-  t.undefined,
-]);
+});
+export type VerifiedExtension = z.infer<typeof verifiedExtensionType>;
 
 async function keyExchangePath(type: 'sender' | 'receiver', secretPath: string): Promise<string> {
-  return await sha256(`${secretPath}/key_exchange/${type}`);
+  if (type === 'sender') {
+    return secretPath;
+  }
+  return `${secretPath}/receiver-sender`;
 }
 
 async function verifiedPath(mainPath: string): Promise<string> {
   return await sha256(`${mainPath}/verified`);
 }
 
-export async function verify(serverUrl: string, mainPath: string, key: Uint8Array, verified: boolean, parcelExtension: t.TypeOf<typeof verifiedExtensionType>, canceledPromise: Promise<void>) {
+export async function verify(serverUrl: string, mainPath: string, key: Uint8Array, verified: boolean, parcelExtension: VerifiedExtension, canceledPromise: Promise<void>) {
   const verifiedParcel: VerifiedParcel = {
     verified,
     extension: parcelExtension,
   };
   const encryptedVerifiedParcel = await openPgpUtils.encrypt(
-    stringToUint8Array(JSON.stringify(verifiedParcel)),
+    new TextEncoder().encode(JSON.stringify(verifiedParcel)),
     key,
   );
   const path = urlJoin(serverUrl, await verifiedPath(mainPath));
@@ -126,8 +135,8 @@ export async function keyExchange(serverUrl: string, type: 'sender' | 'receiver'
     encryptKeyPair.publicKey
   ) as JsonWebKey & {kty: 'EC'};
   const payloadJson: keyExchangeParcelPayloadType = {
-    publicEncryptJwk,
-    mainPathFactor: uint8ArrayToHexString(new Uint8Array(await crypto.subtle.digest('SHA-256', crypto.getRandomValues(new Uint8Array(32))))),
+    public_encrypt_jwk: publicEncryptJwk,
+    main_path_factor: uint8ArrayToHexString(new Uint8Array(await crypto.subtle.digest('SHA-256', crypto.getRandomValues(new Uint8Array(32))))),
   };
   const payload = JSON.stringify(payloadJson);
   const signature = await window.crypto.subtle.sign(
@@ -136,22 +145,27 @@ export async function keyExchange(serverUrl: string, type: 'sender' | 'receiver'
     new TextEncoder().encode(payload),
   );
   const publicSigningJwk = await crypto.subtle.exportKey('jwk', ecdsaP384SigningKeyPair.publicKey);
-  const keyExchangeParcel: KeyExchangeV3Parcel = {
+  const keyExchangeParcel: KeyExchangeV4Parcel = {
+    format: 'piping_ui_auth',
     version: KEY_EXCHANGE_VERSION,
-    publicSigningJwk,
+    public_signing_jwk: publicSigningJwk,
     payload,
     signature: uint8ArrayToBase64(new Uint8Array(signature)),
   };
   const myPath = await keyExchangePath(type, secretPath);
   const peerPath = await keyExchangePath(type === 'sender' ? 'receiver' : 'sender', secretPath);
   const abortController = new AbortController();
+  const oldKeyExchangeAbortController = new AbortController();
+  makeKeyExchangeFailForLegacy(serverUrl, type, secretPath, oldKeyExchangeAbortController);
   canceledPromise.then(() => {
     abortController.abort();
+    oldKeyExchangeAbortController.abort();
   });
   // Exchange
   const postResPromise = fetch(urlJoin(serverUrl, myPath), {
     method: 'POST',
-    body: JSON.stringify(keyExchangeParcel),
+    // Indent JSON to let command-line users to know Piping UI Auth enabled
+    body: JSON.stringify(keyExchangeParcel, null, 2),
     signal: abortController.signal,
   });
   const peerResPromise = fetch(urlJoin(serverUrl, peerPath), {
@@ -184,22 +198,23 @@ export async function keyExchange(serverUrl: string, type: 'sender' | 'receiver'
   if (peerRes.status !== 200) {
     return {type: "error", keyExchangeError: {code: 'receive_failed'}};
   }
-  const peerKeyExchangeEither: Validation<KeyExchangeParcel> = keyExchangeParcelType.decode(JSON.parse(await peerRes.text()));
-  if (peerKeyExchangeEither._tag === 'Left') {
+  oldKeyExchangeAbortController.abort();
+  const peerKeyExchangeParseReturn: z.SafeParseReturnType<unknown, KeyExchangeParcel> = keyExchangeParcelType.safeParse(JSON.parse(await peerRes.text()));
+  if (!peerKeyExchangeParseReturn.success) {
     return {type: "error", keyExchangeError: { code: 'invalid_parcel_format' }};
   }
-  const peerKeyExchange = peerKeyExchangeEither.right;
+  const peerKeyExchange = peerKeyExchangeParseReturn.data;
   if (KEY_EXCHANGE_VERSION !== peerKeyExchange.version) {
     return {type: "error", keyExchangeError: {code: 'key_exchange_version_mismatch', peerVersion: peerKeyExchange.version}};
   }
-  const peerExchangeV3Either = keyExchangeV3ParcelType.decode(peerKeyExchange);
-  if (peerExchangeV3Either._tag === 'Left') {
+  const peerExchangeV3ParseReturn = keyExchangeV4ParcelType.safeParse(peerKeyExchange);
+  if (!peerExchangeV3ParseReturn.success) {
     return {type: "error", keyExchangeError: {code: 'invalid_v3_parcel_format'}};
   }
-  const peerKeyExchangeV3 = peerExchangeV3Either.right;
+  const peerKeyExchangeV3 = peerExchangeV3ParseReturn.data;
   const peerPublicSigningKey: CryptoKey = await crypto.subtle.importKey(
     'jwk',
-    peerKeyExchangeV3.publicSigningJwk,
+    peerKeyExchangeV3.public_signing_jwk,
     { name: 'ECDSA', namedCurve: 'P-384' },
     false,
     ["verify"],
@@ -213,14 +228,14 @@ export async function keyExchange(serverUrl: string, type: 'sender' | 'receiver'
   if (!payloadVerified) {
     return {type: "error", keyExchangeError: {code: 'payload_not_verified'}};
   }
-  const peerKeyExchangePayloadEither = keyExchangeParcelPayloadType.decode(JSON.parse(peerKeyExchangeV3.payload));
-  if (peerKeyExchangePayloadEither._tag === 'Left') {
+  const peerKeyExchangePayloadParseReturn = keyExchangeParcelPayloadType.safeParse(JSON.parse(peerKeyExchangeV3.payload));
+  if (!peerKeyExchangePayloadParseReturn.success) {
     return {type: "error", keyExchangeError: {code: 'invalid_v3_parcel_format'}};
   }
-  const peerKeyExchangePayload = peerKeyExchangePayloadEither.right;
+  const peerKeyExchangePayload = peerKeyExchangePayloadParseReturn.data;
   const peerPublicEncryptKey = await crypto.subtle.importKey(
     'jwk',
-    peerKeyExchangePayload.publicEncryptJwk,
+    peerKeyExchangePayload.public_encrypt_jwk,
     {name: 'ECDH', namedCurve: 'P-256'},
     false,
     []
@@ -230,8 +245,8 @@ export async function keyExchange(serverUrl: string, type: 'sender' | 'receiver'
     encryptKeyPair.privateKey,
     KEY_BITS,
   );
-  const mainPath = await generateMainPath(payloadJson.mainPathFactor, peerKeyExchangePayload.mainPathFactor);
-  const verificationCode = await generateVerificationCode(publicSigningJwk, peerKeyExchangeV3.publicSigningJwk);
+  const mainPath = await generateMainPath(payloadJson.main_path_factor, peerKeyExchangePayload.main_path_factor);
+  const verificationCode = await generateVerificationCode(publicSigningJwk, peerKeyExchangeV3.public_signing_jwk);
   return {
     type: 'key',
     key: new Uint8Array(keyBits),
@@ -262,7 +277,7 @@ export async function keyExchangeAndReceiveVerified(serverUrl: string, secretPat
   Promise<
     {type: 'key', protectionType: 'raw', key: undefined } |
     {type: 'key', protectionType: 'password', key: string} |
-    {type: 'key', protectionType: 'passwordless', key: Uint8Array, mainPath: string, verificationCode: string, fileType: { mimeType: string, fileExtension: string } | undefined } |
+    {type: 'key', protectionType: 'passwordless', key: Uint8Array, mainPath: string, verificationCode: string, dataMeta: { mimeType: string | undefined, fileExtension: string | undefined, size: number | undefined, fileName: string | undefined } } |
     {type: 'error', error: KeyExchangeAndReceiveVerifiedError } |
     {type: 'canceled' }
   > {
@@ -320,14 +335,14 @@ export async function keyExchangeAndReceiveVerified(serverUrl: string, secretPat
       // Decrypt body
       const decryptedBody: Uint8Array = await openPgpUtils.decrypt(encryptedVerified, key);
       // Parse
-      const verifiedParcelEither: Validation<VerifiedParcel> = verifiedParcelType.decode(JSON.parse(uint8ArrayToString(decryptedBody)));
-      if (verifiedParcelEither._tag === "Left") {
+      const verifiedParcelParseReturn: z.SafeParseReturnType<unknown, VerifiedParcel> = verifiedParcelType.safeParse(JSON.parse(new TextDecoder().decode(decryptedBody)));
+      if (!verifiedParcelParseReturn.success) {
         return {
           type: "error",
           error: { code: 'key_exchange_error', keyExchangeError: { code: 'invalid_parcel_format' }},
         };
       }
-      const {verified, extension} = verifiedParcelEither.right;
+      const {verified, extension} = verifiedParcelParseReturn.data;
       setVerificationStep({type: 'verified', verified});
       if (!verified) {
         return {
@@ -335,20 +350,27 @@ export async function keyExchangeAndReceiveVerified(serverUrl: string, secretPat
           error: { code: 'sender_not_verified' },
         };
       }
-      const verifiedExtensionEither = verifiedExtensionType.decode(extension);
-      if (verifiedExtensionEither._tag === "Left") {
-        return {
-          type: "error",
-          error: { code: 'key_exchange_error', keyExchangeError: { code: 'invalid_parcel_format' }},
-        };
-      }
+      const verifiedExtensionParseReturn = verifiedExtensionType.safeParse(extension);
+      const verifiedExtension = (() => {
+        if (verifiedExtensionParseReturn.success) {
+          return verifiedExtensionParseReturn.data;
+        }
+        // Should not occur an error aggressively because the purpose of the extension provides better user experience.
+        console.log("extension is not compatible", extension);
+        return undefined;
+      })();
       return {
         type: 'key',
         key,
         protectionType: 'passwordless',
         mainPath,
         verificationCode,
-        fileType: verifiedExtensionEither.right,
+        dataMeta: {
+          mimeType: verifiedExtension?.data_meta.mime_type,
+          size: verifiedExtension?.data_meta.size,
+          fileName: verifiedExtension?.data_meta.file_name,
+          fileExtension: verifiedExtension?.data_meta.file_extension,
+        },
       };
     }
   }
diff --git a/src/piping-ui-utils/decideFileName.ts b/src/piping-ui-utils/decideFileName.ts
new file mode 100644
index 000000000..623738abd
--- /dev/null
+++ b/src/piping-ui-utils/decideFileName.ts
@@ -0,0 +1,16 @@
+type DataMeta = {
+  fileName: string | undefined,
+  fileExtension: string | undefined,
+};
+
+export function decideFileName({ topPriorityDataMeta, secretPath, sniffedFileExtension }: { topPriorityDataMeta: DataMeta | undefined, secretPath: string, sniffedFileExtension: string | undefined } ): string {
+  if (topPriorityDataMeta !== undefined && topPriorityDataMeta.fileName !== undefined) {
+    return topPriorityDataMeta.fileName;
+  }
+  const fileExtension: string | undefined = topPriorityDataMeta?.fileExtension ?? sniffedFileExtension;
+  let fileName = secretPath;
+  if (fileExtension !== undefined && !fileName.match(/^.+\..+$/)) {
+    fileName = `${fileName}.${fileExtension}`;
+  }
+  return fileName;
+}
diff --git a/src/piping-ui-utils.ts b/src/piping-ui-utils/pipingUiScrollTo.ts
similarity index 81%
rename from src/piping-ui-utils.ts
rename to src/piping-ui-utils/pipingUiScrollTo.ts
index df8095df8..9a34435b0 100644
--- a/src/piping-ui-utils.ts
+++ b/src/piping-ui-utils/pipingUiScrollTo.ts
@@ -5,7 +5,7 @@ import {appBarPromise} from "@/app-bar-promise";
  * Scroll to the specific element considering the app bar
  * @param element
  */
-export async function scrollTo(element: Element): Promise<void> {
+export async function pipingUiScrollTo(element: Element): Promise<void> {
   const appBar = await appBarPromise;
   const moveTop = element.getBoundingClientRect().y - appBar.clientHeight;
   window.scrollBy({ top: moveTop, left: 0, behavior: 'smooth' });
diff --git a/src/piping-ui-utils/shouldUpdateApp.ts b/src/piping-ui-utils/shouldUpdateApp.ts
new file mode 100644
index 000000000..2a859d2db
--- /dev/null
+++ b/src/piping-ui-utils/shouldUpdateApp.ts
@@ -0,0 +1,9 @@
+import * as pipingUiAuth from "@/piping-ui-auth";
+import {KEY_EXCHANGE_VERSION} from "@/piping-ui-auth/KEY_EXCHANGE_VERSION";
+
+export function shouldUpdateApp(keyExchangeError: pipingUiAuth.KeyExchangeError): boolean {
+  if (keyExchangeError.code !== "key_exchange_version_mismatch") {
+    return false;
+  }
+  return KEY_EXCHANGE_VERSION < keyExchangeError.peerVersion;
+}
diff --git a/src/registerServiceWorker.ts b/src/registerServiceWorker.ts
index 24d42a4bb..afe4d8d59 100644
--- a/src/registerServiceWorker.ts
+++ b/src/registerServiceWorker.ts
@@ -3,7 +3,7 @@ const swDownloadAsync = () => import("@/sw-download");
 
 register(`${process.env.BASE_URL}service-worker.js`, {
   ready () {
-    console.log('App is being served from cache by a service worker.');
+    console.log('Service worker is ready.');
   },
   async registered () {
     console.log('Service worker has been registered.');
@@ -18,9 +18,6 @@ register(`${process.env.BASE_URL}service-worker.js`, {
   },
   updated (registration) {
     console.log('New content is available; please refresh.')
-    document.dispatchEvent(
-      new CustomEvent('swUpdated', { detail: registration })
-    );
   },
   offline () {
     console.log('No internet connection found. App is running in offline mode.')
diff --git a/src/states/pipingServerUrlHistory.ts b/src/states/pipingServerUrlHistory.ts
index 793b21f7f..f0fb4fe10 100644
--- a/src/states/pipingServerUrlHistory.ts
+++ b/src/states/pipingServerUrlHistory.ts
@@ -1,14 +1,14 @@
 import {computed, ref} from "vue";
 import {keys} from "@/local-storage-keys";
 import {loadLocalStorageWithValidation} from "@/utils/loadLocalStorageWithValidation";
-import * as t from "io-ts";
+import {z} from "zod";
 import buildConstants from "@/build-constants";
 
 const defaultServerUrls: ReadonlyArray<string> = buildConstants.pipingServerUrls;
 
 const inner = ref<readonly string[]>((() => {
   // Load server URL history from local storage
-  const savedServerUrlHistory: string[] | undefined = loadLocalStorageWithValidation(t.array(t.string), keys.serverUrlHistory);
+  const savedServerUrlHistory: string[] | undefined = loadLocalStorageWithValidation(z.array(z.string()), keys.serverUrlHistory);
   // If none
   if (savedServerUrlHistory === undefined) {
     // Set default
diff --git a/src/states/secretPathHistory.ts b/src/states/secretPathHistory.ts
index 2920d90f2..b5cf105d5 100644
--- a/src/states/secretPathHistory.ts
+++ b/src/states/secretPathHistory.ts
@@ -1,11 +1,11 @@
 import {computed, ref} from "vue";
 import {keys} from "@/local-storage-keys";
 import {loadLocalStorageWithValidation} from "@/utils/loadLocalStorageWithValidation";
-import * as t from "io-ts";
+import {z} from "zod";
 
 const inner = ref<readonly string[]>((() => {
   // Load secret path history from local storage
-  const savedSecretPathHistory: string[] | undefined = loadLocalStorageWithValidation(t.array(t.string), keys.secretPathHistory);
+  const savedSecretPathHistory: string[] | undefined = loadLocalStorageWithValidation(z.array(z.string()), keys.secretPathHistory);
   if (savedSecretPathHistory === undefined) {
     return [];
   }
diff --git a/src/strings/en.ts b/src/strings/en.ts
index f4912309d..96bd9ee75 100644
--- a/src/strings/en.ts
+++ b/src/strings/en.ts
@@ -107,6 +107,7 @@ curl https://ppng.io/mypath | gpg</code>
   },
   data_uploader_xhr_upload_error: 'An error occurred while uploading',
   cancel: 'Cancel',
+  update_the_app: 'Update the app',
   view_in_viewer: 'View',
   download_url: 'Download URL',
   waiting_for_sender: 'Waiting for sender...',
diff --git a/src/strings/ja.ts b/src/strings/ja.ts
index cd606b2fc..2ca63c3d2 100644
--- a/src/strings/ja.ts
+++ b/src/strings/ja.ts
@@ -106,6 +106,7 @@ curl https://ppng.io/mypath | gpg</code>
     return sanitizeHtmlAllowingATag(`エラーが発生しました。サーバーが0.9.4より低い可能性があります。 <a href="${versionUrl}" target="_blank">${versionUrl}</a> でバージョンの確認できます。`);
   },
   data_uploader_xhr_upload_error: 'アップロード中にエラーが発生しました',
+  update_the_app: 'アプリを更新',
   cancel: 'キャンセル',
   view_in_viewer: '表示',
   decrypting: '復号中...',
diff --git a/src/utils/getReadableStreamWithProgress.ts b/src/utils/getReadableStreamWithProgress.ts
index 29dea6919..299bd45e6 100644
--- a/src/utils/getReadableStreamWithProgress.ts
+++ b/src/utils/getReadableStreamWithProgress.ts
@@ -1,14 +1,15 @@
-export function getReadableStreamWithProgress(baseStream: ReadableStream<Uint8Array>, onRead: (n: number) => void): {stream: ReadableStream<Uint8Array>, cancel: () => void} {
+export function getReadableStreamWithProgress(baseStream: ReadableStream<Uint8Array>, { onRead, onFinished }: { onRead?: (n: number) => void, onFinished?: () => void } ): {stream: ReadableStream<Uint8Array>, cancel: () => void} {
   const reader = baseStream.getReader();
   const stream = new ReadableStream({
     async pull(ctrl) {
       const result = await reader.read();
       if (result.done) {
         ctrl.close();
+        onFinished?.();
         return;
       }
       ctrl.enqueue(result.value);
-      onRead(result.value.byteLength);
+      onRead?.(result.value.byteLength);
     },
   });
   return {
diff --git a/src/utils/loadLocalStorageWithValidation.ts b/src/utils/loadLocalStorageWithValidation.ts
index bdf27c49e..0034d6b9d 100644
--- a/src/utils/loadLocalStorageWithValidation.ts
+++ b/src/utils/loadLocalStorageWithValidation.ts
@@ -1,11 +1,13 @@
-import * as t from "io-ts";
+import {z} from "zod";
 
 // Load from local storage with validation
-export function loadLocalStorageWithValidation<T>(typeC: t.Type<T>, key: string): T | undefined {
+export function loadLocalStorageWithValidation<Output>(zodType: z.ZodType<Output>, key: string): Output | undefined {
   const item: string | null = window.localStorage.getItem(key);
   if (item !== null) {
-    const either = typeC.decode(JSON.parse(item));
-    if (either._tag === 'Left') return undefined;
-    return either.right;
+    const parseReturn = zodType.safeParse(JSON.parse(item));
+    if (!parseReturn.success) {
+      return undefined;
+    }
+    return parseReturn.data;
   }
 }