I hate this fucking language.

public/app.js

@@ -89,25 +89,36 @@ async function handleSnooze(slotId, minutes) {
   }
 }
 
-const ROAST_CACHE_KEY = "medis-roast-day";
+const MOTIVATION_CACHE_KEY = "medis-motivation-day";
 
-async function loadRoast(day) {
+function showMotivationFromCache(day) {
+  const el = document.getElementById("motivationText");
+  const cached = JSON.parse(sessionStorage.getItem(MOTIVATION_CACHE_KEY) || "null");
+  if (cached?.day === day && cached?.text) {
+    el.textContent = cached.text;
+    return true;
+  }
+  return false;
+}
+
+async function loadMotivation(day) {
   try {
-    const cached = JSON.parse(sessionStorage.getItem(ROAST_CACHE_KEY) || "null");
-    if (cached?.day === day && cached?.text) return cached;
-    const roast = await api.roast();
-    sessionStorage.setItem(ROAST_CACHE_KEY, JSON.stringify({ day: roast.day, text: roast.text }));
-    return roast;
+    const motivation = await api.roast();
+    sessionStorage.setItem(MOTIVATION_CACHE_KEY, JSON.stringify({ day: motivation.day, text: motivation.text }));
+    document.getElementById("motivationText").textContent = motivation.text;
   } catch {
-    return { text: "Dein Gebrain wartet auf Koffein und Medis." };
+    document.getElementById("motivationText").textContent = "Dein Gehirn ist nicht kaputt. Es wartet nur auf den richtigen Treiber.";
   }
 }
 
 async function refreshDashboard(stats) {
   const today = await api.today();
-  const roast = await loadRoast(today.day);
   renderSlots(today.slots, handleTake, handleSnooze);
-  document.getElementById("roastText").textContent = roast.text;
+
+  if (!showMotivationFromCache(today.day)) {
+    document.getElementById("motivationText").textContent = "…";
+    loadMotivation(today.day);
+  }
 
   const s = stats || await api.stats();
   updateStats(s);

public/index.html

@@ -45,9 +45,9 @@
 
       <main class="tabContent">
         <div id="tab-dashboard" class="tabPanel active">
-          <div class="roastCard" id="roastCard">
-            <div class="roastLabel">Roast of the Day</div>
-            <p id="roastText">Lade Roast…</p>
+          <div class="motivationCard" id="motivationCard">
+            <div class="motivationLabel">ADHD live, laugh, toaster bath motivational</div>
+            <p id="motivationText">…</p>
           </div>
           <div id="slotCards" class="slotCards"></div>
         </div>
@@ -60,7 +60,7 @@
             </div>
             <div class="statBox">
               <div class="statNum" id="statCompliance">0%</div>
-              <div class="statLabel">90 Tage</div>
+              <div class="statLabel" id="statComplianceLabel">90 Tage</div>
             </div>
             <div class="statBox">
               <div class="statNum" id="statTaken">0</div>

public/lib/ui.js

@@ -80,6 +80,8 @@ export function renderHeatmap(days) {
 export function updateStats(stats) {
   document.getElementById("statStreak").textContent = stats.streak;
   document.getElementById("statCompliance").textContent = `${stats.compliance_percent}%`;
+  const windowDays = stats.compliance_window_days ?? 90;
+  document.getElementById("statComplianceLabel").textContent = windowDays === 1 ? "1 Tag" : `${windowDays} Tage`;
   document.getElementById("statTaken").textContent = stats.total_taken;
   document.getElementById("streakBadge").textContent = `🔥 ${stats.streak}`;
 }

public/styles.css

@@ -97,17 +97,18 @@ body {
 @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
 
 /* Cards */
-.roastCard, .oracleCard {
+.roastCard, .oracleCard, .motivationCard {
   background: linear-gradient(135deg, var(--bg-card) 0%, #3a1855 100%);
   border: 2px solid var(--accent-purple);
   border-radius: var(--radius); padding: 1rem 1.25rem;
   margin-bottom: 1.25rem; box-shadow: 0 4px 20px rgba(124,77,255,.2);
 }
-.roastLabel, .oracleLabel {
-  font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
+.roastLabel, .oracleLabel, .motivationLabel {
+  font-size: .65rem; text-transform: uppercase; letter-spacing: .06em;
+  line-height: 1.35;
   color: var(--accent-purple); margin-bottom: .5rem; font-weight: 600;
 }
-.roastCard p, .oracleCard p { line-height: 1.5; font-size: .95rem; }
+.roastCard p, .oracleCard p, .motivationCard p { line-height: 1.5; font-size: .95rem; }
 
 .slotCards { display: flex; flex-direction: column; gap: 1rem; }