diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2b0e976..167add2 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -10,7 +10,7 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  lint:
+  test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
@@ -20,3 +20,11 @@ jobs:
       - run: corepack enable
       - run: pnpm i
       - run: pnpm lint-check
+      - run: pnpm exec playwright install chromium --with-deps --no-shell
+      - run: pnpm test-e2e
+      - uses: actions/upload-artifact@v7
+        if: failure()
+        with:
+          name: playwright-report
+          path: test-results/
+          retention-days: 7
diff --git a/.gitignore b/.gitignore
index 1048609..5f70dce 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,2 @@
 node_modules
-.wrangler
+test-results
diff --git a/docs/prd.md b/docs/prd.md
index 14c78c5..b7bb3e7 100644
--- a/docs/prd.md
+++ b/docs/prd.md
@@ -7,15 +7,19 @@
 - [x] chore: add example zip from vitest html artifact
 - [x] `?url=` param for public URLs (GitHub artifact download requires auth, but pre-signed Azure blob URLs and S3 buckets work)
 - [x] File picker button (not just drag-and-drop) — mobile/accessibility
-- [ ] refactor: rework code
-  - deduplicate fflate import (script tag on line 6 is dead weight, only the ES module import is needed)
-  - share constants (CACHE_NAME, PREFIX) between index.html and sw.js instead of duplicating
-  - move MIME map to sw.js (it's serving the files, not the main thread)
-  - add try/catch around unzipSync for corrupt/non-zip files
-  - consider async unzip for large zips (fflate has async `unzip`)
-  - SW scope may break under subpath hosting
-- [ ] "Load another zip" button — currently the drop zone hides permanently after first load, no way to swap without refresh
+- [x] refactor: remove dead fflate script tag, use single ESM import
+- [x] refactor: fix XSS in fetch error display (Preact escapes by default)
+- [x] refactor: parallelize cache.put() with Promise.all
+- [x] refactor: consider async unzip for large zips (fflate has async `unzip`)
+- [x] refactor: add try/catch around unzipSync for corrupt/non-zip files
+- [x] refactor: SW ready blocks event listeners — make non-blocking, show "registering…" status
+- [ ] refactor: share constants (CACHE_NAME, PREFIX) between index.html and sw.js
+- [ ] refactor: extract `<style>` block from index.html to style.css
+- [ ] refactor: subpath hosting — PREFIX is hardcoded to `/zipview/site/`; real fix derives it dynamically from location.pathname (also affects sw.js scope and startsWith check)
+- [x] setup e2e
+
+## Backlog
+
 - [ ] Persist last zip in IndexedDB so refresh doesn't lose state
-- [ ] Multi-zip / tabbed view — drop multiple zips, or auto-detect multiple dirs in one zip
-- [ ] Publish as `npx zipview`
-- [ ] Self-bootstrapping: embed SW in the static site output itself so the zip is directly openable
+- [ ] Provide CLI / API to package SPA into "index.html + sw.js" bundle
+- [ ] Integrate as Vitest html reporter two files mode
diff --git a/e2e/basic.spec.ts b/e2e/basic.spec.ts
new file mode 100644
index 0000000..1cf9a2f
--- /dev/null
+++ b/e2e/basic.spec.ts
@@ -0,0 +1,21 @@
+import { expect, Page, test } from "@playwright/test";
+
+test("example", async ({ page }) => {
+  await page.goto("/");
+  await expect(page.getByTestId("status")).toContainText("Service worker ready");
+  await page.getByText("example").click();
+  await testHtmlReport(page);
+});
+
+test("file input", async ({ page }) => {
+  await page.goto("/");
+  await expect(page.getByTestId("status")).toContainText("Service worker ready");
+  await page.locator('input[type="file"]').setInputFiles("docs/assets/vitest-html-reporter.zip");
+  await testHtmlReport(page);
+});
+
+async function testHtmlReport(page: Page) {
+  await expect(page.getByTestId("status")).toContainText("Cached 7 files");
+  const frame = page.frameLocator("iframe");
+  await expect(frame.getByTestId("pass-entry")).toHaveText("6 Pass");
+}
diff --git a/package.json b/package.json
index 8cd57ff..64bd8bd 100644
--- a/package.json
+++ b/package.json
@@ -5,11 +5,13 @@
   "scripts": {
     "prepare": "vp config",
     "dev": " sirv ./src --dev --single",
-    "lint": "vp fmt",
-    "lint-check": "vp fmt --check"
+    "lint": "vp check --fix --no-lint",
+    "lint-check": "vp check --no-lint",
+    "test-e2e": "playwright test"
   },
-  "dependencies": {},
   "devDependencies": {
+    "@playwright/test": "^1.50.0",
+    "@types/node": "^24.12.0",
     "sirv-cli": "^3.0.1",
     "vite-plus": "latest"
   },
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..a98fe56
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,26 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  workers: 1,
+  webServer: {
+    command: "pnpm dev --port 5174",
+    url: "http://localhost:5174",
+    reuseExistingServer: false,
+  },
+  expect: {
+    timeout: 5000,
+  },
+  use: {
+    ...devices["Desktop Chrome"],
+    baseURL: "http://localhost:5174",
+    actionTimeout: 5000,
+    channel: "chromium",
+  },
+  forbidOnly: !!process.env.CI,
+  reporter: [
+    ["list"],
+    ["json", { outputFile: "test-results/report.json" }],
+    ...(process.env.CI ? [["github"] as const] : []),
+  ],
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7baa68a..e0335dd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,12 +8,18 @@ importers:
 
   .:
     devDependencies:
+      '@playwright/test':
+        specifier: ^1.50.0
+        version: 1.58.2
+      '@types/node':
+        specifier: ^24.12.0
+        version: 24.12.0
       sirv-cli:
         specifier: ^3.0.1
         version: 3.0.1
       vite-plus:
         specifier: latest
-        version: 0.1.14(esbuild@0.27.3)(vite@8.0.2(esbuild@0.27.3))
+        version: 0.1.14(@types/node@24.12.0)(esbuild@0.27.3)(vite@8.0.2(@types/node@24.12.0)(esbuild@0.27.3))
 
 packages:
 
@@ -466,6 +472,11 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@playwright/test@1.58.2':
+    resolution: {integrity: sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
@@ -579,6 +590,9 @@ packages:
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
+  '@types/node@24.12.0':
+    resolution: {integrity: sha512-GYDxsZi3ChgmckRT9HPU0WEhKLP08ev/Yfcq2AstjrDASOYCSXeyjDsHg4v5t4jOj7cyDX3vmprafKlWIG9MXQ==}
+
   '@voidzero-dev/vite-plus-core@0.1.14':
     resolution: {integrity: sha512-CCWzdkfW0fo0cQNlIsYp5fOuH2IwKuPZEb2UY2Z8gXcp5pG74A82H2Pthj0heAuvYTAnfT7kEC6zM+RbiBgQbg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -753,6 +767,11 @@ packages:
       picomatch:
         optional: true
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -897,6 +916,16 @@ packages:
     resolution: {integrity: sha512-1wrVzJ2STrpmONHKBy228LM1b84msXDUoAzVEl0R8Mz4Ce6EPr+IVtxm8+yvrqLYMHswREkjYFaMxnyGnaY3Ng==}
     hasBin: true
 
+  playwright-core@1.58.2:
+    resolution: {integrity: sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.58.2:
+    resolution: {integrity: sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   pngjs@7.0.0:
     resolution: {integrity: sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==}
     engines: {node: '>=14.19.0'}
@@ -968,6 +997,9 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  undici-types@7.16.0:
+    resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
+
   vite-plus@0.1.14:
     resolution: {integrity: sha512-p4pWlpZZNiEsHxPWNdeIU9iuPix3ydm3ficb0dXPggoyIkdotfXtvn2NPX9KwfiQImU72EVEs4+VYBZYNcUYrw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1272,6 +1304,10 @@ snapshots:
   '@oxlint/binding-win32-x64-msvc@1.57.0':
     optional: true
 
+  '@playwright/test@1.58.2':
+    dependencies:
+      playwright: 1.58.2
+
   '@polka/url@1.0.0-next.29': {}
 
   '@rolldown/binding-android-arm64@1.0.0-rc.11':
@@ -1337,13 +1373,18 @@ snapshots:
 
   '@types/deep-eql@4.0.2': {}
 
-  '@voidzero-dev/vite-plus-core@0.1.14(esbuild@0.27.3)':
+  '@types/node@24.12.0':
+    dependencies:
+      undici-types: 7.16.0
+
+  '@voidzero-dev/vite-plus-core@0.1.14(@types/node@24.12.0)(esbuild@0.27.3)':
     dependencies:
       '@oxc-project/runtime': 0.121.0
       '@oxc-project/types': 0.122.0
       lightningcss: 1.32.0
       postcss: 8.5.8
     optionalDependencies:
+      '@types/node': 24.12.0
       esbuild: 0.27.3
       fsevents: 2.3.3
 
@@ -1365,11 +1406,11 @@ snapshots:
   '@voidzero-dev/vite-plus-linux-x64-musl@0.1.14':
     optional: true
 
-  '@voidzero-dev/vite-plus-test@0.1.14(esbuild@0.27.3)(vite@8.0.2(esbuild@0.27.3))':
+  '@voidzero-dev/vite-plus-test@0.1.14(@types/node@24.12.0)(esbuild@0.27.3)(vite@8.0.2(@types/node@24.12.0)(esbuild@0.27.3))':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@types/chai': 5.2.3
-      '@voidzero-dev/vite-plus-core': 0.1.14(esbuild@0.27.3)
+      '@voidzero-dev/vite-plus-core': 0.1.14(@types/node@24.12.0)(esbuild@0.27.3)
       es-module-lexer: 1.7.0
       obug: 2.1.1
       pixelmatch: 7.1.0
@@ -1379,8 +1420,10 @@ snapshots:
       tinybench: 2.9.0
       tinyexec: 1.0.4
       tinyglobby: 0.2.15
-      vite: 8.0.2(esbuild@0.27.3)
+      vite: 8.0.2(@types/node@24.12.0)(esbuild@0.27.3)
       ws: 8.20.0
+    optionalDependencies:
+      '@types/node': 24.12.0
     transitivePeerDependencies:
       - '@arethetypeswrong/core'
       - '@tsdown/css'
@@ -1458,6 +1501,9 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.4
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -1592,6 +1638,14 @@ snapshots:
     dependencies:
       pngjs: 7.0.0
 
+  playwright-core@1.58.2: {}
+
+  playwright@1.58.2:
+    dependencies:
+      playwright-core: 1.58.2
+    optionalDependencies:
+      fsevents: 2.3.2
+
   pngjs@7.0.0: {}
 
   postcss@8.5.8:
@@ -1672,11 +1726,13 @@ snapshots:
   tslib@2.8.1:
     optional: true
 
-  vite-plus@0.1.14(esbuild@0.27.3)(vite@8.0.2(esbuild@0.27.3)):
+  undici-types@7.16.0: {}
+
+  vite-plus@0.1.14(@types/node@24.12.0)(esbuild@0.27.3)(vite@8.0.2(@types/node@24.12.0)(esbuild@0.27.3)):
     dependencies:
       '@oxc-project/types': 0.122.0
-      '@voidzero-dev/vite-plus-core': 0.1.14(esbuild@0.27.3)
-      '@voidzero-dev/vite-plus-test': 0.1.14(esbuild@0.27.3)(vite@8.0.2(esbuild@0.27.3))
+      '@voidzero-dev/vite-plus-core': 0.1.14(@types/node@24.12.0)(esbuild@0.27.3)
+      '@voidzero-dev/vite-plus-test': 0.1.14(@types/node@24.12.0)(esbuild@0.27.3)(vite@8.0.2(@types/node@24.12.0)(esbuild@0.27.3))
       cac: 7.0.0
       cross-spawn: 7.0.6
       oxfmt: 0.42.0
@@ -1720,7 +1776,7 @@ snapshots:
       - vite
       - yaml
 
-  vite@8.0.2(esbuild@0.27.3):
+  vite@8.0.2(@types/node@24.12.0)(esbuild@0.27.3):
     dependencies:
       lightningcss: 1.32.0
       picomatch: 4.0.4
@@ -1728,6 +1784,7 @@ snapshots:
       rolldown: 1.0.0-rc.11
       tinyglobby: 0.2.15
     optionalDependencies:
+      '@types/node': 24.12.0
       esbuild: 0.27.3
       fsevents: 2.3.3
 
diff --git a/src/index.html b/src/index.html
index 2a73ed9..64f07c7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
     <title>Vitest Viewer</title>
     <link rel="icon" href="https://vitest.dev/logo-without-border.svg" type="image/svg+xml" />
-    <script type="module" src="https://cdn.jsdelivr.net/npm/fflate@0.8.2/esm/browser.js"></script>
     <style>
       * {
         box-sizing: border-box;
@@ -16,6 +15,9 @@
         display: flex;
         flex-direction: column;
       }
+      #app {
+        display: contents;
+      }
       #drop {
         padding: 3rem;
         text-align: center;
@@ -33,226 +35,287 @@
         border-color: #008039;
         background: #f0faf4;
       }
-
       iframe {
         flex: 1;
-        border: none;
-        margin: 0.5rem;
         border: 1px solid #eee;
+        margin: 0.5rem;
         border-radius: 4px;
       }
     </style>
   </head>
   <body>
-    <div
-      style="
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.5rem 1rem 0 1rem;
-      "
-    >
-      <a
-        href="."
-        style="
-          display: flex;
-          align-items: center;
-          gap: 0.4rem;
-          font-size: 0.9rem;
-          font-weight: 600;
-          color: inherit;
-          text-decoration: none;
-        "
-        >Vitest Viewer</a
-      >
-      <div style="flex: 1"></div>
-      <div id="status" style="font-size: 0.8rem; color: #999; display: none">
-        Status: <span id="status-msg"></span>
-      </div>
-      <a
-        href="https://github.com/vitest-dev/viewer"
-        style="font-size: 0.8rem; color: #999; text-decoration: none"
-        target="_blank"
-        rel="noopener"
-        >Source code</a
-      >
-    </div>
-    <input type="file" id="file-input" accept=".zip" hidden />
-    <div id="drop" role="button" tabindex="0">
-      <div>Drag &amp; drop or <span style="color: #008039">click to upload</span></div>
-      <div style="font-size: 0.8rem; color: #999; margin-top: 0.4rem">.zip files only</div>
-    </div>
-    <div
-      id="example"
-      style="text-align: center; font-size: 0.8rem; color: #999; margin-top: 0.5rem"
-    >
-      or try an
-      <a
-        href="?url=https://cdn.jsdelivr.net/gh/vitest-dev/viewer@main/docs/assets/vitest-html-reporter.zip"
-        style="color: #008039"
-        >example</a
-      >
-    </div>
-    <div
-      id="fetch-error"
-      hidden
-      style="text-align: center; font-size: 0.85rem; color: #c00; margin-top: 1rem"
-    ></div>
-    <iframe id="viewer" hidden></iframe>
-
+    <div id="app"></div>
     <script type="module">
-      import { unzipSync } from "https://cdn.jsdelivr.net/npm/fflate@0.8.2/esm/browser.js";
+      import { h, render, Fragment } from "https://esm.sh/preact@10";
+      import { useState, useEffect, useRef } from "https://esm.sh/preact@10/hooks";
+      import { unzip } from "https://esm.sh/fflate@0.8.2";
 
       const CACHE_NAME = "zipview-v1";
       const PREFIX = "/zipview/site/";
-      const $drop = document.getElementById("drop");
-      const $status = document.getElementById("status");
-      const $statusMsg = document.getElementById("status-msg");
-      const $viewer = document.getElementById("viewer");
 
-      function setStatus(msg) {
-        $statusMsg.textContent = msg;
-        $status.style.display = "";
-      }
+      const MIME_TYPES = {
+        html: "text/html",
+        css: "text/css",
+        js: "application/javascript",
+        mjs: "application/javascript",
+        json: "application/json",
+        svg: "image/svg+xml",
+        png: "image/png",
+        jpg: "image/jpeg",
+        jpeg: "image/jpeg",
+        gif: "image/gif",
+        woff: "font/woff",
+        woff2: "font/woff2",
+        ico: "image/x-icon",
+      };
 
-      // Register SW
-      if ("serviceWorker" in navigator) {
+      async function registerSW() {
+        if (!("serviceWorker" in navigator)) throw new Error("Service workers not supported");
         await navigator.serviceWorker.register("./sw.js");
+        // .ready waits until an active SW controls the page.
+        // Combined with skipWaiting+clients.claim in sw.js, this ensures a
+        // newly deployed sw.js is active before we write anything to the cache.
         await navigator.serviceWorker.ready;
-        setStatus("Service worker ready.");
-      } else {
-        setStatus("Service workers not supported.");
       }
 
-      const $fileInput = document.getElementById("file-input");
-      const $example = document.getElementById("example");
-
-      // Auto-load from ?url= param
-      const paramUrl = new URLSearchParams(location.search).get("url");
-      if (paramUrl) {
-        try {
-          await handleUrl(paramUrl);
-        } catch (err) {
-          const { hostname, pathname } = new URL(paramUrl);
-          const lastSegment = pathname.split("/").filter(Boolean).pop() || "";
-          const displayUrl = lastSegment ? `${hostname}/\u2026/${lastSegment}` : hostname;
+      async function cacheZip(buf) {
+        const entries = await new Promise((resolve, reject) =>
+          unzip(new Uint8Array(buf), (err, data) => (err ? reject(err) : resolve(data))),
+        );
 
-          const $fetchError = document.getElementById("fetch-error");
-          const message =
-            err instanceof TypeError ? `${err.message} (likely blocked by CORS)` : err.message;
-          $fetchError.innerHTML = `
-            <div>${message}</div>
-            <div style="margin-top:0.3rem;color:#666">
-              Try opening <a href="${paramUrl}" style="color:#008039">${displayUrl}</a> directly in your browser, download the file, and drop it here.
-            </div>`;
-          $fetchError.hidden = false;
-          setStatus(`Fetch Error: ${message}`);
+        const paths = Object.keys(entries);
+        let rootPrefix = "";
+        if (paths.length > 0) {
+          const first = paths[0];
+          const slash = first.indexOf("/");
+          if (slash > 0) {
+            const candidate = first.substring(0, slash + 1);
+            if (paths.every((p) => p.startsWith(candidate))) rootPrefix = candidate;
+          }
         }
-      }
 
-      async function handleUrl(url) {
-        setStatus(`Fetching ${new URL(url).pathname.split("/").pop()}...`);
-        const res = await fetch(url);
-        if (!res.ok) {
-          throw new Error(`HTTP ${res.status}`);
-        }
-        const buf = await res.arrayBuffer();
-        await handleBuffer(buf, url.split("/").pop());
+        await caches.delete(CACHE_NAME);
+        const cache = await caches.open(CACHE_NAME);
+
+        await Promise.all(
+          Object.entries(entries)
+            .filter(([path]) => !path.endsWith("/"))
+            .map(([path, data]) => {
+              const ext = path.split(".").pop()?.toLowerCase() ?? "";
+              const contentType = MIME_TYPES[ext] ?? "application/octet-stream";
+              const servePath = rootPrefix ? path.substring(rootPrefix.length) : path;
+              const url = new URL(PREFIX + servePath, location.origin);
+              return cache.put(
+                url.href,
+                new Response(data, { headers: { "Content-Type": contentType } }),
+              );
+            }),
+        );
+
+        return paths.filter((p) => !p.endsWith("/")).length;
       }
 
-      async function handleFile(file) {
-        if (!file) return;
-        const buf = await file.arrayBuffer();
-        await handleBuffer(buf, file.name);
+      function Header({ statusMsg }) {
+        return h(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              gap: "0.5rem",
+              padding: "0.5rem 1rem 0",
+            },
+          },
+          h(
+            "a",
+            {
+              href: ".",
+              style: {
+                fontSize: "0.9rem",
+                fontWeight: "600",
+                color: "inherit",
+                textDecoration: "none",
+              },
+            },
+            "Vitest Viewer",
+          ),
+          h("div", { style: { flex: "1" } }),
+          statusMsg != null &&
+            h(
+              "div",
+              { style: { fontSize: "0.8rem", color: "#999" }, "data-testid": "status" },
+              "Status: ",
+              h("span", null, statusMsg),
+            ),
+          h(
+            "a",
+            {
+              href: "https://github.com/vitest-dev/viewer",
+              style: { fontSize: "0.8rem", color: "#999", textDecoration: "none" },
+              target: "_blank",
+              rel: "noopener",
+            },
+            "Source code",
+          ),
+        );
       }
 
-      async function handleBuffer(buf, name) {
-        setStatus(`Unzipping ${name}...`);
-        const entries = unzipSync(new Uint8Array(buf));
+      function DropZone({ onFile }) {
+        const [over, setOver] = useState(false);
+        const inputRef = useRef(null);
 
-        // Clear old cache
-        await caches.delete(CACHE_NAME);
-        const cache = await caches.open(CACHE_NAME);
+        return h(
+          "div",
+          {
+            id: "drop",
+            class: over ? "over" : "",
+            role: "button",
+            tabIndex: "0",
+            onDragOver: (e) => {
+              e.preventDefault();
+              setOver(true);
+            },
+            onDragLeave: () => setOver(false),
+            onDrop: (e) => {
+              e.preventDefault();
+              setOver(false);
+              onFile(e.dataTransfer.files[0]);
+            },
+            onClick: () => inputRef.current.click(),
+            onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && inputRef.current.click(),
+          },
+          h(
+            "div",
+            null,
+            "Drag & drop or ",
+            h("span", { style: { color: "#008039" } }, "click to upload"),
+          ),
+          h(
+            "div",
+            { style: { fontSize: "0.8rem", color: "#999", marginTop: "0.4rem" } },
+            ".zip files only",
+          ),
+          h("input", {
+            ref: inputRef,
+            type: "file",
+            accept: ".zip",
+            hidden: true,
+            onChange: (e) => onFile(e.target.files[0]),
+          }),
+        );
+      }
 
-        const mimeTypes = {
-          html: "text/html",
-          css: "text/css",
-          js: "application/javascript",
-          mjs: "application/javascript",
-          json: "application/json",
-          svg: "image/svg+xml",
-          png: "image/png",
-          jpg: "image/jpeg",
-          jpeg: "image/jpeg",
-          gif: "image/gif",
-          woff: "font/woff",
-          woff2: "font/woff2",
-          ico: "image/x-icon",
-        };
+      function FetchError({ error }) {
+        return h(
+          "div",
+          { style: { textAlign: "center", fontSize: "0.85rem", color: "#c00", marginTop: "1rem" } },
+          h("div", null, error.message),
+          h(
+            "div",
+            { style: { marginTop: "0.3rem", color: "#666" } },
+            "Try opening ",
+            h("a", { href: error.url, style: { color: "#008039" } }, error.displayUrl),
+            " directly in your browser, download the file, and drop it here.",
+          ),
+        );
+      }
 
-        let fileCount = 0;
-        let rootPrefix = "";
+      function App() {
+        const [statusMsg, setStatusMsg] = useState("Registering service worker...");
+        const [loaded, setLoaded] = useState(false);
+        const [fileCount, setFileCount] = useState(0);
+        const [fetchError, setFetchError] = useState(null);
 
-        // Detect common root directory in zip
-        const paths = Object.keys(entries);
-        if (paths.length > 0) {
-          const first = paths[0];
-          const slash = first.indexOf("/");
-          if (slash > 0) {
-            const candidate = first.substring(0, slash + 1);
-            if (paths.every((p) => p.startsWith(candidate))) {
-              rootPrefix = candidate;
-            }
+        async function handleBuffer(buf, name) {
+          setStatusMsg(`Unzipping ${name}...`);
+          let count;
+          try {
+            count = await cacheZip(buf);
+          } catch (err) {
+            setStatusMsg(`Zip Error: ${err.message}`);
+            return;
           }
+          setFileCount(count);
+          setStatusMsg(`Cached ${count} files. Loading...`);
+          setLoaded(true);
         }
 
-        for (const [path, data] of Object.entries(entries)) {
-          // Skip directories (empty data)
-          if (path.endsWith("/")) continue;
+        async function handleFile(file) {
+          if (!file) return;
+          await handleBuffer(await file.arrayBuffer(), file.name);
+        }
 
-          const ext = path.split(".").pop()?.toLowerCase() || "";
-          const contentType = mimeTypes[ext] || "application/octet-stream";
+        useEffect(() => {
+          async function init() {
+            try {
+              await registerSW();
+              setStatusMsg("Service worker ready.");
+            } catch (err) {
+              setStatusMsg(err.message);
+              return;
+            }
 
-          // Strip common root prefix so index.html is at the top level
-          const servePath = rootPrefix ? path.substring(rootPrefix.length) : path;
-          const url = new URL(PREFIX + servePath, location.origin);
-          const response = new Response(data, {
-            headers: { "Content-Type": contentType },
-          });
-          await cache.put(url.href, response);
-          fileCount++;
-        }
+            const paramUrl = new URLSearchParams(location.search).get("url");
+            if (!paramUrl) return;
 
-        setStatus(`Cached ${fileCount} files. Loading...`);
-        $drop.hidden = true;
-        $example.hidden = true;
-        document.getElementById("fetch-error").hidden = true;
-        $viewer.hidden = false;
-        $viewer.src = PREFIX;
-        $viewer.onload = () => setStatus(`Cached ${fileCount} files.`);
-      }
+            try {
+              const name = paramUrl.split("/").pop();
+              setStatusMsg(`Fetching ${name}...`);
+              const res = await fetch(paramUrl);
+              if (!res.ok) throw new Error(`HTTP ${res.status}`);
+              await handleBuffer(await res.arrayBuffer(), name);
+            } catch (err) {
+              const { hostname, pathname } = new URL(paramUrl);
+              const lastSegment = pathname.split("/").filter(Boolean).pop() || "";
+              const displayUrl = lastSegment ? `${hostname}/\u2026/${lastSegment}` : hostname;
+              const message =
+                err instanceof TypeError ? `${err.message} (likely blocked by CORS)` : err.message;
+              setFetchError({ message, url: paramUrl, displayUrl });
+              setStatusMsg(`Fetch Error: ${message}`);
+            }
+          }
+          init();
+        }, []);
 
-      // Drag and drop
-      $drop.addEventListener("dragover", (e) => {
-        e.preventDefault();
-        $drop.classList.add("over");
-      });
-      $drop.addEventListener("dragleave", () => $drop.classList.remove("over"));
-      $drop.addEventListener("drop", async (e) => {
-        e.preventDefault();
-        $drop.classList.remove("over");
-        handleFile(e.dataTransfer.files[0]);
-      });
+        return h(
+          Fragment,
+          null,
+          h(Header, { statusMsg }),
+          !loaded && h(DropZone, { onFile: handleFile }),
+          !loaded &&
+            h(
+              "div",
+              {
+                id: "example",
+                style: {
+                  textAlign: "center",
+                  fontSize: "0.8rem",
+                  color: "#999",
+                  marginTop: "0.5rem",
+                },
+              },
+              "or try an ",
+              h(
+                "a",
+                {
+                  href: "?url=https://cdn.jsdelivr.net/gh/vitest-dev/viewer@main/docs/assets/vitest-html-reporter.zip",
+                  style: { color: "#008039" },
+                },
+                "example",
+              ),
+            ),
+          fetchError && h(FetchError, { error: fetchError }),
+          loaded &&
+            h("iframe", { src: PREFIX, onLoad: () => setStatusMsg(`Cached ${fileCount} files.`) }),
+        );
+      }
 
-      // File input
-      $fileInput.addEventListener("change", () => handleFile($fileInput.files[0]));
+      function main() {
+        render(h(App, null), document.getElementById("app"));
+      }
 
-      // Click / keyboard to open picker
-      $drop.addEventListener("click", () => $fileInput.click());
-      $drop.addEventListener("keydown", (e) => {
-        if (e.key === "Enter" || e.key === " ") $fileInput.click();
-      });
+      main();
     </script>
   </body>
 </html>
diff --git a/src/sw.js b/src/sw.js
index 2f152a3..db6fd54 100644
--- a/src/sw.js
+++ b/src/sw.js
@@ -1,6 +1,9 @@
 const CACHE_NAME = "zipview-v1";
 const PREFIX = "/zipview/site/";
 
+// skipWaiting: activate immediately instead of waiting for old clients to close.
+// clients.claim: take control of existing tabs right away.
+// Together these ensure the new SW is serving before index.html writes to the cache.
 self.addEventListener("install", () => self.skipWaiting());
 self.addEventListener("activate", (e) => e.waitUntil(self.clients.claim()));
 
diff --git a/vite.config.ts b/vite.config.ts
index 9c46f45..682da49 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,7 +2,7 @@ import { defineConfig } from "vite-plus";
 
 export default defineConfig({
   staged: {
-    "*": "vp fmt",
+    "*": "vp check --fix --no-lint",
   },
   fmt: {},
 });