From 90c1423b40f67c90af2eca80b5fcc5e8cfd5ea48 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Feb 2026 05:10:35 +0000
Subject: [PATCH 01/21] Initial plan


From f1df3ce6dc6764673aa7f025abd9170ecafb4cad Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Feb 2026 05:13:44 +0000
Subject: [PATCH 02/21] Install web dependencies: pinia, vueuse, tailwindcss,
 lucide-vue-next, date-fns

Co-authored-by: lightsing <15951701+lightsing@users.noreply.github.com>
---
 apps/web/package.json |  10 +-
 pnpm-lock.yaml        | 633 ++++++++++++++++++++++++++++++++++++++----
 2 files changed, 582 insertions(+), 61 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 9bfdbc0..975ce8c 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -11,13 +11,19 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "vue": "^3.5.24",
-    "@uts/sdk": "workspace:*"
+    "@uts/sdk": "workspace:*",
+    "@vueuse/core": "^14.2.1",
+    "date-fns": "^4.1.0",
+    "lucide-vue-next": "^0.575.0",
+    "pinia": "^3.0.4",
+    "vue": "^3.5.24"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.2.1",
     "@types/node": "^24.10.1",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/tsconfig": "^0.8.1",
+    "tailwindcss": "^4.2.1",
     "typescript": "~5.9.3",
     "vite": "^7.2.4",
     "vue-tsc": "^3.1.4"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c86bffd..80da8bf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,19 +10,19 @@ importers:
     devDependencies:
       eslint:
         specifier: ^9.38.0
-        version: 9.39.3
+        version: 9.39.3(jiti@2.6.1)
       eslint-import-resolver-typescript:
         specifier: ^4.4.4
-        version: 4.4.4(eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.56.1(eslint@9.39.3)(typescript@5.9.3))(eslint@9.39.3))(eslint@9.39.3)
+        version: 4.4.4(eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1)))(eslint@9.39.3(jiti@2.6.1))
       eslint-plugin-import-x:
         specifier: ^4.16.1
-        version: 4.16.1(@typescript-eslint/utils@8.56.1(eslint@9.39.3)(typescript@5.9.3))(eslint@9.39.3)
+        version: 4.16.1(@typescript-eslint/utils@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))
       eslint-plugin-unicorn:
         specifier: ^63.0.0
-        version: 63.0.0(eslint@9.39.3)
+        version: 63.0.0(eslint@9.39.3(jiti@2.6.1))
       eslint-plugin-unused-imports:
         specifier: ^4.4.1
-        version: 4.4.1(@typescript-eslint/eslint-plugin@8.56.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3)(typescript@5.9.3))(eslint@9.39.3)(typescript@5.9.3))(eslint@9.39.3)
+        version: 4.4.1(@typescript-eslint/eslint-plugin@8.56.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))
       pnpm:
         specifier: ^10.26.2
         version: 10.26.2
@@ -31,32 +31,50 @@ importers:
         version: 3.8.1
       typescript-eslint:
         specifier: ^8.56.1
-        version: 8.56.1(eslint@9.39.3)(typescript@5.9.3)
+        version: 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
 
   apps/web:
     dependencies:
       '@uts/sdk':
         specifier: workspace:*
         version: link:../../packages/sdk
+      '@vueuse/core':
+        specifier: ^14.2.1
+        version: 14.2.1(vue@3.5.26(typescript@5.9.3))
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.1.0
+      lucide-vue-next:
+        specifier: ^0.575.0
+        version: 0.575.0(vue@3.5.26(typescript@5.9.3))
+      pinia:
+        specifier: ^3.0.4
+        version: 3.0.4(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3))
       vue:
         specifier: ^3.5.24
         version: 3.5.26(typescript@5.9.3)
     devDependencies:
+      '@tailwindcss/vite':
+        specifier: ^4.2.1
+        version: 4.2.1(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1))
       '@types/node':
         specifier: ^24.10.1
         version: 24.10.4
       '@vitejs/plugin-vue':
         specifier: ^6.0.1
-        version: 6.0.3(vite@7.3.0(@types/node@24.10.4))(vue@3.5.26(typescript@5.9.3))
+        version: 6.0.3(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1))(vue@3.5.26(typescript@5.9.3))
       '@vue/tsconfig':
         specifier: ^0.8.1
         version: 0.8.1(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3))
+      tailwindcss:
+        specifier: ^4.2.1
+        version: 4.2.1
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
       vite:
         specifier: ^7.2.4
-        version: 7.3.0(@types/node@24.10.4)
+        version: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)
       vue-tsc:
         specifier: ^3.1.4
         version: 3.2.1(typescript@5.9.3)
@@ -87,7 +105,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^4.0.18
-        version: 4.0.18(@types/node@24.10.4)(@vitest/browser-playwright@4.0.18)
+        version: 4.0.18(@types/node@24.10.4)(@vitest/browser-playwright@4.0.18)(jiti@2.6.1)(lightningcss@1.31.1)
 
 packages:
 
@@ -330,9 +348,22 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
   '@napi-rs/wasm-runtime@0.2.12':
     resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
 
@@ -646,6 +677,100 @@ packages:
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
+  '@tailwindcss/node@4.2.1':
+    resolution: {integrity: sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==}
+
+  '@tailwindcss/oxide-android-arm64@4.2.1':
+    resolution: {integrity: sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.1':
+    resolution: {integrity: sha512-q/LHkOstoJ7pI1J0q6djesLzRvQSIfEto148ppAd+BVQK0JYjQIFSK3JgYZJa+Yzi0DDa52ZsQx2rqytBnf8Hw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.2.1':
+    resolution: {integrity: sha512-/f/ozlaXGY6QLbpvd/kFTro2l18f7dHKpB+ieXz+Cijl4Mt9AI2rTrpq7V+t04nK+j9XBQHnSMdeQRhbGyt6fw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.1':
+    resolution: {integrity: sha512-5e/AkgYJT/cpbkys/OU2Ei2jdETCLlifwm7ogMC7/hksI2fC3iiq6OcXwjibcIjPung0kRtR3TxEITkqgn0TcA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
+    resolution: {integrity: sha512-Uny1EcVTTmerCKt/1ZuKTkb0x8ZaiuYucg2/kImO5A5Y/kBz41/+j0gxUZl+hTF3xkWpDmHX+TaWhOtba2Fyuw==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
+    resolution: {integrity: sha512-CTrwomI+c7n6aSSQlsPL0roRiNMDQ/YzMD9EjcR+H4f0I1SQ8QqIuPnsVp7QgMkC1Qi8rtkekLkOFjo7OlEFRQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
+    resolution: {integrity: sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
+    resolution: {integrity: sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.1':
+    resolution: {integrity: sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.1':
+    resolution: {integrity: sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
+    resolution: {integrity: sha512-YlUEHRHBGnCMh4Nj4GnqQyBtsshUPdiNroZj8VPkvTZSoHsilRCwXcVKnG9kyi0ZFAS/3u+qKHBdDc81SADTRA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
+    resolution: {integrity: sha512-rbO34G5sMWWyrN/idLeVxAZgAKWrn5LiR3/I90Q9MkA67s6T1oB0xtTe+0heoBvHSpbU9Mk7i6uwJnpo4u21XQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.2.1':
+    resolution: {integrity: sha512-yv9jeEFWnjKCI6/T3Oq50yQEOqmpmpfzG1hcZsAOaXFQPfzWprWrlHSdGPEF3WQTi8zu8ohC9Mh9J470nT5pUw==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/vite@4.2.1':
+    resolution: {integrity: sha512-TBf2sJjYeb28jD2U/OhwdW0bbOsxkWPwQ7SrqGf9sVcoYwZj7rkXljroBO9wKBut9XnmQLXanuDUeqQK0lGg/w==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7
+
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
@@ -670,6 +795,9 @@ packages:
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
   '@typescript-eslint/eslint-plugin@8.56.1':
     resolution: {integrity: sha512-Jz9ZztpB37dNC+HU2HI28Bs9QXpzCz+y/twHOwhyrIRdbuVDxSytJNDl6z/aAKlaRIwC7y8wJdkBv7FxYGgi0A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -900,6 +1028,15 @@ packages:
   '@vue/compiler-ssr@3.5.26':
     resolution: {integrity: sha512-lZT9/Y0nSIRUPVvapFJEVDbEXruZh2IYHMk2zTtEgJSlP5gVOqeWXH54xDKAaFS4rTnDeDBQUYDtxKyoW9FwDw==}
 
+  '@vue/devtools-api@7.7.9':
+    resolution: {integrity: sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==}
+
+  '@vue/devtools-kit@7.7.9':
+    resolution: {integrity: sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==}
+
+  '@vue/devtools-shared@7.7.9':
+    resolution: {integrity: sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==}
+
   '@vue/language-core@3.2.1':
     resolution: {integrity: sha512-g6oSenpnGMtpxHGAwKuu7HJJkNZpemK/zg3vZzZbJ6cnnXq1ssxuNrXSsAHYM3NvH8p4IkTw+NLmuxyeYz4r8A==}
 
@@ -931,6 +1068,19 @@ packages:
       vue:
         optional: true
 
+  '@vueuse/core@14.2.1':
+    resolution: {integrity: sha512-3vwDzV+GDUNpdegRY6kzpLm4Igptq+GA0QkJ3W61Iv27YWwW/ufSlOfgQIpN6FZRMG0mkaz4gglJRtq5SeJyIQ==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  '@vueuse/metadata@14.2.1':
+    resolution: {integrity: sha512-1ButlVtj5Sb/HDtIy1HFr1VqCP4G6Ypqt5MAo0lCgjokrk2mvQKsK2uuy0vqu/Ks+sHfuHo0B9Y9jn9xKdjZsw==}
+
+  '@vueuse/shared@14.2.1':
+    resolution: {integrity: sha512-shTJncjV9JTI4oVNyF1FQonetYAiTBd+Qj7cY89SWbXSkx7gyhrgtEdF2ZAVWS1S3SHlaROO6F2IesJxQEkZBw==}
+    peerDependencies:
+      vue: ^3.5.0
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -973,6 +1123,9 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  birpc@2.9.0:
+    resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
+
   brace-expansion@1.1.12:
     resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
 
@@ -1029,6 +1182,10 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  copy-anything@4.0.5:
+    resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
+    engines: {node: '>=18'}
+
   core-js-compat@3.48.0:
     resolution: {integrity: sha512-OM4cAF3D6VtH/WkLtWvyNC56EZVXsZdU3iqaMG2B4WvYrlqU831pc4UtG5yp0sE9z8Y02wVN7PjW5Zf9Gt0f1Q==}
 
@@ -1039,6 +1196,9 @@ packages:
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -1055,9 +1215,17 @@ packages:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
   electron-to-chromium@1.5.302:
     resolution: {integrity: sha512-sM6HAN2LyK82IyPBpznDRqlTQAtuSaO+ShzFiWTvoMJLHyZ+Y39r8VMfHzwbU8MVBzQ4Wdn85+wlZl2TLGIlwg==}
 
+  enhanced-resolve@5.19.0:
+    resolution: {integrity: sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==}
+    engines: {node: '>=10.13.0'}
+
   entities@7.0.0:
     resolution: {integrity: sha512-FDWG5cmEYf2Z00IkYRhbFrwIwvdFKH07uV8dvNy0omp/Qb1xcyCWp2UDtcwJF4QZZvk0sLudP6/hAu42TaqVhQ==}
     engines: {node: '>=0.12'}
@@ -1261,6 +1429,9 @@ packages:
     resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==}
     engines: {node: '>=18'}
 
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -1269,6 +1440,9 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -1311,9 +1485,17 @@ packages:
   is-module@1.0.0:
     resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
 
+  is-what@5.5.0:
+    resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==}
+    engines: {node: '>=18'}
+
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
   js-yaml@4.1.1:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
@@ -1339,6 +1521,80 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lightningcss-android-arm64@1.31.1:
+    resolution: {integrity: sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.31.1:
+    resolution: {integrity: sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.31.1:
+    resolution: {integrity: sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.31.1:
+    resolution: {integrity: sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.31.1:
+    resolution: {integrity: sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.31.1:
+    resolution: {integrity: sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.31.1:
+    resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.31.1:
+    resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-musl@1.31.1:
+    resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.31.1:
+    resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.31.1:
+    resolution: {integrity: sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.31.1:
+    resolution: {integrity: sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==}
+    engines: {node: '>= 12.0.0'}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -1350,6 +1606,11 @@ packages:
     resolution: {integrity: sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==}
     engines: {node: 20 || >=22}
 
+  lucide-vue-next@0.575.0:
+    resolution: {integrity: sha512-UHzA3cYMCgBLyGay5R9IQaidwV0NLocx7cIBnFt8vJ9Xhl6IM/oKD0fUhoCUuouFta15SX1rLXVoko9s3TzWMA==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -1364,6 +1625,9 @@ packages:
     resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
   mrmime@2.0.1:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
@@ -1433,6 +1697,9 @@ packages:
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
+  perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -1440,6 +1707,15 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  pinia@3.0.4:
+    resolution: {integrity: sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==}
+    peerDependencies:
+      typescript: '>=4.5.0'
+      vue: ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   pixelmatch@7.1.0:
     resolution: {integrity: sha512-1wrVzJ2STrpmONHKBy228LM1b84msXDUoAzVEl0R8Mz4Ce6EPr+IVtxm8+yvrqLYMHswREkjYFaMxnyGnaY3Ng==}
     hasBin: true
@@ -1504,6 +1780,9 @@ packages:
     engines: {node: '>= 0.4'}
     hasBin: true
 
+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
   rimraf@6.1.3:
     resolution: {integrity: sha512-LKg+Cr2ZF61fkcaK1UdkH2yEBBKnYjTyWzTJT6KNPcSPaiT7HSdhtMXQuN5wkTX0Xu72KQ1l8S42rlmexS2hSA==}
     engines: {node: 20 || >=22}
@@ -1543,6 +1822,10 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
+
   stable-hash-x@0.2.0:
     resolution: {integrity: sha512-o3yWv49B/o4QZk5ZcsALc6t0+eCelPc44zZsLtCQnZPDwFpDYSWcDnrv2TtMmMbQ7uKo3J0HTURCqckw23czNQ==}
     engines: {node: '>=12.0.0'}
@@ -1561,6 +1844,10 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  superjson@2.2.6:
+    resolution: {integrity: sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==}
+    engines: {node: '>=16'}
+
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -1569,6 +1856,13 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  tailwindcss@4.2.1:
+    resolution: {integrity: sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==}
+
+  tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
+
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
@@ -1875,9 +2169,9 @@ snapshots:
   '@esbuild/win32-x64@0.27.2':
     optional: true
 
-  '@eslint-community/eslint-utils@4.9.1(eslint@9.39.3)':
+  '@eslint-community/eslint-utils@4.9.1(eslint@9.39.3(jiti@2.6.1))':
     dependencies:
-      eslint: 9.39.3
+      eslint: 9.39.3(jiti@2.6.1)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.2': {}
@@ -1932,8 +2226,25 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
       '@emnapi/core': 1.8.1
@@ -2124,6 +2435,74 @@ snapshots:
 
   '@standard-schema/spec@1.1.0': {}
 
+  '@tailwindcss/node@4.2.1':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.19.0
+      jiti: 2.6.1
+      lightningcss: 1.31.1
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.2.1
+
+  '@tailwindcss/oxide-android-arm64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide@4.2.1':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.2.1
+      '@tailwindcss/oxide-darwin-arm64': 4.2.1
+      '@tailwindcss/oxide-darwin-x64': 4.2.1
+      '@tailwindcss/oxide-freebsd-x64': 4.2.1
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.1
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.1
+      '@tailwindcss/oxide-linux-arm64-musl': 4.2.1
+      '@tailwindcss/oxide-linux-x64-gnu': 4.2.1
+      '@tailwindcss/oxide-linux-x64-musl': 4.2.1
+      '@tailwindcss/oxide-wasm32-wasi': 4.2.1
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.1
+      '@tailwindcss/oxide-win32-x64-msvc': 4.2.1
+
+  '@tailwindcss/vite@4.2.1(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1))':
+    dependencies:
+      '@tailwindcss/node': 4.2.1
+      '@tailwindcss/oxide': 4.2.1
+      tailwindcss: 4.2.1
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)
+
   '@tybys/wasm-util@0.10.1':
     dependencies:
       tslib: 2.7.0
@@ -2150,15 +2529,17 @@ snapshots:
 
   '@types/resolve@1.20.2': {}
 
-  '@typescript-eslint/eslint-plugin@8.56.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3)(typescript@5.9.3))(eslint@9.39.3)(typescript@5.9.3)':
+  '@types/web-bluetooth@0.0.21': {}
+
+  '@typescript-eslint/eslint-plugin@8.56.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.56.1(eslint@9.39.3)(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/scope-manager': 8.56.1
-      '@typescript-eslint/type-utils': 8.56.1(eslint@9.39.3)(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.56.1(eslint@9.39.3)(typescript@5.9.3)
+      '@typescript-eslint/type-utils': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/visitor-keys': 8.56.1
-      eslint: 9.39.3
+      eslint: 9.39.3(jiti@2.6.1)
       ignore: 7.0.5
       natural-compare: 1.4.0
       ts-api-utils: 2.4.0(typescript@5.9.3)
@@ -2166,14 +2547,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.56.1(eslint@9.39.3)(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.56.1
       '@typescript-eslint/types': 8.56.1
       '@typescript-eslint/typescript-estree': 8.56.1(typescript@5.9.3)
       '@typescript-eslint/visitor-keys': 8.56.1
       debug: 4.4.3
-      eslint: 9.39.3
+      eslint: 9.39.3(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
@@ -2196,13 +2577,13 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.56.1(eslint@9.39.3)(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.56.1
       '@typescript-eslint/typescript-estree': 8.56.1(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.56.1(eslint@9.39.3)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
       debug: 4.4.3
-      eslint: 9.39.3
+      eslint: 9.39.3(jiti@2.6.1)
       ts-api-utils: 2.4.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -2225,13 +2606,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.56.1(eslint@9.39.3)(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.3)
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.3(jiti@2.6.1))
       '@typescript-eslint/scope-manager': 8.56.1
       '@typescript-eslint/types': 8.56.1
       '@typescript-eslint/typescript-estree': 8.56.1(typescript@5.9.3)
-      eslint: 9.39.3
+      eslint: 9.39.3(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
@@ -2300,19 +2681,19 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
-  '@vitejs/plugin-vue@6.0.3(vite@7.3.0(@types/node@24.10.4))(vue@3.5.26(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.3(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1))(vue@3.5.26(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.53
-      vite: 7.3.0(@types/node@24.10.4)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)
       vue: 3.5.26(typescript@5.9.3)
 
-  '@vitest/browser-playwright@4.0.18(playwright@1.58.2)(vite@7.3.0(@types/node@24.10.4))(vitest@4.0.18)':
+  '@vitest/browser-playwright@4.0.18(playwright@1.58.2)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1))(vitest@4.0.18)':
     dependencies:
-      '@vitest/browser': 4.0.18(vite@7.3.0(@types/node@24.10.4))(vitest@4.0.18)
-      '@vitest/mocker': 4.0.18(vite@7.3.0(@types/node@24.10.4))
+      '@vitest/browser': 4.0.18(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1))(vitest@4.0.18)
+      '@vitest/mocker': 4.0.18(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1))
       playwright: 1.58.2
       tinyrainbow: 3.0.3
-      vitest: 4.0.18(@types/node@24.10.4)(@vitest/browser-playwright@4.0.18)
+      vitest: 4.0.18(@types/node@24.10.4)(@vitest/browser-playwright@4.0.18)(jiti@2.6.1)(lightningcss@1.31.1)
     transitivePeerDependencies:
       - bufferutil
       - msw
@@ -2320,16 +2701,16 @@ snapshots:
       - vite
     optional: true
 
-  '@vitest/browser@4.0.18(vite@7.3.0(@types/node@24.10.4))(vitest@4.0.18)':
+  '@vitest/browser@4.0.18(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1))(vitest@4.0.18)':
     dependencies:
-      '@vitest/mocker': 4.0.18(vite@7.3.0(@types/node@24.10.4))
+      '@vitest/mocker': 4.0.18(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1))
       '@vitest/utils': 4.0.18
       magic-string: 0.30.21
       pixelmatch: 7.1.0
       pngjs: 7.0.0
       sirv: 3.0.2
       tinyrainbow: 3.0.3
-      vitest: 4.0.18(@types/node@24.10.4)(@vitest/browser-playwright@4.0.18)
+      vitest: 4.0.18(@types/node@24.10.4)(@vitest/browser-playwright@4.0.18)(jiti@2.6.1)(lightningcss@1.31.1)
       ws: 8.19.0
     transitivePeerDependencies:
       - bufferutil
@@ -2347,13 +2728,13 @@ snapshots:
       chai: 6.2.2
       tinyrainbow: 3.0.3
 
-  '@vitest/mocker@4.0.18(vite@7.3.0(@types/node@24.10.4))':
+  '@vitest/mocker@4.0.18(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1))':
     dependencies:
       '@vitest/spy': 4.0.18
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 7.3.0(@types/node@24.10.4)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)
 
   '@vitest/pretty-format@4.0.18':
     dependencies:
@@ -2419,6 +2800,24 @@ snapshots:
       '@vue/compiler-dom': 3.5.26
       '@vue/shared': 3.5.26
 
+  '@vue/devtools-api@7.7.9':
+    dependencies:
+      '@vue/devtools-kit': 7.7.9
+
+  '@vue/devtools-kit@7.7.9':
+    dependencies:
+      '@vue/devtools-shared': 7.7.9
+      birpc: 2.9.0
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      superjson: 2.2.6
+
+  '@vue/devtools-shared@7.7.9':
+    dependencies:
+      rfdc: 1.4.1
+
   '@vue/language-core@3.2.1':
     dependencies:
       '@volar/language-core': 2.4.27
@@ -2458,6 +2857,19 @@ snapshots:
       typescript: 5.9.3
       vue: 3.5.26(typescript@5.9.3)
 
+  '@vueuse/core@14.2.1(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 14.2.1
+      '@vueuse/shared': 14.2.1(vue@3.5.26(typescript@5.9.3))
+      vue: 3.5.26(typescript@5.9.3)
+
+  '@vueuse/metadata@14.2.1': {}
+
+  '@vueuse/shared@14.2.1(vue@3.5.26(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.26(typescript@5.9.3)
+
   acorn-jsx@5.3.2(acorn@8.16.0):
     dependencies:
       acorn: 8.16.0
@@ -2489,6 +2901,8 @@ snapshots:
 
   baseline-browser-mapping@2.10.0: {}
 
+  birpc@2.9.0: {}
+
   brace-expansion@1.1.12:
     dependencies:
       balanced-match: 1.0.2
@@ -2537,6 +2951,10 @@ snapshots:
 
   concat-map@0.0.1: {}
 
+  copy-anything@4.0.5:
+    dependencies:
+      is-what: 5.5.0
+
   core-js-compat@3.48.0:
     dependencies:
       browserslist: 4.28.1
@@ -2549,6 +2967,8 @@ snapshots:
 
   csstype@3.2.3: {}
 
+  date-fns@4.1.0: {}
+
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
@@ -2557,8 +2977,15 @@ snapshots:
 
   deepmerge@4.3.1: {}
 
+  detect-libc@2.1.2: {}
+
   electron-to-chromium@1.5.302: {}
 
+  enhanced-resolve@5.19.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
   entities@7.0.0: {}
 
   es-module-lexer@1.7.0: {}
@@ -2605,10 +3032,10 @@ snapshots:
     optionalDependencies:
       unrs-resolver: 1.11.1
 
-  eslint-import-resolver-typescript@4.4.4(eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.56.1(eslint@9.39.3)(typescript@5.9.3))(eslint@9.39.3))(eslint@9.39.3):
+  eslint-import-resolver-typescript@4.4.4(eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1)))(eslint@9.39.3(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3
-      eslint: 9.39.3
+      eslint: 9.39.3(jiti@2.6.1)
       eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
       get-tsconfig: 4.13.6
       is-bun-module: 2.0.0
@@ -2616,16 +3043,16 @@ snapshots:
       tinyglobby: 0.2.15
       unrs-resolver: 1.11.1
     optionalDependencies:
-      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.56.1(eslint@9.39.3)(typescript@5.9.3))(eslint@9.39.3)
+      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.56.1(eslint@9.39.3)(typescript@5.9.3))(eslint@9.39.3):
+  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1)):
     dependencies:
       '@typescript-eslint/types': 8.56.1
       comment-parser: 1.4.5
       debug: 4.4.3
-      eslint: 9.39.3
+      eslint: 9.39.3(jiti@2.6.1)
       eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
       is-glob: 4.0.3
       minimatch: 10.2.2
@@ -2633,19 +3060,19 @@ snapshots:
       stable-hash-x: 0.2.0
       unrs-resolver: 1.11.1
     optionalDependencies:
-      '@typescript-eslint/utils': 8.56.1(eslint@9.39.3)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-unicorn@63.0.0(eslint@9.39.3):
+  eslint-plugin-unicorn@63.0.0(eslint@9.39.3(jiti@2.6.1)):
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.3)
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.3(jiti@2.6.1))
       change-case: 5.4.4
       ci-info: 4.4.0
       clean-regexp: 1.0.0
       core-js-compat: 3.48.0
-      eslint: 9.39.3
+      eslint: 9.39.3(jiti@2.6.1)
       find-up-simple: 1.0.1
       globals: 16.5.0
       indent-string: 5.0.0
@@ -2657,11 +3084,11 @@ snapshots:
       semver: 7.7.4
       strip-indent: 4.1.1
 
-  eslint-plugin-unused-imports@4.4.1(@typescript-eslint/eslint-plugin@8.56.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3)(typescript@5.9.3))(eslint@9.39.3)(typescript@5.9.3))(eslint@9.39.3):
+  eslint-plugin-unused-imports@4.4.1(@typescript-eslint/eslint-plugin@8.56.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1)):
     dependencies:
-      eslint: 9.39.3
+      eslint: 9.39.3(jiti@2.6.1)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.56.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3)(typescript@5.9.3))(eslint@9.39.3)(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.56.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
 
   eslint-scope@8.4.0:
     dependencies:
@@ -2674,9 +3101,9 @@ snapshots:
 
   eslint-visitor-keys@5.0.1: {}
 
-  eslint@9.39.3:
+  eslint@9.39.3(jiti@2.6.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.3)
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.3(jiti@2.6.1))
       '@eslint-community/regexpp': 4.12.2
       '@eslint/config-array': 0.21.1
       '@eslint/config-helpers': 0.4.2
@@ -2710,6 +3137,8 @@ snapshots:
       minimatch: 3.1.4
       natural-compare: 1.4.0
       optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.6.1
     transitivePeerDependencies:
       - supports-color
 
@@ -2806,12 +3235,16 @@ snapshots:
 
   globals@16.5.0: {}
 
+  graceful-fs@4.2.11: {}
+
   has-flag@4.0.0: {}
 
   hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
 
+  hookable@5.5.3: {}
+
   ignore@5.3.2: {}
 
   ignore@7.0.5: {}
@@ -2845,8 +3278,12 @@ snapshots:
 
   is-module@1.0.0: {}
 
+  is-what@5.5.0: {}
+
   isexe@2.0.0: {}
 
+  jiti@2.6.1: {}
+
   js-yaml@4.1.1:
     dependencies:
       argparse: 2.0.1
@@ -2868,6 +3305,55 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lightningcss-android-arm64@1.31.1:
+    optional: true
+
+  lightningcss-darwin-arm64@1.31.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.31.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.31.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.31.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.31.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.31.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.31.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.31.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.31.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.31.1:
+    optional: true
+
+  lightningcss@1.31.1:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.31.1
+      lightningcss-darwin-arm64: 1.31.1
+      lightningcss-darwin-x64: 1.31.1
+      lightningcss-freebsd-x64: 1.31.1
+      lightningcss-linux-arm-gnueabihf: 1.31.1
+      lightningcss-linux-arm64-gnu: 1.31.1
+      lightningcss-linux-arm64-musl: 1.31.1
+      lightningcss-linux-x64-gnu: 1.31.1
+      lightningcss-linux-x64-musl: 1.31.1
+      lightningcss-win32-arm64-msvc: 1.31.1
+      lightningcss-win32-x64-msvc: 1.31.1
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -2876,6 +3362,10 @@ snapshots:
 
   lru-cache@11.2.6: {}
 
+  lucide-vue-next@0.575.0(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      vue: 3.5.26(typescript@5.9.3)
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -2890,6 +3380,8 @@ snapshots:
 
   minipass@7.1.3: {}
 
+  mitt@3.0.1: {}
+
   mrmime@2.0.1:
     optional: true
 
@@ -2945,10 +3437,19 @@ snapshots:
 
   pathe@2.0.3: {}
 
+  perfect-debounce@1.0.0: {}
+
   picocolors@1.1.1: {}
 
   picomatch@4.0.3: {}
 
+  pinia@3.0.4(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-api': 7.7.9
+      vue: 3.5.26(typescript@5.9.3)
+    optionalDependencies:
+      typescript: 5.9.3
+
   pixelmatch@7.1.0:
     dependencies:
       pngjs: 7.0.0
@@ -2999,6 +3500,8 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  rfdc@1.4.1: {}
+
   rimraf@6.1.3:
     dependencies:
       glob: 13.0.6
@@ -3082,6 +3585,8 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  speakingurl@14.0.1: {}
+
   stable-hash-x@0.2.0: {}
 
   stackback@0.0.2: {}
@@ -3092,12 +3597,20 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  superjson@2.2.6:
+    dependencies:
+      copy-anything: 4.0.5
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  tailwindcss@4.2.1: {}
+
+  tapable@2.3.0: {}
+
   tinybench@2.9.0: {}
 
   tinyexec@1.0.2: {}
@@ -3122,13 +3635,13 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
-  typescript-eslint@8.56.1(eslint@9.39.3)(typescript@5.9.3):
+  typescript-eslint@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.56.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3)(typescript@5.9.3))(eslint@9.39.3)(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.56.1(eslint@9.39.3)(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.56.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/typescript-estree': 8.56.1(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.56.1(eslint@9.39.3)(typescript@5.9.3)
-      eslint: 9.39.3
+      '@typescript-eslint/utils': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.3(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
@@ -3173,7 +3686,7 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  vite@7.3.0(@types/node@24.10.4):
+  vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1):
     dependencies:
       esbuild: 0.27.2
       fdir: 6.5.0(picomatch@4.0.3)
@@ -3184,11 +3697,13 @@ snapshots:
     optionalDependencies:
       '@types/node': 24.10.4
       fsevents: 2.3.3
+      jiti: 2.6.1
+      lightningcss: 1.31.1
 
-  vitest@4.0.18(@types/node@24.10.4)(@vitest/browser-playwright@4.0.18):
+  vitest@4.0.18(@types/node@24.10.4)(@vitest/browser-playwright@4.0.18)(jiti@2.6.1)(lightningcss@1.31.1):
     dependencies:
       '@vitest/expect': 4.0.18
-      '@vitest/mocker': 4.0.18(vite@7.3.0(@types/node@24.10.4))
+      '@vitest/mocker': 4.0.18(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1))
       '@vitest/pretty-format': 4.0.18
       '@vitest/runner': 4.0.18
       '@vitest/snapshot': 4.0.18
@@ -3205,11 +3720,11 @@ snapshots:
       tinyexec: 1.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 3.0.3
-      vite: 7.3.0(@types/node@24.10.4)
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 24.10.4
-      '@vitest/browser-playwright': 4.0.18(playwright@1.58.2)(vite@7.3.0(@types/node@24.10.4))(vitest@4.0.18)
+      '@vitest/browser-playwright': 4.0.18(playwright@1.58.2)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1))(vitest@4.0.18)
     transitivePeerDependencies:
       - jiti
       - less

From 1a67d4c18c38109473da0e1992d4073e9141c0b5 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Feb 2026 05:23:18 +0000
Subject: [PATCH 03/21] feat(web): build cyberpunk DApp UI with file digest,
 stamping, verification, and live feed

- Configure Vite with path aliases and Tailwind CSS v4
- Create cyberpunk theme (neon colors, glassmorphism, scanlines, animations)
- Add Pinia store for calendar status and recent stamps
- Add useFileDigest composable: pick file from local FS and compute SHA-256/Keccak-256
- Add useTimestampSDK composable: stamp, verify, upgrade, decode .ots files
- Add useWebSocketFeed composable: simulated real-time attestation feed
- Create base components: GlassCard, BaseButton, StatusBadge
- Create HeroTerminal with drag-and-drop file picker and hash input
- Create StampingWorkflow with step-by-step pipeline visualization
- Create VerificationResult with .ots upload and MerkleTreeViz (recursive)
- Create LiveFeed with real-time scrolling entries
- Create HomeView assembling all components with tab navigation
- Export SDK class, DEFAULT_CALENDARS, enums as runtime values from SDK index

Co-authored-by: lightsing <15951701+lightsing@users.noreply.github.com>
---
 apps/web/index.html                           |  12 +-
 apps/web/package.json                         |   2 +
 apps/web/src/App.vue                          |  27 +--
 apps/web/src/components/HelloWorld.vue        |  45 ----
 apps/web/src/components/base/BaseButton.vue   |  49 +++++
 apps/web/src/components/base/GlassCard.vue    |  17 ++
 apps/web/src/components/base/StatusBadge.vue  |  46 ++++
 apps/web/src/components/feed/LiveFeed.vue     |  94 ++++++++
 .../src/components/stamp/StampingWorkflow.vue | 138 ++++++++++++
 .../src/components/terminal/HeroTerminal.vue  | 200 +++++++++++++++++
 .../src/components/verify/MerkleTreeViz.vue   | 115 ++++++++++
 .../components/verify/VerificationResult.vue  | 174 +++++++++++++++
 apps/web/src/composables/useFileDigest.ts     | 106 +++++++++
 apps/web/src/composables/useTimestampSDK.ts   | 130 +++++++++++
 apps/web/src/composables/useWebSocketFeed.ts  |  81 +++++++
 apps/web/src/main.ts                          |   5 +-
 apps/web/src/stores/app.ts                    |  60 +++++
 apps/web/src/style.css                        | 205 +++++++++++++-----
 apps/web/src/views/HomeView.vue               | 173 +++++++++++++++
 apps/web/tsconfig.app.json                    |   3 +
 apps/web/vite.config.ts                       |   9 +-
 packages/sdk/src/index.ts                     |  10 +
 pnpm-lock.yaml                                |   6 +
 23 files changed, 1574 insertions(+), 133 deletions(-)
 delete mode 100644 apps/web/src/components/HelloWorld.vue
 create mode 100644 apps/web/src/components/base/BaseButton.vue
 create mode 100644 apps/web/src/components/base/GlassCard.vue
 create mode 100644 apps/web/src/components/base/StatusBadge.vue
 create mode 100644 apps/web/src/components/feed/LiveFeed.vue
 create mode 100644 apps/web/src/components/stamp/StampingWorkflow.vue
 create mode 100644 apps/web/src/components/terminal/HeroTerminal.vue
 create mode 100644 apps/web/src/components/verify/MerkleTreeViz.vue
 create mode 100644 apps/web/src/components/verify/VerificationResult.vue
 create mode 100644 apps/web/src/composables/useFileDigest.ts
 create mode 100644 apps/web/src/composables/useTimestampSDK.ts
 create mode 100644 apps/web/src/composables/useWebSocketFeed.ts
 create mode 100644 apps/web/src/stores/app.ts
 create mode 100644 apps/web/src/views/HomeView.vue

diff --git a/apps/web/index.html b/apps/web/index.html
index 508eabd..bca08bf 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -1,12 +1,18 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>web</title>
+    <title>UTS — Universal Timestamps</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
   </head>
-  <body>
+  <body class="bg-deep-black text-white antialiased">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/apps/web/package.json b/apps/web/package.json
index 975ce8c..de618f2 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -11,9 +11,11 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
+    "@noble/hashes": "^2.0.1",
     "@uts/sdk": "workspace:*",
     "@vueuse/core": "^14.2.1",
     "date-fns": "^4.1.0",
+    "ethers": "^6.16.0",
     "lucide-vue-next": "^0.575.0",
     "pinia": "^3.0.4",
     "vue": "^3.5.24"
diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue
index aa54efc..9239bff 100644
--- a/apps/web/src/App.vue
+++ b/apps/web/src/App.vue
@@ -1,30 +1,7 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
+import HomeView from './views/HomeView.vue'
 </script>
 
 <template>
-  <div>
-    <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <Suspense><HelloWorld msg="Vite + Vue" /></Suspense>
+  <HomeView />
 </template>
-
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
diff --git a/apps/web/src/components/HelloWorld.vue b/apps/web/src/components/HelloWorld.vue
deleted file mode 100644
index 390dd42..0000000
--- a/apps/web/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { Encoder } from '@uts/sdk'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-
-const encoder = new Encoder()
-console.log('SDK Encoder initialized:', encoder)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/apps/web/src/components/base/BaseButton.vue b/apps/web/src/components/base/BaseButton.vue
new file mode 100644
index 0000000..66e3a34
--- /dev/null
+++ b/apps/web/src/components/base/BaseButton.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+defineProps<{
+  variant?: 'primary' | 'secondary' | 'danger'
+  disabled?: boolean
+  loading?: boolean
+}>()
+
+defineEmits<{
+  click: [e: MouseEvent]
+}>()
+</script>
+
+<template>
+  <button
+    class="relative inline-flex items-center justify-center gap-2 rounded-lg px-5 py-2.5 font-heading text-sm font-semibold tracking-wide uppercase transition-all duration-200 active:scale-95 disabled:pointer-events-none disabled:opacity-40"
+    :class="{
+      'border border-neon-cyan/40 bg-neon-cyan/10 text-neon-cyan hover:bg-neon-cyan/20 hover:shadow-[0_0_20px_rgba(0,243,255,0.2)]':
+        variant === 'primary' || !variant,
+      'border border-glass-border bg-glass text-white/70 hover:border-white/20 hover:text-white':
+        variant === 'secondary',
+      'border border-invalid/40 bg-invalid/10 text-invalid hover:bg-invalid/20':
+        variant === 'danger',
+    }"
+    :disabled="disabled || loading"
+    @click="$emit('click', $event)"
+  >
+    <svg
+      v-if="loading"
+      class="h-4 w-4 animate-spin"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        class="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      />
+      <path
+        class="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+      />
+    </svg>
+    <slot />
+  </button>
+</template>
diff --git a/apps/web/src/components/base/GlassCard.vue b/apps/web/src/components/base/GlassCard.vue
new file mode 100644
index 0000000..71d946d
--- /dev/null
+++ b/apps/web/src/components/base/GlassCard.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{
+  glow?: 'cyan' | 'purple' | 'none'
+}>()
+</script>
+
+<template>
+  <div
+    class="glass rounded-xl p-6 transition-all duration-300"
+    :class="{
+      'glow-cyan': glow === 'cyan',
+      'glow-purple': glow === 'purple',
+    }"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/web/src/components/base/StatusBadge.vue b/apps/web/src/components/base/StatusBadge.vue
new file mode 100644
index 0000000..9a329f3
--- /dev/null
+++ b/apps/web/src/components/base/StatusBadge.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+defineProps<{
+  status: 'valid' | 'invalid' | 'pending' | 'partial' | 'unknown'
+  size?: 'sm' | 'md' | 'lg'
+}>()
+
+const labels: Record<string, string> = {
+  valid: 'VERIFIED ON CHAIN',
+  invalid: 'INVALID',
+  pending: 'PENDING',
+  partial: 'PARTIALLY VERIFIED',
+  unknown: 'UNKNOWN',
+}
+</script>
+
+<template>
+  <span
+    class="inline-flex items-center gap-2 rounded-full font-mono font-bold uppercase tracking-widest"
+    :class="[
+      {
+        'bg-valid/10 text-valid border border-valid/30': status === 'valid',
+        'bg-invalid/10 text-invalid border border-invalid/30': status === 'invalid',
+        'bg-pending/10 text-pending border border-pending/30': status === 'pending',
+        'bg-neon-purple/10 text-neon-purple border border-neon-purple/30': status === 'partial',
+        'bg-white/5 text-white/50 border border-white/10': status === 'unknown',
+      },
+      {
+        'px-3 py-1 text-xs': size === 'sm' || !size,
+        'px-5 py-2 text-sm': size === 'md',
+        'px-8 py-3 text-lg': size === 'lg',
+      },
+    ]"
+  >
+    <span
+      class="h-2 w-2 rounded-full"
+      :class="{
+        'bg-valid animate-glow-pulse': status === 'valid',
+        'bg-invalid': status === 'invalid',
+        'bg-pending animate-glow-pulse': status === 'pending',
+        'bg-neon-purple animate-glow-pulse': status === 'partial',
+        'bg-white/30': status === 'unknown',
+      }"
+    />
+    {{ labels[status] }}
+  </span>
+</template>
diff --git a/apps/web/src/components/feed/LiveFeed.vue b/apps/web/src/components/feed/LiveFeed.vue
new file mode 100644
index 0000000..29bd340
--- /dev/null
+++ b/apps/web/src/components/feed/LiveFeed.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { formatDistanceToNow } from 'date-fns'
+import { Activity, Bitcoin, Globe, Clock } from 'lucide-vue-next'
+import GlassCard from '@/components/base/GlassCard.vue'
+import { useWebSocketFeed, type FeedEntry } from '@/composables/useWebSocketFeed'
+
+const { entries, isConnected, connect } = useWebSocketFeed()
+
+onMounted(() => {
+  connect()
+})
+
+function getIcon(type: FeedEntry['type']) {
+  switch (type) {
+    case 'bitcoin':
+      return Bitcoin
+    case 'ethereum':
+      return Globe
+    default:
+      return Clock
+  }
+}
+
+function getTypeColor(type: FeedEntry['type']): string {
+  switch (type) {
+    case 'bitcoin':
+      return 'text-pending'
+    case 'ethereum':
+      return 'text-neon-purple'
+    default:
+      return 'text-white/40'
+  }
+}
+
+function truncate(hash: string): string {
+  return `${hash.slice(0, 10)}...${hash.slice(-8)}`
+}
+</script>
+
+<template>
+  <GlassCard>
+    <div class="mb-4 flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <Activity class="h-4 w-4 text-neon-cyan" />
+        <h3 class="font-heading text-sm font-semibold text-white/80">Live Feed</h3>
+      </div>
+      <div class="flex items-center gap-2">
+        <span
+          class="h-2 w-2 rounded-full"
+          :class="isConnected ? 'bg-valid animate-glow-pulse' : 'bg-invalid'"
+        />
+        <span class="font-mono text-[10px] text-white/40">
+          {{ isConnected ? 'CONNECTED' : 'DISCONNECTED' }}
+        </span>
+      </div>
+    </div>
+
+    <div class="max-h-80 space-y-1 overflow-y-auto pr-1">
+      <TransitionGroup name="list">
+        <div
+          v-for="entry in entries"
+          :key="entry.id"
+          class="flex items-center gap-3 rounded-lg px-3 py-2 transition-colors hover:bg-white/5"
+        >
+          <component
+            :is="getIcon(entry.type)"
+            class="h-4 w-4 shrink-0"
+            :class="getTypeColor(entry.type)"
+          />
+          <div class="min-w-0 flex-1">
+            <div class="font-mono text-xs" :class="getTypeColor(entry.type)">
+              {{ truncate(entry.hash) }}
+            </div>
+            <div class="flex items-center gap-2 font-mono text-[10px] text-white/30">
+              <span v-if="entry.chain">{{ entry.chain }}</span>
+              <span v-if="entry.blockHeight">#{{ entry.blockHeight }}</span>
+            </div>
+          </div>
+          <div class="shrink-0 font-mono text-[10px] text-white/20">
+            {{ formatDistanceToNow(entry.timestamp, { addSuffix: true }) }}
+          </div>
+        </div>
+      </TransitionGroup>
+
+      <div
+        v-if="entries.length === 0"
+        class="py-8 text-center font-mono text-xs text-white/30"
+      >
+        Waiting for attestation events...
+      </div>
+    </div>
+  </GlassCard>
+</template>
diff --git a/apps/web/src/components/stamp/StampingWorkflow.vue b/apps/web/src/components/stamp/StampingWorkflow.vue
new file mode 100644
index 0000000..9318c2c
--- /dev/null
+++ b/apps/web/src/components/stamp/StampingWorkflow.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  Hash,
+  KeyRound,
+  GitBranch,
+  Radio,
+  Clock,
+  CheckCircle2,
+  AlertCircle,
+} from 'lucide-vue-next'
+import type { StampPhase } from '@/composables/useTimestampSDK'
+import GlassCard from '@/components/base/GlassCard.vue'
+
+const props = defineProps<{
+  phase: StampPhase
+  error?: string | null
+}>()
+
+interface WorkflowStep {
+  id: StampPhase
+  label: string
+  description: string
+  icon: typeof Hash
+}
+
+const steps: WorkflowStep[] = [
+  { id: 'hashing', label: 'Hashing', description: 'Computing digest of input data', icon: Hash },
+  { id: 'generating-nonce', label: 'Generating Nonce', description: 'Creating random nonce for privacy', icon: KeyRound },
+  { id: 'building-merkle-tree', label: 'Building Merkle Tree', description: 'Constructing proof tree from leaves', icon: GitBranch },
+  { id: 'broadcasting', label: 'Broadcasting', description: 'Submitting to calendar nodes', icon: Radio },
+  { id: 'waiting-attestation', label: 'Awaiting Attestation', description: 'Waiting for on-chain confirmation', icon: Clock },
+  { id: 'complete', label: 'Complete', description: 'Timestamp recorded', icon: CheckCircle2 },
+]
+
+const phaseOrder: StampPhase[] = [
+  'idle',
+  'hashing',
+  'generating-nonce',
+  'building-merkle-tree',
+  'broadcasting',
+  'waiting-attestation',
+  'complete',
+]
+
+const currentIndex = computed(() => phaseOrder.indexOf(props.phase))
+
+function getStepStatus(stepId: StampPhase) {
+  if (props.phase === 'error') return 'error'
+  const stepIndex = phaseOrder.indexOf(stepId)
+  if (stepIndex < currentIndex.value) return 'done'
+  if (stepIndex === currentIndex.value) return 'active'
+  return 'pending'
+}
+</script>
+
+<template>
+  <GlassCard glow="purple">
+    <div class="mb-4 flex items-center gap-2">
+      <GitBranch class="h-4 w-4 text-neon-purple" />
+      <h3 class="font-heading text-sm font-semibold text-white/80">Stamping Pipeline</h3>
+    </div>
+
+    <div class="space-y-1">
+      <div
+        v-for="(step, i) in steps"
+        :key="step.id"
+        class="flex items-start gap-3 rounded-lg px-3 py-2.5 transition-all duration-300"
+        :class="{
+          'bg-neon-cyan/5': getStepStatus(step.id) === 'active',
+          'bg-valid/5': getStepStatus(step.id) === 'done',
+        }"
+      >
+        <!-- Step indicator -->
+        <div class="relative mt-0.5 flex flex-col items-center">
+          <div
+            class="flex h-7 w-7 items-center justify-center rounded-full border transition-all duration-300"
+            :class="{
+              'border-neon-cyan/50 bg-neon-cyan/10 text-neon-cyan': getStepStatus(step.id) === 'active',
+              'border-valid/50 bg-valid/10 text-valid': getStepStatus(step.id) === 'done',
+              'border-glass-border text-white/20': getStepStatus(step.id) === 'pending',
+              'border-invalid/50 bg-invalid/10 text-invalid': getStepStatus(step.id) === 'error',
+            }"
+          >
+            <CheckCircle2 v-if="getStepStatus(step.id) === 'done'" class="h-4 w-4" />
+            <AlertCircle v-else-if="getStepStatus(step.id) === 'error'" class="h-4 w-4" />
+            <component
+              :is="step.icon"
+              v-else
+              class="h-3.5 w-3.5"
+              :class="{ 'animate-spin': getStepStatus(step.id) === 'active' && step.id === 'hashing' }"
+            />
+          </div>
+          <!-- Connecting line -->
+          <div
+            v-if="i < steps.length - 1"
+            class="mt-1 h-3 w-px"
+            :class="{
+              'bg-valid/30': getStepStatus(step.id) === 'done',
+              'bg-neon-cyan/20': getStepStatus(step.id) === 'active',
+              'bg-glass-border': getStepStatus(step.id) === 'pending',
+            }"
+          />
+        </div>
+
+        <!-- Step content -->
+        <div class="min-w-0 flex-1">
+          <div
+            class="font-heading text-sm font-medium transition-colors duration-300"
+            :class="{
+              'text-neon-cyan glow-text-cyan': getStepStatus(step.id) === 'active',
+              'text-valid': getStepStatus(step.id) === 'done',
+              'text-white/30': getStepStatus(step.id) === 'pending',
+              'text-invalid': getStepStatus(step.id) === 'error',
+            }"
+          >
+            {{ step.label }}
+          </div>
+          <div class="font-mono text-[11px] text-white/30">{{ step.description }}</div>
+        </div>
+
+        <!-- Active indicator -->
+        <div
+          v-if="getStepStatus(step.id) === 'active'"
+          class="mt-1 h-1.5 w-1.5 animate-glow-pulse rounded-full bg-neon-cyan"
+        />
+      </div>
+    </div>
+
+    <!-- Error message -->
+    <div
+      v-if="phase === 'error' && error"
+      class="mt-4 rounded-lg border border-invalid/20 bg-invalid/5 px-4 py-3 font-mono text-xs text-invalid"
+    >
+      &gt; {{ error }}
+    </div>
+  </GlassCard>
+</template>
diff --git a/apps/web/src/components/terminal/HeroTerminal.vue b/apps/web/src/components/terminal/HeroTerminal.vue
new file mode 100644
index 0000000..c0a59ba
--- /dev/null
+++ b/apps/web/src/components/terminal/HeroTerminal.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useDropZone } from '@vueuse/core'
+import { Upload, Hash, FileText, X } from 'lucide-vue-next'
+import GlassCard from '@/components/base/GlassCard.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
+import { useFileDigest, type FileDigestResult } from '@/composables/useFileDigest'
+import type { SecureDigestOp } from '@uts/sdk'
+
+const emit = defineEmits<{
+  submit: [digest: FileDigestResult]
+  submitRaw: [hash: string]
+}>()
+
+const dropZoneRef = ref<HTMLDivElement>()
+const fileInputRef = ref<HTMLInputElement>()
+const manualHash = ref('')
+const selectedAlgorithm = ref<SecureDigestOp>('SHA256')
+
+const { isDigesting, progress, error: digestError, result: digestResult, digestFile, reset: resetDigest } = useFileDigest()
+
+const { isOverDropZone } = useDropZone(dropZoneRef, {
+  onDrop: handleDrop,
+  dataTypes: ['Files'],
+})
+
+const hasResult = computed(() => digestResult.value !== null)
+
+function handleDrop(files: File[] | null) {
+  if (files && files.length > 0) {
+    processFile(files[0]!)
+  }
+}
+
+function handleFileInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (file) {
+    processFile(file)
+  }
+}
+
+function openFilePicker() {
+  fileInputRef.value?.click()
+}
+
+async function processFile(file: File) {
+  await digestFile(file, selectedAlgorithm.value)
+}
+
+function handleSubmit() {
+  if (digestResult.value) {
+    emit('submit', digestResult.value)
+  } else if (manualHash.value.trim()) {
+    emit('submitRaw', manualHash.value.trim())
+  }
+}
+
+function handleClear() {
+  resetDigest()
+  manualHash.value = ''
+  if (fileInputRef.value) fileInputRef.value.value = ''
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+</script>
+
+<template>
+  <GlassCard glow="cyan">
+    <!-- Terminal header -->
+    <div class="mb-4 flex items-center gap-2">
+      <div class="flex gap-1.5">
+        <span class="h-3 w-3 rounded-full bg-invalid/60" />
+        <span class="h-3 w-3 rounded-full bg-pending/60" />
+        <span class="h-3 w-3 rounded-full bg-valid/60" />
+      </div>
+      <span class="ml-2 font-mono text-xs text-white/40">uts://terminal</span>
+      <div class="ml-auto flex items-center gap-3">
+        <label class="flex items-center gap-2 text-xs text-white/50">
+          <span class="font-mono">algo:</span>
+          <select
+            v-model="selectedAlgorithm"
+            class="rounded border border-glass-border bg-surface px-2 py-0.5 font-mono text-xs text-neon-cyan outline-none focus:border-neon-cyan/40"
+          >
+            <option value="SHA256">SHA-256</option>
+            <option value="KECCAK256">Keccak-256</option>
+          </select>
+        </label>
+      </div>
+    </div>
+
+    <!-- Drop zone / file input area -->
+    <div
+      ref="dropZoneRef"
+      class="relative rounded-lg border-2 border-dashed p-8 text-center transition-all duration-300"
+      :class="{
+        'border-neon-cyan/50 bg-neon-cyan/5': isOverDropZone,
+        'border-glass-border hover:border-white/20': !isOverDropZone && !hasResult,
+        'border-valid/30 bg-valid/5': hasResult,
+      }"
+    >
+      <!-- Digesting progress -->
+      <div v-if="isDigesting" class="space-y-4">
+        <Hash class="mx-auto h-10 w-10 animate-spin text-neon-cyan" />
+        <div class="font-mono text-sm text-neon-cyan">
+          &gt; Computing {{ selectedAlgorithm }} digest...
+        </div>
+        <div class="mx-auto h-1.5 w-64 overflow-hidden rounded-full bg-surface">
+          <div
+            class="h-full rounded-full bg-neon-cyan transition-all duration-200"
+            :style="{ width: `${progress}%` }"
+          />
+        </div>
+        <div class="font-mono text-xs text-white/40">{{ progress.toFixed(0) }}%</div>
+      </div>
+
+      <!-- Result display -->
+      <div v-else-if="hasResult && digestResult" class="space-y-3">
+        <div class="flex items-center justify-center gap-2">
+          <FileText class="h-5 w-5 text-valid" />
+          <span class="font-heading text-sm font-semibold text-valid">File Digested</span>
+          <button
+            class="ml-2 rounded p-1 text-white/30 transition hover:bg-white/10 hover:text-white"
+            @click="handleClear"
+          >
+            <X class="h-4 w-4" />
+          </button>
+        </div>
+        <div class="font-mono text-xs text-white/50">
+          {{ digestResult.fileName }} ({{ formatSize(digestResult.fileSize) }})
+        </div>
+        <div
+          class="mx-auto max-w-lg break-all rounded bg-surface/80 px-4 py-2 font-mono text-xs text-neon-cyan"
+        >
+          {{ digestResult.digest }}
+        </div>
+        <div class="font-mono text-[10px] uppercase tracking-widest text-white/30">
+          {{ digestResult.algorithm }}
+        </div>
+      </div>
+
+      <!-- Default empty state -->
+      <div v-else class="space-y-4">
+        <Upload class="mx-auto h-10 w-10 text-white/20" />
+        <div class="space-y-1">
+          <p class="font-heading text-sm font-medium text-white/60">
+            Drop a file here to compute its digest
+          </p>
+          <p class="font-mono text-xs text-white/30">or</p>
+        </div>
+        <BaseButton variant="secondary" @click="openFilePicker">
+          <FileText class="h-4 w-4" />
+          Choose File
+        </BaseButton>
+      </div>
+
+      <input
+        ref="fileInputRef"
+        type="file"
+        class="hidden"
+        @change="handleFileInput"
+      />
+    </div>
+
+    <!-- Error display -->
+    <div v-if="digestError" class="mt-3 rounded bg-invalid/10 px-3 py-2 font-mono text-xs text-invalid">
+      &gt; Error: {{ digestError }}
+    </div>
+
+    <!-- Manual hash input -->
+    <div class="mt-4 space-y-2">
+      <div class="flex items-center gap-2 font-mono text-xs text-white/40">
+        <span class="text-neon-cyan">&gt;</span>
+        <span>Or paste a hash directly:</span>
+      </div>
+      <div class="flex gap-2">
+        <input
+          v-model="manualHash"
+          type="text"
+          placeholder="0x..."
+          class="flex-1 rounded-lg border border-glass-border bg-surface px-4 py-2.5 font-mono text-sm text-white/80 outline-none transition placeholder:text-white/20 focus:border-neon-cyan/40"
+          :disabled="hasResult"
+          @keyup.enter="handleSubmit"
+        />
+        <BaseButton
+          :disabled="!hasResult && !manualHash.trim()"
+          :loading="isDigesting"
+          @click="handleSubmit"
+        >
+          <Hash class="h-4 w-4" />
+          Stamp
+        </BaseButton>
+      </div>
+    </div>
+  </GlassCard>
+</template>
diff --git a/apps/web/src/components/verify/MerkleTreeViz.vue b/apps/web/src/components/verify/MerkleTreeViz.vue
new file mode 100644
index 0000000..aac011b
--- /dev/null
+++ b/apps/web/src/components/verify/MerkleTreeViz.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { Step } from '@uts/sdk'
+import { hexlify } from 'ethers/utils'
+import { ChevronRight, GitBranch } from 'lucide-vue-next'
+
+const props = defineProps<{
+  steps: Step[]
+  depth?: number
+}>()
+
+function formatOp(step: Step): string {
+  switch (step.op) {
+    case 'APPEND':
+    case 'PREPEND':
+      return `${step.op}(${truncateHex(hexlify(step.data))})`
+    case 'SHA256':
+    case 'KECCAK256':
+    case 'SHA1':
+    case 'RIPEMD160':
+      return step.op
+    case 'REVERSE':
+      return 'REVERSE'
+    case 'HEXLIFY':
+      return 'HEXLIFY'
+    case 'ATTESTATION':
+      return formatAttestation(step)
+    case 'FORK':
+      return `FORK (${step.steps.length} branches)`
+    default:
+      return 'UNKNOWN'
+  }
+}
+
+function formatAttestation(step: Step): string {
+  if (step.op !== 'ATTESTATION') return ''
+  const a = step.attestation
+  switch (a.kind) {
+    case 'bitcoin':
+      return `Bitcoin @ block ${a.height}`
+    case 'ethereum-uts':
+      return `Ethereum (chain ${a.chain}) @ block ${a.height}`
+    case 'pending':
+      return `Pending → ${a.url}`
+    default:
+      return 'Unknown attestation'
+  }
+}
+
+function getOpColor(step: Step): string {
+  switch (step.op) {
+    case 'SHA256':
+    case 'KECCAK256':
+    case 'SHA1':
+    case 'RIPEMD160':
+      return 'text-neon-cyan'
+    case 'APPEND':
+    case 'PREPEND':
+      return 'text-neon-purple'
+    case 'ATTESTATION':
+      if (step.attestation.kind === 'bitcoin') return 'text-pending'
+      if (step.attestation.kind === 'ethereum-uts') return 'text-neon-purple'
+      return 'text-white/50'
+    case 'FORK':
+      return 'text-neon-orange'
+    default:
+      return 'text-white/40'
+  }
+}
+
+function truncateHex(hex: string): string {
+  if (hex.length <= 18) return hex
+  return `${hex.slice(0, 10)}...${hex.slice(-6)}`
+}
+
+const currentDepth = props.depth ?? 0
+</script>
+
+<template>
+  <div class="space-y-0.5" :style="{ paddingLeft: currentDepth > 0 ? '16px' : '0' }">
+    <div
+      v-for="(step, i) in steps"
+      :key="i"
+      class="group"
+    >
+      <!-- Regular step -->
+      <div
+        v-if="step.op !== 'FORK'"
+        class="flex items-center gap-2 rounded px-2 py-1 font-mono text-xs transition-colors hover:bg-white/5"
+      >
+        <ChevronRight class="h-3 w-3 text-white/20" />
+        <span :class="getOpColor(step)">{{ formatOp(step) }}</span>
+      </div>
+
+      <!-- Fork step - recursive -->
+      <div v-else class="mt-1">
+        <div class="flex items-center gap-2 px-2 py-1 font-mono text-xs text-neon-orange">
+          <GitBranch class="h-3 w-3" />
+          <span>FORK ({{ step.steps.length }} branches)</span>
+        </div>
+        <div
+          v-for="(branch, bi) in step.steps"
+          :key="bi"
+          class="ml-2 mt-1 border-l border-glass-border pl-2"
+        >
+          <div class="mb-1 font-mono text-[10px] text-white/20">branch[{{ bi }}]</div>
+          <MerkleTreeViz :steps="branch" :depth="currentDepth + 1" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default { name: 'MerkleTreeViz' }
+</script>
diff --git a/apps/web/src/components/verify/VerificationResult.vue b/apps/web/src/components/verify/VerificationResult.vue
new file mode 100644
index 0000000..de80d81
--- /dev/null
+++ b/apps/web/src/components/verify/VerificationResult.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { hexlify } from 'ethers/utils'
+import { FileUp, Search, ShieldCheck, ChevronDown, ChevronUp } from 'lucide-vue-next'
+import GlassCard from '@/components/base/GlassCard.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
+import StatusBadge from '@/components/base/StatusBadge.vue'
+import MerkleTreeViz from '@/components/verify/MerkleTreeViz.vue'
+import { useTimestampSDK } from '@/composables/useTimestampSDK'
+import { VerifyStatus } from '@uts/sdk'
+import type { DetachedTimestamp } from '@uts/sdk'
+
+const {
+  verifyStatus,
+  verifyAttestations,
+  isVerifying,
+  verifyError,
+  verify,
+  decodeOtsFile,
+  resetVerify,
+} = useTimestampSDK()
+
+const otsFileRef = ref<HTMLInputElement>()
+const loadedTimestamp = ref<DetachedTimestamp | null>(null)
+const showProofPath = ref(false)
+
+function mapVerifyStatus(status: VerifyStatus | null): 'valid' | 'invalid' | 'pending' | 'partial' | 'unknown' {
+  if (!status) return 'unknown'
+  switch (status) {
+    case VerifyStatus.VALID: return 'valid'
+    case VerifyStatus.INVALID: return 'invalid'
+    case VerifyStatus.PENDING: return 'pending'
+    case VerifyStatus.PARTIAL_VALID: return 'partial'
+    default: return 'unknown'
+  }
+}
+
+async function handleOtsUpload(event: Event) {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (!file) return
+
+  const data = new Uint8Array(await file.arrayBuffer())
+
+  try {
+    const decoded = decodeOtsFile(data)
+    loadedTimestamp.value = decoded
+    await verify(decoded)
+  } catch (e) {
+    console.error('Failed to decode or verify .ots file:', e)
+  }
+}
+
+function handleReset() {
+  resetVerify()
+  loadedTimestamp.value = null
+  showProofPath.value = false
+  if (otsFileRef.value) otsFileRef.value.value = ''
+}
+</script>
+
+<template>
+  <GlassCard glow="cyan">
+    <div class="mb-4 flex items-center gap-2">
+      <ShieldCheck class="h-4 w-4 text-neon-cyan" />
+      <h3 class="font-heading text-sm font-semibold text-white/80">Verification Dashboard</h3>
+    </div>
+
+    <!-- Upload .ots file -->
+    <div v-if="!loadedTimestamp" class="space-y-4">
+      <p class="font-mono text-xs text-white/40">
+        &gt; Upload a <span class="text-neon-cyan">.ots</span> file to verify a timestamp proof
+      </p>
+      <div class="flex gap-2">
+        <BaseButton variant="secondary" @click="otsFileRef?.click()">
+          <FileUp class="h-4 w-4" />
+          Upload .ots
+        </BaseButton>
+      </div>
+      <input
+        ref="otsFileRef"
+        type="file"
+        accept=".ots"
+        class="hidden"
+        @change="handleOtsUpload"
+      />
+    </div>
+
+    <!-- Verification results -->
+    <div v-else class="space-y-5">
+      <!-- Status badge -->
+      <div class="flex items-center gap-4">
+        <StatusBadge
+          v-if="verifyStatus !== null"
+          :status="mapVerifyStatus(verifyStatus)"
+          size="lg"
+        />
+        <div v-if="isVerifying" class="flex items-center gap-2">
+          <Search class="h-4 w-4 animate-spin text-neon-cyan" />
+          <span class="font-mono text-xs text-neon-cyan">Verifying proof chain...</span>
+        </div>
+      </div>
+
+      <!-- Digest info -->
+      <div class="space-y-2 rounded-lg bg-surface/60 p-4">
+        <div class="font-mono text-[10px] uppercase tracking-widest text-white/30">
+          Original Digest ({{ loadedTimestamp.header.kind }})
+        </div>
+        <div class="break-all font-mono text-xs text-neon-cyan">
+          {{ hexlify(loadedTimestamp.header.digest as Uint8Array) }}
+        </div>
+      </div>
+
+      <!-- Attestation details -->
+      <div v-if="verifyAttestations.length > 0" class="space-y-2">
+        <div class="font-mono text-[10px] uppercase tracking-widest text-white/30">
+          Attestations ({{ verifyAttestations.length }})
+        </div>
+        <div
+          v-for="(att, i) in verifyAttestations"
+          :key="i"
+          class="rounded-lg border border-glass-border bg-surface/40 p-3"
+        >
+          <div class="flex items-center gap-2">
+            <StatusBadge
+              :status="att.status === 'VALID' ? 'valid' : att.status === 'PENDING' ? 'pending' : att.status === 'INVALID' ? 'invalid' : 'unknown'"
+              size="sm"
+            />
+            <span class="font-mono text-xs text-white/60">
+              <template v-if="att.attestation.kind === 'bitcoin'">
+                Bitcoin block #{{ att.attestation.height }}
+              </template>
+              <template v-else-if="att.attestation.kind === 'ethereum-uts'">
+                Ethereum (chain {{ att.attestation.chain }}) block #{{ att.attestation.height }}
+              </template>
+              <template v-else-if="att.attestation.kind === 'pending'">
+                Pending → {{ att.attestation.url }}
+              </template>
+              <template v-else>Unknown attestation</template>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Proof path toggle -->
+      <button
+        class="flex w-full items-center gap-2 rounded-lg border border-glass-border px-4 py-2.5 text-left font-mono text-xs text-white/50 transition hover:border-white/20 hover:text-white/70"
+        @click="showProofPath = !showProofPath"
+      >
+        <component :is="showProofPath ? ChevronUp : ChevronDown" class="h-4 w-4" />
+        {{ showProofPath ? 'Hide' : 'Show' }} Proof Path
+      </button>
+
+      <Transition name="fade">
+        <div v-if="showProofPath" class="rounded-lg bg-surface/40 p-4">
+          <MerkleTreeViz :steps="loadedTimestamp.timestamp" />
+        </div>
+      </Transition>
+
+      <!-- Error -->
+      <div
+        v-if="verifyError"
+        class="rounded-lg border border-invalid/20 bg-invalid/5 px-4 py-3 font-mono text-xs text-invalid"
+      >
+        &gt; {{ verifyError }}
+      </div>
+
+      <!-- Reset -->
+      <BaseButton variant="secondary" @click="handleReset">
+        Reset
+      </BaseButton>
+    </div>
+  </GlassCard>
+</template>
diff --git a/apps/web/src/composables/useFileDigest.ts b/apps/web/src/composables/useFileDigest.ts
new file mode 100644
index 0000000..f035c98
--- /dev/null
+++ b/apps/web/src/composables/useFileDigest.ts
@@ -0,0 +1,106 @@
+import { ref } from 'vue'
+import { sha256 } from '@noble/hashes/sha2.js'
+import { keccak_256 } from '@noble/hashes/sha3.js'
+import { hexlify } from 'ethers/utils'
+import type { SecureDigestOp, DigestHeader } from '@uts/sdk'
+
+export interface FileDigestResult {
+  fileName: string
+  fileSize: number
+  algorithm: SecureDigestOp
+  digest: string
+  header: DigestHeader
+}
+
+const CHUNK_SIZE = 64 * 1024 // 64KB chunks for streaming hash
+
+export function useFileDigest() {
+  const isDigesting = ref(false)
+  const progress = ref(0)
+  const error = ref<string | null>(null)
+  const result = ref<FileDigestResult | null>(null)
+
+  async function digestFile(
+    file: File,
+    algorithm: SecureDigestOp = 'SHA256',
+  ): Promise<FileDigestResult> {
+    isDigesting.value = true
+    progress.value = 0
+    error.value = null
+    result.value = null
+
+    try {
+      const factory = algorithm === 'KECCAK256' ? keccak_256 : sha256
+      const hasher = factory.create()
+      const totalSize = file.size
+      let processed = 0
+
+      const reader = file.stream().getReader()
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+
+        // Process in sub-chunks for progress reporting
+        let offset = 0
+        while (offset < value.length) {
+          const end = Math.min(offset + CHUNK_SIZE, value.length)
+          hasher.update(value.subarray(offset, end))
+          offset = end
+          processed += end - offset || (end - (offset - (end - offset)))
+        }
+        processed = Math.min(
+          processed,
+          totalSize,
+        )
+        // Recalculate based on actual bytes seen
+        progress.value = totalSize > 0 ? Math.min((processed / totalSize) * 100, 100) : 100
+
+        // Yield to main thread periodically
+        await new Promise((resolve) => setTimeout(resolve, 0))
+      }
+
+      // Fix progress tracking: just use processed bytes
+      progress.value = 100
+
+      const digestBytes = hasher.digest()
+      const digestHex = hexlify(digestBytes)
+
+      const digestResult: FileDigestResult = {
+        fileName: file.name,
+        fileSize: file.size,
+        algorithm,
+        digest: digestHex,
+        header: {
+          kind: algorithm,
+          digest: digestBytes,
+        },
+      }
+
+      result.value = digestResult
+      return digestResult
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : 'Failed to digest file'
+      error.value = msg
+      throw new Error(msg)
+    } finally {
+      isDigesting.value = false
+    }
+  }
+
+  function reset() {
+    isDigesting.value = false
+    progress.value = 0
+    error.value = null
+    result.value = null
+  }
+
+  return {
+    isDigesting,
+    progress,
+    error,
+    result,
+    digestFile,
+    reset,
+  }
+}
diff --git a/apps/web/src/composables/useTimestampSDK.ts b/apps/web/src/composables/useTimestampSDK.ts
new file mode 100644
index 0000000..7583eeb
--- /dev/null
+++ b/apps/web/src/composables/useTimestampSDK.ts
@@ -0,0 +1,130 @@
+import { ref, shallowRef } from 'vue'
+import {
+  SDK,
+  VerifyStatus,
+  Decoder,
+} from '@uts/sdk'
+import type {
+  DetachedTimestamp,
+  AttestationStatus,
+  UpgradeResult,
+  DigestHeader,
+} from '@uts/sdk'
+
+export type StampPhase =
+  | 'idle'
+  | 'hashing'
+  | 'generating-nonce'
+  | 'building-merkle-tree'
+  | 'broadcasting'
+  | 'waiting-attestation'
+  | 'complete'
+  | 'error'
+
+export function useTimestampSDK() {
+  const sdk = new SDK({ timeout: 15000 })
+
+  const stampPhase = ref<StampPhase>('idle')
+  const stampError = ref<string | null>(null)
+  const stampResult = shallowRef<DetachedTimestamp[] | null>(null)
+
+  const verifyStatus = ref<VerifyStatus | null>(null)
+  const verifyAttestations = shallowRef<AttestationStatus[]>([])
+  const isVerifying = ref(false)
+  const verifyError = ref<string | null>(null)
+
+  async function stamp(digests: DigestHeader[]): Promise<DetachedTimestamp[]> {
+    stampPhase.value = 'hashing'
+    stampError.value = null
+    stampResult.value = null
+
+    try {
+      await delay(400)
+      stampPhase.value = 'generating-nonce'
+      await delay(300)
+      stampPhase.value = 'building-merkle-tree'
+      await delay(300)
+      stampPhase.value = 'broadcasting'
+
+      const results = await sdk.stamp(digests)
+
+      stampPhase.value = 'waiting-attestation'
+      await delay(500)
+      stampPhase.value = 'complete'
+      stampResult.value = results
+      return results
+    } catch (e) {
+      stampPhase.value = 'error'
+      stampError.value = e instanceof Error ? e.message : 'Stamping failed'
+      throw e
+    }
+  }
+
+  async function verify(
+    stamp: DetachedTimestamp,
+  ): Promise<{ status: VerifyStatus; attestations: AttestationStatus[] }> {
+    isVerifying.value = true
+    verifyError.value = null
+    verifyStatus.value = null
+    verifyAttestations.value = []
+
+    try {
+      const attestations = await sdk.verify(stamp)
+      const status = sdk.transformResult(attestations)
+
+      verifyStatus.value = status
+      verifyAttestations.value = attestations
+      return { status, attestations }
+    } catch (e) {
+      verifyError.value = e instanceof Error ? e.message : 'Verification failed'
+      throw e
+    } finally {
+      isVerifying.value = false
+    }
+  }
+
+  async function upgrade(
+    detached: DetachedTimestamp,
+  ): Promise<UpgradeResult[]> {
+    return sdk.upgrade(detached)
+  }
+
+  function decodeOtsFile(data: Uint8Array): DetachedTimestamp {
+    const decoder = new Decoder(data)
+    return decoder.readDetachedTimestamp()
+  }
+
+  function resetStamp() {
+    stampPhase.value = 'idle'
+    stampError.value = null
+    stampResult.value = null
+  }
+
+  function resetVerify() {
+    verifyStatus.value = null
+    verifyAttestations.value = []
+    isVerifying.value = false
+    verifyError.value = null
+  }
+
+  return {
+    stampPhase,
+    stampError,
+    stampResult,
+    stamp,
+    resetStamp,
+
+    verifyStatus,
+    verifyAttestations,
+    isVerifying,
+    verifyError,
+    verify,
+    upgrade,
+    decodeOtsFile,
+    resetVerify,
+  }
+}
+
+function delay(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
diff --git a/apps/web/src/composables/useWebSocketFeed.ts b/apps/web/src/composables/useWebSocketFeed.ts
new file mode 100644
index 0000000..bee9b89
--- /dev/null
+++ b/apps/web/src/composables/useWebSocketFeed.ts
@@ -0,0 +1,81 @@
+import { ref, onUnmounted } from 'vue'
+
+export interface FeedEntry {
+  id: string
+  hash: string
+  type: 'bitcoin' | 'ethereum' | 'pending'
+  chain?: string
+  blockHeight?: number
+  timestamp: number
+}
+
+export function useWebSocketFeed() {
+  const entries = ref<FeedEntry[]>([])
+  const isConnected = ref(false)
+  let intervalId: ReturnType<typeof setInterval> | null = null
+
+  const MOCK_CHAINS = ['Bitcoin', 'Ethereum', 'Scroll', 'Sepolia']
+  const MOCK_TYPES: FeedEntry['type'][] = ['bitcoin', 'ethereum', 'pending']
+
+  function randomHex(len: number): string {
+    const bytes = new Uint8Array(len)
+    crypto.getRandomValues(bytes)
+    return (
+      '0x' +
+      Array.from(bytes)
+        .map((b) => b.toString(16).padStart(2, '0'))
+        .join('')
+    )
+  }
+
+  function generateMockEntry(): FeedEntry {
+    const type = MOCK_TYPES[Math.floor(Math.random() * MOCK_TYPES.length)]!
+    return {
+      id: crypto.randomUUID(),
+      hash: randomHex(32),
+      type,
+      chain: type !== 'pending' ? MOCK_CHAINS[Math.floor(Math.random() * MOCK_CHAINS.length)] : undefined,
+      blockHeight:
+        type !== 'pending'
+          ? Math.floor(Math.random() * 1000000) + 19000000
+          : undefined,
+      timestamp: Date.now(),
+    }
+  }
+
+  function connect() {
+    isConnected.value = true
+
+    // Seed initial entries
+    for (let i = 0; i < 8; i++) {
+      entries.value.push(generateMockEntry())
+    }
+
+    // Simulate live feed
+    intervalId = setInterval(() => {
+      entries.value.unshift(generateMockEntry())
+      if (entries.value.length > 50) {
+        entries.value.pop()
+      }
+    }, 3000 + Math.random() * 2000)
+  }
+
+  function disconnect() {
+    isConnected.value = false
+    if (intervalId) {
+      clearInterval(intervalId)
+      intervalId = null
+    }
+  }
+
+  onUnmounted(() => {
+    disconnect()
+  })
+
+  return {
+    entries,
+    isConnected,
+    connect,
+    disconnect,
+  }
+}
diff --git a/apps/web/src/main.ts b/apps/web/src/main.ts
index 2425c0f..a2cedb6 100644
--- a/apps/web/src/main.ts
+++ b/apps/web/src/main.ts
@@ -1,5 +1,8 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import './style.css'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(createPinia())
+app.mount('#app')
diff --git a/apps/web/src/stores/app.ts b/apps/web/src/stores/app.ts
new file mode 100644
index 0000000..4278ab1
--- /dev/null
+++ b/apps/web/src/stores/app.ts
@@ -0,0 +1,60 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { DEFAULT_CALENDARS } from '@uts/sdk'
+import type { DetachedTimestamp } from '@uts/sdk'
+
+export interface CalendarNode {
+  url: string
+  status: 'online' | 'offline' | 'checking'
+  latency?: number
+}
+
+export const useAppStore = defineStore('app', () => {
+  const calendars = ref<CalendarNode[]>(
+    DEFAULT_CALENDARS.map((url) => ({
+      url: url.toString(),
+      status: 'checking' as const,
+    })),
+  )
+
+  const recentStamps = ref<DetachedTimestamp[]>([])
+
+  const onlineCount = computed(
+    () => calendars.value.filter((c) => c.status === 'online').length,
+  )
+
+  async function checkCalendars() {
+    for (const cal of calendars.value) {
+      cal.status = 'checking'
+      const start = performance.now()
+      try {
+        const response = await fetch(cal.url, {
+          method: 'HEAD',
+          mode: 'no-cors',
+          signal: AbortSignal.timeout(5000),
+        })
+        // no-cors returns opaque response; treat as online
+        cal.latency = Math.round(performance.now() - start)
+        cal.status = response.type === 'opaque' || response.ok ? 'online' : 'offline'
+      } catch {
+        cal.status = 'offline'
+        cal.latency = undefined
+      }
+    }
+  }
+
+  function addStamp(stamp: DetachedTimestamp) {
+    recentStamps.value.unshift(stamp)
+    if (recentStamps.value.length > 20) {
+      recentStamps.value.pop()
+    }
+  }
+
+  return {
+    calendars,
+    recentStamps,
+    onlineCount,
+    checkCalendars,
+    addStamp,
+  }
+})
diff --git a/apps/web/src/style.css b/apps/web/src/style.css
index f691315..8442c96 100644
--- a/apps/web/src/style.css
+++ b/apps/web/src/style.css
@@ -1,79 +1,168 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+@import 'tailwindcss';
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+@theme {
+  --color-deep-black: #050505;
+  --color-midnight: #0a0f14;
+  --color-neon-cyan: #00f3ff;
+  --color-neon-purple: #bc13fe;
+  --color-neon-orange: #ff9e00;
+  --color-glass: rgba(255, 255, 255, 0.04);
+  --color-glass-border: rgba(255, 255, 255, 0.08);
+  --color-surface: #0d1117;
+  --color-surface-light: #161b22;
+  --color-valid: #00ff88;
+  --color-invalid: #ff3366;
+  --color-pending: #ff9e00;
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+  --font-heading: 'Space Grotesk', system-ui, sans-serif;
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+  --animate-glow-pulse: glow-pulse 2s ease-in-out infinite;
+  --animate-scan: scan 4s linear infinite;
+  --animate-fade-in: fade-in 0.5s ease-out;
+  --animate-slide-up: slide-up 0.4s ease-out;
+  --animate-typewriter: typewriter 0.05s steps(1) infinite;
+
+  @keyframes glow-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  @keyframes scan {
+    0% {
+      transform: translateY(-100%);
+    }
+    100% {
+      transform: translateY(100vh);
+    }
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 }
 
+/* Base styles */
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
   min-height: 100vh;
+  background: var(--color-deep-black);
+  overflow-x: hidden;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+#app {
+  width: 100%;
+  min-height: 100vh;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
+/* Scanline overlay */
+.scanlines::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 243, 255, 0.015) 2px,
+    rgba(0, 243, 255, 0.015) 4px
+  );
+  pointer-events: none;
+  z-index: 9999;
 }
-button:hover {
-  border-color: #646cff;
+
+/* Glass card */
+.glass {
+  background: var(--color-glass);
+  border: 1px solid var(--color-glass-border);
+  backdrop-filter: blur(12px);
 }
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+
+/* Glow effects */
+.glow-cyan {
+  box-shadow:
+    0 0 10px rgba(0, 243, 255, 0.15),
+    0 0 40px rgba(0, 243, 255, 0.05);
 }
 
-.card {
-  padding: 2em;
+.glow-purple {
+  box-shadow:
+    0 0 10px rgba(188, 19, 254, 0.15),
+    0 0 40px rgba(188, 19, 254, 0.05);
 }
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+.glow-text-cyan {
+  text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+.glow-text-valid {
+  text-shadow: 0 0 12px rgba(0, 255, 136, 0.6);
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 243, 255, 0.2);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 243, 255, 0.4);
+}
+
+/* Transition classes */
+.fade-enter-active,
+.fade-leave-active {
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.4s ease;
+}
+
+.list-enter-from {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
 }
diff --git a/apps/web/src/views/HomeView.vue b/apps/web/src/views/HomeView.vue
new file mode 100644
index 0000000..57ed97c
--- /dev/null
+++ b/apps/web/src/views/HomeView.vue
@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { Zap, Shield } from 'lucide-vue-next'
+import HeroTerminal from '@/components/terminal/HeroTerminal.vue'
+import StampingWorkflow from '@/components/stamp/StampingWorkflow.vue'
+import VerificationResult from '@/components/verify/VerificationResult.vue'
+import LiveFeed from '@/components/feed/LiveFeed.vue'
+import { useTimestampSDK } from '@/composables/useTimestampSDK'
+import type { FileDigestResult } from '@/composables/useFileDigest'
+import { useAppStore } from '@/stores/app'
+
+const store = useAppStore()
+const { stampPhase, stampError, stamp, resetStamp } = useTimestampSDK()
+
+const activeTab = ref<'stamp' | 'verify'>('stamp')
+const showWorkflow = ref(false)
+
+onMounted(() => {
+  store.checkCalendars()
+})
+
+async function handleStampFromDigest(digest: FileDigestResult) {
+  showWorkflow.value = true
+  try {
+    const results = await stamp([digest.header])
+    for (const r of results) store.addStamp(r)
+  } catch {
+    // error is tracked in stampError
+  }
+}
+
+async function handleStampFromHash(hash: string) {
+  showWorkflow.value = true
+  const digest = hash.startsWith('0x') ? hash : `0x${hash}`
+  const bytes = new Uint8Array(
+    (digest.slice(2).match(/.{2}/g) ?? []).map((b) => parseInt(b, 16)),
+  )
+  try {
+    const results = await stamp([{ kind: 'SHA256', digest: bytes }])
+    for (const r of results) store.addStamp(r)
+  } catch {
+    // error is tracked in stampError
+  }
+}
+
+function handleResetWorkflow() {
+  resetStamp()
+  showWorkflow.value = false
+}
+</script>
+
+<template>
+  <div class="scanlines min-h-screen bg-deep-black">
+    <!-- Header -->
+    <header class="border-b border-glass-border bg-midnight/80 backdrop-blur-md">
+      <div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
+        <div class="flex items-center gap-3">
+          <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-neon-cyan/10">
+            <Zap class="h-5 w-5 text-neon-cyan" />
+          </div>
+          <div>
+            <h1 class="font-heading text-lg font-bold tracking-tight text-white">
+              UTS
+            </h1>
+            <p class="font-mono text-[10px] text-white/30">Universal Timestamps</p>
+          </div>
+        </div>
+
+        <!-- Calendar status -->
+        <div class="flex items-center gap-4">
+          <div class="flex items-center gap-2">
+            <span
+              v-for="cal in store.calendars"
+              :key="cal.url"
+              class="group relative h-2 w-2 cursor-help rounded-full"
+              :class="{
+                'bg-valid animate-glow-pulse': cal.status === 'online',
+                'bg-invalid': cal.status === 'offline',
+                'bg-pending animate-glow-pulse': cal.status === 'checking',
+              }"
+              :title="`${cal.url} — ${cal.status}${cal.latency ? ` (${cal.latency}ms)` : ''}`"
+            />
+          </div>
+          <span class="font-mono text-[10px] text-white/30">
+            {{ store.onlineCount }}/{{ store.calendars.length }} nodes
+          </span>
+        </div>
+      </div>
+    </header>
+
+    <!-- Main content -->
+    <main class="mx-auto max-w-6xl px-6 py-8">
+      <!-- Title -->
+      <div class="mb-10 text-center">
+        <h2 class="font-heading text-3xl font-bold tracking-tight text-white">
+          Decentralized <span class="text-neon-cyan glow-text-cyan">Timestamping</span>
+        </h2>
+        <p class="mt-2 font-mono text-sm text-white/40">
+          Cryptographic proof of existence anchored to Bitcoin &amp; Ethereum
+        </p>
+      </div>
+
+      <!-- Tab navigation -->
+      <div class="mb-8 flex justify-center gap-1 rounded-xl bg-surface/50 p-1">
+        <button
+          class="flex items-center gap-2 rounded-lg px-6 py-2.5 font-heading text-sm font-medium transition-all"
+          :class="
+            activeTab === 'stamp'
+              ? 'bg-neon-cyan/10 text-neon-cyan'
+              : 'text-white/40 hover:text-white/60'
+          "
+          @click="activeTab = 'stamp'; handleResetWorkflow()"
+        >
+          <Zap class="h-4 w-4" />
+          Stamp
+        </button>
+        <button
+          class="flex items-center gap-2 rounded-lg px-6 py-2.5 font-heading text-sm font-medium transition-all"
+          :class="
+            activeTab === 'verify'
+              ? 'bg-neon-cyan/10 text-neon-cyan'
+              : 'text-white/40 hover:text-white/60'
+          "
+          @click="activeTab = 'verify'"
+        >
+          <Shield class="h-4 w-4" />
+          Verify
+        </button>
+      </div>
+
+      <!-- Content -->
+      <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        <!-- Main panel (2/3) -->
+        <div class="space-y-6 lg:col-span-2">
+          <Transition name="fade" mode="out-in">
+            <!-- Stamp tab -->
+            <div v-if="activeTab === 'stamp'" key="stamp" class="space-y-6">
+              <HeroTerminal
+                @submit="handleStampFromDigest"
+                @submit-raw="handleStampFromHash"
+              />
+
+              <Transition name="fade">
+                <StampingWorkflow
+                  v-if="showWorkflow"
+                  :phase="stampPhase"
+                  :error="stampError"
+                />
+              </Transition>
+            </div>
+
+            <!-- Verify tab -->
+            <div v-else key="verify">
+              <VerificationResult />
+            </div>
+          </Transition>
+        </div>
+
+        <!-- Sidebar (1/3) -->
+        <div class="space-y-6">
+          <LiveFeed />
+        </div>
+      </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="border-t border-glass-border py-6 text-center">
+      <p class="font-mono text-[10px] text-white/20">
+        UTS Protocol — Powered by OpenTimestamps
+      </p>
+    </footer>
+  </div>
+</template>
diff --git a/apps/web/tsconfig.app.json b/apps/web/tsconfig.app.json
index 8d16e42..245d63d 100644
--- a/apps/web/tsconfig.app.json
+++ b/apps/web/tsconfig.app.json
@@ -3,6 +3,9 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "types": ["vite/client"],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
 
     /* Linting */
     "strict": true,
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index bbcf80c..72a291d 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -1,7 +1,14 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
+import { fileURLToPath, URL } from 'node:url'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
 })
diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts
index 27cd9b4..bde657b 100644
--- a/packages/sdk/src/index.ts
+++ b/packages/sdk/src/index.ts
@@ -10,6 +10,13 @@ export type {
   EthereumUTSAttestationExtraMetadata,
 } from './types.ts'
 
+export {
+  DIGEST_OPS,
+  UpgradeStatus,
+  AttestationStatusKind,
+  VerifyStatus,
+} from './types.ts'
+
 export { default as Encoder } from './codec/encode.ts'
 export { default as Decoder } from './codec/decode.ts'
 
@@ -21,6 +28,9 @@ export * from './bmt.ts'
 
 export { default as BitcoinRPC } from './rpc/btc.ts'
 
+export { default as SDK, DEFAULT_CALENDARS, UTS_ABI } from './sdk.ts'
+export type { SDKOptions } from './sdk.ts'
+
 export const hexlify = (obj: any): any => {
   if (obj instanceof URL) {
     return obj
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 80da8bf..4b49d17 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ importers:
 
   apps/web:
     dependencies:
+      '@noble/hashes':
+        specifier: ^2.0.1
+        version: 2.0.1
       '@uts/sdk':
         specifier: workspace:*
         version: link:../../packages/sdk
@@ -44,6 +47,9 @@ importers:
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
+      ethers:
+        specifier: ^6.16.0
+        version: 6.16.0
       lucide-vue-next:
         specifier: ^0.575.0
         version: 0.575.0(vue@3.5.26(typescript@5.9.3))

From daf0d62385d029c072f7f38318267053c49ca8f6 Mon Sep 17 00:00:00 2001
From: lightsing <light.tsing@gmail.com>
Date: Wed, 25 Feb 2026 13:32:54 +0800
Subject: [PATCH 04/21] webapp don't need to build sdk

---
 apps/web/vite.config.ts   | 1 +
 packages/sdk/package.json | 1 +
 2 files changed, 2 insertions(+)

diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index 72a291d..f1d2885 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -10,5 +10,6 @@ export default defineConfig({
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
+    conditions: ['uts-source', 'module', 'browser', 'development|production'],
   },
 })
diff --git a/packages/sdk/package.json b/packages/sdk/package.json
index 9235168..0c459f6 100644
--- a/packages/sdk/package.json
+++ b/packages/sdk/package.json
@@ -9,6 +9,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "uts-source": "./src/index.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     }

From 2c263be50dd95935fd33983675412995c127e426 Mon Sep 17 00:00:00 2001
From: lightsing <light.tsing@gmail.com>
Date: Wed, 25 Feb 2026 13:33:08 +0800
Subject: [PATCH 05/21] fix naming

---
 apps/web/src/views/HomeView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/views/HomeView.vue b/apps/web/src/views/HomeView.vue
index 57ed97c..032991b 100644
--- a/apps/web/src/views/HomeView.vue
+++ b/apps/web/src/views/HomeView.vue
@@ -166,7 +166,7 @@ function handleResetWorkflow() {
     <!-- Footer -->
     <footer class="border-t border-glass-border py-6 text-center">
       <p class="font-mono text-[10px] text-white/20">
-        UTS Protocol — Powered by OpenTimestamps
+        UTS Protocol — Powered by Universal Timestamps
       </p>
     </footer>
   </div>

From 55fb97a4bb10203491ec07b8599e1455b42390aa Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Feb 2026 05:41:11 +0000
Subject: [PATCH 06/21] feat(web): ethereum-first UI with real feed data from
 ethRPCs

- Replace mock LiveFeed with real Ethereum Attested event polling via SDK ethRPCs
- Show Ethereum chain RPC statuses in header instead of Bitcoin calendar nodes
- Update subtitle to "anchored to Ethereum"
- Expose singleton SDK instance via getSDK() for shared access
- Bitcoin attestation verification still fully supported in Verify tab

Co-authored-by: lightsing <15951701+lightsing@users.noreply.github.com>
---
 apps/web/src/components/feed/LiveFeed.vue    |  51 +++------
 apps/web/src/composables/useTimestampSDK.ts  |  11 +-
 apps/web/src/composables/useWebSocketFeed.ts | 111 ++++++++++++-------
 apps/web/src/stores/app.ts                   |  63 ++++++-----
 apps/web/src/views/HomeView.vue              |  20 ++--
 5 files changed, 145 insertions(+), 111 deletions(-)

diff --git a/apps/web/src/components/feed/LiveFeed.vue b/apps/web/src/components/feed/LiveFeed.vue
index 29bd340..9370f7b 100644
--- a/apps/web/src/components/feed/LiveFeed.vue
+++ b/apps/web/src/components/feed/LiveFeed.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import { formatDistanceToNow } from 'date-fns'
-import { Activity, Bitcoin, Globe, Clock } from 'lucide-vue-next'
+import { Activity, Globe, Clock } from 'lucide-vue-next'
 import GlassCard from '@/components/base/GlassCard.vue'
-import { useWebSocketFeed, type FeedEntry } from '@/composables/useWebSocketFeed'
+import { useWebSocketFeed } from '@/composables/useWebSocketFeed'
 
 const { entries, isConnected, connect } = useWebSocketFeed()
 
@@ -11,28 +11,6 @@ onMounted(() => {
   connect()
 })
 
-function getIcon(type: FeedEntry['type']) {
-  switch (type) {
-    case 'bitcoin':
-      return Bitcoin
-    case 'ethereum':
-      return Globe
-    default:
-      return Clock
-  }
-}
-
-function getTypeColor(type: FeedEntry['type']): string {
-  switch (type) {
-    case 'bitcoin':
-      return 'text-pending'
-    case 'ethereum':
-      return 'text-neon-purple'
-    default:
-      return 'text-white/40'
-  }
-}
-
 function truncate(hash: string): string {
   return `${hash.slice(0, 10)}...${hash.slice(-8)}`
 }
@@ -51,7 +29,7 @@ function truncate(hash: string): string {
           :class="isConnected ? 'bg-valid animate-glow-pulse' : 'bg-invalid'"
         />
         <span class="font-mono text-[10px] text-white/40">
-          {{ isConnected ? 'CONNECTED' : 'DISCONNECTED' }}
+          {{ isConnected ? 'POLLING' : 'DISCONNECTED' }}
         </span>
       </div>
     </div>
@@ -63,18 +41,14 @@ function truncate(hash: string): string {
           :key="entry.id"
           class="flex items-center gap-3 rounded-lg px-3 py-2 transition-colors hover:bg-white/5"
         >
-          <component
-            :is="getIcon(entry.type)"
-            class="h-4 w-4 shrink-0"
-            :class="getTypeColor(entry.type)"
-          />
+          <Globe class="h-4 w-4 shrink-0 text-neon-purple" />
           <div class="min-w-0 flex-1">
-            <div class="font-mono text-xs" :class="getTypeColor(entry.type)">
+            <div class="font-mono text-xs text-neon-purple">
               {{ truncate(entry.hash) }}
             </div>
             <div class="flex items-center gap-2 font-mono text-[10px] text-white/30">
-              <span v-if="entry.chain">{{ entry.chain }}</span>
-              <span v-if="entry.blockHeight">#{{ entry.blockHeight }}</span>
+              <span>{{ entry.chain }}</span>
+              <span>#{{ entry.blockHeight }}</span>
             </div>
           </div>
           <div class="shrink-0 font-mono text-[10px] text-white/20">
@@ -84,10 +58,17 @@ function truncate(hash: string): string {
       </TransitionGroup>
 
       <div
-        v-if="entries.length === 0"
+        v-if="entries.length === 0 && isConnected"
+        class="py-8 text-center font-mono text-xs text-white/30"
+      >
+        <Clock class="mx-auto mb-2 h-5 w-5 text-white/20" />
+        Polling Ethereum RPCs for Attested events...
+      </div>
+      <div
+        v-else-if="entries.length === 0"
         class="py-8 text-center font-mono text-xs text-white/30"
       >
-        Waiting for attestation events...
+        Waiting for connection...
       </div>
     </div>
   </GlassCard>
diff --git a/apps/web/src/composables/useTimestampSDK.ts b/apps/web/src/composables/useTimestampSDK.ts
index 7583eeb..bcb3799 100644
--- a/apps/web/src/composables/useTimestampSDK.ts
+++ b/apps/web/src/composables/useTimestampSDK.ts
@@ -21,8 +21,17 @@ export type StampPhase =
   | 'complete'
   | 'error'
 
+let _sdkInstance: SDK | null = null
+
+export function getSDK(): SDK {
+  if (!_sdkInstance) {
+    _sdkInstance = new SDK({ timeout: 15000 })
+  }
+  return _sdkInstance
+}
+
 export function useTimestampSDK() {
-  const sdk = new SDK({ timeout: 15000 })
+  const sdk = getSDK()
 
   const stampPhase = ref<StampPhase>('idle')
   const stampError = ref<string | null>(null)
diff --git a/apps/web/src/composables/useWebSocketFeed.ts b/apps/web/src/composables/useWebSocketFeed.ts
index bee9b89..b599c2d 100644
--- a/apps/web/src/composables/useWebSocketFeed.ts
+++ b/apps/web/src/composables/useWebSocketFeed.ts
@@ -1,11 +1,23 @@
 import { ref, onUnmounted } from 'vue'
+import { SDK } from '@uts/sdk'
+import { getSDK } from './useTimestampSDK'
+
+const CHAIN_NAMES: Record<number, string> = {
+  1: 'Ethereum',
+  17000: 'Holesky',
+  11155111: 'Sepolia',
+  54352: 'Scroll',
+  54351: 'Scroll Sepolia',
+}
 
 export interface FeedEntry {
   id: string
   hash: string
-  type: 'bitcoin' | 'ethereum' | 'pending'
-  chain?: string
-  blockHeight?: number
+  type: 'ethereum'
+  chain: string
+  chainId: number
+  blockHeight: number
+  sender?: string
   timestamp: number
 }
 
@@ -13,51 +25,72 @@ export function useWebSocketFeed() {
   const entries = ref<FeedEntry[]>([])
   const isConnected = ref(false)
   let intervalId: ReturnType<typeof setInterval> | null = null
+  let lastBlock: Record<number, number> = {}
 
-  const MOCK_CHAINS = ['Bitcoin', 'Ethereum', 'Scroll', 'Sepolia']
-  const MOCK_TYPES: FeedEntry['type'][] = ['bitcoin', 'ethereum', 'pending']
-
-  function randomHex(len: number): string {
-    const bytes = new Uint8Array(len)
-    crypto.getRandomValues(bytes)
-    return (
-      '0x' +
-      Array.from(bytes)
-        .map((b) => b.toString(16).padStart(2, '0'))
-        .join('')
-    )
-  }
+  async function fetchLatestEvents(sdk: SDK) {
+    const chainIds = Object.keys(sdk.ethRPCs).map(Number)
+
+    for (const chainId of chainIds) {
+      const provider = sdk.getEthProvider(chainId)
+      if (!provider) continue
+
+      try {
+        const currentBlock = await provider.getBlockNumber()
+        const fromBlock = lastBlock[chainId]
+          ? lastBlock[chainId] + 1
+          : currentBlock - 5
+
+        if (fromBlock > currentBlock) continue
+
+        const logs = await provider.getLogs({
+          fromBlock,
+          toBlock: currentBlock,
+          topics: [SDK.utsLogTopic],
+        })
 
-  function generateMockEntry(): FeedEntry {
-    const type = MOCK_TYPES[Math.floor(Math.random() * MOCK_TYPES.length)]!
-    return {
-      id: crypto.randomUUID(),
-      hash: randomHex(32),
-      type,
-      chain: type !== 'pending' ? MOCK_CHAINS[Math.floor(Math.random() * MOCK_CHAINS.length)] : undefined,
-      blockHeight:
-        type !== 'pending'
-          ? Math.floor(Math.random() * 1000000) + 19000000
-          : undefined,
-      timestamp: Date.now(),
+        for (const log of logs) {
+          const parsed = SDK.utsInterface.parseLog(log)
+          if (!parsed) continue
+
+          const root: string = parsed.args[0]
+          const sender: string = parsed.args[1]
+          const ts: bigint = parsed.args[2]
+
+          entries.value.unshift({
+            id: `${chainId}-${log.blockNumber}-${log.index}`,
+            hash: root,
+            type: 'ethereum',
+            chain: CHAIN_NAMES[chainId] ?? `Chain ${chainId}`,
+            chainId,
+            blockHeight: log.blockNumber,
+            sender,
+            timestamp: Number(ts) * 1000,
+          })
+        }
+
+        lastBlock[chainId] = currentBlock
+
+        if (entries.value.length > 50) {
+          entries.value.length = 50
+        }
+      } catch (e) {
+        console.warn(`Feed: failed to poll chain ${chainId}:`, e)
+      }
     }
   }
 
-  function connect() {
+  async function connect() {
+    const sdk = getSDK()
     isConnected.value = true
+    lastBlock = {}
 
-    // Seed initial entries
-    for (let i = 0; i < 8; i++) {
-      entries.value.push(generateMockEntry())
-    }
+    // Initial fetch
+    await fetchLatestEvents(sdk)
 
-    // Simulate live feed
+    // Poll every 15s
     intervalId = setInterval(() => {
-      entries.value.unshift(generateMockEntry())
-      if (entries.value.length > 50) {
-        entries.value.pop()
-      }
-    }, 3000 + Math.random() * 2000)
+      fetchLatestEvents(sdk)
+    }, 15000)
   }
 
   function disconnect() {
diff --git a/apps/web/src/stores/app.ts b/apps/web/src/stores/app.ts
index 4278ab1..3950eab 100644
--- a/apps/web/src/stores/app.ts
+++ b/apps/web/src/stores/app.ts
@@ -1,44 +1,55 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
-import { DEFAULT_CALENDARS } from '@uts/sdk'
 import type { DetachedTimestamp } from '@uts/sdk'
+import { getSDK } from '@/composables/useTimestampSDK'
 
-export interface CalendarNode {
-  url: string
+const CHAIN_NAMES: Record<number, string> = {
+  1: 'Ethereum',
+  17000: 'Holesky',
+  11155111: 'Sepolia',
+  54352: 'Scroll',
+  54351: 'Scroll Sepolia',
+}
+
+export interface EthChainNode {
+  chainId: number
+  name: string
   status: 'online' | 'offline' | 'checking'
   latency?: number
 }
 
 export const useAppStore = defineStore('app', () => {
-  const calendars = ref<CalendarNode[]>(
-    DEFAULT_CALENDARS.map((url) => ({
-      url: url.toString(),
-      status: 'checking' as const,
-    })),
-  )
-
+  const ethChains = ref<EthChainNode[]>([])
   const recentStamps = ref<DetachedTimestamp[]>([])
 
   const onlineCount = computed(
-    () => calendars.value.filter((c) => c.status === 'online').length,
+    () => ethChains.value.filter((c) => c.status === 'online').length,
   )
 
-  async function checkCalendars() {
-    for (const cal of calendars.value) {
-      cal.status = 'checking'
+  async function checkChains() {
+    const sdk = getSDK()
+    const chainIds = Object.keys(sdk.ethRPCs).map(Number)
+
+    ethChains.value = chainIds.map((chainId) => ({
+      chainId,
+      name: CHAIN_NAMES[chainId] ?? `Chain ${chainId}`,
+      status: 'checking' as const,
+    }))
+
+    for (const chain of ethChains.value) {
+      const provider = sdk.getEthProvider(chain.chainId)
+      if (!provider) {
+        chain.status = 'offline'
+        continue
+      }
       const start = performance.now()
       try {
-        const response = await fetch(cal.url, {
-          method: 'HEAD',
-          mode: 'no-cors',
-          signal: AbortSignal.timeout(5000),
-        })
-        // no-cors returns opaque response; treat as online
-        cal.latency = Math.round(performance.now() - start)
-        cal.status = response.type === 'opaque' || response.ok ? 'online' : 'offline'
+        await provider.getBlockNumber()
+        chain.latency = Math.round(performance.now() - start)
+        chain.status = 'online'
       } catch {
-        cal.status = 'offline'
-        cal.latency = undefined
+        chain.status = 'offline'
+        chain.latency = undefined
       }
     }
   }
@@ -51,10 +62,10 @@ export const useAppStore = defineStore('app', () => {
   }
 
   return {
-    calendars,
+    ethChains,
     recentStamps,
     onlineCount,
-    checkCalendars,
+    checkChains,
     addStamp,
   }
 })
diff --git a/apps/web/src/views/HomeView.vue b/apps/web/src/views/HomeView.vue
index 032991b..2e36866 100644
--- a/apps/web/src/views/HomeView.vue
+++ b/apps/web/src/views/HomeView.vue
@@ -16,7 +16,7 @@ const activeTab = ref<'stamp' | 'verify'>('stamp')
 const showWorkflow = ref(false)
 
 onMounted(() => {
-  store.checkCalendars()
+  store.checkChains()
 })
 
 async function handleStampFromDigest(digest: FileDigestResult) {
@@ -66,23 +66,23 @@ function handleResetWorkflow() {
           </div>
         </div>
 
-        <!-- Calendar status -->
+        <!-- Ethereum chain status -->
         <div class="flex items-center gap-4">
           <div class="flex items-center gap-2">
             <span
-              v-for="cal in store.calendars"
-              :key="cal.url"
+              v-for="chain in store.ethChains"
+              :key="chain.chainId"
               class="group relative h-2 w-2 cursor-help rounded-full"
               :class="{
-                'bg-valid animate-glow-pulse': cal.status === 'online',
-                'bg-invalid': cal.status === 'offline',
-                'bg-pending animate-glow-pulse': cal.status === 'checking',
+                'bg-valid animate-glow-pulse': chain.status === 'online',
+                'bg-invalid': chain.status === 'offline',
+                'bg-pending animate-glow-pulse': chain.status === 'checking',
               }"
-              :title="`${cal.url} — ${cal.status}${cal.latency ? ` (${cal.latency}ms)` : ''}`"
+              :title="`${chain.name} (${chain.chainId}) — ${chain.status}${chain.latency ? ` (${chain.latency}ms)` : ''}`"
             />
           </div>
           <span class="font-mono text-[10px] text-white/30">
-            {{ store.onlineCount }}/{{ store.calendars.length }} nodes
+            {{ store.onlineCount }}/{{ store.ethChains.length }} chains
           </span>
         </div>
       </div>
@@ -96,7 +96,7 @@ function handleResetWorkflow() {
           Decentralized <span class="text-neon-cyan glow-text-cyan">Timestamping</span>
         </h2>
         <p class="mt-2 font-mono text-sm text-white/40">
-          Cryptographic proof of existence anchored to Bitcoin &amp; Ethereum
+          Cryptographic proof of existence anchored to Ethereum
         </p>
       </div>
 

From 5cb02a692d79e0d9012fdcb4f185f8dbd2469b22 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Feb 2026 06:00:18 +0000
Subject: [PATCH 07/21] feat: calendar config, real stamping progress, .ots
 download, upgrade polling

SDK changes:
- Add StampEvent/StampEventCallback types for real-time stamp progress
- SDK.stamp() now accepts optional onEvent callback, fires events for
  each phase: generating-nonce, building-merkle-tree, broadcasting,
  calendar-response (per calendar), building-proof, complete

Web app changes:
- Add calendar URL configuration panel (settings gear in header)
  with add/remove/reset-to-defaults, persisted to localStorage
- useTimestampSDK wires SDK callbacks to drive real pipeline phases
- Download .ots file automatically on stamp completion via Encoder
- Poll sdk.upgrade() every 15s after stamping for attestation upgrade
- StampingWorkflow shows real phases including broadcast progress,
  building-proof, upgrading, and upgraded states
- Pass fileName through stamp flow for meaningful .ots download names

Co-authored-by: lightsing <15951701+lightsing@users.noreply.github.com>
---
 .../src/components/stamp/StampingWorkflow.vue |  31 +++--
 apps/web/src/composables/useTimestampSDK.ts   | 128 +++++++++++++++---
 apps/web/src/stores/app.ts                    |  36 ++++-
 apps/web/src/views/HomeView.vue               |  89 +++++++++++-
 packages/sdk/src/index.ts                     |   2 +-
 packages/sdk/src/sdk.ts                       |  40 +++++-
 6 files changed, 289 insertions(+), 37 deletions(-)

diff --git a/apps/web/src/components/stamp/StampingWorkflow.vue b/apps/web/src/components/stamp/StampingWorkflow.vue
index 9318c2c..6ff4ccd 100644
--- a/apps/web/src/components/stamp/StampingWorkflow.vue
+++ b/apps/web/src/components/stamp/StampingWorkflow.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import {
-  Hash,
   KeyRound,
   GitBranch,
   Radio,
-  Clock,
+  Blocks,
   CheckCircle2,
   AlertCircle,
+  RefreshCw,
+  ShieldCheck,
 } from 'lucide-vue-next'
 import type { StampPhase } from '@/composables/useTimestampSDK'
 import GlassCard from '@/components/base/GlassCard.vue'
@@ -15,32 +16,35 @@ import GlassCard from '@/components/base/GlassCard.vue'
 const props = defineProps<{
   phase: StampPhase
   error?: string | null
+  broadcastProgress?: string
 }>()
 
 interface WorkflowStep {
   id: StampPhase
   label: string
   description: string
-  icon: typeof Hash
+  icon: typeof KeyRound
 }
 
 const steps: WorkflowStep[] = [
-  { id: 'hashing', label: 'Hashing', description: 'Computing digest of input data', icon: Hash },
   { id: 'generating-nonce', label: 'Generating Nonce', description: 'Creating random nonce for privacy', icon: KeyRound },
   { id: 'building-merkle-tree', label: 'Building Merkle Tree', description: 'Constructing proof tree from leaves', icon: GitBranch },
   { id: 'broadcasting', label: 'Broadcasting', description: 'Submitting to calendar nodes', icon: Radio },
-  { id: 'waiting-attestation', label: 'Awaiting Attestation', description: 'Waiting for on-chain confirmation', icon: Clock },
-  { id: 'complete', label: 'Complete', description: 'Timestamp recorded', icon: CheckCircle2 },
+  { id: 'building-proof', label: 'Building Proof', description: 'Constructing Merkle proof paths', icon: Blocks },
+  { id: 'complete', label: 'Complete', description: 'Timestamp recorded & downloaded', icon: CheckCircle2 },
+  { id: 'upgrading', label: 'Polling for Upgrade', description: 'Waiting for on-chain attestation...', icon: RefreshCw },
+  { id: 'upgraded', label: 'Upgraded', description: 'Attestation confirmed on-chain', icon: ShieldCheck },
 ]
 
 const phaseOrder: StampPhase[] = [
   'idle',
-  'hashing',
   'generating-nonce',
   'building-merkle-tree',
   'broadcasting',
-  'waiting-attestation',
+  'building-proof',
   'complete',
+  'upgrading',
+  'upgraded',
 ]
 
 const currentIndex = computed(() => phaseOrder.indexOf(props.phase))
@@ -52,6 +56,13 @@ function getStepStatus(stepId: StampPhase) {
   if (stepIndex === currentIndex.value) return 'active'
   return 'pending'
 }
+
+function getStepDescription(step: WorkflowStep): string {
+  if (step.id === 'broadcasting' && props.broadcastProgress && getStepStatus(step.id) === 'active') {
+    return `Calendar responses: ${props.broadcastProgress}`
+  }
+  return step.description
+}
 </script>
 
 <template>
@@ -88,7 +99,7 @@ function getStepStatus(stepId: StampPhase) {
               :is="step.icon"
               v-else
               class="h-3.5 w-3.5"
-              :class="{ 'animate-spin': getStepStatus(step.id) === 'active' && step.id === 'hashing' }"
+              :class="{ 'animate-spin': getStepStatus(step.id) === 'active' && (step.id === 'upgrading') }"
             />
           </div>
           <!-- Connecting line -->
@@ -116,7 +127,7 @@ function getStepStatus(stepId: StampPhase) {
           >
             {{ step.label }}
           </div>
-          <div class="font-mono text-[11px] text-white/30">{{ step.description }}</div>
+          <div class="font-mono text-[11px] text-white/30">{{ getStepDescription(step) }}</div>
         </div>
 
         <!-- Active indicator -->
diff --git a/apps/web/src/composables/useTimestampSDK.ts b/apps/web/src/composables/useTimestampSDK.ts
index bcb3799..09bd5db 100644
--- a/apps/web/src/composables/useTimestampSDK.ts
+++ b/apps/web/src/composables/useTimestampSDK.ts
@@ -2,23 +2,28 @@ import { ref, shallowRef } from 'vue'
 import {
   SDK,
   VerifyStatus,
+  UpgradeStatus,
   Decoder,
+  Encoder,
 } from '@uts/sdk'
 import type {
   DetachedTimestamp,
   AttestationStatus,
   UpgradeResult,
   DigestHeader,
+  StampEventCallback,
 } from '@uts/sdk'
 
 export type StampPhase =
   | 'idle'
-  | 'hashing'
   | 'generating-nonce'
   | 'building-merkle-tree'
   | 'broadcasting'
   | 'waiting-attestation'
+  | 'building-proof'
   | 'complete'
+  | 'upgrading'
+  | 'upgraded'
   | 'error'
 
 let _sdkInstance: SDK | null = null
@@ -30,37 +35,84 @@ export function getSDK(): SDK {
   return _sdkInstance
 }
 
+export function resetSDK(calendars?: URL[]) {
+  _sdkInstance = new SDK({ timeout: 15000, calendars })
+}
+
+function downloadOtsFile(stamp: DetachedTimestamp, fileName?: string) {
+  const encoded = Encoder.encodeDetachedTimestamp(stamp)
+  const blob = new Blob([encoded as BlobPart], { type: 'application/octet-stream' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = fileName ? `${fileName}.ots` : 'timestamp.ots'
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+
 export function useTimestampSDK() {
   const sdk = getSDK()
 
   const stampPhase = ref<StampPhase>('idle')
   const stampError = ref<string | null>(null)
   const stampResult = shallowRef<DetachedTimestamp[] | null>(null)
+  const broadcastProgress = ref('')
+  const upgradeResults = shallowRef<UpgradeResult[] | null>(null)
 
   const verifyStatus = ref<VerifyStatus | null>(null)
   const verifyAttestations = shallowRef<AttestationStatus[]>([])
   const isVerifying = ref(false)
   const verifyError = ref<string | null>(null)
 
-  async function stamp(digests: DigestHeader[]): Promise<DetachedTimestamp[]> {
-    stampPhase.value = 'hashing'
+  let upgradeTimer: ReturnType<typeof setInterval> | null = null
+
+  async function stamp(digests: DigestHeader[], fileName?: string): Promise<DetachedTimestamp[]> {
+    stampPhase.value = 'generating-nonce'
     stampError.value = null
     stampResult.value = null
+    broadcastProgress.value = ''
+    upgradeResults.value = null
+
+    const onEvent: StampEventCallback = (event) => {
+      switch (event.phase) {
+        case 'generating-nonce':
+          stampPhase.value = 'generating-nonce'
+          break
+        case 'building-merkle-tree':
+          stampPhase.value = 'building-merkle-tree'
+          break
+        case 'broadcasting':
+          stampPhase.value = 'broadcasting'
+          broadcastProgress.value = `0/${event.totalCalendars}`
+          break
+        case 'calendar-response':
+          broadcastProgress.value = `${event.responsesReceived}/${event.totalCalendars}${event.success ? '' : ' (failed: ' + event.calendarUrl + ')'}`
+          break
+        case 'building-proof':
+          stampPhase.value = 'building-proof'
+          break
+        case 'complete':
+          stampPhase.value = 'complete'
+          break
+      }
+    }
 
     try {
-      await delay(400)
-      stampPhase.value = 'generating-nonce'
-      await delay(300)
-      stampPhase.value = 'building-merkle-tree'
-      await delay(300)
-      stampPhase.value = 'broadcasting'
-
-      const results = await sdk.stamp(digests)
+      const results = await sdk.stamp(digests, onEvent)
 
-      stampPhase.value = 'waiting-attestation'
-      await delay(500)
       stampPhase.value = 'complete'
       stampResult.value = results
+
+      // Download the stamped .ots file
+      for (const result of results) {
+        downloadOtsFile(result, fileName)
+      }
+
+      // Start polling for upgrade
+      startUpgradePolling(results)
+
       return results
     } catch (e) {
       stampPhase.value = 'error'
@@ -69,6 +121,47 @@ export function useTimestampSDK() {
     }
   }
 
+  function startUpgradePolling(stamps: DetachedTimestamp[]) {
+    stopUpgradePolling()
+    stampPhase.value = 'upgrading'
+
+    let attempts = 0
+    const maxAttempts = 40 // ~10 minutes at 15s intervals
+
+    upgradeTimer = setInterval(async () => {
+      attempts++
+      try {
+        const allResults: UpgradeResult[] = []
+        for (const s of stamps) {
+          const results = await sdk.upgrade(s)
+          allResults.push(...results)
+        }
+        upgradeResults.value = allResults
+
+        const hasUpgraded = allResults.some((r) => r.status === UpgradeStatus.Upgraded)
+        if (hasUpgraded) {
+          stampPhase.value = 'upgraded'
+          // Download upgraded file
+          for (const s of stamps) {
+            downloadOtsFile(s)
+          }
+          stopUpgradePolling()
+        } else if (attempts >= maxAttempts) {
+          stopUpgradePolling()
+        }
+      } catch {
+        // Silently retry on next interval
+      }
+    }, 15000)
+  }
+
+  function stopUpgradePolling() {
+    if (upgradeTimer) {
+      clearInterval(upgradeTimer)
+      upgradeTimer = null
+    }
+  }
+
   async function verify(
     stamp: DetachedTimestamp,
   ): Promise<{ status: VerifyStatus; attestations: AttestationStatus[] }> {
@@ -107,6 +200,9 @@ export function useTimestampSDK() {
     stampPhase.value = 'idle'
     stampError.value = null
     stampResult.value = null
+    broadcastProgress.value = ''
+    upgradeResults.value = null
+    stopUpgradePolling()
   }
 
   function resetVerify() {
@@ -120,6 +216,8 @@ export function useTimestampSDK() {
     stampPhase,
     stampError,
     stampResult,
+    broadcastProgress,
+    upgradeResults,
     stamp,
     resetStamp,
 
@@ -133,7 +231,3 @@ export function useTimestampSDK() {
     resetVerify,
   }
 }
-
-function delay(ms: number): Promise<void> {
-  return new Promise((resolve) => setTimeout(resolve, ms))
-}
diff --git a/apps/web/src/stores/app.ts b/apps/web/src/stores/app.ts
index 3950eab..5989e47 100644
--- a/apps/web/src/stores/app.ts
+++ b/apps/web/src/stores/app.ts
@@ -1,7 +1,8 @@
 import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
+import { DEFAULT_CALENDARS } from '@uts/sdk'
 import type { DetachedTimestamp } from '@uts/sdk'
-import { getSDK } from '@/composables/useTimestampSDK'
+import { getSDK, resetSDK } from '@/composables/useTimestampSDK'
 
 const CHAIN_NAMES: Record<number, string> = {
   1: 'Ethereum',
@@ -18,7 +19,22 @@ export interface EthChainNode {
   latency?: number
 }
 
+const STORAGE_KEY = 'uts-calendars'
+
+function loadCalendars(): string[] {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored) return JSON.parse(stored)
+  } catch { /* ignore */ }
+  return DEFAULT_CALENDARS.map((u) => u.toString())
+}
+
+function saveCalendars(urls: string[]) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(urls))
+}
+
 export const useAppStore = defineStore('app', () => {
+  const calendarUrls = ref<string[]>(loadCalendars())
   const ethChains = ref<EthChainNode[]>([])
   const recentStamps = ref<DetachedTimestamp[]>([])
 
@@ -26,6 +42,11 @@ export const useAppStore = defineStore('app', () => {
     () => ethChains.value.filter((c) => c.status === 'online').length,
   )
 
+  watch(calendarUrls, (urls) => {
+    saveCalendars(urls)
+    resetSDK(urls.map((u) => new URL(u)))
+  }, { deep: true })
+
   async function checkChains() {
     const sdk = getSDK()
     const chainIds = Object.keys(sdk.ethRPCs).map(Number)
@@ -61,11 +82,22 @@ export const useAppStore = defineStore('app', () => {
     }
   }
 
+  function setCalendars(urls: string[]) {
+    calendarUrls.value = urls
+  }
+
+  function resetCalendars() {
+    calendarUrls.value = DEFAULT_CALENDARS.map((u) => u.toString())
+  }
+
   return {
+    calendarUrls,
     ethChains,
     recentStamps,
     onlineCount,
     checkChains,
     addStamp,
+    setCalendars,
+    resetCalendars,
   }
 })
diff --git a/apps/web/src/views/HomeView.vue b/apps/web/src/views/HomeView.vue
index 2e36866..7e1a044 100644
--- a/apps/web/src/views/HomeView.vue
+++ b/apps/web/src/views/HomeView.vue
@@ -1,19 +1,23 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { Zap, Shield } from 'lucide-vue-next'
+import { Zap, Shield, Settings, Plus, Trash2, RotateCcw } from 'lucide-vue-next'
 import HeroTerminal from '@/components/terminal/HeroTerminal.vue'
 import StampingWorkflow from '@/components/stamp/StampingWorkflow.vue'
 import VerificationResult from '@/components/verify/VerificationResult.vue'
 import LiveFeed from '@/components/feed/LiveFeed.vue'
+import GlassCard from '@/components/base/GlassCard.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 import { useTimestampSDK } from '@/composables/useTimestampSDK'
 import type { FileDigestResult } from '@/composables/useFileDigest'
 import { useAppStore } from '@/stores/app'
 
 const store = useAppStore()
-const { stampPhase, stampError, stamp, resetStamp } = useTimestampSDK()
+const { stampPhase, stampError, broadcastProgress, stamp, resetStamp } = useTimestampSDK()
 
 const activeTab = ref<'stamp' | 'verify'>('stamp')
 const showWorkflow = ref(false)
+const showSettings = ref(false)
+const newCalendarUrl = ref('')
 
 onMounted(() => {
   store.checkChains()
@@ -22,7 +26,7 @@ onMounted(() => {
 async function handleStampFromDigest(digest: FileDigestResult) {
   showWorkflow.value = true
   try {
-    const results = await stamp([digest.header])
+    const results = await stamp([digest.header], digest.fileName)
     for (const r of results) store.addStamp(r)
   } catch {
     // error is tracked in stampError
@@ -47,6 +51,26 @@ function handleResetWorkflow() {
   resetStamp()
   showWorkflow.value = false
 }
+
+function addCalendar() {
+  const url = newCalendarUrl.value.trim()
+  if (!url) return
+  try {
+    new URL(url)
+    if (!store.calendarUrls.includes(url)) {
+      store.setCalendars([...store.calendarUrls, url])
+    }
+    newCalendarUrl.value = ''
+  } catch {
+    // invalid URL, ignore
+  }
+}
+
+function removeCalendar(index: number) {
+  const urls = [...store.calendarUrls]
+  urls.splice(index, 1)
+  store.setCalendars(urls)
+}
 </script>
 
 <template>
@@ -66,8 +90,8 @@ function handleResetWorkflow() {
           </div>
         </div>
 
-        <!-- Ethereum chain status -->
         <div class="flex items-center gap-4">
+          <!-- Ethereum chain status -->
           <div class="flex items-center gap-2">
             <span
               v-for="chain in store.ethChains"
@@ -84,10 +108,66 @@ function handleResetWorkflow() {
           <span class="font-mono text-[10px] text-white/30">
             {{ store.onlineCount }}/{{ store.ethChains.length }} chains
           </span>
+          <!-- Settings button -->
+          <button
+            class="rounded-lg p-1.5 text-white/40 transition hover:bg-white/5 hover:text-white/60"
+            :class="{ 'bg-neon-cyan/10 text-neon-cyan': showSettings }"
+            title="Calendar settings"
+            @click="showSettings = !showSettings"
+          >
+            <Settings class="h-4 w-4" />
+          </button>
         </div>
       </div>
     </header>
 
+    <!-- Calendar settings panel -->
+    <Transition name="fade">
+      <div v-if="showSettings" class="border-b border-glass-border bg-midnight/60 backdrop-blur-md">
+        <div class="mx-auto max-w-6xl px-6 py-4">
+          <GlassCard>
+            <div class="mb-3 flex items-center justify-between">
+              <h3 class="font-heading text-sm font-semibold text-white/80">Calendar Nodes</h3>
+              <BaseButton variant="secondary" @click="store.resetCalendars()">
+                <RotateCcw class="h-3 w-3" />
+                Reset to defaults
+              </BaseButton>
+            </div>
+            <div class="space-y-2">
+              <div
+                v-for="(url, i) in store.calendarUrls"
+                :key="i"
+                class="flex items-center gap-2"
+              >
+                <span class="flex-1 truncate rounded border border-glass-border bg-surface px-3 py-1.5 font-mono text-xs text-white/60">
+                  {{ url }}
+                </span>
+                <button
+                  class="rounded p-1 text-white/30 transition hover:bg-invalid/10 hover:text-invalid"
+                  @click="removeCalendar(i)"
+                >
+                  <Trash2 class="h-3.5 w-3.5" />
+                </button>
+              </div>
+              <div class="flex gap-2">
+                <input
+                  v-model="newCalendarUrl"
+                  type="text"
+                  placeholder="https://calendar.example.com/"
+                  class="flex-1 rounded-lg border border-glass-border bg-surface px-3 py-1.5 font-mono text-xs text-white/80 outline-none placeholder:text-white/20 focus:border-neon-cyan/40"
+                  @keyup.enter="addCalendar"
+                />
+                <BaseButton variant="secondary" @click="addCalendar">
+                  <Plus class="h-3 w-3" />
+                  Add
+                </BaseButton>
+              </div>
+            </div>
+          </GlassCard>
+        </div>
+      </div>
+    </Transition>
+
     <!-- Main content -->
     <main class="mx-auto max-w-6xl px-6 py-8">
       <!-- Title -->
@@ -145,6 +225,7 @@ function handleResetWorkflow() {
                   v-if="showWorkflow"
                   :phase="stampPhase"
                   :error="stampError"
+                  :broadcast-progress="broadcastProgress"
                 />
               </Transition>
             </div>
diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts
index bde657b..1a8e0fc 100644
--- a/packages/sdk/src/index.ts
+++ b/packages/sdk/src/index.ts
@@ -29,7 +29,7 @@ export * from './bmt.ts'
 export { default as BitcoinRPC } from './rpc/btc.ts'
 
 export { default as SDK, DEFAULT_CALENDARS, UTS_ABI } from './sdk.ts'
-export type { SDKOptions } from './sdk.ts'
+export type { SDKOptions, StampEvent, StampEventCallback } from './sdk.ts'
 
 export const hexlify = (obj: any): any => {
   if (obj instanceof URL) {
diff --git a/packages/sdk/src/sdk.ts b/packages/sdk/src/sdk.ts
index 679e237..2e5fa91 100644
--- a/packages/sdk/src/sdk.ts
+++ b/packages/sdk/src/sdk.ts
@@ -33,6 +33,16 @@ import { ripemd160, sha1 } from '@noble/hashes/legacy.js'
 import BitcoinRPC from './rpc/btc.ts'
 import { FallbackProvider } from 'ethers'
 
+export type StampEvent =
+  | { phase: 'generating-nonce' }
+  | { phase: 'building-merkle-tree' }
+  | { phase: 'broadcasting'; totalCalendars: number }
+  | { phase: 'calendar-response'; calendarUrl: string; success: boolean; responsesReceived: number; totalCalendars: number }
+  | { phase: 'building-proof' }
+  | { phase: 'complete' }
+
+export type StampEventCallback = (event: StampEvent) => void
+
 export interface SDKOptions {
   calendars?: URL[]
   btcRPC?: BitcoinRPC
@@ -170,10 +180,12 @@ export default class SDK {
    *
    * @param digests The digests to be stamped, each with its associated header information. Input digests can use different hash algorithms, but the internal Merkle tree will be constructed using the SDK's configured hash algorithm (default KECCAK256).
    */
-  async stamp(digests: DigestHeader[]): Promise<DetachedTimestamp[]> {
+  async stamp(digests: DigestHeader[], onEvent?: StampEventCallback): Promise<DetachedTimestamp[]> {
     const nonces: Uint8Array[] = []
     const nonceDigests: Uint8Array[] = []
 
+    onEvent?.({ phase: 'generating-nonce' })
+
     for (const digest of digests) {
       const hasher = this.hasher.create()
       hasher.update(getBytes(digest.digest))
@@ -184,6 +196,8 @@ export default class SDK {
       nonceDigests.push(nonceDigest)
     }
 
+    onEvent?.({ phase: 'building-merkle-tree' })
+
     const internalMerkleTree = UnorderedMerkleTree.new(
       nonceDigests,
       this.hasher,
@@ -191,8 +205,22 @@ export default class SDK {
     const root = internalMerkleTree.root()
     console.debug(`Internal Merkle root: ${hexlify(root)}`)
 
+    onEvent?.({ phase: 'broadcasting', totalCalendars: this.calendars.length })
+
+    let responsesReceived = 0
     const calendarResponses = await Promise.allSettled(
-      this.calendars.map((calendar) => this.requestAttest(calendar, root)),
+      this.calendars.map(async (calendar) => {
+        try {
+          const result = await this.requestAttest(calendar, root)
+          responsesReceived++
+          onEvent?.({ phase: 'calendar-response', calendarUrl: calendar.toString(), success: true, responsesReceived, totalCalendars: this.calendars.length })
+          return result
+        } catch (error) {
+          responsesReceived++
+          onEvent?.({ phase: 'calendar-response', calendarUrl: calendar.toString(), success: false, responsesReceived, totalCalendars: this.calendars.length })
+          throw error
+        }
+      }),
     )
 
     const successfulResponses = calendarResponses.filter(
@@ -214,7 +242,9 @@ export default class SDK {
             } as ForkStep,
           ]
 
-    return digests.map((digest, i) => {
+    onEvent?.({ phase: 'building-proof' })
+
+    const results = digests.map((digest, i) => {
       const timestamp: Timestamp = [
         { op: 'APPEND', data: nonces[i] },
         { op: this.hashAlg },
@@ -256,6 +286,10 @@ export default class SDK {
         timestamp,
       }
     })
+
+    onEvent?.({ phase: 'complete' })
+
+    return results
   }
 
   /**

From 7ebe7d111b27c05510d09a2ce26802eb275e5046 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Feb 2026 06:28:13 +0000
Subject: [PATCH 08/21] feat: add web3 wallet provider support for browser
 usage

SDK changes:
- Add web3Provider (Eip1193Provider) field to SDKOptions and SDK class
- Add WELL_KNOWN_CHAINS map for wallet_switchEthereumChain
- Add getWeb3ProviderForChain() helper that tries wallet first, with
  automatic chain switching for well-known networks
- verifyEthereumUTSAttestation now tries web3Provider first (no CORS),
  then falls back to ethRPCs
- Export WELL_KNOWN_CHAINS from SDK index

Web app changes:
- Create useWallet composable: connect/disconnect MetaMask via EIP-1193,
  track address/chainId, listen for account/chain changes
- Add setWeb3Provider() to useTimestampSDK for hot-swapping wallet
- useWebSocketFeed prefers web3Provider for event polling when connected,
  falls back to ethRPCs when no wallet
- Add Connect Wallet button in header (shows address + chain when
  connected, "No Wallet" when no EIP-1193 provider detected)
- Wallet provider synced to SDK via watch on connection state

Co-authored-by: lightsing <15951701+lightsing@users.noreply.github.com>
---
 apps/web/src/components/feed/LiveFeed.vue    |   2 +-
 apps/web/src/composables/useTimestampSDK.ts  |  14 ++-
 apps/web/src/composables/useWallet.ts        | 124 +++++++++++++++++++
 apps/web/src/composables/useWebSocketFeed.ts |  73 ++++++++++-
 apps/web/src/stores/app.ts                   |   2 +-
 apps/web/src/views/HomeView.vue              |  54 +++++++-
 packages/sdk/src/index.ts                    |   2 +-
 packages/sdk/src/sdk.ts                      |  75 +++++++++--
 8 files changed, 324 insertions(+), 22 deletions(-)
 create mode 100644 apps/web/src/composables/useWallet.ts

diff --git a/apps/web/src/components/feed/LiveFeed.vue b/apps/web/src/components/feed/LiveFeed.vue
index 9370f7b..55ee6ed 100644
--- a/apps/web/src/components/feed/LiveFeed.vue
+++ b/apps/web/src/components/feed/LiveFeed.vue
@@ -62,7 +62,7 @@ function truncate(hash: string): string {
         class="py-8 text-center font-mono text-xs text-white/30"
       >
         <Clock class="mx-auto mb-2 h-5 w-5 text-white/20" />
-        Polling Ethereum RPCs for Attested events...
+        Polling for Attested events...
       </div>
       <div
         v-else-if="entries.length === 0"
diff --git a/apps/web/src/composables/useTimestampSDK.ts b/apps/web/src/composables/useTimestampSDK.ts
index 09bd5db..dd72c58 100644
--- a/apps/web/src/composables/useTimestampSDK.ts
+++ b/apps/web/src/composables/useTimestampSDK.ts
@@ -13,6 +13,7 @@ import type {
   DigestHeader,
   StampEventCallback,
 } from '@uts/sdk'
+import type { Eip1193Provider } from 'ethers'
 
 export type StampPhase =
   | 'idle'
@@ -35,8 +36,17 @@ export function getSDK(): SDK {
   return _sdkInstance
 }
 
-export function resetSDK(calendars?: URL[]) {
-  _sdkInstance = new SDK({ timeout: 15000, calendars })
+export function resetSDK(options?: { calendars?: URL[]; web3Provider?: Eip1193Provider | null }) {
+  _sdkInstance = new SDK({
+    timeout: 15000,
+    calendars: options?.calendars,
+    web3Provider: options?.web3Provider,
+  })
+}
+
+export function setWeb3Provider(provider: Eip1193Provider | null) {
+  const sdk = getSDK()
+  sdk.web3Provider = provider
 }
 
 function downloadOtsFile(stamp: DetachedTimestamp, fileName?: string) {
diff --git a/apps/web/src/composables/useWallet.ts b/apps/web/src/composables/useWallet.ts
new file mode 100644
index 0000000..a392fa8
--- /dev/null
+++ b/apps/web/src/composables/useWallet.ts
@@ -0,0 +1,124 @@
+import { ref, computed } from 'vue'
+import { BrowserProvider } from 'ethers'
+import type { Eip1193Provider } from 'ethers'
+import { WELL_KNOWN_CHAINS } from '@uts/sdk'
+
+const walletAddress = ref<string | null>(null)
+const walletChainId = ref<number | null>(null)
+const isConnecting = ref(false)
+const walletError = ref<string | null>(null)
+
+const isConnected = computed(() => walletAddress.value !== null)
+const hasWallet = computed(() => typeof window !== 'undefined' && !!(window as any).ethereum)
+
+const CHAIN_NAMES: Record<number, string> = {
+  1: 'Ethereum',
+  17000: 'Holesky',
+  11155111: 'Sepolia',
+  54352: 'Scroll',
+  54351: 'Scroll Sepolia',
+}
+
+const walletChainName = computed(() => {
+  if (!walletChainId.value) return null
+  return CHAIN_NAMES[walletChainId.value] ?? `Chain ${walletChainId.value}`
+})
+
+function getEip1193Provider(): Eip1193Provider | null {
+  if (typeof window === 'undefined') return null
+  return (window as any).ethereum ?? null
+}
+
+function truncateAddress(address: string): string {
+  return `${address.slice(0, 6)}...${address.slice(-4)}`
+}
+
+export function useWallet() {
+  async function connect() {
+    const ethereum = getEip1193Provider()
+    if (!ethereum) {
+      walletError.value = 'No wallet detected. Install MetaMask or another EIP-1193 wallet.'
+      return
+    }
+
+    isConnecting.value = true
+    walletError.value = null
+
+    try {
+      const provider = new BrowserProvider(ethereum)
+      const accounts = await provider.send('eth_requestAccounts', [])
+      if (accounts.length === 0) {
+        walletError.value = 'No accounts returned from wallet'
+        return
+      }
+      walletAddress.value = accounts[0] ?? null
+
+      const network = await provider.getNetwork()
+      walletChainId.value = Number(network.chainId)
+
+      // Listen for account/chain changes
+      ;(ethereum as any).on?.('accountsChanged', handleAccountsChanged)
+      ;(ethereum as any).on?.('chainChanged', handleChainChanged)
+    } catch (e) {
+      walletError.value = e instanceof Error ? e.message : 'Failed to connect wallet'
+    } finally {
+      isConnecting.value = false
+    }
+  }
+
+  function disconnect() {
+    const ethereum = getEip1193Provider()
+    if (ethereum) {
+    ;(ethereum as any).removeListener?.('accountsChanged', handleAccountsChanged)
+    ;(ethereum as any).removeListener?.('chainChanged', handleChainChanged)
+    }
+    walletAddress.value = null
+    walletChainId.value = null
+    walletError.value = null
+  }
+
+  async function switchChain(chainId: number) {
+    const ethereum = getEip1193Provider()
+    if (!ethereum) return
+
+    const knownChain = WELL_KNOWN_CHAINS[chainId]
+    if (!knownChain) return
+
+    try {
+      await ethereum.request({
+        method: 'wallet_switchEthereumChain',
+        params: [{ chainId: knownChain.chainId }],
+      })
+    } catch {
+      // switch failed
+    }
+  }
+
+  return {
+    walletAddress,
+    walletChainId,
+    walletChainName,
+    isConnected,
+    isConnecting,
+    hasWallet,
+    walletError,
+    connect,
+    disconnect,
+    switchChain,
+    getEip1193Provider,
+    truncateAddress,
+  }
+}
+
+function handleAccountsChanged(accounts: string[]) {
+  if (accounts.length === 0) {
+    walletAddress.value = null
+    walletChainId.value = null
+  } else {
+    walletAddress.value = accounts[0] ?? null
+  }
+}
+
+function handleChainChanged(chainIdHex: string) {
+  walletChainId.value = parseInt(chainIdHex, 16)
+}
diff --git a/apps/web/src/composables/useWebSocketFeed.ts b/apps/web/src/composables/useWebSocketFeed.ts
index b599c2d..bd582de 100644
--- a/apps/web/src/composables/useWebSocketFeed.ts
+++ b/apps/web/src/composables/useWebSocketFeed.ts
@@ -1,4 +1,6 @@
 import { ref, onUnmounted } from 'vue'
+import { BrowserProvider } from 'ethers'
+import type { Eip1193Provider } from 'ethers'
 import { SDK } from '@uts/sdk'
 import { getSDK } from './useTimestampSDK'
 
@@ -27,7 +29,59 @@ export function useWebSocketFeed() {
   let intervalId: ReturnType<typeof setInterval> | null = null
   let lastBlock: Record<number, number> = {}
 
-  async function fetchLatestEvents(sdk: SDK) {
+  async function fetchEventsFromWeb3(web3Provider: Eip1193Provider) {
+    try {
+      const provider = new BrowserProvider(web3Provider)
+      const network = await provider.getNetwork()
+      const chainId = Number(network.chainId)
+
+      const currentBlock = await provider.getBlockNumber()
+      const fromBlock = lastBlock[chainId]
+        ? lastBlock[chainId] + 1
+        : currentBlock - 10
+
+      if (fromBlock > currentBlock) return
+
+      const logs = await provider.getLogs({
+        fromBlock,
+        toBlock: currentBlock,
+        topics: [SDK.utsLogTopic],
+      })
+
+      for (const log of logs) {
+        const parsed = SDK.utsInterface.parseLog(log)
+        if (!parsed) continue
+
+        const root: string = parsed.args[0]
+        const sender: string = parsed.args[1]
+        const ts: bigint = parsed.args[2]
+
+        const entryId = `${chainId}-${log.blockNumber}-${log.index}`
+        if (!entries.value.some((e) => e.id === entryId)) {
+          entries.value.unshift({
+            id: entryId,
+            hash: root,
+            type: 'ethereum',
+            chain: CHAIN_NAMES[chainId] ?? `Chain ${chainId}`,
+            chainId,
+            blockHeight: log.blockNumber,
+            sender,
+            timestamp: Number(ts) * 1000,
+          })
+        }
+      }
+
+      lastBlock[chainId] = currentBlock
+
+      if (entries.value.length > 50) {
+        entries.value.length = 50
+      }
+    } catch (e) {
+      console.warn('Feed: failed to poll web3Provider:', e)
+    }
+  }
+
+  async function fetchEventsFromRPCs(sdk: SDK) {
     const chainIds = Object.keys(sdk.ethRPCs).map(Number)
 
     for (const chainId of chainIds) {
@@ -84,12 +138,21 @@ export function useWebSocketFeed() {
     isConnected.value = true
     lastBlock = {}
 
-    // Initial fetch
-    await fetchLatestEvents(sdk)
+    // Initial fetch: prefer web3Provider
+    if (sdk.web3Provider) {
+      await fetchEventsFromWeb3(sdk.web3Provider)
+    } else {
+      await fetchEventsFromRPCs(sdk)
+    }
 
-    // Poll every 15s
+    // Poll every 15s — prefer web3Provider when available
     intervalId = setInterval(() => {
-      fetchLatestEvents(sdk)
+      const currentSdk = getSDK()
+      if (currentSdk.web3Provider) {
+        fetchEventsFromWeb3(currentSdk.web3Provider)
+      } else {
+        fetchEventsFromRPCs(currentSdk)
+      }
     }, 15000)
   }
 
diff --git a/apps/web/src/stores/app.ts b/apps/web/src/stores/app.ts
index 5989e47..d89fbb1 100644
--- a/apps/web/src/stores/app.ts
+++ b/apps/web/src/stores/app.ts
@@ -44,7 +44,7 @@ export const useAppStore = defineStore('app', () => {
 
   watch(calendarUrls, (urls) => {
     saveCalendars(urls)
-    resetSDK(urls.map((u) => new URL(u)))
+    resetSDK({ calendars: urls.map((u) => new URL(u)) })
   }, { deep: true })
 
   async function checkChains() {
diff --git a/apps/web/src/views/HomeView.vue b/apps/web/src/views/HomeView.vue
index 7e1a044..9158a7e 100644
--- a/apps/web/src/views/HomeView.vue
+++ b/apps/web/src/views/HomeView.vue
@@ -1,18 +1,30 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { Zap, Shield, Settings, Plus, Trash2, RotateCcw } from 'lucide-vue-next'
+import { ref, onMounted, watch } from 'vue'
+import { Zap, Shield, Settings, Plus, Trash2, RotateCcw, Wallet } from 'lucide-vue-next'
 import HeroTerminal from '@/components/terminal/HeroTerminal.vue'
 import StampingWorkflow from '@/components/stamp/StampingWorkflow.vue'
 import VerificationResult from '@/components/verify/VerificationResult.vue'
 import LiveFeed from '@/components/feed/LiveFeed.vue'
 import GlassCard from '@/components/base/GlassCard.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
-import { useTimestampSDK } from '@/composables/useTimestampSDK'
+import { useTimestampSDK, setWeb3Provider } from '@/composables/useTimestampSDK'
+import { useWallet } from '@/composables/useWallet'
 import type { FileDigestResult } from '@/composables/useFileDigest'
 import { useAppStore } from '@/stores/app'
 
 const store = useAppStore()
 const { stampPhase, stampError, broadcastProgress, stamp, resetStamp } = useTimestampSDK()
+const {
+  walletAddress,
+  walletChainName,
+  isConnected: walletConnected,
+  isConnecting: walletConnecting,
+  hasWallet,
+  connect: connectWallet,
+  disconnect: disconnectWallet,
+  getEip1193Provider,
+  truncateAddress,
+} = useWallet()
 
 const activeTab = ref<'stamp' | 'verify'>('stamp')
 const showWorkflow = ref(false)
@@ -23,6 +35,15 @@ onMounted(() => {
   store.checkChains()
 })
 
+// Sync wallet provider to SDK when wallet connects/disconnects
+watch(walletConnected, (connected) => {
+  if (connected) {
+    setWeb3Provider(getEip1193Provider())
+  } else {
+    setWeb3Provider(null)
+  }
+})
+
 async function handleStampFromDigest(digest: FileDigestResult) {
   showWorkflow.value = true
   try {
@@ -71,6 +92,14 @@ function removeCalendar(index: number) {
   urls.splice(index, 1)
   store.setCalendars(urls)
 }
+
+function handleWalletClick() {
+  if (walletConnected.value) {
+    disconnectWallet()
+  } else {
+    connectWallet()
+  }
+}
 </script>
 
 <template>
@@ -108,6 +137,25 @@ function removeCalendar(index: number) {
           <span class="font-mono text-[10px] text-white/30">
             {{ store.onlineCount }}/{{ store.ethChains.length }} chains
           </span>
+          <!-- Connect Wallet button -->
+          <button
+            class="flex items-center gap-2 rounded-lg border px-3 py-1.5 font-mono text-xs transition-all"
+            :class="walletConnected
+              ? 'border-valid/30 bg-valid/5 text-valid hover:bg-valid/10'
+              : 'border-neon-purple/30 bg-neon-purple/5 text-neon-purple hover:bg-neon-purple/10'
+            "
+            :disabled="walletConnecting"
+            @click="handleWalletClick"
+          >
+            <Wallet class="h-3.5 w-3.5" />
+            <span v-if="walletConnecting">Connecting...</span>
+            <span v-else-if="walletConnected && walletAddress">
+              {{ truncateAddress(walletAddress) }}
+              <span v-if="walletChainName" class="text-white/30"> · {{ walletChainName }}</span>
+            </span>
+            <span v-else-if="!hasWallet">No Wallet</span>
+            <span v-else>Connect Wallet</span>
+          </button>
           <!-- Settings button -->
           <button
             class="rounded-lg p-1.5 text-white/40 transition hover:bg-white/5 hover:text-white/60"
diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts
index 1a8e0fc..8ebe0b2 100644
--- a/packages/sdk/src/index.ts
+++ b/packages/sdk/src/index.ts
@@ -28,7 +28,7 @@ export * from './bmt.ts'
 
 export { default as BitcoinRPC } from './rpc/btc.ts'
 
-export { default as SDK, DEFAULT_CALENDARS, UTS_ABI } from './sdk.ts'
+export { default as SDK, DEFAULT_CALENDARS, UTS_ABI, WELL_KNOWN_CHAINS } from './sdk.ts'
 export type { SDKOptions, StampEvent, StampEventCallback } from './sdk.ts'
 
 export const hexlify = (obj: any): any => {
diff --git a/packages/sdk/src/sdk.ts b/packages/sdk/src/sdk.ts
index 2e5fa91..5190416 100644
--- a/packages/sdk/src/sdk.ts
+++ b/packages/sdk/src/sdk.ts
@@ -1,5 +1,7 @@
 import {
   type AbstractProvider,
+  type Eip1193Provider,
+  BrowserProvider,
   getBytes,
   hexlify,
   id,
@@ -47,12 +49,24 @@ export interface SDKOptions {
   calendars?: URL[]
   btcRPC?: BitcoinRPC
   ethRPCs?: Record<number, AbstractProvider>
+  web3Provider?: Eip1193Provider | null
   timeout?: number
   quorum?: number
   nonceSize?: number
   hashAlgorithm?: SecureDigestOp
 }
 
+/**
+ * Well-known EVM chain IDs to hex for wallet_switchEthereumChain.
+ */
+export const WELL_KNOWN_CHAINS: Record<number, { chainId: string; chainName: string }> = {
+  1: { chainId: '0x1', chainName: 'Ethereum Mainnet' },
+  17000: { chainId: '0x4268', chainName: 'Holesky' },
+  11155111: { chainId: '0xaa36a7', chainName: 'Sepolia' },
+  54352: { chainId: '0xd460', chainName: 'Scroll' },
+  54351: { chainId: '0xd45f', chainName: 'Scroll Sepolia' },
+}
+
 export const DEFAULT_CALENDARS = [
   new URL('https://a.pool.opentimestamps.org/'),
   new URL('https://b.pool.opentimestamps.org/'),
@@ -70,6 +84,7 @@ export default class SDK {
   readonly calendars: URL[]
   readonly btcRPC: BitcoinRPC
   readonly ethRPCs: Record<number, AbstractProvider>
+  web3Provider: Eip1193Provider | null = null
 
   /**
    * Maximum time to wait for calendar responses in milliseconds.
@@ -125,6 +140,7 @@ export default class SDK {
         54352: new JsonRpcProvider('https://rpc.scroll.io'),
         54351: new JsonRpcProvider('https://sepolia-rpc.scroll.io'),
       },
+      web3Provider = null,
       timeout = 10000,
       nonceSize = 32,
       hashAlgorithm = 'KECCAK256',
@@ -134,6 +150,7 @@ export default class SDK {
     this.calendars = calendars
     this.btcRPC = btcRPC
     this.ethRPCs = ethRPCs
+    this.web3Provider = web3Provider
 
     this.timeout = timeout
     this.nonceSize = nonceSize
@@ -175,6 +192,40 @@ export default class SDK {
     return null
   }
 
+  /**
+   * Try to get a provider for the given chain from the web3 wallet.
+   * If the wallet is on a different chain, attempts to switch to the target chain if it's well-known.
+   * Returns null if no web3Provider or if switching fails.
+   */
+  async getWeb3ProviderForChain(chainId: number): Promise<AbstractProvider | null> {
+    if (!this.web3Provider) return null
+
+    try {
+      const browser = new BrowserProvider(this.web3Provider)
+      const network = await browser.getNetwork()
+      if (Number(network.chainId) === chainId) {
+        return browser
+      }
+
+      // Try switching to the target chain if it's well-known
+      const knownChain = WELL_KNOWN_CHAINS[chainId]
+      if (knownChain) {
+        try {
+          await this.web3Provider.request({
+            method: 'wallet_switchEthereumChain',
+            params: [{ chainId: knownChain.chainId }],
+          })
+          return new BrowserProvider(this.web3Provider)
+        } catch {
+          // Switch failed, fall through
+        }
+      }
+    } catch {
+      // web3Provider not usable
+    }
+    return null
+  }
+
   /**
    * Stamp the provided digests by submitting them to the configured calendars.
    *
@@ -599,17 +650,23 @@ export default class SDK {
     input: Uint8Array,
     attestation: EthereumUTSAttestation,
   ): Promise<AttestationStatus> {
-    if (!Object.hasOwn(this.ethRPCs, attestation.chain)) {
-      return {
-        attestation,
-        status: AttestationStatusKind.UNKNOWN,
-        error: new VerifyError(
-          ErrorCode.UNSUPPORTED_ATTESTATION,
-          `No RPC provider configured for Ethereum chain ${attestation.chain}`,
-        ),
+    // Try web3Provider first (works in browser without CORS issues)
+    let provider: AbstractProvider | null = await this.getWeb3ProviderForChain(attestation.chain)
+
+    // Fallback to ethRPCs
+    if (!provider) {
+      if (!Object.hasOwn(this.ethRPCs, attestation.chain)) {
+        return {
+          attestation,
+          status: AttestationStatusKind.UNKNOWN,
+          error: new VerifyError(
+            ErrorCode.UNSUPPORTED_ATTESTATION,
+            `No RPC provider configured for Ethereum chain ${attestation.chain}`,
+          ),
+        }
       }
+      provider = this.ethRPCs[attestation.chain]!
     }
-    const provider = this.ethRPCs[attestation.chain]!
 
     try {
       const logs = await provider.getLogs({

From 609a84e7bc2380eb9d253741dda02819fba5a547 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Feb 2026 06:55:59 +0000
Subject: [PATCH 09/21] feat: manual .ots download, keepPending setting,
 attestation details, tab persistence, deduped feed

SDK changes:
- upgrade() accepts keepPending param (default false): when false, replaces
  pending attestation with upgraded one; when true, preserves both in a FORK

Web app changes:
- Don't auto-download pending timestamp; show "Download .ots" button in
  StampingWorkflow when stamping completes
- Upgraded .ots uses original upload filename (e.g. document.pdf.ots)
- Add keepPending toggle in settings panel, persisted to localStorage
- Create AttestationDetail.vue: collapsible attestation info with etherscan
  links for blocks, addresses, tx hashes across all supported chains
- VerificationResult uses AttestationDetail for each attestation
- LiveFeed entries are clickable/collapsible with chain/block/sender details
  and etherscan links
- Tabs use v-show instead of v-if to preserve content when switching
- Active tab persisted to localStorage
- Feed polls both web3Provider AND ethRPCs simultaneously, skipping chains
  already covered by wallet; deduplicates entries by id (chainId-block-index)

Co-authored-by: lightsing <15951701+lightsing@users.noreply.github.com>
---
 apps/web/src/components/feed/LiveFeed.vue     | 113 +++++++--
 .../src/components/stamp/StampingWorkflow.vue |  22 +-
 .../components/verify/AttestationDetail.vue   | 233 ++++++++++++++++++
 .../components/verify/VerificationResult.vue  |  28 +--
 apps/web/src/composables/useTimestampSDK.ts   |  30 ++-
 apps/web/src/composables/useWebSocketFeed.ts  | 120 ++++-----
 apps/web/src/stores/app.ts                    |  19 ++
 apps/web/src/views/HomeView.vue               |  70 +++---
 packages/sdk/src/sdk.ts                       |  21 +-
 9 files changed, 515 insertions(+), 141 deletions(-)
 create mode 100644 apps/web/src/components/verify/AttestationDetail.vue

diff --git a/apps/web/src/components/feed/LiveFeed.vue b/apps/web/src/components/feed/LiveFeed.vue
index 55ee6ed..e43613c 100644
--- a/apps/web/src/components/feed/LiveFeed.vue
+++ b/apps/web/src/components/feed/LiveFeed.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { formatDistanceToNow } from 'date-fns'
-import { Activity, Globe, Clock } from 'lucide-vue-next'
+import { Activity, Globe, Clock, ChevronDown, ChevronUp, ExternalLink } from 'lucide-vue-next'
 import GlassCard from '@/components/base/GlassCard.vue'
 import { useWebSocketFeed } from '@/composables/useWebSocketFeed'
 
 const { entries, isConnected, connect } = useWebSocketFeed()
 
+const expandedEntries = ref<Set<string>>(new Set())
+
 onMounted(() => {
   connect()
 })
@@ -14,6 +16,34 @@ onMounted(() => {
 function truncate(hash: string): string {
   return `${hash.slice(0, 10)}...${hash.slice(-8)}`
 }
+
+function toggleEntry(id: string) {
+  if (expandedEntries.value.has(id)) {
+    expandedEntries.value.delete(id)
+  } else {
+    expandedEntries.value.add(id)
+  }
+}
+
+const ETHERSCAN_URLS: Record<number, string> = {
+  1: 'https://etherscan.io',
+  17000: 'https://holesky.etherscan.io',
+  11155111: 'https://sepolia.etherscan.io',
+  54352: 'https://scrollscan.com',
+  54351: 'https://sepolia.scrollscan.com',
+}
+
+function getBlockUrl(chainId: number, height: number): string | null {
+  const base = ETHERSCAN_URLS[chainId]
+  if (!base) return null
+  return `${base}/block/${height}`
+}
+
+function getAddressUrl(chainId: number, address: string): string | null {
+  const base = ETHERSCAN_URLS[chainId]
+  if (!base) return null
+  return `${base}/address/${address}`
+}
 </script>
 
 <template>
@@ -39,21 +69,76 @@ function truncate(hash: string): string {
         <div
           v-for="entry in entries"
           :key="entry.id"
-          class="flex items-center gap-3 rounded-lg px-3 py-2 transition-colors hover:bg-white/5"
+          class="rounded-lg transition-colors hover:bg-white/5"
         >
-          <Globe class="h-4 w-4 shrink-0 text-neon-purple" />
-          <div class="min-w-0 flex-1">
-            <div class="font-mono text-xs text-neon-purple">
-              {{ truncate(entry.hash) }}
+          <!-- Entry header -->
+          <button
+            class="flex w-full items-center gap-3 px-3 py-2 text-left"
+            @click="toggleEntry(entry.id)"
+          >
+            <Globe class="h-4 w-4 shrink-0 text-neon-purple" />
+            <div class="min-w-0 flex-1">
+              <div class="font-mono text-xs text-neon-purple">
+                {{ truncate(entry.hash) }}
+              </div>
+              <div class="flex items-center gap-2 font-mono text-[10px] text-white/30">
+                <span>{{ entry.chain }}</span>
+                <span>#{{ entry.blockHeight }}</span>
+              </div>
             </div>
-            <div class="flex items-center gap-2 font-mono text-[10px] text-white/30">
-              <span>{{ entry.chain }}</span>
-              <span>#{{ entry.blockHeight }}</span>
+            <div class="flex shrink-0 items-center gap-1">
+              <span class="font-mono text-[10px] text-white/20">
+                {{ formatDistanceToNow(entry.timestamp, { addSuffix: true }) }}
+              </span>
+              <component :is="expandedEntries.has(entry.id) ? ChevronUp : ChevronDown" class="h-3 w-3 text-white/20" />
+            </div>
+          </button>
+
+          <!-- Expanded details -->
+          <Transition name="fade">
+            <div v-if="expandedEntries.has(entry.id)" class="border-t border-glass-border/50 px-3 pb-2 pt-1.5">
+              <div class="space-y-1 font-mono text-[10px]">
+                <div class="flex items-center justify-between">
+                  <span class="text-white/30">Root</span>
+                  <span class="text-white/50">{{ truncate(entry.hash) }}</span>
+                </div>
+                <div class="flex items-center justify-between">
+                  <span class="text-white/30">Chain</span>
+                  <span class="text-white/50">{{ entry.chain }} ({{ entry.chainId }})</span>
+                </div>
+                <div class="flex items-center justify-between">
+                  <span class="text-white/30">Block</span>
+                  <span class="flex items-center gap-1">
+                    <span class="text-white/50">{{ entry.blockHeight }}</span>
+                    <a
+                      v-if="getBlockUrl(entry.chainId, entry.blockHeight)"
+                      :href="getBlockUrl(entry.chainId, entry.blockHeight)!"
+                      target="_blank"
+                      rel="noopener"
+                      class="text-neon-cyan hover:text-neon-cyan/80"
+                    >
+                      <ExternalLink class="h-2.5 w-2.5" />
+                    </a>
+                  </span>
+                </div>
+                <div v-if="entry.sender" class="flex items-center justify-between">
+                  <span class="text-white/30">Sender</span>
+                  <span class="flex items-center gap-1">
+                    <span class="text-white/50">{{ truncate(entry.sender) }}</span>
+                    <a
+                      v-if="getAddressUrl(entry.chainId, entry.sender)"
+                      :href="getAddressUrl(entry.chainId, entry.sender)!"
+                      target="_blank"
+                      rel="noopener"
+                      class="text-neon-cyan hover:text-neon-cyan/80"
+                    >
+                      <ExternalLink class="h-2.5 w-2.5" />
+                    </a>
+                  </span>
+                </div>
+              </div>
             </div>
-          </div>
-          <div class="shrink-0 font-mono text-[10px] text-white/20">
-            {{ formatDistanceToNow(entry.timestamp, { addSuffix: true }) }}
-          </div>
+          </Transition>
         </div>
       </TransitionGroup>
 
diff --git a/apps/web/src/components/stamp/StampingWorkflow.vue b/apps/web/src/components/stamp/StampingWorkflow.vue
index 6ff4ccd..a5387d1 100644
--- a/apps/web/src/components/stamp/StampingWorkflow.vue
+++ b/apps/web/src/components/stamp/StampingWorkflow.vue
@@ -9,9 +9,11 @@ import {
   AlertCircle,
   RefreshCw,
   ShieldCheck,
+  Download,
 } from 'lucide-vue-next'
 import type { StampPhase } from '@/composables/useTimestampSDK'
 import GlassCard from '@/components/base/GlassCard.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 
 const props = defineProps<{
   phase: StampPhase
@@ -19,6 +21,10 @@ const props = defineProps<{
   broadcastProgress?: string
 }>()
 
+const emit = defineEmits<{
+  download: []
+}>()
+
 interface WorkflowStep {
   id: StampPhase
   label: string
@@ -31,7 +37,7 @@ const steps: WorkflowStep[] = [
   { id: 'building-merkle-tree', label: 'Building Merkle Tree', description: 'Constructing proof tree from leaves', icon: GitBranch },
   { id: 'broadcasting', label: 'Broadcasting', description: 'Submitting to calendar nodes', icon: Radio },
   { id: 'building-proof', label: 'Building Proof', description: 'Constructing Merkle proof paths', icon: Blocks },
-  { id: 'complete', label: 'Complete', description: 'Timestamp recorded & downloaded', icon: CheckCircle2 },
+  { id: 'complete', label: 'Complete', description: 'Timestamp recorded (pending attestation)', icon: CheckCircle2 },
   { id: 'upgrading', label: 'Polling for Upgrade', description: 'Waiting for on-chain attestation...', icon: RefreshCw },
   { id: 'upgraded', label: 'Upgraded', description: 'Attestation confirmed on-chain', icon: ShieldCheck },
 ]
@@ -49,6 +55,12 @@ const phaseOrder: StampPhase[] = [
 
 const currentIndex = computed(() => phaseOrder.indexOf(props.phase))
 
+const showDownloadButton = computed(() => {
+  const ci = currentIndex.value
+  const completeIndex = phaseOrder.indexOf('complete')
+  return ci >= completeIndex && props.phase !== 'error'
+})
+
 function getStepStatus(stepId: StampPhase) {
   if (props.phase === 'error') return 'error'
   const stepIndex = phaseOrder.indexOf(stepId)
@@ -138,6 +150,14 @@ function getStepDescription(step: WorkflowStep): string {
       </div>
     </div>
 
+    <!-- Download button (shown when complete or later) -->
+    <div v-if="showDownloadButton" class="mt-4">
+      <BaseButton variant="secondary" @click="emit('download')">
+        <Download class="h-3.5 w-3.5" />
+        Download .ots
+      </BaseButton>
+    </div>
+
     <!-- Error message -->
     <div
       v-if="phase === 'error' && error"
diff --git a/apps/web/src/components/verify/AttestationDetail.vue b/apps/web/src/components/verify/AttestationDetail.vue
new file mode 100644
index 0000000..b51836a
--- /dev/null
+++ b/apps/web/src/components/verify/AttestationDetail.vue
@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ChevronDown, ChevronUp, ExternalLink } from 'lucide-vue-next'
+import StatusBadge from '@/components/base/StatusBadge.vue'
+import type { AttestationStatus } from '@uts/sdk'
+import { WELL_KNOWN_CHAINS } from '@uts/sdk'
+import { hexlify } from 'ethers/utils'
+
+const props = defineProps<{
+  attestation: AttestationStatus
+  defaultExpanded?: boolean
+}>()
+
+const expanded = ref(props.defaultExpanded ?? false)
+
+const ETHERSCAN_URLS: Record<number, string> = {
+  1: 'https://etherscan.io',
+  17000: 'https://holesky.etherscan.io',
+  11155111: 'https://sepolia.etherscan.io',
+  54352: 'https://scrollscan.com',
+  54351: 'https://sepolia.scrollscan.com',
+}
+
+const CHAIN_NAMES: Record<number, string> = {
+  1: 'Ethereum',
+  17000: 'Holesky',
+  11155111: 'Sepolia',
+  54352: 'Scroll',
+  54351: 'Scroll Sepolia',
+}
+
+function statusLabel(status: string): 'valid' | 'invalid' | 'pending' | 'unknown' {
+  switch (status) {
+    case 'VALID': return 'valid'
+    case 'PENDING': return 'pending'
+    case 'INVALID': return 'invalid'
+    default: return 'unknown'
+  }
+}
+
+function getEtherscanBlockUrl(chainId: number, height: number): string | null {
+  const base = ETHERSCAN_URLS[chainId]
+  if (!base) return null
+  return `${base}/block/${height}`
+}
+
+function getEtherscanTxUrl(chainId: number, txHash: string): string | null {
+  const base = ETHERSCAN_URLS[chainId]
+  if (!base) return null
+  return `${base}/tx/${txHash}`
+}
+
+function getEtherscanAddressUrl(chainId: number, address: string): string | null {
+  const base = ETHERSCAN_URLS[chainId]
+  if (!base) return null
+  return `${base}/address/${address}`
+}
+
+function getChainName(chainId: number): string {
+  return CHAIN_NAMES[chainId] ?? WELL_KNOWN_CHAINS[chainId]?.chainName ?? `Chain ${chainId}`
+}
+
+function truncateHex(hex: string): string {
+  if (hex.length <= 18) return hex
+  return `${hex.slice(0, 10)}...${hex.slice(-6)}`
+}
+
+function formatTimestamp(ts: bigint | number): string {
+  const date = new Date(Number(ts) * 1000)
+  return date.toISOString().replace('T', ' ').replace('.000Z', ' UTC')
+}
+</script>
+
+<template>
+  <div class="rounded-lg border border-glass-border bg-surface/40 transition-colors hover:border-white/10">
+    <!-- Header (always visible) -->
+    <button
+      class="flex w-full items-center gap-2 px-3 py-2.5 text-left"
+      @click="expanded = !expanded"
+    >
+      <StatusBadge
+        :status="statusLabel(attestation.status)"
+        size="sm"
+      />
+      <span class="flex-1 font-mono text-xs text-white/60">
+        <template v-if="attestation.attestation.kind === 'bitcoin'">
+          Bitcoin block #{{ attestation.attestation.height }}
+        </template>
+        <template v-else-if="attestation.attestation.kind === 'ethereum-uts'">
+          {{ getChainName(attestation.attestation.chain) }} block #{{ attestation.attestation.height }}
+        </template>
+        <template v-else-if="attestation.attestation.kind === 'pending'">
+          Pending → {{ attestation.attestation.url }}
+        </template>
+        <template v-else>Unknown attestation</template>
+      </span>
+      <component :is="expanded ? ChevronUp : ChevronDown" class="h-3.5 w-3.5 text-white/30" />
+    </button>
+
+    <!-- Expanded details -->
+    <Transition name="fade">
+      <div v-if="expanded" class="border-t border-glass-border px-3 pb-3 pt-2">
+        <!-- Bitcoin attestation details -->
+        <template v-if="attestation.attestation.kind === 'bitcoin'">
+          <div class="space-y-1.5 font-mono text-[11px]">
+            <div class="flex items-center justify-between">
+              <span class="text-white/30">Type</span>
+              <span class="text-pending">Bitcoin</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span class="text-white/30">Block Height</span>
+              <span class="text-white/70">{{ attestation.attestation.height }}</span>
+            </div>
+            <template v-if="attestation.status === 'VALID' && attestation.additionalInfo?.header">
+              <div class="flex items-center justify-between">
+                <span class="text-white/30">Merkle Root</span>
+                <span class="text-white/50">{{ truncateHex(attestation.additionalInfo.header.merkleroot) }}</span>
+              </div>
+            </template>
+          </div>
+        </template>
+
+        <!-- Ethereum UTS attestation details -->
+        <template v-else-if="attestation.attestation.kind === 'ethereum-uts'">
+          <div class="space-y-1.5 font-mono text-[11px]">
+            <div class="flex items-center justify-between">
+              <span class="text-white/30">Type</span>
+              <span class="text-neon-purple">Ethereum UTS</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span class="text-white/30">Chain</span>
+              <span class="text-white/70">{{ getChainName(attestation.attestation.chain) }} ({{ attestation.attestation.chain }})</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span class="text-white/30">Block Height</span>
+              <span class="flex items-center gap-1">
+                <span class="text-white/70">{{ attestation.attestation.height }}</span>
+                <a
+                  v-if="getEtherscanBlockUrl(attestation.attestation.chain, attestation.attestation.height)"
+                  :href="getEtherscanBlockUrl(attestation.attestation.chain, attestation.attestation.height)!"
+                  target="_blank"
+                  rel="noopener"
+                  class="text-neon-cyan hover:text-neon-cyan/80"
+                >
+                  <ExternalLink class="h-3 w-3" />
+                </a>
+              </span>
+            </div>
+            <template v-if="attestation.status === 'VALID' && attestation.additionalInfo">
+              <div v-if="attestation.additionalInfo.sender" class="flex items-center justify-between">
+                <span class="text-white/30">Sender</span>
+                <span class="flex items-center gap-1">
+                  <span class="text-white/50">{{ truncateHex(attestation.additionalInfo.sender) }}</span>
+                  <a
+                    v-if="getEtherscanAddressUrl(attestation.attestation.chain, attestation.additionalInfo.sender)"
+                    :href="getEtherscanAddressUrl(attestation.attestation.chain, attestation.additionalInfo.sender)!"
+                    target="_blank"
+                    rel="noopener"
+                    class="text-neon-cyan hover:text-neon-cyan/80"
+                  >
+                    <ExternalLink class="h-3 w-3" />
+                  </a>
+                </span>
+              </div>
+              <div v-if="attestation.additionalInfo.timestamp" class="flex items-center justify-between">
+                <span class="text-white/30">Timestamp</span>
+                <span class="text-white/50">{{ formatTimestamp(attestation.additionalInfo.timestamp) }}</span>
+              </div>
+              <div v-if="attestation.additionalInfo.root" class="flex items-center justify-between">
+                <span class="text-white/30">Root</span>
+                <span class="text-white/50">{{ truncateHex(attestation.additionalInfo.root) }}</span>
+              </div>
+            </template>
+            <template v-if="attestation.attestation.metadata">
+              <div v-if="attestation.attestation.metadata.contract" class="flex items-center justify-between">
+                <span class="text-white/30">Contract</span>
+                <span class="flex items-center gap-1">
+                  <span class="text-white/50">{{ truncateHex(hexlify(attestation.attestation.metadata.contract as Uint8Array)) }}</span>
+                  <a
+                    v-if="getEtherscanAddressUrl(attestation.attestation.chain, hexlify(attestation.attestation.metadata.contract as Uint8Array))"
+                    :href="getEtherscanAddressUrl(attestation.attestation.chain, hexlify(attestation.attestation.metadata.contract as Uint8Array))!"
+                    target="_blank"
+                    rel="noopener"
+                    class="text-neon-cyan hover:text-neon-cyan/80"
+                  >
+                    <ExternalLink class="h-3 w-3" />
+                  </a>
+                </span>
+              </div>
+              <div v-if="attestation.attestation.metadata.txHash" class="flex items-center justify-between">
+                <span class="text-white/30">Tx Hash</span>
+                <span class="flex items-center gap-1">
+                  <span class="text-white/50">{{ truncateHex(hexlify(attestation.attestation.metadata.txHash as Uint8Array)) }}</span>
+                  <a
+                    v-if="getEtherscanTxUrl(attestation.attestation.chain, hexlify(attestation.attestation.metadata.txHash as Uint8Array))"
+                    :href="getEtherscanTxUrl(attestation.attestation.chain, hexlify(attestation.attestation.metadata.txHash as Uint8Array))!"
+                    target="_blank"
+                    rel="noopener"
+                    class="text-neon-cyan hover:text-neon-cyan/80"
+                  >
+                    <ExternalLink class="h-3 w-3" />
+                  </a>
+                </span>
+              </div>
+            </template>
+          </div>
+        </template>
+
+        <!-- Pending attestation details -->
+        <template v-else-if="attestation.attestation.kind === 'pending'">
+          <div class="space-y-1.5 font-mono text-[11px]">
+            <div class="flex items-center justify-between">
+              <span class="text-white/30">Type</span>
+              <span class="text-pending">Pending</span>
+            </div>
+            <div class="flex items-center justify-between">
+              <span class="text-white/30">Calendar</span>
+              <span class="text-white/50">{{ attestation.attestation.url }}</span>
+            </div>
+          </div>
+        </template>
+
+        <!-- Error info -->
+        <div
+          v-if="(attestation.status === 'INVALID' || attestation.status === 'UNKNOWN') && 'error' in attestation"
+          class="mt-2 rounded border border-invalid/20 bg-invalid/5 px-2 py-1.5 font-mono text-[10px] text-invalid"
+        >
+          {{ attestation.error?.message }}
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/apps/web/src/components/verify/VerificationResult.vue b/apps/web/src/components/verify/VerificationResult.vue
index de80d81..b12e8bb 100644
--- a/apps/web/src/components/verify/VerificationResult.vue
+++ b/apps/web/src/components/verify/VerificationResult.vue
@@ -6,6 +6,7 @@ import GlassCard from '@/components/base/GlassCard.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import StatusBadge from '@/components/base/StatusBadge.vue'
 import MerkleTreeViz from '@/components/verify/MerkleTreeViz.vue'
+import AttestationDetail from '@/components/verify/AttestationDetail.vue'
 import { useTimestampSDK } from '@/composables/useTimestampSDK'
 import { VerifyStatus } from '@uts/sdk'
 import type { DetachedTimestamp } from '@uts/sdk'
@@ -111,35 +112,16 @@ function handleReset() {
         </div>
       </div>
 
-      <!-- Attestation details -->
+      <!-- Attestation details (collapsible) -->
       <div v-if="verifyAttestations.length > 0" class="space-y-2">
         <div class="font-mono text-[10px] uppercase tracking-widest text-white/30">
           Attestations ({{ verifyAttestations.length }})
         </div>
-        <div
+        <AttestationDetail
           v-for="(att, i) in verifyAttestations"
           :key="i"
-          class="rounded-lg border border-glass-border bg-surface/40 p-3"
-        >
-          <div class="flex items-center gap-2">
-            <StatusBadge
-              :status="att.status === 'VALID' ? 'valid' : att.status === 'PENDING' ? 'pending' : att.status === 'INVALID' ? 'invalid' : 'unknown'"
-              size="sm"
-            />
-            <span class="font-mono text-xs text-white/60">
-              <template v-if="att.attestation.kind === 'bitcoin'">
-                Bitcoin block #{{ att.attestation.height }}
-              </template>
-              <template v-else-if="att.attestation.kind === 'ethereum-uts'">
-                Ethereum (chain {{ att.attestation.chain }}) block #{{ att.attestation.height }}
-              </template>
-              <template v-else-if="att.attestation.kind === 'pending'">
-                Pending → {{ att.attestation.url }}
-              </template>
-              <template v-else>Unknown attestation</template>
-            </span>
-          </div>
-        </div>
+          :attestation="att"
+        />
       </div>
 
       <!-- Proof path toggle -->
diff --git a/apps/web/src/composables/useTimestampSDK.ts b/apps/web/src/composables/useTimestampSDK.ts
index dd72c58..5ccb58f 100644
--- a/apps/web/src/composables/useTimestampSDK.ts
+++ b/apps/web/src/composables/useTimestampSDK.ts
@@ -49,7 +49,7 @@ export function setWeb3Provider(provider: Eip1193Provider | null) {
   sdk.web3Provider = provider
 }
 
-function downloadOtsFile(stamp: DetachedTimestamp, fileName?: string) {
+export function downloadOtsFile(stamp: DetachedTimestamp, fileName?: string) {
   const encoded = Encoder.encodeDetachedTimestamp(stamp)
   const blob = new Blob([encoded as BlobPart], { type: 'application/octet-stream' })
   const url = URL.createObjectURL(blob)
@@ -68,6 +68,7 @@ export function useTimestampSDK() {
   const stampPhase = ref<StampPhase>('idle')
   const stampError = ref<string | null>(null)
   const stampResult = shallowRef<DetachedTimestamp[] | null>(null)
+  const stampFileName = ref<string | undefined>(undefined)
   const broadcastProgress = ref('')
   const upgradeResults = shallowRef<UpgradeResult[] | null>(null)
 
@@ -82,6 +83,7 @@ export function useTimestampSDK() {
     stampPhase.value = 'generating-nonce'
     stampError.value = null
     stampResult.value = null
+    stampFileName.value = fileName
     broadcastProgress.value = ''
     upgradeResults.value = null
 
@@ -115,11 +117,6 @@ export function useTimestampSDK() {
       stampPhase.value = 'complete'
       stampResult.value = results
 
-      // Download the stamped .ots file
-      for (const result of results) {
-        downloadOtsFile(result, fileName)
-      }
-
       // Start polling for upgrade
       startUpgradePolling(results)
 
@@ -131,7 +128,14 @@ export function useTimestampSDK() {
     }
   }
 
-  function startUpgradePolling(stamps: DetachedTimestamp[]) {
+  function downloadPendingStamp() {
+    if (!stampResult.value) return
+    for (const result of stampResult.value) {
+      downloadOtsFile(result, stampFileName.value)
+    }
+  }
+
+  function startUpgradePolling(stamps: DetachedTimestamp[], keepPending?: boolean) {
     stopUpgradePolling()
     stampPhase.value = 'upgrading'
 
@@ -143,7 +147,7 @@ export function useTimestampSDK() {
       try {
         const allResults: UpgradeResult[] = []
         for (const s of stamps) {
-          const results = await sdk.upgrade(s)
+          const results = await sdk.upgrade(s, keepPending ?? false)
           allResults.push(...results)
         }
         upgradeResults.value = allResults
@@ -151,9 +155,9 @@ export function useTimestampSDK() {
         const hasUpgraded = allResults.some((r) => r.status === UpgradeStatus.Upgraded)
         if (hasUpgraded) {
           stampPhase.value = 'upgraded'
-          // Download upgraded file
+          // Download upgraded file with original filename
           for (const s of stamps) {
-            downloadOtsFile(s)
+            downloadOtsFile(s, stampFileName.value)
           }
           stopUpgradePolling()
         } else if (attempts >= maxAttempts) {
@@ -197,8 +201,9 @@ export function useTimestampSDK() {
 
   async function upgrade(
     detached: DetachedTimestamp,
+    keepPending?: boolean,
   ): Promise<UpgradeResult[]> {
-    return sdk.upgrade(detached)
+    return sdk.upgrade(detached, keepPending ?? false)
   }
 
   function decodeOtsFile(data: Uint8Array): DetachedTimestamp {
@@ -210,6 +215,7 @@ export function useTimestampSDK() {
     stampPhase.value = 'idle'
     stampError.value = null
     stampResult.value = null
+    stampFileName.value = undefined
     broadcastProgress.value = ''
     upgradeResults.value = null
     stopUpgradePolling()
@@ -226,9 +232,11 @@ export function useTimestampSDK() {
     stampPhase,
     stampError,
     stampResult,
+    stampFileName,
     broadcastProgress,
     upgradeResults,
     stamp,
+    downloadPendingStamp,
     resetStamp,
 
     verifyStatus,
diff --git a/apps/web/src/composables/useWebSocketFeed.ts b/apps/web/src/composables/useWebSocketFeed.ts
index bd582de..58e6cba 100644
--- a/apps/web/src/composables/useWebSocketFeed.ts
+++ b/apps/web/src/composables/useWebSocketFeed.ts
@@ -26,21 +26,34 @@ export interface FeedEntry {
 export function useWebSocketFeed() {
   const entries = ref<FeedEntry[]>([])
   const isConnected = ref(false)
+  const seenIds = new Set<string>()
   let intervalId: ReturnType<typeof setInterval> | null = null
-  let lastBlock: Record<number, number> = {}
+  let lastBlockWeb3: Record<number, number> = {}
+  let lastBlockRPC: Record<number, number> = {}
+
+  function addEntry(entry: FeedEntry) {
+    if (seenIds.has(entry.id)) return
+    seenIds.add(entry.id)
+    entries.value.unshift(entry)
+    if (entries.value.length > 50) {
+      const removed = entries.value.splice(50)
+      for (const r of removed) seenIds.delete(r.id)
+    }
+  }
 
-  async function fetchEventsFromWeb3(web3Provider: Eip1193Provider) {
+  /** Poll web3Provider. Returns the wallet's chainId on success, or null. */
+  async function fetchEventsFromWeb3(web3Provider: Eip1193Provider): Promise<number | null> {
     try {
       const provider = new BrowserProvider(web3Provider)
       const network = await provider.getNetwork()
       const chainId = Number(network.chainId)
 
       const currentBlock = await provider.getBlockNumber()
-      const fromBlock = lastBlock[chainId]
-        ? lastBlock[chainId] + 1
+      const fromBlock = lastBlockWeb3[chainId]
+        ? lastBlockWeb3[chainId] + 1
         : currentBlock - 10
 
-      if (fromBlock > currentBlock) return
+      if (fromBlock > currentBlock) return chainId
 
       const logs = await provider.getLogs({
         fromBlock,
@@ -52,46 +65,40 @@ export function useWebSocketFeed() {
         const parsed = SDK.utsInterface.parseLog(log)
         if (!parsed) continue
 
-        const root: string = parsed.args[0]
-        const sender: string = parsed.args[1]
-        const ts: bigint = parsed.args[2]
-
-        const entryId = `${chainId}-${log.blockNumber}-${log.index}`
-        if (!entries.value.some((e) => e.id === entryId)) {
-          entries.value.unshift({
-            id: entryId,
-            hash: root,
-            type: 'ethereum',
-            chain: CHAIN_NAMES[chainId] ?? `Chain ${chainId}`,
-            chainId,
-            blockHeight: log.blockNumber,
-            sender,
-            timestamp: Number(ts) * 1000,
-          })
-        }
+        addEntry({
+          id: `${chainId}-${log.blockNumber}-${log.index}`,
+          hash: parsed.args[0],
+          type: 'ethereum',
+          chain: CHAIN_NAMES[chainId] ?? `Chain ${chainId}`,
+          chainId,
+          blockHeight: log.blockNumber,
+          sender: parsed.args[1],
+          timestamp: Number(parsed.args[2] as bigint) * 1000,
+        })
       }
 
-      lastBlock[chainId] = currentBlock
-
-      if (entries.value.length > 50) {
-        entries.value.length = 50
-      }
+      lastBlockWeb3[chainId] = currentBlock
+      return chainId
     } catch (e) {
       console.warn('Feed: failed to poll web3Provider:', e)
+      return null
     }
   }
 
-  async function fetchEventsFromRPCs(sdk: SDK) {
+  /** Poll ethRPCs, skipping chains already covered by web3Provider. */
+  async function fetchEventsFromRPCs(sdk: SDK, skipChainIds: Set<number> = new Set()) {
     const chainIds = Object.keys(sdk.ethRPCs).map(Number)
 
     for (const chainId of chainIds) {
+      if (skipChainIds.has(chainId)) continue
+
       const provider = sdk.getEthProvider(chainId)
       if (!provider) continue
 
       try {
         const currentBlock = await provider.getBlockNumber()
-        const fromBlock = lastBlock[chainId]
-          ? lastBlock[chainId] + 1
+        const fromBlock = lastBlockRPC[chainId]
+          ? lastBlockRPC[chainId] + 1
           : currentBlock - 5
 
         if (fromBlock > currentBlock) continue
@@ -106,53 +113,52 @@ export function useWebSocketFeed() {
           const parsed = SDK.utsInterface.parseLog(log)
           if (!parsed) continue
 
-          const root: string = parsed.args[0]
-          const sender: string = parsed.args[1]
-          const ts: bigint = parsed.args[2]
-
-          entries.value.unshift({
+          addEntry({
             id: `${chainId}-${log.blockNumber}-${log.index}`,
-            hash: root,
+            hash: parsed.args[0],
             type: 'ethereum',
             chain: CHAIN_NAMES[chainId] ?? `Chain ${chainId}`,
             chainId,
             blockHeight: log.blockNumber,
-            sender,
-            timestamp: Number(ts) * 1000,
+            sender: parsed.args[1],
+            timestamp: Number(parsed.args[2] as bigint) * 1000,
           })
         }
 
-        lastBlock[chainId] = currentBlock
-
-        if (entries.value.length > 50) {
-          entries.value.length = 50
-        }
+        lastBlockRPC[chainId] = currentBlock
       } catch (e) {
         console.warn(`Feed: failed to poll chain ${chainId}:`, e)
       }
     }
   }
 
-  async function connect() {
+  /** Poll both web3Provider and ethRPCs, deduplicating by entry id. */
+  async function pollAll() {
     const sdk = getSDK()
-    isConnected.value = true
-    lastBlock = {}
+    const skipChainIds = new Set<number>()
 
-    // Initial fetch: prefer web3Provider
+    // Poll web3Provider first (if available)
     if (sdk.web3Provider) {
-      await fetchEventsFromWeb3(sdk.web3Provider)
-    } else {
-      await fetchEventsFromRPCs(sdk)
+      const web3ChainId = await fetchEventsFromWeb3(sdk.web3Provider)
+      if (web3ChainId !== null) {
+        // Skip this chain in ethRPCs since web3Provider already covers it
+        skipChainIds.add(web3ChainId)
+      }
     }
 
-    // Poll every 15s — prefer web3Provider when available
+    // Also poll ethRPCs for all remaining chains
+    await fetchEventsFromRPCs(sdk, skipChainIds)
+  }
+
+  async function connect() {
+    isConnected.value = true
+    lastBlockWeb3 = {}
+    lastBlockRPC = {}
+
+    await pollAll()
+
     intervalId = setInterval(() => {
-      const currentSdk = getSDK()
-      if (currentSdk.web3Provider) {
-        fetchEventsFromWeb3(currentSdk.web3Provider)
-      } else {
-        fetchEventsFromRPCs(currentSdk)
-      }
+      pollAll()
     }, 15000)
   }
 
diff --git a/apps/web/src/stores/app.ts b/apps/web/src/stores/app.ts
index d89fbb1..f643a6b 100644
--- a/apps/web/src/stores/app.ts
+++ b/apps/web/src/stores/app.ts
@@ -20,6 +20,7 @@ export interface EthChainNode {
 }
 
 const STORAGE_KEY = 'uts-calendars'
+const SETTINGS_KEY = 'uts-settings'
 
 function loadCalendars(): string[] {
   try {
@@ -33,8 +34,21 @@ function saveCalendars(urls: string[]) {
   localStorage.setItem(STORAGE_KEY, JSON.stringify(urls))
 }
 
+function loadSettings(): { keepPending: boolean } {
+  try {
+    const stored = localStorage.getItem(SETTINGS_KEY)
+    if (stored) return JSON.parse(stored)
+  } catch { /* ignore */ }
+  return { keepPending: false }
+}
+
+function saveSettings(settings: { keepPending: boolean }) {
+  localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings))
+}
+
 export const useAppStore = defineStore('app', () => {
   const calendarUrls = ref<string[]>(loadCalendars())
+  const keepPending = ref(loadSettings().keepPending)
   const ethChains = ref<EthChainNode[]>([])
   const recentStamps = ref<DetachedTimestamp[]>([])
 
@@ -47,6 +61,10 @@ export const useAppStore = defineStore('app', () => {
     resetSDK({ calendars: urls.map((u) => new URL(u)) })
   }, { deep: true })
 
+  watch(keepPending, (val) => {
+    saveSettings({ keepPending: val })
+  })
+
   async function checkChains() {
     const sdk = getSDK()
     const chainIds = Object.keys(sdk.ethRPCs).map(Number)
@@ -92,6 +110,7 @@ export const useAppStore = defineStore('app', () => {
 
   return {
     calendarUrls,
+    keepPending,
     ethChains,
     recentStamps,
     onlineCount,
diff --git a/apps/web/src/views/HomeView.vue b/apps/web/src/views/HomeView.vue
index 9158a7e..0743ec4 100644
--- a/apps/web/src/views/HomeView.vue
+++ b/apps/web/src/views/HomeView.vue
@@ -13,7 +13,7 @@ import type { FileDigestResult } from '@/composables/useFileDigest'
 import { useAppStore } from '@/stores/app'
 
 const store = useAppStore()
-const { stampPhase, stampError, broadcastProgress, stamp, resetStamp } = useTimestampSDK()
+const { stampPhase, stampError, broadcastProgress, stamp, downloadPendingStamp } = useTimestampSDK()
 const {
   walletAddress,
   walletChainName,
@@ -26,11 +26,16 @@ const {
   truncateAddress,
 } = useWallet()
 
-const activeTab = ref<'stamp' | 'verify'>('stamp')
+const savedTab = localStorage.getItem('uts-active-tab') as 'stamp' | 'verify' | null
+const activeTab = ref<'stamp' | 'verify'>(savedTab === 'verify' ? 'verify' : 'stamp')
 const showWorkflow = ref(false)
 const showSettings = ref(false)
 const newCalendarUrl = ref('')
 
+watch(activeTab, (tab) => {
+  localStorage.setItem('uts-active-tab', tab)
+})
+
 onMounted(() => {
   store.checkChains()
 })
@@ -68,11 +73,6 @@ async function handleStampFromHash(hash: string) {
   }
 }
 
-function handleResetWorkflow() {
-  resetStamp()
-  showWorkflow.value = false
-}
-
 function addCalendar() {
   const url = newCalendarUrl.value.trim()
   if (!url) return
@@ -211,6 +211,21 @@ function handleWalletClick() {
                 </BaseButton>
               </div>
             </div>
+
+            <!-- Upgrade behavior -->
+            <div class="mt-4 border-t border-glass-border pt-3">
+              <label class="flex items-center gap-3 cursor-pointer">
+                <input
+                  v-model="store.keepPending"
+                  type="checkbox"
+                  class="h-4 w-4 rounded border-glass-border bg-surface accent-neon-cyan"
+                />
+                <div>
+                  <div class="font-heading text-xs font-medium text-white/70">Keep pending attestations after upgrade</div>
+                  <div class="font-mono text-[10px] text-white/30">When enabled, the original pending attestation is preserved alongside the upgraded one</div>
+                </div>
+              </label>
+            </div>
           </GlassCard>
         </div>
       </div>
@@ -237,7 +252,7 @@ function handleWalletClick() {
               ? 'bg-neon-cyan/10 text-neon-cyan'
               : 'text-white/40 hover:text-white/60'
           "
-          @click="activeTab = 'stamp'; handleResetWorkflow()"
+          @click="activeTab = 'stamp'"
         >
           <Zap class="h-4 w-4" />
           Stamp
@@ -260,29 +275,26 @@ function handleWalletClick() {
       <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
         <!-- Main panel (2/3) -->
         <div class="space-y-6 lg:col-span-2">
-          <Transition name="fade" mode="out-in">
-            <!-- Stamp tab -->
-            <div v-if="activeTab === 'stamp'" key="stamp" class="space-y-6">
-              <HeroTerminal
-                @submit="handleStampFromDigest"
-                @submit-raw="handleStampFromHash"
-              />
+          <!-- Stamp tab (preserved with v-show) -->
+          <div v-show="activeTab === 'stamp'" class="space-y-6">
+            <HeroTerminal
+              @submit="handleStampFromDigest"
+              @submit-raw="handleStampFromHash"
+            />
 
-              <Transition name="fade">
-                <StampingWorkflow
-                  v-if="showWorkflow"
-                  :phase="stampPhase"
-                  :error="stampError"
-                  :broadcast-progress="broadcastProgress"
-                />
-              </Transition>
-            </div>
+            <StampingWorkflow
+              v-if="showWorkflow"
+              :phase="stampPhase"
+              :error="stampError"
+              :broadcast-progress="broadcastProgress"
+              @download="downloadPendingStamp"
+            />
+          </div>
 
-            <!-- Verify tab -->
-            <div v-else key="verify">
-              <VerificationResult />
-            </div>
-          </Transition>
+          <!-- Verify tab (preserved with v-show) -->
+          <div v-show="activeTab === 'verify'">
+            <VerificationResult />
+          </div>
         </div>
 
         <!-- Sidebar (1/3) -->
diff --git a/packages/sdk/src/sdk.ts b/packages/sdk/src/sdk.ts
index 5190416..54975b0 100644
--- a/packages/sdk/src/sdk.ts
+++ b/packages/sdk/src/sdk.ts
@@ -384,12 +384,14 @@ export default class SDK {
   /**
    * Perform in-place upgrade of the provided detached timestamp by replacing any pending attestations with their upgraded timestamp steps, if they have become available.
    * @param detached The detached timestamp to be upgraded.
+   * @param keepPending Whether to keep the original pending attestation alongside the upgraded one. Default is false (purge pending on success).
    * @returns The result of the upgrade operation, including the original and upgraded timestamps if applicable.
    */
-  async upgrade(detached: DetachedTimestamp): Promise<UpgradeResult[]> {
+  async upgrade(detached: DetachedTimestamp, keepPending: boolean = false): Promise<UpgradeResult[]> {
     return this.upgradeTimestamp(
       getBytes(detached.header.digest),
       detached.timestamp,
+      keepPending,
     )
   }
 
@@ -398,11 +400,13 @@ export default class SDK {
    * This function will recursively traverse the timestamp steps and perform in-place upgrades of any pending attestations encountered.
    * @param input The original digest input associated with the timestamp, which is needed to verify and upgrade the pending attestations.
    * @param timestamp The timestamp steps to be upgraded, which may contain pending attestations that need to be replaced with their upgraded timestamp steps if they have become available.
+   * @param keepPending Whether to keep the original pending attestation alongside the upgraded one. Default is false (purge pending on success).
    * @returns The result of the upgrade operation, including the original and upgraded timestamps if applicable.
    */
   async upgradeTimestamp(
     input: Uint8Array,
     timestamp: Timestamp,
+    keepPending: boolean = false,
   ): Promise<UpgradeResult[]> {
     let current = input
 
@@ -426,7 +430,7 @@ export default class SDK {
           // upgrade sub stamps
           const results = (
             await Promise.all(
-              step.steps.map((branch) => this.upgradeTimestamp(input, branch)),
+              step.steps.map((branch) => this.upgradeTimestamp(input, branch, keepPending)),
             )
           ).flat()
           result.push(...results)
@@ -447,10 +451,15 @@ export default class SDK {
               })
               continue
             }
-            // preserve the original attestation in the upgraded timestamp for transparency
-            timestamp[i] = {
-              op: 'FORK',
-              steps: [[step], upgraded],
+            if (keepPending) {
+              // preserve the original attestation in the upgraded timestamp for transparency
+              timestamp[i] = {
+                op: 'FORK',
+                steps: [[step], upgraded],
+              }
+            } else {
+              // replace the pending attestation with the upgraded one
+              timestamp.splice(i, 1, ...upgraded)
             }
             result.push({
               status: UpgradeStatus.Upgraded,

From 542478afe53455c395375828cf9d6fcb3f001eff Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Feb 2026 07:24:56 +0000
Subject: [PATCH 10/21] fix: correct Scroll chain IDs, delay hashing, wider
 feed, default keccak, directory stamp

SDK: Fix Scroll chain IDs from 54351/54352 to 534351/534352 with correct
hex values 0x8274f/0x82750 matching the Rust CLI and actual chain IDs.

Web: Delay file hashing until Stamp button is pressed (not on file select).
Add "Choose Directory" button for batch stamping entire directories.
Batch stamps download all .ots files as a zip archive.
Default file hash algorithm changed to Keccak-256.
Add internal hash algorithm setting (for Merkle tree construction).
Widen Live Feed panel from 1/3 to 2/5 grid for more horizontal space.
All settings persisted to localStorage.

Co-authored-by: lightsing <15951701+lightsing@users.noreply.github.com>
---
 apps/web/package.json                         |   2 +
 apps/web/src/components/feed/LiveFeed.vue     |   4 +-
 .../src/components/terminal/HeroTerminal.vue  | 127 +++++++++++++-----
 .../components/verify/AttestationDetail.vue   |   8 +-
 apps/web/src/composables/useWallet.ts         |   4 +-
 apps/web/src/composables/useWebSocketFeed.ts  |   4 +-
 apps/web/src/stores/app.ts                    |  28 ++--
 apps/web/src/views/HomeView.vue               |  64 +++++++--
 packages/sdk/src/sdk.ts                       |   8 +-
 pnpm-lock.yaml                                |  96 +++++++++++++
 10 files changed, 278 insertions(+), 67 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index de618f2..1d6f953 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -16,12 +16,14 @@
     "@vueuse/core": "^14.2.1",
     "date-fns": "^4.1.0",
     "ethers": "^6.16.0",
+    "jszip": "^3.10.1",
     "lucide-vue-next": "^0.575.0",
     "pinia": "^3.0.4",
     "vue": "^3.5.24"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.2.1",
+    "@types/jszip": "^3.4.1",
     "@types/node": "^24.10.1",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/tsconfig": "^0.8.1",
diff --git a/apps/web/src/components/feed/LiveFeed.vue b/apps/web/src/components/feed/LiveFeed.vue
index e43613c..f4708bc 100644
--- a/apps/web/src/components/feed/LiveFeed.vue
+++ b/apps/web/src/components/feed/LiveFeed.vue
@@ -29,8 +29,8 @@ const ETHERSCAN_URLS: Record<number, string> = {
   1: 'https://etherscan.io',
   17000: 'https://holesky.etherscan.io',
   11155111: 'https://sepolia.etherscan.io',
-  54352: 'https://scrollscan.com',
-  54351: 'https://sepolia.scrollscan.com',
+  534352: 'https://scrollscan.com',
+  534351: 'https://sepolia.scrollscan.com',
 }
 
 function getBlockUrl(chainId: number, height: number): string | null {
diff --git a/apps/web/src/components/terminal/HeroTerminal.vue b/apps/web/src/components/terminal/HeroTerminal.vue
index c0a59ba..4a88a3e 100644
--- a/apps/web/src/components/terminal/HeroTerminal.vue
+++ b/apps/web/src/components/terminal/HeroTerminal.vue
@@ -1,21 +1,22 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useDropZone } from '@vueuse/core'
-import { Upload, Hash, FileText, X } from 'lucide-vue-next'
+import { Upload, Hash, FileText, FolderOpen, X } from 'lucide-vue-next'
 import GlassCard from '@/components/base/GlassCard.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import { useFileDigest, type FileDigestResult } from '@/composables/useFileDigest'
 import type { SecureDigestOp } from '@uts/sdk'
 
 const emit = defineEmits<{
-  submit: [digest: FileDigestResult]
+  submit: [digests: FileDigestResult[]]
   submitRaw: [hash: string]
 }>()
 
 const dropZoneRef = ref<HTMLDivElement>()
 const fileInputRef = ref<HTMLInputElement>()
+const dirInputRef = ref<HTMLInputElement>()
 const manualHash = ref('')
-const selectedAlgorithm = ref<SecureDigestOp>('SHA256')
+const selectedAlgorithm = ref<SecureDigestOp>('KECCAK256')
 
 const { isDigesting, progress, error: digestError, result: digestResult, digestFile, reset: resetDigest } = useFileDigest()
 
@@ -24,19 +25,34 @@ const { isOverDropZone } = useDropZone(dropZoneRef, {
   dataTypes: ['Files'],
 })
 
+// Store selected files (not yet hashed)
+const selectedFiles = ref<File[]>([])
+const isStamping = ref(false)
+
+const hasFiles = computed(() => selectedFiles.value.length > 0)
 const hasResult = computed(() => digestResult.value !== null)
+const canSubmit = computed(() => (hasFiles.value || manualHash.value.trim()) && !isStamping.value)
 
 function handleDrop(files: File[] | null) {
   if (files && files.length > 0) {
-    processFile(files[0]!)
+    selectedFiles.value = [...files]
+    resetDigest()
   }
 }
 
 function handleFileInput(event: Event) {
   const target = event.target as HTMLInputElement
-  const file = target.files?.[0]
-  if (file) {
-    processFile(file)
+  if (target.files && target.files.length > 0) {
+    selectedFiles.value = Array.from(target.files)
+    resetDigest()
+  }
+}
+
+function handleDirInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  if (target.files && target.files.length > 0) {
+    selectedFiles.value = Array.from(target.files)
+    resetDigest()
   }
 }
 
@@ -44,22 +60,36 @@ function openFilePicker() {
   fileInputRef.value?.click()
 }
 
-async function processFile(file: File) {
-  await digestFile(file, selectedAlgorithm.value)
+function openDirPicker() {
+  dirInputRef.value?.click()
 }
 
-function handleSubmit() {
-  if (digestResult.value) {
-    emit('submit', digestResult.value)
+async function handleSubmit() {
+  if (hasFiles.value) {
+    isStamping.value = true
+    try {
+      const results: FileDigestResult[] = []
+      for (const file of selectedFiles.value) {
+        const result = await digestFile(file, selectedAlgorithm.value)
+        results.push(result)
+      }
+      emit('submit', results)
+    } catch {
+      // error tracked in digestError
+    } finally {
+      isStamping.value = false
+    }
   } else if (manualHash.value.trim()) {
     emit('submitRaw', manualHash.value.trim())
   }
 }
 
 function handleClear() {
+  selectedFiles.value = []
   resetDigest()
   manualHash.value = ''
   if (fileInputRef.value) fileInputRef.value.value = ''
+  if (dirInputRef.value) dirInputRef.value.value = ''
 }
 
 function formatSize(bytes: number): string {
@@ -67,6 +97,10 @@ function formatSize(bytes: number): string {
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
 }
+
+function totalSize(): number {
+  return selectedFiles.value.reduce((sum, f) => sum + f.size, 0)
+}
 </script>
 
 <template>
@@ -86,8 +120,8 @@ function formatSize(bytes: number): string {
             v-model="selectedAlgorithm"
             class="rounded border border-glass-border bg-surface px-2 py-0.5 font-mono text-xs text-neon-cyan outline-none focus:border-neon-cyan/40"
           >
-            <option value="SHA256">SHA-256</option>
             <option value="KECCAK256">Keccak-256</option>
+            <option value="SHA256">SHA-256</option>
           </select>
         </label>
       </div>
@@ -99,8 +133,8 @@ function formatSize(bytes: number): string {
       class="relative rounded-lg border-2 border-dashed p-8 text-center transition-all duration-300"
       :class="{
         'border-neon-cyan/50 bg-neon-cyan/5': isOverDropZone,
-        'border-glass-border hover:border-white/20': !isOverDropZone && !hasResult,
-        'border-valid/30 bg-valid/5': hasResult,
+        'border-glass-border hover:border-white/20': !isOverDropZone && !hasFiles && !isDigesting && !hasResult,
+        'border-valid/30 bg-valid/5': hasFiles || hasResult,
       }"
     >
       <!-- Digesting progress -->
@@ -118,11 +152,13 @@ function formatSize(bytes: number): string {
         <div class="font-mono text-xs text-white/40">{{ progress.toFixed(0) }}%</div>
       </div>
 
-      <!-- Result display -->
-      <div v-else-if="hasResult && digestResult" class="space-y-3">
+      <!-- Files selected (not yet hashed) -->
+      <div v-else-if="hasFiles" class="space-y-3">
         <div class="flex items-center justify-center gap-2">
-          <FileText class="h-5 w-5 text-valid" />
-          <span class="font-heading text-sm font-semibold text-valid">File Digested</span>
+          <FileText class="h-5 w-5 text-neon-cyan" />
+          <span class="font-heading text-sm font-semibold text-neon-cyan">
+            {{ selectedFiles.length }} file{{ selectedFiles.length > 1 ? 's' : '' }} selected
+          </span>
           <button
             class="ml-2 rounded p-1 text-white/30 transition hover:bg-white/10 hover:text-white"
             @click="handleClear"
@@ -130,16 +166,20 @@ function formatSize(bytes: number): string {
             <X class="h-4 w-4" />
           </button>
         </div>
-        <div class="font-mono text-xs text-white/50">
-          {{ digestResult.fileName }} ({{ formatSize(digestResult.fileSize) }})
-        </div>
-        <div
-          class="mx-auto max-w-lg break-all rounded bg-surface/80 px-4 py-2 font-mono text-xs text-neon-cyan"
-        >
-          {{ digestResult.digest }}
+        <div class="mx-auto max-w-md space-y-1">
+          <div
+            v-for="(file, i) in selectedFiles.slice(0, 5)"
+            :key="i"
+            class="font-mono text-xs text-white/50"
+          >
+            {{ file.name }} <span class="text-white/30">({{ formatSize(file.size) }})</span>
+          </div>
+          <div v-if="selectedFiles.length > 5" class="font-mono text-xs text-white/30">
+            ... and {{ selectedFiles.length - 5 }} more
+          </div>
         </div>
-        <div class="font-mono text-[10px] uppercase tracking-widest text-white/30">
-          {{ digestResult.algorithm }}
+        <div class="font-mono text-[10px] text-white/30">
+          Total: {{ formatSize(totalSize()) }} · Hash on stamp with {{ selectedAlgorithm }}
         </div>
       </div>
 
@@ -148,22 +188,37 @@ function formatSize(bytes: number): string {
         <Upload class="mx-auto h-10 w-10 text-white/20" />
         <div class="space-y-1">
           <p class="font-heading text-sm font-medium text-white/60">
-            Drop a file here to compute its digest
+            Drop files here
           </p>
           <p class="font-mono text-xs text-white/30">or</p>
         </div>
-        <BaseButton variant="secondary" @click="openFilePicker">
-          <FileText class="h-4 w-4" />
-          Choose File
-        </BaseButton>
+        <div class="flex items-center justify-center gap-2">
+          <BaseButton variant="secondary" @click="openFilePicker">
+            <FileText class="h-4 w-4" />
+            Choose File
+          </BaseButton>
+          <BaseButton variant="secondary" @click="openDirPicker">
+            <FolderOpen class="h-4 w-4" />
+            Choose Directory
+          </BaseButton>
+        </div>
       </div>
 
       <input
         ref="fileInputRef"
         type="file"
+        multiple
         class="hidden"
         @change="handleFileInput"
       />
+      <!-- Directory picker (webkitdirectory) -->
+      <input
+        ref="dirInputRef"
+        type="file"
+        class="hidden"
+        webkitdirectory
+        @change="handleDirInput"
+      />
     </div>
 
     <!-- Error display -->
@@ -183,12 +238,12 @@ function formatSize(bytes: number): string {
           type="text"
           placeholder="0x..."
           class="flex-1 rounded-lg border border-glass-border bg-surface px-4 py-2.5 font-mono text-sm text-white/80 outline-none transition placeholder:text-white/20 focus:border-neon-cyan/40"
-          :disabled="hasResult"
+          :disabled="hasFiles"
           @keyup.enter="handleSubmit"
         />
         <BaseButton
-          :disabled="!hasResult && !manualHash.trim()"
-          :loading="isDigesting"
+          :disabled="!canSubmit"
+          :loading="isDigesting || isStamping"
           @click="handleSubmit"
         >
           <Hash class="h-4 w-4" />
diff --git a/apps/web/src/components/verify/AttestationDetail.vue b/apps/web/src/components/verify/AttestationDetail.vue
index b51836a..8ab22d4 100644
--- a/apps/web/src/components/verify/AttestationDetail.vue
+++ b/apps/web/src/components/verify/AttestationDetail.vue
@@ -17,16 +17,16 @@ const ETHERSCAN_URLS: Record<number, string> = {
   1: 'https://etherscan.io',
   17000: 'https://holesky.etherscan.io',
   11155111: 'https://sepolia.etherscan.io',
-  54352: 'https://scrollscan.com',
-  54351: 'https://sepolia.scrollscan.com',
+  534352: 'https://scrollscan.com',
+  534351: 'https://sepolia.scrollscan.com',
 }
 
 const CHAIN_NAMES: Record<number, string> = {
   1: 'Ethereum',
   17000: 'Holesky',
   11155111: 'Sepolia',
-  54352: 'Scroll',
-  54351: 'Scroll Sepolia',
+  534352: 'Scroll',
+  534351: 'Scroll Sepolia',
 }
 
 function statusLabel(status: string): 'valid' | 'invalid' | 'pending' | 'unknown' {
diff --git a/apps/web/src/composables/useWallet.ts b/apps/web/src/composables/useWallet.ts
index a392fa8..d076207 100644
--- a/apps/web/src/composables/useWallet.ts
+++ b/apps/web/src/composables/useWallet.ts
@@ -15,8 +15,8 @@ const CHAIN_NAMES: Record<number, string> = {
   1: 'Ethereum',
   17000: 'Holesky',
   11155111: 'Sepolia',
-  54352: 'Scroll',
-  54351: 'Scroll Sepolia',
+  534352: 'Scroll',
+  534351: 'Scroll Sepolia',
 }
 
 const walletChainName = computed(() => {
diff --git a/apps/web/src/composables/useWebSocketFeed.ts b/apps/web/src/composables/useWebSocketFeed.ts
index 58e6cba..c627f9a 100644
--- a/apps/web/src/composables/useWebSocketFeed.ts
+++ b/apps/web/src/composables/useWebSocketFeed.ts
@@ -8,8 +8,8 @@ const CHAIN_NAMES: Record<number, string> = {
   1: 'Ethereum',
   17000: 'Holesky',
   11155111: 'Sepolia',
-  54352: 'Scroll',
-  54351: 'Scroll Sepolia',
+  534352: 'Scroll',
+  534351: 'Scroll Sepolia',
 }
 
 export interface FeedEntry {
diff --git a/apps/web/src/stores/app.ts b/apps/web/src/stores/app.ts
index f643a6b..869a499 100644
--- a/apps/web/src/stores/app.ts
+++ b/apps/web/src/stores/app.ts
@@ -1,15 +1,15 @@
 import { defineStore } from 'pinia'
 import { ref, computed, watch } from 'vue'
 import { DEFAULT_CALENDARS } from '@uts/sdk'
-import type { DetachedTimestamp } from '@uts/sdk'
+import type { DetachedTimestamp, SecureDigestOp } from '@uts/sdk'
 import { getSDK, resetSDK } from '@/composables/useTimestampSDK'
 
 const CHAIN_NAMES: Record<number, string> = {
   1: 'Ethereum',
   17000: 'Holesky',
   11155111: 'Sepolia',
-  54352: 'Scroll',
-  54351: 'Scroll Sepolia',
+  534352: 'Scroll',
+  534351: 'Scroll Sepolia',
 }
 
 export interface EthChainNode {
@@ -34,21 +34,28 @@ function saveCalendars(urls: string[]) {
   localStorage.setItem(STORAGE_KEY, JSON.stringify(urls))
 }
 
-function loadSettings(): { keepPending: boolean } {
+function loadSettings(): { keepPending: boolean; internalHashAlgo: SecureDigestOp } {
   try {
     const stored = localStorage.getItem(SETTINGS_KEY)
-    if (stored) return JSON.parse(stored)
+    if (stored) {
+      const parsed = JSON.parse(stored)
+      return {
+        keepPending: parsed.keepPending ?? false,
+        internalHashAlgo: parsed.internalHashAlgo ?? 'KECCAK256',
+      }
+    }
   } catch { /* ignore */ }
-  return { keepPending: false }
+  return { keepPending: false, internalHashAlgo: 'KECCAK256' }
 }
 
-function saveSettings(settings: { keepPending: boolean }) {
+function saveSettings(settings: { keepPending: boolean; internalHashAlgo: SecureDigestOp }) {
   localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings))
 }
 
 export const useAppStore = defineStore('app', () => {
   const calendarUrls = ref<string[]>(loadCalendars())
   const keepPending = ref(loadSettings().keepPending)
+  const internalHashAlgo = ref<SecureDigestOp>(loadSettings().internalHashAlgo)
   const ethChains = ref<EthChainNode[]>([])
   const recentStamps = ref<DetachedTimestamp[]>([])
 
@@ -62,7 +69,11 @@ export const useAppStore = defineStore('app', () => {
   }, { deep: true })
 
   watch(keepPending, (val) => {
-    saveSettings({ keepPending: val })
+    saveSettings({ keepPending: val, internalHashAlgo: internalHashAlgo.value })
+  })
+
+  watch(internalHashAlgo, (val) => {
+    saveSettings({ keepPending: keepPending.value, internalHashAlgo: val })
   })
 
   async function checkChains() {
@@ -111,6 +122,7 @@ export const useAppStore = defineStore('app', () => {
   return {
     calendarUrls,
     keepPending,
+    internalHashAlgo,
     ethChains,
     recentStamps,
     onlineCount,
diff --git a/apps/web/src/views/HomeView.vue b/apps/web/src/views/HomeView.vue
index 0743ec4..9108938 100644
--- a/apps/web/src/views/HomeView.vue
+++ b/apps/web/src/views/HomeView.vue
@@ -7,10 +7,12 @@ import VerificationResult from '@/components/verify/VerificationResult.vue'
 import LiveFeed from '@/components/feed/LiveFeed.vue'
 import GlassCard from '@/components/base/GlassCard.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
-import { useTimestampSDK, setWeb3Provider } from '@/composables/useTimestampSDK'
+import { useTimestampSDK, setWeb3Provider, getSDK } from '@/composables/useTimestampSDK'
 import { useWallet } from '@/composables/useWallet'
 import type { FileDigestResult } from '@/composables/useFileDigest'
+import { Encoder } from '@uts/sdk'
 import { useAppStore } from '@/stores/app'
+import JSZip from 'jszip'
 
 const store = useAppStore()
 const { stampPhase, stampError, broadcastProgress, stamp, downloadPendingStamp } = useTimestampSDK()
@@ -49,11 +51,38 @@ watch(walletConnected, (connected) => {
   }
 })
 
-async function handleStampFromDigest(digest: FileDigestResult) {
+async function handleStampFromDigest(digests: FileDigestResult[]) {
   showWorkflow.value = true
+
+  // Apply internal hash algorithm setting
+  getSDK().hashAlgorithm = store.internalHashAlgo
+
+  const isBatch = digests.length > 1
+  const firstFileName = digests[0]?.fileName
+
   try {
-    const results = await stamp([digest.header], digest.fileName)
+    const headers = digests.map((d) => d.header)
+    const results = await stamp(headers, firstFileName)
     for (const r of results) store.addStamp(r)
+
+    // For batch (directory): download all as zip
+    if (isBatch && results.length > 0) {
+      const zip = new JSZip()
+      for (let i = 0; i < results.length; i++) {
+        const fileName = digests[i]?.fileName ?? `file-${i}`
+        const encoded = Encoder.encodeDetachedTimestamp(results[i]!)
+        zip.file(`${fileName}.ots`, encoded)
+      }
+      const blob = await zip.generateAsync({ type: 'blob' })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = 'timestamps.zip'
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      URL.revokeObjectURL(url)
+    }
   } catch {
     // error is tracked in stampError
   }
@@ -61,6 +90,10 @@ async function handleStampFromDigest(digest: FileDigestResult) {
 
 async function handleStampFromHash(hash: string) {
   showWorkflow.value = true
+
+  // Apply internal hash algorithm setting
+  getSDK().hashAlgorithm = store.internalHashAlgo
+
   const digest = hash.startsWith('0x') ? hash : `0x${hash}`
   const bytes = new Uint8Array(
     (digest.slice(2).match(/.{2}/g) ?? []).map((b) => parseInt(b, 16)),
@@ -213,7 +246,7 @@ function handleWalletClick() {
             </div>
 
             <!-- Upgrade behavior -->
-            <div class="mt-4 border-t border-glass-border pt-3">
+            <div class="mt-4 border-t border-glass-border pt-3 space-y-3">
               <label class="flex items-center gap-3 cursor-pointer">
                 <input
                   v-model="store.keepPending"
@@ -225,6 +258,19 @@ function handleWalletClick() {
                   <div class="font-mono text-[10px] text-white/30">When enabled, the original pending attestation is preserved alongside the upgraded one</div>
                 </div>
               </label>
+
+              <!-- Internal hash algorithm -->
+              <div class="flex items-center gap-3">
+                <label class="font-heading text-xs font-medium text-white/70">Internal hash algorithm</label>
+                <select
+                  v-model="store.internalHashAlgo"
+                  class="rounded border border-glass-border bg-surface px-2 py-1 font-mono text-xs text-neon-cyan outline-none focus:border-neon-cyan/40"
+                >
+                  <option value="KECCAK256">Keccak-256</option>
+                  <option value="SHA256">SHA-256</option>
+                </select>
+                <span class="font-mono text-[10px] text-white/30">Used for Merkle tree construction</span>
+              </div>
             </div>
           </GlassCard>
         </div>
@@ -272,9 +318,9 @@ function handleWalletClick() {
       </div>
 
       <!-- Content -->
-      <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
-        <!-- Main panel (2/3) -->
-        <div class="space-y-6 lg:col-span-2">
+      <div class="grid grid-cols-1 gap-6 lg:grid-cols-5">
+        <!-- Main panel (3/5) -->
+        <div class="space-y-6 lg:col-span-3">
           <!-- Stamp tab (preserved with v-show) -->
           <div v-show="activeTab === 'stamp'" class="space-y-6">
             <HeroTerminal
@@ -297,8 +343,8 @@ function handleWalletClick() {
           </div>
         </div>
 
-        <!-- Sidebar (1/3) -->
-        <div class="space-y-6">
+        <!-- Sidebar (2/5) -->
+        <div class="space-y-6 lg:col-span-2">
           <LiveFeed />
         </div>
       </div>
diff --git a/packages/sdk/src/sdk.ts b/packages/sdk/src/sdk.ts
index 54975b0..30485f2 100644
--- a/packages/sdk/src/sdk.ts
+++ b/packages/sdk/src/sdk.ts
@@ -63,8 +63,8 @@ export const WELL_KNOWN_CHAINS: Record<number, { chainId: string; chainName: str
   1: { chainId: '0x1', chainName: 'Ethereum Mainnet' },
   17000: { chainId: '0x4268', chainName: 'Holesky' },
   11155111: { chainId: '0xaa36a7', chainName: 'Sepolia' },
-  54352: { chainId: '0xd460', chainName: 'Scroll' },
-  54351: { chainId: '0xd45f', chainName: 'Scroll Sepolia' },
+  534352: { chainId: '0x82750', chainName: 'Scroll' },
+  534351: { chainId: '0x8274f', chainName: 'Scroll Sepolia' },
 }
 
 export const DEFAULT_CALENDARS = [
@@ -137,8 +137,8 @@ export default class SDK {
           new JsonRpcProvider('https://0xrpc.io/sep'),
           new JsonRpcProvider('https://rpc.sepolia.org'),
         ]),
-        54352: new JsonRpcProvider('https://rpc.scroll.io'),
-        54351: new JsonRpcProvider('https://sepolia-rpc.scroll.io'),
+        534352: new JsonRpcProvider('https://rpc.scroll.io'),
+        534351: new JsonRpcProvider('https://sepolia-rpc.scroll.io'),
       },
       web3Provider = null,
       timeout = 10000,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4b49d17..1641d6e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,6 +50,9 @@ importers:
       ethers:
         specifier: ^6.16.0
         version: 6.16.0
+      jszip:
+        specifier: ^3.10.1
+        version: 3.10.1
       lucide-vue-next:
         specifier: ^0.575.0
         version: 0.575.0(vue@3.5.26(typescript@5.9.3))
@@ -63,6 +66,9 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.2.1
         version: 4.2.1(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1))
+      '@types/jszip':
+        specifier: ^3.4.1
+        version: 3.4.1
       '@types/node':
         specifier: ^24.10.1
         version: 24.10.4
@@ -792,6 +798,10 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/jszip@3.4.1':
+    resolution: {integrity: sha512-TezXjmf3lj+zQ651r6hPqvSScqBLvyPI9FxdXBqpEwBijNGQ2NXpaFW/7joGzveYkKQUil7iiDHLo6LV71Pc0A==}
+    deprecated: This is a stub types definition. jszip provides its own type definitions, so you do not need this installed.
+
   '@types/node@22.7.5':
     resolution: {integrity: sha512-jML7s2NAzMWc//QSJ1a3prpk78cOPchGvXJsC3C6R6PSMoooztvRVQEz89gmBTBY1SPMaqo5teB4uNHPdetShQ==}
 
@@ -1195,6 +1205,9 @@ packages:
   core-js-compat@3.48.0:
     resolution: {integrity: sha512-OM4cAF3D6VtH/WkLtWvyNC56EZVXsZdU3iqaMG2B4WvYrlqU831pc4UtG5yp0sE9z8Y02wVN7PjW5Zf9Gt0f1Q==}
 
+  core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -1457,6 +1470,9 @@ packages:
     resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
     engines: {node: '>= 4'}
 
+  immediate@3.0.6:
+    resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
+
   import-fresh@3.3.1:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
@@ -1469,6 +1485,9 @@ packages:
     resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
     engines: {node: '>=12'}
 
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
   is-builtin-module@5.0.0:
     resolution: {integrity: sha512-f4RqJKBUe5rQkJ2eJEJBXSticB3hGbN9j0yxxMQFqIW89Jp9WYFtzfTcRlstDKVUTRzSOTLKRfO9vIztenwtxA==}
     engines: {node: '>=18.20'}
@@ -1495,6 +1514,9 @@ packages:
     resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==}
     engines: {node: '>=18'}
 
+  isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
@@ -1520,6 +1542,9 @@ packages:
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
+  jszip@3.10.1:
+    resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -1527,6 +1552,9 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lie@3.3.0:
+    resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
+
   lightningcss-android-arm64@1.31.1:
     resolution: {integrity: sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==}
     engines: {node: '>= 12.0.0'}
@@ -1678,6 +1706,9 @@ packages:
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
+  pako@1.0.11:
+    resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -1762,10 +1793,16 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
+  readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+
   regexp-tree@0.1.27:
     resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
     hasBin: true
@@ -1804,11 +1841,17 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+
   semver@7.7.4:
     resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
     engines: {node: '>=10'}
     hasBin: true
 
+  setimmediate@1.0.5:
+    resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -1842,6 +1885,9 @@ packages:
   std-env@3.10.0:
     resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
 
+  string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+
   strip-indent@4.1.1:
     resolution: {integrity: sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==}
     engines: {node: '>=12'}
@@ -1931,6 +1977,9 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
   vite@7.3.0:
     resolution: {integrity: sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -2525,6 +2574,10 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/jszip@3.4.1':
+    dependencies:
+      jszip: 3.10.1
+
   '@types/node@22.7.5':
     dependencies:
       undici-types: 6.19.8
@@ -2965,6 +3018,8 @@ snapshots:
     dependencies:
       browserslist: 4.28.1
 
+  core-util-is@1.0.3: {}
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -3255,6 +3310,8 @@ snapshots:
 
   ignore@7.0.5: {}
 
+  immediate@3.0.6: {}
+
   import-fresh@3.3.1:
     dependencies:
       parent-module: 1.0.1
@@ -3264,6 +3321,8 @@ snapshots:
 
   indent-string@5.0.0: {}
 
+  inherits@2.0.4: {}
+
   is-builtin-module@5.0.0:
     dependencies:
       builtin-modules: 5.0.0
@@ -3286,6 +3345,8 @@ snapshots:
 
   is-what@5.5.0: {}
 
+  isarray@1.0.0: {}
+
   isexe@2.0.0: {}
 
   jiti@2.6.1: {}
@@ -3302,6 +3363,13 @@ snapshots:
 
   json-stable-stringify-without-jsonify@1.0.1: {}
 
+  jszip@3.10.1:
+    dependencies:
+      lie: 3.3.0
+      pako: 1.0.11
+      readable-stream: 2.3.8
+      setimmediate: 1.0.5
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -3311,6 +3379,10 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lie@3.3.0:
+    dependencies:
+      immediate: 3.0.6
+
   lightningcss-android-arm64@1.31.1:
     optional: true
 
@@ -3424,6 +3496,8 @@ snapshots:
 
   package-json-from-dist@1.0.1: {}
 
+  pako@1.0.11: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -3488,8 +3562,20 @@ snapshots:
 
   prettier@3.8.1: {}
 
+  process-nextick-args@2.0.1: {}
+
   punycode@2.3.1: {}
 
+  readable-stream@2.3.8:
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+
   regexp-tree@0.1.27: {}
 
   regjsparser@0.13.0:
@@ -3572,8 +3658,12 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.59.0
       fsevents: 2.3.3
 
+  safe-buffer@5.1.2: {}
+
   semver@7.7.4: {}
 
+  setimmediate@1.0.5: {}
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
@@ -3599,6 +3689,10 @@ snapshots:
 
   std-env@3.10.0: {}
 
+  string_decoder@1.1.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
   strip-indent@4.1.1: {}
 
   strip-json-comments@3.1.1: {}
@@ -3692,6 +3786,8 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  util-deprecate@1.0.2: {}
+
   vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.31.1):
     dependencies:
       esbuild: 0.27.2

From 521d32b7ea0e111e5ea9818d342df04c5ce7615e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Feb 2026 07:39:46 +0000
Subject: [PATCH 11/21] fix: batch stamp download, correct filenames with dir
 structure, download button in Complete step

- Don't auto-download pending timestamps on stamp completion
- Manual "Download pending .ots" button inside the Complete step only
  (hidden once phase moves to upgrading/upgraded)
- Batch stamps download as zip preserving directory structure
  (webkitRelativePath used for path-aware filenames)
- Each .ots in zip named after its input file (e.g. mydir/file.txt.ots)
- Upgraded timestamps also download as zip for batch with correct names
- Single file stamps download as individual .ots (same behavior as before)
- Track all file names in stampFileNames array, not single stampFileName
- Remove JSZip/Encoder imports from HomeView (moved to composable)

Co-authored-by: lightsing <15951701+lightsing@users.noreply.github.com>
---
 .../src/components/stamp/StampingWorkflow.vue | 22 +++----
 apps/web/src/composables/useFileDigest.ts     |  2 +-
 apps/web/src/composables/useTimestampSDK.ts   | 57 +++++++++++++------
 apps/web/src/views/HomeView.vue               | 26 +--------
 4 files changed, 52 insertions(+), 55 deletions(-)

diff --git a/apps/web/src/components/stamp/StampingWorkflow.vue b/apps/web/src/components/stamp/StampingWorkflow.vue
index a5387d1..f767c4b 100644
--- a/apps/web/src/components/stamp/StampingWorkflow.vue
+++ b/apps/web/src/components/stamp/StampingWorkflow.vue
@@ -55,12 +55,6 @@ const phaseOrder: StampPhase[] = [
 
 const currentIndex = computed(() => phaseOrder.indexOf(props.phase))
 
-const showDownloadButton = computed(() => {
-  const ci = currentIndex.value
-  const completeIndex = phaseOrder.indexOf('complete')
-  return ci >= completeIndex && props.phase !== 'error'
-})
-
 function getStepStatus(stepId: StampPhase) {
   if (props.phase === 'error') return 'error'
   const stepIndex = phaseOrder.indexOf(stepId)
@@ -140,6 +134,14 @@ function getStepDescription(step: WorkflowStep): string {
             {{ step.label }}
           </div>
           <div class="font-mono text-[11px] text-white/30">{{ getStepDescription(step) }}</div>
+
+          <!-- Download button inside the Complete step only when phase is 'complete' -->
+          <div v-if="step.id === 'complete' && phase === 'complete'" class="mt-2">
+            <BaseButton variant="secondary" @click="emit('download')">
+              <Download class="h-3.5 w-3.5" />
+              Download pending .ots
+            </BaseButton>
+          </div>
         </div>
 
         <!-- Active indicator -->
@@ -150,14 +152,6 @@ function getStepDescription(step: WorkflowStep): string {
       </div>
     </div>
 
-    <!-- Download button (shown when complete or later) -->
-    <div v-if="showDownloadButton" class="mt-4">
-      <BaseButton variant="secondary" @click="emit('download')">
-        <Download class="h-3.5 w-3.5" />
-        Download .ots
-      </BaseButton>
-    </div>
-
     <!-- Error message -->
     <div
       v-if="phase === 'error' && error"
diff --git a/apps/web/src/composables/useFileDigest.ts b/apps/web/src/composables/useFileDigest.ts
index f035c98..6271da5 100644
--- a/apps/web/src/composables/useFileDigest.ts
+++ b/apps/web/src/composables/useFileDigest.ts
@@ -67,7 +67,7 @@ export function useFileDigest() {
       const digestHex = hexlify(digestBytes)
 
       const digestResult: FileDigestResult = {
-        fileName: file.name,
+        fileName: file.webkitRelativePath || file.name,
         fileSize: file.size,
         algorithm,
         digest: digestHex,
diff --git a/apps/web/src/composables/useTimestampSDK.ts b/apps/web/src/composables/useTimestampSDK.ts
index 5ccb58f..6c91230 100644
--- a/apps/web/src/composables/useTimestampSDK.ts
+++ b/apps/web/src/composables/useTimestampSDK.ts
@@ -14,6 +14,7 @@ import type {
   StampEventCallback,
 } from '@uts/sdk'
 import type { Eip1193Provider } from 'ethers'
+import JSZip from 'jszip'
 
 export type StampPhase =
   | 'idle'
@@ -49,26 +50,42 @@ export function setWeb3Provider(provider: Eip1193Provider | null) {
   sdk.web3Provider = provider
 }
 
-export function downloadOtsFile(stamp: DetachedTimestamp, fileName?: string) {
-  const encoded = Encoder.encodeDetachedTimestamp(stamp)
-  const blob = new Blob([encoded as BlobPart], { type: 'application/octet-stream' })
+function triggerDownload(blob: Blob, fileName: string) {
   const url = URL.createObjectURL(blob)
   const a = document.createElement('a')
   a.href = url
-  a.download = fileName ? `${fileName}.ots` : 'timestamp.ots'
+  a.download = fileName
   document.body.appendChild(a)
   a.click()
   document.body.removeChild(a)
   URL.revokeObjectURL(url)
 }
 
+export function downloadOtsFile(stamp: DetachedTimestamp, fileName?: string) {
+  const encoded = Encoder.encodeDetachedTimestamp(stamp)
+  const blob = new Blob([encoded as BlobPart], { type: 'application/octet-stream' })
+  triggerDownload(blob, fileName ? `${fileName}.ots` : 'timestamp.ots')
+}
+
+async function downloadStampsAsZip(stamps: DetachedTimestamp[], names: string[]) {
+  const zip = new JSZip()
+  for (let i = 0; i < stamps.length; i++) {
+    const fileName = names[i] ?? `file-${i}`
+    const encoded = Encoder.encodeDetachedTimestamp(stamps[i]!)
+    // Preserve directory structure in zip (fileName may contain path separators)
+    zip.file(`${fileName}.ots`, encoded)
+  }
+  const blob = await zip.generateAsync({ type: 'blob' })
+  triggerDownload(blob, 'timestamps.zip')
+}
+
 export function useTimestampSDK() {
   const sdk = getSDK()
 
   const stampPhase = ref<StampPhase>('idle')
   const stampError = ref<string | null>(null)
   const stampResult = shallowRef<DetachedTimestamp[] | null>(null)
-  const stampFileName = ref<string | undefined>(undefined)
+  const stampFileNames = ref<string[]>([])
   const broadcastProgress = ref('')
   const upgradeResults = shallowRef<UpgradeResult[] | null>(null)
 
@@ -79,11 +96,11 @@ export function useTimestampSDK() {
 
   let upgradeTimer: ReturnType<typeof setInterval> | null = null
 
-  async function stamp(digests: DigestHeader[], fileName?: string): Promise<DetachedTimestamp[]> {
+  async function stamp(digests: DigestHeader[], fileNames?: string[]): Promise<DetachedTimestamp[]> {
     stampPhase.value = 'generating-nonce'
     stampError.value = null
     stampResult.value = null
-    stampFileName.value = fileName
+    stampFileNames.value = fileNames ?? []
     broadcastProgress.value = ''
     upgradeResults.value = null
 
@@ -117,7 +134,7 @@ export function useTimestampSDK() {
       stampPhase.value = 'complete'
       stampResult.value = results
 
-      // Start polling for upgrade
+      // Start polling for upgrade (no auto-download — user uses the download button)
       startUpgradePolling(results)
 
       return results
@@ -128,10 +145,15 @@ export function useTimestampSDK() {
     }
   }
 
-  function downloadPendingStamp() {
+  async function downloadPendingStamp() {
     if (!stampResult.value) return
-    for (const result of stampResult.value) {
-      downloadOtsFile(result, stampFileName.value)
+    const results = stampResult.value
+    const names = stampFileNames.value
+
+    if (results.length === 1) {
+      downloadOtsFile(results[0]!, names[0])
+    } else if (results.length > 1) {
+      await downloadStampsAsZip(results, names)
     }
   }
 
@@ -155,9 +177,12 @@ export function useTimestampSDK() {
         const hasUpgraded = allResults.some((r) => r.status === UpgradeStatus.Upgraded)
         if (hasUpgraded) {
           stampPhase.value = 'upgraded'
-          // Download upgraded file with original filename
-          for (const s of stamps) {
-            downloadOtsFile(s, stampFileName.value)
+          // Auto-download upgraded timestamps with correct per-file names
+          const names = stampFileNames.value
+          if (stamps.length === 1) {
+            downloadOtsFile(stamps[0]!, names[0])
+          } else if (stamps.length > 1) {
+            await downloadStampsAsZip(stamps, names)
           }
           stopUpgradePolling()
         } else if (attempts >= maxAttempts) {
@@ -215,7 +240,7 @@ export function useTimestampSDK() {
     stampPhase.value = 'idle'
     stampError.value = null
     stampResult.value = null
-    stampFileName.value = undefined
+    stampFileNames.value = []
     broadcastProgress.value = ''
     upgradeResults.value = null
     stopUpgradePolling()
@@ -232,7 +257,7 @@ export function useTimestampSDK() {
     stampPhase,
     stampError,
     stampResult,
-    stampFileName,
+    stampFileNames,
     broadcastProgress,
     upgradeResults,
     stamp,
diff --git a/apps/web/src/views/HomeView.vue b/apps/web/src/views/HomeView.vue
index 9108938..0ec95bf 100644
--- a/apps/web/src/views/HomeView.vue
+++ b/apps/web/src/views/HomeView.vue
@@ -10,9 +10,7 @@ import BaseButton from '@/components/base/BaseButton.vue'
 import { useTimestampSDK, setWeb3Provider, getSDK } from '@/composables/useTimestampSDK'
 import { useWallet } from '@/composables/useWallet'
 import type { FileDigestResult } from '@/composables/useFileDigest'
-import { Encoder } from '@uts/sdk'
 import { useAppStore } from '@/stores/app'
-import JSZip from 'jszip'
 
 const store = useAppStore()
 const { stampPhase, stampError, broadcastProgress, stamp, downloadPendingStamp } = useTimestampSDK()
@@ -57,32 +55,12 @@ async function handleStampFromDigest(digests: FileDigestResult[]) {
   // Apply internal hash algorithm setting
   getSDK().hashAlgorithm = store.internalHashAlgo
 
-  const isBatch = digests.length > 1
-  const firstFileName = digests[0]?.fileName
+  const fileNames = digests.map((d) => d.fileName)
 
   try {
     const headers = digests.map((d) => d.header)
-    const results = await stamp(headers, firstFileName)
+    const results = await stamp(headers, fileNames)
     for (const r of results) store.addStamp(r)
-
-    // For batch (directory): download all as zip
-    if (isBatch && results.length > 0) {
-      const zip = new JSZip()
-      for (let i = 0; i < results.length; i++) {
-        const fileName = digests[i]?.fileName ?? `file-${i}`
-        const encoded = Encoder.encodeDetachedTimestamp(results[i]!)
-        zip.file(`${fileName}.ots`, encoded)
-      }
-      const blob = await zip.generateAsync({ type: 'blob' })
-      const url = URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = url
-      a.download = 'timestamps.zip'
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
-      URL.revokeObjectURL(url)
-    }
   } catch {
     // error is tracked in stampError
   }

From 319edf878f3bfe302f0e25c85ae4ce00aab113c2 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Feb 2026 08:05:29 +0000
Subject: [PATCH 12/21] feat: download button fix, fake progress, verify
 original file, attestation details in proof path, upgrade tab, Scroll logo,
 testnet warnings, clickable chain panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

StampingWorkflow: Download pending .ots button visible during both
'complete' and 'upgrading' phases (hidden once upgraded or idle).

useFileDigest: Fake progress bar estimates time based on file size
(~200 MB/s) instead of real streaming progress. Added digestFiles()
batch method.

VerificationResult: Optional original file upload to verify digest
matches the .ots header. Shows match/mismatch status with icons.

MerkleTreeViz: ATTESTATION steps now collapsible with full details
(type, chain, block height, contract, tx hash with etherscan links).

AttestationDetail/MerkleTreeViz/LiveFeed: Warning flag (⚠) for
testnet or unknown network attestations. Mainnet = Ethereum (1) and
Scroll (534352). All others show orange warning banner.

LiveFeed: Added txHash to feed entries from log.transactionHash.
Scroll logo shown for Scroll chain entries.

AttestationDetail: Scroll logo in header and expanded type row.

UpgradePanel: New tab for manual .ots upgrade with verify, upgrade
now button, and download upgraded result.

HomeView: Clickable "X/Y chains" in header opens dropdown showing
each chain with name, ID, status, latency, Scroll logo. Add custom
chain by ID, remove individual chains, reset to defaults. Persisted
to localStorage.

stores/app: addChain/removeChain/resetChains with localStorage
persistence. Public RPC fallbacks for common chains.

Co-authored-by: lightsing <15951701+lightsing@users.noreply.github.com>
---
 apps/web/src/assets/Scroll_Logomark.svg       |   5 +
 apps/web/src/components/feed/LiveFeed.vue     |  57 ++++-
 .../src/components/stamp/StampingWorkflow.vue |   4 +-
 .../src/components/upgrade/UpgradePanel.vue   | 179 ++++++++++++++++
 .../components/verify/AttestationDetail.vue   |  40 +++-
 .../src/components/verify/MerkleTreeViz.vue   | 198 +++++++++++++++++-
 .../components/verify/VerificationResult.vue  |  69 +++++-
 apps/web/src/composables/useFileDigest.ts     | 113 ++++++++--
 apps/web/src/composables/useWebSocketFeed.ts  |   3 +
 apps/web/src/stores/app.ts                    |  66 +++++-
 apps/web/src/views/HomeView.vue               | 170 +++++++++++++--
 11 files changed, 841 insertions(+), 63 deletions(-)
 create mode 100644 apps/web/src/assets/Scroll_Logomark.svg
 create mode 100644 apps/web/src/components/upgrade/UpgradePanel.vue

diff --git a/apps/web/src/assets/Scroll_Logomark.svg b/apps/web/src/assets/Scroll_Logomark.svg
new file mode 100644
index 0000000..010b7bb
--- /dev/null
+++ b/apps/web/src/assets/Scroll_Logomark.svg
@@ -0,0 +1,5 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="50" cy="50" r="50" fill="#FFEEDA"/>
+  <path d="M70.7348 62.5765C70.7348 65.6498 69.4698 68.0748 67.6131 69.8265C65.3081 72.0165 62.2348 73.0815 59.0464 73.0815H34.3564V67.8448H59.2764C61.0164 67.8448 62.6414 67.1515 63.8414 65.9515C65.0414 64.7515 65.7348 63.2415 65.7348 61.3848C65.7348 59.6448 65.0414 58.0198 63.8414 56.8198C62.6414 55.6198 61.1314 54.9265 59.2764 54.9265H44.2898C41.1014 54.9265 38.0281 53.8615 35.7231 51.6715C33.8664 49.9198 32.6014 47.4948 32.6014 44.4215C32.6014 41.3481 33.8664 38.9231 35.7231 37.1715C38.0281 34.9815 41.1014 33.9165 44.2898 33.9165H67.6131V39.1531H44.0598C42.3198 39.1531 40.6948 39.8465 39.4948 41.0465C38.2948 42.2465 37.6014 43.7565 37.6014 45.6131C37.6014 47.3531 38.2948 48.9781 39.4948 50.1781C40.6948 51.3781 42.2048 52.0715 44.0598 52.0715H59.0464C62.2348 52.0715 65.3081 53.1365 67.6131 55.3265C69.4698 56.9615 70.7348 59.5015 70.7348 62.5765Z" fill="#101010"/>
+  <path d="M67.6131 73.0815V78.3181C67.6131 80.8581 66.1031 82.9448 63.9131 83.9898C63.1048 84.3398 62.1798 84.5748 61.2548 84.5748C59.5148 84.5748 57.8898 83.8815 56.6898 82.6815L49.5264 75.5181L53.2564 71.7881L60.4198 78.9515C60.6548 79.1865 60.8898 79.3015 61.2398 79.3015C61.9331 79.3015 62.3981 78.7998 62.3981 78.2248V73.0815H67.6131Z" fill="#101010"/>
+</svg>
diff --git a/apps/web/src/components/feed/LiveFeed.vue b/apps/web/src/components/feed/LiveFeed.vue
index f4708bc..146846f 100644
--- a/apps/web/src/components/feed/LiveFeed.vue
+++ b/apps/web/src/components/feed/LiveFeed.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { formatDistanceToNow } from 'date-fns'
-import { Activity, Globe, Clock, ChevronDown, ChevronUp, ExternalLink } from 'lucide-vue-next'
+import { Activity, Globe, Clock, ChevronDown, ChevronUp, ExternalLink, AlertTriangle } from 'lucide-vue-next'
 import GlassCard from '@/components/base/GlassCard.vue'
 import { useWebSocketFeed } from '@/composables/useWebSocketFeed'
+import ScrollLogo from '@/assets/Scroll_Logomark.svg'
+
+const SCROLL_CHAIN_IDS = new Set([534352, 534351])
 
 const { entries, isConnected, connect } = useWebSocketFeed()
 
@@ -33,6 +36,12 @@ const ETHERSCAN_URLS: Record<number, string> = {
   534351: 'https://sepolia.scrollscan.com',
 }
 
+const MAINNET_CHAIN_IDS = new Set([1, 534352])
+
+function isTestnetOrUnknown(chainId: number): boolean {
+  return !MAINNET_CHAIN_IDS.has(chainId)
+}
+
 function getBlockUrl(chainId: number, height: number): string | null {
   const base = ETHERSCAN_URLS[chainId]
   if (!base) return null
@@ -44,6 +53,12 @@ function getAddressUrl(chainId: number, address: string): string | null {
   if (!base) return null
   return `${base}/address/${address}`
 }
+
+function getTxUrl(chainId: number, txHash: string): string | null {
+  const base = ETHERSCAN_URLS[chainId]
+  if (!base) return null
+  return `${base}/tx/${txHash}`
+}
 </script>
 
 <template>
@@ -76,7 +91,8 @@ function getAddressUrl(chainId: number, address: string): string | null {
             class="flex w-full items-center gap-3 px-3 py-2 text-left"
             @click="toggleEntry(entry.id)"
           >
-            <Globe class="h-4 w-4 shrink-0 text-neon-purple" />
+            <img v-if="SCROLL_CHAIN_IDS.has(entry.chainId)" :src="ScrollLogo" alt="Scroll" class="h-4 w-4 shrink-0" />
+            <Globe v-else class="h-4 w-4 shrink-0 text-neon-purple" />
             <div class="min-w-0 flex-1">
               <div class="font-mono text-xs text-neon-purple">
                 {{ truncate(entry.hash) }}
@@ -84,6 +100,11 @@ function getAddressUrl(chainId: number, address: string): string | null {
               <div class="flex items-center gap-2 font-mono text-[10px] text-white/30">
                 <span>{{ entry.chain }}</span>
                 <span>#{{ entry.blockHeight }}</span>
+                <AlertTriangle
+                  v-if="isTestnetOrUnknown(entry.chainId)"
+                  class="h-3 w-3 text-pending"
+                  :title="ETHERSCAN_URLS[entry.chainId] ? 'Testnet attestation' : 'Unknown network'"
+                />
               </div>
             </div>
             <div class="flex shrink-0 items-center gap-1">
@@ -104,7 +125,14 @@ function getAddressUrl(chainId: number, address: string): string | null {
                 </div>
                 <div class="flex items-center justify-between">
                   <span class="text-white/30">Chain</span>
-                  <span class="text-white/50">{{ entry.chain }} ({{ entry.chainId }})</span>
+                  <span class="flex items-center gap-1">
+                    <span class="text-white/50">{{ entry.chain }} ({{ entry.chainId }})</span>
+                    <AlertTriangle
+                      v-if="isTestnetOrUnknown(entry.chainId)"
+                      class="h-2.5 w-2.5 text-pending"
+                      :title="ETHERSCAN_URLS[entry.chainId] ? 'Testnet' : 'Unknown network'"
+                    />
+                  </span>
                 </div>
                 <div class="flex items-center justify-between">
                   <span class="text-white/30">Block</span>
@@ -136,6 +164,29 @@ function getAddressUrl(chainId: number, address: string): string | null {
                     </a>
                   </span>
                 </div>
+                <div v-if="entry.txHash" class="flex items-center justify-between">
+                  <span class="text-white/30">Tx Hash</span>
+                  <span class="flex items-center gap-1">
+                    <span class="text-white/50">{{ truncate(entry.txHash) }}</span>
+                    <a
+                      v-if="getTxUrl(entry.chainId, entry.txHash)"
+                      :href="getTxUrl(entry.chainId, entry.txHash)!"
+                      target="_blank"
+                      rel="noopener"
+                      class="text-neon-cyan hover:text-neon-cyan/80"
+                    >
+                      <ExternalLink class="h-2.5 w-2.5" />
+                    </a>
+                  </span>
+                </div>
+                <!-- Warning for testnet / unknown network -->
+                <div
+                  v-if="isTestnetOrUnknown(entry.chainId)"
+                  class="mt-1 flex items-center gap-1.5 rounded bg-pending/10 px-2 py-1 text-pending"
+                >
+                  <AlertTriangle class="h-3 w-3 shrink-0" />
+                  <span>{{ ETHERSCAN_URLS[entry.chainId] ? 'Testnet attestation — not suitable for production use' : 'Unknown network — cannot verify on-chain' }}</span>
+                </div>
               </div>
             </div>
           </Transition>
diff --git a/apps/web/src/components/stamp/StampingWorkflow.vue b/apps/web/src/components/stamp/StampingWorkflow.vue
index f767c4b..ad5374c 100644
--- a/apps/web/src/components/stamp/StampingWorkflow.vue
+++ b/apps/web/src/components/stamp/StampingWorkflow.vue
@@ -135,8 +135,8 @@ function getStepDescription(step: WorkflowStep): string {
           </div>
           <div class="font-mono text-[11px] text-white/30">{{ getStepDescription(step) }}</div>
 
-          <!-- Download button inside the Complete step only when phase is 'complete' -->
-          <div v-if="step.id === 'complete' && phase === 'complete'" class="mt-2">
+          <!-- Download button inside the Complete step — visible while pending (complete or upgrading), hidden once upgraded -->
+          <div v-if="step.id === 'complete' && (phase === 'complete' || phase === 'upgrading')" class="mt-2">
             <BaseButton variant="secondary" @click="emit('download')">
               <Download class="h-3.5 w-3.5" />
               Download pending .ots
diff --git a/apps/web/src/components/upgrade/UpgradePanel.vue b/apps/web/src/components/upgrade/UpgradePanel.vue
new file mode 100644
index 0000000..8391139
--- /dev/null
+++ b/apps/web/src/components/upgrade/UpgradePanel.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { hexlify } from 'ethers/utils'
+import { FileUp, RefreshCw, Download, CheckCircle2, AlertTriangle } from 'lucide-vue-next'
+import GlassCard from '@/components/base/GlassCard.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
+import AttestationDetail from '@/components/verify/AttestationDetail.vue'
+import { useTimestampSDK, downloadOtsFile } from '@/composables/useTimestampSDK'
+import { UpgradeStatus } from '@uts/sdk'
+import type { DetachedTimestamp, UpgradeResult } from '@uts/sdk'
+import { useAppStore } from '@/stores/app'
+
+const store = useAppStore()
+const { upgrade, decodeOtsFile, verify, verifyAttestations } = useTimestampSDK()
+
+const otsFileRef = ref<HTMLInputElement>()
+const loadedTimestamp = ref<DetachedTimestamp | null>(null)
+const originalFileName = ref('')
+const isUpgrading = ref(false)
+const upgradeError = ref<string | null>(null)
+const upgradeResults = ref<UpgradeResult[] | null>(null)
+const hasUpgraded = ref(false)
+
+async function handleOtsUpload(event: Event) {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (!file) return
+
+  originalFileName.value = file.name.replace(/\.ots$/, '')
+  upgradeError.value = null
+  upgradeResults.value = null
+  hasUpgraded.value = false
+
+  const data = new Uint8Array(await file.arrayBuffer())
+  try {
+    const decoded = decodeOtsFile(data)
+    loadedTimestamp.value = decoded
+    await verify(decoded)
+  } catch (e) {
+    upgradeError.value = e instanceof Error ? e.message : 'Failed to decode .ots file'
+  }
+}
+
+async function handleUpgrade() {
+  if (!loadedTimestamp.value) return
+  isUpgrading.value = true
+  upgradeError.value = null
+  upgradeResults.value = null
+
+  try {
+    const results = await upgrade(loadedTimestamp.value, store.keepPending)
+    upgradeResults.value = results
+    if (results.some((r) => r.status === UpgradeStatus.Upgraded)) {
+      hasUpgraded.value = true
+    }
+  } catch (e) {
+    upgradeError.value = e instanceof Error ? e.message : 'Upgrade failed'
+  } finally {
+    isUpgrading.value = false
+  }
+}
+
+function handleDownload() {
+  if (!loadedTimestamp.value) return
+  downloadOtsFile(loadedTimestamp.value, originalFileName.value || undefined)
+}
+
+function handleReset() {
+  loadedTimestamp.value = null
+  originalFileName.value = ''
+  isUpgrading.value = false
+  upgradeError.value = null
+  upgradeResults.value = null
+  hasUpgraded.value = false
+  if (otsFileRef.value) otsFileRef.value.value = ''
+}
+</script>
+
+<template>
+  <GlassCard glow="purple">
+    <div class="mb-4 flex items-center gap-2">
+      <RefreshCw class="h-4 w-4 text-neon-purple" />
+      <h3 class="font-heading text-sm font-semibold text-white/80">Manual Upgrade</h3>
+    </div>
+
+    <!-- Upload .ots file -->
+    <div v-if="!loadedTimestamp" class="space-y-4">
+      <p class="font-mono text-xs text-white/40">
+        &gt; Upload a pending <span class="text-neon-purple">.ots</span> file to upgrade it with on-chain attestations
+      </p>
+      <BaseButton variant="secondary" @click="otsFileRef?.click()">
+        <FileUp class="h-4 w-4" />
+        Upload .ots
+      </BaseButton>
+      <input
+        ref="otsFileRef"
+        type="file"
+        accept=".ots"
+        class="hidden"
+        @change="handleOtsUpload"
+      />
+    </div>
+
+    <!-- Loaded file -->
+    <div v-else class="space-y-5">
+      <!-- Digest info -->
+      <div class="space-y-2 rounded-lg bg-surface/60 p-4">
+        <div class="font-mono text-[10px] uppercase tracking-widest text-white/30">
+          Digest ({{ loadedTimestamp.header.kind }})
+        </div>
+        <div class="break-all font-mono text-xs text-neon-cyan">
+          {{ hexlify(loadedTimestamp.header.digest as Uint8Array) }}
+        </div>
+      </div>
+
+      <!-- Current attestations -->
+      <div v-if="verifyAttestations.length > 0" class="space-y-2">
+        <div class="font-mono text-[10px] uppercase tracking-widest text-white/30">
+          Current Attestations ({{ verifyAttestations.length }})
+        </div>
+        <AttestationDetail
+          v-for="(att, i) in verifyAttestations"
+          :key="i"
+          :attestation="att"
+        />
+      </div>
+
+      <!-- Upgrade results -->
+      <div v-if="upgradeResults" class="space-y-2">
+        <div class="font-mono text-[10px] uppercase tracking-widest text-white/30">
+          Upgrade Results
+        </div>
+        <div
+          v-for="(result, i) in upgradeResults"
+          :key="i"
+          class="flex items-center gap-2 rounded-lg border border-glass-border bg-surface/40 px-3 py-2"
+        >
+          <CheckCircle2
+            v-if="result.status === UpgradeStatus.Upgraded"
+            class="h-4 w-4 text-valid"
+          />
+          <RefreshCw
+            v-else-if="result.status === UpgradeStatus.Pending"
+            class="h-4 w-4 text-pending"
+          />
+          <AlertTriangle v-else class="h-4 w-4 text-invalid" />
+          <span class="font-mono text-xs text-white/60">
+            {{ result.original.url }} — {{ result.status }}
+          </span>
+        </div>
+      </div>
+
+      <!-- Actions -->
+      <div class="flex flex-wrap gap-2">
+        <BaseButton variant="primary" :disabled="isUpgrading" @click="handleUpgrade">
+          <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': isUpgrading }" />
+          {{ isUpgrading ? 'Upgrading...' : 'Upgrade Now' }}
+        </BaseButton>
+
+        <BaseButton v-if="hasUpgraded" variant="secondary" @click="handleDownload">
+          <Download class="h-4 w-4" />
+          Download Upgraded .ots
+        </BaseButton>
+
+        <BaseButton variant="secondary" @click="handleReset">
+          Reset
+        </BaseButton>
+      </div>
+
+      <!-- Error -->
+      <div
+        v-if="upgradeError"
+        class="rounded-lg border border-invalid/20 bg-invalid/5 px-4 py-3 font-mono text-xs text-invalid"
+      >
+        &gt; {{ upgradeError }}
+      </div>
+    </div>
+  </GlassCard>
+</template>
diff --git a/apps/web/src/components/verify/AttestationDetail.vue b/apps/web/src/components/verify/AttestationDetail.vue
index 8ab22d4..df2b3e3 100644
--- a/apps/web/src/components/verify/AttestationDetail.vue
+++ b/apps/web/src/components/verify/AttestationDetail.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { ChevronDown, ChevronUp, ExternalLink } from 'lucide-vue-next'
+import { ChevronDown, ChevronUp, ExternalLink, AlertTriangle } from 'lucide-vue-next'
 import StatusBadge from '@/components/base/StatusBadge.vue'
 import type { AttestationStatus } from '@uts/sdk'
 import { WELL_KNOWN_CHAINS } from '@uts/sdk'
 import { hexlify } from 'ethers/utils'
+import ScrollLogo from '@/assets/Scroll_Logomark.svg'
+
+const SCROLL_CHAIN_IDS = new Set([534352, 534351])
 
 const props = defineProps<{
   attestation: AttestationStatus
@@ -13,6 +16,18 @@ const props = defineProps<{
 
 const expanded = ref(props.defaultExpanded ?? false)
 
+const MAINNET_CHAIN_IDS = new Set([1, 534352])
+
+function isTestnetOrUnknown(chainId: number): boolean {
+  return !MAINNET_CHAIN_IDS.has(chainId)
+}
+
+function getNetworkWarning(chainId: number): string | null {
+  if (MAINNET_CHAIN_IDS.has(chainId)) return null
+  if (ETHERSCAN_URLS[chainId]) return 'Testnet attestation — not suitable for production use'
+  return 'Unknown network — cannot verify on-chain'
+}
+
 const ETHERSCAN_URLS: Record<number, string> = {
   1: 'https://etherscan.io',
   17000: 'https://holesky.etherscan.io',
@@ -87,13 +102,21 @@ function formatTimestamp(ts: bigint | number): string {
           Bitcoin block #{{ attestation.attestation.height }}
         </template>
         <template v-else-if="attestation.attestation.kind === 'ethereum-uts'">
-          {{ getChainName(attestation.attestation.chain) }} block #{{ attestation.attestation.height }}
+          <span class="inline-flex items-center gap-1">
+            <img v-if="SCROLL_CHAIN_IDS.has(attestation.attestation.chain)" :src="ScrollLogo" alt="Scroll" class="inline h-3.5 w-3.5" />
+            {{ getChainName(attestation.attestation.chain) }} block #{{ attestation.attestation.height }}
+          </span>
         </template>
         <template v-else-if="attestation.attestation.kind === 'pending'">
           Pending → {{ attestation.attestation.url }}
         </template>
         <template v-else>Unknown attestation</template>
       </span>
+      <AlertTriangle
+        v-if="attestation.attestation.kind === 'ethereum-uts' && isTestnetOrUnknown(attestation.attestation.chain)"
+        class="h-3.5 w-3.5 shrink-0 text-pending"
+        :title="getNetworkWarning(attestation.attestation.chain) ?? ''"
+      />
       <component :is="expanded ? ChevronUp : ChevronDown" class="h-3.5 w-3.5 text-white/30" />
     </button>
 
@@ -125,7 +148,10 @@ function formatTimestamp(ts: bigint | number): string {
           <div class="space-y-1.5 font-mono text-[11px]">
             <div class="flex items-center justify-between">
               <span class="text-white/30">Type</span>
-              <span class="text-neon-purple">Ethereum UTS</span>
+              <span class="flex items-center gap-1 text-neon-purple">
+                <img v-if="SCROLL_CHAIN_IDS.has(attestation.attestation.chain)" :src="ScrollLogo" alt="Scroll" class="h-3.5 w-3.5" />
+                Ethereum UTS
+              </span>
             </div>
             <div class="flex items-center justify-between">
               <span class="text-white/30">Chain</span>
@@ -203,6 +229,14 @@ function formatTimestamp(ts: bigint | number): string {
                 </span>
               </div>
             </template>
+            <!-- Testnet / unknown network warning -->
+            <div
+              v-if="isTestnetOrUnknown(attestation.attestation.chain)"
+              class="mt-2 flex items-center gap-1.5 rounded bg-pending/10 px-2 py-1.5 font-mono text-[10px] text-pending"
+            >
+              <AlertTriangle class="h-3 w-3 shrink-0" />
+              <span>{{ getNetworkWarning(attestation.attestation.chain) }}</span>
+            </div>
           </div>
         </template>
 
diff --git a/apps/web/src/components/verify/MerkleTreeViz.vue b/apps/web/src/components/verify/MerkleTreeViz.vue
index aac011b..c42a816 100644
--- a/apps/web/src/components/verify/MerkleTreeViz.vue
+++ b/apps/web/src/components/verify/MerkleTreeViz.vue
@@ -1,13 +1,75 @@
 <script setup lang="ts">
-import type { Step } from '@uts/sdk'
+import { ref } from 'vue'
+import type { Step, Attestation } from '@uts/sdk'
 import { hexlify } from 'ethers/utils'
-import { ChevronRight, GitBranch } from 'lucide-vue-next'
+import { ChevronRight, ChevronDown, GitBranch, ExternalLink, AlertTriangle } from 'lucide-vue-next'
+import { WELL_KNOWN_CHAINS } from '@uts/sdk'
+import ScrollLogo from '@/assets/Scroll_Logomark.svg'
+
+const SCROLL_CHAIN_IDS = new Set([534352, 534351])
 
 const props = defineProps<{
   steps: Step[]
   depth?: number
 }>()
 
+const expandedAttestations = ref<Set<number>>(new Set())
+
+function toggleAttestation(index: number) {
+  if (expandedAttestations.value.has(index)) {
+    expandedAttestations.value.delete(index)
+  } else {
+    expandedAttestations.value.add(index)
+  }
+}
+
+const ETHERSCAN_URLS: Record<number, string> = {
+  1: 'https://etherscan.io',
+  17000: 'https://holesky.etherscan.io',
+  11155111: 'https://sepolia.etherscan.io',
+  534352: 'https://scrollscan.com',
+  534351: 'https://sepolia.scrollscan.com',
+}
+
+const CHAIN_NAMES: Record<number, string> = {
+  1: 'Ethereum',
+  17000: 'Holesky',
+  11155111: 'Sepolia',
+  534352: 'Scroll',
+  534351: 'Scroll Sepolia',
+}
+
+function getChainName(chainId: number): string {
+  return CHAIN_NAMES[chainId] ?? WELL_KNOWN_CHAINS[chainId]?.chainName ?? `Chain ${chainId}`
+}
+
+function getEtherscanBlockUrl(chainId: number, height: number): string | null {
+  const base = ETHERSCAN_URLS[chainId]
+  return base ? `${base}/block/${height}` : null
+}
+
+function getEtherscanTxUrl(chainId: number, txHash: string): string | null {
+  const base = ETHERSCAN_URLS[chainId]
+  return base ? `${base}/tx/${txHash}` : null
+}
+
+function getEtherscanAddressUrl(chainId: number, address: string): string | null {
+  const base = ETHERSCAN_URLS[chainId]
+  return base ? `${base}/address/${address}` : null
+}
+
+const MAINNET_CHAIN_IDS = new Set([1, 534352])
+
+function isTestnetOrUnknown(chainId: number): boolean {
+  return !MAINNET_CHAIN_IDS.has(chainId)
+}
+
+function getNetworkWarning(chainId: number): string | null {
+  if (MAINNET_CHAIN_IDS.has(chainId)) return null
+  if (ETHERSCAN_URLS[chainId]) return 'Testnet attestation — not suitable for production use'
+  return 'Unknown network — cannot verify on-chain'
+}
+
 function formatOp(step: Step): string {
   switch (step.op) {
     case 'APPEND':
@@ -23,7 +85,7 @@ function formatOp(step: Step): string {
     case 'HEXLIFY':
       return 'HEXLIFY'
     case 'ATTESTATION':
-      return formatAttestation(step)
+      return formatAttestation(step.attestation)
     case 'FORK':
       return `FORK (${step.steps.length} branches)`
     default:
@@ -31,14 +93,12 @@ function formatOp(step: Step): string {
   }
 }
 
-function formatAttestation(step: Step): string {
-  if (step.op !== 'ATTESTATION') return ''
-  const a = step.attestation
+function formatAttestation(a: Attestation): string {
   switch (a.kind) {
     case 'bitcoin':
       return `Bitcoin @ block ${a.height}`
     case 'ethereum-uts':
-      return `Ethereum (chain ${a.chain}) @ block ${a.height}`
+      return `${getChainName(a.chain)} @ block ${a.height}`
     case 'pending':
       return `Pending → ${a.url}`
     default:
@@ -82,9 +142,129 @@ const currentDepth = props.depth ?? 0
       :key="i"
       class="group"
     >
-      <!-- Regular step -->
+      <!-- Attestation step — collapsible with details -->
+      <div v-if="step.op === 'ATTESTATION'">
+        <button
+          class="flex w-full items-center gap-2 rounded px-2 py-1 font-mono text-xs transition-colors hover:bg-white/5 text-left"
+          @click="toggleAttestation(i)"
+        >
+          <component :is="expandedAttestations.has(i) ? ChevronDown : ChevronRight" class="h-3 w-3 text-white/20" />
+          <span :class="getOpColor(step)">{{ formatOp(step) }}</span>
+          <AlertTriangle
+            v-if="step.attestation.kind === 'ethereum-uts' && isTestnetOrUnknown(step.attestation.chain)"
+            class="h-3 w-3 text-pending"
+            :title="getNetworkWarning(step.attestation.chain) ?? ''"
+          />
+        </button>
+
+        <Transition name="fade">
+          <div v-if="expandedAttestations.has(i)" class="ml-5 mt-1 rounded-lg border border-glass-border/50 bg-surface/30 px-3 py-2">
+            <!-- Bitcoin attestation details -->
+            <template v-if="step.attestation.kind === 'bitcoin'">
+              <div class="space-y-1 font-mono text-[10px]">
+                <div class="flex items-center justify-between">
+                  <span class="text-white/30">Type</span>
+                  <span class="text-pending">Bitcoin</span>
+                </div>
+                <div class="flex items-center justify-between">
+                  <span class="text-white/30">Block Height</span>
+                  <span class="text-white/70">{{ step.attestation.height }}</span>
+                </div>
+              </div>
+            </template>
+
+            <!-- Ethereum UTS attestation details -->
+            <template v-else-if="step.attestation.kind === 'ethereum-uts'">
+              <div class="space-y-1 font-mono text-[10px]">
+                <div class="flex items-center justify-between">
+                  <span class="text-white/30">Type</span>
+                  <span class="flex items-center gap-1 text-neon-purple">
+                    <img v-if="SCROLL_CHAIN_IDS.has(step.attestation.chain)" :src="ScrollLogo" alt="Scroll" class="h-3 w-3" />
+                    Ethereum UTS
+                  </span>
+                </div>
+                <div class="flex items-center justify-between">
+                  <span class="text-white/30">Chain</span>
+                  <span class="text-white/70">{{ getChainName(step.attestation.chain) }} ({{ step.attestation.chain }})</span>
+                </div>
+                <div class="flex items-center justify-between">
+                  <span class="text-white/30">Block Height</span>
+                  <span class="flex items-center gap-1">
+                    <span class="text-white/70">{{ step.attestation.height }}</span>
+                    <a
+                      v-if="getEtherscanBlockUrl(step.attestation.chain, step.attestation.height)"
+                      :href="getEtherscanBlockUrl(step.attestation.chain, step.attestation.height)!"
+                      target="_blank"
+                      rel="noopener"
+                      class="text-neon-cyan hover:text-neon-cyan/80"
+                    >
+                      <ExternalLink class="h-2.5 w-2.5" />
+                    </a>
+                  </span>
+                </div>
+                <template v-if="step.attestation.metadata">
+                  <div v-if="step.attestation.metadata.contract" class="flex items-center justify-between">
+                    <span class="text-white/30">Contract</span>
+                    <span class="flex items-center gap-1">
+                      <span class="text-white/50">{{ truncateHex(hexlify(step.attestation.metadata.contract as Uint8Array)) }}</span>
+                      <a
+                        v-if="getEtherscanAddressUrl(step.attestation.chain, hexlify(step.attestation.metadata.contract as Uint8Array))"
+                        :href="getEtherscanAddressUrl(step.attestation.chain, hexlify(step.attestation.metadata.contract as Uint8Array))!"
+                        target="_blank"
+                        rel="noopener"
+                        class="text-neon-cyan hover:text-neon-cyan/80"
+                      >
+                        <ExternalLink class="h-2.5 w-2.5" />
+                      </a>
+                    </span>
+                  </div>
+                  <div v-if="step.attestation.metadata.txHash" class="flex items-center justify-between">
+                    <span class="text-white/30">Tx Hash</span>
+                    <span class="flex items-center gap-1">
+                      <span class="text-white/50">{{ truncateHex(hexlify(step.attestation.metadata.txHash as Uint8Array)) }}</span>
+                      <a
+                        v-if="getEtherscanTxUrl(step.attestation.chain, hexlify(step.attestation.metadata.txHash as Uint8Array))"
+                        :href="getEtherscanTxUrl(step.attestation.chain, hexlify(step.attestation.metadata.txHash as Uint8Array))!"
+                        target="_blank"
+                        rel="noopener"
+                        class="text-neon-cyan hover:text-neon-cyan/80"
+                      >
+                        <ExternalLink class="h-2.5 w-2.5" />
+                      </a>
+                    </span>
+                  </div>
+                </template>
+                <!-- Testnet / unknown network warning -->
+                <div
+                  v-if="isTestnetOrUnknown(step.attestation.chain)"
+                  class="mt-1.5 flex items-center gap-1.5 rounded bg-pending/10 px-2 py-1 text-pending"
+                >
+                  <AlertTriangle class="h-2.5 w-2.5 shrink-0" />
+                  <span>{{ getNetworkWarning(step.attestation.chain) }}</span>
+                </div>
+              </div>
+            </template>
+
+            <!-- Pending attestation details -->
+            <template v-else-if="step.attestation.kind === 'pending'">
+              <div class="space-y-1 font-mono text-[10px]">
+                <div class="flex items-center justify-between">
+                  <span class="text-white/30">Type</span>
+                  <span class="text-pending">Pending</span>
+                </div>
+                <div class="flex items-center justify-between">
+                  <span class="text-white/30">Calendar</span>
+                  <span class="text-white/50">{{ step.attestation.url }}</span>
+                </div>
+              </div>
+            </template>
+          </div>
+        </Transition>
+      </div>
+
+      <!-- Regular step (non-attestation, non-fork) -->
       <div
-        v-if="step.op !== 'FORK'"
+        v-else-if="step.op !== 'FORK'"
         class="flex items-center gap-2 rounded px-2 py-1 font-mono text-xs transition-colors hover:bg-white/5"
       >
         <ChevronRight class="h-3 w-3 text-white/20" />
diff --git a/apps/web/src/components/verify/VerificationResult.vue b/apps/web/src/components/verify/VerificationResult.vue
index b12e8bb..fcdc7f8 100644
--- a/apps/web/src/components/verify/VerificationResult.vue
+++ b/apps/web/src/components/verify/VerificationResult.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { hexlify } from 'ethers/utils'
-import { FileUp, Search, ShieldCheck, ChevronDown, ChevronUp } from 'lucide-vue-next'
+import { FileUp, Search, ShieldCheck, ChevronDown, ChevronUp, FileCheck, FileX } from 'lucide-vue-next'
 import GlassCard from '@/components/base/GlassCard.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import StatusBadge from '@/components/base/StatusBadge.vue'
 import MerkleTreeViz from '@/components/verify/MerkleTreeViz.vue'
 import AttestationDetail from '@/components/verify/AttestationDetail.vue'
 import { useTimestampSDK } from '@/composables/useTimestampSDK'
+import { useFileDigest } from '@/composables/useFileDigest'
 import { VerifyStatus } from '@uts/sdk'
-import type { DetachedTimestamp } from '@uts/sdk'
+import type { DetachedTimestamp, SecureDigestOp } from '@uts/sdk'
 
 const {
   verifyStatus,
@@ -21,9 +22,14 @@ const {
   resetVerify,
 } = useTimestampSDK()
 
+const { digestFile, isDigesting: isDigestingOriginal, progress: digestProgress } = useFileDigest()
+
 const otsFileRef = ref<HTMLInputElement>()
+const originalFileRef = ref<HTMLInputElement>()
 const loadedTimestamp = ref<DetachedTimestamp | null>(null)
 const showProofPath = ref(false)
+const originalFileMatch = ref<'match' | 'mismatch' | null>(null)
+const originalFileName = ref<string | null>(null)
 
 function mapVerifyStatus(status: VerifyStatus | null): 'valid' | 'invalid' | 'pending' | 'partial' | 'unknown' {
   if (!status) return 'unknown'
@@ -52,11 +58,32 @@ async function handleOtsUpload(event: Event) {
   }
 }
 
+async function handleOriginalFileUpload(event: Event) {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (!file || !loadedTimestamp.value) return
+
+  originalFileName.value = file.name
+  originalFileMatch.value = null
+
+  try {
+    const algo = loadedTimestamp.value.header.kind as SecureDigestOp
+    const result = await digestFile(file, algo)
+    const headerHex = hexlify(loadedTimestamp.value.header.digest as Uint8Array)
+    originalFileMatch.value = result.digest === headerHex ? 'match' : 'mismatch'
+  } catch {
+    originalFileMatch.value = 'mismatch'
+  }
+}
+
 function handleReset() {
   resetVerify()
   loadedTimestamp.value = null
   showProofPath.value = false
+  originalFileMatch.value = null
+  originalFileName.value = null
   if (otsFileRef.value) otsFileRef.value.value = ''
+  if (originalFileRef.value) originalFileRef.value.value = ''
 }
 </script>
 
@@ -112,6 +139,44 @@ function handleReset() {
         </div>
       </div>
 
+      <!-- Optional: verify original file matches the header digest -->
+      <div class="space-y-2 rounded-lg border border-glass-border bg-surface/30 p-4">
+        <div class="font-mono text-[10px] uppercase tracking-widest text-white/30">
+          Verify Original File (Optional)
+        </div>
+        <p class="font-mono text-[10px] text-white/25">
+          Upload the original file to verify it matches the .ots header digest
+        </p>
+        <div class="flex items-center gap-3">
+          <BaseButton variant="secondary" @click="originalFileRef?.click()" :disabled="isDigestingOriginal">
+            <FileUp class="h-3.5 w-3.5" />
+            {{ isDigestingOriginal ? 'Digesting...' : 'Upload Original' }}
+          </BaseButton>
+          <span v-if="originalFileName" class="font-mono text-[10px] text-white/40">
+            {{ originalFileName }}
+          </span>
+        </div>
+        <input
+          ref="originalFileRef"
+          type="file"
+          class="hidden"
+          @change="handleOriginalFileUpload"
+        />
+        <!-- Progress bar -->
+        <div v-if="isDigestingOriginal" class="h-1 w-full overflow-hidden rounded-full bg-surface">
+          <div class="h-full rounded-full bg-neon-cyan transition-all duration-150" :style="{ width: `${digestProgress}%` }" />
+        </div>
+        <!-- Match result -->
+        <div v-if="originalFileMatch === 'match'" class="flex items-center gap-2 rounded-lg bg-valid/10 px-3 py-2">
+          <FileCheck class="h-4 w-4 text-valid" />
+          <span class="font-mono text-xs text-valid">File digest matches — this is the original file</span>
+        </div>
+        <div v-else-if="originalFileMatch === 'mismatch'" class="flex items-center gap-2 rounded-lg bg-invalid/10 px-3 py-2">
+          <FileX class="h-4 w-4 text-invalid" />
+          <span class="font-mono text-xs text-invalid">File digest does NOT match the .ots header</span>
+        </div>
+      </div>
+
       <!-- Attestation details (collapsible) -->
       <div v-if="verifyAttestations.length > 0" class="space-y-2">
         <div class="font-mono text-[10px] uppercase tracking-widest text-white/30">
diff --git a/apps/web/src/composables/useFileDigest.ts b/apps/web/src/composables/useFileDigest.ts
index 6271da5..ec401be 100644
--- a/apps/web/src/composables/useFileDigest.ts
+++ b/apps/web/src/composables/useFileDigest.ts
@@ -12,7 +12,11 @@ export interface FileDigestResult {
   header: DigestHeader
 }
 
-const CHUNK_SIZE = 64 * 1024 // 64KB chunks for streaming hash
+// Estimated browser hashing throughput (~200 MB/s), used for fake progress
+const ESTIMATED_THROUGHPUT = 200 * 1024 * 1024
+const MIN_DURATION_MS = 300
+const MAX_DURATION_MS = 30000
+const PROGRESS_CAP = 92 // fake progress caps at this before real completion
 
 export function useFileDigest() {
   const isDigesting = ref(false)
@@ -20,6 +24,31 @@ export function useFileDigest() {
   const error = ref<string | null>(null)
   const result = ref<FileDigestResult | null>(null)
 
+  let progressTimer: ReturnType<typeof setInterval> | null = null
+
+  function startFakeProgress(totalBytes: number, fileCount: number) {
+    progress.value = 0
+    const estimatedMs = Math.max(
+      MIN_DURATION_MS,
+      Math.min(((totalBytes * fileCount) / ESTIMATED_THROUGHPUT) * 1000, MAX_DURATION_MS),
+    )
+    const intervalMs = 50
+    const steps = estimatedMs / intervalMs
+    const increment = PROGRESS_CAP / steps
+
+    progressTimer = setInterval(() => {
+      progress.value = Math.min(progress.value + increment, PROGRESS_CAP)
+    }, intervalMs)
+  }
+
+  function stopFakeProgress() {
+    if (progressTimer) {
+      clearInterval(progressTimer)
+      progressTimer = null
+    }
+    progress.value = 100
+  }
+
   async function digestFile(
     file: File,
     algorithm: SecureDigestOp = 'SHA256',
@@ -29,39 +58,22 @@ export function useFileDigest() {
     error.value = null
     result.value = null
 
+    startFakeProgress(file.size, 1)
+
     try {
       const factory = algorithm === 'KECCAK256' ? keccak_256 : sha256
       const hasher = factory.create()
-      const totalSize = file.size
-      let processed = 0
 
       const reader = file.stream().getReader()
-
       while (true) {
         const { done, value } = await reader.read()
         if (done) break
-
-        // Process in sub-chunks for progress reporting
-        let offset = 0
-        while (offset < value.length) {
-          const end = Math.min(offset + CHUNK_SIZE, value.length)
-          hasher.update(value.subarray(offset, end))
-          offset = end
-          processed += end - offset || (end - (offset - (end - offset)))
-        }
-        processed = Math.min(
-          processed,
-          totalSize,
-        )
-        // Recalculate based on actual bytes seen
-        progress.value = totalSize > 0 ? Math.min((processed / totalSize) * 100, 100) : 100
-
-        // Yield to main thread periodically
+        hasher.update(value)
+        // Yield to main thread periodically for UI updates
         await new Promise((resolve) => setTimeout(resolve, 0))
       }
 
-      // Fix progress tracking: just use processed bytes
-      progress.value = 100
+      stopFakeProgress()
 
       const digestBytes = hasher.digest()
       const digestHex = hexlify(digestBytes)
@@ -80,6 +92,7 @@ export function useFileDigest() {
       result.value = digestResult
       return digestResult
     } catch (e) {
+      stopFakeProgress()
       const msg = e instanceof Error ? e.message : 'Failed to digest file'
       error.value = msg
       throw new Error(msg)
@@ -88,7 +101,60 @@ export function useFileDigest() {
     }
   }
 
+  async function digestFiles(
+    files: File[],
+    algorithm: SecureDigestOp = 'SHA256',
+  ): Promise<FileDigestResult[]> {
+    isDigesting.value = true
+    progress.value = 0
+    error.value = null
+    result.value = null
+
+    const totalBytes = files.reduce((sum, f) => sum + f.size, 0)
+    startFakeProgress(totalBytes, files.length)
+
+    try {
+      const results: FileDigestResult[] = []
+      for (const file of files) {
+        const factory = algorithm === 'KECCAK256' ? keccak_256 : sha256
+        const hasher = factory.create()
+
+        const reader = file.stream().getReader()
+        while (true) {
+          const { done, value } = await reader.read()
+          if (done) break
+          hasher.update(value)
+          await new Promise((resolve) => setTimeout(resolve, 0))
+        }
+
+        const digestBytes = hasher.digest()
+        results.push({
+          fileName: file.webkitRelativePath || file.name,
+          fileSize: file.size,
+          algorithm,
+          digest: hexlify(digestBytes),
+          header: { kind: algorithm, digest: digestBytes },
+        })
+      }
+
+      stopFakeProgress()
+      if (results.length > 0) result.value = results[results.length - 1]!
+      return results
+    } catch (e) {
+      stopFakeProgress()
+      const msg = e instanceof Error ? e.message : 'Failed to digest files'
+      error.value = msg
+      throw new Error(msg)
+    } finally {
+      isDigesting.value = false
+    }
+  }
+
   function reset() {
+    if (progressTimer) {
+      clearInterval(progressTimer)
+      progressTimer = null
+    }
     isDigesting.value = false
     progress.value = 0
     error.value = null
@@ -101,6 +167,7 @@ export function useFileDigest() {
     error,
     result,
     digestFile,
+    digestFiles,
     reset,
   }
 }
diff --git a/apps/web/src/composables/useWebSocketFeed.ts b/apps/web/src/composables/useWebSocketFeed.ts
index c627f9a..eab8a1b 100644
--- a/apps/web/src/composables/useWebSocketFeed.ts
+++ b/apps/web/src/composables/useWebSocketFeed.ts
@@ -20,6 +20,7 @@ export interface FeedEntry {
   chainId: number
   blockHeight: number
   sender?: string
+  txHash?: string
   timestamp: number
 }
 
@@ -73,6 +74,7 @@ export function useWebSocketFeed() {
           chainId,
           blockHeight: log.blockNumber,
           sender: parsed.args[1],
+          txHash: log.transactionHash,
           timestamp: Number(parsed.args[2] as bigint) * 1000,
         })
       }
@@ -121,6 +123,7 @@ export function useWebSocketFeed() {
             chainId,
             blockHeight: log.blockNumber,
             sender: parsed.args[1],
+            txHash: log.transactionHash,
             timestamp: Number(parsed.args[2] as bigint) * 1000,
           })
         }
diff --git a/apps/web/src/stores/app.ts b/apps/web/src/stores/app.ts
index 869a499..9c633dc 100644
--- a/apps/web/src/stores/app.ts
+++ b/apps/web/src/stores/app.ts
@@ -3,6 +3,7 @@ import { ref, computed, watch } from 'vue'
 import { DEFAULT_CALENDARS } from '@uts/sdk'
 import type { DetachedTimestamp, SecureDigestOp } from '@uts/sdk'
 import { getSDK, resetSDK } from '@/composables/useTimestampSDK'
+import { JsonRpcProvider } from 'ethers'
 
 const CHAIN_NAMES: Record<number, string> = {
   1: 'Ethereum',
@@ -21,6 +22,12 @@ export interface EthChainNode {
 
 const STORAGE_KEY = 'uts-calendars'
 const SETTINGS_KEY = 'uts-settings'
+const CHAINS_KEY = 'uts-custom-chains'
+
+// Default chain IDs from SDK ethRPCs
+function getDefaultChainIds(): number[] {
+  return Object.keys(getSDK().ethRPCs).map(Number)
+}
 
 function loadCalendars(): string[] {
   try {
@@ -52,6 +59,31 @@ function saveSettings(settings: { keepPending: boolean; internalHashAlgo: Secure
   localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings))
 }
 
+function loadCustomChains(): number[] | null {
+  try {
+    const stored = localStorage.getItem(CHAINS_KEY)
+    if (stored) return JSON.parse(stored)
+  } catch { /* ignore */ }
+  return null
+}
+
+function saveCustomChains(chainIds: number[]) {
+  localStorage.setItem(CHAINS_KEY, JSON.stringify(chainIds))
+}
+
+// Public RPC endpoints for common chains (used when user adds a chain not in SDK ethRPCs)
+const PUBLIC_RPCS: Record<number, string> = {
+  1: 'https://eth.llamarpc.com',
+  17000: 'https://rpc.holesky.ethpandaops.io',
+  11155111: 'https://rpc.sepolia.org',
+  534352: 'https://rpc.scroll.io',
+  534351: 'https://sepolia-rpc.scroll.io',
+  42161: 'https://arb1.arbitrum.io/rpc',
+  10: 'https://mainnet.optimism.io',
+  8453: 'https://mainnet.base.org',
+  137: 'https://polygon-rpc.com',
+}
+
 export const useAppStore = defineStore('app', () => {
   const calendarUrls = ref<string[]>(loadCalendars())
   const keepPending = ref(loadSettings().keepPending)
@@ -59,6 +91,9 @@ export const useAppStore = defineStore('app', () => {
   const ethChains = ref<EthChainNode[]>([])
   const recentStamps = ref<DetachedTimestamp[]>([])
 
+  // Chain IDs to monitor (persisted or default from SDK)
+  const customChainIds = ref<number[]>(loadCustomChains() ?? getDefaultChainIds())
+
   const onlineCount = computed(
     () => ethChains.value.filter((c) => c.status === 'online').length,
   )
@@ -78,7 +113,7 @@ export const useAppStore = defineStore('app', () => {
 
   async function checkChains() {
     const sdk = getSDK()
-    const chainIds = Object.keys(sdk.ethRPCs).map(Number)
+    const chainIds = customChainIds.value
 
     ethChains.value = chainIds.map((chainId) => ({
       chainId,
@@ -87,7 +122,14 @@ export const useAppStore = defineStore('app', () => {
     }))
 
     for (const chain of ethChains.value) {
-      const provider = sdk.getEthProvider(chain.chainId)
+      // Try SDK provider first, then public RPC
+      let provider = sdk.getEthProvider(chain.chainId)
+      if (!provider && PUBLIC_RPCS[chain.chainId]) {
+        try {
+          provider = new JsonRpcProvider(PUBLIC_RPCS[chain.chainId])
+        } catch { /* ignore */ }
+      }
+
       if (!provider) {
         chain.status = 'offline'
         continue
@@ -104,6 +146,23 @@ export const useAppStore = defineStore('app', () => {
     }
   }
 
+  function addChain(chainId: number) {
+    if (customChainIds.value.includes(chainId)) return
+    customChainIds.value.push(chainId)
+    saveCustomChains(customChainIds.value)
+  }
+
+  function removeChain(chainId: number) {
+    customChainIds.value = customChainIds.value.filter((id) => id !== chainId)
+    ethChains.value = ethChains.value.filter((c) => c.chainId !== chainId)
+    saveCustomChains(customChainIds.value)
+  }
+
+  function resetChains() {
+    customChainIds.value = getDefaultChainIds()
+    localStorage.removeItem(CHAINS_KEY)
+  }
+
   function addStamp(stamp: DetachedTimestamp) {
     recentStamps.value.unshift(stamp)
     if (recentStamps.value.length > 20) {
@@ -127,6 +186,9 @@ export const useAppStore = defineStore('app', () => {
     recentStamps,
     onlineCount,
     checkChains,
+    addChain,
+    removeChain,
+    resetChains,
     addStamp,
     setCalendars,
     resetCalendars,
diff --git a/apps/web/src/views/HomeView.vue b/apps/web/src/views/HomeView.vue
index 0ec95bf..a639f8c 100644
--- a/apps/web/src/views/HomeView.vue
+++ b/apps/web/src/views/HomeView.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
-import { Zap, Shield, Settings, Plus, Trash2, RotateCcw, Wallet } from 'lucide-vue-next'
+import { Zap, Shield, Settings, Plus, Trash2, RotateCcw, Wallet, RefreshCw, ChevronDown } from 'lucide-vue-next'
 import HeroTerminal from '@/components/terminal/HeroTerminal.vue'
 import StampingWorkflow from '@/components/stamp/StampingWorkflow.vue'
 import VerificationResult from '@/components/verify/VerificationResult.vue'
+import UpgradePanel from '@/components/upgrade/UpgradePanel.vue'
 import LiveFeed from '@/components/feed/LiveFeed.vue'
 import GlassCard from '@/components/base/GlassCard.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -11,6 +12,9 @@ import { useTimestampSDK, setWeb3Provider, getSDK } from '@/composables/useTimes
 import { useWallet } from '@/composables/useWallet'
 import type { FileDigestResult } from '@/composables/useFileDigest'
 import { useAppStore } from '@/stores/app'
+import ScrollLogo from '@/assets/Scroll_Logomark.svg'
+
+const SCROLL_CHAIN_IDS = new Set([534352, 534351])
 
 const store = useAppStore()
 const { stampPhase, stampError, broadcastProgress, stamp, downloadPendingStamp } = useTimestampSDK()
@@ -26,11 +30,15 @@ const {
   truncateAddress,
 } = useWallet()
 
-const savedTab = localStorage.getItem('uts-active-tab') as 'stamp' | 'verify' | null
-const activeTab = ref<'stamp' | 'verify'>(savedTab === 'verify' ? 'verify' : 'stamp')
+type TabId = 'stamp' | 'verify' | 'upgrade'
+const savedTab = localStorage.getItem('uts-active-tab') as TabId | null
+const validTabs: TabId[] = ['stamp', 'verify', 'upgrade']
+const activeTab = ref<TabId>(savedTab && validTabs.includes(savedTab) ? savedTab : 'stamp')
 const showWorkflow = ref(false)
 const showSettings = ref(false)
+const showChainPanel = ref(false)
 const newCalendarUrl = ref('')
+const newChainId = ref('')
 
 watch(activeTab, (tab) => {
   localStorage.setItem('uts-active-tab', tab)
@@ -40,6 +48,14 @@ onMounted(() => {
   store.checkChains()
 })
 
+function handleAddChain() {
+  const id = parseInt(newChainId.value.trim(), 10)
+  if (!id || isNaN(id)) return
+  store.addChain(id)
+  store.checkChains()
+  newChainId.value = ''
+}
+
 // Sync wallet provider to SDK when wallet connects/disconnects
 watch(walletConnected, (connected) => {
   if (connected) {
@@ -131,23 +147,122 @@ function handleWalletClick() {
         </div>
 
         <div class="flex items-center gap-4">
-          <!-- Ethereum chain status -->
-          <div class="flex items-center gap-2">
-            <span
-              v-for="chain in store.ethChains"
-              :key="chain.chainId"
-              class="group relative h-2 w-2 cursor-help rounded-full"
-              :class="{
-                'bg-valid animate-glow-pulse': chain.status === 'online',
-                'bg-invalid': chain.status === 'offline',
-                'bg-pending animate-glow-pulse': chain.status === 'checking',
-              }"
-              :title="`${chain.name} (${chain.chainId}) — ${chain.status}${chain.latency ? ` (${chain.latency}ms)` : ''}`"
-            />
+          <!-- Ethereum chain status — clickable -->
+          <div class="relative">
+            <button
+              class="flex items-center gap-2 rounded-lg border border-glass-border px-3 py-1.5 font-mono text-xs text-white/50 transition hover:border-white/20 hover:text-white/70"
+              @click="showChainPanel = !showChainPanel"
+            >
+              <span
+                v-for="chain in store.ethChains"
+                :key="chain.chainId"
+                class="flex items-center gap-0.5"
+              >
+                <img
+                  v-if="SCROLL_CHAIN_IDS.has(chain.chainId)"
+                  :src="ScrollLogo"
+                  alt="Scroll"
+                  class="h-3 w-3"
+                />
+                <span
+                  class="h-1.5 w-1.5 rounded-full"
+                  :class="{
+                    'bg-valid': chain.status === 'online',
+                    'bg-invalid': chain.status === 'offline',
+                    'bg-pending': chain.status === 'checking',
+                  }"
+                />
+              </span>
+              <span>{{ store.onlineCount }}/{{ store.ethChains.length }} chains</span>
+              <ChevronDown class="h-3 w-3" />
+            </button>
+
+            <!-- Chain detail dropdown -->
+            <Transition name="fade">
+              <div
+                v-if="showChainPanel"
+                class="absolute right-0 top-full z-50 mt-2 w-80 rounded-xl border border-glass-border bg-midnight/95 p-4 shadow-xl backdrop-blur-lg"
+              >
+                <div class="mb-3 flex items-center justify-between">
+                  <h4 class="font-heading text-xs font-semibold text-white/80">Ethereum Chains</h4>
+                  <BaseButton variant="secondary" @click="store.checkChains()">
+                    <RefreshCw class="h-3 w-3" />
+                    Refresh
+                  </BaseButton>
+                </div>
+
+                <div class="space-y-1.5">
+                  <div
+                    v-for="chain in store.ethChains"
+                    :key="chain.chainId"
+                    class="flex items-center gap-2 rounded-lg bg-surface/40 px-3 py-2"
+                  >
+                    <img
+                      v-if="SCROLL_CHAIN_IDS.has(chain.chainId)"
+                      :src="ScrollLogo"
+                      alt="Scroll"
+                      class="h-4 w-4"
+                    />
+                    <span
+                      class="h-2 w-2 rounded-full"
+                      :class="{
+                        'bg-valid': chain.status === 'online',
+                        'bg-invalid': chain.status === 'offline',
+                        'bg-pending animate-glow-pulse': chain.status === 'checking',
+                      }"
+                    />
+                    <div class="min-w-0 flex-1">
+                      <div class="font-heading text-xs font-medium text-white/70">{{ chain.name }}</div>
+                      <div class="font-mono text-[10px] text-white/30">Chain ID: {{ chain.chainId }}</div>
+                    </div>
+                    <div class="text-right">
+                      <div class="font-mono text-[10px]" :class="{
+                        'text-valid': chain.status === 'online',
+                        'text-invalid': chain.status === 'offline',
+                        'text-pending': chain.status === 'checking',
+                      }">
+                        {{ chain.status }}
+                      </div>
+                      <div v-if="chain.latency" class="font-mono text-[10px] text-white/20">
+                        {{ chain.latency }}ms
+                      </div>
+                    </div>
+                    <button
+                      class="rounded p-0.5 text-white/20 transition hover:bg-invalid/10 hover:text-invalid"
+                      title="Remove chain"
+                      @click="store.removeChain(chain.chainId)"
+                    >
+                      <Trash2 class="h-3 w-3" />
+                    </button>
+                  </div>
+                </div>
+
+                <!-- Add custom chain -->
+                <div class="mt-3 border-t border-glass-border pt-3">
+                  <div class="font-mono text-[10px] text-white/30 mb-1.5">Add chain by ID</div>
+                  <div class="flex gap-2">
+                    <input
+                      v-model="newChainId"
+                      type="text"
+                      placeholder="e.g. 42161"
+                      class="flex-1 rounded-lg border border-glass-border bg-surface px-2 py-1 font-mono text-xs text-white/80 outline-none placeholder:text-white/20 focus:border-neon-cyan/40"
+                      @keyup.enter="handleAddChain"
+                    />
+                    <BaseButton variant="secondary" @click="handleAddChain">
+                      <Plus class="h-3 w-3" />
+                      Add
+                    </BaseButton>
+                  </div>
+                  <div class="mt-2 flex justify-end">
+                    <BaseButton variant="secondary" @click="store.resetChains(); store.checkChains()">
+                      <RotateCcw class="h-3 w-3" />
+                      Reset defaults
+                    </BaseButton>
+                  </div>
+                </div>
+              </div>
+            </Transition>
           </div>
-          <span class="font-mono text-[10px] text-white/30">
-            {{ store.onlineCount }}/{{ store.ethChains.length }} chains
-          </span>
           <!-- Connect Wallet button -->
           <button
             class="flex items-center gap-2 rounded-lg border px-3 py-1.5 font-mono text-xs transition-all"
@@ -293,6 +408,18 @@ function handleWalletClick() {
           <Shield class="h-4 w-4" />
           Verify
         </button>
+        <button
+          class="flex items-center gap-2 rounded-lg px-6 py-2.5 font-heading text-sm font-medium transition-all"
+          :class="
+            activeTab === 'upgrade'
+              ? 'bg-neon-purple/10 text-neon-purple'
+              : 'text-white/40 hover:text-white/60'
+          "
+          @click="activeTab = 'upgrade'"
+        >
+          <RefreshCw class="h-4 w-4" />
+          Upgrade
+        </button>
       </div>
 
       <!-- Content -->
@@ -319,6 +446,11 @@ function handleWalletClick() {
           <div v-show="activeTab === 'verify'">
             <VerificationResult />
           </div>
+
+          <!-- Upgrade tab (preserved with v-show) -->
+          <div v-show="activeTab === 'upgrade'">
+            <UpgradePanel />
+          </div>
         </div>
 
         <!-- Sidebar (2/5) -->

From 1ec9de8ba96a2f8a1f514c87cc7994e3fb6d9aec Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Feb 2026 08:18:53 +0000
Subject: [PATCH 13/21] fix: chain panel z-index over content, add RPC endpoint
 editing per chain

- Add `relative z-50` to header so chain dropdown renders above terminal
  and live feed content
- Add customRpcs storage (localStorage persisted) for per-chain RPC URLs
- Chain panel shows current RPC URL for each chain with pencil edit button
- Click pencil to inline-edit RPC URL, Enter or check to save
- Custom RPCs take priority over SDK providers and public RPC fallbacks
- Reset defaults clears custom RPCs along with chain list

Co-authored-by: lightsing <15951701+lightsing@users.noreply.github.com>
---
 apps/web/src/stores/app.ts      |  62 +++++++++++++++--
 apps/web/src/views/HomeView.vue | 117 ++++++++++++++++++++++----------
 2 files changed, 135 insertions(+), 44 deletions(-)

diff --git a/apps/web/src/stores/app.ts b/apps/web/src/stores/app.ts
index 9c633dc..930c940 100644
--- a/apps/web/src/stores/app.ts
+++ b/apps/web/src/stores/app.ts
@@ -18,11 +18,13 @@ export interface EthChainNode {
   name: string
   status: 'online' | 'offline' | 'checking'
   latency?: number
+  rpcUrl?: string
 }
 
 const STORAGE_KEY = 'uts-calendars'
 const SETTINGS_KEY = 'uts-settings'
 const CHAINS_KEY = 'uts-custom-chains'
+const CHAIN_RPCS_KEY = 'uts-chain-rpcs'
 
 // Default chain IDs from SDK ethRPCs
 function getDefaultChainIds(): number[] {
@@ -71,6 +73,18 @@ function saveCustomChains(chainIds: number[]) {
   localStorage.setItem(CHAINS_KEY, JSON.stringify(chainIds))
 }
 
+function loadChainRpcs(): Record<number, string> {
+  try {
+    const stored = localStorage.getItem(CHAIN_RPCS_KEY)
+    if (stored) return JSON.parse(stored)
+  } catch { /* ignore */ }
+  return {}
+}
+
+function saveChainRpcs(rpcs: Record<number, string>) {
+  localStorage.setItem(CHAIN_RPCS_KEY, JSON.stringify(rpcs))
+}
+
 // Public RPC endpoints for common chains (used when user adds a chain not in SDK ethRPCs)
 const PUBLIC_RPCS: Record<number, string> = {
   1: 'https://eth.llamarpc.com',
@@ -94,6 +108,9 @@ export const useAppStore = defineStore('app', () => {
   // Chain IDs to monitor (persisted or default from SDK)
   const customChainIds = ref<number[]>(loadCustomChains() ?? getDefaultChainIds())
 
+  // Custom RPC endpoints per chain (persisted)
+  const customRpcs = ref<Record<number, string>>(loadChainRpcs())
+
   const onlineCount = computed(
     () => ethChains.value.filter((c) => c.status === 'online').length,
   )
@@ -115,15 +132,28 @@ export const useAppStore = defineStore('app', () => {
     const sdk = getSDK()
     const chainIds = customChainIds.value
 
-    ethChains.value = chainIds.map((chainId) => ({
-      chainId,
-      name: CHAIN_NAMES[chainId] ?? `Chain ${chainId}`,
-      status: 'checking' as const,
-    }))
+    ethChains.value = chainIds.map((chainId) => {
+      const rpc = customRpcs.value[chainId] ?? PUBLIC_RPCS[chainId]
+      return {
+        chainId,
+        name: CHAIN_NAMES[chainId] ?? `Chain ${chainId}`,
+        status: 'checking' as const,
+        rpcUrl: rpc,
+      }
+    })
 
     for (const chain of ethChains.value) {
-      // Try SDK provider first, then public RPC
-      let provider = sdk.getEthProvider(chain.chainId)
+      // Try custom RPC first, then SDK provider, then public RPC fallback
+      let provider: JsonRpcProvider | null = null
+      const rpc = customRpcs.value[chain.chainId]
+      if (rpc) {
+        try {
+          provider = new JsonRpcProvider(rpc)
+        } catch { /* ignore */ }
+      }
+      if (!provider) {
+        provider = sdk.getEthProvider(chain.chainId)
+      }
       if (!provider && PUBLIC_RPCS[chain.chainId]) {
         try {
           provider = new JsonRpcProvider(PUBLIC_RPCS[chain.chainId])
@@ -160,7 +190,24 @@ export const useAppStore = defineStore('app', () => {
 
   function resetChains() {
     customChainIds.value = getDefaultChainIds()
+    customRpcs.value = {}
     localStorage.removeItem(CHAINS_KEY)
+    localStorage.removeItem(CHAIN_RPCS_KEY)
+  }
+
+  function setChainRpc(chainId: number, rpcUrl: string) {
+    const trimmed = rpcUrl.trim()
+    if (trimmed) {
+      customRpcs.value[chainId] = trimmed
+    } else {
+      delete customRpcs.value[chainId]
+    }
+    saveChainRpcs(customRpcs.value)
+    // Update the rpcUrl in the displayed chain list
+    const chain = ethChains.value.find((c) => c.chainId === chainId)
+    if (chain) {
+      chain.rpcUrl = trimmed || PUBLIC_RPCS[chainId]
+    }
   }
 
   function addStamp(stamp: DetachedTimestamp) {
@@ -189,6 +236,7 @@ export const useAppStore = defineStore('app', () => {
     addChain,
     removeChain,
     resetChains,
+    setChainRpc,
     addStamp,
     setCalendars,
     resetCalendars,
diff --git a/apps/web/src/views/HomeView.vue b/apps/web/src/views/HomeView.vue
index a639f8c..c7b9e65 100644
--- a/apps/web/src/views/HomeView.vue
+++ b/apps/web/src/views/HomeView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
-import { Zap, Shield, Settings, Plus, Trash2, RotateCcw, Wallet, RefreshCw, ChevronDown } from 'lucide-vue-next'
+import { Zap, Shield, Settings, Plus, Trash2, RotateCcw, Wallet, RefreshCw, ChevronDown, Pencil, Check } from 'lucide-vue-next'
 import HeroTerminal from '@/components/terminal/HeroTerminal.vue'
 import StampingWorkflow from '@/components/stamp/StampingWorkflow.vue'
 import VerificationResult from '@/components/verify/VerificationResult.vue'
@@ -39,6 +39,20 @@ const showSettings = ref(false)
 const showChainPanel = ref(false)
 const newCalendarUrl = ref('')
 const newChainId = ref('')
+const editingChainRpc = ref<number | null>(null)
+const editRpcValue = ref('')
+
+function startEditRpc(chainId: number, currentRpc?: string) {
+  editingChainRpc.value = chainId
+  editRpcValue.value = currentRpc ?? ''
+}
+
+function saveEditRpc(chainId: number) {
+  store.setChainRpc(chainId, editRpcValue.value)
+  editingChainRpc.value = null
+  editRpcValue.value = ''
+  store.checkChains()
+}
 
 watch(activeTab, (tab) => {
   localStorage.setItem('uts-active-tab', tab)
@@ -132,7 +146,7 @@ function handleWalletClick() {
 <template>
   <div class="scanlines min-h-screen bg-deep-black">
     <!-- Header -->
-    <header class="border-b border-glass-border bg-midnight/80 backdrop-blur-md">
+    <header class="relative z-50 border-b border-glass-border bg-midnight/80 backdrop-blur-md">
       <div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
         <div class="flex items-center gap-3">
           <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-neon-cyan/10">
@@ -195,45 +209,74 @@ function handleWalletClick() {
                   <div
                     v-for="chain in store.ethChains"
                     :key="chain.chainId"
-                    class="flex items-center gap-2 rounded-lg bg-surface/40 px-3 py-2"
+                    class="rounded-lg bg-surface/40 px-3 py-2"
                   >
-                    <img
-                      v-if="SCROLL_CHAIN_IDS.has(chain.chainId)"
-                      :src="ScrollLogo"
-                      alt="Scroll"
-                      class="h-4 w-4"
-                    />
-                    <span
-                      class="h-2 w-2 rounded-full"
-                      :class="{
-                        'bg-valid': chain.status === 'online',
-                        'bg-invalid': chain.status === 'offline',
-                        'bg-pending animate-glow-pulse': chain.status === 'checking',
-                      }"
-                    />
-                    <div class="min-w-0 flex-1">
-                      <div class="font-heading text-xs font-medium text-white/70">{{ chain.name }}</div>
-                      <div class="font-mono text-[10px] text-white/30">Chain ID: {{ chain.chainId }}</div>
-                    </div>
-                    <div class="text-right">
-                      <div class="font-mono text-[10px]" :class="{
-                        'text-valid': chain.status === 'online',
-                        'text-invalid': chain.status === 'offline',
-                        'text-pending': chain.status === 'checking',
-                      }">
-                        {{ chain.status }}
+                    <div class="flex items-center gap-2">
+                      <img
+                        v-if="SCROLL_CHAIN_IDS.has(chain.chainId)"
+                        :src="ScrollLogo"
+                        alt="Scroll"
+                        class="h-4 w-4"
+                      />
+                      <span
+                        class="h-2 w-2 rounded-full"
+                        :class="{
+                          'bg-valid': chain.status === 'online',
+                          'bg-invalid': chain.status === 'offline',
+                          'bg-pending animate-glow-pulse': chain.status === 'checking',
+                        }"
+                      />
+                      <div class="min-w-0 flex-1">
+                        <div class="font-heading text-xs font-medium text-white/70">{{ chain.name }}</div>
+                        <div class="font-mono text-[10px] text-white/30">Chain ID: {{ chain.chainId }}</div>
                       </div>
-                      <div v-if="chain.latency" class="font-mono text-[10px] text-white/20">
-                        {{ chain.latency }}ms
+                      <div class="text-right">
+                        <div class="font-mono text-[10px]" :class="{
+                          'text-valid': chain.status === 'online',
+                          'text-invalid': chain.status === 'offline',
+                          'text-pending': chain.status === 'checking',
+                        }">
+                          {{ chain.status }}
+                        </div>
+                        <div v-if="chain.latency" class="font-mono text-[10px] text-white/20">
+                          {{ chain.latency }}ms
+                        </div>
                       </div>
+                      <button
+                        class="rounded p-0.5 text-white/20 transition hover:bg-neon-cyan/10 hover:text-neon-cyan"
+                        title="Edit RPC endpoint"
+                        @click="startEditRpc(chain.chainId, chain.rpcUrl)"
+                      >
+                        <Pencil class="h-3 w-3" />
+                      </button>
+                      <button
+                        class="rounded p-0.5 text-white/20 transition hover:bg-invalid/10 hover:text-invalid"
+                        title="Remove chain"
+                        @click="store.removeChain(chain.chainId)"
+                      >
+                        <Trash2 class="h-3 w-3" />
+                      </button>
+                    </div>
+                    <!-- RPC editing row -->
+                    <div v-if="editingChainRpc === chain.chainId" class="mt-1.5 flex gap-1.5">
+                      <input
+                        v-model="editRpcValue"
+                        type="text"
+                        placeholder="https://rpc-endpoint.example.com"
+                        class="flex-1 rounded border border-glass-border bg-surface px-2 py-1 font-mono text-[10px] text-white/70 outline-none placeholder:text-white/20 focus:border-neon-cyan/40"
+                        @keyup.enter="saveEditRpc(chain.chainId)"
+                      />
+                      <button
+                        class="rounded bg-neon-cyan/10 px-1.5 py-1 text-neon-cyan transition hover:bg-neon-cyan/20"
+                        title="Save"
+                        @click="saveEditRpc(chain.chainId)"
+                      >
+                        <Check class="h-3 w-3" />
+                      </button>
+                    </div>
+                    <div v-else-if="chain.rpcUrl" class="mt-0.5 truncate font-mono text-[10px] text-white/20 pl-4">
+                      {{ chain.rpcUrl }}
                     </div>
-                    <button
-                      class="rounded p-0.5 text-white/20 transition hover:bg-invalid/10 hover:text-invalid"
-                      title="Remove chain"
-                      @click="store.removeChain(chain.chainId)"
-                    >
-                      <Trash2 class="h-3 w-3" />
-                    </button>
                   </div>
                 </div>
 

From 796e70ff43cd6ec7d407c50693f8fff29bd000aa Mon Sep 17 00:00:00 2001
From: lightsing <light.tsing@gmail.com>
Date: Wed, 25 Feb 2026 16:24:06 +0800
Subject: [PATCH 14/21] use scroll logo

---
 apps/web/src/assets/Scroll_Logomark.svg | 35 ++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/assets/Scroll_Logomark.svg b/apps/web/src/assets/Scroll_Logomark.svg
index 010b7bb..0e07355 100644
--- a/apps/web/src/assets/Scroll_Logomark.svg
+++ b/apps/web/src/assets/Scroll_Logomark.svg
@@ -1,5 +1,32 @@
-<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="50" cy="50" r="50" fill="#FFEEDA"/>
-  <path d="M70.7348 62.5765C70.7348 65.6498 69.4698 68.0748 67.6131 69.8265C65.3081 72.0165 62.2348 73.0815 59.0464 73.0815H34.3564V67.8448H59.2764C61.0164 67.8448 62.6414 67.1515 63.8414 65.9515C65.0414 64.7515 65.7348 63.2415 65.7348 61.3848C65.7348 59.6448 65.0414 58.0198 63.8414 56.8198C62.6414 55.6198 61.1314 54.9265 59.2764 54.9265H44.2898C41.1014 54.9265 38.0281 53.8615 35.7231 51.6715C33.8664 49.9198 32.6014 47.4948 32.6014 44.4215C32.6014 41.3481 33.8664 38.9231 35.7231 37.1715C38.0281 34.9815 41.1014 33.9165 44.2898 33.9165H67.6131V39.1531H44.0598C42.3198 39.1531 40.6948 39.8465 39.4948 41.0465C38.2948 42.2465 37.6014 43.7565 37.6014 45.6131C37.6014 47.3531 38.2948 48.9781 39.4948 50.1781C40.6948 51.3781 42.2048 52.0715 44.0598 52.0715H59.0464C62.2348 52.0715 65.3081 53.1365 67.6131 55.3265C69.4698 56.9615 70.7348 59.5015 70.7348 62.5765Z" fill="#101010"/>
-  <path d="M67.6131 73.0815V78.3181C67.6131 80.8581 66.1031 82.9448 63.9131 83.9898C63.1048 84.3398 62.1798 84.5748 61.2548 84.5748C59.5148 84.5748 57.8898 83.8815 56.6898 82.6815L49.5264 75.5181L53.2564 71.7881L60.4198 78.9515C60.6548 79.1865 60.8898 79.3015 61.2398 79.3015C61.9331 79.3015 62.3981 78.7998 62.3981 78.2248V73.0815H67.6131Z" fill="#101010"/>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 444 444" style="enable-background:new 0 0 444 444;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFEEDA;}
+	.st1{fill:#EBC28E;}
+	.st2{fill:#101010;}
+</style>
+<g>
+	<rect class="st0" width="444" height="444"/>
+	<g>
+		<path class="st0" d="M333.4,262V110.6c-0.2-12.7-10.3-22.9-23-22.9h-158c-34.1,0.5-61.5,28.4-61.5,62.6c0,11.5,3.1,21.4,7.8,30.1
+			c4,7.2,10.3,14,16.5,19.1c1.8,1.4,0.9,0.8,6.3,4.1c7.4,4.5,15.9,6.8,15.9,6.8l-0.1,90.6c0.2,4.3,0.6,8.4,1.8,12.3
+			c3.5,12.8,12.4,22.6,24.4,27.3c5,2,10.7,3.3,16.8,3.4l126.2,0.4c25.1,0,45.5-20.4,45.5-45.6C352.1,283.8,344.6,270.4,333.4,262z"
+			/>
+		<path class="st1" d="M336.5,299.9C336,316,322.7,329,306.4,329l-86.8-0.3c6.9-8,11.1-18.4,11.1-29.8c0-17.8-10.6-30.1-10.6-30.1
+			h86.4c16.6,0,30.1,13.5,30.1,30.1L336.5,299.9z"/>
+		<path class="st2" d="M123.5,186.7c-10-9.5-17-21.7-17-36.3v-1.5c0.8-24.8,21.2-44.8,46-45.5h158c4.1,0.2,7.4,3.1,7.4,7.3v133.7
+			c3.6,0.6,5.4,1.1,8.9,2.4c2.8,1,6.6,3.2,6.6,3.2V110.7c-0.2-12.7-10.3-22.9-23-22.9h-158c-34.1,0.5-61.5,28.4-61.5,62.6
+			c0,19.9,9.1,36.9,23.9,48.8c1,0.8,2,1.9,4.6,1.9c4.6,0,7.9-3.7,7.7-7.7C127.1,190,125.6,188.8,123.5,186.7z"/>
+		<path class="st2" d="M306.4,253.2H182.5c-8.3,0.1-15,6.8-15,15.1v17.8c0.2,8.2,7.2,15.2,15.6,15.2h9.2v-15.2H183v-17.4
+			c0,0,2.3,0,5,0c15.7,0,27.2,14.5,27.2,30.1c0,13.8-12.6,31.4-33.6,30c-18.6-1.2-28.7-17.8-28.7-30v-151c0-6.8-5.6-12.4-12.4-12.4
+			h-12.4v15.5h9.2v148c-0.5,30.1,21.4,45.2,44.3,45.2l124.9,0.4c25.1,0,45.5-20.4,45.5-45.6C352.1,273.7,331.6,253.2,306.4,253.2z
+			 M336.5,299.9C336,316,322.7,329,306.4,329l-86.8-0.3c6.9-8,11.1-18.4,11.1-29.8c0-17.8-10.6-30.1-10.6-30.1h86.4
+			c16.6,0,30.1,13.5,30.1,30.1L336.5,299.9z"/>
+		<path class="st2" d="M273,153.7h-93.4v-15.5H273c4.2,0,7.7,3.4,7.7,7.7C280.8,150.2,277.4,153.7,273,153.7z"/>
+		<path class="st2" d="M273,226.4h-93.4V211H273c4.2,0,7.7,3.4,7.7,7.7C280.8,222.9,277.4,226.4,273,226.4z"/>
+		<path class="st2" d="M289.5,190H179.6v-15.5h109.8c4.2,0,7.7,3.4,7.7,7.7C297.3,186.5,293.8,190,289.5,190z"/>
+	</g>
+</g>
 </svg>

From 469262be4a5296941c1815f1dc071bdf8e3bd81a Mon Sep 17 00:00:00 2001
From: lightsing <light.tsing@gmail.com>
Date: Wed, 25 Feb 2026 16:24:15 +0800
Subject: [PATCH 15/21] fix paths

---
 apps/web/tsconfig.app.json |  5 +++--
 apps/web/tsconfig.json     |  1 +
 tsconfig.json              | 13 +++++++++++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/web/tsconfig.app.json b/apps/web/tsconfig.app.json
index 245d63d..5839f41 100644
--- a/apps/web/tsconfig.app.json
+++ b/apps/web/tsconfig.app.json
@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "extends": ["@vue/tsconfig/tsconfig.dom.json", "../../tsconfig.json"],
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "types": ["vite/client"],
@@ -15,5 +15,6 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "../../packages/sdk/tsconfig.json" }]
 }
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 1087934..0ab1bf5 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -1,4 +1,5 @@
 {
+  "extends": "../../tsconfig.json",
   "files": [],
   "references": [
     { "path": "./tsconfig.app.json" },
diff --git a/tsconfig.json b/tsconfig.json
index 9b516e0..9e7bf2a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -48,7 +48,16 @@
     "incremental": true,
 
     // Completeness
-    "skipLibCheck": true // skip all type checks for .d.ts files
+    "skipLibCheck": true, // skip all type checks for .d.ts files
+
+    "paths": {
+      "@uts/sdk": ["./packages/sdk/src/index.ts"]
+    },
+    "customConditions": ["uts-source"]
   },
-  "references": [{ "path": "./packages/sdk" }, { "path": "./packages/sdk/test/" }, { "path": "./apps/web" }]
+  "references": [
+    { "path": "./packages/sdk" },
+    { "path": "./packages/sdk/test/" },
+    { "path": "./apps/web" }
+  ]
 }

From 088865db22fc335cf0d662442d1c8cae3d3aa0ac Mon Sep 17 00:00:00 2001
From: lightsing <light.tsing@gmail.com>
Date: Wed, 25 Feb 2026 16:24:36 +0800
Subject: [PATCH 16/21] add cors header

---
 Cargo.lock                  | 1 +
 crates/calendar/Cargo.toml  | 1 +
 crates/calendar/src/main.rs | 9 ++++++++-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/Cargo.lock b/Cargo.lock
index 1d32aa3..3a81e53 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -6295,6 +6295,7 @@ dependencies = [
  "rocksdb",
  "sha3 0.11.0-rc.3",
  "tokio",
+ "tower-http",
  "tracing",
  "tracing-subscriber",
  "uts-bmt",
diff --git a/crates/calendar/Cargo.toml b/crates/calendar/Cargo.toml
index fdac50f..9e74106 100644
--- a/crates/calendar/Cargo.toml
+++ b/crates/calendar/Cargo.toml
@@ -28,6 +28,7 @@ itoa = { workspace = true }
 rocksdb = { workspace = true }
 sha3 = { workspace = true }
 tokio = { workspace = true, features = ["full"] }
+tower-http = { workspace = true, features = ["cors"] }
 tracing = { workspace = true }
 tracing-subscriber = { workspace = true }
 uts-bmt = { workspace = true }
diff --git a/crates/calendar/src/main.rs b/crates/calendar/src/main.rs
index 73390ec..21182a2 100644
--- a/crates/calendar/src/main.rs
+++ b/crates/calendar/src/main.rs
@@ -6,12 +6,14 @@ use alloy_signer_local::{LocalSigner, MnemonicBuilder};
 use axum::{
     Router,
     extract::DefaultBodyLimit,
+    http::Method,
     routing::{get, post},
 };
 use digest::{OutputSizeUser, typenum::Unsigned};
 use rocksdb::DB;
 use sha3::Keccak256;
 use std::{env, sync::Arc};
+use tower_http::{cors, cors::CorsLayer};
 use tracing::info;
 use uts_calendar::{AppState, routes, shutdown_signal, time};
 use uts_contracts::uts::UniversalTimestamps;
@@ -78,7 +80,12 @@ async fn main() -> eyre::Result<()> {
             signer,
             journal,
             db,
-        }));
+        }))
+        .layer(
+            CorsLayer::new()
+                .allow_methods([Method::GET, Method::POST])
+                .allow_origin(cors::Any),
+        );
 
     let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await?;
 

From 03da297b4c9a6bbda588a26483a29de3d98a42d8 Mon Sep 17 00:00:00 2001
From: lightsing <light.tsing@gmail.com>
Date: Wed, 25 Feb 2026 16:28:17 +0800
Subject: [PATCH 17/21] allow to modify rpc endpoints

---
 packages/sdk/src/sdk.ts | 69 ++++++++++++++++++++++++++---------------
 1 file changed, 44 insertions(+), 25 deletions(-)

diff --git a/packages/sdk/src/sdk.ts b/packages/sdk/src/sdk.ts
index 30485f2..655333a 100644
--- a/packages/sdk/src/sdk.ts
+++ b/packages/sdk/src/sdk.ts
@@ -39,7 +39,13 @@ export type StampEvent =
   | { phase: 'generating-nonce' }
   | { phase: 'building-merkle-tree' }
   | { phase: 'broadcasting'; totalCalendars: number }
-  | { phase: 'calendar-response'; calendarUrl: string; success: boolean; responsesReceived: number; totalCalendars: number }
+  | {
+      phase: 'calendar-response'
+      calendarUrl: string
+      success: boolean
+      responsesReceived: number
+      totalCalendars: number
+    }
   | { phase: 'building-proof' }
   | { phase: 'complete' }
 
@@ -59,7 +65,10 @@ export interface SDKOptions {
 /**
  * Well-known EVM chain IDs to hex for wallet_switchEthereumChain.
  */
-export const WELL_KNOWN_CHAINS: Record<number, { chainId: string; chainName: string }> = {
+export const WELL_KNOWN_CHAINS: Record<
+  number,
+  { chainId: string; chainName: string }
+> = {
   1: { chainId: '0x1', chainName: 'Ethereum Mainnet' },
   17000: { chainId: '0x4268', chainName: 'Holesky' },
   11155111: { chainId: '0xaa36a7', chainName: 'Sepolia' },
@@ -82,8 +91,8 @@ export const UTS_ABI = [
 
 export default class SDK {
   readonly calendars: URL[]
-  readonly btcRPC: BitcoinRPC
-  readonly ethRPCs: Record<number, AbstractProvider>
+  btcRPC: BitcoinRPC
+  ethRPCs: Record<number, AbstractProvider>
   web3Provider: Eip1193Provider | null = null
 
   /**
@@ -123,20 +132,6 @@ export default class SDK {
       calendars = DEFAULT_CALENDARS,
       btcRPC = new BitcoinRPC(),
       ethRPCs = {
-        1: new FallbackProvider([
-          new JsonRpcProvider('https://eth.drpc.org'),
-          new JsonRpcProvider('https://eth.llamarpc.com'),
-          new JsonRpcProvider('https://eth.llamarpc.com'),
-        ]),
-        17000: new FallbackProvider([
-          new JsonRpcProvider('https://holesky.drpc.org'),
-          new JsonRpcProvider('https://1rpc.io/holesky'),
-        ]),
-        11155111: new FallbackProvider([
-          new JsonRpcProvider('https://sepolia.drpc.org'),
-          new JsonRpcProvider('https://0xrpc.io/sep'),
-          new JsonRpcProvider('https://rpc.sepolia.org'),
-        ]),
         534352: new JsonRpcProvider('https://rpc.scroll.io'),
         534351: new JsonRpcProvider('https://sepolia-rpc.scroll.io'),
       },
@@ -197,7 +192,9 @@ export default class SDK {
    * If the wallet is on a different chain, attempts to switch to the target chain if it's well-known.
    * Returns null if no web3Provider or if switching fails.
    */
-  async getWeb3ProviderForChain(chainId: number): Promise<AbstractProvider | null> {
+  async getWeb3ProviderForChain(
+    chainId: number,
+  ): Promise<AbstractProvider | null> {
     if (!this.web3Provider) return null
 
     try {
@@ -231,7 +228,10 @@ export default class SDK {
    *
    * @param digests The digests to be stamped, each with its associated header information. Input digests can use different hash algorithms, but the internal Merkle tree will be constructed using the SDK's configured hash algorithm (default KECCAK256).
    */
-  async stamp(digests: DigestHeader[], onEvent?: StampEventCallback): Promise<DetachedTimestamp[]> {
+  async stamp(
+    digests: DigestHeader[],
+    onEvent?: StampEventCallback,
+  ): Promise<DetachedTimestamp[]> {
     const nonces: Uint8Array[] = []
     const nonceDigests: Uint8Array[] = []
 
@@ -264,11 +264,23 @@ export default class SDK {
         try {
           const result = await this.requestAttest(calendar, root)
           responsesReceived++
-          onEvent?.({ phase: 'calendar-response', calendarUrl: calendar.toString(), success: true, responsesReceived, totalCalendars: this.calendars.length })
+          onEvent?.({
+            phase: 'calendar-response',
+            calendarUrl: calendar.toString(),
+            success: true,
+            responsesReceived,
+            totalCalendars: this.calendars.length,
+          })
           return result
         } catch (error) {
           responsesReceived++
-          onEvent?.({ phase: 'calendar-response', calendarUrl: calendar.toString(), success: false, responsesReceived, totalCalendars: this.calendars.length })
+          onEvent?.({
+            phase: 'calendar-response',
+            calendarUrl: calendar.toString(),
+            success: false,
+            responsesReceived,
+            totalCalendars: this.calendars.length,
+          })
           throw error
         }
       }),
@@ -387,7 +399,10 @@ export default class SDK {
    * @param keepPending Whether to keep the original pending attestation alongside the upgraded one. Default is false (purge pending on success).
    * @returns The result of the upgrade operation, including the original and upgraded timestamps if applicable.
    */
-  async upgrade(detached: DetachedTimestamp, keepPending: boolean = false): Promise<UpgradeResult[]> {
+  async upgrade(
+    detached: DetachedTimestamp,
+    keepPending: boolean = false,
+  ): Promise<UpgradeResult[]> {
     return this.upgradeTimestamp(
       getBytes(detached.header.digest),
       detached.timestamp,
@@ -430,7 +445,9 @@ export default class SDK {
           // upgrade sub stamps
           const results = (
             await Promise.all(
-              step.steps.map((branch) => this.upgradeTimestamp(input, branch, keepPending)),
+              step.steps.map((branch) =>
+                this.upgradeTimestamp(input, branch, keepPending),
+              ),
             )
           ).flat()
           result.push(...results)
@@ -660,7 +677,9 @@ export default class SDK {
     attestation: EthereumUTSAttestation,
   ): Promise<AttestationStatus> {
     // Try web3Provider first (works in browser without CORS issues)
-    let provider: AbstractProvider | null = await this.getWeb3ProviderForChain(attestation.chain)
+    let provider: AbstractProvider | null = await this.getWeb3ProviderForChain(
+      attestation.chain,
+    )
 
     // Fallback to ethRPCs
     if (!provider) {

From 2727eede394a82f16c81d7b7fa026f58470b2807 Mon Sep 17 00:00:00 2001
From: lightsing <light.tsing@gmail.com>
Date: Wed, 25 Feb 2026 16:28:39 +0800
Subject: [PATCH 18/21] remove scroll logo from overview

---
 apps/web/src/views/HomeView.vue | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/apps/web/src/views/HomeView.vue b/apps/web/src/views/HomeView.vue
index c7b9e65..e14f887 100644
--- a/apps/web/src/views/HomeView.vue
+++ b/apps/web/src/views/HomeView.vue
@@ -172,12 +172,6 @@ function handleWalletClick() {
                 :key="chain.chainId"
                 class="flex items-center gap-0.5"
               >
-                <img
-                  v-if="SCROLL_CHAIN_IDS.has(chain.chainId)"
-                  :src="ScrollLogo"
-                  alt="Scroll"
-                  class="h-3 w-3"
-                />
                 <span
                   class="h-1.5 w-1.5 rounded-full"
                   :class="{
@@ -212,12 +206,6 @@ function handleWalletClick() {
                     class="rounded-lg bg-surface/40 px-3 py-2"
                   >
                     <div class="flex items-center gap-2">
-                      <img
-                        v-if="SCROLL_CHAIN_IDS.has(chain.chainId)"
-                        :src="ScrollLogo"
-                        alt="Scroll"
-                        class="h-4 w-4"
-                      />
                       <span
                         class="h-2 w-2 rounded-full"
                         :class="{

From 0457db85c06ee15bf1be29d15aa4cbb0412b13a1 Mon Sep 17 00:00:00 2001
From: lightsing <light.tsing@gmail.com>
Date: Wed, 25 Feb 2026 16:29:16 +0800
Subject: [PATCH 19/21] run prettier

---
 apps/web/src/components/base/StatusBadge.vue  |   9 +-
 apps/web/src/components/feed/LiveFeed.vue     |  75 ++++--
 .../src/components/stamp/StampingWorkflow.vue | 102 ++++++--
 .../src/components/terminal/HeroTerminal.vue  |  46 +++-
 .../src/components/upgrade/UpgradePanel.vue   |  42 +++-
 .../components/verify/AttestationDetail.vue   | 238 ++++++++++++++----
 .../src/components/verify/MerkleTreeViz.vue   | 153 ++++++++---
 .../components/verify/VerificationResult.vue  | 110 ++++++--
 apps/web/src/composables/useFileDigest.ts     |   5 +-
 apps/web/src/composables/useTimestampSDK.ts   |  36 ++-
 apps/web/src/composables/useWallet.ts         |  17 +-
 apps/web/src/composables/useWebSocketFeed.ts  |   9 +-
 apps/web/src/stores/app.ts                    |  50 +++-
 apps/web/src/views/HomeView.vue               | 160 +++++++++---
 packages/sdk/src/index.ts                     |   7 +-
 15 files changed, 831 insertions(+), 228 deletions(-)

diff --git a/apps/web/src/components/base/StatusBadge.vue b/apps/web/src/components/base/StatusBadge.vue
index 9a329f3..cf5522c 100644
--- a/apps/web/src/components/base/StatusBadge.vue
+++ b/apps/web/src/components/base/StatusBadge.vue
@@ -19,9 +19,12 @@ const labels: Record<string, string> = {
     :class="[
       {
         'bg-valid/10 text-valid border border-valid/30': status === 'valid',
-        'bg-invalid/10 text-invalid border border-invalid/30': status === 'invalid',
-        'bg-pending/10 text-pending border border-pending/30': status === 'pending',
-        'bg-neon-purple/10 text-neon-purple border border-neon-purple/30': status === 'partial',
+        'bg-invalid/10 text-invalid border border-invalid/30':
+          status === 'invalid',
+        'bg-pending/10 text-pending border border-pending/30':
+          status === 'pending',
+        'bg-neon-purple/10 text-neon-purple border border-neon-purple/30':
+          status === 'partial',
         'bg-white/5 text-white/50 border border-white/10': status === 'unknown',
       },
       {
diff --git a/apps/web/src/components/feed/LiveFeed.vue b/apps/web/src/components/feed/LiveFeed.vue
index 146846f..9973c30 100644
--- a/apps/web/src/components/feed/LiveFeed.vue
+++ b/apps/web/src/components/feed/LiveFeed.vue
@@ -1,7 +1,15 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { formatDistanceToNow } from 'date-fns'
-import { Activity, Globe, Clock, ChevronDown, ChevronUp, ExternalLink, AlertTriangle } from 'lucide-vue-next'
+import {
+  Activity,
+  Globe,
+  Clock,
+  ChevronDown,
+  ChevronUp,
+  ExternalLink,
+  AlertTriangle,
+} from 'lucide-vue-next'
 import GlassCard from '@/components/base/GlassCard.vue'
 import { useWebSocketFeed } from '@/composables/useWebSocketFeed'
 import ScrollLogo from '@/assets/Scroll_Logomark.svg'
@@ -66,7 +74,9 @@ function getTxUrl(chainId: number, txHash: string): string | null {
     <div class="mb-4 flex items-center justify-between">
       <div class="flex items-center gap-2">
         <Activity class="h-4 w-4 text-neon-cyan" />
-        <h3 class="font-heading text-sm font-semibold text-white/80">Live Feed</h3>
+        <h3 class="font-heading text-sm font-semibold text-white/80">
+          Live Feed
+        </h3>
       </div>
       <div class="flex items-center gap-2">
         <span
@@ -91,19 +101,30 @@ function getTxUrl(chainId: number, txHash: string): string | null {
             class="flex w-full items-center gap-3 px-3 py-2 text-left"
             @click="toggleEntry(entry.id)"
           >
-            <img v-if="SCROLL_CHAIN_IDS.has(entry.chainId)" :src="ScrollLogo" alt="Scroll" class="h-4 w-4 shrink-0" />
+            <img
+              v-if="SCROLL_CHAIN_IDS.has(entry.chainId)"
+              :src="ScrollLogo"
+              alt="Scroll"
+              class="h-4 w-4 shrink-0"
+            />
             <Globe v-else class="h-4 w-4 shrink-0 text-neon-purple" />
             <div class="min-w-0 flex-1">
               <div class="font-mono text-xs text-neon-purple">
                 {{ truncate(entry.hash) }}
               </div>
-              <div class="flex items-center gap-2 font-mono text-[10px] text-white/30">
+              <div
+                class="flex items-center gap-2 font-mono text-[10px] text-white/30"
+              >
                 <span>{{ entry.chain }}</span>
                 <span>#{{ entry.blockHeight }}</span>
                 <AlertTriangle
                   v-if="isTestnetOrUnknown(entry.chainId)"
                   class="h-3 w-3 text-pending"
-                  :title="ETHERSCAN_URLS[entry.chainId] ? 'Testnet attestation' : 'Unknown network'"
+                  :title="
+                    ETHERSCAN_URLS[entry.chainId]
+                      ? 'Testnet attestation'
+                      : 'Unknown network'
+                  "
                 />
               </div>
             </div>
@@ -111,13 +132,19 @@ function getTxUrl(chainId: number, txHash: string): string | null {
               <span class="font-mono text-[10px] text-white/20">
                 {{ formatDistanceToNow(entry.timestamp, { addSuffix: true }) }}
               </span>
-              <component :is="expandedEntries.has(entry.id) ? ChevronUp : ChevronDown" class="h-3 w-3 text-white/20" />
+              <component
+                :is="expandedEntries.has(entry.id) ? ChevronUp : ChevronDown"
+                class="h-3 w-3 text-white/20"
+              />
             </div>
           </button>
 
           <!-- Expanded details -->
           <Transition name="fade">
-            <div v-if="expandedEntries.has(entry.id)" class="border-t border-glass-border/50 px-3 pb-2 pt-1.5">
+            <div
+              v-if="expandedEntries.has(entry.id)"
+              class="border-t border-glass-border/50 px-3 pb-2 pt-1.5"
+            >
               <div class="space-y-1 font-mono text-[10px]">
                 <div class="flex items-center justify-between">
                   <span class="text-white/30">Root</span>
@@ -126,11 +153,17 @@ function getTxUrl(chainId: number, txHash: string): string | null {
                 <div class="flex items-center justify-between">
                   <span class="text-white/30">Chain</span>
                   <span class="flex items-center gap-1">
-                    <span class="text-white/50">{{ entry.chain }} ({{ entry.chainId }})</span>
+                    <span class="text-white/50"
+                      >{{ entry.chain }} ({{ entry.chainId }})</span
+                    >
                     <AlertTriangle
                       v-if="isTestnetOrUnknown(entry.chainId)"
                       class="h-2.5 w-2.5 text-pending"
-                      :title="ETHERSCAN_URLS[entry.chainId] ? 'Testnet' : 'Unknown network'"
+                      :title="
+                        ETHERSCAN_URLS[entry.chainId]
+                          ? 'Testnet'
+                          : 'Unknown network'
+                      "
                     />
                   </span>
                 </div>
@@ -149,10 +182,15 @@ function getTxUrl(chainId: number, txHash: string): string | null {
                     </a>
                   </span>
                 </div>
-                <div v-if="entry.sender" class="flex items-center justify-between">
+                <div
+                  v-if="entry.sender"
+                  class="flex items-center justify-between"
+                >
                   <span class="text-white/30">Sender</span>
                   <span class="flex items-center gap-1">
-                    <span class="text-white/50">{{ truncate(entry.sender) }}</span>
+                    <span class="text-white/50">{{
+                      truncate(entry.sender)
+                    }}</span>
                     <a
                       v-if="getAddressUrl(entry.chainId, entry.sender)"
                       :href="getAddressUrl(entry.chainId, entry.sender)!"
@@ -164,10 +202,15 @@ function getTxUrl(chainId: number, txHash: string): string | null {
                     </a>
                   </span>
                 </div>
-                <div v-if="entry.txHash" class="flex items-center justify-between">
+                <div
+                  v-if="entry.txHash"
+                  class="flex items-center justify-between"
+                >
                   <span class="text-white/30">Tx Hash</span>
                   <span class="flex items-center gap-1">
-                    <span class="text-white/50">{{ truncate(entry.txHash) }}</span>
+                    <span class="text-white/50">{{
+                      truncate(entry.txHash)
+                    }}</span>
                     <a
                       v-if="getTxUrl(entry.chainId, entry.txHash)"
                       :href="getTxUrl(entry.chainId, entry.txHash)!"
@@ -185,7 +228,11 @@ function getTxUrl(chainId: number, txHash: string): string | null {
                   class="mt-1 flex items-center gap-1.5 rounded bg-pending/10 px-2 py-1 text-pending"
                 >
                   <AlertTriangle class="h-3 w-3 shrink-0" />
-                  <span>{{ ETHERSCAN_URLS[entry.chainId] ? 'Testnet attestation — not suitable for production use' : 'Unknown network — cannot verify on-chain' }}</span>
+                  <span>{{
+                    ETHERSCAN_URLS[entry.chainId]
+                      ? 'Testnet attestation — not suitable for production use'
+                      : 'Unknown network — cannot verify on-chain'
+                  }}</span>
                 </div>
               </div>
             </div>
diff --git a/apps/web/src/components/stamp/StampingWorkflow.vue b/apps/web/src/components/stamp/StampingWorkflow.vue
index ad5374c..fe14475 100644
--- a/apps/web/src/components/stamp/StampingWorkflow.vue
+++ b/apps/web/src/components/stamp/StampingWorkflow.vue
@@ -33,13 +33,48 @@ interface WorkflowStep {
 }
 
 const steps: WorkflowStep[] = [
-  { id: 'generating-nonce', label: 'Generating Nonce', description: 'Creating random nonce for privacy', icon: KeyRound },
-  { id: 'building-merkle-tree', label: 'Building Merkle Tree', description: 'Constructing proof tree from leaves', icon: GitBranch },
-  { id: 'broadcasting', label: 'Broadcasting', description: 'Submitting to calendar nodes', icon: Radio },
-  { id: 'building-proof', label: 'Building Proof', description: 'Constructing Merkle proof paths', icon: Blocks },
-  { id: 'complete', label: 'Complete', description: 'Timestamp recorded (pending attestation)', icon: CheckCircle2 },
-  { id: 'upgrading', label: 'Polling for Upgrade', description: 'Waiting for on-chain attestation...', icon: RefreshCw },
-  { id: 'upgraded', label: 'Upgraded', description: 'Attestation confirmed on-chain', icon: ShieldCheck },
+  {
+    id: 'generating-nonce',
+    label: 'Generating Nonce',
+    description: 'Creating random nonce for privacy',
+    icon: KeyRound,
+  },
+  {
+    id: 'building-merkle-tree',
+    label: 'Building Merkle Tree',
+    description: 'Constructing proof tree from leaves',
+    icon: GitBranch,
+  },
+  {
+    id: 'broadcasting',
+    label: 'Broadcasting',
+    description: 'Submitting to calendar nodes',
+    icon: Radio,
+  },
+  {
+    id: 'building-proof',
+    label: 'Building Proof',
+    description: 'Constructing Merkle proof paths',
+    icon: Blocks,
+  },
+  {
+    id: 'complete',
+    label: 'Complete',
+    description: 'Timestamp recorded (pending attestation)',
+    icon: CheckCircle2,
+  },
+  {
+    id: 'upgrading',
+    label: 'Polling for Upgrade',
+    description: 'Waiting for on-chain attestation...',
+    icon: RefreshCw,
+  },
+  {
+    id: 'upgraded',
+    label: 'Upgraded',
+    description: 'Attestation confirmed on-chain',
+    icon: ShieldCheck,
+  },
 ]
 
 const phaseOrder: StampPhase[] = [
@@ -64,7 +99,11 @@ function getStepStatus(stepId: StampPhase) {
 }
 
 function getStepDescription(step: WorkflowStep): string {
-  if (step.id === 'broadcasting' && props.broadcastProgress && getStepStatus(step.id) === 'active') {
+  if (
+    step.id === 'broadcasting' &&
+    props.broadcastProgress &&
+    getStepStatus(step.id) === 'active'
+  ) {
     return `Calendar responses: ${props.broadcastProgress}`
   }
   return step.description
@@ -75,7 +114,9 @@ function getStepDescription(step: WorkflowStep): string {
   <GlassCard glow="purple">
     <div class="mb-4 flex items-center gap-2">
       <GitBranch class="h-4 w-4 text-neon-purple" />
-      <h3 class="font-heading text-sm font-semibold text-white/80">Stamping Pipeline</h3>
+      <h3 class="font-heading text-sm font-semibold text-white/80">
+        Stamping Pipeline
+      </h3>
     </div>
 
     <div class="space-y-1">
@@ -93,19 +134,33 @@ function getStepDescription(step: WorkflowStep): string {
           <div
             class="flex h-7 w-7 items-center justify-center rounded-full border transition-all duration-300"
             :class="{
-              'border-neon-cyan/50 bg-neon-cyan/10 text-neon-cyan': getStepStatus(step.id) === 'active',
-              'border-valid/50 bg-valid/10 text-valid': getStepStatus(step.id) === 'done',
-              'border-glass-border text-white/20': getStepStatus(step.id) === 'pending',
-              'border-invalid/50 bg-invalid/10 text-invalid': getStepStatus(step.id) === 'error',
+              'border-neon-cyan/50 bg-neon-cyan/10 text-neon-cyan':
+                getStepStatus(step.id) === 'active',
+              'border-valid/50 bg-valid/10 text-valid':
+                getStepStatus(step.id) === 'done',
+              'border-glass-border text-white/20':
+                getStepStatus(step.id) === 'pending',
+              'border-invalid/50 bg-invalid/10 text-invalid':
+                getStepStatus(step.id) === 'error',
             }"
           >
-            <CheckCircle2 v-if="getStepStatus(step.id) === 'done'" class="h-4 w-4" />
-            <AlertCircle v-else-if="getStepStatus(step.id) === 'error'" class="h-4 w-4" />
+            <CheckCircle2
+              v-if="getStepStatus(step.id) === 'done'"
+              class="h-4 w-4"
+            />
+            <AlertCircle
+              v-else-if="getStepStatus(step.id) === 'error'"
+              class="h-4 w-4"
+            />
             <component
               :is="step.icon"
               v-else
               class="h-3.5 w-3.5"
-              :class="{ 'animate-spin': getStepStatus(step.id) === 'active' && (step.id === 'upgrading') }"
+              :class="{
+                'animate-spin':
+                  getStepStatus(step.id) === 'active' &&
+                  step.id === 'upgrading',
+              }"
             />
           </div>
           <!-- Connecting line -->
@@ -125,7 +180,8 @@ function getStepDescription(step: WorkflowStep): string {
           <div
             class="font-heading text-sm font-medium transition-colors duration-300"
             :class="{
-              'text-neon-cyan glow-text-cyan': getStepStatus(step.id) === 'active',
+              'text-neon-cyan glow-text-cyan':
+                getStepStatus(step.id) === 'active',
               'text-valid': getStepStatus(step.id) === 'done',
               'text-white/30': getStepStatus(step.id) === 'pending',
               'text-invalid': getStepStatus(step.id) === 'error',
@@ -133,10 +189,18 @@ function getStepDescription(step: WorkflowStep): string {
           >
             {{ step.label }}
           </div>
-          <div class="font-mono text-[11px] text-white/30">{{ getStepDescription(step) }}</div>
+          <div class="font-mono text-[11px] text-white/30">
+            {{ getStepDescription(step) }}
+          </div>
 
           <!-- Download button inside the Complete step — visible while pending (complete or upgrading), hidden once upgraded -->
-          <div v-if="step.id === 'complete' && (phase === 'complete' || phase === 'upgrading')" class="mt-2">
+          <div
+            v-if="
+              step.id === 'complete' &&
+              (phase === 'complete' || phase === 'upgrading')
+            "
+            class="mt-2"
+          >
             <BaseButton variant="secondary" @click="emit('download')">
               <Download class="h-3.5 w-3.5" />
               Download pending .ots
diff --git a/apps/web/src/components/terminal/HeroTerminal.vue b/apps/web/src/components/terminal/HeroTerminal.vue
index 4a88a3e..b3e87c7 100644
--- a/apps/web/src/components/terminal/HeroTerminal.vue
+++ b/apps/web/src/components/terminal/HeroTerminal.vue
@@ -4,7 +4,10 @@ import { useDropZone } from '@vueuse/core'
 import { Upload, Hash, FileText, FolderOpen, X } from 'lucide-vue-next'
 import GlassCard from '@/components/base/GlassCard.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
-import { useFileDigest, type FileDigestResult } from '@/composables/useFileDigest'
+import {
+  useFileDigest,
+  type FileDigestResult,
+} from '@/composables/useFileDigest'
 import type { SecureDigestOp } from '@uts/sdk'
 
 const emit = defineEmits<{
@@ -18,7 +21,14 @@ const dirInputRef = ref<HTMLInputElement>()
 const manualHash = ref('')
 const selectedAlgorithm = ref<SecureDigestOp>('KECCAK256')
 
-const { isDigesting, progress, error: digestError, result: digestResult, digestFile, reset: resetDigest } = useFileDigest()
+const {
+  isDigesting,
+  progress,
+  error: digestError,
+  result: digestResult,
+  digestFile,
+  reset: resetDigest,
+} = useFileDigest()
 
 const { isOverDropZone } = useDropZone(dropZoneRef, {
   onDrop: handleDrop,
@@ -31,7 +41,9 @@ const isStamping = ref(false)
 
 const hasFiles = computed(() => selectedFiles.value.length > 0)
 const hasResult = computed(() => digestResult.value !== null)
-const canSubmit = computed(() => (hasFiles.value || manualHash.value.trim()) && !isStamping.value)
+const canSubmit = computed(
+  () => (hasFiles.value || manualHash.value.trim()) && !isStamping.value,
+)
 
 function handleDrop(files: File[] | null) {
   if (files && files.length > 0) {
@@ -133,7 +145,8 @@ function totalSize(): number {
       class="relative rounded-lg border-2 border-dashed p-8 text-center transition-all duration-300"
       :class="{
         'border-neon-cyan/50 bg-neon-cyan/5': isOverDropZone,
-        'border-glass-border hover:border-white/20': !isOverDropZone && !hasFiles && !isDigesting && !hasResult,
+        'border-glass-border hover:border-white/20':
+          !isOverDropZone && !hasFiles && !isDigesting && !hasResult,
         'border-valid/30 bg-valid/5': hasFiles || hasResult,
       }"
     >
@@ -149,7 +162,9 @@ function totalSize(): number {
             :style="{ width: `${progress}%` }"
           />
         </div>
-        <div class="font-mono text-xs text-white/40">{{ progress.toFixed(0) }}%</div>
+        <div class="font-mono text-xs text-white/40">
+          {{ progress.toFixed(0) }}%
+        </div>
       </div>
 
       <!-- Files selected (not yet hashed) -->
@@ -157,7 +172,10 @@ function totalSize(): number {
         <div class="flex items-center justify-center gap-2">
           <FileText class="h-5 w-5 text-neon-cyan" />
           <span class="font-heading text-sm font-semibold text-neon-cyan">
-            {{ selectedFiles.length }} file{{ selectedFiles.length > 1 ? 's' : '' }} selected
+            {{ selectedFiles.length }} file{{
+              selectedFiles.length > 1 ? 's' : ''
+            }}
+            selected
           </span>
           <button
             class="ml-2 rounded p-1 text-white/30 transition hover:bg-white/10 hover:text-white"
@@ -172,14 +190,19 @@ function totalSize(): number {
             :key="i"
             class="font-mono text-xs text-white/50"
           >
-            {{ file.name }} <span class="text-white/30">({{ formatSize(file.size) }})</span>
+            {{ file.name }}
+            <span class="text-white/30">({{ formatSize(file.size) }})</span>
           </div>
-          <div v-if="selectedFiles.length > 5" class="font-mono text-xs text-white/30">
+          <div
+            v-if="selectedFiles.length > 5"
+            class="font-mono text-xs text-white/30"
+          >
             ... and {{ selectedFiles.length - 5 }} more
           </div>
         </div>
         <div class="font-mono text-[10px] text-white/30">
-          Total: {{ formatSize(totalSize()) }} · Hash on stamp with {{ selectedAlgorithm }}
+          Total: {{ formatSize(totalSize()) }} · Hash on stamp with
+          {{ selectedAlgorithm }}
         </div>
       </div>
 
@@ -222,7 +245,10 @@ function totalSize(): number {
     </div>
 
     <!-- Error display -->
-    <div v-if="digestError" class="mt-3 rounded bg-invalid/10 px-3 py-2 font-mono text-xs text-invalid">
+    <div
+      v-if="digestError"
+      class="mt-3 rounded bg-invalid/10 px-3 py-2 font-mono text-xs text-invalid"
+    >
       &gt; Error: {{ digestError }}
     </div>
 
diff --git a/apps/web/src/components/upgrade/UpgradePanel.vue b/apps/web/src/components/upgrade/UpgradePanel.vue
index 8391139..815c7c6 100644
--- a/apps/web/src/components/upgrade/UpgradePanel.vue
+++ b/apps/web/src/components/upgrade/UpgradePanel.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { hexlify } from 'ethers/utils'
-import { FileUp, RefreshCw, Download, CheckCircle2, AlertTriangle } from 'lucide-vue-next'
+import {
+  FileUp,
+  RefreshCw,
+  Download,
+  CheckCircle2,
+  AlertTriangle,
+} from 'lucide-vue-next'
 import GlassCard from '@/components/base/GlassCard.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import AttestationDetail from '@/components/verify/AttestationDetail.vue'
@@ -37,7 +43,8 @@ async function handleOtsUpload(event: Event) {
     loadedTimestamp.value = decoded
     await verify(decoded)
   } catch (e) {
-    upgradeError.value = e instanceof Error ? e.message : 'Failed to decode .ots file'
+    upgradeError.value =
+      e instanceof Error ? e.message : 'Failed to decode .ots file'
   }
 }
 
@@ -80,13 +87,16 @@ function handleReset() {
   <GlassCard glow="purple">
     <div class="mb-4 flex items-center gap-2">
       <RefreshCw class="h-4 w-4 text-neon-purple" />
-      <h3 class="font-heading text-sm font-semibold text-white/80">Manual Upgrade</h3>
+      <h3 class="font-heading text-sm font-semibold text-white/80">
+        Manual Upgrade
+      </h3>
     </div>
 
     <!-- Upload .ots file -->
     <div v-if="!loadedTimestamp" class="space-y-4">
       <p class="font-mono text-xs text-white/40">
-        &gt; Upload a pending <span class="text-neon-purple">.ots</span> file to upgrade it with on-chain attestations
+        &gt; Upload a pending <span class="text-neon-purple">.ots</span> file to
+        upgrade it with on-chain attestations
       </p>
       <BaseButton variant="secondary" @click="otsFileRef?.click()">
         <FileUp class="h-4 w-4" />
@@ -105,7 +115,9 @@ function handleReset() {
     <div v-else class="space-y-5">
       <!-- Digest info -->
       <div class="space-y-2 rounded-lg bg-surface/60 p-4">
-        <div class="font-mono text-[10px] uppercase tracking-widest text-white/30">
+        <div
+          class="font-mono text-[10px] uppercase tracking-widest text-white/30"
+        >
           Digest ({{ loadedTimestamp.header.kind }})
         </div>
         <div class="break-all font-mono text-xs text-neon-cyan">
@@ -115,7 +127,9 @@ function handleReset() {
 
       <!-- Current attestations -->
       <div v-if="verifyAttestations.length > 0" class="space-y-2">
-        <div class="font-mono text-[10px] uppercase tracking-widest text-white/30">
+        <div
+          class="font-mono text-[10px] uppercase tracking-widest text-white/30"
+        >
           Current Attestations ({{ verifyAttestations.length }})
         </div>
         <AttestationDetail
@@ -127,7 +141,9 @@ function handleReset() {
 
       <!-- Upgrade results -->
       <div v-if="upgradeResults" class="space-y-2">
-        <div class="font-mono text-[10px] uppercase tracking-widest text-white/30">
+        <div
+          class="font-mono text-[10px] uppercase tracking-widest text-white/30"
+        >
           Upgrade Results
         </div>
         <div
@@ -152,12 +168,20 @@ function handleReset() {
 
       <!-- Actions -->
       <div class="flex flex-wrap gap-2">
-        <BaseButton variant="primary" :disabled="isUpgrading" @click="handleUpgrade">
+        <BaseButton
+          variant="primary"
+          :disabled="isUpgrading"
+          @click="handleUpgrade"
+        >
           <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': isUpgrading }" />
           {{ isUpgrading ? 'Upgrading...' : 'Upgrade Now' }}
         </BaseButton>
 
-        <BaseButton v-if="hasUpgraded" variant="secondary" @click="handleDownload">
+        <BaseButton
+          v-if="hasUpgraded"
+          variant="secondary"
+          @click="handleDownload"
+        >
           <Download class="h-4 w-4" />
           Download Upgraded .ots
         </BaseButton>
diff --git a/apps/web/src/components/verify/AttestationDetail.vue b/apps/web/src/components/verify/AttestationDetail.vue
index df2b3e3..1bbe3ee 100644
--- a/apps/web/src/components/verify/AttestationDetail.vue
+++ b/apps/web/src/components/verify/AttestationDetail.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { ChevronDown, ChevronUp, ExternalLink, AlertTriangle } from 'lucide-vue-next'
+import {
+  ChevronDown,
+  ChevronUp,
+  ExternalLink,
+  AlertTriangle,
+} from 'lucide-vue-next'
 import StatusBadge from '@/components/base/StatusBadge.vue'
 import type { AttestationStatus } from '@uts/sdk'
 import { WELL_KNOWN_CHAINS } from '@uts/sdk'
@@ -24,7 +29,8 @@ function isTestnetOrUnknown(chainId: number): boolean {
 
 function getNetworkWarning(chainId: number): string | null {
   if (MAINNET_CHAIN_IDS.has(chainId)) return null
-  if (ETHERSCAN_URLS[chainId]) return 'Testnet attestation — not suitable for production use'
+  if (ETHERSCAN_URLS[chainId])
+    return 'Testnet attestation — not suitable for production use'
   return 'Unknown network — cannot verify on-chain'
 }
 
@@ -44,12 +50,18 @@ const CHAIN_NAMES: Record<number, string> = {
   534351: 'Scroll Sepolia',
 }
 
-function statusLabel(status: string): 'valid' | 'invalid' | 'pending' | 'unknown' {
+function statusLabel(
+  status: string,
+): 'valid' | 'invalid' | 'pending' | 'unknown' {
   switch (status) {
-    case 'VALID': return 'valid'
-    case 'PENDING': return 'pending'
-    case 'INVALID': return 'invalid'
-    default: return 'unknown'
+    case 'VALID':
+      return 'valid'
+    case 'PENDING':
+      return 'pending'
+    case 'INVALID':
+      return 'invalid'
+    default:
+      return 'unknown'
   }
 }
 
@@ -65,14 +77,21 @@ function getEtherscanTxUrl(chainId: number, txHash: string): string | null {
   return `${base}/tx/${txHash}`
 }
 
-function getEtherscanAddressUrl(chainId: number, address: string): string | null {
+function getEtherscanAddressUrl(
+  chainId: number,
+  address: string,
+): string | null {
   const base = ETHERSCAN_URLS[chainId]
   if (!base) return null
   return `${base}/address/${address}`
 }
 
 function getChainName(chainId: number): string {
-  return CHAIN_NAMES[chainId] ?? WELL_KNOWN_CHAINS[chainId]?.chainName ?? `Chain ${chainId}`
+  return (
+    CHAIN_NAMES[chainId] ??
+    WELL_KNOWN_CHAINS[chainId]?.chainName ??
+    `Chain ${chainId}`
+  )
 }
 
 function truncateHex(hex: string): string {
@@ -87,24 +106,30 @@ function formatTimestamp(ts: bigint | number): string {
 </script>
 
 <template>
-  <div class="rounded-lg border border-glass-border bg-surface/40 transition-colors hover:border-white/10">
+  <div
+    class="rounded-lg border border-glass-border bg-surface/40 transition-colors hover:border-white/10"
+  >
     <!-- Header (always visible) -->
     <button
       class="flex w-full items-center gap-2 px-3 py-2.5 text-left"
       @click="expanded = !expanded"
     >
-      <StatusBadge
-        :status="statusLabel(attestation.status)"
-        size="sm"
-      />
+      <StatusBadge :status="statusLabel(attestation.status)" size="sm" />
       <span class="flex-1 font-mono text-xs text-white/60">
         <template v-if="attestation.attestation.kind === 'bitcoin'">
           Bitcoin block #{{ attestation.attestation.height }}
         </template>
         <template v-else-if="attestation.attestation.kind === 'ethereum-uts'">
           <span class="inline-flex items-center gap-1">
-            <img v-if="SCROLL_CHAIN_IDS.has(attestation.attestation.chain)" :src="ScrollLogo" alt="Scroll" class="inline h-3.5 w-3.5" />
-            {{ getChainName(attestation.attestation.chain) }} block #{{ attestation.attestation.height }}
+            <img
+              v-if="SCROLL_CHAIN_IDS.has(attestation.attestation.chain)"
+              :src="ScrollLogo"
+              alt="Scroll"
+              class="inline h-3.5 w-3.5"
+            />
+            {{ getChainName(attestation.attestation.chain) }} block #{{
+              attestation.attestation.height
+            }}
           </span>
         </template>
         <template v-else-if="attestation.attestation.kind === 'pending'">
@@ -113,11 +138,17 @@ function formatTimestamp(ts: bigint | number): string {
         <template v-else>Unknown attestation</template>
       </span>
       <AlertTriangle
-        v-if="attestation.attestation.kind === 'ethereum-uts' && isTestnetOrUnknown(attestation.attestation.chain)"
+        v-if="
+          attestation.attestation.kind === 'ethereum-uts' &&
+          isTestnetOrUnknown(attestation.attestation.chain)
+        "
         class="h-3.5 w-3.5 shrink-0 text-pending"
         :title="getNetworkWarning(attestation.attestation.chain) ?? ''"
       />
-      <component :is="expanded ? ChevronUp : ChevronDown" class="h-3.5 w-3.5 text-white/30" />
+      <component
+        :is="expanded ? ChevronUp : ChevronDown"
+        class="h-3.5 w-3.5 text-white/30"
+      />
     </button>
 
     <!-- Expanded details -->
@@ -132,12 +163,21 @@ function formatTimestamp(ts: bigint | number): string {
             </div>
             <div class="flex items-center justify-between">
               <span class="text-white/30">Block Height</span>
-              <span class="text-white/70">{{ attestation.attestation.height }}</span>
+              <span class="text-white/70">{{
+                attestation.attestation.height
+              }}</span>
             </div>
-            <template v-if="attestation.status === 'VALID' && attestation.additionalInfo?.header">
+            <template
+              v-if="
+                attestation.status === 'VALID' &&
+                attestation.additionalInfo?.header
+              "
+            >
               <div class="flex items-center justify-between">
                 <span class="text-white/30">Merkle Root</span>
-                <span class="text-white/50">{{ truncateHex(attestation.additionalInfo.header.merkleroot) }}</span>
+                <span class="text-white/50">{{
+                  truncateHex(attestation.additionalInfo.header.merkleroot)
+                }}</span>
               </div>
             </template>
           </div>
@@ -149,21 +189,42 @@ function formatTimestamp(ts: bigint | number): string {
             <div class="flex items-center justify-between">
               <span class="text-white/30">Type</span>
               <span class="flex items-center gap-1 text-neon-purple">
-                <img v-if="SCROLL_CHAIN_IDS.has(attestation.attestation.chain)" :src="ScrollLogo" alt="Scroll" class="h-3.5 w-3.5" />
+                <img
+                  v-if="SCROLL_CHAIN_IDS.has(attestation.attestation.chain)"
+                  :src="ScrollLogo"
+                  alt="Scroll"
+                  class="h-3.5 w-3.5"
+                />
                 Ethereum UTS
               </span>
             </div>
             <div class="flex items-center justify-between">
               <span class="text-white/30">Chain</span>
-              <span class="text-white/70">{{ getChainName(attestation.attestation.chain) }} ({{ attestation.attestation.chain }})</span>
+              <span class="text-white/70"
+                >{{ getChainName(attestation.attestation.chain) }} ({{
+                  attestation.attestation.chain
+                }})</span
+              >
             </div>
             <div class="flex items-center justify-between">
               <span class="text-white/30">Block Height</span>
               <span class="flex items-center gap-1">
-                <span class="text-white/70">{{ attestation.attestation.height }}</span>
+                <span class="text-white/70">{{
+                  attestation.attestation.height
+                }}</span>
                 <a
-                  v-if="getEtherscanBlockUrl(attestation.attestation.chain, attestation.attestation.height)"
-                  :href="getEtherscanBlockUrl(attestation.attestation.chain, attestation.attestation.height)!"
+                  v-if="
+                    getEtherscanBlockUrl(
+                      attestation.attestation.chain,
+                      attestation.attestation.height,
+                    )
+                  "
+                  :href="
+                    getEtherscanBlockUrl(
+                      attestation.attestation.chain,
+                      attestation.attestation.height,
+                    )!
+                  "
                   target="_blank"
                   rel="noopener"
                   class="text-neon-cyan hover:text-neon-cyan/80"
@@ -172,14 +233,33 @@ function formatTimestamp(ts: bigint | number): string {
                 </a>
               </span>
             </div>
-            <template v-if="attestation.status === 'VALID' && attestation.additionalInfo">
-              <div v-if="attestation.additionalInfo.sender" class="flex items-center justify-between">
+            <template
+              v-if="
+                attestation.status === 'VALID' && attestation.additionalInfo
+              "
+            >
+              <div
+                v-if="attestation.additionalInfo.sender"
+                class="flex items-center justify-between"
+              >
                 <span class="text-white/30">Sender</span>
                 <span class="flex items-center gap-1">
-                  <span class="text-white/50">{{ truncateHex(attestation.additionalInfo.sender) }}</span>
+                  <span class="text-white/50">{{
+                    truncateHex(attestation.additionalInfo.sender)
+                  }}</span>
                   <a
-                    v-if="getEtherscanAddressUrl(attestation.attestation.chain, attestation.additionalInfo.sender)"
-                    :href="getEtherscanAddressUrl(attestation.attestation.chain, attestation.additionalInfo.sender)!"
+                    v-if="
+                      getEtherscanAddressUrl(
+                        attestation.attestation.chain,
+                        attestation.additionalInfo.sender,
+                      )
+                    "
+                    :href="
+                      getEtherscanAddressUrl(
+                        attestation.attestation.chain,
+                        attestation.additionalInfo.sender,
+                      )!
+                    "
                     target="_blank"
                     rel="noopener"
                     class="text-neon-cyan hover:text-neon-cyan/80"
@@ -188,23 +268,58 @@ function formatTimestamp(ts: bigint | number): string {
                   </a>
                 </span>
               </div>
-              <div v-if="attestation.additionalInfo.timestamp" class="flex items-center justify-between">
+              <div
+                v-if="attestation.additionalInfo.timestamp"
+                class="flex items-center justify-between"
+              >
                 <span class="text-white/30">Timestamp</span>
-                <span class="text-white/50">{{ formatTimestamp(attestation.additionalInfo.timestamp) }}</span>
+                <span class="text-white/50">{{
+                  formatTimestamp(attestation.additionalInfo.timestamp)
+                }}</span>
               </div>
-              <div v-if="attestation.additionalInfo.root" class="flex items-center justify-between">
+              <div
+                v-if="attestation.additionalInfo.root"
+                class="flex items-center justify-between"
+              >
                 <span class="text-white/30">Root</span>
-                <span class="text-white/50">{{ truncateHex(attestation.additionalInfo.root) }}</span>
+                <span class="text-white/50">{{
+                  truncateHex(attestation.additionalInfo.root)
+                }}</span>
               </div>
             </template>
             <template v-if="attestation.attestation.metadata">
-              <div v-if="attestation.attestation.metadata.contract" class="flex items-center justify-between">
+              <div
+                v-if="attestation.attestation.metadata.contract"
+                class="flex items-center justify-between"
+              >
                 <span class="text-white/30">Contract</span>
                 <span class="flex items-center gap-1">
-                  <span class="text-white/50">{{ truncateHex(hexlify(attestation.attestation.metadata.contract as Uint8Array)) }}</span>
+                  <span class="text-white/50">{{
+                    truncateHex(
+                      hexlify(
+                        attestation.attestation.metadata.contract as Uint8Array,
+                      ),
+                    )
+                  }}</span>
                   <a
-                    v-if="getEtherscanAddressUrl(attestation.attestation.chain, hexlify(attestation.attestation.metadata.contract as Uint8Array))"
-                    :href="getEtherscanAddressUrl(attestation.attestation.chain, hexlify(attestation.attestation.metadata.contract as Uint8Array))!"
+                    v-if="
+                      getEtherscanAddressUrl(
+                        attestation.attestation.chain,
+                        hexlify(
+                          attestation.attestation.metadata
+                            .contract as Uint8Array,
+                        ),
+                      )
+                    "
+                    :href="
+                      getEtherscanAddressUrl(
+                        attestation.attestation.chain,
+                        hexlify(
+                          attestation.attestation.metadata
+                            .contract as Uint8Array,
+                        ),
+                      )!
+                    "
                     target="_blank"
                     rel="noopener"
                     class="text-neon-cyan hover:text-neon-cyan/80"
@@ -213,13 +328,36 @@ function formatTimestamp(ts: bigint | number): string {
                   </a>
                 </span>
               </div>
-              <div v-if="attestation.attestation.metadata.txHash" class="flex items-center justify-between">
+              <div
+                v-if="attestation.attestation.metadata.txHash"
+                class="flex items-center justify-between"
+              >
                 <span class="text-white/30">Tx Hash</span>
                 <span class="flex items-center gap-1">
-                  <span class="text-white/50">{{ truncateHex(hexlify(attestation.attestation.metadata.txHash as Uint8Array)) }}</span>
+                  <span class="text-white/50">{{
+                    truncateHex(
+                      hexlify(
+                        attestation.attestation.metadata.txHash as Uint8Array,
+                      ),
+                    )
+                  }}</span>
                   <a
-                    v-if="getEtherscanTxUrl(attestation.attestation.chain, hexlify(attestation.attestation.metadata.txHash as Uint8Array))"
-                    :href="getEtherscanTxUrl(attestation.attestation.chain, hexlify(attestation.attestation.metadata.txHash as Uint8Array))!"
+                    v-if="
+                      getEtherscanTxUrl(
+                        attestation.attestation.chain,
+                        hexlify(
+                          attestation.attestation.metadata.txHash as Uint8Array,
+                        ),
+                      )
+                    "
+                    :href="
+                      getEtherscanTxUrl(
+                        attestation.attestation.chain,
+                        hexlify(
+                          attestation.attestation.metadata.txHash as Uint8Array,
+                        ),
+                      )!
+                    "
                     target="_blank"
                     rel="noopener"
                     class="text-neon-cyan hover:text-neon-cyan/80"
@@ -235,7 +373,9 @@ function formatTimestamp(ts: bigint | number): string {
               class="mt-2 flex items-center gap-1.5 rounded bg-pending/10 px-2 py-1.5 font-mono text-[10px] text-pending"
             >
               <AlertTriangle class="h-3 w-3 shrink-0" />
-              <span>{{ getNetworkWarning(attestation.attestation.chain) }}</span>
+              <span>{{
+                getNetworkWarning(attestation.attestation.chain)
+              }}</span>
             </div>
           </div>
         </template>
@@ -249,14 +389,20 @@ function formatTimestamp(ts: bigint | number): string {
             </div>
             <div class="flex items-center justify-between">
               <span class="text-white/30">Calendar</span>
-              <span class="text-white/50">{{ attestation.attestation.url }}</span>
+              <span class="text-white/50">{{
+                attestation.attestation.url
+              }}</span>
             </div>
           </div>
         </template>
 
         <!-- Error info -->
         <div
-          v-if="(attestation.status === 'INVALID' || attestation.status === 'UNKNOWN') && 'error' in attestation"
+          v-if="
+            (attestation.status === 'INVALID' ||
+              attestation.status === 'UNKNOWN') &&
+            'error' in attestation
+          "
           class="mt-2 rounded border border-invalid/20 bg-invalid/5 px-2 py-1.5 font-mono text-[10px] text-invalid"
         >
           {{ attestation.error?.message }}
diff --git a/apps/web/src/components/verify/MerkleTreeViz.vue b/apps/web/src/components/verify/MerkleTreeViz.vue
index c42a816..63e4dc1 100644
--- a/apps/web/src/components/verify/MerkleTreeViz.vue
+++ b/apps/web/src/components/verify/MerkleTreeViz.vue
@@ -2,7 +2,13 @@
 import { ref } from 'vue'
 import type { Step, Attestation } from '@uts/sdk'
 import { hexlify } from 'ethers/utils'
-import { ChevronRight, ChevronDown, GitBranch, ExternalLink, AlertTriangle } from 'lucide-vue-next'
+import {
+  ChevronRight,
+  ChevronDown,
+  GitBranch,
+  ExternalLink,
+  AlertTriangle,
+} from 'lucide-vue-next'
 import { WELL_KNOWN_CHAINS } from '@uts/sdk'
 import ScrollLogo from '@/assets/Scroll_Logomark.svg'
 
@@ -40,7 +46,11 @@ const CHAIN_NAMES: Record<number, string> = {
 }
 
 function getChainName(chainId: number): string {
-  return CHAIN_NAMES[chainId] ?? WELL_KNOWN_CHAINS[chainId]?.chainName ?? `Chain ${chainId}`
+  return (
+    CHAIN_NAMES[chainId] ??
+    WELL_KNOWN_CHAINS[chainId]?.chainName ??
+    `Chain ${chainId}`
+  )
 }
 
 function getEtherscanBlockUrl(chainId: number, height: number): string | null {
@@ -53,7 +63,10 @@ function getEtherscanTxUrl(chainId: number, txHash: string): string | null {
   return base ? `${base}/tx/${txHash}` : null
 }
 
-function getEtherscanAddressUrl(chainId: number, address: string): string | null {
+function getEtherscanAddressUrl(
+  chainId: number,
+  address: string,
+): string | null {
   const base = ETHERSCAN_URLS[chainId]
   return base ? `${base}/address/${address}` : null
 }
@@ -66,7 +79,8 @@ function isTestnetOrUnknown(chainId: number): boolean {
 
 function getNetworkWarning(chainId: number): string | null {
   if (MAINNET_CHAIN_IDS.has(chainId)) return null
-  if (ETHERSCAN_URLS[chainId]) return 'Testnet attestation — not suitable for production use'
+  if (ETHERSCAN_URLS[chainId])
+    return 'Testnet attestation — not suitable for production use'
   return 'Unknown network — cannot verify on-chain'
 }
 
@@ -136,29 +150,37 @@ const currentDepth = props.depth ?? 0
 </script>
 
 <template>
-  <div class="space-y-0.5" :style="{ paddingLeft: currentDepth > 0 ? '16px' : '0' }">
-    <div
-      v-for="(step, i) in steps"
-      :key="i"
-      class="group"
-    >
+  <div
+    class="space-y-0.5"
+    :style="{ paddingLeft: currentDepth > 0 ? '16px' : '0' }"
+  >
+    <div v-for="(step, i) in steps" :key="i" class="group">
       <!-- Attestation step — collapsible with details -->
       <div v-if="step.op === 'ATTESTATION'">
         <button
           class="flex w-full items-center gap-2 rounded px-2 py-1 font-mono text-xs transition-colors hover:bg-white/5 text-left"
           @click="toggleAttestation(i)"
         >
-          <component :is="expandedAttestations.has(i) ? ChevronDown : ChevronRight" class="h-3 w-3 text-white/20" />
+          <component
+            :is="expandedAttestations.has(i) ? ChevronDown : ChevronRight"
+            class="h-3 w-3 text-white/20"
+          />
           <span :class="getOpColor(step)">{{ formatOp(step) }}</span>
           <AlertTriangle
-            v-if="step.attestation.kind === 'ethereum-uts' && isTestnetOrUnknown(step.attestation.chain)"
+            v-if="
+              step.attestation.kind === 'ethereum-uts' &&
+              isTestnetOrUnknown(step.attestation.chain)
+            "
             class="h-3 w-3 text-pending"
             :title="getNetworkWarning(step.attestation.chain) ?? ''"
           />
         </button>
 
         <Transition name="fade">
-          <div v-if="expandedAttestations.has(i)" class="ml-5 mt-1 rounded-lg border border-glass-border/50 bg-surface/30 px-3 py-2">
+          <div
+            v-if="expandedAttestations.has(i)"
+            class="ml-5 mt-1 rounded-lg border border-glass-border/50 bg-surface/30 px-3 py-2"
+          >
             <!-- Bitcoin attestation details -->
             <template v-if="step.attestation.kind === 'bitcoin'">
               <div class="space-y-1 font-mono text-[10px]">
@@ -168,7 +190,9 @@ const currentDepth = props.depth ?? 0
                 </div>
                 <div class="flex items-center justify-between">
                   <span class="text-white/30">Block Height</span>
-                  <span class="text-white/70">{{ step.attestation.height }}</span>
+                  <span class="text-white/70">{{
+                    step.attestation.height
+                  }}</span>
                 </div>
               </div>
             </template>
@@ -179,21 +203,42 @@ const currentDepth = props.depth ?? 0
                 <div class="flex items-center justify-between">
                   <span class="text-white/30">Type</span>
                   <span class="flex items-center gap-1 text-neon-purple">
-                    <img v-if="SCROLL_CHAIN_IDS.has(step.attestation.chain)" :src="ScrollLogo" alt="Scroll" class="h-3 w-3" />
+                    <img
+                      v-if="SCROLL_CHAIN_IDS.has(step.attestation.chain)"
+                      :src="ScrollLogo"
+                      alt="Scroll"
+                      class="h-3 w-3"
+                    />
                     Ethereum UTS
                   </span>
                 </div>
                 <div class="flex items-center justify-between">
                   <span class="text-white/30">Chain</span>
-                  <span class="text-white/70">{{ getChainName(step.attestation.chain) }} ({{ step.attestation.chain }})</span>
+                  <span class="text-white/70"
+                    >{{ getChainName(step.attestation.chain) }} ({{
+                      step.attestation.chain
+                    }})</span
+                  >
                 </div>
                 <div class="flex items-center justify-between">
                   <span class="text-white/30">Block Height</span>
                   <span class="flex items-center gap-1">
-                    <span class="text-white/70">{{ step.attestation.height }}</span>
+                    <span class="text-white/70">{{
+                      step.attestation.height
+                    }}</span>
                     <a
-                      v-if="getEtherscanBlockUrl(step.attestation.chain, step.attestation.height)"
-                      :href="getEtherscanBlockUrl(step.attestation.chain, step.attestation.height)!"
+                      v-if="
+                        getEtherscanBlockUrl(
+                          step.attestation.chain,
+                          step.attestation.height,
+                        )
+                      "
+                      :href="
+                        getEtherscanBlockUrl(
+                          step.attestation.chain,
+                          step.attestation.height,
+                        )!
+                      "
                       target="_blank"
                       rel="noopener"
                       class="text-neon-cyan hover:text-neon-cyan/80"
@@ -203,13 +248,36 @@ const currentDepth = props.depth ?? 0
                   </span>
                 </div>
                 <template v-if="step.attestation.metadata">
-                  <div v-if="step.attestation.metadata.contract" class="flex items-center justify-between">
+                  <div
+                    v-if="step.attestation.metadata.contract"
+                    class="flex items-center justify-between"
+                  >
                     <span class="text-white/30">Contract</span>
                     <span class="flex items-center gap-1">
-                      <span class="text-white/50">{{ truncateHex(hexlify(step.attestation.metadata.contract as Uint8Array)) }}</span>
+                      <span class="text-white/50">{{
+                        truncateHex(
+                          hexlify(
+                            step.attestation.metadata.contract as Uint8Array,
+                          ),
+                        )
+                      }}</span>
                       <a
-                        v-if="getEtherscanAddressUrl(step.attestation.chain, hexlify(step.attestation.metadata.contract as Uint8Array))"
-                        :href="getEtherscanAddressUrl(step.attestation.chain, hexlify(step.attestation.metadata.contract as Uint8Array))!"
+                        v-if="
+                          getEtherscanAddressUrl(
+                            step.attestation.chain,
+                            hexlify(
+                              step.attestation.metadata.contract as Uint8Array,
+                            ),
+                          )
+                        "
+                        :href="
+                          getEtherscanAddressUrl(
+                            step.attestation.chain,
+                            hexlify(
+                              step.attestation.metadata.contract as Uint8Array,
+                            ),
+                          )!
+                        "
                         target="_blank"
                         rel="noopener"
                         class="text-neon-cyan hover:text-neon-cyan/80"
@@ -218,13 +286,36 @@ const currentDepth = props.depth ?? 0
                       </a>
                     </span>
                   </div>
-                  <div v-if="step.attestation.metadata.txHash" class="flex items-center justify-between">
+                  <div
+                    v-if="step.attestation.metadata.txHash"
+                    class="flex items-center justify-between"
+                  >
                     <span class="text-white/30">Tx Hash</span>
                     <span class="flex items-center gap-1">
-                      <span class="text-white/50">{{ truncateHex(hexlify(step.attestation.metadata.txHash as Uint8Array)) }}</span>
+                      <span class="text-white/50">{{
+                        truncateHex(
+                          hexlify(
+                            step.attestation.metadata.txHash as Uint8Array,
+                          ),
+                        )
+                      }}</span>
                       <a
-                        v-if="getEtherscanTxUrl(step.attestation.chain, hexlify(step.attestation.metadata.txHash as Uint8Array))"
-                        :href="getEtherscanTxUrl(step.attestation.chain, hexlify(step.attestation.metadata.txHash as Uint8Array))!"
+                        v-if="
+                          getEtherscanTxUrl(
+                            step.attestation.chain,
+                            hexlify(
+                              step.attestation.metadata.txHash as Uint8Array,
+                            ),
+                          )
+                        "
+                        :href="
+                          getEtherscanTxUrl(
+                            step.attestation.chain,
+                            hexlify(
+                              step.attestation.metadata.txHash as Uint8Array,
+                            ),
+                          )!
+                        "
                         target="_blank"
                         rel="noopener"
                         class="text-neon-cyan hover:text-neon-cyan/80"
@@ -273,7 +364,9 @@ const currentDepth = props.depth ?? 0
 
       <!-- Fork step - recursive -->
       <div v-else class="mt-1">
-        <div class="flex items-center gap-2 px-2 py-1 font-mono text-xs text-neon-orange">
+        <div
+          class="flex items-center gap-2 px-2 py-1 font-mono text-xs text-neon-orange"
+        >
           <GitBranch class="h-3 w-3" />
           <span>FORK ({{ step.steps.length }} branches)</span>
         </div>
@@ -282,7 +375,9 @@ const currentDepth = props.depth ?? 0
           :key="bi"
           class="ml-2 mt-1 border-l border-glass-border pl-2"
         >
-          <div class="mb-1 font-mono text-[10px] text-white/20">branch[{{ bi }}]</div>
+          <div class="mb-1 font-mono text-[10px] text-white/20">
+            branch[{{ bi }}]
+          </div>
           <MerkleTreeViz :steps="branch" :depth="currentDepth + 1" />
         </div>
       </div>
diff --git a/apps/web/src/components/verify/VerificationResult.vue b/apps/web/src/components/verify/VerificationResult.vue
index fcdc7f8..892b1b1 100644
--- a/apps/web/src/components/verify/VerificationResult.vue
+++ b/apps/web/src/components/verify/VerificationResult.vue
@@ -1,7 +1,15 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { hexlify } from 'ethers/utils'
-import { FileUp, Search, ShieldCheck, ChevronDown, ChevronUp, FileCheck, FileX } from 'lucide-vue-next'
+import {
+  FileUp,
+  Search,
+  ShieldCheck,
+  ChevronDown,
+  ChevronUp,
+  FileCheck,
+  FileX,
+} from 'lucide-vue-next'
 import GlassCard from '@/components/base/GlassCard.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import StatusBadge from '@/components/base/StatusBadge.vue'
@@ -22,7 +30,11 @@ const {
   resetVerify,
 } = useTimestampSDK()
 
-const { digestFile, isDigesting: isDigestingOriginal, progress: digestProgress } = useFileDigest()
+const {
+  digestFile,
+  isDigesting: isDigestingOriginal,
+  progress: digestProgress,
+} = useFileDigest()
 
 const otsFileRef = ref<HTMLInputElement>()
 const originalFileRef = ref<HTMLInputElement>()
@@ -31,14 +43,21 @@ const showProofPath = ref(false)
 const originalFileMatch = ref<'match' | 'mismatch' | null>(null)
 const originalFileName = ref<string | null>(null)
 
-function mapVerifyStatus(status: VerifyStatus | null): 'valid' | 'invalid' | 'pending' | 'partial' | 'unknown' {
+function mapVerifyStatus(
+  status: VerifyStatus | null,
+): 'valid' | 'invalid' | 'pending' | 'partial' | 'unknown' {
   if (!status) return 'unknown'
   switch (status) {
-    case VerifyStatus.VALID: return 'valid'
-    case VerifyStatus.INVALID: return 'invalid'
-    case VerifyStatus.PENDING: return 'pending'
-    case VerifyStatus.PARTIAL_VALID: return 'partial'
-    default: return 'unknown'
+    case VerifyStatus.VALID:
+      return 'valid'
+    case VerifyStatus.INVALID:
+      return 'invalid'
+    case VerifyStatus.PENDING:
+      return 'pending'
+    case VerifyStatus.PARTIAL_VALID:
+      return 'partial'
+    default:
+      return 'unknown'
   }
 }
 
@@ -91,13 +110,16 @@ function handleReset() {
   <GlassCard glow="cyan">
     <div class="mb-4 flex items-center gap-2">
       <ShieldCheck class="h-4 w-4 text-neon-cyan" />
-      <h3 class="font-heading text-sm font-semibold text-white/80">Verification Dashboard</h3>
+      <h3 class="font-heading text-sm font-semibold text-white/80">
+        Verification Dashboard
+      </h3>
     </div>
 
     <!-- Upload .ots file -->
     <div v-if="!loadedTimestamp" class="space-y-4">
       <p class="font-mono text-xs text-white/40">
-        &gt; Upload a <span class="text-neon-cyan">.ots</span> file to verify a timestamp proof
+        &gt; Upload a <span class="text-neon-cyan">.ots</span> file to verify a
+        timestamp proof
       </p>
       <div class="flex gap-2">
         <BaseButton variant="secondary" @click="otsFileRef?.click()">
@@ -125,13 +147,17 @@ function handleReset() {
         />
         <div v-if="isVerifying" class="flex items-center gap-2">
           <Search class="h-4 w-4 animate-spin text-neon-cyan" />
-          <span class="font-mono text-xs text-neon-cyan">Verifying proof chain...</span>
+          <span class="font-mono text-xs text-neon-cyan"
+            >Verifying proof chain...</span
+          >
         </div>
       </div>
 
       <!-- Digest info -->
       <div class="space-y-2 rounded-lg bg-surface/60 p-4">
-        <div class="font-mono text-[10px] uppercase tracking-widest text-white/30">
+        <div
+          class="font-mono text-[10px] uppercase tracking-widest text-white/30"
+        >
           Original Digest ({{ loadedTimestamp.header.kind }})
         </div>
         <div class="break-all font-mono text-xs text-neon-cyan">
@@ -140,19 +166,30 @@ function handleReset() {
       </div>
 
       <!-- Optional: verify original file matches the header digest -->
-      <div class="space-y-2 rounded-lg border border-glass-border bg-surface/30 p-4">
-        <div class="font-mono text-[10px] uppercase tracking-widest text-white/30">
+      <div
+        class="space-y-2 rounded-lg border border-glass-border bg-surface/30 p-4"
+      >
+        <div
+          class="font-mono text-[10px] uppercase tracking-widest text-white/30"
+        >
           Verify Original File (Optional)
         </div>
         <p class="font-mono text-[10px] text-white/25">
           Upload the original file to verify it matches the .ots header digest
         </p>
         <div class="flex items-center gap-3">
-          <BaseButton variant="secondary" @click="originalFileRef?.click()" :disabled="isDigestingOriginal">
+          <BaseButton
+            variant="secondary"
+            @click="originalFileRef?.click()"
+            :disabled="isDigestingOriginal"
+          >
             <FileUp class="h-3.5 w-3.5" />
             {{ isDigestingOriginal ? 'Digesting...' : 'Upload Original' }}
           </BaseButton>
-          <span v-if="originalFileName" class="font-mono text-[10px] text-white/40">
+          <span
+            v-if="originalFileName"
+            class="font-mono text-[10px] text-white/40"
+          >
             {{ originalFileName }}
           </span>
         </div>
@@ -163,23 +200,41 @@ function handleReset() {
           @change="handleOriginalFileUpload"
         />
         <!-- Progress bar -->
-        <div v-if="isDigestingOriginal" class="h-1 w-full overflow-hidden rounded-full bg-surface">
-          <div class="h-full rounded-full bg-neon-cyan transition-all duration-150" :style="{ width: `${digestProgress}%` }" />
+        <div
+          v-if="isDigestingOriginal"
+          class="h-1 w-full overflow-hidden rounded-full bg-surface"
+        >
+          <div
+            class="h-full rounded-full bg-neon-cyan transition-all duration-150"
+            :style="{ width: `${digestProgress}%` }"
+          />
         </div>
         <!-- Match result -->
-        <div v-if="originalFileMatch === 'match'" class="flex items-center gap-2 rounded-lg bg-valid/10 px-3 py-2">
+        <div
+          v-if="originalFileMatch === 'match'"
+          class="flex items-center gap-2 rounded-lg bg-valid/10 px-3 py-2"
+        >
           <FileCheck class="h-4 w-4 text-valid" />
-          <span class="font-mono text-xs text-valid">File digest matches — this is the original file</span>
+          <span class="font-mono text-xs text-valid"
+            >File digest matches — this is the original file</span
+          >
         </div>
-        <div v-else-if="originalFileMatch === 'mismatch'" class="flex items-center gap-2 rounded-lg bg-invalid/10 px-3 py-2">
+        <div
+          v-else-if="originalFileMatch === 'mismatch'"
+          class="flex items-center gap-2 rounded-lg bg-invalid/10 px-3 py-2"
+        >
           <FileX class="h-4 w-4 text-invalid" />
-          <span class="font-mono text-xs text-invalid">File digest does NOT match the .ots header</span>
+          <span class="font-mono text-xs text-invalid"
+            >File digest does NOT match the .ots header</span
+          >
         </div>
       </div>
 
       <!-- Attestation details (collapsible) -->
       <div v-if="verifyAttestations.length > 0" class="space-y-2">
-        <div class="font-mono text-[10px] uppercase tracking-widest text-white/30">
+        <div
+          class="font-mono text-[10px] uppercase tracking-widest text-white/30"
+        >
           Attestations ({{ verifyAttestations.length }})
         </div>
         <AttestationDetail
@@ -194,7 +249,10 @@ function handleReset() {
         class="flex w-full items-center gap-2 rounded-lg border border-glass-border px-4 py-2.5 text-left font-mono text-xs text-white/50 transition hover:border-white/20 hover:text-white/70"
         @click="showProofPath = !showProofPath"
       >
-        <component :is="showProofPath ? ChevronUp : ChevronDown" class="h-4 w-4" />
+        <component
+          :is="showProofPath ? ChevronUp : ChevronDown"
+          class="h-4 w-4"
+        />
         {{ showProofPath ? 'Hide' : 'Show' }} Proof Path
       </button>
 
@@ -213,9 +271,7 @@ function handleReset() {
       </div>
 
       <!-- Reset -->
-      <BaseButton variant="secondary" @click="handleReset">
-        Reset
-      </BaseButton>
+      <BaseButton variant="secondary" @click="handleReset"> Reset </BaseButton>
     </div>
   </GlassCard>
 </template>
diff --git a/apps/web/src/composables/useFileDigest.ts b/apps/web/src/composables/useFileDigest.ts
index ec401be..4bea4fc 100644
--- a/apps/web/src/composables/useFileDigest.ts
+++ b/apps/web/src/composables/useFileDigest.ts
@@ -30,7 +30,10 @@ export function useFileDigest() {
     progress.value = 0
     const estimatedMs = Math.max(
       MIN_DURATION_MS,
-      Math.min(((totalBytes * fileCount) / ESTIMATED_THROUGHPUT) * 1000, MAX_DURATION_MS),
+      Math.min(
+        ((totalBytes * fileCount) / ESTIMATED_THROUGHPUT) * 1000,
+        MAX_DURATION_MS,
+      ),
     )
     const intervalMs = 50
     const steps = estimatedMs / intervalMs
diff --git a/apps/web/src/composables/useTimestampSDK.ts b/apps/web/src/composables/useTimestampSDK.ts
index 6c91230..579e91c 100644
--- a/apps/web/src/composables/useTimestampSDK.ts
+++ b/apps/web/src/composables/useTimestampSDK.ts
@@ -1,11 +1,5 @@
 import { ref, shallowRef } from 'vue'
-import {
-  SDK,
-  VerifyStatus,
-  UpgradeStatus,
-  Decoder,
-  Encoder,
-} from '@uts/sdk'
+import { SDK, VerifyStatus, UpgradeStatus, Decoder, Encoder } from '@uts/sdk'
 import type {
   DetachedTimestamp,
   AttestationStatus,
@@ -37,7 +31,10 @@ export function getSDK(): SDK {
   return _sdkInstance
 }
 
-export function resetSDK(options?: { calendars?: URL[]; web3Provider?: Eip1193Provider | null }) {
+export function resetSDK(options?: {
+  calendars?: URL[]
+  web3Provider?: Eip1193Provider | null
+}) {
   _sdkInstance = new SDK({
     timeout: 15000,
     calendars: options?.calendars,
@@ -63,11 +60,16 @@ function triggerDownload(blob: Blob, fileName: string) {
 
 export function downloadOtsFile(stamp: DetachedTimestamp, fileName?: string) {
   const encoded = Encoder.encodeDetachedTimestamp(stamp)
-  const blob = new Blob([encoded as BlobPart], { type: 'application/octet-stream' })
+  const blob = new Blob([encoded as BlobPart], {
+    type: 'application/octet-stream',
+  })
   triggerDownload(blob, fileName ? `${fileName}.ots` : 'timestamp.ots')
 }
 
-async function downloadStampsAsZip(stamps: DetachedTimestamp[], names: string[]) {
+async function downloadStampsAsZip(
+  stamps: DetachedTimestamp[],
+  names: string[],
+) {
   const zip = new JSZip()
   for (let i = 0; i < stamps.length; i++) {
     const fileName = names[i] ?? `file-${i}`
@@ -96,7 +98,10 @@ export function useTimestampSDK() {
 
   let upgradeTimer: ReturnType<typeof setInterval> | null = null
 
-  async function stamp(digests: DigestHeader[], fileNames?: string[]): Promise<DetachedTimestamp[]> {
+  async function stamp(
+    digests: DigestHeader[],
+    fileNames?: string[],
+  ): Promise<DetachedTimestamp[]> {
     stampPhase.value = 'generating-nonce'
     stampError.value = null
     stampResult.value = null
@@ -157,7 +162,10 @@ export function useTimestampSDK() {
     }
   }
 
-  function startUpgradePolling(stamps: DetachedTimestamp[], keepPending?: boolean) {
+  function startUpgradePolling(
+    stamps: DetachedTimestamp[],
+    keepPending?: boolean,
+  ) {
     stopUpgradePolling()
     stampPhase.value = 'upgrading'
 
@@ -174,7 +182,9 @@ export function useTimestampSDK() {
         }
         upgradeResults.value = allResults
 
-        const hasUpgraded = allResults.some((r) => r.status === UpgradeStatus.Upgraded)
+        const hasUpgraded = allResults.some(
+          (r) => r.status === UpgradeStatus.Upgraded,
+        )
         if (hasUpgraded) {
           stampPhase.value = 'upgraded'
           // Auto-download upgraded timestamps with correct per-file names
diff --git a/apps/web/src/composables/useWallet.ts b/apps/web/src/composables/useWallet.ts
index d076207..6c221c2 100644
--- a/apps/web/src/composables/useWallet.ts
+++ b/apps/web/src/composables/useWallet.ts
@@ -9,7 +9,9 @@ const isConnecting = ref(false)
 const walletError = ref<string | null>(null)
 
 const isConnected = computed(() => walletAddress.value !== null)
-const hasWallet = computed(() => typeof window !== 'undefined' && !!(window as any).ethereum)
+const hasWallet = computed(
+  () => typeof window !== 'undefined' && !!(window as any).ethereum,
+)
 
 const CHAIN_NAMES: Record<number, string> = {
   1: 'Ethereum',
@@ -37,7 +39,8 @@ export function useWallet() {
   async function connect() {
     const ethereum = getEip1193Provider()
     if (!ethereum) {
-      walletError.value = 'No wallet detected. Install MetaMask or another EIP-1193 wallet.'
+      walletError.value =
+        'No wallet detected. Install MetaMask or another EIP-1193 wallet.'
       return
     }
 
@@ -60,7 +63,8 @@ export function useWallet() {
       ;(ethereum as any).on?.('accountsChanged', handleAccountsChanged)
       ;(ethereum as any).on?.('chainChanged', handleChainChanged)
     } catch (e) {
-      walletError.value = e instanceof Error ? e.message : 'Failed to connect wallet'
+      walletError.value =
+        e instanceof Error ? e.message : 'Failed to connect wallet'
     } finally {
       isConnecting.value = false
     }
@@ -69,8 +73,11 @@ export function useWallet() {
   function disconnect() {
     const ethereum = getEip1193Provider()
     if (ethereum) {
-    ;(ethereum as any).removeListener?.('accountsChanged', handleAccountsChanged)
-    ;(ethereum as any).removeListener?.('chainChanged', handleChainChanged)
+      ;(ethereum as any).removeListener?.(
+        'accountsChanged',
+        handleAccountsChanged,
+      )
+      ;(ethereum as any).removeListener?.('chainChanged', handleChainChanged)
     }
     walletAddress.value = null
     walletChainId.value = null
diff --git a/apps/web/src/composables/useWebSocketFeed.ts b/apps/web/src/composables/useWebSocketFeed.ts
index eab8a1b..555e8f3 100644
--- a/apps/web/src/composables/useWebSocketFeed.ts
+++ b/apps/web/src/composables/useWebSocketFeed.ts
@@ -43,7 +43,9 @@ export function useWebSocketFeed() {
   }
 
   /** Poll web3Provider. Returns the wallet's chainId on success, or null. */
-  async function fetchEventsFromWeb3(web3Provider: Eip1193Provider): Promise<number | null> {
+  async function fetchEventsFromWeb3(
+    web3Provider: Eip1193Provider,
+  ): Promise<number | null> {
     try {
       const provider = new BrowserProvider(web3Provider)
       const network = await provider.getNetwork()
@@ -88,7 +90,10 @@ export function useWebSocketFeed() {
   }
 
   /** Poll ethRPCs, skipping chains already covered by web3Provider. */
-  async function fetchEventsFromRPCs(sdk: SDK, skipChainIds: Set<number> = new Set()) {
+  async function fetchEventsFromRPCs(
+    sdk: SDK,
+    skipChainIds: Set<number> = new Set(),
+  ) {
     const chainIds = Object.keys(sdk.ethRPCs).map(Number)
 
     for (const chainId of chainIds) {
diff --git a/apps/web/src/stores/app.ts b/apps/web/src/stores/app.ts
index 930c940..d876af3 100644
--- a/apps/web/src/stores/app.ts
+++ b/apps/web/src/stores/app.ts
@@ -35,7 +35,9 @@ function loadCalendars(): string[] {
   try {
     const stored = localStorage.getItem(STORAGE_KEY)
     if (stored) return JSON.parse(stored)
-  } catch { /* ignore */ }
+  } catch {
+    /* ignore */
+  }
   return DEFAULT_CALENDARS.map((u) => u.toString())
 }
 
@@ -43,7 +45,10 @@ function saveCalendars(urls: string[]) {
   localStorage.setItem(STORAGE_KEY, JSON.stringify(urls))
 }
 
-function loadSettings(): { keepPending: boolean; internalHashAlgo: SecureDigestOp } {
+function loadSettings(): {
+  keepPending: boolean
+  internalHashAlgo: SecureDigestOp
+} {
   try {
     const stored = localStorage.getItem(SETTINGS_KEY)
     if (stored) {
@@ -53,11 +58,16 @@ function loadSettings(): { keepPending: boolean; internalHashAlgo: SecureDigestO
         internalHashAlgo: parsed.internalHashAlgo ?? 'KECCAK256',
       }
     }
-  } catch { /* ignore */ }
+  } catch {
+    /* ignore */
+  }
   return { keepPending: false, internalHashAlgo: 'KECCAK256' }
 }
 
-function saveSettings(settings: { keepPending: boolean; internalHashAlgo: SecureDigestOp }) {
+function saveSettings(settings: {
+  keepPending: boolean
+  internalHashAlgo: SecureDigestOp
+}) {
   localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings))
 }
 
@@ -65,7 +75,9 @@ function loadCustomChains(): number[] | null {
   try {
     const stored = localStorage.getItem(CHAINS_KEY)
     if (stored) return JSON.parse(stored)
-  } catch { /* ignore */ }
+  } catch {
+    /* ignore */
+  }
   return null
 }
 
@@ -77,7 +89,9 @@ function loadChainRpcs(): Record<number, string> {
   try {
     const stored = localStorage.getItem(CHAIN_RPCS_KEY)
     if (stored) return JSON.parse(stored)
-  } catch { /* ignore */ }
+  } catch {
+    /* ignore */
+  }
   return {}
 }
 
@@ -106,7 +120,9 @@ export const useAppStore = defineStore('app', () => {
   const recentStamps = ref<DetachedTimestamp[]>([])
 
   // Chain IDs to monitor (persisted or default from SDK)
-  const customChainIds = ref<number[]>(loadCustomChains() ?? getDefaultChainIds())
+  const customChainIds = ref<number[]>(
+    loadCustomChains() ?? getDefaultChainIds(),
+  )
 
   // Custom RPC endpoints per chain (persisted)
   const customRpcs = ref<Record<number, string>>(loadChainRpcs())
@@ -115,10 +131,14 @@ export const useAppStore = defineStore('app', () => {
     () => ethChains.value.filter((c) => c.status === 'online').length,
   )
 
-  watch(calendarUrls, (urls) => {
-    saveCalendars(urls)
-    resetSDK({ calendars: urls.map((u) => new URL(u)) })
-  }, { deep: true })
+  watch(
+    calendarUrls,
+    (urls) => {
+      saveCalendars(urls)
+      resetSDK({ calendars: urls.map((u) => new URL(u)) })
+    },
+    { deep: true },
+  )
 
   watch(keepPending, (val) => {
     saveSettings({ keepPending: val, internalHashAlgo: internalHashAlgo.value })
@@ -149,7 +169,9 @@ export const useAppStore = defineStore('app', () => {
       if (rpc) {
         try {
           provider = new JsonRpcProvider(rpc)
-        } catch { /* ignore */ }
+        } catch {
+          /* ignore */
+        }
       }
       if (!provider) {
         provider = sdk.getEthProvider(chain.chainId)
@@ -157,7 +179,9 @@ export const useAppStore = defineStore('app', () => {
       if (!provider && PUBLIC_RPCS[chain.chainId]) {
         try {
           provider = new JsonRpcProvider(PUBLIC_RPCS[chain.chainId])
-        } catch { /* ignore */ }
+        } catch {
+          /* ignore */
+        }
       }
 
       if (!provider) {
diff --git a/apps/web/src/views/HomeView.vue b/apps/web/src/views/HomeView.vue
index e14f887..36d85ad 100644
--- a/apps/web/src/views/HomeView.vue
+++ b/apps/web/src/views/HomeView.vue
@@ -1,6 +1,18 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
-import { Zap, Shield, Settings, Plus, Trash2, RotateCcw, Wallet, RefreshCw, ChevronDown, Pencil, Check } from 'lucide-vue-next'
+import {
+  Zap,
+  Shield,
+  Settings,
+  Plus,
+  Trash2,
+  RotateCcw,
+  Wallet,
+  RefreshCw,
+  ChevronDown,
+  Pencil,
+  Check,
+} from 'lucide-vue-next'
 import HeroTerminal from '@/components/terminal/HeroTerminal.vue'
 import StampingWorkflow from '@/components/stamp/StampingWorkflow.vue'
 import VerificationResult from '@/components/verify/VerificationResult.vue'
@@ -8,7 +20,11 @@ import UpgradePanel from '@/components/upgrade/UpgradePanel.vue'
 import LiveFeed from '@/components/feed/LiveFeed.vue'
 import GlassCard from '@/components/base/GlassCard.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
-import { useTimestampSDK, setWeb3Provider, getSDK } from '@/composables/useTimestampSDK'
+import {
+  useTimestampSDK,
+  setWeb3Provider,
+  getSDK,
+} from '@/composables/useTimestampSDK'
 import { useWallet } from '@/composables/useWallet'
 import type { FileDigestResult } from '@/composables/useFileDigest'
 import { useAppStore } from '@/stores/app'
@@ -17,7 +33,13 @@ import ScrollLogo from '@/assets/Scroll_Logomark.svg'
 const SCROLL_CHAIN_IDS = new Set([534352, 534351])
 
 const store = useAppStore()
-const { stampPhase, stampError, broadcastProgress, stamp, downloadPendingStamp } = useTimestampSDK()
+const {
+  stampPhase,
+  stampError,
+  broadcastProgress,
+  stamp,
+  downloadPendingStamp,
+} = useTimestampSDK()
 const {
   walletAddress,
   walletChainName,
@@ -33,7 +55,9 @@ const {
 type TabId = 'stamp' | 'verify' | 'upgrade'
 const savedTab = localStorage.getItem('uts-active-tab') as TabId | null
 const validTabs: TabId[] = ['stamp', 'verify', 'upgrade']
-const activeTab = ref<TabId>(savedTab && validTabs.includes(savedTab) ? savedTab : 'stamp')
+const activeTab = ref<TabId>(
+  savedTab && validTabs.includes(savedTab) ? savedTab : 'stamp',
+)
 const showWorkflow = ref(false)
 const showSettings = ref(false)
 const showChainPanel = ref(false)
@@ -146,17 +170,27 @@ function handleWalletClick() {
 <template>
   <div class="scanlines min-h-screen bg-deep-black">
     <!-- Header -->
-    <header class="relative z-50 border-b border-glass-border bg-midnight/80 backdrop-blur-md">
-      <div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
+    <header
+      class="relative z-50 border-b border-glass-border bg-midnight/80 backdrop-blur-md"
+    >
+      <div
+        class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4"
+      >
         <div class="flex items-center gap-3">
-          <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-neon-cyan/10">
+          <div
+            class="flex h-8 w-8 items-center justify-center rounded-lg bg-neon-cyan/10"
+          >
             <Zap class="h-5 w-5 text-neon-cyan" />
           </div>
           <div>
-            <h1 class="font-heading text-lg font-bold tracking-tight text-white">
+            <h1
+              class="font-heading text-lg font-bold tracking-tight text-white"
+            >
               UTS
             </h1>
-            <p class="font-mono text-[10px] text-white/30">Universal Timestamps</p>
+            <p class="font-mono text-[10px] text-white/30">
+              Universal Timestamps
+            </p>
           </div>
         </div>
 
@@ -181,7 +215,12 @@ function handleWalletClick() {
                   }"
                 />
               </span>
-              <span>{{ store.onlineCount }}/{{ store.ethChains.length }} chains</span>
+              <span
+                >{{ store.onlineCount }}/{{
+                  store.ethChains.length
+                }}
+                chains</span
+              >
               <ChevronDown class="h-3 w-3" />
             </button>
 
@@ -192,7 +231,9 @@ function handleWalletClick() {
                 class="absolute right-0 top-full z-50 mt-2 w-80 rounded-xl border border-glass-border bg-midnight/95 p-4 shadow-xl backdrop-blur-lg"
               >
                 <div class="mb-3 flex items-center justify-between">
-                  <h4 class="font-heading text-xs font-semibold text-white/80">Ethereum Chains</h4>
+                  <h4 class="font-heading text-xs font-semibold text-white/80">
+                    Ethereum Chains
+                  </h4>
                   <BaseButton variant="secondary" @click="store.checkChains()">
                     <RefreshCw class="h-3 w-3" />
                     Refresh
@@ -211,22 +252,35 @@ function handleWalletClick() {
                         :class="{
                           'bg-valid': chain.status === 'online',
                           'bg-invalid': chain.status === 'offline',
-                          'bg-pending animate-glow-pulse': chain.status === 'checking',
+                          'bg-pending animate-glow-pulse':
+                            chain.status === 'checking',
                         }"
                       />
                       <div class="min-w-0 flex-1">
-                        <div class="font-heading text-xs font-medium text-white/70">{{ chain.name }}</div>
-                        <div class="font-mono text-[10px] text-white/30">Chain ID: {{ chain.chainId }}</div>
+                        <div
+                          class="font-heading text-xs font-medium text-white/70"
+                        >
+                          {{ chain.name }}
+                        </div>
+                        <div class="font-mono text-[10px] text-white/30">
+                          Chain ID: {{ chain.chainId }}
+                        </div>
                       </div>
                       <div class="text-right">
-                        <div class="font-mono text-[10px]" :class="{
-                          'text-valid': chain.status === 'online',
-                          'text-invalid': chain.status === 'offline',
-                          'text-pending': chain.status === 'checking',
-                        }">
+                        <div
+                          class="font-mono text-[10px]"
+                          :class="{
+                            'text-valid': chain.status === 'online',
+                            'text-invalid': chain.status === 'offline',
+                            'text-pending': chain.status === 'checking',
+                          }"
+                        >
                           {{ chain.status }}
                         </div>
-                        <div v-if="chain.latency" class="font-mono text-[10px] text-white/20">
+                        <div
+                          v-if="chain.latency"
+                          class="font-mono text-[10px] text-white/20"
+                        >
                           {{ chain.latency }}ms
                         </div>
                       </div>
@@ -246,7 +300,10 @@ function handleWalletClick() {
                       </button>
                     </div>
                     <!-- RPC editing row -->
-                    <div v-if="editingChainRpc === chain.chainId" class="mt-1.5 flex gap-1.5">
+                    <div
+                      v-if="editingChainRpc === chain.chainId"
+                      class="mt-1.5 flex gap-1.5"
+                    >
                       <input
                         v-model="editRpcValue"
                         type="text"
@@ -262,7 +319,10 @@ function handleWalletClick() {
                         <Check class="h-3 w-3" />
                       </button>
                     </div>
-                    <div v-else-if="chain.rpcUrl" class="mt-0.5 truncate font-mono text-[10px] text-white/20 pl-4">
+                    <div
+                      v-else-if="chain.rpcUrl"
+                      class="mt-0.5 truncate font-mono text-[10px] text-white/20 pl-4"
+                    >
                       {{ chain.rpcUrl }}
                     </div>
                   </div>
@@ -270,7 +330,9 @@ function handleWalletClick() {
 
                 <!-- Add custom chain -->
                 <div class="mt-3 border-t border-glass-border pt-3">
-                  <div class="font-mono text-[10px] text-white/30 mb-1.5">Add chain by ID</div>
+                  <div class="font-mono text-[10px] text-white/30 mb-1.5">
+                    Add chain by ID
+                  </div>
                   <div class="flex gap-2">
                     <input
                       v-model="newChainId"
@@ -285,7 +347,13 @@ function handleWalletClick() {
                     </BaseButton>
                   </div>
                   <div class="mt-2 flex justify-end">
-                    <BaseButton variant="secondary" @click="store.resetChains(); store.checkChains()">
+                    <BaseButton
+                      variant="secondary"
+                      @click="
+                        store.resetChains()
+                        store.checkChains()
+                      "
+                    >
                       <RotateCcw class="h-3 w-3" />
                       Reset defaults
                     </BaseButton>
@@ -297,9 +365,10 @@ function handleWalletClick() {
           <!-- Connect Wallet button -->
           <button
             class="flex items-center gap-2 rounded-lg border px-3 py-1.5 font-mono text-xs transition-all"
-            :class="walletConnected
-              ? 'border-valid/30 bg-valid/5 text-valid hover:bg-valid/10'
-              : 'border-neon-purple/30 bg-neon-purple/5 text-neon-purple hover:bg-neon-purple/10'
+            :class="
+              walletConnected
+                ? 'border-valid/30 bg-valid/5 text-valid hover:bg-valid/10'
+                : 'border-neon-purple/30 bg-neon-purple/5 text-neon-purple hover:bg-neon-purple/10'
             "
             :disabled="walletConnecting"
             @click="handleWalletClick"
@@ -308,7 +377,9 @@ function handleWalletClick() {
             <span v-if="walletConnecting">Connecting...</span>
             <span v-else-if="walletConnected && walletAddress">
               {{ truncateAddress(walletAddress) }}
-              <span v-if="walletChainName" class="text-white/30"> · {{ walletChainName }}</span>
+              <span v-if="walletChainName" class="text-white/30">
+                · {{ walletChainName }}</span
+              >
             </span>
             <span v-else-if="!hasWallet">No Wallet</span>
             <span v-else>Connect Wallet</span>
@@ -328,11 +399,16 @@ function handleWalletClick() {
 
     <!-- Calendar settings panel -->
     <Transition name="fade">
-      <div v-if="showSettings" class="border-b border-glass-border bg-midnight/60 backdrop-blur-md">
+      <div
+        v-if="showSettings"
+        class="border-b border-glass-border bg-midnight/60 backdrop-blur-md"
+      >
         <div class="mx-auto max-w-6xl px-6 py-4">
           <GlassCard>
             <div class="mb-3 flex items-center justify-between">
-              <h3 class="font-heading text-sm font-semibold text-white/80">Calendar Nodes</h3>
+              <h3 class="font-heading text-sm font-semibold text-white/80">
+                Calendar Nodes
+              </h3>
               <BaseButton variant="secondary" @click="store.resetCalendars()">
                 <RotateCcw class="h-3 w-3" />
                 Reset to defaults
@@ -344,7 +420,9 @@ function handleWalletClick() {
                 :key="i"
                 class="flex items-center gap-2"
               >
-                <span class="flex-1 truncate rounded border border-glass-border bg-surface px-3 py-1.5 font-mono text-xs text-white/60">
+                <span
+                  class="flex-1 truncate rounded border border-glass-border bg-surface px-3 py-1.5 font-mono text-xs text-white/60"
+                >
                   {{ url }}
                 </span>
                 <button
@@ -378,14 +456,21 @@ function handleWalletClick() {
                   class="h-4 w-4 rounded border-glass-border bg-surface accent-neon-cyan"
                 />
                 <div>
-                  <div class="font-heading text-xs font-medium text-white/70">Keep pending attestations after upgrade</div>
-                  <div class="font-mono text-[10px] text-white/30">When enabled, the original pending attestation is preserved alongside the upgraded one</div>
+                  <div class="font-heading text-xs font-medium text-white/70">
+                    Keep pending attestations after upgrade
+                  </div>
+                  <div class="font-mono text-[10px] text-white/30">
+                    When enabled, the original pending attestation is preserved
+                    alongside the upgraded one
+                  </div>
                 </div>
               </label>
 
               <!-- Internal hash algorithm -->
               <div class="flex items-center gap-3">
-                <label class="font-heading text-xs font-medium text-white/70">Internal hash algorithm</label>
+                <label class="font-heading text-xs font-medium text-white/70"
+                  >Internal hash algorithm</label
+                >
                 <select
                   v-model="store.internalHashAlgo"
                   class="rounded border border-glass-border bg-surface px-2 py-1 font-mono text-xs text-neon-cyan outline-none focus:border-neon-cyan/40"
@@ -393,7 +478,9 @@ function handleWalletClick() {
                   <option value="KECCAK256">Keccak-256</option>
                   <option value="SHA256">SHA-256</option>
                 </select>
-                <span class="font-mono text-[10px] text-white/30">Used for Merkle tree construction</span>
+                <span class="font-mono text-[10px] text-white/30"
+                  >Used for Merkle tree construction</span
+                >
               </div>
             </div>
           </GlassCard>
@@ -406,7 +493,8 @@ function handleWalletClick() {
       <!-- Title -->
       <div class="mb-10 text-center">
         <h2 class="font-heading text-3xl font-bold tracking-tight text-white">
-          Decentralized <span class="text-neon-cyan glow-text-cyan">Timestamping</span>
+          Decentralized
+          <span class="text-neon-cyan glow-text-cyan">Timestamping</span>
         </h2>
         <p class="mt-2 font-mono text-sm text-white/40">
           Cryptographic proof of existence anchored to Ethereum
diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts
index 8ebe0b2..c909047 100644
--- a/packages/sdk/src/index.ts
+++ b/packages/sdk/src/index.ts
@@ -28,7 +28,12 @@ export * from './bmt.ts'
 
 export { default as BitcoinRPC } from './rpc/btc.ts'
 
-export { default as SDK, DEFAULT_CALENDARS, UTS_ABI, WELL_KNOWN_CHAINS } from './sdk.ts'
+export {
+  default as SDK,
+  DEFAULT_CALENDARS,
+  UTS_ABI,
+  WELL_KNOWN_CHAINS,
+} from './sdk.ts'
 export type { SDKOptions, StampEvent, StampEventCallback } from './sdk.ts'
 
 export const hexlify = (obj: any): any => {

From 738a4884ae9adfa4e5a7279060ce2d72cf3f94dc Mon Sep 17 00:00:00 2001
From: lightsing <light.tsing@gmail.com>
Date: Wed, 25 Feb 2026 16:30:56 +0800
Subject: [PATCH 20/21] fix

---
 apps/web/src/views/HomeView.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/views/HomeView.vue b/apps/web/src/views/HomeView.vue
index 36d85ad..26c79d5 100644
--- a/apps/web/src/views/HomeView.vue
+++ b/apps/web/src/views/HomeView.vue
@@ -350,8 +350,10 @@ function handleWalletClick() {
                     <BaseButton
                       variant="secondary"
                       @click="
-                        store.resetChains()
-                        store.checkChains()
+                        () => {
+                          store.resetChains()
+                          store.checkChains()
+                        }
                       "
                     >
                       <RotateCcw class="h-3 w-3" />

From de35d26a01815275001a30a61213d9edddcbf765 Mon Sep 17 00:00:00 2001
From: lightsing <light.tsing@gmail.com>
Date: Wed, 25 Feb 2026 16:42:50 +0800
Subject: [PATCH 21/21] adjust space

---
 apps/web/src/views/HomeView.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/views/HomeView.vue b/apps/web/src/views/HomeView.vue
index 26c79d5..b03d321 100644
--- a/apps/web/src/views/HomeView.vue
+++ b/apps/web/src/views/HomeView.vue
@@ -544,9 +544,9 @@ function handleWalletClick() {
       </div>
 
       <!-- Content -->
-      <div class="grid grid-cols-1 gap-6 lg:grid-cols-5">
+      <div class="grid grid-cols-1 gap-6 lg:grid-cols-7">
         <!-- Main panel (3/5) -->
-        <div class="space-y-6 lg:col-span-3">
+        <div class="space-y-6 lg:col-span-4">
           <!-- Stamp tab (preserved with v-show) -->
           <div v-show="activeTab === 'stamp'" class="space-y-6">
             <HeroTerminal
@@ -575,7 +575,7 @@ function handleWalletClick() {
         </div>
 
         <!-- Sidebar (2/5) -->
-        <div class="space-y-6 lg:col-span-2">
+        <div class="space-y-6 lg:col-span-3">
           <LiveFeed />
         </div>
       </div>