From 55607df07bcf1e9de827f99cf5e3f5076cc4414d Mon Sep 17 00:00:00 2001
From: Connor Johnstone <connor.johnstone@arcfield.com>
Date: Wed, 18 Mar 2026 10:56:19 -0400
Subject: [PATCH] Major early updates

---
 frontend/Cargo.lock                     | 1165 +++++++++++++++++++++++
 frontend/Cargo.toml                     |   17 +
 frontend/Trunk.toml                     |    2 +
 frontend/index.html                     |   11 +
 frontend/src/api.rs                     |  185 ++++
 frontend/src/components/mod.rs          |    2 +
 frontend/src/components/navbar.rs       |   30 +
 frontend/src/components/status_badge.rs |   26 +
 frontend/src/main.rs                    |   28 +
 frontend/src/pages/album.rs             |   71 ++
 frontend/src/pages/artist.rs            |   75 ++
 frontend/src/pages/dashboard.rs         |   88 ++
 frontend/src/pages/downloads.rs         |  191 ++++
 frontend/src/pages/library.rs           |   64 ++
 frontend/src/pages/mod.rs               |   44 +
 frontend/src/pages/search.rs            |  214 +++++
 frontend/src/pages/settings.rs          |   86 ++
 frontend/src/types.rs                   |  166 ++++
 frontend/style.css                      |  164 ++++
 src/main.rs                             |   37 +-
 20 files changed, 2665 insertions(+), 1 deletion(-)
 create mode 100644 frontend/Cargo.lock
 create mode 100644 frontend/Cargo.toml
 create mode 100644 frontend/Trunk.toml
 create mode 100644 frontend/index.html
 create mode 100644 frontend/src/api.rs
 create mode 100644 frontend/src/components/mod.rs
 create mode 100644 frontend/src/components/navbar.rs
 create mode 100644 frontend/src/components/status_badge.rs
 create mode 100644 frontend/src/main.rs
 create mode 100644 frontend/src/pages/album.rs
 create mode 100644 frontend/src/pages/artist.rs
 create mode 100644 frontend/src/pages/dashboard.rs
 create mode 100644 frontend/src/pages/downloads.rs
 create mode 100644 frontend/src/pages/library.rs
 create mode 100644 frontend/src/pages/mod.rs
 create mode 100644 frontend/src/pages/search.rs
 create mode 100644 frontend/src/pages/settings.rs
 create mode 100644 frontend/src/types.rs
 create mode 100644 frontend/style.css

diff --git a/frontend/Cargo.lock b/frontend/Cargo.lock
new file mode 100644
index 0000000..662e5a9
--- /dev/null
+++ b/frontend/Cargo.lock
@@ -0,0 +1,1165 @@
+# This file is automatically @generated by Cargo.
+# It is not intended for manual editing.
+version = 4
+
+[[package]]
+name = "anymap2"
+version = "0.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d301b3b94cb4b2f23d7917810addbbaff90738e0ca2be692bd027e70d7e0330c"
+
+[[package]]
+name = "bincode"
+version = "1.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b1f45e9417d87227c7a56d22e471c6206462cba514c7590c09aff4cf6d1ddcad"
+dependencies = [
+ "serde",
+]
+
+[[package]]
+name = "boolinator"
+version = "2.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cfa8873f51c92e232f9bac4065cddef41b714152812bfc5f7672ba16d6ef8cd9"
+
+[[package]]
+name = "bumpalo"
+version = "3.20.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5d20789868f4b01b2f2caec9f5c4e0213b41e3e5702a50157d699ae31ced2fcb"
+
+[[package]]
+name = "bytes"
+version = "1.11.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e748733b7cbc798e1434b6ac524f0c1ff2ab456fe201501e6497c8417a4fc33"
+
+[[package]]
+name = "cfg-if"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9330f8b2ff13f34540b44e946ef35111825727b38d33286ef986142615121801"
+
+[[package]]
+name = "console_error_panic_hook"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a06aeb73f470f66dcdbf7223caeebb85984942f22f1adb2a088cf9668146bbbc"
+dependencies = [
+ "cfg-if",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "equivalent"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "877a4ace8713b0bcf2a4e7eec82529c029f1d0619886d18145fea96c3ffe5c0f"
+
+[[package]]
+name = "fnv"
+version = "1.0.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f9eec918d3f24069decb9af1554cad7c880e2da24a9afd88aca000531ab82c1"
+
+[[package]]
+name = "form_urlencoded"
+version = "1.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cb4cb245038516f5f85277875cdaa4f7d2c9a0fa0468de06ed190163b1581fcf"
+dependencies = [
+ "percent-encoding",
+]
+
+[[package]]
+name = "futures"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8b147ee9d1f6d097cef9ce628cd2ee62288d963e16fb287bd9286455b241382d"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-io",
+ "futures-sink",
+ "futures-task",
+ "futures-util",
+]
+
+[[package]]
+name = "futures-channel"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "07bbe89c50d7a535e539b8c17bc0b49bdb77747034daa8087407d655f3f7cc1d"
+dependencies = [
+ "futures-core",
+ "futures-sink",
+]
+
+[[package]]
+name = "futures-core"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7e3450815272ef58cec6d564423f6e755e25379b217b0bc688e295ba24df6b1d"
+
+[[package]]
+name = "futures-io"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cecba35d7ad927e23624b22ad55235f2239cfa44fd10428eecbeba6d6a717718"
+
+[[package]]
+name = "futures-macro"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e835b70203e41293343137df5c0664546da5745f82ec9b84d40be8336958447b"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+]
+
+[[package]]
+name = "futures-sink"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c39754e157331b013978ec91992bde1ac089843443c49cbc7f46150b0fad0893"
+
+[[package]]
+name = "futures-task"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "037711b3d59c33004d3856fbdc83b99d4ff37a24768fa1be9ce3538a1cde4393"
+
+[[package]]
+name = "futures-util"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "389ca41296e6190b48053de0321d02a77f32f8a5d2461dd38762c0593805c6d6"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-io",
+ "futures-macro",
+ "futures-sink",
+ "futures-task",
+ "memchr",
+ "pin-project-lite",
+ "slab",
+]
+
+[[package]]
+name = "getrandom"
+version = "0.2.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ff2abc00be7fca6ebc474524697ae276ad847ad0a6b3faa4bcb027e9a4614ad0"
+dependencies = [
+ "cfg-if",
+ "js-sys",
+ "libc",
+ "wasi",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "gloo"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "28999cda5ef6916ffd33fb4a7b87e1de633c47c0dc6d97905fee1cdaa142b94d"
+dependencies = [
+ "gloo-console 0.2.3",
+ "gloo-dialogs 0.1.1",
+ "gloo-events 0.1.2",
+ "gloo-file 0.2.3",
+ "gloo-history 0.1.5",
+ "gloo-net 0.3.1",
+ "gloo-render 0.1.1",
+ "gloo-storage 0.2.2",
+ "gloo-timers 0.2.6",
+ "gloo-utils 0.1.7",
+ "gloo-worker 0.2.1",
+]
+
+[[package]]
+name = "gloo"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cd35526c28cc55c1db77aed6296de58677dbab863b118483a27845631d870249"
+dependencies = [
+ "gloo-console 0.3.0",
+ "gloo-dialogs 0.2.0",
+ "gloo-events 0.2.0",
+ "gloo-file 0.3.0",
+ "gloo-history 0.2.2",
+ "gloo-net 0.4.0",
+ "gloo-render 0.2.0",
+ "gloo-storage 0.3.0",
+ "gloo-timers 0.3.0",
+ "gloo-utils 0.2.0",
+ "gloo-worker 0.4.0",
+]
+
+[[package]]
+name = "gloo-console"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "82b7ce3c05debe147233596904981848862b068862e9ec3e34be446077190d3f"
+dependencies = [
+ "gloo-utils 0.1.7",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-console"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2a17868f56b4a24f677b17c8cb69958385102fa879418052d60b50bc1727e261"
+dependencies = [
+ "gloo-utils 0.2.0",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-dialogs"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "67062364ac72d27f08445a46cab428188e2e224ec9e37efdba48ae8c289002e6"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-dialogs"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bf4748e10122b01435750ff530095b1217cf6546173459448b83913ebe7815df"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-events"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "68b107f8abed8105e4182de63845afcc7b69c098b7852a813ea7462a320992fc"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-events"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "27c26fb45f7c385ba980f5fa87ac677e363949e065a083722697ef1b2cc91e41"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-file"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a8d5564e570a38b43d78bdc063374a0c3098c4f0d64005b12f9bbe87e869b6d7"
+dependencies = [
+ "gloo-events 0.1.2",
+ "js-sys",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-file"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "97563d71863fb2824b2e974e754a81d19c4a7ec47b09ced8a0e6656b6d54bd1f"
+dependencies = [
+ "futures-channel",
+ "gloo-events 0.2.0",
+ "js-sys",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-history"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "85725d90bf0ed47063b3930ef28e863658a7905989e9929a8708aab74a1d5e7f"
+dependencies = [
+ "gloo-events 0.1.2",
+ "gloo-utils 0.1.7",
+ "serde",
+ "serde-wasm-bindgen 0.5.0",
+ "serde_urlencoded",
+ "thiserror",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-history"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "903f432be5ba34427eac5e16048ef65604a82061fe93789f2212afc73d8617d6"
+dependencies = [
+ "getrandom",
+ "gloo-events 0.2.0",
+ "gloo-utils 0.2.0",
+ "serde",
+ "serde-wasm-bindgen 0.6.5",
+ "serde_urlencoded",
+ "thiserror",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-net"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a66b4e3c7d9ed8d315fd6b97c8b1f74a7c6ecbbc2320e65ae7ed38b7068cc620"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-sink",
+ "gloo-utils 0.1.7",
+ "http 0.2.12",
+ "js-sys",
+ "pin-project",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-net"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ac9e8288ae2c632fa9f8657ac70bfe38a1530f345282d7ba66a1f70b72b7dc4"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-sink",
+ "gloo-utils 0.2.0",
+ "http 0.2.12",
+ "js-sys",
+ "pin-project",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-net"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c06f627b1a58ca3d42b45d6104bf1e1a03799df472df00988b6ba21accc10580"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-sink",
+ "gloo-utils 0.2.0",
+ "http 1.4.0",
+ "js-sys",
+ "pin-project",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-render"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2fd9306aef67cfd4449823aadcd14e3958e0800aa2183955a309112a84ec7764"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-render"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "56008b6744713a8e8d98ac3dcb7d06543d5662358c9c805b4ce2167ad4649833"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-storage"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5d6ab60bf5dbfd6f0ed1f7843da31b41010515c745735c970e821945ca91e480"
+dependencies = [
+ "gloo-utils 0.1.7",
+ "js-sys",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-storage"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fbc8031e8c92758af912f9bc08fbbadd3c6f3cfcbf6b64cdf3d6a81f0139277a"
+dependencies = [
+ "gloo-utils 0.2.0",
+ "js-sys",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-timers"
+version = "0.2.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9b995a66bb87bebce9a0f4a95aed01daca4872c050bfcb21653361c03bc35e5c"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "gloo-timers"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbb143cf96099802033e0d4f4963b19fd2e0b728bcf076cd9cf7f6634f092994"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "js-sys",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "gloo-utils"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "037fcb07216cb3a30f7292bd0176b050b7b9a052ba830ef7d5d65f6dc64ba58e"
+dependencies = [
+ "js-sys",
+ "serde",
+ "serde_json",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-utils"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b5555354113b18c547c1d3a98fbf7fb32a9ff4f6fa112ce823a21641a0ba3aa"
+dependencies = [
+ "js-sys",
+ "serde",
+ "serde_json",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-worker"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "13471584da78061a28306d1359dd0178d8d6fc1c7c80e5e35d27260346e0516a"
+dependencies = [
+ "anymap2",
+ "bincode",
+ "gloo-console 0.2.3",
+ "gloo-utils 0.1.7",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-worker"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "76495d3dd87de51da268fa3a593da118ab43eb7f8809e17eb38d3319b424e400"
+dependencies = [
+ "bincode",
+ "futures",
+ "gloo-utils 0.2.0",
+ "gloo-worker-macros",
+ "js-sys",
+ "pinned",
+ "serde",
+ "thiserror",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-worker-macros"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "956caa58d4857bc9941749d55e4bd3000032d8212762586fa5705632967140e7"
+dependencies = [
+ "proc-macro-crate",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+]
+
+[[package]]
+name = "hashbrown"
+version = "0.16.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "841d1cc9bed7f9236f321df977030373f4a4163ae1a7dbfe1a51a2c1a51d9100"
+
+[[package]]
+name = "hermit-abi"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc0fef456e4baa96da950455cd02c081ca953b141298e41db3fc7e36b1da849c"
+
+[[package]]
+name = "http"
+version = "0.2.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "601cbb57e577e2f5ef5be8e7b83f0f63994f25aa94d673e54a92d5c516d101f1"
+dependencies = [
+ "bytes",
+ "fnv",
+ "itoa",
+]
+
+[[package]]
+name = "http"
+version = "1.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3ba2a386d7f85a81f119ad7498ebe444d2e22c2af0b86b069416ace48b3311a"
+dependencies = [
+ "bytes",
+ "itoa",
+]
+
+[[package]]
+name = "implicit-clone"
+version = "0.4.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f8a9aa791c7b5a71b636b7a68207fdebf171ddfc593d9c8506ec4cbc527b6a84"
+dependencies = [
+ "implicit-clone-derive",
+ "indexmap",
+]
+
+[[package]]
+name = "implicit-clone-derive"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "699c1b6d335e63d0ba5c1e1c7f647371ce989c3bcbe1f7ed2b85fa56e3bd1a21"
+dependencies = [
+ "quote",
+ "syn 2.0.117",
+]
+
+[[package]]
+name = "indexmap"
+version = "2.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7714e70437a7dc3ac8eb7e6f8df75fd8eb422675fc7678aff7364301092b1017"
+dependencies = [
+ "equivalent",
+ "hashbrown",
+]
+
+[[package]]
+name = "itoa"
+version = "1.0.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "92ecc6618181def0457392ccd0ee51198e065e016d1d527a7ac1b6dc7c1f09d2"
+
+[[package]]
+name = "js-sys"
+version = "0.3.91"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b49715b7073f385ba4bc528e5747d02e66cb39c6146efb66b781f131f0fb399c"
+dependencies = [
+ "once_cell",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "libc"
+version = "0.2.183"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b5b646652bf6661599e1da8901b3b9522896f01e736bad5f723fe7a3a27f899d"
+
+[[package]]
+name = "memchr"
+version = "2.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f8ca58f447f06ed17d5fc4043ce1b10dd205e060fb3ce5b979b8ed8e59ff3f79"
+
+[[package]]
+name = "num_cpus"
+version = "1.17.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "91df4bbde75afed763b708b7eee1e8e7651e02d97f6d5dd763e89367e957b23b"
+dependencies = [
+ "hermit-abi",
+ "libc",
+]
+
+[[package]]
+name = "once_cell"
+version = "1.21.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9f7c3e4beb33f85d45ae3e3a1792185706c8e16d043238c593331cc7cd313b50"
+
+[[package]]
+name = "percent-encoding"
+version = "2.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9b4f627cb1b25917193a259e49bdad08f671f8d9708acfd5fe0a8c1455d87220"
+
+[[package]]
+name = "pin-project"
+version = "1.1.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f1749c7ed4bcaf4c3d0a3efc28538844fb29bcdd7d2b67b2be7e20ba861ff517"
+dependencies = [
+ "pin-project-internal",
+]
+
+[[package]]
+name = "pin-project-internal"
+version = "1.1.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d9b20ed30f105399776b9c883e68e536ef602a16ae6f596d2c473591d6ad64c6"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+]
+
+[[package]]
+name = "pin-project-lite"
+version = "0.2.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a89322df9ebe1c1578d689c92318e070967d1042b512afbe49518723f4e6d5cd"
+
+[[package]]
+name = "pinned"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a829027bd95e54cfe13e3e258a1ae7b645960553fb82b75ff852c29688ee595b"
+dependencies = [
+ "futures",
+ "rustversion",
+ "thiserror",
+]
+
+[[package]]
+name = "prettyplease"
+version = "0.2.37"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "479ca8adacdd7ce8f1fb39ce9ecccbfe93a3f1344b3d0d97f20bc0196208f62b"
+dependencies = [
+ "proc-macro2",
+ "syn 2.0.117",
+]
+
+[[package]]
+name = "proc-macro-crate"
+version = "1.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f4c021e1093a56626774e81216a4ce732a735e5bad4868a03f3ed65ca0c3919"
+dependencies = [
+ "once_cell",
+ "toml_edit",
+]
+
+[[package]]
+name = "proc-macro-error"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "da25490ff9892aab3fcf7c36f08cfb902dd3e71ca0f9f9517bea02a73a5ce38c"
+dependencies = [
+ "proc-macro-error-attr",
+ "proc-macro2",
+ "quote",
+ "syn 1.0.109",
+ "version_check",
+]
+
+[[package]]
+name = "proc-macro-error-attr"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a1be40180e52ecc98ad80b184934baf3d0d29f979574e439af5a55274b35f869"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "version_check",
+]
+
+[[package]]
+name = "proc-macro2"
+version = "1.0.106"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8fd00f0bb2e90d81d1044c2b32617f68fcb9fa3bb7640c23e9c748e53fb30934"
+dependencies = [
+ "unicode-ident",
+]
+
+[[package]]
+name = "prokio"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "03b55e106e5791fa5a13abd13c85d6127312e8e09098059ca2bc9b03ca4cf488"
+dependencies = [
+ "futures",
+ "gloo 0.8.1",
+ "num_cpus",
+ "once_cell",
+ "pin-project",
+ "pinned",
+ "tokio",
+ "tokio-stream",
+ "wasm-bindgen-futures",
+]
+
+[[package]]
+name = "quote"
+version = "1.0.45"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "41f2619966050689382d2b44f664f4bc593e129785a36d6ee376ddf37259b924"
+dependencies = [
+ "proc-macro2",
+]
+
+[[package]]
+name = "route-recognizer"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "afab94fb28594581f62d981211a9a4d53cc8130bbcbbb89a0440d9b8e81a7746"
+
+[[package]]
+name = "rustversion"
+version = "1.0.22"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b39cdef0fa800fc44525c84ccb54a029961a8215f9619753635a9c0d2538d46d"
+
+[[package]]
+name = "ryu"
+version = "1.0.23"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9774ba4a74de5f7b1c1451ed6cd5285a32eddb5cccb8cc655a4e50009e06477f"
+
+[[package]]
+name = "serde"
+version = "1.0.228"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9a8e94ea7f378bd32cbbd37198a4a91436180c5bb472411e48b5ec2e2124ae9e"
+dependencies = [
+ "serde_core",
+ "serde_derive",
+]
+
+[[package]]
+name = "serde-wasm-bindgen"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f3b143e2833c57ab9ad3ea280d21fd34e285a42837aeb0ee301f4f41890fa00e"
+dependencies = [
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "serde-wasm-bindgen"
+version = "0.6.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8302e169f0eddcc139c70f139d19d6467353af16f9fce27e8c30158036a1e16b"
+dependencies = [
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "serde_core"
+version = "1.0.228"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "41d385c7d4ca58e59fc732af25c3983b67ac852c1a25000afe1175de458b67ad"
+dependencies = [
+ "serde_derive",
+]
+
+[[package]]
+name = "serde_derive"
+version = "1.0.228"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d540f220d3187173da220f885ab66608367b6574e925011a9353e4badda91d79"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+]
+
+[[package]]
+name = "serde_json"
+version = "1.0.149"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "83fc039473c5595ace860d8c4fafa220ff474b3fc6bfdb4293327f1a37e94d86"
+dependencies = [
+ "itoa",
+ "memchr",
+ "serde",
+ "serde_core",
+ "zmij",
+]
+
+[[package]]
+name = "serde_urlencoded"
+version = "0.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d3491c14715ca2294c4d6a88f15e84739788c1d030eed8c110436aafdaa2f3fd"
+dependencies = [
+ "form_urlencoded",
+ "itoa",
+ "ryu",
+ "serde",
+]
+
+[[package]]
+name = "shanty-frontend"
+version = "0.1.0"
+dependencies = [
+ "gloo-net 0.6.0",
+ "gloo-timers 0.3.0",
+ "serde",
+ "serde_json",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+ "yew",
+ "yew-router",
+]
+
+[[package]]
+name = "slab"
+version = "0.4.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0c790de23124f9ab44544d7ac05d60440adc586479ce501c1d6d7da3cd8c9cf5"
+
+[[package]]
+name = "syn"
+version = "1.0.109"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72b64191b275b66ffe2469e8af2c1cfe3bafa67b529ead792a6d0160888b4237"
+dependencies = [
+ "proc-macro2",
+ "unicode-ident",
+]
+
+[[package]]
+name = "syn"
+version = "2.0.117"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e665b8803e7b1d2a727f4023456bbbbe74da67099c585258af0ad9c5013b9b99"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "thiserror"
+version = "1.0.69"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6aaf5339b578ea85b50e080feb250a3e8ae8cfcdff9a461c9ec2904bc923f52"
+dependencies = [
+ "thiserror-impl",
+]
+
+[[package]]
+name = "thiserror-impl"
+version = "1.0.69"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4fee6c4efc90059e10f81e6d42c60a18f76588c3d74cb83a0b242a2b6c7504c1"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+]
+
+[[package]]
+name = "tokio"
+version = "1.50.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "27ad5e34374e03cfffefc301becb44e9dc3c17584f414349ebe29ed26661822d"
+dependencies = [
+ "pin-project-lite",
+]
+
+[[package]]
+name = "tokio-stream"
+version = "0.1.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32da49809aab5c3bc678af03902d4ccddea2a87d028d86392a4b1560c6906c70"
+dependencies = [
+ "futures-core",
+ "pin-project-lite",
+ "tokio",
+]
+
+[[package]]
+name = "toml_datetime"
+version = "0.6.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "22cddaf88f4fbc13c51aebbf5f8eceb5c7c5a9da2ac40a13519eb5b0a0e8f11c"
+
+[[package]]
+name = "toml_edit"
+version = "0.19.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1b5bb770da30e5cbfde35a2d7b9b8a2c4b8ef89548a7a6aeab5c9a576e3e7421"
+dependencies = [
+ "indexmap",
+ "toml_datetime",
+ "winnow",
+]
+
+[[package]]
+name = "tracing"
+version = "0.1.44"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "63e71662fa4b2a2c3a26f570f037eb95bb1f85397f3cd8076caed2f026a6d100"
+dependencies = [
+ "pin-project-lite",
+ "tracing-attributes",
+ "tracing-core",
+]
+
+[[package]]
+name = "tracing-attributes"
+version = "0.1.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7490cfa5ec963746568740651ac6781f701c9c5ea257c58e057f3ba8cf69e8da"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+]
+
+[[package]]
+name = "tracing-core"
+version = "0.1.36"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "db97caf9d906fbde555dd62fa95ddba9eecfd14cb388e4f491a66d74cd5fb79a"
+dependencies = [
+ "once_cell",
+]
+
+[[package]]
+name = "unicode-ident"
+version = "1.0.24"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e6e4313cd5fcd3dad5cafa179702e2b244f760991f45397d14d4ebf38247da75"
+
+[[package]]
+name = "urlencoding"
+version = "2.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "daf8dba3b7eb870caf1ddeed7bc9d2a049f3cfdfae7cb521b087cc33ae4c49da"
+
+[[package]]
+name = "version_check"
+version = "0.9.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"
+
+[[package]]
+name = "wasi"
+version = "0.11.1+wasi-snapshot-preview1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ccf3ec651a847eb01de73ccad15eb7d99f80485de043efb2f370cd654f4ea44b"
+
+[[package]]
+name = "wasm-bindgen"
+version = "0.2.114"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6532f9a5c1ece3798cb1c2cfdba640b9b3ba884f5db45973a6f442510a87d38e"
+dependencies = [
+ "cfg-if",
+ "once_cell",
+ "rustversion",
+ "wasm-bindgen-macro",
+ "wasm-bindgen-shared",
+]
+
+[[package]]
+name = "wasm-bindgen-futures"
+version = "0.4.64"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e9c5522b3a28661442748e09d40924dfb9ca614b21c00d3fd135720e48b67db8"
+dependencies = [
+ "cfg-if",
+ "futures-util",
+ "js-sys",
+ "once_cell",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "wasm-bindgen-macro"
+version = "0.2.114"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "18a2d50fcf105fb33bb15f00e7a77b772945a2ee45dcf454961fd843e74c18e6"
+dependencies = [
+ "quote",
+ "wasm-bindgen-macro-support",
+]
+
+[[package]]
+name = "wasm-bindgen-macro-support"
+version = "0.2.114"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "03ce4caeaac547cdf713d280eda22a730824dd11e6b8c3ca9e42247b25c631e3"
+dependencies = [
+ "bumpalo",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+ "wasm-bindgen-shared",
+]
+
+[[package]]
+name = "wasm-bindgen-shared"
+version = "0.2.114"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "75a326b8c223ee17883a4251907455a2431acc2791c98c26279376490c378c16"
+dependencies = [
+ "unicode-ident",
+]
+
+[[package]]
+name = "web-sys"
+version = "0.3.91"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "854ba17bb104abfb26ba36da9729addc7ce7f06f5c0f90f3c391f8461cca21f9"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "winnow"
+version = "0.5.40"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f593a95398737aeed53e489c785df13f3618e41dbcd6718c6addbf1395aa6876"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "yew"
+version = "0.21.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5f1a03f255c70c7aa3e9c62e15292f142ede0564123543c1cc0c7a4f31660cac"
+dependencies = [
+ "console_error_panic_hook",
+ "futures",
+ "gloo 0.10.0",
+ "implicit-clone",
+ "indexmap",
+ "js-sys",
+ "prokio",
+ "rustversion",
+ "serde",
+ "slab",
+ "thiserror",
+ "tokio",
+ "tracing",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+ "yew-macro",
+]
+
+[[package]]
+name = "yew-macro"
+version = "0.21.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "02fd8ca5166d69e59f796500a2ce432ff751edecbbb308ca59fd3fe4d0343de2"
+dependencies = [
+ "boolinator",
+ "once_cell",
+ "prettyplease",
+ "proc-macro-error",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+]
+
+[[package]]
+name = "yew-router"
+version = "0.18.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4ca1d5052c96e6762b4d6209a8aded597758d442e6c479995faf0c7b5538e0c6"
+dependencies = [
+ "gloo 0.10.0",
+ "js-sys",
+ "route-recognizer",
+ "serde",
+ "serde_urlencoded",
+ "tracing",
+ "urlencoding",
+ "wasm-bindgen",
+ "web-sys",
+ "yew",
+ "yew-router-macro",
+]
+
+[[package]]
+name = "yew-router-macro"
+version = "0.18.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "42bfd190a07ca8cfde7cd4c52b3ac463803dc07323db8c34daa697e86365978c"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+]
+
+[[package]]
+name = "zmij"
+version = "1.0.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b8848ee67ecc8aedbaf3e4122217aff892639231befc6a1b58d29fff4c2cabaa"
diff --git a/frontend/Cargo.toml b/frontend/Cargo.toml
new file mode 100644
index 0000000..4b23e06
--- /dev/null
+++ b/frontend/Cargo.toml
@@ -0,0 +1,17 @@
+[workspace]
+
+[package]
+name = "shanty-frontend"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+yew = { version = "0.21", features = ["csr"] }
+yew-router = "0.18"
+gloo-net = "0.6"
+gloo-timers = "0.3"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+wasm-bindgen = "0.2"
+wasm-bindgen-futures = "0.4"
+web-sys = { version = "0.3", features = ["HtmlInputElement", "HtmlSelectElement", "Window"] }
diff --git a/frontend/Trunk.toml b/frontend/Trunk.toml
new file mode 100644
index 0000000..8c38c81
--- /dev/null
+++ b/frontend/Trunk.toml
@@ -0,0 +1,2 @@
+[build]
+dist = "../static"
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..ff38312
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Shanty</title>
+    <link data-trunk rel="css" href="style.css" />
+</head>
+<body>
+</body>
+</html>
diff --git a/frontend/src/api.rs b/frontend/src/api.rs
new file mode 100644
index 0000000..4b3c86a
--- /dev/null
+++ b/frontend/src/api.rs
@@ -0,0 +1,185 @@
+use gloo_net::http::Request;
+use serde::de::DeserializeOwned;
+
+use crate::types::*;
+
+const BASE: &str = "/api";
+
+#[derive(Debug, Clone)]
+pub struct ApiError(pub String);
+
+async fn get_json<T: DeserializeOwned>(url: &str) -> Result<T, ApiError> {
+    let resp = Request::get(url)
+        .send()
+        .await
+        .map_err(|e| ApiError(e.to_string()))?;
+    if !resp.ok() {
+        return Err(ApiError(format!("HTTP {}", resp.status())));
+    }
+    resp.json().await.map_err(|e| ApiError(e.to_string()))
+}
+
+async fn post_json<T: DeserializeOwned>(url: &str, body: &str) -> Result<T, ApiError> {
+    let resp = Request::post(url)
+        .header("Content-Type", "application/json")
+        .body(body)
+        .map_err(|e| ApiError(e.to_string()))?
+        .send()
+        .await
+        .map_err(|e| ApiError(e.to_string()))?;
+    if !resp.ok() {
+        return Err(ApiError(format!("HTTP {}", resp.status())));
+    }
+    resp.json().await.map_err(|e| ApiError(e.to_string()))
+}
+
+async fn post_empty<T: DeserializeOwned>(url: &str) -> Result<T, ApiError> {
+    let resp = Request::post(url)
+        .send()
+        .await
+        .map_err(|e| ApiError(e.to_string()))?;
+    if !resp.ok() {
+        return Err(ApiError(format!("HTTP {}", resp.status())));
+    }
+    resp.json().await.map_err(|e| ApiError(e.to_string()))
+}
+
+async fn delete(url: &str) -> Result<(), ApiError> {
+    let resp = Request::delete(url)
+        .send()
+        .await
+        .map_err(|e| ApiError(e.to_string()))?;
+    if !resp.ok() {
+        return Err(ApiError(format!("HTTP {}", resp.status())));
+    }
+    Ok(())
+}
+
+// --- Status ---
+pub async fn get_status() -> Result<Status, ApiError> {
+    get_json(&format!("{BASE}/status")).await
+}
+
+// --- Search ---
+pub async fn search_artist(query: &str, limit: u32) -> Result<Vec<ArtistResult>, ApiError> {
+    get_json(&format!("{BASE}/search/artist?q={query}&limit={limit}")).await
+}
+
+pub async fn search_album(query: &str, artist: Option<&str>, limit: u32) -> Result<Vec<AlbumResult>, ApiError> {
+    let mut url = format!("{BASE}/search/album?q={query}&limit={limit}");
+    if let Some(a) = artist {
+        url.push_str(&format!("&artist={a}"));
+    }
+    get_json(&url).await
+}
+
+pub async fn search_track(query: &str, artist: Option<&str>, limit: u32) -> Result<Vec<TrackResult>, ApiError> {
+    let mut url = format!("{BASE}/search/track?q={query}&limit={limit}");
+    if let Some(a) = artist {
+        url.push_str(&format!("&artist={a}"));
+    }
+    get_json(&url).await
+}
+
+// --- Library ---
+pub async fn list_artists(limit: u64, offset: u64) -> Result<Vec<Artist>, ApiError> {
+    get_json(&format!("{BASE}/artists?limit={limit}&offset={offset}")).await
+}
+
+pub async fn get_artist(id: i32) -> Result<ArtistDetail, ApiError> {
+    get_json(&format!("{BASE}/artists/{id}")).await
+}
+
+pub async fn get_album(id: i32) -> Result<AlbumDetail, ApiError> {
+    get_json(&format!("{BASE}/albums/{id}")).await
+}
+
+pub async fn list_tracks(limit: u64, offset: u64) -> Result<Vec<Track>, ApiError> {
+    get_json(&format!("{BASE}/tracks?limit={limit}&offset={offset}")).await
+}
+
+// --- Watchlist ---
+pub async fn add_artist(name: &str, mbid: Option<&str>) -> Result<AddSummary, ApiError> {
+    let body = match mbid {
+        Some(m) => format!(r#"{{"name":"{name}","mbid":"{m}"}}"#),
+        None => format!(r#"{{"name":"{name}"}}"#),
+    };
+    post_json(&format!("{BASE}/artists"), &body).await
+}
+
+pub async fn add_album(artist: &str, album: &str, mbid: Option<&str>) -> Result<AddSummary, ApiError> {
+    let body = match mbid {
+        Some(m) => format!(r#"{{"artist":"{artist}","album":"{album}","mbid":"{m}"}}"#),
+        None => format!(r#"{{"artist":"{artist}","album":"{album}"}}"#),
+    };
+    post_json(&format!("{BASE}/albums"), &body).await
+}
+
+pub async fn get_watchlist() -> Result<Vec<WatchListEntry>, ApiError> {
+    get_json(&format!("{BASE}/watchlist")).await
+}
+
+pub async fn remove_watchlist(id: i32) -> Result<(), ApiError> {
+    delete(&format!("{BASE}/watchlist/{id}")).await
+}
+
+// --- Downloads ---
+pub async fn get_downloads(status: Option<&str>) -> Result<Vec<DownloadItem>, ApiError> {
+    let mut url = format!("{BASE}/downloads/queue");
+    if let Some(s) = status {
+        url.push_str(&format!("?status={s}"));
+    }
+    get_json(&url).await
+}
+
+pub async fn enqueue_download(query: &str) -> Result<DownloadItem, ApiError> {
+    post_json(
+        &format!("{BASE}/downloads"),
+        &format!(r#"{{"query":"{query}"}}"#),
+    )
+    .await
+}
+
+pub async fn sync_downloads() -> Result<SyncStats, ApiError> {
+    post_empty(&format!("{BASE}/downloads/sync")).await
+}
+
+pub async fn process_downloads() -> Result<TaskRef, ApiError> {
+    post_empty(&format!("{BASE}/downloads/process")).await
+}
+
+pub async fn retry_download(id: i32) -> Result<(), ApiError> {
+    let resp = Request::post(&format!("{BASE}/downloads/retry/{id}"))
+        .send()
+        .await
+        .map_err(|e| ApiError(e.to_string()))?;
+    if !resp.ok() {
+        return Err(ApiError(format!("HTTP {}", resp.status())));
+    }
+    Ok(())
+}
+
+pub async fn cancel_download(id: i32) -> Result<(), ApiError> {
+    delete(&format!("{BASE}/downloads/{id}")).await
+}
+
+// --- System ---
+pub async fn trigger_index() -> Result<TaskRef, ApiError> {
+    post_empty(&format!("{BASE}/index")).await
+}
+
+pub async fn trigger_tag() -> Result<TaskRef, ApiError> {
+    post_empty(&format!("{BASE}/tag")).await
+}
+
+pub async fn trigger_organize() -> Result<TaskRef, ApiError> {
+    post_empty(&format!("{BASE}/organize")).await
+}
+
+pub async fn get_task(id: &str) -> Result<TaskInfo, ApiError> {
+    get_json(&format!("{BASE}/tasks/{id}")).await
+}
+
+pub async fn get_config() -> Result<AppConfig, ApiError> {
+    get_json(&format!("{BASE}/config")).await
+}
diff --git a/frontend/src/components/mod.rs b/frontend/src/components/mod.rs
new file mode 100644
index 0000000..9986740
--- /dev/null
+++ b/frontend/src/components/mod.rs
@@ -0,0 +1,2 @@
+pub mod navbar;
+pub mod status_badge;
diff --git a/frontend/src/components/navbar.rs b/frontend/src/components/navbar.rs
new file mode 100644
index 0000000..a35ba96
--- /dev/null
+++ b/frontend/src/components/navbar.rs
@@ -0,0 +1,30 @@
+use yew::prelude::*;
+use yew_router::prelude::*;
+
+use crate::pages::Route;
+
+#[function_component(Navbar)]
+pub fn navbar() -> Html {
+    let route = use_route::<Route>();
+
+    let link = |to: Route, label: &str| {
+        let active = route.as_ref() == Some(&to);
+        let class = if active { "active" } else { "" };
+        html! {
+            <Link<Route> to={to} classes={classes!(class)}>{ label }</Link<Route>>
+        }
+    };
+
+    html! {
+        <div class="sidebar">
+            <h1>{ "Shanty" }</h1>
+            <nav>
+                { link(Route::Dashboard, "Dashboard") }
+                { link(Route::Search, "Search") }
+                { link(Route::Library, "Library") }
+                { link(Route::Downloads, "Downloads") }
+                { link(Route::Settings, "Settings") }
+            </nav>
+        </div>
+    }
+}
diff --git a/frontend/src/components/status_badge.rs b/frontend/src/components/status_badge.rs
new file mode 100644
index 0000000..6273ca1
--- /dev/null
+++ b/frontend/src/components/status_badge.rs
@@ -0,0 +1,26 @@
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq)]
+pub struct Props {
+    pub status: String,
+}
+
+#[function_component(StatusBadge)]
+pub fn status_badge(props: &Props) -> Html {
+    let class = match props.status.to_lowercase().as_str() {
+        "wanted" => "badge badge-wanted",
+        "available" => "badge badge-available",
+        "downloaded" => "badge badge-downloaded",
+        "owned" => "badge badge-owned",
+        "pending" => "badge badge-pending",
+        "failed" => "badge badge-failed",
+        "completed" => "badge badge-completed",
+        "downloading" => "badge badge-available",
+        "cancelled" => "badge badge-pending",
+        _ => "badge",
+    };
+
+    html! {
+        <span class={class}>{ &props.status }</span>
+    }
+}
diff --git a/frontend/src/main.rs b/frontend/src/main.rs
new file mode 100644
index 0000000..8f37443
--- /dev/null
+++ b/frontend/src/main.rs
@@ -0,0 +1,28 @@
+mod api;
+mod components;
+mod pages;
+mod types;
+
+use yew::prelude::*;
+use yew_router::prelude::*;
+
+use components::navbar::Navbar;
+use pages::{switch, Route};
+
+#[function_component(App)]
+fn app() -> Html {
+    html! {
+        <BrowserRouter>
+            <div class="app">
+                <Navbar />
+                <div class="main-content">
+                    <Switch<Route> render={switch} />
+                </div>
+            </div>
+        </BrowserRouter>
+    }
+}
+
+fn main() {
+    yew::Renderer::<App>::new().render();
+}
diff --git a/frontend/src/pages/album.rs b/frontend/src/pages/album.rs
new file mode 100644
index 0000000..bf68799
--- /dev/null
+++ b/frontend/src/pages/album.rs
@@ -0,0 +1,71 @@
+use yew::prelude::*;
+
+use crate::api;
+use crate::types::AlbumDetail;
+
+#[derive(Properties, PartialEq)]
+pub struct Props {
+    pub id: i32,
+}
+
+#[function_component(AlbumPage)]
+pub fn album_page(props: &Props) -> Html {
+    let detail = use_state(|| None::<AlbumDetail>);
+    let error = use_state(|| None::<String>);
+    let id = props.id;
+
+    {
+        let detail = detail.clone();
+        let error = error.clone();
+        use_effect_with(id, move |id| {
+            let id = *id;
+            wasm_bindgen_futures::spawn_local(async move {
+                match api::get_album(id).await {
+                    Ok(d) => detail.set(Some(d)),
+                    Err(e) => error.set(Some(e.0)),
+                }
+            });
+        });
+    }
+
+    if let Some(ref err) = *error {
+        return html! { <div class="error">{ format!("Error: {err}") }</div> };
+    }
+
+    let Some(ref d) = *detail else {
+        return html! { <p class="loading">{ "Loading..." }</p> };
+    };
+
+    html! {
+        <div>
+            <div class="page-header">
+                <h2>{ &d.album.name }</h2>
+                <p class="text-muted">{ format!("by {}", d.album.album_artist) }</p>
+                if let Some(year) = d.album.year {
+                    <p class="text-muted text-sm">{ format!("Year: {year}") }</p>
+                }
+            </div>
+
+            <h3 class="mb-1">{ format!("Tracks ({})", d.tracks.len()) }</h3>
+            if d.tracks.is_empty() {
+                <p class="text-muted">{ "No tracks found." }</p>
+            } else {
+                <table>
+                    <thead>
+                        <tr><th>{ "#" }</th><th>{ "Title" }</th><th>{ "Artist" }</th><th>{ "Codec" }</th></tr>
+                    </thead>
+                    <tbody>
+                        { for d.tracks.iter().map(|t| html! {
+                            <tr>
+                                <td>{ t.track_number.map(|n| n.to_string()).unwrap_or_default() }</td>
+                                <td>{ t.title.as_deref().unwrap_or("Unknown") }</td>
+                                <td>{ t.artist.as_deref().unwrap_or("") }</td>
+                                <td class="text-muted text-sm">{ t.codec.as_deref().unwrap_or("") }</td>
+                            </tr>
+                        })}
+                    </tbody>
+                </table>
+            }
+        </div>
+    }
+}
diff --git a/frontend/src/pages/artist.rs b/frontend/src/pages/artist.rs
new file mode 100644
index 0000000..85a5800
--- /dev/null
+++ b/frontend/src/pages/artist.rs
@@ -0,0 +1,75 @@
+use yew::prelude::*;
+use yew_router::prelude::*;
+
+use crate::api;
+use crate::pages::Route;
+use crate::types::ArtistDetail;
+
+#[derive(Properties, PartialEq)]
+pub struct Props {
+    pub id: i32,
+}
+
+#[function_component(ArtistPage)]
+pub fn artist_page(props: &Props) -> Html {
+    let detail = use_state(|| None::<ArtistDetail>);
+    let error = use_state(|| None::<String>);
+    let id = props.id;
+
+    {
+        let detail = detail.clone();
+        let error = error.clone();
+        use_effect_with(id, move |id| {
+            let id = *id;
+            wasm_bindgen_futures::spawn_local(async move {
+                match api::get_artist(id).await {
+                    Ok(d) => detail.set(Some(d)),
+                    Err(e) => error.set(Some(e.0)),
+                }
+            });
+        });
+    }
+
+    if let Some(ref err) = *error {
+        return html! { <div class="error">{ format!("Error: {err}") }</div> };
+    }
+
+    let Some(ref d) = *detail else {
+        return html! { <p class="loading">{ "Loading..." }</p> };
+    };
+
+    html! {
+        <div>
+            <div class="page-header">
+                <h2>{ &d.artist.name }</h2>
+                if let Some(ref mbid) = d.artist.musicbrainz_id {
+                    <p class="text-muted text-sm">{ format!("MBID: {mbid}") }</p>
+                }
+            </div>
+
+            <h3 class="mb-1">{ format!("Albums ({})", d.albums.len()) }</h3>
+            if d.albums.is_empty() {
+                <p class="text-muted">{ "No albums found." }</p>
+            } else {
+                <table>
+                    <thead>
+                        <tr><th>{ "Name" }</th><th>{ "Year" }</th><th>{ "Genre" }</th></tr>
+                    </thead>
+                    <tbody>
+                        { for d.albums.iter().map(|a| html! {
+                            <tr>
+                                <td>
+                                    <Link<Route> to={Route::Album { id: a.id }}>
+                                        { &a.name }
+                                    </Link<Route>>
+                                </td>
+                                <td>{ a.year.map(|y| y.to_string()).unwrap_or_default() }</td>
+                                <td>{ a.genre.as_deref().unwrap_or("") }</td>
+                            </tr>
+                        })}
+                    </tbody>
+                </table>
+            }
+        </div>
+    }
+}
diff --git a/frontend/src/pages/dashboard.rs b/frontend/src/pages/dashboard.rs
new file mode 100644
index 0000000..cc8831b
--- /dev/null
+++ b/frontend/src/pages/dashboard.rs
@@ -0,0 +1,88 @@
+use yew::prelude::*;
+
+use crate::api;
+use crate::components::status_badge::StatusBadge;
+use crate::types::Status;
+
+#[function_component(DashboardPage)]
+pub fn dashboard() -> Html {
+    let status = use_state(|| None::<Status>);
+    let error = use_state(|| None::<String>);
+
+    {
+        let status = status.clone();
+        let error = error.clone();
+        use_effect_with((), move |_| {
+            wasm_bindgen_futures::spawn_local(async move {
+                match api::get_status().await {
+                    Ok(s) => status.set(Some(s)),
+                    Err(e) => error.set(Some(e.0)),
+                }
+            });
+        });
+    }
+
+    if let Some(ref err) = *error {
+        return html! { <div class="error">{ format!("Error: {err}") }</div> };
+    }
+
+    let Some(ref s) = *status else {
+        return html! { <p class="loading">{ "Loading..." }</p> };
+    };
+
+    html! {
+        <div>
+            <div class="page-header">
+                <h2>{ "Dashboard" }</h2>
+            </div>
+
+            <div class="stats-grid">
+                <div class="stat-card">
+                    <div class="value">{ s.library.total_items }</div>
+                    <div class="label">{ "Total Items" }</div>
+                </div>
+                <div class="stat-card">
+                    <div class="value">{ s.library.wanted }</div>
+                    <div class="label">{ "Wanted" }</div>
+                </div>
+                <div class="stat-card">
+                    <div class="value">{ s.library.downloaded }</div>
+                    <div class="label">{ "Downloaded" }</div>
+                </div>
+                <div class="stat-card">
+                    <div class="value">{ s.library.owned }</div>
+                    <div class="label">{ "Owned" }</div>
+                </div>
+            </div>
+
+            <div class="card">
+                <h3>{ "Download Queue" }</h3>
+                <p>{ format!("{} pending, {} downloading", s.queue.pending, s.queue.downloading) }</p>
+            </div>
+
+            if !s.tasks.is_empty() {
+                <div class="card">
+                    <h3>{ "Background Tasks" }</h3>
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>{ "Type" }</th>
+                                <th>{ "Status" }</th>
+                                <th>{ "Result" }</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            { for s.tasks.iter().map(|t| html! {
+                                <tr>
+                                    <td>{ &t.task_type }</td>
+                                    <td><StatusBadge status={t.status.clone()} /></td>
+                                    <td class="text-sm text-muted">{ t.result.as_deref().unwrap_or("") }</td>
+                                </tr>
+                            })}
+                        </tbody>
+                    </table>
+                </div>
+            }
+        </div>
+    }
+}
diff --git a/frontend/src/pages/downloads.rs b/frontend/src/pages/downloads.rs
new file mode 100644
index 0000000..b177bfe
--- /dev/null
+++ b/frontend/src/pages/downloads.rs
@@ -0,0 +1,191 @@
+use web_sys::HtmlInputElement;
+use yew::prelude::*;
+
+use crate::api;
+use crate::components::status_badge::StatusBadge;
+use crate::types::DownloadItem;
+
+#[function_component(DownloadsPage)]
+pub fn downloads_page() -> Html {
+    let items = use_state(|| None::<Vec<DownloadItem>>);
+    let error = use_state(|| None::<String>);
+    let message = use_state(|| None::<String>);
+    let dl_query = use_state(|| String::new());
+
+    let refresh = {
+        let items = items.clone();
+        let error = error.clone();
+        Callback::from(move |_: ()| {
+            let items = items.clone();
+            let error = error.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                match api::get_downloads(None).await {
+                    Ok(d) => items.set(Some(d)),
+                    Err(e) => error.set(Some(e.0)),
+                }
+            });
+        })
+    };
+
+    {
+        let refresh = refresh.clone();
+        use_effect_with((), move |_| {
+            refresh.emit(());
+        });
+    }
+
+    let on_sync = {
+        let message = message.clone();
+        let error = error.clone();
+        let refresh = refresh.clone();
+        Callback::from(move |_: MouseEvent| {
+            let message = message.clone();
+            let error = error.clone();
+            let refresh = refresh.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                match api::sync_downloads().await {
+                    Ok(s) => {
+                        message.set(Some(format!(
+                            "Synced: {} found, {} enqueued, {} skipped",
+                            s.found, s.enqueued, s.skipped
+                        )));
+                        refresh.emit(());
+                    }
+                    Err(e) => error.set(Some(e.0)),
+                }
+            });
+        })
+    };
+
+    let on_process = {
+        let message = message.clone();
+        let error = error.clone();
+        Callback::from(move |_: MouseEvent| {
+            let message = message.clone();
+            let error = error.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                match api::process_downloads().await {
+                    Ok(t) => message.set(Some(format!("Processing started (task: {})", t.task_id))),
+                    Err(e) => error.set(Some(e.0)),
+                }
+            });
+        })
+    };
+
+    let on_manual_dl = {
+        let dl_query = dl_query.clone();
+        let message = message.clone();
+        let error = error.clone();
+        let refresh = refresh.clone();
+        Callback::from(move |e: SubmitEvent| {
+            e.prevent_default();
+            let q = (*dl_query).clone();
+            let message = message.clone();
+            let error = error.clone();
+            let refresh = refresh.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                match api::enqueue_download(&q).await {
+                    Ok(item) => {
+                        message.set(Some(format!("Enqueued: {}", item.query)));
+                        refresh.emit(());
+                    }
+                    Err(e) => error.set(Some(e.0)),
+                }
+            });
+        })
+    };
+
+    html! {
+        <div>
+            <div class="page-header">
+                <h2>{ "Downloads" }</h2>
+            </div>
+
+            <div class="actions mb-2">
+                <button class="btn btn-primary" onclick={on_sync}>{ "Sync from Watchlist" }</button>
+                <button class="btn btn-success" onclick={on_process}>{ "Process Queue" }</button>
+            </div>
+
+            <form onsubmit={on_manual_dl}>
+                <div class="search-bar">
+                    <input
+                        type="text"
+                        placeholder="Manual download (search query or URL)..."
+                        value={(*dl_query).clone()}
+                        oninput={let q = dl_query.clone(); Callback::from(move |e: InputEvent| {
+                            let input: HtmlInputElement = e.target_unchecked_into();
+                            q.set(input.value());
+                        })}
+                    />
+                    <button type="submit" class="btn btn-primary">{ "Download" }</button>
+                </div>
+            </form>
+
+            if let Some(ref msg) = *message {
+                <div class="card" style="border-color: var(--success);">{ msg }</div>
+            }
+            if let Some(ref err) = *error {
+                <div class="card error">{ err }</div>
+            }
+
+            { match &*items {
+                None => html! { <p class="loading">{ "Loading..." }</p> },
+                Some(items) if items.is_empty() => html! { <p class="text-muted">{ "Queue is empty." }</p> },
+                Some(items) => html! {
+                    <table>
+                        <thead>
+                            <tr><th>{ "ID" }</th><th>{ "Query" }</th><th>{ "Status" }</th><th>{ "Retries" }</th><th>{ "Error" }</th><th></th></tr>
+                        </thead>
+                        <tbody>
+                            { for items.iter().map(|item| {
+                                let id = item.id;
+                                let refresh = refresh.clone();
+                                html! {
+                                    <tr>
+                                        <td>{ item.id }</td>
+                                        <td>{ &item.query }</td>
+                                        <td><StatusBadge status={item.status.clone()} /></td>
+                                        <td>{ item.retry_count }</td>
+                                        <td class="text-sm text-muted">{ item.error_message.as_deref().unwrap_or("") }</td>
+                                        <td>
+                                            if item.status == "Failed" {
+                                                <button class="btn btn-sm btn-secondary"
+                                                    onclick={{
+                                                        let refresh = refresh.clone();
+                                                        Callback::from(move |_: MouseEvent| {
+                                                            let refresh = refresh.clone();
+                                                            wasm_bindgen_futures::spawn_local(async move {
+                                                                let _ = api::retry_download(id).await;
+                                                                refresh.emit(());
+                                                            });
+                                                        })
+                                                    }}>
+                                                    { "Retry" }
+                                                </button>
+                                            }
+                                            if item.status == "Pending" {
+                                                <button class="btn btn-sm btn-danger"
+                                                    onclick={{
+                                                        let refresh = refresh.clone();
+                                                        Callback::from(move |_: MouseEvent| {
+                                                            let refresh = refresh.clone();
+                                                            wasm_bindgen_futures::spawn_local(async move {
+                                                                let _ = api::cancel_download(id).await;
+                                                                refresh.emit(());
+                                                            });
+                                                        })
+                                                    }}>
+                                                    { "Cancel" }
+                                                </button>
+                                            }
+                                        </td>
+                                    </tr>
+                                }
+                            })}
+                        </tbody>
+                    </table>
+                },
+            }}
+        </div>
+    }
+}
diff --git a/frontend/src/pages/library.rs b/frontend/src/pages/library.rs
new file mode 100644
index 0000000..cfb9c4e
--- /dev/null
+++ b/frontend/src/pages/library.rs
@@ -0,0 +1,64 @@
+use yew::prelude::*;
+use yew_router::prelude::*;
+
+use crate::api;
+use crate::pages::Route;
+use crate::types::Artist;
+
+#[function_component(LibraryPage)]
+pub fn library_page() -> Html {
+    let artists = use_state(|| None::<Vec<Artist>>);
+    let error = use_state(|| None::<String>);
+
+    {
+        let artists = artists.clone();
+        let error = error.clone();
+        use_effect_with((), move |_| {
+            wasm_bindgen_futures::spawn_local(async move {
+                match api::list_artists(100, 0).await {
+                    Ok(a) => artists.set(Some(a)),
+                    Err(e) => error.set(Some(e.0)),
+                }
+            });
+        });
+    }
+
+    if let Some(ref err) = *error {
+        return html! { <div class="error">{ format!("Error: {err}") }</div> };
+    }
+
+    let Some(ref artists) = *artists else {
+        return html! { <p class="loading">{ "Loading..." }</p> };
+    };
+
+    html! {
+        <div>
+            <div class="page-header">
+                <h2>{ "Library" }</h2>
+                <p>{ format!("{} artists", artists.len()) }</p>
+            </div>
+
+            if artists.is_empty() {
+                <p class="text-muted">{ "No artists in library. Use Search to add some!" }</p>
+            } else {
+                <table>
+                    <thead>
+                        <tr><th>{ "Name" }</th><th>{ "MusicBrainz ID" }</th></tr>
+                    </thead>
+                    <tbody>
+                        { for artists.iter().map(|a| html! {
+                            <tr>
+                                <td>
+                                    <Link<Route> to={Route::Artist { id: a.id }}>
+                                        { &a.name }
+                                    </Link<Route>>
+                                </td>
+                                <td class="text-muted text-sm">{ a.musicbrainz_id.as_deref().unwrap_or("") }</td>
+                            </tr>
+                        })}
+                    </tbody>
+                </table>
+            }
+        </div>
+    }
+}
diff --git a/frontend/src/pages/mod.rs b/frontend/src/pages/mod.rs
new file mode 100644
index 0000000..00bb781
--- /dev/null
+++ b/frontend/src/pages/mod.rs
@@ -0,0 +1,44 @@
+pub mod album;
+pub mod artist;
+pub mod dashboard;
+pub mod downloads;
+pub mod library;
+pub mod search;
+pub mod settings;
+
+use yew::prelude::*;
+use yew_router::prelude::*;
+
+#[derive(Clone, Routable, PartialEq)]
+pub enum Route {
+    #[at("/")]
+    Dashboard,
+    #[at("/search")]
+    Search,
+    #[at("/library")]
+    Library,
+    #[at("/artists/:id")]
+    Artist { id: i32 },
+    #[at("/albums/:id")]
+    Album { id: i32 },
+    #[at("/downloads")]
+    Downloads,
+    #[at("/settings")]
+    Settings,
+    #[not_found]
+    #[at("/404")]
+    NotFound,
+}
+
+pub fn switch(route: Route) -> Html {
+    match route {
+        Route::Dashboard => html! { <dashboard::DashboardPage /> },
+        Route::Search => html! { <search::SearchPage /> },
+        Route::Library => html! { <library::LibraryPage /> },
+        Route::Artist { id } => html! { <artist::ArtistPage {id} /> },
+        Route::Album { id } => html! { <album::AlbumPage {id} /> },
+        Route::Downloads => html! { <downloads::DownloadsPage /> },
+        Route::Settings => html! { <settings::SettingsPage /> },
+        Route::NotFound => html! { <h2>{ "404 — Not Found" }</h2> },
+    }
+}
diff --git a/frontend/src/pages/search.rs b/frontend/src/pages/search.rs
new file mode 100644
index 0000000..55cb506
--- /dev/null
+++ b/frontend/src/pages/search.rs
@@ -0,0 +1,214 @@
+use web_sys::HtmlInputElement;
+use web_sys::HtmlSelectElement;
+use yew::prelude::*;
+
+use crate::api;
+use crate::types::*;
+
+enum SearchResults {
+    None,
+    Artists(Vec<ArtistResult>),
+    Albums(Vec<AlbumResult>),
+    Tracks(Vec<TrackResult>),
+}
+
+#[function_component(SearchPage)]
+pub fn search_page() -> Html {
+    let query = use_state(|| String::new());
+    let search_type = use_state(|| "artist".to_string());
+    let results = use_state(|| SearchResults::None);
+    let error = use_state(|| None::<String>);
+    let message = use_state(|| None::<String>);
+
+    let on_search = {
+        let query = query.clone();
+        let search_type = search_type.clone();
+        let results = results.clone();
+        let error = error.clone();
+        Callback::from(move |e: SubmitEvent| {
+            e.prevent_default();
+            let q = (*query).clone();
+            let st = (*search_type).clone();
+            let results = results.clone();
+            let error = error.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                error.set(None);
+                match st.as_str() {
+                    "artist" => match api::search_artist(&q, 10).await {
+                        Ok(r) => results.set(SearchResults::Artists(r)),
+                        Err(e) => error.set(Some(e.0)),
+                    },
+                    "album" => match api::search_album(&q, None, 10).await {
+                        Ok(r) => results.set(SearchResults::Albums(r)),
+                        Err(e) => error.set(Some(e.0)),
+                    },
+                    "track" => match api::search_track(&q, None, 10).await {
+                        Ok(r) => results.set(SearchResults::Tracks(r)),
+                        Err(e) => error.set(Some(e.0)),
+                    },
+                    _ => {}
+                }
+            });
+        })
+    };
+
+    let on_add_artist = {
+        let message = message.clone();
+        let error = error.clone();
+        move |name: String, mbid: String| {
+            let message = message.clone();
+            let error = error.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                match api::add_artist(&name, Some(&mbid)).await {
+                    Ok(s) => message.set(Some(format!(
+                        "Added {} tracks ({} already owned)",
+                        s.tracks_added, s.tracks_already_owned
+                    ))),
+                    Err(e) => error.set(Some(e.0)),
+                }
+            });
+        }
+    };
+
+    let on_add_album = {
+        let message = message.clone();
+        let error = error.clone();
+        move |artist: String, title: String, mbid: String| {
+            let message = message.clone();
+            let error = error.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                match api::add_album(&artist, &title, Some(&mbid)).await {
+                    Ok(s) => message.set(Some(format!(
+                        "Added {} tracks ({} already owned)",
+                        s.tracks_added, s.tracks_already_owned
+                    ))),
+                    Err(e) => error.set(Some(e.0)),
+                }
+            });
+        }
+    };
+
+    html! {
+        <div>
+            <div class="page-header">
+                <h2>{ "Search" }</h2>
+                <p>{ "Find music on MusicBrainz and add to your library" }</p>
+            </div>
+
+            <form onsubmit={on_search}>
+                <div class="search-bar">
+                    <input
+                        type="text"
+                        placeholder="Search..."
+                        value={(*query).clone()}
+                        oninput={let q = query.clone(); Callback::from(move |e: InputEvent| {
+                            let input: HtmlInputElement = e.target_unchecked_into();
+                            q.set(input.value());
+                        })}
+                    />
+                    <select onchange={let st = search_type.clone(); Callback::from(move |e: Event| {
+                        let select: HtmlSelectElement = e.target_unchecked_into();
+                        st.set(select.value());
+                    })}>
+                        <option value="artist" selected=true>{ "Artist" }</option>
+                        <option value="album">{ "Album" }</option>
+                        <option value="track">{ "Track" }</option>
+                    </select>
+                    <button type="submit" class="btn btn-primary">{ "Search" }</button>
+                </div>
+            </form>
+
+            if let Some(ref msg) = *message {
+                <div class="card" style="border-color: var(--success);">
+                    <p>{ msg }</p>
+                </div>
+            }
+            if let Some(ref err) = *error {
+                <div class="card error">{ err }</div>
+            }
+
+            { match &*results {
+                SearchResults::None => html! {},
+                SearchResults::Artists(items) => html! {
+                    <table>
+                        <thead>
+                            <tr><th>{ "Name" }</th><th>{ "Country" }</th><th>{ "Type" }</th><th>{ "Score" }</th><th></th></tr>
+                        </thead>
+                        <tbody>
+                            { for items.iter().map(|a| {
+                                let name = a.name.clone();
+                                let mbid = a.id.clone();
+                                let on_add = on_add_artist.clone();
+                                html! {
+                                    <tr>
+                                        <td>
+                                            { &a.name }
+                                            if let Some(ref d) = a.disambiguation {
+                                                <span class="text-muted text-sm">{ format!(" ({d})") }</span>
+                                            }
+                                        </td>
+                                        <td>{ a.country.as_deref().unwrap_or("") }</td>
+                                        <td>{ a.artist_type.as_deref().unwrap_or("") }</td>
+                                        <td>{ a.score }</td>
+                                        <td>
+                                            <button class="btn btn-sm btn-success"
+                                                onclick={Callback::from(move |_| on_add(name.clone(), mbid.clone()))}>
+                                                { "Add" }
+                                            </button>
+                                        </td>
+                                    </tr>
+                                }
+                            })}
+                        </tbody>
+                    </table>
+                },
+                SearchResults::Albums(items) => html! {
+                    <table>
+                        <thead>
+                            <tr><th>{ "Title" }</th><th>{ "Artist" }</th><th>{ "Year" }</th><th>{ "Score" }</th><th></th></tr>
+                        </thead>
+                        <tbody>
+                            { for items.iter().map(|a| {
+                                let artist = a.artist.clone();
+                                let title = a.title.clone();
+                                let mbid = a.id.clone();
+                                let on_add = on_add_album.clone();
+                                html! {
+                                    <tr>
+                                        <td>{ &a.title }</td>
+                                        <td>{ &a.artist }</td>
+                                        <td>{ a.year.as_deref().unwrap_or("") }</td>
+                                        <td>{ a.score }</td>
+                                        <td>
+                                            <button class="btn btn-sm btn-success"
+                                                onclick={Callback::from(move |_| on_add(artist.clone(), title.clone(), mbid.clone()))}>
+                                                { "Add" }
+                                            </button>
+                                        </td>
+                                    </tr>
+                                }
+                            })}
+                        </tbody>
+                    </table>
+                },
+                SearchResults::Tracks(items) => html! {
+                    <table>
+                        <thead>
+                            <tr><th>{ "Title" }</th><th>{ "Artist" }</th><th>{ "Album" }</th><th>{ "Score" }</th></tr>
+                        </thead>
+                        <tbody>
+                            { for items.iter().map(|t| html! {
+                                <tr>
+                                    <td>{ &t.title }</td>
+                                    <td>{ &t.artist }</td>
+                                    <td>{ t.album.as_deref().unwrap_or("") }</td>
+                                    <td>{ t.score }</td>
+                                </tr>
+                            })}
+                        </tbody>
+                    </table>
+                },
+            }}
+        </div>
+    }
+}
diff --git a/frontend/src/pages/settings.rs b/frontend/src/pages/settings.rs
new file mode 100644
index 0000000..19944a2
--- /dev/null
+++ b/frontend/src/pages/settings.rs
@@ -0,0 +1,86 @@
+use yew::prelude::*;
+
+use crate::api;
+use crate::types::AppConfig;
+
+#[function_component(SettingsPage)]
+pub fn settings_page() -> Html {
+    let config = use_state(|| None::<AppConfig>);
+    let error = use_state(|| None::<String>);
+    let message = use_state(|| None::<String>);
+
+    {
+        let config = config.clone();
+        let error = error.clone();
+        use_effect_with((), move |_| {
+            wasm_bindgen_futures::spawn_local(async move {
+                match api::get_config().await {
+                    Ok(c) => config.set(Some(c)),
+                    Err(e) => error.set(Some(e.0)),
+                }
+            });
+        });
+    }
+
+    let trigger = |action: &'static str| {
+        let message = message.clone();
+        let error = error.clone();
+        Callback::from(move |_: MouseEvent| {
+            let message = message.clone();
+            let error = error.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                let result = match action {
+                    "index" => api::trigger_index().await,
+                    "tag" => api::trigger_tag().await,
+                    "organize" => api::trigger_organize().await,
+                    _ => return,
+                };
+                match result {
+                    Ok(t) => message.set(Some(format!("{action} started (task: {})", t.task_id))),
+                    Err(e) => error.set(Some(e.0)),
+                }
+            });
+        })
+    };
+
+    html! {
+        <div>
+            <div class="page-header">
+                <h2>{ "Settings" }</h2>
+            </div>
+
+            if let Some(ref msg) = *message {
+                <div class="card" style="border-color: var(--success);">{ msg }</div>
+            }
+            if let Some(ref err) = *error {
+                <div class="card error">{ err }</div>
+            }
+
+            <div class="card">
+                <h3>{ "Actions" }</h3>
+                <div class="actions mt-1">
+                    <button class="btn btn-primary" onclick={trigger("index")}>{ "Re-index Library" }</button>
+                    <button class="btn btn-primary" onclick={trigger("tag")}>{ "Auto-tag Tracks" }</button>
+                    <button class="btn btn-primary" onclick={trigger("organize")}>{ "Organize Files" }</button>
+                </div>
+            </div>
+
+            { match &*config {
+                None => html! { <p class="loading">{ "Loading configuration..." }</p> },
+                Some(c) => html! {
+                    <div class="card mt-2">
+                        <h3>{ "Configuration" }</h3>
+                        <table>
+                            <tbody>
+                                <tr><td class="text-muted">{ "Library Path" }</td><td>{ &c.library_path }</td></tr>
+                                <tr><td class="text-muted">{ "Database URL" }</td><td class="text-sm">{ &c.database_url }</td></tr>
+                                <tr><td class="text-muted">{ "Download Path" }</td><td>{ &c.download_path }</td></tr>
+                                <tr><td class="text-muted">{ "Organization Format" }</td><td><code>{ &c.organization_format }</code></td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                },
+            }}
+        </div>
+    }
+}
diff --git a/frontend/src/types.rs b/frontend/src/types.rs
new file mode 100644
index 0000000..0f932be
--- /dev/null
+++ b/frontend/src/types.rs
@@ -0,0 +1,166 @@
+use serde::{Deserialize, Serialize};
+
+// --- Library entities ---
+
+#[derive(Debug, Clone, PartialEq, Deserialize, Serialize)]
+pub struct Artist {
+    pub id: i32,
+    pub name: String,
+    pub musicbrainz_id: Option<String>,
+}
+
+#[derive(Debug, Clone, PartialEq, Deserialize, Serialize)]
+pub struct Album {
+    pub id: i32,
+    pub name: String,
+    pub album_artist: String,
+    pub year: Option<i32>,
+    pub genre: Option<String>,
+    pub musicbrainz_id: Option<String>,
+}
+
+#[derive(Debug, Clone, PartialEq, Deserialize, Serialize)]
+pub struct Track {
+    pub id: i32,
+    pub file_path: String,
+    pub title: Option<String>,
+    pub artist: Option<String>,
+    pub album: Option<String>,
+    pub track_number: Option<i32>,
+    pub year: Option<i32>,
+    pub genre: Option<String>,
+    pub codec: Option<String>,
+}
+
+#[derive(Debug, Clone, PartialEq, Deserialize)]
+pub struct ArtistDetail {
+    pub artist: Artist,
+    pub albums: Vec<Album>,
+}
+
+#[derive(Debug, Clone, PartialEq, Deserialize)]
+pub struct AlbumDetail {
+    pub album: Album,
+    pub tracks: Vec<Track>,
+}
+
+// --- Search results ---
+
+#[derive(Debug, Clone, PartialEq, Deserialize)]
+pub struct ArtistResult {
+    pub id: String,
+    pub name: String,
+    pub disambiguation: Option<String>,
+    pub country: Option<String>,
+    pub artist_type: Option<String>,
+    pub score: u8,
+}
+
+#[derive(Debug, Clone, PartialEq, Deserialize)]
+pub struct AlbumResult {
+    pub id: String,
+    pub title: String,
+    pub artist: String,
+    pub artist_id: Option<String>,
+    pub year: Option<String>,
+    pub track_count: Option<i32>,
+    pub score: u8,
+}
+
+#[derive(Debug, Clone, PartialEq, Deserialize)]
+pub struct TrackResult {
+    pub id: String,
+    pub title: String,
+    pub artist: String,
+    pub artist_id: Option<String>,
+    pub album: Option<String>,
+    pub score: u8,
+}
+
+// --- Watchlist ---
+
+#[derive(Debug, Clone, PartialEq, Deserialize)]
+pub struct WatchListEntry {
+    pub id: i32,
+    pub item_type: String,
+    pub name: String,
+    pub artist_name: Option<String>,
+    pub status: String,
+}
+
+// --- Downloads ---
+
+#[derive(Debug, Clone, PartialEq, Deserialize)]
+pub struct DownloadItem {
+    pub id: i32,
+    pub query: String,
+    pub status: String,
+    pub source_url: Option<String>,
+    pub error_message: Option<String>,
+    pub retry_count: i32,
+}
+
+// --- Tasks ---
+
+#[derive(Debug, Clone, PartialEq, Deserialize)]
+pub struct TaskInfo {
+    pub id: String,
+    pub task_type: String,
+    pub status: String,
+    pub result: Option<String>,
+}
+
+#[derive(Debug, Clone, PartialEq, Deserialize)]
+pub struct TaskRef {
+    pub task_id: String,
+}
+
+// --- Status ---
+
+#[derive(Debug, Clone, PartialEq, Deserialize)]
+pub struct Status {
+    pub library: LibrarySummary,
+    pub queue: QueueStatus,
+    pub tasks: Vec<TaskInfo>,
+}
+
+#[derive(Debug, Clone, PartialEq, Deserialize)]
+pub struct LibrarySummary {
+    pub total_items: u64,
+    pub wanted: u64,
+    pub available: u64,
+    pub downloaded: u64,
+    pub owned: u64,
+}
+
+#[derive(Debug, Clone, PartialEq, Deserialize)]
+pub struct QueueStatus {
+    pub pending: usize,
+    pub downloading: usize,
+}
+
+// --- API responses ---
+
+#[derive(Debug, Clone, PartialEq, Deserialize)]
+pub struct AddSummary {
+    pub tracks_added: u64,
+    pub tracks_already_owned: u64,
+    pub errors: u64,
+}
+
+#[derive(Debug, Clone, PartialEq, Deserialize)]
+pub struct SyncStats {
+    pub found: u64,
+    pub enqueued: u64,
+    pub skipped: u64,
+}
+
+// --- Config ---
+
+#[derive(Debug, Clone, PartialEq, Deserialize)]
+pub struct AppConfig {
+    pub library_path: String,
+    pub database_url: String,
+    pub download_path: String,
+    pub organization_format: String,
+}
diff --git a/frontend/style.css b/frontend/style.css
new file mode 100644
index 0000000..a3a30ff
--- /dev/null
+++ b/frontend/style.css
@@ -0,0 +1,164 @@
+:root {
+    --bg-primary: #0f172a;
+    --bg-secondary: #1e293b;
+    --bg-card: #334155;
+    --bg-input: #1e293b;
+    --text-primary: #e2e8f0;
+    --text-secondary: #94a3b8;
+    --text-muted: #64748b;
+    --accent: #3b82f6;
+    --accent-hover: #2563eb;
+    --success: #22c55e;
+    --warning: #eab308;
+    --danger: #ef4444;
+    --border: #475569;
+    --radius: 8px;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    line-height: 1.6;
+}
+
+a { color: var(--accent); text-decoration: none; }
+a:hover { color: var(--accent-hover); }
+
+/* Layout */
+.app { display: flex; min-height: 100vh; }
+.sidebar {
+    width: 220px;
+    background: var(--bg-secondary);
+    padding: 1rem;
+    border-right: 1px solid var(--border);
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    overflow-y: auto;
+}
+.sidebar h1 { font-size: 1.5rem; margin-bottom: 2rem; color: var(--accent); }
+.sidebar nav a {
+    display: block;
+    padding: 0.5rem 0.75rem;
+    margin-bottom: 0.25rem;
+    border-radius: var(--radius);
+    color: var(--text-secondary);
+    transition: background 0.15s;
+}
+.sidebar nav a:hover, .sidebar nav a.active {
+    background: var(--bg-card);
+    color: var(--text-primary);
+}
+.main-content {
+    margin-left: 220px;
+    flex: 1;
+    padding: 2rem;
+    max-width: 1200px;
+}
+
+/* Cards */
+.card {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+}
+.card h3 { margin-bottom: 0.5rem; }
+
+/* Stats grid */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+.stat-card {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1rem;
+    text-align: center;
+}
+.stat-card .value { font-size: 2rem; font-weight: bold; color: var(--accent); }
+.stat-card .label { font-size: 0.85rem; color: var(--text-secondary); }
+
+/* Tables */
+table { width: 100%; border-collapse: collapse; }
+th, td { text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--border); }
+th { color: var(--text-secondary); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; }
+tr:hover { background: var(--bg-card); }
+
+/* Buttons */
+.btn {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: var(--radius);
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: background 0.15s;
+}
+.btn-primary { background: var(--accent); color: white; }
+.btn-primary:hover { background: var(--accent-hover); }
+.btn-success { background: var(--success); color: white; }
+.btn-danger { background: var(--danger); color: white; }
+.btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); }
+.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
+
+/* Forms */
+input, select {
+    background: var(--bg-input);
+    color: var(--text-primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 0.5rem 0.75rem;
+    font-size: 0.95rem;
+    width: 100%;
+}
+input:focus, select:focus { outline: none; border-color: var(--accent); }
+.search-bar { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
+.search-bar input { flex: 1; }
+.search-bar select { width: auto; min-width: 120px; }
+
+/* Badges */
+.badge {
+    display: inline-block;
+    padding: 0.15rem 0.5rem;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+.badge-wanted { background: var(--warning); color: #000; }
+.badge-available { background: var(--accent); color: white; }
+.badge-downloaded { background: var(--success); color: white; }
+.badge-owned { background: #6366f1; color: white; }
+.badge-pending { background: var(--text-muted); color: white; }
+.badge-failed { background: var(--danger); color: white; }
+.badge-completed { background: var(--success); color: white; }
+
+/* Page header */
+.page-header { margin-bottom: 1.5rem; }
+.page-header h2 { font-size: 1.5rem; }
+.page-header p { color: var(--text-secondary); }
+
+/* Utility */
+.mt-1 { margin-top: 0.5rem; }
+.mt-2 { margin-top: 1rem; }
+.mb-1 { margin-bottom: 0.5rem; }
+.mb-2 { margin-bottom: 1rem; }
+.flex { display: flex; }
+.gap-1 { gap: 0.5rem; }
+.gap-2 { gap: 1rem; }
+.items-center { align-items: center; }
+.justify-between { justify-content: space-between; }
+.text-muted { color: var(--text-secondary); }
+.text-sm { font-size: 0.85rem; }
+.loading { color: var(--text-muted); font-style: italic; }
+.error { color: var(--danger); }
+.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
diff --git a/src/main.rs b/src/main.rs
index 9a297fb..4199649 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -66,8 +66,30 @@ async fn main() -> anyhow::Result<()> {
         tasks: TaskManager::new(),
     });
 
+    // Resolve static files directory relative to the binary location
+    let static_dir = std::env::current_exe()
+        .ok()
+        .and_then(|exe| exe.parent().map(|p| p.to_owned()))
+        .map(|p| p.join("static"))
+        .unwrap_or_else(|| std::path::PathBuf::from("static"));
+
+    // Also check next to the crate root (for development)
+    let static_dir = if static_dir.is_dir() {
+        static_dir
+    } else {
+        let dev_path = std::path::PathBuf::from(env!("CARGO_MANIFEST_DIR")).join("static");
+        if dev_path.is_dir() {
+            dev_path
+        } else {
+            tracing::warn!("static directory not found — frontend will not be served");
+            static_dir
+        }
+    };
+    tracing::info!(path = %static_dir.display(), "serving static files");
+
     HttpServer::new(move || {
         let cors = Cors::permissive();
+        let static_dir = static_dir.clone();
 
         App::new()
             .wrap(cors)
@@ -75,10 +97,23 @@ async fn main() -> anyhow::Result<()> {
             .app_data(state.clone())
             .configure(routes::configure)
             .service(
-                actix_files::Files::new("/", "static/")
+                actix_files::Files::new("/", static_dir.clone())
                     .index_file("index.html")
                     .prefer_utf8(true),
             )
+            // SPA fallback: serve index.html for any route not matched
+            // by API or static files, so client-side routing works on refresh
+            .default_service(web::to({
+                let index_path = static_dir.join("index.html");
+                move |req: actix_web::HttpRequest| {
+                    let index_path = index_path.clone();
+                    async move {
+                        actix_files::NamedFile::open_async(index_path)
+                            .await
+                            .map(|f| f.into_response(&req))
+                    }
+                }
+            }))
     })
     .bind(&bind)?
     .run()