ygncode · setkyar · May 31, 2026 · May 31, 2026 · May 31, 2026 · May 31, 2026
diff --git a/internal/ui/live_menu.go b/internal/ui/live_menu.go
@@ -106,6 +106,7 @@ func sessionMenuHTML(id, class, bodyClass, itemClass, toggleID, themeIconClass,
 				{Label: "<span>Appearance</span>", Suffix: template.HTML("<span class=\"" + themeIconClass + "\" data-command-theme-icon>◐</span>"), Attrs: `data-action="theme"`},
 				{Label: "<span>Notifications</span>", Suffix: template.HTML("<span class=\"" + toggleClass + "\" id=\"" + toggleID + "\">OFF</span><select class=\"sound-selector\" style=\"display: none;\" data-action=\"select-sound\"></select>"), ExtraClass: itemClass + "-toggle", Attrs: `data-action="notifications"`},
 				{Label: "<span>Spinner</span>", Suffix: template.HTML("<span class=\"" + toggleClass + "\" id=\"" + strings.Replace(toggleID, "notify", "spinner", 1) + "\">RUNCAT</span>"), ExtraClass: itemClass + "-toggle", Attrs: `data-action="spinner"`},
+				{Label: "<span>Cat Gatekeeper</span>", Suffix: "<span>›</span>", Attrs: `data-action="cat-gatekeeper"`},
 			}},
 			{Title: "Development", Items: []liveMenuItem{
 				{Label: "Resume via Terminal", Attrs: `data-action="terminal"`},

diff --git a/internal/ui/live_templates/assets/cat.webm b/internal/ui/live_templates/assets/cat.webm
diff --git a/internal/ui/live_templates/styles/session.css b/internal/ui/live_templates/styles/session.css
@@ -3836,5 +3836,199 @@
       color: var(--error, #cc6666);
     }
 
+    /* ===================================================================
+       Cat Gatekeeper — focus/break + bedtime overlay (live app only).
+       The overlay DOM is created by web/src/session/cat-gatekeeper/.
+       =================================================================== */
 
+    .cat-overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 2147483000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      background: radial-gradient(circle at 50% 40%, rgba(20, 22, 30, 0.92), rgba(8, 9, 13, 0.98));
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.45s ease, visibility 0s linear 0.45s;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    .cat-overlay.visible {
+      opacity: 1;
+      visibility: visible;
+      transition: opacity 0.45s ease;
+    }
+
+    .cat-overlay-hidden {
+      pointer-events: none;
+    }
+
+    .cat-overlay--sleep,
+    .cat-overlay--locked {
+      background: radial-gradient(circle at 50% 35%, rgba(14, 16, 34, 0.95), rgba(4, 4, 12, 0.99));
+    }
+
+    /* Full-screen stage; the cat fills it and the countdown floats in its own
+       box up top so text never lands on the cat (à la Cat Gatekeeper). */
+    .cat-overlay-inner {
+      position: absolute;
+      inset: 0;
+    }
+
+    .cat-art {
+      position: absolute;
+      inset: 0;
+      width: 100vw;
+      height: 100vh;
+      line-height: 0;
+    }
+
+    /* The cat is a background-removed (alpha) clip, so it floats full-screen
+       with no card/frame — just a soft shadow — and slides in from the side. */
+    .cat-video {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.55));
+    }
+
+    /* Our cat is lounging, not walking, so a horizontal slide looks off — it
+       just gently fades and settles into view instead. */
+    .cat-overlay.visible .cat-art {
+      animation: cat-settle-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
+    }
+
+    @keyframes cat-settle-in {
+      from { opacity: 0; transform: translateY(28px) scale(0.94); }
+      to   { opacity: 1; transform: translateY(0) scale(1); }
+    }
+
+    /* Bedtime cat reads calmer/dimmed. */
+    .cat-overlay--sleep .cat-video,
+    .cat-overlay--locked .cat-video {
+      filter: grayscale(0.55) brightness(0.62) saturate(0.8) drop-shadow(0 18px 38px rgba(0, 0, 0, 0.55));
+    }
+
+    .cat-timer,
+    .cat-message {
+      position: absolute;
+      top: 7vh;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 2;
+      text-align: center;
+      font-family: var(--font-sans, sans-serif);
+      background: rgba(0, 0, 0, 0.58);
+      border-radius: 22px;
+      backdrop-filter: blur(2px);
+      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
+    }
+
+    .cat-timer {
+      font-size: clamp(64px, 13vw, 150px);
+      font-weight: 700;
+      color: #ffffff;
+      letter-spacing: 2px;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      padding: 22px 52px;
+    }
+
+    .cat-message {
+      font-size: clamp(22px, 4vw, 40px);
+      font-weight: 600;
+      color: rgba(255, 255, 255, 0.95);
+      line-height: 1.25;
+      max-width: 80vw;
+      padding: 22px 40px;
+    }
+
+    .cat-overlay--locked .cat-message {
+      color: rgba(207, 211, 255, 0.95);
+    }
+
+    /* --- settings sheet form --- */
+    .cat-settings { display: flex; flex-direction: column; gap: 4px; }
+
+    .cat-settings-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      padding: 14px 4px;
+      border-bottom: 1px solid var(--border);
+      cursor: pointer;
+    }
+    .cat-settings-row:last-of-type { border-bottom: none; }
+
+    .cat-settings-label {
+      font-size: 14px;
+      color: var(--text);
+      font-weight: 500;
+    }
+
+    .cat-settings-hint {
+      font-size: 12px;
+      color: var(--muted);
+      font-weight: 400;
+      margin-top: 3px;
+    }
+
+    .cat-settings-number,
+    .cat-settings-time {
+      flex: 0 0 auto;
+      width: 90px;
+      padding: 6px 8px;
+      font: inherit;
+      font-size: 14px;
+      text-align: right;
+      color: var(--text);
+      background: var(--container-bg);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+    }
+    .cat-settings-time { width: 110px; }
+
+    .cat-settings-toggle {
+      width: 18px;
+      height: 18px;
+      accent-color: var(--accent);
+      cursor: pointer;
+    }
+
+    .cat-settings-status {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      margin-top: 14px;
+      padding: 14px;
+      background: var(--container-bg);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+    }
+
+    .cat-settings-status-text {
+      font-size: 13px;
+      color: var(--text-soft, var(--muted));
+    }
+
+    .cat-settings-skip {
+      flex: 0 0 auto;
+      padding: 8px 14px;
+      font: inherit;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--bg, #111);
+      background: var(--accent);
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+    .cat-settings-skip:hover { filter: brightness(1.08); }
 
diff --git a/internal/ui/pwa.go b/internal/ui/pwa.go
@@ -1,8 +1,10 @@
 package ui
 
 import (
+	"bytes"
 	_ "embed"
 	"net/http"
+	"time"
 )
 
 //go:embed live_templates/assets/manifest.webmanifest
@@ -26,6 +28,9 @@ var CatMP3 []byte
 //go:embed live_templates/assets/done.mp3
 var DoneMP3 []byte
 
+//go:embed live_templates/assets/cat.webm
+var catWebm []byte
+
 //go:embed live_templates/styles/theme.css
 var themeCSS string
 
@@ -70,6 +75,11 @@ func RegisterPWAHandlers(mux *http.ServeMux) {
 		w.Header().Set("Cache-Control", "public, max-age=86400")
 		_, _ = w.Write([]byte(piLogoSVG))
 	})
+	mux.HandleFunc("/cat.webm", func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Content-Type", "video/webm")
+		w.Header().Set("Cache-Control", "public, max-age=86400")
+		http.ServeContent(w, r, "cat.webm", time.Time{}, bytes.NewReader(catWebm))
+	})
 	mux.HandleFunc("/theme.css", func(w http.ResponseWriter, r *http.Request) {
 		w.Header().Set("Content-Type", "text/css; charset=utf-8")
 		w.Header().Set("Cache-Control", "no-cache")