From 4efa1d11828848cd42e7b8c617ab30d4acc772b7 Mon Sep 17 00:00:00 2001
From: Jonathan Sykes <telemagnadon@gmail.com>
Date: Tue, 30 Jun 2026 06:43:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20convert=20to=20PWA=20=E2=80=94=20OPFS?=
 =?UTF-8?q?=20storage,=20service=20worker,=20Bun/Hono=20server?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move native shells (Zig/src, Tauri/src-tauri, app.zon, releases) to legacy/
- Add Bun + Hono server with yt-dlp proxy endpoints (search, channel, streams,
  download), libsql (concurrent SQLite fork) for fingerprint-keyed playlist/
  history sync, and static file serving for the frontend
- Add Dockerfile + docker-compose.yml (single container, volume-mounted DB)
- Add frontend/sw.js: app-shell cache-first, /api/* network-only,
  thumbnails stale-while-revalidate, SW_UPDATE_AVAILABLE broadcast,
  SKIP_WAITING message handler for seamless auto-update
- Add frontend/manifest.webmanifest: standalone PWA, vermilion theme,
  search/history shortcuts
- Add frontend/icons/icon-{192,512}.png: generated PWA icons
- Add frontend/fingerprint.js: canvas+UA djb2 fingerprint, localStorage-cached,
  exposes window.getFingerprint() for server-side playlist keying
- Add frontend/opfs.js: full OPFS video store (writeFromResponse streams
  directly without full-file buffering), exposes window.OPFS
- Add scripts/make-pwa-icons.js: regenerate icons without external deps
- Patch frontend/app.js: WEB mode detection, webFetch + opfs* bridge wrappers,
  API object routes to WEB helpers when no native bridge present,
  Player.loadVideo handles OPFS blob URLs + revokes them on next load,
  SW registration + update banner in boot()
- Patch frontend/index.html: manifest link, theme-color, Apple PWA meta,
  CSP blob:/worker-src, fingerprint.js + opfs.js script tags
- Patch frontend/styles.css: .toast-update + .toast-reload-btn for update banner
- Native Tauri/Zig builds unchanged — all new code is additive via WEB flag
---
 Dockerfile                                    |  51 +++
 docker-compose.yml                            |  25 ++
 frontend/fingerprint.js                       |  81 ++++
 frontend/icons/icon-192.png                   | Bin 0 -> 1669 bytes
 frontend/icons/icon-512.png                   | Bin 0 -> 4609 bytes
 frontend/manifest.webmanifest                 |  41 ++
 frontend/opfs.js                              | 194 ++++++++++
 frontend/sw.js                                | 136 +++++++
 app.zon => legacy/app.zon                     |   0
 .../releases}/YT Player_1.0.0_x64-setup.exe   | Bin
 .../releases}/YT Player_1.0.0_x64_en-US.msi   | Bin
 .../releases}/YTPlayer_1.0.0_x64-setup.exe    | Bin
 .../releases}/YTPlayer_1.0.0_x64_en-US.msi    | Bin
 {releases => legacy/releases}/ytplayer.exe    | Bin
 {src-tauri => legacy/src-tauri}/Cargo.lock    |   0
 {src-tauri => legacy/src-tauri}/Cargo.toml    |   0
 {src-tauri => legacy/src-tauri}/build.rs      |   0
 .../src-tauri}/capabilities/default.json      |   0
 {src-tauri => legacy/src-tauri}/src/main.rs   |   0
 .../src-tauri}/tauri.conf.json                |   0
 {src => legacy/src}/bridge.zig                |   0
 {src => legacy/src}/main.zig                  |   0
 scripts/make-pwa-icons.js                     | 113 ++++++
 server/db.js                                  | 141 +++++++
 server/package.json                           |  15 +
 server/server.js                              | 352 ++++++++++++++++++
 26 files changed, 1149 insertions(+)
 create mode 100644 Dockerfile
 create mode 100644 docker-compose.yml
 create mode 100644 frontend/fingerprint.js
 create mode 100644 frontend/icons/icon-192.png
 create mode 100644 frontend/icons/icon-512.png
 create mode 100644 frontend/manifest.webmanifest
 create mode 100644 frontend/opfs.js
 create mode 100644 frontend/sw.js
 rename app.zon => legacy/app.zon (100%)
 rename {releases => legacy/releases}/YT Player_1.0.0_x64-setup.exe (100%)
 rename {releases => legacy/releases}/YT Player_1.0.0_x64_en-US.msi (100%)
 rename {releases => legacy/releases}/YTPlayer_1.0.0_x64-setup.exe (100%)
 rename {releases => legacy/releases}/YTPlayer_1.0.0_x64_en-US.msi (100%)
 rename {releases => legacy/releases}/ytplayer.exe (100%)
 rename {src-tauri => legacy/src-tauri}/Cargo.lock (100%)
 rename {src-tauri => legacy/src-tauri}/Cargo.toml (100%)
 rename {src-tauri => legacy/src-tauri}/build.rs (100%)
 rename {src-tauri => legacy/src-tauri}/capabilities/default.json (100%)
 rename {src-tauri => legacy/src-tauri}/src/main.rs (100%)
 rename {src-tauri => legacy/src-tauri}/tauri.conf.json (100%)
 rename {src => legacy/src}/bridge.zig (100%)
 rename {src => legacy/src}/main.zig (100%)
 create mode 100644 scripts/make-pwa-icons.js
 create mode 100644 server/db.js
 create mode 100644 server/package.json
 create mode 100644 server/server.js

diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..f94423a
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,51 @@
+# ============================================================================
+# YT Player PWA — Docker image
+#
+# Base: oven/bun:1-debian (Bun runtime on Debian slim)
+# yt-dlp: downloaded from GitHub releases at build time (stays current)
+# libsql: embedded via @libsql/client (no separate DB container needed)
+#
+# Build:  docker compose build
+# Run:    docker compose up
+# ============================================================================
+
+FROM oven/bun:1-debian
+
+# ---- System dependencies ----
+# python3 is required by yt-dlp for some extraction paths
+# ca-certificates for HTTPS fetches from yt-dlp
+RUN apt-get update -qq && \
+    apt-get install -y --no-install-recommends \
+      curl \
+      python3 \
+      ca-certificates && \
+    rm -rf /var/lib/apt/lists/*
+
+# ---- Install yt-dlp ----
+RUN curl -fsSL \
+      https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp \
+      -o /usr/local/bin/yt-dlp && \
+    chmod +x /usr/local/bin/yt-dlp
+
+WORKDIR /app
+
+# ---- Install Node/Bun deps ----
+COPY server/package.json ./
+RUN bun install --production
+
+# ---- Copy server source ----
+COPY server/ ./
+
+# ---- Copy built frontend (served as static files from ./public) ----
+COPY frontend/ ./public/
+
+# ---- Persistent data directory (volume-mounted) ----
+RUN mkdir -p /app/data
+
+EXPOSE 3000
+
+# Healthcheck — ping the version endpoint
+HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
+  CMD curl -sf http://localhost:3000/api/version || exit 1
+
+CMD ["bun", "server.js"]
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..e00ee2a
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,25 @@
+services:
+  ytplayer:
+    build: .
+    restart: unless-stopped
+    ports:
+      - "${PORT:-3000}:3000"
+    volumes:
+      # libsql DB file persists across container rebuilds
+      - ytplayer-data:/app/data
+    environment:
+      PORT: "3000"
+      DB_PATH: "/app/data/ytplayer.db"
+      APP_VERSION: "1.0.0"
+      # Optional: override yt-dlp binary path if you mount a custom one
+      # YTDLP_PATH: "/usr/local/bin/yt-dlp"
+    healthcheck:
+      test: ["CMD", "curl", "-sf", "http://localhost:3000/api/version"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+      start_period: 15s
+
+volumes:
+  ytplayer-data:
+    driver: local
diff --git a/frontend/fingerprint.js b/frontend/fingerprint.js
new file mode 100644
index 0000000..5a8ff6c
--- /dev/null
+++ b/frontend/fingerprint.js
@@ -0,0 +1,81 @@
+/* ============================================================================
+ * fingerprint.js — stable browser identifier for server-side playlist sync
+ *
+ * Combines canvas rendering, UA, screen geometry, and hardware hints into a
+ * short hex string. The result is stored in localStorage so the same ID
+ * survives page reloads, and only regenerated when localStorage is cleared.
+ *
+ * Not for tracking — used exclusively so the server can associate playlist
+ * and history rows with this browser without requiring a login.
+ * ========================================================================== */
+
+(function () {
+  'use strict';
+
+  // djb2 hash over a string → 32-bit unsigned int
+  function djb2(str) {
+    let h = 5381;
+    for (let i = 0; i < str.length; i++) {
+      h = (((h << 5) + h) + str.charCodeAt(i)) >>> 0;
+    }
+    return h;
+  }
+
+  // Render a small canvas to capture GPU/font rasterisation differences,
+  // then hash the pixel data. Falls back to empty string if canvas is blocked.
+  function canvasHash() {
+    try {
+      const c = document.createElement('canvas');
+      c.width = 200; c.height = 40;
+      const ctx = c.getContext('2d');
+      if (!ctx) return '';
+      ctx.textBaseline = 'top';
+      ctx.font = '14px Arial';
+      ctx.fillStyle = '#f60';
+      ctx.fillRect(125, 1, 62, 20);
+      ctx.fillStyle = '#069';
+      ctx.fillText('YTPlayer🎵', 2, 15);
+      ctx.fillStyle = 'rgba(102,204,0,0.7)';
+      ctx.fillText('YTPlayer🎵', 4, 17);
+      return djb2(c.toDataURL()).toString(16);
+    } catch {
+      return '';
+    }
+  }
+
+  function generateFingerprint() {
+    const parts = [
+      navigator.userAgent || '',
+      String(screen.width) + 'x' + String(screen.height),
+      String(screen.colorDepth),
+      Intl.DateTimeFormat().resolvedOptions().timeZone || '',
+      navigator.language || '',
+      String(navigator.hardwareConcurrency || 0),
+      String(navigator.deviceMemory || 0),
+      canvasHash(),
+    ];
+    // Combine all component hashes into one 16-char hex fingerprint
+    const combined = parts.reduce((acc, p) => acc + '|' + p, '');
+    const h1 = djb2(combined);
+    const h2 = djb2(combined.split('').reverse().join(''));
+    return h1.toString(16).padStart(8, '0') + h2.toString(16).padStart(8, '0');
+  }
+
+  window.getFingerprint = function getFingerprint() {
+    try {
+      let fp = localStorage.getItem('_ytpfp');
+      if (!fp || fp.length < 8) {
+        fp = generateFingerprint();
+        localStorage.setItem('_ytpfp', fp);
+      }
+      return fp;
+    } catch {
+      // localStorage blocked (e.g. private mode on some browsers) — generate
+      // ephemeral fingerprint that survives the page session via a closure.
+      if (!window._ytpfpEphemeral) {
+        window._ytpfpEphemeral = generateFingerprint();
+      }
+      return window._ytpfpEphemeral;
+    }
+  };
+}());
diff --git a/frontend/icons/icon-192.png b/frontend/icons/icon-192.png
new file mode 100644
index 0000000000000000000000000000000000000000..87286ae799008ce2307bda7fb5a9aae6202bd23b
GIT binary patch
literal 1669
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

literal 0
HcmV?d00001

diff --git a/frontend/icons/icon-512.png b/frontend/icons/icon-512.png
new file mode 100644
index 0000000000000000000000000000000000000000..31316a8304a3db3abaad7bdb8581f8a9c9ac55ea
GIT binary patch
literal 4609
zcmZ`-d0bOh_CFzzIBLk)I%O|*7!@jnD4U7`juw=NU_}<$;;0}3qD4r>X0g`NR;4mR
zP>@0k4-~gp5Y#k_<s-ON;9&tp2^LYFTNEE650cD%xJ>>19R7KSvwY8T?>+b2d>ghb
zh%?@HJOFT(EMD{}fEgmqU>pm5$j`4)0Fy2(S+pSh^MjAtMfFoxmNY)ic48j-=DqNL
z+&fq_ZH+af&04!v^<HA*N6vGCixzd(^uO1>vA@fwB;$u_!^jsM)Tngh@5hy;$@u*g
z6SbJxd5SdoC4YlE&eHNQ)4gC{cS9?~HJXyv)}F*2-`5slrW^sAXE+JFT@C*6RQ2<!
z96PWfd;`u?qoG_MkWUr+tZ%{DcCsA;osDf7`4Ow99~XTS5kYCq6k7@9Clh$$*^Ev#
z8CPym;I|td##4`%E6Cf-Dehvc<Q$A^2bcG$i)+vON$=lgLDD|;k=k>J{*eVad1~dB
zD>!?cY%o~2dhS1og-q>iTvTM)k`y}s8VK!h(ZT1=Vm??WP{&t9QhW#tr5?{nKxGPx
zq%2)ysPoJKis$-!Qm7wNUxJHzpI`}mcsNxYWZ8w7oglo3i~7Q_glS+OK|PKY6ISCO
zs6f3i64^4en=w89dx2y%C|n5NOfNBYX9ouY|E-R(N}wzl+PVsT=XtqgCMePfW!7df
z)x@@g@V)8`tF|iX7iElqsf5xep0a>|V9GMLK=K6k%GJ9>@zi#v_R|Xeost4c3n)AZ
z<<<w7BOhE>Qn}r$2=)XJ6snIP!|i6;RTcV&d!Ao({BS*JjkxG}W3c~Xh$<#;i68n6
zHyAiD`xnwdatG&HLOV}f=y;f1$dsKD==ySa1}z9D6TSv5<~SL4PZQVcV<-kgdk7be
zMhpDy!5X>K)r3l<QYO?*7k5a@NhU+~F)lJDV~#8c&r?6s+&4+22~5bEE*>iV*zi{<
zD<W^{2iUT|7W%{FbpQbicv5iQP|xfU4SB(o<~}ZbVuPyRV#zb@<3QAhOn~v94Ko9l
z$Jl^rL`m~_Z)}T|qo%&KOlWTakbOB3!1)3V;E(|~yFfO$nYKeafAZSbj_!vsd!&+W
z>Byv+Hi<PtSUv;5V$3Ilt^Jk-yBl5yv6q&Vh+*{ZA|^EUqOgCWee~~U_GqLTKQW+p
z7C>2<N33zk6NF#9@$`nM;>r?qZ6JGkW|UFpOs7H{OreRnUSNFCA@YGT%eVMNZ0(81
z8zI2q4ai#r`8{J(Bopp$La8liYto!O!hlmt9ZdtrS#a%NbeeCek0p-OeyKrf)~K#y
zDTO%tZ%$&uhM9EqMEUf`sSx1y4!fYxo2?*QMd!Sp>VN8M3t_un7wZ*}pCsrN&{$Su
z^&lFW($f)QTh8~lx?kB}c(Xun5tZBzm8!7}=4Hh&6BF`{98mJbPj+?L@<)Cq_0Z|f
zgt-ashHX%H9%NVJF{zcd(gs?tpCI+j&dEr~b}`s7yw4%w>R?lZtd|dE8Tq)zrpI|A
z^xIdF>Fn7Pky?|RVT571f$FiU_ZHS2#-(hnq;kkK+|Ih<9Y^UIohY-Cv;w0N)K?K!
zoxmi9gjrBlvkR9xX-8OaaAP56iYTMw`4*RYgzZE6YYC0RAr#lLv!srDZ8ZcWxnQMC
zzM3$U>Tub0JlLNrjAg+V`6}uR^v*<RB;L%nZX$=q<hH^7PQr;u-X2axGae)&`#o5x
zjba(iilweI9{dZj9$}@9iVqPh(8XZCy|374tSPqR+Z`jHnaeMuP!D0HGZgb^InR)~
zeI4?$;z!bhB}XM$hT+Y&7f==}PLdw%S(QVQtPEyifxv&8upU(>+}$v`{T4DPKSQDd
zr)TS{e0+qJZ2}EfxD6?1uV5z5%^-%%Qh#88!=pIr78I|8fS{2=Nsu<t8d_S<2{bc$
zK1WdfPcWU$CQlT_782K6&bCKonj23HvF#5c)3i!*oB4Ae)yTeLTYg)jKocrVN2;|Y
zxc+Z1Dv4XAH#=nq>LRIIW>p?2nn#6_ChZlF<z_`vaSJnP%@JI0UyTwek0nIh-;wL(
zb>v7+F!H?K25V-7^Hn4LdpP@(qp@b@ZrW5HO~q=zsT4V?eq?yK)sxp{txNUuvKKNF
zS4jvDvvRae$_MlPW+<{~cr~8HYQKcc+M}tPT3fWiTF(kf9i!eyY1o#NbH4Q2-@WzD
z*Q_g^5yUfd0a~e`HFCd5#Uf<vxsj-`5O}DbT^K|GjN(ZX<-a1N`}uw;duheN;L<sZ
z4|GfJP^>HAHRPEc<_NSpjv773Lw@p#J_?wGP%6~q*00ivx+O1=T7^e}U!j6SvsJ;R
zA)TJc0+(RT&Z(Ek=M5cR!f6h*Wb{tde#)F2>c|5-%f~2;JhPKd%*mmO9NyVLQ)xeu
zbH3iOzdQTISp*v*_iNtd-4?@*>yRC&CGaHM=V*ro-H0G+I0;EKl|^`1CKPpN_uoM3
zaRq)4gfusk@Cc2gqgg~`goe<>TH;wKY8hK9rsf+h523A=TU&wam}`o=v!BqWSb=ex
zbs<{%<inVT)99fZ?m5NTzeM0}*uzH+Z!W$nSUTgVj=a00!&5lz*fG+lA)Bs7dlaQy
zU4oW%aSG31Q1ECMlY*r|M|aRz$i@4Yy;Z|nFN9TIV62Sd(O8Etjhnm)#o(Dur0?#d
z^Iqv<IF?6eR2@MTJ0)fJZa-qj-&dV)Y`=hZnA4tk%5KdZ+D*CKSV!M7bMf_<#zmfz
z-D{*Z13xy*KbiWr_unv$V>>$SxwVbBj`LtGLSGd_q<=kF)P34ijgmf<Z;XiYr?GH>
z)M@vcY=iNLEq@<6{ar%(fWE9s2T6$|(Gt2HCWo}0bPNJ#gF_gdpi4A0x&k#K2bbm4
z%@wG_I3#yq&GRzp%4DsijyBMy-oj~VO426Bo#xi9q*5C?XbN?)r48|w9ij2p(b`_b
z@7Y{U%zkvI09C5kS)6-&3hk-MMJ&0^r>P(p@y6S9i(H)JCQiJ4h^E+X;)vU)D?66O
zw<3rH!ee~#*!DO=UjHhDE?dcA^2}FhbbSZ0W~bCP@`frBEuVNfW&bOWK9rB}d)%yx
zs6-p&exkj6Rkr?boc)L62@kdl%0Ik{jNU=-Wm^qtvjf{7uNoRaM{4Z+tU=ZM?~xii
zW!|dnKWKR%kzt-f@52W?u|ybxB3)mCHFJ*Uq52#<K_1wCif#=5J<R9`ng`BQeMTGC
z-o%rbfgb3epV2>8@Ox%~^txUCSp1=IZQG2Y*ml_gISN0(0>zi_W-$Kv9*XZ$fn+Fb
z4}yQBCVg|NX^$dI=M_$Gs4jOy?)C#nmUe<vS}gNXeb)TF9ltFrSQFV(Ol#I)y6K8~
zqE9KkDLdf3f|_qOLN~SE0*O?64y{yct3c!1vk9sGscAmJ_2XyL+wg{l^fmKtKqY+6
zGi;RoMyKXcC~?=`4RP0rlTkxfkt0x-ls$Z0fZWDX^PvlcRh3QL<37wqchV)SbiN{{
zP51b0Eu-c;taQ#^bT3tXN+faCBIk$0C>!QwRLrD1c=HEQA0UtAa>;S+09rkpu`4Bo
z>MHTypiRxkn<qv2A$bbAC1itW(QEGF&6ZJCG|Sa+MV5&|tEt4B$4B|lEN8=R+03O<
z)w3YZem52QjL}HnhljD!34A&)!3@JZ+2#<bsy7G8F){-hQP|Vb)yuw*u+eZ;O@ID)
z*XRGq_Q#*4VbZEe9Yaw{U|rG{+4Ym|MvGAnu#wxQK5jVuIsdND|B}sAZRz6L@_jRh
z-Frlk+C}1Ng`Q9*C(d{AlHWNXy&0L>cGbt@Xws>)N>`o!^Q1L4R+7ISvqEzos`a1d
zzoPileSf^3+1e)5$6kBqq*Qq?{mh|Ph%MykZ&qG^0xBbhi{0NnyV0R}&X>0B<iMeI
zRC6(pR%^4uq~@TAF<FBS4QT&k#PsCK>@+%%%^jPkUyp13*WktFJ-U?tYvw7Arg8w3
zGY2v0L{QkFk=IV$fks|B^|2xGWeo<6pEX!;z`DbShn@@2C~9OparB980omp;1sk?(
z5<u^bX9NCTa9mS{hHH8}eK{*X0KORr=Z(Z0pTUcbXck}ndeYre#t@o=cDCgg!*&4t
z+=U#ORP$JgUJ06o9B=|?*S8dE(9rrIi8cwcg+PF#9eM7it#A+}IXI_%3|pKlrU4Xw
zbm40A7@Ibj$8M7_L7u+mrTNL$F-HSwqXVX&q{`=`EO70JV9`NeK6UD{4%Mme#(mfy
zq!rnM!ahcWwjxCRfUYtWgnUg>q3JMV({D(&x4w-=3h2J-P8VX}?@aADkR9yoOGnH=
z>aqVy>LUp7B9x{hKPc~ZaR9x1OQfra90shc(2u6)OQrz-EE%UsYK}8JVnJ#=mFu5E
z<S?N;Sod^9E(riWdSpp@aPD{r%u}~<<EZTn?F~#n;8Y-44~i^8IeGzew1=ZBDNFw>
zgmR1p_OaCC?kIx&7f8ud*ZAD1i4>!k#fU(6-Ok+*zz`C+Xs|ulKMJC%Ne9&+&b0>l
zG_jBVD7k|r!xrl<qIbWRF~v=6)fDXiIV@hHJNFcK2gq_05AiCKPRu>Q2(Tc0MVqmN
zagZ8A9gj<Gj^7&3lug3W6Sz>a02IlDGSh2*M&DNSLf)%h5gAGCeD#2qOE$x%aKd-X
zAeJy??4502O<p#a87lObR&Tp|DZ>t2ms7d+YH|Wgc0!=rgJs|S4l)0M>3{thOPB|l
zm|i=8aRCM^^nRHbmkGTBUFMB)@*D_b3EySxeqzSeG*JA7@C^xa7O#h>6Qn~Wx{d<i
zDEdJFXKkat%dmxmA=GjFgKg9RqDfq|FDr^tF!mOzcTIK`zkp5^dF$mb6shRfgw`(w
zj?2K?U0lC@9maKqphERR&j4cKMD00DKasPF5;C8J5XuGTsb_unJYg0tl94N=>W8Ja
z(3NL&bayySHkm0B3Da%7F<8131ahOJ+oNB|Ahtq4n9dYcn%JA}uIRb;GwL_!Z^<Xi
L79Ibm@XP-InXbjq

literal 0
HcmV?d00001

diff --git a/frontend/manifest.webmanifest b/frontend/manifest.webmanifest
new file mode 100644
index 0000000..fe6f6ae
--- /dev/null
+++ b/frontend/manifest.webmanifest
@@ -0,0 +1,41 @@
+{
+  "name": "YT Player",
+  "short_name": "YTPlayer",
+  "description": "Ad-free YouTube player — search, play, and keep playlists offline. No login, no tracking.",
+  "display": "standalone",
+  "orientation": "any",
+  "start_url": "/",
+  "scope": "/",
+  "theme_color": "#1a1311",
+  "background_color": "#1a1311",
+  "categories": ["music", "entertainment"],
+  "icons": [
+    {
+      "src": "/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "screenshots": [],
+  "shortcuts": [
+    {
+      "name": "Search",
+      "short_name": "Search",
+      "url": "/?view=search",
+      "description": "Search YouTube"
+    },
+    {
+      "name": "History",
+      "short_name": "History",
+      "url": "/?view=history",
+      "description": "Recently watched videos"
+    }
+  ]
+}
diff --git a/frontend/opfs.js b/frontend/opfs.js
new file mode 100644
index 0000000..08f6845
--- /dev/null
+++ b/frontend/opfs.js
@@ -0,0 +1,194 @@
+/* ============================================================================
+ * opfs.js — Origin Private File System video storage for PWA mode
+ *
+ * Exposes window.OPFS with methods that mirror the Tauri cache_* commands
+ * so app.js can call them transparently in WEB mode.
+ *
+ * Videos are stored under the OPFS root at:
+ *   videos/<videoId>.<ext>
+ *
+ * Object URLs created by getFileUrl() are tracked so they can be revoked
+ * when no longer needed — call OPFS.revokeUrl(url) after the <video> unloads.
+ *
+ * OPFS is available in all modern browsers (Chrome 86+, Firefox 111+,
+ * Safari 15.2+). Calls degrade gracefully if the API is absent.
+ * ========================================================================== */
+
+(function () {
+  'use strict';
+
+  // Root directory handle, lazily initialised
+  let _rootPromise = null;
+
+  async function getRoot() {
+    if (!_rootPromise) {
+      _rootPromise = (async () => {
+        const root = await navigator.storage.getDirectory();
+        return root.getDirectoryHandle('videos', { create: true });
+      })();
+    }
+    return _rootPromise;
+  }
+
+  // Iterate the videos/ directory and find a file whose stem matches videoId
+  // (ignoring the extension). Returns [FileSystemFileHandle, filename] or null.
+  async function findHandle(videoId) {
+    const dir = await getRoot();
+    for await (const [name, handle] of dir.entries()) {
+      if (handle.kind !== 'file') continue;
+      const dot = name.lastIndexOf('.');
+      const stem = dot > -1 ? name.slice(0, dot) : name;
+      if (stem === videoId) return [handle, name];
+    }
+    return null;
+  }
+
+  // Extension → MIME type for Content-Type headers on playback
+  function extToMime(ext) {
+    const map = { mp4: 'video/mp4', webm: 'video/webm', mkv: 'video/x-matroska',
+                  m4a: 'audio/mp4', ogg: 'audio/ogg', opus: 'audio/ogg' };
+    return map[ext] || 'application/octet-stream';
+  }
+
+  const _blobUrls = new Set();
+
+  window.OPFS = {
+    // Does a file exist for this videoId?
+    async hasVideo(videoId) {
+      try {
+        return (await findHandle(videoId)) !== null;
+      } catch {
+        return false;
+      }
+    },
+
+    // Return a blob: URL usable as <video src>. Returns null if not cached.
+    // The caller is responsible for calling OPFS.revokeUrl(url) when done.
+    async getFileUrl(videoId) {
+      try {
+        const found = await findHandle(videoId);
+        if (!found) return null;
+        const [handle, name] = found;
+        const file = await handle.getFile();
+        const ext = name.slice(name.lastIndexOf('.') + 1);
+        const blob = new Blob([await file.arrayBuffer()], { type: extToMime(ext) });
+        const url = URL.createObjectURL(blob);
+        _blobUrls.add(url);
+        return url;
+      } catch {
+        return null;
+      }
+    },
+
+    // Revoke an object URL previously returned by getFileUrl().
+    revokeUrl(url) {
+      if (url && _blobUrls.has(url)) {
+        URL.revokeObjectURL(url);
+        _blobUrls.delete(url);
+      }
+    },
+
+    // Stream a fetch Response body into OPFS. Uses a writable stream so only
+    // a small chunk lives in memory at a time (no full-file buffering).
+    // Falls back to ArrayBuffer if WritableStream is unavailable.
+    async writeFromResponse(videoId, ext, response) {
+      const dir = await getRoot();
+      const filename = videoId + '.' + (ext || 'mp4');
+
+      // Write to a temporary file first so a partial download doesn't leave
+      // a corrupt permanent entry.
+      const tmpName = filename + '.part';
+      const tmpHandle = await dir.getFileHandle(tmpName, { create: true });
+
+      try {
+        if ('createWritable' in tmpHandle) {
+          const writable = await tmpHandle.createWritable();
+          try {
+            if (response.body && typeof response.body.pipeTo === 'function') {
+              await response.body.pipeTo(writable);
+            } else {
+              // Safari < 16.4 doesn't support pipeTo — buffer the whole response
+              const buf = await response.arrayBuffer();
+              await writable.write(buf);
+              await writable.close();
+            }
+          } catch (err) {
+            await writable.abort();
+            throw err;
+          }
+        } else {
+          // Fallback: buffer entirely (older browsers)
+          const buf = await response.arrayBuffer();
+          const writable = await tmpHandle.createWritable();
+          await writable.write(buf);
+          await writable.close();
+        }
+
+        // Rename tmp → final. OPFS doesn't have rename, so: read + write + delete.
+        const finalHandle = await dir.getFileHandle(filename, { create: true });
+        const finalWritable = await finalHandle.createWritable();
+        const tmpFile = await tmpHandle.getFile();
+        await finalWritable.write(await tmpFile.arrayBuffer());
+        await finalWritable.close();
+      } finally {
+        // Remove .part file regardless
+        try { await dir.removeEntry(tmpName); } catch { /* already gone */ }
+      }
+    },
+
+    // List all cached videos — returns [{ id, size, name }]
+    async listVideos() {
+      const dir = await getRoot();
+      const items = [];
+      try {
+        for await (const [name, handle] of dir.entries()) {
+          if (handle.kind !== 'file') continue;
+          // Skip .part temporary files
+          if (name.endsWith('.part')) continue;
+          const dot = name.lastIndexOf('.');
+          const id = dot > -1 ? name.slice(0, dot) : name;
+          const file = await handle.getFile();
+          items.push({ id, name, size: file.size });
+        }
+      } catch { /* OPFS not available */ }
+      return items;
+    },
+
+    // Total bytes stored
+    async totalSize() {
+      const items = await this.listVideos();
+      return items.reduce((s, i) => s + i.size, 0);
+    },
+
+    // Delete one video
+    async deleteVideo(videoId) {
+      try {
+        const found = await findHandle(videoId);
+        if (!found) return;
+        const [, name] = found;
+        const dir = await getRoot();
+        await dir.removeEntry(name);
+      } catch { /* already gone */ }
+    },
+
+    // Delete all cached videos
+    async clearAll() {
+      try {
+        const dir = await getRoot();
+        const names = [];
+        for await (const [name] of dir.entries()) names.push(name);
+        await Promise.all(names.map((n) => dir.removeEntry(n).catch(() => {})));
+        // Revoke any outstanding blob URLs
+        for (const url of _blobUrls) URL.revokeObjectURL(url);
+        _blobUrls.clear();
+      } catch { /* OPFS not available */ }
+    },
+
+    // Is the OPFS API supported in this browser?
+    isSupported() {
+      return typeof navigator !== 'undefined' &&
+             typeof navigator.storage !== 'undefined' &&
+             typeof navigator.storage.getDirectory === 'function';
+    },
+  };
+}());
diff --git a/frontend/sw.js b/frontend/sw.js
new file mode 100644
index 0000000..302bd6b
--- /dev/null
+++ b/frontend/sw.js
@@ -0,0 +1,136 @@
+/* ============================================================================
+ * sw.js — YT Player Service Worker
+ *
+ * Strategy:
+ *   App shell (HTML/CSS/JS)    → cache-first, versioned cache
+ *   /api/* requests            → network-only (never cache yt-dlp results)
+ *   /api/download/*            → network-only (streamed binary, never cache)
+ *   YouTube thumbnails (i.ytimg.com) → stale-while-revalidate
+ *   Everything else            → network, fallback to cache
+ *
+ * Auto-update flow:
+ *   1. New SW installs alongside the old one.
+ *   2. activate: broadcast SW_UPDATE_AVAILABLE to all clients.
+ *   3. Client shows "Update ready" banner.
+ *   4. User clicks → client sends { type: 'SKIP_WAITING' }.
+ *   5. SW calls skipWaiting() → takes over → client reloads.
+ * ========================================================================== */
+
+const VERSION = 'v1.0.0';   // ← bump this on every deploy to bust the cache
+const CACHE   = 'ytplayer-' + VERSION;
+
+// Files that form the installable app shell.
+const SHELL = [
+  '/',
+  '/index.html',
+  '/styles.css',
+  '/async-guard.js',
+  '/fingerprint.js',
+  '/opfs.js',
+  '/app.js',
+  '/manifest.webmanifest',
+  '/icons/icon-192.png',
+  '/icons/icon-512.png',
+];
+
+// ---- Install: pre-cache the app shell ----
+self.addEventListener('install', (e) => {
+  e.waitUntil(
+    caches.open(CACHE).then((cache) => cache.addAll(SHELL))
+    // skipWaiting() is NOT called here — we wait for the client to confirm
+    // before activating, so the update banner can appear first.
+  );
+});
+
+// ---- Activate: evict old caches, claim clients, notify about update ----
+self.addEventListener('activate', (e) => {
+  e.waitUntil((async () => {
+    // Delete every cache that isn't the current version
+    const keys = await caches.keys();
+    await Promise.all(
+      keys.filter((k) => k !== CACHE).map((k) => caches.delete(k))
+    );
+    // Claim all open clients immediately (new installs)
+    await self.clients.claim();
+    // Broadcast to every open window so the app can show an update banner
+    const all = await self.clients.matchAll({ type: 'window', includeUncontrolled: true });
+    all.forEach((c) => c.postMessage({ type: 'SW_UPDATE_AVAILABLE', version: VERSION }));
+  })());
+});
+
+// ---- Fetch: routing logic ----
+self.addEventListener('fetch', (e) => {
+  const { request } = e;
+  const url = new URL(request.url);
+
+  // Only intercept GET/HEAD — let POST (sync endpoint) go through unmodified
+  if (request.method !== 'GET' && request.method !== 'HEAD') return;
+
+  // API calls and binary downloads → network only, no caching
+  if (url.pathname.startsWith('/api/')) {
+    e.respondWith(fetch(request));
+    return;
+  }
+
+  // YouTube thumbnails → stale-while-revalidate (fast load, fresh in background)
+  if (url.hostname === 'i.ytimg.com') {
+    e.respondWith(staleWhileRevalidate(request, 'ytplayer-thumbs'));
+    return;
+  }
+
+  // Google Fonts CSS — stale-while-revalidate so offline doesn't break type
+  if (url.hostname === 'fonts.googleapis.com' || url.hostname === 'fonts.gstatic.com') {
+    e.respondWith(staleWhileRevalidate(request, 'ytplayer-fonts'));
+    return;
+  }
+
+  // App shell → cache-first, then network, then generic offline fallback
+  e.respondWith(cacheFirst(request));
+});
+
+// ---- Message: handle SKIP_WAITING from the client ----
+self.addEventListener('message', (e) => {
+  if (e.data && e.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+// ============================================================================
+// Fetch helpers
+// ============================================================================
+
+// Cache-first: serve from cache; if missing, fetch, cache, return.
+async function cacheFirst(request) {
+  const cache  = await caches.open(CACHE);
+  const cached = await cache.match(request);
+  if (cached) return cached;
+  try {
+    const response = await fetch(request);
+    // Only cache successful, non-opaque responses
+    if (response && response.status === 200 && response.type !== 'opaque') {
+      cache.put(request, response.clone());
+    }
+    return response;
+  } catch {
+    // Network failed and nothing in cache — return a minimal offline page
+    // for navigation requests; let sub-resources fail naturally.
+    if (request.mode === 'navigate') {
+      const nav = await cache.match('/index.html');
+      if (nav) return nav;
+    }
+    return new Response('Offline', { status: 503, statusText: 'Service Unavailable' });
+  }
+}
+
+// Stale-while-revalidate: return cached immediately, update in background.
+async function staleWhileRevalidate(request, cacheName) {
+  const cache  = await caches.open(cacheName);
+  const cached = await cache.match(request);
+  // Start a background revalidation — don't await it before responding
+  const networkFetch = fetch(request).then((r) => {
+    if (r && r.status === 200) cache.put(request, r.clone());
+    return r;
+  }).catch(() => null);
+
+  return cached || networkFetch;
+}
diff --git a/app.zon b/legacy/app.zon
similarity index 100%
rename from app.zon
rename to legacy/app.zon
diff --git a/releases/YT Player_1.0.0_x64-setup.exe b/legacy/releases/YT Player_1.0.0_x64-setup.exe
similarity index 100%
rename from releases/YT Player_1.0.0_x64-setup.exe
rename to legacy/releases/YT Player_1.0.0_x64-setup.exe
diff --git a/releases/YT Player_1.0.0_x64_en-US.msi b/legacy/releases/YT Player_1.0.0_x64_en-US.msi
similarity index 100%
rename from releases/YT Player_1.0.0_x64_en-US.msi
rename to legacy/releases/YT Player_1.0.0_x64_en-US.msi
diff --git a/releases/YTPlayer_1.0.0_x64-setup.exe b/legacy/releases/YTPlayer_1.0.0_x64-setup.exe
similarity index 100%
rename from releases/YTPlayer_1.0.0_x64-setup.exe
rename to legacy/releases/YTPlayer_1.0.0_x64-setup.exe
diff --git a/releases/YTPlayer_1.0.0_x64_en-US.msi b/legacy/releases/YTPlayer_1.0.0_x64_en-US.msi
similarity index 100%
rename from releases/YTPlayer_1.0.0_x64_en-US.msi
rename to legacy/releases/YTPlayer_1.0.0_x64_en-US.msi
diff --git a/releases/ytplayer.exe b/legacy/releases/ytplayer.exe
similarity index 100%
rename from releases/ytplayer.exe
rename to legacy/releases/ytplayer.exe
diff --git a/src-tauri/Cargo.lock b/legacy/src-tauri/Cargo.lock
similarity index 100%
rename from src-tauri/Cargo.lock
rename to legacy/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/legacy/src-tauri/Cargo.toml
similarity index 100%
rename from src-tauri/Cargo.toml
rename to legacy/src-tauri/Cargo.toml
diff --git a/src-tauri/build.rs b/legacy/src-tauri/build.rs
similarity index 100%
rename from src-tauri/build.rs
rename to legacy/src-tauri/build.rs
diff --git a/src-tauri/capabilities/default.json b/legacy/src-tauri/capabilities/default.json
similarity index 100%
rename from src-tauri/capabilities/default.json
rename to legacy/src-tauri/capabilities/default.json
diff --git a/src-tauri/src/main.rs b/legacy/src-tauri/src/main.rs
similarity index 100%
rename from src-tauri/src/main.rs
rename to legacy/src-tauri/src/main.rs
diff --git a/src-tauri/tauri.conf.json b/legacy/src-tauri/tauri.conf.json
similarity index 100%
rename from src-tauri/tauri.conf.json
rename to legacy/src-tauri/tauri.conf.json
diff --git a/src/bridge.zig b/legacy/src/bridge.zig
similarity index 100%
rename from src/bridge.zig
rename to legacy/src/bridge.zig
diff --git a/src/main.zig b/legacy/src/main.zig
similarity index 100%
rename from src/main.zig
rename to legacy/src/main.zig
diff --git a/scripts/make-pwa-icons.js b/scripts/make-pwa-icons.js
new file mode 100644
index 0000000..aa4ba0f
--- /dev/null
+++ b/scripts/make-pwa-icons.js
@@ -0,0 +1,113 @@
+#!/usr/bin/env node
+/**
+ * Generates frontend/icons/icon-192.png and icon-512.png for the PWA manifest.
+ * Same vermilion play-button design as appicon.png — no image libraries needed.
+ *
+ * Usage:  node scripts/make-pwa-icons.js
+ */
+'use strict';
+const fs   = require('fs');
+const path = require('path');
+const zlib = require('zlib');
+
+// ---- PNG encoder (same approach as make-icon.js) ----
+const CRC_TABLE = (() => {
+  const t = new Uint32Array(256);
+  for (let n = 0; n < 256; n++) {
+    let c = n;
+    for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+    t[n] = c >>> 0;
+  }
+  return t;
+})();
+function crc32(buf) {
+  let c = 0xffffffff;
+  for (let i = 0; i < buf.length; i++) c = CRC_TABLE[(c ^ buf[i]) & 0xff] ^ (c >>> 8);
+  return (c ^ 0xffffffff) >>> 0;
+}
+function chunk(type, data) {
+  const len = Buffer.alloc(4); len.writeUInt32BE(data.length, 0);
+  const tb  = Buffer.from(type, 'ascii');
+  const crc = Buffer.alloc(4); crc.writeUInt32BE(crc32(Buffer.concat([tb, data])), 0);
+  return Buffer.concat([len, tb, data, crc]);
+}
+
+function makePng(SIZE) {
+  const px = Buffer.alloc(SIZE * SIZE * 4);
+  function set(x, y, r, g, b, a = 255) {
+    const i = (y * SIZE + x) * 4;
+    px[i] = r; px[i + 1] = g; px[i + 2] = b; px[i + 3] = a;
+  }
+
+  // Rounded-rectangle background (vermilion gradient)
+  const radius = Math.round(SIZE * 0.22);
+  for (let y = 0; y < SIZE; y++) {
+    const t = y / SIZE;
+    const r = Math.round(0xff + (0xd4 - 0xff) * t);
+    const g = Math.round(0x6a + (0x32 - 0x6a) * t);
+    const b = Math.round(0x52 + (0x1d - 0x52) * t);
+    for (let x = 0; x < SIZE; x++) {
+      // Simple corner rounding via distance check
+      const dx = Math.max(0, Math.abs(x - SIZE / 2) - (SIZE / 2 - radius));
+      const dy = Math.max(0, Math.abs(y - SIZE / 2) - (SIZE / 2 - radius));
+      if (dx * dx + dy * dy > radius * radius) {
+        set(x, y, 0, 0, 0, 0); // transparent outside rounded rect
+      } else {
+        set(x, y, r, g, b);
+      }
+    }
+  }
+
+  // White play triangle, centered
+  const scale = SIZE / 512;
+  const ax = Math.round(196 * scale), ay = Math.round(150 * scale);
+  const bx = Math.round(196 * scale), by = Math.round(362 * scale);
+  const cx = Math.round(384 * scale), cy = Math.round(256 * scale);
+  function edge(px1, py1, px2, py2, x, y) {
+    return (x - px1) * (py2 - py1) - (y - py1) * (px2 - px1);
+  }
+  const yMin = Math.round(120 * scale), yMax = Math.round(392 * scale);
+  const xMin = Math.round(170 * scale), xMax = Math.round(400 * scale);
+  for (let y = yMin; y < yMax; y++) {
+    for (let x = xMin; x < xMax; x++) {
+      const w0 = edge(bx, by, cx, cy, x, y);
+      const w1 = edge(cx, cy, ax, ay, x, y);
+      const w2 = edge(ax, ay, bx, by, x, y);
+      if ((w0 <= 0 && w1 <= 0 && w2 <= 0) || (w0 >= 0 && w1 >= 0 && w2 >= 0)) {
+        // Only paint if inside the rounded-rect background
+        const cur = (y * SIZE + x) * 4;
+        if (px[cur + 3] > 0) {
+          px[cur] = 255; px[cur + 1] = 255; px[cur + 2] = 255; px[cur + 3] = 255;
+        }
+      }
+    }
+  }
+
+  // Encode to PNG
+  const raw = Buffer.alloc((SIZE * 4 + 1) * SIZE);
+  for (let y = 0; y < SIZE; y++) {
+    raw[y * (SIZE * 4 + 1)] = 0;
+    px.copy(raw, y * (SIZE * 4 + 1) + 1, y * SIZE * 4, (y + 1) * SIZE * 4);
+  }
+  const ihdr = Buffer.alloc(13);
+  ihdr.writeUInt32BE(SIZE, 0);
+  ihdr.writeUInt32BE(SIZE, 4);
+  ihdr[8] = 8; ihdr[9] = 6; // 8-bit RGBA
+  return Buffer.concat([
+    Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
+    chunk('IHDR', ihdr),
+    chunk('IDAT', zlib.deflateSync(raw, { level: 6 })),
+    chunk('IEND', Buffer.alloc(0)),
+  ]);
+}
+
+const outDir = path.join(__dirname, '..', 'frontend', 'icons');
+fs.mkdirSync(outDir, { recursive: true });
+
+for (const size of [192, 512]) {
+  const out  = path.join(outDir, `icon-${size}.png`);
+  const data = makePng(size);
+  fs.writeFileSync(out, data);
+  console.log(`Wrote ${out} (${size}×${size}, ${data.length} bytes)`);
+}
+console.log('Done — PWA icons ready in frontend/icons/');
diff --git a/server/db.js b/server/db.js
new file mode 100644
index 0000000..71722ee
--- /dev/null
+++ b/server/db.js
@@ -0,0 +1,141 @@
+/* ============================================================================
+ * db.js — libsql (embedded SQLite) database setup and query helpers
+ *
+ * The DB file lives at $DB_PATH (mounted volume in Docker so data persists
+ * across container rebuilds). libsql is an open-source SQLite fork by Turso
+ * with WAL-by-default for concurrent reads.
+ *
+ * Schema (three small tables):
+ *   users         — one row per fingerprint; tracks last app version seen
+ *   playlists     — one row per fingerprint; full playlist JSON blob
+ *   video_history — one row per (fingerprint, video_id); recent 200 entries
+ * ========================================================================== */
+
+import { createClient } from '@libsql/client';
+import { join } from 'node:path';
+
+const DB_PATH = process.env.DB_PATH || join(process.cwd(), 'data', 'ytplayer.db');
+
+export const db = createClient({
+  url: 'file:' + DB_PATH,
+});
+
+// ---- Schema ----------------------------------------------------------------
+
+export async function initDb() {
+  await db.executeMultiple(`
+    PRAGMA journal_mode = WAL;
+    PRAGMA synchronous = NORMAL;
+    PRAGMA foreign_keys = ON;
+
+    CREATE TABLE IF NOT EXISTS users (
+      fingerprint  TEXT    PRIMARY KEY,
+      last_version TEXT,
+      last_seen    INTEGER NOT NULL DEFAULT (unixepoch())
+    );
+
+    CREATE TABLE IF NOT EXISTS playlists (
+      fingerprint TEXT    PRIMARY KEY,
+      data        TEXT    NOT NULL DEFAULT '[]',
+      updated_at  INTEGER NOT NULL DEFAULT (unixepoch())
+    );
+
+    CREATE TABLE IF NOT EXISTS video_history (
+      fingerprint TEXT    NOT NULL,
+      video_id    TEXT    NOT NULL,
+      title       TEXT,
+      channel     TEXT,
+      thumbnail   TEXT,
+      duration    REAL    DEFAULT 0,
+      accessed_at INTEGER NOT NULL DEFAULT (unixepoch()),
+      PRIMARY KEY (fingerprint, video_id)
+    );
+
+    CREATE INDEX IF NOT EXISTS idx_vh_fp_time
+      ON video_history (fingerprint, accessed_at DESC);
+  `);
+}
+
+// ---- Helpers ---------------------------------------------------------------
+
+// Upsert the users row and optionally update playlists.
+export async function upsertUser({ fingerprint, appVersion, playlists }) {
+  await db.execute({
+    sql: `INSERT INTO users (fingerprint, last_version, last_seen)
+          VALUES (?, ?, unixepoch())
+          ON CONFLICT(fingerprint) DO UPDATE SET
+            last_version = excluded.last_version,
+            last_seen    = excluded.last_seen`,
+    args: [fingerprint, appVersion || null],
+  });
+
+  if (Array.isArray(playlists)) {
+    await db.execute({
+      sql: `INSERT INTO playlists (fingerprint, data, updated_at)
+            VALUES (?, ?, unixepoch())
+            ON CONFLICT(fingerprint) DO UPDATE SET
+              data       = excluded.data,
+              updated_at = excluded.updated_at`,
+      args: [fingerprint, JSON.stringify(playlists)],
+    });
+  }
+}
+
+// Record a video access (insert or bump accessed_at).
+export async function recordVideoAccess(fingerprint, video) {
+  await db.execute({
+    sql: `INSERT INTO video_history
+            (fingerprint, video_id, title, channel, thumbnail, duration, accessed_at)
+          VALUES (?, ?, ?, ?, ?, ?, unixepoch())
+          ON CONFLICT(fingerprint, video_id) DO UPDATE SET
+            title       = excluded.title,
+            channel     = excluded.channel,
+            thumbnail   = excluded.thumbnail,
+            duration    = excluded.duration,
+            accessed_at = excluded.accessed_at`,
+    args: [
+      fingerprint,
+      video.id,
+      video.title || null,
+      video.channel || null,
+      video.thumbnail || null,
+      video.duration || 0,
+    ],
+  });
+
+  // Keep only the 200 most recent entries per user to avoid unbounded growth
+  await db.execute({
+    sql: `DELETE FROM video_history
+          WHERE fingerprint = ?
+            AND video_id NOT IN (
+              SELECT video_id FROM video_history
+              WHERE fingerprint = ?
+              ORDER BY accessed_at DESC
+              LIMIT 200
+            )`,
+    args: [fingerprint, fingerprint],
+  });
+}
+
+// Fetch stored data for a fingerprint.
+export async function getUserData(fingerprint) {
+  const [userRow, plRow, histRows] = await Promise.all([
+    db.execute({ sql: 'SELECT last_version FROM users WHERE fingerprint = ?', args: [fingerprint] }),
+    db.execute({ sql: 'SELECT data FROM playlists WHERE fingerprint = ?', args: [fingerprint] }),
+    db.execute({
+      sql: `SELECT video_id AS id, title, channel, thumbnail, duration, accessed_at
+            FROM video_history WHERE fingerprint = ?
+            ORDER BY accessed_at DESC LIMIT 50`,
+      args: [fingerprint],
+    }),
+  ]);
+
+  const lastVersion = userRow.rows[0]?.last_version || null;
+  const playlists   = plRow.rows[0]?.data ? JSON.parse(plRow.rows[0].data) : [];
+  const history     = histRows.rows.map((r) => ({
+    id: r.id, title: r.title, channel: r.channel,
+    thumbnail: r.thumbnail, duration: r.duration,
+  }));
+
+  return { lastVersion, playlists, history };
+}
diff --git a/server/package.json b/server/package.json
new file mode 100644
index 0000000..1550d80
--- /dev/null
+++ b/server/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "ytplayer-server",
+  "version": "1.0.0",
+  "description": "YT Player PWA server — Bun + Hono + libsql",
+  "type": "module",
+  "scripts": {
+    "start": "bun server.js",
+    "dev": "bun --hot server.js"
+  },
+  "dependencies": {
+    "hono": "^4.7.10",
+    "@hono/node-server": "^1.14.0",
+    "@libsql/client": "^0.14.0"
+  }
+}
diff --git a/server/server.js b/server/server.js
new file mode 100644
index 0000000..325c82d
--- /dev/null
+++ b/server/server.js
@@ -0,0 +1,352 @@
+/* ============================================================================
+ * server.js — YT Player PWA backend
+ *
+ * Runtime:  Bun (https://bun.sh)
+ * Framework: Hono v4
+ * DB:        libsql (concurrent SQLite fork, embedded file mode)
+ *
+ * Endpoints:
+ *   GET  /api/search?q=<query>         yt-dlp search → slim card array
+ *   GET  /api/channel?c=<channel>      yt-dlp channel uploads → slim card array
+ *   GET  /api/streams?v=<videoId>      yt-dlp stream info → {meta, audioUrl, qualities}
+ *   GET  /api/download/:videoId        proxy best progressive stream → binary
+ *   GET  /api/version                  { version }
+ *   POST /api/user/sync                upsert user playlists + last-seen version
+ *   GET  /api/user/data?fp=<fp>        retrieve stored playlists + history
+ *   GET  /*                            serve frontend/public static files
+ *
+ * JSON shapes mirror the Tauri (Rust) bridge exactly so the existing app.js
+ * UI code works without modification in WEB mode.
+ * ========================================================================== */
+
+import { Hono }         from 'hono';
+import { serveStatic }  from 'hono/bun';
+import { logger }       from 'hono/logger';
+import { spawnSync }    from 'node:child_process';
+import { createServer } from 'node:http';
+import { initDb, upsertUser, recordVideoAccess, getUserData } from './db.js';
+
+const PORT        = parseInt(process.env.PORT || '3000', 10);
+const APP_VERSION = process.env.APP_VERSION || '1.0.0';
+const YTDLP       = process.env.YTDLP_PATH  || 'yt-dlp';
+
+const SEARCH_LIMIT  = 25;
+const CHANNEL_LIMIT = 60;
+
+// ============================================================================
+// yt-dlp helpers
+// ============================================================================
+
+// Run yt-dlp synchronously and return stdout as a string.
+// Throws on non-zero exit.
+function runYtdlp(args) {
+  const result = spawnSync(YTDLP, args, {
+    encoding: 'utf8',
+    maxBuffer: 32 * 1024 * 1024, // 32 MB — large channel dumps can be big
+  });
+  if (result.error) throw new Error('yt-dlp not found: ' + result.error.message);
+  if (result.status !== 0) {
+    const err = (result.stderr || '').trim();
+    throw new Error(err || 'yt-dlp exited with code ' + result.status);
+  }
+  return result.stdout || '';
+}
+
+// Helpers to pick the right field from a yt-dlp JSON record
+function pick(obj, ...keys) {
+  for (const k of keys) {
+    const v = obj[k];
+    if (v && typeof v === 'string' && v.trim()) return v.trim();
+  }
+  return '';
+}
+
+function pickChannel(obj)    { return pick(obj, 'channel', 'uploader'); }
+function pickChannelUrl(obj) { return pick(obj, 'channel_url', 'uploader_url'); }
+function pickChannelId(obj)  { return pick(obj, 'channel_id', 'uploader_id'); }
+
+// Normalise a flat-playlist yt-dlp record into the slim UI card shape
+function slimEntry(j) {
+  const id = pick(j, 'id');
+  if (!id) return null;
+  return {
+    id,
+    title:      pick(j, 'title') || '(untitled)',
+    channel:    pickChannel(j),
+    channelId:  pickChannelId(j),
+    channelUrl: pickChannelUrl(j),
+    duration:   typeof j.duration === 'number' ? j.duration : 0,
+    thumbnail:  `https://i.ytimg.com/vi/${id}/mqdefault.jpg`,
+  };
+}
+
+// Parse multi-line JSON output from yt-dlp --dump-json --flat-playlist
+function parseCards(output) {
+  const results = [];
+  for (const line of output.split('\n')) {
+    const t = line.trim();
+    if (!t) continue;
+    try {
+      const j = JSON.parse(t);
+      const card = slimEntry(j);
+      if (card) results.push(card);
+    } catch { /* skip malformed lines */ }
+  }
+  return results;
+}
+
+// Resolve a channel identifier to a /videos URL yt-dlp can fetch
+function channelToUrl(c) {
+  let base = c.trim();
+  if (!base.startsWith('http')) {
+    base = base.startsWith('@') ? `https://www.youtube.com/${base}`
+         : base.startsWith('UC') ? `https://www.youtube.com/channel/${base}`
+         : `https://www.youtube.com/@${base}`;
+  }
+  base = base.replace(/\/$/, '');
+  return base.endsWith('/videos') ? base : base + '/videos';
+}
+
+// ============================================================================
+// App setup
+// ============================================================================
+
+const app = new Hono();
+app.use('*', logger());
+
+// ============================================================================
+// API routes
+// ============================================================================
+
+// GET /api/version
+app.get('/api/version', (c) => c.json({ version: APP_VERSION }));
+
+// GET /api/search?q=<query>
+app.get('/api/search', async (c) => {
+  const q = (c.req.query('q') || '').trim();
+  if (!q) return c.json({ ok: false, error: 'empty query' }, 400);
+
+  try {
+    const out = runYtdlp([
+      `ytsearch${SEARCH_LIMIT}:${q}`,
+      '--dump-json', '--flat-playlist',
+      '--no-warnings', '--ignore-errors',
+    ]);
+    return c.json({ ok: true, results: parseCards(out) });
+  } catch (err) {
+    return c.json({ ok: false, error: err.message }, 500);
+  }
+});
+
+// GET /api/channel?c=<channel>
+app.get('/api/channel', async (c) => {
+  const chan = (c.req.query('c') || '').trim();
+  if (!chan) return c.json({ ok: false, error: 'missing channel' }, 400);
+
+  try {
+    const url = channelToUrl(chan);
+    const out = runYtdlp([
+      url,
+      '--dump-json', '--flat-playlist',
+      '--no-warnings', '--ignore-errors',
+      '--playlist-end', String(CHANNEL_LIMIT),
+    ]);
+    const results = parseCards(out);
+    // Extract channel name + URL from the first record
+    const first = results[0];
+    let channelName = '', channelUrl = '';
+    for (const line of out.split('\n')) {
+      const t = line.trim();
+      if (!t) continue;
+      try {
+        const j = JSON.parse(t);
+        channelName = channelName || pickChannel(j);
+        channelUrl  = channelUrl  || pickChannelUrl(j);
+        if (channelName && channelUrl) break;
+      } catch { /* skip */ }
+    }
+    return c.json({ ok: true, channel: channelName || (first?.channel || ''), channelUrl, results });
+  } catch (err) {
+    return c.json({ ok: false, error: err.message }, 500);
+  }
+});
+
+// GET /api/streams?v=<videoId>
+app.get('/api/streams', async (c) => {
+  const videoId = (c.req.query('v') || '').replace(/[/\\:?<>|*"]/g, '').trim();
+  if (!videoId) return c.json({ ok: false, error: 'missing videoId' }, 400);
+
+  try {
+    const url = `https://www.youtube.com/watch?v=${videoId}`;
+    const out = runYtdlp(['-J', '--no-warnings', url]);
+    const info = JSON.parse(out);
+    const formats = Array.isArray(info.formats) ? info.formats : [];
+
+    // Best audio-only stream (prefer mp4a/m4a by bitrate)
+    let bestAudioUrl   = null;
+    let bestAudioScore = -1;
+    for (const f of formats) {
+      if (!f.url) continue;
+      const hasVideo = f.vcodec && f.vcodec !== 'none';
+      const hasAudio = f.acodec && f.acodec !== 'none';
+      if (hasVideo || !hasAudio) continue;
+      let score = f.abr || 0;
+      if (f.acodec && f.acodec.includes('mp4a')) score += 1000;
+      if (score > bestAudioScore) { bestAudioScore = score; bestAudioUrl = f.url; }
+    }
+
+    // Quality list — progressive (single-file, hasAudio) first, then adaptive
+    const qualities = [];
+    const seen = new Set();
+    for (const wantProg of [true, false]) {
+      for (const f of formats) {
+        if (!f.url) continue;
+        const hasVideo = f.vcodec && f.vcodec !== 'none';
+        const hasAudio = f.acodec && f.acodec !== 'none';
+        if (!hasVideo) continue;
+        if ((hasAudio) !== wantProg) continue;
+        const h = f.height || 0;
+        if (h <= 0 || seen.has(h)) continue;
+        seen.add(h);
+        qualities.push({ label: h + 'p', height: h, hasAudio: !!hasAudio, url: f.url, ext: f.ext || '' });
+      }
+    }
+    qualities.sort((a, b) => b.height - a.height);
+
+    return c.json({
+      ok: true,
+      data: {
+        meta: {
+          id:         videoId,
+          title:      pick(info, 'title') || '(untitled)',
+          channel:    pickChannel(info),
+          channelId:  pickChannelId(info),
+          channelUrl: pickChannelUrl(info),
+          duration:   typeof info.duration === 'number' ? info.duration : 0,
+          thumbnail:  `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`,
+        },
+        audioUrl:  bestAudioUrl,
+        qualities,
+      },
+    });
+  } catch (err) {
+    return c.json({ ok: false, error: err.message }, 500);
+  }
+});
+
+// GET /api/download/:videoId
+// Resolves the best progressive (audio+video single-file) stream URL via
+// yt-dlp and proxies the binary to the browser so OPFS can store it.
+// The browser never contacts YouTube CDN directly (CORS would block it).
+app.get('/api/download/:videoId', async (c) => {
+  const videoId = (c.req.param('videoId') || '').replace(/[/\\:?<>|*"]/g, '').trim();
+  if (!videoId) return c.json({ ok: false, error: 'missing videoId' }, 400);
+
+  try {
+    const url = `https://www.youtube.com/watch?v=${videoId}`;
+    // --get-url with bestvideo+bestaudio/best format is not what we want
+    // here — we need a SINGLE FILE so no ffmpeg muxing is required in the
+    // browser. Use -f "bestvideo[ext=mp4][acodec!=none]/best[ext=mp4]/best"
+    const out = runYtdlp([
+      url,
+      '--no-warnings',
+      '-f', 'bestvideo[ext=mp4][acodec!=none]/bestvideo[acodec!=none]/best[ext=mp4]/best',
+      '--get-url',
+    ]);
+    const streamUrl = out.trim();
+    if (!streamUrl) throw new Error('No stream URL returned');
+
+    // Fetch from YouTube and pipe to the client
+    const upstream = await fetch(streamUrl, {
+      headers: {
+        // Mimic a browser to avoid 403s from YouTube CDN
+        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36',
+        'Referer':    'https://www.youtube.com/',
+      },
+    });
+    if (!upstream.ok) throw new Error(`Upstream error ${upstream.status}`);
+
+    const contentType   = upstream.headers.get('content-type') || 'video/mp4';
+    const contentLength = upstream.headers.get('content-length');
+
+    const headers = new Headers({
+      'Content-Type':        contentType,
+      'Content-Disposition': `attachment; filename="${videoId}.mp4"`,
+      'Cache-Control':       'no-store',
+      'Access-Control-Allow-Origin': '*',
+    });
+    if (contentLength) headers.set('Content-Length', contentLength);
+
+    // Log the access if a fingerprint was supplied (fire-and-forget)
+    const fp = c.req.query('fp');
+    if (fp) {
+      recordVideoAccess(fp, { id: videoId }).catch(() => {});
+    }
+
+    return new Response(upstream.body, { status: 200, headers });
+  } catch (err) {
+    return c.json({ ok: false, error: err.message }, 500);
+  }
+});
+
+// POST /api/user/sync
+// Body: { fingerprint, playlists?, recentVideo?, appVersion? }
+app.post('/api/user/sync', async (c) => {
+  let body;
+  try { body = await c.req.json(); } catch { return c.json({ ok: false, error: 'invalid JSON' }, 400); }
+
+  const fp = (body.fingerprint || '').trim();
+  if (!fp) return c.json({ ok: false, error: 'missing fingerprint' }, 400);
+
+  try {
+    await upsertUser({ fingerprint: fp, appVersion: body.appVersion, playlists: body.playlists });
+    if (body.recentVideo && body.recentVideo.id) {
+      await recordVideoAccess(fp, body.recentVideo);
+    }
+    return c.json({ ok: true });
+  } catch (err) {
+    return c.json({ ok: false, error: err.message }, 500);
+  }
+});
+
+// GET /api/user/data?fp=<fingerprint>
+app.get('/api/user/data', async (c) => {
+  const fp = (c.req.query('fp') || '').trim();
+  if (!fp) return c.json({ ok: false, error: 'missing fingerprint' }, 400);
+  try {
+    const userData = await getUserData(fp);
+    return c.json({ ok: true, ...userData, version: APP_VERSION });
+  } catch (err) {
+    return c.json({ ok: false, error: err.message }, 500);
+  }
+});
+
+// ============================================================================
+// Static files — serve the frontend/public directory
+// Must come AFTER all /api routes so API takes priority
+// ============================================================================
+app.use('/*', serveStatic({ root: './public' }));
+// SPA fallback — return index.html for any unmatched path
+app.get('/*', serveStatic({ path: './public/index.html' }));
+
+// ============================================================================
+// Boot
+// ============================================================================
+async function main() {
+  await initDb();
+  console.log(`[ytplayer] DB ready`);
+  console.log(`[ytplayer] Starting on port ${PORT}`);
+
+  // Bun.serve is the native Bun HTTP server
+  Bun.serve({
+    port: PORT,
+    fetch: app.fetch,
+  });
+
+  console.log(`[ytplayer] Listening → http://localhost:${PORT}`);
+}
+
+main().catch((err) => {
+  console.error('[ytplayer] fatal:', err);
+  process.exit(1);
+});