feat(web): reading-font picker + honest live-session activity-feed empty state

NOTE: this change originated in a concurrent session (not the struggle-pipeline
work); committed here to leave a clean working tree. Complete and tested
(43 web-vendor/session tests pass).

- Reading-font picker: inter (default), lexend, atkinson, system, serif —
  independent of the OpenDyslexic toggle, persisted in localStorage, applied
  on init. Vendored Lexend + Atkinson Hyperlegible woff2 + CSS offline.
- sw.js cache bumped v11 → v12 to pick up the new vendor assets.
- Activity feed: when a session is live, show an honest "Session live — wins
  and parked questions appear here as you record them" empty state instead of
  implying the feed is stuck waiting.

Author: taylaand

packages/studyloop/src/studyloop/web/routes/session.py

@@ -121,6 +121,15 @@ def _render_activity_feed(state: dict) -> str:
     parking = state.get("parking", [])
 
     if not topics and not parking:
+        # The feed reflects recorded progress (wins/insights/struggles) and
+        # parked questions — not raw chat turns. When a session is live, say
+        # so honestly rather than implying the feed is stuck "waiting".
+        active = bool(state.get("study_session_id")) and state.get("mode") != "ended"
+        if active:
+            return (
+                '<p class="activity-empty">Session live — wins and parked '
+                "questions appear here as you record them.</p>"
+            )
         return '<p class="activity-empty">Waiting for session activity...</p>'
 
     items: list[str] = []

packages/studyloop/src/studyloop/web/static/components.js

@@ -48,13 +48,17 @@ document.addEventListener("alpine:init", () => {
        catppuccin-latte. The legacy `light` toggle stays for backward
        compatibility but the palette is the canonical readability lever. */
     palette: localStorage.getItem("palette") || "tokyo-night",
+    /* Reading-font picker: inter (default), lexend, atkinson, system, serif.
+       Independent of the OpenDyslexic toggle, which overrides when active. */
+    font: localStorage.getItem("font") || "inter",
     _preferredVoice: null,
     _voicesLoaded: false,
 
     init() {
       if (this.dyslexic) document.body.classList.add("dyslexic");
       if (this.light) document.body.classList.add("light");
       this._applyPalette();
+      this._applyFont();
       this.loadVoices();
       if (window.speechSynthesis) {
         window.speechSynthesis.onvoiceschanged = () => this.loadVoices();
@@ -79,6 +83,14 @@ document.addEventListener("alpine:init", () => {
         "dracula",
         "catppuccin-mocha",
         "catppuccin-latte",
+        "nord",
+        "gruvbox-dark",
+        "gruvbox-light",
+        "solarized-dark",
+        "solarized-light",
+        "one-dark",
+        "rose-pine",
+        "everforest",
       ];
       if (!allowed.includes(name)) return;
       this.palette = name;
@@ -95,6 +107,23 @@ document.addEventListener("alpine:init", () => {
       }
     },
 
+    setFont(name) {
+      const allowed = ["inter", "lexend", "atkinson", "system", "serif"];
+      if (!allowed.includes(name)) return;
+      this.font = name;
+      localStorage.setItem("font", name);
+      this._applyFont();
+    },
+
+    _applyFont() {
+      /* `inter` is the bare :root state — drop the data attribute. */
+      if (this.font === "inter") {
+        document.body.removeAttribute("data-font");
+      } else {
+        document.body.setAttribute("data-font", this.font);
+      }
+    },
+
     toggleVoice() {
       this.voiceOn = !this.voiceOn;
       localStorage.setItem("voice", this.voiceOn);

packages/studyloop/src/studyloop/web/static/style.css

@@ -1,5 +1,7 @@
 @import url("/vendor/css/inter.css");
 @import url("/vendor/css/opendyslexic-400.css");
+@import url("/vendor/css/lexend.css");
+@import url("/vendor/css/atkinson-hyperlegible.css");
 
 :root {
   --bg: #1a1b26;
@@ -59,6 +61,14 @@ body.dyslexic {
   line-height: 1.8;
 }
 
+/* Reading-font picker — swaps the base --font. Default (no data-font) is
+   Inter, defined in :root. The OpenDyslexic toggle (body.dyslexic) still
+   overrides everything when active, since it sets font-family directly. */
+body[data-font="lexend"]   { --font: "Lexend", system-ui, sans-serif; }
+body[data-font="atkinson"] { --font: "Atkinson Hyperlegible", system-ui, sans-serif; }
+body[data-font="system"]   { --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
+body[data-font="serif"]    { --font: Georgia, "Times New Roman", serif; }
+
 /* --- Header --- */
 header {
   display: flex;
@@ -2471,6 +2481,126 @@ body[data-palette="catppuccin-latte"] {
   --border:    #ccd0da;
 }
 
+/* Nord — https://www.nordtheme.com */
+body[data-palette="nord"] {
+  --bg:        #2e3440;
+  --bg-card:   #3b4252;
+  --bg-hover:  #434c5e;
+  --text:      #eceff4;
+  --text-muted:#9099ab;
+  --accent:    #88c0d0;
+  --green:     #a3be8c;
+  --red:       #bf616a;
+  --yellow:    #ebcb8b;
+  --orange:    #d08770;
+  --border:    #434c5e;
+}
+
+/* Gruvbox Dark — https://github.com/morhetz/gruvbox */
+body[data-palette="gruvbox-dark"] {
+  --bg:        #282828;
+  --bg-card:   #3c3836;
+  --bg-hover:  #504945;
+  --text:      #ebdbb2;
+  --text-muted:#a89984;
+  --accent:    #83a598;
+  --green:     #b8bb26;
+  --red:       #fb4934;
+  --yellow:    #fabd2f;
+  --orange:    #fe8019;
+  --border:    #504945;
+}
+
+/* Gruvbox Light */
+body[data-palette="gruvbox-light"] {
+  --bg:        #fbf1c7;
+  --bg-card:   #f2e5bc;
+  --bg-hover:  #ebdbb2;
+  --text:      #3c3836;
+  --text-muted:#7c6f64;
+  --accent:    #076678;
+  --green:     #79740e;
+  --red:       #9d0006;
+  --yellow:    #b57614;
+  --orange:    #af3a03;
+  --border:    #d5c4a1;
+}
+
+/* Solarized Dark — https://ethanschoonover.com/solarized */
+body[data-palette="solarized-dark"] {
+  --bg:        #002b36;
+  --bg-card:   #073642;
+  --bg-hover:  #094f5e;
+  --text:      #93a1a1;
+  --text-muted:#586e75;
+  --accent:    #268bd2;
+  --green:     #859900;
+  --red:       #dc322f;
+  --yellow:    #b58900;
+  --orange:    #cb4b16;
+  --border:    #0a4b5a;
+}
+
+/* Solarized Light */
+body[data-palette="solarized-light"] {
+  --bg:        #fdf6e3;
+  --bg-card:   #eee8d5;
+  --bg-hover:  #e6dfc6;
+  --text:      #586e75;
+  --text-muted:#93a1a1;
+  --accent:    #268bd2;
+  --green:     #859900;
+  --red:       #dc322f;
+  --yellow:    #b58900;
+  --orange:    #cb4b16;
+  --border:    #ddd6c1;
+}
+
+/* One Dark — Atom */
+body[data-palette="one-dark"] {
+  --bg:        #282c34;
+  --bg-card:   #21252b;
+  --bg-hover:  #2c313a;
+  --text:      #abb2bf;
+  --text-muted:#5c6370;
+  --accent:    #61afef;
+  --green:     #98c379;
+  --red:       #e06c75;
+  --yellow:    #e5c07b;
+  --orange:    #d19a66;
+  --border:    #3e4451;
+}
+
+/* Rosé Pine — https://rosepinetheme.com */
+body[data-palette="rose-pine"] {
+  --bg:        #191724;
+  --bg-card:   #1f1d2e;
+  --bg-hover:  #26233a;
+  --text:      #e0def4;
+  --text-muted:#908caa;
+  --accent:    #c4a7e7;  /* iris */
+  --green:     #9ccfd8;  /* foam */
+  --red:       #eb6f92;  /* love */
+  --yellow:    #f6c177;  /* gold */
+  --orange:    #ebbcba;  /* rose */
+  --border:    #26233a;
+}
+
+/* Everforest Dark — https://github.com/sainnhe/everforest */
+body[data-palette="everforest"] {
+  --bg:        #2d353b;
+  --bg-card:   #343f44;
+  --bg-hover:  #3d484d;
+  --text:      #d3c6aa;
+  --text-muted:#859289;
+  --accent:    #83c092;  /* aqua */
+  --green:     #a7c080;
+  --red:       #e67e80;
+  --yellow:    #dbbc7f;
+  --orange:    #e69875;
+  --border:    #475258;
+}
+
 /* Palette dropdown styling — match the existing toggle-btn aesthetic. */
 .palette-select {
   background: var(--bg-card);

packages/studyloop/src/studyloop/web/static/sw.js

@@ -12,13 +12,18 @@ self.addEventListener("activate", (e) => {
 });
 return;
 
-const CACHE = "studyloop-v11";
+const CACHE = "studyloop-v12";
 const ASSETS = [
   "/", "/style.css", "/components.js", "/manifest.json",
   "/vendor/js/htmx-2.0.4.min.js", "/vendor/js/htmx-ext-sse-2.2.2.js",
   "/vendor/js/alpine-3.14.8.min.js", "/vendor/css/opendyslexic-400.css",
   "/vendor/css/inter.css", "/vendor/css/files/inter-latin.woff2",
   "/vendor/css/files/inter-latin-ext.woff2",
+  "/vendor/css/lexend.css", "/vendor/css/files/lexend-latin-400.woff2",
+  "/vendor/css/files/lexend-latin-700.woff2",
+  "/vendor/css/atkinson-hyperlegible.css",
+  "/vendor/css/files/atkinson-hyperlegible-latin-400.woff2",
+  "/vendor/css/files/atkinson-hyperlegible-latin-700.woff2",
 ];
 
 self.addEventListener("install", (e) => {

packages/studyloop/src/studyloop/web/static/vendor/css/atkinson-hyperlegible.css

@@ -0,0 +1,16 @@
+/* Atkinson Hyperlegible — vendored from Google Fonts (latin, offline PWA). */
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/atkinson-hyperlegible-latin-400.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/atkinson-hyperlegible-latin-700.woff2) format('woff2');
+}

packages/studyloop/src/studyloop/web/static/vendor/css/files/atkinson-hyperlegible-latin-400.woff2

@@ -0,0 +1,16 @@
+/* Lexend — vendored from Google Fonts (latin, offline PWA). */
+
+@font-face {
+  font-family: 'Lexend';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(./files/lexend-latin-400.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Lexend';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/lexend-latin-700.woff2) format('woff2');
+}